popup.css

1html,2body,3#app,4#pre-lock,5.popup-root {6  width: 320px;7  min-height: 520px;8  height: 520px;9  margin: 0;10}1112body {13  overflow: hidden;14  background: var(--bg);15  color: var(--t0);16  font-family: var(--font-ui);17  font-weight: 300;18  position: relative;19}2021* {22  box-sizing: border-box;23}2425button,26input,27textarea,28select {29  font: inherit;30}3132button {33  border: 0;34}3536#pre-lock {37  position: absolute;38  inset: 0;39  z-index: 10;40}4142#pre-lock[hidden] {43  display: none;44}4546.popup-root {47  position: relative;48  overflow: hidden;49}5051.peach-theme {52  color: var(--peach-t0);53  font-family: var(--font-ui);54  font-weight: 300;55  box-sizing: border-box;56  text-align: left;57}58.peach-theme, .peach-theme * { box-sizing: inherit; }5960.peach-brand-mark {61  width: 14px;62  height: 14px;63  flex-shrink: 0;64}6566.peach-status-pip.is-hidden {67  display: none;68}6970.peach-status-pip.unlocked {71  background: var(--peach-health-ok);72  box-shadow: 0 0 6px rgba(100, 210, 100, 0.6);73}7475.peach-status-pip.pulse {76  animation: pip-pulse 400ms var(--peach-curve-settle) both;77}7879/* Shell */80.peach-shell, .peach-screen {81  background:82    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),83    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),84    var(--peach-bg);85  border: 1px solid var(--peach-t3);86  box-shadow:87    0 2px 8px rgba(0,0,0,0.55),88    0 14px 48px rgba(0,0,0,0.7),89    0 0 0 1px rgba(240,232,216,0.04);90  overflow: hidden;91}92.peach-shell {93  display: grid;94  grid-template-rows: auto 1fr;95  min-height: 520px;96  position: relative;97  isolation: isolate;98}99100.peach-shell[data-surface="extension"] {101  width: min(320px, 100vw);102  border-radius: 0;103  height: 520px;104  max-height: 520px;105  overflow: hidden;106}107108/* ── Lock screen – full-window lock/create stage ── */109.lock-screen--vault-stage {110  display: flex;111  flex-direction: column;112  gap: 18px;113  padding: 20px 18px 18px;114  justify-content: flex-start;115}116.lock-screen--vault-stage .peach-lock-panel {117  margin-top: auto;118}119.peach-lock-headline--unlock {120  max-width: 220px;121}122.peach-lock-hero--unlock {123  padding-top: 14px;124}125.peach-lock-panel--unlock {126  gap: 10px;127}128129.peach-lock-restore-link {130  background: transparent;131  border: none;132  cursor: pointer;133  font-family: var(--font-mono);134  font-size: 0.625rem;135  letter-spacing: 0.08em;136  color: var(--t1);137  padding: 5px 0;138  text-align: left;139  transition: color 150ms ease;140}141142.peach-lock-restore-link:hover {143  color: var(--t0);144}145.peach-shell[data-surface="extension"] .peach-stage {146  min-height: 250px;147}148149/* Screen (unlock) */150.peach-screen {151  width: min(320px, 100vw);152  min-height: 100%;153  height: 100%;154  border-radius: 0;155  padding: 16px 20px 18px;156  display: grid;157  gap: 14px;158}159.peach-screen[data-motion-phase="enter"] {160  animation: peach-screen-enter var(--peach-dur-600) var(--peach-curve-arrival) both;161}162.peach-screen-header { min-height: 20px; }163164/* Wordmark */165.peach-wordmark {166  margin: 0;167  font-family: var(--font-display);168  font-size: 0.9375rem;169  font-style: italic;170  letter-spacing: 0.03em;171  color: var(--peach-t0);172  display: inline-flex;173  min-height: 1em;174}175176/* Motion text / char animation */177.peach-motion-text { display: inline-flex; min-height: 1em; }178.peach-motion-char {179  display: inline-block;180  white-space: pre;181  opacity: 0;182  transform: translateY(0.22em);183  animation: peach-char-enter var(--peach-motion-duration, 380ms) var(--peach-curve-arrival) forwards;184  animation-delay: calc(var(--peach-char-index, 0) * 20ms);185}186187/* Chrome */188.peach-chrome {189  position: relative;190  z-index: 10;191  padding: 16px 20px 0;192  display: flex;193  justify-content: space-between;194  align-items: center;195  /* z-index:10 keeps the header icons above `.peach-loading` (Suspense196     fallback) per §15 regression guard. Without pointer-events:none, the197     empty header strip also sits above `.peach-overlay-view` (z-index:2)198     and swallows clicks meant for an overlay's back button / top search. */199  pointer-events: none;200}201.peach-chrome .peach-btn { pointer-events: auto; }202.peach-chrome.is-hidden-for-overlay,203.peach-search-wrap.is-hidden-for-overlay {204  opacity: 0;205  visibility: hidden;206  pointer-events: none;207}208/* Chirp-sync owns its own surface and header — fully collapse the global209   chrome row so the warm gradient reaches the popup edge. */210.peach-chrome.is-collapsed,211.peach-search-wrap.is-collapsed {212  display: none;213}214.peach-wordmark-wrap { display: flex; align-items: center; gap: 5px; }215.peach-status-pip {216  width: 5px;217  height: 5px;218  border-radius: 50%;219  background: var(--peach-t3);220  display: inline-flex;221  flex-shrink: 0;222  transition: background 400ms ease, box-shadow 400ms ease;223}224.peach-chrome-actions { display: flex; gap: 6px; }225226/* Shell body */227.peach-shell-body {228  position: relative;229  display: grid;230  grid-template-rows: 1fr auto;231  min-height: 0;232  min-width: 0;233  width: 100%;234  overflow: hidden;235  height: 100%;236}237.peach-shell-veil {238  position: absolute; inset: 0;239  background: #000; opacity: 0;240  pointer-events: none; z-index: 1;241}242.peach-shell[data-motion-phase="enter"] .peach-shell-body {243  animation: peach-shell-fade-in var(--peach-dur-600) var(--peach-curve-arrival) both;244}245.peach-shell[data-motion-phase="exit"] .peach-shell-veil {246  animation: peach-veil-in 300ms var(--peach-curve-departure) forwards;247}248249/* Content frame */250.peach-content-frame {251  display: grid;252  grid-template-rows: 1fr auto;253  grid-template-columns: minmax(0, 1fr);254  align-content: start;255  min-height: 0;256  min-width: 0;257  overflow: hidden;258  transition: opacity 80ms ease, transform 80ms ease;259}260.peach-content-frame.navigating {261  opacity: 0.93;262  transform: translateX(2px);263}264.peach-content-frame[data-content-phase="enter"] {265  animation: peach-content-enter 135ms ease-out both;266}267.peach-content-frame[data-content-phase="exit"] {268  animation: peach-content-exit 95ms ease-in forwards;269}270.peach-content-frame[data-content-phase="idle"] { opacity: 1; transform: none; }271272/* Stage */273.peach-stage {274  padding: 10px 20px 12px;275  display: grid;276  gap: 12px;277  align-content: start;278  min-width: 0;279  min-height: 0;280  max-width: 100%;281  overflow-y: auto;282  overflow-x: hidden;283  scrollbar-width: none;284  -ms-overflow-style: none;285  overscroll-behavior: contain;286}287.peach-stage::-webkit-scrollbar { display: none; }288289/* Entry name */290.peach-entry-name-wrap { position: relative; overflow: hidden; max-width: 100%; }291.peach-entry-header {292  position: relative;293  z-index: 1;294  display: flex;295  align-items: flex-start;296  gap: 6px;297  min-width: 0;298}299.peach-entry-header-name {300  flex: 1;301  min-width: 0;302}303.peach-entry-name {304  margin: 0;305  padding-bottom: 0.12em;306  font-family: var(--font-display);307  font-style: italic; font-weight: 400;308  font-size: 44px; line-height: 0.95;309  color: var(--peach-t0);310  display: -webkit-box;311  -webkit-line-clamp: 2;312  -webkit-box-orient: vertical;313  overflow: hidden;314  text-wrap: balance;315}316.peach-entry-name--lg { font-size: 40px; }317.peach-entry-name--xl { font-size: 34px; line-height: 0.98; }318.peach-entry-name--xxl { font-size: 30px; line-height: 1.02; }319.peach-entry-name-text { display: block; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; padding-bottom: 0.12em; }320321/* Trash icon in entry header */322.peach-entry-trash-btn {323  flex-shrink: 0;324  padding: 4px;325  margin-top: 4px;326  background: transparent;327  border: none;328  cursor: pointer;329  color: var(--peach-t2);330  border-radius: 4px;331  transition: color 140ms ease, background 140ms ease;332  display: flex;333  align-items: center;334  justify-content: center;335}336.peach-entry-trash-btn:hover {337  color: var(--peach-t1);338  background: var(--peach-t3);339}340.peach-entry-trash-confirm {341  display: flex;342  align-items: center;343  gap: 6px;344  flex-shrink: 0;345  margin-top: 6px;346  flex-wrap: nowrap;347}348.peach-entry-trash-confirm-label {349  font-family: var(--font-mono);350  font-size: 0.5625rem;351  letter-spacing: 0.1em;352  color: var(--peach-t2);353  white-space: nowrap;354}355.peach-entry-name-button {356  padding: 0;357  background: transparent;358  text-align: left;359  cursor: pointer;360  max-width: 100%;361  overflow: hidden;362  display: block;363}364.peach-entry-name-char {365  display: inline-block;366  white-space: pre;367  opacity: 0;368  transform: translateY(0.22em);369  animation: peach-char-enter 380ms var(--peach-curve-arrival) forwards;370  animation-delay: calc(var(--char-index, 0) * 20ms);371}372373/* Domain */374.peach-domain { border-top: 1px solid var(--peach-t3); padding-top: 9px; }375.peach-domain-row {376  width: 100%; border: 0; background: transparent; color: inherit;377  padding: 0; display: flex; justify-content: space-between; align-items: baseline;378  cursor: default;379}380.peach-domain-value {381  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;382  font-size: 0.625rem; font-style: italic;383  letter-spacing: 0.12em; color: var(--peach-t1);384}385386/* Fields */387.peach-fields { display: grid; gap: 10px; }388.peach-field-card { display: grid; gap: 7px; }389.peach-label {390  font-family: Inter, system-ui, sans-serif;391  text-transform: uppercase; letter-spacing: 0.2em;392  font-size: 0.5rem; color: var(--peach-t2);393}394.peach-add-field-btn {395  align-self: flex-start;396  background: none; border: none; padding: 2px 0;397  font-family: Inter, system-ui, sans-serif;398  font-size: 0.6875rem; color: var(--peach-accent);399  cursor: pointer; opacity: 0.75;400  letter-spacing: 0.02em;401}402.peach-add-field-btn:hover { opacity: 1; }403.peach-field-value-row {404  display: flex; justify-content: space-between;405  align-items: center; gap: 8px;406  min-width: 0;407}408.peach-field-value {409  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;410  font-size: 0.8125rem; color: var(--peach-t1);411  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;412  flex: 1;413  min-width: 0;414}415.peach-password-value {416  display: inline-flex;417  align-items: center;418  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;419  font-size: 1rem; letter-spacing: 0.3em; color: var(--peach-t0);420  overflow: hidden;421  text-overflow: ellipsis;422  white-space: nowrap;423  flex: 1;424  min-width: 0;425  max-width: 100%;426}427.peach-password-value.is-revealed {428  font-size: 0.875rem;429  letter-spacing: 0.08em;430}431.peach-password-text,432.peach-password-mask {433  display: block;434  width: 100%;435  overflow: hidden;436  white-space: nowrap;437  /* Render as uniform mid-line bullets, not baseline periods */438  font-family: Inter, system-ui, sans-serif;439  font-size: 0.625rem;440  letter-spacing: 3px;441  user-select: none;442}443.peach-field-actions { display: flex; gap: 4px; align-items: center; }444.peach-password-strength { display: flex; align-items: center; gap: 8px; }445.peach-strength-bar { display: flex; gap: 3px; }446.peach-strength-seg { width: 28px; height: 4px; border-radius: 2px; background: #eee; }447.peach-strength-label {448  font-family: "IBM Plex Mono", monospace;449  font-style: italic;450  font-size: 0.5625rem;451  font-weight: 300;452  min-width: 36px;453  text-align: right;454  color: var(--peach-t2);455  letter-spacing: 0.06em;456}457458.peach-strength-hairline {459  display: flex;460  align-items: center;461  gap: 10px;462  margin-top: -2px;463}464465.peach-strength-hairline-track {466  flex: 1;467  height: 3px;468  border-radius: 2px;469  background: var(--peach-s2);470  overflow: hidden;471}472473.peach-strength-hairline-fill {474  height: 100%;475  border-radius: 2px;476  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),477    background 400ms ease;478}479480/* Note content (display) */481.peach-note-content {482  border-top: 1px solid var(--peach-t3);483  padding-top: 10px;484  font-family: var(--font-display);485  font-size: 0.9375rem;486  line-height: 1.75;487  color: var(--peach-t1);488}489490/* ── Inline editing ─────────────────────────────────────────────────── */491492/* Clickable display values */493.peach-inline-clickable {494  cursor: text;495  border-radius: 3px;496  transition: background 150ms ease;497}498.peach-inline-clickable:hover {499  background: rgba(240, 232, 216, 0.05);500}501502/* Subtle "edit" hint that appears on hover */503.peach-inline-edit-hint {504  font-family: Inter, system-ui, sans-serif;505  font-size: 0.5625rem;506  text-transform: uppercase;507  letter-spacing: 0.14em;508  color: var(--peach-t2);509  opacity: 0;510  transition: opacity 120ms ease;511  pointer-events: none;512  margin-left: 6px;513  flex-shrink: 0;514}515.peach-domain-row:hover .peach-inline-edit-hint {516  opacity: 1;517}518519/* Title editing */520.peach-inline-title-wrap {521  display: flex;522  flex-direction: column;523  gap: 6px;524}525.peach-inline-title-input {526  font-family: var(--font-display);527  font-style: italic;528  font-weight: 400;529  font-size: 40px;530  line-height: 0.95;531  color: var(--peach-t0);532  background: transparent;533  border: none;534  border-bottom: 1px solid var(--peach-accent);535  outline: none;536  width: 100%;537  padding: 2px 0;538}539540/* Generic inline field */541.peach-inline-field-wrap {542  display: flex;543  flex-direction: column;544  gap: 6px;545}546.peach-inline-input {547  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;548  font-size: 0.8125rem;549  color: var(--peach-t0);550  background: transparent;551  border: none;552  border-bottom: 1px solid var(--peach-accent);553  outline: none;554  width: 100%;555  padding: 3px 0;556}557.peach-inline-textarea {558  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;559  font-size: 0.6875rem;560  line-height: 1.7;561  color: var(--peach-t0);562  background: rgba(240, 232, 216, 0.04);563  border: 1px solid var(--peach-accent);564  border-radius: 4px;565  outline: none;566  width: 100%;567  padding: 8px;568  resize: vertical;569  min-height: 80px;570}571572/* Save / cancel row */573.peach-inline-actions {574  display: flex;575  gap: 6px;576  align-items: center;577}578.peach-inline-save-btn,579.peach-inline-cancel-btn {580  display: inline-flex;581  align-items: center;582  justify-content: center;583  width: 26px;584  height: 26px;585  border-radius: 4px;586  border: none;587  cursor: pointer;588  transition: background 140ms ease, opacity 140ms ease;589  flex-shrink: 0;590}591.peach-inline-save-btn {592  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);593  color: var(--peach-accent);594}595.peach-inline-save-btn:hover:not(:disabled) {596  background: color-mix(in srgb, var(--peach-accent) 30%, transparent);597}598.peach-inline-cancel-btn {599  background: rgba(240, 232, 216, 0.06);600  color: var(--peach-t2);601}602.peach-inline-cancel-btn:hover:not(:disabled) {603  background: rgba(240, 232, 216, 0.12);604  color: var(--peach-t1);605}606.peach-inline-save-btn:disabled,607.peach-inline-cancel-btn:disabled {608  opacity: 0.4;609  cursor: not-allowed;610}611612/* Inline password generator wrapper */613.peach-inline-generator-wrap {614  margin-top: 10px;615  padding-top: 10px;616  border-top: 1px solid var(--peach-t3);617  display: flex;618  flex-direction: column;619  gap: 8px;620}621.peach-inline-generator-cancel {622  align-self: flex-start;623  font-size: 0.6875rem;624  color: var(--peach-t2);625}626627/* "is-editing" card state */628.peach-field-card.is-editing {629  background: rgba(240, 232, 216, 0.02);630  border-radius: 6px;631  padding: 8px;632  margin: -8px;633}634635/* Inline tag editor on Entry detail view */636.peach-inline-tag-editor {637  display: flex;638  flex-direction: column;639  gap: 6px;640}641642/* Quiet inline "+ add X" link in the entry detail body */643.peach-entry-add-link {644  justify-self: start;645  margin-top: 8px;646}647648/* Additional URLs editor revealed by clicking the URL field */649.peach-additional-urls {650  display: flex;651  flex-direction: column;652  gap: 6px;653  margin-top: 8px;654}655.peach-additional-urls-label {656  font-size: 0.5625rem;657  letter-spacing: 0.1em;658  text-transform: uppercase;659  color: var(--peach-t2);660  margin-bottom: 2px;661}662.peach-additional-url-row {663  display: flex;664  align-items: center;665  gap: 6px;666}667.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }668.peach-additional-url-remove {669  background: transparent;670  border: 1px solid var(--peach-t3);671  color: var(--peach-t2);672  width: 22px;673  height: 22px;674  border-radius: 4px;675  cursor: pointer;676  font-size: 0.875rem;677  line-height: 1;678  display: inline-flex;679  align-items: center;680  justify-content: center;681  flex-shrink: 0;682  transition: color 120ms ease, border-color 120ms ease;683}684.peach-additional-url-remove:hover:not(:disabled) {685  color: var(--peach-accent);686  border-color: var(--peach-border-accent);687}688.peach-additional-urls-add { align-self: flex-start; }689690/* Delete row */691.peach-entry-delete-row {692  display: flex;693  align-items: center;694  gap: 8px;695  padding-top: 18px;696  margin-top: 8px;697  border-top: 1px solid var(--peach-t3);698}699.peach-delete-btn {700  font-size: 0.6875rem;701  color: var(--peach-t2);702  padding: 4px 0;703}704.peach-delete-confirm-text {705  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;706  font-size: 0.6875rem;707  font-style: italic;708  color: var(--peach-t2);709  flex-shrink: 0;710}711712/* TOTP band */713.peach-totp-band {714  border-top: 1px solid var(--peach-t3);715  padding: 12px 20px 14px;716  position: relative;717  display: grid;718  grid-template-columns: 1fr auto;719  gap: 10px;720}721.peach-totp-main {722  min-width: 0;723  cursor: pointer;724  user-select: none;725}726.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }727.peach-totp-code-row {728  display: flex;729  align-items: flex-end;730  gap: 10px;731  min-width: 0;732}733.peach-totp-code {734  margin: 2px 0 0;735  font-family: var(--font-display);736  font-style: italic;737  font-weight: 300;738  font-size: 38px; color: var(--peach-accent);739  line-height: 0.95; min-height: 1em;740  min-width: 0;741}742.peach-totp-code-text {743  display: inline-flex;744  overflow: hidden;745  text-overflow: ellipsis;746  white-space: nowrap;747}748.peach-totp-copy-btn {749  margin-bottom: 2px;750  flex-shrink: 0;751  border-color: transparent;752}753.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }754.peach-totp-countdown {755  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;756  font-size: 22px; color: var(--peach-t1);757}758.peach-totp-ring { transform: rotate(-90deg); }759.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }760.peach-totp-ring-progress {761  fill: none; stroke: var(--peach-accent); stroke-width: 2;762  stroke-linecap: round;763  transition: stroke-dashoffset 1s linear, stroke 500ms ease;764}765/* Search bar */766.peach-search-wrap {767  border-top: 1px solid var(--peach-t3);768  background: var(--peach-s1);769  min-height: 54px; position: relative;770  box-shadow: inset 0 6px 18px transparent;771  transition: box-shadow 700ms ease;772}773.peach-search-wrap::before {774  content: "";775  position: absolute;776  left: 0;777  top: 0;778  height: 2px;779  width: var(--peach-totp-progress, 0%);780  background: var(--peach-accent);781  opacity: 0;782  transition: width 1s linear, opacity 180ms ease;783  pointer-events: none;784}785.peach-shell[data-totp-active="true"] .peach-search-wrap::before {786  opacity: 0.9;787}788.peach-shell[data-totp-active="true"] .peach-search-wrap {789  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);790}791792@keyframes peach-totp-code-flare {793  0%   { filter: brightness(1); }794  25%  { filter: brightness(1.3); }795  100% { filter: brightness(1); }796}797.peach-totp-code.is-hot {798  animation: peach-totp-code-flare 3000ms ease-in-out both;799}800.peach-search-bar {801  min-height: 54px;802  display: grid;803  grid-template-columns: auto minmax(0, 1fr) auto;804  align-items: center;805  gap: 8px; padding: 0 9px 0 12px;806}807.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }808.peach-search-input {809  border: 0; background: transparent; color: var(--peach-t0);810  font-family: var(--font-display);811  font-style: italic; font-size: 18px;812  outline: none; width: 100%; min-width: 0; padding: 0;813  caret-color: var(--peach-accent);814}815.peach-search-input::placeholder { color: var(--peach-t2); }816.peach-search-meta {817  display: grid;818  grid-auto-flow: column;819  align-items: center;820  justify-content: end;821  gap: 6px;822  min-width: max-content;823}824.peach-search-counter {825  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;826  font-size: 0.625rem; color: var(--peach-t2);827  display: inline-flex;828  align-items: center;829  line-height: 1;830}831.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }832833/* Buttons */834.peach-btn {835  border: 1px solid transparent; border-radius: 12px;836  background: transparent; color: var(--peach-t0);837  font-family: Inter, system-ui, sans-serif;838  font-size: 0.75rem; letter-spacing: 0.02em; padding: 8px 12px;839  cursor: pointer;840  transition:841    background-color var(--peach-dur-80) var(--peach-curve-arrival),842    color var(--peach-dur-80) var(--peach-curve-arrival),843    border-color var(--peach-dur-150) var(--peach-curve-arrival);844}845.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }846.peach-btn:disabled {847  opacity: 0.45;848  cursor: not-allowed;849}850.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 0.6875rem; }851.peach-btn--md { min-height: 38px; }852.peach-btn--accent {853  background: var(--peach-accent);854  color: rgba(0,0,0,0.92);855  font-weight: 500;856  box-shadow:857    0 1px 0 rgba(255,255,255,0.08) inset,858    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),859    0 3px 16px var(--peach-glow),860    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);861}862.peach-btn--accent:hover:not(:disabled) {863  background: var(--peach-accent);864  filter: brightness(1.10) saturate(1.05);865  box-shadow:866    0 1px 0 rgba(255,255,255,0.10) inset,867    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),868    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),869    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);870}871.peach-btn--ghost { border-color: var(--peach-t3); color: var(--peach-t1); }872.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }873.peach-icon-btn {874  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;875  display: inline-flex; align-items: center; justify-content: center;876}877878.peach-btn:focus-visible {879  outline: none;880  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);881}882883/* Lock button */884.peach-lock-icon { transform-origin: center; }885.peach-lock-btn.is-locking { color: var(--peach-accent); }886.peach-lock-btn.is-locking .peach-lock-icon {887  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);888}889890/* Biometric unlock button */891.peach-biometric-btn {892  display: flex;893  align-items: center;894  justify-content: center;895  gap: 6px;896  margin-top: 8px;897  width: 100%;898}899900/* Copy button */901.peach-copy-btn {902  position: relative; overflow: hidden;903  color: var(--peach-t2); border-color: var(--peach-t3);904}905.peach-copy-icon {906  display: inline-flex; align-items: center; justify-content: center;907  position: relative; z-index: 1;908}909.peach-copy-icon-svg { display: block; }910.peach-copy-sheen {911  position: absolute; inset: 0;912  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--peach-accent) 18%, transparent) 30%, color-mix(in srgb, var(--peach-accent) 8%, transparent) 100%);913  opacity: 0; transform: scaleX(0.15); transform-origin: left center;914}915.peach-copy-btn.is-copied {916  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;917  box-shadow:918    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),919    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),920    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);921}922.peach-copy-btn.is-copied .peach-copy-icon {923  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;924}925.peach-copy-btn.is-copied .peach-copy-sheen {926  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;927}928.peach-copy-btn.is-retreat {929  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;930}931.peach-copy-btn.is-retreat .peach-copy-sheen {932  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;933}934.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }935.peach-copy-drain-bar {936  display: block; width: 100%; height: 100%;937  background: var(--peach-accent); opacity: 0.7;938  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;939}940941/* Unlock screen elements */942.peach-unlock-headline {943  margin: 2px 0 0;944  font-family: var(--font-display);945  font-size: 52px; line-height: 0.95;946  font-style: italic; font-weight: 400;947}948.peach-subline {949  margin: 0;950  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;951  font-size: 0.625rem; color: var(--peach-t2); font-style: italic;952}953.peach-subline--lock {954  max-width: 248px;955  line-height: 1.5;956}957.peach-underline-input {958  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);959  padding: 6px 0; background: transparent; color: var(--peach-t0);960  outline: none;961  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;962  font-size: 0.8125rem;963  caret-color: var(--peach-accent);964}965.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }966.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }967.peach-hint {968  margin: 0;969  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;970  font-size: 0.625rem; color: var(--peach-t2);971}972.peach-unlock-footer {973  margin-top: 4px; display: flex; align-items: center; gap: 7px;974  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;975  font-size: 0.625rem; color: var(--peach-t2);976}977.peach-unlock-footer--lock {978  padding-top: 2px;979}980981/* Breach badge */982.peach-breach-badge {983  display: flex;984  position: relative;985  z-index: 1;986  align-items: center;987  gap: 7px;988  font-size: 0.5625rem;989  color: var(--peach-breach);990  padding: 5px 10px;991  margin-bottom: 4px;992  border-radius: 8px;993  background: rgba(220, 80, 60, 0.07);994  border: 1px solid rgba(220, 80, 60, 0.18);995  letter-spacing: 0.04em;996}997998.peach-breach-action {999  margin-left: auto;1000  font-size: 0.625rem;1001  padding: 3px 8px;1002}10031004.peach-password-value.is-breached {1005  color: rgba(220, 80, 60, 0.75);1006  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1007}10081009/* ── Overlay views ─────────────────────────────────────────────────── */1010.peach-overlay-view {1011  position: absolute;1012  inset: 0;1013  display: flex;1014  flex-direction: column;1015  background:1016    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1017    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1018    var(--peach-bg);1019  z-index: 2;1020  overflow: hidden;1021  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1022}1023@keyframes overlay-in {1024  from { opacity: 0; transform: translateY(8px); }1025  to   { opacity: 1; transform: translateY(0); }1026}1027.peach-overlay-view.ov-enter-up {1028  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1029}1030.peach-overlay-view.ov-exit-up {1031  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1032}1033.peach-overlay-view.ov-enter-right {1034  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1035}1036.peach-overlay-view.ov-exit-right {1037  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1038}10391040@keyframes ov-enter-up {1041  from { opacity: 0; transform: translateY(18px); }1042  to   { opacity: 1; transform: translateY(0); }1043}1044@keyframes ov-exit-up {1045  from { opacity: 1; transform: translateY(0); }1046  to   { opacity: 0; transform: translateY(-12px); }1047}1048@keyframes ov-enter-right {1049  from { opacity: 0; transform: translateX(20px); }1050  to   { opacity: 1; transform: translateX(0); }1051}1052@keyframes ov-exit-right {1053  from { opacity: 1; transform: translateX(0); }1054  to   { opacity: 0; transform: translateX(20px); }1055}10561057/* Overlay shared header */1058.peach-overlay-header {1059  padding: 10px 12px;1060  display: flex;1061  align-items: center;1062  gap: 8px;1063  border-bottom: 1px solid var(--peach-t3);1064  flex-shrink: 0;1065}1066.peach-overlay-title {1067  font-family: "IBM Plex Mono", monospace;1068  font-size: 0.5625rem;1069  text-transform: uppercase;1070  letter-spacing: 0.18em;1071  color: var(--peach-t2);1072  flex: 1;1073  text-align: center;1074}10751076.peach-overlay-card {1077  background: var(--peach-s1);1078  border: 1px solid var(--peach-t3);1079  border-radius: 12px;1080  overflow: hidden;1081  width: 100%;1082}10831084.peach-onboarding-alt-actions {1085  display: flex;1086  flex-direction: column;1087  gap: 4px;1088  padding: 0;1089}10901091.peach-settings-copy {1092  margin: 0 0 10px;1093  font-size: 0.6875rem;1094  line-height: 1.5;1095  color: var(--peach-t2);1096}10971098.peach-settings-copy strong {1099  color: var(--peach-t0);1100}11011102.peach-settings-copy--spacious {1103  margin-bottom: 12px;1104}11051106.peach-settings-copy--result {1107  color: var(--peach-accent);1108  font-size: 0.8125rem;1109  text-align: center;1110  padding: 8px 0;1111}11121113.peach-settings-copy--danger {1114  color: var(--peach-breach);1115}11161117.peach-settings-copy--success {1118  color: var(--peach-accent);1119}11201121.peach-inline-feedback {1122  font-size: 0.6875rem;1123  margin: 10px 0 0;1124}11251126.peach-inline-feedback--ok {1127  color: var(--peach-accent);1128}11291130.peach-inline-feedback--error {1131  color: var(--peach-breach);1132}11331134.peach-inline-feedback--muted {1135  color: var(--peach-t2);1136  font-size: 0.625rem;1137  margin: 4px 0;1138}11391140.peach-inline-feedback--spaced {1141  margin-top: 12px;1142}11431144.peach-settings-actions--row {1145  display: flex;1146  gap: 6px;1147}11481149.peach-settings-actions--end {1150  margin-top: 14px;1151  justify-content: flex-end;1152}11531154.peach-settings-stack {1155  display: flex;1156  flex-direction: column;1157  gap: 6px;1158}11591160.peach-settings-stack--tight {1161  gap: 4px;1162}11631164.peach-settings-stack--spacious {1165  gap: 8px;1166}11671168.peach-settings-input {1169  width: 100%;1170  box-sizing: border-box;1171  padding: 8px 10px;1172  background: rgba(0, 0, 0, 0.22);1173  border: 1px solid transparent;1174  border-radius: 6px;1175  color: var(--peach-t0);1176  font-family: var(--font-ui);1177  font-size: 0.75rem;1178  outline: none;1179  transition: border-color 120ms ease, background 120ms ease;1180}11811182.peach-settings-input:focus {1183  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1184  background: rgba(0, 0, 0, 0.28);1185}11861187.peach-settings-input[type="password"] {1188  font-family: var(--font-mono);1189  letter-spacing: 0.04em;1190}11911192.peach-hidden-file-input {1193  display: none;1194}11951196.peach-checkbox-note {1197  display: flex;1198  align-items: flex-start;1199  gap: 8px;1200  font-size: 0.6875rem;1201  color: var(--peach-t1);1202  cursor: pointer;1203  margin: 12px 0;1204}12051206.peach-checkbox-note input {1207  margin-top: 1px;1208}12091210.peach-danger-notice {1211  background: rgba(220, 80, 60, 0.08);1212  border: 1px solid rgba(220, 80, 60, 0.2);1213  border-radius: 6px;1214  padding: 9px 11px;1215  font-size: 0.6875rem;1216  color: var(--peach-t1);1217  line-height: 1.5;1218}12191220.peach-info-notice {1221  font-size: 0.6875rem;1222  color: var(--peach-t1);1223  line-height: 1.5;1224  background: var(--surface-card);1225  border: 1px solid var(--peach-t3);1226  border-radius: 6px;1227  padding: 8px 10px;1228}12291230.peach-info-notice--warn {1231  border-color: rgba(220, 38, 38, 0.4);1232  background: rgba(220, 38, 38, 0.06);1233  color: rgba(220, 38, 38, 0.92);1234  margin-bottom: 8px;1235}12361237.peach-strength-row {1238  display: flex;1239  align-items: center;1240  gap: 8px;1241  margin-bottom: 10px;1242}12431244.peach-strength-track {1245  flex: 1;1246  height: 4px;1247  background: var(--peach-s2);1248  border-radius: 2px;1249  overflow: hidden;1250}12511252.peach-strength-fill {1253  height: 100%;1254  border-radius: 2px;1255  transition: width 120ms ease, background 120ms ease;1256}12571258/* ── Type selector tabs ── */1259.peach-type-tabs {1260  display: flex;1261  gap: 0;1262  background: var(--peach-t4);1263  border-radius: 8px;1264  padding: 3px;1265}12661267.peach-type-tab {1268  flex: 1;1269  display: flex;1270  align-items: center;1271  justify-content: center;1272  gap: 6px;1273  padding: 6px 10px;1274  border-radius: 6px;1275  border: none;1276  background: transparent;1277  cursor: pointer;1278  font-family: Inter, system-ui, sans-serif;1279  font-size: 0.6875rem;1280  font-weight: 400;1281  letter-spacing: 0.04em;1282  color: var(--peach-t1);1283  transition: background 150ms ease, color 150ms ease;1284}12851286.peach-type-tab.is-active {1287  background: var(--peach-s2);1288  color: var(--peach-t0);1289  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1290}12911292.peach-type-tab:not(.is-active):hover {1293  color: var(--peach-t0);1294}12951296.peach-type-tab svg {1297  opacity: 0.7;1298  flex-shrink: 0;1299}13001301.peach-type-tab.is-active svg {1302  opacity: 1;1303}13041305/* ── List view ───────────────────────────────────────────────────────── */1306.peach-list-top {1307  padding: 0 10px;1308  min-height: 46px;1309  display: flex;1310  align-items: center;1311  gap: 6px;1312  border-bottom: 1px solid var(--peach-t3);1313  flex-shrink: 0;1314  background: var(--peach-s1);1315}1316.peach-vault-list {1317  flex: 1;1318  overflow-y: auto;1319  scrollbar-width: none;1320}1321.peach-vault-list::-webkit-scrollbar { display: none; }13221323/* Scrollbar — vault list */1324.peach-vault-list {1325  scrollbar-width: thin;1326  scrollbar-color: var(--peach-t3) transparent;1327}13281329.peach-vault-list::-webkit-scrollbar {1330  width: 3px;1331}13321333.peach-vault-list::-webkit-scrollbar-thumb {1334  background: var(--peach-t3);1335  border-radius: 2px;1336}13371338.peach-entry-row {1339  width: 100%;1340  display: flex;1341  align-items: center;1342  gap: 10px;1343  padding: 9px 16px;1344  background: transparent;1345  border: none;1346  border-bottom: 1px solid var(--peach-t3);1347  cursor: pointer;1348  color: inherit;1349  text-align: left;1350  transition: background 80ms ease;1351}1352.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1353.peach-entry-row:last-child { border-bottom: none; }1354.peach-entry-row.is-active {1355  box-shadow: inset 2px 0 0 var(--peach-accent);1356  background: rgba(240,232,216,0.03);1357}1358.peach-entry-row:focus-visible {1359  outline: none;1360  box-shadow: 0 0 0 1px var(--peach-border-accent);1361  background: rgba(240,232,216,0.03);1362}1363.peach-entry-row-icon {1364  width: 26px; height: 26px;1365  border-radius: 7px;1366  border: 1px solid var(--peach-t3);1367  display: flex; align-items: center; justify-content: center;1368  color: var(--peach-t2);1369  flex-shrink: 0;1370}1371.peach-entry-row-icon.is-breach {1372  border-color: rgba(220,80,60,0.3);1373  color: rgba(220,80,60,0.7);1374}13751376/* Title-initials chip used as the favicon fallback for login entries whose1377 * real favicon hasn't been cached by the browser yet (freshly-imported,1378 * never-visited domains). Background colour is hashed from the title so1379 * the same entry always shows the same chip. The chip fits the same1380 * 26×26 row icon slot the favicon would take. */1381.peach-favicon-initials {1382  display: inline-flex;1383  align-items: center;1384  justify-content: center;1385  width: 100%;1386  height: 100%;1387  border-radius: 4px;1388  font-family: "IBM Plex Mono", monospace;1389  font-size: 0.5625rem;1390  font-weight: 600;1391  letter-spacing: 0.04em;1392  color: rgba(240, 232, 216, 0.92);1393  text-transform: uppercase;1394  user-select: none;1395}1396.peach-entry-row-info { flex: 1; min-width: 0; }1397.peach-entry-row-name {1398  display: block;1399  font-family: var(--font-display);1400  font-size: 1.0625rem;1401  font-style: italic;1402  font-weight: 400;1403  color: var(--peach-t0);1404  line-height: 1.2;1405  white-space: nowrap;1406  overflow: hidden;1407  text-overflow: ellipsis;1408}1409.peach-entry-row-meta {1410  display: block;1411  font-family: "IBM Plex Mono", monospace;1412  font-size: 0.5625rem;1413  color: var(--peach-t2);1414  margin-top: 1px;1415  letter-spacing: 0.05em;1416}1417.peach-entry-row-dot {1418  width: 5px; height: 5px;1419  border-radius: 50%;1420  background: rgba(220,80,60,0.7);1421  flex-shrink: 0;1422}1423.peach-new-entry-row {1424  display: flex;1425  align-items: center;1426  justify-content: center;1427  gap: 6px;1428  width: 100%;1429  padding: 11px;1430  background: transparent;1431  border: none;1432  border-top: 1px solid var(--peach-t3);1433  color: var(--peach-t2);1434  font-family: "IBM Plex Mono", monospace;1435  font-size: 0.5625rem;1436  text-transform: uppercase;1437  letter-spacing: 0.14em;1438  cursor: pointer;1439  flex-shrink: 0;1440  transition: color 120ms ease, background 120ms ease;1441}1442.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }14431444/* ── Multi-select mode ─────────────────────────────────────────────── */14451446/* Select-mode trigger button in sort bar — same shape as trash btn */1447.peach-sort-select-btn {1448  display: flex;1449  align-items: center;1450  justify-content: center;1451  padding: 3px 5px;1452  background: transparent;1453  border: none;1454  cursor: pointer;1455  color: var(--peach-t2);1456  border-radius: 4px;1457  transition: color 140ms ease, background 140ms ease;1458}1459.peach-sort-select-btn:hover {1460  color: var(--peach-t1);1461  background: var(--peach-t3);1462}14631464/* Sort bar in select mode */1465.peach-select-cancel-btn {1466  background: transparent;1467  border: none;1468  padding: 0 4px;1469  cursor: pointer;1470  font-family: "IBM Plex Mono", monospace;1471  font-size: 0.5625rem;1472  letter-spacing: 0.12em;1473  text-transform: uppercase;1474  color: var(--peach-t2);1475  transition: color 140ms ease;1476  flex-shrink: 0;1477}1478.peach-select-cancel-btn:hover { color: var(--peach-t0); }14791480.peach-select-count-label {1481  flex: 1;1482  text-align: center;1483  font-family: "IBM Plex Mono", monospace;1484  font-size: 0.5625rem;1485  letter-spacing: 0.14em;1486  text-transform: uppercase;1487  color: var(--peach-t1);1488}14891490.peach-select-all-btn {1491  background: transparent;1492  border: none;1493  padding: 0 4px;1494  cursor: pointer;1495  font-family: "IBM Plex Mono", monospace;1496  font-size: 0.5625rem;1497  letter-spacing: 0.12em;1498  text-transform: uppercase;1499  color: var(--peach-t2);1500  transition: color 140ms ease;1501  flex-shrink: 0;1502}1503.peach-select-all-btn:hover { color: var(--peach-accent); }15041505/* List in select mode */1506.peach-vault-list.is-selecting .peach-entry-row {1507  cursor: default;1508}1509.peach-vault-list.is-selecting .peach-entry-row:hover {1510  background: rgba(240,232,216,0.02);1511}1512.peach-vault-list.is-selecting .peach-entry-row.is-selected {1513  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1514}1515.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1516  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1517}15181519/* Select indicator circles in icon slot */1520.peach-entry-row-icon.is-select-icon {1521  color: var(--peach-t2);1522}1523.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1524  color: var(--peach-accent);1525}15261527/* Delete action bar at bottom (replaces new-entry row) */1528.peach-select-action-bar {1529  display: flex;1530  align-items: center;1531  justify-content: center;1532  gap: 7px;1533  width: 100%;1534  padding: 11px;1535  background: transparent;1536  border: none;1537  border-top: 1px solid var(--peach-t3);1538  color: var(--peach-t1);1539  font-family: "IBM Plex Mono", monospace;1540  font-size: 0.5625rem;1541  text-transform: uppercase;1542  letter-spacing: 0.14em;1543  cursor: pointer;1544  flex-shrink: 0;1545  transition: color 120ms ease, background 120ms ease;1546}1547.peach-select-action-bar:not(:disabled):hover {1548  color: var(--peach-t0);1549  background: rgba(220,80,60,0.06);1550}1551.peach-select-action-bar:not(:disabled):hover svg {1552  stroke: rgba(220,80,60,0.8);1553}1554.peach-select-action-bar:disabled,1555.peach-select-action-bar.is-empty {1556  color: var(--peach-t2);1557  cursor: default;1558  opacity: 0.5;1559}1560.peach-search-counter-list {1561  white-space: nowrap;1562  flex-shrink: 0;1563}1564.peach-list-empty {1565  min-height: 180px;1566  display: grid;1567  place-items: center;1568  color: var(--peach-t2);1569  font-family: "IBM Plex Mono", monospace;1570  font-size: 0.6875rem;1571}15721573/* ── Settings view ───────────────────────────────────────────────────── */1574.peach-settings-body {1575  flex: 1;1576  overflow-y: auto;1577  min-height: 0;1578  display: flex;1579  flex-direction: column;1580  padding: 2px 0 10px;1581}1582.peach-settings-group {1583  margin: 4px 10px;1584  padding: 9px 14px 11px;1585  border-radius: 12px;1586  border: 1px solid rgba(255, 255, 255, 0.07);1587  background: rgba(26, 20, 16, 0.60);1588  backdrop-filter: blur(10px) saturate(1.3);1589  -webkit-backdrop-filter: blur(10px) saturate(1.3);1590}15911592.peach-settings-group + .peach-settings-group {1593  margin-top: 6px;1594}15951596@supports not (backdrop-filter: blur(1px)) {1597  .peach-settings-group {1598    background: rgba(26, 20, 16, 0.90);1599    border-color: rgba(255, 255, 255, 0.09);1600    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1601  }1602}16031604.light .peach-settings-group,1605[data-theme="light"] .peach-settings-group {1606  background: rgba(205, 191, 164, 0.68);1607  border-color: rgba(26, 18, 8, 0.10);1608  backdrop-filter: blur(10px) saturate(1.2);1609  -webkit-backdrop-filter: blur(10px) saturate(1.2);1610}16111612@supports not (backdrop-filter: blur(1px)) {1613  .light .peach-settings-group,1614  [data-theme="light"] .peach-settings-group {1615    background: rgba(205, 191, 164, 0.95);1616    border-color: rgba(26, 18, 8, 0.12);1617  }1618}1619.peach-export-intro {1620  padding-bottom: 8px;1621}1622.peach-export-card {1623  display: grid;1624  gap: 10px;1625}1626.peach-rune-canvas {1627  border-radius: 8px;1628  background: rgba(0, 0, 0, 0.22);1629  flex: 1;1630  align-self: center;1631}1632.peach-script-input {1633  font-family: "PeachScript", monospace;1634  font-size: 0.6875rem;1635  line-height: 1.9;1636  letter-spacing: 0.06em;1637  color: var(--peach-t0);1638  background: rgba(0, 0, 0, 0.22);1639  border: none;1640  border-radius: 6px;1641  padding: 12px;1642  width: 100%;1643  min-height: 96px;1644  resize: vertical;1645  word-break: break-all;1646  scrollbar-width: none;1647  -ms-overflow-style: none;1648}16491650.peach-script-input::-webkit-scrollbar { display: none; }1651.peach-csv-warning {1652  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1653  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1654  color: var(--peach-t0);1655  border-radius: 6px;1656  padding: 10px 12px;1657  margin-bottom: 8px;1658  font-size: 0.75rem;1659  line-height: 1.45;1660}1661.peach-export-card--primary {1662  background:1663    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1664}16651666/* Export menu — distribute the three format cards across the popup. */1667.peach-export-menu {1668  display: flex;1669  flex-direction: column;1670  flex: 1;1671  min-height: 0;1672}1673.peach-export-menu .peach-settings-group {1674  flex: 1;1675  display: flex;1676  flex-direction: column;1677  justify-content: center;1678  gap: 10px;1679}16801681/* Result view — the script-string fills the remaining vertical surface. */1682.peach-export-result-group {1683  flex: 1;1684  display: flex;1685  flex-direction: column;1686  min-height: 0;1687  border-bottom: none;1688}1689.peach-export-result-group .peach-export-card {1690  flex: 1;1691  min-height: 0;1692  display: flex;1693  flex-direction: column;1694  gap: 10px;1695}1696.peach-export-result-group .peach-export-card-copy {1697  flex-shrink: 0;1698}1699.peach-export-result-group .peach-settings-label {1700  flex-shrink: 0;1701}1702.peach-export-result-group button {1703  flex-shrink: 0;1704}1705.peach-export-card-head {1706  display: flex;1707  align-items: center;1708  justify-content: space-between;1709  gap: 10px;1710}1711.peach-export-card-copy {1712  margin: 0;1713  font-size: 0.75rem;1714  line-height: 1.55;1715  color: var(--peach-t1);1716}1717.peach-export-note {1718  margin: 0;1719  font-size: 0.625rem;1720  line-height: 1.5;1721  color: var(--peach-t2);1722}1723.peach-export-strength-track {1724  height: 3px;1725  background: var(--peach-border);1726  border-radius: 2px;1727  margin: 4px 0 2px;1728  overflow: hidden;1729}1730.peach-export-strength-fill {1731  height: 100%;1732  border-radius: 2px;1733  transition: width 250ms ease, background 250ms ease;1734}1735.peach-export-strength-warn {1736  margin: 0;1737  font-size: 0.625rem;1738  line-height: 1.5;1739  color: #e84040;1740  font-family: "IBM Plex Mono", monospace;1741}1742.peach-export-strength-hint {1743  margin: 0;1744  font-size: 0.625rem;1745  line-height: 1.5;1746  color: var(--peach-t2);1747  font-family: "IBM Plex Mono", monospace;1748}1749.peach-export-pill {1750  display: inline-flex;1751  align-items: center;1752  padding: 4px 8px;1753  border-radius: 999px;1754  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1755  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1756  color: var(--peach-accent);1757  font-family: "IBM Plex Mono", monospace;1758  font-size: 0.5rem;1759  letter-spacing: 0.12em;1760  text-transform: uppercase;1761  white-space: nowrap;1762}1763.peach-export-pill--danger {1764  border-color: rgba(220,80,60,0.22);1765  background: rgba(220,80,60,0.08);1766  color: var(--peach-breach);1767}1768.peach-settings-label {1769  margin: 0 0 6px;1770  font-family: "IBM Plex Mono", monospace;1771  font-size: 0.5rem;1772  text-transform: uppercase;1773  letter-spacing: 0.18em;1774  color: var(--peach-t2);1775}1776.peach-settings-row {1777  display: flex;1778  align-items: center;1779  justify-content: space-between;1780  gap: 12px;1781  min-height: 34px;1782  padding: 6px 0;1783  font-size: 0.8125rem;1784  color: var(--peach-t1);1785}1786.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1787.peach-settings-value {1788  font-family: "IBM Plex Mono", monospace;1789  font-size: 0.625rem;1790  color: var(--peach-t2);1791}17921793.peach-settings-value--status {1794  display: flex;1795  align-items: center;1796  gap: 6px;1797}17981799.peach-settings-link {1800  font-family: "IBM Plex Mono", monospace;1801  font-size: 0.625rem;1802  color: var(--peach-accent);1803  text-decoration: none;1804  cursor: pointer;1805}1806.peach-settings-link:hover {1807  text-decoration: underline;1808}18091810.peach-settings-row--stack {1811  flex-direction: column;1812  align-items: stretch;1813  gap: 6px;1814}18151816.peach-settings-row--top {1817  align-items: flex-start;1818}18191820.peach-settings-row-main {1821  display: flex;1822  flex-direction: column;1823  gap: 4px;1824  flex: 1;1825}1826.peach-toggle {1827  width: 28px; height: 16px;1828  border-radius: 999px;1829  background: var(--peach-t3);1830  border: 1px solid var(--peach-t3);1831  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1832  flex-shrink: 0;1833  transition: background 200ms ease, border-color 200ms ease;1834  cursor: pointer;1835}1836.peach-toggle.is-on {1837  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1838  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1839}1840.peach-toggle-knob {1841  width: 10px; height: 10px;1842  border-radius: 50%;1843  background: var(--peach-t2);1844  flex-shrink: 0;1845  transform: translateX(0px);1846  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1847}1848.peach-toggle.is-on .peach-toggle-knob {1849  background: var(--peach-accent);1850  transform: translateX(12px);1851}1852.peach-settings-footer {1853  display: flex;1854  align-items: center;1855  gap: 8px;1856  margin-top: auto;1857  padding: 14px 16px 8px;1858  font-family: "IBM Plex Mono", monospace;1859  font-size: 0.5625rem;1860  color: var(--peach-t2);1861}18621863/* ── Settings home navigation ──────────────────────────────────────────── */1864.peach-settings-nav-label {1865  margin: 0 0 2px;1866  padding: 12px 16px 4px;1867  font-family: "IBM Plex Mono", monospace;1868  font-size: 0.5rem;1869  text-transform: uppercase;1870  letter-spacing: 0.18em;1871  color: var(--peach-t2);1872}18731874.peach-settings-cat-row {1875  display: flex;1876  align-items: center;1877  gap: 10px;1878  width: 100%;1879  padding: 9px 16px;1880  background: none;1881  border: none;1882  border-bottom: 1px solid var(--peach-t3);1883  cursor: pointer;1884  text-align: left;1885  color: inherit;1886  transition: background var(--peach-dur-80) ease;1887}1888.peach-settings-cat-row:hover {1889  background: var(--peach-t3);1890}1891.peach-settings-cat-row:last-child {1892  border-bottom: none;1893}18941895.peach-settings-cat-icon {1896  width: 28px;1897  height: 28px;1898  border-radius: 7px;1899  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1900  color: var(--peach-accent);1901  display: flex;1902  align-items: center;1903  justify-content: center;1904  flex-shrink: 0;1905}1906/* Light theme: peach-on-cream is too low-contrast — both colors are warm.1907   Darken the icon stroke to ink and bump the bg tint so the icon reads1908   sharply while the cell still feels accent-tinted. */1909.light .peach-settings-cat-icon {1910  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);1911  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));1912}19131914.peach-settings-cat-content {1915  flex: 1;1916  display: flex;1917  flex-direction: column;1918  gap: 2px;1919  min-width: 0;1920}19211922.peach-settings-cat-name {1923  font-size: 0.8125rem;1924  font-weight: 450;1925  color: var(--peach-t0);1926  line-height: 1.2;1927}19281929.peach-settings-cat-desc {1930  font-size: 0.625rem;1931  color: var(--peach-t2);1932  line-height: 1.3;1933  white-space: nowrap;1934  overflow: hidden;1935  text-overflow: ellipsis;1936}19371938.peach-settings-cat-chevron {1939  color: var(--peach-t2);1940  flex-shrink: 0;1941  opacity: 0.5;1942}19431944/* ── Settings sub-view section labels ──────────────────────────────────── */1945.peach-settings-sub-label {1946  margin: 12px 0 4px;1947  font-family: "IBM Plex Mono", monospace;1948  font-size: 0.5rem;1949  text-transform: uppercase;1950  letter-spacing: 0.18em;1951  color: var(--peach-t2);1952}1953.peach-settings-sub-label:first-child {1954  margin-top: 4px;1955}19561957/* ── Settings: collapsible Advanced section ─────────────────────────────── */1958.peach-settings-advanced-toggle {1959  display: flex;1960  align-items: center;1961  justify-content: space-between;1962  width: 100%;1963  background: none;1964  border: none;1965  cursor: pointer;1966  padding: 12px 0 4px;1967  margin: 0;1968  color: inherit;1969}1970.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {1971  color: var(--peach-t1);1972}1973.peach-settings-advanced-chevron {1974  font-size: 0.5625rem;1975  color: var(--peach-t3);1976  letter-spacing: 0;1977  transition: color 120ms ease;1978}19791980/* ── Feedback form ──────────────────────────────────────────────────────── */1981.peach-feedback-group {1982  flex: 1;1983  display: flex;1984  flex-direction: column;1985  border-bottom: none;1986}19871988.peach-feedback-intro {1989  margin: 4px 0 14px;1990  font-size: 0.75rem;1991  line-height: 1.55;1992  color: var(--peach-t1);1993}19941995.peach-feedback-chips {1996  display: flex;1997  flex-wrap: wrap;1998  gap: 6px;1999  margin-bottom: 14px;2000}20012002.peach-feedback-chip {2003  padding: 4px 10px;2004  border-radius: 999px;2005  border: 1px solid var(--peach-t3);2006  background: none;2007  color: var(--peach-t2);2008  font-size: 0.6875rem;2009  font-family: var(--font-ui);2010  cursor: pointer;2011  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2012    background var(--peach-dur-80) ease;2013}2014.peach-feedback-chip:hover {2015  border-color: var(--peach-t2);2016  color: var(--peach-t1);2017}2018.peach-feedback-chip.is-active {2019  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);2020  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2021  color: var(--peach-accent);2022}20232024.peach-feedback-textarea {2025  flex: 1;2026  width: 100%;2027  min-height: 120px;2028  box-sizing: border-box;2029  background: rgba(0, 0, 0, 0.22);2030  border: 1px solid transparent;2031  border-radius: 6px;2032  color: var(--peach-t0);2033  font-size: 0.75rem;2034  font-family: var(--font-ui);2035  line-height: 1.5;2036  padding: 8px 10px;2037  resize: none;2038  outline: none;2039  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2040}2041.peach-feedback-textarea:focus {2042  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2043  background: rgba(0, 0, 0, 0.28);2044}2045.peach-feedback-textarea:focus {2046  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2047}2048.peach-feedback-textarea::placeholder {2049  color: var(--peach-t2);2050}20512052.peach-feedback-meta {2053  margin: 6px 0 0;2054  font-size: 0.625rem;2055  color: var(--peach-t2);2056  font-family: "IBM Plex Mono", monospace;2057}20582059.peach-feedback-result {2060  margin: 8px 0 0;2061  font-size: 0.6875rem;2062  font-family: "IBM Plex Mono", monospace;2063}2064.peach-feedback-result--ok { color: var(--peach-sync-ok); }2065.peach-feedback-result--err { color: var(--peach-breach); }20662067.peach-feedback-submit {2068  width: 100%;2069  margin-top: 12px;2070  justify-content: center;2071}20722073.peach-feedback-anon {2074  margin: 8px 0 0;2075  font-size: 0.625rem;2076  color: var(--peach-t2);2077  text-align: center;2078}20792080.peach-passkey-badge {2081  margin-left: 8px;2082  font-size: 0.625rem;2083  letter-spacing: 0.06em;2084  text-transform: uppercase;2085  color: var(--peach-t2);2086  font-family: var(--font-ui);2087  vertical-align: middle;2088}20892090.peach-passkey-delete-btn {2091  color: var(--peach-breach);2092  border-color: rgba(229, 85, 85, 0.25);2093}20942095.peach-passkey-delete-confirm {2096  display: flex;2097  align-items: center;2098  gap: 8px;2099  padding: 8px 10px;2100  background: rgba(229, 85, 85, 0.06);2101  border: 1px solid rgba(229, 85, 85, 0.2);2102  border-radius: 6px;2103}21042105.peach-passkey-delete-confirm-copy {2106  flex: 1;2107  font-size: 0.6875rem;2108  color: var(--peach-t1);2109}21102111.peach-passkey-delete-btn--confirm {2112  color: var(--peach-breach);2113  border-color: rgba(229, 85, 85, 0.4);2114}21152116.peach-passkey-activity {2117  flex-direction: column;2118  align-items: flex-start;2119  gap: 4px;2120}21212122.peach-passkey-meta {2123  font-size: 0.6875rem;2124  color: var(--peach-t2);2125}21262127.peach-passkey-actions {2128  position: relative;2129  z-index: 1;2130  margin-top: 14px;2131  display: flex;2132  flex-direction: column;2133  gap: 8px;2134}21352136.peach-passkey-approval {2137  display: flex;2138  flex-direction: column;2139  align-items: center;2140  padding: 16px 20px 14px;2141  gap: 8px;2142  text-align: center;2143}21442145.peach-passkey-approval-icon {2146  width: 36px;2147  height: 36px;2148  border-radius: 10px;2149  background: var(--peach-s2);2150  border: 1px solid var(--peach-t3);2151  display: flex;2152  align-items: center;2153  justify-content: center;2154  flex-shrink: 0;2155  color: var(--peach-accent);2156}21572158.peach-passkey-approval-icon img,2159.peach-passkey-approval-icon svg {2160  width: 22px;2161  height: 22px;2162  border-radius: 5px;2163}21642165.peach-passkey-approval-rp {2166  font-family: var(--font-ui);2167  font-size: 0.75rem;2168  color: var(--peach-t2);2169  letter-spacing: 0.03em;2170}21712172.peach-passkey-approval-action {2173  font-family: var(--font-display);2174  font-style: italic;2175  font-weight: 300;2176  font-size: 18px;2177  color: var(--peach-t0);2178  line-height: 1.1;2179  margin: 1px 0;2180}21812182.peach-passkey-approval-user {2183  font-family: var(--font-mono);2184  font-size: 0.6875rem;2185  color: var(--peach-t1);2186  background: var(--peach-s2);2187  border: 1px solid var(--peach-t3);2188  border-radius: 4px;2189  padding: 3px 8px;2190}21912192.peach-passkey-approval-notice {2193  font-size: 0.625rem;2194  color: var(--peach-t2);2195  line-height: 1.5;2196  max-width: 220px;2197}21982199.peach-passkey-approval-actions {2200  display: flex;2201  gap: 8px;2202  width: 100%;2203  margin-top: 6px;2204}22052206.peach-passkey-approval-actions .peach-btn {2207  flex: 1;2208}22092210/* ── Inline generator drawer ── */2211.peach-generator-drawer {2212  display: grid;2213  grid-template-rows: 0fr;2214  transition: grid-template-rows 320ms var(--peach-curve-arrival);2215  overflow: hidden;2216}2217.peach-generator-drawer.is-open {2218  grid-template-rows: 1fr;2219}2220.peach-generator-drawer-inner {2221  min-height: 0;2222  overflow: hidden;2223}2224.peach-generator-drawer-content {2225  border-top: 1px solid var(--peach-t3);2226  padding: 8px 0 4px;2227  display: flex;2228  flex-direction: column;2229  gap: 8px;2230}22312232/* ── Compact generator (inside entry edit) ── */2233.peach-generator-drawer-content--compact {2234  border-top: 1px solid var(--peach-t3);2235  padding: 8px 0 2px;2236  gap: 7px;2237}2238.peach-pwgen-compact-display-row {2239  display: flex;2240  align-items: center;2241  gap: 6px;2242}2243.peach-pwgen-compact-output {2244  flex: 1;2245  min-width: 0;2246  font-family: "IBM Plex Mono", monospace;2247  font-size: 0.6875rem;2248  font-weight: 400;2249  letter-spacing: 0.04em;2250  color: var(--peach-t0);2251  background: rgba(240, 232, 216, 0.04);2252  border: 1px solid var(--peach-t3);2253  border-radius: 5px;2254  padding: 5px 8px;2255  line-height: 1.5;2256  outline: none;2257  transition: border-color 120ms ease;2258}22592260.peach-pwgen-compact-output:focus {2261  border-color: var(--peach-t1);2262}2263.peach-pwgen-compact-controls {2264  display: flex;2265  align-items: center;2266  gap: 6px;2267}2268.peach-pwgen-compact-slider {2269  flex: 1;2270  min-width: 0;2271  height: 2px !important;2272}2273.peach-pwgen-compact-controls .peach-pwgen-len-num {2274  flex-shrink: 0;2275  min-width: 18px;2276  text-align: right;2277}2278.peach-pwgen-compact-pills {2279  display: flex;2280  gap: 3px;2281  flex-shrink: 0;2282}2283.peach-pwgen-compact-pills .peach-pwgen-pill {2284  padding: 2px 7px;2285  font-size: 0.5rem;2286}2287.peach-pwgen-compact-use {2288  flex-shrink: 0;2289  font-size: 0.625rem !important;2290  padding: 3px 9px !important;2291  min-height: 22px !important;2292  border-radius: 5px !important;2293}22942295/* ── Password edit row (input + eye toggle side-by-side) ── */2296.peach-password-edit-row {2297  display: flex;2298  align-items: center;2299  gap: 6px;2300}2301.peach-password-edit-row .peach-inline-input {2302  flex: 1;2303  min-width: 0;2304}23052306/* ── Generate toggle link ── */2307.peach-generate-toggle-link {2308  display: inline-flex;2309  align-items: center;2310  gap: 5px;2311  background: none;2312  border: none;2313  padding: 0;2314  cursor: pointer;2315  font-family: "IBM Plex Mono", monospace;2316  font-size: 0.625rem;2317  color: var(--peach-t2);2318  letter-spacing: 0.04em;2319  transition: color 120ms ease;2320  align-self: flex-start;2321}2322.peach-generate-toggle-link:hover {2323  color: var(--peach-accent);2324}23252326/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2327.peach-entry-body {2328  flex: 1;2329  overflow-y: auto;2330  overflow-x: hidden;2331  scrollbar-width: none;2332  -ms-overflow-style: none;2333  overscroll-behavior: contain;2334  display: grid;2335  gap: 10px;2336  align-content: start;2337  padding: 10px 20px 14px;2338  min-width: 0;2339  min-height: 0;2340}2341.peach-entry-body::-webkit-scrollbar { display: none; }23422343/* Type-toggle pills + inline note toolbar */2344.peach-new-type-row {2345  display: flex;2346  align-items: center;2347  gap: 6px;2348  margin-bottom: 2px;2349}2350.peach-new-type-btn {2351  background: transparent;2352  border: 1px solid var(--peach-t3);2353  border-radius: 12px;2354  padding: 3px 10px;2355  font-family: "IBM Plex Mono", monospace;2356  font-size: 0.5625rem;2357  letter-spacing: 0.12em;2358  text-transform: uppercase;2359  color: var(--peach-t2);2360  cursor: pointer;2361  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2362}2363.peach-new-type-btn.is-active {2364  color: var(--peach-t0);2365  border-color: var(--peach-accent);2366  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2367}2368.peach-new-type-btn:not(.is-active):hover {2369  color: var(--peach-t1);2370  border-color: var(--peach-t2);2371}23722373/* Editable title */2374.peach-new-title-wrap { margin: 0 0 2px; }2375.peach-new-title-input {2376  background: transparent;2377  border: none;2378  outline: none;2379  width: 100%;2380  color: var(--peach-t0);2381  font-family: var(--font-display);2382  font-style: italic;2383  font-weight: 400;2384  font-size: 40px;2385  line-height: 0.95;2386  caret-color: var(--peach-accent);2387}2388.peach-new-title-input::placeholder { color: var(--peach-t2); }23892390/* Editable domain field */2391.peach-domain-edit-row {2392  display: flex;2393  align-items: center;2394  gap: 6px;2395}23962397.peach-domain-edit-row .peach-domain-value--edit {2398  flex: 1;2399  width: 0;2400}24012402.peach-domain-url-btn {2403  flex-shrink: 0;2404  background: transparent;2405  border: none;2406  cursor: pointer;2407  color: var(--peach-t3);2408  padding: 2px 3px;2409  display: flex;2410  align-items: center;2411  line-height: 0;2412  border-radius: 3px;2413  transition: color 120ms ease;2414}24152416.peach-domain-url-btn:hover {2417  color: var(--peach-accent);2418}24192420.peach-domain-value--edit {2421  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2422  font-size: 0.625rem;2423  font-style: italic;2424  letter-spacing: 0.12em;2425  color: var(--peach-t1);2426  background: transparent;2427  border: none;2428  border-bottom: 1px solid var(--peach-t3);2429  outline: none;2430  width: 100%;2431  padding: 2px 0;2432  caret-color: var(--peach-accent);2433  transition: border-color 140ms ease, color 140ms ease;2434}2435.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2436.peach-domain-value--edit:focus {2437  border-bottom-color: rgba(240, 232, 216, 0.28);2438  color: var(--peach-t0);2439}24402441/* Editable field values (username, password, totp) */2442.peach-field-value--edit {2443  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2444  font-size: 0.8125rem;2445  color: var(--peach-t0);2446  background: transparent;2447  border: none;2448  border-bottom: 1px solid var(--peach-t3);2449  outline: none;2450  flex: 1;2451  min-width: 0;2452  padding: 3px 0;2453  caret-color: var(--peach-accent);2454  transition: border-color 140ms ease, color 140ms ease;2455}2456.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2457.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2458.peach-field-value--edit:focus {2459  border-bottom-color: rgba(240, 232, 216, 0.28);2460  color: var(--peach-t0);2461}24622463/* "+ add optional field" links */2464.peach-entry-add-links {2465  display: flex;2466  gap: 12px;2467  flex-wrap: wrap;2468  margin-top: -2px;2469}2470.peach-add-field-link {2471  background: transparent;2472  border: none;2473  padding: 0;2474  cursor: pointer;2475  font-family: "IBM Plex Mono", monospace;2476  font-size: 0.5625rem;2477  letter-spacing: 0.1em;2478  text-transform: uppercase;2479  color: var(--peach-t2);2480  transition: color 140ms ease;2481}2482.peach-add-field-link:hover { color: var(--peach-accent); }24832484/* ── New entry form (legacy classes) ────────────────────────────────── */2485.peach-new-body {2486  flex: 1;2487  overflow-y: auto;2488  padding: 10px 20px 14px;2489}2490.peach-new-name-input {2491  background: transparent;2492  border: none;2493  outline: none;2494  width: 100%;2495  color: var(--peach-t0);2496  font-family: var(--font-display);2497  font-style: italic;2498  font-weight: 400;2499  font-size: 40px;2500  line-height: 0.95;2501  caret-color: var(--peach-accent);2502}2503.peach-new-name-input::placeholder { color: var(--peach-t2); }2504.peach-new-field-input {2505  background: transparent;2506  border: none;2507  outline: none;2508  flex: 1;2509  min-width: 0;2510  caret-color: var(--peach-accent);2511}2512.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }25132514/* ── Canary card ── */2515.peach-canary-card {2516  border: 1px solid rgba(217, 160, 48, 0.2);2517  background: rgba(217, 160, 48, 0.03);2518  border-radius: 8px;2519  padding: 12px;2520}25212522.peach-canary-settings-header {2523  display: flex;2524  align-items: center;2525  justify-content: space-between;2526  cursor: pointer;2527  user-select: none;2528}25292530.peach-canary-card .peach-label {2531  color: rgba(217, 160, 48, 0.85);2532}25332534.peach-canary-card .peach-new-field-input {2535  border-color: rgba(217, 160, 48, 0.25);2536}25372538.peach-canary-card .peach-new-field-input:focus {2539  border-color: rgba(217, 160, 48, 0.5);2540}25412542.peach-canary-body {2543  margin-top: 12px;2544  display: flex;2545  flex-direction: column;2546  gap: 10px;2547}25482549.peach-canary-explainer {2550  display: flex;2551  gap: 10px;2552  padding: 10px 12px;2553  border-radius: 10px;2554  background: rgba(217, 160, 48, 0.06);2555  border: 1px solid rgba(217, 160, 48, 0.22);2556  margin-bottom: 4px;2557}25582559.peach-canary-explainer-icon {2560  font-size: 1rem;2561  flex-shrink: 0;2562  line-height: 1.2;2563}25642565.peach-canary-explainer-title {2566  font-family: var(--font-ui);2567  font-size: 0.6875rem;2568  font-weight: 500;2569  color: rgba(217, 160, 48, 0.9);2570  margin: 0 0 3px;2571}25722573.peach-canary-explainer-copy {2574  font-family: var(--font-ui);2575  font-size: 0.625rem;2576  color: var(--peach-t2);2577  line-height: 1.55;2578  margin: 0;2579}25802581.peach-canary-hint {2582  font-size: 0.625rem;2583  color: var(--peach-t2);2584  font-family: Inter, system-ui, sans-serif;2585  line-height: 1.5;2586  margin-top: 4px;2587}25882589.peach-canary-actions-row {2590  display: flex;2591  align-items: center;2592  gap: 8px;2593}25942595.peach-canary-test-btn {2596  border-color: rgba(217, 160, 48, 0.3);2597  color: rgba(217, 160, 48, 0.85);2598}25992600.peach-canary-test-result {2601  font-size: 0.625rem;2602  font-family: Inter, system-ui, sans-serif;2603}26042605.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2606.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }26072608.peach-canary-badge {2609  display: flex;2610  position: relative;2611  z-index: 1;2612  align-items: center;2613  gap: 5px;2614  padding: 4px 10px;2615  background: rgba(217, 160, 48, 0.12);2616  border: 1px solid rgba(217, 160, 48, 0.35);2617  border-radius: 6px;2618  margin-bottom: 6px;2619  width: fit-content;2620}26212622.peach-canary-badge-label {2623  font-size: 0.625rem;2624  letter-spacing: 0.06em;2625  color: rgba(217, 160, 48, 0.9);2626  font-family: var(--font-ui);2627  text-transform: uppercase;2628}26292630.peach-canary-badge-icon {2631  font-size: 0.6875rem;2632}26332634.peach-canary-suppress-row {2635  display: flex;2636  align-items: center;2637  gap: 8px;2638  padding: 6px 10px;2639  background: rgba(217, 160, 48, 0.08);2640  border-radius: 6px;2641  margin-bottom: 8px;2642}26432644.peach-canary-suppress-label {2645  font-size: 0.6875rem;2646  color: rgba(217, 160, 48, 0.85);2647  cursor: pointer;2648  font-family: var(--font-ui);2649  letter-spacing: 0.04em;2650}26512652.peach-regen-panel {2653  position: relative;2654  z-index: 1;2655  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2656  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2657  border-radius: 8px;2658  padding: 12px;2659  margin-bottom: 8px;2660}26612662.peach-regen-panel-header {2663  display: flex;2664  align-items: center;2665  justify-content: space-between;2666  margin-bottom: 10px;2667}26682669.peach-regen-panel-title {2670  font-size: 0.6875rem;2671  font-weight: 600;2672  letter-spacing: 0.06em;2673  text-transform: uppercase;2674  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2675}26762677.peach-regen-output {2678  background: rgba(0, 0, 0, 0.2);2679  border-radius: 6px;2680  padding: 10px;2681  margin-bottom: 10px;2682  font-family: var(--font-mono);2683  font-size: 0.8125rem;2684  word-break: break-all;2685  color: var(--peach-t1);2686}26872688.peach-regen-actions {2689  display: flex;2690  gap: 6px;2691}26922693.peach-regen-actions--spaced {2694  margin-bottom: 8px;2695}26962697.peach-regen-action-grow {2698  flex: 1;2699}27002701.peach-regen-copy-btn {2702  padding: 0 8px;2703}27042705.peach-regen-success {2706  position: relative;2707  z-index: 1;2708  background: rgba(40, 180, 80, 0.1);2709  border: 1px solid rgba(40, 180, 80, 0.3);2710  border-radius: 8px;2711  padding: 10px 12px;2712  margin-bottom: 8px;2713  display: flex;2714  align-items: center;2715  gap: 8px;2716  font-size: 0.6875rem;2717  color: rgba(40, 180, 80, 0.9);2718}27192720/* ── Note editor overlay ── */2721.peach-note-editor {2722  position: absolute;2723  inset: 0;2724  z-index: 200;2725  display: flex;2726  flex-direction: column;2727  background:2728    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2729    var(--peach-bg);2730  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2731}27322733.peach-note-editor-header {2734  display: flex;2735  align-items: center;2736  gap: 10px;2737  padding: 14px 16px 10px;2738  border-bottom: 1px solid var(--peach-t3);2739  flex-shrink: 0;2740}27412742.peach-note-editor-back {2743  background: transparent;2744  border: none;2745  cursor: pointer;2746  color: var(--peach-t2);2747  padding: 4px 6px;2748  border-radius: 6px;2749  display: flex;2750  align-items: center;2751  transition: color 120ms ease, background 120ms ease;2752  flex-shrink: 0;2753}2754.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }27552756.peach-note-editor-label {2757  flex: 1;2758  font-family: var(--font-display);2759  font-style: italic;2760  font-size: 0.9375rem;2761  color: var(--peach-t1);2762  letter-spacing: 0.02em;2763}27642765.peach-note-editor-save-btn {2766  background: transparent;2767  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2768  border-radius: 8px;2769  color: var(--peach-accent);2770  font-family: "IBM Plex Mono", monospace;2771  font-size: 0.625rem;2772  letter-spacing: 0.06em;2773  text-transform: uppercase;2774  padding: 3px 10px;2775  cursor: pointer;2776  transition: background 120ms ease, border-color 120ms ease;2777}2778.peach-note-editor-save-btn:hover:not(:disabled) {2779  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2780  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2781}2782.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }27832784.peach-note-toolbar {2785  display: flex;2786  align-items: center;2787  gap: 3px;2788  padding: 6px 14px 5px;2789  border-bottom: 1px solid var(--peach-t3);2790  flex-shrink: 0;2791}27922793.peach-note-tool-btn {2794  background: transparent;2795  border: 1px solid transparent;2796  border-radius: 5px;2797  color: var(--peach-t2);2798  font-family: "IBM Plex Mono", monospace;2799  font-size: 0.625rem;2800  letter-spacing: 0.04em;2801  padding: 2px 8px;2802  cursor: pointer;2803  line-height: 1.6;2804  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2805}2806.peach-note-tool-btn:hover {2807  background: var(--peach-t4);2808  color: var(--peach-t0);2809  border-color: var(--peach-t3);2810}28112812.peach-note-tool-icon {2813  padding: 3px 7px;2814  display: inline-flex;2815  align-items: center;2816  justify-content: center;2817}28182819.peach-note-tool-divider {2820  width: 1px;2821  height: 14px;2822  background: var(--peach-t3);2823  margin: 0 4px;2824  flex-shrink: 0;2825}28262827.peach-note-editor-body {2828  flex: 1;2829  overflow-y: auto;2830  padding: 16px 20px 20px;2831  outline: none;2832  font-family: var(--font-display);2833  font-size: 1rem;2834  line-height: 1.75;2835  color: var(--peach-t0);2836  scrollbar-width: none;2837  word-break: break-word;2838}2839.peach-note-editor-body:empty::before {2840  content: "write your note…";2841  color: var(--peach-t3);2842  font-style: italic;2843  pointer-events: none;2844}28452846/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2847.peach-note-editor-inline {2848  display: flex;2849  flex-direction: column;2850  flex: 1;2851  min-height: 0;2852}2853.peach-note-editor-body--inline {2854  flex: 1;2855  min-height: 0;2856  font-size: 0.9375rem;2857  padding: 10px 20px 14px;2858}28592860/* Full-width toolbar row inside the body (Add.tsx note type).2861   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */2862.peach-note-toolbar-body {2863  display: flex;2864  align-items: center;2865  gap: 3px;2866  padding: 5px 20px 4px;2867  margin: 2px -20px 0;2868  border-bottom: 1px solid var(--peach-t3);2869  flex-shrink: 0;2870}28712872/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2873   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2874   and .peach-note-tool-divider button-level styles. */2875.peach-note-toolbar-inline {2876  display: flex;2877  align-items: center;2878  gap: 3px;2879  margin-left: auto;2880  padding-left: 10px;2881  border-left: 1px solid var(--peach-t3);2882  min-height: 22px;2883}28842885/* Entry.tsx toolbar row (no tabs, toolbar only) */2886.peach-entry-note-toolbar-row {2887  display: flex;2888  align-items: center;2889  margin: 4px 0 6px;2890  position: relative;2891  z-index: 1;2892}2893.peach-entry-note-toolbar-row .peach-note-toolbar-inline {2894  border-left: none;2895  padding-left: 0;2896  margin-left: 0;2897}28982899/* Note body — fills available vertical space in Add.tsx and Entry.tsx */2900.peach-note-body {2901  display: flex;2902  flex-direction: column;2903  flex: 1;2904  min-height: 0;2905  margin: 4px 0 0;2906}2907.peach-entry-body--new .peach-note-body {2908  margin: 8px -20px 0;2909}29102911/* Add.tsx body is a grid by default; swap to a flex column when a note is2912   active so the note body can stretch and pin the tags row to the bottom. */2913.peach-entry-body--new:has(.peach-note-body) {2914  display: flex;2915  flex-direction: column;2916}29172918/* Rich content element styles (editor + display) */2919.peach-note-editor-body h2,2920.peach-note-content h2 {2921  font-family: var(--font-display);2922  font-size: 20px;2923  font-weight: 600;2924  font-style: italic;2925  color: var(--peach-t0);2926  margin: 6px 0 2px;2927  line-height: 1.3;2928}2929.peach-note-editor-body ul,2930.peach-note-content ul {2931  padding-left: 18px;2932  margin: 3px 0;2933  list-style: disc;2934}2935.peach-note-editor-body ol,2936.peach-note-content ol {2937  padding-left: 18px;2938  margin: 3px 0;2939  list-style: decimal;2940}2941.peach-note-editor-body li,2942.peach-note-content li { margin: 2px 0; }2943.peach-note-editor-body hr,2944.peach-note-content hr {2945  border: none;2946  border-top: 1px solid var(--peach-t3);2947  margin: 10px 0;2948}29492950/* font size elements from execCommand */2951.peach-note-editor-body font[size="1"],2952.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }2953.peach-note-editor-body font[size="2"],2954.peach-note-content font[size="2"] { font-size: 0.8125rem; }2955.peach-note-editor-body font[size="3"],2956.peach-note-content font[size="3"] { font-size: 1rem; }2957.peach-note-editor-body font[size="4"],2958.peach-note-content font[size="4"] { font-size: 20px; }2959.peach-note-editor-body font[size="5"],2960.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }29612962/* bold / italic inside the editor and note display */2963.peach-note-editor-body b, .peach-note-editor-body strong,2964.peach-note-content b, .peach-note-content strong { font-weight: 700; }2965.peach-note-editor-body em, .peach-note-editor-body i,2966.peach-note-content em, .peach-note-content i { font-style: italic; }29672968/* note display — rendered HTML, no pre-wrap */2969.peach-note-content {2970  overflow: auto;2971  max-height: 340px;2972  word-break: break-word;2973}29742975/* ── Note textarea ── */2976.peach-note-textarea {2977  width: 100%;2978  min-height: 180px;2979  max-height: 280px;2980  resize: vertical;2981  background: var(--peach-t4);2982  border: 1px solid var(--peach-t3);2983  border-radius: 8px;2984  padding: 10px 12px;2985  font-family: "IBM Plex Mono", monospace;2986  font-size: 0.75rem;2987  line-height: 1.7;2988  color: var(--peach-t1);2989  outline: none;2990  transition: border-color 150ms ease;2991}29922993.peach-note-textarea:focus {2994  border-color: var(--peach-t2);2995}29962997.peach-note-char-count {2998  font-family: "IBM Plex Mono", monospace;2999  font-size: 0.5625rem;3000  color: var(--peach-t3);3001  text-align: right;3002  margin-top: 4px;3003  letter-spacing: 0.1em;3004}30053006/* ── Field input baseline ── */3007.peach-new-field-input {3008  width: 100%;3009  background: transparent;3010  border: none;3011  border-bottom: 1px solid var(--peach-t3);3012  padding: 4px 0;3013  color: var(--peach-t1);3014  font-family: "IBM Plex Mono", monospace;3015  font-size: 0.8125rem;3016  outline: none;3017  transition: border-color 150ms ease;3018}30193020.peach-new-field-input:focus {3021  border-bottom-color: var(--peach-t0);3022  color: var(--peach-t0);3023}30243025.peach-new-name-input {3026  width: 100%;3027  background: transparent;3028  border: none;3029  border-bottom: 1px solid var(--peach-t3);3030  padding: 6px 0;3031  font-family: var(--font-display);3032  font-style: italic;3033  font-size: 28px;3034  color: var(--peach-t0);3035  outline: none;3036  transition: border-color 150ms ease;3037}30383039.peach-new-name-input:focus {3040  border-bottom-color: var(--peach-t1);3041}30423043.peach-new-name-input::placeholder {3044  color: var(--peach-t2);3045  font-style: italic;3046}30473048.peach-new-field-input::placeholder {3049  color: var(--peach-t3);3050}30513052/* ── Demo entrance animation ── */3053#hd-shell {3054  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3055}3056@keyframes hd-shell-enter {3057  from { opacity: 0; transform: scale(0.96) translateY(16px); }3058  to   { opacity: 1; transform: scale(1) translateY(0); }3059}30603061/* ── Keyframes ── */3062@keyframes peach-char-enter {3063  from { opacity: 0; transform: translateY(0.22em); }3064  to   { opacity: 1; transform: translateY(0); }3065}3066@keyframes peach-content-enter {3067  from { opacity: 0.96; transform: translateY(4px); }3068  to   { opacity: 1; transform: translateY(0); }3069}3070@keyframes peach-content-exit {3071  from { opacity: 1; transform: translateY(0); }3072  to   { opacity: 0.92; transform: translateY(-3px); }3073}3074@keyframes peach-screen-enter {3075  from { opacity: 0; transform: translateY(14px); }3076  to   { opacity: 1; transform: translateY(0); }3077}3078@keyframes peach-shell-fade-in {3079  from { opacity: 0; }3080  to   { opacity: 1; }3081}3082@keyframes peach-veil-in {3083  from { opacity: 0; }3084  to   { opacity: 1; }3085}3086@keyframes peach-lock-settle {3087  0%   { transform: scale(0.9); }3088  65%  { transform: scale(1.08); }3089  100% { transform: scale(1); }3090}3091@keyframes peach-copy-confirm {3092  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3093  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); }3094}3095@keyframes peach-copy-retreat {3096  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); }3097  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3098}3099@keyframes peach-copy-flood {3100  from { opacity: 0; transform: scaleX(0.15); }3101  to   { opacity: 1; transform: scaleX(1); }3102}3103@keyframes peach-copy-icon-settle {3104  from  { transform: scale(0.84); }3105  70%   { transform: scale(1.08); }3106  to    { transform: scale(1); }3107}3108@keyframes peach-copy-sheen-retreat {3109  from { opacity: 1; transform: scaleX(1); }3110  to   { opacity: 0; transform: scaleX(0.15); }3111}3112@keyframes peach-copy-drain {3113  from { width: 100%; }3114  to   { width: 0; }3115}3116@keyframes peach-shake {3117  0%, 100% { transform: translateX(0); }3118  20%      { transform: translateX(-6px); }3119  40%      { transform: translateX(6px); }3120  60%      { transform: translateX(-4px); }3121  80%      { transform: translateX(4px); }3122}31233124@keyframes pip-pulse {3125  0% { transform: scale(1); }3126  40% { transform: scale(2.2); }3127  100% { transform: scale(1); }3128}312931303131/* ── Password generator ── */3132.peach-pwgen-body {3133  flex: 1; overflow-y: auto;3134  display: flex; flex-direction: column;3135}3136.peach-policy-badge {3137  display: flex; align-items: center;3138  padding: 6px 20px 0;3139  font-size: 0.625rem; font-family: Inter, sans-serif;3140  color: var(--peach-t2); letter-spacing: 0.04em;3141}3142.peach-pwgen-display {3143  padding: 14px 20px 12px;3144  border-bottom: 1px solid var(--peach-t3);3145  display: flex; align-items: flex-start; gap: 10px;3146}3147.peach-pwgen-display-row {3148  display: flex;3149  align-items: flex-start;3150  gap: 8px;3151  padding-bottom: 8px;3152  border-bottom: 1px solid var(--peach-t3);3153}3154.peach-pwgen-output {3155  flex: 1; min-width: 0; margin: 0;3156  font-family: "IBM Plex Mono", monospace;3157  font-size: 0.8125rem; color: var(--peach-t0);3158  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3159  white-space: normal;3160  padding: 10px 12px;3161  background: var(--peach-t4);3162  border-radius: 6px;3163  min-height: 36px;3164}3165.peach-pwgen-output-display {3166  flex: 1;3167  min-width: 0;3168  margin: 0;3169  font-family: var(--font-display);3170  font-style: italic;3171  font-weight: 300;3172  font-size: 32px;3173  line-height: 1.05;3174  color: var(--peach-t0);3175  word-break: break-all;3176  overflow-wrap: break-word;3177  white-space: normal;3178  letter-spacing: 0.02em;3179}3180.peach-pwgen-display-actions {3181  display: flex;3182  flex-direction: column;3183  gap: 4px;3184  flex-shrink: 0;3185  margin-top: 2px;3186}3187.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3188.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3189.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3190.peach-pwgen-len-num {3191  font-family: "IBM Plex Mono", monospace;3192  font-size: 0.75rem; color: var(--peach-accent);3193}3194.peach-pwgen-len-num--edit {3195  cursor: text;3196  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3197}3198.peach-pwgen-len-input {3199  font-family: "IBM Plex Mono", monospace;3200  font-size: 0.75rem;3201  color: var(--peach-accent);3202  background: transparent;3203  border: none;3204  border-bottom: 1px solid var(--peach-accent);3205  outline: none;3206  width: 32px;3207  text-align: right;3208  padding: 0;3209}3210.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3211.peach-pwgen-toggles { display: flex; flex-direction: column; }3212.peach-pwgen-charset-pills {3213  display: flex;3214  gap: 6px;3215  flex-wrap: wrap;3216}3217.peach-pwgen-pill {3218  padding: 4px 11px;3219  border-radius: 999px;3220  border: 1px solid var(--peach-t3);3221  background: transparent;3222  color: var(--peach-t2);3223  font-family: "IBM Plex Mono", monospace;3224  font-size: 0.5625rem;3225  letter-spacing: 0.08em;3226  cursor: pointer;3227  transition: all 150ms ease;3228}3229.peach-pwgen-pill.is-on {3230  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3231  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3232  color: var(--peach-accent);3233}3234.peach-pwgen-pill:not(.is-on):hover {3235  color: var(--peach-t1);3236  border-color: var(--peach-t2);3237}3238.peach-pwgen-use-btn {3239  width: 100%;3240  min-height: 34px;3241  border-radius: 8px;3242  margin-top: 2px;3243}3244.peach-generator-constraint-note {3245  font-family: 'IBM Plex Mono', monospace;3246  font-size: 10px;3247  color: var(--peach-t3);3248  letter-spacing: 0.04em;3249  margin: 0;3250  transition: opacity 200ms ease;3251}3252.peach-pwgen-toggle-row {3253  display: flex; align-items: center; justify-content: space-between;3254  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3255}3256.peach-pwgen-toggle-row:last-child { border-bottom: none; }3257.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }32583259.peach-screen-prelock {3260  z-index: 10;3261}32623263.prelock-form {3264  display: grid;3265  gap: 12px;3266}32673268/* Peach popup should not expose native scrollbars on internal panels. */3269.peach-settings-body,3270.peach-new-body,3271.peach-pwgen-body,3272.lock-screen,3273.peach-import-preview {3274  scrollbar-width: none;3275  -ms-overflow-style: none;3276  overscroll-behavior: contain;3277}3278.peach-settings-body::-webkit-scrollbar,3279.peach-new-body::-webkit-scrollbar,3280.peach-pwgen-body::-webkit-scrollbar,3281.lock-screen::-webkit-scrollbar,3282.peach-import-preview::-webkit-scrollbar {3283  width: 0;3284  height: 0;3285  display: none;3286}32873288.lock-screen {3289  height: 100%;3290  min-height: 100%;3291  overflow-y: auto;3292  padding: 18px 18px 16px;3293  gap: 14px;3294  grid-template-rows: auto auto auto 1fr auto;3295  align-content: stretch;3296  position: relative;3297  isolation: isolate;3298}3299.peach-screen.lock-screen--vault-stage {3300  display: flex;3301  flex-direction: column;3302  justify-content: flex-start;3303  gap: 18px;3304  padding: 20px 18px 18px;3305  overflow: hidden;3306}3307.peach-screen.lock-screen--vault-stage .peach-lock-panel {3308  margin-top: 0;3309}3310.lock-screen--onboarding {3311  display: flex;3312  flex-direction: column;3313  gap: 12px;3314  justify-content: flex-start;3315}33163317.lock-screen::before {3318  content: "";3319  position: absolute;3320  inset: 12px 18px auto auto;3321  width: 160px;3322  height: 160px;3323  border-radius: 999px;3324  background:3325    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%);3326  filter: blur(6px);3327  opacity: 0.7;3328  pointer-events: none;3329  z-index: 0;3330}33313332.peach-lock-rune-string {3333  flex: 1;3334  display: flex;3335  align-items: center;3336  justify-content: center;3337  gap: 6px;3338  font-family: PeachScript, monospace;3339  font-size: 0.8125rem;3340  letter-spacing: 0.05em;3341  pointer-events: none;3342  user-select: none;3343  position: relative;3344  z-index: 1;3345}33463347.peach-lock-rune-string span {3348  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3349  text-shadow:3350    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3351    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3352  transition: color 0.9s ease, text-shadow 0.9s ease;3353}33543355.peach-lock-rune-string span.is-glowing {3356  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3357  text-shadow:3358    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3359    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3360}33613362.lock-screen-header {3363  display: flex;3364  align-items: center;3365  justify-content: space-between;3366  position: relative;3367  z-index: 1;3368}33693370.lock-password-input.shake {3371  animation: peach-shake 300ms ease-in-out;3372}33733374.peach-hint-error {3375  color: rgba(220, 80, 60, 0.92);3376}33773378.peach-onboarding-headline {3379  margin: 0;3380  font-family: var(--font-display);3381  font-size: 35px;3382  line-height: 0.88;3383  font-style: italic;3384  font-weight: 400;3385  max-width: 252px;3386}33873388.peach-lock-copy {3389  display: grid;3390  gap: 8px;3391  position: relative;3392  z-index: 1;3393}33943395.peach-lock-copy--onboarding {3396  gap: 10px;3397}33983399.peach-lock-hero {3400  position: relative;3401  z-index: 1;3402  display: grid;3403  gap: 8px;3404  min-height: 0;3405  padding: 4px 2px 0;3406  border: none;3407  border-radius: 0;3408  background: transparent;3409  box-shadow: none;3410}3411.peach-lock-hero-art {3412  position: absolute;3413  right: -8px;3414  top: -6px;3415  width: 120px;3416  height: 120px;3417  display: flex;3418  align-items: center;3419  justify-content: center;3420  pointer-events: none;3421  opacity: 0.12;3422  filter: saturate(0.9);3423}3424.peach-lock-hero-mark {3425  width: 100%;3426  height: 100%;3427}3428/* Peach body stays brand-peach across every accent — we don't want a3429   green or blue peach when sage/sky is selected. Leaf + stem keep the3430   sage tint because a real peach has a sage leaf. */3431.peach-lock-hero-mark path:nth-child(2),3432.peach-lock-hero-mark path:nth-child(3) {3433  stroke: rgba(123, 144, 96, 0.88);3434  fill: rgba(123, 144, 96, 0.88);3435}3436.peach-lock-hero > *:not(.peach-lock-hero-art) {3437  position: relative;3438  z-index: 1;3439}34403441.peach-lock-eyebrow {3442  display: inline-flex;3443  align-items: center;3444  width: fit-content;3445  padding: 4px 9px;3446  border-radius: 999px;3447  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3448  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3449  color: var(--peach-t0);3450  font-family: "IBM Plex Mono", monospace;3451  font-size: 0.5rem;3452  letter-spacing: 0.18em;3453  text-transform: uppercase;3454}34553456.peach-lock-label-row {3457  display: flex;3458  align-items: center;3459  justify-content: space-between;3460  margin-bottom: 0;3461}34623463.peach-lock-reveal-btn {3464  display: inline-flex;3465  align-items: center;3466  gap: 4px;3467  background: none;3468  border: none;3469  cursor: pointer;3470  font-family: "IBM Plex Mono", monospace;3471  font-size: 0.5625rem;3472  letter-spacing: 0.06em;3473  color: var(--peach-t2);3474  padding: 2px 0;3475  transition: color 150ms ease;3476}34773478.peach-lock-reveal-btn:hover {3479  color: var(--peach-t1);3480}34813482.peach-lock-warning {3483  color: rgba(220, 80, 60, 0.85) !important;3484  line-height: 1.5;3485}34863487.peach-onboarding-cards {3488  display: grid;3489  gap: 8px;3490  position: relative;3491  z-index: 1;3492}34933494.peach-lock-panel {3495  position: relative;3496  z-index: 1;3497  display: grid;3498  gap: 9px;3499  padding: 14px 16px 15px;3500  border-radius: 18px;3501  border: 1px solid var(--peach-t3);3502  background:3503    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3504  box-shadow:3505    inset 0 1px 0 rgba(240, 232, 216, 0.04),3506    0 12px 28px rgba(0, 0, 0, 0.12);3507}35083509/* Glass surface — lock panel and settings groups */3510.peach-glass {3511  background: rgba(26, 20, 16, 0.65);3512  border: 1px solid rgba(255, 255, 255, 0.08);3513  border-radius: 12px;3514  backdrop-filter: blur(12px) saturate(1.4);3515  -webkit-backdrop-filter: blur(12px) saturate(1.4);3516}35173518@supports not (backdrop-filter: blur(1px)) {3519  .peach-glass {3520    background: rgba(26, 20, 16, 0.92);3521    border: 1px solid rgba(255, 255, 255, 0.10);3522    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3523  }3524}35253526.light .peach-glass,3527[data-theme="light"] .peach-glass {3528  background: rgba(206, 196, 186, 0.70);3529  border: 1px solid rgba(26, 18, 8, 0.10);3530  backdrop-filter: blur(12px) saturate(1.2);3531  -webkit-backdrop-filter: blur(12px) saturate(1.2);3532}35333534@supports not (backdrop-filter: blur(1px)) {3535  .light .peach-glass,3536  [data-theme="light"] .peach-glass {3537    background: rgba(206, 196, 186, 0.95);3538    border: 1px solid rgba(26, 18, 8, 0.12);3539  }3540}35413542/* Lock panel keeps its own border-radius over the generic glass token */3543.peach-lock-panel.peach-glass {3544  border-radius: 18px;3545  background: rgba(26, 20, 16, 0.65);3546  border: 1px solid rgba(255, 255, 255, 0.08);3547  box-shadow:3548    inset 0 1px 0 rgba(255, 255, 255, 0.05),3549    0 12px 28px rgba(0, 0, 0, 0.3);3550}35513552.light .peach-lock-panel.peach-glass,3553[data-theme="light"] .peach-lock-panel.peach-glass {3554  background: rgba(196, 188, 181, 0.78);3555  border: 1px solid rgba(26, 18, 8, 0.12);3556  box-shadow:3557    inset 0 1px 0 rgba(255, 255, 255, 0.4),3558    0 8px 24px rgba(80, 56, 32, 0.20);3559}35603561@supports not (backdrop-filter: blur(1px)) {3562  .peach-lock-panel.peach-glass {3563    background: rgba(26, 20, 16, 0.92);3564    box-shadow:3565      inset 0 1px 0 rgba(255, 255, 255, 0.05),3566      0 12px 28px rgba(0, 0, 0, 0.4);3567  }3568  .light .peach-lock-panel.peach-glass,3569  [data-theme="light"] .peach-lock-panel.peach-glass {3570    background: rgba(196, 188, 181, 0.97);3571  }3572}35733574.peach-lock-panel--secondary {3575  gap: 12px;3576}35773578.peach-lock-panel-header {3579  display: flex;3580  align-items: baseline;3581  justify-content: space-between;3582  gap: 12px;3583}35843585.peach-lock-option-grid {3586  display: grid;3587  gap: 10px;3588}35893590.peach-lock-option {3591  width: 100%;3592  display: grid;3593  gap: 6px;3594  padding: 14px 15px;3595  border-radius: 16px;3596  border: 1px solid rgba(240, 232, 216, 0.08);3597  background: rgba(240, 232, 216, 0.02);3598  color: var(--peach-t0);3599  text-align: left;3600  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3601}36023603.peach-lock-option:hover {3604  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3605  background: rgba(240, 232, 216, 0.04);3606  transform: translateY(-1px);3607}36083609.peach-lock-option-title {3610  font-size: 0.75rem;3611  color: var(--peach-t0);3612}36133614.peach-lock-option-copy {3615  font-size: 0.6875rem;3616  line-height: 1.55;3617  color: var(--peach-t1);3618}36193620.peach-onboarding-stack {3621  margin-top: 2px;3622}3623.peach-lock-panel-footer {3624  display: grid;3625  gap: 6px;3626  margin-top: 2px;3627  padding-top: 10px;3628  border-top: 1px solid rgba(240, 232, 216, 0.06);3629}36303631/* ── Restore tab view ─────────────────────────────────────────────────────3632   Tab-based restore screen replacing the old three-card picker. */36333634.peach-restore-tabview {3635  overflow: hidden;3636}36373638.peach-restore-tabcard {3639  flex: 1;3640  display: flex;3641  flex-direction: column;3642  gap: 0;3643  padding: 0;3644  overflow: hidden;3645  cursor: default;3646  user-select: none;3647  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3648}36493650/* ── Tab selector ─────────────────────────────────────────────────────── */36513652.peach-restore-tabs {3653  display: flex;3654  justify-content: space-around;3655  padding: 14px 10px 10px;3656  border-bottom: 1px solid var(--peach-t3);3657  gap: 2px;3658  overflow: hidden;3659  scrollbar-width: none;3660}3661.peach-restore-tabs::-webkit-scrollbar { display: none; }36623663.peach-restore-tab {3664  background: none;3665  border: none;3666  cursor: pointer;3667  padding: 3px 2px;3668  font-family: 'Cormorant Garamond', Georgia, serif;3669  font-style: italic;3670  font-size: 11px;3671  color: var(--peach-t2);3672  transition: color 150ms ease, text-shadow 150ms ease;3673  flex: 1;3674  min-width: 0;3675  text-align: center;3676  white-space: nowrap;3677  overflow: hidden;3678  text-overflow: ellipsis;3679}3680.peach-restore-tab:hover {3681  color: var(--peach-accent);3682  text-shadow:3683    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3684    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3685}3686.peach-restore-tab.is-active {3687  color: var(--peach-accent);3688  text-shadow:3689    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3690    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3691}36923693/* ── Content area ─────────────────────────────────────────────────────── */36943695.peach-restore-content {3696  padding: 16px 16px 14px;3697  display: flex;3698  flex-direction: column;3699  gap: 8px;3700  overflow: hidden;3701  scrollbar-width: none;3702  flex: 1;3703}3704.peach-restore-content::-webkit-scrollbar { display: none; }3705.peach-restore-content > * {3706  overflow: hidden;3707  scrollbar-width: none;3708}3709.peach-restore-content > *::-webkit-scrollbar { display: none; }37103711/* ── Shared tab inner layout ──────────────────────────────────────────── */37123713.peach-rt-symbols,3714.peach-rt-csv,3715.peach-rt-phone {3716  display: flex;3717  flex-direction: column;3718  gap: 8px;3719  overflow: hidden;3720}37213722.peach-rt-submit {3723  width: 100%;3724}37253726.peach-rt-error {3727  margin: 0;3728  font-size: 0.6875rem;3729  color: var(--peach-breach);3730  line-height: 1.4;3731}37323733/* ── PeachScript tab ──────────────────────────────────────────────────── */37343735.peach-restore-symbols-textarea {3736  font-family: 'PeachScript', monospace;3737  font-size: 13px;3738  line-height: 1.9;3739  letter-spacing: 0.1em;3740  word-break: break-all;3741  resize: none;3742  width: 100%;3743  min-height: 56px;3744  max-height: 72px;3745  overflow: hidden;3746  scrollbar-width: none;3747  -ms-overflow-style: none;3748  box-sizing: border-box;3749  padding: 6px 8px;3750  border-radius: 8px;3751  border: 1px solid var(--peach-t3);3752  background: rgba(240, 232, 216, 0.03);3753  color: var(--peach-t0);3754}3755.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3756.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }37573758.peach-restore-symbols-pass {3759  width: 100%;3760  box-sizing: border-box;3761  padding: 7px 10px;3762  border-radius: 8px;3763  border: 1px solid var(--peach-t3);3764  background: rgba(240, 232, 216, 0.03);3765  color: var(--peach-t0);3766  font-size: 0.8125rem;3767}3768.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }3769.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }37703771.peach-rt-divider {3772  text-align: center;3773  font-size: 0.6875rem;3774  color: var(--peach-t2);3775  font-style: italic;3776}37773778.peach-rt-file-label {3779  width: 100%;3780  justify-content: center;3781}37823783.peach-rt-anim-canvas {3784  width: 100%;3785  height: 180px;3786  border-radius: 10px;3787  overflow: hidden;3788  display: block;3789}37903791/* ── CSV tab ──────────────────────────────────────────────────────────── */37923793.peach-rt-csv-sources {3794  margin: 0;3795  font-size: 0.6875rem;3796  color: var(--peach-t2);3797  line-height: 1.5;3798  text-align: center;3799}38003801.peach-rt-csv-warning {3802  margin: 0;3803  font-family: "IBM Plex Mono", monospace;3804  font-size: 0.5625rem;3805  letter-spacing: 0.12em;3806  color: var(--peach-breach);3807  text-align: center;3808}38093810/* ── From Phone tab ───────────────────────────────────────────────────── */38113812.peach-rt-phone-code {3813  margin: 0;3814  text-align: center;3815  font-family: "IBM Plex Mono", monospace;3816  font-size: 22px;3817  letter-spacing: 0.18em;3818  color: var(--peach-t0);3819}38203821.peach-rt-phone-qr {3822  display: block;3823  width: 96px;3824  height: 96px;3825  margin: 0 auto;3826  border-radius: 6px;3827  image-rendering: pixelated;3828  overflow: hidden;3829}38303831.peach-rt-phone-hint {3832  margin: 0;3833  font-size: 0.6875rem;3834  color: var(--peach-t2);3835  line-height: 1.55;3836  text-align: center;3837}38383839/* ── Intro popup ──────────────────────────────────────────────────────── */38403841.peach-restore-intro-overlay {3842  position: absolute;3843  inset: 0;3844  z-index: 100;3845  display: flex;3846  align-items: center;3847  justify-content: center;3848  padding: 20px;3849  background: rgba(12, 10, 6, 0.7);3850  backdrop-filter: blur(4px);3851  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;3852}38533854.peach-restore-intro-card {3855  width: 100%;3856  display: flex;3857  flex-direction: column;3858  gap: 12px;3859  padding: 22px 20px 20px;3860  border-radius: 16px;3861  border: 1px solid var(--peach-t3);3862  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));3863  backdrop-filter: blur(4px);3864  -webkit-backdrop-filter: blur(4px);3865  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);3866}38673868.peach-restore-intro-headline {3869  margin: 0;3870  font-family: var(--font-display);3871  font-style: italic;3872  font-size: 20px;3873  font-weight: 400;3874  color: var(--peach-t0);3875}38763877.peach-restore-intro-body {3878  display: flex;3879  flex-direction: column;3880  gap: 8px;3881}3882.peach-restore-intro-body p {3883  margin: 0;3884  font-size: 0.75rem;3885  color: var(--peach-t1);3886  line-height: 1.5;3887}38883889.peach-restore-intro-btn {3890  width: 100%;3891  margin-top: 4px;3892}38933894/* Snapshot restore panel */3895.peach-snapshot-panel {3896  gap: 10px;3897  overflow-y: auto;3898  max-height: 340px;3899}3900.peach-snapshot-list {3901  display: flex;3902  flex-direction: column;3903  gap: 4px;3904}3905.peach-snapshot-row {3906  display: flex;3907  align-items: center;3908  justify-content: space-between;3909  width: 100%;3910  padding: 8px 10px;3911  border-radius: 8px;3912  border: 1px solid rgba(240, 232, 216, 0.07);3913  background: transparent;3914  cursor: pointer;3915  transition: border-color 120ms, background 120ms;3916  text-align: left;3917  gap: 8px;3918}3919.peach-snapshot-row:hover {3920  border-color: rgba(240, 232, 216, 0.14);3921  background: rgba(240, 232, 216, 0.03);3922}3923.peach-snapshot-row.is-selected {3924  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3925  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);3926}3927.peach-snapshot-time {3928  font-size: 11.5px;3929  color: var(--peach-t0);3930  flex: 1;3931}3932.peach-snapshot-count {3933  font-family: "IBM Plex Mono", monospace;3934  font-size: 0.625rem;3935  color: var(--peach-t2);3936  flex-shrink: 0;3937}3938.peach-snapshot-confirm {3939  display: flex;3940  flex-direction: column;3941  gap: 8px;3942  padding-top: 10px;3943  border-top: 1px solid rgba(240, 232, 216, 0.06);3944}3945.peach-snapshot-warning {3946  display: flex;3947  align-items: flex-start;3948  gap: 6px;3949  font-size: 10.5px;3950  color: rgba(220, 80, 60, 0.85);3951  line-height: 1.55;3952}3953.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }3954.peach-snapshot-confirm-row {3955  display: flex;3956  gap: 6px;3957  align-items: center;3958}3959.peach-snapshot-restore-btn {3960  width: 100%;3961}3962.peach-lock-hero--unlock .peach-lock-hero-art {3963  width: 112px;3964  height: 112px;3965  right: 0;3966  top: 2px;3967  opacity: 0.1;3968}39693970.peach-card {3971  border: 1px solid var(--peach-t3);3972  border-radius: 18px;3973  background:3974    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);3975  box-shadow:3976    inset 0 0 0 1px var(--peach-border-accent),3977    inset 0 1px 0 rgba(240, 232, 216, 0.04),3978    0 12px 32px rgba(0, 0, 0, 0.14);3979  overflow: hidden;3980}39813982.peach-card-active {3983  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);3984  box-shadow:3985    inset 0 1px 0 rgba(240, 232, 216, 0.05),3986    0 16px 38px rgba(0, 0, 0, 0.18),3987    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);3988}39893990.peach-card-disabled {3991  opacity: 0.72;3992}39933994.peach-card-header {3995  width: 100%;3996  padding: 13px 16px 11px;3997  background: transparent;3998  color: var(--peach-t0);3999  display: flex;4000  justify-content: space-between;4001  align-items: center;4002  text-align: left;4003  font-size: 0.75rem;4004}40054006.peach-card-body {4007  padding: 0 16px 16px;4008  display: grid;4009  gap: 9px;4010}40114012.peach-card-tag {4013  color: var(--peach-t2);4014  font-family: "IBM Plex Mono", monospace;4015  font-size: 0.5625rem;4016  letter-spacing: 0.12em;4017  text-transform: uppercase;4018}40194020.peach-empty-copy {4021  display: grid;4022  gap: 6px;4023  color: var(--peach-t1);4024  font-size: 0.8125rem;4025}40264027.peach-lock-submit {4028  width: 100%;4029  box-shadow:4030    0 1px 0 rgba(255,255,255,0.10) inset,4031    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4032    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4033    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4034}40354036.peach-lock-secondary {4037  width: 100%;4038  border-color: var(--peach-t3);4039  background: rgba(240, 232, 216, 0.02);4040}40414042.peach-lock-secondary:hover {4043  background: rgba(240, 232, 216, 0.04);4044}40454046.peach-lock-note {4047  max-width: none;4048  line-height: 1.55;4049  margin: 0;4050}40514052.peach-overlay-action {4053  font-size: 0.625rem;4054  padding: 4px 8px;4055  letter-spacing: 0.06em;4056  min-width: 44px;4057  text-align: center;4058}40594060.peach-overlay-spacer {4061  width: 32px;4062}40634064.peach-inline-action {4065  flex-shrink: 0;4066  font-size: 0.5625rem;4067  letter-spacing: 0.1em;4068  text-transform: uppercase;4069  padding: 4px 7px;4070}4071.peach-password-toggle-btn {4072  display: inline-flex;4073  align-items: center;4074  justify-content: center;4075  min-width: 30px;4076  min-height: 26px;4077  padding: 0 7px;4078  border: 1px solid var(--peach-t3);4079  border-radius: 999px;4080  background: rgba(240, 232, 216, 0.04);4081  color: var(--peach-t2);4082  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4083}4084.peach-password-toggle-btn:hover {4085  border-color: var(--peach-t2);4086  color: var(--peach-t0);4087  background: rgba(240, 232, 216, 0.06);4088}40894090.peach-new-textarea {4091  width: 100%;4092  min-height: 88px;4093  resize: vertical;4094  border: 0;4095  outline: none;4096  background: transparent;4097  color: var(--peach-t1);4098  font-family: "IBM Plex Mono", monospace;4099  font-size: 0.75rem;4100  line-height: 1.65;4101  caret-color: var(--peach-accent);4102}41034104.peach-new-textarea::placeholder {4105  color: var(--peach-t2);4106  opacity: 0.7;4107}41084109.peach-settings-actions {4110  display: grid;4111  gap: 8px;4112}41134114.peach-sync-section-label {4115  font-size: 0.6875rem;4116  color: var(--peach-t2);4117  text-transform: uppercase;4118  letter-spacing: 0.05em;4119}41204121.peach-sync-network-note {4122  margin: 0 0 6px;4123  font-size: 0.75rem;4124  color: var(--peach-t2);4125  line-height: 1.4;4126}41274128.peach-settings-row--tappable {4129  background: none;4130  border: none;4131  width: 100%;4132  text-align: left;4133  cursor: pointer;4134  color: var(--peach-t1);4135  font-size: 0.8125rem;4136}4137.peach-settings-row--tappable:hover {4138  color: var(--peach-t0);4139}41404141.peach-sync-pro-hint {4142  display: flex;4143  flex-direction: column;4144  align-items: flex-start;4145  gap: 8px;4146  padding: 12px 0 4px;4147}41484149.peach-sync-device-row {4150  display: flex;4151  justify-content: space-between;4152  align-items: center;4153  padding: 6px 0;4154  border-bottom: 1px solid var(--peach-t3);4155}41564157.peach-sync-device-info {4158  display: flex;4159  flex-direction: column;4160  gap: 2px;4161}41624163.peach-sync-device-name {4164  font-size: 0.8125rem;4165  color: var(--peach-t0);4166}41674168.peach-sync-device-meta {4169  font-size: 0.6875rem;4170  color: var(--peach-t2);4171}41724173.peach-sync-status-dot {4174  display: inline-block;4175  width: 8px;4176  height: 8px;4177  border-radius: 50%;4178  vertical-align: middle;4179}41804181.peach-sync-remove-btn {4182  color: var(--peach-breach);4183}41844185.peach-sync-advanced-row {4186  display: flex;4187  justify-content: space-between;4188  align-items: center;4189  padding: 6px 0;4190  gap: 12px;4191}41924193.peach-sync-advanced-info {4194  display: flex;4195  flex-direction: column;4196  gap: 2px;4197  flex: 1;4198}41994200.peach-sync-advanced-name {4201  font-size: 0.8125rem;4202  color: var(--peach-t0);4203}42044205.peach-sync-reset-confirm {4206  display: flex;4207  flex-direction: column;4208  gap: 8px;4209  padding: 10px;4210  border: 1px solid var(--peach-breach);4211  border-radius: 10px;4212  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4213}42144215.peach-sync-reset-confirm-headline {4216  font-size: 0.8125rem;4217  font-weight: 600;4218  color: var(--peach-t0);4219  margin: 0;4220}42214222.peach-sync-reset-confirm-body {4223  font-size: 0.75rem;4224  color: var(--peach-t1);4225  margin: 0;4226  line-height: 1.4;4227}42284229.peach-btn--danger {4230  background: var(--peach-breach);4231  color: #fff;4232  border-color: var(--peach-breach);4233}4234.peach-btn--danger:hover:not(:disabled) {4235  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4236}4237.peach-btn--danger:disabled {4238  opacity: 0.55;4239  cursor: not-allowed;4240}42414242.peach-sync-hero-icon {4243  color: var(--peach-t1);4244  opacity: 0.85;4245}42464247.peach-import-preview {4248  margin-bottom: 12px;4249  max-height: 152px;4250  overflow-y: auto;4251  border: 1px solid var(--peach-t3);4252  border-radius: 10px;4253  padding: 8px 10px;4254  display: grid;4255  gap: 8px;4256  background: rgba(240, 232, 216, 0.02);4257}42584259.peach-import-preview-row {4260  display: flex;4261  justify-content: space-between;4262  gap: 10px;4263  font-size: 0.6875rem;4264  color: var(--peach-t1);4265}42664267.peach-import-preview-title {4268  color: var(--peach-t0);4269  flex: 1;4270  min-width: 0;4271  overflow: hidden;4272  text-overflow: ellipsis;4273  white-space: nowrap;4274}42754276.peach-import-preview-meta {4277  color: var(--peach-t2);4278  flex-shrink: 0;4279  max-width: 42%;4280  overflow: hidden;4281  text-overflow: ellipsis;4282  white-space: nowrap;4283}42844285.peach-import-preview-more {4286  color: var(--peach-t2);4287  font-size: 0.625rem;4288}42894290.peach-restore-copy {4291  margin: 0;4292  color: var(--peach-t1);4293  font-size: 0.6875rem;4294  line-height: 1.6;4295}42964297.peach-restore-warning {4298  padding: 10px 12px;4299  border-radius: 12px;4300  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4301  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4302  color: var(--peach-t0);4303  font-size: 0.6875rem;4304  line-height: 1.55;4305}43064307.peach-provider-chips {4308  display: flex;4309  flex-wrap: wrap;4310  gap: 6px;4311}43124313.peach-provider-chip {4314  display: inline-flex;4315  align-items: center;4316  padding: 5px 8px;4317  border-radius: 999px;4318  border: 1px solid var(--peach-t3);4319  background: rgba(240, 232, 216, 0.02);4320  color: var(--peach-t1);4321  font-family: "IBM Plex Mono", monospace;4322  font-size: 0.5rem;4323  letter-spacing: 0.08em;4324  text-transform: uppercase;4325}43264327.peach-restore-file,4328.peach-restore-input {4329  width: 100%;4330  border-radius: 10px;4331  border: 1px solid var(--peach-t3);4332  background: var(--peach-s2);4333  color: var(--peach-t0);4334  font-size: 0.75rem;4335}43364337.peach-restore-file {4338  padding: 9px 10px;4339}43404341.peach-restore-file::file-selector-button {4342  margin-right: 10px;4343  padding: 7px 10px;4344  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4345  border-radius: 999px;4346  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4347  color: var(--peach-t0);4348  font-size: 0.625rem;4349  letter-spacing: 0.08em;4350  text-transform: uppercase;4351  cursor: pointer;4352}43534354.peach-restore-input {4355  padding: 10px 12px;4356}43574358.peach-auth-grid {4359  display: grid;4360  gap: 10px;4361}43624363.peach-import-summary {4364  color: var(--peach-t1);4365  font-size: 0.75rem;4366  line-height: 1.6;4367  margin-bottom: 12px;4368}43694370.peach-restore-error {4371  color: rgba(220, 80, 60, 0.95);4372  font-size: 0.75rem;4373  line-height: 1.55;4374}43754376.peach-passkey-card {4377  max-width: 400px;4378  margin: auto 16px;4379  align-self: center;4380  width: calc(100% - 32px);4381}43824383/* Center the approval card vertically inside the overlay-view (which sets4384 * flex-direction: column without justify-content). Without this, the card4385 * sits at the top with a tall empty band below — looks unfinished on the4386 * 320px popup. */4387.peach-overlay-view:has(.peach-passkey-card) {4388  justify-content: center;4389}43904391.peach-pro-badge {4392  padding: 2px 6px;4393  border-radius: 999px;4394  font-family: var(--font-ui);4395  font-size: 0.625rem;4396  letter-spacing: 0.08em;4397  text-transform: uppercase;4398  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4399  color: var(--peach-accent);4400}44014402/* ── Shortcuts rebind table ─────────────────────────────────── */4403.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4404.peach-shortcut-row {4405  display: flex;4406  align-items: center;4407  gap: 10px;4408  padding: 6px 0;4409}4410.peach-shortcut-row-label {4411  flex: 1;4412  font-size: 0.75rem;4413  color: var(--peach-t0);4414}4415.peach-shortcut-chip {4416  min-width: 64px;4417  padding: 4px 10px;4418  border-radius: 6px;4419  border: 1px solid var(--peach-t3);4420  background: var(--peach-input-bg, var(--surface-card));4421  color: var(--peach-t0);4422  font-family: var(--font-mono);4423  font-size: 0.6875rem;4424  letter-spacing: 0.04em;4425  cursor: pointer;4426  text-align: center;4427  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4428}4429.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4430.peach-shortcut-chip.is-custom {4431  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4432  color: var(--peach-accent);4433}4434.peach-shortcut-chip.is-capturing {4435  border-color: var(--peach-accent);4436  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4437  color: var(--peach-accent);4438  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4439}4440@keyframes peach-shortcut-capture-pulse {4441  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4442  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4443}4444.peach-shortcut-reset {4445  background: transparent;4446  border: none;4447  cursor: pointer;4448  color: var(--peach-t2);4449  padding: 4px 6px;4450  border-radius: 5px;4451  font-size: 0.875rem;4452  line-height: 1;4453  transition: color 120ms ease, background 120ms ease;4454}4455.peach-shortcut-reset:hover {4456  color: var(--peach-t0);4457  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4458}4459.peach-shortcuts-conflict {4460  margin: 4px 0 0;4461  padding: 8px 10px;4462  border-radius: 7px;4463  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4464  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4465  font-family: var(--font-mono);4466  font-size: 0.6875rem;4467  color: var(--peach-t0);4468}44694470/* ── Help dialog overlay (? to open) ────────────────────────── */4471.peach-shortcuts-help-backdrop {4472  position: fixed;4473  inset: 0;4474  background: rgba(0, 0, 0, 0.55);4475  backdrop-filter: blur(2px);4476  display: flex;4477  align-items: center;4478  justify-content: center;4479  z-index: 1000;4480  animation: peach-help-fade-in 140ms ease forwards;4481}4482@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4483.peach-shortcuts-help-card {4484  width: min(320px, 92vw);4485  max-height: 80vh;4486  overflow-y: auto;4487  border-radius: 14px;4488  border: 1px solid var(--peach-t3);4489  background: var(--peach-bg);4490  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4491  padding: 16px 18px 18px;4492  display: flex;4493  flex-direction: column;4494  gap: 12px;4495}4496.peach-shortcuts-help-head {4497  display: flex; align-items: center; justify-content: space-between;4498}4499.peach-shortcuts-help-head h3 {4500  margin: 0;4501  font-family: var(--font-display);4502  font-style: italic;4503  font-weight: 400;4504  font-size: 22px;4505  color: var(--peach-t0);4506}4507.peach-shortcuts-help-close {4508  background: transparent;4509  border: none;4510  color: var(--peach-t2);4511  cursor: pointer;4512  font-size: 0.875rem;4513  padding: 4px 8px;4514  border-radius: 5px;4515}4516.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4517.peach-shortcuts-help-body ul {4518  list-style: none; padding: 0; margin: 4px 0 12px;4519  display: grid; gap: 8px;4520}4521.peach-shortcuts-help-body li {4522  display: flex; align-items: center; justify-content: space-between; gap: 12px;4523  font-size: 0.75rem; color: var(--peach-t0);4524}4525.peach-shortcuts-help-body kbd {4526  font-family: var(--font-mono);4527  font-size: 0.6875rem;4528  padding: 3px 8px;4529  border-radius: 6px;4530  background: var(--surface-card);4531  border: 1px solid var(--peach-t3);4532  color: var(--peach-accent);4533  letter-spacing: 0.04em;4534}45354536/* ── Pro promo on Account screen ────────────────────────────── */4537.peach-pro-promo {4538  position: relative;4539  border-radius: 14px;4540  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4541  background:4542    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4543    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4544    var(--surface-card);4545  overflow: hidden;4546  margin-bottom: 14px;4547}4548.peach-pro-promo-glow {4549  position: absolute;4550  inset: -40% -20% auto auto;4551  width: 220px; height: 220px;4552  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4553  pointer-events: none;4554  filter: blur(8px);4555}4556.peach-pro-promo-inner {4557  position: relative;4558  padding: 18px 18px 16px;4559}4560.peach-pro-promo-title {4561  font-family: var(--font-display);4562  font-style: italic;4563  font-weight: 400;4564  font-size: 28px;4565  line-height: 1;4566  letter-spacing: -0.005em;4567  color: var(--peach-t0);4568  margin: 0 0 4px;4569}4570.peach-pro-promo-tagline {4571  font-family: var(--font-mono);4572  font-size: 0.625rem;4573  letter-spacing: 0.06em;4574  color: var(--peach-t2);4575  margin: 0 0 14px;4576}4577.peach-pro-promo-list {4578  list-style: none;4579  margin: 0 0 16px;4580  padding: 0;4581  display: grid;4582  gap: 9px;4583}4584.peach-pro-promo-list li {4585  display: flex;4586  align-items: flex-start;4587  gap: 9px;4588  font-size: 0.75rem;4589  color: var(--peach-t1);4590  line-height: 1.4;4591}4592.peach-pro-promo-list svg {4593  width: 14px;4594  height: 14px;4595  flex-shrink: 0;4596  color: var(--peach-accent);4597  margin-top: 2px;4598}4599.peach-pro-promo-list span {4600  color: var(--peach-t0);4601}4602.peach-pro-promo-cta {4603  width: 100%;4604  background: var(--peach-accent);4605  color: #fff;4606  border: none;4607  padding: 9px 12px;4608  border-radius: 9px;4609  font-size: 0.75rem;4610  font-weight: 500;4611  font-family: var(--font-ui);4612  letter-spacing: 0.02em;4613  text-decoration: none;4614  display: inline-flex;4615  align-items: center;4616  justify-content: center;4617  cursor: pointer;4618  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4619  box-shadow: 0 2px 16px var(--peach-glow);4620}4621.peach-pro-promo-cta:hover {4622  filter: brightness(1.07);4623  box-shadow: 0 4px 24px var(--peach-glow);4624  transform: translateY(-1px);4625}4626.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }46274628.peach-pro-or-divider {4629  display: flex;4630  align-items: center;4631  gap: 10px;4632  margin: 4px 0 12px;4633  font-family: var(--font-mono);4634  font-size: 0.625rem;4635  letter-spacing: 0.06em;4636  color: var(--peach-t2);4637  text-transform: uppercase;4638}4639.peach-pro-or-divider::before,4640.peach-pro-or-divider::after {4641  content: "";4642  flex: 1;4643  height: 1px;4644  background: var(--peach-t3);4645}46464647.peach-loading {4648  position: absolute;4649  inset: 0;4650  display: flex;4651  align-items: center;4652  justify-content: center;4653  background: var(--bg);4654  animation: peach-loading-pulse 1.2s ease-in-out infinite;4655}46564657@keyframes peach-loading-pulse {4658  0%, 100% { opacity: 0.6; }4659  50% { opacity: 1; }4660}46614662/* ── Health Dashboard ─────────────────────────────────────────────────── */4663.peach-health-body {4664  flex: 1;4665  overflow-y: auto;4666  display: flex;4667  flex-direction: column;4668  /* Hide the platform scrollbar — every other scrollable surface in the4669   * popup hides it; the Health view was the one outlier and it ruined the4670   * polish. Behavior unchanged, just no rail rendered. */4671  scrollbar-width: none;4672  -ms-overflow-style: none;4673}4674.peach-health-body::-webkit-scrollbar { display: none; }46754676/* Loading screen for the Vault Health view. The advanced report computation4677 * can run for a few seconds on a large vault — without a clear loading4678 * screen the surface looked broken (the entry view bleeds through the4679 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4680.peach-health-loading-screen {4681  flex: 1;4682  display: flex;4683  flex-direction: column;4684  align-items: center;4685  justify-content: center;4686  gap: 14px;4687  padding: 32px 28px;4688  text-align: center;4689}46904691.peach-health-loading-glyph {4692  width: 48px;4693  height: 48px;4694  display: flex;4695  align-items: center;4696  justify-content: center;4697  border-radius: 14px;4698  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4699  color: var(--peach-accent);4700}47014702.peach-health-loading-title {4703  margin: 0;4704  font-family: var(--font-display);4705  font-style: italic;4706  font-weight: 300;4707  font-size: 19px;4708  line-height: 1.2;4709  color: var(--peach-t0);4710}47114712.peach-health-loading-copy {4713  margin: 0;4714  max-width: 240px;4715  font-size: 0.75rem;4716  line-height: 1.55;4717  color: var(--peach-t2);4718}47194720.peach-health-loading-track {4721  width: 200px;4722  height: 3px;4723  margin-top: 6px;4724  border-radius: 999px;4725  background: rgba(240, 232, 216, 0.06);4726  overflow: hidden;4727}47284729.peach-health-loading-fill {4730  width: 40%;4731  height: 100%;4732  border-radius: inherit;4733  background: linear-gradient(4734    90deg,4735    transparent 0%,4736    var(--peach-accent) 50%,4737    transparent 100%4738  );4739  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4740}47414742@keyframes peach-health-loading-sweep {4743  0%   { transform: translateX(-100%); }4744  100% { transform: translateX(350%); }4745}47464747[data-motion="reduce"] .peach-health-loading-fill,4748[data-motion="reduce"] .peach-health-loading-glyph svg path {4749  animation: none;4750}47514752.peach-health-summary {4753  padding: 10px 16px 6px;4754  font-family: "IBM Plex Mono", monospace;4755  font-size: 0.6875rem;4756}4757.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4758.peach-health-summary-ok { color: var(--peach-t2); }47594760.peach-health-check-row {4761  padding: 0 16px 10px;4762}4763.peach-health-check-btn {4764  width: 100%;4765  display: flex;4766  align-items: center;4767  justify-content: center;4768}47694770.peach-health-sections {4771  flex: 1;4772  display: flex;4773  flex-direction: column;4774}47754776.peach-health-section {4777  border-bottom: 1px solid var(--peach-t3);4778}47794780.peach-health-section-header {4781  width: 100%;4782  display: flex;4783  align-items: center;4784  justify-content: space-between;4785  padding: 9px 16px;4786  background: transparent;4787  cursor: pointer;4788  color: var(--peach-t0);4789}47904791.peach-health-section-title-row {4792  display: flex;4793  align-items: center;4794  gap: 8px;4795}47964797.peach-health-count-badge {4798  display: inline-flex;4799  align-items: center;4800  justify-content: center;4801  min-width: 20px;4802  height: 18px;4803  padding: 0 5px;4804  border-radius: 999px;4805  background: rgba(220,80,60,0.15);4806  border: 1px solid rgba(220,80,60,0.25);4807  font-family: "IBM Plex Mono", monospace;4808  font-size: 0.5625rem;4809  color: rgba(220,80,60,0.9);4810}48114812.peach-health-section-title {4813  font-family: "IBM Plex Mono", monospace;4814  font-size: 0.6875rem;4815  text-transform: uppercase;4816  letter-spacing: 0.1em;4817  color: var(--peach-t1);4818}48194820.peach-health-chevron {4821  color: var(--peach-t2);4822  transition: transform 200ms ease;4823  flex-shrink: 0;4824}4825.peach-health-chevron.is-expanded {4826  transform: rotate(180deg);4827}48284829.peach-health-section-body {4830  padding: 0 16px 10px;4831  display: flex;4832  flex-direction: column;4833  gap: 4px;4834}48354836.peach-health-row {4837  display: flex;4838  align-items: flex-start;4839  justify-content: space-between;4840  gap: 8px;4841  padding: 6px 8px;4842  border-radius: 8px;4843  background: rgba(240,232,216,0.02);4844}48454846.peach-health-row-info {4847  flex: 1;4848  min-width: 0;4849  display: flex;4850  flex-direction: column;4851  gap: 2px;4852}48534854.peach-health-row-name {4855  font-family: var(--font-display);4856  font-size: 0.9375rem;4857  font-style: italic;4858  font-weight: 400;4859  color: var(--peach-t0);4860  white-space: nowrap;4861  overflow: hidden;4862  text-overflow: ellipsis;4863}48644865.peach-health-row-meta {4866  font-family: "IBM Plex Mono", monospace;4867  font-size: 0.5625rem;4868  color: var(--peach-t2);4869  letter-spacing: 0.05em;4870}48714872.peach-health-fix-btn {4873  font-size: 0.5625rem;4874  letter-spacing: 0.08em;4875  text-transform: uppercase;4876  padding: 4px 7px;4877  flex-shrink: 0;4878  display: flex;4879  align-items: center;4880}48814882.peach-health-empty {4883  font-family: "IBM Plex Mono", monospace;4884  font-size: 0.625rem;4885  color: var(--peach-t2);4886  padding: 6px 0;4887}48884889.peach-health-loading {4890  font-family: "IBM Plex Mono", monospace;4891  font-size: 0.625rem;4892  color: var(--peach-t2);4893  padding: 6px 0;4894  display: flex;4895  align-items: center;4896  gap: 6px;4897}48984899.peach-health-loading::before {4900  content: "";4901  width: 10px;4902  height: 10px;4903  border: 1.5px solid var(--peach-t3);4904  border-top-color: var(--peach-accent);4905  border-radius: 50%;4906  animation: peach-spin 600ms linear infinite;4907}49084909@keyframes peach-spin {4910  to { transform: rotate(360deg); }4911}49124913.peach-spinner {4914  width: 32px;4915  height: 32px;4916  border: 2px solid var(--peach-s2);4917  border-top-color: var(--peach-accent);4918  border-radius: 50%;4919  margin: 0 auto 16px;4920  animation: peach-spin 0.8s linear infinite;4921}49224923.peach-progress-screen {4924  text-align: center;4925  padding: 32px 16px;4926}49274928.peach-progress-screen-title {4929  font-size: 0.8125rem;4930  color: var(--peach-t0);4931  margin-bottom: 16px;4932}49334934.peach-progress-screen-stage {4935  font-size: 0.6875rem;4936  color: var(--peach-t2);4937  min-height: 14px;4938}49394940.peach-progress-screen-note {4941  font-size: 0.625rem;4942  color: var(--peach-t2);4943  margin-top: 8px;4944}49454946.peach-pairing-body {4947  flex: 1;4948  overflow-y: auto;4949  display: flex;4950  flex-direction: column;4951}49524953.peach-pairing-content {4954  flex: 1;4955  display: flex;4956  flex-direction: column;4957  align-items: center;4958  justify-content: center;4959  gap: 14px;4960  padding: 28px 20px;4961  text-align: center;4962}49634964.peach-pairing-code-screen {4965  gap: 18px;4966}49674968.peach-pairing-headline {4969  font-family: var(--font-display);4970  font-style: italic;4971  font-weight: 300;4972  font-size: 28px;4973  color: var(--peach-t0);4974  margin: 0;4975  line-height: 1;4976}49774978.peach-pairing-subline {4979  font-size: 0.75rem;4980  color: var(--peach-t2);4981  max-width: 220px;4982  line-height: 1.5;4983  margin: 0;4984}49854986.peach-pairing-subline--center {4987  text-align: center;4988}49894990/* 6-digit pairing code — both display (.peach-pairing-code) and entry4991   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking4992   so the two modes feel like the same surface. */4993.peach-pairing-code {4994  font-family: "IBM Plex Mono", monospace;4995  font-size: 36px;4996  letter-spacing: 0.25em;4997  color: var(--peach-t0);4998  text-align: center;4999  padding: 24px 0;5000  text-shadow:5001    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),5002    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);5003  background: transparent;5004  border: 0;5005  cursor: default;5006  user-select: text;5007}50085009.peach-pairing-code--loading,5010.peach-pairing-code--expired {5011  font-size: 18px;5012  letter-spacing: 0.04em;5013  color: var(--peach-t2);5014  cursor: pointer;5015  text-shadow: none;5016}50175018.peach-pairing-qr-container {5019  display: flex;5020  flex-direction: column;5021  align-items: center;5022  gap: 10px;5023}50245025.peach-pairing-qr {5026  width: 240px;5027  height: 240px;5028  display: block;5029}50305031.peach-pairing-instruction {5032  font-size: 0.75rem;5033  color: var(--peach-t2);5034  text-align: center;5035  line-height: 1.5;5036  margin: 0;5037  max-width: 220px;5038}50395040.peach-pairing-expiry {5041  font-family: "IBM Plex Mono", monospace;5042  font-size: 13px;5043  letter-spacing: 0.06em;5044  color: var(--peach-t2);5045  margin: 0;5046}50475048.peach-pairing-regen {5049  font-size: 0.75rem;5050  color: var(--peach-accent);5051  background: transparent;5052  border: 0;5053  cursor: pointer;5054  padding: 4px 0;5055  text-decoration: underline;5056  text-underline-offset: 2px;5057}50585059.peach-pairing-code-input {5060  font-family: "IBM Plex Mono", monospace;5061  font-size: 36px;5062  letter-spacing: 0.25em;5063  color: var(--peach-t0);5064  background: transparent;5065  border: 0;5066  border-bottom: 1px solid var(--peach-t3);5067  outline: none;5068  text-align: center;5069  padding: 18px 0;5070  width: 220px;5071  caret-color: var(--peach-accent);5072  transition: border-color 160ms ease;5073}50745075.peach-pairing-code-input::placeholder {5076  color: var(--peach-t3);5077}50785079.peach-pairing-code-input:focus {5080  border-bottom-color: var(--peach-accent);5081}50825083.peach-pairing-toggle {5084  background: transparent;5085  border: 0;5086  color: var(--peach-t2);5087  font-size: 0.75rem;5088  padding: 8px 4px;5089  cursor: pointer;5090  transition: color 120ms ease;5091}50925093.peach-pairing-toggle:hover:not(:disabled) {5094  color: var(--peach-t1);5095}50965097.peach-pairing-toggle:disabled {5098  opacity: 0.5;5099  cursor: default;5100}51015102.peach-pairing-hint {5103  font-size: 0.6875rem;5104  color: var(--peach-t2);5105  margin: 0;5106  text-align: center;5107}51085109.peach-pairing-status {5110  display: flex;5111  align-items: center;5112  gap: 8px;5113  margin: 0;5114  font-size: 0.75rem;5115  color: var(--peach-t1);5116}51175118.peach-pairing-error {5119  margin: 0;5120  font-size: 0.6875rem;5121  color: var(--peach-breach);5122}51235124.peach-pairing-error--muted {5125  color: var(--peach-t2);5126}51275128.peach-pairing-spinner {5129  width: 12px;5130  height: 12px;5131  border: 1.5px solid var(--peach-t3);5132  border-top-color: var(--peach-accent);5133  border-radius: 50%;5134  animation: peach-spin 0.8s linear infinite;5135}51365137.peach-pairing-success-icon,5138.peach-pairing-error-icon,5139.peach-pairing-hero {5140  display: inline-flex;5141  align-items: center;5142  justify-content: center;5143}51445145/* Tag chips */5146.peach-tag-chip {5147  display: inline-flex;5148  align-items: center;5149  gap: 4px;5150  padding: 3px 8px;5151  border-radius: 999px;5152  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5153  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5154  color: var(--peach-t0);5155  font-family: "IBM Plex Mono", monospace;5156  font-size: 0.625rem;5157  letter-spacing: 0.04em;5158}51595160.peach-tag-chip-remove {5161  background: transparent;5162  border: none;5163  color: inherit;5164  opacity: 0.6;5165  cursor: pointer;5166  padding: 0;5167  font-size: 0.75rem;5168  line-height: 1;5169}51705171.peach-tag-chip-remove:hover {5172  opacity: 1;5173}51745175/* Tag input */5176.peach-tag-input-wrap {5177  border-bottom: 1px solid var(--peach-t3);5178}51795180.peach-tag-suggestions {5181  display: flex;5182  flex-wrap: wrap;5183  gap: 4px;5184  padding: 6px 0;5185}51865187.peach-tag-suggestion {5188  padding: 2px 8px;5189  border-radius: 999px;5190  border: 1px solid var(--peach-t3);5191  background: var(--peach-s2);5192  color: var(--peach-t1);5193  font-family: "IBM Plex Mono", monospace;5194  font-size: 0.625rem;5195  cursor: pointer;5196  transition: border-color 80ms ease, background 80ms ease;5197}51985199.peach-tag-suggestion:hover {5200  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5201  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5202}52035204/* Identity suggestions — shown below username/email inputs in new-entry form */5205@keyframes peach-suggest-in {5206  from { opacity: 0; transform: translateY(-4px); }5207  to   { opacity: 1; transform: none; }5208}52095210.peach-identity-suggestions {5211  display: flex;5212  flex-direction: column;5213  gap: 1px;5214  margin-top: 4px;5215  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5216}52175218.peach-identity-filter-row {5219  display: flex;5220  align-items: center;5221  gap: 4px;5222  padding: 2px 0 5px;5223}52245225.peach-identity-collapse-btn {5226  margin-left: auto;5227  background: transparent;5228  border: none;5229  cursor: pointer;5230  color: var(--peach-t3);5231  padding: 2px 4px;5232  display: flex;5233  align-items: center;5234  line-height: 0;5235  border-radius: 3px;5236  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5237}52385239.peach-identity-collapse-btn:hover {5240  color: var(--peach-t1);5241}52425243.peach-identity-collapse-btn.is-collapsed {5244  transform: rotate(-90deg);5245}52465247.peach-identity-rows {5248  display: grid;5249  grid-template-rows: 1fr;5250  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5251}52525253.peach-identity-rows.is-collapsed {5254  grid-template-rows: 0fr;5255}52565257.peach-identity-rows-inner {5258  overflow-y: auto;5259  min-height: 0;5260  max-height: 148px;5261  scrollbar-width: thin;5262  scrollbar-color: var(--peach-t3) transparent;5263  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5264  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5265}52665267.peach-identity-rows-inner::-webkit-scrollbar {5268  width: 4px;5269}52705271.peach-identity-rows-inner::-webkit-scrollbar-track {5272  background: transparent;5273}52745275.peach-identity-rows-inner::-webkit-scrollbar-thumb {5276  background: var(--peach-t3);5277  border-radius: 2px;5278}52795280.peach-identity-filter-pill {5281  padding: 2px 7px;5282  border-radius: 999px;5283  border: 1px solid var(--peach-t3);5284  background: transparent;5285  color: var(--peach-t2);5286  font-family: "IBM Plex Mono", monospace;5287  font-size: 0.6rem;5288  cursor: pointer;5289  transition: border-color 80ms, background 80ms, color 80ms;5290}52915292.peach-identity-filter-pill.is-on {5293  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5294  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5295  color: var(--peach-accent);5296}52975298.peach-identity-suggestion {5299  display: flex;5300  align-items: center;5301  gap: 6px;5302  width: 100%;5303  padding: 4px 6px;5304  border-radius: 5px;5305  border: none;5306  background: transparent;5307  cursor: pointer;5308  text-align: left;5309  transition: background 80ms ease;5310}53115312.peach-identity-suggestion:hover,5313.peach-identity-suggestion:focus {5314  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5315  outline: none;5316}53175318.peach-identity-suggestion-value {5319  font-family: "IBM Plex Mono", monospace;5320  font-size: 0.7rem;5321  color: var(--peach-t1);5322  overflow: hidden;5323  text-overflow: ellipsis;5324  white-space: nowrap;5325  flex: 1;5326  min-width: 0;5327}53285329.peach-identity-suggestion-type {5330  font-family: "IBM Plex Mono", monospace;5331  font-size: 0.55rem;5332  font-weight: 600;5333  flex-shrink: 0;5334  padding: 1px 4px;5335  border-radius: 3px;5336}53375338.peach-identity-suggestion-type--email {5339  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5340  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5341}53425343.peach-identity-suggestion-type--username {5344  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5345  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5346}53475348.peach-identity-suggestion-meta {5349  font-family: "IBM Plex Mono", monospace;5350  font-size: 0.6rem;5351  color: var(--peach-t3);5352  flex-shrink: 0;5353}53545355/* Tag filter strip */5356.peach-tag-filter-strip {5357  border-bottom: 1px solid var(--peach-t3);5358  flex-shrink: 0;5359}53605361.peach-tag-filter-chip {5362  display: inline-flex;5363  align-items: center;5364  padding: 4px 10px;5365  border-radius: 999px;5366  border: 1px solid var(--peach-t3);5367  background: transparent;5368  color: var(--peach-t2);5369  font-family: "IBM Plex Mono", monospace;5370  font-size: 0.5625rem;5371  letter-spacing: 0.06em;5372  text-transform: uppercase;5373  cursor: pointer;5374  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5375  white-space: nowrap;5376}53775378.peach-tag-filter-chip:hover {5379  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5380  color: var(--peach-t1);5381}53825383.peach-tag-filter-chip.is-selected {5384  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5385  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5386  color: var(--peach-t0);5387}53885389/* ─────────────────────────────────────────────────────────────────────────5390   v1.4.12 additions5391   ─────────────────────────────────────────────────────────────────────── */53925393/* Sort bar */5394.peach-sort-bar {5395  display: flex;5396  align-items: center;5397  gap: 4px;5398  padding: 5px 12px;5399  border-bottom: 1px solid var(--peach-t3);5400  flex-shrink: 0;5401  overflow-x: auto;5402  scrollbar-width: none;5403}54045405.peach-sort-btn {5406  padding: 2px 9px;5407  border-radius: 999px;5408  border: 1px solid transparent;5409  background: transparent;5410  color: var(--peach-t2);5411  font-family: "IBM Plex Mono", monospace;5412  font-size: 0.5625rem;5413  letter-spacing: 0.07em;5414  text-transform: uppercase;5415  cursor: pointer;5416  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5417  white-space: nowrap;5418}54195420.peach-sort-btn:hover {5421  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5422  color: var(--peach-t1);5423}54245425.peach-sort-btn.is-active {5426  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5427  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5428  color: var(--peach-t0);5429}54305431.peach-sort-domain-hint {5432  margin-left: auto;5433  font-family: "IBM Plex Mono", monospace;5434  font-size: 0.5625rem;5435  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5436  white-space: nowrap;5437  overflow: hidden;5438  text-overflow: ellipsis;5439  max-width: 110px;5440}54415442/* Tab-match badge on entry rows */5443.peach-tab-match-badge {5444  display: inline-block;5445  width: 6px;5446  height: 6px;5447  border-radius: 50%;5448  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5449  margin-left: 5px;5450  vertical-align: middle;5451  flex-shrink: 0;5452  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5453}54545455.peach-entry-row.is-tab-match {5456  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5457  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5458}54595460.peach-entry-row.is-tab-match:hover {5461  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5462}54635464/* Entry list stagger entrance */5465@keyframes peach-entry-fadein {5466  from { opacity: 0; transform: translateY(4px); }5467  to   { opacity: 1; transform: translateY(0); }5468}54695470.peach-vault-list .peach-entry-row {5471  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5472}54735474/* Button press micro-interaction */5475.peach-btn:active {5476  transform: scale(0.95);5477  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5478}54795480.peach-sort-btn:active,5481.peach-tag-filter-chip:active {5482  transform: scale(0.93);5483  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5484}54855486/* Password strength bar (Lock view + shared) */5487.peach-password-strength {5488  display: flex;5489  align-items: center;5490  gap: 8px;5491  margin-top: 6px;5492}54935494.peach-strength-bar {5495  flex: 1;5496  height: 3px;5497  border-radius: 2px;5498  background: var(--peach-t3);5499  overflow: hidden;5500}55015502.peach-strength-fill {5503  height: 100%;5504  border-radius: 2px;5505  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5506              background 300ms ease;5507}55085509.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5510.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5511.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5512.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }55135514.peach-strength-label {5515  font-family: "IBM Plex Mono", monospace;5516  font-style: italic;5517  font-size: 0.5625rem;5518  font-weight: 300;5519  letter-spacing: 0.06em;5520  color: var(--peach-t2);5521  min-width: 36px;5522  text-align: right;5523}55245525.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5526.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5527.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5528.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }55295530/* Duress form */5531.peach-duress-status {5532  padding: 2px 8px;5533  border-radius: 999px;5534  border: 1px solid var(--peach-t3);5535  font-family: "IBM Plex Mono", monospace;5536  font-size: 0.5625rem;5537  letter-spacing: 0.07em;5538  text-transform: uppercase;5539  color: var(--peach-t2);5540  flex-shrink: 0;5541}55425543.peach-duress-status.is-active {5544  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5545  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5546  color: var(--peach-t0);5547}55485549.peach-duress-form {5550  padding: 8px 0 4px;5551  display: flex;5552  flex-direction: column;5553  gap: 6px;5554}55555556.peach-duress-form .peach-label {5557  margin-top: 4px;5558}55595560.peach-duress-actions {5561  display: flex;5562  gap: 6px;5563  align-items: center;5564  margin-top: 4px;5565}55665567.peach-duress-actions .peach-btn:first-child {5568  margin-right: auto;5569}55705571/* Improved overlay spring entrance */5572.peach-overlay-view.ov-enter-up {5573  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5574}55755576@keyframes ov-enter-up-spring {5577  from { opacity: 0; transform: translateY(16px) scale(0.98); }5578  to   { opacity: 1; transform: translateY(0) scale(1); }5579}55805581.peach-overlay-view.ov-enter-right {5582  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5583}55845585@keyframes ov-enter-right-spring {5586  from { opacity: 0; transform: translateX(18px) scale(0.98); }5587  to   { opacity: 1; transform: translateX(0) scale(1); }5588}55895590/* ── Onboarding-mode restore screens (file import) ── */5591/* Used when MainImportView renders during onboarding (no vault yet).5592   Animates like a lock-screen transition. */5593.peach-lock-view {5594  position: absolute;5595  inset: 0;5596  display: flex;5597  flex-direction: column;5598  background:5599    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5600    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5601    var(--peach-bg);5602  z-index: 2;5603  overflow: hidden;5604  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5605}56065607.peach-lock-view-header {5608  display: flex;5609  align-items: center;5610  justify-content: space-between;5611  padding: 16px 18px 12px;5612  flex-shrink: 0;5613}56145615/* ───────── Settings: auto-lock select ───────── */5616.peach-settings-select {5617  font-family: "IBM Plex Mono", monospace;5618  font-size: 0.6875rem;5619  background: transparent;5620  border: 1px solid var(--peach-t3);5621  border-radius: 4px;5622  color: var(--peach-t1);5623  padding: 3px 6px;5624  cursor: pointer;5625  outline: none;5626}5627.peach-settings-select:focus {5628  border-color: var(--peach-accent);5629}56305631/* ───────── Duress status pill (new polished) ───────── */5632.peach-duress-status-pill {5633  font-family: "IBM Plex Mono", monospace;5634  font-size: 0.5625rem;5635  text-transform: uppercase;5636  letter-spacing: 0.12em;5637  padding: 2px 8px;5638  border-radius: 12px;5639  background: var(--peach-t3);5640  color: var(--peach-t2);5641  flex-shrink: 0;5642}5643.peach-duress-status-pill.is-active {5644  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5645  color: var(--peach-accent);5646}56475648/* ───────── Entry advanced disclosure (canary) ───────── */5649.peach-entry-advanced {5650  margin-top: 12px;5651  border-top: 1px solid var(--peach-t3);5652  padding-top: 10px;5653  position: relative;5654  z-index: 1;5655}5656.peach-entry-advanced-toggle {5657  display: flex;5658  align-items: center;5659  justify-content: space-between;5660  width: 100%;5661  background: transparent;5662  border: none;5663  cursor: pointer;5664  padding: 0;5665  color: var(--peach-t2);5666}5667.peach-canary-section {5668  margin-top: 10px;5669  display: grid;5670  gap: 6px;5671}56725673/* ───────── Import: merge/replace radio choices ───────── */5674.peach-import-choice {5675  display: flex;5676  align-items: flex-start;5677  gap: 10px;5678  padding: 8px 10px;5679  border: 1px solid var(--peach-t3);5680  border-radius: 10px;5681  cursor: pointer;5682  margin-bottom: 6px;5683  transition: border-color 120ms ease, background 120ms ease;5684}5685.peach-import-choice:hover {5686  border-color: var(--peach-accent);5687}5688.peach-import-choice input[type="radio"] {5689  margin-top: 3px;5690  accent-color: var(--peach-accent);5691  flex-shrink: 0;5692}5693.peach-import-choice-main {5694  display: flex;5695  flex-direction: column;5696  gap: 2px;5697  min-width: 0;5698}5699.peach-import-choice-label {5700  font-size: 0.75rem;5701  color: var(--peach-t0);5702}5703.peach-import-choice-sub {5704  font-size: 0.6875rem;5705  color: var(--peach-t2);5706  line-height: 1.5;5707}57085709/* ───────── Export: success confirmation strip ───────── */5710.peach-export-success {5711  display: flex;5712  align-items: flex-start;5713  gap: 10px;5714  padding: 12px;5715  border-radius: 12px;5716  border: 1px solid rgba(150, 175, 110, 0.3);5717  background: rgba(150, 175, 110, 0.08);5718  color: var(--peach-t0);5719  font-size: 0.75rem;5720  line-height: 1.55;5721}5722.peach-export-success-check {5723  color: rgba(150, 175, 110, 0.9);5724  font-size: 0.875rem;5725  flex-shrink: 0;5726}57275728/* ── Trash view ──────────────────────────────────────────────────────── */5729.peach-trash-entry-row {5730  display: flex;5731  align-items: center;5732  justify-content: space-between;5733  gap: 8px;5734  padding: 8px 0;5735  border-bottom: 1px solid var(--peach-border);5736}5737.peach-trash-entry-info {5738  flex: 1;5739  min-width: 0;5740  display: flex;5741  flex-direction: column;5742  gap: 2px;5743}5744.peach-trash-entry-title {5745  font-size: 0.8125rem;5746  color: var(--peach-t0);5747  overflow: hidden;5748  text-overflow: ellipsis;5749  white-space: nowrap;5750}5751.peach-trash-entry-meta {5752  font-family: var(--font-mono);5753  font-size: 0.5625rem;5754  color: var(--peach-t2);5755  letter-spacing: 0.04em;5756}5757.peach-trash-entry-actions {5758  display: flex;5759  align-items: center;5760  gap: 4px;5761  flex-shrink: 0;5762}5763.peach-trash-delete-btn {5764  background: transparent;5765  border: 0;5766  color: var(--peach-t3);5767  font-size: 1rem;5768  line-height: 1;5769  cursor: pointer;5770  padding: 2px 5px;5771  transition: color 0.15s;5772}5773.peach-trash-delete-btn:hover { color: var(--peach-breach); }5774.peach-trash-list {5775  overflow-y: auto;5776}5777.peach-trash-footer {5778  display: flex;5779  align-items: center;5780  gap: 8px;5781  padding: 8px 0 0;5782  border-top: 1px solid var(--peach-border);5783  margin-top: 4px;5784}5785.peach-trash-purge-all {5786  background: transparent;5787  border: 0;5788  color: var(--peach-t3);5789  font-size: 0.625rem;5790  cursor: pointer;5791  padding: 4px 0;5792  letter-spacing: 0.03em;5793  transition: color 0.2s;5794}5795.peach-trash-purge-all:hover { color: var(--peach-breach); }5796.peach-trash-purge-confirm-label {5797  font-size: 0.625rem;5798  color: var(--peach-t1);5799  flex: 1;5800}58015802/* ── Settings shortcuts grid ─────────────────────────────────────────── */5803.peach-shortcuts-grid {5804  display: grid;5805  grid-template-columns: auto 1fr;5806  gap: 6px 12px;5807  align-items: center;5808  padding: 4px 0;5809}5810.peach-shortcut-key {5811  font-family: var(--font-mono);5812  font-size: 0.625rem;5813  color: var(--peach-t0);5814  background: var(--peach-t3);5815  border-radius: 4px;5816  padding: 2px 6px;5817  white-space: nowrap;5818  text-align: center;5819}5820.peach-shortcut-desc {5821  font-size: 0.6875rem;5822  color: var(--peach-t1);5823}58245825/* ── Sort bar trash button ───────────────────────────────────────────── */5826.peach-sort-trash-btn {5827  display: flex;5828  align-items: center;5829  justify-content: center;5830  padding: 3px 5px;5831  background: transparent;5832  border: none;5833  cursor: pointer;5834  color: var(--peach-t2);5835  border-radius: 4px;5836  transition: color 140ms ease, background 140ms ease;5837}5838.peach-sort-trash-btn:hover {5839  color: var(--peach-t1);5840  background: var(--peach-t3);5841}5842.peach-sort-trash-btn.is-active {5843  color: var(--peach-accent);5844}58455846/* Accent color picker */5847.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5848.peach-accent-picker {5849  display: flex;5850  flex-wrap: wrap;5851  gap: 7px;5852  padding: 2px 0;5853}5854.peach-accent-swatch {5855  width: 22px;5856  height: 22px;5857  border-radius: 50%;5858  border: 2px solid transparent;5859  cursor: pointer;5860  padding: 0;5861  transition: transform 100ms;5862  outline-offset: 2px;5863}5864.peach-accent-swatch:hover { transform: scale(1.15); }5865.peach-accent-swatch.is-active {5866  border-color: var(--peach-t0);5867  transform: scale(1.1);5868}58695870.peach-pill-group {5871  display: flex;5872  gap: 6px;5873}5874.peach-pill-group .peach-btn.is-active {5875  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5876  border-color: var(--peach-accent);5877  color: var(--peach-t0);5878}58795880/* ── Card entry styles ───────────────────────────────────────── */5881.peach-card-number {5882  font-family: var(--peach-mono);5883  letter-spacing: 0.08em;5884}58855886.peach-card-network-badge {5887  font-size: 0.625rem;5888  padding: 1px 5px;5889  border-radius: 4px;5890  border: 0.5px solid var(--peach-border);5891  color: var(--peach-text-dim);5892  margin-left: 6px;5893  vertical-align: middle;5894}58955896.peach-card-expiry-row {5897  display: flex;5898  align-items: center;5899  gap: 8px;5900}59015902.peach-card-expiry-sep {5903  color: var(--peach-text-dim);5904}59055906/* ── Pro tier — upgrade screen ──────────────────────────────── */5907.peach-pro-mark {5908  font-size: 0.5625rem;5909  color: var(--peach-accent);5910  margin-left: 6px;5911  vertical-align: super;5912  opacity: 0.7;5913}59145915.peach-pro-mini-badge {5916  display: block;5917  font-size: 0.625rem;5918  font-style: italic;5919  color: var(--peach-accent);5920  letter-spacing: 0.04em;5921  margin-top: -2px;5922  padding-left: 2px;5923  opacity: 0.85;5924  text-align: center;5925}59265927.peach-wordmark-stack {5928  display: inline-flex;5929  flex-direction: column;5930  align-items: center;5931}59325933/* ── Pro tier — upgrade page ─────────────────────────────────── */5934.peach-pro-upgrade {5935  display: flex;5936  flex-direction: column;5937  align-items: stretch;5938  gap: 10px;5939  padding: 0 4px 8px;5940}59415942.peach-pro-upgrade-hero {5943  display: flex;5944  flex-direction: column;5945  align-items: center;5946  gap: 4px;5947  padding: 10px 0 6px;5948}59495950.peach-pro-upgrade-mark-wrap {5951  display: flex;5952  align-items: center;5953  justify-content: center;5954  margin-bottom: 2px;5955}59565957.peach-pro-upgrade-mark {5958  width: 38px;5959  height: 38px;5960  opacity: 0.9;5961}59625963.peach-pro-upgrade-title {5964  font-family: var(--font-display, var(--font-ui));5965  font-size: 22px;5966  margin: 0;5967  color: var(--peach-t0);5968  letter-spacing: 0.01em;5969}59705971.peach-pro-upgrade-tagline {5972  margin: 0;5973  font-style: italic;5974  color: var(--peach-t2);5975  font-size: 0.6875rem;5976}59775978.peach-pro-features {5979  display: flex;5980  flex-direction: column;5981  gap: 8px;5982  border-top: 1px solid var(--peach-border);5983  border-bottom: 1px solid var(--peach-border);5984  padding: 10px 4px;5985}59865987.peach-pro-feature {5988  display: flex;5989  gap: 9px;5990  align-items: baseline;5991}59925993.peach-pro-feature-mark {5994  color: var(--peach-accent);5995  font-size: 0.6875rem;5996  flex-shrink: 0;5997  display: inline-block;5998  transform-origin: center;5999  opacity: 0.8;6000}60016002.peach-pro-feature-text {6003  display: flex;6004  flex-direction: column;6005  gap: 1px;6006}60076008.peach-pro-feature-name {6009  font-size: 0.75rem;6010  color: var(--peach-t0);6011}60126013.peach-pro-feature-desc {6014  font-size: 0.625rem;6015  color: var(--peach-t2);6016}60176018.peach-pro-feature.is-highlighted .peach-pro-feature-mark {6019  animation: peach-pulse-accent 600ms ease-out forwards;6020}60216022@keyframes peach-pulse-accent {6023  0%   { opacity: 1; transform: scale(1.4); }6024  100% { opacity: 0.7; transform: scale(1); }6025}60266027.peach-pro-upgrade-actions {6028  display: flex;6029  flex-direction: column;6030  align-items: center;6031  gap: 8px;6032  padding-top: 2px;6033}60346035.peach-pro-pricing {6036  margin: 0;6037  text-align: center;6038  font-size: 0.6875rem;6039  color: var(--peach-t2);6040  letter-spacing: 0.04em;6041}60426043.peach-pro-upgrade-cta {6044  align-self: center;6045  text-align: center;6046  text-decoration: none;6047  display: block;6048  padding: 9px 32px;6049  font-size: 0.8125rem;6050  min-width: 180px;6051}60526053.peach-pro-key-divider {6054  display: flex;6055  align-items: center;6056  gap: 8px;6057  width: 100%;6058  color: var(--peach-t3);6059  font-size: 0.625rem;6060  letter-spacing: 0.08em;6061}60626063.peach-pro-key-divider::before,6064.peach-pro-key-divider::after {6065  content: "";6066  flex: 1;6067  height: 1px;6068  background: var(--peach-border);6069}60706071.peach-pro-key-link {6072  background: transparent;6073  border: 1px solid var(--peach-border);6074  border-radius: 8px;6075  color: var(--peach-t1);6076  font-size: 0.75rem;6077  cursor: pointer;6078  align-self: stretch;6079  padding: 8px 12px;6080  text-align: center;6081  transition: border-color 0.2s, color 0.2s;6082}60836084.peach-pro-key-link:hover {6085  border-color: var(--peach-accent);6086  color: var(--peach-accent);6087}60886089/* ── Pro tier — key ceremony ─────────────────────────────────── */6090.peach-pro-key-ceremony {6091  display: flex;6092  flex-direction: column;6093  align-items: center;6094  gap: 12px;6095  padding: 20px 4px 16px;6096}60976098.peach-pro-key-ceremony .peach-lock-rune-string {6099  font-size: 1rem;6100  gap: 12px;6101  flex: 0;6102  justify-content: center;6103}61046105.peach-pro-key-ceremony-label {6106  margin: 0;6107  font-size: 0.6875rem;6108  color: var(--peach-t2);6109  font-style: italic;6110  letter-spacing: 0.04em;6111}61126113.peach-pro-key-input {6114  font-family: var(--font-mono, monospace);6115  letter-spacing: 0.06em;6116  text-align: center;6117  width: 100%;6118  box-sizing: border-box;6119}61206121.peach-pro-key-error {6122  margin: 0;6123  font-size: 0.75rem;6124  text-align: center;6125  color: var(--peach-breach, #e55);6126  padding: 0;6127}61286129.peach-pro-key-activate {6130  width: 100%;6131  text-align: center;6132  box-sizing: border-box;6133  padding: 10px 20px;6134  font-size: 0.8125rem;6135}61366137.peach-pro-key-cancel {6138  background: transparent;6139  border: 0;6140  color: var(--peach-t2);6141  font-size: 0.6875rem;6142  cursor: pointer;6143  padding: 2px 8px;6144  transition: color 0.2s;6145}61466147.peach-pro-key-cancel:hover { color: var(--peach-accent); }61486149/* ── Pro tier — active state ─────────────────────────────────── */6150.peach-pro-active {6151  display: flex;6152  flex-direction: column;6153  align-items: center;6154  gap: 0;6155  padding: 8px 4px 16px;6156  min-height: 280px;6157}61586159.peach-pro-active-hero {6160  display: flex;6161  flex-direction: column;6162  align-items: center;6163  gap: 6px;6164  padding: 20px 0 22px;6165}61666167.peach-pro-active-mark-wrap {6168  display: flex;6169  align-items: center;6170  justify-content: center;6171  margin-bottom: 4px;6172}61736174.peach-pro-active-mark {6175  width: 60px;6176  height: 60px;6177  filter:6178    drop-shadow(0 0 10px color-mix(in srgb, var(--peach-accent) 55%, transparent))6179    drop-shadow(0 0 26px color-mix(in srgb, var(--peach-accent) 22%, transparent));6180}61816182.peach-pro-active-title {6183  font-family: var(--font-display, var(--font-ui));6184  font-size: 26px;6185  margin: 0;6186  color: var(--peach-t0);6187  letter-spacing: 0.01em;6188}61896190.peach-pro-active-since {6191  margin: 0;6192  font-size: 0.6875rem;6193  color: var(--peach-t2);6194  font-style: italic;6195}61966197.peach-pro-active-features {6198  display: flex;6199  flex-direction: column;6200  gap: 8px;6201  width: 100%;6202  padding: 14px 8px 0;6203  border-top: 1px solid var(--peach-border);6204  flex: 1;6205}62066207.peach-pro-active-feature {6208  display: flex;6209  align-items: center;6210  gap: 9px;6211}62126213.peach-pro-active-feature-mark {6214  color: var(--peach-accent);6215  font-size: 0.625rem;6216  opacity: 0.65;6217  flex-shrink: 0;6218}62196220.peach-pro-active-feature-name {6221  font-size: 0.75rem;6222  color: var(--peach-t1);6223}62246225.peach-pro-deactivate {6226  align-self: center;6227  background: transparent;6228  border: 0;6229  color: var(--peach-t3);6230  font-size: 0.625rem;6231  cursor: pointer;6232  padding: 8px 0 0;6233  margin-top: 16px;6234  letter-spacing: 0.03em;6235  transition: color 0.2s;6236}62376238.peach-pro-deactivate:hover { color: var(--peach-t2); }62396240.peach-pro-deactivate:disabled {6241  opacity: 0.5;6242  cursor: default;6243}62446245/* ── Pro advanced health remediation queue ──────────────────── */6246.peach-health-pro-queue {6247  display: flex;6248  flex-direction: column;6249  gap: 10px;6250  padding: 12px;6251  margin: 0 0 12px;6252  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6253  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6254  border-radius: 10px;6255}62566257.peach-health-pro-queue-head {6258  display: flex;6259  justify-content: space-between;6260  align-items: baseline;6261}62626263.peach-health-pro-queue-title {6264  font-size: 0.75rem;6265  font-weight: 500;6266  letter-spacing: 0.04em;6267  text-transform: uppercase;6268  color: var(--peach-accent);6269}62706271.peach-health-pro-queue-score {6272  font-size: 0.6875rem;6273  color: var(--peach-t2);6274}62756276.peach-health-pro-row {6277  display: flex;6278  gap: 10px;6279  align-items: center;6280  padding: 8px 0;6281  border-top: 1px solid var(--peach-border);6282}62836284.peach-health-pro-row-info {6285  flex: 1;6286  display: flex;6287  flex-direction: column;6288  gap: 4px;6289  min-width: 0;6290}62916292.peach-health-pro-row-name {6293  font-size: 0.8125rem;6294  color: var(--peach-t0);6295  overflow: hidden;6296  text-overflow: ellipsis;6297  white-space: nowrap;6298}62996300.peach-health-pro-row-meta {6301  font-size: 0.6875rem;6302  color: var(--peach-t2);6303}63046305.peach-health-pro-bar {6306  height: 2px;6307  background: var(--peach-border);6308  border-radius: 2px;6309  overflow: hidden;6310  margin-top: 2px;6311}63126313.peach-health-pro-bar-fill {6314  height: 100%;6315  background: var(--peach-accent);6316  transition: width 200ms ease-out;6317}63186319/* ── Pro activation celebration ── */6320@keyframes peach-pro-bloom {6321  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6322  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6323                 drop-shadow(0 0 48px var(--peach-glow)); }6324  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6325}63266327@keyframes peach-pro-wordmark-in {6328  from { opacity: 0; transform: translateY(4px); }6329  to   { opacity: 1; transform: translateY(0); }6330}63316332@keyframes peach-pro-fade-out {6333  from { opacity: 1; }6334  to   { opacity: 0; }6335}63366337.peach-pro-celebration {6338  background:6339    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6340    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6341    var(--peach-bg);6342  border: 1px solid var(--peach-t3);6343  box-shadow:6344    0 2px 8px rgba(0,0,0,0.55),6345    0 14px 48px rgba(0,0,0,0.7),6346    0 0 0 1px rgba(240,232,216,0.04);6347  overflow: hidden;6348  width: 320px;6349  height: 520px;6350  display: flex;6351  flex-direction: column;6352  align-items: center;6353  justify-content: center;6354  gap: 8px;6355  padding: 32px 24px;6356  text-align: center;6357}63586359.peach-pro-celebration.is-leaving {6360  animation: peach-pro-fade-out 400ms ease forwards;6361}63626363.peach-pro-bloom-target {6364  display: flex;6365  align-items: center;6366  justify-content: center;6367  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6368  margin-bottom: 12px;6369}63706371.peach-pro-bloom-icon {6372  width: 48px;6373  height: 48px;6374}63756376.peach-pro-wordmark {6377  font-family: var(--font-display);6378  font-size: 22px;6379  font-style: italic;6380  font-weight: 400;6381  color: var(--peach-accent);6382  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6383}63846385.peach-pro-thankyou {6386  font-size: 0.75rem;6387  font-style: italic;6388  color: var(--peach-t2);6389  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6390}639163926393/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6394.peach-pro-notice-banner {6395  display: flex;6396  align-items: center;6397  gap: 8px;6398  padding: 7px 12px;6399  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6400  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6401  font-size: 0.6875rem;6402  color: var(--peach-t2);6403  font-family: "IBM Plex Mono", monospace;6404  flex-shrink: 0;6405}64066407.peach-pro-notice-link {6408  background: none;6409  border: none;6410  padding: 0;6411  cursor: pointer;6412  font-size: 0.6875rem;6413  color: var(--peach-accent);6414  font-family: "IBM Plex Mono", monospace;6415  margin-left: auto;6416  white-space: nowrap;6417}64186419.peach-pro-notice-close {6420  background: none;6421  border: none;6422  padding: 0 0 0 4px;6423  cursor: pointer;6424  font-size: 0.625rem;6425  color: var(--peach-t3);6426  line-height: 1;6427}64286429/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6430   Renders over whatever view is showing. 60-second expiry; the popup ticks6431   the countdown each second and clears the banner when it hits zero. */6432.peach-pair-request-banner {6433  display: flex;6434  flex-direction: column;6435  gap: 8px;6436  padding: 10px 12px;6437  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6438  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6439  font-family: "IBM Plex Mono", monospace;6440  flex-shrink: 0;6441}64426443.peach-pair-toast {6444  padding: 8px 12px;6445  font-family: "IBM Plex Mono", monospace;6446  font-size: 0.75rem;6447  color: var(--peach-t1);6448  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6449  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6450  flex-shrink: 0;6451  text-align: center;6452}64536454.peach-pair-toast strong {6455  color: var(--peach-t0);6456  font-weight: 500;6457}64586459.peach-pair-request-header {6460  display: flex;6461  align-items: center;6462  gap: 8px;6463  font-size: 0.75rem;6464  color: var(--peach-t1);6465}64666467.peach-pair-request-mark {6468  font-size: 0.875rem;6469  display: inline-flex;6470  align-items: center;6471}64726473.peach-pair-request-icon {6474  width: 1em;6475  height: 1em;6476}64776478.peach-pair-request-title {6479  font-weight: 600;6480  color: var(--peach-t0);6481}64826483.peach-pair-request-countdown {6484  margin-left: auto;6485  font-variant-numeric: tabular-nums;6486  color: var(--peach-t2);6487  font-size: 0.6875rem;6488}64896490.peach-pair-request-body {6491  margin: 0;6492  font-size: 0.75rem;6493  color: var(--peach-t1);6494  line-height: 1.4;6495}64966497.peach-pair-request-body strong {6498  color: var(--peach-t0);6499  font-weight: 600;6500}65016502.peach-pair-request-actions {6503  display: flex;6504  gap: 8px;6505  justify-content: flex-end;6506}65076508/* ─── First-run onboarding ──────────────────────────────────────────────6509   Three-card welcome shown once before vault creation. The PeachScript6510   rune background drifts behind everything at very low opacity — it's6511   atmosphere, not focus. The cards themselves use the same panel6512   language as the rest of the popup so the transition into NewVault is6513   continuous, not a jarring switch of visual register. */65146515.peach-onboarding {6516  position: relative;6517  display: flex;6518  flex-direction: column;6519  width: 100%;6520  height: 100%;6521  padding: 16px 16px 18px;6522  box-sizing: border-box;6523  overflow: hidden;6524  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6525}65266527.peach-onboarding.is-completing {6528  animation: peach-onboard-exit 200ms ease-out forwards;6529}65306531.peach-rune-background {6532  position: absolute;6533  inset: 0;6534  width: 100%;6535  height: 100%;6536  pointer-events: none;6537  z-index: 0;6538  transition: opacity 500ms ease-out;6539}65406541.peach-onboarding.is-completing .peach-rune-background {6542  opacity: 0;6543}65446545.peach-onboarding-header {6546  position: relative;6547  z-index: 1;6548  display: flex;6549  align-items: center;6550  margin-bottom: 14px;6551}65526553.peach-onboarding-card {6554  position: relative;6555  z-index: 1;6556  flex: 1;6557  display: flex;6558  flex-direction: column;6559  gap: 10px;6560  padding: 22px 20px;6561  border-radius: 16px;6562  border: 1px solid var(--peach-t3);6563  background:6564    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6565  backdrop-filter: blur(3px);6566  -webkit-backdrop-filter: blur(3px);6567  box-shadow:6568    inset 0 1px 0 rgba(240, 232, 216, 0.04),6569    0 12px 28px rgba(0, 0, 0, 0.12);6570  cursor: pointer;6571  user-select: none;6572  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6573}65746575.peach-onboarding-card.is-exiting {6576  animation: peach-card-out 120ms ease-in forwards;6577  pointer-events: none;6578}65796580.peach-onboarding-card-headline {6581  margin: 0;6582  font-family: var(--font-display);6583  font-style: italic;6584  font-weight: 400;6585  font-size: 22px;6586  line-height: 1.05;6587  color: var(--peach-t0);6588  white-space: pre-line;6589}65906591.peach-onboarding-divider {6592  margin: 4px 0 6px;6593  border: 0;6594  border-top: 1px solid var(--peach-t3);6595  width: 100%;6596}65976598.peach-onboarding-body {6599  margin: 0;6600  font-size: 0.8125rem;6601  line-height: 1.6;6602  color: var(--peach-t1);6603}66046605.peach-onboarding-warning {6606  display: flex;6607  align-items: flex-start;6608  gap: 8px;6609  margin: 6px 0 0;6610  padding-top: 8px;6611  border-top: 1px dashed var(--peach-t3);6612  font-size: 0.8125rem;6613  line-height: 1.5;6614  color: var(--peach-t1);6615}66166617.peach-onboarding-warning-icon {6618  color: var(--peach-accent);6619  font-size: 0.8125rem;6620  line-height: 1.5;6621  flex: 0 0 auto;6622}66236624.peach-onboarding-nav {6625  position: relative;6626  z-index: 1;6627  display: flex;6628  align-items: center;6629  justify-content: space-between;6630  margin-top: 12px;6631  padding: 0 4px;6632}66336634.peach-onboarding-dots {6635  display: flex;6636  align-items: center;6637  gap: 6px;6638}66396640.peach-onboarding-dot {6641  width: 6px;6642  height: 6px;6643  border-radius: 50%;6644  background: var(--peach-t2);6645  transition: width 200ms ease, height 200ms ease, background 200ms ease;6646}66476648.peach-onboarding-dot.is-active {6649  width: 8px;6650  height: 8px;6651  background: var(--peach-accent);6652}66536654.peach-onboarding-next {6655  background: none;6656  border: none;6657  padding: 4px 0;6658  cursor: pointer;6659  font-family: "IBM Plex Mono", monospace;6660  font-size: 0.6875rem;6661  letter-spacing: 0.04em;6662  color: var(--peach-t1);6663  transition: color 150ms ease;6664}66656666.peach-onboarding-next:hover {6667  color: var(--peach-t0);6668}66696670.peach-onboarding-next:disabled {6671  opacity: 0.5;6672  cursor: default;6673}66746675.peach-onboarding-back {6676  background: none;6677  border: none;6678  padding: 4px 0;6679  cursor: pointer;6680  font-family: "IBM Plex Mono", monospace;6681  font-size: 0.6875rem;6682  letter-spacing: 0.04em;6683  color: var(--peach-t2);6684  transition: color 150ms ease;6685}66866687.peach-onboarding-back:hover {6688  color: var(--peach-t0);6689}66906691.peach-onboarding-back:disabled {6692  opacity: 0.5;6693  cursor: default;6694}66956696/* Reserve back-button width on the first card so the dots stay centred */6697.peach-onboarding-back-spacer {6698  width: 44px;6699}67006701.peach-onboarding-mobile-card-buttons {6702  display: flex;6703  flex-direction: column;6704  gap: 8px;6705  margin-top: 16px;6706}67076708@keyframes peach-onboard-enter {6709  from { opacity: 0; transform: translateY(20px); }6710  to   { opacity: 1; transform: translateY(0); }6711}67126713@keyframes peach-onboard-exit {6714  from { opacity: 1; }6715  to   { opacity: 0; }6716}67176718@keyframes peach-card-in {6719  from { opacity: 0; transform: translateX(12px); }6720  to   { opacity: 1; transform: translateX(0); }6721}67226723@keyframes peach-card-out {6724  from { opacity: 1; transform: translateX(0); }6725  to   { opacity: 0; transform: translateX(-12px); }6726}67276728/* ─── New vault screen — matched to onboarding card language ─────────── */67296730.peach-newvault {6731  position: relative;6732  display: flex;6733  flex-direction: column;6734  gap: 12px;6735  padding: 16px 16px 18px;6736  overflow: hidden;6737}67386739/* Suppress the warm-blob ambient art inherited from .lock-screen — the6740   new vault card now carries the visual weight. */6741.peach-newvault::before {6742  content: none;6743}67446745.peach-newvault-header {6746  position: relative;6747  z-index: 2;6748  display: flex;6749  align-items: center;6750  gap: 10px;6751  margin-bottom: 2px;6752}67536754.peach-newvault-back {6755  display: inline-flex;6756  align-items: center;6757  gap: 4px;6758  background: transparent;6759  border: none;6760  color: var(--peach-t2);6761  font-family: "IBM Plex Mono", monospace;6762  font-size: 0.625rem;6763  letter-spacing: 0.06em;6764  cursor: pointer;6765  padding: 4px 6px;6766  border-radius: 6px;6767  transition: color 120ms ease, background 120ms ease;6768}67696770.peach-newvault-back:hover {6771  color: var(--peach-t0);6772  background: rgba(240, 232, 216, 0.04);6773}67746775.peach-newvault-mark {6776  position: absolute;6777  right: -12px;6778  top: 6px;6779  width: 110px;6780  height: 110px;6781  pointer-events: none;6782  opacity: 0.10;6783  filter: saturate(0.9);6784  z-index: 0;6785}6786.peach-newvault-mark-art {6787  width: 100%;6788  height: 100%;6789}6790.peach-newvault-mark-art path:nth-child(2),6791.peach-newvault-mark-art path:nth-child(3) {6792  stroke: rgba(123, 144, 96, 0.88);6793  fill: rgba(123, 144, 96, 0.88);6794}67956796.peach-newvault-card {6797  position: relative;6798  z-index: 1;6799  display: flex;6800  flex-direction: column;6801  gap: 12px;6802  padding: 22px 20px 18px;6803  border-radius: 16px;6804  border: 1px solid var(--peach-t3);6805  background:6806    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6807  backdrop-filter: blur(3px);6808  -webkit-backdrop-filter: blur(3px);6809  box-shadow:6810    inset 0 1px 0 rgba(240, 232, 216, 0.04),6811    0 12px 28px rgba(0, 0, 0, 0.12);6812  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6813}68146815.peach-newvault-headline {6816  margin: 0;6817  font-family: var(--font-display);6818  font-style: italic;6819  font-weight: 400;6820  font-size: 24px;6821  line-height: 1.05;6822  color: var(--peach-t0);6823  white-space: pre-line;6824}68256826.peach-newvault-divider {6827  margin: 2px 0 4px;6828  border: 0;6829  border-top: 1px solid var(--peach-t3);6830  width: 100%;6831}68326833.peach-newvault-field {6834  display: flex;6835  flex-direction: column;6836  gap: 4px;6837}68386839.peach-newvault-label-row {6840  display: flex;6841  align-items: center;6842  justify-content: space-between;6843}68446845/* Monospace input scaled to the card. Replaces the 22px unlock-input6846   so the placeholder no longer overflows and the field reads as part6847   of the same surface as the body copy. */6848.peach-newvault-input {6849  font-size: 0.875rem;6850  letter-spacing: 0.18em;6851  padding: 8px 0;6852}6853.peach-newvault-input::placeholder {6854  letter-spacing: 0.18em;6855  color: var(--peach-t2);6856}68576858.peach-newvault-hint {6859  margin: 2px 0 0;6860  font-family: "IBM Plex Mono", monospace;6861  font-size: 0.625rem;6862  color: var(--peach-t2);6863  letter-spacing: 0.04em;6864}68656866.peach-newvault-submit {6867  margin-top: 4px;6868}68696870.peach-newvault-warning {6871  display: flex;6872  align-items: flex-start;6873  gap: 8px;6874  margin: 4px 0 0;6875  padding-top: 10px;6876  border-top: 1px dashed var(--peach-t3);6877  font-size: 0.75rem;6878  line-height: 1.5;6879  color: var(--peach-t1);6880}68816882.peach-newvault-warning-icon {6883  color: var(--peach-accent);6884  font-size: 0.8125rem;6885  line-height: 1.4;6886  flex: 0 0 auto;6887}68886889.peach-newvault-footer {6890  position: relative;6891  z-index: 1;6892  display: flex;6893  flex-direction: column;6894  gap: 4px;6895  padding: 4px 4px 0;6896}68976898/* Settings body — warm accent gradient gives the glass something to blur against */6899.peach-settings-body {6900  background:6901    radial-gradient(6902      ellipse at 30% 20%,6903      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,6904      transparent 60%6905    );6906}69076908/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */6909/* ── Danger cards (Replace + Destroy) ────────────────────────────────────6910 * Two severity levels: "warn" for actions that are dangerous-but-recoverable6911 * (replacing the vault from a backup file) and "hazard" for actions that6912 * are absolutely irreversible (Panic). Both use the same card scaffold so6913 * they read as a pair, but the colour family signals the severity at a6914 * glance — yellow for caution, red for don't.6915 */6916.peach-danger-card {6917  --danger-tint: 235, 158, 52; /* amber */6918  display: flex;6919  flex-direction: column;6920  gap: 8px;6921  padding: 14px;6922  margin-top: 10px;6923  border-radius: 12px;6924  border: 1px solid rgba(var(--danger-tint), 0.32);6925  background:6926    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),6927    rgba(var(--danger-tint), 0.04);6928  box-shadow:6929    inset 0 1px 0 rgba(var(--danger-tint), 0.08),6930    0 0 24px rgba(var(--danger-tint), 0.04);6931  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;6932}69336934.peach-danger-card:hover {6935  border-color: rgba(var(--danger-tint), 0.55);6936  box-shadow:6937    inset 0 1px 0 rgba(var(--danger-tint), 0.12),6938    0 0 36px rgba(var(--danger-tint), 0.10);6939}69406941.peach-danger-card--hazard {6942  --danger-tint: 220, 38, 38; /* red */6943}69446945.peach-danger-card-head {6946  display: flex;6947  align-items: center;6948  gap: 10px;6949}69506951.peach-danger-card-glyph {6952  width: 28px;6953  height: 28px;6954  flex-shrink: 0;6955  display: flex;6956  align-items: center;6957  justify-content: center;6958  border-radius: 8px;6959  background: rgba(var(--danger-tint), 0.12);6960  color: rgba(var(--danger-tint), 0.95);6961  font-size: 1rem;6962  line-height: 1;6963}69646965.peach-danger-card-title {6966  margin: 0;6967  font-size: 0.8125rem;6968  font-weight: 600;6969  color: rgba(var(--danger-tint), 0.92);6970  letter-spacing: 0.01em;6971}69726973.peach-danger-card-copy {6974  margin: 0;6975  font-size: 0.6875rem;6976  line-height: 1.5;6977  color: var(--peach-t2);6978}69796980.peach-danger-card-button {6981  width: 100%;6982  padding: 9px;6983  margin-top: 4px;6984  background: transparent;6985  border: 1px solid rgba(var(--danger-tint), 0.45);6986  border-radius: 8px;6987  color: rgba(var(--danger-tint), 0.9);6988  font-size: 0.75rem;6989  font-weight: 500;6990  letter-spacing: 0.02em;6991  cursor: pointer;6992  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;6993}69946995.peach-danger-card-button:hover {6996  background: rgba(var(--danger-tint), 0.10);6997  border-color: rgba(var(--danger-tint), 0.75);6998  color: rgb(var(--danger-tint));6999}70007001/* ── Panic flow (three-step destruction) ───────────────────────────────── */7002.peach-panic {7003  display: flex;7004  flex-direction: column;7005  flex: 1;7006  min-height: 0;7007  padding: 28px 20px 20px;7008  gap: 18px;7009  overflow-y: auto;7010  scrollbar-width: none;7011  -ms-overflow-style: none;7012}70137014.peach-panic::-webkit-scrollbar { display: none; }70157016.peach-panic-step2 {7017  background: rgba(220, 38, 38, 0.04);7018}70197020.peach-panic-step3 {7021  position: relative;7022  background: #0f0505;7023  color: #ffffff;7024  overflow: hidden;7025}70267027.peach-panic-rune-bg {7028  position: absolute;7029  inset: 0;7030  opacity: 0.22;7031  pointer-events: none;7032  overflow: hidden;7033}70347035.peach-panic-rune-bg canvas {7036  width: 100% !important;7037  height: 100% !important;7038}70397040.peach-panic-icon {7041  font-size: 32px;7042  color: rgb(220, 38, 38);7043  line-height: 1;7044}70457046.peach-panic-title {7047  margin: 0;7048  font-size: 18px;7049  font-weight: 500;7050  color: var(--peach-t1);7051}70527053.peach-panic-title--severe {7054  font-size: 20px;7055  font-weight: 700;7056  color: rgb(220, 38, 38);7057}70587059.peach-panic-body {7060  margin: 0;7061  font-size: 0.8125rem;7062  line-height: 1.55;7063  color: var(--peach-t2);7064}70657066.peach-panic-body--severe {7067  color: rgba(220, 38, 38, 0.85);7068}70697070.peach-panic-body--final {7071  font-size: 1rem;7072  font-weight: 700;7073  color: rgb(255, 80, 80);7074  line-height: 1.4;7075}70767077.peach-panic-body--final-intro {7078  font-size: 1rem;7079  color: #ffffff;7080  font-weight: 400;7081}70827083.peach-panic-divider {7084  height: 1px;7085  background: rgba(255, 255, 255, 0.08);7086  margin: 4px 0;7087}70887089.peach-panic-confirm-input {7090  width: 100%;7091  padding: 10px 12px;7092  background: rgba(255, 255, 255, 0.02);7093  border: 1px solid rgba(220, 38, 38, 0.4);7094  border-radius: 8px;7095  color: var(--peach-t1);7096  font-family: "IBM Plex Mono", monospace;7097  font-size: 0.875rem;7098  letter-spacing: 0.12em;7099  text-transform: uppercase;7100}71017102.peach-panic-confirm-input:focus {7103  outline: none;7104  border-color: rgb(220, 38, 38);7105}71067107.peach-panic-confirm-input--match {7108  border-color: rgb(220, 38, 38);7109  color: rgb(220, 38, 38);7110}71117112.peach-panic-confirm-label {7113  font-size: 0.6875rem;7114  color: var(--peach-t2);7115  margin: 0 0 -8px;7116  letter-spacing: 0.06em;7117}71187119.peach-panic-actions {7120  display: flex;7121  flex-direction: column;7122  gap: 10px;7123  margin-top: auto;7124}71257126.peach-panic-button {7127  width: 100%;7128  padding: 12px;7129  border-radius: 8px;7130  font-size: 0.8125rem;7131  cursor: pointer;7132  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7133}71347135.peach-panic-button--primary {7136  background: var(--peach-accent);7137  border: 1px solid var(--peach-accent);7138  color: #ffffff;7139  font-weight: 600;7140}71417142.peach-panic-button--primary:hover {7143  background: color-mix(in srgb, var(--peach-accent) 88%, white);7144}71457146.peach-panic-button--danger {7147  background: rgb(220, 38, 38);7148  border: 1px solid rgb(220, 38, 38);7149  color: #ffffff;7150  font-weight: 600;7151}71527153.peach-panic-button--danger:disabled {7154  opacity: 0.35;7155  cursor: not-allowed;7156}71577158.peach-panic-button--ghost {7159  background: transparent;7160  border: 1px solid rgba(255, 255, 255, 0.18);7161  color: var(--peach-t2);7162}71637164.peach-panic-button--ghost:hover {7165  border-color: rgba(255, 255, 255, 0.32);7166  color: var(--peach-t1);7167}71687169.peach-panic-link {7170  background: transparent;7171  border: none;7172  padding: 4px 0;7173  color: rgba(220, 38, 38, 0.65);7174  font-size: 0.75rem;7175  cursor: pointer;7176  text-align: left;7177  text-decoration: underline;7178  text-underline-offset: 3px;7179}71807181.peach-panic-link:hover {7182  color: rgb(220, 38, 38);7183}71847185.peach-panic-bar {7186  background: rgb(220, 38, 38);7187  padding: 16px 20px;7188  margin: -28px -20px 0;7189  text-align: center;7190  font-size: 0.8125rem;7191  font-weight: 700;7192  letter-spacing: 0.12em;7193  color: #ffffff;7194}71957196.peach-panic-final-button {7197  width: 100%;7198  padding: 14px;7199  background: rgb(220, 38, 38);7200  border: none;7201  border-radius: 8px;7202  color: #ffffff;7203  font-size: 0.875rem;7204  font-weight: 700;7205  letter-spacing: 0.08em;7206  text-transform: uppercase;7207  cursor: pointer;7208  animation: peach-panic-pulse 2s ease-in-out infinite;7209}72107211.peach-settings-license {7212  margin-top: 10px;7213  padding-top: 10px;7214  border-top: 1px solid var(--peach-t3);7215}72167217.peach-settings-label {7218  font-size: 0.625rem;7219  letter-spacing: 0.08em;7220  color: var(--peach-t3);7221  display: block;7222  margin-bottom: 6px;7223}72247225.peach-settings-license-row {7226  display: flex;7227  align-items: center;7228  justify-content: space-between;7229  gap: 8px;7230}72317232.peach-settings-license-key {7233  font-family: 'IBM Plex Mono', monospace;7234  font-size: 0.75rem;7235  color: var(--peach-t0);7236  letter-spacing: 0.04em;7237  word-break: break-all;7238}72397240.peach-settings-license-copy {7241  font-size: 0.6875rem;7242  color: var(--peach-accent);7243  background: transparent;7244  border: none;7245  cursor: pointer;7246  padding: 4px 8px;7247  border-radius: 4px;7248  flex-shrink: 0;7249  transition: opacity 150ms ease;7250}72517252.peach-settings-license-copy:hover {7253  opacity: 0.75;7254}72557256@keyframes peach-panic-pulse {7257  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7258  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7259}72607261[data-motion="reduce"] .peach-panic-final-button {7262  animation: none;7263}72647265/* Vault History — Settings → Vault sub-view */72667267.peach-history-list {7268  border: 1px solid var(--peach-border);7269  border-radius: 8px;7270  overflow: hidden;7271  margin: 8px 0 4px;7272}72737274.peach-history-row {7275  display: flex;7276  align-items: center;7277  justify-content: space-between;7278  padding: 9px 12px;7279  gap: 10px;7280  border-bottom: 1px solid var(--peach-border);7281}72827283.peach-history-row:last-child {7284  border-bottom: none;7285}72867287.peach-history-meta {7288  display: flex;7289  flex-direction: column;7290  gap: 2px;7291  min-width: 0;7292  flex: 1;7293}72947295.peach-history-time {7296  font-size: 0.75rem;7297  font-family: 'IBM Plex Mono', ui-monospace, monospace;7298  color: var(--peach-t0);7299  white-space: nowrap;7300  overflow: hidden;7301  text-overflow: ellipsis;7302}73037304.peach-history-sub {7305  font-size: 0.625rem;7306  color: var(--peach-t2);7307  letter-spacing: 0.06em;7308  text-transform: uppercase;7309  white-space: nowrap;7310  overflow: hidden;7311  text-overflow: ellipsis;7312}73137314.peach-history-btn {7315  flex-shrink: 0;7316  white-space: nowrap;7317  min-width: 56px;7318  text-align: center;7319}73207321.peach-history-btn.is-busy {7322  opacity: 0.65;7323}73247325.peach-history-footer {7326  font-size: 0.625rem;7327  color: var(--peach-t3);7328  letter-spacing: 0.05em;7329  text-align: right;7330  margin: 0;7331  padding: 2px 0 0;7332}73337334/* ── Context menu + swipe-copy flash ─────────────────────── */7335.peach-context-menu-backdrop {7336  position: fixed;7337  inset: 0;7338  background: rgba(0, 0, 0, 0.45);7339  z-index: 100;7340  display: flex;7341  align-items: flex-end;7342  justify-content: center;7343  animation: peach-ctx-fade 140ms ease both;7344}7345.peach-context-menu {7346  width: min(360px, calc(100vw - 24px));7347  margin-bottom: max(env(safe-area-inset-bottom), 12px);7348  background: var(--peach-bg);7349  border: 1px solid var(--peach-t3);7350  border-radius: 14px;7351  padding: 6px;7352  display: flex;7353  flex-direction: column;7354  gap: 2px;7355  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7356  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7357}7358@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7359@keyframes peach-ctx-rise {7360  from { transform: translateY(16px); opacity: 0; }7361  to   { transform: translateY(0);    opacity: 1; }7362}7363.peach-context-menu-item {7364  background: transparent;7365  color: var(--peach-t0);7366  border: 0;7367  border-radius: 10px;7368  padding: 12px 14px;7369  text-align: left;7370  font: inherit;7371  cursor: pointer;7372}7373.peach-context-menu-item:hover,7374.peach-context-menu-item:focus-visible {7375  background: var(--peach-t3);7376}7377.peach-context-menu-item--danger {7378  color: var(--peach-health-bad, #d96868);7379}7380.peach-context-menu-item--cancel {7381  color: var(--peach-t2);7382  margin-top: 4px;7383  border-top: 1px solid var(--peach-t3);7384  border-radius: 0 0 10px 10px;7385}73867387/* Swipe-to-copy flash */7388.peach-entry-row.is-copy-flash {7389  animation: peach-copy-flash 600ms ease both;7390}7391@keyframes peach-copy-flash {7392  0%   { background: transparent; }7393  20%  { background: rgba(217, 153, 51, 0.32); }7394  100% { background: transparent; }7395}73967397html { font-size: 16px; }73987399/* ── Recovery word entry ─────────────────────────────────────────── */7400.peach-lock-recover-link {7401  display: block;7402  width: 100%;7403  margin-top: 12px;7404  background: none;7405  border: none;7406  font-family: "IBM Plex Mono", monospace;7407  font-size: 0.625rem;7408  letter-spacing: 0.06em;7409  color: var(--peach-t2);7410  cursor: pointer;7411  text-align: center;7412  padding: 4px;7413  transition: color 120ms ease;7414}7415.peach-lock-recover-link:hover {7416  color: var(--peach-t0);7417}74187419.lock-screen--recovery {7420  display: flex;7421  flex-direction: column;7422  align-items: stretch;7423  padding: 12px 20px 24px;7424  overflow: hidden;7425}74267427.peach-recovery-nav {7428  display: flex;7429  align-items: center;7430  position: relative;7431  z-index: 1;7432  margin-bottom: 4px;7433}74347435/* Mask runes to the top decorative band only — keep inputs and the7436   bottom CTA button clear. The bottom of the popup is reserved for7437   submit buttons; rendering runes there overlaps the button glyph. */7438.peach-rune-background--recovery {7439  -webkit-mask-image: linear-gradient(7440    to bottom,7441    black 0px, black 85px,7442    transparent 110px,7443    transparent 100%7444  );7445  mask-image: linear-gradient(7446    to bottom,7447    black 0px, black 85px,7448    transparent 110px,7449    transparent 100%7450  );7451}74527453.peach-recovery-header {7454  text-align: center;7455  margin-bottom: 16px;7456  margin-top: 4px;7457}7458.peach-recovery-header .peach-onboarding-headline {7459  font-size: 1.25rem;7460  font-weight: 300;7461  letter-spacing: 0.02em;7462  margin: 0 0 4px;7463}7464.peach-recovery-header .peach-hint {7465  font-family: "IBM Plex Mono", monospace;7466  font-size: 0.625rem;7467  color: var(--peach-t2);7468  letter-spacing: 0.04em;7469  margin: 0;7470}74717472/* 12-word grid: 2 columns × 6 rows */7473.peach-recovery-grid {7474  display: grid;7475  grid-template-columns: repeat(2, 1fr);7476  gap: 12px 20px;7477  width: 100%;7478  margin-bottom: 0;7479}74807481.peach-recovery-word-slot {7482  display: flex;7483  align-items: center;7484  gap: 6px;7485  min-width: 0;7486}74877488.peach-recovery-word-index {7489  font-family: "IBM Plex Mono", monospace;7490  font-size: 0.5rem;7491  color: rgba(255, 255, 255, 0.35);7492  min-width: 14px;7493  flex-shrink: 0;7494  text-align: right;7495  letter-spacing: 0.04em;7496}74977498.peach-recovery-word-input {7499  flex: 1;7500  min-width: 0;7501  background: transparent;7502  border: none;7503  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7504  color: var(--peach-t0);7505  font-family: "IBM Plex Mono", monospace;7506  font-size: 0.6875rem;7507  letter-spacing: 0.06em;7508  padding: 5px 2px 4px;7509  outline: none;7510  text-transform: lowercase;7511  transition: border-color 120ms ease;7512}7513.peach-recovery-word-input::placeholder {7514  color: rgba(255, 255, 255, 0.18);7515}7516.peach-recovery-word-input:focus {7517  border-bottom-color: var(--peach-accent);7518}75197520.peach-recovery-submit {7521  width: 100%;7522  margin-top: auto;7523}75247525.peach-recovery-new-password-form {7526  width: 100%;7527  display: flex;7528  flex-direction: column;7529  gap: 16px;7530  margin-bottom: 8px;7531}7532.peach-recovery-new-password-form .peach-newvault-field {7533  display: flex;7534  flex-direction: column;7535  gap: 4px;7536}75377538/* ── Recovery words display (post-create) ────────────────────────── */7539.lock-screen--recovery-display {7540  display: flex;7541  flex-direction: column;7542  align-items: stretch;7543  padding: 0 20px 20px;7544  min-height: 0;7545  overflow-y: auto;7546}75477548.peach-recovery-words-display {7549  width: 100%;7550  margin-bottom: 16px;7551  border: 1px solid var(--peach-t3);7552  border-radius: 8px;7553  padding: 12px 14px;7554  background: rgba(245, 240, 234, 0.04);7555}75567557.peach-recovery-words-label {7558  font-family: "IBM Plex Mono", monospace;7559  font-size: 0.5rem;7560  letter-spacing: 0.08em;7561  color: var(--peach-t2);7562  text-transform: uppercase;7563  margin-bottom: 10px;7564}75657566.peach-recovery-word-list {7567  list-style: none;7568  margin: 0;7569  padding: 0;7570  display: grid;7571  grid-template-columns: repeat(2, 1fr);7572  gap: 6px 16px;7573}75747575.peach-recovery-word-item {7576  display: flex;7577  align-items: baseline;7578  gap: 5px;7579}75807581.peach-recovery-word-num {7582  font-family: "IBM Plex Mono", monospace;7583  font-size: 0.5rem;7584  color: var(--peach-t2);7585  width: 14px;7586  flex: 0 0 14px;7587  text-align: right;7588  letter-spacing: 0.04em;7589  font-variant-numeric: tabular-nums;7590}75917592.peach-recovery-download-btn {7593  display: block;7594  margin: 10px auto 0;7595  padding: 4px 10px;7596  background: transparent;7597  border: 1px solid var(--peach-border);7598  border-radius: 6px;7599  color: var(--peach-t2);7600  font-family: "IBM Plex Mono", monospace;7601  font-size: 0.5625rem;7602  letter-spacing: 0.06em;7603  text-transform: lowercase;7604  cursor: pointer;7605  transition: border-color 0.15s, color 0.15s;7606}76077608.peach-recovery-download-btn:hover {7609  border-color: var(--peach-accent);7610  color: var(--peach-t0);7611}76127613.peach-recovery-word-text {7614  font-family: "IBM Plex Mono", monospace;7615  font-size: 0.6875rem;7616  letter-spacing: 0.06em;7617  color: var(--peach-t0);7618  text-transform: lowercase;7619}76207621.peach-hint--warning {7622  color: var(--peach-accent);7623  font-style: italic;7624}7625.peach-hint--success {7626  color: var(--peach-t2);7627  font-family: "IBM Plex Mono", monospace;7628  font-size: 0.625rem;7629  letter-spacing: 0.06em;7630}76317632/* Confirmation step */7633.peach-recovery-confirm {7634  width: 100%;7635  flex: 1;7636  display: flex;7637  flex-direction: column;7638}7639.peach-recovery-confirm-label {7640  font-family: "IBM Plex Mono", monospace;7641  font-size: 0.5625rem;7642  letter-spacing: 0.04em;7643  color: var(--peach-t2);7644  text-align: center;7645  margin: 0 0 12px;7646}7647.peach-recovery-confirm-fields {7648  display: flex;7649  flex-direction: column;7650  gap: 14px;7651  margin-bottom: 10px;7652}7653.peach-recovery-confirm-field {7654  display: flex;7655  align-items: center;7656  gap: 8px;7657}7658.peach-recovery-confirm-num {7659  font-family: "IBM Plex Mono", monospace;7660  font-size: 0.5rem;7661  color: var(--peach-t2);7662  min-width: 44px;7663  letter-spacing: 0.04em;7664}7665.peach-recovery-confirm-input {7666  flex: 1;7667  background: transparent;7668  border: none;7669  border-bottom: 1px solid var(--peach-t3);7670  color: var(--peach-t0);7671  font-family: "IBM Plex Mono", monospace;7672  font-size: 0.6875rem;7673  letter-spacing: 0.06em;7674  padding: 4px 2px 3px;7675  outline: none;7676  text-transform: lowercase;7677  transition: border-color 120ms ease;7678}7679.peach-recovery-confirm-input:focus {7680  border-bottom-color: var(--peach-accent);7681}7682.peach-recovery-confirm-input:disabled {7683  opacity: 0.4;7684  cursor: not-allowed;7685}7686.peach-recovery-confirm-btn {7687  width: 100%;7688  margin-top: auto;7689}76907691/* ============================================================7692   Sync info sheet7693   ============================================================ */76947695.peach-sync-info-backdrop {7696  position: fixed;7697  inset: 0;7698  z-index: 200;7699  background: rgba(0, 0, 0, 0.55);7700  display: flex;7701  align-items: flex-end;7702  animation: peach-fade-in 200ms ease forwards;7703}77047705@keyframes peach-fade-in {7706  from { opacity: 0; }7707  to   { opacity: 1; }7708}77097710.peach-sync-info-sheet {7711  width: 100%;7712  background: var(--peach-bg-card, var(--peach-bg));7713  border-top-left-radius: 20px;7714  border-top-right-radius: 20px;7715  padding: 12px 24px 32px;7716  display: flex;7717  flex-direction: column;7718  gap: 20px;7719  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;7720}77217722@keyframes peach-sheet-up {7723  from { transform: translateY(100%); }7724  to   { transform: translateY(0); }7725}77267727.peach-sync-info-handle {7728  width: 36px;7729  height: 4px;7730  border-radius: 2px;7731  background: var(--peach-border);7732  margin: 0 auto 4px;7733  flex-shrink: 0;7734}77357736.peach-sync-info-title {7737  font-family: 'Cormorant Garamond', serif;7738  font-style: italic;7739  font-size: 26px;7740  font-weight: 600;7741  color: var(--peach-t0);7742  margin: 0;7743  line-height: 1.2;7744}77457746.peach-sync-info-body {7747  display: flex;7748  flex-direction: column;7749  gap: 14px;7750}77517752.peach-sync-info-point {7753  display: flex;7754  gap: 12px;7755  align-items: flex-start;7756  font-size: 14px;7757  color: var(--peach-t2);7758  line-height: 1.6;7759  margin: 0;7760}77617762.peach-sync-info-icon {7763  color: var(--peach-accent);7764  font-size: 16px;7765  flex-shrink: 0;7766  margin-top: 1px;7767}77687769.peach-sync-info-actions {7770  display: flex;7771  flex-direction: column;7772  gap: 12px;7773  margin-top: 4px;7774}77757776.peach-sync-info-pro-link {7777  background: none;7778  border: none;7779  font-size: 13px;7780  color: var(--peach-t3);7781  cursor: pointer;7782  padding: 0;7783  font-family: inherit;7784  text-align: center;7785  transition: color 150ms ease;7786}77877788.peach-sync-info-pro-link:hover {7789  color: var(--peach-accent);7790}77917792.peach-btn--full {7793  width: 100%;7794}77957796/* ── Sync screen ── */77977798.peach-sync-coming-soon {7799  display: flex;7800  align-items: flex-start;7801  gap: 10px;7802  padding: 12px 14px;7803  background: var(--peach-s1);7804  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);7805  border-radius: 10px;7806}7807.peach-sync-coming-soon__icon {7808  flex-shrink: 0;7809  color: var(--peach-accent);7810  margin-top: 1px;7811  line-height: 0;7812}7813.peach-sync-coming-soon__title {7814  font-family: 'Cormorant Garamond', serif;7815  font-weight: 500;7816  font-size: 13px;7817  color: var(--peach-accent);7818  margin: 0 0 5px;7819  line-height: 1.3;7820}7821.peach-sync-coming-soon__body {7822  font-size: 12px;7823  color: var(--peach-t1);7824  line-height: 1.55;7825  margin: 0;7826}78277828.peach-sync-screen {7829  display: flex;7830  flex-direction: column;7831  height: 100%;7832}78337834.peach-sync-content {7835  flex: 1;7836  overflow-y: auto;7837  padding: 24px 20px 40px;7838  display: flex;7839  flex-direction: column;7840  gap: 24px;7841}78427843/* Intro (State A) */7844.peach-sync-headline {7845  font-family: 'Cormorant Garamond', serif;7846  font-style: italic;7847  font-size: 28px;7848  font-weight: 600;7849  color: var(--peach-t0);7850  margin: 0 0 10px;7851  line-height: 1.2;7852}78537854.peach-sync-intro-body {7855  font-size: 14px;7856  color: var(--peach-t1);7857  line-height: 1.6;7858  margin: 0;7859}78607861.peach-sync-pro-note {7862  display: flex;7863  flex-direction: column;7864  gap: 8px;7865  background: var(--peach-t3);7866  border-radius: 10px;7867  padding: 12px 14px;7868}78697870.peach-sync-pro-note-text {7871  font-size: 12px;7872  color: var(--peach-t2);7873  line-height: 1.5;7874  margin: 0;7875}78767877.peach-sync-pro-link {7878  background: none;7879  border: none;7880  font-size: 12px;7881  color: var(--peach-accent);7882  cursor: pointer;7883  padding: 0;7884  font-family: inherit;7885  text-align: left;7886}78877888/* Status (State C) */7889.peach-sync-status {7890  padding: 12px 0;7891  border-bottom: 1px solid var(--peach-border);7892}78937894.peach-sync-status-row {7895  display: flex;7896  align-items: center;7897  gap: 8px;7898}78997900.peach-sync-dot {7901  width: 7px;7902  height: 7px;7903  border-radius: 50%;7904  flex-shrink: 0;7905}79067907.peach-sync-dot--green { background: var(--peach-health-ok); }7908.peach-sync-dot--amber { background: var(--peach-accent); }79097910.peach-sync-status-text {7911  font-family: 'IBM Plex Mono', monospace;7912  font-size: 11px;7913  color: var(--peach-t2);7914}79157916/* Paired devices */7917.peach-sync-section {7918  display: flex;7919  flex-direction: column;7920  gap: 2px;7921}79227923.peach-sync-section-label {7924  font-family: 'IBM Plex Mono', monospace;7925  font-size: 10px;7926  letter-spacing: 0.1em;7927  color: var(--peach-t3);7928  margin: 0 0 10px;7929}79307931.peach-sync-device-row {7932  display: flex;7933  justify-content: space-between;7934  align-items: baseline;7935  padding: 10px 0;7936  border-bottom: 1px solid var(--peach-border);7937  gap: 12px;7938}79397940.peach-sync-device-name {7941  font-size: 14px;7942  color: var(--peach-t1);7943}79447945.peach-sync-device-meta {7946  font-family: 'IBM Plex Mono', monospace;7947  font-size: 11px;7948  color: var(--peach-t3);7949  white-space: nowrap;7950}79517952.peach-sync-hub-note {7953  padding: 14px 16px;7954  border: 1px solid var(--peach-border);7955  border-radius: 10px;7956  display: flex;7957  flex-direction: column;7958  gap: 6px;7959  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);7960}79617962.peach-sync-hub-note-title {7963  font-size: 13px;7964  font-weight: 600;7965  color: var(--peach-t0);7966  margin: 0;7967}79687969.peach-sync-hub-note-body {7970  font-size: 12px;7971  color: var(--peach-t2);7972  line-height: 1.6;7973  margin: 0;7974}79757976/* Action buttons */7977.peach-sync-actions {7978  display: flex;7979  gap: 10px;7980  flex-wrap: wrap;7981}79827983/* Upgrade prompt (State B) */7984.peach-sync-upgrade {7985  display: flex;7986  flex-direction: column;7987  gap: 12px;7988  padding: 16px;7989  border: 1px solid var(--peach-border);7990  border-radius: 10px;7991}79927993.peach-sync-upgrade-text {7994  font-size: 13px;7995  color: var(--peach-t2);7996  line-height: 1.6;7997  margin: 0;7998}79998000/* Network note */8001.peach-sync-network-note {8002  font-size: 12px;8003  color: var(--peach-t3);8004  line-height: 1.6;8005  margin: 0;8006}80078008/* Advanced */8009.peach-sync-advanced {8010  margin-top: auto;8011  padding-top: 16px;8012  border-top: 1px solid var(--peach-border);8013}80148015.peach-sync-advanced-toggle {8016  display: flex;8017  align-items: center;8018  gap: 8px;8019  background: none;8020  border: none;8021  font-family: 'IBM Plex Mono', monospace;8022  font-size: 11px;8023  letter-spacing: 0.08em;8024  color: var(--peach-t3);8025  cursor: pointer;8026  padding: 0;8027  text-transform: uppercase;8028}80298030.peach-sync-advanced-chevron {8031  display: inline-block;8032  transition: transform 200ms ease;8033  font-size: 10px;8034}80358036.peach-sync-advanced-chevron.is-open {8037  transform: rotate(90deg);8038}80398040.peach-sync-advanced-content {8041  margin-top: 14px;8042}80438044.peach-sync-advanced-row {8045  display: flex;8046  justify-content: space-between;8047  align-items: center;8048  gap: 16px;8049}80508051.peach-sync-advanced-title {8052  font-size: 14px;8053  color: var(--peach-t1);8054  margin: 0 0 2px;8055}80568057.peach-sync-advanced-subtitle {8058  font-size: 12px;8059  color: var(--peach-t3);8060  margin: 0;8061  line-height: 1.5;8062}80638064/* ── Add Device — Android scan tabs ─────────────────────────────────────── */80658066.peach-pairing-tabs {8067  display: flex;8068  border: 1px solid var(--peach-border);8069  border-radius: 8px;8070  overflow: hidden;8071  margin-bottom: 4px;8072}80738074.peach-pairing-tab {8075  flex: 1;8076  padding: 10px 0;8077  background: none;8078  border: none;8079  font-family: 'IBM Plex Mono', monospace;8080  font-size: 11px;8081  letter-spacing: 0.06em;8082  color: var(--peach-t2);8083  cursor: pointer;8084  transition: background 150ms, color 150ms;8085}80868087.peach-pairing-tab.is-active {8088  background: var(--peach-accent);8089  color: #fff;8090  font-weight: 600;8091}80928093.peach-pairing-tab:not(.is-active):active {8094  background: var(--peach-border);8095}80968097/* Camera view */8098.peach-pairing-camera-container {8099  position: relative;8100  width: 100%;8101  aspect-ratio: 1;8102  border-radius: 12px;8103  overflow: hidden;8104  background: #000;8105  flex-shrink: 0;8106}81078108.peach-pairing-video {8109  width: 100%;8110  height: 100%;8111  object-fit: cover;8112}81138114.peach-pairing-scan-frame {8115  position: absolute;8116  top: 50%;8117  left: 50%;8118  transform: translate(-50%, -50%);8119  width: 60%;8120  aspect-ratio: 1;8121  border: 2px solid var(--peach-accent);8122  border-radius: 8px;8123  pointer-events: none;8124}81258126/* ── Notes Mode ── */81278128/* Overlay that crossfades over the vault */8129.peach-notes-overlay {8130  position: fixed;8131  inset: 0;8132  z-index: 90;8133  opacity: 0;8134  pointer-events: none;8135  animation: peach-mode-in 220ms ease-in forwards;8136}81378138.peach-notes-overlay.is-visible {8139  opacity: 1;8140  pointer-events: auto;8141}81428143@keyframes peach-mode-in {8144  from { opacity: 0; }8145  to   { opacity: 1; }8146}81478148/* Top-level notes surface */8149.peach-notes-mode {8150  position: absolute;8151  inset: 0;8152  background: var(--peach-bg);8153  display: flex;8154  flex-direction: column;8155}81568157/* Rune canvas positioned behind content */8158.peach-note-rune-canvas {8159  position: absolute;8160  inset: 0;8161  width: 100%;8162  height: 100%;8163  pointer-events: none;8164  z-index: 0;8165}81668167/* TOC wrapper */8168.peach-notes-toc-wrapper {8169  position: absolute;8170  inset: 0;8171  z-index: 1;8172  opacity: 1;8173  pointer-events: auto;8174  transition: opacity 200ms ease;8175}81768177.peach-notes-toc-wrapper.is-hidden {8178  opacity: 0;8179  pointer-events: none;8180}81818182/* Editor wrapper */8183.peach-notes-editor-wrapper {8184  position: absolute;8185  inset: 0;8186  z-index: 2;8187  opacity: 0;8188  pointer-events: none;8189  transition: opacity 200ms ease;8190}81918192.peach-notes-editor-wrapper.is-visible {8193  opacity: 1;8194  pointer-events: auto;8195}81968197/* TOC inner */8198.peach-notes-toc {8199  position: relative;8200  display: flex;8201  flex-direction: column;8202  height: 100%;8203  padding-top: env(safe-area-inset-top, 0px);8204  padding-bottom: env(safe-area-inset-bottom, 0px);8205}82068207/* Shared header */8208.peach-notes-header {8209  display: flex;8210  align-items: center;8211  padding: 12px 16px;8212  gap: 12px;8213  flex-shrink: 0;8214  min-height: 52px;8215  position: relative;8216  z-index: 2;8217}82188219.peach-notes-back {8220  font-size: 22px;8221  color: var(--peach-t2);8222  background: none;8223  border: none;8224  padding: 4px;8225  cursor: pointer;8226  line-height: 1;8227  flex-shrink: 0;8228  transition: color 150ms ease;8229  -webkit-tap-highlight-color: transparent;8230}82318232.peach-notes-back:active { color: var(--peach-t0); }82338234.peach-notes-header-title {8235  flex: 1;8236  font-family: 'Cormorant Garamond', serif;8237  font-style: italic;8238  font-size: 22px;8239  color: var(--peach-t0);8240  text-align: center;8241}82428243.peach-notes-header-title.is-breadcrumb {8244  font-family: 'IBM Plex Mono', monospace;8245  font-style: normal;8246  font-size: 11px;8247  color: var(--peach-t3);8248  letter-spacing: 0.08em;8249  text-transform: uppercase;8250  cursor: pointer;8251}82528253.peach-notes-header-actions {8254  display: flex;8255  gap: 8px;8256  flex-shrink: 0;8257}82588259.peach-notes-header-btn {8260  width: 36px;8261  height: 36px;8262  display: flex;8263  align-items: center;8264  justify-content: center;8265  background: none;8266  border: none;8267  color: var(--peach-t2);8268  cursor: pointer;8269  border-radius: 8px;8270  font-size: 16px;8271  transition: color 150ms ease, background 150ms ease;8272  -webkit-tap-highlight-color: transparent;8273}82748275.peach-notes-header-btn:active {8276  background: rgba(255,255,255,0.06);8277  color: var(--peach-t0);8278}82798280/* Inline search bar */8281.peach-notes-search-input {8282  flex: 1;8283  background: none;8284  border: none;8285  outline: none;8286  font-family: 'IBM Plex Mono', monospace;8287  font-size: 13px;8288  color: var(--peach-t0);8289  padding: 4px 0;8290  letter-spacing: 0.02em;8291}82928293.peach-notes-search-input::placeholder {8294  color: var(--peach-t3);8295}82968297/* TOC list */8298.peach-notes-list-container {8299  flex: 1;8300  overflow-y: auto;8301  overflow-x: hidden;8302  scrollbar-width: none;8303  -webkit-overflow-scrolling: touch;8304  overscroll-behavior: contain;8305  position: relative;8306  z-index: 1;8307}83088309.peach-notes-list-container::-webkit-scrollbar { display: none; }83108311/* Note row */8312.peach-note-row {8313  position: relative;8314  display: grid;8315  grid-template-columns: 44px 8px 1fr 8px auto;8316  align-items: center;8317  min-height: 72px;8318  padding: 16px 20px;8319  border-bottom: 0.5px solid var(--peach-border);8320  cursor: pointer;8321  overflow: hidden;8322  touch-action: pan-y;8323  user-select: none;8324  -webkit-user-select: none;8325  -webkit-tap-highlight-color: transparent;8326}83278328.peach-note-row:first-child {8329  border-top: 0.5px solid var(--peach-border);8330}83318332.peach-note-row:active {8333  background: rgba(255,255,255,0.02);8334}83358336.peach-note-numeral {8337  font-family: 'Cormorant Garamond', serif;8338  font-style: italic;8339  font-size: 15px;8340  color: var(--peach-accent);8341  text-align: right;8342  line-height: 1;8343  flex-shrink: 0;8344}83458346.peach-note-title-gap { /* grid spacer */ }83478348.peach-note-title {8349  font-family: 'Cormorant Garamond', serif;8350  font-style: italic;8351  font-size: 18px;8352  color: var(--peach-t0);8353  line-height: 1.3;8354  min-width: 0;8355  overflow-wrap: break-word;8356}83578358.peach-note-title-match {8359  color: var(--peach-accent);8360}83618362.peach-note-date {8363  font-family: 'IBM Plex Mono', monospace;8364  font-size: 11px;8365  color: var(--peach-t2);8366  white-space: nowrap;8367  text-align: right;8368  flex-shrink: 0;8369  grid-column: 5;8370}83718372/* Swipe underlays */8373.peach-note-row-underlay {8374  position: absolute;8375  inset: 0;8376  display: flex;8377  align-items: center;8378  padding: 0 24px;8379  font-family: 'IBM Plex Mono', monospace;8380  font-size: 11px;8381  letter-spacing: 0.1em;8382  pointer-events: none;8383  z-index: 0;8384}83858386.peach-note-row-underlay--delete {8387  background: #8B2020;8388  color: rgba(255,255,255,0.9);8389  justify-content: flex-end;8390}83918392.peach-note-row-underlay--archive {8393  background: var(--peach-accent);8394  color: #0C0A06;8395  justify-content: flex-start;8396}83978398/* Delete confirm strip */8399.peach-note-delete-confirm {8400  position: absolute;8401  inset: 0;8402  background: var(--peach-bg);8403  display: flex;8404  align-items: center;8405  gap: 12px;8406  padding: 0 20px;8407  font-family: 'IBM Plex Mono', monospace;8408  font-size: 11px;8409  color: var(--peach-t1);8410  letter-spacing: 0.04em;8411  animation: peach-delete-confirm-in 150ms ease both;8412  z-index: 10;8413}84148415@keyframes peach-delete-confirm-in {8416  from { opacity: 0; }8417  to   { opacity: 1; }8418}84198420.peach-note-delete-confirm-btn {8421  background: #8B2020;8422  color: rgba(255,255,255,0.9);8423  border: none;8424  border-radius: 6px;8425  padding: 4px 10px;8426  font-family: 'IBM Plex Mono', monospace;8427  font-size: 10px;8428  cursor: pointer;8429  letter-spacing: 0.06em;8430}84318432.peach-note-delete-cancel-btn {8433  background: none;8434  border: none;8435  color: var(--peach-t3);8436  font-family: 'IBM Plex Mono', monospace;8437  font-size: 10px;8438  cursor: pointer;8439  letter-spacing: 0.06em;8440  padding: 4px 6px;8441}84428443/* + New note button */8444.peach-notes-new-btn {8445  font-family: 'IBM Plex Mono', monospace;8446  font-size: 12px;8447  color: var(--peach-t3);8448  text-align: center;8449  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8450  background: none;8451  border: none;8452  width: 100%;8453  cursor: pointer;8454  letter-spacing: 0.04em;8455  transition: color 150ms ease;8456  -webkit-tap-highlight-color: transparent;8457}84588459.peach-notes-new-btn:active { color: var(--peach-accent); }84608461/* Empty state */8462.peach-notes-empty {8463  display: flex;8464  flex-direction: column;8465  align-items: center;8466  justify-content: center;8467  flex: 1;8468  padding: 48px 32px;8469  gap: 16px;8470}84718472.peach-notes-empty-text {8473  font-family: 'Cormorant Garamond', serif;8474  font-style: italic;8475  font-size: 20px;8476  color: var(--peach-t3);8477  text-align: center;8478  margin: 0;8479  line-height: 1.4;8480  white-space: pre-line;8481}84828483/* ── Editor surface ── */84848485.peach-note-editor-surface {8486  position: absolute;8487  inset: 0;8488  background: var(--peach-bg);8489  display: flex;8490  flex-direction: column;8491  padding-top: env(safe-area-inset-top, 0px);8492}84938494.peach-note-editor-scroll {8495  flex: 1;8496  overflow-y: auto;8497  overflow-x: hidden;8498  scrollbar-width: none;8499  -webkit-overflow-scrolling: touch;8500  padding: 0 24px 120px;8501  position: relative;8502  z-index: 1;8503}85048505.peach-note-editor-scroll::-webkit-scrollbar { display: none; }85068507/* Desktop toolbar (always visible above body) */8508.peach-note-toolbar-desktop-inline {8509  display: flex;8510  align-items: center;8511  gap: 2px;8512  padding: 6px 0 12px;8513  margin-bottom: 4px;8514  border-bottom: 0.5px solid var(--peach-border);8515}85168517/* Title field */8518.peach-note-title-field {8519  font-family: 'Cormorant Garamond', serif;8520  font-style: italic;8521  font-size: 32px;8522  font-weight: 600;8523  color: var(--peach-t0);8524  line-height: 1.2;8525  padding: 8px 0 0;8526  outline: none;8527  min-height: 44px;8528  word-break: break-word;8529  position: relative;8530  z-index: 1;8531}85328533.peach-note-title-field:empty::before {8534  content: attr(data-placeholder);8535  color: var(--peach-t3);8536  pointer-events: none;8537}85388539/* Hairline separator */8540.peach-note-hairline {8541  height: 0.5px;8542  background: var(--peach-border);8543  margin: 12px 0 20px;8544  position: relative;8545  z-index: 1;8546}85478548/* Body field */8549.peach-note-body-field {8550  font-family: 'DM Sans', sans-serif;8551  font-size: 16px;8552  color: var(--peach-t0);8553  line-height: 1.85;8554  padding: 0;8555  outline: none;8556  min-height: 240px;8557  word-break: break-word;8558  position: relative;8559  z-index: 1;8560}85618562.peach-note-body-field:empty::before {8563  content: attr(data-placeholder);8564  color: var(--peach-t3);8565  font-style: italic;8566  pointer-events: none;8567}85688569.peach-note-body-field h2 {8570  font-family: 'Cormorant Garamond', serif;8571  font-style: italic;8572  font-size: 22px;8573  font-weight: 600;8574  color: var(--peach-t0);8575  margin: 20px 0 8px;8576}85778578.peach-note-body-field blockquote {8579  border-left: 2px solid var(--peach-accent);8580  margin: 12px 0;8581  padding-left: 16px;8582  color: var(--peach-t1);8583  font-style: italic;8584}85858586.peach-note-body-field ul,8587.peach-note-body-field ol {8588  padding-left: 20px;8589  margin: 8px 0;8590}85918592.peach-note-body-field li {8593  margin: 4px 0;8594}85958596.peach-note-body-field hr {8597  border: none;8598  border-top: 0.5px solid var(--peach-border);8599  margin: 16px 0;8600}86018602/* Saved indicator */8603.peach-note-saved-indicator {8604  font-family: 'IBM Plex Mono', monospace;8605  font-size: 11px;8606  color: var(--peach-t3);8607  letter-spacing: 0.04em;8608  text-align: right;8609  padding: 6px 24px;8610  flex-shrink: 0;8611  transition: opacity 300ms ease;8612  pointer-events: none;8613  position: relative;8614  z-index: 1;8615}86168617/* Mobile keyboard toolbar */8618.peach-note-toolbar-mobile {8619  display: flex;8620  align-items: center;8621  padding: 8px 16px;8622  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));8623  background: var(--peach-bg);8624  border-top: 0.5px solid var(--peach-border);8625  gap: 4px;8626  flex-shrink: 0;8627  position: relative;8628  z-index: 10;8629}86308631.peach-note-toolbar-btn {8632  min-width: 36px;8633  height: 36px;8634  display: flex;8635  align-items: center;8636  justify-content: center;8637  background: none;8638  border: none;8639  border-radius: 8px;8640  cursor: pointer;8641  font-size: 14px;8642  color: var(--peach-t1);8643  font-family: 'DM Sans', sans-serif;8644  font-weight: 600;8645  transition: background 100ms ease, color 100ms ease;8646  -webkit-tap-highlight-color: transparent;8647}86488649.peach-note-toolbar-btn--italic { font-style: italic; }8650.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }8651.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }86528653.peach-note-toolbar-divider {8654  width: 0.5px;8655  height: 20px;8656  background: var(--peach-border);8657  margin: 0 4px;8658  flex-shrink: 0;8659}86608661.peach-note-toolbar-spacer { flex: 1; }86628663/* Desktop: larger headline in TOC */8664@media (min-width: 400px) {8665  .peach-notes-header-title:not(.is-breadcrumb) {8666    font-size: 32px;8667  }86688669  .peach-note-row {8670    min-height: 64px;8671    padding: 14px 16px;8672  }8673}86748675/* Flying title — shared element during expansion/collapse */86768677/* ─── Light theme overrides ───────────────────────────────────────────────8678   Tokens that cannot be expressed as variable substitutions — hardcoded8679   context-specific values that need separate light-mode rules. */86808681/* Settings section headers: use text-label (#5C4228) for more presence8682   than --t2 alone — gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY8683   the dark anchor they need against the warmer background. */8684.light .peach-settings-sub-label,8685[data-theme="light"] .peach-settings-sub-label,8686.light .peach-settings-nav-label,8687[data-theme="light"] .peach-settings-nav-label {8688  color: #5C4228;8689}86908691/* Secondary action buttons (ghost / subtle): filled with the sunken surface8692   colour so they read as embedded and intentional on the linen background8693   rather than floating. Values track --s3 (bg-sunken) and border-default. */8694.light .peach-btn--ghost,8695[data-theme="light"] .peach-btn--ghost {8696  background: #C4BCB5;8697  border-color: #96724C;8698  color: #1A1208;8699}8700.light .peach-btn--subtle,8701[data-theme="light"] .peach-btn--subtle {8702  background: #C4BCB5;8703  border-color: #96724C;8704}87058706/* Wide secondary action button on the lock screen — override the8707   hardcoded dark-mode rgba values with warm-surface equivalents. */8708.light .peach-lock-secondary,8709[data-theme="light"] .peach-lock-secondary {8710  background: #C4BCB5;8711  border-color: #96724C;8712  color: #1A1208;8713}8714.light .peach-lock-secondary:hover,8715[data-theme="light"] .peach-lock-secondary:hover {8716  background: #C9C0B8;8717}87188719/* Entry row hover: replace the near-invisible light-on-light rgba value. */8720.light .peach-entry-row:hover,8721[data-theme="light"] .peach-entry-row:hover {8722  background: rgba(26, 18, 8, 0.05);8723}8724.light .peach-entry-row.is-active,8725[data-theme="light"] .peach-entry-row.is-active {8726  background: rgba(26, 18, 8, 0.04);8727}8728.light .peach-entry-row.is-selected,8729[data-theme="light"] .peach-entry-row.is-selected {8730  background: rgba(26, 18, 8, 0.06);8731}87328733/* ──────────────────────────────────────────────────────────────────────────8734   Chirp pairing flow — bird-stage animation (Phase 1)8735   See src/popup/components/ChirpPairingFlow.tsx and the brief §6.2.8736   Three-act animation gated on the [data-phase] attribute of8737   .peach-chirp-pair; child layers (birds, chirp arcs, flight wave, dot)8738   each react via either pose class or visibility flag.8739   Tokens: accent surfaces use var(--peach-accent); bird illustration8740   colours are baked into the SVG per the brand-peach exception in §3.1.8741   ────────────────────────────────────────────────────────────────────── */87428743.peach-chirp-pair {8744  position: relative;8745  display: flex;8746  flex-direction: column;8747  padding: 14px 12px 12px;8748  height: 100%;8749  min-height: 100%;8750  width: 100%;8751  box-sizing: border-box;8752  gap: 0;8753  background:8754    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),8755    var(--peach-bg);8756  color: var(--peach-t0);8757  overflow-y: auto;8758  overflow-x: hidden;8759  scrollbar-width: none;8760  isolation: isolate;8761}8762.peach-chirp-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }8763.peach-chirp-pair::before {8764  content: '';8765  position: absolute;8766  inset: 0;8767  border-radius: inherit;8768  pointer-events: none;8769  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);8770  z-index: 0;8771}8772.peach-chirp-pair > * { position: relative; z-index: 1; }87738774/* Header --------------------------------------------------------------- */8775.peach-chirp-head {8776  display: flex; align-items: center; gap: 10px;8777}8778.peach-chirp-back {8779  width: 32px; height: 32px;8780  display: inline-flex; align-items: center; justify-content: center;8781  background: color-mix(in srgb, var(--peach-t0) 6%, transparent);8782  border: 1px solid color-mix(in srgb, var(--peach-t0) 12%, transparent);8783  border-radius: 8px;8784  color: var(--peach-t1);8785  cursor: pointer;8786  transition: background 0.15s ease, color 0.15s ease;8787}8788.peach-chirp-back:hover {8789  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);8790  color: var(--peach-t0);8791}8792.peach-chirp-title {8793  font-family: var(--font-display, Georgia, serif);8794  font-style: italic;8795  font-size: 24px;8796  font-weight: 500;8797  letter-spacing: 0.005em;8798  color: var(--peach-t0);8799  line-height: 1;8800}8801.peach-chirp-head-spacer { flex: 1; }88028803/* Chip row ------------------------------------------------------------- */8804.peach-chirp-chip-row {8805  display: flex;8806  align-items: center;8807  justify-content: flex-start;8808  margin-top: 12px;8809}8810.peach-chirp-chip {8811  display: inline-flex; align-items: center; gap: 8px;8812  padding: 5px 10px 5px 8px;8813  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);8814  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);8815  border-radius: 999px;8816  font-family: var(--peach-mono, ui-monospace, monospace);8817  font-size: 11px;8818  letter-spacing: 0.04em;8819  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));8820}8821.peach-chirp-chip-dot {8822  width: 6px; height: 6px; border-radius: 50%;8823  background: var(--peach-accent);8824  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);8825}8826.peach-chirp-chip[data-phase="paired"] {8827  background: color-mix(in srgb, #4f9eda 12%, transparent);8828  border-color: color-mix(in srgb, #4f9eda 28%, transparent);8829  color: #76b6e8;8830}8831.peach-chirp-chip[data-phase="paired"] .peach-chirp-chip-dot {8832  background: #76b6e8;8833  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);8834}8835.peach-chirp-chip[data-phase="timeout"],8836.peach-chirp-chip[data-phase="mic_denied"],8837.peach-chirp-chip[data-phase="version_mismatch"],8838.peach-chirp-chip[data-phase="handshake_failed"] {8839  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);8840  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);8841  color: var(--peach-warn, #d29257);8842}8843.peach-chirp-chip[data-phase="timeout"] .peach-chirp-chip-dot,8844.peach-chirp-chip[data-phase="mic_denied"] .peach-chirp-chip-dot,8845.peach-chirp-chip[data-phase="version_mismatch"] .peach-chirp-chip-dot,8846.peach-chirp-chip[data-phase="handshake_failed"] .peach-chirp-chip-dot {8847  background: var(--peach-warn, #d29257);8848  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);8849}88508851/* Bird stage ----------------------------------------------------------- */8852.peach-chirp-stage {8853  position: relative;8854  margin: 14px 0 8px;8855  height: 180px;8856  border-radius: 12px;8857  background:8858    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),8859    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),8860    color-mix(in srgb, var(--peach-bg) 92%, #000);8861  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);8862  overflow: hidden;8863  isolation: isolate;8864}8865.peach-chirp-stage::after {8866  content: '';8867  position: absolute;8868  left: 12%; right: 12%;8869  bottom: 36px;8870  height: 1px;8871  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);8872}88738874.peach-chirp-bird-slot {8875  position: absolute;8876  bottom: 8px;8877  width: 100px;8878  height: 110px;8879  display: flex;8880  align-items: flex-end;8881  justify-content: center;8882}8883.peach-chirp-bird-slot-desktop { left: 28px; }8884.peach-chirp-bird-slot-mobile { right: 28px; }88858886/* Mobile bird hops in from the right when handshake begins */8887.peach-chirp-bird-slot-mobile {8888  opacity: 1;8889  transform: translateX(-6px);8890  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);8891}8892.peach-chirp-stage.act-listening .peach-chirp-bird-slot-mobile,8893.peach-chirp-stage.act-chirping .peach-chirp-bird-slot-mobile,8894.peach-chirp-stage.act-idle .peach-chirp-bird-slot-mobile {8895  opacity: 0;8896  transform: translateX(60px) rotate(8deg);8897}8898.peach-chirp-stage.act-handshake .peach-chirp-bird-slot-desktop,8899.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop {8900  transform: translateX(6px);8901  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);8902}89038904/* Paired: both birds bob together */8905.peach-chirp-stage.act-paired .peach-chirp-bird-slot {8906  animation: peach-chirp-happy-bob 1.2s ease-in-out infinite;8907}8908.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { animation-delay: 0.2s; }8909.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop { --bb-x: 6px; }8910.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { --bb-x: -6px; }8911@keyframes peach-chirp-happy-bob {8912  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }8913  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }8914}89158916/* Bird internal -------------------------------------------------------- */8917.peach-chirp-bird {8918  width: 108px;8919  height: 108px;8920  transform-origin: 50% 95%;8921}8922.peach-chirp-bird svg { width: 100%; height: 100%; overflow: visible; }89238924.peach-chirp-bird-body {8925  transform-origin: 50% 80%;8926  animation: peach-chirp-bird-bob 2.4s ease-in-out infinite;8927}8928@keyframes peach-chirp-bird-bob {8929  0%, 100% { transform: translateY(0) scale(1, 1); }8930  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }8931}89328933.peach-chirp-bird-eye-group {8934  animation: peach-chirp-blink 5.2s steps(1, end) infinite;8935  transform-origin: center;8936  transform-box: fill-box;8937}8938@keyframes peach-chirp-blink {8939  0%, 92%, 96%, 100% { transform: scaleY(1); }8940  94%                { transform: scaleY(0.05); }8941}89428943/* Pose: chirping — beak opens, head bobs, aura blooms */8944.peach-chirp-bird-pose-chirping .peach-chirp-bird-body {8945  animation:8946    peach-chirp-bird-bob 2.4s ease-in-out infinite,8947    peach-chirp-squeeze 1.7s ease-in-out infinite;8948}8949@keyframes peach-chirp-squeeze {8950  0%, 70%, 100% { transform-origin: 50% 85%; }8951  78%           { transform: scale(1.04, 0.96) translateY(1px); }8952  86%           { transform: scale(0.98, 1.02); }8953}8954.peach-chirp-bird-pose-chirping .peach-chirp-bird-head-group {8955  animation: peach-chirp-head-bob 1.7s ease-in-out infinite;8956}8957@keyframes peach-chirp-head-bob {8958  0%, 70%, 100% { transform: translateY(0) rotate(0); }8959  78%           { transform: translateY(-3px) rotate(-4deg); }8960  86%           { transform: translateY(-1px) rotate(-2deg); }8961}8962.peach-chirp-bird-pose-chirping .peach-chirp-bird-beak {8963  animation: peach-chirp-beak-open 1.7s ease-in-out infinite;8964}8965@keyframes peach-chirp-beak-open {8966  0%, 70%, 100% { transform: rotate(0) scaleX(1); }8967  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }8968  86%           { transform: rotate(-6deg); }8969}8970.peach-chirp-bird-pose-chirping .peach-chirp-bird-aura {8971  animation: peach-chirp-aura 1.7s ease-in-out infinite;8972}8973@keyframes peach-chirp-aura {8974  0%, 100% { opacity: 0; }8975  50%      { opacity: 0.8; }8976}8977.peach-chirp-bird-pose-chirping .peach-chirp-bird-tail {8978  animation: peach-chirp-tail-twitch 1.7s ease-in-out infinite;8979  transform-origin: 100% 50%;8980}8981@keyframes peach-chirp-tail-twitch {8982  0%, 75%, 100% { transform: rotate(0); }8983  82%           { transform: rotate(-3deg) translateX(-1px); }8984}89858986/* Pose: attentive — head tilts toward partner */8987.peach-chirp-bird-pose-attentive .peach-chirp-bird-head-group {8988  animation: peach-chirp-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;8989}8990@keyframes peach-chirp-head-tilt {8991  0%   { transform: rotate(0) translateY(0); }8992  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }8993  100% { transform: rotate(-6deg); }8994}8995.peach-chirp-bird-pose-attentive .peach-chirp-bird-tail {8996  animation: peach-chirp-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;8997  transform-origin: 100% 50%;8998}8999@keyframes peach-chirp-tail-cock {9000  0%   { transform: rotate(0); }9001  100% { transform: rotate(-4deg); }9002}90039004/* Pose: happy — wing flutter, tuft perk, tail wag */9005.peach-chirp-bird-pose-happy .peach-chirp-bird-wing {9006  transform-origin: 80% 60%;9007  animation: peach-chirp-wing-flutter 0.32s ease-in-out 5;9008}9009@keyframes peach-chirp-wing-flutter {9010  0%, 100% { transform: rotate(0) translateY(0); }9011  50%      { transform: rotate(-16deg) translateY(-2px); }9012}9013.peach-chirp-bird-pose-happy .peach-chirp-bird-tuft {9014  transform-origin: 0% 100%;9015  animation: peach-chirp-tuft-perk 0.4s ease-in-out 3;9016}9017@keyframes peach-chirp-tuft-perk {9018  0%, 100% { transform: rotate(0); }9019  50%      { transform: rotate(-15deg) translateY(-1px); }9020}9021.peach-chirp-bird-pose-happy .peach-chirp-bird-tail {9022  transform-origin: 100% 50%;9023  animation: peach-chirp-tail-wag 0.5s ease-in-out 4;9024}9025@keyframes peach-chirp-tail-wag {9026  0%, 100% { transform: rotate(0); }9027  25%      { transform: rotate(6deg); }9028  75%      { transform: rotate(-6deg); }9029}9030.peach-chirp-bird-pose-happy .peach-chirp-bird-head-group {9031  animation: peach-chirp-head-perk 0.5s ease-out;9032}9033@keyframes peach-chirp-head-perk {9034  0%   { transform: translateY(0); }9035  40%  { transform: translateY(-3px) rotate(2deg); }9036  100% { transform: translateY(0); }9037}90389039/* Pose: sad — body droops forward */9040.peach-chirp-bird-pose-sad .peach-chirp-bird-body {9041  transform: translateY(5px) rotate(-2deg);9042  animation: none;9043}9044.peach-chirp-bird-pose-sad .peach-chirp-bird-head-group {9045  transform: translateY(4px) rotate(8deg);9046}9047.peach-chirp-bird-pose-sad .peach-chirp-bird-tuft { transform: rotate(15deg) translateY(2px); }9048.peach-chirp-bird-pose-sad .peach-chirp-bird-tail { transform: rotate(8deg) translateY(2px); }90499050.peach-chirp-bird-pose-hidden { opacity: 0; }90519052/* Chirp arcs ----------------------------------------------------------- */9053.peach-chirp-arcs {9054  position: absolute;9055  top: 18px;9056  width: 96px;9057  height: 70px;9058  pointer-events: none;9059}9060.peach-chirp-arcs-right { right: -60px; }9061.peach-chirp-arcs-left  { left: -60px; transform: scaleX(-1); }9062.peach-chirp-arc {9063  position: absolute;9064  top: 50%;9065  left: 0;9066  width: 40px;9067  height: 40px;9068  margin-top: -20px;9069  border: 1.2px solid #f4d5a8;9070  border-color: transparent #f4d5a8 transparent transparent;9071  border-radius: 50%;9072  opacity: 0;9073  animation: peach-chirp-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9074}9075@keyframes peach-chirp-arc-expand {9076  0%   { transform: scale(0.4); opacity: 0; }9077  20%  { opacity: 0.9; }9078  100% { transform: scale(1.6); opacity: 0; }9079}90809081/* Flight wave ---------------------------------------------------------- */9082.peach-chirp-flight-track {9083  position: absolute;9084  inset: 32px 36px 38px 36px;9085  pointer-events: none;9086}9087.peach-chirp-flight-wave {9088  position: absolute;9089  top: 8px;9090  left: 76px;9091  right: 76px;9092  height: 60px;9093  width: auto;9094  opacity: 0;9095  transition: opacity 0.15s ease;9096  stroke: #f4d5a8;9097  fill: none;9098}9099.peach-chirp-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9100.peach-chirp-flight-wave.is-visible { opacity: 1; }9101.peach-chirp-flight-path,9102.peach-chirp-flight-path-2 {9103  stroke-dasharray: 240;9104  stroke-dashoffset: 240;9105  stroke-linecap: round;9106  fill: none;9107}9108.peach-chirp-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9109.peach-chirp-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9110.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path {9111  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9112}9113.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path-2 {9114  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9115}9116@keyframes peach-chirp-fly {9117  0%   { stroke-dashoffset: 240; opacity: 0; }9118  20%  { opacity: 1; }9119  100% { stroke-dashoffset: -120; opacity: 0; }9120}91219122/* Connection dot ------------------------------------------------------- */9123.peach-chirp-dot {9124  position: absolute;9125  top: 50%; left: 50%;9126  transform: translate(-50%, -50%);9127  width: 40px; height: 40px;9128  opacity: 0;9129  pointer-events: none;9130  transition: opacity 0.3s ease;9131  color: var(--peach-accent);9132}9133.peach-chirp-dot.is-visible { opacity: 1; }9134.peach-chirp-dot-glow {9135  position: absolute; top: 50%; left: 50%;9136  transform: translate(-50%, -50%);9137  width: 38px; height: 38px;9138  border-radius: 50%;9139  filter: blur(10px);9140  opacity: 0.55;9141  background: var(--peach-accent);9142  animation: peach-chirp-dot-bloom 1.4s ease-out;9143}9144.peach-chirp-dot-core {9145  position: absolute; top: 50%; left: 50%;9146  transform: translate(-50%, -50%);9147  width: 8px; height: 8px;9148  border-radius: 50%;9149  background: var(--peach-accent);9150  box-shadow: 0 0 12px currentColor;9151  animation: peach-chirp-dot-core 1.4s ease-out;9152}9153.peach-chirp-dot-ring {9154  position: absolute; top: 50%; left: 50%;9155  width: 60px; height: 60px;9156  transform: translate(-50%, -50%);9157  animation: peach-chirp-dot-ring 1.4s linear;9158  stroke: var(--peach-accent);9159}9160@keyframes peach-chirp-dot-bloom {9161  0%   { width: 4px; height: 4px; opacity: 0; }9162  35%  { width: 60px; height: 60px; opacity: 0.7; }9163  100% { width: 38px; height: 38px; opacity: 0.55; }9164}9165@keyframes peach-chirp-dot-core {9166  0%   { width: 0; height: 0; }9167  35%  { width: 12px; height: 12px; }9168  100% { width: 8px; height: 8px; }9169}9170@keyframes peach-chirp-dot-ring {9171  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9172  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9173  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9174}91759176/* Motes — drift upward across the stage */9177.peach-chirp-motes {9178  position: absolute;9179  inset: 0;9180  pointer-events: none;9181}9182.peach-chirp-mote {9183  position: absolute;9184  width: 2px; height: 2px;9185  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9186  border-radius: 50%;9187  bottom: 32px;9188  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9189  opacity: 0;9190  animation: peach-chirp-mote-drift 6s linear infinite;9191  animation-delay: calc(var(--mote-i, 0) * 0.7s);9192}9193@keyframes peach-chirp-mote-drift {9194  0%   { transform: translateY(0); opacity: 0; }9195  10%  { opacity: 0.6; }9196  90%  { opacity: 0.1; }9197  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9198}91999200/* Status copy ---------------------------------------------------------- */9201.peach-chirp-copy-host {9202  margin: 4px 4px 10px;9203  text-align: center;9204  min-height: 50px;9205}9206.peach-chirp-copy {9207  animation: peach-chirp-copy-in 0.35s ease both;9208}9209@keyframes peach-chirp-copy-in {9210  from { opacity: 0; transform: translateY(4px); }9211  to   { opacity: 1; transform: translateY(0); }9212}9213.peach-chirp-headline {9214  font-family: var(--font-display, Georgia, serif);9215  font-style: italic;9216  font-size: 20px;9217  font-weight: 500;9218  line-height: 1.2;9219  letter-spacing: 0.005em;9220  color: var(--peach-t0);9221  margin-bottom: 6px;9222}9223.peach-chirp-copy-listening .peach-chirp-headline,9224.peach-chirp-copy-chirping .peach-chirp-headline,9225.peach-chirp-copy-idle .peach-chirp-headline {9226  font-family: inherit;9227  font-style: normal;9228  font-weight: 500;9229  font-size: 15px;9230  color: var(--peach-t0);9231  letter-spacing: 0;9232}9233.peach-chirp-copy-paired .peach-chirp-headline {9234  color: var(--peach-t0);9235  font-weight: 600;9236}9237.peach-chirp-sub {9238  font-size: 12.5px;9239  line-height: 1.45;9240  color: var(--peach-t1);9241  max-width: 280px;9242  margin: 0 auto;9243  text-wrap: pretty;9244}92459246/* Status action -------------------------------------------------------- */9247.peach-chirp-action {9248  margin: 2px 4px 10px;9249}9250.peach-chirp-action-waiting {9251  display: flex;9252  align-items: center;9253  justify-content: space-between;9254  gap: 12px;9255}9256.peach-chirp-cancel {9257  min-width: 96px;9258}9259.peach-chirp-listening {9260  display: inline-flex; align-items: center; gap: 4px;9261  font-family: var(--peach-mono, ui-monospace, monospace);9262  font-size: 9.5px;9263  text-transform: uppercase;9264  letter-spacing: 0.12em;9265  color: var(--peach-t1);9266  padding: 8px 10px;9267}9268.peach-chirp-listen-dot {9269  width: 4px; height: 4px;9270  border-radius: 50%;9271  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9272  animation: peach-chirp-listen-pulse 1.2s ease-in-out infinite;9273}9274.peach-chirp-listen-dot:nth-child(2) { animation-delay: 0.2s; }9275.peach-chirp-listen-dot:nth-child(3) { animation-delay: 0.4s; }9276.peach-chirp-listen-label { margin-left: 6px; }9277@keyframes peach-chirp-listen-pulse {9278  0%, 100% { opacity: 0.25; transform: scale(0.9); }9279  50%      { opacity: 1;     transform: scale(1.15); }9280}92819282.peach-chirp-action-handshake {9283  display: flex;9284  flex-direction: column;9285  align-items: center;9286  gap: 8px;9287  padding: 8px 4px;9288}9289.peach-chirp-meter {9290  width: 100%;9291  max-width: 280px;9292  height: 2px;9293  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9294  border-radius: 2px;9295  position: relative;9296  overflow: hidden;9297}9298.peach-chirp-meter-bar {9299  position: absolute;9300  top: 0; bottom: 0;9301  width: 30%;9302  left: -30%;9303  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9304  animation: peach-chirp-meter-sweep 1.4s ease-in-out infinite;9305}9306@keyframes peach-chirp-meter-sweep {9307  0%   { left: -30%; }9308  100% { left: 100%; }9309}9310.peach-chirp-meter-label {9311  font-family: var(--peach-mono, ui-monospace, monospace);9312  font-size: 9.5px;9313  text-transform: uppercase;9314  letter-spacing: 0.14em;9315  color: var(--peach-t1);9316}93179318.peach-chirp-action-paired {9319  display: flex;9320  align-items: center;9321  gap: 10px;9322}9323.peach-chirp-device-confirm {9324  flex: 1;9325  display: inline-flex;9326  align-items: center;9327  gap: 8px;9328  padding: 9px 10px 9px 12px;9329  border-radius: 10px;9330  background: color-mix(in srgb, #76b6e8 12%, transparent);9331  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9332  font-size: 12.5px;9333  color: var(--peach-t0);9334  min-width: 0;9335}9336.peach-chirp-device-confirm-glyph {9337  display: inline-flex;9338  color: #76b6e8;9339}9340.peach-chirp-device-confirm-name {9341  flex: 1;9342  overflow: hidden;9343  text-overflow: ellipsis;9344  white-space: nowrap;9345}9346.peach-chirp-device-confirm-trust {9347  font-family: var(--peach-mono, ui-monospace, monospace);9348  font-size: 9.5px;9349  text-transform: uppercase;9350  letter-spacing: 0.1em;9351  color: #76b6e8;9352  padding: 2px 6px;9353  border-radius: 4px;9354  background: color-mix(in srgb, #76b6e8 14%, transparent);9355}9356.peach-chirp-done {9357  min-width: 80px;9358}9359.peach-chirp-retry {9360  align-self: center;9361  display: block;9362  margin: 6px auto 0;9363  min-width: 120px;9364}9365.peach-chirp-mic-help {9366  font-size: 12px;9367  color: var(--peach-t1);9368  text-align: center;9369  max-width: 320px;9370  margin: 0 auto;9371}93729373/* Rest state — bird stage at idle pose, primary CTA + paired list */9374.peach-chirp-pair[data-phase="idle"] .peach-chirp-stage {9375  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9376  height: 160px;9377}9378.peach-chirp-pair-start {9379  width: 100%;9380  display: inline-flex;9381  align-items: center;9382  justify-content: center;9383  gap: 8px;9384  padding: 11px 14px;9385  border-radius: 10px;9386  background: var(--peach-accent);9387  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9388  color: #1a0905;9389  font-family: inherit;9390  font-size: 13px;9391  font-weight: 600;9392  letter-spacing: 0.01em;9393  cursor: pointer;9394  transition: filter 0.15s ease, transform 0.1s ease;9395}9396.peach-chirp-pair-start:hover { filter: brightness(1.08); }9397.peach-chirp-pair-start:active { transform: translateY(1px); }93989399.peach-chirp-paired-section {9400  margin-top: 14px;9401  display: flex;9402  flex-direction: column;9403  gap: 8px;9404}9405.peach-chirp-paired-heading {9406  margin: 0;9407  font-family: var(--peach-mono, ui-monospace, monospace);9408  font-size: 10px;9409  font-weight: 500;9410  letter-spacing: 0.14em;9411  text-transform: uppercase;9412  color: var(--peach-t1);9413}94149415/* Footer --------------------------------------------------------------- */9416.peach-chirp-foot {9417  margin: 10px -4px -2px;9418  margin-top: auto;9419}9420.peach-chirp-foot-divider {9421  height: 1px;9422  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9423  margin-bottom: 10px;9424}9425.peach-chirp-foot-text {9426  font-size: 11px;9427  line-height: 1.5;9428  color: var(--peach-t1);9429  text-align: center;9430  padding: 0 4px;9431  text-wrap: pretty;9432}94339434/* Screen-reader-only live region. Kept off the visual flow but read by9435   assistive tech as the pairing phase advances. */9436.peach-sr-only {9437  position: absolute;9438  width: 1px; height: 1px;9439  padding: 0; margin: -1px;9440  overflow: hidden;9441  clip: rect(0, 0, 0, 0);9442  white-space: nowrap;9443  border: 0;9444}94459446/* Reduced motion — stage simplifies to opacity transitions only */9447@media (prefers-reduced-motion: reduce) {9448  .peach-chirp-bird-body,9449  .peach-chirp-bird-head-group,9450  .peach-chirp-bird-beak,9451  .peach-chirp-bird-wing,9452  .peach-chirp-bird-tuft,9453  .peach-chirp-bird-tail,9454  .peach-chirp-bird-eye-group,9455  .peach-chirp-bird-aura,9456  .peach-chirp-arc,9457  .peach-chirp-flight-path,9458  .peach-chirp-flight-path-2,9459  .peach-chirp-dot-glow,9460  .peach-chirp-dot-core,9461  .peach-chirp-dot-ring,9462  .peach-chirp-mote,9463  .peach-chirp-meter-bar,9464  .peach-chirp-listen-dot,9465  .peach-chirp-bird-slot,9466  .peach-chirp-bird-slot-mobile {9467    animation: none !important;9468    transition: opacity 0.2s linear !important;9469  }9470}94719472/* ─────────────────────────────────────────────────────────────────9473   Settings → Sync surface (v3 ChirpSync). Wraps the same bird9474   animation used by the pairing flow with a paired-devices list and9475   the "Pair a device" CTA.9476   ───────────────────────────────────────────────────────────────── */9477.peach-chirp-settings {9478  position: relative;9479  display: flex;9480  flex-direction: column;9481  gap: 18px;9482  padding: 14px 12px 12px;9483  width: 100%;9484  box-sizing: border-box;9485  overflow-y: auto;9486  overflow-x: hidden;9487  height: 100%;9488  /* Same warm Chirp surface as the pairing screen — unifies the two views. */9489  background:9490    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9491    var(--peach-bg);9492  color: var(--peach-t0);9493  isolation: isolate;9494  /* Hide native scrollbar — content fits 99% of the time and a chunky9495     gutter ruins the surface. */9496  scrollbar-width: none;9497}9498.peach-chirp-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9499.peach-chirp-settings::before {9500  content: '';9501  position: absolute;9502  inset: 0;9503  pointer-events: none;9504  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9505  z-index: 0;9506}9507.peach-chirp-settings > * { position: relative; z-index: 1; }95089509.peach-chirp-settings--pairing {9510  padding: 0;9511  align-items: stretch;9512  justify-content: stretch;9513  background: none;9514  isolation: auto;9515}9516.peach-chirp-settings--pairing::before { display: none; }95179518.peach-chirp-settings-header {9519  display: flex;9520  align-items: center;9521  gap: 10px;9522}9523.peach-chirp-settings-title {9524  margin: 0;9525  font-family: var(--font-display, Georgia, serif);9526  font-style: italic;9527  font-size: 24px;9528  font-weight: 500;9529  line-height: 1;9530  color: var(--peach-t0);9531  letter-spacing: 0.005em;9532}9533.peach-chirp-settings-section {9534  margin: 6px 0 -4px;9535  font-size: 11px;9536  font-weight: 600;9537  letter-spacing: 0.08em;9538  text-transform: uppercase;9539  color: var(--peach-text-muted);9540}9541.peach-chirp-settings-error {9542  font-size: 12px;9543  padding: 8px 10px;9544  border-radius: 8px;9545  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);9546  color: var(--peach-text);9547}9548.peach-chirp-settings-footer {9549  margin-top: auto;9550  padding-top: 18px;9551  font-size: 11.5px;9552  line-height: 1.5;9553  color: var(--peach-text-muted);9554  text-align: center;9555}95569557/* Hero card shown when no devices are paired yet. */9558.peach-chirp-hero {9559  display: flex;9560  flex-direction: column;9561  align-items: center;9562  gap: 12px;9563  padding: 20px 12px 8px;9564  text-align: center;9565}9566.peach-chirp-hero-svg {9567  display: block;9568  max-width: 100%;9569  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));9570}9571.peach-chirp-hero-headline {9572  margin: 0;9573  font-family: var(--font-display, Georgia, serif);9574  font-style: italic;9575  font-size: 20px;9576  font-weight: 500;9577  line-height: 1.2;9578  letter-spacing: 0.005em;9579  color: var(--peach-t0);9580}9581.peach-chirp-hero-sub {9582  margin: 0;9583  font-size: 13px;9584  line-height: 1.5;9585  color: var(--peach-t1);9586  max-width: 320px;9587  text-wrap: pretty;9588}95899590.peach-chirp-pair-cta {9591  display: flex;9592  justify-content: center;9593  padding: 4px 0 6px;9594}9595.peach-chirp-pair-button {9596  display: inline-flex;9597  align-items: center;9598  gap: 8px;9599  min-width: 220px;9600  justify-content: center;9601}9602.peach-chirp-pair-button-icon {9603  flex: 0 0 auto;9604}96059606/* Paired devices list. Roomy rows that look at home next to the rest9607   of Settings; stale rows get a soft warm-warning border tint. */9608.peach-chirp-device-list {9609  list-style: none;9610  margin: 0;9611  padding: 0;9612  display: flex;9613  flex-direction: column;9614  gap: 8px;9615}9616.peach-chirp-device-row {9617  display: flex;9618  align-items: center;9619  gap: 12px;9620  padding: 12px;9621  border-radius: 10px;9622  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9623  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);9624}9625.peach-chirp-device-row[data-stale="true"] {9626  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);9627}9628.peach-chirp-device-icon {9629  width: 32px;9630  height: 32px;9631  display: flex;9632  align-items: center;9633  justify-content: center;9634  border-radius: 8px;9635  color: var(--peach-text);9636  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);9637}9638.peach-chirp-device-info {9639  flex: 1;9640  display: flex;9641  flex-direction: column;9642  gap: 2px;9643  min-width: 0;9644}9645.peach-chirp-device-name {9646  font-size: 14px;9647  font-weight: 600;9648  color: var(--peach-text);9649  overflow: hidden;9650  text-overflow: ellipsis;9651  white-space: nowrap;9652}9653.peach-chirp-device-meta {9654  font-size: 11.5px;9655  color: var(--peach-text-muted);9656  display: flex;9657  flex-wrap: wrap;9658  align-items: center;9659  gap: 8px;9660}9661.peach-chirp-device-badge {9662  font-size: 10.5px;9663  font-weight: 500;9664  letter-spacing: 0.02em;9665  padding: 2px 6px;9666  border-radius: 999px;9667  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);9668  color: var(--peach-text);9669}9670.peach-chirp-device-stale {9671  font-size: 10.5px;9672  font-weight: 500;9673  color: var(--peach-warn, #d29257);9674}9675.peach-chirp-device-remove {9676  flex: 0 0 auto;9677  color: var(--peach-text-muted);9678}9679.peach-chirp-device-remove:hover {9680  color: var(--peach-danger, #c25b4a);9681}9682.peach-chirp-unpair-confirm {9683  display: flex;9684  gap: 6px;9685  align-items: center;9686}96879688/* Pro-gate card — soft upsell with a stylised wave illustration. */9689.peach-chirp-pro-card {9690  margin: 8px 0;9691  padding: 22px 18px;9692  border-radius: 14px;9693  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 84%, var(--peach-accent) 16%);9694  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);9695  display: flex;9696  flex-direction: column;9697  align-items: center;9698  gap: 12px;9699  text-align: center;9700}9701.peach-chirp-pro-illustration {9702  display: flex;9703  align-items: center;9704  justify-content: center;9705  gap: 10px;9706  color: var(--peach-accent);9707}9708.peach-chirp-pro-mark {9709  width: 44px;9710  height: 44px;9711}9712.peach-chirp-pro-waves {9713  opacity: 0.85;9714}9715.peach-chirp-pro-headline {9716  margin: 2px 0 0;9717  font-size: 16px;9718  font-weight: 600;9719  color: var(--peach-text);9720}9721.peach-chirp-pro-body {9722  margin: 0;9723  font-size: 13px;9724  line-height: 1.55;9725  color: var(--peach-text-dim);9726  max-width: 320px;9727}