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/* Two classes so this beats the shared .peach-screen.lock-screen--vault-stage7040   rule (same element) without loosening the unlock/restore screens. The7041   create-vault screen is the only vault-stage view tall enough to overflow7042   the 520px popup, so its spacing is tuned to fit header → card → restore →7043   recovery warning with nothing clipped. */7044.peach-screen.peach-newvault {7045  position: relative;7046  display: flex;7047  flex-direction: column;7048  gap: 12px;7049  padding: 14px 16px 12px;7050  overflow: hidden;7051}70527053/* Suppress the warm-blob ambient art inherited from .lock-screen — the7054   new vault card now carries the visual weight. */7055.peach-newvault::before {7056  content: none;7057}70587059.peach-newvault-header {7060  position: relative;7061  z-index: 2;7062  display: flex;7063  align-items: center;7064  gap: 10px;7065  margin-bottom: 2px;7066}70677068.peach-newvault-back {7069  display: inline-flex;7070  align-items: center;7071  gap: 4px;7072  background: transparent;7073  border: none;7074  color: var(--peach-t2);7075  font-family: "IBM Plex Mono", monospace;7076  font-size: 0.625rem;7077  letter-spacing: 0.06em;7078  cursor: pointer;7079  padding: 4px 6px;7080  border-radius: 6px;7081  transition: color 120ms ease, background 120ms ease;7082}70837084.peach-newvault-back:hover {7085  color: var(--peach-t0);7086  background: rgba(240, 232, 216, 0.04);7087}70887089.peach-newvault-mark {7090  position: absolute;7091  right: -12px;7092  top: 6px;7093  width: 110px;7094  height: 110px;7095  pointer-events: none;7096  opacity: 0.10;7097  filter: saturate(0.9);7098  z-index: 0;7099}7100.peach-newvault-mark-art {7101  width: 100%;7102  height: 100%;7103}7104.peach-newvault-mark-art path:nth-child(1) {7105  fill: rgba(123, 144, 96, 0.88);7106}7107.peach-newvault-mark-art path:nth-child(2) {7108  stroke: rgba(94, 122, 66, 0.95);7109}71107111.peach-newvault-card {7112  position: relative;7113  z-index: 1;7114  display: flex;7115  flex-direction: column;7116  gap: 8px;7117  padding: 16px 20px 14px;7118  border-radius: 16px;7119  border: 1px solid var(--peach-t3);7120  background:7121    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));7122  backdrop-filter: blur(3px);7123  -webkit-backdrop-filter: blur(3px);7124  box-shadow:7125    inset 0 1px 0 rgba(240, 232, 216, 0.04),7126    0 12px 28px rgba(0, 0, 0, 0.12);7127  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;7128}71297130.peach-newvault-headline {7131  margin: 0;7132  font-family: var(--font-display);7133  font-style: italic;7134  font-weight: 400;7135  font-size: 24px;7136  line-height: 1.05;7137  color: var(--peach-t0);7138  white-space: pre-line;7139}71407141.peach-newvault-divider {7142  margin: 2px 0 4px;7143  border: 0;7144  border-top: 1px solid var(--peach-t3);7145  width: 100%;7146}71477148.peach-newvault-field {7149  display: flex;7150  flex-direction: column;7151  gap: 4px;7152}71537154.peach-newvault-label-row {7155  display: flex;7156  align-items: center;7157  justify-content: space-between;7158}71597160/* Monospace input scaled to the card. Replaces the 22px unlock-input7161   so the placeholder no longer overflows and the field reads as part7162   of the same surface as the body copy. */7163.peach-newvault-input {7164  font-size: 0.875rem;7165  letter-spacing: 0.18em;7166  padding: 8px 0;7167}7168.peach-newvault-input::placeholder {7169  letter-spacing: 0.18em;7170  color: var(--peach-t2);7171}71727173.peach-newvault-hint {7174  margin: 2px 0 0;7175  font-family: "IBM Plex Mono", monospace;7176  font-size: 0.625rem;7177  color: var(--peach-t2);7178  letter-spacing: 0.04em;7179}71807181.peach-newvault-submit {7182  margin-top: 4px;7183}71847185.peach-newvault-warning {7186  display: flex;7187  align-items: flex-start;7188  gap: 8px;7189  margin: 2px 0 0;7190  padding-top: 8px;7191  border-top: 1px dashed var(--peach-t3);7192  font-size: 0.75rem;7193  line-height: 1.45;7194  color: var(--peach-t1);7195}71967197.peach-newvault-warning-icon {7198  color: var(--peach-accent);7199  font-size: 0.8125rem;7200  line-height: 1.4;7201  flex: 0 0 auto;7202}72037204/* Restore options sit inside the card, directly under "create vault", so7205   they are always reachable without scrolling. The top divider mirrors the7206   warning's so the choice reads as a deliberate fork, not a footnote. */7207.peach-newvault-restore {7208  position: relative;7209  z-index: 1;7210  display: flex;7211  flex-direction: column;7212  gap: 4px;7213  margin-top: 4px;7214  padding-top: 10px;7215  border-top: 1px dashed var(--peach-t3);7216}72177218/* Settings body — warm accent gradient gives the glass something to blur against */7219.peach-settings-body {7220  background:7221    radial-gradient(7222      ellipse at 30% 20%,7223      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7224      transparent 60%7225    );7226}72277228/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7229/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7230 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7231 * (replacing the vault from a backup file) and "hazard" for actions that7232 * are absolutely irreversible (Panic). Both use the same card scaffold so7233 * they read as a pair, but the colour family signals the severity at a7234 * glance — yellow for caution, red for don't.7235 */7236.peach-danger-card {7237  --danger-tint: 235, 158, 52; /* amber */7238  display: flex;7239  flex-direction: column;7240  gap: 8px;7241  padding: 14px;7242  margin-top: 10px;7243  border-radius: 12px;7244  border: 1px solid rgba(var(--danger-tint), 0.32);7245  background:7246    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7247    rgba(var(--danger-tint), 0.04);7248  box-shadow:7249    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7250    0 0 24px rgba(var(--danger-tint), 0.04);7251  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7252}72537254.peach-danger-card:hover {7255  border-color: rgba(var(--danger-tint), 0.55);7256  box-shadow:7257    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7258    0 0 36px rgba(var(--danger-tint), 0.10);7259}72607261.peach-danger-card--hazard {7262  --danger-tint: 220, 38, 38; /* red */7263}72647265.peach-danger-card-head {7266  display: flex;7267  align-items: center;7268  gap: 10px;7269}72707271.peach-danger-card-glyph {7272  width: 28px;7273  height: 28px;7274  flex-shrink: 0;7275  display: flex;7276  align-items: center;7277  justify-content: center;7278  border-radius: 8px;7279  background: rgba(var(--danger-tint), 0.12);7280  color: rgba(var(--danger-tint), 0.95);7281  font-size: 1rem;7282  line-height: 1;7283}72847285.peach-danger-card-title {7286  margin: 0;7287  font-size: 0.8125rem;7288  font-weight: 600;7289  color: rgba(var(--danger-tint), 0.92);7290  letter-spacing: 0.01em;7291}72927293.peach-danger-card-copy {7294  margin: 0;7295  font-size: 0.6875rem;7296  line-height: 1.5;7297  color: var(--peach-t2);7298}72997300.peach-danger-card-button {7301  width: 100%;7302  padding: 9px;7303  margin-top: 4px;7304  background: transparent;7305  border: 1px solid rgba(var(--danger-tint), 0.45);7306  border-radius: 8px;7307  color: rgba(var(--danger-tint), 0.9);7308  font-size: 0.75rem;7309  font-weight: 500;7310  letter-spacing: 0.02em;7311  cursor: pointer;7312  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7313}73147315.peach-danger-card-button:hover {7316  background: rgba(var(--danger-tint), 0.10);7317  border-color: rgba(var(--danger-tint), 0.75);7318  color: rgb(var(--danger-tint));7319}73207321/* ── Panic flow (three-step destruction) ───────────────────────────────── */7322.peach-panic {7323  display: flex;7324  flex-direction: column;7325  flex: 1;7326  min-height: 0;7327  padding: 28px 20px 20px;7328  gap: 18px;7329  overflow-y: auto;7330  scrollbar-width: none;7331  -ms-overflow-style: none;7332}73337334.peach-panic::-webkit-scrollbar { display: none; }73357336.peach-panic-step2 {7337  background: rgba(220, 38, 38, 0.04);7338}73397340.peach-panic-step3 {7341  position: relative;7342  background: #0f0505;7343  color: #ffffff;7344  overflow: hidden;7345}73467347.peach-panic-rune-bg {7348  position: absolute;7349  inset: 0;7350  opacity: 0.22;7351  pointer-events: none;7352  overflow: hidden;7353}73547355.peach-panic-rune-bg canvas {7356  width: 100% !important;7357  height: 100% !important;7358}73597360.peach-panic-icon {7361  font-size: 32px;7362  color: rgb(220, 38, 38);7363  line-height: 1;7364}73657366.peach-panic-title {7367  margin: 0;7368  font-size: 18px;7369  font-weight: 500;7370  color: var(--peach-t1);7371}73727373.peach-panic-title--severe {7374  font-size: 20px;7375  font-weight: 700;7376  color: rgb(220, 38, 38);7377}73787379.peach-panic-body {7380  margin: 0;7381  font-size: 0.8125rem;7382  line-height: 1.55;7383  color: var(--peach-t2);7384}73857386.peach-panic-body--severe {7387  color: rgba(220, 38, 38, 0.85);7388}73897390.peach-panic-body--final {7391  font-size: 1rem;7392  font-weight: 700;7393  color: rgb(255, 80, 80);7394  line-height: 1.4;7395}73967397.peach-panic-body--final-intro {7398  font-size: 1rem;7399  color: #ffffff;7400  font-weight: 400;7401}74027403.peach-panic-divider {7404  height: 1px;7405  background: rgba(255, 255, 255, 0.08);7406  margin: 4px 0;7407}74087409.peach-panic-confirm-input {7410  width: 100%;7411  padding: 10px 12px;7412  background: rgba(255, 255, 255, 0.02);7413  border: 1px solid rgba(220, 38, 38, 0.4);7414  border-radius: 8px;7415  color: var(--peach-t1);7416  font-family: "IBM Plex Mono", monospace;7417  font-size: 0.875rem;7418  letter-spacing: 0.12em;7419  text-transform: uppercase;7420}74217422.peach-panic-confirm-input:focus {7423  outline: none;7424  border-color: rgb(220, 38, 38);7425}74267427.peach-panic-confirm-input--match {7428  border-color: rgb(220, 38, 38);7429  color: rgb(220, 38, 38);7430}74317432.peach-panic-confirm-label {7433  font-size: 0.6875rem;7434  color: var(--peach-t2);7435  margin: 0 0 -8px;7436  letter-spacing: 0.06em;7437}74387439.peach-panic-actions {7440  display: flex;7441  flex-direction: column;7442  gap: 10px;7443  margin-top: auto;7444}74457446.peach-panic-button {7447  width: 100%;7448  padding: 12px;7449  border-radius: 8px;7450  font-size: 0.8125rem;7451  cursor: pointer;7452  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7453}74547455.peach-panic-button--primary {7456  background: var(--peach-accent);7457  border: 1px solid var(--peach-accent);7458  color: #ffffff;7459  font-weight: 600;7460}74617462.peach-panic-button--primary:hover {7463  background: color-mix(in srgb, var(--peach-accent) 88%, white);7464}74657466.peach-panic-button--danger {7467  background: rgb(220, 38, 38);7468  border: 1px solid rgb(220, 38, 38);7469  color: #ffffff;7470  font-weight: 600;7471}74727473.peach-panic-button--danger:disabled {7474  opacity: 0.35;7475  cursor: not-allowed;7476}74777478.peach-panic-button--ghost {7479  background: transparent;7480  border: 1px solid rgba(255, 255, 255, 0.18);7481  color: var(--peach-t2);7482}74837484.peach-panic-button--ghost:hover {7485  border-color: rgba(255, 255, 255, 0.32);7486  color: var(--peach-t1);7487}74887489.peach-panic-link {7490  background: transparent;7491  border: none;7492  padding: 4px 0;7493  color: rgba(220, 38, 38, 0.65);7494  font-size: 0.75rem;7495  cursor: pointer;7496  text-align: left;7497  text-decoration: underline;7498  text-underline-offset: 3px;7499}75007501.peach-panic-link:hover {7502  color: rgb(220, 38, 38);7503}75047505.peach-panic-bar {7506  background: rgb(220, 38, 38);7507  padding: 16px 20px;7508  margin: -28px -20px 0;7509  text-align: center;7510  font-size: 0.8125rem;7511  font-weight: 700;7512  letter-spacing: 0.12em;7513  color: #ffffff;7514}75157516.peach-panic-final-button {7517  width: 100%;7518  padding: 14px;7519  background: rgb(220, 38, 38);7520  border: none;7521  border-radius: 8px;7522  color: #ffffff;7523  font-size: 0.875rem;7524  font-weight: 700;7525  letter-spacing: 0.08em;7526  text-transform: uppercase;7527  cursor: pointer;7528  animation: peach-panic-pulse 2s ease-in-out infinite;7529}75307531.peach-settings-license {7532  margin-top: 10px;7533  padding-top: 10px;7534  border-top: 1px solid var(--peach-t3);7535}75367537.peach-settings-label {7538  font-size: 0.625rem;7539  letter-spacing: 0.08em;7540  color: var(--peach-t3);7541  display: block;7542  margin-bottom: 6px;7543}75447545.peach-settings-license-row {7546  display: flex;7547  align-items: center;7548  justify-content: space-between;7549  gap: 8px;7550}75517552.peach-settings-license-key {7553  font-family: 'IBM Plex Mono', monospace;7554  font-size: 0.75rem;7555  color: var(--peach-t0);7556  letter-spacing: 0.04em;7557  word-break: break-all;7558  flex: 1;7559  min-width: 0;7560}75617562.peach-settings-license-key--masked {7563  font-family: 'IBM Plex Mono', monospace;7564  font-size: 0.6rem;7565  color: var(--peach-t1);7566  letter-spacing: 0.18em;7567  user-select: none;7568}75697570.peach-settings-license-actions {7571  display: flex;7572  align-items: center;7573  gap: 2px;7574  flex-shrink: 0;7575}75767577.peach-settings-license-copy {7578  font-size: 0.6875rem;7579  color: var(--peach-accent);7580  background: transparent;7581  border: none;7582  cursor: pointer;7583  padding: 4px 8px;7584  border-radius: 4px;7585  flex-shrink: 0;7586  transition: opacity 150ms ease;7587}75887589.peach-settings-license-copy:hover {7590  opacity: 0.75;7591}75927593.peach-settings-license-toggle {7594  display: flex;7595  align-items: center;7596  justify-content: center;7597  background: transparent;7598  border: none;7599  cursor: pointer;7600  padding: 4px 6px;7601  border-radius: 4px;7602  color: var(--peach-t2);7603  transition: color 150ms ease;7604}76057606.peach-settings-license-toggle:hover {7607  color: var(--peach-t1);7608}76097610@keyframes peach-panic-pulse {7611  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7612  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7613}76147615[data-motion="reduce"] .peach-panic-final-button {7616  animation: none;7617}76187619/* Vault History — Settings → Vault sub-view */76207621.peach-history-list {7622  border: 1px solid var(--peach-border);7623  border-radius: 8px;7624  overflow: hidden;7625  margin: 8px 0 4px;7626}76277628.peach-history-row {7629  display: flex;7630  align-items: center;7631  justify-content: space-between;7632  padding: 9px 12px;7633  gap: 10px;7634  border-bottom: 1px solid var(--peach-border);7635}76367637.peach-history-row:last-child {7638  border-bottom: none;7639}76407641.peach-history-meta {7642  display: flex;7643  flex-direction: column;7644  gap: 2px;7645  min-width: 0;7646  flex: 1;7647}76487649.peach-history-time {7650  font-size: 0.75rem;7651  font-family: 'IBM Plex Mono', ui-monospace, monospace;7652  color: var(--peach-t0);7653  white-space: nowrap;7654  overflow: hidden;7655  text-overflow: ellipsis;7656}76577658.peach-history-sub {7659  font-size: 0.625rem;7660  color: var(--peach-t2);7661  letter-spacing: 0.06em;7662  text-transform: uppercase;7663  white-space: nowrap;7664  overflow: hidden;7665  text-overflow: ellipsis;7666}76677668.peach-history-btn {7669  flex-shrink: 0;7670  white-space: nowrap;7671  min-width: 56px;7672  text-align: center;7673}76747675.peach-history-btn.is-busy {7676  opacity: 0.65;7677}76787679.peach-history-footer {7680  font-size: 0.625rem;7681  color: var(--peach-t3);7682  letter-spacing: 0.05em;7683  text-align: right;7684  margin: 0;7685  padding: 2px 0 0;7686}76877688/* ── Context menu + swipe-copy flash ─────────────────────── */7689.peach-context-menu-backdrop {7690  position: fixed;7691  inset: 0;7692  background: rgba(0, 0, 0, 0.45);7693  z-index: 100;7694  display: flex;7695  align-items: flex-end;7696  justify-content: center;7697  animation: peach-ctx-fade 140ms ease both;7698}7699.peach-context-menu {7700  width: min(360px, calc(100vw - 24px));7701  margin-bottom: max(env(safe-area-inset-bottom), 12px);7702  background: var(--peach-bg);7703  border: 1px solid var(--peach-t3);7704  border-radius: 14px;7705  padding: 6px;7706  display: flex;7707  flex-direction: column;7708  gap: 2px;7709  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7710  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7711}7712@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7713@keyframes peach-ctx-rise {7714  from { transform: translateY(16px); opacity: 0; }7715  to   { transform: translateY(0);    opacity: 1; }7716}7717.peach-context-menu-item {7718  background: transparent;7719  color: var(--peach-t0);7720  border: 0;7721  border-radius: 10px;7722  padding: 12px 14px;7723  text-align: left;7724  font: inherit;7725  cursor: pointer;7726}7727.peach-context-menu-item:hover,7728.peach-context-menu-item:focus-visible {7729  background: var(--peach-t3);7730}7731.peach-context-menu-item--danger {7732  color: var(--peach-health-bad, #d96868);7733}7734.peach-context-menu-item--cancel {7735  color: var(--peach-t2);7736  margin-top: 4px;7737  border-top: 1px solid var(--peach-t3);7738  border-radius: 0 0 10px 10px;7739}77407741/* Swipe-to-copy flash */7742.peach-entry-row.is-copy-flash {7743  animation: peach-copy-flash 600ms ease both;7744}7745@keyframes peach-copy-flash {7746  0%   { background: transparent; }7747  20%  { background: rgba(217, 153, 51, 0.32); }7748  100% { background: transparent; }7749}77507751html { font-size: 16px; }77527753/* ── Recovery word entry ─────────────────────────────────────────── */7754.peach-lock-recover-link {7755  display: block;7756  width: 100%;7757  margin-top: 12px;7758  background: none;7759  border: none;7760  font-family: "IBM Plex Mono", monospace;7761  font-size: 0.625rem;7762  letter-spacing: 0.06em;7763  color: var(--peach-t2);7764  cursor: pointer;7765  text-align: center;7766  padding: 4px;7767  transition: color 120ms ease;7768}7769.peach-lock-recover-link:hover {7770  color: var(--peach-t0);7771}77727773.lock-screen--recovery {7774  display: flex;7775  flex-direction: column;7776  align-items: stretch;7777  padding: 12px 20px 24px;7778  overflow: hidden;7779}77807781.peach-recovery-nav {7782  display: flex;7783  align-items: center;7784  position: relative;7785  z-index: 1;7786  margin-bottom: 4px;7787}77887789/* Mask runes to the top decorative band only — keep inputs and the7790   bottom CTA button clear. The bottom of the popup is reserved for7791   submit buttons; rendering runes there overlaps the button glyph. */7792.peach-rune-background--recovery {7793  -webkit-mask-image: linear-gradient(7794    to bottom,7795    black 0px, black 85px,7796    transparent 110px,7797    transparent 100%7798  );7799  mask-image: linear-gradient(7800    to bottom,7801    black 0px, black 85px,7802    transparent 110px,7803    transparent 100%7804  );7805}78067807.peach-recovery-header {7808  text-align: center;7809  margin-bottom: 16px;7810  margin-top: 4px;7811}7812.peach-recovery-header .peach-onboarding-headline {7813  font-size: 1.25rem;7814  font-weight: 300;7815  letter-spacing: 0.02em;7816  margin: 0 0 4px;7817}7818.peach-recovery-header .peach-hint {7819  font-family: "IBM Plex Mono", monospace;7820  font-size: 0.625rem;7821  color: var(--peach-t2);7822  letter-spacing: 0.04em;7823  margin: 0;7824}78257826/* 12-word grid: 2 columns × 6 rows */7827.peach-recovery-grid {7828  display: grid;7829  grid-template-columns: repeat(2, 1fr);7830  gap: 12px 20px;7831  width: 100%;7832  margin-bottom: 0;7833}78347835.peach-recovery-word-slot {7836  display: flex;7837  align-items: center;7838  gap: 6px;7839  min-width: 0;7840}78417842.peach-recovery-word-index {7843  font-family: "IBM Plex Mono", monospace;7844  font-size: 0.5rem;7845  color: rgba(255, 255, 255, 0.35);7846  min-width: 14px;7847  flex-shrink: 0;7848  text-align: right;7849  letter-spacing: 0.04em;7850}78517852.peach-recovery-word-input {7853  flex: 1;7854  min-width: 0;7855  background: transparent;7856  border: none;7857  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7858  color: var(--peach-t0);7859  font-family: "IBM Plex Mono", monospace;7860  font-size: 0.6875rem;7861  letter-spacing: 0.06em;7862  padding: 5px 2px 4px;7863  outline: none;7864  text-transform: lowercase;7865  transition: border-color 120ms ease;7866}7867.peach-recovery-word-input::placeholder {7868  color: rgba(255, 255, 255, 0.18);7869}7870.peach-recovery-word-input:focus {7871  border-bottom-color: var(--peach-accent);7872}78737874.peach-recovery-submit {7875  width: 100%;7876  margin-top: auto;7877}78787879.peach-recovery-new-password-form {7880  width: 100%;7881  display: flex;7882  flex-direction: column;7883  gap: 16px;7884  margin-bottom: 8px;7885}7886.peach-recovery-new-password-form .peach-newvault-field {7887  display: flex;7888  flex-direction: column;7889  gap: 4px;7890}78917892/* ── Recovery words display (post-create) ────────────────────────── */7893.lock-screen--recovery-display {7894  display: flex;7895  flex-direction: column;7896  align-items: stretch;7897  padding: 0 20px 20px;7898  min-height: 0;7899  overflow-y: auto;7900}79017902.peach-recovery-words-display {7903  width: 100%;7904  margin-bottom: 16px;7905  border: 1px solid var(--peach-t3);7906  border-radius: 8px;7907  padding: 12px 14px;7908  background: rgba(245, 240, 234, 0.04);7909}79107911.peach-recovery-words-label {7912  font-family: "IBM Plex Mono", monospace;7913  font-size: 0.5rem;7914  letter-spacing: 0.08em;7915  color: var(--peach-t2);7916  text-transform: uppercase;7917  margin-bottom: 10px;7918}79197920.peach-recovery-word-list {7921  list-style: none;7922  margin: 0;7923  padding: 0;7924  display: grid;7925  grid-template-columns: repeat(2, 1fr);7926  gap: 6px 16px;7927}79287929.peach-recovery-word-item {7930  display: flex;7931  align-items: baseline;7932  gap: 5px;7933}79347935.peach-recovery-word-num {7936  font-family: "IBM Plex Mono", monospace;7937  font-size: 0.5rem;7938  color: var(--peach-t2);7939  width: 14px;7940  flex: 0 0 14px;7941  text-align: right;7942  letter-spacing: 0.04em;7943  font-variant-numeric: tabular-nums;7944}79457946.peach-recovery-download-btn {7947  display: block;7948  margin: 10px auto 0;7949  padding: 4px 10px;7950  background: transparent;7951  border: 1px solid var(--peach-border);7952  border-radius: 6px;7953  color: var(--peach-t2);7954  font-family: "IBM Plex Mono", monospace;7955  font-size: 0.5625rem;7956  letter-spacing: 0.06em;7957  text-transform: lowercase;7958  cursor: pointer;7959  transition: border-color 0.15s, color 0.15s;7960}79617962.peach-recovery-download-btn:hover {7963  border-color: var(--peach-accent);7964  color: var(--peach-t0);7965}79667967.peach-recovery-word-text {7968  font-family: "IBM Plex Mono", monospace;7969  font-size: 0.6875rem;7970  letter-spacing: 0.06em;7971  color: var(--peach-t0);7972  text-transform: lowercase;7973}79747975.peach-hint--warning {7976  color: var(--peach-accent);7977  font-style: italic;7978}7979.peach-hint--success {7980  color: var(--peach-t2);7981  font-family: "IBM Plex Mono", monospace;7982  font-size: 0.625rem;7983  letter-spacing: 0.06em;7984}79857986/* Confirmation step */7987.peach-recovery-confirm {7988  width: 100%;7989  flex: 1;7990  display: flex;7991  flex-direction: column;7992}7993.peach-recovery-confirm-label {7994  font-family: "IBM Plex Mono", monospace;7995  font-size: 0.5625rem;7996  letter-spacing: 0.04em;7997  color: var(--peach-t2);7998  text-align: center;7999  margin: 0 0 12px;8000}8001.peach-recovery-confirm-fields {8002  display: flex;8003  flex-direction: column;8004  gap: 14px;8005  margin-bottom: 10px;8006}8007.peach-recovery-confirm-field {8008  display: flex;8009  align-items: center;8010  gap: 8px;8011}8012.peach-recovery-confirm-num {8013  font-family: "IBM Plex Mono", monospace;8014  font-size: 0.5rem;8015  color: var(--peach-t2);8016  min-width: 44px;8017  letter-spacing: 0.04em;8018}8019.peach-recovery-confirm-input {8020  flex: 1;8021  background: transparent;8022  border: none;8023  border-bottom: 1px solid var(--peach-t3);8024  color: var(--peach-t0);8025  font-family: "IBM Plex Mono", monospace;8026  font-size: 0.6875rem;8027  letter-spacing: 0.06em;8028  padding: 4px 2px 3px;8029  outline: none;8030  text-transform: lowercase;8031  transition: border-color 120ms ease;8032}8033.peach-recovery-confirm-input:focus {8034  border-bottom-color: var(--peach-accent);8035}8036.peach-recovery-confirm-input:disabled {8037  opacity: 0.4;8038  cursor: not-allowed;8039}8040.peach-recovery-confirm-btn {8041  width: 100%;8042  margin-top: auto;8043}80448045/* ============================================================8046   Sync info sheet8047   ============================================================ */80488049.peach-sync-info-backdrop {8050  position: fixed;8051  inset: 0;8052  z-index: 200;8053  background: rgba(0, 0, 0, 0.55);8054  display: flex;8055  align-items: flex-end;8056  animation: peach-fade-in 200ms ease forwards;8057}80588059@keyframes peach-fade-in {8060  from { opacity: 0; }8061  to   { opacity: 1; }8062}80638064.peach-sync-info-sheet {8065  width: 100%;8066  background: var(--peach-bg-card, var(--peach-bg));8067  border-top-left-radius: 20px;8068  border-top-right-radius: 20px;8069  padding: 12px 24px 32px;8070  display: flex;8071  flex-direction: column;8072  gap: 20px;8073  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;8074}80758076@keyframes peach-sheet-up {8077  from { transform: translateY(100%); }8078  to   { transform: translateY(0); }8079}80808081.peach-sync-info-handle {8082  width: 36px;8083  height: 4px;8084  border-radius: 2px;8085  background: var(--peach-border);8086  margin: 0 auto 4px;8087  flex-shrink: 0;8088}80898090.peach-sync-info-title {8091  font-family: 'Cormorant Garamond', serif;8092  font-style: italic;8093  font-size: 26px;8094  font-weight: 600;8095  color: var(--peach-t0);8096  margin: 0;8097  line-height: 1.2;8098}80998100.peach-sync-info-body {8101  display: flex;8102  flex-direction: column;8103  gap: 14px;8104}81058106.peach-sync-info-point {8107  display: flex;8108  gap: 12px;8109  align-items: flex-start;8110  font-size: 14px;8111  color: var(--peach-t2);8112  line-height: 1.6;8113  margin: 0;8114}81158116.peach-sync-info-icon {8117  color: var(--peach-accent);8118  font-size: 16px;8119  flex-shrink: 0;8120  margin-top: 1px;8121}81228123.peach-sync-info-actions {8124  display: flex;8125  flex-direction: column;8126  gap: 12px;8127  margin-top: 4px;8128}81298130.peach-sync-info-pro-link {8131  background: none;8132  border: none;8133  font-size: 13px;8134  color: var(--peach-t3);8135  cursor: pointer;8136  padding: 0;8137  font-family: inherit;8138  text-align: center;8139  transition: color 150ms ease;8140}81418142.peach-sync-info-pro-link:hover {8143  color: var(--peach-accent);8144}81458146.peach-btn--full {8147  width: 100%;8148}81498150/* ── Sync screen ── */81518152.peach-sync-coming-soon {8153  display: flex;8154  align-items: flex-start;8155  gap: 10px;8156  padding: 12px 14px;8157  background: var(--peach-s1);8158  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8159  border-radius: 10px;8160}8161.peach-sync-coming-soon__icon {8162  flex-shrink: 0;8163  color: var(--peach-accent);8164  margin-top: 1px;8165  line-height: 0;8166}8167.peach-sync-coming-soon__title {8168  font-family: 'Cormorant Garamond', serif;8169  font-weight: 500;8170  font-size: 13px;8171  color: var(--peach-accent);8172  margin: 0 0 5px;8173  line-height: 1.3;8174}8175.peach-sync-coming-soon__body {8176  font-size: 12px;8177  color: var(--peach-t1);8178  line-height: 1.55;8179  margin: 0;8180}81818182.peach-sync-screen {8183  display: flex;8184  flex-direction: column;8185  height: 100%;8186}81878188.peach-sync-content {8189  flex: 1;8190  overflow-y: auto;8191  padding: 24px 20px 40px;8192  display: flex;8193  flex-direction: column;8194  gap: 24px;8195}81968197/* Intro (State A) */8198.peach-sync-headline {8199  font-family: 'Cormorant Garamond', serif;8200  font-style: italic;8201  font-size: 28px;8202  font-weight: 600;8203  color: var(--peach-t0);8204  margin: 0 0 10px;8205  line-height: 1.2;8206}82078208.peach-sync-intro-body {8209  font-size: 14px;8210  color: var(--peach-t1);8211  line-height: 1.6;8212  margin: 0;8213}82148215.peach-sync-pro-note {8216  display: flex;8217  flex-direction: column;8218  gap: 8px;8219  background: var(--peach-t3);8220  border-radius: 10px;8221  padding: 12px 14px;8222}82238224.peach-sync-pro-note-text {8225  font-size: 12px;8226  color: var(--peach-t2);8227  line-height: 1.5;8228  margin: 0;8229}82308231.peach-sync-pro-link {8232  background: none;8233  border: none;8234  font-size: 12px;8235  color: var(--peach-accent);8236  cursor: pointer;8237  padding: 0;8238  font-family: inherit;8239  text-align: left;8240}82418242/* Status (State C) */8243.peach-sync-status {8244  padding: 12px 0;8245  border-bottom: 1px solid var(--peach-border);8246}82478248.peach-sync-status-row {8249  display: flex;8250  align-items: center;8251  gap: 8px;8252}82538254.peach-sync-dot {8255  width: 7px;8256  height: 7px;8257  border-radius: 50%;8258  flex-shrink: 0;8259}82608261.peach-sync-dot--green { background: var(--peach-health-ok); }8262.peach-sync-dot--amber { background: var(--peach-accent); }82638264.peach-sync-status-text {8265  font-family: 'IBM Plex Mono', monospace;8266  font-size: 11px;8267  color: var(--peach-t2);8268}82698270/* Paired devices */8271.peach-sync-section {8272  display: flex;8273  flex-direction: column;8274  gap: 2px;8275}82768277.peach-sync-section-label {8278  font-family: 'IBM Plex Mono', monospace;8279  font-size: 10px;8280  letter-spacing: 0.1em;8281  color: var(--peach-t3);8282  margin: 0 0 10px;8283}82848285.peach-sync-device-row {8286  display: flex;8287  justify-content: space-between;8288  align-items: baseline;8289  padding: 10px 0;8290  border-bottom: 1px solid var(--peach-border);8291  gap: 12px;8292}82938294.peach-sync-device-name {8295  font-size: 14px;8296  color: var(--peach-t1);8297}82988299.peach-sync-device-meta {8300  font-family: 'IBM Plex Mono', monospace;8301  font-size: 11px;8302  color: var(--peach-t3);8303  white-space: nowrap;8304}83058306.peach-sync-hub-note {8307  padding: 14px 16px;8308  border: 1px solid var(--peach-border);8309  border-radius: 10px;8310  display: flex;8311  flex-direction: column;8312  gap: 6px;8313  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8314}83158316.peach-sync-hub-note-title {8317  font-size: 13px;8318  font-weight: 600;8319  color: var(--peach-t0);8320  margin: 0;8321}83228323.peach-sync-hub-note-body {8324  font-size: 12px;8325  color: var(--peach-t2);8326  line-height: 1.6;8327  margin: 0;8328}83298330/* Action buttons */8331.peach-sync-actions {8332  display: flex;8333  gap: 10px;8334  flex-wrap: wrap;8335}83368337/* Upgrade prompt (State B) */8338.peach-sync-upgrade {8339  display: flex;8340  flex-direction: column;8341  gap: 12px;8342  padding: 16px;8343  border: 1px solid var(--peach-border);8344  border-radius: 10px;8345}83468347.peach-sync-upgrade-text {8348  font-size: 13px;8349  color: var(--peach-t2);8350  line-height: 1.6;8351  margin: 0;8352}83538354/* Network note */8355.peach-sync-network-note {8356  font-size: 12px;8357  color: var(--peach-t3);8358  line-height: 1.6;8359  margin: 0;8360}83618362/* Advanced */8363.peach-sync-advanced {8364  margin-top: auto;8365  padding-top: 16px;8366  border-top: 1px solid var(--peach-border);8367}83688369.peach-sync-advanced-toggle {8370  display: flex;8371  align-items: center;8372  gap: 8px;8373  background: none;8374  border: none;8375  font-family: 'IBM Plex Mono', monospace;8376  font-size: 11px;8377  letter-spacing: 0.08em;8378  color: var(--peach-t3);8379  cursor: pointer;8380  padding: 0;8381  text-transform: uppercase;8382}83838384.peach-sync-advanced-chevron {8385  display: inline-block;8386  transition: transform 200ms ease;8387  font-size: 10px;8388}83898390.peach-sync-advanced-chevron.is-open {8391  transform: rotate(90deg);8392}83938394.peach-sync-advanced-content {8395  margin-top: 14px;8396}83978398.peach-sync-advanced-row {8399  display: flex;8400  justify-content: space-between;8401  align-items: center;8402  gap: 16px;8403}84048405.peach-sync-advanced-title {8406  font-size: 14px;8407  color: var(--peach-t1);8408  margin: 0 0 2px;8409}84108411.peach-sync-advanced-subtitle {8412  font-size: 12px;8413  color: var(--peach-t3);8414  margin: 0;8415  line-height: 1.5;8416}84178418/* ── Add Device — Android scan tabs ─────────────────────────────────────── */84198420.peach-pairing-tabs {8421  display: flex;8422  border: 1px solid var(--peach-border);8423  border-radius: 8px;8424  overflow: hidden;8425  margin-bottom: 4px;8426}84278428.peach-pairing-tab {8429  flex: 1;8430  padding: 10px 0;8431  background: none;8432  border: none;8433  font-family: 'IBM Plex Mono', monospace;8434  font-size: 11px;8435  letter-spacing: 0.06em;8436  color: var(--peach-t2);8437  cursor: pointer;8438  transition: background 150ms, color 150ms;8439}84408441.peach-pairing-tab.is-active {8442  background: var(--peach-accent);8443  color: #fff;8444  font-weight: 600;8445}84468447.peach-pairing-tab:not(.is-active):active {8448  background: var(--peach-border);8449}84508451/* Camera view */8452.peach-pairing-camera-container {8453  position: relative;8454  width: 100%;8455  aspect-ratio: 1;8456  border-radius: 12px;8457  overflow: hidden;8458  background: #000;8459  flex-shrink: 0;8460}84618462.peach-pairing-video {8463  width: 100%;8464  height: 100%;8465  object-fit: cover;8466}84678468.peach-pairing-scan-frame {8469  position: absolute;8470  top: 50%;8471  left: 50%;8472  transform: translate(-50%, -50%);8473  width: 60%;8474  aspect-ratio: 1;8475  border: 2px solid var(--peach-accent);8476  border-radius: 8px;8477  pointer-events: none;8478}84798480/* ── Notes Mode ── */84818482/* Overlay that crossfades over the vault */8483.peach-notes-overlay {8484  position: fixed;8485  inset: 0;8486  z-index: 90;8487  opacity: 0;8488  pointer-events: none;8489  animation: peach-mode-in 220ms ease-in forwards;8490}84918492.peach-notes-overlay.is-visible {8493  opacity: 1;8494  pointer-events: auto;8495}84968497@keyframes peach-mode-in {8498  from { opacity: 0; }8499  to   { opacity: 1; }8500}85018502/* Top-level notes surface */8503.peach-notes-mode {8504  position: absolute;8505  inset: 0;8506  background: var(--peach-bg);8507  display: flex;8508  flex-direction: column;8509}85108511/* Rune canvas positioned behind content */8512.peach-note-rune-canvas {8513  position: absolute;8514  inset: 0;8515  width: 100%;8516  height: 100%;8517  pointer-events: none;8518  z-index: 0;8519}85208521/* TOC wrapper */8522.peach-notes-toc-wrapper {8523  position: absolute;8524  inset: 0;8525  z-index: 1;8526  opacity: 1;8527  pointer-events: auto;8528  transition: opacity 200ms ease;8529}85308531.peach-notes-toc-wrapper.is-hidden {8532  opacity: 0;8533  pointer-events: none;8534}85358536/* Editor wrapper */8537.peach-notes-editor-wrapper {8538  position: absolute;8539  inset: 0;8540  z-index: 2;8541  opacity: 0;8542  pointer-events: none;8543  transition: opacity 200ms ease;8544}85458546.peach-notes-editor-wrapper.is-visible {8547  opacity: 1;8548  pointer-events: auto;8549}85508551/* TOC inner */8552.peach-notes-toc {8553  position: relative;8554  display: flex;8555  flex-direction: column;8556  height: 100%;8557  padding-top: env(safe-area-inset-top, 0px);8558  padding-bottom: env(safe-area-inset-bottom, 0px);8559}85608561/* Shared header */8562.peach-notes-header {8563  display: flex;8564  align-items: center;8565  padding: 12px 16px;8566  gap: 12px;8567  flex-shrink: 0;8568  min-height: 52px;8569  position: relative;8570  z-index: 2;8571}85728573.peach-notes-back {8574  font-size: 22px;8575  color: var(--peach-t2);8576  background: none;8577  border: none;8578  padding: 4px;8579  cursor: pointer;8580  line-height: 1;8581  flex-shrink: 0;8582  transition: color 150ms ease;8583  -webkit-tap-highlight-color: transparent;8584}85858586.peach-notes-back:active { color: var(--peach-t0); }85878588.peach-notes-header-title {8589  flex: 1;8590  font-family: 'Cormorant Garamond', serif;8591  font-style: italic;8592  font-size: 22px;8593  color: var(--peach-t0);8594  text-align: center;8595}85968597.peach-notes-header-title.is-breadcrumb {8598  font-family: 'IBM Plex Mono', monospace;8599  font-style: normal;8600  font-size: 11px;8601  color: var(--peach-t3);8602  letter-spacing: 0.08em;8603  text-transform: uppercase;8604  cursor: pointer;8605}86068607.peach-notes-header-actions {8608  display: flex;8609  gap: 8px;8610  flex-shrink: 0;8611}86128613.peach-notes-header-btn {8614  width: 36px;8615  height: 36px;8616  display: flex;8617  align-items: center;8618  justify-content: center;8619  background: none;8620  border: none;8621  color: var(--peach-t2);8622  cursor: pointer;8623  border-radius: 8px;8624  font-size: 16px;8625  transition: color 150ms ease, background 150ms ease;8626  -webkit-tap-highlight-color: transparent;8627}86288629.peach-notes-header-btn:active {8630  background: rgba(255,255,255,0.06);8631  color: var(--peach-t0);8632}86338634/* Inline search bar */8635.peach-notes-search-input {8636  flex: 1;8637  background: none;8638  border: none;8639  outline: none;8640  font-family: 'IBM Plex Mono', monospace;8641  font-size: 13px;8642  color: var(--peach-t0);8643  padding: 4px 0;8644  letter-spacing: 0.02em;8645}86468647.peach-notes-search-input::placeholder {8648  color: var(--peach-t3);8649}86508651/* TOC list */8652.peach-notes-list-container {8653  flex: 1;8654  overflow-y: auto;8655  overflow-x: hidden;8656  scrollbar-width: none;8657  -webkit-overflow-scrolling: touch;8658  overscroll-behavior: contain;8659  position: relative;8660  z-index: 1;8661}86628663.peach-notes-list-container::-webkit-scrollbar { display: none; }86648665/* Note row */8666.peach-note-row {8667  position: relative;8668  display: grid;8669  grid-template-columns: 44px 8px 1fr 8px auto;8670  align-items: center;8671  min-height: 72px;8672  padding: 16px 20px;8673  border-bottom: 0.5px solid var(--peach-border);8674  cursor: pointer;8675  overflow: hidden;8676  touch-action: pan-y;8677  user-select: none;8678  -webkit-user-select: none;8679  -webkit-tap-highlight-color: transparent;8680}86818682.peach-note-row:first-child {8683  border-top: 0.5px solid var(--peach-border);8684}86858686.peach-note-row:active {8687  background: rgba(255,255,255,0.02);8688}86898690.peach-note-numeral {8691  font-family: 'Cormorant Garamond', serif;8692  font-style: italic;8693  font-size: 15px;8694  color: var(--peach-accent);8695  text-align: right;8696  line-height: 1;8697  flex-shrink: 0;8698}86998700.peach-note-title-gap { /* grid spacer */ }87018702.peach-note-title {8703  font-family: 'Cormorant Garamond', serif;8704  font-style: italic;8705  font-size: 18px;8706  color: var(--peach-t0);8707  line-height: 1.3;8708  min-width: 0;8709  overflow-wrap: break-word;8710}87118712.peach-note-title-match {8713  color: var(--peach-accent);8714}87158716.peach-note-date {8717  font-family: 'IBM Plex Mono', monospace;8718  font-size: 11px;8719  color: var(--peach-t2);8720  white-space: nowrap;8721  text-align: right;8722  flex-shrink: 0;8723  grid-column: 5;8724}87258726/* Swipe underlays */8727.peach-note-row-underlay {8728  position: absolute;8729  inset: 0;8730  display: flex;8731  align-items: center;8732  padding: 0 24px;8733  font-family: 'IBM Plex Mono', monospace;8734  font-size: 11px;8735  letter-spacing: 0.1em;8736  pointer-events: none;8737  z-index: 0;8738}87398740.peach-note-row-underlay--delete {8741  background: #8B2020;8742  color: rgba(255,255,255,0.9);8743  justify-content: flex-end;8744}87458746.peach-note-row-underlay--archive {8747  background: var(--peach-accent);8748  color: #0C0A06;8749  justify-content: flex-start;8750}87518752/* Delete confirm strip */8753.peach-note-delete-confirm {8754  position: absolute;8755  inset: 0;8756  background: var(--peach-bg);8757  display: flex;8758  align-items: center;8759  gap: 12px;8760  padding: 0 20px;8761  font-family: 'IBM Plex Mono', monospace;8762  font-size: 11px;8763  color: var(--peach-t1);8764  letter-spacing: 0.04em;8765  animation: peach-delete-confirm-in 150ms ease both;8766  z-index: 10;8767}87688769@keyframes peach-delete-confirm-in {8770  from { opacity: 0; }8771  to   { opacity: 1; }8772}87738774.peach-note-delete-confirm-btn {8775  background: #8B2020;8776  color: rgba(255,255,255,0.9);8777  border: none;8778  border-radius: 6px;8779  padding: 4px 10px;8780  font-family: 'IBM Plex Mono', monospace;8781  font-size: 10px;8782  cursor: pointer;8783  letter-spacing: 0.06em;8784}87858786.peach-note-delete-cancel-btn {8787  background: none;8788  border: none;8789  color: var(--peach-t3);8790  font-family: 'IBM Plex Mono', monospace;8791  font-size: 10px;8792  cursor: pointer;8793  letter-spacing: 0.06em;8794  padding: 4px 6px;8795}87968797/* + New note button */8798.peach-notes-new-btn {8799  font-family: 'IBM Plex Mono', monospace;8800  font-size: 12px;8801  color: var(--peach-t3);8802  text-align: center;8803  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8804  background: none;8805  border: none;8806  width: 100%;8807  cursor: pointer;8808  letter-spacing: 0.04em;8809  transition: color 150ms ease;8810  -webkit-tap-highlight-color: transparent;8811}88128813.peach-notes-new-btn:active { color: var(--peach-accent); }88148815/* Empty state */8816.peach-notes-empty {8817  display: flex;8818  flex-direction: column;8819  align-items: center;8820  justify-content: center;8821  flex: 1;8822  padding: 48px 32px;8823  gap: 16px;8824}88258826.peach-notes-empty-text {8827  font-family: 'Cormorant Garamond', serif;8828  font-style: italic;8829  font-size: 20px;8830  color: var(--peach-t3);8831  text-align: center;8832  margin: 0;8833  line-height: 1.4;8834  white-space: pre-line;8835}88368837/* ── Editor surface ── */88388839.peach-note-editor-surface {8840  position: absolute;8841  inset: 0;8842  background: var(--peach-bg);8843  display: flex;8844  flex-direction: column;8845  padding-top: env(safe-area-inset-top, 0px);8846}88478848.peach-note-editor-scroll {8849  flex: 1;8850  overflow-y: auto;8851  overflow-x: hidden;8852  scrollbar-width: none;8853  -webkit-overflow-scrolling: touch;8854  padding: 0 24px 120px;8855  position: relative;8856  z-index: 1;8857}88588859.peach-note-editor-scroll::-webkit-scrollbar { display: none; }88608861/* Desktop toolbar (always visible above body) */8862.peach-note-toolbar-desktop-inline {8863  display: flex;8864  align-items: center;8865  gap: 2px;8866  padding: 6px 0 12px;8867  margin-bottom: 4px;8868  border-bottom: 0.5px solid var(--peach-border);8869}88708871/* Title field */8872.peach-note-title-field {8873  font-family: 'Cormorant Garamond', serif;8874  font-style: italic;8875  font-size: 32px;8876  font-weight: 600;8877  color: var(--peach-t0);8878  line-height: 1.2;8879  padding: 8px 0 0;8880  outline: none;8881  min-height: 44px;8882  word-break: break-word;8883  position: relative;8884  z-index: 1;8885}88868887.peach-note-title-field:empty::before {8888  content: attr(data-placeholder);8889  color: var(--peach-t3);8890  pointer-events: none;8891}88928893/* Hairline separator */8894.peach-note-hairline {8895  height: 0.5px;8896  background: var(--peach-border);8897  margin: 12px 0 20px;8898  position: relative;8899  z-index: 1;8900}89018902/* Body field */8903.peach-note-body-field {8904  font-family: 'DM Sans', sans-serif;8905  font-size: 16px;8906  color: var(--peach-t0);8907  line-height: 1.85;8908  padding: 0;8909  outline: none;8910  min-height: 240px;8911  word-break: break-word;8912  position: relative;8913  z-index: 1;8914}89158916.peach-note-body-field:empty::before {8917  content: attr(data-placeholder);8918  color: var(--peach-t3);8919  font-style: italic;8920  pointer-events: none;8921}89228923.peach-note-body-field h2 {8924  font-family: 'Cormorant Garamond', serif;8925  font-style: italic;8926  font-size: 22px;8927  font-weight: 600;8928  color: var(--peach-t0);8929  margin: 20px 0 8px;8930}89318932.peach-note-body-field blockquote {8933  border-left: 2px solid var(--peach-accent);8934  margin: 12px 0;8935  padding-left: 16px;8936  color: var(--peach-t1);8937  font-style: italic;8938}89398940.peach-note-body-field ul,8941.peach-note-body-field ol {8942  padding-left: 20px;8943  margin: 8px 0;8944}89458946.peach-note-body-field li {8947  margin: 4px 0;8948}89498950.peach-note-body-field hr {8951  border: none;8952  border-top: 0.5px solid var(--peach-border);8953  margin: 16px 0;8954}89558956/* Saved indicator */8957.peach-note-saved-indicator {8958  font-family: 'IBM Plex Mono', monospace;8959  font-size: 11px;8960  color: var(--peach-t3);8961  letter-spacing: 0.04em;8962  text-align: right;8963  padding: 6px 24px;8964  flex-shrink: 0;8965  transition: opacity 300ms ease;8966  pointer-events: none;8967  position: relative;8968  z-index: 1;8969}89708971/* Mobile keyboard toolbar */8972.peach-note-toolbar-mobile {8973  display: flex;8974  align-items: center;8975  padding: 8px 16px;8976  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));8977  background: var(--peach-bg);8978  border-top: 0.5px solid var(--peach-border);8979  gap: 4px;8980  flex-shrink: 0;8981  position: relative;8982  z-index: 10;8983}89848985.peach-note-toolbar-btn {8986  min-width: 36px;8987  height: 36px;8988  display: flex;8989  align-items: center;8990  justify-content: center;8991  background: none;8992  border: none;8993  border-radius: 8px;8994  cursor: pointer;8995  font-size: 14px;8996  color: var(--peach-t1);8997  font-family: 'DM Sans', sans-serif;8998  font-weight: 600;8999  transition: background 100ms ease, color 100ms ease;9000  -webkit-tap-highlight-color: transparent;9001}90029003.peach-note-toolbar-btn--italic { font-style: italic; }9004.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }9005.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }90069007.peach-note-toolbar-divider {9008  width: 0.5px;9009  height: 20px;9010  background: var(--peach-border);9011  margin: 0 4px;9012  flex-shrink: 0;9013}90149015.peach-note-toolbar-spacer { flex: 1; }90169017/* Desktop: larger headline in TOC */9018@media (min-width: 400px) {9019  .peach-notes-header-title:not(.is-breadcrumb) {9020    font-size: 32px;9021  }90229023  .peach-note-row {9024    min-height: 64px;9025    padding: 14px 16px;9026  }9027}90289029/* Flying title — shared element during expansion/collapse */90309031/* ─── Light theme overrides ───────────────────────────────────────────────9032   Tokens that cannot be expressed as variable substitutions — hardcoded9033   context-specific values that need separate light-mode rules. */90349035/* Settings section headers: use text-label (#79766F) per restoration brief —9036   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY9037   presence without fighting the light parchment background. */9038.light .peach-settings-sub-label,9039[data-theme="light"] .peach-settings-sub-label,9040.light .peach-settings-nav-label,9041[data-theme="light"] .peach-settings-nav-label {9042  color: #79766F;9043}90449045/* Secondary action buttons (ghost / subtle): filled with input-well surface9046   so they read as recessed against the parchment card background. */9047.light .peach-btn--ghost:not(.peach-icon-btn),9048[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {9049  background: #EEE7DD;9050  border-color: #DDD5CB;9051  color: #1A1208;9052}9053.light .peach-icon-btn,9054[data-theme="light"] .peach-icon-btn {9055  background: transparent;9056  border-color: transparent;9057}9058.light .peach-btn--subtle,9059[data-theme="light"] .peach-btn--subtle {9060  background: #EEE7DD;9061  border-color: #DDD5CB;9062}90639064/* Wide secondary action button on the lock screen — override the9065   hardcoded dark-mode rgba values with warm parchment equivalents. */9066.light .peach-lock-secondary,9067[data-theme="light"] .peach-lock-secondary {9068  background: #EEE7DD;9069  border-color: #DDD5CB;9070  color: #1A1208;9071}9072.light .peach-lock-secondary:hover,9073[data-theme="light"] .peach-lock-secondary:hover {9074  background: #F0E9DF;9075}90769077/* Entry row hover: bg-row lifts the row above the card surface. */9078.light .peach-entry-row:hover,9079[data-theme="light"] .peach-entry-row:hover {9080  background: #F2EBE1;9081}9082.light .peach-entry-row.is-active,9083[data-theme="light"] .peach-entry-row.is-active {9084  background: #F2EBE1;9085}9086.light .peach-entry-row.is-selected,9087[data-theme="light"] .peach-entry-row.is-selected {9088  background: #F5EDE2;9089}90909091/* ──────────────────────────────────────────────────────────────────────────9092   Chirp pairing flow — bird-stage animation (Phase 1)9093   See src/popup/components/ChirpPairingFlow.tsx and the brief §6.2.9094   Three-act animation gated on the [data-phase] attribute of9095   .peach-chirp-pair; child layers (birds, chirp arcs, flight wave, dot)9096   each react via either pose class or visibility flag.9097   Tokens: accent surfaces use var(--peach-accent); bird illustration9098   colours are baked into the SVG per the brand-peach exception in §3.1.9099   ────────────────────────────────────────────────────────────────────── */91009101.peach-chirp-pair {9102  position: absolute;9103  inset: 0;9104  z-index: 3;9105  display: flex;9106  flex-direction: column;9107  padding: 14px 12px 12px;9108  width: 100%;9109  box-sizing: border-box;9110  gap: 0;9111  background:9112    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9113    var(--peach-bg);9114  color: var(--peach-t0);9115  overflow-y: auto;9116  overflow-x: hidden;9117  scrollbar-width: none;9118  isolation: isolate;9119  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9120}9121@keyframes peach-chirp-overlay-in {9122  from { opacity: 0; transform: translateY(8px); }9123  to   { opacity: 1; transform: translateY(0); }9124}9125.peach-chirp-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }9126.peach-chirp-pair::before {9127  content: '';9128  position: absolute;9129  inset: 0;9130  border-radius: inherit;9131  pointer-events: none;9132  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9133  z-index: 0;9134}9135.peach-chirp-pair > * { position: relative; z-index: 1; }91369137/* Header --------------------------------------------------------------- */9138.peach-chirp-head {9139  display: flex; align-items: center; gap: 10px;9140}9141.peach-chirp-back {9142  width: 32px; height: 32px;9143  display: inline-flex; align-items: center; justify-content: center;9144  background: transparent;9145  border: none;9146  border-radius: 8px;9147  color: var(--peach-t1);9148  cursor: pointer;9149  transition: color 0.15s ease, box-shadow 0.15s ease;9150}9151.peach-chirp-back:hover {9152  color: var(--peach-accent);9153  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9154}9155.peach-chirp-title {9156  font-family: var(--font-display, Georgia, serif);9157  font-style: italic;9158  font-size: 24px;9159  font-weight: 500;9160  letter-spacing: 0.005em;9161  color: var(--peach-t0);9162  line-height: 1;9163}9164.peach-chirp-head-spacer { flex: 1; }91659166/* Chip row ------------------------------------------------------------- */9167.peach-chirp-chip-row {9168  display: flex;9169  align-items: center;9170  justify-content: flex-start;9171  margin-top: 12px;9172}9173.peach-chirp-chip {9174  display: inline-flex; align-items: center; gap: 8px;9175  padding: 5px 10px 5px 8px;9176  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9177  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9178  border-radius: 999px;9179  font-family: var(--peach-mono, ui-monospace, monospace);9180  font-size: 11px;9181  letter-spacing: 0.04em;9182  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9183}9184.peach-chirp-chip-dot {9185  width: 6px; height: 6px; border-radius: 50%;9186  background: var(--peach-accent);9187  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9188}9189.peach-chirp-chip[data-phase="paired"] {9190  background: color-mix(in srgb, #4f9eda 12%, transparent);9191  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9192  color: #76b6e8;9193}9194.peach-chirp-chip[data-phase="paired"] .peach-chirp-chip-dot {9195  background: #76b6e8;9196  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9197}9198.peach-chirp-chip[data-phase="timeout"],9199.peach-chirp-chip[data-phase="mic_denied"],9200.peach-chirp-chip[data-phase="version_mismatch"],9201.peach-chirp-chip[data-phase="handshake_failed"] {9202  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9203  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9204  color: var(--peach-warn, #d29257);9205}9206.peach-chirp-chip[data-phase="timeout"] .peach-chirp-chip-dot,9207.peach-chirp-chip[data-phase="mic_denied"] .peach-chirp-chip-dot,9208.peach-chirp-chip[data-phase="version_mismatch"] .peach-chirp-chip-dot,9209.peach-chirp-chip[data-phase="handshake_failed"] .peach-chirp-chip-dot {9210  background: var(--peach-warn, #d29257);9211  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9212}92139214/* Bird stage ----------------------------------------------------------- */9215.peach-chirp-stage {9216  position: relative;9217  margin: 14px 0 8px;9218  height: 180px;9219  border-radius: 12px;9220  background:9221    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9222    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),9223    color-mix(in srgb, var(--peach-bg) 92%, #000);9224  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);9225  overflow: hidden;9226  isolation: isolate;9227}9228.peach-chirp-stage::after {9229  content: '';9230  position: absolute;9231  left: 12%; right: 12%;9232  bottom: 36px;9233  height: 1px;9234  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9235}92369237.peach-chirp-bird-slot {9238  position: absolute;9239  bottom: 8px;9240  width: 100px;9241  height: 110px;9242  display: flex;9243  align-items: flex-end;9244  justify-content: center;9245}9246.peach-chirp-bird-slot-desktop { left: 28px; }9247.peach-chirp-bird-slot-mobile { right: 28px; }92489249/* Mobile bird hops in from the right when handshake begins */9250.peach-chirp-bird-slot-mobile {9251  opacity: 1;9252  transform: translateX(-6px);9253  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9254}9255.peach-chirp-stage.act-listening .peach-chirp-bird-slot-mobile,9256.peach-chirp-stage.act-chirping .peach-chirp-bird-slot-mobile,9257.peach-chirp-stage.act-idle .peach-chirp-bird-slot-mobile {9258  opacity: 0;9259  transform: translateX(60px) rotate(8deg);9260}9261.peach-chirp-stage.act-handshake .peach-chirp-bird-slot-desktop,9262.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop {9263  transform: translateX(6px);9264  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9265}92669267/* Paired: both birds bob together */9268.peach-chirp-stage.act-paired .peach-chirp-bird-slot {9269  animation: peach-chirp-happy-bob 1.2s ease-in-out infinite;9270}9271.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { animation-delay: 0.2s; }9272.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop { --bb-x: 6px; }9273.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { --bb-x: -6px; }9274@keyframes peach-chirp-happy-bob {9275  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9276  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9277}92789279/* Bird internal -------------------------------------------------------- */9280.peach-chirp-bird {9281  width: 108px;9282  height: 108px;9283  transform-origin: 50% 95%;9284}9285.peach-chirp-bird svg { width: 100%; height: 100%; overflow: visible; }92869287.peach-chirp-bird-body {9288  transform-origin: 50% 80%;9289  animation: peach-chirp-bird-bob 2.4s ease-in-out infinite;9290}9291@keyframes peach-chirp-bird-bob {9292  0%, 100% { transform: translateY(0) scale(1, 1); }9293  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9294}92959296.peach-chirp-bird-eye-group {9297  animation: peach-chirp-blink 5.2s steps(1, end) infinite;9298  transform-origin: center;9299  transform-box: fill-box;9300}9301@keyframes peach-chirp-blink {9302  0%, 92%, 96%, 100% { transform: scaleY(1); }9303  94%                { transform: scaleY(0.05); }9304}93059306/* Pose: chirping — beak opens, head bobs, aura blooms */9307.peach-chirp-bird-pose-chirping .peach-chirp-bird-body {9308  animation:9309    peach-chirp-bird-bob 2.4s ease-in-out infinite,9310    peach-chirp-squeeze 1.7s ease-in-out infinite;9311}9312@keyframes peach-chirp-squeeze {9313  0%, 70%, 100% { transform-origin: 50% 85%; }9314  78%           { transform: scale(1.04, 0.96) translateY(1px); }9315  86%           { transform: scale(0.98, 1.02); }9316}9317.peach-chirp-bird-pose-chirping .peach-chirp-bird-head-group {9318  animation: peach-chirp-head-bob 1.7s ease-in-out infinite;9319}9320@keyframes peach-chirp-head-bob {9321  0%, 70%, 100% { transform: translateY(0) rotate(0); }9322  78%           { transform: translateY(-3px) rotate(-4deg); }9323  86%           { transform: translateY(-1px) rotate(-2deg); }9324}9325.peach-chirp-bird-pose-chirping .peach-chirp-bird-beak {9326  animation: peach-chirp-beak-open 1.7s ease-in-out infinite;9327}9328@keyframes peach-chirp-beak-open {9329  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9330  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9331  86%           { transform: rotate(-6deg); }9332}9333.peach-chirp-bird-pose-chirping .peach-chirp-bird-aura {9334  animation: peach-chirp-aura 1.7s ease-in-out infinite;9335}9336@keyframes peach-chirp-aura {9337  0%, 100% { opacity: 0; }9338  50%      { opacity: 0.8; }9339}9340.peach-chirp-bird-pose-chirping .peach-chirp-bird-tail {9341  animation: peach-chirp-tail-twitch 1.7s ease-in-out infinite;9342  transform-origin: 100% 50%;9343}9344@keyframes peach-chirp-tail-twitch {9345  0%, 75%, 100% { transform: rotate(0); }9346  82%           { transform: rotate(-3deg) translateX(-1px); }9347}93489349/* Pose: attentive — head tilts toward partner */9350.peach-chirp-bird-pose-attentive .peach-chirp-bird-head-group {9351  animation: peach-chirp-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9352}9353@keyframes peach-chirp-head-tilt {9354  0%   { transform: rotate(0) translateY(0); }9355  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9356  100% { transform: rotate(-6deg); }9357}9358.peach-chirp-bird-pose-attentive .peach-chirp-bird-tail {9359  animation: peach-chirp-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9360  transform-origin: 100% 50%;9361}9362@keyframes peach-chirp-tail-cock {9363  0%   { transform: rotate(0); }9364  100% { transform: rotate(-4deg); }9365}93669367/* Pose: happy — wing flutter, tuft perk, tail wag */9368.peach-chirp-bird-pose-happy .peach-chirp-bird-wing {9369  transform-origin: 80% 60%;9370  animation: peach-chirp-wing-flutter 0.32s ease-in-out 5;9371}9372@keyframes peach-chirp-wing-flutter {9373  0%, 100% { transform: rotate(0) translateY(0); }9374  50%      { transform: rotate(-16deg) translateY(-2px); }9375}9376.peach-chirp-bird-pose-happy .peach-chirp-bird-tuft {9377  transform-origin: 0% 100%;9378  animation: peach-chirp-tuft-perk 0.4s ease-in-out 3;9379}9380@keyframes peach-chirp-tuft-perk {9381  0%, 100% { transform: rotate(0); }9382  50%      { transform: rotate(-15deg) translateY(-1px); }9383}9384.peach-chirp-bird-pose-happy .peach-chirp-bird-tail {9385  transform-origin: 100% 50%;9386  animation: peach-chirp-tail-wag 0.5s ease-in-out 4;9387}9388@keyframes peach-chirp-tail-wag {9389  0%, 100% { transform: rotate(0); }9390  25%      { transform: rotate(6deg); }9391  75%      { transform: rotate(-6deg); }9392}9393.peach-chirp-bird-pose-happy .peach-chirp-bird-head-group {9394  animation: peach-chirp-head-perk 0.5s ease-out;9395}9396@keyframes peach-chirp-head-perk {9397  0%   { transform: translateY(0); }9398  40%  { transform: translateY(-3px) rotate(2deg); }9399  100% { transform: translateY(0); }9400}94019402/* Pose: sad — body droops forward */9403.peach-chirp-bird-pose-sad .peach-chirp-bird-body {9404  transform: translateY(5px) rotate(-2deg);9405  animation: none;9406}9407.peach-chirp-bird-pose-sad .peach-chirp-bird-head-group {9408  transform: translateY(4px) rotate(8deg);9409}9410.peach-chirp-bird-pose-sad .peach-chirp-bird-tuft { transform: rotate(15deg) translateY(2px); }9411.peach-chirp-bird-pose-sad .peach-chirp-bird-tail { transform: rotate(8deg) translateY(2px); }94129413.peach-chirp-bird-pose-hidden { opacity: 0; }94149415/* Chirp arcs ----------------------------------------------------------- */9416.peach-chirp-arcs {9417  position: absolute;9418  top: 18px;9419  width: 96px;9420  height: 70px;9421  pointer-events: none;9422}9423.peach-chirp-arcs-right { right: -60px; }9424.peach-chirp-arcs-left  { left: -60px; transform: scaleX(-1); }9425.peach-chirp-arc {9426  position: absolute;9427  top: 50%;9428  left: 0;9429  width: 40px;9430  height: 40px;9431  margin-top: -20px;9432  border: 1.2px solid #f4d5a8;9433  border-color: transparent #f4d5a8 transparent transparent;9434  border-radius: 50%;9435  opacity: 0;9436  animation: peach-chirp-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9437}9438@keyframes peach-chirp-arc-expand {9439  0%   { transform: scale(0.4); opacity: 0; }9440  20%  { opacity: 0.9; }9441  100% { transform: scale(1.6); opacity: 0; }9442}94439444/* Flight wave ---------------------------------------------------------- */9445.peach-chirp-flight-track {9446  position: absolute;9447  inset: 32px 36px 38px 36px;9448  pointer-events: none;9449}9450.peach-chirp-flight-wave {9451  position: absolute;9452  top: 8px;9453  left: 76px;9454  right: 76px;9455  height: 60px;9456  width: auto;9457  opacity: 0;9458  transition: opacity 0.15s ease;9459  stroke: #f4d5a8;9460  fill: none;9461}9462.peach-chirp-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9463.peach-chirp-flight-wave.is-visible { opacity: 1; }9464.peach-chirp-flight-path,9465.peach-chirp-flight-path-2 {9466  stroke-dasharray: 240;9467  stroke-dashoffset: 240;9468  stroke-linecap: round;9469  fill: none;9470}9471.peach-chirp-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9472.peach-chirp-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9473.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path {9474  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9475}9476.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path-2 {9477  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9478}9479@keyframes peach-chirp-fly {9480  0%   { stroke-dashoffset: 240; opacity: 0; }9481  20%  { opacity: 1; }9482  100% { stroke-dashoffset: -120; opacity: 0; }9483}94849485/* Connection dot ------------------------------------------------------- */9486.peach-chirp-dot {9487  position: absolute;9488  top: 50%; left: 50%;9489  transform: translate(-50%, -50%);9490  width: 40px; height: 40px;9491  opacity: 0;9492  pointer-events: none;9493  transition: opacity 0.3s ease;9494  color: var(--peach-accent);9495}9496.peach-chirp-dot.is-visible { opacity: 1; }9497.peach-chirp-dot-glow {9498  position: absolute; top: 50%; left: 50%;9499  transform: translate(-50%, -50%);9500  width: 38px; height: 38px;9501  border-radius: 50%;9502  filter: blur(10px);9503  opacity: 0.55;9504  background: var(--peach-accent);9505  animation: peach-chirp-dot-bloom 1.4s ease-out;9506}9507.peach-chirp-dot-core {9508  position: absolute; top: 50%; left: 50%;9509  transform: translate(-50%, -50%);9510  width: 8px; height: 8px;9511  border-radius: 50%;9512  background: var(--peach-accent);9513  box-shadow: 0 0 12px currentColor;9514  animation: peach-chirp-dot-core 1.4s ease-out;9515}9516.peach-chirp-dot-ring {9517  position: absolute; top: 50%; left: 50%;9518  width: 60px; height: 60px;9519  transform: translate(-50%, -50%);9520  animation: peach-chirp-dot-ring 1.4s linear;9521  stroke: var(--peach-accent);9522}9523@keyframes peach-chirp-dot-bloom {9524  0%   { width: 4px; height: 4px; opacity: 0; }9525  35%  { width: 60px; height: 60px; opacity: 0.7; }9526  100% { width: 38px; height: 38px; opacity: 0.55; }9527}9528@keyframes peach-chirp-dot-core {9529  0%   { width: 0; height: 0; }9530  35%  { width: 12px; height: 12px; }9531  100% { width: 8px; height: 8px; }9532}9533@keyframes peach-chirp-dot-ring {9534  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9535  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9536  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9537}95389539/* Motes — drift upward across the stage */9540.peach-chirp-motes {9541  position: absolute;9542  inset: 0;9543  pointer-events: none;9544}9545.peach-chirp-mote {9546  position: absolute;9547  width: 2px; height: 2px;9548  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9549  border-radius: 50%;9550  bottom: 32px;9551  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9552  opacity: 0;9553  animation: peach-chirp-mote-drift 6s linear infinite;9554  animation-delay: calc(var(--mote-i, 0) * 0.7s);9555}9556@keyframes peach-chirp-mote-drift {9557  0%   { transform: translateY(0); opacity: 0; }9558  10%  { opacity: 0.6; }9559  90%  { opacity: 0.1; }9560  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9561}95629563/* Status copy ---------------------------------------------------------- */9564.peach-chirp-copy-host {9565  margin: 4px 4px 10px;9566  text-align: center;9567  min-height: 50px;9568}9569.peach-chirp-copy {9570  animation: peach-chirp-copy-in 0.35s ease both;9571}9572@keyframes peach-chirp-copy-in {9573  from { opacity: 0; transform: translateY(4px); }9574  to   { opacity: 1; transform: translateY(0); }9575}9576.peach-chirp-headline {9577  font-family: var(--font-display, Georgia, serif);9578  font-style: italic;9579  font-size: 20px;9580  font-weight: 500;9581  line-height: 1.2;9582  letter-spacing: 0.005em;9583  color: var(--peach-t0);9584  margin-bottom: 6px;9585}9586.peach-chirp-copy-listening .peach-chirp-headline,9587.peach-chirp-copy-chirping .peach-chirp-headline,9588.peach-chirp-copy-idle .peach-chirp-headline {9589  font-family: inherit;9590  font-style: normal;9591  font-weight: 500;9592  font-size: 15px;9593  color: var(--peach-t0);9594  letter-spacing: 0;9595}9596.peach-chirp-copy-paired .peach-chirp-headline {9597  color: var(--peach-t0);9598  font-weight: 600;9599}9600.peach-chirp-sub {9601  font-size: 12.5px;9602  line-height: 1.45;9603  color: var(--peach-t1);9604  max-width: 280px;9605  margin: 0 auto;9606  text-wrap: pretty;9607}96089609/* Status action -------------------------------------------------------- */9610.peach-chirp-action {9611  margin: 2px 4px 10px;9612  margin-top: auto;9613  display: flex;9614  flex-direction: column;9615  gap: 8px;9616}9617.peach-chirp-mic-notice {9618  margin: 0;9619  font-size: 0.625rem;9620  color: var(--peach-t2);9621  line-height: 1.4;9622}9623.peach-chirp-action-waiting {9624  display: flex;9625  align-items: center;9626  justify-content: space-between;9627  gap: 12px;9628}9629.peach-chirp-cancel {9630  min-width: 96px;9631}9632.peach-chirp-listening {9633  display: inline-flex; align-items: center; gap: 4px;9634  font-family: var(--peach-mono, ui-monospace, monospace);9635  font-size: 9.5px;9636  text-transform: uppercase;9637  letter-spacing: 0.12em;9638  color: var(--peach-t1);9639  padding: 8px 10px;9640}9641.peach-chirp-listen-dot {9642  width: 4px; height: 4px;9643  border-radius: 50%;9644  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9645  animation: peach-chirp-listen-pulse 1.2s ease-in-out infinite;9646}9647.peach-chirp-listen-dot:nth-child(2) { animation-delay: 0.2s; }9648.peach-chirp-listen-dot:nth-child(3) { animation-delay: 0.4s; }9649.peach-chirp-listen-label { margin-left: 6px; }9650@keyframes peach-chirp-listen-pulse {9651  0%, 100% { opacity: 0.25; transform: scale(0.9); }9652  50%      { opacity: 1;     transform: scale(1.15); }9653}96549655.peach-chirp-action-handshake {9656  display: flex;9657  flex-direction: column;9658  align-items: center;9659  gap: 8px;9660  padding: 8px 4px;9661}9662.peach-chirp-meter {9663  width: 100%;9664  max-width: 280px;9665  height: 2px;9666  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9667  border-radius: 2px;9668  position: relative;9669  overflow: hidden;9670}9671.peach-chirp-meter-bar {9672  position: absolute;9673  top: 0; bottom: 0;9674  width: 30%;9675  left: -30%;9676  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9677  animation: peach-chirp-meter-sweep 1.4s ease-in-out infinite;9678}9679@keyframes peach-chirp-meter-sweep {9680  0%   { left: -30%; }9681  100% { left: 100%; }9682}9683.peach-chirp-meter-label {9684  font-family: var(--peach-mono, ui-monospace, monospace);9685  font-size: 9.5px;9686  text-transform: uppercase;9687  letter-spacing: 0.14em;9688  color: var(--peach-t1);9689}96909691.peach-chirp-action-paired {9692  display: flex;9693  align-items: center;9694  gap: 10px;9695}9696.peach-chirp-device-confirm {9697  flex: 1;9698  display: inline-flex;9699  align-items: center;9700  gap: 8px;9701  padding: 9px 10px 9px 12px;9702  border-radius: 10px;9703  background: color-mix(in srgb, #76b6e8 12%, transparent);9704  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9705  font-size: 12.5px;9706  color: var(--peach-t0);9707  min-width: 0;9708}9709.peach-chirp-device-confirm-glyph {9710  display: inline-flex;9711  color: #76b6e8;9712}9713.peach-chirp-device-confirm-name {9714  flex: 1;9715  overflow: hidden;9716  text-overflow: ellipsis;9717  white-space: nowrap;9718}9719.peach-chirp-device-confirm-trust {9720  font-family: var(--peach-mono, ui-monospace, monospace);9721  font-size: 9.5px;9722  text-transform: uppercase;9723  letter-spacing: 0.1em;9724  color: #76b6e8;9725  padding: 2px 6px;9726  border-radius: 4px;9727  background: color-mix(in srgb, #76b6e8 14%, transparent);9728}9729.peach-chirp-done {9730  min-width: 80px;9731}9732.peach-chirp-retry {9733  align-self: center;9734  display: block;9735  margin: 6px auto 0;9736  min-width: 120px;9737}9738.peach-chirp-mic-help {9739  font-size: 12px;9740  color: var(--peach-t1);9741  text-align: center;9742  max-width: 320px;9743  margin: 0 auto;9744}97459746/* Rest state — bird stage at idle pose, primary CTA + paired list */9747.peach-chirp-pair[data-phase="idle"] .peach-chirp-stage {9748  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9749  height: 160px;9750}9751.peach-chirp-pair-start {9752  width: 100%;9753  display: inline-flex;9754  align-items: center;9755  justify-content: center;9756  gap: 8px;9757  padding: 11px 14px;9758  border-radius: 10px;9759  background: var(--peach-accent);9760  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9761  color: #1a0905;9762  font-family: inherit;9763  font-size: 13px;9764  font-weight: 600;9765  letter-spacing: 0.01em;9766  cursor: pointer;9767  transition: filter 0.15s ease, transform 0.1s ease;9768}9769.peach-chirp-pair-start:hover { filter: brightness(1.08); }9770.peach-chirp-pair-start:active { transform: translateY(1px); }97719772.peach-chirp-paired-section {9773  margin-top: 14px;9774  display: flex;9775  flex-direction: column;9776  gap: 8px;9777}9778.peach-chirp-paired-heading {9779  margin: 0;9780  font-family: var(--peach-mono, ui-monospace, monospace);9781  font-size: 10px;9782  font-weight: 500;9783  letter-spacing: 0.14em;9784  text-transform: uppercase;9785  color: var(--peach-t1);9786}97879788/* Footer --------------------------------------------------------------- */9789.peach-chirp-foot {9790  margin: 10px -4px -2px;9791  margin-top: auto;9792}9793.peach-chirp-foot-divider {9794  height: 1px;9795  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9796  margin-bottom: 10px;9797}9798.peach-chirp-foot-text {9799  font-size: 11px;9800  line-height: 1.5;9801  color: var(--peach-t1);9802  text-align: center;9803  padding: 0 4px;9804  text-wrap: pretty;9805}98069807/* Screen-reader-only live region. Kept off the visual flow but read by9808   assistive tech as the pairing phase advances. */9809.peach-sr-only {9810  position: absolute;9811  width: 1px; height: 1px;9812  padding: 0; margin: -1px;9813  overflow: hidden;9814  clip: rect(0, 0, 0, 0);9815  white-space: nowrap;9816  border: 0;9817}98189819/* Reduced motion — stage simplifies to opacity transitions only */9820@media (prefers-reduced-motion: reduce) {9821  .peach-chirp-bird-body,9822  .peach-chirp-bird-head-group,9823  .peach-chirp-bird-beak,9824  .peach-chirp-bird-wing,9825  .peach-chirp-bird-tuft,9826  .peach-chirp-bird-tail,9827  .peach-chirp-bird-eye-group,9828  .peach-chirp-bird-aura,9829  .peach-chirp-arc,9830  .peach-chirp-flight-path,9831  .peach-chirp-flight-path-2,9832  .peach-chirp-dot-glow,9833  .peach-chirp-dot-core,9834  .peach-chirp-dot-ring,9835  .peach-chirp-mote,9836  .peach-chirp-meter-bar,9837  .peach-chirp-listen-dot,9838  .peach-chirp-bird-slot,9839  .peach-chirp-bird-slot-mobile {9840    animation: none !important;9841    transition: opacity 0.2s linear !important;9842  }9843}98449845/* ─────────────────────────────────────────────────────────────────9846   Settings → Sync surface (v3 ChirpSync). Wraps the same bird9847   animation used by the pairing flow with a paired-devices list and9848   the "Pair a device" CTA.9849   ───────────────────────────────────────────────────────────────── */9850.peach-chirp-settings {9851  position: absolute;9852  inset: 0;9853  z-index: 3;9854  display: flex;9855  flex-direction: column;9856  gap: 18px;9857  padding: 14px 12px 12px;9858  width: 100%;9859  box-sizing: border-box;9860  overflow-y: auto;9861  overflow-x: hidden;9862  /* Same warm Chirp surface as the pairing screen — unifies the two views. */9863  background:9864    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9865    var(--peach-bg);9866  color: var(--peach-t0);9867  isolation: isolate;9868  /* Hide native scrollbar — content fits 99% of the time and a chunky9869     gutter ruins the surface. */9870  scrollbar-width: none;9871  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9872}9873.peach-chirp-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9874.peach-chirp-settings::before {9875  content: '';9876  position: absolute;9877  inset: 0;9878  pointer-events: none;9879  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9880  z-index: 0;9881}9882.peach-chirp-settings > * { position: relative; z-index: 1; }98839884.peach-chirp-settings--pairing {9885  padding: 0;9886  align-items: stretch;9887  justify-content: stretch;9888  background: none;9889  isolation: auto;9890}9891.peach-chirp-settings--pairing::before { display: none; }98929893.peach-chirp-settings-header {9894  display: flex;9895  align-items: center;9896  gap: 10px;9897}9898.peach-chirp-settings-title {9899  margin: 0;9900  font-family: var(--font-display, Georgia, serif);9901  font-style: italic;9902  font-size: 24px;9903  font-weight: 500;9904  line-height: 1;9905  color: var(--peach-t0);9906  letter-spacing: 0.005em;9907}9908.peach-chirp-settings-section {9909  margin: 6px 0 -4px;9910  font-size: 11px;9911  font-weight: 600;9912  letter-spacing: 0.08em;9913  text-transform: uppercase;9914  color: var(--peach-text-muted);9915}9916.peach-chirp-settings-error {9917  font-size: 12px;9918  padding: 8px 10px;9919  border-radius: 8px;9920  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);9921  color: var(--peach-text);9922}9923.peach-chirp-settings-footer {9924  margin-top: auto;9925  padding-top: 18px;9926  font-size: 11.5px;9927  line-height: 1.5;9928  color: var(--peach-text-muted);9929  text-align: center;9930}99319932/* Hero card shown when no devices are paired yet. */9933.peach-chirp-hero {9934  display: flex;9935  flex-direction: column;9936  align-items: center;9937  gap: 12px;9938  padding: 20px 12px 8px;9939  text-align: center;9940}9941.peach-chirp-hero-svg {9942  display: block;9943  max-width: 100%;9944  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));9945}9946.peach-chirp-hero-headline {9947  margin: 0;9948  font-family: var(--font-display, Georgia, serif);9949  font-style: italic;9950  font-size: 20px;9951  font-weight: 500;9952  line-height: 1.2;9953  letter-spacing: 0.005em;9954  color: var(--peach-t0);9955}9956.peach-chirp-hero-sub {9957  margin: 0;9958  font-size: 13px;9959  line-height: 1.5;9960  color: var(--peach-t1);9961  max-width: 320px;9962  text-wrap: pretty;9963}99649965.peach-chirp-pair-cta {9966  display: flex;9967  justify-content: center;9968  padding: 4px 0 6px;9969}9970.peach-chirp-pair-button {9971  display: inline-flex;9972  align-items: center;9973  gap: 8px;9974  min-width: 220px;9975  justify-content: center;9976}9977.peach-chirp-pair-button-icon {9978  flex: 0 0 auto;9979}99809981/* Paired devices list. Roomy rows that look at home next to the rest9982   of Settings; stale rows get a soft warm-warning border tint. */9983.peach-chirp-device-list {9984  list-style: none;9985  margin: 0;9986  padding: 0;9987  display: flex;9988  flex-direction: column;9989  gap: 8px;9990}9991.peach-chirp-device-row {9992  display: flex;9993  align-items: center;9994  gap: 12px;9995  padding: 12px;9996  border-radius: 10px;9997  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9998  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);9999}10000.peach-chirp-device-row[data-stale="true"] {10001  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);10002}10003.peach-chirp-device-icon {10004  width: 32px;10005  height: 32px;10006  display: flex;10007  align-items: center;10008  justify-content: center;10009  border-radius: 8px;10010  color: var(--peach-text);10011  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);10012}10013.peach-chirp-device-info {10014  flex: 1;10015  display: flex;10016  flex-direction: column;10017  gap: 2px;10018  min-width: 0;10019}10020.peach-chirp-device-name {10021  font-size: 14px;10022  font-weight: 600;10023  color: var(--peach-text);10024  overflow: hidden;10025  text-overflow: ellipsis;10026  white-space: nowrap;10027}10028.peach-chirp-device-meta {10029  font-size: 11.5px;10030  color: var(--peach-text-muted);10031  display: flex;10032  flex-wrap: wrap;10033  align-items: center;10034  gap: 8px;10035}10036.peach-chirp-device-badge {10037  font-size: 10.5px;10038  font-weight: 500;10039  letter-spacing: 0.02em;10040  padding: 2px 6px;10041  border-radius: 999px;10042  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);10043  color: var(--peach-text);10044}10045.peach-chirp-device-stale {10046  font-size: 10.5px;10047  font-weight: 500;10048  color: var(--peach-warn, #d29257);10049}10050.peach-chirp-device-remove {10051  flex: 0 0 auto;10052  color: var(--peach-text-muted);10053}10054.peach-chirp-device-remove:hover {10055  color: var(--peach-danger, #c25b4a);10056}10057.peach-chirp-unpair-confirm {10058  display: flex;10059  gap: 6px;10060  align-items: center;10061}1006210063/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */10064.peach-chirp-pro-card {10065  position: relative;10066  margin: 18px 12px;10067  padding: 18px 20px 22px;10068  border-radius: 22px;10069  background:10070    radial-gradient(140% 90% at 50% 0%,10071      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,10072      transparent 60%),10073    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10074  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);10075  box-shadow:10076    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,10077    0 18px 40px -24px rgba(0, 0, 0, 0.45);10078  display: flex;10079  flex-direction: column;10080  align-items: center;10081  gap: 10px;10082  text-align: center;10083  overflow: hidden;10084}10085.peach-chirp-pro-stage {10086  position: relative;10087  width: 220px;10088  height: 140px;10089  display: flex;10090  align-items: flex-end;10091  justify-content: center;10092  margin-bottom: 2px;10093}10094.peach-chirp-pro-bird-slot {10095  width: 140px;10096  height: 132px;10097  display: flex;10098  align-items: flex-end;10099  justify-content: center;10100  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));10101}10102.peach-chirp-pro-bird-slot .peach-chirp-bird {10103  width: 100%;10104  height: 100%;10105}10106.peach-chirp-pro-bird-slot .peach-chirp-bird svg {10107  width: 100%;10108  height: 100%;10109  overflow: visible;10110}10111.peach-chirp-pro-chirp {10112  position: absolute;10113  top: 14px;10114  right: 8px;10115  width: 96px;10116  height: 80px;10117  color: var(--peach-accent);10118  animation: peach-chirp-pulse 2.6s ease-in-out infinite;10119  transform-origin: 0% 50%;10120  pointer-events: none;10121}10122@keyframes peach-chirp-pulse {10123  0%, 100% { opacity: 0.35; transform: translateX(0) scale(0.92); }10124  45%      { opacity: 1;    transform: translateX(2px) scale(1); }10125  70%      { opacity: 0.6;  transform: translateX(4px) scale(1.04); }10126}10127@media (prefers-reduced-motion: reduce) {10128  .peach-chirp-pro-chirp { animation: none; opacity: 0.7; }10129}10130.peach-chirp-pro-headline {10131  margin: 4px 0 0;10132  font-family: var(--font-display, "Cormorant Garamond", serif);10133  font-style: italic;10134  font-size: 19px;10135  font-weight: 500;10136  letter-spacing: 0.01em;10137  color: var(--peach-t0);10138  max-width: 280px;10139  line-height: 1.25;10140}10141.peach-chirp-pro-body {10142  margin: 0;10143  font-size: 13px;10144  line-height: 1.55;10145  color: var(--peach-t1);10146  max-width: 300px;10147}10148.peach-chirp-pro-cta {10149  margin-top: 4px;10150}10151.peach-chirp-pro-foot {10152  margin: 2px 0 0;10153  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10154  font-size: 0.625rem;10155  letter-spacing: 0.08em;10156  text-transform: uppercase;10157  color: var(--peach-t2);10158  opacity: 0.75;10159}1016010161/* Shell border and shadow in light mode: match dark mode's near-invisible10162   border weight so the popup frame looks the same in both themes. */10163.light .peach-shell,10164.light .peach-screen {10165  border-color: rgba(26, 18, 8, 0.07);10166  box-shadow:10167    0 2px 8px rgba(80, 56, 32, 0.08),10168    0 14px 48px rgba(80, 56, 32, 0.10),10169    0 0 0 1px rgba(26, 18, 8, 0.04);10170}