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/* Native (mobile) variant: flat search-bar look matching the extension's1318   `.peach-search-bar`. No back arrow — the sheet is dismissed by swipe.1319   Search-glass icon on the left, counter on the right, no nav buttons. */1320.peach-list-top--native {1321  min-height: 54px;1322  padding: 0 14px 0 14px;1323  gap: 10px;1324  background: transparent;1325  border-bottom: 1px solid color-mix(in srgb, var(--peach-t3) 60%, transparent);1326}1327.peach-list-top--native .peach-search-icon {1328  color: var(--peach-t2);1329  display: inline-flex;1330  align-items: center;1331  flex-shrink: 0;1332}1333.peach-list-top--native .peach-search-input {1334  font-family: var(--font-display);1335  font-style: italic;1336  font-size: 18px;1337  caret-color: var(--peach-accent);1338  flex: 1;1339}1340.peach-list-top--native .peach-search-counter {1341  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1342  font-size: 0.625rem;1343  color: var(--peach-t2);1344  flex-shrink: 0;1345}1346.peach-vault-list {1347  flex: 1;1348  overflow-y: auto;1349  scrollbar-width: none;1350}1351.peach-vault-list::-webkit-scrollbar { display: none; }13521353/* Scrollbar — vault list */1354.peach-vault-list {1355  scrollbar-width: thin;1356  scrollbar-color: var(--peach-t3) transparent;1357}13581359.peach-vault-list::-webkit-scrollbar {1360  width: 3px;1361}13621363.peach-vault-list::-webkit-scrollbar-thumb {1364  background: var(--peach-t3);1365  border-radius: 2px;1366}13671368.peach-entry-row {1369  width: 100%;1370  display: flex;1371  align-items: center;1372  gap: 10px;1373  padding: 9px 16px;1374  background: transparent;1375  border: none;1376  border-bottom: 1px solid var(--peach-t3);1377  cursor: pointer;1378  color: inherit;1379  text-align: left;1380  transition: background 80ms ease;1381}1382.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1383.peach-entry-row:last-child { border-bottom: none; }1384.peach-entry-row.is-active {1385  box-shadow: inset 2px 0 0 var(--peach-accent);1386  background: rgba(240,232,216,0.03);1387}1388.peach-entry-row:focus-visible {1389  outline: none;1390  box-shadow: 0 0 0 1px var(--peach-border-accent);1391  background: rgba(240,232,216,0.03);1392}1393.peach-entry-row-icon {1394  width: 26px; height: 26px;1395  border-radius: 7px;1396  border: 1px solid var(--peach-t3);1397  display: flex; align-items: center; justify-content: center;1398  color: var(--peach-t2);1399  flex-shrink: 0;1400}1401.peach-entry-row-icon.is-breach {1402  border-color: rgba(220,80,60,0.3);1403  color: rgba(220,80,60,0.7);1404}14051406/* Title-initials chip used as the favicon fallback for login entries whose1407 * real favicon hasn't been cached by the browser yet (freshly-imported,1408 * never-visited domains). Background colour is hashed from the title so1409 * the same entry always shows the same chip. The chip fits the same1410 * 26×26 row icon slot the favicon would take. */1411.peach-favicon-initials {1412  display: inline-flex;1413  align-items: center;1414  justify-content: center;1415  width: 100%;1416  height: 100%;1417  border-radius: 4px;1418  font-family: "IBM Plex Mono", monospace;1419  font-size: 0.5625rem;1420  font-weight: 600;1421  letter-spacing: 0.04em;1422  color: rgba(240, 232, 216, 0.92);1423  text-transform: uppercase;1424  user-select: none;1425}1426.peach-entry-row-info { flex: 1; min-width: 0; }1427.peach-entry-row-name {1428  display: block;1429  font-family: var(--font-display);1430  font-size: 1.0625rem;1431  font-style: italic;1432  font-weight: 400;1433  color: var(--peach-t0);1434  line-height: 1.2;1435  white-space: nowrap;1436  overflow: hidden;1437  text-overflow: ellipsis;1438}1439.peach-entry-row-meta {1440  display: block;1441  font-family: "IBM Plex Mono", monospace;1442  font-size: 0.5625rem;1443  color: var(--peach-t2);1444  margin-top: 1px;1445  letter-spacing: 0.05em;1446}1447.peach-entry-row-dot {1448  width: 5px; height: 5px;1449  border-radius: 50%;1450  background: rgba(220,80,60,0.7);1451  flex-shrink: 0;1452}1453.peach-new-entry-row {1454  display: flex;1455  align-items: center;1456  justify-content: center;1457  gap: 6px;1458  width: 100%;1459  padding: 11px;1460  background: transparent;1461  border: none;1462  border-top: 1px solid var(--peach-t3);1463  color: var(--peach-t2);1464  font-family: "IBM Plex Mono", monospace;1465  font-size: 0.5625rem;1466  text-transform: uppercase;1467  letter-spacing: 0.14em;1468  cursor: pointer;1469  flex-shrink: 0;1470  transition: color 120ms ease, background 120ms ease;1471}1472.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }14731474/* ── Multi-select mode ─────────────────────────────────────────────── */14751476/* Select-mode trigger button in sort bar — same shape as trash btn */1477.peach-sort-select-btn {1478  display: flex;1479  align-items: center;1480  justify-content: center;1481  padding: 3px 5px;1482  background: transparent;1483  border: none;1484  cursor: pointer;1485  color: var(--peach-t2);1486  border-radius: 4px;1487  transition: color 140ms ease, background 140ms ease;1488}1489.peach-sort-select-btn:hover {1490  color: var(--peach-t1);1491  background: var(--peach-t3);1492}14931494/* Sort bar in select mode */1495.peach-select-cancel-btn {1496  background: transparent;1497  border: none;1498  padding: 0 4px;1499  cursor: pointer;1500  font-family: "IBM Plex Mono", monospace;1501  font-size: 0.5625rem;1502  letter-spacing: 0.12em;1503  text-transform: uppercase;1504  color: var(--peach-t2);1505  transition: color 140ms ease;1506  flex-shrink: 0;1507}1508.peach-select-cancel-btn:hover { color: var(--peach-t0); }15091510.peach-select-count-label {1511  flex: 1;1512  text-align: center;1513  font-family: "IBM Plex Mono", monospace;1514  font-size: 0.5625rem;1515  letter-spacing: 0.14em;1516  text-transform: uppercase;1517  color: var(--peach-t1);1518}15191520.peach-select-all-btn {1521  background: transparent;1522  border: none;1523  padding: 0 4px;1524  cursor: pointer;1525  font-family: "IBM Plex Mono", monospace;1526  font-size: 0.5625rem;1527  letter-spacing: 0.12em;1528  text-transform: uppercase;1529  color: var(--peach-t2);1530  transition: color 140ms ease;1531  flex-shrink: 0;1532}1533.peach-select-all-btn:hover { color: var(--peach-accent); }15341535/* List in select mode */1536.peach-vault-list.is-selecting .peach-entry-row {1537  cursor: default;1538}1539.peach-vault-list.is-selecting .peach-entry-row:hover {1540  background: rgba(240,232,216,0.02);1541}1542.peach-vault-list.is-selecting .peach-entry-row.is-selected {1543  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1544}1545.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1546  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1547}15481549/* Select indicator circles in icon slot */1550.peach-entry-row-icon.is-select-icon {1551  color: var(--peach-t2);1552}1553.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1554  color: var(--peach-accent);1555}15561557/* Delete action bar at bottom (replaces new-entry row) */1558.peach-select-action-bar {1559  display: flex;1560  align-items: center;1561  justify-content: center;1562  gap: 7px;1563  width: 100%;1564  padding: 11px;1565  background: transparent;1566  border: none;1567  border-top: 1px solid var(--peach-t3);1568  color: var(--peach-t1);1569  font-family: "IBM Plex Mono", monospace;1570  font-size: 0.5625rem;1571  text-transform: uppercase;1572  letter-spacing: 0.14em;1573  cursor: pointer;1574  flex-shrink: 0;1575  transition: color 120ms ease, background 120ms ease;1576}1577.peach-select-action-bar:not(:disabled):hover {1578  color: var(--peach-t0);1579  background: rgba(220,80,60,0.06);1580}1581.peach-select-action-bar:not(:disabled):hover svg {1582  stroke: rgba(220,80,60,0.8);1583}1584.peach-select-action-bar:disabled,1585.peach-select-action-bar.is-empty {1586  color: var(--peach-t2);1587  cursor: default;1588  opacity: 0.5;1589}1590.peach-search-counter-list {1591  white-space: nowrap;1592  flex-shrink: 0;1593}1594.peach-list-empty {1595  min-height: 180px;1596  display: grid;1597  place-items: center;1598  color: var(--peach-t2);1599  font-family: "IBM Plex Mono", monospace;1600  font-size: 0.6875rem;1601}16021603/* ── Settings view ───────────────────────────────────────────────────── */1604.peach-settings-body {1605  flex: 1;1606  overflow-y: auto;1607  min-height: 0;1608  display: flex;1609  flex-direction: column;1610  padding: 2px 0 10px;1611}1612.peach-settings-group {1613  margin: 4px 10px;1614  padding: 9px 14px 11px;1615  border-radius: 12px;1616  border: 1px solid rgba(255, 255, 255, 0.07);1617  background: rgba(26, 20, 16, 0.60);1618  backdrop-filter: blur(10px) saturate(1.3);1619  -webkit-backdrop-filter: blur(10px) saturate(1.3);1620}16211622.peach-settings-group + .peach-settings-group {1623  margin-top: 6px;1624}16251626@supports not (backdrop-filter: blur(1px)) {1627  .peach-settings-group {1628    background: rgba(26, 20, 16, 0.90);1629    border-color: rgba(255, 255, 255, 0.09);1630    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1631  }1632}16331634.light .peach-settings-group,1635[data-theme="light"] .peach-settings-group {1636  background: rgba(205, 191, 164, 0.68);1637  border-color: rgba(26, 18, 8, 0.10);1638  backdrop-filter: blur(10px) saturate(1.2);1639  -webkit-backdrop-filter: blur(10px) saturate(1.2);1640}16411642@supports not (backdrop-filter: blur(1px)) {1643  .light .peach-settings-group,1644  [data-theme="light"] .peach-settings-group {1645    background: rgba(205, 191, 164, 0.95);1646    border-color: rgba(26, 18, 8, 0.12);1647  }1648}1649.peach-export-intro {1650  padding-bottom: 8px;1651}1652.peach-export-card {1653  display: grid;1654  gap: 10px;1655}1656.peach-rune-canvas {1657  border-radius: 8px;1658  background: rgba(0, 0, 0, 0.22);1659  flex: 1;1660  align-self: center;1661}1662.peach-script-input {1663  font-family: "PeachScript", monospace;1664  font-size: 0.6875rem;1665  line-height: 1.9;1666  letter-spacing: 0.06em;1667  color: var(--peach-t0);1668  background: rgba(0, 0, 0, 0.22);1669  border: none;1670  border-radius: 6px;1671  padding: 12px;1672  width: 100%;1673  min-height: 96px;1674  resize: vertical;1675  word-break: break-all;1676  scrollbar-width: none;1677  -ms-overflow-style: none;1678}16791680.peach-script-input::-webkit-scrollbar { display: none; }1681.peach-csv-warning {1682  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1683  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1684  color: var(--peach-t0);1685  border-radius: 6px;1686  padding: 10px 12px;1687  margin-bottom: 8px;1688  font-size: 0.75rem;1689  line-height: 1.45;1690}1691.peach-export-card--primary {1692  background:1693    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1694}16951696/* Export menu — distribute the three format cards across the popup. */1697.peach-export-menu {1698  display: flex;1699  flex-direction: column;1700  flex: 1;1701  min-height: 0;1702}1703.peach-export-menu .peach-settings-group {1704  flex: 1;1705  display: flex;1706  flex-direction: column;1707  justify-content: center;1708  gap: 10px;1709}17101711/* Result view — the script-string fills the remaining vertical surface. */1712.peach-export-result-group {1713  flex: 1;1714  display: flex;1715  flex-direction: column;1716  min-height: 0;1717  border-bottom: none;1718}1719.peach-export-result-group .peach-export-card {1720  flex: 1;1721  min-height: 0;1722  display: flex;1723  flex-direction: column;1724  gap: 10px;1725}1726.peach-export-result-group .peach-export-card-copy {1727  flex-shrink: 0;1728}1729.peach-export-result-group .peach-settings-label {1730  flex-shrink: 0;1731}1732.peach-export-result-group button {1733  flex-shrink: 0;1734}1735.peach-export-card-head {1736  display: flex;1737  align-items: center;1738  justify-content: space-between;1739  gap: 10px;1740}1741.peach-export-card-copy {1742  margin: 0;1743  font-size: 0.75rem;1744  line-height: 1.55;1745  color: var(--peach-t1);1746}1747.peach-export-note {1748  margin: 0;1749  font-size: 0.625rem;1750  line-height: 1.5;1751  color: var(--peach-t2);1752}1753.peach-export-strength-track {1754  height: 3px;1755  background: var(--peach-border);1756  border-radius: 2px;1757  margin: 4px 0 2px;1758  overflow: hidden;1759}1760.peach-export-strength-fill {1761  height: 100%;1762  border-radius: 2px;1763  transition: width 250ms ease, background 250ms ease;1764}1765.peach-export-strength-warn {1766  margin: 0;1767  font-size: 0.625rem;1768  line-height: 1.5;1769  color: #e84040;1770  font-family: "IBM Plex Mono", monospace;1771}1772.peach-export-strength-hint {1773  margin: 0;1774  font-size: 0.625rem;1775  line-height: 1.5;1776  color: var(--peach-t2);1777  font-family: "IBM Plex Mono", monospace;1778}1779.peach-export-pill {1780  display: inline-flex;1781  align-items: center;1782  padding: 4px 8px;1783  border-radius: 999px;1784  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1785  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1786  color: var(--peach-accent);1787  font-family: "IBM Plex Mono", monospace;1788  font-size: 0.5rem;1789  letter-spacing: 0.12em;1790  text-transform: uppercase;1791  white-space: nowrap;1792}1793.peach-export-pill--danger {1794  border-color: rgba(220,80,60,0.22);1795  background: rgba(220,80,60,0.08);1796  color: var(--peach-breach);1797}1798.peach-settings-label {1799  margin: 0 0 6px;1800  font-family: "IBM Plex Mono", monospace;1801  font-size: 0.5rem;1802  text-transform: uppercase;1803  letter-spacing: 0.18em;1804  color: var(--peach-t2);1805}1806.peach-settings-row {1807  display: flex;1808  align-items: center;1809  justify-content: space-between;1810  gap: 12px;1811  min-height: 34px;1812  padding: 6px 0;1813  font-size: 0.8125rem;1814  color: var(--peach-t1);1815}1816.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1817.peach-settings-value {1818  font-family: "IBM Plex Mono", monospace;1819  font-size: 0.625rem;1820  color: var(--peach-t2);1821}18221823.peach-settings-value--status {1824  display: flex;1825  align-items: center;1826  gap: 6px;1827}18281829.peach-settings-link {1830  font-family: "IBM Plex Mono", monospace;1831  font-size: 0.625rem;1832  color: var(--peach-accent);1833  text-decoration: none;1834  cursor: pointer;1835}1836.peach-settings-link:hover {1837  text-decoration: underline;1838}18391840.peach-settings-row--stack {1841  flex-direction: column;1842  align-items: stretch;1843  gap: 6px;1844}18451846.peach-settings-row--top {1847  align-items: flex-start;1848}18491850.peach-settings-row-main {1851  display: flex;1852  flex-direction: column;1853  gap: 4px;1854  flex: 1;1855}1856.peach-toggle {1857  width: 28px; height: 16px;1858  border-radius: 999px;1859  background: var(--peach-t3);1860  border: 1px solid var(--peach-t3);1861  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1862  flex-shrink: 0;1863  transition: background 200ms ease, border-color 200ms ease;1864  cursor: pointer;1865}1866.peach-toggle.is-on {1867  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1868  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1869}1870.peach-toggle-knob {1871  width: 10px; height: 10px;1872  border-radius: 50%;1873  background: var(--peach-t2);1874  flex-shrink: 0;1875  transform: translateX(0px);1876  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1877}1878.peach-toggle.is-on .peach-toggle-knob {1879  background: var(--peach-accent);1880  transform: translateX(12px);1881}1882.peach-settings-footer {1883  display: flex;1884  align-items: center;1885  gap: 8px;1886  margin-top: auto;1887  padding: 14px 16px 8px;1888  font-family: "IBM Plex Mono", monospace;1889  font-size: 0.5625rem;1890  color: var(--peach-t2);1891}18921893/* ── Settings home navigation ──────────────────────────────────────────── */1894.peach-settings-nav-label {1895  margin: 0 0 2px;1896  padding: 12px 16px 4px;1897  font-family: "IBM Plex Mono", monospace;1898  font-size: 0.5rem;1899  text-transform: uppercase;1900  letter-spacing: 0.18em;1901  color: var(--peach-t2);1902}19031904.peach-settings-cat-row {1905  display: flex;1906  align-items: center;1907  gap: 10px;1908  width: 100%;1909  padding: 9px 16px;1910  background: none;1911  border: none;1912  border-bottom: 1px solid var(--peach-t3);1913  cursor: pointer;1914  text-align: left;1915  color: inherit;1916  transition: background var(--peach-dur-80) ease;1917}1918.peach-settings-cat-row:hover {1919  background: var(--peach-t3);1920}1921.peach-settings-cat-row:last-child {1922  border-bottom: none;1923}19241925.peach-settings-cat-icon {1926  width: 28px;1927  height: 28px;1928  border-radius: 7px;1929  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1930  color: var(--peach-accent);1931  display: flex;1932  align-items: center;1933  justify-content: center;1934  flex-shrink: 0;1935}1936/* Light theme: peach-on-cream is too low-contrast — both colors are warm.1937   Darken the icon stroke to ink and bump the bg tint so the icon reads1938   sharply while the cell still feels accent-tinted. */1939.light .peach-settings-cat-icon {1940  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);1941  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));1942}19431944.peach-settings-cat-content {1945  flex: 1;1946  display: flex;1947  flex-direction: column;1948  gap: 2px;1949  min-width: 0;1950}19511952.peach-settings-cat-name {1953  font-size: 0.8125rem;1954  font-weight: 450;1955  color: var(--peach-t0);1956  line-height: 1.2;1957}19581959.peach-settings-cat-desc {1960  font-size: 0.625rem;1961  color: var(--peach-t2);1962  line-height: 1.3;1963  white-space: nowrap;1964  overflow: hidden;1965  text-overflow: ellipsis;1966}19671968.peach-settings-cat-chevron {1969  color: var(--peach-t2);1970  flex-shrink: 0;1971  opacity: 0.5;1972}19731974/* ── Settings sub-view section labels ──────────────────────────────────── */1975.peach-settings-sub-label {1976  margin: 12px 0 4px;1977  font-family: "IBM Plex Mono", monospace;1978  font-size: 0.5rem;1979  text-transform: uppercase;1980  letter-spacing: 0.18em;1981  color: var(--peach-t2);1982}1983.peach-settings-sub-label:first-child {1984  margin-top: 4px;1985}19861987/* ── Settings: collapsible Advanced section ─────────────────────────────── */1988.peach-settings-advanced-toggle {1989  display: flex;1990  align-items: center;1991  justify-content: space-between;1992  width: 100%;1993  background: none;1994  border: none;1995  cursor: pointer;1996  padding: 12px 0 4px;1997  margin: 0;1998  color: inherit;1999}2000.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {2001  color: var(--peach-t1);2002}2003.peach-settings-advanced-chevron {2004  font-size: 0.5625rem;2005  color: var(--peach-t3);2006  letter-spacing: 0;2007  transition: color 120ms ease;2008}20092010/* ── Feedback form ──────────────────────────────────────────────────────── */2011.peach-feedback-group {2012  flex: 1;2013  display: flex;2014  flex-direction: column;2015  border-bottom: none;2016}20172018.peach-feedback-intro {2019  margin: 4px 0 14px;2020  font-size: 0.75rem;2021  line-height: 1.55;2022  color: var(--peach-t1);2023}20242025.peach-feedback-chips {2026  display: flex;2027  flex-wrap: wrap;2028  gap: 6px;2029  margin-bottom: 14px;2030}20312032.peach-feedback-chip {2033  padding: 4px 10px;2034  border-radius: 999px;2035  border: 1px solid var(--peach-t3);2036  background: none;2037  color: var(--peach-t2);2038  font-size: 0.6875rem;2039  font-family: var(--font-ui);2040  cursor: pointer;2041  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2042    background var(--peach-dur-80) ease;2043}2044.peach-feedback-chip:hover {2045  border-color: var(--peach-t2);2046  color: var(--peach-t1);2047}2048.peach-feedback-chip.is-active {2049  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);2050  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2051  color: var(--peach-accent);2052}20532054.peach-feedback-textarea {2055  flex: 1;2056  width: 100%;2057  min-height: 120px;2058  box-sizing: border-box;2059  background: rgba(0, 0, 0, 0.22);2060  border: 1px solid transparent;2061  border-radius: 6px;2062  color: var(--peach-t0);2063  font-size: 0.75rem;2064  font-family: var(--font-ui);2065  line-height: 1.5;2066  padding: 8px 10px;2067  resize: none;2068  outline: none;2069  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2070}2071.peach-feedback-textarea:focus {2072  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2073  background: rgba(0, 0, 0, 0.28);2074}2075.peach-feedback-textarea:focus {2076  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2077}2078.peach-feedback-textarea::placeholder {2079  color: var(--peach-t2);2080}20812082.peach-feedback-meta {2083  margin: 6px 0 0;2084  font-size: 0.625rem;2085  color: var(--peach-t2);2086  font-family: "IBM Plex Mono", monospace;2087}20882089.peach-feedback-result {2090  margin: 8px 0 0;2091  font-size: 0.6875rem;2092  font-family: "IBM Plex Mono", monospace;2093}2094.peach-feedback-result--ok { color: var(--peach-sync-ok); }2095.peach-feedback-result--err { color: var(--peach-breach); }20962097.peach-feedback-submit {2098  width: 100%;2099  margin-top: 12px;2100  justify-content: center;2101}21022103.peach-feedback-anon {2104  margin: 8px 0 0;2105  font-size: 0.625rem;2106  color: var(--peach-t2);2107  text-align: center;2108}21092110.peach-passkey-badge {2111  margin-left: 8px;2112  font-size: 0.625rem;2113  letter-spacing: 0.06em;2114  text-transform: uppercase;2115  color: var(--peach-t2);2116  font-family: var(--font-ui);2117  vertical-align: middle;2118}21192120.peach-passkey-delete-btn {2121  color: var(--peach-breach);2122  border-color: rgba(229, 85, 85, 0.25);2123}21242125.peach-passkey-delete-confirm {2126  display: flex;2127  align-items: center;2128  gap: 8px;2129  padding: 8px 10px;2130  background: rgba(229, 85, 85, 0.06);2131  border: 1px solid rgba(229, 85, 85, 0.2);2132  border-radius: 6px;2133}21342135.peach-passkey-delete-confirm-copy {2136  flex: 1;2137  font-size: 0.6875rem;2138  color: var(--peach-t1);2139}21402141.peach-passkey-delete-btn--confirm {2142  color: var(--peach-breach);2143  border-color: rgba(229, 85, 85, 0.4);2144}21452146.peach-passkey-activity {2147  flex-direction: column;2148  align-items: flex-start;2149  gap: 4px;2150}21512152.peach-passkey-meta {2153  font-size: 0.6875rem;2154  color: var(--peach-t2);2155}21562157.peach-passkey-actions {2158  position: relative;2159  z-index: 1;2160  margin-top: 14px;2161  display: flex;2162  flex-direction: column;2163  gap: 8px;2164}21652166.peach-passkey-approval {2167  display: flex;2168  flex-direction: column;2169  align-items: center;2170  padding: 16px 20px 14px;2171  gap: 8px;2172  text-align: center;2173}21742175.peach-passkey-approval-icon {2176  width: 36px;2177  height: 36px;2178  border-radius: 10px;2179  background: var(--peach-s2);2180  border: 1px solid var(--peach-t3);2181  display: flex;2182  align-items: center;2183  justify-content: center;2184  flex-shrink: 0;2185  color: var(--peach-accent);2186}21872188.peach-passkey-approval-icon img,2189.peach-passkey-approval-icon svg {2190  width: 22px;2191  height: 22px;2192  border-radius: 5px;2193}21942195.peach-passkey-approval-rp {2196  font-family: var(--font-ui);2197  font-size: 0.75rem;2198  color: var(--peach-t2);2199  letter-spacing: 0.03em;2200}22012202.peach-passkey-approval-action {2203  font-family: var(--font-display);2204  font-style: italic;2205  font-weight: 300;2206  font-size: 18px;2207  color: var(--peach-t0);2208  line-height: 1.1;2209  margin: 1px 0;2210}22112212.peach-passkey-approval-user {2213  font-family: var(--font-mono);2214  font-size: 0.6875rem;2215  color: var(--peach-t1);2216  background: var(--peach-s2);2217  border: 1px solid var(--peach-t3);2218  border-radius: 4px;2219  padding: 3px 8px;2220}22212222.peach-passkey-approval-notice {2223  font-size: 0.625rem;2224  color: var(--peach-t2);2225  line-height: 1.5;2226  max-width: 220px;2227}22282229.peach-passkey-approval-actions {2230  display: flex;2231  gap: 8px;2232  width: 100%;2233  margin-top: 6px;2234}22352236.peach-passkey-approval-actions .peach-btn {2237  flex: 1;2238}22392240/* ── Inline generator drawer ── */2241.peach-generator-drawer {2242  display: grid;2243  grid-template-rows: 0fr;2244  transition: grid-template-rows 320ms var(--peach-curve-arrival);2245  overflow: hidden;2246}2247.peach-generator-drawer.is-open {2248  grid-template-rows: 1fr;2249}2250.peach-generator-drawer-inner {2251  min-height: 0;2252  overflow: hidden;2253}2254.peach-generator-drawer-content {2255  border-top: 1px solid var(--peach-t3);2256  padding: 8px 0 4px;2257  display: flex;2258  flex-direction: column;2259  gap: 8px;2260}22612262/* ── Compact generator (inside entry edit) ── */2263.peach-generator-drawer-content--compact {2264  border-top: 1px solid var(--peach-t3);2265  padding: 8px 0 2px;2266  gap: 7px;2267}2268.peach-pwgen-compact-display-row {2269  display: flex;2270  align-items: center;2271  gap: 6px;2272}2273.peach-pwgen-compact-output {2274  flex: 1;2275  min-width: 0;2276  font-family: "IBM Plex Mono", monospace;2277  font-size: 0.6875rem;2278  font-weight: 400;2279  letter-spacing: 0.04em;2280  color: var(--peach-t0);2281  background: rgba(240, 232, 216, 0.04);2282  border: 1px solid var(--peach-t3);2283  border-radius: 5px;2284  padding: 5px 8px;2285  line-height: 1.5;2286  outline: none;2287  transition: border-color 120ms ease;2288}22892290.peach-pwgen-compact-output:focus {2291  border-color: var(--peach-t1);2292}2293.peach-pwgen-compact-controls {2294  display: flex;2295  align-items: center;2296  gap: 6px;2297}2298.peach-pwgen-compact-slider {2299  flex: 1;2300  min-width: 0;2301  height: 2px !important;2302}2303.peach-pwgen-compact-controls .peach-pwgen-len-num {2304  flex-shrink: 0;2305  min-width: 18px;2306  text-align: right;2307}2308.peach-pwgen-compact-pills {2309  display: flex;2310  gap: 3px;2311  flex-shrink: 0;2312}2313.peach-pwgen-compact-pills .peach-pwgen-pill {2314  padding: 2px 7px;2315  font-size: 0.5rem;2316}2317.peach-pwgen-compact-use {2318  flex-shrink: 0;2319  font-size: 0.625rem !important;2320  padding: 3px 9px !important;2321  min-height: 22px !important;2322  border-radius: 5px !important;2323}23242325/* ── Password edit row (input + eye toggle side-by-side) ── */2326.peach-password-edit-row {2327  display: flex;2328  align-items: center;2329  gap: 6px;2330}2331.peach-password-edit-row .peach-inline-input {2332  flex: 1;2333  min-width: 0;2334}23352336/* ── Generate toggle link ── */2337.peach-generate-toggle-link {2338  display: inline-flex;2339  align-items: center;2340  gap: 5px;2341  background: none;2342  border: none;2343  padding: 0;2344  cursor: pointer;2345  font-family: "IBM Plex Mono", monospace;2346  font-size: 0.625rem;2347  color: var(--peach-t2);2348  letter-spacing: 0.04em;2349  transition: color 120ms ease;2350  align-self: flex-start;2351}2352.peach-generate-toggle-link:hover {2353  color: var(--peach-accent);2354}23552356/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2357.peach-entry-body {2358  flex: 1;2359  overflow-y: auto;2360  overflow-x: hidden;2361  scrollbar-width: none;2362  -ms-overflow-style: none;2363  overscroll-behavior: contain;2364  display: grid;2365  gap: 10px;2366  align-content: start;2367  padding: 10px 20px 14px;2368  min-width: 0;2369  min-height: 0;2370}2371.peach-entry-body::-webkit-scrollbar { display: none; }23722373/* Type-toggle pills + inline note toolbar */2374.peach-new-type-row {2375  display: flex;2376  align-items: center;2377  gap: 6px;2378  margin-bottom: 2px;2379}2380.peach-new-type-btn {2381  background: transparent;2382  border: 1px solid var(--peach-t3);2383  border-radius: 12px;2384  padding: 3px 10px;2385  font-family: "IBM Plex Mono", monospace;2386  font-size: 0.5625rem;2387  letter-spacing: 0.12em;2388  text-transform: uppercase;2389  color: var(--peach-t2);2390  cursor: pointer;2391  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2392}2393.peach-new-type-btn.is-active {2394  color: var(--peach-t0);2395  border-color: var(--peach-accent);2396  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2397}2398.peach-new-type-btn:not(.is-active):hover {2399  color: var(--peach-t1);2400  border-color: var(--peach-t2);2401}24022403/* Editable title */2404.peach-new-title-wrap { margin: 0 0 2px; }2405.peach-new-title-input {2406  background: transparent;2407  border: none;2408  outline: none;2409  width: 100%;2410  color: var(--peach-t0);2411  font-family: var(--font-display);2412  font-style: italic;2413  font-weight: 400;2414  font-size: 40px;2415  line-height: 0.95;2416  caret-color: var(--peach-accent);2417}2418.peach-new-title-input::placeholder { color: var(--peach-t2); }24192420/* Editable domain field */2421.peach-domain-edit-row {2422  display: flex;2423  align-items: center;2424  gap: 6px;2425}24262427.peach-domain-edit-row .peach-domain-value--edit {2428  flex: 1;2429  width: 0;2430}24312432.peach-domain-url-btn {2433  flex-shrink: 0;2434  background: transparent;2435  border: none;2436  cursor: pointer;2437  color: var(--peach-t3);2438  padding: 2px 3px;2439  display: flex;2440  align-items: center;2441  line-height: 0;2442  border-radius: 3px;2443  transition: color 120ms ease;2444}24452446.peach-domain-url-btn:hover {2447  color: var(--peach-accent);2448}24492450.peach-domain-value--edit {2451  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2452  font-size: 0.625rem;2453  font-style: italic;2454  letter-spacing: 0.12em;2455  color: var(--peach-t1);2456  background: transparent;2457  border: none;2458  border-bottom: 1px solid var(--peach-t3);2459  outline: none;2460  width: 100%;2461  padding: 2px 0;2462  caret-color: var(--peach-accent);2463  transition: border-color 140ms ease, color 140ms ease;2464}2465.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2466.peach-domain-value--edit:focus {2467  border-bottom-color: rgba(240, 232, 216, 0.28);2468  color: var(--peach-t0);2469}24702471/* Editable field values (username, password, totp) */2472.peach-field-value--edit {2473  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2474  font-size: 0.8125rem;2475  color: var(--peach-t0);2476  background: transparent;2477  border: none;2478  border-bottom: 1px solid var(--peach-t3);2479  outline: none;2480  flex: 1;2481  min-width: 0;2482  padding: 3px 0;2483  caret-color: var(--peach-accent);2484  transition: border-color 140ms ease, color 140ms ease;2485}2486.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2487.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2488.peach-field-value--edit:focus {2489  border-bottom-color: rgba(240, 232, 216, 0.28);2490  color: var(--peach-t0);2491}24922493/* "+ add optional field" links */2494.peach-entry-add-links {2495  display: flex;2496  gap: 12px;2497  flex-wrap: wrap;2498  margin-top: -2px;2499}2500.peach-add-field-link {2501  background: transparent;2502  border: none;2503  padding: 0;2504  cursor: pointer;2505  font-family: "IBM Plex Mono", monospace;2506  font-size: 0.5625rem;2507  letter-spacing: 0.1em;2508  text-transform: uppercase;2509  color: var(--peach-t2);2510  transition: color 140ms ease;2511}2512.peach-add-field-link:hover { color: var(--peach-accent); }25132514/* ── New entry form (legacy classes) ────────────────────────────────── */2515.peach-new-body {2516  flex: 1;2517  overflow-y: auto;2518  padding: 10px 20px 14px;2519}2520.peach-new-name-input {2521  background: transparent;2522  border: none;2523  outline: none;2524  width: 100%;2525  color: var(--peach-t0);2526  font-family: var(--font-display);2527  font-style: italic;2528  font-weight: 400;2529  font-size: 40px;2530  line-height: 0.95;2531  caret-color: var(--peach-accent);2532}2533.peach-new-name-input::placeholder { color: var(--peach-t2); }2534.peach-new-field-input {2535  background: transparent;2536  border: none;2537  outline: none;2538  flex: 1;2539  min-width: 0;2540  caret-color: var(--peach-accent);2541}2542.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }25432544/* ── Canary card ── */2545.peach-canary-card {2546  border: 1px solid rgba(217, 160, 48, 0.2);2547  background: rgba(217, 160, 48, 0.03);2548  border-radius: 8px;2549  padding: 12px;2550}25512552.peach-canary-settings-header {2553  display: flex;2554  align-items: center;2555  justify-content: space-between;2556  cursor: pointer;2557  user-select: none;2558}25592560.peach-canary-card .peach-label {2561  color: rgba(217, 160, 48, 0.85);2562}25632564.peach-canary-card .peach-new-field-input {2565  border-color: rgba(217, 160, 48, 0.25);2566}25672568.peach-canary-card .peach-new-field-input:focus {2569  border-color: rgba(217, 160, 48, 0.5);2570}25712572.peach-canary-body {2573  margin-top: 12px;2574  display: flex;2575  flex-direction: column;2576  gap: 10px;2577}25782579.peach-canary-explainer {2580  display: flex;2581  gap: 10px;2582  padding: 10px 12px;2583  border-radius: 10px;2584  background: rgba(217, 160, 48, 0.06);2585  border: 1px solid rgba(217, 160, 48, 0.22);2586  margin-bottom: 4px;2587}25882589.peach-canary-explainer-icon {2590  font-size: 1rem;2591  flex-shrink: 0;2592  line-height: 1.2;2593}25942595.peach-canary-explainer-title {2596  font-family: var(--font-ui);2597  font-size: 0.6875rem;2598  font-weight: 500;2599  color: rgba(217, 160, 48, 0.9);2600  margin: 0 0 3px;2601}26022603.peach-canary-explainer-copy {2604  font-family: var(--font-ui);2605  font-size: 0.625rem;2606  color: var(--peach-t2);2607  line-height: 1.55;2608  margin: 0;2609}26102611.peach-canary-hint {2612  font-size: 0.625rem;2613  color: var(--peach-t2);2614  font-family: Inter, system-ui, sans-serif;2615  line-height: 1.5;2616  margin-top: 4px;2617}26182619.peach-canary-actions-row {2620  display: flex;2621  align-items: center;2622  gap: 8px;2623}26242625.peach-canary-test-btn {2626  border-color: rgba(217, 160, 48, 0.3);2627  color: rgba(217, 160, 48, 0.85);2628}26292630.peach-canary-test-result {2631  font-size: 0.625rem;2632  font-family: Inter, system-ui, sans-serif;2633}26342635.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2636.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }26372638.peach-canary-badge {2639  display: flex;2640  position: relative;2641  z-index: 1;2642  align-items: center;2643  gap: 5px;2644  padding: 4px 10px;2645  background: rgba(217, 160, 48, 0.12);2646  border: 1px solid rgba(217, 160, 48, 0.35);2647  border-radius: 6px;2648  margin-bottom: 6px;2649  width: fit-content;2650}26512652.peach-canary-badge-label {2653  font-size: 0.625rem;2654  letter-spacing: 0.06em;2655  color: rgba(217, 160, 48, 0.9);2656  font-family: var(--font-ui);2657  text-transform: uppercase;2658}26592660.peach-canary-badge-icon {2661  font-size: 0.6875rem;2662}26632664.peach-canary-suppress-row {2665  display: flex;2666  align-items: center;2667  gap: 8px;2668  padding: 6px 10px;2669  background: rgba(217, 160, 48, 0.08);2670  border-radius: 6px;2671  margin-bottom: 8px;2672}26732674.peach-canary-suppress-label {2675  font-size: 0.6875rem;2676  color: rgba(217, 160, 48, 0.85);2677  cursor: pointer;2678  font-family: var(--font-ui);2679  letter-spacing: 0.04em;2680}26812682.peach-regen-panel {2683  position: relative;2684  z-index: 1;2685  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2686  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2687  border-radius: 8px;2688  padding: 12px;2689  margin-bottom: 8px;2690}26912692.peach-regen-panel-header {2693  display: flex;2694  align-items: center;2695  justify-content: space-between;2696  margin-bottom: 10px;2697}26982699.peach-regen-panel-title {2700  font-size: 0.6875rem;2701  font-weight: 600;2702  letter-spacing: 0.06em;2703  text-transform: uppercase;2704  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2705}27062707.peach-regen-output {2708  background: rgba(0, 0, 0, 0.2);2709  border-radius: 6px;2710  padding: 10px;2711  margin-bottom: 10px;2712  font-family: var(--font-mono);2713  font-size: 0.8125rem;2714  word-break: break-all;2715  color: var(--peach-t1);2716}27172718.peach-regen-actions {2719  display: flex;2720  gap: 6px;2721}27222723.peach-regen-actions--spaced {2724  margin-bottom: 8px;2725}27262727.peach-regen-action-grow {2728  flex: 1;2729}27302731.peach-regen-copy-btn {2732  padding: 0 8px;2733}27342735.peach-regen-success {2736  position: relative;2737  z-index: 1;2738  background: rgba(40, 180, 80, 0.1);2739  border: 1px solid rgba(40, 180, 80, 0.3);2740  border-radius: 8px;2741  padding: 10px 12px;2742  margin-bottom: 8px;2743  display: flex;2744  align-items: center;2745  gap: 8px;2746  font-size: 0.6875rem;2747  color: rgba(40, 180, 80, 0.9);2748}27492750/* ── Note editor overlay ── */2751.peach-note-editor {2752  position: absolute;2753  inset: 0;2754  z-index: 200;2755  display: flex;2756  flex-direction: column;2757  background:2758    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2759    var(--peach-bg);2760  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2761}27622763.peach-note-editor-header {2764  display: flex;2765  align-items: center;2766  gap: 10px;2767  padding: 14px 16px 10px;2768  border-bottom: 1px solid var(--peach-t3);2769  flex-shrink: 0;2770}27712772.peach-note-editor-back {2773  background: transparent;2774  border: none;2775  cursor: pointer;2776  color: var(--peach-t2);2777  padding: 4px 6px;2778  border-radius: 6px;2779  display: flex;2780  align-items: center;2781  transition: color 120ms ease, background 120ms ease;2782  flex-shrink: 0;2783}2784.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }27852786.peach-note-editor-label {2787  flex: 1;2788  font-family: var(--font-display);2789  font-style: italic;2790  font-size: 0.9375rem;2791  color: var(--peach-t1);2792  letter-spacing: 0.02em;2793}27942795.peach-note-editor-save-btn {2796  background: transparent;2797  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2798  border-radius: 8px;2799  color: var(--peach-accent);2800  font-family: "IBM Plex Mono", monospace;2801  font-size: 0.625rem;2802  letter-spacing: 0.06em;2803  text-transform: uppercase;2804  padding: 3px 10px;2805  cursor: pointer;2806  transition: background 120ms ease, border-color 120ms ease;2807}2808.peach-note-editor-save-btn:hover:not(:disabled) {2809  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2810  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2811}2812.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }28132814.peach-note-toolbar {2815  display: flex;2816  align-items: center;2817  gap: 3px;2818  padding: 6px 14px 5px;2819  border-bottom: 1px solid var(--peach-t3);2820  flex-shrink: 0;2821}28222823.peach-note-tool-btn {2824  background: transparent;2825  border: 1px solid transparent;2826  border-radius: 5px;2827  color: var(--peach-t2);2828  font-family: "IBM Plex Mono", monospace;2829  font-size: 0.625rem;2830  letter-spacing: 0.04em;2831  padding: 2px 8px;2832  cursor: pointer;2833  line-height: 1.6;2834  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2835}2836.peach-note-tool-btn:hover {2837  background: var(--peach-t4);2838  color: var(--peach-t0);2839  border-color: var(--peach-t3);2840}28412842.peach-note-tool-icon {2843  padding: 3px 7px;2844  display: inline-flex;2845  align-items: center;2846  justify-content: center;2847}28482849.peach-note-tool-divider {2850  width: 1px;2851  height: 14px;2852  background: var(--peach-t3);2853  margin: 0 4px;2854  flex-shrink: 0;2855}28562857.peach-note-editor-body {2858  flex: 1;2859  overflow-y: auto;2860  padding: 16px 20px 20px;2861  outline: none;2862  font-family: var(--font-display);2863  font-size: 1rem;2864  line-height: 1.75;2865  color: var(--peach-t0);2866  scrollbar-width: none;2867  word-break: break-word;2868}2869.peach-note-editor-body:empty::before {2870  content: "write your note…";2871  color: var(--peach-t3);2872  font-style: italic;2873  pointer-events: none;2874}28752876/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2877.peach-note-editor-inline {2878  display: flex;2879  flex-direction: column;2880  flex: 1;2881  min-height: 0;2882}2883.peach-note-editor-body--inline {2884  flex: 1;2885  min-height: 0;2886  font-size: 0.9375rem;2887  padding: 10px 20px 14px;2888}28892890/* Full-width toolbar row inside the body (Add.tsx note type).2891   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */2892.peach-note-toolbar-body {2893  display: flex;2894  align-items: center;2895  gap: 3px;2896  padding: 5px 20px 4px;2897  margin: 2px -20px 0;2898  border-bottom: 1px solid var(--peach-t3);2899  flex-shrink: 0;2900}29012902/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2903   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2904   and .peach-note-tool-divider button-level styles. */2905.peach-note-toolbar-inline {2906  display: flex;2907  align-items: center;2908  gap: 3px;2909  margin-left: auto;2910  padding-left: 10px;2911  border-left: 1px solid var(--peach-t3);2912  min-height: 22px;2913}29142915/* Entry.tsx toolbar row (no tabs, toolbar only) */2916.peach-entry-note-toolbar-row {2917  display: flex;2918  align-items: center;2919  margin: 4px 0 6px;2920  position: relative;2921  z-index: 1;2922}2923.peach-entry-note-toolbar-row .peach-note-toolbar-inline {2924  border-left: none;2925  padding-left: 0;2926  margin-left: 0;2927}29282929/* Note body — fills available vertical space in Add.tsx and Entry.tsx */2930.peach-note-body {2931  display: flex;2932  flex-direction: column;2933  flex: 1;2934  min-height: 0;2935  margin: 4px 0 0;2936}2937.peach-entry-body--new .peach-note-body {2938  margin: 8px -20px 0;2939}29402941/* Add.tsx body is a grid by default; swap to a flex column when a note is2942   active so the note body can stretch and pin the tags row to the bottom. */2943.peach-entry-body--new:has(.peach-note-body) {2944  display: flex;2945  flex-direction: column;2946}29472948/* Rich content element styles (editor + display) */2949.peach-note-editor-body h2,2950.peach-note-content h2 {2951  font-family: var(--font-display);2952  font-size: 20px;2953  font-weight: 600;2954  font-style: italic;2955  color: var(--peach-t0);2956  margin: 6px 0 2px;2957  line-height: 1.3;2958}2959.peach-note-editor-body ul,2960.peach-note-content ul {2961  padding-left: 18px;2962  margin: 3px 0;2963  list-style: disc;2964}2965.peach-note-editor-body ol,2966.peach-note-content ol {2967  padding-left: 18px;2968  margin: 3px 0;2969  list-style: decimal;2970}2971.peach-note-editor-body li,2972.peach-note-content li { margin: 2px 0; }2973.peach-note-editor-body hr,2974.peach-note-content hr {2975  border: none;2976  border-top: 1px solid var(--peach-t3);2977  margin: 10px 0;2978}29792980/* font size elements from execCommand */2981.peach-note-editor-body font[size="1"],2982.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }2983.peach-note-editor-body font[size="2"],2984.peach-note-content font[size="2"] { font-size: 0.8125rem; }2985.peach-note-editor-body font[size="3"],2986.peach-note-content font[size="3"] { font-size: 1rem; }2987.peach-note-editor-body font[size="4"],2988.peach-note-content font[size="4"] { font-size: 20px; }2989.peach-note-editor-body font[size="5"],2990.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }29912992/* bold / italic inside the editor and note display */2993.peach-note-editor-body b, .peach-note-editor-body strong,2994.peach-note-content b, .peach-note-content strong { font-weight: 700; }2995.peach-note-editor-body em, .peach-note-editor-body i,2996.peach-note-content em, .peach-note-content i { font-style: italic; }29972998/* note display — rendered HTML, no pre-wrap */2999.peach-note-content {3000  overflow: auto;3001  max-height: 340px;3002  word-break: break-word;3003}30043005/* ── Note textarea ── */3006.peach-note-textarea {3007  width: 100%;3008  min-height: 180px;3009  max-height: 280px;3010  resize: vertical;3011  background: var(--peach-t4);3012  border: 1px solid var(--peach-t3);3013  border-radius: 8px;3014  padding: 10px 12px;3015  font-family: "IBM Plex Mono", monospace;3016  font-size: 0.75rem;3017  line-height: 1.7;3018  color: var(--peach-t1);3019  outline: none;3020  transition: border-color 150ms ease;3021}30223023.peach-note-textarea:focus {3024  border-color: var(--peach-t2);3025}30263027.peach-note-char-count {3028  font-family: "IBM Plex Mono", monospace;3029  font-size: 0.5625rem;3030  color: var(--peach-t3);3031  text-align: right;3032  margin-top: 4px;3033  letter-spacing: 0.1em;3034}30353036/* ── Field input baseline ── */3037.peach-new-field-input {3038  width: 100%;3039  background: transparent;3040  border: none;3041  border-bottom: 1px solid var(--peach-t3);3042  padding: 4px 0;3043  color: var(--peach-t1);3044  font-family: "IBM Plex Mono", monospace;3045  font-size: 0.8125rem;3046  outline: none;3047  transition: border-color 150ms ease;3048}30493050.peach-new-field-input:focus {3051  border-bottom-color: var(--peach-t0);3052  color: var(--peach-t0);3053}30543055.peach-new-name-input {3056  width: 100%;3057  background: transparent;3058  border: none;3059  border-bottom: 1px solid var(--peach-t3);3060  padding: 6px 0;3061  font-family: var(--font-display);3062  font-style: italic;3063  font-size: 28px;3064  color: var(--peach-t0);3065  outline: none;3066  transition: border-color 150ms ease;3067}30683069.peach-new-name-input:focus {3070  border-bottom-color: var(--peach-t1);3071}30723073.peach-new-name-input::placeholder {3074  color: var(--peach-t2);3075  font-style: italic;3076}30773078.peach-new-field-input::placeholder {3079  color: var(--peach-t3);3080}30813082/* ── Demo entrance animation ── */3083#hd-shell {3084  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3085}3086@keyframes hd-shell-enter {3087  from { opacity: 0; transform: scale(0.96) translateY(16px); }3088  to   { opacity: 1; transform: scale(1) translateY(0); }3089}30903091/* ── Keyframes ── */3092@keyframes peach-char-enter {3093  from { opacity: 0; transform: translateY(0.22em); }3094  to   { opacity: 1; transform: translateY(0); }3095}3096@keyframes peach-content-enter {3097  from { opacity: 0.96; transform: translateY(4px); }3098  to   { opacity: 1; transform: translateY(0); }3099}3100@keyframes peach-content-exit {3101  from { opacity: 1; transform: translateY(0); }3102  to   { opacity: 0.92; transform: translateY(-3px); }3103}3104@keyframes peach-screen-enter {3105  from { opacity: 0; transform: translateY(14px); }3106  to   { opacity: 1; transform: translateY(0); }3107}3108@keyframes peach-shell-fade-in {3109  from { opacity: 0; }3110  to   { opacity: 1; }3111}3112@keyframes peach-veil-in {3113  from { opacity: 0; }3114  to   { opacity: 1; }3115}3116@keyframes peach-lock-settle {3117  0%   { transform: scale(0.9); }3118  65%  { transform: scale(1.08); }3119  100% { transform: scale(1); }3120}3121@keyframes peach-copy-confirm {3122  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3123  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); }3124}3125@keyframes peach-copy-retreat {3126  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); }3127  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3128}3129@keyframes peach-copy-flood {3130  from { opacity: 0; transform: scaleX(0.15); }3131  to   { opacity: 1; transform: scaleX(1); }3132}3133@keyframes peach-copy-icon-settle {3134  from  { transform: scale(0.84); }3135  70%   { transform: scale(1.08); }3136  to    { transform: scale(1); }3137}3138@keyframes peach-copy-sheen-retreat {3139  from { opacity: 1; transform: scaleX(1); }3140  to   { opacity: 0; transform: scaleX(0.15); }3141}3142@keyframes peach-copy-drain {3143  from { width: 100%; }3144  to   { width: 0; }3145}3146@keyframes peach-shake {3147  0%, 100% { transform: translateX(0); }3148  20%      { transform: translateX(-6px); }3149  40%      { transform: translateX(6px); }3150  60%      { transform: translateX(-4px); }3151  80%      { transform: translateX(4px); }3152}31533154@keyframes pip-pulse {3155  0% { transform: scale(1); }3156  40% { transform: scale(2.2); }3157  100% { transform: scale(1); }3158}315931603161/* ── Password generator ── */3162.peach-pwgen-body {3163  flex: 1; overflow-y: auto;3164  display: flex; flex-direction: column;3165}3166.peach-policy-badge {3167  display: flex; align-items: center;3168  padding: 6px 20px 0;3169  font-size: 0.625rem; font-family: Inter, sans-serif;3170  color: var(--peach-t2); letter-spacing: 0.04em;3171}3172.peach-pwgen-display {3173  padding: 14px 20px 12px;3174  border-bottom: 1px solid var(--peach-t3);3175  display: flex; align-items: flex-start; gap: 10px;3176}3177.peach-pwgen-display-row {3178  display: flex;3179  align-items: flex-start;3180  gap: 8px;3181  padding-bottom: 8px;3182  border-bottom: 1px solid var(--peach-t3);3183}3184.peach-pwgen-output {3185  flex: 1; min-width: 0; margin: 0;3186  font-family: "IBM Plex Mono", monospace;3187  font-size: 0.8125rem; color: var(--peach-t0);3188  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3189  white-space: normal;3190  padding: 10px 12px;3191  background: var(--peach-t4);3192  border-radius: 6px;3193  min-height: 36px;3194}3195.peach-pwgen-output-display {3196  flex: 1;3197  min-width: 0;3198  margin: 0;3199  font-family: var(--font-display);3200  font-style: italic;3201  font-weight: 300;3202  font-size: 32px;3203  line-height: 1.05;3204  color: var(--peach-t0);3205  word-break: break-all;3206  overflow-wrap: break-word;3207  white-space: normal;3208  letter-spacing: 0.02em;3209}3210.peach-pwgen-display-actions {3211  display: flex;3212  flex-direction: column;3213  gap: 4px;3214  flex-shrink: 0;3215  margin-top: 2px;3216}3217.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3218.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3219.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3220.peach-pwgen-len-num {3221  font-family: "IBM Plex Mono", monospace;3222  font-size: 0.75rem; color: var(--peach-accent);3223}3224.peach-pwgen-len-num--edit {3225  cursor: text;3226  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3227}3228.peach-pwgen-len-input {3229  font-family: "IBM Plex Mono", monospace;3230  font-size: 0.75rem;3231  color: var(--peach-accent);3232  background: transparent;3233  border: none;3234  border-bottom: 1px solid var(--peach-accent);3235  outline: none;3236  width: 32px;3237  text-align: right;3238  padding: 0;3239}3240.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3241.peach-pwgen-toggles { display: flex; flex-direction: column; }3242.peach-pwgen-charset-pills {3243  display: flex;3244  gap: 6px;3245  flex-wrap: wrap;3246}3247.peach-pwgen-pill {3248  padding: 4px 11px;3249  border-radius: 999px;3250  border: 1px solid var(--peach-t3);3251  background: transparent;3252  color: var(--peach-t2);3253  font-family: "IBM Plex Mono", monospace;3254  font-size: 0.5625rem;3255  letter-spacing: 0.08em;3256  cursor: pointer;3257  transition: all 150ms ease;3258}3259.peach-pwgen-pill.is-on {3260  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3261  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3262  color: var(--peach-accent);3263}3264.peach-pwgen-pill:not(.is-on):hover {3265  color: var(--peach-t1);3266  border-color: var(--peach-t2);3267}3268.peach-pwgen-use-btn {3269  width: 100%;3270  min-height: 34px;3271  border-radius: 8px;3272  margin-top: 2px;3273}3274.peach-generator-constraint-note {3275  font-family: 'IBM Plex Mono', monospace;3276  font-size: 10px;3277  color: var(--peach-t3);3278  letter-spacing: 0.04em;3279  margin: 0;3280  transition: opacity 200ms ease;3281}3282.peach-pwgen-toggle-row {3283  display: flex; align-items: center; justify-content: space-between;3284  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3285}3286.peach-pwgen-toggle-row:last-child { border-bottom: none; }3287.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }32883289.peach-screen-prelock {3290  z-index: 10;3291}32923293.prelock-form {3294  display: grid;3295  gap: 12px;3296}32973298/* Peach popup should not expose native scrollbars on internal panels. */3299.peach-settings-body,3300.peach-new-body,3301.peach-pwgen-body,3302.lock-screen,3303.peach-import-preview {3304  scrollbar-width: none;3305  -ms-overflow-style: none;3306  overscroll-behavior: contain;3307}3308.peach-settings-body::-webkit-scrollbar,3309.peach-new-body::-webkit-scrollbar,3310.peach-pwgen-body::-webkit-scrollbar,3311.lock-screen::-webkit-scrollbar,3312.peach-import-preview::-webkit-scrollbar {3313  width: 0;3314  height: 0;3315  display: none;3316}33173318.lock-screen {3319  height: 100%;3320  min-height: 100%;3321  overflow-y: auto;3322  padding: 18px 18px 16px;3323  gap: 14px;3324  grid-template-rows: auto auto auto 1fr auto;3325  align-content: stretch;3326  position: relative;3327  isolation: isolate;3328}3329.peach-screen.lock-screen--vault-stage {3330  display: flex;3331  flex-direction: column;3332  justify-content: flex-start;3333  gap: 18px;3334  padding: 20px 18px 18px;3335  overflow: hidden;3336}3337.peach-screen.lock-screen--vault-stage .peach-lock-panel {3338  margin-top: 0;3339}3340.lock-screen--onboarding {3341  display: flex;3342  flex-direction: column;3343  gap: 12px;3344  justify-content: flex-start;3345}33463347.lock-screen::before {3348  content: "";3349  position: absolute;3350  inset: 12px 18px auto auto;3351  width: 160px;3352  height: 160px;3353  border-radius: 999px;3354  background:3355    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%);3356  filter: blur(6px);3357  opacity: 0.7;3358  pointer-events: none;3359  z-index: 0;3360}33613362.peach-lock-rune-string {3363  flex: 1;3364  display: flex;3365  align-items: center;3366  justify-content: center;3367  gap: 6px;3368  font-family: PeachScript, monospace;3369  font-size: 0.8125rem;3370  letter-spacing: 0.05em;3371  pointer-events: none;3372  user-select: none;3373  position: relative;3374  z-index: 1;3375}33763377.peach-lock-rune-string span {3378  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3379  text-shadow:3380    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3381    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3382  transition: color 0.9s ease, text-shadow 0.9s ease;3383}33843385.peach-lock-rune-string span.is-glowing {3386  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3387  text-shadow:3388    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3389    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3390}33913392.lock-screen-header {3393  display: flex;3394  align-items: center;3395  justify-content: space-between;3396  position: relative;3397  z-index: 1;3398}33993400.lock-password-input.shake {3401  animation: peach-shake 300ms ease-in-out;3402}34033404.peach-hint-error {3405  color: rgba(220, 80, 60, 0.92);3406}34073408.peach-onboarding-headline {3409  margin: 0;3410  font-family: var(--font-display);3411  font-size: 35px;3412  line-height: 0.88;3413  font-style: italic;3414  font-weight: 400;3415  max-width: 252px;3416}34173418.peach-lock-copy {3419  display: grid;3420  gap: 8px;3421  position: relative;3422  z-index: 1;3423}34243425.peach-lock-copy--onboarding {3426  gap: 10px;3427}34283429.peach-lock-hero {3430  position: relative;3431  z-index: 1;3432  display: grid;3433  gap: 8px;3434  min-height: 0;3435  padding: 4px 2px 0;3436  border: none;3437  border-radius: 0;3438  background: transparent;3439  box-shadow: none;3440}3441.peach-lock-hero-art {3442  position: absolute;3443  right: -8px;3444  top: -6px;3445  width: 120px;3446  height: 120px;3447  display: flex;3448  align-items: center;3449  justify-content: center;3450  pointer-events: none;3451  opacity: 0.12;3452  filter: saturate(0.9);3453}3454.peach-lock-hero-mark {3455  width: 100%;3456  height: 100%;3457}3458/* Peach body stays brand-peach across every accent — we don't want a3459   green or blue peach when sage/sky is selected. Leaf + stem keep the3460   sage tint because a real peach has a sage leaf. */3461.peach-lock-hero-mark path:nth-child(2),3462.peach-lock-hero-mark path:nth-child(3) {3463  stroke: rgba(123, 144, 96, 0.88);3464  fill: rgba(123, 144, 96, 0.88);3465}3466.peach-lock-hero > *:not(.peach-lock-hero-art) {3467  position: relative;3468  z-index: 1;3469}34703471.peach-lock-eyebrow {3472  display: inline-flex;3473  align-items: center;3474  width: fit-content;3475  padding: 4px 9px;3476  border-radius: 999px;3477  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3478  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3479  color: var(--peach-t0);3480  font-family: "IBM Plex Mono", monospace;3481  font-size: 0.5rem;3482  letter-spacing: 0.18em;3483  text-transform: uppercase;3484}34853486.peach-lock-label-row {3487  display: flex;3488  align-items: center;3489  justify-content: space-between;3490  margin-bottom: 0;3491}34923493.peach-lock-reveal-btn {3494  display: inline-flex;3495  align-items: center;3496  gap: 4px;3497  background: none;3498  border: none;3499  cursor: pointer;3500  font-family: "IBM Plex Mono", monospace;3501  font-size: 0.5625rem;3502  letter-spacing: 0.06em;3503  color: var(--peach-t2);3504  padding: 2px 0;3505  transition: color 150ms ease;3506}35073508.peach-lock-reveal-btn:hover {3509  color: var(--peach-t1);3510}35113512.peach-lock-warning {3513  color: rgba(220, 80, 60, 0.85) !important;3514  line-height: 1.5;3515}35163517.peach-onboarding-cards {3518  display: grid;3519  gap: 8px;3520  position: relative;3521  z-index: 1;3522}35233524.peach-lock-panel {3525  position: relative;3526  z-index: 1;3527  display: grid;3528  gap: 9px;3529  padding: 14px 16px 15px;3530  border-radius: 18px;3531  border: 1px solid var(--peach-t3);3532  background:3533    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3534  box-shadow:3535    inset 0 1px 0 rgba(240, 232, 216, 0.04),3536    0 12px 28px rgba(0, 0, 0, 0.12);3537}35383539/* Glass surface — lock panel and settings groups */3540.peach-glass {3541  background: rgba(26, 20, 16, 0.65);3542  border: 1px solid rgba(255, 255, 255, 0.08);3543  border-radius: 12px;3544  backdrop-filter: blur(12px) saturate(1.4);3545  -webkit-backdrop-filter: blur(12px) saturate(1.4);3546}35473548@supports not (backdrop-filter: blur(1px)) {3549  .peach-glass {3550    background: rgba(26, 20, 16, 0.92);3551    border: 1px solid rgba(255, 255, 255, 0.10);3552    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3553  }3554}35553556.light .peach-glass,3557[data-theme="light"] .peach-glass {3558  background: rgba(206, 196, 186, 0.70);3559  border: 1px solid rgba(26, 18, 8, 0.10);3560  backdrop-filter: blur(12px) saturate(1.2);3561  -webkit-backdrop-filter: blur(12px) saturate(1.2);3562}35633564@supports not (backdrop-filter: blur(1px)) {3565  .light .peach-glass,3566  [data-theme="light"] .peach-glass {3567    background: rgba(206, 196, 186, 0.95);3568    border: 1px solid rgba(26, 18, 8, 0.12);3569  }3570}35713572/* Lock panel keeps its own border-radius over the generic glass token */3573.peach-lock-panel.peach-glass {3574  border-radius: 18px;3575  background: rgba(26, 20, 16, 0.65);3576  border: 1px solid rgba(255, 255, 255, 0.08);3577  box-shadow:3578    inset 0 1px 0 rgba(255, 255, 255, 0.05),3579    0 12px 28px rgba(0, 0, 0, 0.3);3580}35813582.light .peach-lock-panel.peach-glass,3583[data-theme="light"] .peach-lock-panel.peach-glass {3584  background: rgba(196, 188, 181, 0.78);3585  border: 1px solid rgba(26, 18, 8, 0.12);3586  box-shadow:3587    inset 0 1px 0 rgba(255, 255, 255, 0.4),3588    0 8px 24px rgba(80, 56, 32, 0.20);3589}35903591@supports not (backdrop-filter: blur(1px)) {3592  .peach-lock-panel.peach-glass {3593    background: rgba(26, 20, 16, 0.92);3594    box-shadow:3595      inset 0 1px 0 rgba(255, 255, 255, 0.05),3596      0 12px 28px rgba(0, 0, 0, 0.4);3597  }3598  .light .peach-lock-panel.peach-glass,3599  [data-theme="light"] .peach-lock-panel.peach-glass {3600    background: rgba(196, 188, 181, 0.97);3601  }3602}36033604.peach-lock-panel--secondary {3605  gap: 12px;3606}36073608.peach-lock-panel-header {3609  display: flex;3610  align-items: baseline;3611  justify-content: space-between;3612  gap: 12px;3613}36143615.peach-lock-option-grid {3616  display: grid;3617  gap: 10px;3618}36193620.peach-lock-option {3621  width: 100%;3622  display: grid;3623  gap: 6px;3624  padding: 14px 15px;3625  border-radius: 16px;3626  border: 1px solid rgba(240, 232, 216, 0.08);3627  background: rgba(240, 232, 216, 0.02);3628  color: var(--peach-t0);3629  text-align: left;3630  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3631}36323633.peach-lock-option:hover {3634  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3635  background: rgba(240, 232, 216, 0.04);3636  transform: translateY(-1px);3637}36383639.peach-lock-option-title {3640  font-size: 0.75rem;3641  color: var(--peach-t0);3642}36433644.peach-lock-option-copy {3645  font-size: 0.6875rem;3646  line-height: 1.55;3647  color: var(--peach-t1);3648}36493650.peach-onboarding-stack {3651  margin-top: 2px;3652}3653.peach-lock-panel-footer {3654  display: grid;3655  gap: 6px;3656  margin-top: 2px;3657  padding-top: 10px;3658  border-top: 1px solid rgba(240, 232, 216, 0.06);3659}36603661/* ── Restore tab view ─────────────────────────────────────────────────────3662   Tab-based restore screen replacing the old three-card picker. */36633664.peach-restore-tabview {3665  overflow: hidden;3666}36673668.peach-restore-tabcard {3669  flex: 1;3670  display: flex;3671  flex-direction: column;3672  gap: 0;3673  padding: 0;3674  overflow: hidden;3675  cursor: default;3676  user-select: none;3677  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3678}36793680/* ── Tab selector ─────────────────────────────────────────────────────── */36813682.peach-restore-tabs {3683  display: flex;3684  justify-content: space-around;3685  padding: 14px 10px 10px;3686  border-bottom: 1px solid var(--peach-t3);3687  gap: 2px;3688  overflow: hidden;3689  scrollbar-width: none;3690}3691.peach-restore-tabs::-webkit-scrollbar { display: none; }36923693.peach-restore-tab {3694  background: none;3695  border: none;3696  cursor: pointer;3697  padding: 3px 2px;3698  font-family: 'Cormorant Garamond', Georgia, serif;3699  font-style: italic;3700  font-size: 11px;3701  color: var(--peach-t2);3702  transition: color 150ms ease, text-shadow 150ms ease;3703  flex: 1;3704  min-width: 0;3705  text-align: center;3706  white-space: nowrap;3707  overflow: hidden;3708  text-overflow: ellipsis;3709}3710.peach-restore-tab:hover {3711  color: var(--peach-accent);3712  text-shadow:3713    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3714    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3715}3716.peach-restore-tab.is-active {3717  color: var(--peach-accent);3718  text-shadow:3719    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3720    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3721}37223723/* ── Content area ─────────────────────────────────────────────────────── */37243725.peach-restore-content {3726  padding: 16px 16px 14px;3727  display: flex;3728  flex-direction: column;3729  gap: 8px;3730  overflow: hidden;3731  scrollbar-width: none;3732  flex: 1;3733}3734.peach-restore-content::-webkit-scrollbar { display: none; }3735.peach-restore-content > * {3736  overflow: hidden;3737  scrollbar-width: none;3738}3739.peach-restore-content > *::-webkit-scrollbar { display: none; }37403741/* ── Shared tab inner layout ──────────────────────────────────────────── */37423743.peach-rt-symbols,3744.peach-rt-csv,3745.peach-rt-phone {3746  display: flex;3747  flex-direction: column;3748  gap: 8px;3749  overflow: hidden;3750}37513752.peach-rt-submit {3753  width: 100%;3754}37553756.peach-rt-error {3757  margin: 0;3758  font-size: 0.6875rem;3759  color: var(--peach-breach);3760  line-height: 1.4;3761}37623763/* ── PeachScript tab ──────────────────────────────────────────────────── */37643765.peach-restore-symbols-textarea {3766  font-family: 'PeachScript', monospace;3767  font-size: 13px;3768  line-height: 1.9;3769  letter-spacing: 0.1em;3770  word-break: break-all;3771  resize: none;3772  width: 100%;3773  min-height: 56px;3774  max-height: 72px;3775  overflow: hidden;3776  scrollbar-width: none;3777  -ms-overflow-style: none;3778  box-sizing: border-box;3779  padding: 6px 8px;3780  border-radius: 8px;3781  border: 1px solid var(--peach-t3);3782  background: rgba(240, 232, 216, 0.03);3783  color: var(--peach-t0);3784}3785.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3786.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }37873788.peach-restore-symbols-pass {3789  width: 100%;3790  box-sizing: border-box;3791  padding: 7px 10px;3792  border-radius: 8px;3793  border: 1px solid var(--peach-t3);3794  background: rgba(240, 232, 216, 0.03);3795  color: var(--peach-t0);3796  font-size: 0.8125rem;3797}3798.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }3799.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }38003801.peach-rt-divider {3802  text-align: center;3803  font-size: 0.6875rem;3804  color: var(--peach-t2);3805  font-style: italic;3806}38073808.peach-rt-file-label {3809  width: 100%;3810  justify-content: center;3811}38123813.peach-rt-anim-canvas {3814  width: 100%;3815  height: 180px;3816  border-radius: 10px;3817  overflow: hidden;3818  display: block;3819}38203821/* ── CSV tab ──────────────────────────────────────────────────────────── */38223823.peach-rt-csv-sources {3824  margin: 0;3825  font-size: 0.6875rem;3826  color: var(--peach-t2);3827  line-height: 1.5;3828  text-align: center;3829}38303831.peach-rt-csv-warning {3832  margin: 0;3833  font-family: "IBM Plex Mono", monospace;3834  font-size: 0.5625rem;3835  letter-spacing: 0.12em;3836  color: var(--peach-breach);3837  text-align: center;3838}38393840/* ── From Phone tab ───────────────────────────────────────────────────── */38413842.peach-rt-phone-code {3843  margin: 0;3844  text-align: center;3845  font-family: "IBM Plex Mono", monospace;3846  font-size: 22px;3847  letter-spacing: 0.18em;3848  color: var(--peach-t0);3849}38503851.peach-rt-phone-qr {3852  display: block;3853  width: 96px;3854  height: 96px;3855  margin: 0 auto;3856  border-radius: 6px;3857  image-rendering: pixelated;3858  overflow: hidden;3859}38603861.peach-rt-phone-hint {3862  margin: 0;3863  font-size: 0.6875rem;3864  color: var(--peach-t2);3865  line-height: 1.55;3866  text-align: center;3867}38683869/* ── Intro popup ──────────────────────────────────────────────────────── */38703871.peach-restore-intro-overlay {3872  position: absolute;3873  inset: 0;3874  z-index: 100;3875  display: flex;3876  align-items: center;3877  justify-content: center;3878  padding: 20px;3879  background: rgba(12, 10, 6, 0.7);3880  backdrop-filter: blur(4px);3881  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;3882}38833884.peach-restore-intro-card {3885  width: 100%;3886  display: flex;3887  flex-direction: column;3888  gap: 12px;3889  padding: 22px 20px 20px;3890  border-radius: 16px;3891  border: 1px solid var(--peach-t3);3892  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));3893  backdrop-filter: blur(4px);3894  -webkit-backdrop-filter: blur(4px);3895  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);3896}38973898.peach-restore-intro-headline {3899  margin: 0;3900  font-family: var(--font-display);3901  font-style: italic;3902  font-size: 20px;3903  font-weight: 400;3904  color: var(--peach-t0);3905}39063907.peach-restore-intro-body {3908  display: flex;3909  flex-direction: column;3910  gap: 8px;3911}3912.peach-restore-intro-body p {3913  margin: 0;3914  font-size: 0.75rem;3915  color: var(--peach-t1);3916  line-height: 1.5;3917}39183919.peach-restore-intro-btn {3920  width: 100%;3921  margin-top: 4px;3922}39233924/* Snapshot restore panel */3925.peach-snapshot-panel {3926  gap: 10px;3927  overflow-y: auto;3928  max-height: 340px;3929}3930.peach-snapshot-list {3931  display: flex;3932  flex-direction: column;3933  gap: 4px;3934}3935.peach-snapshot-row {3936  display: flex;3937  align-items: center;3938  justify-content: space-between;3939  width: 100%;3940  padding: 8px 10px;3941  border-radius: 8px;3942  border: 1px solid rgba(240, 232, 216, 0.07);3943  background: transparent;3944  cursor: pointer;3945  transition: border-color 120ms, background 120ms;3946  text-align: left;3947  gap: 8px;3948}3949.peach-snapshot-row:hover {3950  border-color: rgba(240, 232, 216, 0.14);3951  background: rgba(240, 232, 216, 0.03);3952}3953.peach-snapshot-row.is-selected {3954  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3955  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);3956}3957.peach-snapshot-time {3958  font-size: 11.5px;3959  color: var(--peach-t0);3960  flex: 1;3961}3962.peach-snapshot-count {3963  font-family: "IBM Plex Mono", monospace;3964  font-size: 0.625rem;3965  color: var(--peach-t2);3966  flex-shrink: 0;3967}3968.peach-snapshot-confirm {3969  display: flex;3970  flex-direction: column;3971  gap: 8px;3972  padding-top: 10px;3973  border-top: 1px solid rgba(240, 232, 216, 0.06);3974}3975.peach-snapshot-warning {3976  display: flex;3977  align-items: flex-start;3978  gap: 6px;3979  font-size: 10.5px;3980  color: rgba(220, 80, 60, 0.85);3981  line-height: 1.55;3982}3983.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }3984.peach-snapshot-confirm-row {3985  display: flex;3986  gap: 6px;3987  align-items: center;3988}3989.peach-snapshot-restore-btn {3990  width: 100%;3991}3992.peach-lock-hero--unlock .peach-lock-hero-art {3993  width: 112px;3994  height: 112px;3995  right: 0;3996  top: 2px;3997  opacity: 0.1;3998}39994000.peach-card {4001  border: 1px solid var(--peach-t3);4002  border-radius: 18px;4003  background:4004    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4005  box-shadow:4006    inset 0 0 0 1px var(--peach-border-accent),4007    inset 0 1px 0 rgba(240, 232, 216, 0.04),4008    0 12px 32px rgba(0, 0, 0, 0.14);4009  overflow: hidden;4010}40114012.peach-card-active {4013  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4014  box-shadow:4015    inset 0 1px 0 rgba(240, 232, 216, 0.05),4016    0 16px 38px rgba(0, 0, 0, 0.18),4017    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4018}40194020.peach-card-disabled {4021  opacity: 0.72;4022}40234024.peach-card-header {4025  width: 100%;4026  padding: 13px 16px 11px;4027  background: transparent;4028  color: var(--peach-t0);4029  display: flex;4030  justify-content: space-between;4031  align-items: center;4032  text-align: left;4033  font-size: 0.75rem;4034}40354036.peach-card-body {4037  padding: 0 16px 16px;4038  display: grid;4039  gap: 9px;4040}40414042.peach-card-tag {4043  color: var(--peach-t2);4044  font-family: "IBM Plex Mono", monospace;4045  font-size: 0.5625rem;4046  letter-spacing: 0.12em;4047  text-transform: uppercase;4048}40494050.peach-empty-copy {4051  display: grid;4052  gap: 6px;4053  color: var(--peach-t1);4054  font-size: 0.8125rem;4055}40564057.peach-lock-submit {4058  width: 100%;4059  box-shadow:4060    0 1px 0 rgba(255,255,255,0.10) inset,4061    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4062    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4063    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4064}40654066.peach-lock-secondary {4067  width: 100%;4068  border-color: var(--peach-t3);4069  background: rgba(240, 232, 216, 0.02);4070}40714072.peach-lock-secondary:hover {4073  background: rgba(240, 232, 216, 0.04);4074}40754076.peach-lock-note {4077  max-width: none;4078  line-height: 1.55;4079  margin: 0;4080}40814082.peach-overlay-action {4083  font-size: 0.625rem;4084  padding: 4px 8px;4085  letter-spacing: 0.06em;4086  min-width: 44px;4087  text-align: center;4088}40894090.peach-overlay-spacer {4091  width: 32px;4092}40934094.peach-inline-action {4095  flex-shrink: 0;4096  font-size: 0.5625rem;4097  letter-spacing: 0.1em;4098  text-transform: uppercase;4099  padding: 4px 7px;4100}4101.peach-password-toggle-btn {4102  display: inline-flex;4103  align-items: center;4104  justify-content: center;4105  min-width: 30px;4106  min-height: 26px;4107  padding: 0 7px;4108  border: 1px solid var(--peach-t3);4109  border-radius: 999px;4110  background: rgba(240, 232, 216, 0.04);4111  color: var(--peach-t2);4112  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4113}4114.peach-password-toggle-btn:hover {4115  border-color: var(--peach-t2);4116  color: var(--peach-t0);4117  background: rgba(240, 232, 216, 0.06);4118}41194120.peach-new-textarea {4121  width: 100%;4122  min-height: 88px;4123  resize: vertical;4124  border: 0;4125  outline: none;4126  background: transparent;4127  color: var(--peach-t1);4128  font-family: "IBM Plex Mono", monospace;4129  font-size: 0.75rem;4130  line-height: 1.65;4131  caret-color: var(--peach-accent);4132}41334134.peach-new-textarea::placeholder {4135  color: var(--peach-t2);4136  opacity: 0.7;4137}41384139.peach-settings-actions {4140  display: grid;4141  gap: 8px;4142}41434144.peach-sync-section-label {4145  font-size: 0.6875rem;4146  color: var(--peach-t2);4147  text-transform: uppercase;4148  letter-spacing: 0.05em;4149}41504151.peach-sync-network-note {4152  margin: 0 0 6px;4153  font-size: 0.75rem;4154  color: var(--peach-t2);4155  line-height: 1.4;4156}41574158.peach-settings-row--tappable {4159  background: none;4160  border: none;4161  width: 100%;4162  text-align: left;4163  cursor: pointer;4164  color: var(--peach-t1);4165  font-size: 0.8125rem;4166}4167.peach-settings-row--tappable:hover {4168  color: var(--peach-t0);4169}41704171.peach-sync-pro-hint {4172  display: flex;4173  flex-direction: column;4174  align-items: flex-start;4175  gap: 8px;4176  padding: 12px 0 4px;4177}41784179.peach-sync-device-row {4180  display: flex;4181  justify-content: space-between;4182  align-items: center;4183  padding: 6px 0;4184  border-bottom: 1px solid var(--peach-t3);4185}41864187.peach-sync-device-info {4188  display: flex;4189  flex-direction: column;4190  gap: 2px;4191}41924193.peach-sync-device-name {4194  font-size: 0.8125rem;4195  color: var(--peach-t0);4196}41974198.peach-sync-device-meta {4199  font-size: 0.6875rem;4200  color: var(--peach-t2);4201}42024203.peach-sync-status-dot {4204  display: inline-block;4205  width: 8px;4206  height: 8px;4207  border-radius: 50%;4208  vertical-align: middle;4209}42104211.peach-sync-remove-btn {4212  color: var(--peach-breach);4213}42144215.peach-sync-advanced-row {4216  display: flex;4217  justify-content: space-between;4218  align-items: center;4219  padding: 6px 0;4220  gap: 12px;4221}42224223.peach-sync-advanced-info {4224  display: flex;4225  flex-direction: column;4226  gap: 2px;4227  flex: 1;4228}42294230.peach-sync-advanced-name {4231  font-size: 0.8125rem;4232  color: var(--peach-t0);4233}42344235.peach-sync-reset-confirm {4236  display: flex;4237  flex-direction: column;4238  gap: 8px;4239  padding: 10px;4240  border: 1px solid var(--peach-breach);4241  border-radius: 10px;4242  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4243}42444245.peach-sync-reset-confirm-headline {4246  font-size: 0.8125rem;4247  font-weight: 600;4248  color: var(--peach-t0);4249  margin: 0;4250}42514252.peach-sync-reset-confirm-body {4253  font-size: 0.75rem;4254  color: var(--peach-t1);4255  margin: 0;4256  line-height: 1.4;4257}42584259.peach-btn--danger {4260  background: var(--peach-breach);4261  color: #fff;4262  border-color: var(--peach-breach);4263}4264.peach-btn--danger:hover:not(:disabled) {4265  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4266}4267.peach-btn--danger:disabled {4268  opacity: 0.55;4269  cursor: not-allowed;4270}42714272.peach-sync-hero-icon {4273  color: var(--peach-t1);4274  opacity: 0.85;4275}42764277.peach-import-preview {4278  margin-bottom: 12px;4279  max-height: 152px;4280  overflow-y: auto;4281  border: 1px solid var(--peach-t3);4282  border-radius: 10px;4283  padding: 8px 10px;4284  display: grid;4285  gap: 8px;4286  background: rgba(240, 232, 216, 0.02);4287}42884289.peach-import-preview-row {4290  display: flex;4291  justify-content: space-between;4292  gap: 10px;4293  font-size: 0.6875rem;4294  color: var(--peach-t1);4295}42964297.peach-import-preview-title {4298  color: var(--peach-t0);4299  flex: 1;4300  min-width: 0;4301  overflow: hidden;4302  text-overflow: ellipsis;4303  white-space: nowrap;4304}43054306.peach-import-preview-meta {4307  color: var(--peach-t2);4308  flex-shrink: 0;4309  max-width: 42%;4310  overflow: hidden;4311  text-overflow: ellipsis;4312  white-space: nowrap;4313}43144315.peach-import-preview-more {4316  color: var(--peach-t2);4317  font-size: 0.625rem;4318}43194320.peach-restore-copy {4321  margin: 0;4322  color: var(--peach-t1);4323  font-size: 0.6875rem;4324  line-height: 1.6;4325}43264327.peach-restore-warning {4328  padding: 10px 12px;4329  border-radius: 12px;4330  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4331  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4332  color: var(--peach-t0);4333  font-size: 0.6875rem;4334  line-height: 1.55;4335}43364337.peach-provider-chips {4338  display: flex;4339  flex-wrap: wrap;4340  gap: 6px;4341}43424343.peach-provider-chip {4344  display: inline-flex;4345  align-items: center;4346  padding: 5px 8px;4347  border-radius: 999px;4348  border: 1px solid var(--peach-t3);4349  background: rgba(240, 232, 216, 0.02);4350  color: var(--peach-t1);4351  font-family: "IBM Plex Mono", monospace;4352  font-size: 0.5rem;4353  letter-spacing: 0.08em;4354  text-transform: uppercase;4355}43564357.peach-restore-file,4358.peach-restore-input {4359  width: 100%;4360  border-radius: 10px;4361  border: 1px solid var(--peach-t3);4362  background: var(--peach-s2);4363  color: var(--peach-t0);4364  font-size: 0.75rem;4365}43664367.peach-restore-file {4368  padding: 9px 10px;4369}43704371.peach-restore-file::file-selector-button {4372  margin-right: 10px;4373  padding: 7px 10px;4374  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4375  border-radius: 999px;4376  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4377  color: var(--peach-t0);4378  font-size: 0.625rem;4379  letter-spacing: 0.08em;4380  text-transform: uppercase;4381  cursor: pointer;4382}43834384.peach-restore-input {4385  padding: 10px 12px;4386}43874388.peach-auth-grid {4389  display: grid;4390  gap: 10px;4391}43924393.peach-import-summary {4394  color: var(--peach-t1);4395  font-size: 0.75rem;4396  line-height: 1.6;4397  margin-bottom: 12px;4398}43994400.peach-restore-error {4401  color: rgba(220, 80, 60, 0.95);4402  font-size: 0.75rem;4403  line-height: 1.55;4404}44054406.peach-passkey-card {4407  max-width: 400px;4408  margin: auto 16px;4409  align-self: center;4410  width: calc(100% - 32px);4411}44124413/* Center the approval card vertically inside the overlay-view (which sets4414 * flex-direction: column without justify-content). Without this, the card4415 * sits at the top with a tall empty band below — looks unfinished on the4416 * 320px popup. */4417.peach-overlay-view:has(.peach-passkey-card) {4418  justify-content: center;4419}44204421.peach-pro-badge {4422  padding: 2px 6px;4423  border-radius: 999px;4424  font-family: var(--font-ui);4425  font-size: 0.625rem;4426  letter-spacing: 0.08em;4427  text-transform: uppercase;4428  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4429  color: var(--peach-accent);4430}44314432/* ── Shortcuts rebind table ─────────────────────────────────── */4433.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4434.peach-shortcut-row {4435  display: flex;4436  align-items: center;4437  gap: 10px;4438  padding: 6px 0;4439}4440.peach-shortcut-row-label {4441  flex: 1;4442  font-size: 0.75rem;4443  color: var(--peach-t0);4444}4445.peach-shortcut-chip {4446  min-width: 64px;4447  padding: 4px 10px;4448  border-radius: 6px;4449  border: 1px solid var(--peach-t3);4450  background: var(--peach-input-bg, var(--surface-card));4451  color: var(--peach-t0);4452  font-family: var(--font-mono);4453  font-size: 0.6875rem;4454  letter-spacing: 0.04em;4455  cursor: pointer;4456  text-align: center;4457  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4458}4459.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4460.peach-shortcut-chip.is-custom {4461  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4462  color: var(--peach-accent);4463}4464.peach-shortcut-chip.is-capturing {4465  border-color: var(--peach-accent);4466  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4467  color: var(--peach-accent);4468  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4469}4470@keyframes peach-shortcut-capture-pulse {4471  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4472  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4473}4474.peach-shortcut-reset {4475  background: transparent;4476  border: none;4477  cursor: pointer;4478  color: var(--peach-t2);4479  padding: 4px 6px;4480  border-radius: 5px;4481  font-size: 0.875rem;4482  line-height: 1;4483  transition: color 120ms ease, background 120ms ease;4484}4485.peach-shortcut-reset:hover {4486  color: var(--peach-t0);4487  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4488}4489.peach-shortcuts-conflict {4490  margin: 4px 0 0;4491  padding: 8px 10px;4492  border-radius: 7px;4493  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4494  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4495  font-family: var(--font-mono);4496  font-size: 0.6875rem;4497  color: var(--peach-t0);4498}44994500/* ── Help dialog overlay (? to open) ────────────────────────── */4501.peach-shortcuts-help-backdrop {4502  position: fixed;4503  inset: 0;4504  background: rgba(0, 0, 0, 0.55);4505  backdrop-filter: blur(2px);4506  display: flex;4507  align-items: center;4508  justify-content: center;4509  z-index: 1000;4510  animation: peach-help-fade-in 140ms ease forwards;4511}4512@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4513.peach-shortcuts-help-card {4514  width: min(320px, 92vw);4515  max-height: 80vh;4516  overflow-y: auto;4517  border-radius: 14px;4518  border: 1px solid var(--peach-t3);4519  background: var(--peach-bg);4520  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4521  padding: 16px 18px 18px;4522  display: flex;4523  flex-direction: column;4524  gap: 12px;4525}4526.peach-shortcuts-help-head {4527  display: flex; align-items: center; justify-content: space-between;4528}4529.peach-shortcuts-help-head h3 {4530  margin: 0;4531  font-family: var(--font-display);4532  font-style: italic;4533  font-weight: 400;4534  font-size: 22px;4535  color: var(--peach-t0);4536}4537.peach-shortcuts-help-close {4538  background: transparent;4539  border: none;4540  color: var(--peach-t2);4541  cursor: pointer;4542  font-size: 0.875rem;4543  padding: 4px 8px;4544  border-radius: 5px;4545}4546.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4547.peach-shortcuts-help-body ul {4548  list-style: none; padding: 0; margin: 4px 0 12px;4549  display: grid; gap: 8px;4550}4551.peach-shortcuts-help-body li {4552  display: flex; align-items: center; justify-content: space-between; gap: 12px;4553  font-size: 0.75rem; color: var(--peach-t0);4554}4555.peach-shortcuts-help-body kbd {4556  font-family: var(--font-mono);4557  font-size: 0.6875rem;4558  padding: 3px 8px;4559  border-radius: 6px;4560  background: var(--surface-card);4561  border: 1px solid var(--peach-t3);4562  color: var(--peach-accent);4563  letter-spacing: 0.04em;4564}45654566/* ── Pro promo on Account screen ────────────────────────────── */4567.peach-pro-promo {4568  position: relative;4569  border-radius: 14px;4570  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4571  background:4572    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4573    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4574    var(--surface-card);4575  overflow: hidden;4576  margin-bottom: 14px;4577}4578.peach-pro-promo-glow {4579  position: absolute;4580  inset: -40% -20% auto auto;4581  width: 220px; height: 220px;4582  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4583  pointer-events: none;4584  filter: blur(8px);4585}4586.peach-pro-promo-inner {4587  position: relative;4588  padding: 18px 18px 16px;4589}4590.peach-pro-promo-title {4591  font-family: var(--font-display);4592  font-style: italic;4593  font-weight: 400;4594  font-size: 28px;4595  line-height: 1;4596  letter-spacing: -0.005em;4597  color: var(--peach-t0);4598  margin: 0 0 4px;4599}4600.peach-pro-promo-tagline {4601  font-family: var(--font-mono);4602  font-size: 0.625rem;4603  letter-spacing: 0.06em;4604  color: var(--peach-t2);4605  margin: 0 0 14px;4606}4607.peach-pro-promo-list {4608  list-style: none;4609  margin: 0 0 16px;4610  padding: 0;4611  display: grid;4612  gap: 9px;4613}4614.peach-pro-promo-list li {4615  display: flex;4616  align-items: flex-start;4617  gap: 9px;4618  font-size: 0.75rem;4619  color: var(--peach-t1);4620  line-height: 1.4;4621}4622.peach-pro-promo-list svg {4623  width: 14px;4624  height: 14px;4625  flex-shrink: 0;4626  color: var(--peach-accent);4627  margin-top: 2px;4628}4629.peach-pro-promo-list span {4630  color: var(--peach-t0);4631}4632.peach-pro-promo-cta {4633  width: 100%;4634  background: var(--peach-accent);4635  color: #fff;4636  border: none;4637  padding: 9px 12px;4638  border-radius: 9px;4639  font-size: 0.75rem;4640  font-weight: 500;4641  font-family: var(--font-ui);4642  letter-spacing: 0.02em;4643  text-decoration: none;4644  display: inline-flex;4645  align-items: center;4646  justify-content: center;4647  cursor: pointer;4648  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4649  box-shadow: 0 2px 16px var(--peach-glow);4650}4651.peach-pro-promo-cta:hover {4652  filter: brightness(1.07);4653  box-shadow: 0 4px 24px var(--peach-glow);4654  transform: translateY(-1px);4655}4656.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }46574658.peach-pro-or-divider {4659  display: flex;4660  align-items: center;4661  gap: 10px;4662  margin: 4px 0 12px;4663  font-family: var(--font-mono);4664  font-size: 0.625rem;4665  letter-spacing: 0.06em;4666  color: var(--peach-t2);4667  text-transform: uppercase;4668}4669.peach-pro-or-divider::before,4670.peach-pro-or-divider::after {4671  content: "";4672  flex: 1;4673  height: 1px;4674  background: var(--peach-t3);4675}46764677.peach-loading {4678  position: absolute;4679  inset: 0;4680  display: flex;4681  align-items: center;4682  justify-content: center;4683  background: var(--bg);4684  animation: peach-loading-pulse 1.2s ease-in-out infinite;4685}46864687@keyframes peach-loading-pulse {4688  0%, 100% { opacity: 0.6; }4689  50% { opacity: 1; }4690}46914692/* ── Health Dashboard ─────────────────────────────────────────────────── */4693.peach-health-body {4694  flex: 1;4695  overflow-y: auto;4696  display: flex;4697  flex-direction: column;4698  /* Hide the platform scrollbar — every other scrollable surface in the4699   * popup hides it; the Health view was the one outlier and it ruined the4700   * polish. Behavior unchanged, just no rail rendered. */4701  scrollbar-width: none;4702  -ms-overflow-style: none;4703}4704.peach-health-body::-webkit-scrollbar { display: none; }47054706/* Loading screen for the Vault Health view. The advanced report computation4707 * can run for a few seconds on a large vault — without a clear loading4708 * screen the surface looked broken (the entry view bleeds through the4709 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4710.peach-health-loading-screen {4711  flex: 1;4712  display: flex;4713  flex-direction: column;4714  align-items: center;4715  justify-content: center;4716  gap: 14px;4717  padding: 32px 28px;4718  text-align: center;4719}47204721.peach-health-loading-glyph {4722  width: 48px;4723  height: 48px;4724  display: flex;4725  align-items: center;4726  justify-content: center;4727  border-radius: 14px;4728  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4729  color: var(--peach-accent);4730}47314732.peach-health-loading-title {4733  margin: 0;4734  font-family: var(--font-display);4735  font-style: italic;4736  font-weight: 300;4737  font-size: 19px;4738  line-height: 1.2;4739  color: var(--peach-t0);4740}47414742.peach-health-loading-copy {4743  margin: 0;4744  max-width: 240px;4745  font-size: 0.75rem;4746  line-height: 1.55;4747  color: var(--peach-t2);4748}47494750.peach-health-loading-track {4751  width: 200px;4752  height: 3px;4753  margin-top: 6px;4754  border-radius: 999px;4755  background: rgba(240, 232, 216, 0.06);4756  overflow: hidden;4757}47584759.peach-health-loading-fill {4760  width: 40%;4761  height: 100%;4762  border-radius: inherit;4763  background: linear-gradient(4764    90deg,4765    transparent 0%,4766    var(--peach-accent) 50%,4767    transparent 100%4768  );4769  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4770}47714772@keyframes peach-health-loading-sweep {4773  0%   { transform: translateX(-100%); }4774  100% { transform: translateX(350%); }4775}47764777[data-motion="reduce"] .peach-health-loading-fill,4778[data-motion="reduce"] .peach-health-loading-glyph svg path {4779  animation: none;4780}47814782.peach-health-summary {4783  padding: 10px 16px 6px;4784  font-family: "IBM Plex Mono", monospace;4785  font-size: 0.6875rem;4786}4787.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4788.peach-health-summary-ok { color: var(--peach-t2); }47894790.peach-health-check-row {4791  padding: 0 16px 10px;4792}4793.peach-health-check-btn {4794  width: 100%;4795  display: flex;4796  align-items: center;4797  justify-content: center;4798}47994800.peach-health-sections {4801  flex: 1;4802  display: flex;4803  flex-direction: column;4804}48054806.peach-health-section {4807  border-bottom: 1px solid var(--peach-t3);4808}48094810.peach-health-section-header {4811  width: 100%;4812  display: flex;4813  align-items: center;4814  justify-content: space-between;4815  padding: 9px 16px;4816  background: transparent;4817  cursor: pointer;4818  color: var(--peach-t0);4819}48204821.peach-health-section-title-row {4822  display: flex;4823  align-items: center;4824  gap: 8px;4825}48264827.peach-health-count-badge {4828  display: inline-flex;4829  align-items: center;4830  justify-content: center;4831  min-width: 20px;4832  height: 18px;4833  padding: 0 5px;4834  border-radius: 999px;4835  background: rgba(220,80,60,0.15);4836  border: 1px solid rgba(220,80,60,0.25);4837  font-family: "IBM Plex Mono", monospace;4838  font-size: 0.5625rem;4839  color: rgba(220,80,60,0.9);4840}48414842.peach-health-section-title {4843  font-family: "IBM Plex Mono", monospace;4844  font-size: 0.6875rem;4845  text-transform: uppercase;4846  letter-spacing: 0.1em;4847  color: var(--peach-t1);4848}48494850.peach-health-chevron {4851  color: var(--peach-t2);4852  transition: transform 200ms ease;4853  flex-shrink: 0;4854}4855.peach-health-chevron.is-expanded {4856  transform: rotate(180deg);4857}48584859.peach-health-section-body {4860  padding: 0 16px 10px;4861  display: flex;4862  flex-direction: column;4863  gap: 4px;4864}48654866.peach-health-row {4867  display: flex;4868  align-items: flex-start;4869  justify-content: space-between;4870  gap: 8px;4871  padding: 6px 8px;4872  border-radius: 8px;4873  background: rgba(240,232,216,0.02);4874}48754876.peach-health-row-info {4877  flex: 1;4878  min-width: 0;4879  display: flex;4880  flex-direction: column;4881  gap: 2px;4882}48834884.peach-health-row-name {4885  font-family: var(--font-display);4886  font-size: 0.9375rem;4887  font-style: italic;4888  font-weight: 400;4889  color: var(--peach-t0);4890  white-space: nowrap;4891  overflow: hidden;4892  text-overflow: ellipsis;4893}48944895.peach-health-row-meta {4896  font-family: "IBM Plex Mono", monospace;4897  font-size: 0.5625rem;4898  color: var(--peach-t2);4899  letter-spacing: 0.05em;4900}49014902.peach-health-fix-btn {4903  font-size: 0.5625rem;4904  letter-spacing: 0.08em;4905  text-transform: uppercase;4906  padding: 4px 7px;4907  flex-shrink: 0;4908  display: flex;4909  align-items: center;4910}49114912.peach-health-empty {4913  font-family: "IBM Plex Mono", monospace;4914  font-size: 0.625rem;4915  color: var(--peach-t2);4916  padding: 6px 0;4917}49184919.peach-health-loading {4920  font-family: "IBM Plex Mono", monospace;4921  font-size: 0.625rem;4922  color: var(--peach-t2);4923  padding: 6px 0;4924  display: flex;4925  align-items: center;4926  gap: 6px;4927}49284929.peach-health-loading::before {4930  content: "";4931  width: 10px;4932  height: 10px;4933  border: 1.5px solid var(--peach-t3);4934  border-top-color: var(--peach-accent);4935  border-radius: 50%;4936  animation: peach-spin 600ms linear infinite;4937}49384939@keyframes peach-spin {4940  to { transform: rotate(360deg); }4941}49424943.peach-spinner {4944  width: 32px;4945  height: 32px;4946  border: 2px solid var(--peach-s2);4947  border-top-color: var(--peach-accent);4948  border-radius: 50%;4949  margin: 0 auto 16px;4950  animation: peach-spin 0.8s linear infinite;4951}49524953.peach-progress-screen {4954  text-align: center;4955  padding: 32px 16px;4956}49574958.peach-progress-screen-title {4959  font-size: 0.8125rem;4960  color: var(--peach-t0);4961  margin-bottom: 16px;4962}49634964.peach-progress-screen-stage {4965  font-size: 0.6875rem;4966  color: var(--peach-t2);4967  min-height: 14px;4968}49694970.peach-progress-screen-note {4971  font-size: 0.625rem;4972  color: var(--peach-t2);4973  margin-top: 8px;4974}49754976.peach-pairing-body {4977  flex: 1;4978  overflow-y: auto;4979  display: flex;4980  flex-direction: column;4981}49824983.peach-pairing-content {4984  flex: 1;4985  display: flex;4986  flex-direction: column;4987  align-items: center;4988  justify-content: center;4989  gap: 14px;4990  padding: 28px 20px;4991  text-align: center;4992}49934994.peach-pairing-code-screen {4995  gap: 18px;4996}49974998.peach-pairing-headline {4999  font-family: var(--font-display);5000  font-style: italic;5001  font-weight: 300;5002  font-size: 28px;5003  color: var(--peach-t0);5004  margin: 0;5005  line-height: 1;5006}50075008.peach-pairing-subline {5009  font-size: 0.75rem;5010  color: var(--peach-t2);5011  max-width: 220px;5012  line-height: 1.5;5013  margin: 0;5014}50155016.peach-pairing-subline--center {5017  text-align: center;5018}50195020/* 6-digit pairing code — both display (.peach-pairing-code) and entry5021   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking5022   so the two modes feel like the same surface. */5023.peach-pairing-code {5024  font-family: "IBM Plex Mono", monospace;5025  font-size: 36px;5026  letter-spacing: 0.25em;5027  color: var(--peach-t0);5028  text-align: center;5029  padding: 24px 0;5030  text-shadow:5031    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),5032    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);5033  background: transparent;5034  border: 0;5035  cursor: default;5036  user-select: text;5037}50385039.peach-pairing-code--loading,5040.peach-pairing-code--expired {5041  font-size: 18px;5042  letter-spacing: 0.04em;5043  color: var(--peach-t2);5044  cursor: pointer;5045  text-shadow: none;5046}50475048.peach-pairing-qr-container {5049  display: flex;5050  flex-direction: column;5051  align-items: center;5052  gap: 10px;5053}50545055.peach-pairing-qr {5056  width: 240px;5057  height: 240px;5058  display: block;5059}50605061.peach-pairing-instruction {5062  font-size: 0.75rem;5063  color: var(--peach-t2);5064  text-align: center;5065  line-height: 1.5;5066  margin: 0;5067  max-width: 220px;5068}50695070.peach-pairing-expiry {5071  font-family: "IBM Plex Mono", monospace;5072  font-size: 13px;5073  letter-spacing: 0.06em;5074  color: var(--peach-t2);5075  margin: 0;5076}50775078.peach-pairing-regen {5079  font-size: 0.75rem;5080  color: var(--peach-accent);5081  background: transparent;5082  border: 0;5083  cursor: pointer;5084  padding: 4px 0;5085  text-decoration: underline;5086  text-underline-offset: 2px;5087}50885089.peach-pairing-code-input {5090  font-family: "IBM Plex Mono", monospace;5091  font-size: 36px;5092  letter-spacing: 0.25em;5093  color: var(--peach-t0);5094  background: transparent;5095  border: 0;5096  border-bottom: 1px solid var(--peach-t3);5097  outline: none;5098  text-align: center;5099  padding: 18px 0;5100  width: 220px;5101  caret-color: var(--peach-accent);5102  transition: border-color 160ms ease;5103}51045105.peach-pairing-code-input::placeholder {5106  color: var(--peach-t3);5107}51085109.peach-pairing-code-input:focus {5110  border-bottom-color: var(--peach-accent);5111}51125113.peach-pairing-toggle {5114  background: transparent;5115  border: 0;5116  color: var(--peach-t2);5117  font-size: 0.75rem;5118  padding: 8px 4px;5119  cursor: pointer;5120  transition: color 120ms ease;5121}51225123.peach-pairing-toggle:hover:not(:disabled) {5124  color: var(--peach-t1);5125}51265127.peach-pairing-toggle:disabled {5128  opacity: 0.5;5129  cursor: default;5130}51315132.peach-pairing-hint {5133  font-size: 0.6875rem;5134  color: var(--peach-t2);5135  margin: 0;5136  text-align: center;5137}51385139.peach-pairing-status {5140  display: flex;5141  align-items: center;5142  gap: 8px;5143  margin: 0;5144  font-size: 0.75rem;5145  color: var(--peach-t1);5146}51475148.peach-pairing-error {5149  margin: 0;5150  font-size: 0.6875rem;5151  color: var(--peach-breach);5152}51535154.peach-pairing-error--muted {5155  color: var(--peach-t2);5156}51575158.peach-pairing-spinner {5159  width: 12px;5160  height: 12px;5161  border: 1.5px solid var(--peach-t3);5162  border-top-color: var(--peach-accent);5163  border-radius: 50%;5164  animation: peach-spin 0.8s linear infinite;5165}51665167.peach-pairing-success-icon,5168.peach-pairing-error-icon,5169.peach-pairing-hero {5170  display: inline-flex;5171  align-items: center;5172  justify-content: center;5173}51745175/* Tag chips */5176.peach-tag-chip {5177  display: inline-flex;5178  align-items: center;5179  gap: 4px;5180  padding: 3px 8px;5181  border-radius: 999px;5182  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5183  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5184  color: var(--peach-t0);5185  font-family: "IBM Plex Mono", monospace;5186  font-size: 0.625rem;5187  letter-spacing: 0.04em;5188}51895190.peach-tag-chip-remove {5191  background: transparent;5192  border: none;5193  color: inherit;5194  opacity: 0.6;5195  cursor: pointer;5196  padding: 0;5197  font-size: 0.75rem;5198  line-height: 1;5199}52005201.peach-tag-chip-remove:hover {5202  opacity: 1;5203}52045205/* Tag input */5206.peach-tag-input-wrap {5207  border-bottom: 1px solid var(--peach-t3);5208}52095210.peach-tag-suggestions {5211  display: flex;5212  flex-wrap: wrap;5213  gap: 4px;5214  padding: 6px 0;5215}52165217.peach-tag-suggestion {5218  padding: 2px 8px;5219  border-radius: 999px;5220  border: 1px solid var(--peach-t3);5221  background: var(--peach-s2);5222  color: var(--peach-t1);5223  font-family: "IBM Plex Mono", monospace;5224  font-size: 0.625rem;5225  cursor: pointer;5226  transition: border-color 80ms ease, background 80ms ease;5227}52285229.peach-tag-suggestion:hover {5230  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5231  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5232}52335234/* Identity suggestions — shown below username/email inputs in new-entry form */5235@keyframes peach-suggest-in {5236  from { opacity: 0; transform: translateY(-4px); }5237  to   { opacity: 1; transform: none; }5238}52395240.peach-identity-suggestions {5241  display: flex;5242  flex-direction: column;5243  gap: 1px;5244  margin-top: 4px;5245  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5246}52475248.peach-identity-filter-row {5249  display: flex;5250  align-items: center;5251  gap: 4px;5252  padding: 2px 0 5px;5253}52545255.peach-identity-collapse-btn {5256  margin-left: auto;5257  background: transparent;5258  border: none;5259  cursor: pointer;5260  color: var(--peach-t3);5261  padding: 2px 4px;5262  display: flex;5263  align-items: center;5264  line-height: 0;5265  border-radius: 3px;5266  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5267}52685269.peach-identity-collapse-btn:hover {5270  color: var(--peach-t1);5271}52725273.peach-identity-collapse-btn.is-collapsed {5274  transform: rotate(-90deg);5275}52765277.peach-identity-rows {5278  display: grid;5279  grid-template-rows: 1fr;5280  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5281}52825283.peach-identity-rows.is-collapsed {5284  grid-template-rows: 0fr;5285}52865287.peach-identity-rows-inner {5288  overflow-y: auto;5289  min-height: 0;5290  max-height: 148px;5291  scrollbar-width: thin;5292  scrollbar-color: var(--peach-t3) transparent;5293  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5294  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5295}52965297.peach-identity-rows-inner::-webkit-scrollbar {5298  width: 4px;5299}53005301.peach-identity-rows-inner::-webkit-scrollbar-track {5302  background: transparent;5303}53045305.peach-identity-rows-inner::-webkit-scrollbar-thumb {5306  background: var(--peach-t3);5307  border-radius: 2px;5308}53095310.peach-identity-filter-pill {5311  padding: 2px 7px;5312  border-radius: 999px;5313  border: 1px solid var(--peach-t3);5314  background: transparent;5315  color: var(--peach-t2);5316  font-family: "IBM Plex Mono", monospace;5317  font-size: 0.6rem;5318  cursor: pointer;5319  transition: border-color 80ms, background 80ms, color 80ms;5320}53215322.peach-identity-filter-pill.is-on {5323  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5324  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5325  color: var(--peach-accent);5326}53275328.peach-identity-suggestion {5329  display: flex;5330  align-items: center;5331  gap: 6px;5332  width: 100%;5333  padding: 4px 6px;5334  border-radius: 5px;5335  border: none;5336  background: transparent;5337  cursor: pointer;5338  text-align: left;5339  transition: background 80ms ease;5340}53415342.peach-identity-suggestion:hover,5343.peach-identity-suggestion:focus {5344  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5345  outline: none;5346}53475348.peach-identity-suggestion-value {5349  font-family: "IBM Plex Mono", monospace;5350  font-size: 0.7rem;5351  color: var(--peach-t1);5352  overflow: hidden;5353  text-overflow: ellipsis;5354  white-space: nowrap;5355  flex: 1;5356  min-width: 0;5357}53585359.peach-identity-suggestion-type {5360  font-family: "IBM Plex Mono", monospace;5361  font-size: 0.55rem;5362  font-weight: 600;5363  flex-shrink: 0;5364  padding: 1px 4px;5365  border-radius: 3px;5366}53675368.peach-identity-suggestion-type--email {5369  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5370  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5371}53725373.peach-identity-suggestion-type--username {5374  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5375  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5376}53775378.peach-identity-suggestion-meta {5379  font-family: "IBM Plex Mono", monospace;5380  font-size: 0.6rem;5381  color: var(--peach-t3);5382  flex-shrink: 0;5383}53845385/* Tag filter strip */5386.peach-tag-filter-strip {5387  border-bottom: 1px solid var(--peach-t3);5388  flex-shrink: 0;5389}53905391.peach-tag-filter-chip {5392  display: inline-flex;5393  align-items: center;5394  padding: 4px 10px;5395  border-radius: 999px;5396  border: 1px solid var(--peach-t3);5397  background: transparent;5398  color: var(--peach-t2);5399  font-family: "IBM Plex Mono", monospace;5400  font-size: 0.5625rem;5401  letter-spacing: 0.06em;5402  text-transform: uppercase;5403  cursor: pointer;5404  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5405  white-space: nowrap;5406}54075408.peach-tag-filter-chip:hover {5409  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5410  color: var(--peach-t1);5411}54125413.peach-tag-filter-chip.is-selected {5414  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5415  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5416  color: var(--peach-t0);5417}54185419/* ─────────────────────────────────────────────────────────────────────────5420   v1.4.12 additions5421   ─────────────────────────────────────────────────────────────────────── */54225423/* Sort bar */5424.peach-sort-bar {5425  display: flex;5426  align-items: center;5427  gap: 4px;5428  padding: 5px 12px;5429  border-bottom: 1px solid var(--peach-t3);5430  flex-shrink: 0;5431  overflow-x: auto;5432  scrollbar-width: none;5433}54345435.peach-sort-btn {5436  padding: 2px 9px;5437  border-radius: 999px;5438  border: 1px solid transparent;5439  background: transparent;5440  color: var(--peach-t2);5441  font-family: "IBM Plex Mono", monospace;5442  font-size: 0.5625rem;5443  letter-spacing: 0.07em;5444  text-transform: uppercase;5445  cursor: pointer;5446  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5447  white-space: nowrap;5448}54495450.peach-sort-btn:hover {5451  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5452  color: var(--peach-t1);5453}54545455.peach-sort-btn.is-active {5456  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5457  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5458  color: var(--peach-t0);5459}54605461.peach-sort-domain-hint {5462  margin-left: auto;5463  font-family: "IBM Plex Mono", monospace;5464  font-size: 0.5625rem;5465  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5466  white-space: nowrap;5467  overflow: hidden;5468  text-overflow: ellipsis;5469  max-width: 110px;5470}54715472/* Tab-match badge on entry rows */5473.peach-tab-match-badge {5474  display: inline-block;5475  width: 6px;5476  height: 6px;5477  border-radius: 50%;5478  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5479  margin-left: 5px;5480  vertical-align: middle;5481  flex-shrink: 0;5482  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5483}54845485.peach-entry-row.is-tab-match {5486  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5487  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5488}54895490.peach-entry-row.is-tab-match:hover {5491  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5492}54935494/* Entry list stagger entrance */5495@keyframes peach-entry-fadein {5496  from { opacity: 0; transform: translateY(4px); }5497  to   { opacity: 1; transform: translateY(0); }5498}54995500.peach-vault-list .peach-entry-row {5501  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5502}55035504/* Button press micro-interaction */5505.peach-btn:active {5506  transform: scale(0.95);5507  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5508}55095510.peach-sort-btn:active,5511.peach-tag-filter-chip:active {5512  transform: scale(0.93);5513  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5514}55155516/* Password strength bar (Lock view + shared) */5517.peach-password-strength {5518  display: flex;5519  align-items: center;5520  gap: 8px;5521  margin-top: 6px;5522}55235524.peach-strength-bar {5525  flex: 1;5526  height: 3px;5527  border-radius: 2px;5528  background: var(--peach-t3);5529  overflow: hidden;5530}55315532.peach-strength-fill {5533  height: 100%;5534  border-radius: 2px;5535  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5536              background 300ms ease;5537}55385539.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5540.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5541.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5542.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }55435544.peach-strength-label {5545  font-family: "IBM Plex Mono", monospace;5546  font-style: italic;5547  font-size: 0.5625rem;5548  font-weight: 300;5549  letter-spacing: 0.06em;5550  color: var(--peach-t2);5551  min-width: 36px;5552  text-align: right;5553}55545555.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5556.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5557.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5558.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }55595560/* Duress form */5561.peach-duress-status {5562  padding: 2px 8px;5563  border-radius: 999px;5564  border: 1px solid var(--peach-t3);5565  font-family: "IBM Plex Mono", monospace;5566  font-size: 0.5625rem;5567  letter-spacing: 0.07em;5568  text-transform: uppercase;5569  color: var(--peach-t2);5570  flex-shrink: 0;5571}55725573.peach-duress-status.is-active {5574  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5575  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5576  color: var(--peach-t0);5577}55785579.peach-duress-form {5580  padding: 8px 0 4px;5581  display: flex;5582  flex-direction: column;5583  gap: 6px;5584}55855586.peach-duress-form .peach-label {5587  margin-top: 4px;5588}55895590.peach-duress-actions {5591  display: flex;5592  gap: 6px;5593  align-items: center;5594  margin-top: 4px;5595}55965597.peach-duress-actions .peach-btn:first-child {5598  margin-right: auto;5599}56005601/* Improved overlay spring entrance */5602.peach-overlay-view.ov-enter-up {5603  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5604}56055606@keyframes ov-enter-up-spring {5607  from { opacity: 0; transform: translateY(16px) scale(0.98); }5608  to   { opacity: 1; transform: translateY(0) scale(1); }5609}56105611.peach-overlay-view.ov-enter-right {5612  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5613}56145615@keyframes ov-enter-right-spring {5616  from { opacity: 0; transform: translateX(18px) scale(0.98); }5617  to   { opacity: 1; transform: translateX(0) scale(1); }5618}56195620/* ── Onboarding-mode restore screens (file import) ── */5621/* Used when MainImportView renders during onboarding (no vault yet).5622   Animates like a lock-screen transition. */5623.peach-lock-view {5624  position: absolute;5625  inset: 0;5626  display: flex;5627  flex-direction: column;5628  background:5629    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5630    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5631    var(--peach-bg);5632  z-index: 2;5633  overflow: hidden;5634  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5635}56365637.peach-lock-view-header {5638  display: flex;5639  align-items: center;5640  justify-content: space-between;5641  padding: 16px 18px 12px;5642  flex-shrink: 0;5643}56445645/* ───────── Settings: auto-lock select ───────── */5646.peach-settings-select {5647  font-family: "IBM Plex Mono", monospace;5648  font-size: 0.6875rem;5649  background: transparent;5650  border: 1px solid var(--peach-t3);5651  border-radius: 4px;5652  color: var(--peach-t1);5653  padding: 3px 6px;5654  cursor: pointer;5655  outline: none;5656}5657.peach-settings-select:focus {5658  border-color: var(--peach-accent);5659}56605661/* ───────── Duress status pill (new polished) ───────── */5662.peach-duress-status-pill {5663  font-family: "IBM Plex Mono", monospace;5664  font-size: 0.5625rem;5665  text-transform: uppercase;5666  letter-spacing: 0.12em;5667  padding: 2px 8px;5668  border-radius: 12px;5669  background: var(--peach-t3);5670  color: var(--peach-t2);5671  flex-shrink: 0;5672}5673.peach-duress-status-pill.is-active {5674  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5675  color: var(--peach-accent);5676}56775678/* ───────── Entry advanced disclosure (canary) ───────── */5679.peach-entry-advanced {5680  margin-top: 12px;5681  border-top: 1px solid var(--peach-t3);5682  padding-top: 10px;5683  position: relative;5684  z-index: 1;5685}5686.peach-entry-advanced-toggle {5687  display: flex;5688  align-items: center;5689  justify-content: space-between;5690  width: 100%;5691  background: transparent;5692  border: none;5693  cursor: pointer;5694  padding: 0;5695  color: var(--peach-t2);5696}5697.peach-canary-section {5698  margin-top: 10px;5699  display: grid;5700  gap: 6px;5701}57025703/* ───────── Import: merge/replace radio choices ───────── */5704.peach-import-choice {5705  display: flex;5706  align-items: flex-start;5707  gap: 10px;5708  padding: 8px 10px;5709  border: 1px solid var(--peach-t3);5710  border-radius: 10px;5711  cursor: pointer;5712  margin-bottom: 6px;5713  transition: border-color 120ms ease, background 120ms ease;5714}5715.peach-import-choice:hover {5716  border-color: var(--peach-accent);5717}5718.peach-import-choice input[type="radio"] {5719  margin-top: 3px;5720  accent-color: var(--peach-accent);5721  flex-shrink: 0;5722}5723.peach-import-choice-main {5724  display: flex;5725  flex-direction: column;5726  gap: 2px;5727  min-width: 0;5728}5729.peach-import-choice-label {5730  font-size: 0.75rem;5731  color: var(--peach-t0);5732}5733.peach-import-choice-sub {5734  font-size: 0.6875rem;5735  color: var(--peach-t2);5736  line-height: 1.5;5737}57385739/* ───────── Export: success confirmation strip ───────── */5740.peach-export-success {5741  display: flex;5742  align-items: flex-start;5743  gap: 10px;5744  padding: 12px;5745  border-radius: 12px;5746  border: 1px solid rgba(150, 175, 110, 0.3);5747  background: rgba(150, 175, 110, 0.08);5748  color: var(--peach-t0);5749  font-size: 0.75rem;5750  line-height: 1.55;5751}5752.peach-export-success-check {5753  color: rgba(150, 175, 110, 0.9);5754  font-size: 0.875rem;5755  flex-shrink: 0;5756}57575758/* ── Trash view ──────────────────────────────────────────────────────── */5759.peach-trash-entry-row {5760  display: flex;5761  align-items: center;5762  justify-content: space-between;5763  gap: 8px;5764  padding: 8px 0;5765  border-bottom: 1px solid var(--peach-border);5766}5767.peach-trash-entry-info {5768  flex: 1;5769  min-width: 0;5770  display: flex;5771  flex-direction: column;5772  gap: 2px;5773}5774.peach-trash-entry-title {5775  font-size: 0.8125rem;5776  color: var(--peach-t0);5777  overflow: hidden;5778  text-overflow: ellipsis;5779  white-space: nowrap;5780}5781.peach-trash-entry-meta {5782  font-family: var(--font-mono);5783  font-size: 0.5625rem;5784  color: var(--peach-t2);5785  letter-spacing: 0.04em;5786}5787.peach-trash-entry-actions {5788  display: flex;5789  align-items: center;5790  gap: 4px;5791  flex-shrink: 0;5792}5793.peach-trash-delete-btn {5794  background: transparent;5795  border: 0;5796  color: var(--peach-t3);5797  font-size: 1rem;5798  line-height: 1;5799  cursor: pointer;5800  padding: 2px 5px;5801  transition: color 0.15s;5802}5803.peach-trash-delete-btn:hover { color: var(--peach-breach); }5804.peach-trash-list {5805  overflow-y: auto;5806}5807.peach-trash-footer {5808  display: flex;5809  align-items: center;5810  gap: 8px;5811  padding: 8px 0 0;5812  border-top: 1px solid var(--peach-border);5813  margin-top: 4px;5814}5815.peach-trash-purge-all {5816  background: transparent;5817  border: 0;5818  color: var(--peach-t3);5819  font-size: 0.625rem;5820  cursor: pointer;5821  padding: 4px 0;5822  letter-spacing: 0.03em;5823  transition: color 0.2s;5824}5825.peach-trash-purge-all:hover { color: var(--peach-breach); }5826.peach-trash-purge-confirm-label {5827  font-size: 0.625rem;5828  color: var(--peach-t1);5829  flex: 1;5830}58315832/* ── Settings shortcuts grid ─────────────────────────────────────────── */5833.peach-shortcuts-grid {5834  display: grid;5835  grid-template-columns: auto 1fr;5836  gap: 6px 12px;5837  align-items: center;5838  padding: 4px 0;5839}5840.peach-shortcut-key {5841  font-family: var(--font-mono);5842  font-size: 0.625rem;5843  color: var(--peach-t0);5844  background: var(--peach-t3);5845  border-radius: 4px;5846  padding: 2px 6px;5847  white-space: nowrap;5848  text-align: center;5849}5850.peach-shortcut-desc {5851  font-size: 0.6875rem;5852  color: var(--peach-t1);5853}58545855/* ── Sort bar trash button ───────────────────────────────────────────── */5856.peach-sort-trash-btn {5857  display: flex;5858  align-items: center;5859  justify-content: center;5860  padding: 3px 5px;5861  background: transparent;5862  border: none;5863  cursor: pointer;5864  color: var(--peach-t2);5865  border-radius: 4px;5866  transition: color 140ms ease, background 140ms ease;5867}5868.peach-sort-trash-btn:hover {5869  color: var(--peach-t1);5870  background: var(--peach-t3);5871}5872.peach-sort-trash-btn.is-active {5873  color: var(--peach-accent);5874}58755876/* Accent color picker */5877.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5878.peach-accent-picker {5879  display: flex;5880  flex-wrap: wrap;5881  gap: 7px;5882  padding: 2px 0;5883}5884.peach-accent-swatch {5885  width: 22px;5886  height: 22px;5887  border-radius: 50%;5888  border: 2px solid transparent;5889  cursor: pointer;5890  padding: 0;5891  transition: transform 100ms;5892  outline-offset: 2px;5893}5894.peach-accent-swatch:hover { transform: scale(1.15); }5895.peach-accent-swatch.is-active {5896  border-color: var(--peach-t0);5897  transform: scale(1.1);5898}58995900.peach-pill-group {5901  display: flex;5902  gap: 6px;5903}5904.peach-pill-group .peach-btn.is-active {5905  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5906  border-color: var(--peach-accent);5907  color: var(--peach-t0);5908}59095910/* ── Card entry styles ───────────────────────────────────────── */5911.peach-card-number {5912  font-family: var(--peach-mono);5913  letter-spacing: 0.08em;5914}59155916.peach-card-network-badge {5917  font-size: 0.625rem;5918  padding: 1px 5px;5919  border-radius: 4px;5920  border: 0.5px solid var(--peach-border);5921  color: var(--peach-text-dim);5922  margin-left: 6px;5923  vertical-align: middle;5924}59255926.peach-card-expiry-row {5927  display: flex;5928  align-items: center;5929  gap: 8px;5930}59315932.peach-card-expiry-sep {5933  color: var(--peach-text-dim);5934}59355936/* ── Pro tier — upgrade screen ──────────────────────────────── */5937.peach-pro-mark {5938  font-size: 0.5625rem;5939  color: var(--peach-accent);5940  margin-left: 6px;5941  vertical-align: super;5942  opacity: 0.7;5943}59445945.peach-pro-mini-badge {5946  display: block;5947  font-size: 0.625rem;5948  font-style: italic;5949  color: var(--peach-accent);5950  letter-spacing: 0.04em;5951  margin-top: -2px;5952  padding-left: 2px;5953  opacity: 0.85;5954  text-align: center;5955}59565957.peach-wordmark-stack {5958  display: inline-flex;5959  flex-direction: column;5960  align-items: center;5961}59625963/* ── Pro tier — upgrade page ─────────────────────────────────── */5964.peach-pro-upgrade {5965  display: flex;5966  flex-direction: column;5967  align-items: stretch;5968  gap: 10px;5969  padding: 0 4px 8px;5970}59715972.peach-pro-upgrade-hero {5973  display: flex;5974  flex-direction: column;5975  align-items: center;5976  gap: 4px;5977  padding: 10px 0 6px;5978}59795980.peach-pro-upgrade-mark-wrap {5981  display: flex;5982  align-items: center;5983  justify-content: center;5984  margin-bottom: 2px;5985}59865987.peach-pro-upgrade-mark {5988  width: 38px;5989  height: 38px;5990  opacity: 0.9;5991}59925993.peach-pro-upgrade-title {5994  font-family: var(--font-display, var(--font-ui));5995  font-size: 22px;5996  margin: 0;5997  color: var(--peach-t0);5998  letter-spacing: 0.01em;5999}60006001.peach-pro-upgrade-tagline {6002  margin: 0;6003  font-style: italic;6004  color: var(--peach-t2);6005  font-size: 0.6875rem;6006}60076008.peach-pro-features {6009  display: flex;6010  flex-direction: column;6011  gap: 8px;6012  border-top: 1px solid var(--peach-border);6013  border-bottom: 1px solid var(--peach-border);6014  padding: 10px 4px;6015}60166017.peach-pro-feature {6018  display: flex;6019  gap: 9px;6020  align-items: baseline;6021}60226023.peach-pro-feature-mark {6024  color: var(--peach-accent);6025  font-size: 0.6875rem;6026  flex-shrink: 0;6027  display: inline-block;6028  transform-origin: center;6029  opacity: 0.8;6030}60316032.peach-pro-feature-text {6033  display: flex;6034  flex-direction: column;6035  gap: 1px;6036}60376038.peach-pro-feature-name {6039  font-size: 0.75rem;6040  color: var(--peach-t0);6041}60426043.peach-pro-feature-desc {6044  font-size: 0.625rem;6045  color: var(--peach-t2);6046}60476048.peach-pro-feature.is-highlighted .peach-pro-feature-mark {6049  animation: peach-pulse-accent 600ms ease-out forwards;6050}60516052@keyframes peach-pulse-accent {6053  0%   { opacity: 1; transform: scale(1.4); }6054  100% { opacity: 0.7; transform: scale(1); }6055}60566057.peach-pro-upgrade-actions {6058  display: flex;6059  flex-direction: column;6060  align-items: center;6061  gap: 8px;6062  padding-top: 2px;6063}60646065.peach-pro-pricing {6066  margin: 0;6067  text-align: center;6068  font-size: 0.6875rem;6069  color: var(--peach-t2);6070  letter-spacing: 0.04em;6071}60726073.peach-pro-upgrade-cta {6074  align-self: center;6075  text-align: center;6076  text-decoration: none;6077  display: block;6078  padding: 9px 32px;6079  font-size: 0.8125rem;6080  min-width: 180px;6081}60826083.peach-pro-key-divider {6084  display: flex;6085  align-items: center;6086  gap: 8px;6087  width: 100%;6088  color: var(--peach-t3);6089  font-size: 0.625rem;6090  letter-spacing: 0.08em;6091}60926093.peach-pro-key-divider::before,6094.peach-pro-key-divider::after {6095  content: "";6096  flex: 1;6097  height: 1px;6098  background: var(--peach-border);6099}61006101.peach-pro-key-link {6102  background: transparent;6103  border: 1px solid var(--peach-border);6104  border-radius: 8px;6105  color: var(--peach-t1);6106  font-size: 0.75rem;6107  cursor: pointer;6108  align-self: stretch;6109  padding: 8px 12px;6110  text-align: center;6111  transition: border-color 0.2s, color 0.2s;6112}61136114.peach-pro-key-link:hover {6115  border-color: var(--peach-accent);6116  color: var(--peach-accent);6117}61186119/* ── Pro tier — key ceremony ─────────────────────────────────── */6120.peach-pro-key-ceremony {6121  display: flex;6122  flex-direction: column;6123  align-items: center;6124  gap: 12px;6125  padding: 20px 4px 16px;6126}61276128.peach-pro-key-ceremony .peach-lock-rune-string {6129  font-size: 1rem;6130  gap: 12px;6131  flex: 0;6132  justify-content: center;6133}61346135.peach-pro-key-ceremony-label {6136  margin: 0;6137  font-size: 0.6875rem;6138  color: var(--peach-t2);6139  font-style: italic;6140  letter-spacing: 0.04em;6141}61426143.peach-pro-key-input {6144  font-family: var(--font-mono, monospace);6145  letter-spacing: 0.06em;6146  text-align: center;6147  width: 100%;6148  box-sizing: border-box;6149}61506151.peach-pro-key-error {6152  margin: 0;6153  font-size: 0.75rem;6154  text-align: center;6155  color: var(--peach-breach, #e55);6156  padding: 0;6157}61586159.peach-pro-key-activate {6160  width: 100%;6161  text-align: center;6162  box-sizing: border-box;6163  padding: 10px 20px;6164  font-size: 0.8125rem;6165}61666167.peach-pro-key-cancel {6168  background: transparent;6169  border: 0;6170  color: var(--peach-t2);6171  font-size: 0.6875rem;6172  cursor: pointer;6173  padding: 2px 8px;6174  transition: color 0.2s;6175}61766177.peach-pro-key-cancel:hover { color: var(--peach-accent); }61786179/* ── Pro tier — active state ─────────────────────────────────── */6180.peach-pro-active {6181  display: flex;6182  flex-direction: column;6183  align-items: center;6184  gap: 0;6185  padding: 8px 4px 16px;6186  min-height: 280px;6187}61886189.peach-pro-active-hero {6190  display: flex;6191  flex-direction: column;6192  align-items: center;6193  gap: 6px;6194  padding: 20px 0 22px;6195}61966197.peach-pro-active-mark-wrap {6198  display: flex;6199  align-items: center;6200  justify-content: center;6201  margin-bottom: 4px;6202}62036204.peach-pro-active-mark {6205  width: 60px;6206  height: 60px;6207  filter:6208    drop-shadow(0 0 10px color-mix(in srgb, var(--peach-accent) 55%, transparent))6209    drop-shadow(0 0 26px color-mix(in srgb, var(--peach-accent) 22%, transparent));6210}62116212.peach-pro-active-title {6213  font-family: var(--font-display, var(--font-ui));6214  font-size: 26px;6215  margin: 0;6216  color: var(--peach-t0);6217  letter-spacing: 0.01em;6218}62196220.peach-pro-active-since {6221  margin: 0;6222  font-size: 0.6875rem;6223  color: var(--peach-t2);6224  font-style: italic;6225}62266227.peach-pro-active-features {6228  display: flex;6229  flex-direction: column;6230  gap: 8px;6231  width: 100%;6232  padding: 14px 8px 0;6233  border-top: 1px solid var(--peach-border);6234  flex: 1;6235}62366237.peach-pro-active-feature {6238  display: flex;6239  align-items: center;6240  gap: 9px;6241}62426243.peach-pro-active-feature-mark {6244  color: var(--peach-accent);6245  font-size: 0.625rem;6246  opacity: 0.65;6247  flex-shrink: 0;6248}62496250.peach-pro-active-feature-name {6251  font-size: 0.75rem;6252  color: var(--peach-t1);6253}62546255.peach-pro-deactivate {6256  align-self: center;6257  background: transparent;6258  border: 0;6259  color: var(--peach-t3);6260  font-size: 0.625rem;6261  cursor: pointer;6262  padding: 8px 0 0;6263  margin-top: 16px;6264  letter-spacing: 0.03em;6265  transition: color 0.2s;6266}62676268.peach-pro-deactivate:hover { color: var(--peach-t2); }62696270.peach-pro-deactivate:disabled {6271  opacity: 0.5;6272  cursor: default;6273}62746275/* ── Pro advanced health remediation queue ──────────────────── */6276.peach-health-pro-queue {6277  display: flex;6278  flex-direction: column;6279  gap: 10px;6280  padding: 12px;6281  margin: 0 0 12px;6282  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6283  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6284  border-radius: 10px;6285}62866287.peach-health-pro-queue-head {6288  display: flex;6289  justify-content: space-between;6290  align-items: baseline;6291}62926293.peach-health-pro-queue-title {6294  font-size: 0.75rem;6295  font-weight: 500;6296  letter-spacing: 0.04em;6297  text-transform: uppercase;6298  color: var(--peach-accent);6299}63006301.peach-health-pro-queue-score {6302  font-size: 0.6875rem;6303  color: var(--peach-t2);6304}63056306.peach-health-pro-row {6307  display: flex;6308  gap: 10px;6309  align-items: center;6310  padding: 8px 0;6311  border-top: 1px solid var(--peach-border);6312}63136314.peach-health-pro-row-info {6315  flex: 1;6316  display: flex;6317  flex-direction: column;6318  gap: 4px;6319  min-width: 0;6320}63216322.peach-health-pro-row-name {6323  font-size: 0.8125rem;6324  color: var(--peach-t0);6325  overflow: hidden;6326  text-overflow: ellipsis;6327  white-space: nowrap;6328}63296330.peach-health-pro-row-meta {6331  font-size: 0.6875rem;6332  color: var(--peach-t2);6333}63346335.peach-health-pro-bar {6336  height: 2px;6337  background: var(--peach-border);6338  border-radius: 2px;6339  overflow: hidden;6340  margin-top: 2px;6341}63426343.peach-health-pro-bar-fill {6344  height: 100%;6345  background: var(--peach-accent);6346  transition: width 200ms ease-out;6347}63486349/* ── Pro activation celebration ── */6350@keyframes peach-pro-bloom {6351  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6352  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6353                 drop-shadow(0 0 48px var(--peach-glow)); }6354  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6355}63566357@keyframes peach-pro-wordmark-in {6358  from { opacity: 0; transform: translateY(4px); }6359  to   { opacity: 1; transform: translateY(0); }6360}63616362@keyframes peach-pro-fade-out {6363  from { opacity: 1; }6364  to   { opacity: 0; }6365}63666367.peach-pro-celebration {6368  background:6369    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6370    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6371    var(--peach-bg);6372  border: 1px solid var(--peach-t3);6373  box-shadow:6374    0 2px 8px rgba(0,0,0,0.55),6375    0 14px 48px rgba(0,0,0,0.7),6376    0 0 0 1px rgba(240,232,216,0.04);6377  overflow: hidden;6378  width: 320px;6379  height: 520px;6380  display: flex;6381  flex-direction: column;6382  align-items: center;6383  justify-content: center;6384  gap: 8px;6385  padding: 32px 24px;6386  text-align: center;6387}63886389.peach-pro-celebration.is-leaving {6390  animation: peach-pro-fade-out 400ms ease forwards;6391}63926393.peach-pro-bloom-target {6394  display: flex;6395  align-items: center;6396  justify-content: center;6397  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6398  margin-bottom: 12px;6399}64006401.peach-pro-bloom-icon {6402  width: 48px;6403  height: 48px;6404}64056406.peach-pro-wordmark {6407  font-family: var(--font-display);6408  font-size: 22px;6409  font-style: italic;6410  font-weight: 400;6411  color: var(--peach-accent);6412  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6413}64146415.peach-pro-thankyou {6416  font-size: 0.75rem;6417  font-style: italic;6418  color: var(--peach-t2);6419  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6420}642164226423/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6424.peach-pro-notice-banner {6425  display: flex;6426  align-items: center;6427  gap: 8px;6428  padding: 7px 12px;6429  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6430  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6431  font-size: 0.6875rem;6432  color: var(--peach-t2);6433  font-family: "IBM Plex Mono", monospace;6434  flex-shrink: 0;6435}64366437.peach-pro-notice-link {6438  background: none;6439  border: none;6440  padding: 0;6441  cursor: pointer;6442  font-size: 0.6875rem;6443  color: var(--peach-accent);6444  font-family: "IBM Plex Mono", monospace;6445  margin-left: auto;6446  white-space: nowrap;6447}64486449.peach-pro-notice-close {6450  background: none;6451  border: none;6452  padding: 0 0 0 4px;6453  cursor: pointer;6454  font-size: 0.625rem;6455  color: var(--peach-t3);6456  line-height: 1;6457}64586459/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6460   Renders over whatever view is showing. 60-second expiry; the popup ticks6461   the countdown each second and clears the banner when it hits zero. */6462.peach-pair-request-banner {6463  display: flex;6464  flex-direction: column;6465  gap: 8px;6466  padding: 10px 12px;6467  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6468  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6469  font-family: "IBM Plex Mono", monospace;6470  flex-shrink: 0;6471}64726473.peach-pair-toast {6474  padding: 8px 12px;6475  font-family: "IBM Plex Mono", monospace;6476  font-size: 0.75rem;6477  color: var(--peach-t1);6478  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6479  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6480  flex-shrink: 0;6481  text-align: center;6482}64836484.peach-pair-toast strong {6485  color: var(--peach-t0);6486  font-weight: 500;6487}64886489.peach-pair-request-header {6490  display: flex;6491  align-items: center;6492  gap: 8px;6493  font-size: 0.75rem;6494  color: var(--peach-t1);6495}64966497.peach-pair-request-mark {6498  font-size: 0.875rem;6499  display: inline-flex;6500  align-items: center;6501}65026503.peach-pair-request-icon {6504  width: 1em;6505  height: 1em;6506}65076508.peach-pair-request-title {6509  font-weight: 600;6510  color: var(--peach-t0);6511}65126513.peach-pair-request-countdown {6514  margin-left: auto;6515  font-variant-numeric: tabular-nums;6516  color: var(--peach-t2);6517  font-size: 0.6875rem;6518}65196520.peach-pair-request-body {6521  margin: 0;6522  font-size: 0.75rem;6523  color: var(--peach-t1);6524  line-height: 1.4;6525}65266527.peach-pair-request-body strong {6528  color: var(--peach-t0);6529  font-weight: 600;6530}65316532.peach-pair-request-actions {6533  display: flex;6534  gap: 8px;6535  justify-content: flex-end;6536}65376538/* ─── First-run onboarding ──────────────────────────────────────────────6539   Three-card welcome shown once before vault creation. The PeachScript6540   rune background drifts behind everything at very low opacity — it's6541   atmosphere, not focus. The cards themselves use the same panel6542   language as the rest of the popup so the transition into NewVault is6543   continuous, not a jarring switch of visual register. */65446545.peach-onboarding {6546  position: relative;6547  display: flex;6548  flex-direction: column;6549  width: 100%;6550  height: 100%;6551  padding: 16px 16px 18px;6552  box-sizing: border-box;6553  overflow: hidden;6554  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6555}65566557.peach-onboarding.is-completing {6558  animation: peach-onboard-exit 200ms ease-out forwards;6559}65606561.peach-rune-background {6562  position: absolute;6563  inset: 0;6564  width: 100%;6565  height: 100%;6566  pointer-events: none;6567  z-index: 0;6568  transition: opacity 500ms ease-out;6569}65706571.peach-onboarding.is-completing .peach-rune-background {6572  opacity: 0;6573}65746575.peach-onboarding-header {6576  position: relative;6577  z-index: 1;6578  display: flex;6579  align-items: center;6580  margin-bottom: 14px;6581}65826583.peach-onboarding-card {6584  position: relative;6585  z-index: 1;6586  flex: 1;6587  display: flex;6588  flex-direction: column;6589  gap: 10px;6590  padding: 22px 20px;6591  border-radius: 16px;6592  border: 1px solid var(--peach-t3);6593  background:6594    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6595  backdrop-filter: blur(3px);6596  -webkit-backdrop-filter: blur(3px);6597  box-shadow:6598    inset 0 1px 0 rgba(240, 232, 216, 0.04),6599    0 12px 28px rgba(0, 0, 0, 0.12);6600  cursor: pointer;6601  user-select: none;6602  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6603}66046605.peach-onboarding-card.is-exiting {6606  animation: peach-card-out 120ms ease-in forwards;6607  pointer-events: none;6608}66096610.peach-onboarding-card-headline {6611  margin: 0;6612  font-family: var(--font-display);6613  font-style: italic;6614  font-weight: 400;6615  font-size: 22px;6616  line-height: 1.05;6617  color: var(--peach-t0);6618  white-space: pre-line;6619}66206621.peach-onboarding-divider {6622  margin: 4px 0 6px;6623  border: 0;6624  border-top: 1px solid var(--peach-t3);6625  width: 100%;6626}66276628.peach-onboarding-body {6629  margin: 0;6630  font-size: 0.8125rem;6631  line-height: 1.6;6632  color: var(--peach-t1);6633}66346635.peach-onboarding-warning {6636  display: flex;6637  align-items: flex-start;6638  gap: 8px;6639  margin: 6px 0 0;6640  padding-top: 8px;6641  border-top: 1px dashed var(--peach-t3);6642  font-size: 0.8125rem;6643  line-height: 1.5;6644  color: var(--peach-t1);6645}66466647.peach-onboarding-warning-icon {6648  color: var(--peach-accent);6649  font-size: 0.8125rem;6650  line-height: 1.5;6651  flex: 0 0 auto;6652}66536654.peach-onboarding-nav {6655  position: relative;6656  z-index: 1;6657  display: flex;6658  align-items: center;6659  justify-content: space-between;6660  margin-top: 12px;6661  padding: 0 4px;6662}66636664.peach-onboarding-dots {6665  display: flex;6666  align-items: center;6667  gap: 6px;6668}66696670.peach-onboarding-dot {6671  width: 6px;6672  height: 6px;6673  border-radius: 50%;6674  background: var(--peach-t2);6675  transition: width 200ms ease, height 200ms ease, background 200ms ease;6676}66776678.peach-onboarding-dot.is-active {6679  width: 8px;6680  height: 8px;6681  background: var(--peach-accent);6682}66836684.peach-onboarding-next {6685  background: none;6686  border: none;6687  padding: 4px 0;6688  cursor: pointer;6689  font-family: "IBM Plex Mono", monospace;6690  font-size: 0.6875rem;6691  letter-spacing: 0.04em;6692  color: var(--peach-t1);6693  transition: color 150ms ease;6694}66956696.peach-onboarding-next:hover {6697  color: var(--peach-t0);6698}66996700.peach-onboarding-next:disabled {6701  opacity: 0.5;6702  cursor: default;6703}67046705.peach-onboarding-back {6706  background: none;6707  border: none;6708  padding: 4px 0;6709  cursor: pointer;6710  font-family: "IBM Plex Mono", monospace;6711  font-size: 0.6875rem;6712  letter-spacing: 0.04em;6713  color: var(--peach-t2);6714  transition: color 150ms ease;6715}67166717.peach-onboarding-back:hover {6718  color: var(--peach-t0);6719}67206721.peach-onboarding-back:disabled {6722  opacity: 0.5;6723  cursor: default;6724}67256726/* Reserve back-button width on the first card so the dots stay centred */6727.peach-onboarding-back-spacer {6728  width: 44px;6729}67306731.peach-onboarding-mobile-card-buttons {6732  display: flex;6733  flex-direction: column;6734  gap: 8px;6735  margin-top: 16px;6736}67376738@keyframes peach-onboard-enter {6739  from { opacity: 0; transform: translateY(20px); }6740  to   { opacity: 1; transform: translateY(0); }6741}67426743@keyframes peach-onboard-exit {6744  from { opacity: 1; }6745  to   { opacity: 0; }6746}67476748@keyframes peach-card-in {6749  from { opacity: 0; transform: translateX(12px); }6750  to   { opacity: 1; transform: translateX(0); }6751}67526753@keyframes peach-card-out {6754  from { opacity: 1; transform: translateX(0); }6755  to   { opacity: 0; transform: translateX(-12px); }6756}67576758/* ─── New vault screen — matched to onboarding card language ─────────── */67596760.peach-newvault {6761  position: relative;6762  display: flex;6763  flex-direction: column;6764  gap: 12px;6765  padding: 16px 16px 18px;6766  overflow: hidden;6767}67686769/* Suppress the warm-blob ambient art inherited from .lock-screen — the6770   new vault card now carries the visual weight. */6771.peach-newvault::before {6772  content: none;6773}67746775.peach-newvault-header {6776  position: relative;6777  z-index: 2;6778  display: flex;6779  align-items: center;6780  gap: 10px;6781  margin-bottom: 2px;6782}67836784.peach-newvault-back {6785  display: inline-flex;6786  align-items: center;6787  gap: 4px;6788  background: transparent;6789  border: none;6790  color: var(--peach-t2);6791  font-family: "IBM Plex Mono", monospace;6792  font-size: 0.625rem;6793  letter-spacing: 0.06em;6794  cursor: pointer;6795  padding: 4px 6px;6796  border-radius: 6px;6797  transition: color 120ms ease, background 120ms ease;6798}67996800.peach-newvault-back:hover {6801  color: var(--peach-t0);6802  background: rgba(240, 232, 216, 0.04);6803}68046805.peach-newvault-mark {6806  position: absolute;6807  right: -12px;6808  top: 6px;6809  width: 110px;6810  height: 110px;6811  pointer-events: none;6812  opacity: 0.10;6813  filter: saturate(0.9);6814  z-index: 0;6815}6816.peach-newvault-mark-art {6817  width: 100%;6818  height: 100%;6819}6820.peach-newvault-mark-art path:nth-child(2),6821.peach-newvault-mark-art path:nth-child(3) {6822  stroke: rgba(123, 144, 96, 0.88);6823  fill: rgba(123, 144, 96, 0.88);6824}68256826.peach-newvault-card {6827  position: relative;6828  z-index: 1;6829  display: flex;6830  flex-direction: column;6831  gap: 12px;6832  padding: 22px 20px 18px;6833  border-radius: 16px;6834  border: 1px solid var(--peach-t3);6835  background:6836    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6837  backdrop-filter: blur(3px);6838  -webkit-backdrop-filter: blur(3px);6839  box-shadow:6840    inset 0 1px 0 rgba(240, 232, 216, 0.04),6841    0 12px 28px rgba(0, 0, 0, 0.12);6842  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6843}68446845.peach-newvault-headline {6846  margin: 0;6847  font-family: var(--font-display);6848  font-style: italic;6849  font-weight: 400;6850  font-size: 24px;6851  line-height: 1.05;6852  color: var(--peach-t0);6853  white-space: pre-line;6854}68556856.peach-newvault-divider {6857  margin: 2px 0 4px;6858  border: 0;6859  border-top: 1px solid var(--peach-t3);6860  width: 100%;6861}68626863.peach-newvault-field {6864  display: flex;6865  flex-direction: column;6866  gap: 4px;6867}68686869.peach-newvault-label-row {6870  display: flex;6871  align-items: center;6872  justify-content: space-between;6873}68746875/* Monospace input scaled to the card. Replaces the 22px unlock-input6876   so the placeholder no longer overflows and the field reads as part6877   of the same surface as the body copy. */6878.peach-newvault-input {6879  font-size: 0.875rem;6880  letter-spacing: 0.18em;6881  padding: 8px 0;6882}6883.peach-newvault-input::placeholder {6884  letter-spacing: 0.18em;6885  color: var(--peach-t2);6886}68876888.peach-newvault-hint {6889  margin: 2px 0 0;6890  font-family: "IBM Plex Mono", monospace;6891  font-size: 0.625rem;6892  color: var(--peach-t2);6893  letter-spacing: 0.04em;6894}68956896.peach-newvault-submit {6897  margin-top: 4px;6898}68996900.peach-newvault-warning {6901  display: flex;6902  align-items: flex-start;6903  gap: 8px;6904  margin: 4px 0 0;6905  padding-top: 10px;6906  border-top: 1px dashed var(--peach-t3);6907  font-size: 0.75rem;6908  line-height: 1.5;6909  color: var(--peach-t1);6910}69116912.peach-newvault-warning-icon {6913  color: var(--peach-accent);6914  font-size: 0.8125rem;6915  line-height: 1.4;6916  flex: 0 0 auto;6917}69186919.peach-newvault-footer {6920  position: relative;6921  z-index: 1;6922  display: flex;6923  flex-direction: column;6924  gap: 4px;6925  padding: 4px 4px 0;6926}69276928/* Settings body — warm accent gradient gives the glass something to blur against */6929.peach-settings-body {6930  background:6931    radial-gradient(6932      ellipse at 30% 20%,6933      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,6934      transparent 60%6935    );6936}69376938/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */6939/* ── Danger cards (Replace + Destroy) ────────────────────────────────────6940 * Two severity levels: "warn" for actions that are dangerous-but-recoverable6941 * (replacing the vault from a backup file) and "hazard" for actions that6942 * are absolutely irreversible (Panic). Both use the same card scaffold so6943 * they read as a pair, but the colour family signals the severity at a6944 * glance — yellow for caution, red for don't.6945 */6946.peach-danger-card {6947  --danger-tint: 235, 158, 52; /* amber */6948  display: flex;6949  flex-direction: column;6950  gap: 8px;6951  padding: 14px;6952  margin-top: 10px;6953  border-radius: 12px;6954  border: 1px solid rgba(var(--danger-tint), 0.32);6955  background:6956    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),6957    rgba(var(--danger-tint), 0.04);6958  box-shadow:6959    inset 0 1px 0 rgba(var(--danger-tint), 0.08),6960    0 0 24px rgba(var(--danger-tint), 0.04);6961  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;6962}69636964.peach-danger-card:hover {6965  border-color: rgba(var(--danger-tint), 0.55);6966  box-shadow:6967    inset 0 1px 0 rgba(var(--danger-tint), 0.12),6968    0 0 36px rgba(var(--danger-tint), 0.10);6969}69706971.peach-danger-card--hazard {6972  --danger-tint: 220, 38, 38; /* red */6973}69746975.peach-danger-card-head {6976  display: flex;6977  align-items: center;6978  gap: 10px;6979}69806981.peach-danger-card-glyph {6982  width: 28px;6983  height: 28px;6984  flex-shrink: 0;6985  display: flex;6986  align-items: center;6987  justify-content: center;6988  border-radius: 8px;6989  background: rgba(var(--danger-tint), 0.12);6990  color: rgba(var(--danger-tint), 0.95);6991  font-size: 1rem;6992  line-height: 1;6993}69946995.peach-danger-card-title {6996  margin: 0;6997  font-size: 0.8125rem;6998  font-weight: 600;6999  color: rgba(var(--danger-tint), 0.92);7000  letter-spacing: 0.01em;7001}70027003.peach-danger-card-copy {7004  margin: 0;7005  font-size: 0.6875rem;7006  line-height: 1.5;7007  color: var(--peach-t2);7008}70097010.peach-danger-card-button {7011  width: 100%;7012  padding: 9px;7013  margin-top: 4px;7014  background: transparent;7015  border: 1px solid rgba(var(--danger-tint), 0.45);7016  border-radius: 8px;7017  color: rgba(var(--danger-tint), 0.9);7018  font-size: 0.75rem;7019  font-weight: 500;7020  letter-spacing: 0.02em;7021  cursor: pointer;7022  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7023}70247025.peach-danger-card-button:hover {7026  background: rgba(var(--danger-tint), 0.10);7027  border-color: rgba(var(--danger-tint), 0.75);7028  color: rgb(var(--danger-tint));7029}70307031/* ── Panic flow (three-step destruction) ───────────────────────────────── */7032.peach-panic {7033  display: flex;7034  flex-direction: column;7035  flex: 1;7036  min-height: 0;7037  padding: 28px 20px 20px;7038  gap: 18px;7039  overflow-y: auto;7040  scrollbar-width: none;7041  -ms-overflow-style: none;7042}70437044.peach-panic::-webkit-scrollbar { display: none; }70457046.peach-panic-step2 {7047  background: rgba(220, 38, 38, 0.04);7048}70497050.peach-panic-step3 {7051  position: relative;7052  background: #0f0505;7053  color: #ffffff;7054  overflow: hidden;7055}70567057.peach-panic-rune-bg {7058  position: absolute;7059  inset: 0;7060  opacity: 0.22;7061  pointer-events: none;7062  overflow: hidden;7063}70647065.peach-panic-rune-bg canvas {7066  width: 100% !important;7067  height: 100% !important;7068}70697070.peach-panic-icon {7071  font-size: 32px;7072  color: rgb(220, 38, 38);7073  line-height: 1;7074}70757076.peach-panic-title {7077  margin: 0;7078  font-size: 18px;7079  font-weight: 500;7080  color: var(--peach-t1);7081}70827083.peach-panic-title--severe {7084  font-size: 20px;7085  font-weight: 700;7086  color: rgb(220, 38, 38);7087}70887089.peach-panic-body {7090  margin: 0;7091  font-size: 0.8125rem;7092  line-height: 1.55;7093  color: var(--peach-t2);7094}70957096.peach-panic-body--severe {7097  color: rgba(220, 38, 38, 0.85);7098}70997100.peach-panic-body--final {7101  font-size: 1rem;7102  font-weight: 700;7103  color: rgb(255, 80, 80);7104  line-height: 1.4;7105}71067107.peach-panic-body--final-intro {7108  font-size: 1rem;7109  color: #ffffff;7110  font-weight: 400;7111}71127113.peach-panic-divider {7114  height: 1px;7115  background: rgba(255, 255, 255, 0.08);7116  margin: 4px 0;7117}71187119.peach-panic-confirm-input {7120  width: 100%;7121  padding: 10px 12px;7122  background: rgba(255, 255, 255, 0.02);7123  border: 1px solid rgba(220, 38, 38, 0.4);7124  border-radius: 8px;7125  color: var(--peach-t1);7126  font-family: "IBM Plex Mono", monospace;7127  font-size: 0.875rem;7128  letter-spacing: 0.12em;7129  text-transform: uppercase;7130}71317132.peach-panic-confirm-input:focus {7133  outline: none;7134  border-color: rgb(220, 38, 38);7135}71367137.peach-panic-confirm-input--match {7138  border-color: rgb(220, 38, 38);7139  color: rgb(220, 38, 38);7140}71417142.peach-panic-confirm-label {7143  font-size: 0.6875rem;7144  color: var(--peach-t2);7145  margin: 0 0 -8px;7146  letter-spacing: 0.06em;7147}71487149.peach-panic-actions {7150  display: flex;7151  flex-direction: column;7152  gap: 10px;7153  margin-top: auto;7154}71557156.peach-panic-button {7157  width: 100%;7158  padding: 12px;7159  border-radius: 8px;7160  font-size: 0.8125rem;7161  cursor: pointer;7162  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7163}71647165.peach-panic-button--primary {7166  background: var(--peach-accent);7167  border: 1px solid var(--peach-accent);7168  color: #ffffff;7169  font-weight: 600;7170}71717172.peach-panic-button--primary:hover {7173  background: color-mix(in srgb, var(--peach-accent) 88%, white);7174}71757176.peach-panic-button--danger {7177  background: rgb(220, 38, 38);7178  border: 1px solid rgb(220, 38, 38);7179  color: #ffffff;7180  font-weight: 600;7181}71827183.peach-panic-button--danger:disabled {7184  opacity: 0.35;7185  cursor: not-allowed;7186}71877188.peach-panic-button--ghost {7189  background: transparent;7190  border: 1px solid rgba(255, 255, 255, 0.18);7191  color: var(--peach-t2);7192}71937194.peach-panic-button--ghost:hover {7195  border-color: rgba(255, 255, 255, 0.32);7196  color: var(--peach-t1);7197}71987199.peach-panic-link {7200  background: transparent;7201  border: none;7202  padding: 4px 0;7203  color: rgba(220, 38, 38, 0.65);7204  font-size: 0.75rem;7205  cursor: pointer;7206  text-align: left;7207  text-decoration: underline;7208  text-underline-offset: 3px;7209}72107211.peach-panic-link:hover {7212  color: rgb(220, 38, 38);7213}72147215.peach-panic-bar {7216  background: rgb(220, 38, 38);7217  padding: 16px 20px;7218  margin: -28px -20px 0;7219  text-align: center;7220  font-size: 0.8125rem;7221  font-weight: 700;7222  letter-spacing: 0.12em;7223  color: #ffffff;7224}72257226.peach-panic-final-button {7227  width: 100%;7228  padding: 14px;7229  background: rgb(220, 38, 38);7230  border: none;7231  border-radius: 8px;7232  color: #ffffff;7233  font-size: 0.875rem;7234  font-weight: 700;7235  letter-spacing: 0.08em;7236  text-transform: uppercase;7237  cursor: pointer;7238  animation: peach-panic-pulse 2s ease-in-out infinite;7239}72407241.peach-settings-license {7242  margin-top: 10px;7243  padding-top: 10px;7244  border-top: 1px solid var(--peach-t3);7245}72467247.peach-settings-label {7248  font-size: 0.625rem;7249  letter-spacing: 0.08em;7250  color: var(--peach-t3);7251  display: block;7252  margin-bottom: 6px;7253}72547255.peach-settings-license-row {7256  display: flex;7257  align-items: center;7258  justify-content: space-between;7259  gap: 8px;7260}72617262.peach-settings-license-key {7263  font-family: 'IBM Plex Mono', monospace;7264  font-size: 0.75rem;7265  color: var(--peach-t0);7266  letter-spacing: 0.04em;7267  word-break: break-all;7268}72697270.peach-settings-license-copy {7271  font-size: 0.6875rem;7272  color: var(--peach-accent);7273  background: transparent;7274  border: none;7275  cursor: pointer;7276  padding: 4px 8px;7277  border-radius: 4px;7278  flex-shrink: 0;7279  transition: opacity 150ms ease;7280}72817282.peach-settings-license-copy:hover {7283  opacity: 0.75;7284}72857286@keyframes peach-panic-pulse {7287  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7288  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7289}72907291[data-motion="reduce"] .peach-panic-final-button {7292  animation: none;7293}72947295/* Vault History — Settings → Vault sub-view */72967297.peach-history-list {7298  border: 1px solid var(--peach-border);7299  border-radius: 8px;7300  overflow: hidden;7301  margin: 8px 0 4px;7302}73037304.peach-history-row {7305  display: flex;7306  align-items: center;7307  justify-content: space-between;7308  padding: 9px 12px;7309  gap: 10px;7310  border-bottom: 1px solid var(--peach-border);7311}73127313.peach-history-row:last-child {7314  border-bottom: none;7315}73167317.peach-history-meta {7318  display: flex;7319  flex-direction: column;7320  gap: 2px;7321  min-width: 0;7322  flex: 1;7323}73247325.peach-history-time {7326  font-size: 0.75rem;7327  font-family: 'IBM Plex Mono', ui-monospace, monospace;7328  color: var(--peach-t0);7329  white-space: nowrap;7330  overflow: hidden;7331  text-overflow: ellipsis;7332}73337334.peach-history-sub {7335  font-size: 0.625rem;7336  color: var(--peach-t2);7337  letter-spacing: 0.06em;7338  text-transform: uppercase;7339  white-space: nowrap;7340  overflow: hidden;7341  text-overflow: ellipsis;7342}73437344.peach-history-btn {7345  flex-shrink: 0;7346  white-space: nowrap;7347  min-width: 56px;7348  text-align: center;7349}73507351.peach-history-btn.is-busy {7352  opacity: 0.65;7353}73547355.peach-history-footer {7356  font-size: 0.625rem;7357  color: var(--peach-t3);7358  letter-spacing: 0.05em;7359  text-align: right;7360  margin: 0;7361  padding: 2px 0 0;7362}73637364/* ── Context menu + swipe-copy flash ─────────────────────── */7365.peach-context-menu-backdrop {7366  position: fixed;7367  inset: 0;7368  background: rgba(0, 0, 0, 0.45);7369  z-index: 100;7370  display: flex;7371  align-items: flex-end;7372  justify-content: center;7373  animation: peach-ctx-fade 140ms ease both;7374}7375.peach-context-menu {7376  width: min(360px, calc(100vw - 24px));7377  margin-bottom: max(env(safe-area-inset-bottom), 12px);7378  background: var(--peach-bg);7379  border: 1px solid var(--peach-t3);7380  border-radius: 14px;7381  padding: 6px;7382  display: flex;7383  flex-direction: column;7384  gap: 2px;7385  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7386  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7387}7388@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7389@keyframes peach-ctx-rise {7390  from { transform: translateY(16px); opacity: 0; }7391  to   { transform: translateY(0);    opacity: 1; }7392}7393.peach-context-menu-item {7394  background: transparent;7395  color: var(--peach-t0);7396  border: 0;7397  border-radius: 10px;7398  padding: 12px 14px;7399  text-align: left;7400  font: inherit;7401  cursor: pointer;7402}7403.peach-context-menu-item:hover,7404.peach-context-menu-item:focus-visible {7405  background: var(--peach-t3);7406}7407.peach-context-menu-item--danger {7408  color: var(--peach-health-bad, #d96868);7409}7410.peach-context-menu-item--cancel {7411  color: var(--peach-t2);7412  margin-top: 4px;7413  border-top: 1px solid var(--peach-t3);7414  border-radius: 0 0 10px 10px;7415}74167417/* Swipe-to-copy flash */7418.peach-entry-row.is-copy-flash {7419  animation: peach-copy-flash 600ms ease both;7420}7421@keyframes peach-copy-flash {7422  0%   { background: transparent; }7423  20%  { background: rgba(217, 153, 51, 0.32); }7424  100% { background: transparent; }7425}74267427html { font-size: 16px; }74287429/* ── Recovery word entry ─────────────────────────────────────────── */7430.peach-lock-recover-link {7431  display: block;7432  width: 100%;7433  margin-top: 12px;7434  background: none;7435  border: none;7436  font-family: "IBM Plex Mono", monospace;7437  font-size: 0.625rem;7438  letter-spacing: 0.06em;7439  color: var(--peach-t2);7440  cursor: pointer;7441  text-align: center;7442  padding: 4px;7443  transition: color 120ms ease;7444}7445.peach-lock-recover-link:hover {7446  color: var(--peach-t0);7447}74487449.lock-screen--recovery {7450  display: flex;7451  flex-direction: column;7452  align-items: stretch;7453  padding: 12px 20px 24px;7454  overflow: hidden;7455}74567457.peach-recovery-nav {7458  display: flex;7459  align-items: center;7460  position: relative;7461  z-index: 1;7462  margin-bottom: 4px;7463}74647465/* Mask runes to the top decorative band only — keep inputs and the7466   bottom CTA button clear. The bottom of the popup is reserved for7467   submit buttons; rendering runes there overlaps the button glyph. */7468.peach-rune-background--recovery {7469  -webkit-mask-image: linear-gradient(7470    to bottom,7471    black 0px, black 85px,7472    transparent 110px,7473    transparent 100%7474  );7475  mask-image: linear-gradient(7476    to bottom,7477    black 0px, black 85px,7478    transparent 110px,7479    transparent 100%7480  );7481}74827483.peach-recovery-header {7484  text-align: center;7485  margin-bottom: 16px;7486  margin-top: 4px;7487}7488.peach-recovery-header .peach-onboarding-headline {7489  font-size: 1.25rem;7490  font-weight: 300;7491  letter-spacing: 0.02em;7492  margin: 0 0 4px;7493}7494.peach-recovery-header .peach-hint {7495  font-family: "IBM Plex Mono", monospace;7496  font-size: 0.625rem;7497  color: var(--peach-t2);7498  letter-spacing: 0.04em;7499  margin: 0;7500}75017502/* 12-word grid: 2 columns × 6 rows */7503.peach-recovery-grid {7504  display: grid;7505  grid-template-columns: repeat(2, 1fr);7506  gap: 12px 20px;7507  width: 100%;7508  margin-bottom: 0;7509}75107511.peach-recovery-word-slot {7512  display: flex;7513  align-items: center;7514  gap: 6px;7515  min-width: 0;7516}75177518.peach-recovery-word-index {7519  font-family: "IBM Plex Mono", monospace;7520  font-size: 0.5rem;7521  color: rgba(255, 255, 255, 0.35);7522  min-width: 14px;7523  flex-shrink: 0;7524  text-align: right;7525  letter-spacing: 0.04em;7526}75277528.peach-recovery-word-input {7529  flex: 1;7530  min-width: 0;7531  background: transparent;7532  border: none;7533  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7534  color: var(--peach-t0);7535  font-family: "IBM Plex Mono", monospace;7536  font-size: 0.6875rem;7537  letter-spacing: 0.06em;7538  padding: 5px 2px 4px;7539  outline: none;7540  text-transform: lowercase;7541  transition: border-color 120ms ease;7542}7543.peach-recovery-word-input::placeholder {7544  color: rgba(255, 255, 255, 0.18);7545}7546.peach-recovery-word-input:focus {7547  border-bottom-color: var(--peach-accent);7548}75497550.peach-recovery-submit {7551  width: 100%;7552  margin-top: auto;7553}75547555.peach-recovery-new-password-form {7556  width: 100%;7557  display: flex;7558  flex-direction: column;7559  gap: 16px;7560  margin-bottom: 8px;7561}7562.peach-recovery-new-password-form .peach-newvault-field {7563  display: flex;7564  flex-direction: column;7565  gap: 4px;7566}75677568/* ── Recovery words display (post-create) ────────────────────────── */7569.lock-screen--recovery-display {7570  display: flex;7571  flex-direction: column;7572  align-items: stretch;7573  padding: 0 20px 20px;7574  min-height: 0;7575  overflow-y: auto;7576}75777578.peach-recovery-words-display {7579  width: 100%;7580  margin-bottom: 16px;7581  border: 1px solid var(--peach-t3);7582  border-radius: 8px;7583  padding: 12px 14px;7584  background: rgba(245, 240, 234, 0.04);7585}75867587.peach-recovery-words-label {7588  font-family: "IBM Plex Mono", monospace;7589  font-size: 0.5rem;7590  letter-spacing: 0.08em;7591  color: var(--peach-t2);7592  text-transform: uppercase;7593  margin-bottom: 10px;7594}75957596.peach-recovery-word-list {7597  list-style: none;7598  margin: 0;7599  padding: 0;7600  display: grid;7601  grid-template-columns: repeat(2, 1fr);7602  gap: 6px 16px;7603}76047605.peach-recovery-word-item {7606  display: flex;7607  align-items: baseline;7608  gap: 5px;7609}76107611.peach-recovery-word-num {7612  font-family: "IBM Plex Mono", monospace;7613  font-size: 0.5rem;7614  color: var(--peach-t2);7615  width: 14px;7616  flex: 0 0 14px;7617  text-align: right;7618  letter-spacing: 0.04em;7619  font-variant-numeric: tabular-nums;7620}76217622.peach-recovery-download-btn {7623  display: block;7624  margin: 10px auto 0;7625  padding: 4px 10px;7626  background: transparent;7627  border: 1px solid var(--peach-border);7628  border-radius: 6px;7629  color: var(--peach-t2);7630  font-family: "IBM Plex Mono", monospace;7631  font-size: 0.5625rem;7632  letter-spacing: 0.06em;7633  text-transform: lowercase;7634  cursor: pointer;7635  transition: border-color 0.15s, color 0.15s;7636}76377638.peach-recovery-download-btn:hover {7639  border-color: var(--peach-accent);7640  color: var(--peach-t0);7641}76427643.peach-recovery-word-text {7644  font-family: "IBM Plex Mono", monospace;7645  font-size: 0.6875rem;7646  letter-spacing: 0.06em;7647  color: var(--peach-t0);7648  text-transform: lowercase;7649}76507651.peach-hint--warning {7652  color: var(--peach-accent);7653  font-style: italic;7654}7655.peach-hint--success {7656  color: var(--peach-t2);7657  font-family: "IBM Plex Mono", monospace;7658  font-size: 0.625rem;7659  letter-spacing: 0.06em;7660}76617662/* Confirmation step */7663.peach-recovery-confirm {7664  width: 100%;7665  flex: 1;7666  display: flex;7667  flex-direction: column;7668}7669.peach-recovery-confirm-label {7670  font-family: "IBM Plex Mono", monospace;7671  font-size: 0.5625rem;7672  letter-spacing: 0.04em;7673  color: var(--peach-t2);7674  text-align: center;7675  margin: 0 0 12px;7676}7677.peach-recovery-confirm-fields {7678  display: flex;7679  flex-direction: column;7680  gap: 14px;7681  margin-bottom: 10px;7682}7683.peach-recovery-confirm-field {7684  display: flex;7685  align-items: center;7686  gap: 8px;7687}7688.peach-recovery-confirm-num {7689  font-family: "IBM Plex Mono", monospace;7690  font-size: 0.5rem;7691  color: var(--peach-t2);7692  min-width: 44px;7693  letter-spacing: 0.04em;7694}7695.peach-recovery-confirm-input {7696  flex: 1;7697  background: transparent;7698  border: none;7699  border-bottom: 1px solid var(--peach-t3);7700  color: var(--peach-t0);7701  font-family: "IBM Plex Mono", monospace;7702  font-size: 0.6875rem;7703  letter-spacing: 0.06em;7704  padding: 4px 2px 3px;7705  outline: none;7706  text-transform: lowercase;7707  transition: border-color 120ms ease;7708}7709.peach-recovery-confirm-input:focus {7710  border-bottom-color: var(--peach-accent);7711}7712.peach-recovery-confirm-input:disabled {7713  opacity: 0.4;7714  cursor: not-allowed;7715}7716.peach-recovery-confirm-btn {7717  width: 100%;7718  margin-top: auto;7719}77207721/* ============================================================7722   Sync info sheet7723   ============================================================ */77247725.peach-sync-info-backdrop {7726  position: fixed;7727  inset: 0;7728  z-index: 200;7729  background: rgba(0, 0, 0, 0.55);7730  display: flex;7731  align-items: flex-end;7732  animation: peach-fade-in 200ms ease forwards;7733}77347735@keyframes peach-fade-in {7736  from { opacity: 0; }7737  to   { opacity: 1; }7738}77397740.peach-sync-info-sheet {7741  width: 100%;7742  background: var(--peach-bg-card, var(--peach-bg));7743  border-top-left-radius: 20px;7744  border-top-right-radius: 20px;7745  padding: 12px 24px 32px;7746  display: flex;7747  flex-direction: column;7748  gap: 20px;7749  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;7750}77517752@keyframes peach-sheet-up {7753  from { transform: translateY(100%); }7754  to   { transform: translateY(0); }7755}77567757.peach-sync-info-handle {7758  width: 36px;7759  height: 4px;7760  border-radius: 2px;7761  background: var(--peach-border);7762  margin: 0 auto 4px;7763  flex-shrink: 0;7764}77657766.peach-sync-info-title {7767  font-family: 'Cormorant Garamond', serif;7768  font-style: italic;7769  font-size: 26px;7770  font-weight: 600;7771  color: var(--peach-t0);7772  margin: 0;7773  line-height: 1.2;7774}77757776.peach-sync-info-body {7777  display: flex;7778  flex-direction: column;7779  gap: 14px;7780}77817782.peach-sync-info-point {7783  display: flex;7784  gap: 12px;7785  align-items: flex-start;7786  font-size: 14px;7787  color: var(--peach-t2);7788  line-height: 1.6;7789  margin: 0;7790}77917792.peach-sync-info-icon {7793  color: var(--peach-accent);7794  font-size: 16px;7795  flex-shrink: 0;7796  margin-top: 1px;7797}77987799.peach-sync-info-actions {7800  display: flex;7801  flex-direction: column;7802  gap: 12px;7803  margin-top: 4px;7804}78057806.peach-sync-info-pro-link {7807  background: none;7808  border: none;7809  font-size: 13px;7810  color: var(--peach-t3);7811  cursor: pointer;7812  padding: 0;7813  font-family: inherit;7814  text-align: center;7815  transition: color 150ms ease;7816}78177818.peach-sync-info-pro-link:hover {7819  color: var(--peach-accent);7820}78217822.peach-btn--full {7823  width: 100%;7824}78257826/* ── Sync screen ── */78277828.peach-sync-coming-soon {7829  display: flex;7830  align-items: flex-start;7831  gap: 10px;7832  padding: 12px 14px;7833  background: var(--peach-s1);7834  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);7835  border-radius: 10px;7836}7837.peach-sync-coming-soon__icon {7838  flex-shrink: 0;7839  color: var(--peach-accent);7840  margin-top: 1px;7841  line-height: 0;7842}7843.peach-sync-coming-soon__title {7844  font-family: 'Cormorant Garamond', serif;7845  font-weight: 500;7846  font-size: 13px;7847  color: var(--peach-accent);7848  margin: 0 0 5px;7849  line-height: 1.3;7850}7851.peach-sync-coming-soon__body {7852  font-size: 12px;7853  color: var(--peach-t1);7854  line-height: 1.55;7855  margin: 0;7856}78577858.peach-sync-screen {7859  display: flex;7860  flex-direction: column;7861  height: 100%;7862}78637864.peach-sync-content {7865  flex: 1;7866  overflow-y: auto;7867  padding: 24px 20px 40px;7868  display: flex;7869  flex-direction: column;7870  gap: 24px;7871}78727873/* Intro (State A) */7874.peach-sync-headline {7875  font-family: 'Cormorant Garamond', serif;7876  font-style: italic;7877  font-size: 28px;7878  font-weight: 600;7879  color: var(--peach-t0);7880  margin: 0 0 10px;7881  line-height: 1.2;7882}78837884.peach-sync-intro-body {7885  font-size: 14px;7886  color: var(--peach-t1);7887  line-height: 1.6;7888  margin: 0;7889}78907891.peach-sync-pro-note {7892  display: flex;7893  flex-direction: column;7894  gap: 8px;7895  background: var(--peach-t3);7896  border-radius: 10px;7897  padding: 12px 14px;7898}78997900.peach-sync-pro-note-text {7901  font-size: 12px;7902  color: var(--peach-t2);7903  line-height: 1.5;7904  margin: 0;7905}79067907.peach-sync-pro-link {7908  background: none;7909  border: none;7910  font-size: 12px;7911  color: var(--peach-accent);7912  cursor: pointer;7913  padding: 0;7914  font-family: inherit;7915  text-align: left;7916}79177918/* Status (State C) */7919.peach-sync-status {7920  padding: 12px 0;7921  border-bottom: 1px solid var(--peach-border);7922}79237924.peach-sync-status-row {7925  display: flex;7926  align-items: center;7927  gap: 8px;7928}79297930.peach-sync-dot {7931  width: 7px;7932  height: 7px;7933  border-radius: 50%;7934  flex-shrink: 0;7935}79367937.peach-sync-dot--green { background: var(--peach-health-ok); }7938.peach-sync-dot--amber { background: var(--peach-accent); }79397940.peach-sync-status-text {7941  font-family: 'IBM Plex Mono', monospace;7942  font-size: 11px;7943  color: var(--peach-t2);7944}79457946/* Paired devices */7947.peach-sync-section {7948  display: flex;7949  flex-direction: column;7950  gap: 2px;7951}79527953.peach-sync-section-label {7954  font-family: 'IBM Plex Mono', monospace;7955  font-size: 10px;7956  letter-spacing: 0.1em;7957  color: var(--peach-t3);7958  margin: 0 0 10px;7959}79607961.peach-sync-device-row {7962  display: flex;7963  justify-content: space-between;7964  align-items: baseline;7965  padding: 10px 0;7966  border-bottom: 1px solid var(--peach-border);7967  gap: 12px;7968}79697970.peach-sync-device-name {7971  font-size: 14px;7972  color: var(--peach-t1);7973}79747975.peach-sync-device-meta {7976  font-family: 'IBM Plex Mono', monospace;7977  font-size: 11px;7978  color: var(--peach-t3);7979  white-space: nowrap;7980}79817982.peach-sync-hub-note {7983  padding: 14px 16px;7984  border: 1px solid var(--peach-border);7985  border-radius: 10px;7986  display: flex;7987  flex-direction: column;7988  gap: 6px;7989  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);7990}79917992.peach-sync-hub-note-title {7993  font-size: 13px;7994  font-weight: 600;7995  color: var(--peach-t0);7996  margin: 0;7997}79987999.peach-sync-hub-note-body {8000  font-size: 12px;8001  color: var(--peach-t2);8002  line-height: 1.6;8003  margin: 0;8004}80058006/* Action buttons */8007.peach-sync-actions {8008  display: flex;8009  gap: 10px;8010  flex-wrap: wrap;8011}80128013/* Upgrade prompt (State B) */8014.peach-sync-upgrade {8015  display: flex;8016  flex-direction: column;8017  gap: 12px;8018  padding: 16px;8019  border: 1px solid var(--peach-border);8020  border-radius: 10px;8021}80228023.peach-sync-upgrade-text {8024  font-size: 13px;8025  color: var(--peach-t2);8026  line-height: 1.6;8027  margin: 0;8028}80298030/* Network note */8031.peach-sync-network-note {8032  font-size: 12px;8033  color: var(--peach-t3);8034  line-height: 1.6;8035  margin: 0;8036}80378038/* Advanced */8039.peach-sync-advanced {8040  margin-top: auto;8041  padding-top: 16px;8042  border-top: 1px solid var(--peach-border);8043}80448045.peach-sync-advanced-toggle {8046  display: flex;8047  align-items: center;8048  gap: 8px;8049  background: none;8050  border: none;8051  font-family: 'IBM Plex Mono', monospace;8052  font-size: 11px;8053  letter-spacing: 0.08em;8054  color: var(--peach-t3);8055  cursor: pointer;8056  padding: 0;8057  text-transform: uppercase;8058}80598060.peach-sync-advanced-chevron {8061  display: inline-block;8062  transition: transform 200ms ease;8063  font-size: 10px;8064}80658066.peach-sync-advanced-chevron.is-open {8067  transform: rotate(90deg);8068}80698070.peach-sync-advanced-content {8071  margin-top: 14px;8072}80738074.peach-sync-advanced-row {8075  display: flex;8076  justify-content: space-between;8077  align-items: center;8078  gap: 16px;8079}80808081.peach-sync-advanced-title {8082  font-size: 14px;8083  color: var(--peach-t1);8084  margin: 0 0 2px;8085}80868087.peach-sync-advanced-subtitle {8088  font-size: 12px;8089  color: var(--peach-t3);8090  margin: 0;8091  line-height: 1.5;8092}80938094/* ── Add Device — Android scan tabs ─────────────────────────────────────── */80958096.peach-pairing-tabs {8097  display: flex;8098  border: 1px solid var(--peach-border);8099  border-radius: 8px;8100  overflow: hidden;8101  margin-bottom: 4px;8102}81038104.peach-pairing-tab {8105  flex: 1;8106  padding: 10px 0;8107  background: none;8108  border: none;8109  font-family: 'IBM Plex Mono', monospace;8110  font-size: 11px;8111  letter-spacing: 0.06em;8112  color: var(--peach-t2);8113  cursor: pointer;8114  transition: background 150ms, color 150ms;8115}81168117.peach-pairing-tab.is-active {8118  background: var(--peach-accent);8119  color: #fff;8120  font-weight: 600;8121}81228123.peach-pairing-tab:not(.is-active):active {8124  background: var(--peach-border);8125}81268127/* Camera view */8128.peach-pairing-camera-container {8129  position: relative;8130  width: 100%;8131  aspect-ratio: 1;8132  border-radius: 12px;8133  overflow: hidden;8134  background: #000;8135  flex-shrink: 0;8136}81378138.peach-pairing-video {8139  width: 100%;8140  height: 100%;8141  object-fit: cover;8142}81438144.peach-pairing-scan-frame {8145  position: absolute;8146  top: 50%;8147  left: 50%;8148  transform: translate(-50%, -50%);8149  width: 60%;8150  aspect-ratio: 1;8151  border: 2px solid var(--peach-accent);8152  border-radius: 8px;8153  pointer-events: none;8154}81558156/* ── Notes Mode ── */81578158/* Overlay that crossfades over the vault */8159.peach-notes-overlay {8160  position: fixed;8161  inset: 0;8162  z-index: 90;8163  opacity: 0;8164  pointer-events: none;8165  animation: peach-mode-in 220ms ease-in forwards;8166}81678168.peach-notes-overlay.is-visible {8169  opacity: 1;8170  pointer-events: auto;8171}81728173@keyframes peach-mode-in {8174  from { opacity: 0; }8175  to   { opacity: 1; }8176}81778178/* Top-level notes surface */8179.peach-notes-mode {8180  position: absolute;8181  inset: 0;8182  background: var(--peach-bg);8183  display: flex;8184  flex-direction: column;8185}81868187/* Rune canvas positioned behind content */8188.peach-note-rune-canvas {8189  position: absolute;8190  inset: 0;8191  width: 100%;8192  height: 100%;8193  pointer-events: none;8194  z-index: 0;8195}81968197/* TOC wrapper */8198.peach-notes-toc-wrapper {8199  position: absolute;8200  inset: 0;8201  z-index: 1;8202  opacity: 1;8203  pointer-events: auto;8204  transition: opacity 200ms ease;8205}82068207.peach-notes-toc-wrapper.is-hidden {8208  opacity: 0;8209  pointer-events: none;8210}82118212/* Editor wrapper */8213.peach-notes-editor-wrapper {8214  position: absolute;8215  inset: 0;8216  z-index: 2;8217  opacity: 0;8218  pointer-events: none;8219  transition: opacity 200ms ease;8220}82218222.peach-notes-editor-wrapper.is-visible {8223  opacity: 1;8224  pointer-events: auto;8225}82268227/* TOC inner */8228.peach-notes-toc {8229  position: relative;8230  display: flex;8231  flex-direction: column;8232  height: 100%;8233  padding-top: env(safe-area-inset-top, 0px);8234  padding-bottom: env(safe-area-inset-bottom, 0px);8235}82368237/* Shared header */8238.peach-notes-header {8239  display: flex;8240  align-items: center;8241  padding: 12px 16px;8242  gap: 12px;8243  flex-shrink: 0;8244  min-height: 52px;8245  position: relative;8246  z-index: 2;8247}82488249.peach-notes-back {8250  font-size: 22px;8251  color: var(--peach-t2);8252  background: none;8253  border: none;8254  padding: 4px;8255  cursor: pointer;8256  line-height: 1;8257  flex-shrink: 0;8258  transition: color 150ms ease;8259  -webkit-tap-highlight-color: transparent;8260}82618262.peach-notes-back:active { color: var(--peach-t0); }82638264.peach-notes-header-title {8265  flex: 1;8266  font-family: 'Cormorant Garamond', serif;8267  font-style: italic;8268  font-size: 22px;8269  color: var(--peach-t0);8270  text-align: center;8271}82728273.peach-notes-header-title.is-breadcrumb {8274  font-family: 'IBM Plex Mono', monospace;8275  font-style: normal;8276  font-size: 11px;8277  color: var(--peach-t3);8278  letter-spacing: 0.08em;8279  text-transform: uppercase;8280  cursor: pointer;8281}82828283.peach-notes-header-actions {8284  display: flex;8285  gap: 8px;8286  flex-shrink: 0;8287}82888289.peach-notes-header-btn {8290  width: 36px;8291  height: 36px;8292  display: flex;8293  align-items: center;8294  justify-content: center;8295  background: none;8296  border: none;8297  color: var(--peach-t2);8298  cursor: pointer;8299  border-radius: 8px;8300  font-size: 16px;8301  transition: color 150ms ease, background 150ms ease;8302  -webkit-tap-highlight-color: transparent;8303}83048305.peach-notes-header-btn:active {8306  background: rgba(255,255,255,0.06);8307  color: var(--peach-t0);8308}83098310/* Inline search bar */8311.peach-notes-search-input {8312  flex: 1;8313  background: none;8314  border: none;8315  outline: none;8316  font-family: 'IBM Plex Mono', monospace;8317  font-size: 13px;8318  color: var(--peach-t0);8319  padding: 4px 0;8320  letter-spacing: 0.02em;8321}83228323.peach-notes-search-input::placeholder {8324  color: var(--peach-t3);8325}83268327/* TOC list */8328.peach-notes-list-container {8329  flex: 1;8330  overflow-y: auto;8331  overflow-x: hidden;8332  scrollbar-width: none;8333  -webkit-overflow-scrolling: touch;8334  overscroll-behavior: contain;8335  position: relative;8336  z-index: 1;8337}83388339.peach-notes-list-container::-webkit-scrollbar { display: none; }83408341/* Note row */8342.peach-note-row {8343  position: relative;8344  display: grid;8345  grid-template-columns: 44px 8px 1fr 8px auto;8346  align-items: center;8347  min-height: 72px;8348  padding: 16px 20px;8349  border-bottom: 0.5px solid var(--peach-border);8350  cursor: pointer;8351  overflow: hidden;8352  touch-action: pan-y;8353  user-select: none;8354  -webkit-user-select: none;8355  -webkit-tap-highlight-color: transparent;8356}83578358.peach-note-row:first-child {8359  border-top: 0.5px solid var(--peach-border);8360}83618362.peach-note-row:active {8363  background: rgba(255,255,255,0.02);8364}83658366.peach-note-numeral {8367  font-family: 'Cormorant Garamond', serif;8368  font-style: italic;8369  font-size: 15px;8370  color: var(--peach-accent);8371  text-align: right;8372  line-height: 1;8373  flex-shrink: 0;8374}83758376.peach-note-title-gap { /* grid spacer */ }83778378.peach-note-title {8379  font-family: 'Cormorant Garamond', serif;8380  font-style: italic;8381  font-size: 18px;8382  color: var(--peach-t0);8383  line-height: 1.3;8384  min-width: 0;8385  overflow-wrap: break-word;8386}83878388.peach-note-title-match {8389  color: var(--peach-accent);8390}83918392.peach-note-date {8393  font-family: 'IBM Plex Mono', monospace;8394  font-size: 11px;8395  color: var(--peach-t2);8396  white-space: nowrap;8397  text-align: right;8398  flex-shrink: 0;8399  grid-column: 5;8400}84018402/* Swipe underlays */8403.peach-note-row-underlay {8404  position: absolute;8405  inset: 0;8406  display: flex;8407  align-items: center;8408  padding: 0 24px;8409  font-family: 'IBM Plex Mono', monospace;8410  font-size: 11px;8411  letter-spacing: 0.1em;8412  pointer-events: none;8413  z-index: 0;8414}84158416.peach-note-row-underlay--delete {8417  background: #8B2020;8418  color: rgba(255,255,255,0.9);8419  justify-content: flex-end;8420}84218422.peach-note-row-underlay--archive {8423  background: var(--peach-accent);8424  color: #0C0A06;8425  justify-content: flex-start;8426}84278428/* Delete confirm strip */8429.peach-note-delete-confirm {8430  position: absolute;8431  inset: 0;8432  background: var(--peach-bg);8433  display: flex;8434  align-items: center;8435  gap: 12px;8436  padding: 0 20px;8437  font-family: 'IBM Plex Mono', monospace;8438  font-size: 11px;8439  color: var(--peach-t1);8440  letter-spacing: 0.04em;8441  animation: peach-delete-confirm-in 150ms ease both;8442  z-index: 10;8443}84448445@keyframes peach-delete-confirm-in {8446  from { opacity: 0; }8447  to   { opacity: 1; }8448}84498450.peach-note-delete-confirm-btn {8451  background: #8B2020;8452  color: rgba(255,255,255,0.9);8453  border: none;8454  border-radius: 6px;8455  padding: 4px 10px;8456  font-family: 'IBM Plex Mono', monospace;8457  font-size: 10px;8458  cursor: pointer;8459  letter-spacing: 0.06em;8460}84618462.peach-note-delete-cancel-btn {8463  background: none;8464  border: none;8465  color: var(--peach-t3);8466  font-family: 'IBM Plex Mono', monospace;8467  font-size: 10px;8468  cursor: pointer;8469  letter-spacing: 0.06em;8470  padding: 4px 6px;8471}84728473/* + New note button */8474.peach-notes-new-btn {8475  font-family: 'IBM Plex Mono', monospace;8476  font-size: 12px;8477  color: var(--peach-t3);8478  text-align: center;8479  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8480  background: none;8481  border: none;8482  width: 100%;8483  cursor: pointer;8484  letter-spacing: 0.04em;8485  transition: color 150ms ease;8486  -webkit-tap-highlight-color: transparent;8487}84888489.peach-notes-new-btn:active { color: var(--peach-accent); }84908491/* Empty state */8492.peach-notes-empty {8493  display: flex;8494  flex-direction: column;8495  align-items: center;8496  justify-content: center;8497  flex: 1;8498  padding: 48px 32px;8499  gap: 16px;8500}85018502.peach-notes-empty-text {8503  font-family: 'Cormorant Garamond', serif;8504  font-style: italic;8505  font-size: 20px;8506  color: var(--peach-t3);8507  text-align: center;8508  margin: 0;8509  line-height: 1.4;8510  white-space: pre-line;8511}85128513/* ── Editor surface ── */85148515.peach-note-editor-surface {8516  position: absolute;8517  inset: 0;8518  background: var(--peach-bg);8519  display: flex;8520  flex-direction: column;8521  padding-top: env(safe-area-inset-top, 0px);8522}85238524.peach-note-editor-scroll {8525  flex: 1;8526  overflow-y: auto;8527  overflow-x: hidden;8528  scrollbar-width: none;8529  -webkit-overflow-scrolling: touch;8530  padding: 0 24px 120px;8531  position: relative;8532  z-index: 1;8533}85348535.peach-note-editor-scroll::-webkit-scrollbar { display: none; }85368537/* Desktop toolbar (always visible above body) */8538.peach-note-toolbar-desktop-inline {8539  display: flex;8540  align-items: center;8541  gap: 2px;8542  padding: 6px 0 12px;8543  margin-bottom: 4px;8544  border-bottom: 0.5px solid var(--peach-border);8545}85468547/* Title field */8548.peach-note-title-field {8549  font-family: 'Cormorant Garamond', serif;8550  font-style: italic;8551  font-size: 32px;8552  font-weight: 600;8553  color: var(--peach-t0);8554  line-height: 1.2;8555  padding: 8px 0 0;8556  outline: none;8557  min-height: 44px;8558  word-break: break-word;8559  position: relative;8560  z-index: 1;8561}85628563.peach-note-title-field:empty::before {8564  content: attr(data-placeholder);8565  color: var(--peach-t3);8566  pointer-events: none;8567}85688569/* Hairline separator */8570.peach-note-hairline {8571  height: 0.5px;8572  background: var(--peach-border);8573  margin: 12px 0 20px;8574  position: relative;8575  z-index: 1;8576}85778578/* Body field */8579.peach-note-body-field {8580  font-family: 'DM Sans', sans-serif;8581  font-size: 16px;8582  color: var(--peach-t0);8583  line-height: 1.85;8584  padding: 0;8585  outline: none;8586  min-height: 240px;8587  word-break: break-word;8588  position: relative;8589  z-index: 1;8590}85918592.peach-note-body-field:empty::before {8593  content: attr(data-placeholder);8594  color: var(--peach-t3);8595  font-style: italic;8596  pointer-events: none;8597}85988599.peach-note-body-field h2 {8600  font-family: 'Cormorant Garamond', serif;8601  font-style: italic;8602  font-size: 22px;8603  font-weight: 600;8604  color: var(--peach-t0);8605  margin: 20px 0 8px;8606}86078608.peach-note-body-field blockquote {8609  border-left: 2px solid var(--peach-accent);8610  margin: 12px 0;8611  padding-left: 16px;8612  color: var(--peach-t1);8613  font-style: italic;8614}86158616.peach-note-body-field ul,8617.peach-note-body-field ol {8618  padding-left: 20px;8619  margin: 8px 0;8620}86218622.peach-note-body-field li {8623  margin: 4px 0;8624}86258626.peach-note-body-field hr {8627  border: none;8628  border-top: 0.5px solid var(--peach-border);8629  margin: 16px 0;8630}86318632/* Saved indicator */8633.peach-note-saved-indicator {8634  font-family: 'IBM Plex Mono', monospace;8635  font-size: 11px;8636  color: var(--peach-t3);8637  letter-spacing: 0.04em;8638  text-align: right;8639  padding: 6px 24px;8640  flex-shrink: 0;8641  transition: opacity 300ms ease;8642  pointer-events: none;8643  position: relative;8644  z-index: 1;8645}86468647/* Mobile keyboard toolbar */8648.peach-note-toolbar-mobile {8649  display: flex;8650  align-items: center;8651  padding: 8px 16px;8652  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));8653  background: var(--peach-bg);8654  border-top: 0.5px solid var(--peach-border);8655  gap: 4px;8656  flex-shrink: 0;8657  position: relative;8658  z-index: 10;8659}86608661.peach-note-toolbar-btn {8662  min-width: 36px;8663  height: 36px;8664  display: flex;8665  align-items: center;8666  justify-content: center;8667  background: none;8668  border: none;8669  border-radius: 8px;8670  cursor: pointer;8671  font-size: 14px;8672  color: var(--peach-t1);8673  font-family: 'DM Sans', sans-serif;8674  font-weight: 600;8675  transition: background 100ms ease, color 100ms ease;8676  -webkit-tap-highlight-color: transparent;8677}86788679.peach-note-toolbar-btn--italic { font-style: italic; }8680.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }8681.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }86828683.peach-note-toolbar-divider {8684  width: 0.5px;8685  height: 20px;8686  background: var(--peach-border);8687  margin: 0 4px;8688  flex-shrink: 0;8689}86908691.peach-note-toolbar-spacer { flex: 1; }86928693/* Desktop: larger headline in TOC */8694@media (min-width: 400px) {8695  .peach-notes-header-title:not(.is-breadcrumb) {8696    font-size: 32px;8697  }86988699  .peach-note-row {8700    min-height: 64px;8701    padding: 14px 16px;8702  }8703}87048705/* Flying title — shared element during expansion/collapse */87068707/* ─── Light theme overrides ───────────────────────────────────────────────8708   Tokens that cannot be expressed as variable substitutions — hardcoded8709   context-specific values that need separate light-mode rules. */87108711/* Settings section headers: use text-label (#5C4228) for more presence8712   than --t2 alone — gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY8713   the dark anchor they need against the warmer background. */8714.light .peach-settings-sub-label,8715[data-theme="light"] .peach-settings-sub-label,8716.light .peach-settings-nav-label,8717[data-theme="light"] .peach-settings-nav-label {8718  color: #5C4228;8719}87208721/* Secondary action buttons (ghost / subtle): filled with the sunken surface8722   colour so they read as embedded and intentional on the linen background8723   rather than floating. Values track --s3 (bg-sunken) and border-default. */8724.light .peach-btn--ghost,8725[data-theme="light"] .peach-btn--ghost {8726  background: #C4BCB5;8727  border-color: #96724C;8728  color: #1A1208;8729}8730.light .peach-btn--subtle,8731[data-theme="light"] .peach-btn--subtle {8732  background: #C4BCB5;8733  border-color: #96724C;8734}87358736/* Wide secondary action button on the lock screen — override the8737   hardcoded dark-mode rgba values with warm-surface equivalents. */8738.light .peach-lock-secondary,8739[data-theme="light"] .peach-lock-secondary {8740  background: #C4BCB5;8741  border-color: #96724C;8742  color: #1A1208;8743}8744.light .peach-lock-secondary:hover,8745[data-theme="light"] .peach-lock-secondary:hover {8746  background: #C9C0B8;8747}87488749/* Entry row hover: replace the near-invisible light-on-light rgba value. */8750.light .peach-entry-row:hover,8751[data-theme="light"] .peach-entry-row:hover {8752  background: rgba(26, 18, 8, 0.05);8753}8754.light .peach-entry-row.is-active,8755[data-theme="light"] .peach-entry-row.is-active {8756  background: rgba(26, 18, 8, 0.04);8757}8758.light .peach-entry-row.is-selected,8759[data-theme="light"] .peach-entry-row.is-selected {8760  background: rgba(26, 18, 8, 0.06);8761}87628763/* ──────────────────────────────────────────────────────────────────────────8764   Chirp pairing flow — bird-stage animation (Phase 1)8765   See src/popup/components/ChirpPairingFlow.tsx and the brief §6.2.8766   Three-act animation gated on the [data-phase] attribute of8767   .peach-chirp-pair; child layers (birds, chirp arcs, flight wave, dot)8768   each react via either pose class or visibility flag.8769   Tokens: accent surfaces use var(--peach-accent); bird illustration8770   colours are baked into the SVG per the brand-peach exception in §3.1.8771   ────────────────────────────────────────────────────────────────────── */87728773.peach-chirp-pair {8774  position: absolute;8775  inset: 0;8776  z-index: 3;8777  display: flex;8778  flex-direction: column;8779  padding: 14px 12px 12px;8780  width: 100%;8781  box-sizing: border-box;8782  gap: 0;8783  background:8784    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),8785    var(--peach-bg);8786  color: var(--peach-t0);8787  overflow-y: auto;8788  overflow-x: hidden;8789  scrollbar-width: none;8790  isolation: isolate;8791  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;8792}8793@keyframes peach-chirp-overlay-in {8794  from { opacity: 0; transform: translateY(8px); }8795  to   { opacity: 1; transform: translateY(0); }8796}8797.peach-chirp-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }8798.peach-chirp-pair::before {8799  content: '';8800  position: absolute;8801  inset: 0;8802  border-radius: inherit;8803  pointer-events: none;8804  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);8805  z-index: 0;8806}8807.peach-chirp-pair > * { position: relative; z-index: 1; }88088809/* Header --------------------------------------------------------------- */8810.peach-chirp-head {8811  display: flex; align-items: center; gap: 10px;8812}8813.peach-chirp-back {8814  width: 32px; height: 32px;8815  display: inline-flex; align-items: center; justify-content: center;8816  background: color-mix(in srgb, var(--peach-t0) 6%, transparent);8817  border: 1px solid color-mix(in srgb, var(--peach-t0) 12%, transparent);8818  border-radius: 8px;8819  color: var(--peach-t1);8820  cursor: pointer;8821  transition: background 0.15s ease, color 0.15s ease;8822}8823.peach-chirp-back:hover {8824  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);8825  color: var(--peach-t0);8826}8827.peach-chirp-title {8828  font-family: var(--font-display, Georgia, serif);8829  font-style: italic;8830  font-size: 24px;8831  font-weight: 500;8832  letter-spacing: 0.005em;8833  color: var(--peach-t0);8834  line-height: 1;8835}8836.peach-chirp-head-spacer { flex: 1; }88378838/* Chip row ------------------------------------------------------------- */8839.peach-chirp-chip-row {8840  display: flex;8841  align-items: center;8842  justify-content: flex-start;8843  margin-top: 12px;8844}8845.peach-chirp-chip {8846  display: inline-flex; align-items: center; gap: 8px;8847  padding: 5px 10px 5px 8px;8848  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);8849  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);8850  border-radius: 999px;8851  font-family: var(--peach-mono, ui-monospace, monospace);8852  font-size: 11px;8853  letter-spacing: 0.04em;8854  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));8855}8856.peach-chirp-chip-dot {8857  width: 6px; height: 6px; border-radius: 50%;8858  background: var(--peach-accent);8859  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);8860}8861.peach-chirp-chip[data-phase="paired"] {8862  background: color-mix(in srgb, #4f9eda 12%, transparent);8863  border-color: color-mix(in srgb, #4f9eda 28%, transparent);8864  color: #76b6e8;8865}8866.peach-chirp-chip[data-phase="paired"] .peach-chirp-chip-dot {8867  background: #76b6e8;8868  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);8869}8870.peach-chirp-chip[data-phase="timeout"],8871.peach-chirp-chip[data-phase="mic_denied"],8872.peach-chirp-chip[data-phase="version_mismatch"],8873.peach-chirp-chip[data-phase="handshake_failed"] {8874  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);8875  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);8876  color: var(--peach-warn, #d29257);8877}8878.peach-chirp-chip[data-phase="timeout"] .peach-chirp-chip-dot,8879.peach-chirp-chip[data-phase="mic_denied"] .peach-chirp-chip-dot,8880.peach-chirp-chip[data-phase="version_mismatch"] .peach-chirp-chip-dot,8881.peach-chirp-chip[data-phase="handshake_failed"] .peach-chirp-chip-dot {8882  background: var(--peach-warn, #d29257);8883  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);8884}88858886/* Bird stage ----------------------------------------------------------- */8887.peach-chirp-stage {8888  position: relative;8889  margin: 14px 0 8px;8890  height: 180px;8891  border-radius: 12px;8892  background:8893    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),8894    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),8895    color-mix(in srgb, var(--peach-bg) 92%, #000);8896  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);8897  overflow: hidden;8898  isolation: isolate;8899}8900.peach-chirp-stage::after {8901  content: '';8902  position: absolute;8903  left: 12%; right: 12%;8904  bottom: 36px;8905  height: 1px;8906  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);8907}89088909.peach-chirp-bird-slot {8910  position: absolute;8911  bottom: 8px;8912  width: 100px;8913  height: 110px;8914  display: flex;8915  align-items: flex-end;8916  justify-content: center;8917}8918.peach-chirp-bird-slot-desktop { left: 28px; }8919.peach-chirp-bird-slot-mobile { right: 28px; }89208921/* Mobile bird hops in from the right when handshake begins */8922.peach-chirp-bird-slot-mobile {8923  opacity: 1;8924  transform: translateX(-6px);8925  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);8926}8927.peach-chirp-stage.act-listening .peach-chirp-bird-slot-mobile,8928.peach-chirp-stage.act-chirping .peach-chirp-bird-slot-mobile,8929.peach-chirp-stage.act-idle .peach-chirp-bird-slot-mobile {8930  opacity: 0;8931  transform: translateX(60px) rotate(8deg);8932}8933.peach-chirp-stage.act-handshake .peach-chirp-bird-slot-desktop,8934.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop {8935  transform: translateX(6px);8936  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);8937}89388939/* Paired: both birds bob together */8940.peach-chirp-stage.act-paired .peach-chirp-bird-slot {8941  animation: peach-chirp-happy-bob 1.2s ease-in-out infinite;8942}8943.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { animation-delay: 0.2s; }8944.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop { --bb-x: 6px; }8945.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { --bb-x: -6px; }8946@keyframes peach-chirp-happy-bob {8947  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }8948  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }8949}89508951/* Bird internal -------------------------------------------------------- */8952.peach-chirp-bird {8953  width: 108px;8954  height: 108px;8955  transform-origin: 50% 95%;8956}8957.peach-chirp-bird svg { width: 100%; height: 100%; overflow: visible; }89588959.peach-chirp-bird-body {8960  transform-origin: 50% 80%;8961  animation: peach-chirp-bird-bob 2.4s ease-in-out infinite;8962}8963@keyframes peach-chirp-bird-bob {8964  0%, 100% { transform: translateY(0) scale(1, 1); }8965  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }8966}89678968.peach-chirp-bird-eye-group {8969  animation: peach-chirp-blink 5.2s steps(1, end) infinite;8970  transform-origin: center;8971  transform-box: fill-box;8972}8973@keyframes peach-chirp-blink {8974  0%, 92%, 96%, 100% { transform: scaleY(1); }8975  94%                { transform: scaleY(0.05); }8976}89778978/* Pose: chirping — beak opens, head bobs, aura blooms */8979.peach-chirp-bird-pose-chirping .peach-chirp-bird-body {8980  animation:8981    peach-chirp-bird-bob 2.4s ease-in-out infinite,8982    peach-chirp-squeeze 1.7s ease-in-out infinite;8983}8984@keyframes peach-chirp-squeeze {8985  0%, 70%, 100% { transform-origin: 50% 85%; }8986  78%           { transform: scale(1.04, 0.96) translateY(1px); }8987  86%           { transform: scale(0.98, 1.02); }8988}8989.peach-chirp-bird-pose-chirping .peach-chirp-bird-head-group {8990  animation: peach-chirp-head-bob 1.7s ease-in-out infinite;8991}8992@keyframes peach-chirp-head-bob {8993  0%, 70%, 100% { transform: translateY(0) rotate(0); }8994  78%           { transform: translateY(-3px) rotate(-4deg); }8995  86%           { transform: translateY(-1px) rotate(-2deg); }8996}8997.peach-chirp-bird-pose-chirping .peach-chirp-bird-beak {8998  animation: peach-chirp-beak-open 1.7s ease-in-out infinite;8999}9000@keyframes peach-chirp-beak-open {9001  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9002  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9003  86%           { transform: rotate(-6deg); }9004}9005.peach-chirp-bird-pose-chirping .peach-chirp-bird-aura {9006  animation: peach-chirp-aura 1.7s ease-in-out infinite;9007}9008@keyframes peach-chirp-aura {9009  0%, 100% { opacity: 0; }9010  50%      { opacity: 0.8; }9011}9012.peach-chirp-bird-pose-chirping .peach-chirp-bird-tail {9013  animation: peach-chirp-tail-twitch 1.7s ease-in-out infinite;9014  transform-origin: 100% 50%;9015}9016@keyframes peach-chirp-tail-twitch {9017  0%, 75%, 100% { transform: rotate(0); }9018  82%           { transform: rotate(-3deg) translateX(-1px); }9019}90209021/* Pose: attentive — head tilts toward partner */9022.peach-chirp-bird-pose-attentive .peach-chirp-bird-head-group {9023  animation: peach-chirp-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9024}9025@keyframes peach-chirp-head-tilt {9026  0%   { transform: rotate(0) translateY(0); }9027  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9028  100% { transform: rotate(-6deg); }9029}9030.peach-chirp-bird-pose-attentive .peach-chirp-bird-tail {9031  animation: peach-chirp-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9032  transform-origin: 100% 50%;9033}9034@keyframes peach-chirp-tail-cock {9035  0%   { transform: rotate(0); }9036  100% { transform: rotate(-4deg); }9037}90389039/* Pose: happy — wing flutter, tuft perk, tail wag */9040.peach-chirp-bird-pose-happy .peach-chirp-bird-wing {9041  transform-origin: 80% 60%;9042  animation: peach-chirp-wing-flutter 0.32s ease-in-out 5;9043}9044@keyframes peach-chirp-wing-flutter {9045  0%, 100% { transform: rotate(0) translateY(0); }9046  50%      { transform: rotate(-16deg) translateY(-2px); }9047}9048.peach-chirp-bird-pose-happy .peach-chirp-bird-tuft {9049  transform-origin: 0% 100%;9050  animation: peach-chirp-tuft-perk 0.4s ease-in-out 3;9051}9052@keyframes peach-chirp-tuft-perk {9053  0%, 100% { transform: rotate(0); }9054  50%      { transform: rotate(-15deg) translateY(-1px); }9055}9056.peach-chirp-bird-pose-happy .peach-chirp-bird-tail {9057  transform-origin: 100% 50%;9058  animation: peach-chirp-tail-wag 0.5s ease-in-out 4;9059}9060@keyframes peach-chirp-tail-wag {9061  0%, 100% { transform: rotate(0); }9062  25%      { transform: rotate(6deg); }9063  75%      { transform: rotate(-6deg); }9064}9065.peach-chirp-bird-pose-happy .peach-chirp-bird-head-group {9066  animation: peach-chirp-head-perk 0.5s ease-out;9067}9068@keyframes peach-chirp-head-perk {9069  0%   { transform: translateY(0); }9070  40%  { transform: translateY(-3px) rotate(2deg); }9071  100% { transform: translateY(0); }9072}90739074/* Pose: sad — body droops forward */9075.peach-chirp-bird-pose-sad .peach-chirp-bird-body {9076  transform: translateY(5px) rotate(-2deg);9077  animation: none;9078}9079.peach-chirp-bird-pose-sad .peach-chirp-bird-head-group {9080  transform: translateY(4px) rotate(8deg);9081}9082.peach-chirp-bird-pose-sad .peach-chirp-bird-tuft { transform: rotate(15deg) translateY(2px); }9083.peach-chirp-bird-pose-sad .peach-chirp-bird-tail { transform: rotate(8deg) translateY(2px); }90849085.peach-chirp-bird-pose-hidden { opacity: 0; }90869087/* Chirp arcs ----------------------------------------------------------- */9088.peach-chirp-arcs {9089  position: absolute;9090  top: 18px;9091  width: 96px;9092  height: 70px;9093  pointer-events: none;9094}9095.peach-chirp-arcs-right { right: -60px; }9096.peach-chirp-arcs-left  { left: -60px; transform: scaleX(-1); }9097.peach-chirp-arc {9098  position: absolute;9099  top: 50%;9100  left: 0;9101  width: 40px;9102  height: 40px;9103  margin-top: -20px;9104  border: 1.2px solid #f4d5a8;9105  border-color: transparent #f4d5a8 transparent transparent;9106  border-radius: 50%;9107  opacity: 0;9108  animation: peach-chirp-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9109}9110@keyframes peach-chirp-arc-expand {9111  0%   { transform: scale(0.4); opacity: 0; }9112  20%  { opacity: 0.9; }9113  100% { transform: scale(1.6); opacity: 0; }9114}91159116/* Flight wave ---------------------------------------------------------- */9117.peach-chirp-flight-track {9118  position: absolute;9119  inset: 32px 36px 38px 36px;9120  pointer-events: none;9121}9122.peach-chirp-flight-wave {9123  position: absolute;9124  top: 8px;9125  left: 76px;9126  right: 76px;9127  height: 60px;9128  width: auto;9129  opacity: 0;9130  transition: opacity 0.15s ease;9131  stroke: #f4d5a8;9132  fill: none;9133}9134.peach-chirp-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9135.peach-chirp-flight-wave.is-visible { opacity: 1; }9136.peach-chirp-flight-path,9137.peach-chirp-flight-path-2 {9138  stroke-dasharray: 240;9139  stroke-dashoffset: 240;9140  stroke-linecap: round;9141  fill: none;9142}9143.peach-chirp-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9144.peach-chirp-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9145.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path {9146  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9147}9148.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path-2 {9149  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9150}9151@keyframes peach-chirp-fly {9152  0%   { stroke-dashoffset: 240; opacity: 0; }9153  20%  { opacity: 1; }9154  100% { stroke-dashoffset: -120; opacity: 0; }9155}91569157/* Connection dot ------------------------------------------------------- */9158.peach-chirp-dot {9159  position: absolute;9160  top: 50%; left: 50%;9161  transform: translate(-50%, -50%);9162  width: 40px; height: 40px;9163  opacity: 0;9164  pointer-events: none;9165  transition: opacity 0.3s ease;9166  color: var(--peach-accent);9167}9168.peach-chirp-dot.is-visible { opacity: 1; }9169.peach-chirp-dot-glow {9170  position: absolute; top: 50%; left: 50%;9171  transform: translate(-50%, -50%);9172  width: 38px; height: 38px;9173  border-radius: 50%;9174  filter: blur(10px);9175  opacity: 0.55;9176  background: var(--peach-accent);9177  animation: peach-chirp-dot-bloom 1.4s ease-out;9178}9179.peach-chirp-dot-core {9180  position: absolute; top: 50%; left: 50%;9181  transform: translate(-50%, -50%);9182  width: 8px; height: 8px;9183  border-radius: 50%;9184  background: var(--peach-accent);9185  box-shadow: 0 0 12px currentColor;9186  animation: peach-chirp-dot-core 1.4s ease-out;9187}9188.peach-chirp-dot-ring {9189  position: absolute; top: 50%; left: 50%;9190  width: 60px; height: 60px;9191  transform: translate(-50%, -50%);9192  animation: peach-chirp-dot-ring 1.4s linear;9193  stroke: var(--peach-accent);9194}9195@keyframes peach-chirp-dot-bloom {9196  0%   { width: 4px; height: 4px; opacity: 0; }9197  35%  { width: 60px; height: 60px; opacity: 0.7; }9198  100% { width: 38px; height: 38px; opacity: 0.55; }9199}9200@keyframes peach-chirp-dot-core {9201  0%   { width: 0; height: 0; }9202  35%  { width: 12px; height: 12px; }9203  100% { width: 8px; height: 8px; }9204}9205@keyframes peach-chirp-dot-ring {9206  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9207  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9208  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9209}92109211/* Motes — drift upward across the stage */9212.peach-chirp-motes {9213  position: absolute;9214  inset: 0;9215  pointer-events: none;9216}9217.peach-chirp-mote {9218  position: absolute;9219  width: 2px; height: 2px;9220  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9221  border-radius: 50%;9222  bottom: 32px;9223  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9224  opacity: 0;9225  animation: peach-chirp-mote-drift 6s linear infinite;9226  animation-delay: calc(var(--mote-i, 0) * 0.7s);9227}9228@keyframes peach-chirp-mote-drift {9229  0%   { transform: translateY(0); opacity: 0; }9230  10%  { opacity: 0.6; }9231  90%  { opacity: 0.1; }9232  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9233}92349235/* Status copy ---------------------------------------------------------- */9236.peach-chirp-copy-host {9237  margin: 4px 4px 10px;9238  text-align: center;9239  min-height: 50px;9240}9241.peach-chirp-copy {9242  animation: peach-chirp-copy-in 0.35s ease both;9243}9244@keyframes peach-chirp-copy-in {9245  from { opacity: 0; transform: translateY(4px); }9246  to   { opacity: 1; transform: translateY(0); }9247}9248.peach-chirp-headline {9249  font-family: var(--font-display, Georgia, serif);9250  font-style: italic;9251  font-size: 20px;9252  font-weight: 500;9253  line-height: 1.2;9254  letter-spacing: 0.005em;9255  color: var(--peach-t0);9256  margin-bottom: 6px;9257}9258.peach-chirp-copy-listening .peach-chirp-headline,9259.peach-chirp-copy-chirping .peach-chirp-headline,9260.peach-chirp-copy-idle .peach-chirp-headline {9261  font-family: inherit;9262  font-style: normal;9263  font-weight: 500;9264  font-size: 15px;9265  color: var(--peach-t0);9266  letter-spacing: 0;9267}9268.peach-chirp-copy-paired .peach-chirp-headline {9269  color: var(--peach-t0);9270  font-weight: 600;9271}9272.peach-chirp-sub {9273  font-size: 12.5px;9274  line-height: 1.45;9275  color: var(--peach-t1);9276  max-width: 280px;9277  margin: 0 auto;9278  text-wrap: pretty;9279}92809281/* Status action -------------------------------------------------------- */9282.peach-chirp-action {9283  margin: 2px 4px 10px;9284}9285.peach-chirp-action-waiting {9286  display: flex;9287  align-items: center;9288  justify-content: space-between;9289  gap: 12px;9290}9291.peach-chirp-cancel {9292  min-width: 96px;9293}9294.peach-chirp-listening {9295  display: inline-flex; align-items: center; gap: 4px;9296  font-family: var(--peach-mono, ui-monospace, monospace);9297  font-size: 9.5px;9298  text-transform: uppercase;9299  letter-spacing: 0.12em;9300  color: var(--peach-t1);9301  padding: 8px 10px;9302}9303.peach-chirp-listen-dot {9304  width: 4px; height: 4px;9305  border-radius: 50%;9306  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9307  animation: peach-chirp-listen-pulse 1.2s ease-in-out infinite;9308}9309.peach-chirp-listen-dot:nth-child(2) { animation-delay: 0.2s; }9310.peach-chirp-listen-dot:nth-child(3) { animation-delay: 0.4s; }9311.peach-chirp-listen-label { margin-left: 6px; }9312@keyframes peach-chirp-listen-pulse {9313  0%, 100% { opacity: 0.25; transform: scale(0.9); }9314  50%      { opacity: 1;     transform: scale(1.15); }9315}93169317.peach-chirp-action-handshake {9318  display: flex;9319  flex-direction: column;9320  align-items: center;9321  gap: 8px;9322  padding: 8px 4px;9323}9324.peach-chirp-meter {9325  width: 100%;9326  max-width: 280px;9327  height: 2px;9328  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9329  border-radius: 2px;9330  position: relative;9331  overflow: hidden;9332}9333.peach-chirp-meter-bar {9334  position: absolute;9335  top: 0; bottom: 0;9336  width: 30%;9337  left: -30%;9338  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9339  animation: peach-chirp-meter-sweep 1.4s ease-in-out infinite;9340}9341@keyframes peach-chirp-meter-sweep {9342  0%   { left: -30%; }9343  100% { left: 100%; }9344}9345.peach-chirp-meter-label {9346  font-family: var(--peach-mono, ui-monospace, monospace);9347  font-size: 9.5px;9348  text-transform: uppercase;9349  letter-spacing: 0.14em;9350  color: var(--peach-t1);9351}93529353.peach-chirp-action-paired {9354  display: flex;9355  align-items: center;9356  gap: 10px;9357}9358.peach-chirp-device-confirm {9359  flex: 1;9360  display: inline-flex;9361  align-items: center;9362  gap: 8px;9363  padding: 9px 10px 9px 12px;9364  border-radius: 10px;9365  background: color-mix(in srgb, #76b6e8 12%, transparent);9366  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9367  font-size: 12.5px;9368  color: var(--peach-t0);9369  min-width: 0;9370}9371.peach-chirp-device-confirm-glyph {9372  display: inline-flex;9373  color: #76b6e8;9374}9375.peach-chirp-device-confirm-name {9376  flex: 1;9377  overflow: hidden;9378  text-overflow: ellipsis;9379  white-space: nowrap;9380}9381.peach-chirp-device-confirm-trust {9382  font-family: var(--peach-mono, ui-monospace, monospace);9383  font-size: 9.5px;9384  text-transform: uppercase;9385  letter-spacing: 0.1em;9386  color: #76b6e8;9387  padding: 2px 6px;9388  border-radius: 4px;9389  background: color-mix(in srgb, #76b6e8 14%, transparent);9390}9391.peach-chirp-done {9392  min-width: 80px;9393}9394.peach-chirp-retry {9395  align-self: center;9396  display: block;9397  margin: 6px auto 0;9398  min-width: 120px;9399}9400.peach-chirp-mic-help {9401  font-size: 12px;9402  color: var(--peach-t1);9403  text-align: center;9404  max-width: 320px;9405  margin: 0 auto;9406}94079408/* Rest state — bird stage at idle pose, primary CTA + paired list */9409.peach-chirp-pair[data-phase="idle"] .peach-chirp-stage {9410  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9411  height: 160px;9412}9413.peach-chirp-pair-start {9414  width: 100%;9415  display: inline-flex;9416  align-items: center;9417  justify-content: center;9418  gap: 8px;9419  padding: 11px 14px;9420  border-radius: 10px;9421  background: var(--peach-accent);9422  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9423  color: #1a0905;9424  font-family: inherit;9425  font-size: 13px;9426  font-weight: 600;9427  letter-spacing: 0.01em;9428  cursor: pointer;9429  transition: filter 0.15s ease, transform 0.1s ease;9430}9431.peach-chirp-pair-start:hover { filter: brightness(1.08); }9432.peach-chirp-pair-start:active { transform: translateY(1px); }94339434.peach-chirp-paired-section {9435  margin-top: 14px;9436  display: flex;9437  flex-direction: column;9438  gap: 8px;9439}9440.peach-chirp-paired-heading {9441  margin: 0;9442  font-family: var(--peach-mono, ui-monospace, monospace);9443  font-size: 10px;9444  font-weight: 500;9445  letter-spacing: 0.14em;9446  text-transform: uppercase;9447  color: var(--peach-t1);9448}94499450/* Footer --------------------------------------------------------------- */9451.peach-chirp-foot {9452  margin: 10px -4px -2px;9453  margin-top: auto;9454}9455.peach-chirp-foot-divider {9456  height: 1px;9457  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9458  margin-bottom: 10px;9459}9460.peach-chirp-foot-text {9461  font-size: 11px;9462  line-height: 1.5;9463  color: var(--peach-t1);9464  text-align: center;9465  padding: 0 4px;9466  text-wrap: pretty;9467}94689469/* Screen-reader-only live region. Kept off the visual flow but read by9470   assistive tech as the pairing phase advances. */9471.peach-sr-only {9472  position: absolute;9473  width: 1px; height: 1px;9474  padding: 0; margin: -1px;9475  overflow: hidden;9476  clip: rect(0, 0, 0, 0);9477  white-space: nowrap;9478  border: 0;9479}94809481/* Reduced motion — stage simplifies to opacity transitions only */9482@media (prefers-reduced-motion: reduce) {9483  .peach-chirp-bird-body,9484  .peach-chirp-bird-head-group,9485  .peach-chirp-bird-beak,9486  .peach-chirp-bird-wing,9487  .peach-chirp-bird-tuft,9488  .peach-chirp-bird-tail,9489  .peach-chirp-bird-eye-group,9490  .peach-chirp-bird-aura,9491  .peach-chirp-arc,9492  .peach-chirp-flight-path,9493  .peach-chirp-flight-path-2,9494  .peach-chirp-dot-glow,9495  .peach-chirp-dot-core,9496  .peach-chirp-dot-ring,9497  .peach-chirp-mote,9498  .peach-chirp-meter-bar,9499  .peach-chirp-listen-dot,9500  .peach-chirp-bird-slot,9501  .peach-chirp-bird-slot-mobile {9502    animation: none !important;9503    transition: opacity 0.2s linear !important;9504  }9505}95069507/* ─────────────────────────────────────────────────────────────────9508   Settings → Sync surface (v3 ChirpSync). Wraps the same bird9509   animation used by the pairing flow with a paired-devices list and9510   the "Pair a device" CTA.9511   ───────────────────────────────────────────────────────────────── */9512.peach-chirp-settings {9513  position: absolute;9514  inset: 0;9515  z-index: 3;9516  display: flex;9517  flex-direction: column;9518  gap: 18px;9519  padding: 14px 12px 12px;9520  width: 100%;9521  box-sizing: border-box;9522  overflow-y: auto;9523  overflow-x: hidden;9524  /* Same warm Chirp surface as the pairing screen — unifies the two views. */9525  background:9526    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9527    var(--peach-bg);9528  color: var(--peach-t0);9529  isolation: isolate;9530  /* Hide native scrollbar — content fits 99% of the time and a chunky9531     gutter ruins the surface. */9532  scrollbar-width: none;9533  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9534}9535.peach-chirp-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9536.peach-chirp-settings::before {9537  content: '';9538  position: absolute;9539  inset: 0;9540  pointer-events: none;9541  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9542  z-index: 0;9543}9544.peach-chirp-settings > * { position: relative; z-index: 1; }95459546.peach-chirp-settings--pairing {9547  padding: 0;9548  align-items: stretch;9549  justify-content: stretch;9550  background: none;9551  isolation: auto;9552}9553.peach-chirp-settings--pairing::before { display: none; }95549555.peach-chirp-settings-header {9556  display: flex;9557  align-items: center;9558  gap: 10px;9559}9560.peach-chirp-settings-title {9561  margin: 0;9562  font-family: var(--font-display, Georgia, serif);9563  font-style: italic;9564  font-size: 24px;9565  font-weight: 500;9566  line-height: 1;9567  color: var(--peach-t0);9568  letter-spacing: 0.005em;9569}9570.peach-chirp-settings-section {9571  margin: 6px 0 -4px;9572  font-size: 11px;9573  font-weight: 600;9574  letter-spacing: 0.08em;9575  text-transform: uppercase;9576  color: var(--peach-text-muted);9577}9578.peach-chirp-settings-error {9579  font-size: 12px;9580  padding: 8px 10px;9581  border-radius: 8px;9582  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);9583  color: var(--peach-text);9584}9585.peach-chirp-settings-footer {9586  margin-top: auto;9587  padding-top: 18px;9588  font-size: 11.5px;9589  line-height: 1.5;9590  color: var(--peach-text-muted);9591  text-align: center;9592}95939594/* Hero card shown when no devices are paired yet. */9595.peach-chirp-hero {9596  display: flex;9597  flex-direction: column;9598  align-items: center;9599  gap: 12px;9600  padding: 20px 12px 8px;9601  text-align: center;9602}9603.peach-chirp-hero-svg {9604  display: block;9605  max-width: 100%;9606  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));9607}9608.peach-chirp-hero-headline {9609  margin: 0;9610  font-family: var(--font-display, Georgia, serif);9611  font-style: italic;9612  font-size: 20px;9613  font-weight: 500;9614  line-height: 1.2;9615  letter-spacing: 0.005em;9616  color: var(--peach-t0);9617}9618.peach-chirp-hero-sub {9619  margin: 0;9620  font-size: 13px;9621  line-height: 1.5;9622  color: var(--peach-t1);9623  max-width: 320px;9624  text-wrap: pretty;9625}96269627.peach-chirp-pair-cta {9628  display: flex;9629  justify-content: center;9630  padding: 4px 0 6px;9631}9632.peach-chirp-pair-button {9633  display: inline-flex;9634  align-items: center;9635  gap: 8px;9636  min-width: 220px;9637  justify-content: center;9638}9639.peach-chirp-pair-button-icon {9640  flex: 0 0 auto;9641}96429643/* Paired devices list. Roomy rows that look at home next to the rest9644   of Settings; stale rows get a soft warm-warning border tint. */9645.peach-chirp-device-list {9646  list-style: none;9647  margin: 0;9648  padding: 0;9649  display: flex;9650  flex-direction: column;9651  gap: 8px;9652}9653.peach-chirp-device-row {9654  display: flex;9655  align-items: center;9656  gap: 12px;9657  padding: 12px;9658  border-radius: 10px;9659  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9660  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);9661}9662.peach-chirp-device-row[data-stale="true"] {9663  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);9664}9665.peach-chirp-device-icon {9666  width: 32px;9667  height: 32px;9668  display: flex;9669  align-items: center;9670  justify-content: center;9671  border-radius: 8px;9672  color: var(--peach-text);9673  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);9674}9675.peach-chirp-device-info {9676  flex: 1;9677  display: flex;9678  flex-direction: column;9679  gap: 2px;9680  min-width: 0;9681}9682.peach-chirp-device-name {9683  font-size: 14px;9684  font-weight: 600;9685  color: var(--peach-text);9686  overflow: hidden;9687  text-overflow: ellipsis;9688  white-space: nowrap;9689}9690.peach-chirp-device-meta {9691  font-size: 11.5px;9692  color: var(--peach-text-muted);9693  display: flex;9694  flex-wrap: wrap;9695  align-items: center;9696  gap: 8px;9697}9698.peach-chirp-device-badge {9699  font-size: 10.5px;9700  font-weight: 500;9701  letter-spacing: 0.02em;9702  padding: 2px 6px;9703  border-radius: 999px;9704  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);9705  color: var(--peach-text);9706}9707.peach-chirp-device-stale {9708  font-size: 10.5px;9709  font-weight: 500;9710  color: var(--peach-warn, #d29257);9711}9712.peach-chirp-device-remove {9713  flex: 0 0 auto;9714  color: var(--peach-text-muted);9715}9716.peach-chirp-device-remove:hover {9717  color: var(--peach-danger, #c25b4a);9718}9719.peach-chirp-unpair-confirm {9720  display: flex;9721  gap: 6px;9722  align-items: center;9723}97249725/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */9726.peach-chirp-pro-card {9727  position: relative;9728  margin: 18px 12px;9729  padding: 18px 20px 22px;9730  border-radius: 22px;9731  background:9732    radial-gradient(140% 90% at 50% 0%,9733      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,9734      transparent 60%),9735    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9736  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);9737  box-shadow:9738    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,9739    0 18px 40px -24px rgba(0, 0, 0, 0.45);9740  display: flex;9741  flex-direction: column;9742  align-items: center;9743  gap: 10px;9744  text-align: center;9745  overflow: hidden;9746}9747.peach-chirp-pro-stage {9748  position: relative;9749  width: 220px;9750  height: 140px;9751  display: flex;9752  align-items: flex-end;9753  justify-content: center;9754  margin-bottom: 2px;9755}9756.peach-chirp-pro-bird-slot {9757  width: 140px;9758  height: 132px;9759  display: flex;9760  align-items: flex-end;9761  justify-content: center;9762  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));9763}9764.peach-chirp-pro-bird-slot .peach-chirp-bird {9765  width: 100%;9766  height: 100%;9767}9768.peach-chirp-pro-bird-slot .peach-chirp-bird svg {9769  width: 100%;9770  height: 100%;9771  overflow: visible;9772}9773.peach-chirp-pro-chirp {9774  position: absolute;9775  top: 14px;9776  right: 8px;9777  width: 96px;9778  height: 80px;9779  color: var(--peach-accent);9780  animation: peach-chirp-pulse 2.6s ease-in-out infinite;9781  transform-origin: 0% 50%;9782  pointer-events: none;9783}9784@keyframes peach-chirp-pulse {9785  0%, 100% { opacity: 0.35; transform: translateX(0) scale(0.92); }9786  45%      { opacity: 1;    transform: translateX(2px) scale(1); }9787  70%      { opacity: 0.6;  transform: translateX(4px) scale(1.04); }9788}9789@media (prefers-reduced-motion: reduce) {9790  .peach-chirp-pro-chirp { animation: none; opacity: 0.7; }9791}9792.peach-chirp-pro-headline {9793  margin: 4px 0 0;9794  font-family: var(--font-display, "Cormorant Garamond", serif);9795  font-style: italic;9796  font-size: 19px;9797  font-weight: 500;9798  letter-spacing: 0.01em;9799  color: var(--peach-text, var(--peach-t0));9800  max-width: 280px;9801  line-height: 1.25;9802}9803.peach-chirp-pro-body {9804  margin: 0;9805  font-size: 13px;9806  line-height: 1.55;9807  color: var(--peach-text-dim, var(--peach-t2));9808  max-width: 300px;9809}9810.peach-chirp-pro-cta {9811  margin-top: 4px;9812}9813.peach-chirp-pro-foot {9814  margin: 2px 0 0;9815  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;9816  font-size: 0.625rem;9817  letter-spacing: 0.08em;9818  text-transform: uppercase;9819  color: var(--peach-t2);9820  opacity: 0.75;9821}