popup.css

1html,2body,3#app,4.popup-root {5  width: 320px;6  min-height: 520px;7  height: 520px;8  margin: 0;9}1011body {12  overflow: hidden;13  background: var(--bg);14  color: var(--t0);15  font-family: var(--font-ui);16  font-weight: 300;17  position: relative;18}1920* {21  box-sizing: border-box;22}2324button,25input,26textarea,27select {28  font: inherit;29}3031button {32  border: 0;33}3435.popup-root {36  position: relative;37  overflow: hidden;38}3940.peach-theme {41  color: var(--peach-t0);42  font-family: var(--font-ui);43  font-weight: 300;44  box-sizing: border-box;45  text-align: left;46}47.peach-theme, .peach-theme * { box-sizing: inherit; }4849.peach-brand-mark {50  width: 14px;51  height: 14px;52  flex-shrink: 0;53}5455.peach-status-pip.is-hidden {56  display: none;57}5859.peach-status-pip.unlocked {60  background: var(--peach-health-ok);61  box-shadow: 0 0 6px rgba(100, 210, 100, 0.6);62}6364.peach-status-pip.pulse {65  animation: pip-pulse 400ms var(--peach-curve-settle) both;66}6768/* Shell */69.peach-shell, .peach-screen {70  background:71    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),72    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),73    var(--peach-bg);74  border: 1px solid var(--peach-t3);75  box-shadow:76    0 2px 8px rgba(0,0,0,0.55),77    0 14px 48px rgba(0,0,0,0.7),78    0 0 0 1px rgba(240,232,216,0.04);79  overflow: hidden;80}81.peach-shell {82  display: grid;83  grid-template-rows: auto 1fr;84  min-height: 520px;85  position: relative;86  isolation: isolate;87}8889.peach-shell[data-surface="extension"] {90  width: min(320px, 100vw);91  border-radius: 0;92  height: 520px;93  max-height: 520px;94  overflow: hidden;95}9697/* ── Lock screen – full-window lock/create stage ── */98.lock-screen--vault-stage {99  display: flex;100  flex-direction: column;101  gap: 18px;102  padding: 20px 18px 18px;103  justify-content: flex-start;104}105.lock-screen--vault-stage .peach-lock-panel {106  margin-top: auto;107}108.peach-lock-headline--unlock {109  max-width: 220px;110}111.peach-lock-hero--unlock {112  padding-top: 14px;113}114.peach-lock-panel--unlock {115  gap: 10px;116}117118.peach-lock-restore-link {119  background: transparent;120  border: none;121  cursor: pointer;122  font-family: var(--font-mono);123  font-size: 0.625rem;124  letter-spacing: 0.08em;125  color: var(--t1);126  padding: 5px 0;127  text-align: left;128  transition: color 150ms ease;129}130131.peach-lock-restore-link:hover {132  color: var(--t0);133}134.peach-shell[data-surface="extension"] .peach-stage {135  min-height: 250px;136}137138/* Screen (unlock) */139.peach-screen {140  width: min(320px, 100vw);141  min-height: 100%;142  height: 100%;143  border-radius: 0;144  padding: 16px 20px 18px;145  display: grid;146  gap: 14px;147}148.peach-screen[data-motion-phase="enter"] {149  animation: peach-screen-enter var(--peach-dur-600) var(--peach-curve-arrival) both;150}151.peach-screen-header { min-height: 20px; }152153/* Wordmark */154.peach-wordmark {155  margin: 0;156  font-family: var(--font-display);157  font-size: 0.9375rem;158  font-style: italic;159  letter-spacing: 0.03em;160  color: var(--peach-t0);161  display: inline-flex;162  min-height: 1em;163}164165/* Motion text / char animation */166.peach-motion-text { display: inline-flex; min-height: 1em; }167.peach-motion-char {168  display: inline-block;169  white-space: pre;170  opacity: 0;171  transform: translateY(0.22em);172  animation: peach-char-enter var(--peach-motion-duration, 380ms) var(--peach-curve-arrival) forwards;173  animation-delay: calc(var(--peach-char-index, 0) * 20ms);174}175176/* Chrome */177.peach-chrome {178  position: relative;179  z-index: 10;180  padding: 16px 20px 0;181  display: flex;182  justify-content: space-between;183  align-items: center;184  /* z-index:10 keeps the header icons above `.peach-loading` (Suspense185     fallback) per §15 regression guard. Without pointer-events:none, the186     empty header strip also sits above `.peach-overlay-view` (z-index:2)187     and swallows clicks meant for an overlay's back button / top search. */188  pointer-events: none;189}190.peach-chrome .peach-btn { pointer-events: auto; }191.peach-chrome.is-hidden-for-overlay,192.peach-search-wrap.is-hidden-for-overlay {193  opacity: 0;194  visibility: hidden;195  pointer-events: none;196}197/* Chirp-sync owns its own surface and header — fully collapse the global198   chrome row so the warm gradient reaches the popup edge. */199.peach-chrome.is-collapsed,200.peach-search-wrap.is-collapsed {201  display: none;202}203.peach-wordmark-wrap { display: flex; align-items: center; gap: 5px; }204.peach-status-pip {205  width: 5px;206  height: 5px;207  border-radius: 50%;208  background: var(--peach-t3);209  display: inline-flex;210  flex-shrink: 0;211  transition: background 400ms ease, box-shadow 400ms ease;212}213.peach-chrome-actions { display: flex; gap: 6px; }214215/* Shell body */216.peach-shell-body {217  position: relative;218  display: grid;219  grid-template-rows: 1fr auto;220  min-height: 0;221  min-width: 0;222  width: 100%;223  overflow: hidden;224  height: 100%;225}226.peach-shell-veil {227  position: absolute; inset: 0;228  background: #000; opacity: 0;229  pointer-events: none; z-index: 1;230}231.peach-shell[data-motion-phase="enter"] .peach-shell-body {232  animation: peach-shell-fade-in var(--peach-dur-600) var(--peach-curve-arrival) both;233}234.peach-shell[data-motion-phase="exit"] .peach-shell-veil {235  animation: peach-veil-in 300ms var(--peach-curve-departure) forwards;236}237238/* Content frame */239.peach-content-frame {240  display: grid;241  grid-template-rows: 1fr auto;242  grid-template-columns: minmax(0, 1fr);243  align-content: start;244  min-height: 0;245  min-width: 0;246  overflow: hidden;247  transition: opacity 80ms ease, transform 80ms ease;248}249.peach-content-frame.navigating {250  opacity: 0.93;251  transform: translateX(2px);252}253.peach-content-frame[data-content-phase="enter"] {254  animation: peach-content-enter 135ms ease-out both;255}256.peach-content-frame[data-content-phase="exit"] {257  animation: peach-content-exit 95ms ease-in forwards;258}259.peach-content-frame[data-content-phase="idle"] { opacity: 1; transform: none; }260261/* Stage */262.peach-stage {263  padding: 10px 20px 12px;264  display: grid;265  gap: 12px;266  align-content: start;267  min-width: 0;268  min-height: 0;269  max-width: 100%;270  overflow-y: auto;271  overflow-x: hidden;272  scrollbar-width: none;273  -ms-overflow-style: none;274  overscroll-behavior: contain;275}276.peach-stage::-webkit-scrollbar { display: none; }277278/* Entry name */279.peach-entry-name-wrap { position: relative; overflow: hidden; max-width: 100%; }280.peach-entry-header {281  position: relative;282  z-index: 1;283  display: flex;284  align-items: flex-start;285  gap: 6px;286  min-width: 0;287}288.peach-entry-header-name {289  flex: 1;290  min-width: 0;291}292.peach-entry-name {293  margin: 0;294  padding-bottom: 0.12em;295  font-family: var(--font-display);296  font-style: italic; font-weight: 400;297  font-size: 44px; line-height: 0.95;298  color: var(--peach-t0);299  display: -webkit-box;300  -webkit-line-clamp: 2;301  -webkit-box-orient: vertical;302  overflow: hidden;303  text-wrap: balance;304}305.peach-entry-name--lg { font-size: 40px; }306.peach-entry-name--xl { font-size: 34px; line-height: 0.98; }307.peach-entry-name--xxl { font-size: 30px; line-height: 1.02; }308.peach-entry-name-text { display: block; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; padding-bottom: 0.12em; }309310/* Trash icon in entry header */311.peach-entry-trash-btn {312  flex-shrink: 0;313  padding: 4px;314  margin-top: 4px;315  background: transparent;316  border: none;317  cursor: pointer;318  color: var(--peach-t2);319  border-radius: 4px;320  transition: color 140ms ease, background 140ms ease;321  display: flex;322  align-items: center;323  justify-content: center;324}325.peach-entry-trash-btn:hover {326  color: var(--peach-t1);327  background: var(--peach-t3);328}329.peach-entry-trash-confirm {330  display: flex;331  align-items: center;332  gap: 6px;333  flex-shrink: 0;334  margin-top: 6px;335  flex-wrap: nowrap;336}337.peach-entry-trash-confirm-label {338  font-family: var(--font-mono);339  font-size: 0.5625rem;340  letter-spacing: 0.1em;341  color: var(--peach-t2);342  white-space: nowrap;343}344.peach-entry-name-button {345  padding: 0;346  background: transparent;347  text-align: left;348  cursor: pointer;349  max-width: 100%;350  overflow: hidden;351  display: block;352}353.peach-entry-name-char {354  display: inline-block;355  white-space: pre;356  opacity: 0;357  transform: translateY(0.22em);358  animation: peach-char-enter 380ms var(--peach-curve-arrival) forwards;359  animation-delay: calc(var(--char-index, 0) * 20ms);360}361362/* Domain */363.peach-domain { border-top: 1px solid var(--peach-t3); padding-top: 9px; }364.peach-domain-row {365  width: 100%; border: 0; background: transparent; color: inherit;366  padding: 0; display: flex; justify-content: space-between; align-items: baseline;367  cursor: default;368}369.peach-domain-value {370  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;371  font-size: 0.625rem; font-style: italic;372  letter-spacing: 0.12em; color: var(--peach-t1);373}374375/* Fields */376.peach-fields { display: grid; gap: 10px; }377.peach-field-card { display: grid; gap: 7px; }378.peach-label {379  font-family: Inter, system-ui, sans-serif;380  text-transform: uppercase; letter-spacing: 0.2em;381  font-size: 0.5rem; color: var(--peach-t2);382}383.peach-add-field-btn {384  align-self: flex-start;385  background: none; border: none; padding: 2px 0;386  font-family: Inter, system-ui, sans-serif;387  font-size: 0.6875rem; color: var(--peach-accent);388  cursor: pointer; opacity: 0.75;389  letter-spacing: 0.02em;390}391.peach-add-field-btn:hover { opacity: 1; }392.peach-field-value-row {393  display: flex; justify-content: space-between;394  align-items: center; gap: 8px;395  min-width: 0;396}397.peach-field-value {398  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;399  font-size: 0.8125rem; color: var(--peach-t1);400  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;401  flex: 1;402  min-width: 0;403}404.peach-password-value {405  display: inline-flex;406  align-items: center;407  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;408  font-size: 1rem; letter-spacing: 0.3em; color: var(--peach-t0);409  overflow: hidden;410  text-overflow: ellipsis;411  white-space: nowrap;412  flex: 1;413  min-width: 0;414  max-width: 100%;415}416.peach-password-value.is-revealed {417  font-size: 0.875rem;418  letter-spacing: 0.08em;419}420.peach-password-text,421.peach-password-mask {422  display: block;423  width: 100%;424  overflow: hidden;425  white-space: nowrap;426  /* Render as uniform mid-line bullets, not baseline periods */427  font-family: Inter, system-ui, sans-serif;428  font-size: 0.625rem;429  letter-spacing: 3px;430  user-select: none;431}432.peach-field-actions { display: flex; gap: 4px; align-items: center; }433.peach-password-strength { display: flex; align-items: center; gap: 8px; }434.peach-strength-bar { display: flex; gap: 3px; }435.peach-strength-seg { width: 28px; height: 4px; border-radius: 2px; background: #eee; }436.peach-strength-label {437  font-family: "IBM Plex Mono", monospace;438  font-style: italic;439  font-size: 0.5625rem;440  font-weight: 300;441  min-width: 36px;442  text-align: right;443  color: var(--peach-t2);444  letter-spacing: 0.06em;445}446447.peach-strength-hairline {448  display: flex;449  align-items: center;450  gap: 10px;451  margin-top: -2px;452}453454.peach-strength-hairline-track {455  flex: 1;456  height: 3px;457  border-radius: 2px;458  background: var(--peach-s2);459  overflow: hidden;460}461462.peach-strength-hairline-fill {463  height: 100%;464  border-radius: 2px;465  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),466    background 400ms ease;467}468469/* Note content (display) */470.peach-note-content {471  border-top: 1px solid var(--peach-t3);472  padding-top: 10px;473  font-family: var(--font-display);474  font-size: 0.9375rem;475  line-height: 1.75;476  color: var(--peach-t1);477}478479/* ── Inline editing ─────────────────────────────────────────────────── */480481/* Clickable display values */482.peach-inline-clickable {483  cursor: text;484  border-radius: 3px;485  transition: background 150ms ease;486}487.peach-inline-clickable:hover {488  background: rgba(240, 232, 216, 0.05);489}490491/* Subtle "edit" hint that appears on hover */492.peach-inline-edit-hint {493  font-family: Inter, system-ui, sans-serif;494  font-size: 0.5625rem;495  text-transform: uppercase;496  letter-spacing: 0.14em;497  color: var(--peach-t2);498  opacity: 0;499  transition: opacity 120ms ease;500  pointer-events: none;501  margin-left: 6px;502  flex-shrink: 0;503}504.peach-domain-row:hover .peach-inline-edit-hint {505  opacity: 1;506}507508/* Title editing */509.peach-inline-title-wrap {510  display: flex;511  flex-direction: column;512  gap: 6px;513}514.peach-inline-title-input {515  font-family: var(--font-display);516  font-style: italic;517  font-weight: 400;518  font-size: 40px;519  line-height: 0.95;520  color: var(--peach-t0);521  background: transparent;522  border: none;523  border-bottom: 1px solid var(--peach-accent);524  outline: none;525  width: 100%;526  padding: 2px 0;527}528529/* Generic inline field */530.peach-inline-field-wrap {531  display: flex;532  flex-direction: column;533  gap: 6px;534}535.peach-inline-input {536  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;537  font-size: 0.8125rem;538  color: var(--peach-t0);539  background: transparent;540  border: none;541  border-bottom: 1px solid var(--peach-accent);542  outline: none;543  width: 100%;544  padding: 3px 0;545}546.peach-inline-textarea {547  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;548  font-size: 0.6875rem;549  line-height: 1.7;550  color: var(--peach-t0);551  background: rgba(240, 232, 216, 0.04);552  border: 1px solid var(--peach-accent);553  border-radius: 4px;554  outline: none;555  width: 100%;556  padding: 8px;557  resize: vertical;558  min-height: 80px;559}560561/* Save / cancel row */562.peach-inline-actions {563  display: flex;564  gap: 6px;565  align-items: center;566}567.peach-inline-save-btn,568.peach-inline-cancel-btn {569  display: inline-flex;570  align-items: center;571  justify-content: center;572  width: 26px;573  height: 26px;574  border-radius: 4px;575  border: none;576  cursor: pointer;577  transition: background 140ms ease, opacity 140ms ease;578  flex-shrink: 0;579}580.peach-inline-save-btn {581  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);582  color: var(--peach-accent);583}584.peach-inline-save-btn:hover:not(:disabled) {585  background: color-mix(in srgb, var(--peach-accent) 30%, transparent);586}587.peach-inline-cancel-btn {588  background: rgba(240, 232, 216, 0.06);589  color: var(--peach-t2);590}591.peach-inline-cancel-btn:hover:not(:disabled) {592  background: rgba(240, 232, 216, 0.12);593  color: var(--peach-t1);594}595.peach-inline-save-btn:disabled,596.peach-inline-cancel-btn:disabled {597  opacity: 0.4;598  cursor: not-allowed;599}600601/* Inline password generator wrapper */602.peach-inline-generator-wrap {603  margin-top: 10px;604  padding-top: 10px;605  border-top: 1px solid var(--peach-t3);606  display: flex;607  flex-direction: column;608  gap: 8px;609}610.peach-inline-generator-cancel {611  align-self: flex-start;612  font-size: 0.6875rem;613  color: var(--peach-t2);614}615616/* "is-editing" card state */617.peach-field-card.is-editing {618  background: rgba(240, 232, 216, 0.02);619  border-radius: 6px;620  padding: 8px;621  margin: -8px;622}623624/* Inline tag editor on Entry detail view */625.peach-inline-tag-editor {626  display: flex;627  flex-direction: column;628  gap: 6px;629}630631/* Quiet inline "+ add X" link in the entry detail body */632.peach-entry-add-link {633  justify-self: start;634  margin-top: 8px;635}636637/* Additional URLs editor revealed by clicking the URL field */638.peach-additional-urls {639  display: flex;640  flex-direction: column;641  gap: 6px;642  margin-top: 8px;643}644.peach-additional-urls-label {645  font-size: 0.5625rem;646  letter-spacing: 0.1em;647  text-transform: uppercase;648  color: var(--peach-t2);649  margin-bottom: 2px;650}651/* UI-5 / LV-4: recovery words grid in the view-words reveal. */652.peach-recovery-words-grid {653  display: grid;654  grid-template-columns: 1fr 1fr;655  gap: 4px 10px;656}657.peach-recovery-word {658  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;659  font-size: 11px;660  color: var(--peach-t0);661}662.peach-recovery-word b {663  color: var(--peach-t2);664  font-weight: 400;665  margin-right: 4px;666}667668/* UI-1 / HV-1b: dismissible sync alert banners at the top of the vault view. */669.peach-sync-alerts {670  display: flex;671  flex-direction: column;672  gap: 6px;673  padding: 8px 12px 0;674}675.peach-sync-alert {676  display: flex;677  align-items: flex-start;678  gap: 8px;679  padding: 8px 10px;680  border-radius: 7px;681  background: color-mix(in srgb, #C8A840 14%, transparent);682  border: 1px solid color-mix(in srgb, #C8A840 38%, transparent);683}684.peach-sync-alert-text {685  flex: 1;686  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;687  font-size: 10px;688  line-height: 1.45;689  color: var(--peach-t0);690}691.peach-sync-alert-dismiss {692  flex-shrink: 0;693  background: none;694  border: none;695  color: var(--peach-t2);696  font-size: 14px;697  line-height: 1;698  cursor: pointer;699  padding: 0 2px;700}701.peach-sync-alert-dismiss:hover { color: var(--peach-t0); }702703/* UI-8 / LV-2: non-blocking homograph warning under the URL editor. */704.peach-homograph-warning {705  margin: 4px 0 2px;706  padding: 6px 8px;707  border-radius: 6px;708  background: color-mix(in srgb, var(--peach-breach) 12%, transparent);709  border: 1px solid color-mix(in srgb, var(--peach-breach) 36%, transparent);710  color: var(--peach-t1);711  font-size: 0.6875rem;712  line-height: 1.4;713}714.peach-additional-url-row {715  display: flex;716  align-items: center;717  gap: 6px;718}719.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }720.peach-additional-url-remove {721  background: transparent;722  border: 1px solid var(--peach-t3);723  color: var(--peach-t2);724  width: 22px;725  height: 22px;726  border-radius: 4px;727  cursor: pointer;728  font-size: 0.875rem;729  line-height: 1;730  display: inline-flex;731  align-items: center;732  justify-content: center;733  flex-shrink: 0;734  transition: color 120ms ease, border-color 120ms ease;735}736.peach-additional-url-remove:hover:not(:disabled) {737  color: var(--peach-accent);738  border-color: var(--peach-border-accent);739}740.peach-additional-urls-add { align-self: flex-start; }741742/* Delete row */743.peach-entry-delete-row {744  display: flex;745  align-items: center;746  gap: 8px;747  padding-top: 18px;748  margin-top: 8px;749  border-top: 1px solid var(--peach-t3);750}751.peach-delete-btn {752  font-size: 0.6875rem;753  color: var(--peach-t2);754  padding: 4px 0;755}756.peach-delete-confirm-text {757  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;758  font-size: 0.6875rem;759  font-style: italic;760  color: var(--peach-t2);761  flex-shrink: 0;762}763764/* TOTP band */765.peach-totp-band {766  border-top: 1px solid var(--peach-t3);767  padding: 12px 20px 14px;768  position: relative;769  display: grid;770  grid-template-columns: 1fr auto;771  gap: 10px;772}773.peach-totp-main {774  min-width: 0;775  cursor: pointer;776  user-select: none;777}778.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }779.peach-totp-code-row {780  display: flex;781  align-items: flex-end;782  gap: 10px;783  min-width: 0;784}785.peach-totp-code {786  margin: 2px 0 0;787  font-family: var(--font-display);788  font-style: italic;789  font-weight: 300;790  font-size: 38px; color: var(--peach-accent);791  line-height: 0.95; min-height: 1em;792  min-width: 0;793}794.peach-totp-code-text {795  display: inline-flex;796  overflow: hidden;797  text-overflow: ellipsis;798  white-space: nowrap;799}800.peach-totp-copy-btn {801  margin-bottom: 2px;802  flex-shrink: 0;803  border-color: transparent;804}805.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }806.peach-totp-countdown {807  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;808  font-size: 22px; color: var(--peach-t1);809}810.peach-totp-ring { transform: rotate(-90deg); }811.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }812.peach-totp-ring-progress {813  fill: none; stroke: var(--peach-accent); stroke-width: 2;814  stroke-linecap: round;815  transition: stroke-dashoffset 1s linear, stroke 500ms ease;816}817/* Search bar */818.peach-search-wrap {819  border-top: 1px solid var(--peach-t3);820  background: var(--peach-s1);821  min-height: 54px; position: relative;822  box-shadow: inset 0 6px 18px transparent;823  transition: box-shadow 700ms ease;824}825.peach-search-wrap::before {826  content: "";827  position: absolute;828  left: 0;829  top: 0;830  height: 2px;831  width: var(--peach-totp-progress, 0%);832  background: var(--peach-accent);833  opacity: 0;834  transition: width 1s linear, opacity 180ms ease;835  pointer-events: none;836}837.peach-shell[data-totp-active="true"] .peach-search-wrap::before {838  opacity: 0.9;839}840.peach-shell[data-totp-active="true"] .peach-search-wrap {841  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);842}843844@keyframes peach-totp-code-flare {845  0%   { filter: brightness(1); }846  25%  { filter: brightness(1.3); }847  100% { filter: brightness(1); }848}849.peach-totp-code.is-hot {850  animation: peach-totp-code-flare 3000ms ease-in-out both;851}852.peach-search-bar {853  min-height: 54px;854  display: grid;855  grid-template-columns: auto minmax(0, 1fr) auto;856  align-items: center;857  gap: 8px; padding: 0 9px 0 12px;858}859.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }860.peach-search-input {861  border: 0; background: transparent; color: var(--peach-t0);862  font-family: var(--font-display);863  font-style: italic; font-size: 18px;864  outline: none; width: 100%; min-width: 0; padding: 0;865  caret-color: var(--peach-accent);866}867.peach-search-input::placeholder { color: var(--peach-t2); }868.peach-search-meta {869  display: grid;870  grid-auto-flow: column;871  align-items: center;872  justify-content: end;873  gap: 6px;874  min-width: max-content;875}876.peach-search-counter {877  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;878  font-size: 0.625rem; color: var(--peach-t2);879  display: inline-flex;880  align-items: center;881  line-height: 1;882}883.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }884885/* Buttons */886.peach-btn {887  border: 1px solid transparent; border-radius: 12px;888  background: transparent; color: var(--peach-t0);889  font-family: Inter, system-ui, sans-serif;890  font-size: 0.75rem; letter-spacing: 0.02em; padding: 8px 12px;891  cursor: pointer;892  transition:893    background-color var(--peach-dur-80) var(--peach-curve-arrival),894    color var(--peach-dur-80) var(--peach-curve-arrival),895    border-color var(--peach-dur-150) var(--peach-curve-arrival);896}897.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }898.peach-btn:disabled {899  opacity: 0.45;900  cursor: not-allowed;901}902.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 0.6875rem; }903.peach-btn--md { min-height: 38px; }904.peach-btn--accent {905  background: var(--peach-accent);906  color: rgba(0,0,0,0.92);907  font-weight: 500;908  box-shadow:909    0 1px 0 rgba(255,255,255,0.08) inset,910    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),911    0 3px 16px var(--peach-glow),912    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);913}914.peach-btn--accent:hover:not(:disabled) {915  background: var(--peach-accent);916  filter: brightness(1.10) saturate(1.05);917  box-shadow:918    0 1px 0 rgba(255,255,255,0.10) inset,919    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),920    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),921    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);922}923.peach-btn--ghost:not(.peach-icon-btn) { border-color: var(--peach-t3); color: var(--peach-t1); }924.peach-btn--ghost.peach-icon-btn { color: var(--peach-t1); }925.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }926.peach-icon-btn {927  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;928  display: inline-flex; align-items: center; justify-content: center;929  border-color: transparent;930  transition:931    color var(--peach-dur-80) var(--peach-curve-arrival),932    box-shadow var(--peach-dur-150) var(--peach-curve-arrival),933    background-color var(--peach-dur-80) var(--peach-curve-arrival);934}935.peach-icon-btn:hover:not(:disabled) {936  background: transparent;937  color: var(--peach-accent);938  box-shadow: 0 0 12px color-mix(in srgb, var(--peach-accent) 28%, transparent),939              0 0 4px color-mix(in srgb, var(--peach-accent) 16%, transparent);940}941942.peach-btn:focus-visible {943  outline: none;944  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);945}946947/* Lock button */948.peach-lock-icon { transform-origin: center; }949.peach-lock-btn { color: var(--peach-accent); }950.peach-lock-btn.is-locking .peach-lock-icon {951  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);952}953954/* Biometric unlock button */955.peach-biometric-btn {956  display: flex;957  align-items: center;958  justify-content: center;959  gap: 6px;960  margin-top: 8px;961  width: 100%;962}963964/* Copy button */965.peach-copy-btn {966  position: relative; overflow: hidden;967  color: var(--peach-t2); border-color: var(--peach-t3);968}969.peach-copy-icon {970  display: inline-flex; align-items: center; justify-content: center;971  position: relative; z-index: 1;972}973.peach-copy-icon-svg { display: block; }974.peach-copy-sheen {975  position: absolute; inset: 0;976  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%);977  opacity: 0; transform: scaleX(0.15); transform-origin: left center;978}979.peach-copy-btn.is-copied {980  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;981  box-shadow:982    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),983    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),984    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);985}986.peach-copy-btn.is-copied .peach-copy-icon {987  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;988}989.peach-copy-btn.is-copied .peach-copy-sheen {990  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;991}992.peach-copy-btn.is-retreat {993  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;994}995.peach-copy-btn.is-retreat .peach-copy-sheen {996  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;997}998.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }999.peach-copy-drain-bar {1000  display: block; width: 100%; height: 100%;1001  background: var(--peach-accent); opacity: 0.7;1002  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;1003}10041005/* Unlock screen elements */1006.peach-underline-input {1007  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);1008  padding: 6px 0; background: transparent; color: var(--peach-t0);1009  outline: none;1010  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1011  font-size: 0.8125rem;1012  caret-color: var(--peach-accent);1013}1014.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }1015.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }1016.peach-hint {1017  margin: 0;1018  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1019  font-size: 0.625rem; color: var(--peach-t2);1020}1021.peach-unlock-footer {1022  margin-top: 4px; display: flex; align-items: center; gap: 7px;1023  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1024  font-size: 0.625rem; color: var(--peach-t2);1025}1026.peach-unlock-footer--lock {1027  padding-top: 2px;1028}10291030/* Breach badge */1031.peach-breach-badge {1032  display: flex;1033  position: relative;1034  z-index: 1;1035  align-items: center;1036  gap: 7px;1037  font-size: 0.5625rem;1038  color: var(--peach-breach);1039  padding: 5px 10px;1040  margin-bottom: 4px;1041  border-radius: 8px;1042  background: rgba(220, 80, 60, 0.07);1043  border: 1px solid rgba(220, 80, 60, 0.18);1044  letter-spacing: 0.04em;1045}10461047.peach-password-value.is-breached {1048  color: rgba(220, 80, 60, 0.75);1049  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1050}10511052/* ── Overlay views ─────────────────────────────────────────────────── */1053.peach-overlay-view {1054  position: absolute;1055  inset: 0;1056  display: flex;1057  flex-direction: column;1058  background:1059    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1060    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1061    var(--peach-bg);1062  z-index: 2;1063  overflow: hidden;1064  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1065}10661067.peach-overlay-view:has(.stk-shell) {1068  background: var(--peach-bg);1069}1070@keyframes overlay-in {1071  from { opacity: 0; transform: translateY(8px); }1072  to   { opacity: 1; transform: translateY(0); }1073}1074.peach-overlay-view.ov-enter-up {1075  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1076}1077.peach-overlay-view.ov-exit-up {1078  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1079}1080.peach-overlay-view.ov-enter-right {1081  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1082}1083.peach-overlay-view.ov-exit-right {1084  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1085}10861087@keyframes ov-enter-up {1088  from { opacity: 0; transform: translateY(18px); }1089  to   { opacity: 1; transform: translateY(0); }1090}1091@keyframes ov-exit-up {1092  from { opacity: 1; transform: translateY(0); }1093  to   { opacity: 0; transform: translateY(-12px); }1094}1095@keyframes ov-enter-right {1096  from { opacity: 0; transform: translateX(20px); }1097  to   { opacity: 1; transform: translateX(0); }1098}1099@keyframes ov-exit-right {1100  from { opacity: 1; transform: translateX(0); }1101  to   { opacity: 0; transform: translateX(20px); }1102}11031104/* Overlay shared header */1105.peach-overlay-header {1106  padding: 10px 12px 8px;1107  display: flex;1108  align-items: center;1109  gap: 10px;1110  flex-shrink: 0;1111}1112/* Back button — circular pill matching the settings stack masthead (.stk-back) */1113.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1114  width: 28px;1115  height: 28px;1116  flex: 0 0 28px;1117  border-radius: 999px;1118  border: 1px solid var(--peach-border);1119  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1120  color: var(--peach-t1);1121  padding: 0;1122}1123.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1124  color: var(--peach-t0);1125  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1126  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1127}1128.peach-overlay-title {1129  font-family: var(--font-display);1130  font-style: italic;1131  font-weight: 400;1132  font-size: 20px;1133  line-height: 1;1134  color: var(--peach-t0);1135  flex: 1;1136  text-align: center;1137}1138/* Balances the 28px back button so the title stays visually centred */1139.peach-overlay-spacer {1140  width: 28px;1141  flex: 0 0 28px;1142}11431144.peach-overlay-card {1145  background: var(--peach-s1);1146  border: 1px solid var(--peach-t3);1147  border-radius: 12px;1148  overflow: hidden;1149  width: 100%;1150}11511152.peach-onboarding-alt-actions {1153  display: flex;1154  flex-direction: column;1155  gap: 4px;1156  padding: 0;1157}11581159.peach-settings-copy {1160  margin: 0 0 10px;1161  font-size: 0.6875rem;1162  line-height: 1.5;1163  color: var(--peach-t2);1164}11651166.peach-settings-copy strong {1167  color: var(--peach-t0);1168}11691170.peach-settings-copy--spacious {1171  margin-bottom: 12px;1172}11731174.peach-settings-copy--result {1175  color: var(--peach-accent);1176  font-size: 0.8125rem;1177  text-align: center;1178  padding: 8px 0;1179}11801181.peach-settings-copy--danger {1182  color: var(--peach-breach);1183}11841185.peach-settings-copy--success {1186  color: var(--peach-accent);1187}11881189.peach-inline-feedback {1190  font-size: 0.6875rem;1191  margin: 10px 0 0;1192}11931194.peach-inline-feedback--ok {1195  color: var(--peach-accent);1196}11971198.peach-inline-feedback--error {1199  color: var(--peach-breach);1200}12011202.peach-inline-feedback--muted {1203  color: var(--peach-t2);1204  font-size: 0.625rem;1205  margin: 4px 0;1206}12071208.peach-inline-feedback--spaced {1209  margin-top: 12px;1210}12111212.peach-settings-actions--row {1213  display: flex;1214  gap: 6px;1215}12161217.peach-settings-actions--end {1218  margin-top: 14px;1219  justify-content: flex-end;1220}12211222.peach-settings-stack {1223  display: flex;1224  flex-direction: column;1225  gap: 6px;1226}12271228.peach-settings-stack--tight {1229  gap: 4px;1230}12311232.peach-settings-stack--spacious {1233  gap: 8px;1234}12351236.peach-settings-input {1237  width: 100%;1238  box-sizing: border-box;1239  padding: 8px 10px;1240  background: rgba(0, 0, 0, 0.22);1241  border: 1px solid transparent;1242  border-radius: 6px;1243  color: var(--peach-t0);1244  font-family: var(--font-ui);1245  font-size: 0.75rem;1246  outline: none;1247  transition: border-color 120ms ease, background 120ms ease;1248}12491250.peach-settings-input:focus {1251  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1252  background: rgba(0, 0, 0, 0.28);1253}12541255.peach-settings-input[type="password"] {1256  font-family: var(--font-mono);1257  letter-spacing: 0.04em;1258}12591260.peach-hidden-file-input {1261  display: none;1262}12631264.peach-checkbox-note {1265  display: flex;1266  align-items: flex-start;1267  gap: 8px;1268  font-size: 0.6875rem;1269  color: var(--peach-t1);1270  cursor: pointer;1271  margin: 12px 0;1272}12731274.peach-checkbox-note input {1275  margin-top: 1px;1276}12771278.peach-danger-notice {1279  background: rgba(220, 80, 60, 0.08);1280  border: 1px solid rgba(220, 80, 60, 0.2);1281  border-radius: 6px;1282  padding: 9px 11px;1283  font-size: 0.6875rem;1284  color: var(--peach-t1);1285  line-height: 1.5;1286}12871288.peach-info-notice {1289  font-size: 0.6875rem;1290  color: var(--peach-t1);1291  line-height: 1.5;1292  background: var(--surface-card);1293  border: 1px solid var(--peach-t3);1294  border-radius: 6px;1295  padding: 8px 10px;1296}12971298.peach-info-notice--warn {1299  border-color: rgba(220, 38, 38, 0.4);1300  background: rgba(220, 38, 38, 0.06);1301  color: rgba(220, 38, 38, 0.92);1302  margin-bottom: 8px;1303}13041305.peach-strength-row {1306  display: flex;1307  align-items: center;1308  gap: 8px;1309  margin-bottom: 10px;1310}13111312.peach-strength-track {1313  flex: 1;1314  height: 4px;1315  background: var(--peach-s2);1316  border-radius: 2px;1317  overflow: hidden;1318}13191320.peach-strength-fill {1321  height: 100%;1322  border-radius: 2px;1323  transition: width 120ms ease, background 120ms ease;1324}13251326/* ── Type selector tabs ── */1327.peach-type-tabs {1328  display: flex;1329  gap: 0;1330  background: var(--peach-t4);1331  border-radius: 8px;1332  padding: 3px;1333}13341335.peach-type-tab {1336  flex: 1;1337  display: flex;1338  align-items: center;1339  justify-content: center;1340  gap: 6px;1341  padding: 6px 10px;1342  border-radius: 6px;1343  border: none;1344  background: transparent;1345  cursor: pointer;1346  font-family: Inter, system-ui, sans-serif;1347  font-size: 0.6875rem;1348  font-weight: 400;1349  letter-spacing: 0.04em;1350  color: var(--peach-t1);1351  transition: background 150ms ease, color 150ms ease;1352}13531354.peach-type-tab.is-active {1355  background: var(--peach-s2);1356  color: var(--peach-t0);1357  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1358}13591360.peach-type-tab:not(.is-active):hover {1361  color: var(--peach-t0);1362}13631364.peach-type-tab svg {1365  opacity: 0.7;1366  flex-shrink: 0;1367}13681369.peach-type-tab.is-active svg {1370  opacity: 1;1371}13721373/* ── List view ───────────────────────────────────────────────────────── */1374.peach-list-top {1375  padding: 0 10px;1376  min-height: 46px;1377  display: flex;1378  align-items: center;1379  gap: 6px;1380  border-bottom: 1px solid var(--peach-t3);1381  flex-shrink: 0;1382  background: var(--peach-s1);1383}13841385.peach-vault-list {1386  flex: 1;1387  overflow-y: auto;1388  scrollbar-width: none;1389}1390.peach-vault-list::-webkit-scrollbar { display: none; }13911392/* Scrollbar — vault list */1393.peach-vault-list {1394  scrollbar-width: thin;1395  scrollbar-color: var(--peach-t3) transparent;1396}13971398.peach-vault-list::-webkit-scrollbar {1399  width: 3px;1400}14011402.peach-vault-list::-webkit-scrollbar-thumb {1403  background: var(--peach-t3);1404  border-radius: 2px;1405}14061407.peach-entry-row {1408  width: 100%;1409  display: flex;1410  align-items: center;1411  gap: 10px;1412  padding: 9px 16px;1413  background: transparent;1414  border: none;1415  border-bottom: 1px solid var(--peach-t3);1416  cursor: pointer;1417  color: inherit;1418  text-align: left;1419  transition: background 80ms ease;1420}1421.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1422.peach-entry-row:last-child { border-bottom: none; }1423.peach-entry-row.is-active {1424  box-shadow: inset 2px 0 0 var(--peach-accent);1425  background: rgba(240,232,216,0.03);1426}1427.peach-entry-row:focus-visible {1428  outline: none;1429  box-shadow: 0 0 0 1px var(--peach-border-accent);1430  background: rgba(240,232,216,0.03);1431}1432.peach-entry-row-icon {1433  width: 26px; height: 26px;1434  border-radius: 7px;1435  border: 1px solid var(--peach-t3);1436  display: flex; align-items: center; justify-content: center;1437  color: var(--peach-t2);1438  flex-shrink: 0;1439}1440.peach-entry-row-icon.is-breach {1441  border-color: rgba(220,80,60,0.3);1442  color: rgba(220,80,60,0.7);1443}14441445/* Title-initials chip used as the favicon fallback for login entries whose1446 * real favicon hasn't been cached by the browser yet (freshly-imported,1447 * never-visited domains). Background colour is hashed from the title so1448 * the same entry always shows the same chip. The chip fits the same1449 * 26×26 row icon slot the favicon would take. */1450.peach-favicon-initials {1451  display: inline-flex;1452  align-items: center;1453  justify-content: center;1454  width: 100%;1455  height: 100%;1456  border-radius: 4px;1457  font-family: "IBM Plex Mono", monospace;1458  font-size: 0.5625rem;1459  font-weight: 600;1460  letter-spacing: 0.04em;1461  color: rgba(240, 232, 216, 0.92);1462  text-transform: uppercase;1463  user-select: none;1464}1465.peach-entry-row-info { flex: 1; min-width: 0; }1466.peach-entry-row-name {1467  display: block;1468  font-family: var(--font-display);1469  font-size: 1.0625rem;1470  font-style: italic;1471  font-weight: 400;1472  color: var(--peach-t0);1473  line-height: 1.2;1474  white-space: nowrap;1475  overflow: hidden;1476  text-overflow: ellipsis;1477}1478.peach-entry-row-meta {1479  display: block;1480  font-family: "IBM Plex Mono", monospace;1481  font-size: 0.5625rem;1482  color: var(--peach-t2);1483  margin-top: 1px;1484  letter-spacing: 0.05em;1485}1486.peach-entry-row-dot {1487  width: 5px; height: 5px;1488  border-radius: 50%;1489  background: rgba(220,80,60,0.7);1490  flex-shrink: 0;1491}1492.peach-new-entry-row {1493  display: flex;1494  align-items: center;1495  justify-content: center;1496  gap: 6px;1497  width: 100%;1498  padding: 11px;1499  background: transparent;1500  border: none;1501  border-top: 1px solid var(--peach-t3);1502  color: var(--peach-t2);1503  font-family: "IBM Plex Mono", monospace;1504  font-size: 0.5625rem;1505  text-transform: uppercase;1506  letter-spacing: 0.14em;1507  cursor: pointer;1508  flex-shrink: 0;1509  transition: color 120ms ease, background 120ms ease;1510}1511.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }15121513/* ── Multi-select mode ─────────────────────────────────────────────── */15141515/* Select-mode trigger button in sort bar — same shape as trash btn */1516.peach-sort-select-btn {1517  display: flex;1518  align-items: center;1519  justify-content: center;1520  padding: 3px 5px;1521  background: transparent;1522  border: none;1523  cursor: pointer;1524  color: var(--peach-t2);1525  border-radius: 4px;1526  transition: color 140ms ease, background 140ms ease;1527}1528.peach-sort-select-btn:hover {1529  color: var(--peach-t1);1530  background: var(--peach-t3);1531}15321533/* Sort bar in select mode */1534.peach-select-cancel-btn {1535  background: transparent;1536  border: none;1537  padding: 0 4px;1538  cursor: pointer;1539  font-family: "IBM Plex Mono", monospace;1540  font-size: 0.5625rem;1541  letter-spacing: 0.12em;1542  text-transform: uppercase;1543  color: var(--peach-t2);1544  transition: color 140ms ease;1545  flex-shrink: 0;1546}1547.peach-select-cancel-btn:hover { color: var(--peach-t0); }15481549.peach-select-count-label {1550  flex: 1;1551  text-align: center;1552  font-family: "IBM Plex Mono", monospace;1553  font-size: 0.5625rem;1554  letter-spacing: 0.14em;1555  text-transform: uppercase;1556  color: var(--peach-t1);1557}15581559.peach-select-all-btn {1560  background: transparent;1561  border: none;1562  padding: 0 4px;1563  cursor: pointer;1564  font-family: "IBM Plex Mono", monospace;1565  font-size: 0.5625rem;1566  letter-spacing: 0.12em;1567  text-transform: uppercase;1568  color: var(--peach-t2);1569  transition: color 140ms ease;1570  flex-shrink: 0;1571}1572.peach-select-all-btn:hover { color: var(--peach-accent); }15731574/* List in select mode */1575.peach-vault-list.is-selecting .peach-entry-row {1576  cursor: default;1577}1578.peach-vault-list.is-selecting .peach-entry-row:hover {1579  background: rgba(240,232,216,0.02);1580}1581.peach-vault-list.is-selecting .peach-entry-row.is-selected {1582  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1583}1584.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1585  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1586}15871588/* Select indicator circles in icon slot */1589.peach-entry-row-icon.is-select-icon {1590  color: var(--peach-t2);1591}1592.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1593  color: var(--peach-accent);1594}15951596/* Delete action bar at bottom (replaces new-entry row) */1597.peach-select-action-bar {1598  display: flex;1599  align-items: center;1600  justify-content: center;1601  gap: 7px;1602  width: 100%;1603  padding: 11px;1604  background: transparent;1605  border: none;1606  border-top: 1px solid var(--peach-t3);1607  color: var(--peach-t1);1608  font-family: "IBM Plex Mono", monospace;1609  font-size: 0.5625rem;1610  text-transform: uppercase;1611  letter-spacing: 0.14em;1612  cursor: pointer;1613  flex-shrink: 0;1614  transition: color 120ms ease, background 120ms ease;1615}1616.peach-select-action-bar:not(:disabled):hover {1617  color: var(--peach-t0);1618  background: rgba(220,80,60,0.06);1619}1620.peach-select-action-bar:not(:disabled):hover svg {1621  stroke: rgba(220,80,60,0.8);1622}1623.peach-select-action-bar:disabled,1624.peach-select-action-bar.is-empty {1625  color: var(--peach-t2);1626  cursor: default;1627  opacity: 0.5;1628}1629.peach-search-counter-list {1630  white-space: nowrap;1631  flex-shrink: 0;1632}1633.peach-list-empty {1634  min-height: 180px;1635  display: grid;1636  place-items: center;1637  color: var(--peach-t2);1638  font-family: "IBM Plex Mono", monospace;1639  font-size: 0.6875rem;1640}16411642/* ── Settings view ───────────────────────────────────────────────────── */1643.peach-settings-body {1644  flex: 1;1645  overflow-y: auto;1646  min-height: 0;1647  display: flex;1648  flex-direction: column;1649  padding: 2px 0 10px;1650}1651.peach-settings-group {1652  margin: 4px 10px;1653  padding: 9px 14px 11px;1654  border-radius: 12px;1655  border: 1px solid rgba(255, 255, 255, 0.07);1656  background: rgba(26, 20, 16, 0.60);1657  backdrop-filter: blur(10px) saturate(1.3);1658  -webkit-backdrop-filter: blur(10px) saturate(1.3);1659}16601661.peach-settings-group + .peach-settings-group {1662  margin-top: 6px;1663}16641665@supports not (backdrop-filter: blur(1px)) {1666  .peach-settings-group {1667    background: rgba(26, 20, 16, 0.90);1668    border-color: rgba(255, 255, 255, 0.09);1669    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1670  }1671}16721673.light .peach-settings-group,1674[data-theme="light"] .peach-settings-group {1675  background: rgba(245, 237, 226, 0.70);1676  border-color: rgba(26, 18, 8, 0.08);1677  backdrop-filter: blur(10px) saturate(1.2);1678  -webkit-backdrop-filter: blur(10px) saturate(1.2);1679}16801681@supports not (backdrop-filter: blur(1px)) {1682  .light .peach-settings-group,1683  [data-theme="light"] .peach-settings-group {1684    background: rgba(245, 237, 226, 0.97);1685    border-color: rgba(26, 18, 8, 0.10);1686  }1687}1688.peach-export-intro {1689  padding-bottom: 8px;1690}1691.peach-export-card {1692  display: grid;1693  gap: 10px;1694}1695.peach-rune-canvas {1696  border-radius: 8px;1697  background: rgba(0, 0, 0, 0.22);1698  flex: 1;1699  align-self: center;1700}1701.peach-script-input {1702  font-family: "PeachScript", monospace;1703  font-size: 0.6875rem;1704  line-height: 1.9;1705  letter-spacing: 0.06em;1706  color: var(--peach-t0);1707  background: rgba(0, 0, 0, 0.22);1708  border: none;1709  border-radius: 6px;1710  padding: 12px;1711  width: 100%;1712  min-height: 96px;1713  resize: vertical;1714  word-break: break-all;1715  scrollbar-width: none;1716  -ms-overflow-style: none;1717}17181719.peach-script-input::-webkit-scrollbar { display: none; }1720.peach-csv-warning {1721  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1722  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1723  color: var(--peach-t0);1724  border-radius: 6px;1725  padding: 10px 12px;1726  margin-bottom: 8px;1727  font-size: 0.75rem;1728  line-height: 1.45;1729}1730.peach-export-card--primary {1731  background:1732    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1733}17341735/* Export menu — distribute the three format cards across the popup. */1736.peach-export-menu {1737  display: flex;1738  flex-direction: column;1739  flex: 1;1740  min-height: 0;1741}1742.peach-export-menu .peach-settings-group {1743  flex: 1;1744  display: flex;1745  flex-direction: column;1746  justify-content: center;1747  gap: 10px;1748}17491750/* Result view — the script-string fills the remaining vertical surface. */1751.peach-export-result-group {1752  flex: 1;1753  display: flex;1754  flex-direction: column;1755  min-height: 0;1756  border-bottom: none;1757}1758.peach-export-result-group .peach-export-card {1759  flex: 1;1760  min-height: 0;1761  display: flex;1762  flex-direction: column;1763  gap: 10px;1764}1765.peach-export-result-group .peach-export-card-copy {1766  flex-shrink: 0;1767}1768.peach-export-result-group .peach-settings-label {1769  flex-shrink: 0;1770}1771.peach-export-result-group button {1772  flex-shrink: 0;1773}1774.peach-export-card-head {1775  display: flex;1776  align-items: center;1777  justify-content: space-between;1778  gap: 10px;1779}1780.peach-export-card-copy {1781  margin: 0;1782  font-size: 0.75rem;1783  line-height: 1.55;1784  color: var(--peach-t1);1785}1786.peach-export-note {1787  margin: 0;1788  font-size: 0.625rem;1789  line-height: 1.5;1790  color: var(--peach-t2);1791}1792.peach-export-strength-track {1793  height: 3px;1794  background: var(--peach-border);1795  border-radius: 2px;1796  margin: 4px 0 2px;1797  overflow: hidden;1798}1799.peach-export-strength-fill {1800  height: 100%;1801  border-radius: 2px;1802  transition: width 250ms ease, background 250ms ease;1803}1804.peach-export-strength-warn {1805  margin: 0;1806  font-size: 0.625rem;1807  line-height: 1.5;1808  color: #e84040;1809  font-family: "IBM Plex Mono", monospace;1810}1811.peach-export-strength-hint {1812  margin: 0;1813  font-size: 0.625rem;1814  line-height: 1.5;1815  color: var(--peach-t2);1816  font-family: "IBM Plex Mono", monospace;1817}1818.peach-export-pill {1819  display: inline-flex;1820  align-items: center;1821  padding: 4px 8px;1822  border-radius: 999px;1823  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1824  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1825  color: var(--peach-accent);1826  font-family: "IBM Plex Mono", monospace;1827  font-size: 0.5rem;1828  letter-spacing: 0.12em;1829  text-transform: uppercase;1830  white-space: nowrap;1831}1832.peach-export-pill--danger {1833  border-color: rgba(220,80,60,0.22);1834  background: rgba(220,80,60,0.08);1835  color: var(--peach-breach);1836}1837.peach-settings-label {1838  margin: 0 0 6px;1839  font-family: "IBM Plex Mono", monospace;1840  font-size: 0.5rem;1841  text-transform: uppercase;1842  letter-spacing: 0.18em;1843  color: var(--peach-t2);1844}1845.peach-settings-row {1846  display: flex;1847  align-items: center;1848  justify-content: space-between;1849  gap: 12px;1850  min-height: 34px;1851  padding: 6px 0;1852  font-size: 0.8125rem;1853  color: var(--peach-t1);1854}1855.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1856.peach-settings-value {1857  font-family: "IBM Plex Mono", monospace;1858  font-size: 0.625rem;1859  color: var(--peach-t2);1860}18611862.peach-settings-value--status {1863  display: flex;1864  align-items: center;1865  gap: 6px;1866}18671868.peach-settings-link {1869  font-family: "IBM Plex Mono", monospace;1870  font-size: 0.625rem;1871  color: var(--peach-accent);1872  text-decoration: none;1873  cursor: pointer;1874}1875.peach-settings-link:hover {1876  text-decoration: underline;1877}18781879.peach-settings-row--stack {1880  flex-direction: column;1881  align-items: stretch;1882  gap: 6px;1883}18841885.peach-settings-row--top {1886  align-items: flex-start;1887}18881889.peach-settings-row-main {1890  display: flex;1891  flex-direction: column;1892  gap: 4px;1893  flex: 1;1894}1895.peach-toggle {1896  width: 28px; height: 16px;1897  border-radius: 999px;1898  background: var(--peach-t3);1899  border: 1px solid var(--peach-t3);1900  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1901  flex-shrink: 0;1902  transition: background 200ms ease, border-color 200ms ease;1903  cursor: pointer;1904}1905.peach-toggle.is-on {1906  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1907  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1908}1909.peach-toggle-knob {1910  width: 10px; height: 10px;1911  border-radius: 50%;1912  background: var(--peach-t2);1913  flex-shrink: 0;1914  transform: translateX(0px);1915  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1916}1917.peach-toggle.is-on .peach-toggle-knob {1918  background: var(--peach-accent);1919  transform: translateX(12px);1920}1921.peach-settings-footer {1922  display: flex;1923  align-items: center;1924  gap: 8px;1925  margin-top: auto;1926  padding: 14px 16px 8px;1927  font-family: "IBM Plex Mono", monospace;1928  font-size: 0.5625rem;1929  color: var(--peach-t2);1930}19311932/* ── Settings home navigation ──────────────────────────────────────────── */1933.peach-settings-nav-label {1934  margin: 0 0 2px;1935  padding: 12px 16px 4px;1936  font-family: "IBM Plex Mono", monospace;1937  font-size: 0.5rem;1938  text-transform: uppercase;1939  letter-spacing: 0.18em;1940  color: var(--peach-t2);1941}19421943.peach-settings-cat-row {1944  display: flex;1945  align-items: center;1946  gap: 10px;1947  width: 100%;1948  padding: 9px 16px;1949  background: none;1950  border: none;1951  border-bottom: 1px solid var(--peach-t3);1952  cursor: pointer;1953  text-align: left;1954  color: inherit;1955  transition: background var(--peach-dur-80) ease;1956}1957.peach-settings-cat-row:hover {1958  background: var(--peach-t3);1959}1960.peach-settings-cat-row:last-child {1961  border-bottom: none;1962}19631964.peach-settings-cat-icon {1965  width: 28px;1966  height: 28px;1967  border-radius: 7px;1968  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1969  color: var(--peach-accent);1970  display: flex;1971  align-items: center;1972  justify-content: center;1973  flex-shrink: 0;1974}1975/* Light theme: peach-on-cream is too low-contrast — both colors are warm.1976   Darken the icon stroke to ink and bump the bg tint so the icon reads1977   sharply while the cell still feels accent-tinted. */1978.light .peach-settings-cat-icon {1979  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);1980  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));1981}19821983.peach-settings-cat-content {1984  flex: 1;1985  display: flex;1986  flex-direction: column;1987  gap: 2px;1988  min-width: 0;1989}19901991.peach-settings-cat-name {1992  font-size: 0.8125rem;1993  font-weight: 450;1994  color: var(--peach-t0);1995  line-height: 1.2;1996}19971998.peach-settings-cat-desc {1999  font-size: 0.625rem;2000  color: var(--peach-t2);2001  line-height: 1.3;2002  white-space: nowrap;2003  overflow: hidden;2004  text-overflow: ellipsis;2005}20062007.peach-settings-cat-chevron {2008  color: var(--peach-t2);2009  flex-shrink: 0;2010  opacity: 0.5;2011}20122013/* ── Settings sub-view section labels ──────────────────────────────────── */2014.peach-settings-sub-label {2015  margin: 12px 0 4px;2016  font-family: "IBM Plex Mono", monospace;2017  font-size: 0.5rem;2018  text-transform: uppercase;2019  letter-spacing: 0.18em;2020  color: var(--peach-t2);2021}2022.peach-settings-sub-label:first-child {2023  margin-top: 4px;2024}20252026/* ── Settings: collapsible Advanced section ─────────────────────────────── */2027.peach-settings-advanced-toggle {2028  display: flex;2029  align-items: center;2030  justify-content: space-between;2031  width: 100%;2032  background: none;2033  border: none;2034  cursor: pointer;2035  padding: 12px 0 4px;2036  margin: 0;2037  color: inherit;2038}2039.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {2040  color: var(--peach-t1);2041}2042.peach-settings-advanced-chevron {2043  font-size: 0.5625rem;2044  color: var(--peach-t3);2045  letter-spacing: 0;2046  transition: color 120ms ease;2047}20482049/* ── Feedback form ──────────────────────────────────────────────────────── */2050.peach-feedback-group {2051  flex: 1;2052  display: flex;2053  flex-direction: column;2054  border-bottom: none;2055}20562057.peach-feedback-intro {2058  margin: 4px 0 14px;2059  font-size: 0.75rem;2060  line-height: 1.55;2061  color: var(--peach-t1);2062}20632064.peach-feedback-chips {2065  display: flex;2066  flex-wrap: wrap;2067  gap: 6px;2068  margin-bottom: 14px;2069}20702071.peach-feedback-chip {2072  padding: 4px 10px;2073  border-radius: 999px;2074  border: 1px solid var(--peach-t3);2075  background: none;2076  color: var(--peach-t2);2077  font-size: 0.6875rem;2078  font-family: var(--font-ui);2079  cursor: pointer;2080  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2081    background var(--peach-dur-80) ease;2082}2083.peach-feedback-chip:hover {2084  border-color: var(--peach-t2);2085  color: var(--peach-t1);2086}2087.peach-feedback-chip.is-active {2088  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);2089  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));2090  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);2091  box-shadow:2092    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),2093    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);2094  font-weight: 700;2095}20962097.peach-feedback-textarea {2098  flex: 1;2099  width: 100%;2100  min-height: 120px;2101  box-sizing: border-box;2102  background: rgba(0, 0, 0, 0.22);2103  border: 1px solid transparent;2104  border-radius: 6px;2105  color: var(--peach-t0);2106  font-size: 0.75rem;2107  font-family: var(--font-ui);2108  line-height: 1.5;2109  padding: 8px 10px;2110  resize: none;2111  outline: none;2112  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2113}2114.peach-feedback-textarea:focus {2115  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2116  background: rgba(0, 0, 0, 0.28);2117}2118.peach-feedback-textarea:focus {2119  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2120}2121.peach-feedback-textarea::placeholder {2122  color: var(--peach-t2);2123}21242125.peach-feedback-meta {2126  margin: 6px 0 0;2127  font-size: 0.625rem;2128  color: var(--peach-t2);2129  font-family: "IBM Plex Mono", monospace;2130}21312132.peach-feedback-result {2133  margin: 8px 0 0;2134  font-size: 0.6875rem;2135  font-family: "IBM Plex Mono", monospace;2136}2137.peach-feedback-result--ok { color: var(--peach-sync-ok); }2138.peach-feedback-result--err { color: var(--peach-breach); }21392140.peach-feedback-submit {2141  width: 100%;2142  margin-top: 12px;2143  justify-content: center;2144}21452146.peach-feedback-anon {2147  margin: 8px 0 0;2148  font-size: 0.625rem;2149  color: var(--peach-t2);2150  text-align: center;2151}21522153.peach-feedback-thanks {2154  margin: auto 0;2155  padding: 18px 14px;2156  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);2157  border-radius: 8px;2158  background:2159    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),2160    rgba(0, 0, 0, 0.18);2161  color: var(--peach-t1);2162  text-align: center;2163}21642165.peach-feedback-thanks p {2166  margin: 0;2167  font-size: 0.75rem;2168  line-height: 1.5;2169}21702171.peach-feedback-thanks-title {2172  color: var(--peach-t0);2173  font-family: "Cormorant Garamond", serif;2174  font-size: 1.375rem !important;2175  line-height: 1.1 !important;2176  margin-bottom: 8px !important;2177}21782179.peach-passkey-badge {2180  margin-left: 8px;2181  font-size: 0.625rem;2182  letter-spacing: 0.06em;2183  text-transform: uppercase;2184  color: var(--peach-t2);2185  font-family: var(--font-ui);2186  vertical-align: middle;2187}21882189.peach-passkey-delete-btn {2190  color: var(--peach-breach);2191  border-color: rgba(229, 85, 85, 0.25);2192}21932194.peach-passkey-delete-confirm {2195  display: flex;2196  align-items: center;2197  gap: 8px;2198  padding: 8px 10px;2199  background: rgba(229, 85, 85, 0.06);2200  border: 1px solid rgba(229, 85, 85, 0.2);2201  border-radius: 6px;2202}22032204.peach-passkey-delete-confirm-copy {2205  flex: 1;2206  font-size: 0.6875rem;2207  color: var(--peach-t1);2208}22092210.peach-passkey-delete-btn--confirm {2211  color: var(--peach-breach);2212  border-color: rgba(229, 85, 85, 0.4);2213}22142215.peach-passkey-activity {2216  flex-direction: column;2217  align-items: flex-start;2218  gap: 4px;2219}22202221.peach-passkey-meta {2222  font-size: 0.6875rem;2223  color: var(--peach-t2);2224}22252226.peach-passkey-actions {2227  position: relative;2228  z-index: 1;2229  margin-top: 14px;2230  display: flex;2231  flex-direction: column;2232  gap: 8px;2233}22342235.peach-passkey-approval {2236  display: flex;2237  flex-direction: column;2238  align-items: center;2239  padding: 16px 20px 14px;2240  gap: 8px;2241  text-align: center;2242}22432244.peach-passkey-approval-icon {2245  width: 36px;2246  height: 36px;2247  border-radius: 10px;2248  background: var(--peach-s2);2249  border: 1px solid var(--peach-t3);2250  display: flex;2251  align-items: center;2252  justify-content: center;2253  flex-shrink: 0;2254  color: var(--peach-accent);2255}22562257.peach-passkey-approval-icon img,2258.peach-passkey-approval-icon svg {2259  width: 22px;2260  height: 22px;2261  border-radius: 5px;2262}22632264.peach-passkey-approval-rp {2265  font-family: var(--font-ui);2266  font-size: 0.75rem;2267  color: var(--peach-t2);2268  letter-spacing: 0.03em;2269}22702271.peach-passkey-approval-action {2272  font-family: var(--font-display);2273  font-style: italic;2274  font-weight: 300;2275  font-size: 18px;2276  color: var(--peach-t0);2277  line-height: 1.1;2278  margin: 1px 0;2279}22802281.peach-passkey-approval-user {2282  font-family: var(--font-mono);2283  font-size: 0.6875rem;2284  color: var(--peach-t1);2285  background: var(--peach-s2);2286  border: 1px solid var(--peach-t3);2287  border-radius: 4px;2288  padding: 3px 8px;2289}22902291.peach-passkey-approval-notice {2292  font-size: 0.625rem;2293  color: var(--peach-t2);2294  line-height: 1.5;2295  max-width: 220px;2296}22972298.peach-passkey-approval-actions {2299  display: flex;2300  gap: 8px;2301  width: 100%;2302  margin-top: 6px;2303}23042305.peach-passkey-approval-actions .peach-btn {2306  flex: 1;2307}23082309/* ── Inline generator drawer ── */2310.peach-generator-drawer {2311  display: grid;2312  grid-template-rows: 0fr;2313  transition: grid-template-rows 320ms var(--peach-curve-arrival);2314  overflow: hidden;2315}2316.peach-generator-drawer.is-open {2317  grid-template-rows: 1fr;2318}2319.peach-generator-drawer-inner {2320  min-height: 0;2321  overflow: hidden;2322}2323.peach-generator-drawer-content {2324  border-top: 1px solid var(--peach-t3);2325  padding: 8px 0 4px;2326  display: flex;2327  flex-direction: column;2328  gap: 8px;2329}23302331/* ── Compact generator (inside entry edit) ── */2332.peach-generator-drawer-content--compact {2333  border-top: 1px solid var(--peach-t3);2334  padding: 8px 0 2px;2335  gap: 7px;2336}2337.peach-pwgen-compact-display-row {2338  display: flex;2339  align-items: center;2340  gap: 6px;2341}2342.peach-pwgen-compact-output {2343  flex: 1;2344  min-width: 0;2345  font-family: "IBM Plex Mono", monospace;2346  font-size: 0.6875rem;2347  font-weight: 400;2348  letter-spacing: 0.04em;2349  color: var(--peach-t0);2350  background: rgba(240, 232, 216, 0.04);2351  border: 1px solid var(--peach-t3);2352  border-radius: 5px;2353  padding: 5px 8px;2354  line-height: 1.5;2355  outline: none;2356  transition: border-color 120ms ease;2357}23582359.peach-pwgen-compact-output:focus {2360  border-color: var(--peach-t1);2361}2362.peach-pwgen-compact-controls {2363  display: flex;2364  align-items: center;2365  gap: 6px;2366}2367.peach-pwgen-compact-slider {2368  flex: 1;2369  min-width: 0;2370  height: 2px !important;2371}2372.peach-pwgen-compact-controls .peach-pwgen-len-num {2373  flex-shrink: 0;2374  min-width: 18px;2375  text-align: right;2376}2377.peach-pwgen-compact-pills {2378  display: flex;2379  gap: 3px;2380  flex-shrink: 0;2381}2382.peach-pwgen-compact-pills .peach-pwgen-pill {2383  padding: 2px 7px;2384  font-size: 0.5rem;2385}2386.peach-pwgen-compact-use {2387  flex-shrink: 0;2388  font-size: 0.625rem !important;2389  padding: 3px 9px !important;2390  min-height: 22px !important;2391  border-radius: 5px !important;2392}23932394/* ── Password edit row (input + eye toggle side-by-side) ── */2395.peach-password-edit-row {2396  display: flex;2397  align-items: center;2398  gap: 6px;2399}2400.peach-password-edit-row .peach-inline-input {2401  flex: 1;2402  min-width: 0;2403}24042405/* ── Generate toggle link ── */2406.peach-generate-toggle-link {2407  display: inline-flex;2408  align-items: center;2409  gap: 5px;2410  background: none;2411  border: none;2412  padding: 0;2413  cursor: pointer;2414  font-family: "IBM Plex Mono", monospace;2415  font-size: 0.625rem;2416  color: var(--peach-t2);2417  letter-spacing: 0.04em;2418  transition: color 120ms ease;2419  align-self: flex-start;2420}2421.peach-generate-toggle-link:hover {2422  color: var(--peach-accent);2423}24242425/* Holds the generate + history toggle links on one row under the editor. */2426.peach-password-edit-links {2427  display: flex;2428  align-items: center;2429  gap: 14px;2430  flex-wrap: wrap;2431}24322433/* ── Past-password history list ── */2434.peach-password-history {2435  display: grid;2436  gap: 4px;2437  margin-top: 2px;2438  max-height: 168px;2439  overflow-y: auto;2440  scrollbar-width: thin;2441}2442.peach-history-row {2443  display: flex;2444  align-items: center;2445  justify-content: space-between;2446  gap: 8px;2447  padding: 5px 7px;2448  border-radius: 7px;2449  background: color-mix(in srgb, var(--peach-accent) 5%, transparent);2450  border: 1px solid color-mix(in srgb, var(--peach-accent) 9%, transparent);2451}2452.peach-history-main {2453  display: flex;2454  flex-direction: column;2455  gap: 1px;2456  min-width: 0;2457  flex: 1;2458}2459.peach-history-pw {2460  font-family: "IBM Plex Mono", monospace;2461  font-size: 0.6875rem;2462  color: var(--peach-t1);2463  white-space: nowrap;2464  overflow: hidden;2465  text-overflow: ellipsis;2466}2467.peach-history-pw .peach-password-mask {2468  letter-spacing: 0.08em;2469  color: var(--peach-t2);2470}2471.peach-history-age {2472  font-family: "IBM Plex Mono", monospace;2473  font-size: 0.5625rem;2474  color: var(--peach-t3, var(--peach-t2));2475  letter-spacing: 0.03em;2476}2477.peach-history-actions {2478  display: flex;2479  align-items: center;2480  gap: 2px;2481  flex-shrink: 0;2482}2483.peach-history-use {2484  font-family: "IBM Plex Mono", monospace;2485  font-size: 0.5625rem;2486  letter-spacing: 0.05em;2487  padding: 3px 7px;2488}2489.peach-history-empty {2490  font-family: "IBM Plex Mono", monospace;2491  font-size: 0.625rem;2492  line-height: 1.45;2493  color: var(--peach-t2);2494  padding: 6px 8px;2495  border-radius: 7px;2496  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);2497  border: 1px solid color-mix(in srgb, var(--peach-accent) 8%, transparent);2498}24992500/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2501.peach-entry-body {2502  flex: 1;2503  overflow-y: auto;2504  overflow-x: hidden;2505  scrollbar-width: none;2506  -ms-overflow-style: none;2507  overscroll-behavior: contain;2508  display: grid;2509  gap: 10px;2510  align-content: start;2511  padding: 10px 20px 14px;2512  min-width: 0;2513  min-height: 0;2514}2515.peach-entry-body::-webkit-scrollbar { display: none; }25162517/* Type-toggle pills + inline note toolbar */2518.peach-new-type-row {2519  display: flex;2520  align-items: center;2521  gap: 6px;2522  margin-bottom: 2px;2523}2524.peach-new-type-btn {2525  background: transparent;2526  border: 1px solid var(--peach-t3);2527  border-radius: 12px;2528  padding: 3px 10px;2529  font-family: "IBM Plex Mono", monospace;2530  font-size: 0.5625rem;2531  letter-spacing: 0.12em;2532  text-transform: uppercase;2533  color: var(--peach-t2);2534  cursor: pointer;2535  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2536}2537.peach-new-type-btn.is-active {2538  color: var(--peach-t0);2539  border-color: var(--peach-accent);2540  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2541}2542.peach-new-type-btn:not(.is-active):hover {2543  color: var(--peach-t1);2544  border-color: var(--peach-t2);2545}25462547/* Editable title */2548.peach-new-title-wrap { margin: 0 0 2px; }2549.peach-new-title-input {2550  background: transparent;2551  border: none;2552  outline: none;2553  width: 100%;2554  color: var(--peach-t0);2555  font-family: var(--font-display);2556  font-style: italic;2557  font-weight: 400;2558  font-size: 40px;2559  line-height: 0.95;2560  caret-color: var(--peach-accent);2561}2562.peach-new-title-input::placeholder { color: var(--peach-t2); }25632564/* Editable domain field */2565.peach-domain-edit-row {2566  display: flex;2567  align-items: center;2568  gap: 6px;2569}25702571.peach-domain-edit-row .peach-domain-value--edit {2572  flex: 1;2573  width: 0;2574}25752576.peach-domain-url-btn {2577  flex-shrink: 0;2578  background: transparent;2579  border: none;2580  cursor: pointer;2581  color: var(--peach-t3);2582  padding: 2px 3px;2583  display: flex;2584  align-items: center;2585  line-height: 0;2586  border-radius: 3px;2587  transition: color 120ms ease;2588}25892590.peach-domain-url-btn:hover {2591  color: var(--peach-accent);2592}25932594.peach-domain-value--edit {2595  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2596  font-size: 0.625rem;2597  font-style: italic;2598  letter-spacing: 0.12em;2599  color: var(--peach-t1);2600  background: transparent;2601  border: none;2602  border-bottom: 1px solid var(--peach-t3);2603  outline: none;2604  width: 100%;2605  padding: 2px 0;2606  caret-color: var(--peach-accent);2607  transition: border-color 140ms ease, color 140ms ease;2608}2609.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2610.peach-domain-value--edit:focus {2611  border-bottom-color: rgba(240, 232, 216, 0.28);2612  color: var(--peach-t0);2613}26142615/* Editable field values (username, password, totp) */2616.peach-field-value--edit {2617  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2618  font-size: 0.8125rem;2619  color: var(--peach-t0);2620  background: transparent;2621  border: none;2622  border-bottom: 1px solid var(--peach-t3);2623  outline: none;2624  flex: 1;2625  min-width: 0;2626  padding: 3px 0;2627  caret-color: var(--peach-accent);2628  transition: border-color 140ms ease, color 140ms ease;2629}2630.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2631.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2632.peach-field-value--edit:focus {2633  border-bottom-color: rgba(240, 232, 216, 0.28);2634  color: var(--peach-t0);2635}26362637/* "+ add optional field" links */2638.peach-entry-add-links {2639  display: flex;2640  gap: 12px;2641  flex-wrap: wrap;2642  margin-top: -2px;2643}2644.peach-add-field-link {2645  background: transparent;2646  border: none;2647  padding: 0;2648  cursor: pointer;2649  font-family: "IBM Plex Mono", monospace;2650  font-size: 0.5625rem;2651  letter-spacing: 0.1em;2652  text-transform: uppercase;2653  color: var(--peach-t2);2654  transition: color 140ms ease;2655}2656.peach-add-field-link:hover { color: var(--peach-accent); }26572658/* ── New entry form (legacy classes) ────────────────────────────────── */2659.peach-new-body {2660  flex: 1;2661  overflow-y: auto;2662  padding: 10px 20px 14px;2663}2664.peach-new-name-input {2665  background: transparent;2666  border: none;2667  outline: none;2668  width: 100%;2669  color: var(--peach-t0);2670  font-family: var(--font-display);2671  font-style: italic;2672  font-weight: 400;2673  font-size: 40px;2674  line-height: 0.95;2675  caret-color: var(--peach-accent);2676}2677.peach-new-name-input::placeholder { color: var(--peach-t2); }2678.peach-new-field-input {2679  background: transparent;2680  border: none;2681  outline: none;2682  flex: 1;2683  min-width: 0;2684  caret-color: var(--peach-accent);2685}2686.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }26872688/* ── Canary card ── */2689.peach-canary-card {2690  border: 1px solid rgba(217, 160, 48, 0.2);2691  background: rgba(217, 160, 48, 0.03);2692  border-radius: 8px;2693  padding: 12px;2694}26952696.peach-canary-settings-header {2697  display: flex;2698  align-items: center;2699  justify-content: space-between;2700  cursor: pointer;2701  user-select: none;2702}27032704.peach-canary-card .peach-label {2705  color: rgba(217, 160, 48, 0.85);2706}27072708.peach-canary-card .peach-new-field-input {2709  border-color: rgba(217, 160, 48, 0.25);2710}27112712.peach-canary-card .peach-new-field-input:focus {2713  border-color: rgba(217, 160, 48, 0.5);2714}27152716.peach-canary-body {2717  margin-top: 12px;2718  display: flex;2719  flex-direction: column;2720  gap: 10px;2721}27222723.peach-canary-explainer {2724  display: flex;2725  gap: 10px;2726  padding: 10px 12px;2727  border-radius: 10px;2728  background: rgba(217, 160, 48, 0.06);2729  border: 1px solid rgba(217, 160, 48, 0.22);2730  margin-bottom: 4px;2731}27322733.peach-canary-explainer-icon {2734  font-size: 1rem;2735  flex-shrink: 0;2736  line-height: 1.2;2737}27382739.peach-canary-explainer-title {2740  font-family: var(--font-ui);2741  font-size: 0.6875rem;2742  font-weight: 500;2743  color: rgba(217, 160, 48, 0.9);2744  margin: 0 0 3px;2745}27462747.peach-canary-explainer-copy {2748  font-family: var(--font-ui);2749  font-size: 0.625rem;2750  color: var(--peach-t2);2751  line-height: 1.55;2752  margin: 0;2753}27542755.peach-canary-hint {2756  font-size: 0.625rem;2757  color: var(--peach-t2);2758  font-family: Inter, system-ui, sans-serif;2759  line-height: 1.5;2760  margin-top: 4px;2761}27622763.peach-canary-actions-row {2764  display: flex;2765  align-items: center;2766  gap: 8px;2767}27682769.peach-canary-test-btn {2770  border-color: rgba(217, 160, 48, 0.3);2771  color: rgba(217, 160, 48, 0.85);2772}27732774.peach-canary-test-result {2775  font-size: 0.625rem;2776  font-family: Inter, system-ui, sans-serif;2777}27782779.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2780.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }27812782.peach-canary-badge {2783  display: flex;2784  position: relative;2785  z-index: 1;2786  align-items: center;2787  gap: 5px;2788  padding: 4px 10px;2789  background: rgba(217, 160, 48, 0.12);2790  border: 1px solid rgba(217, 160, 48, 0.35);2791  border-radius: 6px;2792  margin-bottom: 6px;2793  width: fit-content;2794}27952796.peach-canary-badge-label {2797  font-size: 0.625rem;2798  letter-spacing: 0.06em;2799  color: rgba(217, 160, 48, 0.9);2800  font-family: var(--font-ui);2801  text-transform: uppercase;2802}28032804.peach-canary-badge-icon {2805  font-size: 0.6875rem;2806}28072808.peach-canary-suppress-row {2809  display: flex;2810  align-items: center;2811  gap: 8px;2812  padding: 6px 10px;2813  background: rgba(217, 160, 48, 0.08);2814  border-radius: 6px;2815  margin-bottom: 8px;2816}28172818.peach-canary-suppress-label {2819  font-size: 0.6875rem;2820  color: rgba(217, 160, 48, 0.85);2821  cursor: pointer;2822  font-family: var(--font-ui);2823  letter-spacing: 0.04em;2824}28252826.peach-regen-panel {2827  position: relative;2828  z-index: 1;2829  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2830  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2831  border-radius: 8px;2832  padding: 12px;2833  margin-bottom: 8px;2834}28352836.peach-regen-panel-header {2837  display: flex;2838  align-items: center;2839  justify-content: space-between;2840  margin-bottom: 10px;2841}28422843.peach-regen-panel-title {2844  font-size: 0.6875rem;2845  font-weight: 600;2846  letter-spacing: 0.06em;2847  text-transform: uppercase;2848  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2849}28502851.peach-regen-output {2852  background: rgba(0, 0, 0, 0.2);2853  border-radius: 6px;2854  padding: 10px;2855  margin-bottom: 10px;2856  font-family: var(--font-mono);2857  font-size: 0.8125rem;2858  word-break: break-all;2859  color: var(--peach-t1);2860}28612862.peach-regen-actions {2863  display: flex;2864  gap: 6px;2865}28662867.peach-regen-actions--spaced {2868  margin-bottom: 8px;2869}28702871.peach-regen-action-grow {2872  flex: 1;2873}28742875.peach-regen-copy-btn {2876  padding: 0 8px;2877}28782879.peach-regen-success {2880  position: relative;2881  z-index: 1;2882  background: rgba(40, 180, 80, 0.1);2883  border: 1px solid rgba(40, 180, 80, 0.3);2884  border-radius: 8px;2885  padding: 10px 12px;2886  margin-bottom: 8px;2887  display: flex;2888  align-items: center;2889  gap: 8px;2890  font-size: 0.6875rem;2891  color: rgba(40, 180, 80, 0.9);2892}28932894/* ── Note editor overlay ── */2895.peach-note-editor {2896  position: absolute;2897  inset: 0;2898  z-index: 200;2899  display: flex;2900  flex-direction: column;2901  background:2902    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2903    var(--peach-bg);2904  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2905}29062907.peach-note-editor-header {2908  display: flex;2909  align-items: center;2910  gap: 10px;2911  padding: 14px 16px 10px;2912  border-bottom: 1px solid var(--peach-t3);2913  flex-shrink: 0;2914}29152916.peach-note-editor-back {2917  background: transparent;2918  border: none;2919  cursor: pointer;2920  color: var(--peach-t2);2921  padding: 4px 6px;2922  border-radius: 6px;2923  display: flex;2924  align-items: center;2925  transition: color 120ms ease, background 120ms ease;2926  flex-shrink: 0;2927}2928.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }29292930.peach-note-editor-label {2931  flex: 1;2932  font-family: var(--font-display);2933  font-style: italic;2934  font-size: 0.9375rem;2935  color: var(--peach-t1);2936  letter-spacing: 0.02em;2937}29382939.peach-note-editor-save-btn {2940  background: transparent;2941  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2942  border-radius: 8px;2943  color: var(--peach-accent);2944  font-family: "IBM Plex Mono", monospace;2945  font-size: 0.625rem;2946  letter-spacing: 0.06em;2947  text-transform: uppercase;2948  padding: 3px 10px;2949  cursor: pointer;2950  transition: background 120ms ease, border-color 120ms ease;2951}2952.peach-note-editor-save-btn:hover:not(:disabled) {2953  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2954  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2955}2956.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }29572958.peach-note-toolbar {2959  display: flex;2960  align-items: center;2961  gap: 3px;2962  padding: 6px 14px 5px;2963  border-bottom: 1px solid var(--peach-t3);2964  flex-shrink: 0;2965}29662967.peach-note-tool-btn {2968  background: transparent;2969  border: 1px solid transparent;2970  border-radius: 5px;2971  color: var(--peach-t2);2972  font-family: "IBM Plex Mono", monospace;2973  font-size: 0.625rem;2974  letter-spacing: 0.04em;2975  padding: 2px 8px;2976  cursor: pointer;2977  line-height: 1.6;2978  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2979}2980.peach-note-tool-btn:hover {2981  background: var(--peach-t4);2982  color: var(--peach-t0);2983  border-color: var(--peach-t3);2984}29852986.peach-note-tool-icon {2987  padding: 3px 7px;2988  display: inline-flex;2989  align-items: center;2990  justify-content: center;2991}29922993.peach-note-tool-divider {2994  width: 1px;2995  height: 14px;2996  background: var(--peach-t3);2997  margin: 0 4px;2998  flex-shrink: 0;2999}30003001.peach-note-editor-body {3002  flex: 1;3003  overflow-y: auto;3004  padding: 16px 20px 20px;3005  outline: none;3006  font-family: var(--font-display);3007  font-size: 1rem;3008  line-height: 1.75;3009  color: var(--peach-t0);3010  scrollbar-width: none;3011  word-break: break-word;3012}3013.peach-note-editor-body:empty::before {3014  content: "write your note…";3015  color: var(--peach-t3);3016  font-style: italic;3017  pointer-events: none;3018}30193020/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */3021.peach-note-editor-inline {3022  display: flex;3023  flex-direction: column;3024  flex: 1;3025  min-height: 0;3026}3027.peach-note-editor-body--inline {3028  flex: 1;3029  min-height: 0;3030  font-size: 0.9375rem;3031  padding: 10px 20px 14px;3032}30333034/* Full-width toolbar row inside the body (Add.tsx note type).3035   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */3036.peach-note-toolbar-body {3037  display: flex;3038  align-items: center;3039  gap: 3px;3040  padding: 5px 20px 4px;3041  margin: 2px -20px 0;3042  border-bottom: 1px solid var(--peach-t3);3043  flex-shrink: 0;3044}30453046/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)3047   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn3048   and .peach-note-tool-divider button-level styles. */3049.peach-note-toolbar-inline {3050  display: flex;3051  align-items: center;3052  gap: 3px;3053  margin-left: auto;3054  padding-left: 10px;3055  border-left: 1px solid var(--peach-t3);3056  min-height: 22px;3057}30583059/* Entry.tsx toolbar row (no tabs, toolbar only) */3060.peach-entry-note-toolbar-row {3061  display: flex;3062  align-items: center;3063  margin: 4px 0 6px;3064  position: relative;3065  z-index: 1;3066}3067.peach-entry-note-toolbar-row .peach-note-toolbar-inline {3068  border-left: none;3069  padding-left: 0;3070  margin-left: 0;3071}30723073/* Note body — fills available vertical space in Add.tsx and Entry.tsx */3074.peach-note-body {3075  display: flex;3076  flex-direction: column;3077  flex: 1;3078  min-height: 0;3079  margin: 4px 0 0;3080}3081.peach-entry-body--new .peach-note-body {3082  margin: 8px -20px 0;3083}30843085/* Add.tsx body is a grid by default; swap to a flex column when a note is3086   active so the note body can stretch and pin the tags row to the bottom. */3087.peach-entry-body--new:has(.peach-note-body) {3088  display: flex;3089  flex-direction: column;3090}30913092/* Rich content element styles (editor + display) */3093.peach-note-editor-body h2,3094.peach-note-content h2 {3095  font-family: var(--font-display);3096  font-size: 20px;3097  font-weight: 600;3098  font-style: italic;3099  color: var(--peach-t0);3100  margin: 6px 0 2px;3101  line-height: 1.3;3102}3103.peach-note-editor-body ul,3104.peach-note-content ul {3105  padding-left: 18px;3106  margin: 3px 0;3107  list-style: disc;3108}3109.peach-note-editor-body ol,3110.peach-note-content ol {3111  padding-left: 18px;3112  margin: 3px 0;3113  list-style: decimal;3114}3115.peach-note-editor-body li,3116.peach-note-content li { margin: 2px 0; }3117.peach-note-editor-body hr,3118.peach-note-content hr {3119  border: none;3120  border-top: 1px solid var(--peach-t3);3121  margin: 10px 0;3122}31233124/* font size elements from execCommand */3125.peach-note-editor-body font[size="1"],3126.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }3127.peach-note-editor-body font[size="2"],3128.peach-note-content font[size="2"] { font-size: 0.8125rem; }3129.peach-note-editor-body font[size="3"],3130.peach-note-content font[size="3"] { font-size: 1rem; }3131.peach-note-editor-body font[size="4"],3132.peach-note-content font[size="4"] { font-size: 20px; }3133.peach-note-editor-body font[size="5"],3134.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }31353136/* bold / italic inside the editor and note display */3137.peach-note-editor-body b, .peach-note-editor-body strong,3138.peach-note-content b, .peach-note-content strong { font-weight: 700; }3139.peach-note-editor-body em, .peach-note-editor-body i,3140.peach-note-content em, .peach-note-content i { font-style: italic; }31413142/* note display — rendered HTML, no pre-wrap */3143.peach-note-content {3144  overflow: auto;3145  max-height: 340px;3146  word-break: break-word;3147}31483149/* ── Note textarea ── */3150.peach-note-textarea {3151  width: 100%;3152  min-height: 180px;3153  max-height: 280px;3154  resize: vertical;3155  background: var(--peach-t4);3156  border: 1px solid var(--peach-t3);3157  border-radius: 8px;3158  padding: 10px 12px;3159  font-family: "IBM Plex Mono", monospace;3160  font-size: 0.75rem;3161  line-height: 1.7;3162  color: var(--peach-t1);3163  outline: none;3164  transition: border-color 150ms ease;3165}31663167.peach-note-textarea:focus {3168  border-color: var(--peach-t2);3169}31703171.peach-note-char-count {3172  font-family: "IBM Plex Mono", monospace;3173  font-size: 0.5625rem;3174  color: var(--peach-t3);3175  text-align: right;3176  margin-top: 4px;3177  letter-spacing: 0.1em;3178}31793180/* ── Field input baseline ── */3181.peach-new-field-input {3182  width: 100%;3183  background: transparent;3184  border: none;3185  border-bottom: 1px solid var(--peach-t3);3186  padding: 4px 0;3187  color: var(--peach-t1);3188  font-family: "IBM Plex Mono", monospace;3189  font-size: 0.8125rem;3190  outline: none;3191  transition: border-color 150ms ease;3192}31933194.peach-new-field-input:focus {3195  border-bottom-color: var(--peach-t0);3196  color: var(--peach-t0);3197}31983199.peach-new-name-input {3200  width: 100%;3201  background: transparent;3202  border: none;3203  border-bottom: 1px solid var(--peach-t3);3204  padding: 6px 0;3205  font-family: var(--font-display);3206  font-style: italic;3207  font-size: 28px;3208  color: var(--peach-t0);3209  outline: none;3210  transition: border-color 150ms ease;3211}32123213.peach-new-name-input:focus {3214  border-bottom-color: var(--peach-t1);3215}32163217.peach-new-name-input::placeholder {3218  color: var(--peach-t2);3219  font-style: italic;3220}32213222.peach-new-field-input::placeholder {3223  color: var(--peach-t3);3224}32253226/* ── Demo entrance animation ── */3227#hd-shell {3228  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3229}3230@keyframes hd-shell-enter {3231  from { opacity: 0; transform: scale(0.96) translateY(16px); }3232  to   { opacity: 1; transform: scale(1) translateY(0); }3233}32343235/* ── Keyframes ── */3236@keyframes peach-char-enter {3237  from { opacity: 0; transform: translateY(0.22em); }3238  to   { opacity: 1; transform: translateY(0); }3239}3240@keyframes peach-content-enter {3241  from { opacity: 0.96; transform: translateY(4px); }3242  to   { opacity: 1; transform: translateY(0); }3243}3244@keyframes peach-content-exit {3245  from { opacity: 1; transform: translateY(0); }3246  to   { opacity: 0.92; transform: translateY(-3px); }3247}3248@keyframes peach-screen-enter {3249  from { opacity: 0; transform: translateY(14px); }3250  to   { opacity: 1; transform: translateY(0); }3251}3252@keyframes peach-shell-fade-in {3253  from { opacity: 0; }3254  to   { opacity: 1; }3255}3256@keyframes peach-veil-in {3257  from { opacity: 0; }3258  to   { opacity: 1; }3259}3260@keyframes peach-lock-settle {3261  0%   { transform: scale(0.9); }3262  65%  { transform: scale(1.08); }3263  100% { transform: scale(1); }3264}3265@keyframes peach-copy-confirm {3266  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3267  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); }3268}3269@keyframes peach-copy-retreat {3270  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); }3271  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3272}3273@keyframes peach-copy-flood {3274  from { opacity: 0; transform: scaleX(0.15); }3275  to   { opacity: 1; transform: scaleX(1); }3276}3277@keyframes peach-copy-icon-settle {3278  from  { transform: scale(0.84); }3279  70%   { transform: scale(1.08); }3280  to    { transform: scale(1); }3281}3282@keyframes peach-copy-sheen-retreat {3283  from { opacity: 1; transform: scaleX(1); }3284  to   { opacity: 0; transform: scaleX(0.15); }3285}3286@keyframes peach-copy-drain {3287  from { width: 100%; }3288  to   { width: 0; }3289}3290@keyframes peach-shake {3291  0%, 100% { transform: translateX(0); }3292  20%      { transform: translateX(-6px); }3293  40%      { transform: translateX(6px); }3294  60%      { transform: translateX(-4px); }3295  80%      { transform: translateX(4px); }3296}32973298@keyframes pip-pulse {3299  0% { transform: scale(1); }3300  40% { transform: scale(2.2); }3301  100% { transform: scale(1); }3302}330333043305/* ── Password generator ── */3306.peach-pwgen-body {3307  flex: 1; overflow-y: auto;3308  display: flex; flex-direction: column;3309}3310.peach-policy-badge {3311  display: flex; align-items: center;3312  padding: 6px 20px 0;3313  font-size: 0.625rem; font-family: Inter, sans-serif;3314  color: var(--peach-t2); letter-spacing: 0.04em;3315}3316.peach-pwgen-display {3317  padding: 14px 20px 12px;3318  border-bottom: 1px solid var(--peach-t3);3319  display: flex; align-items: flex-start; gap: 10px;3320}3321.peach-pwgen-display-row {3322  display: flex;3323  align-items: flex-start;3324  gap: 8px;3325  padding-bottom: 8px;3326  border-bottom: 1px solid var(--peach-t3);3327}3328.peach-pwgen-output {3329  flex: 1; min-width: 0; margin: 0;3330  font-family: "IBM Plex Mono", monospace;3331  font-size: 0.8125rem; color: var(--peach-t0);3332  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3333  white-space: normal;3334  padding: 10px 12px;3335  background: var(--peach-t4);3336  border-radius: 6px;3337  min-height: 36px;3338}3339.peach-pwgen-output-display {3340  flex: 1;3341  min-width: 0;3342  margin: 0;3343  font-family: var(--font-display);3344  font-style: italic;3345  font-weight: 300;3346  font-size: 32px;3347  line-height: 1.05;3348  color: var(--peach-t0);3349  word-break: break-all;3350  overflow-wrap: break-word;3351  white-space: normal;3352  letter-spacing: 0.02em;3353}3354.peach-pwgen-display-actions {3355  display: flex;3356  flex-direction: column;3357  gap: 4px;3358  flex-shrink: 0;3359  margin-top: 2px;3360}3361.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3362.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3363.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3364.peach-pwgen-len-num {3365  font-family: "IBM Plex Mono", monospace;3366  font-size: 0.75rem; color: var(--peach-accent);3367}3368.peach-pwgen-len-num--edit {3369  cursor: text;3370  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3371}3372.peach-pwgen-len-input {3373  font-family: "IBM Plex Mono", monospace;3374  font-size: 0.75rem;3375  color: var(--peach-accent);3376  background: transparent;3377  border: none;3378  border-bottom: 1px solid var(--peach-accent);3379  outline: none;3380  width: 32px;3381  text-align: right;3382  padding: 0;3383}3384.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3385.peach-pwgen-toggles { display: flex; flex-direction: column; }3386.peach-pwgen-charset-pills {3387  display: flex;3388  gap: 6px;3389  flex-wrap: wrap;3390}3391.peach-pwgen-pill {3392  padding: 4px 11px;3393  border-radius: 999px;3394  border: 1px solid var(--peach-t3);3395  background: transparent;3396  color: var(--peach-t2);3397  font-family: "IBM Plex Mono", monospace;3398  font-size: 0.5625rem;3399  letter-spacing: 0.08em;3400  cursor: pointer;3401  transition: all 150ms ease;3402}3403.peach-pwgen-pill.is-on {3404  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3405  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3406  color: var(--peach-accent);3407}3408.peach-pwgen-pill:not(.is-on):hover {3409  color: var(--peach-t1);3410  border-color: var(--peach-t2);3411}3412.peach-pwgen-use-btn {3413  width: 100%;3414  min-height: 34px;3415  border-radius: 8px;3416  margin-top: 2px;3417}3418.peach-generator-constraint-note {3419  font-family: 'IBM Plex Mono', monospace;3420  font-size: 10px;3421  color: var(--peach-t3);3422  letter-spacing: 0.04em;3423  margin: 0;3424  transition: opacity 200ms ease;3425}3426.peach-pwgen-toggle-row {3427  display: flex; align-items: center; justify-content: space-between;3428  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3429}3430.peach-pwgen-toggle-row:last-child { border-bottom: none; }3431.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }34323433/* Peach popup should not expose native scrollbars on internal panels. */3434.peach-settings-body,3435.peach-new-body,3436.peach-pwgen-body,3437.lock-screen,3438.peach-import-preview {3439  scrollbar-width: none;3440  -ms-overflow-style: none;3441  overscroll-behavior: contain;3442}3443.peach-settings-body::-webkit-scrollbar,3444.peach-new-body::-webkit-scrollbar,3445.peach-pwgen-body::-webkit-scrollbar,3446.lock-screen::-webkit-scrollbar,3447.peach-import-preview::-webkit-scrollbar {3448  width: 0;3449  height: 0;3450  display: none;3451}34523453.lock-screen {3454  height: 100%;3455  min-height: 100%;3456  overflow-y: auto;3457  padding: 18px 18px 16px;3458  gap: 14px;3459  grid-template-rows: auto auto auto 1fr auto;3460  align-content: stretch;3461  position: relative;3462  isolation: isolate;3463}3464.peach-screen.lock-screen--vault-stage {3465  display: flex;3466  flex-direction: column;3467  justify-content: flex-start;3468  gap: 18px;3469  padding: 20px 18px 18px;3470  overflow: hidden;3471}3472.peach-screen.lock-screen--vault-stage .peach-lock-panel {3473  margin-top: 0;3474}3475.lock-screen--onboarding {3476  display: flex;3477  flex-direction: column;3478  gap: 12px;3479  justify-content: flex-start;3480}34813482.lock-screen::before {3483  content: "";3484  position: absolute;3485  inset: 12px 18px auto auto;3486  width: 160px;3487  height: 160px;3488  border-radius: 999px;3489  background:3490    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%);3491  filter: blur(6px);3492  opacity: 0.7;3493  pointer-events: none;3494  z-index: 0;3495}34963497.peach-lock-rune-string {3498  flex: 1;3499  display: flex;3500  align-items: center;3501  justify-content: center;3502  gap: 6px;3503  font-family: PeachScript, monospace;3504  font-size: 0.8125rem;3505  letter-spacing: 0.05em;3506  pointer-events: none;3507  user-select: none;3508  position: relative;3509  z-index: 1;3510}35113512.peach-lock-rune-string span {3513  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3514  text-shadow:3515    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3516    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3517  transition: color 0.9s ease, text-shadow 0.9s ease;3518}35193520.peach-lock-rune-string span.is-glowing {3521  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3522  text-shadow:3523    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3524    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3525}35263527.lock-screen-header {3528  display: flex;3529  align-items: center;3530  justify-content: space-between;3531  position: relative;3532  z-index: 1;3533}35343535.lock-password-input.shake {3536  animation: peach-shake 300ms ease-in-out;3537}35383539.peach-hint-error {3540  color: rgba(220, 80, 60, 0.92);3541}35423543.peach-onboarding-headline {3544  margin: 0;3545  font-family: var(--font-display);3546  font-size: 35px;3547  line-height: 0.88;3548  font-style: italic;3549  font-weight: 400;3550  max-width: 252px;3551}35523553.peach-lock-copy {3554  display: grid;3555  gap: 8px;3556  position: relative;3557  z-index: 1;3558}35593560.peach-lock-copy--onboarding {3561  gap: 10px;3562}35633564.peach-lock-hero {3565  position: relative;3566  z-index: 1;3567  display: grid;3568  gap: 8px;3569  min-height: 0;3570  padding: 4px 2px 0;3571  border: none;3572  border-radius: 0;3573  background: transparent;3574  box-shadow: none;3575}3576.peach-lock-hero-art {3577  position: absolute;3578  right: -8px;3579  top: -6px;3580  width: 120px;3581  height: 120px;3582  display: flex;3583  align-items: center;3584  justify-content: center;3585  pointer-events: none;3586  opacity: 0.12;3587  filter: saturate(0.9);3588}3589.peach-lock-hero-mark {3590  width: 100%;3591  height: 100%;3592}3593/* Peach body stays brand-peach across every accent — we don't want a3594   green or blue peach when sage/sky is selected. Leaf + vein keep the3595   sage tint because a real peach has a sage leaf. In the new brand-kit3596   mark the leaf is path 1 and the vein stroke is path 2; the body and3597   back-lobe (paths 3 + 4) must stay untouched. */3598.peach-lock-hero-mark path:nth-child(1) {3599  fill: rgba(123, 144, 96, 0.88);3600}3601.peach-lock-hero-mark path:nth-child(2) {3602  stroke: rgba(94, 122, 66, 0.95);3603}3604.peach-lock-hero > *:not(.peach-lock-hero-art) {3605  position: relative;3606  z-index: 1;3607}36083609.peach-lock-eyebrow {3610  display: inline-flex;3611  align-items: center;3612  width: fit-content;3613  padding: 4px 9px;3614  border-radius: 999px;3615  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3616  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3617  color: var(--peach-t0);3618  font-family: "IBM Plex Mono", monospace;3619  font-size: 0.5rem;3620  letter-spacing: 0.18em;3621  text-transform: uppercase;3622}36233624.peach-lock-label-row {3625  display: flex;3626  align-items: center;3627  justify-content: space-between;3628  margin-bottom: 0;3629}36303631.peach-lock-reveal-btn {3632  display: inline-flex;3633  align-items: center;3634  gap: 4px;3635  background: none;3636  border: none;3637  cursor: pointer;3638  font-family: "IBM Plex Mono", monospace;3639  font-size: 0.5625rem;3640  letter-spacing: 0.06em;3641  color: var(--peach-t2);3642  padding: 2px 0;3643  transition: color 150ms ease;3644}36453646.peach-lock-reveal-btn:hover {3647  color: var(--peach-t1);3648}36493650.peach-lock-warning {3651  color: rgba(220, 80, 60, 0.85) !important;3652  line-height: 1.5;3653}36543655.peach-onboarding-cards {3656  display: grid;3657  gap: 8px;3658  position: relative;3659  z-index: 1;3660}36613662.peach-lock-panel {3663  position: relative;3664  z-index: 1;3665  display: grid;3666  gap: 9px;3667  padding: 14px 16px 15px;3668  border-radius: 18px;3669  border: 1px solid var(--peach-t3);3670  background:3671    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3672  box-shadow:3673    inset 0 1px 0 rgba(240, 232, 216, 0.04),3674    0 12px 28px rgba(0, 0, 0, 0.12);3675}36763677/* Glass surface — lock panel and settings groups */3678.peach-glass {3679  background: rgba(26, 20, 16, 0.65);3680  border: 1px solid rgba(255, 255, 255, 0.08);3681  border-radius: 12px;3682  backdrop-filter: blur(12px) saturate(1.4);3683  -webkit-backdrop-filter: blur(12px) saturate(1.4);3684}36853686@supports not (backdrop-filter: blur(1px)) {3687  .peach-glass {3688    background: rgba(26, 20, 16, 0.92);3689    border: 1px solid rgba(255, 255, 255, 0.10);3690    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3691  }3692}36933694.light .peach-glass,3695[data-theme="light"] .peach-glass {3696  background: rgba(240, 233, 223, 0.72);3697  border: 1px solid rgba(26, 18, 8, 0.08);3698  backdrop-filter: blur(12px) saturate(1.2);3699  -webkit-backdrop-filter: blur(12px) saturate(1.2);3700}37013702@supports not (backdrop-filter: blur(1px)) {3703  .light .peach-glass,3704  [data-theme="light"] .peach-glass {3705    background: rgba(240, 233, 223, 0.97);3706    border: 1px solid rgba(26, 18, 8, 0.10);3707  }3708}37093710/* Lock panel keeps its own border-radius over the generic glass token */3711.peach-lock-panel.peach-glass {3712  border-radius: 18px;3713  background: rgba(26, 20, 16, 0.65);3714  border: 1px solid rgba(255, 255, 255, 0.08);3715  box-shadow:3716    inset 0 1px 0 rgba(255, 255, 255, 0.05),3717    0 12px 28px rgba(0, 0, 0, 0.3);3718}37193720.light .peach-lock-panel.peach-glass,3721[data-theme="light"] .peach-lock-panel.peach-glass {3722  background: rgba(240, 233, 223, 0.82);3723  border: 1px solid rgba(26, 18, 8, 0.08);3724  box-shadow:3725    inset 0 1px 0 rgba(255, 255, 255, 0.4),3726    0 8px 24px rgba(80, 56, 32, 0.15);3727}37283729@supports not (backdrop-filter: blur(1px)) {3730  .peach-lock-panel.peach-glass {3731    background: rgba(26, 20, 16, 0.92);3732    box-shadow:3733      inset 0 1px 0 rgba(255, 255, 255, 0.05),3734      0 12px 28px rgba(0, 0, 0, 0.4);3735  }3736  .light .peach-lock-panel.peach-glass,3737  [data-theme="light"] .peach-lock-panel.peach-glass {3738    background: rgba(240, 233, 223, 0.98);3739  }3740}37413742.peach-lock-panel--secondary {3743  gap: 12px;3744}37453746.peach-lock-panel-header {3747  display: flex;3748  align-items: baseline;3749  justify-content: space-between;3750  gap: 12px;3751}37523753.peach-lock-option-grid {3754  display: grid;3755  gap: 10px;3756}37573758.peach-lock-option {3759  width: 100%;3760  display: grid;3761  gap: 6px;3762  padding: 14px 15px;3763  border-radius: 16px;3764  border: 1px solid rgba(240, 232, 216, 0.08);3765  background: rgba(240, 232, 216, 0.02);3766  color: var(--peach-t0);3767  text-align: left;3768  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3769}37703771.peach-lock-option:hover {3772  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3773  background: rgba(240, 232, 216, 0.04);3774  transform: translateY(-1px);3775}37763777.peach-lock-option-title {3778  font-size: 0.75rem;3779  color: var(--peach-t0);3780}37813782.peach-lock-option-copy {3783  font-size: 0.6875rem;3784  line-height: 1.55;3785  color: var(--peach-t1);3786}37873788.peach-onboarding-stack {3789  margin-top: 2px;3790}3791.peach-lock-panel-footer {3792  display: grid;3793  gap: 6px;3794  margin-top: 2px;3795  padding-top: 10px;3796  border-top: 1px solid rgba(240, 232, 216, 0.06);3797}37983799/* ── Restore tab view ─────────────────────────────────────────────────────3800   Tab-based restore screen replacing the old three-card picker. */38013802.peach-restore-tabview {3803  overflow: hidden;3804}38053806.peach-restore-tabcard {3807  flex: 1;3808  display: flex;3809  flex-direction: column;3810  gap: 0;3811  padding: 0;3812  overflow: hidden;3813  cursor: default;3814  user-select: none;3815  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3816}38173818/* ── Tab selector ─────────────────────────────────────────────────────── */38193820.peach-restore-tabs {3821  display: flex;3822  justify-content: space-around;3823  padding: 14px 10px 10px;3824  border-bottom: 1px solid var(--peach-t3);3825  gap: 2px;3826  overflow: hidden;3827  scrollbar-width: none;3828}3829.peach-restore-tabs::-webkit-scrollbar { display: none; }38303831.peach-restore-tab {3832  background: none;3833  border: none;3834  cursor: pointer;3835  padding: 3px 2px;3836  font-family: 'Cormorant Garamond', Georgia, serif;3837  font-style: italic;3838  font-size: 11px;3839  color: var(--peach-t2);3840  transition: color 150ms ease, text-shadow 150ms ease;3841  flex: 1;3842  min-width: 0;3843  text-align: center;3844  white-space: nowrap;3845  overflow: hidden;3846  text-overflow: ellipsis;3847}3848.peach-restore-tab:hover {3849  color: var(--peach-accent);3850  text-shadow:3851    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3852    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3853}3854.peach-restore-tab.is-active {3855  color: var(--peach-accent);3856  text-shadow:3857    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3858    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3859}38603861/* ── Content area ─────────────────────────────────────────────────────── */38623863.peach-restore-content {3864  padding: 16px 16px 14px;3865  display: flex;3866  flex-direction: column;3867  gap: 8px;3868  overflow: hidden;3869  scrollbar-width: none;3870  flex: 1;3871}3872.peach-restore-content::-webkit-scrollbar { display: none; }3873.peach-restore-content > * {3874  overflow: hidden;3875  scrollbar-width: none;3876}3877.peach-restore-content > *::-webkit-scrollbar { display: none; }38783879/* ── Shared tab inner layout ──────────────────────────────────────────── */38803881.peach-rt-symbols,3882.peach-rt-csv,3883.peach-rt-phone,3884.peach-restore-codex {3885  display: flex;3886  flex-direction: column;3887  gap: 8px;3888  overflow: hidden;3889}38903891.peach-restore-codex {3892  min-height: 0;3893  justify-content: center;3894}38953896.peach-restore-codex-title {3897  margin: 0;3898  font-family: var(--font-display);3899  font-size: 1rem;3900  font-style: italic;3901  color: var(--peach-t0);3902}39033904.peach-restore-codex-copy {3905  margin: 0;3906  font-size: 0.75rem;3907  line-height: 1.5;3908  color: var(--peach-t1);3909}39103911.peach-restore-codex-button {3912  width: 100%;3913  justify-content: center;3914}39153916.peach-rt-submit {3917  width: 100%;3918}39193920.peach-rt-error {3921  margin: 0;3922  font-size: 0.6875rem;3923  color: var(--peach-breach);3924  line-height: 1.4;3925}39263927/* ── PeachScript tab ──────────────────────────────────────────────────── */39283929.peach-restore-symbols-textarea {3930  font-family: 'PeachScript', monospace;3931  font-size: 13px;3932  line-height: 1.9;3933  letter-spacing: 0.1em;3934  word-break: break-all;3935  resize: none;3936  width: 100%;3937  min-height: 56px;3938  max-height: 72px;3939  overflow: hidden;3940  scrollbar-width: none;3941  -ms-overflow-style: none;3942  box-sizing: border-box;3943  padding: 6px 8px;3944  border-radius: 8px;3945  border: 1px solid var(--peach-t3);3946  background: rgba(240, 232, 216, 0.03);3947  color: var(--peach-t0);3948}3949.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3950.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }39513952.peach-restore-symbols-pass {3953  width: 100%;3954  box-sizing: border-box;3955  padding: 7px 10px;3956  border-radius: 8px;3957  border: 1px solid var(--peach-t3);3958  background: rgba(240, 232, 216, 0.03);3959  color: var(--peach-t0);3960  font-size: 0.8125rem;3961}3962.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }3963.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }39643965.peach-rt-divider {3966  text-align: center;3967  font-size: 0.6875rem;3968  color: var(--peach-t2);3969  font-style: italic;3970}39713972.peach-rt-file-label {3973  width: 100%;3974  justify-content: center;3975}39763977.peach-rt-anim-canvas {3978  width: 100%;3979  height: 180px;3980  border-radius: 10px;3981  overflow: hidden;3982  display: block;3983}39843985/* ── CSV tab ──────────────────────────────────────────────────────────── */39863987.peach-rt-csv-sources {3988  margin: 0;3989  font-size: 0.6875rem;3990  color: var(--peach-t2);3991  line-height: 1.5;3992  text-align: center;3993}39943995.peach-rt-csv-warning {3996  margin: 0;3997  font-family: "IBM Plex Mono", monospace;3998  font-size: 0.5625rem;3999  letter-spacing: 0.12em;4000  color: var(--peach-breach);4001  text-align: center;4002}40034004/* ── From Phone tab ───────────────────────────────────────────────────── */40054006.peach-rt-phone-code {4007  margin: 0;4008  text-align: center;4009  font-family: "IBM Plex Mono", monospace;4010  font-size: 22px;4011  letter-spacing: 0.18em;4012  color: var(--peach-t0);4013}40144015.peach-rt-phone-qr {4016  display: block;4017  width: 96px;4018  height: 96px;4019  margin: 0 auto;4020  border-radius: 6px;4021  image-rendering: pixelated;4022  overflow: hidden;4023}40244025.peach-rt-phone-hint {4026  margin: 0;4027  font-size: 0.6875rem;4028  color: var(--peach-t2);4029  line-height: 1.55;4030  text-align: center;4031}40324033/* ── Intro popup ──────────────────────────────────────────────────────── */40344035.peach-restore-intro-overlay {4036  position: absolute;4037  inset: 0;4038  z-index: 100;4039  display: flex;4040  align-items: center;4041  justify-content: center;4042  padding: 20px;4043  background: rgba(12, 10, 6, 0.7);4044  backdrop-filter: blur(4px);4045  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4046}40474048.peach-restore-intro-card {4049  width: 100%;4050  display: flex;4051  flex-direction: column;4052  gap: 12px;4053  padding: 22px 20px 20px;4054  border-radius: 16px;4055  border: 1px solid var(--peach-t3);4056  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));4057  backdrop-filter: blur(4px);4058  -webkit-backdrop-filter: blur(4px);4059  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);4060}40614062.peach-restore-intro-headline {4063  margin: 0;4064  font-family: var(--font-display);4065  font-style: italic;4066  font-size: 20px;4067  font-weight: 400;4068  color: var(--peach-t0);4069}40704071.peach-restore-intro-body {4072  display: flex;4073  flex-direction: column;4074  gap: 8px;4075}4076.peach-restore-intro-body p {4077  margin: 0;4078  font-size: 0.75rem;4079  color: var(--peach-t1);4080  line-height: 1.5;4081}40824083.peach-restore-intro-btn {4084  width: 100%;4085  margin-top: 4px;4086}40874088/* Snapshot restore panel */4089.peach-snapshot-panel {4090  gap: 10px;4091  overflow-y: auto;4092  max-height: 340px;4093}4094.peach-snapshot-list {4095  display: flex;4096  flex-direction: column;4097  gap: 4px;4098}4099.peach-snapshot-row {4100  display: flex;4101  align-items: center;4102  justify-content: space-between;4103  width: 100%;4104  padding: 8px 10px;4105  border-radius: 8px;4106  border: 1px solid rgba(240, 232, 216, 0.07);4107  background: transparent;4108  cursor: pointer;4109  transition: border-color 120ms, background 120ms;4110  text-align: left;4111  gap: 8px;4112}4113.peach-snapshot-row:hover {4114  border-color: rgba(240, 232, 216, 0.14);4115  background: rgba(240, 232, 216, 0.03);4116}4117.peach-snapshot-row.is-selected {4118  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4119  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);4120}4121.peach-snapshot-time {4122  font-size: 11.5px;4123  color: var(--peach-t0);4124  flex: 1;4125}4126.peach-snapshot-count {4127  font-family: "IBM Plex Mono", monospace;4128  font-size: 0.625rem;4129  color: var(--peach-t2);4130  flex-shrink: 0;4131}4132.peach-snapshot-confirm {4133  display: flex;4134  flex-direction: column;4135  gap: 8px;4136  padding-top: 10px;4137  border-top: 1px solid rgba(240, 232, 216, 0.06);4138}4139.peach-snapshot-warning {4140  display: flex;4141  align-items: flex-start;4142  gap: 6px;4143  font-size: 10.5px;4144  color: rgba(220, 80, 60, 0.85);4145  line-height: 1.55;4146}4147.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }4148.peach-snapshot-confirm-row {4149  display: flex;4150  gap: 6px;4151  align-items: center;4152}4153.peach-snapshot-restore-btn {4154  width: 100%;4155}4156.peach-lock-hero--unlock .peach-lock-hero-art {4157  width: 112px;4158  height: 112px;4159  right: 0;4160  top: 2px;4161  opacity: 0.1;4162}41634164.peach-card {4165  border: 1px solid var(--peach-t3);4166  border-radius: 18px;4167  background:4168    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4169  box-shadow:4170    inset 0 0 0 1px var(--peach-border-accent),4171    inset 0 1px 0 rgba(240, 232, 216, 0.04),4172    0 12px 32px rgba(0, 0, 0, 0.14);4173  overflow: hidden;4174}41754176.peach-card-active {4177  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4178  box-shadow:4179    inset 0 1px 0 rgba(240, 232, 216, 0.05),4180    0 16px 38px rgba(0, 0, 0, 0.18),4181    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4182}41834184.peach-card-disabled {4185  opacity: 0.72;4186}41874188.peach-card-header {4189  width: 100%;4190  padding: 13px 16px 11px;4191  background: transparent;4192  color: var(--peach-t0);4193  display: flex;4194  justify-content: space-between;4195  align-items: center;4196  text-align: left;4197  font-size: 0.75rem;4198}41994200.peach-card-body {4201  padding: 0 16px 16px;4202  display: grid;4203  gap: 9px;4204}42054206.peach-card-tag {4207  color: var(--peach-t2);4208  font-family: "IBM Plex Mono", monospace;4209  font-size: 0.5625rem;4210  letter-spacing: 0.12em;4211  text-transform: uppercase;4212}42134214.peach-empty-copy {4215  display: grid;4216  gap: 6px;4217  color: var(--peach-t1);4218  font-size: 0.8125rem;4219}42204221.peach-lock-submit {4222  width: 100%;4223  box-shadow:4224    0 1px 0 rgba(255,255,255,0.10) inset,4225    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4226    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4227    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4228}42294230.peach-lock-secondary {4231  width: 100%;4232  border-color: var(--peach-t3);4233  background: rgba(240, 232, 216, 0.02);4234}42354236.peach-lock-secondary:hover {4237  background: rgba(240, 232, 216, 0.04);4238}42394240.peach-lock-note {4241  max-width: none;4242  line-height: 1.55;4243  margin: 0;4244}42454246.peach-overlay-action {4247  font-size: 0.625rem;4248  padding: 4px 8px;4249  letter-spacing: 0.06em;4250  min-width: 44px;4251  text-align: center;4252}42534254.peach-inline-action {4255  flex-shrink: 0;4256  font-size: 0.5625rem;4257  letter-spacing: 0.1em;4258  text-transform: uppercase;4259  padding: 4px 7px;4260}4261.peach-password-toggle-btn {4262  display: inline-flex;4263  align-items: center;4264  justify-content: center;4265  min-width: 30px;4266  min-height: 26px;4267  padding: 0 7px;4268  border: 1px solid var(--peach-t3);4269  border-radius: 999px;4270  background: rgba(240, 232, 216, 0.04);4271  color: var(--peach-t2);4272  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4273}4274.peach-password-toggle-btn:hover {4275  border-color: var(--peach-t2);4276  color: var(--peach-t0);4277  background: rgba(240, 232, 216, 0.06);4278}42794280.peach-new-textarea {4281  width: 100%;4282  min-height: 88px;4283  resize: vertical;4284  border: 0;4285  outline: none;4286  background: transparent;4287  color: var(--peach-t1);4288  font-family: "IBM Plex Mono", monospace;4289  font-size: 0.75rem;4290  line-height: 1.65;4291  caret-color: var(--peach-accent);4292}42934294.peach-new-textarea::placeholder {4295  color: var(--peach-t2);4296  opacity: 0.7;4297}42984299.peach-settings-actions {4300  display: grid;4301  gap: 8px;4302}43034304.peach-sync-section-label {4305  font-size: 0.6875rem;4306  color: var(--peach-t2);4307  text-transform: uppercase;4308  letter-spacing: 0.05em;4309}43104311.peach-sync-network-note {4312  margin: 0 0 6px;4313  font-size: 0.75rem;4314  color: var(--peach-t2);4315  line-height: 1.4;4316}43174318.peach-settings-row--tappable {4319  background: none;4320  border: none;4321  width: 100%;4322  text-align: left;4323  cursor: pointer;4324  color: var(--peach-t1);4325  font-size: 0.8125rem;4326}4327.peach-settings-row--tappable:hover {4328  color: var(--peach-t0);4329}43304331.peach-sync-pro-hint {4332  display: flex;4333  flex-direction: column;4334  align-items: flex-start;4335  gap: 8px;4336  padding: 12px 0 4px;4337}43384339.peach-sync-device-row {4340  display: flex;4341  justify-content: space-between;4342  align-items: center;4343  padding: 6px 0;4344  border-bottom: 1px solid var(--peach-t3);4345}43464347.peach-sync-device-info {4348  display: flex;4349  flex-direction: column;4350  gap: 2px;4351}43524353.peach-sync-device-name {4354  font-size: 0.8125rem;4355  color: var(--peach-t0);4356}43574358.peach-sync-device-meta {4359  font-size: 0.6875rem;4360  color: var(--peach-t2);4361}43624363.peach-sync-status-dot {4364  display: inline-block;4365  width: 8px;4366  height: 8px;4367  border-radius: 50%;4368  vertical-align: middle;4369}43704371.peach-sync-remove-btn {4372  color: var(--peach-breach);4373}43744375.peach-sync-advanced-row {4376  display: flex;4377  justify-content: space-between;4378  align-items: center;4379  padding: 6px 0;4380  gap: 12px;4381}43824383.peach-sync-advanced-info {4384  display: flex;4385  flex-direction: column;4386  gap: 2px;4387  flex: 1;4388}43894390.peach-sync-advanced-name {4391  font-size: 0.8125rem;4392  color: var(--peach-t0);4393}43944395.peach-sync-reset-confirm {4396  display: flex;4397  flex-direction: column;4398  gap: 8px;4399  padding: 10px;4400  border: 1px solid var(--peach-breach);4401  border-radius: 10px;4402  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4403}44044405.peach-sync-reset-confirm-headline {4406  font-size: 0.8125rem;4407  font-weight: 600;4408  color: var(--peach-t0);4409  margin: 0;4410}44114412.peach-sync-reset-confirm-body {4413  font-size: 0.75rem;4414  color: var(--peach-t1);4415  margin: 0;4416  line-height: 1.4;4417}44184419.peach-btn--danger {4420  background: var(--peach-breach);4421  color: #fff;4422  border-color: var(--peach-breach);4423}4424.peach-btn--danger:hover:not(:disabled) {4425  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4426}4427.peach-btn--danger:disabled {4428  opacity: 0.55;4429  cursor: not-allowed;4430}44314432.peach-sync-hero-icon {4433  color: var(--peach-t1);4434  opacity: 0.85;4435}44364437.peach-import-preview {4438  margin-bottom: 12px;4439  max-height: 152px;4440  overflow-y: auto;4441  border: 1px solid var(--peach-t3);4442  border-radius: 10px;4443  padding: 8px 10px;4444  display: grid;4445  gap: 8px;4446  background: rgba(240, 232, 216, 0.02);4447}44484449.peach-import-preview-row {4450  display: flex;4451  justify-content: space-between;4452  gap: 10px;4453  font-size: 0.6875rem;4454  color: var(--peach-t1);4455}44564457.peach-import-preview-title {4458  color: var(--peach-t0);4459  flex: 1;4460  min-width: 0;4461  overflow: hidden;4462  text-overflow: ellipsis;4463  white-space: nowrap;4464}44654466.peach-import-preview-meta {4467  color: var(--peach-t2);4468  flex-shrink: 0;4469  max-width: 42%;4470  overflow: hidden;4471  text-overflow: ellipsis;4472  white-space: nowrap;4473}44744475.peach-import-preview-more {4476  color: var(--peach-t2);4477  font-size: 0.625rem;4478}44794480.peach-restore-copy {4481  margin: 0;4482  color: var(--peach-t1);4483  font-size: 0.6875rem;4484  line-height: 1.6;4485}44864487.peach-restore-warning {4488  padding: 10px 12px;4489  border-radius: 12px;4490  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4491  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4492  color: var(--peach-t0);4493  font-size: 0.6875rem;4494  line-height: 1.55;4495}44964497.peach-provider-chips {4498  display: flex;4499  flex-wrap: wrap;4500  gap: 6px;4501}45024503.peach-provider-chip {4504  display: inline-flex;4505  align-items: center;4506  padding: 5px 8px;4507  border-radius: 999px;4508  border: 1px solid var(--peach-t3);4509  background: rgba(240, 232, 216, 0.02);4510  color: var(--peach-t1);4511  font-family: "IBM Plex Mono", monospace;4512  font-size: 0.5rem;4513  letter-spacing: 0.08em;4514  text-transform: uppercase;4515}45164517.peach-restore-file,4518.peach-restore-input {4519  width: 100%;4520  border-radius: 10px;4521  border: 1px solid var(--peach-t3);4522  background: var(--peach-s2);4523  color: var(--peach-t0);4524  font-size: 0.75rem;4525}45264527.peach-restore-file {4528  padding: 9px 10px;4529}45304531.peach-restore-file::file-selector-button {4532  margin-right: 10px;4533  padding: 7px 10px;4534  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4535  border-radius: 999px;4536  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4537  color: var(--peach-t0);4538  font-size: 0.625rem;4539  letter-spacing: 0.08em;4540  text-transform: uppercase;4541  cursor: pointer;4542}45434544.peach-restore-input {4545  padding: 10px 12px;4546}45474548.peach-auth-grid {4549  display: grid;4550  gap: 10px;4551}45524553.peach-import-summary {4554  color: var(--peach-t1);4555  font-size: 0.75rem;4556  line-height: 1.6;4557  margin-bottom: 12px;4558}45594560.peach-restore-error {4561  color: rgba(220, 80, 60, 0.95);4562  font-size: 0.75rem;4563  line-height: 1.55;4564}45654566.peach-passkey-card {4567  max-width: 400px;4568  margin: auto 16px;4569  align-self: center;4570  width: calc(100% - 32px);4571}45724573/* Center the approval card vertically inside the overlay-view (which sets4574 * flex-direction: column without justify-content). Without this, the card4575 * sits at the top with a tall empty band below — looks unfinished on the4576 * 320px popup. */4577.peach-overlay-view:has(.peach-passkey-card) {4578  justify-content: center;4579}45804581.peach-pro-badge {4582  padding: 2px 6px;4583  border-radius: 999px;4584  font-family: var(--font-ui);4585  font-size: 0.625rem;4586  letter-spacing: 0.08em;4587  text-transform: uppercase;4588  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4589  color: var(--peach-accent);4590}45914592/* ── Shortcuts rebind table ─────────────────────────────────── */4593.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4594.peach-shortcut-row {4595  display: flex;4596  align-items: center;4597  gap: 10px;4598  padding: 6px 0;4599}4600.peach-shortcut-row-label {4601  flex: 1;4602  font-size: 0.75rem;4603  color: var(--peach-t0);4604}4605.peach-shortcut-chip {4606  min-width: 64px;4607  padding: 4px 10px;4608  border-radius: 6px;4609  border: 1px solid var(--peach-t3);4610  background: var(--peach-input-bg, var(--surface-card));4611  color: var(--peach-t0);4612  font-family: var(--font-mono);4613  font-size: 0.6875rem;4614  letter-spacing: 0.04em;4615  cursor: pointer;4616  text-align: center;4617  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4618}4619.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4620.peach-shortcut-chip.is-custom {4621  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4622  color: var(--peach-accent);4623}4624.peach-shortcut-chip.is-capturing {4625  border-color: var(--peach-accent);4626  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4627  color: var(--peach-accent);4628  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4629}4630@keyframes peach-shortcut-capture-pulse {4631  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4632  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4633}4634.peach-shortcut-reset {4635  background: transparent;4636  border: none;4637  cursor: pointer;4638  color: var(--peach-t2);4639  padding: 4px 6px;4640  border-radius: 5px;4641  font-size: 0.875rem;4642  line-height: 1;4643  transition: color 120ms ease, background 120ms ease;4644}4645.peach-shortcut-reset:hover {4646  color: var(--peach-t0);4647  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4648}4649.peach-shortcuts-conflict {4650  margin: 4px 0 0;4651  padding: 8px 10px;4652  border-radius: 7px;4653  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4654  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4655  font-family: var(--font-mono);4656  font-size: 0.6875rem;4657  color: var(--peach-t0);4658}46594660/* ── Help dialog overlay (? to open) ────────────────────────── */4661.peach-shortcuts-help-backdrop {4662  position: fixed;4663  inset: 0;4664  background: rgba(0, 0, 0, 0.55);4665  backdrop-filter: blur(2px);4666  display: flex;4667  align-items: center;4668  justify-content: center;4669  z-index: 1000;4670  animation: peach-help-fade-in 140ms ease forwards;4671}4672@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4673.peach-shortcuts-help-card {4674  width: min(320px, 92vw);4675  max-height: 80vh;4676  overflow-y: auto;4677  border-radius: 14px;4678  border: 1px solid var(--peach-t3);4679  background: var(--peach-bg);4680  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4681  padding: 16px 18px 18px;4682  display: flex;4683  flex-direction: column;4684  gap: 12px;4685}4686.peach-shortcuts-help-head {4687  display: flex; align-items: center; justify-content: space-between;4688}4689.peach-shortcuts-help-head h3 {4690  margin: 0;4691  font-family: var(--font-display);4692  font-style: italic;4693  font-weight: 400;4694  font-size: 22px;4695  color: var(--peach-t0);4696}4697.peach-shortcuts-help-close {4698  background: transparent;4699  border: none;4700  color: var(--peach-t2);4701  cursor: pointer;4702  font-size: 0.875rem;4703  padding: 4px 8px;4704  border-radius: 5px;4705}4706.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4707.peach-shortcuts-help-body ul {4708  list-style: none; padding: 0; margin: 4px 0 12px;4709  display: grid; gap: 8px;4710}4711.peach-shortcuts-help-body li {4712  display: flex; align-items: center; justify-content: space-between; gap: 12px;4713  font-size: 0.75rem; color: var(--peach-t0);4714}4715.peach-shortcuts-help-body kbd {4716  font-family: var(--font-mono);4717  font-size: 0.6875rem;4718  padding: 3px 8px;4719  border-radius: 6px;4720  background: var(--surface-card);4721  border: 1px solid var(--peach-t3);4722  color: var(--peach-accent);4723  letter-spacing: 0.04em;4724}47254726/* ── Pro promo on Account screen ────────────────────────────── */4727.peach-pro-promo {4728  position: relative;4729  border-radius: 14px;4730  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4731  background:4732    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4733    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4734    var(--surface-card);4735  overflow: hidden;4736  margin-bottom: 14px;4737}4738.peach-pro-promo-glow {4739  position: absolute;4740  inset: -40% -20% auto auto;4741  width: 220px; height: 220px;4742  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4743  pointer-events: none;4744  filter: blur(8px);4745}4746.peach-pro-promo-inner {4747  position: relative;4748  padding: 18px 18px 16px;4749}4750.peach-pro-promo-title {4751  font-family: var(--font-display);4752  font-style: italic;4753  font-weight: 400;4754  font-size: 28px;4755  line-height: 1;4756  letter-spacing: -0.005em;4757  color: var(--peach-t0);4758  margin: 0 0 4px;4759}4760.peach-pro-promo-tagline {4761  font-family: var(--font-mono);4762  font-size: 0.625rem;4763  letter-spacing: 0.06em;4764  color: var(--peach-t2);4765  margin: 0 0 14px;4766}4767.peach-pro-promo-list {4768  list-style: none;4769  margin: 0 0 16px;4770  padding: 0;4771  display: grid;4772  gap: 9px;4773}4774.peach-pro-promo-list li {4775  display: flex;4776  align-items: flex-start;4777  gap: 9px;4778  font-size: 0.75rem;4779  color: var(--peach-t1);4780  line-height: 1.4;4781}4782.peach-pro-promo-list svg {4783  width: 14px;4784  height: 14px;4785  flex-shrink: 0;4786  color: var(--peach-accent);4787  margin-top: 2px;4788}4789.peach-pro-promo-list span {4790  color: var(--peach-t0);4791}4792.peach-pro-promo-cta {4793  width: 100%;4794  background: var(--peach-accent);4795  color: #fff;4796  border: none;4797  padding: 9px 12px;4798  border-radius: 9px;4799  font-size: 0.75rem;4800  font-weight: 500;4801  font-family: var(--font-ui);4802  letter-spacing: 0.02em;4803  text-decoration: none;4804  display: inline-flex;4805  align-items: center;4806  justify-content: center;4807  cursor: pointer;4808  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4809  box-shadow: 0 2px 16px var(--peach-glow);4810}4811.peach-pro-promo-cta:hover {4812  filter: brightness(1.07);4813  box-shadow: 0 4px 24px var(--peach-glow);4814  transform: translateY(-1px);4815}4816.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }48174818.peach-pro-or-divider {4819  display: flex;4820  align-items: center;4821  gap: 10px;4822  margin: 4px 0 12px;4823  font-family: var(--font-mono);4824  font-size: 0.625rem;4825  letter-spacing: 0.06em;4826  color: var(--peach-t2);4827  text-transform: uppercase;4828}4829.peach-pro-or-divider::before,4830.peach-pro-or-divider::after {4831  content: "";4832  flex: 1;4833  height: 1px;4834  background: var(--peach-t3);4835}48364837.peach-loading {4838  position: absolute;4839  inset: 0;4840  display: flex;4841  align-items: center;4842  justify-content: center;4843  background: var(--bg);4844  animation: peach-loading-pulse 1.2s ease-in-out infinite;4845}48464847@keyframes peach-loading-pulse {4848  0%, 100% { opacity: 0.6; }4849  50% { opacity: 1; }4850}48514852/* ── Health Dashboard ─────────────────────────────────────────────────── */4853.peach-health-body {4854  flex: 1;4855  overflow-y: auto;4856  display: flex;4857  flex-direction: column;4858  /* Hide the platform scrollbar — every other scrollable surface in the4859   * popup hides it; the Health view was the one outlier and it ruined the4860   * polish. Behavior unchanged, just no rail rendered. */4861  scrollbar-width: none;4862  -ms-overflow-style: none;4863}4864.peach-health-body::-webkit-scrollbar { display: none; }48654866/* Loading screen for the Vault Health view. The advanced report computation4867 * can run for a few seconds on a large vault — without a clear loading4868 * screen the surface looked broken (the entry view bleeds through the4869 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4870.peach-health-loading-screen {4871  flex: 1;4872  display: flex;4873  flex-direction: column;4874  align-items: center;4875  justify-content: center;4876  gap: 14px;4877  padding: 32px 28px;4878  text-align: center;4879}48804881.peach-health-loading-glyph {4882  width: 48px;4883  height: 48px;4884  display: flex;4885  align-items: center;4886  justify-content: center;4887  border-radius: 14px;4888  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4889  color: var(--peach-accent);4890}48914892.peach-health-loading-title {4893  margin: 0;4894  font-family: var(--font-display);4895  font-style: italic;4896  font-weight: 300;4897  font-size: 19px;4898  line-height: 1.2;4899  color: var(--peach-t0);4900}49014902.peach-health-loading-copy {4903  margin: 0;4904  max-width: 240px;4905  font-size: 0.75rem;4906  line-height: 1.55;4907  color: var(--peach-t2);4908}49094910.peach-health-loading-track {4911  width: 200px;4912  height: 3px;4913  margin-top: 6px;4914  border-radius: 999px;4915  background: rgba(240, 232, 216, 0.06);4916  overflow: hidden;4917}49184919.peach-health-loading-fill {4920  width: 40%;4921  height: 100%;4922  border-radius: inherit;4923  background: linear-gradient(4924    90deg,4925    transparent 0%,4926    var(--peach-accent) 50%,4927    transparent 100%4928  );4929  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4930}49314932@keyframes peach-health-loading-sweep {4933  0%   { transform: translateX(-100%); }4934  100% { transform: translateX(350%); }4935}49364937[data-motion="reduce"] .peach-health-loading-fill,4938[data-motion="reduce"] .peach-health-loading-glyph svg path {4939  animation: none;4940}49414942.peach-health-summary {4943  padding: 10px 16px 6px;4944  font-family: "IBM Plex Mono", monospace;4945  font-size: 0.6875rem;4946}4947.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4948.peach-health-summary-ok { color: var(--peach-t2); }49494950.peach-health-check-row {4951  padding: 0 16px 10px;4952}4953.peach-health-check-btn {4954  width: 100%;4955  display: flex;4956  align-items: center;4957  justify-content: center;4958}49594960.peach-health-sections {4961  flex: 1;4962  display: flex;4963  flex-direction: column;4964}49654966.peach-health-section {4967  border-bottom: 1px solid var(--peach-t3);4968}49694970.peach-health-section-header {4971  width: 100%;4972  display: flex;4973  align-items: center;4974  justify-content: space-between;4975  padding: 9px 16px;4976  background: transparent;4977  cursor: pointer;4978  color: var(--peach-t0);4979}49804981.peach-health-section-title-row {4982  display: flex;4983  align-items: center;4984  gap: 8px;4985}49864987.peach-health-count-badge {4988  display: inline-flex;4989  align-items: center;4990  justify-content: center;4991  min-width: 20px;4992  height: 18px;4993  padding: 0 5px;4994  border-radius: 999px;4995  background: rgba(220,80,60,0.15);4996  border: 1px solid rgba(220,80,60,0.25);4997  font-family: "IBM Plex Mono", monospace;4998  font-size: 0.5625rem;4999  color: rgba(220,80,60,0.9);5000}50015002.peach-health-section-title {5003  font-family: "IBM Plex Mono", monospace;5004  font-size: 0.6875rem;5005  text-transform: uppercase;5006  letter-spacing: 0.1em;5007  color: var(--peach-t1);5008}50095010.peach-health-chevron {5011  color: var(--peach-t2);5012  transition: transform 200ms ease;5013  flex-shrink: 0;5014}5015.peach-health-chevron.is-expanded {5016  transform: rotate(180deg);5017}50185019.peach-health-section-body {5020  padding: 0 16px 10px;5021  display: flex;5022  flex-direction: column;5023  gap: 4px;5024}50255026.peach-health-row {5027  display: flex;5028  align-items: flex-start;5029  justify-content: space-between;5030  gap: 8px;5031  padding: 6px 8px;5032  border-radius: 8px;5033  background: rgba(240,232,216,0.02);5034}50355036.peach-health-row-info {5037  flex: 1;5038  min-width: 0;5039  display: flex;5040  flex-direction: column;5041  gap: 2px;5042}50435044.peach-health-row-name {5045  font-family: var(--font-display);5046  font-size: 0.9375rem;5047  font-style: italic;5048  font-weight: 400;5049  color: var(--peach-t0);5050  white-space: nowrap;5051  overflow: hidden;5052  text-overflow: ellipsis;5053}50545055.peach-health-row-meta {5056  font-family: "IBM Plex Mono", monospace;5057  font-size: 0.5625rem;5058  color: var(--peach-t2);5059  letter-spacing: 0.05em;5060}50615062.peach-health-fix-btn {5063  font-size: 0.5625rem;5064  letter-spacing: 0.08em;5065  text-transform: uppercase;5066  padding: 4px 7px;5067  flex-shrink: 0;5068  display: flex;5069  align-items: center;5070}50715072.peach-health-empty {5073  font-family: "IBM Plex Mono", monospace;5074  font-size: 0.625rem;5075  color: var(--peach-t2);5076  padding: 6px 0;5077}50785079.peach-health-loading {5080  font-family: "IBM Plex Mono", monospace;5081  font-size: 0.625rem;5082  color: var(--peach-t2);5083  padding: 6px 0;5084  display: flex;5085  align-items: center;5086  gap: 6px;5087}50885089.peach-health-loading::before {5090  content: "";5091  width: 10px;5092  height: 10px;5093  border: 1.5px solid var(--peach-t3);5094  border-top-color: var(--peach-accent);5095  border-radius: 50%;5096  animation: peach-spin 600ms linear infinite;5097}50985099@keyframes peach-spin {5100  to { transform: rotate(360deg); }5101}51025103.peach-spinner {5104  width: 32px;5105  height: 32px;5106  border: 2px solid var(--peach-s2);5107  border-top-color: var(--peach-accent);5108  border-radius: 50%;5109  margin: 0 auto 16px;5110  animation: peach-spin 0.8s linear infinite;5111}51125113.peach-progress-screen {5114  text-align: center;5115  padding: 32px 16px;5116}51175118.peach-progress-screen-title {5119  font-size: 0.8125rem;5120  color: var(--peach-t0);5121  margin-bottom: 16px;5122}51235124.peach-progress-screen-stage {5125  font-size: 0.6875rem;5126  color: var(--peach-t2);5127  min-height: 14px;5128}51295130.peach-progress-screen-note {5131  font-size: 0.625rem;5132  color: var(--peach-t2);5133  margin-top: 8px;5134}51355136.peach-pairing-body {5137  flex: 1;5138  overflow-y: auto;5139  display: flex;5140  flex-direction: column;5141}51425143.peach-pairing-content {5144  flex: 1;5145  display: flex;5146  flex-direction: column;5147  align-items: center;5148  justify-content: center;5149  gap: 14px;5150  padding: 28px 20px;5151  text-align: center;5152}51535154.peach-pairing-code-screen {5155  gap: 18px;5156}51575158.peach-pairing-headline {5159  font-family: var(--font-display);5160  font-style: italic;5161  font-weight: 300;5162  font-size: 28px;5163  color: var(--peach-t0);5164  margin: 0;5165  line-height: 1;5166}51675168.peach-pairing-subline {5169  font-size: 0.75rem;5170  color: var(--peach-t2);5171  max-width: 220px;5172  line-height: 1.5;5173  margin: 0;5174}51755176.peach-pairing-subline--center {5177  text-align: center;5178}51795180/* 6-digit pairing code — both display (.peach-pairing-code) and entry5181   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking5182   so the two modes feel like the same surface. */5183.peach-pairing-code {5184  font-family: "IBM Plex Mono", monospace;5185  font-size: 36px;5186  letter-spacing: 0.25em;5187  color: var(--peach-t0);5188  text-align: center;5189  padding: 24px 0;5190  text-shadow:5191    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),5192    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);5193  background: transparent;5194  border: 0;5195  cursor: default;5196  user-select: text;5197}51985199.peach-pairing-code--loading,5200.peach-pairing-code--expired {5201  font-size: 18px;5202  letter-spacing: 0.04em;5203  color: var(--peach-t2);5204  cursor: pointer;5205  text-shadow: none;5206}52075208.peach-pairing-qr-container {5209  display: flex;5210  flex-direction: column;5211  align-items: center;5212  gap: 10px;5213}52145215.peach-pairing-qr {5216  width: 240px;5217  height: 240px;5218  display: block;5219}52205221.peach-pairing-instruction {5222  font-size: 0.75rem;5223  color: var(--peach-t2);5224  text-align: center;5225  line-height: 1.5;5226  margin: 0;5227  max-width: 220px;5228}52295230.peach-pairing-expiry {5231  font-family: "IBM Plex Mono", monospace;5232  font-size: 13px;5233  letter-spacing: 0.06em;5234  color: var(--peach-t2);5235  margin: 0;5236}52375238.peach-pairing-regen {5239  font-size: 0.75rem;5240  color: var(--peach-accent);5241  background: transparent;5242  border: 0;5243  cursor: pointer;5244  padding: 4px 0;5245  text-decoration: underline;5246  text-underline-offset: 2px;5247}52485249.peach-pairing-code-input {5250  font-family: "IBM Plex Mono", monospace;5251  font-size: 36px;5252  letter-spacing: 0.25em;5253  color: var(--peach-t0);5254  background: transparent;5255  border: 0;5256  border-bottom: 1px solid var(--peach-t3);5257  outline: none;5258  text-align: center;5259  padding: 18px 0;5260  width: 220px;5261  caret-color: var(--peach-accent);5262  transition: border-color 160ms ease;5263}52645265.peach-pairing-code-input::placeholder {5266  color: var(--peach-t3);5267}52685269.peach-pairing-code-input:focus {5270  border-bottom-color: var(--peach-accent);5271}52725273.peach-pairing-toggle {5274  background: transparent;5275  border: 0;5276  color: var(--peach-t2);5277  font-size: 0.75rem;5278  padding: 8px 4px;5279  cursor: pointer;5280  transition: color 120ms ease;5281}52825283.peach-pairing-toggle:hover:not(:disabled) {5284  color: var(--peach-t1);5285}52865287.peach-pairing-toggle:disabled {5288  opacity: 0.5;5289  cursor: default;5290}52915292.peach-pairing-hint {5293  font-size: 0.6875rem;5294  color: var(--peach-t2);5295  margin: 0;5296  text-align: center;5297}52985299.peach-pairing-status {5300  display: flex;5301  align-items: center;5302  gap: 8px;5303  margin: 0;5304  font-size: 0.75rem;5305  color: var(--peach-t1);5306}53075308.peach-pairing-error {5309  margin: 0;5310  font-size: 0.6875rem;5311  color: var(--peach-breach);5312}53135314.peach-pairing-error--muted {5315  color: var(--peach-t2);5316}53175318.peach-pairing-spinner {5319  width: 12px;5320  height: 12px;5321  border: 1.5px solid var(--peach-t3);5322  border-top-color: var(--peach-accent);5323  border-radius: 50%;5324  animation: peach-spin 0.8s linear infinite;5325}53265327.peach-pairing-success-icon,5328.peach-pairing-error-icon,5329.peach-pairing-hero {5330  display: inline-flex;5331  align-items: center;5332  justify-content: center;5333}53345335/* Tag chips */5336.peach-tag-chip {5337  display: inline-flex;5338  align-items: center;5339  gap: 4px;5340  padding: 3px 8px;5341  border-radius: 999px;5342  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5343  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5344  color: var(--peach-t0);5345  font-family: "IBM Plex Mono", monospace;5346  font-size: 0.625rem;5347  letter-spacing: 0.04em;5348}53495350.peach-tag-chip-remove {5351  background: transparent;5352  border: none;5353  color: inherit;5354  opacity: 0.6;5355  cursor: pointer;5356  padding: 0;5357  font-size: 0.75rem;5358  line-height: 1;5359}53605361.peach-tag-chip-remove:hover {5362  opacity: 1;5363}53645365/* Tag input */5366.peach-tag-input-wrap {5367  border-bottom: 1px solid var(--peach-t3);5368}53695370.peach-tag-suggestions {5371  display: flex;5372  flex-wrap: wrap;5373  gap: 4px;5374  padding: 6px 0;5375}53765377.peach-tag-suggestion {5378  padding: 2px 8px;5379  border-radius: 999px;5380  border: 1px solid var(--peach-t3);5381  background: var(--peach-s2);5382  color: var(--peach-t1);5383  font-family: "IBM Plex Mono", monospace;5384  font-size: 0.625rem;5385  cursor: pointer;5386  transition: border-color 80ms ease, background 80ms ease;5387}53885389.peach-tag-suggestion:hover {5390  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5391  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5392}53935394/* Identity suggestions — shown below username/email inputs in new-entry form */5395@keyframes peach-suggest-in {5396  from { opacity: 0; transform: translateY(-4px); }5397  to   { opacity: 1; transform: none; }5398}53995400.peach-identity-suggestions {5401  display: flex;5402  flex-direction: column;5403  gap: 1px;5404  margin-top: 4px;5405  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5406}54075408.peach-identity-filter-row {5409  display: flex;5410  align-items: center;5411  gap: 4px;5412  padding: 2px 0 5px;5413}54145415.peach-identity-collapse-btn {5416  margin-left: auto;5417  background: transparent;5418  border: none;5419  cursor: pointer;5420  color: var(--peach-t3);5421  padding: 2px 4px;5422  display: flex;5423  align-items: center;5424  line-height: 0;5425  border-radius: 3px;5426  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5427}54285429.peach-identity-collapse-btn:hover {5430  color: var(--peach-t1);5431}54325433.peach-identity-collapse-btn.is-collapsed {5434  transform: rotate(-90deg);5435}54365437.peach-identity-rows {5438  display: grid;5439  grid-template-rows: 1fr;5440  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5441}54425443.peach-identity-rows.is-collapsed {5444  grid-template-rows: 0fr;5445}54465447.peach-identity-rows-inner {5448  overflow-y: auto;5449  min-height: 0;5450  max-height: 148px;5451  scrollbar-width: thin;5452  scrollbar-color: var(--peach-t3) transparent;5453  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5454  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5455}54565457.peach-identity-rows-inner::-webkit-scrollbar {5458  width: 4px;5459}54605461.peach-identity-rows-inner::-webkit-scrollbar-track {5462  background: transparent;5463}54645465.peach-identity-rows-inner::-webkit-scrollbar-thumb {5466  background: var(--peach-t3);5467  border-radius: 2px;5468}54695470.peach-identity-filter-pill {5471  padding: 2px 7px;5472  border-radius: 999px;5473  border: 1px solid var(--peach-t3);5474  background: transparent;5475  color: var(--peach-t2);5476  font-family: "IBM Plex Mono", monospace;5477  font-size: 0.6rem;5478  cursor: pointer;5479  transition: border-color 80ms, background 80ms, color 80ms;5480}54815482.peach-identity-filter-pill.is-on {5483  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5484  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5485  color: var(--peach-accent);5486}54875488.peach-identity-suggestion {5489  display: flex;5490  align-items: center;5491  gap: 6px;5492  width: 100%;5493  padding: 4px 6px;5494  border-radius: 5px;5495  border: none;5496  background: transparent;5497  cursor: pointer;5498  text-align: left;5499  transition: background 80ms ease;5500}55015502.peach-identity-suggestion:hover,5503.peach-identity-suggestion:focus {5504  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5505  outline: none;5506}55075508.peach-identity-suggestion-value {5509  font-family: "IBM Plex Mono", monospace;5510  font-size: 0.7rem;5511  color: var(--peach-t1);5512  overflow: hidden;5513  text-overflow: ellipsis;5514  white-space: nowrap;5515  flex: 1;5516  min-width: 0;5517}55185519.peach-identity-suggestion-type {5520  font-family: "IBM Plex Mono", monospace;5521  font-size: 0.55rem;5522  font-weight: 600;5523  flex-shrink: 0;5524  padding: 1px 4px;5525  border-radius: 3px;5526}55275528.peach-identity-suggestion-type--email {5529  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5530  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5531}55325533.peach-identity-suggestion-type--username {5534  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5535  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5536}55375538.peach-identity-suggestion-meta {5539  font-family: "IBM Plex Mono", monospace;5540  font-size: 0.6rem;5541  color: var(--peach-t3);5542  flex-shrink: 0;5543}55445545/* Tag filter strip */5546.peach-tag-filter-strip {5547  border-bottom: 1px solid var(--peach-t3);5548  flex-shrink: 0;5549}55505551.peach-tag-filter-chip {5552  display: inline-flex;5553  align-items: center;5554  padding: 4px 10px;5555  border-radius: 999px;5556  border: 1px solid var(--peach-t3);5557  background: transparent;5558  color: var(--peach-t2);5559  font-family: "IBM Plex Mono", monospace;5560  font-size: 0.5625rem;5561  letter-spacing: 0.06em;5562  text-transform: uppercase;5563  cursor: pointer;5564  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5565  white-space: nowrap;5566}55675568.peach-tag-filter-chip:hover {5569  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5570  color: var(--peach-t1);5571}55725573.peach-tag-filter-chip.is-selected {5574  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5575  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5576  color: var(--peach-t0);5577}55785579/* ─────────────────────────────────────────────────────────────────────────5580   v1.4.12 additions5581   ─────────────────────────────────────────────────────────────────────── */55825583/* Sort bar */5584.peach-sort-bar {5585  display: flex;5586  align-items: center;5587  gap: 4px;5588  padding: 5px 12px;5589  border-bottom: 1px solid var(--peach-t3);5590  flex-shrink: 0;5591  overflow-x: auto;5592  scrollbar-width: none;5593}55945595.peach-sort-btn {5596  padding: 2px 9px;5597  border-radius: 999px;5598  border: 1px solid transparent;5599  background: transparent;5600  color: var(--peach-t2);5601  font-family: "IBM Plex Mono", monospace;5602  font-size: 0.5625rem;5603  letter-spacing: 0.07em;5604  text-transform: uppercase;5605  cursor: pointer;5606  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5607  white-space: nowrap;5608}56095610.peach-sort-btn:hover {5611  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5612  color: var(--peach-t1);5613}56145615.peach-sort-btn.is-active {5616  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5617  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5618  color: var(--peach-t0);5619}56205621.peach-sort-scope-btn {5622  padding-inline: 8px;5623  font-size: 0.53125rem;5624  letter-spacing: 0.05em;5625}56265627.peach-sort-domain-hint {5628  margin-left: auto;5629  font-family: "IBM Plex Mono", monospace;5630  font-size: 0.5625rem;5631  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5632  white-space: nowrap;5633  overflow: hidden;5634  text-overflow: ellipsis;5635  max-width: 110px;5636}56375638/* Tab-match badge on entry rows */5639.peach-tab-match-badge {5640  display: inline-block;5641  width: 6px;5642  height: 6px;5643  border-radius: 50%;5644  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5645  margin-left: 5px;5646  vertical-align: middle;5647  flex-shrink: 0;5648  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5649}56505651.peach-entry-row.is-tab-match {5652  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5653  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5654}56555656.peach-entry-row.is-tab-match:hover {5657  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5658}56595660/* Entry list stagger entrance */5661@keyframes peach-entry-fadein {5662  from { opacity: 0; transform: translateY(4px); }5663  to   { opacity: 1; transform: translateY(0); }5664}56655666.peach-vault-list .peach-entry-row {5667  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5668}56695670/* Button press micro-interaction */5671.peach-btn:active {5672  transform: scale(0.95);5673  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5674}56755676.peach-sort-btn:active,5677.peach-tag-filter-chip:active {5678  transform: scale(0.93);5679  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5680}56815682/* Password strength bar (Lock view + shared) */5683.peach-password-strength {5684  display: flex;5685  align-items: center;5686  gap: 8px;5687  margin-top: 6px;5688}56895690.peach-strength-bar {5691  flex: 1;5692  height: 3px;5693  border-radius: 2px;5694  background: var(--peach-t3);5695  overflow: hidden;5696}56975698.peach-strength-fill {5699  height: 100%;5700  border-radius: 2px;5701  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5702              background 300ms ease;5703}57045705.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5706.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5707.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5708.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }57095710.peach-strength-label {5711  font-family: "IBM Plex Mono", monospace;5712  font-style: italic;5713  font-size: 0.5625rem;5714  font-weight: 300;5715  letter-spacing: 0.06em;5716  color: var(--peach-t2);5717  min-width: 36px;5718  text-align: right;5719}57205721.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5722.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5723.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5724.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }57255726/* Duress form */5727.peach-duress-status {5728  padding: 2px 8px;5729  border-radius: 999px;5730  border: 1px solid var(--peach-t3);5731  font-family: "IBM Plex Mono", monospace;5732  font-size: 0.5625rem;5733  letter-spacing: 0.07em;5734  text-transform: uppercase;5735  color: var(--peach-t2);5736  flex-shrink: 0;5737}57385739.peach-duress-status.is-active {5740  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5741  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5742  color: var(--peach-t0);5743}57445745.peach-duress-form {5746  padding: 8px 0 4px;5747  display: flex;5748  flex-direction: column;5749  gap: 6px;5750}57515752.peach-duress-form .peach-label {5753  margin-top: 4px;5754}57555756.peach-duress-actions {5757  display: flex;5758  gap: 6px;5759  align-items: center;5760  margin-top: 4px;5761}57625763.peach-duress-actions .peach-btn:first-child {5764  margin-right: auto;5765}57665767/* Improved overlay spring entrance */5768.peach-overlay-view.ov-enter-up {5769  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5770}57715772@keyframes ov-enter-up-spring {5773  from { opacity: 0; transform: translateY(16px) scale(0.98); }5774  to   { opacity: 1; transform: translateY(0) scale(1); }5775}57765777.peach-overlay-view.ov-enter-right {5778  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5779}57805781@keyframes ov-enter-right-spring {5782  from { opacity: 0; transform: translateX(18px) scale(0.98); }5783  to   { opacity: 1; transform: translateX(0) scale(1); }5784}57855786/* ── Onboarding-mode restore screens (file import) ── */5787/* Used when MainImportView renders during onboarding (no vault yet).5788   Animates like a lock-screen transition. */5789.peach-lock-view {5790  position: absolute;5791  inset: 0;5792  display: flex;5793  flex-direction: column;5794  background:5795    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5796    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5797    var(--peach-bg);5798  z-index: 2;5799  overflow: hidden;5800  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5801}58025803.peach-lock-view-header {5804  display: flex;5805  align-items: center;5806  justify-content: space-between;5807  padding: 16px 18px 12px;5808  flex-shrink: 0;5809}58105811/* ───────── Settings: auto-lock select ───────── */5812.peach-settings-select {5813  font-family: "IBM Plex Mono", monospace;5814  font-size: 0.6875rem;5815  background: transparent;5816  border: 1px solid var(--peach-t3);5817  border-radius: 4px;5818  color: var(--peach-t1);5819  padding: 3px 6px;5820  cursor: pointer;5821  outline: none;5822}5823.peach-settings-select:focus {5824  border-color: var(--peach-accent);5825}58265827/* ───────── Duress status pill (new polished) ───────── */5828.peach-duress-status-pill {5829  font-family: "IBM Plex Mono", monospace;5830  font-size: 0.5625rem;5831  text-transform: uppercase;5832  letter-spacing: 0.12em;5833  padding: 2px 8px;5834  border-radius: 12px;5835  background: var(--peach-t3);5836  color: var(--peach-t2);5837  flex-shrink: 0;5838}5839.peach-duress-status-pill.is-active {5840  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5841  color: var(--peach-accent);5842}58435844/* ───────── Entry advanced disclosure (canary) ───────── */5845.peach-entry-advanced {5846  margin-top: 12px;5847  border-top: 1px solid var(--peach-t3);5848  padding-top: 10px;5849  position: relative;5850  z-index: 1;5851}5852.peach-entry-advanced-toggle {5853  display: flex;5854  align-items: center;5855  justify-content: space-between;5856  width: 100%;5857  background: transparent;5858  border: none;5859  cursor: pointer;5860  padding: 0;5861  color: var(--peach-t2);5862}5863.peach-canary-section {5864  margin-top: 10px;5865  display: grid;5866  gap: 6px;5867}58685869/* ───────── Import: merge/replace radio choices ───────── */5870.peach-import-choice {5871  display: flex;5872  align-items: flex-start;5873  gap: 10px;5874  padding: 8px 10px;5875  border: 1px solid var(--peach-t3);5876  border-radius: 10px;5877  cursor: pointer;5878  margin-bottom: 6px;5879  transition: border-color 120ms ease, background 120ms ease;5880}5881.peach-import-choice:hover {5882  border-color: var(--peach-accent);5883}5884.peach-import-choice input[type="radio"] {5885  margin-top: 3px;5886  accent-color: var(--peach-accent);5887  flex-shrink: 0;5888}5889.peach-import-choice-main {5890  display: flex;5891  flex-direction: column;5892  gap: 2px;5893  min-width: 0;5894}5895.peach-import-choice-label {5896  font-size: 0.75rem;5897  color: var(--peach-t0);5898}5899.peach-import-choice-sub {5900  font-size: 0.6875rem;5901  color: var(--peach-t2);5902  line-height: 1.5;5903}59045905/* ───────── Export: success confirmation strip ───────── */5906.peach-export-success {5907  display: flex;5908  align-items: flex-start;5909  gap: 10px;5910  padding: 12px;5911  border-radius: 12px;5912  border: 1px solid rgba(150, 175, 110, 0.3);5913  background: rgba(150, 175, 110, 0.08);5914  color: var(--peach-t0);5915  font-size: 0.75rem;5916  line-height: 1.55;5917}5918.peach-export-success-check {5919  color: rgba(150, 175, 110, 0.9);5920  font-size: 0.875rem;5921  flex-shrink: 0;5922}59235924/* ── Trash view ──────────────────────────────────────────────────────── */5925.peach-trash-entry-row {5926  display: flex;5927  align-items: center;5928  justify-content: space-between;5929  gap: 8px;5930  padding: 8px 0;5931  border-bottom: 1px solid var(--peach-border);5932}5933.peach-trash-entry-info {5934  flex: 1;5935  min-width: 0;5936  display: flex;5937  flex-direction: column;5938  gap: 2px;5939}5940.peach-trash-entry-title {5941  font-size: 0.8125rem;5942  color: var(--peach-t0);5943  overflow: hidden;5944  text-overflow: ellipsis;5945  white-space: nowrap;5946}5947.peach-trash-entry-meta {5948  font-family: var(--font-mono);5949  font-size: 0.5625rem;5950  color: var(--peach-t2);5951  letter-spacing: 0.04em;5952}5953.peach-trash-entry-actions {5954  display: flex;5955  align-items: center;5956  gap: 4px;5957  flex-shrink: 0;5958}5959.peach-trash-delete-btn {5960  background: transparent;5961  border: 0;5962  color: var(--peach-t3);5963  font-size: 1rem;5964  line-height: 1;5965  cursor: pointer;5966  padding: 2px 5px;5967  transition: color 0.15s;5968}5969.peach-trash-delete-btn:hover { color: var(--peach-breach); }5970.peach-trash-list {5971  overflow-y: auto;5972}5973.peach-trash-footer {5974  display: flex;5975  align-items: center;5976  gap: 8px;5977  padding: 8px 0 0;5978  border-top: 1px solid var(--peach-border);5979  margin-top: 4px;5980}5981.peach-trash-purge-all {5982  background: transparent;5983  border: 0;5984  color: var(--peach-t3);5985  font-size: 0.625rem;5986  cursor: pointer;5987  padding: 4px 0;5988  letter-spacing: 0.03em;5989  transition: color 0.2s;5990}5991.peach-trash-purge-all:hover { color: var(--peach-breach); }5992.peach-trash-purge-confirm-label {5993  font-size: 0.625rem;5994  color: var(--peach-t1);5995  flex: 1;5996}59975998/* ── Settings shortcuts grid ─────────────────────────────────────────── */5999.peach-shortcuts-grid {6000  display: grid;6001  grid-template-columns: auto 1fr;6002  gap: 6px 12px;6003  align-items: center;6004  padding: 4px 0;6005}6006.peach-shortcut-key {6007  font-family: var(--font-mono);6008  font-size: 0.625rem;6009  color: var(--peach-t0);6010  background: var(--peach-t3);6011  border-radius: 4px;6012  padding: 2px 6px;6013  white-space: nowrap;6014  text-align: center;6015}6016.peach-shortcut-desc {6017  font-size: 0.6875rem;6018  color: var(--peach-t1);6019}60206021/* ── Sort bar trash button ───────────────────────────────────────────── */6022.peach-sort-trash-btn {6023  display: flex;6024  align-items: center;6025  justify-content: center;6026  padding: 3px 5px;6027  background: transparent;6028  border: none;6029  cursor: pointer;6030  color: var(--peach-t2);6031  border-radius: 4px;6032  transition: color 140ms ease, background 140ms ease;6033}6034.peach-sort-trash-btn:hover {6035  color: var(--peach-t1);6036  background: var(--peach-t3);6037}6038.peach-sort-trash-btn.is-active {6039  color: var(--peach-accent);6040}60416042/* Accent color picker */6043.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }6044.peach-accent-picker {6045  display: flex;6046  flex-wrap: wrap;6047  gap: 7px;6048  padding: 2px 0;6049}6050.peach-accent-swatch {6051  width: 22px;6052  height: 22px;6053  border-radius: 50%;6054  border: 2px solid transparent;6055  cursor: pointer;6056  padding: 0;6057  transition: transform 100ms;6058  outline-offset: 2px;6059}6060.peach-accent-swatch:hover { transform: scale(1.15); }6061.peach-accent-swatch.is-active {6062  border-color: var(--peach-t0);6063  transform: scale(1.1);6064}60656066.peach-pill-group {6067  display: flex;6068  gap: 6px;6069}6070.peach-pill-group .peach-btn.is-active {6071  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);6072  border-color: var(--peach-accent);6073  color: var(--peach-t0);6074}60756076/* ── Card entry styles ───────────────────────────────────────── */6077.peach-card-number {6078  font-family: var(--peach-mono);6079  letter-spacing: 0.08em;6080}60816082.peach-card-network-badge {6083  font-size: 0.625rem;6084  padding: 1px 5px;6085  border-radius: 4px;6086  border: 0.5px solid var(--peach-border);6087  color: var(--peach-text-dim);6088  margin-left: 6px;6089  vertical-align: middle;6090}60916092.peach-card-expiry-row {6093  display: flex;6094  align-items: center;6095  gap: 8px;6096}60976098.peach-card-expiry-sep {6099  color: var(--peach-text-dim);6100}61016102/* ── Pro tier — upgrade screen ──────────────────────────────── */6103.peach-pro-mark {6104  font-size: 0.5625rem;6105  color: var(--peach-accent);6106  margin-left: 6px;6107  vertical-align: super;6108  opacity: 0.7;6109}61106111.peach-pro-mini-badge {6112  display: block;6113  font-size: 0.625rem;6114  font-style: italic;6115  color: var(--peach-accent);6116  letter-spacing: 0.04em;6117  margin-top: -2px;6118  padding-left: 2px;6119  opacity: 0.85;6120  text-align: center;6121}61226123.peach-wordmark-stack {6124  display: inline-flex;6125  flex-direction: column;6126  align-items: center;6127}61286129/* ── Pro tier — upgrade page ─────────────────────────────────── */6130/* ── Pro upgrade — redesigned editorial layout ─────────────────── */61316132.peach-pro-upgrade {6133  display: flex;6134  flex-direction: column;6135  align-items: stretch;6136  gap: 10px;6137  padding: 2px 2px 12px;6138}61396140.peach-pro-eyebrow {6141  margin: 0;6142  font-family: var(--font-ui);6143  font-size: 0.625rem;6144  font-weight: 500;6145  letter-spacing: 0.12em;6146  color: var(--peach-accent);6147}61486149.peach-pro-headline {6150  margin: 0;6151  font-family: var(--font-display, "Cormorant Garamond", serif);6152  font-size: 30px;6153  font-weight: 700;6154  font-style: normal;6155  line-height: 1.05;6156  color: var(--peach-t0);6157  letter-spacing: -0.01em;6158}6159.peach-pro-headline em {6160  font-style: italic;6161  font-weight: 400;6162  color: var(--peach-accent);6163}61646165.peach-pro-subtitle {6166  margin: 0;6167  font-size: 0.6875rem;6168  line-height: 1.5;6169  color: var(--peach-t1);6170}61716172/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6173.peach-pro-section-label {6174  margin: 6px 0 0;6175  font-family: var(--font-ui);6176  font-size: 0.5625rem;6177  font-weight: 500;6178  letter-spacing: 0.12em;6179  text-transform: uppercase;6180  color: var(--peach-t2);6181}61826183/* 2-column numbered feature grid */6184.peach-pro-grid {6185  display: grid;6186  grid-template-columns: 1fr 1fr;6187  border-top: 1px solid var(--peach-border);6188  border-left: 1px solid var(--peach-border);6189}61906191.peach-pro-grid-item {6192  display: flex;6193  flex-direction: column;6194  gap: 2px;6195  padding: 8px 9px;6196  border-right: 1px solid var(--peach-border);6197  border-bottom: 1px solid var(--peach-border);6198}61996200.peach-pro-grid-item--wide {6201  grid-column: 1 / -1;6202}62036204.peach-pro-grid-num {6205  font-family: var(--font-mono);6206  font-size: 0.5625rem;6207  color: var(--peach-accent);6208  letter-spacing: 0.06em;6209  opacity: 0.85;6210}62116212.peach-pro-grid-name {6213  font-size: 0.8125rem;6214  font-weight: 500;6215  color: var(--peach-t0);6216  line-height: 1.2;6217}62186219.peach-pro-grid-desc {6220  font-size: 0.625rem;6221  color: var(--peach-t1);6222  line-height: 1.4;6223}62246225.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6226  animation: peach-pulse-accent 600ms ease-out forwards;6227}62286229@keyframes peach-pulse-accent {6230  0%   { opacity: 1; transform: scale(1.2); }6231  100% { opacity: 0.85; transform: scale(1); }6232}62336234/* Actions */6235.peach-pro-upgrade-actions {6236  display: flex;6237  flex-direction: column;6238  align-items: stretch;6239  gap: 10px;6240}62416242.peach-pro-pricing {6243  margin: 0;6244  font-size: 1rem;6245  font-weight: 600;6246  color: var(--peach-t0);6247  letter-spacing: 0.01em;6248}6249.peach-pro-pricing-sub {6250  font-size: 0.75rem;6251  font-weight: 400;6252  color: var(--peach-t1);6253  letter-spacing: 0.02em;6254}62556256.peach-pro-upgrade-cta {6257  display: flex;6258  align-items: center;6259  justify-content: center;6260  text-decoration: none;6261  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6262  border: 1px solid var(--peach-accent);6263  border-radius: 10px;6264  color: var(--peach-accent);6265  font-family: var(--font-ui);6266  font-size: 0.8125rem;6267  font-weight: 600;6268  letter-spacing: 0.06em;6269  padding: 11px 16px;6270  transition: background 0.15s ease, color 0.15s ease;6271}6272.peach-pro-upgrade-cta:hover {6273  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6274}62756276.peach-pro-key-divider {6277  display: flex;6278  align-items: center;6279  gap: 8px;6280  color: var(--peach-t2);6281  font-size: 0.5625rem;6282  letter-spacing: 0.1em;6283}6284.peach-pro-key-divider::before,6285.peach-pro-key-divider::after {6286  content: "";6287  flex: 1;6288  height: 1px;6289  background: var(--peach-border);6290}62916292/* Inline key entry row */6293.peach-pro-key-inline {6294  display: flex;6295  align-items: center;6296  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6297  border: 1px solid var(--peach-border);6298  border-radius: 8px;6299  overflow: hidden;6300}6301.peach-pro-key-inline-input {6302  flex: 1;6303  background: transparent;6304  border: none;6305  outline: none;6306  color: var(--peach-t1);6307  font-family: var(--font-mono);6308  font-size: 0.625rem;6309  letter-spacing: 0.06em;6310  padding: 9px 10px;6311}6312.peach-pro-key-inline-input::placeholder {6313  color: var(--peach-t2);6314}6315.peach-pro-key-apply {6316  background: transparent;6317  border: none;6318  border-left: 1px solid var(--peach-border);6319  color: var(--peach-t2);6320  font-family: var(--font-ui);6321  font-size: 0.5625rem;6322  font-weight: 600;6323  letter-spacing: 0.08em;6324  padding: 9px 10px;6325  cursor: pointer;6326  transition: color 0.15s ease;6327  flex-shrink: 0;6328}6329.peach-pro-key-apply:not(:disabled):hover {6330  color: var(--peach-accent);6331}6332.peach-pro-key-apply:disabled {6333  opacity: 0.35;6334  cursor: not-allowed;6335}63366337/* ── Pro tier — key ceremony ─────────────────────────────────── */6338.peach-pro-key-ceremony {6339  display: flex;6340  flex-direction: column;6341  align-items: center;6342  gap: 12px;6343  padding: 20px 4px 16px;6344}63456346.peach-pro-key-ceremony .peach-lock-rune-string {6347  font-size: 1rem;6348  gap: 12px;6349  flex: 0;6350  justify-content: center;6351}63526353.peach-pro-key-ceremony-label {6354  margin: 0;6355  font-size: 0.6875rem;6356  color: var(--peach-t2);6357  font-style: italic;6358  letter-spacing: 0.04em;6359}63606361.peach-pro-key-input {6362  font-family: var(--font-mono, monospace);6363  letter-spacing: 0.06em;6364  text-align: center;6365  width: 100%;6366  box-sizing: border-box;6367}63686369.peach-pro-key-error {6370  margin: 0;6371  font-size: 0.75rem;6372  text-align: center;6373  color: var(--peach-breach, #e55);6374  padding: 0;6375}63766377.peach-pro-key-activate {6378  width: 100%;6379  text-align: center;6380  box-sizing: border-box;6381  padding: 10px 20px;6382  font-size: 0.8125rem;6383}63846385.peach-pro-key-cancel {6386  background: transparent;6387  border: 0;6388  color: var(--peach-t2);6389  font-size: 0.6875rem;6390  cursor: pointer;6391  padding: 2px 8px;6392  transition: color 0.2s;6393}63946395.peach-pro-key-cancel:hover { color: var(--peach-accent); }63966397/* ── Pro tier — active state ─────────────────────────────────── */6398.peach-pro-active {6399  display: flex;6400  flex-direction: column;6401  align-items: center;6402  gap: 0;6403  padding: 8px 4px 16px;6404  min-height: 280px;6405}64066407.peach-pro-active-hero {6408  display: flex;6409  flex-direction: column;6410  align-items: center;6411  gap: 6px;6412  padding: 20px 0 8px;6413}64146415.peach-pro-active-mark-wrap {6416  display: flex;6417  align-items: center;6418  justify-content: center;6419  margin-bottom: 4px;6420}64216422.peach-pro-active-mark {6423  width: 60px;6424  height: 60px;6425}64266427.peach-pro-active-title {6428  font-family: var(--font-display, var(--font-ui));6429  font-size: 26px;6430  margin: 0;6431  color: var(--peach-t0);6432  letter-spacing: 0.01em;6433}64346435.peach-pro-active-since {6436  margin: 0;6437  font-size: 0.6875rem;6438  color: var(--peach-t2);6439  font-style: italic;6440}64416442.peach-pro-active-features {6443  display: flex;6444  flex-direction: column;6445  gap: 8px;6446  width: 100%;6447  padding: 14px 8px 0;6448  border-top: 1px solid var(--peach-border);6449  flex: 1;6450}64516452.peach-pro-active-feature {6453  display: flex;6454  align-items: center;6455  gap: 9px;6456}64576458.peach-pro-active-feature-mark {6459  color: var(--peach-accent);6460  font-size: 0.625rem;6461  opacity: 0.65;6462  flex-shrink: 0;6463}64646465.peach-pro-active-feature-name {6466  font-size: 0.75rem;6467  color: var(--peach-t1);6468}64696470.peach-pro-deactivate {6471  align-self: center;6472  background: transparent;6473  border: 0;6474  color: var(--peach-t3);6475  font-size: 0.625rem;6476  cursor: pointer;6477  padding: 8px 0 0;6478  margin-top: 16px;6479  letter-spacing: 0.03em;6480  transition: color 0.2s;6481}64826483.peach-pro-deactivate:hover { color: var(--peach-t2); }64846485.peach-pro-deactivate:disabled {6486  opacity: 0.5;6487  cursor: default;6488}64896490/* ── Pro card activation sparkles & thank-you ── */6491button.peach-pro-active-mark-wrap {6492  background: transparent;6493  border: 0;6494  padding: 0;6495  cursor: pointer;6496  position: relative;6497  overflow: visible;6498}64996500.peach-pro-sparks {6501  position: absolute;6502  inset: 0;6503  pointer-events: none;6504  overflow: visible;6505}65066507.peach-pro-spark {6508  position: absolute;6509  top: 50%;6510  left: 50%;6511  font-size: 9px;6512  line-height: 1;6513  opacity: 0;6514  transform: translate(-50%, -50%);6515  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;6516}65176518@keyframes peach-pro-spark-fly {6519  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }6520  25%  { opacity: 1; }6521  100% {6522    opacity: 0;6523    transform: translate(6524      calc(-50% + var(--spark-x, 0px)),6525      calc(-50% + var(--spark-y, -40px))6526    ) scale(0.8);6527  }6528}65296530.peach-pro-thankyou-text {6531  margin: 4px 0 0;6532  font-size: 0.6875rem;6533  font-style: italic;6534  color: currentColor;6535  opacity: 0;6536  animation: peach-pro-thankyou-flash 2.5s ease both;6537}65386539@keyframes peach-pro-thankyou-flash {6540  0%   { opacity: 0; transform: translateY(4px); }6541  15%  { opacity: 0.75; transform: translateY(0); }6542  75%  { opacity: 0.75; }6543  100% { opacity: 0; }6544}65456546/* ── Pro advanced health remediation queue ──────────────────── */6547.peach-health-pro-queue {6548  display: flex;6549  flex-direction: column;6550  gap: 10px;6551  padding: 12px;6552  margin: 0 0 12px;6553  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6554  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6555  border-radius: 10px;6556}65576558.peach-health-pro-queue-head {6559  display: flex;6560  justify-content: space-between;6561  align-items: baseline;6562}65636564.peach-health-pro-queue-title {6565  font-size: 0.75rem;6566  font-weight: 500;6567  letter-spacing: 0.04em;6568  text-transform: uppercase;6569  color: var(--peach-accent);6570}65716572.peach-health-pro-queue-score {6573  font-size: 0.6875rem;6574  color: var(--peach-t2);6575}65766577.peach-health-pro-row {6578  display: flex;6579  gap: 10px;6580  align-items: center;6581  padding: 8px 0;6582  border-top: 1px solid var(--peach-border);6583}65846585.peach-health-pro-row-info {6586  flex: 1;6587  display: flex;6588  flex-direction: column;6589  gap: 4px;6590  min-width: 0;6591}65926593.peach-health-pro-action {6594  flex: 0 0 auto;6595  padding: 4px 8px;6596  font-size: 0.5625rem;6597  letter-spacing: 0.08em;6598  text-transform: uppercase;6599}66006601.peach-health-pro-row-name {6602  font-size: 0.8125rem;6603  color: var(--peach-t0);6604  overflow: hidden;6605  text-overflow: ellipsis;6606  white-space: nowrap;6607}66086609.peach-health-pro-row-meta {6610  font-size: 0.6875rem;6611  color: var(--peach-t2);6612}66136614.peach-health-pro-bar {6615  height: 2px;6616  background: var(--peach-border);6617  border-radius: 2px;6618  overflow: hidden;6619  margin-top: 2px;6620}66216622.peach-health-pro-bar-fill {6623  height: 100%;6624  background: var(--peach-accent);6625  transition: width 200ms ease-out;6626}66276628/* ── Pro activation celebration ── */6629@keyframes peach-pro-bloom {6630  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6631  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6632                 drop-shadow(0 0 48px var(--peach-glow)); }6633  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6634}66356636@keyframes peach-pro-wordmark-in {6637  from { opacity: 0; transform: translateY(4px); }6638  to   { opacity: 1; transform: translateY(0); }6639}66406641@keyframes peach-pro-fade-out {6642  from { opacity: 1; }6643  to   { opacity: 0; }6644}66456646.peach-pro-celebration {6647  background:6648    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6649    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6650    var(--peach-bg);6651  border: 1px solid var(--peach-t3);6652  box-shadow:6653    0 2px 8px rgba(0,0,0,0.55),6654    0 14px 48px rgba(0,0,0,0.7),6655    0 0 0 1px rgba(240,232,216,0.04);6656  overflow: hidden;6657  width: 320px;6658  height: 520px;6659  display: flex;6660  flex-direction: column;6661  align-items: center;6662  justify-content: center;6663  gap: 8px;6664  padding: 32px 24px;6665  text-align: center;6666}66676668.peach-pro-celebration.is-leaving {6669  animation: peach-pro-fade-out 400ms ease forwards;6670}66716672.peach-pro-bloom-target {6673  display: flex;6674  align-items: center;6675  justify-content: center;6676  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6677  margin-bottom: 12px;6678}66796680.peach-pro-bloom-icon {6681  width: 48px;6682  height: 48px;6683}66846685.peach-pro-wordmark {6686  font-family: var(--font-display);6687  font-size: 22px;6688  font-style: italic;6689  font-weight: 400;6690  color: var(--peach-accent);6691  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6692}66936694.peach-pro-thankyou {6695  font-size: 0.75rem;6696  font-style: italic;6697  color: var(--peach-t2);6698  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6699}670067016702/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6703.peach-pro-notice-banner {6704  display: flex;6705  align-items: center;6706  gap: 8px;6707  padding: 7px 12px;6708  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6709  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6710  font-size: 0.6875rem;6711  color: var(--peach-t2);6712  font-family: "IBM Plex Mono", monospace;6713  flex-shrink: 0;6714}67156716.peach-pro-notice-link {6717  background: none;6718  border: none;6719  padding: 0;6720  cursor: pointer;6721  font-size: 0.6875rem;6722  color: var(--peach-accent);6723  font-family: "IBM Plex Mono", monospace;6724  margin-left: auto;6725  white-space: nowrap;6726}67276728.peach-pro-notice-close {6729  background: none;6730  border: none;6731  padding: 0 0 0 4px;6732  cursor: pointer;6733  font-size: 0.625rem;6734  color: var(--peach-t3);6735  line-height: 1;6736}67376738/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6739   Renders over whatever view is showing. 60-second expiry; the popup ticks6740   the countdown each second and clears the banner when it hits zero. */6741.peach-pair-request-banner {6742  display: flex;6743  flex-direction: column;6744  gap: 8px;6745  padding: 10px 12px;6746  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6747  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6748  font-family: "IBM Plex Mono", monospace;6749  flex-shrink: 0;6750}67516752.peach-pair-toast {6753  padding: 8px 12px;6754  font-family: "IBM Plex Mono", monospace;6755  font-size: 0.75rem;6756  color: var(--peach-t1);6757  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6758  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6759  flex-shrink: 0;6760  text-align: center;6761}67626763.peach-pair-toast strong {6764  color: var(--peach-t0);6765  font-weight: 500;6766}67676768.peach-pair-request-header {6769  display: flex;6770  align-items: center;6771  gap: 8px;6772  font-size: 0.75rem;6773  color: var(--peach-t1);6774}67756776.peach-pair-request-mark {6777  font-size: 0.875rem;6778  display: inline-flex;6779  align-items: center;6780}67816782.peach-pair-request-icon {6783  width: 1em;6784  height: 1em;6785}67866787.peach-pair-request-title {6788  font-weight: 600;6789  color: var(--peach-t0);6790}67916792.peach-pair-request-countdown {6793  margin-left: auto;6794  font-variant-numeric: tabular-nums;6795  color: var(--peach-t2);6796  font-size: 0.6875rem;6797}67986799.peach-pair-request-body {6800  margin: 0;6801  font-size: 0.75rem;6802  color: var(--peach-t1);6803  line-height: 1.4;6804}68056806.peach-pair-request-body strong {6807  color: var(--peach-t0);6808  font-weight: 600;6809}68106811.peach-pair-request-actions {6812  display: flex;6813  gap: 8px;6814  justify-content: flex-end;6815}68166817/* ─── First-run onboarding ──────────────────────────────────────────────6818   Three-card welcome shown once before vault creation. The PeachScript6819   rune background drifts behind everything at very low opacity — it's6820   atmosphere, not focus. The cards themselves use the same panel6821   language as the rest of the popup so the transition into NewVault is6822   continuous, not a jarring switch of visual register. */68236824.peach-onboarding {6825  position: relative;6826  display: flex;6827  flex-direction: column;6828  width: 100%;6829  height: 100%;6830  padding: 16px 16px 18px;6831  box-sizing: border-box;6832  overflow: hidden;6833  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6834}68356836.peach-onboarding.is-completing {6837  animation: peach-onboard-exit 200ms ease-out forwards;6838}68396840.peach-rune-background {6841  position: absolute;6842  inset: 0;6843  width: 100%;6844  height: 100%;6845  pointer-events: none;6846  z-index: 0;6847  transition: opacity 500ms ease-out;6848}68496850.peach-onboarding.is-completing .peach-rune-background {6851  opacity: 0;6852}68536854.peach-onboarding-header {6855  position: relative;6856  z-index: 1;6857  display: flex;6858  align-items: center;6859  margin-bottom: 14px;6860}68616862.peach-onboarding-card {6863  position: relative;6864  z-index: 1;6865  flex: 1;6866  display: flex;6867  flex-direction: column;6868  gap: 10px;6869  padding: 22px 20px;6870  border-radius: 16px;6871  border: 1px solid var(--peach-t3);6872  background:6873    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6874  backdrop-filter: blur(3px);6875  -webkit-backdrop-filter: blur(3px);6876  box-shadow:6877    inset 0 1px 0 rgba(240, 232, 216, 0.04),6878    0 12px 28px rgba(0, 0, 0, 0.12);6879  cursor: pointer;6880  user-select: none;6881  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6882}68836884.peach-onboarding-card.is-exiting {6885  animation: peach-card-out 120ms ease-in forwards;6886  pointer-events: none;6887}68886889.peach-onboarding-card-headline {6890  margin: 0;6891  font-family: var(--font-display);6892  font-style: italic;6893  font-weight: 400;6894  font-size: 22px;6895  line-height: 1.05;6896  color: var(--peach-t0);6897  white-space: pre-line;6898}68996900.peach-onboarding-divider {6901  margin: 4px 0 6px;6902  border: 0;6903  border-top: 1px solid var(--peach-t3);6904  width: 100%;6905}69066907.peach-onboarding-body {6908  margin: 0;6909  font-size: 0.8125rem;6910  line-height: 1.6;6911  color: var(--peach-t1);6912}69136914.peach-onboarding-warning {6915  display: flex;6916  align-items: flex-start;6917  gap: 8px;6918  margin: 6px 0 0;6919  padding-top: 8px;6920  border-top: 1px dashed var(--peach-t3);6921  font-size: 0.8125rem;6922  line-height: 1.5;6923  color: var(--peach-t1);6924}69256926.peach-onboarding-warning-icon {6927  color: var(--peach-accent);6928  font-size: 0.8125rem;6929  line-height: 1.5;6930  flex: 0 0 auto;6931}69326933.peach-onboarding-nav {6934  position: relative;6935  z-index: 1;6936  display: flex;6937  align-items: center;6938  justify-content: space-between;6939  margin-top: 12px;6940  padding: 0 4px;6941}69426943.peach-onboarding-dots {6944  display: flex;6945  align-items: center;6946  gap: 6px;6947}69486949.peach-onboarding-dot {6950  width: 6px;6951  height: 6px;6952  border-radius: 50%;6953  background: var(--peach-t2);6954  transition: width 200ms ease, height 200ms ease, background 200ms ease;6955}69566957.peach-onboarding-dot.is-active {6958  width: 8px;6959  height: 8px;6960  background: var(--peach-accent);6961}69626963.peach-onboarding-next {6964  background: none;6965  border: none;6966  padding: 4px 0;6967  cursor: pointer;6968  font-family: "IBM Plex Mono", monospace;6969  font-size: 0.6875rem;6970  letter-spacing: 0.04em;6971  color: var(--peach-t1);6972  transition: color 150ms ease;6973}69746975.peach-onboarding-next:hover {6976  color: var(--peach-t0);6977}69786979.peach-onboarding-next:disabled {6980  opacity: 0.5;6981  cursor: default;6982}69836984.peach-onboarding-back {6985  background: none;6986  border: none;6987  padding: 4px 0;6988  cursor: pointer;6989  font-family: "IBM Plex Mono", monospace;6990  font-size: 0.6875rem;6991  letter-spacing: 0.04em;6992  color: var(--peach-t2);6993  transition: color 150ms ease;6994}69956996.peach-onboarding-back:hover {6997  color: var(--peach-t0);6998}69997000.peach-onboarding-back:disabled {7001  opacity: 0.5;7002  cursor: default;7003}70047005/* Reserve back-button width on the first card so the dots stay centred */7006.peach-onboarding-back-spacer {7007  width: 44px;7008}70097010.peach-onboarding-mobile-card-buttons {7011  display: flex;7012  flex-direction: column;7013  gap: 8px;7014  margin-top: 16px;7015}70167017@keyframes peach-onboard-enter {7018  from { opacity: 0; transform: translateY(20px); }7019  to   { opacity: 1; transform: translateY(0); }7020}70217022@keyframes peach-onboard-exit {7023  from { opacity: 1; }7024  to   { opacity: 0; }7025}70267027@keyframes peach-card-in {7028  from { opacity: 0; transform: translateX(12px); }7029  to   { opacity: 1; transform: translateX(0); }7030}70317032@keyframes peach-card-out {7033  from { opacity: 1; transform: translateX(0); }7034  to   { opacity: 0; transform: translateX(-12px); }7035}70367037/* ─── New vault screen — matched to onboarding card language ─────────── */70387039.peach-newvault {7040  position: relative;7041  display: flex;7042  flex-direction: column;7043  gap: 12px;7044  padding: 16px 16px 18px;7045  overflow: hidden;7046}70477048/* Suppress the warm-blob ambient art inherited from .lock-screen — the7049   new vault card now carries the visual weight. */7050.peach-newvault::before {7051  content: none;7052}70537054.peach-newvault-header {7055  position: relative;7056  z-index: 2;7057  display: flex;7058  align-items: center;7059  gap: 10px;7060  margin-bottom: 2px;7061}70627063.peach-newvault-back {7064  display: inline-flex;7065  align-items: center;7066  gap: 4px;7067  background: transparent;7068  border: none;7069  color: var(--peach-t2);7070  font-family: "IBM Plex Mono", monospace;7071  font-size: 0.625rem;7072  letter-spacing: 0.06em;7073  cursor: pointer;7074  padding: 4px 6px;7075  border-radius: 6px;7076  transition: color 120ms ease, background 120ms ease;7077}70787079.peach-newvault-back:hover {7080  color: var(--peach-t0);7081  background: rgba(240, 232, 216, 0.04);7082}70837084.peach-newvault-mark {7085  position: absolute;7086  right: -12px;7087  top: 6px;7088  width: 110px;7089  height: 110px;7090  pointer-events: none;7091  opacity: 0.10;7092  filter: saturate(0.9);7093  z-index: 0;7094}7095.peach-newvault-mark-art {7096  width: 100%;7097  height: 100%;7098}7099.peach-newvault-mark-art path:nth-child(1) {7100  fill: rgba(123, 144, 96, 0.88);7101}7102.peach-newvault-mark-art path:nth-child(2) {7103  stroke: rgba(94, 122, 66, 0.95);7104}71057106.peach-newvault-card {7107  position: relative;7108  z-index: 1;7109  display: flex;7110  flex-direction: column;7111  gap: 12px;7112  padding: 22px 20px 18px;7113  border-radius: 16px;7114  border: 1px solid var(--peach-t3);7115  background:7116    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));7117  backdrop-filter: blur(3px);7118  -webkit-backdrop-filter: blur(3px);7119  box-shadow:7120    inset 0 1px 0 rgba(240, 232, 216, 0.04),7121    0 12px 28px rgba(0, 0, 0, 0.12);7122  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;7123}71247125.peach-newvault-headline {7126  margin: 0;7127  font-family: var(--font-display);7128  font-style: italic;7129  font-weight: 400;7130  font-size: 24px;7131  line-height: 1.05;7132  color: var(--peach-t0);7133  white-space: pre-line;7134}71357136.peach-newvault-divider {7137  margin: 2px 0 4px;7138  border: 0;7139  border-top: 1px solid var(--peach-t3);7140  width: 100%;7141}71427143.peach-newvault-field {7144  display: flex;7145  flex-direction: column;7146  gap: 4px;7147}71487149.peach-newvault-label-row {7150  display: flex;7151  align-items: center;7152  justify-content: space-between;7153}71547155/* Monospace input scaled to the card. Replaces the 22px unlock-input7156   so the placeholder no longer overflows and the field reads as part7157   of the same surface as the body copy. */7158.peach-newvault-input {7159  font-size: 0.875rem;7160  letter-spacing: 0.18em;7161  padding: 8px 0;7162}7163.peach-newvault-input::placeholder {7164  letter-spacing: 0.18em;7165  color: var(--peach-t2);7166}71677168.peach-newvault-hint {7169  margin: 2px 0 0;7170  font-family: "IBM Plex Mono", monospace;7171  font-size: 0.625rem;7172  color: var(--peach-t2);7173  letter-spacing: 0.04em;7174}71757176.peach-newvault-submit {7177  margin-top: 4px;7178}71797180.peach-newvault-warning {7181  display: flex;7182  align-items: flex-start;7183  gap: 8px;7184  margin: 4px 0 0;7185  padding-top: 10px;7186  border-top: 1px dashed var(--peach-t3);7187  font-size: 0.75rem;7188  line-height: 1.5;7189  color: var(--peach-t1);7190}71917192.peach-newvault-warning-icon {7193  color: var(--peach-accent);7194  font-size: 0.8125rem;7195  line-height: 1.4;7196  flex: 0 0 auto;7197}71987199.peach-newvault-footer {7200  position: relative;7201  z-index: 1;7202  display: flex;7203  flex-direction: column;7204  gap: 4px;7205  padding: 4px 4px 0;7206}72077208/* Settings body — warm accent gradient gives the glass something to blur against */7209.peach-settings-body {7210  background:7211    radial-gradient(7212      ellipse at 30% 20%,7213      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7214      transparent 60%7215    );7216}72177218/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7219/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7220 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7221 * (replacing the vault from a backup file) and "hazard" for actions that7222 * are absolutely irreversible (Panic). Both use the same card scaffold so7223 * they read as a pair, but the colour family signals the severity at a7224 * glance — yellow for caution, red for don't.7225 */7226.peach-danger-card {7227  --danger-tint: 235, 158, 52; /* amber */7228  display: flex;7229  flex-direction: column;7230  gap: 8px;7231  padding: 14px;7232  margin-top: 10px;7233  border-radius: 12px;7234  border: 1px solid rgba(var(--danger-tint), 0.32);7235  background:7236    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7237    rgba(var(--danger-tint), 0.04);7238  box-shadow:7239    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7240    0 0 24px rgba(var(--danger-tint), 0.04);7241  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7242}72437244.peach-danger-card:hover {7245  border-color: rgba(var(--danger-tint), 0.55);7246  box-shadow:7247    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7248    0 0 36px rgba(var(--danger-tint), 0.10);7249}72507251.peach-danger-card--hazard {7252  --danger-tint: 220, 38, 38; /* red */7253}72547255.peach-danger-card-head {7256  display: flex;7257  align-items: center;7258  gap: 10px;7259}72607261.peach-danger-card-glyph {7262  width: 28px;7263  height: 28px;7264  flex-shrink: 0;7265  display: flex;7266  align-items: center;7267  justify-content: center;7268  border-radius: 8px;7269  background: rgba(var(--danger-tint), 0.12);7270  color: rgba(var(--danger-tint), 0.95);7271  font-size: 1rem;7272  line-height: 1;7273}72747275.peach-danger-card-title {7276  margin: 0;7277  font-size: 0.8125rem;7278  font-weight: 600;7279  color: rgba(var(--danger-tint), 0.92);7280  letter-spacing: 0.01em;7281}72827283.peach-danger-card-copy {7284  margin: 0;7285  font-size: 0.6875rem;7286  line-height: 1.5;7287  color: var(--peach-t2);7288}72897290.peach-danger-card-button {7291  width: 100%;7292  padding: 9px;7293  margin-top: 4px;7294  background: transparent;7295  border: 1px solid rgba(var(--danger-tint), 0.45);7296  border-radius: 8px;7297  color: rgba(var(--danger-tint), 0.9);7298  font-size: 0.75rem;7299  font-weight: 500;7300  letter-spacing: 0.02em;7301  cursor: pointer;7302  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7303}73047305.peach-danger-card-button:hover {7306  background: rgba(var(--danger-tint), 0.10);7307  border-color: rgba(var(--danger-tint), 0.75);7308  color: rgb(var(--danger-tint));7309}73107311/* ── Panic flow (three-step destruction) ───────────────────────────────── */7312.peach-panic {7313  display: flex;7314  flex-direction: column;7315  flex: 1;7316  min-height: 0;7317  padding: 28px 20px 20px;7318  gap: 18px;7319  overflow-y: auto;7320  scrollbar-width: none;7321  -ms-overflow-style: none;7322}73237324.peach-panic::-webkit-scrollbar { display: none; }73257326.peach-panic-step2 {7327  background: rgba(220, 38, 38, 0.04);7328}73297330.peach-panic-step3 {7331  position: relative;7332  background: #0f0505;7333  color: #ffffff;7334  overflow: hidden;7335}73367337.peach-panic-rune-bg {7338  position: absolute;7339  inset: 0;7340  opacity: 0.22;7341  pointer-events: none;7342  overflow: hidden;7343}73447345.peach-panic-rune-bg canvas {7346  width: 100% !important;7347  height: 100% !important;7348}73497350.peach-panic-icon {7351  font-size: 32px;7352  color: rgb(220, 38, 38);7353  line-height: 1;7354}73557356.peach-panic-title {7357  margin: 0;7358  font-size: 18px;7359  font-weight: 500;7360  color: var(--peach-t1);7361}73627363.peach-panic-title--severe {7364  font-size: 20px;7365  font-weight: 700;7366  color: rgb(220, 38, 38);7367}73687369.peach-panic-body {7370  margin: 0;7371  font-size: 0.8125rem;7372  line-height: 1.55;7373  color: var(--peach-t2);7374}73757376.peach-panic-body--severe {7377  color: rgba(220, 38, 38, 0.85);7378}73797380.peach-panic-body--final {7381  font-size: 1rem;7382  font-weight: 700;7383  color: rgb(255, 80, 80);7384  line-height: 1.4;7385}73867387.peach-panic-body--final-intro {7388  font-size: 1rem;7389  color: #ffffff;7390  font-weight: 400;7391}73927393.peach-panic-divider {7394  height: 1px;7395  background: rgba(255, 255, 255, 0.08);7396  margin: 4px 0;7397}73987399.peach-panic-confirm-input {7400  width: 100%;7401  padding: 10px 12px;7402  background: rgba(255, 255, 255, 0.02);7403  border: 1px solid rgba(220, 38, 38, 0.4);7404  border-radius: 8px;7405  color: var(--peach-t1);7406  font-family: "IBM Plex Mono", monospace;7407  font-size: 0.875rem;7408  letter-spacing: 0.12em;7409  text-transform: uppercase;7410}74117412.peach-panic-confirm-input:focus {7413  outline: none;7414  border-color: rgb(220, 38, 38);7415}74167417.peach-panic-confirm-input--match {7418  border-color: rgb(220, 38, 38);7419  color: rgb(220, 38, 38);7420}74217422.peach-panic-confirm-label {7423  font-size: 0.6875rem;7424  color: var(--peach-t2);7425  margin: 0 0 -8px;7426  letter-spacing: 0.06em;7427}74287429.peach-panic-actions {7430  display: flex;7431  flex-direction: column;7432  gap: 10px;7433  margin-top: auto;7434}74357436.peach-panic-button {7437  width: 100%;7438  padding: 12px;7439  border-radius: 8px;7440  font-size: 0.8125rem;7441  cursor: pointer;7442  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7443}74447445.peach-panic-button--primary {7446  background: var(--peach-accent);7447  border: 1px solid var(--peach-accent);7448  color: #ffffff;7449  font-weight: 600;7450}74517452.peach-panic-button--primary:hover {7453  background: color-mix(in srgb, var(--peach-accent) 88%, white);7454}74557456.peach-panic-button--danger {7457  background: rgb(220, 38, 38);7458  border: 1px solid rgb(220, 38, 38);7459  color: #ffffff;7460  font-weight: 600;7461}74627463.peach-panic-button--danger:disabled {7464  opacity: 0.35;7465  cursor: not-allowed;7466}74677468.peach-panic-button--ghost {7469  background: transparent;7470  border: 1px solid rgba(255, 255, 255, 0.18);7471  color: var(--peach-t2);7472}74737474.peach-panic-button--ghost:hover {7475  border-color: rgba(255, 255, 255, 0.32);7476  color: var(--peach-t1);7477}74787479.peach-panic-link {7480  background: transparent;7481  border: none;7482  padding: 4px 0;7483  color: rgba(220, 38, 38, 0.65);7484  font-size: 0.75rem;7485  cursor: pointer;7486  text-align: left;7487  text-decoration: underline;7488  text-underline-offset: 3px;7489}74907491.peach-panic-link:hover {7492  color: rgb(220, 38, 38);7493}74947495.peach-panic-bar {7496  background: rgb(220, 38, 38);7497  padding: 16px 20px;7498  margin: -28px -20px 0;7499  text-align: center;7500  font-size: 0.8125rem;7501  font-weight: 700;7502  letter-spacing: 0.12em;7503  color: #ffffff;7504}75057506.peach-panic-final-button {7507  width: 100%;7508  padding: 14px;7509  background: rgb(220, 38, 38);7510  border: none;7511  border-radius: 8px;7512  color: #ffffff;7513  font-size: 0.875rem;7514  font-weight: 700;7515  letter-spacing: 0.08em;7516  text-transform: uppercase;7517  cursor: pointer;7518  animation: peach-panic-pulse 2s ease-in-out infinite;7519}75207521.peach-settings-license {7522  margin-top: 10px;7523  padding-top: 10px;7524  border-top: 1px solid var(--peach-t3);7525}75267527.peach-settings-label {7528  font-size: 0.625rem;7529  letter-spacing: 0.08em;7530  color: var(--peach-t3);7531  display: block;7532  margin-bottom: 6px;7533}75347535.peach-settings-license-row {7536  display: flex;7537  align-items: center;7538  justify-content: space-between;7539  gap: 8px;7540}75417542.peach-settings-license-key {7543  font-family: 'IBM Plex Mono', monospace;7544  font-size: 0.75rem;7545  color: var(--peach-t0);7546  letter-spacing: 0.04em;7547  word-break: break-all;7548  flex: 1;7549  min-width: 0;7550}75517552.peach-settings-license-key--masked {7553  font-family: 'IBM Plex Mono', monospace;7554  font-size: 0.6rem;7555  color: var(--peach-t1);7556  letter-spacing: 0.18em;7557  user-select: none;7558}75597560.peach-settings-license-actions {7561  display: flex;7562  align-items: center;7563  gap: 2px;7564  flex-shrink: 0;7565}75667567.peach-settings-license-copy {7568  font-size: 0.6875rem;7569  color: var(--peach-accent);7570  background: transparent;7571  border: none;7572  cursor: pointer;7573  padding: 4px 8px;7574  border-radius: 4px;7575  flex-shrink: 0;7576  transition: opacity 150ms ease;7577}75787579.peach-settings-license-copy:hover {7580  opacity: 0.75;7581}75827583.peach-settings-license-toggle {7584  display: flex;7585  align-items: center;7586  justify-content: center;7587  background: transparent;7588  border: none;7589  cursor: pointer;7590  padding: 4px 6px;7591  border-radius: 4px;7592  color: var(--peach-t2);7593  transition: color 150ms ease;7594}75957596.peach-settings-license-toggle:hover {7597  color: var(--peach-t1);7598}75997600@keyframes peach-panic-pulse {7601  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7602  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7603}76047605[data-motion="reduce"] .peach-panic-final-button {7606  animation: none;7607}76087609/* Vault History — Settings → Vault sub-view */76107611.peach-history-list {7612  border: 1px solid var(--peach-border);7613  border-radius: 8px;7614  overflow: hidden;7615  margin: 8px 0 4px;7616}76177618.peach-history-row {7619  display: flex;7620  align-items: center;7621  justify-content: space-between;7622  padding: 9px 12px;7623  gap: 10px;7624  border-bottom: 1px solid var(--peach-border);7625}76267627.peach-history-row:last-child {7628  border-bottom: none;7629}76307631.peach-history-meta {7632  display: flex;7633  flex-direction: column;7634  gap: 2px;7635  min-width: 0;7636  flex: 1;7637}76387639.peach-history-time {7640  font-size: 0.75rem;7641  font-family: 'IBM Plex Mono', ui-monospace, monospace;7642  color: var(--peach-t0);7643  white-space: nowrap;7644  overflow: hidden;7645  text-overflow: ellipsis;7646}76477648.peach-history-sub {7649  font-size: 0.625rem;7650  color: var(--peach-t2);7651  letter-spacing: 0.06em;7652  text-transform: uppercase;7653  white-space: nowrap;7654  overflow: hidden;7655  text-overflow: ellipsis;7656}76577658.peach-history-btn {7659  flex-shrink: 0;7660  white-space: nowrap;7661  min-width: 56px;7662  text-align: center;7663}76647665.peach-history-btn.is-busy {7666  opacity: 0.65;7667}76687669.peach-history-footer {7670  font-size: 0.625rem;7671  color: var(--peach-t3);7672  letter-spacing: 0.05em;7673  text-align: right;7674  margin: 0;7675  padding: 2px 0 0;7676}76777678/* ── Context menu + swipe-copy flash ─────────────────────── */7679.peach-context-menu-backdrop {7680  position: fixed;7681  inset: 0;7682  background: rgba(0, 0, 0, 0.45);7683  z-index: 100;7684  display: flex;7685  align-items: flex-end;7686  justify-content: center;7687  animation: peach-ctx-fade 140ms ease both;7688}7689.peach-context-menu {7690  width: min(360px, calc(100vw - 24px));7691  margin-bottom: max(env(safe-area-inset-bottom), 12px);7692  background: var(--peach-bg);7693  border: 1px solid var(--peach-t3);7694  border-radius: 14px;7695  padding: 6px;7696  display: flex;7697  flex-direction: column;7698  gap: 2px;7699  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7700  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7701}7702@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7703@keyframes peach-ctx-rise {7704  from { transform: translateY(16px); opacity: 0; }7705  to   { transform: translateY(0);    opacity: 1; }7706}7707.peach-context-menu-item {7708  background: transparent;7709  color: var(--peach-t0);7710  border: 0;7711  border-radius: 10px;7712  padding: 12px 14px;7713  text-align: left;7714  font: inherit;7715  cursor: pointer;7716}7717.peach-context-menu-item:hover,7718.peach-context-menu-item:focus-visible {7719  background: var(--peach-t3);7720}7721.peach-context-menu-item--danger {7722  color: var(--peach-health-bad, #d96868);7723}7724.peach-context-menu-item--cancel {7725  color: var(--peach-t2);7726  margin-top: 4px;7727  border-top: 1px solid var(--peach-t3);7728  border-radius: 0 0 10px 10px;7729}77307731/* Swipe-to-copy flash */7732.peach-entry-row.is-copy-flash {7733  animation: peach-copy-flash 600ms ease both;7734}7735@keyframes peach-copy-flash {7736  0%   { background: transparent; }7737  20%  { background: rgba(217, 153, 51, 0.32); }7738  100% { background: transparent; }7739}77407741html { font-size: 16px; }77427743/* ── Recovery word entry ─────────────────────────────────────────── */7744.peach-lock-recover-link {7745  display: block;7746  width: 100%;7747  margin-top: 12px;7748  background: none;7749  border: none;7750  font-family: "IBM Plex Mono", monospace;7751  font-size: 0.625rem;7752  letter-spacing: 0.06em;7753  color: var(--peach-t2);7754  cursor: pointer;7755  text-align: center;7756  padding: 4px;7757  transition: color 120ms ease;7758}7759.peach-lock-recover-link:hover {7760  color: var(--peach-t0);7761}77627763.lock-screen--recovery {7764  display: flex;7765  flex-direction: column;7766  align-items: stretch;7767  padding: 12px 20px 24px;7768  overflow: hidden;7769}77707771.peach-recovery-nav {7772  display: flex;7773  align-items: center;7774  position: relative;7775  z-index: 1;7776  margin-bottom: 4px;7777}77787779/* Mask runes to the top decorative band only — keep inputs and the7780   bottom CTA button clear. The bottom of the popup is reserved for7781   submit buttons; rendering runes there overlaps the button glyph. */7782.peach-rune-background--recovery {7783  -webkit-mask-image: linear-gradient(7784    to bottom,7785    black 0px, black 85px,7786    transparent 110px,7787    transparent 100%7788  );7789  mask-image: linear-gradient(7790    to bottom,7791    black 0px, black 85px,7792    transparent 110px,7793    transparent 100%7794  );7795}77967797.peach-recovery-header {7798  text-align: center;7799  margin-bottom: 16px;7800  margin-top: 4px;7801}7802.peach-recovery-header .peach-onboarding-headline {7803  font-size: 1.25rem;7804  font-weight: 300;7805  letter-spacing: 0.02em;7806  margin: 0 0 4px;7807}7808.peach-recovery-header .peach-hint {7809  font-family: "IBM Plex Mono", monospace;7810  font-size: 0.625rem;7811  color: var(--peach-t2);7812  letter-spacing: 0.04em;7813  margin: 0;7814}78157816/* 12-word grid: 2 columns × 6 rows */7817.peach-recovery-grid {7818  display: grid;7819  grid-template-columns: repeat(2, 1fr);7820  gap: 12px 20px;7821  width: 100%;7822  margin-bottom: 0;7823}78247825.peach-recovery-word-slot {7826  display: flex;7827  align-items: center;7828  gap: 6px;7829  min-width: 0;7830}78317832.peach-recovery-word-index {7833  font-family: "IBM Plex Mono", monospace;7834  font-size: 0.5rem;7835  color: rgba(255, 255, 255, 0.35);7836  min-width: 14px;7837  flex-shrink: 0;7838  text-align: right;7839  letter-spacing: 0.04em;7840}78417842.peach-recovery-word-input {7843  flex: 1;7844  min-width: 0;7845  background: transparent;7846  border: none;7847  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7848  color: var(--peach-t0);7849  font-family: "IBM Plex Mono", monospace;7850  font-size: 0.6875rem;7851  letter-spacing: 0.06em;7852  padding: 5px 2px 4px;7853  outline: none;7854  text-transform: lowercase;7855  transition: border-color 120ms ease;7856}7857.peach-recovery-word-input::placeholder {7858  color: rgba(255, 255, 255, 0.18);7859}7860.peach-recovery-word-input:focus {7861  border-bottom-color: var(--peach-accent);7862}78637864.peach-recovery-submit {7865  width: 100%;7866  margin-top: auto;7867}78687869.peach-recovery-new-password-form {7870  width: 100%;7871  display: flex;7872  flex-direction: column;7873  gap: 16px;7874  margin-bottom: 8px;7875}7876.peach-recovery-new-password-form .peach-newvault-field {7877  display: flex;7878  flex-direction: column;7879  gap: 4px;7880}78817882/* ── Recovery words display (post-create) ────────────────────────── */7883.lock-screen--recovery-display {7884  display: flex;7885  flex-direction: column;7886  align-items: stretch;7887  padding: 0 20px 20px;7888  min-height: 0;7889  overflow-y: auto;7890}78917892.peach-recovery-words-display {7893  width: 100%;7894  margin-bottom: 16px;7895  border: 1px solid var(--peach-t3);7896  border-radius: 8px;7897  padding: 12px 14px;7898  background: rgba(245, 240, 234, 0.04);7899}79007901.peach-recovery-words-label {7902  font-family: "IBM Plex Mono", monospace;7903  font-size: 0.5rem;7904  letter-spacing: 0.08em;7905  color: var(--peach-t2);7906  text-transform: uppercase;7907  margin-bottom: 10px;7908}79097910.peach-recovery-word-list {7911  list-style: none;7912  margin: 0;7913  padding: 0;7914  display: grid;7915  grid-template-columns: repeat(2, 1fr);7916  gap: 6px 16px;7917}79187919.peach-recovery-word-item {7920  display: flex;7921  align-items: baseline;7922  gap: 5px;7923}79247925.peach-recovery-word-num {7926  font-family: "IBM Plex Mono", monospace;7927  font-size: 0.5rem;7928  color: var(--peach-t2);7929  width: 14px;7930  flex: 0 0 14px;7931  text-align: right;7932  letter-spacing: 0.04em;7933  font-variant-numeric: tabular-nums;7934}79357936.peach-recovery-download-btn {7937  display: block;7938  margin: 10px auto 0;7939  padding: 4px 10px;7940  background: transparent;7941  border: 1px solid var(--peach-border);7942  border-radius: 6px;7943  color: var(--peach-t2);7944  font-family: "IBM Plex Mono", monospace;7945  font-size: 0.5625rem;7946  letter-spacing: 0.06em;7947  text-transform: lowercase;7948  cursor: pointer;7949  transition: border-color 0.15s, color 0.15s;7950}79517952.peach-recovery-download-btn:hover {7953  border-color: var(--peach-accent);7954  color: var(--peach-t0);7955}79567957.peach-recovery-word-text {7958  font-family: "IBM Plex Mono", monospace;7959  font-size: 0.6875rem;7960  letter-spacing: 0.06em;7961  color: var(--peach-t0);7962  text-transform: lowercase;7963}79647965.peach-hint--warning {7966  color: var(--peach-accent);7967  font-style: italic;7968}7969.peach-hint--success {7970  color: var(--peach-t2);7971  font-family: "IBM Plex Mono", monospace;7972  font-size: 0.625rem;7973  letter-spacing: 0.06em;7974}79757976/* Confirmation step */7977.peach-recovery-confirm {7978  width: 100%;7979  flex: 1;7980  display: flex;7981  flex-direction: column;7982}7983.peach-recovery-confirm-label {7984  font-family: "IBM Plex Mono", monospace;7985  font-size: 0.5625rem;7986  letter-spacing: 0.04em;7987  color: var(--peach-t2);7988  text-align: center;7989  margin: 0 0 12px;7990}7991.peach-recovery-confirm-fields {7992  display: flex;7993  flex-direction: column;7994  gap: 14px;7995  margin-bottom: 10px;7996}7997.peach-recovery-confirm-field {7998  display: flex;7999  align-items: center;8000  gap: 8px;8001}8002.peach-recovery-confirm-num {8003  font-family: "IBM Plex Mono", monospace;8004  font-size: 0.5rem;8005  color: var(--peach-t2);8006  min-width: 44px;8007  letter-spacing: 0.04em;8008}8009.peach-recovery-confirm-input {8010  flex: 1;8011  background: transparent;8012  border: none;8013  border-bottom: 1px solid var(--peach-t3);8014  color: var(--peach-t0);8015  font-family: "IBM Plex Mono", monospace;8016  font-size: 0.6875rem;8017  letter-spacing: 0.06em;8018  padding: 4px 2px 3px;8019  outline: none;8020  text-transform: lowercase;8021  transition: border-color 120ms ease;8022}8023.peach-recovery-confirm-input:focus {8024  border-bottom-color: var(--peach-accent);8025}8026.peach-recovery-confirm-input:disabled {8027  opacity: 0.4;8028  cursor: not-allowed;8029}8030.peach-recovery-confirm-btn {8031  width: 100%;8032  margin-top: auto;8033}80348035/* ============================================================8036   Sync info sheet8037   ============================================================ */80388039.peach-sync-info-backdrop {8040  position: fixed;8041  inset: 0;8042  z-index: 200;8043  background: rgba(0, 0, 0, 0.55);8044  display: flex;8045  align-items: flex-end;8046  animation: peach-fade-in 200ms ease forwards;8047}80488049@keyframes peach-fade-in {8050  from { opacity: 0; }8051  to   { opacity: 1; }8052}80538054.peach-sync-info-sheet {8055  width: 100%;8056  background: var(--peach-bg-card, var(--peach-bg));8057  border-top-left-radius: 20px;8058  border-top-right-radius: 20px;8059  padding: 12px 24px 32px;8060  display: flex;8061  flex-direction: column;8062  gap: 20px;8063  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;8064}80658066@keyframes peach-sheet-up {8067  from { transform: translateY(100%); }8068  to   { transform: translateY(0); }8069}80708071.peach-sync-info-handle {8072  width: 36px;8073  height: 4px;8074  border-radius: 2px;8075  background: var(--peach-border);8076  margin: 0 auto 4px;8077  flex-shrink: 0;8078}80798080.peach-sync-info-title {8081  font-family: 'Cormorant Garamond', serif;8082  font-style: italic;8083  font-size: 26px;8084  font-weight: 600;8085  color: var(--peach-t0);8086  margin: 0;8087  line-height: 1.2;8088}80898090.peach-sync-info-body {8091  display: flex;8092  flex-direction: column;8093  gap: 14px;8094}80958096.peach-sync-info-point {8097  display: flex;8098  gap: 12px;8099  align-items: flex-start;8100  font-size: 14px;8101  color: var(--peach-t2);8102  line-height: 1.6;8103  margin: 0;8104}81058106.peach-sync-info-icon {8107  color: var(--peach-accent);8108  font-size: 16px;8109  flex-shrink: 0;8110  margin-top: 1px;8111}81128113.peach-sync-info-actions {8114  display: flex;8115  flex-direction: column;8116  gap: 12px;8117  margin-top: 4px;8118}81198120.peach-sync-info-pro-link {8121  background: none;8122  border: none;8123  font-size: 13px;8124  color: var(--peach-t3);8125  cursor: pointer;8126  padding: 0;8127  font-family: inherit;8128  text-align: center;8129  transition: color 150ms ease;8130}81318132.peach-sync-info-pro-link:hover {8133  color: var(--peach-accent);8134}81358136.peach-btn--full {8137  width: 100%;8138}81398140/* ── Sync screen ── */81418142.peach-sync-coming-soon {8143  display: flex;8144  align-items: flex-start;8145  gap: 10px;8146  padding: 12px 14px;8147  background: var(--peach-s1);8148  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8149  border-radius: 10px;8150}8151.peach-sync-coming-soon__icon {8152  flex-shrink: 0;8153  color: var(--peach-accent);8154  margin-top: 1px;8155  line-height: 0;8156}8157.peach-sync-coming-soon__title {8158  font-family: 'Cormorant Garamond', serif;8159  font-weight: 500;8160  font-size: 13px;8161  color: var(--peach-accent);8162  margin: 0 0 5px;8163  line-height: 1.3;8164}8165.peach-sync-coming-soon__body {8166  font-size: 12px;8167  color: var(--peach-t1);8168  line-height: 1.55;8169  margin: 0;8170}81718172.peach-sync-screen {8173  display: flex;8174  flex-direction: column;8175  height: 100%;8176}81778178.peach-sync-content {8179  flex: 1;8180  overflow-y: auto;8181  padding: 24px 20px 40px;8182  display: flex;8183  flex-direction: column;8184  gap: 24px;8185}81868187/* Intro (State A) */8188.peach-sync-headline {8189  font-family: 'Cormorant Garamond', serif;8190  font-style: italic;8191  font-size: 28px;8192  font-weight: 600;8193  color: var(--peach-t0);8194  margin: 0 0 10px;8195  line-height: 1.2;8196}81978198.peach-sync-intro-body {8199  font-size: 14px;8200  color: var(--peach-t1);8201  line-height: 1.6;8202  margin: 0;8203}82048205.peach-sync-pro-note {8206  display: flex;8207  flex-direction: column;8208  gap: 8px;8209  background: var(--peach-t3);8210  border-radius: 10px;8211  padding: 12px 14px;8212}82138214.peach-sync-pro-note-text {8215  font-size: 12px;8216  color: var(--peach-t2);8217  line-height: 1.5;8218  margin: 0;8219}82208221.peach-sync-pro-link {8222  background: none;8223  border: none;8224  font-size: 12px;8225  color: var(--peach-accent);8226  cursor: pointer;8227  padding: 0;8228  font-family: inherit;8229  text-align: left;8230}82318232/* Status (State C) */8233.peach-sync-status {8234  padding: 12px 0;8235  border-bottom: 1px solid var(--peach-border);8236}82378238.peach-sync-status-row {8239  display: flex;8240  align-items: center;8241  gap: 8px;8242}82438244.peach-sync-dot {8245  width: 7px;8246  height: 7px;8247  border-radius: 50%;8248  flex-shrink: 0;8249}82508251.peach-sync-dot--green { background: var(--peach-health-ok); }8252.peach-sync-dot--amber { background: var(--peach-accent); }82538254.peach-sync-status-text {8255  font-family: 'IBM Plex Mono', monospace;8256  font-size: 11px;8257  color: var(--peach-t2);8258}82598260/* Paired devices */8261.peach-sync-section {8262  display: flex;8263  flex-direction: column;8264  gap: 2px;8265}82668267.peach-sync-section-label {8268  font-family: 'IBM Plex Mono', monospace;8269  font-size: 10px;8270  letter-spacing: 0.1em;8271  color: var(--peach-t3);8272  margin: 0 0 10px;8273}82748275.peach-sync-device-row {8276  display: flex;8277  justify-content: space-between;8278  align-items: baseline;8279  padding: 10px 0;8280  border-bottom: 1px solid var(--peach-border);8281  gap: 12px;8282}82838284.peach-sync-device-name {8285  font-size: 14px;8286  color: var(--peach-t1);8287}82888289.peach-sync-device-meta {8290  font-family: 'IBM Plex Mono', monospace;8291  font-size: 11px;8292  color: var(--peach-t3);8293  white-space: nowrap;8294}82958296.peach-sync-hub-note {8297  padding: 14px 16px;8298  border: 1px solid var(--peach-border);8299  border-radius: 10px;8300  display: flex;8301  flex-direction: column;8302  gap: 6px;8303  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8304}83058306.peach-sync-hub-note-title {8307  font-size: 13px;8308  font-weight: 600;8309  color: var(--peach-t0);8310  margin: 0;8311}83128313.peach-sync-hub-note-body {8314  font-size: 12px;8315  color: var(--peach-t2);8316  line-height: 1.6;8317  margin: 0;8318}83198320/* Action buttons */8321.peach-sync-actions {8322  display: flex;8323  gap: 10px;8324  flex-wrap: wrap;8325}83268327/* Upgrade prompt (State B) */8328.peach-sync-upgrade {8329  display: flex;8330  flex-direction: column;8331  gap: 12px;8332  padding: 16px;8333  border: 1px solid var(--peach-border);8334  border-radius: 10px;8335}83368337.peach-sync-upgrade-text {8338  font-size: 13px;8339  color: var(--peach-t2);8340  line-height: 1.6;8341  margin: 0;8342}83438344/* Network note */8345.peach-sync-network-note {8346  font-size: 12px;8347  color: var(--peach-t3);8348  line-height: 1.6;8349  margin: 0;8350}83518352/* Advanced */8353.peach-sync-advanced {8354  margin-top: auto;8355  padding-top: 16px;8356  border-top: 1px solid var(--peach-border);8357}83588359.peach-sync-advanced-toggle {8360  display: flex;8361  align-items: center;8362  gap: 8px;8363  background: none;8364  border: none;8365  font-family: 'IBM Plex Mono', monospace;8366  font-size: 11px;8367  letter-spacing: 0.08em;8368  color: var(--peach-t3);8369  cursor: pointer;8370  padding: 0;8371  text-transform: uppercase;8372}83738374.peach-sync-advanced-chevron {8375  display: inline-block;8376  transition: transform 200ms ease;8377  font-size: 10px;8378}83798380.peach-sync-advanced-chevron.is-open {8381  transform: rotate(90deg);8382}83838384.peach-sync-advanced-content {8385  margin-top: 14px;8386}83878388.peach-sync-advanced-row {8389  display: flex;8390  justify-content: space-between;8391  align-items: center;8392  gap: 16px;8393}83948395.peach-sync-advanced-title {8396  font-size: 14px;8397  color: var(--peach-t1);8398  margin: 0 0 2px;8399}84008401.peach-sync-advanced-subtitle {8402  font-size: 12px;8403  color: var(--peach-t3);8404  margin: 0;8405  line-height: 1.5;8406}84078408/* ── Add Device — Android scan tabs ─────────────────────────────────────── */84098410.peach-pairing-tabs {8411  display: flex;8412  border: 1px solid var(--peach-border);8413  border-radius: 8px;8414  overflow: hidden;8415  margin-bottom: 4px;8416}84178418.peach-pairing-tab {8419  flex: 1;8420  padding: 10px 0;8421  background: none;8422  border: none;8423  font-family: 'IBM Plex Mono', monospace;8424  font-size: 11px;8425  letter-spacing: 0.06em;8426  color: var(--peach-t2);8427  cursor: pointer;8428  transition: background 150ms, color 150ms;8429}84308431.peach-pairing-tab.is-active {8432  background: var(--peach-accent);8433  color: #fff;8434  font-weight: 600;8435}84368437.peach-pairing-tab:not(.is-active):active {8438  background: var(--peach-border);8439}84408441/* Camera view */8442.peach-pairing-camera-container {8443  position: relative;8444  width: 100%;8445  aspect-ratio: 1;8446  border-radius: 12px;8447  overflow: hidden;8448  background: #000;8449  flex-shrink: 0;8450}84518452.peach-pairing-video {8453  width: 100%;8454  height: 100%;8455  object-fit: cover;8456}84578458.peach-pairing-scan-frame {8459  position: absolute;8460  top: 50%;8461  left: 50%;8462  transform: translate(-50%, -50%);8463  width: 60%;8464  aspect-ratio: 1;8465  border: 2px solid var(--peach-accent);8466  border-radius: 8px;8467  pointer-events: none;8468}84698470/* ── Notes Mode ── */84718472/* Overlay that crossfades over the vault */8473.peach-notes-overlay {8474  position: fixed;8475  inset: 0;8476  z-index: 90;8477  opacity: 0;8478  pointer-events: none;8479  animation: peach-mode-in 220ms ease-in forwards;8480}84818482.peach-notes-overlay.is-visible {8483  opacity: 1;8484  pointer-events: auto;8485}84868487@keyframes peach-mode-in {8488  from { opacity: 0; }8489  to   { opacity: 1; }8490}84918492/* Top-level notes surface */8493.peach-notes-mode {8494  position: absolute;8495  inset: 0;8496  background: var(--peach-bg);8497  display: flex;8498  flex-direction: column;8499}85008501/* Rune canvas positioned behind content */8502.peach-note-rune-canvas {8503  position: absolute;8504  inset: 0;8505  width: 100%;8506  height: 100%;8507  pointer-events: none;8508  z-index: 0;8509}85108511/* TOC wrapper */8512.peach-notes-toc-wrapper {8513  position: absolute;8514  inset: 0;8515  z-index: 1;8516  opacity: 1;8517  pointer-events: auto;8518  transition: opacity 200ms ease;8519}85208521.peach-notes-toc-wrapper.is-hidden {8522  opacity: 0;8523  pointer-events: none;8524}85258526/* Editor wrapper */8527.peach-notes-editor-wrapper {8528  position: absolute;8529  inset: 0;8530  z-index: 2;8531  opacity: 0;8532  pointer-events: none;8533  transition: opacity 200ms ease;8534}85358536.peach-notes-editor-wrapper.is-visible {8537  opacity: 1;8538  pointer-events: auto;8539}85408541/* TOC inner */8542.peach-notes-toc {8543  position: relative;8544  display: flex;8545  flex-direction: column;8546  height: 100%;8547  padding-top: env(safe-area-inset-top, 0px);8548  padding-bottom: env(safe-area-inset-bottom, 0px);8549}85508551/* Shared header */8552.peach-notes-header {8553  display: flex;8554  align-items: center;8555  padding: 12px 16px;8556  gap: 12px;8557  flex-shrink: 0;8558  min-height: 52px;8559  position: relative;8560  z-index: 2;8561}85628563.peach-notes-back {8564  font-size: 22px;8565  color: var(--peach-t2);8566  background: none;8567  border: none;8568  padding: 4px;8569  cursor: pointer;8570  line-height: 1;8571  flex-shrink: 0;8572  transition: color 150ms ease;8573  -webkit-tap-highlight-color: transparent;8574}85758576.peach-notes-back:active { color: var(--peach-t0); }85778578.peach-notes-header-title {8579  flex: 1;8580  font-family: 'Cormorant Garamond', serif;8581  font-style: italic;8582  font-size: 22px;8583  color: var(--peach-t0);8584  text-align: center;8585}85868587.peach-notes-header-title.is-breadcrumb {8588  font-family: 'IBM Plex Mono', monospace;8589  font-style: normal;8590  font-size: 11px;8591  color: var(--peach-t3);8592  letter-spacing: 0.08em;8593  text-transform: uppercase;8594  cursor: pointer;8595}85968597.peach-notes-header-actions {8598  display: flex;8599  gap: 8px;8600  flex-shrink: 0;8601}86028603.peach-notes-header-btn {8604  width: 36px;8605  height: 36px;8606  display: flex;8607  align-items: center;8608  justify-content: center;8609  background: none;8610  border: none;8611  color: var(--peach-t2);8612  cursor: pointer;8613  border-radius: 8px;8614  font-size: 16px;8615  transition: color 150ms ease, background 150ms ease;8616  -webkit-tap-highlight-color: transparent;8617}86188619.peach-notes-header-btn:active {8620  background: rgba(255,255,255,0.06);8621  color: var(--peach-t0);8622}86238624/* Inline search bar */8625.peach-notes-search-input {8626  flex: 1;8627  background: none;8628  border: none;8629  outline: none;8630  font-family: 'IBM Plex Mono', monospace;8631  font-size: 13px;8632  color: var(--peach-t0);8633  padding: 4px 0;8634  letter-spacing: 0.02em;8635}86368637.peach-notes-search-input::placeholder {8638  color: var(--peach-t3);8639}86408641/* TOC list */8642.peach-notes-list-container {8643  flex: 1;8644  overflow-y: auto;8645  overflow-x: hidden;8646  scrollbar-width: none;8647  -webkit-overflow-scrolling: touch;8648  overscroll-behavior: contain;8649  position: relative;8650  z-index: 1;8651}86528653.peach-notes-list-container::-webkit-scrollbar { display: none; }86548655/* Note row */8656.peach-note-row {8657  position: relative;8658  display: grid;8659  grid-template-columns: 44px 8px 1fr 8px auto;8660  align-items: center;8661  min-height: 72px;8662  padding: 16px 20px;8663  border-bottom: 0.5px solid var(--peach-border);8664  cursor: pointer;8665  overflow: hidden;8666  touch-action: pan-y;8667  user-select: none;8668  -webkit-user-select: none;8669  -webkit-tap-highlight-color: transparent;8670}86718672.peach-note-row:first-child {8673  border-top: 0.5px solid var(--peach-border);8674}86758676.peach-note-row:active {8677  background: rgba(255,255,255,0.02);8678}86798680.peach-note-numeral {8681  font-family: 'Cormorant Garamond', serif;8682  font-style: italic;8683  font-size: 15px;8684  color: var(--peach-accent);8685  text-align: right;8686  line-height: 1;8687  flex-shrink: 0;8688}86898690.peach-note-title-gap { /* grid spacer */ }86918692.peach-note-title {8693  font-family: 'Cormorant Garamond', serif;8694  font-style: italic;8695  font-size: 18px;8696  color: var(--peach-t0);8697  line-height: 1.3;8698  min-width: 0;8699  overflow-wrap: break-word;8700}87018702.peach-note-title-match {8703  color: var(--peach-accent);8704}87058706.peach-note-date {8707  font-family: 'IBM Plex Mono', monospace;8708  font-size: 11px;8709  color: var(--peach-t2);8710  white-space: nowrap;8711  text-align: right;8712  flex-shrink: 0;8713  grid-column: 5;8714}87158716/* Swipe underlays */8717.peach-note-row-underlay {8718  position: absolute;8719  inset: 0;8720  display: flex;8721  align-items: center;8722  padding: 0 24px;8723  font-family: 'IBM Plex Mono', monospace;8724  font-size: 11px;8725  letter-spacing: 0.1em;8726  pointer-events: none;8727  z-index: 0;8728}87298730.peach-note-row-underlay--delete {8731  background: #8B2020;8732  color: rgba(255,255,255,0.9);8733  justify-content: flex-end;8734}87358736.peach-note-row-underlay--archive {8737  background: var(--peach-accent);8738  color: #0C0A06;8739  justify-content: flex-start;8740}87418742/* Delete confirm strip */8743.peach-note-delete-confirm {8744  position: absolute;8745  inset: 0;8746  background: var(--peach-bg);8747  display: flex;8748  align-items: center;8749  gap: 12px;8750  padding: 0 20px;8751  font-family: 'IBM Plex Mono', monospace;8752  font-size: 11px;8753  color: var(--peach-t1);8754  letter-spacing: 0.04em;8755  animation: peach-delete-confirm-in 150ms ease both;8756  z-index: 10;8757}87588759@keyframes peach-delete-confirm-in {8760  from { opacity: 0; }8761  to   { opacity: 1; }8762}87638764.peach-note-delete-confirm-btn {8765  background: #8B2020;8766  color: rgba(255,255,255,0.9);8767  border: none;8768  border-radius: 6px;8769  padding: 4px 10px;8770  font-family: 'IBM Plex Mono', monospace;8771  font-size: 10px;8772  cursor: pointer;8773  letter-spacing: 0.06em;8774}87758776.peach-note-delete-cancel-btn {8777  background: none;8778  border: none;8779  color: var(--peach-t3);8780  font-family: 'IBM Plex Mono', monospace;8781  font-size: 10px;8782  cursor: pointer;8783  letter-spacing: 0.06em;8784  padding: 4px 6px;8785}87868787/* + New note button */8788.peach-notes-new-btn {8789  font-family: 'IBM Plex Mono', monospace;8790  font-size: 12px;8791  color: var(--peach-t3);8792  text-align: center;8793  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8794  background: none;8795  border: none;8796  width: 100%;8797  cursor: pointer;8798  letter-spacing: 0.04em;8799  transition: color 150ms ease;8800  -webkit-tap-highlight-color: transparent;8801}88028803.peach-notes-new-btn:active { color: var(--peach-accent); }88048805/* Empty state */8806.peach-notes-empty {8807  display: flex;8808  flex-direction: column;8809  align-items: center;8810  justify-content: center;8811  flex: 1;8812  padding: 48px 32px;8813  gap: 16px;8814}88158816.peach-notes-empty-text {8817  font-family: 'Cormorant Garamond', serif;8818  font-style: italic;8819  font-size: 20px;8820  color: var(--peach-t3);8821  text-align: center;8822  margin: 0;8823  line-height: 1.4;8824  white-space: pre-line;8825}88268827/* ── Editor surface ── */88288829.peach-note-editor-surface {8830  position: absolute;8831  inset: 0;8832  background: var(--peach-bg);8833  display: flex;8834  flex-direction: column;8835  padding-top: env(safe-area-inset-top, 0px);8836}88378838.peach-note-editor-scroll {8839  flex: 1;8840  overflow-y: auto;8841  overflow-x: hidden;8842  scrollbar-width: none;8843  -webkit-overflow-scrolling: touch;8844  padding: 0 24px 120px;8845  position: relative;8846  z-index: 1;8847}88488849.peach-note-editor-scroll::-webkit-scrollbar { display: none; }88508851/* Desktop toolbar (always visible above body) */8852.peach-note-toolbar-desktop-inline {8853  display: flex;8854  align-items: center;8855  gap: 2px;8856  padding: 6px 0 12px;8857  margin-bottom: 4px;8858  border-bottom: 0.5px solid var(--peach-border);8859}88608861/* Title field */8862.peach-note-title-field {8863  font-family: 'Cormorant Garamond', serif;8864  font-style: italic;8865  font-size: 32px;8866  font-weight: 600;8867  color: var(--peach-t0);8868  line-height: 1.2;8869  padding: 8px 0 0;8870  outline: none;8871  min-height: 44px;8872  word-break: break-word;8873  position: relative;8874  z-index: 1;8875}88768877.peach-note-title-field:empty::before {8878  content: attr(data-placeholder);8879  color: var(--peach-t3);8880  pointer-events: none;8881}88828883/* Hairline separator */8884.peach-note-hairline {8885  height: 0.5px;8886  background: var(--peach-border);8887  margin: 12px 0 20px;8888  position: relative;8889  z-index: 1;8890}88918892/* Body field */8893.peach-note-body-field {8894  font-family: 'DM Sans', sans-serif;8895  font-size: 16px;8896  color: var(--peach-t0);8897  line-height: 1.85;8898  padding: 0;8899  outline: none;8900  min-height: 240px;8901  word-break: break-word;8902  position: relative;8903  z-index: 1;8904}89058906.peach-note-body-field:empty::before {8907  content: attr(data-placeholder);8908  color: var(--peach-t3);8909  font-style: italic;8910  pointer-events: none;8911}89128913.peach-note-body-field h2 {8914  font-family: 'Cormorant Garamond', serif;8915  font-style: italic;8916  font-size: 22px;8917  font-weight: 600;8918  color: var(--peach-t0);8919  margin: 20px 0 8px;8920}89218922.peach-note-body-field blockquote {8923  border-left: 2px solid var(--peach-accent);8924  margin: 12px 0;8925  padding-left: 16px;8926  color: var(--peach-t1);8927  font-style: italic;8928}89298930.peach-note-body-field ul,8931.peach-note-body-field ol {8932  padding-left: 20px;8933  margin: 8px 0;8934}89358936.peach-note-body-field li {8937  margin: 4px 0;8938}89398940.peach-note-body-field hr {8941  border: none;8942  border-top: 0.5px solid var(--peach-border);8943  margin: 16px 0;8944}89458946/* Saved indicator */8947.peach-note-saved-indicator {8948  font-family: 'IBM Plex Mono', monospace;8949  font-size: 11px;8950  color: var(--peach-t3);8951  letter-spacing: 0.04em;8952  text-align: right;8953  padding: 6px 24px;8954  flex-shrink: 0;8955  transition: opacity 300ms ease;8956  pointer-events: none;8957  position: relative;8958  z-index: 1;8959}89608961/* Mobile keyboard toolbar */8962.peach-note-toolbar-mobile {8963  display: flex;8964  align-items: center;8965  padding: 8px 16px;8966  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));8967  background: var(--peach-bg);8968  border-top: 0.5px solid var(--peach-border);8969  gap: 4px;8970  flex-shrink: 0;8971  position: relative;8972  z-index: 10;8973}89748975.peach-note-toolbar-btn {8976  min-width: 36px;8977  height: 36px;8978  display: flex;8979  align-items: center;8980  justify-content: center;8981  background: none;8982  border: none;8983  border-radius: 8px;8984  cursor: pointer;8985  font-size: 14px;8986  color: var(--peach-t1);8987  font-family: 'DM Sans', sans-serif;8988  font-weight: 600;8989  transition: background 100ms ease, color 100ms ease;8990  -webkit-tap-highlight-color: transparent;8991}89928993.peach-note-toolbar-btn--italic { font-style: italic; }8994.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }8995.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }89968997.peach-note-toolbar-divider {8998  width: 0.5px;8999  height: 20px;9000  background: var(--peach-border);9001  margin: 0 4px;9002  flex-shrink: 0;9003}90049005.peach-note-toolbar-spacer { flex: 1; }90069007/* Desktop: larger headline in TOC */9008@media (min-width: 400px) {9009  .peach-notes-header-title:not(.is-breadcrumb) {9010    font-size: 32px;9011  }90129013  .peach-note-row {9014    min-height: 64px;9015    padding: 14px 16px;9016  }9017}90189019/* Flying title — shared element during expansion/collapse */90209021/* ─── Light theme overrides ───────────────────────────────────────────────9022   Tokens that cannot be expressed as variable substitutions — hardcoded9023   context-specific values that need separate light-mode rules. */90249025/* Settings section headers: use text-label (#79766F) per restoration brief —9026   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY9027   presence without fighting the light parchment background. */9028.light .peach-settings-sub-label,9029[data-theme="light"] .peach-settings-sub-label,9030.light .peach-settings-nav-label,9031[data-theme="light"] .peach-settings-nav-label {9032  color: #79766F;9033}90349035/* Secondary action buttons (ghost / subtle): filled with input-well surface9036   so they read as recessed against the parchment card background. */9037.light .peach-btn--ghost:not(.peach-icon-btn),9038[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {9039  background: #EEE7DD;9040  border-color: #DDD5CB;9041  color: #1A1208;9042}9043.light .peach-icon-btn,9044[data-theme="light"] .peach-icon-btn {9045  background: transparent;9046  border-color: transparent;9047}9048.light .peach-btn--subtle,9049[data-theme="light"] .peach-btn--subtle {9050  background: #EEE7DD;9051  border-color: #DDD5CB;9052}90539054/* Wide secondary action button on the lock screen — override the9055   hardcoded dark-mode rgba values with warm parchment equivalents. */9056.light .peach-lock-secondary,9057[data-theme="light"] .peach-lock-secondary {9058  background: #EEE7DD;9059  border-color: #DDD5CB;9060  color: #1A1208;9061}9062.light .peach-lock-secondary:hover,9063[data-theme="light"] .peach-lock-secondary:hover {9064  background: #F0E9DF;9065}90669067/* Entry row hover: bg-row lifts the row above the card surface. */9068.light .peach-entry-row:hover,9069[data-theme="light"] .peach-entry-row:hover {9070  background: #F2EBE1;9071}9072.light .peach-entry-row.is-active,9073[data-theme="light"] .peach-entry-row.is-active {9074  background: #F2EBE1;9075}9076.light .peach-entry-row.is-selected,9077[data-theme="light"] .peach-entry-row.is-selected {9078  background: #F5EDE2;9079}90809081/* ──────────────────────────────────────────────────────────────────────────9082   Chirp pairing flow — bird-stage animation (Phase 1)9083   See src/popup/components/ChirpPairingFlow.tsx and the brief §6.2.9084   Three-act animation gated on the [data-phase] attribute of9085   .peach-chirp-pair; child layers (birds, chirp arcs, flight wave, dot)9086   each react via either pose class or visibility flag.9087   Tokens: accent surfaces use var(--peach-accent); bird illustration9088   colours are baked into the SVG per the brand-peach exception in §3.1.9089   ────────────────────────────────────────────────────────────────────── */90909091.peach-chirp-pair {9092  position: absolute;9093  inset: 0;9094  z-index: 3;9095  display: flex;9096  flex-direction: column;9097  padding: 14px 12px 12px;9098  width: 100%;9099  box-sizing: border-box;9100  gap: 0;9101  background:9102    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9103    var(--peach-bg);9104  color: var(--peach-t0);9105  overflow-y: auto;9106  overflow-x: hidden;9107  scrollbar-width: none;9108  isolation: isolate;9109  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9110}9111@keyframes peach-chirp-overlay-in {9112  from { opacity: 0; transform: translateY(8px); }9113  to   { opacity: 1; transform: translateY(0); }9114}9115.peach-chirp-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }9116.peach-chirp-pair::before {9117  content: '';9118  position: absolute;9119  inset: 0;9120  border-radius: inherit;9121  pointer-events: none;9122  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9123  z-index: 0;9124}9125.peach-chirp-pair > * { position: relative; z-index: 1; }91269127/* Header --------------------------------------------------------------- */9128.peach-chirp-head {9129  display: flex; align-items: center; gap: 10px;9130}9131.peach-chirp-back {9132  width: 32px; height: 32px;9133  display: inline-flex; align-items: center; justify-content: center;9134  background: transparent;9135  border: none;9136  border-radius: 8px;9137  color: var(--peach-t1);9138  cursor: pointer;9139  transition: color 0.15s ease, box-shadow 0.15s ease;9140}9141.peach-chirp-back:hover {9142  color: var(--peach-accent);9143  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9144}9145.peach-chirp-title {9146  font-family: var(--font-display, Georgia, serif);9147  font-style: italic;9148  font-size: 24px;9149  font-weight: 500;9150  letter-spacing: 0.005em;9151  color: var(--peach-t0);9152  line-height: 1;9153}9154.peach-chirp-head-spacer { flex: 1; }91559156/* Chip row ------------------------------------------------------------- */9157.peach-chirp-chip-row {9158  display: flex;9159  align-items: center;9160  justify-content: flex-start;9161  margin-top: 12px;9162}9163.peach-chirp-chip {9164  display: inline-flex; align-items: center; gap: 8px;9165  padding: 5px 10px 5px 8px;9166  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9167  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9168  border-radius: 999px;9169  font-family: var(--peach-mono, ui-monospace, monospace);9170  font-size: 11px;9171  letter-spacing: 0.04em;9172  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9173}9174.peach-chirp-chip-dot {9175  width: 6px; height: 6px; border-radius: 50%;9176  background: var(--peach-accent);9177  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9178}9179.peach-chirp-chip[data-phase="paired"] {9180  background: color-mix(in srgb, #4f9eda 12%, transparent);9181  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9182  color: #76b6e8;9183}9184.peach-chirp-chip[data-phase="paired"] .peach-chirp-chip-dot {9185  background: #76b6e8;9186  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9187}9188.peach-chirp-chip[data-phase="timeout"],9189.peach-chirp-chip[data-phase="mic_denied"],9190.peach-chirp-chip[data-phase="version_mismatch"],9191.peach-chirp-chip[data-phase="handshake_failed"] {9192  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9193  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9194  color: var(--peach-warn, #d29257);9195}9196.peach-chirp-chip[data-phase="timeout"] .peach-chirp-chip-dot,9197.peach-chirp-chip[data-phase="mic_denied"] .peach-chirp-chip-dot,9198.peach-chirp-chip[data-phase="version_mismatch"] .peach-chirp-chip-dot,9199.peach-chirp-chip[data-phase="handshake_failed"] .peach-chirp-chip-dot {9200  background: var(--peach-warn, #d29257);9201  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9202}92039204/* Bird stage ----------------------------------------------------------- */9205.peach-chirp-stage {9206  position: relative;9207  margin: 14px 0 8px;9208  height: 180px;9209  border-radius: 12px;9210  background:9211    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9212    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),9213    color-mix(in srgb, var(--peach-bg) 92%, #000);9214  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);9215  overflow: hidden;9216  isolation: isolate;9217}9218.peach-chirp-stage::after {9219  content: '';9220  position: absolute;9221  left: 12%; right: 12%;9222  bottom: 36px;9223  height: 1px;9224  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9225}92269227.peach-chirp-bird-slot {9228  position: absolute;9229  bottom: 8px;9230  width: 100px;9231  height: 110px;9232  display: flex;9233  align-items: flex-end;9234  justify-content: center;9235}9236.peach-chirp-bird-slot-desktop { left: 28px; }9237.peach-chirp-bird-slot-mobile { right: 28px; }92389239/* Mobile bird hops in from the right when handshake begins */9240.peach-chirp-bird-slot-mobile {9241  opacity: 1;9242  transform: translateX(-6px);9243  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9244}9245.peach-chirp-stage.act-listening .peach-chirp-bird-slot-mobile,9246.peach-chirp-stage.act-chirping .peach-chirp-bird-slot-mobile,9247.peach-chirp-stage.act-idle .peach-chirp-bird-slot-mobile {9248  opacity: 0;9249  transform: translateX(60px) rotate(8deg);9250}9251.peach-chirp-stage.act-handshake .peach-chirp-bird-slot-desktop,9252.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop {9253  transform: translateX(6px);9254  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9255}92569257/* Paired: both birds bob together */9258.peach-chirp-stage.act-paired .peach-chirp-bird-slot {9259  animation: peach-chirp-happy-bob 1.2s ease-in-out infinite;9260}9261.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { animation-delay: 0.2s; }9262.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop { --bb-x: 6px; }9263.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { --bb-x: -6px; }9264@keyframes peach-chirp-happy-bob {9265  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9266  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9267}92689269/* Bird internal -------------------------------------------------------- */9270.peach-chirp-bird {9271  width: 108px;9272  height: 108px;9273  transform-origin: 50% 95%;9274}9275.peach-chirp-bird svg { width: 100%; height: 100%; overflow: visible; }92769277.peach-chirp-bird-body {9278  transform-origin: 50% 80%;9279  animation: peach-chirp-bird-bob 2.4s ease-in-out infinite;9280}9281@keyframes peach-chirp-bird-bob {9282  0%, 100% { transform: translateY(0) scale(1, 1); }9283  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9284}92859286.peach-chirp-bird-eye-group {9287  animation: peach-chirp-blink 5.2s steps(1, end) infinite;9288  transform-origin: center;9289  transform-box: fill-box;9290}9291@keyframes peach-chirp-blink {9292  0%, 92%, 96%, 100% { transform: scaleY(1); }9293  94%                { transform: scaleY(0.05); }9294}92959296/* Pose: chirping — beak opens, head bobs, aura blooms */9297.peach-chirp-bird-pose-chirping .peach-chirp-bird-body {9298  animation:9299    peach-chirp-bird-bob 2.4s ease-in-out infinite,9300    peach-chirp-squeeze 1.7s ease-in-out infinite;9301}9302@keyframes peach-chirp-squeeze {9303  0%, 70%, 100% { transform-origin: 50% 85%; }9304  78%           { transform: scale(1.04, 0.96) translateY(1px); }9305  86%           { transform: scale(0.98, 1.02); }9306}9307.peach-chirp-bird-pose-chirping .peach-chirp-bird-head-group {9308  animation: peach-chirp-head-bob 1.7s ease-in-out infinite;9309}9310@keyframes peach-chirp-head-bob {9311  0%, 70%, 100% { transform: translateY(0) rotate(0); }9312  78%           { transform: translateY(-3px) rotate(-4deg); }9313  86%           { transform: translateY(-1px) rotate(-2deg); }9314}9315.peach-chirp-bird-pose-chirping .peach-chirp-bird-beak {9316  animation: peach-chirp-beak-open 1.7s ease-in-out infinite;9317}9318@keyframes peach-chirp-beak-open {9319  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9320  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9321  86%           { transform: rotate(-6deg); }9322}9323.peach-chirp-bird-pose-chirping .peach-chirp-bird-aura {9324  animation: peach-chirp-aura 1.7s ease-in-out infinite;9325}9326@keyframes peach-chirp-aura {9327  0%, 100% { opacity: 0; }9328  50%      { opacity: 0.8; }9329}9330.peach-chirp-bird-pose-chirping .peach-chirp-bird-tail {9331  animation: peach-chirp-tail-twitch 1.7s ease-in-out infinite;9332  transform-origin: 100% 50%;9333}9334@keyframes peach-chirp-tail-twitch {9335  0%, 75%, 100% { transform: rotate(0); }9336  82%           { transform: rotate(-3deg) translateX(-1px); }9337}93389339/* Pose: attentive — head tilts toward partner */9340.peach-chirp-bird-pose-attentive .peach-chirp-bird-head-group {9341  animation: peach-chirp-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9342}9343@keyframes peach-chirp-head-tilt {9344  0%   { transform: rotate(0) translateY(0); }9345  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9346  100% { transform: rotate(-6deg); }9347}9348.peach-chirp-bird-pose-attentive .peach-chirp-bird-tail {9349  animation: peach-chirp-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9350  transform-origin: 100% 50%;9351}9352@keyframes peach-chirp-tail-cock {9353  0%   { transform: rotate(0); }9354  100% { transform: rotate(-4deg); }9355}93569357/* Pose: happy — wing flutter, tuft perk, tail wag */9358.peach-chirp-bird-pose-happy .peach-chirp-bird-wing {9359  transform-origin: 80% 60%;9360  animation: peach-chirp-wing-flutter 0.32s ease-in-out 5;9361}9362@keyframes peach-chirp-wing-flutter {9363  0%, 100% { transform: rotate(0) translateY(0); }9364  50%      { transform: rotate(-16deg) translateY(-2px); }9365}9366.peach-chirp-bird-pose-happy .peach-chirp-bird-tuft {9367  transform-origin: 0% 100%;9368  animation: peach-chirp-tuft-perk 0.4s ease-in-out 3;9369}9370@keyframes peach-chirp-tuft-perk {9371  0%, 100% { transform: rotate(0); }9372  50%      { transform: rotate(-15deg) translateY(-1px); }9373}9374.peach-chirp-bird-pose-happy .peach-chirp-bird-tail {9375  transform-origin: 100% 50%;9376  animation: peach-chirp-tail-wag 0.5s ease-in-out 4;9377}9378@keyframes peach-chirp-tail-wag {9379  0%, 100% { transform: rotate(0); }9380  25%      { transform: rotate(6deg); }9381  75%      { transform: rotate(-6deg); }9382}9383.peach-chirp-bird-pose-happy .peach-chirp-bird-head-group {9384  animation: peach-chirp-head-perk 0.5s ease-out;9385}9386@keyframes peach-chirp-head-perk {9387  0%   { transform: translateY(0); }9388  40%  { transform: translateY(-3px) rotate(2deg); }9389  100% { transform: translateY(0); }9390}93919392/* Pose: sad — body droops forward */9393.peach-chirp-bird-pose-sad .peach-chirp-bird-body {9394  transform: translateY(5px) rotate(-2deg);9395  animation: none;9396}9397.peach-chirp-bird-pose-sad .peach-chirp-bird-head-group {9398  transform: translateY(4px) rotate(8deg);9399}9400.peach-chirp-bird-pose-sad .peach-chirp-bird-tuft { transform: rotate(15deg) translateY(2px); }9401.peach-chirp-bird-pose-sad .peach-chirp-bird-tail { transform: rotate(8deg) translateY(2px); }94029403.peach-chirp-bird-pose-hidden { opacity: 0; }94049405/* Chirp arcs ----------------------------------------------------------- */9406.peach-chirp-arcs {9407  position: absolute;9408  top: 18px;9409  width: 96px;9410  height: 70px;9411  pointer-events: none;9412}9413.peach-chirp-arcs-right { right: -60px; }9414.peach-chirp-arcs-left  { left: -60px; transform: scaleX(-1); }9415.peach-chirp-arc {9416  position: absolute;9417  top: 50%;9418  left: 0;9419  width: 40px;9420  height: 40px;9421  margin-top: -20px;9422  border: 1.2px solid #f4d5a8;9423  border-color: transparent #f4d5a8 transparent transparent;9424  border-radius: 50%;9425  opacity: 0;9426  animation: peach-chirp-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9427}9428@keyframes peach-chirp-arc-expand {9429  0%   { transform: scale(0.4); opacity: 0; }9430  20%  { opacity: 0.9; }9431  100% { transform: scale(1.6); opacity: 0; }9432}94339434/* Flight wave ---------------------------------------------------------- */9435.peach-chirp-flight-track {9436  position: absolute;9437  inset: 32px 36px 38px 36px;9438  pointer-events: none;9439}9440.peach-chirp-flight-wave {9441  position: absolute;9442  top: 8px;9443  left: 76px;9444  right: 76px;9445  height: 60px;9446  width: auto;9447  opacity: 0;9448  transition: opacity 0.15s ease;9449  stroke: #f4d5a8;9450  fill: none;9451}9452.peach-chirp-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9453.peach-chirp-flight-wave.is-visible { opacity: 1; }9454.peach-chirp-flight-path,9455.peach-chirp-flight-path-2 {9456  stroke-dasharray: 240;9457  stroke-dashoffset: 240;9458  stroke-linecap: round;9459  fill: none;9460}9461.peach-chirp-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9462.peach-chirp-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9463.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path {9464  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9465}9466.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path-2 {9467  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9468}9469@keyframes peach-chirp-fly {9470  0%   { stroke-dashoffset: 240; opacity: 0; }9471  20%  { opacity: 1; }9472  100% { stroke-dashoffset: -120; opacity: 0; }9473}94749475/* Connection dot ------------------------------------------------------- */9476.peach-chirp-dot {9477  position: absolute;9478  top: 50%; left: 50%;9479  transform: translate(-50%, -50%);9480  width: 40px; height: 40px;9481  opacity: 0;9482  pointer-events: none;9483  transition: opacity 0.3s ease;9484  color: var(--peach-accent);9485}9486.peach-chirp-dot.is-visible { opacity: 1; }9487.peach-chirp-dot-glow {9488  position: absolute; top: 50%; left: 50%;9489  transform: translate(-50%, -50%);9490  width: 38px; height: 38px;9491  border-radius: 50%;9492  filter: blur(10px);9493  opacity: 0.55;9494  background: var(--peach-accent);9495  animation: peach-chirp-dot-bloom 1.4s ease-out;9496}9497.peach-chirp-dot-core {9498  position: absolute; top: 50%; left: 50%;9499  transform: translate(-50%, -50%);9500  width: 8px; height: 8px;9501  border-radius: 50%;9502  background: var(--peach-accent);9503  box-shadow: 0 0 12px currentColor;9504  animation: peach-chirp-dot-core 1.4s ease-out;9505}9506.peach-chirp-dot-ring {9507  position: absolute; top: 50%; left: 50%;9508  width: 60px; height: 60px;9509  transform: translate(-50%, -50%);9510  animation: peach-chirp-dot-ring 1.4s linear;9511  stroke: var(--peach-accent);9512}9513@keyframes peach-chirp-dot-bloom {9514  0%   { width: 4px; height: 4px; opacity: 0; }9515  35%  { width: 60px; height: 60px; opacity: 0.7; }9516  100% { width: 38px; height: 38px; opacity: 0.55; }9517}9518@keyframes peach-chirp-dot-core {9519  0%   { width: 0; height: 0; }9520  35%  { width: 12px; height: 12px; }9521  100% { width: 8px; height: 8px; }9522}9523@keyframes peach-chirp-dot-ring {9524  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9525  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9526  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9527}95289529/* Motes — drift upward across the stage */9530.peach-chirp-motes {9531  position: absolute;9532  inset: 0;9533  pointer-events: none;9534}9535.peach-chirp-mote {9536  position: absolute;9537  width: 2px; height: 2px;9538  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9539  border-radius: 50%;9540  bottom: 32px;9541  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9542  opacity: 0;9543  animation: peach-chirp-mote-drift 6s linear infinite;9544  animation-delay: calc(var(--mote-i, 0) * 0.7s);9545}9546@keyframes peach-chirp-mote-drift {9547  0%   { transform: translateY(0); opacity: 0; }9548  10%  { opacity: 0.6; }9549  90%  { opacity: 0.1; }9550  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9551}95529553/* Status copy ---------------------------------------------------------- */9554.peach-chirp-copy-host {9555  margin: 4px 4px 10px;9556  text-align: center;9557  min-height: 50px;9558}9559.peach-chirp-copy {9560  animation: peach-chirp-copy-in 0.35s ease both;9561}9562@keyframes peach-chirp-copy-in {9563  from { opacity: 0; transform: translateY(4px); }9564  to   { opacity: 1; transform: translateY(0); }9565}9566.peach-chirp-headline {9567  font-family: var(--font-display, Georgia, serif);9568  font-style: italic;9569  font-size: 20px;9570  font-weight: 500;9571  line-height: 1.2;9572  letter-spacing: 0.005em;9573  color: var(--peach-t0);9574  margin-bottom: 6px;9575}9576.peach-chirp-copy-listening .peach-chirp-headline,9577.peach-chirp-copy-chirping .peach-chirp-headline,9578.peach-chirp-copy-idle .peach-chirp-headline {9579  font-family: inherit;9580  font-style: normal;9581  font-weight: 500;9582  font-size: 15px;9583  color: var(--peach-t0);9584  letter-spacing: 0;9585}9586.peach-chirp-copy-paired .peach-chirp-headline {9587  color: var(--peach-t0);9588  font-weight: 600;9589}9590.peach-chirp-sub {9591  font-size: 12.5px;9592  line-height: 1.45;9593  color: var(--peach-t1);9594  max-width: 280px;9595  margin: 0 auto;9596  text-wrap: pretty;9597}95989599/* Status action -------------------------------------------------------- */9600.peach-chirp-action {9601  margin: 2px 4px 10px;9602  margin-top: auto;9603  display: flex;9604  flex-direction: column;9605  gap: 8px;9606}9607.peach-chirp-mic-notice {9608  margin: 0;9609  font-size: 0.625rem;9610  color: var(--peach-t2);9611  line-height: 1.4;9612}9613.peach-chirp-action-waiting {9614  display: flex;9615  align-items: center;9616  justify-content: space-between;9617  gap: 12px;9618}9619.peach-chirp-cancel {9620  min-width: 96px;9621}9622.peach-chirp-listening {9623  display: inline-flex; align-items: center; gap: 4px;9624  font-family: var(--peach-mono, ui-monospace, monospace);9625  font-size: 9.5px;9626  text-transform: uppercase;9627  letter-spacing: 0.12em;9628  color: var(--peach-t1);9629  padding: 8px 10px;9630}9631.peach-chirp-listen-dot {9632  width: 4px; height: 4px;9633  border-radius: 50%;9634  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9635  animation: peach-chirp-listen-pulse 1.2s ease-in-out infinite;9636}9637.peach-chirp-listen-dot:nth-child(2) { animation-delay: 0.2s; }9638.peach-chirp-listen-dot:nth-child(3) { animation-delay: 0.4s; }9639.peach-chirp-listen-label { margin-left: 6px; }9640@keyframes peach-chirp-listen-pulse {9641  0%, 100% { opacity: 0.25; transform: scale(0.9); }9642  50%      { opacity: 1;     transform: scale(1.15); }9643}96449645.peach-chirp-action-handshake {9646  display: flex;9647  flex-direction: column;9648  align-items: center;9649  gap: 8px;9650  padding: 8px 4px;9651}9652.peach-chirp-meter {9653  width: 100%;9654  max-width: 280px;9655  height: 2px;9656  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9657  border-radius: 2px;9658  position: relative;9659  overflow: hidden;9660}9661.peach-chirp-meter-bar {9662  position: absolute;9663  top: 0; bottom: 0;9664  width: 30%;9665  left: -30%;9666  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9667  animation: peach-chirp-meter-sweep 1.4s ease-in-out infinite;9668}9669@keyframes peach-chirp-meter-sweep {9670  0%   { left: -30%; }9671  100% { left: 100%; }9672}9673.peach-chirp-meter-label {9674  font-family: var(--peach-mono, ui-monospace, monospace);9675  font-size: 9.5px;9676  text-transform: uppercase;9677  letter-spacing: 0.14em;9678  color: var(--peach-t1);9679}96809681.peach-chirp-action-paired {9682  display: flex;9683  align-items: center;9684  gap: 10px;9685}9686.peach-chirp-device-confirm {9687  flex: 1;9688  display: inline-flex;9689  align-items: center;9690  gap: 8px;9691  padding: 9px 10px 9px 12px;9692  border-radius: 10px;9693  background: color-mix(in srgb, #76b6e8 12%, transparent);9694  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9695  font-size: 12.5px;9696  color: var(--peach-t0);9697  min-width: 0;9698}9699.peach-chirp-device-confirm-glyph {9700  display: inline-flex;9701  color: #76b6e8;9702}9703.peach-chirp-device-confirm-name {9704  flex: 1;9705  overflow: hidden;9706  text-overflow: ellipsis;9707  white-space: nowrap;9708}9709.peach-chirp-device-confirm-trust {9710  font-family: var(--peach-mono, ui-monospace, monospace);9711  font-size: 9.5px;9712  text-transform: uppercase;9713  letter-spacing: 0.1em;9714  color: #76b6e8;9715  padding: 2px 6px;9716  border-radius: 4px;9717  background: color-mix(in srgb, #76b6e8 14%, transparent);9718}9719.peach-chirp-done {9720  min-width: 80px;9721}9722.peach-chirp-retry {9723  align-self: center;9724  display: block;9725  margin: 6px auto 0;9726  min-width: 120px;9727}9728.peach-chirp-mic-help {9729  font-size: 12px;9730  color: var(--peach-t1);9731  text-align: center;9732  max-width: 320px;9733  margin: 0 auto;9734}97359736/* Rest state — bird stage at idle pose, primary CTA + paired list */9737.peach-chirp-pair[data-phase="idle"] .peach-chirp-stage {9738  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9739  height: 160px;9740}9741.peach-chirp-pair-start {9742  width: 100%;9743  display: inline-flex;9744  align-items: center;9745  justify-content: center;9746  gap: 8px;9747  padding: 11px 14px;9748  border-radius: 10px;9749  background: var(--peach-accent);9750  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9751  color: #1a0905;9752  font-family: inherit;9753  font-size: 13px;9754  font-weight: 600;9755  letter-spacing: 0.01em;9756  cursor: pointer;9757  transition: filter 0.15s ease, transform 0.1s ease;9758}9759.peach-chirp-pair-start:hover { filter: brightness(1.08); }9760.peach-chirp-pair-start:active { transform: translateY(1px); }97619762.peach-chirp-paired-section {9763  margin-top: 14px;9764  display: flex;9765  flex-direction: column;9766  gap: 8px;9767}9768.peach-chirp-paired-heading {9769  margin: 0;9770  font-family: var(--peach-mono, ui-monospace, monospace);9771  font-size: 10px;9772  font-weight: 500;9773  letter-spacing: 0.14em;9774  text-transform: uppercase;9775  color: var(--peach-t1);9776}97779778/* Footer --------------------------------------------------------------- */9779.peach-chirp-foot {9780  margin: 10px -4px -2px;9781  margin-top: auto;9782}9783.peach-chirp-foot-divider {9784  height: 1px;9785  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9786  margin-bottom: 10px;9787}9788.peach-chirp-foot-text {9789  font-size: 11px;9790  line-height: 1.5;9791  color: var(--peach-t1);9792  text-align: center;9793  padding: 0 4px;9794  text-wrap: pretty;9795}97969797/* Screen-reader-only live region. Kept off the visual flow but read by9798   assistive tech as the pairing phase advances. */9799.peach-sr-only {9800  position: absolute;9801  width: 1px; height: 1px;9802  padding: 0; margin: -1px;9803  overflow: hidden;9804  clip: rect(0, 0, 0, 0);9805  white-space: nowrap;9806  border: 0;9807}98089809/* Reduced motion — stage simplifies to opacity transitions only */9810@media (prefers-reduced-motion: reduce) {9811  .peach-chirp-bird-body,9812  .peach-chirp-bird-head-group,9813  .peach-chirp-bird-beak,9814  .peach-chirp-bird-wing,9815  .peach-chirp-bird-tuft,9816  .peach-chirp-bird-tail,9817  .peach-chirp-bird-eye-group,9818  .peach-chirp-bird-aura,9819  .peach-chirp-arc,9820  .peach-chirp-flight-path,9821  .peach-chirp-flight-path-2,9822  .peach-chirp-dot-glow,9823  .peach-chirp-dot-core,9824  .peach-chirp-dot-ring,9825  .peach-chirp-mote,9826  .peach-chirp-meter-bar,9827  .peach-chirp-listen-dot,9828  .peach-chirp-bird-slot,9829  .peach-chirp-bird-slot-mobile {9830    animation: none !important;9831    transition: opacity 0.2s linear !important;9832  }9833}98349835/* ─────────────────────────────────────────────────────────────────9836   Settings → Sync surface (v3 ChirpSync). Wraps the same bird9837   animation used by the pairing flow with a paired-devices list and9838   the "Pair a device" CTA.9839   ───────────────────────────────────────────────────────────────── */9840.peach-chirp-settings {9841  position: absolute;9842  inset: 0;9843  z-index: 3;9844  display: flex;9845  flex-direction: column;9846  gap: 18px;9847  padding: 14px 12px 12px;9848  width: 100%;9849  box-sizing: border-box;9850  overflow-y: auto;9851  overflow-x: hidden;9852  /* Same warm Chirp surface as the pairing screen — unifies the two views. */9853  background:9854    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9855    var(--peach-bg);9856  color: var(--peach-t0);9857  isolation: isolate;9858  /* Hide native scrollbar — content fits 99% of the time and a chunky9859     gutter ruins the surface. */9860  scrollbar-width: none;9861  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9862}9863.peach-chirp-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9864.peach-chirp-settings::before {9865  content: '';9866  position: absolute;9867  inset: 0;9868  pointer-events: none;9869  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9870  z-index: 0;9871}9872.peach-chirp-settings > * { position: relative; z-index: 1; }98739874.peach-chirp-settings--pairing {9875  padding: 0;9876  align-items: stretch;9877  justify-content: stretch;9878  background: none;9879  isolation: auto;9880}9881.peach-chirp-settings--pairing::before { display: none; }98829883.peach-chirp-settings-header {9884  display: flex;9885  align-items: center;9886  gap: 10px;9887}9888.peach-chirp-settings-title {9889  margin: 0;9890  font-family: var(--font-display, Georgia, serif);9891  font-style: italic;9892  font-size: 24px;9893  font-weight: 500;9894  line-height: 1;9895  color: var(--peach-t0);9896  letter-spacing: 0.005em;9897}9898.peach-chirp-settings-section {9899  margin: 6px 0 -4px;9900  font-size: 11px;9901  font-weight: 600;9902  letter-spacing: 0.08em;9903  text-transform: uppercase;9904  color: var(--peach-text-muted);9905}9906.peach-chirp-settings-error {9907  font-size: 12px;9908  padding: 8px 10px;9909  border-radius: 8px;9910  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);9911  color: var(--peach-text);9912}9913.peach-chirp-settings-footer {9914  margin-top: auto;9915  padding-top: 18px;9916  font-size: 11.5px;9917  line-height: 1.5;9918  color: var(--peach-text-muted);9919  text-align: center;9920}99219922/* Hero card shown when no devices are paired yet. */9923.peach-chirp-hero {9924  display: flex;9925  flex-direction: column;9926  align-items: center;9927  gap: 12px;9928  padding: 20px 12px 8px;9929  text-align: center;9930}9931.peach-chirp-hero-svg {9932  display: block;9933  max-width: 100%;9934  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));9935}9936.peach-chirp-hero-headline {9937  margin: 0;9938  font-family: var(--font-display, Georgia, serif);9939  font-style: italic;9940  font-size: 20px;9941  font-weight: 500;9942  line-height: 1.2;9943  letter-spacing: 0.005em;9944  color: var(--peach-t0);9945}9946.peach-chirp-hero-sub {9947  margin: 0;9948  font-size: 13px;9949  line-height: 1.5;9950  color: var(--peach-t1);9951  max-width: 320px;9952  text-wrap: pretty;9953}99549955.peach-chirp-pair-cta {9956  display: flex;9957  justify-content: center;9958  padding: 4px 0 6px;9959}9960.peach-chirp-pair-button {9961  display: inline-flex;9962  align-items: center;9963  gap: 8px;9964  min-width: 220px;9965  justify-content: center;9966}9967.peach-chirp-pair-button-icon {9968  flex: 0 0 auto;9969}99709971/* Paired devices list. Roomy rows that look at home next to the rest9972   of Settings; stale rows get a soft warm-warning border tint. */9973.peach-chirp-device-list {9974  list-style: none;9975  margin: 0;9976  padding: 0;9977  display: flex;9978  flex-direction: column;9979  gap: 8px;9980}9981.peach-chirp-device-row {9982  display: flex;9983  align-items: center;9984  gap: 12px;9985  padding: 12px;9986  border-radius: 10px;9987  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9988  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);9989}9990.peach-chirp-device-row[data-stale="true"] {9991  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);9992}9993.peach-chirp-device-icon {9994  width: 32px;9995  height: 32px;9996  display: flex;9997  align-items: center;9998  justify-content: center;9999  border-radius: 8px;10000  color: var(--peach-text);10001  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);10002}10003.peach-chirp-device-info {10004  flex: 1;10005  display: flex;10006  flex-direction: column;10007  gap: 2px;10008  min-width: 0;10009}10010.peach-chirp-device-name {10011  font-size: 14px;10012  font-weight: 600;10013  color: var(--peach-text);10014  overflow: hidden;10015  text-overflow: ellipsis;10016  white-space: nowrap;10017}10018.peach-chirp-device-meta {10019  font-size: 11.5px;10020  color: var(--peach-text-muted);10021  display: flex;10022  flex-wrap: wrap;10023  align-items: center;10024  gap: 8px;10025}10026.peach-chirp-device-badge {10027  font-size: 10.5px;10028  font-weight: 500;10029  letter-spacing: 0.02em;10030  padding: 2px 6px;10031  border-radius: 999px;10032  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);10033  color: var(--peach-text);10034}10035.peach-chirp-device-stale {10036  font-size: 10.5px;10037  font-weight: 500;10038  color: var(--peach-warn, #d29257);10039}10040.peach-chirp-device-remove {10041  flex: 0 0 auto;10042  color: var(--peach-text-muted);10043}10044.peach-chirp-device-remove:hover {10045  color: var(--peach-danger, #c25b4a);10046}10047.peach-chirp-unpair-confirm {10048  display: flex;10049  gap: 6px;10050  align-items: center;10051}1005210053/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */10054.peach-chirp-pro-card {10055  position: relative;10056  margin: 18px 12px;10057  padding: 18px 20px 22px;10058  border-radius: 22px;10059  background:10060    radial-gradient(140% 90% at 50% 0%,10061      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,10062      transparent 60%),10063    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10064  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);10065  box-shadow:10066    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,10067    0 18px 40px -24px rgba(0, 0, 0, 0.45);10068  display: flex;10069  flex-direction: column;10070  align-items: center;10071  gap: 10px;10072  text-align: center;10073  overflow: hidden;10074}10075.peach-chirp-pro-stage {10076  position: relative;10077  width: 220px;10078  height: 140px;10079  display: flex;10080  align-items: flex-end;10081  justify-content: center;10082  margin-bottom: 2px;10083}10084.peach-chirp-pro-bird-slot {10085  width: 140px;10086  height: 132px;10087  display: flex;10088  align-items: flex-end;10089  justify-content: center;10090  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));10091}10092.peach-chirp-pro-bird-slot .peach-chirp-bird {10093  width: 100%;10094  height: 100%;10095}10096.peach-chirp-pro-bird-slot .peach-chirp-bird svg {10097  width: 100%;10098  height: 100%;10099  overflow: visible;10100}10101.peach-chirp-pro-chirp {10102  position: absolute;10103  top: 14px;10104  right: 8px;10105  width: 96px;10106  height: 80px;10107  color: var(--peach-accent);10108  animation: peach-chirp-pulse 2.6s ease-in-out infinite;10109  transform-origin: 0% 50%;10110  pointer-events: none;10111}10112@keyframes peach-chirp-pulse {10113  0%, 100% { opacity: 0.35; transform: translateX(0) scale(0.92); }10114  45%      { opacity: 1;    transform: translateX(2px) scale(1); }10115  70%      { opacity: 0.6;  transform: translateX(4px) scale(1.04); }10116}10117@media (prefers-reduced-motion: reduce) {10118  .peach-chirp-pro-chirp { animation: none; opacity: 0.7; }10119}10120.peach-chirp-pro-headline {10121  margin: 4px 0 0;10122  font-family: var(--font-display, "Cormorant Garamond", serif);10123  font-style: italic;10124  font-size: 19px;10125  font-weight: 500;10126  letter-spacing: 0.01em;10127  color: var(--peach-t0);10128  max-width: 280px;10129  line-height: 1.25;10130}10131.peach-chirp-pro-body {10132  margin: 0;10133  font-size: 13px;10134  line-height: 1.55;10135  color: var(--peach-t1);10136  max-width: 300px;10137}10138.peach-chirp-pro-cta {10139  margin-top: 4px;10140}10141.peach-chirp-pro-foot {10142  margin: 2px 0 0;10143  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10144  font-size: 0.625rem;10145  letter-spacing: 0.08em;10146  text-transform: uppercase;10147  color: var(--peach-t2);10148  opacity: 0.75;10149}1015010151/* Shell border and shadow in light mode: match dark mode's near-invisible10152   border weight so the popup frame looks the same in both themes. */10153.light .peach-shell,10154.light .peach-screen {10155  border-color: rgba(26, 18, 8, 0.07);10156  box-shadow:10157    0 2px 8px rgba(80, 56, 32, 0.08),10158    0 14px 48px rgba(80, 56, 32, 0.10),10159    0 0 0 1px rgba(26, 18, 8, 0.04);10160}