popup.css

1html,2body,3#app,4#pre-lock,5.popup-root {6  width: 320px;7  min-height: 520px;8  height: 520px;9  margin: 0;10}1112body {13  overflow: hidden;14  background: var(--bg);15  color: var(--t0);16  font-family: var(--font-ui);17  font-weight: 300;18  position: relative;19}2021* {22  box-sizing: border-box;23}2425button,26input,27textarea,28select {29  font: inherit;30}3132button {33  border: 0;34}3536#pre-lock {37  position: absolute;38  inset: 0;39  z-index: 10;40}4142#pre-lock[hidden] {43  display: none;44}4546.popup-root {47  position: relative;48  overflow: hidden;49}5051.peach-theme {52  color: var(--peach-t0);53  font-family: var(--font-ui);54  font-weight: 300;55  box-sizing: border-box;56  text-align: left;57}58.peach-theme, .peach-theme * { box-sizing: inherit; }5960.peach-brand-mark {61  width: 14px;62  height: 14px;63  flex-shrink: 0;64}6566.peach-status-pip.is-hidden {67  display: none;68}6970.peach-status-pip.unlocked {71  background: var(--peach-health-ok);72  box-shadow: 0 0 6px rgba(100, 210, 100, 0.6);73}7475.peach-status-pip.pulse {76  animation: pip-pulse 400ms var(--peach-curve-settle) both;77}7879/* Shell */80.peach-shell, .peach-screen {81  background:82    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),83    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),84    var(--peach-bg);85  border: 1px solid var(--peach-t3);86  box-shadow:87    0 2px 8px rgba(0,0,0,0.55),88    0 14px 48px rgba(0,0,0,0.7),89    0 0 0 1px rgba(240,232,216,0.04);90  overflow: hidden;91}92.peach-shell {93  display: grid;94  grid-template-rows: auto 1fr;95  min-height: 520px;96  position: relative;97  isolation: isolate;98}99100.peach-shell[data-surface="extension"] {101  width: min(320px, 100vw);102  border-radius: 0;103  height: 520px;104  max-height: 520px;105  overflow: hidden;106}107108/* ── Lock screen – full-window lock/create stage ── */109.lock-screen--vault-stage {110  display: flex;111  flex-direction: column;112  gap: 18px;113  padding: 20px 18px 18px;114  justify-content: flex-start;115}116.lock-screen--vault-stage .peach-lock-panel {117  margin-top: auto;118}119.peach-lock-headline--unlock {120  max-width: 220px;121}122.peach-lock-hero--unlock {123  padding-top: 14px;124}125.peach-lock-panel--unlock {126  gap: 10px;127}128129.peach-lock-restore-link {130  background: transparent;131  border: none;132  cursor: pointer;133  font-family: var(--font-mono);134  font-size: 0.625rem;135  letter-spacing: 0.08em;136  color: var(--t1);137  padding: 5px 0;138  text-align: left;139  transition: color 150ms ease;140}141142.peach-lock-restore-link:hover {143  color: var(--t0);144}145.peach-shell[data-surface="extension"] .peach-stage {146  min-height: 250px;147}148149/* Screen (unlock) */150.peach-screen {151  width: min(320px, 100vw);152  min-height: 100%;153  height: 100%;154  border-radius: 0;155  padding: 16px 20px 18px;156  display: grid;157  gap: 14px;158}159.peach-screen[data-motion-phase="enter"] {160  animation: peach-screen-enter var(--peach-dur-600) var(--peach-curve-arrival) both;161}162.peach-screen-header { min-height: 20px; }163164/* Wordmark */165.peach-wordmark {166  margin: 0;167  font-family: var(--font-display);168  font-size: 0.9375rem;169  font-style: italic;170  letter-spacing: 0.03em;171  color: var(--peach-t0);172  display: inline-flex;173  min-height: 1em;174}175176/* Motion text / char animation */177.peach-motion-text { display: inline-flex; min-height: 1em; }178.peach-motion-char {179  display: inline-block;180  white-space: pre;181  opacity: 0;182  transform: translateY(0.22em);183  animation: peach-char-enter var(--peach-motion-duration, 380ms) var(--peach-curve-arrival) forwards;184  animation-delay: calc(var(--peach-char-index, 0) * 20ms);185}186187/* Chrome */188.peach-chrome {189  position: relative;190  z-index: 10;191  padding: 16px 20px 0;192  display: flex;193  justify-content: space-between;194  align-items: center;195  /* z-index:10 keeps the header icons above `.peach-loading` (Suspense196     fallback) per §15 regression guard. Without pointer-events:none, the197     empty header strip also sits above `.peach-overlay-view` (z-index:2)198     and swallows clicks meant for an overlay's back button / top search. */199  pointer-events: none;200}201.peach-chrome .peach-btn { pointer-events: auto; }202.peach-chrome.is-hidden-for-overlay,203.peach-search-wrap.is-hidden-for-overlay {204  opacity: 0;205  visibility: hidden;206  pointer-events: none;207}208/* Chirp-sync owns its own surface and header — fully collapse the global209   chrome row so the warm gradient reaches the popup edge. */210.peach-chrome.is-collapsed,211.peach-search-wrap.is-collapsed {212  display: none;213}214.peach-wordmark-wrap { display: flex; align-items: center; gap: 5px; }215.peach-status-pip {216  width: 5px;217  height: 5px;218  border-radius: 50%;219  background: var(--peach-t3);220  display: inline-flex;221  flex-shrink: 0;222  transition: background 400ms ease, box-shadow 400ms ease;223}224.peach-chrome-actions { display: flex; gap: 6px; }225226/* Shell body */227.peach-shell-body {228  position: relative;229  display: grid;230  grid-template-rows: 1fr auto;231  min-height: 0;232  min-width: 0;233  width: 100%;234  overflow: hidden;235  height: 100%;236}237.peach-shell-veil {238  position: absolute; inset: 0;239  background: #000; opacity: 0;240  pointer-events: none; z-index: 1;241}242.peach-shell[data-motion-phase="enter"] .peach-shell-body {243  animation: peach-shell-fade-in var(--peach-dur-600) var(--peach-curve-arrival) both;244}245.peach-shell[data-motion-phase="exit"] .peach-shell-veil {246  animation: peach-veil-in 300ms var(--peach-curve-departure) forwards;247}248249/* Content frame */250.peach-content-frame {251  display: grid;252  grid-template-rows: 1fr auto;253  grid-template-columns: minmax(0, 1fr);254  align-content: start;255  min-height: 0;256  min-width: 0;257  overflow: hidden;258  transition: opacity 80ms ease, transform 80ms ease;259}260.peach-content-frame.navigating {261  opacity: 0.93;262  transform: translateX(2px);263}264.peach-content-frame[data-content-phase="enter"] {265  animation: peach-content-enter 135ms ease-out both;266}267.peach-content-frame[data-content-phase="exit"] {268  animation: peach-content-exit 95ms ease-in forwards;269}270.peach-content-frame[data-content-phase="idle"] { opacity: 1; transform: none; }271272/* Stage */273.peach-stage {274  padding: 10px 20px 12px;275  display: grid;276  gap: 12px;277  align-content: start;278  min-width: 0;279  min-height: 0;280  max-width: 100%;281  overflow-y: auto;282  overflow-x: hidden;283  scrollbar-width: none;284  -ms-overflow-style: none;285  overscroll-behavior: contain;286}287.peach-stage::-webkit-scrollbar { display: none; }288289/* Entry name */290.peach-entry-name-wrap { position: relative; overflow: hidden; max-width: 100%; }291.peach-entry-header {292  position: relative;293  z-index: 1;294  display: flex;295  align-items: flex-start;296  gap: 6px;297  min-width: 0;298}299.peach-entry-header-name {300  flex: 1;301  min-width: 0;302}303.peach-entry-name {304  margin: 0;305  padding-bottom: 0.12em;306  font-family: var(--font-display);307  font-style: italic; font-weight: 400;308  font-size: 44px; line-height: 0.95;309  color: var(--peach-t0);310  display: -webkit-box;311  -webkit-line-clamp: 2;312  -webkit-box-orient: vertical;313  overflow: hidden;314  text-wrap: balance;315}316.peach-entry-name--lg { font-size: 40px; }317.peach-entry-name--xl { font-size: 34px; line-height: 0.98; }318.peach-entry-name--xxl { font-size: 30px; line-height: 1.02; }319.peach-entry-name-text { display: block; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; padding-bottom: 0.12em; }320321/* Trash icon in entry header */322.peach-entry-trash-btn {323  flex-shrink: 0;324  padding: 4px;325  margin-top: 4px;326  background: transparent;327  border: none;328  cursor: pointer;329  color: var(--peach-t2);330  border-radius: 4px;331  transition: color 140ms ease, background 140ms ease;332  display: flex;333  align-items: center;334  justify-content: center;335}336.peach-entry-trash-btn:hover {337  color: var(--peach-t1);338  background: var(--peach-t3);339}340.peach-entry-trash-confirm {341  display: flex;342  align-items: center;343  gap: 6px;344  flex-shrink: 0;345  margin-top: 6px;346  flex-wrap: nowrap;347}348.peach-entry-trash-confirm-label {349  font-family: var(--font-mono);350  font-size: 0.5625rem;351  letter-spacing: 0.1em;352  color: var(--peach-t2);353  white-space: nowrap;354}355.peach-entry-name-button {356  padding: 0;357  background: transparent;358  text-align: left;359  cursor: pointer;360  max-width: 100%;361  overflow: hidden;362  display: block;363}364.peach-entry-name-char {365  display: inline-block;366  white-space: pre;367  opacity: 0;368  transform: translateY(0.22em);369  animation: peach-char-enter 380ms var(--peach-curve-arrival) forwards;370  animation-delay: calc(var(--char-index, 0) * 20ms);371}372373/* Domain */374.peach-domain { border-top: 1px solid var(--peach-t3); padding-top: 9px; }375.peach-domain-row {376  width: 100%; border: 0; background: transparent; color: inherit;377  padding: 0; display: flex; justify-content: space-between; align-items: baseline;378  cursor: default;379}380.peach-domain-value {381  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;382  font-size: 0.625rem; font-style: italic;383  letter-spacing: 0.12em; color: var(--peach-t1);384}385386/* Fields */387.peach-fields { display: grid; gap: 10px; }388.peach-field-card { display: grid; gap: 7px; }389.peach-label {390  font-family: Inter, system-ui, sans-serif;391  text-transform: uppercase; letter-spacing: 0.2em;392  font-size: 0.5rem; color: var(--peach-t2);393}394.peach-add-field-btn {395  align-self: flex-start;396  background: none; border: none; padding: 2px 0;397  font-family: Inter, system-ui, sans-serif;398  font-size: 0.6875rem; color: var(--peach-accent);399  cursor: pointer; opacity: 0.75;400  letter-spacing: 0.02em;401}402.peach-add-field-btn:hover { opacity: 1; }403.peach-field-value-row {404  display: flex; justify-content: space-between;405  align-items: center; gap: 8px;406  min-width: 0;407}408.peach-field-value {409  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;410  font-size: 0.8125rem; color: var(--peach-t1);411  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;412  flex: 1;413  min-width: 0;414}415.peach-password-value {416  display: inline-flex;417  align-items: center;418  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;419  font-size: 1rem; letter-spacing: 0.3em; color: var(--peach-t0);420  overflow: hidden;421  text-overflow: ellipsis;422  white-space: nowrap;423  flex: 1;424  min-width: 0;425  max-width: 100%;426}427.peach-password-value.is-revealed {428  font-size: 0.875rem;429  letter-spacing: 0.08em;430}431.peach-password-text,432.peach-password-mask {433  display: block;434  width: 100%;435  overflow: hidden;436  white-space: nowrap;437  /* Render as uniform mid-line bullets, not baseline periods */438  font-family: Inter, system-ui, sans-serif;439  font-size: 0.625rem;440  letter-spacing: 3px;441  user-select: none;442}443.peach-field-actions { display: flex; gap: 4px; align-items: center; }444.peach-password-strength { display: flex; align-items: center; gap: 8px; }445.peach-strength-bar { display: flex; gap: 3px; }446.peach-strength-seg { width: 28px; height: 4px; border-radius: 2px; background: #eee; }447.peach-strength-label {448  font-family: "IBM Plex Mono", monospace;449  font-style: italic;450  font-size: 0.5625rem;451  font-weight: 300;452  min-width: 36px;453  text-align: right;454  color: var(--peach-t2);455  letter-spacing: 0.06em;456}457458.peach-strength-hairline {459  display: flex;460  align-items: center;461  gap: 10px;462  margin-top: -2px;463}464465.peach-strength-hairline-track {466  flex: 1;467  height: 3px;468  border-radius: 2px;469  background: var(--peach-s2);470  overflow: hidden;471}472473.peach-strength-hairline-fill {474  height: 100%;475  border-radius: 2px;476  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),477    background 400ms ease;478}479480/* Note content (display) */481.peach-note-content {482  border-top: 1px solid var(--peach-t3);483  padding-top: 10px;484  font-family: var(--font-display);485  font-size: 0.9375rem;486  line-height: 1.75;487  color: var(--peach-t1);488}489490/* ── Inline editing ─────────────────────────────────────────────────── */491492/* Clickable display values */493.peach-inline-clickable {494  cursor: text;495  border-radius: 3px;496  transition: background 150ms ease;497}498.peach-inline-clickable:hover {499  background: rgba(240, 232, 216, 0.05);500}501502/* Subtle "edit" hint that appears on hover */503.peach-inline-edit-hint {504  font-family: Inter, system-ui, sans-serif;505  font-size: 0.5625rem;506  text-transform: uppercase;507  letter-spacing: 0.14em;508  color: var(--peach-t2);509  opacity: 0;510  transition: opacity 120ms ease;511  pointer-events: none;512  margin-left: 6px;513  flex-shrink: 0;514}515.peach-domain-row:hover .peach-inline-edit-hint {516  opacity: 1;517}518519/* Title editing */520.peach-inline-title-wrap {521  display: flex;522  flex-direction: column;523  gap: 6px;524}525.peach-inline-title-input {526  font-family: var(--font-display);527  font-style: italic;528  font-weight: 400;529  font-size: 40px;530  line-height: 0.95;531  color: var(--peach-t0);532  background: transparent;533  border: none;534  border-bottom: 1px solid var(--peach-accent);535  outline: none;536  width: 100%;537  padding: 2px 0;538}539540/* Generic inline field */541.peach-inline-field-wrap {542  display: flex;543  flex-direction: column;544  gap: 6px;545}546.peach-inline-input {547  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;548  font-size: 0.8125rem;549  color: var(--peach-t0);550  background: transparent;551  border: none;552  border-bottom: 1px solid var(--peach-accent);553  outline: none;554  width: 100%;555  padding: 3px 0;556}557.peach-inline-textarea {558  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;559  font-size: 0.6875rem;560  line-height: 1.7;561  color: var(--peach-t0);562  background: rgba(240, 232, 216, 0.04);563  border: 1px solid var(--peach-accent);564  border-radius: 4px;565  outline: none;566  width: 100%;567  padding: 8px;568  resize: vertical;569  min-height: 80px;570}571572/* Save / cancel row */573.peach-inline-actions {574  display: flex;575  gap: 6px;576  align-items: center;577}578.peach-inline-save-btn,579.peach-inline-cancel-btn {580  display: inline-flex;581  align-items: center;582  justify-content: center;583  width: 26px;584  height: 26px;585  border-radius: 4px;586  border: none;587  cursor: pointer;588  transition: background 140ms ease, opacity 140ms ease;589  flex-shrink: 0;590}591.peach-inline-save-btn {592  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);593  color: var(--peach-accent);594}595.peach-inline-save-btn:hover:not(:disabled) {596  background: color-mix(in srgb, var(--peach-accent) 30%, transparent);597}598.peach-inline-cancel-btn {599  background: rgba(240, 232, 216, 0.06);600  color: var(--peach-t2);601}602.peach-inline-cancel-btn:hover:not(:disabled) {603  background: rgba(240, 232, 216, 0.12);604  color: var(--peach-t1);605}606.peach-inline-save-btn:disabled,607.peach-inline-cancel-btn:disabled {608  opacity: 0.4;609  cursor: not-allowed;610}611612/* Inline password generator wrapper */613.peach-inline-generator-wrap {614  margin-top: 10px;615  padding-top: 10px;616  border-top: 1px solid var(--peach-t3);617  display: flex;618  flex-direction: column;619  gap: 8px;620}621.peach-inline-generator-cancel {622  align-self: flex-start;623  font-size: 0.6875rem;624  color: var(--peach-t2);625}626627/* "is-editing" card state */628.peach-field-card.is-editing {629  background: rgba(240, 232, 216, 0.02);630  border-radius: 6px;631  padding: 8px;632  margin: -8px;633}634635/* Inline tag editor on Entry detail view */636.peach-inline-tag-editor {637  display: flex;638  flex-direction: column;639  gap: 6px;640}641642/* Quiet inline "+ add X" link in the entry detail body */643.peach-entry-add-link {644  justify-self: start;645  margin-top: 8px;646}647648/* Additional URLs editor revealed by clicking the URL field */649.peach-additional-urls {650  display: flex;651  flex-direction: column;652  gap: 6px;653  margin-top: 8px;654}655.peach-additional-urls-label {656  font-size: 0.5625rem;657  letter-spacing: 0.1em;658  text-transform: uppercase;659  color: var(--peach-t2);660  margin-bottom: 2px;661}662.peach-additional-url-row {663  display: flex;664  align-items: center;665  gap: 6px;666}667.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }668.peach-additional-url-remove {669  background: transparent;670  border: 1px solid var(--peach-t3);671  color: var(--peach-t2);672  width: 22px;673  height: 22px;674  border-radius: 4px;675  cursor: pointer;676  font-size: 0.875rem;677  line-height: 1;678  display: inline-flex;679  align-items: center;680  justify-content: center;681  flex-shrink: 0;682  transition: color 120ms ease, border-color 120ms ease;683}684.peach-additional-url-remove:hover:not(:disabled) {685  color: var(--peach-accent);686  border-color: var(--peach-border-accent);687}688.peach-additional-urls-add { align-self: flex-start; }689690/* Delete row */691.peach-entry-delete-row {692  display: flex;693  align-items: center;694  gap: 8px;695  padding-top: 18px;696  margin-top: 8px;697  border-top: 1px solid var(--peach-t3);698}699.peach-delete-btn {700  font-size: 0.6875rem;701  color: var(--peach-t2);702  padding: 4px 0;703}704.peach-delete-confirm-text {705  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;706  font-size: 0.6875rem;707  font-style: italic;708  color: var(--peach-t2);709  flex-shrink: 0;710}711712/* TOTP band */713.peach-totp-band {714  border-top: 1px solid var(--peach-t3);715  padding: 12px 20px 14px;716  position: relative;717  display: grid;718  grid-template-columns: 1fr auto;719  gap: 10px;720}721.peach-totp-main {722  min-width: 0;723  cursor: pointer;724  user-select: none;725}726.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }727.peach-totp-code-row {728  display: flex;729  align-items: flex-end;730  gap: 10px;731  min-width: 0;732}733.peach-totp-code {734  margin: 2px 0 0;735  font-family: var(--font-display);736  font-style: italic;737  font-weight: 300;738  font-size: 38px; color: var(--peach-accent);739  line-height: 0.95; min-height: 1em;740  min-width: 0;741}742.peach-totp-code-text {743  display: inline-flex;744  overflow: hidden;745  text-overflow: ellipsis;746  white-space: nowrap;747}748.peach-totp-copy-btn {749  margin-bottom: 2px;750  flex-shrink: 0;751  border-color: transparent;752}753.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }754.peach-totp-countdown {755  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;756  font-size: 22px; color: var(--peach-t1);757}758.peach-totp-ring { transform: rotate(-90deg); }759.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }760.peach-totp-ring-progress {761  fill: none; stroke: var(--peach-accent); stroke-width: 2;762  stroke-linecap: round;763  transition: stroke-dashoffset 1s linear, stroke 500ms ease;764}765/* Search bar */766.peach-search-wrap {767  border-top: 1px solid var(--peach-t3);768  background: var(--peach-s1);769  min-height: 54px; position: relative;770  box-shadow: inset 0 6px 18px transparent;771  transition: box-shadow 700ms ease;772}773.peach-search-wrap::before {774  content: "";775  position: absolute;776  left: 0;777  top: 0;778  height: 2px;779  width: var(--peach-totp-progress, 0%);780  background: var(--peach-accent);781  opacity: 0;782  transition: width 1s linear, opacity 180ms ease;783  pointer-events: none;784}785.peach-shell[data-totp-active="true"] .peach-search-wrap::before {786  opacity: 0.9;787}788.peach-shell[data-totp-active="true"] .peach-search-wrap {789  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);790}791792@keyframes peach-totp-code-flare {793  0%   { filter: brightness(1); }794  25%  { filter: brightness(1.3); }795  100% { filter: brightness(1); }796}797.peach-totp-code.is-hot {798  animation: peach-totp-code-flare 3000ms ease-in-out both;799}800.peach-search-bar {801  min-height: 54px;802  display: grid;803  grid-template-columns: auto minmax(0, 1fr) auto;804  align-items: center;805  gap: 8px; padding: 0 9px 0 12px;806}807.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }808.peach-search-input {809  border: 0; background: transparent; color: var(--peach-t0);810  font-family: var(--font-display);811  font-style: italic; font-size: 18px;812  outline: none; width: 100%; min-width: 0; padding: 0;813  caret-color: var(--peach-accent);814}815.peach-search-input::placeholder { color: var(--peach-t2); }816.peach-search-meta {817  display: grid;818  grid-auto-flow: column;819  align-items: center;820  justify-content: end;821  gap: 6px;822  min-width: max-content;823}824.peach-search-counter {825  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;826  font-size: 0.625rem; color: var(--peach-t2);827  display: inline-flex;828  align-items: center;829  line-height: 1;830}831.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }832833/* Buttons */834.peach-btn {835  border: 1px solid transparent; border-radius: 12px;836  background: transparent; color: var(--peach-t0);837  font-family: Inter, system-ui, sans-serif;838  font-size: 0.75rem; letter-spacing: 0.02em; padding: 8px 12px;839  cursor: pointer;840  transition:841    background-color var(--peach-dur-80) var(--peach-curve-arrival),842    color var(--peach-dur-80) var(--peach-curve-arrival),843    border-color var(--peach-dur-150) var(--peach-curve-arrival);844}845.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }846.peach-btn:disabled {847  opacity: 0.45;848  cursor: not-allowed;849}850.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 0.6875rem; }851.peach-btn--md { min-height: 38px; }852.peach-btn--accent {853  background: var(--peach-accent);854  color: rgba(0,0,0,0.92);855  font-weight: 500;856  box-shadow:857    0 1px 0 rgba(255,255,255,0.08) inset,858    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),859    0 3px 16px var(--peach-glow),860    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);861}862.peach-btn--accent:hover:not(:disabled) {863  background: var(--peach-accent);864  filter: brightness(1.10) saturate(1.05);865  box-shadow:866    0 1px 0 rgba(255,255,255,0.10) inset,867    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),868    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),869    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);870}871.peach-btn--ghost:not(.peach-icon-btn) { border-color: var(--peach-t3); color: var(--peach-t1); }872.peach-btn--ghost.peach-icon-btn { color: var(--peach-t1); }873.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }874.peach-icon-btn {875  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;876  display: inline-flex; align-items: center; justify-content: center;877  border-color: transparent;878  transition:879    color var(--peach-dur-80) var(--peach-curve-arrival),880    box-shadow var(--peach-dur-150) var(--peach-curve-arrival),881    background-color var(--peach-dur-80) var(--peach-curve-arrival);882}883.peach-icon-btn:hover:not(:disabled) {884  background: transparent;885  color: var(--peach-accent);886  box-shadow: 0 0 12px color-mix(in srgb, var(--peach-accent) 28%, transparent),887              0 0 4px color-mix(in srgb, var(--peach-accent) 16%, transparent);888}889890.peach-btn:focus-visible {891  outline: none;892  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);893}894895/* Lock button */896.peach-lock-icon { transform-origin: center; }897.peach-lock-btn { color: var(--peach-accent); }898.peach-lock-btn.is-locking .peach-lock-icon {899  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);900}901902/* Biometric unlock button */903.peach-biometric-btn {904  display: flex;905  align-items: center;906  justify-content: center;907  gap: 6px;908  margin-top: 8px;909  width: 100%;910}911912/* Copy button */913.peach-copy-btn {914  position: relative; overflow: hidden;915  color: var(--peach-t2); border-color: var(--peach-t3);916}917.peach-copy-icon {918  display: inline-flex; align-items: center; justify-content: center;919  position: relative; z-index: 1;920}921.peach-copy-icon-svg { display: block; }922.peach-copy-sheen {923  position: absolute; inset: 0;924  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--peach-accent) 18%, transparent) 30%, color-mix(in srgb, var(--peach-accent) 8%, transparent) 100%);925  opacity: 0; transform: scaleX(0.15); transform-origin: left center;926}927.peach-copy-btn.is-copied {928  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;929  box-shadow:930    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),931    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),932    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);933}934.peach-copy-btn.is-copied .peach-copy-icon {935  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;936}937.peach-copy-btn.is-copied .peach-copy-sheen {938  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;939}940.peach-copy-btn.is-retreat {941  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;942}943.peach-copy-btn.is-retreat .peach-copy-sheen {944  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;945}946.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }947.peach-copy-drain-bar {948  display: block; width: 100%; height: 100%;949  background: var(--peach-accent); opacity: 0.7;950  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;951}952953/* Unlock screen elements */954.peach-unlock-headline {955  margin: 2px 0 0;956  font-family: var(--font-display);957  font-size: 52px; line-height: 0.95;958  font-style: italic; font-weight: 400;959}960.peach-subline {961  margin: 0;962  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;963  font-size: 0.625rem; color: var(--peach-t2); font-style: italic;964}965.peach-subline--lock {966  max-width: 248px;967  line-height: 1.5;968}969.peach-underline-input {970  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);971  padding: 6px 0; background: transparent; color: var(--peach-t0);972  outline: none;973  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;974  font-size: 0.8125rem;975  caret-color: var(--peach-accent);976}977.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }978.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }979.peach-hint {980  margin: 0;981  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;982  font-size: 0.625rem; color: var(--peach-t2);983}984.peach-unlock-footer {985  margin-top: 4px; display: flex; align-items: center; gap: 7px;986  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;987  font-size: 0.625rem; color: var(--peach-t2);988}989.peach-unlock-footer--lock {990  padding-top: 2px;991}992993/* Breach badge */994.peach-breach-badge {995  display: flex;996  position: relative;997  z-index: 1;998  align-items: center;999  gap: 7px;1000  font-size: 0.5625rem;1001  color: var(--peach-breach);1002  padding: 5px 10px;1003  margin-bottom: 4px;1004  border-radius: 8px;1005  background: rgba(220, 80, 60, 0.07);1006  border: 1px solid rgba(220, 80, 60, 0.18);1007  letter-spacing: 0.04em;1008}10091010.peach-password-value.is-breached {1011  color: rgba(220, 80, 60, 0.75);1012  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1013}10141015/* ── Overlay views ─────────────────────────────────────────────────── */1016.peach-overlay-view {1017  position: absolute;1018  inset: 0;1019  display: flex;1020  flex-direction: column;1021  background:1022    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1023    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1024    var(--peach-bg);1025  z-index: 2;1026  overflow: hidden;1027  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1028}10291030.peach-overlay-view:has(.stk-shell) {1031  background: var(--peach-bg);1032}1033@keyframes overlay-in {1034  from { opacity: 0; transform: translateY(8px); }1035  to   { opacity: 1; transform: translateY(0); }1036}1037.peach-overlay-view.ov-enter-up {1038  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1039}1040.peach-overlay-view.ov-exit-up {1041  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1042}1043.peach-overlay-view.ov-enter-right {1044  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1045}1046.peach-overlay-view.ov-exit-right {1047  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1048}10491050@keyframes ov-enter-up {1051  from { opacity: 0; transform: translateY(18px); }1052  to   { opacity: 1; transform: translateY(0); }1053}1054@keyframes ov-exit-up {1055  from { opacity: 1; transform: translateY(0); }1056  to   { opacity: 0; transform: translateY(-12px); }1057}1058@keyframes ov-enter-right {1059  from { opacity: 0; transform: translateX(20px); }1060  to   { opacity: 1; transform: translateX(0); }1061}1062@keyframes ov-exit-right {1063  from { opacity: 1; transform: translateX(0); }1064  to   { opacity: 0; transform: translateX(20px); }1065}10661067/* Overlay shared header */1068.peach-overlay-header {1069  padding: 10px 12px 8px;1070  display: flex;1071  align-items: center;1072  gap: 10px;1073  flex-shrink: 0;1074}1075/* Back button — circular pill matching the settings stack masthead (.stk-back) */1076.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1077  width: 28px;1078  height: 28px;1079  flex: 0 0 28px;1080  border-radius: 999px;1081  border: 1px solid var(--peach-border);1082  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1083  color: var(--peach-t1);1084  padding: 0;1085}1086.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1087  color: var(--peach-t0);1088  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1089  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1090}1091.peach-overlay-title {1092  font-family: var(--font-display);1093  font-style: italic;1094  font-weight: 400;1095  font-size: 20px;1096  line-height: 1;1097  color: var(--peach-t0);1098  flex: 1;1099  text-align: center;1100}1101/* Balances the 28px back button so the title stays visually centred */1102.peach-overlay-spacer {1103  width: 28px;1104  flex: 0 0 28px;1105}11061107.peach-overlay-card {1108  background: var(--peach-s1);1109  border: 1px solid var(--peach-t3);1110  border-radius: 12px;1111  overflow: hidden;1112  width: 100%;1113}11141115.peach-onboarding-alt-actions {1116  display: flex;1117  flex-direction: column;1118  gap: 4px;1119  padding: 0;1120}11211122.peach-settings-copy {1123  margin: 0 0 10px;1124  font-size: 0.6875rem;1125  line-height: 1.5;1126  color: var(--peach-t2);1127}11281129.peach-settings-copy strong {1130  color: var(--peach-t0);1131}11321133.peach-settings-copy--spacious {1134  margin-bottom: 12px;1135}11361137.peach-settings-copy--result {1138  color: var(--peach-accent);1139  font-size: 0.8125rem;1140  text-align: center;1141  padding: 8px 0;1142}11431144.peach-settings-copy--danger {1145  color: var(--peach-breach);1146}11471148.peach-settings-copy--success {1149  color: var(--peach-accent);1150}11511152.peach-inline-feedback {1153  font-size: 0.6875rem;1154  margin: 10px 0 0;1155}11561157.peach-inline-feedback--ok {1158  color: var(--peach-accent);1159}11601161.peach-inline-feedback--error {1162  color: var(--peach-breach);1163}11641165.peach-inline-feedback--muted {1166  color: var(--peach-t2);1167  font-size: 0.625rem;1168  margin: 4px 0;1169}11701171.peach-inline-feedback--spaced {1172  margin-top: 12px;1173}11741175.peach-settings-actions--row {1176  display: flex;1177  gap: 6px;1178}11791180.peach-settings-actions--end {1181  margin-top: 14px;1182  justify-content: flex-end;1183}11841185.peach-settings-stack {1186  display: flex;1187  flex-direction: column;1188  gap: 6px;1189}11901191.peach-settings-stack--tight {1192  gap: 4px;1193}11941195.peach-settings-stack--spacious {1196  gap: 8px;1197}11981199.peach-settings-input {1200  width: 100%;1201  box-sizing: border-box;1202  padding: 8px 10px;1203  background: rgba(0, 0, 0, 0.22);1204  border: 1px solid transparent;1205  border-radius: 6px;1206  color: var(--peach-t0);1207  font-family: var(--font-ui);1208  font-size: 0.75rem;1209  outline: none;1210  transition: border-color 120ms ease, background 120ms ease;1211}12121213.peach-settings-input:focus {1214  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1215  background: rgba(0, 0, 0, 0.28);1216}12171218.peach-settings-input[type="password"] {1219  font-family: var(--font-mono);1220  letter-spacing: 0.04em;1221}12221223.peach-hidden-file-input {1224  display: none;1225}12261227.peach-checkbox-note {1228  display: flex;1229  align-items: flex-start;1230  gap: 8px;1231  font-size: 0.6875rem;1232  color: var(--peach-t1);1233  cursor: pointer;1234  margin: 12px 0;1235}12361237.peach-checkbox-note input {1238  margin-top: 1px;1239}12401241.peach-danger-notice {1242  background: rgba(220, 80, 60, 0.08);1243  border: 1px solid rgba(220, 80, 60, 0.2);1244  border-radius: 6px;1245  padding: 9px 11px;1246  font-size: 0.6875rem;1247  color: var(--peach-t1);1248  line-height: 1.5;1249}12501251.peach-info-notice {1252  font-size: 0.6875rem;1253  color: var(--peach-t1);1254  line-height: 1.5;1255  background: var(--surface-card);1256  border: 1px solid var(--peach-t3);1257  border-radius: 6px;1258  padding: 8px 10px;1259}12601261.peach-info-notice--warn {1262  border-color: rgba(220, 38, 38, 0.4);1263  background: rgba(220, 38, 38, 0.06);1264  color: rgba(220, 38, 38, 0.92);1265  margin-bottom: 8px;1266}12671268.peach-strength-row {1269  display: flex;1270  align-items: center;1271  gap: 8px;1272  margin-bottom: 10px;1273}12741275.peach-strength-track {1276  flex: 1;1277  height: 4px;1278  background: var(--peach-s2);1279  border-radius: 2px;1280  overflow: hidden;1281}12821283.peach-strength-fill {1284  height: 100%;1285  border-radius: 2px;1286  transition: width 120ms ease, background 120ms ease;1287}12881289/* ── Type selector tabs ── */1290.peach-type-tabs {1291  display: flex;1292  gap: 0;1293  background: var(--peach-t4);1294  border-radius: 8px;1295  padding: 3px;1296}12971298.peach-type-tab {1299  flex: 1;1300  display: flex;1301  align-items: center;1302  justify-content: center;1303  gap: 6px;1304  padding: 6px 10px;1305  border-radius: 6px;1306  border: none;1307  background: transparent;1308  cursor: pointer;1309  font-family: Inter, system-ui, sans-serif;1310  font-size: 0.6875rem;1311  font-weight: 400;1312  letter-spacing: 0.04em;1313  color: var(--peach-t1);1314  transition: background 150ms ease, color 150ms ease;1315}13161317.peach-type-tab.is-active {1318  background: var(--peach-s2);1319  color: var(--peach-t0);1320  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1321}13221323.peach-type-tab:not(.is-active):hover {1324  color: var(--peach-t0);1325}13261327.peach-type-tab svg {1328  opacity: 0.7;1329  flex-shrink: 0;1330}13311332.peach-type-tab.is-active svg {1333  opacity: 1;1334}13351336/* ── List view ───────────────────────────────────────────────────────── */1337.peach-list-top {1338  padding: 0 10px;1339  min-height: 46px;1340  display: flex;1341  align-items: center;1342  gap: 6px;1343  border-bottom: 1px solid var(--peach-t3);1344  flex-shrink: 0;1345  background: var(--peach-s1);1346}13471348.peach-vault-list {1349  flex: 1;1350  overflow-y: auto;1351  scrollbar-width: none;1352}1353.peach-vault-list::-webkit-scrollbar { display: none; }13541355/* Scrollbar — vault list */1356.peach-vault-list {1357  scrollbar-width: thin;1358  scrollbar-color: var(--peach-t3) transparent;1359}13601361.peach-vault-list::-webkit-scrollbar {1362  width: 3px;1363}13641365.peach-vault-list::-webkit-scrollbar-thumb {1366  background: var(--peach-t3);1367  border-radius: 2px;1368}13691370.peach-entry-row {1371  width: 100%;1372  display: flex;1373  align-items: center;1374  gap: 10px;1375  padding: 9px 16px;1376  background: transparent;1377  border: none;1378  border-bottom: 1px solid var(--peach-t3);1379  cursor: pointer;1380  color: inherit;1381  text-align: left;1382  transition: background 80ms ease;1383}1384.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1385.peach-entry-row:last-child { border-bottom: none; }1386.peach-entry-row.is-active {1387  box-shadow: inset 2px 0 0 var(--peach-accent);1388  background: rgba(240,232,216,0.03);1389}1390.peach-entry-row:focus-visible {1391  outline: none;1392  box-shadow: 0 0 0 1px var(--peach-border-accent);1393  background: rgba(240,232,216,0.03);1394}1395.peach-entry-row-icon {1396  width: 26px; height: 26px;1397  border-radius: 7px;1398  border: 1px solid var(--peach-t3);1399  display: flex; align-items: center; justify-content: center;1400  color: var(--peach-t2);1401  flex-shrink: 0;1402}1403.peach-entry-row-icon.is-breach {1404  border-color: rgba(220,80,60,0.3);1405  color: rgba(220,80,60,0.7);1406}14071408/* Title-initials chip used as the favicon fallback for login entries whose1409 * real favicon hasn't been cached by the browser yet (freshly-imported,1410 * never-visited domains). Background colour is hashed from the title so1411 * the same entry always shows the same chip. The chip fits the same1412 * 26×26 row icon slot the favicon would take. */1413.peach-favicon-initials {1414  display: inline-flex;1415  align-items: center;1416  justify-content: center;1417  width: 100%;1418  height: 100%;1419  border-radius: 4px;1420  font-family: "IBM Plex Mono", monospace;1421  font-size: 0.5625rem;1422  font-weight: 600;1423  letter-spacing: 0.04em;1424  color: rgba(240, 232, 216, 0.92);1425  text-transform: uppercase;1426  user-select: none;1427}1428.peach-entry-row-info { flex: 1; min-width: 0; }1429.peach-entry-row-name {1430  display: block;1431  font-family: var(--font-display);1432  font-size: 1.0625rem;1433  font-style: italic;1434  font-weight: 400;1435  color: var(--peach-t0);1436  line-height: 1.2;1437  white-space: nowrap;1438  overflow: hidden;1439  text-overflow: ellipsis;1440}1441.peach-entry-row-meta {1442  display: block;1443  font-family: "IBM Plex Mono", monospace;1444  font-size: 0.5625rem;1445  color: var(--peach-t2);1446  margin-top: 1px;1447  letter-spacing: 0.05em;1448}1449.peach-entry-row-dot {1450  width: 5px; height: 5px;1451  border-radius: 50%;1452  background: rgba(220,80,60,0.7);1453  flex-shrink: 0;1454}1455.peach-new-entry-row {1456  display: flex;1457  align-items: center;1458  justify-content: center;1459  gap: 6px;1460  width: 100%;1461  padding: 11px;1462  background: transparent;1463  border: none;1464  border-top: 1px solid var(--peach-t3);1465  color: var(--peach-t2);1466  font-family: "IBM Plex Mono", monospace;1467  font-size: 0.5625rem;1468  text-transform: uppercase;1469  letter-spacing: 0.14em;1470  cursor: pointer;1471  flex-shrink: 0;1472  transition: color 120ms ease, background 120ms ease;1473}1474.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }14751476/* ── Multi-select mode ─────────────────────────────────────────────── */14771478/* Select-mode trigger button in sort bar — same shape as trash btn */1479.peach-sort-select-btn {1480  display: flex;1481  align-items: center;1482  justify-content: center;1483  padding: 3px 5px;1484  background: transparent;1485  border: none;1486  cursor: pointer;1487  color: var(--peach-t2);1488  border-radius: 4px;1489  transition: color 140ms ease, background 140ms ease;1490}1491.peach-sort-select-btn:hover {1492  color: var(--peach-t1);1493  background: var(--peach-t3);1494}14951496/* Sort bar in select mode */1497.peach-select-cancel-btn {1498  background: transparent;1499  border: none;1500  padding: 0 4px;1501  cursor: pointer;1502  font-family: "IBM Plex Mono", monospace;1503  font-size: 0.5625rem;1504  letter-spacing: 0.12em;1505  text-transform: uppercase;1506  color: var(--peach-t2);1507  transition: color 140ms ease;1508  flex-shrink: 0;1509}1510.peach-select-cancel-btn:hover { color: var(--peach-t0); }15111512.peach-select-count-label {1513  flex: 1;1514  text-align: center;1515  font-family: "IBM Plex Mono", monospace;1516  font-size: 0.5625rem;1517  letter-spacing: 0.14em;1518  text-transform: uppercase;1519  color: var(--peach-t1);1520}15211522.peach-select-all-btn {1523  background: transparent;1524  border: none;1525  padding: 0 4px;1526  cursor: pointer;1527  font-family: "IBM Plex Mono", monospace;1528  font-size: 0.5625rem;1529  letter-spacing: 0.12em;1530  text-transform: uppercase;1531  color: var(--peach-t2);1532  transition: color 140ms ease;1533  flex-shrink: 0;1534}1535.peach-select-all-btn:hover { color: var(--peach-accent); }15361537/* List in select mode */1538.peach-vault-list.is-selecting .peach-entry-row {1539  cursor: default;1540}1541.peach-vault-list.is-selecting .peach-entry-row:hover {1542  background: rgba(240,232,216,0.02);1543}1544.peach-vault-list.is-selecting .peach-entry-row.is-selected {1545  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1546}1547.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1548  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1549}15501551/* Select indicator circles in icon slot */1552.peach-entry-row-icon.is-select-icon {1553  color: var(--peach-t2);1554}1555.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1556  color: var(--peach-accent);1557}15581559/* Delete action bar at bottom (replaces new-entry row) */1560.peach-select-action-bar {1561  display: flex;1562  align-items: center;1563  justify-content: center;1564  gap: 7px;1565  width: 100%;1566  padding: 11px;1567  background: transparent;1568  border: none;1569  border-top: 1px solid var(--peach-t3);1570  color: var(--peach-t1);1571  font-family: "IBM Plex Mono", monospace;1572  font-size: 0.5625rem;1573  text-transform: uppercase;1574  letter-spacing: 0.14em;1575  cursor: pointer;1576  flex-shrink: 0;1577  transition: color 120ms ease, background 120ms ease;1578}1579.peach-select-action-bar:not(:disabled):hover {1580  color: var(--peach-t0);1581  background: rgba(220,80,60,0.06);1582}1583.peach-select-action-bar:not(:disabled):hover svg {1584  stroke: rgba(220,80,60,0.8);1585}1586.peach-select-action-bar:disabled,1587.peach-select-action-bar.is-empty {1588  color: var(--peach-t2);1589  cursor: default;1590  opacity: 0.5;1591}1592.peach-search-counter-list {1593  white-space: nowrap;1594  flex-shrink: 0;1595}1596.peach-list-empty {1597  min-height: 180px;1598  display: grid;1599  place-items: center;1600  color: var(--peach-t2);1601  font-family: "IBM Plex Mono", monospace;1602  font-size: 0.6875rem;1603}16041605/* ── Settings view ───────────────────────────────────────────────────── */1606.peach-settings-body {1607  flex: 1;1608  overflow-y: auto;1609  min-height: 0;1610  display: flex;1611  flex-direction: column;1612  padding: 2px 0 10px;1613}1614.peach-settings-group {1615  margin: 4px 10px;1616  padding: 9px 14px 11px;1617  border-radius: 12px;1618  border: 1px solid rgba(255, 255, 255, 0.07);1619  background: rgba(26, 20, 16, 0.60);1620  backdrop-filter: blur(10px) saturate(1.3);1621  -webkit-backdrop-filter: blur(10px) saturate(1.3);1622}16231624.peach-settings-group + .peach-settings-group {1625  margin-top: 6px;1626}16271628@supports not (backdrop-filter: blur(1px)) {1629  .peach-settings-group {1630    background: rgba(26, 20, 16, 0.90);1631    border-color: rgba(255, 255, 255, 0.09);1632    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1633  }1634}16351636.light .peach-settings-group,1637[data-theme="light"] .peach-settings-group {1638  background: rgba(245, 237, 226, 0.70);1639  border-color: rgba(26, 18, 8, 0.08);1640  backdrop-filter: blur(10px) saturate(1.2);1641  -webkit-backdrop-filter: blur(10px) saturate(1.2);1642}16431644@supports not (backdrop-filter: blur(1px)) {1645  .light .peach-settings-group,1646  [data-theme="light"] .peach-settings-group {1647    background: rgba(245, 237, 226, 0.97);1648    border-color: rgba(26, 18, 8, 0.10);1649  }1650}1651.peach-export-intro {1652  padding-bottom: 8px;1653}1654.peach-export-card {1655  display: grid;1656  gap: 10px;1657}1658.peach-rune-canvas {1659  border-radius: 8px;1660  background: rgba(0, 0, 0, 0.22);1661  flex: 1;1662  align-self: center;1663}1664.peach-script-input {1665  font-family: "PeachScript", monospace;1666  font-size: 0.6875rem;1667  line-height: 1.9;1668  letter-spacing: 0.06em;1669  color: var(--peach-t0);1670  background: rgba(0, 0, 0, 0.22);1671  border: none;1672  border-radius: 6px;1673  padding: 12px;1674  width: 100%;1675  min-height: 96px;1676  resize: vertical;1677  word-break: break-all;1678  scrollbar-width: none;1679  -ms-overflow-style: none;1680}16811682.peach-script-input::-webkit-scrollbar { display: none; }1683.peach-csv-warning {1684  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1685  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1686  color: var(--peach-t0);1687  border-radius: 6px;1688  padding: 10px 12px;1689  margin-bottom: 8px;1690  font-size: 0.75rem;1691  line-height: 1.45;1692}1693.peach-export-card--primary {1694  background:1695    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1696}16971698/* Export menu — distribute the three format cards across the popup. */1699.peach-export-menu {1700  display: flex;1701  flex-direction: column;1702  flex: 1;1703  min-height: 0;1704}1705.peach-export-menu .peach-settings-group {1706  flex: 1;1707  display: flex;1708  flex-direction: column;1709  justify-content: center;1710  gap: 10px;1711}17121713/* Result view — the script-string fills the remaining vertical surface. */1714.peach-export-result-group {1715  flex: 1;1716  display: flex;1717  flex-direction: column;1718  min-height: 0;1719  border-bottom: none;1720}1721.peach-export-result-group .peach-export-card {1722  flex: 1;1723  min-height: 0;1724  display: flex;1725  flex-direction: column;1726  gap: 10px;1727}1728.peach-export-result-group .peach-export-card-copy {1729  flex-shrink: 0;1730}1731.peach-export-result-group .peach-settings-label {1732  flex-shrink: 0;1733}1734.peach-export-result-group button {1735  flex-shrink: 0;1736}1737.peach-export-card-head {1738  display: flex;1739  align-items: center;1740  justify-content: space-between;1741  gap: 10px;1742}1743.peach-export-card-copy {1744  margin: 0;1745  font-size: 0.75rem;1746  line-height: 1.55;1747  color: var(--peach-t1);1748}1749.peach-export-note {1750  margin: 0;1751  font-size: 0.625rem;1752  line-height: 1.5;1753  color: var(--peach-t2);1754}1755.peach-export-strength-track {1756  height: 3px;1757  background: var(--peach-border);1758  border-radius: 2px;1759  margin: 4px 0 2px;1760  overflow: hidden;1761}1762.peach-export-strength-fill {1763  height: 100%;1764  border-radius: 2px;1765  transition: width 250ms ease, background 250ms ease;1766}1767.peach-export-strength-warn {1768  margin: 0;1769  font-size: 0.625rem;1770  line-height: 1.5;1771  color: #e84040;1772  font-family: "IBM Plex Mono", monospace;1773}1774.peach-export-strength-hint {1775  margin: 0;1776  font-size: 0.625rem;1777  line-height: 1.5;1778  color: var(--peach-t2);1779  font-family: "IBM Plex Mono", monospace;1780}1781.peach-export-pill {1782  display: inline-flex;1783  align-items: center;1784  padding: 4px 8px;1785  border-radius: 999px;1786  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1787  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1788  color: var(--peach-accent);1789  font-family: "IBM Plex Mono", monospace;1790  font-size: 0.5rem;1791  letter-spacing: 0.12em;1792  text-transform: uppercase;1793  white-space: nowrap;1794}1795.peach-export-pill--danger {1796  border-color: rgba(220,80,60,0.22);1797  background: rgba(220,80,60,0.08);1798  color: var(--peach-breach);1799}1800.peach-settings-label {1801  margin: 0 0 6px;1802  font-family: "IBM Plex Mono", monospace;1803  font-size: 0.5rem;1804  text-transform: uppercase;1805  letter-spacing: 0.18em;1806  color: var(--peach-t2);1807}1808.peach-settings-row {1809  display: flex;1810  align-items: center;1811  justify-content: space-between;1812  gap: 12px;1813  min-height: 34px;1814  padding: 6px 0;1815  font-size: 0.8125rem;1816  color: var(--peach-t1);1817}1818.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1819.peach-settings-value {1820  font-family: "IBM Plex Mono", monospace;1821  font-size: 0.625rem;1822  color: var(--peach-t2);1823}18241825.peach-settings-value--status {1826  display: flex;1827  align-items: center;1828  gap: 6px;1829}18301831.peach-settings-link {1832  font-family: "IBM Plex Mono", monospace;1833  font-size: 0.625rem;1834  color: var(--peach-accent);1835  text-decoration: none;1836  cursor: pointer;1837}1838.peach-settings-link:hover {1839  text-decoration: underline;1840}18411842.peach-settings-row--stack {1843  flex-direction: column;1844  align-items: stretch;1845  gap: 6px;1846}18471848.peach-settings-row--top {1849  align-items: flex-start;1850}18511852.peach-settings-row-main {1853  display: flex;1854  flex-direction: column;1855  gap: 4px;1856  flex: 1;1857}1858.peach-toggle {1859  width: 28px; height: 16px;1860  border-radius: 999px;1861  background: var(--peach-t3);1862  border: 1px solid var(--peach-t3);1863  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1864  flex-shrink: 0;1865  transition: background 200ms ease, border-color 200ms ease;1866  cursor: pointer;1867}1868.peach-toggle.is-on {1869  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1870  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1871}1872.peach-toggle-knob {1873  width: 10px; height: 10px;1874  border-radius: 50%;1875  background: var(--peach-t2);1876  flex-shrink: 0;1877  transform: translateX(0px);1878  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1879}1880.peach-toggle.is-on .peach-toggle-knob {1881  background: var(--peach-accent);1882  transform: translateX(12px);1883}1884.peach-settings-footer {1885  display: flex;1886  align-items: center;1887  gap: 8px;1888  margin-top: auto;1889  padding: 14px 16px 8px;1890  font-family: "IBM Plex Mono", monospace;1891  font-size: 0.5625rem;1892  color: var(--peach-t2);1893}18941895/* ── Settings home navigation ──────────────────────────────────────────── */1896.peach-settings-nav-label {1897  margin: 0 0 2px;1898  padding: 12px 16px 4px;1899  font-family: "IBM Plex Mono", monospace;1900  font-size: 0.5rem;1901  text-transform: uppercase;1902  letter-spacing: 0.18em;1903  color: var(--peach-t2);1904}19051906.peach-settings-cat-row {1907  display: flex;1908  align-items: center;1909  gap: 10px;1910  width: 100%;1911  padding: 9px 16px;1912  background: none;1913  border: none;1914  border-bottom: 1px solid var(--peach-t3);1915  cursor: pointer;1916  text-align: left;1917  color: inherit;1918  transition: background var(--peach-dur-80) ease;1919}1920.peach-settings-cat-row:hover {1921  background: var(--peach-t3);1922}1923.peach-settings-cat-row:last-child {1924  border-bottom: none;1925}19261927.peach-settings-cat-icon {1928  width: 28px;1929  height: 28px;1930  border-radius: 7px;1931  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1932  color: var(--peach-accent);1933  display: flex;1934  align-items: center;1935  justify-content: center;1936  flex-shrink: 0;1937}1938/* Light theme: peach-on-cream is too low-contrast — both colors are warm.1939   Darken the icon stroke to ink and bump the bg tint so the icon reads1940   sharply while the cell still feels accent-tinted. */1941.light .peach-settings-cat-icon {1942  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);1943  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));1944}19451946.peach-settings-cat-content {1947  flex: 1;1948  display: flex;1949  flex-direction: column;1950  gap: 2px;1951  min-width: 0;1952}19531954.peach-settings-cat-name {1955  font-size: 0.8125rem;1956  font-weight: 450;1957  color: var(--peach-t0);1958  line-height: 1.2;1959}19601961.peach-settings-cat-desc {1962  font-size: 0.625rem;1963  color: var(--peach-t2);1964  line-height: 1.3;1965  white-space: nowrap;1966  overflow: hidden;1967  text-overflow: ellipsis;1968}19691970.peach-settings-cat-chevron {1971  color: var(--peach-t2);1972  flex-shrink: 0;1973  opacity: 0.5;1974}19751976/* ── Settings sub-view section labels ──────────────────────────────────── */1977.peach-settings-sub-label {1978  margin: 12px 0 4px;1979  font-family: "IBM Plex Mono", monospace;1980  font-size: 0.5rem;1981  text-transform: uppercase;1982  letter-spacing: 0.18em;1983  color: var(--peach-t2);1984}1985.peach-settings-sub-label:first-child {1986  margin-top: 4px;1987}19881989/* ── Settings: collapsible Advanced section ─────────────────────────────── */1990.peach-settings-advanced-toggle {1991  display: flex;1992  align-items: center;1993  justify-content: space-between;1994  width: 100%;1995  background: none;1996  border: none;1997  cursor: pointer;1998  padding: 12px 0 4px;1999  margin: 0;2000  color: inherit;2001}2002.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {2003  color: var(--peach-t1);2004}2005.peach-settings-advanced-chevron {2006  font-size: 0.5625rem;2007  color: var(--peach-t3);2008  letter-spacing: 0;2009  transition: color 120ms ease;2010}20112012/* ── Feedback form ──────────────────────────────────────────────────────── */2013.peach-feedback-group {2014  flex: 1;2015  display: flex;2016  flex-direction: column;2017  border-bottom: none;2018}20192020.peach-feedback-intro {2021  margin: 4px 0 14px;2022  font-size: 0.75rem;2023  line-height: 1.55;2024  color: var(--peach-t1);2025}20262027.peach-feedback-chips {2028  display: flex;2029  flex-wrap: wrap;2030  gap: 6px;2031  margin-bottom: 14px;2032}20332034.peach-feedback-chip {2035  padding: 4px 10px;2036  border-radius: 999px;2037  border: 1px solid var(--peach-t3);2038  background: none;2039  color: var(--peach-t2);2040  font-size: 0.6875rem;2041  font-family: var(--font-ui);2042  cursor: pointer;2043  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2044    background var(--peach-dur-80) ease;2045}2046.peach-feedback-chip:hover {2047  border-color: var(--peach-t2);2048  color: var(--peach-t1);2049}2050.peach-feedback-chip.is-active {2051  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);2052  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));2053  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);2054  box-shadow:2055    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),2056    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);2057  font-weight: 700;2058}20592060.peach-feedback-textarea {2061  flex: 1;2062  width: 100%;2063  min-height: 120px;2064  box-sizing: border-box;2065  background: rgba(0, 0, 0, 0.22);2066  border: 1px solid transparent;2067  border-radius: 6px;2068  color: var(--peach-t0);2069  font-size: 0.75rem;2070  font-family: var(--font-ui);2071  line-height: 1.5;2072  padding: 8px 10px;2073  resize: none;2074  outline: none;2075  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2076}2077.peach-feedback-textarea:focus {2078  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2079  background: rgba(0, 0, 0, 0.28);2080}2081.peach-feedback-textarea:focus {2082  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2083}2084.peach-feedback-textarea::placeholder {2085  color: var(--peach-t2);2086}20872088.peach-feedback-meta {2089  margin: 6px 0 0;2090  font-size: 0.625rem;2091  color: var(--peach-t2);2092  font-family: "IBM Plex Mono", monospace;2093}20942095.peach-feedback-result {2096  margin: 8px 0 0;2097  font-size: 0.6875rem;2098  font-family: "IBM Plex Mono", monospace;2099}2100.peach-feedback-result--ok { color: var(--peach-sync-ok); }2101.peach-feedback-result--err { color: var(--peach-breach); }21022103.peach-feedback-submit {2104  width: 100%;2105  margin-top: 12px;2106  justify-content: center;2107}21082109.peach-feedback-anon {2110  margin: 8px 0 0;2111  font-size: 0.625rem;2112  color: var(--peach-t2);2113  text-align: center;2114}21152116.peach-feedback-thanks {2117  margin: auto 0;2118  padding: 18px 14px;2119  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);2120  border-radius: 8px;2121  background:2122    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),2123    rgba(0, 0, 0, 0.18);2124  color: var(--peach-t1);2125  text-align: center;2126}21272128.peach-feedback-thanks p {2129  margin: 0;2130  font-size: 0.75rem;2131  line-height: 1.5;2132}21332134.peach-feedback-thanks-title {2135  color: var(--peach-t0);2136  font-family: "Cormorant Garamond", serif;2137  font-size: 1.375rem !important;2138  line-height: 1.1 !important;2139  margin-bottom: 8px !important;2140}21412142.peach-passkey-badge {2143  margin-left: 8px;2144  font-size: 0.625rem;2145  letter-spacing: 0.06em;2146  text-transform: uppercase;2147  color: var(--peach-t2);2148  font-family: var(--font-ui);2149  vertical-align: middle;2150}21512152.peach-passkey-delete-btn {2153  color: var(--peach-breach);2154  border-color: rgba(229, 85, 85, 0.25);2155}21562157.peach-passkey-delete-confirm {2158  display: flex;2159  align-items: center;2160  gap: 8px;2161  padding: 8px 10px;2162  background: rgba(229, 85, 85, 0.06);2163  border: 1px solid rgba(229, 85, 85, 0.2);2164  border-radius: 6px;2165}21662167.peach-passkey-delete-confirm-copy {2168  flex: 1;2169  font-size: 0.6875rem;2170  color: var(--peach-t1);2171}21722173.peach-passkey-delete-btn--confirm {2174  color: var(--peach-breach);2175  border-color: rgba(229, 85, 85, 0.4);2176}21772178.peach-passkey-activity {2179  flex-direction: column;2180  align-items: flex-start;2181  gap: 4px;2182}21832184.peach-passkey-meta {2185  font-size: 0.6875rem;2186  color: var(--peach-t2);2187}21882189.peach-passkey-actions {2190  position: relative;2191  z-index: 1;2192  margin-top: 14px;2193  display: flex;2194  flex-direction: column;2195  gap: 8px;2196}21972198.peach-passkey-approval {2199  display: flex;2200  flex-direction: column;2201  align-items: center;2202  padding: 16px 20px 14px;2203  gap: 8px;2204  text-align: center;2205}22062207.peach-passkey-approval-icon {2208  width: 36px;2209  height: 36px;2210  border-radius: 10px;2211  background: var(--peach-s2);2212  border: 1px solid var(--peach-t3);2213  display: flex;2214  align-items: center;2215  justify-content: center;2216  flex-shrink: 0;2217  color: var(--peach-accent);2218}22192220.peach-passkey-approval-icon img,2221.peach-passkey-approval-icon svg {2222  width: 22px;2223  height: 22px;2224  border-radius: 5px;2225}22262227.peach-passkey-approval-rp {2228  font-family: var(--font-ui);2229  font-size: 0.75rem;2230  color: var(--peach-t2);2231  letter-spacing: 0.03em;2232}22332234.peach-passkey-approval-action {2235  font-family: var(--font-display);2236  font-style: italic;2237  font-weight: 300;2238  font-size: 18px;2239  color: var(--peach-t0);2240  line-height: 1.1;2241  margin: 1px 0;2242}22432244.peach-passkey-approval-user {2245  font-family: var(--font-mono);2246  font-size: 0.6875rem;2247  color: var(--peach-t1);2248  background: var(--peach-s2);2249  border: 1px solid var(--peach-t3);2250  border-radius: 4px;2251  padding: 3px 8px;2252}22532254.peach-passkey-approval-notice {2255  font-size: 0.625rem;2256  color: var(--peach-t2);2257  line-height: 1.5;2258  max-width: 220px;2259}22602261.peach-passkey-approval-actions {2262  display: flex;2263  gap: 8px;2264  width: 100%;2265  margin-top: 6px;2266}22672268.peach-passkey-approval-actions .peach-btn {2269  flex: 1;2270}22712272/* ── Inline generator drawer ── */2273.peach-generator-drawer {2274  display: grid;2275  grid-template-rows: 0fr;2276  transition: grid-template-rows 320ms var(--peach-curve-arrival);2277  overflow: hidden;2278}2279.peach-generator-drawer.is-open {2280  grid-template-rows: 1fr;2281}2282.peach-generator-drawer-inner {2283  min-height: 0;2284  overflow: hidden;2285}2286.peach-generator-drawer-content {2287  border-top: 1px solid var(--peach-t3);2288  padding: 8px 0 4px;2289  display: flex;2290  flex-direction: column;2291  gap: 8px;2292}22932294/* ── Compact generator (inside entry edit) ── */2295.peach-generator-drawer-content--compact {2296  border-top: 1px solid var(--peach-t3);2297  padding: 8px 0 2px;2298  gap: 7px;2299}2300.peach-pwgen-compact-display-row {2301  display: flex;2302  align-items: center;2303  gap: 6px;2304}2305.peach-pwgen-compact-output {2306  flex: 1;2307  min-width: 0;2308  font-family: "IBM Plex Mono", monospace;2309  font-size: 0.6875rem;2310  font-weight: 400;2311  letter-spacing: 0.04em;2312  color: var(--peach-t0);2313  background: rgba(240, 232, 216, 0.04);2314  border: 1px solid var(--peach-t3);2315  border-radius: 5px;2316  padding: 5px 8px;2317  line-height: 1.5;2318  outline: none;2319  transition: border-color 120ms ease;2320}23212322.peach-pwgen-compact-output:focus {2323  border-color: var(--peach-t1);2324}2325.peach-pwgen-compact-controls {2326  display: flex;2327  align-items: center;2328  gap: 6px;2329}2330.peach-pwgen-compact-slider {2331  flex: 1;2332  min-width: 0;2333  height: 2px !important;2334}2335.peach-pwgen-compact-controls .peach-pwgen-len-num {2336  flex-shrink: 0;2337  min-width: 18px;2338  text-align: right;2339}2340.peach-pwgen-compact-pills {2341  display: flex;2342  gap: 3px;2343  flex-shrink: 0;2344}2345.peach-pwgen-compact-pills .peach-pwgen-pill {2346  padding: 2px 7px;2347  font-size: 0.5rem;2348}2349.peach-pwgen-compact-use {2350  flex-shrink: 0;2351  font-size: 0.625rem !important;2352  padding: 3px 9px !important;2353  min-height: 22px !important;2354  border-radius: 5px !important;2355}23562357/* ── Password edit row (input + eye toggle side-by-side) ── */2358.peach-password-edit-row {2359  display: flex;2360  align-items: center;2361  gap: 6px;2362}2363.peach-password-edit-row .peach-inline-input {2364  flex: 1;2365  min-width: 0;2366}23672368/* ── Generate toggle link ── */2369.peach-generate-toggle-link {2370  display: inline-flex;2371  align-items: center;2372  gap: 5px;2373  background: none;2374  border: none;2375  padding: 0;2376  cursor: pointer;2377  font-family: "IBM Plex Mono", monospace;2378  font-size: 0.625rem;2379  color: var(--peach-t2);2380  letter-spacing: 0.04em;2381  transition: color 120ms ease;2382  align-self: flex-start;2383}2384.peach-generate-toggle-link:hover {2385  color: var(--peach-accent);2386}23872388/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2389.peach-entry-body {2390  flex: 1;2391  overflow-y: auto;2392  overflow-x: hidden;2393  scrollbar-width: none;2394  -ms-overflow-style: none;2395  overscroll-behavior: contain;2396  display: grid;2397  gap: 10px;2398  align-content: start;2399  padding: 10px 20px 14px;2400  min-width: 0;2401  min-height: 0;2402}2403.peach-entry-body::-webkit-scrollbar { display: none; }24042405/* Type-toggle pills + inline note toolbar */2406.peach-new-type-row {2407  display: flex;2408  align-items: center;2409  gap: 6px;2410  margin-bottom: 2px;2411}2412.peach-new-type-btn {2413  background: transparent;2414  border: 1px solid var(--peach-t3);2415  border-radius: 12px;2416  padding: 3px 10px;2417  font-family: "IBM Plex Mono", monospace;2418  font-size: 0.5625rem;2419  letter-spacing: 0.12em;2420  text-transform: uppercase;2421  color: var(--peach-t2);2422  cursor: pointer;2423  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2424}2425.peach-new-type-btn.is-active {2426  color: var(--peach-t0);2427  border-color: var(--peach-accent);2428  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2429}2430.peach-new-type-btn:not(.is-active):hover {2431  color: var(--peach-t1);2432  border-color: var(--peach-t2);2433}24342435/* Editable title */2436.peach-new-title-wrap { margin: 0 0 2px; }2437.peach-new-title-input {2438  background: transparent;2439  border: none;2440  outline: none;2441  width: 100%;2442  color: var(--peach-t0);2443  font-family: var(--font-display);2444  font-style: italic;2445  font-weight: 400;2446  font-size: 40px;2447  line-height: 0.95;2448  caret-color: var(--peach-accent);2449}2450.peach-new-title-input::placeholder { color: var(--peach-t2); }24512452/* Editable domain field */2453.peach-domain-edit-row {2454  display: flex;2455  align-items: center;2456  gap: 6px;2457}24582459.peach-domain-edit-row .peach-domain-value--edit {2460  flex: 1;2461  width: 0;2462}24632464.peach-domain-url-btn {2465  flex-shrink: 0;2466  background: transparent;2467  border: none;2468  cursor: pointer;2469  color: var(--peach-t3);2470  padding: 2px 3px;2471  display: flex;2472  align-items: center;2473  line-height: 0;2474  border-radius: 3px;2475  transition: color 120ms ease;2476}24772478.peach-domain-url-btn:hover {2479  color: var(--peach-accent);2480}24812482.peach-domain-value--edit {2483  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2484  font-size: 0.625rem;2485  font-style: italic;2486  letter-spacing: 0.12em;2487  color: var(--peach-t1);2488  background: transparent;2489  border: none;2490  border-bottom: 1px solid var(--peach-t3);2491  outline: none;2492  width: 100%;2493  padding: 2px 0;2494  caret-color: var(--peach-accent);2495  transition: border-color 140ms ease, color 140ms ease;2496}2497.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2498.peach-domain-value--edit:focus {2499  border-bottom-color: rgba(240, 232, 216, 0.28);2500  color: var(--peach-t0);2501}25022503/* Editable field values (username, password, totp) */2504.peach-field-value--edit {2505  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2506  font-size: 0.8125rem;2507  color: var(--peach-t0);2508  background: transparent;2509  border: none;2510  border-bottom: 1px solid var(--peach-t3);2511  outline: none;2512  flex: 1;2513  min-width: 0;2514  padding: 3px 0;2515  caret-color: var(--peach-accent);2516  transition: border-color 140ms ease, color 140ms ease;2517}2518.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2519.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2520.peach-field-value--edit:focus {2521  border-bottom-color: rgba(240, 232, 216, 0.28);2522  color: var(--peach-t0);2523}25242525/* "+ add optional field" links */2526.peach-entry-add-links {2527  display: flex;2528  gap: 12px;2529  flex-wrap: wrap;2530  margin-top: -2px;2531}2532.peach-add-field-link {2533  background: transparent;2534  border: none;2535  padding: 0;2536  cursor: pointer;2537  font-family: "IBM Plex Mono", monospace;2538  font-size: 0.5625rem;2539  letter-spacing: 0.1em;2540  text-transform: uppercase;2541  color: var(--peach-t2);2542  transition: color 140ms ease;2543}2544.peach-add-field-link:hover { color: var(--peach-accent); }25452546/* ── New entry form (legacy classes) ────────────────────────────────── */2547.peach-new-body {2548  flex: 1;2549  overflow-y: auto;2550  padding: 10px 20px 14px;2551}2552.peach-new-name-input {2553  background: transparent;2554  border: none;2555  outline: none;2556  width: 100%;2557  color: var(--peach-t0);2558  font-family: var(--font-display);2559  font-style: italic;2560  font-weight: 400;2561  font-size: 40px;2562  line-height: 0.95;2563  caret-color: var(--peach-accent);2564}2565.peach-new-name-input::placeholder { color: var(--peach-t2); }2566.peach-new-field-input {2567  background: transparent;2568  border: none;2569  outline: none;2570  flex: 1;2571  min-width: 0;2572  caret-color: var(--peach-accent);2573}2574.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }25752576/* ── Canary card ── */2577.peach-canary-card {2578  border: 1px solid rgba(217, 160, 48, 0.2);2579  background: rgba(217, 160, 48, 0.03);2580  border-radius: 8px;2581  padding: 12px;2582}25832584.peach-canary-settings-header {2585  display: flex;2586  align-items: center;2587  justify-content: space-between;2588  cursor: pointer;2589  user-select: none;2590}25912592.peach-canary-card .peach-label {2593  color: rgba(217, 160, 48, 0.85);2594}25952596.peach-canary-card .peach-new-field-input {2597  border-color: rgba(217, 160, 48, 0.25);2598}25992600.peach-canary-card .peach-new-field-input:focus {2601  border-color: rgba(217, 160, 48, 0.5);2602}26032604.peach-canary-body {2605  margin-top: 12px;2606  display: flex;2607  flex-direction: column;2608  gap: 10px;2609}26102611.peach-canary-explainer {2612  display: flex;2613  gap: 10px;2614  padding: 10px 12px;2615  border-radius: 10px;2616  background: rgba(217, 160, 48, 0.06);2617  border: 1px solid rgba(217, 160, 48, 0.22);2618  margin-bottom: 4px;2619}26202621.peach-canary-explainer-icon {2622  font-size: 1rem;2623  flex-shrink: 0;2624  line-height: 1.2;2625}26262627.peach-canary-explainer-title {2628  font-family: var(--font-ui);2629  font-size: 0.6875rem;2630  font-weight: 500;2631  color: rgba(217, 160, 48, 0.9);2632  margin: 0 0 3px;2633}26342635.peach-canary-explainer-copy {2636  font-family: var(--font-ui);2637  font-size: 0.625rem;2638  color: var(--peach-t2);2639  line-height: 1.55;2640  margin: 0;2641}26422643.peach-canary-hint {2644  font-size: 0.625rem;2645  color: var(--peach-t2);2646  font-family: Inter, system-ui, sans-serif;2647  line-height: 1.5;2648  margin-top: 4px;2649}26502651.peach-canary-actions-row {2652  display: flex;2653  align-items: center;2654  gap: 8px;2655}26562657.peach-canary-test-btn {2658  border-color: rgba(217, 160, 48, 0.3);2659  color: rgba(217, 160, 48, 0.85);2660}26612662.peach-canary-test-result {2663  font-size: 0.625rem;2664  font-family: Inter, system-ui, sans-serif;2665}26662667.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2668.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }26692670.peach-canary-badge {2671  display: flex;2672  position: relative;2673  z-index: 1;2674  align-items: center;2675  gap: 5px;2676  padding: 4px 10px;2677  background: rgba(217, 160, 48, 0.12);2678  border: 1px solid rgba(217, 160, 48, 0.35);2679  border-radius: 6px;2680  margin-bottom: 6px;2681  width: fit-content;2682}26832684.peach-canary-badge-label {2685  font-size: 0.625rem;2686  letter-spacing: 0.06em;2687  color: rgba(217, 160, 48, 0.9);2688  font-family: var(--font-ui);2689  text-transform: uppercase;2690}26912692.peach-canary-badge-icon {2693  font-size: 0.6875rem;2694}26952696.peach-canary-suppress-row {2697  display: flex;2698  align-items: center;2699  gap: 8px;2700  padding: 6px 10px;2701  background: rgba(217, 160, 48, 0.08);2702  border-radius: 6px;2703  margin-bottom: 8px;2704}27052706.peach-canary-suppress-label {2707  font-size: 0.6875rem;2708  color: rgba(217, 160, 48, 0.85);2709  cursor: pointer;2710  font-family: var(--font-ui);2711  letter-spacing: 0.04em;2712}27132714.peach-regen-panel {2715  position: relative;2716  z-index: 1;2717  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2718  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2719  border-radius: 8px;2720  padding: 12px;2721  margin-bottom: 8px;2722}27232724.peach-regen-panel-header {2725  display: flex;2726  align-items: center;2727  justify-content: space-between;2728  margin-bottom: 10px;2729}27302731.peach-regen-panel-title {2732  font-size: 0.6875rem;2733  font-weight: 600;2734  letter-spacing: 0.06em;2735  text-transform: uppercase;2736  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2737}27382739.peach-regen-output {2740  background: rgba(0, 0, 0, 0.2);2741  border-radius: 6px;2742  padding: 10px;2743  margin-bottom: 10px;2744  font-family: var(--font-mono);2745  font-size: 0.8125rem;2746  word-break: break-all;2747  color: var(--peach-t1);2748}27492750.peach-regen-actions {2751  display: flex;2752  gap: 6px;2753}27542755.peach-regen-actions--spaced {2756  margin-bottom: 8px;2757}27582759.peach-regen-action-grow {2760  flex: 1;2761}27622763.peach-regen-copy-btn {2764  padding: 0 8px;2765}27662767.peach-regen-success {2768  position: relative;2769  z-index: 1;2770  background: rgba(40, 180, 80, 0.1);2771  border: 1px solid rgba(40, 180, 80, 0.3);2772  border-radius: 8px;2773  padding: 10px 12px;2774  margin-bottom: 8px;2775  display: flex;2776  align-items: center;2777  gap: 8px;2778  font-size: 0.6875rem;2779  color: rgba(40, 180, 80, 0.9);2780}27812782/* ── Note editor overlay ── */2783.peach-note-editor {2784  position: absolute;2785  inset: 0;2786  z-index: 200;2787  display: flex;2788  flex-direction: column;2789  background:2790    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2791    var(--peach-bg);2792  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2793}27942795.peach-note-editor-header {2796  display: flex;2797  align-items: center;2798  gap: 10px;2799  padding: 14px 16px 10px;2800  border-bottom: 1px solid var(--peach-t3);2801  flex-shrink: 0;2802}28032804.peach-note-editor-back {2805  background: transparent;2806  border: none;2807  cursor: pointer;2808  color: var(--peach-t2);2809  padding: 4px 6px;2810  border-radius: 6px;2811  display: flex;2812  align-items: center;2813  transition: color 120ms ease, background 120ms ease;2814  flex-shrink: 0;2815}2816.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }28172818.peach-note-editor-label {2819  flex: 1;2820  font-family: var(--font-display);2821  font-style: italic;2822  font-size: 0.9375rem;2823  color: var(--peach-t1);2824  letter-spacing: 0.02em;2825}28262827.peach-note-editor-save-btn {2828  background: transparent;2829  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2830  border-radius: 8px;2831  color: var(--peach-accent);2832  font-family: "IBM Plex Mono", monospace;2833  font-size: 0.625rem;2834  letter-spacing: 0.06em;2835  text-transform: uppercase;2836  padding: 3px 10px;2837  cursor: pointer;2838  transition: background 120ms ease, border-color 120ms ease;2839}2840.peach-note-editor-save-btn:hover:not(:disabled) {2841  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2842  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2843}2844.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }28452846.peach-note-toolbar {2847  display: flex;2848  align-items: center;2849  gap: 3px;2850  padding: 6px 14px 5px;2851  border-bottom: 1px solid var(--peach-t3);2852  flex-shrink: 0;2853}28542855.peach-note-tool-btn {2856  background: transparent;2857  border: 1px solid transparent;2858  border-radius: 5px;2859  color: var(--peach-t2);2860  font-family: "IBM Plex Mono", monospace;2861  font-size: 0.625rem;2862  letter-spacing: 0.04em;2863  padding: 2px 8px;2864  cursor: pointer;2865  line-height: 1.6;2866  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2867}2868.peach-note-tool-btn:hover {2869  background: var(--peach-t4);2870  color: var(--peach-t0);2871  border-color: var(--peach-t3);2872}28732874.peach-note-tool-icon {2875  padding: 3px 7px;2876  display: inline-flex;2877  align-items: center;2878  justify-content: center;2879}28802881.peach-note-tool-divider {2882  width: 1px;2883  height: 14px;2884  background: var(--peach-t3);2885  margin: 0 4px;2886  flex-shrink: 0;2887}28882889.peach-note-editor-body {2890  flex: 1;2891  overflow-y: auto;2892  padding: 16px 20px 20px;2893  outline: none;2894  font-family: var(--font-display);2895  font-size: 1rem;2896  line-height: 1.75;2897  color: var(--peach-t0);2898  scrollbar-width: none;2899  word-break: break-word;2900}2901.peach-note-editor-body:empty::before {2902  content: "write your note…";2903  color: var(--peach-t3);2904  font-style: italic;2905  pointer-events: none;2906}29072908/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2909.peach-note-editor-inline {2910  display: flex;2911  flex-direction: column;2912  flex: 1;2913  min-height: 0;2914}2915.peach-note-editor-body--inline {2916  flex: 1;2917  min-height: 0;2918  font-size: 0.9375rem;2919  padding: 10px 20px 14px;2920}29212922/* Full-width toolbar row inside the body (Add.tsx note type).2923   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */2924.peach-note-toolbar-body {2925  display: flex;2926  align-items: center;2927  gap: 3px;2928  padding: 5px 20px 4px;2929  margin: 2px -20px 0;2930  border-bottom: 1px solid var(--peach-t3);2931  flex-shrink: 0;2932}29332934/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2935   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2936   and .peach-note-tool-divider button-level styles. */2937.peach-note-toolbar-inline {2938  display: flex;2939  align-items: center;2940  gap: 3px;2941  margin-left: auto;2942  padding-left: 10px;2943  border-left: 1px solid var(--peach-t3);2944  min-height: 22px;2945}29462947/* Entry.tsx toolbar row (no tabs, toolbar only) */2948.peach-entry-note-toolbar-row {2949  display: flex;2950  align-items: center;2951  margin: 4px 0 6px;2952  position: relative;2953  z-index: 1;2954}2955.peach-entry-note-toolbar-row .peach-note-toolbar-inline {2956  border-left: none;2957  padding-left: 0;2958  margin-left: 0;2959}29602961/* Note body — fills available vertical space in Add.tsx and Entry.tsx */2962.peach-note-body {2963  display: flex;2964  flex-direction: column;2965  flex: 1;2966  min-height: 0;2967  margin: 4px 0 0;2968}2969.peach-entry-body--new .peach-note-body {2970  margin: 8px -20px 0;2971}29722973/* Add.tsx body is a grid by default; swap to a flex column when a note is2974   active so the note body can stretch and pin the tags row to the bottom. */2975.peach-entry-body--new:has(.peach-note-body) {2976  display: flex;2977  flex-direction: column;2978}29792980/* Rich content element styles (editor + display) */2981.peach-note-editor-body h2,2982.peach-note-content h2 {2983  font-family: var(--font-display);2984  font-size: 20px;2985  font-weight: 600;2986  font-style: italic;2987  color: var(--peach-t0);2988  margin: 6px 0 2px;2989  line-height: 1.3;2990}2991.peach-note-editor-body ul,2992.peach-note-content ul {2993  padding-left: 18px;2994  margin: 3px 0;2995  list-style: disc;2996}2997.peach-note-editor-body ol,2998.peach-note-content ol {2999  padding-left: 18px;3000  margin: 3px 0;3001  list-style: decimal;3002}3003.peach-note-editor-body li,3004.peach-note-content li { margin: 2px 0; }3005.peach-note-editor-body hr,3006.peach-note-content hr {3007  border: none;3008  border-top: 1px solid var(--peach-t3);3009  margin: 10px 0;3010}30113012/* font size elements from execCommand */3013.peach-note-editor-body font[size="1"],3014.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }3015.peach-note-editor-body font[size="2"],3016.peach-note-content font[size="2"] { font-size: 0.8125rem; }3017.peach-note-editor-body font[size="3"],3018.peach-note-content font[size="3"] { font-size: 1rem; }3019.peach-note-editor-body font[size="4"],3020.peach-note-content font[size="4"] { font-size: 20px; }3021.peach-note-editor-body font[size="5"],3022.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }30233024/* bold / italic inside the editor and note display */3025.peach-note-editor-body b, .peach-note-editor-body strong,3026.peach-note-content b, .peach-note-content strong { font-weight: 700; }3027.peach-note-editor-body em, .peach-note-editor-body i,3028.peach-note-content em, .peach-note-content i { font-style: italic; }30293030/* note display — rendered HTML, no pre-wrap */3031.peach-note-content {3032  overflow: auto;3033  max-height: 340px;3034  word-break: break-word;3035}30363037/* ── Note textarea ── */3038.peach-note-textarea {3039  width: 100%;3040  min-height: 180px;3041  max-height: 280px;3042  resize: vertical;3043  background: var(--peach-t4);3044  border: 1px solid var(--peach-t3);3045  border-radius: 8px;3046  padding: 10px 12px;3047  font-family: "IBM Plex Mono", monospace;3048  font-size: 0.75rem;3049  line-height: 1.7;3050  color: var(--peach-t1);3051  outline: none;3052  transition: border-color 150ms ease;3053}30543055.peach-note-textarea:focus {3056  border-color: var(--peach-t2);3057}30583059.peach-note-char-count {3060  font-family: "IBM Plex Mono", monospace;3061  font-size: 0.5625rem;3062  color: var(--peach-t3);3063  text-align: right;3064  margin-top: 4px;3065  letter-spacing: 0.1em;3066}30673068/* ── Field input baseline ── */3069.peach-new-field-input {3070  width: 100%;3071  background: transparent;3072  border: none;3073  border-bottom: 1px solid var(--peach-t3);3074  padding: 4px 0;3075  color: var(--peach-t1);3076  font-family: "IBM Plex Mono", monospace;3077  font-size: 0.8125rem;3078  outline: none;3079  transition: border-color 150ms ease;3080}30813082.peach-new-field-input:focus {3083  border-bottom-color: var(--peach-t0);3084  color: var(--peach-t0);3085}30863087.peach-new-name-input {3088  width: 100%;3089  background: transparent;3090  border: none;3091  border-bottom: 1px solid var(--peach-t3);3092  padding: 6px 0;3093  font-family: var(--font-display);3094  font-style: italic;3095  font-size: 28px;3096  color: var(--peach-t0);3097  outline: none;3098  transition: border-color 150ms ease;3099}31003101.peach-new-name-input:focus {3102  border-bottom-color: var(--peach-t1);3103}31043105.peach-new-name-input::placeholder {3106  color: var(--peach-t2);3107  font-style: italic;3108}31093110.peach-new-field-input::placeholder {3111  color: var(--peach-t3);3112}31133114/* ── Demo entrance animation ── */3115#hd-shell {3116  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3117}3118@keyframes hd-shell-enter {3119  from { opacity: 0; transform: scale(0.96) translateY(16px); }3120  to   { opacity: 1; transform: scale(1) translateY(0); }3121}31223123/* ── Keyframes ── */3124@keyframes peach-char-enter {3125  from { opacity: 0; transform: translateY(0.22em); }3126  to   { opacity: 1; transform: translateY(0); }3127}3128@keyframes peach-content-enter {3129  from { opacity: 0.96; transform: translateY(4px); }3130  to   { opacity: 1; transform: translateY(0); }3131}3132@keyframes peach-content-exit {3133  from { opacity: 1; transform: translateY(0); }3134  to   { opacity: 0.92; transform: translateY(-3px); }3135}3136@keyframes peach-screen-enter {3137  from { opacity: 0; transform: translateY(14px); }3138  to   { opacity: 1; transform: translateY(0); }3139}3140@keyframes peach-shell-fade-in {3141  from { opacity: 0; }3142  to   { opacity: 1; }3143}3144@keyframes peach-veil-in {3145  from { opacity: 0; }3146  to   { opacity: 1; }3147}3148@keyframes peach-lock-settle {3149  0%   { transform: scale(0.9); }3150  65%  { transform: scale(1.08); }3151  100% { transform: scale(1); }3152}3153@keyframes peach-copy-confirm {3154  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3155  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); }3156}3157@keyframes peach-copy-retreat {3158  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); }3159  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3160}3161@keyframes peach-copy-flood {3162  from { opacity: 0; transform: scaleX(0.15); }3163  to   { opacity: 1; transform: scaleX(1); }3164}3165@keyframes peach-copy-icon-settle {3166  from  { transform: scale(0.84); }3167  70%   { transform: scale(1.08); }3168  to    { transform: scale(1); }3169}3170@keyframes peach-copy-sheen-retreat {3171  from { opacity: 1; transform: scaleX(1); }3172  to   { opacity: 0; transform: scaleX(0.15); }3173}3174@keyframes peach-copy-drain {3175  from { width: 100%; }3176  to   { width: 0; }3177}3178@keyframes peach-shake {3179  0%, 100% { transform: translateX(0); }3180  20%      { transform: translateX(-6px); }3181  40%      { transform: translateX(6px); }3182  60%      { transform: translateX(-4px); }3183  80%      { transform: translateX(4px); }3184}31853186@keyframes pip-pulse {3187  0% { transform: scale(1); }3188  40% { transform: scale(2.2); }3189  100% { transform: scale(1); }3190}319131923193/* ── Password generator ── */3194.peach-pwgen-body {3195  flex: 1; overflow-y: auto;3196  display: flex; flex-direction: column;3197}3198.peach-policy-badge {3199  display: flex; align-items: center;3200  padding: 6px 20px 0;3201  font-size: 0.625rem; font-family: Inter, sans-serif;3202  color: var(--peach-t2); letter-spacing: 0.04em;3203}3204.peach-pwgen-display {3205  padding: 14px 20px 12px;3206  border-bottom: 1px solid var(--peach-t3);3207  display: flex; align-items: flex-start; gap: 10px;3208}3209.peach-pwgen-display-row {3210  display: flex;3211  align-items: flex-start;3212  gap: 8px;3213  padding-bottom: 8px;3214  border-bottom: 1px solid var(--peach-t3);3215}3216.peach-pwgen-output {3217  flex: 1; min-width: 0; margin: 0;3218  font-family: "IBM Plex Mono", monospace;3219  font-size: 0.8125rem; color: var(--peach-t0);3220  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3221  white-space: normal;3222  padding: 10px 12px;3223  background: var(--peach-t4);3224  border-radius: 6px;3225  min-height: 36px;3226}3227.peach-pwgen-output-display {3228  flex: 1;3229  min-width: 0;3230  margin: 0;3231  font-family: var(--font-display);3232  font-style: italic;3233  font-weight: 300;3234  font-size: 32px;3235  line-height: 1.05;3236  color: var(--peach-t0);3237  word-break: break-all;3238  overflow-wrap: break-word;3239  white-space: normal;3240  letter-spacing: 0.02em;3241}3242.peach-pwgen-display-actions {3243  display: flex;3244  flex-direction: column;3245  gap: 4px;3246  flex-shrink: 0;3247  margin-top: 2px;3248}3249.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3250.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3251.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3252.peach-pwgen-len-num {3253  font-family: "IBM Plex Mono", monospace;3254  font-size: 0.75rem; color: var(--peach-accent);3255}3256.peach-pwgen-len-num--edit {3257  cursor: text;3258  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3259}3260.peach-pwgen-len-input {3261  font-family: "IBM Plex Mono", monospace;3262  font-size: 0.75rem;3263  color: var(--peach-accent);3264  background: transparent;3265  border: none;3266  border-bottom: 1px solid var(--peach-accent);3267  outline: none;3268  width: 32px;3269  text-align: right;3270  padding: 0;3271}3272.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3273.peach-pwgen-toggles { display: flex; flex-direction: column; }3274.peach-pwgen-charset-pills {3275  display: flex;3276  gap: 6px;3277  flex-wrap: wrap;3278}3279.peach-pwgen-pill {3280  padding: 4px 11px;3281  border-radius: 999px;3282  border: 1px solid var(--peach-t3);3283  background: transparent;3284  color: var(--peach-t2);3285  font-family: "IBM Plex Mono", monospace;3286  font-size: 0.5625rem;3287  letter-spacing: 0.08em;3288  cursor: pointer;3289  transition: all 150ms ease;3290}3291.peach-pwgen-pill.is-on {3292  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3293  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3294  color: var(--peach-accent);3295}3296.peach-pwgen-pill:not(.is-on):hover {3297  color: var(--peach-t1);3298  border-color: var(--peach-t2);3299}3300.peach-pwgen-use-btn {3301  width: 100%;3302  min-height: 34px;3303  border-radius: 8px;3304  margin-top: 2px;3305}3306.peach-generator-constraint-note {3307  font-family: 'IBM Plex Mono', monospace;3308  font-size: 10px;3309  color: var(--peach-t3);3310  letter-spacing: 0.04em;3311  margin: 0;3312  transition: opacity 200ms ease;3313}3314.peach-pwgen-toggle-row {3315  display: flex; align-items: center; justify-content: space-between;3316  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3317}3318.peach-pwgen-toggle-row:last-child { border-bottom: none; }3319.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }33203321.peach-screen-prelock {3322  z-index: 10;3323}33243325.prelock-form {3326  display: grid;3327  gap: 12px;3328}33293330/* Peach popup should not expose native scrollbars on internal panels. */3331.peach-settings-body,3332.peach-new-body,3333.peach-pwgen-body,3334.lock-screen,3335.peach-import-preview {3336  scrollbar-width: none;3337  -ms-overflow-style: none;3338  overscroll-behavior: contain;3339}3340.peach-settings-body::-webkit-scrollbar,3341.peach-new-body::-webkit-scrollbar,3342.peach-pwgen-body::-webkit-scrollbar,3343.lock-screen::-webkit-scrollbar,3344.peach-import-preview::-webkit-scrollbar {3345  width: 0;3346  height: 0;3347  display: none;3348}33493350.lock-screen {3351  height: 100%;3352  min-height: 100%;3353  overflow-y: auto;3354  padding: 18px 18px 16px;3355  gap: 14px;3356  grid-template-rows: auto auto auto 1fr auto;3357  align-content: stretch;3358  position: relative;3359  isolation: isolate;3360}3361.peach-screen.lock-screen--vault-stage {3362  display: flex;3363  flex-direction: column;3364  justify-content: flex-start;3365  gap: 18px;3366  padding: 20px 18px 18px;3367  overflow: hidden;3368}3369.peach-screen.lock-screen--vault-stage .peach-lock-panel {3370  margin-top: 0;3371}3372.lock-screen--onboarding {3373  display: flex;3374  flex-direction: column;3375  gap: 12px;3376  justify-content: flex-start;3377}33783379.lock-screen::before {3380  content: "";3381  position: absolute;3382  inset: 12px 18px auto auto;3383  width: 160px;3384  height: 160px;3385  border-radius: 999px;3386  background:3387    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%);3388  filter: blur(6px);3389  opacity: 0.7;3390  pointer-events: none;3391  z-index: 0;3392}33933394.peach-lock-rune-string {3395  flex: 1;3396  display: flex;3397  align-items: center;3398  justify-content: center;3399  gap: 6px;3400  font-family: PeachScript, monospace;3401  font-size: 0.8125rem;3402  letter-spacing: 0.05em;3403  pointer-events: none;3404  user-select: none;3405  position: relative;3406  z-index: 1;3407}34083409.peach-lock-rune-string span {3410  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3411  text-shadow:3412    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3413    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3414  transition: color 0.9s ease, text-shadow 0.9s ease;3415}34163417.peach-lock-rune-string span.is-glowing {3418  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3419  text-shadow:3420    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3421    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3422}34233424.lock-screen-header {3425  display: flex;3426  align-items: center;3427  justify-content: space-between;3428  position: relative;3429  z-index: 1;3430}34313432.lock-password-input.shake {3433  animation: peach-shake 300ms ease-in-out;3434}34353436.peach-hint-error {3437  color: rgba(220, 80, 60, 0.92);3438}34393440.peach-onboarding-headline {3441  margin: 0;3442  font-family: var(--font-display);3443  font-size: 35px;3444  line-height: 0.88;3445  font-style: italic;3446  font-weight: 400;3447  max-width: 252px;3448}34493450.peach-lock-copy {3451  display: grid;3452  gap: 8px;3453  position: relative;3454  z-index: 1;3455}34563457.peach-lock-copy--onboarding {3458  gap: 10px;3459}34603461.peach-lock-hero {3462  position: relative;3463  z-index: 1;3464  display: grid;3465  gap: 8px;3466  min-height: 0;3467  padding: 4px 2px 0;3468  border: none;3469  border-radius: 0;3470  background: transparent;3471  box-shadow: none;3472}3473.peach-lock-hero-art {3474  position: absolute;3475  right: -8px;3476  top: -6px;3477  width: 120px;3478  height: 120px;3479  display: flex;3480  align-items: center;3481  justify-content: center;3482  pointer-events: none;3483  opacity: 0.12;3484  filter: saturate(0.9);3485}3486.peach-lock-hero-mark {3487  width: 100%;3488  height: 100%;3489}3490/* Peach body stays brand-peach across every accent — we don't want a3491   green or blue peach when sage/sky is selected. Leaf + vein keep the3492   sage tint because a real peach has a sage leaf. In the new brand-kit3493   mark the leaf is path 1 and the vein stroke is path 2; the body and3494   back-lobe (paths 3 + 4) must stay untouched. */3495.peach-lock-hero-mark path:nth-child(1) {3496  fill: rgba(123, 144, 96, 0.88);3497}3498.peach-lock-hero-mark path:nth-child(2) {3499  stroke: rgba(94, 122, 66, 0.95);3500}3501.peach-lock-hero > *:not(.peach-lock-hero-art) {3502  position: relative;3503  z-index: 1;3504}35053506.peach-lock-eyebrow {3507  display: inline-flex;3508  align-items: center;3509  width: fit-content;3510  padding: 4px 9px;3511  border-radius: 999px;3512  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3513  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3514  color: var(--peach-t0);3515  font-family: "IBM Plex Mono", monospace;3516  font-size: 0.5rem;3517  letter-spacing: 0.18em;3518  text-transform: uppercase;3519}35203521.peach-lock-label-row {3522  display: flex;3523  align-items: center;3524  justify-content: space-between;3525  margin-bottom: 0;3526}35273528.peach-lock-reveal-btn {3529  display: inline-flex;3530  align-items: center;3531  gap: 4px;3532  background: none;3533  border: none;3534  cursor: pointer;3535  font-family: "IBM Plex Mono", monospace;3536  font-size: 0.5625rem;3537  letter-spacing: 0.06em;3538  color: var(--peach-t2);3539  padding: 2px 0;3540  transition: color 150ms ease;3541}35423543.peach-lock-reveal-btn:hover {3544  color: var(--peach-t1);3545}35463547.peach-lock-warning {3548  color: rgba(220, 80, 60, 0.85) !important;3549  line-height: 1.5;3550}35513552.peach-onboarding-cards {3553  display: grid;3554  gap: 8px;3555  position: relative;3556  z-index: 1;3557}35583559.peach-lock-panel {3560  position: relative;3561  z-index: 1;3562  display: grid;3563  gap: 9px;3564  padding: 14px 16px 15px;3565  border-radius: 18px;3566  border: 1px solid var(--peach-t3);3567  background:3568    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3569  box-shadow:3570    inset 0 1px 0 rgba(240, 232, 216, 0.04),3571    0 12px 28px rgba(0, 0, 0, 0.12);3572}35733574/* Glass surface — lock panel and settings groups */3575.peach-glass {3576  background: rgba(26, 20, 16, 0.65);3577  border: 1px solid rgba(255, 255, 255, 0.08);3578  border-radius: 12px;3579  backdrop-filter: blur(12px) saturate(1.4);3580  -webkit-backdrop-filter: blur(12px) saturate(1.4);3581}35823583@supports not (backdrop-filter: blur(1px)) {3584  .peach-glass {3585    background: rgba(26, 20, 16, 0.92);3586    border: 1px solid rgba(255, 255, 255, 0.10);3587    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3588  }3589}35903591.light .peach-glass,3592[data-theme="light"] .peach-glass {3593  background: rgba(240, 233, 223, 0.72);3594  border: 1px solid rgba(26, 18, 8, 0.08);3595  backdrop-filter: blur(12px) saturate(1.2);3596  -webkit-backdrop-filter: blur(12px) saturate(1.2);3597}35983599@supports not (backdrop-filter: blur(1px)) {3600  .light .peach-glass,3601  [data-theme="light"] .peach-glass {3602    background: rgba(240, 233, 223, 0.97);3603    border: 1px solid rgba(26, 18, 8, 0.10);3604  }3605}36063607/* Lock panel keeps its own border-radius over the generic glass token */3608.peach-lock-panel.peach-glass {3609  border-radius: 18px;3610  background: rgba(26, 20, 16, 0.65);3611  border: 1px solid rgba(255, 255, 255, 0.08);3612  box-shadow:3613    inset 0 1px 0 rgba(255, 255, 255, 0.05),3614    0 12px 28px rgba(0, 0, 0, 0.3);3615}36163617.light .peach-lock-panel.peach-glass,3618[data-theme="light"] .peach-lock-panel.peach-glass {3619  background: rgba(240, 233, 223, 0.82);3620  border: 1px solid rgba(26, 18, 8, 0.08);3621  box-shadow:3622    inset 0 1px 0 rgba(255, 255, 255, 0.4),3623    0 8px 24px rgba(80, 56, 32, 0.15);3624}36253626@supports not (backdrop-filter: blur(1px)) {3627  .peach-lock-panel.peach-glass {3628    background: rgba(26, 20, 16, 0.92);3629    box-shadow:3630      inset 0 1px 0 rgba(255, 255, 255, 0.05),3631      0 12px 28px rgba(0, 0, 0, 0.4);3632  }3633  .light .peach-lock-panel.peach-glass,3634  [data-theme="light"] .peach-lock-panel.peach-glass {3635    background: rgba(240, 233, 223, 0.98);3636  }3637}36383639.peach-lock-panel--secondary {3640  gap: 12px;3641}36423643.peach-lock-panel-header {3644  display: flex;3645  align-items: baseline;3646  justify-content: space-between;3647  gap: 12px;3648}36493650.peach-lock-option-grid {3651  display: grid;3652  gap: 10px;3653}36543655.peach-lock-option {3656  width: 100%;3657  display: grid;3658  gap: 6px;3659  padding: 14px 15px;3660  border-radius: 16px;3661  border: 1px solid rgba(240, 232, 216, 0.08);3662  background: rgba(240, 232, 216, 0.02);3663  color: var(--peach-t0);3664  text-align: left;3665  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3666}36673668.peach-lock-option:hover {3669  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3670  background: rgba(240, 232, 216, 0.04);3671  transform: translateY(-1px);3672}36733674.peach-lock-option-title {3675  font-size: 0.75rem;3676  color: var(--peach-t0);3677}36783679.peach-lock-option-copy {3680  font-size: 0.6875rem;3681  line-height: 1.55;3682  color: var(--peach-t1);3683}36843685.peach-onboarding-stack {3686  margin-top: 2px;3687}3688.peach-lock-panel-footer {3689  display: grid;3690  gap: 6px;3691  margin-top: 2px;3692  padding-top: 10px;3693  border-top: 1px solid rgba(240, 232, 216, 0.06);3694}36953696/* ── Restore tab view ─────────────────────────────────────────────────────3697   Tab-based restore screen replacing the old three-card picker. */36983699.peach-restore-tabview {3700  overflow: hidden;3701}37023703.peach-restore-tabcard {3704  flex: 1;3705  display: flex;3706  flex-direction: column;3707  gap: 0;3708  padding: 0;3709  overflow: hidden;3710  cursor: default;3711  user-select: none;3712  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3713}37143715/* ── Tab selector ─────────────────────────────────────────────────────── */37163717.peach-restore-tabs {3718  display: flex;3719  justify-content: space-around;3720  padding: 14px 10px 10px;3721  border-bottom: 1px solid var(--peach-t3);3722  gap: 2px;3723  overflow: hidden;3724  scrollbar-width: none;3725}3726.peach-restore-tabs::-webkit-scrollbar { display: none; }37273728.peach-restore-tab {3729  background: none;3730  border: none;3731  cursor: pointer;3732  padding: 3px 2px;3733  font-family: 'Cormorant Garamond', Georgia, serif;3734  font-style: italic;3735  font-size: 11px;3736  color: var(--peach-t2);3737  transition: color 150ms ease, text-shadow 150ms ease;3738  flex: 1;3739  min-width: 0;3740  text-align: center;3741  white-space: nowrap;3742  overflow: hidden;3743  text-overflow: ellipsis;3744}3745.peach-restore-tab:hover {3746  color: var(--peach-accent);3747  text-shadow:3748    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3749    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3750}3751.peach-restore-tab.is-active {3752  color: var(--peach-accent);3753  text-shadow:3754    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3755    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3756}37573758/* ── Content area ─────────────────────────────────────────────────────── */37593760.peach-restore-content {3761  padding: 16px 16px 14px;3762  display: flex;3763  flex-direction: column;3764  gap: 8px;3765  overflow: hidden;3766  scrollbar-width: none;3767  flex: 1;3768}3769.peach-restore-content::-webkit-scrollbar { display: none; }3770.peach-restore-content > * {3771  overflow: hidden;3772  scrollbar-width: none;3773}3774.peach-restore-content > *::-webkit-scrollbar { display: none; }37753776/* ── Shared tab inner layout ──────────────────────────────────────────── */37773778.peach-rt-symbols,3779.peach-rt-csv,3780.peach-rt-phone {3781  display: flex;3782  flex-direction: column;3783  gap: 8px;3784  overflow: hidden;3785}37863787.peach-rt-submit {3788  width: 100%;3789}37903791.peach-rt-error {3792  margin: 0;3793  font-size: 0.6875rem;3794  color: var(--peach-breach);3795  line-height: 1.4;3796}37973798/* ── PeachScript tab ──────────────────────────────────────────────────── */37993800.peach-restore-symbols-textarea {3801  font-family: 'PeachScript', monospace;3802  font-size: 13px;3803  line-height: 1.9;3804  letter-spacing: 0.1em;3805  word-break: break-all;3806  resize: none;3807  width: 100%;3808  min-height: 56px;3809  max-height: 72px;3810  overflow: hidden;3811  scrollbar-width: none;3812  -ms-overflow-style: none;3813  box-sizing: border-box;3814  padding: 6px 8px;3815  border-radius: 8px;3816  border: 1px solid var(--peach-t3);3817  background: rgba(240, 232, 216, 0.03);3818  color: var(--peach-t0);3819}3820.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3821.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }38223823.peach-restore-symbols-pass {3824  width: 100%;3825  box-sizing: border-box;3826  padding: 7px 10px;3827  border-radius: 8px;3828  border: 1px solid var(--peach-t3);3829  background: rgba(240, 232, 216, 0.03);3830  color: var(--peach-t0);3831  font-size: 0.8125rem;3832}3833.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }3834.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }38353836.peach-rt-divider {3837  text-align: center;3838  font-size: 0.6875rem;3839  color: var(--peach-t2);3840  font-style: italic;3841}38423843.peach-rt-file-label {3844  width: 100%;3845  justify-content: center;3846}38473848.peach-rt-anim-canvas {3849  width: 100%;3850  height: 180px;3851  border-radius: 10px;3852  overflow: hidden;3853  display: block;3854}38553856/* ── CSV tab ──────────────────────────────────────────────────────────── */38573858.peach-rt-csv-sources {3859  margin: 0;3860  font-size: 0.6875rem;3861  color: var(--peach-t2);3862  line-height: 1.5;3863  text-align: center;3864}38653866.peach-rt-csv-warning {3867  margin: 0;3868  font-family: "IBM Plex Mono", monospace;3869  font-size: 0.5625rem;3870  letter-spacing: 0.12em;3871  color: var(--peach-breach);3872  text-align: center;3873}38743875/* ── From Phone tab ───────────────────────────────────────────────────── */38763877.peach-rt-phone-code {3878  margin: 0;3879  text-align: center;3880  font-family: "IBM Plex Mono", monospace;3881  font-size: 22px;3882  letter-spacing: 0.18em;3883  color: var(--peach-t0);3884}38853886.peach-rt-phone-qr {3887  display: block;3888  width: 96px;3889  height: 96px;3890  margin: 0 auto;3891  border-radius: 6px;3892  image-rendering: pixelated;3893  overflow: hidden;3894}38953896.peach-rt-phone-hint {3897  margin: 0;3898  font-size: 0.6875rem;3899  color: var(--peach-t2);3900  line-height: 1.55;3901  text-align: center;3902}39033904/* ── Intro popup ──────────────────────────────────────────────────────── */39053906.peach-restore-intro-overlay {3907  position: absolute;3908  inset: 0;3909  z-index: 100;3910  display: flex;3911  align-items: center;3912  justify-content: center;3913  padding: 20px;3914  background: rgba(12, 10, 6, 0.7);3915  backdrop-filter: blur(4px);3916  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;3917}39183919.peach-restore-intro-card {3920  width: 100%;3921  display: flex;3922  flex-direction: column;3923  gap: 12px;3924  padding: 22px 20px 20px;3925  border-radius: 16px;3926  border: 1px solid var(--peach-t3);3927  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));3928  backdrop-filter: blur(4px);3929  -webkit-backdrop-filter: blur(4px);3930  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);3931}39323933.peach-restore-intro-headline {3934  margin: 0;3935  font-family: var(--font-display);3936  font-style: italic;3937  font-size: 20px;3938  font-weight: 400;3939  color: var(--peach-t0);3940}39413942.peach-restore-intro-body {3943  display: flex;3944  flex-direction: column;3945  gap: 8px;3946}3947.peach-restore-intro-body p {3948  margin: 0;3949  font-size: 0.75rem;3950  color: var(--peach-t1);3951  line-height: 1.5;3952}39533954.peach-restore-intro-btn {3955  width: 100%;3956  margin-top: 4px;3957}39583959/* Snapshot restore panel */3960.peach-snapshot-panel {3961  gap: 10px;3962  overflow-y: auto;3963  max-height: 340px;3964}3965.peach-snapshot-list {3966  display: flex;3967  flex-direction: column;3968  gap: 4px;3969}3970.peach-snapshot-row {3971  display: flex;3972  align-items: center;3973  justify-content: space-between;3974  width: 100%;3975  padding: 8px 10px;3976  border-radius: 8px;3977  border: 1px solid rgba(240, 232, 216, 0.07);3978  background: transparent;3979  cursor: pointer;3980  transition: border-color 120ms, background 120ms;3981  text-align: left;3982  gap: 8px;3983}3984.peach-snapshot-row:hover {3985  border-color: rgba(240, 232, 216, 0.14);3986  background: rgba(240, 232, 216, 0.03);3987}3988.peach-snapshot-row.is-selected {3989  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3990  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);3991}3992.peach-snapshot-time {3993  font-size: 11.5px;3994  color: var(--peach-t0);3995  flex: 1;3996}3997.peach-snapshot-count {3998  font-family: "IBM Plex Mono", monospace;3999  font-size: 0.625rem;4000  color: var(--peach-t2);4001  flex-shrink: 0;4002}4003.peach-snapshot-confirm {4004  display: flex;4005  flex-direction: column;4006  gap: 8px;4007  padding-top: 10px;4008  border-top: 1px solid rgba(240, 232, 216, 0.06);4009}4010.peach-snapshot-warning {4011  display: flex;4012  align-items: flex-start;4013  gap: 6px;4014  font-size: 10.5px;4015  color: rgba(220, 80, 60, 0.85);4016  line-height: 1.55;4017}4018.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }4019.peach-snapshot-confirm-row {4020  display: flex;4021  gap: 6px;4022  align-items: center;4023}4024.peach-snapshot-restore-btn {4025  width: 100%;4026}4027.peach-lock-hero--unlock .peach-lock-hero-art {4028  width: 112px;4029  height: 112px;4030  right: 0;4031  top: 2px;4032  opacity: 0.1;4033}40344035.peach-card {4036  border: 1px solid var(--peach-t3);4037  border-radius: 18px;4038  background:4039    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4040  box-shadow:4041    inset 0 0 0 1px var(--peach-border-accent),4042    inset 0 1px 0 rgba(240, 232, 216, 0.04),4043    0 12px 32px rgba(0, 0, 0, 0.14);4044  overflow: hidden;4045}40464047.peach-card-active {4048  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4049  box-shadow:4050    inset 0 1px 0 rgba(240, 232, 216, 0.05),4051    0 16px 38px rgba(0, 0, 0, 0.18),4052    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4053}40544055.peach-card-disabled {4056  opacity: 0.72;4057}40584059.peach-card-header {4060  width: 100%;4061  padding: 13px 16px 11px;4062  background: transparent;4063  color: var(--peach-t0);4064  display: flex;4065  justify-content: space-between;4066  align-items: center;4067  text-align: left;4068  font-size: 0.75rem;4069}40704071.peach-card-body {4072  padding: 0 16px 16px;4073  display: grid;4074  gap: 9px;4075}40764077.peach-card-tag {4078  color: var(--peach-t2);4079  font-family: "IBM Plex Mono", monospace;4080  font-size: 0.5625rem;4081  letter-spacing: 0.12em;4082  text-transform: uppercase;4083}40844085.peach-empty-copy {4086  display: grid;4087  gap: 6px;4088  color: var(--peach-t1);4089  font-size: 0.8125rem;4090}40914092.peach-lock-submit {4093  width: 100%;4094  box-shadow:4095    0 1px 0 rgba(255,255,255,0.10) inset,4096    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4097    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4098    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4099}41004101.peach-lock-secondary {4102  width: 100%;4103  border-color: var(--peach-t3);4104  background: rgba(240, 232, 216, 0.02);4105}41064107.peach-lock-secondary:hover {4108  background: rgba(240, 232, 216, 0.04);4109}41104111.peach-lock-note {4112  max-width: none;4113  line-height: 1.55;4114  margin: 0;4115}41164117.peach-overlay-action {4118  font-size: 0.625rem;4119  padding: 4px 8px;4120  letter-spacing: 0.06em;4121  min-width: 44px;4122  text-align: center;4123}41244125.peach-inline-action {4126  flex-shrink: 0;4127  font-size: 0.5625rem;4128  letter-spacing: 0.1em;4129  text-transform: uppercase;4130  padding: 4px 7px;4131}4132.peach-password-toggle-btn {4133  display: inline-flex;4134  align-items: center;4135  justify-content: center;4136  min-width: 30px;4137  min-height: 26px;4138  padding: 0 7px;4139  border: 1px solid var(--peach-t3);4140  border-radius: 999px;4141  background: rgba(240, 232, 216, 0.04);4142  color: var(--peach-t2);4143  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4144}4145.peach-password-toggle-btn:hover {4146  border-color: var(--peach-t2);4147  color: var(--peach-t0);4148  background: rgba(240, 232, 216, 0.06);4149}41504151.peach-new-textarea {4152  width: 100%;4153  min-height: 88px;4154  resize: vertical;4155  border: 0;4156  outline: none;4157  background: transparent;4158  color: var(--peach-t1);4159  font-family: "IBM Plex Mono", monospace;4160  font-size: 0.75rem;4161  line-height: 1.65;4162  caret-color: var(--peach-accent);4163}41644165.peach-new-textarea::placeholder {4166  color: var(--peach-t2);4167  opacity: 0.7;4168}41694170.peach-settings-actions {4171  display: grid;4172  gap: 8px;4173}41744175.peach-sync-section-label {4176  font-size: 0.6875rem;4177  color: var(--peach-t2);4178  text-transform: uppercase;4179  letter-spacing: 0.05em;4180}41814182.peach-sync-network-note {4183  margin: 0 0 6px;4184  font-size: 0.75rem;4185  color: var(--peach-t2);4186  line-height: 1.4;4187}41884189.peach-settings-row--tappable {4190  background: none;4191  border: none;4192  width: 100%;4193  text-align: left;4194  cursor: pointer;4195  color: var(--peach-t1);4196  font-size: 0.8125rem;4197}4198.peach-settings-row--tappable:hover {4199  color: var(--peach-t0);4200}42014202.peach-sync-pro-hint {4203  display: flex;4204  flex-direction: column;4205  align-items: flex-start;4206  gap: 8px;4207  padding: 12px 0 4px;4208}42094210.peach-sync-device-row {4211  display: flex;4212  justify-content: space-between;4213  align-items: center;4214  padding: 6px 0;4215  border-bottom: 1px solid var(--peach-t3);4216}42174218.peach-sync-device-info {4219  display: flex;4220  flex-direction: column;4221  gap: 2px;4222}42234224.peach-sync-device-name {4225  font-size: 0.8125rem;4226  color: var(--peach-t0);4227}42284229.peach-sync-device-meta {4230  font-size: 0.6875rem;4231  color: var(--peach-t2);4232}42334234.peach-sync-status-dot {4235  display: inline-block;4236  width: 8px;4237  height: 8px;4238  border-radius: 50%;4239  vertical-align: middle;4240}42414242.peach-sync-remove-btn {4243  color: var(--peach-breach);4244}42454246.peach-sync-advanced-row {4247  display: flex;4248  justify-content: space-between;4249  align-items: center;4250  padding: 6px 0;4251  gap: 12px;4252}42534254.peach-sync-advanced-info {4255  display: flex;4256  flex-direction: column;4257  gap: 2px;4258  flex: 1;4259}42604261.peach-sync-advanced-name {4262  font-size: 0.8125rem;4263  color: var(--peach-t0);4264}42654266.peach-sync-reset-confirm {4267  display: flex;4268  flex-direction: column;4269  gap: 8px;4270  padding: 10px;4271  border: 1px solid var(--peach-breach);4272  border-radius: 10px;4273  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4274}42754276.peach-sync-reset-confirm-headline {4277  font-size: 0.8125rem;4278  font-weight: 600;4279  color: var(--peach-t0);4280  margin: 0;4281}42824283.peach-sync-reset-confirm-body {4284  font-size: 0.75rem;4285  color: var(--peach-t1);4286  margin: 0;4287  line-height: 1.4;4288}42894290.peach-btn--danger {4291  background: var(--peach-breach);4292  color: #fff;4293  border-color: var(--peach-breach);4294}4295.peach-btn--danger:hover:not(:disabled) {4296  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4297}4298.peach-btn--danger:disabled {4299  opacity: 0.55;4300  cursor: not-allowed;4301}43024303.peach-sync-hero-icon {4304  color: var(--peach-t1);4305  opacity: 0.85;4306}43074308.peach-import-preview {4309  margin-bottom: 12px;4310  max-height: 152px;4311  overflow-y: auto;4312  border: 1px solid var(--peach-t3);4313  border-radius: 10px;4314  padding: 8px 10px;4315  display: grid;4316  gap: 8px;4317  background: rgba(240, 232, 216, 0.02);4318}43194320.peach-import-preview-row {4321  display: flex;4322  justify-content: space-between;4323  gap: 10px;4324  font-size: 0.6875rem;4325  color: var(--peach-t1);4326}43274328.peach-import-preview-title {4329  color: var(--peach-t0);4330  flex: 1;4331  min-width: 0;4332  overflow: hidden;4333  text-overflow: ellipsis;4334  white-space: nowrap;4335}43364337.peach-import-preview-meta {4338  color: var(--peach-t2);4339  flex-shrink: 0;4340  max-width: 42%;4341  overflow: hidden;4342  text-overflow: ellipsis;4343  white-space: nowrap;4344}43454346.peach-import-preview-more {4347  color: var(--peach-t2);4348  font-size: 0.625rem;4349}43504351.peach-restore-copy {4352  margin: 0;4353  color: var(--peach-t1);4354  font-size: 0.6875rem;4355  line-height: 1.6;4356}43574358.peach-restore-warning {4359  padding: 10px 12px;4360  border-radius: 12px;4361  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4362  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4363  color: var(--peach-t0);4364  font-size: 0.6875rem;4365  line-height: 1.55;4366}43674368.peach-provider-chips {4369  display: flex;4370  flex-wrap: wrap;4371  gap: 6px;4372}43734374.peach-provider-chip {4375  display: inline-flex;4376  align-items: center;4377  padding: 5px 8px;4378  border-radius: 999px;4379  border: 1px solid var(--peach-t3);4380  background: rgba(240, 232, 216, 0.02);4381  color: var(--peach-t1);4382  font-family: "IBM Plex Mono", monospace;4383  font-size: 0.5rem;4384  letter-spacing: 0.08em;4385  text-transform: uppercase;4386}43874388.peach-restore-file,4389.peach-restore-input {4390  width: 100%;4391  border-radius: 10px;4392  border: 1px solid var(--peach-t3);4393  background: var(--peach-s2);4394  color: var(--peach-t0);4395  font-size: 0.75rem;4396}43974398.peach-restore-file {4399  padding: 9px 10px;4400}44014402.peach-restore-file::file-selector-button {4403  margin-right: 10px;4404  padding: 7px 10px;4405  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4406  border-radius: 999px;4407  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4408  color: var(--peach-t0);4409  font-size: 0.625rem;4410  letter-spacing: 0.08em;4411  text-transform: uppercase;4412  cursor: pointer;4413}44144415.peach-restore-input {4416  padding: 10px 12px;4417}44184419.peach-auth-grid {4420  display: grid;4421  gap: 10px;4422}44234424.peach-import-summary {4425  color: var(--peach-t1);4426  font-size: 0.75rem;4427  line-height: 1.6;4428  margin-bottom: 12px;4429}44304431.peach-restore-error {4432  color: rgba(220, 80, 60, 0.95);4433  font-size: 0.75rem;4434  line-height: 1.55;4435}44364437.peach-passkey-card {4438  max-width: 400px;4439  margin: auto 16px;4440  align-self: center;4441  width: calc(100% - 32px);4442}44434444/* Center the approval card vertically inside the overlay-view (which sets4445 * flex-direction: column without justify-content). Without this, the card4446 * sits at the top with a tall empty band below — looks unfinished on the4447 * 320px popup. */4448.peach-overlay-view:has(.peach-passkey-card) {4449  justify-content: center;4450}44514452.peach-pro-badge {4453  padding: 2px 6px;4454  border-radius: 999px;4455  font-family: var(--font-ui);4456  font-size: 0.625rem;4457  letter-spacing: 0.08em;4458  text-transform: uppercase;4459  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4460  color: var(--peach-accent);4461}44624463/* ── Shortcuts rebind table ─────────────────────────────────── */4464.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4465.peach-shortcut-row {4466  display: flex;4467  align-items: center;4468  gap: 10px;4469  padding: 6px 0;4470}4471.peach-shortcut-row-label {4472  flex: 1;4473  font-size: 0.75rem;4474  color: var(--peach-t0);4475}4476.peach-shortcut-chip {4477  min-width: 64px;4478  padding: 4px 10px;4479  border-radius: 6px;4480  border: 1px solid var(--peach-t3);4481  background: var(--peach-input-bg, var(--surface-card));4482  color: var(--peach-t0);4483  font-family: var(--font-mono);4484  font-size: 0.6875rem;4485  letter-spacing: 0.04em;4486  cursor: pointer;4487  text-align: center;4488  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4489}4490.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4491.peach-shortcut-chip.is-custom {4492  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4493  color: var(--peach-accent);4494}4495.peach-shortcut-chip.is-capturing {4496  border-color: var(--peach-accent);4497  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4498  color: var(--peach-accent);4499  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4500}4501@keyframes peach-shortcut-capture-pulse {4502  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4503  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4504}4505.peach-shortcut-reset {4506  background: transparent;4507  border: none;4508  cursor: pointer;4509  color: var(--peach-t2);4510  padding: 4px 6px;4511  border-radius: 5px;4512  font-size: 0.875rem;4513  line-height: 1;4514  transition: color 120ms ease, background 120ms ease;4515}4516.peach-shortcut-reset:hover {4517  color: var(--peach-t0);4518  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4519}4520.peach-shortcuts-conflict {4521  margin: 4px 0 0;4522  padding: 8px 10px;4523  border-radius: 7px;4524  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4525  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4526  font-family: var(--font-mono);4527  font-size: 0.6875rem;4528  color: var(--peach-t0);4529}45304531/* ── Help dialog overlay (? to open) ────────────────────────── */4532.peach-shortcuts-help-backdrop {4533  position: fixed;4534  inset: 0;4535  background: rgba(0, 0, 0, 0.55);4536  backdrop-filter: blur(2px);4537  display: flex;4538  align-items: center;4539  justify-content: center;4540  z-index: 1000;4541  animation: peach-help-fade-in 140ms ease forwards;4542}4543@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4544.peach-shortcuts-help-card {4545  width: min(320px, 92vw);4546  max-height: 80vh;4547  overflow-y: auto;4548  border-radius: 14px;4549  border: 1px solid var(--peach-t3);4550  background: var(--peach-bg);4551  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4552  padding: 16px 18px 18px;4553  display: flex;4554  flex-direction: column;4555  gap: 12px;4556}4557.peach-shortcuts-help-head {4558  display: flex; align-items: center; justify-content: space-between;4559}4560.peach-shortcuts-help-head h3 {4561  margin: 0;4562  font-family: var(--font-display);4563  font-style: italic;4564  font-weight: 400;4565  font-size: 22px;4566  color: var(--peach-t0);4567}4568.peach-shortcuts-help-close {4569  background: transparent;4570  border: none;4571  color: var(--peach-t2);4572  cursor: pointer;4573  font-size: 0.875rem;4574  padding: 4px 8px;4575  border-radius: 5px;4576}4577.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4578.peach-shortcuts-help-body ul {4579  list-style: none; padding: 0; margin: 4px 0 12px;4580  display: grid; gap: 8px;4581}4582.peach-shortcuts-help-body li {4583  display: flex; align-items: center; justify-content: space-between; gap: 12px;4584  font-size: 0.75rem; color: var(--peach-t0);4585}4586.peach-shortcuts-help-body kbd {4587  font-family: var(--font-mono);4588  font-size: 0.6875rem;4589  padding: 3px 8px;4590  border-radius: 6px;4591  background: var(--surface-card);4592  border: 1px solid var(--peach-t3);4593  color: var(--peach-accent);4594  letter-spacing: 0.04em;4595}45964597/* ── Pro promo on Account screen ────────────────────────────── */4598.peach-pro-promo {4599  position: relative;4600  border-radius: 14px;4601  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4602  background:4603    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4604    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4605    var(--surface-card);4606  overflow: hidden;4607  margin-bottom: 14px;4608}4609.peach-pro-promo-glow {4610  position: absolute;4611  inset: -40% -20% auto auto;4612  width: 220px; height: 220px;4613  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4614  pointer-events: none;4615  filter: blur(8px);4616}4617.peach-pro-promo-inner {4618  position: relative;4619  padding: 18px 18px 16px;4620}4621.peach-pro-promo-title {4622  font-family: var(--font-display);4623  font-style: italic;4624  font-weight: 400;4625  font-size: 28px;4626  line-height: 1;4627  letter-spacing: -0.005em;4628  color: var(--peach-t0);4629  margin: 0 0 4px;4630}4631.peach-pro-promo-tagline {4632  font-family: var(--font-mono);4633  font-size: 0.625rem;4634  letter-spacing: 0.06em;4635  color: var(--peach-t2);4636  margin: 0 0 14px;4637}4638.peach-pro-promo-list {4639  list-style: none;4640  margin: 0 0 16px;4641  padding: 0;4642  display: grid;4643  gap: 9px;4644}4645.peach-pro-promo-list li {4646  display: flex;4647  align-items: flex-start;4648  gap: 9px;4649  font-size: 0.75rem;4650  color: var(--peach-t1);4651  line-height: 1.4;4652}4653.peach-pro-promo-list svg {4654  width: 14px;4655  height: 14px;4656  flex-shrink: 0;4657  color: var(--peach-accent);4658  margin-top: 2px;4659}4660.peach-pro-promo-list span {4661  color: var(--peach-t0);4662}4663.peach-pro-promo-cta {4664  width: 100%;4665  background: var(--peach-accent);4666  color: #fff;4667  border: none;4668  padding: 9px 12px;4669  border-radius: 9px;4670  font-size: 0.75rem;4671  font-weight: 500;4672  font-family: var(--font-ui);4673  letter-spacing: 0.02em;4674  text-decoration: none;4675  display: inline-flex;4676  align-items: center;4677  justify-content: center;4678  cursor: pointer;4679  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4680  box-shadow: 0 2px 16px var(--peach-glow);4681}4682.peach-pro-promo-cta:hover {4683  filter: brightness(1.07);4684  box-shadow: 0 4px 24px var(--peach-glow);4685  transform: translateY(-1px);4686}4687.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }46884689.peach-pro-or-divider {4690  display: flex;4691  align-items: center;4692  gap: 10px;4693  margin: 4px 0 12px;4694  font-family: var(--font-mono);4695  font-size: 0.625rem;4696  letter-spacing: 0.06em;4697  color: var(--peach-t2);4698  text-transform: uppercase;4699}4700.peach-pro-or-divider::before,4701.peach-pro-or-divider::after {4702  content: "";4703  flex: 1;4704  height: 1px;4705  background: var(--peach-t3);4706}47074708.peach-loading {4709  position: absolute;4710  inset: 0;4711  display: flex;4712  align-items: center;4713  justify-content: center;4714  background: var(--bg);4715  animation: peach-loading-pulse 1.2s ease-in-out infinite;4716}47174718@keyframes peach-loading-pulse {4719  0%, 100% { opacity: 0.6; }4720  50% { opacity: 1; }4721}47224723/* ── Health Dashboard ─────────────────────────────────────────────────── */4724.peach-health-body {4725  flex: 1;4726  overflow-y: auto;4727  display: flex;4728  flex-direction: column;4729  /* Hide the platform scrollbar — every other scrollable surface in the4730   * popup hides it; the Health view was the one outlier and it ruined the4731   * polish. Behavior unchanged, just no rail rendered. */4732  scrollbar-width: none;4733  -ms-overflow-style: none;4734}4735.peach-health-body::-webkit-scrollbar { display: none; }47364737/* Loading screen for the Vault Health view. The advanced report computation4738 * can run for a few seconds on a large vault — without a clear loading4739 * screen the surface looked broken (the entry view bleeds through the4740 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4741.peach-health-loading-screen {4742  flex: 1;4743  display: flex;4744  flex-direction: column;4745  align-items: center;4746  justify-content: center;4747  gap: 14px;4748  padding: 32px 28px;4749  text-align: center;4750}47514752.peach-health-loading-glyph {4753  width: 48px;4754  height: 48px;4755  display: flex;4756  align-items: center;4757  justify-content: center;4758  border-radius: 14px;4759  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4760  color: var(--peach-accent);4761}47624763.peach-health-loading-title {4764  margin: 0;4765  font-family: var(--font-display);4766  font-style: italic;4767  font-weight: 300;4768  font-size: 19px;4769  line-height: 1.2;4770  color: var(--peach-t0);4771}47724773.peach-health-loading-copy {4774  margin: 0;4775  max-width: 240px;4776  font-size: 0.75rem;4777  line-height: 1.55;4778  color: var(--peach-t2);4779}47804781.peach-health-loading-track {4782  width: 200px;4783  height: 3px;4784  margin-top: 6px;4785  border-radius: 999px;4786  background: rgba(240, 232, 216, 0.06);4787  overflow: hidden;4788}47894790.peach-health-loading-fill {4791  width: 40%;4792  height: 100%;4793  border-radius: inherit;4794  background: linear-gradient(4795    90deg,4796    transparent 0%,4797    var(--peach-accent) 50%,4798    transparent 100%4799  );4800  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4801}48024803@keyframes peach-health-loading-sweep {4804  0%   { transform: translateX(-100%); }4805  100% { transform: translateX(350%); }4806}48074808[data-motion="reduce"] .peach-health-loading-fill,4809[data-motion="reduce"] .peach-health-loading-glyph svg path {4810  animation: none;4811}48124813.peach-health-summary {4814  padding: 10px 16px 6px;4815  font-family: "IBM Plex Mono", monospace;4816  font-size: 0.6875rem;4817}4818.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4819.peach-health-summary-ok { color: var(--peach-t2); }48204821.peach-health-check-row {4822  padding: 0 16px 10px;4823}4824.peach-health-check-btn {4825  width: 100%;4826  display: flex;4827  align-items: center;4828  justify-content: center;4829}48304831.peach-health-sections {4832  flex: 1;4833  display: flex;4834  flex-direction: column;4835}48364837.peach-health-section {4838  border-bottom: 1px solid var(--peach-t3);4839}48404841.peach-health-section-header {4842  width: 100%;4843  display: flex;4844  align-items: center;4845  justify-content: space-between;4846  padding: 9px 16px;4847  background: transparent;4848  cursor: pointer;4849  color: var(--peach-t0);4850}48514852.peach-health-section-title-row {4853  display: flex;4854  align-items: center;4855  gap: 8px;4856}48574858.peach-health-count-badge {4859  display: inline-flex;4860  align-items: center;4861  justify-content: center;4862  min-width: 20px;4863  height: 18px;4864  padding: 0 5px;4865  border-radius: 999px;4866  background: rgba(220,80,60,0.15);4867  border: 1px solid rgba(220,80,60,0.25);4868  font-family: "IBM Plex Mono", monospace;4869  font-size: 0.5625rem;4870  color: rgba(220,80,60,0.9);4871}48724873.peach-health-section-title {4874  font-family: "IBM Plex Mono", monospace;4875  font-size: 0.6875rem;4876  text-transform: uppercase;4877  letter-spacing: 0.1em;4878  color: var(--peach-t1);4879}48804881.peach-health-chevron {4882  color: var(--peach-t2);4883  transition: transform 200ms ease;4884  flex-shrink: 0;4885}4886.peach-health-chevron.is-expanded {4887  transform: rotate(180deg);4888}48894890.peach-health-section-body {4891  padding: 0 16px 10px;4892  display: flex;4893  flex-direction: column;4894  gap: 4px;4895}48964897.peach-health-row {4898  display: flex;4899  align-items: flex-start;4900  justify-content: space-between;4901  gap: 8px;4902  padding: 6px 8px;4903  border-radius: 8px;4904  background: rgba(240,232,216,0.02);4905}49064907.peach-health-row-info {4908  flex: 1;4909  min-width: 0;4910  display: flex;4911  flex-direction: column;4912  gap: 2px;4913}49144915.peach-health-row-name {4916  font-family: var(--font-display);4917  font-size: 0.9375rem;4918  font-style: italic;4919  font-weight: 400;4920  color: var(--peach-t0);4921  white-space: nowrap;4922  overflow: hidden;4923  text-overflow: ellipsis;4924}49254926.peach-health-row-meta {4927  font-family: "IBM Plex Mono", monospace;4928  font-size: 0.5625rem;4929  color: var(--peach-t2);4930  letter-spacing: 0.05em;4931}49324933.peach-health-fix-btn {4934  font-size: 0.5625rem;4935  letter-spacing: 0.08em;4936  text-transform: uppercase;4937  padding: 4px 7px;4938  flex-shrink: 0;4939  display: flex;4940  align-items: center;4941}49424943.peach-health-empty {4944  font-family: "IBM Plex Mono", monospace;4945  font-size: 0.625rem;4946  color: var(--peach-t2);4947  padding: 6px 0;4948}49494950.peach-health-loading {4951  font-family: "IBM Plex Mono", monospace;4952  font-size: 0.625rem;4953  color: var(--peach-t2);4954  padding: 6px 0;4955  display: flex;4956  align-items: center;4957  gap: 6px;4958}49594960.peach-health-loading::before {4961  content: "";4962  width: 10px;4963  height: 10px;4964  border: 1.5px solid var(--peach-t3);4965  border-top-color: var(--peach-accent);4966  border-radius: 50%;4967  animation: peach-spin 600ms linear infinite;4968}49694970@keyframes peach-spin {4971  to { transform: rotate(360deg); }4972}49734974.peach-spinner {4975  width: 32px;4976  height: 32px;4977  border: 2px solid var(--peach-s2);4978  border-top-color: var(--peach-accent);4979  border-radius: 50%;4980  margin: 0 auto 16px;4981  animation: peach-spin 0.8s linear infinite;4982}49834984.peach-progress-screen {4985  text-align: center;4986  padding: 32px 16px;4987}49884989.peach-progress-screen-title {4990  font-size: 0.8125rem;4991  color: var(--peach-t0);4992  margin-bottom: 16px;4993}49944995.peach-progress-screen-stage {4996  font-size: 0.6875rem;4997  color: var(--peach-t2);4998  min-height: 14px;4999}50005001.peach-progress-screen-note {5002  font-size: 0.625rem;5003  color: var(--peach-t2);5004  margin-top: 8px;5005}50065007.peach-pairing-body {5008  flex: 1;5009  overflow-y: auto;5010  display: flex;5011  flex-direction: column;5012}50135014.peach-pairing-content {5015  flex: 1;5016  display: flex;5017  flex-direction: column;5018  align-items: center;5019  justify-content: center;5020  gap: 14px;5021  padding: 28px 20px;5022  text-align: center;5023}50245025.peach-pairing-code-screen {5026  gap: 18px;5027}50285029.peach-pairing-headline {5030  font-family: var(--font-display);5031  font-style: italic;5032  font-weight: 300;5033  font-size: 28px;5034  color: var(--peach-t0);5035  margin: 0;5036  line-height: 1;5037}50385039.peach-pairing-subline {5040  font-size: 0.75rem;5041  color: var(--peach-t2);5042  max-width: 220px;5043  line-height: 1.5;5044  margin: 0;5045}50465047.peach-pairing-subline--center {5048  text-align: center;5049}50505051/* 6-digit pairing code — both display (.peach-pairing-code) and entry5052   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking5053   so the two modes feel like the same surface. */5054.peach-pairing-code {5055  font-family: "IBM Plex Mono", monospace;5056  font-size: 36px;5057  letter-spacing: 0.25em;5058  color: var(--peach-t0);5059  text-align: center;5060  padding: 24px 0;5061  text-shadow:5062    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),5063    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);5064  background: transparent;5065  border: 0;5066  cursor: default;5067  user-select: text;5068}50695070.peach-pairing-code--loading,5071.peach-pairing-code--expired {5072  font-size: 18px;5073  letter-spacing: 0.04em;5074  color: var(--peach-t2);5075  cursor: pointer;5076  text-shadow: none;5077}50785079.peach-pairing-qr-container {5080  display: flex;5081  flex-direction: column;5082  align-items: center;5083  gap: 10px;5084}50855086.peach-pairing-qr {5087  width: 240px;5088  height: 240px;5089  display: block;5090}50915092.peach-pairing-instruction {5093  font-size: 0.75rem;5094  color: var(--peach-t2);5095  text-align: center;5096  line-height: 1.5;5097  margin: 0;5098  max-width: 220px;5099}51005101.peach-pairing-expiry {5102  font-family: "IBM Plex Mono", monospace;5103  font-size: 13px;5104  letter-spacing: 0.06em;5105  color: var(--peach-t2);5106  margin: 0;5107}51085109.peach-pairing-regen {5110  font-size: 0.75rem;5111  color: var(--peach-accent);5112  background: transparent;5113  border: 0;5114  cursor: pointer;5115  padding: 4px 0;5116  text-decoration: underline;5117  text-underline-offset: 2px;5118}51195120.peach-pairing-code-input {5121  font-family: "IBM Plex Mono", monospace;5122  font-size: 36px;5123  letter-spacing: 0.25em;5124  color: var(--peach-t0);5125  background: transparent;5126  border: 0;5127  border-bottom: 1px solid var(--peach-t3);5128  outline: none;5129  text-align: center;5130  padding: 18px 0;5131  width: 220px;5132  caret-color: var(--peach-accent);5133  transition: border-color 160ms ease;5134}51355136.peach-pairing-code-input::placeholder {5137  color: var(--peach-t3);5138}51395140.peach-pairing-code-input:focus {5141  border-bottom-color: var(--peach-accent);5142}51435144.peach-pairing-toggle {5145  background: transparent;5146  border: 0;5147  color: var(--peach-t2);5148  font-size: 0.75rem;5149  padding: 8px 4px;5150  cursor: pointer;5151  transition: color 120ms ease;5152}51535154.peach-pairing-toggle:hover:not(:disabled) {5155  color: var(--peach-t1);5156}51575158.peach-pairing-toggle:disabled {5159  opacity: 0.5;5160  cursor: default;5161}51625163.peach-pairing-hint {5164  font-size: 0.6875rem;5165  color: var(--peach-t2);5166  margin: 0;5167  text-align: center;5168}51695170.peach-pairing-status {5171  display: flex;5172  align-items: center;5173  gap: 8px;5174  margin: 0;5175  font-size: 0.75rem;5176  color: var(--peach-t1);5177}51785179.peach-pairing-error {5180  margin: 0;5181  font-size: 0.6875rem;5182  color: var(--peach-breach);5183}51845185.peach-pairing-error--muted {5186  color: var(--peach-t2);5187}51885189.peach-pairing-spinner {5190  width: 12px;5191  height: 12px;5192  border: 1.5px solid var(--peach-t3);5193  border-top-color: var(--peach-accent);5194  border-radius: 50%;5195  animation: peach-spin 0.8s linear infinite;5196}51975198.peach-pairing-success-icon,5199.peach-pairing-error-icon,5200.peach-pairing-hero {5201  display: inline-flex;5202  align-items: center;5203  justify-content: center;5204}52055206/* Tag chips */5207.peach-tag-chip {5208  display: inline-flex;5209  align-items: center;5210  gap: 4px;5211  padding: 3px 8px;5212  border-radius: 999px;5213  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5214  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5215  color: var(--peach-t0);5216  font-family: "IBM Plex Mono", monospace;5217  font-size: 0.625rem;5218  letter-spacing: 0.04em;5219}52205221.peach-tag-chip-remove {5222  background: transparent;5223  border: none;5224  color: inherit;5225  opacity: 0.6;5226  cursor: pointer;5227  padding: 0;5228  font-size: 0.75rem;5229  line-height: 1;5230}52315232.peach-tag-chip-remove:hover {5233  opacity: 1;5234}52355236/* Tag input */5237.peach-tag-input-wrap {5238  border-bottom: 1px solid var(--peach-t3);5239}52405241.peach-tag-suggestions {5242  display: flex;5243  flex-wrap: wrap;5244  gap: 4px;5245  padding: 6px 0;5246}52475248.peach-tag-suggestion {5249  padding: 2px 8px;5250  border-radius: 999px;5251  border: 1px solid var(--peach-t3);5252  background: var(--peach-s2);5253  color: var(--peach-t1);5254  font-family: "IBM Plex Mono", monospace;5255  font-size: 0.625rem;5256  cursor: pointer;5257  transition: border-color 80ms ease, background 80ms ease;5258}52595260.peach-tag-suggestion:hover {5261  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5262  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5263}52645265/* Identity suggestions — shown below username/email inputs in new-entry form */5266@keyframes peach-suggest-in {5267  from { opacity: 0; transform: translateY(-4px); }5268  to   { opacity: 1; transform: none; }5269}52705271.peach-identity-suggestions {5272  display: flex;5273  flex-direction: column;5274  gap: 1px;5275  margin-top: 4px;5276  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5277}52785279.peach-identity-filter-row {5280  display: flex;5281  align-items: center;5282  gap: 4px;5283  padding: 2px 0 5px;5284}52855286.peach-identity-collapse-btn {5287  margin-left: auto;5288  background: transparent;5289  border: none;5290  cursor: pointer;5291  color: var(--peach-t3);5292  padding: 2px 4px;5293  display: flex;5294  align-items: center;5295  line-height: 0;5296  border-radius: 3px;5297  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5298}52995300.peach-identity-collapse-btn:hover {5301  color: var(--peach-t1);5302}53035304.peach-identity-collapse-btn.is-collapsed {5305  transform: rotate(-90deg);5306}53075308.peach-identity-rows {5309  display: grid;5310  grid-template-rows: 1fr;5311  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5312}53135314.peach-identity-rows.is-collapsed {5315  grid-template-rows: 0fr;5316}53175318.peach-identity-rows-inner {5319  overflow-y: auto;5320  min-height: 0;5321  max-height: 148px;5322  scrollbar-width: thin;5323  scrollbar-color: var(--peach-t3) transparent;5324  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5325  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5326}53275328.peach-identity-rows-inner::-webkit-scrollbar {5329  width: 4px;5330}53315332.peach-identity-rows-inner::-webkit-scrollbar-track {5333  background: transparent;5334}53355336.peach-identity-rows-inner::-webkit-scrollbar-thumb {5337  background: var(--peach-t3);5338  border-radius: 2px;5339}53405341.peach-identity-filter-pill {5342  padding: 2px 7px;5343  border-radius: 999px;5344  border: 1px solid var(--peach-t3);5345  background: transparent;5346  color: var(--peach-t2);5347  font-family: "IBM Plex Mono", monospace;5348  font-size: 0.6rem;5349  cursor: pointer;5350  transition: border-color 80ms, background 80ms, color 80ms;5351}53525353.peach-identity-filter-pill.is-on {5354  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5355  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5356  color: var(--peach-accent);5357}53585359.peach-identity-suggestion {5360  display: flex;5361  align-items: center;5362  gap: 6px;5363  width: 100%;5364  padding: 4px 6px;5365  border-radius: 5px;5366  border: none;5367  background: transparent;5368  cursor: pointer;5369  text-align: left;5370  transition: background 80ms ease;5371}53725373.peach-identity-suggestion:hover,5374.peach-identity-suggestion:focus {5375  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5376  outline: none;5377}53785379.peach-identity-suggestion-value {5380  font-family: "IBM Plex Mono", monospace;5381  font-size: 0.7rem;5382  color: var(--peach-t1);5383  overflow: hidden;5384  text-overflow: ellipsis;5385  white-space: nowrap;5386  flex: 1;5387  min-width: 0;5388}53895390.peach-identity-suggestion-type {5391  font-family: "IBM Plex Mono", monospace;5392  font-size: 0.55rem;5393  font-weight: 600;5394  flex-shrink: 0;5395  padding: 1px 4px;5396  border-radius: 3px;5397}53985399.peach-identity-suggestion-type--email {5400  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5401  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5402}54035404.peach-identity-suggestion-type--username {5405  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5406  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5407}54085409.peach-identity-suggestion-meta {5410  font-family: "IBM Plex Mono", monospace;5411  font-size: 0.6rem;5412  color: var(--peach-t3);5413  flex-shrink: 0;5414}54155416/* Tag filter strip */5417.peach-tag-filter-strip {5418  border-bottom: 1px solid var(--peach-t3);5419  flex-shrink: 0;5420}54215422.peach-tag-filter-chip {5423  display: inline-flex;5424  align-items: center;5425  padding: 4px 10px;5426  border-radius: 999px;5427  border: 1px solid var(--peach-t3);5428  background: transparent;5429  color: var(--peach-t2);5430  font-family: "IBM Plex Mono", monospace;5431  font-size: 0.5625rem;5432  letter-spacing: 0.06em;5433  text-transform: uppercase;5434  cursor: pointer;5435  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5436  white-space: nowrap;5437}54385439.peach-tag-filter-chip:hover {5440  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5441  color: var(--peach-t1);5442}54435444.peach-tag-filter-chip.is-selected {5445  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5446  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5447  color: var(--peach-t0);5448}54495450/* ─────────────────────────────────────────────────────────────────────────5451   v1.4.12 additions5452   ─────────────────────────────────────────────────────────────────────── */54535454/* Sort bar */5455.peach-sort-bar {5456  display: flex;5457  align-items: center;5458  gap: 4px;5459  padding: 5px 12px;5460  border-bottom: 1px solid var(--peach-t3);5461  flex-shrink: 0;5462  overflow-x: auto;5463  scrollbar-width: none;5464}54655466.peach-sort-btn {5467  padding: 2px 9px;5468  border-radius: 999px;5469  border: 1px solid transparent;5470  background: transparent;5471  color: var(--peach-t2);5472  font-family: "IBM Plex Mono", monospace;5473  font-size: 0.5625rem;5474  letter-spacing: 0.07em;5475  text-transform: uppercase;5476  cursor: pointer;5477  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5478  white-space: nowrap;5479}54805481.peach-sort-btn:hover {5482  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5483  color: var(--peach-t1);5484}54855486.peach-sort-btn.is-active {5487  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5488  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5489  color: var(--peach-t0);5490}54915492.peach-sort-domain-hint {5493  margin-left: auto;5494  font-family: "IBM Plex Mono", monospace;5495  font-size: 0.5625rem;5496  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5497  white-space: nowrap;5498  overflow: hidden;5499  text-overflow: ellipsis;5500  max-width: 110px;5501}55025503/* Tab-match badge on entry rows */5504.peach-tab-match-badge {5505  display: inline-block;5506  width: 6px;5507  height: 6px;5508  border-radius: 50%;5509  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5510  margin-left: 5px;5511  vertical-align: middle;5512  flex-shrink: 0;5513  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5514}55155516.peach-entry-row.is-tab-match {5517  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5518  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5519}55205521.peach-entry-row.is-tab-match:hover {5522  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5523}55245525/* Entry list stagger entrance */5526@keyframes peach-entry-fadein {5527  from { opacity: 0; transform: translateY(4px); }5528  to   { opacity: 1; transform: translateY(0); }5529}55305531.peach-vault-list .peach-entry-row {5532  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5533}55345535/* Button press micro-interaction */5536.peach-btn:active {5537  transform: scale(0.95);5538  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5539}55405541.peach-sort-btn:active,5542.peach-tag-filter-chip:active {5543  transform: scale(0.93);5544  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5545}55465547/* Password strength bar (Lock view + shared) */5548.peach-password-strength {5549  display: flex;5550  align-items: center;5551  gap: 8px;5552  margin-top: 6px;5553}55545555.peach-strength-bar {5556  flex: 1;5557  height: 3px;5558  border-radius: 2px;5559  background: var(--peach-t3);5560  overflow: hidden;5561}55625563.peach-strength-fill {5564  height: 100%;5565  border-radius: 2px;5566  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5567              background 300ms ease;5568}55695570.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5571.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5572.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5573.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }55745575.peach-strength-label {5576  font-family: "IBM Plex Mono", monospace;5577  font-style: italic;5578  font-size: 0.5625rem;5579  font-weight: 300;5580  letter-spacing: 0.06em;5581  color: var(--peach-t2);5582  min-width: 36px;5583  text-align: right;5584}55855586.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5587.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5588.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5589.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }55905591/* Duress form */5592.peach-duress-status {5593  padding: 2px 8px;5594  border-radius: 999px;5595  border: 1px solid var(--peach-t3);5596  font-family: "IBM Plex Mono", monospace;5597  font-size: 0.5625rem;5598  letter-spacing: 0.07em;5599  text-transform: uppercase;5600  color: var(--peach-t2);5601  flex-shrink: 0;5602}56035604.peach-duress-status.is-active {5605  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5606  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5607  color: var(--peach-t0);5608}56095610.peach-duress-form {5611  padding: 8px 0 4px;5612  display: flex;5613  flex-direction: column;5614  gap: 6px;5615}56165617.peach-duress-form .peach-label {5618  margin-top: 4px;5619}56205621.peach-duress-actions {5622  display: flex;5623  gap: 6px;5624  align-items: center;5625  margin-top: 4px;5626}56275628.peach-duress-actions .peach-btn:first-child {5629  margin-right: auto;5630}56315632/* Improved overlay spring entrance */5633.peach-overlay-view.ov-enter-up {5634  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5635}56365637@keyframes ov-enter-up-spring {5638  from { opacity: 0; transform: translateY(16px) scale(0.98); }5639  to   { opacity: 1; transform: translateY(0) scale(1); }5640}56415642.peach-overlay-view.ov-enter-right {5643  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5644}56455646@keyframes ov-enter-right-spring {5647  from { opacity: 0; transform: translateX(18px) scale(0.98); }5648  to   { opacity: 1; transform: translateX(0) scale(1); }5649}56505651/* ── Onboarding-mode restore screens (file import) ── */5652/* Used when MainImportView renders during onboarding (no vault yet).5653   Animates like a lock-screen transition. */5654.peach-lock-view {5655  position: absolute;5656  inset: 0;5657  display: flex;5658  flex-direction: column;5659  background:5660    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5661    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5662    var(--peach-bg);5663  z-index: 2;5664  overflow: hidden;5665  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5666}56675668.peach-lock-view-header {5669  display: flex;5670  align-items: center;5671  justify-content: space-between;5672  padding: 16px 18px 12px;5673  flex-shrink: 0;5674}56755676/* ───────── Settings: auto-lock select ───────── */5677.peach-settings-select {5678  font-family: "IBM Plex Mono", monospace;5679  font-size: 0.6875rem;5680  background: transparent;5681  border: 1px solid var(--peach-t3);5682  border-radius: 4px;5683  color: var(--peach-t1);5684  padding: 3px 6px;5685  cursor: pointer;5686  outline: none;5687}5688.peach-settings-select:focus {5689  border-color: var(--peach-accent);5690}56915692/* ───────── Duress status pill (new polished) ───────── */5693.peach-duress-status-pill {5694  font-family: "IBM Plex Mono", monospace;5695  font-size: 0.5625rem;5696  text-transform: uppercase;5697  letter-spacing: 0.12em;5698  padding: 2px 8px;5699  border-radius: 12px;5700  background: var(--peach-t3);5701  color: var(--peach-t2);5702  flex-shrink: 0;5703}5704.peach-duress-status-pill.is-active {5705  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5706  color: var(--peach-accent);5707}57085709/* ───────── Entry advanced disclosure (canary) ───────── */5710.peach-entry-advanced {5711  margin-top: 12px;5712  border-top: 1px solid var(--peach-t3);5713  padding-top: 10px;5714  position: relative;5715  z-index: 1;5716}5717.peach-entry-advanced-toggle {5718  display: flex;5719  align-items: center;5720  justify-content: space-between;5721  width: 100%;5722  background: transparent;5723  border: none;5724  cursor: pointer;5725  padding: 0;5726  color: var(--peach-t2);5727}5728.peach-canary-section {5729  margin-top: 10px;5730  display: grid;5731  gap: 6px;5732}57335734/* ───────── Import: merge/replace radio choices ───────── */5735.peach-import-choice {5736  display: flex;5737  align-items: flex-start;5738  gap: 10px;5739  padding: 8px 10px;5740  border: 1px solid var(--peach-t3);5741  border-radius: 10px;5742  cursor: pointer;5743  margin-bottom: 6px;5744  transition: border-color 120ms ease, background 120ms ease;5745}5746.peach-import-choice:hover {5747  border-color: var(--peach-accent);5748}5749.peach-import-choice input[type="radio"] {5750  margin-top: 3px;5751  accent-color: var(--peach-accent);5752  flex-shrink: 0;5753}5754.peach-import-choice-main {5755  display: flex;5756  flex-direction: column;5757  gap: 2px;5758  min-width: 0;5759}5760.peach-import-choice-label {5761  font-size: 0.75rem;5762  color: var(--peach-t0);5763}5764.peach-import-choice-sub {5765  font-size: 0.6875rem;5766  color: var(--peach-t2);5767  line-height: 1.5;5768}57695770/* ───────── Export: success confirmation strip ───────── */5771.peach-export-success {5772  display: flex;5773  align-items: flex-start;5774  gap: 10px;5775  padding: 12px;5776  border-radius: 12px;5777  border: 1px solid rgba(150, 175, 110, 0.3);5778  background: rgba(150, 175, 110, 0.08);5779  color: var(--peach-t0);5780  font-size: 0.75rem;5781  line-height: 1.55;5782}5783.peach-export-success-check {5784  color: rgba(150, 175, 110, 0.9);5785  font-size: 0.875rem;5786  flex-shrink: 0;5787}57885789/* ── Trash view ──────────────────────────────────────────────────────── */5790.peach-trash-entry-row {5791  display: flex;5792  align-items: center;5793  justify-content: space-between;5794  gap: 8px;5795  padding: 8px 0;5796  border-bottom: 1px solid var(--peach-border);5797}5798.peach-trash-entry-info {5799  flex: 1;5800  min-width: 0;5801  display: flex;5802  flex-direction: column;5803  gap: 2px;5804}5805.peach-trash-entry-title {5806  font-size: 0.8125rem;5807  color: var(--peach-t0);5808  overflow: hidden;5809  text-overflow: ellipsis;5810  white-space: nowrap;5811}5812.peach-trash-entry-meta {5813  font-family: var(--font-mono);5814  font-size: 0.5625rem;5815  color: var(--peach-t2);5816  letter-spacing: 0.04em;5817}5818.peach-trash-entry-actions {5819  display: flex;5820  align-items: center;5821  gap: 4px;5822  flex-shrink: 0;5823}5824.peach-trash-delete-btn {5825  background: transparent;5826  border: 0;5827  color: var(--peach-t3);5828  font-size: 1rem;5829  line-height: 1;5830  cursor: pointer;5831  padding: 2px 5px;5832  transition: color 0.15s;5833}5834.peach-trash-delete-btn:hover { color: var(--peach-breach); }5835.peach-trash-list {5836  overflow-y: auto;5837}5838.peach-trash-footer {5839  display: flex;5840  align-items: center;5841  gap: 8px;5842  padding: 8px 0 0;5843  border-top: 1px solid var(--peach-border);5844  margin-top: 4px;5845}5846.peach-trash-purge-all {5847  background: transparent;5848  border: 0;5849  color: var(--peach-t3);5850  font-size: 0.625rem;5851  cursor: pointer;5852  padding: 4px 0;5853  letter-spacing: 0.03em;5854  transition: color 0.2s;5855}5856.peach-trash-purge-all:hover { color: var(--peach-breach); }5857.peach-trash-purge-confirm-label {5858  font-size: 0.625rem;5859  color: var(--peach-t1);5860  flex: 1;5861}58625863/* ── Settings shortcuts grid ─────────────────────────────────────────── */5864.peach-shortcuts-grid {5865  display: grid;5866  grid-template-columns: auto 1fr;5867  gap: 6px 12px;5868  align-items: center;5869  padding: 4px 0;5870}5871.peach-shortcut-key {5872  font-family: var(--font-mono);5873  font-size: 0.625rem;5874  color: var(--peach-t0);5875  background: var(--peach-t3);5876  border-radius: 4px;5877  padding: 2px 6px;5878  white-space: nowrap;5879  text-align: center;5880}5881.peach-shortcut-desc {5882  font-size: 0.6875rem;5883  color: var(--peach-t1);5884}58855886/* ── Sort bar trash button ───────────────────────────────────────────── */5887.peach-sort-trash-btn {5888  display: flex;5889  align-items: center;5890  justify-content: center;5891  padding: 3px 5px;5892  background: transparent;5893  border: none;5894  cursor: pointer;5895  color: var(--peach-t2);5896  border-radius: 4px;5897  transition: color 140ms ease, background 140ms ease;5898}5899.peach-sort-trash-btn:hover {5900  color: var(--peach-t1);5901  background: var(--peach-t3);5902}5903.peach-sort-trash-btn.is-active {5904  color: var(--peach-accent);5905}59065907/* Accent color picker */5908.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5909.peach-accent-picker {5910  display: flex;5911  flex-wrap: wrap;5912  gap: 7px;5913  padding: 2px 0;5914}5915.peach-accent-swatch {5916  width: 22px;5917  height: 22px;5918  border-radius: 50%;5919  border: 2px solid transparent;5920  cursor: pointer;5921  padding: 0;5922  transition: transform 100ms;5923  outline-offset: 2px;5924}5925.peach-accent-swatch:hover { transform: scale(1.15); }5926.peach-accent-swatch.is-active {5927  border-color: var(--peach-t0);5928  transform: scale(1.1);5929}59305931.peach-pill-group {5932  display: flex;5933  gap: 6px;5934}5935.peach-pill-group .peach-btn.is-active {5936  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5937  border-color: var(--peach-accent);5938  color: var(--peach-t0);5939}59405941/* ── Card entry styles ───────────────────────────────────────── */5942.peach-card-number {5943  font-family: var(--peach-mono);5944  letter-spacing: 0.08em;5945}59465947.peach-card-network-badge {5948  font-size: 0.625rem;5949  padding: 1px 5px;5950  border-radius: 4px;5951  border: 0.5px solid var(--peach-border);5952  color: var(--peach-text-dim);5953  margin-left: 6px;5954  vertical-align: middle;5955}59565957.peach-card-expiry-row {5958  display: flex;5959  align-items: center;5960  gap: 8px;5961}59625963.peach-card-expiry-sep {5964  color: var(--peach-text-dim);5965}59665967/* ── Pro tier — upgrade screen ──────────────────────────────── */5968.peach-pro-mark {5969  font-size: 0.5625rem;5970  color: var(--peach-accent);5971  margin-left: 6px;5972  vertical-align: super;5973  opacity: 0.7;5974}59755976.peach-pro-mini-badge {5977  display: block;5978  font-size: 0.625rem;5979  font-style: italic;5980  color: var(--peach-accent);5981  letter-spacing: 0.04em;5982  margin-top: -2px;5983  padding-left: 2px;5984  opacity: 0.85;5985  text-align: center;5986}59875988.peach-wordmark-stack {5989  display: inline-flex;5990  flex-direction: column;5991  align-items: center;5992}59935994/* ── Pro tier — upgrade page ─────────────────────────────────── */5995/* ── Pro upgrade — redesigned editorial layout ─────────────────── */59965997.peach-pro-upgrade {5998  display: flex;5999  flex-direction: column;6000  align-items: stretch;6001  gap: 10px;6002  padding: 2px 2px 12px;6003}60046005.peach-pro-eyebrow {6006  margin: 0;6007  font-family: var(--font-ui);6008  font-size: 0.625rem;6009  font-weight: 500;6010  letter-spacing: 0.12em;6011  color: var(--peach-accent);6012}60136014.peach-pro-headline {6015  margin: 0;6016  font-family: var(--font-display, "Cormorant Garamond", serif);6017  font-size: 30px;6018  font-weight: 700;6019  font-style: normal;6020  line-height: 1.05;6021  color: var(--peach-t0);6022  letter-spacing: -0.01em;6023}6024.peach-pro-headline em {6025  font-style: italic;6026  font-weight: 400;6027  color: var(--peach-accent);6028}60296030.peach-pro-subtitle {6031  margin: 0;6032  font-size: 0.6875rem;6033  line-height: 1.5;6034  color: var(--peach-t1);6035}60366037/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6038.peach-pro-section-label {6039  margin: 6px 0 0;6040  font-family: var(--font-ui);6041  font-size: 0.5625rem;6042  font-weight: 500;6043  letter-spacing: 0.12em;6044  text-transform: uppercase;6045  color: var(--peach-t2);6046}60476048/* 2-column numbered feature grid */6049.peach-pro-grid {6050  display: grid;6051  grid-template-columns: 1fr 1fr;6052  border-top: 1px solid var(--peach-border);6053  border-left: 1px solid var(--peach-border);6054}60556056.peach-pro-grid-item {6057  display: flex;6058  flex-direction: column;6059  gap: 2px;6060  padding: 8px 9px;6061  border-right: 1px solid var(--peach-border);6062  border-bottom: 1px solid var(--peach-border);6063}60646065.peach-pro-grid-item--wide {6066  grid-column: 1 / -1;6067}60686069.peach-pro-grid-num {6070  font-family: var(--font-mono);6071  font-size: 0.5625rem;6072  color: var(--peach-accent);6073  letter-spacing: 0.06em;6074  opacity: 0.85;6075}60766077.peach-pro-grid-name {6078  font-size: 0.8125rem;6079  font-weight: 500;6080  color: var(--peach-t0);6081  line-height: 1.2;6082}60836084.peach-pro-grid-desc {6085  font-size: 0.625rem;6086  color: var(--peach-t1);6087  line-height: 1.4;6088}60896090.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6091  animation: peach-pulse-accent 600ms ease-out forwards;6092}60936094@keyframes peach-pulse-accent {6095  0%   { opacity: 1; transform: scale(1.2); }6096  100% { opacity: 0.85; transform: scale(1); }6097}60986099/* Actions */6100.peach-pro-upgrade-actions {6101  display: flex;6102  flex-direction: column;6103  align-items: stretch;6104  gap: 10px;6105}61066107.peach-pro-pricing {6108  margin: 0;6109  font-size: 1rem;6110  font-weight: 600;6111  color: var(--peach-t0);6112  letter-spacing: 0.01em;6113}6114.peach-pro-pricing-sub {6115  font-size: 0.75rem;6116  font-weight: 400;6117  color: var(--peach-t1);6118  letter-spacing: 0.02em;6119}61206121.peach-pro-upgrade-cta {6122  display: flex;6123  align-items: center;6124  justify-content: center;6125  text-decoration: none;6126  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6127  border: 1px solid var(--peach-accent);6128  border-radius: 10px;6129  color: var(--peach-accent);6130  font-family: var(--font-ui);6131  font-size: 0.8125rem;6132  font-weight: 600;6133  letter-spacing: 0.06em;6134  padding: 11px 16px;6135  transition: background 0.15s ease, color 0.15s ease;6136}6137.peach-pro-upgrade-cta:hover {6138  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6139}61406141.peach-pro-key-divider {6142  display: flex;6143  align-items: center;6144  gap: 8px;6145  color: var(--peach-t2);6146  font-size: 0.5625rem;6147  letter-spacing: 0.1em;6148}6149.peach-pro-key-divider::before,6150.peach-pro-key-divider::after {6151  content: "";6152  flex: 1;6153  height: 1px;6154  background: var(--peach-border);6155}61566157/* Inline key entry row */6158.peach-pro-key-inline {6159  display: flex;6160  align-items: center;6161  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6162  border: 1px solid var(--peach-border);6163  border-radius: 8px;6164  overflow: hidden;6165}6166.peach-pro-key-inline-input {6167  flex: 1;6168  background: transparent;6169  border: none;6170  outline: none;6171  color: var(--peach-t1);6172  font-family: var(--font-mono);6173  font-size: 0.625rem;6174  letter-spacing: 0.06em;6175  padding: 9px 10px;6176}6177.peach-pro-key-inline-input::placeholder {6178  color: var(--peach-t2);6179}6180.peach-pro-key-apply {6181  background: transparent;6182  border: none;6183  border-left: 1px solid var(--peach-border);6184  color: var(--peach-t2);6185  font-family: var(--font-ui);6186  font-size: 0.5625rem;6187  font-weight: 600;6188  letter-spacing: 0.08em;6189  padding: 9px 10px;6190  cursor: pointer;6191  transition: color 0.15s ease;6192  flex-shrink: 0;6193}6194.peach-pro-key-apply:not(:disabled):hover {6195  color: var(--peach-accent);6196}6197.peach-pro-key-apply:disabled {6198  opacity: 0.35;6199  cursor: not-allowed;6200}62016202/* ── Pro tier — key ceremony ─────────────────────────────────── */6203.peach-pro-key-ceremony {6204  display: flex;6205  flex-direction: column;6206  align-items: center;6207  gap: 12px;6208  padding: 20px 4px 16px;6209}62106211.peach-pro-key-ceremony .peach-lock-rune-string {6212  font-size: 1rem;6213  gap: 12px;6214  flex: 0;6215  justify-content: center;6216}62176218.peach-pro-key-ceremony-label {6219  margin: 0;6220  font-size: 0.6875rem;6221  color: var(--peach-t2);6222  font-style: italic;6223  letter-spacing: 0.04em;6224}62256226.peach-pro-key-input {6227  font-family: var(--font-mono, monospace);6228  letter-spacing: 0.06em;6229  text-align: center;6230  width: 100%;6231  box-sizing: border-box;6232}62336234.peach-pro-key-error {6235  margin: 0;6236  font-size: 0.75rem;6237  text-align: center;6238  color: var(--peach-breach, #e55);6239  padding: 0;6240}62416242.peach-pro-key-activate {6243  width: 100%;6244  text-align: center;6245  box-sizing: border-box;6246  padding: 10px 20px;6247  font-size: 0.8125rem;6248}62496250.peach-pro-key-cancel {6251  background: transparent;6252  border: 0;6253  color: var(--peach-t2);6254  font-size: 0.6875rem;6255  cursor: pointer;6256  padding: 2px 8px;6257  transition: color 0.2s;6258}62596260.peach-pro-key-cancel:hover { color: var(--peach-accent); }62616262/* ── Pro tier — active state ─────────────────────────────────── */6263.peach-pro-active {6264  display: flex;6265  flex-direction: column;6266  align-items: center;6267  gap: 0;6268  padding: 8px 4px 16px;6269  min-height: 280px;6270}62716272.peach-pro-active-hero {6273  display: flex;6274  flex-direction: column;6275  align-items: center;6276  gap: 6px;6277  padding: 20px 0 8px;6278}62796280.peach-pro-active-mark-wrap {6281  display: flex;6282  align-items: center;6283  justify-content: center;6284  margin-bottom: 4px;6285}62866287.peach-pro-active-mark {6288  width: 60px;6289  height: 60px;6290}62916292.peach-pro-active-title {6293  font-family: var(--font-display, var(--font-ui));6294  font-size: 26px;6295  margin: 0;6296  color: var(--peach-t0);6297  letter-spacing: 0.01em;6298}62996300.peach-pro-active-since {6301  margin: 0;6302  font-size: 0.6875rem;6303  color: var(--peach-t2);6304  font-style: italic;6305}63066307.peach-pro-active-features {6308  display: flex;6309  flex-direction: column;6310  gap: 8px;6311  width: 100%;6312  padding: 14px 8px 0;6313  border-top: 1px solid var(--peach-border);6314  flex: 1;6315}63166317.peach-pro-active-feature {6318  display: flex;6319  align-items: center;6320  gap: 9px;6321}63226323.peach-pro-active-feature-mark {6324  color: var(--peach-accent);6325  font-size: 0.625rem;6326  opacity: 0.65;6327  flex-shrink: 0;6328}63296330.peach-pro-active-feature-name {6331  font-size: 0.75rem;6332  color: var(--peach-t1);6333}63346335.peach-pro-deactivate {6336  align-self: center;6337  background: transparent;6338  border: 0;6339  color: var(--peach-t3);6340  font-size: 0.625rem;6341  cursor: pointer;6342  padding: 8px 0 0;6343  margin-top: 16px;6344  letter-spacing: 0.03em;6345  transition: color 0.2s;6346}63476348.peach-pro-deactivate:hover { color: var(--peach-t2); }63496350.peach-pro-deactivate:disabled {6351  opacity: 0.5;6352  cursor: default;6353}63546355/* ── Pro advanced health remediation queue ──────────────────── */6356.peach-health-pro-queue {6357  display: flex;6358  flex-direction: column;6359  gap: 10px;6360  padding: 12px;6361  margin: 0 0 12px;6362  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6363  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6364  border-radius: 10px;6365}63666367.peach-health-pro-queue-head {6368  display: flex;6369  justify-content: space-between;6370  align-items: baseline;6371}63726373.peach-health-pro-queue-title {6374  font-size: 0.75rem;6375  font-weight: 500;6376  letter-spacing: 0.04em;6377  text-transform: uppercase;6378  color: var(--peach-accent);6379}63806381.peach-health-pro-queue-score {6382  font-size: 0.6875rem;6383  color: var(--peach-t2);6384}63856386.peach-health-pro-row {6387  display: flex;6388  gap: 10px;6389  align-items: center;6390  padding: 8px 0;6391  border-top: 1px solid var(--peach-border);6392}63936394.peach-health-pro-row-info {6395  flex: 1;6396  display: flex;6397  flex-direction: column;6398  gap: 4px;6399  min-width: 0;6400}64016402.peach-health-pro-action {6403  flex: 0 0 auto;6404  padding: 4px 8px;6405  font-size: 0.5625rem;6406  letter-spacing: 0.08em;6407  text-transform: uppercase;6408}64096410.peach-health-pro-row-name {6411  font-size: 0.8125rem;6412  color: var(--peach-t0);6413  overflow: hidden;6414  text-overflow: ellipsis;6415  white-space: nowrap;6416}64176418.peach-health-pro-row-meta {6419  font-size: 0.6875rem;6420  color: var(--peach-t2);6421}64226423.peach-health-pro-bar {6424  height: 2px;6425  background: var(--peach-border);6426  border-radius: 2px;6427  overflow: hidden;6428  margin-top: 2px;6429}64306431.peach-health-pro-bar-fill {6432  height: 100%;6433  background: var(--peach-accent);6434  transition: width 200ms ease-out;6435}64366437/* ── Pro activation celebration ── */6438@keyframes peach-pro-bloom {6439  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6440  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6441                 drop-shadow(0 0 48px var(--peach-glow)); }6442  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6443}64446445@keyframes peach-pro-wordmark-in {6446  from { opacity: 0; transform: translateY(4px); }6447  to   { opacity: 1; transform: translateY(0); }6448}64496450@keyframes peach-pro-fade-out {6451  from { opacity: 1; }6452  to   { opacity: 0; }6453}64546455.peach-pro-celebration {6456  background:6457    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6458    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6459    var(--peach-bg);6460  border: 1px solid var(--peach-t3);6461  box-shadow:6462    0 2px 8px rgba(0,0,0,0.55),6463    0 14px 48px rgba(0,0,0,0.7),6464    0 0 0 1px rgba(240,232,216,0.04);6465  overflow: hidden;6466  width: 320px;6467  height: 520px;6468  display: flex;6469  flex-direction: column;6470  align-items: center;6471  justify-content: center;6472  gap: 8px;6473  padding: 32px 24px;6474  text-align: center;6475}64766477.peach-pro-celebration.is-leaving {6478  animation: peach-pro-fade-out 400ms ease forwards;6479}64806481.peach-pro-bloom-target {6482  display: flex;6483  align-items: center;6484  justify-content: center;6485  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6486  margin-bottom: 12px;6487}64886489.peach-pro-bloom-icon {6490  width: 48px;6491  height: 48px;6492}64936494.peach-pro-wordmark {6495  font-family: var(--font-display);6496  font-size: 22px;6497  font-style: italic;6498  font-weight: 400;6499  color: var(--peach-accent);6500  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6501}65026503.peach-pro-thankyou {6504  font-size: 0.75rem;6505  font-style: italic;6506  color: var(--peach-t2);6507  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6508}650965106511/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6512.peach-pro-notice-banner {6513  display: flex;6514  align-items: center;6515  gap: 8px;6516  padding: 7px 12px;6517  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6518  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6519  font-size: 0.6875rem;6520  color: var(--peach-t2);6521  font-family: "IBM Plex Mono", monospace;6522  flex-shrink: 0;6523}65246525.peach-pro-notice-link {6526  background: none;6527  border: none;6528  padding: 0;6529  cursor: pointer;6530  font-size: 0.6875rem;6531  color: var(--peach-accent);6532  font-family: "IBM Plex Mono", monospace;6533  margin-left: auto;6534  white-space: nowrap;6535}65366537.peach-pro-notice-close {6538  background: none;6539  border: none;6540  padding: 0 0 0 4px;6541  cursor: pointer;6542  font-size: 0.625rem;6543  color: var(--peach-t3);6544  line-height: 1;6545}65466547/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6548   Renders over whatever view is showing. 60-second expiry; the popup ticks6549   the countdown each second and clears the banner when it hits zero. */6550.peach-pair-request-banner {6551  display: flex;6552  flex-direction: column;6553  gap: 8px;6554  padding: 10px 12px;6555  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6556  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6557  font-family: "IBM Plex Mono", monospace;6558  flex-shrink: 0;6559}65606561.peach-pair-toast {6562  padding: 8px 12px;6563  font-family: "IBM Plex Mono", monospace;6564  font-size: 0.75rem;6565  color: var(--peach-t1);6566  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6567  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6568  flex-shrink: 0;6569  text-align: center;6570}65716572.peach-pair-toast strong {6573  color: var(--peach-t0);6574  font-weight: 500;6575}65766577.peach-pair-request-header {6578  display: flex;6579  align-items: center;6580  gap: 8px;6581  font-size: 0.75rem;6582  color: var(--peach-t1);6583}65846585.peach-pair-request-mark {6586  font-size: 0.875rem;6587  display: inline-flex;6588  align-items: center;6589}65906591.peach-pair-request-icon {6592  width: 1em;6593  height: 1em;6594}65956596.peach-pair-request-title {6597  font-weight: 600;6598  color: var(--peach-t0);6599}66006601.peach-pair-request-countdown {6602  margin-left: auto;6603  font-variant-numeric: tabular-nums;6604  color: var(--peach-t2);6605  font-size: 0.6875rem;6606}66076608.peach-pair-request-body {6609  margin: 0;6610  font-size: 0.75rem;6611  color: var(--peach-t1);6612  line-height: 1.4;6613}66146615.peach-pair-request-body strong {6616  color: var(--peach-t0);6617  font-weight: 600;6618}66196620.peach-pair-request-actions {6621  display: flex;6622  gap: 8px;6623  justify-content: flex-end;6624}66256626/* ─── First-run onboarding ──────────────────────────────────────────────6627   Three-card welcome shown once before vault creation. The PeachScript6628   rune background drifts behind everything at very low opacity — it's6629   atmosphere, not focus. The cards themselves use the same panel6630   language as the rest of the popup so the transition into NewVault is6631   continuous, not a jarring switch of visual register. */66326633.peach-onboarding {6634  position: relative;6635  display: flex;6636  flex-direction: column;6637  width: 100%;6638  height: 100%;6639  padding: 16px 16px 18px;6640  box-sizing: border-box;6641  overflow: hidden;6642  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6643}66446645.peach-onboarding.is-completing {6646  animation: peach-onboard-exit 200ms ease-out forwards;6647}66486649.peach-rune-background {6650  position: absolute;6651  inset: 0;6652  width: 100%;6653  height: 100%;6654  pointer-events: none;6655  z-index: 0;6656  transition: opacity 500ms ease-out;6657}66586659.peach-onboarding.is-completing .peach-rune-background {6660  opacity: 0;6661}66626663.peach-onboarding-header {6664  position: relative;6665  z-index: 1;6666  display: flex;6667  align-items: center;6668  margin-bottom: 14px;6669}66706671.peach-onboarding-card {6672  position: relative;6673  z-index: 1;6674  flex: 1;6675  display: flex;6676  flex-direction: column;6677  gap: 10px;6678  padding: 22px 20px;6679  border-radius: 16px;6680  border: 1px solid var(--peach-t3);6681  background:6682    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6683  backdrop-filter: blur(3px);6684  -webkit-backdrop-filter: blur(3px);6685  box-shadow:6686    inset 0 1px 0 rgba(240, 232, 216, 0.04),6687    0 12px 28px rgba(0, 0, 0, 0.12);6688  cursor: pointer;6689  user-select: none;6690  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6691}66926693.peach-onboarding-card.is-exiting {6694  animation: peach-card-out 120ms ease-in forwards;6695  pointer-events: none;6696}66976698.peach-onboarding-card-headline {6699  margin: 0;6700  font-family: var(--font-display);6701  font-style: italic;6702  font-weight: 400;6703  font-size: 22px;6704  line-height: 1.05;6705  color: var(--peach-t0);6706  white-space: pre-line;6707}67086709.peach-onboarding-divider {6710  margin: 4px 0 6px;6711  border: 0;6712  border-top: 1px solid var(--peach-t3);6713  width: 100%;6714}67156716.peach-onboarding-body {6717  margin: 0;6718  font-size: 0.8125rem;6719  line-height: 1.6;6720  color: var(--peach-t1);6721}67226723.peach-onboarding-warning {6724  display: flex;6725  align-items: flex-start;6726  gap: 8px;6727  margin: 6px 0 0;6728  padding-top: 8px;6729  border-top: 1px dashed var(--peach-t3);6730  font-size: 0.8125rem;6731  line-height: 1.5;6732  color: var(--peach-t1);6733}67346735.peach-onboarding-warning-icon {6736  color: var(--peach-accent);6737  font-size: 0.8125rem;6738  line-height: 1.5;6739  flex: 0 0 auto;6740}67416742.peach-onboarding-nav {6743  position: relative;6744  z-index: 1;6745  display: flex;6746  align-items: center;6747  justify-content: space-between;6748  margin-top: 12px;6749  padding: 0 4px;6750}67516752.peach-onboarding-dots {6753  display: flex;6754  align-items: center;6755  gap: 6px;6756}67576758.peach-onboarding-dot {6759  width: 6px;6760  height: 6px;6761  border-radius: 50%;6762  background: var(--peach-t2);6763  transition: width 200ms ease, height 200ms ease, background 200ms ease;6764}67656766.peach-onboarding-dot.is-active {6767  width: 8px;6768  height: 8px;6769  background: var(--peach-accent);6770}67716772.peach-onboarding-next {6773  background: none;6774  border: none;6775  padding: 4px 0;6776  cursor: pointer;6777  font-family: "IBM Plex Mono", monospace;6778  font-size: 0.6875rem;6779  letter-spacing: 0.04em;6780  color: var(--peach-t1);6781  transition: color 150ms ease;6782}67836784.peach-onboarding-next:hover {6785  color: var(--peach-t0);6786}67876788.peach-onboarding-next:disabled {6789  opacity: 0.5;6790  cursor: default;6791}67926793.peach-onboarding-back {6794  background: none;6795  border: none;6796  padding: 4px 0;6797  cursor: pointer;6798  font-family: "IBM Plex Mono", monospace;6799  font-size: 0.6875rem;6800  letter-spacing: 0.04em;6801  color: var(--peach-t2);6802  transition: color 150ms ease;6803}68046805.peach-onboarding-back:hover {6806  color: var(--peach-t0);6807}68086809.peach-onboarding-back:disabled {6810  opacity: 0.5;6811  cursor: default;6812}68136814/* Reserve back-button width on the first card so the dots stay centred */6815.peach-onboarding-back-spacer {6816  width: 44px;6817}68186819.peach-onboarding-mobile-card-buttons {6820  display: flex;6821  flex-direction: column;6822  gap: 8px;6823  margin-top: 16px;6824}68256826@keyframes peach-onboard-enter {6827  from { opacity: 0; transform: translateY(20px); }6828  to   { opacity: 1; transform: translateY(0); }6829}68306831@keyframes peach-onboard-exit {6832  from { opacity: 1; }6833  to   { opacity: 0; }6834}68356836@keyframes peach-card-in {6837  from { opacity: 0; transform: translateX(12px); }6838  to   { opacity: 1; transform: translateX(0); }6839}68406841@keyframes peach-card-out {6842  from { opacity: 1; transform: translateX(0); }6843  to   { opacity: 0; transform: translateX(-12px); }6844}68456846/* ─── New vault screen — matched to onboarding card language ─────────── */68476848.peach-newvault {6849  position: relative;6850  display: flex;6851  flex-direction: column;6852  gap: 12px;6853  padding: 16px 16px 18px;6854  overflow: hidden;6855}68566857/* Suppress the warm-blob ambient art inherited from .lock-screen — the6858   new vault card now carries the visual weight. */6859.peach-newvault::before {6860  content: none;6861}68626863.peach-newvault-header {6864  position: relative;6865  z-index: 2;6866  display: flex;6867  align-items: center;6868  gap: 10px;6869  margin-bottom: 2px;6870}68716872.peach-newvault-back {6873  display: inline-flex;6874  align-items: center;6875  gap: 4px;6876  background: transparent;6877  border: none;6878  color: var(--peach-t2);6879  font-family: "IBM Plex Mono", monospace;6880  font-size: 0.625rem;6881  letter-spacing: 0.06em;6882  cursor: pointer;6883  padding: 4px 6px;6884  border-radius: 6px;6885  transition: color 120ms ease, background 120ms ease;6886}68876888.peach-newvault-back:hover {6889  color: var(--peach-t0);6890  background: rgba(240, 232, 216, 0.04);6891}68926893.peach-newvault-mark {6894  position: absolute;6895  right: -12px;6896  top: 6px;6897  width: 110px;6898  height: 110px;6899  pointer-events: none;6900  opacity: 0.10;6901  filter: saturate(0.9);6902  z-index: 0;6903}6904.peach-newvault-mark-art {6905  width: 100%;6906  height: 100%;6907}6908.peach-newvault-mark-art path:nth-child(1) {6909  fill: rgba(123, 144, 96, 0.88);6910}6911.peach-newvault-mark-art path:nth-child(2) {6912  stroke: rgba(94, 122, 66, 0.95);6913}69146915.peach-newvault-card {6916  position: relative;6917  z-index: 1;6918  display: flex;6919  flex-direction: column;6920  gap: 12px;6921  padding: 22px 20px 18px;6922  border-radius: 16px;6923  border: 1px solid var(--peach-t3);6924  background:6925    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6926  backdrop-filter: blur(3px);6927  -webkit-backdrop-filter: blur(3px);6928  box-shadow:6929    inset 0 1px 0 rgba(240, 232, 216, 0.04),6930    0 12px 28px rgba(0, 0, 0, 0.12);6931  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6932}69336934.peach-newvault-headline {6935  margin: 0;6936  font-family: var(--font-display);6937  font-style: italic;6938  font-weight: 400;6939  font-size: 24px;6940  line-height: 1.05;6941  color: var(--peach-t0);6942  white-space: pre-line;6943}69446945.peach-newvault-divider {6946  margin: 2px 0 4px;6947  border: 0;6948  border-top: 1px solid var(--peach-t3);6949  width: 100%;6950}69516952.peach-newvault-field {6953  display: flex;6954  flex-direction: column;6955  gap: 4px;6956}69576958.peach-newvault-label-row {6959  display: flex;6960  align-items: center;6961  justify-content: space-between;6962}69636964/* Monospace input scaled to the card. Replaces the 22px unlock-input6965   so the placeholder no longer overflows and the field reads as part6966   of the same surface as the body copy. */6967.peach-newvault-input {6968  font-size: 0.875rem;6969  letter-spacing: 0.18em;6970  padding: 8px 0;6971}6972.peach-newvault-input::placeholder {6973  letter-spacing: 0.18em;6974  color: var(--peach-t2);6975}69766977.peach-newvault-hint {6978  margin: 2px 0 0;6979  font-family: "IBM Plex Mono", monospace;6980  font-size: 0.625rem;6981  color: var(--peach-t2);6982  letter-spacing: 0.04em;6983}69846985.peach-newvault-submit {6986  margin-top: 4px;6987}69886989.peach-newvault-warning {6990  display: flex;6991  align-items: flex-start;6992  gap: 8px;6993  margin: 4px 0 0;6994  padding-top: 10px;6995  border-top: 1px dashed var(--peach-t3);6996  font-size: 0.75rem;6997  line-height: 1.5;6998  color: var(--peach-t1);6999}70007001.peach-newvault-warning-icon {7002  color: var(--peach-accent);7003  font-size: 0.8125rem;7004  line-height: 1.4;7005  flex: 0 0 auto;7006}70077008.peach-newvault-footer {7009  position: relative;7010  z-index: 1;7011  display: flex;7012  flex-direction: column;7013  gap: 4px;7014  padding: 4px 4px 0;7015}70167017/* Settings body — warm accent gradient gives the glass something to blur against */7018.peach-settings-body {7019  background:7020    radial-gradient(7021      ellipse at 30% 20%,7022      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7023      transparent 60%7024    );7025}70267027/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7028/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7029 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7030 * (replacing the vault from a backup file) and "hazard" for actions that7031 * are absolutely irreversible (Panic). Both use the same card scaffold so7032 * they read as a pair, but the colour family signals the severity at a7033 * glance — yellow for caution, red for don't.7034 */7035.peach-danger-card {7036  --danger-tint: 235, 158, 52; /* amber */7037  display: flex;7038  flex-direction: column;7039  gap: 8px;7040  padding: 14px;7041  margin-top: 10px;7042  border-radius: 12px;7043  border: 1px solid rgba(var(--danger-tint), 0.32);7044  background:7045    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7046    rgba(var(--danger-tint), 0.04);7047  box-shadow:7048    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7049    0 0 24px rgba(var(--danger-tint), 0.04);7050  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7051}70527053.peach-danger-card:hover {7054  border-color: rgba(var(--danger-tint), 0.55);7055  box-shadow:7056    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7057    0 0 36px rgba(var(--danger-tint), 0.10);7058}70597060.peach-danger-card--hazard {7061  --danger-tint: 220, 38, 38; /* red */7062}70637064.peach-danger-card-head {7065  display: flex;7066  align-items: center;7067  gap: 10px;7068}70697070.peach-danger-card-glyph {7071  width: 28px;7072  height: 28px;7073  flex-shrink: 0;7074  display: flex;7075  align-items: center;7076  justify-content: center;7077  border-radius: 8px;7078  background: rgba(var(--danger-tint), 0.12);7079  color: rgba(var(--danger-tint), 0.95);7080  font-size: 1rem;7081  line-height: 1;7082}70837084.peach-danger-card-title {7085  margin: 0;7086  font-size: 0.8125rem;7087  font-weight: 600;7088  color: rgba(var(--danger-tint), 0.92);7089  letter-spacing: 0.01em;7090}70917092.peach-danger-card-copy {7093  margin: 0;7094  font-size: 0.6875rem;7095  line-height: 1.5;7096  color: var(--peach-t2);7097}70987099.peach-danger-card-button {7100  width: 100%;7101  padding: 9px;7102  margin-top: 4px;7103  background: transparent;7104  border: 1px solid rgba(var(--danger-tint), 0.45);7105  border-radius: 8px;7106  color: rgba(var(--danger-tint), 0.9);7107  font-size: 0.75rem;7108  font-weight: 500;7109  letter-spacing: 0.02em;7110  cursor: pointer;7111  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7112}71137114.peach-danger-card-button:hover {7115  background: rgba(var(--danger-tint), 0.10);7116  border-color: rgba(var(--danger-tint), 0.75);7117  color: rgb(var(--danger-tint));7118}71197120/* ── Panic flow (three-step destruction) ───────────────────────────────── */7121.peach-panic {7122  display: flex;7123  flex-direction: column;7124  flex: 1;7125  min-height: 0;7126  padding: 28px 20px 20px;7127  gap: 18px;7128  overflow-y: auto;7129  scrollbar-width: none;7130  -ms-overflow-style: none;7131}71327133.peach-panic::-webkit-scrollbar { display: none; }71347135.peach-panic-step2 {7136  background: rgba(220, 38, 38, 0.04);7137}71387139.peach-panic-step3 {7140  position: relative;7141  background: #0f0505;7142  color: #ffffff;7143  overflow: hidden;7144}71457146.peach-panic-rune-bg {7147  position: absolute;7148  inset: 0;7149  opacity: 0.22;7150  pointer-events: none;7151  overflow: hidden;7152}71537154.peach-panic-rune-bg canvas {7155  width: 100% !important;7156  height: 100% !important;7157}71587159.peach-panic-icon {7160  font-size: 32px;7161  color: rgb(220, 38, 38);7162  line-height: 1;7163}71647165.peach-panic-title {7166  margin: 0;7167  font-size: 18px;7168  font-weight: 500;7169  color: var(--peach-t1);7170}71717172.peach-panic-title--severe {7173  font-size: 20px;7174  font-weight: 700;7175  color: rgb(220, 38, 38);7176}71777178.peach-panic-body {7179  margin: 0;7180  font-size: 0.8125rem;7181  line-height: 1.55;7182  color: var(--peach-t2);7183}71847185.peach-panic-body--severe {7186  color: rgba(220, 38, 38, 0.85);7187}71887189.peach-panic-body--final {7190  font-size: 1rem;7191  font-weight: 700;7192  color: rgb(255, 80, 80);7193  line-height: 1.4;7194}71957196.peach-panic-body--final-intro {7197  font-size: 1rem;7198  color: #ffffff;7199  font-weight: 400;7200}72017202.peach-panic-divider {7203  height: 1px;7204  background: rgba(255, 255, 255, 0.08);7205  margin: 4px 0;7206}72077208.peach-panic-confirm-input {7209  width: 100%;7210  padding: 10px 12px;7211  background: rgba(255, 255, 255, 0.02);7212  border: 1px solid rgba(220, 38, 38, 0.4);7213  border-radius: 8px;7214  color: var(--peach-t1);7215  font-family: "IBM Plex Mono", monospace;7216  font-size: 0.875rem;7217  letter-spacing: 0.12em;7218  text-transform: uppercase;7219}72207221.peach-panic-confirm-input:focus {7222  outline: none;7223  border-color: rgb(220, 38, 38);7224}72257226.peach-panic-confirm-input--match {7227  border-color: rgb(220, 38, 38);7228  color: rgb(220, 38, 38);7229}72307231.peach-panic-confirm-label {7232  font-size: 0.6875rem;7233  color: var(--peach-t2);7234  margin: 0 0 -8px;7235  letter-spacing: 0.06em;7236}72377238.peach-panic-actions {7239  display: flex;7240  flex-direction: column;7241  gap: 10px;7242  margin-top: auto;7243}72447245.peach-panic-button {7246  width: 100%;7247  padding: 12px;7248  border-radius: 8px;7249  font-size: 0.8125rem;7250  cursor: pointer;7251  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7252}72537254.peach-panic-button--primary {7255  background: var(--peach-accent);7256  border: 1px solid var(--peach-accent);7257  color: #ffffff;7258  font-weight: 600;7259}72607261.peach-panic-button--primary:hover {7262  background: color-mix(in srgb, var(--peach-accent) 88%, white);7263}72647265.peach-panic-button--danger {7266  background: rgb(220, 38, 38);7267  border: 1px solid rgb(220, 38, 38);7268  color: #ffffff;7269  font-weight: 600;7270}72717272.peach-panic-button--danger:disabled {7273  opacity: 0.35;7274  cursor: not-allowed;7275}72767277.peach-panic-button--ghost {7278  background: transparent;7279  border: 1px solid rgba(255, 255, 255, 0.18);7280  color: var(--peach-t2);7281}72827283.peach-panic-button--ghost:hover {7284  border-color: rgba(255, 255, 255, 0.32);7285  color: var(--peach-t1);7286}72877288.peach-panic-link {7289  background: transparent;7290  border: none;7291  padding: 4px 0;7292  color: rgba(220, 38, 38, 0.65);7293  font-size: 0.75rem;7294  cursor: pointer;7295  text-align: left;7296  text-decoration: underline;7297  text-underline-offset: 3px;7298}72997300.peach-panic-link:hover {7301  color: rgb(220, 38, 38);7302}73037304.peach-panic-bar {7305  background: rgb(220, 38, 38);7306  padding: 16px 20px;7307  margin: -28px -20px 0;7308  text-align: center;7309  font-size: 0.8125rem;7310  font-weight: 700;7311  letter-spacing: 0.12em;7312  color: #ffffff;7313}73147315.peach-panic-final-button {7316  width: 100%;7317  padding: 14px;7318  background: rgb(220, 38, 38);7319  border: none;7320  border-radius: 8px;7321  color: #ffffff;7322  font-size: 0.875rem;7323  font-weight: 700;7324  letter-spacing: 0.08em;7325  text-transform: uppercase;7326  cursor: pointer;7327  animation: peach-panic-pulse 2s ease-in-out infinite;7328}73297330.peach-settings-license {7331  margin-top: 10px;7332  padding-top: 10px;7333  border-top: 1px solid var(--peach-t3);7334}73357336.peach-settings-label {7337  font-size: 0.625rem;7338  letter-spacing: 0.08em;7339  color: var(--peach-t3);7340  display: block;7341  margin-bottom: 6px;7342}73437344.peach-settings-license-row {7345  display: flex;7346  align-items: center;7347  justify-content: space-between;7348  gap: 8px;7349}73507351.peach-settings-license-key {7352  font-family: 'IBM Plex Mono', monospace;7353  font-size: 0.75rem;7354  color: var(--peach-t0);7355  letter-spacing: 0.04em;7356  word-break: break-all;7357  flex: 1;7358  min-width: 0;7359}73607361.peach-settings-license-key--masked {7362  font-family: 'IBM Plex Mono', monospace;7363  font-size: 0.6rem;7364  color: var(--peach-t1);7365  letter-spacing: 0.18em;7366  user-select: none;7367}73687369.peach-settings-license-actions {7370  display: flex;7371  align-items: center;7372  gap: 2px;7373  flex-shrink: 0;7374}73757376.peach-settings-license-copy {7377  font-size: 0.6875rem;7378  color: var(--peach-accent);7379  background: transparent;7380  border: none;7381  cursor: pointer;7382  padding: 4px 8px;7383  border-radius: 4px;7384  flex-shrink: 0;7385  transition: opacity 150ms ease;7386}73877388.peach-settings-license-copy:hover {7389  opacity: 0.75;7390}73917392.peach-settings-license-toggle {7393  display: flex;7394  align-items: center;7395  justify-content: center;7396  background: transparent;7397  border: none;7398  cursor: pointer;7399  padding: 4px 6px;7400  border-radius: 4px;7401  color: var(--peach-t2);7402  transition: color 150ms ease;7403}74047405.peach-settings-license-toggle:hover {7406  color: var(--peach-t1);7407}74087409@keyframes peach-panic-pulse {7410  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7411  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7412}74137414[data-motion="reduce"] .peach-panic-final-button {7415  animation: none;7416}74177418/* Vault History — Settings → Vault sub-view */74197420.peach-history-list {7421  border: 1px solid var(--peach-border);7422  border-radius: 8px;7423  overflow: hidden;7424  margin: 8px 0 4px;7425}74267427.peach-history-row {7428  display: flex;7429  align-items: center;7430  justify-content: space-between;7431  padding: 9px 12px;7432  gap: 10px;7433  border-bottom: 1px solid var(--peach-border);7434}74357436.peach-history-row:last-child {7437  border-bottom: none;7438}74397440.peach-history-meta {7441  display: flex;7442  flex-direction: column;7443  gap: 2px;7444  min-width: 0;7445  flex: 1;7446}74477448.peach-history-time {7449  font-size: 0.75rem;7450  font-family: 'IBM Plex Mono', ui-monospace, monospace;7451  color: var(--peach-t0);7452  white-space: nowrap;7453  overflow: hidden;7454  text-overflow: ellipsis;7455}74567457.peach-history-sub {7458  font-size: 0.625rem;7459  color: var(--peach-t2);7460  letter-spacing: 0.06em;7461  text-transform: uppercase;7462  white-space: nowrap;7463  overflow: hidden;7464  text-overflow: ellipsis;7465}74667467.peach-history-btn {7468  flex-shrink: 0;7469  white-space: nowrap;7470  min-width: 56px;7471  text-align: center;7472}74737474.peach-history-btn.is-busy {7475  opacity: 0.65;7476}74777478.peach-history-footer {7479  font-size: 0.625rem;7480  color: var(--peach-t3);7481  letter-spacing: 0.05em;7482  text-align: right;7483  margin: 0;7484  padding: 2px 0 0;7485}74867487/* ── Context menu + swipe-copy flash ─────────────────────── */7488.peach-context-menu-backdrop {7489  position: fixed;7490  inset: 0;7491  background: rgba(0, 0, 0, 0.45);7492  z-index: 100;7493  display: flex;7494  align-items: flex-end;7495  justify-content: center;7496  animation: peach-ctx-fade 140ms ease both;7497}7498.peach-context-menu {7499  width: min(360px, calc(100vw - 24px));7500  margin-bottom: max(env(safe-area-inset-bottom), 12px);7501  background: var(--peach-bg);7502  border: 1px solid var(--peach-t3);7503  border-radius: 14px;7504  padding: 6px;7505  display: flex;7506  flex-direction: column;7507  gap: 2px;7508  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7509  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7510}7511@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7512@keyframes peach-ctx-rise {7513  from { transform: translateY(16px); opacity: 0; }7514  to   { transform: translateY(0);    opacity: 1; }7515}7516.peach-context-menu-item {7517  background: transparent;7518  color: var(--peach-t0);7519  border: 0;7520  border-radius: 10px;7521  padding: 12px 14px;7522  text-align: left;7523  font: inherit;7524  cursor: pointer;7525}7526.peach-context-menu-item:hover,7527.peach-context-menu-item:focus-visible {7528  background: var(--peach-t3);7529}7530.peach-context-menu-item--danger {7531  color: var(--peach-health-bad, #d96868);7532}7533.peach-context-menu-item--cancel {7534  color: var(--peach-t2);7535  margin-top: 4px;7536  border-top: 1px solid var(--peach-t3);7537  border-radius: 0 0 10px 10px;7538}75397540/* Swipe-to-copy flash */7541.peach-entry-row.is-copy-flash {7542  animation: peach-copy-flash 600ms ease both;7543}7544@keyframes peach-copy-flash {7545  0%   { background: transparent; }7546  20%  { background: rgba(217, 153, 51, 0.32); }7547  100% { background: transparent; }7548}75497550html { font-size: 16px; }75517552/* ── Recovery word entry ─────────────────────────────────────────── */7553.peach-lock-recover-link {7554  display: block;7555  width: 100%;7556  margin-top: 12px;7557  background: none;7558  border: none;7559  font-family: "IBM Plex Mono", monospace;7560  font-size: 0.625rem;7561  letter-spacing: 0.06em;7562  color: var(--peach-t2);7563  cursor: pointer;7564  text-align: center;7565  padding: 4px;7566  transition: color 120ms ease;7567}7568.peach-lock-recover-link:hover {7569  color: var(--peach-t0);7570}75717572.lock-screen--recovery {7573  display: flex;7574  flex-direction: column;7575  align-items: stretch;7576  padding: 12px 20px 24px;7577  overflow: hidden;7578}75797580.peach-recovery-nav {7581  display: flex;7582  align-items: center;7583  position: relative;7584  z-index: 1;7585  margin-bottom: 4px;7586}75877588/* Mask runes to the top decorative band only — keep inputs and the7589   bottom CTA button clear. The bottom of the popup is reserved for7590   submit buttons; rendering runes there overlaps the button glyph. */7591.peach-rune-background--recovery {7592  -webkit-mask-image: linear-gradient(7593    to bottom,7594    black 0px, black 85px,7595    transparent 110px,7596    transparent 100%7597  );7598  mask-image: linear-gradient(7599    to bottom,7600    black 0px, black 85px,7601    transparent 110px,7602    transparent 100%7603  );7604}76057606.peach-recovery-header {7607  text-align: center;7608  margin-bottom: 16px;7609  margin-top: 4px;7610}7611.peach-recovery-header .peach-onboarding-headline {7612  font-size: 1.25rem;7613  font-weight: 300;7614  letter-spacing: 0.02em;7615  margin: 0 0 4px;7616}7617.peach-recovery-header .peach-hint {7618  font-family: "IBM Plex Mono", monospace;7619  font-size: 0.625rem;7620  color: var(--peach-t2);7621  letter-spacing: 0.04em;7622  margin: 0;7623}76247625/* 12-word grid: 2 columns × 6 rows */7626.peach-recovery-grid {7627  display: grid;7628  grid-template-columns: repeat(2, 1fr);7629  gap: 12px 20px;7630  width: 100%;7631  margin-bottom: 0;7632}76337634.peach-recovery-word-slot {7635  display: flex;7636  align-items: center;7637  gap: 6px;7638  min-width: 0;7639}76407641.peach-recovery-word-index {7642  font-family: "IBM Plex Mono", monospace;7643  font-size: 0.5rem;7644  color: rgba(255, 255, 255, 0.35);7645  min-width: 14px;7646  flex-shrink: 0;7647  text-align: right;7648  letter-spacing: 0.04em;7649}76507651.peach-recovery-word-input {7652  flex: 1;7653  min-width: 0;7654  background: transparent;7655  border: none;7656  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7657  color: var(--peach-t0);7658  font-family: "IBM Plex Mono", monospace;7659  font-size: 0.6875rem;7660  letter-spacing: 0.06em;7661  padding: 5px 2px 4px;7662  outline: none;7663  text-transform: lowercase;7664  transition: border-color 120ms ease;7665}7666.peach-recovery-word-input::placeholder {7667  color: rgba(255, 255, 255, 0.18);7668}7669.peach-recovery-word-input:focus {7670  border-bottom-color: var(--peach-accent);7671}76727673.peach-recovery-submit {7674  width: 100%;7675  margin-top: auto;7676}76777678.peach-recovery-new-password-form {7679  width: 100%;7680  display: flex;7681  flex-direction: column;7682  gap: 16px;7683  margin-bottom: 8px;7684}7685.peach-recovery-new-password-form .peach-newvault-field {7686  display: flex;7687  flex-direction: column;7688  gap: 4px;7689}76907691/* ── Recovery words display (post-create) ────────────────────────── */7692.lock-screen--recovery-display {7693  display: flex;7694  flex-direction: column;7695  align-items: stretch;7696  padding: 0 20px 20px;7697  min-height: 0;7698  overflow-y: auto;7699}77007701.peach-recovery-words-display {7702  width: 100%;7703  margin-bottom: 16px;7704  border: 1px solid var(--peach-t3);7705  border-radius: 8px;7706  padding: 12px 14px;7707  background: rgba(245, 240, 234, 0.04);7708}77097710.peach-recovery-words-label {7711  font-family: "IBM Plex Mono", monospace;7712  font-size: 0.5rem;7713  letter-spacing: 0.08em;7714  color: var(--peach-t2);7715  text-transform: uppercase;7716  margin-bottom: 10px;7717}77187719.peach-recovery-word-list {7720  list-style: none;7721  margin: 0;7722  padding: 0;7723  display: grid;7724  grid-template-columns: repeat(2, 1fr);7725  gap: 6px 16px;7726}77277728.peach-recovery-word-item {7729  display: flex;7730  align-items: baseline;7731  gap: 5px;7732}77337734.peach-recovery-word-num {7735  font-family: "IBM Plex Mono", monospace;7736  font-size: 0.5rem;7737  color: var(--peach-t2);7738  width: 14px;7739  flex: 0 0 14px;7740  text-align: right;7741  letter-spacing: 0.04em;7742  font-variant-numeric: tabular-nums;7743}77447745.peach-recovery-download-btn {7746  display: block;7747  margin: 10px auto 0;7748  padding: 4px 10px;7749  background: transparent;7750  border: 1px solid var(--peach-border);7751  border-radius: 6px;7752  color: var(--peach-t2);7753  font-family: "IBM Plex Mono", monospace;7754  font-size: 0.5625rem;7755  letter-spacing: 0.06em;7756  text-transform: lowercase;7757  cursor: pointer;7758  transition: border-color 0.15s, color 0.15s;7759}77607761.peach-recovery-download-btn:hover {7762  border-color: var(--peach-accent);7763  color: var(--peach-t0);7764}77657766.peach-recovery-word-text {7767  font-family: "IBM Plex Mono", monospace;7768  font-size: 0.6875rem;7769  letter-spacing: 0.06em;7770  color: var(--peach-t0);7771  text-transform: lowercase;7772}77737774.peach-hint--warning {7775  color: var(--peach-accent);7776  font-style: italic;7777}7778.peach-hint--success {7779  color: var(--peach-t2);7780  font-family: "IBM Plex Mono", monospace;7781  font-size: 0.625rem;7782  letter-spacing: 0.06em;7783}77847785/* Confirmation step */7786.peach-recovery-confirm {7787  width: 100%;7788  flex: 1;7789  display: flex;7790  flex-direction: column;7791}7792.peach-recovery-confirm-label {7793  font-family: "IBM Plex Mono", monospace;7794  font-size: 0.5625rem;7795  letter-spacing: 0.04em;7796  color: var(--peach-t2);7797  text-align: center;7798  margin: 0 0 12px;7799}7800.peach-recovery-confirm-fields {7801  display: flex;7802  flex-direction: column;7803  gap: 14px;7804  margin-bottom: 10px;7805}7806.peach-recovery-confirm-field {7807  display: flex;7808  align-items: center;7809  gap: 8px;7810}7811.peach-recovery-confirm-num {7812  font-family: "IBM Plex Mono", monospace;7813  font-size: 0.5rem;7814  color: var(--peach-t2);7815  min-width: 44px;7816  letter-spacing: 0.04em;7817}7818.peach-recovery-confirm-input {7819  flex: 1;7820  background: transparent;7821  border: none;7822  border-bottom: 1px solid var(--peach-t3);7823  color: var(--peach-t0);7824  font-family: "IBM Plex Mono", monospace;7825  font-size: 0.6875rem;7826  letter-spacing: 0.06em;7827  padding: 4px 2px 3px;7828  outline: none;7829  text-transform: lowercase;7830  transition: border-color 120ms ease;7831}7832.peach-recovery-confirm-input:focus {7833  border-bottom-color: var(--peach-accent);7834}7835.peach-recovery-confirm-input:disabled {7836  opacity: 0.4;7837  cursor: not-allowed;7838}7839.peach-recovery-confirm-btn {7840  width: 100%;7841  margin-top: auto;7842}78437844/* ============================================================7845   Sync info sheet7846   ============================================================ */78477848.peach-sync-info-backdrop {7849  position: fixed;7850  inset: 0;7851  z-index: 200;7852  background: rgba(0, 0, 0, 0.55);7853  display: flex;7854  align-items: flex-end;7855  animation: peach-fade-in 200ms ease forwards;7856}78577858@keyframes peach-fade-in {7859  from { opacity: 0; }7860  to   { opacity: 1; }7861}78627863.peach-sync-info-sheet {7864  width: 100%;7865  background: var(--peach-bg-card, var(--peach-bg));7866  border-top-left-radius: 20px;7867  border-top-right-radius: 20px;7868  padding: 12px 24px 32px;7869  display: flex;7870  flex-direction: column;7871  gap: 20px;7872  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;7873}78747875@keyframes peach-sheet-up {7876  from { transform: translateY(100%); }7877  to   { transform: translateY(0); }7878}78797880.peach-sync-info-handle {7881  width: 36px;7882  height: 4px;7883  border-radius: 2px;7884  background: var(--peach-border);7885  margin: 0 auto 4px;7886  flex-shrink: 0;7887}78887889.peach-sync-info-title {7890  font-family: 'Cormorant Garamond', serif;7891  font-style: italic;7892  font-size: 26px;7893  font-weight: 600;7894  color: var(--peach-t0);7895  margin: 0;7896  line-height: 1.2;7897}78987899.peach-sync-info-body {7900  display: flex;7901  flex-direction: column;7902  gap: 14px;7903}79047905.peach-sync-info-point {7906  display: flex;7907  gap: 12px;7908  align-items: flex-start;7909  font-size: 14px;7910  color: var(--peach-t2);7911  line-height: 1.6;7912  margin: 0;7913}79147915.peach-sync-info-icon {7916  color: var(--peach-accent);7917  font-size: 16px;7918  flex-shrink: 0;7919  margin-top: 1px;7920}79217922.peach-sync-info-actions {7923  display: flex;7924  flex-direction: column;7925  gap: 12px;7926  margin-top: 4px;7927}79287929.peach-sync-info-pro-link {7930  background: none;7931  border: none;7932  font-size: 13px;7933  color: var(--peach-t3);7934  cursor: pointer;7935  padding: 0;7936  font-family: inherit;7937  text-align: center;7938  transition: color 150ms ease;7939}79407941.peach-sync-info-pro-link:hover {7942  color: var(--peach-accent);7943}79447945.peach-btn--full {7946  width: 100%;7947}79487949/* ── Sync screen ── */79507951.peach-sync-coming-soon {7952  display: flex;7953  align-items: flex-start;7954  gap: 10px;7955  padding: 12px 14px;7956  background: var(--peach-s1);7957  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);7958  border-radius: 10px;7959}7960.peach-sync-coming-soon__icon {7961  flex-shrink: 0;7962  color: var(--peach-accent);7963  margin-top: 1px;7964  line-height: 0;7965}7966.peach-sync-coming-soon__title {7967  font-family: 'Cormorant Garamond', serif;7968  font-weight: 500;7969  font-size: 13px;7970  color: var(--peach-accent);7971  margin: 0 0 5px;7972  line-height: 1.3;7973}7974.peach-sync-coming-soon__body {7975  font-size: 12px;7976  color: var(--peach-t1);7977  line-height: 1.55;7978  margin: 0;7979}79807981.peach-sync-screen {7982  display: flex;7983  flex-direction: column;7984  height: 100%;7985}79867987.peach-sync-content {7988  flex: 1;7989  overflow-y: auto;7990  padding: 24px 20px 40px;7991  display: flex;7992  flex-direction: column;7993  gap: 24px;7994}79957996/* Intro (State A) */7997.peach-sync-headline {7998  font-family: 'Cormorant Garamond', serif;7999  font-style: italic;8000  font-size: 28px;8001  font-weight: 600;8002  color: var(--peach-t0);8003  margin: 0 0 10px;8004  line-height: 1.2;8005}80068007.peach-sync-intro-body {8008  font-size: 14px;8009  color: var(--peach-t1);8010  line-height: 1.6;8011  margin: 0;8012}80138014.peach-sync-pro-note {8015  display: flex;8016  flex-direction: column;8017  gap: 8px;8018  background: var(--peach-t3);8019  border-radius: 10px;8020  padding: 12px 14px;8021}80228023.peach-sync-pro-note-text {8024  font-size: 12px;8025  color: var(--peach-t2);8026  line-height: 1.5;8027  margin: 0;8028}80298030.peach-sync-pro-link {8031  background: none;8032  border: none;8033  font-size: 12px;8034  color: var(--peach-accent);8035  cursor: pointer;8036  padding: 0;8037  font-family: inherit;8038  text-align: left;8039}80408041/* Status (State C) */8042.peach-sync-status {8043  padding: 12px 0;8044  border-bottom: 1px solid var(--peach-border);8045}80468047.peach-sync-status-row {8048  display: flex;8049  align-items: center;8050  gap: 8px;8051}80528053.peach-sync-dot {8054  width: 7px;8055  height: 7px;8056  border-radius: 50%;8057  flex-shrink: 0;8058}80598060.peach-sync-dot--green { background: var(--peach-health-ok); }8061.peach-sync-dot--amber { background: var(--peach-accent); }80628063.peach-sync-status-text {8064  font-family: 'IBM Plex Mono', monospace;8065  font-size: 11px;8066  color: var(--peach-t2);8067}80688069/* Paired devices */8070.peach-sync-section {8071  display: flex;8072  flex-direction: column;8073  gap: 2px;8074}80758076.peach-sync-section-label {8077  font-family: 'IBM Plex Mono', monospace;8078  font-size: 10px;8079  letter-spacing: 0.1em;8080  color: var(--peach-t3);8081  margin: 0 0 10px;8082}80838084.peach-sync-device-row {8085  display: flex;8086  justify-content: space-between;8087  align-items: baseline;8088  padding: 10px 0;8089  border-bottom: 1px solid var(--peach-border);8090  gap: 12px;8091}80928093.peach-sync-device-name {8094  font-size: 14px;8095  color: var(--peach-t1);8096}80978098.peach-sync-device-meta {8099  font-family: 'IBM Plex Mono', monospace;8100  font-size: 11px;8101  color: var(--peach-t3);8102  white-space: nowrap;8103}81048105.peach-sync-hub-note {8106  padding: 14px 16px;8107  border: 1px solid var(--peach-border);8108  border-radius: 10px;8109  display: flex;8110  flex-direction: column;8111  gap: 6px;8112  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8113}81148115.peach-sync-hub-note-title {8116  font-size: 13px;8117  font-weight: 600;8118  color: var(--peach-t0);8119  margin: 0;8120}81218122.peach-sync-hub-note-body {8123  font-size: 12px;8124  color: var(--peach-t2);8125  line-height: 1.6;8126  margin: 0;8127}81288129/* Action buttons */8130.peach-sync-actions {8131  display: flex;8132  gap: 10px;8133  flex-wrap: wrap;8134}81358136/* Upgrade prompt (State B) */8137.peach-sync-upgrade {8138  display: flex;8139  flex-direction: column;8140  gap: 12px;8141  padding: 16px;8142  border: 1px solid var(--peach-border);8143  border-radius: 10px;8144}81458146.peach-sync-upgrade-text {8147  font-size: 13px;8148  color: var(--peach-t2);8149  line-height: 1.6;8150  margin: 0;8151}81528153/* Network note */8154.peach-sync-network-note {8155  font-size: 12px;8156  color: var(--peach-t3);8157  line-height: 1.6;8158  margin: 0;8159}81608161/* Advanced */8162.peach-sync-advanced {8163  margin-top: auto;8164  padding-top: 16px;8165  border-top: 1px solid var(--peach-border);8166}81678168.peach-sync-advanced-toggle {8169  display: flex;8170  align-items: center;8171  gap: 8px;8172  background: none;8173  border: none;8174  font-family: 'IBM Plex Mono', monospace;8175  font-size: 11px;8176  letter-spacing: 0.08em;8177  color: var(--peach-t3);8178  cursor: pointer;8179  padding: 0;8180  text-transform: uppercase;8181}81828183.peach-sync-advanced-chevron {8184  display: inline-block;8185  transition: transform 200ms ease;8186  font-size: 10px;8187}81888189.peach-sync-advanced-chevron.is-open {8190  transform: rotate(90deg);8191}81928193.peach-sync-advanced-content {8194  margin-top: 14px;8195}81968197.peach-sync-advanced-row {8198  display: flex;8199  justify-content: space-between;8200  align-items: center;8201  gap: 16px;8202}82038204.peach-sync-advanced-title {8205  font-size: 14px;8206  color: var(--peach-t1);8207  margin: 0 0 2px;8208}82098210.peach-sync-advanced-subtitle {8211  font-size: 12px;8212  color: var(--peach-t3);8213  margin: 0;8214  line-height: 1.5;8215}82168217/* ── Add Device — Android scan tabs ─────────────────────────────────────── */82188219.peach-pairing-tabs {8220  display: flex;8221  border: 1px solid var(--peach-border);8222  border-radius: 8px;8223  overflow: hidden;8224  margin-bottom: 4px;8225}82268227.peach-pairing-tab {8228  flex: 1;8229  padding: 10px 0;8230  background: none;8231  border: none;8232  font-family: 'IBM Plex Mono', monospace;8233  font-size: 11px;8234  letter-spacing: 0.06em;8235  color: var(--peach-t2);8236  cursor: pointer;8237  transition: background 150ms, color 150ms;8238}82398240.peach-pairing-tab.is-active {8241  background: var(--peach-accent);8242  color: #fff;8243  font-weight: 600;8244}82458246.peach-pairing-tab:not(.is-active):active {8247  background: var(--peach-border);8248}82498250/* Camera view */8251.peach-pairing-camera-container {8252  position: relative;8253  width: 100%;8254  aspect-ratio: 1;8255  border-radius: 12px;8256  overflow: hidden;8257  background: #000;8258  flex-shrink: 0;8259}82608261.peach-pairing-video {8262  width: 100%;8263  height: 100%;8264  object-fit: cover;8265}82668267.peach-pairing-scan-frame {8268  position: absolute;8269  top: 50%;8270  left: 50%;8271  transform: translate(-50%, -50%);8272  width: 60%;8273  aspect-ratio: 1;8274  border: 2px solid var(--peach-accent);8275  border-radius: 8px;8276  pointer-events: none;8277}82788279/* ── Notes Mode ── */82808281/* Overlay that crossfades over the vault */8282.peach-notes-overlay {8283  position: fixed;8284  inset: 0;8285  z-index: 90;8286  opacity: 0;8287  pointer-events: none;8288  animation: peach-mode-in 220ms ease-in forwards;8289}82908291.peach-notes-overlay.is-visible {8292  opacity: 1;8293  pointer-events: auto;8294}82958296@keyframes peach-mode-in {8297  from { opacity: 0; }8298  to   { opacity: 1; }8299}83008301/* Top-level notes surface */8302.peach-notes-mode {8303  position: absolute;8304  inset: 0;8305  background: var(--peach-bg);8306  display: flex;8307  flex-direction: column;8308}83098310/* Rune canvas positioned behind content */8311.peach-note-rune-canvas {8312  position: absolute;8313  inset: 0;8314  width: 100%;8315  height: 100%;8316  pointer-events: none;8317  z-index: 0;8318}83198320/* TOC wrapper */8321.peach-notes-toc-wrapper {8322  position: absolute;8323  inset: 0;8324  z-index: 1;8325  opacity: 1;8326  pointer-events: auto;8327  transition: opacity 200ms ease;8328}83298330.peach-notes-toc-wrapper.is-hidden {8331  opacity: 0;8332  pointer-events: none;8333}83348335/* Editor wrapper */8336.peach-notes-editor-wrapper {8337  position: absolute;8338  inset: 0;8339  z-index: 2;8340  opacity: 0;8341  pointer-events: none;8342  transition: opacity 200ms ease;8343}83448345.peach-notes-editor-wrapper.is-visible {8346  opacity: 1;8347  pointer-events: auto;8348}83498350/* TOC inner */8351.peach-notes-toc {8352  position: relative;8353  display: flex;8354  flex-direction: column;8355  height: 100%;8356  padding-top: env(safe-area-inset-top, 0px);8357  padding-bottom: env(safe-area-inset-bottom, 0px);8358}83598360/* Shared header */8361.peach-notes-header {8362  display: flex;8363  align-items: center;8364  padding: 12px 16px;8365  gap: 12px;8366  flex-shrink: 0;8367  min-height: 52px;8368  position: relative;8369  z-index: 2;8370}83718372.peach-notes-back {8373  font-size: 22px;8374  color: var(--peach-t2);8375  background: none;8376  border: none;8377  padding: 4px;8378  cursor: pointer;8379  line-height: 1;8380  flex-shrink: 0;8381  transition: color 150ms ease;8382  -webkit-tap-highlight-color: transparent;8383}83848385.peach-notes-back:active { color: var(--peach-t0); }83868387.peach-notes-header-title {8388  flex: 1;8389  font-family: 'Cormorant Garamond', serif;8390  font-style: italic;8391  font-size: 22px;8392  color: var(--peach-t0);8393  text-align: center;8394}83958396.peach-notes-header-title.is-breadcrumb {8397  font-family: 'IBM Plex Mono', monospace;8398  font-style: normal;8399  font-size: 11px;8400  color: var(--peach-t3);8401  letter-spacing: 0.08em;8402  text-transform: uppercase;8403  cursor: pointer;8404}84058406.peach-notes-header-actions {8407  display: flex;8408  gap: 8px;8409  flex-shrink: 0;8410}84118412.peach-notes-header-btn {8413  width: 36px;8414  height: 36px;8415  display: flex;8416  align-items: center;8417  justify-content: center;8418  background: none;8419  border: none;8420  color: var(--peach-t2);8421  cursor: pointer;8422  border-radius: 8px;8423  font-size: 16px;8424  transition: color 150ms ease, background 150ms ease;8425  -webkit-tap-highlight-color: transparent;8426}84278428.peach-notes-header-btn:active {8429  background: rgba(255,255,255,0.06);8430  color: var(--peach-t0);8431}84328433/* Inline search bar */8434.peach-notes-search-input {8435  flex: 1;8436  background: none;8437  border: none;8438  outline: none;8439  font-family: 'IBM Plex Mono', monospace;8440  font-size: 13px;8441  color: var(--peach-t0);8442  padding: 4px 0;8443  letter-spacing: 0.02em;8444}84458446.peach-notes-search-input::placeholder {8447  color: var(--peach-t3);8448}84498450/* TOC list */8451.peach-notes-list-container {8452  flex: 1;8453  overflow-y: auto;8454  overflow-x: hidden;8455  scrollbar-width: none;8456  -webkit-overflow-scrolling: touch;8457  overscroll-behavior: contain;8458  position: relative;8459  z-index: 1;8460}84618462.peach-notes-list-container::-webkit-scrollbar { display: none; }84638464/* Note row */8465.peach-note-row {8466  position: relative;8467  display: grid;8468  grid-template-columns: 44px 8px 1fr 8px auto;8469  align-items: center;8470  min-height: 72px;8471  padding: 16px 20px;8472  border-bottom: 0.5px solid var(--peach-border);8473  cursor: pointer;8474  overflow: hidden;8475  touch-action: pan-y;8476  user-select: none;8477  -webkit-user-select: none;8478  -webkit-tap-highlight-color: transparent;8479}84808481.peach-note-row:first-child {8482  border-top: 0.5px solid var(--peach-border);8483}84848485.peach-note-row:active {8486  background: rgba(255,255,255,0.02);8487}84888489.peach-note-numeral {8490  font-family: 'Cormorant Garamond', serif;8491  font-style: italic;8492  font-size: 15px;8493  color: var(--peach-accent);8494  text-align: right;8495  line-height: 1;8496  flex-shrink: 0;8497}84988499.peach-note-title-gap { /* grid spacer */ }85008501.peach-note-title {8502  font-family: 'Cormorant Garamond', serif;8503  font-style: italic;8504  font-size: 18px;8505  color: var(--peach-t0);8506  line-height: 1.3;8507  min-width: 0;8508  overflow-wrap: break-word;8509}85108511.peach-note-title-match {8512  color: var(--peach-accent);8513}85148515.peach-note-date {8516  font-family: 'IBM Plex Mono', monospace;8517  font-size: 11px;8518  color: var(--peach-t2);8519  white-space: nowrap;8520  text-align: right;8521  flex-shrink: 0;8522  grid-column: 5;8523}85248525/* Swipe underlays */8526.peach-note-row-underlay {8527  position: absolute;8528  inset: 0;8529  display: flex;8530  align-items: center;8531  padding: 0 24px;8532  font-family: 'IBM Plex Mono', monospace;8533  font-size: 11px;8534  letter-spacing: 0.1em;8535  pointer-events: none;8536  z-index: 0;8537}85388539.peach-note-row-underlay--delete {8540  background: #8B2020;8541  color: rgba(255,255,255,0.9);8542  justify-content: flex-end;8543}85448545.peach-note-row-underlay--archive {8546  background: var(--peach-accent);8547  color: #0C0A06;8548  justify-content: flex-start;8549}85508551/* Delete confirm strip */8552.peach-note-delete-confirm {8553  position: absolute;8554  inset: 0;8555  background: var(--peach-bg);8556  display: flex;8557  align-items: center;8558  gap: 12px;8559  padding: 0 20px;8560  font-family: 'IBM Plex Mono', monospace;8561  font-size: 11px;8562  color: var(--peach-t1);8563  letter-spacing: 0.04em;8564  animation: peach-delete-confirm-in 150ms ease both;8565  z-index: 10;8566}85678568@keyframes peach-delete-confirm-in {8569  from { opacity: 0; }8570  to   { opacity: 1; }8571}85728573.peach-note-delete-confirm-btn {8574  background: #8B2020;8575  color: rgba(255,255,255,0.9);8576  border: none;8577  border-radius: 6px;8578  padding: 4px 10px;8579  font-family: 'IBM Plex Mono', monospace;8580  font-size: 10px;8581  cursor: pointer;8582  letter-spacing: 0.06em;8583}85848585.peach-note-delete-cancel-btn {8586  background: none;8587  border: none;8588  color: var(--peach-t3);8589  font-family: 'IBM Plex Mono', monospace;8590  font-size: 10px;8591  cursor: pointer;8592  letter-spacing: 0.06em;8593  padding: 4px 6px;8594}85958596/* + New note button */8597.peach-notes-new-btn {8598  font-family: 'IBM Plex Mono', monospace;8599  font-size: 12px;8600  color: var(--peach-t3);8601  text-align: center;8602  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8603  background: none;8604  border: none;8605  width: 100%;8606  cursor: pointer;8607  letter-spacing: 0.04em;8608  transition: color 150ms ease;8609  -webkit-tap-highlight-color: transparent;8610}86118612.peach-notes-new-btn:active { color: var(--peach-accent); }86138614/* Empty state */8615.peach-notes-empty {8616  display: flex;8617  flex-direction: column;8618  align-items: center;8619  justify-content: center;8620  flex: 1;8621  padding: 48px 32px;8622  gap: 16px;8623}86248625.peach-notes-empty-text {8626  font-family: 'Cormorant Garamond', serif;8627  font-style: italic;8628  font-size: 20px;8629  color: var(--peach-t3);8630  text-align: center;8631  margin: 0;8632  line-height: 1.4;8633  white-space: pre-line;8634}86358636/* ── Editor surface ── */86378638.peach-note-editor-surface {8639  position: absolute;8640  inset: 0;8641  background: var(--peach-bg);8642  display: flex;8643  flex-direction: column;8644  padding-top: env(safe-area-inset-top, 0px);8645}86468647.peach-note-editor-scroll {8648  flex: 1;8649  overflow-y: auto;8650  overflow-x: hidden;8651  scrollbar-width: none;8652  -webkit-overflow-scrolling: touch;8653  padding: 0 24px 120px;8654  position: relative;8655  z-index: 1;8656}86578658.peach-note-editor-scroll::-webkit-scrollbar { display: none; }86598660/* Desktop toolbar (always visible above body) */8661.peach-note-toolbar-desktop-inline {8662  display: flex;8663  align-items: center;8664  gap: 2px;8665  padding: 6px 0 12px;8666  margin-bottom: 4px;8667  border-bottom: 0.5px solid var(--peach-border);8668}86698670/* Title field */8671.peach-note-title-field {8672  font-family: 'Cormorant Garamond', serif;8673  font-style: italic;8674  font-size: 32px;8675  font-weight: 600;8676  color: var(--peach-t0);8677  line-height: 1.2;8678  padding: 8px 0 0;8679  outline: none;8680  min-height: 44px;8681  word-break: break-word;8682  position: relative;8683  z-index: 1;8684}86858686.peach-note-title-field:empty::before {8687  content: attr(data-placeholder);8688  color: var(--peach-t3);8689  pointer-events: none;8690}86918692/* Hairline separator */8693.peach-note-hairline {8694  height: 0.5px;8695  background: var(--peach-border);8696  margin: 12px 0 20px;8697  position: relative;8698  z-index: 1;8699}87008701/* Body field */8702.peach-note-body-field {8703  font-family: 'DM Sans', sans-serif;8704  font-size: 16px;8705  color: var(--peach-t0);8706  line-height: 1.85;8707  padding: 0;8708  outline: none;8709  min-height: 240px;8710  word-break: break-word;8711  position: relative;8712  z-index: 1;8713}87148715.peach-note-body-field:empty::before {8716  content: attr(data-placeholder);8717  color: var(--peach-t3);8718  font-style: italic;8719  pointer-events: none;8720}87218722.peach-note-body-field h2 {8723  font-family: 'Cormorant Garamond', serif;8724  font-style: italic;8725  font-size: 22px;8726  font-weight: 600;8727  color: var(--peach-t0);8728  margin: 20px 0 8px;8729}87308731.peach-note-body-field blockquote {8732  border-left: 2px solid var(--peach-accent);8733  margin: 12px 0;8734  padding-left: 16px;8735  color: var(--peach-t1);8736  font-style: italic;8737}87388739.peach-note-body-field ul,8740.peach-note-body-field ol {8741  padding-left: 20px;8742  margin: 8px 0;8743}87448745.peach-note-body-field li {8746  margin: 4px 0;8747}87488749.peach-note-body-field hr {8750  border: none;8751  border-top: 0.5px solid var(--peach-border);8752  margin: 16px 0;8753}87548755/* Saved indicator */8756.peach-note-saved-indicator {8757  font-family: 'IBM Plex Mono', monospace;8758  font-size: 11px;8759  color: var(--peach-t3);8760  letter-spacing: 0.04em;8761  text-align: right;8762  padding: 6px 24px;8763  flex-shrink: 0;8764  transition: opacity 300ms ease;8765  pointer-events: none;8766  position: relative;8767  z-index: 1;8768}87698770/* Mobile keyboard toolbar */8771.peach-note-toolbar-mobile {8772  display: flex;8773  align-items: center;8774  padding: 8px 16px;8775  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));8776  background: var(--peach-bg);8777  border-top: 0.5px solid var(--peach-border);8778  gap: 4px;8779  flex-shrink: 0;8780  position: relative;8781  z-index: 10;8782}87838784.peach-note-toolbar-btn {8785  min-width: 36px;8786  height: 36px;8787  display: flex;8788  align-items: center;8789  justify-content: center;8790  background: none;8791  border: none;8792  border-radius: 8px;8793  cursor: pointer;8794  font-size: 14px;8795  color: var(--peach-t1);8796  font-family: 'DM Sans', sans-serif;8797  font-weight: 600;8798  transition: background 100ms ease, color 100ms ease;8799  -webkit-tap-highlight-color: transparent;8800}88018802.peach-note-toolbar-btn--italic { font-style: italic; }8803.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }8804.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }88058806.peach-note-toolbar-divider {8807  width: 0.5px;8808  height: 20px;8809  background: var(--peach-border);8810  margin: 0 4px;8811  flex-shrink: 0;8812}88138814.peach-note-toolbar-spacer { flex: 1; }88158816/* Desktop: larger headline in TOC */8817@media (min-width: 400px) {8818  .peach-notes-header-title:not(.is-breadcrumb) {8819    font-size: 32px;8820  }88218822  .peach-note-row {8823    min-height: 64px;8824    padding: 14px 16px;8825  }8826}88278828/* Flying title — shared element during expansion/collapse */88298830/* ─── Light theme overrides ───────────────────────────────────────────────8831   Tokens that cannot be expressed as variable substitutions — hardcoded8832   context-specific values that need separate light-mode rules. */88338834/* Settings section headers: use text-label (#79766F) per restoration brief —8835   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY8836   presence without fighting the light parchment background. */8837.light .peach-settings-sub-label,8838[data-theme="light"] .peach-settings-sub-label,8839.light .peach-settings-nav-label,8840[data-theme="light"] .peach-settings-nav-label {8841  color: #79766F;8842}88438844/* Secondary action buttons (ghost / subtle): filled with input-well surface8845   so they read as recessed against the parchment card background. */8846.light .peach-btn--ghost:not(.peach-icon-btn),8847[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {8848  background: #EEE7DD;8849  border-color: #DDD5CB;8850  color: #1A1208;8851}8852.light .peach-icon-btn,8853[data-theme="light"] .peach-icon-btn {8854  background: transparent;8855  border-color: transparent;8856}8857.light .peach-btn--subtle,8858[data-theme="light"] .peach-btn--subtle {8859  background: #EEE7DD;8860  border-color: #DDD5CB;8861}88628863/* Wide secondary action button on the lock screen — override the8864   hardcoded dark-mode rgba values with warm parchment equivalents. */8865.light .peach-lock-secondary,8866[data-theme="light"] .peach-lock-secondary {8867  background: #EEE7DD;8868  border-color: #DDD5CB;8869  color: #1A1208;8870}8871.light .peach-lock-secondary:hover,8872[data-theme="light"] .peach-lock-secondary:hover {8873  background: #F0E9DF;8874}88758876/* Entry row hover: bg-row lifts the row above the card surface. */8877.light .peach-entry-row:hover,8878[data-theme="light"] .peach-entry-row:hover {8879  background: #F2EBE1;8880}8881.light .peach-entry-row.is-active,8882[data-theme="light"] .peach-entry-row.is-active {8883  background: #F2EBE1;8884}8885.light .peach-entry-row.is-selected,8886[data-theme="light"] .peach-entry-row.is-selected {8887  background: #F5EDE2;8888}88898890/* ──────────────────────────────────────────────────────────────────────────8891   Chirp pairing flow — bird-stage animation (Phase 1)8892   See src/popup/components/ChirpPairingFlow.tsx and the brief §6.2.8893   Three-act animation gated on the [data-phase] attribute of8894   .peach-chirp-pair; child layers (birds, chirp arcs, flight wave, dot)8895   each react via either pose class or visibility flag.8896   Tokens: accent surfaces use var(--peach-accent); bird illustration8897   colours are baked into the SVG per the brand-peach exception in §3.1.8898   ────────────────────────────────────────────────────────────────────── */88998900.peach-chirp-pair {8901  position: absolute;8902  inset: 0;8903  z-index: 3;8904  display: flex;8905  flex-direction: column;8906  padding: 14px 12px 12px;8907  width: 100%;8908  box-sizing: border-box;8909  gap: 0;8910  background:8911    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),8912    var(--peach-bg);8913  color: var(--peach-t0);8914  overflow-y: auto;8915  overflow-x: hidden;8916  scrollbar-width: none;8917  isolation: isolate;8918  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;8919}8920@keyframes peach-chirp-overlay-in {8921  from { opacity: 0; transform: translateY(8px); }8922  to   { opacity: 1; transform: translateY(0); }8923}8924.peach-chirp-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }8925.peach-chirp-pair::before {8926  content: '';8927  position: absolute;8928  inset: 0;8929  border-radius: inherit;8930  pointer-events: none;8931  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);8932  z-index: 0;8933}8934.peach-chirp-pair > * { position: relative; z-index: 1; }89358936/* Header --------------------------------------------------------------- */8937.peach-chirp-head {8938  display: flex; align-items: center; gap: 10px;8939}8940.peach-chirp-back {8941  width: 32px; height: 32px;8942  display: inline-flex; align-items: center; justify-content: center;8943  background: transparent;8944  border: none;8945  border-radius: 8px;8946  color: var(--peach-t1);8947  cursor: pointer;8948  transition: color 0.15s ease, box-shadow 0.15s ease;8949}8950.peach-chirp-back:hover {8951  color: var(--peach-accent);8952  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);8953}8954.peach-chirp-title {8955  font-family: var(--font-display, Georgia, serif);8956  font-style: italic;8957  font-size: 24px;8958  font-weight: 500;8959  letter-spacing: 0.005em;8960  color: var(--peach-t0);8961  line-height: 1;8962}8963.peach-chirp-head-spacer { flex: 1; }89648965/* Chip row ------------------------------------------------------------- */8966.peach-chirp-chip-row {8967  display: flex;8968  align-items: center;8969  justify-content: flex-start;8970  margin-top: 12px;8971}8972.peach-chirp-chip {8973  display: inline-flex; align-items: center; gap: 8px;8974  padding: 5px 10px 5px 8px;8975  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);8976  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);8977  border-radius: 999px;8978  font-family: var(--peach-mono, ui-monospace, monospace);8979  font-size: 11px;8980  letter-spacing: 0.04em;8981  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));8982}8983.peach-chirp-chip-dot {8984  width: 6px; height: 6px; border-radius: 50%;8985  background: var(--peach-accent);8986  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);8987}8988.peach-chirp-chip[data-phase="paired"] {8989  background: color-mix(in srgb, #4f9eda 12%, transparent);8990  border-color: color-mix(in srgb, #4f9eda 28%, transparent);8991  color: #76b6e8;8992}8993.peach-chirp-chip[data-phase="paired"] .peach-chirp-chip-dot {8994  background: #76b6e8;8995  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);8996}8997.peach-chirp-chip[data-phase="timeout"],8998.peach-chirp-chip[data-phase="mic_denied"],8999.peach-chirp-chip[data-phase="version_mismatch"],9000.peach-chirp-chip[data-phase="handshake_failed"] {9001  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9002  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9003  color: var(--peach-warn, #d29257);9004}9005.peach-chirp-chip[data-phase="timeout"] .peach-chirp-chip-dot,9006.peach-chirp-chip[data-phase="mic_denied"] .peach-chirp-chip-dot,9007.peach-chirp-chip[data-phase="version_mismatch"] .peach-chirp-chip-dot,9008.peach-chirp-chip[data-phase="handshake_failed"] .peach-chirp-chip-dot {9009  background: var(--peach-warn, #d29257);9010  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9011}90129013/* Bird stage ----------------------------------------------------------- */9014.peach-chirp-stage {9015  position: relative;9016  margin: 14px 0 8px;9017  height: 180px;9018  border-radius: 12px;9019  background:9020    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9021    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),9022    color-mix(in srgb, var(--peach-bg) 92%, #000);9023  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);9024  overflow: hidden;9025  isolation: isolate;9026}9027.peach-chirp-stage::after {9028  content: '';9029  position: absolute;9030  left: 12%; right: 12%;9031  bottom: 36px;9032  height: 1px;9033  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9034}90359036.peach-chirp-bird-slot {9037  position: absolute;9038  bottom: 8px;9039  width: 100px;9040  height: 110px;9041  display: flex;9042  align-items: flex-end;9043  justify-content: center;9044}9045.peach-chirp-bird-slot-desktop { left: 28px; }9046.peach-chirp-bird-slot-mobile { right: 28px; }90479048/* Mobile bird hops in from the right when handshake begins */9049.peach-chirp-bird-slot-mobile {9050  opacity: 1;9051  transform: translateX(-6px);9052  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9053}9054.peach-chirp-stage.act-listening .peach-chirp-bird-slot-mobile,9055.peach-chirp-stage.act-chirping .peach-chirp-bird-slot-mobile,9056.peach-chirp-stage.act-idle .peach-chirp-bird-slot-mobile {9057  opacity: 0;9058  transform: translateX(60px) rotate(8deg);9059}9060.peach-chirp-stage.act-handshake .peach-chirp-bird-slot-desktop,9061.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop {9062  transform: translateX(6px);9063  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9064}90659066/* Paired: both birds bob together */9067.peach-chirp-stage.act-paired .peach-chirp-bird-slot {9068  animation: peach-chirp-happy-bob 1.2s ease-in-out infinite;9069}9070.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { animation-delay: 0.2s; }9071.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop { --bb-x: 6px; }9072.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { --bb-x: -6px; }9073@keyframes peach-chirp-happy-bob {9074  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9075  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9076}90779078/* Bird internal -------------------------------------------------------- */9079.peach-chirp-bird {9080  width: 108px;9081  height: 108px;9082  transform-origin: 50% 95%;9083}9084.peach-chirp-bird svg { width: 100%; height: 100%; overflow: visible; }90859086.peach-chirp-bird-body {9087  transform-origin: 50% 80%;9088  animation: peach-chirp-bird-bob 2.4s ease-in-out infinite;9089}9090@keyframes peach-chirp-bird-bob {9091  0%, 100% { transform: translateY(0) scale(1, 1); }9092  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9093}90949095.peach-chirp-bird-eye-group {9096  animation: peach-chirp-blink 5.2s steps(1, end) infinite;9097  transform-origin: center;9098  transform-box: fill-box;9099}9100@keyframes peach-chirp-blink {9101  0%, 92%, 96%, 100% { transform: scaleY(1); }9102  94%                { transform: scaleY(0.05); }9103}91049105/* Pose: chirping — beak opens, head bobs, aura blooms */9106.peach-chirp-bird-pose-chirping .peach-chirp-bird-body {9107  animation:9108    peach-chirp-bird-bob 2.4s ease-in-out infinite,9109    peach-chirp-squeeze 1.7s ease-in-out infinite;9110}9111@keyframes peach-chirp-squeeze {9112  0%, 70%, 100% { transform-origin: 50% 85%; }9113  78%           { transform: scale(1.04, 0.96) translateY(1px); }9114  86%           { transform: scale(0.98, 1.02); }9115}9116.peach-chirp-bird-pose-chirping .peach-chirp-bird-head-group {9117  animation: peach-chirp-head-bob 1.7s ease-in-out infinite;9118}9119@keyframes peach-chirp-head-bob {9120  0%, 70%, 100% { transform: translateY(0) rotate(0); }9121  78%           { transform: translateY(-3px) rotate(-4deg); }9122  86%           { transform: translateY(-1px) rotate(-2deg); }9123}9124.peach-chirp-bird-pose-chirping .peach-chirp-bird-beak {9125  animation: peach-chirp-beak-open 1.7s ease-in-out infinite;9126}9127@keyframes peach-chirp-beak-open {9128  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9129  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9130  86%           { transform: rotate(-6deg); }9131}9132.peach-chirp-bird-pose-chirping .peach-chirp-bird-aura {9133  animation: peach-chirp-aura 1.7s ease-in-out infinite;9134}9135@keyframes peach-chirp-aura {9136  0%, 100% { opacity: 0; }9137  50%      { opacity: 0.8; }9138}9139.peach-chirp-bird-pose-chirping .peach-chirp-bird-tail {9140  animation: peach-chirp-tail-twitch 1.7s ease-in-out infinite;9141  transform-origin: 100% 50%;9142}9143@keyframes peach-chirp-tail-twitch {9144  0%, 75%, 100% { transform: rotate(0); }9145  82%           { transform: rotate(-3deg) translateX(-1px); }9146}91479148/* Pose: attentive — head tilts toward partner */9149.peach-chirp-bird-pose-attentive .peach-chirp-bird-head-group {9150  animation: peach-chirp-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9151}9152@keyframes peach-chirp-head-tilt {9153  0%   { transform: rotate(0) translateY(0); }9154  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9155  100% { transform: rotate(-6deg); }9156}9157.peach-chirp-bird-pose-attentive .peach-chirp-bird-tail {9158  animation: peach-chirp-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9159  transform-origin: 100% 50%;9160}9161@keyframes peach-chirp-tail-cock {9162  0%   { transform: rotate(0); }9163  100% { transform: rotate(-4deg); }9164}91659166/* Pose: happy — wing flutter, tuft perk, tail wag */9167.peach-chirp-bird-pose-happy .peach-chirp-bird-wing {9168  transform-origin: 80% 60%;9169  animation: peach-chirp-wing-flutter 0.32s ease-in-out 5;9170}9171@keyframes peach-chirp-wing-flutter {9172  0%, 100% { transform: rotate(0) translateY(0); }9173  50%      { transform: rotate(-16deg) translateY(-2px); }9174}9175.peach-chirp-bird-pose-happy .peach-chirp-bird-tuft {9176  transform-origin: 0% 100%;9177  animation: peach-chirp-tuft-perk 0.4s ease-in-out 3;9178}9179@keyframes peach-chirp-tuft-perk {9180  0%, 100% { transform: rotate(0); }9181  50%      { transform: rotate(-15deg) translateY(-1px); }9182}9183.peach-chirp-bird-pose-happy .peach-chirp-bird-tail {9184  transform-origin: 100% 50%;9185  animation: peach-chirp-tail-wag 0.5s ease-in-out 4;9186}9187@keyframes peach-chirp-tail-wag {9188  0%, 100% { transform: rotate(0); }9189  25%      { transform: rotate(6deg); }9190  75%      { transform: rotate(-6deg); }9191}9192.peach-chirp-bird-pose-happy .peach-chirp-bird-head-group {9193  animation: peach-chirp-head-perk 0.5s ease-out;9194}9195@keyframes peach-chirp-head-perk {9196  0%   { transform: translateY(0); }9197  40%  { transform: translateY(-3px) rotate(2deg); }9198  100% { transform: translateY(0); }9199}92009201/* Pose: sad — body droops forward */9202.peach-chirp-bird-pose-sad .peach-chirp-bird-body {9203  transform: translateY(5px) rotate(-2deg);9204  animation: none;9205}9206.peach-chirp-bird-pose-sad .peach-chirp-bird-head-group {9207  transform: translateY(4px) rotate(8deg);9208}9209.peach-chirp-bird-pose-sad .peach-chirp-bird-tuft { transform: rotate(15deg) translateY(2px); }9210.peach-chirp-bird-pose-sad .peach-chirp-bird-tail { transform: rotate(8deg) translateY(2px); }92119212.peach-chirp-bird-pose-hidden { opacity: 0; }92139214/* Chirp arcs ----------------------------------------------------------- */9215.peach-chirp-arcs {9216  position: absolute;9217  top: 18px;9218  width: 96px;9219  height: 70px;9220  pointer-events: none;9221}9222.peach-chirp-arcs-right { right: -60px; }9223.peach-chirp-arcs-left  { left: -60px; transform: scaleX(-1); }9224.peach-chirp-arc {9225  position: absolute;9226  top: 50%;9227  left: 0;9228  width: 40px;9229  height: 40px;9230  margin-top: -20px;9231  border: 1.2px solid #f4d5a8;9232  border-color: transparent #f4d5a8 transparent transparent;9233  border-radius: 50%;9234  opacity: 0;9235  animation: peach-chirp-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9236}9237@keyframes peach-chirp-arc-expand {9238  0%   { transform: scale(0.4); opacity: 0; }9239  20%  { opacity: 0.9; }9240  100% { transform: scale(1.6); opacity: 0; }9241}92429243/* Flight wave ---------------------------------------------------------- */9244.peach-chirp-flight-track {9245  position: absolute;9246  inset: 32px 36px 38px 36px;9247  pointer-events: none;9248}9249.peach-chirp-flight-wave {9250  position: absolute;9251  top: 8px;9252  left: 76px;9253  right: 76px;9254  height: 60px;9255  width: auto;9256  opacity: 0;9257  transition: opacity 0.15s ease;9258  stroke: #f4d5a8;9259  fill: none;9260}9261.peach-chirp-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9262.peach-chirp-flight-wave.is-visible { opacity: 1; }9263.peach-chirp-flight-path,9264.peach-chirp-flight-path-2 {9265  stroke-dasharray: 240;9266  stroke-dashoffset: 240;9267  stroke-linecap: round;9268  fill: none;9269}9270.peach-chirp-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9271.peach-chirp-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9272.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path {9273  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9274}9275.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path-2 {9276  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9277}9278@keyframes peach-chirp-fly {9279  0%   { stroke-dashoffset: 240; opacity: 0; }9280  20%  { opacity: 1; }9281  100% { stroke-dashoffset: -120; opacity: 0; }9282}92839284/* Connection dot ------------------------------------------------------- */9285.peach-chirp-dot {9286  position: absolute;9287  top: 50%; left: 50%;9288  transform: translate(-50%, -50%);9289  width: 40px; height: 40px;9290  opacity: 0;9291  pointer-events: none;9292  transition: opacity 0.3s ease;9293  color: var(--peach-accent);9294}9295.peach-chirp-dot.is-visible { opacity: 1; }9296.peach-chirp-dot-glow {9297  position: absolute; top: 50%; left: 50%;9298  transform: translate(-50%, -50%);9299  width: 38px; height: 38px;9300  border-radius: 50%;9301  filter: blur(10px);9302  opacity: 0.55;9303  background: var(--peach-accent);9304  animation: peach-chirp-dot-bloom 1.4s ease-out;9305}9306.peach-chirp-dot-core {9307  position: absolute; top: 50%; left: 50%;9308  transform: translate(-50%, -50%);9309  width: 8px; height: 8px;9310  border-radius: 50%;9311  background: var(--peach-accent);9312  box-shadow: 0 0 12px currentColor;9313  animation: peach-chirp-dot-core 1.4s ease-out;9314}9315.peach-chirp-dot-ring {9316  position: absolute; top: 50%; left: 50%;9317  width: 60px; height: 60px;9318  transform: translate(-50%, -50%);9319  animation: peach-chirp-dot-ring 1.4s linear;9320  stroke: var(--peach-accent);9321}9322@keyframes peach-chirp-dot-bloom {9323  0%   { width: 4px; height: 4px; opacity: 0; }9324  35%  { width: 60px; height: 60px; opacity: 0.7; }9325  100% { width: 38px; height: 38px; opacity: 0.55; }9326}9327@keyframes peach-chirp-dot-core {9328  0%   { width: 0; height: 0; }9329  35%  { width: 12px; height: 12px; }9330  100% { width: 8px; height: 8px; }9331}9332@keyframes peach-chirp-dot-ring {9333  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9334  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9335  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9336}93379338/* Motes — drift upward across the stage */9339.peach-chirp-motes {9340  position: absolute;9341  inset: 0;9342  pointer-events: none;9343}9344.peach-chirp-mote {9345  position: absolute;9346  width: 2px; height: 2px;9347  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9348  border-radius: 50%;9349  bottom: 32px;9350  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9351  opacity: 0;9352  animation: peach-chirp-mote-drift 6s linear infinite;9353  animation-delay: calc(var(--mote-i, 0) * 0.7s);9354}9355@keyframes peach-chirp-mote-drift {9356  0%   { transform: translateY(0); opacity: 0; }9357  10%  { opacity: 0.6; }9358  90%  { opacity: 0.1; }9359  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9360}93619362/* Status copy ---------------------------------------------------------- */9363.peach-chirp-copy-host {9364  margin: 4px 4px 10px;9365  text-align: center;9366  min-height: 50px;9367}9368.peach-chirp-copy {9369  animation: peach-chirp-copy-in 0.35s ease both;9370}9371@keyframes peach-chirp-copy-in {9372  from { opacity: 0; transform: translateY(4px); }9373  to   { opacity: 1; transform: translateY(0); }9374}9375.peach-chirp-headline {9376  font-family: var(--font-display, Georgia, serif);9377  font-style: italic;9378  font-size: 20px;9379  font-weight: 500;9380  line-height: 1.2;9381  letter-spacing: 0.005em;9382  color: var(--peach-t0);9383  margin-bottom: 6px;9384}9385.peach-chirp-copy-listening .peach-chirp-headline,9386.peach-chirp-copy-chirping .peach-chirp-headline,9387.peach-chirp-copy-idle .peach-chirp-headline {9388  font-family: inherit;9389  font-style: normal;9390  font-weight: 500;9391  font-size: 15px;9392  color: var(--peach-t0);9393  letter-spacing: 0;9394}9395.peach-chirp-copy-paired .peach-chirp-headline {9396  color: var(--peach-t0);9397  font-weight: 600;9398}9399.peach-chirp-sub {9400  font-size: 12.5px;9401  line-height: 1.45;9402  color: var(--peach-t1);9403  max-width: 280px;9404  margin: 0 auto;9405  text-wrap: pretty;9406}94079408/* Status action -------------------------------------------------------- */9409.peach-chirp-action {9410  margin: 2px 4px 10px;9411  margin-top: auto;9412  display: flex;9413  flex-direction: column;9414  gap: 8px;9415}9416.peach-chirp-mic-notice {9417  margin: 0;9418  font-size: 0.625rem;9419  color: var(--peach-t2);9420  line-height: 1.4;9421}9422.peach-chirp-action-waiting {9423  display: flex;9424  align-items: center;9425  justify-content: space-between;9426  gap: 12px;9427}9428.peach-chirp-cancel {9429  min-width: 96px;9430}9431.peach-chirp-listening {9432  display: inline-flex; align-items: center; gap: 4px;9433  font-family: var(--peach-mono, ui-monospace, monospace);9434  font-size: 9.5px;9435  text-transform: uppercase;9436  letter-spacing: 0.12em;9437  color: var(--peach-t1);9438  padding: 8px 10px;9439}9440.peach-chirp-listen-dot {9441  width: 4px; height: 4px;9442  border-radius: 50%;9443  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9444  animation: peach-chirp-listen-pulse 1.2s ease-in-out infinite;9445}9446.peach-chirp-listen-dot:nth-child(2) { animation-delay: 0.2s; }9447.peach-chirp-listen-dot:nth-child(3) { animation-delay: 0.4s; }9448.peach-chirp-listen-label { margin-left: 6px; }9449@keyframes peach-chirp-listen-pulse {9450  0%, 100% { opacity: 0.25; transform: scale(0.9); }9451  50%      { opacity: 1;     transform: scale(1.15); }9452}94539454.peach-chirp-action-handshake {9455  display: flex;9456  flex-direction: column;9457  align-items: center;9458  gap: 8px;9459  padding: 8px 4px;9460}9461.peach-chirp-meter {9462  width: 100%;9463  max-width: 280px;9464  height: 2px;9465  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9466  border-radius: 2px;9467  position: relative;9468  overflow: hidden;9469}9470.peach-chirp-meter-bar {9471  position: absolute;9472  top: 0; bottom: 0;9473  width: 30%;9474  left: -30%;9475  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9476  animation: peach-chirp-meter-sweep 1.4s ease-in-out infinite;9477}9478@keyframes peach-chirp-meter-sweep {9479  0%   { left: -30%; }9480  100% { left: 100%; }9481}9482.peach-chirp-meter-label {9483  font-family: var(--peach-mono, ui-monospace, monospace);9484  font-size: 9.5px;9485  text-transform: uppercase;9486  letter-spacing: 0.14em;9487  color: var(--peach-t1);9488}94899490.peach-chirp-action-paired {9491  display: flex;9492  align-items: center;9493  gap: 10px;9494}9495.peach-chirp-device-confirm {9496  flex: 1;9497  display: inline-flex;9498  align-items: center;9499  gap: 8px;9500  padding: 9px 10px 9px 12px;9501  border-radius: 10px;9502  background: color-mix(in srgb, #76b6e8 12%, transparent);9503  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9504  font-size: 12.5px;9505  color: var(--peach-t0);9506  min-width: 0;9507}9508.peach-chirp-device-confirm-glyph {9509  display: inline-flex;9510  color: #76b6e8;9511}9512.peach-chirp-device-confirm-name {9513  flex: 1;9514  overflow: hidden;9515  text-overflow: ellipsis;9516  white-space: nowrap;9517}9518.peach-chirp-device-confirm-trust {9519  font-family: var(--peach-mono, ui-monospace, monospace);9520  font-size: 9.5px;9521  text-transform: uppercase;9522  letter-spacing: 0.1em;9523  color: #76b6e8;9524  padding: 2px 6px;9525  border-radius: 4px;9526  background: color-mix(in srgb, #76b6e8 14%, transparent);9527}9528.peach-chirp-done {9529  min-width: 80px;9530}9531.peach-chirp-retry {9532  align-self: center;9533  display: block;9534  margin: 6px auto 0;9535  min-width: 120px;9536}9537.peach-chirp-mic-help {9538  font-size: 12px;9539  color: var(--peach-t1);9540  text-align: center;9541  max-width: 320px;9542  margin: 0 auto;9543}95449545/* Rest state — bird stage at idle pose, primary CTA + paired list */9546.peach-chirp-pair[data-phase="idle"] .peach-chirp-stage {9547  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9548  height: 160px;9549}9550.peach-chirp-pair-start {9551  width: 100%;9552  display: inline-flex;9553  align-items: center;9554  justify-content: center;9555  gap: 8px;9556  padding: 11px 14px;9557  border-radius: 10px;9558  background: var(--peach-accent);9559  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9560  color: #1a0905;9561  font-family: inherit;9562  font-size: 13px;9563  font-weight: 600;9564  letter-spacing: 0.01em;9565  cursor: pointer;9566  transition: filter 0.15s ease, transform 0.1s ease;9567}9568.peach-chirp-pair-start:hover { filter: brightness(1.08); }9569.peach-chirp-pair-start:active { transform: translateY(1px); }95709571.peach-chirp-paired-section {9572  margin-top: 14px;9573  display: flex;9574  flex-direction: column;9575  gap: 8px;9576}9577.peach-chirp-paired-heading {9578  margin: 0;9579  font-family: var(--peach-mono, ui-monospace, monospace);9580  font-size: 10px;9581  font-weight: 500;9582  letter-spacing: 0.14em;9583  text-transform: uppercase;9584  color: var(--peach-t1);9585}95869587/* Footer --------------------------------------------------------------- */9588.peach-chirp-foot {9589  margin: 10px -4px -2px;9590  margin-top: auto;9591}9592.peach-chirp-foot-divider {9593  height: 1px;9594  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9595  margin-bottom: 10px;9596}9597.peach-chirp-foot-text {9598  font-size: 11px;9599  line-height: 1.5;9600  color: var(--peach-t1);9601  text-align: center;9602  padding: 0 4px;9603  text-wrap: pretty;9604}96059606/* Screen-reader-only live region. Kept off the visual flow but read by9607   assistive tech as the pairing phase advances. */9608.peach-sr-only {9609  position: absolute;9610  width: 1px; height: 1px;9611  padding: 0; margin: -1px;9612  overflow: hidden;9613  clip: rect(0, 0, 0, 0);9614  white-space: nowrap;9615  border: 0;9616}96179618/* Reduced motion — stage simplifies to opacity transitions only */9619@media (prefers-reduced-motion: reduce) {9620  .peach-chirp-bird-body,9621  .peach-chirp-bird-head-group,9622  .peach-chirp-bird-beak,9623  .peach-chirp-bird-wing,9624  .peach-chirp-bird-tuft,9625  .peach-chirp-bird-tail,9626  .peach-chirp-bird-eye-group,9627  .peach-chirp-bird-aura,9628  .peach-chirp-arc,9629  .peach-chirp-flight-path,9630  .peach-chirp-flight-path-2,9631  .peach-chirp-dot-glow,9632  .peach-chirp-dot-core,9633  .peach-chirp-dot-ring,9634  .peach-chirp-mote,9635  .peach-chirp-meter-bar,9636  .peach-chirp-listen-dot,9637  .peach-chirp-bird-slot,9638  .peach-chirp-bird-slot-mobile {9639    animation: none !important;9640    transition: opacity 0.2s linear !important;9641  }9642}96439644/* ─────────────────────────────────────────────────────────────────9645   Settings → Sync surface (v3 ChirpSync). Wraps the same bird9646   animation used by the pairing flow with a paired-devices list and9647   the "Pair a device" CTA.9648   ───────────────────────────────────────────────────────────────── */9649.peach-chirp-settings {9650  position: absolute;9651  inset: 0;9652  z-index: 3;9653  display: flex;9654  flex-direction: column;9655  gap: 18px;9656  padding: 14px 12px 12px;9657  width: 100%;9658  box-sizing: border-box;9659  overflow-y: auto;9660  overflow-x: hidden;9661  /* Same warm Chirp surface as the pairing screen — unifies the two views. */9662  background:9663    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9664    var(--peach-bg);9665  color: var(--peach-t0);9666  isolation: isolate;9667  /* Hide native scrollbar — content fits 99% of the time and a chunky9668     gutter ruins the surface. */9669  scrollbar-width: none;9670  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9671}9672.peach-chirp-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9673.peach-chirp-settings::before {9674  content: '';9675  position: absolute;9676  inset: 0;9677  pointer-events: none;9678  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9679  z-index: 0;9680}9681.peach-chirp-settings > * { position: relative; z-index: 1; }96829683.peach-chirp-settings--pairing {9684  padding: 0;9685  align-items: stretch;9686  justify-content: stretch;9687  background: none;9688  isolation: auto;9689}9690.peach-chirp-settings--pairing::before { display: none; }96919692.peach-chirp-settings-header {9693  display: flex;9694  align-items: center;9695  gap: 10px;9696}9697.peach-chirp-settings-title {9698  margin: 0;9699  font-family: var(--font-display, Georgia, serif);9700  font-style: italic;9701  font-size: 24px;9702  font-weight: 500;9703  line-height: 1;9704  color: var(--peach-t0);9705  letter-spacing: 0.005em;9706}9707.peach-chirp-settings-section {9708  margin: 6px 0 -4px;9709  font-size: 11px;9710  font-weight: 600;9711  letter-spacing: 0.08em;9712  text-transform: uppercase;9713  color: var(--peach-text-muted);9714}9715.peach-chirp-settings-error {9716  font-size: 12px;9717  padding: 8px 10px;9718  border-radius: 8px;9719  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);9720  color: var(--peach-text);9721}9722.peach-chirp-settings-footer {9723  margin-top: auto;9724  padding-top: 18px;9725  font-size: 11.5px;9726  line-height: 1.5;9727  color: var(--peach-text-muted);9728  text-align: center;9729}97309731/* Hero card shown when no devices are paired yet. */9732.peach-chirp-hero {9733  display: flex;9734  flex-direction: column;9735  align-items: center;9736  gap: 12px;9737  padding: 20px 12px 8px;9738  text-align: center;9739}9740.peach-chirp-hero-svg {9741  display: block;9742  max-width: 100%;9743  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));9744}9745.peach-chirp-hero-headline {9746  margin: 0;9747  font-family: var(--font-display, Georgia, serif);9748  font-style: italic;9749  font-size: 20px;9750  font-weight: 500;9751  line-height: 1.2;9752  letter-spacing: 0.005em;9753  color: var(--peach-t0);9754}9755.peach-chirp-hero-sub {9756  margin: 0;9757  font-size: 13px;9758  line-height: 1.5;9759  color: var(--peach-t1);9760  max-width: 320px;9761  text-wrap: pretty;9762}97639764.peach-chirp-pair-cta {9765  display: flex;9766  justify-content: center;9767  padding: 4px 0 6px;9768}9769.peach-chirp-pair-button {9770  display: inline-flex;9771  align-items: center;9772  gap: 8px;9773  min-width: 220px;9774  justify-content: center;9775}9776.peach-chirp-pair-button-icon {9777  flex: 0 0 auto;9778}97799780/* Paired devices list. Roomy rows that look at home next to the rest9781   of Settings; stale rows get a soft warm-warning border tint. */9782.peach-chirp-device-list {9783  list-style: none;9784  margin: 0;9785  padding: 0;9786  display: flex;9787  flex-direction: column;9788  gap: 8px;9789}9790.peach-chirp-device-row {9791  display: flex;9792  align-items: center;9793  gap: 12px;9794  padding: 12px;9795  border-radius: 10px;9796  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9797  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);9798}9799.peach-chirp-device-row[data-stale="true"] {9800  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);9801}9802.peach-chirp-device-icon {9803  width: 32px;9804  height: 32px;9805  display: flex;9806  align-items: center;9807  justify-content: center;9808  border-radius: 8px;9809  color: var(--peach-text);9810  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);9811}9812.peach-chirp-device-info {9813  flex: 1;9814  display: flex;9815  flex-direction: column;9816  gap: 2px;9817  min-width: 0;9818}9819.peach-chirp-device-name {9820  font-size: 14px;9821  font-weight: 600;9822  color: var(--peach-text);9823  overflow: hidden;9824  text-overflow: ellipsis;9825  white-space: nowrap;9826}9827.peach-chirp-device-meta {9828  font-size: 11.5px;9829  color: var(--peach-text-muted);9830  display: flex;9831  flex-wrap: wrap;9832  align-items: center;9833  gap: 8px;9834}9835.peach-chirp-device-badge {9836  font-size: 10.5px;9837  font-weight: 500;9838  letter-spacing: 0.02em;9839  padding: 2px 6px;9840  border-radius: 999px;9841  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);9842  color: var(--peach-text);9843}9844.peach-chirp-device-stale {9845  font-size: 10.5px;9846  font-weight: 500;9847  color: var(--peach-warn, #d29257);9848}9849.peach-chirp-device-remove {9850  flex: 0 0 auto;9851  color: var(--peach-text-muted);9852}9853.peach-chirp-device-remove:hover {9854  color: var(--peach-danger, #c25b4a);9855}9856.peach-chirp-unpair-confirm {9857  display: flex;9858  gap: 6px;9859  align-items: center;9860}98619862/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */9863.peach-chirp-pro-card {9864  position: relative;9865  margin: 18px 12px;9866  padding: 18px 20px 22px;9867  border-radius: 22px;9868  background:9869    radial-gradient(140% 90% at 50% 0%,9870      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,9871      transparent 60%),9872    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9873  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);9874  box-shadow:9875    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,9876    0 18px 40px -24px rgba(0, 0, 0, 0.45);9877  display: flex;9878  flex-direction: column;9879  align-items: center;9880  gap: 10px;9881  text-align: center;9882  overflow: hidden;9883}9884.peach-chirp-pro-stage {9885  position: relative;9886  width: 220px;9887  height: 140px;9888  display: flex;9889  align-items: flex-end;9890  justify-content: center;9891  margin-bottom: 2px;9892}9893.peach-chirp-pro-bird-slot {9894  width: 140px;9895  height: 132px;9896  display: flex;9897  align-items: flex-end;9898  justify-content: center;9899  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));9900}9901.peach-chirp-pro-bird-slot .peach-chirp-bird {9902  width: 100%;9903  height: 100%;9904}9905.peach-chirp-pro-bird-slot .peach-chirp-bird svg {9906  width: 100%;9907  height: 100%;9908  overflow: visible;9909}9910.peach-chirp-pro-chirp {9911  position: absolute;9912  top: 14px;9913  right: 8px;9914  width: 96px;9915  height: 80px;9916  color: var(--peach-accent);9917  animation: peach-chirp-pulse 2.6s ease-in-out infinite;9918  transform-origin: 0% 50%;9919  pointer-events: none;9920}9921@keyframes peach-chirp-pulse {9922  0%, 100% { opacity: 0.35; transform: translateX(0) scale(0.92); }9923  45%      { opacity: 1;    transform: translateX(2px) scale(1); }9924  70%      { opacity: 0.6;  transform: translateX(4px) scale(1.04); }9925}9926@media (prefers-reduced-motion: reduce) {9927  .peach-chirp-pro-chirp { animation: none; opacity: 0.7; }9928}9929.peach-chirp-pro-headline {9930  margin: 4px 0 0;9931  font-family: var(--font-display, "Cormorant Garamond", serif);9932  font-style: italic;9933  font-size: 19px;9934  font-weight: 500;9935  letter-spacing: 0.01em;9936  color: var(--peach-t0);9937  max-width: 280px;9938  line-height: 1.25;9939}9940.peach-chirp-pro-body {9941  margin: 0;9942  font-size: 13px;9943  line-height: 1.55;9944  color: var(--peach-t1);9945  max-width: 300px;9946}9947.peach-chirp-pro-cta {9948  margin-top: 4px;9949}9950.peach-chirp-pro-foot {9951  margin: 2px 0 0;9952  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;9953  font-size: 0.625rem;9954  letter-spacing: 0.08em;9955  text-transform: uppercase;9956  color: var(--peach-t2);9957  opacity: 0.75;9958}99599960/* Shell border and shadow in light mode: match dark mode's near-invisible9961   border weight so the popup frame looks the same in both themes. */9962.light .peach-shell,9963.light .peach-screen {9964  border-color: rgba(26, 18, 8, 0.07);9965  box-shadow:9966    0 2px 8px rgba(80, 56, 32, 0.08),9967    0 14px 48px rgba(80, 56, 32, 0.10),9968    0 0 0 1px rgba(26, 18, 8, 0.04);9969}