popup.css

1html,2body,3#app,4#pre-lock,5.popup-root {6  width: 320px;7  min-height: 520px;8  height: 520px;9  margin: 0;10}1112body {13  overflow: hidden;14  background: var(--bg);15  color: var(--t0);16  font-family: var(--font-ui);17  font-weight: 300;18  position: relative;19}2021* {22  box-sizing: border-box;23}2425button,26input,27textarea,28select {29  font: inherit;30}3132button {33  border: 0;34}3536#pre-lock {37  position: absolute;38  inset: 0;39  z-index: 10;40}4142#pre-lock[hidden] {43  display: none;44}4546.popup-root {47  position: relative;48  overflow: hidden;49}5051.peach-theme {52  color: var(--peach-t0);53  font-family: var(--font-ui);54  font-weight: 300;55  box-sizing: border-box;56  text-align: left;57}58.peach-theme, .peach-theme * { box-sizing: inherit; }5960.peach-brand-mark {61  width: 14px;62  height: 14px;63  flex-shrink: 0;64}6566.peach-status-pip.is-hidden {67  display: none;68}6970.peach-status-pip.unlocked {71  background: var(--peach-health-ok);72  box-shadow: 0 0 6px rgba(100, 210, 100, 0.6);73}7475.peach-status-pip.pulse {76  animation: pip-pulse 400ms var(--peach-curve-settle) both;77}7879/* Shell */80.peach-shell, .peach-screen {81  background:82    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),83    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),84    var(--peach-bg);85  border: 1px solid var(--peach-t3);86  box-shadow:87    0 2px 8px rgba(0,0,0,0.55),88    0 14px 48px rgba(0,0,0,0.7),89    0 0 0 1px rgba(240,232,216,0.04);90  overflow: hidden;91}92.peach-shell {93  display: grid;94  grid-template-rows: auto 1fr;95  min-height: 520px;96  position: relative;97  isolation: isolate;98}99100.peach-shell[data-surface="extension"] {101  width: min(320px, 100vw);102  border-radius: 0;103  height: 520px;104  max-height: 520px;105  overflow: hidden;106}107108/* ── Lock screen – full-window lock/create stage ── */109.lock-screen--vault-stage {110  display: flex;111  flex-direction: column;112  gap: 18px;113  padding: 20px 18px 18px;114  justify-content: flex-start;115}116.lock-screen--vault-stage .peach-lock-panel {117  margin-top: auto;118}119.peach-lock-headline--unlock {120  max-width: 220px;121}122.peach-lock-hero--unlock {123  padding-top: 14px;124}125.peach-lock-panel--unlock {126  gap: 10px;127}128129.peach-lock-restore-link {130  background: transparent;131  border: none;132  cursor: pointer;133  font-family: var(--font-mono);134  font-size: 0.625rem;135  letter-spacing: 0.08em;136  color: var(--t1);137  padding: 5px 0;138  text-align: left;139  transition: color 150ms ease;140}141142.peach-lock-restore-link:hover {143  color: var(--t0);144}145.peach-shell[data-surface="extension"] .peach-stage {146  min-height: 250px;147}148149/* Screen (unlock) */150.peach-screen {151  width: min(320px, 100vw);152  min-height: 100%;153  height: 100%;154  border-radius: 0;155  padding: 16px 20px 18px;156  display: grid;157  gap: 14px;158}159.peach-screen[data-motion-phase="enter"] {160  animation: peach-screen-enter var(--peach-dur-600) var(--peach-curve-arrival) both;161}162.peach-screen-header { min-height: 20px; }163164/* Wordmark */165.peach-wordmark {166  margin: 0;167  font-family: var(--font-display);168  font-size: 0.9375rem;169  font-style: italic;170  letter-spacing: 0.03em;171  color: var(--peach-t0);172  display: inline-flex;173  min-height: 1em;174}175176/* Motion text / char animation */177.peach-motion-text { display: inline-flex; min-height: 1em; }178.peach-motion-char {179  display: inline-block;180  white-space: pre;181  opacity: 0;182  transform: translateY(0.22em);183  animation: peach-char-enter var(--peach-motion-duration, 380ms) var(--peach-curve-arrival) forwards;184  animation-delay: calc(var(--peach-char-index, 0) * 20ms);185}186187/* Chrome */188.peach-chrome {189  position: relative;190  z-index: 10;191  padding: 16px 20px 0;192  display: flex;193  justify-content: space-between;194  align-items: center;195  /* z-index:10 keeps the header icons above `.peach-loading` (Suspense196     fallback) per §15 regression guard. Without pointer-events:none, the197     empty header strip also sits above `.peach-overlay-view` (z-index:2)198     and swallows clicks meant for an overlay's back button / top search. */199  pointer-events: none;200}201.peach-chrome .peach-btn { pointer-events: auto; }202.peach-chrome.is-hidden-for-overlay,203.peach-search-wrap.is-hidden-for-overlay {204  opacity: 0;205  visibility: hidden;206  pointer-events: none;207}208/* Chirp-sync owns its own surface and header — fully collapse the global209   chrome row so the warm gradient reaches the popup edge. */210.peach-chrome.is-collapsed,211.peach-search-wrap.is-collapsed {212  display: none;213}214.peach-wordmark-wrap { display: flex; align-items: center; gap: 5px; }215.peach-status-pip {216  width: 5px;217  height: 5px;218  border-radius: 50%;219  background: var(--peach-t3);220  display: inline-flex;221  flex-shrink: 0;222  transition: background 400ms ease, box-shadow 400ms ease;223}224.peach-chrome-actions { display: flex; gap: 6px; }225226/* Shell body */227.peach-shell-body {228  position: relative;229  display: grid;230  grid-template-rows: 1fr auto;231  min-height: 0;232  min-width: 0;233  width: 100%;234  overflow: hidden;235  height: 100%;236}237.peach-shell-veil {238  position: absolute; inset: 0;239  background: #000; opacity: 0;240  pointer-events: none; z-index: 1;241}242.peach-shell[data-motion-phase="enter"] .peach-shell-body {243  animation: peach-shell-fade-in var(--peach-dur-600) var(--peach-curve-arrival) both;244}245.peach-shell[data-motion-phase="exit"] .peach-shell-veil {246  animation: peach-veil-in 300ms var(--peach-curve-departure) forwards;247}248249/* Content frame */250.peach-content-frame {251  display: grid;252  grid-template-rows: 1fr auto;253  grid-template-columns: minmax(0, 1fr);254  align-content: start;255  min-height: 0;256  min-width: 0;257  overflow: hidden;258  transition: opacity 80ms ease, transform 80ms ease;259}260.peach-content-frame.navigating {261  opacity: 0.93;262  transform: translateX(2px);263}264.peach-content-frame[data-content-phase="enter"] {265  animation: peach-content-enter 135ms ease-out both;266}267.peach-content-frame[data-content-phase="exit"] {268  animation: peach-content-exit 95ms ease-in forwards;269}270.peach-content-frame[data-content-phase="idle"] { opacity: 1; transform: none; }271272/* Stage */273.peach-stage {274  padding: 10px 20px 12px;275  display: grid;276  gap: 12px;277  align-content: start;278  min-width: 0;279  min-height: 0;280  max-width: 100%;281  overflow-y: auto;282  overflow-x: hidden;283  scrollbar-width: none;284  -ms-overflow-style: none;285  overscroll-behavior: contain;286}287.peach-stage::-webkit-scrollbar { display: none; }288289/* Entry name */290.peach-entry-name-wrap { position: relative; overflow: hidden; max-width: 100%; }291.peach-entry-header {292  position: relative;293  z-index: 1;294  display: flex;295  align-items: flex-start;296  gap: 6px;297  min-width: 0;298}299.peach-entry-header-name {300  flex: 1;301  min-width: 0;302}303.peach-entry-name {304  margin: 0;305  padding-bottom: 0.12em;306  font-family: var(--font-display);307  font-style: italic; font-weight: 400;308  font-size: 44px; line-height: 0.95;309  color: var(--peach-t0);310  display: -webkit-box;311  -webkit-line-clamp: 2;312  -webkit-box-orient: vertical;313  overflow: hidden;314  text-wrap: balance;315}316.peach-entry-name--lg { font-size: 40px; }317.peach-entry-name--xl { font-size: 34px; line-height: 0.98; }318.peach-entry-name--xxl { font-size: 30px; line-height: 1.02; }319.peach-entry-name-text { display: block; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; padding-bottom: 0.12em; }320321/* Trash icon in entry header */322.peach-entry-trash-btn {323  flex-shrink: 0;324  padding: 4px;325  margin-top: 4px;326  background: transparent;327  border: none;328  cursor: pointer;329  color: var(--peach-t2);330  border-radius: 4px;331  transition: color 140ms ease, background 140ms ease;332  display: flex;333  align-items: center;334  justify-content: center;335}336.peach-entry-trash-btn:hover {337  color: var(--peach-t1);338  background: var(--peach-t3);339}340.peach-entry-trash-confirm {341  display: flex;342  align-items: center;343  gap: 6px;344  flex-shrink: 0;345  margin-top: 6px;346  flex-wrap: nowrap;347}348.peach-entry-trash-confirm-label {349  font-family: var(--font-mono);350  font-size: 0.5625rem;351  letter-spacing: 0.1em;352  color: var(--peach-t2);353  white-space: nowrap;354}355.peach-entry-name-button {356  padding: 0;357  background: transparent;358  text-align: left;359  cursor: pointer;360  max-width: 100%;361  overflow: hidden;362  display: block;363}364.peach-entry-name-char {365  display: inline-block;366  white-space: pre;367  opacity: 0;368  transform: translateY(0.22em);369  animation: peach-char-enter 380ms var(--peach-curve-arrival) forwards;370  animation-delay: calc(var(--char-index, 0) * 20ms);371}372373/* Domain */374.peach-domain { border-top: 1px solid var(--peach-t3); padding-top: 9px; }375.peach-domain-row {376  width: 100%; border: 0; background: transparent; color: inherit;377  padding: 0; display: flex; justify-content: space-between; align-items: baseline;378  cursor: default;379}380.peach-domain-value {381  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;382  font-size: 0.625rem; font-style: italic;383  letter-spacing: 0.12em; color: var(--peach-t1);384}385386/* Fields */387.peach-fields { display: grid; gap: 10px; }388.peach-field-card { display: grid; gap: 7px; }389.peach-label {390  font-family: Inter, system-ui, sans-serif;391  text-transform: uppercase; letter-spacing: 0.2em;392  font-size: 0.5rem; color: var(--peach-t2);393}394.peach-add-field-btn {395  align-self: flex-start;396  background: none; border: none; padding: 2px 0;397  font-family: Inter, system-ui, sans-serif;398  font-size: 0.6875rem; color: var(--peach-accent);399  cursor: pointer; opacity: 0.75;400  letter-spacing: 0.02em;401}402.peach-add-field-btn:hover { opacity: 1; }403.peach-field-value-row {404  display: flex; justify-content: space-between;405  align-items: center; gap: 8px;406  min-width: 0;407}408.peach-field-value {409  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;410  font-size: 0.8125rem; color: var(--peach-t1);411  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;412  flex: 1;413  min-width: 0;414}415.peach-password-value {416  display: inline-flex;417  align-items: center;418  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;419  font-size: 1rem; letter-spacing: 0.3em; color: var(--peach-t0);420  overflow: hidden;421  text-overflow: ellipsis;422  white-space: nowrap;423  flex: 1;424  min-width: 0;425  max-width: 100%;426}427.peach-password-value.is-revealed {428  font-size: 0.875rem;429  letter-spacing: 0.08em;430}431.peach-password-text,432.peach-password-mask {433  display: block;434  width: 100%;435  overflow: hidden;436  white-space: nowrap;437  /* Render as uniform mid-line bullets, not baseline periods */438  font-family: Inter, system-ui, sans-serif;439  font-size: 0.625rem;440  letter-spacing: 3px;441  user-select: none;442}443.peach-field-actions { display: flex; gap: 4px; align-items: center; }444.peach-password-strength { display: flex; align-items: center; gap: 8px; }445.peach-strength-bar { display: flex; gap: 3px; }446.peach-strength-seg { width: 28px; height: 4px; border-radius: 2px; background: #eee; }447.peach-strength-label {448  font-family: "IBM Plex Mono", monospace;449  font-style: italic;450  font-size: 0.5625rem;451  font-weight: 300;452  min-width: 36px;453  text-align: right;454  color: var(--peach-t2);455  letter-spacing: 0.06em;456}457458.peach-strength-hairline {459  display: flex;460  align-items: center;461  gap: 10px;462  margin-top: -2px;463}464465.peach-strength-hairline-track {466  flex: 1;467  height: 3px;468  border-radius: 2px;469  background: var(--peach-s2);470  overflow: hidden;471}472473.peach-strength-hairline-fill {474  height: 100%;475  border-radius: 2px;476  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),477    background 400ms ease;478}479480/* Note content (display) */481.peach-note-content {482  border-top: 1px solid var(--peach-t3);483  padding-top: 10px;484  font-family: var(--font-display);485  font-size: 0.9375rem;486  line-height: 1.75;487  color: var(--peach-t1);488}489490/* ── Inline editing ─────────────────────────────────────────────────── */491492/* Clickable display values */493.peach-inline-clickable {494  cursor: text;495  border-radius: 3px;496  transition: background 150ms ease;497}498.peach-inline-clickable:hover {499  background: rgba(240, 232, 216, 0.05);500}501502/* Subtle "edit" hint that appears on hover */503.peach-inline-edit-hint {504  font-family: Inter, system-ui, sans-serif;505  font-size: 0.5625rem;506  text-transform: uppercase;507  letter-spacing: 0.14em;508  color: var(--peach-t2);509  opacity: 0;510  transition: opacity 120ms ease;511  pointer-events: none;512  margin-left: 6px;513  flex-shrink: 0;514}515.peach-domain-row:hover .peach-inline-edit-hint {516  opacity: 1;517}518519/* Title editing */520.peach-inline-title-wrap {521  display: flex;522  flex-direction: column;523  gap: 6px;524}525.peach-inline-title-input {526  font-family: var(--font-display);527  font-style: italic;528  font-weight: 400;529  font-size: 40px;530  line-height: 0.95;531  color: var(--peach-t0);532  background: transparent;533  border: none;534  border-bottom: 1px solid var(--peach-accent);535  outline: none;536  width: 100%;537  padding: 2px 0;538}539540/* Generic inline field */541.peach-inline-field-wrap {542  display: flex;543  flex-direction: column;544  gap: 6px;545}546.peach-inline-input {547  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;548  font-size: 0.8125rem;549  color: var(--peach-t0);550  background: transparent;551  border: none;552  border-bottom: 1px solid var(--peach-accent);553  outline: none;554  width: 100%;555  padding: 3px 0;556}557.peach-inline-textarea {558  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;559  font-size: 0.6875rem;560  line-height: 1.7;561  color: var(--peach-t0);562  background: rgba(240, 232, 216, 0.04);563  border: 1px solid var(--peach-accent);564  border-radius: 4px;565  outline: none;566  width: 100%;567  padding: 8px;568  resize: vertical;569  min-height: 80px;570}571572/* Save / cancel row */573.peach-inline-actions {574  display: flex;575  gap: 6px;576  align-items: center;577}578.peach-inline-save-btn,579.peach-inline-cancel-btn {580  display: inline-flex;581  align-items: center;582  justify-content: center;583  width: 26px;584  height: 26px;585  border-radius: 4px;586  border: none;587  cursor: pointer;588  transition: background 140ms ease, opacity 140ms ease;589  flex-shrink: 0;590}591.peach-inline-save-btn {592  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);593  color: var(--peach-accent);594}595.peach-inline-save-btn:hover:not(:disabled) {596  background: color-mix(in srgb, var(--peach-accent) 30%, transparent);597}598.peach-inline-cancel-btn {599  background: rgba(240, 232, 216, 0.06);600  color: var(--peach-t2);601}602.peach-inline-cancel-btn:hover:not(:disabled) {603  background: rgba(240, 232, 216, 0.12);604  color: var(--peach-t1);605}606.peach-inline-save-btn:disabled,607.peach-inline-cancel-btn:disabled {608  opacity: 0.4;609  cursor: not-allowed;610}611612/* Inline password generator wrapper */613.peach-inline-generator-wrap {614  margin-top: 10px;615  padding-top: 10px;616  border-top: 1px solid var(--peach-t3);617  display: flex;618  flex-direction: column;619  gap: 8px;620}621.peach-inline-generator-cancel {622  align-self: flex-start;623  font-size: 0.6875rem;624  color: var(--peach-t2);625}626627/* "is-editing" card state */628.peach-field-card.is-editing {629  background: rgba(240, 232, 216, 0.02);630  border-radius: 6px;631  padding: 8px;632  margin: -8px;633}634635/* Inline tag editor on Entry detail view */636.peach-inline-tag-editor {637  display: flex;638  flex-direction: column;639  gap: 6px;640}641642/* Quiet inline "+ add X" link in the entry detail body */643.peach-entry-add-link {644  justify-self: start;645  margin-top: 8px;646}647648/* Additional URLs editor revealed by clicking the URL field */649.peach-additional-urls {650  display: flex;651  flex-direction: column;652  gap: 6px;653  margin-top: 8px;654}655.peach-additional-urls-label {656  font-size: 0.5625rem;657  letter-spacing: 0.1em;658  text-transform: uppercase;659  color: var(--peach-t2);660  margin-bottom: 2px;661}662.peach-additional-url-row {663  display: flex;664  align-items: center;665  gap: 6px;666}667.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }668.peach-additional-url-remove {669  background: transparent;670  border: 1px solid var(--peach-t3);671  color: var(--peach-t2);672  width: 22px;673  height: 22px;674  border-radius: 4px;675  cursor: pointer;676  font-size: 0.875rem;677  line-height: 1;678  display: inline-flex;679  align-items: center;680  justify-content: center;681  flex-shrink: 0;682  transition: color 120ms ease, border-color 120ms ease;683}684.peach-additional-url-remove:hover:not(:disabled) {685  color: var(--peach-accent);686  border-color: var(--peach-border-accent);687}688.peach-additional-urls-add { align-self: flex-start; }689690/* Delete row */691.peach-entry-delete-row {692  display: flex;693  align-items: center;694  gap: 8px;695  padding-top: 18px;696  margin-top: 8px;697  border-top: 1px solid var(--peach-t3);698}699.peach-delete-btn {700  font-size: 0.6875rem;701  color: var(--peach-t2);702  padding: 4px 0;703}704.peach-delete-confirm-text {705  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;706  font-size: 0.6875rem;707  font-style: italic;708  color: var(--peach-t2);709  flex-shrink: 0;710}711712/* TOTP band */713.peach-totp-band {714  border-top: 1px solid var(--peach-t3);715  padding: 12px 20px 14px;716  position: relative;717  display: grid;718  grid-template-columns: 1fr auto;719  gap: 10px;720}721.peach-totp-main {722  min-width: 0;723  cursor: pointer;724  user-select: none;725}726.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }727.peach-totp-code-row {728  display: flex;729  align-items: flex-end;730  gap: 10px;731  min-width: 0;732}733.peach-totp-code {734  margin: 2px 0 0;735  font-family: var(--font-display);736  font-style: italic;737  font-weight: 300;738  font-size: 38px; color: var(--peach-accent);739  line-height: 0.95; min-height: 1em;740  min-width: 0;741}742.peach-totp-code-text {743  display: inline-flex;744  overflow: hidden;745  text-overflow: ellipsis;746  white-space: nowrap;747}748.peach-totp-copy-btn {749  margin-bottom: 2px;750  flex-shrink: 0;751  border-color: transparent;752}753.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }754.peach-totp-countdown {755  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;756  font-size: 22px; color: var(--peach-t1);757}758.peach-totp-ring { transform: rotate(-90deg); }759.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }760.peach-totp-ring-progress {761  fill: none; stroke: var(--peach-accent); stroke-width: 2;762  stroke-linecap: round;763  transition: stroke-dashoffset 1s linear, stroke 500ms ease;764}765/* Search bar */766.peach-search-wrap {767  border-top: 1px solid var(--peach-t3);768  background: var(--peach-s1);769  min-height: 54px; position: relative;770  box-shadow: inset 0 6px 18px transparent;771  transition: box-shadow 700ms ease;772}773.peach-search-wrap::before {774  content: "";775  position: absolute;776  left: 0;777  top: 0;778  height: 2px;779  width: var(--peach-totp-progress, 0%);780  background: var(--peach-accent);781  opacity: 0;782  transition: width 1s linear, opacity 180ms ease;783  pointer-events: none;784}785.peach-shell[data-totp-active="true"] .peach-search-wrap::before {786  opacity: 0.9;787}788.peach-shell[data-totp-active="true"] .peach-search-wrap {789  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);790}791792@keyframes peach-totp-code-flare {793  0%   { filter: brightness(1); }794  25%  { filter: brightness(1.3); }795  100% { filter: brightness(1); }796}797.peach-totp-code.is-hot {798  animation: peach-totp-code-flare 3000ms ease-in-out both;799}800.peach-search-bar {801  min-height: 54px;802  display: grid;803  grid-template-columns: auto minmax(0, 1fr) auto;804  align-items: center;805  gap: 8px; padding: 0 9px 0 12px;806}807.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }808.peach-search-input {809  border: 0; background: transparent; color: var(--peach-t0);810  font-family: var(--font-display);811  font-style: italic; font-size: 18px;812  outline: none; width: 100%; min-width: 0; padding: 0;813  caret-color: var(--peach-accent);814}815.peach-search-input::placeholder { color: var(--peach-t2); }816.peach-search-meta {817  display: grid;818  grid-auto-flow: column;819  align-items: center;820  justify-content: end;821  gap: 6px;822  min-width: max-content;823}824.peach-search-counter {825  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;826  font-size: 0.625rem; color: var(--peach-t2);827  display: inline-flex;828  align-items: center;829  line-height: 1;830}831.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }832833/* Buttons */834.peach-btn {835  border: 1px solid transparent; border-radius: 12px;836  background: transparent; color: var(--peach-t0);837  font-family: Inter, system-ui, sans-serif;838  font-size: 0.75rem; letter-spacing: 0.02em; padding: 8px 12px;839  cursor: pointer;840  transition:841    background-color var(--peach-dur-80) var(--peach-curve-arrival),842    color var(--peach-dur-80) var(--peach-curve-arrival),843    border-color var(--peach-dur-150) var(--peach-curve-arrival);844}845.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }846.peach-btn:disabled {847  opacity: 0.45;848  cursor: not-allowed;849}850.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 0.6875rem; }851.peach-btn--md { min-height: 38px; }852.peach-btn--accent {853  background: var(--peach-accent);854  color: rgba(0,0,0,0.92);855  font-weight: 500;856  box-shadow:857    0 1px 0 rgba(255,255,255,0.08) inset,858    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),859    0 3px 16px var(--peach-glow),860    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);861}862.peach-btn--accent:hover:not(:disabled) {863  background: var(--peach-accent);864  filter: brightness(1.10) saturate(1.05);865  box-shadow:866    0 1px 0 rgba(255,255,255,0.10) inset,867    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),868    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),869    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);870}871.peach-btn--ghost { border-color: var(--peach-t3); color: var(--peach-t1); }872.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }873.peach-icon-btn {874  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;875  display: inline-flex; align-items: center; justify-content: center;876  border-color: transparent;877  transition:878    color var(--peach-dur-80) var(--peach-curve-arrival),879    box-shadow var(--peach-dur-150) var(--peach-curve-arrival),880    background-color var(--peach-dur-80) var(--peach-curve-arrival);881}882.peach-icon-btn:hover:not(:disabled) {883  background: transparent;884  color: var(--peach-accent);885  box-shadow: 0 0 12px color-mix(in srgb, var(--peach-accent) 28%, transparent),886              0 0 4px color-mix(in srgb, var(--peach-accent) 16%, transparent);887}888889.peach-btn:focus-visible {890  outline: none;891  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);892}893894/* Lock button */895.peach-lock-icon { transform-origin: center; }896.peach-lock-btn { color: var(--peach-accent); }897.peach-lock-btn.is-locking .peach-lock-icon {898  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);899}900901/* Biometric unlock button */902.peach-biometric-btn {903  display: flex;904  align-items: center;905  justify-content: center;906  gap: 6px;907  margin-top: 8px;908  width: 100%;909}910911/* Copy button */912.peach-copy-btn {913  position: relative; overflow: hidden;914  color: var(--peach-t2); border-color: var(--peach-t3);915}916.peach-copy-icon {917  display: inline-flex; align-items: center; justify-content: center;918  position: relative; z-index: 1;919}920.peach-copy-icon-svg { display: block; }921.peach-copy-sheen {922  position: absolute; inset: 0;923  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%);924  opacity: 0; transform: scaleX(0.15); transform-origin: left center;925}926.peach-copy-btn.is-copied {927  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;928  box-shadow:929    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),930    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),931    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);932}933.peach-copy-btn.is-copied .peach-copy-icon {934  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;935}936.peach-copy-btn.is-copied .peach-copy-sheen {937  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;938}939.peach-copy-btn.is-retreat {940  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;941}942.peach-copy-btn.is-retreat .peach-copy-sheen {943  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;944}945.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }946.peach-copy-drain-bar {947  display: block; width: 100%; height: 100%;948  background: var(--peach-accent); opacity: 0.7;949  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;950}951952/* Unlock screen elements */953.peach-unlock-headline {954  margin: 2px 0 0;955  font-family: var(--font-display);956  font-size: 52px; line-height: 0.95;957  font-style: italic; font-weight: 400;958}959.peach-subline {960  margin: 0;961  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;962  font-size: 0.625rem; color: var(--peach-t2); font-style: italic;963}964.peach-subline--lock {965  max-width: 248px;966  line-height: 1.5;967}968.peach-underline-input {969  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);970  padding: 6px 0; background: transparent; color: var(--peach-t0);971  outline: none;972  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;973  font-size: 0.8125rem;974  caret-color: var(--peach-accent);975}976.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }977.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }978.peach-hint {979  margin: 0;980  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;981  font-size: 0.625rem; color: var(--peach-t2);982}983.peach-unlock-footer {984  margin-top: 4px; display: flex; align-items: center; gap: 7px;985  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;986  font-size: 0.625rem; color: var(--peach-t2);987}988.peach-unlock-footer--lock {989  padding-top: 2px;990}991992/* Breach badge */993.peach-breach-badge {994  display: flex;995  position: relative;996  z-index: 1;997  align-items: center;998  gap: 7px;999  font-size: 0.5625rem;1000  color: var(--peach-breach);1001  padding: 5px 10px;1002  margin-bottom: 4px;1003  border-radius: 8px;1004  background: rgba(220, 80, 60, 0.07);1005  border: 1px solid rgba(220, 80, 60, 0.18);1006  letter-spacing: 0.04em;1007}10081009.peach-breach-action {1010  margin-left: auto;1011  font-size: 0.625rem;1012  padding: 3px 8px;1013}10141015.peach-password-value.is-breached {1016  color: rgba(220, 80, 60, 0.75);1017  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1018}10191020/* ── Overlay views ─────────────────────────────────────────────────── */1021.peach-overlay-view {1022  position: absolute;1023  inset: 0;1024  display: flex;1025  flex-direction: column;1026  background:1027    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1028    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1029    var(--peach-bg);1030  z-index: 2;1031  overflow: hidden;1032  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1033}1034@keyframes overlay-in {1035  from { opacity: 0; transform: translateY(8px); }1036  to   { opacity: 1; transform: translateY(0); }1037}1038.peach-overlay-view.ov-enter-up {1039  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1040}1041.peach-overlay-view.ov-exit-up {1042  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1043}1044.peach-overlay-view.ov-enter-right {1045  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1046}1047.peach-overlay-view.ov-exit-right {1048  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1049}10501051@keyframes ov-enter-up {1052  from { opacity: 0; transform: translateY(18px); }1053  to   { opacity: 1; transform: translateY(0); }1054}1055@keyframes ov-exit-up {1056  from { opacity: 1; transform: translateY(0); }1057  to   { opacity: 0; transform: translateY(-12px); }1058}1059@keyframes ov-enter-right {1060  from { opacity: 0; transform: translateX(20px); }1061  to   { opacity: 1; transform: translateX(0); }1062}1063@keyframes ov-exit-right {1064  from { opacity: 1; transform: translateX(0); }1065  to   { opacity: 0; transform: translateX(20px); }1066}10671068/* Overlay shared header */1069.peach-overlay-header {1070  padding: 10px 12px;1071  display: flex;1072  align-items: center;1073  gap: 8px;1074  border-bottom: 1px solid var(--peach-t3);1075  flex-shrink: 0;1076}1077.peach-overlay-title {1078  font-family: "IBM Plex Mono", monospace;1079  font-size: 0.5625rem;1080  text-transform: uppercase;1081  letter-spacing: 0.18em;1082  color: var(--peach-t2);1083  flex: 1;1084  text-align: center;1085}10861087.peach-overlay-card {1088  background: var(--peach-s1);1089  border: 1px solid var(--peach-t3);1090  border-radius: 12px;1091  overflow: hidden;1092  width: 100%;1093}10941095.peach-onboarding-alt-actions {1096  display: flex;1097  flex-direction: column;1098  gap: 4px;1099  padding: 0;1100}11011102.peach-settings-copy {1103  margin: 0 0 10px;1104  font-size: 0.6875rem;1105  line-height: 1.5;1106  color: var(--peach-t2);1107}11081109.peach-settings-copy strong {1110  color: var(--peach-t0);1111}11121113.peach-settings-copy--spacious {1114  margin-bottom: 12px;1115}11161117.peach-settings-copy--result {1118  color: var(--peach-accent);1119  font-size: 0.8125rem;1120  text-align: center;1121  padding: 8px 0;1122}11231124.peach-settings-copy--danger {1125  color: var(--peach-breach);1126}11271128.peach-settings-copy--success {1129  color: var(--peach-accent);1130}11311132.peach-inline-feedback {1133  font-size: 0.6875rem;1134  margin: 10px 0 0;1135}11361137.peach-inline-feedback--ok {1138  color: var(--peach-accent);1139}11401141.peach-inline-feedback--error {1142  color: var(--peach-breach);1143}11441145.peach-inline-feedback--muted {1146  color: var(--peach-t2);1147  font-size: 0.625rem;1148  margin: 4px 0;1149}11501151.peach-inline-feedback--spaced {1152  margin-top: 12px;1153}11541155.peach-settings-actions--row {1156  display: flex;1157  gap: 6px;1158}11591160.peach-settings-actions--end {1161  margin-top: 14px;1162  justify-content: flex-end;1163}11641165.peach-settings-stack {1166  display: flex;1167  flex-direction: column;1168  gap: 6px;1169}11701171.peach-settings-stack--tight {1172  gap: 4px;1173}11741175.peach-settings-stack--spacious {1176  gap: 8px;1177}11781179.peach-settings-input {1180  width: 100%;1181  box-sizing: border-box;1182  padding: 8px 10px;1183  background: rgba(0, 0, 0, 0.22);1184  border: 1px solid transparent;1185  border-radius: 6px;1186  color: var(--peach-t0);1187  font-family: var(--font-ui);1188  font-size: 0.75rem;1189  outline: none;1190  transition: border-color 120ms ease, background 120ms ease;1191}11921193.peach-settings-input:focus {1194  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1195  background: rgba(0, 0, 0, 0.28);1196}11971198.peach-settings-input[type="password"] {1199  font-family: var(--font-mono);1200  letter-spacing: 0.04em;1201}12021203.peach-hidden-file-input {1204  display: none;1205}12061207.peach-checkbox-note {1208  display: flex;1209  align-items: flex-start;1210  gap: 8px;1211  font-size: 0.6875rem;1212  color: var(--peach-t1);1213  cursor: pointer;1214  margin: 12px 0;1215}12161217.peach-checkbox-note input {1218  margin-top: 1px;1219}12201221.peach-danger-notice {1222  background: rgba(220, 80, 60, 0.08);1223  border: 1px solid rgba(220, 80, 60, 0.2);1224  border-radius: 6px;1225  padding: 9px 11px;1226  font-size: 0.6875rem;1227  color: var(--peach-t1);1228  line-height: 1.5;1229}12301231.peach-info-notice {1232  font-size: 0.6875rem;1233  color: var(--peach-t1);1234  line-height: 1.5;1235  background: var(--surface-card);1236  border: 1px solid var(--peach-t3);1237  border-radius: 6px;1238  padding: 8px 10px;1239}12401241.peach-info-notice--warn {1242  border-color: rgba(220, 38, 38, 0.4);1243  background: rgba(220, 38, 38, 0.06);1244  color: rgba(220, 38, 38, 0.92);1245  margin-bottom: 8px;1246}12471248.peach-strength-row {1249  display: flex;1250  align-items: center;1251  gap: 8px;1252  margin-bottom: 10px;1253}12541255.peach-strength-track {1256  flex: 1;1257  height: 4px;1258  background: var(--peach-s2);1259  border-radius: 2px;1260  overflow: hidden;1261}12621263.peach-strength-fill {1264  height: 100%;1265  border-radius: 2px;1266  transition: width 120ms ease, background 120ms ease;1267}12681269/* ── Type selector tabs ── */1270.peach-type-tabs {1271  display: flex;1272  gap: 0;1273  background: var(--peach-t4);1274  border-radius: 8px;1275  padding: 3px;1276}12771278.peach-type-tab {1279  flex: 1;1280  display: flex;1281  align-items: center;1282  justify-content: center;1283  gap: 6px;1284  padding: 6px 10px;1285  border-radius: 6px;1286  border: none;1287  background: transparent;1288  cursor: pointer;1289  font-family: Inter, system-ui, sans-serif;1290  font-size: 0.6875rem;1291  font-weight: 400;1292  letter-spacing: 0.04em;1293  color: var(--peach-t1);1294  transition: background 150ms ease, color 150ms ease;1295}12961297.peach-type-tab.is-active {1298  background: var(--peach-s2);1299  color: var(--peach-t0);1300  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1301}13021303.peach-type-tab:not(.is-active):hover {1304  color: var(--peach-t0);1305}13061307.peach-type-tab svg {1308  opacity: 0.7;1309  flex-shrink: 0;1310}13111312.peach-type-tab.is-active svg {1313  opacity: 1;1314}13151316/* ── List view ───────────────────────────────────────────────────────── */1317.peach-list-top {1318  padding: 0 10px;1319  min-height: 46px;1320  display: flex;1321  align-items: center;1322  gap: 6px;1323  border-bottom: 1px solid var(--peach-t3);1324  flex-shrink: 0;1325  background: var(--peach-s1);1326}13271328.peach-vault-list {1329  flex: 1;1330  overflow-y: auto;1331  scrollbar-width: none;1332}1333.peach-vault-list::-webkit-scrollbar { display: none; }13341335/* Scrollbar — vault list */1336.peach-vault-list {1337  scrollbar-width: thin;1338  scrollbar-color: var(--peach-t3) transparent;1339}13401341.peach-vault-list::-webkit-scrollbar {1342  width: 3px;1343}13441345.peach-vault-list::-webkit-scrollbar-thumb {1346  background: var(--peach-t3);1347  border-radius: 2px;1348}13491350.peach-entry-row {1351  width: 100%;1352  display: flex;1353  align-items: center;1354  gap: 10px;1355  padding: 9px 16px;1356  background: transparent;1357  border: none;1358  border-bottom: 1px solid var(--peach-t3);1359  cursor: pointer;1360  color: inherit;1361  text-align: left;1362  transition: background 80ms ease;1363}1364.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1365.peach-entry-row:last-child { border-bottom: none; }1366.peach-entry-row.is-active {1367  box-shadow: inset 2px 0 0 var(--peach-accent);1368  background: rgba(240,232,216,0.03);1369}1370.peach-entry-row:focus-visible {1371  outline: none;1372  box-shadow: 0 0 0 1px var(--peach-border-accent);1373  background: rgba(240,232,216,0.03);1374}1375.peach-entry-row-icon {1376  width: 26px; height: 26px;1377  border-radius: 7px;1378  border: 1px solid var(--peach-t3);1379  display: flex; align-items: center; justify-content: center;1380  color: var(--peach-t2);1381  flex-shrink: 0;1382}1383.peach-entry-row-icon.is-breach {1384  border-color: rgba(220,80,60,0.3);1385  color: rgba(220,80,60,0.7);1386}13871388/* Title-initials chip used as the favicon fallback for login entries whose1389 * real favicon hasn't been cached by the browser yet (freshly-imported,1390 * never-visited domains). Background colour is hashed from the title so1391 * the same entry always shows the same chip. The chip fits the same1392 * 26×26 row icon slot the favicon would take. */1393.peach-favicon-initials {1394  display: inline-flex;1395  align-items: center;1396  justify-content: center;1397  width: 100%;1398  height: 100%;1399  border-radius: 4px;1400  font-family: "IBM Plex Mono", monospace;1401  font-size: 0.5625rem;1402  font-weight: 600;1403  letter-spacing: 0.04em;1404  color: rgba(240, 232, 216, 0.92);1405  text-transform: uppercase;1406  user-select: none;1407}1408.peach-entry-row-info { flex: 1; min-width: 0; }1409.peach-entry-row-name {1410  display: block;1411  font-family: var(--font-display);1412  font-size: 1.0625rem;1413  font-style: italic;1414  font-weight: 400;1415  color: var(--peach-t0);1416  line-height: 1.2;1417  white-space: nowrap;1418  overflow: hidden;1419  text-overflow: ellipsis;1420}1421.peach-entry-row-meta {1422  display: block;1423  font-family: "IBM Plex Mono", monospace;1424  font-size: 0.5625rem;1425  color: var(--peach-t2);1426  margin-top: 1px;1427  letter-spacing: 0.05em;1428}1429.peach-entry-row-dot {1430  width: 5px; height: 5px;1431  border-radius: 50%;1432  background: rgba(220,80,60,0.7);1433  flex-shrink: 0;1434}1435.peach-new-entry-row {1436  display: flex;1437  align-items: center;1438  justify-content: center;1439  gap: 6px;1440  width: 100%;1441  padding: 11px;1442  background: transparent;1443  border: none;1444  border-top: 1px solid var(--peach-t3);1445  color: var(--peach-t2);1446  font-family: "IBM Plex Mono", monospace;1447  font-size: 0.5625rem;1448  text-transform: uppercase;1449  letter-spacing: 0.14em;1450  cursor: pointer;1451  flex-shrink: 0;1452  transition: color 120ms ease, background 120ms ease;1453}1454.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }14551456/* ── Multi-select mode ─────────────────────────────────────────────── */14571458/* Select-mode trigger button in sort bar — same shape as trash btn */1459.peach-sort-select-btn {1460  display: flex;1461  align-items: center;1462  justify-content: center;1463  padding: 3px 5px;1464  background: transparent;1465  border: none;1466  cursor: pointer;1467  color: var(--peach-t2);1468  border-radius: 4px;1469  transition: color 140ms ease, background 140ms ease;1470}1471.peach-sort-select-btn:hover {1472  color: var(--peach-t1);1473  background: var(--peach-t3);1474}14751476/* Sort bar in select mode */1477.peach-select-cancel-btn {1478  background: transparent;1479  border: none;1480  padding: 0 4px;1481  cursor: pointer;1482  font-family: "IBM Plex Mono", monospace;1483  font-size: 0.5625rem;1484  letter-spacing: 0.12em;1485  text-transform: uppercase;1486  color: var(--peach-t2);1487  transition: color 140ms ease;1488  flex-shrink: 0;1489}1490.peach-select-cancel-btn:hover { color: var(--peach-t0); }14911492.peach-select-count-label {1493  flex: 1;1494  text-align: center;1495  font-family: "IBM Plex Mono", monospace;1496  font-size: 0.5625rem;1497  letter-spacing: 0.14em;1498  text-transform: uppercase;1499  color: var(--peach-t1);1500}15011502.peach-select-all-btn {1503  background: transparent;1504  border: none;1505  padding: 0 4px;1506  cursor: pointer;1507  font-family: "IBM Plex Mono", monospace;1508  font-size: 0.5625rem;1509  letter-spacing: 0.12em;1510  text-transform: uppercase;1511  color: var(--peach-t2);1512  transition: color 140ms ease;1513  flex-shrink: 0;1514}1515.peach-select-all-btn:hover { color: var(--peach-accent); }15161517/* List in select mode */1518.peach-vault-list.is-selecting .peach-entry-row {1519  cursor: default;1520}1521.peach-vault-list.is-selecting .peach-entry-row:hover {1522  background: rgba(240,232,216,0.02);1523}1524.peach-vault-list.is-selecting .peach-entry-row.is-selected {1525  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1526}1527.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1528  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1529}15301531/* Select indicator circles in icon slot */1532.peach-entry-row-icon.is-select-icon {1533  color: var(--peach-t2);1534}1535.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1536  color: var(--peach-accent);1537}15381539/* Delete action bar at bottom (replaces new-entry row) */1540.peach-select-action-bar {1541  display: flex;1542  align-items: center;1543  justify-content: center;1544  gap: 7px;1545  width: 100%;1546  padding: 11px;1547  background: transparent;1548  border: none;1549  border-top: 1px solid var(--peach-t3);1550  color: var(--peach-t1);1551  font-family: "IBM Plex Mono", monospace;1552  font-size: 0.5625rem;1553  text-transform: uppercase;1554  letter-spacing: 0.14em;1555  cursor: pointer;1556  flex-shrink: 0;1557  transition: color 120ms ease, background 120ms ease;1558}1559.peach-select-action-bar:not(:disabled):hover {1560  color: var(--peach-t0);1561  background: rgba(220,80,60,0.06);1562}1563.peach-select-action-bar:not(:disabled):hover svg {1564  stroke: rgba(220,80,60,0.8);1565}1566.peach-select-action-bar:disabled,1567.peach-select-action-bar.is-empty {1568  color: var(--peach-t2);1569  cursor: default;1570  opacity: 0.5;1571}1572.peach-search-counter-list {1573  white-space: nowrap;1574  flex-shrink: 0;1575}1576.peach-list-empty {1577  min-height: 180px;1578  display: grid;1579  place-items: center;1580  color: var(--peach-t2);1581  font-family: "IBM Plex Mono", monospace;1582  font-size: 0.6875rem;1583}15841585/* ── Settings view ───────────────────────────────────────────────────── */1586.peach-settings-body {1587  flex: 1;1588  overflow-y: auto;1589  min-height: 0;1590  display: flex;1591  flex-direction: column;1592  padding: 2px 0 10px;1593}1594.peach-settings-group {1595  margin: 4px 10px;1596  padding: 9px 14px 11px;1597  border-radius: 12px;1598  border: 1px solid rgba(255, 255, 255, 0.07);1599  background: rgba(26, 20, 16, 0.60);1600  backdrop-filter: blur(10px) saturate(1.3);1601  -webkit-backdrop-filter: blur(10px) saturate(1.3);1602}16031604.peach-settings-group + .peach-settings-group {1605  margin-top: 6px;1606}16071608@supports not (backdrop-filter: blur(1px)) {1609  .peach-settings-group {1610    background: rgba(26, 20, 16, 0.90);1611    border-color: rgba(255, 255, 255, 0.09);1612    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1613  }1614}16151616.light .peach-settings-group,1617[data-theme="light"] .peach-settings-group {1618  background: rgba(245, 237, 226, 0.70);1619  border-color: rgba(26, 18, 8, 0.08);1620  backdrop-filter: blur(10px) saturate(1.2);1621  -webkit-backdrop-filter: blur(10px) saturate(1.2);1622}16231624@supports not (backdrop-filter: blur(1px)) {1625  .light .peach-settings-group,1626  [data-theme="light"] .peach-settings-group {1627    background: rgba(245, 237, 226, 0.97);1628    border-color: rgba(26, 18, 8, 0.10);1629  }1630}1631.peach-export-intro {1632  padding-bottom: 8px;1633}1634.peach-export-card {1635  display: grid;1636  gap: 10px;1637}1638.peach-rune-canvas {1639  border-radius: 8px;1640  background: rgba(0, 0, 0, 0.22);1641  flex: 1;1642  align-self: center;1643}1644.peach-script-input {1645  font-family: "PeachScript", monospace;1646  font-size: 0.6875rem;1647  line-height: 1.9;1648  letter-spacing: 0.06em;1649  color: var(--peach-t0);1650  background: rgba(0, 0, 0, 0.22);1651  border: none;1652  border-radius: 6px;1653  padding: 12px;1654  width: 100%;1655  min-height: 96px;1656  resize: vertical;1657  word-break: break-all;1658  scrollbar-width: none;1659  -ms-overflow-style: none;1660}16611662.peach-script-input::-webkit-scrollbar { display: none; }1663.peach-csv-warning {1664  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1665  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1666  color: var(--peach-t0);1667  border-radius: 6px;1668  padding: 10px 12px;1669  margin-bottom: 8px;1670  font-size: 0.75rem;1671  line-height: 1.45;1672}1673.peach-export-card--primary {1674  background:1675    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1676}16771678/* Export menu — distribute the three format cards across the popup. */1679.peach-export-menu {1680  display: flex;1681  flex-direction: column;1682  flex: 1;1683  min-height: 0;1684}1685.peach-export-menu .peach-settings-group {1686  flex: 1;1687  display: flex;1688  flex-direction: column;1689  justify-content: center;1690  gap: 10px;1691}16921693/* Result view — the script-string fills the remaining vertical surface. */1694.peach-export-result-group {1695  flex: 1;1696  display: flex;1697  flex-direction: column;1698  min-height: 0;1699  border-bottom: none;1700}1701.peach-export-result-group .peach-export-card {1702  flex: 1;1703  min-height: 0;1704  display: flex;1705  flex-direction: column;1706  gap: 10px;1707}1708.peach-export-result-group .peach-export-card-copy {1709  flex-shrink: 0;1710}1711.peach-export-result-group .peach-settings-label {1712  flex-shrink: 0;1713}1714.peach-export-result-group button {1715  flex-shrink: 0;1716}1717.peach-export-card-head {1718  display: flex;1719  align-items: center;1720  justify-content: space-between;1721  gap: 10px;1722}1723.peach-export-card-copy {1724  margin: 0;1725  font-size: 0.75rem;1726  line-height: 1.55;1727  color: var(--peach-t1);1728}1729.peach-export-note {1730  margin: 0;1731  font-size: 0.625rem;1732  line-height: 1.5;1733  color: var(--peach-t2);1734}1735.peach-export-strength-track {1736  height: 3px;1737  background: var(--peach-border);1738  border-radius: 2px;1739  margin: 4px 0 2px;1740  overflow: hidden;1741}1742.peach-export-strength-fill {1743  height: 100%;1744  border-radius: 2px;1745  transition: width 250ms ease, background 250ms ease;1746}1747.peach-export-strength-warn {1748  margin: 0;1749  font-size: 0.625rem;1750  line-height: 1.5;1751  color: #e84040;1752  font-family: "IBM Plex Mono", monospace;1753}1754.peach-export-strength-hint {1755  margin: 0;1756  font-size: 0.625rem;1757  line-height: 1.5;1758  color: var(--peach-t2);1759  font-family: "IBM Plex Mono", monospace;1760}1761.peach-export-pill {1762  display: inline-flex;1763  align-items: center;1764  padding: 4px 8px;1765  border-radius: 999px;1766  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1767  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1768  color: var(--peach-accent);1769  font-family: "IBM Plex Mono", monospace;1770  font-size: 0.5rem;1771  letter-spacing: 0.12em;1772  text-transform: uppercase;1773  white-space: nowrap;1774}1775.peach-export-pill--danger {1776  border-color: rgba(220,80,60,0.22);1777  background: rgba(220,80,60,0.08);1778  color: var(--peach-breach);1779}1780.peach-settings-label {1781  margin: 0 0 6px;1782  font-family: "IBM Plex Mono", monospace;1783  font-size: 0.5rem;1784  text-transform: uppercase;1785  letter-spacing: 0.18em;1786  color: var(--peach-t2);1787}1788.peach-settings-row {1789  display: flex;1790  align-items: center;1791  justify-content: space-between;1792  gap: 12px;1793  min-height: 34px;1794  padding: 6px 0;1795  font-size: 0.8125rem;1796  color: var(--peach-t1);1797}1798.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1799.peach-settings-value {1800  font-family: "IBM Plex Mono", monospace;1801  font-size: 0.625rem;1802  color: var(--peach-t2);1803}18041805.peach-settings-value--status {1806  display: flex;1807  align-items: center;1808  gap: 6px;1809}18101811.peach-settings-link {1812  font-family: "IBM Plex Mono", monospace;1813  font-size: 0.625rem;1814  color: var(--peach-accent);1815  text-decoration: none;1816  cursor: pointer;1817}1818.peach-settings-link:hover {1819  text-decoration: underline;1820}18211822.peach-settings-row--stack {1823  flex-direction: column;1824  align-items: stretch;1825  gap: 6px;1826}18271828.peach-settings-row--top {1829  align-items: flex-start;1830}18311832.peach-settings-row-main {1833  display: flex;1834  flex-direction: column;1835  gap: 4px;1836  flex: 1;1837}1838.peach-toggle {1839  width: 28px; height: 16px;1840  border-radius: 999px;1841  background: var(--peach-t3);1842  border: 1px solid var(--peach-t3);1843  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1844  flex-shrink: 0;1845  transition: background 200ms ease, border-color 200ms ease;1846  cursor: pointer;1847}1848.peach-toggle.is-on {1849  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1850  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1851}1852.peach-toggle-knob {1853  width: 10px; height: 10px;1854  border-radius: 50%;1855  background: var(--peach-t2);1856  flex-shrink: 0;1857  transform: translateX(0px);1858  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1859}1860.peach-toggle.is-on .peach-toggle-knob {1861  background: var(--peach-accent);1862  transform: translateX(12px);1863}1864.peach-settings-footer {1865  display: flex;1866  align-items: center;1867  gap: 8px;1868  margin-top: auto;1869  padding: 14px 16px 8px;1870  font-family: "IBM Plex Mono", monospace;1871  font-size: 0.5625rem;1872  color: var(--peach-t2);1873}18741875/* ── Settings home navigation ──────────────────────────────────────────── */1876.peach-settings-nav-label {1877  margin: 0 0 2px;1878  padding: 12px 16px 4px;1879  font-family: "IBM Plex Mono", monospace;1880  font-size: 0.5rem;1881  text-transform: uppercase;1882  letter-spacing: 0.18em;1883  color: var(--peach-t2);1884}18851886.peach-settings-cat-row {1887  display: flex;1888  align-items: center;1889  gap: 10px;1890  width: 100%;1891  padding: 9px 16px;1892  background: none;1893  border: none;1894  border-bottom: 1px solid var(--peach-t3);1895  cursor: pointer;1896  text-align: left;1897  color: inherit;1898  transition: background var(--peach-dur-80) ease;1899}1900.peach-settings-cat-row:hover {1901  background: var(--peach-t3);1902}1903.peach-settings-cat-row:last-child {1904  border-bottom: none;1905}19061907.peach-settings-cat-icon {1908  width: 28px;1909  height: 28px;1910  border-radius: 7px;1911  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1912  color: var(--peach-accent);1913  display: flex;1914  align-items: center;1915  justify-content: center;1916  flex-shrink: 0;1917}1918/* Light theme: peach-on-cream is too low-contrast — both colors are warm.1919   Darken the icon stroke to ink and bump the bg tint so the icon reads1920   sharply while the cell still feels accent-tinted. */1921.light .peach-settings-cat-icon {1922  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);1923  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));1924}19251926.peach-settings-cat-content {1927  flex: 1;1928  display: flex;1929  flex-direction: column;1930  gap: 2px;1931  min-width: 0;1932}19331934.peach-settings-cat-name {1935  font-size: 0.8125rem;1936  font-weight: 450;1937  color: var(--peach-t0);1938  line-height: 1.2;1939}19401941.peach-settings-cat-desc {1942  font-size: 0.625rem;1943  color: var(--peach-t2);1944  line-height: 1.3;1945  white-space: nowrap;1946  overflow: hidden;1947  text-overflow: ellipsis;1948}19491950.peach-settings-cat-chevron {1951  color: var(--peach-t2);1952  flex-shrink: 0;1953  opacity: 0.5;1954}19551956/* ── Settings sub-view section labels ──────────────────────────────────── */1957.peach-settings-sub-label {1958  margin: 12px 0 4px;1959  font-family: "IBM Plex Mono", monospace;1960  font-size: 0.5rem;1961  text-transform: uppercase;1962  letter-spacing: 0.18em;1963  color: var(--peach-t2);1964}1965.peach-settings-sub-label:first-child {1966  margin-top: 4px;1967}19681969/* ── Settings: collapsible Advanced section ─────────────────────────────── */1970.peach-settings-advanced-toggle {1971  display: flex;1972  align-items: center;1973  justify-content: space-between;1974  width: 100%;1975  background: none;1976  border: none;1977  cursor: pointer;1978  padding: 12px 0 4px;1979  margin: 0;1980  color: inherit;1981}1982.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {1983  color: var(--peach-t1);1984}1985.peach-settings-advanced-chevron {1986  font-size: 0.5625rem;1987  color: var(--peach-t3);1988  letter-spacing: 0;1989  transition: color 120ms ease;1990}19911992/* ── Feedback form ──────────────────────────────────────────────────────── */1993.peach-feedback-group {1994  flex: 1;1995  display: flex;1996  flex-direction: column;1997  border-bottom: none;1998}19992000.peach-feedback-intro {2001  margin: 4px 0 14px;2002  font-size: 0.75rem;2003  line-height: 1.55;2004  color: var(--peach-t1);2005}20062007.peach-feedback-chips {2008  display: flex;2009  flex-wrap: wrap;2010  gap: 6px;2011  margin-bottom: 14px;2012}20132014.peach-feedback-chip {2015  padding: 4px 10px;2016  border-radius: 999px;2017  border: 1px solid var(--peach-t3);2018  background: none;2019  color: var(--peach-t2);2020  font-size: 0.6875rem;2021  font-family: var(--font-ui);2022  cursor: pointer;2023  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2024    background var(--peach-dur-80) ease;2025}2026.peach-feedback-chip:hover {2027  border-color: var(--peach-t2);2028  color: var(--peach-t1);2029}2030.peach-feedback-chip.is-active {2031  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);2032  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2033  color: var(--peach-accent);2034}20352036.peach-feedback-textarea {2037  flex: 1;2038  width: 100%;2039  min-height: 120px;2040  box-sizing: border-box;2041  background: rgba(0, 0, 0, 0.22);2042  border: 1px solid transparent;2043  border-radius: 6px;2044  color: var(--peach-t0);2045  font-size: 0.75rem;2046  font-family: var(--font-ui);2047  line-height: 1.5;2048  padding: 8px 10px;2049  resize: none;2050  outline: none;2051  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2052}2053.peach-feedback-textarea:focus {2054  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2055  background: rgba(0, 0, 0, 0.28);2056}2057.peach-feedback-textarea:focus {2058  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2059}2060.peach-feedback-textarea::placeholder {2061  color: var(--peach-t2);2062}20632064.peach-feedback-meta {2065  margin: 6px 0 0;2066  font-size: 0.625rem;2067  color: var(--peach-t2);2068  font-family: "IBM Plex Mono", monospace;2069}20702071.peach-feedback-result {2072  margin: 8px 0 0;2073  font-size: 0.6875rem;2074  font-family: "IBM Plex Mono", monospace;2075}2076.peach-feedback-result--ok { color: var(--peach-sync-ok); }2077.peach-feedback-result--err { color: var(--peach-breach); }20782079.peach-feedback-submit {2080  width: 100%;2081  margin-top: 12px;2082  justify-content: center;2083}20842085.peach-feedback-anon {2086  margin: 8px 0 0;2087  font-size: 0.625rem;2088  color: var(--peach-t2);2089  text-align: center;2090}20912092.peach-passkey-badge {2093  margin-left: 8px;2094  font-size: 0.625rem;2095  letter-spacing: 0.06em;2096  text-transform: uppercase;2097  color: var(--peach-t2);2098  font-family: var(--font-ui);2099  vertical-align: middle;2100}21012102.peach-passkey-delete-btn {2103  color: var(--peach-breach);2104  border-color: rgba(229, 85, 85, 0.25);2105}21062107.peach-passkey-delete-confirm {2108  display: flex;2109  align-items: center;2110  gap: 8px;2111  padding: 8px 10px;2112  background: rgba(229, 85, 85, 0.06);2113  border: 1px solid rgba(229, 85, 85, 0.2);2114  border-radius: 6px;2115}21162117.peach-passkey-delete-confirm-copy {2118  flex: 1;2119  font-size: 0.6875rem;2120  color: var(--peach-t1);2121}21222123.peach-passkey-delete-btn--confirm {2124  color: var(--peach-breach);2125  border-color: rgba(229, 85, 85, 0.4);2126}21272128.peach-passkey-activity {2129  flex-direction: column;2130  align-items: flex-start;2131  gap: 4px;2132}21332134.peach-passkey-meta {2135  font-size: 0.6875rem;2136  color: var(--peach-t2);2137}21382139.peach-passkey-actions {2140  position: relative;2141  z-index: 1;2142  margin-top: 14px;2143  display: flex;2144  flex-direction: column;2145  gap: 8px;2146}21472148.peach-passkey-approval {2149  display: flex;2150  flex-direction: column;2151  align-items: center;2152  padding: 16px 20px 14px;2153  gap: 8px;2154  text-align: center;2155}21562157.peach-passkey-approval-icon {2158  width: 36px;2159  height: 36px;2160  border-radius: 10px;2161  background: var(--peach-s2);2162  border: 1px solid var(--peach-t3);2163  display: flex;2164  align-items: center;2165  justify-content: center;2166  flex-shrink: 0;2167  color: var(--peach-accent);2168}21692170.peach-passkey-approval-icon img,2171.peach-passkey-approval-icon svg {2172  width: 22px;2173  height: 22px;2174  border-radius: 5px;2175}21762177.peach-passkey-approval-rp {2178  font-family: var(--font-ui);2179  font-size: 0.75rem;2180  color: var(--peach-t2);2181  letter-spacing: 0.03em;2182}21832184.peach-passkey-approval-action {2185  font-family: var(--font-display);2186  font-style: italic;2187  font-weight: 300;2188  font-size: 18px;2189  color: var(--peach-t0);2190  line-height: 1.1;2191  margin: 1px 0;2192}21932194.peach-passkey-approval-user {2195  font-family: var(--font-mono);2196  font-size: 0.6875rem;2197  color: var(--peach-t1);2198  background: var(--peach-s2);2199  border: 1px solid var(--peach-t3);2200  border-radius: 4px;2201  padding: 3px 8px;2202}22032204.peach-passkey-approval-notice {2205  font-size: 0.625rem;2206  color: var(--peach-t2);2207  line-height: 1.5;2208  max-width: 220px;2209}22102211.peach-passkey-approval-actions {2212  display: flex;2213  gap: 8px;2214  width: 100%;2215  margin-top: 6px;2216}22172218.peach-passkey-approval-actions .peach-btn {2219  flex: 1;2220}22212222/* ── Inline generator drawer ── */2223.peach-generator-drawer {2224  display: grid;2225  grid-template-rows: 0fr;2226  transition: grid-template-rows 320ms var(--peach-curve-arrival);2227  overflow: hidden;2228}2229.peach-generator-drawer.is-open {2230  grid-template-rows: 1fr;2231}2232.peach-generator-drawer-inner {2233  min-height: 0;2234  overflow: hidden;2235}2236.peach-generator-drawer-content {2237  border-top: 1px solid var(--peach-t3);2238  padding: 8px 0 4px;2239  display: flex;2240  flex-direction: column;2241  gap: 8px;2242}22432244/* ── Compact generator (inside entry edit) ── */2245.peach-generator-drawer-content--compact {2246  border-top: 1px solid var(--peach-t3);2247  padding: 8px 0 2px;2248  gap: 7px;2249}2250.peach-pwgen-compact-display-row {2251  display: flex;2252  align-items: center;2253  gap: 6px;2254}2255.peach-pwgen-compact-output {2256  flex: 1;2257  min-width: 0;2258  font-family: "IBM Plex Mono", monospace;2259  font-size: 0.6875rem;2260  font-weight: 400;2261  letter-spacing: 0.04em;2262  color: var(--peach-t0);2263  background: rgba(240, 232, 216, 0.04);2264  border: 1px solid var(--peach-t3);2265  border-radius: 5px;2266  padding: 5px 8px;2267  line-height: 1.5;2268  outline: none;2269  transition: border-color 120ms ease;2270}22712272.peach-pwgen-compact-output:focus {2273  border-color: var(--peach-t1);2274}2275.peach-pwgen-compact-controls {2276  display: flex;2277  align-items: center;2278  gap: 6px;2279}2280.peach-pwgen-compact-slider {2281  flex: 1;2282  min-width: 0;2283  height: 2px !important;2284}2285.peach-pwgen-compact-controls .peach-pwgen-len-num {2286  flex-shrink: 0;2287  min-width: 18px;2288  text-align: right;2289}2290.peach-pwgen-compact-pills {2291  display: flex;2292  gap: 3px;2293  flex-shrink: 0;2294}2295.peach-pwgen-compact-pills .peach-pwgen-pill {2296  padding: 2px 7px;2297  font-size: 0.5rem;2298}2299.peach-pwgen-compact-use {2300  flex-shrink: 0;2301  font-size: 0.625rem !important;2302  padding: 3px 9px !important;2303  min-height: 22px !important;2304  border-radius: 5px !important;2305}23062307/* ── Password edit row (input + eye toggle side-by-side) ── */2308.peach-password-edit-row {2309  display: flex;2310  align-items: center;2311  gap: 6px;2312}2313.peach-password-edit-row .peach-inline-input {2314  flex: 1;2315  min-width: 0;2316}23172318/* ── Generate toggle link ── */2319.peach-generate-toggle-link {2320  display: inline-flex;2321  align-items: center;2322  gap: 5px;2323  background: none;2324  border: none;2325  padding: 0;2326  cursor: pointer;2327  font-family: "IBM Plex Mono", monospace;2328  font-size: 0.625rem;2329  color: var(--peach-t2);2330  letter-spacing: 0.04em;2331  transition: color 120ms ease;2332  align-self: flex-start;2333}2334.peach-generate-toggle-link:hover {2335  color: var(--peach-accent);2336}23372338/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2339.peach-entry-body {2340  flex: 1;2341  overflow-y: auto;2342  overflow-x: hidden;2343  scrollbar-width: none;2344  -ms-overflow-style: none;2345  overscroll-behavior: contain;2346  display: grid;2347  gap: 10px;2348  align-content: start;2349  padding: 10px 20px 14px;2350  min-width: 0;2351  min-height: 0;2352}2353.peach-entry-body::-webkit-scrollbar { display: none; }23542355/* Type-toggle pills + inline note toolbar */2356.peach-new-type-row {2357  display: flex;2358  align-items: center;2359  gap: 6px;2360  margin-bottom: 2px;2361}2362.peach-new-type-btn {2363  background: transparent;2364  border: 1px solid var(--peach-t3);2365  border-radius: 12px;2366  padding: 3px 10px;2367  font-family: "IBM Plex Mono", monospace;2368  font-size: 0.5625rem;2369  letter-spacing: 0.12em;2370  text-transform: uppercase;2371  color: var(--peach-t2);2372  cursor: pointer;2373  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2374}2375.peach-new-type-btn.is-active {2376  color: var(--peach-t0);2377  border-color: var(--peach-accent);2378  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2379}2380.peach-new-type-btn:not(.is-active):hover {2381  color: var(--peach-t1);2382  border-color: var(--peach-t2);2383}23842385/* Editable title */2386.peach-new-title-wrap { margin: 0 0 2px; }2387.peach-new-title-input {2388  background: transparent;2389  border: none;2390  outline: none;2391  width: 100%;2392  color: var(--peach-t0);2393  font-family: var(--font-display);2394  font-style: italic;2395  font-weight: 400;2396  font-size: 40px;2397  line-height: 0.95;2398  caret-color: var(--peach-accent);2399}2400.peach-new-title-input::placeholder { color: var(--peach-t2); }24012402/* Editable domain field */2403.peach-domain-edit-row {2404  display: flex;2405  align-items: center;2406  gap: 6px;2407}24082409.peach-domain-edit-row .peach-domain-value--edit {2410  flex: 1;2411  width: 0;2412}24132414.peach-domain-url-btn {2415  flex-shrink: 0;2416  background: transparent;2417  border: none;2418  cursor: pointer;2419  color: var(--peach-t3);2420  padding: 2px 3px;2421  display: flex;2422  align-items: center;2423  line-height: 0;2424  border-radius: 3px;2425  transition: color 120ms ease;2426}24272428.peach-domain-url-btn:hover {2429  color: var(--peach-accent);2430}24312432.peach-domain-value--edit {2433  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2434  font-size: 0.625rem;2435  font-style: italic;2436  letter-spacing: 0.12em;2437  color: var(--peach-t1);2438  background: transparent;2439  border: none;2440  border-bottom: 1px solid var(--peach-t3);2441  outline: none;2442  width: 100%;2443  padding: 2px 0;2444  caret-color: var(--peach-accent);2445  transition: border-color 140ms ease, color 140ms ease;2446}2447.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2448.peach-domain-value--edit:focus {2449  border-bottom-color: rgba(240, 232, 216, 0.28);2450  color: var(--peach-t0);2451}24522453/* Editable field values (username, password, totp) */2454.peach-field-value--edit {2455  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2456  font-size: 0.8125rem;2457  color: var(--peach-t0);2458  background: transparent;2459  border: none;2460  border-bottom: 1px solid var(--peach-t3);2461  outline: none;2462  flex: 1;2463  min-width: 0;2464  padding: 3px 0;2465  caret-color: var(--peach-accent);2466  transition: border-color 140ms ease, color 140ms ease;2467}2468.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2469.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2470.peach-field-value--edit:focus {2471  border-bottom-color: rgba(240, 232, 216, 0.28);2472  color: var(--peach-t0);2473}24742475/* "+ add optional field" links */2476.peach-entry-add-links {2477  display: flex;2478  gap: 12px;2479  flex-wrap: wrap;2480  margin-top: -2px;2481}2482.peach-add-field-link {2483  background: transparent;2484  border: none;2485  padding: 0;2486  cursor: pointer;2487  font-family: "IBM Plex Mono", monospace;2488  font-size: 0.5625rem;2489  letter-spacing: 0.1em;2490  text-transform: uppercase;2491  color: var(--peach-t2);2492  transition: color 140ms ease;2493}2494.peach-add-field-link:hover { color: var(--peach-accent); }24952496/* ── New entry form (legacy classes) ────────────────────────────────── */2497.peach-new-body {2498  flex: 1;2499  overflow-y: auto;2500  padding: 10px 20px 14px;2501}2502.peach-new-name-input {2503  background: transparent;2504  border: none;2505  outline: none;2506  width: 100%;2507  color: var(--peach-t0);2508  font-family: var(--font-display);2509  font-style: italic;2510  font-weight: 400;2511  font-size: 40px;2512  line-height: 0.95;2513  caret-color: var(--peach-accent);2514}2515.peach-new-name-input::placeholder { color: var(--peach-t2); }2516.peach-new-field-input {2517  background: transparent;2518  border: none;2519  outline: none;2520  flex: 1;2521  min-width: 0;2522  caret-color: var(--peach-accent);2523}2524.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }25252526/* ── Canary card ── */2527.peach-canary-card {2528  border: 1px solid rgba(217, 160, 48, 0.2);2529  background: rgba(217, 160, 48, 0.03);2530  border-radius: 8px;2531  padding: 12px;2532}25332534.peach-canary-settings-header {2535  display: flex;2536  align-items: center;2537  justify-content: space-between;2538  cursor: pointer;2539  user-select: none;2540}25412542.peach-canary-card .peach-label {2543  color: rgba(217, 160, 48, 0.85);2544}25452546.peach-canary-card .peach-new-field-input {2547  border-color: rgba(217, 160, 48, 0.25);2548}25492550.peach-canary-card .peach-new-field-input:focus {2551  border-color: rgba(217, 160, 48, 0.5);2552}25532554.peach-canary-body {2555  margin-top: 12px;2556  display: flex;2557  flex-direction: column;2558  gap: 10px;2559}25602561.peach-canary-explainer {2562  display: flex;2563  gap: 10px;2564  padding: 10px 12px;2565  border-radius: 10px;2566  background: rgba(217, 160, 48, 0.06);2567  border: 1px solid rgba(217, 160, 48, 0.22);2568  margin-bottom: 4px;2569}25702571.peach-canary-explainer-icon {2572  font-size: 1rem;2573  flex-shrink: 0;2574  line-height: 1.2;2575}25762577.peach-canary-explainer-title {2578  font-family: var(--font-ui);2579  font-size: 0.6875rem;2580  font-weight: 500;2581  color: rgba(217, 160, 48, 0.9);2582  margin: 0 0 3px;2583}25842585.peach-canary-explainer-copy {2586  font-family: var(--font-ui);2587  font-size: 0.625rem;2588  color: var(--peach-t2);2589  line-height: 1.55;2590  margin: 0;2591}25922593.peach-canary-hint {2594  font-size: 0.625rem;2595  color: var(--peach-t2);2596  font-family: Inter, system-ui, sans-serif;2597  line-height: 1.5;2598  margin-top: 4px;2599}26002601.peach-canary-actions-row {2602  display: flex;2603  align-items: center;2604  gap: 8px;2605}26062607.peach-canary-test-btn {2608  border-color: rgba(217, 160, 48, 0.3);2609  color: rgba(217, 160, 48, 0.85);2610}26112612.peach-canary-test-result {2613  font-size: 0.625rem;2614  font-family: Inter, system-ui, sans-serif;2615}26162617.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2618.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }26192620.peach-canary-badge {2621  display: flex;2622  position: relative;2623  z-index: 1;2624  align-items: center;2625  gap: 5px;2626  padding: 4px 10px;2627  background: rgba(217, 160, 48, 0.12);2628  border: 1px solid rgba(217, 160, 48, 0.35);2629  border-radius: 6px;2630  margin-bottom: 6px;2631  width: fit-content;2632}26332634.peach-canary-badge-label {2635  font-size: 0.625rem;2636  letter-spacing: 0.06em;2637  color: rgba(217, 160, 48, 0.9);2638  font-family: var(--font-ui);2639  text-transform: uppercase;2640}26412642.peach-canary-badge-icon {2643  font-size: 0.6875rem;2644}26452646.peach-canary-suppress-row {2647  display: flex;2648  align-items: center;2649  gap: 8px;2650  padding: 6px 10px;2651  background: rgba(217, 160, 48, 0.08);2652  border-radius: 6px;2653  margin-bottom: 8px;2654}26552656.peach-canary-suppress-label {2657  font-size: 0.6875rem;2658  color: rgba(217, 160, 48, 0.85);2659  cursor: pointer;2660  font-family: var(--font-ui);2661  letter-spacing: 0.04em;2662}26632664.peach-regen-panel {2665  position: relative;2666  z-index: 1;2667  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2668  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2669  border-radius: 8px;2670  padding: 12px;2671  margin-bottom: 8px;2672}26732674.peach-regen-panel-header {2675  display: flex;2676  align-items: center;2677  justify-content: space-between;2678  margin-bottom: 10px;2679}26802681.peach-regen-panel-title {2682  font-size: 0.6875rem;2683  font-weight: 600;2684  letter-spacing: 0.06em;2685  text-transform: uppercase;2686  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2687}26882689.peach-regen-output {2690  background: rgba(0, 0, 0, 0.2);2691  border-radius: 6px;2692  padding: 10px;2693  margin-bottom: 10px;2694  font-family: var(--font-mono);2695  font-size: 0.8125rem;2696  word-break: break-all;2697  color: var(--peach-t1);2698}26992700.peach-regen-actions {2701  display: flex;2702  gap: 6px;2703}27042705.peach-regen-actions--spaced {2706  margin-bottom: 8px;2707}27082709.peach-regen-action-grow {2710  flex: 1;2711}27122713.peach-regen-copy-btn {2714  padding: 0 8px;2715}27162717.peach-regen-success {2718  position: relative;2719  z-index: 1;2720  background: rgba(40, 180, 80, 0.1);2721  border: 1px solid rgba(40, 180, 80, 0.3);2722  border-radius: 8px;2723  padding: 10px 12px;2724  margin-bottom: 8px;2725  display: flex;2726  align-items: center;2727  gap: 8px;2728  font-size: 0.6875rem;2729  color: rgba(40, 180, 80, 0.9);2730}27312732/* ── Note editor overlay ── */2733.peach-note-editor {2734  position: absolute;2735  inset: 0;2736  z-index: 200;2737  display: flex;2738  flex-direction: column;2739  background:2740    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2741    var(--peach-bg);2742  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2743}27442745.peach-note-editor-header {2746  display: flex;2747  align-items: center;2748  gap: 10px;2749  padding: 14px 16px 10px;2750  border-bottom: 1px solid var(--peach-t3);2751  flex-shrink: 0;2752}27532754.peach-note-editor-back {2755  background: transparent;2756  border: none;2757  cursor: pointer;2758  color: var(--peach-t2);2759  padding: 4px 6px;2760  border-radius: 6px;2761  display: flex;2762  align-items: center;2763  transition: color 120ms ease, background 120ms ease;2764  flex-shrink: 0;2765}2766.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }27672768.peach-note-editor-label {2769  flex: 1;2770  font-family: var(--font-display);2771  font-style: italic;2772  font-size: 0.9375rem;2773  color: var(--peach-t1);2774  letter-spacing: 0.02em;2775}27762777.peach-note-editor-save-btn {2778  background: transparent;2779  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2780  border-radius: 8px;2781  color: var(--peach-accent);2782  font-family: "IBM Plex Mono", monospace;2783  font-size: 0.625rem;2784  letter-spacing: 0.06em;2785  text-transform: uppercase;2786  padding: 3px 10px;2787  cursor: pointer;2788  transition: background 120ms ease, border-color 120ms ease;2789}2790.peach-note-editor-save-btn:hover:not(:disabled) {2791  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2792  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2793}2794.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }27952796.peach-note-toolbar {2797  display: flex;2798  align-items: center;2799  gap: 3px;2800  padding: 6px 14px 5px;2801  border-bottom: 1px solid var(--peach-t3);2802  flex-shrink: 0;2803}28042805.peach-note-tool-btn {2806  background: transparent;2807  border: 1px solid transparent;2808  border-radius: 5px;2809  color: var(--peach-t2);2810  font-family: "IBM Plex Mono", monospace;2811  font-size: 0.625rem;2812  letter-spacing: 0.04em;2813  padding: 2px 8px;2814  cursor: pointer;2815  line-height: 1.6;2816  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2817}2818.peach-note-tool-btn:hover {2819  background: var(--peach-t4);2820  color: var(--peach-t0);2821  border-color: var(--peach-t3);2822}28232824.peach-note-tool-icon {2825  padding: 3px 7px;2826  display: inline-flex;2827  align-items: center;2828  justify-content: center;2829}28302831.peach-note-tool-divider {2832  width: 1px;2833  height: 14px;2834  background: var(--peach-t3);2835  margin: 0 4px;2836  flex-shrink: 0;2837}28382839.peach-note-editor-body {2840  flex: 1;2841  overflow-y: auto;2842  padding: 16px 20px 20px;2843  outline: none;2844  font-family: var(--font-display);2845  font-size: 1rem;2846  line-height: 1.75;2847  color: var(--peach-t0);2848  scrollbar-width: none;2849  word-break: break-word;2850}2851.peach-note-editor-body:empty::before {2852  content: "write your note…";2853  color: var(--peach-t3);2854  font-style: italic;2855  pointer-events: none;2856}28572858/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2859.peach-note-editor-inline {2860  display: flex;2861  flex-direction: column;2862  flex: 1;2863  min-height: 0;2864}2865.peach-note-editor-body--inline {2866  flex: 1;2867  min-height: 0;2868  font-size: 0.9375rem;2869  padding: 10px 20px 14px;2870}28712872/* Full-width toolbar row inside the body (Add.tsx note type).2873   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */2874.peach-note-toolbar-body {2875  display: flex;2876  align-items: center;2877  gap: 3px;2878  padding: 5px 20px 4px;2879  margin: 2px -20px 0;2880  border-bottom: 1px solid var(--peach-t3);2881  flex-shrink: 0;2882}28832884/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2885   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2886   and .peach-note-tool-divider button-level styles. */2887.peach-note-toolbar-inline {2888  display: flex;2889  align-items: center;2890  gap: 3px;2891  margin-left: auto;2892  padding-left: 10px;2893  border-left: 1px solid var(--peach-t3);2894  min-height: 22px;2895}28962897/* Entry.tsx toolbar row (no tabs, toolbar only) */2898.peach-entry-note-toolbar-row {2899  display: flex;2900  align-items: center;2901  margin: 4px 0 6px;2902  position: relative;2903  z-index: 1;2904}2905.peach-entry-note-toolbar-row .peach-note-toolbar-inline {2906  border-left: none;2907  padding-left: 0;2908  margin-left: 0;2909}29102911/* Note body — fills available vertical space in Add.tsx and Entry.tsx */2912.peach-note-body {2913  display: flex;2914  flex-direction: column;2915  flex: 1;2916  min-height: 0;2917  margin: 4px 0 0;2918}2919.peach-entry-body--new .peach-note-body {2920  margin: 8px -20px 0;2921}29222923/* Add.tsx body is a grid by default; swap to a flex column when a note is2924   active so the note body can stretch and pin the tags row to the bottom. */2925.peach-entry-body--new:has(.peach-note-body) {2926  display: flex;2927  flex-direction: column;2928}29292930/* Rich content element styles (editor + display) */2931.peach-note-editor-body h2,2932.peach-note-content h2 {2933  font-family: var(--font-display);2934  font-size: 20px;2935  font-weight: 600;2936  font-style: italic;2937  color: var(--peach-t0);2938  margin: 6px 0 2px;2939  line-height: 1.3;2940}2941.peach-note-editor-body ul,2942.peach-note-content ul {2943  padding-left: 18px;2944  margin: 3px 0;2945  list-style: disc;2946}2947.peach-note-editor-body ol,2948.peach-note-content ol {2949  padding-left: 18px;2950  margin: 3px 0;2951  list-style: decimal;2952}2953.peach-note-editor-body li,2954.peach-note-content li { margin: 2px 0; }2955.peach-note-editor-body hr,2956.peach-note-content hr {2957  border: none;2958  border-top: 1px solid var(--peach-t3);2959  margin: 10px 0;2960}29612962/* font size elements from execCommand */2963.peach-note-editor-body font[size="1"],2964.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }2965.peach-note-editor-body font[size="2"],2966.peach-note-content font[size="2"] { font-size: 0.8125rem; }2967.peach-note-editor-body font[size="3"],2968.peach-note-content font[size="3"] { font-size: 1rem; }2969.peach-note-editor-body font[size="4"],2970.peach-note-content font[size="4"] { font-size: 20px; }2971.peach-note-editor-body font[size="5"],2972.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }29732974/* bold / italic inside the editor and note display */2975.peach-note-editor-body b, .peach-note-editor-body strong,2976.peach-note-content b, .peach-note-content strong { font-weight: 700; }2977.peach-note-editor-body em, .peach-note-editor-body i,2978.peach-note-content em, .peach-note-content i { font-style: italic; }29792980/* note display — rendered HTML, no pre-wrap */2981.peach-note-content {2982  overflow: auto;2983  max-height: 340px;2984  word-break: break-word;2985}29862987/* ── Note textarea ── */2988.peach-note-textarea {2989  width: 100%;2990  min-height: 180px;2991  max-height: 280px;2992  resize: vertical;2993  background: var(--peach-t4);2994  border: 1px solid var(--peach-t3);2995  border-radius: 8px;2996  padding: 10px 12px;2997  font-family: "IBM Plex Mono", monospace;2998  font-size: 0.75rem;2999  line-height: 1.7;3000  color: var(--peach-t1);3001  outline: none;3002  transition: border-color 150ms ease;3003}30043005.peach-note-textarea:focus {3006  border-color: var(--peach-t2);3007}30083009.peach-note-char-count {3010  font-family: "IBM Plex Mono", monospace;3011  font-size: 0.5625rem;3012  color: var(--peach-t3);3013  text-align: right;3014  margin-top: 4px;3015  letter-spacing: 0.1em;3016}30173018/* ── Field input baseline ── */3019.peach-new-field-input {3020  width: 100%;3021  background: transparent;3022  border: none;3023  border-bottom: 1px solid var(--peach-t3);3024  padding: 4px 0;3025  color: var(--peach-t1);3026  font-family: "IBM Plex Mono", monospace;3027  font-size: 0.8125rem;3028  outline: none;3029  transition: border-color 150ms ease;3030}30313032.peach-new-field-input:focus {3033  border-bottom-color: var(--peach-t0);3034  color: var(--peach-t0);3035}30363037.peach-new-name-input {3038  width: 100%;3039  background: transparent;3040  border: none;3041  border-bottom: 1px solid var(--peach-t3);3042  padding: 6px 0;3043  font-family: var(--font-display);3044  font-style: italic;3045  font-size: 28px;3046  color: var(--peach-t0);3047  outline: none;3048  transition: border-color 150ms ease;3049}30503051.peach-new-name-input:focus {3052  border-bottom-color: var(--peach-t1);3053}30543055.peach-new-name-input::placeholder {3056  color: var(--peach-t2);3057  font-style: italic;3058}30593060.peach-new-field-input::placeholder {3061  color: var(--peach-t3);3062}30633064/* ── Demo entrance animation ── */3065#hd-shell {3066  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3067}3068@keyframes hd-shell-enter {3069  from { opacity: 0; transform: scale(0.96) translateY(16px); }3070  to   { opacity: 1; transform: scale(1) translateY(0); }3071}30723073/* ── Keyframes ── */3074@keyframes peach-char-enter {3075  from { opacity: 0; transform: translateY(0.22em); }3076  to   { opacity: 1; transform: translateY(0); }3077}3078@keyframes peach-content-enter {3079  from { opacity: 0.96; transform: translateY(4px); }3080  to   { opacity: 1; transform: translateY(0); }3081}3082@keyframes peach-content-exit {3083  from { opacity: 1; transform: translateY(0); }3084  to   { opacity: 0.92; transform: translateY(-3px); }3085}3086@keyframes peach-screen-enter {3087  from { opacity: 0; transform: translateY(14px); }3088  to   { opacity: 1; transform: translateY(0); }3089}3090@keyframes peach-shell-fade-in {3091  from { opacity: 0; }3092  to   { opacity: 1; }3093}3094@keyframes peach-veil-in {3095  from { opacity: 0; }3096  to   { opacity: 1; }3097}3098@keyframes peach-lock-settle {3099  0%   { transform: scale(0.9); }3100  65%  { transform: scale(1.08); }3101  100% { transform: scale(1); }3102}3103@keyframes peach-copy-confirm {3104  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3105  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); }3106}3107@keyframes peach-copy-retreat {3108  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); }3109  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3110}3111@keyframes peach-copy-flood {3112  from { opacity: 0; transform: scaleX(0.15); }3113  to   { opacity: 1; transform: scaleX(1); }3114}3115@keyframes peach-copy-icon-settle {3116  from  { transform: scale(0.84); }3117  70%   { transform: scale(1.08); }3118  to    { transform: scale(1); }3119}3120@keyframes peach-copy-sheen-retreat {3121  from { opacity: 1; transform: scaleX(1); }3122  to   { opacity: 0; transform: scaleX(0.15); }3123}3124@keyframes peach-copy-drain {3125  from { width: 100%; }3126  to   { width: 0; }3127}3128@keyframes peach-shake {3129  0%, 100% { transform: translateX(0); }3130  20%      { transform: translateX(-6px); }3131  40%      { transform: translateX(6px); }3132  60%      { transform: translateX(-4px); }3133  80%      { transform: translateX(4px); }3134}31353136@keyframes pip-pulse {3137  0% { transform: scale(1); }3138  40% { transform: scale(2.2); }3139  100% { transform: scale(1); }3140}314131423143/* ── Password generator ── */3144.peach-pwgen-body {3145  flex: 1; overflow-y: auto;3146  display: flex; flex-direction: column;3147}3148.peach-policy-badge {3149  display: flex; align-items: center;3150  padding: 6px 20px 0;3151  font-size: 0.625rem; font-family: Inter, sans-serif;3152  color: var(--peach-t2); letter-spacing: 0.04em;3153}3154.peach-pwgen-display {3155  padding: 14px 20px 12px;3156  border-bottom: 1px solid var(--peach-t3);3157  display: flex; align-items: flex-start; gap: 10px;3158}3159.peach-pwgen-display-row {3160  display: flex;3161  align-items: flex-start;3162  gap: 8px;3163  padding-bottom: 8px;3164  border-bottom: 1px solid var(--peach-t3);3165}3166.peach-pwgen-output {3167  flex: 1; min-width: 0; margin: 0;3168  font-family: "IBM Plex Mono", monospace;3169  font-size: 0.8125rem; color: var(--peach-t0);3170  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3171  white-space: normal;3172  padding: 10px 12px;3173  background: var(--peach-t4);3174  border-radius: 6px;3175  min-height: 36px;3176}3177.peach-pwgen-output-display {3178  flex: 1;3179  min-width: 0;3180  margin: 0;3181  font-family: var(--font-display);3182  font-style: italic;3183  font-weight: 300;3184  font-size: 32px;3185  line-height: 1.05;3186  color: var(--peach-t0);3187  word-break: break-all;3188  overflow-wrap: break-word;3189  white-space: normal;3190  letter-spacing: 0.02em;3191}3192.peach-pwgen-display-actions {3193  display: flex;3194  flex-direction: column;3195  gap: 4px;3196  flex-shrink: 0;3197  margin-top: 2px;3198}3199.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3200.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3201.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3202.peach-pwgen-len-num {3203  font-family: "IBM Plex Mono", monospace;3204  font-size: 0.75rem; color: var(--peach-accent);3205}3206.peach-pwgen-len-num--edit {3207  cursor: text;3208  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3209}3210.peach-pwgen-len-input {3211  font-family: "IBM Plex Mono", monospace;3212  font-size: 0.75rem;3213  color: var(--peach-accent);3214  background: transparent;3215  border: none;3216  border-bottom: 1px solid var(--peach-accent);3217  outline: none;3218  width: 32px;3219  text-align: right;3220  padding: 0;3221}3222.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3223.peach-pwgen-toggles { display: flex; flex-direction: column; }3224.peach-pwgen-charset-pills {3225  display: flex;3226  gap: 6px;3227  flex-wrap: wrap;3228}3229.peach-pwgen-pill {3230  padding: 4px 11px;3231  border-radius: 999px;3232  border: 1px solid var(--peach-t3);3233  background: transparent;3234  color: var(--peach-t2);3235  font-family: "IBM Plex Mono", monospace;3236  font-size: 0.5625rem;3237  letter-spacing: 0.08em;3238  cursor: pointer;3239  transition: all 150ms ease;3240}3241.peach-pwgen-pill.is-on {3242  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3243  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3244  color: var(--peach-accent);3245}3246.peach-pwgen-pill:not(.is-on):hover {3247  color: var(--peach-t1);3248  border-color: var(--peach-t2);3249}3250.peach-pwgen-use-btn {3251  width: 100%;3252  min-height: 34px;3253  border-radius: 8px;3254  margin-top: 2px;3255}3256.peach-generator-constraint-note {3257  font-family: 'IBM Plex Mono', monospace;3258  font-size: 10px;3259  color: var(--peach-t3);3260  letter-spacing: 0.04em;3261  margin: 0;3262  transition: opacity 200ms ease;3263}3264.peach-pwgen-toggle-row {3265  display: flex; align-items: center; justify-content: space-between;3266  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3267}3268.peach-pwgen-toggle-row:last-child { border-bottom: none; }3269.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }32703271.peach-screen-prelock {3272  z-index: 10;3273}32743275.prelock-form {3276  display: grid;3277  gap: 12px;3278}32793280/* Peach popup should not expose native scrollbars on internal panels. */3281.peach-settings-body,3282.peach-new-body,3283.peach-pwgen-body,3284.lock-screen,3285.peach-import-preview {3286  scrollbar-width: none;3287  -ms-overflow-style: none;3288  overscroll-behavior: contain;3289}3290.peach-settings-body::-webkit-scrollbar,3291.peach-new-body::-webkit-scrollbar,3292.peach-pwgen-body::-webkit-scrollbar,3293.lock-screen::-webkit-scrollbar,3294.peach-import-preview::-webkit-scrollbar {3295  width: 0;3296  height: 0;3297  display: none;3298}32993300.lock-screen {3301  height: 100%;3302  min-height: 100%;3303  overflow-y: auto;3304  padding: 18px 18px 16px;3305  gap: 14px;3306  grid-template-rows: auto auto auto 1fr auto;3307  align-content: stretch;3308  position: relative;3309  isolation: isolate;3310}3311.peach-screen.lock-screen--vault-stage {3312  display: flex;3313  flex-direction: column;3314  justify-content: flex-start;3315  gap: 18px;3316  padding: 20px 18px 18px;3317  overflow: hidden;3318}3319.peach-screen.lock-screen--vault-stage .peach-lock-panel {3320  margin-top: 0;3321}3322.lock-screen--onboarding {3323  display: flex;3324  flex-direction: column;3325  gap: 12px;3326  justify-content: flex-start;3327}33283329.lock-screen::before {3330  content: "";3331  position: absolute;3332  inset: 12px 18px auto auto;3333  width: 160px;3334  height: 160px;3335  border-radius: 999px;3336  background:3337    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%);3338  filter: blur(6px);3339  opacity: 0.7;3340  pointer-events: none;3341  z-index: 0;3342}33433344.peach-lock-rune-string {3345  flex: 1;3346  display: flex;3347  align-items: center;3348  justify-content: center;3349  gap: 6px;3350  font-family: PeachScript, monospace;3351  font-size: 0.8125rem;3352  letter-spacing: 0.05em;3353  pointer-events: none;3354  user-select: none;3355  position: relative;3356  z-index: 1;3357}33583359.peach-lock-rune-string span {3360  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3361  text-shadow:3362    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3363    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3364  transition: color 0.9s ease, text-shadow 0.9s ease;3365}33663367.peach-lock-rune-string span.is-glowing {3368  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3369  text-shadow:3370    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3371    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3372}33733374.lock-screen-header {3375  display: flex;3376  align-items: center;3377  justify-content: space-between;3378  position: relative;3379  z-index: 1;3380}33813382.lock-password-input.shake {3383  animation: peach-shake 300ms ease-in-out;3384}33853386.peach-hint-error {3387  color: rgba(220, 80, 60, 0.92);3388}33893390.peach-onboarding-headline {3391  margin: 0;3392  font-family: var(--font-display);3393  font-size: 35px;3394  line-height: 0.88;3395  font-style: italic;3396  font-weight: 400;3397  max-width: 252px;3398}33993400.peach-lock-copy {3401  display: grid;3402  gap: 8px;3403  position: relative;3404  z-index: 1;3405}34063407.peach-lock-copy--onboarding {3408  gap: 10px;3409}34103411.peach-lock-hero {3412  position: relative;3413  z-index: 1;3414  display: grid;3415  gap: 8px;3416  min-height: 0;3417  padding: 4px 2px 0;3418  border: none;3419  border-radius: 0;3420  background: transparent;3421  box-shadow: none;3422}3423.peach-lock-hero-art {3424  position: absolute;3425  right: -8px;3426  top: -6px;3427  width: 120px;3428  height: 120px;3429  display: flex;3430  align-items: center;3431  justify-content: center;3432  pointer-events: none;3433  opacity: 0.12;3434  filter: saturate(0.9);3435}3436.peach-lock-hero-mark {3437  width: 100%;3438  height: 100%;3439}3440/* Peach body stays brand-peach across every accent — we don't want a3441   green or blue peach when sage/sky is selected. Leaf + vein keep the3442   sage tint because a real peach has a sage leaf. In the new brand-kit3443   mark the leaf is path 1 and the vein stroke is path 2; the body and3444   back-lobe (paths 3 + 4) must stay untouched. */3445.peach-lock-hero-mark path:nth-child(1) {3446  fill: rgba(123, 144, 96, 0.88);3447}3448.peach-lock-hero-mark path:nth-child(2) {3449  stroke: rgba(94, 122, 66, 0.95);3450}3451.peach-lock-hero > *:not(.peach-lock-hero-art) {3452  position: relative;3453  z-index: 1;3454}34553456.peach-lock-eyebrow {3457  display: inline-flex;3458  align-items: center;3459  width: fit-content;3460  padding: 4px 9px;3461  border-radius: 999px;3462  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3463  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3464  color: var(--peach-t0);3465  font-family: "IBM Plex Mono", monospace;3466  font-size: 0.5rem;3467  letter-spacing: 0.18em;3468  text-transform: uppercase;3469}34703471.peach-lock-label-row {3472  display: flex;3473  align-items: center;3474  justify-content: space-between;3475  margin-bottom: 0;3476}34773478.peach-lock-reveal-btn {3479  display: inline-flex;3480  align-items: center;3481  gap: 4px;3482  background: none;3483  border: none;3484  cursor: pointer;3485  font-family: "IBM Plex Mono", monospace;3486  font-size: 0.5625rem;3487  letter-spacing: 0.06em;3488  color: var(--peach-t2);3489  padding: 2px 0;3490  transition: color 150ms ease;3491}34923493.peach-lock-reveal-btn:hover {3494  color: var(--peach-t1);3495}34963497.peach-lock-warning {3498  color: rgba(220, 80, 60, 0.85) !important;3499  line-height: 1.5;3500}35013502.peach-onboarding-cards {3503  display: grid;3504  gap: 8px;3505  position: relative;3506  z-index: 1;3507}35083509.peach-lock-panel {3510  position: relative;3511  z-index: 1;3512  display: grid;3513  gap: 9px;3514  padding: 14px 16px 15px;3515  border-radius: 18px;3516  border: 1px solid var(--peach-t3);3517  background:3518    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3519  box-shadow:3520    inset 0 1px 0 rgba(240, 232, 216, 0.04),3521    0 12px 28px rgba(0, 0, 0, 0.12);3522}35233524/* Glass surface — lock panel and settings groups */3525.peach-glass {3526  background: rgba(26, 20, 16, 0.65);3527  border: 1px solid rgba(255, 255, 255, 0.08);3528  border-radius: 12px;3529  backdrop-filter: blur(12px) saturate(1.4);3530  -webkit-backdrop-filter: blur(12px) saturate(1.4);3531}35323533@supports not (backdrop-filter: blur(1px)) {3534  .peach-glass {3535    background: rgba(26, 20, 16, 0.92);3536    border: 1px solid rgba(255, 255, 255, 0.10);3537    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3538  }3539}35403541.light .peach-glass,3542[data-theme="light"] .peach-glass {3543  background: rgba(240, 233, 223, 0.72);3544  border: 1px solid rgba(26, 18, 8, 0.08);3545  backdrop-filter: blur(12px) saturate(1.2);3546  -webkit-backdrop-filter: blur(12px) saturate(1.2);3547}35483549@supports not (backdrop-filter: blur(1px)) {3550  .light .peach-glass,3551  [data-theme="light"] .peach-glass {3552    background: rgba(240, 233, 223, 0.97);3553    border: 1px solid rgba(26, 18, 8, 0.10);3554  }3555}35563557/* Lock panel keeps its own border-radius over the generic glass token */3558.peach-lock-panel.peach-glass {3559  border-radius: 18px;3560  background: rgba(26, 20, 16, 0.65);3561  border: 1px solid rgba(255, 255, 255, 0.08);3562  box-shadow:3563    inset 0 1px 0 rgba(255, 255, 255, 0.05),3564    0 12px 28px rgba(0, 0, 0, 0.3);3565}35663567.light .peach-lock-panel.peach-glass,3568[data-theme="light"] .peach-lock-panel.peach-glass {3569  background: rgba(240, 233, 223, 0.82);3570  border: 1px solid rgba(26, 18, 8, 0.08);3571  box-shadow:3572    inset 0 1px 0 rgba(255, 255, 255, 0.4),3573    0 8px 24px rgba(80, 56, 32, 0.15);3574}35753576@supports not (backdrop-filter: blur(1px)) {3577  .peach-lock-panel.peach-glass {3578    background: rgba(26, 20, 16, 0.92);3579    box-shadow:3580      inset 0 1px 0 rgba(255, 255, 255, 0.05),3581      0 12px 28px rgba(0, 0, 0, 0.4);3582  }3583  .light .peach-lock-panel.peach-glass,3584  [data-theme="light"] .peach-lock-panel.peach-glass {3585    background: rgba(240, 233, 223, 0.98);3586  }3587}35883589.peach-lock-panel--secondary {3590  gap: 12px;3591}35923593.peach-lock-panel-header {3594  display: flex;3595  align-items: baseline;3596  justify-content: space-between;3597  gap: 12px;3598}35993600.peach-lock-option-grid {3601  display: grid;3602  gap: 10px;3603}36043605.peach-lock-option {3606  width: 100%;3607  display: grid;3608  gap: 6px;3609  padding: 14px 15px;3610  border-radius: 16px;3611  border: 1px solid rgba(240, 232, 216, 0.08);3612  background: rgba(240, 232, 216, 0.02);3613  color: var(--peach-t0);3614  text-align: left;3615  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3616}36173618.peach-lock-option:hover {3619  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3620  background: rgba(240, 232, 216, 0.04);3621  transform: translateY(-1px);3622}36233624.peach-lock-option-title {3625  font-size: 0.75rem;3626  color: var(--peach-t0);3627}36283629.peach-lock-option-copy {3630  font-size: 0.6875rem;3631  line-height: 1.55;3632  color: var(--peach-t1);3633}36343635.peach-onboarding-stack {3636  margin-top: 2px;3637}3638.peach-lock-panel-footer {3639  display: grid;3640  gap: 6px;3641  margin-top: 2px;3642  padding-top: 10px;3643  border-top: 1px solid rgba(240, 232, 216, 0.06);3644}36453646/* ── Restore tab view ─────────────────────────────────────────────────────3647   Tab-based restore screen replacing the old three-card picker. */36483649.peach-restore-tabview {3650  overflow: hidden;3651}36523653.peach-restore-tabcard {3654  flex: 1;3655  display: flex;3656  flex-direction: column;3657  gap: 0;3658  padding: 0;3659  overflow: hidden;3660  cursor: default;3661  user-select: none;3662  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3663}36643665/* ── Tab selector ─────────────────────────────────────────────────────── */36663667.peach-restore-tabs {3668  display: flex;3669  justify-content: space-around;3670  padding: 14px 10px 10px;3671  border-bottom: 1px solid var(--peach-t3);3672  gap: 2px;3673  overflow: hidden;3674  scrollbar-width: none;3675}3676.peach-restore-tabs::-webkit-scrollbar { display: none; }36773678.peach-restore-tab {3679  background: none;3680  border: none;3681  cursor: pointer;3682  padding: 3px 2px;3683  font-family: 'Cormorant Garamond', Georgia, serif;3684  font-style: italic;3685  font-size: 11px;3686  color: var(--peach-t2);3687  transition: color 150ms ease, text-shadow 150ms ease;3688  flex: 1;3689  min-width: 0;3690  text-align: center;3691  white-space: nowrap;3692  overflow: hidden;3693  text-overflow: ellipsis;3694}3695.peach-restore-tab:hover {3696  color: var(--peach-accent);3697  text-shadow:3698    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3699    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3700}3701.peach-restore-tab.is-active {3702  color: var(--peach-accent);3703  text-shadow:3704    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3705    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3706}37073708/* ── Content area ─────────────────────────────────────────────────────── */37093710.peach-restore-content {3711  padding: 16px 16px 14px;3712  display: flex;3713  flex-direction: column;3714  gap: 8px;3715  overflow: hidden;3716  scrollbar-width: none;3717  flex: 1;3718}3719.peach-restore-content::-webkit-scrollbar { display: none; }3720.peach-restore-content > * {3721  overflow: hidden;3722  scrollbar-width: none;3723}3724.peach-restore-content > *::-webkit-scrollbar { display: none; }37253726/* ── Shared tab inner layout ──────────────────────────────────────────── */37273728.peach-rt-symbols,3729.peach-rt-csv,3730.peach-rt-phone {3731  display: flex;3732  flex-direction: column;3733  gap: 8px;3734  overflow: hidden;3735}37363737.peach-rt-submit {3738  width: 100%;3739}37403741.peach-rt-error {3742  margin: 0;3743  font-size: 0.6875rem;3744  color: var(--peach-breach);3745  line-height: 1.4;3746}37473748/* ── PeachScript tab ──────────────────────────────────────────────────── */37493750.peach-restore-symbols-textarea {3751  font-family: 'PeachScript', monospace;3752  font-size: 13px;3753  line-height: 1.9;3754  letter-spacing: 0.1em;3755  word-break: break-all;3756  resize: none;3757  width: 100%;3758  min-height: 56px;3759  max-height: 72px;3760  overflow: hidden;3761  scrollbar-width: none;3762  -ms-overflow-style: none;3763  box-sizing: border-box;3764  padding: 6px 8px;3765  border-radius: 8px;3766  border: 1px solid var(--peach-t3);3767  background: rgba(240, 232, 216, 0.03);3768  color: var(--peach-t0);3769}3770.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3771.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }37723773.peach-restore-symbols-pass {3774  width: 100%;3775  box-sizing: border-box;3776  padding: 7px 10px;3777  border-radius: 8px;3778  border: 1px solid var(--peach-t3);3779  background: rgba(240, 232, 216, 0.03);3780  color: var(--peach-t0);3781  font-size: 0.8125rem;3782}3783.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }3784.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }37853786.peach-rt-divider {3787  text-align: center;3788  font-size: 0.6875rem;3789  color: var(--peach-t2);3790  font-style: italic;3791}37923793.peach-rt-file-label {3794  width: 100%;3795  justify-content: center;3796}37973798.peach-rt-anim-canvas {3799  width: 100%;3800  height: 180px;3801  border-radius: 10px;3802  overflow: hidden;3803  display: block;3804}38053806/* ── CSV tab ──────────────────────────────────────────────────────────── */38073808.peach-rt-csv-sources {3809  margin: 0;3810  font-size: 0.6875rem;3811  color: var(--peach-t2);3812  line-height: 1.5;3813  text-align: center;3814}38153816.peach-rt-csv-warning {3817  margin: 0;3818  font-family: "IBM Plex Mono", monospace;3819  font-size: 0.5625rem;3820  letter-spacing: 0.12em;3821  color: var(--peach-breach);3822  text-align: center;3823}38243825/* ── From Phone tab ───────────────────────────────────────────────────── */38263827.peach-rt-phone-code {3828  margin: 0;3829  text-align: center;3830  font-family: "IBM Plex Mono", monospace;3831  font-size: 22px;3832  letter-spacing: 0.18em;3833  color: var(--peach-t0);3834}38353836.peach-rt-phone-qr {3837  display: block;3838  width: 96px;3839  height: 96px;3840  margin: 0 auto;3841  border-radius: 6px;3842  image-rendering: pixelated;3843  overflow: hidden;3844}38453846.peach-rt-phone-hint {3847  margin: 0;3848  font-size: 0.6875rem;3849  color: var(--peach-t2);3850  line-height: 1.55;3851  text-align: center;3852}38533854/* ── Intro popup ──────────────────────────────────────────────────────── */38553856.peach-restore-intro-overlay {3857  position: absolute;3858  inset: 0;3859  z-index: 100;3860  display: flex;3861  align-items: center;3862  justify-content: center;3863  padding: 20px;3864  background: rgba(12, 10, 6, 0.7);3865  backdrop-filter: blur(4px);3866  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;3867}38683869.peach-restore-intro-card {3870  width: 100%;3871  display: flex;3872  flex-direction: column;3873  gap: 12px;3874  padding: 22px 20px 20px;3875  border-radius: 16px;3876  border: 1px solid var(--peach-t3);3877  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));3878  backdrop-filter: blur(4px);3879  -webkit-backdrop-filter: blur(4px);3880  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);3881}38823883.peach-restore-intro-headline {3884  margin: 0;3885  font-family: var(--font-display);3886  font-style: italic;3887  font-size: 20px;3888  font-weight: 400;3889  color: var(--peach-t0);3890}38913892.peach-restore-intro-body {3893  display: flex;3894  flex-direction: column;3895  gap: 8px;3896}3897.peach-restore-intro-body p {3898  margin: 0;3899  font-size: 0.75rem;3900  color: var(--peach-t1);3901  line-height: 1.5;3902}39033904.peach-restore-intro-btn {3905  width: 100%;3906  margin-top: 4px;3907}39083909/* Snapshot restore panel */3910.peach-snapshot-panel {3911  gap: 10px;3912  overflow-y: auto;3913  max-height: 340px;3914}3915.peach-snapshot-list {3916  display: flex;3917  flex-direction: column;3918  gap: 4px;3919}3920.peach-snapshot-row {3921  display: flex;3922  align-items: center;3923  justify-content: space-between;3924  width: 100%;3925  padding: 8px 10px;3926  border-radius: 8px;3927  border: 1px solid rgba(240, 232, 216, 0.07);3928  background: transparent;3929  cursor: pointer;3930  transition: border-color 120ms, background 120ms;3931  text-align: left;3932  gap: 8px;3933}3934.peach-snapshot-row:hover {3935  border-color: rgba(240, 232, 216, 0.14);3936  background: rgba(240, 232, 216, 0.03);3937}3938.peach-snapshot-row.is-selected {3939  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3940  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);3941}3942.peach-snapshot-time {3943  font-size: 11.5px;3944  color: var(--peach-t0);3945  flex: 1;3946}3947.peach-snapshot-count {3948  font-family: "IBM Plex Mono", monospace;3949  font-size: 0.625rem;3950  color: var(--peach-t2);3951  flex-shrink: 0;3952}3953.peach-snapshot-confirm {3954  display: flex;3955  flex-direction: column;3956  gap: 8px;3957  padding-top: 10px;3958  border-top: 1px solid rgba(240, 232, 216, 0.06);3959}3960.peach-snapshot-warning {3961  display: flex;3962  align-items: flex-start;3963  gap: 6px;3964  font-size: 10.5px;3965  color: rgba(220, 80, 60, 0.85);3966  line-height: 1.55;3967}3968.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }3969.peach-snapshot-confirm-row {3970  display: flex;3971  gap: 6px;3972  align-items: center;3973}3974.peach-snapshot-restore-btn {3975  width: 100%;3976}3977.peach-lock-hero--unlock .peach-lock-hero-art {3978  width: 112px;3979  height: 112px;3980  right: 0;3981  top: 2px;3982  opacity: 0.1;3983}39843985.peach-card {3986  border: 1px solid var(--peach-t3);3987  border-radius: 18px;3988  background:3989    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);3990  box-shadow:3991    inset 0 0 0 1px var(--peach-border-accent),3992    inset 0 1px 0 rgba(240, 232, 216, 0.04),3993    0 12px 32px rgba(0, 0, 0, 0.14);3994  overflow: hidden;3995}39963997.peach-card-active {3998  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);3999  box-shadow:4000    inset 0 1px 0 rgba(240, 232, 216, 0.05),4001    0 16px 38px rgba(0, 0, 0, 0.18),4002    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4003}40044005.peach-card-disabled {4006  opacity: 0.72;4007}40084009.peach-card-header {4010  width: 100%;4011  padding: 13px 16px 11px;4012  background: transparent;4013  color: var(--peach-t0);4014  display: flex;4015  justify-content: space-between;4016  align-items: center;4017  text-align: left;4018  font-size: 0.75rem;4019}40204021.peach-card-body {4022  padding: 0 16px 16px;4023  display: grid;4024  gap: 9px;4025}40264027.peach-card-tag {4028  color: var(--peach-t2);4029  font-family: "IBM Plex Mono", monospace;4030  font-size: 0.5625rem;4031  letter-spacing: 0.12em;4032  text-transform: uppercase;4033}40344035.peach-empty-copy {4036  display: grid;4037  gap: 6px;4038  color: var(--peach-t1);4039  font-size: 0.8125rem;4040}40414042.peach-lock-submit {4043  width: 100%;4044  box-shadow:4045    0 1px 0 rgba(255,255,255,0.10) inset,4046    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4047    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4048    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4049}40504051.peach-lock-secondary {4052  width: 100%;4053  border-color: var(--peach-t3);4054  background: rgba(240, 232, 216, 0.02);4055}40564057.peach-lock-secondary:hover {4058  background: rgba(240, 232, 216, 0.04);4059}40604061.peach-lock-note {4062  max-width: none;4063  line-height: 1.55;4064  margin: 0;4065}40664067.peach-overlay-action {4068  font-size: 0.625rem;4069  padding: 4px 8px;4070  letter-spacing: 0.06em;4071  min-width: 44px;4072  text-align: center;4073}40744075.peach-overlay-spacer {4076  width: 32px;4077}40784079.peach-inline-action {4080  flex-shrink: 0;4081  font-size: 0.5625rem;4082  letter-spacing: 0.1em;4083  text-transform: uppercase;4084  padding: 4px 7px;4085}4086.peach-password-toggle-btn {4087  display: inline-flex;4088  align-items: center;4089  justify-content: center;4090  min-width: 30px;4091  min-height: 26px;4092  padding: 0 7px;4093  border: 1px solid var(--peach-t3);4094  border-radius: 999px;4095  background: rgba(240, 232, 216, 0.04);4096  color: var(--peach-t2);4097  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4098}4099.peach-password-toggle-btn:hover {4100  border-color: var(--peach-t2);4101  color: var(--peach-t0);4102  background: rgba(240, 232, 216, 0.06);4103}41044105.peach-new-textarea {4106  width: 100%;4107  min-height: 88px;4108  resize: vertical;4109  border: 0;4110  outline: none;4111  background: transparent;4112  color: var(--peach-t1);4113  font-family: "IBM Plex Mono", monospace;4114  font-size: 0.75rem;4115  line-height: 1.65;4116  caret-color: var(--peach-accent);4117}41184119.peach-new-textarea::placeholder {4120  color: var(--peach-t2);4121  opacity: 0.7;4122}41234124.peach-settings-actions {4125  display: grid;4126  gap: 8px;4127}41284129.peach-sync-section-label {4130  font-size: 0.6875rem;4131  color: var(--peach-t2);4132  text-transform: uppercase;4133  letter-spacing: 0.05em;4134}41354136.peach-sync-network-note {4137  margin: 0 0 6px;4138  font-size: 0.75rem;4139  color: var(--peach-t2);4140  line-height: 1.4;4141}41424143.peach-settings-row--tappable {4144  background: none;4145  border: none;4146  width: 100%;4147  text-align: left;4148  cursor: pointer;4149  color: var(--peach-t1);4150  font-size: 0.8125rem;4151}4152.peach-settings-row--tappable:hover {4153  color: var(--peach-t0);4154}41554156.peach-sync-pro-hint {4157  display: flex;4158  flex-direction: column;4159  align-items: flex-start;4160  gap: 8px;4161  padding: 12px 0 4px;4162}41634164.peach-sync-device-row {4165  display: flex;4166  justify-content: space-between;4167  align-items: center;4168  padding: 6px 0;4169  border-bottom: 1px solid var(--peach-t3);4170}41714172.peach-sync-device-info {4173  display: flex;4174  flex-direction: column;4175  gap: 2px;4176}41774178.peach-sync-device-name {4179  font-size: 0.8125rem;4180  color: var(--peach-t0);4181}41824183.peach-sync-device-meta {4184  font-size: 0.6875rem;4185  color: var(--peach-t2);4186}41874188.peach-sync-status-dot {4189  display: inline-block;4190  width: 8px;4191  height: 8px;4192  border-radius: 50%;4193  vertical-align: middle;4194}41954196.peach-sync-remove-btn {4197  color: var(--peach-breach);4198}41994200.peach-sync-advanced-row {4201  display: flex;4202  justify-content: space-between;4203  align-items: center;4204  padding: 6px 0;4205  gap: 12px;4206}42074208.peach-sync-advanced-info {4209  display: flex;4210  flex-direction: column;4211  gap: 2px;4212  flex: 1;4213}42144215.peach-sync-advanced-name {4216  font-size: 0.8125rem;4217  color: var(--peach-t0);4218}42194220.peach-sync-reset-confirm {4221  display: flex;4222  flex-direction: column;4223  gap: 8px;4224  padding: 10px;4225  border: 1px solid var(--peach-breach);4226  border-radius: 10px;4227  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4228}42294230.peach-sync-reset-confirm-headline {4231  font-size: 0.8125rem;4232  font-weight: 600;4233  color: var(--peach-t0);4234  margin: 0;4235}42364237.peach-sync-reset-confirm-body {4238  font-size: 0.75rem;4239  color: var(--peach-t1);4240  margin: 0;4241  line-height: 1.4;4242}42434244.peach-btn--danger {4245  background: var(--peach-breach);4246  color: #fff;4247  border-color: var(--peach-breach);4248}4249.peach-btn--danger:hover:not(:disabled) {4250  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4251}4252.peach-btn--danger:disabled {4253  opacity: 0.55;4254  cursor: not-allowed;4255}42564257.peach-sync-hero-icon {4258  color: var(--peach-t1);4259  opacity: 0.85;4260}42614262.peach-import-preview {4263  margin-bottom: 12px;4264  max-height: 152px;4265  overflow-y: auto;4266  border: 1px solid var(--peach-t3);4267  border-radius: 10px;4268  padding: 8px 10px;4269  display: grid;4270  gap: 8px;4271  background: rgba(240, 232, 216, 0.02);4272}42734274.peach-import-preview-row {4275  display: flex;4276  justify-content: space-between;4277  gap: 10px;4278  font-size: 0.6875rem;4279  color: var(--peach-t1);4280}42814282.peach-import-preview-title {4283  color: var(--peach-t0);4284  flex: 1;4285  min-width: 0;4286  overflow: hidden;4287  text-overflow: ellipsis;4288  white-space: nowrap;4289}42904291.peach-import-preview-meta {4292  color: var(--peach-t2);4293  flex-shrink: 0;4294  max-width: 42%;4295  overflow: hidden;4296  text-overflow: ellipsis;4297  white-space: nowrap;4298}42994300.peach-import-preview-more {4301  color: var(--peach-t2);4302  font-size: 0.625rem;4303}43044305.peach-restore-copy {4306  margin: 0;4307  color: var(--peach-t1);4308  font-size: 0.6875rem;4309  line-height: 1.6;4310}43114312.peach-restore-warning {4313  padding: 10px 12px;4314  border-radius: 12px;4315  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4316  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4317  color: var(--peach-t0);4318  font-size: 0.6875rem;4319  line-height: 1.55;4320}43214322.peach-provider-chips {4323  display: flex;4324  flex-wrap: wrap;4325  gap: 6px;4326}43274328.peach-provider-chip {4329  display: inline-flex;4330  align-items: center;4331  padding: 5px 8px;4332  border-radius: 999px;4333  border: 1px solid var(--peach-t3);4334  background: rgba(240, 232, 216, 0.02);4335  color: var(--peach-t1);4336  font-family: "IBM Plex Mono", monospace;4337  font-size: 0.5rem;4338  letter-spacing: 0.08em;4339  text-transform: uppercase;4340}43414342.peach-restore-file,4343.peach-restore-input {4344  width: 100%;4345  border-radius: 10px;4346  border: 1px solid var(--peach-t3);4347  background: var(--peach-s2);4348  color: var(--peach-t0);4349  font-size: 0.75rem;4350}43514352.peach-restore-file {4353  padding: 9px 10px;4354}43554356.peach-restore-file::file-selector-button {4357  margin-right: 10px;4358  padding: 7px 10px;4359  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4360  border-radius: 999px;4361  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4362  color: var(--peach-t0);4363  font-size: 0.625rem;4364  letter-spacing: 0.08em;4365  text-transform: uppercase;4366  cursor: pointer;4367}43684369.peach-restore-input {4370  padding: 10px 12px;4371}43724373.peach-auth-grid {4374  display: grid;4375  gap: 10px;4376}43774378.peach-import-summary {4379  color: var(--peach-t1);4380  font-size: 0.75rem;4381  line-height: 1.6;4382  margin-bottom: 12px;4383}43844385.peach-restore-error {4386  color: rgba(220, 80, 60, 0.95);4387  font-size: 0.75rem;4388  line-height: 1.55;4389}43904391.peach-passkey-card {4392  max-width: 400px;4393  margin: auto 16px;4394  align-self: center;4395  width: calc(100% - 32px);4396}43974398/* Center the approval card vertically inside the overlay-view (which sets4399 * flex-direction: column without justify-content). Without this, the card4400 * sits at the top with a tall empty band below — looks unfinished on the4401 * 320px popup. */4402.peach-overlay-view:has(.peach-passkey-card) {4403  justify-content: center;4404}44054406.peach-pro-badge {4407  padding: 2px 6px;4408  border-radius: 999px;4409  font-family: var(--font-ui);4410  font-size: 0.625rem;4411  letter-spacing: 0.08em;4412  text-transform: uppercase;4413  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4414  color: var(--peach-accent);4415}44164417/* ── Shortcuts rebind table ─────────────────────────────────── */4418.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4419.peach-shortcut-row {4420  display: flex;4421  align-items: center;4422  gap: 10px;4423  padding: 6px 0;4424}4425.peach-shortcut-row-label {4426  flex: 1;4427  font-size: 0.75rem;4428  color: var(--peach-t0);4429}4430.peach-shortcut-chip {4431  min-width: 64px;4432  padding: 4px 10px;4433  border-radius: 6px;4434  border: 1px solid var(--peach-t3);4435  background: var(--peach-input-bg, var(--surface-card));4436  color: var(--peach-t0);4437  font-family: var(--font-mono);4438  font-size: 0.6875rem;4439  letter-spacing: 0.04em;4440  cursor: pointer;4441  text-align: center;4442  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4443}4444.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4445.peach-shortcut-chip.is-custom {4446  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4447  color: var(--peach-accent);4448}4449.peach-shortcut-chip.is-capturing {4450  border-color: var(--peach-accent);4451  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4452  color: var(--peach-accent);4453  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4454}4455@keyframes peach-shortcut-capture-pulse {4456  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4457  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4458}4459.peach-shortcut-reset {4460  background: transparent;4461  border: none;4462  cursor: pointer;4463  color: var(--peach-t2);4464  padding: 4px 6px;4465  border-radius: 5px;4466  font-size: 0.875rem;4467  line-height: 1;4468  transition: color 120ms ease, background 120ms ease;4469}4470.peach-shortcut-reset:hover {4471  color: var(--peach-t0);4472  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4473}4474.peach-shortcuts-conflict {4475  margin: 4px 0 0;4476  padding: 8px 10px;4477  border-radius: 7px;4478  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4479  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4480  font-family: var(--font-mono);4481  font-size: 0.6875rem;4482  color: var(--peach-t0);4483}44844485/* ── Help dialog overlay (? to open) ────────────────────────── */4486.peach-shortcuts-help-backdrop {4487  position: fixed;4488  inset: 0;4489  background: rgba(0, 0, 0, 0.55);4490  backdrop-filter: blur(2px);4491  display: flex;4492  align-items: center;4493  justify-content: center;4494  z-index: 1000;4495  animation: peach-help-fade-in 140ms ease forwards;4496}4497@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4498.peach-shortcuts-help-card {4499  width: min(320px, 92vw);4500  max-height: 80vh;4501  overflow-y: auto;4502  border-radius: 14px;4503  border: 1px solid var(--peach-t3);4504  background: var(--peach-bg);4505  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4506  padding: 16px 18px 18px;4507  display: flex;4508  flex-direction: column;4509  gap: 12px;4510}4511.peach-shortcuts-help-head {4512  display: flex; align-items: center; justify-content: space-between;4513}4514.peach-shortcuts-help-head h3 {4515  margin: 0;4516  font-family: var(--font-display);4517  font-style: italic;4518  font-weight: 400;4519  font-size: 22px;4520  color: var(--peach-t0);4521}4522.peach-shortcuts-help-close {4523  background: transparent;4524  border: none;4525  color: var(--peach-t2);4526  cursor: pointer;4527  font-size: 0.875rem;4528  padding: 4px 8px;4529  border-radius: 5px;4530}4531.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4532.peach-shortcuts-help-body ul {4533  list-style: none; padding: 0; margin: 4px 0 12px;4534  display: grid; gap: 8px;4535}4536.peach-shortcuts-help-body li {4537  display: flex; align-items: center; justify-content: space-between; gap: 12px;4538  font-size: 0.75rem; color: var(--peach-t0);4539}4540.peach-shortcuts-help-body kbd {4541  font-family: var(--font-mono);4542  font-size: 0.6875rem;4543  padding: 3px 8px;4544  border-radius: 6px;4545  background: var(--surface-card);4546  border: 1px solid var(--peach-t3);4547  color: var(--peach-accent);4548  letter-spacing: 0.04em;4549}45504551/* ── Pro promo on Account screen ────────────────────────────── */4552.peach-pro-promo {4553  position: relative;4554  border-radius: 14px;4555  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4556  background:4557    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4558    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4559    var(--surface-card);4560  overflow: hidden;4561  margin-bottom: 14px;4562}4563.peach-pro-promo-glow {4564  position: absolute;4565  inset: -40% -20% auto auto;4566  width: 220px; height: 220px;4567  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4568  pointer-events: none;4569  filter: blur(8px);4570}4571.peach-pro-promo-inner {4572  position: relative;4573  padding: 18px 18px 16px;4574}4575.peach-pro-promo-title {4576  font-family: var(--font-display);4577  font-style: italic;4578  font-weight: 400;4579  font-size: 28px;4580  line-height: 1;4581  letter-spacing: -0.005em;4582  color: var(--peach-t0);4583  margin: 0 0 4px;4584}4585.peach-pro-promo-tagline {4586  font-family: var(--font-mono);4587  font-size: 0.625rem;4588  letter-spacing: 0.06em;4589  color: var(--peach-t2);4590  margin: 0 0 14px;4591}4592.peach-pro-promo-list {4593  list-style: none;4594  margin: 0 0 16px;4595  padding: 0;4596  display: grid;4597  gap: 9px;4598}4599.peach-pro-promo-list li {4600  display: flex;4601  align-items: flex-start;4602  gap: 9px;4603  font-size: 0.75rem;4604  color: var(--peach-t1);4605  line-height: 1.4;4606}4607.peach-pro-promo-list svg {4608  width: 14px;4609  height: 14px;4610  flex-shrink: 0;4611  color: var(--peach-accent);4612  margin-top: 2px;4613}4614.peach-pro-promo-list span {4615  color: var(--peach-t0);4616}4617.peach-pro-promo-cta {4618  width: 100%;4619  background: var(--peach-accent);4620  color: #fff;4621  border: none;4622  padding: 9px 12px;4623  border-radius: 9px;4624  font-size: 0.75rem;4625  font-weight: 500;4626  font-family: var(--font-ui);4627  letter-spacing: 0.02em;4628  text-decoration: none;4629  display: inline-flex;4630  align-items: center;4631  justify-content: center;4632  cursor: pointer;4633  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4634  box-shadow: 0 2px 16px var(--peach-glow);4635}4636.peach-pro-promo-cta:hover {4637  filter: brightness(1.07);4638  box-shadow: 0 4px 24px var(--peach-glow);4639  transform: translateY(-1px);4640}4641.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }46424643.peach-pro-or-divider {4644  display: flex;4645  align-items: center;4646  gap: 10px;4647  margin: 4px 0 12px;4648  font-family: var(--font-mono);4649  font-size: 0.625rem;4650  letter-spacing: 0.06em;4651  color: var(--peach-t2);4652  text-transform: uppercase;4653}4654.peach-pro-or-divider::before,4655.peach-pro-or-divider::after {4656  content: "";4657  flex: 1;4658  height: 1px;4659  background: var(--peach-t3);4660}46614662.peach-loading {4663  position: absolute;4664  inset: 0;4665  display: flex;4666  align-items: center;4667  justify-content: center;4668  background: var(--bg);4669  animation: peach-loading-pulse 1.2s ease-in-out infinite;4670}46714672@keyframes peach-loading-pulse {4673  0%, 100% { opacity: 0.6; }4674  50% { opacity: 1; }4675}46764677/* ── Health Dashboard ─────────────────────────────────────────────────── */4678.peach-health-body {4679  flex: 1;4680  overflow-y: auto;4681  display: flex;4682  flex-direction: column;4683  /* Hide the platform scrollbar — every other scrollable surface in the4684   * popup hides it; the Health view was the one outlier and it ruined the4685   * polish. Behavior unchanged, just no rail rendered. */4686  scrollbar-width: none;4687  -ms-overflow-style: none;4688}4689.peach-health-body::-webkit-scrollbar { display: none; }46904691/* Loading screen for the Vault Health view. The advanced report computation4692 * can run for a few seconds on a large vault — without a clear loading4693 * screen the surface looked broken (the entry view bleeds through the4694 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4695.peach-health-loading-screen {4696  flex: 1;4697  display: flex;4698  flex-direction: column;4699  align-items: center;4700  justify-content: center;4701  gap: 14px;4702  padding: 32px 28px;4703  text-align: center;4704}47054706.peach-health-loading-glyph {4707  width: 48px;4708  height: 48px;4709  display: flex;4710  align-items: center;4711  justify-content: center;4712  border-radius: 14px;4713  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4714  color: var(--peach-accent);4715}47164717.peach-health-loading-title {4718  margin: 0;4719  font-family: var(--font-display);4720  font-style: italic;4721  font-weight: 300;4722  font-size: 19px;4723  line-height: 1.2;4724  color: var(--peach-t0);4725}47264727.peach-health-loading-copy {4728  margin: 0;4729  max-width: 240px;4730  font-size: 0.75rem;4731  line-height: 1.55;4732  color: var(--peach-t2);4733}47344735.peach-health-loading-track {4736  width: 200px;4737  height: 3px;4738  margin-top: 6px;4739  border-radius: 999px;4740  background: rgba(240, 232, 216, 0.06);4741  overflow: hidden;4742}47434744.peach-health-loading-fill {4745  width: 40%;4746  height: 100%;4747  border-radius: inherit;4748  background: linear-gradient(4749    90deg,4750    transparent 0%,4751    var(--peach-accent) 50%,4752    transparent 100%4753  );4754  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4755}47564757@keyframes peach-health-loading-sweep {4758  0%   { transform: translateX(-100%); }4759  100% { transform: translateX(350%); }4760}47614762[data-motion="reduce"] .peach-health-loading-fill,4763[data-motion="reduce"] .peach-health-loading-glyph svg path {4764  animation: none;4765}47664767.peach-health-summary {4768  padding: 10px 16px 6px;4769  font-family: "IBM Plex Mono", monospace;4770  font-size: 0.6875rem;4771}4772.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4773.peach-health-summary-ok { color: var(--peach-t2); }47744775.peach-health-check-row {4776  padding: 0 16px 10px;4777}4778.peach-health-check-btn {4779  width: 100%;4780  display: flex;4781  align-items: center;4782  justify-content: center;4783}47844785.peach-health-sections {4786  flex: 1;4787  display: flex;4788  flex-direction: column;4789}47904791.peach-health-section {4792  border-bottom: 1px solid var(--peach-t3);4793}47944795.peach-health-section-header {4796  width: 100%;4797  display: flex;4798  align-items: center;4799  justify-content: space-between;4800  padding: 9px 16px;4801  background: transparent;4802  cursor: pointer;4803  color: var(--peach-t0);4804}48054806.peach-health-section-title-row {4807  display: flex;4808  align-items: center;4809  gap: 8px;4810}48114812.peach-health-count-badge {4813  display: inline-flex;4814  align-items: center;4815  justify-content: center;4816  min-width: 20px;4817  height: 18px;4818  padding: 0 5px;4819  border-radius: 999px;4820  background: rgba(220,80,60,0.15);4821  border: 1px solid rgba(220,80,60,0.25);4822  font-family: "IBM Plex Mono", monospace;4823  font-size: 0.5625rem;4824  color: rgba(220,80,60,0.9);4825}48264827.peach-health-section-title {4828  font-family: "IBM Plex Mono", monospace;4829  font-size: 0.6875rem;4830  text-transform: uppercase;4831  letter-spacing: 0.1em;4832  color: var(--peach-t1);4833}48344835.peach-health-chevron {4836  color: var(--peach-t2);4837  transition: transform 200ms ease;4838  flex-shrink: 0;4839}4840.peach-health-chevron.is-expanded {4841  transform: rotate(180deg);4842}48434844.peach-health-section-body {4845  padding: 0 16px 10px;4846  display: flex;4847  flex-direction: column;4848  gap: 4px;4849}48504851.peach-health-row {4852  display: flex;4853  align-items: flex-start;4854  justify-content: space-between;4855  gap: 8px;4856  padding: 6px 8px;4857  border-radius: 8px;4858  background: rgba(240,232,216,0.02);4859}48604861.peach-health-row-info {4862  flex: 1;4863  min-width: 0;4864  display: flex;4865  flex-direction: column;4866  gap: 2px;4867}48684869.peach-health-row-name {4870  font-family: var(--font-display);4871  font-size: 0.9375rem;4872  font-style: italic;4873  font-weight: 400;4874  color: var(--peach-t0);4875  white-space: nowrap;4876  overflow: hidden;4877  text-overflow: ellipsis;4878}48794880.peach-health-row-meta {4881  font-family: "IBM Plex Mono", monospace;4882  font-size: 0.5625rem;4883  color: var(--peach-t2);4884  letter-spacing: 0.05em;4885}48864887.peach-health-fix-btn {4888  font-size: 0.5625rem;4889  letter-spacing: 0.08em;4890  text-transform: uppercase;4891  padding: 4px 7px;4892  flex-shrink: 0;4893  display: flex;4894  align-items: center;4895}48964897.peach-health-empty {4898  font-family: "IBM Plex Mono", monospace;4899  font-size: 0.625rem;4900  color: var(--peach-t2);4901  padding: 6px 0;4902}49034904.peach-health-loading {4905  font-family: "IBM Plex Mono", monospace;4906  font-size: 0.625rem;4907  color: var(--peach-t2);4908  padding: 6px 0;4909  display: flex;4910  align-items: center;4911  gap: 6px;4912}49134914.peach-health-loading::before {4915  content: "";4916  width: 10px;4917  height: 10px;4918  border: 1.5px solid var(--peach-t3);4919  border-top-color: var(--peach-accent);4920  border-radius: 50%;4921  animation: peach-spin 600ms linear infinite;4922}49234924@keyframes peach-spin {4925  to { transform: rotate(360deg); }4926}49274928.peach-spinner {4929  width: 32px;4930  height: 32px;4931  border: 2px solid var(--peach-s2);4932  border-top-color: var(--peach-accent);4933  border-radius: 50%;4934  margin: 0 auto 16px;4935  animation: peach-spin 0.8s linear infinite;4936}49374938.peach-progress-screen {4939  text-align: center;4940  padding: 32px 16px;4941}49424943.peach-progress-screen-title {4944  font-size: 0.8125rem;4945  color: var(--peach-t0);4946  margin-bottom: 16px;4947}49484949.peach-progress-screen-stage {4950  font-size: 0.6875rem;4951  color: var(--peach-t2);4952  min-height: 14px;4953}49544955.peach-progress-screen-note {4956  font-size: 0.625rem;4957  color: var(--peach-t2);4958  margin-top: 8px;4959}49604961.peach-pairing-body {4962  flex: 1;4963  overflow-y: auto;4964  display: flex;4965  flex-direction: column;4966}49674968.peach-pairing-content {4969  flex: 1;4970  display: flex;4971  flex-direction: column;4972  align-items: center;4973  justify-content: center;4974  gap: 14px;4975  padding: 28px 20px;4976  text-align: center;4977}49784979.peach-pairing-code-screen {4980  gap: 18px;4981}49824983.peach-pairing-headline {4984  font-family: var(--font-display);4985  font-style: italic;4986  font-weight: 300;4987  font-size: 28px;4988  color: var(--peach-t0);4989  margin: 0;4990  line-height: 1;4991}49924993.peach-pairing-subline {4994  font-size: 0.75rem;4995  color: var(--peach-t2);4996  max-width: 220px;4997  line-height: 1.5;4998  margin: 0;4999}50005001.peach-pairing-subline--center {5002  text-align: center;5003}50045005/* 6-digit pairing code — both display (.peach-pairing-code) and entry5006   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking5007   so the two modes feel like the same surface. */5008.peach-pairing-code {5009  font-family: "IBM Plex Mono", monospace;5010  font-size: 36px;5011  letter-spacing: 0.25em;5012  color: var(--peach-t0);5013  text-align: center;5014  padding: 24px 0;5015  text-shadow:5016    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),5017    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);5018  background: transparent;5019  border: 0;5020  cursor: default;5021  user-select: text;5022}50235024.peach-pairing-code--loading,5025.peach-pairing-code--expired {5026  font-size: 18px;5027  letter-spacing: 0.04em;5028  color: var(--peach-t2);5029  cursor: pointer;5030  text-shadow: none;5031}50325033.peach-pairing-qr-container {5034  display: flex;5035  flex-direction: column;5036  align-items: center;5037  gap: 10px;5038}50395040.peach-pairing-qr {5041  width: 240px;5042  height: 240px;5043  display: block;5044}50455046.peach-pairing-instruction {5047  font-size: 0.75rem;5048  color: var(--peach-t2);5049  text-align: center;5050  line-height: 1.5;5051  margin: 0;5052  max-width: 220px;5053}50545055.peach-pairing-expiry {5056  font-family: "IBM Plex Mono", monospace;5057  font-size: 13px;5058  letter-spacing: 0.06em;5059  color: var(--peach-t2);5060  margin: 0;5061}50625063.peach-pairing-regen {5064  font-size: 0.75rem;5065  color: var(--peach-accent);5066  background: transparent;5067  border: 0;5068  cursor: pointer;5069  padding: 4px 0;5070  text-decoration: underline;5071  text-underline-offset: 2px;5072}50735074.peach-pairing-code-input {5075  font-family: "IBM Plex Mono", monospace;5076  font-size: 36px;5077  letter-spacing: 0.25em;5078  color: var(--peach-t0);5079  background: transparent;5080  border: 0;5081  border-bottom: 1px solid var(--peach-t3);5082  outline: none;5083  text-align: center;5084  padding: 18px 0;5085  width: 220px;5086  caret-color: var(--peach-accent);5087  transition: border-color 160ms ease;5088}50895090.peach-pairing-code-input::placeholder {5091  color: var(--peach-t3);5092}50935094.peach-pairing-code-input:focus {5095  border-bottom-color: var(--peach-accent);5096}50975098.peach-pairing-toggle {5099  background: transparent;5100  border: 0;5101  color: var(--peach-t2);5102  font-size: 0.75rem;5103  padding: 8px 4px;5104  cursor: pointer;5105  transition: color 120ms ease;5106}51075108.peach-pairing-toggle:hover:not(:disabled) {5109  color: var(--peach-t1);5110}51115112.peach-pairing-toggle:disabled {5113  opacity: 0.5;5114  cursor: default;5115}51165117.peach-pairing-hint {5118  font-size: 0.6875rem;5119  color: var(--peach-t2);5120  margin: 0;5121  text-align: center;5122}51235124.peach-pairing-status {5125  display: flex;5126  align-items: center;5127  gap: 8px;5128  margin: 0;5129  font-size: 0.75rem;5130  color: var(--peach-t1);5131}51325133.peach-pairing-error {5134  margin: 0;5135  font-size: 0.6875rem;5136  color: var(--peach-breach);5137}51385139.peach-pairing-error--muted {5140  color: var(--peach-t2);5141}51425143.peach-pairing-spinner {5144  width: 12px;5145  height: 12px;5146  border: 1.5px solid var(--peach-t3);5147  border-top-color: var(--peach-accent);5148  border-radius: 50%;5149  animation: peach-spin 0.8s linear infinite;5150}51515152.peach-pairing-success-icon,5153.peach-pairing-error-icon,5154.peach-pairing-hero {5155  display: inline-flex;5156  align-items: center;5157  justify-content: center;5158}51595160/* Tag chips */5161.peach-tag-chip {5162  display: inline-flex;5163  align-items: center;5164  gap: 4px;5165  padding: 3px 8px;5166  border-radius: 999px;5167  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5168  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5169  color: var(--peach-t0);5170  font-family: "IBM Plex Mono", monospace;5171  font-size: 0.625rem;5172  letter-spacing: 0.04em;5173}51745175.peach-tag-chip-remove {5176  background: transparent;5177  border: none;5178  color: inherit;5179  opacity: 0.6;5180  cursor: pointer;5181  padding: 0;5182  font-size: 0.75rem;5183  line-height: 1;5184}51855186.peach-tag-chip-remove:hover {5187  opacity: 1;5188}51895190/* Tag input */5191.peach-tag-input-wrap {5192  border-bottom: 1px solid var(--peach-t3);5193}51945195.peach-tag-suggestions {5196  display: flex;5197  flex-wrap: wrap;5198  gap: 4px;5199  padding: 6px 0;5200}52015202.peach-tag-suggestion {5203  padding: 2px 8px;5204  border-radius: 999px;5205  border: 1px solid var(--peach-t3);5206  background: var(--peach-s2);5207  color: var(--peach-t1);5208  font-family: "IBM Plex Mono", monospace;5209  font-size: 0.625rem;5210  cursor: pointer;5211  transition: border-color 80ms ease, background 80ms ease;5212}52135214.peach-tag-suggestion:hover {5215  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5216  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5217}52185219/* Identity suggestions — shown below username/email inputs in new-entry form */5220@keyframes peach-suggest-in {5221  from { opacity: 0; transform: translateY(-4px); }5222  to   { opacity: 1; transform: none; }5223}52245225.peach-identity-suggestions {5226  display: flex;5227  flex-direction: column;5228  gap: 1px;5229  margin-top: 4px;5230  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5231}52325233.peach-identity-filter-row {5234  display: flex;5235  align-items: center;5236  gap: 4px;5237  padding: 2px 0 5px;5238}52395240.peach-identity-collapse-btn {5241  margin-left: auto;5242  background: transparent;5243  border: none;5244  cursor: pointer;5245  color: var(--peach-t3);5246  padding: 2px 4px;5247  display: flex;5248  align-items: center;5249  line-height: 0;5250  border-radius: 3px;5251  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5252}52535254.peach-identity-collapse-btn:hover {5255  color: var(--peach-t1);5256}52575258.peach-identity-collapse-btn.is-collapsed {5259  transform: rotate(-90deg);5260}52615262.peach-identity-rows {5263  display: grid;5264  grid-template-rows: 1fr;5265  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5266}52675268.peach-identity-rows.is-collapsed {5269  grid-template-rows: 0fr;5270}52715272.peach-identity-rows-inner {5273  overflow-y: auto;5274  min-height: 0;5275  max-height: 148px;5276  scrollbar-width: thin;5277  scrollbar-color: var(--peach-t3) transparent;5278  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5279  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5280}52815282.peach-identity-rows-inner::-webkit-scrollbar {5283  width: 4px;5284}52855286.peach-identity-rows-inner::-webkit-scrollbar-track {5287  background: transparent;5288}52895290.peach-identity-rows-inner::-webkit-scrollbar-thumb {5291  background: var(--peach-t3);5292  border-radius: 2px;5293}52945295.peach-identity-filter-pill {5296  padding: 2px 7px;5297  border-radius: 999px;5298  border: 1px solid var(--peach-t3);5299  background: transparent;5300  color: var(--peach-t2);5301  font-family: "IBM Plex Mono", monospace;5302  font-size: 0.6rem;5303  cursor: pointer;5304  transition: border-color 80ms, background 80ms, color 80ms;5305}53065307.peach-identity-filter-pill.is-on {5308  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5309  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5310  color: var(--peach-accent);5311}53125313.peach-identity-suggestion {5314  display: flex;5315  align-items: center;5316  gap: 6px;5317  width: 100%;5318  padding: 4px 6px;5319  border-radius: 5px;5320  border: none;5321  background: transparent;5322  cursor: pointer;5323  text-align: left;5324  transition: background 80ms ease;5325}53265327.peach-identity-suggestion:hover,5328.peach-identity-suggestion:focus {5329  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5330  outline: none;5331}53325333.peach-identity-suggestion-value {5334  font-family: "IBM Plex Mono", monospace;5335  font-size: 0.7rem;5336  color: var(--peach-t1);5337  overflow: hidden;5338  text-overflow: ellipsis;5339  white-space: nowrap;5340  flex: 1;5341  min-width: 0;5342}53435344.peach-identity-suggestion-type {5345  font-family: "IBM Plex Mono", monospace;5346  font-size: 0.55rem;5347  font-weight: 600;5348  flex-shrink: 0;5349  padding: 1px 4px;5350  border-radius: 3px;5351}53525353.peach-identity-suggestion-type--email {5354  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5355  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5356}53575358.peach-identity-suggestion-type--username {5359  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5360  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5361}53625363.peach-identity-suggestion-meta {5364  font-family: "IBM Plex Mono", monospace;5365  font-size: 0.6rem;5366  color: var(--peach-t3);5367  flex-shrink: 0;5368}53695370/* Tag filter strip */5371.peach-tag-filter-strip {5372  border-bottom: 1px solid var(--peach-t3);5373  flex-shrink: 0;5374}53755376.peach-tag-filter-chip {5377  display: inline-flex;5378  align-items: center;5379  padding: 4px 10px;5380  border-radius: 999px;5381  border: 1px solid var(--peach-t3);5382  background: transparent;5383  color: var(--peach-t2);5384  font-family: "IBM Plex Mono", monospace;5385  font-size: 0.5625rem;5386  letter-spacing: 0.06em;5387  text-transform: uppercase;5388  cursor: pointer;5389  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5390  white-space: nowrap;5391}53925393.peach-tag-filter-chip:hover {5394  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5395  color: var(--peach-t1);5396}53975398.peach-tag-filter-chip.is-selected {5399  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5400  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5401  color: var(--peach-t0);5402}54035404/* ─────────────────────────────────────────────────────────────────────────5405   v1.4.12 additions5406   ─────────────────────────────────────────────────────────────────────── */54075408/* Sort bar */5409.peach-sort-bar {5410  display: flex;5411  align-items: center;5412  gap: 4px;5413  padding: 5px 12px;5414  border-bottom: 1px solid var(--peach-t3);5415  flex-shrink: 0;5416  overflow-x: auto;5417  scrollbar-width: none;5418}54195420.peach-sort-btn {5421  padding: 2px 9px;5422  border-radius: 999px;5423  border: 1px solid transparent;5424  background: transparent;5425  color: var(--peach-t2);5426  font-family: "IBM Plex Mono", monospace;5427  font-size: 0.5625rem;5428  letter-spacing: 0.07em;5429  text-transform: uppercase;5430  cursor: pointer;5431  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5432  white-space: nowrap;5433}54345435.peach-sort-btn:hover {5436  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5437  color: var(--peach-t1);5438}54395440.peach-sort-btn.is-active {5441  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5442  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5443  color: var(--peach-t0);5444}54455446.peach-sort-domain-hint {5447  margin-left: auto;5448  font-family: "IBM Plex Mono", monospace;5449  font-size: 0.5625rem;5450  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5451  white-space: nowrap;5452  overflow: hidden;5453  text-overflow: ellipsis;5454  max-width: 110px;5455}54565457/* Tab-match badge on entry rows */5458.peach-tab-match-badge {5459  display: inline-block;5460  width: 6px;5461  height: 6px;5462  border-radius: 50%;5463  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5464  margin-left: 5px;5465  vertical-align: middle;5466  flex-shrink: 0;5467  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5468}54695470.peach-entry-row.is-tab-match {5471  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5472  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5473}54745475.peach-entry-row.is-tab-match:hover {5476  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5477}54785479/* Entry list stagger entrance */5480@keyframes peach-entry-fadein {5481  from { opacity: 0; transform: translateY(4px); }5482  to   { opacity: 1; transform: translateY(0); }5483}54845485.peach-vault-list .peach-entry-row {5486  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5487}54885489/* Button press micro-interaction */5490.peach-btn:active {5491  transform: scale(0.95);5492  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5493}54945495.peach-sort-btn:active,5496.peach-tag-filter-chip:active {5497  transform: scale(0.93);5498  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5499}55005501/* Password strength bar (Lock view + shared) */5502.peach-password-strength {5503  display: flex;5504  align-items: center;5505  gap: 8px;5506  margin-top: 6px;5507}55085509.peach-strength-bar {5510  flex: 1;5511  height: 3px;5512  border-radius: 2px;5513  background: var(--peach-t3);5514  overflow: hidden;5515}55165517.peach-strength-fill {5518  height: 100%;5519  border-radius: 2px;5520  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5521              background 300ms ease;5522}55235524.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5525.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5526.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5527.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }55285529.peach-strength-label {5530  font-family: "IBM Plex Mono", monospace;5531  font-style: italic;5532  font-size: 0.5625rem;5533  font-weight: 300;5534  letter-spacing: 0.06em;5535  color: var(--peach-t2);5536  min-width: 36px;5537  text-align: right;5538}55395540.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5541.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5542.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5543.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }55445545/* Duress form */5546.peach-duress-status {5547  padding: 2px 8px;5548  border-radius: 999px;5549  border: 1px solid var(--peach-t3);5550  font-family: "IBM Plex Mono", monospace;5551  font-size: 0.5625rem;5552  letter-spacing: 0.07em;5553  text-transform: uppercase;5554  color: var(--peach-t2);5555  flex-shrink: 0;5556}55575558.peach-duress-status.is-active {5559  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5560  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5561  color: var(--peach-t0);5562}55635564.peach-duress-form {5565  padding: 8px 0 4px;5566  display: flex;5567  flex-direction: column;5568  gap: 6px;5569}55705571.peach-duress-form .peach-label {5572  margin-top: 4px;5573}55745575.peach-duress-actions {5576  display: flex;5577  gap: 6px;5578  align-items: center;5579  margin-top: 4px;5580}55815582.peach-duress-actions .peach-btn:first-child {5583  margin-right: auto;5584}55855586/* Improved overlay spring entrance */5587.peach-overlay-view.ov-enter-up {5588  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5589}55905591@keyframes ov-enter-up-spring {5592  from { opacity: 0; transform: translateY(16px) scale(0.98); }5593  to   { opacity: 1; transform: translateY(0) scale(1); }5594}55955596.peach-overlay-view.ov-enter-right {5597  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5598}55995600@keyframes ov-enter-right-spring {5601  from { opacity: 0; transform: translateX(18px) scale(0.98); }5602  to   { opacity: 1; transform: translateX(0) scale(1); }5603}56045605/* ── Onboarding-mode restore screens (file import) ── */5606/* Used when MainImportView renders during onboarding (no vault yet).5607   Animates like a lock-screen transition. */5608.peach-lock-view {5609  position: absolute;5610  inset: 0;5611  display: flex;5612  flex-direction: column;5613  background:5614    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5615    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5616    var(--peach-bg);5617  z-index: 2;5618  overflow: hidden;5619  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5620}56215622.peach-lock-view-header {5623  display: flex;5624  align-items: center;5625  justify-content: space-between;5626  padding: 16px 18px 12px;5627  flex-shrink: 0;5628}56295630/* ───────── Settings: auto-lock select ───────── */5631.peach-settings-select {5632  font-family: "IBM Plex Mono", monospace;5633  font-size: 0.6875rem;5634  background: transparent;5635  border: 1px solid var(--peach-t3);5636  border-radius: 4px;5637  color: var(--peach-t1);5638  padding: 3px 6px;5639  cursor: pointer;5640  outline: none;5641}5642.peach-settings-select:focus {5643  border-color: var(--peach-accent);5644}56455646/* ───────── Duress status pill (new polished) ───────── */5647.peach-duress-status-pill {5648  font-family: "IBM Plex Mono", monospace;5649  font-size: 0.5625rem;5650  text-transform: uppercase;5651  letter-spacing: 0.12em;5652  padding: 2px 8px;5653  border-radius: 12px;5654  background: var(--peach-t3);5655  color: var(--peach-t2);5656  flex-shrink: 0;5657}5658.peach-duress-status-pill.is-active {5659  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5660  color: var(--peach-accent);5661}56625663/* ───────── Entry advanced disclosure (canary) ───────── */5664.peach-entry-advanced {5665  margin-top: 12px;5666  border-top: 1px solid var(--peach-t3);5667  padding-top: 10px;5668  position: relative;5669  z-index: 1;5670}5671.peach-entry-advanced-toggle {5672  display: flex;5673  align-items: center;5674  justify-content: space-between;5675  width: 100%;5676  background: transparent;5677  border: none;5678  cursor: pointer;5679  padding: 0;5680  color: var(--peach-t2);5681}5682.peach-canary-section {5683  margin-top: 10px;5684  display: grid;5685  gap: 6px;5686}56875688/* ───────── Import: merge/replace radio choices ───────── */5689.peach-import-choice {5690  display: flex;5691  align-items: flex-start;5692  gap: 10px;5693  padding: 8px 10px;5694  border: 1px solid var(--peach-t3);5695  border-radius: 10px;5696  cursor: pointer;5697  margin-bottom: 6px;5698  transition: border-color 120ms ease, background 120ms ease;5699}5700.peach-import-choice:hover {5701  border-color: var(--peach-accent);5702}5703.peach-import-choice input[type="radio"] {5704  margin-top: 3px;5705  accent-color: var(--peach-accent);5706  flex-shrink: 0;5707}5708.peach-import-choice-main {5709  display: flex;5710  flex-direction: column;5711  gap: 2px;5712  min-width: 0;5713}5714.peach-import-choice-label {5715  font-size: 0.75rem;5716  color: var(--peach-t0);5717}5718.peach-import-choice-sub {5719  font-size: 0.6875rem;5720  color: var(--peach-t2);5721  line-height: 1.5;5722}57235724/* ───────── Export: success confirmation strip ───────── */5725.peach-export-success {5726  display: flex;5727  align-items: flex-start;5728  gap: 10px;5729  padding: 12px;5730  border-radius: 12px;5731  border: 1px solid rgba(150, 175, 110, 0.3);5732  background: rgba(150, 175, 110, 0.08);5733  color: var(--peach-t0);5734  font-size: 0.75rem;5735  line-height: 1.55;5736}5737.peach-export-success-check {5738  color: rgba(150, 175, 110, 0.9);5739  font-size: 0.875rem;5740  flex-shrink: 0;5741}57425743/* ── Trash view ──────────────────────────────────────────────────────── */5744.peach-trash-entry-row {5745  display: flex;5746  align-items: center;5747  justify-content: space-between;5748  gap: 8px;5749  padding: 8px 0;5750  border-bottom: 1px solid var(--peach-border);5751}5752.peach-trash-entry-info {5753  flex: 1;5754  min-width: 0;5755  display: flex;5756  flex-direction: column;5757  gap: 2px;5758}5759.peach-trash-entry-title {5760  font-size: 0.8125rem;5761  color: var(--peach-t0);5762  overflow: hidden;5763  text-overflow: ellipsis;5764  white-space: nowrap;5765}5766.peach-trash-entry-meta {5767  font-family: var(--font-mono);5768  font-size: 0.5625rem;5769  color: var(--peach-t2);5770  letter-spacing: 0.04em;5771}5772.peach-trash-entry-actions {5773  display: flex;5774  align-items: center;5775  gap: 4px;5776  flex-shrink: 0;5777}5778.peach-trash-delete-btn {5779  background: transparent;5780  border: 0;5781  color: var(--peach-t3);5782  font-size: 1rem;5783  line-height: 1;5784  cursor: pointer;5785  padding: 2px 5px;5786  transition: color 0.15s;5787}5788.peach-trash-delete-btn:hover { color: var(--peach-breach); }5789.peach-trash-list {5790  overflow-y: auto;5791}5792.peach-trash-footer {5793  display: flex;5794  align-items: center;5795  gap: 8px;5796  padding: 8px 0 0;5797  border-top: 1px solid var(--peach-border);5798  margin-top: 4px;5799}5800.peach-trash-purge-all {5801  background: transparent;5802  border: 0;5803  color: var(--peach-t3);5804  font-size: 0.625rem;5805  cursor: pointer;5806  padding: 4px 0;5807  letter-spacing: 0.03em;5808  transition: color 0.2s;5809}5810.peach-trash-purge-all:hover { color: var(--peach-breach); }5811.peach-trash-purge-confirm-label {5812  font-size: 0.625rem;5813  color: var(--peach-t1);5814  flex: 1;5815}58165817/* ── Settings shortcuts grid ─────────────────────────────────────────── */5818.peach-shortcuts-grid {5819  display: grid;5820  grid-template-columns: auto 1fr;5821  gap: 6px 12px;5822  align-items: center;5823  padding: 4px 0;5824}5825.peach-shortcut-key {5826  font-family: var(--font-mono);5827  font-size: 0.625rem;5828  color: var(--peach-t0);5829  background: var(--peach-t3);5830  border-radius: 4px;5831  padding: 2px 6px;5832  white-space: nowrap;5833  text-align: center;5834}5835.peach-shortcut-desc {5836  font-size: 0.6875rem;5837  color: var(--peach-t1);5838}58395840/* ── Sort bar trash button ───────────────────────────────────────────── */5841.peach-sort-trash-btn {5842  display: flex;5843  align-items: center;5844  justify-content: center;5845  padding: 3px 5px;5846  background: transparent;5847  border: none;5848  cursor: pointer;5849  color: var(--peach-t2);5850  border-radius: 4px;5851  transition: color 140ms ease, background 140ms ease;5852}5853.peach-sort-trash-btn:hover {5854  color: var(--peach-t1);5855  background: var(--peach-t3);5856}5857.peach-sort-trash-btn.is-active {5858  color: var(--peach-accent);5859}58605861/* Accent color picker */5862.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5863.peach-accent-picker {5864  display: flex;5865  flex-wrap: wrap;5866  gap: 7px;5867  padding: 2px 0;5868}5869.peach-accent-swatch {5870  width: 22px;5871  height: 22px;5872  border-radius: 50%;5873  border: 2px solid transparent;5874  cursor: pointer;5875  padding: 0;5876  transition: transform 100ms;5877  outline-offset: 2px;5878}5879.peach-accent-swatch:hover { transform: scale(1.15); }5880.peach-accent-swatch.is-active {5881  border-color: var(--peach-t0);5882  transform: scale(1.1);5883}58845885.peach-pill-group {5886  display: flex;5887  gap: 6px;5888}5889.peach-pill-group .peach-btn.is-active {5890  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5891  border-color: var(--peach-accent);5892  color: var(--peach-t0);5893}58945895/* ── Card entry styles ───────────────────────────────────────── */5896.peach-card-number {5897  font-family: var(--peach-mono);5898  letter-spacing: 0.08em;5899}59005901.peach-card-network-badge {5902  font-size: 0.625rem;5903  padding: 1px 5px;5904  border-radius: 4px;5905  border: 0.5px solid var(--peach-border);5906  color: var(--peach-text-dim);5907  margin-left: 6px;5908  vertical-align: middle;5909}59105911.peach-card-expiry-row {5912  display: flex;5913  align-items: center;5914  gap: 8px;5915}59165917.peach-card-expiry-sep {5918  color: var(--peach-text-dim);5919}59205921/* ── Pro tier — upgrade screen ──────────────────────────────── */5922.peach-pro-mark {5923  font-size: 0.5625rem;5924  color: var(--peach-accent);5925  margin-left: 6px;5926  vertical-align: super;5927  opacity: 0.7;5928}59295930.peach-pro-mini-badge {5931  display: block;5932  font-size: 0.625rem;5933  font-style: italic;5934  color: var(--peach-accent);5935  letter-spacing: 0.04em;5936  margin-top: -2px;5937  padding-left: 2px;5938  opacity: 0.85;5939  text-align: center;5940}59415942.peach-wordmark-stack {5943  display: inline-flex;5944  flex-direction: column;5945  align-items: center;5946}59475948/* ── Pro tier — upgrade page ─────────────────────────────────── */5949/* ── Pro upgrade — redesigned editorial layout ─────────────────── */59505951.peach-pro-upgrade {5952  display: flex;5953  flex-direction: column;5954  align-items: stretch;5955  gap: 10px;5956  padding: 2px 2px 12px;5957}59585959.peach-pro-eyebrow {5960  margin: 0;5961  font-family: var(--font-ui);5962  font-size: 0.625rem;5963  font-weight: 500;5964  letter-spacing: 0.12em;5965  color: var(--peach-accent);5966}59675968.peach-pro-headline {5969  margin: 0;5970  font-family: var(--font-display, "Cormorant Garamond", serif);5971  font-size: 30px;5972  font-weight: 700;5973  font-style: normal;5974  line-height: 1.05;5975  color: var(--peach-t0);5976  letter-spacing: -0.01em;5977}5978.peach-pro-headline em {5979  font-style: italic;5980  font-weight: 400;5981  color: var(--peach-accent);5982}59835984.peach-pro-subtitle {5985  margin: 0;5986  font-size: 0.6875rem;5987  line-height: 1.5;5988  color: var(--peach-t1);5989}59905991/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */5992.peach-pro-section-label {5993  margin: 6px 0 0;5994  font-family: var(--font-ui);5995  font-size: 0.5625rem;5996  font-weight: 500;5997  letter-spacing: 0.12em;5998  text-transform: uppercase;5999  color: var(--peach-t2);6000}60016002/* 2-column numbered feature grid */6003.peach-pro-grid {6004  display: grid;6005  grid-template-columns: 1fr 1fr;6006  border-top: 1px solid var(--peach-border);6007  border-left: 1px solid var(--peach-border);6008}60096010.peach-pro-grid-item {6011  display: flex;6012  flex-direction: column;6013  gap: 2px;6014  padding: 8px 9px;6015  border-right: 1px solid var(--peach-border);6016  border-bottom: 1px solid var(--peach-border);6017}60186019.peach-pro-grid-item--wide {6020  grid-column: 1 / -1;6021}60226023.peach-pro-grid-num {6024  font-family: var(--font-mono);6025  font-size: 0.5625rem;6026  color: var(--peach-accent);6027  letter-spacing: 0.06em;6028  opacity: 0.85;6029}60306031.peach-pro-grid-name {6032  font-size: 0.8125rem;6033  font-weight: 500;6034  color: var(--peach-t0);6035  line-height: 1.2;6036}60376038.peach-pro-grid-desc {6039  font-size: 0.625rem;6040  color: var(--peach-t1);6041  line-height: 1.4;6042}60436044.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6045  animation: peach-pulse-accent 600ms ease-out forwards;6046}60476048@keyframes peach-pulse-accent {6049  0%   { opacity: 1; transform: scale(1.2); }6050  100% { opacity: 0.85; transform: scale(1); }6051}60526053/* Actions */6054.peach-pro-upgrade-actions {6055  display: flex;6056  flex-direction: column;6057  align-items: stretch;6058  gap: 10px;6059}60606061.peach-pro-pricing {6062  margin: 0;6063  font-size: 1rem;6064  font-weight: 600;6065  color: var(--peach-t0);6066  letter-spacing: 0.01em;6067}6068.peach-pro-pricing-sub {6069  font-size: 0.75rem;6070  font-weight: 400;6071  color: var(--peach-t1);6072  letter-spacing: 0.02em;6073}60746075.peach-pro-upgrade-cta {6076  display: flex;6077  align-items: center;6078  justify-content: center;6079  text-decoration: none;6080  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6081  border: 1px solid var(--peach-accent);6082  border-radius: 10px;6083  color: var(--peach-accent);6084  font-family: var(--font-ui);6085  font-size: 0.8125rem;6086  font-weight: 600;6087  letter-spacing: 0.06em;6088  padding: 11px 16px;6089  transition: background 0.15s ease, color 0.15s ease;6090}6091.peach-pro-upgrade-cta:hover {6092  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6093}60946095.peach-pro-key-divider {6096  display: flex;6097  align-items: center;6098  gap: 8px;6099  color: var(--peach-t2);6100  font-size: 0.5625rem;6101  letter-spacing: 0.1em;6102}6103.peach-pro-key-divider::before,6104.peach-pro-key-divider::after {6105  content: "";6106  flex: 1;6107  height: 1px;6108  background: var(--peach-border);6109}61106111/* Inline key entry row */6112.peach-pro-key-inline {6113  display: flex;6114  align-items: center;6115  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6116  border: 1px solid var(--peach-border);6117  border-radius: 8px;6118  overflow: hidden;6119}6120.peach-pro-key-inline-input {6121  flex: 1;6122  background: transparent;6123  border: none;6124  outline: none;6125  color: var(--peach-t1);6126  font-family: var(--font-mono);6127  font-size: 0.625rem;6128  letter-spacing: 0.06em;6129  padding: 9px 10px;6130}6131.peach-pro-key-inline-input::placeholder {6132  color: var(--peach-t2);6133}6134.peach-pro-key-apply {6135  background: transparent;6136  border: none;6137  border-left: 1px solid var(--peach-border);6138  color: var(--peach-t2);6139  font-family: var(--font-ui);6140  font-size: 0.5625rem;6141  font-weight: 600;6142  letter-spacing: 0.08em;6143  padding: 9px 10px;6144  cursor: pointer;6145  transition: color 0.15s ease;6146  flex-shrink: 0;6147}6148.peach-pro-key-apply:not(:disabled):hover {6149  color: var(--peach-accent);6150}6151.peach-pro-key-apply:disabled {6152  opacity: 0.35;6153  cursor: not-allowed;6154}61556156/* ── Pro tier — key ceremony ─────────────────────────────────── */6157.peach-pro-key-ceremony {6158  display: flex;6159  flex-direction: column;6160  align-items: center;6161  gap: 12px;6162  padding: 20px 4px 16px;6163}61646165.peach-pro-key-ceremony .peach-lock-rune-string {6166  font-size: 1rem;6167  gap: 12px;6168  flex: 0;6169  justify-content: center;6170}61716172.peach-pro-key-ceremony-label {6173  margin: 0;6174  font-size: 0.6875rem;6175  color: var(--peach-t2);6176  font-style: italic;6177  letter-spacing: 0.04em;6178}61796180.peach-pro-key-input {6181  font-family: var(--font-mono, monospace);6182  letter-spacing: 0.06em;6183  text-align: center;6184  width: 100%;6185  box-sizing: border-box;6186}61876188.peach-pro-key-error {6189  margin: 0;6190  font-size: 0.75rem;6191  text-align: center;6192  color: var(--peach-breach, #e55);6193  padding: 0;6194}61956196.peach-pro-key-activate {6197  width: 100%;6198  text-align: center;6199  box-sizing: border-box;6200  padding: 10px 20px;6201  font-size: 0.8125rem;6202}62036204.peach-pro-key-cancel {6205  background: transparent;6206  border: 0;6207  color: var(--peach-t2);6208  font-size: 0.6875rem;6209  cursor: pointer;6210  padding: 2px 8px;6211  transition: color 0.2s;6212}62136214.peach-pro-key-cancel:hover { color: var(--peach-accent); }62156216/* ── Pro tier — active state ─────────────────────────────────── */6217.peach-pro-active {6218  display: flex;6219  flex-direction: column;6220  align-items: center;6221  gap: 0;6222  padding: 8px 4px 16px;6223  min-height: 280px;6224}62256226.peach-pro-active-hero {6227  display: flex;6228  flex-direction: column;6229  align-items: center;6230  gap: 6px;6231  padding: 20px 0 22px;6232}62336234.peach-pro-active-mark-wrap {6235  display: flex;6236  align-items: center;6237  justify-content: center;6238  margin-bottom: 4px;6239}62406241.peach-pro-active-mark {6242  width: 60px;6243  height: 60px;6244  filter:6245    drop-shadow(0 0 10px color-mix(in srgb, var(--peach-accent) 55%, transparent))6246    drop-shadow(0 0 26px color-mix(in srgb, var(--peach-accent) 22%, transparent));6247}62486249.peach-pro-active-title {6250  font-family: var(--font-display, var(--font-ui));6251  font-size: 26px;6252  margin: 0;6253  color: var(--peach-t0);6254  letter-spacing: 0.01em;6255}62566257.peach-pro-active-since {6258  margin: 0;6259  font-size: 0.6875rem;6260  color: var(--peach-t2);6261  font-style: italic;6262}62636264.peach-pro-active-features {6265  display: flex;6266  flex-direction: column;6267  gap: 8px;6268  width: 100%;6269  padding: 14px 8px 0;6270  border-top: 1px solid var(--peach-border);6271  flex: 1;6272}62736274.peach-pro-active-feature {6275  display: flex;6276  align-items: center;6277  gap: 9px;6278}62796280.peach-pro-active-feature-mark {6281  color: var(--peach-accent);6282  font-size: 0.625rem;6283  opacity: 0.65;6284  flex-shrink: 0;6285}62866287.peach-pro-active-feature-name {6288  font-size: 0.75rem;6289  color: var(--peach-t1);6290}62916292.peach-pro-deactivate {6293  align-self: center;6294  background: transparent;6295  border: 0;6296  color: var(--peach-t3);6297  font-size: 0.625rem;6298  cursor: pointer;6299  padding: 8px 0 0;6300  margin-top: 16px;6301  letter-spacing: 0.03em;6302  transition: color 0.2s;6303}63046305.peach-pro-deactivate:hover { color: var(--peach-t2); }63066307.peach-pro-deactivate:disabled {6308  opacity: 0.5;6309  cursor: default;6310}63116312/* ── Pro advanced health remediation queue ──────────────────── */6313.peach-health-pro-queue {6314  display: flex;6315  flex-direction: column;6316  gap: 10px;6317  padding: 12px;6318  margin: 0 0 12px;6319  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6320  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6321  border-radius: 10px;6322}63236324.peach-health-pro-queue-head {6325  display: flex;6326  justify-content: space-between;6327  align-items: baseline;6328}63296330.peach-health-pro-queue-title {6331  font-size: 0.75rem;6332  font-weight: 500;6333  letter-spacing: 0.04em;6334  text-transform: uppercase;6335  color: var(--peach-accent);6336}63376338.peach-health-pro-queue-score {6339  font-size: 0.6875rem;6340  color: var(--peach-t2);6341}63426343.peach-health-pro-row {6344  display: flex;6345  gap: 10px;6346  align-items: center;6347  padding: 8px 0;6348  border-top: 1px solid var(--peach-border);6349}63506351.peach-health-pro-row-info {6352  flex: 1;6353  display: flex;6354  flex-direction: column;6355  gap: 4px;6356  min-width: 0;6357}63586359.peach-health-pro-row-name {6360  font-size: 0.8125rem;6361  color: var(--peach-t0);6362  overflow: hidden;6363  text-overflow: ellipsis;6364  white-space: nowrap;6365}63666367.peach-health-pro-row-meta {6368  font-size: 0.6875rem;6369  color: var(--peach-t2);6370}63716372.peach-health-pro-bar {6373  height: 2px;6374  background: var(--peach-border);6375  border-radius: 2px;6376  overflow: hidden;6377  margin-top: 2px;6378}63796380.peach-health-pro-bar-fill {6381  height: 100%;6382  background: var(--peach-accent);6383  transition: width 200ms ease-out;6384}63856386/* ── Pro activation celebration ── */6387@keyframes peach-pro-bloom {6388  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6389  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6390                 drop-shadow(0 0 48px var(--peach-glow)); }6391  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6392}63936394@keyframes peach-pro-wordmark-in {6395  from { opacity: 0; transform: translateY(4px); }6396  to   { opacity: 1; transform: translateY(0); }6397}63986399@keyframes peach-pro-fade-out {6400  from { opacity: 1; }6401  to   { opacity: 0; }6402}64036404.peach-pro-celebration {6405  background:6406    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6407    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6408    var(--peach-bg);6409  border: 1px solid var(--peach-t3);6410  box-shadow:6411    0 2px 8px rgba(0,0,0,0.55),6412    0 14px 48px rgba(0,0,0,0.7),6413    0 0 0 1px rgba(240,232,216,0.04);6414  overflow: hidden;6415  width: 320px;6416  height: 520px;6417  display: flex;6418  flex-direction: column;6419  align-items: center;6420  justify-content: center;6421  gap: 8px;6422  padding: 32px 24px;6423  text-align: center;6424}64256426.peach-pro-celebration.is-leaving {6427  animation: peach-pro-fade-out 400ms ease forwards;6428}64296430.peach-pro-bloom-target {6431  display: flex;6432  align-items: center;6433  justify-content: center;6434  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6435  margin-bottom: 12px;6436}64376438.peach-pro-bloom-icon {6439  width: 48px;6440  height: 48px;6441}64426443.peach-pro-wordmark {6444  font-family: var(--font-display);6445  font-size: 22px;6446  font-style: italic;6447  font-weight: 400;6448  color: var(--peach-accent);6449  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6450}64516452.peach-pro-thankyou {6453  font-size: 0.75rem;6454  font-style: italic;6455  color: var(--peach-t2);6456  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6457}645864596460/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6461.peach-pro-notice-banner {6462  display: flex;6463  align-items: center;6464  gap: 8px;6465  padding: 7px 12px;6466  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6467  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6468  font-size: 0.6875rem;6469  color: var(--peach-t2);6470  font-family: "IBM Plex Mono", monospace;6471  flex-shrink: 0;6472}64736474.peach-pro-notice-link {6475  background: none;6476  border: none;6477  padding: 0;6478  cursor: pointer;6479  font-size: 0.6875rem;6480  color: var(--peach-accent);6481  font-family: "IBM Plex Mono", monospace;6482  margin-left: auto;6483  white-space: nowrap;6484}64856486.peach-pro-notice-close {6487  background: none;6488  border: none;6489  padding: 0 0 0 4px;6490  cursor: pointer;6491  font-size: 0.625rem;6492  color: var(--peach-t3);6493  line-height: 1;6494}64956496/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6497   Renders over whatever view is showing. 60-second expiry; the popup ticks6498   the countdown each second and clears the banner when it hits zero. */6499.peach-pair-request-banner {6500  display: flex;6501  flex-direction: column;6502  gap: 8px;6503  padding: 10px 12px;6504  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6505  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6506  font-family: "IBM Plex Mono", monospace;6507  flex-shrink: 0;6508}65096510.peach-pair-toast {6511  padding: 8px 12px;6512  font-family: "IBM Plex Mono", monospace;6513  font-size: 0.75rem;6514  color: var(--peach-t1);6515  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6516  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6517  flex-shrink: 0;6518  text-align: center;6519}65206521.peach-pair-toast strong {6522  color: var(--peach-t0);6523  font-weight: 500;6524}65256526.peach-pair-request-header {6527  display: flex;6528  align-items: center;6529  gap: 8px;6530  font-size: 0.75rem;6531  color: var(--peach-t1);6532}65336534.peach-pair-request-mark {6535  font-size: 0.875rem;6536  display: inline-flex;6537  align-items: center;6538}65396540.peach-pair-request-icon {6541  width: 1em;6542  height: 1em;6543}65446545.peach-pair-request-title {6546  font-weight: 600;6547  color: var(--peach-t0);6548}65496550.peach-pair-request-countdown {6551  margin-left: auto;6552  font-variant-numeric: tabular-nums;6553  color: var(--peach-t2);6554  font-size: 0.6875rem;6555}65566557.peach-pair-request-body {6558  margin: 0;6559  font-size: 0.75rem;6560  color: var(--peach-t1);6561  line-height: 1.4;6562}65636564.peach-pair-request-body strong {6565  color: var(--peach-t0);6566  font-weight: 600;6567}65686569.peach-pair-request-actions {6570  display: flex;6571  gap: 8px;6572  justify-content: flex-end;6573}65746575/* ─── First-run onboarding ──────────────────────────────────────────────6576   Three-card welcome shown once before vault creation. The PeachScript6577   rune background drifts behind everything at very low opacity — it's6578   atmosphere, not focus. The cards themselves use the same panel6579   language as the rest of the popup so the transition into NewVault is6580   continuous, not a jarring switch of visual register. */65816582.peach-onboarding {6583  position: relative;6584  display: flex;6585  flex-direction: column;6586  width: 100%;6587  height: 100%;6588  padding: 16px 16px 18px;6589  box-sizing: border-box;6590  overflow: hidden;6591  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6592}65936594.peach-onboarding.is-completing {6595  animation: peach-onboard-exit 200ms ease-out forwards;6596}65976598.peach-rune-background {6599  position: absolute;6600  inset: 0;6601  width: 100%;6602  height: 100%;6603  pointer-events: none;6604  z-index: 0;6605  transition: opacity 500ms ease-out;6606}66076608.peach-onboarding.is-completing .peach-rune-background {6609  opacity: 0;6610}66116612.peach-onboarding-header {6613  position: relative;6614  z-index: 1;6615  display: flex;6616  align-items: center;6617  margin-bottom: 14px;6618}66196620.peach-onboarding-card {6621  position: relative;6622  z-index: 1;6623  flex: 1;6624  display: flex;6625  flex-direction: column;6626  gap: 10px;6627  padding: 22px 20px;6628  border-radius: 16px;6629  border: 1px solid var(--peach-t3);6630  background:6631    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6632  backdrop-filter: blur(3px);6633  -webkit-backdrop-filter: blur(3px);6634  box-shadow:6635    inset 0 1px 0 rgba(240, 232, 216, 0.04),6636    0 12px 28px rgba(0, 0, 0, 0.12);6637  cursor: pointer;6638  user-select: none;6639  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6640}66416642.peach-onboarding-card.is-exiting {6643  animation: peach-card-out 120ms ease-in forwards;6644  pointer-events: none;6645}66466647.peach-onboarding-card-headline {6648  margin: 0;6649  font-family: var(--font-display);6650  font-style: italic;6651  font-weight: 400;6652  font-size: 22px;6653  line-height: 1.05;6654  color: var(--peach-t0);6655  white-space: pre-line;6656}66576658.peach-onboarding-divider {6659  margin: 4px 0 6px;6660  border: 0;6661  border-top: 1px solid var(--peach-t3);6662  width: 100%;6663}66646665.peach-onboarding-body {6666  margin: 0;6667  font-size: 0.8125rem;6668  line-height: 1.6;6669  color: var(--peach-t1);6670}66716672.peach-onboarding-warning {6673  display: flex;6674  align-items: flex-start;6675  gap: 8px;6676  margin: 6px 0 0;6677  padding-top: 8px;6678  border-top: 1px dashed var(--peach-t3);6679  font-size: 0.8125rem;6680  line-height: 1.5;6681  color: var(--peach-t1);6682}66836684.peach-onboarding-warning-icon {6685  color: var(--peach-accent);6686  font-size: 0.8125rem;6687  line-height: 1.5;6688  flex: 0 0 auto;6689}66906691.peach-onboarding-nav {6692  position: relative;6693  z-index: 1;6694  display: flex;6695  align-items: center;6696  justify-content: space-between;6697  margin-top: 12px;6698  padding: 0 4px;6699}67006701.peach-onboarding-dots {6702  display: flex;6703  align-items: center;6704  gap: 6px;6705}67066707.peach-onboarding-dot {6708  width: 6px;6709  height: 6px;6710  border-radius: 50%;6711  background: var(--peach-t2);6712  transition: width 200ms ease, height 200ms ease, background 200ms ease;6713}67146715.peach-onboarding-dot.is-active {6716  width: 8px;6717  height: 8px;6718  background: var(--peach-accent);6719}67206721.peach-onboarding-next {6722  background: none;6723  border: none;6724  padding: 4px 0;6725  cursor: pointer;6726  font-family: "IBM Plex Mono", monospace;6727  font-size: 0.6875rem;6728  letter-spacing: 0.04em;6729  color: var(--peach-t1);6730  transition: color 150ms ease;6731}67326733.peach-onboarding-next:hover {6734  color: var(--peach-t0);6735}67366737.peach-onboarding-next:disabled {6738  opacity: 0.5;6739  cursor: default;6740}67416742.peach-onboarding-back {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-t2);6751  transition: color 150ms ease;6752}67536754.peach-onboarding-back:hover {6755  color: var(--peach-t0);6756}67576758.peach-onboarding-back:disabled {6759  opacity: 0.5;6760  cursor: default;6761}67626763/* Reserve back-button width on the first card so the dots stay centred */6764.peach-onboarding-back-spacer {6765  width: 44px;6766}67676768.peach-onboarding-mobile-card-buttons {6769  display: flex;6770  flex-direction: column;6771  gap: 8px;6772  margin-top: 16px;6773}67746775@keyframes peach-onboard-enter {6776  from { opacity: 0; transform: translateY(20px); }6777  to   { opacity: 1; transform: translateY(0); }6778}67796780@keyframes peach-onboard-exit {6781  from { opacity: 1; }6782  to   { opacity: 0; }6783}67846785@keyframes peach-card-in {6786  from { opacity: 0; transform: translateX(12px); }6787  to   { opacity: 1; transform: translateX(0); }6788}67896790@keyframes peach-card-out {6791  from { opacity: 1; transform: translateX(0); }6792  to   { opacity: 0; transform: translateX(-12px); }6793}67946795/* ─── New vault screen — matched to onboarding card language ─────────── */67966797.peach-newvault {6798  position: relative;6799  display: flex;6800  flex-direction: column;6801  gap: 12px;6802  padding: 16px 16px 18px;6803  overflow: hidden;6804}68056806/* Suppress the warm-blob ambient art inherited from .lock-screen — the6807   new vault card now carries the visual weight. */6808.peach-newvault::before {6809  content: none;6810}68116812.peach-newvault-header {6813  position: relative;6814  z-index: 2;6815  display: flex;6816  align-items: center;6817  gap: 10px;6818  margin-bottom: 2px;6819}68206821.peach-newvault-back {6822  display: inline-flex;6823  align-items: center;6824  gap: 4px;6825  background: transparent;6826  border: none;6827  color: var(--peach-t2);6828  font-family: "IBM Plex Mono", monospace;6829  font-size: 0.625rem;6830  letter-spacing: 0.06em;6831  cursor: pointer;6832  padding: 4px 6px;6833  border-radius: 6px;6834  transition: color 120ms ease, background 120ms ease;6835}68366837.peach-newvault-back:hover {6838  color: var(--peach-t0);6839  background: rgba(240, 232, 216, 0.04);6840}68416842.peach-newvault-mark {6843  position: absolute;6844  right: -12px;6845  top: 6px;6846  width: 110px;6847  height: 110px;6848  pointer-events: none;6849  opacity: 0.10;6850  filter: saturate(0.9);6851  z-index: 0;6852}6853.peach-newvault-mark-art {6854  width: 100%;6855  height: 100%;6856}6857.peach-newvault-mark-art path:nth-child(1) {6858  fill: rgba(123, 144, 96, 0.88);6859}6860.peach-newvault-mark-art path:nth-child(2) {6861  stroke: rgba(94, 122, 66, 0.95);6862}68636864.peach-newvault-card {6865  position: relative;6866  z-index: 1;6867  display: flex;6868  flex-direction: column;6869  gap: 12px;6870  padding: 22px 20px 18px;6871  border-radius: 16px;6872  border: 1px solid var(--peach-t3);6873  background:6874    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6875  backdrop-filter: blur(3px);6876  -webkit-backdrop-filter: blur(3px);6877  box-shadow:6878    inset 0 1px 0 rgba(240, 232, 216, 0.04),6879    0 12px 28px rgba(0, 0, 0, 0.12);6880  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6881}68826883.peach-newvault-headline {6884  margin: 0;6885  font-family: var(--font-display);6886  font-style: italic;6887  font-weight: 400;6888  font-size: 24px;6889  line-height: 1.05;6890  color: var(--peach-t0);6891  white-space: pre-line;6892}68936894.peach-newvault-divider {6895  margin: 2px 0 4px;6896  border: 0;6897  border-top: 1px solid var(--peach-t3);6898  width: 100%;6899}69006901.peach-newvault-field {6902  display: flex;6903  flex-direction: column;6904  gap: 4px;6905}69066907.peach-newvault-label-row {6908  display: flex;6909  align-items: center;6910  justify-content: space-between;6911}69126913/* Monospace input scaled to the card. Replaces the 22px unlock-input6914   so the placeholder no longer overflows and the field reads as part6915   of the same surface as the body copy. */6916.peach-newvault-input {6917  font-size: 0.875rem;6918  letter-spacing: 0.18em;6919  padding: 8px 0;6920}6921.peach-newvault-input::placeholder {6922  letter-spacing: 0.18em;6923  color: var(--peach-t2);6924}69256926.peach-newvault-hint {6927  margin: 2px 0 0;6928  font-family: "IBM Plex Mono", monospace;6929  font-size: 0.625rem;6930  color: var(--peach-t2);6931  letter-spacing: 0.04em;6932}69336934.peach-newvault-submit {6935  margin-top: 4px;6936}69376938.peach-newvault-warning {6939  display: flex;6940  align-items: flex-start;6941  gap: 8px;6942  margin: 4px 0 0;6943  padding-top: 10px;6944  border-top: 1px dashed var(--peach-t3);6945  font-size: 0.75rem;6946  line-height: 1.5;6947  color: var(--peach-t1);6948}69496950.peach-newvault-warning-icon {6951  color: var(--peach-accent);6952  font-size: 0.8125rem;6953  line-height: 1.4;6954  flex: 0 0 auto;6955}69566957.peach-newvault-footer {6958  position: relative;6959  z-index: 1;6960  display: flex;6961  flex-direction: column;6962  gap: 4px;6963  padding: 4px 4px 0;6964}69656966/* Settings body — warm accent gradient gives the glass something to blur against */6967.peach-settings-body {6968  background:6969    radial-gradient(6970      ellipse at 30% 20%,6971      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,6972      transparent 60%6973    );6974}69756976/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */6977/* ── Danger cards (Replace + Destroy) ────────────────────────────────────6978 * Two severity levels: "warn" for actions that are dangerous-but-recoverable6979 * (replacing the vault from a backup file) and "hazard" for actions that6980 * are absolutely irreversible (Panic). Both use the same card scaffold so6981 * they read as a pair, but the colour family signals the severity at a6982 * glance — yellow for caution, red for don't.6983 */6984.peach-danger-card {6985  --danger-tint: 235, 158, 52; /* amber */6986  display: flex;6987  flex-direction: column;6988  gap: 8px;6989  padding: 14px;6990  margin-top: 10px;6991  border-radius: 12px;6992  border: 1px solid rgba(var(--danger-tint), 0.32);6993  background:6994    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),6995    rgba(var(--danger-tint), 0.04);6996  box-shadow:6997    inset 0 1px 0 rgba(var(--danger-tint), 0.08),6998    0 0 24px rgba(var(--danger-tint), 0.04);6999  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7000}70017002.peach-danger-card:hover {7003  border-color: rgba(var(--danger-tint), 0.55);7004  box-shadow:7005    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7006    0 0 36px rgba(var(--danger-tint), 0.10);7007}70087009.peach-danger-card--hazard {7010  --danger-tint: 220, 38, 38; /* red */7011}70127013.peach-danger-card-head {7014  display: flex;7015  align-items: center;7016  gap: 10px;7017}70187019.peach-danger-card-glyph {7020  width: 28px;7021  height: 28px;7022  flex-shrink: 0;7023  display: flex;7024  align-items: center;7025  justify-content: center;7026  border-radius: 8px;7027  background: rgba(var(--danger-tint), 0.12);7028  color: rgba(var(--danger-tint), 0.95);7029  font-size: 1rem;7030  line-height: 1;7031}70327033.peach-danger-card-title {7034  margin: 0;7035  font-size: 0.8125rem;7036  font-weight: 600;7037  color: rgba(var(--danger-tint), 0.92);7038  letter-spacing: 0.01em;7039}70407041.peach-danger-card-copy {7042  margin: 0;7043  font-size: 0.6875rem;7044  line-height: 1.5;7045  color: var(--peach-t2);7046}70477048.peach-danger-card-button {7049  width: 100%;7050  padding: 9px;7051  margin-top: 4px;7052  background: transparent;7053  border: 1px solid rgba(var(--danger-tint), 0.45);7054  border-radius: 8px;7055  color: rgba(var(--danger-tint), 0.9);7056  font-size: 0.75rem;7057  font-weight: 500;7058  letter-spacing: 0.02em;7059  cursor: pointer;7060  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7061}70627063.peach-danger-card-button:hover {7064  background: rgba(var(--danger-tint), 0.10);7065  border-color: rgba(var(--danger-tint), 0.75);7066  color: rgb(var(--danger-tint));7067}70687069/* ── Panic flow (three-step destruction) ───────────────────────────────── */7070.peach-panic {7071  display: flex;7072  flex-direction: column;7073  flex: 1;7074  min-height: 0;7075  padding: 28px 20px 20px;7076  gap: 18px;7077  overflow-y: auto;7078  scrollbar-width: none;7079  -ms-overflow-style: none;7080}70817082.peach-panic::-webkit-scrollbar { display: none; }70837084.peach-panic-step2 {7085  background: rgba(220, 38, 38, 0.04);7086}70877088.peach-panic-step3 {7089  position: relative;7090  background: #0f0505;7091  color: #ffffff;7092  overflow: hidden;7093}70947095.peach-panic-rune-bg {7096  position: absolute;7097  inset: 0;7098  opacity: 0.22;7099  pointer-events: none;7100  overflow: hidden;7101}71027103.peach-panic-rune-bg canvas {7104  width: 100% !important;7105  height: 100% !important;7106}71077108.peach-panic-icon {7109  font-size: 32px;7110  color: rgb(220, 38, 38);7111  line-height: 1;7112}71137114.peach-panic-title {7115  margin: 0;7116  font-size: 18px;7117  font-weight: 500;7118  color: var(--peach-t1);7119}71207121.peach-panic-title--severe {7122  font-size: 20px;7123  font-weight: 700;7124  color: rgb(220, 38, 38);7125}71267127.peach-panic-body {7128  margin: 0;7129  font-size: 0.8125rem;7130  line-height: 1.55;7131  color: var(--peach-t2);7132}71337134.peach-panic-body--severe {7135  color: rgba(220, 38, 38, 0.85);7136}71377138.peach-panic-body--final {7139  font-size: 1rem;7140  font-weight: 700;7141  color: rgb(255, 80, 80);7142  line-height: 1.4;7143}71447145.peach-panic-body--final-intro {7146  font-size: 1rem;7147  color: #ffffff;7148  font-weight: 400;7149}71507151.peach-panic-divider {7152  height: 1px;7153  background: rgba(255, 255, 255, 0.08);7154  margin: 4px 0;7155}71567157.peach-panic-confirm-input {7158  width: 100%;7159  padding: 10px 12px;7160  background: rgba(255, 255, 255, 0.02);7161  border: 1px solid rgba(220, 38, 38, 0.4);7162  border-radius: 8px;7163  color: var(--peach-t1);7164  font-family: "IBM Plex Mono", monospace;7165  font-size: 0.875rem;7166  letter-spacing: 0.12em;7167  text-transform: uppercase;7168}71697170.peach-panic-confirm-input:focus {7171  outline: none;7172  border-color: rgb(220, 38, 38);7173}71747175.peach-panic-confirm-input--match {7176  border-color: rgb(220, 38, 38);7177  color: rgb(220, 38, 38);7178}71797180.peach-panic-confirm-label {7181  font-size: 0.6875rem;7182  color: var(--peach-t2);7183  margin: 0 0 -8px;7184  letter-spacing: 0.06em;7185}71867187.peach-panic-actions {7188  display: flex;7189  flex-direction: column;7190  gap: 10px;7191  margin-top: auto;7192}71937194.peach-panic-button {7195  width: 100%;7196  padding: 12px;7197  border-radius: 8px;7198  font-size: 0.8125rem;7199  cursor: pointer;7200  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7201}72027203.peach-panic-button--primary {7204  background: var(--peach-accent);7205  border: 1px solid var(--peach-accent);7206  color: #ffffff;7207  font-weight: 600;7208}72097210.peach-panic-button--primary:hover {7211  background: color-mix(in srgb, var(--peach-accent) 88%, white);7212}72137214.peach-panic-button--danger {7215  background: rgb(220, 38, 38);7216  border: 1px solid rgb(220, 38, 38);7217  color: #ffffff;7218  font-weight: 600;7219}72207221.peach-panic-button--danger:disabled {7222  opacity: 0.35;7223  cursor: not-allowed;7224}72257226.peach-panic-button--ghost {7227  background: transparent;7228  border: 1px solid rgba(255, 255, 255, 0.18);7229  color: var(--peach-t2);7230}72317232.peach-panic-button--ghost:hover {7233  border-color: rgba(255, 255, 255, 0.32);7234  color: var(--peach-t1);7235}72367237.peach-panic-link {7238  background: transparent;7239  border: none;7240  padding: 4px 0;7241  color: rgba(220, 38, 38, 0.65);7242  font-size: 0.75rem;7243  cursor: pointer;7244  text-align: left;7245  text-decoration: underline;7246  text-underline-offset: 3px;7247}72487249.peach-panic-link:hover {7250  color: rgb(220, 38, 38);7251}72527253.peach-panic-bar {7254  background: rgb(220, 38, 38);7255  padding: 16px 20px;7256  margin: -28px -20px 0;7257  text-align: center;7258  font-size: 0.8125rem;7259  font-weight: 700;7260  letter-spacing: 0.12em;7261  color: #ffffff;7262}72637264.peach-panic-final-button {7265  width: 100%;7266  padding: 14px;7267  background: rgb(220, 38, 38);7268  border: none;7269  border-radius: 8px;7270  color: #ffffff;7271  font-size: 0.875rem;7272  font-weight: 700;7273  letter-spacing: 0.08em;7274  text-transform: uppercase;7275  cursor: pointer;7276  animation: peach-panic-pulse 2s ease-in-out infinite;7277}72787279.peach-settings-license {7280  margin-top: 10px;7281  padding-top: 10px;7282  border-top: 1px solid var(--peach-t3);7283}72847285.peach-settings-label {7286  font-size: 0.625rem;7287  letter-spacing: 0.08em;7288  color: var(--peach-t3);7289  display: block;7290  margin-bottom: 6px;7291}72927293.peach-settings-license-row {7294  display: flex;7295  align-items: center;7296  justify-content: space-between;7297  gap: 8px;7298}72997300.peach-settings-license-key {7301  font-family: 'IBM Plex Mono', monospace;7302  font-size: 0.75rem;7303  color: var(--peach-t0);7304  letter-spacing: 0.04em;7305  word-break: break-all;7306  flex: 1;7307  min-width: 0;7308}73097310.peach-settings-license-key--masked {7311  font-family: 'IBM Plex Mono', monospace;7312  font-size: 0.6rem;7313  color: var(--peach-t1);7314  letter-spacing: 0.18em;7315  user-select: none;7316}73177318.peach-settings-license-actions {7319  display: flex;7320  align-items: center;7321  gap: 2px;7322  flex-shrink: 0;7323}73247325.peach-settings-license-copy {7326  font-size: 0.6875rem;7327  color: var(--peach-accent);7328  background: transparent;7329  border: none;7330  cursor: pointer;7331  padding: 4px 8px;7332  border-radius: 4px;7333  flex-shrink: 0;7334  transition: opacity 150ms ease;7335}73367337.peach-settings-license-copy:hover {7338  opacity: 0.75;7339}73407341.peach-settings-license-toggle {7342  display: flex;7343  align-items: center;7344  justify-content: center;7345  background: transparent;7346  border: none;7347  cursor: pointer;7348  padding: 4px 6px;7349  border-radius: 4px;7350  color: var(--peach-t2);7351  transition: color 150ms ease;7352}73537354.peach-settings-license-toggle:hover {7355  color: var(--peach-t1);7356}73577358@keyframes peach-panic-pulse {7359  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7360  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7361}73627363[data-motion="reduce"] .peach-panic-final-button {7364  animation: none;7365}73667367/* Vault History — Settings → Vault sub-view */73687369.peach-history-list {7370  border: 1px solid var(--peach-border);7371  border-radius: 8px;7372  overflow: hidden;7373  margin: 8px 0 4px;7374}73757376.peach-history-row {7377  display: flex;7378  align-items: center;7379  justify-content: space-between;7380  padding: 9px 12px;7381  gap: 10px;7382  border-bottom: 1px solid var(--peach-border);7383}73847385.peach-history-row:last-child {7386  border-bottom: none;7387}73887389.peach-history-meta {7390  display: flex;7391  flex-direction: column;7392  gap: 2px;7393  min-width: 0;7394  flex: 1;7395}73967397.peach-history-time {7398  font-size: 0.75rem;7399  font-family: 'IBM Plex Mono', ui-monospace, monospace;7400  color: var(--peach-t0);7401  white-space: nowrap;7402  overflow: hidden;7403  text-overflow: ellipsis;7404}74057406.peach-history-sub {7407  font-size: 0.625rem;7408  color: var(--peach-t2);7409  letter-spacing: 0.06em;7410  text-transform: uppercase;7411  white-space: nowrap;7412  overflow: hidden;7413  text-overflow: ellipsis;7414}74157416.peach-history-btn {7417  flex-shrink: 0;7418  white-space: nowrap;7419  min-width: 56px;7420  text-align: center;7421}74227423.peach-history-btn.is-busy {7424  opacity: 0.65;7425}74267427.peach-history-footer {7428  font-size: 0.625rem;7429  color: var(--peach-t3);7430  letter-spacing: 0.05em;7431  text-align: right;7432  margin: 0;7433  padding: 2px 0 0;7434}74357436/* ── Context menu + swipe-copy flash ─────────────────────── */7437.peach-context-menu-backdrop {7438  position: fixed;7439  inset: 0;7440  background: rgba(0, 0, 0, 0.45);7441  z-index: 100;7442  display: flex;7443  align-items: flex-end;7444  justify-content: center;7445  animation: peach-ctx-fade 140ms ease both;7446}7447.peach-context-menu {7448  width: min(360px, calc(100vw - 24px));7449  margin-bottom: max(env(safe-area-inset-bottom), 12px);7450  background: var(--peach-bg);7451  border: 1px solid var(--peach-t3);7452  border-radius: 14px;7453  padding: 6px;7454  display: flex;7455  flex-direction: column;7456  gap: 2px;7457  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7458  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7459}7460@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7461@keyframes peach-ctx-rise {7462  from { transform: translateY(16px); opacity: 0; }7463  to   { transform: translateY(0);    opacity: 1; }7464}7465.peach-context-menu-item {7466  background: transparent;7467  color: var(--peach-t0);7468  border: 0;7469  border-radius: 10px;7470  padding: 12px 14px;7471  text-align: left;7472  font: inherit;7473  cursor: pointer;7474}7475.peach-context-menu-item:hover,7476.peach-context-menu-item:focus-visible {7477  background: var(--peach-t3);7478}7479.peach-context-menu-item--danger {7480  color: var(--peach-health-bad, #d96868);7481}7482.peach-context-menu-item--cancel {7483  color: var(--peach-t2);7484  margin-top: 4px;7485  border-top: 1px solid var(--peach-t3);7486  border-radius: 0 0 10px 10px;7487}74887489/* Swipe-to-copy flash */7490.peach-entry-row.is-copy-flash {7491  animation: peach-copy-flash 600ms ease both;7492}7493@keyframes peach-copy-flash {7494  0%   { background: transparent; }7495  20%  { background: rgba(217, 153, 51, 0.32); }7496  100% { background: transparent; }7497}74987499html { font-size: 16px; }75007501/* ── Recovery word entry ─────────────────────────────────────────── */7502.peach-lock-recover-link {7503  display: block;7504  width: 100%;7505  margin-top: 12px;7506  background: none;7507  border: none;7508  font-family: "IBM Plex Mono", monospace;7509  font-size: 0.625rem;7510  letter-spacing: 0.06em;7511  color: var(--peach-t2);7512  cursor: pointer;7513  text-align: center;7514  padding: 4px;7515  transition: color 120ms ease;7516}7517.peach-lock-recover-link:hover {7518  color: var(--peach-t0);7519}75207521.lock-screen--recovery {7522  display: flex;7523  flex-direction: column;7524  align-items: stretch;7525  padding: 12px 20px 24px;7526  overflow: hidden;7527}75287529.peach-recovery-nav {7530  display: flex;7531  align-items: center;7532  position: relative;7533  z-index: 1;7534  margin-bottom: 4px;7535}75367537/* Mask runes to the top decorative band only — keep inputs and the7538   bottom CTA button clear. The bottom of the popup is reserved for7539   submit buttons; rendering runes there overlaps the button glyph. */7540.peach-rune-background--recovery {7541  -webkit-mask-image: linear-gradient(7542    to bottom,7543    black 0px, black 85px,7544    transparent 110px,7545    transparent 100%7546  );7547  mask-image: linear-gradient(7548    to bottom,7549    black 0px, black 85px,7550    transparent 110px,7551    transparent 100%7552  );7553}75547555.peach-recovery-header {7556  text-align: center;7557  margin-bottom: 16px;7558  margin-top: 4px;7559}7560.peach-recovery-header .peach-onboarding-headline {7561  font-size: 1.25rem;7562  font-weight: 300;7563  letter-spacing: 0.02em;7564  margin: 0 0 4px;7565}7566.peach-recovery-header .peach-hint {7567  font-family: "IBM Plex Mono", monospace;7568  font-size: 0.625rem;7569  color: var(--peach-t2);7570  letter-spacing: 0.04em;7571  margin: 0;7572}75737574/* 12-word grid: 2 columns × 6 rows */7575.peach-recovery-grid {7576  display: grid;7577  grid-template-columns: repeat(2, 1fr);7578  gap: 12px 20px;7579  width: 100%;7580  margin-bottom: 0;7581}75827583.peach-recovery-word-slot {7584  display: flex;7585  align-items: center;7586  gap: 6px;7587  min-width: 0;7588}75897590.peach-recovery-word-index {7591  font-family: "IBM Plex Mono", monospace;7592  font-size: 0.5rem;7593  color: rgba(255, 255, 255, 0.35);7594  min-width: 14px;7595  flex-shrink: 0;7596  text-align: right;7597  letter-spacing: 0.04em;7598}75997600.peach-recovery-word-input {7601  flex: 1;7602  min-width: 0;7603  background: transparent;7604  border: none;7605  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7606  color: var(--peach-t0);7607  font-family: "IBM Plex Mono", monospace;7608  font-size: 0.6875rem;7609  letter-spacing: 0.06em;7610  padding: 5px 2px 4px;7611  outline: none;7612  text-transform: lowercase;7613  transition: border-color 120ms ease;7614}7615.peach-recovery-word-input::placeholder {7616  color: rgba(255, 255, 255, 0.18);7617}7618.peach-recovery-word-input:focus {7619  border-bottom-color: var(--peach-accent);7620}76217622.peach-recovery-submit {7623  width: 100%;7624  margin-top: auto;7625}76267627.peach-recovery-new-password-form {7628  width: 100%;7629  display: flex;7630  flex-direction: column;7631  gap: 16px;7632  margin-bottom: 8px;7633}7634.peach-recovery-new-password-form .peach-newvault-field {7635  display: flex;7636  flex-direction: column;7637  gap: 4px;7638}76397640/* ── Recovery words display (post-create) ────────────────────────── */7641.lock-screen--recovery-display {7642  display: flex;7643  flex-direction: column;7644  align-items: stretch;7645  padding: 0 20px 20px;7646  min-height: 0;7647  overflow-y: auto;7648}76497650.peach-recovery-words-display {7651  width: 100%;7652  margin-bottom: 16px;7653  border: 1px solid var(--peach-t3);7654  border-radius: 8px;7655  padding: 12px 14px;7656  background: rgba(245, 240, 234, 0.04);7657}76587659.peach-recovery-words-label {7660  font-family: "IBM Plex Mono", monospace;7661  font-size: 0.5rem;7662  letter-spacing: 0.08em;7663  color: var(--peach-t2);7664  text-transform: uppercase;7665  margin-bottom: 10px;7666}76677668.peach-recovery-word-list {7669  list-style: none;7670  margin: 0;7671  padding: 0;7672  display: grid;7673  grid-template-columns: repeat(2, 1fr);7674  gap: 6px 16px;7675}76767677.peach-recovery-word-item {7678  display: flex;7679  align-items: baseline;7680  gap: 5px;7681}76827683.peach-recovery-word-num {7684  font-family: "IBM Plex Mono", monospace;7685  font-size: 0.5rem;7686  color: var(--peach-t2);7687  width: 14px;7688  flex: 0 0 14px;7689  text-align: right;7690  letter-spacing: 0.04em;7691  font-variant-numeric: tabular-nums;7692}76937694.peach-recovery-download-btn {7695  display: block;7696  margin: 10px auto 0;7697  padding: 4px 10px;7698  background: transparent;7699  border: 1px solid var(--peach-border);7700  border-radius: 6px;7701  color: var(--peach-t2);7702  font-family: "IBM Plex Mono", monospace;7703  font-size: 0.5625rem;7704  letter-spacing: 0.06em;7705  text-transform: lowercase;7706  cursor: pointer;7707  transition: border-color 0.15s, color 0.15s;7708}77097710.peach-recovery-download-btn:hover {7711  border-color: var(--peach-accent);7712  color: var(--peach-t0);7713}77147715.peach-recovery-word-text {7716  font-family: "IBM Plex Mono", monospace;7717  font-size: 0.6875rem;7718  letter-spacing: 0.06em;7719  color: var(--peach-t0);7720  text-transform: lowercase;7721}77227723.peach-hint--warning {7724  color: var(--peach-accent);7725  font-style: italic;7726}7727.peach-hint--success {7728  color: var(--peach-t2);7729  font-family: "IBM Plex Mono", monospace;7730  font-size: 0.625rem;7731  letter-spacing: 0.06em;7732}77337734/* Confirmation step */7735.peach-recovery-confirm {7736  width: 100%;7737  flex: 1;7738  display: flex;7739  flex-direction: column;7740}7741.peach-recovery-confirm-label {7742  font-family: "IBM Plex Mono", monospace;7743  font-size: 0.5625rem;7744  letter-spacing: 0.04em;7745  color: var(--peach-t2);7746  text-align: center;7747  margin: 0 0 12px;7748}7749.peach-recovery-confirm-fields {7750  display: flex;7751  flex-direction: column;7752  gap: 14px;7753  margin-bottom: 10px;7754}7755.peach-recovery-confirm-field {7756  display: flex;7757  align-items: center;7758  gap: 8px;7759}7760.peach-recovery-confirm-num {7761  font-family: "IBM Plex Mono", monospace;7762  font-size: 0.5rem;7763  color: var(--peach-t2);7764  min-width: 44px;7765  letter-spacing: 0.04em;7766}7767.peach-recovery-confirm-input {7768  flex: 1;7769  background: transparent;7770  border: none;7771  border-bottom: 1px solid var(--peach-t3);7772  color: var(--peach-t0);7773  font-family: "IBM Plex Mono", monospace;7774  font-size: 0.6875rem;7775  letter-spacing: 0.06em;7776  padding: 4px 2px 3px;7777  outline: none;7778  text-transform: lowercase;7779  transition: border-color 120ms ease;7780}7781.peach-recovery-confirm-input:focus {7782  border-bottom-color: var(--peach-accent);7783}7784.peach-recovery-confirm-input:disabled {7785  opacity: 0.4;7786  cursor: not-allowed;7787}7788.peach-recovery-confirm-btn {7789  width: 100%;7790  margin-top: auto;7791}77927793/* ============================================================7794   Sync info sheet7795   ============================================================ */77967797.peach-sync-info-backdrop {7798  position: fixed;7799  inset: 0;7800  z-index: 200;7801  background: rgba(0, 0, 0, 0.55);7802  display: flex;7803  align-items: flex-end;7804  animation: peach-fade-in 200ms ease forwards;7805}78067807@keyframes peach-fade-in {7808  from { opacity: 0; }7809  to   { opacity: 1; }7810}78117812.peach-sync-info-sheet {7813  width: 100%;7814  background: var(--peach-bg-card, var(--peach-bg));7815  border-top-left-radius: 20px;7816  border-top-right-radius: 20px;7817  padding: 12px 24px 32px;7818  display: flex;7819  flex-direction: column;7820  gap: 20px;7821  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;7822}78237824@keyframes peach-sheet-up {7825  from { transform: translateY(100%); }7826  to   { transform: translateY(0); }7827}78287829.peach-sync-info-handle {7830  width: 36px;7831  height: 4px;7832  border-radius: 2px;7833  background: var(--peach-border);7834  margin: 0 auto 4px;7835  flex-shrink: 0;7836}78377838.peach-sync-info-title {7839  font-family: 'Cormorant Garamond', serif;7840  font-style: italic;7841  font-size: 26px;7842  font-weight: 600;7843  color: var(--peach-t0);7844  margin: 0;7845  line-height: 1.2;7846}78477848.peach-sync-info-body {7849  display: flex;7850  flex-direction: column;7851  gap: 14px;7852}78537854.peach-sync-info-point {7855  display: flex;7856  gap: 12px;7857  align-items: flex-start;7858  font-size: 14px;7859  color: var(--peach-t2);7860  line-height: 1.6;7861  margin: 0;7862}78637864.peach-sync-info-icon {7865  color: var(--peach-accent);7866  font-size: 16px;7867  flex-shrink: 0;7868  margin-top: 1px;7869}78707871.peach-sync-info-actions {7872  display: flex;7873  flex-direction: column;7874  gap: 12px;7875  margin-top: 4px;7876}78777878.peach-sync-info-pro-link {7879  background: none;7880  border: none;7881  font-size: 13px;7882  color: var(--peach-t3);7883  cursor: pointer;7884  padding: 0;7885  font-family: inherit;7886  text-align: center;7887  transition: color 150ms ease;7888}78897890.peach-sync-info-pro-link:hover {7891  color: var(--peach-accent);7892}78937894.peach-btn--full {7895  width: 100%;7896}78977898/* ── Sync screen ── */78997900.peach-sync-coming-soon {7901  display: flex;7902  align-items: flex-start;7903  gap: 10px;7904  padding: 12px 14px;7905  background: var(--peach-s1);7906  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);7907  border-radius: 10px;7908}7909.peach-sync-coming-soon__icon {7910  flex-shrink: 0;7911  color: var(--peach-accent);7912  margin-top: 1px;7913  line-height: 0;7914}7915.peach-sync-coming-soon__title {7916  font-family: 'Cormorant Garamond', serif;7917  font-weight: 500;7918  font-size: 13px;7919  color: var(--peach-accent);7920  margin: 0 0 5px;7921  line-height: 1.3;7922}7923.peach-sync-coming-soon__body {7924  font-size: 12px;7925  color: var(--peach-t1);7926  line-height: 1.55;7927  margin: 0;7928}79297930.peach-sync-screen {7931  display: flex;7932  flex-direction: column;7933  height: 100%;7934}79357936.peach-sync-content {7937  flex: 1;7938  overflow-y: auto;7939  padding: 24px 20px 40px;7940  display: flex;7941  flex-direction: column;7942  gap: 24px;7943}79447945/* Intro (State A) */7946.peach-sync-headline {7947  font-family: 'Cormorant Garamond', serif;7948  font-style: italic;7949  font-size: 28px;7950  font-weight: 600;7951  color: var(--peach-t0);7952  margin: 0 0 10px;7953  line-height: 1.2;7954}79557956.peach-sync-intro-body {7957  font-size: 14px;7958  color: var(--peach-t1);7959  line-height: 1.6;7960  margin: 0;7961}79627963.peach-sync-pro-note {7964  display: flex;7965  flex-direction: column;7966  gap: 8px;7967  background: var(--peach-t3);7968  border-radius: 10px;7969  padding: 12px 14px;7970}79717972.peach-sync-pro-note-text {7973  font-size: 12px;7974  color: var(--peach-t2);7975  line-height: 1.5;7976  margin: 0;7977}79787979.peach-sync-pro-link {7980  background: none;7981  border: none;7982  font-size: 12px;7983  color: var(--peach-accent);7984  cursor: pointer;7985  padding: 0;7986  font-family: inherit;7987  text-align: left;7988}79897990/* Status (State C) */7991.peach-sync-status {7992  padding: 12px 0;7993  border-bottom: 1px solid var(--peach-border);7994}79957996.peach-sync-status-row {7997  display: flex;7998  align-items: center;7999  gap: 8px;8000}80018002.peach-sync-dot {8003  width: 7px;8004  height: 7px;8005  border-radius: 50%;8006  flex-shrink: 0;8007}80088009.peach-sync-dot--green { background: var(--peach-health-ok); }8010.peach-sync-dot--amber { background: var(--peach-accent); }80118012.peach-sync-status-text {8013  font-family: 'IBM Plex Mono', monospace;8014  font-size: 11px;8015  color: var(--peach-t2);8016}80178018/* Paired devices */8019.peach-sync-section {8020  display: flex;8021  flex-direction: column;8022  gap: 2px;8023}80248025.peach-sync-section-label {8026  font-family: 'IBM Plex Mono', monospace;8027  font-size: 10px;8028  letter-spacing: 0.1em;8029  color: var(--peach-t3);8030  margin: 0 0 10px;8031}80328033.peach-sync-device-row {8034  display: flex;8035  justify-content: space-between;8036  align-items: baseline;8037  padding: 10px 0;8038  border-bottom: 1px solid var(--peach-border);8039  gap: 12px;8040}80418042.peach-sync-device-name {8043  font-size: 14px;8044  color: var(--peach-t1);8045}80468047.peach-sync-device-meta {8048  font-family: 'IBM Plex Mono', monospace;8049  font-size: 11px;8050  color: var(--peach-t3);8051  white-space: nowrap;8052}80538054.peach-sync-hub-note {8055  padding: 14px 16px;8056  border: 1px solid var(--peach-border);8057  border-radius: 10px;8058  display: flex;8059  flex-direction: column;8060  gap: 6px;8061  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8062}80638064.peach-sync-hub-note-title {8065  font-size: 13px;8066  font-weight: 600;8067  color: var(--peach-t0);8068  margin: 0;8069}80708071.peach-sync-hub-note-body {8072  font-size: 12px;8073  color: var(--peach-t2);8074  line-height: 1.6;8075  margin: 0;8076}80778078/* Action buttons */8079.peach-sync-actions {8080  display: flex;8081  gap: 10px;8082  flex-wrap: wrap;8083}80848085/* Upgrade prompt (State B) */8086.peach-sync-upgrade {8087  display: flex;8088  flex-direction: column;8089  gap: 12px;8090  padding: 16px;8091  border: 1px solid var(--peach-border);8092  border-radius: 10px;8093}80948095.peach-sync-upgrade-text {8096  font-size: 13px;8097  color: var(--peach-t2);8098  line-height: 1.6;8099  margin: 0;8100}81018102/* Network note */8103.peach-sync-network-note {8104  font-size: 12px;8105  color: var(--peach-t3);8106  line-height: 1.6;8107  margin: 0;8108}81098110/* Advanced */8111.peach-sync-advanced {8112  margin-top: auto;8113  padding-top: 16px;8114  border-top: 1px solid var(--peach-border);8115}81168117.peach-sync-advanced-toggle {8118  display: flex;8119  align-items: center;8120  gap: 8px;8121  background: none;8122  border: none;8123  font-family: 'IBM Plex Mono', monospace;8124  font-size: 11px;8125  letter-spacing: 0.08em;8126  color: var(--peach-t3);8127  cursor: pointer;8128  padding: 0;8129  text-transform: uppercase;8130}81318132.peach-sync-advanced-chevron {8133  display: inline-block;8134  transition: transform 200ms ease;8135  font-size: 10px;8136}81378138.peach-sync-advanced-chevron.is-open {8139  transform: rotate(90deg);8140}81418142.peach-sync-advanced-content {8143  margin-top: 14px;8144}81458146.peach-sync-advanced-row {8147  display: flex;8148  justify-content: space-between;8149  align-items: center;8150  gap: 16px;8151}81528153.peach-sync-advanced-title {8154  font-size: 14px;8155  color: var(--peach-t1);8156  margin: 0 0 2px;8157}81588159.peach-sync-advanced-subtitle {8160  font-size: 12px;8161  color: var(--peach-t3);8162  margin: 0;8163  line-height: 1.5;8164}81658166/* ── Add Device — Android scan tabs ─────────────────────────────────────── */81678168.peach-pairing-tabs {8169  display: flex;8170  border: 1px solid var(--peach-border);8171  border-radius: 8px;8172  overflow: hidden;8173  margin-bottom: 4px;8174}81758176.peach-pairing-tab {8177  flex: 1;8178  padding: 10px 0;8179  background: none;8180  border: none;8181  font-family: 'IBM Plex Mono', monospace;8182  font-size: 11px;8183  letter-spacing: 0.06em;8184  color: var(--peach-t2);8185  cursor: pointer;8186  transition: background 150ms, color 150ms;8187}81888189.peach-pairing-tab.is-active {8190  background: var(--peach-accent);8191  color: #fff;8192  font-weight: 600;8193}81948195.peach-pairing-tab:not(.is-active):active {8196  background: var(--peach-border);8197}81988199/* Camera view */8200.peach-pairing-camera-container {8201  position: relative;8202  width: 100%;8203  aspect-ratio: 1;8204  border-radius: 12px;8205  overflow: hidden;8206  background: #000;8207  flex-shrink: 0;8208}82098210.peach-pairing-video {8211  width: 100%;8212  height: 100%;8213  object-fit: cover;8214}82158216.peach-pairing-scan-frame {8217  position: absolute;8218  top: 50%;8219  left: 50%;8220  transform: translate(-50%, -50%);8221  width: 60%;8222  aspect-ratio: 1;8223  border: 2px solid var(--peach-accent);8224  border-radius: 8px;8225  pointer-events: none;8226}82278228/* ── Notes Mode ── */82298230/* Overlay that crossfades over the vault */8231.peach-notes-overlay {8232  position: fixed;8233  inset: 0;8234  z-index: 90;8235  opacity: 0;8236  pointer-events: none;8237  animation: peach-mode-in 220ms ease-in forwards;8238}82398240.peach-notes-overlay.is-visible {8241  opacity: 1;8242  pointer-events: auto;8243}82448245@keyframes peach-mode-in {8246  from { opacity: 0; }8247  to   { opacity: 1; }8248}82498250/* Top-level notes surface */8251.peach-notes-mode {8252  position: absolute;8253  inset: 0;8254  background: var(--peach-bg);8255  display: flex;8256  flex-direction: column;8257}82588259/* Rune canvas positioned behind content */8260.peach-note-rune-canvas {8261  position: absolute;8262  inset: 0;8263  width: 100%;8264  height: 100%;8265  pointer-events: none;8266  z-index: 0;8267}82688269/* TOC wrapper */8270.peach-notes-toc-wrapper {8271  position: absolute;8272  inset: 0;8273  z-index: 1;8274  opacity: 1;8275  pointer-events: auto;8276  transition: opacity 200ms ease;8277}82788279.peach-notes-toc-wrapper.is-hidden {8280  opacity: 0;8281  pointer-events: none;8282}82838284/* Editor wrapper */8285.peach-notes-editor-wrapper {8286  position: absolute;8287  inset: 0;8288  z-index: 2;8289  opacity: 0;8290  pointer-events: none;8291  transition: opacity 200ms ease;8292}82938294.peach-notes-editor-wrapper.is-visible {8295  opacity: 1;8296  pointer-events: auto;8297}82988299/* TOC inner */8300.peach-notes-toc {8301  position: relative;8302  display: flex;8303  flex-direction: column;8304  height: 100%;8305  padding-top: env(safe-area-inset-top, 0px);8306  padding-bottom: env(safe-area-inset-bottom, 0px);8307}83088309/* Shared header */8310.peach-notes-header {8311  display: flex;8312  align-items: center;8313  padding: 12px 16px;8314  gap: 12px;8315  flex-shrink: 0;8316  min-height: 52px;8317  position: relative;8318  z-index: 2;8319}83208321.peach-notes-back {8322  font-size: 22px;8323  color: var(--peach-t2);8324  background: none;8325  border: none;8326  padding: 4px;8327  cursor: pointer;8328  line-height: 1;8329  flex-shrink: 0;8330  transition: color 150ms ease;8331  -webkit-tap-highlight-color: transparent;8332}83338334.peach-notes-back:active { color: var(--peach-t0); }83358336.peach-notes-header-title {8337  flex: 1;8338  font-family: 'Cormorant Garamond', serif;8339  font-style: italic;8340  font-size: 22px;8341  color: var(--peach-t0);8342  text-align: center;8343}83448345.peach-notes-header-title.is-breadcrumb {8346  font-family: 'IBM Plex Mono', monospace;8347  font-style: normal;8348  font-size: 11px;8349  color: var(--peach-t3);8350  letter-spacing: 0.08em;8351  text-transform: uppercase;8352  cursor: pointer;8353}83548355.peach-notes-header-actions {8356  display: flex;8357  gap: 8px;8358  flex-shrink: 0;8359}83608361.peach-notes-header-btn {8362  width: 36px;8363  height: 36px;8364  display: flex;8365  align-items: center;8366  justify-content: center;8367  background: none;8368  border: none;8369  color: var(--peach-t2);8370  cursor: pointer;8371  border-radius: 8px;8372  font-size: 16px;8373  transition: color 150ms ease, background 150ms ease;8374  -webkit-tap-highlight-color: transparent;8375}83768377.peach-notes-header-btn:active {8378  background: rgba(255,255,255,0.06);8379  color: var(--peach-t0);8380}83818382/* Inline search bar */8383.peach-notes-search-input {8384  flex: 1;8385  background: none;8386  border: none;8387  outline: none;8388  font-family: 'IBM Plex Mono', monospace;8389  font-size: 13px;8390  color: var(--peach-t0);8391  padding: 4px 0;8392  letter-spacing: 0.02em;8393}83948395.peach-notes-search-input::placeholder {8396  color: var(--peach-t3);8397}83988399/* TOC list */8400.peach-notes-list-container {8401  flex: 1;8402  overflow-y: auto;8403  overflow-x: hidden;8404  scrollbar-width: none;8405  -webkit-overflow-scrolling: touch;8406  overscroll-behavior: contain;8407  position: relative;8408  z-index: 1;8409}84108411.peach-notes-list-container::-webkit-scrollbar { display: none; }84128413/* Note row */8414.peach-note-row {8415  position: relative;8416  display: grid;8417  grid-template-columns: 44px 8px 1fr 8px auto;8418  align-items: center;8419  min-height: 72px;8420  padding: 16px 20px;8421  border-bottom: 0.5px solid var(--peach-border);8422  cursor: pointer;8423  overflow: hidden;8424  touch-action: pan-y;8425  user-select: none;8426  -webkit-user-select: none;8427  -webkit-tap-highlight-color: transparent;8428}84298430.peach-note-row:first-child {8431  border-top: 0.5px solid var(--peach-border);8432}84338434.peach-note-row:active {8435  background: rgba(255,255,255,0.02);8436}84378438.peach-note-numeral {8439  font-family: 'Cormorant Garamond', serif;8440  font-style: italic;8441  font-size: 15px;8442  color: var(--peach-accent);8443  text-align: right;8444  line-height: 1;8445  flex-shrink: 0;8446}84478448.peach-note-title-gap { /* grid spacer */ }84498450.peach-note-title {8451  font-family: 'Cormorant Garamond', serif;8452  font-style: italic;8453  font-size: 18px;8454  color: var(--peach-t0);8455  line-height: 1.3;8456  min-width: 0;8457  overflow-wrap: break-word;8458}84598460.peach-note-title-match {8461  color: var(--peach-accent);8462}84638464.peach-note-date {8465  font-family: 'IBM Plex Mono', monospace;8466  font-size: 11px;8467  color: var(--peach-t2);8468  white-space: nowrap;8469  text-align: right;8470  flex-shrink: 0;8471  grid-column: 5;8472}84738474/* Swipe underlays */8475.peach-note-row-underlay {8476  position: absolute;8477  inset: 0;8478  display: flex;8479  align-items: center;8480  padding: 0 24px;8481  font-family: 'IBM Plex Mono', monospace;8482  font-size: 11px;8483  letter-spacing: 0.1em;8484  pointer-events: none;8485  z-index: 0;8486}84878488.peach-note-row-underlay--delete {8489  background: #8B2020;8490  color: rgba(255,255,255,0.9);8491  justify-content: flex-end;8492}84938494.peach-note-row-underlay--archive {8495  background: var(--peach-accent);8496  color: #0C0A06;8497  justify-content: flex-start;8498}84998500/* Delete confirm strip */8501.peach-note-delete-confirm {8502  position: absolute;8503  inset: 0;8504  background: var(--peach-bg);8505  display: flex;8506  align-items: center;8507  gap: 12px;8508  padding: 0 20px;8509  font-family: 'IBM Plex Mono', monospace;8510  font-size: 11px;8511  color: var(--peach-t1);8512  letter-spacing: 0.04em;8513  animation: peach-delete-confirm-in 150ms ease both;8514  z-index: 10;8515}85168517@keyframes peach-delete-confirm-in {8518  from { opacity: 0; }8519  to   { opacity: 1; }8520}85218522.peach-note-delete-confirm-btn {8523  background: #8B2020;8524  color: rgba(255,255,255,0.9);8525  border: none;8526  border-radius: 6px;8527  padding: 4px 10px;8528  font-family: 'IBM Plex Mono', monospace;8529  font-size: 10px;8530  cursor: pointer;8531  letter-spacing: 0.06em;8532}85338534.peach-note-delete-cancel-btn {8535  background: none;8536  border: none;8537  color: var(--peach-t3);8538  font-family: 'IBM Plex Mono', monospace;8539  font-size: 10px;8540  cursor: pointer;8541  letter-spacing: 0.06em;8542  padding: 4px 6px;8543}85448545/* + New note button */8546.peach-notes-new-btn {8547  font-family: 'IBM Plex Mono', monospace;8548  font-size: 12px;8549  color: var(--peach-t3);8550  text-align: center;8551  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8552  background: none;8553  border: none;8554  width: 100%;8555  cursor: pointer;8556  letter-spacing: 0.04em;8557  transition: color 150ms ease;8558  -webkit-tap-highlight-color: transparent;8559}85608561.peach-notes-new-btn:active { color: var(--peach-accent); }85628563/* Empty state */8564.peach-notes-empty {8565  display: flex;8566  flex-direction: column;8567  align-items: center;8568  justify-content: center;8569  flex: 1;8570  padding: 48px 32px;8571  gap: 16px;8572}85738574.peach-notes-empty-text {8575  font-family: 'Cormorant Garamond', serif;8576  font-style: italic;8577  font-size: 20px;8578  color: var(--peach-t3);8579  text-align: center;8580  margin: 0;8581  line-height: 1.4;8582  white-space: pre-line;8583}85848585/* ── Editor surface ── */85868587.peach-note-editor-surface {8588  position: absolute;8589  inset: 0;8590  background: var(--peach-bg);8591  display: flex;8592  flex-direction: column;8593  padding-top: env(safe-area-inset-top, 0px);8594}85958596.peach-note-editor-scroll {8597  flex: 1;8598  overflow-y: auto;8599  overflow-x: hidden;8600  scrollbar-width: none;8601  -webkit-overflow-scrolling: touch;8602  padding: 0 24px 120px;8603  position: relative;8604  z-index: 1;8605}86068607.peach-note-editor-scroll::-webkit-scrollbar { display: none; }86088609/* Desktop toolbar (always visible above body) */8610.peach-note-toolbar-desktop-inline {8611  display: flex;8612  align-items: center;8613  gap: 2px;8614  padding: 6px 0 12px;8615  margin-bottom: 4px;8616  border-bottom: 0.5px solid var(--peach-border);8617}86188619/* Title field */8620.peach-note-title-field {8621  font-family: 'Cormorant Garamond', serif;8622  font-style: italic;8623  font-size: 32px;8624  font-weight: 600;8625  color: var(--peach-t0);8626  line-height: 1.2;8627  padding: 8px 0 0;8628  outline: none;8629  min-height: 44px;8630  word-break: break-word;8631  position: relative;8632  z-index: 1;8633}86348635.peach-note-title-field:empty::before {8636  content: attr(data-placeholder);8637  color: var(--peach-t3);8638  pointer-events: none;8639}86408641/* Hairline separator */8642.peach-note-hairline {8643  height: 0.5px;8644  background: var(--peach-border);8645  margin: 12px 0 20px;8646  position: relative;8647  z-index: 1;8648}86498650/* Body field */8651.peach-note-body-field {8652  font-family: 'DM Sans', sans-serif;8653  font-size: 16px;8654  color: var(--peach-t0);8655  line-height: 1.85;8656  padding: 0;8657  outline: none;8658  min-height: 240px;8659  word-break: break-word;8660  position: relative;8661  z-index: 1;8662}86638664.peach-note-body-field:empty::before {8665  content: attr(data-placeholder);8666  color: var(--peach-t3);8667  font-style: italic;8668  pointer-events: none;8669}86708671.peach-note-body-field h2 {8672  font-family: 'Cormorant Garamond', serif;8673  font-style: italic;8674  font-size: 22px;8675  font-weight: 600;8676  color: var(--peach-t0);8677  margin: 20px 0 8px;8678}86798680.peach-note-body-field blockquote {8681  border-left: 2px solid var(--peach-accent);8682  margin: 12px 0;8683  padding-left: 16px;8684  color: var(--peach-t1);8685  font-style: italic;8686}86878688.peach-note-body-field ul,8689.peach-note-body-field ol {8690  padding-left: 20px;8691  margin: 8px 0;8692}86938694.peach-note-body-field li {8695  margin: 4px 0;8696}86978698.peach-note-body-field hr {8699  border: none;8700  border-top: 0.5px solid var(--peach-border);8701  margin: 16px 0;8702}87038704/* Saved indicator */8705.peach-note-saved-indicator {8706  font-family: 'IBM Plex Mono', monospace;8707  font-size: 11px;8708  color: var(--peach-t3);8709  letter-spacing: 0.04em;8710  text-align: right;8711  padding: 6px 24px;8712  flex-shrink: 0;8713  transition: opacity 300ms ease;8714  pointer-events: none;8715  position: relative;8716  z-index: 1;8717}87188719/* Mobile keyboard toolbar */8720.peach-note-toolbar-mobile {8721  display: flex;8722  align-items: center;8723  padding: 8px 16px;8724  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));8725  background: var(--peach-bg);8726  border-top: 0.5px solid var(--peach-border);8727  gap: 4px;8728  flex-shrink: 0;8729  position: relative;8730  z-index: 10;8731}87328733.peach-note-toolbar-btn {8734  min-width: 36px;8735  height: 36px;8736  display: flex;8737  align-items: center;8738  justify-content: center;8739  background: none;8740  border: none;8741  border-radius: 8px;8742  cursor: pointer;8743  font-size: 14px;8744  color: var(--peach-t1);8745  font-family: 'DM Sans', sans-serif;8746  font-weight: 600;8747  transition: background 100ms ease, color 100ms ease;8748  -webkit-tap-highlight-color: transparent;8749}87508751.peach-note-toolbar-btn--italic { font-style: italic; }8752.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }8753.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }87548755.peach-note-toolbar-divider {8756  width: 0.5px;8757  height: 20px;8758  background: var(--peach-border);8759  margin: 0 4px;8760  flex-shrink: 0;8761}87628763.peach-note-toolbar-spacer { flex: 1; }87648765/* Desktop: larger headline in TOC */8766@media (min-width: 400px) {8767  .peach-notes-header-title:not(.is-breadcrumb) {8768    font-size: 32px;8769  }87708771  .peach-note-row {8772    min-height: 64px;8773    padding: 14px 16px;8774  }8775}87768777/* Flying title — shared element during expansion/collapse */87788779/* ─── Light theme overrides ───────────────────────────────────────────────8780   Tokens that cannot be expressed as variable substitutions — hardcoded8781   context-specific values that need separate light-mode rules. */87828783/* Settings section headers: use text-label (#79766F) per restoration brief —8784   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY8785   presence without fighting the light parchment background. */8786.light .peach-settings-sub-label,8787[data-theme="light"] .peach-settings-sub-label,8788.light .peach-settings-nav-label,8789[data-theme="light"] .peach-settings-nav-label {8790  color: #79766F;8791}87928793/* Secondary action buttons (ghost / subtle): filled with input-well surface8794   so they read as recessed against the parchment card background. */8795.light .peach-btn--ghost:not(.peach-icon-btn),8796[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {8797  background: #EEE7DD;8798  border-color: #DDD5CB;8799  color: #1A1208;8800}8801.light .peach-icon-btn,8802[data-theme="light"] .peach-icon-btn {8803  background: transparent;8804  border-color: transparent;8805}8806.light .peach-btn--subtle,8807[data-theme="light"] .peach-btn--subtle {8808  background: #EEE7DD;8809  border-color: #DDD5CB;8810}88118812/* Wide secondary action button on the lock screen — override the8813   hardcoded dark-mode rgba values with warm parchment equivalents. */8814.light .peach-lock-secondary,8815[data-theme="light"] .peach-lock-secondary {8816  background: #EEE7DD;8817  border-color: #DDD5CB;8818  color: #1A1208;8819}8820.light .peach-lock-secondary:hover,8821[data-theme="light"] .peach-lock-secondary:hover {8822  background: #F0E9DF;8823}88248825/* Entry row hover: bg-row lifts the row above the card surface. */8826.light .peach-entry-row:hover,8827[data-theme="light"] .peach-entry-row:hover {8828  background: #F2EBE1;8829}8830.light .peach-entry-row.is-active,8831[data-theme="light"] .peach-entry-row.is-active {8832  background: #F2EBE1;8833}8834.light .peach-entry-row.is-selected,8835[data-theme="light"] .peach-entry-row.is-selected {8836  background: #F5EDE2;8837}88388839/* ──────────────────────────────────────────────────────────────────────────8840   Chirp pairing flow — bird-stage animation (Phase 1)8841   See src/popup/components/ChirpPairingFlow.tsx and the brief §6.2.8842   Three-act animation gated on the [data-phase] attribute of8843   .peach-chirp-pair; child layers (birds, chirp arcs, flight wave, dot)8844   each react via either pose class or visibility flag.8845   Tokens: accent surfaces use var(--peach-accent); bird illustration8846   colours are baked into the SVG per the brand-peach exception in §3.1.8847   ────────────────────────────────────────────────────────────────────── */88488849.peach-chirp-pair {8850  position: absolute;8851  inset: 0;8852  z-index: 3;8853  display: flex;8854  flex-direction: column;8855  padding: 14px 12px 12px;8856  width: 100%;8857  box-sizing: border-box;8858  gap: 0;8859  background:8860    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),8861    var(--peach-bg);8862  color: var(--peach-t0);8863  overflow-y: auto;8864  overflow-x: hidden;8865  scrollbar-width: none;8866  isolation: isolate;8867  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;8868}8869@keyframes peach-chirp-overlay-in {8870  from { opacity: 0; transform: translateY(8px); }8871  to   { opacity: 1; transform: translateY(0); }8872}8873.peach-chirp-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }8874.peach-chirp-pair::before {8875  content: '';8876  position: absolute;8877  inset: 0;8878  border-radius: inherit;8879  pointer-events: none;8880  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);8881  z-index: 0;8882}8883.peach-chirp-pair > * { position: relative; z-index: 1; }88848885/* Header --------------------------------------------------------------- */8886.peach-chirp-head {8887  display: flex; align-items: center; gap: 10px;8888}8889.peach-chirp-back {8890  width: 32px; height: 32px;8891  display: inline-flex; align-items: center; justify-content: center;8892  background: transparent;8893  border: none;8894  border-radius: 8px;8895  color: var(--peach-t1);8896  cursor: pointer;8897  transition: color 0.15s ease, box-shadow 0.15s ease;8898}8899.peach-chirp-back:hover {8900  color: var(--peach-accent);8901  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);8902}8903.peach-chirp-title {8904  font-family: var(--font-display, Georgia, serif);8905  font-style: italic;8906  font-size: 24px;8907  font-weight: 500;8908  letter-spacing: 0.005em;8909  color: var(--peach-t0);8910  line-height: 1;8911}8912.peach-chirp-head-spacer { flex: 1; }89138914/* Chip row ------------------------------------------------------------- */8915.peach-chirp-chip-row {8916  display: flex;8917  align-items: center;8918  justify-content: flex-start;8919  margin-top: 12px;8920}8921.peach-chirp-chip {8922  display: inline-flex; align-items: center; gap: 8px;8923  padding: 5px 10px 5px 8px;8924  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);8925  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);8926  border-radius: 999px;8927  font-family: var(--peach-mono, ui-monospace, monospace);8928  font-size: 11px;8929  letter-spacing: 0.04em;8930  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));8931}8932.peach-chirp-chip-dot {8933  width: 6px; height: 6px; border-radius: 50%;8934  background: var(--peach-accent);8935  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);8936}8937.peach-chirp-chip[data-phase="paired"] {8938  background: color-mix(in srgb, #4f9eda 12%, transparent);8939  border-color: color-mix(in srgb, #4f9eda 28%, transparent);8940  color: #76b6e8;8941}8942.peach-chirp-chip[data-phase="paired"] .peach-chirp-chip-dot {8943  background: #76b6e8;8944  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);8945}8946.peach-chirp-chip[data-phase="timeout"],8947.peach-chirp-chip[data-phase="mic_denied"],8948.peach-chirp-chip[data-phase="version_mismatch"],8949.peach-chirp-chip[data-phase="handshake_failed"] {8950  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);8951  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);8952  color: var(--peach-warn, #d29257);8953}8954.peach-chirp-chip[data-phase="timeout"] .peach-chirp-chip-dot,8955.peach-chirp-chip[data-phase="mic_denied"] .peach-chirp-chip-dot,8956.peach-chirp-chip[data-phase="version_mismatch"] .peach-chirp-chip-dot,8957.peach-chirp-chip[data-phase="handshake_failed"] .peach-chirp-chip-dot {8958  background: var(--peach-warn, #d29257);8959  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);8960}89618962/* Bird stage ----------------------------------------------------------- */8963.peach-chirp-stage {8964  position: relative;8965  margin: 14px 0 8px;8966  height: 180px;8967  border-radius: 12px;8968  background:8969    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),8970    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),8971    color-mix(in srgb, var(--peach-bg) 92%, #000);8972  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);8973  overflow: hidden;8974  isolation: isolate;8975}8976.peach-chirp-stage::after {8977  content: '';8978  position: absolute;8979  left: 12%; right: 12%;8980  bottom: 36px;8981  height: 1px;8982  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);8983}89848985.peach-chirp-bird-slot {8986  position: absolute;8987  bottom: 8px;8988  width: 100px;8989  height: 110px;8990  display: flex;8991  align-items: flex-end;8992  justify-content: center;8993}8994.peach-chirp-bird-slot-desktop { left: 28px; }8995.peach-chirp-bird-slot-mobile { right: 28px; }89968997/* Mobile bird hops in from the right when handshake begins */8998.peach-chirp-bird-slot-mobile {8999  opacity: 1;9000  transform: translateX(-6px);9001  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9002}9003.peach-chirp-stage.act-listening .peach-chirp-bird-slot-mobile,9004.peach-chirp-stage.act-chirping .peach-chirp-bird-slot-mobile,9005.peach-chirp-stage.act-idle .peach-chirp-bird-slot-mobile {9006  opacity: 0;9007  transform: translateX(60px) rotate(8deg);9008}9009.peach-chirp-stage.act-handshake .peach-chirp-bird-slot-desktop,9010.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop {9011  transform: translateX(6px);9012  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9013}90149015/* Paired: both birds bob together */9016.peach-chirp-stage.act-paired .peach-chirp-bird-slot {9017  animation: peach-chirp-happy-bob 1.2s ease-in-out infinite;9018}9019.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { animation-delay: 0.2s; }9020.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop { --bb-x: 6px; }9021.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { --bb-x: -6px; }9022@keyframes peach-chirp-happy-bob {9023  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9024  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9025}90269027/* Bird internal -------------------------------------------------------- */9028.peach-chirp-bird {9029  width: 108px;9030  height: 108px;9031  transform-origin: 50% 95%;9032}9033.peach-chirp-bird svg { width: 100%; height: 100%; overflow: visible; }90349035.peach-chirp-bird-body {9036  transform-origin: 50% 80%;9037  animation: peach-chirp-bird-bob 2.4s ease-in-out infinite;9038}9039@keyframes peach-chirp-bird-bob {9040  0%, 100% { transform: translateY(0) scale(1, 1); }9041  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9042}90439044.peach-chirp-bird-eye-group {9045  animation: peach-chirp-blink 5.2s steps(1, end) infinite;9046  transform-origin: center;9047  transform-box: fill-box;9048}9049@keyframes peach-chirp-blink {9050  0%, 92%, 96%, 100% { transform: scaleY(1); }9051  94%                { transform: scaleY(0.05); }9052}90539054/* Pose: chirping — beak opens, head bobs, aura blooms */9055.peach-chirp-bird-pose-chirping .peach-chirp-bird-body {9056  animation:9057    peach-chirp-bird-bob 2.4s ease-in-out infinite,9058    peach-chirp-squeeze 1.7s ease-in-out infinite;9059}9060@keyframes peach-chirp-squeeze {9061  0%, 70%, 100% { transform-origin: 50% 85%; }9062  78%           { transform: scale(1.04, 0.96) translateY(1px); }9063  86%           { transform: scale(0.98, 1.02); }9064}9065.peach-chirp-bird-pose-chirping .peach-chirp-bird-head-group {9066  animation: peach-chirp-head-bob 1.7s ease-in-out infinite;9067}9068@keyframes peach-chirp-head-bob {9069  0%, 70%, 100% { transform: translateY(0) rotate(0); }9070  78%           { transform: translateY(-3px) rotate(-4deg); }9071  86%           { transform: translateY(-1px) rotate(-2deg); }9072}9073.peach-chirp-bird-pose-chirping .peach-chirp-bird-beak {9074  animation: peach-chirp-beak-open 1.7s ease-in-out infinite;9075}9076@keyframes peach-chirp-beak-open {9077  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9078  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9079  86%           { transform: rotate(-6deg); }9080}9081.peach-chirp-bird-pose-chirping .peach-chirp-bird-aura {9082  animation: peach-chirp-aura 1.7s ease-in-out infinite;9083}9084@keyframes peach-chirp-aura {9085  0%, 100% { opacity: 0; }9086  50%      { opacity: 0.8; }9087}9088.peach-chirp-bird-pose-chirping .peach-chirp-bird-tail {9089  animation: peach-chirp-tail-twitch 1.7s ease-in-out infinite;9090  transform-origin: 100% 50%;9091}9092@keyframes peach-chirp-tail-twitch {9093  0%, 75%, 100% { transform: rotate(0); }9094  82%           { transform: rotate(-3deg) translateX(-1px); }9095}90969097/* Pose: attentive — head tilts toward partner */9098.peach-chirp-bird-pose-attentive .peach-chirp-bird-head-group {9099  animation: peach-chirp-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9100}9101@keyframes peach-chirp-head-tilt {9102  0%   { transform: rotate(0) translateY(0); }9103  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9104  100% { transform: rotate(-6deg); }9105}9106.peach-chirp-bird-pose-attentive .peach-chirp-bird-tail {9107  animation: peach-chirp-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9108  transform-origin: 100% 50%;9109}9110@keyframes peach-chirp-tail-cock {9111  0%   { transform: rotate(0); }9112  100% { transform: rotate(-4deg); }9113}91149115/* Pose: happy — wing flutter, tuft perk, tail wag */9116.peach-chirp-bird-pose-happy .peach-chirp-bird-wing {9117  transform-origin: 80% 60%;9118  animation: peach-chirp-wing-flutter 0.32s ease-in-out 5;9119}9120@keyframes peach-chirp-wing-flutter {9121  0%, 100% { transform: rotate(0) translateY(0); }9122  50%      { transform: rotate(-16deg) translateY(-2px); }9123}9124.peach-chirp-bird-pose-happy .peach-chirp-bird-tuft {9125  transform-origin: 0% 100%;9126  animation: peach-chirp-tuft-perk 0.4s ease-in-out 3;9127}9128@keyframes peach-chirp-tuft-perk {9129  0%, 100% { transform: rotate(0); }9130  50%      { transform: rotate(-15deg) translateY(-1px); }9131}9132.peach-chirp-bird-pose-happy .peach-chirp-bird-tail {9133  transform-origin: 100% 50%;9134  animation: peach-chirp-tail-wag 0.5s ease-in-out 4;9135}9136@keyframes peach-chirp-tail-wag {9137  0%, 100% { transform: rotate(0); }9138  25%      { transform: rotate(6deg); }9139  75%      { transform: rotate(-6deg); }9140}9141.peach-chirp-bird-pose-happy .peach-chirp-bird-head-group {9142  animation: peach-chirp-head-perk 0.5s ease-out;9143}9144@keyframes peach-chirp-head-perk {9145  0%   { transform: translateY(0); }9146  40%  { transform: translateY(-3px) rotate(2deg); }9147  100% { transform: translateY(0); }9148}91499150/* Pose: sad — body droops forward */9151.peach-chirp-bird-pose-sad .peach-chirp-bird-body {9152  transform: translateY(5px) rotate(-2deg);9153  animation: none;9154}9155.peach-chirp-bird-pose-sad .peach-chirp-bird-head-group {9156  transform: translateY(4px) rotate(8deg);9157}9158.peach-chirp-bird-pose-sad .peach-chirp-bird-tuft { transform: rotate(15deg) translateY(2px); }9159.peach-chirp-bird-pose-sad .peach-chirp-bird-tail { transform: rotate(8deg) translateY(2px); }91609161.peach-chirp-bird-pose-hidden { opacity: 0; }91629163/* Chirp arcs ----------------------------------------------------------- */9164.peach-chirp-arcs {9165  position: absolute;9166  top: 18px;9167  width: 96px;9168  height: 70px;9169  pointer-events: none;9170}9171.peach-chirp-arcs-right { right: -60px; }9172.peach-chirp-arcs-left  { left: -60px; transform: scaleX(-1); }9173.peach-chirp-arc {9174  position: absolute;9175  top: 50%;9176  left: 0;9177  width: 40px;9178  height: 40px;9179  margin-top: -20px;9180  border: 1.2px solid #f4d5a8;9181  border-color: transparent #f4d5a8 transparent transparent;9182  border-radius: 50%;9183  opacity: 0;9184  animation: peach-chirp-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9185}9186@keyframes peach-chirp-arc-expand {9187  0%   { transform: scale(0.4); opacity: 0; }9188  20%  { opacity: 0.9; }9189  100% { transform: scale(1.6); opacity: 0; }9190}91919192/* Flight wave ---------------------------------------------------------- */9193.peach-chirp-flight-track {9194  position: absolute;9195  inset: 32px 36px 38px 36px;9196  pointer-events: none;9197}9198.peach-chirp-flight-wave {9199  position: absolute;9200  top: 8px;9201  left: 76px;9202  right: 76px;9203  height: 60px;9204  width: auto;9205  opacity: 0;9206  transition: opacity 0.15s ease;9207  stroke: #f4d5a8;9208  fill: none;9209}9210.peach-chirp-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9211.peach-chirp-flight-wave.is-visible { opacity: 1; }9212.peach-chirp-flight-path,9213.peach-chirp-flight-path-2 {9214  stroke-dasharray: 240;9215  stroke-dashoffset: 240;9216  stroke-linecap: round;9217  fill: none;9218}9219.peach-chirp-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9220.peach-chirp-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9221.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path {9222  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9223}9224.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path-2 {9225  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9226}9227@keyframes peach-chirp-fly {9228  0%   { stroke-dashoffset: 240; opacity: 0; }9229  20%  { opacity: 1; }9230  100% { stroke-dashoffset: -120; opacity: 0; }9231}92329233/* Connection dot ------------------------------------------------------- */9234.peach-chirp-dot {9235  position: absolute;9236  top: 50%; left: 50%;9237  transform: translate(-50%, -50%);9238  width: 40px; height: 40px;9239  opacity: 0;9240  pointer-events: none;9241  transition: opacity 0.3s ease;9242  color: var(--peach-accent);9243}9244.peach-chirp-dot.is-visible { opacity: 1; }9245.peach-chirp-dot-glow {9246  position: absolute; top: 50%; left: 50%;9247  transform: translate(-50%, -50%);9248  width: 38px; height: 38px;9249  border-radius: 50%;9250  filter: blur(10px);9251  opacity: 0.55;9252  background: var(--peach-accent);9253  animation: peach-chirp-dot-bloom 1.4s ease-out;9254}9255.peach-chirp-dot-core {9256  position: absolute; top: 50%; left: 50%;9257  transform: translate(-50%, -50%);9258  width: 8px; height: 8px;9259  border-radius: 50%;9260  background: var(--peach-accent);9261  box-shadow: 0 0 12px currentColor;9262  animation: peach-chirp-dot-core 1.4s ease-out;9263}9264.peach-chirp-dot-ring {9265  position: absolute; top: 50%; left: 50%;9266  width: 60px; height: 60px;9267  transform: translate(-50%, -50%);9268  animation: peach-chirp-dot-ring 1.4s linear;9269  stroke: var(--peach-accent);9270}9271@keyframes peach-chirp-dot-bloom {9272  0%   { width: 4px; height: 4px; opacity: 0; }9273  35%  { width: 60px; height: 60px; opacity: 0.7; }9274  100% { width: 38px; height: 38px; opacity: 0.55; }9275}9276@keyframes peach-chirp-dot-core {9277  0%   { width: 0; height: 0; }9278  35%  { width: 12px; height: 12px; }9279  100% { width: 8px; height: 8px; }9280}9281@keyframes peach-chirp-dot-ring {9282  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9283  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9284  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9285}92869287/* Motes — drift upward across the stage */9288.peach-chirp-motes {9289  position: absolute;9290  inset: 0;9291  pointer-events: none;9292}9293.peach-chirp-mote {9294  position: absolute;9295  width: 2px; height: 2px;9296  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9297  border-radius: 50%;9298  bottom: 32px;9299  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9300  opacity: 0;9301  animation: peach-chirp-mote-drift 6s linear infinite;9302  animation-delay: calc(var(--mote-i, 0) * 0.7s);9303}9304@keyframes peach-chirp-mote-drift {9305  0%   { transform: translateY(0); opacity: 0; }9306  10%  { opacity: 0.6; }9307  90%  { opacity: 0.1; }9308  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9309}93109311/* Status copy ---------------------------------------------------------- */9312.peach-chirp-copy-host {9313  margin: 4px 4px 10px;9314  text-align: center;9315  min-height: 50px;9316}9317.peach-chirp-copy {9318  animation: peach-chirp-copy-in 0.35s ease both;9319}9320@keyframes peach-chirp-copy-in {9321  from { opacity: 0; transform: translateY(4px); }9322  to   { opacity: 1; transform: translateY(0); }9323}9324.peach-chirp-headline {9325  font-family: var(--font-display, Georgia, serif);9326  font-style: italic;9327  font-size: 20px;9328  font-weight: 500;9329  line-height: 1.2;9330  letter-spacing: 0.005em;9331  color: var(--peach-t0);9332  margin-bottom: 6px;9333}9334.peach-chirp-copy-listening .peach-chirp-headline,9335.peach-chirp-copy-chirping .peach-chirp-headline,9336.peach-chirp-copy-idle .peach-chirp-headline {9337  font-family: inherit;9338  font-style: normal;9339  font-weight: 500;9340  font-size: 15px;9341  color: var(--peach-t0);9342  letter-spacing: 0;9343}9344.peach-chirp-copy-paired .peach-chirp-headline {9345  color: var(--peach-t0);9346  font-weight: 600;9347}9348.peach-chirp-sub {9349  font-size: 12.5px;9350  line-height: 1.45;9351  color: var(--peach-t1);9352  max-width: 280px;9353  margin: 0 auto;9354  text-wrap: pretty;9355}93569357/* Status action -------------------------------------------------------- */9358.peach-chirp-action {9359  margin: 2px 4px 10px;9360  margin-top: auto;9361  display: flex;9362  flex-direction: column;9363  gap: 8px;9364}9365.peach-chirp-mic-notice {9366  margin: 0;9367  font-size: 0.625rem;9368  color: var(--peach-t2);9369  line-height: 1.4;9370}9371.peach-chirp-action-waiting {9372  display: flex;9373  align-items: center;9374  justify-content: space-between;9375  gap: 12px;9376}9377.peach-chirp-cancel {9378  min-width: 96px;9379}9380.peach-chirp-listening {9381  display: inline-flex; align-items: center; gap: 4px;9382  font-family: var(--peach-mono, ui-monospace, monospace);9383  font-size: 9.5px;9384  text-transform: uppercase;9385  letter-spacing: 0.12em;9386  color: var(--peach-t1);9387  padding: 8px 10px;9388}9389.peach-chirp-listen-dot {9390  width: 4px; height: 4px;9391  border-radius: 50%;9392  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9393  animation: peach-chirp-listen-pulse 1.2s ease-in-out infinite;9394}9395.peach-chirp-listen-dot:nth-child(2) { animation-delay: 0.2s; }9396.peach-chirp-listen-dot:nth-child(3) { animation-delay: 0.4s; }9397.peach-chirp-listen-label { margin-left: 6px; }9398@keyframes peach-chirp-listen-pulse {9399  0%, 100% { opacity: 0.25; transform: scale(0.9); }9400  50%      { opacity: 1;     transform: scale(1.15); }9401}94029403.peach-chirp-action-handshake {9404  display: flex;9405  flex-direction: column;9406  align-items: center;9407  gap: 8px;9408  padding: 8px 4px;9409}9410.peach-chirp-meter {9411  width: 100%;9412  max-width: 280px;9413  height: 2px;9414  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9415  border-radius: 2px;9416  position: relative;9417  overflow: hidden;9418}9419.peach-chirp-meter-bar {9420  position: absolute;9421  top: 0; bottom: 0;9422  width: 30%;9423  left: -30%;9424  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9425  animation: peach-chirp-meter-sweep 1.4s ease-in-out infinite;9426}9427@keyframes peach-chirp-meter-sweep {9428  0%   { left: -30%; }9429  100% { left: 100%; }9430}9431.peach-chirp-meter-label {9432  font-family: var(--peach-mono, ui-monospace, monospace);9433  font-size: 9.5px;9434  text-transform: uppercase;9435  letter-spacing: 0.14em;9436  color: var(--peach-t1);9437}94389439.peach-chirp-action-paired {9440  display: flex;9441  align-items: center;9442  gap: 10px;9443}9444.peach-chirp-device-confirm {9445  flex: 1;9446  display: inline-flex;9447  align-items: center;9448  gap: 8px;9449  padding: 9px 10px 9px 12px;9450  border-radius: 10px;9451  background: color-mix(in srgb, #76b6e8 12%, transparent);9452  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9453  font-size: 12.5px;9454  color: var(--peach-t0);9455  min-width: 0;9456}9457.peach-chirp-device-confirm-glyph {9458  display: inline-flex;9459  color: #76b6e8;9460}9461.peach-chirp-device-confirm-name {9462  flex: 1;9463  overflow: hidden;9464  text-overflow: ellipsis;9465  white-space: nowrap;9466}9467.peach-chirp-device-confirm-trust {9468  font-family: var(--peach-mono, ui-monospace, monospace);9469  font-size: 9.5px;9470  text-transform: uppercase;9471  letter-spacing: 0.1em;9472  color: #76b6e8;9473  padding: 2px 6px;9474  border-radius: 4px;9475  background: color-mix(in srgb, #76b6e8 14%, transparent);9476}9477.peach-chirp-done {9478  min-width: 80px;9479}9480.peach-chirp-retry {9481  align-self: center;9482  display: block;9483  margin: 6px auto 0;9484  min-width: 120px;9485}9486.peach-chirp-mic-help {9487  font-size: 12px;9488  color: var(--peach-t1);9489  text-align: center;9490  max-width: 320px;9491  margin: 0 auto;9492}94939494/* Rest state — bird stage at idle pose, primary CTA + paired list */9495.peach-chirp-pair[data-phase="idle"] .peach-chirp-stage {9496  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9497  height: 160px;9498}9499.peach-chirp-pair-start {9500  width: 100%;9501  display: inline-flex;9502  align-items: center;9503  justify-content: center;9504  gap: 8px;9505  padding: 11px 14px;9506  border-radius: 10px;9507  background: var(--peach-accent);9508  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9509  color: #1a0905;9510  font-family: inherit;9511  font-size: 13px;9512  font-weight: 600;9513  letter-spacing: 0.01em;9514  cursor: pointer;9515  transition: filter 0.15s ease, transform 0.1s ease;9516}9517.peach-chirp-pair-start:hover { filter: brightness(1.08); }9518.peach-chirp-pair-start:active { transform: translateY(1px); }95199520.peach-chirp-paired-section {9521  margin-top: 14px;9522  display: flex;9523  flex-direction: column;9524  gap: 8px;9525}9526.peach-chirp-paired-heading {9527  margin: 0;9528  font-family: var(--peach-mono, ui-monospace, monospace);9529  font-size: 10px;9530  font-weight: 500;9531  letter-spacing: 0.14em;9532  text-transform: uppercase;9533  color: var(--peach-t1);9534}95359536/* Footer --------------------------------------------------------------- */9537.peach-chirp-foot {9538  margin: 10px -4px -2px;9539  margin-top: auto;9540}9541.peach-chirp-foot-divider {9542  height: 1px;9543  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9544  margin-bottom: 10px;9545}9546.peach-chirp-foot-text {9547  font-size: 11px;9548  line-height: 1.5;9549  color: var(--peach-t1);9550  text-align: center;9551  padding: 0 4px;9552  text-wrap: pretty;9553}95549555/* Screen-reader-only live region. Kept off the visual flow but read by9556   assistive tech as the pairing phase advances. */9557.peach-sr-only {9558  position: absolute;9559  width: 1px; height: 1px;9560  padding: 0; margin: -1px;9561  overflow: hidden;9562  clip: rect(0, 0, 0, 0);9563  white-space: nowrap;9564  border: 0;9565}95669567/* Reduced motion — stage simplifies to opacity transitions only */9568@media (prefers-reduced-motion: reduce) {9569  .peach-chirp-bird-body,9570  .peach-chirp-bird-head-group,9571  .peach-chirp-bird-beak,9572  .peach-chirp-bird-wing,9573  .peach-chirp-bird-tuft,9574  .peach-chirp-bird-tail,9575  .peach-chirp-bird-eye-group,9576  .peach-chirp-bird-aura,9577  .peach-chirp-arc,9578  .peach-chirp-flight-path,9579  .peach-chirp-flight-path-2,9580  .peach-chirp-dot-glow,9581  .peach-chirp-dot-core,9582  .peach-chirp-dot-ring,9583  .peach-chirp-mote,9584  .peach-chirp-meter-bar,9585  .peach-chirp-listen-dot,9586  .peach-chirp-bird-slot,9587  .peach-chirp-bird-slot-mobile {9588    animation: none !important;9589    transition: opacity 0.2s linear !important;9590  }9591}95929593/* ─────────────────────────────────────────────────────────────────9594   Settings → Sync surface (v3 ChirpSync). Wraps the same bird9595   animation used by the pairing flow with a paired-devices list and9596   the "Pair a device" CTA.9597   ───────────────────────────────────────────────────────────────── */9598.peach-chirp-settings {9599  position: absolute;9600  inset: 0;9601  z-index: 3;9602  display: flex;9603  flex-direction: column;9604  gap: 18px;9605  padding: 14px 12px 12px;9606  width: 100%;9607  box-sizing: border-box;9608  overflow-y: auto;9609  overflow-x: hidden;9610  /* Same warm Chirp surface as the pairing screen — unifies the two views. */9611  background:9612    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9613    var(--peach-bg);9614  color: var(--peach-t0);9615  isolation: isolate;9616  /* Hide native scrollbar — content fits 99% of the time and a chunky9617     gutter ruins the surface. */9618  scrollbar-width: none;9619  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9620}9621.peach-chirp-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9622.peach-chirp-settings::before {9623  content: '';9624  position: absolute;9625  inset: 0;9626  pointer-events: none;9627  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9628  z-index: 0;9629}9630.peach-chirp-settings > * { position: relative; z-index: 1; }96319632.peach-chirp-settings--pairing {9633  padding: 0;9634  align-items: stretch;9635  justify-content: stretch;9636  background: none;9637  isolation: auto;9638}9639.peach-chirp-settings--pairing::before { display: none; }96409641.peach-chirp-settings-header {9642  display: flex;9643  align-items: center;9644  gap: 10px;9645}9646.peach-chirp-settings-title {9647  margin: 0;9648  font-family: var(--font-display, Georgia, serif);9649  font-style: italic;9650  font-size: 24px;9651  font-weight: 500;9652  line-height: 1;9653  color: var(--peach-t0);9654  letter-spacing: 0.005em;9655}9656.peach-chirp-settings-section {9657  margin: 6px 0 -4px;9658  font-size: 11px;9659  font-weight: 600;9660  letter-spacing: 0.08em;9661  text-transform: uppercase;9662  color: var(--peach-text-muted);9663}9664.peach-chirp-settings-error {9665  font-size: 12px;9666  padding: 8px 10px;9667  border-radius: 8px;9668  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);9669  color: var(--peach-text);9670}9671.peach-chirp-settings-footer {9672  margin-top: auto;9673  padding-top: 18px;9674  font-size: 11.5px;9675  line-height: 1.5;9676  color: var(--peach-text-muted);9677  text-align: center;9678}96799680/* Hero card shown when no devices are paired yet. */9681.peach-chirp-hero {9682  display: flex;9683  flex-direction: column;9684  align-items: center;9685  gap: 12px;9686  padding: 20px 12px 8px;9687  text-align: center;9688}9689.peach-chirp-hero-svg {9690  display: block;9691  max-width: 100%;9692  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));9693}9694.peach-chirp-hero-headline {9695  margin: 0;9696  font-family: var(--font-display, Georgia, serif);9697  font-style: italic;9698  font-size: 20px;9699  font-weight: 500;9700  line-height: 1.2;9701  letter-spacing: 0.005em;9702  color: var(--peach-t0);9703}9704.peach-chirp-hero-sub {9705  margin: 0;9706  font-size: 13px;9707  line-height: 1.5;9708  color: var(--peach-t1);9709  max-width: 320px;9710  text-wrap: pretty;9711}97129713.peach-chirp-pair-cta {9714  display: flex;9715  justify-content: center;9716  padding: 4px 0 6px;9717}9718.peach-chirp-pair-button {9719  display: inline-flex;9720  align-items: center;9721  gap: 8px;9722  min-width: 220px;9723  justify-content: center;9724}9725.peach-chirp-pair-button-icon {9726  flex: 0 0 auto;9727}97289729/* Paired devices list. Roomy rows that look at home next to the rest9730   of Settings; stale rows get a soft warm-warning border tint. */9731.peach-chirp-device-list {9732  list-style: none;9733  margin: 0;9734  padding: 0;9735  display: flex;9736  flex-direction: column;9737  gap: 8px;9738}9739.peach-chirp-device-row {9740  display: flex;9741  align-items: center;9742  gap: 12px;9743  padding: 12px;9744  border-radius: 10px;9745  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9746  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);9747}9748.peach-chirp-device-row[data-stale="true"] {9749  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);9750}9751.peach-chirp-device-icon {9752  width: 32px;9753  height: 32px;9754  display: flex;9755  align-items: center;9756  justify-content: center;9757  border-radius: 8px;9758  color: var(--peach-text);9759  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);9760}9761.peach-chirp-device-info {9762  flex: 1;9763  display: flex;9764  flex-direction: column;9765  gap: 2px;9766  min-width: 0;9767}9768.peach-chirp-device-name {9769  font-size: 14px;9770  font-weight: 600;9771  color: var(--peach-text);9772  overflow: hidden;9773  text-overflow: ellipsis;9774  white-space: nowrap;9775}9776.peach-chirp-device-meta {9777  font-size: 11.5px;9778  color: var(--peach-text-muted);9779  display: flex;9780  flex-wrap: wrap;9781  align-items: center;9782  gap: 8px;9783}9784.peach-chirp-device-badge {9785  font-size: 10.5px;9786  font-weight: 500;9787  letter-spacing: 0.02em;9788  padding: 2px 6px;9789  border-radius: 999px;9790  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);9791  color: var(--peach-text);9792}9793.peach-chirp-device-stale {9794  font-size: 10.5px;9795  font-weight: 500;9796  color: var(--peach-warn, #d29257);9797}9798.peach-chirp-device-remove {9799  flex: 0 0 auto;9800  color: var(--peach-text-muted);9801}9802.peach-chirp-device-remove:hover {9803  color: var(--peach-danger, #c25b4a);9804}9805.peach-chirp-unpair-confirm {9806  display: flex;9807  gap: 6px;9808  align-items: center;9809}98109811/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */9812.peach-chirp-pro-card {9813  position: relative;9814  margin: 18px 12px;9815  padding: 18px 20px 22px;9816  border-radius: 22px;9817  background:9818    radial-gradient(140% 90% at 50% 0%,9819      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,9820      transparent 60%),9821    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9822  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);9823  box-shadow:9824    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,9825    0 18px 40px -24px rgba(0, 0, 0, 0.45);9826  display: flex;9827  flex-direction: column;9828  align-items: center;9829  gap: 10px;9830  text-align: center;9831  overflow: hidden;9832}9833.peach-chirp-pro-stage {9834  position: relative;9835  width: 220px;9836  height: 140px;9837  display: flex;9838  align-items: flex-end;9839  justify-content: center;9840  margin-bottom: 2px;9841}9842.peach-chirp-pro-bird-slot {9843  width: 140px;9844  height: 132px;9845  display: flex;9846  align-items: flex-end;9847  justify-content: center;9848  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));9849}9850.peach-chirp-pro-bird-slot .peach-chirp-bird {9851  width: 100%;9852  height: 100%;9853}9854.peach-chirp-pro-bird-slot .peach-chirp-bird svg {9855  width: 100%;9856  height: 100%;9857  overflow: visible;9858}9859.peach-chirp-pro-chirp {9860  position: absolute;9861  top: 14px;9862  right: 8px;9863  width: 96px;9864  height: 80px;9865  color: var(--peach-accent);9866  animation: peach-chirp-pulse 2.6s ease-in-out infinite;9867  transform-origin: 0% 50%;9868  pointer-events: none;9869}9870@keyframes peach-chirp-pulse {9871  0%, 100% { opacity: 0.35; transform: translateX(0) scale(0.92); }9872  45%      { opacity: 1;    transform: translateX(2px) scale(1); }9873  70%      { opacity: 0.6;  transform: translateX(4px) scale(1.04); }9874}9875@media (prefers-reduced-motion: reduce) {9876  .peach-chirp-pro-chirp { animation: none; opacity: 0.7; }9877}9878.peach-chirp-pro-headline {9879  margin: 4px 0 0;9880  font-family: var(--font-display, "Cormorant Garamond", serif);9881  font-style: italic;9882  font-size: 19px;9883  font-weight: 500;9884  letter-spacing: 0.01em;9885  color: var(--peach-t0);9886  max-width: 280px;9887  line-height: 1.25;9888}9889.peach-chirp-pro-body {9890  margin: 0;9891  font-size: 13px;9892  line-height: 1.55;9893  color: var(--peach-t1);9894  max-width: 300px;9895}9896.peach-chirp-pro-cta {9897  margin-top: 4px;9898}9899.peach-chirp-pro-foot {9900  margin: 2px 0 0;9901  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;9902  font-size: 0.625rem;9903  letter-spacing: 0.08em;9904  text-transform: uppercase;9905  color: var(--peach-t2);9906  opacity: 0.75;9907}