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/* Desktop helper (peach-sync) code pairing — additive hooks. The chirp pairing1031   classes (peach-chirp-*) carry the shared layout; these only style the parts1032   unique to the typed-code path. Inline styles cover the SAS/confirm gate. */1033.peach-desktop-pair { display: flex; flex-direction: column; }1034.peach-desktop-enter,1035.peach-desktop-searching,1036.peach-desktop-paired,1037.peach-desktop-error {1038  display: flex; flex-direction: column; gap: 8px;1039  padding: 4px 18px 16px; text-align: center; align-items: center;1040}1041.peach-desktop-enter .peach-label { align-self: flex-start; }1042.peach-code-input {1043  text-align: center; letter-spacing: 0.42em; padding-left: 0.42em;1044}1045.peach-code-input::placeholder { letter-spacing: 0.42em; }1046/* Method chooser — two large tappable cards before the birds appear. */1047.peach-pair-method-list {1048  display: flex; flex-direction: column; gap: 10px; padding: 4px 18px 8px;1049}1050.peach-pair-method {1051  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;1052  width: 100%; text-align: left;1053}1054.peach-pair-method-title { font-size: 0.875rem; font-weight: 600; }1055.peach-pair-method-sub { font-size: 0.6875rem; color: var(--peach-t2); }1056.peach-chirp-pair-start--desktop {1057  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1058}10591060/* Breach badge */1061.peach-breach-badge {1062  display: flex;1063  position: relative;1064  z-index: 1;1065  align-items: center;1066  gap: 7px;1067  font-size: 0.5625rem;1068  color: var(--peach-breach);1069  padding: 5px 10px;1070  margin-bottom: 4px;1071  border-radius: 8px;1072  background: rgba(220, 80, 60, 0.07);1073  border: 1px solid rgba(220, 80, 60, 0.18);1074  letter-spacing: 0.04em;1075}10761077.peach-password-value.is-breached {1078  color: rgba(220, 80, 60, 0.75);1079  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1080}10811082/* ── Overlay views ─────────────────────────────────────────────────── */1083.peach-overlay-view {1084  position: absolute;1085  inset: 0;1086  display: flex;1087  flex-direction: column;1088  background:1089    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1090    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1091    var(--peach-bg);1092  z-index: 2;1093  overflow: hidden;1094  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1095}10961097.peach-overlay-view:has(.stk-shell) {1098  background: var(--peach-bg);1099}1100@keyframes overlay-in {1101  from { opacity: 0; transform: translateY(8px); }1102  to   { opacity: 1; transform: translateY(0); }1103}1104.peach-overlay-view.ov-enter-up {1105  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1106}1107.peach-overlay-view.ov-exit-up {1108  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1109}1110.peach-overlay-view.ov-enter-right {1111  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1112}1113.peach-overlay-view.ov-exit-right {1114  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1115}11161117@keyframes ov-enter-up {1118  from { opacity: 0; transform: translateY(18px); }1119  to   { opacity: 1; transform: translateY(0); }1120}1121@keyframes ov-exit-up {1122  from { opacity: 1; transform: translateY(0); }1123  to   { opacity: 0; transform: translateY(-12px); }1124}1125@keyframes ov-enter-right {1126  from { opacity: 0; transform: translateX(20px); }1127  to   { opacity: 1; transform: translateX(0); }1128}1129@keyframes ov-exit-right {1130  from { opacity: 1; transform: translateX(0); }1131  to   { opacity: 0; transform: translateX(20px); }1132}11331134/* Overlay shared header */1135.peach-overlay-header {1136  padding: 10px 12px 8px;1137  display: flex;1138  align-items: center;1139  gap: 10px;1140  flex-shrink: 0;1141}1142/* Back button — circular pill matching the settings stack masthead (.stk-back) */1143.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1144  width: 28px;1145  height: 28px;1146  flex: 0 0 28px;1147  border-radius: 999px;1148  border: 1px solid var(--peach-border);1149  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1150  color: var(--peach-t1);1151  padding: 0;1152}1153.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1154  color: var(--peach-t0);1155  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1156  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1157}1158.peach-overlay-title {1159  font-family: var(--font-display);1160  font-style: italic;1161  font-weight: 400;1162  font-size: 20px;1163  line-height: 1;1164  color: var(--peach-t0);1165  flex: 1;1166  text-align: center;1167}1168/* Balances the 28px back button so the title stays visually centred */1169.peach-overlay-spacer {1170  width: 28px;1171  flex: 0 0 28px;1172}11731174.peach-overlay-card {1175  background: var(--peach-s1);1176  border: 1px solid var(--peach-t3);1177  border-radius: 12px;1178  overflow: hidden;1179  width: 100%;1180}11811182.peach-onboarding-alt-actions {1183  display: flex;1184  flex-direction: column;1185  gap: 4px;1186  padding: 0;1187}11881189.peach-settings-copy {1190  margin: 0 0 10px;1191  font-size: 0.6875rem;1192  line-height: 1.5;1193  color: var(--peach-t2);1194}11951196.peach-settings-copy strong {1197  color: var(--peach-t0);1198}11991200.peach-settings-copy--spacious {1201  margin-bottom: 12px;1202}12031204.peach-settings-copy--result {1205  color: var(--peach-accent);1206  font-size: 0.8125rem;1207  text-align: center;1208  padding: 8px 0;1209}12101211.peach-settings-copy--danger {1212  color: var(--peach-breach);1213}12141215.peach-settings-copy--success {1216  color: var(--peach-accent);1217}12181219.peach-inline-feedback {1220  font-size: 0.6875rem;1221  margin: 10px 0 0;1222}12231224.peach-inline-feedback--ok {1225  color: var(--peach-accent);1226}12271228.peach-inline-feedback--error {1229  color: var(--peach-breach);1230}12311232.peach-inline-feedback--muted {1233  color: var(--peach-t2);1234  font-size: 0.625rem;1235  margin: 4px 0;1236}12371238.peach-inline-feedback--spaced {1239  margin-top: 12px;1240}12411242.peach-settings-actions--row {1243  display: flex;1244  gap: 6px;1245}12461247.peach-settings-actions--end {1248  margin-top: 14px;1249  justify-content: flex-end;1250}12511252.peach-settings-stack {1253  display: flex;1254  flex-direction: column;1255  gap: 6px;1256}12571258.peach-settings-stack--tight {1259  gap: 4px;1260}12611262.peach-settings-stack--spacious {1263  gap: 8px;1264}12651266.peach-settings-input {1267  width: 100%;1268  box-sizing: border-box;1269  padding: 8px 10px;1270  background: rgba(0, 0, 0, 0.22);1271  border: 1px solid transparent;1272  border-radius: 6px;1273  color: var(--peach-t0);1274  font-family: var(--font-ui);1275  font-size: 0.75rem;1276  outline: none;1277  transition: border-color 120ms ease, background 120ms ease;1278}12791280.peach-settings-input:focus {1281  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1282  background: rgba(0, 0, 0, 0.28);1283}12841285.peach-settings-input[type="password"] {1286  font-family: var(--font-mono);1287  letter-spacing: 0.04em;1288}12891290.peach-hidden-file-input {1291  display: none;1292}12931294.peach-checkbox-note {1295  display: flex;1296  align-items: flex-start;1297  gap: 8px;1298  font-size: 0.6875rem;1299  color: var(--peach-t1);1300  cursor: pointer;1301  margin: 12px 0;1302}13031304.peach-checkbox-note input {1305  margin-top: 1px;1306}13071308.peach-danger-notice {1309  background: rgba(220, 80, 60, 0.08);1310  border: 1px solid rgba(220, 80, 60, 0.2);1311  border-radius: 6px;1312  padding: 9px 11px;1313  font-size: 0.6875rem;1314  color: var(--peach-t1);1315  line-height: 1.5;1316}13171318.peach-info-notice {1319  font-size: 0.6875rem;1320  color: var(--peach-t1);1321  line-height: 1.5;1322  background: var(--surface-card);1323  border: 1px solid var(--peach-t3);1324  border-radius: 6px;1325  padding: 8px 10px;1326}13271328.peach-info-notice--warn {1329  border-color: rgba(220, 38, 38, 0.4);1330  background: rgba(220, 38, 38, 0.06);1331  color: rgba(220, 38, 38, 0.92);1332  margin-bottom: 8px;1333}13341335/* Warm helpful-context note — reads as a soft aside, not an alert. */1336.peach-info-notice--note {1337  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);1338  border-color: color-mix(in srgb, var(--peach-accent) 18%, transparent);1339  color: var(--peach-t2);1340}13411342.peach-strength-row {1343  display: flex;1344  align-items: center;1345  gap: 8px;1346  margin-bottom: 10px;1347}13481349.peach-strength-track {1350  flex: 1;1351  height: 4px;1352  background: var(--peach-s2);1353  border-radius: 2px;1354  overflow: hidden;1355}13561357.peach-strength-fill {1358  height: 100%;1359  border-radius: 2px;1360  transition: width 120ms ease, background 120ms ease;1361}13621363/* ── Type selector tabs ── */1364.peach-type-tabs {1365  display: flex;1366  gap: 0;1367  background: var(--peach-t4);1368  border-radius: 8px;1369  padding: 3px;1370}13711372.peach-type-tab {1373  flex: 1;1374  display: flex;1375  align-items: center;1376  justify-content: center;1377  gap: 6px;1378  padding: 6px 10px;1379  border-radius: 6px;1380  border: none;1381  background: transparent;1382  cursor: pointer;1383  font-family: Inter, system-ui, sans-serif;1384  font-size: 0.6875rem;1385  font-weight: 400;1386  letter-spacing: 0.04em;1387  color: var(--peach-t1);1388  transition: background 150ms ease, color 150ms ease;1389}13901391.peach-type-tab.is-active {1392  background: var(--peach-s2);1393  color: var(--peach-t0);1394  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1395}13961397.peach-type-tab:not(.is-active):hover {1398  color: var(--peach-t0);1399}14001401.peach-type-tab svg {1402  opacity: 0.7;1403  flex-shrink: 0;1404}14051406.peach-type-tab.is-active svg {1407  opacity: 1;1408}14091410/* ── List view ───────────────────────────────────────────────────────── */1411.peach-list-top {1412  padding: 0 10px;1413  min-height: 46px;1414  display: flex;1415  align-items: center;1416  gap: 6px;1417  border-bottom: 1px solid var(--peach-t3);1418  flex-shrink: 0;1419  background: var(--peach-s1);1420}14211422.peach-vault-list {1423  flex: 1;1424  overflow-y: auto;1425  scrollbar-width: none;1426}1427.peach-vault-list::-webkit-scrollbar { display: none; }14281429/* Scrollbar — vault list */1430.peach-vault-list {1431  scrollbar-width: thin;1432  scrollbar-color: var(--peach-t3) transparent;1433}14341435.peach-vault-list::-webkit-scrollbar {1436  width: 3px;1437}14381439.peach-vault-list::-webkit-scrollbar-thumb {1440  background: var(--peach-t3);1441  border-radius: 2px;1442}14431444.peach-entry-row {1445  width: 100%;1446  display: flex;1447  align-items: center;1448  gap: 10px;1449  padding: 9px 16px;1450  background: transparent;1451  border: none;1452  border-bottom: 1px solid var(--peach-t3);1453  cursor: pointer;1454  color: inherit;1455  text-align: left;1456  transition: background 80ms ease;1457}1458.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1459.peach-entry-row:last-child { border-bottom: none; }1460.peach-entry-row.is-active {1461  box-shadow: inset 2px 0 0 var(--peach-accent);1462  background: rgba(240,232,216,0.03);1463}1464.peach-entry-row:focus-visible {1465  outline: none;1466  box-shadow: 0 0 0 1px var(--peach-border-accent);1467  background: rgba(240,232,216,0.03);1468}1469.peach-entry-row-icon {1470  width: 26px; height: 26px;1471  border-radius: 7px;1472  border: 1px solid var(--peach-t3);1473  display: flex; align-items: center; justify-content: center;1474  color: var(--peach-t2);1475  flex-shrink: 0;1476}1477.peach-entry-row-icon.is-breach {1478  border-color: rgba(220,80,60,0.3);1479  color: rgba(220,80,60,0.7);1480}14811482/* Title-initials chip used as the favicon fallback for login entries whose1483 * real favicon hasn't been cached by the browser yet (freshly-imported,1484 * never-visited domains). Background colour is hashed from the title so1485 * the same entry always shows the same chip. The chip fits the same1486 * 26×26 row icon slot the favicon would take. */1487.peach-favicon-initials {1488  display: inline-flex;1489  align-items: center;1490  justify-content: center;1491  width: 100%;1492  height: 100%;1493  border-radius: 4px;1494  font-family: "IBM Plex Mono", monospace;1495  font-size: 0.5625rem;1496  font-weight: 600;1497  letter-spacing: 0.04em;1498  color: rgba(240, 232, 216, 0.92);1499  text-transform: uppercase;1500  user-select: none;1501}1502.peach-entry-row-info { flex: 1; min-width: 0; }1503.peach-entry-row-name {1504  display: block;1505  font-family: var(--font-display);1506  font-size: 1.0625rem;1507  font-style: italic;1508  font-weight: 400;1509  color: var(--peach-t0);1510  line-height: 1.2;1511  white-space: nowrap;1512  overflow: hidden;1513  text-overflow: ellipsis;1514}1515.peach-entry-row-meta {1516  display: block;1517  font-family: "IBM Plex Mono", monospace;1518  font-size: 0.5625rem;1519  color: var(--peach-t2);1520  margin-top: 1px;1521  letter-spacing: 0.05em;1522}1523.peach-entry-row-dot {1524  width: 5px; height: 5px;1525  border-radius: 50%;1526  background: rgba(220,80,60,0.7);1527  flex-shrink: 0;1528}1529.peach-new-entry-row {1530  display: flex;1531  align-items: center;1532  justify-content: center;1533  gap: 6px;1534  width: 100%;1535  padding: 11px;1536  background: transparent;1537  border: none;1538  border-top: 1px solid var(--peach-t3);1539  color: var(--peach-t2);1540  font-family: "IBM Plex Mono", monospace;1541  font-size: 0.5625rem;1542  text-transform: uppercase;1543  letter-spacing: 0.14em;1544  cursor: pointer;1545  flex-shrink: 0;1546  transition: color 120ms ease, background 120ms ease;1547}1548.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }15491550/* ── Multi-select mode ─────────────────────────────────────────────── */15511552/* Select-mode trigger button in sort bar — same shape as trash btn */1553.peach-sort-select-btn {1554  display: flex;1555  align-items: center;1556  justify-content: center;1557  padding: 3px 5px;1558  background: transparent;1559  border: none;1560  cursor: pointer;1561  color: var(--peach-t2);1562  border-radius: 4px;1563  transition: color 140ms ease, background 140ms ease;1564}1565.peach-sort-select-btn:hover {1566  color: var(--peach-t1);1567  background: var(--peach-t3);1568}15691570/* Sort bar in select mode */1571.peach-select-cancel-btn {1572  background: transparent;1573  border: none;1574  padding: 0 4px;1575  cursor: pointer;1576  font-family: "IBM Plex Mono", monospace;1577  font-size: 0.5625rem;1578  letter-spacing: 0.12em;1579  text-transform: uppercase;1580  color: var(--peach-t2);1581  transition: color 140ms ease;1582  flex-shrink: 0;1583}1584.peach-select-cancel-btn:hover { color: var(--peach-t0); }15851586.peach-select-count-label {1587  flex: 1;1588  text-align: center;1589  font-family: "IBM Plex Mono", monospace;1590  font-size: 0.5625rem;1591  letter-spacing: 0.14em;1592  text-transform: uppercase;1593  color: var(--peach-t1);1594}15951596.peach-select-all-btn {1597  background: transparent;1598  border: none;1599  padding: 0 4px;1600  cursor: pointer;1601  font-family: "IBM Plex Mono", monospace;1602  font-size: 0.5625rem;1603  letter-spacing: 0.12em;1604  text-transform: uppercase;1605  color: var(--peach-t2);1606  transition: color 140ms ease;1607  flex-shrink: 0;1608}1609.peach-select-all-btn:hover { color: var(--peach-accent); }16101611/* List in select mode */1612.peach-vault-list.is-selecting .peach-entry-row {1613  cursor: default;1614}1615.peach-vault-list.is-selecting .peach-entry-row:hover {1616  background: rgba(240,232,216,0.02);1617}1618.peach-vault-list.is-selecting .peach-entry-row.is-selected {1619  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1620}1621.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1622  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1623}16241625/* Select indicator circles in icon slot */1626.peach-entry-row-icon.is-select-icon {1627  color: var(--peach-t2);1628}1629.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1630  color: var(--peach-accent);1631}16321633/* Delete action bar at bottom (replaces new-entry row) */1634.peach-select-action-bar {1635  display: flex;1636  align-items: center;1637  justify-content: center;1638  gap: 7px;1639  width: 100%;1640  padding: 11px;1641  background: transparent;1642  border: none;1643  border-top: 1px solid var(--peach-t3);1644  color: var(--peach-t1);1645  font-family: "IBM Plex Mono", monospace;1646  font-size: 0.5625rem;1647  text-transform: uppercase;1648  letter-spacing: 0.14em;1649  cursor: pointer;1650  flex-shrink: 0;1651  transition: color 120ms ease, background 120ms ease;1652}1653.peach-select-action-bar:not(:disabled):hover {1654  color: var(--peach-t0);1655  background: rgba(220,80,60,0.06);1656}1657.peach-select-action-bar:not(:disabled):hover svg {1658  stroke: rgba(220,80,60,0.8);1659}1660.peach-select-action-bar:disabled,1661.peach-select-action-bar.is-empty {1662  color: var(--peach-t2);1663  cursor: default;1664  opacity: 0.5;1665}1666.peach-search-counter-list {1667  white-space: nowrap;1668  flex-shrink: 0;1669}1670.peach-list-empty {1671  min-height: 180px;1672  display: grid;1673  place-items: center;1674  color: var(--peach-t2);1675  font-family: "IBM Plex Mono", monospace;1676  font-size: 0.6875rem;1677}16781679/* ── Settings view ───────────────────────────────────────────────────── */1680.peach-settings-body {1681  flex: 1;1682  overflow-y: auto;1683  min-height: 0;1684  display: flex;1685  flex-direction: column;1686  padding: 2px 0 10px;1687}1688.peach-settings-group {1689  margin: 4px 10px;1690  padding: 9px 14px 11px;1691  border-radius: 12px;1692  border: 1px solid rgba(255, 255, 255, 0.07);1693  background: rgba(26, 20, 16, 0.60);1694  backdrop-filter: blur(10px) saturate(1.3);1695  -webkit-backdrop-filter: blur(10px) saturate(1.3);1696}16971698.peach-settings-group + .peach-settings-group {1699  margin-top: 6px;1700}17011702@supports not (backdrop-filter: blur(1px)) {1703  .peach-settings-group {1704    background: rgba(26, 20, 16, 0.90);1705    border-color: rgba(255, 255, 255, 0.09);1706    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1707  }1708}17091710.light .peach-settings-group,1711[data-theme="light"] .peach-settings-group {1712  background: rgba(245, 237, 226, 0.70);1713  border-color: rgba(26, 18, 8, 0.08);1714  backdrop-filter: blur(10px) saturate(1.2);1715  -webkit-backdrop-filter: blur(10px) saturate(1.2);1716}17171718@supports not (backdrop-filter: blur(1px)) {1719  .light .peach-settings-group,1720  [data-theme="light"] .peach-settings-group {1721    background: rgba(245, 237, 226, 0.97);1722    border-color: rgba(26, 18, 8, 0.10);1723  }1724}1725.peach-export-intro {1726  padding-bottom: 8px;1727}1728.peach-export-card {1729  display: grid;1730  gap: 10px;1731}1732.peach-rune-canvas {1733  border-radius: 8px;1734  background: rgba(0, 0, 0, 0.22);1735  flex: 1;1736  align-self: center;1737}1738.peach-script-input {1739  font-family: "PeachScript", monospace;1740  font-size: 0.6875rem;1741  line-height: 1.9;1742  letter-spacing: 0.06em;1743  color: var(--peach-t0);1744  background: rgba(0, 0, 0, 0.22);1745  border: none;1746  border-radius: 6px;1747  padding: 12px;1748  width: 100%;1749  min-height: 96px;1750  resize: vertical;1751  word-break: break-all;1752  scrollbar-width: none;1753  -ms-overflow-style: none;1754}17551756.peach-script-input::-webkit-scrollbar { display: none; }1757.peach-csv-warning {1758  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1759  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1760  color: var(--peach-t0);1761  border-radius: 6px;1762  padding: 10px 12px;1763  margin-bottom: 8px;1764  font-size: 0.75rem;1765  line-height: 1.45;1766}1767.peach-export-card--primary {1768  background:1769    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1770}17711772/* Export menu — distribute the three format cards across the popup. */1773.peach-export-menu {1774  display: flex;1775  flex-direction: column;1776  flex: 1;1777  min-height: 0;1778}1779.peach-export-menu .peach-settings-group {1780  flex: 1;1781  display: flex;1782  flex-direction: column;1783  justify-content: center;1784  gap: 10px;1785}17861787/* Result view — the script-string fills the remaining vertical surface. */1788.peach-export-result-group {1789  flex: 1;1790  display: flex;1791  flex-direction: column;1792  min-height: 0;1793  border-bottom: none;1794}1795.peach-export-result-group .peach-export-card {1796  flex: 1;1797  min-height: 0;1798  display: flex;1799  flex-direction: column;1800  gap: 10px;1801}1802.peach-export-result-group .peach-export-card-copy {1803  flex-shrink: 0;1804}1805.peach-export-result-group .peach-settings-label {1806  flex-shrink: 0;1807}1808.peach-export-result-group button {1809  flex-shrink: 0;1810}1811.peach-export-card-head {1812  display: flex;1813  align-items: center;1814  justify-content: space-between;1815  gap: 10px;1816}1817.peach-export-card-copy {1818  margin: 0;1819  font-size: 0.75rem;1820  line-height: 1.55;1821  color: var(--peach-t1);1822}1823.peach-export-note {1824  margin: 0;1825  font-size: 0.625rem;1826  line-height: 1.5;1827  color: var(--peach-t2);1828}1829.peach-export-strength-track {1830  height: 3px;1831  background: var(--peach-border);1832  border-radius: 2px;1833  margin: 4px 0 2px;1834  overflow: hidden;1835}1836.peach-export-strength-fill {1837  height: 100%;1838  border-radius: 2px;1839  transition: width 250ms ease, background 250ms ease;1840}1841.peach-export-strength-warn {1842  margin: 0;1843  font-size: 0.625rem;1844  line-height: 1.5;1845  color: #e84040;1846  font-family: "IBM Plex Mono", monospace;1847}1848.peach-export-strength-hint {1849  margin: 0;1850  font-size: 0.625rem;1851  line-height: 1.5;1852  color: var(--peach-t2);1853  font-family: "IBM Plex Mono", monospace;1854}1855.peach-export-pill {1856  display: inline-flex;1857  align-items: center;1858  padding: 4px 8px;1859  border-radius: 999px;1860  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1861  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1862  color: var(--peach-accent);1863  font-family: "IBM Plex Mono", monospace;1864  font-size: 0.5rem;1865  letter-spacing: 0.12em;1866  text-transform: uppercase;1867  white-space: nowrap;1868}1869.peach-export-pill--danger {1870  border-color: rgba(220,80,60,0.22);1871  background: rgba(220,80,60,0.08);1872  color: var(--peach-breach);1873}1874.peach-settings-label {1875  margin: 0 0 6px;1876  font-family: "IBM Plex Mono", monospace;1877  font-size: 0.5rem;1878  text-transform: uppercase;1879  letter-spacing: 0.18em;1880  color: var(--peach-t2);1881}1882.peach-settings-row {1883  display: flex;1884  align-items: center;1885  justify-content: space-between;1886  gap: 12px;1887  min-height: 34px;1888  padding: 6px 0;1889  font-size: 0.8125rem;1890  color: var(--peach-t1);1891}1892.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1893.peach-settings-value {1894  font-family: "IBM Plex Mono", monospace;1895  font-size: 0.625rem;1896  color: var(--peach-t2);1897}18981899.peach-settings-value--status {1900  display: flex;1901  align-items: center;1902  gap: 6px;1903}19041905.peach-settings-link {1906  font-family: "IBM Plex Mono", monospace;1907  font-size: 0.625rem;1908  color: var(--peach-accent);1909  text-decoration: none;1910  cursor: pointer;1911}1912.peach-settings-link:hover {1913  text-decoration: underline;1914}19151916.peach-settings-row--stack {1917  flex-direction: column;1918  align-items: stretch;1919  gap: 6px;1920}19211922.peach-settings-row--top {1923  align-items: flex-start;1924}19251926.peach-settings-row-main {1927  display: flex;1928  flex-direction: column;1929  gap: 4px;1930  flex: 1;1931}1932.peach-toggle {1933  width: 28px; height: 16px;1934  border-radius: 999px;1935  background: var(--peach-t3);1936  border: 1px solid var(--peach-t3);1937  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1938  flex-shrink: 0;1939  transition: background 200ms ease, border-color 200ms ease;1940  cursor: pointer;1941}1942.peach-toggle.is-on {1943  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1944  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1945}1946.peach-toggle-knob {1947  width: 10px; height: 10px;1948  border-radius: 50%;1949  background: var(--peach-t2);1950  flex-shrink: 0;1951  transform: translateX(0px);1952  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1953}1954.peach-toggle.is-on .peach-toggle-knob {1955  background: var(--peach-accent);1956  transform: translateX(12px);1957}1958.peach-settings-footer {1959  display: flex;1960  align-items: center;1961  gap: 8px;1962  margin-top: auto;1963  padding: 14px 16px 8px;1964  font-family: "IBM Plex Mono", monospace;1965  font-size: 0.5625rem;1966  color: var(--peach-t2);1967}19681969/* ── Settings home navigation ──────────────────────────────────────────── */1970.peach-settings-nav-label {1971  margin: 0 0 2px;1972  padding: 12px 16px 4px;1973  font-family: "IBM Plex Mono", monospace;1974  font-size: 0.5rem;1975  text-transform: uppercase;1976  letter-spacing: 0.18em;1977  color: var(--peach-t2);1978}19791980.peach-settings-cat-row {1981  display: flex;1982  align-items: center;1983  gap: 10px;1984  width: 100%;1985  padding: 9px 16px;1986  background: none;1987  border: none;1988  border-bottom: 1px solid var(--peach-t3);1989  cursor: pointer;1990  text-align: left;1991  color: inherit;1992  transition: background var(--peach-dur-80) ease;1993}1994.peach-settings-cat-row:hover {1995  background: var(--peach-t3);1996}1997.peach-settings-cat-row:last-child {1998  border-bottom: none;1999}20002001.peach-settings-cat-icon {2002  width: 28px;2003  height: 28px;2004  border-radius: 7px;2005  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2006  color: var(--peach-accent);2007  display: flex;2008  align-items: center;2009  justify-content: center;2010  flex-shrink: 0;2011}2012/* Light theme: peach-on-cream is too low-contrast — both colors are warm.2013   Darken the icon stroke to ink and bump the bg tint so the icon reads2014   sharply while the cell still feels accent-tinted. */2015.light .peach-settings-cat-icon {2016  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);2017  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));2018}20192020.peach-settings-cat-content {2021  flex: 1;2022  display: flex;2023  flex-direction: column;2024  gap: 2px;2025  min-width: 0;2026}20272028.peach-settings-cat-name {2029  font-size: 0.8125rem;2030  font-weight: 450;2031  color: var(--peach-t0);2032  line-height: 1.2;2033}20342035.peach-settings-cat-desc {2036  font-size: 0.625rem;2037  color: var(--peach-t2);2038  line-height: 1.3;2039  white-space: nowrap;2040  overflow: hidden;2041  text-overflow: ellipsis;2042}20432044.peach-settings-cat-chevron {2045  color: var(--peach-t2);2046  flex-shrink: 0;2047  opacity: 0.5;2048}20492050/* ── Settings sub-view section labels ──────────────────────────────────── */2051.peach-settings-sub-label {2052  margin: 12px 0 4px;2053  font-family: "IBM Plex Mono", monospace;2054  font-size: 0.5rem;2055  text-transform: uppercase;2056  letter-spacing: 0.18em;2057  color: var(--peach-t2);2058}2059.peach-settings-sub-label:first-child {2060  margin-top: 4px;2061}20622063/* ── Settings: collapsible Advanced section ─────────────────────────────── */2064.peach-settings-advanced-toggle {2065  display: flex;2066  align-items: center;2067  justify-content: space-between;2068  width: 100%;2069  background: none;2070  border: none;2071  cursor: pointer;2072  padding: 12px 0 4px;2073  margin: 0;2074  color: inherit;2075}2076.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {2077  color: var(--peach-t1);2078}2079.peach-settings-advanced-chevron {2080  font-size: 0.5625rem;2081  color: var(--peach-t3);2082  letter-spacing: 0;2083  transition: color 120ms ease;2084}20852086/* ── Feedback form ──────────────────────────────────────────────────────── */2087.peach-feedback-group {2088  flex: 1;2089  display: flex;2090  flex-direction: column;2091  border-bottom: none;2092}20932094.peach-feedback-intro {2095  margin: 4px 0 14px;2096  font-size: 0.75rem;2097  line-height: 1.55;2098  color: var(--peach-t1);2099}21002101.peach-feedback-chips {2102  display: flex;2103  flex-wrap: wrap;2104  gap: 6px;2105  margin-bottom: 14px;2106}21072108.peach-feedback-chip {2109  padding: 4px 10px;2110  border-radius: 999px;2111  border: 1px solid var(--peach-t3);2112  background: none;2113  color: var(--peach-t2);2114  font-size: 0.6875rem;2115  font-family: var(--font-ui);2116  cursor: pointer;2117  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2118    background var(--peach-dur-80) ease;2119}2120.peach-feedback-chip:hover {2121  border-color: var(--peach-t2);2122  color: var(--peach-t1);2123}2124.peach-feedback-chip.is-active {2125  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);2126  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));2127  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);2128  box-shadow:2129    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),2130    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);2131  font-weight: 700;2132}21332134.peach-feedback-textarea {2135  flex: 1;2136  width: 100%;2137  min-height: 120px;2138  box-sizing: border-box;2139  background: rgba(0, 0, 0, 0.22);2140  border: 1px solid transparent;2141  border-radius: 6px;2142  color: var(--peach-t0);2143  font-size: 0.75rem;2144  font-family: var(--font-ui);2145  line-height: 1.5;2146  padding: 8px 10px;2147  resize: none;2148  outline: none;2149  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2150}2151.peach-feedback-textarea:focus {2152  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2153  background: rgba(0, 0, 0, 0.28);2154}2155.peach-feedback-textarea:focus {2156  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2157}2158.peach-feedback-textarea::placeholder {2159  color: var(--peach-t2);2160}21612162.peach-feedback-meta {2163  margin: 6px 0 0;2164  font-size: 0.625rem;2165  color: var(--peach-t2);2166  font-family: "IBM Plex Mono", monospace;2167}21682169.peach-feedback-result {2170  margin: 8px 0 0;2171  font-size: 0.6875rem;2172  font-family: "IBM Plex Mono", monospace;2173}2174.peach-feedback-result--ok { color: var(--peach-sync-ok); }2175.peach-feedback-result--err { color: var(--peach-breach); }21762177.peach-feedback-submit {2178  width: 100%;2179  margin-top: 12px;2180  justify-content: center;2181}21822183.peach-feedback-anon {2184  margin: 8px 0 0;2185  font-size: 0.625rem;2186  color: var(--peach-t2);2187  text-align: center;2188}21892190.peach-feedback-thanks {2191  margin: auto 0;2192  padding: 18px 14px;2193  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);2194  border-radius: 8px;2195  background:2196    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),2197    rgba(0, 0, 0, 0.18);2198  color: var(--peach-t1);2199  text-align: center;2200}22012202.peach-feedback-thanks p {2203  margin: 0;2204  font-size: 0.75rem;2205  line-height: 1.5;2206}22072208.peach-feedback-thanks-title {2209  color: var(--peach-t0);2210  font-family: "Cormorant Garamond", serif;2211  font-size: 1.375rem !important;2212  line-height: 1.1 !important;2213  margin-bottom: 8px !important;2214}22152216.peach-passkey-badge {2217  margin-left: 8px;2218  font-size: 0.625rem;2219  letter-spacing: 0.06em;2220  text-transform: uppercase;2221  color: var(--peach-t2);2222  font-family: var(--font-ui);2223  vertical-align: middle;2224}22252226.peach-passkey-delete-btn {2227  color: var(--peach-breach);2228  border-color: rgba(229, 85, 85, 0.25);2229}22302231.peach-passkey-delete-confirm {2232  display: flex;2233  align-items: center;2234  gap: 8px;2235  padding: 8px 10px;2236  background: rgba(229, 85, 85, 0.06);2237  border: 1px solid rgba(229, 85, 85, 0.2);2238  border-radius: 6px;2239}22402241.peach-passkey-delete-confirm-copy {2242  flex: 1;2243  font-size: 0.6875rem;2244  color: var(--peach-t1);2245}22462247.peach-passkey-delete-btn--confirm {2248  color: var(--peach-breach);2249  border-color: rgba(229, 85, 85, 0.4);2250}22512252.peach-passkey-activity {2253  flex-direction: column;2254  align-items: flex-start;2255  gap: 4px;2256}22572258.peach-passkey-meta {2259  font-size: 0.6875rem;2260  color: var(--peach-t2);2261}22622263.peach-passkey-actions {2264  position: relative;2265  z-index: 1;2266  margin-top: 14px;2267  display: flex;2268  flex-direction: column;2269  gap: 8px;2270}22712272.peach-passkey-approval {2273  display: flex;2274  flex-direction: column;2275  align-items: center;2276  padding: 16px 20px 14px;2277  gap: 8px;2278  text-align: center;2279}22802281.peach-passkey-approval-icon {2282  width: 36px;2283  height: 36px;2284  border-radius: 10px;2285  background: var(--peach-s2);2286  border: 1px solid var(--peach-t3);2287  display: flex;2288  align-items: center;2289  justify-content: center;2290  flex-shrink: 0;2291  color: var(--peach-accent);2292}22932294.peach-passkey-approval-icon img,2295.peach-passkey-approval-icon svg {2296  width: 22px;2297  height: 22px;2298  border-radius: 5px;2299}23002301.peach-passkey-approval-rp {2302  font-family: var(--font-ui);2303  font-size: 0.75rem;2304  color: var(--peach-t2);2305  letter-spacing: 0.03em;2306}23072308.peach-passkey-approval-action {2309  font-family: var(--font-display);2310  font-style: italic;2311  font-weight: 300;2312  font-size: 18px;2313  color: var(--peach-t0);2314  line-height: 1.1;2315  margin: 1px 0;2316}23172318.peach-passkey-approval-user {2319  font-family: var(--font-mono);2320  font-size: 0.6875rem;2321  color: var(--peach-t1);2322  background: var(--peach-s2);2323  border: 1px solid var(--peach-t3);2324  border-radius: 4px;2325  padding: 3px 8px;2326}23272328.peach-passkey-approval-notice {2329  font-size: 0.625rem;2330  color: var(--peach-t2);2331  line-height: 1.5;2332  max-width: 220px;2333}23342335.peach-passkey-approval-actions {2336  display: flex;2337  gap: 8px;2338  width: 100%;2339  margin-top: 6px;2340}23412342.peach-passkey-approval-actions .peach-btn {2343  flex: 1;2344}23452346/* ── Inline generator drawer ── */2347.peach-generator-drawer {2348  display: grid;2349  grid-template-rows: 0fr;2350  transition: grid-template-rows 320ms var(--peach-curve-arrival);2351  overflow: hidden;2352}2353.peach-generator-drawer.is-open {2354  grid-template-rows: 1fr;2355}2356.peach-generator-drawer-inner {2357  min-height: 0;2358  overflow: hidden;2359}2360.peach-generator-drawer-content {2361  border-top: 1px solid var(--peach-t3);2362  padding: 8px 0 4px;2363  display: flex;2364  flex-direction: column;2365  gap: 8px;2366}23672368/* ── Compact generator (inside entry edit) ── */2369.peach-generator-drawer-content--compact {2370  border-top: 1px solid var(--peach-t3);2371  padding: 8px 0 2px;2372  gap: 7px;2373}2374.peach-pwgen-compact-display-row {2375  display: flex;2376  align-items: center;2377  gap: 6px;2378}2379.peach-pwgen-compact-output {2380  flex: 1;2381  min-width: 0;2382  font-family: "IBM Plex Mono", monospace;2383  font-size: 0.6875rem;2384  font-weight: 400;2385  letter-spacing: 0.04em;2386  color: var(--peach-t0);2387  background: rgba(240, 232, 216, 0.04);2388  border: 1px solid var(--peach-t3);2389  border-radius: 5px;2390  padding: 5px 8px;2391  line-height: 1.5;2392  outline: none;2393  transition: border-color 120ms ease;2394}23952396.peach-pwgen-compact-output:focus {2397  border-color: var(--peach-t1);2398}2399.peach-pwgen-compact-controls {2400  display: flex;2401  align-items: center;2402  gap: 6px;2403}2404.peach-pwgen-compact-slider {2405  flex: 1;2406  min-width: 0;2407  height: 2px !important;2408}2409.peach-pwgen-compact-controls .peach-pwgen-len-num {2410  flex-shrink: 0;2411  min-width: 18px;2412  text-align: right;2413}2414.peach-pwgen-compact-pills {2415  display: flex;2416  gap: 3px;2417  flex-shrink: 0;2418}2419.peach-pwgen-compact-pills .peach-pwgen-pill {2420  padding: 2px 7px;2421  font-size: 0.5rem;2422}2423.peach-pwgen-compact-use {2424  flex-shrink: 0;2425  font-size: 0.625rem !important;2426  padding: 3px 9px !important;2427  min-height: 22px !important;2428  border-radius: 5px !important;2429}24302431/* ── Password edit row (input + eye toggle side-by-side) ── */2432.peach-password-edit-row {2433  display: flex;2434  align-items: center;2435  gap: 6px;2436}2437.peach-password-edit-row .peach-inline-input {2438  flex: 1;2439  min-width: 0;2440}24412442/* ── Generate toggle link ── */2443.peach-generate-toggle-link {2444  display: inline-flex;2445  align-items: center;2446  gap: 5px;2447  background: none;2448  border: none;2449  padding: 0;2450  cursor: pointer;2451  font-family: "IBM Plex Mono", monospace;2452  font-size: 0.625rem;2453  color: var(--peach-t2);2454  letter-spacing: 0.04em;2455  transition: color 120ms ease;2456  align-self: flex-start;2457}2458.peach-generate-toggle-link:hover {2459  color: var(--peach-accent);2460}24612462/* Holds the generate + history toggle links on one row under the editor. */2463.peach-password-edit-links {2464  display: flex;2465  align-items: center;2466  gap: 14px;2467  flex-wrap: wrap;2468}24692470/* ── Past-password history list ── */2471.peach-password-history {2472  display: grid;2473  gap: 4px;2474  margin-top: 2px;2475  max-height: 168px;2476  overflow-y: auto;2477  scrollbar-width: thin;2478}2479.peach-history-row {2480  display: flex;2481  align-items: center;2482  justify-content: space-between;2483  gap: 8px;2484  padding: 5px 7px;2485  border-radius: 7px;2486  background: color-mix(in srgb, var(--peach-accent) 5%, transparent);2487  border: 1px solid color-mix(in srgb, var(--peach-accent) 9%, transparent);2488}2489.peach-history-main {2490  display: flex;2491  flex-direction: column;2492  gap: 1px;2493  min-width: 0;2494  flex: 1;2495}2496.peach-history-pw {2497  font-family: "IBM Plex Mono", monospace;2498  font-size: 0.6875rem;2499  color: var(--peach-t1);2500  white-space: nowrap;2501  overflow: hidden;2502  text-overflow: ellipsis;2503}2504.peach-history-pw .peach-password-mask {2505  letter-spacing: 0.08em;2506  color: var(--peach-t2);2507}2508.peach-history-age {2509  font-family: "IBM Plex Mono", monospace;2510  font-size: 0.5625rem;2511  color: var(--peach-t3, var(--peach-t2));2512  letter-spacing: 0.03em;2513}2514.peach-history-actions {2515  display: flex;2516  align-items: center;2517  gap: 2px;2518  flex-shrink: 0;2519}2520.peach-history-use {2521  font-family: "IBM Plex Mono", monospace;2522  font-size: 0.5625rem;2523  letter-spacing: 0.05em;2524  padding: 3px 7px;2525}2526.peach-history-empty {2527  font-family: "IBM Plex Mono", monospace;2528  font-size: 0.625rem;2529  line-height: 1.45;2530  color: var(--peach-t2);2531  padding: 6px 8px;2532  border-radius: 7px;2533  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);2534  border: 1px solid color-mix(in srgb, var(--peach-accent) 8%, transparent);2535}25362537/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2538.peach-entry-body {2539  flex: 1;2540  overflow-y: auto;2541  overflow-x: hidden;2542  scrollbar-width: none;2543  -ms-overflow-style: none;2544  overscroll-behavior: contain;2545  display: grid;2546  gap: 10px;2547  align-content: start;2548  padding: 10px 20px 14px;2549  min-width: 0;2550  min-height: 0;2551}2552.peach-entry-body::-webkit-scrollbar { display: none; }25532554/* Type-toggle pills + inline note toolbar */2555.peach-new-type-row {2556  display: flex;2557  align-items: center;2558  gap: 6px;2559  margin-bottom: 2px;2560}2561.peach-new-type-btn {2562  background: transparent;2563  border: 1px solid var(--peach-t3);2564  border-radius: 12px;2565  padding: 3px 10px;2566  font-family: "IBM Plex Mono", monospace;2567  font-size: 0.5625rem;2568  letter-spacing: 0.12em;2569  text-transform: uppercase;2570  color: var(--peach-t2);2571  cursor: pointer;2572  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2573}2574.peach-new-type-btn.is-active {2575  color: var(--peach-t0);2576  border-color: var(--peach-accent);2577  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2578}2579.peach-new-type-btn:not(.is-active):hover {2580  color: var(--peach-t1);2581  border-color: var(--peach-t2);2582}25832584/* Editable title */2585.peach-new-title-wrap { margin: 0 0 2px; }2586.peach-new-title-input {2587  background: transparent;2588  border: none;2589  outline: none;2590  width: 100%;2591  color: var(--peach-t0);2592  font-family: var(--font-display);2593  font-style: italic;2594  font-weight: 400;2595  font-size: 40px;2596  line-height: 0.95;2597  caret-color: var(--peach-accent);2598}2599.peach-new-title-input::placeholder { color: var(--peach-t2); }26002601/* Editable domain field */2602.peach-domain-edit-row {2603  display: flex;2604  align-items: center;2605  gap: 6px;2606}26072608.peach-domain-edit-row .peach-domain-value--edit {2609  flex: 1;2610  width: 0;2611}26122613.peach-domain-url-btn {2614  flex-shrink: 0;2615  background: transparent;2616  border: none;2617  cursor: pointer;2618  color: var(--peach-t3);2619  padding: 2px 3px;2620  display: flex;2621  align-items: center;2622  line-height: 0;2623  border-radius: 3px;2624  transition: color 120ms ease;2625}26262627.peach-domain-url-btn:hover {2628  color: var(--peach-accent);2629}26302631.peach-domain-value--edit {2632  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2633  font-size: 0.625rem;2634  font-style: italic;2635  letter-spacing: 0.12em;2636  color: var(--peach-t1);2637  background: transparent;2638  border: none;2639  border-bottom: 1px solid var(--peach-t3);2640  outline: none;2641  width: 100%;2642  padding: 2px 0;2643  caret-color: var(--peach-accent);2644  transition: border-color 140ms ease, color 140ms ease;2645}2646.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2647.peach-domain-value--edit:focus {2648  border-bottom-color: rgba(240, 232, 216, 0.28);2649  color: var(--peach-t0);2650}26512652/* Editable field values (username, password, totp) */2653.peach-field-value--edit {2654  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2655  font-size: 0.8125rem;2656  color: var(--peach-t0);2657  background: transparent;2658  border: none;2659  border-bottom: 1px solid var(--peach-t3);2660  outline: none;2661  flex: 1;2662  min-width: 0;2663  padding: 3px 0;2664  caret-color: var(--peach-accent);2665  transition: border-color 140ms ease, color 140ms ease;2666}2667.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2668.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2669.peach-field-value--edit:focus {2670  border-bottom-color: rgba(240, 232, 216, 0.28);2671  color: var(--peach-t0);2672}26732674/* "+ add optional field" links */2675.peach-entry-add-links {2676  display: flex;2677  gap: 12px;2678  flex-wrap: wrap;2679  margin-top: -2px;2680}2681.peach-add-field-link {2682  background: transparent;2683  border: none;2684  padding: 0;2685  cursor: pointer;2686  font-family: "IBM Plex Mono", monospace;2687  font-size: 0.5625rem;2688  letter-spacing: 0.1em;2689  text-transform: uppercase;2690  color: var(--peach-t2);2691  transition: color 140ms ease;2692}2693.peach-add-field-link:hover { color: var(--peach-accent); }26942695/* ── New entry form (legacy classes) ────────────────────────────────── */2696.peach-new-body {2697  flex: 1;2698  overflow-y: auto;2699  padding: 10px 20px 14px;2700}2701.peach-new-name-input {2702  background: transparent;2703  border: none;2704  outline: none;2705  width: 100%;2706  color: var(--peach-t0);2707  font-family: var(--font-display);2708  font-style: italic;2709  font-weight: 400;2710  font-size: 40px;2711  line-height: 0.95;2712  caret-color: var(--peach-accent);2713}2714.peach-new-name-input::placeholder { color: var(--peach-t2); }2715.peach-new-field-input {2716  background: transparent;2717  border: none;2718  outline: none;2719  flex: 1;2720  min-width: 0;2721  caret-color: var(--peach-accent);2722}2723.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }27242725/* ── Canary card ── */2726.peach-canary-card {2727  border: 1px solid rgba(217, 160, 48, 0.2);2728  background: rgba(217, 160, 48, 0.03);2729  border-radius: 8px;2730  padding: 12px;2731}27322733.peach-canary-settings-header {2734  display: flex;2735  align-items: center;2736  justify-content: space-between;2737  cursor: pointer;2738  user-select: none;2739}27402741.peach-canary-card .peach-label {2742  color: rgba(217, 160, 48, 0.85);2743}27442745.peach-canary-card .peach-new-field-input {2746  border-color: rgba(217, 160, 48, 0.25);2747}27482749.peach-canary-card .peach-new-field-input:focus {2750  border-color: rgba(217, 160, 48, 0.5);2751}27522753.peach-canary-body {2754  margin-top: 12px;2755  display: flex;2756  flex-direction: column;2757  gap: 10px;2758}27592760.peach-canary-explainer {2761  display: flex;2762  gap: 10px;2763  padding: 10px 12px;2764  border-radius: 10px;2765  background: rgba(217, 160, 48, 0.06);2766  border: 1px solid rgba(217, 160, 48, 0.22);2767  margin-bottom: 4px;2768}27692770.peach-canary-explainer-icon {2771  font-size: 1rem;2772  flex-shrink: 0;2773  line-height: 1.2;2774}27752776.peach-canary-explainer-title {2777  font-family: var(--font-ui);2778  font-size: 0.6875rem;2779  font-weight: 500;2780  color: rgba(217, 160, 48, 0.9);2781  margin: 0 0 3px;2782}27832784.peach-canary-explainer-copy {2785  font-family: var(--font-ui);2786  font-size: 0.625rem;2787  color: var(--peach-t2);2788  line-height: 1.55;2789  margin: 0;2790}27912792.peach-canary-hint {2793  font-size: 0.625rem;2794  color: var(--peach-t2);2795  font-family: Inter, system-ui, sans-serif;2796  line-height: 1.5;2797  margin-top: 4px;2798}27992800.peach-canary-actions-row {2801  display: flex;2802  align-items: center;2803  gap: 8px;2804}28052806.peach-canary-test-btn {2807  border-color: rgba(217, 160, 48, 0.3);2808  color: rgba(217, 160, 48, 0.85);2809}28102811.peach-canary-test-result {2812  font-size: 0.625rem;2813  font-family: Inter, system-ui, sans-serif;2814}28152816.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2817.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }28182819.peach-canary-badge {2820  display: flex;2821  position: relative;2822  z-index: 1;2823  align-items: center;2824  gap: 5px;2825  padding: 4px 10px;2826  background: rgba(217, 160, 48, 0.12);2827  border: 1px solid rgba(217, 160, 48, 0.35);2828  border-radius: 6px;2829  margin-bottom: 6px;2830  width: fit-content;2831}28322833.peach-canary-badge-label {2834  font-size: 0.625rem;2835  letter-spacing: 0.06em;2836  color: rgba(217, 160, 48, 0.9);2837  font-family: var(--font-ui);2838  text-transform: uppercase;2839}28402841.peach-canary-badge-icon {2842  font-size: 0.6875rem;2843}28442845.peach-canary-suppress-row {2846  display: flex;2847  align-items: center;2848  gap: 8px;2849  padding: 6px 10px;2850  background: rgba(217, 160, 48, 0.08);2851  border-radius: 6px;2852  margin-bottom: 8px;2853}28542855.peach-canary-suppress-label {2856  font-size: 0.6875rem;2857  color: rgba(217, 160, 48, 0.85);2858  cursor: pointer;2859  font-family: var(--font-ui);2860  letter-spacing: 0.04em;2861}28622863.peach-regen-panel {2864  position: relative;2865  z-index: 1;2866  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2867  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2868  border-radius: 8px;2869  padding: 12px;2870  margin-bottom: 8px;2871}28722873.peach-regen-panel-header {2874  display: flex;2875  align-items: center;2876  justify-content: space-between;2877  margin-bottom: 10px;2878}28792880.peach-regen-panel-title {2881  font-size: 0.6875rem;2882  font-weight: 600;2883  letter-spacing: 0.06em;2884  text-transform: uppercase;2885  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2886}28872888.peach-regen-output {2889  background: rgba(0, 0, 0, 0.2);2890  border-radius: 6px;2891  padding: 10px;2892  margin-bottom: 10px;2893  font-family: var(--font-mono);2894  font-size: 0.8125rem;2895  word-break: break-all;2896  color: var(--peach-t1);2897}28982899.peach-regen-actions {2900  display: flex;2901  gap: 6px;2902}29032904.peach-regen-actions--spaced {2905  margin-bottom: 8px;2906}29072908.peach-regen-action-grow {2909  flex: 1;2910}29112912.peach-regen-copy-btn {2913  padding: 0 8px;2914}29152916.peach-regen-success {2917  position: relative;2918  z-index: 1;2919  background: rgba(40, 180, 80, 0.1);2920  border: 1px solid rgba(40, 180, 80, 0.3);2921  border-radius: 8px;2922  padding: 10px 12px;2923  margin-bottom: 8px;2924  display: flex;2925  align-items: center;2926  gap: 8px;2927  font-size: 0.6875rem;2928  color: rgba(40, 180, 80, 0.9);2929}29302931/* ── Note editor overlay ── */2932.peach-note-editor {2933  position: absolute;2934  inset: 0;2935  z-index: 200;2936  display: flex;2937  flex-direction: column;2938  background:2939    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2940    var(--peach-bg);2941  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2942}29432944.peach-note-editor-header {2945  display: flex;2946  align-items: center;2947  gap: 10px;2948  padding: 14px 16px 10px;2949  border-bottom: 1px solid var(--peach-t3);2950  flex-shrink: 0;2951}29522953.peach-note-editor-back {2954  background: transparent;2955  border: none;2956  cursor: pointer;2957  color: var(--peach-t2);2958  padding: 4px 6px;2959  border-radius: 6px;2960  display: flex;2961  align-items: center;2962  transition: color 120ms ease, background 120ms ease;2963  flex-shrink: 0;2964}2965.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }29662967.peach-note-editor-label {2968  flex: 1;2969  font-family: var(--font-display);2970  font-style: italic;2971  font-size: 0.9375rem;2972  color: var(--peach-t1);2973  letter-spacing: 0.02em;2974}29752976.peach-note-editor-save-btn {2977  background: transparent;2978  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2979  border-radius: 8px;2980  color: var(--peach-accent);2981  font-family: "IBM Plex Mono", monospace;2982  font-size: 0.625rem;2983  letter-spacing: 0.06em;2984  text-transform: uppercase;2985  padding: 3px 10px;2986  cursor: pointer;2987  transition: background 120ms ease, border-color 120ms ease;2988}2989.peach-note-editor-save-btn:hover:not(:disabled) {2990  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2991  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2992}2993.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }29942995.peach-note-toolbar {2996  display: flex;2997  align-items: center;2998  gap: 3px;2999  padding: 6px 14px 5px;3000  border-bottom: 1px solid var(--peach-t3);3001  flex-shrink: 0;3002}30033004.peach-note-tool-btn {3005  background: transparent;3006  border: 1px solid transparent;3007  border-radius: 5px;3008  color: var(--peach-t2);3009  font-family: "IBM Plex Mono", monospace;3010  font-size: 0.625rem;3011  letter-spacing: 0.04em;3012  padding: 2px 8px;3013  cursor: pointer;3014  line-height: 1.6;3015  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;3016}3017.peach-note-tool-btn:hover {3018  background: var(--peach-t4);3019  color: var(--peach-t0);3020  border-color: var(--peach-t3);3021}30223023.peach-note-tool-icon {3024  padding: 3px 7px;3025  display: inline-flex;3026  align-items: center;3027  justify-content: center;3028}30293030.peach-note-tool-divider {3031  width: 1px;3032  height: 14px;3033  background: var(--peach-t3);3034  margin: 0 4px;3035  flex-shrink: 0;3036}30373038.peach-note-editor-body {3039  flex: 1;3040  overflow-y: auto;3041  padding: 16px 20px 20px;3042  outline: none;3043  font-family: var(--font-display);3044  font-size: 1rem;3045  line-height: 1.75;3046  color: var(--peach-t0);3047  scrollbar-width: none;3048  word-break: break-word;3049}3050.peach-note-editor-body:empty::before {3051  content: "write your note…";3052  color: var(--peach-t3);3053  font-style: italic;3054  pointer-events: none;3055}30563057/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */3058.peach-note-editor-inline {3059  display: flex;3060  flex-direction: column;3061  flex: 1;3062  min-height: 0;3063}3064.peach-note-editor-body--inline {3065  flex: 1;3066  min-height: 0;3067  font-size: 0.9375rem;3068  padding: 10px 20px 14px;3069}30703071/* Full-width toolbar row inside the body (Add.tsx note type).3072   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */3073.peach-note-toolbar-body {3074  display: flex;3075  align-items: center;3076  gap: 3px;3077  padding: 5px 20px 4px;3078  margin: 2px -20px 0;3079  border-bottom: 1px solid var(--peach-t3);3080  flex-shrink: 0;3081}30823083/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)3084   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn3085   and .peach-note-tool-divider button-level styles. */3086.peach-note-toolbar-inline {3087  display: flex;3088  align-items: center;3089  gap: 3px;3090  margin-left: auto;3091  padding-left: 10px;3092  border-left: 1px solid var(--peach-t3);3093  min-height: 22px;3094}30953096/* Entry.tsx toolbar row (no tabs, toolbar only) */3097.peach-entry-note-toolbar-row {3098  display: flex;3099  align-items: center;3100  margin: 4px 0 6px;3101  position: relative;3102  z-index: 1;3103}3104.peach-entry-note-toolbar-row .peach-note-toolbar-inline {3105  border-left: none;3106  padding-left: 0;3107  margin-left: 0;3108}31093110/* Note body — fills available vertical space in Add.tsx and Entry.tsx */3111.peach-note-body {3112  display: flex;3113  flex-direction: column;3114  flex: 1;3115  min-height: 0;3116  margin: 4px 0 0;3117}3118.peach-entry-body--new .peach-note-body {3119  margin: 8px -20px 0;3120}31213122/* Add.tsx body is a grid by default; swap to a flex column when a note is3123   active so the note body can stretch and pin the tags row to the bottom. */3124.peach-entry-body--new:has(.peach-note-body) {3125  display: flex;3126  flex-direction: column;3127}31283129/* Rich content element styles (editor + display) */3130.peach-note-editor-body h2,3131.peach-note-content h2 {3132  font-family: var(--font-display);3133  font-size: 20px;3134  font-weight: 600;3135  font-style: italic;3136  color: var(--peach-t0);3137  margin: 6px 0 2px;3138  line-height: 1.3;3139}3140.peach-note-editor-body ul,3141.peach-note-content ul {3142  padding-left: 18px;3143  margin: 3px 0;3144  list-style: disc;3145}3146.peach-note-editor-body ol,3147.peach-note-content ol {3148  padding-left: 18px;3149  margin: 3px 0;3150  list-style: decimal;3151}3152.peach-note-editor-body li,3153.peach-note-content li { margin: 2px 0; }3154.peach-note-editor-body hr,3155.peach-note-content hr {3156  border: none;3157  border-top: 1px solid var(--peach-t3);3158  margin: 10px 0;3159}31603161/* font size elements from execCommand */3162.peach-note-editor-body font[size="1"],3163.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }3164.peach-note-editor-body font[size="2"],3165.peach-note-content font[size="2"] { font-size: 0.8125rem; }3166.peach-note-editor-body font[size="3"],3167.peach-note-content font[size="3"] { font-size: 1rem; }3168.peach-note-editor-body font[size="4"],3169.peach-note-content font[size="4"] { font-size: 20px; }3170.peach-note-editor-body font[size="5"],3171.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }31723173/* bold / italic inside the editor and note display */3174.peach-note-editor-body b, .peach-note-editor-body strong,3175.peach-note-content b, .peach-note-content strong { font-weight: 700; }3176.peach-note-editor-body em, .peach-note-editor-body i,3177.peach-note-content em, .peach-note-content i { font-style: italic; }31783179/* note display — rendered HTML, no pre-wrap */3180.peach-note-content {3181  overflow: auto;3182  max-height: 340px;3183  word-break: break-word;3184}31853186/* ── Note textarea ── */3187.peach-note-textarea {3188  width: 100%;3189  min-height: 180px;3190  max-height: 280px;3191  resize: vertical;3192  background: var(--peach-t4);3193  border: 1px solid var(--peach-t3);3194  border-radius: 8px;3195  padding: 10px 12px;3196  font-family: "IBM Plex Mono", monospace;3197  font-size: 0.75rem;3198  line-height: 1.7;3199  color: var(--peach-t1);3200  outline: none;3201  transition: border-color 150ms ease;3202}32033204.peach-note-textarea:focus {3205  border-color: var(--peach-t2);3206}32073208.peach-note-char-count {3209  font-family: "IBM Plex Mono", monospace;3210  font-size: 0.5625rem;3211  color: var(--peach-t3);3212  text-align: right;3213  margin-top: 4px;3214  letter-spacing: 0.1em;3215}32163217/* ── Field input baseline ── */3218.peach-new-field-input {3219  width: 100%;3220  background: transparent;3221  border: none;3222  border-bottom: 1px solid var(--peach-t3);3223  padding: 4px 0;3224  color: var(--peach-t1);3225  font-family: "IBM Plex Mono", monospace;3226  font-size: 0.8125rem;3227  outline: none;3228  transition: border-color 150ms ease;3229}32303231.peach-new-field-input:focus {3232  border-bottom-color: var(--peach-t0);3233  color: var(--peach-t0);3234}32353236.peach-new-name-input {3237  width: 100%;3238  background: transparent;3239  border: none;3240  border-bottom: 1px solid var(--peach-t3);3241  padding: 6px 0;3242  font-family: var(--font-display);3243  font-style: italic;3244  font-size: 28px;3245  color: var(--peach-t0);3246  outline: none;3247  transition: border-color 150ms ease;3248}32493250.peach-new-name-input:focus {3251  border-bottom-color: var(--peach-t1);3252}32533254.peach-new-name-input::placeholder {3255  color: var(--peach-t2);3256  font-style: italic;3257}32583259.peach-new-field-input::placeholder {3260  color: var(--peach-t3);3261}32623263/* ── Demo entrance animation ── */3264#hd-shell {3265  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3266}3267@keyframes hd-shell-enter {3268  from { opacity: 0; transform: scale(0.96) translateY(16px); }3269  to   { opacity: 1; transform: scale(1) translateY(0); }3270}32713272/* ── Keyframes ── */3273@keyframes peach-char-enter {3274  from { opacity: 0; transform: translateY(0.22em); }3275  to   { opacity: 1; transform: translateY(0); }3276}3277@keyframes peach-content-enter {3278  from { opacity: 0.96; transform: translateY(4px); }3279  to   { opacity: 1; transform: translateY(0); }3280}3281@keyframes peach-content-exit {3282  from { opacity: 1; transform: translateY(0); }3283  to   { opacity: 0.92; transform: translateY(-3px); }3284}3285@keyframes peach-screen-enter {3286  from { opacity: 0; transform: translateY(14px); }3287  to   { opacity: 1; transform: translateY(0); }3288}3289@keyframes peach-shell-fade-in {3290  from { opacity: 0; }3291  to   { opacity: 1; }3292}3293@keyframes peach-veil-in {3294  from { opacity: 0; }3295  to   { opacity: 1; }3296}3297@keyframes peach-lock-settle {3298  0%   { transform: scale(0.9); }3299  65%  { transform: scale(1.08); }3300  100% { transform: scale(1); }3301}3302@keyframes peach-copy-confirm {3303  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3304  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); }3305}3306@keyframes peach-copy-retreat {3307  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); }3308  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3309}3310@keyframes peach-copy-flood {3311  from { opacity: 0; transform: scaleX(0.15); }3312  to   { opacity: 1; transform: scaleX(1); }3313}3314@keyframes peach-copy-icon-settle {3315  from  { transform: scale(0.84); }3316  70%   { transform: scale(1.08); }3317  to    { transform: scale(1); }3318}3319@keyframes peach-copy-sheen-retreat {3320  from { opacity: 1; transform: scaleX(1); }3321  to   { opacity: 0; transform: scaleX(0.15); }3322}3323@keyframes peach-copy-drain {3324  from { width: 100%; }3325  to   { width: 0; }3326}3327@keyframes peach-shake {3328  0%, 100% { transform: translateX(0); }3329  20%      { transform: translateX(-6px); }3330  40%      { transform: translateX(6px); }3331  60%      { transform: translateX(-4px); }3332  80%      { transform: translateX(4px); }3333}33343335@keyframes pip-pulse {3336  0% { transform: scale(1); }3337  40% { transform: scale(2.2); }3338  100% { transform: scale(1); }3339}334033413342/* ── Password generator ── */3343.peach-pwgen-body {3344  flex: 1; overflow-y: auto;3345  display: flex; flex-direction: column;3346}3347.peach-policy-badge {3348  display: flex; align-items: center;3349  padding: 6px 20px 0;3350  font-size: 0.625rem; font-family: Inter, sans-serif;3351  color: var(--peach-t2); letter-spacing: 0.04em;3352}3353.peach-pwgen-display {3354  padding: 14px 20px 12px;3355  border-bottom: 1px solid var(--peach-t3);3356  display: flex; align-items: flex-start; gap: 10px;3357}3358.peach-pwgen-display-row {3359  display: flex;3360  align-items: flex-start;3361  gap: 8px;3362  padding-bottom: 8px;3363  border-bottom: 1px solid var(--peach-t3);3364}3365.peach-pwgen-output {3366  flex: 1; min-width: 0; margin: 0;3367  font-family: "IBM Plex Mono", monospace;3368  font-size: 0.8125rem; color: var(--peach-t0);3369  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3370  white-space: normal;3371  padding: 10px 12px;3372  background: var(--peach-t4);3373  border-radius: 6px;3374  min-height: 36px;3375}3376.peach-pwgen-output-display {3377  flex: 1;3378  min-width: 0;3379  margin: 0;3380  font-family: var(--font-display);3381  font-style: italic;3382  font-weight: 300;3383  font-size: 32px;3384  line-height: 1.05;3385  color: var(--peach-t0);3386  word-break: break-all;3387  overflow-wrap: break-word;3388  white-space: normal;3389  letter-spacing: 0.02em;3390}3391.peach-pwgen-display-actions {3392  display: flex;3393  flex-direction: column;3394  gap: 4px;3395  flex-shrink: 0;3396  margin-top: 2px;3397}3398.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3399.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3400.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3401.peach-pwgen-len-num {3402  font-family: "IBM Plex Mono", monospace;3403  font-size: 0.75rem; color: var(--peach-accent);3404}3405.peach-pwgen-len-num--edit {3406  cursor: text;3407  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3408}3409.peach-pwgen-len-input {3410  font-family: "IBM Plex Mono", monospace;3411  font-size: 0.75rem;3412  color: var(--peach-accent);3413  background: transparent;3414  border: none;3415  border-bottom: 1px solid var(--peach-accent);3416  outline: none;3417  width: 32px;3418  text-align: right;3419  padding: 0;3420}3421.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3422.peach-pwgen-toggles { display: flex; flex-direction: column; }3423.peach-pwgen-charset-pills {3424  display: flex;3425  gap: 6px;3426  flex-wrap: wrap;3427}3428.peach-pwgen-pill {3429  padding: 4px 11px;3430  border-radius: 999px;3431  border: 1px solid var(--peach-t3);3432  background: transparent;3433  color: var(--peach-t2);3434  font-family: "IBM Plex Mono", monospace;3435  font-size: 0.5625rem;3436  letter-spacing: 0.08em;3437  cursor: pointer;3438  transition: all 150ms ease;3439}3440.peach-pwgen-pill.is-on {3441  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3442  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3443  color: var(--peach-accent);3444}3445.peach-pwgen-pill:not(.is-on):hover {3446  color: var(--peach-t1);3447  border-color: var(--peach-t2);3448}3449.peach-pwgen-use-btn {3450  width: 100%;3451  min-height: 34px;3452  border-radius: 8px;3453  margin-top: 2px;3454}3455.peach-generator-constraint-note {3456  font-family: 'IBM Plex Mono', monospace;3457  font-size: 10px;3458  color: var(--peach-t3);3459  letter-spacing: 0.04em;3460  margin: 0;3461  transition: opacity 200ms ease;3462}3463.peach-pwgen-toggle-row {3464  display: flex; align-items: center; justify-content: space-between;3465  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3466}3467.peach-pwgen-toggle-row:last-child { border-bottom: none; }3468.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }34693470/* Peach popup should not expose native scrollbars on internal panels. */3471.peach-settings-body,3472.peach-new-body,3473.peach-pwgen-body,3474.lock-screen,3475.peach-import-preview {3476  scrollbar-width: none;3477  -ms-overflow-style: none;3478  overscroll-behavior: contain;3479}3480.peach-settings-body::-webkit-scrollbar,3481.peach-new-body::-webkit-scrollbar,3482.peach-pwgen-body::-webkit-scrollbar,3483.lock-screen::-webkit-scrollbar,3484.peach-import-preview::-webkit-scrollbar {3485  width: 0;3486  height: 0;3487  display: none;3488}34893490.lock-screen {3491  height: 100%;3492  min-height: 100%;3493  overflow-y: auto;3494  padding: 18px 18px 16px;3495  gap: 14px;3496  grid-template-rows: auto auto auto 1fr auto;3497  align-content: stretch;3498  position: relative;3499  isolation: isolate;3500}3501.peach-screen.lock-screen--vault-stage {3502  display: flex;3503  flex-direction: column;3504  justify-content: flex-start;3505  gap: 18px;3506  padding: 20px 18px 18px;3507  overflow: hidden;3508}3509.peach-screen.lock-screen--vault-stage .peach-lock-panel {3510  margin-top: 0;3511}3512.lock-screen--onboarding {3513  display: flex;3514  flex-direction: column;3515  gap: 12px;3516  justify-content: flex-start;3517}35183519.lock-screen::before {3520  content: "";3521  position: absolute;3522  inset: 12px 18px auto auto;3523  width: 160px;3524  height: 160px;3525  border-radius: 999px;3526  background:3527    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%);3528  filter: blur(6px);3529  opacity: 0.7;3530  pointer-events: none;3531  z-index: 0;3532}35333534.peach-lock-rune-string {3535  flex: 1;3536  display: flex;3537  align-items: center;3538  justify-content: center;3539  gap: 6px;3540  font-family: PeachScript, monospace;3541  font-size: 0.8125rem;3542  letter-spacing: 0.05em;3543  pointer-events: none;3544  user-select: none;3545  position: relative;3546  z-index: 1;3547}35483549.peach-lock-rune-string span {3550  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3551  text-shadow:3552    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3553    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3554  transition: color 0.9s ease, text-shadow 0.9s ease;3555}35563557.peach-lock-rune-string span.is-glowing {3558  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3559  text-shadow:3560    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3561    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3562}35633564.lock-screen-header {3565  display: flex;3566  align-items: center;3567  justify-content: space-between;3568  position: relative;3569  z-index: 1;3570}35713572.lock-password-input.shake {3573  animation: peach-shake 300ms ease-in-out;3574}35753576.peach-hint-error {3577  color: rgba(220, 80, 60, 0.92);3578}35793580.peach-onboarding-headline {3581  margin: 0;3582  font-family: var(--font-display);3583  font-size: 35px;3584  line-height: 0.88;3585  font-style: italic;3586  font-weight: 400;3587  max-width: 252px;3588}35893590.peach-lock-copy {3591  display: grid;3592  gap: 8px;3593  position: relative;3594  z-index: 1;3595}35963597.peach-lock-copy--onboarding {3598  gap: 10px;3599}36003601.peach-lock-hero {3602  position: relative;3603  z-index: 1;3604  display: grid;3605  gap: 8px;3606  min-height: 0;3607  padding: 4px 2px 0;3608  border: none;3609  border-radius: 0;3610  background: transparent;3611  box-shadow: none;3612}3613.peach-lock-hero-art {3614  position: absolute;3615  right: -8px;3616  top: -6px;3617  width: 120px;3618  height: 120px;3619  display: flex;3620  align-items: center;3621  justify-content: center;3622  pointer-events: none;3623  opacity: 0.12;3624  filter: saturate(0.9);3625}3626.peach-lock-hero-mark {3627  width: 100%;3628  height: 100%;3629}3630/* Peach body stays brand-peach across every accent — we don't want a3631   green or blue peach when sage/sky is selected. Leaf + vein keep the3632   sage tint because a real peach has a sage leaf. In the new brand-kit3633   mark the leaf is path 1 and the vein stroke is path 2; the body and3634   back-lobe (paths 3 + 4) must stay untouched. */3635.peach-lock-hero-mark path:nth-child(1) {3636  fill: rgba(123, 144, 96, 0.88);3637}3638.peach-lock-hero-mark path:nth-child(2) {3639  stroke: rgba(94, 122, 66, 0.95);3640}3641.peach-lock-hero > *:not(.peach-lock-hero-art) {3642  position: relative;3643  z-index: 1;3644}36453646.peach-lock-eyebrow {3647  display: inline-flex;3648  align-items: center;3649  width: fit-content;3650  padding: 4px 9px;3651  border-radius: 999px;3652  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3653  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3654  color: var(--peach-t0);3655  font-family: "IBM Plex Mono", monospace;3656  font-size: 0.5rem;3657  letter-spacing: 0.18em;3658  text-transform: uppercase;3659}36603661.peach-lock-label-row {3662  display: flex;3663  align-items: center;3664  justify-content: space-between;3665  margin-bottom: 0;3666}36673668.peach-lock-reveal-btn {3669  display: inline-flex;3670  align-items: center;3671  gap: 4px;3672  background: none;3673  border: none;3674  cursor: pointer;3675  font-family: "IBM Plex Mono", monospace;3676  font-size: 0.5625rem;3677  letter-spacing: 0.06em;3678  color: var(--peach-t2);3679  padding: 2px 0;3680  transition: color 150ms ease;3681}36823683.peach-lock-reveal-btn:hover {3684  color: var(--peach-t1);3685}36863687.peach-lock-warning {3688  color: rgba(220, 80, 60, 0.85) !important;3689  line-height: 1.5;3690}36913692.peach-onboarding-cards {3693  display: grid;3694  gap: 8px;3695  position: relative;3696  z-index: 1;3697}36983699.peach-lock-panel {3700  position: relative;3701  z-index: 1;3702  display: grid;3703  gap: 9px;3704  padding: 14px 16px 15px;3705  border-radius: 18px;3706  border: 1px solid var(--peach-t3);3707  background:3708    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3709  box-shadow:3710    inset 0 1px 0 rgba(240, 232, 216, 0.04),3711    0 12px 28px rgba(0, 0, 0, 0.12);3712}37133714/* Glass surface — lock panel and settings groups */3715.peach-glass {3716  background: rgba(26, 20, 16, 0.65);3717  border: 1px solid rgba(255, 255, 255, 0.08);3718  border-radius: 12px;3719  backdrop-filter: blur(12px) saturate(1.4);3720  -webkit-backdrop-filter: blur(12px) saturate(1.4);3721}37223723@supports not (backdrop-filter: blur(1px)) {3724  .peach-glass {3725    background: rgba(26, 20, 16, 0.92);3726    border: 1px solid rgba(255, 255, 255, 0.10);3727    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3728  }3729}37303731.light .peach-glass,3732[data-theme="light"] .peach-glass {3733  background: rgba(240, 233, 223, 0.72);3734  border: 1px solid rgba(26, 18, 8, 0.08);3735  backdrop-filter: blur(12px) saturate(1.2);3736  -webkit-backdrop-filter: blur(12px) saturate(1.2);3737}37383739@supports not (backdrop-filter: blur(1px)) {3740  .light .peach-glass,3741  [data-theme="light"] .peach-glass {3742    background: rgba(240, 233, 223, 0.97);3743    border: 1px solid rgba(26, 18, 8, 0.10);3744  }3745}37463747/* Lock panel keeps its own border-radius over the generic glass token */3748.peach-lock-panel.peach-glass {3749  border-radius: 18px;3750  background: rgba(26, 20, 16, 0.65);3751  border: 1px solid rgba(255, 255, 255, 0.08);3752  box-shadow:3753    inset 0 1px 0 rgba(255, 255, 255, 0.05),3754    0 12px 28px rgba(0, 0, 0, 0.3);3755}37563757.light .peach-lock-panel.peach-glass,3758[data-theme="light"] .peach-lock-panel.peach-glass {3759  background: rgba(240, 233, 223, 0.82);3760  border: 1px solid rgba(26, 18, 8, 0.08);3761  box-shadow:3762    inset 0 1px 0 rgba(255, 255, 255, 0.4),3763    0 8px 24px rgba(80, 56, 32, 0.15);3764}37653766@supports not (backdrop-filter: blur(1px)) {3767  .peach-lock-panel.peach-glass {3768    background: rgba(26, 20, 16, 0.92);3769    box-shadow:3770      inset 0 1px 0 rgba(255, 255, 255, 0.05),3771      0 12px 28px rgba(0, 0, 0, 0.4);3772  }3773  .light .peach-lock-panel.peach-glass,3774  [data-theme="light"] .peach-lock-panel.peach-glass {3775    background: rgba(240, 233, 223, 0.98);3776  }3777}37783779.peach-lock-panel--secondary {3780  gap: 12px;3781}37823783.peach-lock-panel-header {3784  display: flex;3785  align-items: baseline;3786  justify-content: space-between;3787  gap: 12px;3788}37893790.peach-lock-option-grid {3791  display: grid;3792  gap: 10px;3793}37943795.peach-lock-option {3796  width: 100%;3797  display: grid;3798  gap: 6px;3799  padding: 14px 15px;3800  border-radius: 16px;3801  border: 1px solid rgba(240, 232, 216, 0.08);3802  background: rgba(240, 232, 216, 0.02);3803  color: var(--peach-t0);3804  text-align: left;3805  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3806}38073808.peach-lock-option:hover {3809  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3810  background: rgba(240, 232, 216, 0.04);3811  transform: translateY(-1px);3812}38133814.peach-lock-option-title {3815  font-size: 0.75rem;3816  color: var(--peach-t0);3817}38183819.peach-lock-option-copy {3820  font-size: 0.6875rem;3821  line-height: 1.55;3822  color: var(--peach-t1);3823}38243825.peach-onboarding-stack {3826  margin-top: 2px;3827}3828.peach-lock-panel-footer {3829  display: grid;3830  gap: 6px;3831  margin-top: 2px;3832  padding-top: 10px;3833  border-top: 1px solid rgba(240, 232, 216, 0.06);3834}38353836/* ── Restore tab view ─────────────────────────────────────────────────────3837   Tab-based restore screen replacing the old three-card picker. */38383839.peach-restore-tabview {3840  overflow: hidden;3841}38423843.peach-restore-tabcard {3844  flex: 1;3845  display: flex;3846  flex-direction: column;3847  gap: 0;3848  padding: 0;3849  overflow: hidden;3850  cursor: default;3851  user-select: none;3852  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3853}38543855/* ── Tab selector ─────────────────────────────────────────────────────── */38563857.peach-restore-tabs {3858  display: flex;3859  justify-content: space-around;3860  padding: 14px 10px 10px;3861  border-bottom: 1px solid var(--peach-t3);3862  gap: 2px;3863  overflow: hidden;3864  scrollbar-width: none;3865}3866.peach-restore-tabs::-webkit-scrollbar { display: none; }38673868.peach-restore-tab {3869  background: none;3870  border: none;3871  cursor: pointer;3872  padding: 3px 2px;3873  font-family: 'Cormorant Garamond', Georgia, serif;3874  font-style: italic;3875  font-size: 11px;3876  color: var(--peach-t2);3877  transition: color 150ms ease, text-shadow 150ms ease;3878  flex: 1;3879  min-width: 0;3880  text-align: center;3881  white-space: nowrap;3882  overflow: hidden;3883  text-overflow: ellipsis;3884}3885.peach-restore-tab:hover {3886  color: var(--peach-accent);3887  text-shadow:3888    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3889    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3890}3891.peach-restore-tab.is-active {3892  color: var(--peach-accent);3893  text-shadow:3894    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3895    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3896}38973898/* ── Content area ─────────────────────────────────────────────────────── */38993900.peach-restore-content {3901  padding: 16px 16px 14px;3902  display: flex;3903  flex-direction: column;3904  gap: 8px;3905  overflow: hidden;3906  scrollbar-width: none;3907  flex: 1;3908}3909.peach-restore-content::-webkit-scrollbar { display: none; }3910.peach-restore-content > * {3911  overflow: hidden;3912  scrollbar-width: none;3913}3914.peach-restore-content > *::-webkit-scrollbar { display: none; }39153916/* ── Shared tab inner layout ──────────────────────────────────────────── */39173918.peach-rt-symbols,3919.peach-rt-csv,3920.peach-rt-phone,3921.peach-restore-codex {3922  display: flex;3923  flex-direction: column;3924  gap: 8px;3925  overflow: hidden;3926}39273928.peach-restore-codex {3929  min-height: 0;3930  justify-content: center;3931}39323933.peach-restore-codex-title {3934  margin: 0;3935  font-family: var(--font-display);3936  font-size: 1rem;3937  font-style: italic;3938  color: var(--peach-t0);3939}39403941.peach-restore-codex-copy {3942  margin: 0;3943  font-size: 0.75rem;3944  line-height: 1.5;3945  color: var(--peach-t1);3946}39473948.peach-restore-codex-button {3949  width: 100%;3950  justify-content: center;3951}39523953.peach-rt-submit {3954  width: 100%;3955}39563957.peach-rt-error {3958  margin: 0;3959  font-size: 0.6875rem;3960  color: var(--peach-breach);3961  line-height: 1.4;3962}39633964/* ── PeachScript tab ──────────────────────────────────────────────────── */39653966.peach-restore-symbols-textarea {3967  font-family: 'PeachScript', monospace;3968  font-size: 13px;3969  line-height: 1.9;3970  letter-spacing: 0.1em;3971  word-break: break-all;3972  resize: none;3973  width: 100%;3974  min-height: 56px;3975  max-height: 72px;3976  overflow: hidden;3977  scrollbar-width: none;3978  -ms-overflow-style: none;3979  box-sizing: border-box;3980  padding: 6px 8px;3981  border-radius: 8px;3982  border: 1px solid var(--peach-t3);3983  background: rgba(240, 232, 216, 0.03);3984  color: var(--peach-t0);3985}3986.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3987.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }39883989.peach-restore-symbols-pass {3990  width: 100%;3991  box-sizing: border-box;3992  padding: 7px 10px;3993  border-radius: 8px;3994  border: 1px solid var(--peach-t3);3995  background: rgba(240, 232, 216, 0.03);3996  color: var(--peach-t0);3997  font-size: 0.8125rem;3998}3999.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }4000.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }40014002.peach-rt-divider {4003  text-align: center;4004  font-size: 0.6875rem;4005  color: var(--peach-t2);4006  font-style: italic;4007}40084009.peach-rt-file-label {4010  width: 100%;4011  justify-content: center;4012}40134014.peach-rt-anim-canvas {4015  width: 100%;4016  height: 180px;4017  border-radius: 10px;4018  overflow: hidden;4019  display: block;4020}40214022/* ── CSV tab ──────────────────────────────────────────────────────────── */40234024.peach-rt-csv-sources {4025  margin: 0;4026  font-size: 0.6875rem;4027  color: var(--peach-t2);4028  line-height: 1.5;4029  text-align: center;4030}40314032.peach-rt-csv-warning {4033  margin: 0;4034  font-family: "IBM Plex Mono", monospace;4035  font-size: 0.5625rem;4036  letter-spacing: 0.12em;4037  color: var(--peach-breach);4038  text-align: center;4039}40404041/* ── From Phone tab ───────────────────────────────────────────────────── */40424043.peach-rt-phone-code {4044  margin: 0;4045  text-align: center;4046  font-family: "IBM Plex Mono", monospace;4047  font-size: 22px;4048  letter-spacing: 0.18em;4049  color: var(--peach-t0);4050}40514052.peach-rt-phone-qr {4053  display: block;4054  width: 96px;4055  height: 96px;4056  margin: 0 auto;4057  border-radius: 6px;4058  image-rendering: pixelated;4059  overflow: hidden;4060}40614062.peach-rt-phone-hint {4063  margin: 0;4064  font-size: 0.6875rem;4065  color: var(--peach-t2);4066  line-height: 1.55;4067  text-align: center;4068}40694070/* ── Intro popup ──────────────────────────────────────────────────────── */40714072.peach-restore-intro-overlay {4073  position: absolute;4074  inset: 0;4075  z-index: 100;4076  display: flex;4077  align-items: center;4078  justify-content: center;4079  padding: 20px;4080  background: rgba(12, 10, 6, 0.7);4081  backdrop-filter: blur(4px);4082  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4083}40844085.peach-restore-intro-card {4086  width: 100%;4087  display: flex;4088  flex-direction: column;4089  gap: 12px;4090  padding: 22px 20px 20px;4091  border-radius: 16px;4092  border: 1px solid var(--peach-t3);4093  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));4094  backdrop-filter: blur(4px);4095  -webkit-backdrop-filter: blur(4px);4096  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);4097}40984099.peach-restore-intro-headline {4100  margin: 0;4101  font-family: var(--font-display);4102  font-style: italic;4103  font-size: 20px;4104  font-weight: 400;4105  color: var(--peach-t0);4106}41074108.peach-restore-intro-body {4109  display: flex;4110  flex-direction: column;4111  gap: 8px;4112}4113.peach-restore-intro-body p {4114  margin: 0;4115  font-size: 0.75rem;4116  color: var(--peach-t1);4117  line-height: 1.5;4118}41194120.peach-restore-intro-btn {4121  width: 100%;4122  margin-top: 4px;4123}41244125/* Snapshot restore panel */4126.peach-snapshot-panel {4127  gap: 10px;4128  overflow-y: auto;4129  max-height: 340px;4130}4131.peach-snapshot-list {4132  display: flex;4133  flex-direction: column;4134  gap: 4px;4135}4136.peach-snapshot-row {4137  display: flex;4138  align-items: center;4139  justify-content: space-between;4140  width: 100%;4141  padding: 8px 10px;4142  border-radius: 8px;4143  border: 1px solid rgba(240, 232, 216, 0.07);4144  background: transparent;4145  cursor: pointer;4146  transition: border-color 120ms, background 120ms;4147  text-align: left;4148  gap: 8px;4149}4150.peach-snapshot-row:hover {4151  border-color: rgba(240, 232, 216, 0.14);4152  background: rgba(240, 232, 216, 0.03);4153}4154.peach-snapshot-row.is-selected {4155  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4156  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);4157}4158.peach-snapshot-time {4159  font-size: 11.5px;4160  color: var(--peach-t0);4161  flex: 1;4162}4163.peach-snapshot-count {4164  font-family: "IBM Plex Mono", monospace;4165  font-size: 0.625rem;4166  color: var(--peach-t2);4167  flex-shrink: 0;4168}4169.peach-snapshot-confirm {4170  display: flex;4171  flex-direction: column;4172  gap: 8px;4173  padding-top: 10px;4174  border-top: 1px solid rgba(240, 232, 216, 0.06);4175}4176.peach-snapshot-warning {4177  display: flex;4178  align-items: flex-start;4179  gap: 6px;4180  font-size: 10.5px;4181  color: rgba(220, 80, 60, 0.85);4182  line-height: 1.55;4183}4184.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }4185.peach-snapshot-confirm-row {4186  display: flex;4187  gap: 6px;4188  align-items: center;4189}4190.peach-snapshot-restore-btn {4191  width: 100%;4192}4193.peach-lock-hero--unlock .peach-lock-hero-art {4194  width: 112px;4195  height: 112px;4196  right: 0;4197  top: 2px;4198  opacity: 0.1;4199}42004201.peach-card {4202  border: 1px solid var(--peach-t3);4203  border-radius: 18px;4204  background:4205    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4206  box-shadow:4207    inset 0 0 0 1px var(--peach-border-accent),4208    inset 0 1px 0 rgba(240, 232, 216, 0.04),4209    0 12px 32px rgba(0, 0, 0, 0.14);4210  overflow: hidden;4211}42124213.peach-card-active {4214  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4215  box-shadow:4216    inset 0 1px 0 rgba(240, 232, 216, 0.05),4217    0 16px 38px rgba(0, 0, 0, 0.18),4218    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4219}42204221.peach-card-disabled {4222  opacity: 0.72;4223}42244225.peach-card-header {4226  width: 100%;4227  padding: 13px 16px 11px;4228  background: transparent;4229  color: var(--peach-t0);4230  display: flex;4231  justify-content: space-between;4232  align-items: center;4233  text-align: left;4234  font-size: 0.75rem;4235}42364237.peach-card-body {4238  padding: 0 16px 16px;4239  display: grid;4240  gap: 9px;4241}42424243.peach-card-tag {4244  color: var(--peach-t2);4245  font-family: "IBM Plex Mono", monospace;4246  font-size: 0.5625rem;4247  letter-spacing: 0.12em;4248  text-transform: uppercase;4249}42504251.peach-empty-copy {4252  display: grid;4253  gap: 6px;4254  color: var(--peach-t1);4255  font-size: 0.8125rem;4256}42574258.peach-lock-submit {4259  width: 100%;4260  box-shadow:4261    0 1px 0 rgba(255,255,255,0.10) inset,4262    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4263    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4264    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4265}42664267.peach-lock-secondary {4268  width: 100%;4269  border-color: var(--peach-t3);4270  background: rgba(240, 232, 216, 0.02);4271}42724273.peach-lock-secondary:hover {4274  background: rgba(240, 232, 216, 0.04);4275}42764277.peach-lock-note {4278  max-width: none;4279  line-height: 1.55;4280  margin: 0;4281}42824283.peach-overlay-action {4284  font-size: 0.625rem;4285  padding: 4px 8px;4286  letter-spacing: 0.06em;4287  min-width: 44px;4288  text-align: center;4289}42904291.peach-inline-action {4292  flex-shrink: 0;4293  font-size: 0.5625rem;4294  letter-spacing: 0.1em;4295  text-transform: uppercase;4296  padding: 4px 7px;4297}4298.peach-password-toggle-btn {4299  display: inline-flex;4300  align-items: center;4301  justify-content: center;4302  min-width: 30px;4303  min-height: 26px;4304  padding: 0 7px;4305  border: 1px solid var(--peach-t3);4306  border-radius: 999px;4307  background: rgba(240, 232, 216, 0.04);4308  color: var(--peach-t2);4309  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4310}4311.peach-password-toggle-btn:hover {4312  border-color: var(--peach-t2);4313  color: var(--peach-t0);4314  background: rgba(240, 232, 216, 0.06);4315}43164317.peach-new-textarea {4318  width: 100%;4319  min-height: 88px;4320  resize: vertical;4321  border: 0;4322  outline: none;4323  background: transparent;4324  color: var(--peach-t1);4325  font-family: "IBM Plex Mono", monospace;4326  font-size: 0.75rem;4327  line-height: 1.65;4328  caret-color: var(--peach-accent);4329}43304331.peach-new-textarea::placeholder {4332  color: var(--peach-t2);4333  opacity: 0.7;4334}43354336.peach-settings-actions {4337  display: grid;4338  gap: 8px;4339}43404341.peach-sync-section-label {4342  font-size: 0.6875rem;4343  color: var(--peach-t2);4344  text-transform: uppercase;4345  letter-spacing: 0.05em;4346}43474348.peach-sync-network-note {4349  margin: 0 0 6px;4350  font-size: 0.75rem;4351  color: var(--peach-t2);4352  line-height: 1.4;4353}43544355.peach-settings-row--tappable {4356  background: none;4357  border: none;4358  width: 100%;4359  text-align: left;4360  cursor: pointer;4361  color: var(--peach-t1);4362  font-size: 0.8125rem;4363}4364.peach-settings-row--tappable:hover {4365  color: var(--peach-t0);4366}43674368.peach-sync-pro-hint {4369  display: flex;4370  flex-direction: column;4371  align-items: flex-start;4372  gap: 8px;4373  padding: 12px 0 4px;4374}43754376.peach-sync-device-row {4377  display: flex;4378  justify-content: space-between;4379  align-items: center;4380  padding: 6px 0;4381  border-bottom: 1px solid var(--peach-t3);4382}43834384.peach-sync-device-info {4385  display: flex;4386  flex-direction: column;4387  gap: 2px;4388}43894390.peach-sync-device-name {4391  font-size: 0.8125rem;4392  color: var(--peach-t0);4393}43944395.peach-sync-device-meta {4396  font-size: 0.6875rem;4397  color: var(--peach-t2);4398}43994400.peach-sync-status-dot {4401  display: inline-block;4402  width: 8px;4403  height: 8px;4404  border-radius: 50%;4405  vertical-align: middle;4406}44074408.peach-sync-remove-btn {4409  color: var(--peach-breach);4410}44114412.peach-sync-advanced-row {4413  display: flex;4414  justify-content: space-between;4415  align-items: center;4416  padding: 6px 0;4417  gap: 12px;4418}44194420.peach-sync-advanced-info {4421  display: flex;4422  flex-direction: column;4423  gap: 2px;4424  flex: 1;4425}44264427.peach-sync-advanced-name {4428  font-size: 0.8125rem;4429  color: var(--peach-t0);4430}44314432.peach-sync-reset-confirm {4433  display: flex;4434  flex-direction: column;4435  gap: 8px;4436  padding: 10px;4437  border: 1px solid var(--peach-breach);4438  border-radius: 10px;4439  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4440}44414442.peach-sync-reset-confirm-headline {4443  font-size: 0.8125rem;4444  font-weight: 600;4445  color: var(--peach-t0);4446  margin: 0;4447}44484449.peach-sync-reset-confirm-body {4450  font-size: 0.75rem;4451  color: var(--peach-t1);4452  margin: 0;4453  line-height: 1.4;4454}44554456.peach-btn--danger {4457  background: var(--peach-breach);4458  color: #fff;4459  border-color: var(--peach-breach);4460}4461.peach-btn--danger:hover:not(:disabled) {4462  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4463}4464.peach-btn--danger:disabled {4465  opacity: 0.55;4466  cursor: not-allowed;4467}44684469.peach-sync-hero-icon {4470  color: var(--peach-t1);4471  opacity: 0.85;4472}44734474.peach-import-preview {4475  margin-bottom: 12px;4476  max-height: 152px;4477  overflow-y: auto;4478  border: 1px solid var(--peach-t3);4479  border-radius: 10px;4480  padding: 8px 10px;4481  display: grid;4482  gap: 8px;4483  background: rgba(240, 232, 216, 0.02);4484}44854486.peach-import-preview-row {4487  display: flex;4488  justify-content: space-between;4489  gap: 10px;4490  font-size: 0.6875rem;4491  color: var(--peach-t1);4492}44934494.peach-import-preview-title {4495  color: var(--peach-t0);4496  flex: 1;4497  min-width: 0;4498  overflow: hidden;4499  text-overflow: ellipsis;4500  white-space: nowrap;4501}45024503.peach-import-preview-meta {4504  color: var(--peach-t2);4505  flex-shrink: 0;4506  max-width: 42%;4507  overflow: hidden;4508  text-overflow: ellipsis;4509  white-space: nowrap;4510}45114512.peach-import-preview-more {4513  color: var(--peach-t2);4514  font-size: 0.625rem;4515}45164517.peach-restore-copy {4518  margin: 0;4519  color: var(--peach-t1);4520  font-size: 0.6875rem;4521  line-height: 1.6;4522}45234524.peach-restore-warning {4525  padding: 10px 12px;4526  border-radius: 12px;4527  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4528  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4529  color: var(--peach-t0);4530  font-size: 0.6875rem;4531  line-height: 1.55;4532}45334534.peach-provider-chips {4535  display: flex;4536  flex-wrap: wrap;4537  gap: 6px;4538}45394540.peach-provider-chip {4541  display: inline-flex;4542  align-items: center;4543  padding: 5px 8px;4544  border-radius: 999px;4545  border: 1px solid var(--peach-t3);4546  background: rgba(240, 232, 216, 0.02);4547  color: var(--peach-t1);4548  font-family: "IBM Plex Mono", monospace;4549  font-size: 0.5rem;4550  letter-spacing: 0.08em;4551  text-transform: uppercase;4552}45534554.peach-restore-file,4555.peach-restore-input {4556  width: 100%;4557  border-radius: 10px;4558  border: 1px solid var(--peach-t3);4559  background: var(--peach-s2);4560  color: var(--peach-t0);4561  font-size: 0.75rem;4562}45634564.peach-restore-file {4565  padding: 9px 10px;4566}45674568.peach-restore-file::file-selector-button {4569  margin-right: 10px;4570  padding: 7px 10px;4571  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4572  border-radius: 999px;4573  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4574  color: var(--peach-t0);4575  font-size: 0.625rem;4576  letter-spacing: 0.08em;4577  text-transform: uppercase;4578  cursor: pointer;4579}45804581.peach-restore-input {4582  padding: 10px 12px;4583}45844585.peach-auth-grid {4586  display: grid;4587  gap: 10px;4588}45894590.peach-import-summary {4591  color: var(--peach-t1);4592  font-size: 0.75rem;4593  line-height: 1.6;4594  margin-bottom: 12px;4595}45964597.peach-restore-error {4598  color: rgba(220, 80, 60, 0.95);4599  font-size: 0.75rem;4600  line-height: 1.55;4601}46024603.peach-passkey-card {4604  max-width: 400px;4605  margin: auto 16px;4606  align-self: center;4607  width: calc(100% - 32px);4608}46094610/* Center the approval card vertically inside the overlay-view (which sets4611 * flex-direction: column without justify-content). Without this, the card4612 * sits at the top with a tall empty band below — looks unfinished on the4613 * 320px popup. */4614.peach-overlay-view:has(.peach-passkey-card) {4615  justify-content: center;4616}46174618.peach-pro-badge {4619  padding: 2px 6px;4620  border-radius: 999px;4621  font-family: var(--font-ui);4622  font-size: 0.625rem;4623  letter-spacing: 0.08em;4624  text-transform: uppercase;4625  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4626  color: var(--peach-accent);4627}46284629/* ── Shortcuts rebind table ─────────────────────────────────── */4630.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4631.peach-shortcut-row {4632  display: flex;4633  align-items: center;4634  gap: 10px;4635  padding: 6px 0;4636}4637.peach-shortcut-row-label {4638  flex: 1;4639  font-size: 0.75rem;4640  color: var(--peach-t0);4641}4642.peach-shortcut-chip {4643  min-width: 64px;4644  padding: 4px 10px;4645  border-radius: 6px;4646  border: 1px solid var(--peach-t3);4647  background: var(--peach-input-bg, var(--surface-card));4648  color: var(--peach-t0);4649  font-family: var(--font-mono);4650  font-size: 0.6875rem;4651  letter-spacing: 0.04em;4652  cursor: pointer;4653  text-align: center;4654  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4655}4656.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4657.peach-shortcut-chip.is-custom {4658  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4659  color: var(--peach-accent);4660}4661.peach-shortcut-chip.is-capturing {4662  border-color: var(--peach-accent);4663  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4664  color: var(--peach-accent);4665  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4666}4667@keyframes peach-shortcut-capture-pulse {4668  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4669  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4670}4671.peach-shortcut-reset {4672  background: transparent;4673  border: none;4674  cursor: pointer;4675  color: var(--peach-t2);4676  padding: 4px 6px;4677  border-radius: 5px;4678  font-size: 0.875rem;4679  line-height: 1;4680  transition: color 120ms ease, background 120ms ease;4681}4682.peach-shortcut-reset:hover {4683  color: var(--peach-t0);4684  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4685}4686.peach-shortcuts-conflict {4687  margin: 4px 0 0;4688  padding: 8px 10px;4689  border-radius: 7px;4690  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4691  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4692  font-family: var(--font-mono);4693  font-size: 0.6875rem;4694  color: var(--peach-t0);4695}46964697/* ── Help dialog overlay (? to open) ────────────────────────── */4698.peach-shortcuts-help-backdrop {4699  position: fixed;4700  inset: 0;4701  background: rgba(0, 0, 0, 0.55);4702  backdrop-filter: blur(2px);4703  display: flex;4704  align-items: center;4705  justify-content: center;4706  z-index: 1000;4707  animation: peach-help-fade-in 140ms ease forwards;4708}4709@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4710.peach-shortcuts-help-card {4711  width: min(320px, 92vw);4712  max-height: 80vh;4713  overflow-y: auto;4714  border-radius: 14px;4715  border: 1px solid var(--peach-t3);4716  background: var(--peach-bg);4717  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4718  padding: 16px 18px 18px;4719  display: flex;4720  flex-direction: column;4721  gap: 12px;4722}4723.peach-shortcuts-help-head {4724  display: flex; align-items: center; justify-content: space-between;4725}4726.peach-shortcuts-help-head h3 {4727  margin: 0;4728  font-family: var(--font-display);4729  font-style: italic;4730  font-weight: 400;4731  font-size: 22px;4732  color: var(--peach-t0);4733}4734.peach-shortcuts-help-close {4735  background: transparent;4736  border: none;4737  color: var(--peach-t2);4738  cursor: pointer;4739  font-size: 0.875rem;4740  padding: 4px 8px;4741  border-radius: 5px;4742}4743.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4744.peach-shortcuts-help-body ul {4745  list-style: none; padding: 0; margin: 4px 0 12px;4746  display: grid; gap: 8px;4747}4748.peach-shortcuts-help-body li {4749  display: flex; align-items: center; justify-content: space-between; gap: 12px;4750  font-size: 0.75rem; color: var(--peach-t0);4751}4752.peach-shortcuts-help-body kbd {4753  font-family: var(--font-mono);4754  font-size: 0.6875rem;4755  padding: 3px 8px;4756  border-radius: 6px;4757  background: var(--surface-card);4758  border: 1px solid var(--peach-t3);4759  color: var(--peach-accent);4760  letter-spacing: 0.04em;4761}47624763/* ── Pro promo on Account screen ────────────────────────────── */4764.peach-pro-promo {4765  position: relative;4766  border-radius: 14px;4767  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4768  background:4769    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4770    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4771    var(--surface-card);4772  overflow: hidden;4773  margin-bottom: 14px;4774}4775.peach-pro-promo-glow {4776  position: absolute;4777  inset: -40% -20% auto auto;4778  width: 220px; height: 220px;4779  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4780  pointer-events: none;4781  filter: blur(8px);4782}4783.peach-pro-promo-inner {4784  position: relative;4785  padding: 18px 18px 16px;4786}4787.peach-pro-promo-title {4788  font-family: var(--font-display);4789  font-style: italic;4790  font-weight: 400;4791  font-size: 28px;4792  line-height: 1;4793  letter-spacing: -0.005em;4794  color: var(--peach-t0);4795  margin: 0 0 4px;4796}4797.peach-pro-promo-tagline {4798  font-family: var(--font-mono);4799  font-size: 0.625rem;4800  letter-spacing: 0.06em;4801  color: var(--peach-t2);4802  margin: 0 0 14px;4803}4804.peach-pro-promo-list {4805  list-style: none;4806  margin: 0 0 16px;4807  padding: 0;4808  display: grid;4809  gap: 9px;4810}4811.peach-pro-promo-list li {4812  display: flex;4813  align-items: flex-start;4814  gap: 9px;4815  font-size: 0.75rem;4816  color: var(--peach-t1);4817  line-height: 1.4;4818}4819.peach-pro-promo-list svg {4820  width: 14px;4821  height: 14px;4822  flex-shrink: 0;4823  color: var(--peach-accent);4824  margin-top: 2px;4825}4826.peach-pro-promo-list span {4827  color: var(--peach-t0);4828}4829.peach-pro-promo-cta {4830  width: 100%;4831  background: var(--peach-accent);4832  color: #fff;4833  border: none;4834  padding: 9px 12px;4835  border-radius: 9px;4836  font-size: 0.75rem;4837  font-weight: 500;4838  font-family: var(--font-ui);4839  letter-spacing: 0.02em;4840  text-decoration: none;4841  display: inline-flex;4842  align-items: center;4843  justify-content: center;4844  cursor: pointer;4845  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4846  box-shadow: 0 2px 16px var(--peach-glow);4847}4848.peach-pro-promo-cta:hover {4849  filter: brightness(1.07);4850  box-shadow: 0 4px 24px var(--peach-glow);4851  transform: translateY(-1px);4852}4853.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }48544855.peach-pro-or-divider {4856  display: flex;4857  align-items: center;4858  gap: 10px;4859  margin: 4px 0 12px;4860  font-family: var(--font-mono);4861  font-size: 0.625rem;4862  letter-spacing: 0.06em;4863  color: var(--peach-t2);4864  text-transform: uppercase;4865}4866.peach-pro-or-divider::before,4867.peach-pro-or-divider::after {4868  content: "";4869  flex: 1;4870  height: 1px;4871  background: var(--peach-t3);4872}48734874.peach-loading {4875  position: absolute;4876  inset: 0;4877  display: flex;4878  align-items: center;4879  justify-content: center;4880  background: var(--bg);4881  animation: peach-loading-pulse 1.2s ease-in-out infinite;4882}48834884@keyframes peach-loading-pulse {4885  0%, 100% { opacity: 0.6; }4886  50% { opacity: 1; }4887}48884889/* ── Health Dashboard ─────────────────────────────────────────────────── */4890.peach-health-body {4891  flex: 1;4892  overflow-y: auto;4893  display: flex;4894  flex-direction: column;4895  /* Hide the platform scrollbar — every other scrollable surface in the4896   * popup hides it; the Health view was the one outlier and it ruined the4897   * polish. Behavior unchanged, just no rail rendered. */4898  scrollbar-width: none;4899  -ms-overflow-style: none;4900}4901.peach-health-body::-webkit-scrollbar { display: none; }49024903/* Loading screen for the Vault Health view. The advanced report computation4904 * can run for a few seconds on a large vault — without a clear loading4905 * screen the surface looked broken (the entry view bleeds through the4906 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4907.peach-health-loading-screen {4908  flex: 1;4909  display: flex;4910  flex-direction: column;4911  align-items: center;4912  justify-content: center;4913  gap: 14px;4914  padding: 32px 28px;4915  text-align: center;4916}49174918.peach-health-loading-glyph {4919  width: 48px;4920  height: 48px;4921  display: flex;4922  align-items: center;4923  justify-content: center;4924  border-radius: 14px;4925  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4926  color: var(--peach-accent);4927}49284929.peach-health-loading-title {4930  margin: 0;4931  font-family: var(--font-display);4932  font-style: italic;4933  font-weight: 300;4934  font-size: 19px;4935  line-height: 1.2;4936  color: var(--peach-t0);4937}49384939.peach-health-loading-copy {4940  margin: 0;4941  max-width: 240px;4942  font-size: 0.75rem;4943  line-height: 1.55;4944  color: var(--peach-t2);4945}49464947.peach-health-loading-track {4948  width: 200px;4949  height: 3px;4950  margin-top: 6px;4951  border-radius: 999px;4952  background: rgba(240, 232, 216, 0.06);4953  overflow: hidden;4954}49554956.peach-health-loading-fill {4957  width: 40%;4958  height: 100%;4959  border-radius: inherit;4960  background: linear-gradient(4961    90deg,4962    transparent 0%,4963    var(--peach-accent) 50%,4964    transparent 100%4965  );4966  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4967}49684969@keyframes peach-health-loading-sweep {4970  0%   { transform: translateX(-100%); }4971  100% { transform: translateX(350%); }4972}49734974[data-motion="reduce"] .peach-health-loading-fill,4975[data-motion="reduce"] .peach-health-loading-glyph svg path {4976  animation: none;4977}49784979.peach-health-summary {4980  padding: 10px 16px 6px;4981  font-family: "IBM Plex Mono", monospace;4982  font-size: 0.6875rem;4983}4984.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4985.peach-health-summary-ok { color: var(--peach-t2); }49864987.peach-health-check-row {4988  padding: 0 16px 10px;4989}4990.peach-health-check-btn {4991  width: 100%;4992  display: flex;4993  align-items: center;4994  justify-content: center;4995}49964997.peach-health-sections {4998  flex: 1;4999  display: flex;5000  flex-direction: column;5001}50025003.peach-health-section {5004  border-bottom: 1px solid var(--peach-t3);5005}50065007.peach-health-section-header {5008  width: 100%;5009  display: flex;5010  align-items: center;5011  justify-content: space-between;5012  padding: 9px 16px;5013  background: transparent;5014  cursor: pointer;5015  color: var(--peach-t0);5016}50175018.peach-health-section-title-row {5019  display: flex;5020  align-items: center;5021  gap: 8px;5022}50235024.peach-health-count-badge {5025  display: inline-flex;5026  align-items: center;5027  justify-content: center;5028  min-width: 20px;5029  height: 18px;5030  padding: 0 5px;5031  border-radius: 999px;5032  background: rgba(220,80,60,0.15);5033  border: 1px solid rgba(220,80,60,0.25);5034  font-family: "IBM Plex Mono", monospace;5035  font-size: 0.5625rem;5036  color: rgba(220,80,60,0.9);5037}50385039.peach-health-section-title {5040  font-family: "IBM Plex Mono", monospace;5041  font-size: 0.6875rem;5042  text-transform: uppercase;5043  letter-spacing: 0.1em;5044  color: var(--peach-t1);5045}50465047.peach-health-chevron {5048  color: var(--peach-t2);5049  transition: transform 200ms ease;5050  flex-shrink: 0;5051}5052.peach-health-chevron.is-expanded {5053  transform: rotate(180deg);5054}50555056.peach-health-section-body {5057  padding: 0 16px 10px;5058  display: flex;5059  flex-direction: column;5060  gap: 4px;5061}50625063.peach-health-row {5064  display: flex;5065  align-items: flex-start;5066  justify-content: space-between;5067  gap: 8px;5068  padding: 6px 8px;5069  border-radius: 8px;5070  background: rgba(240,232,216,0.02);5071}50725073.peach-health-row-info {5074  flex: 1;5075  min-width: 0;5076  display: flex;5077  flex-direction: column;5078  gap: 2px;5079}50805081.peach-health-row-name {5082  font-family: var(--font-display);5083  font-size: 0.9375rem;5084  font-style: italic;5085  font-weight: 400;5086  color: var(--peach-t0);5087  white-space: nowrap;5088  overflow: hidden;5089  text-overflow: ellipsis;5090}50915092.peach-health-row-meta {5093  font-family: "IBM Plex Mono", monospace;5094  font-size: 0.5625rem;5095  color: var(--peach-t2);5096  letter-spacing: 0.05em;5097}50985099.peach-health-fix-btn {5100  font-size: 0.5625rem;5101  letter-spacing: 0.08em;5102  text-transform: uppercase;5103  padding: 4px 7px;5104  flex-shrink: 0;5105  display: flex;5106  align-items: center;5107}51085109.peach-health-empty {5110  font-family: "IBM Plex Mono", monospace;5111  font-size: 0.625rem;5112  color: var(--peach-t2);5113  padding: 6px 0;5114}51155116.peach-health-loading {5117  font-family: "IBM Plex Mono", monospace;5118  font-size: 0.625rem;5119  color: var(--peach-t2);5120  padding: 6px 0;5121  display: flex;5122  align-items: center;5123  gap: 6px;5124}51255126.peach-health-loading::before {5127  content: "";5128  width: 10px;5129  height: 10px;5130  border: 1.5px solid var(--peach-t3);5131  border-top-color: var(--peach-accent);5132  border-radius: 50%;5133  animation: peach-spin 600ms linear infinite;5134}51355136@keyframes peach-spin {5137  to { transform: rotate(360deg); }5138}51395140.peach-spinner {5141  width: 32px;5142  height: 32px;5143  border: 2px solid var(--peach-s2);5144  border-top-color: var(--peach-accent);5145  border-radius: 50%;5146  margin: 0 auto 16px;5147  animation: peach-spin 0.8s linear infinite;5148}51495150.peach-progress-screen {5151  text-align: center;5152  padding: 32px 16px;5153}51545155.peach-progress-screen-title {5156  font-size: 0.8125rem;5157  color: var(--peach-t0);5158  margin-bottom: 16px;5159}51605161.peach-progress-screen-stage {5162  font-size: 0.6875rem;5163  color: var(--peach-t2);5164  min-height: 14px;5165}51665167.peach-progress-screen-note {5168  font-size: 0.625rem;5169  color: var(--peach-t2);5170  margin-top: 8px;5171}51725173.peach-pairing-body {5174  flex: 1;5175  overflow-y: auto;5176  display: flex;5177  flex-direction: column;5178}51795180.peach-pairing-content {5181  flex: 1;5182  display: flex;5183  flex-direction: column;5184  align-items: center;5185  justify-content: center;5186  gap: 14px;5187  padding: 28px 20px;5188  text-align: center;5189}51905191.peach-pairing-code-screen {5192  gap: 18px;5193}51945195.peach-pairing-headline {5196  font-family: var(--font-display);5197  font-style: italic;5198  font-weight: 300;5199  font-size: 28px;5200  color: var(--peach-t0);5201  margin: 0;5202  line-height: 1;5203}52045205.peach-pairing-subline {5206  font-size: 0.75rem;5207  color: var(--peach-t2);5208  max-width: 220px;5209  line-height: 1.5;5210  margin: 0;5211}52125213.peach-pairing-subline--center {5214  text-align: center;5215}52165217/* 6-digit pairing code — both display (.peach-pairing-code) and entry5218   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking5219   so the two modes feel like the same surface. */5220.peach-pairing-code {5221  font-family: "IBM Plex Mono", monospace;5222  font-size: 36px;5223  letter-spacing: 0.25em;5224  color: var(--peach-t0);5225  text-align: center;5226  padding: 24px 0;5227  text-shadow:5228    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),5229    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);5230  background: transparent;5231  border: 0;5232  cursor: default;5233  user-select: text;5234}52355236.peach-pairing-code--loading,5237.peach-pairing-code--expired {5238  font-size: 18px;5239  letter-spacing: 0.04em;5240  color: var(--peach-t2);5241  cursor: pointer;5242  text-shadow: none;5243}52445245.peach-pairing-qr-container {5246  display: flex;5247  flex-direction: column;5248  align-items: center;5249  gap: 10px;5250}52515252.peach-pairing-qr {5253  width: 240px;5254  height: 240px;5255  display: block;5256}52575258.peach-pairing-instruction {5259  font-size: 0.75rem;5260  color: var(--peach-t2);5261  text-align: center;5262  line-height: 1.5;5263  margin: 0;5264  max-width: 220px;5265}52665267.peach-pairing-expiry {5268  font-family: "IBM Plex Mono", monospace;5269  font-size: 13px;5270  letter-spacing: 0.06em;5271  color: var(--peach-t2);5272  margin: 0;5273}52745275.peach-pairing-regen {5276  font-size: 0.75rem;5277  color: var(--peach-accent);5278  background: transparent;5279  border: 0;5280  cursor: pointer;5281  padding: 4px 0;5282  text-decoration: underline;5283  text-underline-offset: 2px;5284}52855286.peach-pairing-code-input {5287  font-family: "IBM Plex Mono", monospace;5288  font-size: 36px;5289  letter-spacing: 0.25em;5290  color: var(--peach-t0);5291  background: transparent;5292  border: 0;5293  border-bottom: 1px solid var(--peach-t3);5294  outline: none;5295  text-align: center;5296  padding: 18px 0;5297  width: 220px;5298  caret-color: var(--peach-accent);5299  transition: border-color 160ms ease;5300}53015302.peach-pairing-code-input::placeholder {5303  color: var(--peach-t3);5304}53055306.peach-pairing-code-input:focus {5307  border-bottom-color: var(--peach-accent);5308}53095310.peach-pairing-toggle {5311  background: transparent;5312  border: 0;5313  color: var(--peach-t2);5314  font-size: 0.75rem;5315  padding: 8px 4px;5316  cursor: pointer;5317  transition: color 120ms ease;5318}53195320.peach-pairing-toggle:hover:not(:disabled) {5321  color: var(--peach-t1);5322}53235324.peach-pairing-toggle:disabled {5325  opacity: 0.5;5326  cursor: default;5327}53285329.peach-pairing-hint {5330  font-size: 0.6875rem;5331  color: var(--peach-t2);5332  margin: 0;5333  text-align: center;5334}53355336.peach-pairing-status {5337  display: flex;5338  align-items: center;5339  gap: 8px;5340  margin: 0;5341  font-size: 0.75rem;5342  color: var(--peach-t1);5343}53445345.peach-pairing-error {5346  margin: 0;5347  font-size: 0.6875rem;5348  color: var(--peach-breach);5349}53505351.peach-pairing-error--muted {5352  color: var(--peach-t2);5353}53545355.peach-pairing-spinner {5356  width: 12px;5357  height: 12px;5358  border: 1.5px solid var(--peach-t3);5359  border-top-color: var(--peach-accent);5360  border-radius: 50%;5361  animation: peach-spin 0.8s linear infinite;5362}53635364.peach-pairing-success-icon,5365.peach-pairing-error-icon,5366.peach-pairing-hero {5367  display: inline-flex;5368  align-items: center;5369  justify-content: center;5370}53715372/* Tag chips */5373.peach-tag-chip {5374  display: inline-flex;5375  align-items: center;5376  gap: 4px;5377  padding: 3px 8px;5378  border-radius: 999px;5379  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5380  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5381  color: var(--peach-t0);5382  font-family: "IBM Plex Mono", monospace;5383  font-size: 0.625rem;5384  letter-spacing: 0.04em;5385}53865387.peach-tag-chip-remove {5388  background: transparent;5389  border: none;5390  color: inherit;5391  opacity: 0.6;5392  cursor: pointer;5393  padding: 0;5394  font-size: 0.75rem;5395  line-height: 1;5396}53975398.peach-tag-chip-remove:hover {5399  opacity: 1;5400}54015402/* Tag input */5403.peach-tag-input-wrap {5404  border-bottom: 1px solid var(--peach-t3);5405}54065407.peach-tag-suggestions {5408  display: flex;5409  flex-wrap: wrap;5410  gap: 4px;5411  padding: 6px 0;5412}54135414.peach-tag-suggestion {5415  padding: 2px 8px;5416  border-radius: 999px;5417  border: 1px solid var(--peach-t3);5418  background: var(--peach-s2);5419  color: var(--peach-t1);5420  font-family: "IBM Plex Mono", monospace;5421  font-size: 0.625rem;5422  cursor: pointer;5423  transition: border-color 80ms ease, background 80ms ease;5424}54255426.peach-tag-suggestion:hover {5427  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5428  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5429}54305431/* Identity suggestions — shown below username/email inputs in new-entry form */5432@keyframes peach-suggest-in {5433  from { opacity: 0; transform: translateY(-4px); }5434  to   { opacity: 1; transform: none; }5435}54365437.peach-identity-suggestions {5438  display: flex;5439  flex-direction: column;5440  gap: 1px;5441  margin-top: 4px;5442  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5443}54445445.peach-identity-filter-row {5446  display: flex;5447  align-items: center;5448  gap: 4px;5449  padding: 2px 0 5px;5450}54515452.peach-identity-collapse-btn {5453  margin-left: auto;5454  background: transparent;5455  border: none;5456  cursor: pointer;5457  color: var(--peach-t3);5458  padding: 2px 4px;5459  display: flex;5460  align-items: center;5461  line-height: 0;5462  border-radius: 3px;5463  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5464}54655466.peach-identity-collapse-btn:hover {5467  color: var(--peach-t1);5468}54695470.peach-identity-collapse-btn.is-collapsed {5471  transform: rotate(-90deg);5472}54735474.peach-identity-rows {5475  display: grid;5476  grid-template-rows: 1fr;5477  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5478}54795480.peach-identity-rows.is-collapsed {5481  grid-template-rows: 0fr;5482}54835484.peach-identity-rows-inner {5485  overflow-y: auto;5486  min-height: 0;5487  max-height: 148px;5488  scrollbar-width: thin;5489  scrollbar-color: var(--peach-t3) transparent;5490  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5491  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5492}54935494.peach-identity-rows-inner::-webkit-scrollbar {5495  width: 4px;5496}54975498.peach-identity-rows-inner::-webkit-scrollbar-track {5499  background: transparent;5500}55015502.peach-identity-rows-inner::-webkit-scrollbar-thumb {5503  background: var(--peach-t3);5504  border-radius: 2px;5505}55065507.peach-identity-filter-pill {5508  padding: 2px 7px;5509  border-radius: 999px;5510  border: 1px solid var(--peach-t3);5511  background: transparent;5512  color: var(--peach-t2);5513  font-family: "IBM Plex Mono", monospace;5514  font-size: 0.6rem;5515  cursor: pointer;5516  transition: border-color 80ms, background 80ms, color 80ms;5517}55185519.peach-identity-filter-pill.is-on {5520  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5521  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5522  color: var(--peach-accent);5523}55245525.peach-identity-suggestion {5526  display: flex;5527  align-items: center;5528  gap: 6px;5529  width: 100%;5530  padding: 4px 6px;5531  border-radius: 5px;5532  border: none;5533  background: transparent;5534  cursor: pointer;5535  text-align: left;5536  transition: background 80ms ease;5537}55385539.peach-identity-suggestion:hover,5540.peach-identity-suggestion:focus {5541  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5542  outline: none;5543}55445545.peach-identity-suggestion-value {5546  font-family: "IBM Plex Mono", monospace;5547  font-size: 0.7rem;5548  color: var(--peach-t1);5549  overflow: hidden;5550  text-overflow: ellipsis;5551  white-space: nowrap;5552  flex: 1;5553  min-width: 0;5554}55555556.peach-identity-suggestion-type {5557  font-family: "IBM Plex Mono", monospace;5558  font-size: 0.55rem;5559  font-weight: 600;5560  flex-shrink: 0;5561  padding: 1px 4px;5562  border-radius: 3px;5563}55645565.peach-identity-suggestion-type--email {5566  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5567  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5568}55695570.peach-identity-suggestion-type--username {5571  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5572  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5573}55745575.peach-identity-suggestion-meta {5576  font-family: "IBM Plex Mono", monospace;5577  font-size: 0.6rem;5578  color: var(--peach-t3);5579  flex-shrink: 0;5580}55815582/* Tag filter strip */5583.peach-tag-filter-strip {5584  border-bottom: 1px solid var(--peach-t3);5585  flex-shrink: 0;5586}55875588.peach-tag-filter-chip {5589  display: inline-flex;5590  align-items: center;5591  padding: 4px 10px;5592  border-radius: 999px;5593  border: 1px solid var(--peach-t3);5594  background: transparent;5595  color: var(--peach-t2);5596  font-family: "IBM Plex Mono", monospace;5597  font-size: 0.5625rem;5598  letter-spacing: 0.06em;5599  text-transform: uppercase;5600  cursor: pointer;5601  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5602  white-space: nowrap;5603}56045605.peach-tag-filter-chip:hover {5606  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5607  color: var(--peach-t1);5608}56095610.peach-tag-filter-chip.is-selected {5611  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5612  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5613  color: var(--peach-t0);5614}56155616/* ─────────────────────────────────────────────────────────────────────────5617   v1.4.12 additions5618   ─────────────────────────────────────────────────────────────────────── */56195620/* Sort bar */5621.peach-sort-bar {5622  display: flex;5623  align-items: center;5624  gap: 4px;5625  padding: 5px 12px;5626  border-bottom: 1px solid var(--peach-t3);5627  flex-shrink: 0;5628  overflow-x: auto;5629  scrollbar-width: none;5630}56315632.peach-sort-btn {5633  padding: 2px 9px;5634  border-radius: 999px;5635  border: 1px solid transparent;5636  background: transparent;5637  color: var(--peach-t2);5638  font-family: "IBM Plex Mono", monospace;5639  font-size: 0.5625rem;5640  letter-spacing: 0.07em;5641  text-transform: uppercase;5642  cursor: pointer;5643  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5644  white-space: nowrap;5645}56465647.peach-sort-btn:hover {5648  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5649  color: var(--peach-t1);5650}56515652.peach-sort-btn.is-active {5653  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5654  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5655  color: var(--peach-t0);5656}56575658.peach-sort-scope-btn {5659  padding-inline: 8px;5660  font-size: 0.53125rem;5661  letter-spacing: 0.05em;5662}56635664.peach-sort-domain-hint {5665  margin-left: auto;5666  font-family: "IBM Plex Mono", monospace;5667  font-size: 0.5625rem;5668  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5669  white-space: nowrap;5670  overflow: hidden;5671  text-overflow: ellipsis;5672  max-width: 110px;5673}56745675/* Tab-match badge on entry rows */5676.peach-tab-match-badge {5677  display: inline-block;5678  width: 6px;5679  height: 6px;5680  border-radius: 50%;5681  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5682  margin-left: 5px;5683  vertical-align: middle;5684  flex-shrink: 0;5685  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5686}56875688.peach-entry-row.is-tab-match {5689  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5690  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5691}56925693.peach-entry-row.is-tab-match:hover {5694  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5695}56965697/* Entry list stagger entrance */5698@keyframes peach-entry-fadein {5699  from { opacity: 0; transform: translateY(4px); }5700  to   { opacity: 1; transform: translateY(0); }5701}57025703.peach-vault-list .peach-entry-row {5704  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5705}57065707/* Button press micro-interaction */5708.peach-btn:active {5709  transform: scale(0.95);5710  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5711}57125713.peach-sort-btn:active,5714.peach-tag-filter-chip:active {5715  transform: scale(0.93);5716  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5717}57185719/* Password strength bar (Lock view + shared) */5720.peach-password-strength {5721  display: flex;5722  align-items: center;5723  gap: 8px;5724  margin-top: 6px;5725}57265727.peach-strength-bar {5728  flex: 1;5729  height: 3px;5730  border-radius: 2px;5731  background: var(--peach-t3);5732  overflow: hidden;5733}57345735.peach-strength-fill {5736  height: 100%;5737  border-radius: 2px;5738  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5739              background 300ms ease;5740}57415742.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5743.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5744.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5745.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }57465747.peach-strength-label {5748  font-family: "IBM Plex Mono", monospace;5749  font-style: italic;5750  font-size: 0.5625rem;5751  font-weight: 300;5752  letter-spacing: 0.06em;5753  color: var(--peach-t2);5754  min-width: 36px;5755  text-align: right;5756}57575758.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5759.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5760.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5761.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }57625763/* Duress form */5764.peach-duress-status {5765  padding: 2px 8px;5766  border-radius: 999px;5767  border: 1px solid var(--peach-t3);5768  font-family: "IBM Plex Mono", monospace;5769  font-size: 0.5625rem;5770  letter-spacing: 0.07em;5771  text-transform: uppercase;5772  color: var(--peach-t2);5773  flex-shrink: 0;5774}57755776.peach-duress-status.is-active {5777  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5778  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5779  color: var(--peach-t0);5780}57815782.peach-duress-form {5783  padding: 8px 0 4px;5784  display: flex;5785  flex-direction: column;5786  gap: 6px;5787}57885789.peach-duress-form .peach-label {5790  margin-top: 4px;5791}57925793.peach-duress-actions {5794  display: flex;5795  gap: 6px;5796  align-items: center;5797  margin-top: 4px;5798}57995800.peach-duress-actions .peach-btn:first-child {5801  margin-right: auto;5802}58035804/* Improved overlay spring entrance */5805.peach-overlay-view.ov-enter-up {5806  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5807}58085809@keyframes ov-enter-up-spring {5810  from { opacity: 0; transform: translateY(16px) scale(0.98); }5811  to   { opacity: 1; transform: translateY(0) scale(1); }5812}58135814.peach-overlay-view.ov-enter-right {5815  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5816}58175818@keyframes ov-enter-right-spring {5819  from { opacity: 0; transform: translateX(18px) scale(0.98); }5820  to   { opacity: 1; transform: translateX(0) scale(1); }5821}58225823/* ── Onboarding-mode restore screens (file import) ── */5824/* Used when MainImportView renders during onboarding (no vault yet).5825   Animates like a lock-screen transition. */5826.peach-lock-view {5827  position: absolute;5828  inset: 0;5829  display: flex;5830  flex-direction: column;5831  background:5832    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5833    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5834    var(--peach-bg);5835  z-index: 2;5836  overflow: hidden;5837  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5838}58395840.peach-lock-view-header {5841  display: flex;5842  align-items: center;5843  justify-content: space-between;5844  padding: 16px 18px 12px;5845  flex-shrink: 0;5846}58475848/* ───────── Settings: auto-lock select ───────── */5849.peach-settings-select {5850  font-family: "IBM Plex Mono", monospace;5851  font-size: 0.6875rem;5852  background: transparent;5853  border: 1px solid var(--peach-t3);5854  border-radius: 4px;5855  color: var(--peach-t1);5856  padding: 3px 6px;5857  cursor: pointer;5858  outline: none;5859}5860.peach-settings-select:focus {5861  border-color: var(--peach-accent);5862}58635864/* ───────── Duress status pill (new polished) ───────── */5865.peach-duress-status-pill {5866  font-family: "IBM Plex Mono", monospace;5867  font-size: 0.5625rem;5868  text-transform: uppercase;5869  letter-spacing: 0.12em;5870  padding: 2px 8px;5871  border-radius: 12px;5872  background: var(--peach-t3);5873  color: var(--peach-t2);5874  flex-shrink: 0;5875}5876.peach-duress-status-pill.is-active {5877  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5878  color: var(--peach-accent);5879}58805881/* ───────── Entry advanced disclosure (canary) ───────── */5882.peach-entry-advanced {5883  margin-top: 12px;5884  border-top: 1px solid var(--peach-t3);5885  padding-top: 10px;5886  position: relative;5887  z-index: 1;5888}5889.peach-entry-advanced-toggle {5890  display: flex;5891  align-items: center;5892  justify-content: space-between;5893  width: 100%;5894  background: transparent;5895  border: none;5896  cursor: pointer;5897  padding: 0;5898  color: var(--peach-t2);5899}5900.peach-canary-section {5901  margin-top: 10px;5902  display: grid;5903  gap: 6px;5904}59055906/* ───────── Import: merge/replace radio choices ───────── */5907.peach-import-choice {5908  display: flex;5909  align-items: flex-start;5910  gap: 10px;5911  padding: 8px 10px;5912  border: 1px solid var(--peach-t3);5913  border-radius: 10px;5914  cursor: pointer;5915  margin-bottom: 6px;5916  transition: border-color 120ms ease, background 120ms ease;5917}5918.peach-import-choice:hover {5919  border-color: var(--peach-accent);5920}5921.peach-import-choice input[type="radio"] {5922  margin-top: 3px;5923  accent-color: var(--peach-accent);5924  flex-shrink: 0;5925}5926.peach-import-choice-main {5927  display: flex;5928  flex-direction: column;5929  gap: 2px;5930  min-width: 0;5931}5932.peach-import-choice-label {5933  font-size: 0.75rem;5934  color: var(--peach-t0);5935}5936.peach-import-choice-sub {5937  font-size: 0.6875rem;5938  color: var(--peach-t2);5939  line-height: 1.5;5940}59415942/* ───────── Export: success confirmation strip ───────── */5943.peach-export-success {5944  display: flex;5945  align-items: flex-start;5946  gap: 10px;5947  padding: 12px;5948  border-radius: 12px;5949  border: 1px solid rgba(150, 175, 110, 0.3);5950  background: rgba(150, 175, 110, 0.08);5951  color: var(--peach-t0);5952  font-size: 0.75rem;5953  line-height: 1.55;5954}5955.peach-export-success-check {5956  color: rgba(150, 175, 110, 0.9);5957  font-size: 0.875rem;5958  flex-shrink: 0;5959}59605961/* ── Trash view ──────────────────────────────────────────────────────── */5962.peach-trash-entry-row {5963  display: flex;5964  align-items: center;5965  justify-content: space-between;5966  gap: 8px;5967  padding: 8px 0;5968  border-bottom: 1px solid var(--peach-border);5969}5970.peach-trash-entry-info {5971  flex: 1;5972  min-width: 0;5973  display: flex;5974  flex-direction: column;5975  gap: 2px;5976}5977.peach-trash-entry-title {5978  font-size: 0.8125rem;5979  color: var(--peach-t0);5980  overflow: hidden;5981  text-overflow: ellipsis;5982  white-space: nowrap;5983}5984.peach-trash-entry-meta {5985  font-family: var(--font-mono);5986  font-size: 0.5625rem;5987  color: var(--peach-t2);5988  letter-spacing: 0.04em;5989}5990.peach-trash-entry-actions {5991  display: flex;5992  align-items: center;5993  gap: 4px;5994  flex-shrink: 0;5995}5996.peach-trash-delete-btn {5997  background: transparent;5998  border: 0;5999  color: var(--peach-t3);6000  font-size: 1rem;6001  line-height: 1;6002  cursor: pointer;6003  padding: 2px 5px;6004  transition: color 0.15s;6005}6006.peach-trash-delete-btn:hover { color: var(--peach-breach); }6007.peach-trash-list {6008  overflow-y: auto;6009}6010.peach-trash-footer {6011  display: flex;6012  align-items: center;6013  gap: 8px;6014  padding: 8px 0 0;6015  border-top: 1px solid var(--peach-border);6016  margin-top: 4px;6017}6018.peach-trash-purge-all {6019  background: transparent;6020  border: 0;6021  color: var(--peach-t3);6022  font-size: 0.625rem;6023  cursor: pointer;6024  padding: 4px 0;6025  letter-spacing: 0.03em;6026  transition: color 0.2s;6027}6028.peach-trash-purge-all:hover { color: var(--peach-breach); }6029.peach-trash-purge-confirm-label {6030  font-size: 0.625rem;6031  color: var(--peach-t1);6032  flex: 1;6033}60346035/* ── Settings shortcuts grid ─────────────────────────────────────────── */6036.peach-shortcuts-grid {6037  display: grid;6038  grid-template-columns: auto 1fr;6039  gap: 6px 12px;6040  align-items: center;6041  padding: 4px 0;6042}6043.peach-shortcut-key {6044  font-family: var(--font-mono);6045  font-size: 0.625rem;6046  color: var(--peach-t0);6047  background: var(--peach-t3);6048  border-radius: 4px;6049  padding: 2px 6px;6050  white-space: nowrap;6051  text-align: center;6052}6053.peach-shortcut-desc {6054  font-size: 0.6875rem;6055  color: var(--peach-t1);6056}60576058/* ── Sort bar trash button ───────────────────────────────────────────── */6059.peach-sort-trash-btn {6060  display: flex;6061  align-items: center;6062  justify-content: center;6063  padding: 3px 5px;6064  background: transparent;6065  border: none;6066  cursor: pointer;6067  color: var(--peach-t2);6068  border-radius: 4px;6069  transition: color 140ms ease, background 140ms ease;6070}6071.peach-sort-trash-btn:hover {6072  color: var(--peach-t1);6073  background: var(--peach-t3);6074}6075.peach-sort-trash-btn.is-active {6076  color: var(--peach-accent);6077}60786079/* Accent color picker */6080.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }6081.peach-accent-picker {6082  display: flex;6083  flex-wrap: wrap;6084  gap: 7px;6085  padding: 2px 0;6086}6087.peach-accent-swatch {6088  width: 22px;6089  height: 22px;6090  border-radius: 50%;6091  border: 2px solid transparent;6092  cursor: pointer;6093  padding: 0;6094  transition: transform 100ms;6095  outline-offset: 2px;6096}6097.peach-accent-swatch:hover { transform: scale(1.15); }6098.peach-accent-swatch.is-active {6099  border-color: var(--peach-t0);6100  transform: scale(1.1);6101}61026103.peach-pill-group {6104  display: flex;6105  gap: 6px;6106}6107.peach-pill-group .peach-btn.is-active {6108  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);6109  border-color: var(--peach-accent);6110  color: var(--peach-t0);6111}61126113/* ── Card entry styles ───────────────────────────────────────── */6114.peach-card-number {6115  font-family: var(--peach-mono);6116  letter-spacing: 0.08em;6117}61186119.peach-card-network-badge {6120  font-size: 0.625rem;6121  padding: 1px 5px;6122  border-radius: 4px;6123  border: 0.5px solid var(--peach-border);6124  color: var(--peach-text-dim);6125  margin-left: 6px;6126  vertical-align: middle;6127}61286129.peach-card-expiry-row {6130  display: flex;6131  align-items: center;6132  gap: 8px;6133}61346135.peach-card-expiry-sep {6136  color: var(--peach-text-dim);6137}61386139/* ── Pro tier — upgrade screen ──────────────────────────────── */6140.peach-pro-mark {6141  font-size: 0.5625rem;6142  color: var(--peach-accent);6143  margin-left: 6px;6144  vertical-align: super;6145  opacity: 0.7;6146}61476148.peach-pro-mini-badge {6149  display: block;6150  font-size: 0.625rem;6151  font-style: italic;6152  color: var(--peach-accent);6153  letter-spacing: 0.04em;6154  margin-top: -2px;6155  padding-left: 2px;6156  opacity: 0.85;6157  text-align: center;6158}61596160.peach-wordmark-stack {6161  display: inline-flex;6162  flex-direction: column;6163  align-items: center;6164}61656166/* ── Pro tier — upgrade page ─────────────────────────────────── */6167/* ── Pro upgrade — redesigned editorial layout ─────────────────── */61686169.peach-pro-upgrade {6170  display: flex;6171  flex-direction: column;6172  align-items: stretch;6173  gap: 10px;6174  padding: 2px 2px 12px;6175}61766177.peach-pro-eyebrow {6178  margin: 0;6179  font-family: var(--font-ui);6180  font-size: 0.625rem;6181  font-weight: 500;6182  letter-spacing: 0.12em;6183  color: var(--peach-accent);6184}61856186.peach-pro-headline {6187  margin: 0;6188  font-family: var(--font-display, "Cormorant Garamond", serif);6189  font-size: 30px;6190  font-weight: 700;6191  font-style: normal;6192  line-height: 1.05;6193  color: var(--peach-t0);6194  letter-spacing: -0.01em;6195}6196.peach-pro-headline em {6197  font-style: italic;6198  font-weight: 400;6199  color: var(--peach-accent);6200}62016202.peach-pro-subtitle {6203  margin: 0;6204  font-size: 0.6875rem;6205  line-height: 1.5;6206  color: var(--peach-t1);6207}62086209/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6210.peach-pro-section-label {6211  margin: 6px 0 0;6212  font-family: var(--font-ui);6213  font-size: 0.5625rem;6214  font-weight: 500;6215  letter-spacing: 0.12em;6216  text-transform: uppercase;6217  color: var(--peach-t2);6218}62196220/* 2-column numbered feature grid */6221.peach-pro-grid {6222  display: grid;6223  grid-template-columns: 1fr 1fr;6224  border-top: 1px solid var(--peach-border);6225  border-left: 1px solid var(--peach-border);6226}62276228.peach-pro-grid-item {6229  display: flex;6230  flex-direction: column;6231  gap: 2px;6232  padding: 8px 9px;6233  border-right: 1px solid var(--peach-border);6234  border-bottom: 1px solid var(--peach-border);6235}62366237.peach-pro-grid-item--wide {6238  grid-column: 1 / -1;6239}62406241.peach-pro-grid-num {6242  font-family: var(--font-mono);6243  font-size: 0.5625rem;6244  color: var(--peach-accent);6245  letter-spacing: 0.06em;6246  opacity: 0.85;6247}62486249.peach-pro-grid-name {6250  font-size: 0.8125rem;6251  font-weight: 500;6252  color: var(--peach-t0);6253  line-height: 1.2;6254}62556256.peach-pro-grid-desc {6257  font-size: 0.625rem;6258  color: var(--peach-t1);6259  line-height: 1.4;6260}62616262.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6263  animation: peach-pulse-accent 600ms ease-out forwards;6264}62656266@keyframes peach-pulse-accent {6267  0%   { opacity: 1; transform: scale(1.2); }6268  100% { opacity: 0.85; transform: scale(1); }6269}62706271/* Actions */6272.peach-pro-upgrade-actions {6273  display: flex;6274  flex-direction: column;6275  align-items: stretch;6276  gap: 10px;6277}62786279.peach-pro-pricing {6280  margin: 0;6281  font-size: 1rem;6282  font-weight: 600;6283  color: var(--peach-t0);6284  letter-spacing: 0.01em;6285}6286.peach-pro-pricing-sub {6287  font-size: 0.75rem;6288  font-weight: 400;6289  color: var(--peach-t1);6290  letter-spacing: 0.02em;6291}62926293.peach-pro-upgrade-cta {6294  display: flex;6295  align-items: center;6296  justify-content: center;6297  text-decoration: none;6298  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6299  border: 1px solid var(--peach-accent);6300  border-radius: 10px;6301  color: var(--peach-accent);6302  font-family: var(--font-ui);6303  font-size: 0.8125rem;6304  font-weight: 600;6305  letter-spacing: 0.06em;6306  padding: 11px 16px;6307  transition: background 0.15s ease, color 0.15s ease;6308}6309.peach-pro-upgrade-cta:hover {6310  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6311}63126313.peach-pro-key-divider {6314  display: flex;6315  align-items: center;6316  gap: 8px;6317  color: var(--peach-t2);6318  font-size: 0.5625rem;6319  letter-spacing: 0.1em;6320}6321.peach-pro-key-divider::before,6322.peach-pro-key-divider::after {6323  content: "";6324  flex: 1;6325  height: 1px;6326  background: var(--peach-border);6327}63286329/* Inline key entry row */6330.peach-pro-key-inline {6331  display: flex;6332  align-items: center;6333  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6334  border: 1px solid var(--peach-border);6335  border-radius: 8px;6336  overflow: hidden;6337}6338.peach-pro-key-inline-input {6339  flex: 1;6340  background: transparent;6341  border: none;6342  outline: none;6343  color: var(--peach-t1);6344  font-family: var(--font-mono);6345  font-size: 0.625rem;6346  letter-spacing: 0.06em;6347  padding: 9px 10px;6348}6349.peach-pro-key-inline-input::placeholder {6350  color: var(--peach-t2);6351}6352.peach-pro-key-apply {6353  background: transparent;6354  border: none;6355  border-left: 1px solid var(--peach-border);6356  color: var(--peach-t2);6357  font-family: var(--font-ui);6358  font-size: 0.5625rem;6359  font-weight: 600;6360  letter-spacing: 0.08em;6361  padding: 9px 10px;6362  cursor: pointer;6363  transition: color 0.15s ease;6364  flex-shrink: 0;6365}6366.peach-pro-key-apply:not(:disabled):hover {6367  color: var(--peach-accent);6368}6369.peach-pro-key-apply:disabled {6370  opacity: 0.35;6371  cursor: not-allowed;6372}63736374/* ── Pro tier — key ceremony ─────────────────────────────────── */6375.peach-pro-key-ceremony {6376  display: flex;6377  flex-direction: column;6378  align-items: center;6379  gap: 12px;6380  padding: 20px 4px 16px;6381}63826383.peach-pro-key-ceremony .peach-lock-rune-string {6384  font-size: 1rem;6385  gap: 12px;6386  flex: 0;6387  justify-content: center;6388}63896390.peach-pro-key-ceremony-label {6391  margin: 0;6392  font-size: 0.6875rem;6393  color: var(--peach-t2);6394  font-style: italic;6395  letter-spacing: 0.04em;6396}63976398.peach-pro-key-input {6399  font-family: var(--font-mono, monospace);6400  letter-spacing: 0.06em;6401  text-align: center;6402  width: 100%;6403  box-sizing: border-box;6404}64056406.peach-pro-key-error {6407  margin: 0;6408  font-size: 0.75rem;6409  text-align: center;6410  color: var(--peach-breach, #e55);6411  padding: 0;6412}64136414.peach-pro-key-activate {6415  width: 100%;6416  text-align: center;6417  box-sizing: border-box;6418  padding: 10px 20px;6419  font-size: 0.8125rem;6420}64216422.peach-pro-key-cancel {6423  background: transparent;6424  border: 0;6425  color: var(--peach-t2);6426  font-size: 0.6875rem;6427  cursor: pointer;6428  padding: 2px 8px;6429  transition: color 0.2s;6430}64316432.peach-pro-key-cancel:hover { color: var(--peach-accent); }64336434/* ── Pro tier — active state ─────────────────────────────────── */6435.peach-pro-active {6436  display: flex;6437  flex-direction: column;6438  align-items: center;6439  gap: 0;6440  padding: 8px 4px 16px;6441  min-height: 280px;6442}64436444.peach-pro-active-hero {6445  display: flex;6446  flex-direction: column;6447  align-items: center;6448  gap: 6px;6449  padding: 20px 0 8px;6450}64516452.peach-pro-active-mark-wrap {6453  display: flex;6454  align-items: center;6455  justify-content: center;6456  margin-bottom: 4px;6457}64586459.peach-pro-active-mark {6460  width: 60px;6461  height: 60px;6462}64636464.peach-pro-active-title {6465  font-family: var(--font-display, var(--font-ui));6466  font-size: 26px;6467  margin: 0;6468  color: var(--peach-t0);6469  letter-spacing: 0.01em;6470}64716472.peach-pro-active-since {6473  margin: 0;6474  font-size: 0.6875rem;6475  color: var(--peach-t2);6476  font-style: italic;6477}64786479.peach-pro-active-features {6480  display: flex;6481  flex-direction: column;6482  gap: 8px;6483  width: 100%;6484  padding: 14px 8px 0;6485  border-top: 1px solid var(--peach-border);6486  flex: 1;6487}64886489.peach-pro-active-feature {6490  display: flex;6491  align-items: center;6492  gap: 9px;6493}64946495.peach-pro-active-feature-mark {6496  color: var(--peach-accent);6497  font-size: 0.625rem;6498  opacity: 0.65;6499  flex-shrink: 0;6500}65016502.peach-pro-active-feature-name {6503  font-size: 0.75rem;6504  color: var(--peach-t1);6505}65066507.peach-pro-deactivate {6508  align-self: center;6509  background: transparent;6510  border: 0;6511  color: var(--peach-t3);6512  font-size: 0.625rem;6513  cursor: pointer;6514  padding: 8px 0 0;6515  margin-top: 16px;6516  letter-spacing: 0.03em;6517  transition: color 0.2s;6518}65196520.peach-pro-deactivate:hover { color: var(--peach-t2); }65216522.peach-pro-deactivate:disabled {6523  opacity: 0.5;6524  cursor: default;6525}65266527/* ── Pro card activation sparkles & thank-you ── */6528button.peach-pro-active-mark-wrap {6529  background: transparent;6530  border: 0;6531  padding: 0;6532  cursor: pointer;6533  position: relative;6534  overflow: visible;6535}65366537.peach-pro-sparks {6538  position: absolute;6539  inset: 0;6540  pointer-events: none;6541  overflow: visible;6542}65436544.peach-pro-spark {6545  position: absolute;6546  top: 50%;6547  left: 50%;6548  font-size: 9px;6549  line-height: 1;6550  opacity: 0;6551  transform: translate(-50%, -50%);6552  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;6553}65546555@keyframes peach-pro-spark-fly {6556  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }6557  25%  { opacity: 1; }6558  100% {6559    opacity: 0;6560    transform: translate(6561      calc(-50% + var(--spark-x, 0px)),6562      calc(-50% + var(--spark-y, -40px))6563    ) scale(0.8);6564  }6565}65666567.peach-pro-thankyou-text {6568  margin: 4px 0 0;6569  font-size: 0.6875rem;6570  font-style: italic;6571  color: currentColor;6572  opacity: 0;6573  animation: peach-pro-thankyou-flash 2.5s ease both;6574}65756576@keyframes peach-pro-thankyou-flash {6577  0%   { opacity: 0; transform: translateY(4px); }6578  15%  { opacity: 0.75; transform: translateY(0); }6579  75%  { opacity: 0.75; }6580  100% { opacity: 0; }6581}65826583/* ── Pro advanced health remediation queue ──────────────────── */6584.peach-health-pro-queue {6585  display: flex;6586  flex-direction: column;6587  gap: 10px;6588  padding: 12px;6589  margin: 0 0 12px;6590  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6591  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6592  border-radius: 10px;6593}65946595.peach-health-pro-queue-head {6596  display: flex;6597  justify-content: space-between;6598  align-items: baseline;6599}66006601.peach-health-pro-queue-title {6602  font-size: 0.75rem;6603  font-weight: 500;6604  letter-spacing: 0.04em;6605  text-transform: uppercase;6606  color: var(--peach-accent);6607}66086609.peach-health-pro-queue-score {6610  font-size: 0.6875rem;6611  color: var(--peach-t2);6612}66136614.peach-health-pro-row {6615  display: flex;6616  gap: 10px;6617  align-items: center;6618  padding: 8px 0;6619  border-top: 1px solid var(--peach-border);6620}66216622.peach-health-pro-row-info {6623  flex: 1;6624  display: flex;6625  flex-direction: column;6626  gap: 4px;6627  min-width: 0;6628}66296630.peach-health-pro-action {6631  flex: 0 0 auto;6632  padding: 4px 8px;6633  font-size: 0.5625rem;6634  letter-spacing: 0.08em;6635  text-transform: uppercase;6636}66376638.peach-health-pro-row-name {6639  font-size: 0.8125rem;6640  color: var(--peach-t0);6641  overflow: hidden;6642  text-overflow: ellipsis;6643  white-space: nowrap;6644}66456646.peach-health-pro-row-meta {6647  font-size: 0.6875rem;6648  color: var(--peach-t2);6649}66506651.peach-health-pro-bar {6652  height: 2px;6653  background: var(--peach-border);6654  border-radius: 2px;6655  overflow: hidden;6656  margin-top: 2px;6657}66586659.peach-health-pro-bar-fill {6660  height: 100%;6661  background: var(--peach-accent);6662  transition: width 200ms ease-out;6663}66646665/* ── Pro activation celebration ── */6666@keyframes peach-pro-bloom {6667  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6668  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6669                 drop-shadow(0 0 48px var(--peach-glow)); }6670  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6671}66726673@keyframes peach-pro-wordmark-in {6674  from { opacity: 0; transform: translateY(4px); }6675  to   { opacity: 1; transform: translateY(0); }6676}66776678@keyframes peach-pro-fade-out {6679  from { opacity: 1; }6680  to   { opacity: 0; }6681}66826683.peach-pro-celebration {6684  background:6685    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6686    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6687    var(--peach-bg);6688  border: 1px solid var(--peach-t3);6689  box-shadow:6690    0 2px 8px rgba(0,0,0,0.55),6691    0 14px 48px rgba(0,0,0,0.7),6692    0 0 0 1px rgba(240,232,216,0.04);6693  overflow: hidden;6694  width: 320px;6695  height: 520px;6696  display: flex;6697  flex-direction: column;6698  align-items: center;6699  justify-content: center;6700  gap: 8px;6701  padding: 32px 24px;6702  text-align: center;6703}67046705.peach-pro-celebration.is-leaving {6706  animation: peach-pro-fade-out 400ms ease forwards;6707}67086709.peach-pro-bloom-target {6710  display: flex;6711  align-items: center;6712  justify-content: center;6713  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6714  margin-bottom: 12px;6715}67166717.peach-pro-bloom-icon {6718  width: 48px;6719  height: 48px;6720}67216722.peach-pro-wordmark {6723  font-family: var(--font-display);6724  font-size: 22px;6725  font-style: italic;6726  font-weight: 400;6727  color: var(--peach-accent);6728  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6729}67306731.peach-pro-thankyou {6732  font-size: 0.75rem;6733  font-style: italic;6734  color: var(--peach-t2);6735  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6736}673767386739/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6740.peach-pro-notice-banner {6741  display: flex;6742  align-items: center;6743  gap: 8px;6744  padding: 7px 12px;6745  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6746  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6747  font-size: 0.6875rem;6748  color: var(--peach-t2);6749  font-family: "IBM Plex Mono", monospace;6750  flex-shrink: 0;6751}67526753.peach-pro-notice-link {6754  background: none;6755  border: none;6756  padding: 0;6757  cursor: pointer;6758  font-size: 0.6875rem;6759  color: var(--peach-accent);6760  font-family: "IBM Plex Mono", monospace;6761  margin-left: auto;6762  white-space: nowrap;6763}67646765.peach-pro-notice-close {6766  background: none;6767  border: none;6768  padding: 0 0 0 4px;6769  cursor: pointer;6770  font-size: 0.625rem;6771  color: var(--peach-t3);6772  line-height: 1;6773}67746775/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6776   Renders over whatever view is showing. 60-second expiry; the popup ticks6777   the countdown each second and clears the banner when it hits zero. */6778.peach-pair-request-banner {6779  display: flex;6780  flex-direction: column;6781  gap: 8px;6782  padding: 10px 12px;6783  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6784  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6785  font-family: "IBM Plex Mono", monospace;6786  flex-shrink: 0;6787}67886789.peach-pair-toast {6790  padding: 8px 12px;6791  font-family: "IBM Plex Mono", monospace;6792  font-size: 0.75rem;6793  color: var(--peach-t1);6794  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6795  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6796  flex-shrink: 0;6797  text-align: center;6798}67996800.peach-pair-toast strong {6801  color: var(--peach-t0);6802  font-weight: 500;6803}68046805.peach-pair-request-header {6806  display: flex;6807  align-items: center;6808  gap: 8px;6809  font-size: 0.75rem;6810  color: var(--peach-t1);6811}68126813.peach-pair-request-mark {6814  font-size: 0.875rem;6815  display: inline-flex;6816  align-items: center;6817}68186819.peach-pair-request-icon {6820  width: 1em;6821  height: 1em;6822}68236824.peach-pair-request-title {6825  font-weight: 600;6826  color: var(--peach-t0);6827}68286829.peach-pair-request-countdown {6830  margin-left: auto;6831  font-variant-numeric: tabular-nums;6832  color: var(--peach-t2);6833  font-size: 0.6875rem;6834}68356836.peach-pair-request-body {6837  margin: 0;6838  font-size: 0.75rem;6839  color: var(--peach-t1);6840  line-height: 1.4;6841}68426843.peach-pair-request-body strong {6844  color: var(--peach-t0);6845  font-weight: 600;6846}68476848.peach-pair-request-actions {6849  display: flex;6850  gap: 8px;6851  justify-content: flex-end;6852}68536854/* ─── First-run onboarding ──────────────────────────────────────────────6855   Three-card welcome shown once before vault creation. The PeachScript6856   rune background drifts behind everything at very low opacity — it's6857   atmosphere, not focus. The cards themselves use the same panel6858   language as the rest of the popup so the transition into NewVault is6859   continuous, not a jarring switch of visual register. */68606861.peach-onboarding {6862  position: relative;6863  display: flex;6864  flex-direction: column;6865  width: 100%;6866  height: 100%;6867  padding: 16px 16px 18px;6868  box-sizing: border-box;6869  overflow: hidden;6870  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6871}68726873.peach-onboarding.is-completing {6874  animation: peach-onboard-exit 200ms ease-out forwards;6875}68766877.peach-rune-background {6878  position: absolute;6879  inset: 0;6880  width: 100%;6881  height: 100%;6882  pointer-events: none;6883  z-index: 0;6884  transition: opacity 500ms ease-out;6885}68866887.peach-onboarding.is-completing .peach-rune-background {6888  opacity: 0;6889}68906891.peach-onboarding-header {6892  position: relative;6893  z-index: 1;6894  display: flex;6895  align-items: center;6896  margin-bottom: 14px;6897}68986899.peach-onboarding-card {6900  position: relative;6901  z-index: 1;6902  flex: 1;6903  display: flex;6904  flex-direction: column;6905  gap: 10px;6906  padding: 22px 20px;6907  border-radius: 16px;6908  border: 1px solid var(--peach-t3);6909  background:6910    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6911  backdrop-filter: blur(3px);6912  -webkit-backdrop-filter: blur(3px);6913  box-shadow:6914    inset 0 1px 0 rgba(240, 232, 216, 0.04),6915    0 12px 28px rgba(0, 0, 0, 0.12);6916  cursor: pointer;6917  user-select: none;6918  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6919}69206921.peach-onboarding-card.is-exiting {6922  animation: peach-card-out 120ms ease-in forwards;6923  pointer-events: none;6924}69256926.peach-onboarding-card-headline {6927  margin: 0;6928  font-family: var(--font-display);6929  font-style: italic;6930  font-weight: 400;6931  font-size: 22px;6932  line-height: 1.05;6933  color: var(--peach-t0);6934  white-space: pre-line;6935}69366937.peach-onboarding-divider {6938  margin: 4px 0 6px;6939  border: 0;6940  border-top: 1px solid var(--peach-t3);6941  width: 100%;6942}69436944.peach-onboarding-body {6945  margin: 0;6946  font-size: 0.8125rem;6947  line-height: 1.6;6948  color: var(--peach-t1);6949}69506951.peach-onboarding-warning {6952  display: flex;6953  align-items: flex-start;6954  gap: 8px;6955  margin: 6px 0 0;6956  padding-top: 8px;6957  border-top: 1px dashed var(--peach-t3);6958  font-size: 0.8125rem;6959  line-height: 1.5;6960  color: var(--peach-t1);6961}69626963.peach-onboarding-warning-icon {6964  color: var(--peach-accent);6965  font-size: 0.8125rem;6966  line-height: 1.5;6967  flex: 0 0 auto;6968}69696970.peach-onboarding-nav {6971  position: relative;6972  z-index: 1;6973  display: flex;6974  align-items: center;6975  justify-content: space-between;6976  margin-top: 12px;6977  padding: 0 4px;6978}69796980.peach-onboarding-dots {6981  display: flex;6982  align-items: center;6983  gap: 6px;6984}69856986.peach-onboarding-dot {6987  width: 6px;6988  height: 6px;6989  border-radius: 50%;6990  background: var(--peach-t2);6991  transition: width 200ms ease, height 200ms ease, background 200ms ease;6992}69936994.peach-onboarding-dot.is-active {6995  width: 8px;6996  height: 8px;6997  background: var(--peach-accent);6998}69997000.peach-onboarding-next {7001  background: none;7002  border: none;7003  padding: 4px 0;7004  cursor: pointer;7005  font-family: "IBM Plex Mono", monospace;7006  font-size: 0.6875rem;7007  letter-spacing: 0.04em;7008  color: var(--peach-t1);7009  transition: color 150ms ease;7010}70117012.peach-onboarding-next:hover {7013  color: var(--peach-t0);7014}70157016.peach-onboarding-next:disabled {7017  opacity: 0.5;7018  cursor: default;7019}70207021.peach-onboarding-back {7022  background: none;7023  border: none;7024  padding: 4px 0;7025  cursor: pointer;7026  font-family: "IBM Plex Mono", monospace;7027  font-size: 0.6875rem;7028  letter-spacing: 0.04em;7029  color: var(--peach-t2);7030  transition: color 150ms ease;7031}70327033.peach-onboarding-back:hover {7034  color: var(--peach-t0);7035}70367037.peach-onboarding-back:disabled {7038  opacity: 0.5;7039  cursor: default;7040}70417042/* Reserve back-button width on the first card so the dots stay centred */7043.peach-onboarding-back-spacer {7044  width: 44px;7045}70467047.peach-onboarding-mobile-card-buttons {7048  display: flex;7049  flex-direction: column;7050  gap: 8px;7051  margin-top: 16px;7052}70537054@keyframes peach-onboard-enter {7055  from { opacity: 0; transform: translateY(20px); }7056  to   { opacity: 1; transform: translateY(0); }7057}70587059@keyframes peach-onboard-exit {7060  from { opacity: 1; }7061  to   { opacity: 0; }7062}70637064@keyframes peach-card-in {7065  from { opacity: 0; transform: translateX(12px); }7066  to   { opacity: 1; transform: translateX(0); }7067}70687069@keyframes peach-card-out {7070  from { opacity: 1; transform: translateX(0); }7071  to   { opacity: 0; transform: translateX(-12px); }7072}70737074/* ─── New vault screen — matched to onboarding card language ─────────── */70757076/* Two classes so this beats the shared .peach-screen.lock-screen--vault-stage7077   rule (same element) without loosening the unlock/restore screens. The7078   create-vault screen is the only vault-stage view tall enough to overflow7079   the 520px popup, so its spacing is tuned to fit header → card → restore →7080   recovery warning with nothing clipped. */7081.peach-screen.peach-newvault {7082  position: relative;7083  display: flex;7084  flex-direction: column;7085  gap: 12px;7086  padding: 14px 16px 12px;7087  overflow: hidden;7088}70897090/* Suppress the warm-blob ambient art inherited from .lock-screen — the7091   new vault card now carries the visual weight. */7092.peach-newvault::before {7093  content: none;7094}70957096.peach-newvault-header {7097  position: relative;7098  z-index: 2;7099  display: flex;7100  align-items: center;7101  gap: 10px;7102  margin-bottom: 2px;7103}71047105.peach-newvault-back {7106  display: inline-flex;7107  align-items: center;7108  gap: 4px;7109  background: transparent;7110  border: none;7111  color: var(--peach-t2);7112  font-family: "IBM Plex Mono", monospace;7113  font-size: 0.625rem;7114  letter-spacing: 0.06em;7115  cursor: pointer;7116  padding: 4px 6px;7117  border-radius: 6px;7118  transition: color 120ms ease, background 120ms ease;7119}71207121.peach-newvault-back:hover {7122  color: var(--peach-t0);7123  background: rgba(240, 232, 216, 0.04);7124}71257126.peach-newvault-mark {7127  position: absolute;7128  right: -12px;7129  top: 6px;7130  width: 110px;7131  height: 110px;7132  pointer-events: none;7133  opacity: 0.10;7134  filter: saturate(0.9);7135  z-index: 0;7136}7137.peach-newvault-mark-art {7138  width: 100%;7139  height: 100%;7140}7141.peach-newvault-mark-art path:nth-child(1) {7142  fill: rgba(123, 144, 96, 0.88);7143}7144.peach-newvault-mark-art path:nth-child(2) {7145  stroke: rgba(94, 122, 66, 0.95);7146}71477148.peach-newvault-card {7149  position: relative;7150  z-index: 1;7151  display: flex;7152  flex-direction: column;7153  gap: 8px;7154  padding: 16px 20px 14px;7155  border-radius: 16px;7156  border: 1px solid var(--peach-t3);7157  background:7158    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));7159  backdrop-filter: blur(3px);7160  -webkit-backdrop-filter: blur(3px);7161  box-shadow:7162    inset 0 1px 0 rgba(240, 232, 216, 0.04),7163    0 12px 28px rgba(0, 0, 0, 0.12);7164  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;7165}71667167.peach-newvault-headline {7168  margin: 0;7169  font-family: var(--font-display);7170  font-style: italic;7171  font-weight: 400;7172  font-size: 24px;7173  line-height: 1.05;7174  color: var(--peach-t0);7175  white-space: pre-line;7176}71777178.peach-newvault-divider {7179  margin: 2px 0 4px;7180  border: 0;7181  border-top: 1px solid var(--peach-t3);7182  width: 100%;7183}71847185.peach-newvault-field {7186  display: flex;7187  flex-direction: column;7188  gap: 4px;7189}71907191.peach-newvault-label-row {7192  display: flex;7193  align-items: center;7194  justify-content: space-between;7195}71967197/* Monospace input scaled to the card. Replaces the 22px unlock-input7198   so the placeholder no longer overflows and the field reads as part7199   of the same surface as the body copy. */7200.peach-newvault-input {7201  font-size: 0.875rem;7202  letter-spacing: 0.18em;7203  padding: 8px 0;7204}7205.peach-newvault-input::placeholder {7206  letter-spacing: 0.18em;7207  color: var(--peach-t2);7208}72097210.peach-newvault-hint {7211  margin: 2px 0 0;7212  font-family: "IBM Plex Mono", monospace;7213  font-size: 0.625rem;7214  color: var(--peach-t2);7215  letter-spacing: 0.04em;7216}72177218.peach-newvault-submit {7219  margin-top: 4px;7220}72217222.peach-newvault-warning {7223  display: flex;7224  align-items: flex-start;7225  gap: 8px;7226  margin: 2px 0 0;7227  padding-top: 8px;7228  border-top: 1px dashed var(--peach-t3);7229  font-size: 0.75rem;7230  line-height: 1.45;7231  color: var(--peach-t1);7232}72337234.peach-newvault-warning-icon {7235  color: var(--peach-accent);7236  font-size: 0.8125rem;7237  line-height: 1.4;7238  flex: 0 0 auto;7239}72407241/* Restore options sit inside the card, directly under "create vault", so7242   they are always reachable without scrolling. The top divider mirrors the7243   warning's so the choice reads as a deliberate fork, not a footnote. */7244.peach-newvault-restore {7245  position: relative;7246  z-index: 1;7247  display: flex;7248  flex-direction: column;7249  gap: 4px;7250  margin-top: 4px;7251  padding-top: 10px;7252  border-top: 1px dashed var(--peach-t3);7253}72547255/* Settings body — warm accent gradient gives the glass something to blur against */7256.peach-settings-body {7257  background:7258    radial-gradient(7259      ellipse at 30% 20%,7260      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7261      transparent 60%7262    );7263}72647265/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7266/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7267 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7268 * (replacing the vault from a backup file) and "hazard" for actions that7269 * are absolutely irreversible (Panic). Both use the same card scaffold so7270 * they read as a pair, but the colour family signals the severity at a7271 * glance — yellow for caution, red for don't.7272 */7273.peach-danger-card {7274  --danger-tint: 235, 158, 52; /* amber */7275  display: flex;7276  flex-direction: column;7277  gap: 8px;7278  padding: 14px;7279  margin-top: 10px;7280  border-radius: 12px;7281  border: 1px solid rgba(var(--danger-tint), 0.32);7282  background:7283    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7284    rgba(var(--danger-tint), 0.04);7285  box-shadow:7286    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7287    0 0 24px rgba(var(--danger-tint), 0.04);7288  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7289}72907291.peach-danger-card:hover {7292  border-color: rgba(var(--danger-tint), 0.55);7293  box-shadow:7294    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7295    0 0 36px rgba(var(--danger-tint), 0.10);7296}72977298.peach-danger-card--hazard {7299  --danger-tint: 220, 38, 38; /* red */7300}73017302.peach-danger-card-head {7303  display: flex;7304  align-items: center;7305  gap: 10px;7306}73077308.peach-danger-card-glyph {7309  width: 28px;7310  height: 28px;7311  flex-shrink: 0;7312  display: flex;7313  align-items: center;7314  justify-content: center;7315  border-radius: 8px;7316  background: rgba(var(--danger-tint), 0.12);7317  color: rgba(var(--danger-tint), 0.95);7318  font-size: 1rem;7319  line-height: 1;7320}73217322.peach-danger-card-title {7323  margin: 0;7324  font-size: 0.8125rem;7325  font-weight: 600;7326  color: rgba(var(--danger-tint), 0.92);7327  letter-spacing: 0.01em;7328}73297330.peach-danger-card-copy {7331  margin: 0;7332  font-size: 0.6875rem;7333  line-height: 1.5;7334  color: var(--peach-t2);7335}73367337.peach-danger-card-button {7338  width: 100%;7339  padding: 9px;7340  margin-top: 4px;7341  background: transparent;7342  border: 1px solid rgba(var(--danger-tint), 0.45);7343  border-radius: 8px;7344  color: rgba(var(--danger-tint), 0.9);7345  font-size: 0.75rem;7346  font-weight: 500;7347  letter-spacing: 0.02em;7348  cursor: pointer;7349  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7350}73517352.peach-danger-card-button:hover {7353  background: rgba(var(--danger-tint), 0.10);7354  border-color: rgba(var(--danger-tint), 0.75);7355  color: rgb(var(--danger-tint));7356}73577358/* ── Panic flow (three-step destruction) ───────────────────────────────── */7359.peach-panic {7360  display: flex;7361  flex-direction: column;7362  flex: 1;7363  min-height: 0;7364  padding: 28px 20px 20px;7365  gap: 18px;7366  overflow-y: auto;7367  scrollbar-width: none;7368  -ms-overflow-style: none;7369}73707371.peach-panic::-webkit-scrollbar { display: none; }73727373.peach-panic-step2 {7374  background: rgba(220, 38, 38, 0.04);7375}73767377.peach-panic-step3 {7378  position: relative;7379  background: #0f0505;7380  color: #ffffff;7381  overflow: hidden;7382}73837384.peach-panic-rune-bg {7385  position: absolute;7386  inset: 0;7387  opacity: 0.22;7388  pointer-events: none;7389  overflow: hidden;7390}73917392.peach-panic-rune-bg canvas {7393  width: 100% !important;7394  height: 100% !important;7395}73967397.peach-panic-icon {7398  font-size: 32px;7399  color: rgb(220, 38, 38);7400  line-height: 1;7401}74027403.peach-panic-title {7404  margin: 0;7405  font-size: 18px;7406  font-weight: 500;7407  color: var(--peach-t1);7408}74097410.peach-panic-title--severe {7411  font-size: 20px;7412  font-weight: 700;7413  color: rgb(220, 38, 38);7414}74157416.peach-panic-body {7417  margin: 0;7418  font-size: 0.8125rem;7419  line-height: 1.55;7420  color: var(--peach-t2);7421}74227423.peach-panic-body--severe {7424  color: rgba(220, 38, 38, 0.85);7425}74267427.peach-panic-body--final {7428  font-size: 1rem;7429  font-weight: 700;7430  color: rgb(255, 80, 80);7431  line-height: 1.4;7432}74337434.peach-panic-body--final-intro {7435  font-size: 1rem;7436  color: #ffffff;7437  font-weight: 400;7438}74397440.peach-panic-divider {7441  height: 1px;7442  background: rgba(255, 255, 255, 0.08);7443  margin: 4px 0;7444}74457446.peach-panic-confirm-input {7447  width: 100%;7448  padding: 10px 12px;7449  background: rgba(255, 255, 255, 0.02);7450  border: 1px solid rgba(220, 38, 38, 0.4);7451  border-radius: 8px;7452  color: var(--peach-t1);7453  font-family: "IBM Plex Mono", monospace;7454  font-size: 0.875rem;7455  letter-spacing: 0.12em;7456  text-transform: uppercase;7457}74587459.peach-panic-confirm-input:focus {7460  outline: none;7461  border-color: rgb(220, 38, 38);7462}74637464.peach-panic-confirm-input--match {7465  border-color: rgb(220, 38, 38);7466  color: rgb(220, 38, 38);7467}74687469.peach-panic-confirm-label {7470  font-size: 0.6875rem;7471  color: var(--peach-t2);7472  margin: 0 0 -8px;7473  letter-spacing: 0.06em;7474}74757476.peach-panic-actions {7477  display: flex;7478  flex-direction: column;7479  gap: 10px;7480  margin-top: auto;7481}74827483.peach-panic-button {7484  width: 100%;7485  padding: 12px;7486  border-radius: 8px;7487  font-size: 0.8125rem;7488  cursor: pointer;7489  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7490}74917492.peach-panic-button--primary {7493  background: var(--peach-accent);7494  border: 1px solid var(--peach-accent);7495  color: #ffffff;7496  font-weight: 600;7497}74987499.peach-panic-button--primary:hover {7500  background: color-mix(in srgb, var(--peach-accent) 88%, white);7501}75027503.peach-panic-button--danger {7504  background: rgb(220, 38, 38);7505  border: 1px solid rgb(220, 38, 38);7506  color: #ffffff;7507  font-weight: 600;7508}75097510.peach-panic-button--danger:disabled {7511  opacity: 0.35;7512  cursor: not-allowed;7513}75147515.peach-panic-button--ghost {7516  background: transparent;7517  border: 1px solid rgba(255, 255, 255, 0.18);7518  color: var(--peach-t2);7519}75207521.peach-panic-button--ghost:hover {7522  border-color: rgba(255, 255, 255, 0.32);7523  color: var(--peach-t1);7524}75257526.peach-panic-link {7527  background: transparent;7528  border: none;7529  padding: 4px 0;7530  color: rgba(220, 38, 38, 0.65);7531  font-size: 0.75rem;7532  cursor: pointer;7533  text-align: left;7534  text-decoration: underline;7535  text-underline-offset: 3px;7536}75377538.peach-panic-link:hover {7539  color: rgb(220, 38, 38);7540}75417542.peach-panic-bar {7543  background: rgb(220, 38, 38);7544  padding: 16px 20px;7545  margin: -28px -20px 0;7546  text-align: center;7547  font-size: 0.8125rem;7548  font-weight: 700;7549  letter-spacing: 0.12em;7550  color: #ffffff;7551}75527553.peach-panic-final-button {7554  width: 100%;7555  padding: 14px;7556  background: rgb(220, 38, 38);7557  border: none;7558  border-radius: 8px;7559  color: #ffffff;7560  font-size: 0.875rem;7561  font-weight: 700;7562  letter-spacing: 0.08em;7563  text-transform: uppercase;7564  cursor: pointer;7565  animation: peach-panic-pulse 2s ease-in-out infinite;7566}75677568.peach-settings-license {7569  margin-top: 10px;7570  padding-top: 10px;7571  border-top: 1px solid var(--peach-t3);7572}75737574.peach-settings-label {7575  font-size: 0.625rem;7576  letter-spacing: 0.08em;7577  color: var(--peach-t3);7578  display: block;7579  margin-bottom: 6px;7580}75817582.peach-settings-license-row {7583  display: flex;7584  align-items: center;7585  justify-content: space-between;7586  gap: 8px;7587}75887589.peach-settings-license-key {7590  font-family: 'IBM Plex Mono', monospace;7591  font-size: 0.75rem;7592  color: var(--peach-t0);7593  letter-spacing: 0.04em;7594  word-break: break-all;7595  flex: 1;7596  min-width: 0;7597}75987599.peach-settings-license-key--masked {7600  font-family: 'IBM Plex Mono', monospace;7601  font-size: 0.6rem;7602  color: var(--peach-t1);7603  letter-spacing: 0.18em;7604  user-select: none;7605}76067607.peach-settings-license-actions {7608  display: flex;7609  align-items: center;7610  gap: 2px;7611  flex-shrink: 0;7612}76137614.peach-settings-license-copy {7615  font-size: 0.6875rem;7616  color: var(--peach-accent);7617  background: transparent;7618  border: none;7619  cursor: pointer;7620  padding: 4px 8px;7621  border-radius: 4px;7622  flex-shrink: 0;7623  transition: opacity 150ms ease;7624}76257626.peach-settings-license-copy:hover {7627  opacity: 0.75;7628}76297630.peach-settings-license-toggle {7631  display: flex;7632  align-items: center;7633  justify-content: center;7634  background: transparent;7635  border: none;7636  cursor: pointer;7637  padding: 4px 6px;7638  border-radius: 4px;7639  color: var(--peach-t2);7640  transition: color 150ms ease;7641}76427643.peach-settings-license-toggle:hover {7644  color: var(--peach-t1);7645}76467647@keyframes peach-panic-pulse {7648  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7649  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7650}76517652[data-motion="reduce"] .peach-panic-final-button {7653  animation: none;7654}76557656/* Vault History — Settings → Vault sub-view */76577658.peach-history-list {7659  border: 1px solid var(--peach-border);7660  border-radius: 8px;7661  overflow: hidden;7662  margin: 8px 0 4px;7663}76647665.peach-history-row {7666  display: flex;7667  align-items: center;7668  justify-content: space-between;7669  padding: 9px 12px;7670  gap: 10px;7671  border-bottom: 1px solid var(--peach-border);7672}76737674.peach-history-row:last-child {7675  border-bottom: none;7676}76777678.peach-history-meta {7679  display: flex;7680  flex-direction: column;7681  gap: 2px;7682  min-width: 0;7683  flex: 1;7684}76857686.peach-history-time {7687  font-size: 0.75rem;7688  font-family: 'IBM Plex Mono', ui-monospace, monospace;7689  color: var(--peach-t0);7690  white-space: nowrap;7691  overflow: hidden;7692  text-overflow: ellipsis;7693}76947695.peach-history-sub {7696  font-size: 0.625rem;7697  color: var(--peach-t2);7698  letter-spacing: 0.06em;7699  text-transform: uppercase;7700  white-space: nowrap;7701  overflow: hidden;7702  text-overflow: ellipsis;7703}77047705.peach-history-btn {7706  flex-shrink: 0;7707  white-space: nowrap;7708  min-width: 56px;7709  text-align: center;7710}77117712.peach-history-btn.is-busy {7713  opacity: 0.65;7714}77157716.peach-history-footer {7717  font-size: 0.625rem;7718  color: var(--peach-t3);7719  letter-spacing: 0.05em;7720  text-align: right;7721  margin: 0;7722  padding: 2px 0 0;7723}77247725/* ── Context menu + swipe-copy flash ─────────────────────── */7726.peach-context-menu-backdrop {7727  position: fixed;7728  inset: 0;7729  background: rgba(0, 0, 0, 0.45);7730  z-index: 100;7731  display: flex;7732  align-items: flex-end;7733  justify-content: center;7734  animation: peach-ctx-fade 140ms ease both;7735}7736.peach-context-menu {7737  width: min(360px, calc(100vw - 24px));7738  margin-bottom: max(env(safe-area-inset-bottom), 12px);7739  background: var(--peach-bg);7740  border: 1px solid var(--peach-t3);7741  border-radius: 14px;7742  padding: 6px;7743  display: flex;7744  flex-direction: column;7745  gap: 2px;7746  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7747  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7748}7749@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7750@keyframes peach-ctx-rise {7751  from { transform: translateY(16px); opacity: 0; }7752  to   { transform: translateY(0);    opacity: 1; }7753}7754.peach-context-menu-item {7755  background: transparent;7756  color: var(--peach-t0);7757  border: 0;7758  border-radius: 10px;7759  padding: 12px 14px;7760  text-align: left;7761  font: inherit;7762  cursor: pointer;7763}7764.peach-context-menu-item:hover,7765.peach-context-menu-item:focus-visible {7766  background: var(--peach-t3);7767}7768.peach-context-menu-item--danger {7769  color: var(--peach-health-bad, #d96868);7770}7771.peach-context-menu-item--cancel {7772  color: var(--peach-t2);7773  margin-top: 4px;7774  border-top: 1px solid var(--peach-t3);7775  border-radius: 0 0 10px 10px;7776}77777778/* Swipe-to-copy flash */7779.peach-entry-row.is-copy-flash {7780  animation: peach-copy-flash 600ms ease both;7781}7782@keyframes peach-copy-flash {7783  0%   { background: transparent; }7784  20%  { background: rgba(217, 153, 51, 0.32); }7785  100% { background: transparent; }7786}77877788html { font-size: 16px; }77897790/* ── Recovery word entry ─────────────────────────────────────────── */7791.peach-lock-recover-link {7792  display: block;7793  width: 100%;7794  margin-top: 12px;7795  background: none;7796  border: none;7797  font-family: "IBM Plex Mono", monospace;7798  font-size: 0.625rem;7799  letter-spacing: 0.06em;7800  color: var(--peach-t2);7801  cursor: pointer;7802  text-align: center;7803  padding: 4px;7804  transition: color 120ms ease;7805}7806.peach-lock-recover-link:hover {7807  color: var(--peach-t0);7808}78097810.lock-screen--recovery {7811  display: flex;7812  flex-direction: column;7813  align-items: stretch;7814  padding: 12px 20px 24px;7815  overflow: hidden;7816}78177818.peach-recovery-nav {7819  display: flex;7820  align-items: center;7821  position: relative;7822  z-index: 1;7823  margin-bottom: 4px;7824}78257826/* Mask runes to the top decorative band only — keep inputs and the7827   bottom CTA button clear. The bottom of the popup is reserved for7828   submit buttons; rendering runes there overlaps the button glyph. */7829.peach-rune-background--recovery {7830  -webkit-mask-image: linear-gradient(7831    to bottom,7832    black 0px, black 85px,7833    transparent 110px,7834    transparent 100%7835  );7836  mask-image: linear-gradient(7837    to bottom,7838    black 0px, black 85px,7839    transparent 110px,7840    transparent 100%7841  );7842}78437844.peach-recovery-header {7845  text-align: center;7846  margin-bottom: 16px;7847  margin-top: 4px;7848}7849.peach-recovery-header .peach-onboarding-headline {7850  font-size: 1.25rem;7851  font-weight: 300;7852  letter-spacing: 0.02em;7853  margin: 0 0 4px;7854}7855.peach-recovery-header .peach-hint {7856  font-family: "IBM Plex Mono", monospace;7857  font-size: 0.625rem;7858  color: var(--peach-t2);7859  letter-spacing: 0.04em;7860  margin: 0;7861}78627863/* 12-word grid: 2 columns × 6 rows */7864.peach-recovery-grid {7865  display: grid;7866  grid-template-columns: repeat(2, 1fr);7867  gap: 12px 20px;7868  width: 100%;7869  margin-bottom: 0;7870}78717872.peach-recovery-word-slot {7873  display: flex;7874  align-items: center;7875  gap: 6px;7876  min-width: 0;7877}78787879.peach-recovery-word-index {7880  font-family: "IBM Plex Mono", monospace;7881  font-size: 0.5rem;7882  color: rgba(255, 255, 255, 0.35);7883  min-width: 14px;7884  flex-shrink: 0;7885  text-align: right;7886  letter-spacing: 0.04em;7887}78887889.peach-recovery-word-input {7890  flex: 1;7891  min-width: 0;7892  background: transparent;7893  border: none;7894  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7895  color: var(--peach-t0);7896  font-family: "IBM Plex Mono", monospace;7897  font-size: 0.6875rem;7898  letter-spacing: 0.06em;7899  padding: 5px 2px 4px;7900  outline: none;7901  text-transform: lowercase;7902  transition: border-color 120ms ease;7903}7904.peach-recovery-word-input::placeholder {7905  color: rgba(255, 255, 255, 0.18);7906}7907.peach-recovery-word-input:focus {7908  border-bottom-color: var(--peach-accent);7909}79107911.peach-recovery-submit {7912  width: 100%;7913  margin-top: auto;7914}79157916.peach-recovery-new-password-form {7917  width: 100%;7918  display: flex;7919  flex-direction: column;7920  gap: 16px;7921  margin-bottom: 8px;7922}7923.peach-recovery-new-password-form .peach-newvault-field {7924  display: flex;7925  flex-direction: column;7926  gap: 4px;7927}79287929/* ── Recovery words display (post-create) ────────────────────────── */7930.lock-screen--recovery-display {7931  display: flex;7932  flex-direction: column;7933  align-items: stretch;7934  padding: 0 20px 20px;7935  min-height: 0;7936  overflow-y: auto;7937}79387939.peach-recovery-words-display {7940  width: 100%;7941  margin-bottom: 16px;7942  border: 1px solid var(--peach-t3);7943  border-radius: 8px;7944  padding: 12px 14px;7945  background: rgba(245, 240, 234, 0.04);7946}79477948.peach-recovery-words-label {7949  font-family: "IBM Plex Mono", monospace;7950  font-size: 0.5rem;7951  letter-spacing: 0.08em;7952  color: var(--peach-t2);7953  text-transform: uppercase;7954  margin-bottom: 10px;7955}79567957.peach-recovery-word-list {7958  list-style: none;7959  margin: 0;7960  padding: 0;7961  display: grid;7962  grid-template-columns: repeat(2, 1fr);7963  gap: 6px 16px;7964}79657966.peach-recovery-word-item {7967  display: flex;7968  align-items: baseline;7969  gap: 5px;7970}79717972.peach-recovery-word-num {7973  font-family: "IBM Plex Mono", monospace;7974  font-size: 0.5rem;7975  color: var(--peach-t2);7976  width: 14px;7977  flex: 0 0 14px;7978  text-align: right;7979  letter-spacing: 0.04em;7980  font-variant-numeric: tabular-nums;7981}79827983.peach-recovery-download-btn {7984  display: block;7985  margin: 10px auto 0;7986  padding: 4px 10px;7987  background: transparent;7988  border: 1px solid var(--peach-border);7989  border-radius: 6px;7990  color: var(--peach-t2);7991  font-family: "IBM Plex Mono", monospace;7992  font-size: 0.5625rem;7993  letter-spacing: 0.06em;7994  text-transform: lowercase;7995  cursor: pointer;7996  transition: border-color 0.15s, color 0.15s;7997}79987999.peach-recovery-download-btn:hover {8000  border-color: var(--peach-accent);8001  color: var(--peach-t0);8002}80038004.peach-recovery-word-text {8005  font-family: "IBM Plex Mono", monospace;8006  font-size: 0.6875rem;8007  letter-spacing: 0.06em;8008  color: var(--peach-t0);8009  text-transform: lowercase;8010}80118012.peach-hint--warning {8013  color: var(--peach-accent);8014  font-style: italic;8015}8016.peach-hint--success {8017  color: var(--peach-t2);8018  font-family: "IBM Plex Mono", monospace;8019  font-size: 0.625rem;8020  letter-spacing: 0.06em;8021}80228023/* Confirmation step */8024.peach-recovery-confirm {8025  width: 100%;8026  flex: 1;8027  display: flex;8028  flex-direction: column;8029}8030.peach-recovery-confirm-label {8031  font-family: "IBM Plex Mono", monospace;8032  font-size: 0.5625rem;8033  letter-spacing: 0.04em;8034  color: var(--peach-t2);8035  text-align: center;8036  margin: 0 0 12px;8037}8038.peach-recovery-confirm-fields {8039  display: flex;8040  flex-direction: column;8041  gap: 14px;8042  margin-bottom: 10px;8043}8044.peach-recovery-confirm-field {8045  display: flex;8046  align-items: center;8047  gap: 8px;8048}8049.peach-recovery-confirm-num {8050  font-family: "IBM Plex Mono", monospace;8051  font-size: 0.5rem;8052  color: var(--peach-t2);8053  min-width: 44px;8054  letter-spacing: 0.04em;8055}8056.peach-recovery-confirm-input {8057  flex: 1;8058  background: transparent;8059  border: none;8060  border-bottom: 1px solid var(--peach-t3);8061  color: var(--peach-t0);8062  font-family: "IBM Plex Mono", monospace;8063  font-size: 0.6875rem;8064  letter-spacing: 0.06em;8065  padding: 4px 2px 3px;8066  outline: none;8067  text-transform: lowercase;8068  transition: border-color 120ms ease;8069}8070.peach-recovery-confirm-input:focus {8071  border-bottom-color: var(--peach-accent);8072}8073.peach-recovery-confirm-input:disabled {8074  opacity: 0.4;8075  cursor: not-allowed;8076}8077.peach-recovery-confirm-btn {8078  width: 100%;8079  margin-top: auto;8080}80818082/* ============================================================8083   Sync info sheet8084   ============================================================ */80858086.peach-sync-info-backdrop {8087  position: fixed;8088  inset: 0;8089  z-index: 200;8090  background: rgba(0, 0, 0, 0.55);8091  display: flex;8092  align-items: flex-end;8093  animation: peach-fade-in 200ms ease forwards;8094}80958096@keyframes peach-fade-in {8097  from { opacity: 0; }8098  to   { opacity: 1; }8099}81008101.peach-sync-info-sheet {8102  width: 100%;8103  background: var(--peach-bg-card, var(--peach-bg));8104  border-top-left-radius: 20px;8105  border-top-right-radius: 20px;8106  padding: 12px 24px 32px;8107  display: flex;8108  flex-direction: column;8109  gap: 20px;8110  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;8111}81128113@keyframes peach-sheet-up {8114  from { transform: translateY(100%); }8115  to   { transform: translateY(0); }8116}81178118.peach-sync-info-handle {8119  width: 36px;8120  height: 4px;8121  border-radius: 2px;8122  background: var(--peach-border);8123  margin: 0 auto 4px;8124  flex-shrink: 0;8125}81268127.peach-sync-info-title {8128  font-family: 'Cormorant Garamond', serif;8129  font-style: italic;8130  font-size: 26px;8131  font-weight: 600;8132  color: var(--peach-t0);8133  margin: 0;8134  line-height: 1.2;8135}81368137.peach-sync-info-body {8138  display: flex;8139  flex-direction: column;8140  gap: 14px;8141}81428143.peach-sync-info-point {8144  display: flex;8145  gap: 12px;8146  align-items: flex-start;8147  font-size: 14px;8148  color: var(--peach-t2);8149  line-height: 1.6;8150  margin: 0;8151}81528153.peach-sync-info-icon {8154  color: var(--peach-accent);8155  font-size: 16px;8156  flex-shrink: 0;8157  margin-top: 1px;8158}81598160.peach-sync-info-actions {8161  display: flex;8162  flex-direction: column;8163  gap: 12px;8164  margin-top: 4px;8165}81668167.peach-sync-info-pro-link {8168  background: none;8169  border: none;8170  font-size: 13px;8171  color: var(--peach-t3);8172  cursor: pointer;8173  padding: 0;8174  font-family: inherit;8175  text-align: center;8176  transition: color 150ms ease;8177}81788179.peach-sync-info-pro-link:hover {8180  color: var(--peach-accent);8181}81828183.peach-btn--full {8184  width: 100%;8185}81868187/* ── Sync screen ── */81888189.peach-sync-coming-soon {8190  display: flex;8191  align-items: flex-start;8192  gap: 10px;8193  padding: 12px 14px;8194  background: var(--peach-s1);8195  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8196  border-radius: 10px;8197}8198.peach-sync-coming-soon__icon {8199  flex-shrink: 0;8200  color: var(--peach-accent);8201  margin-top: 1px;8202  line-height: 0;8203}8204.peach-sync-coming-soon__title {8205  font-family: 'Cormorant Garamond', serif;8206  font-weight: 500;8207  font-size: 13px;8208  color: var(--peach-accent);8209  margin: 0 0 5px;8210  line-height: 1.3;8211}8212.peach-sync-coming-soon__body {8213  font-size: 12px;8214  color: var(--peach-t1);8215  line-height: 1.55;8216  margin: 0;8217}82188219.peach-sync-screen {8220  display: flex;8221  flex-direction: column;8222  height: 100%;8223}82248225.peach-sync-content {8226  flex: 1;8227  overflow-y: auto;8228  padding: 24px 20px 40px;8229  display: flex;8230  flex-direction: column;8231  gap: 24px;8232}82338234/* Intro (State A) */8235.peach-sync-headline {8236  font-family: 'Cormorant Garamond', serif;8237  font-style: italic;8238  font-size: 28px;8239  font-weight: 600;8240  color: var(--peach-t0);8241  margin: 0 0 10px;8242  line-height: 1.2;8243}82448245.peach-sync-intro-body {8246  font-size: 14px;8247  color: var(--peach-t1);8248  line-height: 1.6;8249  margin: 0;8250}82518252.peach-sync-pro-note {8253  display: flex;8254  flex-direction: column;8255  gap: 8px;8256  background: var(--peach-t3);8257  border-radius: 10px;8258  padding: 12px 14px;8259}82608261.peach-sync-pro-note-text {8262  font-size: 12px;8263  color: var(--peach-t2);8264  line-height: 1.5;8265  margin: 0;8266}82678268.peach-sync-pro-link {8269  background: none;8270  border: none;8271  font-size: 12px;8272  color: var(--peach-accent);8273  cursor: pointer;8274  padding: 0;8275  font-family: inherit;8276  text-align: left;8277}82788279/* Status (State C) */8280.peach-sync-status {8281  padding: 12px 0;8282  border-bottom: 1px solid var(--peach-border);8283}82848285.peach-sync-status-row {8286  display: flex;8287  align-items: center;8288  gap: 8px;8289}82908291.peach-sync-dot {8292  width: 7px;8293  height: 7px;8294  border-radius: 50%;8295  flex-shrink: 0;8296}82978298.peach-sync-dot--green { background: var(--peach-health-ok); }8299.peach-sync-dot--amber { background: var(--peach-accent); }83008301.peach-sync-status-text {8302  font-family: 'IBM Plex Mono', monospace;8303  font-size: 11px;8304  color: var(--peach-t2);8305}83068307/* Paired devices */8308.peach-sync-section {8309  display: flex;8310  flex-direction: column;8311  gap: 2px;8312}83138314.peach-sync-section-label {8315  font-family: 'IBM Plex Mono', monospace;8316  font-size: 10px;8317  letter-spacing: 0.1em;8318  color: var(--peach-t3);8319  margin: 0 0 10px;8320}83218322.peach-sync-device-row {8323  display: flex;8324  justify-content: space-between;8325  align-items: baseline;8326  padding: 10px 0;8327  border-bottom: 1px solid var(--peach-border);8328  gap: 12px;8329}83308331.peach-sync-device-name {8332  font-size: 14px;8333  color: var(--peach-t1);8334}83358336.peach-sync-device-meta {8337  font-family: 'IBM Plex Mono', monospace;8338  font-size: 11px;8339  color: var(--peach-t3);8340  white-space: nowrap;8341}83428343.peach-sync-hub-note {8344  padding: 14px 16px;8345  border: 1px solid var(--peach-border);8346  border-radius: 10px;8347  display: flex;8348  flex-direction: column;8349  gap: 6px;8350  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8351}83528353.peach-sync-hub-note-title {8354  font-size: 13px;8355  font-weight: 600;8356  color: var(--peach-t0);8357  margin: 0;8358}83598360.peach-sync-hub-note-body {8361  font-size: 12px;8362  color: var(--peach-t2);8363  line-height: 1.6;8364  margin: 0;8365}83668367/* Action buttons */8368.peach-sync-actions {8369  display: flex;8370  gap: 10px;8371  flex-wrap: wrap;8372}83738374/* Upgrade prompt (State B) */8375.peach-sync-upgrade {8376  display: flex;8377  flex-direction: column;8378  gap: 12px;8379  padding: 16px;8380  border: 1px solid var(--peach-border);8381  border-radius: 10px;8382}83838384.peach-sync-upgrade-text {8385  font-size: 13px;8386  color: var(--peach-t2);8387  line-height: 1.6;8388  margin: 0;8389}83908391/* Network note */8392.peach-sync-network-note {8393  font-size: 12px;8394  color: var(--peach-t3);8395  line-height: 1.6;8396  margin: 0;8397}83988399/* Advanced */8400.peach-sync-advanced {8401  margin-top: auto;8402  padding-top: 16px;8403  border-top: 1px solid var(--peach-border);8404}84058406.peach-sync-advanced-toggle {8407  display: flex;8408  align-items: center;8409  gap: 8px;8410  background: none;8411  border: none;8412  font-family: 'IBM Plex Mono', monospace;8413  font-size: 11px;8414  letter-spacing: 0.08em;8415  color: var(--peach-t3);8416  cursor: pointer;8417  padding: 0;8418  text-transform: uppercase;8419}84208421.peach-sync-advanced-chevron {8422  display: inline-block;8423  transition: transform 200ms ease;8424  font-size: 10px;8425}84268427.peach-sync-advanced-chevron.is-open {8428  transform: rotate(90deg);8429}84308431.peach-sync-advanced-content {8432  margin-top: 14px;8433}84348435.peach-sync-advanced-row {8436  display: flex;8437  justify-content: space-between;8438  align-items: center;8439  gap: 16px;8440}84418442.peach-sync-advanced-title {8443  font-size: 14px;8444  color: var(--peach-t1);8445  margin: 0 0 2px;8446}84478448.peach-sync-advanced-subtitle {8449  font-size: 12px;8450  color: var(--peach-t3);8451  margin: 0;8452  line-height: 1.5;8453}84548455/* ── Add Device — Android scan tabs ─────────────────────────────────────── */84568457.peach-pairing-tabs {8458  display: flex;8459  border: 1px solid var(--peach-border);8460  border-radius: 8px;8461  overflow: hidden;8462  margin-bottom: 4px;8463}84648465.peach-pairing-tab {8466  flex: 1;8467  padding: 10px 0;8468  background: none;8469  border: none;8470  font-family: 'IBM Plex Mono', monospace;8471  font-size: 11px;8472  letter-spacing: 0.06em;8473  color: var(--peach-t2);8474  cursor: pointer;8475  transition: background 150ms, color 150ms;8476}84778478.peach-pairing-tab.is-active {8479  background: var(--peach-accent);8480  color: #fff;8481  font-weight: 600;8482}84838484.peach-pairing-tab:not(.is-active):active {8485  background: var(--peach-border);8486}84878488/* Camera view */8489.peach-pairing-camera-container {8490  position: relative;8491  width: 100%;8492  aspect-ratio: 1;8493  border-radius: 12px;8494  overflow: hidden;8495  background: #000;8496  flex-shrink: 0;8497}84988499.peach-pairing-video {8500  width: 100%;8501  height: 100%;8502  object-fit: cover;8503}85048505.peach-pairing-scan-frame {8506  position: absolute;8507  top: 50%;8508  left: 50%;8509  transform: translate(-50%, -50%);8510  width: 60%;8511  aspect-ratio: 1;8512  border: 2px solid var(--peach-accent);8513  border-radius: 8px;8514  pointer-events: none;8515}85168517/* ── Notes Mode ── */85188519/* Overlay that crossfades over the vault */8520.peach-notes-overlay {8521  position: fixed;8522  inset: 0;8523  z-index: 90;8524  opacity: 0;8525  pointer-events: none;8526  animation: peach-mode-in 220ms ease-in forwards;8527}85288529.peach-notes-overlay.is-visible {8530  opacity: 1;8531  pointer-events: auto;8532}85338534@keyframes peach-mode-in {8535  from { opacity: 0; }8536  to   { opacity: 1; }8537}85388539/* Top-level notes surface */8540.peach-notes-mode {8541  position: absolute;8542  inset: 0;8543  background: var(--peach-bg);8544  display: flex;8545  flex-direction: column;8546}85478548/* Rune canvas positioned behind content */8549.peach-note-rune-canvas {8550  position: absolute;8551  inset: 0;8552  width: 100%;8553  height: 100%;8554  pointer-events: none;8555  z-index: 0;8556}85578558/* TOC wrapper */8559.peach-notes-toc-wrapper {8560  position: absolute;8561  inset: 0;8562  z-index: 1;8563  opacity: 1;8564  pointer-events: auto;8565  transition: opacity 200ms ease;8566}85678568.peach-notes-toc-wrapper.is-hidden {8569  opacity: 0;8570  pointer-events: none;8571}85728573/* Editor wrapper */8574.peach-notes-editor-wrapper {8575  position: absolute;8576  inset: 0;8577  z-index: 2;8578  opacity: 0;8579  pointer-events: none;8580  transition: opacity 200ms ease;8581}85828583.peach-notes-editor-wrapper.is-visible {8584  opacity: 1;8585  pointer-events: auto;8586}85878588/* TOC inner */8589.peach-notes-toc {8590  position: relative;8591  display: flex;8592  flex-direction: column;8593  height: 100%;8594  padding-top: env(safe-area-inset-top, 0px);8595  padding-bottom: env(safe-area-inset-bottom, 0px);8596}85978598/* Shared header */8599.peach-notes-header {8600  display: flex;8601  align-items: center;8602  padding: 12px 16px;8603  gap: 12px;8604  flex-shrink: 0;8605  min-height: 52px;8606  position: relative;8607  z-index: 2;8608}86098610.peach-notes-back {8611  font-size: 22px;8612  color: var(--peach-t2);8613  background: none;8614  border: none;8615  padding: 4px;8616  cursor: pointer;8617  line-height: 1;8618  flex-shrink: 0;8619  transition: color 150ms ease;8620  -webkit-tap-highlight-color: transparent;8621}86228623.peach-notes-back:active { color: var(--peach-t0); }86248625.peach-notes-header-title {8626  flex: 1;8627  font-family: 'Cormorant Garamond', serif;8628  font-style: italic;8629  font-size: 22px;8630  color: var(--peach-t0);8631  text-align: center;8632}86338634.peach-notes-header-title.is-breadcrumb {8635  font-family: 'IBM Plex Mono', monospace;8636  font-style: normal;8637  font-size: 11px;8638  color: var(--peach-t3);8639  letter-spacing: 0.08em;8640  text-transform: uppercase;8641  cursor: pointer;8642}86438644.peach-notes-header-actions {8645  display: flex;8646  gap: 8px;8647  flex-shrink: 0;8648}86498650.peach-notes-header-btn {8651  width: 36px;8652  height: 36px;8653  display: flex;8654  align-items: center;8655  justify-content: center;8656  background: none;8657  border: none;8658  color: var(--peach-t2);8659  cursor: pointer;8660  border-radius: 8px;8661  font-size: 16px;8662  transition: color 150ms ease, background 150ms ease;8663  -webkit-tap-highlight-color: transparent;8664}86658666.peach-notes-header-btn:active {8667  background: rgba(255,255,255,0.06);8668  color: var(--peach-t0);8669}86708671/* Inline search bar */8672.peach-notes-search-input {8673  flex: 1;8674  background: none;8675  border: none;8676  outline: none;8677  font-family: 'IBM Plex Mono', monospace;8678  font-size: 13px;8679  color: var(--peach-t0);8680  padding: 4px 0;8681  letter-spacing: 0.02em;8682}86838684.peach-notes-search-input::placeholder {8685  color: var(--peach-t3);8686}86878688/* TOC list */8689.peach-notes-list-container {8690  flex: 1;8691  overflow-y: auto;8692  overflow-x: hidden;8693  scrollbar-width: none;8694  -webkit-overflow-scrolling: touch;8695  overscroll-behavior: contain;8696  position: relative;8697  z-index: 1;8698}86998700.peach-notes-list-container::-webkit-scrollbar { display: none; }87018702/* Note row */8703.peach-note-row {8704  position: relative;8705  display: grid;8706  grid-template-columns: 44px 8px 1fr 8px auto;8707  align-items: center;8708  min-height: 72px;8709  padding: 16px 20px;8710  border-bottom: 0.5px solid var(--peach-border);8711  cursor: pointer;8712  overflow: hidden;8713  touch-action: pan-y;8714  user-select: none;8715  -webkit-user-select: none;8716  -webkit-tap-highlight-color: transparent;8717}87188719.peach-note-row:first-child {8720  border-top: 0.5px solid var(--peach-border);8721}87228723.peach-note-row:active {8724  background: rgba(255,255,255,0.02);8725}87268727.peach-note-numeral {8728  font-family: 'Cormorant Garamond', serif;8729  font-style: italic;8730  font-size: 15px;8731  color: var(--peach-accent);8732  text-align: right;8733  line-height: 1;8734  flex-shrink: 0;8735}87368737.peach-note-title-gap { /* grid spacer */ }87388739.peach-note-title {8740  font-family: 'Cormorant Garamond', serif;8741  font-style: italic;8742  font-size: 18px;8743  color: var(--peach-t0);8744  line-height: 1.3;8745  min-width: 0;8746  overflow-wrap: break-word;8747}87488749.peach-note-title-match {8750  color: var(--peach-accent);8751}87528753.peach-note-date {8754  font-family: 'IBM Plex Mono', monospace;8755  font-size: 11px;8756  color: var(--peach-t2);8757  white-space: nowrap;8758  text-align: right;8759  flex-shrink: 0;8760  grid-column: 5;8761}87628763/* Swipe underlays */8764.peach-note-row-underlay {8765  position: absolute;8766  inset: 0;8767  display: flex;8768  align-items: center;8769  padding: 0 24px;8770  font-family: 'IBM Plex Mono', monospace;8771  font-size: 11px;8772  letter-spacing: 0.1em;8773  pointer-events: none;8774  z-index: 0;8775}87768777.peach-note-row-underlay--delete {8778  background: #8B2020;8779  color: rgba(255,255,255,0.9);8780  justify-content: flex-end;8781}87828783.peach-note-row-underlay--archive {8784  background: var(--peach-accent);8785  color: #0C0A06;8786  justify-content: flex-start;8787}87888789/* Delete confirm strip */8790.peach-note-delete-confirm {8791  position: absolute;8792  inset: 0;8793  background: var(--peach-bg);8794  display: flex;8795  align-items: center;8796  gap: 12px;8797  padding: 0 20px;8798  font-family: 'IBM Plex Mono', monospace;8799  font-size: 11px;8800  color: var(--peach-t1);8801  letter-spacing: 0.04em;8802  animation: peach-delete-confirm-in 150ms ease both;8803  z-index: 10;8804}88058806@keyframes peach-delete-confirm-in {8807  from { opacity: 0; }8808  to   { opacity: 1; }8809}88108811.peach-note-delete-confirm-btn {8812  background: #8B2020;8813  color: rgba(255,255,255,0.9);8814  border: none;8815  border-radius: 6px;8816  padding: 4px 10px;8817  font-family: 'IBM Plex Mono', monospace;8818  font-size: 10px;8819  cursor: pointer;8820  letter-spacing: 0.06em;8821}88228823.peach-note-delete-cancel-btn {8824  background: none;8825  border: none;8826  color: var(--peach-t3);8827  font-family: 'IBM Plex Mono', monospace;8828  font-size: 10px;8829  cursor: pointer;8830  letter-spacing: 0.06em;8831  padding: 4px 6px;8832}88338834/* + New note button */8835.peach-notes-new-btn {8836  font-family: 'IBM Plex Mono', monospace;8837  font-size: 12px;8838  color: var(--peach-t3);8839  text-align: center;8840  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8841  background: none;8842  border: none;8843  width: 100%;8844  cursor: pointer;8845  letter-spacing: 0.04em;8846  transition: color 150ms ease;8847  -webkit-tap-highlight-color: transparent;8848}88498850.peach-notes-new-btn:active { color: var(--peach-accent); }88518852/* Empty state */8853.peach-notes-empty {8854  display: flex;8855  flex-direction: column;8856  align-items: center;8857  justify-content: center;8858  flex: 1;8859  padding: 48px 32px;8860  gap: 16px;8861}88628863.peach-notes-empty-text {8864  font-family: 'Cormorant Garamond', serif;8865  font-style: italic;8866  font-size: 20px;8867  color: var(--peach-t3);8868  text-align: center;8869  margin: 0;8870  line-height: 1.4;8871  white-space: pre-line;8872}88738874/* ── Editor surface ── */88758876.peach-note-editor-surface {8877  position: absolute;8878  inset: 0;8879  background: var(--peach-bg);8880  display: flex;8881  flex-direction: column;8882  padding-top: env(safe-area-inset-top, 0px);8883}88848885.peach-note-editor-scroll {8886  flex: 1;8887  overflow-y: auto;8888  overflow-x: hidden;8889  scrollbar-width: none;8890  -webkit-overflow-scrolling: touch;8891  padding: 0 24px 120px;8892  position: relative;8893  z-index: 1;8894}88958896.peach-note-editor-scroll::-webkit-scrollbar { display: none; }88978898/* Desktop toolbar (always visible above body) */8899.peach-note-toolbar-desktop-inline {8900  display: flex;8901  align-items: center;8902  gap: 2px;8903  padding: 6px 0 12px;8904  margin-bottom: 4px;8905  border-bottom: 0.5px solid var(--peach-border);8906}89078908/* Title field */8909.peach-note-title-field {8910  font-family: 'Cormorant Garamond', serif;8911  font-style: italic;8912  font-size: 32px;8913  font-weight: 600;8914  color: var(--peach-t0);8915  line-height: 1.2;8916  padding: 8px 0 0;8917  outline: none;8918  min-height: 44px;8919  word-break: break-word;8920  position: relative;8921  z-index: 1;8922}89238924.peach-note-title-field:empty::before {8925  content: attr(data-placeholder);8926  color: var(--peach-t3);8927  pointer-events: none;8928}89298930/* Hairline separator */8931.peach-note-hairline {8932  height: 0.5px;8933  background: var(--peach-border);8934  margin: 12px 0 20px;8935  position: relative;8936  z-index: 1;8937}89388939/* Body field */8940.peach-note-body-field {8941  font-family: 'DM Sans', sans-serif;8942  font-size: 16px;8943  color: var(--peach-t0);8944  line-height: 1.85;8945  padding: 0;8946  outline: none;8947  min-height: 240px;8948  word-break: break-word;8949  position: relative;8950  z-index: 1;8951}89528953.peach-note-body-field:empty::before {8954  content: attr(data-placeholder);8955  color: var(--peach-t3);8956  font-style: italic;8957  pointer-events: none;8958}89598960.peach-note-body-field h2 {8961  font-family: 'Cormorant Garamond', serif;8962  font-style: italic;8963  font-size: 22px;8964  font-weight: 600;8965  color: var(--peach-t0);8966  margin: 20px 0 8px;8967}89688969.peach-note-body-field blockquote {8970  border-left: 2px solid var(--peach-accent);8971  margin: 12px 0;8972  padding-left: 16px;8973  color: var(--peach-t1);8974  font-style: italic;8975}89768977.peach-note-body-field ul,8978.peach-note-body-field ol {8979  padding-left: 20px;8980  margin: 8px 0;8981}89828983.peach-note-body-field li {8984  margin: 4px 0;8985}89868987.peach-note-body-field hr {8988  border: none;8989  border-top: 0.5px solid var(--peach-border);8990  margin: 16px 0;8991}89928993/* Saved indicator */8994.peach-note-saved-indicator {8995  font-family: 'IBM Plex Mono', monospace;8996  font-size: 11px;8997  color: var(--peach-t3);8998  letter-spacing: 0.04em;8999  text-align: right;9000  padding: 6px 24px;9001  flex-shrink: 0;9002  transition: opacity 300ms ease;9003  pointer-events: none;9004  position: relative;9005  z-index: 1;9006}90079008/* Mobile keyboard toolbar */9009.peach-note-toolbar-mobile {9010  display: flex;9011  align-items: center;9012  padding: 8px 16px;9013  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));9014  background: var(--peach-bg);9015  border-top: 0.5px solid var(--peach-border);9016  gap: 4px;9017  flex-shrink: 0;9018  position: relative;9019  z-index: 10;9020}90219022.peach-note-toolbar-btn {9023  min-width: 36px;9024  height: 36px;9025  display: flex;9026  align-items: center;9027  justify-content: center;9028  background: none;9029  border: none;9030  border-radius: 8px;9031  cursor: pointer;9032  font-size: 14px;9033  color: var(--peach-t1);9034  font-family: 'DM Sans', sans-serif;9035  font-weight: 600;9036  transition: background 100ms ease, color 100ms ease;9037  -webkit-tap-highlight-color: transparent;9038}90399040.peach-note-toolbar-btn--italic { font-style: italic; }9041.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }9042.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }90439044.peach-note-toolbar-divider {9045  width: 0.5px;9046  height: 20px;9047  background: var(--peach-border);9048  margin: 0 4px;9049  flex-shrink: 0;9050}90519052.peach-note-toolbar-spacer { flex: 1; }90539054/* Desktop: larger headline in TOC */9055@media (min-width: 400px) {9056  .peach-notes-header-title:not(.is-breadcrumb) {9057    font-size: 32px;9058  }90599060  .peach-note-row {9061    min-height: 64px;9062    padding: 14px 16px;9063  }9064}90659066/* Flying title — shared element during expansion/collapse */90679068/* ─── Light theme overrides ───────────────────────────────────────────────9069   Tokens that cannot be expressed as variable substitutions — hardcoded9070   context-specific values that need separate light-mode rules. */90719072/* Settings section headers: use text-label (#79766F) per restoration brief —9073   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY9074   presence without fighting the light parchment background. */9075.light .peach-settings-sub-label,9076[data-theme="light"] .peach-settings-sub-label,9077.light .peach-settings-nav-label,9078[data-theme="light"] .peach-settings-nav-label {9079  color: #79766F;9080}90819082/* Secondary action buttons (ghost / subtle): filled with input-well surface9083   so they read as recessed against the parchment card background. */9084.light .peach-btn--ghost:not(.peach-icon-btn),9085[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {9086  background: #EEE7DD;9087  border-color: #DDD5CB;9088  color: #1A1208;9089}9090.light .peach-icon-btn,9091[data-theme="light"] .peach-icon-btn {9092  background: transparent;9093  border-color: transparent;9094}9095.light .peach-btn--subtle,9096[data-theme="light"] .peach-btn--subtle {9097  background: #EEE7DD;9098  border-color: #DDD5CB;9099}91009101/* Wide secondary action button on the lock screen — override the9102   hardcoded dark-mode rgba values with warm parchment equivalents. */9103.light .peach-lock-secondary,9104[data-theme="light"] .peach-lock-secondary {9105  background: #EEE7DD;9106  border-color: #DDD5CB;9107  color: #1A1208;9108}9109.light .peach-lock-secondary:hover,9110[data-theme="light"] .peach-lock-secondary:hover {9111  background: #F0E9DF;9112}91139114/* Entry row hover: bg-row lifts the row above the card surface. */9115.light .peach-entry-row:hover,9116[data-theme="light"] .peach-entry-row:hover {9117  background: #F2EBE1;9118}9119.light .peach-entry-row.is-active,9120[data-theme="light"] .peach-entry-row.is-active {9121  background: #F2EBE1;9122}9123.light .peach-entry-row.is-selected,9124[data-theme="light"] .peach-entry-row.is-selected {9125  background: #F5EDE2;9126}91279128/* ──────────────────────────────────────────────────────────────────────────9129   Chirp pairing flow — bird-stage animation (Phase 1)9130   See src/popup/components/ChirpPairingFlow.tsx and the brief §6.2.9131   Three-act animation gated on the [data-phase] attribute of9132   .peach-chirp-pair; child layers (birds, chirp arcs, flight wave, dot)9133   each react via either pose class or visibility flag.9134   Tokens: accent surfaces use var(--peach-accent); bird illustration9135   colours are baked into the SVG per the brand-peach exception in §3.1.9136   ────────────────────────────────────────────────────────────────────── */91379138.peach-chirp-pair {9139  position: absolute;9140  inset: 0;9141  z-index: 3;9142  display: flex;9143  flex-direction: column;9144  padding: 14px 12px 12px;9145  width: 100%;9146  box-sizing: border-box;9147  gap: 0;9148  background:9149    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9150    var(--peach-bg);9151  color: var(--peach-t0);9152  overflow-y: auto;9153  overflow-x: hidden;9154  scrollbar-width: none;9155  isolation: isolate;9156  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9157}9158@keyframes peach-chirp-overlay-in {9159  from { opacity: 0; transform: translateY(8px); }9160  to   { opacity: 1; transform: translateY(0); }9161}9162.peach-chirp-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }9163.peach-chirp-pair::before {9164  content: '';9165  position: absolute;9166  inset: 0;9167  border-radius: inherit;9168  pointer-events: none;9169  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9170  z-index: 0;9171}9172.peach-chirp-pair > * { position: relative; z-index: 1; }91739174/* Header --------------------------------------------------------------- */9175.peach-chirp-head {9176  display: flex; align-items: center; gap: 10px;9177}9178.peach-chirp-back {9179  width: 32px; height: 32px;9180  display: inline-flex; align-items: center; justify-content: center;9181  background: transparent;9182  border: none;9183  border-radius: 8px;9184  color: var(--peach-t1);9185  cursor: pointer;9186  transition: color 0.15s ease, box-shadow 0.15s ease;9187}9188.peach-chirp-back:hover {9189  color: var(--peach-accent);9190  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9191}9192.peach-chirp-title {9193  font-family: var(--font-display, Georgia, serif);9194  font-style: italic;9195  font-size: 24px;9196  font-weight: 500;9197  letter-spacing: 0.005em;9198  color: var(--peach-t0);9199  line-height: 1;9200}9201.peach-chirp-head-spacer { flex: 1; }92029203/* Chip row ------------------------------------------------------------- */9204.peach-chirp-chip-row {9205  display: flex;9206  align-items: center;9207  justify-content: flex-start;9208  margin-top: 12px;9209}9210.peach-chirp-chip {9211  display: inline-flex; align-items: center; gap: 8px;9212  padding: 5px 10px 5px 8px;9213  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9214  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9215  border-radius: 999px;9216  font-family: var(--peach-mono, ui-monospace, monospace);9217  font-size: 11px;9218  letter-spacing: 0.04em;9219  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9220}9221.peach-chirp-chip-dot {9222  width: 6px; height: 6px; border-radius: 50%;9223  background: var(--peach-accent);9224  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9225}9226.peach-chirp-chip[data-phase="paired"] {9227  background: color-mix(in srgb, #4f9eda 12%, transparent);9228  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9229  color: #76b6e8;9230}9231.peach-chirp-chip[data-phase="paired"] .peach-chirp-chip-dot {9232  background: #76b6e8;9233  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9234}9235.peach-chirp-chip[data-phase="timeout"],9236.peach-chirp-chip[data-phase="mic_denied"],9237.peach-chirp-chip[data-phase="version_mismatch"],9238.peach-chirp-chip[data-phase="handshake_failed"] {9239  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9240  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9241  color: var(--peach-warn, #d29257);9242}9243.peach-chirp-chip[data-phase="timeout"] .peach-chirp-chip-dot,9244.peach-chirp-chip[data-phase="mic_denied"] .peach-chirp-chip-dot,9245.peach-chirp-chip[data-phase="version_mismatch"] .peach-chirp-chip-dot,9246.peach-chirp-chip[data-phase="handshake_failed"] .peach-chirp-chip-dot {9247  background: var(--peach-warn, #d29257);9248  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9249}92509251/* Bird stage ----------------------------------------------------------- */9252.peach-chirp-stage {9253  position: relative;9254  margin: 14px 0 8px;9255  height: 180px;9256  border-radius: 12px;9257  background:9258    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9259    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),9260    color-mix(in srgb, var(--peach-bg) 92%, #000);9261  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);9262  overflow: hidden;9263  isolation: isolate;9264}9265.peach-chirp-stage::after {9266  content: '';9267  position: absolute;9268  left: 12%; right: 12%;9269  bottom: 36px;9270  height: 1px;9271  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9272}92739274.peach-chirp-bird-slot {9275  position: absolute;9276  bottom: 8px;9277  width: 100px;9278  height: 110px;9279  display: flex;9280  align-items: flex-end;9281  justify-content: center;9282}9283.peach-chirp-bird-slot-desktop { left: 28px; }9284.peach-chirp-bird-slot-mobile { right: 28px; }92859286/* Mobile bird hops in from the right when handshake begins */9287.peach-chirp-bird-slot-mobile {9288  opacity: 1;9289  transform: translateX(-6px);9290  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9291}9292.peach-chirp-stage.act-listening .peach-chirp-bird-slot-mobile,9293.peach-chirp-stage.act-chirping .peach-chirp-bird-slot-mobile,9294.peach-chirp-stage.act-idle .peach-chirp-bird-slot-mobile {9295  opacity: 0;9296  transform: translateX(60px) rotate(8deg);9297}9298.peach-chirp-stage.act-handshake .peach-chirp-bird-slot-desktop,9299.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop {9300  transform: translateX(6px);9301  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9302}93039304/* Paired: both birds bob together */9305.peach-chirp-stage.act-paired .peach-chirp-bird-slot {9306  animation: peach-chirp-happy-bob 1.2s ease-in-out infinite;9307}9308.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { animation-delay: 0.2s; }9309.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop { --bb-x: 6px; }9310.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { --bb-x: -6px; }9311@keyframes peach-chirp-happy-bob {9312  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9313  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9314}93159316/* Bird internal -------------------------------------------------------- */9317.peach-chirp-bird {9318  width: 108px;9319  height: 108px;9320  transform-origin: 50% 95%;9321}9322.peach-chirp-bird svg { width: 100%; height: 100%; overflow: visible; }93239324.peach-chirp-bird-body {9325  transform-origin: 50% 80%;9326  animation: peach-chirp-bird-bob 2.4s ease-in-out infinite;9327}9328@keyframes peach-chirp-bird-bob {9329  0%, 100% { transform: translateY(0) scale(1, 1); }9330  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9331}93329333.peach-chirp-bird-eye-group {9334  animation: peach-chirp-blink 5.2s steps(1, end) infinite;9335  transform-origin: center;9336  transform-box: fill-box;9337}9338@keyframes peach-chirp-blink {9339  0%, 92%, 96%, 100% { transform: scaleY(1); }9340  94%                { transform: scaleY(0.05); }9341}93429343/* Pose: chirping — beak opens, head bobs, aura blooms */9344.peach-chirp-bird-pose-chirping .peach-chirp-bird-body {9345  animation:9346    peach-chirp-bird-bob 2.4s ease-in-out infinite,9347    peach-chirp-squeeze 1.7s ease-in-out infinite;9348}9349@keyframes peach-chirp-squeeze {9350  0%, 70%, 100% { transform-origin: 50% 85%; }9351  78%           { transform: scale(1.04, 0.96) translateY(1px); }9352  86%           { transform: scale(0.98, 1.02); }9353}9354.peach-chirp-bird-pose-chirping .peach-chirp-bird-head-group {9355  animation: peach-chirp-head-bob 1.7s ease-in-out infinite;9356}9357@keyframes peach-chirp-head-bob {9358  0%, 70%, 100% { transform: translateY(0) rotate(0); }9359  78%           { transform: translateY(-3px) rotate(-4deg); }9360  86%           { transform: translateY(-1px) rotate(-2deg); }9361}9362.peach-chirp-bird-pose-chirping .peach-chirp-bird-beak {9363  animation: peach-chirp-beak-open 1.7s ease-in-out infinite;9364}9365@keyframes peach-chirp-beak-open {9366  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9367  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9368  86%           { transform: rotate(-6deg); }9369}9370.peach-chirp-bird-pose-chirping .peach-chirp-bird-aura {9371  animation: peach-chirp-aura 1.7s ease-in-out infinite;9372}9373@keyframes peach-chirp-aura {9374  0%, 100% { opacity: 0; }9375  50%      { opacity: 0.8; }9376}9377.peach-chirp-bird-pose-chirping .peach-chirp-bird-tail {9378  animation: peach-chirp-tail-twitch 1.7s ease-in-out infinite;9379  transform-origin: 100% 50%;9380}9381@keyframes peach-chirp-tail-twitch {9382  0%, 75%, 100% { transform: rotate(0); }9383  82%           { transform: rotate(-3deg) translateX(-1px); }9384}93859386/* Pose: attentive — head tilts toward partner */9387.peach-chirp-bird-pose-attentive .peach-chirp-bird-head-group {9388  animation: peach-chirp-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9389}9390@keyframes peach-chirp-head-tilt {9391  0%   { transform: rotate(0) translateY(0); }9392  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9393  100% { transform: rotate(-6deg); }9394}9395.peach-chirp-bird-pose-attentive .peach-chirp-bird-tail {9396  animation: peach-chirp-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9397  transform-origin: 100% 50%;9398}9399@keyframes peach-chirp-tail-cock {9400  0%   { transform: rotate(0); }9401  100% { transform: rotate(-4deg); }9402}94039404/* Pose: happy — wing flutter, tuft perk, tail wag */9405.peach-chirp-bird-pose-happy .peach-chirp-bird-wing {9406  transform-origin: 80% 60%;9407  animation: peach-chirp-wing-flutter 0.32s ease-in-out 5;9408}9409@keyframes peach-chirp-wing-flutter {9410  0%, 100% { transform: rotate(0) translateY(0); }9411  50%      { transform: rotate(-16deg) translateY(-2px); }9412}9413.peach-chirp-bird-pose-happy .peach-chirp-bird-tuft {9414  transform-origin: 0% 100%;9415  animation: peach-chirp-tuft-perk 0.4s ease-in-out 3;9416}9417@keyframes peach-chirp-tuft-perk {9418  0%, 100% { transform: rotate(0); }9419  50%      { transform: rotate(-15deg) translateY(-1px); }9420}9421.peach-chirp-bird-pose-happy .peach-chirp-bird-tail {9422  transform-origin: 100% 50%;9423  animation: peach-chirp-tail-wag 0.5s ease-in-out 4;9424}9425@keyframes peach-chirp-tail-wag {9426  0%, 100% { transform: rotate(0); }9427  25%      { transform: rotate(6deg); }9428  75%      { transform: rotate(-6deg); }9429}9430.peach-chirp-bird-pose-happy .peach-chirp-bird-head-group {9431  animation: peach-chirp-head-perk 0.5s ease-out;9432}9433@keyframes peach-chirp-head-perk {9434  0%   { transform: translateY(0); }9435  40%  { transform: translateY(-3px) rotate(2deg); }9436  100% { transform: translateY(0); }9437}94389439/* Pose: sad — body droops forward */9440.peach-chirp-bird-pose-sad .peach-chirp-bird-body {9441  transform: translateY(5px) rotate(-2deg);9442  animation: none;9443}9444.peach-chirp-bird-pose-sad .peach-chirp-bird-head-group {9445  transform: translateY(4px) rotate(8deg);9446}9447.peach-chirp-bird-pose-sad .peach-chirp-bird-tuft { transform: rotate(15deg) translateY(2px); }9448.peach-chirp-bird-pose-sad .peach-chirp-bird-tail { transform: rotate(8deg) translateY(2px); }94499450.peach-chirp-bird-pose-hidden { opacity: 0; }94519452/* Chirp arcs ----------------------------------------------------------- */9453.peach-chirp-arcs {9454  position: absolute;9455  top: 18px;9456  width: 96px;9457  height: 70px;9458  pointer-events: none;9459}9460.peach-chirp-arcs-right { right: -60px; }9461.peach-chirp-arcs-left  { left: -60px; transform: scaleX(-1); }9462.peach-chirp-arc {9463  position: absolute;9464  top: 50%;9465  left: 0;9466  width: 40px;9467  height: 40px;9468  margin-top: -20px;9469  border: 1.2px solid #f4d5a8;9470  border-color: transparent #f4d5a8 transparent transparent;9471  border-radius: 50%;9472  opacity: 0;9473  animation: peach-chirp-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9474}9475@keyframes peach-chirp-arc-expand {9476  0%   { transform: scale(0.4); opacity: 0; }9477  20%  { opacity: 0.9; }9478  100% { transform: scale(1.6); opacity: 0; }9479}94809481/* Flight wave ---------------------------------------------------------- */9482.peach-chirp-flight-track {9483  position: absolute;9484  inset: 32px 36px 38px 36px;9485  pointer-events: none;9486}9487.peach-chirp-flight-wave {9488  position: absolute;9489  top: 8px;9490  left: 76px;9491  right: 76px;9492  height: 60px;9493  width: auto;9494  opacity: 0;9495  transition: opacity 0.15s ease;9496  stroke: #f4d5a8;9497  fill: none;9498}9499.peach-chirp-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9500.peach-chirp-flight-wave.is-visible { opacity: 1; }9501.peach-chirp-flight-path,9502.peach-chirp-flight-path-2 {9503  stroke-dasharray: 240;9504  stroke-dashoffset: 240;9505  stroke-linecap: round;9506  fill: none;9507}9508.peach-chirp-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9509.peach-chirp-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9510.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path {9511  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9512}9513.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path-2 {9514  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9515}9516@keyframes peach-chirp-fly {9517  0%   { stroke-dashoffset: 240; opacity: 0; }9518  20%  { opacity: 1; }9519  100% { stroke-dashoffset: -120; opacity: 0; }9520}95219522/* Connection dot ------------------------------------------------------- */9523.peach-chirp-dot {9524  position: absolute;9525  top: 50%; left: 50%;9526  transform: translate(-50%, -50%);9527  width: 40px; height: 40px;9528  opacity: 0;9529  pointer-events: none;9530  transition: opacity 0.3s ease;9531  color: var(--peach-accent);9532}9533.peach-chirp-dot.is-visible { opacity: 1; }9534.peach-chirp-dot-glow {9535  position: absolute; top: 50%; left: 50%;9536  transform: translate(-50%, -50%);9537  width: 38px; height: 38px;9538  border-radius: 50%;9539  filter: blur(10px);9540  opacity: 0.55;9541  background: var(--peach-accent);9542  animation: peach-chirp-dot-bloom 1.4s ease-out;9543}9544.peach-chirp-dot-core {9545  position: absolute; top: 50%; left: 50%;9546  transform: translate(-50%, -50%);9547  width: 8px; height: 8px;9548  border-radius: 50%;9549  background: var(--peach-accent);9550  box-shadow: 0 0 12px currentColor;9551  animation: peach-chirp-dot-core 1.4s ease-out;9552}9553.peach-chirp-dot-ring {9554  position: absolute; top: 50%; left: 50%;9555  width: 60px; height: 60px;9556  transform: translate(-50%, -50%);9557  animation: peach-chirp-dot-ring 1.4s linear;9558  stroke: var(--peach-accent);9559}9560@keyframes peach-chirp-dot-bloom {9561  0%   { width: 4px; height: 4px; opacity: 0; }9562  35%  { width: 60px; height: 60px; opacity: 0.7; }9563  100% { width: 38px; height: 38px; opacity: 0.55; }9564}9565@keyframes peach-chirp-dot-core {9566  0%   { width: 0; height: 0; }9567  35%  { width: 12px; height: 12px; }9568  100% { width: 8px; height: 8px; }9569}9570@keyframes peach-chirp-dot-ring {9571  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9572  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9573  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9574}95759576/* Motes — drift upward across the stage */9577.peach-chirp-motes {9578  position: absolute;9579  inset: 0;9580  pointer-events: none;9581}9582.peach-chirp-mote {9583  position: absolute;9584  width: 2px; height: 2px;9585  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9586  border-radius: 50%;9587  bottom: 32px;9588  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9589  opacity: 0;9590  animation: peach-chirp-mote-drift 6s linear infinite;9591  animation-delay: calc(var(--mote-i, 0) * 0.7s);9592}9593@keyframes peach-chirp-mote-drift {9594  0%   { transform: translateY(0); opacity: 0; }9595  10%  { opacity: 0.6; }9596  90%  { opacity: 0.1; }9597  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9598}95999600/* Status copy ---------------------------------------------------------- */9601.peach-chirp-copy-host {9602  margin: 4px 4px 10px;9603  text-align: center;9604  min-height: 50px;9605}9606.peach-chirp-copy {9607  animation: peach-chirp-copy-in 0.35s ease both;9608}9609@keyframes peach-chirp-copy-in {9610  from { opacity: 0; transform: translateY(4px); }9611  to   { opacity: 1; transform: translateY(0); }9612}9613.peach-chirp-headline {9614  font-family: var(--font-display, Georgia, serif);9615  font-style: italic;9616  font-size: 20px;9617  font-weight: 500;9618  line-height: 1.2;9619  letter-spacing: 0.005em;9620  color: var(--peach-t0);9621  margin-bottom: 6px;9622}9623.peach-chirp-copy-listening .peach-chirp-headline,9624.peach-chirp-copy-chirping .peach-chirp-headline,9625.peach-chirp-copy-idle .peach-chirp-headline {9626  font-family: inherit;9627  font-style: normal;9628  font-weight: 500;9629  font-size: 15px;9630  color: var(--peach-t0);9631  letter-spacing: 0;9632}9633.peach-chirp-copy-paired .peach-chirp-headline {9634  color: var(--peach-t0);9635  font-weight: 600;9636}9637.peach-chirp-sub {9638  font-size: 12.5px;9639  line-height: 1.45;9640  color: var(--peach-t1);9641  max-width: 280px;9642  margin: 0 auto;9643  text-wrap: pretty;9644}96459646/* Status action -------------------------------------------------------- */9647.peach-chirp-action {9648  margin: 2px 4px 10px;9649  margin-top: auto;9650  display: flex;9651  flex-direction: column;9652  gap: 8px;9653}9654.peach-chirp-mic-notice {9655  margin: 0;9656  font-size: 0.625rem;9657  color: var(--peach-t2);9658  line-height: 1.4;9659}9660.peach-chirp-action-waiting {9661  display: flex;9662  align-items: center;9663  justify-content: space-between;9664  gap: 12px;9665}9666.peach-chirp-cancel {9667  min-width: 96px;9668}9669.peach-chirp-listening {9670  display: inline-flex; align-items: center; gap: 4px;9671  font-family: var(--peach-mono, ui-monospace, monospace);9672  font-size: 9.5px;9673  text-transform: uppercase;9674  letter-spacing: 0.12em;9675  color: var(--peach-t1);9676  padding: 8px 10px;9677}9678.peach-chirp-listen-dot {9679  width: 4px; height: 4px;9680  border-radius: 50%;9681  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9682  animation: peach-chirp-listen-pulse 1.2s ease-in-out infinite;9683}9684.peach-chirp-listen-dot:nth-child(2) { animation-delay: 0.2s; }9685.peach-chirp-listen-dot:nth-child(3) { animation-delay: 0.4s; }9686.peach-chirp-listen-label { margin-left: 6px; }9687@keyframes peach-chirp-listen-pulse {9688  0%, 100% { opacity: 0.25; transform: scale(0.9); }9689  50%      { opacity: 1;     transform: scale(1.15); }9690}96919692.peach-chirp-action-handshake {9693  display: flex;9694  flex-direction: column;9695  align-items: center;9696  gap: 8px;9697  padding: 8px 4px;9698}9699.peach-chirp-meter {9700  width: 100%;9701  max-width: 280px;9702  height: 2px;9703  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9704  border-radius: 2px;9705  position: relative;9706  overflow: hidden;9707}9708.peach-chirp-meter-bar {9709  position: absolute;9710  top: 0; bottom: 0;9711  width: 30%;9712  left: -30%;9713  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9714  animation: peach-chirp-meter-sweep 1.4s ease-in-out infinite;9715}9716@keyframes peach-chirp-meter-sweep {9717  0%   { left: -30%; }9718  100% { left: 100%; }9719}9720.peach-chirp-meter-label {9721  font-family: var(--peach-mono, ui-monospace, monospace);9722  font-size: 9.5px;9723  text-transform: uppercase;9724  letter-spacing: 0.14em;9725  color: var(--peach-t1);9726}97279728.peach-chirp-action-paired {9729  display: flex;9730  align-items: center;9731  gap: 10px;9732}9733.peach-chirp-device-confirm {9734  flex: 1;9735  display: inline-flex;9736  align-items: center;9737  gap: 8px;9738  padding: 9px 10px 9px 12px;9739  border-radius: 10px;9740  background: color-mix(in srgb, #76b6e8 12%, transparent);9741  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9742  font-size: 12.5px;9743  color: var(--peach-t0);9744  min-width: 0;9745}9746.peach-chirp-device-confirm-glyph {9747  display: inline-flex;9748  color: #76b6e8;9749}9750.peach-chirp-device-confirm-name {9751  flex: 1;9752  overflow: hidden;9753  text-overflow: ellipsis;9754  white-space: nowrap;9755}9756.peach-chirp-device-confirm-trust {9757  font-family: var(--peach-mono, ui-monospace, monospace);9758  font-size: 9.5px;9759  text-transform: uppercase;9760  letter-spacing: 0.1em;9761  color: #76b6e8;9762  padding: 2px 6px;9763  border-radius: 4px;9764  background: color-mix(in srgb, #76b6e8 14%, transparent);9765}9766.peach-chirp-done {9767  min-width: 80px;9768}9769.peach-chirp-retry {9770  align-self: center;9771  display: block;9772  margin: 6px auto 0;9773  min-width: 120px;9774}9775.peach-chirp-mic-help {9776  font-size: 12px;9777  color: var(--peach-t1);9778  text-align: center;9779  max-width: 320px;9780  margin: 0 auto;9781}97829783/* Rest state — bird stage at idle pose, primary CTA + paired list */9784.peach-chirp-pair[data-phase="idle"] .peach-chirp-stage {9785  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9786  height: 160px;9787}9788.peach-chirp-pair-start {9789  width: 100%;9790  display: inline-flex;9791  align-items: center;9792  justify-content: center;9793  gap: 8px;9794  padding: 11px 14px;9795  border-radius: 10px;9796  background: var(--peach-accent);9797  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9798  color: #1a0905;9799  font-family: inherit;9800  font-size: 13px;9801  font-weight: 600;9802  letter-spacing: 0.01em;9803  cursor: pointer;9804  transition: filter 0.15s ease, transform 0.1s ease;9805}9806.peach-chirp-pair-start:hover { filter: brightness(1.08); }9807.peach-chirp-pair-start:active { transform: translateY(1px); }98089809.peach-chirp-paired-section {9810  margin-top: 14px;9811  display: flex;9812  flex-direction: column;9813  gap: 8px;9814}9815.peach-chirp-paired-heading {9816  margin: 0;9817  font-family: var(--peach-mono, ui-monospace, monospace);9818  font-size: 10px;9819  font-weight: 500;9820  letter-spacing: 0.14em;9821  text-transform: uppercase;9822  color: var(--peach-t1);9823}98249825/* Footer --------------------------------------------------------------- */9826.peach-chirp-foot {9827  margin: 10px -4px -2px;9828  margin-top: auto;9829}9830.peach-chirp-foot-divider {9831  height: 1px;9832  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9833  margin-bottom: 10px;9834}9835.peach-chirp-foot-text {9836  font-size: 11px;9837  line-height: 1.5;9838  color: var(--peach-t1);9839  text-align: center;9840  padding: 0 4px;9841  text-wrap: pretty;9842}98439844/* Screen-reader-only live region. Kept off the visual flow but read by9845   assistive tech as the pairing phase advances. */9846.peach-sr-only {9847  position: absolute;9848  width: 1px; height: 1px;9849  padding: 0; margin: -1px;9850  overflow: hidden;9851  clip: rect(0, 0, 0, 0);9852  white-space: nowrap;9853  border: 0;9854}98559856/* Reduced motion — stage simplifies to opacity transitions only */9857@media (prefers-reduced-motion: reduce) {9858  .peach-chirp-bird-body,9859  .peach-chirp-bird-head-group,9860  .peach-chirp-bird-beak,9861  .peach-chirp-bird-wing,9862  .peach-chirp-bird-tuft,9863  .peach-chirp-bird-tail,9864  .peach-chirp-bird-eye-group,9865  .peach-chirp-bird-aura,9866  .peach-chirp-arc,9867  .peach-chirp-flight-path,9868  .peach-chirp-flight-path-2,9869  .peach-chirp-dot-glow,9870  .peach-chirp-dot-core,9871  .peach-chirp-dot-ring,9872  .peach-chirp-mote,9873  .peach-chirp-meter-bar,9874  .peach-chirp-listen-dot,9875  .peach-chirp-bird-slot,9876  .peach-chirp-bird-slot-mobile {9877    animation: none !important;9878    transition: opacity 0.2s linear !important;9879  }9880}98819882/* ─────────────────────────────────────────────────────────────────9883   Settings → Sync surface (v3 ChirpSync). Wraps the same bird9884   animation used by the pairing flow with a paired-devices list and9885   the "Pair a device" CTA.9886   ───────────────────────────────────────────────────────────────── */9887.peach-chirp-settings {9888  position: absolute;9889  inset: 0;9890  z-index: 3;9891  display: flex;9892  flex-direction: column;9893  gap: 18px;9894  padding: 14px 12px 12px;9895  width: 100%;9896  box-sizing: border-box;9897  overflow-y: auto;9898  overflow-x: hidden;9899  /* Same warm Chirp surface as the pairing screen — unifies the two views. */9900  background:9901    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9902    var(--peach-bg);9903  color: var(--peach-t0);9904  isolation: isolate;9905  /* Hide native scrollbar — content fits 99% of the time and a chunky9906     gutter ruins the surface. */9907  scrollbar-width: none;9908  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9909}9910.peach-chirp-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9911.peach-chirp-settings::before {9912  content: '';9913  position: absolute;9914  inset: 0;9915  pointer-events: none;9916  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9917  z-index: 0;9918}9919.peach-chirp-settings > * { position: relative; z-index: 1; }99209921.peach-chirp-settings--pairing {9922  padding: 0;9923  align-items: stretch;9924  justify-content: stretch;9925  background: none;9926  isolation: auto;9927}9928.peach-chirp-settings--pairing::before { display: none; }99299930.peach-chirp-settings-header {9931  display: flex;9932  align-items: center;9933  gap: 10px;9934}9935.peach-chirp-settings-title {9936  margin: 0;9937  font-family: var(--font-display, Georgia, serif);9938  font-style: italic;9939  font-size: 24px;9940  font-weight: 500;9941  line-height: 1;9942  color: var(--peach-t0);9943  letter-spacing: 0.005em;9944}9945.peach-chirp-settings-section {9946  margin: 6px 0 -4px;9947  font-size: 11px;9948  font-weight: 600;9949  letter-spacing: 0.08em;9950  text-transform: uppercase;9951  color: var(--peach-text-muted);9952}9953.peach-chirp-settings-error {9954  font-size: 12px;9955  padding: 8px 10px;9956  border-radius: 8px;9957  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);9958  color: var(--peach-text);9959}9960.peach-chirp-settings-footer {9961  margin-top: auto;9962  padding-top: 18px;9963  font-size: 11.5px;9964  line-height: 1.5;9965  color: var(--peach-text-muted);9966  text-align: center;9967}99689969/* Hero card shown when no devices are paired yet. */9970.peach-chirp-hero {9971  display: flex;9972  flex-direction: column;9973  align-items: center;9974  gap: 12px;9975  padding: 20px 12px 8px;9976  text-align: center;9977}9978.peach-chirp-hero-svg {9979  display: block;9980  max-width: 100%;9981  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));9982}9983.peach-chirp-hero-headline {9984  margin: 0;9985  font-family: var(--font-display, Georgia, serif);9986  font-style: italic;9987  font-size: 20px;9988  font-weight: 500;9989  line-height: 1.2;9990  letter-spacing: 0.005em;9991  color: var(--peach-t0);9992}9993.peach-chirp-hero-sub {9994  margin: 0;9995  font-size: 13px;9996  line-height: 1.5;9997  color: var(--peach-t1);9998  max-width: 320px;9999  text-wrap: pretty;10000}1000110002.peach-chirp-pair-cta {10003  display: flex;10004  justify-content: center;10005  padding: 4px 0 6px;10006}10007.peach-chirp-pair-button {10008  display: inline-flex;10009  align-items: center;10010  gap: 8px;10011  min-width: 220px;10012  justify-content: center;10013}10014.peach-chirp-pair-button-icon {10015  flex: 0 0 auto;10016}1001710018/* Paired devices list. Roomy rows that look at home next to the rest10019   of Settings; stale rows get a soft warm-warning border tint. */10020.peach-chirp-device-list {10021  list-style: none;10022  margin: 0;10023  padding: 0;10024  display: flex;10025  flex-direction: column;10026  gap: 8px;10027}10028.peach-chirp-device-row {10029  display: flex;10030  align-items: center;10031  gap: 12px;10032  padding: 12px;10033  border-radius: 10px;10034  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10035  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);10036}10037.peach-chirp-device-row[data-stale="true"] {10038  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);10039}10040.peach-chirp-device-icon {10041  width: 32px;10042  height: 32px;10043  display: flex;10044  align-items: center;10045  justify-content: center;10046  border-radius: 8px;10047  color: var(--peach-text);10048  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);10049}10050.peach-chirp-device-info {10051  flex: 1;10052  display: flex;10053  flex-direction: column;10054  gap: 2px;10055  min-width: 0;10056}10057.peach-chirp-device-name {10058  font-size: 14px;10059  font-weight: 600;10060  color: var(--peach-text);10061  overflow: hidden;10062  text-overflow: ellipsis;10063  white-space: nowrap;10064}10065.peach-chirp-device-meta {10066  font-size: 11.5px;10067  color: var(--peach-text-muted);10068  display: flex;10069  flex-wrap: wrap;10070  align-items: center;10071  gap: 8px;10072}10073.peach-chirp-device-badge {10074  font-size: 10.5px;10075  font-weight: 500;10076  letter-spacing: 0.02em;10077  padding: 2px 6px;10078  border-radius: 999px;10079  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);10080  color: var(--peach-text);10081}10082.peach-chirp-device-stale {10083  font-size: 10.5px;10084  font-weight: 500;10085  color: var(--peach-warn, #d29257);10086}10087.peach-chirp-device-remove {10088  flex: 0 0 auto;10089  color: var(--peach-text-muted);10090}10091.peach-chirp-device-remove:hover {10092  color: var(--peach-danger, #c25b4a);10093}10094.peach-chirp-unpair-confirm {10095  display: flex;10096  gap: 6px;10097  align-items: center;10098}1009910100/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */10101.peach-chirp-pro-card {10102  position: relative;10103  margin: 18px 12px;10104  padding: 18px 20px 22px;10105  border-radius: 22px;10106  background:10107    radial-gradient(140% 90% at 50% 0%,10108      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,10109      transparent 60%),10110    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10111  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);10112  box-shadow:10113    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,10114    0 18px 40px -24px rgba(0, 0, 0, 0.45);10115  display: flex;10116  flex-direction: column;10117  align-items: center;10118  gap: 10px;10119  text-align: center;10120  overflow: hidden;10121}10122.peach-chirp-pro-stage {10123  position: relative;10124  width: 220px;10125  height: 140px;10126  display: flex;10127  align-items: flex-end;10128  justify-content: center;10129  margin-bottom: 2px;10130}10131.peach-chirp-pro-bird-slot {10132  width: 140px;10133  height: 132px;10134  display: flex;10135  align-items: flex-end;10136  justify-content: center;10137  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));10138}10139.peach-chirp-pro-bird-slot .peach-chirp-bird {10140  width: 100%;10141  height: 100%;10142}10143.peach-chirp-pro-bird-slot .peach-chirp-bird svg {10144  width: 100%;10145  height: 100%;10146  overflow: visible;10147}10148.peach-chirp-pro-chirp {10149  position: absolute;10150  top: 14px;10151  right: 8px;10152  width: 96px;10153  height: 80px;10154  color: var(--peach-accent);10155  animation: peach-chirp-pulse 2.6s ease-in-out infinite;10156  transform-origin: 0% 50%;10157  pointer-events: none;10158}10159@keyframes peach-chirp-pulse {10160  0%, 100% { opacity: 0.35; transform: translateX(0) scale(0.92); }10161  45%      { opacity: 1;    transform: translateX(2px) scale(1); }10162  70%      { opacity: 0.6;  transform: translateX(4px) scale(1.04); }10163}10164@media (prefers-reduced-motion: reduce) {10165  .peach-chirp-pro-chirp { animation: none; opacity: 0.7; }10166}10167.peach-chirp-pro-headline {10168  margin: 4px 0 0;10169  font-family: var(--font-display, "Cormorant Garamond", serif);10170  font-style: italic;10171  font-size: 19px;10172  font-weight: 500;10173  letter-spacing: 0.01em;10174  color: var(--peach-t0);10175  max-width: 280px;10176  line-height: 1.25;10177}10178.peach-chirp-pro-body {10179  margin: 0;10180  font-size: 13px;10181  line-height: 1.55;10182  color: var(--peach-t1);10183  max-width: 300px;10184}10185.peach-chirp-pro-cta {10186  margin-top: 4px;10187}10188.peach-chirp-pro-foot {10189  margin: 2px 0 0;10190  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10191  font-size: 0.625rem;10192  letter-spacing: 0.08em;10193  text-transform: uppercase;10194  color: var(--peach-t2);10195  opacity: 0.75;10196}1019710198/* Shell border and shadow in light mode: match dark mode's near-invisible10199   border weight so the popup frame looks the same in both themes. */10200.light .peach-shell,10201.light .peach-screen {10202  border-color: rgba(26, 18, 8, 0.07);10203  box-shadow:10204    0 2px 8px rgba(80, 56, 32, 0.08),10205    0 14px 48px rgba(80, 56, 32, 0.10),10206    0 0 0 1px rgba(26, 18, 8, 0.04);10207}