popup.css

1html,2body,3#app,4#pre-lock,5.popup-root {6  width: 320px;7  min-height: 520px;8  height: 520px;9  margin: 0;10}1112body {13  overflow: hidden;14  background: var(--bg);15  color: var(--t0);16  font-family: var(--font-ui);17  font-weight: 300;18  position: relative;19}2021* {22  box-sizing: border-box;23}2425button,26input,27textarea,28select {29  font: inherit;30}3132button {33  border: 0;34}3536#pre-lock {37  position: absolute;38  inset: 0;39  z-index: 10;40}4142#pre-lock[hidden] {43  display: none;44}4546.popup-root {47  position: relative;48  overflow: hidden;49}5051.peach-theme {52  color: var(--peach-t0);53  font-family: var(--font-ui);54  font-weight: 300;55  box-sizing: border-box;56  text-align: left;57}58.peach-theme, .peach-theme * { box-sizing: inherit; }5960.peach-brand-mark {61  width: 14px;62  height: 14px;63  flex-shrink: 0;64}6566.peach-status-pip.is-hidden {67  display: none;68}6970.peach-status-pip.unlocked {71  background: var(--peach-health-ok);72  box-shadow: 0 0 6px rgba(100, 210, 100, 0.6);73}7475.peach-status-pip.pulse {76  animation: pip-pulse 400ms var(--peach-curve-settle) both;77}7879/* Shell */80.peach-shell, .peach-screen {81  background:82    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),83    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),84    var(--peach-bg);85  border: 1px solid var(--peach-t3);86  box-shadow:87    0 2px 8px rgba(0,0,0,0.55),88    0 14px 48px rgba(0,0,0,0.7),89    0 0 0 1px rgba(240,232,216,0.04);90  overflow: hidden;91}92.peach-shell {93  display: grid;94  grid-template-rows: auto 1fr;95  min-height: 520px;96  position: relative;97  isolation: isolate;98}99100.peach-shell[data-surface="extension"] {101  width: min(320px, 100vw);102  border-radius: 0;103  height: 520px;104  max-height: 520px;105  overflow: hidden;106}107108/* ── Lock screen – full-window lock/create stage ── */109.lock-screen--vault-stage {110  display: flex;111  flex-direction: column;112  gap: 18px;113  padding: 20px 18px 18px;114  justify-content: flex-start;115}116.lock-screen--vault-stage .peach-lock-panel {117  margin-top: auto;118}119.peach-lock-headline--unlock {120  max-width: 220px;121}122.peach-lock-hero--unlock {123  padding-top: 14px;124}125.peach-lock-panel--unlock {126  gap: 10px;127}128129.peach-lock-restore-link {130  background: transparent;131  border: none;132  cursor: pointer;133  font-family: var(--font-mono);134  font-size: 0.625rem;135  letter-spacing: 0.08em;136  color: var(--t1);137  padding: 5px 0;138  text-align: left;139  transition: color 150ms ease;140}141142.peach-lock-restore-link:hover {143  color: var(--t0);144}145.peach-shell[data-surface="extension"] .peach-stage {146  min-height: 250px;147}148149/* Screen (unlock) */150.peach-screen {151  width: min(320px, 100vw);152  min-height: 100%;153  height: 100%;154  border-radius: 0;155  padding: 16px 20px 18px;156  display: grid;157  gap: 14px;158}159.peach-screen[data-motion-phase="enter"] {160  animation: peach-screen-enter var(--peach-dur-600) var(--peach-curve-arrival) both;161}162.peach-screen-header { min-height: 20px; }163164/* Wordmark */165.peach-wordmark {166  margin: 0;167  font-family: var(--font-display);168  font-size: 0.9375rem;169  font-style: italic;170  letter-spacing: 0.03em;171  color: var(--peach-t0);172  display: inline-flex;173  min-height: 1em;174}175176/* Motion text / char animation */177.peach-motion-text { display: inline-flex; min-height: 1em; }178.peach-motion-char {179  display: inline-block;180  white-space: pre;181  opacity: 0;182  transform: translateY(0.22em);183  animation: peach-char-enter var(--peach-motion-duration, 380ms) var(--peach-curve-arrival) forwards;184  animation-delay: calc(var(--peach-char-index, 0) * 20ms);185}186187/* Chrome */188.peach-chrome {189  position: relative;190  z-index: 10;191  padding: 16px 20px 0;192  display: flex;193  justify-content: space-between;194  align-items: center;195  /* z-index:10 keeps the header icons above `.peach-loading` (Suspense196     fallback) per §15 regression guard. Without pointer-events:none, the197     empty header strip also sits above `.peach-overlay-view` (z-index:2)198     and swallows clicks meant for an overlay's back button / top search. */199  pointer-events: none;200}201.peach-chrome .peach-btn { pointer-events: auto; }202.peach-chrome.is-hidden-for-overlay,203.peach-search-wrap.is-hidden-for-overlay {204  opacity: 0;205  visibility: hidden;206  pointer-events: none;207}208/* Chirp-sync owns its own surface and header — fully collapse the global209   chrome row so the warm gradient reaches the popup edge. */210.peach-chrome.is-collapsed,211.peach-search-wrap.is-collapsed {212  display: none;213}214.peach-wordmark-wrap { display: flex; align-items: center; gap: 5px; }215.peach-status-pip {216  width: 5px;217  height: 5px;218  border-radius: 50%;219  background: var(--peach-t3);220  display: inline-flex;221  flex-shrink: 0;222  transition: background 400ms ease, box-shadow 400ms ease;223}224.peach-chrome-actions { display: flex; gap: 6px; }225226/* Shell body */227.peach-shell-body {228  position: relative;229  display: grid;230  grid-template-rows: 1fr auto;231  min-height: 0;232  min-width: 0;233  width: 100%;234  overflow: hidden;235  height: 100%;236}237.peach-shell-veil {238  position: absolute; inset: 0;239  background: #000; opacity: 0;240  pointer-events: none; z-index: 1;241}242.peach-shell[data-motion-phase="enter"] .peach-shell-body {243  animation: peach-shell-fade-in var(--peach-dur-600) var(--peach-curve-arrival) both;244}245.peach-shell[data-motion-phase="exit"] .peach-shell-veil {246  animation: peach-veil-in 300ms var(--peach-curve-departure) forwards;247}248249/* Content frame */250.peach-content-frame {251  display: grid;252  grid-template-rows: 1fr auto;253  grid-template-columns: minmax(0, 1fr);254  align-content: start;255  min-height: 0;256  min-width: 0;257  overflow: hidden;258  transition: opacity 80ms ease, transform 80ms ease;259}260.peach-content-frame.navigating {261  opacity: 0.93;262  transform: translateX(2px);263}264.peach-content-frame[data-content-phase="enter"] {265  animation: peach-content-enter 135ms ease-out both;266}267.peach-content-frame[data-content-phase="exit"] {268  animation: peach-content-exit 95ms ease-in forwards;269}270.peach-content-frame[data-content-phase="idle"] { opacity: 1; transform: none; }271272/* Stage */273.peach-stage {274  padding: 10px 20px 12px;275  display: grid;276  gap: 12px;277  align-content: start;278  min-width: 0;279  min-height: 0;280  max-width: 100%;281  overflow-y: auto;282  overflow-x: hidden;283  scrollbar-width: none;284  -ms-overflow-style: none;285  overscroll-behavior: contain;286}287.peach-stage::-webkit-scrollbar { display: none; }288289/* Entry name */290.peach-entry-name-wrap { position: relative; overflow: hidden; max-width: 100%; }291.peach-entry-header {292  position: relative;293  z-index: 1;294  display: flex;295  align-items: flex-start;296  gap: 6px;297  min-width: 0;298}299.peach-entry-header-name {300  flex: 1;301  min-width: 0;302}303.peach-entry-name {304  margin: 0;305  padding-bottom: 0.12em;306  font-family: var(--font-display);307  font-style: italic; font-weight: 400;308  font-size: 44px; line-height: 0.95;309  color: var(--peach-t0);310  display: -webkit-box;311  -webkit-line-clamp: 2;312  -webkit-box-orient: vertical;313  overflow: hidden;314  text-wrap: balance;315}316.peach-entry-name--lg { font-size: 40px; }317.peach-entry-name--xl { font-size: 34px; line-height: 0.98; }318.peach-entry-name--xxl { font-size: 30px; line-height: 1.02; }319.peach-entry-name-text { display: block; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; padding-bottom: 0.12em; }320321/* Trash icon in entry header */322.peach-entry-trash-btn {323  flex-shrink: 0;324  padding: 4px;325  margin-top: 4px;326  background: transparent;327  border: none;328  cursor: pointer;329  color: var(--peach-t2);330  border-radius: 4px;331  transition: color 140ms ease, background 140ms ease;332  display: flex;333  align-items: center;334  justify-content: center;335}336.peach-entry-trash-btn:hover {337  color: var(--peach-t1);338  background: var(--peach-t3);339}340.peach-entry-trash-confirm {341  display: flex;342  align-items: center;343  gap: 6px;344  flex-shrink: 0;345  margin-top: 6px;346  flex-wrap: nowrap;347}348.peach-entry-trash-confirm-label {349  font-family: var(--font-mono);350  font-size: 0.5625rem;351  letter-spacing: 0.1em;352  color: var(--peach-t2);353  white-space: nowrap;354}355.peach-entry-name-button {356  padding: 0;357  background: transparent;358  text-align: left;359  cursor: pointer;360  max-width: 100%;361  overflow: hidden;362  display: block;363}364.peach-entry-name-char {365  display: inline-block;366  white-space: pre;367  opacity: 0;368  transform: translateY(0.22em);369  animation: peach-char-enter 380ms var(--peach-curve-arrival) forwards;370  animation-delay: calc(var(--char-index, 0) * 20ms);371}372373/* Domain */374.peach-domain { border-top: 1px solid var(--peach-t3); padding-top: 9px; }375.peach-domain-row {376  width: 100%; border: 0; background: transparent; color: inherit;377  padding: 0; display: flex; justify-content: space-between; align-items: baseline;378  cursor: default;379}380.peach-domain-value {381  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;382  font-size: 0.625rem; font-style: italic;383  letter-spacing: 0.12em; color: var(--peach-t1);384}385386/* Fields */387.peach-fields { display: grid; gap: 10px; }388.peach-field-card { display: grid; gap: 7px; }389.peach-label {390  font-family: Inter, system-ui, sans-serif;391  text-transform: uppercase; letter-spacing: 0.2em;392  font-size: 0.5rem; color: var(--peach-t2);393}394.peach-add-field-btn {395  align-self: flex-start;396  background: none; border: none; padding: 2px 0;397  font-family: Inter, system-ui, sans-serif;398  font-size: 0.6875rem; color: var(--peach-accent);399  cursor: pointer; opacity: 0.75;400  letter-spacing: 0.02em;401}402.peach-add-field-btn:hover { opacity: 1; }403.peach-field-value-row {404  display: flex; justify-content: space-between;405  align-items: center; gap: 8px;406  min-width: 0;407}408.peach-field-value {409  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;410  font-size: 0.8125rem; color: var(--peach-t1);411  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;412  flex: 1;413  min-width: 0;414}415.peach-password-value {416  display: inline-flex;417  align-items: center;418  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;419  font-size: 1rem; letter-spacing: 0.3em; color: var(--peach-t0);420  overflow: hidden;421  text-overflow: ellipsis;422  white-space: nowrap;423  flex: 1;424  min-width: 0;425  max-width: 100%;426}427.peach-password-value.is-revealed {428  font-size: 0.875rem;429  letter-spacing: 0.08em;430}431.peach-password-text,432.peach-password-mask {433  display: block;434  width: 100%;435  overflow: hidden;436  white-space: nowrap;437  /* Render as uniform mid-line bullets, not baseline periods */438  font-family: Inter, system-ui, sans-serif;439  font-size: 0.625rem;440  letter-spacing: 3px;441  user-select: none;442}443.peach-field-actions { display: flex; gap: 4px; align-items: center; }444.peach-password-strength { display: flex; align-items: center; gap: 8px; }445.peach-strength-bar { display: flex; gap: 3px; }446.peach-strength-seg { width: 28px; height: 4px; border-radius: 2px; background: #eee; }447.peach-strength-label {448  font-family: "IBM Plex Mono", monospace;449  font-style: italic;450  font-size: 0.5625rem;451  font-weight: 300;452  min-width: 36px;453  text-align: right;454  color: var(--peach-t2);455  letter-spacing: 0.06em;456}457458.peach-strength-hairline {459  display: flex;460  align-items: center;461  gap: 10px;462  margin-top: -2px;463}464465.peach-strength-hairline-track {466  flex: 1;467  height: 3px;468  border-radius: 2px;469  background: var(--peach-s2);470  overflow: hidden;471}472473.peach-strength-hairline-fill {474  height: 100%;475  border-radius: 2px;476  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),477    background 400ms ease;478}479480/* Note content (display) */481.peach-note-content {482  border-top: 1px solid var(--peach-t3);483  padding-top: 10px;484  font-family: var(--font-display);485  font-size: 0.9375rem;486  line-height: 1.75;487  color: var(--peach-t1);488}489490/* ── Inline editing ─────────────────────────────────────────────────── */491492/* Clickable display values */493.peach-inline-clickable {494  cursor: text;495  border-radius: 3px;496  transition: background 150ms ease;497}498.peach-inline-clickable:hover {499  background: rgba(240, 232, 216, 0.05);500}501502/* Subtle "edit" hint that appears on hover */503.peach-inline-edit-hint {504  font-family: Inter, system-ui, sans-serif;505  font-size: 0.5625rem;506  text-transform: uppercase;507  letter-spacing: 0.14em;508  color: var(--peach-t2);509  opacity: 0;510  transition: opacity 120ms ease;511  pointer-events: none;512  margin-left: 6px;513  flex-shrink: 0;514}515.peach-domain-row:hover .peach-inline-edit-hint {516  opacity: 1;517}518519/* Title editing */520.peach-inline-title-wrap {521  display: flex;522  flex-direction: column;523  gap: 6px;524}525.peach-inline-title-input {526  font-family: var(--font-display);527  font-style: italic;528  font-weight: 400;529  font-size: 40px;530  line-height: 0.95;531  color: var(--peach-t0);532  background: transparent;533  border: none;534  border-bottom: 1px solid var(--peach-accent);535  outline: none;536  width: 100%;537  padding: 2px 0;538}539540/* Generic inline field */541.peach-inline-field-wrap {542  display: flex;543  flex-direction: column;544  gap: 6px;545}546.peach-inline-input {547  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;548  font-size: 0.8125rem;549  color: var(--peach-t0);550  background: transparent;551  border: none;552  border-bottom: 1px solid var(--peach-accent);553  outline: none;554  width: 100%;555  padding: 3px 0;556}557.peach-inline-textarea {558  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;559  font-size: 0.6875rem;560  line-height: 1.7;561  color: var(--peach-t0);562  background: rgba(240, 232, 216, 0.04);563  border: 1px solid var(--peach-accent);564  border-radius: 4px;565  outline: none;566  width: 100%;567  padding: 8px;568  resize: vertical;569  min-height: 80px;570}571572/* Save / cancel row */573.peach-inline-actions {574  display: flex;575  gap: 6px;576  align-items: center;577}578.peach-inline-save-btn,579.peach-inline-cancel-btn {580  display: inline-flex;581  align-items: center;582  justify-content: center;583  width: 26px;584  height: 26px;585  border-radius: 4px;586  border: none;587  cursor: pointer;588  transition: background 140ms ease, opacity 140ms ease;589  flex-shrink: 0;590}591.peach-inline-save-btn {592  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);593  color: var(--peach-accent);594}595.peach-inline-save-btn:hover:not(:disabled) {596  background: color-mix(in srgb, var(--peach-accent) 30%, transparent);597}598.peach-inline-cancel-btn {599  background: rgba(240, 232, 216, 0.06);600  color: var(--peach-t2);601}602.peach-inline-cancel-btn:hover:not(:disabled) {603  background: rgba(240, 232, 216, 0.12);604  color: var(--peach-t1);605}606.peach-inline-save-btn:disabled,607.peach-inline-cancel-btn:disabled {608  opacity: 0.4;609  cursor: not-allowed;610}611612/* Inline password generator wrapper */613.peach-inline-generator-wrap {614  margin-top: 10px;615  padding-top: 10px;616  border-top: 1px solid var(--peach-t3);617  display: flex;618  flex-direction: column;619  gap: 8px;620}621.peach-inline-generator-cancel {622  align-self: flex-start;623  font-size: 0.6875rem;624  color: var(--peach-t2);625}626627/* "is-editing" card state */628.peach-field-card.is-editing {629  background: rgba(240, 232, 216, 0.02);630  border-radius: 6px;631  padding: 8px;632  margin: -8px;633}634635/* Inline tag editor on Entry detail view */636.peach-inline-tag-editor {637  display: flex;638  flex-direction: column;639  gap: 6px;640}641642/* Quiet inline "+ add X" link in the entry detail body */643.peach-entry-add-link {644  justify-self: start;645  margin-top: 8px;646}647648/* Additional URLs editor revealed by clicking the URL field */649.peach-additional-urls {650  display: flex;651  flex-direction: column;652  gap: 6px;653  margin-top: 8px;654}655.peach-additional-urls-label {656  font-size: 0.5625rem;657  letter-spacing: 0.1em;658  text-transform: uppercase;659  color: var(--peach-t2);660  margin-bottom: 2px;661}662.peach-additional-url-row {663  display: flex;664  align-items: center;665  gap: 6px;666}667.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }668.peach-additional-url-remove {669  background: transparent;670  border: 1px solid var(--peach-t3);671  color: var(--peach-t2);672  width: 22px;673  height: 22px;674  border-radius: 4px;675  cursor: pointer;676  font-size: 0.875rem;677  line-height: 1;678  display: inline-flex;679  align-items: center;680  justify-content: center;681  flex-shrink: 0;682  transition: color 120ms ease, border-color 120ms ease;683}684.peach-additional-url-remove:hover:not(:disabled) {685  color: var(--peach-accent);686  border-color: var(--peach-border-accent);687}688.peach-additional-urls-add { align-self: flex-start; }689690/* Delete row */691.peach-entry-delete-row {692  display: flex;693  align-items: center;694  gap: 8px;695  padding-top: 18px;696  margin-top: 8px;697  border-top: 1px solid var(--peach-t3);698}699.peach-delete-btn {700  font-size: 0.6875rem;701  color: var(--peach-t2);702  padding: 4px 0;703}704.peach-delete-confirm-text {705  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;706  font-size: 0.6875rem;707  font-style: italic;708  color: var(--peach-t2);709  flex-shrink: 0;710}711712/* TOTP band */713.peach-totp-band {714  border-top: 1px solid var(--peach-t3);715  padding: 12px 20px 14px;716  position: relative;717  display: grid;718  grid-template-columns: 1fr auto;719  gap: 10px;720}721.peach-totp-main {722  min-width: 0;723  cursor: pointer;724  user-select: none;725}726.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }727.peach-totp-code-row {728  display: flex;729  align-items: flex-end;730  gap: 10px;731  min-width: 0;732}733.peach-totp-code {734  margin: 2px 0 0;735  font-family: var(--font-display);736  font-style: italic;737  font-weight: 300;738  font-size: 38px; color: var(--peach-accent);739  line-height: 0.95; min-height: 1em;740  min-width: 0;741}742.peach-totp-code-text {743  display: inline-flex;744  overflow: hidden;745  text-overflow: ellipsis;746  white-space: nowrap;747}748.peach-totp-copy-btn {749  margin-bottom: 2px;750  flex-shrink: 0;751  border-color: transparent;752}753.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }754.peach-totp-countdown {755  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;756  font-size: 22px; color: var(--peach-t1);757}758.peach-totp-ring { transform: rotate(-90deg); }759.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }760.peach-totp-ring-progress {761  fill: none; stroke: var(--peach-accent); stroke-width: 2;762  stroke-linecap: round;763  transition: stroke-dashoffset 1s linear, stroke 500ms ease;764}765/* Search bar */766.peach-search-wrap {767  border-top: 1px solid var(--peach-t3);768  background: var(--peach-s1);769  min-height: 54px; position: relative;770  box-shadow: inset 0 6px 18px transparent;771  transition: box-shadow 700ms ease;772}773.peach-search-wrap::before {774  content: "";775  position: absolute;776  left: 0;777  top: 0;778  height: 2px;779  width: var(--peach-totp-progress, 0%);780  background: var(--peach-accent);781  opacity: 0;782  transition: width 1s linear, opacity 180ms ease;783  pointer-events: none;784}785.peach-shell[data-totp-active="true"] .peach-search-wrap::before {786  opacity: 0.9;787}788.peach-shell[data-totp-active="true"] .peach-search-wrap {789  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);790}791792@keyframes peach-totp-code-flare {793  0%   { filter: brightness(1); }794  25%  { filter: brightness(1.3); }795  100% { filter: brightness(1); }796}797.peach-totp-code.is-hot {798  animation: peach-totp-code-flare 3000ms ease-in-out both;799}800.peach-search-bar {801  min-height: 54px;802  display: grid;803  grid-template-columns: auto minmax(0, 1fr) auto;804  align-items: center;805  gap: 8px; padding: 0 9px 0 12px;806}807.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }808.peach-search-input {809  border: 0; background: transparent; color: var(--peach-t0);810  font-family: var(--font-display);811  font-style: italic; font-size: 18px;812  outline: none; width: 100%; min-width: 0; padding: 0;813  caret-color: var(--peach-accent);814}815.peach-search-input::placeholder { color: var(--peach-t2); }816.peach-search-meta {817  display: grid;818  grid-auto-flow: column;819  align-items: center;820  justify-content: end;821  gap: 6px;822  min-width: max-content;823}824.peach-search-counter {825  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;826  font-size: 0.625rem; color: var(--peach-t2);827  display: inline-flex;828  align-items: center;829  line-height: 1;830}831.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }832833/* Buttons */834.peach-btn {835  border: 1px solid transparent; border-radius: 12px;836  background: transparent; color: var(--peach-t0);837  font-family: Inter, system-ui, sans-serif;838  font-size: 0.75rem; letter-spacing: 0.02em; padding: 8px 12px;839  cursor: pointer;840  transition:841    background-color var(--peach-dur-80) var(--peach-curve-arrival),842    color var(--peach-dur-80) var(--peach-curve-arrival),843    border-color var(--peach-dur-150) var(--peach-curve-arrival);844}845.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }846.peach-btn:disabled {847  opacity: 0.45;848  cursor: not-allowed;849}850.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 0.6875rem; }851.peach-btn--md { min-height: 38px; }852.peach-btn--accent {853  background: var(--peach-accent);854  color: rgba(0,0,0,0.92);855  font-weight: 500;856  box-shadow:857    0 1px 0 rgba(255,255,255,0.08) inset,858    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),859    0 3px 16px var(--peach-glow),860    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);861}862.peach-btn--accent:hover:not(:disabled) {863  background: var(--peach-accent);864  filter: brightness(1.10) saturate(1.05);865  box-shadow:866    0 1px 0 rgba(255,255,255,0.10) inset,867    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),868    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),869    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);870}871.peach-btn--ghost { border-color: var(--peach-t3); color: var(--peach-t1); }872.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }873.peach-icon-btn {874  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;875  display: inline-flex; align-items: center; justify-content: center;876}877878.peach-btn:focus-visible {879  outline: none;880  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);881}882883/* Lock button */884.peach-lock-icon { transform-origin: center; }885.peach-lock-btn.is-locking { color: var(--peach-accent); }886.peach-lock-btn.is-locking .peach-lock-icon {887  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);888}889890/* Biometric unlock button */891.peach-biometric-btn {892  display: flex;893  align-items: center;894  justify-content: center;895  gap: 6px;896  margin-top: 8px;897  width: 100%;898}899900/* Copy button */901.peach-copy-btn {902  position: relative; overflow: hidden;903  color: var(--peach-t2); border-color: var(--peach-t3);904}905.peach-copy-icon {906  display: inline-flex; align-items: center; justify-content: center;907  position: relative; z-index: 1;908}909.peach-copy-icon-svg { display: block; }910.peach-copy-sheen {911  position: absolute; inset: 0;912  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--peach-accent) 18%, transparent) 30%, color-mix(in srgb, var(--peach-accent) 8%, transparent) 100%);913  opacity: 0; transform: scaleX(0.15); transform-origin: left center;914}915.peach-copy-btn.is-copied {916  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;917  box-shadow:918    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),919    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),920    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);921}922.peach-copy-btn.is-copied .peach-copy-icon {923  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;924}925.peach-copy-btn.is-copied .peach-copy-sheen {926  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;927}928.peach-copy-btn.is-retreat {929  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;930}931.peach-copy-btn.is-retreat .peach-copy-sheen {932  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;933}934.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }935.peach-copy-drain-bar {936  display: block; width: 100%; height: 100%;937  background: var(--peach-accent); opacity: 0.7;938  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;939}940941/* Unlock screen elements */942.peach-unlock-headline {943  margin: 2px 0 0;944  font-family: var(--font-display);945  font-size: 52px; line-height: 0.95;946  font-style: italic; font-weight: 400;947}948.peach-subline {949  margin: 0;950  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;951  font-size: 0.625rem; color: var(--peach-t2); font-style: italic;952}953.peach-subline--lock {954  max-width: 248px;955  line-height: 1.5;956}957.peach-underline-input {958  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);959  padding: 6px 0; background: transparent; color: var(--peach-t0);960  outline: none;961  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;962  font-size: 0.8125rem;963  caret-color: var(--peach-accent);964}965.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }966.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }967.peach-hint {968  margin: 0;969  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;970  font-size: 0.625rem; color: var(--peach-t2);971}972.peach-unlock-footer {973  margin-top: 4px; display: flex; align-items: center; gap: 7px;974  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;975  font-size: 0.625rem; color: var(--peach-t2);976}977.peach-unlock-footer--lock {978  padding-top: 2px;979}980981/* Breach badge */982.peach-breach-badge {983  display: flex;984  position: relative;985  z-index: 1;986  align-items: center;987  gap: 7px;988  font-size: 0.5625rem;989  color: var(--peach-breach);990  padding: 5px 10px;991  margin-bottom: 4px;992  border-radius: 8px;993  background: rgba(220, 80, 60, 0.07);994  border: 1px solid rgba(220, 80, 60, 0.18);995  letter-spacing: 0.04em;996}997998.peach-breach-action {999  margin-left: auto;1000  font-size: 0.625rem;1001  padding: 3px 8px;1002}10031004.peach-password-value.is-breached {1005  color: rgba(220, 80, 60, 0.75);1006  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1007}10081009/* ── Overlay views ─────────────────────────────────────────────────── */1010.peach-overlay-view {1011  position: absolute;1012  inset: 0;1013  display: flex;1014  flex-direction: column;1015  background:1016    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1017    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1018    var(--peach-bg);1019  z-index: 2;1020  overflow: hidden;1021  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1022}1023@keyframes overlay-in {1024  from { opacity: 0; transform: translateY(8px); }1025  to   { opacity: 1; transform: translateY(0); }1026}1027.peach-overlay-view.ov-enter-up {1028  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1029}1030.peach-overlay-view.ov-exit-up {1031  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1032}1033.peach-overlay-view.ov-enter-right {1034  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1035}1036.peach-overlay-view.ov-exit-right {1037  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1038}10391040@keyframes ov-enter-up {1041  from { opacity: 0; transform: translateY(18px); }1042  to   { opacity: 1; transform: translateY(0); }1043}1044@keyframes ov-exit-up {1045  from { opacity: 1; transform: translateY(0); }1046  to   { opacity: 0; transform: translateY(-12px); }1047}1048@keyframes ov-enter-right {1049  from { opacity: 0; transform: translateX(20px); }1050  to   { opacity: 1; transform: translateX(0); }1051}1052@keyframes ov-exit-right {1053  from { opacity: 1; transform: translateX(0); }1054  to   { opacity: 0; transform: translateX(20px); }1055}10561057/* Overlay shared header */1058.peach-overlay-header {1059  padding: 10px 12px;1060  display: flex;1061  align-items: center;1062  gap: 8px;1063  border-bottom: 1px solid var(--peach-t3);1064  flex-shrink: 0;1065}1066.peach-overlay-title {1067  font-family: "IBM Plex Mono", monospace;1068  font-size: 0.5625rem;1069  text-transform: uppercase;1070  letter-spacing: 0.18em;1071  color: var(--peach-t2);1072  flex: 1;1073  text-align: center;1074}10751076.peach-overlay-card {1077  background: var(--peach-s1);1078  border: 1px solid var(--peach-t3);1079  border-radius: 12px;1080  overflow: hidden;1081  width: 100%;1082}10831084.peach-onboarding-alt-actions {1085  display: flex;1086  flex-direction: column;1087  gap: 4px;1088  padding: 0;1089}10901091.peach-settings-copy {1092  margin: 0 0 10px;1093  font-size: 0.6875rem;1094  line-height: 1.5;1095  color: var(--peach-t2);1096}10971098.peach-settings-copy strong {1099  color: var(--peach-t0);1100}11011102.peach-settings-copy--spacious {1103  margin-bottom: 12px;1104}11051106.peach-settings-copy--result {1107  color: var(--peach-accent);1108  font-size: 0.8125rem;1109  text-align: center;1110  padding: 8px 0;1111}11121113.peach-settings-copy--danger {1114  color: var(--peach-breach);1115}11161117.peach-settings-copy--success {1118  color: var(--peach-accent);1119}11201121.peach-inline-feedback {1122  font-size: 0.6875rem;1123  margin: 10px 0 0;1124}11251126.peach-inline-feedback--ok {1127  color: var(--peach-accent);1128}11291130.peach-inline-feedback--error {1131  color: var(--peach-breach);1132}11331134.peach-inline-feedback--muted {1135  color: var(--peach-t2);1136  font-size: 0.625rem;1137  margin: 4px 0;1138}11391140.peach-inline-feedback--spaced {1141  margin-top: 12px;1142}11431144.peach-settings-actions--row {1145  display: flex;1146  gap: 6px;1147}11481149.peach-settings-actions--end {1150  margin-top: 14px;1151  justify-content: flex-end;1152}11531154.peach-settings-stack {1155  display: flex;1156  flex-direction: column;1157  gap: 6px;1158}11591160.peach-settings-stack--tight {1161  gap: 4px;1162}11631164.peach-settings-stack--spacious {1165  gap: 8px;1166}11671168.peach-settings-input {1169  width: 100%;1170  box-sizing: border-box;1171  padding: 8px 10px;1172  background: rgba(0, 0, 0, 0.22);1173  border: 1px solid transparent;1174  border-radius: 6px;1175  color: var(--peach-t0);1176  font-family: var(--font-ui);1177  font-size: 0.75rem;1178  outline: none;1179  transition: border-color 120ms ease, background 120ms ease;1180}11811182.peach-settings-input:focus {1183  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1184  background: rgba(0, 0, 0, 0.28);1185}11861187.peach-settings-input[type="password"] {1188  font-family: var(--font-mono);1189  letter-spacing: 0.04em;1190}11911192.peach-hidden-file-input {1193  display: none;1194}11951196.peach-checkbox-note {1197  display: flex;1198  align-items: flex-start;1199  gap: 8px;1200  font-size: 0.6875rem;1201  color: var(--peach-t1);1202  cursor: pointer;1203  margin: 12px 0;1204}12051206.peach-checkbox-note input {1207  margin-top: 1px;1208}12091210.peach-danger-notice {1211  background: rgba(220, 80, 60, 0.08);1212  border: 1px solid rgba(220, 80, 60, 0.2);1213  border-radius: 6px;1214  padding: 9px 11px;1215  font-size: 0.6875rem;1216  color: var(--peach-t1);1217  line-height: 1.5;1218}12191220.peach-info-notice {1221  font-size: 0.6875rem;1222  color: var(--peach-t1);1223  line-height: 1.5;1224  background: var(--surface-card);1225  border: 1px solid var(--peach-t3);1226  border-radius: 6px;1227  padding: 8px 10px;1228}12291230.peach-info-notice--warn {1231  border-color: rgba(220, 38, 38, 0.4);1232  background: rgba(220, 38, 38, 0.06);1233  color: rgba(220, 38, 38, 0.92);1234  margin-bottom: 8px;1235}12361237.peach-strength-row {1238  display: flex;1239  align-items: center;1240  gap: 8px;1241  margin-bottom: 10px;1242}12431244.peach-strength-track {1245  flex: 1;1246  height: 4px;1247  background: var(--peach-s2);1248  border-radius: 2px;1249  overflow: hidden;1250}12511252.peach-strength-fill {1253  height: 100%;1254  border-radius: 2px;1255  transition: width 120ms ease, background 120ms ease;1256}12571258/* ── Type selector tabs ── */1259.peach-type-tabs {1260  display: flex;1261  gap: 0;1262  background: var(--peach-t4);1263  border-radius: 8px;1264  padding: 3px;1265}12661267.peach-type-tab {1268  flex: 1;1269  display: flex;1270  align-items: center;1271  justify-content: center;1272  gap: 6px;1273  padding: 6px 10px;1274  border-radius: 6px;1275  border: none;1276  background: transparent;1277  cursor: pointer;1278  font-family: Inter, system-ui, sans-serif;1279  font-size: 0.6875rem;1280  font-weight: 400;1281  letter-spacing: 0.04em;1282  color: var(--peach-t1);1283  transition: background 150ms ease, color 150ms ease;1284}12851286.peach-type-tab.is-active {1287  background: var(--peach-s2);1288  color: var(--peach-t0);1289  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1290}12911292.peach-type-tab:not(.is-active):hover {1293  color: var(--peach-t0);1294}12951296.peach-type-tab svg {1297  opacity: 0.7;1298  flex-shrink: 0;1299}13001301.peach-type-tab.is-active svg {1302  opacity: 1;1303}13041305/* ── List view ───────────────────────────────────────────────────────── */1306.peach-list-top {1307  padding: 0 10px;1308  min-height: 46px;1309  display: flex;1310  align-items: center;1311  gap: 6px;1312  border-bottom: 1px solid var(--peach-t3);1313  flex-shrink: 0;1314  background: var(--peach-s1);1315}13161317.peach-vault-list {1318  flex: 1;1319  overflow-y: auto;1320  scrollbar-width: none;1321}1322.peach-vault-list::-webkit-scrollbar { display: none; }13231324/* Scrollbar — vault list */1325.peach-vault-list {1326  scrollbar-width: thin;1327  scrollbar-color: var(--peach-t3) transparent;1328}13291330.peach-vault-list::-webkit-scrollbar {1331  width: 3px;1332}13331334.peach-vault-list::-webkit-scrollbar-thumb {1335  background: var(--peach-t3);1336  border-radius: 2px;1337}13381339.peach-entry-row {1340  width: 100%;1341  display: flex;1342  align-items: center;1343  gap: 10px;1344  padding: 9px 16px;1345  background: transparent;1346  border: none;1347  border-bottom: 1px solid var(--peach-t3);1348  cursor: pointer;1349  color: inherit;1350  text-align: left;1351  transition: background 80ms ease;1352}1353.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1354.peach-entry-row:last-child { border-bottom: none; }1355.peach-entry-row.is-active {1356  box-shadow: inset 2px 0 0 var(--peach-accent);1357  background: rgba(240,232,216,0.03);1358}1359.peach-entry-row:focus-visible {1360  outline: none;1361  box-shadow: 0 0 0 1px var(--peach-border-accent);1362  background: rgba(240,232,216,0.03);1363}1364.peach-entry-row-icon {1365  width: 26px; height: 26px;1366  border-radius: 7px;1367  border: 1px solid var(--peach-t3);1368  display: flex; align-items: center; justify-content: center;1369  color: var(--peach-t2);1370  flex-shrink: 0;1371}1372.peach-entry-row-icon.is-breach {1373  border-color: rgba(220,80,60,0.3);1374  color: rgba(220,80,60,0.7);1375}13761377/* Title-initials chip used as the favicon fallback for login entries whose1378 * real favicon hasn't been cached by the browser yet (freshly-imported,1379 * never-visited domains). Background colour is hashed from the title so1380 * the same entry always shows the same chip. The chip fits the same1381 * 26×26 row icon slot the favicon would take. */1382.peach-favicon-initials {1383  display: inline-flex;1384  align-items: center;1385  justify-content: center;1386  width: 100%;1387  height: 100%;1388  border-radius: 4px;1389  font-family: "IBM Plex Mono", monospace;1390  font-size: 0.5625rem;1391  font-weight: 600;1392  letter-spacing: 0.04em;1393  color: rgba(240, 232, 216, 0.92);1394  text-transform: uppercase;1395  user-select: none;1396}1397.peach-entry-row-info { flex: 1; min-width: 0; }1398.peach-entry-row-name {1399  display: block;1400  font-family: var(--font-display);1401  font-size: 1.0625rem;1402  font-style: italic;1403  font-weight: 400;1404  color: var(--peach-t0);1405  line-height: 1.2;1406  white-space: nowrap;1407  overflow: hidden;1408  text-overflow: ellipsis;1409}1410.peach-entry-row-meta {1411  display: block;1412  font-family: "IBM Plex Mono", monospace;1413  font-size: 0.5625rem;1414  color: var(--peach-t2);1415  margin-top: 1px;1416  letter-spacing: 0.05em;1417}1418.peach-entry-row-dot {1419  width: 5px; height: 5px;1420  border-radius: 50%;1421  background: rgba(220,80,60,0.7);1422  flex-shrink: 0;1423}1424.peach-new-entry-row {1425  display: flex;1426  align-items: center;1427  justify-content: center;1428  gap: 6px;1429  width: 100%;1430  padding: 11px;1431  background: transparent;1432  border: none;1433  border-top: 1px solid var(--peach-t3);1434  color: var(--peach-t2);1435  font-family: "IBM Plex Mono", monospace;1436  font-size: 0.5625rem;1437  text-transform: uppercase;1438  letter-spacing: 0.14em;1439  cursor: pointer;1440  flex-shrink: 0;1441  transition: color 120ms ease, background 120ms ease;1442}1443.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }14441445/* ── Multi-select mode ─────────────────────────────────────────────── */14461447/* Select-mode trigger button in sort bar — same shape as trash btn */1448.peach-sort-select-btn {1449  display: flex;1450  align-items: center;1451  justify-content: center;1452  padding: 3px 5px;1453  background: transparent;1454  border: none;1455  cursor: pointer;1456  color: var(--peach-t2);1457  border-radius: 4px;1458  transition: color 140ms ease, background 140ms ease;1459}1460.peach-sort-select-btn:hover {1461  color: var(--peach-t1);1462  background: var(--peach-t3);1463}14641465/* Sort bar in select mode */1466.peach-select-cancel-btn {1467  background: transparent;1468  border: none;1469  padding: 0 4px;1470  cursor: pointer;1471  font-family: "IBM Plex Mono", monospace;1472  font-size: 0.5625rem;1473  letter-spacing: 0.12em;1474  text-transform: uppercase;1475  color: var(--peach-t2);1476  transition: color 140ms ease;1477  flex-shrink: 0;1478}1479.peach-select-cancel-btn:hover { color: var(--peach-t0); }14801481.peach-select-count-label {1482  flex: 1;1483  text-align: center;1484  font-family: "IBM Plex Mono", monospace;1485  font-size: 0.5625rem;1486  letter-spacing: 0.14em;1487  text-transform: uppercase;1488  color: var(--peach-t1);1489}14901491.peach-select-all-btn {1492  background: transparent;1493  border: none;1494  padding: 0 4px;1495  cursor: pointer;1496  font-family: "IBM Plex Mono", monospace;1497  font-size: 0.5625rem;1498  letter-spacing: 0.12em;1499  text-transform: uppercase;1500  color: var(--peach-t2);1501  transition: color 140ms ease;1502  flex-shrink: 0;1503}1504.peach-select-all-btn:hover { color: var(--peach-accent); }15051506/* List in select mode */1507.peach-vault-list.is-selecting .peach-entry-row {1508  cursor: default;1509}1510.peach-vault-list.is-selecting .peach-entry-row:hover {1511  background: rgba(240,232,216,0.02);1512}1513.peach-vault-list.is-selecting .peach-entry-row.is-selected {1514  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1515}1516.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1517  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1518}15191520/* Select indicator circles in icon slot */1521.peach-entry-row-icon.is-select-icon {1522  color: var(--peach-t2);1523}1524.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1525  color: var(--peach-accent);1526}15271528/* Delete action bar at bottom (replaces new-entry row) */1529.peach-select-action-bar {1530  display: flex;1531  align-items: center;1532  justify-content: center;1533  gap: 7px;1534  width: 100%;1535  padding: 11px;1536  background: transparent;1537  border: none;1538  border-top: 1px solid var(--peach-t3);1539  color: var(--peach-t1);1540  font-family: "IBM Plex Mono", monospace;1541  font-size: 0.5625rem;1542  text-transform: uppercase;1543  letter-spacing: 0.14em;1544  cursor: pointer;1545  flex-shrink: 0;1546  transition: color 120ms ease, background 120ms ease;1547}1548.peach-select-action-bar:not(:disabled):hover {1549  color: var(--peach-t0);1550  background: rgba(220,80,60,0.06);1551}1552.peach-select-action-bar:not(:disabled):hover svg {1553  stroke: rgba(220,80,60,0.8);1554}1555.peach-select-action-bar:disabled,1556.peach-select-action-bar.is-empty {1557  color: var(--peach-t2);1558  cursor: default;1559  opacity: 0.5;1560}1561.peach-search-counter-list {1562  white-space: nowrap;1563  flex-shrink: 0;1564}1565.peach-list-empty {1566  min-height: 180px;1567  display: grid;1568  place-items: center;1569  color: var(--peach-t2);1570  font-family: "IBM Plex Mono", monospace;1571  font-size: 0.6875rem;1572}15731574/* ── Settings view ───────────────────────────────────────────────────── */1575.peach-settings-body {1576  flex: 1;1577  overflow-y: auto;1578  min-height: 0;1579  display: flex;1580  flex-direction: column;1581  padding: 2px 0 10px;1582}1583.peach-settings-group {1584  margin: 4px 10px;1585  padding: 9px 14px 11px;1586  border-radius: 12px;1587  border: 1px solid rgba(255, 255, 255, 0.07);1588  background: rgba(26, 20, 16, 0.60);1589  backdrop-filter: blur(10px) saturate(1.3);1590  -webkit-backdrop-filter: blur(10px) saturate(1.3);1591}15921593.peach-settings-group + .peach-settings-group {1594  margin-top: 6px;1595}15961597@supports not (backdrop-filter: blur(1px)) {1598  .peach-settings-group {1599    background: rgba(26, 20, 16, 0.90);1600    border-color: rgba(255, 255, 255, 0.09);1601    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1602  }1603}16041605.light .peach-settings-group,1606[data-theme="light"] .peach-settings-group {1607  background: rgba(205, 191, 164, 0.68);1608  border-color: rgba(26, 18, 8, 0.10);1609  backdrop-filter: blur(10px) saturate(1.2);1610  -webkit-backdrop-filter: blur(10px) saturate(1.2);1611}16121613@supports not (backdrop-filter: blur(1px)) {1614  .light .peach-settings-group,1615  [data-theme="light"] .peach-settings-group {1616    background: rgba(205, 191, 164, 0.95);1617    border-color: rgba(26, 18, 8, 0.12);1618  }1619}1620.peach-export-intro {1621  padding-bottom: 8px;1622}1623.peach-export-card {1624  display: grid;1625  gap: 10px;1626}1627.peach-rune-canvas {1628  border-radius: 8px;1629  background: rgba(0, 0, 0, 0.22);1630  flex: 1;1631  align-self: center;1632}1633.peach-script-input {1634  font-family: "PeachScript", monospace;1635  font-size: 0.6875rem;1636  line-height: 1.9;1637  letter-spacing: 0.06em;1638  color: var(--peach-t0);1639  background: rgba(0, 0, 0, 0.22);1640  border: none;1641  border-radius: 6px;1642  padding: 12px;1643  width: 100%;1644  min-height: 96px;1645  resize: vertical;1646  word-break: break-all;1647  scrollbar-width: none;1648  -ms-overflow-style: none;1649}16501651.peach-script-input::-webkit-scrollbar { display: none; }1652.peach-csv-warning {1653  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1654  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1655  color: var(--peach-t0);1656  border-radius: 6px;1657  padding: 10px 12px;1658  margin-bottom: 8px;1659  font-size: 0.75rem;1660  line-height: 1.45;1661}1662.peach-export-card--primary {1663  background:1664    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1665}16661667/* Export menu — distribute the three format cards across the popup. */1668.peach-export-menu {1669  display: flex;1670  flex-direction: column;1671  flex: 1;1672  min-height: 0;1673}1674.peach-export-menu .peach-settings-group {1675  flex: 1;1676  display: flex;1677  flex-direction: column;1678  justify-content: center;1679  gap: 10px;1680}16811682/* Result view — the script-string fills the remaining vertical surface. */1683.peach-export-result-group {1684  flex: 1;1685  display: flex;1686  flex-direction: column;1687  min-height: 0;1688  border-bottom: none;1689}1690.peach-export-result-group .peach-export-card {1691  flex: 1;1692  min-height: 0;1693  display: flex;1694  flex-direction: column;1695  gap: 10px;1696}1697.peach-export-result-group .peach-export-card-copy {1698  flex-shrink: 0;1699}1700.peach-export-result-group .peach-settings-label {1701  flex-shrink: 0;1702}1703.peach-export-result-group button {1704  flex-shrink: 0;1705}1706.peach-export-card-head {1707  display: flex;1708  align-items: center;1709  justify-content: space-between;1710  gap: 10px;1711}1712.peach-export-card-copy {1713  margin: 0;1714  font-size: 0.75rem;1715  line-height: 1.55;1716  color: var(--peach-t1);1717}1718.peach-export-note {1719  margin: 0;1720  font-size: 0.625rem;1721  line-height: 1.5;1722  color: var(--peach-t2);1723}1724.peach-export-strength-track {1725  height: 3px;1726  background: var(--peach-border);1727  border-radius: 2px;1728  margin: 4px 0 2px;1729  overflow: hidden;1730}1731.peach-export-strength-fill {1732  height: 100%;1733  border-radius: 2px;1734  transition: width 250ms ease, background 250ms ease;1735}1736.peach-export-strength-warn {1737  margin: 0;1738  font-size: 0.625rem;1739  line-height: 1.5;1740  color: #e84040;1741  font-family: "IBM Plex Mono", monospace;1742}1743.peach-export-strength-hint {1744  margin: 0;1745  font-size: 0.625rem;1746  line-height: 1.5;1747  color: var(--peach-t2);1748  font-family: "IBM Plex Mono", monospace;1749}1750.peach-export-pill {1751  display: inline-flex;1752  align-items: center;1753  padding: 4px 8px;1754  border-radius: 999px;1755  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1756  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1757  color: var(--peach-accent);1758  font-family: "IBM Plex Mono", monospace;1759  font-size: 0.5rem;1760  letter-spacing: 0.12em;1761  text-transform: uppercase;1762  white-space: nowrap;1763}1764.peach-export-pill--danger {1765  border-color: rgba(220,80,60,0.22);1766  background: rgba(220,80,60,0.08);1767  color: var(--peach-breach);1768}1769.peach-settings-label {1770  margin: 0 0 6px;1771  font-family: "IBM Plex Mono", monospace;1772  font-size: 0.5rem;1773  text-transform: uppercase;1774  letter-spacing: 0.18em;1775  color: var(--peach-t2);1776}1777.peach-settings-row {1778  display: flex;1779  align-items: center;1780  justify-content: space-between;1781  gap: 12px;1782  min-height: 34px;1783  padding: 6px 0;1784  font-size: 0.8125rem;1785  color: var(--peach-t1);1786}1787.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1788.peach-settings-value {1789  font-family: "IBM Plex Mono", monospace;1790  font-size: 0.625rem;1791  color: var(--peach-t2);1792}17931794.peach-settings-value--status {1795  display: flex;1796  align-items: center;1797  gap: 6px;1798}17991800.peach-settings-link {1801  font-family: "IBM Plex Mono", monospace;1802  font-size: 0.625rem;1803  color: var(--peach-accent);1804  text-decoration: none;1805  cursor: pointer;1806}1807.peach-settings-link:hover {1808  text-decoration: underline;1809}18101811.peach-settings-row--stack {1812  flex-direction: column;1813  align-items: stretch;1814  gap: 6px;1815}18161817.peach-settings-row--top {1818  align-items: flex-start;1819}18201821.peach-settings-row-main {1822  display: flex;1823  flex-direction: column;1824  gap: 4px;1825  flex: 1;1826}1827.peach-toggle {1828  width: 28px; height: 16px;1829  border-radius: 999px;1830  background: var(--peach-t3);1831  border: 1px solid var(--peach-t3);1832  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1833  flex-shrink: 0;1834  transition: background 200ms ease, border-color 200ms ease;1835  cursor: pointer;1836}1837.peach-toggle.is-on {1838  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1839  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1840}1841.peach-toggle-knob {1842  width: 10px; height: 10px;1843  border-radius: 50%;1844  background: var(--peach-t2);1845  flex-shrink: 0;1846  transform: translateX(0px);1847  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1848}1849.peach-toggle.is-on .peach-toggle-knob {1850  background: var(--peach-accent);1851  transform: translateX(12px);1852}1853.peach-settings-footer {1854  display: flex;1855  align-items: center;1856  gap: 8px;1857  margin-top: auto;1858  padding: 14px 16px 8px;1859  font-family: "IBM Plex Mono", monospace;1860  font-size: 0.5625rem;1861  color: var(--peach-t2);1862}18631864/* ── Settings home navigation ──────────────────────────────────────────── */1865.peach-settings-nav-label {1866  margin: 0 0 2px;1867  padding: 12px 16px 4px;1868  font-family: "IBM Plex Mono", monospace;1869  font-size: 0.5rem;1870  text-transform: uppercase;1871  letter-spacing: 0.18em;1872  color: var(--peach-t2);1873}18741875.peach-settings-cat-row {1876  display: flex;1877  align-items: center;1878  gap: 10px;1879  width: 100%;1880  padding: 9px 16px;1881  background: none;1882  border: none;1883  border-bottom: 1px solid var(--peach-t3);1884  cursor: pointer;1885  text-align: left;1886  color: inherit;1887  transition: background var(--peach-dur-80) ease;1888}1889.peach-settings-cat-row:hover {1890  background: var(--peach-t3);1891}1892.peach-settings-cat-row:last-child {1893  border-bottom: none;1894}18951896.peach-settings-cat-icon {1897  width: 28px;1898  height: 28px;1899  border-radius: 7px;1900  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1901  color: var(--peach-accent);1902  display: flex;1903  align-items: center;1904  justify-content: center;1905  flex-shrink: 0;1906}1907/* Light theme: peach-on-cream is too low-contrast — both colors are warm.1908   Darken the icon stroke to ink and bump the bg tint so the icon reads1909   sharply while the cell still feels accent-tinted. */1910.light .peach-settings-cat-icon {1911  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);1912  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));1913}19141915.peach-settings-cat-content {1916  flex: 1;1917  display: flex;1918  flex-direction: column;1919  gap: 2px;1920  min-width: 0;1921}19221923.peach-settings-cat-name {1924  font-size: 0.8125rem;1925  font-weight: 450;1926  color: var(--peach-t0);1927  line-height: 1.2;1928}19291930.peach-settings-cat-desc {1931  font-size: 0.625rem;1932  color: var(--peach-t2);1933  line-height: 1.3;1934  white-space: nowrap;1935  overflow: hidden;1936  text-overflow: ellipsis;1937}19381939.peach-settings-cat-chevron {1940  color: var(--peach-t2);1941  flex-shrink: 0;1942  opacity: 0.5;1943}19441945/* ── Settings sub-view section labels ──────────────────────────────────── */1946.peach-settings-sub-label {1947  margin: 12px 0 4px;1948  font-family: "IBM Plex Mono", monospace;1949  font-size: 0.5rem;1950  text-transform: uppercase;1951  letter-spacing: 0.18em;1952  color: var(--peach-t2);1953}1954.peach-settings-sub-label:first-child {1955  margin-top: 4px;1956}19571958/* ── Settings: collapsible Advanced section ─────────────────────────────── */1959.peach-settings-advanced-toggle {1960  display: flex;1961  align-items: center;1962  justify-content: space-between;1963  width: 100%;1964  background: none;1965  border: none;1966  cursor: pointer;1967  padding: 12px 0 4px;1968  margin: 0;1969  color: inherit;1970}1971.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {1972  color: var(--peach-t1);1973}1974.peach-settings-advanced-chevron {1975  font-size: 0.5625rem;1976  color: var(--peach-t3);1977  letter-spacing: 0;1978  transition: color 120ms ease;1979}19801981/* ── Feedback form ──────────────────────────────────────────────────────── */1982.peach-feedback-group {1983  flex: 1;1984  display: flex;1985  flex-direction: column;1986  border-bottom: none;1987}19881989.peach-feedback-intro {1990  margin: 4px 0 14px;1991  font-size: 0.75rem;1992  line-height: 1.55;1993  color: var(--peach-t1);1994}19951996.peach-feedback-chips {1997  display: flex;1998  flex-wrap: wrap;1999  gap: 6px;2000  margin-bottom: 14px;2001}20022003.peach-feedback-chip {2004  padding: 4px 10px;2005  border-radius: 999px;2006  border: 1px solid var(--peach-t3);2007  background: none;2008  color: var(--peach-t2);2009  font-size: 0.6875rem;2010  font-family: var(--font-ui);2011  cursor: pointer;2012  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2013    background var(--peach-dur-80) ease;2014}2015.peach-feedback-chip:hover {2016  border-color: var(--peach-t2);2017  color: var(--peach-t1);2018}2019.peach-feedback-chip.is-active {2020  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);2021  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2022  color: var(--peach-accent);2023}20242025.peach-feedback-textarea {2026  flex: 1;2027  width: 100%;2028  min-height: 120px;2029  box-sizing: border-box;2030  background: rgba(0, 0, 0, 0.22);2031  border: 1px solid transparent;2032  border-radius: 6px;2033  color: var(--peach-t0);2034  font-size: 0.75rem;2035  font-family: var(--font-ui);2036  line-height: 1.5;2037  padding: 8px 10px;2038  resize: none;2039  outline: none;2040  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2041}2042.peach-feedback-textarea:focus {2043  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2044  background: rgba(0, 0, 0, 0.28);2045}2046.peach-feedback-textarea:focus {2047  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2048}2049.peach-feedback-textarea::placeholder {2050  color: var(--peach-t2);2051}20522053.peach-feedback-meta {2054  margin: 6px 0 0;2055  font-size: 0.625rem;2056  color: var(--peach-t2);2057  font-family: "IBM Plex Mono", monospace;2058}20592060.peach-feedback-result {2061  margin: 8px 0 0;2062  font-size: 0.6875rem;2063  font-family: "IBM Plex Mono", monospace;2064}2065.peach-feedback-result--ok { color: var(--peach-sync-ok); }2066.peach-feedback-result--err { color: var(--peach-breach); }20672068.peach-feedback-submit {2069  width: 100%;2070  margin-top: 12px;2071  justify-content: center;2072}20732074.peach-feedback-anon {2075  margin: 8px 0 0;2076  font-size: 0.625rem;2077  color: var(--peach-t2);2078  text-align: center;2079}20802081.peach-passkey-badge {2082  margin-left: 8px;2083  font-size: 0.625rem;2084  letter-spacing: 0.06em;2085  text-transform: uppercase;2086  color: var(--peach-t2);2087  font-family: var(--font-ui);2088  vertical-align: middle;2089}20902091.peach-passkey-delete-btn {2092  color: var(--peach-breach);2093  border-color: rgba(229, 85, 85, 0.25);2094}20952096.peach-passkey-delete-confirm {2097  display: flex;2098  align-items: center;2099  gap: 8px;2100  padding: 8px 10px;2101  background: rgba(229, 85, 85, 0.06);2102  border: 1px solid rgba(229, 85, 85, 0.2);2103  border-radius: 6px;2104}21052106.peach-passkey-delete-confirm-copy {2107  flex: 1;2108  font-size: 0.6875rem;2109  color: var(--peach-t1);2110}21112112.peach-passkey-delete-btn--confirm {2113  color: var(--peach-breach);2114  border-color: rgba(229, 85, 85, 0.4);2115}21162117.peach-passkey-activity {2118  flex-direction: column;2119  align-items: flex-start;2120  gap: 4px;2121}21222123.peach-passkey-meta {2124  font-size: 0.6875rem;2125  color: var(--peach-t2);2126}21272128.peach-passkey-actions {2129  position: relative;2130  z-index: 1;2131  margin-top: 14px;2132  display: flex;2133  flex-direction: column;2134  gap: 8px;2135}21362137.peach-passkey-approval {2138  display: flex;2139  flex-direction: column;2140  align-items: center;2141  padding: 16px 20px 14px;2142  gap: 8px;2143  text-align: center;2144}21452146.peach-passkey-approval-icon {2147  width: 36px;2148  height: 36px;2149  border-radius: 10px;2150  background: var(--peach-s2);2151  border: 1px solid var(--peach-t3);2152  display: flex;2153  align-items: center;2154  justify-content: center;2155  flex-shrink: 0;2156  color: var(--peach-accent);2157}21582159.peach-passkey-approval-icon img,2160.peach-passkey-approval-icon svg {2161  width: 22px;2162  height: 22px;2163  border-radius: 5px;2164}21652166.peach-passkey-approval-rp {2167  font-family: var(--font-ui);2168  font-size: 0.75rem;2169  color: var(--peach-t2);2170  letter-spacing: 0.03em;2171}21722173.peach-passkey-approval-action {2174  font-family: var(--font-display);2175  font-style: italic;2176  font-weight: 300;2177  font-size: 18px;2178  color: var(--peach-t0);2179  line-height: 1.1;2180  margin: 1px 0;2181}21822183.peach-passkey-approval-user {2184  font-family: var(--font-mono);2185  font-size: 0.6875rem;2186  color: var(--peach-t1);2187  background: var(--peach-s2);2188  border: 1px solid var(--peach-t3);2189  border-radius: 4px;2190  padding: 3px 8px;2191}21922193.peach-passkey-approval-notice {2194  font-size: 0.625rem;2195  color: var(--peach-t2);2196  line-height: 1.5;2197  max-width: 220px;2198}21992200.peach-passkey-approval-actions {2201  display: flex;2202  gap: 8px;2203  width: 100%;2204  margin-top: 6px;2205}22062207.peach-passkey-approval-actions .peach-btn {2208  flex: 1;2209}22102211/* ── Inline generator drawer ── */2212.peach-generator-drawer {2213  display: grid;2214  grid-template-rows: 0fr;2215  transition: grid-template-rows 320ms var(--peach-curve-arrival);2216  overflow: hidden;2217}2218.peach-generator-drawer.is-open {2219  grid-template-rows: 1fr;2220}2221.peach-generator-drawer-inner {2222  min-height: 0;2223  overflow: hidden;2224}2225.peach-generator-drawer-content {2226  border-top: 1px solid var(--peach-t3);2227  padding: 8px 0 4px;2228  display: flex;2229  flex-direction: column;2230  gap: 8px;2231}22322233/* ── Compact generator (inside entry edit) ── */2234.peach-generator-drawer-content--compact {2235  border-top: 1px solid var(--peach-t3);2236  padding: 8px 0 2px;2237  gap: 7px;2238}2239.peach-pwgen-compact-display-row {2240  display: flex;2241  align-items: center;2242  gap: 6px;2243}2244.peach-pwgen-compact-output {2245  flex: 1;2246  min-width: 0;2247  font-family: "IBM Plex Mono", monospace;2248  font-size: 0.6875rem;2249  font-weight: 400;2250  letter-spacing: 0.04em;2251  color: var(--peach-t0);2252  background: rgba(240, 232, 216, 0.04);2253  border: 1px solid var(--peach-t3);2254  border-radius: 5px;2255  padding: 5px 8px;2256  line-height: 1.5;2257  outline: none;2258  transition: border-color 120ms ease;2259}22602261.peach-pwgen-compact-output:focus {2262  border-color: var(--peach-t1);2263}2264.peach-pwgen-compact-controls {2265  display: flex;2266  align-items: center;2267  gap: 6px;2268}2269.peach-pwgen-compact-slider {2270  flex: 1;2271  min-width: 0;2272  height: 2px !important;2273}2274.peach-pwgen-compact-controls .peach-pwgen-len-num {2275  flex-shrink: 0;2276  min-width: 18px;2277  text-align: right;2278}2279.peach-pwgen-compact-pills {2280  display: flex;2281  gap: 3px;2282  flex-shrink: 0;2283}2284.peach-pwgen-compact-pills .peach-pwgen-pill {2285  padding: 2px 7px;2286  font-size: 0.5rem;2287}2288.peach-pwgen-compact-use {2289  flex-shrink: 0;2290  font-size: 0.625rem !important;2291  padding: 3px 9px !important;2292  min-height: 22px !important;2293  border-radius: 5px !important;2294}22952296/* ── Password edit row (input + eye toggle side-by-side) ── */2297.peach-password-edit-row {2298  display: flex;2299  align-items: center;2300  gap: 6px;2301}2302.peach-password-edit-row .peach-inline-input {2303  flex: 1;2304  min-width: 0;2305}23062307/* ── Generate toggle link ── */2308.peach-generate-toggle-link {2309  display: inline-flex;2310  align-items: center;2311  gap: 5px;2312  background: none;2313  border: none;2314  padding: 0;2315  cursor: pointer;2316  font-family: "IBM Plex Mono", monospace;2317  font-size: 0.625rem;2318  color: var(--peach-t2);2319  letter-spacing: 0.04em;2320  transition: color 120ms ease;2321  align-self: flex-start;2322}2323.peach-generate-toggle-link:hover {2324  color: var(--peach-accent);2325}23262327/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2328.peach-entry-body {2329  flex: 1;2330  overflow-y: auto;2331  overflow-x: hidden;2332  scrollbar-width: none;2333  -ms-overflow-style: none;2334  overscroll-behavior: contain;2335  display: grid;2336  gap: 10px;2337  align-content: start;2338  padding: 10px 20px 14px;2339  min-width: 0;2340  min-height: 0;2341}2342.peach-entry-body::-webkit-scrollbar { display: none; }23432344/* Type-toggle pills + inline note toolbar */2345.peach-new-type-row {2346  display: flex;2347  align-items: center;2348  gap: 6px;2349  margin-bottom: 2px;2350}2351.peach-new-type-btn {2352  background: transparent;2353  border: 1px solid var(--peach-t3);2354  border-radius: 12px;2355  padding: 3px 10px;2356  font-family: "IBM Plex Mono", monospace;2357  font-size: 0.5625rem;2358  letter-spacing: 0.12em;2359  text-transform: uppercase;2360  color: var(--peach-t2);2361  cursor: pointer;2362  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2363}2364.peach-new-type-btn.is-active {2365  color: var(--peach-t0);2366  border-color: var(--peach-accent);2367  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2368}2369.peach-new-type-btn:not(.is-active):hover {2370  color: var(--peach-t1);2371  border-color: var(--peach-t2);2372}23732374/* Editable title */2375.peach-new-title-wrap { margin: 0 0 2px; }2376.peach-new-title-input {2377  background: transparent;2378  border: none;2379  outline: none;2380  width: 100%;2381  color: var(--peach-t0);2382  font-family: var(--font-display);2383  font-style: italic;2384  font-weight: 400;2385  font-size: 40px;2386  line-height: 0.95;2387  caret-color: var(--peach-accent);2388}2389.peach-new-title-input::placeholder { color: var(--peach-t2); }23902391/* Editable domain field */2392.peach-domain-edit-row {2393  display: flex;2394  align-items: center;2395  gap: 6px;2396}23972398.peach-domain-edit-row .peach-domain-value--edit {2399  flex: 1;2400  width: 0;2401}24022403.peach-domain-url-btn {2404  flex-shrink: 0;2405  background: transparent;2406  border: none;2407  cursor: pointer;2408  color: var(--peach-t3);2409  padding: 2px 3px;2410  display: flex;2411  align-items: center;2412  line-height: 0;2413  border-radius: 3px;2414  transition: color 120ms ease;2415}24162417.peach-domain-url-btn:hover {2418  color: var(--peach-accent);2419}24202421.peach-domain-value--edit {2422  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2423  font-size: 0.625rem;2424  font-style: italic;2425  letter-spacing: 0.12em;2426  color: var(--peach-t1);2427  background: transparent;2428  border: none;2429  border-bottom: 1px solid var(--peach-t3);2430  outline: none;2431  width: 100%;2432  padding: 2px 0;2433  caret-color: var(--peach-accent);2434  transition: border-color 140ms ease, color 140ms ease;2435}2436.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2437.peach-domain-value--edit:focus {2438  border-bottom-color: rgba(240, 232, 216, 0.28);2439  color: var(--peach-t0);2440}24412442/* Editable field values (username, password, totp) */2443.peach-field-value--edit {2444  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2445  font-size: 0.8125rem;2446  color: var(--peach-t0);2447  background: transparent;2448  border: none;2449  border-bottom: 1px solid var(--peach-t3);2450  outline: none;2451  flex: 1;2452  min-width: 0;2453  padding: 3px 0;2454  caret-color: var(--peach-accent);2455  transition: border-color 140ms ease, color 140ms ease;2456}2457.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2458.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2459.peach-field-value--edit:focus {2460  border-bottom-color: rgba(240, 232, 216, 0.28);2461  color: var(--peach-t0);2462}24632464/* "+ add optional field" links */2465.peach-entry-add-links {2466  display: flex;2467  gap: 12px;2468  flex-wrap: wrap;2469  margin-top: -2px;2470}2471.peach-add-field-link {2472  background: transparent;2473  border: none;2474  padding: 0;2475  cursor: pointer;2476  font-family: "IBM Plex Mono", monospace;2477  font-size: 0.5625rem;2478  letter-spacing: 0.1em;2479  text-transform: uppercase;2480  color: var(--peach-t2);2481  transition: color 140ms ease;2482}2483.peach-add-field-link:hover { color: var(--peach-accent); }24842485/* ── New entry form (legacy classes) ────────────────────────────────── */2486.peach-new-body {2487  flex: 1;2488  overflow-y: auto;2489  padding: 10px 20px 14px;2490}2491.peach-new-name-input {2492  background: transparent;2493  border: none;2494  outline: none;2495  width: 100%;2496  color: var(--peach-t0);2497  font-family: var(--font-display);2498  font-style: italic;2499  font-weight: 400;2500  font-size: 40px;2501  line-height: 0.95;2502  caret-color: var(--peach-accent);2503}2504.peach-new-name-input::placeholder { color: var(--peach-t2); }2505.peach-new-field-input {2506  background: transparent;2507  border: none;2508  outline: none;2509  flex: 1;2510  min-width: 0;2511  caret-color: var(--peach-accent);2512}2513.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }25142515/* ── Canary card ── */2516.peach-canary-card {2517  border: 1px solid rgba(217, 160, 48, 0.2);2518  background: rgba(217, 160, 48, 0.03);2519  border-radius: 8px;2520  padding: 12px;2521}25222523.peach-canary-settings-header {2524  display: flex;2525  align-items: center;2526  justify-content: space-between;2527  cursor: pointer;2528  user-select: none;2529}25302531.peach-canary-card .peach-label {2532  color: rgba(217, 160, 48, 0.85);2533}25342535.peach-canary-card .peach-new-field-input {2536  border-color: rgba(217, 160, 48, 0.25);2537}25382539.peach-canary-card .peach-new-field-input:focus {2540  border-color: rgba(217, 160, 48, 0.5);2541}25422543.peach-canary-body {2544  margin-top: 12px;2545  display: flex;2546  flex-direction: column;2547  gap: 10px;2548}25492550.peach-canary-explainer {2551  display: flex;2552  gap: 10px;2553  padding: 10px 12px;2554  border-radius: 10px;2555  background: rgba(217, 160, 48, 0.06);2556  border: 1px solid rgba(217, 160, 48, 0.22);2557  margin-bottom: 4px;2558}25592560.peach-canary-explainer-icon {2561  font-size: 1rem;2562  flex-shrink: 0;2563  line-height: 1.2;2564}25652566.peach-canary-explainer-title {2567  font-family: var(--font-ui);2568  font-size: 0.6875rem;2569  font-weight: 500;2570  color: rgba(217, 160, 48, 0.9);2571  margin: 0 0 3px;2572}25732574.peach-canary-explainer-copy {2575  font-family: var(--font-ui);2576  font-size: 0.625rem;2577  color: var(--peach-t2);2578  line-height: 1.55;2579  margin: 0;2580}25812582.peach-canary-hint {2583  font-size: 0.625rem;2584  color: var(--peach-t2);2585  font-family: Inter, system-ui, sans-serif;2586  line-height: 1.5;2587  margin-top: 4px;2588}25892590.peach-canary-actions-row {2591  display: flex;2592  align-items: center;2593  gap: 8px;2594}25952596.peach-canary-test-btn {2597  border-color: rgba(217, 160, 48, 0.3);2598  color: rgba(217, 160, 48, 0.85);2599}26002601.peach-canary-test-result {2602  font-size: 0.625rem;2603  font-family: Inter, system-ui, sans-serif;2604}26052606.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2607.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }26082609.peach-canary-badge {2610  display: flex;2611  position: relative;2612  z-index: 1;2613  align-items: center;2614  gap: 5px;2615  padding: 4px 10px;2616  background: rgba(217, 160, 48, 0.12);2617  border: 1px solid rgba(217, 160, 48, 0.35);2618  border-radius: 6px;2619  margin-bottom: 6px;2620  width: fit-content;2621}26222623.peach-canary-badge-label {2624  font-size: 0.625rem;2625  letter-spacing: 0.06em;2626  color: rgba(217, 160, 48, 0.9);2627  font-family: var(--font-ui);2628  text-transform: uppercase;2629}26302631.peach-canary-badge-icon {2632  font-size: 0.6875rem;2633}26342635.peach-canary-suppress-row {2636  display: flex;2637  align-items: center;2638  gap: 8px;2639  padding: 6px 10px;2640  background: rgba(217, 160, 48, 0.08);2641  border-radius: 6px;2642  margin-bottom: 8px;2643}26442645.peach-canary-suppress-label {2646  font-size: 0.6875rem;2647  color: rgba(217, 160, 48, 0.85);2648  cursor: pointer;2649  font-family: var(--font-ui);2650  letter-spacing: 0.04em;2651}26522653.peach-regen-panel {2654  position: relative;2655  z-index: 1;2656  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2657  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2658  border-radius: 8px;2659  padding: 12px;2660  margin-bottom: 8px;2661}26622663.peach-regen-panel-header {2664  display: flex;2665  align-items: center;2666  justify-content: space-between;2667  margin-bottom: 10px;2668}26692670.peach-regen-panel-title {2671  font-size: 0.6875rem;2672  font-weight: 600;2673  letter-spacing: 0.06em;2674  text-transform: uppercase;2675  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2676}26772678.peach-regen-output {2679  background: rgba(0, 0, 0, 0.2);2680  border-radius: 6px;2681  padding: 10px;2682  margin-bottom: 10px;2683  font-family: var(--font-mono);2684  font-size: 0.8125rem;2685  word-break: break-all;2686  color: var(--peach-t1);2687}26882689.peach-regen-actions {2690  display: flex;2691  gap: 6px;2692}26932694.peach-regen-actions--spaced {2695  margin-bottom: 8px;2696}26972698.peach-regen-action-grow {2699  flex: 1;2700}27012702.peach-regen-copy-btn {2703  padding: 0 8px;2704}27052706.peach-regen-success {2707  position: relative;2708  z-index: 1;2709  background: rgba(40, 180, 80, 0.1);2710  border: 1px solid rgba(40, 180, 80, 0.3);2711  border-radius: 8px;2712  padding: 10px 12px;2713  margin-bottom: 8px;2714  display: flex;2715  align-items: center;2716  gap: 8px;2717  font-size: 0.6875rem;2718  color: rgba(40, 180, 80, 0.9);2719}27202721/* ── Note editor overlay ── */2722.peach-note-editor {2723  position: absolute;2724  inset: 0;2725  z-index: 200;2726  display: flex;2727  flex-direction: column;2728  background:2729    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2730    var(--peach-bg);2731  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2732}27332734.peach-note-editor-header {2735  display: flex;2736  align-items: center;2737  gap: 10px;2738  padding: 14px 16px 10px;2739  border-bottom: 1px solid var(--peach-t3);2740  flex-shrink: 0;2741}27422743.peach-note-editor-back {2744  background: transparent;2745  border: none;2746  cursor: pointer;2747  color: var(--peach-t2);2748  padding: 4px 6px;2749  border-radius: 6px;2750  display: flex;2751  align-items: center;2752  transition: color 120ms ease, background 120ms ease;2753  flex-shrink: 0;2754}2755.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }27562757.peach-note-editor-label {2758  flex: 1;2759  font-family: var(--font-display);2760  font-style: italic;2761  font-size: 0.9375rem;2762  color: var(--peach-t1);2763  letter-spacing: 0.02em;2764}27652766.peach-note-editor-save-btn {2767  background: transparent;2768  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2769  border-radius: 8px;2770  color: var(--peach-accent);2771  font-family: "IBM Plex Mono", monospace;2772  font-size: 0.625rem;2773  letter-spacing: 0.06em;2774  text-transform: uppercase;2775  padding: 3px 10px;2776  cursor: pointer;2777  transition: background 120ms ease, border-color 120ms ease;2778}2779.peach-note-editor-save-btn:hover:not(:disabled) {2780  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2781  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2782}2783.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }27842785.peach-note-toolbar {2786  display: flex;2787  align-items: center;2788  gap: 3px;2789  padding: 6px 14px 5px;2790  border-bottom: 1px solid var(--peach-t3);2791  flex-shrink: 0;2792}27932794.peach-note-tool-btn {2795  background: transparent;2796  border: 1px solid transparent;2797  border-radius: 5px;2798  color: var(--peach-t2);2799  font-family: "IBM Plex Mono", monospace;2800  font-size: 0.625rem;2801  letter-spacing: 0.04em;2802  padding: 2px 8px;2803  cursor: pointer;2804  line-height: 1.6;2805  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2806}2807.peach-note-tool-btn:hover {2808  background: var(--peach-t4);2809  color: var(--peach-t0);2810  border-color: var(--peach-t3);2811}28122813.peach-note-tool-icon {2814  padding: 3px 7px;2815  display: inline-flex;2816  align-items: center;2817  justify-content: center;2818}28192820.peach-note-tool-divider {2821  width: 1px;2822  height: 14px;2823  background: var(--peach-t3);2824  margin: 0 4px;2825  flex-shrink: 0;2826}28272828.peach-note-editor-body {2829  flex: 1;2830  overflow-y: auto;2831  padding: 16px 20px 20px;2832  outline: none;2833  font-family: var(--font-display);2834  font-size: 1rem;2835  line-height: 1.75;2836  color: var(--peach-t0);2837  scrollbar-width: none;2838  word-break: break-word;2839}2840.peach-note-editor-body:empty::before {2841  content: "write your note…";2842  color: var(--peach-t3);2843  font-style: italic;2844  pointer-events: none;2845}28462847/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2848.peach-note-editor-inline {2849  display: flex;2850  flex-direction: column;2851  flex: 1;2852  min-height: 0;2853}2854.peach-note-editor-body--inline {2855  flex: 1;2856  min-height: 0;2857  font-size: 0.9375rem;2858  padding: 10px 20px 14px;2859}28602861/* Full-width toolbar row inside the body (Add.tsx note type).2862   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */2863.peach-note-toolbar-body {2864  display: flex;2865  align-items: center;2866  gap: 3px;2867  padding: 5px 20px 4px;2868  margin: 2px -20px 0;2869  border-bottom: 1px solid var(--peach-t3);2870  flex-shrink: 0;2871}28722873/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2874   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2875   and .peach-note-tool-divider button-level styles. */2876.peach-note-toolbar-inline {2877  display: flex;2878  align-items: center;2879  gap: 3px;2880  margin-left: auto;2881  padding-left: 10px;2882  border-left: 1px solid var(--peach-t3);2883  min-height: 22px;2884}28852886/* Entry.tsx toolbar row (no tabs, toolbar only) */2887.peach-entry-note-toolbar-row {2888  display: flex;2889  align-items: center;2890  margin: 4px 0 6px;2891  position: relative;2892  z-index: 1;2893}2894.peach-entry-note-toolbar-row .peach-note-toolbar-inline {2895  border-left: none;2896  padding-left: 0;2897  margin-left: 0;2898}28992900/* Note body — fills available vertical space in Add.tsx and Entry.tsx */2901.peach-note-body {2902  display: flex;2903  flex-direction: column;2904  flex: 1;2905  min-height: 0;2906  margin: 4px 0 0;2907}2908.peach-entry-body--new .peach-note-body {2909  margin: 8px -20px 0;2910}29112912/* Add.tsx body is a grid by default; swap to a flex column when a note is2913   active so the note body can stretch and pin the tags row to the bottom. */2914.peach-entry-body--new:has(.peach-note-body) {2915  display: flex;2916  flex-direction: column;2917}29182919/* Rich content element styles (editor + display) */2920.peach-note-editor-body h2,2921.peach-note-content h2 {2922  font-family: var(--font-display);2923  font-size: 20px;2924  font-weight: 600;2925  font-style: italic;2926  color: var(--peach-t0);2927  margin: 6px 0 2px;2928  line-height: 1.3;2929}2930.peach-note-editor-body ul,2931.peach-note-content ul {2932  padding-left: 18px;2933  margin: 3px 0;2934  list-style: disc;2935}2936.peach-note-editor-body ol,2937.peach-note-content ol {2938  padding-left: 18px;2939  margin: 3px 0;2940  list-style: decimal;2941}2942.peach-note-editor-body li,2943.peach-note-content li { margin: 2px 0; }2944.peach-note-editor-body hr,2945.peach-note-content hr {2946  border: none;2947  border-top: 1px solid var(--peach-t3);2948  margin: 10px 0;2949}29502951/* font size elements from execCommand */2952.peach-note-editor-body font[size="1"],2953.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }2954.peach-note-editor-body font[size="2"],2955.peach-note-content font[size="2"] { font-size: 0.8125rem; }2956.peach-note-editor-body font[size="3"],2957.peach-note-content font[size="3"] { font-size: 1rem; }2958.peach-note-editor-body font[size="4"],2959.peach-note-content font[size="4"] { font-size: 20px; }2960.peach-note-editor-body font[size="5"],2961.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }29622963/* bold / italic inside the editor and note display */2964.peach-note-editor-body b, .peach-note-editor-body strong,2965.peach-note-content b, .peach-note-content strong { font-weight: 700; }2966.peach-note-editor-body em, .peach-note-editor-body i,2967.peach-note-content em, .peach-note-content i { font-style: italic; }29682969/* note display — rendered HTML, no pre-wrap */2970.peach-note-content {2971  overflow: auto;2972  max-height: 340px;2973  word-break: break-word;2974}29752976/* ── Note textarea ── */2977.peach-note-textarea {2978  width: 100%;2979  min-height: 180px;2980  max-height: 280px;2981  resize: vertical;2982  background: var(--peach-t4);2983  border: 1px solid var(--peach-t3);2984  border-radius: 8px;2985  padding: 10px 12px;2986  font-family: "IBM Plex Mono", monospace;2987  font-size: 0.75rem;2988  line-height: 1.7;2989  color: var(--peach-t1);2990  outline: none;2991  transition: border-color 150ms ease;2992}29932994.peach-note-textarea:focus {2995  border-color: var(--peach-t2);2996}29972998.peach-note-char-count {2999  font-family: "IBM Plex Mono", monospace;3000  font-size: 0.5625rem;3001  color: var(--peach-t3);3002  text-align: right;3003  margin-top: 4px;3004  letter-spacing: 0.1em;3005}30063007/* ── Field input baseline ── */3008.peach-new-field-input {3009  width: 100%;3010  background: transparent;3011  border: none;3012  border-bottom: 1px solid var(--peach-t3);3013  padding: 4px 0;3014  color: var(--peach-t1);3015  font-family: "IBM Plex Mono", monospace;3016  font-size: 0.8125rem;3017  outline: none;3018  transition: border-color 150ms ease;3019}30203021.peach-new-field-input:focus {3022  border-bottom-color: var(--peach-t0);3023  color: var(--peach-t0);3024}30253026.peach-new-name-input {3027  width: 100%;3028  background: transparent;3029  border: none;3030  border-bottom: 1px solid var(--peach-t3);3031  padding: 6px 0;3032  font-family: var(--font-display);3033  font-style: italic;3034  font-size: 28px;3035  color: var(--peach-t0);3036  outline: none;3037  transition: border-color 150ms ease;3038}30393040.peach-new-name-input:focus {3041  border-bottom-color: var(--peach-t1);3042}30433044.peach-new-name-input::placeholder {3045  color: var(--peach-t2);3046  font-style: italic;3047}30483049.peach-new-field-input::placeholder {3050  color: var(--peach-t3);3051}30523053/* ── Demo entrance animation ── */3054#hd-shell {3055  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3056}3057@keyframes hd-shell-enter {3058  from { opacity: 0; transform: scale(0.96) translateY(16px); }3059  to   { opacity: 1; transform: scale(1) translateY(0); }3060}30613062/* ── Keyframes ── */3063@keyframes peach-char-enter {3064  from { opacity: 0; transform: translateY(0.22em); }3065  to   { opacity: 1; transform: translateY(0); }3066}3067@keyframes peach-content-enter {3068  from { opacity: 0.96; transform: translateY(4px); }3069  to   { opacity: 1; transform: translateY(0); }3070}3071@keyframes peach-content-exit {3072  from { opacity: 1; transform: translateY(0); }3073  to   { opacity: 0.92; transform: translateY(-3px); }3074}3075@keyframes peach-screen-enter {3076  from { opacity: 0; transform: translateY(14px); }3077  to   { opacity: 1; transform: translateY(0); }3078}3079@keyframes peach-shell-fade-in {3080  from { opacity: 0; }3081  to   { opacity: 1; }3082}3083@keyframes peach-veil-in {3084  from { opacity: 0; }3085  to   { opacity: 1; }3086}3087@keyframes peach-lock-settle {3088  0%   { transform: scale(0.9); }3089  65%  { transform: scale(1.08); }3090  100% { transform: scale(1); }3091}3092@keyframes peach-copy-confirm {3093  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3094  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); }3095}3096@keyframes peach-copy-retreat {3097  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); }3098  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3099}3100@keyframes peach-copy-flood {3101  from { opacity: 0; transform: scaleX(0.15); }3102  to   { opacity: 1; transform: scaleX(1); }3103}3104@keyframes peach-copy-icon-settle {3105  from  { transform: scale(0.84); }3106  70%   { transform: scale(1.08); }3107  to    { transform: scale(1); }3108}3109@keyframes peach-copy-sheen-retreat {3110  from { opacity: 1; transform: scaleX(1); }3111  to   { opacity: 0; transform: scaleX(0.15); }3112}3113@keyframes peach-copy-drain {3114  from { width: 100%; }3115  to   { width: 0; }3116}3117@keyframes peach-shake {3118  0%, 100% { transform: translateX(0); }3119  20%      { transform: translateX(-6px); }3120  40%      { transform: translateX(6px); }3121  60%      { transform: translateX(-4px); }3122  80%      { transform: translateX(4px); }3123}31243125@keyframes pip-pulse {3126  0% { transform: scale(1); }3127  40% { transform: scale(2.2); }3128  100% { transform: scale(1); }3129}313031313132/* ── Password generator ── */3133.peach-pwgen-body {3134  flex: 1; overflow-y: auto;3135  display: flex; flex-direction: column;3136}3137.peach-policy-badge {3138  display: flex; align-items: center;3139  padding: 6px 20px 0;3140  font-size: 0.625rem; font-family: Inter, sans-serif;3141  color: var(--peach-t2); letter-spacing: 0.04em;3142}3143.peach-pwgen-display {3144  padding: 14px 20px 12px;3145  border-bottom: 1px solid var(--peach-t3);3146  display: flex; align-items: flex-start; gap: 10px;3147}3148.peach-pwgen-display-row {3149  display: flex;3150  align-items: flex-start;3151  gap: 8px;3152  padding-bottom: 8px;3153  border-bottom: 1px solid var(--peach-t3);3154}3155.peach-pwgen-output {3156  flex: 1; min-width: 0; margin: 0;3157  font-family: "IBM Plex Mono", monospace;3158  font-size: 0.8125rem; color: var(--peach-t0);3159  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3160  white-space: normal;3161  padding: 10px 12px;3162  background: var(--peach-t4);3163  border-radius: 6px;3164  min-height: 36px;3165}3166.peach-pwgen-output-display {3167  flex: 1;3168  min-width: 0;3169  margin: 0;3170  font-family: var(--font-display);3171  font-style: italic;3172  font-weight: 300;3173  font-size: 32px;3174  line-height: 1.05;3175  color: var(--peach-t0);3176  word-break: break-all;3177  overflow-wrap: break-word;3178  white-space: normal;3179  letter-spacing: 0.02em;3180}3181.peach-pwgen-display-actions {3182  display: flex;3183  flex-direction: column;3184  gap: 4px;3185  flex-shrink: 0;3186  margin-top: 2px;3187}3188.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3189.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3190.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3191.peach-pwgen-len-num {3192  font-family: "IBM Plex Mono", monospace;3193  font-size: 0.75rem; color: var(--peach-accent);3194}3195.peach-pwgen-len-num--edit {3196  cursor: text;3197  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3198}3199.peach-pwgen-len-input {3200  font-family: "IBM Plex Mono", monospace;3201  font-size: 0.75rem;3202  color: var(--peach-accent);3203  background: transparent;3204  border: none;3205  border-bottom: 1px solid var(--peach-accent);3206  outline: none;3207  width: 32px;3208  text-align: right;3209  padding: 0;3210}3211.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3212.peach-pwgen-toggles { display: flex; flex-direction: column; }3213.peach-pwgen-charset-pills {3214  display: flex;3215  gap: 6px;3216  flex-wrap: wrap;3217}3218.peach-pwgen-pill {3219  padding: 4px 11px;3220  border-radius: 999px;3221  border: 1px solid var(--peach-t3);3222  background: transparent;3223  color: var(--peach-t2);3224  font-family: "IBM Plex Mono", monospace;3225  font-size: 0.5625rem;3226  letter-spacing: 0.08em;3227  cursor: pointer;3228  transition: all 150ms ease;3229}3230.peach-pwgen-pill.is-on {3231  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3232  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3233  color: var(--peach-accent);3234}3235.peach-pwgen-pill:not(.is-on):hover {3236  color: var(--peach-t1);3237  border-color: var(--peach-t2);3238}3239.peach-pwgen-use-btn {3240  width: 100%;3241  min-height: 34px;3242  border-radius: 8px;3243  margin-top: 2px;3244}3245.peach-generator-constraint-note {3246  font-family: 'IBM Plex Mono', monospace;3247  font-size: 10px;3248  color: var(--peach-t3);3249  letter-spacing: 0.04em;3250  margin: 0;3251  transition: opacity 200ms ease;3252}3253.peach-pwgen-toggle-row {3254  display: flex; align-items: center; justify-content: space-between;3255  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3256}3257.peach-pwgen-toggle-row:last-child { border-bottom: none; }3258.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }32593260.peach-screen-prelock {3261  z-index: 10;3262}32633264.prelock-form {3265  display: grid;3266  gap: 12px;3267}32683269/* Peach popup should not expose native scrollbars on internal panels. */3270.peach-settings-body,3271.peach-new-body,3272.peach-pwgen-body,3273.lock-screen,3274.peach-import-preview {3275  scrollbar-width: none;3276  -ms-overflow-style: none;3277  overscroll-behavior: contain;3278}3279.peach-settings-body::-webkit-scrollbar,3280.peach-new-body::-webkit-scrollbar,3281.peach-pwgen-body::-webkit-scrollbar,3282.lock-screen::-webkit-scrollbar,3283.peach-import-preview::-webkit-scrollbar {3284  width: 0;3285  height: 0;3286  display: none;3287}32883289.lock-screen {3290  height: 100%;3291  min-height: 100%;3292  overflow-y: auto;3293  padding: 18px 18px 16px;3294  gap: 14px;3295  grid-template-rows: auto auto auto 1fr auto;3296  align-content: stretch;3297  position: relative;3298  isolation: isolate;3299}3300.peach-screen.lock-screen--vault-stage {3301  display: flex;3302  flex-direction: column;3303  justify-content: flex-start;3304  gap: 18px;3305  padding: 20px 18px 18px;3306  overflow: hidden;3307}3308.peach-screen.lock-screen--vault-stage .peach-lock-panel {3309  margin-top: 0;3310}3311.lock-screen--onboarding {3312  display: flex;3313  flex-direction: column;3314  gap: 12px;3315  justify-content: flex-start;3316}33173318.lock-screen::before {3319  content: "";3320  position: absolute;3321  inset: 12px 18px auto auto;3322  width: 160px;3323  height: 160px;3324  border-radius: 999px;3325  background:3326    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%);3327  filter: blur(6px);3328  opacity: 0.7;3329  pointer-events: none;3330  z-index: 0;3331}33323333.peach-lock-rune-string {3334  flex: 1;3335  display: flex;3336  align-items: center;3337  justify-content: center;3338  gap: 6px;3339  font-family: PeachScript, monospace;3340  font-size: 0.8125rem;3341  letter-spacing: 0.05em;3342  pointer-events: none;3343  user-select: none;3344  position: relative;3345  z-index: 1;3346}33473348.peach-lock-rune-string span {3349  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3350  text-shadow:3351    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3352    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3353  transition: color 0.9s ease, text-shadow 0.9s ease;3354}33553356.peach-lock-rune-string span.is-glowing {3357  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3358  text-shadow:3359    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3360    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3361}33623363.lock-screen-header {3364  display: flex;3365  align-items: center;3366  justify-content: space-between;3367  position: relative;3368  z-index: 1;3369}33703371.lock-password-input.shake {3372  animation: peach-shake 300ms ease-in-out;3373}33743375.peach-hint-error {3376  color: rgba(220, 80, 60, 0.92);3377}33783379.peach-onboarding-headline {3380  margin: 0;3381  font-family: var(--font-display);3382  font-size: 35px;3383  line-height: 0.88;3384  font-style: italic;3385  font-weight: 400;3386  max-width: 252px;3387}33883389.peach-lock-copy {3390  display: grid;3391  gap: 8px;3392  position: relative;3393  z-index: 1;3394}33953396.peach-lock-copy--onboarding {3397  gap: 10px;3398}33993400.peach-lock-hero {3401  position: relative;3402  z-index: 1;3403  display: grid;3404  gap: 8px;3405  min-height: 0;3406  padding: 4px 2px 0;3407  border: none;3408  border-radius: 0;3409  background: transparent;3410  box-shadow: none;3411}3412.peach-lock-hero-art {3413  position: absolute;3414  right: -8px;3415  top: -6px;3416  width: 120px;3417  height: 120px;3418  display: flex;3419  align-items: center;3420  justify-content: center;3421  pointer-events: none;3422  opacity: 0.12;3423  filter: saturate(0.9);3424}3425.peach-lock-hero-mark {3426  width: 100%;3427  height: 100%;3428}3429/* Peach body stays brand-peach across every accent — we don't want a3430   green or blue peach when sage/sky is selected. Leaf + stem keep the3431   sage tint because a real peach has a sage leaf. */3432.peach-lock-hero-mark path:nth-child(2),3433.peach-lock-hero-mark path:nth-child(3) {3434  stroke: rgba(123, 144, 96, 0.88);3435  fill: rgba(123, 144, 96, 0.88);3436}3437.peach-lock-hero > *:not(.peach-lock-hero-art) {3438  position: relative;3439  z-index: 1;3440}34413442.peach-lock-eyebrow {3443  display: inline-flex;3444  align-items: center;3445  width: fit-content;3446  padding: 4px 9px;3447  border-radius: 999px;3448  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3449  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3450  color: var(--peach-t0);3451  font-family: "IBM Plex Mono", monospace;3452  font-size: 0.5rem;3453  letter-spacing: 0.18em;3454  text-transform: uppercase;3455}34563457.peach-lock-label-row {3458  display: flex;3459  align-items: center;3460  justify-content: space-between;3461  margin-bottom: 0;3462}34633464.peach-lock-reveal-btn {3465  display: inline-flex;3466  align-items: center;3467  gap: 4px;3468  background: none;3469  border: none;3470  cursor: pointer;3471  font-family: "IBM Plex Mono", monospace;3472  font-size: 0.5625rem;3473  letter-spacing: 0.06em;3474  color: var(--peach-t2);3475  padding: 2px 0;3476  transition: color 150ms ease;3477}34783479.peach-lock-reveal-btn:hover {3480  color: var(--peach-t1);3481}34823483.peach-lock-warning {3484  color: rgba(220, 80, 60, 0.85) !important;3485  line-height: 1.5;3486}34873488.peach-onboarding-cards {3489  display: grid;3490  gap: 8px;3491  position: relative;3492  z-index: 1;3493}34943495.peach-lock-panel {3496  position: relative;3497  z-index: 1;3498  display: grid;3499  gap: 9px;3500  padding: 14px 16px 15px;3501  border-radius: 18px;3502  border: 1px solid var(--peach-t3);3503  background:3504    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3505  box-shadow:3506    inset 0 1px 0 rgba(240, 232, 216, 0.04),3507    0 12px 28px rgba(0, 0, 0, 0.12);3508}35093510/* Glass surface — lock panel and settings groups */3511.peach-glass {3512  background: rgba(26, 20, 16, 0.65);3513  border: 1px solid rgba(255, 255, 255, 0.08);3514  border-radius: 12px;3515  backdrop-filter: blur(12px) saturate(1.4);3516  -webkit-backdrop-filter: blur(12px) saturate(1.4);3517}35183519@supports not (backdrop-filter: blur(1px)) {3520  .peach-glass {3521    background: rgba(26, 20, 16, 0.92);3522    border: 1px solid rgba(255, 255, 255, 0.10);3523    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3524  }3525}35263527.light .peach-glass,3528[data-theme="light"] .peach-glass {3529  background: rgba(206, 196, 186, 0.70);3530  border: 1px solid rgba(26, 18, 8, 0.10);3531  backdrop-filter: blur(12px) saturate(1.2);3532  -webkit-backdrop-filter: blur(12px) saturate(1.2);3533}35343535@supports not (backdrop-filter: blur(1px)) {3536  .light .peach-glass,3537  [data-theme="light"] .peach-glass {3538    background: rgba(206, 196, 186, 0.95);3539    border: 1px solid rgba(26, 18, 8, 0.12);3540  }3541}35423543/* Lock panel keeps its own border-radius over the generic glass token */3544.peach-lock-panel.peach-glass {3545  border-radius: 18px;3546  background: rgba(26, 20, 16, 0.65);3547  border: 1px solid rgba(255, 255, 255, 0.08);3548  box-shadow:3549    inset 0 1px 0 rgba(255, 255, 255, 0.05),3550    0 12px 28px rgba(0, 0, 0, 0.3);3551}35523553.light .peach-lock-panel.peach-glass,3554[data-theme="light"] .peach-lock-panel.peach-glass {3555  background: rgba(196, 188, 181, 0.78);3556  border: 1px solid rgba(26, 18, 8, 0.12);3557  box-shadow:3558    inset 0 1px 0 rgba(255, 255, 255, 0.4),3559    0 8px 24px rgba(80, 56, 32, 0.20);3560}35613562@supports not (backdrop-filter: blur(1px)) {3563  .peach-lock-panel.peach-glass {3564    background: rgba(26, 20, 16, 0.92);3565    box-shadow:3566      inset 0 1px 0 rgba(255, 255, 255, 0.05),3567      0 12px 28px rgba(0, 0, 0, 0.4);3568  }3569  .light .peach-lock-panel.peach-glass,3570  [data-theme="light"] .peach-lock-panel.peach-glass {3571    background: rgba(196, 188, 181, 0.97);3572  }3573}35743575.peach-lock-panel--secondary {3576  gap: 12px;3577}35783579.peach-lock-panel-header {3580  display: flex;3581  align-items: baseline;3582  justify-content: space-between;3583  gap: 12px;3584}35853586.peach-lock-option-grid {3587  display: grid;3588  gap: 10px;3589}35903591.peach-lock-option {3592  width: 100%;3593  display: grid;3594  gap: 6px;3595  padding: 14px 15px;3596  border-radius: 16px;3597  border: 1px solid rgba(240, 232, 216, 0.08);3598  background: rgba(240, 232, 216, 0.02);3599  color: var(--peach-t0);3600  text-align: left;3601  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3602}36033604.peach-lock-option:hover {3605  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3606  background: rgba(240, 232, 216, 0.04);3607  transform: translateY(-1px);3608}36093610.peach-lock-option-title {3611  font-size: 0.75rem;3612  color: var(--peach-t0);3613}36143615.peach-lock-option-copy {3616  font-size: 0.6875rem;3617  line-height: 1.55;3618  color: var(--peach-t1);3619}36203621.peach-onboarding-stack {3622  margin-top: 2px;3623}3624.peach-lock-panel-footer {3625  display: grid;3626  gap: 6px;3627  margin-top: 2px;3628  padding-top: 10px;3629  border-top: 1px solid rgba(240, 232, 216, 0.06);3630}36313632/* ── Restore tab view ─────────────────────────────────────────────────────3633   Tab-based restore screen replacing the old three-card picker. */36343635.peach-restore-tabview {3636  overflow: hidden;3637}36383639.peach-restore-tabcard {3640  flex: 1;3641  display: flex;3642  flex-direction: column;3643  gap: 0;3644  padding: 0;3645  overflow: hidden;3646  cursor: default;3647  user-select: none;3648  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3649}36503651/* ── Tab selector ─────────────────────────────────────────────────────── */36523653.peach-restore-tabs {3654  display: flex;3655  justify-content: space-around;3656  padding: 14px 10px 10px;3657  border-bottom: 1px solid var(--peach-t3);3658  gap: 2px;3659  overflow: hidden;3660  scrollbar-width: none;3661}3662.peach-restore-tabs::-webkit-scrollbar { display: none; }36633664.peach-restore-tab {3665  background: none;3666  border: none;3667  cursor: pointer;3668  padding: 3px 2px;3669  font-family: 'Cormorant Garamond', Georgia, serif;3670  font-style: italic;3671  font-size: 11px;3672  color: var(--peach-t2);3673  transition: color 150ms ease, text-shadow 150ms ease;3674  flex: 1;3675  min-width: 0;3676  text-align: center;3677  white-space: nowrap;3678  overflow: hidden;3679  text-overflow: ellipsis;3680}3681.peach-restore-tab:hover {3682  color: var(--peach-accent);3683  text-shadow:3684    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3685    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3686}3687.peach-restore-tab.is-active {3688  color: var(--peach-accent);3689  text-shadow:3690    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3691    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3692}36933694/* ── Content area ─────────────────────────────────────────────────────── */36953696.peach-restore-content {3697  padding: 16px 16px 14px;3698  display: flex;3699  flex-direction: column;3700  gap: 8px;3701  overflow: hidden;3702  scrollbar-width: none;3703  flex: 1;3704}3705.peach-restore-content::-webkit-scrollbar { display: none; }3706.peach-restore-content > * {3707  overflow: hidden;3708  scrollbar-width: none;3709}3710.peach-restore-content > *::-webkit-scrollbar { display: none; }37113712/* ── Shared tab inner layout ──────────────────────────────────────────── */37133714.peach-rt-symbols,3715.peach-rt-csv,3716.peach-rt-phone {3717  display: flex;3718  flex-direction: column;3719  gap: 8px;3720  overflow: hidden;3721}37223723.peach-rt-submit {3724  width: 100%;3725}37263727.peach-rt-error {3728  margin: 0;3729  font-size: 0.6875rem;3730  color: var(--peach-breach);3731  line-height: 1.4;3732}37333734/* ── PeachScript tab ──────────────────────────────────────────────────── */37353736.peach-restore-symbols-textarea {3737  font-family: 'PeachScript', monospace;3738  font-size: 13px;3739  line-height: 1.9;3740  letter-spacing: 0.1em;3741  word-break: break-all;3742  resize: none;3743  width: 100%;3744  min-height: 56px;3745  max-height: 72px;3746  overflow: hidden;3747  scrollbar-width: none;3748  -ms-overflow-style: none;3749  box-sizing: border-box;3750  padding: 6px 8px;3751  border-radius: 8px;3752  border: 1px solid var(--peach-t3);3753  background: rgba(240, 232, 216, 0.03);3754  color: var(--peach-t0);3755}3756.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3757.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }37583759.peach-restore-symbols-pass {3760  width: 100%;3761  box-sizing: border-box;3762  padding: 7px 10px;3763  border-radius: 8px;3764  border: 1px solid var(--peach-t3);3765  background: rgba(240, 232, 216, 0.03);3766  color: var(--peach-t0);3767  font-size: 0.8125rem;3768}3769.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }3770.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }37713772.peach-rt-divider {3773  text-align: center;3774  font-size: 0.6875rem;3775  color: var(--peach-t2);3776  font-style: italic;3777}37783779.peach-rt-file-label {3780  width: 100%;3781  justify-content: center;3782}37833784.peach-rt-anim-canvas {3785  width: 100%;3786  height: 180px;3787  border-radius: 10px;3788  overflow: hidden;3789  display: block;3790}37913792/* ── CSV tab ──────────────────────────────────────────────────────────── */37933794.peach-rt-csv-sources {3795  margin: 0;3796  font-size: 0.6875rem;3797  color: var(--peach-t2);3798  line-height: 1.5;3799  text-align: center;3800}38013802.peach-rt-csv-warning {3803  margin: 0;3804  font-family: "IBM Plex Mono", monospace;3805  font-size: 0.5625rem;3806  letter-spacing: 0.12em;3807  color: var(--peach-breach);3808  text-align: center;3809}38103811/* ── From Phone tab ───────────────────────────────────────────────────── */38123813.peach-rt-phone-code {3814  margin: 0;3815  text-align: center;3816  font-family: "IBM Plex Mono", monospace;3817  font-size: 22px;3818  letter-spacing: 0.18em;3819  color: var(--peach-t0);3820}38213822.peach-rt-phone-qr {3823  display: block;3824  width: 96px;3825  height: 96px;3826  margin: 0 auto;3827  border-radius: 6px;3828  image-rendering: pixelated;3829  overflow: hidden;3830}38313832.peach-rt-phone-hint {3833  margin: 0;3834  font-size: 0.6875rem;3835  color: var(--peach-t2);3836  line-height: 1.55;3837  text-align: center;3838}38393840/* ── Intro popup ──────────────────────────────────────────────────────── */38413842.peach-restore-intro-overlay {3843  position: absolute;3844  inset: 0;3845  z-index: 100;3846  display: flex;3847  align-items: center;3848  justify-content: center;3849  padding: 20px;3850  background: rgba(12, 10, 6, 0.7);3851  backdrop-filter: blur(4px);3852  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;3853}38543855.peach-restore-intro-card {3856  width: 100%;3857  display: flex;3858  flex-direction: column;3859  gap: 12px;3860  padding: 22px 20px 20px;3861  border-radius: 16px;3862  border: 1px solid var(--peach-t3);3863  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));3864  backdrop-filter: blur(4px);3865  -webkit-backdrop-filter: blur(4px);3866  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);3867}38683869.peach-restore-intro-headline {3870  margin: 0;3871  font-family: var(--font-display);3872  font-style: italic;3873  font-size: 20px;3874  font-weight: 400;3875  color: var(--peach-t0);3876}38773878.peach-restore-intro-body {3879  display: flex;3880  flex-direction: column;3881  gap: 8px;3882}3883.peach-restore-intro-body p {3884  margin: 0;3885  font-size: 0.75rem;3886  color: var(--peach-t1);3887  line-height: 1.5;3888}38893890.peach-restore-intro-btn {3891  width: 100%;3892  margin-top: 4px;3893}38943895/* Snapshot restore panel */3896.peach-snapshot-panel {3897  gap: 10px;3898  overflow-y: auto;3899  max-height: 340px;3900}3901.peach-snapshot-list {3902  display: flex;3903  flex-direction: column;3904  gap: 4px;3905}3906.peach-snapshot-row {3907  display: flex;3908  align-items: center;3909  justify-content: space-between;3910  width: 100%;3911  padding: 8px 10px;3912  border-radius: 8px;3913  border: 1px solid rgba(240, 232, 216, 0.07);3914  background: transparent;3915  cursor: pointer;3916  transition: border-color 120ms, background 120ms;3917  text-align: left;3918  gap: 8px;3919}3920.peach-snapshot-row:hover {3921  border-color: rgba(240, 232, 216, 0.14);3922  background: rgba(240, 232, 216, 0.03);3923}3924.peach-snapshot-row.is-selected {3925  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3926  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);3927}3928.peach-snapshot-time {3929  font-size: 11.5px;3930  color: var(--peach-t0);3931  flex: 1;3932}3933.peach-snapshot-count {3934  font-family: "IBM Plex Mono", monospace;3935  font-size: 0.625rem;3936  color: var(--peach-t2);3937  flex-shrink: 0;3938}3939.peach-snapshot-confirm {3940  display: flex;3941  flex-direction: column;3942  gap: 8px;3943  padding-top: 10px;3944  border-top: 1px solid rgba(240, 232, 216, 0.06);3945}3946.peach-snapshot-warning {3947  display: flex;3948  align-items: flex-start;3949  gap: 6px;3950  font-size: 10.5px;3951  color: rgba(220, 80, 60, 0.85);3952  line-height: 1.55;3953}3954.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }3955.peach-snapshot-confirm-row {3956  display: flex;3957  gap: 6px;3958  align-items: center;3959}3960.peach-snapshot-restore-btn {3961  width: 100%;3962}3963.peach-lock-hero--unlock .peach-lock-hero-art {3964  width: 112px;3965  height: 112px;3966  right: 0;3967  top: 2px;3968  opacity: 0.1;3969}39703971.peach-card {3972  border: 1px solid var(--peach-t3);3973  border-radius: 18px;3974  background:3975    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);3976  box-shadow:3977    inset 0 0 0 1px var(--peach-border-accent),3978    inset 0 1px 0 rgba(240, 232, 216, 0.04),3979    0 12px 32px rgba(0, 0, 0, 0.14);3980  overflow: hidden;3981}39823983.peach-card-active {3984  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);3985  box-shadow:3986    inset 0 1px 0 rgba(240, 232, 216, 0.05),3987    0 16px 38px rgba(0, 0, 0, 0.18),3988    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);3989}39903991.peach-card-disabled {3992  opacity: 0.72;3993}39943995.peach-card-header {3996  width: 100%;3997  padding: 13px 16px 11px;3998  background: transparent;3999  color: var(--peach-t0);4000  display: flex;4001  justify-content: space-between;4002  align-items: center;4003  text-align: left;4004  font-size: 0.75rem;4005}40064007.peach-card-body {4008  padding: 0 16px 16px;4009  display: grid;4010  gap: 9px;4011}40124013.peach-card-tag {4014  color: var(--peach-t2);4015  font-family: "IBM Plex Mono", monospace;4016  font-size: 0.5625rem;4017  letter-spacing: 0.12em;4018  text-transform: uppercase;4019}40204021.peach-empty-copy {4022  display: grid;4023  gap: 6px;4024  color: var(--peach-t1);4025  font-size: 0.8125rem;4026}40274028.peach-lock-submit {4029  width: 100%;4030  box-shadow:4031    0 1px 0 rgba(255,255,255,0.10) inset,4032    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4033    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4034    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4035}40364037.peach-lock-secondary {4038  width: 100%;4039  border-color: var(--peach-t3);4040  background: rgba(240, 232, 216, 0.02);4041}40424043.peach-lock-secondary:hover {4044  background: rgba(240, 232, 216, 0.04);4045}40464047.peach-lock-note {4048  max-width: none;4049  line-height: 1.55;4050  margin: 0;4051}40524053.peach-overlay-action {4054  font-size: 0.625rem;4055  padding: 4px 8px;4056  letter-spacing: 0.06em;4057  min-width: 44px;4058  text-align: center;4059}40604061.peach-overlay-spacer {4062  width: 32px;4063}40644065.peach-inline-action {4066  flex-shrink: 0;4067  font-size: 0.5625rem;4068  letter-spacing: 0.1em;4069  text-transform: uppercase;4070  padding: 4px 7px;4071}4072.peach-password-toggle-btn {4073  display: inline-flex;4074  align-items: center;4075  justify-content: center;4076  min-width: 30px;4077  min-height: 26px;4078  padding: 0 7px;4079  border: 1px solid var(--peach-t3);4080  border-radius: 999px;4081  background: rgba(240, 232, 216, 0.04);4082  color: var(--peach-t2);4083  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4084}4085.peach-password-toggle-btn:hover {4086  border-color: var(--peach-t2);4087  color: var(--peach-t0);4088  background: rgba(240, 232, 216, 0.06);4089}40904091.peach-new-textarea {4092  width: 100%;4093  min-height: 88px;4094  resize: vertical;4095  border: 0;4096  outline: none;4097  background: transparent;4098  color: var(--peach-t1);4099  font-family: "IBM Plex Mono", monospace;4100  font-size: 0.75rem;4101  line-height: 1.65;4102  caret-color: var(--peach-accent);4103}41044105.peach-new-textarea::placeholder {4106  color: var(--peach-t2);4107  opacity: 0.7;4108}41094110.peach-settings-actions {4111  display: grid;4112  gap: 8px;4113}41144115.peach-sync-section-label {4116  font-size: 0.6875rem;4117  color: var(--peach-t2);4118  text-transform: uppercase;4119  letter-spacing: 0.05em;4120}41214122.peach-sync-network-note {4123  margin: 0 0 6px;4124  font-size: 0.75rem;4125  color: var(--peach-t2);4126  line-height: 1.4;4127}41284129.peach-settings-row--tappable {4130  background: none;4131  border: none;4132  width: 100%;4133  text-align: left;4134  cursor: pointer;4135  color: var(--peach-t1);4136  font-size: 0.8125rem;4137}4138.peach-settings-row--tappable:hover {4139  color: var(--peach-t0);4140}41414142.peach-sync-pro-hint {4143  display: flex;4144  flex-direction: column;4145  align-items: flex-start;4146  gap: 8px;4147  padding: 12px 0 4px;4148}41494150.peach-sync-device-row {4151  display: flex;4152  justify-content: space-between;4153  align-items: center;4154  padding: 6px 0;4155  border-bottom: 1px solid var(--peach-t3);4156}41574158.peach-sync-device-info {4159  display: flex;4160  flex-direction: column;4161  gap: 2px;4162}41634164.peach-sync-device-name {4165  font-size: 0.8125rem;4166  color: var(--peach-t0);4167}41684169.peach-sync-device-meta {4170  font-size: 0.6875rem;4171  color: var(--peach-t2);4172}41734174.peach-sync-status-dot {4175  display: inline-block;4176  width: 8px;4177  height: 8px;4178  border-radius: 50%;4179  vertical-align: middle;4180}41814182.peach-sync-remove-btn {4183  color: var(--peach-breach);4184}41854186.peach-sync-advanced-row {4187  display: flex;4188  justify-content: space-between;4189  align-items: center;4190  padding: 6px 0;4191  gap: 12px;4192}41934194.peach-sync-advanced-info {4195  display: flex;4196  flex-direction: column;4197  gap: 2px;4198  flex: 1;4199}42004201.peach-sync-advanced-name {4202  font-size: 0.8125rem;4203  color: var(--peach-t0);4204}42054206.peach-sync-reset-confirm {4207  display: flex;4208  flex-direction: column;4209  gap: 8px;4210  padding: 10px;4211  border: 1px solid var(--peach-breach);4212  border-radius: 10px;4213  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4214}42154216.peach-sync-reset-confirm-headline {4217  font-size: 0.8125rem;4218  font-weight: 600;4219  color: var(--peach-t0);4220  margin: 0;4221}42224223.peach-sync-reset-confirm-body {4224  font-size: 0.75rem;4225  color: var(--peach-t1);4226  margin: 0;4227  line-height: 1.4;4228}42294230.peach-btn--danger {4231  background: var(--peach-breach);4232  color: #fff;4233  border-color: var(--peach-breach);4234}4235.peach-btn--danger:hover:not(:disabled) {4236  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4237}4238.peach-btn--danger:disabled {4239  opacity: 0.55;4240  cursor: not-allowed;4241}42424243.peach-sync-hero-icon {4244  color: var(--peach-t1);4245  opacity: 0.85;4246}42474248.peach-import-preview {4249  margin-bottom: 12px;4250  max-height: 152px;4251  overflow-y: auto;4252  border: 1px solid var(--peach-t3);4253  border-radius: 10px;4254  padding: 8px 10px;4255  display: grid;4256  gap: 8px;4257  background: rgba(240, 232, 216, 0.02);4258}42594260.peach-import-preview-row {4261  display: flex;4262  justify-content: space-between;4263  gap: 10px;4264  font-size: 0.6875rem;4265  color: var(--peach-t1);4266}42674268.peach-import-preview-title {4269  color: var(--peach-t0);4270  flex: 1;4271  min-width: 0;4272  overflow: hidden;4273  text-overflow: ellipsis;4274  white-space: nowrap;4275}42764277.peach-import-preview-meta {4278  color: var(--peach-t2);4279  flex-shrink: 0;4280  max-width: 42%;4281  overflow: hidden;4282  text-overflow: ellipsis;4283  white-space: nowrap;4284}42854286.peach-import-preview-more {4287  color: var(--peach-t2);4288  font-size: 0.625rem;4289}42904291.peach-restore-copy {4292  margin: 0;4293  color: var(--peach-t1);4294  font-size: 0.6875rem;4295  line-height: 1.6;4296}42974298.peach-restore-warning {4299  padding: 10px 12px;4300  border-radius: 12px;4301  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4302  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4303  color: var(--peach-t0);4304  font-size: 0.6875rem;4305  line-height: 1.55;4306}43074308.peach-provider-chips {4309  display: flex;4310  flex-wrap: wrap;4311  gap: 6px;4312}43134314.peach-provider-chip {4315  display: inline-flex;4316  align-items: center;4317  padding: 5px 8px;4318  border-radius: 999px;4319  border: 1px solid var(--peach-t3);4320  background: rgba(240, 232, 216, 0.02);4321  color: var(--peach-t1);4322  font-family: "IBM Plex Mono", monospace;4323  font-size: 0.5rem;4324  letter-spacing: 0.08em;4325  text-transform: uppercase;4326}43274328.peach-restore-file,4329.peach-restore-input {4330  width: 100%;4331  border-radius: 10px;4332  border: 1px solid var(--peach-t3);4333  background: var(--peach-s2);4334  color: var(--peach-t0);4335  font-size: 0.75rem;4336}43374338.peach-restore-file {4339  padding: 9px 10px;4340}43414342.peach-restore-file::file-selector-button {4343  margin-right: 10px;4344  padding: 7px 10px;4345  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4346  border-radius: 999px;4347  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4348  color: var(--peach-t0);4349  font-size: 0.625rem;4350  letter-spacing: 0.08em;4351  text-transform: uppercase;4352  cursor: pointer;4353}43544355.peach-restore-input {4356  padding: 10px 12px;4357}43584359.peach-auth-grid {4360  display: grid;4361  gap: 10px;4362}43634364.peach-import-summary {4365  color: var(--peach-t1);4366  font-size: 0.75rem;4367  line-height: 1.6;4368  margin-bottom: 12px;4369}43704371.peach-restore-error {4372  color: rgba(220, 80, 60, 0.95);4373  font-size: 0.75rem;4374  line-height: 1.55;4375}43764377.peach-passkey-card {4378  max-width: 400px;4379  margin: auto 16px;4380  align-self: center;4381  width: calc(100% - 32px);4382}43834384/* Center the approval card vertically inside the overlay-view (which sets4385 * flex-direction: column without justify-content). Without this, the card4386 * sits at the top with a tall empty band below — looks unfinished on the4387 * 320px popup. */4388.peach-overlay-view:has(.peach-passkey-card) {4389  justify-content: center;4390}43914392.peach-pro-badge {4393  padding: 2px 6px;4394  border-radius: 999px;4395  font-family: var(--font-ui);4396  font-size: 0.625rem;4397  letter-spacing: 0.08em;4398  text-transform: uppercase;4399  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4400  color: var(--peach-accent);4401}44024403/* ── Shortcuts rebind table ─────────────────────────────────── */4404.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4405.peach-shortcut-row {4406  display: flex;4407  align-items: center;4408  gap: 10px;4409  padding: 6px 0;4410}4411.peach-shortcut-row-label {4412  flex: 1;4413  font-size: 0.75rem;4414  color: var(--peach-t0);4415}4416.peach-shortcut-chip {4417  min-width: 64px;4418  padding: 4px 10px;4419  border-radius: 6px;4420  border: 1px solid var(--peach-t3);4421  background: var(--peach-input-bg, var(--surface-card));4422  color: var(--peach-t0);4423  font-family: var(--font-mono);4424  font-size: 0.6875rem;4425  letter-spacing: 0.04em;4426  cursor: pointer;4427  text-align: center;4428  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4429}4430.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4431.peach-shortcut-chip.is-custom {4432  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4433  color: var(--peach-accent);4434}4435.peach-shortcut-chip.is-capturing {4436  border-color: var(--peach-accent);4437  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4438  color: var(--peach-accent);4439  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4440}4441@keyframes peach-shortcut-capture-pulse {4442  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4443  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4444}4445.peach-shortcut-reset {4446  background: transparent;4447  border: none;4448  cursor: pointer;4449  color: var(--peach-t2);4450  padding: 4px 6px;4451  border-radius: 5px;4452  font-size: 0.875rem;4453  line-height: 1;4454  transition: color 120ms ease, background 120ms ease;4455}4456.peach-shortcut-reset:hover {4457  color: var(--peach-t0);4458  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4459}4460.peach-shortcuts-conflict {4461  margin: 4px 0 0;4462  padding: 8px 10px;4463  border-radius: 7px;4464  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4465  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4466  font-family: var(--font-mono);4467  font-size: 0.6875rem;4468  color: var(--peach-t0);4469}44704471/* ── Help dialog overlay (? to open) ────────────────────────── */4472.peach-shortcuts-help-backdrop {4473  position: fixed;4474  inset: 0;4475  background: rgba(0, 0, 0, 0.55);4476  backdrop-filter: blur(2px);4477  display: flex;4478  align-items: center;4479  justify-content: center;4480  z-index: 1000;4481  animation: peach-help-fade-in 140ms ease forwards;4482}4483@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4484.peach-shortcuts-help-card {4485  width: min(320px, 92vw);4486  max-height: 80vh;4487  overflow-y: auto;4488  border-radius: 14px;4489  border: 1px solid var(--peach-t3);4490  background: var(--peach-bg);4491  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4492  padding: 16px 18px 18px;4493  display: flex;4494  flex-direction: column;4495  gap: 12px;4496}4497.peach-shortcuts-help-head {4498  display: flex; align-items: center; justify-content: space-between;4499}4500.peach-shortcuts-help-head h3 {4501  margin: 0;4502  font-family: var(--font-display);4503  font-style: italic;4504  font-weight: 400;4505  font-size: 22px;4506  color: var(--peach-t0);4507}4508.peach-shortcuts-help-close {4509  background: transparent;4510  border: none;4511  color: var(--peach-t2);4512  cursor: pointer;4513  font-size: 0.875rem;4514  padding: 4px 8px;4515  border-radius: 5px;4516}4517.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4518.peach-shortcuts-help-body ul {4519  list-style: none; padding: 0; margin: 4px 0 12px;4520  display: grid; gap: 8px;4521}4522.peach-shortcuts-help-body li {4523  display: flex; align-items: center; justify-content: space-between; gap: 12px;4524  font-size: 0.75rem; color: var(--peach-t0);4525}4526.peach-shortcuts-help-body kbd {4527  font-family: var(--font-mono);4528  font-size: 0.6875rem;4529  padding: 3px 8px;4530  border-radius: 6px;4531  background: var(--surface-card);4532  border: 1px solid var(--peach-t3);4533  color: var(--peach-accent);4534  letter-spacing: 0.04em;4535}45364537/* ── Pro promo on Account screen ────────────────────────────── */4538.peach-pro-promo {4539  position: relative;4540  border-radius: 14px;4541  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4542  background:4543    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4544    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4545    var(--surface-card);4546  overflow: hidden;4547  margin-bottom: 14px;4548}4549.peach-pro-promo-glow {4550  position: absolute;4551  inset: -40% -20% auto auto;4552  width: 220px; height: 220px;4553  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4554  pointer-events: none;4555  filter: blur(8px);4556}4557.peach-pro-promo-inner {4558  position: relative;4559  padding: 18px 18px 16px;4560}4561.peach-pro-promo-title {4562  font-family: var(--font-display);4563  font-style: italic;4564  font-weight: 400;4565  font-size: 28px;4566  line-height: 1;4567  letter-spacing: -0.005em;4568  color: var(--peach-t0);4569  margin: 0 0 4px;4570}4571.peach-pro-promo-tagline {4572  font-family: var(--font-mono);4573  font-size: 0.625rem;4574  letter-spacing: 0.06em;4575  color: var(--peach-t2);4576  margin: 0 0 14px;4577}4578.peach-pro-promo-list {4579  list-style: none;4580  margin: 0 0 16px;4581  padding: 0;4582  display: grid;4583  gap: 9px;4584}4585.peach-pro-promo-list li {4586  display: flex;4587  align-items: flex-start;4588  gap: 9px;4589  font-size: 0.75rem;4590  color: var(--peach-t1);4591  line-height: 1.4;4592}4593.peach-pro-promo-list svg {4594  width: 14px;4595  height: 14px;4596  flex-shrink: 0;4597  color: var(--peach-accent);4598  margin-top: 2px;4599}4600.peach-pro-promo-list span {4601  color: var(--peach-t0);4602}4603.peach-pro-promo-cta {4604  width: 100%;4605  background: var(--peach-accent);4606  color: #fff;4607  border: none;4608  padding: 9px 12px;4609  border-radius: 9px;4610  font-size: 0.75rem;4611  font-weight: 500;4612  font-family: var(--font-ui);4613  letter-spacing: 0.02em;4614  text-decoration: none;4615  display: inline-flex;4616  align-items: center;4617  justify-content: center;4618  cursor: pointer;4619  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4620  box-shadow: 0 2px 16px var(--peach-glow);4621}4622.peach-pro-promo-cta:hover {4623  filter: brightness(1.07);4624  box-shadow: 0 4px 24px var(--peach-glow);4625  transform: translateY(-1px);4626}4627.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }46284629.peach-pro-or-divider {4630  display: flex;4631  align-items: center;4632  gap: 10px;4633  margin: 4px 0 12px;4634  font-family: var(--font-mono);4635  font-size: 0.625rem;4636  letter-spacing: 0.06em;4637  color: var(--peach-t2);4638  text-transform: uppercase;4639}4640.peach-pro-or-divider::before,4641.peach-pro-or-divider::after {4642  content: "";4643  flex: 1;4644  height: 1px;4645  background: var(--peach-t3);4646}46474648.peach-loading {4649  position: absolute;4650  inset: 0;4651  display: flex;4652  align-items: center;4653  justify-content: center;4654  background: var(--bg);4655  animation: peach-loading-pulse 1.2s ease-in-out infinite;4656}46574658@keyframes peach-loading-pulse {4659  0%, 100% { opacity: 0.6; }4660  50% { opacity: 1; }4661}46624663/* ── Health Dashboard ─────────────────────────────────────────────────── */4664.peach-health-body {4665  flex: 1;4666  overflow-y: auto;4667  display: flex;4668  flex-direction: column;4669  /* Hide the platform scrollbar — every other scrollable surface in the4670   * popup hides it; the Health view was the one outlier and it ruined the4671   * polish. Behavior unchanged, just no rail rendered. */4672  scrollbar-width: none;4673  -ms-overflow-style: none;4674}4675.peach-health-body::-webkit-scrollbar { display: none; }46764677/* Loading screen for the Vault Health view. The advanced report computation4678 * can run for a few seconds on a large vault — without a clear loading4679 * screen the surface looked broken (the entry view bleeds through the4680 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4681.peach-health-loading-screen {4682  flex: 1;4683  display: flex;4684  flex-direction: column;4685  align-items: center;4686  justify-content: center;4687  gap: 14px;4688  padding: 32px 28px;4689  text-align: center;4690}46914692.peach-health-loading-glyph {4693  width: 48px;4694  height: 48px;4695  display: flex;4696  align-items: center;4697  justify-content: center;4698  border-radius: 14px;4699  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4700  color: var(--peach-accent);4701}47024703.peach-health-loading-title {4704  margin: 0;4705  font-family: var(--font-display);4706  font-style: italic;4707  font-weight: 300;4708  font-size: 19px;4709  line-height: 1.2;4710  color: var(--peach-t0);4711}47124713.peach-health-loading-copy {4714  margin: 0;4715  max-width: 240px;4716  font-size: 0.75rem;4717  line-height: 1.55;4718  color: var(--peach-t2);4719}47204721.peach-health-loading-track {4722  width: 200px;4723  height: 3px;4724  margin-top: 6px;4725  border-radius: 999px;4726  background: rgba(240, 232, 216, 0.06);4727  overflow: hidden;4728}47294730.peach-health-loading-fill {4731  width: 40%;4732  height: 100%;4733  border-radius: inherit;4734  background: linear-gradient(4735    90deg,4736    transparent 0%,4737    var(--peach-accent) 50%,4738    transparent 100%4739  );4740  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4741}47424743@keyframes peach-health-loading-sweep {4744  0%   { transform: translateX(-100%); }4745  100% { transform: translateX(350%); }4746}47474748[data-motion="reduce"] .peach-health-loading-fill,4749[data-motion="reduce"] .peach-health-loading-glyph svg path {4750  animation: none;4751}47524753.peach-health-summary {4754  padding: 10px 16px 6px;4755  font-family: "IBM Plex Mono", monospace;4756  font-size: 0.6875rem;4757}4758.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4759.peach-health-summary-ok { color: var(--peach-t2); }47604761.peach-health-check-row {4762  padding: 0 16px 10px;4763}4764.peach-health-check-btn {4765  width: 100%;4766  display: flex;4767  align-items: center;4768  justify-content: center;4769}47704771.peach-health-sections {4772  flex: 1;4773  display: flex;4774  flex-direction: column;4775}47764777.peach-health-section {4778  border-bottom: 1px solid var(--peach-t3);4779}47804781.peach-health-section-header {4782  width: 100%;4783  display: flex;4784  align-items: center;4785  justify-content: space-between;4786  padding: 9px 16px;4787  background: transparent;4788  cursor: pointer;4789  color: var(--peach-t0);4790}47914792.peach-health-section-title-row {4793  display: flex;4794  align-items: center;4795  gap: 8px;4796}47974798.peach-health-count-badge {4799  display: inline-flex;4800  align-items: center;4801  justify-content: center;4802  min-width: 20px;4803  height: 18px;4804  padding: 0 5px;4805  border-radius: 999px;4806  background: rgba(220,80,60,0.15);4807  border: 1px solid rgba(220,80,60,0.25);4808  font-family: "IBM Plex Mono", monospace;4809  font-size: 0.5625rem;4810  color: rgba(220,80,60,0.9);4811}48124813.peach-health-section-title {4814  font-family: "IBM Plex Mono", monospace;4815  font-size: 0.6875rem;4816  text-transform: uppercase;4817  letter-spacing: 0.1em;4818  color: var(--peach-t1);4819}48204821.peach-health-chevron {4822  color: var(--peach-t2);4823  transition: transform 200ms ease;4824  flex-shrink: 0;4825}4826.peach-health-chevron.is-expanded {4827  transform: rotate(180deg);4828}48294830.peach-health-section-body {4831  padding: 0 16px 10px;4832  display: flex;4833  flex-direction: column;4834  gap: 4px;4835}48364837.peach-health-row {4838  display: flex;4839  align-items: flex-start;4840  justify-content: space-between;4841  gap: 8px;4842  padding: 6px 8px;4843  border-radius: 8px;4844  background: rgba(240,232,216,0.02);4845}48464847.peach-health-row-info {4848  flex: 1;4849  min-width: 0;4850  display: flex;4851  flex-direction: column;4852  gap: 2px;4853}48544855.peach-health-row-name {4856  font-family: var(--font-display);4857  font-size: 0.9375rem;4858  font-style: italic;4859  font-weight: 400;4860  color: var(--peach-t0);4861  white-space: nowrap;4862  overflow: hidden;4863  text-overflow: ellipsis;4864}48654866.peach-health-row-meta {4867  font-family: "IBM Plex Mono", monospace;4868  font-size: 0.5625rem;4869  color: var(--peach-t2);4870  letter-spacing: 0.05em;4871}48724873.peach-health-fix-btn {4874  font-size: 0.5625rem;4875  letter-spacing: 0.08em;4876  text-transform: uppercase;4877  padding: 4px 7px;4878  flex-shrink: 0;4879  display: flex;4880  align-items: center;4881}48824883.peach-health-empty {4884  font-family: "IBM Plex Mono", monospace;4885  font-size: 0.625rem;4886  color: var(--peach-t2);4887  padding: 6px 0;4888}48894890.peach-health-loading {4891  font-family: "IBM Plex Mono", monospace;4892  font-size: 0.625rem;4893  color: var(--peach-t2);4894  padding: 6px 0;4895  display: flex;4896  align-items: center;4897  gap: 6px;4898}48994900.peach-health-loading::before {4901  content: "";4902  width: 10px;4903  height: 10px;4904  border: 1.5px solid var(--peach-t3);4905  border-top-color: var(--peach-accent);4906  border-radius: 50%;4907  animation: peach-spin 600ms linear infinite;4908}49094910@keyframes peach-spin {4911  to { transform: rotate(360deg); }4912}49134914.peach-spinner {4915  width: 32px;4916  height: 32px;4917  border: 2px solid var(--peach-s2);4918  border-top-color: var(--peach-accent);4919  border-radius: 50%;4920  margin: 0 auto 16px;4921  animation: peach-spin 0.8s linear infinite;4922}49234924.peach-progress-screen {4925  text-align: center;4926  padding: 32px 16px;4927}49284929.peach-progress-screen-title {4930  font-size: 0.8125rem;4931  color: var(--peach-t0);4932  margin-bottom: 16px;4933}49344935.peach-progress-screen-stage {4936  font-size: 0.6875rem;4937  color: var(--peach-t2);4938  min-height: 14px;4939}49404941.peach-progress-screen-note {4942  font-size: 0.625rem;4943  color: var(--peach-t2);4944  margin-top: 8px;4945}49464947.peach-pairing-body {4948  flex: 1;4949  overflow-y: auto;4950  display: flex;4951  flex-direction: column;4952}49534954.peach-pairing-content {4955  flex: 1;4956  display: flex;4957  flex-direction: column;4958  align-items: center;4959  justify-content: center;4960  gap: 14px;4961  padding: 28px 20px;4962  text-align: center;4963}49644965.peach-pairing-code-screen {4966  gap: 18px;4967}49684969.peach-pairing-headline {4970  font-family: var(--font-display);4971  font-style: italic;4972  font-weight: 300;4973  font-size: 28px;4974  color: var(--peach-t0);4975  margin: 0;4976  line-height: 1;4977}49784979.peach-pairing-subline {4980  font-size: 0.75rem;4981  color: var(--peach-t2);4982  max-width: 220px;4983  line-height: 1.5;4984  margin: 0;4985}49864987.peach-pairing-subline--center {4988  text-align: center;4989}49904991/* 6-digit pairing code — both display (.peach-pairing-code) and entry4992   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking4993   so the two modes feel like the same surface. */4994.peach-pairing-code {4995  font-family: "IBM Plex Mono", monospace;4996  font-size: 36px;4997  letter-spacing: 0.25em;4998  color: var(--peach-t0);4999  text-align: center;5000  padding: 24px 0;5001  text-shadow:5002    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),5003    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);5004  background: transparent;5005  border: 0;5006  cursor: default;5007  user-select: text;5008}50095010.peach-pairing-code--loading,5011.peach-pairing-code--expired {5012  font-size: 18px;5013  letter-spacing: 0.04em;5014  color: var(--peach-t2);5015  cursor: pointer;5016  text-shadow: none;5017}50185019.peach-pairing-qr-container {5020  display: flex;5021  flex-direction: column;5022  align-items: center;5023  gap: 10px;5024}50255026.peach-pairing-qr {5027  width: 240px;5028  height: 240px;5029  display: block;5030}50315032.peach-pairing-instruction {5033  font-size: 0.75rem;5034  color: var(--peach-t2);5035  text-align: center;5036  line-height: 1.5;5037  margin: 0;5038  max-width: 220px;5039}50405041.peach-pairing-expiry {5042  font-family: "IBM Plex Mono", monospace;5043  font-size: 13px;5044  letter-spacing: 0.06em;5045  color: var(--peach-t2);5046  margin: 0;5047}50485049.peach-pairing-regen {5050  font-size: 0.75rem;5051  color: var(--peach-accent);5052  background: transparent;5053  border: 0;5054  cursor: pointer;5055  padding: 4px 0;5056  text-decoration: underline;5057  text-underline-offset: 2px;5058}50595060.peach-pairing-code-input {5061  font-family: "IBM Plex Mono", monospace;5062  font-size: 36px;5063  letter-spacing: 0.25em;5064  color: var(--peach-t0);5065  background: transparent;5066  border: 0;5067  border-bottom: 1px solid var(--peach-t3);5068  outline: none;5069  text-align: center;5070  padding: 18px 0;5071  width: 220px;5072  caret-color: var(--peach-accent);5073  transition: border-color 160ms ease;5074}50755076.peach-pairing-code-input::placeholder {5077  color: var(--peach-t3);5078}50795080.peach-pairing-code-input:focus {5081  border-bottom-color: var(--peach-accent);5082}50835084.peach-pairing-toggle {5085  background: transparent;5086  border: 0;5087  color: var(--peach-t2);5088  font-size: 0.75rem;5089  padding: 8px 4px;5090  cursor: pointer;5091  transition: color 120ms ease;5092}50935094.peach-pairing-toggle:hover:not(:disabled) {5095  color: var(--peach-t1);5096}50975098.peach-pairing-toggle:disabled {5099  opacity: 0.5;5100  cursor: default;5101}51025103.peach-pairing-hint {5104  font-size: 0.6875rem;5105  color: var(--peach-t2);5106  margin: 0;5107  text-align: center;5108}51095110.peach-pairing-status {5111  display: flex;5112  align-items: center;5113  gap: 8px;5114  margin: 0;5115  font-size: 0.75rem;5116  color: var(--peach-t1);5117}51185119.peach-pairing-error {5120  margin: 0;5121  font-size: 0.6875rem;5122  color: var(--peach-breach);5123}51245125.peach-pairing-error--muted {5126  color: var(--peach-t2);5127}51285129.peach-pairing-spinner {5130  width: 12px;5131  height: 12px;5132  border: 1.5px solid var(--peach-t3);5133  border-top-color: var(--peach-accent);5134  border-radius: 50%;5135  animation: peach-spin 0.8s linear infinite;5136}51375138.peach-pairing-success-icon,5139.peach-pairing-error-icon,5140.peach-pairing-hero {5141  display: inline-flex;5142  align-items: center;5143  justify-content: center;5144}51455146/* Tag chips */5147.peach-tag-chip {5148  display: inline-flex;5149  align-items: center;5150  gap: 4px;5151  padding: 3px 8px;5152  border-radius: 999px;5153  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5154  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5155  color: var(--peach-t0);5156  font-family: "IBM Plex Mono", monospace;5157  font-size: 0.625rem;5158  letter-spacing: 0.04em;5159}51605161.peach-tag-chip-remove {5162  background: transparent;5163  border: none;5164  color: inherit;5165  opacity: 0.6;5166  cursor: pointer;5167  padding: 0;5168  font-size: 0.75rem;5169  line-height: 1;5170}51715172.peach-tag-chip-remove:hover {5173  opacity: 1;5174}51755176/* Tag input */5177.peach-tag-input-wrap {5178  border-bottom: 1px solid var(--peach-t3);5179}51805181.peach-tag-suggestions {5182  display: flex;5183  flex-wrap: wrap;5184  gap: 4px;5185  padding: 6px 0;5186}51875188.peach-tag-suggestion {5189  padding: 2px 8px;5190  border-radius: 999px;5191  border: 1px solid var(--peach-t3);5192  background: var(--peach-s2);5193  color: var(--peach-t1);5194  font-family: "IBM Plex Mono", monospace;5195  font-size: 0.625rem;5196  cursor: pointer;5197  transition: border-color 80ms ease, background 80ms ease;5198}51995200.peach-tag-suggestion:hover {5201  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5202  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5203}52045205/* Identity suggestions — shown below username/email inputs in new-entry form */5206@keyframes peach-suggest-in {5207  from { opacity: 0; transform: translateY(-4px); }5208  to   { opacity: 1; transform: none; }5209}52105211.peach-identity-suggestions {5212  display: flex;5213  flex-direction: column;5214  gap: 1px;5215  margin-top: 4px;5216  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5217}52185219.peach-identity-filter-row {5220  display: flex;5221  align-items: center;5222  gap: 4px;5223  padding: 2px 0 5px;5224}52255226.peach-identity-collapse-btn {5227  margin-left: auto;5228  background: transparent;5229  border: none;5230  cursor: pointer;5231  color: var(--peach-t3);5232  padding: 2px 4px;5233  display: flex;5234  align-items: center;5235  line-height: 0;5236  border-radius: 3px;5237  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5238}52395240.peach-identity-collapse-btn:hover {5241  color: var(--peach-t1);5242}52435244.peach-identity-collapse-btn.is-collapsed {5245  transform: rotate(-90deg);5246}52475248.peach-identity-rows {5249  display: grid;5250  grid-template-rows: 1fr;5251  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5252}52535254.peach-identity-rows.is-collapsed {5255  grid-template-rows: 0fr;5256}52575258.peach-identity-rows-inner {5259  overflow-y: auto;5260  min-height: 0;5261  max-height: 148px;5262  scrollbar-width: thin;5263  scrollbar-color: var(--peach-t3) transparent;5264  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5265  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5266}52675268.peach-identity-rows-inner::-webkit-scrollbar {5269  width: 4px;5270}52715272.peach-identity-rows-inner::-webkit-scrollbar-track {5273  background: transparent;5274}52755276.peach-identity-rows-inner::-webkit-scrollbar-thumb {5277  background: var(--peach-t3);5278  border-radius: 2px;5279}52805281.peach-identity-filter-pill {5282  padding: 2px 7px;5283  border-radius: 999px;5284  border: 1px solid var(--peach-t3);5285  background: transparent;5286  color: var(--peach-t2);5287  font-family: "IBM Plex Mono", monospace;5288  font-size: 0.6rem;5289  cursor: pointer;5290  transition: border-color 80ms, background 80ms, color 80ms;5291}52925293.peach-identity-filter-pill.is-on {5294  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5295  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5296  color: var(--peach-accent);5297}52985299.peach-identity-suggestion {5300  display: flex;5301  align-items: center;5302  gap: 6px;5303  width: 100%;5304  padding: 4px 6px;5305  border-radius: 5px;5306  border: none;5307  background: transparent;5308  cursor: pointer;5309  text-align: left;5310  transition: background 80ms ease;5311}53125313.peach-identity-suggestion:hover,5314.peach-identity-suggestion:focus {5315  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5316  outline: none;5317}53185319.peach-identity-suggestion-value {5320  font-family: "IBM Plex Mono", monospace;5321  font-size: 0.7rem;5322  color: var(--peach-t1);5323  overflow: hidden;5324  text-overflow: ellipsis;5325  white-space: nowrap;5326  flex: 1;5327  min-width: 0;5328}53295330.peach-identity-suggestion-type {5331  font-family: "IBM Plex Mono", monospace;5332  font-size: 0.55rem;5333  font-weight: 600;5334  flex-shrink: 0;5335  padding: 1px 4px;5336  border-radius: 3px;5337}53385339.peach-identity-suggestion-type--email {5340  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5341  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5342}53435344.peach-identity-suggestion-type--username {5345  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5346  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5347}53485349.peach-identity-suggestion-meta {5350  font-family: "IBM Plex Mono", monospace;5351  font-size: 0.6rem;5352  color: var(--peach-t3);5353  flex-shrink: 0;5354}53555356/* Tag filter strip */5357.peach-tag-filter-strip {5358  border-bottom: 1px solid var(--peach-t3);5359  flex-shrink: 0;5360}53615362.peach-tag-filter-chip {5363  display: inline-flex;5364  align-items: center;5365  padding: 4px 10px;5366  border-radius: 999px;5367  border: 1px solid var(--peach-t3);5368  background: transparent;5369  color: var(--peach-t2);5370  font-family: "IBM Plex Mono", monospace;5371  font-size: 0.5625rem;5372  letter-spacing: 0.06em;5373  text-transform: uppercase;5374  cursor: pointer;5375  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5376  white-space: nowrap;5377}53785379.peach-tag-filter-chip:hover {5380  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5381  color: var(--peach-t1);5382}53835384.peach-tag-filter-chip.is-selected {5385  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5386  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5387  color: var(--peach-t0);5388}53895390/* ─────────────────────────────────────────────────────────────────────────5391   v1.4.12 additions5392   ─────────────────────────────────────────────────────────────────────── */53935394/* Sort bar */5395.peach-sort-bar {5396  display: flex;5397  align-items: center;5398  gap: 4px;5399  padding: 5px 12px;5400  border-bottom: 1px solid var(--peach-t3);5401  flex-shrink: 0;5402  overflow-x: auto;5403  scrollbar-width: none;5404}54055406.peach-sort-btn {5407  padding: 2px 9px;5408  border-radius: 999px;5409  border: 1px solid transparent;5410  background: transparent;5411  color: var(--peach-t2);5412  font-family: "IBM Plex Mono", monospace;5413  font-size: 0.5625rem;5414  letter-spacing: 0.07em;5415  text-transform: uppercase;5416  cursor: pointer;5417  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5418  white-space: nowrap;5419}54205421.peach-sort-btn:hover {5422  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5423  color: var(--peach-t1);5424}54255426.peach-sort-btn.is-active {5427  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5428  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5429  color: var(--peach-t0);5430}54315432.peach-sort-domain-hint {5433  margin-left: auto;5434  font-family: "IBM Plex Mono", monospace;5435  font-size: 0.5625rem;5436  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5437  white-space: nowrap;5438  overflow: hidden;5439  text-overflow: ellipsis;5440  max-width: 110px;5441}54425443/* Tab-match badge on entry rows */5444.peach-tab-match-badge {5445  display: inline-block;5446  width: 6px;5447  height: 6px;5448  border-radius: 50%;5449  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5450  margin-left: 5px;5451  vertical-align: middle;5452  flex-shrink: 0;5453  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5454}54555456.peach-entry-row.is-tab-match {5457  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5458  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5459}54605461.peach-entry-row.is-tab-match:hover {5462  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5463}54645465/* Entry list stagger entrance */5466@keyframes peach-entry-fadein {5467  from { opacity: 0; transform: translateY(4px); }5468  to   { opacity: 1; transform: translateY(0); }5469}54705471.peach-vault-list .peach-entry-row {5472  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5473}54745475/* Button press micro-interaction */5476.peach-btn:active {5477  transform: scale(0.95);5478  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5479}54805481.peach-sort-btn:active,5482.peach-tag-filter-chip:active {5483  transform: scale(0.93);5484  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5485}54865487/* Password strength bar (Lock view + shared) */5488.peach-password-strength {5489  display: flex;5490  align-items: center;5491  gap: 8px;5492  margin-top: 6px;5493}54945495.peach-strength-bar {5496  flex: 1;5497  height: 3px;5498  border-radius: 2px;5499  background: var(--peach-t3);5500  overflow: hidden;5501}55025503.peach-strength-fill {5504  height: 100%;5505  border-radius: 2px;5506  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5507              background 300ms ease;5508}55095510.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5511.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5512.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5513.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }55145515.peach-strength-label {5516  font-family: "IBM Plex Mono", monospace;5517  font-style: italic;5518  font-size: 0.5625rem;5519  font-weight: 300;5520  letter-spacing: 0.06em;5521  color: var(--peach-t2);5522  min-width: 36px;5523  text-align: right;5524}55255526.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5527.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5528.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5529.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }55305531/* Duress form */5532.peach-duress-status {5533  padding: 2px 8px;5534  border-radius: 999px;5535  border: 1px solid var(--peach-t3);5536  font-family: "IBM Plex Mono", monospace;5537  font-size: 0.5625rem;5538  letter-spacing: 0.07em;5539  text-transform: uppercase;5540  color: var(--peach-t2);5541  flex-shrink: 0;5542}55435544.peach-duress-status.is-active {5545  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5546  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5547  color: var(--peach-t0);5548}55495550.peach-duress-form {5551  padding: 8px 0 4px;5552  display: flex;5553  flex-direction: column;5554  gap: 6px;5555}55565557.peach-duress-form .peach-label {5558  margin-top: 4px;5559}55605561.peach-duress-actions {5562  display: flex;5563  gap: 6px;5564  align-items: center;5565  margin-top: 4px;5566}55675568.peach-duress-actions .peach-btn:first-child {5569  margin-right: auto;5570}55715572/* Improved overlay spring entrance */5573.peach-overlay-view.ov-enter-up {5574  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5575}55765577@keyframes ov-enter-up-spring {5578  from { opacity: 0; transform: translateY(16px) scale(0.98); }5579  to   { opacity: 1; transform: translateY(0) scale(1); }5580}55815582.peach-overlay-view.ov-enter-right {5583  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5584}55855586@keyframes ov-enter-right-spring {5587  from { opacity: 0; transform: translateX(18px) scale(0.98); }5588  to   { opacity: 1; transform: translateX(0) scale(1); }5589}55905591/* ── Onboarding-mode restore screens (file import) ── */5592/* Used when MainImportView renders during onboarding (no vault yet).5593   Animates like a lock-screen transition. */5594.peach-lock-view {5595  position: absolute;5596  inset: 0;5597  display: flex;5598  flex-direction: column;5599  background:5600    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5601    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5602    var(--peach-bg);5603  z-index: 2;5604  overflow: hidden;5605  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5606}56075608.peach-lock-view-header {5609  display: flex;5610  align-items: center;5611  justify-content: space-between;5612  padding: 16px 18px 12px;5613  flex-shrink: 0;5614}56155616/* ───────── Settings: auto-lock select ───────── */5617.peach-settings-select {5618  font-family: "IBM Plex Mono", monospace;5619  font-size: 0.6875rem;5620  background: transparent;5621  border: 1px solid var(--peach-t3);5622  border-radius: 4px;5623  color: var(--peach-t1);5624  padding: 3px 6px;5625  cursor: pointer;5626  outline: none;5627}5628.peach-settings-select:focus {5629  border-color: var(--peach-accent);5630}56315632/* ───────── Duress status pill (new polished) ───────── */5633.peach-duress-status-pill {5634  font-family: "IBM Plex Mono", monospace;5635  font-size: 0.5625rem;5636  text-transform: uppercase;5637  letter-spacing: 0.12em;5638  padding: 2px 8px;5639  border-radius: 12px;5640  background: var(--peach-t3);5641  color: var(--peach-t2);5642  flex-shrink: 0;5643}5644.peach-duress-status-pill.is-active {5645  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5646  color: var(--peach-accent);5647}56485649/* ───────── Entry advanced disclosure (canary) ───────── */5650.peach-entry-advanced {5651  margin-top: 12px;5652  border-top: 1px solid var(--peach-t3);5653  padding-top: 10px;5654  position: relative;5655  z-index: 1;5656}5657.peach-entry-advanced-toggle {5658  display: flex;5659  align-items: center;5660  justify-content: space-between;5661  width: 100%;5662  background: transparent;5663  border: none;5664  cursor: pointer;5665  padding: 0;5666  color: var(--peach-t2);5667}5668.peach-canary-section {5669  margin-top: 10px;5670  display: grid;5671  gap: 6px;5672}56735674/* ───────── Import: merge/replace radio choices ───────── */5675.peach-import-choice {5676  display: flex;5677  align-items: flex-start;5678  gap: 10px;5679  padding: 8px 10px;5680  border: 1px solid var(--peach-t3);5681  border-radius: 10px;5682  cursor: pointer;5683  margin-bottom: 6px;5684  transition: border-color 120ms ease, background 120ms ease;5685}5686.peach-import-choice:hover {5687  border-color: var(--peach-accent);5688}5689.peach-import-choice input[type="radio"] {5690  margin-top: 3px;5691  accent-color: var(--peach-accent);5692  flex-shrink: 0;5693}5694.peach-import-choice-main {5695  display: flex;5696  flex-direction: column;5697  gap: 2px;5698  min-width: 0;5699}5700.peach-import-choice-label {5701  font-size: 0.75rem;5702  color: var(--peach-t0);5703}5704.peach-import-choice-sub {5705  font-size: 0.6875rem;5706  color: var(--peach-t2);5707  line-height: 1.5;5708}57095710/* ───────── Export: success confirmation strip ───────── */5711.peach-export-success {5712  display: flex;5713  align-items: flex-start;5714  gap: 10px;5715  padding: 12px;5716  border-radius: 12px;5717  border: 1px solid rgba(150, 175, 110, 0.3);5718  background: rgba(150, 175, 110, 0.08);5719  color: var(--peach-t0);5720  font-size: 0.75rem;5721  line-height: 1.55;5722}5723.peach-export-success-check {5724  color: rgba(150, 175, 110, 0.9);5725  font-size: 0.875rem;5726  flex-shrink: 0;5727}57285729/* ── Trash view ──────────────────────────────────────────────────────── */5730.peach-trash-entry-row {5731  display: flex;5732  align-items: center;5733  justify-content: space-between;5734  gap: 8px;5735  padding: 8px 0;5736  border-bottom: 1px solid var(--peach-border);5737}5738.peach-trash-entry-info {5739  flex: 1;5740  min-width: 0;5741  display: flex;5742  flex-direction: column;5743  gap: 2px;5744}5745.peach-trash-entry-title {5746  font-size: 0.8125rem;5747  color: var(--peach-t0);5748  overflow: hidden;5749  text-overflow: ellipsis;5750  white-space: nowrap;5751}5752.peach-trash-entry-meta {5753  font-family: var(--font-mono);5754  font-size: 0.5625rem;5755  color: var(--peach-t2);5756  letter-spacing: 0.04em;5757}5758.peach-trash-entry-actions {5759  display: flex;5760  align-items: center;5761  gap: 4px;5762  flex-shrink: 0;5763}5764.peach-trash-delete-btn {5765  background: transparent;5766  border: 0;5767  color: var(--peach-t3);5768  font-size: 1rem;5769  line-height: 1;5770  cursor: pointer;5771  padding: 2px 5px;5772  transition: color 0.15s;5773}5774.peach-trash-delete-btn:hover { color: var(--peach-breach); }5775.peach-trash-list {5776  overflow-y: auto;5777}5778.peach-trash-footer {5779  display: flex;5780  align-items: center;5781  gap: 8px;5782  padding: 8px 0 0;5783  border-top: 1px solid var(--peach-border);5784  margin-top: 4px;5785}5786.peach-trash-purge-all {5787  background: transparent;5788  border: 0;5789  color: var(--peach-t3);5790  font-size: 0.625rem;5791  cursor: pointer;5792  padding: 4px 0;5793  letter-spacing: 0.03em;5794  transition: color 0.2s;5795}5796.peach-trash-purge-all:hover { color: var(--peach-breach); }5797.peach-trash-purge-confirm-label {5798  font-size: 0.625rem;5799  color: var(--peach-t1);5800  flex: 1;5801}58025803/* ── Settings shortcuts grid ─────────────────────────────────────────── */5804.peach-shortcuts-grid {5805  display: grid;5806  grid-template-columns: auto 1fr;5807  gap: 6px 12px;5808  align-items: center;5809  padding: 4px 0;5810}5811.peach-shortcut-key {5812  font-family: var(--font-mono);5813  font-size: 0.625rem;5814  color: var(--peach-t0);5815  background: var(--peach-t3);5816  border-radius: 4px;5817  padding: 2px 6px;5818  white-space: nowrap;5819  text-align: center;5820}5821.peach-shortcut-desc {5822  font-size: 0.6875rem;5823  color: var(--peach-t1);5824}58255826/* ── Sort bar trash button ───────────────────────────────────────────── */5827.peach-sort-trash-btn {5828  display: flex;5829  align-items: center;5830  justify-content: center;5831  padding: 3px 5px;5832  background: transparent;5833  border: none;5834  cursor: pointer;5835  color: var(--peach-t2);5836  border-radius: 4px;5837  transition: color 140ms ease, background 140ms ease;5838}5839.peach-sort-trash-btn:hover {5840  color: var(--peach-t1);5841  background: var(--peach-t3);5842}5843.peach-sort-trash-btn.is-active {5844  color: var(--peach-accent);5845}58465847/* Accent color picker */5848.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5849.peach-accent-picker {5850  display: flex;5851  flex-wrap: wrap;5852  gap: 7px;5853  padding: 2px 0;5854}5855.peach-accent-swatch {5856  width: 22px;5857  height: 22px;5858  border-radius: 50%;5859  border: 2px solid transparent;5860  cursor: pointer;5861  padding: 0;5862  transition: transform 100ms;5863  outline-offset: 2px;5864}5865.peach-accent-swatch:hover { transform: scale(1.15); }5866.peach-accent-swatch.is-active {5867  border-color: var(--peach-t0);5868  transform: scale(1.1);5869}58705871.peach-pill-group {5872  display: flex;5873  gap: 6px;5874}5875.peach-pill-group .peach-btn.is-active {5876  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5877  border-color: var(--peach-accent);5878  color: var(--peach-t0);5879}58805881/* ── Card entry styles ───────────────────────────────────────── */5882.peach-card-number {5883  font-family: var(--peach-mono);5884  letter-spacing: 0.08em;5885}58865887.peach-card-network-badge {5888  font-size: 0.625rem;5889  padding: 1px 5px;5890  border-radius: 4px;5891  border: 0.5px solid var(--peach-border);5892  color: var(--peach-text-dim);5893  margin-left: 6px;5894  vertical-align: middle;5895}58965897.peach-card-expiry-row {5898  display: flex;5899  align-items: center;5900  gap: 8px;5901}59025903.peach-card-expiry-sep {5904  color: var(--peach-text-dim);5905}59065907/* ── Pro tier — upgrade screen ──────────────────────────────── */5908.peach-pro-mark {5909  font-size: 0.5625rem;5910  color: var(--peach-accent);5911  margin-left: 6px;5912  vertical-align: super;5913  opacity: 0.7;5914}59155916.peach-pro-mini-badge {5917  display: block;5918  font-size: 0.625rem;5919  font-style: italic;5920  color: var(--peach-accent);5921  letter-spacing: 0.04em;5922  margin-top: -2px;5923  padding-left: 2px;5924  opacity: 0.85;5925  text-align: center;5926}59275928.peach-wordmark-stack {5929  display: inline-flex;5930  flex-direction: column;5931  align-items: center;5932}59335934/* ── Pro tier — upgrade page ─────────────────────────────────── */5935.peach-pro-upgrade {5936  display: flex;5937  flex-direction: column;5938  align-items: stretch;5939  gap: 10px;5940  padding: 0 4px 8px;5941}59425943.peach-pro-upgrade-hero {5944  display: flex;5945  flex-direction: column;5946  align-items: center;5947  gap: 4px;5948  padding: 10px 0 6px;5949}59505951.peach-pro-upgrade-mark-wrap {5952  display: flex;5953  align-items: center;5954  justify-content: center;5955  margin-bottom: 2px;5956}59575958.peach-pro-upgrade-mark {5959  width: 38px;5960  height: 38px;5961  opacity: 0.9;5962}59635964.peach-pro-upgrade-title {5965  font-family: var(--font-display, var(--font-ui));5966  font-size: 22px;5967  margin: 0;5968  color: var(--peach-t0);5969  letter-spacing: 0.01em;5970}59715972.peach-pro-upgrade-tagline {5973  margin: 0;5974  font-style: italic;5975  color: var(--peach-t2);5976  font-size: 0.6875rem;5977}59785979.peach-pro-features {5980  display: flex;5981  flex-direction: column;5982  gap: 8px;5983  border-top: 1px solid var(--peach-border);5984  border-bottom: 1px solid var(--peach-border);5985  padding: 10px 4px;5986}59875988.peach-pro-feature {5989  display: flex;5990  gap: 9px;5991  align-items: baseline;5992}59935994.peach-pro-feature-mark {5995  color: var(--peach-accent);5996  font-size: 0.6875rem;5997  flex-shrink: 0;5998  display: inline-block;5999  transform-origin: center;6000  opacity: 0.8;6001}60026003.peach-pro-feature-text {6004  display: flex;6005  flex-direction: column;6006  gap: 1px;6007}60086009.peach-pro-feature-name {6010  font-size: 0.75rem;6011  color: var(--peach-t0);6012}60136014.peach-pro-feature-desc {6015  font-size: 0.625rem;6016  color: var(--peach-t2);6017}60186019.peach-pro-feature.is-highlighted .peach-pro-feature-mark {6020  animation: peach-pulse-accent 600ms ease-out forwards;6021}60226023@keyframes peach-pulse-accent {6024  0%   { opacity: 1; transform: scale(1.4); }6025  100% { opacity: 0.7; transform: scale(1); }6026}60276028.peach-pro-upgrade-actions {6029  display: flex;6030  flex-direction: column;6031  align-items: center;6032  gap: 8px;6033  padding-top: 2px;6034}60356036.peach-pro-pricing {6037  margin: 0;6038  text-align: center;6039  font-size: 0.6875rem;6040  color: var(--peach-t2);6041  letter-spacing: 0.04em;6042}60436044.peach-pro-upgrade-cta {6045  align-self: center;6046  text-align: center;6047  text-decoration: none;6048  display: block;6049  padding: 9px 32px;6050  font-size: 0.8125rem;6051  min-width: 180px;6052}60536054.peach-pro-key-divider {6055  display: flex;6056  align-items: center;6057  gap: 8px;6058  width: 100%;6059  color: var(--peach-t3);6060  font-size: 0.625rem;6061  letter-spacing: 0.08em;6062}60636064.peach-pro-key-divider::before,6065.peach-pro-key-divider::after {6066  content: "";6067  flex: 1;6068  height: 1px;6069  background: var(--peach-border);6070}60716072.peach-pro-key-link {6073  background: transparent;6074  border: 1px solid var(--peach-border);6075  border-radius: 8px;6076  color: var(--peach-t1);6077  font-size: 0.75rem;6078  cursor: pointer;6079  align-self: stretch;6080  padding: 8px 12px;6081  text-align: center;6082  transition: border-color 0.2s, color 0.2s;6083}60846085.peach-pro-key-link:hover {6086  border-color: var(--peach-accent);6087  color: var(--peach-accent);6088}60896090/* ── Pro tier — key ceremony ─────────────────────────────────── */6091.peach-pro-key-ceremony {6092  display: flex;6093  flex-direction: column;6094  align-items: center;6095  gap: 12px;6096  padding: 20px 4px 16px;6097}60986099.peach-pro-key-ceremony .peach-lock-rune-string {6100  font-size: 1rem;6101  gap: 12px;6102  flex: 0;6103  justify-content: center;6104}61056106.peach-pro-key-ceremony-label {6107  margin: 0;6108  font-size: 0.6875rem;6109  color: var(--peach-t2);6110  font-style: italic;6111  letter-spacing: 0.04em;6112}61136114.peach-pro-key-input {6115  font-family: var(--font-mono, monospace);6116  letter-spacing: 0.06em;6117  text-align: center;6118  width: 100%;6119  box-sizing: border-box;6120}61216122.peach-pro-key-error {6123  margin: 0;6124  font-size: 0.75rem;6125  text-align: center;6126  color: var(--peach-breach, #e55);6127  padding: 0;6128}61296130.peach-pro-key-activate {6131  width: 100%;6132  text-align: center;6133  box-sizing: border-box;6134  padding: 10px 20px;6135  font-size: 0.8125rem;6136}61376138.peach-pro-key-cancel {6139  background: transparent;6140  border: 0;6141  color: var(--peach-t2);6142  font-size: 0.6875rem;6143  cursor: pointer;6144  padding: 2px 8px;6145  transition: color 0.2s;6146}61476148.peach-pro-key-cancel:hover { color: var(--peach-accent); }61496150/* ── Pro tier — active state ─────────────────────────────────── */6151.peach-pro-active {6152  display: flex;6153  flex-direction: column;6154  align-items: center;6155  gap: 0;6156  padding: 8px 4px 16px;6157  min-height: 280px;6158}61596160.peach-pro-active-hero {6161  display: flex;6162  flex-direction: column;6163  align-items: center;6164  gap: 6px;6165  padding: 20px 0 22px;6166}61676168.peach-pro-active-mark-wrap {6169  display: flex;6170  align-items: center;6171  justify-content: center;6172  margin-bottom: 4px;6173}61746175.peach-pro-active-mark {6176  width: 60px;6177  height: 60px;6178  filter:6179    drop-shadow(0 0 10px color-mix(in srgb, var(--peach-accent) 55%, transparent))6180    drop-shadow(0 0 26px color-mix(in srgb, var(--peach-accent) 22%, transparent));6181}61826183.peach-pro-active-title {6184  font-family: var(--font-display, var(--font-ui));6185  font-size: 26px;6186  margin: 0;6187  color: var(--peach-t0);6188  letter-spacing: 0.01em;6189}61906191.peach-pro-active-since {6192  margin: 0;6193  font-size: 0.6875rem;6194  color: var(--peach-t2);6195  font-style: italic;6196}61976198.peach-pro-active-features {6199  display: flex;6200  flex-direction: column;6201  gap: 8px;6202  width: 100%;6203  padding: 14px 8px 0;6204  border-top: 1px solid var(--peach-border);6205  flex: 1;6206}62076208.peach-pro-active-feature {6209  display: flex;6210  align-items: center;6211  gap: 9px;6212}62136214.peach-pro-active-feature-mark {6215  color: var(--peach-accent);6216  font-size: 0.625rem;6217  opacity: 0.65;6218  flex-shrink: 0;6219}62206221.peach-pro-active-feature-name {6222  font-size: 0.75rem;6223  color: var(--peach-t1);6224}62256226.peach-pro-deactivate {6227  align-self: center;6228  background: transparent;6229  border: 0;6230  color: var(--peach-t3);6231  font-size: 0.625rem;6232  cursor: pointer;6233  padding: 8px 0 0;6234  margin-top: 16px;6235  letter-spacing: 0.03em;6236  transition: color 0.2s;6237}62386239.peach-pro-deactivate:hover { color: var(--peach-t2); }62406241.peach-pro-deactivate:disabled {6242  opacity: 0.5;6243  cursor: default;6244}62456246/* ── Pro advanced health remediation queue ──────────────────── */6247.peach-health-pro-queue {6248  display: flex;6249  flex-direction: column;6250  gap: 10px;6251  padding: 12px;6252  margin: 0 0 12px;6253  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6254  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6255  border-radius: 10px;6256}62576258.peach-health-pro-queue-head {6259  display: flex;6260  justify-content: space-between;6261  align-items: baseline;6262}62636264.peach-health-pro-queue-title {6265  font-size: 0.75rem;6266  font-weight: 500;6267  letter-spacing: 0.04em;6268  text-transform: uppercase;6269  color: var(--peach-accent);6270}62716272.peach-health-pro-queue-score {6273  font-size: 0.6875rem;6274  color: var(--peach-t2);6275}62766277.peach-health-pro-row {6278  display: flex;6279  gap: 10px;6280  align-items: center;6281  padding: 8px 0;6282  border-top: 1px solid var(--peach-border);6283}62846285.peach-health-pro-row-info {6286  flex: 1;6287  display: flex;6288  flex-direction: column;6289  gap: 4px;6290  min-width: 0;6291}62926293.peach-health-pro-row-name {6294  font-size: 0.8125rem;6295  color: var(--peach-t0);6296  overflow: hidden;6297  text-overflow: ellipsis;6298  white-space: nowrap;6299}63006301.peach-health-pro-row-meta {6302  font-size: 0.6875rem;6303  color: var(--peach-t2);6304}63056306.peach-health-pro-bar {6307  height: 2px;6308  background: var(--peach-border);6309  border-radius: 2px;6310  overflow: hidden;6311  margin-top: 2px;6312}63136314.peach-health-pro-bar-fill {6315  height: 100%;6316  background: var(--peach-accent);6317  transition: width 200ms ease-out;6318}63196320/* ── Pro activation celebration ── */6321@keyframes peach-pro-bloom {6322  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6323  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6324                 drop-shadow(0 0 48px var(--peach-glow)); }6325  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6326}63276328@keyframes peach-pro-wordmark-in {6329  from { opacity: 0; transform: translateY(4px); }6330  to   { opacity: 1; transform: translateY(0); }6331}63326333@keyframes peach-pro-fade-out {6334  from { opacity: 1; }6335  to   { opacity: 0; }6336}63376338.peach-pro-celebration {6339  background:6340    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6341    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6342    var(--peach-bg);6343  border: 1px solid var(--peach-t3);6344  box-shadow:6345    0 2px 8px rgba(0,0,0,0.55),6346    0 14px 48px rgba(0,0,0,0.7),6347    0 0 0 1px rgba(240,232,216,0.04);6348  overflow: hidden;6349  width: 320px;6350  height: 520px;6351  display: flex;6352  flex-direction: column;6353  align-items: center;6354  justify-content: center;6355  gap: 8px;6356  padding: 32px 24px;6357  text-align: center;6358}63596360.peach-pro-celebration.is-leaving {6361  animation: peach-pro-fade-out 400ms ease forwards;6362}63636364.peach-pro-bloom-target {6365  display: flex;6366  align-items: center;6367  justify-content: center;6368  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6369  margin-bottom: 12px;6370}63716372.peach-pro-bloom-icon {6373  width: 48px;6374  height: 48px;6375}63766377.peach-pro-wordmark {6378  font-family: var(--font-display);6379  font-size: 22px;6380  font-style: italic;6381  font-weight: 400;6382  color: var(--peach-accent);6383  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6384}63856386.peach-pro-thankyou {6387  font-size: 0.75rem;6388  font-style: italic;6389  color: var(--peach-t2);6390  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6391}639263936394/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6395.peach-pro-notice-banner {6396  display: flex;6397  align-items: center;6398  gap: 8px;6399  padding: 7px 12px;6400  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6401  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6402  font-size: 0.6875rem;6403  color: var(--peach-t2);6404  font-family: "IBM Plex Mono", monospace;6405  flex-shrink: 0;6406}64076408.peach-pro-notice-link {6409  background: none;6410  border: none;6411  padding: 0;6412  cursor: pointer;6413  font-size: 0.6875rem;6414  color: var(--peach-accent);6415  font-family: "IBM Plex Mono", monospace;6416  margin-left: auto;6417  white-space: nowrap;6418}64196420.peach-pro-notice-close {6421  background: none;6422  border: none;6423  padding: 0 0 0 4px;6424  cursor: pointer;6425  font-size: 0.625rem;6426  color: var(--peach-t3);6427  line-height: 1;6428}64296430/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6431   Renders over whatever view is showing. 60-second expiry; the popup ticks6432   the countdown each second and clears the banner when it hits zero. */6433.peach-pair-request-banner {6434  display: flex;6435  flex-direction: column;6436  gap: 8px;6437  padding: 10px 12px;6438  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6439  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6440  font-family: "IBM Plex Mono", monospace;6441  flex-shrink: 0;6442}64436444.peach-pair-toast {6445  padding: 8px 12px;6446  font-family: "IBM Plex Mono", monospace;6447  font-size: 0.75rem;6448  color: var(--peach-t1);6449  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6450  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6451  flex-shrink: 0;6452  text-align: center;6453}64546455.peach-pair-toast strong {6456  color: var(--peach-t0);6457  font-weight: 500;6458}64596460.peach-pair-request-header {6461  display: flex;6462  align-items: center;6463  gap: 8px;6464  font-size: 0.75rem;6465  color: var(--peach-t1);6466}64676468.peach-pair-request-mark {6469  font-size: 0.875rem;6470  display: inline-flex;6471  align-items: center;6472}64736474.peach-pair-request-icon {6475  width: 1em;6476  height: 1em;6477}64786479.peach-pair-request-title {6480  font-weight: 600;6481  color: var(--peach-t0);6482}64836484.peach-pair-request-countdown {6485  margin-left: auto;6486  font-variant-numeric: tabular-nums;6487  color: var(--peach-t2);6488  font-size: 0.6875rem;6489}64906491.peach-pair-request-body {6492  margin: 0;6493  font-size: 0.75rem;6494  color: var(--peach-t1);6495  line-height: 1.4;6496}64976498.peach-pair-request-body strong {6499  color: var(--peach-t0);6500  font-weight: 600;6501}65026503.peach-pair-request-actions {6504  display: flex;6505  gap: 8px;6506  justify-content: flex-end;6507}65086509/* ─── First-run onboarding ──────────────────────────────────────────────6510   Three-card welcome shown once before vault creation. The PeachScript6511   rune background drifts behind everything at very low opacity — it's6512   atmosphere, not focus. The cards themselves use the same panel6513   language as the rest of the popup so the transition into NewVault is6514   continuous, not a jarring switch of visual register. */65156516.peach-onboarding {6517  position: relative;6518  display: flex;6519  flex-direction: column;6520  width: 100%;6521  height: 100%;6522  padding: 16px 16px 18px;6523  box-sizing: border-box;6524  overflow: hidden;6525  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6526}65276528.peach-onboarding.is-completing {6529  animation: peach-onboard-exit 200ms ease-out forwards;6530}65316532.peach-rune-background {6533  position: absolute;6534  inset: 0;6535  width: 100%;6536  height: 100%;6537  pointer-events: none;6538  z-index: 0;6539  transition: opacity 500ms ease-out;6540}65416542.peach-onboarding.is-completing .peach-rune-background {6543  opacity: 0;6544}65456546.peach-onboarding-header {6547  position: relative;6548  z-index: 1;6549  display: flex;6550  align-items: center;6551  margin-bottom: 14px;6552}65536554.peach-onboarding-card {6555  position: relative;6556  z-index: 1;6557  flex: 1;6558  display: flex;6559  flex-direction: column;6560  gap: 10px;6561  padding: 22px 20px;6562  border-radius: 16px;6563  border: 1px solid var(--peach-t3);6564  background:6565    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6566  backdrop-filter: blur(3px);6567  -webkit-backdrop-filter: blur(3px);6568  box-shadow:6569    inset 0 1px 0 rgba(240, 232, 216, 0.04),6570    0 12px 28px rgba(0, 0, 0, 0.12);6571  cursor: pointer;6572  user-select: none;6573  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6574}65756576.peach-onboarding-card.is-exiting {6577  animation: peach-card-out 120ms ease-in forwards;6578  pointer-events: none;6579}65806581.peach-onboarding-card-headline {6582  margin: 0;6583  font-family: var(--font-display);6584  font-style: italic;6585  font-weight: 400;6586  font-size: 22px;6587  line-height: 1.05;6588  color: var(--peach-t0);6589  white-space: pre-line;6590}65916592.peach-onboarding-divider {6593  margin: 4px 0 6px;6594  border: 0;6595  border-top: 1px solid var(--peach-t3);6596  width: 100%;6597}65986599.peach-onboarding-body {6600  margin: 0;6601  font-size: 0.8125rem;6602  line-height: 1.6;6603  color: var(--peach-t1);6604}66056606.peach-onboarding-warning {6607  display: flex;6608  align-items: flex-start;6609  gap: 8px;6610  margin: 6px 0 0;6611  padding-top: 8px;6612  border-top: 1px dashed var(--peach-t3);6613  font-size: 0.8125rem;6614  line-height: 1.5;6615  color: var(--peach-t1);6616}66176618.peach-onboarding-warning-icon {6619  color: var(--peach-accent);6620  font-size: 0.8125rem;6621  line-height: 1.5;6622  flex: 0 0 auto;6623}66246625.peach-onboarding-nav {6626  position: relative;6627  z-index: 1;6628  display: flex;6629  align-items: center;6630  justify-content: space-between;6631  margin-top: 12px;6632  padding: 0 4px;6633}66346635.peach-onboarding-dots {6636  display: flex;6637  align-items: center;6638  gap: 6px;6639}66406641.peach-onboarding-dot {6642  width: 6px;6643  height: 6px;6644  border-radius: 50%;6645  background: var(--peach-t2);6646  transition: width 200ms ease, height 200ms ease, background 200ms ease;6647}66486649.peach-onboarding-dot.is-active {6650  width: 8px;6651  height: 8px;6652  background: var(--peach-accent);6653}66546655.peach-onboarding-next {6656  background: none;6657  border: none;6658  padding: 4px 0;6659  cursor: pointer;6660  font-family: "IBM Plex Mono", monospace;6661  font-size: 0.6875rem;6662  letter-spacing: 0.04em;6663  color: var(--peach-t1);6664  transition: color 150ms ease;6665}66666667.peach-onboarding-next:hover {6668  color: var(--peach-t0);6669}66706671.peach-onboarding-next:disabled {6672  opacity: 0.5;6673  cursor: default;6674}66756676.peach-onboarding-back {6677  background: none;6678  border: none;6679  padding: 4px 0;6680  cursor: pointer;6681  font-family: "IBM Plex Mono", monospace;6682  font-size: 0.6875rem;6683  letter-spacing: 0.04em;6684  color: var(--peach-t2);6685  transition: color 150ms ease;6686}66876688.peach-onboarding-back:hover {6689  color: var(--peach-t0);6690}66916692.peach-onboarding-back:disabled {6693  opacity: 0.5;6694  cursor: default;6695}66966697/* Reserve back-button width on the first card so the dots stay centred */6698.peach-onboarding-back-spacer {6699  width: 44px;6700}67016702.peach-onboarding-mobile-card-buttons {6703  display: flex;6704  flex-direction: column;6705  gap: 8px;6706  margin-top: 16px;6707}67086709@keyframes peach-onboard-enter {6710  from { opacity: 0; transform: translateY(20px); }6711  to   { opacity: 1; transform: translateY(0); }6712}67136714@keyframes peach-onboard-exit {6715  from { opacity: 1; }6716  to   { opacity: 0; }6717}67186719@keyframes peach-card-in {6720  from { opacity: 0; transform: translateX(12px); }6721  to   { opacity: 1; transform: translateX(0); }6722}67236724@keyframes peach-card-out {6725  from { opacity: 1; transform: translateX(0); }6726  to   { opacity: 0; transform: translateX(-12px); }6727}67286729/* ─── New vault screen — matched to onboarding card language ─────────── */67306731.peach-newvault {6732  position: relative;6733  display: flex;6734  flex-direction: column;6735  gap: 12px;6736  padding: 16px 16px 18px;6737  overflow: hidden;6738}67396740/* Suppress the warm-blob ambient art inherited from .lock-screen — the6741   new vault card now carries the visual weight. */6742.peach-newvault::before {6743  content: none;6744}67456746.peach-newvault-header {6747  position: relative;6748  z-index: 2;6749  display: flex;6750  align-items: center;6751  gap: 10px;6752  margin-bottom: 2px;6753}67546755.peach-newvault-back {6756  display: inline-flex;6757  align-items: center;6758  gap: 4px;6759  background: transparent;6760  border: none;6761  color: var(--peach-t2);6762  font-family: "IBM Plex Mono", monospace;6763  font-size: 0.625rem;6764  letter-spacing: 0.06em;6765  cursor: pointer;6766  padding: 4px 6px;6767  border-radius: 6px;6768  transition: color 120ms ease, background 120ms ease;6769}67706771.peach-newvault-back:hover {6772  color: var(--peach-t0);6773  background: rgba(240, 232, 216, 0.04);6774}67756776.peach-newvault-mark {6777  position: absolute;6778  right: -12px;6779  top: 6px;6780  width: 110px;6781  height: 110px;6782  pointer-events: none;6783  opacity: 0.10;6784  filter: saturate(0.9);6785  z-index: 0;6786}6787.peach-newvault-mark-art {6788  width: 100%;6789  height: 100%;6790}6791.peach-newvault-mark-art path:nth-child(2),6792.peach-newvault-mark-art path:nth-child(3) {6793  stroke: rgba(123, 144, 96, 0.88);6794  fill: rgba(123, 144, 96, 0.88);6795}67966797.peach-newvault-card {6798  position: relative;6799  z-index: 1;6800  display: flex;6801  flex-direction: column;6802  gap: 12px;6803  padding: 22px 20px 18px;6804  border-radius: 16px;6805  border: 1px solid var(--peach-t3);6806  background:6807    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6808  backdrop-filter: blur(3px);6809  -webkit-backdrop-filter: blur(3px);6810  box-shadow:6811    inset 0 1px 0 rgba(240, 232, 216, 0.04),6812    0 12px 28px rgba(0, 0, 0, 0.12);6813  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6814}68156816.peach-newvault-headline {6817  margin: 0;6818  font-family: var(--font-display);6819  font-style: italic;6820  font-weight: 400;6821  font-size: 24px;6822  line-height: 1.05;6823  color: var(--peach-t0);6824  white-space: pre-line;6825}68266827.peach-newvault-divider {6828  margin: 2px 0 4px;6829  border: 0;6830  border-top: 1px solid var(--peach-t3);6831  width: 100%;6832}68336834.peach-newvault-field {6835  display: flex;6836  flex-direction: column;6837  gap: 4px;6838}68396840.peach-newvault-label-row {6841  display: flex;6842  align-items: center;6843  justify-content: space-between;6844}68456846/* Monospace input scaled to the card. Replaces the 22px unlock-input6847   so the placeholder no longer overflows and the field reads as part6848   of the same surface as the body copy. */6849.peach-newvault-input {6850  font-size: 0.875rem;6851  letter-spacing: 0.18em;6852  padding: 8px 0;6853}6854.peach-newvault-input::placeholder {6855  letter-spacing: 0.18em;6856  color: var(--peach-t2);6857}68586859.peach-newvault-hint {6860  margin: 2px 0 0;6861  font-family: "IBM Plex Mono", monospace;6862  font-size: 0.625rem;6863  color: var(--peach-t2);6864  letter-spacing: 0.04em;6865}68666867.peach-newvault-submit {6868  margin-top: 4px;6869}68706871.peach-newvault-warning {6872  display: flex;6873  align-items: flex-start;6874  gap: 8px;6875  margin: 4px 0 0;6876  padding-top: 10px;6877  border-top: 1px dashed var(--peach-t3);6878  font-size: 0.75rem;6879  line-height: 1.5;6880  color: var(--peach-t1);6881}68826883.peach-newvault-warning-icon {6884  color: var(--peach-accent);6885  font-size: 0.8125rem;6886  line-height: 1.4;6887  flex: 0 0 auto;6888}68896890.peach-newvault-footer {6891  position: relative;6892  z-index: 1;6893  display: flex;6894  flex-direction: column;6895  gap: 4px;6896  padding: 4px 4px 0;6897}68986899/* Settings body — warm accent gradient gives the glass something to blur against */6900.peach-settings-body {6901  background:6902    radial-gradient(6903      ellipse at 30% 20%,6904      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,6905      transparent 60%6906    );6907}69086909/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */6910/* ── Danger cards (Replace + Destroy) ────────────────────────────────────6911 * Two severity levels: "warn" for actions that are dangerous-but-recoverable6912 * (replacing the vault from a backup file) and "hazard" for actions that6913 * are absolutely irreversible (Panic). Both use the same card scaffold so6914 * they read as a pair, but the colour family signals the severity at a6915 * glance — yellow for caution, red for don't.6916 */6917.peach-danger-card {6918  --danger-tint: 235, 158, 52; /* amber */6919  display: flex;6920  flex-direction: column;6921  gap: 8px;6922  padding: 14px;6923  margin-top: 10px;6924  border-radius: 12px;6925  border: 1px solid rgba(var(--danger-tint), 0.32);6926  background:6927    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),6928    rgba(var(--danger-tint), 0.04);6929  box-shadow:6930    inset 0 1px 0 rgba(var(--danger-tint), 0.08),6931    0 0 24px rgba(var(--danger-tint), 0.04);6932  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;6933}69346935.peach-danger-card:hover {6936  border-color: rgba(var(--danger-tint), 0.55);6937  box-shadow:6938    inset 0 1px 0 rgba(var(--danger-tint), 0.12),6939    0 0 36px rgba(var(--danger-tint), 0.10);6940}69416942.peach-danger-card--hazard {6943  --danger-tint: 220, 38, 38; /* red */6944}69456946.peach-danger-card-head {6947  display: flex;6948  align-items: center;6949  gap: 10px;6950}69516952.peach-danger-card-glyph {6953  width: 28px;6954  height: 28px;6955  flex-shrink: 0;6956  display: flex;6957  align-items: center;6958  justify-content: center;6959  border-radius: 8px;6960  background: rgba(var(--danger-tint), 0.12);6961  color: rgba(var(--danger-tint), 0.95);6962  font-size: 1rem;6963  line-height: 1;6964}69656966.peach-danger-card-title {6967  margin: 0;6968  font-size: 0.8125rem;6969  font-weight: 600;6970  color: rgba(var(--danger-tint), 0.92);6971  letter-spacing: 0.01em;6972}69736974.peach-danger-card-copy {6975  margin: 0;6976  font-size: 0.6875rem;6977  line-height: 1.5;6978  color: var(--peach-t2);6979}69806981.peach-danger-card-button {6982  width: 100%;6983  padding: 9px;6984  margin-top: 4px;6985  background: transparent;6986  border: 1px solid rgba(var(--danger-tint), 0.45);6987  border-radius: 8px;6988  color: rgba(var(--danger-tint), 0.9);6989  font-size: 0.75rem;6990  font-weight: 500;6991  letter-spacing: 0.02em;6992  cursor: pointer;6993  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;6994}69956996.peach-danger-card-button:hover {6997  background: rgba(var(--danger-tint), 0.10);6998  border-color: rgba(var(--danger-tint), 0.75);6999  color: rgb(var(--danger-tint));7000}70017002/* ── Panic flow (three-step destruction) ───────────────────────────────── */7003.peach-panic {7004  display: flex;7005  flex-direction: column;7006  flex: 1;7007  min-height: 0;7008  padding: 28px 20px 20px;7009  gap: 18px;7010  overflow-y: auto;7011  scrollbar-width: none;7012  -ms-overflow-style: none;7013}70147015.peach-panic::-webkit-scrollbar { display: none; }70167017.peach-panic-step2 {7018  background: rgba(220, 38, 38, 0.04);7019}70207021.peach-panic-step3 {7022  position: relative;7023  background: #0f0505;7024  color: #ffffff;7025  overflow: hidden;7026}70277028.peach-panic-rune-bg {7029  position: absolute;7030  inset: 0;7031  opacity: 0.22;7032  pointer-events: none;7033  overflow: hidden;7034}70357036.peach-panic-rune-bg canvas {7037  width: 100% !important;7038  height: 100% !important;7039}70407041.peach-panic-icon {7042  font-size: 32px;7043  color: rgb(220, 38, 38);7044  line-height: 1;7045}70467047.peach-panic-title {7048  margin: 0;7049  font-size: 18px;7050  font-weight: 500;7051  color: var(--peach-t1);7052}70537054.peach-panic-title--severe {7055  font-size: 20px;7056  font-weight: 700;7057  color: rgb(220, 38, 38);7058}70597060.peach-panic-body {7061  margin: 0;7062  font-size: 0.8125rem;7063  line-height: 1.55;7064  color: var(--peach-t2);7065}70667067.peach-panic-body--severe {7068  color: rgba(220, 38, 38, 0.85);7069}70707071.peach-panic-body--final {7072  font-size: 1rem;7073  font-weight: 700;7074  color: rgb(255, 80, 80);7075  line-height: 1.4;7076}70777078.peach-panic-body--final-intro {7079  font-size: 1rem;7080  color: #ffffff;7081  font-weight: 400;7082}70837084.peach-panic-divider {7085  height: 1px;7086  background: rgba(255, 255, 255, 0.08);7087  margin: 4px 0;7088}70897090.peach-panic-confirm-input {7091  width: 100%;7092  padding: 10px 12px;7093  background: rgba(255, 255, 255, 0.02);7094  border: 1px solid rgba(220, 38, 38, 0.4);7095  border-radius: 8px;7096  color: var(--peach-t1);7097  font-family: "IBM Plex Mono", monospace;7098  font-size: 0.875rem;7099  letter-spacing: 0.12em;7100  text-transform: uppercase;7101}71027103.peach-panic-confirm-input:focus {7104  outline: none;7105  border-color: rgb(220, 38, 38);7106}71077108.peach-panic-confirm-input--match {7109  border-color: rgb(220, 38, 38);7110  color: rgb(220, 38, 38);7111}71127113.peach-panic-confirm-label {7114  font-size: 0.6875rem;7115  color: var(--peach-t2);7116  margin: 0 0 -8px;7117  letter-spacing: 0.06em;7118}71197120.peach-panic-actions {7121  display: flex;7122  flex-direction: column;7123  gap: 10px;7124  margin-top: auto;7125}71267127.peach-panic-button {7128  width: 100%;7129  padding: 12px;7130  border-radius: 8px;7131  font-size: 0.8125rem;7132  cursor: pointer;7133  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7134}71357136.peach-panic-button--primary {7137  background: var(--peach-accent);7138  border: 1px solid var(--peach-accent);7139  color: #ffffff;7140  font-weight: 600;7141}71427143.peach-panic-button--primary:hover {7144  background: color-mix(in srgb, var(--peach-accent) 88%, white);7145}71467147.peach-panic-button--danger {7148  background: rgb(220, 38, 38);7149  border: 1px solid rgb(220, 38, 38);7150  color: #ffffff;7151  font-weight: 600;7152}71537154.peach-panic-button--danger:disabled {7155  opacity: 0.35;7156  cursor: not-allowed;7157}71587159.peach-panic-button--ghost {7160  background: transparent;7161  border: 1px solid rgba(255, 255, 255, 0.18);7162  color: var(--peach-t2);7163}71647165.peach-panic-button--ghost:hover {7166  border-color: rgba(255, 255, 255, 0.32);7167  color: var(--peach-t1);7168}71697170.peach-panic-link {7171  background: transparent;7172  border: none;7173  padding: 4px 0;7174  color: rgba(220, 38, 38, 0.65);7175  font-size: 0.75rem;7176  cursor: pointer;7177  text-align: left;7178  text-decoration: underline;7179  text-underline-offset: 3px;7180}71817182.peach-panic-link:hover {7183  color: rgb(220, 38, 38);7184}71857186.peach-panic-bar {7187  background: rgb(220, 38, 38);7188  padding: 16px 20px;7189  margin: -28px -20px 0;7190  text-align: center;7191  font-size: 0.8125rem;7192  font-weight: 700;7193  letter-spacing: 0.12em;7194  color: #ffffff;7195}71967197.peach-panic-final-button {7198  width: 100%;7199  padding: 14px;7200  background: rgb(220, 38, 38);7201  border: none;7202  border-radius: 8px;7203  color: #ffffff;7204  font-size: 0.875rem;7205  font-weight: 700;7206  letter-spacing: 0.08em;7207  text-transform: uppercase;7208  cursor: pointer;7209  animation: peach-panic-pulse 2s ease-in-out infinite;7210}72117212.peach-settings-license {7213  margin-top: 10px;7214  padding-top: 10px;7215  border-top: 1px solid var(--peach-t3);7216}72177218.peach-settings-label {7219  font-size: 0.625rem;7220  letter-spacing: 0.08em;7221  color: var(--peach-t3);7222  display: block;7223  margin-bottom: 6px;7224}72257226.peach-settings-license-row {7227  display: flex;7228  align-items: center;7229  justify-content: space-between;7230  gap: 8px;7231}72327233.peach-settings-license-key {7234  font-family: 'IBM Plex Mono', monospace;7235  font-size: 0.75rem;7236  color: var(--peach-t0);7237  letter-spacing: 0.04em;7238  word-break: break-all;7239}72407241.peach-settings-license-copy {7242  font-size: 0.6875rem;7243  color: var(--peach-accent);7244  background: transparent;7245  border: none;7246  cursor: pointer;7247  padding: 4px 8px;7248  border-radius: 4px;7249  flex-shrink: 0;7250  transition: opacity 150ms ease;7251}72527253.peach-settings-license-copy:hover {7254  opacity: 0.75;7255}72567257@keyframes peach-panic-pulse {7258  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7259  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7260}72617262[data-motion="reduce"] .peach-panic-final-button {7263  animation: none;7264}72657266/* Vault History — Settings → Vault sub-view */72677268.peach-history-list {7269  border: 1px solid var(--peach-border);7270  border-radius: 8px;7271  overflow: hidden;7272  margin: 8px 0 4px;7273}72747275.peach-history-row {7276  display: flex;7277  align-items: center;7278  justify-content: space-between;7279  padding: 9px 12px;7280  gap: 10px;7281  border-bottom: 1px solid var(--peach-border);7282}72837284.peach-history-row:last-child {7285  border-bottom: none;7286}72877288.peach-history-meta {7289  display: flex;7290  flex-direction: column;7291  gap: 2px;7292  min-width: 0;7293  flex: 1;7294}72957296.peach-history-time {7297  font-size: 0.75rem;7298  font-family: 'IBM Plex Mono', ui-monospace, monospace;7299  color: var(--peach-t0);7300  white-space: nowrap;7301  overflow: hidden;7302  text-overflow: ellipsis;7303}73047305.peach-history-sub {7306  font-size: 0.625rem;7307  color: var(--peach-t2);7308  letter-spacing: 0.06em;7309  text-transform: uppercase;7310  white-space: nowrap;7311  overflow: hidden;7312  text-overflow: ellipsis;7313}73147315.peach-history-btn {7316  flex-shrink: 0;7317  white-space: nowrap;7318  min-width: 56px;7319  text-align: center;7320}73217322.peach-history-btn.is-busy {7323  opacity: 0.65;7324}73257326.peach-history-footer {7327  font-size: 0.625rem;7328  color: var(--peach-t3);7329  letter-spacing: 0.05em;7330  text-align: right;7331  margin: 0;7332  padding: 2px 0 0;7333}73347335/* ── Context menu + swipe-copy flash ─────────────────────── */7336.peach-context-menu-backdrop {7337  position: fixed;7338  inset: 0;7339  background: rgba(0, 0, 0, 0.45);7340  z-index: 100;7341  display: flex;7342  align-items: flex-end;7343  justify-content: center;7344  animation: peach-ctx-fade 140ms ease both;7345}7346.peach-context-menu {7347  width: min(360px, calc(100vw - 24px));7348  margin-bottom: max(env(safe-area-inset-bottom), 12px);7349  background: var(--peach-bg);7350  border: 1px solid var(--peach-t3);7351  border-radius: 14px;7352  padding: 6px;7353  display: flex;7354  flex-direction: column;7355  gap: 2px;7356  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7357  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7358}7359@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7360@keyframes peach-ctx-rise {7361  from { transform: translateY(16px); opacity: 0; }7362  to   { transform: translateY(0);    opacity: 1; }7363}7364.peach-context-menu-item {7365  background: transparent;7366  color: var(--peach-t0);7367  border: 0;7368  border-radius: 10px;7369  padding: 12px 14px;7370  text-align: left;7371  font: inherit;7372  cursor: pointer;7373}7374.peach-context-menu-item:hover,7375.peach-context-menu-item:focus-visible {7376  background: var(--peach-t3);7377}7378.peach-context-menu-item--danger {7379  color: var(--peach-health-bad, #d96868);7380}7381.peach-context-menu-item--cancel {7382  color: var(--peach-t2);7383  margin-top: 4px;7384  border-top: 1px solid var(--peach-t3);7385  border-radius: 0 0 10px 10px;7386}73877388/* Swipe-to-copy flash */7389.peach-entry-row.is-copy-flash {7390  animation: peach-copy-flash 600ms ease both;7391}7392@keyframes peach-copy-flash {7393  0%   { background: transparent; }7394  20%  { background: rgba(217, 153, 51, 0.32); }7395  100% { background: transparent; }7396}73977398html { font-size: 16px; }73997400/* ── Recovery word entry ─────────────────────────────────────────── */7401.peach-lock-recover-link {7402  display: block;7403  width: 100%;7404  margin-top: 12px;7405  background: none;7406  border: none;7407  font-family: "IBM Plex Mono", monospace;7408  font-size: 0.625rem;7409  letter-spacing: 0.06em;7410  color: var(--peach-t2);7411  cursor: pointer;7412  text-align: center;7413  padding: 4px;7414  transition: color 120ms ease;7415}7416.peach-lock-recover-link:hover {7417  color: var(--peach-t0);7418}74197420.lock-screen--recovery {7421  display: flex;7422  flex-direction: column;7423  align-items: stretch;7424  padding: 12px 20px 24px;7425  overflow: hidden;7426}74277428.peach-recovery-nav {7429  display: flex;7430  align-items: center;7431  position: relative;7432  z-index: 1;7433  margin-bottom: 4px;7434}74357436/* Mask runes to the top decorative band only — keep inputs and the7437   bottom CTA button clear. The bottom of the popup is reserved for7438   submit buttons; rendering runes there overlaps the button glyph. */7439.peach-rune-background--recovery {7440  -webkit-mask-image: linear-gradient(7441    to bottom,7442    black 0px, black 85px,7443    transparent 110px,7444    transparent 100%7445  );7446  mask-image: linear-gradient(7447    to bottom,7448    black 0px, black 85px,7449    transparent 110px,7450    transparent 100%7451  );7452}74537454.peach-recovery-header {7455  text-align: center;7456  margin-bottom: 16px;7457  margin-top: 4px;7458}7459.peach-recovery-header .peach-onboarding-headline {7460  font-size: 1.25rem;7461  font-weight: 300;7462  letter-spacing: 0.02em;7463  margin: 0 0 4px;7464}7465.peach-recovery-header .peach-hint {7466  font-family: "IBM Plex Mono", monospace;7467  font-size: 0.625rem;7468  color: var(--peach-t2);7469  letter-spacing: 0.04em;7470  margin: 0;7471}74727473/* 12-word grid: 2 columns × 6 rows */7474.peach-recovery-grid {7475  display: grid;7476  grid-template-columns: repeat(2, 1fr);7477  gap: 12px 20px;7478  width: 100%;7479  margin-bottom: 0;7480}74817482.peach-recovery-word-slot {7483  display: flex;7484  align-items: center;7485  gap: 6px;7486  min-width: 0;7487}74887489.peach-recovery-word-index {7490  font-family: "IBM Plex Mono", monospace;7491  font-size: 0.5rem;7492  color: rgba(255, 255, 255, 0.35);7493  min-width: 14px;7494  flex-shrink: 0;7495  text-align: right;7496  letter-spacing: 0.04em;7497}74987499.peach-recovery-word-input {7500  flex: 1;7501  min-width: 0;7502  background: transparent;7503  border: none;7504  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7505  color: var(--peach-t0);7506  font-family: "IBM Plex Mono", monospace;7507  font-size: 0.6875rem;7508  letter-spacing: 0.06em;7509  padding: 5px 2px 4px;7510  outline: none;7511  text-transform: lowercase;7512  transition: border-color 120ms ease;7513}7514.peach-recovery-word-input::placeholder {7515  color: rgba(255, 255, 255, 0.18);7516}7517.peach-recovery-word-input:focus {7518  border-bottom-color: var(--peach-accent);7519}75207521.peach-recovery-submit {7522  width: 100%;7523  margin-top: auto;7524}75257526.peach-recovery-new-password-form {7527  width: 100%;7528  display: flex;7529  flex-direction: column;7530  gap: 16px;7531  margin-bottom: 8px;7532}7533.peach-recovery-new-password-form .peach-newvault-field {7534  display: flex;7535  flex-direction: column;7536  gap: 4px;7537}75387539/* ── Recovery words display (post-create) ────────────────────────── */7540.lock-screen--recovery-display {7541  display: flex;7542  flex-direction: column;7543  align-items: stretch;7544  padding: 0 20px 20px;7545  min-height: 0;7546  overflow-y: auto;7547}75487549.peach-recovery-words-display {7550  width: 100%;7551  margin-bottom: 16px;7552  border: 1px solid var(--peach-t3);7553  border-radius: 8px;7554  padding: 12px 14px;7555  background: rgba(245, 240, 234, 0.04);7556}75577558.peach-recovery-words-label {7559  font-family: "IBM Plex Mono", monospace;7560  font-size: 0.5rem;7561  letter-spacing: 0.08em;7562  color: var(--peach-t2);7563  text-transform: uppercase;7564  margin-bottom: 10px;7565}75667567.peach-recovery-word-list {7568  list-style: none;7569  margin: 0;7570  padding: 0;7571  display: grid;7572  grid-template-columns: repeat(2, 1fr);7573  gap: 6px 16px;7574}75757576.peach-recovery-word-item {7577  display: flex;7578  align-items: baseline;7579  gap: 5px;7580}75817582.peach-recovery-word-num {7583  font-family: "IBM Plex Mono", monospace;7584  font-size: 0.5rem;7585  color: var(--peach-t2);7586  width: 14px;7587  flex: 0 0 14px;7588  text-align: right;7589  letter-spacing: 0.04em;7590  font-variant-numeric: tabular-nums;7591}75927593.peach-recovery-download-btn {7594  display: block;7595  margin: 10px auto 0;7596  padding: 4px 10px;7597  background: transparent;7598  border: 1px solid var(--peach-border);7599  border-radius: 6px;7600  color: var(--peach-t2);7601  font-family: "IBM Plex Mono", monospace;7602  font-size: 0.5625rem;7603  letter-spacing: 0.06em;7604  text-transform: lowercase;7605  cursor: pointer;7606  transition: border-color 0.15s, color 0.15s;7607}76087609.peach-recovery-download-btn:hover {7610  border-color: var(--peach-accent);7611  color: var(--peach-t0);7612}76137614.peach-recovery-word-text {7615  font-family: "IBM Plex Mono", monospace;7616  font-size: 0.6875rem;7617  letter-spacing: 0.06em;7618  color: var(--peach-t0);7619  text-transform: lowercase;7620}76217622.peach-hint--warning {7623  color: var(--peach-accent);7624  font-style: italic;7625}7626.peach-hint--success {7627  color: var(--peach-t2);7628  font-family: "IBM Plex Mono", monospace;7629  font-size: 0.625rem;7630  letter-spacing: 0.06em;7631}76327633/* Confirmation step */7634.peach-recovery-confirm {7635  width: 100%;7636  flex: 1;7637  display: flex;7638  flex-direction: column;7639}7640.peach-recovery-confirm-label {7641  font-family: "IBM Plex Mono", monospace;7642  font-size: 0.5625rem;7643  letter-spacing: 0.04em;7644  color: var(--peach-t2);7645  text-align: center;7646  margin: 0 0 12px;7647}7648.peach-recovery-confirm-fields {7649  display: flex;7650  flex-direction: column;7651  gap: 14px;7652  margin-bottom: 10px;7653}7654.peach-recovery-confirm-field {7655  display: flex;7656  align-items: center;7657  gap: 8px;7658}7659.peach-recovery-confirm-num {7660  font-family: "IBM Plex Mono", monospace;7661  font-size: 0.5rem;7662  color: var(--peach-t2);7663  min-width: 44px;7664  letter-spacing: 0.04em;7665}7666.peach-recovery-confirm-input {7667  flex: 1;7668  background: transparent;7669  border: none;7670  border-bottom: 1px solid var(--peach-t3);7671  color: var(--peach-t0);7672  font-family: "IBM Plex Mono", monospace;7673  font-size: 0.6875rem;7674  letter-spacing: 0.06em;7675  padding: 4px 2px 3px;7676  outline: none;7677  text-transform: lowercase;7678  transition: border-color 120ms ease;7679}7680.peach-recovery-confirm-input:focus {7681  border-bottom-color: var(--peach-accent);7682}7683.peach-recovery-confirm-input:disabled {7684  opacity: 0.4;7685  cursor: not-allowed;7686}7687.peach-recovery-confirm-btn {7688  width: 100%;7689  margin-top: auto;7690}76917692/* ============================================================7693   Sync info sheet7694   ============================================================ */76957696.peach-sync-info-backdrop {7697  position: fixed;7698  inset: 0;7699  z-index: 200;7700  background: rgba(0, 0, 0, 0.55);7701  display: flex;7702  align-items: flex-end;7703  animation: peach-fade-in 200ms ease forwards;7704}77057706@keyframes peach-fade-in {7707  from { opacity: 0; }7708  to   { opacity: 1; }7709}77107711.peach-sync-info-sheet {7712  width: 100%;7713  background: var(--peach-bg-card, var(--peach-bg));7714  border-top-left-radius: 20px;7715  border-top-right-radius: 20px;7716  padding: 12px 24px 32px;7717  display: flex;7718  flex-direction: column;7719  gap: 20px;7720  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;7721}77227723@keyframes peach-sheet-up {7724  from { transform: translateY(100%); }7725  to   { transform: translateY(0); }7726}77277728.peach-sync-info-handle {7729  width: 36px;7730  height: 4px;7731  border-radius: 2px;7732  background: var(--peach-border);7733  margin: 0 auto 4px;7734  flex-shrink: 0;7735}77367737.peach-sync-info-title {7738  font-family: 'Cormorant Garamond', serif;7739  font-style: italic;7740  font-size: 26px;7741  font-weight: 600;7742  color: var(--peach-t0);7743  margin: 0;7744  line-height: 1.2;7745}77467747.peach-sync-info-body {7748  display: flex;7749  flex-direction: column;7750  gap: 14px;7751}77527753.peach-sync-info-point {7754  display: flex;7755  gap: 12px;7756  align-items: flex-start;7757  font-size: 14px;7758  color: var(--peach-t2);7759  line-height: 1.6;7760  margin: 0;7761}77627763.peach-sync-info-icon {7764  color: var(--peach-accent);7765  font-size: 16px;7766  flex-shrink: 0;7767  margin-top: 1px;7768}77697770.peach-sync-info-actions {7771  display: flex;7772  flex-direction: column;7773  gap: 12px;7774  margin-top: 4px;7775}77767777.peach-sync-info-pro-link {7778  background: none;7779  border: none;7780  font-size: 13px;7781  color: var(--peach-t3);7782  cursor: pointer;7783  padding: 0;7784  font-family: inherit;7785  text-align: center;7786  transition: color 150ms ease;7787}77887789.peach-sync-info-pro-link:hover {7790  color: var(--peach-accent);7791}77927793.peach-btn--full {7794  width: 100%;7795}77967797/* ── Sync screen ── */77987799.peach-sync-coming-soon {7800  display: flex;7801  align-items: flex-start;7802  gap: 10px;7803  padding: 12px 14px;7804  background: var(--peach-s1);7805  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);7806  border-radius: 10px;7807}7808.peach-sync-coming-soon__icon {7809  flex-shrink: 0;7810  color: var(--peach-accent);7811  margin-top: 1px;7812  line-height: 0;7813}7814.peach-sync-coming-soon__title {7815  font-family: 'Cormorant Garamond', serif;7816  font-weight: 500;7817  font-size: 13px;7818  color: var(--peach-accent);7819  margin: 0 0 5px;7820  line-height: 1.3;7821}7822.peach-sync-coming-soon__body {7823  font-size: 12px;7824  color: var(--peach-t1);7825  line-height: 1.55;7826  margin: 0;7827}78287829.peach-sync-screen {7830  display: flex;7831  flex-direction: column;7832  height: 100%;7833}78347835.peach-sync-content {7836  flex: 1;7837  overflow-y: auto;7838  padding: 24px 20px 40px;7839  display: flex;7840  flex-direction: column;7841  gap: 24px;7842}78437844/* Intro (State A) */7845.peach-sync-headline {7846  font-family: 'Cormorant Garamond', serif;7847  font-style: italic;7848  font-size: 28px;7849  font-weight: 600;7850  color: var(--peach-t0);7851  margin: 0 0 10px;7852  line-height: 1.2;7853}78547855.peach-sync-intro-body {7856  font-size: 14px;7857  color: var(--peach-t1);7858  line-height: 1.6;7859  margin: 0;7860}78617862.peach-sync-pro-note {7863  display: flex;7864  flex-direction: column;7865  gap: 8px;7866  background: var(--peach-t3);7867  border-radius: 10px;7868  padding: 12px 14px;7869}78707871.peach-sync-pro-note-text {7872  font-size: 12px;7873  color: var(--peach-t2);7874  line-height: 1.5;7875  margin: 0;7876}78777878.peach-sync-pro-link {7879  background: none;7880  border: none;7881  font-size: 12px;7882  color: var(--peach-accent);7883  cursor: pointer;7884  padding: 0;7885  font-family: inherit;7886  text-align: left;7887}78887889/* Status (State C) */7890.peach-sync-status {7891  padding: 12px 0;7892  border-bottom: 1px solid var(--peach-border);7893}78947895.peach-sync-status-row {7896  display: flex;7897  align-items: center;7898  gap: 8px;7899}79007901.peach-sync-dot {7902  width: 7px;7903  height: 7px;7904  border-radius: 50%;7905  flex-shrink: 0;7906}79077908.peach-sync-dot--green { background: var(--peach-health-ok); }7909.peach-sync-dot--amber { background: var(--peach-accent); }79107911.peach-sync-status-text {7912  font-family: 'IBM Plex Mono', monospace;7913  font-size: 11px;7914  color: var(--peach-t2);7915}79167917/* Paired devices */7918.peach-sync-section {7919  display: flex;7920  flex-direction: column;7921  gap: 2px;7922}79237924.peach-sync-section-label {7925  font-family: 'IBM Plex Mono', monospace;7926  font-size: 10px;7927  letter-spacing: 0.1em;7928  color: var(--peach-t3);7929  margin: 0 0 10px;7930}79317932.peach-sync-device-row {7933  display: flex;7934  justify-content: space-between;7935  align-items: baseline;7936  padding: 10px 0;7937  border-bottom: 1px solid var(--peach-border);7938  gap: 12px;7939}79407941.peach-sync-device-name {7942  font-size: 14px;7943  color: var(--peach-t1);7944}79457946.peach-sync-device-meta {7947  font-family: 'IBM Plex Mono', monospace;7948  font-size: 11px;7949  color: var(--peach-t3);7950  white-space: nowrap;7951}79527953.peach-sync-hub-note {7954  padding: 14px 16px;7955  border: 1px solid var(--peach-border);7956  border-radius: 10px;7957  display: flex;7958  flex-direction: column;7959  gap: 6px;7960  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);7961}79627963.peach-sync-hub-note-title {7964  font-size: 13px;7965  font-weight: 600;7966  color: var(--peach-t0);7967  margin: 0;7968}79697970.peach-sync-hub-note-body {7971  font-size: 12px;7972  color: var(--peach-t2);7973  line-height: 1.6;7974  margin: 0;7975}79767977/* Action buttons */7978.peach-sync-actions {7979  display: flex;7980  gap: 10px;7981  flex-wrap: wrap;7982}79837984/* Upgrade prompt (State B) */7985.peach-sync-upgrade {7986  display: flex;7987  flex-direction: column;7988  gap: 12px;7989  padding: 16px;7990  border: 1px solid var(--peach-border);7991  border-radius: 10px;7992}79937994.peach-sync-upgrade-text {7995  font-size: 13px;7996  color: var(--peach-t2);7997  line-height: 1.6;7998  margin: 0;7999}80008001/* Network note */8002.peach-sync-network-note {8003  font-size: 12px;8004  color: var(--peach-t3);8005  line-height: 1.6;8006  margin: 0;8007}80088009/* Advanced */8010.peach-sync-advanced {8011  margin-top: auto;8012  padding-top: 16px;8013  border-top: 1px solid var(--peach-border);8014}80158016.peach-sync-advanced-toggle {8017  display: flex;8018  align-items: center;8019  gap: 8px;8020  background: none;8021  border: none;8022  font-family: 'IBM Plex Mono', monospace;8023  font-size: 11px;8024  letter-spacing: 0.08em;8025  color: var(--peach-t3);8026  cursor: pointer;8027  padding: 0;8028  text-transform: uppercase;8029}80308031.peach-sync-advanced-chevron {8032  display: inline-block;8033  transition: transform 200ms ease;8034  font-size: 10px;8035}80368037.peach-sync-advanced-chevron.is-open {8038  transform: rotate(90deg);8039}80408041.peach-sync-advanced-content {8042  margin-top: 14px;8043}80448045.peach-sync-advanced-row {8046  display: flex;8047  justify-content: space-between;8048  align-items: center;8049  gap: 16px;8050}80518052.peach-sync-advanced-title {8053  font-size: 14px;8054  color: var(--peach-t1);8055  margin: 0 0 2px;8056}80578058.peach-sync-advanced-subtitle {8059  font-size: 12px;8060  color: var(--peach-t3);8061  margin: 0;8062  line-height: 1.5;8063}80648065/* ── Add Device — Android scan tabs ─────────────────────────────────────── */80668067.peach-pairing-tabs {8068  display: flex;8069  border: 1px solid var(--peach-border);8070  border-radius: 8px;8071  overflow: hidden;8072  margin-bottom: 4px;8073}80748075.peach-pairing-tab {8076  flex: 1;8077  padding: 10px 0;8078  background: none;8079  border: none;8080  font-family: 'IBM Plex Mono', monospace;8081  font-size: 11px;8082  letter-spacing: 0.06em;8083  color: var(--peach-t2);8084  cursor: pointer;8085  transition: background 150ms, color 150ms;8086}80878088.peach-pairing-tab.is-active {8089  background: var(--peach-accent);8090  color: #fff;8091  font-weight: 600;8092}80938094.peach-pairing-tab:not(.is-active):active {8095  background: var(--peach-border);8096}80978098/* Camera view */8099.peach-pairing-camera-container {8100  position: relative;8101  width: 100%;8102  aspect-ratio: 1;8103  border-radius: 12px;8104  overflow: hidden;8105  background: #000;8106  flex-shrink: 0;8107}81088109.peach-pairing-video {8110  width: 100%;8111  height: 100%;8112  object-fit: cover;8113}81148115.peach-pairing-scan-frame {8116  position: absolute;8117  top: 50%;8118  left: 50%;8119  transform: translate(-50%, -50%);8120  width: 60%;8121  aspect-ratio: 1;8122  border: 2px solid var(--peach-accent);8123  border-radius: 8px;8124  pointer-events: none;8125}81268127/* ── Notes Mode ── */81288129/* Overlay that crossfades over the vault */8130.peach-notes-overlay {8131  position: fixed;8132  inset: 0;8133  z-index: 90;8134  opacity: 0;8135  pointer-events: none;8136  animation: peach-mode-in 220ms ease-in forwards;8137}81388139.peach-notes-overlay.is-visible {8140  opacity: 1;8141  pointer-events: auto;8142}81438144@keyframes peach-mode-in {8145  from { opacity: 0; }8146  to   { opacity: 1; }8147}81488149/* Top-level notes surface */8150.peach-notes-mode {8151  position: absolute;8152  inset: 0;8153  background: var(--peach-bg);8154  display: flex;8155  flex-direction: column;8156}81578158/* Rune canvas positioned behind content */8159.peach-note-rune-canvas {8160  position: absolute;8161  inset: 0;8162  width: 100%;8163  height: 100%;8164  pointer-events: none;8165  z-index: 0;8166}81678168/* TOC wrapper */8169.peach-notes-toc-wrapper {8170  position: absolute;8171  inset: 0;8172  z-index: 1;8173  opacity: 1;8174  pointer-events: auto;8175  transition: opacity 200ms ease;8176}81778178.peach-notes-toc-wrapper.is-hidden {8179  opacity: 0;8180  pointer-events: none;8181}81828183/* Editor wrapper */8184.peach-notes-editor-wrapper {8185  position: absolute;8186  inset: 0;8187  z-index: 2;8188  opacity: 0;8189  pointer-events: none;8190  transition: opacity 200ms ease;8191}81928193.peach-notes-editor-wrapper.is-visible {8194  opacity: 1;8195  pointer-events: auto;8196}81978198/* TOC inner */8199.peach-notes-toc {8200  position: relative;8201  display: flex;8202  flex-direction: column;8203  height: 100%;8204  padding-top: env(safe-area-inset-top, 0px);8205  padding-bottom: env(safe-area-inset-bottom, 0px);8206}82078208/* Shared header */8209.peach-notes-header {8210  display: flex;8211  align-items: center;8212  padding: 12px 16px;8213  gap: 12px;8214  flex-shrink: 0;8215  min-height: 52px;8216  position: relative;8217  z-index: 2;8218}82198220.peach-notes-back {8221  font-size: 22px;8222  color: var(--peach-t2);8223  background: none;8224  border: none;8225  padding: 4px;8226  cursor: pointer;8227  line-height: 1;8228  flex-shrink: 0;8229  transition: color 150ms ease;8230  -webkit-tap-highlight-color: transparent;8231}82328233.peach-notes-back:active { color: var(--peach-t0); }82348235.peach-notes-header-title {8236  flex: 1;8237  font-family: 'Cormorant Garamond', serif;8238  font-style: italic;8239  font-size: 22px;8240  color: var(--peach-t0);8241  text-align: center;8242}82438244.peach-notes-header-title.is-breadcrumb {8245  font-family: 'IBM Plex Mono', monospace;8246  font-style: normal;8247  font-size: 11px;8248  color: var(--peach-t3);8249  letter-spacing: 0.08em;8250  text-transform: uppercase;8251  cursor: pointer;8252}82538254.peach-notes-header-actions {8255  display: flex;8256  gap: 8px;8257  flex-shrink: 0;8258}82598260.peach-notes-header-btn {8261  width: 36px;8262  height: 36px;8263  display: flex;8264  align-items: center;8265  justify-content: center;8266  background: none;8267  border: none;8268  color: var(--peach-t2);8269  cursor: pointer;8270  border-radius: 8px;8271  font-size: 16px;8272  transition: color 150ms ease, background 150ms ease;8273  -webkit-tap-highlight-color: transparent;8274}82758276.peach-notes-header-btn:active {8277  background: rgba(255,255,255,0.06);8278  color: var(--peach-t0);8279}82808281/* Inline search bar */8282.peach-notes-search-input {8283  flex: 1;8284  background: none;8285  border: none;8286  outline: none;8287  font-family: 'IBM Plex Mono', monospace;8288  font-size: 13px;8289  color: var(--peach-t0);8290  padding: 4px 0;8291  letter-spacing: 0.02em;8292}82938294.peach-notes-search-input::placeholder {8295  color: var(--peach-t3);8296}82978298/* TOC list */8299.peach-notes-list-container {8300  flex: 1;8301  overflow-y: auto;8302  overflow-x: hidden;8303  scrollbar-width: none;8304  -webkit-overflow-scrolling: touch;8305  overscroll-behavior: contain;8306  position: relative;8307  z-index: 1;8308}83098310.peach-notes-list-container::-webkit-scrollbar { display: none; }83118312/* Note row */8313.peach-note-row {8314  position: relative;8315  display: grid;8316  grid-template-columns: 44px 8px 1fr 8px auto;8317  align-items: center;8318  min-height: 72px;8319  padding: 16px 20px;8320  border-bottom: 0.5px solid var(--peach-border);8321  cursor: pointer;8322  overflow: hidden;8323  touch-action: pan-y;8324  user-select: none;8325  -webkit-user-select: none;8326  -webkit-tap-highlight-color: transparent;8327}83288329.peach-note-row:first-child {8330  border-top: 0.5px solid var(--peach-border);8331}83328333.peach-note-row:active {8334  background: rgba(255,255,255,0.02);8335}83368337.peach-note-numeral {8338  font-family: 'Cormorant Garamond', serif;8339  font-style: italic;8340  font-size: 15px;8341  color: var(--peach-accent);8342  text-align: right;8343  line-height: 1;8344  flex-shrink: 0;8345}83468347.peach-note-title-gap { /* grid spacer */ }83488349.peach-note-title {8350  font-family: 'Cormorant Garamond', serif;8351  font-style: italic;8352  font-size: 18px;8353  color: var(--peach-t0);8354  line-height: 1.3;8355  min-width: 0;8356  overflow-wrap: break-word;8357}83588359.peach-note-title-match {8360  color: var(--peach-accent);8361}83628363.peach-note-date {8364  font-family: 'IBM Plex Mono', monospace;8365  font-size: 11px;8366  color: var(--peach-t2);8367  white-space: nowrap;8368  text-align: right;8369  flex-shrink: 0;8370  grid-column: 5;8371}83728373/* Swipe underlays */8374.peach-note-row-underlay {8375  position: absolute;8376  inset: 0;8377  display: flex;8378  align-items: center;8379  padding: 0 24px;8380  font-family: 'IBM Plex Mono', monospace;8381  font-size: 11px;8382  letter-spacing: 0.1em;8383  pointer-events: none;8384  z-index: 0;8385}83868387.peach-note-row-underlay--delete {8388  background: #8B2020;8389  color: rgba(255,255,255,0.9);8390  justify-content: flex-end;8391}83928393.peach-note-row-underlay--archive {8394  background: var(--peach-accent);8395  color: #0C0A06;8396  justify-content: flex-start;8397}83988399/* Delete confirm strip */8400.peach-note-delete-confirm {8401  position: absolute;8402  inset: 0;8403  background: var(--peach-bg);8404  display: flex;8405  align-items: center;8406  gap: 12px;8407  padding: 0 20px;8408  font-family: 'IBM Plex Mono', monospace;8409  font-size: 11px;8410  color: var(--peach-t1);8411  letter-spacing: 0.04em;8412  animation: peach-delete-confirm-in 150ms ease both;8413  z-index: 10;8414}84158416@keyframes peach-delete-confirm-in {8417  from { opacity: 0; }8418  to   { opacity: 1; }8419}84208421.peach-note-delete-confirm-btn {8422  background: #8B2020;8423  color: rgba(255,255,255,0.9);8424  border: none;8425  border-radius: 6px;8426  padding: 4px 10px;8427  font-family: 'IBM Plex Mono', monospace;8428  font-size: 10px;8429  cursor: pointer;8430  letter-spacing: 0.06em;8431}84328433.peach-note-delete-cancel-btn {8434  background: none;8435  border: none;8436  color: var(--peach-t3);8437  font-family: 'IBM Plex Mono', monospace;8438  font-size: 10px;8439  cursor: pointer;8440  letter-spacing: 0.06em;8441  padding: 4px 6px;8442}84438444/* + New note button */8445.peach-notes-new-btn {8446  font-family: 'IBM Plex Mono', monospace;8447  font-size: 12px;8448  color: var(--peach-t3);8449  text-align: center;8450  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8451  background: none;8452  border: none;8453  width: 100%;8454  cursor: pointer;8455  letter-spacing: 0.04em;8456  transition: color 150ms ease;8457  -webkit-tap-highlight-color: transparent;8458}84598460.peach-notes-new-btn:active { color: var(--peach-accent); }84618462/* Empty state */8463.peach-notes-empty {8464  display: flex;8465  flex-direction: column;8466  align-items: center;8467  justify-content: center;8468  flex: 1;8469  padding: 48px 32px;8470  gap: 16px;8471}84728473.peach-notes-empty-text {8474  font-family: 'Cormorant Garamond', serif;8475  font-style: italic;8476  font-size: 20px;8477  color: var(--peach-t3);8478  text-align: center;8479  margin: 0;8480  line-height: 1.4;8481  white-space: pre-line;8482}84838484/* ── Editor surface ── */84858486.peach-note-editor-surface {8487  position: absolute;8488  inset: 0;8489  background: var(--peach-bg);8490  display: flex;8491  flex-direction: column;8492  padding-top: env(safe-area-inset-top, 0px);8493}84948495.peach-note-editor-scroll {8496  flex: 1;8497  overflow-y: auto;8498  overflow-x: hidden;8499  scrollbar-width: none;8500  -webkit-overflow-scrolling: touch;8501  padding: 0 24px 120px;8502  position: relative;8503  z-index: 1;8504}85058506.peach-note-editor-scroll::-webkit-scrollbar { display: none; }85078508/* Desktop toolbar (always visible above body) */8509.peach-note-toolbar-desktop-inline {8510  display: flex;8511  align-items: center;8512  gap: 2px;8513  padding: 6px 0 12px;8514  margin-bottom: 4px;8515  border-bottom: 0.5px solid var(--peach-border);8516}85178518/* Title field */8519.peach-note-title-field {8520  font-family: 'Cormorant Garamond', serif;8521  font-style: italic;8522  font-size: 32px;8523  font-weight: 600;8524  color: var(--peach-t0);8525  line-height: 1.2;8526  padding: 8px 0 0;8527  outline: none;8528  min-height: 44px;8529  word-break: break-word;8530  position: relative;8531  z-index: 1;8532}85338534.peach-note-title-field:empty::before {8535  content: attr(data-placeholder);8536  color: var(--peach-t3);8537  pointer-events: none;8538}85398540/* Hairline separator */8541.peach-note-hairline {8542  height: 0.5px;8543  background: var(--peach-border);8544  margin: 12px 0 20px;8545  position: relative;8546  z-index: 1;8547}85488549/* Body field */8550.peach-note-body-field {8551  font-family: 'DM Sans', sans-serif;8552  font-size: 16px;8553  color: var(--peach-t0);8554  line-height: 1.85;8555  padding: 0;8556  outline: none;8557  min-height: 240px;8558  word-break: break-word;8559  position: relative;8560  z-index: 1;8561}85628563.peach-note-body-field:empty::before {8564  content: attr(data-placeholder);8565  color: var(--peach-t3);8566  font-style: italic;8567  pointer-events: none;8568}85698570.peach-note-body-field h2 {8571  font-family: 'Cormorant Garamond', serif;8572  font-style: italic;8573  font-size: 22px;8574  font-weight: 600;8575  color: var(--peach-t0);8576  margin: 20px 0 8px;8577}85788579.peach-note-body-field blockquote {8580  border-left: 2px solid var(--peach-accent);8581  margin: 12px 0;8582  padding-left: 16px;8583  color: var(--peach-t1);8584  font-style: italic;8585}85868587.peach-note-body-field ul,8588.peach-note-body-field ol {8589  padding-left: 20px;8590  margin: 8px 0;8591}85928593.peach-note-body-field li {8594  margin: 4px 0;8595}85968597.peach-note-body-field hr {8598  border: none;8599  border-top: 0.5px solid var(--peach-border);8600  margin: 16px 0;8601}86028603/* Saved indicator */8604.peach-note-saved-indicator {8605  font-family: 'IBM Plex Mono', monospace;8606  font-size: 11px;8607  color: var(--peach-t3);8608  letter-spacing: 0.04em;8609  text-align: right;8610  padding: 6px 24px;8611  flex-shrink: 0;8612  transition: opacity 300ms ease;8613  pointer-events: none;8614  position: relative;8615  z-index: 1;8616}86178618/* Mobile keyboard toolbar */8619.peach-note-toolbar-mobile {8620  display: flex;8621  align-items: center;8622  padding: 8px 16px;8623  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));8624  background: var(--peach-bg);8625  border-top: 0.5px solid var(--peach-border);8626  gap: 4px;8627  flex-shrink: 0;8628  position: relative;8629  z-index: 10;8630}86318632.peach-note-toolbar-btn {8633  min-width: 36px;8634  height: 36px;8635  display: flex;8636  align-items: center;8637  justify-content: center;8638  background: none;8639  border: none;8640  border-radius: 8px;8641  cursor: pointer;8642  font-size: 14px;8643  color: var(--peach-t1);8644  font-family: 'DM Sans', sans-serif;8645  font-weight: 600;8646  transition: background 100ms ease, color 100ms ease;8647  -webkit-tap-highlight-color: transparent;8648}86498650.peach-note-toolbar-btn--italic { font-style: italic; }8651.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }8652.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }86538654.peach-note-toolbar-divider {8655  width: 0.5px;8656  height: 20px;8657  background: var(--peach-border);8658  margin: 0 4px;8659  flex-shrink: 0;8660}86618662.peach-note-toolbar-spacer { flex: 1; }86638664/* Desktop: larger headline in TOC */8665@media (min-width: 400px) {8666  .peach-notes-header-title:not(.is-breadcrumb) {8667    font-size: 32px;8668  }86698670  .peach-note-row {8671    min-height: 64px;8672    padding: 14px 16px;8673  }8674}86758676/* Flying title — shared element during expansion/collapse */86778678/* ─── Light theme overrides ───────────────────────────────────────────────8679   Tokens that cannot be expressed as variable substitutions — hardcoded8680   context-specific values that need separate light-mode rules. */86818682/* Settings section headers: use text-label (#5C4228) for more presence8683   than --t2 alone — gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY8684   the dark anchor they need against the warmer background. */8685.light .peach-settings-sub-label,8686[data-theme="light"] .peach-settings-sub-label,8687.light .peach-settings-nav-label,8688[data-theme="light"] .peach-settings-nav-label {8689  color: #5C4228;8690}86918692/* Secondary action buttons (ghost / subtle): filled with the sunken surface8693   colour so they read as embedded and intentional on the linen background8694   rather than floating. Values track --s3 (bg-sunken) and border-default. */8695.light .peach-btn--ghost,8696[data-theme="light"] .peach-btn--ghost {8697  background: #C4BCB5;8698  border-color: #96724C;8699  color: #1A1208;8700}8701.light .peach-btn--subtle,8702[data-theme="light"] .peach-btn--subtle {8703  background: #C4BCB5;8704  border-color: #96724C;8705}87068707/* Wide secondary action button on the lock screen — override the8708   hardcoded dark-mode rgba values with warm-surface equivalents. */8709.light .peach-lock-secondary,8710[data-theme="light"] .peach-lock-secondary {8711  background: #C4BCB5;8712  border-color: #96724C;8713  color: #1A1208;8714}8715.light .peach-lock-secondary:hover,8716[data-theme="light"] .peach-lock-secondary:hover {8717  background: #C9C0B8;8718}87198720/* Entry row hover: replace the near-invisible light-on-light rgba value. */8721.light .peach-entry-row:hover,8722[data-theme="light"] .peach-entry-row:hover {8723  background: rgba(26, 18, 8, 0.05);8724}8725.light .peach-entry-row.is-active,8726[data-theme="light"] .peach-entry-row.is-active {8727  background: rgba(26, 18, 8, 0.04);8728}8729.light .peach-entry-row.is-selected,8730[data-theme="light"] .peach-entry-row.is-selected {8731  background: rgba(26, 18, 8, 0.06);8732}87338734/* ──────────────────────────────────────────────────────────────────────────8735   Chirp pairing flow — bird-stage animation (Phase 1)8736   See src/popup/components/ChirpPairingFlow.tsx and the brief §6.2.8737   Three-act animation gated on the [data-phase] attribute of8738   .peach-chirp-pair; child layers (birds, chirp arcs, flight wave, dot)8739   each react via either pose class or visibility flag.8740   Tokens: accent surfaces use var(--peach-accent); bird illustration8741   colours are baked into the SVG per the brand-peach exception in §3.1.8742   ────────────────────────────────────────────────────────────────────── */87438744.peach-chirp-pair {8745  position: absolute;8746  inset: 0;8747  z-index: 3;8748  display: flex;8749  flex-direction: column;8750  padding: 14px 12px 12px;8751  width: 100%;8752  box-sizing: border-box;8753  gap: 0;8754  background:8755    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),8756    var(--peach-bg);8757  color: var(--peach-t0);8758  overflow-y: auto;8759  overflow-x: hidden;8760  scrollbar-width: none;8761  isolation: isolate;8762  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;8763}8764@keyframes peach-chirp-overlay-in {8765  from { opacity: 0; transform: translateY(8px); }8766  to   { opacity: 1; transform: translateY(0); }8767}8768.peach-chirp-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }8769.peach-chirp-pair::before {8770  content: '';8771  position: absolute;8772  inset: 0;8773  border-radius: inherit;8774  pointer-events: none;8775  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);8776  z-index: 0;8777}8778.peach-chirp-pair > * { position: relative; z-index: 1; }87798780/* Header --------------------------------------------------------------- */8781.peach-chirp-head {8782  display: flex; align-items: center; gap: 10px;8783}8784.peach-chirp-back {8785  width: 32px; height: 32px;8786  display: inline-flex; align-items: center; justify-content: center;8787  background: color-mix(in srgb, var(--peach-t0) 6%, transparent);8788  border: 1px solid color-mix(in srgb, var(--peach-t0) 12%, transparent);8789  border-radius: 8px;8790  color: var(--peach-t1);8791  cursor: pointer;8792  transition: background 0.15s ease, color 0.15s ease;8793}8794.peach-chirp-back:hover {8795  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);8796  color: var(--peach-t0);8797}8798.peach-chirp-title {8799  font-family: var(--font-display, Georgia, serif);8800  font-style: italic;8801  font-size: 24px;8802  font-weight: 500;8803  letter-spacing: 0.005em;8804  color: var(--peach-t0);8805  line-height: 1;8806}8807.peach-chirp-head-spacer { flex: 1; }88088809/* Chip row ------------------------------------------------------------- */8810.peach-chirp-chip-row {8811  display: flex;8812  align-items: center;8813  justify-content: flex-start;8814  margin-top: 12px;8815}8816.peach-chirp-chip {8817  display: inline-flex; align-items: center; gap: 8px;8818  padding: 5px 10px 5px 8px;8819  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);8820  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);8821  border-radius: 999px;8822  font-family: var(--peach-mono, ui-monospace, monospace);8823  font-size: 11px;8824  letter-spacing: 0.04em;8825  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));8826}8827.peach-chirp-chip-dot {8828  width: 6px; height: 6px; border-radius: 50%;8829  background: var(--peach-accent);8830  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);8831}8832.peach-chirp-chip[data-phase="paired"] {8833  background: color-mix(in srgb, #4f9eda 12%, transparent);8834  border-color: color-mix(in srgb, #4f9eda 28%, transparent);8835  color: #76b6e8;8836}8837.peach-chirp-chip[data-phase="paired"] .peach-chirp-chip-dot {8838  background: #76b6e8;8839  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);8840}8841.peach-chirp-chip[data-phase="timeout"],8842.peach-chirp-chip[data-phase="mic_denied"],8843.peach-chirp-chip[data-phase="version_mismatch"],8844.peach-chirp-chip[data-phase="handshake_failed"] {8845  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);8846  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);8847  color: var(--peach-warn, #d29257);8848}8849.peach-chirp-chip[data-phase="timeout"] .peach-chirp-chip-dot,8850.peach-chirp-chip[data-phase="mic_denied"] .peach-chirp-chip-dot,8851.peach-chirp-chip[data-phase="version_mismatch"] .peach-chirp-chip-dot,8852.peach-chirp-chip[data-phase="handshake_failed"] .peach-chirp-chip-dot {8853  background: var(--peach-warn, #d29257);8854  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);8855}88568857/* Bird stage ----------------------------------------------------------- */8858.peach-chirp-stage {8859  position: relative;8860  margin: 14px 0 8px;8861  height: 180px;8862  border-radius: 12px;8863  background:8864    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),8865    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),8866    color-mix(in srgb, var(--peach-bg) 92%, #000);8867  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);8868  overflow: hidden;8869  isolation: isolate;8870}8871.peach-chirp-stage::after {8872  content: '';8873  position: absolute;8874  left: 12%; right: 12%;8875  bottom: 36px;8876  height: 1px;8877  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);8878}88798880.peach-chirp-bird-slot {8881  position: absolute;8882  bottom: 8px;8883  width: 100px;8884  height: 110px;8885  display: flex;8886  align-items: flex-end;8887  justify-content: center;8888}8889.peach-chirp-bird-slot-desktop { left: 28px; }8890.peach-chirp-bird-slot-mobile { right: 28px; }88918892/* Mobile bird hops in from the right when handshake begins */8893.peach-chirp-bird-slot-mobile {8894  opacity: 1;8895  transform: translateX(-6px);8896  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);8897}8898.peach-chirp-stage.act-listening .peach-chirp-bird-slot-mobile,8899.peach-chirp-stage.act-chirping .peach-chirp-bird-slot-mobile,8900.peach-chirp-stage.act-idle .peach-chirp-bird-slot-mobile {8901  opacity: 0;8902  transform: translateX(60px) rotate(8deg);8903}8904.peach-chirp-stage.act-handshake .peach-chirp-bird-slot-desktop,8905.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop {8906  transform: translateX(6px);8907  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);8908}89098910/* Paired: both birds bob together */8911.peach-chirp-stage.act-paired .peach-chirp-bird-slot {8912  animation: peach-chirp-happy-bob 1.2s ease-in-out infinite;8913}8914.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { animation-delay: 0.2s; }8915.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop { --bb-x: 6px; }8916.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { --bb-x: -6px; }8917@keyframes peach-chirp-happy-bob {8918  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }8919  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }8920}89218922/* Bird internal -------------------------------------------------------- */8923.peach-chirp-bird {8924  width: 108px;8925  height: 108px;8926  transform-origin: 50% 95%;8927}8928.peach-chirp-bird svg { width: 100%; height: 100%; overflow: visible; }89298930.peach-chirp-bird-body {8931  transform-origin: 50% 80%;8932  animation: peach-chirp-bird-bob 2.4s ease-in-out infinite;8933}8934@keyframes peach-chirp-bird-bob {8935  0%, 100% { transform: translateY(0) scale(1, 1); }8936  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }8937}89388939.peach-chirp-bird-eye-group {8940  animation: peach-chirp-blink 5.2s steps(1, end) infinite;8941  transform-origin: center;8942  transform-box: fill-box;8943}8944@keyframes peach-chirp-blink {8945  0%, 92%, 96%, 100% { transform: scaleY(1); }8946  94%                { transform: scaleY(0.05); }8947}89488949/* Pose: chirping — beak opens, head bobs, aura blooms */8950.peach-chirp-bird-pose-chirping .peach-chirp-bird-body {8951  animation:8952    peach-chirp-bird-bob 2.4s ease-in-out infinite,8953    peach-chirp-squeeze 1.7s ease-in-out infinite;8954}8955@keyframes peach-chirp-squeeze {8956  0%, 70%, 100% { transform-origin: 50% 85%; }8957  78%           { transform: scale(1.04, 0.96) translateY(1px); }8958  86%           { transform: scale(0.98, 1.02); }8959}8960.peach-chirp-bird-pose-chirping .peach-chirp-bird-head-group {8961  animation: peach-chirp-head-bob 1.7s ease-in-out infinite;8962}8963@keyframes peach-chirp-head-bob {8964  0%, 70%, 100% { transform: translateY(0) rotate(0); }8965  78%           { transform: translateY(-3px) rotate(-4deg); }8966  86%           { transform: translateY(-1px) rotate(-2deg); }8967}8968.peach-chirp-bird-pose-chirping .peach-chirp-bird-beak {8969  animation: peach-chirp-beak-open 1.7s ease-in-out infinite;8970}8971@keyframes peach-chirp-beak-open {8972  0%, 70%, 100% { transform: rotate(0) scaleX(1); }8973  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }8974  86%           { transform: rotate(-6deg); }8975}8976.peach-chirp-bird-pose-chirping .peach-chirp-bird-aura {8977  animation: peach-chirp-aura 1.7s ease-in-out infinite;8978}8979@keyframes peach-chirp-aura {8980  0%, 100% { opacity: 0; }8981  50%      { opacity: 0.8; }8982}8983.peach-chirp-bird-pose-chirping .peach-chirp-bird-tail {8984  animation: peach-chirp-tail-twitch 1.7s ease-in-out infinite;8985  transform-origin: 100% 50%;8986}8987@keyframes peach-chirp-tail-twitch {8988  0%, 75%, 100% { transform: rotate(0); }8989  82%           { transform: rotate(-3deg) translateX(-1px); }8990}89918992/* Pose: attentive — head tilts toward partner */8993.peach-chirp-bird-pose-attentive .peach-chirp-bird-head-group {8994  animation: peach-chirp-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;8995}8996@keyframes peach-chirp-head-tilt {8997  0%   { transform: rotate(0) translateY(0); }8998  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }8999  100% { transform: rotate(-6deg); }9000}9001.peach-chirp-bird-pose-attentive .peach-chirp-bird-tail {9002  animation: peach-chirp-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9003  transform-origin: 100% 50%;9004}9005@keyframes peach-chirp-tail-cock {9006  0%   { transform: rotate(0); }9007  100% { transform: rotate(-4deg); }9008}90099010/* Pose: happy — wing flutter, tuft perk, tail wag */9011.peach-chirp-bird-pose-happy .peach-chirp-bird-wing {9012  transform-origin: 80% 60%;9013  animation: peach-chirp-wing-flutter 0.32s ease-in-out 5;9014}9015@keyframes peach-chirp-wing-flutter {9016  0%, 100% { transform: rotate(0) translateY(0); }9017  50%      { transform: rotate(-16deg) translateY(-2px); }9018}9019.peach-chirp-bird-pose-happy .peach-chirp-bird-tuft {9020  transform-origin: 0% 100%;9021  animation: peach-chirp-tuft-perk 0.4s ease-in-out 3;9022}9023@keyframes peach-chirp-tuft-perk {9024  0%, 100% { transform: rotate(0); }9025  50%      { transform: rotate(-15deg) translateY(-1px); }9026}9027.peach-chirp-bird-pose-happy .peach-chirp-bird-tail {9028  transform-origin: 100% 50%;9029  animation: peach-chirp-tail-wag 0.5s ease-in-out 4;9030}9031@keyframes peach-chirp-tail-wag {9032  0%, 100% { transform: rotate(0); }9033  25%      { transform: rotate(6deg); }9034  75%      { transform: rotate(-6deg); }9035}9036.peach-chirp-bird-pose-happy .peach-chirp-bird-head-group {9037  animation: peach-chirp-head-perk 0.5s ease-out;9038}9039@keyframes peach-chirp-head-perk {9040  0%   { transform: translateY(0); }9041  40%  { transform: translateY(-3px) rotate(2deg); }9042  100% { transform: translateY(0); }9043}90449045/* Pose: sad — body droops forward */9046.peach-chirp-bird-pose-sad .peach-chirp-bird-body {9047  transform: translateY(5px) rotate(-2deg);9048  animation: none;9049}9050.peach-chirp-bird-pose-sad .peach-chirp-bird-head-group {9051  transform: translateY(4px) rotate(8deg);9052}9053.peach-chirp-bird-pose-sad .peach-chirp-bird-tuft { transform: rotate(15deg) translateY(2px); }9054.peach-chirp-bird-pose-sad .peach-chirp-bird-tail { transform: rotate(8deg) translateY(2px); }90559056.peach-chirp-bird-pose-hidden { opacity: 0; }90579058/* Chirp arcs ----------------------------------------------------------- */9059.peach-chirp-arcs {9060  position: absolute;9061  top: 18px;9062  width: 96px;9063  height: 70px;9064  pointer-events: none;9065}9066.peach-chirp-arcs-right { right: -60px; }9067.peach-chirp-arcs-left  { left: -60px; transform: scaleX(-1); }9068.peach-chirp-arc {9069  position: absolute;9070  top: 50%;9071  left: 0;9072  width: 40px;9073  height: 40px;9074  margin-top: -20px;9075  border: 1.2px solid #f4d5a8;9076  border-color: transparent #f4d5a8 transparent transparent;9077  border-radius: 50%;9078  opacity: 0;9079  animation: peach-chirp-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9080}9081@keyframes peach-chirp-arc-expand {9082  0%   { transform: scale(0.4); opacity: 0; }9083  20%  { opacity: 0.9; }9084  100% { transform: scale(1.6); opacity: 0; }9085}90869087/* Flight wave ---------------------------------------------------------- */9088.peach-chirp-flight-track {9089  position: absolute;9090  inset: 32px 36px 38px 36px;9091  pointer-events: none;9092}9093.peach-chirp-flight-wave {9094  position: absolute;9095  top: 8px;9096  left: 76px;9097  right: 76px;9098  height: 60px;9099  width: auto;9100  opacity: 0;9101  transition: opacity 0.15s ease;9102  stroke: #f4d5a8;9103  fill: none;9104}9105.peach-chirp-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9106.peach-chirp-flight-wave.is-visible { opacity: 1; }9107.peach-chirp-flight-path,9108.peach-chirp-flight-path-2 {9109  stroke-dasharray: 240;9110  stroke-dashoffset: 240;9111  stroke-linecap: round;9112  fill: none;9113}9114.peach-chirp-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9115.peach-chirp-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9116.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path {9117  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9118}9119.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path-2 {9120  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9121}9122@keyframes peach-chirp-fly {9123  0%   { stroke-dashoffset: 240; opacity: 0; }9124  20%  { opacity: 1; }9125  100% { stroke-dashoffset: -120; opacity: 0; }9126}91279128/* Connection dot ------------------------------------------------------- */9129.peach-chirp-dot {9130  position: absolute;9131  top: 50%; left: 50%;9132  transform: translate(-50%, -50%);9133  width: 40px; height: 40px;9134  opacity: 0;9135  pointer-events: none;9136  transition: opacity 0.3s ease;9137  color: var(--peach-accent);9138}9139.peach-chirp-dot.is-visible { opacity: 1; }9140.peach-chirp-dot-glow {9141  position: absolute; top: 50%; left: 50%;9142  transform: translate(-50%, -50%);9143  width: 38px; height: 38px;9144  border-radius: 50%;9145  filter: blur(10px);9146  opacity: 0.55;9147  background: var(--peach-accent);9148  animation: peach-chirp-dot-bloom 1.4s ease-out;9149}9150.peach-chirp-dot-core {9151  position: absolute; top: 50%; left: 50%;9152  transform: translate(-50%, -50%);9153  width: 8px; height: 8px;9154  border-radius: 50%;9155  background: var(--peach-accent);9156  box-shadow: 0 0 12px currentColor;9157  animation: peach-chirp-dot-core 1.4s ease-out;9158}9159.peach-chirp-dot-ring {9160  position: absolute; top: 50%; left: 50%;9161  width: 60px; height: 60px;9162  transform: translate(-50%, -50%);9163  animation: peach-chirp-dot-ring 1.4s linear;9164  stroke: var(--peach-accent);9165}9166@keyframes peach-chirp-dot-bloom {9167  0%   { width: 4px; height: 4px; opacity: 0; }9168  35%  { width: 60px; height: 60px; opacity: 0.7; }9169  100% { width: 38px; height: 38px; opacity: 0.55; }9170}9171@keyframes peach-chirp-dot-core {9172  0%   { width: 0; height: 0; }9173  35%  { width: 12px; height: 12px; }9174  100% { width: 8px; height: 8px; }9175}9176@keyframes peach-chirp-dot-ring {9177  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9178  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9179  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9180}91819182/* Motes — drift upward across the stage */9183.peach-chirp-motes {9184  position: absolute;9185  inset: 0;9186  pointer-events: none;9187}9188.peach-chirp-mote {9189  position: absolute;9190  width: 2px; height: 2px;9191  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9192  border-radius: 50%;9193  bottom: 32px;9194  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9195  opacity: 0;9196  animation: peach-chirp-mote-drift 6s linear infinite;9197  animation-delay: calc(var(--mote-i, 0) * 0.7s);9198}9199@keyframes peach-chirp-mote-drift {9200  0%   { transform: translateY(0); opacity: 0; }9201  10%  { opacity: 0.6; }9202  90%  { opacity: 0.1; }9203  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9204}92059206/* Status copy ---------------------------------------------------------- */9207.peach-chirp-copy-host {9208  margin: 4px 4px 10px;9209  text-align: center;9210  min-height: 50px;9211}9212.peach-chirp-copy {9213  animation: peach-chirp-copy-in 0.35s ease both;9214}9215@keyframes peach-chirp-copy-in {9216  from { opacity: 0; transform: translateY(4px); }9217  to   { opacity: 1; transform: translateY(0); }9218}9219.peach-chirp-headline {9220  font-family: var(--font-display, Georgia, serif);9221  font-style: italic;9222  font-size: 20px;9223  font-weight: 500;9224  line-height: 1.2;9225  letter-spacing: 0.005em;9226  color: var(--peach-t0);9227  margin-bottom: 6px;9228}9229.peach-chirp-copy-listening .peach-chirp-headline,9230.peach-chirp-copy-chirping .peach-chirp-headline,9231.peach-chirp-copy-idle .peach-chirp-headline {9232  font-family: inherit;9233  font-style: normal;9234  font-weight: 500;9235  font-size: 15px;9236  color: var(--peach-t0);9237  letter-spacing: 0;9238}9239.peach-chirp-copy-paired .peach-chirp-headline {9240  color: var(--peach-t0);9241  font-weight: 600;9242}9243.peach-chirp-sub {9244  font-size: 12.5px;9245  line-height: 1.45;9246  color: var(--peach-t1);9247  max-width: 280px;9248  margin: 0 auto;9249  text-wrap: pretty;9250}92519252/* Status action -------------------------------------------------------- */9253.peach-chirp-action {9254  margin: 2px 4px 10px;9255}9256.peach-chirp-action-waiting {9257  display: flex;9258  align-items: center;9259  justify-content: space-between;9260  gap: 12px;9261}9262.peach-chirp-cancel {9263  min-width: 96px;9264}9265.peach-chirp-listening {9266  display: inline-flex; align-items: center; gap: 4px;9267  font-family: var(--peach-mono, ui-monospace, monospace);9268  font-size: 9.5px;9269  text-transform: uppercase;9270  letter-spacing: 0.12em;9271  color: var(--peach-t1);9272  padding: 8px 10px;9273}9274.peach-chirp-listen-dot {9275  width: 4px; height: 4px;9276  border-radius: 50%;9277  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9278  animation: peach-chirp-listen-pulse 1.2s ease-in-out infinite;9279}9280.peach-chirp-listen-dot:nth-child(2) { animation-delay: 0.2s; }9281.peach-chirp-listen-dot:nth-child(3) { animation-delay: 0.4s; }9282.peach-chirp-listen-label { margin-left: 6px; }9283@keyframes peach-chirp-listen-pulse {9284  0%, 100% { opacity: 0.25; transform: scale(0.9); }9285  50%      { opacity: 1;     transform: scale(1.15); }9286}92879288.peach-chirp-action-handshake {9289  display: flex;9290  flex-direction: column;9291  align-items: center;9292  gap: 8px;9293  padding: 8px 4px;9294}9295.peach-chirp-meter {9296  width: 100%;9297  max-width: 280px;9298  height: 2px;9299  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9300  border-radius: 2px;9301  position: relative;9302  overflow: hidden;9303}9304.peach-chirp-meter-bar {9305  position: absolute;9306  top: 0; bottom: 0;9307  width: 30%;9308  left: -30%;9309  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9310  animation: peach-chirp-meter-sweep 1.4s ease-in-out infinite;9311}9312@keyframes peach-chirp-meter-sweep {9313  0%   { left: -30%; }9314  100% { left: 100%; }9315}9316.peach-chirp-meter-label {9317  font-family: var(--peach-mono, ui-monospace, monospace);9318  font-size: 9.5px;9319  text-transform: uppercase;9320  letter-spacing: 0.14em;9321  color: var(--peach-t1);9322}93239324.peach-chirp-action-paired {9325  display: flex;9326  align-items: center;9327  gap: 10px;9328}9329.peach-chirp-device-confirm {9330  flex: 1;9331  display: inline-flex;9332  align-items: center;9333  gap: 8px;9334  padding: 9px 10px 9px 12px;9335  border-radius: 10px;9336  background: color-mix(in srgb, #76b6e8 12%, transparent);9337  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9338  font-size: 12.5px;9339  color: var(--peach-t0);9340  min-width: 0;9341}9342.peach-chirp-device-confirm-glyph {9343  display: inline-flex;9344  color: #76b6e8;9345}9346.peach-chirp-device-confirm-name {9347  flex: 1;9348  overflow: hidden;9349  text-overflow: ellipsis;9350  white-space: nowrap;9351}9352.peach-chirp-device-confirm-trust {9353  font-family: var(--peach-mono, ui-monospace, monospace);9354  font-size: 9.5px;9355  text-transform: uppercase;9356  letter-spacing: 0.1em;9357  color: #76b6e8;9358  padding: 2px 6px;9359  border-radius: 4px;9360  background: color-mix(in srgb, #76b6e8 14%, transparent);9361}9362.peach-chirp-done {9363  min-width: 80px;9364}9365.peach-chirp-retry {9366  align-self: center;9367  display: block;9368  margin: 6px auto 0;9369  min-width: 120px;9370}9371.peach-chirp-mic-help {9372  font-size: 12px;9373  color: var(--peach-t1);9374  text-align: center;9375  max-width: 320px;9376  margin: 0 auto;9377}93789379/* Rest state — bird stage at idle pose, primary CTA + paired list */9380.peach-chirp-pair[data-phase="idle"] .peach-chirp-stage {9381  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9382  height: 160px;9383}9384.peach-chirp-pair-start {9385  width: 100%;9386  display: inline-flex;9387  align-items: center;9388  justify-content: center;9389  gap: 8px;9390  padding: 11px 14px;9391  border-radius: 10px;9392  background: var(--peach-accent);9393  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9394  color: #1a0905;9395  font-family: inherit;9396  font-size: 13px;9397  font-weight: 600;9398  letter-spacing: 0.01em;9399  cursor: pointer;9400  transition: filter 0.15s ease, transform 0.1s ease;9401}9402.peach-chirp-pair-start:hover { filter: brightness(1.08); }9403.peach-chirp-pair-start:active { transform: translateY(1px); }94049405.peach-chirp-paired-section {9406  margin-top: 14px;9407  display: flex;9408  flex-direction: column;9409  gap: 8px;9410}9411.peach-chirp-paired-heading {9412  margin: 0;9413  font-family: var(--peach-mono, ui-monospace, monospace);9414  font-size: 10px;9415  font-weight: 500;9416  letter-spacing: 0.14em;9417  text-transform: uppercase;9418  color: var(--peach-t1);9419}94209421/* Footer --------------------------------------------------------------- */9422.peach-chirp-foot {9423  margin: 10px -4px -2px;9424  margin-top: auto;9425}9426.peach-chirp-foot-divider {9427  height: 1px;9428  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9429  margin-bottom: 10px;9430}9431.peach-chirp-foot-text {9432  font-size: 11px;9433  line-height: 1.5;9434  color: var(--peach-t1);9435  text-align: center;9436  padding: 0 4px;9437  text-wrap: pretty;9438}94399440/* Screen-reader-only live region. Kept off the visual flow but read by9441   assistive tech as the pairing phase advances. */9442.peach-sr-only {9443  position: absolute;9444  width: 1px; height: 1px;9445  padding: 0; margin: -1px;9446  overflow: hidden;9447  clip: rect(0, 0, 0, 0);9448  white-space: nowrap;9449  border: 0;9450}94519452/* Reduced motion — stage simplifies to opacity transitions only */9453@media (prefers-reduced-motion: reduce) {9454  .peach-chirp-bird-body,9455  .peach-chirp-bird-head-group,9456  .peach-chirp-bird-beak,9457  .peach-chirp-bird-wing,9458  .peach-chirp-bird-tuft,9459  .peach-chirp-bird-tail,9460  .peach-chirp-bird-eye-group,9461  .peach-chirp-bird-aura,9462  .peach-chirp-arc,9463  .peach-chirp-flight-path,9464  .peach-chirp-flight-path-2,9465  .peach-chirp-dot-glow,9466  .peach-chirp-dot-core,9467  .peach-chirp-dot-ring,9468  .peach-chirp-mote,9469  .peach-chirp-meter-bar,9470  .peach-chirp-listen-dot,9471  .peach-chirp-bird-slot,9472  .peach-chirp-bird-slot-mobile {9473    animation: none !important;9474    transition: opacity 0.2s linear !important;9475  }9476}94779478/* ─────────────────────────────────────────────────────────────────9479   Settings → Sync surface (v3 ChirpSync). Wraps the same bird9480   animation used by the pairing flow with a paired-devices list and9481   the "Pair a device" CTA.9482   ───────────────────────────────────────────────────────────────── */9483.peach-chirp-settings {9484  position: absolute;9485  inset: 0;9486  z-index: 3;9487  display: flex;9488  flex-direction: column;9489  gap: 18px;9490  padding: 14px 12px 12px;9491  width: 100%;9492  box-sizing: border-box;9493  overflow-y: auto;9494  overflow-x: hidden;9495  /* Same warm Chirp surface as the pairing screen — unifies the two views. */9496  background:9497    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9498    var(--peach-bg);9499  color: var(--peach-t0);9500  isolation: isolate;9501  /* Hide native scrollbar — content fits 99% of the time and a chunky9502     gutter ruins the surface. */9503  scrollbar-width: none;9504  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9505}9506.peach-chirp-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9507.peach-chirp-settings::before {9508  content: '';9509  position: absolute;9510  inset: 0;9511  pointer-events: none;9512  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9513  z-index: 0;9514}9515.peach-chirp-settings > * { position: relative; z-index: 1; }95169517.peach-chirp-settings--pairing {9518  padding: 0;9519  align-items: stretch;9520  justify-content: stretch;9521  background: none;9522  isolation: auto;9523}9524.peach-chirp-settings--pairing::before { display: none; }95259526.peach-chirp-settings-header {9527  display: flex;9528  align-items: center;9529  gap: 10px;9530}9531.peach-chirp-settings-title {9532  margin: 0;9533  font-family: var(--font-display, Georgia, serif);9534  font-style: italic;9535  font-size: 24px;9536  font-weight: 500;9537  line-height: 1;9538  color: var(--peach-t0);9539  letter-spacing: 0.005em;9540}9541.peach-chirp-settings-section {9542  margin: 6px 0 -4px;9543  font-size: 11px;9544  font-weight: 600;9545  letter-spacing: 0.08em;9546  text-transform: uppercase;9547  color: var(--peach-text-muted);9548}9549.peach-chirp-settings-error {9550  font-size: 12px;9551  padding: 8px 10px;9552  border-radius: 8px;9553  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);9554  color: var(--peach-text);9555}9556.peach-chirp-settings-footer {9557  margin-top: auto;9558  padding-top: 18px;9559  font-size: 11.5px;9560  line-height: 1.5;9561  color: var(--peach-text-muted);9562  text-align: center;9563}95649565/* Hero card shown when no devices are paired yet. */9566.peach-chirp-hero {9567  display: flex;9568  flex-direction: column;9569  align-items: center;9570  gap: 12px;9571  padding: 20px 12px 8px;9572  text-align: center;9573}9574.peach-chirp-hero-svg {9575  display: block;9576  max-width: 100%;9577  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));9578}9579.peach-chirp-hero-headline {9580  margin: 0;9581  font-family: var(--font-display, Georgia, serif);9582  font-style: italic;9583  font-size: 20px;9584  font-weight: 500;9585  line-height: 1.2;9586  letter-spacing: 0.005em;9587  color: var(--peach-t0);9588}9589.peach-chirp-hero-sub {9590  margin: 0;9591  font-size: 13px;9592  line-height: 1.5;9593  color: var(--peach-t1);9594  max-width: 320px;9595  text-wrap: pretty;9596}95979598.peach-chirp-pair-cta {9599  display: flex;9600  justify-content: center;9601  padding: 4px 0 6px;9602}9603.peach-chirp-pair-button {9604  display: inline-flex;9605  align-items: center;9606  gap: 8px;9607  min-width: 220px;9608  justify-content: center;9609}9610.peach-chirp-pair-button-icon {9611  flex: 0 0 auto;9612}96139614/* Paired devices list. Roomy rows that look at home next to the rest9615   of Settings; stale rows get a soft warm-warning border tint. */9616.peach-chirp-device-list {9617  list-style: none;9618  margin: 0;9619  padding: 0;9620  display: flex;9621  flex-direction: column;9622  gap: 8px;9623}9624.peach-chirp-device-row {9625  display: flex;9626  align-items: center;9627  gap: 12px;9628  padding: 12px;9629  border-radius: 10px;9630  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9631  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);9632}9633.peach-chirp-device-row[data-stale="true"] {9634  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);9635}9636.peach-chirp-device-icon {9637  width: 32px;9638  height: 32px;9639  display: flex;9640  align-items: center;9641  justify-content: center;9642  border-radius: 8px;9643  color: var(--peach-text);9644  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);9645}9646.peach-chirp-device-info {9647  flex: 1;9648  display: flex;9649  flex-direction: column;9650  gap: 2px;9651  min-width: 0;9652}9653.peach-chirp-device-name {9654  font-size: 14px;9655  font-weight: 600;9656  color: var(--peach-text);9657  overflow: hidden;9658  text-overflow: ellipsis;9659  white-space: nowrap;9660}9661.peach-chirp-device-meta {9662  font-size: 11.5px;9663  color: var(--peach-text-muted);9664  display: flex;9665  flex-wrap: wrap;9666  align-items: center;9667  gap: 8px;9668}9669.peach-chirp-device-badge {9670  font-size: 10.5px;9671  font-weight: 500;9672  letter-spacing: 0.02em;9673  padding: 2px 6px;9674  border-radius: 999px;9675  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);9676  color: var(--peach-text);9677}9678.peach-chirp-device-stale {9679  font-size: 10.5px;9680  font-weight: 500;9681  color: var(--peach-warn, #d29257);9682}9683.peach-chirp-device-remove {9684  flex: 0 0 auto;9685  color: var(--peach-text-muted);9686}9687.peach-chirp-device-remove:hover {9688  color: var(--peach-danger, #c25b4a);9689}9690.peach-chirp-unpair-confirm {9691  display: flex;9692  gap: 6px;9693  align-items: center;9694}96959696/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */9697.peach-chirp-pro-card {9698  position: relative;9699  margin: 18px 12px;9700  padding: 18px 20px 22px;9701  border-radius: 22px;9702  background:9703    radial-gradient(140% 90% at 50% 0%,9704      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,9705      transparent 60%),9706    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9707  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);9708  box-shadow:9709    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,9710    0 18px 40px -24px rgba(0, 0, 0, 0.45);9711  display: flex;9712  flex-direction: column;9713  align-items: center;9714  gap: 10px;9715  text-align: center;9716  overflow: hidden;9717}9718.peach-chirp-pro-stage {9719  position: relative;9720  width: 220px;9721  height: 140px;9722  display: flex;9723  align-items: flex-end;9724  justify-content: center;9725  margin-bottom: 2px;9726}9727.peach-chirp-pro-bird-slot {9728  width: 140px;9729  height: 132px;9730  display: flex;9731  align-items: flex-end;9732  justify-content: center;9733  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));9734}9735.peach-chirp-pro-bird-slot .peach-chirp-bird {9736  width: 100%;9737  height: 100%;9738}9739.peach-chirp-pro-bird-slot .peach-chirp-bird svg {9740  width: 100%;9741  height: 100%;9742  overflow: visible;9743}9744.peach-chirp-pro-chirp {9745  position: absolute;9746  top: 14px;9747  right: 8px;9748  width: 96px;9749  height: 80px;9750  color: var(--peach-accent);9751  animation: peach-chirp-pulse 2.6s ease-in-out infinite;9752  transform-origin: 0% 50%;9753  pointer-events: none;9754}9755@keyframes peach-chirp-pulse {9756  0%, 100% { opacity: 0.35; transform: translateX(0) scale(0.92); }9757  45%      { opacity: 1;    transform: translateX(2px) scale(1); }9758  70%      { opacity: 0.6;  transform: translateX(4px) scale(1.04); }9759}9760@media (prefers-reduced-motion: reduce) {9761  .peach-chirp-pro-chirp { animation: none; opacity: 0.7; }9762}9763.peach-chirp-pro-headline {9764  margin: 4px 0 0;9765  font-family: var(--font-display, "Cormorant Garamond", serif);9766  font-style: italic;9767  font-size: 19px;9768  font-weight: 500;9769  letter-spacing: 0.01em;9770  color: var(--peach-text, var(--peach-t0));9771  max-width: 280px;9772  line-height: 1.25;9773}9774.peach-chirp-pro-body {9775  margin: 0;9776  font-size: 13px;9777  line-height: 1.55;9778  color: var(--peach-text-dim, var(--peach-t2));9779  max-width: 300px;9780}9781.peach-chirp-pro-cta {9782  margin-top: 4px;9783}9784.peach-chirp-pro-foot {9785  margin: 2px 0 0;9786  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;9787  font-size: 0.625rem;9788  letter-spacing: 0.08em;9789  text-transform: uppercase;9790  color: var(--peach-t2);9791  opacity: 0.75;9792}