popup.css

1html,2body,3#app,4#pre-lock,5.popup-root {6  width: 320px;7  min-height: 520px;8  height: 520px;9  margin: 0;10}1112body {13  overflow: hidden;14  background: var(--bg);15  color: var(--t0);16  font-family: var(--font-ui);17  font-weight: 300;18  position: relative;19}2021* {22  box-sizing: border-box;23}2425button,26input,27textarea,28select {29  font: inherit;30}3132button {33  border: 0;34}3536#pre-lock {37  position: absolute;38  inset: 0;39  z-index: 10;40}4142#pre-lock[hidden] {43  display: none;44}4546.popup-root {47  position: relative;48  overflow: hidden;49}5051.peach-theme {52  color: var(--peach-t0);53  font-family: var(--font-ui);54  font-weight: 300;55  box-sizing: border-box;56  text-align: left;57}58.peach-theme, .peach-theme * { box-sizing: inherit; }5960.peach-brand-mark {61  width: 14px;62  height: 14px;63  flex-shrink: 0;64}6566.peach-status-pip.is-hidden {67  display: none;68}6970.peach-status-pip.unlocked {71  background: var(--peach-health-ok);72  box-shadow: 0 0 6px rgba(100, 210, 100, 0.6);73}7475.peach-status-pip.pulse {76  animation: pip-pulse 400ms var(--peach-curve-settle) both;77}7879/* Shell */80.peach-shell, .peach-screen {81  background:82    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),83    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),84    var(--peach-bg);85  border: 1px solid var(--peach-t3);86  box-shadow:87    0 2px 8px rgba(0,0,0,0.55),88    0 14px 48px rgba(0,0,0,0.7),89    0 0 0 1px rgba(240,232,216,0.04);90  overflow: hidden;91}92.peach-shell {93  display: grid;94  grid-template-rows: auto 1fr;95  min-height: 520px;96  position: relative;97  isolation: isolate;98}99100.peach-shell[data-surface="extension"] {101  width: min(320px, 100vw);102  border-radius: 0;103  height: 520px;104  max-height: 520px;105  overflow: hidden;106}107108/* ── Lock screen – full-window lock/create stage ── */109.lock-screen--vault-stage {110  display: flex;111  flex-direction: column;112  gap: 18px;113  padding: 20px 18px 18px;114  justify-content: flex-start;115}116.lock-screen--vault-stage .peach-lock-panel {117  margin-top: auto;118}119.peach-lock-headline--unlock {120  max-width: 220px;121}122.peach-lock-hero--unlock {123  padding-top: 14px;124}125.peach-lock-panel--unlock {126  gap: 10px;127}128129.peach-lock-restore-link {130  background: transparent;131  border: none;132  cursor: pointer;133  font-family: var(--font-mono);134  font-size: 0.625rem;135  letter-spacing: 0.08em;136  color: var(--t1);137  padding: 5px 0;138  text-align: left;139  transition: color 150ms ease;140}141142.peach-lock-restore-link:hover {143  color: var(--t0);144}145.peach-shell[data-surface="extension"] .peach-stage {146  min-height: 250px;147}148149/* Screen (unlock) */150.peach-screen {151  width: min(320px, 100vw);152  min-height: 100%;153  height: 100%;154  border-radius: 0;155  padding: 16px 20px 18px;156  display: grid;157  gap: 14px;158}159.peach-screen[data-motion-phase="enter"] {160  animation: peach-screen-enter var(--peach-dur-600) var(--peach-curve-arrival) both;161}162.peach-screen-header { min-height: 20px; }163164/* Wordmark */165.peach-wordmark {166  margin: 0;167  font-family: var(--font-display);168  font-size: 0.9375rem;169  font-style: italic;170  letter-spacing: 0.03em;171  color: var(--peach-t0);172  display: inline-flex;173  min-height: 1em;174}175176/* Motion text / char animation */177.peach-motion-text { display: inline-flex; min-height: 1em; }178.peach-motion-char {179  display: inline-block;180  white-space: pre;181  opacity: 0;182  transform: translateY(0.22em);183  animation: peach-char-enter var(--peach-motion-duration, 380ms) var(--peach-curve-arrival) forwards;184  animation-delay: calc(var(--peach-char-index, 0) * 20ms);185}186187/* Chrome */188.peach-chrome {189  position: relative;190  z-index: 10;191  padding: 16px 20px 0;192  display: flex;193  justify-content: space-between;194  align-items: center;195  /* z-index:10 keeps the header icons above `.peach-loading` (Suspense196     fallback) per §15 regression guard. Without pointer-events:none, the197     empty header strip also sits above `.peach-overlay-view` (z-index:2)198     and swallows clicks meant for an overlay's back button / top search. */199  pointer-events: none;200}201.peach-chrome .peach-btn { pointer-events: auto; }202.peach-chrome.is-hidden-for-overlay,203.peach-search-wrap.is-hidden-for-overlay {204  opacity: 0;205  visibility: hidden;206  pointer-events: none;207}208/* Chirp-sync owns its own surface and header — fully collapse the global209   chrome row so the warm gradient reaches the popup edge. */210.peach-chrome.is-collapsed,211.peach-search-wrap.is-collapsed {212  display: none;213}214.peach-wordmark-wrap { display: flex; align-items: center; gap: 5px; }215.peach-status-pip {216  width: 5px;217  height: 5px;218  border-radius: 50%;219  background: var(--peach-t3);220  display: inline-flex;221  flex-shrink: 0;222  transition: background 400ms ease, box-shadow 400ms ease;223}224.peach-chrome-actions { display: flex; gap: 6px; }225226/* Shell body */227.peach-shell-body {228  position: relative;229  display: grid;230  grid-template-rows: 1fr auto;231  min-height: 0;232  min-width: 0;233  width: 100%;234  overflow: hidden;235  height: 100%;236}237.peach-shell-veil {238  position: absolute; inset: 0;239  background: #000; opacity: 0;240  pointer-events: none; z-index: 1;241}242.peach-shell[data-motion-phase="enter"] .peach-shell-body {243  animation: peach-shell-fade-in var(--peach-dur-600) var(--peach-curve-arrival) both;244}245.peach-shell[data-motion-phase="exit"] .peach-shell-veil {246  animation: peach-veil-in 300ms var(--peach-curve-departure) forwards;247}248249/* Content frame */250.peach-content-frame {251  display: grid;252  grid-template-rows: 1fr auto;253  grid-template-columns: minmax(0, 1fr);254  align-content: start;255  min-height: 0;256  min-width: 0;257  overflow: hidden;258  transition: opacity 80ms ease, transform 80ms ease;259}260.peach-content-frame.navigating {261  opacity: 0.93;262  transform: translateX(2px);263}264.peach-content-frame[data-content-phase="enter"] {265  animation: peach-content-enter 135ms ease-out both;266}267.peach-content-frame[data-content-phase="exit"] {268  animation: peach-content-exit 95ms ease-in forwards;269}270.peach-content-frame[data-content-phase="idle"] { opacity: 1; transform: none; }271272/* Stage */273.peach-stage {274  padding: 10px 20px 12px;275  display: grid;276  gap: 12px;277  align-content: start;278  min-width: 0;279  min-height: 0;280  max-width: 100%;281  overflow-y: auto;282  overflow-x: hidden;283  scrollbar-width: none;284  -ms-overflow-style: none;285  overscroll-behavior: contain;286}287.peach-stage::-webkit-scrollbar { display: none; }288289/* Entry name */290.peach-entry-name-wrap { position: relative; overflow: hidden; max-width: 100%; }291.peach-entry-header {292  position: relative;293  z-index: 1;294  display: flex;295  align-items: flex-start;296  gap: 6px;297  min-width: 0;298}299.peach-entry-header-name {300  flex: 1;301  min-width: 0;302}303.peach-entry-name {304  margin: 0;305  padding-bottom: 0.12em;306  font-family: var(--font-display);307  font-style: italic; font-weight: 400;308  font-size: 44px; line-height: 0.95;309  color: var(--peach-t0);310  display: -webkit-box;311  -webkit-line-clamp: 2;312  -webkit-box-orient: vertical;313  overflow: hidden;314  text-wrap: balance;315}316.peach-entry-name--lg { font-size: 40px; }317.peach-entry-name--xl { font-size: 34px; line-height: 0.98; }318.peach-entry-name--xxl { font-size: 30px; line-height: 1.02; }319.peach-entry-name-text { display: block; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; padding-bottom: 0.12em; }320321/* Trash icon in entry header */322.peach-entry-trash-btn {323  flex-shrink: 0;324  padding: 4px;325  margin-top: 4px;326  background: transparent;327  border: none;328  cursor: pointer;329  color: var(--peach-t2);330  border-radius: 4px;331  transition: color 140ms ease, background 140ms ease;332  display: flex;333  align-items: center;334  justify-content: center;335}336.peach-entry-trash-btn:hover {337  color: var(--peach-t1);338  background: var(--peach-t3);339}340.peach-entry-trash-confirm {341  display: flex;342  align-items: center;343  gap: 6px;344  flex-shrink: 0;345  margin-top: 6px;346  flex-wrap: nowrap;347}348.peach-entry-trash-confirm-label {349  font-family: var(--font-mono);350  font-size: 0.5625rem;351  letter-spacing: 0.1em;352  color: var(--peach-t2);353  white-space: nowrap;354}355.peach-entry-name-button {356  padding: 0;357  background: transparent;358  text-align: left;359  cursor: pointer;360  max-width: 100%;361  overflow: hidden;362  display: block;363}364.peach-entry-name-char {365  display: inline-block;366  white-space: pre;367  opacity: 0;368  transform: translateY(0.22em);369  animation: peach-char-enter 380ms var(--peach-curve-arrival) forwards;370  animation-delay: calc(var(--char-index, 0) * 20ms);371}372373/* Domain */374.peach-domain { border-top: 1px solid var(--peach-t3); padding-top: 9px; }375.peach-domain-row {376  width: 100%; border: 0; background: transparent; color: inherit;377  padding: 0; display: flex; justify-content: space-between; align-items: baseline;378  cursor: default;379}380.peach-domain-value {381  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;382  font-size: 0.625rem; font-style: italic;383  letter-spacing: 0.12em; color: var(--peach-t1);384}385386/* Fields */387.peach-fields { display: grid; gap: 10px; }388.peach-field-card { display: grid; gap: 7px; }389.peach-label {390  font-family: Inter, system-ui, sans-serif;391  text-transform: uppercase; letter-spacing: 0.2em;392  font-size: 0.5rem; color: var(--peach-t2);393}394.peach-add-field-btn {395  align-self: flex-start;396  background: none; border: none; padding: 2px 0;397  font-family: Inter, system-ui, sans-serif;398  font-size: 0.6875rem; color: var(--peach-accent);399  cursor: pointer; opacity: 0.75;400  letter-spacing: 0.02em;401}402.peach-add-field-btn:hover { opacity: 1; }403.peach-field-value-row {404  display: flex; justify-content: space-between;405  align-items: center; gap: 8px;406  min-width: 0;407}408.peach-field-value {409  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;410  font-size: 0.8125rem; color: var(--peach-t1);411  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;412  flex: 1;413  min-width: 0;414}415.peach-password-value {416  display: inline-flex;417  align-items: center;418  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;419  font-size: 1rem; letter-spacing: 0.3em; color: var(--peach-t0);420  overflow: hidden;421  text-overflow: ellipsis;422  white-space: nowrap;423  flex: 1;424  min-width: 0;425  max-width: 100%;426}427.peach-password-value.is-revealed {428  font-size: 0.875rem;429  letter-spacing: 0.08em;430}431.peach-password-text,432.peach-password-mask {433  display: block;434  width: 100%;435  overflow: hidden;436  white-space: nowrap;437  /* Render as uniform mid-line bullets, not baseline periods */438  font-family: Inter, system-ui, sans-serif;439  font-size: 0.625rem;440  letter-spacing: 3px;441  user-select: none;442}443.peach-field-actions { display: flex; gap: 4px; align-items: center; }444.peach-password-strength { display: flex; align-items: center; gap: 8px; }445.peach-strength-bar { display: flex; gap: 3px; }446.peach-strength-seg { width: 28px; height: 4px; border-radius: 2px; background: #eee; }447.peach-strength-label {448  font-family: "IBM Plex Mono", monospace;449  font-style: italic;450  font-size: 0.5625rem;451  font-weight: 300;452  min-width: 36px;453  text-align: right;454  color: var(--peach-t2);455  letter-spacing: 0.06em;456}457458.peach-strength-hairline {459  display: flex;460  align-items: center;461  gap: 10px;462  margin-top: -2px;463}464465.peach-strength-hairline-track {466  flex: 1;467  height: 3px;468  border-radius: 2px;469  background: var(--peach-s2);470  overflow: hidden;471}472473.peach-strength-hairline-fill {474  height: 100%;475  border-radius: 2px;476  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),477    background 400ms ease;478}479480/* Note content (display) */481.peach-note-content {482  border-top: 1px solid var(--peach-t3);483  padding-top: 10px;484  font-family: var(--font-display);485  font-size: 0.9375rem;486  line-height: 1.75;487  color: var(--peach-t1);488}489490/* ── Inline editing ─────────────────────────────────────────────────── */491492/* Clickable display values */493.peach-inline-clickable {494  cursor: text;495  border-radius: 3px;496  transition: background 150ms ease;497}498.peach-inline-clickable:hover {499  background: rgba(240, 232, 216, 0.05);500}501502/* Subtle "edit" hint that appears on hover */503.peach-inline-edit-hint {504  font-family: Inter, system-ui, sans-serif;505  font-size: 0.5625rem;506  text-transform: uppercase;507  letter-spacing: 0.14em;508  color: var(--peach-t2);509  opacity: 0;510  transition: opacity 120ms ease;511  pointer-events: none;512  margin-left: 6px;513  flex-shrink: 0;514}515.peach-domain-row:hover .peach-inline-edit-hint {516  opacity: 1;517}518519/* Title editing */520.peach-inline-title-wrap {521  display: flex;522  flex-direction: column;523  gap: 6px;524}525.peach-inline-title-input {526  font-family: var(--font-display);527  font-style: italic;528  font-weight: 400;529  font-size: 40px;530  line-height: 0.95;531  color: var(--peach-t0);532  background: transparent;533  border: none;534  border-bottom: 1px solid var(--peach-accent);535  outline: none;536  width: 100%;537  padding: 2px 0;538}539540/* Generic inline field */541.peach-inline-field-wrap {542  display: flex;543  flex-direction: column;544  gap: 6px;545}546.peach-inline-input {547  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;548  font-size: 0.8125rem;549  color: var(--peach-t0);550  background: transparent;551  border: none;552  border-bottom: 1px solid var(--peach-accent);553  outline: none;554  width: 100%;555  padding: 3px 0;556}557.peach-inline-textarea {558  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;559  font-size: 0.6875rem;560  line-height: 1.7;561  color: var(--peach-t0);562  background: rgba(240, 232, 216, 0.04);563  border: 1px solid var(--peach-accent);564  border-radius: 4px;565  outline: none;566  width: 100%;567  padding: 8px;568  resize: vertical;569  min-height: 80px;570}571572/* Save / cancel row */573.peach-inline-actions {574  display: flex;575  gap: 6px;576  align-items: center;577}578.peach-inline-save-btn,579.peach-inline-cancel-btn {580  display: inline-flex;581  align-items: center;582  justify-content: center;583  width: 26px;584  height: 26px;585  border-radius: 4px;586  border: none;587  cursor: pointer;588  transition: background 140ms ease, opacity 140ms ease;589  flex-shrink: 0;590}591.peach-inline-save-btn {592  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);593  color: var(--peach-accent);594}595.peach-inline-save-btn:hover:not(:disabled) {596  background: color-mix(in srgb, var(--peach-accent) 30%, transparent);597}598.peach-inline-cancel-btn {599  background: rgba(240, 232, 216, 0.06);600  color: var(--peach-t2);601}602.peach-inline-cancel-btn:hover:not(:disabled) {603  background: rgba(240, 232, 216, 0.12);604  color: var(--peach-t1);605}606.peach-inline-save-btn:disabled,607.peach-inline-cancel-btn:disabled {608  opacity: 0.4;609  cursor: not-allowed;610}611612/* Inline password generator wrapper */613.peach-inline-generator-wrap {614  margin-top: 10px;615  padding-top: 10px;616  border-top: 1px solid var(--peach-t3);617  display: flex;618  flex-direction: column;619  gap: 8px;620}621.peach-inline-generator-cancel {622  align-self: flex-start;623  font-size: 0.6875rem;624  color: var(--peach-t2);625}626627/* "is-editing" card state */628.peach-field-card.is-editing {629  background: rgba(240, 232, 216, 0.02);630  border-radius: 6px;631  padding: 8px;632  margin: -8px;633}634635/* Inline tag editor on Entry detail view */636.peach-inline-tag-editor {637  display: flex;638  flex-direction: column;639  gap: 6px;640}641642/* Quiet inline "+ add X" link in the entry detail body */643.peach-entry-add-link {644  justify-self: start;645  margin-top: 8px;646}647648/* Additional URLs editor revealed by clicking the URL field */649.peach-additional-urls {650  display: flex;651  flex-direction: column;652  gap: 6px;653  margin-top: 8px;654}655.peach-additional-urls-label {656  font-size: 0.5625rem;657  letter-spacing: 0.1em;658  text-transform: uppercase;659  color: var(--peach-t2);660  margin-bottom: 2px;661}662.peach-additional-url-row {663  display: flex;664  align-items: center;665  gap: 6px;666}667.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }668.peach-additional-url-remove {669  background: transparent;670  border: 1px solid var(--peach-t3);671  color: var(--peach-t2);672  width: 22px;673  height: 22px;674  border-radius: 4px;675  cursor: pointer;676  font-size: 0.875rem;677  line-height: 1;678  display: inline-flex;679  align-items: center;680  justify-content: center;681  flex-shrink: 0;682  transition: color 120ms ease, border-color 120ms ease;683}684.peach-additional-url-remove:hover:not(:disabled) {685  color: var(--peach-accent);686  border-color: var(--peach-border-accent);687}688.peach-additional-urls-add { align-self: flex-start; }689690/* Delete row */691.peach-entry-delete-row {692  display: flex;693  align-items: center;694  gap: 8px;695  padding-top: 18px;696  margin-top: 8px;697  border-top: 1px solid var(--peach-t3);698}699.peach-delete-btn {700  font-size: 0.6875rem;701  color: var(--peach-t2);702  padding: 4px 0;703}704.peach-delete-confirm-text {705  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;706  font-size: 0.6875rem;707  font-style: italic;708  color: var(--peach-t2);709  flex-shrink: 0;710}711712/* TOTP band */713.peach-totp-band {714  border-top: 1px solid var(--peach-t3);715  padding: 12px 20px 14px;716  position: relative;717  display: grid;718  grid-template-columns: 1fr auto;719  gap: 10px;720}721.peach-totp-main {722  min-width: 0;723  cursor: pointer;724  user-select: none;725}726.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }727.peach-totp-code-row {728  display: flex;729  align-items: flex-end;730  gap: 10px;731  min-width: 0;732}733.peach-totp-code {734  margin: 2px 0 0;735  font-family: var(--font-display);736  font-style: italic;737  font-weight: 300;738  font-size: 38px; color: var(--peach-accent);739  line-height: 0.95; min-height: 1em;740  min-width: 0;741}742.peach-totp-code-text {743  display: inline-flex;744  overflow: hidden;745  text-overflow: ellipsis;746  white-space: nowrap;747}748.peach-totp-copy-btn {749  margin-bottom: 2px;750  flex-shrink: 0;751  border-color: transparent;752}753.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }754.peach-totp-countdown {755  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;756  font-size: 22px; color: var(--peach-t1);757}758.peach-totp-ring { transform: rotate(-90deg); }759.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }760.peach-totp-ring-progress {761  fill: none; stroke: var(--peach-accent); stroke-width: 2;762  stroke-linecap: round;763  transition: stroke-dashoffset 1s linear, stroke 500ms ease;764}765/* Search bar */766.peach-search-wrap {767  border-top: 1px solid var(--peach-t3);768  background: var(--peach-s1);769  min-height: 54px; position: relative;770  box-shadow: inset 0 6px 18px transparent;771  transition: box-shadow 700ms ease;772}773.peach-search-wrap::before {774  content: "";775  position: absolute;776  left: 0;777  top: 0;778  height: 2px;779  width: var(--peach-totp-progress, 0%);780  background: var(--peach-accent);781  opacity: 0;782  transition: width 1s linear, opacity 180ms ease;783  pointer-events: none;784}785.peach-shell[data-totp-active="true"] .peach-search-wrap::before {786  opacity: 0.9;787}788.peach-shell[data-totp-active="true"] .peach-search-wrap {789  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);790}791792@keyframes peach-totp-code-flare {793  0%   { filter: brightness(1); }794  25%  { filter: brightness(1.3); }795  100% { filter: brightness(1); }796}797.peach-totp-code.is-hot {798  animation: peach-totp-code-flare 3000ms ease-in-out both;799}800.peach-search-bar {801  min-height: 54px;802  display: grid;803  grid-template-columns: auto minmax(0, 1fr) auto;804  align-items: center;805  gap: 8px; padding: 0 9px 0 12px;806}807.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }808.peach-search-input {809  border: 0; background: transparent; color: var(--peach-t0);810  font-family: var(--font-display);811  font-style: italic; font-size: 18px;812  outline: none; width: 100%; min-width: 0; padding: 0;813  caret-color: var(--peach-accent);814}815.peach-search-input::placeholder { color: var(--peach-t2); }816.peach-search-meta {817  display: grid;818  grid-auto-flow: column;819  align-items: center;820  justify-content: end;821  gap: 6px;822  min-width: max-content;823}824.peach-search-counter {825  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;826  font-size: 0.625rem; color: var(--peach-t2);827  display: inline-flex;828  align-items: center;829  line-height: 1;830}831.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }832833/* Buttons */834.peach-btn {835  border: 1px solid transparent; border-radius: 12px;836  background: transparent; color: var(--peach-t0);837  font-family: Inter, system-ui, sans-serif;838  font-size: 0.75rem; letter-spacing: 0.02em; padding: 8px 12px;839  cursor: pointer;840  transition:841    background-color var(--peach-dur-80) var(--peach-curve-arrival),842    color var(--peach-dur-80) var(--peach-curve-arrival),843    border-color var(--peach-dur-150) var(--peach-curve-arrival);844}845.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }846.peach-btn:disabled {847  opacity: 0.45;848  cursor: not-allowed;849}850.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 0.6875rem; }851.peach-btn--md { min-height: 38px; }852.peach-btn--accent {853  background: var(--peach-accent);854  color: rgba(0,0,0,0.92);855  font-weight: 500;856  box-shadow:857    0 1px 0 rgba(255,255,255,0.08) inset,858    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),859    0 3px 16px var(--peach-glow),860    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);861}862.peach-btn--accent:hover:not(:disabled) {863  background: var(--peach-accent);864  filter: brightness(1.10) saturate(1.05);865  box-shadow:866    0 1px 0 rgba(255,255,255,0.10) inset,867    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),868    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),869    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);870}871.peach-btn--ghost:not(.peach-icon-btn) { border-color: var(--peach-t3); color: var(--peach-t1); }872.peach-btn--ghost.peach-icon-btn { color: var(--peach-t1); }873.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }874.peach-icon-btn {875  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;876  display: inline-flex; align-items: center; justify-content: center;877  border-color: transparent;878  transition:879    color var(--peach-dur-80) var(--peach-curve-arrival),880    box-shadow var(--peach-dur-150) var(--peach-curve-arrival),881    background-color var(--peach-dur-80) var(--peach-curve-arrival);882}883.peach-icon-btn:hover:not(:disabled) {884  background: transparent;885  color: var(--peach-accent);886  box-shadow: 0 0 12px color-mix(in srgb, var(--peach-accent) 28%, transparent),887              0 0 4px color-mix(in srgb, var(--peach-accent) 16%, transparent);888}889890.peach-btn:focus-visible {891  outline: none;892  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);893}894895/* Lock button */896.peach-lock-icon { transform-origin: center; }897.peach-lock-btn { color: var(--peach-accent); }898.peach-lock-btn.is-locking .peach-lock-icon {899  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);900}901902/* Biometric unlock button */903.peach-biometric-btn {904  display: flex;905  align-items: center;906  justify-content: center;907  gap: 6px;908  margin-top: 8px;909  width: 100%;910}911912/* Copy button */913.peach-copy-btn {914  position: relative; overflow: hidden;915  color: var(--peach-t2); border-color: var(--peach-t3);916}917.peach-copy-icon {918  display: inline-flex; align-items: center; justify-content: center;919  position: relative; z-index: 1;920}921.peach-copy-icon-svg { display: block; }922.peach-copy-sheen {923  position: absolute; inset: 0;924  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--peach-accent) 18%, transparent) 30%, color-mix(in srgb, var(--peach-accent) 8%, transparent) 100%);925  opacity: 0; transform: scaleX(0.15); transform-origin: left center;926}927.peach-copy-btn.is-copied {928  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;929  box-shadow:930    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),931    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),932    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);933}934.peach-copy-btn.is-copied .peach-copy-icon {935  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;936}937.peach-copy-btn.is-copied .peach-copy-sheen {938  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;939}940.peach-copy-btn.is-retreat {941  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;942}943.peach-copy-btn.is-retreat .peach-copy-sheen {944  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;945}946.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }947.peach-copy-drain-bar {948  display: block; width: 100%; height: 100%;949  background: var(--peach-accent); opacity: 0.7;950  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;951}952953/* Unlock screen elements */954.peach-unlock-headline {955  margin: 2px 0 0;956  font-family: var(--font-display);957  font-size: 52px; line-height: 0.95;958  font-style: italic; font-weight: 400;959}960.peach-subline {961  margin: 0;962  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;963  font-size: 0.625rem; color: var(--peach-t2); font-style: italic;964}965.peach-subline--lock {966  max-width: 248px;967  line-height: 1.5;968}969.peach-underline-input {970  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);971  padding: 6px 0; background: transparent; color: var(--peach-t0);972  outline: none;973  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;974  font-size: 0.8125rem;975  caret-color: var(--peach-accent);976}977.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }978.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }979.peach-hint {980  margin: 0;981  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;982  font-size: 0.625rem; color: var(--peach-t2);983}984.peach-unlock-footer {985  margin-top: 4px; display: flex; align-items: center; gap: 7px;986  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;987  font-size: 0.625rem; color: var(--peach-t2);988}989.peach-unlock-footer--lock {990  padding-top: 2px;991}992993/* Breach badge */994.peach-breach-badge {995  display: flex;996  position: relative;997  z-index: 1;998  align-items: center;999  gap: 7px;1000  font-size: 0.5625rem;1001  color: var(--peach-breach);1002  padding: 5px 10px;1003  margin-bottom: 4px;1004  border-radius: 8px;1005  background: rgba(220, 80, 60, 0.07);1006  border: 1px solid rgba(220, 80, 60, 0.18);1007  letter-spacing: 0.04em;1008}10091010.peach-password-value.is-breached {1011  color: rgba(220, 80, 60, 0.75);1012  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1013}10141015/* ── Overlay views ─────────────────────────────────────────────────── */1016.peach-overlay-view {1017  position: absolute;1018  inset: 0;1019  display: flex;1020  flex-direction: column;1021  background:1022    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1023    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1024    var(--peach-bg);1025  z-index: 2;1026  overflow: hidden;1027  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1028}10291030.peach-overlay-view:has(.stk-shell) {1031  background: var(--peach-bg);1032}1033@keyframes overlay-in {1034  from { opacity: 0; transform: translateY(8px); }1035  to   { opacity: 1; transform: translateY(0); }1036}1037.peach-overlay-view.ov-enter-up {1038  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1039}1040.peach-overlay-view.ov-exit-up {1041  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1042}1043.peach-overlay-view.ov-enter-right {1044  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1045}1046.peach-overlay-view.ov-exit-right {1047  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1048}10491050@keyframes ov-enter-up {1051  from { opacity: 0; transform: translateY(18px); }1052  to   { opacity: 1; transform: translateY(0); }1053}1054@keyframes ov-exit-up {1055  from { opacity: 1; transform: translateY(0); }1056  to   { opacity: 0; transform: translateY(-12px); }1057}1058@keyframes ov-enter-right {1059  from { opacity: 0; transform: translateX(20px); }1060  to   { opacity: 1; transform: translateX(0); }1061}1062@keyframes ov-exit-right {1063  from { opacity: 1; transform: translateX(0); }1064  to   { opacity: 0; transform: translateX(20px); }1065}10661067/* Overlay shared header */1068.peach-overlay-header {1069  padding: 10px 12px 8px;1070  display: flex;1071  align-items: center;1072  gap: 10px;1073  flex-shrink: 0;1074}1075/* Back button — circular pill matching the settings stack masthead (.stk-back) */1076.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1077  width: 28px;1078  height: 28px;1079  flex: 0 0 28px;1080  border-radius: 999px;1081  border: 1px solid var(--peach-border);1082  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1083  color: var(--peach-t1);1084  padding: 0;1085}1086.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1087  color: var(--peach-t0);1088  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1089  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1090}1091.peach-overlay-title {1092  font-family: var(--font-display);1093  font-style: italic;1094  font-weight: 400;1095  font-size: 20px;1096  line-height: 1;1097  color: var(--peach-t0);1098  flex: 1;1099  text-align: center;1100}1101/* Balances the 28px back button so the title stays visually centred */1102.peach-overlay-spacer {1103  width: 28px;1104  flex: 0 0 28px;1105}11061107.peach-overlay-card {1108  background: var(--peach-s1);1109  border: 1px solid var(--peach-t3);1110  border-radius: 12px;1111  overflow: hidden;1112  width: 100%;1113}11141115.peach-onboarding-alt-actions {1116  display: flex;1117  flex-direction: column;1118  gap: 4px;1119  padding: 0;1120}11211122.peach-settings-copy {1123  margin: 0 0 10px;1124  font-size: 0.6875rem;1125  line-height: 1.5;1126  color: var(--peach-t2);1127}11281129.peach-settings-copy strong {1130  color: var(--peach-t0);1131}11321133.peach-settings-copy--spacious {1134  margin-bottom: 12px;1135}11361137.peach-settings-copy--result {1138  color: var(--peach-accent);1139  font-size: 0.8125rem;1140  text-align: center;1141  padding: 8px 0;1142}11431144.peach-settings-copy--danger {1145  color: var(--peach-breach);1146}11471148.peach-settings-copy--success {1149  color: var(--peach-accent);1150}11511152.peach-inline-feedback {1153  font-size: 0.6875rem;1154  margin: 10px 0 0;1155}11561157.peach-inline-feedback--ok {1158  color: var(--peach-accent);1159}11601161.peach-inline-feedback--error {1162  color: var(--peach-breach);1163}11641165.peach-inline-feedback--muted {1166  color: var(--peach-t2);1167  font-size: 0.625rem;1168  margin: 4px 0;1169}11701171.peach-inline-feedback--spaced {1172  margin-top: 12px;1173}11741175.peach-settings-actions--row {1176  display: flex;1177  gap: 6px;1178}11791180.peach-settings-actions--end {1181  margin-top: 14px;1182  justify-content: flex-end;1183}11841185.peach-settings-stack {1186  display: flex;1187  flex-direction: column;1188  gap: 6px;1189}11901191.peach-settings-stack--tight {1192  gap: 4px;1193}11941195.peach-settings-stack--spacious {1196  gap: 8px;1197}11981199.peach-settings-input {1200  width: 100%;1201  box-sizing: border-box;1202  padding: 8px 10px;1203  background: rgba(0, 0, 0, 0.22);1204  border: 1px solid transparent;1205  border-radius: 6px;1206  color: var(--peach-t0);1207  font-family: var(--font-ui);1208  font-size: 0.75rem;1209  outline: none;1210  transition: border-color 120ms ease, background 120ms ease;1211}12121213.peach-settings-input:focus {1214  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1215  background: rgba(0, 0, 0, 0.28);1216}12171218.peach-settings-input[type="password"] {1219  font-family: var(--font-mono);1220  letter-spacing: 0.04em;1221}12221223.peach-hidden-file-input {1224  display: none;1225}12261227.peach-checkbox-note {1228  display: flex;1229  align-items: flex-start;1230  gap: 8px;1231  font-size: 0.6875rem;1232  color: var(--peach-t1);1233  cursor: pointer;1234  margin: 12px 0;1235}12361237.peach-checkbox-note input {1238  margin-top: 1px;1239}12401241.peach-danger-notice {1242  background: rgba(220, 80, 60, 0.08);1243  border: 1px solid rgba(220, 80, 60, 0.2);1244  border-radius: 6px;1245  padding: 9px 11px;1246  font-size: 0.6875rem;1247  color: var(--peach-t1);1248  line-height: 1.5;1249}12501251.peach-info-notice {1252  font-size: 0.6875rem;1253  color: var(--peach-t1);1254  line-height: 1.5;1255  background: var(--surface-card);1256  border: 1px solid var(--peach-t3);1257  border-radius: 6px;1258  padding: 8px 10px;1259}12601261.peach-info-notice--warn {1262  border-color: rgba(220, 38, 38, 0.4);1263  background: rgba(220, 38, 38, 0.06);1264  color: rgba(220, 38, 38, 0.92);1265  margin-bottom: 8px;1266}12671268.peach-strength-row {1269  display: flex;1270  align-items: center;1271  gap: 8px;1272  margin-bottom: 10px;1273}12741275.peach-strength-track {1276  flex: 1;1277  height: 4px;1278  background: var(--peach-s2);1279  border-radius: 2px;1280  overflow: hidden;1281}12821283.peach-strength-fill {1284  height: 100%;1285  border-radius: 2px;1286  transition: width 120ms ease, background 120ms ease;1287}12881289/* ── Type selector tabs ── */1290.peach-type-tabs {1291  display: flex;1292  gap: 0;1293  background: var(--peach-t4);1294  border-radius: 8px;1295  padding: 3px;1296}12971298.peach-type-tab {1299  flex: 1;1300  display: flex;1301  align-items: center;1302  justify-content: center;1303  gap: 6px;1304  padding: 6px 10px;1305  border-radius: 6px;1306  border: none;1307  background: transparent;1308  cursor: pointer;1309  font-family: Inter, system-ui, sans-serif;1310  font-size: 0.6875rem;1311  font-weight: 400;1312  letter-spacing: 0.04em;1313  color: var(--peach-t1);1314  transition: background 150ms ease, color 150ms ease;1315}13161317.peach-type-tab.is-active {1318  background: var(--peach-s2);1319  color: var(--peach-t0);1320  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1321}13221323.peach-type-tab:not(.is-active):hover {1324  color: var(--peach-t0);1325}13261327.peach-type-tab svg {1328  opacity: 0.7;1329  flex-shrink: 0;1330}13311332.peach-type-tab.is-active svg {1333  opacity: 1;1334}13351336/* ── List view ───────────────────────────────────────────────────────── */1337.peach-list-top {1338  padding: 0 10px;1339  min-height: 46px;1340  display: flex;1341  align-items: center;1342  gap: 6px;1343  border-bottom: 1px solid var(--peach-t3);1344  flex-shrink: 0;1345  background: var(--peach-s1);1346}13471348.peach-vault-list {1349  flex: 1;1350  overflow-y: auto;1351  scrollbar-width: none;1352}1353.peach-vault-list::-webkit-scrollbar { display: none; }13541355/* Scrollbar — vault list */1356.peach-vault-list {1357  scrollbar-width: thin;1358  scrollbar-color: var(--peach-t3) transparent;1359}13601361.peach-vault-list::-webkit-scrollbar {1362  width: 3px;1363}13641365.peach-vault-list::-webkit-scrollbar-thumb {1366  background: var(--peach-t3);1367  border-radius: 2px;1368}13691370.peach-entry-row {1371  width: 100%;1372  display: flex;1373  align-items: center;1374  gap: 10px;1375  padding: 9px 16px;1376  background: transparent;1377  border: none;1378  border-bottom: 1px solid var(--peach-t3);1379  cursor: pointer;1380  color: inherit;1381  text-align: left;1382  transition: background 80ms ease;1383}1384.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1385.peach-entry-row:last-child { border-bottom: none; }1386.peach-entry-row.is-active {1387  box-shadow: inset 2px 0 0 var(--peach-accent);1388  background: rgba(240,232,216,0.03);1389}1390.peach-entry-row:focus-visible {1391  outline: none;1392  box-shadow: 0 0 0 1px var(--peach-border-accent);1393  background: rgba(240,232,216,0.03);1394}1395.peach-entry-row-icon {1396  width: 26px; height: 26px;1397  border-radius: 7px;1398  border: 1px solid var(--peach-t3);1399  display: flex; align-items: center; justify-content: center;1400  color: var(--peach-t2);1401  flex-shrink: 0;1402}1403.peach-entry-row-icon.is-breach {1404  border-color: rgba(220,80,60,0.3);1405  color: rgba(220,80,60,0.7);1406}14071408/* Title-initials chip used as the favicon fallback for login entries whose1409 * real favicon hasn't been cached by the browser yet (freshly-imported,1410 * never-visited domains). Background colour is hashed from the title so1411 * the same entry always shows the same chip. The chip fits the same1412 * 26×26 row icon slot the favicon would take. */1413.peach-favicon-initials {1414  display: inline-flex;1415  align-items: center;1416  justify-content: center;1417  width: 100%;1418  height: 100%;1419  border-radius: 4px;1420  font-family: "IBM Plex Mono", monospace;1421  font-size: 0.5625rem;1422  font-weight: 600;1423  letter-spacing: 0.04em;1424  color: rgba(240, 232, 216, 0.92);1425  text-transform: uppercase;1426  user-select: none;1427}1428.peach-entry-row-info { flex: 1; min-width: 0; }1429.peach-entry-row-name {1430  display: block;1431  font-family: var(--font-display);1432  font-size: 1.0625rem;1433  font-style: italic;1434  font-weight: 400;1435  color: var(--peach-t0);1436  line-height: 1.2;1437  white-space: nowrap;1438  overflow: hidden;1439  text-overflow: ellipsis;1440}1441.peach-entry-row-meta {1442  display: block;1443  font-family: "IBM Plex Mono", monospace;1444  font-size: 0.5625rem;1445  color: var(--peach-t2);1446  margin-top: 1px;1447  letter-spacing: 0.05em;1448}1449.peach-entry-row-dot {1450  width: 5px; height: 5px;1451  border-radius: 50%;1452  background: rgba(220,80,60,0.7);1453  flex-shrink: 0;1454}1455.peach-new-entry-row {1456  display: flex;1457  align-items: center;1458  justify-content: center;1459  gap: 6px;1460  width: 100%;1461  padding: 11px;1462  background: transparent;1463  border: none;1464  border-top: 1px solid var(--peach-t3);1465  color: var(--peach-t2);1466  font-family: "IBM Plex Mono", monospace;1467  font-size: 0.5625rem;1468  text-transform: uppercase;1469  letter-spacing: 0.14em;1470  cursor: pointer;1471  flex-shrink: 0;1472  transition: color 120ms ease, background 120ms ease;1473}1474.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }14751476/* ── Multi-select mode ─────────────────────────────────────────────── */14771478/* Select-mode trigger button in sort bar — same shape as trash btn */1479.peach-sort-select-btn {1480  display: flex;1481  align-items: center;1482  justify-content: center;1483  padding: 3px 5px;1484  background: transparent;1485  border: none;1486  cursor: pointer;1487  color: var(--peach-t2);1488  border-radius: 4px;1489  transition: color 140ms ease, background 140ms ease;1490}1491.peach-sort-select-btn:hover {1492  color: var(--peach-t1);1493  background: var(--peach-t3);1494}14951496/* Sort bar in select mode */1497.peach-select-cancel-btn {1498  background: transparent;1499  border: none;1500  padding: 0 4px;1501  cursor: pointer;1502  font-family: "IBM Plex Mono", monospace;1503  font-size: 0.5625rem;1504  letter-spacing: 0.12em;1505  text-transform: uppercase;1506  color: var(--peach-t2);1507  transition: color 140ms ease;1508  flex-shrink: 0;1509}1510.peach-select-cancel-btn:hover { color: var(--peach-t0); }15111512.peach-select-count-label {1513  flex: 1;1514  text-align: center;1515  font-family: "IBM Plex Mono", monospace;1516  font-size: 0.5625rem;1517  letter-spacing: 0.14em;1518  text-transform: uppercase;1519  color: var(--peach-t1);1520}15211522.peach-select-all-btn {1523  background: transparent;1524  border: none;1525  padding: 0 4px;1526  cursor: pointer;1527  font-family: "IBM Plex Mono", monospace;1528  font-size: 0.5625rem;1529  letter-spacing: 0.12em;1530  text-transform: uppercase;1531  color: var(--peach-t2);1532  transition: color 140ms ease;1533  flex-shrink: 0;1534}1535.peach-select-all-btn:hover { color: var(--peach-accent); }15361537/* List in select mode */1538.peach-vault-list.is-selecting .peach-entry-row {1539  cursor: default;1540}1541.peach-vault-list.is-selecting .peach-entry-row:hover {1542  background: rgba(240,232,216,0.02);1543}1544.peach-vault-list.is-selecting .peach-entry-row.is-selected {1545  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1546}1547.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1548  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1549}15501551/* Select indicator circles in icon slot */1552.peach-entry-row-icon.is-select-icon {1553  color: var(--peach-t2);1554}1555.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1556  color: var(--peach-accent);1557}15581559/* Delete action bar at bottom (replaces new-entry row) */1560.peach-select-action-bar {1561  display: flex;1562  align-items: center;1563  justify-content: center;1564  gap: 7px;1565  width: 100%;1566  padding: 11px;1567  background: transparent;1568  border: none;1569  border-top: 1px solid var(--peach-t3);1570  color: var(--peach-t1);1571  font-family: "IBM Plex Mono", monospace;1572  font-size: 0.5625rem;1573  text-transform: uppercase;1574  letter-spacing: 0.14em;1575  cursor: pointer;1576  flex-shrink: 0;1577  transition: color 120ms ease, background 120ms ease;1578}1579.peach-select-action-bar:not(:disabled):hover {1580  color: var(--peach-t0);1581  background: rgba(220,80,60,0.06);1582}1583.peach-select-action-bar:not(:disabled):hover svg {1584  stroke: rgba(220,80,60,0.8);1585}1586.peach-select-action-bar:disabled,1587.peach-select-action-bar.is-empty {1588  color: var(--peach-t2);1589  cursor: default;1590  opacity: 0.5;1591}1592.peach-search-counter-list {1593  white-space: nowrap;1594  flex-shrink: 0;1595}1596.peach-list-empty {1597  min-height: 180px;1598  display: grid;1599  place-items: center;1600  color: var(--peach-t2);1601  font-family: "IBM Plex Mono", monospace;1602  font-size: 0.6875rem;1603}16041605/* ── Settings view ───────────────────────────────────────────────────── */1606.peach-settings-body {1607  flex: 1;1608  overflow-y: auto;1609  min-height: 0;1610  display: flex;1611  flex-direction: column;1612  padding: 2px 0 10px;1613}1614.peach-settings-group {1615  margin: 4px 10px;1616  padding: 9px 14px 11px;1617  border-radius: 12px;1618  border: 1px solid rgba(255, 255, 255, 0.07);1619  background: rgba(26, 20, 16, 0.60);1620  backdrop-filter: blur(10px) saturate(1.3);1621  -webkit-backdrop-filter: blur(10px) saturate(1.3);1622}16231624.peach-settings-group + .peach-settings-group {1625  margin-top: 6px;1626}16271628@supports not (backdrop-filter: blur(1px)) {1629  .peach-settings-group {1630    background: rgba(26, 20, 16, 0.90);1631    border-color: rgba(255, 255, 255, 0.09);1632    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1633  }1634}16351636.light .peach-settings-group,1637[data-theme="light"] .peach-settings-group {1638  background: rgba(245, 237, 226, 0.70);1639  border-color: rgba(26, 18, 8, 0.08);1640  backdrop-filter: blur(10px) saturate(1.2);1641  -webkit-backdrop-filter: blur(10px) saturate(1.2);1642}16431644@supports not (backdrop-filter: blur(1px)) {1645  .light .peach-settings-group,1646  [data-theme="light"] .peach-settings-group {1647    background: rgba(245, 237, 226, 0.97);1648    border-color: rgba(26, 18, 8, 0.10);1649  }1650}1651.peach-export-intro {1652  padding-bottom: 8px;1653}1654.peach-export-card {1655  display: grid;1656  gap: 10px;1657}1658.peach-rune-canvas {1659  border-radius: 8px;1660  background: rgba(0, 0, 0, 0.22);1661  flex: 1;1662  align-self: center;1663}1664.peach-script-input {1665  font-family: "PeachScript", monospace;1666  font-size: 0.6875rem;1667  line-height: 1.9;1668  letter-spacing: 0.06em;1669  color: var(--peach-t0);1670  background: rgba(0, 0, 0, 0.22);1671  border: none;1672  border-radius: 6px;1673  padding: 12px;1674  width: 100%;1675  min-height: 96px;1676  resize: vertical;1677  word-break: break-all;1678  scrollbar-width: none;1679  -ms-overflow-style: none;1680}16811682.peach-script-input::-webkit-scrollbar { display: none; }1683.peach-csv-warning {1684  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1685  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1686  color: var(--peach-t0);1687  border-radius: 6px;1688  padding: 10px 12px;1689  margin-bottom: 8px;1690  font-size: 0.75rem;1691  line-height: 1.45;1692}1693.peach-export-card--primary {1694  background:1695    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1696}16971698/* Export menu — distribute the three format cards across the popup. */1699.peach-export-menu {1700  display: flex;1701  flex-direction: column;1702  flex: 1;1703  min-height: 0;1704}1705.peach-export-menu .peach-settings-group {1706  flex: 1;1707  display: flex;1708  flex-direction: column;1709  justify-content: center;1710  gap: 10px;1711}17121713/* Result view — the script-string fills the remaining vertical surface. */1714.peach-export-result-group {1715  flex: 1;1716  display: flex;1717  flex-direction: column;1718  min-height: 0;1719  border-bottom: none;1720}1721.peach-export-result-group .peach-export-card {1722  flex: 1;1723  min-height: 0;1724  display: flex;1725  flex-direction: column;1726  gap: 10px;1727}1728.peach-export-result-group .peach-export-card-copy {1729  flex-shrink: 0;1730}1731.peach-export-result-group .peach-settings-label {1732  flex-shrink: 0;1733}1734.peach-export-result-group button {1735  flex-shrink: 0;1736}1737.peach-export-card-head {1738  display: flex;1739  align-items: center;1740  justify-content: space-between;1741  gap: 10px;1742}1743.peach-export-card-copy {1744  margin: 0;1745  font-size: 0.75rem;1746  line-height: 1.55;1747  color: var(--peach-t1);1748}1749.peach-export-note {1750  margin: 0;1751  font-size: 0.625rem;1752  line-height: 1.5;1753  color: var(--peach-t2);1754}1755.peach-export-strength-track {1756  height: 3px;1757  background: var(--peach-border);1758  border-radius: 2px;1759  margin: 4px 0 2px;1760  overflow: hidden;1761}1762.peach-export-strength-fill {1763  height: 100%;1764  border-radius: 2px;1765  transition: width 250ms ease, background 250ms ease;1766}1767.peach-export-strength-warn {1768  margin: 0;1769  font-size: 0.625rem;1770  line-height: 1.5;1771  color: #e84040;1772  font-family: "IBM Plex Mono", monospace;1773}1774.peach-export-strength-hint {1775  margin: 0;1776  font-size: 0.625rem;1777  line-height: 1.5;1778  color: var(--peach-t2);1779  font-family: "IBM Plex Mono", monospace;1780}1781.peach-export-pill {1782  display: inline-flex;1783  align-items: center;1784  padding: 4px 8px;1785  border-radius: 999px;1786  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1787  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1788  color: var(--peach-accent);1789  font-family: "IBM Plex Mono", monospace;1790  font-size: 0.5rem;1791  letter-spacing: 0.12em;1792  text-transform: uppercase;1793  white-space: nowrap;1794}1795.peach-export-pill--danger {1796  border-color: rgba(220,80,60,0.22);1797  background: rgba(220,80,60,0.08);1798  color: var(--peach-breach);1799}1800.peach-settings-label {1801  margin: 0 0 6px;1802  font-family: "IBM Plex Mono", monospace;1803  font-size: 0.5rem;1804  text-transform: uppercase;1805  letter-spacing: 0.18em;1806  color: var(--peach-t2);1807}1808.peach-settings-row {1809  display: flex;1810  align-items: center;1811  justify-content: space-between;1812  gap: 12px;1813  min-height: 34px;1814  padding: 6px 0;1815  font-size: 0.8125rem;1816  color: var(--peach-t1);1817}1818.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1819.peach-settings-value {1820  font-family: "IBM Plex Mono", monospace;1821  font-size: 0.625rem;1822  color: var(--peach-t2);1823}18241825.peach-settings-value--status {1826  display: flex;1827  align-items: center;1828  gap: 6px;1829}18301831.peach-settings-link {1832  font-family: "IBM Plex Mono", monospace;1833  font-size: 0.625rem;1834  color: var(--peach-accent);1835  text-decoration: none;1836  cursor: pointer;1837}1838.peach-settings-link:hover {1839  text-decoration: underline;1840}18411842.peach-settings-row--stack {1843  flex-direction: column;1844  align-items: stretch;1845  gap: 6px;1846}18471848.peach-settings-row--top {1849  align-items: flex-start;1850}18511852.peach-settings-row-main {1853  display: flex;1854  flex-direction: column;1855  gap: 4px;1856  flex: 1;1857}1858.peach-toggle {1859  width: 28px; height: 16px;1860  border-radius: 999px;1861  background: var(--peach-t3);1862  border: 1px solid var(--peach-t3);1863  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1864  flex-shrink: 0;1865  transition: background 200ms ease, border-color 200ms ease;1866  cursor: pointer;1867}1868.peach-toggle.is-on {1869  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1870  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1871}1872.peach-toggle-knob {1873  width: 10px; height: 10px;1874  border-radius: 50%;1875  background: var(--peach-t2);1876  flex-shrink: 0;1877  transform: translateX(0px);1878  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1879}1880.peach-toggle.is-on .peach-toggle-knob {1881  background: var(--peach-accent);1882  transform: translateX(12px);1883}1884.peach-settings-footer {1885  display: flex;1886  align-items: center;1887  gap: 8px;1888  margin-top: auto;1889  padding: 14px 16px 8px;1890  font-family: "IBM Plex Mono", monospace;1891  font-size: 0.5625rem;1892  color: var(--peach-t2);1893}18941895/* ── Settings home navigation ──────────────────────────────────────────── */1896.peach-settings-nav-label {1897  margin: 0 0 2px;1898  padding: 12px 16px 4px;1899  font-family: "IBM Plex Mono", monospace;1900  font-size: 0.5rem;1901  text-transform: uppercase;1902  letter-spacing: 0.18em;1903  color: var(--peach-t2);1904}19051906.peach-settings-cat-row {1907  display: flex;1908  align-items: center;1909  gap: 10px;1910  width: 100%;1911  padding: 9px 16px;1912  background: none;1913  border: none;1914  border-bottom: 1px solid var(--peach-t3);1915  cursor: pointer;1916  text-align: left;1917  color: inherit;1918  transition: background var(--peach-dur-80) ease;1919}1920.peach-settings-cat-row:hover {1921  background: var(--peach-t3);1922}1923.peach-settings-cat-row:last-child {1924  border-bottom: none;1925}19261927.peach-settings-cat-icon {1928  width: 28px;1929  height: 28px;1930  border-radius: 7px;1931  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1932  color: var(--peach-accent);1933  display: flex;1934  align-items: center;1935  justify-content: center;1936  flex-shrink: 0;1937}1938/* Light theme: peach-on-cream is too low-contrast — both colors are warm.1939   Darken the icon stroke to ink and bump the bg tint so the icon reads1940   sharply while the cell still feels accent-tinted. */1941.light .peach-settings-cat-icon {1942  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);1943  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));1944}19451946.peach-settings-cat-content {1947  flex: 1;1948  display: flex;1949  flex-direction: column;1950  gap: 2px;1951  min-width: 0;1952}19531954.peach-settings-cat-name {1955  font-size: 0.8125rem;1956  font-weight: 450;1957  color: var(--peach-t0);1958  line-height: 1.2;1959}19601961.peach-settings-cat-desc {1962  font-size: 0.625rem;1963  color: var(--peach-t2);1964  line-height: 1.3;1965  white-space: nowrap;1966  overflow: hidden;1967  text-overflow: ellipsis;1968}19691970.peach-settings-cat-chevron {1971  color: var(--peach-t2);1972  flex-shrink: 0;1973  opacity: 0.5;1974}19751976/* ── Settings sub-view section labels ──────────────────────────────────── */1977.peach-settings-sub-label {1978  margin: 12px 0 4px;1979  font-family: "IBM Plex Mono", monospace;1980  font-size: 0.5rem;1981  text-transform: uppercase;1982  letter-spacing: 0.18em;1983  color: var(--peach-t2);1984}1985.peach-settings-sub-label:first-child {1986  margin-top: 4px;1987}19881989/* ── Settings: collapsible Advanced section ─────────────────────────────── */1990.peach-settings-advanced-toggle {1991  display: flex;1992  align-items: center;1993  justify-content: space-between;1994  width: 100%;1995  background: none;1996  border: none;1997  cursor: pointer;1998  padding: 12px 0 4px;1999  margin: 0;2000  color: inherit;2001}2002.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {2003  color: var(--peach-t1);2004}2005.peach-settings-advanced-chevron {2006  font-size: 0.5625rem;2007  color: var(--peach-t3);2008  letter-spacing: 0;2009  transition: color 120ms ease;2010}20112012/* ── Feedback form ──────────────────────────────────────────────────────── */2013.peach-feedback-group {2014  flex: 1;2015  display: flex;2016  flex-direction: column;2017  border-bottom: none;2018}20192020.peach-feedback-intro {2021  margin: 4px 0 14px;2022  font-size: 0.75rem;2023  line-height: 1.55;2024  color: var(--peach-t1);2025}20262027.peach-feedback-chips {2028  display: flex;2029  flex-wrap: wrap;2030  gap: 6px;2031  margin-bottom: 14px;2032}20332034.peach-feedback-chip {2035  padding: 4px 10px;2036  border-radius: 999px;2037  border: 1px solid var(--peach-t3);2038  background: none;2039  color: var(--peach-t2);2040  font-size: 0.6875rem;2041  font-family: var(--font-ui);2042  cursor: pointer;2043  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2044    background var(--peach-dur-80) ease;2045}2046.peach-feedback-chip:hover {2047  border-color: var(--peach-t2);2048  color: var(--peach-t1);2049}2050.peach-feedback-chip.is-active {2051  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);2052  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2053  color: var(--peach-accent);2054}20552056.peach-feedback-textarea {2057  flex: 1;2058  width: 100%;2059  min-height: 120px;2060  box-sizing: border-box;2061  background: rgba(0, 0, 0, 0.22);2062  border: 1px solid transparent;2063  border-radius: 6px;2064  color: var(--peach-t0);2065  font-size: 0.75rem;2066  font-family: var(--font-ui);2067  line-height: 1.5;2068  padding: 8px 10px;2069  resize: none;2070  outline: none;2071  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2072}2073.peach-feedback-textarea:focus {2074  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2075  background: rgba(0, 0, 0, 0.28);2076}2077.peach-feedback-textarea:focus {2078  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2079}2080.peach-feedback-textarea::placeholder {2081  color: var(--peach-t2);2082}20832084.peach-feedback-meta {2085  margin: 6px 0 0;2086  font-size: 0.625rem;2087  color: var(--peach-t2);2088  font-family: "IBM Plex Mono", monospace;2089}20902091.peach-feedback-result {2092  margin: 8px 0 0;2093  font-size: 0.6875rem;2094  font-family: "IBM Plex Mono", monospace;2095}2096.peach-feedback-result--ok { color: var(--peach-sync-ok); }2097.peach-feedback-result--err { color: var(--peach-breach); }20982099.peach-feedback-submit {2100  width: 100%;2101  margin-top: 12px;2102  justify-content: center;2103}21042105.peach-feedback-anon {2106  margin: 8px 0 0;2107  font-size: 0.625rem;2108  color: var(--peach-t2);2109  text-align: center;2110}21112112.peach-passkey-badge {2113  margin-left: 8px;2114  font-size: 0.625rem;2115  letter-spacing: 0.06em;2116  text-transform: uppercase;2117  color: var(--peach-t2);2118  font-family: var(--font-ui);2119  vertical-align: middle;2120}21212122.peach-passkey-delete-btn {2123  color: var(--peach-breach);2124  border-color: rgba(229, 85, 85, 0.25);2125}21262127.peach-passkey-delete-confirm {2128  display: flex;2129  align-items: center;2130  gap: 8px;2131  padding: 8px 10px;2132  background: rgba(229, 85, 85, 0.06);2133  border: 1px solid rgba(229, 85, 85, 0.2);2134  border-radius: 6px;2135}21362137.peach-passkey-delete-confirm-copy {2138  flex: 1;2139  font-size: 0.6875rem;2140  color: var(--peach-t1);2141}21422143.peach-passkey-delete-btn--confirm {2144  color: var(--peach-breach);2145  border-color: rgba(229, 85, 85, 0.4);2146}21472148.peach-passkey-activity {2149  flex-direction: column;2150  align-items: flex-start;2151  gap: 4px;2152}21532154.peach-passkey-meta {2155  font-size: 0.6875rem;2156  color: var(--peach-t2);2157}21582159.peach-passkey-actions {2160  position: relative;2161  z-index: 1;2162  margin-top: 14px;2163  display: flex;2164  flex-direction: column;2165  gap: 8px;2166}21672168.peach-passkey-approval {2169  display: flex;2170  flex-direction: column;2171  align-items: center;2172  padding: 16px 20px 14px;2173  gap: 8px;2174  text-align: center;2175}21762177.peach-passkey-approval-icon {2178  width: 36px;2179  height: 36px;2180  border-radius: 10px;2181  background: var(--peach-s2);2182  border: 1px solid var(--peach-t3);2183  display: flex;2184  align-items: center;2185  justify-content: center;2186  flex-shrink: 0;2187  color: var(--peach-accent);2188}21892190.peach-passkey-approval-icon img,2191.peach-passkey-approval-icon svg {2192  width: 22px;2193  height: 22px;2194  border-radius: 5px;2195}21962197.peach-passkey-approval-rp {2198  font-family: var(--font-ui);2199  font-size: 0.75rem;2200  color: var(--peach-t2);2201  letter-spacing: 0.03em;2202}22032204.peach-passkey-approval-action {2205  font-family: var(--font-display);2206  font-style: italic;2207  font-weight: 300;2208  font-size: 18px;2209  color: var(--peach-t0);2210  line-height: 1.1;2211  margin: 1px 0;2212}22132214.peach-passkey-approval-user {2215  font-family: var(--font-mono);2216  font-size: 0.6875rem;2217  color: var(--peach-t1);2218  background: var(--peach-s2);2219  border: 1px solid var(--peach-t3);2220  border-radius: 4px;2221  padding: 3px 8px;2222}22232224.peach-passkey-approval-notice {2225  font-size: 0.625rem;2226  color: var(--peach-t2);2227  line-height: 1.5;2228  max-width: 220px;2229}22302231.peach-passkey-approval-actions {2232  display: flex;2233  gap: 8px;2234  width: 100%;2235  margin-top: 6px;2236}22372238.peach-passkey-approval-actions .peach-btn {2239  flex: 1;2240}22412242/* ── Inline generator drawer ── */2243.peach-generator-drawer {2244  display: grid;2245  grid-template-rows: 0fr;2246  transition: grid-template-rows 320ms var(--peach-curve-arrival);2247  overflow: hidden;2248}2249.peach-generator-drawer.is-open {2250  grid-template-rows: 1fr;2251}2252.peach-generator-drawer-inner {2253  min-height: 0;2254  overflow: hidden;2255}2256.peach-generator-drawer-content {2257  border-top: 1px solid var(--peach-t3);2258  padding: 8px 0 4px;2259  display: flex;2260  flex-direction: column;2261  gap: 8px;2262}22632264/* ── Compact generator (inside entry edit) ── */2265.peach-generator-drawer-content--compact {2266  border-top: 1px solid var(--peach-t3);2267  padding: 8px 0 2px;2268  gap: 7px;2269}2270.peach-pwgen-compact-display-row {2271  display: flex;2272  align-items: center;2273  gap: 6px;2274}2275.peach-pwgen-compact-output {2276  flex: 1;2277  min-width: 0;2278  font-family: "IBM Plex Mono", monospace;2279  font-size: 0.6875rem;2280  font-weight: 400;2281  letter-spacing: 0.04em;2282  color: var(--peach-t0);2283  background: rgba(240, 232, 216, 0.04);2284  border: 1px solid var(--peach-t3);2285  border-radius: 5px;2286  padding: 5px 8px;2287  line-height: 1.5;2288  outline: none;2289  transition: border-color 120ms ease;2290}22912292.peach-pwgen-compact-output:focus {2293  border-color: var(--peach-t1);2294}2295.peach-pwgen-compact-controls {2296  display: flex;2297  align-items: center;2298  gap: 6px;2299}2300.peach-pwgen-compact-slider {2301  flex: 1;2302  min-width: 0;2303  height: 2px !important;2304}2305.peach-pwgen-compact-controls .peach-pwgen-len-num {2306  flex-shrink: 0;2307  min-width: 18px;2308  text-align: right;2309}2310.peach-pwgen-compact-pills {2311  display: flex;2312  gap: 3px;2313  flex-shrink: 0;2314}2315.peach-pwgen-compact-pills .peach-pwgen-pill {2316  padding: 2px 7px;2317  font-size: 0.5rem;2318}2319.peach-pwgen-compact-use {2320  flex-shrink: 0;2321  font-size: 0.625rem !important;2322  padding: 3px 9px !important;2323  min-height: 22px !important;2324  border-radius: 5px !important;2325}23262327/* ── Password edit row (input + eye toggle side-by-side) ── */2328.peach-password-edit-row {2329  display: flex;2330  align-items: center;2331  gap: 6px;2332}2333.peach-password-edit-row .peach-inline-input {2334  flex: 1;2335  min-width: 0;2336}23372338/* ── Generate toggle link ── */2339.peach-generate-toggle-link {2340  display: inline-flex;2341  align-items: center;2342  gap: 5px;2343  background: none;2344  border: none;2345  padding: 0;2346  cursor: pointer;2347  font-family: "IBM Plex Mono", monospace;2348  font-size: 0.625rem;2349  color: var(--peach-t2);2350  letter-spacing: 0.04em;2351  transition: color 120ms ease;2352  align-self: flex-start;2353}2354.peach-generate-toggle-link:hover {2355  color: var(--peach-accent);2356}23572358/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2359.peach-entry-body {2360  flex: 1;2361  overflow-y: auto;2362  overflow-x: hidden;2363  scrollbar-width: none;2364  -ms-overflow-style: none;2365  overscroll-behavior: contain;2366  display: grid;2367  gap: 10px;2368  align-content: start;2369  padding: 10px 20px 14px;2370  min-width: 0;2371  min-height: 0;2372}2373.peach-entry-body::-webkit-scrollbar { display: none; }23742375/* Type-toggle pills + inline note toolbar */2376.peach-new-type-row {2377  display: flex;2378  align-items: center;2379  gap: 6px;2380  margin-bottom: 2px;2381}2382.peach-new-type-btn {2383  background: transparent;2384  border: 1px solid var(--peach-t3);2385  border-radius: 12px;2386  padding: 3px 10px;2387  font-family: "IBM Plex Mono", monospace;2388  font-size: 0.5625rem;2389  letter-spacing: 0.12em;2390  text-transform: uppercase;2391  color: var(--peach-t2);2392  cursor: pointer;2393  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2394}2395.peach-new-type-btn.is-active {2396  color: var(--peach-t0);2397  border-color: var(--peach-accent);2398  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2399}2400.peach-new-type-btn:not(.is-active):hover {2401  color: var(--peach-t1);2402  border-color: var(--peach-t2);2403}24042405/* Editable title */2406.peach-new-title-wrap { margin: 0 0 2px; }2407.peach-new-title-input {2408  background: transparent;2409  border: none;2410  outline: none;2411  width: 100%;2412  color: var(--peach-t0);2413  font-family: var(--font-display);2414  font-style: italic;2415  font-weight: 400;2416  font-size: 40px;2417  line-height: 0.95;2418  caret-color: var(--peach-accent);2419}2420.peach-new-title-input::placeholder { color: var(--peach-t2); }24212422/* Editable domain field */2423.peach-domain-edit-row {2424  display: flex;2425  align-items: center;2426  gap: 6px;2427}24282429.peach-domain-edit-row .peach-domain-value--edit {2430  flex: 1;2431  width: 0;2432}24332434.peach-domain-url-btn {2435  flex-shrink: 0;2436  background: transparent;2437  border: none;2438  cursor: pointer;2439  color: var(--peach-t3);2440  padding: 2px 3px;2441  display: flex;2442  align-items: center;2443  line-height: 0;2444  border-radius: 3px;2445  transition: color 120ms ease;2446}24472448.peach-domain-url-btn:hover {2449  color: var(--peach-accent);2450}24512452.peach-domain-value--edit {2453  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2454  font-size: 0.625rem;2455  font-style: italic;2456  letter-spacing: 0.12em;2457  color: var(--peach-t1);2458  background: transparent;2459  border: none;2460  border-bottom: 1px solid var(--peach-t3);2461  outline: none;2462  width: 100%;2463  padding: 2px 0;2464  caret-color: var(--peach-accent);2465  transition: border-color 140ms ease, color 140ms ease;2466}2467.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2468.peach-domain-value--edit:focus {2469  border-bottom-color: rgba(240, 232, 216, 0.28);2470  color: var(--peach-t0);2471}24722473/* Editable field values (username, password, totp) */2474.peach-field-value--edit {2475  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2476  font-size: 0.8125rem;2477  color: var(--peach-t0);2478  background: transparent;2479  border: none;2480  border-bottom: 1px solid var(--peach-t3);2481  outline: none;2482  flex: 1;2483  min-width: 0;2484  padding: 3px 0;2485  caret-color: var(--peach-accent);2486  transition: border-color 140ms ease, color 140ms ease;2487}2488.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2489.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2490.peach-field-value--edit:focus {2491  border-bottom-color: rgba(240, 232, 216, 0.28);2492  color: var(--peach-t0);2493}24942495/* "+ add optional field" links */2496.peach-entry-add-links {2497  display: flex;2498  gap: 12px;2499  flex-wrap: wrap;2500  margin-top: -2px;2501}2502.peach-add-field-link {2503  background: transparent;2504  border: none;2505  padding: 0;2506  cursor: pointer;2507  font-family: "IBM Plex Mono", monospace;2508  font-size: 0.5625rem;2509  letter-spacing: 0.1em;2510  text-transform: uppercase;2511  color: var(--peach-t2);2512  transition: color 140ms ease;2513}2514.peach-add-field-link:hover { color: var(--peach-accent); }25152516/* ── New entry form (legacy classes) ────────────────────────────────── */2517.peach-new-body {2518  flex: 1;2519  overflow-y: auto;2520  padding: 10px 20px 14px;2521}2522.peach-new-name-input {2523  background: transparent;2524  border: none;2525  outline: none;2526  width: 100%;2527  color: var(--peach-t0);2528  font-family: var(--font-display);2529  font-style: italic;2530  font-weight: 400;2531  font-size: 40px;2532  line-height: 0.95;2533  caret-color: var(--peach-accent);2534}2535.peach-new-name-input::placeholder { color: var(--peach-t2); }2536.peach-new-field-input {2537  background: transparent;2538  border: none;2539  outline: none;2540  flex: 1;2541  min-width: 0;2542  caret-color: var(--peach-accent);2543}2544.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }25452546/* ── Canary card ── */2547.peach-canary-card {2548  border: 1px solid rgba(217, 160, 48, 0.2);2549  background: rgba(217, 160, 48, 0.03);2550  border-radius: 8px;2551  padding: 12px;2552}25532554.peach-canary-settings-header {2555  display: flex;2556  align-items: center;2557  justify-content: space-between;2558  cursor: pointer;2559  user-select: none;2560}25612562.peach-canary-card .peach-label {2563  color: rgba(217, 160, 48, 0.85);2564}25652566.peach-canary-card .peach-new-field-input {2567  border-color: rgba(217, 160, 48, 0.25);2568}25692570.peach-canary-card .peach-new-field-input:focus {2571  border-color: rgba(217, 160, 48, 0.5);2572}25732574.peach-canary-body {2575  margin-top: 12px;2576  display: flex;2577  flex-direction: column;2578  gap: 10px;2579}25802581.peach-canary-explainer {2582  display: flex;2583  gap: 10px;2584  padding: 10px 12px;2585  border-radius: 10px;2586  background: rgba(217, 160, 48, 0.06);2587  border: 1px solid rgba(217, 160, 48, 0.22);2588  margin-bottom: 4px;2589}25902591.peach-canary-explainer-icon {2592  font-size: 1rem;2593  flex-shrink: 0;2594  line-height: 1.2;2595}25962597.peach-canary-explainer-title {2598  font-family: var(--font-ui);2599  font-size: 0.6875rem;2600  font-weight: 500;2601  color: rgba(217, 160, 48, 0.9);2602  margin: 0 0 3px;2603}26042605.peach-canary-explainer-copy {2606  font-family: var(--font-ui);2607  font-size: 0.625rem;2608  color: var(--peach-t2);2609  line-height: 1.55;2610  margin: 0;2611}26122613.peach-canary-hint {2614  font-size: 0.625rem;2615  color: var(--peach-t2);2616  font-family: Inter, system-ui, sans-serif;2617  line-height: 1.5;2618  margin-top: 4px;2619}26202621.peach-canary-actions-row {2622  display: flex;2623  align-items: center;2624  gap: 8px;2625}26262627.peach-canary-test-btn {2628  border-color: rgba(217, 160, 48, 0.3);2629  color: rgba(217, 160, 48, 0.85);2630}26312632.peach-canary-test-result {2633  font-size: 0.625rem;2634  font-family: Inter, system-ui, sans-serif;2635}26362637.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2638.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }26392640.peach-canary-badge {2641  display: flex;2642  position: relative;2643  z-index: 1;2644  align-items: center;2645  gap: 5px;2646  padding: 4px 10px;2647  background: rgba(217, 160, 48, 0.12);2648  border: 1px solid rgba(217, 160, 48, 0.35);2649  border-radius: 6px;2650  margin-bottom: 6px;2651  width: fit-content;2652}26532654.peach-canary-badge-label {2655  font-size: 0.625rem;2656  letter-spacing: 0.06em;2657  color: rgba(217, 160, 48, 0.9);2658  font-family: var(--font-ui);2659  text-transform: uppercase;2660}26612662.peach-canary-badge-icon {2663  font-size: 0.6875rem;2664}26652666.peach-canary-suppress-row {2667  display: flex;2668  align-items: center;2669  gap: 8px;2670  padding: 6px 10px;2671  background: rgba(217, 160, 48, 0.08);2672  border-radius: 6px;2673  margin-bottom: 8px;2674}26752676.peach-canary-suppress-label {2677  font-size: 0.6875rem;2678  color: rgba(217, 160, 48, 0.85);2679  cursor: pointer;2680  font-family: var(--font-ui);2681  letter-spacing: 0.04em;2682}26832684.peach-regen-panel {2685  position: relative;2686  z-index: 1;2687  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2688  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2689  border-radius: 8px;2690  padding: 12px;2691  margin-bottom: 8px;2692}26932694.peach-regen-panel-header {2695  display: flex;2696  align-items: center;2697  justify-content: space-between;2698  margin-bottom: 10px;2699}27002701.peach-regen-panel-title {2702  font-size: 0.6875rem;2703  font-weight: 600;2704  letter-spacing: 0.06em;2705  text-transform: uppercase;2706  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2707}27082709.peach-regen-output {2710  background: rgba(0, 0, 0, 0.2);2711  border-radius: 6px;2712  padding: 10px;2713  margin-bottom: 10px;2714  font-family: var(--font-mono);2715  font-size: 0.8125rem;2716  word-break: break-all;2717  color: var(--peach-t1);2718}27192720.peach-regen-actions {2721  display: flex;2722  gap: 6px;2723}27242725.peach-regen-actions--spaced {2726  margin-bottom: 8px;2727}27282729.peach-regen-action-grow {2730  flex: 1;2731}27322733.peach-regen-copy-btn {2734  padding: 0 8px;2735}27362737.peach-regen-success {2738  position: relative;2739  z-index: 1;2740  background: rgba(40, 180, 80, 0.1);2741  border: 1px solid rgba(40, 180, 80, 0.3);2742  border-radius: 8px;2743  padding: 10px 12px;2744  margin-bottom: 8px;2745  display: flex;2746  align-items: center;2747  gap: 8px;2748  font-size: 0.6875rem;2749  color: rgba(40, 180, 80, 0.9);2750}27512752/* ── Note editor overlay ── */2753.peach-note-editor {2754  position: absolute;2755  inset: 0;2756  z-index: 200;2757  display: flex;2758  flex-direction: column;2759  background:2760    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2761    var(--peach-bg);2762  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2763}27642765.peach-note-editor-header {2766  display: flex;2767  align-items: center;2768  gap: 10px;2769  padding: 14px 16px 10px;2770  border-bottom: 1px solid var(--peach-t3);2771  flex-shrink: 0;2772}27732774.peach-note-editor-back {2775  background: transparent;2776  border: none;2777  cursor: pointer;2778  color: var(--peach-t2);2779  padding: 4px 6px;2780  border-radius: 6px;2781  display: flex;2782  align-items: center;2783  transition: color 120ms ease, background 120ms ease;2784  flex-shrink: 0;2785}2786.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }27872788.peach-note-editor-label {2789  flex: 1;2790  font-family: var(--font-display);2791  font-style: italic;2792  font-size: 0.9375rem;2793  color: var(--peach-t1);2794  letter-spacing: 0.02em;2795}27962797.peach-note-editor-save-btn {2798  background: transparent;2799  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2800  border-radius: 8px;2801  color: var(--peach-accent);2802  font-family: "IBM Plex Mono", monospace;2803  font-size: 0.625rem;2804  letter-spacing: 0.06em;2805  text-transform: uppercase;2806  padding: 3px 10px;2807  cursor: pointer;2808  transition: background 120ms ease, border-color 120ms ease;2809}2810.peach-note-editor-save-btn:hover:not(:disabled) {2811  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2812  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2813}2814.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }28152816.peach-note-toolbar {2817  display: flex;2818  align-items: center;2819  gap: 3px;2820  padding: 6px 14px 5px;2821  border-bottom: 1px solid var(--peach-t3);2822  flex-shrink: 0;2823}28242825.peach-note-tool-btn {2826  background: transparent;2827  border: 1px solid transparent;2828  border-radius: 5px;2829  color: var(--peach-t2);2830  font-family: "IBM Plex Mono", monospace;2831  font-size: 0.625rem;2832  letter-spacing: 0.04em;2833  padding: 2px 8px;2834  cursor: pointer;2835  line-height: 1.6;2836  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2837}2838.peach-note-tool-btn:hover {2839  background: var(--peach-t4);2840  color: var(--peach-t0);2841  border-color: var(--peach-t3);2842}28432844.peach-note-tool-icon {2845  padding: 3px 7px;2846  display: inline-flex;2847  align-items: center;2848  justify-content: center;2849}28502851.peach-note-tool-divider {2852  width: 1px;2853  height: 14px;2854  background: var(--peach-t3);2855  margin: 0 4px;2856  flex-shrink: 0;2857}28582859.peach-note-editor-body {2860  flex: 1;2861  overflow-y: auto;2862  padding: 16px 20px 20px;2863  outline: none;2864  font-family: var(--font-display);2865  font-size: 1rem;2866  line-height: 1.75;2867  color: var(--peach-t0);2868  scrollbar-width: none;2869  word-break: break-word;2870}2871.peach-note-editor-body:empty::before {2872  content: "write your note…";2873  color: var(--peach-t3);2874  font-style: italic;2875  pointer-events: none;2876}28772878/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2879.peach-note-editor-inline {2880  display: flex;2881  flex-direction: column;2882  flex: 1;2883  min-height: 0;2884}2885.peach-note-editor-body--inline {2886  flex: 1;2887  min-height: 0;2888  font-size: 0.9375rem;2889  padding: 10px 20px 14px;2890}28912892/* Full-width toolbar row inside the body (Add.tsx note type).2893   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */2894.peach-note-toolbar-body {2895  display: flex;2896  align-items: center;2897  gap: 3px;2898  padding: 5px 20px 4px;2899  margin: 2px -20px 0;2900  border-bottom: 1px solid var(--peach-t3);2901  flex-shrink: 0;2902}29032904/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2905   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2906   and .peach-note-tool-divider button-level styles. */2907.peach-note-toolbar-inline {2908  display: flex;2909  align-items: center;2910  gap: 3px;2911  margin-left: auto;2912  padding-left: 10px;2913  border-left: 1px solid var(--peach-t3);2914  min-height: 22px;2915}29162917/* Entry.tsx toolbar row (no tabs, toolbar only) */2918.peach-entry-note-toolbar-row {2919  display: flex;2920  align-items: center;2921  margin: 4px 0 6px;2922  position: relative;2923  z-index: 1;2924}2925.peach-entry-note-toolbar-row .peach-note-toolbar-inline {2926  border-left: none;2927  padding-left: 0;2928  margin-left: 0;2929}29302931/* Note body — fills available vertical space in Add.tsx and Entry.tsx */2932.peach-note-body {2933  display: flex;2934  flex-direction: column;2935  flex: 1;2936  min-height: 0;2937  margin: 4px 0 0;2938}2939.peach-entry-body--new .peach-note-body {2940  margin: 8px -20px 0;2941}29422943/* Add.tsx body is a grid by default; swap to a flex column when a note is2944   active so the note body can stretch and pin the tags row to the bottom. */2945.peach-entry-body--new:has(.peach-note-body) {2946  display: flex;2947  flex-direction: column;2948}29492950/* Rich content element styles (editor + display) */2951.peach-note-editor-body h2,2952.peach-note-content h2 {2953  font-family: var(--font-display);2954  font-size: 20px;2955  font-weight: 600;2956  font-style: italic;2957  color: var(--peach-t0);2958  margin: 6px 0 2px;2959  line-height: 1.3;2960}2961.peach-note-editor-body ul,2962.peach-note-content ul {2963  padding-left: 18px;2964  margin: 3px 0;2965  list-style: disc;2966}2967.peach-note-editor-body ol,2968.peach-note-content ol {2969  padding-left: 18px;2970  margin: 3px 0;2971  list-style: decimal;2972}2973.peach-note-editor-body li,2974.peach-note-content li { margin: 2px 0; }2975.peach-note-editor-body hr,2976.peach-note-content hr {2977  border: none;2978  border-top: 1px solid var(--peach-t3);2979  margin: 10px 0;2980}29812982/* font size elements from execCommand */2983.peach-note-editor-body font[size="1"],2984.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }2985.peach-note-editor-body font[size="2"],2986.peach-note-content font[size="2"] { font-size: 0.8125rem; }2987.peach-note-editor-body font[size="3"],2988.peach-note-content font[size="3"] { font-size: 1rem; }2989.peach-note-editor-body font[size="4"],2990.peach-note-content font[size="4"] { font-size: 20px; }2991.peach-note-editor-body font[size="5"],2992.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }29932994/* bold / italic inside the editor and note display */2995.peach-note-editor-body b, .peach-note-editor-body strong,2996.peach-note-content b, .peach-note-content strong { font-weight: 700; }2997.peach-note-editor-body em, .peach-note-editor-body i,2998.peach-note-content em, .peach-note-content i { font-style: italic; }29993000/* note display — rendered HTML, no pre-wrap */3001.peach-note-content {3002  overflow: auto;3003  max-height: 340px;3004  word-break: break-word;3005}30063007/* ── Note textarea ── */3008.peach-note-textarea {3009  width: 100%;3010  min-height: 180px;3011  max-height: 280px;3012  resize: vertical;3013  background: var(--peach-t4);3014  border: 1px solid var(--peach-t3);3015  border-radius: 8px;3016  padding: 10px 12px;3017  font-family: "IBM Plex Mono", monospace;3018  font-size: 0.75rem;3019  line-height: 1.7;3020  color: var(--peach-t1);3021  outline: none;3022  transition: border-color 150ms ease;3023}30243025.peach-note-textarea:focus {3026  border-color: var(--peach-t2);3027}30283029.peach-note-char-count {3030  font-family: "IBM Plex Mono", monospace;3031  font-size: 0.5625rem;3032  color: var(--peach-t3);3033  text-align: right;3034  margin-top: 4px;3035  letter-spacing: 0.1em;3036}30373038/* ── Field input baseline ── */3039.peach-new-field-input {3040  width: 100%;3041  background: transparent;3042  border: none;3043  border-bottom: 1px solid var(--peach-t3);3044  padding: 4px 0;3045  color: var(--peach-t1);3046  font-family: "IBM Plex Mono", monospace;3047  font-size: 0.8125rem;3048  outline: none;3049  transition: border-color 150ms ease;3050}30513052.peach-new-field-input:focus {3053  border-bottom-color: var(--peach-t0);3054  color: var(--peach-t0);3055}30563057.peach-new-name-input {3058  width: 100%;3059  background: transparent;3060  border: none;3061  border-bottom: 1px solid var(--peach-t3);3062  padding: 6px 0;3063  font-family: var(--font-display);3064  font-style: italic;3065  font-size: 28px;3066  color: var(--peach-t0);3067  outline: none;3068  transition: border-color 150ms ease;3069}30703071.peach-new-name-input:focus {3072  border-bottom-color: var(--peach-t1);3073}30743075.peach-new-name-input::placeholder {3076  color: var(--peach-t2);3077  font-style: italic;3078}30793080.peach-new-field-input::placeholder {3081  color: var(--peach-t3);3082}30833084/* ── Demo entrance animation ── */3085#hd-shell {3086  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3087}3088@keyframes hd-shell-enter {3089  from { opacity: 0; transform: scale(0.96) translateY(16px); }3090  to   { opacity: 1; transform: scale(1) translateY(0); }3091}30923093/* ── Keyframes ── */3094@keyframes peach-char-enter {3095  from { opacity: 0; transform: translateY(0.22em); }3096  to   { opacity: 1; transform: translateY(0); }3097}3098@keyframes peach-content-enter {3099  from { opacity: 0.96; transform: translateY(4px); }3100  to   { opacity: 1; transform: translateY(0); }3101}3102@keyframes peach-content-exit {3103  from { opacity: 1; transform: translateY(0); }3104  to   { opacity: 0.92; transform: translateY(-3px); }3105}3106@keyframes peach-screen-enter {3107  from { opacity: 0; transform: translateY(14px); }3108  to   { opacity: 1; transform: translateY(0); }3109}3110@keyframes peach-shell-fade-in {3111  from { opacity: 0; }3112  to   { opacity: 1; }3113}3114@keyframes peach-veil-in {3115  from { opacity: 0; }3116  to   { opacity: 1; }3117}3118@keyframes peach-lock-settle {3119  0%   { transform: scale(0.9); }3120  65%  { transform: scale(1.08); }3121  100% { transform: scale(1); }3122}3123@keyframes peach-copy-confirm {3124  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3125  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); }3126}3127@keyframes peach-copy-retreat {3128  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); }3129  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3130}3131@keyframes peach-copy-flood {3132  from { opacity: 0; transform: scaleX(0.15); }3133  to   { opacity: 1; transform: scaleX(1); }3134}3135@keyframes peach-copy-icon-settle {3136  from  { transform: scale(0.84); }3137  70%   { transform: scale(1.08); }3138  to    { transform: scale(1); }3139}3140@keyframes peach-copy-sheen-retreat {3141  from { opacity: 1; transform: scaleX(1); }3142  to   { opacity: 0; transform: scaleX(0.15); }3143}3144@keyframes peach-copy-drain {3145  from { width: 100%; }3146  to   { width: 0; }3147}3148@keyframes peach-shake {3149  0%, 100% { transform: translateX(0); }3150  20%      { transform: translateX(-6px); }3151  40%      { transform: translateX(6px); }3152  60%      { transform: translateX(-4px); }3153  80%      { transform: translateX(4px); }3154}31553156@keyframes pip-pulse {3157  0% { transform: scale(1); }3158  40% { transform: scale(2.2); }3159  100% { transform: scale(1); }3160}316131623163/* ── Password generator ── */3164.peach-pwgen-body {3165  flex: 1; overflow-y: auto;3166  display: flex; flex-direction: column;3167}3168.peach-policy-badge {3169  display: flex; align-items: center;3170  padding: 6px 20px 0;3171  font-size: 0.625rem; font-family: Inter, sans-serif;3172  color: var(--peach-t2); letter-spacing: 0.04em;3173}3174.peach-pwgen-display {3175  padding: 14px 20px 12px;3176  border-bottom: 1px solid var(--peach-t3);3177  display: flex; align-items: flex-start; gap: 10px;3178}3179.peach-pwgen-display-row {3180  display: flex;3181  align-items: flex-start;3182  gap: 8px;3183  padding-bottom: 8px;3184  border-bottom: 1px solid var(--peach-t3);3185}3186.peach-pwgen-output {3187  flex: 1; min-width: 0; margin: 0;3188  font-family: "IBM Plex Mono", monospace;3189  font-size: 0.8125rem; color: var(--peach-t0);3190  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3191  white-space: normal;3192  padding: 10px 12px;3193  background: var(--peach-t4);3194  border-radius: 6px;3195  min-height: 36px;3196}3197.peach-pwgen-output-display {3198  flex: 1;3199  min-width: 0;3200  margin: 0;3201  font-family: var(--font-display);3202  font-style: italic;3203  font-weight: 300;3204  font-size: 32px;3205  line-height: 1.05;3206  color: var(--peach-t0);3207  word-break: break-all;3208  overflow-wrap: break-word;3209  white-space: normal;3210  letter-spacing: 0.02em;3211}3212.peach-pwgen-display-actions {3213  display: flex;3214  flex-direction: column;3215  gap: 4px;3216  flex-shrink: 0;3217  margin-top: 2px;3218}3219.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3220.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3221.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3222.peach-pwgen-len-num {3223  font-family: "IBM Plex Mono", monospace;3224  font-size: 0.75rem; color: var(--peach-accent);3225}3226.peach-pwgen-len-num--edit {3227  cursor: text;3228  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3229}3230.peach-pwgen-len-input {3231  font-family: "IBM Plex Mono", monospace;3232  font-size: 0.75rem;3233  color: var(--peach-accent);3234  background: transparent;3235  border: none;3236  border-bottom: 1px solid var(--peach-accent);3237  outline: none;3238  width: 32px;3239  text-align: right;3240  padding: 0;3241}3242.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3243.peach-pwgen-toggles { display: flex; flex-direction: column; }3244.peach-pwgen-charset-pills {3245  display: flex;3246  gap: 6px;3247  flex-wrap: wrap;3248}3249.peach-pwgen-pill {3250  padding: 4px 11px;3251  border-radius: 999px;3252  border: 1px solid var(--peach-t3);3253  background: transparent;3254  color: var(--peach-t2);3255  font-family: "IBM Plex Mono", monospace;3256  font-size: 0.5625rem;3257  letter-spacing: 0.08em;3258  cursor: pointer;3259  transition: all 150ms ease;3260}3261.peach-pwgen-pill.is-on {3262  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3263  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3264  color: var(--peach-accent);3265}3266.peach-pwgen-pill:not(.is-on):hover {3267  color: var(--peach-t1);3268  border-color: var(--peach-t2);3269}3270.peach-pwgen-use-btn {3271  width: 100%;3272  min-height: 34px;3273  border-radius: 8px;3274  margin-top: 2px;3275}3276.peach-generator-constraint-note {3277  font-family: 'IBM Plex Mono', monospace;3278  font-size: 10px;3279  color: var(--peach-t3);3280  letter-spacing: 0.04em;3281  margin: 0;3282  transition: opacity 200ms ease;3283}3284.peach-pwgen-toggle-row {3285  display: flex; align-items: center; justify-content: space-between;3286  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3287}3288.peach-pwgen-toggle-row:last-child { border-bottom: none; }3289.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }32903291.peach-screen-prelock {3292  z-index: 10;3293}32943295.prelock-form {3296  display: grid;3297  gap: 12px;3298}32993300/* Peach popup should not expose native scrollbars on internal panels. */3301.peach-settings-body,3302.peach-new-body,3303.peach-pwgen-body,3304.lock-screen,3305.peach-import-preview {3306  scrollbar-width: none;3307  -ms-overflow-style: none;3308  overscroll-behavior: contain;3309}3310.peach-settings-body::-webkit-scrollbar,3311.peach-new-body::-webkit-scrollbar,3312.peach-pwgen-body::-webkit-scrollbar,3313.lock-screen::-webkit-scrollbar,3314.peach-import-preview::-webkit-scrollbar {3315  width: 0;3316  height: 0;3317  display: none;3318}33193320.lock-screen {3321  height: 100%;3322  min-height: 100%;3323  overflow-y: auto;3324  padding: 18px 18px 16px;3325  gap: 14px;3326  grid-template-rows: auto auto auto 1fr auto;3327  align-content: stretch;3328  position: relative;3329  isolation: isolate;3330}3331.peach-screen.lock-screen--vault-stage {3332  display: flex;3333  flex-direction: column;3334  justify-content: flex-start;3335  gap: 18px;3336  padding: 20px 18px 18px;3337  overflow: hidden;3338}3339.peach-screen.lock-screen--vault-stage .peach-lock-panel {3340  margin-top: 0;3341}3342.lock-screen--onboarding {3343  display: flex;3344  flex-direction: column;3345  gap: 12px;3346  justify-content: flex-start;3347}33483349.lock-screen::before {3350  content: "";3351  position: absolute;3352  inset: 12px 18px auto auto;3353  width: 160px;3354  height: 160px;3355  border-radius: 999px;3356  background:3357    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%);3358  filter: blur(6px);3359  opacity: 0.7;3360  pointer-events: none;3361  z-index: 0;3362}33633364.peach-lock-rune-string {3365  flex: 1;3366  display: flex;3367  align-items: center;3368  justify-content: center;3369  gap: 6px;3370  font-family: PeachScript, monospace;3371  font-size: 0.8125rem;3372  letter-spacing: 0.05em;3373  pointer-events: none;3374  user-select: none;3375  position: relative;3376  z-index: 1;3377}33783379.peach-lock-rune-string span {3380  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3381  text-shadow:3382    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3383    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3384  transition: color 0.9s ease, text-shadow 0.9s ease;3385}33863387.peach-lock-rune-string span.is-glowing {3388  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3389  text-shadow:3390    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3391    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3392}33933394.lock-screen-header {3395  display: flex;3396  align-items: center;3397  justify-content: space-between;3398  position: relative;3399  z-index: 1;3400}34013402.lock-password-input.shake {3403  animation: peach-shake 300ms ease-in-out;3404}34053406.peach-hint-error {3407  color: rgba(220, 80, 60, 0.92);3408}34093410.peach-onboarding-headline {3411  margin: 0;3412  font-family: var(--font-display);3413  font-size: 35px;3414  line-height: 0.88;3415  font-style: italic;3416  font-weight: 400;3417  max-width: 252px;3418}34193420.peach-lock-copy {3421  display: grid;3422  gap: 8px;3423  position: relative;3424  z-index: 1;3425}34263427.peach-lock-copy--onboarding {3428  gap: 10px;3429}34303431.peach-lock-hero {3432  position: relative;3433  z-index: 1;3434  display: grid;3435  gap: 8px;3436  min-height: 0;3437  padding: 4px 2px 0;3438  border: none;3439  border-radius: 0;3440  background: transparent;3441  box-shadow: none;3442}3443.peach-lock-hero-art {3444  position: absolute;3445  right: -8px;3446  top: -6px;3447  width: 120px;3448  height: 120px;3449  display: flex;3450  align-items: center;3451  justify-content: center;3452  pointer-events: none;3453  opacity: 0.12;3454  filter: saturate(0.9);3455}3456.peach-lock-hero-mark {3457  width: 100%;3458  height: 100%;3459}3460/* Peach body stays brand-peach across every accent — we don't want a3461   green or blue peach when sage/sky is selected. Leaf + vein keep the3462   sage tint because a real peach has a sage leaf. In the new brand-kit3463   mark the leaf is path 1 and the vein stroke is path 2; the body and3464   back-lobe (paths 3 + 4) must stay untouched. */3465.peach-lock-hero-mark path:nth-child(1) {3466  fill: rgba(123, 144, 96, 0.88);3467}3468.peach-lock-hero-mark path:nth-child(2) {3469  stroke: rgba(94, 122, 66, 0.95);3470}3471.peach-lock-hero > *:not(.peach-lock-hero-art) {3472  position: relative;3473  z-index: 1;3474}34753476.peach-lock-eyebrow {3477  display: inline-flex;3478  align-items: center;3479  width: fit-content;3480  padding: 4px 9px;3481  border-radius: 999px;3482  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3483  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3484  color: var(--peach-t0);3485  font-family: "IBM Plex Mono", monospace;3486  font-size: 0.5rem;3487  letter-spacing: 0.18em;3488  text-transform: uppercase;3489}34903491.peach-lock-label-row {3492  display: flex;3493  align-items: center;3494  justify-content: space-between;3495  margin-bottom: 0;3496}34973498.peach-lock-reveal-btn {3499  display: inline-flex;3500  align-items: center;3501  gap: 4px;3502  background: none;3503  border: none;3504  cursor: pointer;3505  font-family: "IBM Plex Mono", monospace;3506  font-size: 0.5625rem;3507  letter-spacing: 0.06em;3508  color: var(--peach-t2);3509  padding: 2px 0;3510  transition: color 150ms ease;3511}35123513.peach-lock-reveal-btn:hover {3514  color: var(--peach-t1);3515}35163517.peach-lock-warning {3518  color: rgba(220, 80, 60, 0.85) !important;3519  line-height: 1.5;3520}35213522.peach-onboarding-cards {3523  display: grid;3524  gap: 8px;3525  position: relative;3526  z-index: 1;3527}35283529.peach-lock-panel {3530  position: relative;3531  z-index: 1;3532  display: grid;3533  gap: 9px;3534  padding: 14px 16px 15px;3535  border-radius: 18px;3536  border: 1px solid var(--peach-t3);3537  background:3538    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3539  box-shadow:3540    inset 0 1px 0 rgba(240, 232, 216, 0.04),3541    0 12px 28px rgba(0, 0, 0, 0.12);3542}35433544/* Glass surface — lock panel and settings groups */3545.peach-glass {3546  background: rgba(26, 20, 16, 0.65);3547  border: 1px solid rgba(255, 255, 255, 0.08);3548  border-radius: 12px;3549  backdrop-filter: blur(12px) saturate(1.4);3550  -webkit-backdrop-filter: blur(12px) saturate(1.4);3551}35523553@supports not (backdrop-filter: blur(1px)) {3554  .peach-glass {3555    background: rgba(26, 20, 16, 0.92);3556    border: 1px solid rgba(255, 255, 255, 0.10);3557    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3558  }3559}35603561.light .peach-glass,3562[data-theme="light"] .peach-glass {3563  background: rgba(240, 233, 223, 0.72);3564  border: 1px solid rgba(26, 18, 8, 0.08);3565  backdrop-filter: blur(12px) saturate(1.2);3566  -webkit-backdrop-filter: blur(12px) saturate(1.2);3567}35683569@supports not (backdrop-filter: blur(1px)) {3570  .light .peach-glass,3571  [data-theme="light"] .peach-glass {3572    background: rgba(240, 233, 223, 0.97);3573    border: 1px solid rgba(26, 18, 8, 0.10);3574  }3575}35763577/* Lock panel keeps its own border-radius over the generic glass token */3578.peach-lock-panel.peach-glass {3579  border-radius: 18px;3580  background: rgba(26, 20, 16, 0.65);3581  border: 1px solid rgba(255, 255, 255, 0.08);3582  box-shadow:3583    inset 0 1px 0 rgba(255, 255, 255, 0.05),3584    0 12px 28px rgba(0, 0, 0, 0.3);3585}35863587.light .peach-lock-panel.peach-glass,3588[data-theme="light"] .peach-lock-panel.peach-glass {3589  background: rgba(240, 233, 223, 0.82);3590  border: 1px solid rgba(26, 18, 8, 0.08);3591  box-shadow:3592    inset 0 1px 0 rgba(255, 255, 255, 0.4),3593    0 8px 24px rgba(80, 56, 32, 0.15);3594}35953596@supports not (backdrop-filter: blur(1px)) {3597  .peach-lock-panel.peach-glass {3598    background: rgba(26, 20, 16, 0.92);3599    box-shadow:3600      inset 0 1px 0 rgba(255, 255, 255, 0.05),3601      0 12px 28px rgba(0, 0, 0, 0.4);3602  }3603  .light .peach-lock-panel.peach-glass,3604  [data-theme="light"] .peach-lock-panel.peach-glass {3605    background: rgba(240, 233, 223, 0.98);3606  }3607}36083609.peach-lock-panel--secondary {3610  gap: 12px;3611}36123613.peach-lock-panel-header {3614  display: flex;3615  align-items: baseline;3616  justify-content: space-between;3617  gap: 12px;3618}36193620.peach-lock-option-grid {3621  display: grid;3622  gap: 10px;3623}36243625.peach-lock-option {3626  width: 100%;3627  display: grid;3628  gap: 6px;3629  padding: 14px 15px;3630  border-radius: 16px;3631  border: 1px solid rgba(240, 232, 216, 0.08);3632  background: rgba(240, 232, 216, 0.02);3633  color: var(--peach-t0);3634  text-align: left;3635  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3636}36373638.peach-lock-option:hover {3639  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3640  background: rgba(240, 232, 216, 0.04);3641  transform: translateY(-1px);3642}36433644.peach-lock-option-title {3645  font-size: 0.75rem;3646  color: var(--peach-t0);3647}36483649.peach-lock-option-copy {3650  font-size: 0.6875rem;3651  line-height: 1.55;3652  color: var(--peach-t1);3653}36543655.peach-onboarding-stack {3656  margin-top: 2px;3657}3658.peach-lock-panel-footer {3659  display: grid;3660  gap: 6px;3661  margin-top: 2px;3662  padding-top: 10px;3663  border-top: 1px solid rgba(240, 232, 216, 0.06);3664}36653666/* ── Restore tab view ─────────────────────────────────────────────────────3667   Tab-based restore screen replacing the old three-card picker. */36683669.peach-restore-tabview {3670  overflow: hidden;3671}36723673.peach-restore-tabcard {3674  flex: 1;3675  display: flex;3676  flex-direction: column;3677  gap: 0;3678  padding: 0;3679  overflow: hidden;3680  cursor: default;3681  user-select: none;3682  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3683}36843685/* ── Tab selector ─────────────────────────────────────────────────────── */36863687.peach-restore-tabs {3688  display: flex;3689  justify-content: space-around;3690  padding: 14px 10px 10px;3691  border-bottom: 1px solid var(--peach-t3);3692  gap: 2px;3693  overflow: hidden;3694  scrollbar-width: none;3695}3696.peach-restore-tabs::-webkit-scrollbar { display: none; }36973698.peach-restore-tab {3699  background: none;3700  border: none;3701  cursor: pointer;3702  padding: 3px 2px;3703  font-family: 'Cormorant Garamond', Georgia, serif;3704  font-style: italic;3705  font-size: 11px;3706  color: var(--peach-t2);3707  transition: color 150ms ease, text-shadow 150ms ease;3708  flex: 1;3709  min-width: 0;3710  text-align: center;3711  white-space: nowrap;3712  overflow: hidden;3713  text-overflow: ellipsis;3714}3715.peach-restore-tab:hover {3716  color: var(--peach-accent);3717  text-shadow:3718    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3719    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3720}3721.peach-restore-tab.is-active {3722  color: var(--peach-accent);3723  text-shadow:3724    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3725    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3726}37273728/* ── Content area ─────────────────────────────────────────────────────── */37293730.peach-restore-content {3731  padding: 16px 16px 14px;3732  display: flex;3733  flex-direction: column;3734  gap: 8px;3735  overflow: hidden;3736  scrollbar-width: none;3737  flex: 1;3738}3739.peach-restore-content::-webkit-scrollbar { display: none; }3740.peach-restore-content > * {3741  overflow: hidden;3742  scrollbar-width: none;3743}3744.peach-restore-content > *::-webkit-scrollbar { display: none; }37453746/* ── Shared tab inner layout ──────────────────────────────────────────── */37473748.peach-rt-symbols,3749.peach-rt-csv,3750.peach-rt-phone {3751  display: flex;3752  flex-direction: column;3753  gap: 8px;3754  overflow: hidden;3755}37563757.peach-rt-submit {3758  width: 100%;3759}37603761.peach-rt-error {3762  margin: 0;3763  font-size: 0.6875rem;3764  color: var(--peach-breach);3765  line-height: 1.4;3766}37673768/* ── PeachScript tab ──────────────────────────────────────────────────── */37693770.peach-restore-symbols-textarea {3771  font-family: 'PeachScript', monospace;3772  font-size: 13px;3773  line-height: 1.9;3774  letter-spacing: 0.1em;3775  word-break: break-all;3776  resize: none;3777  width: 100%;3778  min-height: 56px;3779  max-height: 72px;3780  overflow: hidden;3781  scrollbar-width: none;3782  -ms-overflow-style: none;3783  box-sizing: border-box;3784  padding: 6px 8px;3785  border-radius: 8px;3786  border: 1px solid var(--peach-t3);3787  background: rgba(240, 232, 216, 0.03);3788  color: var(--peach-t0);3789}3790.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3791.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }37923793.peach-restore-symbols-pass {3794  width: 100%;3795  box-sizing: border-box;3796  padding: 7px 10px;3797  border-radius: 8px;3798  border: 1px solid var(--peach-t3);3799  background: rgba(240, 232, 216, 0.03);3800  color: var(--peach-t0);3801  font-size: 0.8125rem;3802}3803.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }3804.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }38053806.peach-rt-divider {3807  text-align: center;3808  font-size: 0.6875rem;3809  color: var(--peach-t2);3810  font-style: italic;3811}38123813.peach-rt-file-label {3814  width: 100%;3815  justify-content: center;3816}38173818.peach-rt-anim-canvas {3819  width: 100%;3820  height: 180px;3821  border-radius: 10px;3822  overflow: hidden;3823  display: block;3824}38253826/* ── CSV tab ──────────────────────────────────────────────────────────── */38273828.peach-rt-csv-sources {3829  margin: 0;3830  font-size: 0.6875rem;3831  color: var(--peach-t2);3832  line-height: 1.5;3833  text-align: center;3834}38353836.peach-rt-csv-warning {3837  margin: 0;3838  font-family: "IBM Plex Mono", monospace;3839  font-size: 0.5625rem;3840  letter-spacing: 0.12em;3841  color: var(--peach-breach);3842  text-align: center;3843}38443845/* ── From Phone tab ───────────────────────────────────────────────────── */38463847.peach-rt-phone-code {3848  margin: 0;3849  text-align: center;3850  font-family: "IBM Plex Mono", monospace;3851  font-size: 22px;3852  letter-spacing: 0.18em;3853  color: var(--peach-t0);3854}38553856.peach-rt-phone-qr {3857  display: block;3858  width: 96px;3859  height: 96px;3860  margin: 0 auto;3861  border-radius: 6px;3862  image-rendering: pixelated;3863  overflow: hidden;3864}38653866.peach-rt-phone-hint {3867  margin: 0;3868  font-size: 0.6875rem;3869  color: var(--peach-t2);3870  line-height: 1.55;3871  text-align: center;3872}38733874/* ── Intro popup ──────────────────────────────────────────────────────── */38753876.peach-restore-intro-overlay {3877  position: absolute;3878  inset: 0;3879  z-index: 100;3880  display: flex;3881  align-items: center;3882  justify-content: center;3883  padding: 20px;3884  background: rgba(12, 10, 6, 0.7);3885  backdrop-filter: blur(4px);3886  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;3887}38883889.peach-restore-intro-card {3890  width: 100%;3891  display: flex;3892  flex-direction: column;3893  gap: 12px;3894  padding: 22px 20px 20px;3895  border-radius: 16px;3896  border: 1px solid var(--peach-t3);3897  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));3898  backdrop-filter: blur(4px);3899  -webkit-backdrop-filter: blur(4px);3900  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);3901}39023903.peach-restore-intro-headline {3904  margin: 0;3905  font-family: var(--font-display);3906  font-style: italic;3907  font-size: 20px;3908  font-weight: 400;3909  color: var(--peach-t0);3910}39113912.peach-restore-intro-body {3913  display: flex;3914  flex-direction: column;3915  gap: 8px;3916}3917.peach-restore-intro-body p {3918  margin: 0;3919  font-size: 0.75rem;3920  color: var(--peach-t1);3921  line-height: 1.5;3922}39233924.peach-restore-intro-btn {3925  width: 100%;3926  margin-top: 4px;3927}39283929/* Snapshot restore panel */3930.peach-snapshot-panel {3931  gap: 10px;3932  overflow-y: auto;3933  max-height: 340px;3934}3935.peach-snapshot-list {3936  display: flex;3937  flex-direction: column;3938  gap: 4px;3939}3940.peach-snapshot-row {3941  display: flex;3942  align-items: center;3943  justify-content: space-between;3944  width: 100%;3945  padding: 8px 10px;3946  border-radius: 8px;3947  border: 1px solid rgba(240, 232, 216, 0.07);3948  background: transparent;3949  cursor: pointer;3950  transition: border-color 120ms, background 120ms;3951  text-align: left;3952  gap: 8px;3953}3954.peach-snapshot-row:hover {3955  border-color: rgba(240, 232, 216, 0.14);3956  background: rgba(240, 232, 216, 0.03);3957}3958.peach-snapshot-row.is-selected {3959  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3960  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);3961}3962.peach-snapshot-time {3963  font-size: 11.5px;3964  color: var(--peach-t0);3965  flex: 1;3966}3967.peach-snapshot-count {3968  font-family: "IBM Plex Mono", monospace;3969  font-size: 0.625rem;3970  color: var(--peach-t2);3971  flex-shrink: 0;3972}3973.peach-snapshot-confirm {3974  display: flex;3975  flex-direction: column;3976  gap: 8px;3977  padding-top: 10px;3978  border-top: 1px solid rgba(240, 232, 216, 0.06);3979}3980.peach-snapshot-warning {3981  display: flex;3982  align-items: flex-start;3983  gap: 6px;3984  font-size: 10.5px;3985  color: rgba(220, 80, 60, 0.85);3986  line-height: 1.55;3987}3988.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }3989.peach-snapshot-confirm-row {3990  display: flex;3991  gap: 6px;3992  align-items: center;3993}3994.peach-snapshot-restore-btn {3995  width: 100%;3996}3997.peach-lock-hero--unlock .peach-lock-hero-art {3998  width: 112px;3999  height: 112px;4000  right: 0;4001  top: 2px;4002  opacity: 0.1;4003}40044005.peach-card {4006  border: 1px solid var(--peach-t3);4007  border-radius: 18px;4008  background:4009    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4010  box-shadow:4011    inset 0 0 0 1px var(--peach-border-accent),4012    inset 0 1px 0 rgba(240, 232, 216, 0.04),4013    0 12px 32px rgba(0, 0, 0, 0.14);4014  overflow: hidden;4015}40164017.peach-card-active {4018  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4019  box-shadow:4020    inset 0 1px 0 rgba(240, 232, 216, 0.05),4021    0 16px 38px rgba(0, 0, 0, 0.18),4022    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4023}40244025.peach-card-disabled {4026  opacity: 0.72;4027}40284029.peach-card-header {4030  width: 100%;4031  padding: 13px 16px 11px;4032  background: transparent;4033  color: var(--peach-t0);4034  display: flex;4035  justify-content: space-between;4036  align-items: center;4037  text-align: left;4038  font-size: 0.75rem;4039}40404041.peach-card-body {4042  padding: 0 16px 16px;4043  display: grid;4044  gap: 9px;4045}40464047.peach-card-tag {4048  color: var(--peach-t2);4049  font-family: "IBM Plex Mono", monospace;4050  font-size: 0.5625rem;4051  letter-spacing: 0.12em;4052  text-transform: uppercase;4053}40544055.peach-empty-copy {4056  display: grid;4057  gap: 6px;4058  color: var(--peach-t1);4059  font-size: 0.8125rem;4060}40614062.peach-lock-submit {4063  width: 100%;4064  box-shadow:4065    0 1px 0 rgba(255,255,255,0.10) inset,4066    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4067    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4068    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4069}40704071.peach-lock-secondary {4072  width: 100%;4073  border-color: var(--peach-t3);4074  background: rgba(240, 232, 216, 0.02);4075}40764077.peach-lock-secondary:hover {4078  background: rgba(240, 232, 216, 0.04);4079}40804081.peach-lock-note {4082  max-width: none;4083  line-height: 1.55;4084  margin: 0;4085}40864087.peach-overlay-action {4088  font-size: 0.625rem;4089  padding: 4px 8px;4090  letter-spacing: 0.06em;4091  min-width: 44px;4092  text-align: center;4093}40944095.peach-inline-action {4096  flex-shrink: 0;4097  font-size: 0.5625rem;4098  letter-spacing: 0.1em;4099  text-transform: uppercase;4100  padding: 4px 7px;4101}4102.peach-password-toggle-btn {4103  display: inline-flex;4104  align-items: center;4105  justify-content: center;4106  min-width: 30px;4107  min-height: 26px;4108  padding: 0 7px;4109  border: 1px solid var(--peach-t3);4110  border-radius: 999px;4111  background: rgba(240, 232, 216, 0.04);4112  color: var(--peach-t2);4113  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4114}4115.peach-password-toggle-btn:hover {4116  border-color: var(--peach-t2);4117  color: var(--peach-t0);4118  background: rgba(240, 232, 216, 0.06);4119}41204121.peach-new-textarea {4122  width: 100%;4123  min-height: 88px;4124  resize: vertical;4125  border: 0;4126  outline: none;4127  background: transparent;4128  color: var(--peach-t1);4129  font-family: "IBM Plex Mono", monospace;4130  font-size: 0.75rem;4131  line-height: 1.65;4132  caret-color: var(--peach-accent);4133}41344135.peach-new-textarea::placeholder {4136  color: var(--peach-t2);4137  opacity: 0.7;4138}41394140.peach-settings-actions {4141  display: grid;4142  gap: 8px;4143}41444145.peach-sync-section-label {4146  font-size: 0.6875rem;4147  color: var(--peach-t2);4148  text-transform: uppercase;4149  letter-spacing: 0.05em;4150}41514152.peach-sync-network-note {4153  margin: 0 0 6px;4154  font-size: 0.75rem;4155  color: var(--peach-t2);4156  line-height: 1.4;4157}41584159.peach-settings-row--tappable {4160  background: none;4161  border: none;4162  width: 100%;4163  text-align: left;4164  cursor: pointer;4165  color: var(--peach-t1);4166  font-size: 0.8125rem;4167}4168.peach-settings-row--tappable:hover {4169  color: var(--peach-t0);4170}41714172.peach-sync-pro-hint {4173  display: flex;4174  flex-direction: column;4175  align-items: flex-start;4176  gap: 8px;4177  padding: 12px 0 4px;4178}41794180.peach-sync-device-row {4181  display: flex;4182  justify-content: space-between;4183  align-items: center;4184  padding: 6px 0;4185  border-bottom: 1px solid var(--peach-t3);4186}41874188.peach-sync-device-info {4189  display: flex;4190  flex-direction: column;4191  gap: 2px;4192}41934194.peach-sync-device-name {4195  font-size: 0.8125rem;4196  color: var(--peach-t0);4197}41984199.peach-sync-device-meta {4200  font-size: 0.6875rem;4201  color: var(--peach-t2);4202}42034204.peach-sync-status-dot {4205  display: inline-block;4206  width: 8px;4207  height: 8px;4208  border-radius: 50%;4209  vertical-align: middle;4210}42114212.peach-sync-remove-btn {4213  color: var(--peach-breach);4214}42154216.peach-sync-advanced-row {4217  display: flex;4218  justify-content: space-between;4219  align-items: center;4220  padding: 6px 0;4221  gap: 12px;4222}42234224.peach-sync-advanced-info {4225  display: flex;4226  flex-direction: column;4227  gap: 2px;4228  flex: 1;4229}42304231.peach-sync-advanced-name {4232  font-size: 0.8125rem;4233  color: var(--peach-t0);4234}42354236.peach-sync-reset-confirm {4237  display: flex;4238  flex-direction: column;4239  gap: 8px;4240  padding: 10px;4241  border: 1px solid var(--peach-breach);4242  border-radius: 10px;4243  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4244}42454246.peach-sync-reset-confirm-headline {4247  font-size: 0.8125rem;4248  font-weight: 600;4249  color: var(--peach-t0);4250  margin: 0;4251}42524253.peach-sync-reset-confirm-body {4254  font-size: 0.75rem;4255  color: var(--peach-t1);4256  margin: 0;4257  line-height: 1.4;4258}42594260.peach-btn--danger {4261  background: var(--peach-breach);4262  color: #fff;4263  border-color: var(--peach-breach);4264}4265.peach-btn--danger:hover:not(:disabled) {4266  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4267}4268.peach-btn--danger:disabled {4269  opacity: 0.55;4270  cursor: not-allowed;4271}42724273.peach-sync-hero-icon {4274  color: var(--peach-t1);4275  opacity: 0.85;4276}42774278.peach-import-preview {4279  margin-bottom: 12px;4280  max-height: 152px;4281  overflow-y: auto;4282  border: 1px solid var(--peach-t3);4283  border-radius: 10px;4284  padding: 8px 10px;4285  display: grid;4286  gap: 8px;4287  background: rgba(240, 232, 216, 0.02);4288}42894290.peach-import-preview-row {4291  display: flex;4292  justify-content: space-between;4293  gap: 10px;4294  font-size: 0.6875rem;4295  color: var(--peach-t1);4296}42974298.peach-import-preview-title {4299  color: var(--peach-t0);4300  flex: 1;4301  min-width: 0;4302  overflow: hidden;4303  text-overflow: ellipsis;4304  white-space: nowrap;4305}43064307.peach-import-preview-meta {4308  color: var(--peach-t2);4309  flex-shrink: 0;4310  max-width: 42%;4311  overflow: hidden;4312  text-overflow: ellipsis;4313  white-space: nowrap;4314}43154316.peach-import-preview-more {4317  color: var(--peach-t2);4318  font-size: 0.625rem;4319}43204321.peach-restore-copy {4322  margin: 0;4323  color: var(--peach-t1);4324  font-size: 0.6875rem;4325  line-height: 1.6;4326}43274328.peach-restore-warning {4329  padding: 10px 12px;4330  border-radius: 12px;4331  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4332  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4333  color: var(--peach-t0);4334  font-size: 0.6875rem;4335  line-height: 1.55;4336}43374338.peach-provider-chips {4339  display: flex;4340  flex-wrap: wrap;4341  gap: 6px;4342}43434344.peach-provider-chip {4345  display: inline-flex;4346  align-items: center;4347  padding: 5px 8px;4348  border-radius: 999px;4349  border: 1px solid var(--peach-t3);4350  background: rgba(240, 232, 216, 0.02);4351  color: var(--peach-t1);4352  font-family: "IBM Plex Mono", monospace;4353  font-size: 0.5rem;4354  letter-spacing: 0.08em;4355  text-transform: uppercase;4356}43574358.peach-restore-file,4359.peach-restore-input {4360  width: 100%;4361  border-radius: 10px;4362  border: 1px solid var(--peach-t3);4363  background: var(--peach-s2);4364  color: var(--peach-t0);4365  font-size: 0.75rem;4366}43674368.peach-restore-file {4369  padding: 9px 10px;4370}43714372.peach-restore-file::file-selector-button {4373  margin-right: 10px;4374  padding: 7px 10px;4375  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4376  border-radius: 999px;4377  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4378  color: var(--peach-t0);4379  font-size: 0.625rem;4380  letter-spacing: 0.08em;4381  text-transform: uppercase;4382  cursor: pointer;4383}43844385.peach-restore-input {4386  padding: 10px 12px;4387}43884389.peach-auth-grid {4390  display: grid;4391  gap: 10px;4392}43934394.peach-import-summary {4395  color: var(--peach-t1);4396  font-size: 0.75rem;4397  line-height: 1.6;4398  margin-bottom: 12px;4399}44004401.peach-restore-error {4402  color: rgba(220, 80, 60, 0.95);4403  font-size: 0.75rem;4404  line-height: 1.55;4405}44064407.peach-passkey-card {4408  max-width: 400px;4409  margin: auto 16px;4410  align-self: center;4411  width: calc(100% - 32px);4412}44134414/* Center the approval card vertically inside the overlay-view (which sets4415 * flex-direction: column without justify-content). Without this, the card4416 * sits at the top with a tall empty band below — looks unfinished on the4417 * 320px popup. */4418.peach-overlay-view:has(.peach-passkey-card) {4419  justify-content: center;4420}44214422.peach-pro-badge {4423  padding: 2px 6px;4424  border-radius: 999px;4425  font-family: var(--font-ui);4426  font-size: 0.625rem;4427  letter-spacing: 0.08em;4428  text-transform: uppercase;4429  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4430  color: var(--peach-accent);4431}44324433/* ── Shortcuts rebind table ─────────────────────────────────── */4434.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4435.peach-shortcut-row {4436  display: flex;4437  align-items: center;4438  gap: 10px;4439  padding: 6px 0;4440}4441.peach-shortcut-row-label {4442  flex: 1;4443  font-size: 0.75rem;4444  color: var(--peach-t0);4445}4446.peach-shortcut-chip {4447  min-width: 64px;4448  padding: 4px 10px;4449  border-radius: 6px;4450  border: 1px solid var(--peach-t3);4451  background: var(--peach-input-bg, var(--surface-card));4452  color: var(--peach-t0);4453  font-family: var(--font-mono);4454  font-size: 0.6875rem;4455  letter-spacing: 0.04em;4456  cursor: pointer;4457  text-align: center;4458  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4459}4460.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4461.peach-shortcut-chip.is-custom {4462  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4463  color: var(--peach-accent);4464}4465.peach-shortcut-chip.is-capturing {4466  border-color: var(--peach-accent);4467  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4468  color: var(--peach-accent);4469  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4470}4471@keyframes peach-shortcut-capture-pulse {4472  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4473  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4474}4475.peach-shortcut-reset {4476  background: transparent;4477  border: none;4478  cursor: pointer;4479  color: var(--peach-t2);4480  padding: 4px 6px;4481  border-radius: 5px;4482  font-size: 0.875rem;4483  line-height: 1;4484  transition: color 120ms ease, background 120ms ease;4485}4486.peach-shortcut-reset:hover {4487  color: var(--peach-t0);4488  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4489}4490.peach-shortcuts-conflict {4491  margin: 4px 0 0;4492  padding: 8px 10px;4493  border-radius: 7px;4494  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4495  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4496  font-family: var(--font-mono);4497  font-size: 0.6875rem;4498  color: var(--peach-t0);4499}45004501/* ── Help dialog overlay (? to open) ────────────────────────── */4502.peach-shortcuts-help-backdrop {4503  position: fixed;4504  inset: 0;4505  background: rgba(0, 0, 0, 0.55);4506  backdrop-filter: blur(2px);4507  display: flex;4508  align-items: center;4509  justify-content: center;4510  z-index: 1000;4511  animation: peach-help-fade-in 140ms ease forwards;4512}4513@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4514.peach-shortcuts-help-card {4515  width: min(320px, 92vw);4516  max-height: 80vh;4517  overflow-y: auto;4518  border-radius: 14px;4519  border: 1px solid var(--peach-t3);4520  background: var(--peach-bg);4521  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4522  padding: 16px 18px 18px;4523  display: flex;4524  flex-direction: column;4525  gap: 12px;4526}4527.peach-shortcuts-help-head {4528  display: flex; align-items: center; justify-content: space-between;4529}4530.peach-shortcuts-help-head h3 {4531  margin: 0;4532  font-family: var(--font-display);4533  font-style: italic;4534  font-weight: 400;4535  font-size: 22px;4536  color: var(--peach-t0);4537}4538.peach-shortcuts-help-close {4539  background: transparent;4540  border: none;4541  color: var(--peach-t2);4542  cursor: pointer;4543  font-size: 0.875rem;4544  padding: 4px 8px;4545  border-radius: 5px;4546}4547.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4548.peach-shortcuts-help-body ul {4549  list-style: none; padding: 0; margin: 4px 0 12px;4550  display: grid; gap: 8px;4551}4552.peach-shortcuts-help-body li {4553  display: flex; align-items: center; justify-content: space-between; gap: 12px;4554  font-size: 0.75rem; color: var(--peach-t0);4555}4556.peach-shortcuts-help-body kbd {4557  font-family: var(--font-mono);4558  font-size: 0.6875rem;4559  padding: 3px 8px;4560  border-radius: 6px;4561  background: var(--surface-card);4562  border: 1px solid var(--peach-t3);4563  color: var(--peach-accent);4564  letter-spacing: 0.04em;4565}45664567/* ── Pro promo on Account screen ────────────────────────────── */4568.peach-pro-promo {4569  position: relative;4570  border-radius: 14px;4571  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4572  background:4573    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4574    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4575    var(--surface-card);4576  overflow: hidden;4577  margin-bottom: 14px;4578}4579.peach-pro-promo-glow {4580  position: absolute;4581  inset: -40% -20% auto auto;4582  width: 220px; height: 220px;4583  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4584  pointer-events: none;4585  filter: blur(8px);4586}4587.peach-pro-promo-inner {4588  position: relative;4589  padding: 18px 18px 16px;4590}4591.peach-pro-promo-title {4592  font-family: var(--font-display);4593  font-style: italic;4594  font-weight: 400;4595  font-size: 28px;4596  line-height: 1;4597  letter-spacing: -0.005em;4598  color: var(--peach-t0);4599  margin: 0 0 4px;4600}4601.peach-pro-promo-tagline {4602  font-family: var(--font-mono);4603  font-size: 0.625rem;4604  letter-spacing: 0.06em;4605  color: var(--peach-t2);4606  margin: 0 0 14px;4607}4608.peach-pro-promo-list {4609  list-style: none;4610  margin: 0 0 16px;4611  padding: 0;4612  display: grid;4613  gap: 9px;4614}4615.peach-pro-promo-list li {4616  display: flex;4617  align-items: flex-start;4618  gap: 9px;4619  font-size: 0.75rem;4620  color: var(--peach-t1);4621  line-height: 1.4;4622}4623.peach-pro-promo-list svg {4624  width: 14px;4625  height: 14px;4626  flex-shrink: 0;4627  color: var(--peach-accent);4628  margin-top: 2px;4629}4630.peach-pro-promo-list span {4631  color: var(--peach-t0);4632}4633.peach-pro-promo-cta {4634  width: 100%;4635  background: var(--peach-accent);4636  color: #fff;4637  border: none;4638  padding: 9px 12px;4639  border-radius: 9px;4640  font-size: 0.75rem;4641  font-weight: 500;4642  font-family: var(--font-ui);4643  letter-spacing: 0.02em;4644  text-decoration: none;4645  display: inline-flex;4646  align-items: center;4647  justify-content: center;4648  cursor: pointer;4649  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4650  box-shadow: 0 2px 16px var(--peach-glow);4651}4652.peach-pro-promo-cta:hover {4653  filter: brightness(1.07);4654  box-shadow: 0 4px 24px var(--peach-glow);4655  transform: translateY(-1px);4656}4657.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }46584659.peach-pro-or-divider {4660  display: flex;4661  align-items: center;4662  gap: 10px;4663  margin: 4px 0 12px;4664  font-family: var(--font-mono);4665  font-size: 0.625rem;4666  letter-spacing: 0.06em;4667  color: var(--peach-t2);4668  text-transform: uppercase;4669}4670.peach-pro-or-divider::before,4671.peach-pro-or-divider::after {4672  content: "";4673  flex: 1;4674  height: 1px;4675  background: var(--peach-t3);4676}46774678.peach-loading {4679  position: absolute;4680  inset: 0;4681  display: flex;4682  align-items: center;4683  justify-content: center;4684  background: var(--bg);4685  animation: peach-loading-pulse 1.2s ease-in-out infinite;4686}46874688@keyframes peach-loading-pulse {4689  0%, 100% { opacity: 0.6; }4690  50% { opacity: 1; }4691}46924693/* ── Health Dashboard ─────────────────────────────────────────────────── */4694.peach-health-body {4695  flex: 1;4696  overflow-y: auto;4697  display: flex;4698  flex-direction: column;4699  /* Hide the platform scrollbar — every other scrollable surface in the4700   * popup hides it; the Health view was the one outlier and it ruined the4701   * polish. Behavior unchanged, just no rail rendered. */4702  scrollbar-width: none;4703  -ms-overflow-style: none;4704}4705.peach-health-body::-webkit-scrollbar { display: none; }47064707/* Loading screen for the Vault Health view. The advanced report computation4708 * can run for a few seconds on a large vault — without a clear loading4709 * screen the surface looked broken (the entry view bleeds through the4710 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4711.peach-health-loading-screen {4712  flex: 1;4713  display: flex;4714  flex-direction: column;4715  align-items: center;4716  justify-content: center;4717  gap: 14px;4718  padding: 32px 28px;4719  text-align: center;4720}47214722.peach-health-loading-glyph {4723  width: 48px;4724  height: 48px;4725  display: flex;4726  align-items: center;4727  justify-content: center;4728  border-radius: 14px;4729  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4730  color: var(--peach-accent);4731}47324733.peach-health-loading-title {4734  margin: 0;4735  font-family: var(--font-display);4736  font-style: italic;4737  font-weight: 300;4738  font-size: 19px;4739  line-height: 1.2;4740  color: var(--peach-t0);4741}47424743.peach-health-loading-copy {4744  margin: 0;4745  max-width: 240px;4746  font-size: 0.75rem;4747  line-height: 1.55;4748  color: var(--peach-t2);4749}47504751.peach-health-loading-track {4752  width: 200px;4753  height: 3px;4754  margin-top: 6px;4755  border-radius: 999px;4756  background: rgba(240, 232, 216, 0.06);4757  overflow: hidden;4758}47594760.peach-health-loading-fill {4761  width: 40%;4762  height: 100%;4763  border-radius: inherit;4764  background: linear-gradient(4765    90deg,4766    transparent 0%,4767    var(--peach-accent) 50%,4768    transparent 100%4769  );4770  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4771}47724773@keyframes peach-health-loading-sweep {4774  0%   { transform: translateX(-100%); }4775  100% { transform: translateX(350%); }4776}47774778[data-motion="reduce"] .peach-health-loading-fill,4779[data-motion="reduce"] .peach-health-loading-glyph svg path {4780  animation: none;4781}47824783.peach-health-summary {4784  padding: 10px 16px 6px;4785  font-family: "IBM Plex Mono", monospace;4786  font-size: 0.6875rem;4787}4788.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4789.peach-health-summary-ok { color: var(--peach-t2); }47904791.peach-health-check-row {4792  padding: 0 16px 10px;4793}4794.peach-health-check-btn {4795  width: 100%;4796  display: flex;4797  align-items: center;4798  justify-content: center;4799}48004801.peach-health-sections {4802  flex: 1;4803  display: flex;4804  flex-direction: column;4805}48064807.peach-health-section {4808  border-bottom: 1px solid var(--peach-t3);4809}48104811.peach-health-section-header {4812  width: 100%;4813  display: flex;4814  align-items: center;4815  justify-content: space-between;4816  padding: 9px 16px;4817  background: transparent;4818  cursor: pointer;4819  color: var(--peach-t0);4820}48214822.peach-health-section-title-row {4823  display: flex;4824  align-items: center;4825  gap: 8px;4826}48274828.peach-health-count-badge {4829  display: inline-flex;4830  align-items: center;4831  justify-content: center;4832  min-width: 20px;4833  height: 18px;4834  padding: 0 5px;4835  border-radius: 999px;4836  background: rgba(220,80,60,0.15);4837  border: 1px solid rgba(220,80,60,0.25);4838  font-family: "IBM Plex Mono", monospace;4839  font-size: 0.5625rem;4840  color: rgba(220,80,60,0.9);4841}48424843.peach-health-section-title {4844  font-family: "IBM Plex Mono", monospace;4845  font-size: 0.6875rem;4846  text-transform: uppercase;4847  letter-spacing: 0.1em;4848  color: var(--peach-t1);4849}48504851.peach-health-chevron {4852  color: var(--peach-t2);4853  transition: transform 200ms ease;4854  flex-shrink: 0;4855}4856.peach-health-chevron.is-expanded {4857  transform: rotate(180deg);4858}48594860.peach-health-section-body {4861  padding: 0 16px 10px;4862  display: flex;4863  flex-direction: column;4864  gap: 4px;4865}48664867.peach-health-row {4868  display: flex;4869  align-items: flex-start;4870  justify-content: space-between;4871  gap: 8px;4872  padding: 6px 8px;4873  border-radius: 8px;4874  background: rgba(240,232,216,0.02);4875}48764877.peach-health-row-info {4878  flex: 1;4879  min-width: 0;4880  display: flex;4881  flex-direction: column;4882  gap: 2px;4883}48844885.peach-health-row-name {4886  font-family: var(--font-display);4887  font-size: 0.9375rem;4888  font-style: italic;4889  font-weight: 400;4890  color: var(--peach-t0);4891  white-space: nowrap;4892  overflow: hidden;4893  text-overflow: ellipsis;4894}48954896.peach-health-row-meta {4897  font-family: "IBM Plex Mono", monospace;4898  font-size: 0.5625rem;4899  color: var(--peach-t2);4900  letter-spacing: 0.05em;4901}49024903.peach-health-fix-btn {4904  font-size: 0.5625rem;4905  letter-spacing: 0.08em;4906  text-transform: uppercase;4907  padding: 4px 7px;4908  flex-shrink: 0;4909  display: flex;4910  align-items: center;4911}49124913.peach-health-empty {4914  font-family: "IBM Plex Mono", monospace;4915  font-size: 0.625rem;4916  color: var(--peach-t2);4917  padding: 6px 0;4918}49194920.peach-health-loading {4921  font-family: "IBM Plex Mono", monospace;4922  font-size: 0.625rem;4923  color: var(--peach-t2);4924  padding: 6px 0;4925  display: flex;4926  align-items: center;4927  gap: 6px;4928}49294930.peach-health-loading::before {4931  content: "";4932  width: 10px;4933  height: 10px;4934  border: 1.5px solid var(--peach-t3);4935  border-top-color: var(--peach-accent);4936  border-radius: 50%;4937  animation: peach-spin 600ms linear infinite;4938}49394940@keyframes peach-spin {4941  to { transform: rotate(360deg); }4942}49434944.peach-spinner {4945  width: 32px;4946  height: 32px;4947  border: 2px solid var(--peach-s2);4948  border-top-color: var(--peach-accent);4949  border-radius: 50%;4950  margin: 0 auto 16px;4951  animation: peach-spin 0.8s linear infinite;4952}49534954.peach-progress-screen {4955  text-align: center;4956  padding: 32px 16px;4957}49584959.peach-progress-screen-title {4960  font-size: 0.8125rem;4961  color: var(--peach-t0);4962  margin-bottom: 16px;4963}49644965.peach-progress-screen-stage {4966  font-size: 0.6875rem;4967  color: var(--peach-t2);4968  min-height: 14px;4969}49704971.peach-progress-screen-note {4972  font-size: 0.625rem;4973  color: var(--peach-t2);4974  margin-top: 8px;4975}49764977.peach-pairing-body {4978  flex: 1;4979  overflow-y: auto;4980  display: flex;4981  flex-direction: column;4982}49834984.peach-pairing-content {4985  flex: 1;4986  display: flex;4987  flex-direction: column;4988  align-items: center;4989  justify-content: center;4990  gap: 14px;4991  padding: 28px 20px;4992  text-align: center;4993}49944995.peach-pairing-code-screen {4996  gap: 18px;4997}49984999.peach-pairing-headline {5000  font-family: var(--font-display);5001  font-style: italic;5002  font-weight: 300;5003  font-size: 28px;5004  color: var(--peach-t0);5005  margin: 0;5006  line-height: 1;5007}50085009.peach-pairing-subline {5010  font-size: 0.75rem;5011  color: var(--peach-t2);5012  max-width: 220px;5013  line-height: 1.5;5014  margin: 0;5015}50165017.peach-pairing-subline--center {5018  text-align: center;5019}50205021/* 6-digit pairing code — both display (.peach-pairing-code) and entry5022   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking5023   so the two modes feel like the same surface. */5024.peach-pairing-code {5025  font-family: "IBM Plex Mono", monospace;5026  font-size: 36px;5027  letter-spacing: 0.25em;5028  color: var(--peach-t0);5029  text-align: center;5030  padding: 24px 0;5031  text-shadow:5032    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),5033    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);5034  background: transparent;5035  border: 0;5036  cursor: default;5037  user-select: text;5038}50395040.peach-pairing-code--loading,5041.peach-pairing-code--expired {5042  font-size: 18px;5043  letter-spacing: 0.04em;5044  color: var(--peach-t2);5045  cursor: pointer;5046  text-shadow: none;5047}50485049.peach-pairing-qr-container {5050  display: flex;5051  flex-direction: column;5052  align-items: center;5053  gap: 10px;5054}50555056.peach-pairing-qr {5057  width: 240px;5058  height: 240px;5059  display: block;5060}50615062.peach-pairing-instruction {5063  font-size: 0.75rem;5064  color: var(--peach-t2);5065  text-align: center;5066  line-height: 1.5;5067  margin: 0;5068  max-width: 220px;5069}50705071.peach-pairing-expiry {5072  font-family: "IBM Plex Mono", monospace;5073  font-size: 13px;5074  letter-spacing: 0.06em;5075  color: var(--peach-t2);5076  margin: 0;5077}50785079.peach-pairing-regen {5080  font-size: 0.75rem;5081  color: var(--peach-accent);5082  background: transparent;5083  border: 0;5084  cursor: pointer;5085  padding: 4px 0;5086  text-decoration: underline;5087  text-underline-offset: 2px;5088}50895090.peach-pairing-code-input {5091  font-family: "IBM Plex Mono", monospace;5092  font-size: 36px;5093  letter-spacing: 0.25em;5094  color: var(--peach-t0);5095  background: transparent;5096  border: 0;5097  border-bottom: 1px solid var(--peach-t3);5098  outline: none;5099  text-align: center;5100  padding: 18px 0;5101  width: 220px;5102  caret-color: var(--peach-accent);5103  transition: border-color 160ms ease;5104}51055106.peach-pairing-code-input::placeholder {5107  color: var(--peach-t3);5108}51095110.peach-pairing-code-input:focus {5111  border-bottom-color: var(--peach-accent);5112}51135114.peach-pairing-toggle {5115  background: transparent;5116  border: 0;5117  color: var(--peach-t2);5118  font-size: 0.75rem;5119  padding: 8px 4px;5120  cursor: pointer;5121  transition: color 120ms ease;5122}51235124.peach-pairing-toggle:hover:not(:disabled) {5125  color: var(--peach-t1);5126}51275128.peach-pairing-toggle:disabled {5129  opacity: 0.5;5130  cursor: default;5131}51325133.peach-pairing-hint {5134  font-size: 0.6875rem;5135  color: var(--peach-t2);5136  margin: 0;5137  text-align: center;5138}51395140.peach-pairing-status {5141  display: flex;5142  align-items: center;5143  gap: 8px;5144  margin: 0;5145  font-size: 0.75rem;5146  color: var(--peach-t1);5147}51485149.peach-pairing-error {5150  margin: 0;5151  font-size: 0.6875rem;5152  color: var(--peach-breach);5153}51545155.peach-pairing-error--muted {5156  color: var(--peach-t2);5157}51585159.peach-pairing-spinner {5160  width: 12px;5161  height: 12px;5162  border: 1.5px solid var(--peach-t3);5163  border-top-color: var(--peach-accent);5164  border-radius: 50%;5165  animation: peach-spin 0.8s linear infinite;5166}51675168.peach-pairing-success-icon,5169.peach-pairing-error-icon,5170.peach-pairing-hero {5171  display: inline-flex;5172  align-items: center;5173  justify-content: center;5174}51755176/* Tag chips */5177.peach-tag-chip {5178  display: inline-flex;5179  align-items: center;5180  gap: 4px;5181  padding: 3px 8px;5182  border-radius: 999px;5183  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5184  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5185  color: var(--peach-t0);5186  font-family: "IBM Plex Mono", monospace;5187  font-size: 0.625rem;5188  letter-spacing: 0.04em;5189}51905191.peach-tag-chip-remove {5192  background: transparent;5193  border: none;5194  color: inherit;5195  opacity: 0.6;5196  cursor: pointer;5197  padding: 0;5198  font-size: 0.75rem;5199  line-height: 1;5200}52015202.peach-tag-chip-remove:hover {5203  opacity: 1;5204}52055206/* Tag input */5207.peach-tag-input-wrap {5208  border-bottom: 1px solid var(--peach-t3);5209}52105211.peach-tag-suggestions {5212  display: flex;5213  flex-wrap: wrap;5214  gap: 4px;5215  padding: 6px 0;5216}52175218.peach-tag-suggestion {5219  padding: 2px 8px;5220  border-radius: 999px;5221  border: 1px solid var(--peach-t3);5222  background: var(--peach-s2);5223  color: var(--peach-t1);5224  font-family: "IBM Plex Mono", monospace;5225  font-size: 0.625rem;5226  cursor: pointer;5227  transition: border-color 80ms ease, background 80ms ease;5228}52295230.peach-tag-suggestion:hover {5231  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5232  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5233}52345235/* Identity suggestions — shown below username/email inputs in new-entry form */5236@keyframes peach-suggest-in {5237  from { opacity: 0; transform: translateY(-4px); }5238  to   { opacity: 1; transform: none; }5239}52405241.peach-identity-suggestions {5242  display: flex;5243  flex-direction: column;5244  gap: 1px;5245  margin-top: 4px;5246  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5247}52485249.peach-identity-filter-row {5250  display: flex;5251  align-items: center;5252  gap: 4px;5253  padding: 2px 0 5px;5254}52555256.peach-identity-collapse-btn {5257  margin-left: auto;5258  background: transparent;5259  border: none;5260  cursor: pointer;5261  color: var(--peach-t3);5262  padding: 2px 4px;5263  display: flex;5264  align-items: center;5265  line-height: 0;5266  border-radius: 3px;5267  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5268}52695270.peach-identity-collapse-btn:hover {5271  color: var(--peach-t1);5272}52735274.peach-identity-collapse-btn.is-collapsed {5275  transform: rotate(-90deg);5276}52775278.peach-identity-rows {5279  display: grid;5280  grid-template-rows: 1fr;5281  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5282}52835284.peach-identity-rows.is-collapsed {5285  grid-template-rows: 0fr;5286}52875288.peach-identity-rows-inner {5289  overflow-y: auto;5290  min-height: 0;5291  max-height: 148px;5292  scrollbar-width: thin;5293  scrollbar-color: var(--peach-t3) transparent;5294  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5295  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5296}52975298.peach-identity-rows-inner::-webkit-scrollbar {5299  width: 4px;5300}53015302.peach-identity-rows-inner::-webkit-scrollbar-track {5303  background: transparent;5304}53055306.peach-identity-rows-inner::-webkit-scrollbar-thumb {5307  background: var(--peach-t3);5308  border-radius: 2px;5309}53105311.peach-identity-filter-pill {5312  padding: 2px 7px;5313  border-radius: 999px;5314  border: 1px solid var(--peach-t3);5315  background: transparent;5316  color: var(--peach-t2);5317  font-family: "IBM Plex Mono", monospace;5318  font-size: 0.6rem;5319  cursor: pointer;5320  transition: border-color 80ms, background 80ms, color 80ms;5321}53225323.peach-identity-filter-pill.is-on {5324  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5325  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5326  color: var(--peach-accent);5327}53285329.peach-identity-suggestion {5330  display: flex;5331  align-items: center;5332  gap: 6px;5333  width: 100%;5334  padding: 4px 6px;5335  border-radius: 5px;5336  border: none;5337  background: transparent;5338  cursor: pointer;5339  text-align: left;5340  transition: background 80ms ease;5341}53425343.peach-identity-suggestion:hover,5344.peach-identity-suggestion:focus {5345  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5346  outline: none;5347}53485349.peach-identity-suggestion-value {5350  font-family: "IBM Plex Mono", monospace;5351  font-size: 0.7rem;5352  color: var(--peach-t1);5353  overflow: hidden;5354  text-overflow: ellipsis;5355  white-space: nowrap;5356  flex: 1;5357  min-width: 0;5358}53595360.peach-identity-suggestion-type {5361  font-family: "IBM Plex Mono", monospace;5362  font-size: 0.55rem;5363  font-weight: 600;5364  flex-shrink: 0;5365  padding: 1px 4px;5366  border-radius: 3px;5367}53685369.peach-identity-suggestion-type--email {5370  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5371  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5372}53735374.peach-identity-suggestion-type--username {5375  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5376  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5377}53785379.peach-identity-suggestion-meta {5380  font-family: "IBM Plex Mono", monospace;5381  font-size: 0.6rem;5382  color: var(--peach-t3);5383  flex-shrink: 0;5384}53855386/* Tag filter strip */5387.peach-tag-filter-strip {5388  border-bottom: 1px solid var(--peach-t3);5389  flex-shrink: 0;5390}53915392.peach-tag-filter-chip {5393  display: inline-flex;5394  align-items: center;5395  padding: 4px 10px;5396  border-radius: 999px;5397  border: 1px solid var(--peach-t3);5398  background: transparent;5399  color: var(--peach-t2);5400  font-family: "IBM Plex Mono", monospace;5401  font-size: 0.5625rem;5402  letter-spacing: 0.06em;5403  text-transform: uppercase;5404  cursor: pointer;5405  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5406  white-space: nowrap;5407}54085409.peach-tag-filter-chip:hover {5410  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5411  color: var(--peach-t1);5412}54135414.peach-tag-filter-chip.is-selected {5415  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5416  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5417  color: var(--peach-t0);5418}54195420/* ─────────────────────────────────────────────────────────────────────────5421   v1.4.12 additions5422   ─────────────────────────────────────────────────────────────────────── */54235424/* Sort bar */5425.peach-sort-bar {5426  display: flex;5427  align-items: center;5428  gap: 4px;5429  padding: 5px 12px;5430  border-bottom: 1px solid var(--peach-t3);5431  flex-shrink: 0;5432  overflow-x: auto;5433  scrollbar-width: none;5434}54355436.peach-sort-btn {5437  padding: 2px 9px;5438  border-radius: 999px;5439  border: 1px solid transparent;5440  background: transparent;5441  color: var(--peach-t2);5442  font-family: "IBM Plex Mono", monospace;5443  font-size: 0.5625rem;5444  letter-spacing: 0.07em;5445  text-transform: uppercase;5446  cursor: pointer;5447  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5448  white-space: nowrap;5449}54505451.peach-sort-btn:hover {5452  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5453  color: var(--peach-t1);5454}54555456.peach-sort-btn.is-active {5457  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5458  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5459  color: var(--peach-t0);5460}54615462.peach-sort-domain-hint {5463  margin-left: auto;5464  font-family: "IBM Plex Mono", monospace;5465  font-size: 0.5625rem;5466  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5467  white-space: nowrap;5468  overflow: hidden;5469  text-overflow: ellipsis;5470  max-width: 110px;5471}54725473/* Tab-match badge on entry rows */5474.peach-tab-match-badge {5475  display: inline-block;5476  width: 6px;5477  height: 6px;5478  border-radius: 50%;5479  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5480  margin-left: 5px;5481  vertical-align: middle;5482  flex-shrink: 0;5483  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5484}54855486.peach-entry-row.is-tab-match {5487  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5488  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5489}54905491.peach-entry-row.is-tab-match:hover {5492  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5493}54945495/* Entry list stagger entrance */5496@keyframes peach-entry-fadein {5497  from { opacity: 0; transform: translateY(4px); }5498  to   { opacity: 1; transform: translateY(0); }5499}55005501.peach-vault-list .peach-entry-row {5502  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5503}55045505/* Button press micro-interaction */5506.peach-btn:active {5507  transform: scale(0.95);5508  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5509}55105511.peach-sort-btn:active,5512.peach-tag-filter-chip:active {5513  transform: scale(0.93);5514  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5515}55165517/* Password strength bar (Lock view + shared) */5518.peach-password-strength {5519  display: flex;5520  align-items: center;5521  gap: 8px;5522  margin-top: 6px;5523}55245525.peach-strength-bar {5526  flex: 1;5527  height: 3px;5528  border-radius: 2px;5529  background: var(--peach-t3);5530  overflow: hidden;5531}55325533.peach-strength-fill {5534  height: 100%;5535  border-radius: 2px;5536  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5537              background 300ms ease;5538}55395540.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5541.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5542.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5543.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }55445545.peach-strength-label {5546  font-family: "IBM Plex Mono", monospace;5547  font-style: italic;5548  font-size: 0.5625rem;5549  font-weight: 300;5550  letter-spacing: 0.06em;5551  color: var(--peach-t2);5552  min-width: 36px;5553  text-align: right;5554}55555556.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5557.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5558.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5559.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }55605561/* Duress form */5562.peach-duress-status {5563  padding: 2px 8px;5564  border-radius: 999px;5565  border: 1px solid var(--peach-t3);5566  font-family: "IBM Plex Mono", monospace;5567  font-size: 0.5625rem;5568  letter-spacing: 0.07em;5569  text-transform: uppercase;5570  color: var(--peach-t2);5571  flex-shrink: 0;5572}55735574.peach-duress-status.is-active {5575  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5576  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5577  color: var(--peach-t0);5578}55795580.peach-duress-form {5581  padding: 8px 0 4px;5582  display: flex;5583  flex-direction: column;5584  gap: 6px;5585}55865587.peach-duress-form .peach-label {5588  margin-top: 4px;5589}55905591.peach-duress-actions {5592  display: flex;5593  gap: 6px;5594  align-items: center;5595  margin-top: 4px;5596}55975598.peach-duress-actions .peach-btn:first-child {5599  margin-right: auto;5600}56015602/* Improved overlay spring entrance */5603.peach-overlay-view.ov-enter-up {5604  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5605}56065607@keyframes ov-enter-up-spring {5608  from { opacity: 0; transform: translateY(16px) scale(0.98); }5609  to   { opacity: 1; transform: translateY(0) scale(1); }5610}56115612.peach-overlay-view.ov-enter-right {5613  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5614}56155616@keyframes ov-enter-right-spring {5617  from { opacity: 0; transform: translateX(18px) scale(0.98); }5618  to   { opacity: 1; transform: translateX(0) scale(1); }5619}56205621/* ── Onboarding-mode restore screens (file import) ── */5622/* Used when MainImportView renders during onboarding (no vault yet).5623   Animates like a lock-screen transition. */5624.peach-lock-view {5625  position: absolute;5626  inset: 0;5627  display: flex;5628  flex-direction: column;5629  background:5630    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5631    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5632    var(--peach-bg);5633  z-index: 2;5634  overflow: hidden;5635  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5636}56375638.peach-lock-view-header {5639  display: flex;5640  align-items: center;5641  justify-content: space-between;5642  padding: 16px 18px 12px;5643  flex-shrink: 0;5644}56455646/* ───────── Settings: auto-lock select ───────── */5647.peach-settings-select {5648  font-family: "IBM Plex Mono", monospace;5649  font-size: 0.6875rem;5650  background: transparent;5651  border: 1px solid var(--peach-t3);5652  border-radius: 4px;5653  color: var(--peach-t1);5654  padding: 3px 6px;5655  cursor: pointer;5656  outline: none;5657}5658.peach-settings-select:focus {5659  border-color: var(--peach-accent);5660}56615662/* ───────── Duress status pill (new polished) ───────── */5663.peach-duress-status-pill {5664  font-family: "IBM Plex Mono", monospace;5665  font-size: 0.5625rem;5666  text-transform: uppercase;5667  letter-spacing: 0.12em;5668  padding: 2px 8px;5669  border-radius: 12px;5670  background: var(--peach-t3);5671  color: var(--peach-t2);5672  flex-shrink: 0;5673}5674.peach-duress-status-pill.is-active {5675  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5676  color: var(--peach-accent);5677}56785679/* ───────── Entry advanced disclosure (canary) ───────── */5680.peach-entry-advanced {5681  margin-top: 12px;5682  border-top: 1px solid var(--peach-t3);5683  padding-top: 10px;5684  position: relative;5685  z-index: 1;5686}5687.peach-entry-advanced-toggle {5688  display: flex;5689  align-items: center;5690  justify-content: space-between;5691  width: 100%;5692  background: transparent;5693  border: none;5694  cursor: pointer;5695  padding: 0;5696  color: var(--peach-t2);5697}5698.peach-canary-section {5699  margin-top: 10px;5700  display: grid;5701  gap: 6px;5702}57035704/* ───────── Import: merge/replace radio choices ───────── */5705.peach-import-choice {5706  display: flex;5707  align-items: flex-start;5708  gap: 10px;5709  padding: 8px 10px;5710  border: 1px solid var(--peach-t3);5711  border-radius: 10px;5712  cursor: pointer;5713  margin-bottom: 6px;5714  transition: border-color 120ms ease, background 120ms ease;5715}5716.peach-import-choice:hover {5717  border-color: var(--peach-accent);5718}5719.peach-import-choice input[type="radio"] {5720  margin-top: 3px;5721  accent-color: var(--peach-accent);5722  flex-shrink: 0;5723}5724.peach-import-choice-main {5725  display: flex;5726  flex-direction: column;5727  gap: 2px;5728  min-width: 0;5729}5730.peach-import-choice-label {5731  font-size: 0.75rem;5732  color: var(--peach-t0);5733}5734.peach-import-choice-sub {5735  font-size: 0.6875rem;5736  color: var(--peach-t2);5737  line-height: 1.5;5738}57395740/* ───────── Export: success confirmation strip ───────── */5741.peach-export-success {5742  display: flex;5743  align-items: flex-start;5744  gap: 10px;5745  padding: 12px;5746  border-radius: 12px;5747  border: 1px solid rgba(150, 175, 110, 0.3);5748  background: rgba(150, 175, 110, 0.08);5749  color: var(--peach-t0);5750  font-size: 0.75rem;5751  line-height: 1.55;5752}5753.peach-export-success-check {5754  color: rgba(150, 175, 110, 0.9);5755  font-size: 0.875rem;5756  flex-shrink: 0;5757}57585759/* ── Trash view ──────────────────────────────────────────────────────── */5760.peach-trash-entry-row {5761  display: flex;5762  align-items: center;5763  justify-content: space-between;5764  gap: 8px;5765  padding: 8px 0;5766  border-bottom: 1px solid var(--peach-border);5767}5768.peach-trash-entry-info {5769  flex: 1;5770  min-width: 0;5771  display: flex;5772  flex-direction: column;5773  gap: 2px;5774}5775.peach-trash-entry-title {5776  font-size: 0.8125rem;5777  color: var(--peach-t0);5778  overflow: hidden;5779  text-overflow: ellipsis;5780  white-space: nowrap;5781}5782.peach-trash-entry-meta {5783  font-family: var(--font-mono);5784  font-size: 0.5625rem;5785  color: var(--peach-t2);5786  letter-spacing: 0.04em;5787}5788.peach-trash-entry-actions {5789  display: flex;5790  align-items: center;5791  gap: 4px;5792  flex-shrink: 0;5793}5794.peach-trash-delete-btn {5795  background: transparent;5796  border: 0;5797  color: var(--peach-t3);5798  font-size: 1rem;5799  line-height: 1;5800  cursor: pointer;5801  padding: 2px 5px;5802  transition: color 0.15s;5803}5804.peach-trash-delete-btn:hover { color: var(--peach-breach); }5805.peach-trash-list {5806  overflow-y: auto;5807}5808.peach-trash-footer {5809  display: flex;5810  align-items: center;5811  gap: 8px;5812  padding: 8px 0 0;5813  border-top: 1px solid var(--peach-border);5814  margin-top: 4px;5815}5816.peach-trash-purge-all {5817  background: transparent;5818  border: 0;5819  color: var(--peach-t3);5820  font-size: 0.625rem;5821  cursor: pointer;5822  padding: 4px 0;5823  letter-spacing: 0.03em;5824  transition: color 0.2s;5825}5826.peach-trash-purge-all:hover { color: var(--peach-breach); }5827.peach-trash-purge-confirm-label {5828  font-size: 0.625rem;5829  color: var(--peach-t1);5830  flex: 1;5831}58325833/* ── Settings shortcuts grid ─────────────────────────────────────────── */5834.peach-shortcuts-grid {5835  display: grid;5836  grid-template-columns: auto 1fr;5837  gap: 6px 12px;5838  align-items: center;5839  padding: 4px 0;5840}5841.peach-shortcut-key {5842  font-family: var(--font-mono);5843  font-size: 0.625rem;5844  color: var(--peach-t0);5845  background: var(--peach-t3);5846  border-radius: 4px;5847  padding: 2px 6px;5848  white-space: nowrap;5849  text-align: center;5850}5851.peach-shortcut-desc {5852  font-size: 0.6875rem;5853  color: var(--peach-t1);5854}58555856/* ── Sort bar trash button ───────────────────────────────────────────── */5857.peach-sort-trash-btn {5858  display: flex;5859  align-items: center;5860  justify-content: center;5861  padding: 3px 5px;5862  background: transparent;5863  border: none;5864  cursor: pointer;5865  color: var(--peach-t2);5866  border-radius: 4px;5867  transition: color 140ms ease, background 140ms ease;5868}5869.peach-sort-trash-btn:hover {5870  color: var(--peach-t1);5871  background: var(--peach-t3);5872}5873.peach-sort-trash-btn.is-active {5874  color: var(--peach-accent);5875}58765877/* Accent color picker */5878.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5879.peach-accent-picker {5880  display: flex;5881  flex-wrap: wrap;5882  gap: 7px;5883  padding: 2px 0;5884}5885.peach-accent-swatch {5886  width: 22px;5887  height: 22px;5888  border-radius: 50%;5889  border: 2px solid transparent;5890  cursor: pointer;5891  padding: 0;5892  transition: transform 100ms;5893  outline-offset: 2px;5894}5895.peach-accent-swatch:hover { transform: scale(1.15); }5896.peach-accent-swatch.is-active {5897  border-color: var(--peach-t0);5898  transform: scale(1.1);5899}59005901.peach-pill-group {5902  display: flex;5903  gap: 6px;5904}5905.peach-pill-group .peach-btn.is-active {5906  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5907  border-color: var(--peach-accent);5908  color: var(--peach-t0);5909}59105911/* ── Card entry styles ───────────────────────────────────────── */5912.peach-card-number {5913  font-family: var(--peach-mono);5914  letter-spacing: 0.08em;5915}59165917.peach-card-network-badge {5918  font-size: 0.625rem;5919  padding: 1px 5px;5920  border-radius: 4px;5921  border: 0.5px solid var(--peach-border);5922  color: var(--peach-text-dim);5923  margin-left: 6px;5924  vertical-align: middle;5925}59265927.peach-card-expiry-row {5928  display: flex;5929  align-items: center;5930  gap: 8px;5931}59325933.peach-card-expiry-sep {5934  color: var(--peach-text-dim);5935}59365937/* ── Pro tier — upgrade screen ──────────────────────────────── */5938.peach-pro-mark {5939  font-size: 0.5625rem;5940  color: var(--peach-accent);5941  margin-left: 6px;5942  vertical-align: super;5943  opacity: 0.7;5944}59455946.peach-pro-mini-badge {5947  display: block;5948  font-size: 0.625rem;5949  font-style: italic;5950  color: var(--peach-accent);5951  letter-spacing: 0.04em;5952  margin-top: -2px;5953  padding-left: 2px;5954  opacity: 0.85;5955  text-align: center;5956}59575958.peach-wordmark-stack {5959  display: inline-flex;5960  flex-direction: column;5961  align-items: center;5962}59635964/* ── Pro tier — upgrade page ─────────────────────────────────── */5965/* ── Pro upgrade — redesigned editorial layout ─────────────────── */59665967.peach-pro-upgrade {5968  display: flex;5969  flex-direction: column;5970  align-items: stretch;5971  gap: 10px;5972  padding: 2px 2px 12px;5973}59745975.peach-pro-eyebrow {5976  margin: 0;5977  font-family: var(--font-ui);5978  font-size: 0.625rem;5979  font-weight: 500;5980  letter-spacing: 0.12em;5981  color: var(--peach-accent);5982}59835984.peach-pro-headline {5985  margin: 0;5986  font-family: var(--font-display, "Cormorant Garamond", serif);5987  font-size: 30px;5988  font-weight: 700;5989  font-style: normal;5990  line-height: 1.05;5991  color: var(--peach-t0);5992  letter-spacing: -0.01em;5993}5994.peach-pro-headline em {5995  font-style: italic;5996  font-weight: 400;5997  color: var(--peach-accent);5998}59996000.peach-pro-subtitle {6001  margin: 0;6002  font-size: 0.6875rem;6003  line-height: 1.5;6004  color: var(--peach-t1);6005}60066007/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6008.peach-pro-section-label {6009  margin: 6px 0 0;6010  font-family: var(--font-ui);6011  font-size: 0.5625rem;6012  font-weight: 500;6013  letter-spacing: 0.12em;6014  text-transform: uppercase;6015  color: var(--peach-t2);6016}60176018/* 2-column numbered feature grid */6019.peach-pro-grid {6020  display: grid;6021  grid-template-columns: 1fr 1fr;6022  border-top: 1px solid var(--peach-border);6023  border-left: 1px solid var(--peach-border);6024}60256026.peach-pro-grid-item {6027  display: flex;6028  flex-direction: column;6029  gap: 2px;6030  padding: 8px 9px;6031  border-right: 1px solid var(--peach-border);6032  border-bottom: 1px solid var(--peach-border);6033}60346035.peach-pro-grid-item--wide {6036  grid-column: 1 / -1;6037}60386039.peach-pro-grid-num {6040  font-family: var(--font-mono);6041  font-size: 0.5625rem;6042  color: var(--peach-accent);6043  letter-spacing: 0.06em;6044  opacity: 0.85;6045}60466047.peach-pro-grid-name {6048  font-size: 0.8125rem;6049  font-weight: 500;6050  color: var(--peach-t0);6051  line-height: 1.2;6052}60536054.peach-pro-grid-desc {6055  font-size: 0.625rem;6056  color: var(--peach-t1);6057  line-height: 1.4;6058}60596060.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6061  animation: peach-pulse-accent 600ms ease-out forwards;6062}60636064@keyframes peach-pulse-accent {6065  0%   { opacity: 1; transform: scale(1.2); }6066  100% { opacity: 0.85; transform: scale(1); }6067}60686069/* Actions */6070.peach-pro-upgrade-actions {6071  display: flex;6072  flex-direction: column;6073  align-items: stretch;6074  gap: 10px;6075}60766077.peach-pro-pricing {6078  margin: 0;6079  font-size: 1rem;6080  font-weight: 600;6081  color: var(--peach-t0);6082  letter-spacing: 0.01em;6083}6084.peach-pro-pricing-sub {6085  font-size: 0.75rem;6086  font-weight: 400;6087  color: var(--peach-t1);6088  letter-spacing: 0.02em;6089}60906091.peach-pro-upgrade-cta {6092  display: flex;6093  align-items: center;6094  justify-content: center;6095  text-decoration: none;6096  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6097  border: 1px solid var(--peach-accent);6098  border-radius: 10px;6099  color: var(--peach-accent);6100  font-family: var(--font-ui);6101  font-size: 0.8125rem;6102  font-weight: 600;6103  letter-spacing: 0.06em;6104  padding: 11px 16px;6105  transition: background 0.15s ease, color 0.15s ease;6106}6107.peach-pro-upgrade-cta:hover {6108  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6109}61106111.peach-pro-key-divider {6112  display: flex;6113  align-items: center;6114  gap: 8px;6115  color: var(--peach-t2);6116  font-size: 0.5625rem;6117  letter-spacing: 0.1em;6118}6119.peach-pro-key-divider::before,6120.peach-pro-key-divider::after {6121  content: "";6122  flex: 1;6123  height: 1px;6124  background: var(--peach-border);6125}61266127/* Inline key entry row */6128.peach-pro-key-inline {6129  display: flex;6130  align-items: center;6131  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6132  border: 1px solid var(--peach-border);6133  border-radius: 8px;6134  overflow: hidden;6135}6136.peach-pro-key-inline-input {6137  flex: 1;6138  background: transparent;6139  border: none;6140  outline: none;6141  color: var(--peach-t1);6142  font-family: var(--font-mono);6143  font-size: 0.625rem;6144  letter-spacing: 0.06em;6145  padding: 9px 10px;6146}6147.peach-pro-key-inline-input::placeholder {6148  color: var(--peach-t2);6149}6150.peach-pro-key-apply {6151  background: transparent;6152  border: none;6153  border-left: 1px solid var(--peach-border);6154  color: var(--peach-t2);6155  font-family: var(--font-ui);6156  font-size: 0.5625rem;6157  font-weight: 600;6158  letter-spacing: 0.08em;6159  padding: 9px 10px;6160  cursor: pointer;6161  transition: color 0.15s ease;6162  flex-shrink: 0;6163}6164.peach-pro-key-apply:not(:disabled):hover {6165  color: var(--peach-accent);6166}6167.peach-pro-key-apply:disabled {6168  opacity: 0.35;6169  cursor: not-allowed;6170}61716172/* ── Pro tier — key ceremony ─────────────────────────────────── */6173.peach-pro-key-ceremony {6174  display: flex;6175  flex-direction: column;6176  align-items: center;6177  gap: 12px;6178  padding: 20px 4px 16px;6179}61806181.peach-pro-key-ceremony .peach-lock-rune-string {6182  font-size: 1rem;6183  gap: 12px;6184  flex: 0;6185  justify-content: center;6186}61876188.peach-pro-key-ceremony-label {6189  margin: 0;6190  font-size: 0.6875rem;6191  color: var(--peach-t2);6192  font-style: italic;6193  letter-spacing: 0.04em;6194}61956196.peach-pro-key-input {6197  font-family: var(--font-mono, monospace);6198  letter-spacing: 0.06em;6199  text-align: center;6200  width: 100%;6201  box-sizing: border-box;6202}62036204.peach-pro-key-error {6205  margin: 0;6206  font-size: 0.75rem;6207  text-align: center;6208  color: var(--peach-breach, #e55);6209  padding: 0;6210}62116212.peach-pro-key-activate {6213  width: 100%;6214  text-align: center;6215  box-sizing: border-box;6216  padding: 10px 20px;6217  font-size: 0.8125rem;6218}62196220.peach-pro-key-cancel {6221  background: transparent;6222  border: 0;6223  color: var(--peach-t2);6224  font-size: 0.6875rem;6225  cursor: pointer;6226  padding: 2px 8px;6227  transition: color 0.2s;6228}62296230.peach-pro-key-cancel:hover { color: var(--peach-accent); }62316232/* ── Pro tier — active state ─────────────────────────────────── */6233.peach-pro-active {6234  display: flex;6235  flex-direction: column;6236  align-items: center;6237  gap: 0;6238  padding: 8px 4px 16px;6239  min-height: 280px;6240}62416242.peach-pro-active-hero {6243  display: flex;6244  flex-direction: column;6245  align-items: center;6246  gap: 6px;6247  padding: 20px 0 22px;6248}62496250.peach-pro-active-mark-wrap {6251  display: flex;6252  align-items: center;6253  justify-content: center;6254  margin-bottom: 4px;6255}62566257.peach-pro-active-mark {6258  width: 60px;6259  height: 60px;6260}62616262.peach-pro-active-title {6263  font-family: var(--font-display, var(--font-ui));6264  font-size: 26px;6265  margin: 0;6266  color: var(--peach-t0);6267  letter-spacing: 0.01em;6268}62696270.peach-pro-active-since {6271  margin: 0;6272  font-size: 0.6875rem;6273  color: var(--peach-t2);6274  font-style: italic;6275}62766277.peach-pro-active-features {6278  display: flex;6279  flex-direction: column;6280  gap: 8px;6281  width: 100%;6282  padding: 14px 8px 0;6283  border-top: 1px solid var(--peach-border);6284  flex: 1;6285}62866287.peach-pro-active-feature {6288  display: flex;6289  align-items: center;6290  gap: 9px;6291}62926293.peach-pro-active-feature-mark {6294  color: var(--peach-accent);6295  font-size: 0.625rem;6296  opacity: 0.65;6297  flex-shrink: 0;6298}62996300.peach-pro-active-feature-name {6301  font-size: 0.75rem;6302  color: var(--peach-t1);6303}63046305.peach-pro-deactivate {6306  align-self: center;6307  background: transparent;6308  border: 0;6309  color: var(--peach-t3);6310  font-size: 0.625rem;6311  cursor: pointer;6312  padding: 8px 0 0;6313  margin-top: 16px;6314  letter-spacing: 0.03em;6315  transition: color 0.2s;6316}63176318.peach-pro-deactivate:hover { color: var(--peach-t2); }63196320.peach-pro-deactivate:disabled {6321  opacity: 0.5;6322  cursor: default;6323}63246325/* ── Pro advanced health remediation queue ──────────────────── */6326.peach-health-pro-queue {6327  display: flex;6328  flex-direction: column;6329  gap: 10px;6330  padding: 12px;6331  margin: 0 0 12px;6332  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6333  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6334  border-radius: 10px;6335}63366337.peach-health-pro-queue-head {6338  display: flex;6339  justify-content: space-between;6340  align-items: baseline;6341}63426343.peach-health-pro-queue-title {6344  font-size: 0.75rem;6345  font-weight: 500;6346  letter-spacing: 0.04em;6347  text-transform: uppercase;6348  color: var(--peach-accent);6349}63506351.peach-health-pro-queue-score {6352  font-size: 0.6875rem;6353  color: var(--peach-t2);6354}63556356.peach-health-pro-row {6357  display: flex;6358  gap: 10px;6359  align-items: center;6360  padding: 8px 0;6361  border-top: 1px solid var(--peach-border);6362}63636364.peach-health-pro-row-info {6365  flex: 1;6366  display: flex;6367  flex-direction: column;6368  gap: 4px;6369  min-width: 0;6370}63716372.peach-health-pro-action {6373  flex: 0 0 auto;6374  padding: 4px 8px;6375  font-size: 0.5625rem;6376  letter-spacing: 0.08em;6377  text-transform: uppercase;6378}63796380.peach-health-pro-row-name {6381  font-size: 0.8125rem;6382  color: var(--peach-t0);6383  overflow: hidden;6384  text-overflow: ellipsis;6385  white-space: nowrap;6386}63876388.peach-health-pro-row-meta {6389  font-size: 0.6875rem;6390  color: var(--peach-t2);6391}63926393.peach-health-pro-bar {6394  height: 2px;6395  background: var(--peach-border);6396  border-radius: 2px;6397  overflow: hidden;6398  margin-top: 2px;6399}64006401.peach-health-pro-bar-fill {6402  height: 100%;6403  background: var(--peach-accent);6404  transition: width 200ms ease-out;6405}64066407/* ── Pro activation celebration ── */6408@keyframes peach-pro-bloom {6409  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6410  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6411                 drop-shadow(0 0 48px var(--peach-glow)); }6412  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6413}64146415@keyframes peach-pro-wordmark-in {6416  from { opacity: 0; transform: translateY(4px); }6417  to   { opacity: 1; transform: translateY(0); }6418}64196420@keyframes peach-pro-fade-out {6421  from { opacity: 1; }6422  to   { opacity: 0; }6423}64246425.peach-pro-celebration {6426  background:6427    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6428    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6429    var(--peach-bg);6430  border: 1px solid var(--peach-t3);6431  box-shadow:6432    0 2px 8px rgba(0,0,0,0.55),6433    0 14px 48px rgba(0,0,0,0.7),6434    0 0 0 1px rgba(240,232,216,0.04);6435  overflow: hidden;6436  width: 320px;6437  height: 520px;6438  display: flex;6439  flex-direction: column;6440  align-items: center;6441  justify-content: center;6442  gap: 8px;6443  padding: 32px 24px;6444  text-align: center;6445}64466447.peach-pro-celebration.is-leaving {6448  animation: peach-pro-fade-out 400ms ease forwards;6449}64506451.peach-pro-bloom-target {6452  display: flex;6453  align-items: center;6454  justify-content: center;6455  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6456  margin-bottom: 12px;6457}64586459.peach-pro-bloom-icon {6460  width: 48px;6461  height: 48px;6462}64636464.peach-pro-wordmark {6465  font-family: var(--font-display);6466  font-size: 22px;6467  font-style: italic;6468  font-weight: 400;6469  color: var(--peach-accent);6470  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6471}64726473.peach-pro-thankyou {6474  font-size: 0.75rem;6475  font-style: italic;6476  color: var(--peach-t2);6477  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6478}647964806481/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6482.peach-pro-notice-banner {6483  display: flex;6484  align-items: center;6485  gap: 8px;6486  padding: 7px 12px;6487  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6488  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6489  font-size: 0.6875rem;6490  color: var(--peach-t2);6491  font-family: "IBM Plex Mono", monospace;6492  flex-shrink: 0;6493}64946495.peach-pro-notice-link {6496  background: none;6497  border: none;6498  padding: 0;6499  cursor: pointer;6500  font-size: 0.6875rem;6501  color: var(--peach-accent);6502  font-family: "IBM Plex Mono", monospace;6503  margin-left: auto;6504  white-space: nowrap;6505}65066507.peach-pro-notice-close {6508  background: none;6509  border: none;6510  padding: 0 0 0 4px;6511  cursor: pointer;6512  font-size: 0.625rem;6513  color: var(--peach-t3);6514  line-height: 1;6515}65166517/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6518   Renders over whatever view is showing. 60-second expiry; the popup ticks6519   the countdown each second and clears the banner when it hits zero. */6520.peach-pair-request-banner {6521  display: flex;6522  flex-direction: column;6523  gap: 8px;6524  padding: 10px 12px;6525  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6526  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6527  font-family: "IBM Plex Mono", monospace;6528  flex-shrink: 0;6529}65306531.peach-pair-toast {6532  padding: 8px 12px;6533  font-family: "IBM Plex Mono", monospace;6534  font-size: 0.75rem;6535  color: var(--peach-t1);6536  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6537  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6538  flex-shrink: 0;6539  text-align: center;6540}65416542.peach-pair-toast strong {6543  color: var(--peach-t0);6544  font-weight: 500;6545}65466547.peach-pair-request-header {6548  display: flex;6549  align-items: center;6550  gap: 8px;6551  font-size: 0.75rem;6552  color: var(--peach-t1);6553}65546555.peach-pair-request-mark {6556  font-size: 0.875rem;6557  display: inline-flex;6558  align-items: center;6559}65606561.peach-pair-request-icon {6562  width: 1em;6563  height: 1em;6564}65656566.peach-pair-request-title {6567  font-weight: 600;6568  color: var(--peach-t0);6569}65706571.peach-pair-request-countdown {6572  margin-left: auto;6573  font-variant-numeric: tabular-nums;6574  color: var(--peach-t2);6575  font-size: 0.6875rem;6576}65776578.peach-pair-request-body {6579  margin: 0;6580  font-size: 0.75rem;6581  color: var(--peach-t1);6582  line-height: 1.4;6583}65846585.peach-pair-request-body strong {6586  color: var(--peach-t0);6587  font-weight: 600;6588}65896590.peach-pair-request-actions {6591  display: flex;6592  gap: 8px;6593  justify-content: flex-end;6594}65956596/* ─── First-run onboarding ──────────────────────────────────────────────6597   Three-card welcome shown once before vault creation. The PeachScript6598   rune background drifts behind everything at very low opacity — it's6599   atmosphere, not focus. The cards themselves use the same panel6600   language as the rest of the popup so the transition into NewVault is6601   continuous, not a jarring switch of visual register. */66026603.peach-onboarding {6604  position: relative;6605  display: flex;6606  flex-direction: column;6607  width: 100%;6608  height: 100%;6609  padding: 16px 16px 18px;6610  box-sizing: border-box;6611  overflow: hidden;6612  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6613}66146615.peach-onboarding.is-completing {6616  animation: peach-onboard-exit 200ms ease-out forwards;6617}66186619.peach-rune-background {6620  position: absolute;6621  inset: 0;6622  width: 100%;6623  height: 100%;6624  pointer-events: none;6625  z-index: 0;6626  transition: opacity 500ms ease-out;6627}66286629.peach-onboarding.is-completing .peach-rune-background {6630  opacity: 0;6631}66326633.peach-onboarding-header {6634  position: relative;6635  z-index: 1;6636  display: flex;6637  align-items: center;6638  margin-bottom: 14px;6639}66406641.peach-onboarding-card {6642  position: relative;6643  z-index: 1;6644  flex: 1;6645  display: flex;6646  flex-direction: column;6647  gap: 10px;6648  padding: 22px 20px;6649  border-radius: 16px;6650  border: 1px solid var(--peach-t3);6651  background:6652    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6653  backdrop-filter: blur(3px);6654  -webkit-backdrop-filter: blur(3px);6655  box-shadow:6656    inset 0 1px 0 rgba(240, 232, 216, 0.04),6657    0 12px 28px rgba(0, 0, 0, 0.12);6658  cursor: pointer;6659  user-select: none;6660  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6661}66626663.peach-onboarding-card.is-exiting {6664  animation: peach-card-out 120ms ease-in forwards;6665  pointer-events: none;6666}66676668.peach-onboarding-card-headline {6669  margin: 0;6670  font-family: var(--font-display);6671  font-style: italic;6672  font-weight: 400;6673  font-size: 22px;6674  line-height: 1.05;6675  color: var(--peach-t0);6676  white-space: pre-line;6677}66786679.peach-onboarding-divider {6680  margin: 4px 0 6px;6681  border: 0;6682  border-top: 1px solid var(--peach-t3);6683  width: 100%;6684}66856686.peach-onboarding-body {6687  margin: 0;6688  font-size: 0.8125rem;6689  line-height: 1.6;6690  color: var(--peach-t1);6691}66926693.peach-onboarding-warning {6694  display: flex;6695  align-items: flex-start;6696  gap: 8px;6697  margin: 6px 0 0;6698  padding-top: 8px;6699  border-top: 1px dashed var(--peach-t3);6700  font-size: 0.8125rem;6701  line-height: 1.5;6702  color: var(--peach-t1);6703}67046705.peach-onboarding-warning-icon {6706  color: var(--peach-accent);6707  font-size: 0.8125rem;6708  line-height: 1.5;6709  flex: 0 0 auto;6710}67116712.peach-onboarding-nav {6713  position: relative;6714  z-index: 1;6715  display: flex;6716  align-items: center;6717  justify-content: space-between;6718  margin-top: 12px;6719  padding: 0 4px;6720}67216722.peach-onboarding-dots {6723  display: flex;6724  align-items: center;6725  gap: 6px;6726}67276728.peach-onboarding-dot {6729  width: 6px;6730  height: 6px;6731  border-radius: 50%;6732  background: var(--peach-t2);6733  transition: width 200ms ease, height 200ms ease, background 200ms ease;6734}67356736.peach-onboarding-dot.is-active {6737  width: 8px;6738  height: 8px;6739  background: var(--peach-accent);6740}67416742.peach-onboarding-next {6743  background: none;6744  border: none;6745  padding: 4px 0;6746  cursor: pointer;6747  font-family: "IBM Plex Mono", monospace;6748  font-size: 0.6875rem;6749  letter-spacing: 0.04em;6750  color: var(--peach-t1);6751  transition: color 150ms ease;6752}67536754.peach-onboarding-next:hover {6755  color: var(--peach-t0);6756}67576758.peach-onboarding-next:disabled {6759  opacity: 0.5;6760  cursor: default;6761}67626763.peach-onboarding-back {6764  background: none;6765  border: none;6766  padding: 4px 0;6767  cursor: pointer;6768  font-family: "IBM Plex Mono", monospace;6769  font-size: 0.6875rem;6770  letter-spacing: 0.04em;6771  color: var(--peach-t2);6772  transition: color 150ms ease;6773}67746775.peach-onboarding-back:hover {6776  color: var(--peach-t0);6777}67786779.peach-onboarding-back:disabled {6780  opacity: 0.5;6781  cursor: default;6782}67836784/* Reserve back-button width on the first card so the dots stay centred */6785.peach-onboarding-back-spacer {6786  width: 44px;6787}67886789.peach-onboarding-mobile-card-buttons {6790  display: flex;6791  flex-direction: column;6792  gap: 8px;6793  margin-top: 16px;6794}67956796@keyframes peach-onboard-enter {6797  from { opacity: 0; transform: translateY(20px); }6798  to   { opacity: 1; transform: translateY(0); }6799}68006801@keyframes peach-onboard-exit {6802  from { opacity: 1; }6803  to   { opacity: 0; }6804}68056806@keyframes peach-card-in {6807  from { opacity: 0; transform: translateX(12px); }6808  to   { opacity: 1; transform: translateX(0); }6809}68106811@keyframes peach-card-out {6812  from { opacity: 1; transform: translateX(0); }6813  to   { opacity: 0; transform: translateX(-12px); }6814}68156816/* ─── New vault screen — matched to onboarding card language ─────────── */68176818.peach-newvault {6819  position: relative;6820  display: flex;6821  flex-direction: column;6822  gap: 12px;6823  padding: 16px 16px 18px;6824  overflow: hidden;6825}68266827/* Suppress the warm-blob ambient art inherited from .lock-screen — the6828   new vault card now carries the visual weight. */6829.peach-newvault::before {6830  content: none;6831}68326833.peach-newvault-header {6834  position: relative;6835  z-index: 2;6836  display: flex;6837  align-items: center;6838  gap: 10px;6839  margin-bottom: 2px;6840}68416842.peach-newvault-back {6843  display: inline-flex;6844  align-items: center;6845  gap: 4px;6846  background: transparent;6847  border: none;6848  color: var(--peach-t2);6849  font-family: "IBM Plex Mono", monospace;6850  font-size: 0.625rem;6851  letter-spacing: 0.06em;6852  cursor: pointer;6853  padding: 4px 6px;6854  border-radius: 6px;6855  transition: color 120ms ease, background 120ms ease;6856}68576858.peach-newvault-back:hover {6859  color: var(--peach-t0);6860  background: rgba(240, 232, 216, 0.04);6861}68626863.peach-newvault-mark {6864  position: absolute;6865  right: -12px;6866  top: 6px;6867  width: 110px;6868  height: 110px;6869  pointer-events: none;6870  opacity: 0.10;6871  filter: saturate(0.9);6872  z-index: 0;6873}6874.peach-newvault-mark-art {6875  width: 100%;6876  height: 100%;6877}6878.peach-newvault-mark-art path:nth-child(1) {6879  fill: rgba(123, 144, 96, 0.88);6880}6881.peach-newvault-mark-art path:nth-child(2) {6882  stroke: rgba(94, 122, 66, 0.95);6883}68846885.peach-newvault-card {6886  position: relative;6887  z-index: 1;6888  display: flex;6889  flex-direction: column;6890  gap: 12px;6891  padding: 22px 20px 18px;6892  border-radius: 16px;6893  border: 1px solid var(--peach-t3);6894  background:6895    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6896  backdrop-filter: blur(3px);6897  -webkit-backdrop-filter: blur(3px);6898  box-shadow:6899    inset 0 1px 0 rgba(240, 232, 216, 0.04),6900    0 12px 28px rgba(0, 0, 0, 0.12);6901  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6902}69036904.peach-newvault-headline {6905  margin: 0;6906  font-family: var(--font-display);6907  font-style: italic;6908  font-weight: 400;6909  font-size: 24px;6910  line-height: 1.05;6911  color: var(--peach-t0);6912  white-space: pre-line;6913}69146915.peach-newvault-divider {6916  margin: 2px 0 4px;6917  border: 0;6918  border-top: 1px solid var(--peach-t3);6919  width: 100%;6920}69216922.peach-newvault-field {6923  display: flex;6924  flex-direction: column;6925  gap: 4px;6926}69276928.peach-newvault-label-row {6929  display: flex;6930  align-items: center;6931  justify-content: space-between;6932}69336934/* Monospace input scaled to the card. Replaces the 22px unlock-input6935   so the placeholder no longer overflows and the field reads as part6936   of the same surface as the body copy. */6937.peach-newvault-input {6938  font-size: 0.875rem;6939  letter-spacing: 0.18em;6940  padding: 8px 0;6941}6942.peach-newvault-input::placeholder {6943  letter-spacing: 0.18em;6944  color: var(--peach-t2);6945}69466947.peach-newvault-hint {6948  margin: 2px 0 0;6949  font-family: "IBM Plex Mono", monospace;6950  font-size: 0.625rem;6951  color: var(--peach-t2);6952  letter-spacing: 0.04em;6953}69546955.peach-newvault-submit {6956  margin-top: 4px;6957}69586959.peach-newvault-warning {6960  display: flex;6961  align-items: flex-start;6962  gap: 8px;6963  margin: 4px 0 0;6964  padding-top: 10px;6965  border-top: 1px dashed var(--peach-t3);6966  font-size: 0.75rem;6967  line-height: 1.5;6968  color: var(--peach-t1);6969}69706971.peach-newvault-warning-icon {6972  color: var(--peach-accent);6973  font-size: 0.8125rem;6974  line-height: 1.4;6975  flex: 0 0 auto;6976}69776978.peach-newvault-footer {6979  position: relative;6980  z-index: 1;6981  display: flex;6982  flex-direction: column;6983  gap: 4px;6984  padding: 4px 4px 0;6985}69866987/* Settings body — warm accent gradient gives the glass something to blur against */6988.peach-settings-body {6989  background:6990    radial-gradient(6991      ellipse at 30% 20%,6992      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,6993      transparent 60%6994    );6995}69966997/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */6998/* ── Danger cards (Replace + Destroy) ────────────────────────────────────6999 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7000 * (replacing the vault from a backup file) and "hazard" for actions that7001 * are absolutely irreversible (Panic). Both use the same card scaffold so7002 * they read as a pair, but the colour family signals the severity at a7003 * glance — yellow for caution, red for don't.7004 */7005.peach-danger-card {7006  --danger-tint: 235, 158, 52; /* amber */7007  display: flex;7008  flex-direction: column;7009  gap: 8px;7010  padding: 14px;7011  margin-top: 10px;7012  border-radius: 12px;7013  border: 1px solid rgba(var(--danger-tint), 0.32);7014  background:7015    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7016    rgba(var(--danger-tint), 0.04);7017  box-shadow:7018    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7019    0 0 24px rgba(var(--danger-tint), 0.04);7020  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7021}70227023.peach-danger-card:hover {7024  border-color: rgba(var(--danger-tint), 0.55);7025  box-shadow:7026    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7027    0 0 36px rgba(var(--danger-tint), 0.10);7028}70297030.peach-danger-card--hazard {7031  --danger-tint: 220, 38, 38; /* red */7032}70337034.peach-danger-card-head {7035  display: flex;7036  align-items: center;7037  gap: 10px;7038}70397040.peach-danger-card-glyph {7041  width: 28px;7042  height: 28px;7043  flex-shrink: 0;7044  display: flex;7045  align-items: center;7046  justify-content: center;7047  border-radius: 8px;7048  background: rgba(var(--danger-tint), 0.12);7049  color: rgba(var(--danger-tint), 0.95);7050  font-size: 1rem;7051  line-height: 1;7052}70537054.peach-danger-card-title {7055  margin: 0;7056  font-size: 0.8125rem;7057  font-weight: 600;7058  color: rgba(var(--danger-tint), 0.92);7059  letter-spacing: 0.01em;7060}70617062.peach-danger-card-copy {7063  margin: 0;7064  font-size: 0.6875rem;7065  line-height: 1.5;7066  color: var(--peach-t2);7067}70687069.peach-danger-card-button {7070  width: 100%;7071  padding: 9px;7072  margin-top: 4px;7073  background: transparent;7074  border: 1px solid rgba(var(--danger-tint), 0.45);7075  border-radius: 8px;7076  color: rgba(var(--danger-tint), 0.9);7077  font-size: 0.75rem;7078  font-weight: 500;7079  letter-spacing: 0.02em;7080  cursor: pointer;7081  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7082}70837084.peach-danger-card-button:hover {7085  background: rgba(var(--danger-tint), 0.10);7086  border-color: rgba(var(--danger-tint), 0.75);7087  color: rgb(var(--danger-tint));7088}70897090/* ── Panic flow (three-step destruction) ───────────────────────────────── */7091.peach-panic {7092  display: flex;7093  flex-direction: column;7094  flex: 1;7095  min-height: 0;7096  padding: 28px 20px 20px;7097  gap: 18px;7098  overflow-y: auto;7099  scrollbar-width: none;7100  -ms-overflow-style: none;7101}71027103.peach-panic::-webkit-scrollbar { display: none; }71047105.peach-panic-step2 {7106  background: rgba(220, 38, 38, 0.04);7107}71087109.peach-panic-step3 {7110  position: relative;7111  background: #0f0505;7112  color: #ffffff;7113  overflow: hidden;7114}71157116.peach-panic-rune-bg {7117  position: absolute;7118  inset: 0;7119  opacity: 0.22;7120  pointer-events: none;7121  overflow: hidden;7122}71237124.peach-panic-rune-bg canvas {7125  width: 100% !important;7126  height: 100% !important;7127}71287129.peach-panic-icon {7130  font-size: 32px;7131  color: rgb(220, 38, 38);7132  line-height: 1;7133}71347135.peach-panic-title {7136  margin: 0;7137  font-size: 18px;7138  font-weight: 500;7139  color: var(--peach-t1);7140}71417142.peach-panic-title--severe {7143  font-size: 20px;7144  font-weight: 700;7145  color: rgb(220, 38, 38);7146}71477148.peach-panic-body {7149  margin: 0;7150  font-size: 0.8125rem;7151  line-height: 1.55;7152  color: var(--peach-t2);7153}71547155.peach-panic-body--severe {7156  color: rgba(220, 38, 38, 0.85);7157}71587159.peach-panic-body--final {7160  font-size: 1rem;7161  font-weight: 700;7162  color: rgb(255, 80, 80);7163  line-height: 1.4;7164}71657166.peach-panic-body--final-intro {7167  font-size: 1rem;7168  color: #ffffff;7169  font-weight: 400;7170}71717172.peach-panic-divider {7173  height: 1px;7174  background: rgba(255, 255, 255, 0.08);7175  margin: 4px 0;7176}71777178.peach-panic-confirm-input {7179  width: 100%;7180  padding: 10px 12px;7181  background: rgba(255, 255, 255, 0.02);7182  border: 1px solid rgba(220, 38, 38, 0.4);7183  border-radius: 8px;7184  color: var(--peach-t1);7185  font-family: "IBM Plex Mono", monospace;7186  font-size: 0.875rem;7187  letter-spacing: 0.12em;7188  text-transform: uppercase;7189}71907191.peach-panic-confirm-input:focus {7192  outline: none;7193  border-color: rgb(220, 38, 38);7194}71957196.peach-panic-confirm-input--match {7197  border-color: rgb(220, 38, 38);7198  color: rgb(220, 38, 38);7199}72007201.peach-panic-confirm-label {7202  font-size: 0.6875rem;7203  color: var(--peach-t2);7204  margin: 0 0 -8px;7205  letter-spacing: 0.06em;7206}72077208.peach-panic-actions {7209  display: flex;7210  flex-direction: column;7211  gap: 10px;7212  margin-top: auto;7213}72147215.peach-panic-button {7216  width: 100%;7217  padding: 12px;7218  border-radius: 8px;7219  font-size: 0.8125rem;7220  cursor: pointer;7221  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7222}72237224.peach-panic-button--primary {7225  background: var(--peach-accent);7226  border: 1px solid var(--peach-accent);7227  color: #ffffff;7228  font-weight: 600;7229}72307231.peach-panic-button--primary:hover {7232  background: color-mix(in srgb, var(--peach-accent) 88%, white);7233}72347235.peach-panic-button--danger {7236  background: rgb(220, 38, 38);7237  border: 1px solid rgb(220, 38, 38);7238  color: #ffffff;7239  font-weight: 600;7240}72417242.peach-panic-button--danger:disabled {7243  opacity: 0.35;7244  cursor: not-allowed;7245}72467247.peach-panic-button--ghost {7248  background: transparent;7249  border: 1px solid rgba(255, 255, 255, 0.18);7250  color: var(--peach-t2);7251}72527253.peach-panic-button--ghost:hover {7254  border-color: rgba(255, 255, 255, 0.32);7255  color: var(--peach-t1);7256}72577258.peach-panic-link {7259  background: transparent;7260  border: none;7261  padding: 4px 0;7262  color: rgba(220, 38, 38, 0.65);7263  font-size: 0.75rem;7264  cursor: pointer;7265  text-align: left;7266  text-decoration: underline;7267  text-underline-offset: 3px;7268}72697270.peach-panic-link:hover {7271  color: rgb(220, 38, 38);7272}72737274.peach-panic-bar {7275  background: rgb(220, 38, 38);7276  padding: 16px 20px;7277  margin: -28px -20px 0;7278  text-align: center;7279  font-size: 0.8125rem;7280  font-weight: 700;7281  letter-spacing: 0.12em;7282  color: #ffffff;7283}72847285.peach-panic-final-button {7286  width: 100%;7287  padding: 14px;7288  background: rgb(220, 38, 38);7289  border: none;7290  border-radius: 8px;7291  color: #ffffff;7292  font-size: 0.875rem;7293  font-weight: 700;7294  letter-spacing: 0.08em;7295  text-transform: uppercase;7296  cursor: pointer;7297  animation: peach-panic-pulse 2s ease-in-out infinite;7298}72997300.peach-settings-license {7301  margin-top: 10px;7302  padding-top: 10px;7303  border-top: 1px solid var(--peach-t3);7304}73057306.peach-settings-label {7307  font-size: 0.625rem;7308  letter-spacing: 0.08em;7309  color: var(--peach-t3);7310  display: block;7311  margin-bottom: 6px;7312}73137314.peach-settings-license-row {7315  display: flex;7316  align-items: center;7317  justify-content: space-between;7318  gap: 8px;7319}73207321.peach-settings-license-key {7322  font-family: 'IBM Plex Mono', monospace;7323  font-size: 0.75rem;7324  color: var(--peach-t0);7325  letter-spacing: 0.04em;7326  word-break: break-all;7327  flex: 1;7328  min-width: 0;7329}73307331.peach-settings-license-key--masked {7332  font-family: 'IBM Plex Mono', monospace;7333  font-size: 0.6rem;7334  color: var(--peach-t1);7335  letter-spacing: 0.18em;7336  user-select: none;7337}73387339.peach-settings-license-actions {7340  display: flex;7341  align-items: center;7342  gap: 2px;7343  flex-shrink: 0;7344}73457346.peach-settings-license-copy {7347  font-size: 0.6875rem;7348  color: var(--peach-accent);7349  background: transparent;7350  border: none;7351  cursor: pointer;7352  padding: 4px 8px;7353  border-radius: 4px;7354  flex-shrink: 0;7355  transition: opacity 150ms ease;7356}73577358.peach-settings-license-copy:hover {7359  opacity: 0.75;7360}73617362.peach-settings-license-toggle {7363  display: flex;7364  align-items: center;7365  justify-content: center;7366  background: transparent;7367  border: none;7368  cursor: pointer;7369  padding: 4px 6px;7370  border-radius: 4px;7371  color: var(--peach-t2);7372  transition: color 150ms ease;7373}73747375.peach-settings-license-toggle:hover {7376  color: var(--peach-t1);7377}73787379@keyframes peach-panic-pulse {7380  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7381  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7382}73837384[data-motion="reduce"] .peach-panic-final-button {7385  animation: none;7386}73877388/* Vault History — Settings → Vault sub-view */73897390.peach-history-list {7391  border: 1px solid var(--peach-border);7392  border-radius: 8px;7393  overflow: hidden;7394  margin: 8px 0 4px;7395}73967397.peach-history-row {7398  display: flex;7399  align-items: center;7400  justify-content: space-between;7401  padding: 9px 12px;7402  gap: 10px;7403  border-bottom: 1px solid var(--peach-border);7404}74057406.peach-history-row:last-child {7407  border-bottom: none;7408}74097410.peach-history-meta {7411  display: flex;7412  flex-direction: column;7413  gap: 2px;7414  min-width: 0;7415  flex: 1;7416}74177418.peach-history-time {7419  font-size: 0.75rem;7420  font-family: 'IBM Plex Mono', ui-monospace, monospace;7421  color: var(--peach-t0);7422  white-space: nowrap;7423  overflow: hidden;7424  text-overflow: ellipsis;7425}74267427.peach-history-sub {7428  font-size: 0.625rem;7429  color: var(--peach-t2);7430  letter-spacing: 0.06em;7431  text-transform: uppercase;7432  white-space: nowrap;7433  overflow: hidden;7434  text-overflow: ellipsis;7435}74367437.peach-history-btn {7438  flex-shrink: 0;7439  white-space: nowrap;7440  min-width: 56px;7441  text-align: center;7442}74437444.peach-history-btn.is-busy {7445  opacity: 0.65;7446}74477448.peach-history-footer {7449  font-size: 0.625rem;7450  color: var(--peach-t3);7451  letter-spacing: 0.05em;7452  text-align: right;7453  margin: 0;7454  padding: 2px 0 0;7455}74567457/* ── Context menu + swipe-copy flash ─────────────────────── */7458.peach-context-menu-backdrop {7459  position: fixed;7460  inset: 0;7461  background: rgba(0, 0, 0, 0.45);7462  z-index: 100;7463  display: flex;7464  align-items: flex-end;7465  justify-content: center;7466  animation: peach-ctx-fade 140ms ease both;7467}7468.peach-context-menu {7469  width: min(360px, calc(100vw - 24px));7470  margin-bottom: max(env(safe-area-inset-bottom), 12px);7471  background: var(--peach-bg);7472  border: 1px solid var(--peach-t3);7473  border-radius: 14px;7474  padding: 6px;7475  display: flex;7476  flex-direction: column;7477  gap: 2px;7478  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7479  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7480}7481@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7482@keyframes peach-ctx-rise {7483  from { transform: translateY(16px); opacity: 0; }7484  to   { transform: translateY(0);    opacity: 1; }7485}7486.peach-context-menu-item {7487  background: transparent;7488  color: var(--peach-t0);7489  border: 0;7490  border-radius: 10px;7491  padding: 12px 14px;7492  text-align: left;7493  font: inherit;7494  cursor: pointer;7495}7496.peach-context-menu-item:hover,7497.peach-context-menu-item:focus-visible {7498  background: var(--peach-t3);7499}7500.peach-context-menu-item--danger {7501  color: var(--peach-health-bad, #d96868);7502}7503.peach-context-menu-item--cancel {7504  color: var(--peach-t2);7505  margin-top: 4px;7506  border-top: 1px solid var(--peach-t3);7507  border-radius: 0 0 10px 10px;7508}75097510/* Swipe-to-copy flash */7511.peach-entry-row.is-copy-flash {7512  animation: peach-copy-flash 600ms ease both;7513}7514@keyframes peach-copy-flash {7515  0%   { background: transparent; }7516  20%  { background: rgba(217, 153, 51, 0.32); }7517  100% { background: transparent; }7518}75197520html { font-size: 16px; }75217522/* ── Recovery word entry ─────────────────────────────────────────── */7523.peach-lock-recover-link {7524  display: block;7525  width: 100%;7526  margin-top: 12px;7527  background: none;7528  border: none;7529  font-family: "IBM Plex Mono", monospace;7530  font-size: 0.625rem;7531  letter-spacing: 0.06em;7532  color: var(--peach-t2);7533  cursor: pointer;7534  text-align: center;7535  padding: 4px;7536  transition: color 120ms ease;7537}7538.peach-lock-recover-link:hover {7539  color: var(--peach-t0);7540}75417542.lock-screen--recovery {7543  display: flex;7544  flex-direction: column;7545  align-items: stretch;7546  padding: 12px 20px 24px;7547  overflow: hidden;7548}75497550.peach-recovery-nav {7551  display: flex;7552  align-items: center;7553  position: relative;7554  z-index: 1;7555  margin-bottom: 4px;7556}75577558/* Mask runes to the top decorative band only — keep inputs and the7559   bottom CTA button clear. The bottom of the popup is reserved for7560   submit buttons; rendering runes there overlaps the button glyph. */7561.peach-rune-background--recovery {7562  -webkit-mask-image: linear-gradient(7563    to bottom,7564    black 0px, black 85px,7565    transparent 110px,7566    transparent 100%7567  );7568  mask-image: linear-gradient(7569    to bottom,7570    black 0px, black 85px,7571    transparent 110px,7572    transparent 100%7573  );7574}75757576.peach-recovery-header {7577  text-align: center;7578  margin-bottom: 16px;7579  margin-top: 4px;7580}7581.peach-recovery-header .peach-onboarding-headline {7582  font-size: 1.25rem;7583  font-weight: 300;7584  letter-spacing: 0.02em;7585  margin: 0 0 4px;7586}7587.peach-recovery-header .peach-hint {7588  font-family: "IBM Plex Mono", monospace;7589  font-size: 0.625rem;7590  color: var(--peach-t2);7591  letter-spacing: 0.04em;7592  margin: 0;7593}75947595/* 12-word grid: 2 columns × 6 rows */7596.peach-recovery-grid {7597  display: grid;7598  grid-template-columns: repeat(2, 1fr);7599  gap: 12px 20px;7600  width: 100%;7601  margin-bottom: 0;7602}76037604.peach-recovery-word-slot {7605  display: flex;7606  align-items: center;7607  gap: 6px;7608  min-width: 0;7609}76107611.peach-recovery-word-index {7612  font-family: "IBM Plex Mono", monospace;7613  font-size: 0.5rem;7614  color: rgba(255, 255, 255, 0.35);7615  min-width: 14px;7616  flex-shrink: 0;7617  text-align: right;7618  letter-spacing: 0.04em;7619}76207621.peach-recovery-word-input {7622  flex: 1;7623  min-width: 0;7624  background: transparent;7625  border: none;7626  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7627  color: var(--peach-t0);7628  font-family: "IBM Plex Mono", monospace;7629  font-size: 0.6875rem;7630  letter-spacing: 0.06em;7631  padding: 5px 2px 4px;7632  outline: none;7633  text-transform: lowercase;7634  transition: border-color 120ms ease;7635}7636.peach-recovery-word-input::placeholder {7637  color: rgba(255, 255, 255, 0.18);7638}7639.peach-recovery-word-input:focus {7640  border-bottom-color: var(--peach-accent);7641}76427643.peach-recovery-submit {7644  width: 100%;7645  margin-top: auto;7646}76477648.peach-recovery-new-password-form {7649  width: 100%;7650  display: flex;7651  flex-direction: column;7652  gap: 16px;7653  margin-bottom: 8px;7654}7655.peach-recovery-new-password-form .peach-newvault-field {7656  display: flex;7657  flex-direction: column;7658  gap: 4px;7659}76607661/* ── Recovery words display (post-create) ────────────────────────── */7662.lock-screen--recovery-display {7663  display: flex;7664  flex-direction: column;7665  align-items: stretch;7666  padding: 0 20px 20px;7667  min-height: 0;7668  overflow-y: auto;7669}76707671.peach-recovery-words-display {7672  width: 100%;7673  margin-bottom: 16px;7674  border: 1px solid var(--peach-t3);7675  border-radius: 8px;7676  padding: 12px 14px;7677  background: rgba(245, 240, 234, 0.04);7678}76797680.peach-recovery-words-label {7681  font-family: "IBM Plex Mono", monospace;7682  font-size: 0.5rem;7683  letter-spacing: 0.08em;7684  color: var(--peach-t2);7685  text-transform: uppercase;7686  margin-bottom: 10px;7687}76887689.peach-recovery-word-list {7690  list-style: none;7691  margin: 0;7692  padding: 0;7693  display: grid;7694  grid-template-columns: repeat(2, 1fr);7695  gap: 6px 16px;7696}76977698.peach-recovery-word-item {7699  display: flex;7700  align-items: baseline;7701  gap: 5px;7702}77037704.peach-recovery-word-num {7705  font-family: "IBM Plex Mono", monospace;7706  font-size: 0.5rem;7707  color: var(--peach-t2);7708  width: 14px;7709  flex: 0 0 14px;7710  text-align: right;7711  letter-spacing: 0.04em;7712  font-variant-numeric: tabular-nums;7713}77147715.peach-recovery-download-btn {7716  display: block;7717  margin: 10px auto 0;7718  padding: 4px 10px;7719  background: transparent;7720  border: 1px solid var(--peach-border);7721  border-radius: 6px;7722  color: var(--peach-t2);7723  font-family: "IBM Plex Mono", monospace;7724  font-size: 0.5625rem;7725  letter-spacing: 0.06em;7726  text-transform: lowercase;7727  cursor: pointer;7728  transition: border-color 0.15s, color 0.15s;7729}77307731.peach-recovery-download-btn:hover {7732  border-color: var(--peach-accent);7733  color: var(--peach-t0);7734}77357736.peach-recovery-word-text {7737  font-family: "IBM Plex Mono", monospace;7738  font-size: 0.6875rem;7739  letter-spacing: 0.06em;7740  color: var(--peach-t0);7741  text-transform: lowercase;7742}77437744.peach-hint--warning {7745  color: var(--peach-accent);7746  font-style: italic;7747}7748.peach-hint--success {7749  color: var(--peach-t2);7750  font-family: "IBM Plex Mono", monospace;7751  font-size: 0.625rem;7752  letter-spacing: 0.06em;7753}77547755/* Confirmation step */7756.peach-recovery-confirm {7757  width: 100%;7758  flex: 1;7759  display: flex;7760  flex-direction: column;7761}7762.peach-recovery-confirm-label {7763  font-family: "IBM Plex Mono", monospace;7764  font-size: 0.5625rem;7765  letter-spacing: 0.04em;7766  color: var(--peach-t2);7767  text-align: center;7768  margin: 0 0 12px;7769}7770.peach-recovery-confirm-fields {7771  display: flex;7772  flex-direction: column;7773  gap: 14px;7774  margin-bottom: 10px;7775}7776.peach-recovery-confirm-field {7777  display: flex;7778  align-items: center;7779  gap: 8px;7780}7781.peach-recovery-confirm-num {7782  font-family: "IBM Plex Mono", monospace;7783  font-size: 0.5rem;7784  color: var(--peach-t2);7785  min-width: 44px;7786  letter-spacing: 0.04em;7787}7788.peach-recovery-confirm-input {7789  flex: 1;7790  background: transparent;7791  border: none;7792  border-bottom: 1px solid var(--peach-t3);7793  color: var(--peach-t0);7794  font-family: "IBM Plex Mono", monospace;7795  font-size: 0.6875rem;7796  letter-spacing: 0.06em;7797  padding: 4px 2px 3px;7798  outline: none;7799  text-transform: lowercase;7800  transition: border-color 120ms ease;7801}7802.peach-recovery-confirm-input:focus {7803  border-bottom-color: var(--peach-accent);7804}7805.peach-recovery-confirm-input:disabled {7806  opacity: 0.4;7807  cursor: not-allowed;7808}7809.peach-recovery-confirm-btn {7810  width: 100%;7811  margin-top: auto;7812}78137814/* ============================================================7815   Sync info sheet7816   ============================================================ */78177818.peach-sync-info-backdrop {7819  position: fixed;7820  inset: 0;7821  z-index: 200;7822  background: rgba(0, 0, 0, 0.55);7823  display: flex;7824  align-items: flex-end;7825  animation: peach-fade-in 200ms ease forwards;7826}78277828@keyframes peach-fade-in {7829  from { opacity: 0; }7830  to   { opacity: 1; }7831}78327833.peach-sync-info-sheet {7834  width: 100%;7835  background: var(--peach-bg-card, var(--peach-bg));7836  border-top-left-radius: 20px;7837  border-top-right-radius: 20px;7838  padding: 12px 24px 32px;7839  display: flex;7840  flex-direction: column;7841  gap: 20px;7842  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;7843}78447845@keyframes peach-sheet-up {7846  from { transform: translateY(100%); }7847  to   { transform: translateY(0); }7848}78497850.peach-sync-info-handle {7851  width: 36px;7852  height: 4px;7853  border-radius: 2px;7854  background: var(--peach-border);7855  margin: 0 auto 4px;7856  flex-shrink: 0;7857}78587859.peach-sync-info-title {7860  font-family: 'Cormorant Garamond', serif;7861  font-style: italic;7862  font-size: 26px;7863  font-weight: 600;7864  color: var(--peach-t0);7865  margin: 0;7866  line-height: 1.2;7867}78687869.peach-sync-info-body {7870  display: flex;7871  flex-direction: column;7872  gap: 14px;7873}78747875.peach-sync-info-point {7876  display: flex;7877  gap: 12px;7878  align-items: flex-start;7879  font-size: 14px;7880  color: var(--peach-t2);7881  line-height: 1.6;7882  margin: 0;7883}78847885.peach-sync-info-icon {7886  color: var(--peach-accent);7887  font-size: 16px;7888  flex-shrink: 0;7889  margin-top: 1px;7890}78917892.peach-sync-info-actions {7893  display: flex;7894  flex-direction: column;7895  gap: 12px;7896  margin-top: 4px;7897}78987899.peach-sync-info-pro-link {7900  background: none;7901  border: none;7902  font-size: 13px;7903  color: var(--peach-t3);7904  cursor: pointer;7905  padding: 0;7906  font-family: inherit;7907  text-align: center;7908  transition: color 150ms ease;7909}79107911.peach-sync-info-pro-link:hover {7912  color: var(--peach-accent);7913}79147915.peach-btn--full {7916  width: 100%;7917}79187919/* ── Sync screen ── */79207921.peach-sync-coming-soon {7922  display: flex;7923  align-items: flex-start;7924  gap: 10px;7925  padding: 12px 14px;7926  background: var(--peach-s1);7927  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);7928  border-radius: 10px;7929}7930.peach-sync-coming-soon__icon {7931  flex-shrink: 0;7932  color: var(--peach-accent);7933  margin-top: 1px;7934  line-height: 0;7935}7936.peach-sync-coming-soon__title {7937  font-family: 'Cormorant Garamond', serif;7938  font-weight: 500;7939  font-size: 13px;7940  color: var(--peach-accent);7941  margin: 0 0 5px;7942  line-height: 1.3;7943}7944.peach-sync-coming-soon__body {7945  font-size: 12px;7946  color: var(--peach-t1);7947  line-height: 1.55;7948  margin: 0;7949}79507951.peach-sync-screen {7952  display: flex;7953  flex-direction: column;7954  height: 100%;7955}79567957.peach-sync-content {7958  flex: 1;7959  overflow-y: auto;7960  padding: 24px 20px 40px;7961  display: flex;7962  flex-direction: column;7963  gap: 24px;7964}79657966/* Intro (State A) */7967.peach-sync-headline {7968  font-family: 'Cormorant Garamond', serif;7969  font-style: italic;7970  font-size: 28px;7971  font-weight: 600;7972  color: var(--peach-t0);7973  margin: 0 0 10px;7974  line-height: 1.2;7975}79767977.peach-sync-intro-body {7978  font-size: 14px;7979  color: var(--peach-t1);7980  line-height: 1.6;7981  margin: 0;7982}79837984.peach-sync-pro-note {7985  display: flex;7986  flex-direction: column;7987  gap: 8px;7988  background: var(--peach-t3);7989  border-radius: 10px;7990  padding: 12px 14px;7991}79927993.peach-sync-pro-note-text {7994  font-size: 12px;7995  color: var(--peach-t2);7996  line-height: 1.5;7997  margin: 0;7998}79998000.peach-sync-pro-link {8001  background: none;8002  border: none;8003  font-size: 12px;8004  color: var(--peach-accent);8005  cursor: pointer;8006  padding: 0;8007  font-family: inherit;8008  text-align: left;8009}80108011/* Status (State C) */8012.peach-sync-status {8013  padding: 12px 0;8014  border-bottom: 1px solid var(--peach-border);8015}80168017.peach-sync-status-row {8018  display: flex;8019  align-items: center;8020  gap: 8px;8021}80228023.peach-sync-dot {8024  width: 7px;8025  height: 7px;8026  border-radius: 50%;8027  flex-shrink: 0;8028}80298030.peach-sync-dot--green { background: var(--peach-health-ok); }8031.peach-sync-dot--amber { background: var(--peach-accent); }80328033.peach-sync-status-text {8034  font-family: 'IBM Plex Mono', monospace;8035  font-size: 11px;8036  color: var(--peach-t2);8037}80388039/* Paired devices */8040.peach-sync-section {8041  display: flex;8042  flex-direction: column;8043  gap: 2px;8044}80458046.peach-sync-section-label {8047  font-family: 'IBM Plex Mono', monospace;8048  font-size: 10px;8049  letter-spacing: 0.1em;8050  color: var(--peach-t3);8051  margin: 0 0 10px;8052}80538054.peach-sync-device-row {8055  display: flex;8056  justify-content: space-between;8057  align-items: baseline;8058  padding: 10px 0;8059  border-bottom: 1px solid var(--peach-border);8060  gap: 12px;8061}80628063.peach-sync-device-name {8064  font-size: 14px;8065  color: var(--peach-t1);8066}80678068.peach-sync-device-meta {8069  font-family: 'IBM Plex Mono', monospace;8070  font-size: 11px;8071  color: var(--peach-t3);8072  white-space: nowrap;8073}80748075.peach-sync-hub-note {8076  padding: 14px 16px;8077  border: 1px solid var(--peach-border);8078  border-radius: 10px;8079  display: flex;8080  flex-direction: column;8081  gap: 6px;8082  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8083}80848085.peach-sync-hub-note-title {8086  font-size: 13px;8087  font-weight: 600;8088  color: var(--peach-t0);8089  margin: 0;8090}80918092.peach-sync-hub-note-body {8093  font-size: 12px;8094  color: var(--peach-t2);8095  line-height: 1.6;8096  margin: 0;8097}80988099/* Action buttons */8100.peach-sync-actions {8101  display: flex;8102  gap: 10px;8103  flex-wrap: wrap;8104}81058106/* Upgrade prompt (State B) */8107.peach-sync-upgrade {8108  display: flex;8109  flex-direction: column;8110  gap: 12px;8111  padding: 16px;8112  border: 1px solid var(--peach-border);8113  border-radius: 10px;8114}81158116.peach-sync-upgrade-text {8117  font-size: 13px;8118  color: var(--peach-t2);8119  line-height: 1.6;8120  margin: 0;8121}81228123/* Network note */8124.peach-sync-network-note {8125  font-size: 12px;8126  color: var(--peach-t3);8127  line-height: 1.6;8128  margin: 0;8129}81308131/* Advanced */8132.peach-sync-advanced {8133  margin-top: auto;8134  padding-top: 16px;8135  border-top: 1px solid var(--peach-border);8136}81378138.peach-sync-advanced-toggle {8139  display: flex;8140  align-items: center;8141  gap: 8px;8142  background: none;8143  border: none;8144  font-family: 'IBM Plex Mono', monospace;8145  font-size: 11px;8146  letter-spacing: 0.08em;8147  color: var(--peach-t3);8148  cursor: pointer;8149  padding: 0;8150  text-transform: uppercase;8151}81528153.peach-sync-advanced-chevron {8154  display: inline-block;8155  transition: transform 200ms ease;8156  font-size: 10px;8157}81588159.peach-sync-advanced-chevron.is-open {8160  transform: rotate(90deg);8161}81628163.peach-sync-advanced-content {8164  margin-top: 14px;8165}81668167.peach-sync-advanced-row {8168  display: flex;8169  justify-content: space-between;8170  align-items: center;8171  gap: 16px;8172}81738174.peach-sync-advanced-title {8175  font-size: 14px;8176  color: var(--peach-t1);8177  margin: 0 0 2px;8178}81798180.peach-sync-advanced-subtitle {8181  font-size: 12px;8182  color: var(--peach-t3);8183  margin: 0;8184  line-height: 1.5;8185}81868187/* ── Add Device — Android scan tabs ─────────────────────────────────────── */81888189.peach-pairing-tabs {8190  display: flex;8191  border: 1px solid var(--peach-border);8192  border-radius: 8px;8193  overflow: hidden;8194  margin-bottom: 4px;8195}81968197.peach-pairing-tab {8198  flex: 1;8199  padding: 10px 0;8200  background: none;8201  border: none;8202  font-family: 'IBM Plex Mono', monospace;8203  font-size: 11px;8204  letter-spacing: 0.06em;8205  color: var(--peach-t2);8206  cursor: pointer;8207  transition: background 150ms, color 150ms;8208}82098210.peach-pairing-tab.is-active {8211  background: var(--peach-accent);8212  color: #fff;8213  font-weight: 600;8214}82158216.peach-pairing-tab:not(.is-active):active {8217  background: var(--peach-border);8218}82198220/* Camera view */8221.peach-pairing-camera-container {8222  position: relative;8223  width: 100%;8224  aspect-ratio: 1;8225  border-radius: 12px;8226  overflow: hidden;8227  background: #000;8228  flex-shrink: 0;8229}82308231.peach-pairing-video {8232  width: 100%;8233  height: 100%;8234  object-fit: cover;8235}82368237.peach-pairing-scan-frame {8238  position: absolute;8239  top: 50%;8240  left: 50%;8241  transform: translate(-50%, -50%);8242  width: 60%;8243  aspect-ratio: 1;8244  border: 2px solid var(--peach-accent);8245  border-radius: 8px;8246  pointer-events: none;8247}82488249/* ── Notes Mode ── */82508251/* Overlay that crossfades over the vault */8252.peach-notes-overlay {8253  position: fixed;8254  inset: 0;8255  z-index: 90;8256  opacity: 0;8257  pointer-events: none;8258  animation: peach-mode-in 220ms ease-in forwards;8259}82608261.peach-notes-overlay.is-visible {8262  opacity: 1;8263  pointer-events: auto;8264}82658266@keyframes peach-mode-in {8267  from { opacity: 0; }8268  to   { opacity: 1; }8269}82708271/* Top-level notes surface */8272.peach-notes-mode {8273  position: absolute;8274  inset: 0;8275  background: var(--peach-bg);8276  display: flex;8277  flex-direction: column;8278}82798280/* Rune canvas positioned behind content */8281.peach-note-rune-canvas {8282  position: absolute;8283  inset: 0;8284  width: 100%;8285  height: 100%;8286  pointer-events: none;8287  z-index: 0;8288}82898290/* TOC wrapper */8291.peach-notes-toc-wrapper {8292  position: absolute;8293  inset: 0;8294  z-index: 1;8295  opacity: 1;8296  pointer-events: auto;8297  transition: opacity 200ms ease;8298}82998300.peach-notes-toc-wrapper.is-hidden {8301  opacity: 0;8302  pointer-events: none;8303}83048305/* Editor wrapper */8306.peach-notes-editor-wrapper {8307  position: absolute;8308  inset: 0;8309  z-index: 2;8310  opacity: 0;8311  pointer-events: none;8312  transition: opacity 200ms ease;8313}83148315.peach-notes-editor-wrapper.is-visible {8316  opacity: 1;8317  pointer-events: auto;8318}83198320/* TOC inner */8321.peach-notes-toc {8322  position: relative;8323  display: flex;8324  flex-direction: column;8325  height: 100%;8326  padding-top: env(safe-area-inset-top, 0px);8327  padding-bottom: env(safe-area-inset-bottom, 0px);8328}83298330/* Shared header */8331.peach-notes-header {8332  display: flex;8333  align-items: center;8334  padding: 12px 16px;8335  gap: 12px;8336  flex-shrink: 0;8337  min-height: 52px;8338  position: relative;8339  z-index: 2;8340}83418342.peach-notes-back {8343  font-size: 22px;8344  color: var(--peach-t2);8345  background: none;8346  border: none;8347  padding: 4px;8348  cursor: pointer;8349  line-height: 1;8350  flex-shrink: 0;8351  transition: color 150ms ease;8352  -webkit-tap-highlight-color: transparent;8353}83548355.peach-notes-back:active { color: var(--peach-t0); }83568357.peach-notes-header-title {8358  flex: 1;8359  font-family: 'Cormorant Garamond', serif;8360  font-style: italic;8361  font-size: 22px;8362  color: var(--peach-t0);8363  text-align: center;8364}83658366.peach-notes-header-title.is-breadcrumb {8367  font-family: 'IBM Plex Mono', monospace;8368  font-style: normal;8369  font-size: 11px;8370  color: var(--peach-t3);8371  letter-spacing: 0.08em;8372  text-transform: uppercase;8373  cursor: pointer;8374}83758376.peach-notes-header-actions {8377  display: flex;8378  gap: 8px;8379  flex-shrink: 0;8380}83818382.peach-notes-header-btn {8383  width: 36px;8384  height: 36px;8385  display: flex;8386  align-items: center;8387  justify-content: center;8388  background: none;8389  border: none;8390  color: var(--peach-t2);8391  cursor: pointer;8392  border-radius: 8px;8393  font-size: 16px;8394  transition: color 150ms ease, background 150ms ease;8395  -webkit-tap-highlight-color: transparent;8396}83978398.peach-notes-header-btn:active {8399  background: rgba(255,255,255,0.06);8400  color: var(--peach-t0);8401}84028403/* Inline search bar */8404.peach-notes-search-input {8405  flex: 1;8406  background: none;8407  border: none;8408  outline: none;8409  font-family: 'IBM Plex Mono', monospace;8410  font-size: 13px;8411  color: var(--peach-t0);8412  padding: 4px 0;8413  letter-spacing: 0.02em;8414}84158416.peach-notes-search-input::placeholder {8417  color: var(--peach-t3);8418}84198420/* TOC list */8421.peach-notes-list-container {8422  flex: 1;8423  overflow-y: auto;8424  overflow-x: hidden;8425  scrollbar-width: none;8426  -webkit-overflow-scrolling: touch;8427  overscroll-behavior: contain;8428  position: relative;8429  z-index: 1;8430}84318432.peach-notes-list-container::-webkit-scrollbar { display: none; }84338434/* Note row */8435.peach-note-row {8436  position: relative;8437  display: grid;8438  grid-template-columns: 44px 8px 1fr 8px auto;8439  align-items: center;8440  min-height: 72px;8441  padding: 16px 20px;8442  border-bottom: 0.5px solid var(--peach-border);8443  cursor: pointer;8444  overflow: hidden;8445  touch-action: pan-y;8446  user-select: none;8447  -webkit-user-select: none;8448  -webkit-tap-highlight-color: transparent;8449}84508451.peach-note-row:first-child {8452  border-top: 0.5px solid var(--peach-border);8453}84548455.peach-note-row:active {8456  background: rgba(255,255,255,0.02);8457}84588459.peach-note-numeral {8460  font-family: 'Cormorant Garamond', serif;8461  font-style: italic;8462  font-size: 15px;8463  color: var(--peach-accent);8464  text-align: right;8465  line-height: 1;8466  flex-shrink: 0;8467}84688469.peach-note-title-gap { /* grid spacer */ }84708471.peach-note-title {8472  font-family: 'Cormorant Garamond', serif;8473  font-style: italic;8474  font-size: 18px;8475  color: var(--peach-t0);8476  line-height: 1.3;8477  min-width: 0;8478  overflow-wrap: break-word;8479}84808481.peach-note-title-match {8482  color: var(--peach-accent);8483}84848485.peach-note-date {8486  font-family: 'IBM Plex Mono', monospace;8487  font-size: 11px;8488  color: var(--peach-t2);8489  white-space: nowrap;8490  text-align: right;8491  flex-shrink: 0;8492  grid-column: 5;8493}84948495/* Swipe underlays */8496.peach-note-row-underlay {8497  position: absolute;8498  inset: 0;8499  display: flex;8500  align-items: center;8501  padding: 0 24px;8502  font-family: 'IBM Plex Mono', monospace;8503  font-size: 11px;8504  letter-spacing: 0.1em;8505  pointer-events: none;8506  z-index: 0;8507}85088509.peach-note-row-underlay--delete {8510  background: #8B2020;8511  color: rgba(255,255,255,0.9);8512  justify-content: flex-end;8513}85148515.peach-note-row-underlay--archive {8516  background: var(--peach-accent);8517  color: #0C0A06;8518  justify-content: flex-start;8519}85208521/* Delete confirm strip */8522.peach-note-delete-confirm {8523  position: absolute;8524  inset: 0;8525  background: var(--peach-bg);8526  display: flex;8527  align-items: center;8528  gap: 12px;8529  padding: 0 20px;8530  font-family: 'IBM Plex Mono', monospace;8531  font-size: 11px;8532  color: var(--peach-t1);8533  letter-spacing: 0.04em;8534  animation: peach-delete-confirm-in 150ms ease both;8535  z-index: 10;8536}85378538@keyframes peach-delete-confirm-in {8539  from { opacity: 0; }8540  to   { opacity: 1; }8541}85428543.peach-note-delete-confirm-btn {8544  background: #8B2020;8545  color: rgba(255,255,255,0.9);8546  border: none;8547  border-radius: 6px;8548  padding: 4px 10px;8549  font-family: 'IBM Plex Mono', monospace;8550  font-size: 10px;8551  cursor: pointer;8552  letter-spacing: 0.06em;8553}85548555.peach-note-delete-cancel-btn {8556  background: none;8557  border: none;8558  color: var(--peach-t3);8559  font-family: 'IBM Plex Mono', monospace;8560  font-size: 10px;8561  cursor: pointer;8562  letter-spacing: 0.06em;8563  padding: 4px 6px;8564}85658566/* + New note button */8567.peach-notes-new-btn {8568  font-family: 'IBM Plex Mono', monospace;8569  font-size: 12px;8570  color: var(--peach-t3);8571  text-align: center;8572  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8573  background: none;8574  border: none;8575  width: 100%;8576  cursor: pointer;8577  letter-spacing: 0.04em;8578  transition: color 150ms ease;8579  -webkit-tap-highlight-color: transparent;8580}85818582.peach-notes-new-btn:active { color: var(--peach-accent); }85838584/* Empty state */8585.peach-notes-empty {8586  display: flex;8587  flex-direction: column;8588  align-items: center;8589  justify-content: center;8590  flex: 1;8591  padding: 48px 32px;8592  gap: 16px;8593}85948595.peach-notes-empty-text {8596  font-family: 'Cormorant Garamond', serif;8597  font-style: italic;8598  font-size: 20px;8599  color: var(--peach-t3);8600  text-align: center;8601  margin: 0;8602  line-height: 1.4;8603  white-space: pre-line;8604}86058606/* ── Editor surface ── */86078608.peach-note-editor-surface {8609  position: absolute;8610  inset: 0;8611  background: var(--peach-bg);8612  display: flex;8613  flex-direction: column;8614  padding-top: env(safe-area-inset-top, 0px);8615}86168617.peach-note-editor-scroll {8618  flex: 1;8619  overflow-y: auto;8620  overflow-x: hidden;8621  scrollbar-width: none;8622  -webkit-overflow-scrolling: touch;8623  padding: 0 24px 120px;8624  position: relative;8625  z-index: 1;8626}86278628.peach-note-editor-scroll::-webkit-scrollbar { display: none; }86298630/* Desktop toolbar (always visible above body) */8631.peach-note-toolbar-desktop-inline {8632  display: flex;8633  align-items: center;8634  gap: 2px;8635  padding: 6px 0 12px;8636  margin-bottom: 4px;8637  border-bottom: 0.5px solid var(--peach-border);8638}86398640/* Title field */8641.peach-note-title-field {8642  font-family: 'Cormorant Garamond', serif;8643  font-style: italic;8644  font-size: 32px;8645  font-weight: 600;8646  color: var(--peach-t0);8647  line-height: 1.2;8648  padding: 8px 0 0;8649  outline: none;8650  min-height: 44px;8651  word-break: break-word;8652  position: relative;8653  z-index: 1;8654}86558656.peach-note-title-field:empty::before {8657  content: attr(data-placeholder);8658  color: var(--peach-t3);8659  pointer-events: none;8660}86618662/* Hairline separator */8663.peach-note-hairline {8664  height: 0.5px;8665  background: var(--peach-border);8666  margin: 12px 0 20px;8667  position: relative;8668  z-index: 1;8669}86708671/* Body field */8672.peach-note-body-field {8673  font-family: 'DM Sans', sans-serif;8674  font-size: 16px;8675  color: var(--peach-t0);8676  line-height: 1.85;8677  padding: 0;8678  outline: none;8679  min-height: 240px;8680  word-break: break-word;8681  position: relative;8682  z-index: 1;8683}86848685.peach-note-body-field:empty::before {8686  content: attr(data-placeholder);8687  color: var(--peach-t3);8688  font-style: italic;8689  pointer-events: none;8690}86918692.peach-note-body-field h2 {8693  font-family: 'Cormorant Garamond', serif;8694  font-style: italic;8695  font-size: 22px;8696  font-weight: 600;8697  color: var(--peach-t0);8698  margin: 20px 0 8px;8699}87008701.peach-note-body-field blockquote {8702  border-left: 2px solid var(--peach-accent);8703  margin: 12px 0;8704  padding-left: 16px;8705  color: var(--peach-t1);8706  font-style: italic;8707}87088709.peach-note-body-field ul,8710.peach-note-body-field ol {8711  padding-left: 20px;8712  margin: 8px 0;8713}87148715.peach-note-body-field li {8716  margin: 4px 0;8717}87188719.peach-note-body-field hr {8720  border: none;8721  border-top: 0.5px solid var(--peach-border);8722  margin: 16px 0;8723}87248725/* Saved indicator */8726.peach-note-saved-indicator {8727  font-family: 'IBM Plex Mono', monospace;8728  font-size: 11px;8729  color: var(--peach-t3);8730  letter-spacing: 0.04em;8731  text-align: right;8732  padding: 6px 24px;8733  flex-shrink: 0;8734  transition: opacity 300ms ease;8735  pointer-events: none;8736  position: relative;8737  z-index: 1;8738}87398740/* Mobile keyboard toolbar */8741.peach-note-toolbar-mobile {8742  display: flex;8743  align-items: center;8744  padding: 8px 16px;8745  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));8746  background: var(--peach-bg);8747  border-top: 0.5px solid var(--peach-border);8748  gap: 4px;8749  flex-shrink: 0;8750  position: relative;8751  z-index: 10;8752}87538754.peach-note-toolbar-btn {8755  min-width: 36px;8756  height: 36px;8757  display: flex;8758  align-items: center;8759  justify-content: center;8760  background: none;8761  border: none;8762  border-radius: 8px;8763  cursor: pointer;8764  font-size: 14px;8765  color: var(--peach-t1);8766  font-family: 'DM Sans', sans-serif;8767  font-weight: 600;8768  transition: background 100ms ease, color 100ms ease;8769  -webkit-tap-highlight-color: transparent;8770}87718772.peach-note-toolbar-btn--italic { font-style: italic; }8773.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }8774.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }87758776.peach-note-toolbar-divider {8777  width: 0.5px;8778  height: 20px;8779  background: var(--peach-border);8780  margin: 0 4px;8781  flex-shrink: 0;8782}87838784.peach-note-toolbar-spacer { flex: 1; }87858786/* Desktop: larger headline in TOC */8787@media (min-width: 400px) {8788  .peach-notes-header-title:not(.is-breadcrumb) {8789    font-size: 32px;8790  }87918792  .peach-note-row {8793    min-height: 64px;8794    padding: 14px 16px;8795  }8796}87978798/* Flying title — shared element during expansion/collapse */87998800/* ─── Light theme overrides ───────────────────────────────────────────────8801   Tokens that cannot be expressed as variable substitutions — hardcoded8802   context-specific values that need separate light-mode rules. */88038804/* Settings section headers: use text-label (#79766F) per restoration brief —8805   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY8806   presence without fighting the light parchment background. */8807.light .peach-settings-sub-label,8808[data-theme="light"] .peach-settings-sub-label,8809.light .peach-settings-nav-label,8810[data-theme="light"] .peach-settings-nav-label {8811  color: #79766F;8812}88138814/* Secondary action buttons (ghost / subtle): filled with input-well surface8815   so they read as recessed against the parchment card background. */8816.light .peach-btn--ghost:not(.peach-icon-btn),8817[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {8818  background: #EEE7DD;8819  border-color: #DDD5CB;8820  color: #1A1208;8821}8822.light .peach-icon-btn,8823[data-theme="light"] .peach-icon-btn {8824  background: transparent;8825  border-color: transparent;8826}8827.light .peach-btn--subtle,8828[data-theme="light"] .peach-btn--subtle {8829  background: #EEE7DD;8830  border-color: #DDD5CB;8831}88328833/* Wide secondary action button on the lock screen — override the8834   hardcoded dark-mode rgba values with warm parchment equivalents. */8835.light .peach-lock-secondary,8836[data-theme="light"] .peach-lock-secondary {8837  background: #EEE7DD;8838  border-color: #DDD5CB;8839  color: #1A1208;8840}8841.light .peach-lock-secondary:hover,8842[data-theme="light"] .peach-lock-secondary:hover {8843  background: #F0E9DF;8844}88458846/* Entry row hover: bg-row lifts the row above the card surface. */8847.light .peach-entry-row:hover,8848[data-theme="light"] .peach-entry-row:hover {8849  background: #F2EBE1;8850}8851.light .peach-entry-row.is-active,8852[data-theme="light"] .peach-entry-row.is-active {8853  background: #F2EBE1;8854}8855.light .peach-entry-row.is-selected,8856[data-theme="light"] .peach-entry-row.is-selected {8857  background: #F5EDE2;8858}88598860/* ──────────────────────────────────────────────────────────────────────────8861   Chirp pairing flow — bird-stage animation (Phase 1)8862   See src/popup/components/ChirpPairingFlow.tsx and the brief §6.2.8863   Three-act animation gated on the [data-phase] attribute of8864   .peach-chirp-pair; child layers (birds, chirp arcs, flight wave, dot)8865   each react via either pose class or visibility flag.8866   Tokens: accent surfaces use var(--peach-accent); bird illustration8867   colours are baked into the SVG per the brand-peach exception in §3.1.8868   ────────────────────────────────────────────────────────────────────── */88698870.peach-chirp-pair {8871  position: absolute;8872  inset: 0;8873  z-index: 3;8874  display: flex;8875  flex-direction: column;8876  padding: 14px 12px 12px;8877  width: 100%;8878  box-sizing: border-box;8879  gap: 0;8880  background:8881    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),8882    var(--peach-bg);8883  color: var(--peach-t0);8884  overflow-y: auto;8885  overflow-x: hidden;8886  scrollbar-width: none;8887  isolation: isolate;8888  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;8889}8890@keyframes peach-chirp-overlay-in {8891  from { opacity: 0; transform: translateY(8px); }8892  to   { opacity: 1; transform: translateY(0); }8893}8894.peach-chirp-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }8895.peach-chirp-pair::before {8896  content: '';8897  position: absolute;8898  inset: 0;8899  border-radius: inherit;8900  pointer-events: none;8901  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);8902  z-index: 0;8903}8904.peach-chirp-pair > * { position: relative; z-index: 1; }89058906/* Header --------------------------------------------------------------- */8907.peach-chirp-head {8908  display: flex; align-items: center; gap: 10px;8909}8910.peach-chirp-back {8911  width: 32px; height: 32px;8912  display: inline-flex; align-items: center; justify-content: center;8913  background: transparent;8914  border: none;8915  border-radius: 8px;8916  color: var(--peach-t1);8917  cursor: pointer;8918  transition: color 0.15s ease, box-shadow 0.15s ease;8919}8920.peach-chirp-back:hover {8921  color: var(--peach-accent);8922  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);8923}8924.peach-chirp-title {8925  font-family: var(--font-display, Georgia, serif);8926  font-style: italic;8927  font-size: 24px;8928  font-weight: 500;8929  letter-spacing: 0.005em;8930  color: var(--peach-t0);8931  line-height: 1;8932}8933.peach-chirp-head-spacer { flex: 1; }89348935/* Chip row ------------------------------------------------------------- */8936.peach-chirp-chip-row {8937  display: flex;8938  align-items: center;8939  justify-content: flex-start;8940  margin-top: 12px;8941}8942.peach-chirp-chip {8943  display: inline-flex; align-items: center; gap: 8px;8944  padding: 5px 10px 5px 8px;8945  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);8946  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);8947  border-radius: 999px;8948  font-family: var(--peach-mono, ui-monospace, monospace);8949  font-size: 11px;8950  letter-spacing: 0.04em;8951  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));8952}8953.peach-chirp-chip-dot {8954  width: 6px; height: 6px; border-radius: 50%;8955  background: var(--peach-accent);8956  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);8957}8958.peach-chirp-chip[data-phase="paired"] {8959  background: color-mix(in srgb, #4f9eda 12%, transparent);8960  border-color: color-mix(in srgb, #4f9eda 28%, transparent);8961  color: #76b6e8;8962}8963.peach-chirp-chip[data-phase="paired"] .peach-chirp-chip-dot {8964  background: #76b6e8;8965  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);8966}8967.peach-chirp-chip[data-phase="timeout"],8968.peach-chirp-chip[data-phase="mic_denied"],8969.peach-chirp-chip[data-phase="version_mismatch"],8970.peach-chirp-chip[data-phase="handshake_failed"] {8971  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);8972  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);8973  color: var(--peach-warn, #d29257);8974}8975.peach-chirp-chip[data-phase="timeout"] .peach-chirp-chip-dot,8976.peach-chirp-chip[data-phase="mic_denied"] .peach-chirp-chip-dot,8977.peach-chirp-chip[data-phase="version_mismatch"] .peach-chirp-chip-dot,8978.peach-chirp-chip[data-phase="handshake_failed"] .peach-chirp-chip-dot {8979  background: var(--peach-warn, #d29257);8980  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);8981}89828983/* Bird stage ----------------------------------------------------------- */8984.peach-chirp-stage {8985  position: relative;8986  margin: 14px 0 8px;8987  height: 180px;8988  border-radius: 12px;8989  background:8990    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),8991    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),8992    color-mix(in srgb, var(--peach-bg) 92%, #000);8993  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);8994  overflow: hidden;8995  isolation: isolate;8996}8997.peach-chirp-stage::after {8998  content: '';8999  position: absolute;9000  left: 12%; right: 12%;9001  bottom: 36px;9002  height: 1px;9003  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9004}90059006.peach-chirp-bird-slot {9007  position: absolute;9008  bottom: 8px;9009  width: 100px;9010  height: 110px;9011  display: flex;9012  align-items: flex-end;9013  justify-content: center;9014}9015.peach-chirp-bird-slot-desktop { left: 28px; }9016.peach-chirp-bird-slot-mobile { right: 28px; }90179018/* Mobile bird hops in from the right when handshake begins */9019.peach-chirp-bird-slot-mobile {9020  opacity: 1;9021  transform: translateX(-6px);9022  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9023}9024.peach-chirp-stage.act-listening .peach-chirp-bird-slot-mobile,9025.peach-chirp-stage.act-chirping .peach-chirp-bird-slot-mobile,9026.peach-chirp-stage.act-idle .peach-chirp-bird-slot-mobile {9027  opacity: 0;9028  transform: translateX(60px) rotate(8deg);9029}9030.peach-chirp-stage.act-handshake .peach-chirp-bird-slot-desktop,9031.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop {9032  transform: translateX(6px);9033  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9034}90359036/* Paired: both birds bob together */9037.peach-chirp-stage.act-paired .peach-chirp-bird-slot {9038  animation: peach-chirp-happy-bob 1.2s ease-in-out infinite;9039}9040.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { animation-delay: 0.2s; }9041.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop { --bb-x: 6px; }9042.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { --bb-x: -6px; }9043@keyframes peach-chirp-happy-bob {9044  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9045  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9046}90479048/* Bird internal -------------------------------------------------------- */9049.peach-chirp-bird {9050  width: 108px;9051  height: 108px;9052  transform-origin: 50% 95%;9053}9054.peach-chirp-bird svg { width: 100%; height: 100%; overflow: visible; }90559056.peach-chirp-bird-body {9057  transform-origin: 50% 80%;9058  animation: peach-chirp-bird-bob 2.4s ease-in-out infinite;9059}9060@keyframes peach-chirp-bird-bob {9061  0%, 100% { transform: translateY(0) scale(1, 1); }9062  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9063}90649065.peach-chirp-bird-eye-group {9066  animation: peach-chirp-blink 5.2s steps(1, end) infinite;9067  transform-origin: center;9068  transform-box: fill-box;9069}9070@keyframes peach-chirp-blink {9071  0%, 92%, 96%, 100% { transform: scaleY(1); }9072  94%                { transform: scaleY(0.05); }9073}90749075/* Pose: chirping — beak opens, head bobs, aura blooms */9076.peach-chirp-bird-pose-chirping .peach-chirp-bird-body {9077  animation:9078    peach-chirp-bird-bob 2.4s ease-in-out infinite,9079    peach-chirp-squeeze 1.7s ease-in-out infinite;9080}9081@keyframes peach-chirp-squeeze {9082  0%, 70%, 100% { transform-origin: 50% 85%; }9083  78%           { transform: scale(1.04, 0.96) translateY(1px); }9084  86%           { transform: scale(0.98, 1.02); }9085}9086.peach-chirp-bird-pose-chirping .peach-chirp-bird-head-group {9087  animation: peach-chirp-head-bob 1.7s ease-in-out infinite;9088}9089@keyframes peach-chirp-head-bob {9090  0%, 70%, 100% { transform: translateY(0) rotate(0); }9091  78%           { transform: translateY(-3px) rotate(-4deg); }9092  86%           { transform: translateY(-1px) rotate(-2deg); }9093}9094.peach-chirp-bird-pose-chirping .peach-chirp-bird-beak {9095  animation: peach-chirp-beak-open 1.7s ease-in-out infinite;9096}9097@keyframes peach-chirp-beak-open {9098  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9099  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9100  86%           { transform: rotate(-6deg); }9101}9102.peach-chirp-bird-pose-chirping .peach-chirp-bird-aura {9103  animation: peach-chirp-aura 1.7s ease-in-out infinite;9104}9105@keyframes peach-chirp-aura {9106  0%, 100% { opacity: 0; }9107  50%      { opacity: 0.8; }9108}9109.peach-chirp-bird-pose-chirping .peach-chirp-bird-tail {9110  animation: peach-chirp-tail-twitch 1.7s ease-in-out infinite;9111  transform-origin: 100% 50%;9112}9113@keyframes peach-chirp-tail-twitch {9114  0%, 75%, 100% { transform: rotate(0); }9115  82%           { transform: rotate(-3deg) translateX(-1px); }9116}91179118/* Pose: attentive — head tilts toward partner */9119.peach-chirp-bird-pose-attentive .peach-chirp-bird-head-group {9120  animation: peach-chirp-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9121}9122@keyframes peach-chirp-head-tilt {9123  0%   { transform: rotate(0) translateY(0); }9124  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9125  100% { transform: rotate(-6deg); }9126}9127.peach-chirp-bird-pose-attentive .peach-chirp-bird-tail {9128  animation: peach-chirp-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9129  transform-origin: 100% 50%;9130}9131@keyframes peach-chirp-tail-cock {9132  0%   { transform: rotate(0); }9133  100% { transform: rotate(-4deg); }9134}91359136/* Pose: happy — wing flutter, tuft perk, tail wag */9137.peach-chirp-bird-pose-happy .peach-chirp-bird-wing {9138  transform-origin: 80% 60%;9139  animation: peach-chirp-wing-flutter 0.32s ease-in-out 5;9140}9141@keyframes peach-chirp-wing-flutter {9142  0%, 100% { transform: rotate(0) translateY(0); }9143  50%      { transform: rotate(-16deg) translateY(-2px); }9144}9145.peach-chirp-bird-pose-happy .peach-chirp-bird-tuft {9146  transform-origin: 0% 100%;9147  animation: peach-chirp-tuft-perk 0.4s ease-in-out 3;9148}9149@keyframes peach-chirp-tuft-perk {9150  0%, 100% { transform: rotate(0); }9151  50%      { transform: rotate(-15deg) translateY(-1px); }9152}9153.peach-chirp-bird-pose-happy .peach-chirp-bird-tail {9154  transform-origin: 100% 50%;9155  animation: peach-chirp-tail-wag 0.5s ease-in-out 4;9156}9157@keyframes peach-chirp-tail-wag {9158  0%, 100% { transform: rotate(0); }9159  25%      { transform: rotate(6deg); }9160  75%      { transform: rotate(-6deg); }9161}9162.peach-chirp-bird-pose-happy .peach-chirp-bird-head-group {9163  animation: peach-chirp-head-perk 0.5s ease-out;9164}9165@keyframes peach-chirp-head-perk {9166  0%   { transform: translateY(0); }9167  40%  { transform: translateY(-3px) rotate(2deg); }9168  100% { transform: translateY(0); }9169}91709171/* Pose: sad — body droops forward */9172.peach-chirp-bird-pose-sad .peach-chirp-bird-body {9173  transform: translateY(5px) rotate(-2deg);9174  animation: none;9175}9176.peach-chirp-bird-pose-sad .peach-chirp-bird-head-group {9177  transform: translateY(4px) rotate(8deg);9178}9179.peach-chirp-bird-pose-sad .peach-chirp-bird-tuft { transform: rotate(15deg) translateY(2px); }9180.peach-chirp-bird-pose-sad .peach-chirp-bird-tail { transform: rotate(8deg) translateY(2px); }91819182.peach-chirp-bird-pose-hidden { opacity: 0; }91839184/* Chirp arcs ----------------------------------------------------------- */9185.peach-chirp-arcs {9186  position: absolute;9187  top: 18px;9188  width: 96px;9189  height: 70px;9190  pointer-events: none;9191}9192.peach-chirp-arcs-right { right: -60px; }9193.peach-chirp-arcs-left  { left: -60px; transform: scaleX(-1); }9194.peach-chirp-arc {9195  position: absolute;9196  top: 50%;9197  left: 0;9198  width: 40px;9199  height: 40px;9200  margin-top: -20px;9201  border: 1.2px solid #f4d5a8;9202  border-color: transparent #f4d5a8 transparent transparent;9203  border-radius: 50%;9204  opacity: 0;9205  animation: peach-chirp-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9206}9207@keyframes peach-chirp-arc-expand {9208  0%   { transform: scale(0.4); opacity: 0; }9209  20%  { opacity: 0.9; }9210  100% { transform: scale(1.6); opacity: 0; }9211}92129213/* Flight wave ---------------------------------------------------------- */9214.peach-chirp-flight-track {9215  position: absolute;9216  inset: 32px 36px 38px 36px;9217  pointer-events: none;9218}9219.peach-chirp-flight-wave {9220  position: absolute;9221  top: 8px;9222  left: 76px;9223  right: 76px;9224  height: 60px;9225  width: auto;9226  opacity: 0;9227  transition: opacity 0.15s ease;9228  stroke: #f4d5a8;9229  fill: none;9230}9231.peach-chirp-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9232.peach-chirp-flight-wave.is-visible { opacity: 1; }9233.peach-chirp-flight-path,9234.peach-chirp-flight-path-2 {9235  stroke-dasharray: 240;9236  stroke-dashoffset: 240;9237  stroke-linecap: round;9238  fill: none;9239}9240.peach-chirp-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9241.peach-chirp-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9242.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path {9243  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9244}9245.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path-2 {9246  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9247}9248@keyframes peach-chirp-fly {9249  0%   { stroke-dashoffset: 240; opacity: 0; }9250  20%  { opacity: 1; }9251  100% { stroke-dashoffset: -120; opacity: 0; }9252}92539254/* Connection dot ------------------------------------------------------- */9255.peach-chirp-dot {9256  position: absolute;9257  top: 50%; left: 50%;9258  transform: translate(-50%, -50%);9259  width: 40px; height: 40px;9260  opacity: 0;9261  pointer-events: none;9262  transition: opacity 0.3s ease;9263  color: var(--peach-accent);9264}9265.peach-chirp-dot.is-visible { opacity: 1; }9266.peach-chirp-dot-glow {9267  position: absolute; top: 50%; left: 50%;9268  transform: translate(-50%, -50%);9269  width: 38px; height: 38px;9270  border-radius: 50%;9271  filter: blur(10px);9272  opacity: 0.55;9273  background: var(--peach-accent);9274  animation: peach-chirp-dot-bloom 1.4s ease-out;9275}9276.peach-chirp-dot-core {9277  position: absolute; top: 50%; left: 50%;9278  transform: translate(-50%, -50%);9279  width: 8px; height: 8px;9280  border-radius: 50%;9281  background: var(--peach-accent);9282  box-shadow: 0 0 12px currentColor;9283  animation: peach-chirp-dot-core 1.4s ease-out;9284}9285.peach-chirp-dot-ring {9286  position: absolute; top: 50%; left: 50%;9287  width: 60px; height: 60px;9288  transform: translate(-50%, -50%);9289  animation: peach-chirp-dot-ring 1.4s linear;9290  stroke: var(--peach-accent);9291}9292@keyframes peach-chirp-dot-bloom {9293  0%   { width: 4px; height: 4px; opacity: 0; }9294  35%  { width: 60px; height: 60px; opacity: 0.7; }9295  100% { width: 38px; height: 38px; opacity: 0.55; }9296}9297@keyframes peach-chirp-dot-core {9298  0%   { width: 0; height: 0; }9299  35%  { width: 12px; height: 12px; }9300  100% { width: 8px; height: 8px; }9301}9302@keyframes peach-chirp-dot-ring {9303  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9304  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9305  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9306}93079308/* Motes — drift upward across the stage */9309.peach-chirp-motes {9310  position: absolute;9311  inset: 0;9312  pointer-events: none;9313}9314.peach-chirp-mote {9315  position: absolute;9316  width: 2px; height: 2px;9317  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9318  border-radius: 50%;9319  bottom: 32px;9320  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9321  opacity: 0;9322  animation: peach-chirp-mote-drift 6s linear infinite;9323  animation-delay: calc(var(--mote-i, 0) * 0.7s);9324}9325@keyframes peach-chirp-mote-drift {9326  0%   { transform: translateY(0); opacity: 0; }9327  10%  { opacity: 0.6; }9328  90%  { opacity: 0.1; }9329  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9330}93319332/* Status copy ---------------------------------------------------------- */9333.peach-chirp-copy-host {9334  margin: 4px 4px 10px;9335  text-align: center;9336  min-height: 50px;9337}9338.peach-chirp-copy {9339  animation: peach-chirp-copy-in 0.35s ease both;9340}9341@keyframes peach-chirp-copy-in {9342  from { opacity: 0; transform: translateY(4px); }9343  to   { opacity: 1; transform: translateY(0); }9344}9345.peach-chirp-headline {9346  font-family: var(--font-display, Georgia, serif);9347  font-style: italic;9348  font-size: 20px;9349  font-weight: 500;9350  line-height: 1.2;9351  letter-spacing: 0.005em;9352  color: var(--peach-t0);9353  margin-bottom: 6px;9354}9355.peach-chirp-copy-listening .peach-chirp-headline,9356.peach-chirp-copy-chirping .peach-chirp-headline,9357.peach-chirp-copy-idle .peach-chirp-headline {9358  font-family: inherit;9359  font-style: normal;9360  font-weight: 500;9361  font-size: 15px;9362  color: var(--peach-t0);9363  letter-spacing: 0;9364}9365.peach-chirp-copy-paired .peach-chirp-headline {9366  color: var(--peach-t0);9367  font-weight: 600;9368}9369.peach-chirp-sub {9370  font-size: 12.5px;9371  line-height: 1.45;9372  color: var(--peach-t1);9373  max-width: 280px;9374  margin: 0 auto;9375  text-wrap: pretty;9376}93779378/* Status action -------------------------------------------------------- */9379.peach-chirp-action {9380  margin: 2px 4px 10px;9381  margin-top: auto;9382  display: flex;9383  flex-direction: column;9384  gap: 8px;9385}9386.peach-chirp-mic-notice {9387  margin: 0;9388  font-size: 0.625rem;9389  color: var(--peach-t2);9390  line-height: 1.4;9391}9392.peach-chirp-action-waiting {9393  display: flex;9394  align-items: center;9395  justify-content: space-between;9396  gap: 12px;9397}9398.peach-chirp-cancel {9399  min-width: 96px;9400}9401.peach-chirp-listening {9402  display: inline-flex; align-items: center; gap: 4px;9403  font-family: var(--peach-mono, ui-monospace, monospace);9404  font-size: 9.5px;9405  text-transform: uppercase;9406  letter-spacing: 0.12em;9407  color: var(--peach-t1);9408  padding: 8px 10px;9409}9410.peach-chirp-listen-dot {9411  width: 4px; height: 4px;9412  border-radius: 50%;9413  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9414  animation: peach-chirp-listen-pulse 1.2s ease-in-out infinite;9415}9416.peach-chirp-listen-dot:nth-child(2) { animation-delay: 0.2s; }9417.peach-chirp-listen-dot:nth-child(3) { animation-delay: 0.4s; }9418.peach-chirp-listen-label { margin-left: 6px; }9419@keyframes peach-chirp-listen-pulse {9420  0%, 100% { opacity: 0.25; transform: scale(0.9); }9421  50%      { opacity: 1;     transform: scale(1.15); }9422}94239424.peach-chirp-action-handshake {9425  display: flex;9426  flex-direction: column;9427  align-items: center;9428  gap: 8px;9429  padding: 8px 4px;9430}9431.peach-chirp-meter {9432  width: 100%;9433  max-width: 280px;9434  height: 2px;9435  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9436  border-radius: 2px;9437  position: relative;9438  overflow: hidden;9439}9440.peach-chirp-meter-bar {9441  position: absolute;9442  top: 0; bottom: 0;9443  width: 30%;9444  left: -30%;9445  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9446  animation: peach-chirp-meter-sweep 1.4s ease-in-out infinite;9447}9448@keyframes peach-chirp-meter-sweep {9449  0%   { left: -30%; }9450  100% { left: 100%; }9451}9452.peach-chirp-meter-label {9453  font-family: var(--peach-mono, ui-monospace, monospace);9454  font-size: 9.5px;9455  text-transform: uppercase;9456  letter-spacing: 0.14em;9457  color: var(--peach-t1);9458}94599460.peach-chirp-action-paired {9461  display: flex;9462  align-items: center;9463  gap: 10px;9464}9465.peach-chirp-device-confirm {9466  flex: 1;9467  display: inline-flex;9468  align-items: center;9469  gap: 8px;9470  padding: 9px 10px 9px 12px;9471  border-radius: 10px;9472  background: color-mix(in srgb, #76b6e8 12%, transparent);9473  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9474  font-size: 12.5px;9475  color: var(--peach-t0);9476  min-width: 0;9477}9478.peach-chirp-device-confirm-glyph {9479  display: inline-flex;9480  color: #76b6e8;9481}9482.peach-chirp-device-confirm-name {9483  flex: 1;9484  overflow: hidden;9485  text-overflow: ellipsis;9486  white-space: nowrap;9487}9488.peach-chirp-device-confirm-trust {9489  font-family: var(--peach-mono, ui-monospace, monospace);9490  font-size: 9.5px;9491  text-transform: uppercase;9492  letter-spacing: 0.1em;9493  color: #76b6e8;9494  padding: 2px 6px;9495  border-radius: 4px;9496  background: color-mix(in srgb, #76b6e8 14%, transparent);9497}9498.peach-chirp-done {9499  min-width: 80px;9500}9501.peach-chirp-retry {9502  align-self: center;9503  display: block;9504  margin: 6px auto 0;9505  min-width: 120px;9506}9507.peach-chirp-mic-help {9508  font-size: 12px;9509  color: var(--peach-t1);9510  text-align: center;9511  max-width: 320px;9512  margin: 0 auto;9513}95149515/* Rest state — bird stage at idle pose, primary CTA + paired list */9516.peach-chirp-pair[data-phase="idle"] .peach-chirp-stage {9517  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9518  height: 160px;9519}9520.peach-chirp-pair-start {9521  width: 100%;9522  display: inline-flex;9523  align-items: center;9524  justify-content: center;9525  gap: 8px;9526  padding: 11px 14px;9527  border-radius: 10px;9528  background: var(--peach-accent);9529  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9530  color: #1a0905;9531  font-family: inherit;9532  font-size: 13px;9533  font-weight: 600;9534  letter-spacing: 0.01em;9535  cursor: pointer;9536  transition: filter 0.15s ease, transform 0.1s ease;9537}9538.peach-chirp-pair-start:hover { filter: brightness(1.08); }9539.peach-chirp-pair-start:active { transform: translateY(1px); }95409541.peach-chirp-paired-section {9542  margin-top: 14px;9543  display: flex;9544  flex-direction: column;9545  gap: 8px;9546}9547.peach-chirp-paired-heading {9548  margin: 0;9549  font-family: var(--peach-mono, ui-monospace, monospace);9550  font-size: 10px;9551  font-weight: 500;9552  letter-spacing: 0.14em;9553  text-transform: uppercase;9554  color: var(--peach-t1);9555}95569557/* Footer --------------------------------------------------------------- */9558.peach-chirp-foot {9559  margin: 10px -4px -2px;9560  margin-top: auto;9561}9562.peach-chirp-foot-divider {9563  height: 1px;9564  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9565  margin-bottom: 10px;9566}9567.peach-chirp-foot-text {9568  font-size: 11px;9569  line-height: 1.5;9570  color: var(--peach-t1);9571  text-align: center;9572  padding: 0 4px;9573  text-wrap: pretty;9574}95759576/* Screen-reader-only live region. Kept off the visual flow but read by9577   assistive tech as the pairing phase advances. */9578.peach-sr-only {9579  position: absolute;9580  width: 1px; height: 1px;9581  padding: 0; margin: -1px;9582  overflow: hidden;9583  clip: rect(0, 0, 0, 0);9584  white-space: nowrap;9585  border: 0;9586}95879588/* Reduced motion — stage simplifies to opacity transitions only */9589@media (prefers-reduced-motion: reduce) {9590  .peach-chirp-bird-body,9591  .peach-chirp-bird-head-group,9592  .peach-chirp-bird-beak,9593  .peach-chirp-bird-wing,9594  .peach-chirp-bird-tuft,9595  .peach-chirp-bird-tail,9596  .peach-chirp-bird-eye-group,9597  .peach-chirp-bird-aura,9598  .peach-chirp-arc,9599  .peach-chirp-flight-path,9600  .peach-chirp-flight-path-2,9601  .peach-chirp-dot-glow,9602  .peach-chirp-dot-core,9603  .peach-chirp-dot-ring,9604  .peach-chirp-mote,9605  .peach-chirp-meter-bar,9606  .peach-chirp-listen-dot,9607  .peach-chirp-bird-slot,9608  .peach-chirp-bird-slot-mobile {9609    animation: none !important;9610    transition: opacity 0.2s linear !important;9611  }9612}96139614/* ─────────────────────────────────────────────────────────────────9615   Settings → Sync surface (v3 ChirpSync). Wraps the same bird9616   animation used by the pairing flow with a paired-devices list and9617   the "Pair a device" CTA.9618   ───────────────────────────────────────────────────────────────── */9619.peach-chirp-settings {9620  position: absolute;9621  inset: 0;9622  z-index: 3;9623  display: flex;9624  flex-direction: column;9625  gap: 18px;9626  padding: 14px 12px 12px;9627  width: 100%;9628  box-sizing: border-box;9629  overflow-y: auto;9630  overflow-x: hidden;9631  /* Same warm Chirp surface as the pairing screen — unifies the two views. */9632  background:9633    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9634    var(--peach-bg);9635  color: var(--peach-t0);9636  isolation: isolate;9637  /* Hide native scrollbar — content fits 99% of the time and a chunky9638     gutter ruins the surface. */9639  scrollbar-width: none;9640  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9641}9642.peach-chirp-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9643.peach-chirp-settings::before {9644  content: '';9645  position: absolute;9646  inset: 0;9647  pointer-events: none;9648  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9649  z-index: 0;9650}9651.peach-chirp-settings > * { position: relative; z-index: 1; }96529653.peach-chirp-settings--pairing {9654  padding: 0;9655  align-items: stretch;9656  justify-content: stretch;9657  background: none;9658  isolation: auto;9659}9660.peach-chirp-settings--pairing::before { display: none; }96619662.peach-chirp-settings-header {9663  display: flex;9664  align-items: center;9665  gap: 10px;9666}9667.peach-chirp-settings-title {9668  margin: 0;9669  font-family: var(--font-display, Georgia, serif);9670  font-style: italic;9671  font-size: 24px;9672  font-weight: 500;9673  line-height: 1;9674  color: var(--peach-t0);9675  letter-spacing: 0.005em;9676}9677.peach-chirp-settings-section {9678  margin: 6px 0 -4px;9679  font-size: 11px;9680  font-weight: 600;9681  letter-spacing: 0.08em;9682  text-transform: uppercase;9683  color: var(--peach-text-muted);9684}9685.peach-chirp-settings-error {9686  font-size: 12px;9687  padding: 8px 10px;9688  border-radius: 8px;9689  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);9690  color: var(--peach-text);9691}9692.peach-chirp-settings-footer {9693  margin-top: auto;9694  padding-top: 18px;9695  font-size: 11.5px;9696  line-height: 1.5;9697  color: var(--peach-text-muted);9698  text-align: center;9699}97009701/* Hero card shown when no devices are paired yet. */9702.peach-chirp-hero {9703  display: flex;9704  flex-direction: column;9705  align-items: center;9706  gap: 12px;9707  padding: 20px 12px 8px;9708  text-align: center;9709}9710.peach-chirp-hero-svg {9711  display: block;9712  max-width: 100%;9713  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));9714}9715.peach-chirp-hero-headline {9716  margin: 0;9717  font-family: var(--font-display, Georgia, serif);9718  font-style: italic;9719  font-size: 20px;9720  font-weight: 500;9721  line-height: 1.2;9722  letter-spacing: 0.005em;9723  color: var(--peach-t0);9724}9725.peach-chirp-hero-sub {9726  margin: 0;9727  font-size: 13px;9728  line-height: 1.5;9729  color: var(--peach-t1);9730  max-width: 320px;9731  text-wrap: pretty;9732}97339734.peach-chirp-pair-cta {9735  display: flex;9736  justify-content: center;9737  padding: 4px 0 6px;9738}9739.peach-chirp-pair-button {9740  display: inline-flex;9741  align-items: center;9742  gap: 8px;9743  min-width: 220px;9744  justify-content: center;9745}9746.peach-chirp-pair-button-icon {9747  flex: 0 0 auto;9748}97499750/* Paired devices list. Roomy rows that look at home next to the rest9751   of Settings; stale rows get a soft warm-warning border tint. */9752.peach-chirp-device-list {9753  list-style: none;9754  margin: 0;9755  padding: 0;9756  display: flex;9757  flex-direction: column;9758  gap: 8px;9759}9760.peach-chirp-device-row {9761  display: flex;9762  align-items: center;9763  gap: 12px;9764  padding: 12px;9765  border-radius: 10px;9766  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9767  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);9768}9769.peach-chirp-device-row[data-stale="true"] {9770  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);9771}9772.peach-chirp-device-icon {9773  width: 32px;9774  height: 32px;9775  display: flex;9776  align-items: center;9777  justify-content: center;9778  border-radius: 8px;9779  color: var(--peach-text);9780  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);9781}9782.peach-chirp-device-info {9783  flex: 1;9784  display: flex;9785  flex-direction: column;9786  gap: 2px;9787  min-width: 0;9788}9789.peach-chirp-device-name {9790  font-size: 14px;9791  font-weight: 600;9792  color: var(--peach-text);9793  overflow: hidden;9794  text-overflow: ellipsis;9795  white-space: nowrap;9796}9797.peach-chirp-device-meta {9798  font-size: 11.5px;9799  color: var(--peach-text-muted);9800  display: flex;9801  flex-wrap: wrap;9802  align-items: center;9803  gap: 8px;9804}9805.peach-chirp-device-badge {9806  font-size: 10.5px;9807  font-weight: 500;9808  letter-spacing: 0.02em;9809  padding: 2px 6px;9810  border-radius: 999px;9811  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);9812  color: var(--peach-text);9813}9814.peach-chirp-device-stale {9815  font-size: 10.5px;9816  font-weight: 500;9817  color: var(--peach-warn, #d29257);9818}9819.peach-chirp-device-remove {9820  flex: 0 0 auto;9821  color: var(--peach-text-muted);9822}9823.peach-chirp-device-remove:hover {9824  color: var(--peach-danger, #c25b4a);9825}9826.peach-chirp-unpair-confirm {9827  display: flex;9828  gap: 6px;9829  align-items: center;9830}98319832/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */9833.peach-chirp-pro-card {9834  position: relative;9835  margin: 18px 12px;9836  padding: 18px 20px 22px;9837  border-radius: 22px;9838  background:9839    radial-gradient(140% 90% at 50% 0%,9840      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,9841      transparent 60%),9842    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9843  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);9844  box-shadow:9845    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,9846    0 18px 40px -24px rgba(0, 0, 0, 0.45);9847  display: flex;9848  flex-direction: column;9849  align-items: center;9850  gap: 10px;9851  text-align: center;9852  overflow: hidden;9853}9854.peach-chirp-pro-stage {9855  position: relative;9856  width: 220px;9857  height: 140px;9858  display: flex;9859  align-items: flex-end;9860  justify-content: center;9861  margin-bottom: 2px;9862}9863.peach-chirp-pro-bird-slot {9864  width: 140px;9865  height: 132px;9866  display: flex;9867  align-items: flex-end;9868  justify-content: center;9869  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));9870}9871.peach-chirp-pro-bird-slot .peach-chirp-bird {9872  width: 100%;9873  height: 100%;9874}9875.peach-chirp-pro-bird-slot .peach-chirp-bird svg {9876  width: 100%;9877  height: 100%;9878  overflow: visible;9879}9880.peach-chirp-pro-chirp {9881  position: absolute;9882  top: 14px;9883  right: 8px;9884  width: 96px;9885  height: 80px;9886  color: var(--peach-accent);9887  animation: peach-chirp-pulse 2.6s ease-in-out infinite;9888  transform-origin: 0% 50%;9889  pointer-events: none;9890}9891@keyframes peach-chirp-pulse {9892  0%, 100% { opacity: 0.35; transform: translateX(0) scale(0.92); }9893  45%      { opacity: 1;    transform: translateX(2px) scale(1); }9894  70%      { opacity: 0.6;  transform: translateX(4px) scale(1.04); }9895}9896@media (prefers-reduced-motion: reduce) {9897  .peach-chirp-pro-chirp { animation: none; opacity: 0.7; }9898}9899.peach-chirp-pro-headline {9900  margin: 4px 0 0;9901  font-family: var(--font-display, "Cormorant Garamond", serif);9902  font-style: italic;9903  font-size: 19px;9904  font-weight: 500;9905  letter-spacing: 0.01em;9906  color: var(--peach-t0);9907  max-width: 280px;9908  line-height: 1.25;9909}9910.peach-chirp-pro-body {9911  margin: 0;9912  font-size: 13px;9913  line-height: 1.55;9914  color: var(--peach-t1);9915  max-width: 300px;9916}9917.peach-chirp-pro-cta {9918  margin-top: 4px;9919}9920.peach-chirp-pro-foot {9921  margin: 2px 0 0;9922  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;9923  font-size: 0.625rem;9924  letter-spacing: 0.08em;9925  text-transform: uppercase;9926  color: var(--peach-t2);9927  opacity: 0.75;9928}