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 { border-color: var(--peach-t3); color: var(--peach-t1); }872.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }873.peach-icon-btn {874  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;875  display: inline-flex; align-items: center; justify-content: center;876}877878.peach-btn:focus-visible {879  outline: none;880  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);881}882883/* Lock button */884.peach-lock-icon { transform-origin: center; }885.peach-lock-btn.is-locking { color: var(--peach-accent); }886.peach-lock-btn.is-locking .peach-lock-icon {887  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);888}889890/* Biometric unlock button */891.peach-biometric-btn {892  display: flex;893  align-items: center;894  justify-content: center;895  gap: 6px;896  margin-top: 8px;897  width: 100%;898}899900/* Copy button */901.peach-copy-btn {902  position: relative; overflow: hidden;903  color: var(--peach-t2); border-color: var(--peach-t3);904}905.peach-copy-icon {906  display: inline-flex; align-items: center; justify-content: center;907  position: relative; z-index: 1;908}909.peach-copy-icon-svg { display: block; }910.peach-copy-sheen {911  position: absolute; inset: 0;912  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%);913  opacity: 0; transform: scaleX(0.15); transform-origin: left center;914}915.peach-copy-btn.is-copied {916  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;917  box-shadow:918    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),919    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),920    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);921}922.peach-copy-btn.is-copied .peach-copy-icon {923  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;924}925.peach-copy-btn.is-copied .peach-copy-sheen {926  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;927}928.peach-copy-btn.is-retreat {929  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;930}931.peach-copy-btn.is-retreat .peach-copy-sheen {932  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;933}934.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }935.peach-copy-drain-bar {936  display: block; width: 100%; height: 100%;937  background: var(--peach-accent); opacity: 0.7;938  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;939}940941/* Unlock screen elements */942.peach-unlock-headline {943  margin: 2px 0 0;944  font-family: var(--font-display);945  font-size: 52px; line-height: 0.95;946  font-style: italic; font-weight: 400;947}948.peach-subline {949  margin: 0;950  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;951  font-size: 0.625rem; color: var(--peach-t2); font-style: italic;952}953.peach-subline--lock {954  max-width: 248px;955  line-height: 1.5;956}957.peach-underline-input {958  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);959  padding: 6px 0; background: transparent; color: var(--peach-t0);960  outline: none;961  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;962  font-size: 0.8125rem;963  caret-color: var(--peach-accent);964}965.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }966.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }967.peach-hint {968  margin: 0;969  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;970  font-size: 0.625rem; color: var(--peach-t2);971}972.peach-unlock-footer {973  margin-top: 4px; display: flex; align-items: center; gap: 7px;974  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;975  font-size: 0.625rem; color: var(--peach-t2);976}977.peach-unlock-footer--lock {978  padding-top: 2px;979}980981/* Breach badge */982.peach-breach-badge {983  display: flex;984  position: relative;985  z-index: 1;986  align-items: center;987  gap: 7px;988  font-size: 0.5625rem;989  color: var(--peach-breach);990  padding: 5px 10px;991  margin-bottom: 4px;992  border-radius: 8px;993  background: rgba(220, 80, 60, 0.07);994  border: 1px solid rgba(220, 80, 60, 0.18);995  letter-spacing: 0.04em;996}997998.peach-breach-action {999  margin-left: auto;1000  font-size: 0.625rem;1001  padding: 3px 8px;1002}10031004.peach-password-value.is-breached {1005  color: rgba(220, 80, 60, 0.75);1006  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1007}10081009/* ── Overlay views ─────────────────────────────────────────────────── */1010.peach-overlay-view {1011  position: absolute;1012  inset: 0;1013  display: flex;1014  flex-direction: column;1015  background:1016    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1017    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1018    var(--peach-bg);1019  z-index: 2;1020  overflow: hidden;1021  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1022}1023@keyframes overlay-in {1024  from { opacity: 0; transform: translateY(8px); }1025  to   { opacity: 1; transform: translateY(0); }1026}1027.peach-overlay-view.ov-enter-up {1028  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1029}1030.peach-overlay-view.ov-exit-up {1031  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1032}1033.peach-overlay-view.ov-enter-right {1034  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1035}1036.peach-overlay-view.ov-exit-right {1037  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1038}10391040@keyframes ov-enter-up {1041  from { opacity: 0; transform: translateY(18px); }1042  to   { opacity: 1; transform: translateY(0); }1043}1044@keyframes ov-exit-up {1045  from { opacity: 1; transform: translateY(0); }1046  to   { opacity: 0; transform: translateY(-12px); }1047}1048@keyframes ov-enter-right {1049  from { opacity: 0; transform: translateX(20px); }1050  to   { opacity: 1; transform: translateX(0); }1051}1052@keyframes ov-exit-right {1053  from { opacity: 1; transform: translateX(0); }1054  to   { opacity: 0; transform: translateX(20px); }1055}10561057/* Overlay shared header */1058.peach-overlay-header {1059  padding: 10px 12px;1060  display: flex;1061  align-items: center;1062  gap: 8px;1063  border-bottom: 1px solid var(--peach-t3);1064  flex-shrink: 0;1065}1066.peach-overlay-title {1067  font-family: "IBM Plex Mono", monospace;1068  font-size: 0.5625rem;1069  text-transform: uppercase;1070  letter-spacing: 0.18em;1071  color: var(--peach-t2);1072  flex: 1;1073  text-align: center;1074}10751076.peach-overlay-card {1077  background: var(--peach-s1);1078  border: 1px solid var(--peach-t3);1079  border-radius: 12px;1080  overflow: hidden;1081  width: 100%;1082}10831084.peach-onboarding-alt-actions {1085  display: flex;1086  flex-direction: column;1087  gap: 4px;1088  padding: 0;1089}10901091.peach-settings-copy {1092  margin: 0 0 10px;1093  font-size: 0.6875rem;1094  line-height: 1.5;1095  color: var(--peach-t2);1096}10971098.peach-settings-copy strong {1099  color: var(--peach-t0);1100}11011102.peach-settings-copy--spacious {1103  margin-bottom: 12px;1104}11051106.peach-settings-copy--result {1107  color: var(--peach-accent);1108  font-size: 0.8125rem;1109  text-align: center;1110  padding: 8px 0;1111}11121113.peach-settings-copy--danger {1114  color: var(--peach-breach);1115}11161117.peach-settings-copy--success {1118  color: var(--peach-accent);1119}11201121.peach-inline-feedback {1122  font-size: 0.6875rem;1123  margin: 10px 0 0;1124}11251126.peach-inline-feedback--ok {1127  color: var(--peach-accent);1128}11291130.peach-inline-feedback--error {1131  color: var(--peach-breach);1132}11331134.peach-inline-feedback--muted {1135  color: var(--peach-t2);1136  font-size: 0.625rem;1137  margin: 4px 0;1138}11391140.peach-inline-feedback--spaced {1141  margin-top: 12px;1142}11431144.peach-settings-actions--row {1145  display: flex;1146  gap: 6px;1147}11481149.peach-settings-actions--end {1150  margin-top: 14px;1151  justify-content: flex-end;1152}11531154.peach-settings-stack {1155  display: flex;1156  flex-direction: column;1157  gap: 6px;1158}11591160.peach-settings-stack--tight {1161  gap: 4px;1162}11631164.peach-settings-stack--spacious {1165  gap: 8px;1166}11671168.peach-settings-input {1169  width: 100%;1170  box-sizing: border-box;1171  padding: 8px 10px;1172  background: rgba(0, 0, 0, 0.22);1173  border: 1px solid transparent;1174  border-radius: 6px;1175  color: var(--peach-t0);1176  font-family: var(--font-ui);1177  font-size: 0.75rem;1178  outline: none;1179  transition: border-color 120ms ease, background 120ms ease;1180}11811182.peach-settings-input:focus {1183  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1184  background: rgba(0, 0, 0, 0.28);1185}11861187.peach-settings-input[type="password"] {1188  font-family: var(--font-mono);1189  letter-spacing: 0.04em;1190}11911192.peach-hidden-file-input {1193  display: none;1194}11951196.peach-checkbox-note {1197  display: flex;1198  align-items: flex-start;1199  gap: 8px;1200  font-size: 0.6875rem;1201  color: var(--peach-t1);1202  cursor: pointer;1203  margin: 12px 0;1204}12051206.peach-checkbox-note input {1207  margin-top: 1px;1208}12091210.peach-danger-notice {1211  background: rgba(220, 80, 60, 0.08);1212  border: 1px solid rgba(220, 80, 60, 0.2);1213  border-radius: 6px;1214  padding: 9px 11px;1215  font-size: 0.6875rem;1216  color: var(--peach-t1);1217  line-height: 1.5;1218}12191220.peach-info-notice {1221  font-size: 0.6875rem;1222  color: var(--peach-t1);1223  line-height: 1.5;1224  background: var(--surface-card);1225  border: 1px solid var(--peach-t3);1226  border-radius: 6px;1227  padding: 8px 10px;1228}12291230.peach-info-notice--warn {1231  border-color: rgba(220, 38, 38, 0.4);1232  background: rgba(220, 38, 38, 0.06);1233  color: rgba(220, 38, 38, 0.92);1234  margin-bottom: 8px;1235}12361237.peach-strength-row {1238  display: flex;1239  align-items: center;1240  gap: 8px;1241  margin-bottom: 10px;1242}12431244.peach-strength-track {1245  flex: 1;1246  height: 4px;1247  background: var(--peach-s2);1248  border-radius: 2px;1249  overflow: hidden;1250}12511252.peach-strength-fill {1253  height: 100%;1254  border-radius: 2px;1255  transition: width 120ms ease, background 120ms ease;1256}12571258/* ── Type selector tabs ── */1259.peach-type-tabs {1260  display: flex;1261  gap: 0;1262  background: var(--peach-t4);1263  border-radius: 8px;1264  padding: 3px;1265}12661267.peach-type-tab {1268  flex: 1;1269  display: flex;1270  align-items: center;1271  justify-content: center;1272  gap: 6px;1273  padding: 6px 10px;1274  border-radius: 6px;1275  border: none;1276  background: transparent;1277  cursor: pointer;1278  font-family: Inter, system-ui, sans-serif;1279  font-size: 0.6875rem;1280  font-weight: 400;1281  letter-spacing: 0.04em;1282  color: var(--peach-t1);1283  transition: background 150ms ease, color 150ms ease;1284}12851286.peach-type-tab.is-active {1287  background: var(--peach-s2);1288  color: var(--peach-t0);1289  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1290}12911292.peach-type-tab:not(.is-active):hover {1293  color: var(--peach-t0);1294}12951296.peach-type-tab svg {1297  opacity: 0.7;1298  flex-shrink: 0;1299}13001301.peach-type-tab.is-active svg {1302  opacity: 1;1303}13041305/* ── List view ───────────────────────────────────────────────────────── */1306.peach-list-top {1307  padding: 0 10px;1308  min-height: 46px;1309  display: flex;1310  align-items: center;1311  gap: 6px;1312  border-bottom: 1px solid var(--peach-t3);1313  flex-shrink: 0;1314  background: var(--peach-s1);1315}13161317/* Mobile vault bottom sheet — peeks above the entry view at rest, slides up1318   when the user swipes or taps the peek strip. App.tsx writes1319   `is-peeking` / `is-open` (and a live `transform` inline style during1320   drag). PEEK_PX in App.tsx is 60. */1321.peach-vault-sheet {1322  position: fixed;1323  inset: 0;1324  z-index: 50;1325  background: var(--peach-bg);1326  will-change: transform;1327  transform: translateY(100%);1328  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);1329  box-shadow: 0 -18px 38px -22px rgba(0, 0, 0, 0.55);1330  border-top-left-radius: 18px;1331  border-top-right-radius: 18px;1332  overflow: hidden;1333}1334.peach-vault-sheet::before {1335  content: "";1336  position: absolute;1337  top: 6px;1338  left: 50%;1339  transform: translateX(-50%);1340  width: 38px;1341  height: 4px;1342  border-radius: 999px;1343  background: var(--peach-t3);1344  opacity: 0.6;1345  z-index: 3;1346  pointer-events: none;1347}1348.peach-vault-sheet.is-peeking {1349  transform: translateY(calc(100% - 60px));1350}1351.peach-vault-sheet.is-open {1352  transform: translateY(0);1353}1354.peach-vault-sheet.is-dragging {1355  transition: none;1356}1357.peach-vault-sheet .peach-overlay-view {1358  position: absolute;1359  inset: 0;1360  animation: none;1361}13621363/* Native (mobile) variant: flat search-bar look matching the extension's1364   `.peach-search-bar`. No back arrow — the sheet is dismissed by swipe.1365   Search-glass icon on the left, counter on the right, no nav buttons. */1366.peach-list-top--native {1367  min-height: 54px;1368  padding: 0 14px 0 14px;1369  gap: 10px;1370  background: transparent;1371  border-bottom: 1px solid color-mix(in srgb, var(--peach-t3) 60%, transparent);1372}1373.peach-list-top--native .peach-search-icon {1374  color: var(--peach-t2);1375  display: inline-flex;1376  align-items: center;1377  flex-shrink: 0;1378}1379.peach-list-top--native .peach-search-input {1380  font-family: var(--font-display);1381  font-style: italic;1382  font-size: 18px;1383  caret-color: var(--peach-accent);1384  flex: 1;1385}1386.peach-list-top--native .peach-search-counter {1387  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1388  font-size: 0.625rem;1389  color: var(--peach-t2);1390  flex-shrink: 0;1391}1392.peach-vault-list {1393  flex: 1;1394  overflow-y: auto;1395  scrollbar-width: none;1396}1397.peach-vault-list::-webkit-scrollbar { display: none; }13981399/* Scrollbar — vault list */1400.peach-vault-list {1401  scrollbar-width: thin;1402  scrollbar-color: var(--peach-t3) transparent;1403}14041405.peach-vault-list::-webkit-scrollbar {1406  width: 3px;1407}14081409.peach-vault-list::-webkit-scrollbar-thumb {1410  background: var(--peach-t3);1411  border-radius: 2px;1412}14131414.peach-entry-row {1415  width: 100%;1416  display: flex;1417  align-items: center;1418  gap: 10px;1419  padding: 9px 16px;1420  background: transparent;1421  border: none;1422  border-bottom: 1px solid var(--peach-t3);1423  cursor: pointer;1424  color: inherit;1425  text-align: left;1426  transition: background 80ms ease;1427}1428.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1429.peach-entry-row:last-child { border-bottom: none; }1430.peach-entry-row.is-active {1431  box-shadow: inset 2px 0 0 var(--peach-accent);1432  background: rgba(240,232,216,0.03);1433}1434.peach-entry-row:focus-visible {1435  outline: none;1436  box-shadow: 0 0 0 1px var(--peach-border-accent);1437  background: rgba(240,232,216,0.03);1438}1439.peach-entry-row-icon {1440  width: 26px; height: 26px;1441  border-radius: 7px;1442  border: 1px solid var(--peach-t3);1443  display: flex; align-items: center; justify-content: center;1444  color: var(--peach-t2);1445  flex-shrink: 0;1446}1447.peach-entry-row-icon.is-breach {1448  border-color: rgba(220,80,60,0.3);1449  color: rgba(220,80,60,0.7);1450}14511452/* Title-initials chip used as the favicon fallback for login entries whose1453 * real favicon hasn't been cached by the browser yet (freshly-imported,1454 * never-visited domains). Background colour is hashed from the title so1455 * the same entry always shows the same chip. The chip fits the same1456 * 26×26 row icon slot the favicon would take. */1457.peach-favicon-initials {1458  display: inline-flex;1459  align-items: center;1460  justify-content: center;1461  width: 100%;1462  height: 100%;1463  border-radius: 4px;1464  font-family: "IBM Plex Mono", monospace;1465  font-size: 0.5625rem;1466  font-weight: 600;1467  letter-spacing: 0.04em;1468  color: rgba(240, 232, 216, 0.92);1469  text-transform: uppercase;1470  user-select: none;1471}1472.peach-entry-row-info { flex: 1; min-width: 0; }1473.peach-entry-row-name {1474  display: block;1475  font-family: var(--font-display);1476  font-size: 1.0625rem;1477  font-style: italic;1478  font-weight: 400;1479  color: var(--peach-t0);1480  line-height: 1.2;1481  white-space: nowrap;1482  overflow: hidden;1483  text-overflow: ellipsis;1484}1485.peach-entry-row-meta {1486  display: block;1487  font-family: "IBM Plex Mono", monospace;1488  font-size: 0.5625rem;1489  color: var(--peach-t2);1490  margin-top: 1px;1491  letter-spacing: 0.05em;1492}1493.peach-entry-row-dot {1494  width: 5px; height: 5px;1495  border-radius: 50%;1496  background: rgba(220,80,60,0.7);1497  flex-shrink: 0;1498}1499.peach-new-entry-row {1500  display: flex;1501  align-items: center;1502  justify-content: center;1503  gap: 6px;1504  width: 100%;1505  padding: 11px;1506  background: transparent;1507  border: none;1508  border-top: 1px solid var(--peach-t3);1509  color: var(--peach-t2);1510  font-family: "IBM Plex Mono", monospace;1511  font-size: 0.5625rem;1512  text-transform: uppercase;1513  letter-spacing: 0.14em;1514  cursor: pointer;1515  flex-shrink: 0;1516  transition: color 120ms ease, background 120ms ease;1517}1518.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }15191520/* ── Multi-select mode ─────────────────────────────────────────────── */15211522/* Select-mode trigger button in sort bar — same shape as trash btn */1523.peach-sort-select-btn {1524  display: flex;1525  align-items: center;1526  justify-content: center;1527  padding: 3px 5px;1528  background: transparent;1529  border: none;1530  cursor: pointer;1531  color: var(--peach-t2);1532  border-radius: 4px;1533  transition: color 140ms ease, background 140ms ease;1534}1535.peach-sort-select-btn:hover {1536  color: var(--peach-t1);1537  background: var(--peach-t3);1538}15391540/* Sort bar in select mode */1541.peach-select-cancel-btn {1542  background: transparent;1543  border: none;1544  padding: 0 4px;1545  cursor: pointer;1546  font-family: "IBM Plex Mono", monospace;1547  font-size: 0.5625rem;1548  letter-spacing: 0.12em;1549  text-transform: uppercase;1550  color: var(--peach-t2);1551  transition: color 140ms ease;1552  flex-shrink: 0;1553}1554.peach-select-cancel-btn:hover { color: var(--peach-t0); }15551556.peach-select-count-label {1557  flex: 1;1558  text-align: center;1559  font-family: "IBM Plex Mono", monospace;1560  font-size: 0.5625rem;1561  letter-spacing: 0.14em;1562  text-transform: uppercase;1563  color: var(--peach-t1);1564}15651566.peach-select-all-btn {1567  background: transparent;1568  border: none;1569  padding: 0 4px;1570  cursor: pointer;1571  font-family: "IBM Plex Mono", monospace;1572  font-size: 0.5625rem;1573  letter-spacing: 0.12em;1574  text-transform: uppercase;1575  color: var(--peach-t2);1576  transition: color 140ms ease;1577  flex-shrink: 0;1578}1579.peach-select-all-btn:hover { color: var(--peach-accent); }15801581/* List in select mode */1582.peach-vault-list.is-selecting .peach-entry-row {1583  cursor: default;1584}1585.peach-vault-list.is-selecting .peach-entry-row:hover {1586  background: rgba(240,232,216,0.02);1587}1588.peach-vault-list.is-selecting .peach-entry-row.is-selected {1589  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1590}1591.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1592  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1593}15941595/* Select indicator circles in icon slot */1596.peach-entry-row-icon.is-select-icon {1597  color: var(--peach-t2);1598}1599.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1600  color: var(--peach-accent);1601}16021603/* Delete action bar at bottom (replaces new-entry row) */1604.peach-select-action-bar {1605  display: flex;1606  align-items: center;1607  justify-content: center;1608  gap: 7px;1609  width: 100%;1610  padding: 11px;1611  background: transparent;1612  border: none;1613  border-top: 1px solid var(--peach-t3);1614  color: var(--peach-t1);1615  font-family: "IBM Plex Mono", monospace;1616  font-size: 0.5625rem;1617  text-transform: uppercase;1618  letter-spacing: 0.14em;1619  cursor: pointer;1620  flex-shrink: 0;1621  transition: color 120ms ease, background 120ms ease;1622}1623.peach-select-action-bar:not(:disabled):hover {1624  color: var(--peach-t0);1625  background: rgba(220,80,60,0.06);1626}1627.peach-select-action-bar:not(:disabled):hover svg {1628  stroke: rgba(220,80,60,0.8);1629}1630.peach-select-action-bar:disabled,1631.peach-select-action-bar.is-empty {1632  color: var(--peach-t2);1633  cursor: default;1634  opacity: 0.5;1635}1636.peach-search-counter-list {1637  white-space: nowrap;1638  flex-shrink: 0;1639}1640.peach-list-empty {1641  min-height: 180px;1642  display: grid;1643  place-items: center;1644  color: var(--peach-t2);1645  font-family: "IBM Plex Mono", monospace;1646  font-size: 0.6875rem;1647}16481649/* ── Settings view ───────────────────────────────────────────────────── */1650.peach-settings-body {1651  flex: 1;1652  overflow-y: auto;1653  min-height: 0;1654  display: flex;1655  flex-direction: column;1656  padding: 2px 0 10px;1657}1658.peach-settings-group {1659  margin: 4px 10px;1660  padding: 9px 14px 11px;1661  border-radius: 12px;1662  border: 1px solid rgba(255, 255, 255, 0.07);1663  background: rgba(26, 20, 16, 0.60);1664  backdrop-filter: blur(10px) saturate(1.3);1665  -webkit-backdrop-filter: blur(10px) saturate(1.3);1666}16671668.peach-settings-group + .peach-settings-group {1669  margin-top: 6px;1670}16711672@supports not (backdrop-filter: blur(1px)) {1673  .peach-settings-group {1674    background: rgba(26, 20, 16, 0.90);1675    border-color: rgba(255, 255, 255, 0.09);1676    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1677  }1678}16791680.light .peach-settings-group,1681[data-theme="light"] .peach-settings-group {1682  background: rgba(205, 191, 164, 0.68);1683  border-color: rgba(26, 18, 8, 0.10);1684  backdrop-filter: blur(10px) saturate(1.2);1685  -webkit-backdrop-filter: blur(10px) saturate(1.2);1686}16871688@supports not (backdrop-filter: blur(1px)) {1689  .light .peach-settings-group,1690  [data-theme="light"] .peach-settings-group {1691    background: rgba(205, 191, 164, 0.95);1692    border-color: rgba(26, 18, 8, 0.12);1693  }1694}1695.peach-export-intro {1696  padding-bottom: 8px;1697}1698.peach-export-card {1699  display: grid;1700  gap: 10px;1701}1702.peach-rune-canvas {1703  border-radius: 8px;1704  background: rgba(0, 0, 0, 0.22);1705  flex: 1;1706  align-self: center;1707}1708.peach-script-input {1709  font-family: "PeachScript", monospace;1710  font-size: 0.6875rem;1711  line-height: 1.9;1712  letter-spacing: 0.06em;1713  color: var(--peach-t0);1714  background: rgba(0, 0, 0, 0.22);1715  border: none;1716  border-radius: 6px;1717  padding: 12px;1718  width: 100%;1719  min-height: 96px;1720  resize: vertical;1721  word-break: break-all;1722  scrollbar-width: none;1723  -ms-overflow-style: none;1724}17251726.peach-script-input::-webkit-scrollbar { display: none; }1727.peach-csv-warning {1728  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1729  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1730  color: var(--peach-t0);1731  border-radius: 6px;1732  padding: 10px 12px;1733  margin-bottom: 8px;1734  font-size: 0.75rem;1735  line-height: 1.45;1736}1737.peach-export-card--primary {1738  background:1739    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1740}17411742/* Export menu — distribute the three format cards across the popup. */1743.peach-export-menu {1744  display: flex;1745  flex-direction: column;1746  flex: 1;1747  min-height: 0;1748}1749.peach-export-menu .peach-settings-group {1750  flex: 1;1751  display: flex;1752  flex-direction: column;1753  justify-content: center;1754  gap: 10px;1755}17561757/* Result view — the script-string fills the remaining vertical surface. */1758.peach-export-result-group {1759  flex: 1;1760  display: flex;1761  flex-direction: column;1762  min-height: 0;1763  border-bottom: none;1764}1765.peach-export-result-group .peach-export-card {1766  flex: 1;1767  min-height: 0;1768  display: flex;1769  flex-direction: column;1770  gap: 10px;1771}1772.peach-export-result-group .peach-export-card-copy {1773  flex-shrink: 0;1774}1775.peach-export-result-group .peach-settings-label {1776  flex-shrink: 0;1777}1778.peach-export-result-group button {1779  flex-shrink: 0;1780}1781.peach-export-card-head {1782  display: flex;1783  align-items: center;1784  justify-content: space-between;1785  gap: 10px;1786}1787.peach-export-card-copy {1788  margin: 0;1789  font-size: 0.75rem;1790  line-height: 1.55;1791  color: var(--peach-t1);1792}1793.peach-export-note {1794  margin: 0;1795  font-size: 0.625rem;1796  line-height: 1.5;1797  color: var(--peach-t2);1798}1799.peach-export-strength-track {1800  height: 3px;1801  background: var(--peach-border);1802  border-radius: 2px;1803  margin: 4px 0 2px;1804  overflow: hidden;1805}1806.peach-export-strength-fill {1807  height: 100%;1808  border-radius: 2px;1809  transition: width 250ms ease, background 250ms ease;1810}1811.peach-export-strength-warn {1812  margin: 0;1813  font-size: 0.625rem;1814  line-height: 1.5;1815  color: #e84040;1816  font-family: "IBM Plex Mono", monospace;1817}1818.peach-export-strength-hint {1819  margin: 0;1820  font-size: 0.625rem;1821  line-height: 1.5;1822  color: var(--peach-t2);1823  font-family: "IBM Plex Mono", monospace;1824}1825.peach-export-pill {1826  display: inline-flex;1827  align-items: center;1828  padding: 4px 8px;1829  border-radius: 999px;1830  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1831  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1832  color: var(--peach-accent);1833  font-family: "IBM Plex Mono", monospace;1834  font-size: 0.5rem;1835  letter-spacing: 0.12em;1836  text-transform: uppercase;1837  white-space: nowrap;1838}1839.peach-export-pill--danger {1840  border-color: rgba(220,80,60,0.22);1841  background: rgba(220,80,60,0.08);1842  color: var(--peach-breach);1843}1844.peach-settings-label {1845  margin: 0 0 6px;1846  font-family: "IBM Plex Mono", monospace;1847  font-size: 0.5rem;1848  text-transform: uppercase;1849  letter-spacing: 0.18em;1850  color: var(--peach-t2);1851}1852.peach-settings-row {1853  display: flex;1854  align-items: center;1855  justify-content: space-between;1856  gap: 12px;1857  min-height: 34px;1858  padding: 6px 0;1859  font-size: 0.8125rem;1860  color: var(--peach-t1);1861}1862.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1863.peach-settings-value {1864  font-family: "IBM Plex Mono", monospace;1865  font-size: 0.625rem;1866  color: var(--peach-t2);1867}18681869.peach-settings-value--status {1870  display: flex;1871  align-items: center;1872  gap: 6px;1873}18741875.peach-settings-link {1876  font-family: "IBM Plex Mono", monospace;1877  font-size: 0.625rem;1878  color: var(--peach-accent);1879  text-decoration: none;1880  cursor: pointer;1881}1882.peach-settings-link:hover {1883  text-decoration: underline;1884}18851886.peach-settings-row--stack {1887  flex-direction: column;1888  align-items: stretch;1889  gap: 6px;1890}18911892.peach-settings-row--top {1893  align-items: flex-start;1894}18951896.peach-settings-row-main {1897  display: flex;1898  flex-direction: column;1899  gap: 4px;1900  flex: 1;1901}1902.peach-toggle {1903  width: 28px; height: 16px;1904  border-radius: 999px;1905  background: var(--peach-t3);1906  border: 1px solid var(--peach-t3);1907  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1908  flex-shrink: 0;1909  transition: background 200ms ease, border-color 200ms ease;1910  cursor: pointer;1911}1912.peach-toggle.is-on {1913  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1914  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1915}1916.peach-toggle-knob {1917  width: 10px; height: 10px;1918  border-radius: 50%;1919  background: var(--peach-t2);1920  flex-shrink: 0;1921  transform: translateX(0px);1922  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1923}1924.peach-toggle.is-on .peach-toggle-knob {1925  background: var(--peach-accent);1926  transform: translateX(12px);1927}1928.peach-settings-footer {1929  display: flex;1930  align-items: center;1931  gap: 8px;1932  margin-top: auto;1933  padding: 14px 16px 8px;1934  font-family: "IBM Plex Mono", monospace;1935  font-size: 0.5625rem;1936  color: var(--peach-t2);1937}19381939/* ── Settings home navigation ──────────────────────────────────────────── */1940.peach-settings-nav-label {1941  margin: 0 0 2px;1942  padding: 12px 16px 4px;1943  font-family: "IBM Plex Mono", monospace;1944  font-size: 0.5rem;1945  text-transform: uppercase;1946  letter-spacing: 0.18em;1947  color: var(--peach-t2);1948}19491950.peach-settings-cat-row {1951  display: flex;1952  align-items: center;1953  gap: 10px;1954  width: 100%;1955  padding: 9px 16px;1956  background: none;1957  border: none;1958  border-bottom: 1px solid var(--peach-t3);1959  cursor: pointer;1960  text-align: left;1961  color: inherit;1962  transition: background var(--peach-dur-80) ease;1963}1964.peach-settings-cat-row:hover {1965  background: var(--peach-t3);1966}1967.peach-settings-cat-row:last-child {1968  border-bottom: none;1969}19701971.peach-settings-cat-icon {1972  width: 28px;1973  height: 28px;1974  border-radius: 7px;1975  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1976  color: var(--peach-accent);1977  display: flex;1978  align-items: center;1979  justify-content: center;1980  flex-shrink: 0;1981}1982/* Light theme: peach-on-cream is too low-contrast — both colors are warm.1983   Darken the icon stroke to ink and bump the bg tint so the icon reads1984   sharply while the cell still feels accent-tinted. */1985.light .peach-settings-cat-icon {1986  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);1987  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));1988}19891990.peach-settings-cat-content {1991  flex: 1;1992  display: flex;1993  flex-direction: column;1994  gap: 2px;1995  min-width: 0;1996}19971998.peach-settings-cat-name {1999  font-size: 0.8125rem;2000  font-weight: 450;2001  color: var(--peach-t0);2002  line-height: 1.2;2003}20042005.peach-settings-cat-desc {2006  font-size: 0.625rem;2007  color: var(--peach-t2);2008  line-height: 1.3;2009  white-space: nowrap;2010  overflow: hidden;2011  text-overflow: ellipsis;2012}20132014.peach-settings-cat-chevron {2015  color: var(--peach-t2);2016  flex-shrink: 0;2017  opacity: 0.5;2018}20192020/* ── Settings sub-view section labels ──────────────────────────────────── */2021.peach-settings-sub-label {2022  margin: 12px 0 4px;2023  font-family: "IBM Plex Mono", monospace;2024  font-size: 0.5rem;2025  text-transform: uppercase;2026  letter-spacing: 0.18em;2027  color: var(--peach-t2);2028}2029.peach-settings-sub-label:first-child {2030  margin-top: 4px;2031}20322033/* ── Settings: collapsible Advanced section ─────────────────────────────── */2034.peach-settings-advanced-toggle {2035  display: flex;2036  align-items: center;2037  justify-content: space-between;2038  width: 100%;2039  background: none;2040  border: none;2041  cursor: pointer;2042  padding: 12px 0 4px;2043  margin: 0;2044  color: inherit;2045}2046.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {2047  color: var(--peach-t1);2048}2049.peach-settings-advanced-chevron {2050  font-size: 0.5625rem;2051  color: var(--peach-t3);2052  letter-spacing: 0;2053  transition: color 120ms ease;2054}20552056/* ── Feedback form ──────────────────────────────────────────────────────── */2057.peach-feedback-group {2058  flex: 1;2059  display: flex;2060  flex-direction: column;2061  border-bottom: none;2062}20632064.peach-feedback-intro {2065  margin: 4px 0 14px;2066  font-size: 0.75rem;2067  line-height: 1.55;2068  color: var(--peach-t1);2069}20702071.peach-feedback-chips {2072  display: flex;2073  flex-wrap: wrap;2074  gap: 6px;2075  margin-bottom: 14px;2076}20772078.peach-feedback-chip {2079  padding: 4px 10px;2080  border-radius: 999px;2081  border: 1px solid var(--peach-t3);2082  background: none;2083  color: var(--peach-t2);2084  font-size: 0.6875rem;2085  font-family: var(--font-ui);2086  cursor: pointer;2087  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2088    background var(--peach-dur-80) ease;2089}2090.peach-feedback-chip:hover {2091  border-color: var(--peach-t2);2092  color: var(--peach-t1);2093}2094.peach-feedback-chip.is-active {2095  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);2096  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2097  color: var(--peach-accent);2098}20992100.peach-feedback-textarea {2101  flex: 1;2102  width: 100%;2103  min-height: 120px;2104  box-sizing: border-box;2105  background: rgba(0, 0, 0, 0.22);2106  border: 1px solid transparent;2107  border-radius: 6px;2108  color: var(--peach-t0);2109  font-size: 0.75rem;2110  font-family: var(--font-ui);2111  line-height: 1.5;2112  padding: 8px 10px;2113  resize: none;2114  outline: none;2115  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2116}2117.peach-feedback-textarea:focus {2118  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2119  background: rgba(0, 0, 0, 0.28);2120}2121.peach-feedback-textarea:focus {2122  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2123}2124.peach-feedback-textarea::placeholder {2125  color: var(--peach-t2);2126}21272128.peach-feedback-meta {2129  margin: 6px 0 0;2130  font-size: 0.625rem;2131  color: var(--peach-t2);2132  font-family: "IBM Plex Mono", monospace;2133}21342135.peach-feedback-result {2136  margin: 8px 0 0;2137  font-size: 0.6875rem;2138  font-family: "IBM Plex Mono", monospace;2139}2140.peach-feedback-result--ok { color: var(--peach-sync-ok); }2141.peach-feedback-result--err { color: var(--peach-breach); }21422143.peach-feedback-submit {2144  width: 100%;2145  margin-top: 12px;2146  justify-content: center;2147}21482149.peach-feedback-anon {2150  margin: 8px 0 0;2151  font-size: 0.625rem;2152  color: var(--peach-t2);2153  text-align: center;2154}21552156.peach-passkey-badge {2157  margin-left: 8px;2158  font-size: 0.625rem;2159  letter-spacing: 0.06em;2160  text-transform: uppercase;2161  color: var(--peach-t2);2162  font-family: var(--font-ui);2163  vertical-align: middle;2164}21652166.peach-passkey-delete-btn {2167  color: var(--peach-breach);2168  border-color: rgba(229, 85, 85, 0.25);2169}21702171.peach-passkey-delete-confirm {2172  display: flex;2173  align-items: center;2174  gap: 8px;2175  padding: 8px 10px;2176  background: rgba(229, 85, 85, 0.06);2177  border: 1px solid rgba(229, 85, 85, 0.2);2178  border-radius: 6px;2179}21802181.peach-passkey-delete-confirm-copy {2182  flex: 1;2183  font-size: 0.6875rem;2184  color: var(--peach-t1);2185}21862187.peach-passkey-delete-btn--confirm {2188  color: var(--peach-breach);2189  border-color: rgba(229, 85, 85, 0.4);2190}21912192.peach-passkey-activity {2193  flex-direction: column;2194  align-items: flex-start;2195  gap: 4px;2196}21972198.peach-passkey-meta {2199  font-size: 0.6875rem;2200  color: var(--peach-t2);2201}22022203.peach-passkey-actions {2204  position: relative;2205  z-index: 1;2206  margin-top: 14px;2207  display: flex;2208  flex-direction: column;2209  gap: 8px;2210}22112212.peach-passkey-approval {2213  display: flex;2214  flex-direction: column;2215  align-items: center;2216  padding: 16px 20px 14px;2217  gap: 8px;2218  text-align: center;2219}22202221.peach-passkey-approval-icon {2222  width: 36px;2223  height: 36px;2224  border-radius: 10px;2225  background: var(--peach-s2);2226  border: 1px solid var(--peach-t3);2227  display: flex;2228  align-items: center;2229  justify-content: center;2230  flex-shrink: 0;2231  color: var(--peach-accent);2232}22332234.peach-passkey-approval-icon img,2235.peach-passkey-approval-icon svg {2236  width: 22px;2237  height: 22px;2238  border-radius: 5px;2239}22402241.peach-passkey-approval-rp {2242  font-family: var(--font-ui);2243  font-size: 0.75rem;2244  color: var(--peach-t2);2245  letter-spacing: 0.03em;2246}22472248.peach-passkey-approval-action {2249  font-family: var(--font-display);2250  font-style: italic;2251  font-weight: 300;2252  font-size: 18px;2253  color: var(--peach-t0);2254  line-height: 1.1;2255  margin: 1px 0;2256}22572258.peach-passkey-approval-user {2259  font-family: var(--font-mono);2260  font-size: 0.6875rem;2261  color: var(--peach-t1);2262  background: var(--peach-s2);2263  border: 1px solid var(--peach-t3);2264  border-radius: 4px;2265  padding: 3px 8px;2266}22672268.peach-passkey-approval-notice {2269  font-size: 0.625rem;2270  color: var(--peach-t2);2271  line-height: 1.5;2272  max-width: 220px;2273}22742275.peach-passkey-approval-actions {2276  display: flex;2277  gap: 8px;2278  width: 100%;2279  margin-top: 6px;2280}22812282.peach-passkey-approval-actions .peach-btn {2283  flex: 1;2284}22852286/* ── Inline generator drawer ── */2287.peach-generator-drawer {2288  display: grid;2289  grid-template-rows: 0fr;2290  transition: grid-template-rows 320ms var(--peach-curve-arrival);2291  overflow: hidden;2292}2293.peach-generator-drawer.is-open {2294  grid-template-rows: 1fr;2295}2296.peach-generator-drawer-inner {2297  min-height: 0;2298  overflow: hidden;2299}2300.peach-generator-drawer-content {2301  border-top: 1px solid var(--peach-t3);2302  padding: 8px 0 4px;2303  display: flex;2304  flex-direction: column;2305  gap: 8px;2306}23072308/* ── Compact generator (inside entry edit) ── */2309.peach-generator-drawer-content--compact {2310  border-top: 1px solid var(--peach-t3);2311  padding: 8px 0 2px;2312  gap: 7px;2313}2314.peach-pwgen-compact-display-row {2315  display: flex;2316  align-items: center;2317  gap: 6px;2318}2319.peach-pwgen-compact-output {2320  flex: 1;2321  min-width: 0;2322  font-family: "IBM Plex Mono", monospace;2323  font-size: 0.6875rem;2324  font-weight: 400;2325  letter-spacing: 0.04em;2326  color: var(--peach-t0);2327  background: rgba(240, 232, 216, 0.04);2328  border: 1px solid var(--peach-t3);2329  border-radius: 5px;2330  padding: 5px 8px;2331  line-height: 1.5;2332  outline: none;2333  transition: border-color 120ms ease;2334}23352336.peach-pwgen-compact-output:focus {2337  border-color: var(--peach-t1);2338}2339.peach-pwgen-compact-controls {2340  display: flex;2341  align-items: center;2342  gap: 6px;2343}2344.peach-pwgen-compact-slider {2345  flex: 1;2346  min-width: 0;2347  height: 2px !important;2348}2349.peach-pwgen-compact-controls .peach-pwgen-len-num {2350  flex-shrink: 0;2351  min-width: 18px;2352  text-align: right;2353}2354.peach-pwgen-compact-pills {2355  display: flex;2356  gap: 3px;2357  flex-shrink: 0;2358}2359.peach-pwgen-compact-pills .peach-pwgen-pill {2360  padding: 2px 7px;2361  font-size: 0.5rem;2362}2363.peach-pwgen-compact-use {2364  flex-shrink: 0;2365  font-size: 0.625rem !important;2366  padding: 3px 9px !important;2367  min-height: 22px !important;2368  border-radius: 5px !important;2369}23702371/* ── Password edit row (input + eye toggle side-by-side) ── */2372.peach-password-edit-row {2373  display: flex;2374  align-items: center;2375  gap: 6px;2376}2377.peach-password-edit-row .peach-inline-input {2378  flex: 1;2379  min-width: 0;2380}23812382/* ── Generate toggle link ── */2383.peach-generate-toggle-link {2384  display: inline-flex;2385  align-items: center;2386  gap: 5px;2387  background: none;2388  border: none;2389  padding: 0;2390  cursor: pointer;2391  font-family: "IBM Plex Mono", monospace;2392  font-size: 0.625rem;2393  color: var(--peach-t2);2394  letter-spacing: 0.04em;2395  transition: color 120ms ease;2396  align-self: flex-start;2397}2398.peach-generate-toggle-link:hover {2399  color: var(--peach-accent);2400}24012402/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2403.peach-entry-body {2404  flex: 1;2405  overflow-y: auto;2406  overflow-x: hidden;2407  scrollbar-width: none;2408  -ms-overflow-style: none;2409  overscroll-behavior: contain;2410  display: grid;2411  gap: 10px;2412  align-content: start;2413  padding: 10px 20px 14px;2414  min-width: 0;2415  min-height: 0;2416}2417.peach-entry-body::-webkit-scrollbar { display: none; }24182419/* Type-toggle pills + inline note toolbar */2420.peach-new-type-row {2421  display: flex;2422  align-items: center;2423  gap: 6px;2424  margin-bottom: 2px;2425}2426.peach-new-type-btn {2427  background: transparent;2428  border: 1px solid var(--peach-t3);2429  border-radius: 12px;2430  padding: 3px 10px;2431  font-family: "IBM Plex Mono", monospace;2432  font-size: 0.5625rem;2433  letter-spacing: 0.12em;2434  text-transform: uppercase;2435  color: var(--peach-t2);2436  cursor: pointer;2437  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2438}2439.peach-new-type-btn.is-active {2440  color: var(--peach-t0);2441  border-color: var(--peach-accent);2442  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2443}2444.peach-new-type-btn:not(.is-active):hover {2445  color: var(--peach-t1);2446  border-color: var(--peach-t2);2447}24482449/* Editable title */2450.peach-new-title-wrap { margin: 0 0 2px; }2451.peach-new-title-input {2452  background: transparent;2453  border: none;2454  outline: none;2455  width: 100%;2456  color: var(--peach-t0);2457  font-family: var(--font-display);2458  font-style: italic;2459  font-weight: 400;2460  font-size: 40px;2461  line-height: 0.95;2462  caret-color: var(--peach-accent);2463}2464.peach-new-title-input::placeholder { color: var(--peach-t2); }24652466/* Editable domain field */2467.peach-domain-edit-row {2468  display: flex;2469  align-items: center;2470  gap: 6px;2471}24722473.peach-domain-edit-row .peach-domain-value--edit {2474  flex: 1;2475  width: 0;2476}24772478.peach-domain-url-btn {2479  flex-shrink: 0;2480  background: transparent;2481  border: none;2482  cursor: pointer;2483  color: var(--peach-t3);2484  padding: 2px 3px;2485  display: flex;2486  align-items: center;2487  line-height: 0;2488  border-radius: 3px;2489  transition: color 120ms ease;2490}24912492.peach-domain-url-btn:hover {2493  color: var(--peach-accent);2494}24952496.peach-domain-value--edit {2497  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2498  font-size: 0.625rem;2499  font-style: italic;2500  letter-spacing: 0.12em;2501  color: var(--peach-t1);2502  background: transparent;2503  border: none;2504  border-bottom: 1px solid var(--peach-t3);2505  outline: none;2506  width: 100%;2507  padding: 2px 0;2508  caret-color: var(--peach-accent);2509  transition: border-color 140ms ease, color 140ms ease;2510}2511.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2512.peach-domain-value--edit:focus {2513  border-bottom-color: rgba(240, 232, 216, 0.28);2514  color: var(--peach-t0);2515}25162517/* Editable field values (username, password, totp) */2518.peach-field-value--edit {2519  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2520  font-size: 0.8125rem;2521  color: var(--peach-t0);2522  background: transparent;2523  border: none;2524  border-bottom: 1px solid var(--peach-t3);2525  outline: none;2526  flex: 1;2527  min-width: 0;2528  padding: 3px 0;2529  caret-color: var(--peach-accent);2530  transition: border-color 140ms ease, color 140ms ease;2531}2532.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2533.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2534.peach-field-value--edit:focus {2535  border-bottom-color: rgba(240, 232, 216, 0.28);2536  color: var(--peach-t0);2537}25382539/* "+ add optional field" links */2540.peach-entry-add-links {2541  display: flex;2542  gap: 12px;2543  flex-wrap: wrap;2544  margin-top: -2px;2545}2546.peach-add-field-link {2547  background: transparent;2548  border: none;2549  padding: 0;2550  cursor: pointer;2551  font-family: "IBM Plex Mono", monospace;2552  font-size: 0.5625rem;2553  letter-spacing: 0.1em;2554  text-transform: uppercase;2555  color: var(--peach-t2);2556  transition: color 140ms ease;2557}2558.peach-add-field-link:hover { color: var(--peach-accent); }25592560/* ── New entry form (legacy classes) ────────────────────────────────── */2561.peach-new-body {2562  flex: 1;2563  overflow-y: auto;2564  padding: 10px 20px 14px;2565}2566.peach-new-name-input {2567  background: transparent;2568  border: none;2569  outline: none;2570  width: 100%;2571  color: var(--peach-t0);2572  font-family: var(--font-display);2573  font-style: italic;2574  font-weight: 400;2575  font-size: 40px;2576  line-height: 0.95;2577  caret-color: var(--peach-accent);2578}2579.peach-new-name-input::placeholder { color: var(--peach-t2); }2580.peach-new-field-input {2581  background: transparent;2582  border: none;2583  outline: none;2584  flex: 1;2585  min-width: 0;2586  caret-color: var(--peach-accent);2587}2588.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }25892590/* ── Canary card ── */2591.peach-canary-card {2592  border: 1px solid rgba(217, 160, 48, 0.2);2593  background: rgba(217, 160, 48, 0.03);2594  border-radius: 8px;2595  padding: 12px;2596}25972598.peach-canary-settings-header {2599  display: flex;2600  align-items: center;2601  justify-content: space-between;2602  cursor: pointer;2603  user-select: none;2604}26052606.peach-canary-card .peach-label {2607  color: rgba(217, 160, 48, 0.85);2608}26092610.peach-canary-card .peach-new-field-input {2611  border-color: rgba(217, 160, 48, 0.25);2612}26132614.peach-canary-card .peach-new-field-input:focus {2615  border-color: rgba(217, 160, 48, 0.5);2616}26172618.peach-canary-body {2619  margin-top: 12px;2620  display: flex;2621  flex-direction: column;2622  gap: 10px;2623}26242625.peach-canary-explainer {2626  display: flex;2627  gap: 10px;2628  padding: 10px 12px;2629  border-radius: 10px;2630  background: rgba(217, 160, 48, 0.06);2631  border: 1px solid rgba(217, 160, 48, 0.22);2632  margin-bottom: 4px;2633}26342635.peach-canary-explainer-icon {2636  font-size: 1rem;2637  flex-shrink: 0;2638  line-height: 1.2;2639}26402641.peach-canary-explainer-title {2642  font-family: var(--font-ui);2643  font-size: 0.6875rem;2644  font-weight: 500;2645  color: rgba(217, 160, 48, 0.9);2646  margin: 0 0 3px;2647}26482649.peach-canary-explainer-copy {2650  font-family: var(--font-ui);2651  font-size: 0.625rem;2652  color: var(--peach-t2);2653  line-height: 1.55;2654  margin: 0;2655}26562657.peach-canary-hint {2658  font-size: 0.625rem;2659  color: var(--peach-t2);2660  font-family: Inter, system-ui, sans-serif;2661  line-height: 1.5;2662  margin-top: 4px;2663}26642665.peach-canary-actions-row {2666  display: flex;2667  align-items: center;2668  gap: 8px;2669}26702671.peach-canary-test-btn {2672  border-color: rgba(217, 160, 48, 0.3);2673  color: rgba(217, 160, 48, 0.85);2674}26752676.peach-canary-test-result {2677  font-size: 0.625rem;2678  font-family: Inter, system-ui, sans-serif;2679}26802681.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2682.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }26832684.peach-canary-badge {2685  display: flex;2686  position: relative;2687  z-index: 1;2688  align-items: center;2689  gap: 5px;2690  padding: 4px 10px;2691  background: rgba(217, 160, 48, 0.12);2692  border: 1px solid rgba(217, 160, 48, 0.35);2693  border-radius: 6px;2694  margin-bottom: 6px;2695  width: fit-content;2696}26972698.peach-canary-badge-label {2699  font-size: 0.625rem;2700  letter-spacing: 0.06em;2701  color: rgba(217, 160, 48, 0.9);2702  font-family: var(--font-ui);2703  text-transform: uppercase;2704}27052706.peach-canary-badge-icon {2707  font-size: 0.6875rem;2708}27092710.peach-canary-suppress-row {2711  display: flex;2712  align-items: center;2713  gap: 8px;2714  padding: 6px 10px;2715  background: rgba(217, 160, 48, 0.08);2716  border-radius: 6px;2717  margin-bottom: 8px;2718}27192720.peach-canary-suppress-label {2721  font-size: 0.6875rem;2722  color: rgba(217, 160, 48, 0.85);2723  cursor: pointer;2724  font-family: var(--font-ui);2725  letter-spacing: 0.04em;2726}27272728.peach-regen-panel {2729  position: relative;2730  z-index: 1;2731  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2732  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2733  border-radius: 8px;2734  padding: 12px;2735  margin-bottom: 8px;2736}27372738.peach-regen-panel-header {2739  display: flex;2740  align-items: center;2741  justify-content: space-between;2742  margin-bottom: 10px;2743}27442745.peach-regen-panel-title {2746  font-size: 0.6875rem;2747  font-weight: 600;2748  letter-spacing: 0.06em;2749  text-transform: uppercase;2750  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2751}27522753.peach-regen-output {2754  background: rgba(0, 0, 0, 0.2);2755  border-radius: 6px;2756  padding: 10px;2757  margin-bottom: 10px;2758  font-family: var(--font-mono);2759  font-size: 0.8125rem;2760  word-break: break-all;2761  color: var(--peach-t1);2762}27632764.peach-regen-actions {2765  display: flex;2766  gap: 6px;2767}27682769.peach-regen-actions--spaced {2770  margin-bottom: 8px;2771}27722773.peach-regen-action-grow {2774  flex: 1;2775}27762777.peach-regen-copy-btn {2778  padding: 0 8px;2779}27802781.peach-regen-success {2782  position: relative;2783  z-index: 1;2784  background: rgba(40, 180, 80, 0.1);2785  border: 1px solid rgba(40, 180, 80, 0.3);2786  border-radius: 8px;2787  padding: 10px 12px;2788  margin-bottom: 8px;2789  display: flex;2790  align-items: center;2791  gap: 8px;2792  font-size: 0.6875rem;2793  color: rgba(40, 180, 80, 0.9);2794}27952796/* ── Note editor overlay ── */2797.peach-note-editor {2798  position: absolute;2799  inset: 0;2800  z-index: 200;2801  display: flex;2802  flex-direction: column;2803  background:2804    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2805    var(--peach-bg);2806  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2807}28082809.peach-note-editor-header {2810  display: flex;2811  align-items: center;2812  gap: 10px;2813  padding: 14px 16px 10px;2814  border-bottom: 1px solid var(--peach-t3);2815  flex-shrink: 0;2816}28172818.peach-note-editor-back {2819  background: transparent;2820  border: none;2821  cursor: pointer;2822  color: var(--peach-t2);2823  padding: 4px 6px;2824  border-radius: 6px;2825  display: flex;2826  align-items: center;2827  transition: color 120ms ease, background 120ms ease;2828  flex-shrink: 0;2829}2830.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }28312832.peach-note-editor-label {2833  flex: 1;2834  font-family: var(--font-display);2835  font-style: italic;2836  font-size: 0.9375rem;2837  color: var(--peach-t1);2838  letter-spacing: 0.02em;2839}28402841.peach-note-editor-save-btn {2842  background: transparent;2843  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2844  border-radius: 8px;2845  color: var(--peach-accent);2846  font-family: "IBM Plex Mono", monospace;2847  font-size: 0.625rem;2848  letter-spacing: 0.06em;2849  text-transform: uppercase;2850  padding: 3px 10px;2851  cursor: pointer;2852  transition: background 120ms ease, border-color 120ms ease;2853}2854.peach-note-editor-save-btn:hover:not(:disabled) {2855  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2856  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2857}2858.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }28592860.peach-note-toolbar {2861  display: flex;2862  align-items: center;2863  gap: 3px;2864  padding: 6px 14px 5px;2865  border-bottom: 1px solid var(--peach-t3);2866  flex-shrink: 0;2867}28682869.peach-note-tool-btn {2870  background: transparent;2871  border: 1px solid transparent;2872  border-radius: 5px;2873  color: var(--peach-t2);2874  font-family: "IBM Plex Mono", monospace;2875  font-size: 0.625rem;2876  letter-spacing: 0.04em;2877  padding: 2px 8px;2878  cursor: pointer;2879  line-height: 1.6;2880  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2881}2882.peach-note-tool-btn:hover {2883  background: var(--peach-t4);2884  color: var(--peach-t0);2885  border-color: var(--peach-t3);2886}28872888.peach-note-tool-icon {2889  padding: 3px 7px;2890  display: inline-flex;2891  align-items: center;2892  justify-content: center;2893}28942895.peach-note-tool-divider {2896  width: 1px;2897  height: 14px;2898  background: var(--peach-t3);2899  margin: 0 4px;2900  flex-shrink: 0;2901}29022903.peach-note-editor-body {2904  flex: 1;2905  overflow-y: auto;2906  padding: 16px 20px 20px;2907  outline: none;2908  font-family: var(--font-display);2909  font-size: 1rem;2910  line-height: 1.75;2911  color: var(--peach-t0);2912  scrollbar-width: none;2913  word-break: break-word;2914}2915.peach-note-editor-body:empty::before {2916  content: "write your note…";2917  color: var(--peach-t3);2918  font-style: italic;2919  pointer-events: none;2920}29212922/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2923.peach-note-editor-inline {2924  display: flex;2925  flex-direction: column;2926  flex: 1;2927  min-height: 0;2928}2929.peach-note-editor-body--inline {2930  flex: 1;2931  min-height: 0;2932  font-size: 0.9375rem;2933  padding: 10px 20px 14px;2934}29352936/* Full-width toolbar row inside the body (Add.tsx note type).2937   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */2938.peach-note-toolbar-body {2939  display: flex;2940  align-items: center;2941  gap: 3px;2942  padding: 5px 20px 4px;2943  margin: 2px -20px 0;2944  border-bottom: 1px solid var(--peach-t3);2945  flex-shrink: 0;2946}29472948/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2949   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2950   and .peach-note-tool-divider button-level styles. */2951.peach-note-toolbar-inline {2952  display: flex;2953  align-items: center;2954  gap: 3px;2955  margin-left: auto;2956  padding-left: 10px;2957  border-left: 1px solid var(--peach-t3);2958  min-height: 22px;2959}29602961/* Entry.tsx toolbar row (no tabs, toolbar only) */2962.peach-entry-note-toolbar-row {2963  display: flex;2964  align-items: center;2965  margin: 4px 0 6px;2966  position: relative;2967  z-index: 1;2968}2969.peach-entry-note-toolbar-row .peach-note-toolbar-inline {2970  border-left: none;2971  padding-left: 0;2972  margin-left: 0;2973}29742975/* Note body — fills available vertical space in Add.tsx and Entry.tsx */2976.peach-note-body {2977  display: flex;2978  flex-direction: column;2979  flex: 1;2980  min-height: 0;2981  margin: 4px 0 0;2982}2983.peach-entry-body--new .peach-note-body {2984  margin: 8px -20px 0;2985}29862987/* Add.tsx body is a grid by default; swap to a flex column when a note is2988   active so the note body can stretch and pin the tags row to the bottom. */2989.peach-entry-body--new:has(.peach-note-body) {2990  display: flex;2991  flex-direction: column;2992}29932994/* Rich content element styles (editor + display) */2995.peach-note-editor-body h2,2996.peach-note-content h2 {2997  font-family: var(--font-display);2998  font-size: 20px;2999  font-weight: 600;3000  font-style: italic;3001  color: var(--peach-t0);3002  margin: 6px 0 2px;3003  line-height: 1.3;3004}3005.peach-note-editor-body ul,3006.peach-note-content ul {3007  padding-left: 18px;3008  margin: 3px 0;3009  list-style: disc;3010}3011.peach-note-editor-body ol,3012.peach-note-content ol {3013  padding-left: 18px;3014  margin: 3px 0;3015  list-style: decimal;3016}3017.peach-note-editor-body li,3018.peach-note-content li { margin: 2px 0; }3019.peach-note-editor-body hr,3020.peach-note-content hr {3021  border: none;3022  border-top: 1px solid var(--peach-t3);3023  margin: 10px 0;3024}30253026/* font size elements from execCommand */3027.peach-note-editor-body font[size="1"],3028.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }3029.peach-note-editor-body font[size="2"],3030.peach-note-content font[size="2"] { font-size: 0.8125rem; }3031.peach-note-editor-body font[size="3"],3032.peach-note-content font[size="3"] { font-size: 1rem; }3033.peach-note-editor-body font[size="4"],3034.peach-note-content font[size="4"] { font-size: 20px; }3035.peach-note-editor-body font[size="5"],3036.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }30373038/* bold / italic inside the editor and note display */3039.peach-note-editor-body b, .peach-note-editor-body strong,3040.peach-note-content b, .peach-note-content strong { font-weight: 700; }3041.peach-note-editor-body em, .peach-note-editor-body i,3042.peach-note-content em, .peach-note-content i { font-style: italic; }30433044/* note display — rendered HTML, no pre-wrap */3045.peach-note-content {3046  overflow: auto;3047  max-height: 340px;3048  word-break: break-word;3049}30503051/* ── Note textarea ── */3052.peach-note-textarea {3053  width: 100%;3054  min-height: 180px;3055  max-height: 280px;3056  resize: vertical;3057  background: var(--peach-t4);3058  border: 1px solid var(--peach-t3);3059  border-radius: 8px;3060  padding: 10px 12px;3061  font-family: "IBM Plex Mono", monospace;3062  font-size: 0.75rem;3063  line-height: 1.7;3064  color: var(--peach-t1);3065  outline: none;3066  transition: border-color 150ms ease;3067}30683069.peach-note-textarea:focus {3070  border-color: var(--peach-t2);3071}30723073.peach-note-char-count {3074  font-family: "IBM Plex Mono", monospace;3075  font-size: 0.5625rem;3076  color: var(--peach-t3);3077  text-align: right;3078  margin-top: 4px;3079  letter-spacing: 0.1em;3080}30813082/* ── Field input baseline ── */3083.peach-new-field-input {3084  width: 100%;3085  background: transparent;3086  border: none;3087  border-bottom: 1px solid var(--peach-t3);3088  padding: 4px 0;3089  color: var(--peach-t1);3090  font-family: "IBM Plex Mono", monospace;3091  font-size: 0.8125rem;3092  outline: none;3093  transition: border-color 150ms ease;3094}30953096.peach-new-field-input:focus {3097  border-bottom-color: var(--peach-t0);3098  color: var(--peach-t0);3099}31003101.peach-new-name-input {3102  width: 100%;3103  background: transparent;3104  border: none;3105  border-bottom: 1px solid var(--peach-t3);3106  padding: 6px 0;3107  font-family: var(--font-display);3108  font-style: italic;3109  font-size: 28px;3110  color: var(--peach-t0);3111  outline: none;3112  transition: border-color 150ms ease;3113}31143115.peach-new-name-input:focus {3116  border-bottom-color: var(--peach-t1);3117}31183119.peach-new-name-input::placeholder {3120  color: var(--peach-t2);3121  font-style: italic;3122}31233124.peach-new-field-input::placeholder {3125  color: var(--peach-t3);3126}31273128/* ── Demo entrance animation ── */3129#hd-shell {3130  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3131}3132@keyframes hd-shell-enter {3133  from { opacity: 0; transform: scale(0.96) translateY(16px); }3134  to   { opacity: 1; transform: scale(1) translateY(0); }3135}31363137/* ── Keyframes ── */3138@keyframes peach-char-enter {3139  from { opacity: 0; transform: translateY(0.22em); }3140  to   { opacity: 1; transform: translateY(0); }3141}3142@keyframes peach-content-enter {3143  from { opacity: 0.96; transform: translateY(4px); }3144  to   { opacity: 1; transform: translateY(0); }3145}3146@keyframes peach-content-exit {3147  from { opacity: 1; transform: translateY(0); }3148  to   { opacity: 0.92; transform: translateY(-3px); }3149}3150@keyframes peach-screen-enter {3151  from { opacity: 0; transform: translateY(14px); }3152  to   { opacity: 1; transform: translateY(0); }3153}3154@keyframes peach-shell-fade-in {3155  from { opacity: 0; }3156  to   { opacity: 1; }3157}3158@keyframes peach-veil-in {3159  from { opacity: 0; }3160  to   { opacity: 1; }3161}3162@keyframes peach-lock-settle {3163  0%   { transform: scale(0.9); }3164  65%  { transform: scale(1.08); }3165  100% { transform: scale(1); }3166}3167@keyframes peach-copy-confirm {3168  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3169  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); }3170}3171@keyframes peach-copy-retreat {3172  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); }3173  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3174}3175@keyframes peach-copy-flood {3176  from { opacity: 0; transform: scaleX(0.15); }3177  to   { opacity: 1; transform: scaleX(1); }3178}3179@keyframes peach-copy-icon-settle {3180  from  { transform: scale(0.84); }3181  70%   { transform: scale(1.08); }3182  to    { transform: scale(1); }3183}3184@keyframes peach-copy-sheen-retreat {3185  from { opacity: 1; transform: scaleX(1); }3186  to   { opacity: 0; transform: scaleX(0.15); }3187}3188@keyframes peach-copy-drain {3189  from { width: 100%; }3190  to   { width: 0; }3191}3192@keyframes peach-shake {3193  0%, 100% { transform: translateX(0); }3194  20%      { transform: translateX(-6px); }3195  40%      { transform: translateX(6px); }3196  60%      { transform: translateX(-4px); }3197  80%      { transform: translateX(4px); }3198}31993200@keyframes pip-pulse {3201  0% { transform: scale(1); }3202  40% { transform: scale(2.2); }3203  100% { transform: scale(1); }3204}320532063207/* ── Password generator ── */3208.peach-pwgen-body {3209  flex: 1; overflow-y: auto;3210  display: flex; flex-direction: column;3211}3212.peach-policy-badge {3213  display: flex; align-items: center;3214  padding: 6px 20px 0;3215  font-size: 0.625rem; font-family: Inter, sans-serif;3216  color: var(--peach-t2); letter-spacing: 0.04em;3217}3218.peach-pwgen-display {3219  padding: 14px 20px 12px;3220  border-bottom: 1px solid var(--peach-t3);3221  display: flex; align-items: flex-start; gap: 10px;3222}3223.peach-pwgen-display-row {3224  display: flex;3225  align-items: flex-start;3226  gap: 8px;3227  padding-bottom: 8px;3228  border-bottom: 1px solid var(--peach-t3);3229}3230.peach-pwgen-output {3231  flex: 1; min-width: 0; margin: 0;3232  font-family: "IBM Plex Mono", monospace;3233  font-size: 0.8125rem; color: var(--peach-t0);3234  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3235  white-space: normal;3236  padding: 10px 12px;3237  background: var(--peach-t4);3238  border-radius: 6px;3239  min-height: 36px;3240}3241.peach-pwgen-output-display {3242  flex: 1;3243  min-width: 0;3244  margin: 0;3245  font-family: var(--font-display);3246  font-style: italic;3247  font-weight: 300;3248  font-size: 32px;3249  line-height: 1.05;3250  color: var(--peach-t0);3251  word-break: break-all;3252  overflow-wrap: break-word;3253  white-space: normal;3254  letter-spacing: 0.02em;3255}3256.peach-pwgen-display-actions {3257  display: flex;3258  flex-direction: column;3259  gap: 4px;3260  flex-shrink: 0;3261  margin-top: 2px;3262}3263.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3264.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3265.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3266.peach-pwgen-len-num {3267  font-family: "IBM Plex Mono", monospace;3268  font-size: 0.75rem; color: var(--peach-accent);3269}3270.peach-pwgen-len-num--edit {3271  cursor: text;3272  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3273}3274.peach-pwgen-len-input {3275  font-family: "IBM Plex Mono", monospace;3276  font-size: 0.75rem;3277  color: var(--peach-accent);3278  background: transparent;3279  border: none;3280  border-bottom: 1px solid var(--peach-accent);3281  outline: none;3282  width: 32px;3283  text-align: right;3284  padding: 0;3285}3286.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3287.peach-pwgen-toggles { display: flex; flex-direction: column; }3288.peach-pwgen-charset-pills {3289  display: flex;3290  gap: 6px;3291  flex-wrap: wrap;3292}3293.peach-pwgen-pill {3294  padding: 4px 11px;3295  border-radius: 999px;3296  border: 1px solid var(--peach-t3);3297  background: transparent;3298  color: var(--peach-t2);3299  font-family: "IBM Plex Mono", monospace;3300  font-size: 0.5625rem;3301  letter-spacing: 0.08em;3302  cursor: pointer;3303  transition: all 150ms ease;3304}3305.peach-pwgen-pill.is-on {3306  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3307  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3308  color: var(--peach-accent);3309}3310.peach-pwgen-pill:not(.is-on):hover {3311  color: var(--peach-t1);3312  border-color: var(--peach-t2);3313}3314.peach-pwgen-use-btn {3315  width: 100%;3316  min-height: 34px;3317  border-radius: 8px;3318  margin-top: 2px;3319}3320.peach-generator-constraint-note {3321  font-family: 'IBM Plex Mono', monospace;3322  font-size: 10px;3323  color: var(--peach-t3);3324  letter-spacing: 0.04em;3325  margin: 0;3326  transition: opacity 200ms ease;3327}3328.peach-pwgen-toggle-row {3329  display: flex; align-items: center; justify-content: space-between;3330  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3331}3332.peach-pwgen-toggle-row:last-child { border-bottom: none; }3333.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }33343335.peach-screen-prelock {3336  z-index: 10;3337}33383339.prelock-form {3340  display: grid;3341  gap: 12px;3342}33433344/* Peach popup should not expose native scrollbars on internal panels. */3345.peach-settings-body,3346.peach-new-body,3347.peach-pwgen-body,3348.lock-screen,3349.peach-import-preview {3350  scrollbar-width: none;3351  -ms-overflow-style: none;3352  overscroll-behavior: contain;3353}3354.peach-settings-body::-webkit-scrollbar,3355.peach-new-body::-webkit-scrollbar,3356.peach-pwgen-body::-webkit-scrollbar,3357.lock-screen::-webkit-scrollbar,3358.peach-import-preview::-webkit-scrollbar {3359  width: 0;3360  height: 0;3361  display: none;3362}33633364.lock-screen {3365  height: 100%;3366  min-height: 100%;3367  overflow-y: auto;3368  padding: 18px 18px 16px;3369  gap: 14px;3370  grid-template-rows: auto auto auto 1fr auto;3371  align-content: stretch;3372  position: relative;3373  isolation: isolate;3374}3375.peach-screen.lock-screen--vault-stage {3376  display: flex;3377  flex-direction: column;3378  justify-content: flex-start;3379  gap: 18px;3380  padding: 20px 18px 18px;3381  overflow: hidden;3382}3383.peach-screen.lock-screen--vault-stage .peach-lock-panel {3384  margin-top: 0;3385}3386.lock-screen--onboarding {3387  display: flex;3388  flex-direction: column;3389  gap: 12px;3390  justify-content: flex-start;3391}33923393.lock-screen::before {3394  content: "";3395  position: absolute;3396  inset: 12px 18px auto auto;3397  width: 160px;3398  height: 160px;3399  border-radius: 999px;3400  background:3401    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%);3402  filter: blur(6px);3403  opacity: 0.7;3404  pointer-events: none;3405  z-index: 0;3406}34073408.peach-lock-rune-string {3409  flex: 1;3410  display: flex;3411  align-items: center;3412  justify-content: center;3413  gap: 6px;3414  font-family: PeachScript, monospace;3415  font-size: 0.8125rem;3416  letter-spacing: 0.05em;3417  pointer-events: none;3418  user-select: none;3419  position: relative;3420  z-index: 1;3421}34223423.peach-lock-rune-string span {3424  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3425  text-shadow:3426    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3427    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3428  transition: color 0.9s ease, text-shadow 0.9s ease;3429}34303431.peach-lock-rune-string span.is-glowing {3432  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3433  text-shadow:3434    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3435    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3436}34373438.lock-screen-header {3439  display: flex;3440  align-items: center;3441  justify-content: space-between;3442  position: relative;3443  z-index: 1;3444}34453446.lock-password-input.shake {3447  animation: peach-shake 300ms ease-in-out;3448}34493450.peach-hint-error {3451  color: rgba(220, 80, 60, 0.92);3452}34533454.peach-onboarding-headline {3455  margin: 0;3456  font-family: var(--font-display);3457  font-size: 35px;3458  line-height: 0.88;3459  font-style: italic;3460  font-weight: 400;3461  max-width: 252px;3462}34633464.peach-lock-copy {3465  display: grid;3466  gap: 8px;3467  position: relative;3468  z-index: 1;3469}34703471.peach-lock-copy--onboarding {3472  gap: 10px;3473}34743475.peach-lock-hero {3476  position: relative;3477  z-index: 1;3478  display: grid;3479  gap: 8px;3480  min-height: 0;3481  padding: 4px 2px 0;3482  border: none;3483  border-radius: 0;3484  background: transparent;3485  box-shadow: none;3486}3487.peach-lock-hero-art {3488  position: absolute;3489  right: -8px;3490  top: -6px;3491  width: 120px;3492  height: 120px;3493  display: flex;3494  align-items: center;3495  justify-content: center;3496  pointer-events: none;3497  opacity: 0.12;3498  filter: saturate(0.9);3499}3500.peach-lock-hero-mark {3501  width: 100%;3502  height: 100%;3503}3504/* Peach body stays brand-peach across every accent — we don't want a3505   green or blue peach when sage/sky is selected. Leaf + stem keep the3506   sage tint because a real peach has a sage leaf. */3507.peach-lock-hero-mark path:nth-child(2),3508.peach-lock-hero-mark path:nth-child(3) {3509  stroke: rgba(123, 144, 96, 0.88);3510  fill: rgba(123, 144, 96, 0.88);3511}3512.peach-lock-hero > *:not(.peach-lock-hero-art) {3513  position: relative;3514  z-index: 1;3515}35163517.peach-lock-eyebrow {3518  display: inline-flex;3519  align-items: center;3520  width: fit-content;3521  padding: 4px 9px;3522  border-radius: 999px;3523  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3524  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3525  color: var(--peach-t0);3526  font-family: "IBM Plex Mono", monospace;3527  font-size: 0.5rem;3528  letter-spacing: 0.18em;3529  text-transform: uppercase;3530}35313532.peach-lock-label-row {3533  display: flex;3534  align-items: center;3535  justify-content: space-between;3536  margin-bottom: 0;3537}35383539.peach-lock-reveal-btn {3540  display: inline-flex;3541  align-items: center;3542  gap: 4px;3543  background: none;3544  border: none;3545  cursor: pointer;3546  font-family: "IBM Plex Mono", monospace;3547  font-size: 0.5625rem;3548  letter-spacing: 0.06em;3549  color: var(--peach-t2);3550  padding: 2px 0;3551  transition: color 150ms ease;3552}35533554.peach-lock-reveal-btn:hover {3555  color: var(--peach-t1);3556}35573558.peach-lock-warning {3559  color: rgba(220, 80, 60, 0.85) !important;3560  line-height: 1.5;3561}35623563.peach-onboarding-cards {3564  display: grid;3565  gap: 8px;3566  position: relative;3567  z-index: 1;3568}35693570.peach-lock-panel {3571  position: relative;3572  z-index: 1;3573  display: grid;3574  gap: 9px;3575  padding: 14px 16px 15px;3576  border-radius: 18px;3577  border: 1px solid var(--peach-t3);3578  background:3579    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3580  box-shadow:3581    inset 0 1px 0 rgba(240, 232, 216, 0.04),3582    0 12px 28px rgba(0, 0, 0, 0.12);3583}35843585/* Glass surface — lock panel and settings groups */3586.peach-glass {3587  background: rgba(26, 20, 16, 0.65);3588  border: 1px solid rgba(255, 255, 255, 0.08);3589  border-radius: 12px;3590  backdrop-filter: blur(12px) saturate(1.4);3591  -webkit-backdrop-filter: blur(12px) saturate(1.4);3592}35933594@supports not (backdrop-filter: blur(1px)) {3595  .peach-glass {3596    background: rgba(26, 20, 16, 0.92);3597    border: 1px solid rgba(255, 255, 255, 0.10);3598    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3599  }3600}36013602.light .peach-glass,3603[data-theme="light"] .peach-glass {3604  background: rgba(206, 196, 186, 0.70);3605  border: 1px solid rgba(26, 18, 8, 0.10);3606  backdrop-filter: blur(12px) saturate(1.2);3607  -webkit-backdrop-filter: blur(12px) saturate(1.2);3608}36093610@supports not (backdrop-filter: blur(1px)) {3611  .light .peach-glass,3612  [data-theme="light"] .peach-glass {3613    background: rgba(206, 196, 186, 0.95);3614    border: 1px solid rgba(26, 18, 8, 0.12);3615  }3616}36173618/* Lock panel keeps its own border-radius over the generic glass token */3619.peach-lock-panel.peach-glass {3620  border-radius: 18px;3621  background: rgba(26, 20, 16, 0.65);3622  border: 1px solid rgba(255, 255, 255, 0.08);3623  box-shadow:3624    inset 0 1px 0 rgba(255, 255, 255, 0.05),3625    0 12px 28px rgba(0, 0, 0, 0.3);3626}36273628.light .peach-lock-panel.peach-glass,3629[data-theme="light"] .peach-lock-panel.peach-glass {3630  background: rgba(196, 188, 181, 0.78);3631  border: 1px solid rgba(26, 18, 8, 0.12);3632  box-shadow:3633    inset 0 1px 0 rgba(255, 255, 255, 0.4),3634    0 8px 24px rgba(80, 56, 32, 0.20);3635}36363637@supports not (backdrop-filter: blur(1px)) {3638  .peach-lock-panel.peach-glass {3639    background: rgba(26, 20, 16, 0.92);3640    box-shadow:3641      inset 0 1px 0 rgba(255, 255, 255, 0.05),3642      0 12px 28px rgba(0, 0, 0, 0.4);3643  }3644  .light .peach-lock-panel.peach-glass,3645  [data-theme="light"] .peach-lock-panel.peach-glass {3646    background: rgba(196, 188, 181, 0.97);3647  }3648}36493650.peach-lock-panel--secondary {3651  gap: 12px;3652}36533654.peach-lock-panel-header {3655  display: flex;3656  align-items: baseline;3657  justify-content: space-between;3658  gap: 12px;3659}36603661.peach-lock-option-grid {3662  display: grid;3663  gap: 10px;3664}36653666.peach-lock-option {3667  width: 100%;3668  display: grid;3669  gap: 6px;3670  padding: 14px 15px;3671  border-radius: 16px;3672  border: 1px solid rgba(240, 232, 216, 0.08);3673  background: rgba(240, 232, 216, 0.02);3674  color: var(--peach-t0);3675  text-align: left;3676  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3677}36783679.peach-lock-option:hover {3680  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3681  background: rgba(240, 232, 216, 0.04);3682  transform: translateY(-1px);3683}36843685.peach-lock-option-title {3686  font-size: 0.75rem;3687  color: var(--peach-t0);3688}36893690.peach-lock-option-copy {3691  font-size: 0.6875rem;3692  line-height: 1.55;3693  color: var(--peach-t1);3694}36953696.peach-onboarding-stack {3697  margin-top: 2px;3698}3699.peach-lock-panel-footer {3700  display: grid;3701  gap: 6px;3702  margin-top: 2px;3703  padding-top: 10px;3704  border-top: 1px solid rgba(240, 232, 216, 0.06);3705}37063707/* ── Restore tab view ─────────────────────────────────────────────────────3708   Tab-based restore screen replacing the old three-card picker. */37093710.peach-restore-tabview {3711  overflow: hidden;3712}37133714.peach-restore-tabcard {3715  flex: 1;3716  display: flex;3717  flex-direction: column;3718  gap: 0;3719  padding: 0;3720  overflow: hidden;3721  cursor: default;3722  user-select: none;3723  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3724}37253726/* ── Tab selector ─────────────────────────────────────────────────────── */37273728.peach-restore-tabs {3729  display: flex;3730  justify-content: space-around;3731  padding: 14px 10px 10px;3732  border-bottom: 1px solid var(--peach-t3);3733  gap: 2px;3734  overflow: hidden;3735  scrollbar-width: none;3736}3737.peach-restore-tabs::-webkit-scrollbar { display: none; }37383739.peach-restore-tab {3740  background: none;3741  border: none;3742  cursor: pointer;3743  padding: 3px 2px;3744  font-family: 'Cormorant Garamond', Georgia, serif;3745  font-style: italic;3746  font-size: 11px;3747  color: var(--peach-t2);3748  transition: color 150ms ease, text-shadow 150ms ease;3749  flex: 1;3750  min-width: 0;3751  text-align: center;3752  white-space: nowrap;3753  overflow: hidden;3754  text-overflow: ellipsis;3755}3756.peach-restore-tab:hover {3757  color: var(--peach-accent);3758  text-shadow:3759    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3760    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3761}3762.peach-restore-tab.is-active {3763  color: var(--peach-accent);3764  text-shadow:3765    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3766    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3767}37683769/* ── Content area ─────────────────────────────────────────────────────── */37703771.peach-restore-content {3772  padding: 16px 16px 14px;3773  display: flex;3774  flex-direction: column;3775  gap: 8px;3776  overflow: hidden;3777  scrollbar-width: none;3778  flex: 1;3779}3780.peach-restore-content::-webkit-scrollbar { display: none; }3781.peach-restore-content > * {3782  overflow: hidden;3783  scrollbar-width: none;3784}3785.peach-restore-content > *::-webkit-scrollbar { display: none; }37863787/* ── Shared tab inner layout ──────────────────────────────────────────── */37883789.peach-rt-symbols,3790.peach-rt-csv,3791.peach-rt-phone {3792  display: flex;3793  flex-direction: column;3794  gap: 8px;3795  overflow: hidden;3796}37973798.peach-rt-submit {3799  width: 100%;3800}38013802.peach-rt-error {3803  margin: 0;3804  font-size: 0.6875rem;3805  color: var(--peach-breach);3806  line-height: 1.4;3807}38083809/* ── PeachScript tab ──────────────────────────────────────────────────── */38103811.peach-restore-symbols-textarea {3812  font-family: 'PeachScript', monospace;3813  font-size: 13px;3814  line-height: 1.9;3815  letter-spacing: 0.1em;3816  word-break: break-all;3817  resize: none;3818  width: 100%;3819  min-height: 56px;3820  max-height: 72px;3821  overflow: hidden;3822  scrollbar-width: none;3823  -ms-overflow-style: none;3824  box-sizing: border-box;3825  padding: 6px 8px;3826  border-radius: 8px;3827  border: 1px solid var(--peach-t3);3828  background: rgba(240, 232, 216, 0.03);3829  color: var(--peach-t0);3830}3831.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3832.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }38333834.peach-restore-symbols-pass {3835  width: 100%;3836  box-sizing: border-box;3837  padding: 7px 10px;3838  border-radius: 8px;3839  border: 1px solid var(--peach-t3);3840  background: rgba(240, 232, 216, 0.03);3841  color: var(--peach-t0);3842  font-size: 0.8125rem;3843}3844.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }3845.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }38463847.peach-rt-divider {3848  text-align: center;3849  font-size: 0.6875rem;3850  color: var(--peach-t2);3851  font-style: italic;3852}38533854.peach-rt-file-label {3855  width: 100%;3856  justify-content: center;3857}38583859.peach-rt-anim-canvas {3860  width: 100%;3861  height: 180px;3862  border-radius: 10px;3863  overflow: hidden;3864  display: block;3865}38663867/* ── CSV tab ──────────────────────────────────────────────────────────── */38683869.peach-rt-csv-sources {3870  margin: 0;3871  font-size: 0.6875rem;3872  color: var(--peach-t2);3873  line-height: 1.5;3874  text-align: center;3875}38763877.peach-rt-csv-warning {3878  margin: 0;3879  font-family: "IBM Plex Mono", monospace;3880  font-size: 0.5625rem;3881  letter-spacing: 0.12em;3882  color: var(--peach-breach);3883  text-align: center;3884}38853886/* ── From Phone tab ───────────────────────────────────────────────────── */38873888.peach-rt-phone-code {3889  margin: 0;3890  text-align: center;3891  font-family: "IBM Plex Mono", monospace;3892  font-size: 22px;3893  letter-spacing: 0.18em;3894  color: var(--peach-t0);3895}38963897.peach-rt-phone-qr {3898  display: block;3899  width: 96px;3900  height: 96px;3901  margin: 0 auto;3902  border-radius: 6px;3903  image-rendering: pixelated;3904  overflow: hidden;3905}39063907.peach-rt-phone-hint {3908  margin: 0;3909  font-size: 0.6875rem;3910  color: var(--peach-t2);3911  line-height: 1.55;3912  text-align: center;3913}39143915/* ── Intro popup ──────────────────────────────────────────────────────── */39163917.peach-restore-intro-overlay {3918  position: absolute;3919  inset: 0;3920  z-index: 100;3921  display: flex;3922  align-items: center;3923  justify-content: center;3924  padding: 20px;3925  background: rgba(12, 10, 6, 0.7);3926  backdrop-filter: blur(4px);3927  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;3928}39293930.peach-restore-intro-card {3931  width: 100%;3932  display: flex;3933  flex-direction: column;3934  gap: 12px;3935  padding: 22px 20px 20px;3936  border-radius: 16px;3937  border: 1px solid var(--peach-t3);3938  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));3939  backdrop-filter: blur(4px);3940  -webkit-backdrop-filter: blur(4px);3941  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);3942}39433944.peach-restore-intro-headline {3945  margin: 0;3946  font-family: var(--font-display);3947  font-style: italic;3948  font-size: 20px;3949  font-weight: 400;3950  color: var(--peach-t0);3951}39523953.peach-restore-intro-body {3954  display: flex;3955  flex-direction: column;3956  gap: 8px;3957}3958.peach-restore-intro-body p {3959  margin: 0;3960  font-size: 0.75rem;3961  color: var(--peach-t1);3962  line-height: 1.5;3963}39643965.peach-restore-intro-btn {3966  width: 100%;3967  margin-top: 4px;3968}39693970/* Snapshot restore panel */3971.peach-snapshot-panel {3972  gap: 10px;3973  overflow-y: auto;3974  max-height: 340px;3975}3976.peach-snapshot-list {3977  display: flex;3978  flex-direction: column;3979  gap: 4px;3980}3981.peach-snapshot-row {3982  display: flex;3983  align-items: center;3984  justify-content: space-between;3985  width: 100%;3986  padding: 8px 10px;3987  border-radius: 8px;3988  border: 1px solid rgba(240, 232, 216, 0.07);3989  background: transparent;3990  cursor: pointer;3991  transition: border-color 120ms, background 120ms;3992  text-align: left;3993  gap: 8px;3994}3995.peach-snapshot-row:hover {3996  border-color: rgba(240, 232, 216, 0.14);3997  background: rgba(240, 232, 216, 0.03);3998}3999.peach-snapshot-row.is-selected {4000  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4001  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);4002}4003.peach-snapshot-time {4004  font-size: 11.5px;4005  color: var(--peach-t0);4006  flex: 1;4007}4008.peach-snapshot-count {4009  font-family: "IBM Plex Mono", monospace;4010  font-size: 0.625rem;4011  color: var(--peach-t2);4012  flex-shrink: 0;4013}4014.peach-snapshot-confirm {4015  display: flex;4016  flex-direction: column;4017  gap: 8px;4018  padding-top: 10px;4019  border-top: 1px solid rgba(240, 232, 216, 0.06);4020}4021.peach-snapshot-warning {4022  display: flex;4023  align-items: flex-start;4024  gap: 6px;4025  font-size: 10.5px;4026  color: rgba(220, 80, 60, 0.85);4027  line-height: 1.55;4028}4029.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }4030.peach-snapshot-confirm-row {4031  display: flex;4032  gap: 6px;4033  align-items: center;4034}4035.peach-snapshot-restore-btn {4036  width: 100%;4037}4038.peach-lock-hero--unlock .peach-lock-hero-art {4039  width: 112px;4040  height: 112px;4041  right: 0;4042  top: 2px;4043  opacity: 0.1;4044}40454046.peach-card {4047  border: 1px solid var(--peach-t3);4048  border-radius: 18px;4049  background:4050    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4051  box-shadow:4052    inset 0 0 0 1px var(--peach-border-accent),4053    inset 0 1px 0 rgba(240, 232, 216, 0.04),4054    0 12px 32px rgba(0, 0, 0, 0.14);4055  overflow: hidden;4056}40574058.peach-card-active {4059  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4060  box-shadow:4061    inset 0 1px 0 rgba(240, 232, 216, 0.05),4062    0 16px 38px rgba(0, 0, 0, 0.18),4063    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4064}40654066.peach-card-disabled {4067  opacity: 0.72;4068}40694070.peach-card-header {4071  width: 100%;4072  padding: 13px 16px 11px;4073  background: transparent;4074  color: var(--peach-t0);4075  display: flex;4076  justify-content: space-between;4077  align-items: center;4078  text-align: left;4079  font-size: 0.75rem;4080}40814082.peach-card-body {4083  padding: 0 16px 16px;4084  display: grid;4085  gap: 9px;4086}40874088.peach-card-tag {4089  color: var(--peach-t2);4090  font-family: "IBM Plex Mono", monospace;4091  font-size: 0.5625rem;4092  letter-spacing: 0.12em;4093  text-transform: uppercase;4094}40954096.peach-empty-copy {4097  display: grid;4098  gap: 6px;4099  color: var(--peach-t1);4100  font-size: 0.8125rem;4101}41024103.peach-lock-submit {4104  width: 100%;4105  box-shadow:4106    0 1px 0 rgba(255,255,255,0.10) inset,4107    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4108    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4109    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4110}41114112.peach-lock-secondary {4113  width: 100%;4114  border-color: var(--peach-t3);4115  background: rgba(240, 232, 216, 0.02);4116}41174118.peach-lock-secondary:hover {4119  background: rgba(240, 232, 216, 0.04);4120}41214122.peach-lock-note {4123  max-width: none;4124  line-height: 1.55;4125  margin: 0;4126}41274128.peach-overlay-action {4129  font-size: 0.625rem;4130  padding: 4px 8px;4131  letter-spacing: 0.06em;4132  min-width: 44px;4133  text-align: center;4134}41354136.peach-overlay-spacer {4137  width: 32px;4138}41394140.peach-inline-action {4141  flex-shrink: 0;4142  font-size: 0.5625rem;4143  letter-spacing: 0.1em;4144  text-transform: uppercase;4145  padding: 4px 7px;4146}4147.peach-password-toggle-btn {4148  display: inline-flex;4149  align-items: center;4150  justify-content: center;4151  min-width: 30px;4152  min-height: 26px;4153  padding: 0 7px;4154  border: 1px solid var(--peach-t3);4155  border-radius: 999px;4156  background: rgba(240, 232, 216, 0.04);4157  color: var(--peach-t2);4158  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4159}4160.peach-password-toggle-btn:hover {4161  border-color: var(--peach-t2);4162  color: var(--peach-t0);4163  background: rgba(240, 232, 216, 0.06);4164}41654166.peach-new-textarea {4167  width: 100%;4168  min-height: 88px;4169  resize: vertical;4170  border: 0;4171  outline: none;4172  background: transparent;4173  color: var(--peach-t1);4174  font-family: "IBM Plex Mono", monospace;4175  font-size: 0.75rem;4176  line-height: 1.65;4177  caret-color: var(--peach-accent);4178}41794180.peach-new-textarea::placeholder {4181  color: var(--peach-t2);4182  opacity: 0.7;4183}41844185.peach-settings-actions {4186  display: grid;4187  gap: 8px;4188}41894190.peach-sync-section-label {4191  font-size: 0.6875rem;4192  color: var(--peach-t2);4193  text-transform: uppercase;4194  letter-spacing: 0.05em;4195}41964197.peach-sync-network-note {4198  margin: 0 0 6px;4199  font-size: 0.75rem;4200  color: var(--peach-t2);4201  line-height: 1.4;4202}42034204.peach-settings-row--tappable {4205  background: none;4206  border: none;4207  width: 100%;4208  text-align: left;4209  cursor: pointer;4210  color: var(--peach-t1);4211  font-size: 0.8125rem;4212}4213.peach-settings-row--tappable:hover {4214  color: var(--peach-t0);4215}42164217.peach-sync-pro-hint {4218  display: flex;4219  flex-direction: column;4220  align-items: flex-start;4221  gap: 8px;4222  padding: 12px 0 4px;4223}42244225.peach-sync-device-row {4226  display: flex;4227  justify-content: space-between;4228  align-items: center;4229  padding: 6px 0;4230  border-bottom: 1px solid var(--peach-t3);4231}42324233.peach-sync-device-info {4234  display: flex;4235  flex-direction: column;4236  gap: 2px;4237}42384239.peach-sync-device-name {4240  font-size: 0.8125rem;4241  color: var(--peach-t0);4242}42434244.peach-sync-device-meta {4245  font-size: 0.6875rem;4246  color: var(--peach-t2);4247}42484249.peach-sync-status-dot {4250  display: inline-block;4251  width: 8px;4252  height: 8px;4253  border-radius: 50%;4254  vertical-align: middle;4255}42564257.peach-sync-remove-btn {4258  color: var(--peach-breach);4259}42604261.peach-sync-advanced-row {4262  display: flex;4263  justify-content: space-between;4264  align-items: center;4265  padding: 6px 0;4266  gap: 12px;4267}42684269.peach-sync-advanced-info {4270  display: flex;4271  flex-direction: column;4272  gap: 2px;4273  flex: 1;4274}42754276.peach-sync-advanced-name {4277  font-size: 0.8125rem;4278  color: var(--peach-t0);4279}42804281.peach-sync-reset-confirm {4282  display: flex;4283  flex-direction: column;4284  gap: 8px;4285  padding: 10px;4286  border: 1px solid var(--peach-breach);4287  border-radius: 10px;4288  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4289}42904291.peach-sync-reset-confirm-headline {4292  font-size: 0.8125rem;4293  font-weight: 600;4294  color: var(--peach-t0);4295  margin: 0;4296}42974298.peach-sync-reset-confirm-body {4299  font-size: 0.75rem;4300  color: var(--peach-t1);4301  margin: 0;4302  line-height: 1.4;4303}43044305.peach-btn--danger {4306  background: var(--peach-breach);4307  color: #fff;4308  border-color: var(--peach-breach);4309}4310.peach-btn--danger:hover:not(:disabled) {4311  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4312}4313.peach-btn--danger:disabled {4314  opacity: 0.55;4315  cursor: not-allowed;4316}43174318.peach-sync-hero-icon {4319  color: var(--peach-t1);4320  opacity: 0.85;4321}43224323.peach-import-preview {4324  margin-bottom: 12px;4325  max-height: 152px;4326  overflow-y: auto;4327  border: 1px solid var(--peach-t3);4328  border-radius: 10px;4329  padding: 8px 10px;4330  display: grid;4331  gap: 8px;4332  background: rgba(240, 232, 216, 0.02);4333}43344335.peach-import-preview-row {4336  display: flex;4337  justify-content: space-between;4338  gap: 10px;4339  font-size: 0.6875rem;4340  color: var(--peach-t1);4341}43424343.peach-import-preview-title {4344  color: var(--peach-t0);4345  flex: 1;4346  min-width: 0;4347  overflow: hidden;4348  text-overflow: ellipsis;4349  white-space: nowrap;4350}43514352.peach-import-preview-meta {4353  color: var(--peach-t2);4354  flex-shrink: 0;4355  max-width: 42%;4356  overflow: hidden;4357  text-overflow: ellipsis;4358  white-space: nowrap;4359}43604361.peach-import-preview-more {4362  color: var(--peach-t2);4363  font-size: 0.625rem;4364}43654366.peach-restore-copy {4367  margin: 0;4368  color: var(--peach-t1);4369  font-size: 0.6875rem;4370  line-height: 1.6;4371}43724373.peach-restore-warning {4374  padding: 10px 12px;4375  border-radius: 12px;4376  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4377  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4378  color: var(--peach-t0);4379  font-size: 0.6875rem;4380  line-height: 1.55;4381}43824383.peach-provider-chips {4384  display: flex;4385  flex-wrap: wrap;4386  gap: 6px;4387}43884389.peach-provider-chip {4390  display: inline-flex;4391  align-items: center;4392  padding: 5px 8px;4393  border-radius: 999px;4394  border: 1px solid var(--peach-t3);4395  background: rgba(240, 232, 216, 0.02);4396  color: var(--peach-t1);4397  font-family: "IBM Plex Mono", monospace;4398  font-size: 0.5rem;4399  letter-spacing: 0.08em;4400  text-transform: uppercase;4401}44024403.peach-restore-file,4404.peach-restore-input {4405  width: 100%;4406  border-radius: 10px;4407  border: 1px solid var(--peach-t3);4408  background: var(--peach-s2);4409  color: var(--peach-t0);4410  font-size: 0.75rem;4411}44124413.peach-restore-file {4414  padding: 9px 10px;4415}44164417.peach-restore-file::file-selector-button {4418  margin-right: 10px;4419  padding: 7px 10px;4420  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4421  border-radius: 999px;4422  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4423  color: var(--peach-t0);4424  font-size: 0.625rem;4425  letter-spacing: 0.08em;4426  text-transform: uppercase;4427  cursor: pointer;4428}44294430.peach-restore-input {4431  padding: 10px 12px;4432}44334434.peach-auth-grid {4435  display: grid;4436  gap: 10px;4437}44384439.peach-import-summary {4440  color: var(--peach-t1);4441  font-size: 0.75rem;4442  line-height: 1.6;4443  margin-bottom: 12px;4444}44454446.peach-restore-error {4447  color: rgba(220, 80, 60, 0.95);4448  font-size: 0.75rem;4449  line-height: 1.55;4450}44514452.peach-passkey-card {4453  max-width: 400px;4454  margin: auto 16px;4455  align-self: center;4456  width: calc(100% - 32px);4457}44584459/* Center the approval card vertically inside the overlay-view (which sets4460 * flex-direction: column without justify-content). Without this, the card4461 * sits at the top with a tall empty band below — looks unfinished on the4462 * 320px popup. */4463.peach-overlay-view:has(.peach-passkey-card) {4464  justify-content: center;4465}44664467.peach-pro-badge {4468  padding: 2px 6px;4469  border-radius: 999px;4470  font-family: var(--font-ui);4471  font-size: 0.625rem;4472  letter-spacing: 0.08em;4473  text-transform: uppercase;4474  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4475  color: var(--peach-accent);4476}44774478/* ── Shortcuts rebind table ─────────────────────────────────── */4479.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4480.peach-shortcut-row {4481  display: flex;4482  align-items: center;4483  gap: 10px;4484  padding: 6px 0;4485}4486.peach-shortcut-row-label {4487  flex: 1;4488  font-size: 0.75rem;4489  color: var(--peach-t0);4490}4491.peach-shortcut-chip {4492  min-width: 64px;4493  padding: 4px 10px;4494  border-radius: 6px;4495  border: 1px solid var(--peach-t3);4496  background: var(--peach-input-bg, var(--surface-card));4497  color: var(--peach-t0);4498  font-family: var(--font-mono);4499  font-size: 0.6875rem;4500  letter-spacing: 0.04em;4501  cursor: pointer;4502  text-align: center;4503  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4504}4505.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4506.peach-shortcut-chip.is-custom {4507  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4508  color: var(--peach-accent);4509}4510.peach-shortcut-chip.is-capturing {4511  border-color: var(--peach-accent);4512  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4513  color: var(--peach-accent);4514  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4515}4516@keyframes peach-shortcut-capture-pulse {4517  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4518  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4519}4520.peach-shortcut-reset {4521  background: transparent;4522  border: none;4523  cursor: pointer;4524  color: var(--peach-t2);4525  padding: 4px 6px;4526  border-radius: 5px;4527  font-size: 0.875rem;4528  line-height: 1;4529  transition: color 120ms ease, background 120ms ease;4530}4531.peach-shortcut-reset:hover {4532  color: var(--peach-t0);4533  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4534}4535.peach-shortcuts-conflict {4536  margin: 4px 0 0;4537  padding: 8px 10px;4538  border-radius: 7px;4539  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4540  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4541  font-family: var(--font-mono);4542  font-size: 0.6875rem;4543  color: var(--peach-t0);4544}45454546/* ── Help dialog overlay (? to open) ────────────────────────── */4547.peach-shortcuts-help-backdrop {4548  position: fixed;4549  inset: 0;4550  background: rgba(0, 0, 0, 0.55);4551  backdrop-filter: blur(2px);4552  display: flex;4553  align-items: center;4554  justify-content: center;4555  z-index: 1000;4556  animation: peach-help-fade-in 140ms ease forwards;4557}4558@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4559.peach-shortcuts-help-card {4560  width: min(320px, 92vw);4561  max-height: 80vh;4562  overflow-y: auto;4563  border-radius: 14px;4564  border: 1px solid var(--peach-t3);4565  background: var(--peach-bg);4566  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4567  padding: 16px 18px 18px;4568  display: flex;4569  flex-direction: column;4570  gap: 12px;4571}4572.peach-shortcuts-help-head {4573  display: flex; align-items: center; justify-content: space-between;4574}4575.peach-shortcuts-help-head h3 {4576  margin: 0;4577  font-family: var(--font-display);4578  font-style: italic;4579  font-weight: 400;4580  font-size: 22px;4581  color: var(--peach-t0);4582}4583.peach-shortcuts-help-close {4584  background: transparent;4585  border: none;4586  color: var(--peach-t2);4587  cursor: pointer;4588  font-size: 0.875rem;4589  padding: 4px 8px;4590  border-radius: 5px;4591}4592.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4593.peach-shortcuts-help-body ul {4594  list-style: none; padding: 0; margin: 4px 0 12px;4595  display: grid; gap: 8px;4596}4597.peach-shortcuts-help-body li {4598  display: flex; align-items: center; justify-content: space-between; gap: 12px;4599  font-size: 0.75rem; color: var(--peach-t0);4600}4601.peach-shortcuts-help-body kbd {4602  font-family: var(--font-mono);4603  font-size: 0.6875rem;4604  padding: 3px 8px;4605  border-radius: 6px;4606  background: var(--surface-card);4607  border: 1px solid var(--peach-t3);4608  color: var(--peach-accent);4609  letter-spacing: 0.04em;4610}46114612/* ── Pro promo on Account screen ────────────────────────────── */4613.peach-pro-promo {4614  position: relative;4615  border-radius: 14px;4616  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4617  background:4618    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4619    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4620    var(--surface-card);4621  overflow: hidden;4622  margin-bottom: 14px;4623}4624.peach-pro-promo-glow {4625  position: absolute;4626  inset: -40% -20% auto auto;4627  width: 220px; height: 220px;4628  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4629  pointer-events: none;4630  filter: blur(8px);4631}4632.peach-pro-promo-inner {4633  position: relative;4634  padding: 18px 18px 16px;4635}4636.peach-pro-promo-title {4637  font-family: var(--font-display);4638  font-style: italic;4639  font-weight: 400;4640  font-size: 28px;4641  line-height: 1;4642  letter-spacing: -0.005em;4643  color: var(--peach-t0);4644  margin: 0 0 4px;4645}4646.peach-pro-promo-tagline {4647  font-family: var(--font-mono);4648  font-size: 0.625rem;4649  letter-spacing: 0.06em;4650  color: var(--peach-t2);4651  margin: 0 0 14px;4652}4653.peach-pro-promo-list {4654  list-style: none;4655  margin: 0 0 16px;4656  padding: 0;4657  display: grid;4658  gap: 9px;4659}4660.peach-pro-promo-list li {4661  display: flex;4662  align-items: flex-start;4663  gap: 9px;4664  font-size: 0.75rem;4665  color: var(--peach-t1);4666  line-height: 1.4;4667}4668.peach-pro-promo-list svg {4669  width: 14px;4670  height: 14px;4671  flex-shrink: 0;4672  color: var(--peach-accent);4673  margin-top: 2px;4674}4675.peach-pro-promo-list span {4676  color: var(--peach-t0);4677}4678.peach-pro-promo-cta {4679  width: 100%;4680  background: var(--peach-accent);4681  color: #fff;4682  border: none;4683  padding: 9px 12px;4684  border-radius: 9px;4685  font-size: 0.75rem;4686  font-weight: 500;4687  font-family: var(--font-ui);4688  letter-spacing: 0.02em;4689  text-decoration: none;4690  display: inline-flex;4691  align-items: center;4692  justify-content: center;4693  cursor: pointer;4694  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4695  box-shadow: 0 2px 16px var(--peach-glow);4696}4697.peach-pro-promo-cta:hover {4698  filter: brightness(1.07);4699  box-shadow: 0 4px 24px var(--peach-glow);4700  transform: translateY(-1px);4701}4702.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }47034704.peach-pro-or-divider {4705  display: flex;4706  align-items: center;4707  gap: 10px;4708  margin: 4px 0 12px;4709  font-family: var(--font-mono);4710  font-size: 0.625rem;4711  letter-spacing: 0.06em;4712  color: var(--peach-t2);4713  text-transform: uppercase;4714}4715.peach-pro-or-divider::before,4716.peach-pro-or-divider::after {4717  content: "";4718  flex: 1;4719  height: 1px;4720  background: var(--peach-t3);4721}47224723.peach-loading {4724  position: absolute;4725  inset: 0;4726  display: flex;4727  align-items: center;4728  justify-content: center;4729  background: var(--bg);4730  animation: peach-loading-pulse 1.2s ease-in-out infinite;4731}47324733@keyframes peach-loading-pulse {4734  0%, 100% { opacity: 0.6; }4735  50% { opacity: 1; }4736}47374738/* ── Health Dashboard ─────────────────────────────────────────────────── */4739.peach-health-body {4740  flex: 1;4741  overflow-y: auto;4742  display: flex;4743  flex-direction: column;4744  /* Hide the platform scrollbar — every other scrollable surface in the4745   * popup hides it; the Health view was the one outlier and it ruined the4746   * polish. Behavior unchanged, just no rail rendered. */4747  scrollbar-width: none;4748  -ms-overflow-style: none;4749}4750.peach-health-body::-webkit-scrollbar { display: none; }47514752/* Loading screen for the Vault Health view. The advanced report computation4753 * can run for a few seconds on a large vault — without a clear loading4754 * screen the surface looked broken (the entry view bleeds through the4755 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4756.peach-health-loading-screen {4757  flex: 1;4758  display: flex;4759  flex-direction: column;4760  align-items: center;4761  justify-content: center;4762  gap: 14px;4763  padding: 32px 28px;4764  text-align: center;4765}47664767.peach-health-loading-glyph {4768  width: 48px;4769  height: 48px;4770  display: flex;4771  align-items: center;4772  justify-content: center;4773  border-radius: 14px;4774  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4775  color: var(--peach-accent);4776}47774778.peach-health-loading-title {4779  margin: 0;4780  font-family: var(--font-display);4781  font-style: italic;4782  font-weight: 300;4783  font-size: 19px;4784  line-height: 1.2;4785  color: var(--peach-t0);4786}47874788.peach-health-loading-copy {4789  margin: 0;4790  max-width: 240px;4791  font-size: 0.75rem;4792  line-height: 1.55;4793  color: var(--peach-t2);4794}47954796.peach-health-loading-track {4797  width: 200px;4798  height: 3px;4799  margin-top: 6px;4800  border-radius: 999px;4801  background: rgba(240, 232, 216, 0.06);4802  overflow: hidden;4803}48044805.peach-health-loading-fill {4806  width: 40%;4807  height: 100%;4808  border-radius: inherit;4809  background: linear-gradient(4810    90deg,4811    transparent 0%,4812    var(--peach-accent) 50%,4813    transparent 100%4814  );4815  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4816}48174818@keyframes peach-health-loading-sweep {4819  0%   { transform: translateX(-100%); }4820  100% { transform: translateX(350%); }4821}48224823[data-motion="reduce"] .peach-health-loading-fill,4824[data-motion="reduce"] .peach-health-loading-glyph svg path {4825  animation: none;4826}48274828.peach-health-summary {4829  padding: 10px 16px 6px;4830  font-family: "IBM Plex Mono", monospace;4831  font-size: 0.6875rem;4832}4833.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4834.peach-health-summary-ok { color: var(--peach-t2); }48354836.peach-health-check-row {4837  padding: 0 16px 10px;4838}4839.peach-health-check-btn {4840  width: 100%;4841  display: flex;4842  align-items: center;4843  justify-content: center;4844}48454846.peach-health-sections {4847  flex: 1;4848  display: flex;4849  flex-direction: column;4850}48514852.peach-health-section {4853  border-bottom: 1px solid var(--peach-t3);4854}48554856.peach-health-section-header {4857  width: 100%;4858  display: flex;4859  align-items: center;4860  justify-content: space-between;4861  padding: 9px 16px;4862  background: transparent;4863  cursor: pointer;4864  color: var(--peach-t0);4865}48664867.peach-health-section-title-row {4868  display: flex;4869  align-items: center;4870  gap: 8px;4871}48724873.peach-health-count-badge {4874  display: inline-flex;4875  align-items: center;4876  justify-content: center;4877  min-width: 20px;4878  height: 18px;4879  padding: 0 5px;4880  border-radius: 999px;4881  background: rgba(220,80,60,0.15);4882  border: 1px solid rgba(220,80,60,0.25);4883  font-family: "IBM Plex Mono", monospace;4884  font-size: 0.5625rem;4885  color: rgba(220,80,60,0.9);4886}48874888.peach-health-section-title {4889  font-family: "IBM Plex Mono", monospace;4890  font-size: 0.6875rem;4891  text-transform: uppercase;4892  letter-spacing: 0.1em;4893  color: var(--peach-t1);4894}48954896.peach-health-chevron {4897  color: var(--peach-t2);4898  transition: transform 200ms ease;4899  flex-shrink: 0;4900}4901.peach-health-chevron.is-expanded {4902  transform: rotate(180deg);4903}49044905.peach-health-section-body {4906  padding: 0 16px 10px;4907  display: flex;4908  flex-direction: column;4909  gap: 4px;4910}49114912.peach-health-row {4913  display: flex;4914  align-items: flex-start;4915  justify-content: space-between;4916  gap: 8px;4917  padding: 6px 8px;4918  border-radius: 8px;4919  background: rgba(240,232,216,0.02);4920}49214922.peach-health-row-info {4923  flex: 1;4924  min-width: 0;4925  display: flex;4926  flex-direction: column;4927  gap: 2px;4928}49294930.peach-health-row-name {4931  font-family: var(--font-display);4932  font-size: 0.9375rem;4933  font-style: italic;4934  font-weight: 400;4935  color: var(--peach-t0);4936  white-space: nowrap;4937  overflow: hidden;4938  text-overflow: ellipsis;4939}49404941.peach-health-row-meta {4942  font-family: "IBM Plex Mono", monospace;4943  font-size: 0.5625rem;4944  color: var(--peach-t2);4945  letter-spacing: 0.05em;4946}49474948.peach-health-fix-btn {4949  font-size: 0.5625rem;4950  letter-spacing: 0.08em;4951  text-transform: uppercase;4952  padding: 4px 7px;4953  flex-shrink: 0;4954  display: flex;4955  align-items: center;4956}49574958.peach-health-empty {4959  font-family: "IBM Plex Mono", monospace;4960  font-size: 0.625rem;4961  color: var(--peach-t2);4962  padding: 6px 0;4963}49644965.peach-health-loading {4966  font-family: "IBM Plex Mono", monospace;4967  font-size: 0.625rem;4968  color: var(--peach-t2);4969  padding: 6px 0;4970  display: flex;4971  align-items: center;4972  gap: 6px;4973}49744975.peach-health-loading::before {4976  content: "";4977  width: 10px;4978  height: 10px;4979  border: 1.5px solid var(--peach-t3);4980  border-top-color: var(--peach-accent);4981  border-radius: 50%;4982  animation: peach-spin 600ms linear infinite;4983}49844985@keyframes peach-spin {4986  to { transform: rotate(360deg); }4987}49884989.peach-spinner {4990  width: 32px;4991  height: 32px;4992  border: 2px solid var(--peach-s2);4993  border-top-color: var(--peach-accent);4994  border-radius: 50%;4995  margin: 0 auto 16px;4996  animation: peach-spin 0.8s linear infinite;4997}49984999.peach-progress-screen {5000  text-align: center;5001  padding: 32px 16px;5002}50035004.peach-progress-screen-title {5005  font-size: 0.8125rem;5006  color: var(--peach-t0);5007  margin-bottom: 16px;5008}50095010.peach-progress-screen-stage {5011  font-size: 0.6875rem;5012  color: var(--peach-t2);5013  min-height: 14px;5014}50155016.peach-progress-screen-note {5017  font-size: 0.625rem;5018  color: var(--peach-t2);5019  margin-top: 8px;5020}50215022.peach-pairing-body {5023  flex: 1;5024  overflow-y: auto;5025  display: flex;5026  flex-direction: column;5027}50285029.peach-pairing-content {5030  flex: 1;5031  display: flex;5032  flex-direction: column;5033  align-items: center;5034  justify-content: center;5035  gap: 14px;5036  padding: 28px 20px;5037  text-align: center;5038}50395040.peach-pairing-code-screen {5041  gap: 18px;5042}50435044.peach-pairing-headline {5045  font-family: var(--font-display);5046  font-style: italic;5047  font-weight: 300;5048  font-size: 28px;5049  color: var(--peach-t0);5050  margin: 0;5051  line-height: 1;5052}50535054.peach-pairing-subline {5055  font-size: 0.75rem;5056  color: var(--peach-t2);5057  max-width: 220px;5058  line-height: 1.5;5059  margin: 0;5060}50615062.peach-pairing-subline--center {5063  text-align: center;5064}50655066/* 6-digit pairing code — both display (.peach-pairing-code) and entry5067   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking5068   so the two modes feel like the same surface. */5069.peach-pairing-code {5070  font-family: "IBM Plex Mono", monospace;5071  font-size: 36px;5072  letter-spacing: 0.25em;5073  color: var(--peach-t0);5074  text-align: center;5075  padding: 24px 0;5076  text-shadow:5077    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),5078    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);5079  background: transparent;5080  border: 0;5081  cursor: default;5082  user-select: text;5083}50845085.peach-pairing-code--loading,5086.peach-pairing-code--expired {5087  font-size: 18px;5088  letter-spacing: 0.04em;5089  color: var(--peach-t2);5090  cursor: pointer;5091  text-shadow: none;5092}50935094.peach-pairing-qr-container {5095  display: flex;5096  flex-direction: column;5097  align-items: center;5098  gap: 10px;5099}51005101.peach-pairing-qr {5102  width: 240px;5103  height: 240px;5104  display: block;5105}51065107.peach-pairing-instruction {5108  font-size: 0.75rem;5109  color: var(--peach-t2);5110  text-align: center;5111  line-height: 1.5;5112  margin: 0;5113  max-width: 220px;5114}51155116.peach-pairing-expiry {5117  font-family: "IBM Plex Mono", monospace;5118  font-size: 13px;5119  letter-spacing: 0.06em;5120  color: var(--peach-t2);5121  margin: 0;5122}51235124.peach-pairing-regen {5125  font-size: 0.75rem;5126  color: var(--peach-accent);5127  background: transparent;5128  border: 0;5129  cursor: pointer;5130  padding: 4px 0;5131  text-decoration: underline;5132  text-underline-offset: 2px;5133}51345135.peach-pairing-code-input {5136  font-family: "IBM Plex Mono", monospace;5137  font-size: 36px;5138  letter-spacing: 0.25em;5139  color: var(--peach-t0);5140  background: transparent;5141  border: 0;5142  border-bottom: 1px solid var(--peach-t3);5143  outline: none;5144  text-align: center;5145  padding: 18px 0;5146  width: 220px;5147  caret-color: var(--peach-accent);5148  transition: border-color 160ms ease;5149}51505151.peach-pairing-code-input::placeholder {5152  color: var(--peach-t3);5153}51545155.peach-pairing-code-input:focus {5156  border-bottom-color: var(--peach-accent);5157}51585159.peach-pairing-toggle {5160  background: transparent;5161  border: 0;5162  color: var(--peach-t2);5163  font-size: 0.75rem;5164  padding: 8px 4px;5165  cursor: pointer;5166  transition: color 120ms ease;5167}51685169.peach-pairing-toggle:hover:not(:disabled) {5170  color: var(--peach-t1);5171}51725173.peach-pairing-toggle:disabled {5174  opacity: 0.5;5175  cursor: default;5176}51775178.peach-pairing-hint {5179  font-size: 0.6875rem;5180  color: var(--peach-t2);5181  margin: 0;5182  text-align: center;5183}51845185.peach-pairing-status {5186  display: flex;5187  align-items: center;5188  gap: 8px;5189  margin: 0;5190  font-size: 0.75rem;5191  color: var(--peach-t1);5192}51935194.peach-pairing-error {5195  margin: 0;5196  font-size: 0.6875rem;5197  color: var(--peach-breach);5198}51995200.peach-pairing-error--muted {5201  color: var(--peach-t2);5202}52035204.peach-pairing-spinner {5205  width: 12px;5206  height: 12px;5207  border: 1.5px solid var(--peach-t3);5208  border-top-color: var(--peach-accent);5209  border-radius: 50%;5210  animation: peach-spin 0.8s linear infinite;5211}52125213.peach-pairing-success-icon,5214.peach-pairing-error-icon,5215.peach-pairing-hero {5216  display: inline-flex;5217  align-items: center;5218  justify-content: center;5219}52205221/* Tag chips */5222.peach-tag-chip {5223  display: inline-flex;5224  align-items: center;5225  gap: 4px;5226  padding: 3px 8px;5227  border-radius: 999px;5228  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5229  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5230  color: var(--peach-t0);5231  font-family: "IBM Plex Mono", monospace;5232  font-size: 0.625rem;5233  letter-spacing: 0.04em;5234}52355236.peach-tag-chip-remove {5237  background: transparent;5238  border: none;5239  color: inherit;5240  opacity: 0.6;5241  cursor: pointer;5242  padding: 0;5243  font-size: 0.75rem;5244  line-height: 1;5245}52465247.peach-tag-chip-remove:hover {5248  opacity: 1;5249}52505251/* Tag input */5252.peach-tag-input-wrap {5253  border-bottom: 1px solid var(--peach-t3);5254}52555256.peach-tag-suggestions {5257  display: flex;5258  flex-wrap: wrap;5259  gap: 4px;5260  padding: 6px 0;5261}52625263.peach-tag-suggestion {5264  padding: 2px 8px;5265  border-radius: 999px;5266  border: 1px solid var(--peach-t3);5267  background: var(--peach-s2);5268  color: var(--peach-t1);5269  font-family: "IBM Plex Mono", monospace;5270  font-size: 0.625rem;5271  cursor: pointer;5272  transition: border-color 80ms ease, background 80ms ease;5273}52745275.peach-tag-suggestion:hover {5276  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5277  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5278}52795280/* Identity suggestions — shown below username/email inputs in new-entry form */5281@keyframes peach-suggest-in {5282  from { opacity: 0; transform: translateY(-4px); }5283  to   { opacity: 1; transform: none; }5284}52855286.peach-identity-suggestions {5287  display: flex;5288  flex-direction: column;5289  gap: 1px;5290  margin-top: 4px;5291  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5292}52935294.peach-identity-filter-row {5295  display: flex;5296  align-items: center;5297  gap: 4px;5298  padding: 2px 0 5px;5299}53005301.peach-identity-collapse-btn {5302  margin-left: auto;5303  background: transparent;5304  border: none;5305  cursor: pointer;5306  color: var(--peach-t3);5307  padding: 2px 4px;5308  display: flex;5309  align-items: center;5310  line-height: 0;5311  border-radius: 3px;5312  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5313}53145315.peach-identity-collapse-btn:hover {5316  color: var(--peach-t1);5317}53185319.peach-identity-collapse-btn.is-collapsed {5320  transform: rotate(-90deg);5321}53225323.peach-identity-rows {5324  display: grid;5325  grid-template-rows: 1fr;5326  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5327}53285329.peach-identity-rows.is-collapsed {5330  grid-template-rows: 0fr;5331}53325333.peach-identity-rows-inner {5334  overflow-y: auto;5335  min-height: 0;5336  max-height: 148px;5337  scrollbar-width: thin;5338  scrollbar-color: var(--peach-t3) transparent;5339  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5340  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5341}53425343.peach-identity-rows-inner::-webkit-scrollbar {5344  width: 4px;5345}53465347.peach-identity-rows-inner::-webkit-scrollbar-track {5348  background: transparent;5349}53505351.peach-identity-rows-inner::-webkit-scrollbar-thumb {5352  background: var(--peach-t3);5353  border-radius: 2px;5354}53555356.peach-identity-filter-pill {5357  padding: 2px 7px;5358  border-radius: 999px;5359  border: 1px solid var(--peach-t3);5360  background: transparent;5361  color: var(--peach-t2);5362  font-family: "IBM Plex Mono", monospace;5363  font-size: 0.6rem;5364  cursor: pointer;5365  transition: border-color 80ms, background 80ms, color 80ms;5366}53675368.peach-identity-filter-pill.is-on {5369  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5370  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5371  color: var(--peach-accent);5372}53735374.peach-identity-suggestion {5375  display: flex;5376  align-items: center;5377  gap: 6px;5378  width: 100%;5379  padding: 4px 6px;5380  border-radius: 5px;5381  border: none;5382  background: transparent;5383  cursor: pointer;5384  text-align: left;5385  transition: background 80ms ease;5386}53875388.peach-identity-suggestion:hover,5389.peach-identity-suggestion:focus {5390  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5391  outline: none;5392}53935394.peach-identity-suggestion-value {5395  font-family: "IBM Plex Mono", monospace;5396  font-size: 0.7rem;5397  color: var(--peach-t1);5398  overflow: hidden;5399  text-overflow: ellipsis;5400  white-space: nowrap;5401  flex: 1;5402  min-width: 0;5403}54045405.peach-identity-suggestion-type {5406  font-family: "IBM Plex Mono", monospace;5407  font-size: 0.55rem;5408  font-weight: 600;5409  flex-shrink: 0;5410  padding: 1px 4px;5411  border-radius: 3px;5412}54135414.peach-identity-suggestion-type--email {5415  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5416  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5417}54185419.peach-identity-suggestion-type--username {5420  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5421  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5422}54235424.peach-identity-suggestion-meta {5425  font-family: "IBM Plex Mono", monospace;5426  font-size: 0.6rem;5427  color: var(--peach-t3);5428  flex-shrink: 0;5429}54305431/* Tag filter strip */5432.peach-tag-filter-strip {5433  border-bottom: 1px solid var(--peach-t3);5434  flex-shrink: 0;5435}54365437.peach-tag-filter-chip {5438  display: inline-flex;5439  align-items: center;5440  padding: 4px 10px;5441  border-radius: 999px;5442  border: 1px solid var(--peach-t3);5443  background: transparent;5444  color: var(--peach-t2);5445  font-family: "IBM Plex Mono", monospace;5446  font-size: 0.5625rem;5447  letter-spacing: 0.06em;5448  text-transform: uppercase;5449  cursor: pointer;5450  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5451  white-space: nowrap;5452}54535454.peach-tag-filter-chip:hover {5455  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5456  color: var(--peach-t1);5457}54585459.peach-tag-filter-chip.is-selected {5460  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5461  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5462  color: var(--peach-t0);5463}54645465/* ─────────────────────────────────────────────────────────────────────────5466   v1.4.12 additions5467   ─────────────────────────────────────────────────────────────────────── */54685469/* Sort bar */5470.peach-sort-bar {5471  display: flex;5472  align-items: center;5473  gap: 4px;5474  padding: 5px 12px;5475  border-bottom: 1px solid var(--peach-t3);5476  flex-shrink: 0;5477  overflow-x: auto;5478  scrollbar-width: none;5479}54805481.peach-sort-btn {5482  padding: 2px 9px;5483  border-radius: 999px;5484  border: 1px solid transparent;5485  background: transparent;5486  color: var(--peach-t2);5487  font-family: "IBM Plex Mono", monospace;5488  font-size: 0.5625rem;5489  letter-spacing: 0.07em;5490  text-transform: uppercase;5491  cursor: pointer;5492  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5493  white-space: nowrap;5494}54955496.peach-sort-btn:hover {5497  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5498  color: var(--peach-t1);5499}55005501.peach-sort-btn.is-active {5502  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5503  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5504  color: var(--peach-t0);5505}55065507.peach-sort-domain-hint {5508  margin-left: auto;5509  font-family: "IBM Plex Mono", monospace;5510  font-size: 0.5625rem;5511  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5512  white-space: nowrap;5513  overflow: hidden;5514  text-overflow: ellipsis;5515  max-width: 110px;5516}55175518/* Tab-match badge on entry rows */5519.peach-tab-match-badge {5520  display: inline-block;5521  width: 6px;5522  height: 6px;5523  border-radius: 50%;5524  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5525  margin-left: 5px;5526  vertical-align: middle;5527  flex-shrink: 0;5528  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5529}55305531.peach-entry-row.is-tab-match {5532  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5533  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5534}55355536.peach-entry-row.is-tab-match:hover {5537  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5538}55395540/* Entry list stagger entrance */5541@keyframes peach-entry-fadein {5542  from { opacity: 0; transform: translateY(4px); }5543  to   { opacity: 1; transform: translateY(0); }5544}55455546.peach-vault-list .peach-entry-row {5547  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5548}55495550/* Button press micro-interaction */5551.peach-btn:active {5552  transform: scale(0.95);5553  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5554}55555556.peach-sort-btn:active,5557.peach-tag-filter-chip:active {5558  transform: scale(0.93);5559  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5560}55615562/* Password strength bar (Lock view + shared) */5563.peach-password-strength {5564  display: flex;5565  align-items: center;5566  gap: 8px;5567  margin-top: 6px;5568}55695570.peach-strength-bar {5571  flex: 1;5572  height: 3px;5573  border-radius: 2px;5574  background: var(--peach-t3);5575  overflow: hidden;5576}55775578.peach-strength-fill {5579  height: 100%;5580  border-radius: 2px;5581  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5582              background 300ms ease;5583}55845585.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5586.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5587.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5588.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }55895590.peach-strength-label {5591  font-family: "IBM Plex Mono", monospace;5592  font-style: italic;5593  font-size: 0.5625rem;5594  font-weight: 300;5595  letter-spacing: 0.06em;5596  color: var(--peach-t2);5597  min-width: 36px;5598  text-align: right;5599}56005601.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5602.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5603.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5604.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }56055606/* Duress form */5607.peach-duress-status {5608  padding: 2px 8px;5609  border-radius: 999px;5610  border: 1px solid var(--peach-t3);5611  font-family: "IBM Plex Mono", monospace;5612  font-size: 0.5625rem;5613  letter-spacing: 0.07em;5614  text-transform: uppercase;5615  color: var(--peach-t2);5616  flex-shrink: 0;5617}56185619.peach-duress-status.is-active {5620  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5621  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5622  color: var(--peach-t0);5623}56245625.peach-duress-form {5626  padding: 8px 0 4px;5627  display: flex;5628  flex-direction: column;5629  gap: 6px;5630}56315632.peach-duress-form .peach-label {5633  margin-top: 4px;5634}56355636.peach-duress-actions {5637  display: flex;5638  gap: 6px;5639  align-items: center;5640  margin-top: 4px;5641}56425643.peach-duress-actions .peach-btn:first-child {5644  margin-right: auto;5645}56465647/* Improved overlay spring entrance */5648.peach-overlay-view.ov-enter-up {5649  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5650}56515652@keyframes ov-enter-up-spring {5653  from { opacity: 0; transform: translateY(16px) scale(0.98); }5654  to   { opacity: 1; transform: translateY(0) scale(1); }5655}56565657.peach-overlay-view.ov-enter-right {5658  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5659}56605661@keyframes ov-enter-right-spring {5662  from { opacity: 0; transform: translateX(18px) scale(0.98); }5663  to   { opacity: 1; transform: translateX(0) scale(1); }5664}56655666/* ── Onboarding-mode restore screens (file import) ── */5667/* Used when MainImportView renders during onboarding (no vault yet).5668   Animates like a lock-screen transition. */5669.peach-lock-view {5670  position: absolute;5671  inset: 0;5672  display: flex;5673  flex-direction: column;5674  background:5675    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5676    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5677    var(--peach-bg);5678  z-index: 2;5679  overflow: hidden;5680  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5681}56825683.peach-lock-view-header {5684  display: flex;5685  align-items: center;5686  justify-content: space-between;5687  padding: 16px 18px 12px;5688  flex-shrink: 0;5689}56905691/* ───────── Settings: auto-lock select ───────── */5692.peach-settings-select {5693  font-family: "IBM Plex Mono", monospace;5694  font-size: 0.6875rem;5695  background: transparent;5696  border: 1px solid var(--peach-t3);5697  border-radius: 4px;5698  color: var(--peach-t1);5699  padding: 3px 6px;5700  cursor: pointer;5701  outline: none;5702}5703.peach-settings-select:focus {5704  border-color: var(--peach-accent);5705}57065707/* ───────── Duress status pill (new polished) ───────── */5708.peach-duress-status-pill {5709  font-family: "IBM Plex Mono", monospace;5710  font-size: 0.5625rem;5711  text-transform: uppercase;5712  letter-spacing: 0.12em;5713  padding: 2px 8px;5714  border-radius: 12px;5715  background: var(--peach-t3);5716  color: var(--peach-t2);5717  flex-shrink: 0;5718}5719.peach-duress-status-pill.is-active {5720  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5721  color: var(--peach-accent);5722}57235724/* ───────── Entry advanced disclosure (canary) ───────── */5725.peach-entry-advanced {5726  margin-top: 12px;5727  border-top: 1px solid var(--peach-t3);5728  padding-top: 10px;5729  position: relative;5730  z-index: 1;5731}5732.peach-entry-advanced-toggle {5733  display: flex;5734  align-items: center;5735  justify-content: space-between;5736  width: 100%;5737  background: transparent;5738  border: none;5739  cursor: pointer;5740  padding: 0;5741  color: var(--peach-t2);5742}5743.peach-canary-section {5744  margin-top: 10px;5745  display: grid;5746  gap: 6px;5747}57485749/* ───────── Import: merge/replace radio choices ───────── */5750.peach-import-choice {5751  display: flex;5752  align-items: flex-start;5753  gap: 10px;5754  padding: 8px 10px;5755  border: 1px solid var(--peach-t3);5756  border-radius: 10px;5757  cursor: pointer;5758  margin-bottom: 6px;5759  transition: border-color 120ms ease, background 120ms ease;5760}5761.peach-import-choice:hover {5762  border-color: var(--peach-accent);5763}5764.peach-import-choice input[type="radio"] {5765  margin-top: 3px;5766  accent-color: var(--peach-accent);5767  flex-shrink: 0;5768}5769.peach-import-choice-main {5770  display: flex;5771  flex-direction: column;5772  gap: 2px;5773  min-width: 0;5774}5775.peach-import-choice-label {5776  font-size: 0.75rem;5777  color: var(--peach-t0);5778}5779.peach-import-choice-sub {5780  font-size: 0.6875rem;5781  color: var(--peach-t2);5782  line-height: 1.5;5783}57845785/* ───────── Export: success confirmation strip ───────── */5786.peach-export-success {5787  display: flex;5788  align-items: flex-start;5789  gap: 10px;5790  padding: 12px;5791  border-radius: 12px;5792  border: 1px solid rgba(150, 175, 110, 0.3);5793  background: rgba(150, 175, 110, 0.08);5794  color: var(--peach-t0);5795  font-size: 0.75rem;5796  line-height: 1.55;5797}5798.peach-export-success-check {5799  color: rgba(150, 175, 110, 0.9);5800  font-size: 0.875rem;5801  flex-shrink: 0;5802}58035804/* ── Trash view ──────────────────────────────────────────────────────── */5805.peach-trash-entry-row {5806  display: flex;5807  align-items: center;5808  justify-content: space-between;5809  gap: 8px;5810  padding: 8px 0;5811  border-bottom: 1px solid var(--peach-border);5812}5813.peach-trash-entry-info {5814  flex: 1;5815  min-width: 0;5816  display: flex;5817  flex-direction: column;5818  gap: 2px;5819}5820.peach-trash-entry-title {5821  font-size: 0.8125rem;5822  color: var(--peach-t0);5823  overflow: hidden;5824  text-overflow: ellipsis;5825  white-space: nowrap;5826}5827.peach-trash-entry-meta {5828  font-family: var(--font-mono);5829  font-size: 0.5625rem;5830  color: var(--peach-t2);5831  letter-spacing: 0.04em;5832}5833.peach-trash-entry-actions {5834  display: flex;5835  align-items: center;5836  gap: 4px;5837  flex-shrink: 0;5838}5839.peach-trash-delete-btn {5840  background: transparent;5841  border: 0;5842  color: var(--peach-t3);5843  font-size: 1rem;5844  line-height: 1;5845  cursor: pointer;5846  padding: 2px 5px;5847  transition: color 0.15s;5848}5849.peach-trash-delete-btn:hover { color: var(--peach-breach); }5850.peach-trash-list {5851  overflow-y: auto;5852}5853.peach-trash-footer {5854  display: flex;5855  align-items: center;5856  gap: 8px;5857  padding: 8px 0 0;5858  border-top: 1px solid var(--peach-border);5859  margin-top: 4px;5860}5861.peach-trash-purge-all {5862  background: transparent;5863  border: 0;5864  color: var(--peach-t3);5865  font-size: 0.625rem;5866  cursor: pointer;5867  padding: 4px 0;5868  letter-spacing: 0.03em;5869  transition: color 0.2s;5870}5871.peach-trash-purge-all:hover { color: var(--peach-breach); }5872.peach-trash-purge-confirm-label {5873  font-size: 0.625rem;5874  color: var(--peach-t1);5875  flex: 1;5876}58775878/* ── Settings shortcuts grid ─────────────────────────────────────────── */5879.peach-shortcuts-grid {5880  display: grid;5881  grid-template-columns: auto 1fr;5882  gap: 6px 12px;5883  align-items: center;5884  padding: 4px 0;5885}5886.peach-shortcut-key {5887  font-family: var(--font-mono);5888  font-size: 0.625rem;5889  color: var(--peach-t0);5890  background: var(--peach-t3);5891  border-radius: 4px;5892  padding: 2px 6px;5893  white-space: nowrap;5894  text-align: center;5895}5896.peach-shortcut-desc {5897  font-size: 0.6875rem;5898  color: var(--peach-t1);5899}59005901/* ── Sort bar trash button ───────────────────────────────────────────── */5902.peach-sort-trash-btn {5903  display: flex;5904  align-items: center;5905  justify-content: center;5906  padding: 3px 5px;5907  background: transparent;5908  border: none;5909  cursor: pointer;5910  color: var(--peach-t2);5911  border-radius: 4px;5912  transition: color 140ms ease, background 140ms ease;5913}5914.peach-sort-trash-btn:hover {5915  color: var(--peach-t1);5916  background: var(--peach-t3);5917}5918.peach-sort-trash-btn.is-active {5919  color: var(--peach-accent);5920}59215922/* Accent color picker */5923.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5924.peach-accent-picker {5925  display: flex;5926  flex-wrap: wrap;5927  gap: 7px;5928  padding: 2px 0;5929}5930.peach-accent-swatch {5931  width: 22px;5932  height: 22px;5933  border-radius: 50%;5934  border: 2px solid transparent;5935  cursor: pointer;5936  padding: 0;5937  transition: transform 100ms;5938  outline-offset: 2px;5939}5940.peach-accent-swatch:hover { transform: scale(1.15); }5941.peach-accent-swatch.is-active {5942  border-color: var(--peach-t0);5943  transform: scale(1.1);5944}59455946.peach-pill-group {5947  display: flex;5948  gap: 6px;5949}5950.peach-pill-group .peach-btn.is-active {5951  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5952  border-color: var(--peach-accent);5953  color: var(--peach-t0);5954}59555956/* ── Card entry styles ───────────────────────────────────────── */5957.peach-card-number {5958  font-family: var(--peach-mono);5959  letter-spacing: 0.08em;5960}59615962.peach-card-network-badge {5963  font-size: 0.625rem;5964  padding: 1px 5px;5965  border-radius: 4px;5966  border: 0.5px solid var(--peach-border);5967  color: var(--peach-text-dim);5968  margin-left: 6px;5969  vertical-align: middle;5970}59715972.peach-card-expiry-row {5973  display: flex;5974  align-items: center;5975  gap: 8px;5976}59775978.peach-card-expiry-sep {5979  color: var(--peach-text-dim);5980}59815982/* ── Pro tier — upgrade screen ──────────────────────────────── */5983.peach-pro-mark {5984  font-size: 0.5625rem;5985  color: var(--peach-accent);5986  margin-left: 6px;5987  vertical-align: super;5988  opacity: 0.7;5989}59905991.peach-pro-mini-badge {5992  display: block;5993  font-size: 0.625rem;5994  font-style: italic;5995  color: var(--peach-accent);5996  letter-spacing: 0.04em;5997  margin-top: -2px;5998  padding-left: 2px;5999  opacity: 0.85;6000  text-align: center;6001}60026003.peach-wordmark-stack {6004  display: inline-flex;6005  flex-direction: column;6006  align-items: center;6007}60086009/* ── Pro tier — upgrade page ─────────────────────────────────── */6010.peach-pro-upgrade {6011  display: flex;6012  flex-direction: column;6013  align-items: stretch;6014  gap: 10px;6015  padding: 0 4px 8px;6016}60176018.peach-pro-upgrade-hero {6019  display: flex;6020  flex-direction: column;6021  align-items: center;6022  gap: 4px;6023  padding: 10px 0 6px;6024}60256026.peach-pro-upgrade-mark-wrap {6027  display: flex;6028  align-items: center;6029  justify-content: center;6030  margin-bottom: 2px;6031}60326033.peach-pro-upgrade-mark {6034  width: 38px;6035  height: 38px;6036  opacity: 0.9;6037}60386039.peach-pro-upgrade-title {6040  font-family: var(--font-display, var(--font-ui));6041  font-size: 22px;6042  margin: 0;6043  color: var(--peach-t0);6044  letter-spacing: 0.01em;6045}60466047.peach-pro-upgrade-tagline {6048  margin: 0;6049  font-style: italic;6050  color: var(--peach-t2);6051  font-size: 0.6875rem;6052}60536054.peach-pro-features {6055  display: flex;6056  flex-direction: column;6057  gap: 8px;6058  border-top: 1px solid var(--peach-border);6059  border-bottom: 1px solid var(--peach-border);6060  padding: 10px 4px;6061}60626063.peach-pro-feature {6064  display: flex;6065  gap: 9px;6066  align-items: baseline;6067}60686069.peach-pro-feature-mark {6070  color: var(--peach-accent);6071  font-size: 0.6875rem;6072  flex-shrink: 0;6073  display: inline-block;6074  transform-origin: center;6075  opacity: 0.8;6076}60776078.peach-pro-feature-text {6079  display: flex;6080  flex-direction: column;6081  gap: 1px;6082}60836084.peach-pro-feature-name {6085  font-size: 0.75rem;6086  color: var(--peach-t0);6087}60886089.peach-pro-feature-desc {6090  font-size: 0.625rem;6091  color: var(--peach-t2);6092}60936094.peach-pro-feature.is-highlighted .peach-pro-feature-mark {6095  animation: peach-pulse-accent 600ms ease-out forwards;6096}60976098@keyframes peach-pulse-accent {6099  0%   { opacity: 1; transform: scale(1.4); }6100  100% { opacity: 0.7; transform: scale(1); }6101}61026103.peach-pro-upgrade-actions {6104  display: flex;6105  flex-direction: column;6106  align-items: center;6107  gap: 8px;6108  padding-top: 2px;6109}61106111.peach-pro-pricing {6112  margin: 0;6113  text-align: center;6114  font-size: 0.6875rem;6115  color: var(--peach-t2);6116  letter-spacing: 0.04em;6117}61186119.peach-pro-upgrade-cta {6120  align-self: center;6121  text-align: center;6122  text-decoration: none;6123  display: block;6124  padding: 9px 32px;6125  font-size: 0.8125rem;6126  min-width: 180px;6127}61286129.peach-pro-key-divider {6130  display: flex;6131  align-items: center;6132  gap: 8px;6133  width: 100%;6134  color: var(--peach-t3);6135  font-size: 0.625rem;6136  letter-spacing: 0.08em;6137}61386139.peach-pro-key-divider::before,6140.peach-pro-key-divider::after {6141  content: "";6142  flex: 1;6143  height: 1px;6144  background: var(--peach-border);6145}61466147.peach-pro-key-link {6148  background: transparent;6149  border: 1px solid var(--peach-border);6150  border-radius: 8px;6151  color: var(--peach-t1);6152  font-size: 0.75rem;6153  cursor: pointer;6154  align-self: stretch;6155  padding: 8px 12px;6156  text-align: center;6157  transition: border-color 0.2s, color 0.2s;6158}61596160.peach-pro-key-link:hover {6161  border-color: var(--peach-accent);6162  color: var(--peach-accent);6163}61646165/* ── Pro tier — key ceremony ─────────────────────────────────── */6166.peach-pro-key-ceremony {6167  display: flex;6168  flex-direction: column;6169  align-items: center;6170  gap: 12px;6171  padding: 20px 4px 16px;6172}61736174.peach-pro-key-ceremony .peach-lock-rune-string {6175  font-size: 1rem;6176  gap: 12px;6177  flex: 0;6178  justify-content: center;6179}61806181.peach-pro-key-ceremony-label {6182  margin: 0;6183  font-size: 0.6875rem;6184  color: var(--peach-t2);6185  font-style: italic;6186  letter-spacing: 0.04em;6187}61886189.peach-pro-key-input {6190  font-family: var(--font-mono, monospace);6191  letter-spacing: 0.06em;6192  text-align: center;6193  width: 100%;6194  box-sizing: border-box;6195}61966197.peach-pro-key-error {6198  margin: 0;6199  font-size: 0.75rem;6200  text-align: center;6201  color: var(--peach-breach, #e55);6202  padding: 0;6203}62046205.peach-pro-key-activate {6206  width: 100%;6207  text-align: center;6208  box-sizing: border-box;6209  padding: 10px 20px;6210  font-size: 0.8125rem;6211}62126213.peach-pro-key-cancel {6214  background: transparent;6215  border: 0;6216  color: var(--peach-t2);6217  font-size: 0.6875rem;6218  cursor: pointer;6219  padding: 2px 8px;6220  transition: color 0.2s;6221}62226223.peach-pro-key-cancel:hover { color: var(--peach-accent); }62246225/* ── Pro tier — active state ─────────────────────────────────── */6226.peach-pro-active {6227  display: flex;6228  flex-direction: column;6229  align-items: center;6230  gap: 0;6231  padding: 8px 4px 16px;6232  min-height: 280px;6233}62346235.peach-pro-active-hero {6236  display: flex;6237  flex-direction: column;6238  align-items: center;6239  gap: 6px;6240  padding: 20px 0 22px;6241}62426243.peach-pro-active-mark-wrap {6244  display: flex;6245  align-items: center;6246  justify-content: center;6247  margin-bottom: 4px;6248}62496250.peach-pro-active-mark {6251  width: 60px;6252  height: 60px;6253  filter:6254    drop-shadow(0 0 10px color-mix(in srgb, var(--peach-accent) 55%, transparent))6255    drop-shadow(0 0 26px color-mix(in srgb, var(--peach-accent) 22%, transparent));6256}62576258.peach-pro-active-title {6259  font-family: var(--font-display, var(--font-ui));6260  font-size: 26px;6261  margin: 0;6262  color: var(--peach-t0);6263  letter-spacing: 0.01em;6264}62656266.peach-pro-active-since {6267  margin: 0;6268  font-size: 0.6875rem;6269  color: var(--peach-t2);6270  font-style: italic;6271}62726273.peach-pro-active-features {6274  display: flex;6275  flex-direction: column;6276  gap: 8px;6277  width: 100%;6278  padding: 14px 8px 0;6279  border-top: 1px solid var(--peach-border);6280  flex: 1;6281}62826283.peach-pro-active-feature {6284  display: flex;6285  align-items: center;6286  gap: 9px;6287}62886289.peach-pro-active-feature-mark {6290  color: var(--peach-accent);6291  font-size: 0.625rem;6292  opacity: 0.65;6293  flex-shrink: 0;6294}62956296.peach-pro-active-feature-name {6297  font-size: 0.75rem;6298  color: var(--peach-t1);6299}63006301.peach-pro-deactivate {6302  align-self: center;6303  background: transparent;6304  border: 0;6305  color: var(--peach-t3);6306  font-size: 0.625rem;6307  cursor: pointer;6308  padding: 8px 0 0;6309  margin-top: 16px;6310  letter-spacing: 0.03em;6311  transition: color 0.2s;6312}63136314.peach-pro-deactivate:hover { color: var(--peach-t2); }63156316.peach-pro-deactivate:disabled {6317  opacity: 0.5;6318  cursor: default;6319}63206321/* ── Pro advanced health remediation queue ──────────────────── */6322.peach-health-pro-queue {6323  display: flex;6324  flex-direction: column;6325  gap: 10px;6326  padding: 12px;6327  margin: 0 0 12px;6328  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6329  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6330  border-radius: 10px;6331}63326333.peach-health-pro-queue-head {6334  display: flex;6335  justify-content: space-between;6336  align-items: baseline;6337}63386339.peach-health-pro-queue-title {6340  font-size: 0.75rem;6341  font-weight: 500;6342  letter-spacing: 0.04em;6343  text-transform: uppercase;6344  color: var(--peach-accent);6345}63466347.peach-health-pro-queue-score {6348  font-size: 0.6875rem;6349  color: var(--peach-t2);6350}63516352.peach-health-pro-row {6353  display: flex;6354  gap: 10px;6355  align-items: center;6356  padding: 8px 0;6357  border-top: 1px solid var(--peach-border);6358}63596360.peach-health-pro-row-info {6361  flex: 1;6362  display: flex;6363  flex-direction: column;6364  gap: 4px;6365  min-width: 0;6366}63676368.peach-health-pro-row-name {6369  font-size: 0.8125rem;6370  color: var(--peach-t0);6371  overflow: hidden;6372  text-overflow: ellipsis;6373  white-space: nowrap;6374}63756376.peach-health-pro-row-meta {6377  font-size: 0.6875rem;6378  color: var(--peach-t2);6379}63806381.peach-health-pro-bar {6382  height: 2px;6383  background: var(--peach-border);6384  border-radius: 2px;6385  overflow: hidden;6386  margin-top: 2px;6387}63886389.peach-health-pro-bar-fill {6390  height: 100%;6391  background: var(--peach-accent);6392  transition: width 200ms ease-out;6393}63946395/* ── Pro activation celebration ── */6396@keyframes peach-pro-bloom {6397  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6398  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6399                 drop-shadow(0 0 48px var(--peach-glow)); }6400  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6401}64026403@keyframes peach-pro-wordmark-in {6404  from { opacity: 0; transform: translateY(4px); }6405  to   { opacity: 1; transform: translateY(0); }6406}64076408@keyframes peach-pro-fade-out {6409  from { opacity: 1; }6410  to   { opacity: 0; }6411}64126413.peach-pro-celebration {6414  background:6415    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6416    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6417    var(--peach-bg);6418  border: 1px solid var(--peach-t3);6419  box-shadow:6420    0 2px 8px rgba(0,0,0,0.55),6421    0 14px 48px rgba(0,0,0,0.7),6422    0 0 0 1px rgba(240,232,216,0.04);6423  overflow: hidden;6424  width: 320px;6425  height: 520px;6426  display: flex;6427  flex-direction: column;6428  align-items: center;6429  justify-content: center;6430  gap: 8px;6431  padding: 32px 24px;6432  text-align: center;6433}64346435.peach-pro-celebration.is-leaving {6436  animation: peach-pro-fade-out 400ms ease forwards;6437}64386439.peach-pro-bloom-target {6440  display: flex;6441  align-items: center;6442  justify-content: center;6443  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6444  margin-bottom: 12px;6445}64466447.peach-pro-bloom-icon {6448  width: 48px;6449  height: 48px;6450}64516452.peach-pro-wordmark {6453  font-family: var(--font-display);6454  font-size: 22px;6455  font-style: italic;6456  font-weight: 400;6457  color: var(--peach-accent);6458  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6459}64606461.peach-pro-thankyou {6462  font-size: 0.75rem;6463  font-style: italic;6464  color: var(--peach-t2);6465  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6466}646764686469/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6470.peach-pro-notice-banner {6471  display: flex;6472  align-items: center;6473  gap: 8px;6474  padding: 7px 12px;6475  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6476  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6477  font-size: 0.6875rem;6478  color: var(--peach-t2);6479  font-family: "IBM Plex Mono", monospace;6480  flex-shrink: 0;6481}64826483.peach-pro-notice-link {6484  background: none;6485  border: none;6486  padding: 0;6487  cursor: pointer;6488  font-size: 0.6875rem;6489  color: var(--peach-accent);6490  font-family: "IBM Plex Mono", monospace;6491  margin-left: auto;6492  white-space: nowrap;6493}64946495.peach-pro-notice-close {6496  background: none;6497  border: none;6498  padding: 0 0 0 4px;6499  cursor: pointer;6500  font-size: 0.625rem;6501  color: var(--peach-t3);6502  line-height: 1;6503}65046505/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6506   Renders over whatever view is showing. 60-second expiry; the popup ticks6507   the countdown each second and clears the banner when it hits zero. */6508.peach-pair-request-banner {6509  display: flex;6510  flex-direction: column;6511  gap: 8px;6512  padding: 10px 12px;6513  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6514  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6515  font-family: "IBM Plex Mono", monospace;6516  flex-shrink: 0;6517}65186519.peach-pair-toast {6520  padding: 8px 12px;6521  font-family: "IBM Plex Mono", monospace;6522  font-size: 0.75rem;6523  color: var(--peach-t1);6524  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6525  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6526  flex-shrink: 0;6527  text-align: center;6528}65296530.peach-pair-toast strong {6531  color: var(--peach-t0);6532  font-weight: 500;6533}65346535.peach-pair-request-header {6536  display: flex;6537  align-items: center;6538  gap: 8px;6539  font-size: 0.75rem;6540  color: var(--peach-t1);6541}65426543.peach-pair-request-mark {6544  font-size: 0.875rem;6545  display: inline-flex;6546  align-items: center;6547}65486549.peach-pair-request-icon {6550  width: 1em;6551  height: 1em;6552}65536554.peach-pair-request-title {6555  font-weight: 600;6556  color: var(--peach-t0);6557}65586559.peach-pair-request-countdown {6560  margin-left: auto;6561  font-variant-numeric: tabular-nums;6562  color: var(--peach-t2);6563  font-size: 0.6875rem;6564}65656566.peach-pair-request-body {6567  margin: 0;6568  font-size: 0.75rem;6569  color: var(--peach-t1);6570  line-height: 1.4;6571}65726573.peach-pair-request-body strong {6574  color: var(--peach-t0);6575  font-weight: 600;6576}65776578.peach-pair-request-actions {6579  display: flex;6580  gap: 8px;6581  justify-content: flex-end;6582}65836584/* ─── First-run onboarding ──────────────────────────────────────────────6585   Three-card welcome shown once before vault creation. The PeachScript6586   rune background drifts behind everything at very low opacity — it's6587   atmosphere, not focus. The cards themselves use the same panel6588   language as the rest of the popup so the transition into NewVault is6589   continuous, not a jarring switch of visual register. */65906591.peach-onboarding {6592  position: relative;6593  display: flex;6594  flex-direction: column;6595  width: 100%;6596  height: 100%;6597  padding: 16px 16px 18px;6598  box-sizing: border-box;6599  overflow: hidden;6600  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6601}66026603.peach-onboarding.is-completing {6604  animation: peach-onboard-exit 200ms ease-out forwards;6605}66066607.peach-rune-background {6608  position: absolute;6609  inset: 0;6610  width: 100%;6611  height: 100%;6612  pointer-events: none;6613  z-index: 0;6614  transition: opacity 500ms ease-out;6615}66166617.peach-onboarding.is-completing .peach-rune-background {6618  opacity: 0;6619}66206621.peach-onboarding-header {6622  position: relative;6623  z-index: 1;6624  display: flex;6625  align-items: center;6626  margin-bottom: 14px;6627}66286629.peach-onboarding-card {6630  position: relative;6631  z-index: 1;6632  flex: 1;6633  display: flex;6634  flex-direction: column;6635  gap: 10px;6636  padding: 22px 20px;6637  border-radius: 16px;6638  border: 1px solid var(--peach-t3);6639  background:6640    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6641  backdrop-filter: blur(3px);6642  -webkit-backdrop-filter: blur(3px);6643  box-shadow:6644    inset 0 1px 0 rgba(240, 232, 216, 0.04),6645    0 12px 28px rgba(0, 0, 0, 0.12);6646  cursor: pointer;6647  user-select: none;6648  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6649}66506651.peach-onboarding-card.is-exiting {6652  animation: peach-card-out 120ms ease-in forwards;6653  pointer-events: none;6654}66556656.peach-onboarding-card-headline {6657  margin: 0;6658  font-family: var(--font-display);6659  font-style: italic;6660  font-weight: 400;6661  font-size: 22px;6662  line-height: 1.05;6663  color: var(--peach-t0);6664  white-space: pre-line;6665}66666667.peach-onboarding-divider {6668  margin: 4px 0 6px;6669  border: 0;6670  border-top: 1px solid var(--peach-t3);6671  width: 100%;6672}66736674.peach-onboarding-body {6675  margin: 0;6676  font-size: 0.8125rem;6677  line-height: 1.6;6678  color: var(--peach-t1);6679}66806681.peach-onboarding-warning {6682  display: flex;6683  align-items: flex-start;6684  gap: 8px;6685  margin: 6px 0 0;6686  padding-top: 8px;6687  border-top: 1px dashed var(--peach-t3);6688  font-size: 0.8125rem;6689  line-height: 1.5;6690  color: var(--peach-t1);6691}66926693.peach-onboarding-warning-icon {6694  color: var(--peach-accent);6695  font-size: 0.8125rem;6696  line-height: 1.5;6697  flex: 0 0 auto;6698}66996700.peach-onboarding-nav {6701  position: relative;6702  z-index: 1;6703  display: flex;6704  align-items: center;6705  justify-content: space-between;6706  margin-top: 12px;6707  padding: 0 4px;6708}67096710.peach-onboarding-dots {6711  display: flex;6712  align-items: center;6713  gap: 6px;6714}67156716.peach-onboarding-dot {6717  width: 6px;6718  height: 6px;6719  border-radius: 50%;6720  background: var(--peach-t2);6721  transition: width 200ms ease, height 200ms ease, background 200ms ease;6722}67236724.peach-onboarding-dot.is-active {6725  width: 8px;6726  height: 8px;6727  background: var(--peach-accent);6728}67296730.peach-onboarding-next {6731  background: none;6732  border: none;6733  padding: 4px 0;6734  cursor: pointer;6735  font-family: "IBM Plex Mono", monospace;6736  font-size: 0.6875rem;6737  letter-spacing: 0.04em;6738  color: var(--peach-t1);6739  transition: color 150ms ease;6740}67416742.peach-onboarding-next:hover {6743  color: var(--peach-t0);6744}67456746.peach-onboarding-next:disabled {6747  opacity: 0.5;6748  cursor: default;6749}67506751.peach-onboarding-back {6752  background: none;6753  border: none;6754  padding: 4px 0;6755  cursor: pointer;6756  font-family: "IBM Plex Mono", monospace;6757  font-size: 0.6875rem;6758  letter-spacing: 0.04em;6759  color: var(--peach-t2);6760  transition: color 150ms ease;6761}67626763.peach-onboarding-back:hover {6764  color: var(--peach-t0);6765}67666767.peach-onboarding-back:disabled {6768  opacity: 0.5;6769  cursor: default;6770}67716772/* Reserve back-button width on the first card so the dots stay centred */6773.peach-onboarding-back-spacer {6774  width: 44px;6775}67766777.peach-onboarding-mobile-card-buttons {6778  display: flex;6779  flex-direction: column;6780  gap: 8px;6781  margin-top: 16px;6782}67836784@keyframes peach-onboard-enter {6785  from { opacity: 0; transform: translateY(20px); }6786  to   { opacity: 1; transform: translateY(0); }6787}67886789@keyframes peach-onboard-exit {6790  from { opacity: 1; }6791  to   { opacity: 0; }6792}67936794@keyframes peach-card-in {6795  from { opacity: 0; transform: translateX(12px); }6796  to   { opacity: 1; transform: translateX(0); }6797}67986799@keyframes peach-card-out {6800  from { opacity: 1; transform: translateX(0); }6801  to   { opacity: 0; transform: translateX(-12px); }6802}68036804/* ─── New vault screen — matched to onboarding card language ─────────── */68056806.peach-newvault {6807  position: relative;6808  display: flex;6809  flex-direction: column;6810  gap: 12px;6811  padding: 16px 16px 18px;6812  overflow: hidden;6813}68146815/* Suppress the warm-blob ambient art inherited from .lock-screen — the6816   new vault card now carries the visual weight. */6817.peach-newvault::before {6818  content: none;6819}68206821.peach-newvault-header {6822  position: relative;6823  z-index: 2;6824  display: flex;6825  align-items: center;6826  gap: 10px;6827  margin-bottom: 2px;6828}68296830.peach-newvault-back {6831  display: inline-flex;6832  align-items: center;6833  gap: 4px;6834  background: transparent;6835  border: none;6836  color: var(--peach-t2);6837  font-family: "IBM Plex Mono", monospace;6838  font-size: 0.625rem;6839  letter-spacing: 0.06em;6840  cursor: pointer;6841  padding: 4px 6px;6842  border-radius: 6px;6843  transition: color 120ms ease, background 120ms ease;6844}68456846.peach-newvault-back:hover {6847  color: var(--peach-t0);6848  background: rgba(240, 232, 216, 0.04);6849}68506851.peach-newvault-mark {6852  position: absolute;6853  right: -12px;6854  top: 6px;6855  width: 110px;6856  height: 110px;6857  pointer-events: none;6858  opacity: 0.10;6859  filter: saturate(0.9);6860  z-index: 0;6861}6862.peach-newvault-mark-art {6863  width: 100%;6864  height: 100%;6865}6866.peach-newvault-mark-art path:nth-child(2),6867.peach-newvault-mark-art path:nth-child(3) {6868  stroke: rgba(123, 144, 96, 0.88);6869  fill: rgba(123, 144, 96, 0.88);6870}68716872.peach-newvault-card {6873  position: relative;6874  z-index: 1;6875  display: flex;6876  flex-direction: column;6877  gap: 12px;6878  padding: 22px 20px 18px;6879  border-radius: 16px;6880  border: 1px solid var(--peach-t3);6881  background:6882    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6883  backdrop-filter: blur(3px);6884  -webkit-backdrop-filter: blur(3px);6885  box-shadow:6886    inset 0 1px 0 rgba(240, 232, 216, 0.04),6887    0 12px 28px rgba(0, 0, 0, 0.12);6888  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6889}68906891.peach-newvault-headline {6892  margin: 0;6893  font-family: var(--font-display);6894  font-style: italic;6895  font-weight: 400;6896  font-size: 24px;6897  line-height: 1.05;6898  color: var(--peach-t0);6899  white-space: pre-line;6900}69016902.peach-newvault-divider {6903  margin: 2px 0 4px;6904  border: 0;6905  border-top: 1px solid var(--peach-t3);6906  width: 100%;6907}69086909.peach-newvault-field {6910  display: flex;6911  flex-direction: column;6912  gap: 4px;6913}69146915.peach-newvault-label-row {6916  display: flex;6917  align-items: center;6918  justify-content: space-between;6919}69206921/* Monospace input scaled to the card. Replaces the 22px unlock-input6922   so the placeholder no longer overflows and the field reads as part6923   of the same surface as the body copy. */6924.peach-newvault-input {6925  font-size: 0.875rem;6926  letter-spacing: 0.18em;6927  padding: 8px 0;6928}6929.peach-newvault-input::placeholder {6930  letter-spacing: 0.18em;6931  color: var(--peach-t2);6932}69336934.peach-newvault-hint {6935  margin: 2px 0 0;6936  font-family: "IBM Plex Mono", monospace;6937  font-size: 0.625rem;6938  color: var(--peach-t2);6939  letter-spacing: 0.04em;6940}69416942.peach-newvault-submit {6943  margin-top: 4px;6944}69456946.peach-newvault-warning {6947  display: flex;6948  align-items: flex-start;6949  gap: 8px;6950  margin: 4px 0 0;6951  padding-top: 10px;6952  border-top: 1px dashed var(--peach-t3);6953  font-size: 0.75rem;6954  line-height: 1.5;6955  color: var(--peach-t1);6956}69576958.peach-newvault-warning-icon {6959  color: var(--peach-accent);6960  font-size: 0.8125rem;6961  line-height: 1.4;6962  flex: 0 0 auto;6963}69646965.peach-newvault-footer {6966  position: relative;6967  z-index: 1;6968  display: flex;6969  flex-direction: column;6970  gap: 4px;6971  padding: 4px 4px 0;6972}69736974/* Settings body — warm accent gradient gives the glass something to blur against */6975.peach-settings-body {6976  background:6977    radial-gradient(6978      ellipse at 30% 20%,6979      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,6980      transparent 60%6981    );6982}69836984/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */6985/* ── Danger cards (Replace + Destroy) ────────────────────────────────────6986 * Two severity levels: "warn" for actions that are dangerous-but-recoverable6987 * (replacing the vault from a backup file) and "hazard" for actions that6988 * are absolutely irreversible (Panic). Both use the same card scaffold so6989 * they read as a pair, but the colour family signals the severity at a6990 * glance — yellow for caution, red for don't.6991 */6992.peach-danger-card {6993  --danger-tint: 235, 158, 52; /* amber */6994  display: flex;6995  flex-direction: column;6996  gap: 8px;6997  padding: 14px;6998  margin-top: 10px;6999  border-radius: 12px;7000  border: 1px solid rgba(var(--danger-tint), 0.32);7001  background:7002    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7003    rgba(var(--danger-tint), 0.04);7004  box-shadow:7005    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7006    0 0 24px rgba(var(--danger-tint), 0.04);7007  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7008}70097010.peach-danger-card:hover {7011  border-color: rgba(var(--danger-tint), 0.55);7012  box-shadow:7013    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7014    0 0 36px rgba(var(--danger-tint), 0.10);7015}70167017.peach-danger-card--hazard {7018  --danger-tint: 220, 38, 38; /* red */7019}70207021.peach-danger-card-head {7022  display: flex;7023  align-items: center;7024  gap: 10px;7025}70267027.peach-danger-card-glyph {7028  width: 28px;7029  height: 28px;7030  flex-shrink: 0;7031  display: flex;7032  align-items: center;7033  justify-content: center;7034  border-radius: 8px;7035  background: rgba(var(--danger-tint), 0.12);7036  color: rgba(var(--danger-tint), 0.95);7037  font-size: 1rem;7038  line-height: 1;7039}70407041.peach-danger-card-title {7042  margin: 0;7043  font-size: 0.8125rem;7044  font-weight: 600;7045  color: rgba(var(--danger-tint), 0.92);7046  letter-spacing: 0.01em;7047}70487049.peach-danger-card-copy {7050  margin: 0;7051  font-size: 0.6875rem;7052  line-height: 1.5;7053  color: var(--peach-t2);7054}70557056.peach-danger-card-button {7057  width: 100%;7058  padding: 9px;7059  margin-top: 4px;7060  background: transparent;7061  border: 1px solid rgba(var(--danger-tint), 0.45);7062  border-radius: 8px;7063  color: rgba(var(--danger-tint), 0.9);7064  font-size: 0.75rem;7065  font-weight: 500;7066  letter-spacing: 0.02em;7067  cursor: pointer;7068  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7069}70707071.peach-danger-card-button:hover {7072  background: rgba(var(--danger-tint), 0.10);7073  border-color: rgba(var(--danger-tint), 0.75);7074  color: rgb(var(--danger-tint));7075}70767077/* ── Panic flow (three-step destruction) ───────────────────────────────── */7078.peach-panic {7079  display: flex;7080  flex-direction: column;7081  flex: 1;7082  min-height: 0;7083  padding: 28px 20px 20px;7084  gap: 18px;7085  overflow-y: auto;7086  scrollbar-width: none;7087  -ms-overflow-style: none;7088}70897090.peach-panic::-webkit-scrollbar { display: none; }70917092.peach-panic-step2 {7093  background: rgba(220, 38, 38, 0.04);7094}70957096.peach-panic-step3 {7097  position: relative;7098  background: #0f0505;7099  color: #ffffff;7100  overflow: hidden;7101}71027103.peach-panic-rune-bg {7104  position: absolute;7105  inset: 0;7106  opacity: 0.22;7107  pointer-events: none;7108  overflow: hidden;7109}71107111.peach-panic-rune-bg canvas {7112  width: 100% !important;7113  height: 100% !important;7114}71157116.peach-panic-icon {7117  font-size: 32px;7118  color: rgb(220, 38, 38);7119  line-height: 1;7120}71217122.peach-panic-title {7123  margin: 0;7124  font-size: 18px;7125  font-weight: 500;7126  color: var(--peach-t1);7127}71287129.peach-panic-title--severe {7130  font-size: 20px;7131  font-weight: 700;7132  color: rgb(220, 38, 38);7133}71347135.peach-panic-body {7136  margin: 0;7137  font-size: 0.8125rem;7138  line-height: 1.55;7139  color: var(--peach-t2);7140}71417142.peach-panic-body--severe {7143  color: rgba(220, 38, 38, 0.85);7144}71457146.peach-panic-body--final {7147  font-size: 1rem;7148  font-weight: 700;7149  color: rgb(255, 80, 80);7150  line-height: 1.4;7151}71527153.peach-panic-body--final-intro {7154  font-size: 1rem;7155  color: #ffffff;7156  font-weight: 400;7157}71587159.peach-panic-divider {7160  height: 1px;7161  background: rgba(255, 255, 255, 0.08);7162  margin: 4px 0;7163}71647165.peach-panic-confirm-input {7166  width: 100%;7167  padding: 10px 12px;7168  background: rgba(255, 255, 255, 0.02);7169  border: 1px solid rgba(220, 38, 38, 0.4);7170  border-radius: 8px;7171  color: var(--peach-t1);7172  font-family: "IBM Plex Mono", monospace;7173  font-size: 0.875rem;7174  letter-spacing: 0.12em;7175  text-transform: uppercase;7176}71777178.peach-panic-confirm-input:focus {7179  outline: none;7180  border-color: rgb(220, 38, 38);7181}71827183.peach-panic-confirm-input--match {7184  border-color: rgb(220, 38, 38);7185  color: rgb(220, 38, 38);7186}71877188.peach-panic-confirm-label {7189  font-size: 0.6875rem;7190  color: var(--peach-t2);7191  margin: 0 0 -8px;7192  letter-spacing: 0.06em;7193}71947195.peach-panic-actions {7196  display: flex;7197  flex-direction: column;7198  gap: 10px;7199  margin-top: auto;7200}72017202.peach-panic-button {7203  width: 100%;7204  padding: 12px;7205  border-radius: 8px;7206  font-size: 0.8125rem;7207  cursor: pointer;7208  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7209}72107211.peach-panic-button--primary {7212  background: var(--peach-accent);7213  border: 1px solid var(--peach-accent);7214  color: #ffffff;7215  font-weight: 600;7216}72177218.peach-panic-button--primary:hover {7219  background: color-mix(in srgb, var(--peach-accent) 88%, white);7220}72217222.peach-panic-button--danger {7223  background: rgb(220, 38, 38);7224  border: 1px solid rgb(220, 38, 38);7225  color: #ffffff;7226  font-weight: 600;7227}72287229.peach-panic-button--danger:disabled {7230  opacity: 0.35;7231  cursor: not-allowed;7232}72337234.peach-panic-button--ghost {7235  background: transparent;7236  border: 1px solid rgba(255, 255, 255, 0.18);7237  color: var(--peach-t2);7238}72397240.peach-panic-button--ghost:hover {7241  border-color: rgba(255, 255, 255, 0.32);7242  color: var(--peach-t1);7243}72447245.peach-panic-link {7246  background: transparent;7247  border: none;7248  padding: 4px 0;7249  color: rgba(220, 38, 38, 0.65);7250  font-size: 0.75rem;7251  cursor: pointer;7252  text-align: left;7253  text-decoration: underline;7254  text-underline-offset: 3px;7255}72567257.peach-panic-link:hover {7258  color: rgb(220, 38, 38);7259}72607261.peach-panic-bar {7262  background: rgb(220, 38, 38);7263  padding: 16px 20px;7264  margin: -28px -20px 0;7265  text-align: center;7266  font-size: 0.8125rem;7267  font-weight: 700;7268  letter-spacing: 0.12em;7269  color: #ffffff;7270}72717272.peach-panic-final-button {7273  width: 100%;7274  padding: 14px;7275  background: rgb(220, 38, 38);7276  border: none;7277  border-radius: 8px;7278  color: #ffffff;7279  font-size: 0.875rem;7280  font-weight: 700;7281  letter-spacing: 0.08em;7282  text-transform: uppercase;7283  cursor: pointer;7284  animation: peach-panic-pulse 2s ease-in-out infinite;7285}72867287.peach-settings-license {7288  margin-top: 10px;7289  padding-top: 10px;7290  border-top: 1px solid var(--peach-t3);7291}72927293.peach-settings-label {7294  font-size: 0.625rem;7295  letter-spacing: 0.08em;7296  color: var(--peach-t3);7297  display: block;7298  margin-bottom: 6px;7299}73007301.peach-settings-license-row {7302  display: flex;7303  align-items: center;7304  justify-content: space-between;7305  gap: 8px;7306}73077308.peach-settings-license-key {7309  font-family: 'IBM Plex Mono', monospace;7310  font-size: 0.75rem;7311  color: var(--peach-t0);7312  letter-spacing: 0.04em;7313  word-break: break-all;7314}73157316.peach-settings-license-copy {7317  font-size: 0.6875rem;7318  color: var(--peach-accent);7319  background: transparent;7320  border: none;7321  cursor: pointer;7322  padding: 4px 8px;7323  border-radius: 4px;7324  flex-shrink: 0;7325  transition: opacity 150ms ease;7326}73277328.peach-settings-license-copy:hover {7329  opacity: 0.75;7330}73317332@keyframes peach-panic-pulse {7333  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7334  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7335}73367337[data-motion="reduce"] .peach-panic-final-button {7338  animation: none;7339}73407341/* Vault History — Settings → Vault sub-view */73427343.peach-history-list {7344  border: 1px solid var(--peach-border);7345  border-radius: 8px;7346  overflow: hidden;7347  margin: 8px 0 4px;7348}73497350.peach-history-row {7351  display: flex;7352  align-items: center;7353  justify-content: space-between;7354  padding: 9px 12px;7355  gap: 10px;7356  border-bottom: 1px solid var(--peach-border);7357}73587359.peach-history-row:last-child {7360  border-bottom: none;7361}73627363.peach-history-meta {7364  display: flex;7365  flex-direction: column;7366  gap: 2px;7367  min-width: 0;7368  flex: 1;7369}73707371.peach-history-time {7372  font-size: 0.75rem;7373  font-family: 'IBM Plex Mono', ui-monospace, monospace;7374  color: var(--peach-t0);7375  white-space: nowrap;7376  overflow: hidden;7377  text-overflow: ellipsis;7378}73797380.peach-history-sub {7381  font-size: 0.625rem;7382  color: var(--peach-t2);7383  letter-spacing: 0.06em;7384  text-transform: uppercase;7385  white-space: nowrap;7386  overflow: hidden;7387  text-overflow: ellipsis;7388}73897390.peach-history-btn {7391  flex-shrink: 0;7392  white-space: nowrap;7393  min-width: 56px;7394  text-align: center;7395}73967397.peach-history-btn.is-busy {7398  opacity: 0.65;7399}74007401.peach-history-footer {7402  font-size: 0.625rem;7403  color: var(--peach-t3);7404  letter-spacing: 0.05em;7405  text-align: right;7406  margin: 0;7407  padding: 2px 0 0;7408}74097410/* ── Context menu + swipe-copy flash ─────────────────────── */7411.peach-context-menu-backdrop {7412  position: fixed;7413  inset: 0;7414  background: rgba(0, 0, 0, 0.45);7415  z-index: 100;7416  display: flex;7417  align-items: flex-end;7418  justify-content: center;7419  animation: peach-ctx-fade 140ms ease both;7420}7421.peach-context-menu {7422  width: min(360px, calc(100vw - 24px));7423  margin-bottom: max(env(safe-area-inset-bottom), 12px);7424  background: var(--peach-bg);7425  border: 1px solid var(--peach-t3);7426  border-radius: 14px;7427  padding: 6px;7428  display: flex;7429  flex-direction: column;7430  gap: 2px;7431  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7432  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7433}7434@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7435@keyframes peach-ctx-rise {7436  from { transform: translateY(16px); opacity: 0; }7437  to   { transform: translateY(0);    opacity: 1; }7438}7439.peach-context-menu-item {7440  background: transparent;7441  color: var(--peach-t0);7442  border: 0;7443  border-radius: 10px;7444  padding: 12px 14px;7445  text-align: left;7446  font: inherit;7447  cursor: pointer;7448}7449.peach-context-menu-item:hover,7450.peach-context-menu-item:focus-visible {7451  background: var(--peach-t3);7452}7453.peach-context-menu-item--danger {7454  color: var(--peach-health-bad, #d96868);7455}7456.peach-context-menu-item--cancel {7457  color: var(--peach-t2);7458  margin-top: 4px;7459  border-top: 1px solid var(--peach-t3);7460  border-radius: 0 0 10px 10px;7461}74627463/* Swipe-to-copy flash */7464.peach-entry-row.is-copy-flash {7465  animation: peach-copy-flash 600ms ease both;7466}7467@keyframes peach-copy-flash {7468  0%   { background: transparent; }7469  20%  { background: rgba(217, 153, 51, 0.32); }7470  100% { background: transparent; }7471}74727473html { font-size: 16px; }74747475/* ── Recovery word entry ─────────────────────────────────────────── */7476.peach-lock-recover-link {7477  display: block;7478  width: 100%;7479  margin-top: 12px;7480  background: none;7481  border: none;7482  font-family: "IBM Plex Mono", monospace;7483  font-size: 0.625rem;7484  letter-spacing: 0.06em;7485  color: var(--peach-t2);7486  cursor: pointer;7487  text-align: center;7488  padding: 4px;7489  transition: color 120ms ease;7490}7491.peach-lock-recover-link:hover {7492  color: var(--peach-t0);7493}74947495.lock-screen--recovery {7496  display: flex;7497  flex-direction: column;7498  align-items: stretch;7499  padding: 12px 20px 24px;7500  overflow: hidden;7501}75027503.peach-recovery-nav {7504  display: flex;7505  align-items: center;7506  position: relative;7507  z-index: 1;7508  margin-bottom: 4px;7509}75107511/* Mask runes to the top decorative band only — keep inputs and the7512   bottom CTA button clear. The bottom of the popup is reserved for7513   submit buttons; rendering runes there overlaps the button glyph. */7514.peach-rune-background--recovery {7515  -webkit-mask-image: linear-gradient(7516    to bottom,7517    black 0px, black 85px,7518    transparent 110px,7519    transparent 100%7520  );7521  mask-image: linear-gradient(7522    to bottom,7523    black 0px, black 85px,7524    transparent 110px,7525    transparent 100%7526  );7527}75287529.peach-recovery-header {7530  text-align: center;7531  margin-bottom: 16px;7532  margin-top: 4px;7533}7534.peach-recovery-header .peach-onboarding-headline {7535  font-size: 1.25rem;7536  font-weight: 300;7537  letter-spacing: 0.02em;7538  margin: 0 0 4px;7539}7540.peach-recovery-header .peach-hint {7541  font-family: "IBM Plex Mono", monospace;7542  font-size: 0.625rem;7543  color: var(--peach-t2);7544  letter-spacing: 0.04em;7545  margin: 0;7546}75477548/* 12-word grid: 2 columns × 6 rows */7549.peach-recovery-grid {7550  display: grid;7551  grid-template-columns: repeat(2, 1fr);7552  gap: 12px 20px;7553  width: 100%;7554  margin-bottom: 0;7555}75567557.peach-recovery-word-slot {7558  display: flex;7559  align-items: center;7560  gap: 6px;7561  min-width: 0;7562}75637564.peach-recovery-word-index {7565  font-family: "IBM Plex Mono", monospace;7566  font-size: 0.5rem;7567  color: rgba(255, 255, 255, 0.35);7568  min-width: 14px;7569  flex-shrink: 0;7570  text-align: right;7571  letter-spacing: 0.04em;7572}75737574.peach-recovery-word-input {7575  flex: 1;7576  min-width: 0;7577  background: transparent;7578  border: none;7579  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7580  color: var(--peach-t0);7581  font-family: "IBM Plex Mono", monospace;7582  font-size: 0.6875rem;7583  letter-spacing: 0.06em;7584  padding: 5px 2px 4px;7585  outline: none;7586  text-transform: lowercase;7587  transition: border-color 120ms ease;7588}7589.peach-recovery-word-input::placeholder {7590  color: rgba(255, 255, 255, 0.18);7591}7592.peach-recovery-word-input:focus {7593  border-bottom-color: var(--peach-accent);7594}75957596.peach-recovery-submit {7597  width: 100%;7598  margin-top: auto;7599}76007601.peach-recovery-new-password-form {7602  width: 100%;7603  display: flex;7604  flex-direction: column;7605  gap: 16px;7606  margin-bottom: 8px;7607}7608.peach-recovery-new-password-form .peach-newvault-field {7609  display: flex;7610  flex-direction: column;7611  gap: 4px;7612}76137614/* ── Recovery words display (post-create) ────────────────────────── */7615.lock-screen--recovery-display {7616  display: flex;7617  flex-direction: column;7618  align-items: stretch;7619  padding: 0 20px 20px;7620  min-height: 0;7621  overflow-y: auto;7622}76237624.peach-recovery-words-display {7625  width: 100%;7626  margin-bottom: 16px;7627  border: 1px solid var(--peach-t3);7628  border-radius: 8px;7629  padding: 12px 14px;7630  background: rgba(245, 240, 234, 0.04);7631}76327633.peach-recovery-words-label {7634  font-family: "IBM Plex Mono", monospace;7635  font-size: 0.5rem;7636  letter-spacing: 0.08em;7637  color: var(--peach-t2);7638  text-transform: uppercase;7639  margin-bottom: 10px;7640}76417642.peach-recovery-word-list {7643  list-style: none;7644  margin: 0;7645  padding: 0;7646  display: grid;7647  grid-template-columns: repeat(2, 1fr);7648  gap: 6px 16px;7649}76507651.peach-recovery-word-item {7652  display: flex;7653  align-items: baseline;7654  gap: 5px;7655}76567657.peach-recovery-word-num {7658  font-family: "IBM Plex Mono", monospace;7659  font-size: 0.5rem;7660  color: var(--peach-t2);7661  width: 14px;7662  flex: 0 0 14px;7663  text-align: right;7664  letter-spacing: 0.04em;7665  font-variant-numeric: tabular-nums;7666}76677668.peach-recovery-download-btn {7669  display: block;7670  margin: 10px auto 0;7671  padding: 4px 10px;7672  background: transparent;7673  border: 1px solid var(--peach-border);7674  border-radius: 6px;7675  color: var(--peach-t2);7676  font-family: "IBM Plex Mono", monospace;7677  font-size: 0.5625rem;7678  letter-spacing: 0.06em;7679  text-transform: lowercase;7680  cursor: pointer;7681  transition: border-color 0.15s, color 0.15s;7682}76837684.peach-recovery-download-btn:hover {7685  border-color: var(--peach-accent);7686  color: var(--peach-t0);7687}76887689.peach-recovery-word-text {7690  font-family: "IBM Plex Mono", monospace;7691  font-size: 0.6875rem;7692  letter-spacing: 0.06em;7693  color: var(--peach-t0);7694  text-transform: lowercase;7695}76967697.peach-hint--warning {7698  color: var(--peach-accent);7699  font-style: italic;7700}7701.peach-hint--success {7702  color: var(--peach-t2);7703  font-family: "IBM Plex Mono", monospace;7704  font-size: 0.625rem;7705  letter-spacing: 0.06em;7706}77077708/* Confirmation step */7709.peach-recovery-confirm {7710  width: 100%;7711  flex: 1;7712  display: flex;7713  flex-direction: column;7714}7715.peach-recovery-confirm-label {7716  font-family: "IBM Plex Mono", monospace;7717  font-size: 0.5625rem;7718  letter-spacing: 0.04em;7719  color: var(--peach-t2);7720  text-align: center;7721  margin: 0 0 12px;7722}7723.peach-recovery-confirm-fields {7724  display: flex;7725  flex-direction: column;7726  gap: 14px;7727  margin-bottom: 10px;7728}7729.peach-recovery-confirm-field {7730  display: flex;7731  align-items: center;7732  gap: 8px;7733}7734.peach-recovery-confirm-num {7735  font-family: "IBM Plex Mono", monospace;7736  font-size: 0.5rem;7737  color: var(--peach-t2);7738  min-width: 44px;7739  letter-spacing: 0.04em;7740}7741.peach-recovery-confirm-input {7742  flex: 1;7743  background: transparent;7744  border: none;7745  border-bottom: 1px solid var(--peach-t3);7746  color: var(--peach-t0);7747  font-family: "IBM Plex Mono", monospace;7748  font-size: 0.6875rem;7749  letter-spacing: 0.06em;7750  padding: 4px 2px 3px;7751  outline: none;7752  text-transform: lowercase;7753  transition: border-color 120ms ease;7754}7755.peach-recovery-confirm-input:focus {7756  border-bottom-color: var(--peach-accent);7757}7758.peach-recovery-confirm-input:disabled {7759  opacity: 0.4;7760  cursor: not-allowed;7761}7762.peach-recovery-confirm-btn {7763  width: 100%;7764  margin-top: auto;7765}77667767/* ============================================================7768   Sync info sheet7769   ============================================================ */77707771.peach-sync-info-backdrop {7772  position: fixed;7773  inset: 0;7774  z-index: 200;7775  background: rgba(0, 0, 0, 0.55);7776  display: flex;7777  align-items: flex-end;7778  animation: peach-fade-in 200ms ease forwards;7779}77807781@keyframes peach-fade-in {7782  from { opacity: 0; }7783  to   { opacity: 1; }7784}77857786.peach-sync-info-sheet {7787  width: 100%;7788  background: var(--peach-bg-card, var(--peach-bg));7789  border-top-left-radius: 20px;7790  border-top-right-radius: 20px;7791  padding: 12px 24px 32px;7792  display: flex;7793  flex-direction: column;7794  gap: 20px;7795  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;7796}77977798@keyframes peach-sheet-up {7799  from { transform: translateY(100%); }7800  to   { transform: translateY(0); }7801}78027803.peach-sync-info-handle {7804  width: 36px;7805  height: 4px;7806  border-radius: 2px;7807  background: var(--peach-border);7808  margin: 0 auto 4px;7809  flex-shrink: 0;7810}78117812.peach-sync-info-title {7813  font-family: 'Cormorant Garamond', serif;7814  font-style: italic;7815  font-size: 26px;7816  font-weight: 600;7817  color: var(--peach-t0);7818  margin: 0;7819  line-height: 1.2;7820}78217822.peach-sync-info-body {7823  display: flex;7824  flex-direction: column;7825  gap: 14px;7826}78277828.peach-sync-info-point {7829  display: flex;7830  gap: 12px;7831  align-items: flex-start;7832  font-size: 14px;7833  color: var(--peach-t2);7834  line-height: 1.6;7835  margin: 0;7836}78377838.peach-sync-info-icon {7839  color: var(--peach-accent);7840  font-size: 16px;7841  flex-shrink: 0;7842  margin-top: 1px;7843}78447845.peach-sync-info-actions {7846  display: flex;7847  flex-direction: column;7848  gap: 12px;7849  margin-top: 4px;7850}78517852.peach-sync-info-pro-link {7853  background: none;7854  border: none;7855  font-size: 13px;7856  color: var(--peach-t3);7857  cursor: pointer;7858  padding: 0;7859  font-family: inherit;7860  text-align: center;7861  transition: color 150ms ease;7862}78637864.peach-sync-info-pro-link:hover {7865  color: var(--peach-accent);7866}78677868.peach-btn--full {7869  width: 100%;7870}78717872/* ── Sync screen ── */78737874.peach-sync-coming-soon {7875  display: flex;7876  align-items: flex-start;7877  gap: 10px;7878  padding: 12px 14px;7879  background: var(--peach-s1);7880  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);7881  border-radius: 10px;7882}7883.peach-sync-coming-soon__icon {7884  flex-shrink: 0;7885  color: var(--peach-accent);7886  margin-top: 1px;7887  line-height: 0;7888}7889.peach-sync-coming-soon__title {7890  font-family: 'Cormorant Garamond', serif;7891  font-weight: 500;7892  font-size: 13px;7893  color: var(--peach-accent);7894  margin: 0 0 5px;7895  line-height: 1.3;7896}7897.peach-sync-coming-soon__body {7898  font-size: 12px;7899  color: var(--peach-t1);7900  line-height: 1.55;7901  margin: 0;7902}79037904.peach-sync-screen {7905  display: flex;7906  flex-direction: column;7907  height: 100%;7908}79097910.peach-sync-content {7911  flex: 1;7912  overflow-y: auto;7913  padding: 24px 20px 40px;7914  display: flex;7915  flex-direction: column;7916  gap: 24px;7917}79187919/* Intro (State A) */7920.peach-sync-headline {7921  font-family: 'Cormorant Garamond', serif;7922  font-style: italic;7923  font-size: 28px;7924  font-weight: 600;7925  color: var(--peach-t0);7926  margin: 0 0 10px;7927  line-height: 1.2;7928}79297930.peach-sync-intro-body {7931  font-size: 14px;7932  color: var(--peach-t1);7933  line-height: 1.6;7934  margin: 0;7935}79367937.peach-sync-pro-note {7938  display: flex;7939  flex-direction: column;7940  gap: 8px;7941  background: var(--peach-t3);7942  border-radius: 10px;7943  padding: 12px 14px;7944}79457946.peach-sync-pro-note-text {7947  font-size: 12px;7948  color: var(--peach-t2);7949  line-height: 1.5;7950  margin: 0;7951}79527953.peach-sync-pro-link {7954  background: none;7955  border: none;7956  font-size: 12px;7957  color: var(--peach-accent);7958  cursor: pointer;7959  padding: 0;7960  font-family: inherit;7961  text-align: left;7962}79637964/* Status (State C) */7965.peach-sync-status {7966  padding: 12px 0;7967  border-bottom: 1px solid var(--peach-border);7968}79697970.peach-sync-status-row {7971  display: flex;7972  align-items: center;7973  gap: 8px;7974}79757976.peach-sync-dot {7977  width: 7px;7978  height: 7px;7979  border-radius: 50%;7980  flex-shrink: 0;7981}79827983.peach-sync-dot--green { background: var(--peach-health-ok); }7984.peach-sync-dot--amber { background: var(--peach-accent); }79857986.peach-sync-status-text {7987  font-family: 'IBM Plex Mono', monospace;7988  font-size: 11px;7989  color: var(--peach-t2);7990}79917992/* Paired devices */7993.peach-sync-section {7994  display: flex;7995  flex-direction: column;7996  gap: 2px;7997}79987999.peach-sync-section-label {8000  font-family: 'IBM Plex Mono', monospace;8001  font-size: 10px;8002  letter-spacing: 0.1em;8003  color: var(--peach-t3);8004  margin: 0 0 10px;8005}80068007.peach-sync-device-row {8008  display: flex;8009  justify-content: space-between;8010  align-items: baseline;8011  padding: 10px 0;8012  border-bottom: 1px solid var(--peach-border);8013  gap: 12px;8014}80158016.peach-sync-device-name {8017  font-size: 14px;8018  color: var(--peach-t1);8019}80208021.peach-sync-device-meta {8022  font-family: 'IBM Plex Mono', monospace;8023  font-size: 11px;8024  color: var(--peach-t3);8025  white-space: nowrap;8026}80278028.peach-sync-hub-note {8029  padding: 14px 16px;8030  border: 1px solid var(--peach-border);8031  border-radius: 10px;8032  display: flex;8033  flex-direction: column;8034  gap: 6px;8035  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8036}80378038.peach-sync-hub-note-title {8039  font-size: 13px;8040  font-weight: 600;8041  color: var(--peach-t0);8042  margin: 0;8043}80448045.peach-sync-hub-note-body {8046  font-size: 12px;8047  color: var(--peach-t2);8048  line-height: 1.6;8049  margin: 0;8050}80518052/* Action buttons */8053.peach-sync-actions {8054  display: flex;8055  gap: 10px;8056  flex-wrap: wrap;8057}80588059/* Upgrade prompt (State B) */8060.peach-sync-upgrade {8061  display: flex;8062  flex-direction: column;8063  gap: 12px;8064  padding: 16px;8065  border: 1px solid var(--peach-border);8066  border-radius: 10px;8067}80688069.peach-sync-upgrade-text {8070  font-size: 13px;8071  color: var(--peach-t2);8072  line-height: 1.6;8073  margin: 0;8074}80758076/* Network note */8077.peach-sync-network-note {8078  font-size: 12px;8079  color: var(--peach-t3);8080  line-height: 1.6;8081  margin: 0;8082}80838084/* Advanced */8085.peach-sync-advanced {8086  margin-top: auto;8087  padding-top: 16px;8088  border-top: 1px solid var(--peach-border);8089}80908091.peach-sync-advanced-toggle {8092  display: flex;8093  align-items: center;8094  gap: 8px;8095  background: none;8096  border: none;8097  font-family: 'IBM Plex Mono', monospace;8098  font-size: 11px;8099  letter-spacing: 0.08em;8100  color: var(--peach-t3);8101  cursor: pointer;8102  padding: 0;8103  text-transform: uppercase;8104}81058106.peach-sync-advanced-chevron {8107  display: inline-block;8108  transition: transform 200ms ease;8109  font-size: 10px;8110}81118112.peach-sync-advanced-chevron.is-open {8113  transform: rotate(90deg);8114}81158116.peach-sync-advanced-content {8117  margin-top: 14px;8118}81198120.peach-sync-advanced-row {8121  display: flex;8122  justify-content: space-between;8123  align-items: center;8124  gap: 16px;8125}81268127.peach-sync-advanced-title {8128  font-size: 14px;8129  color: var(--peach-t1);8130  margin: 0 0 2px;8131}81328133.peach-sync-advanced-subtitle {8134  font-size: 12px;8135  color: var(--peach-t3);8136  margin: 0;8137  line-height: 1.5;8138}81398140/* ── Add Device — Android scan tabs ─────────────────────────────────────── */81418142.peach-pairing-tabs {8143  display: flex;8144  border: 1px solid var(--peach-border);8145  border-radius: 8px;8146  overflow: hidden;8147  margin-bottom: 4px;8148}81498150.peach-pairing-tab {8151  flex: 1;8152  padding: 10px 0;8153  background: none;8154  border: none;8155  font-family: 'IBM Plex Mono', monospace;8156  font-size: 11px;8157  letter-spacing: 0.06em;8158  color: var(--peach-t2);8159  cursor: pointer;8160  transition: background 150ms, color 150ms;8161}81628163.peach-pairing-tab.is-active {8164  background: var(--peach-accent);8165  color: #fff;8166  font-weight: 600;8167}81688169.peach-pairing-tab:not(.is-active):active {8170  background: var(--peach-border);8171}81728173/* Camera view */8174.peach-pairing-camera-container {8175  position: relative;8176  width: 100%;8177  aspect-ratio: 1;8178  border-radius: 12px;8179  overflow: hidden;8180  background: #000;8181  flex-shrink: 0;8182}81838184.peach-pairing-video {8185  width: 100%;8186  height: 100%;8187  object-fit: cover;8188}81898190.peach-pairing-scan-frame {8191  position: absolute;8192  top: 50%;8193  left: 50%;8194  transform: translate(-50%, -50%);8195  width: 60%;8196  aspect-ratio: 1;8197  border: 2px solid var(--peach-accent);8198  border-radius: 8px;8199  pointer-events: none;8200}82018202/* ── Notes Mode ── */82038204/* Overlay that crossfades over the vault */8205.peach-notes-overlay {8206  position: fixed;8207  inset: 0;8208  z-index: 90;8209  opacity: 0;8210  pointer-events: none;8211  animation: peach-mode-in 220ms ease-in forwards;8212}82138214.peach-notes-overlay.is-visible {8215  opacity: 1;8216  pointer-events: auto;8217}82188219@keyframes peach-mode-in {8220  from { opacity: 0; }8221  to   { opacity: 1; }8222}82238224/* Top-level notes surface */8225.peach-notes-mode {8226  position: absolute;8227  inset: 0;8228  background: var(--peach-bg);8229  display: flex;8230  flex-direction: column;8231}82328233/* Rune canvas positioned behind content */8234.peach-note-rune-canvas {8235  position: absolute;8236  inset: 0;8237  width: 100%;8238  height: 100%;8239  pointer-events: none;8240  z-index: 0;8241}82428243/* TOC wrapper */8244.peach-notes-toc-wrapper {8245  position: absolute;8246  inset: 0;8247  z-index: 1;8248  opacity: 1;8249  pointer-events: auto;8250  transition: opacity 200ms ease;8251}82528253.peach-notes-toc-wrapper.is-hidden {8254  opacity: 0;8255  pointer-events: none;8256}82578258/* Editor wrapper */8259.peach-notes-editor-wrapper {8260  position: absolute;8261  inset: 0;8262  z-index: 2;8263  opacity: 0;8264  pointer-events: none;8265  transition: opacity 200ms ease;8266}82678268.peach-notes-editor-wrapper.is-visible {8269  opacity: 1;8270  pointer-events: auto;8271}82728273/* TOC inner */8274.peach-notes-toc {8275  position: relative;8276  display: flex;8277  flex-direction: column;8278  height: 100%;8279  padding-top: env(safe-area-inset-top, 0px);8280  padding-bottom: env(safe-area-inset-bottom, 0px);8281}82828283/* Shared header */8284.peach-notes-header {8285  display: flex;8286  align-items: center;8287  padding: 12px 16px;8288  gap: 12px;8289  flex-shrink: 0;8290  min-height: 52px;8291  position: relative;8292  z-index: 2;8293}82948295.peach-notes-back {8296  font-size: 22px;8297  color: var(--peach-t2);8298  background: none;8299  border: none;8300  padding: 4px;8301  cursor: pointer;8302  line-height: 1;8303  flex-shrink: 0;8304  transition: color 150ms ease;8305  -webkit-tap-highlight-color: transparent;8306}83078308.peach-notes-back:active { color: var(--peach-t0); }83098310.peach-notes-header-title {8311  flex: 1;8312  font-family: 'Cormorant Garamond', serif;8313  font-style: italic;8314  font-size: 22px;8315  color: var(--peach-t0);8316  text-align: center;8317}83188319.peach-notes-header-title.is-breadcrumb {8320  font-family: 'IBM Plex Mono', monospace;8321  font-style: normal;8322  font-size: 11px;8323  color: var(--peach-t3);8324  letter-spacing: 0.08em;8325  text-transform: uppercase;8326  cursor: pointer;8327}83288329.peach-notes-header-actions {8330  display: flex;8331  gap: 8px;8332  flex-shrink: 0;8333}83348335.peach-notes-header-btn {8336  width: 36px;8337  height: 36px;8338  display: flex;8339  align-items: center;8340  justify-content: center;8341  background: none;8342  border: none;8343  color: var(--peach-t2);8344  cursor: pointer;8345  border-radius: 8px;8346  font-size: 16px;8347  transition: color 150ms ease, background 150ms ease;8348  -webkit-tap-highlight-color: transparent;8349}83508351.peach-notes-header-btn:active {8352  background: rgba(255,255,255,0.06);8353  color: var(--peach-t0);8354}83558356/* Inline search bar */8357.peach-notes-search-input {8358  flex: 1;8359  background: none;8360  border: none;8361  outline: none;8362  font-family: 'IBM Plex Mono', monospace;8363  font-size: 13px;8364  color: var(--peach-t0);8365  padding: 4px 0;8366  letter-spacing: 0.02em;8367}83688369.peach-notes-search-input::placeholder {8370  color: var(--peach-t3);8371}83728373/* TOC list */8374.peach-notes-list-container {8375  flex: 1;8376  overflow-y: auto;8377  overflow-x: hidden;8378  scrollbar-width: none;8379  -webkit-overflow-scrolling: touch;8380  overscroll-behavior: contain;8381  position: relative;8382  z-index: 1;8383}83848385.peach-notes-list-container::-webkit-scrollbar { display: none; }83868387/* Note row */8388.peach-note-row {8389  position: relative;8390  display: grid;8391  grid-template-columns: 44px 8px 1fr 8px auto;8392  align-items: center;8393  min-height: 72px;8394  padding: 16px 20px;8395  border-bottom: 0.5px solid var(--peach-border);8396  cursor: pointer;8397  overflow: hidden;8398  touch-action: pan-y;8399  user-select: none;8400  -webkit-user-select: none;8401  -webkit-tap-highlight-color: transparent;8402}84038404.peach-note-row:first-child {8405  border-top: 0.5px solid var(--peach-border);8406}84078408.peach-note-row:active {8409  background: rgba(255,255,255,0.02);8410}84118412.peach-note-numeral {8413  font-family: 'Cormorant Garamond', serif;8414  font-style: italic;8415  font-size: 15px;8416  color: var(--peach-accent);8417  text-align: right;8418  line-height: 1;8419  flex-shrink: 0;8420}84218422.peach-note-title-gap { /* grid spacer */ }84238424.peach-note-title {8425  font-family: 'Cormorant Garamond', serif;8426  font-style: italic;8427  font-size: 18px;8428  color: var(--peach-t0);8429  line-height: 1.3;8430  min-width: 0;8431  overflow-wrap: break-word;8432}84338434.peach-note-title-match {8435  color: var(--peach-accent);8436}84378438.peach-note-date {8439  font-family: 'IBM Plex Mono', monospace;8440  font-size: 11px;8441  color: var(--peach-t2);8442  white-space: nowrap;8443  text-align: right;8444  flex-shrink: 0;8445  grid-column: 5;8446}84478448/* Swipe underlays */8449.peach-note-row-underlay {8450  position: absolute;8451  inset: 0;8452  display: flex;8453  align-items: center;8454  padding: 0 24px;8455  font-family: 'IBM Plex Mono', monospace;8456  font-size: 11px;8457  letter-spacing: 0.1em;8458  pointer-events: none;8459  z-index: 0;8460}84618462.peach-note-row-underlay--delete {8463  background: #8B2020;8464  color: rgba(255,255,255,0.9);8465  justify-content: flex-end;8466}84678468.peach-note-row-underlay--archive {8469  background: var(--peach-accent);8470  color: #0C0A06;8471  justify-content: flex-start;8472}84738474/* Delete confirm strip */8475.peach-note-delete-confirm {8476  position: absolute;8477  inset: 0;8478  background: var(--peach-bg);8479  display: flex;8480  align-items: center;8481  gap: 12px;8482  padding: 0 20px;8483  font-family: 'IBM Plex Mono', monospace;8484  font-size: 11px;8485  color: var(--peach-t1);8486  letter-spacing: 0.04em;8487  animation: peach-delete-confirm-in 150ms ease both;8488  z-index: 10;8489}84908491@keyframes peach-delete-confirm-in {8492  from { opacity: 0; }8493  to   { opacity: 1; }8494}84958496.peach-note-delete-confirm-btn {8497  background: #8B2020;8498  color: rgba(255,255,255,0.9);8499  border: none;8500  border-radius: 6px;8501  padding: 4px 10px;8502  font-family: 'IBM Plex Mono', monospace;8503  font-size: 10px;8504  cursor: pointer;8505  letter-spacing: 0.06em;8506}85078508.peach-note-delete-cancel-btn {8509  background: none;8510  border: none;8511  color: var(--peach-t3);8512  font-family: 'IBM Plex Mono', monospace;8513  font-size: 10px;8514  cursor: pointer;8515  letter-spacing: 0.06em;8516  padding: 4px 6px;8517}85188519/* + New note button */8520.peach-notes-new-btn {8521  font-family: 'IBM Plex Mono', monospace;8522  font-size: 12px;8523  color: var(--peach-t3);8524  text-align: center;8525  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8526  background: none;8527  border: none;8528  width: 100%;8529  cursor: pointer;8530  letter-spacing: 0.04em;8531  transition: color 150ms ease;8532  -webkit-tap-highlight-color: transparent;8533}85348535.peach-notes-new-btn:active { color: var(--peach-accent); }85368537/* Empty state */8538.peach-notes-empty {8539  display: flex;8540  flex-direction: column;8541  align-items: center;8542  justify-content: center;8543  flex: 1;8544  padding: 48px 32px;8545  gap: 16px;8546}85478548.peach-notes-empty-text {8549  font-family: 'Cormorant Garamond', serif;8550  font-style: italic;8551  font-size: 20px;8552  color: var(--peach-t3);8553  text-align: center;8554  margin: 0;8555  line-height: 1.4;8556  white-space: pre-line;8557}85588559/* ── Editor surface ── */85608561.peach-note-editor-surface {8562  position: absolute;8563  inset: 0;8564  background: var(--peach-bg);8565  display: flex;8566  flex-direction: column;8567  padding-top: env(safe-area-inset-top, 0px);8568}85698570.peach-note-editor-scroll {8571  flex: 1;8572  overflow-y: auto;8573  overflow-x: hidden;8574  scrollbar-width: none;8575  -webkit-overflow-scrolling: touch;8576  padding: 0 24px 120px;8577  position: relative;8578  z-index: 1;8579}85808581.peach-note-editor-scroll::-webkit-scrollbar { display: none; }85828583/* Desktop toolbar (always visible above body) */8584.peach-note-toolbar-desktop-inline {8585  display: flex;8586  align-items: center;8587  gap: 2px;8588  padding: 6px 0 12px;8589  margin-bottom: 4px;8590  border-bottom: 0.5px solid var(--peach-border);8591}85928593/* Title field */8594.peach-note-title-field {8595  font-family: 'Cormorant Garamond', serif;8596  font-style: italic;8597  font-size: 32px;8598  font-weight: 600;8599  color: var(--peach-t0);8600  line-height: 1.2;8601  padding: 8px 0 0;8602  outline: none;8603  min-height: 44px;8604  word-break: break-word;8605  position: relative;8606  z-index: 1;8607}86088609.peach-note-title-field:empty::before {8610  content: attr(data-placeholder);8611  color: var(--peach-t3);8612  pointer-events: none;8613}86148615/* Hairline separator */8616.peach-note-hairline {8617  height: 0.5px;8618  background: var(--peach-border);8619  margin: 12px 0 20px;8620  position: relative;8621  z-index: 1;8622}86238624/* Body field */8625.peach-note-body-field {8626  font-family: 'DM Sans', sans-serif;8627  font-size: 16px;8628  color: var(--peach-t0);8629  line-height: 1.85;8630  padding: 0;8631  outline: none;8632  min-height: 240px;8633  word-break: break-word;8634  position: relative;8635  z-index: 1;8636}86378638.peach-note-body-field:empty::before {8639  content: attr(data-placeholder);8640  color: var(--peach-t3);8641  font-style: italic;8642  pointer-events: none;8643}86448645.peach-note-body-field h2 {8646  font-family: 'Cormorant Garamond', serif;8647  font-style: italic;8648  font-size: 22px;8649  font-weight: 600;8650  color: var(--peach-t0);8651  margin: 20px 0 8px;8652}86538654.peach-note-body-field blockquote {8655  border-left: 2px solid var(--peach-accent);8656  margin: 12px 0;8657  padding-left: 16px;8658  color: var(--peach-t1);8659  font-style: italic;8660}86618662.peach-note-body-field ul,8663.peach-note-body-field ol {8664  padding-left: 20px;8665  margin: 8px 0;8666}86678668.peach-note-body-field li {8669  margin: 4px 0;8670}86718672.peach-note-body-field hr {8673  border: none;8674  border-top: 0.5px solid var(--peach-border);8675  margin: 16px 0;8676}86778678/* Saved indicator */8679.peach-note-saved-indicator {8680  font-family: 'IBM Plex Mono', monospace;8681  font-size: 11px;8682  color: var(--peach-t3);8683  letter-spacing: 0.04em;8684  text-align: right;8685  padding: 6px 24px;8686  flex-shrink: 0;8687  transition: opacity 300ms ease;8688  pointer-events: none;8689  position: relative;8690  z-index: 1;8691}86928693/* Mobile keyboard toolbar */8694.peach-note-toolbar-mobile {8695  display: flex;8696  align-items: center;8697  padding: 8px 16px;8698  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));8699  background: var(--peach-bg);8700  border-top: 0.5px solid var(--peach-border);8701  gap: 4px;8702  flex-shrink: 0;8703  position: relative;8704  z-index: 10;8705}87068707.peach-note-toolbar-btn {8708  min-width: 36px;8709  height: 36px;8710  display: flex;8711  align-items: center;8712  justify-content: center;8713  background: none;8714  border: none;8715  border-radius: 8px;8716  cursor: pointer;8717  font-size: 14px;8718  color: var(--peach-t1);8719  font-family: 'DM Sans', sans-serif;8720  font-weight: 600;8721  transition: background 100ms ease, color 100ms ease;8722  -webkit-tap-highlight-color: transparent;8723}87248725.peach-note-toolbar-btn--italic { font-style: italic; }8726.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }8727.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }87288729.peach-note-toolbar-divider {8730  width: 0.5px;8731  height: 20px;8732  background: var(--peach-border);8733  margin: 0 4px;8734  flex-shrink: 0;8735}87368737.peach-note-toolbar-spacer { flex: 1; }87388739/* Desktop: larger headline in TOC */8740@media (min-width: 400px) {8741  .peach-notes-header-title:not(.is-breadcrumb) {8742    font-size: 32px;8743  }87448745  .peach-note-row {8746    min-height: 64px;8747    padding: 14px 16px;8748  }8749}87508751/* Flying title — shared element during expansion/collapse */87528753/* ─── Light theme overrides ───────────────────────────────────────────────8754   Tokens that cannot be expressed as variable substitutions — hardcoded8755   context-specific values that need separate light-mode rules. */87568757/* Settings section headers: use text-label (#5C4228) for more presence8758   than --t2 alone — gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY8759   the dark anchor they need against the warmer background. */8760.light .peach-settings-sub-label,8761[data-theme="light"] .peach-settings-sub-label,8762.light .peach-settings-nav-label,8763[data-theme="light"] .peach-settings-nav-label {8764  color: #5C4228;8765}87668767/* Secondary action buttons (ghost / subtle): filled with the sunken surface8768   colour so they read as embedded and intentional on the linen background8769   rather than floating. Values track --s3 (bg-sunken) and border-default. */8770.light .peach-btn--ghost,8771[data-theme="light"] .peach-btn--ghost {8772  background: #C4BCB5;8773  border-color: #96724C;8774  color: #1A1208;8775}8776.light .peach-btn--subtle,8777[data-theme="light"] .peach-btn--subtle {8778  background: #C4BCB5;8779  border-color: #96724C;8780}87818782/* Wide secondary action button on the lock screen — override the8783   hardcoded dark-mode rgba values with warm-surface equivalents. */8784.light .peach-lock-secondary,8785[data-theme="light"] .peach-lock-secondary {8786  background: #C4BCB5;8787  border-color: #96724C;8788  color: #1A1208;8789}8790.light .peach-lock-secondary:hover,8791[data-theme="light"] .peach-lock-secondary:hover {8792  background: #C9C0B8;8793}87948795/* Entry row hover: replace the near-invisible light-on-light rgba value. */8796.light .peach-entry-row:hover,8797[data-theme="light"] .peach-entry-row:hover {8798  background: rgba(26, 18, 8, 0.05);8799}8800.light .peach-entry-row.is-active,8801[data-theme="light"] .peach-entry-row.is-active {8802  background: rgba(26, 18, 8, 0.04);8803}8804.light .peach-entry-row.is-selected,8805[data-theme="light"] .peach-entry-row.is-selected {8806  background: rgba(26, 18, 8, 0.06);8807}88088809/* ──────────────────────────────────────────────────────────────────────────8810   Chirp pairing flow — bird-stage animation (Phase 1)8811   See src/popup/components/ChirpPairingFlow.tsx and the brief §6.2.8812   Three-act animation gated on the [data-phase] attribute of8813   .peach-chirp-pair; child layers (birds, chirp arcs, flight wave, dot)8814   each react via either pose class or visibility flag.8815   Tokens: accent surfaces use var(--peach-accent); bird illustration8816   colours are baked into the SVG per the brand-peach exception in §3.1.8817   ────────────────────────────────────────────────────────────────────── */88188819.peach-chirp-pair {8820  position: absolute;8821  inset: 0;8822  z-index: 3;8823  display: flex;8824  flex-direction: column;8825  padding: 14px 12px 12px;8826  width: 100%;8827  box-sizing: border-box;8828  gap: 0;8829  background:8830    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),8831    var(--peach-bg);8832  color: var(--peach-t0);8833  overflow-y: auto;8834  overflow-x: hidden;8835  scrollbar-width: none;8836  isolation: isolate;8837  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;8838}8839@keyframes peach-chirp-overlay-in {8840  from { opacity: 0; transform: translateY(8px); }8841  to   { opacity: 1; transform: translateY(0); }8842}8843.peach-chirp-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }8844.peach-chirp-pair::before {8845  content: '';8846  position: absolute;8847  inset: 0;8848  border-radius: inherit;8849  pointer-events: none;8850  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);8851  z-index: 0;8852}8853.peach-chirp-pair > * { position: relative; z-index: 1; }88548855/* Header --------------------------------------------------------------- */8856.peach-chirp-head {8857  display: flex; align-items: center; gap: 10px;8858}8859.peach-chirp-back {8860  width: 32px; height: 32px;8861  display: inline-flex; align-items: center; justify-content: center;8862  background: color-mix(in srgb, var(--peach-t0) 6%, transparent);8863  border: 1px solid color-mix(in srgb, var(--peach-t0) 12%, transparent);8864  border-radius: 8px;8865  color: var(--peach-t1);8866  cursor: pointer;8867  transition: background 0.15s ease, color 0.15s ease;8868}8869.peach-chirp-back:hover {8870  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);8871  color: var(--peach-t0);8872}8873.peach-chirp-title {8874  font-family: var(--font-display, Georgia, serif);8875  font-style: italic;8876  font-size: 24px;8877  font-weight: 500;8878  letter-spacing: 0.005em;8879  color: var(--peach-t0);8880  line-height: 1;8881}8882.peach-chirp-head-spacer { flex: 1; }88838884/* Chip row ------------------------------------------------------------- */8885.peach-chirp-chip-row {8886  display: flex;8887  align-items: center;8888  justify-content: flex-start;8889  margin-top: 12px;8890}8891.peach-chirp-chip {8892  display: inline-flex; align-items: center; gap: 8px;8893  padding: 5px 10px 5px 8px;8894  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);8895  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);8896  border-radius: 999px;8897  font-family: var(--peach-mono, ui-monospace, monospace);8898  font-size: 11px;8899  letter-spacing: 0.04em;8900  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));8901}8902.peach-chirp-chip-dot {8903  width: 6px; height: 6px; border-radius: 50%;8904  background: var(--peach-accent);8905  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);8906}8907.peach-chirp-chip[data-phase="paired"] {8908  background: color-mix(in srgb, #4f9eda 12%, transparent);8909  border-color: color-mix(in srgb, #4f9eda 28%, transparent);8910  color: #76b6e8;8911}8912.peach-chirp-chip[data-phase="paired"] .peach-chirp-chip-dot {8913  background: #76b6e8;8914  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);8915}8916.peach-chirp-chip[data-phase="timeout"],8917.peach-chirp-chip[data-phase="mic_denied"],8918.peach-chirp-chip[data-phase="version_mismatch"],8919.peach-chirp-chip[data-phase="handshake_failed"] {8920  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);8921  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);8922  color: var(--peach-warn, #d29257);8923}8924.peach-chirp-chip[data-phase="timeout"] .peach-chirp-chip-dot,8925.peach-chirp-chip[data-phase="mic_denied"] .peach-chirp-chip-dot,8926.peach-chirp-chip[data-phase="version_mismatch"] .peach-chirp-chip-dot,8927.peach-chirp-chip[data-phase="handshake_failed"] .peach-chirp-chip-dot {8928  background: var(--peach-warn, #d29257);8929  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);8930}89318932/* Bird stage ----------------------------------------------------------- */8933.peach-chirp-stage {8934  position: relative;8935  margin: 14px 0 8px;8936  height: 180px;8937  border-radius: 12px;8938  background:8939    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),8940    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),8941    color-mix(in srgb, var(--peach-bg) 92%, #000);8942  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);8943  overflow: hidden;8944  isolation: isolate;8945}8946.peach-chirp-stage::after {8947  content: '';8948  position: absolute;8949  left: 12%; right: 12%;8950  bottom: 36px;8951  height: 1px;8952  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);8953}89548955.peach-chirp-bird-slot {8956  position: absolute;8957  bottom: 8px;8958  width: 100px;8959  height: 110px;8960  display: flex;8961  align-items: flex-end;8962  justify-content: center;8963}8964.peach-chirp-bird-slot-desktop { left: 28px; }8965.peach-chirp-bird-slot-mobile { right: 28px; }89668967/* Mobile bird hops in from the right when handshake begins */8968.peach-chirp-bird-slot-mobile {8969  opacity: 1;8970  transform: translateX(-6px);8971  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);8972}8973.peach-chirp-stage.act-listening .peach-chirp-bird-slot-mobile,8974.peach-chirp-stage.act-chirping .peach-chirp-bird-slot-mobile,8975.peach-chirp-stage.act-idle .peach-chirp-bird-slot-mobile {8976  opacity: 0;8977  transform: translateX(60px) rotate(8deg);8978}8979.peach-chirp-stage.act-handshake .peach-chirp-bird-slot-desktop,8980.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop {8981  transform: translateX(6px);8982  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);8983}89848985/* Paired: both birds bob together */8986.peach-chirp-stage.act-paired .peach-chirp-bird-slot {8987  animation: peach-chirp-happy-bob 1.2s ease-in-out infinite;8988}8989.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { animation-delay: 0.2s; }8990.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop { --bb-x: 6px; }8991.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { --bb-x: -6px; }8992@keyframes peach-chirp-happy-bob {8993  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }8994  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }8995}89968997/* Bird internal -------------------------------------------------------- */8998.peach-chirp-bird {8999  width: 108px;9000  height: 108px;9001  transform-origin: 50% 95%;9002}9003.peach-chirp-bird svg { width: 100%; height: 100%; overflow: visible; }90049005.peach-chirp-bird-body {9006  transform-origin: 50% 80%;9007  animation: peach-chirp-bird-bob 2.4s ease-in-out infinite;9008}9009@keyframes peach-chirp-bird-bob {9010  0%, 100% { transform: translateY(0) scale(1, 1); }9011  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9012}90139014.peach-chirp-bird-eye-group {9015  animation: peach-chirp-blink 5.2s steps(1, end) infinite;9016  transform-origin: center;9017  transform-box: fill-box;9018}9019@keyframes peach-chirp-blink {9020  0%, 92%, 96%, 100% { transform: scaleY(1); }9021  94%                { transform: scaleY(0.05); }9022}90239024/* Pose: chirping — beak opens, head bobs, aura blooms */9025.peach-chirp-bird-pose-chirping .peach-chirp-bird-body {9026  animation:9027    peach-chirp-bird-bob 2.4s ease-in-out infinite,9028    peach-chirp-squeeze 1.7s ease-in-out infinite;9029}9030@keyframes peach-chirp-squeeze {9031  0%, 70%, 100% { transform-origin: 50% 85%; }9032  78%           { transform: scale(1.04, 0.96) translateY(1px); }9033  86%           { transform: scale(0.98, 1.02); }9034}9035.peach-chirp-bird-pose-chirping .peach-chirp-bird-head-group {9036  animation: peach-chirp-head-bob 1.7s ease-in-out infinite;9037}9038@keyframes peach-chirp-head-bob {9039  0%, 70%, 100% { transform: translateY(0) rotate(0); }9040  78%           { transform: translateY(-3px) rotate(-4deg); }9041  86%           { transform: translateY(-1px) rotate(-2deg); }9042}9043.peach-chirp-bird-pose-chirping .peach-chirp-bird-beak {9044  animation: peach-chirp-beak-open 1.7s ease-in-out infinite;9045}9046@keyframes peach-chirp-beak-open {9047  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9048  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9049  86%           { transform: rotate(-6deg); }9050}9051.peach-chirp-bird-pose-chirping .peach-chirp-bird-aura {9052  animation: peach-chirp-aura 1.7s ease-in-out infinite;9053}9054@keyframes peach-chirp-aura {9055  0%, 100% { opacity: 0; }9056  50%      { opacity: 0.8; }9057}9058.peach-chirp-bird-pose-chirping .peach-chirp-bird-tail {9059  animation: peach-chirp-tail-twitch 1.7s ease-in-out infinite;9060  transform-origin: 100% 50%;9061}9062@keyframes peach-chirp-tail-twitch {9063  0%, 75%, 100% { transform: rotate(0); }9064  82%           { transform: rotate(-3deg) translateX(-1px); }9065}90669067/* Pose: attentive — head tilts toward partner */9068.peach-chirp-bird-pose-attentive .peach-chirp-bird-head-group {9069  animation: peach-chirp-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9070}9071@keyframes peach-chirp-head-tilt {9072  0%   { transform: rotate(0) translateY(0); }9073  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9074  100% { transform: rotate(-6deg); }9075}9076.peach-chirp-bird-pose-attentive .peach-chirp-bird-tail {9077  animation: peach-chirp-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9078  transform-origin: 100% 50%;9079}9080@keyframes peach-chirp-tail-cock {9081  0%   { transform: rotate(0); }9082  100% { transform: rotate(-4deg); }9083}90849085/* Pose: happy — wing flutter, tuft perk, tail wag */9086.peach-chirp-bird-pose-happy .peach-chirp-bird-wing {9087  transform-origin: 80% 60%;9088  animation: peach-chirp-wing-flutter 0.32s ease-in-out 5;9089}9090@keyframes peach-chirp-wing-flutter {9091  0%, 100% { transform: rotate(0) translateY(0); }9092  50%      { transform: rotate(-16deg) translateY(-2px); }9093}9094.peach-chirp-bird-pose-happy .peach-chirp-bird-tuft {9095  transform-origin: 0% 100%;9096  animation: peach-chirp-tuft-perk 0.4s ease-in-out 3;9097}9098@keyframes peach-chirp-tuft-perk {9099  0%, 100% { transform: rotate(0); }9100  50%      { transform: rotate(-15deg) translateY(-1px); }9101}9102.peach-chirp-bird-pose-happy .peach-chirp-bird-tail {9103  transform-origin: 100% 50%;9104  animation: peach-chirp-tail-wag 0.5s ease-in-out 4;9105}9106@keyframes peach-chirp-tail-wag {9107  0%, 100% { transform: rotate(0); }9108  25%      { transform: rotate(6deg); }9109  75%      { transform: rotate(-6deg); }9110}9111.peach-chirp-bird-pose-happy .peach-chirp-bird-head-group {9112  animation: peach-chirp-head-perk 0.5s ease-out;9113}9114@keyframes peach-chirp-head-perk {9115  0%   { transform: translateY(0); }9116  40%  { transform: translateY(-3px) rotate(2deg); }9117  100% { transform: translateY(0); }9118}91199120/* Pose: sad — body droops forward */9121.peach-chirp-bird-pose-sad .peach-chirp-bird-body {9122  transform: translateY(5px) rotate(-2deg);9123  animation: none;9124}9125.peach-chirp-bird-pose-sad .peach-chirp-bird-head-group {9126  transform: translateY(4px) rotate(8deg);9127}9128.peach-chirp-bird-pose-sad .peach-chirp-bird-tuft { transform: rotate(15deg) translateY(2px); }9129.peach-chirp-bird-pose-sad .peach-chirp-bird-tail { transform: rotate(8deg) translateY(2px); }91309131.peach-chirp-bird-pose-hidden { opacity: 0; }91329133/* Chirp arcs ----------------------------------------------------------- */9134.peach-chirp-arcs {9135  position: absolute;9136  top: 18px;9137  width: 96px;9138  height: 70px;9139  pointer-events: none;9140}9141.peach-chirp-arcs-right { right: -60px; }9142.peach-chirp-arcs-left  { left: -60px; transform: scaleX(-1); }9143.peach-chirp-arc {9144  position: absolute;9145  top: 50%;9146  left: 0;9147  width: 40px;9148  height: 40px;9149  margin-top: -20px;9150  border: 1.2px solid #f4d5a8;9151  border-color: transparent #f4d5a8 transparent transparent;9152  border-radius: 50%;9153  opacity: 0;9154  animation: peach-chirp-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9155}9156@keyframes peach-chirp-arc-expand {9157  0%   { transform: scale(0.4); opacity: 0; }9158  20%  { opacity: 0.9; }9159  100% { transform: scale(1.6); opacity: 0; }9160}91619162/* Flight wave ---------------------------------------------------------- */9163.peach-chirp-flight-track {9164  position: absolute;9165  inset: 32px 36px 38px 36px;9166  pointer-events: none;9167}9168.peach-chirp-flight-wave {9169  position: absolute;9170  top: 8px;9171  left: 76px;9172  right: 76px;9173  height: 60px;9174  width: auto;9175  opacity: 0;9176  transition: opacity 0.15s ease;9177  stroke: #f4d5a8;9178  fill: none;9179}9180.peach-chirp-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9181.peach-chirp-flight-wave.is-visible { opacity: 1; }9182.peach-chirp-flight-path,9183.peach-chirp-flight-path-2 {9184  stroke-dasharray: 240;9185  stroke-dashoffset: 240;9186  stroke-linecap: round;9187  fill: none;9188}9189.peach-chirp-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9190.peach-chirp-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9191.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path {9192  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9193}9194.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path-2 {9195  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9196}9197@keyframes peach-chirp-fly {9198  0%   { stroke-dashoffset: 240; opacity: 0; }9199  20%  { opacity: 1; }9200  100% { stroke-dashoffset: -120; opacity: 0; }9201}92029203/* Connection dot ------------------------------------------------------- */9204.peach-chirp-dot {9205  position: absolute;9206  top: 50%; left: 50%;9207  transform: translate(-50%, -50%);9208  width: 40px; height: 40px;9209  opacity: 0;9210  pointer-events: none;9211  transition: opacity 0.3s ease;9212  color: var(--peach-accent);9213}9214.peach-chirp-dot.is-visible { opacity: 1; }9215.peach-chirp-dot-glow {9216  position: absolute; top: 50%; left: 50%;9217  transform: translate(-50%, -50%);9218  width: 38px; height: 38px;9219  border-radius: 50%;9220  filter: blur(10px);9221  opacity: 0.55;9222  background: var(--peach-accent);9223  animation: peach-chirp-dot-bloom 1.4s ease-out;9224}9225.peach-chirp-dot-core {9226  position: absolute; top: 50%; left: 50%;9227  transform: translate(-50%, -50%);9228  width: 8px; height: 8px;9229  border-radius: 50%;9230  background: var(--peach-accent);9231  box-shadow: 0 0 12px currentColor;9232  animation: peach-chirp-dot-core 1.4s ease-out;9233}9234.peach-chirp-dot-ring {9235  position: absolute; top: 50%; left: 50%;9236  width: 60px; height: 60px;9237  transform: translate(-50%, -50%);9238  animation: peach-chirp-dot-ring 1.4s linear;9239  stroke: var(--peach-accent);9240}9241@keyframes peach-chirp-dot-bloom {9242  0%   { width: 4px; height: 4px; opacity: 0; }9243  35%  { width: 60px; height: 60px; opacity: 0.7; }9244  100% { width: 38px; height: 38px; opacity: 0.55; }9245}9246@keyframes peach-chirp-dot-core {9247  0%   { width: 0; height: 0; }9248  35%  { width: 12px; height: 12px; }9249  100% { width: 8px; height: 8px; }9250}9251@keyframes peach-chirp-dot-ring {9252  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9253  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9254  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9255}92569257/* Motes — drift upward across the stage */9258.peach-chirp-motes {9259  position: absolute;9260  inset: 0;9261  pointer-events: none;9262}9263.peach-chirp-mote {9264  position: absolute;9265  width: 2px; height: 2px;9266  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9267  border-radius: 50%;9268  bottom: 32px;9269  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9270  opacity: 0;9271  animation: peach-chirp-mote-drift 6s linear infinite;9272  animation-delay: calc(var(--mote-i, 0) * 0.7s);9273}9274@keyframes peach-chirp-mote-drift {9275  0%   { transform: translateY(0); opacity: 0; }9276  10%  { opacity: 0.6; }9277  90%  { opacity: 0.1; }9278  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9279}92809281/* Status copy ---------------------------------------------------------- */9282.peach-chirp-copy-host {9283  margin: 4px 4px 10px;9284  text-align: center;9285  min-height: 50px;9286}9287.peach-chirp-copy {9288  animation: peach-chirp-copy-in 0.35s ease both;9289}9290@keyframes peach-chirp-copy-in {9291  from { opacity: 0; transform: translateY(4px); }9292  to   { opacity: 1; transform: translateY(0); }9293}9294.peach-chirp-headline {9295  font-family: var(--font-display, Georgia, serif);9296  font-style: italic;9297  font-size: 20px;9298  font-weight: 500;9299  line-height: 1.2;9300  letter-spacing: 0.005em;9301  color: var(--peach-t0);9302  margin-bottom: 6px;9303}9304.peach-chirp-copy-listening .peach-chirp-headline,9305.peach-chirp-copy-chirping .peach-chirp-headline,9306.peach-chirp-copy-idle .peach-chirp-headline {9307  font-family: inherit;9308  font-style: normal;9309  font-weight: 500;9310  font-size: 15px;9311  color: var(--peach-t0);9312  letter-spacing: 0;9313}9314.peach-chirp-copy-paired .peach-chirp-headline {9315  color: var(--peach-t0);9316  font-weight: 600;9317}9318.peach-chirp-sub {9319  font-size: 12.5px;9320  line-height: 1.45;9321  color: var(--peach-t1);9322  max-width: 280px;9323  margin: 0 auto;9324  text-wrap: pretty;9325}93269327/* Status action -------------------------------------------------------- */9328.peach-chirp-action {9329  margin: 2px 4px 10px;9330}9331.peach-chirp-action-waiting {9332  display: flex;9333  align-items: center;9334  justify-content: space-between;9335  gap: 12px;9336}9337.peach-chirp-cancel {9338  min-width: 96px;9339}9340.peach-chirp-listening {9341  display: inline-flex; align-items: center; gap: 4px;9342  font-family: var(--peach-mono, ui-monospace, monospace);9343  font-size: 9.5px;9344  text-transform: uppercase;9345  letter-spacing: 0.12em;9346  color: var(--peach-t1);9347  padding: 8px 10px;9348}9349.peach-chirp-listen-dot {9350  width: 4px; height: 4px;9351  border-radius: 50%;9352  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9353  animation: peach-chirp-listen-pulse 1.2s ease-in-out infinite;9354}9355.peach-chirp-listen-dot:nth-child(2) { animation-delay: 0.2s; }9356.peach-chirp-listen-dot:nth-child(3) { animation-delay: 0.4s; }9357.peach-chirp-listen-label { margin-left: 6px; }9358@keyframes peach-chirp-listen-pulse {9359  0%, 100% { opacity: 0.25; transform: scale(0.9); }9360  50%      { opacity: 1;     transform: scale(1.15); }9361}93629363.peach-chirp-action-handshake {9364  display: flex;9365  flex-direction: column;9366  align-items: center;9367  gap: 8px;9368  padding: 8px 4px;9369}9370.peach-chirp-meter {9371  width: 100%;9372  max-width: 280px;9373  height: 2px;9374  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9375  border-radius: 2px;9376  position: relative;9377  overflow: hidden;9378}9379.peach-chirp-meter-bar {9380  position: absolute;9381  top: 0; bottom: 0;9382  width: 30%;9383  left: -30%;9384  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9385  animation: peach-chirp-meter-sweep 1.4s ease-in-out infinite;9386}9387@keyframes peach-chirp-meter-sweep {9388  0%   { left: -30%; }9389  100% { left: 100%; }9390}9391.peach-chirp-meter-label {9392  font-family: var(--peach-mono, ui-monospace, monospace);9393  font-size: 9.5px;9394  text-transform: uppercase;9395  letter-spacing: 0.14em;9396  color: var(--peach-t1);9397}93989399.peach-chirp-action-paired {9400  display: flex;9401  align-items: center;9402  gap: 10px;9403}9404.peach-chirp-device-confirm {9405  flex: 1;9406  display: inline-flex;9407  align-items: center;9408  gap: 8px;9409  padding: 9px 10px 9px 12px;9410  border-radius: 10px;9411  background: color-mix(in srgb, #76b6e8 12%, transparent);9412  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9413  font-size: 12.5px;9414  color: var(--peach-t0);9415  min-width: 0;9416}9417.peach-chirp-device-confirm-glyph {9418  display: inline-flex;9419  color: #76b6e8;9420}9421.peach-chirp-device-confirm-name {9422  flex: 1;9423  overflow: hidden;9424  text-overflow: ellipsis;9425  white-space: nowrap;9426}9427.peach-chirp-device-confirm-trust {9428  font-family: var(--peach-mono, ui-monospace, monospace);9429  font-size: 9.5px;9430  text-transform: uppercase;9431  letter-spacing: 0.1em;9432  color: #76b6e8;9433  padding: 2px 6px;9434  border-radius: 4px;9435  background: color-mix(in srgb, #76b6e8 14%, transparent);9436}9437.peach-chirp-done {9438  min-width: 80px;9439}9440.peach-chirp-retry {9441  align-self: center;9442  display: block;9443  margin: 6px auto 0;9444  min-width: 120px;9445}9446.peach-chirp-mic-help {9447  font-size: 12px;9448  color: var(--peach-t1);9449  text-align: center;9450  max-width: 320px;9451  margin: 0 auto;9452}94539454/* Rest state — bird stage at idle pose, primary CTA + paired list */9455.peach-chirp-pair[data-phase="idle"] .peach-chirp-stage {9456  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9457  height: 160px;9458}9459.peach-chirp-pair-start {9460  width: 100%;9461  display: inline-flex;9462  align-items: center;9463  justify-content: center;9464  gap: 8px;9465  padding: 11px 14px;9466  border-radius: 10px;9467  background: var(--peach-accent);9468  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9469  color: #1a0905;9470  font-family: inherit;9471  font-size: 13px;9472  font-weight: 600;9473  letter-spacing: 0.01em;9474  cursor: pointer;9475  transition: filter 0.15s ease, transform 0.1s ease;9476}9477.peach-chirp-pair-start:hover { filter: brightness(1.08); }9478.peach-chirp-pair-start:active { transform: translateY(1px); }94799480.peach-chirp-paired-section {9481  margin-top: 14px;9482  display: flex;9483  flex-direction: column;9484  gap: 8px;9485}9486.peach-chirp-paired-heading {9487  margin: 0;9488  font-family: var(--peach-mono, ui-monospace, monospace);9489  font-size: 10px;9490  font-weight: 500;9491  letter-spacing: 0.14em;9492  text-transform: uppercase;9493  color: var(--peach-t1);9494}94959496/* Footer --------------------------------------------------------------- */9497.peach-chirp-foot {9498  margin: 10px -4px -2px;9499  margin-top: auto;9500}9501.peach-chirp-foot-divider {9502  height: 1px;9503  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9504  margin-bottom: 10px;9505}9506.peach-chirp-foot-text {9507  font-size: 11px;9508  line-height: 1.5;9509  color: var(--peach-t1);9510  text-align: center;9511  padding: 0 4px;9512  text-wrap: pretty;9513}95149515/* Screen-reader-only live region. Kept off the visual flow but read by9516   assistive tech as the pairing phase advances. */9517.peach-sr-only {9518  position: absolute;9519  width: 1px; height: 1px;9520  padding: 0; margin: -1px;9521  overflow: hidden;9522  clip: rect(0, 0, 0, 0);9523  white-space: nowrap;9524  border: 0;9525}95269527/* Reduced motion — stage simplifies to opacity transitions only */9528@media (prefers-reduced-motion: reduce) {9529  .peach-chirp-bird-body,9530  .peach-chirp-bird-head-group,9531  .peach-chirp-bird-beak,9532  .peach-chirp-bird-wing,9533  .peach-chirp-bird-tuft,9534  .peach-chirp-bird-tail,9535  .peach-chirp-bird-eye-group,9536  .peach-chirp-bird-aura,9537  .peach-chirp-arc,9538  .peach-chirp-flight-path,9539  .peach-chirp-flight-path-2,9540  .peach-chirp-dot-glow,9541  .peach-chirp-dot-core,9542  .peach-chirp-dot-ring,9543  .peach-chirp-mote,9544  .peach-chirp-meter-bar,9545  .peach-chirp-listen-dot,9546  .peach-chirp-bird-slot,9547  .peach-chirp-bird-slot-mobile {9548    animation: none !important;9549    transition: opacity 0.2s linear !important;9550  }9551}95529553/* ─────────────────────────────────────────────────────────────────9554   Settings → Sync surface (v3 ChirpSync). Wraps the same bird9555   animation used by the pairing flow with a paired-devices list and9556   the "Pair a device" CTA.9557   ───────────────────────────────────────────────────────────────── */9558.peach-chirp-settings {9559  position: absolute;9560  inset: 0;9561  z-index: 3;9562  display: flex;9563  flex-direction: column;9564  gap: 18px;9565  padding: 14px 12px 12px;9566  width: 100%;9567  box-sizing: border-box;9568  overflow-y: auto;9569  overflow-x: hidden;9570  /* Same warm Chirp surface as the pairing screen — unifies the two views. */9571  background:9572    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9573    var(--peach-bg);9574  color: var(--peach-t0);9575  isolation: isolate;9576  /* Hide native scrollbar — content fits 99% of the time and a chunky9577     gutter ruins the surface. */9578  scrollbar-width: none;9579  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9580}9581.peach-chirp-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9582.peach-chirp-settings::before {9583  content: '';9584  position: absolute;9585  inset: 0;9586  pointer-events: none;9587  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9588  z-index: 0;9589}9590.peach-chirp-settings > * { position: relative; z-index: 1; }95919592.peach-chirp-settings--pairing {9593  padding: 0;9594  align-items: stretch;9595  justify-content: stretch;9596  background: none;9597  isolation: auto;9598}9599.peach-chirp-settings--pairing::before { display: none; }96009601.peach-chirp-settings-header {9602  display: flex;9603  align-items: center;9604  gap: 10px;9605}9606.peach-chirp-settings-title {9607  margin: 0;9608  font-family: var(--font-display, Georgia, serif);9609  font-style: italic;9610  font-size: 24px;9611  font-weight: 500;9612  line-height: 1;9613  color: var(--peach-t0);9614  letter-spacing: 0.005em;9615}9616.peach-chirp-settings-section {9617  margin: 6px 0 -4px;9618  font-size: 11px;9619  font-weight: 600;9620  letter-spacing: 0.08em;9621  text-transform: uppercase;9622  color: var(--peach-text-muted);9623}9624.peach-chirp-settings-error {9625  font-size: 12px;9626  padding: 8px 10px;9627  border-radius: 8px;9628  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);9629  color: var(--peach-text);9630}9631.peach-chirp-settings-footer {9632  margin-top: auto;9633  padding-top: 18px;9634  font-size: 11.5px;9635  line-height: 1.5;9636  color: var(--peach-text-muted);9637  text-align: center;9638}96399640/* Hero card shown when no devices are paired yet. */9641.peach-chirp-hero {9642  display: flex;9643  flex-direction: column;9644  align-items: center;9645  gap: 12px;9646  padding: 20px 12px 8px;9647  text-align: center;9648}9649.peach-chirp-hero-svg {9650  display: block;9651  max-width: 100%;9652  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));9653}9654.peach-chirp-hero-headline {9655  margin: 0;9656  font-family: var(--font-display, Georgia, serif);9657  font-style: italic;9658  font-size: 20px;9659  font-weight: 500;9660  line-height: 1.2;9661  letter-spacing: 0.005em;9662  color: var(--peach-t0);9663}9664.peach-chirp-hero-sub {9665  margin: 0;9666  font-size: 13px;9667  line-height: 1.5;9668  color: var(--peach-t1);9669  max-width: 320px;9670  text-wrap: pretty;9671}96729673.peach-chirp-pair-cta {9674  display: flex;9675  justify-content: center;9676  padding: 4px 0 6px;9677}9678.peach-chirp-pair-button {9679  display: inline-flex;9680  align-items: center;9681  gap: 8px;9682  min-width: 220px;9683  justify-content: center;9684}9685.peach-chirp-pair-button-icon {9686  flex: 0 0 auto;9687}96889689/* Paired devices list. Roomy rows that look at home next to the rest9690   of Settings; stale rows get a soft warm-warning border tint. */9691.peach-chirp-device-list {9692  list-style: none;9693  margin: 0;9694  padding: 0;9695  display: flex;9696  flex-direction: column;9697  gap: 8px;9698}9699.peach-chirp-device-row {9700  display: flex;9701  align-items: center;9702  gap: 12px;9703  padding: 12px;9704  border-radius: 10px;9705  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9706  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);9707}9708.peach-chirp-device-row[data-stale="true"] {9709  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);9710}9711.peach-chirp-device-icon {9712  width: 32px;9713  height: 32px;9714  display: flex;9715  align-items: center;9716  justify-content: center;9717  border-radius: 8px;9718  color: var(--peach-text);9719  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);9720}9721.peach-chirp-device-info {9722  flex: 1;9723  display: flex;9724  flex-direction: column;9725  gap: 2px;9726  min-width: 0;9727}9728.peach-chirp-device-name {9729  font-size: 14px;9730  font-weight: 600;9731  color: var(--peach-text);9732  overflow: hidden;9733  text-overflow: ellipsis;9734  white-space: nowrap;9735}9736.peach-chirp-device-meta {9737  font-size: 11.5px;9738  color: var(--peach-text-muted);9739  display: flex;9740  flex-wrap: wrap;9741  align-items: center;9742  gap: 8px;9743}9744.peach-chirp-device-badge {9745  font-size: 10.5px;9746  font-weight: 500;9747  letter-spacing: 0.02em;9748  padding: 2px 6px;9749  border-radius: 999px;9750  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);9751  color: var(--peach-text);9752}9753.peach-chirp-device-stale {9754  font-size: 10.5px;9755  font-weight: 500;9756  color: var(--peach-warn, #d29257);9757}9758.peach-chirp-device-remove {9759  flex: 0 0 auto;9760  color: var(--peach-text-muted);9761}9762.peach-chirp-device-remove:hover {9763  color: var(--peach-danger, #c25b4a);9764}9765.peach-chirp-unpair-confirm {9766  display: flex;9767  gap: 6px;9768  align-items: center;9769}97709771/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */9772.peach-chirp-pro-card {9773  position: relative;9774  margin: 18px 12px;9775  padding: 18px 20px 22px;9776  border-radius: 22px;9777  background:9778    radial-gradient(140% 90% at 50% 0%,9779      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,9780      transparent 60%),9781    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9782  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);9783  box-shadow:9784    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,9785    0 18px 40px -24px rgba(0, 0, 0, 0.45);9786  display: flex;9787  flex-direction: column;9788  align-items: center;9789  gap: 10px;9790  text-align: center;9791  overflow: hidden;9792}9793.peach-chirp-pro-stage {9794  position: relative;9795  width: 220px;9796  height: 140px;9797  display: flex;9798  align-items: flex-end;9799  justify-content: center;9800  margin-bottom: 2px;9801}9802.peach-chirp-pro-bird-slot {9803  width: 140px;9804  height: 132px;9805  display: flex;9806  align-items: flex-end;9807  justify-content: center;9808  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));9809}9810.peach-chirp-pro-bird-slot .peach-chirp-bird {9811  width: 100%;9812  height: 100%;9813}9814.peach-chirp-pro-bird-slot .peach-chirp-bird svg {9815  width: 100%;9816  height: 100%;9817  overflow: visible;9818}9819.peach-chirp-pro-chirp {9820  position: absolute;9821  top: 14px;9822  right: 8px;9823  width: 96px;9824  height: 80px;9825  color: var(--peach-accent);9826  animation: peach-chirp-pulse 2.6s ease-in-out infinite;9827  transform-origin: 0% 50%;9828  pointer-events: none;9829}9830@keyframes peach-chirp-pulse {9831  0%, 100% { opacity: 0.35; transform: translateX(0) scale(0.92); }9832  45%      { opacity: 1;    transform: translateX(2px) scale(1); }9833  70%      { opacity: 0.6;  transform: translateX(4px) scale(1.04); }9834}9835@media (prefers-reduced-motion: reduce) {9836  .peach-chirp-pro-chirp { animation: none; opacity: 0.7; }9837}9838.peach-chirp-pro-headline {9839  margin: 4px 0 0;9840  font-family: var(--font-display, "Cormorant Garamond", serif);9841  font-style: italic;9842  font-size: 19px;9843  font-weight: 500;9844  letter-spacing: 0.01em;9845  color: var(--peach-text, var(--peach-t0));9846  max-width: 280px;9847  line-height: 1.25;9848}9849.peach-chirp-pro-body {9850  margin: 0;9851  font-size: 13px;9852  line-height: 1.55;9853  color: var(--peach-text-dim, var(--peach-t2));9854  max-width: 300px;9855}9856.peach-chirp-pro-cta {9857  margin-top: 4px;9858}9859.peach-chirp-pro-foot {9860  margin: 2px 0 0;9861  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;9862  font-size: 0.625rem;9863  letter-spacing: 0.08em;9864  text-transform: uppercase;9865  color: var(--peach-t2);9866  opacity: 0.75;9867}