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/* The pair-device surface owns its own header 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/* Topbar sync. Only rendered when a device is paired, so it never sits there943   as a control that cannot do anything. */944.peach-sync-btn.is-syncing { color: var(--peach-accent); }945.peach-sync-btn.is-syncing .peach-sync-icon {946  animation: peach-sync-spin 900ms linear infinite;947  transform-origin: 50% 50%;948}949.peach-sync-btn.is-ok { color: var(--peach-accent); }950.peach-sync-btn.is-error { color: var(--peach-breach, #d66); }951@keyframes peach-sync-spin { to { transform: rotate(360deg); } }952953/* Sync indicator light — same taxonomy as the Settings pip, sized for the954   14px topbar icon. Unlit when nothing has happened yet; never green when955   sync is not actually working. */956.peach-sync-btn { position: relative; }957.peach-sync-pip {958  position: absolute;959  top: 2px;960  right: 2px;961  width: 5px;962  height: 5px;963  border-radius: 50%;964  background: transparent;965}966.peach-sync-pip.is-ok,967.peach-sync-pip.is-busy {968  background: var(--peach-health-ok);969  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-health-ok) 60%, transparent);970}971.peach-sync-pip.is-busy { animation: peach-sync-pip-pulse 1600ms ease-in-out infinite; }972/* Yellow — the dial did not reach the peer, but the alarm will retry. Distinct973   from is-error (red) so a transient network miss does not look like a real974   fault. */975.peach-sync-pip.is-warn {976  background: var(--peach-health-warn);977  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-health-warn) 60%, transparent);978}979.peach-sync-pip.is-error {980  background: var(--peach-breach);981  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-breach) 60%, transparent);982}983@keyframes peach-sync-pip-pulse {984  0%, 100% { opacity: 1; }985  50% { opacity: 0.35; }986}987@media (prefers-reduced-motion: reduce) {988  .peach-sync-btn.is-syncing .peach-sync-icon { animation: none; opacity: 0.6; }989  .peach-sync-pip.is-busy { animation: none; }990}991992.peach-btn:focus-visible {993  outline: none;994  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);995}996997/* Lock button */998.peach-lock-icon { transform-origin: center; }999.peach-lock-btn { color: var(--peach-accent); }1000.peach-lock-btn.is-locking .peach-lock-icon {1001  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);1002}10031004/* Biometric unlock button */1005.peach-biometric-btn {1006  display: flex;1007  align-items: center;1008  justify-content: center;1009  gap: 6px;1010  margin-top: 8px;1011  width: 100%;1012}10131014/* Copy button */1015.peach-copy-btn {1016  position: relative; overflow: hidden;1017  color: var(--peach-t2); border-color: var(--peach-t3);1018}1019.peach-copy-icon {1020  display: inline-flex; align-items: center; justify-content: center;1021  position: relative; z-index: 1;1022}1023.peach-copy-icon-svg { display: block; }1024.peach-copy-sheen {1025  position: absolute; inset: 0;1026  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%);1027  opacity: 0; transform: scaleX(0.15); transform-origin: left center;1028}1029.peach-copy-btn.is-copied {1030  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;1031  box-shadow:1032    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),1033    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),1034    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);1035}1036.peach-copy-btn.is-copied .peach-copy-icon {1037  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;1038}1039.peach-copy-btn.is-copied .peach-copy-sheen {1040  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;1041}1042.peach-copy-btn.is-retreat {1043  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;1044}1045.peach-copy-btn.is-retreat .peach-copy-sheen {1046  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;1047}1048.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }1049.peach-copy-drain-bar {1050  display: block; width: 100%; height: 100%;1051  background: var(--peach-accent); opacity: 0.7;1052  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;1053}10541055/* Unlock screen elements */1056.peach-underline-input {1057  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);1058  padding: 6px 0; background: transparent; color: var(--peach-t0);1059  outline: none;1060  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1061  font-size: 0.8125rem;1062  caret-color: var(--peach-accent);1063}1064.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }1065.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }1066.peach-hint {1067  margin: 0;1068  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1069  font-size: 0.625rem; color: var(--peach-t2);1070}1071.peach-unlock-footer {1072  margin-top: 4px; display: flex; align-items: center; gap: 7px;1073  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1074  font-size: 0.625rem; color: var(--peach-t2);1075}1076.peach-unlock-footer--lock {1077  padding-top: 2px;1078}10791080/* Desktop helper (peach-sync) code pairing — additive hooks. The shared pairing1081   classes (peach-pair-*) carry the shared layout; these only style the parts1082   unique to the typed-code path. Inline styles cover the SAS/confirm gate. */1083.peach-desktop-pair { display: flex; flex-direction: column; }1084.peach-desktop-enter,1085.peach-desktop-searching,1086.peach-desktop-paired,1087.peach-desktop-error {1088  display: flex; flex-direction: column; gap: 8px;1089  padding: 4px 18px 16px; text-align: center; align-items: center;1090}1091.peach-desktop-enter .peach-label { align-self: flex-start; }1092/* Sized for a full 19-character pairing code (A74H-48J3-KI32-OEP4) in a1093   320px popup — a 6-digit legacy helper code still reads fine at this size. */1094.peach-code-input {1095  text-align: center; letter-spacing: 0.12em; padding-left: 0.12em;1096  font-size: 15px;1097}1098.peach-code-input::placeholder { letter-spacing: 0.12em; }10991100/* Sync card "pair a device" options — bordered, raised tappable rows that read1101   as buttons on any card hue (theme-neutral light overlay, not the peach accent). */1102.peach-sync-pair-option {1103  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;1104  width: 100%; text-align: left; cursor: pointer; font-family: inherit;1105  padding: 11px 12px; border-radius: 10px;1106  background: color-mix(in srgb, var(--peach-t0) 6%, transparent);1107  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);1108  color: var(--peach-t0);1109  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;1110}1111.peach-sync-pair-option + .peach-sync-pair-option { margin-top: 8px; }1112.peach-sync-pair-option:hover {1113  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);1114  border-color: color-mix(in srgb, var(--peach-t0) 28%, transparent);1115}1116.peach-sync-pair-option:active { transform: translateY(1px); }1117.peach-sync-pair-option:disabled { opacity: 0.5; cursor: default; }1118.peach-sync-pair-option-icon { flex-shrink: 0; display: flex; align-items: center; color: var(--peach-t1); margin-top: 1px; }1119.peach-sync-pair-option-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }1120.peach-sync-pair-option-title { font-size: 0.8125rem; font-weight: 600; }1121.peach-sync-pair-option-sub { font-size: 0.6875rem; line-height: 1.45; color: var(--peach-t2); }1122.peach-sync-pair-option-chevron { flex-shrink: 0; color: var(--peach-t2); font-size: 1.05rem; line-height: 1.3; }11231124/* Breach badge */1125.peach-breach-badge {1126  display: flex;1127  position: relative;1128  z-index: 1;1129  align-items: center;1130  gap: 7px;1131  font-size: 0.5625rem;1132  color: var(--peach-breach);1133  padding: 5px 10px;1134  margin-bottom: 4px;1135  border-radius: 8px;1136  background: rgba(220, 80, 60, 0.07);1137  border: 1px solid rgba(220, 80, 60, 0.18);1138  letter-spacing: 0.04em;1139}11401141.peach-password-value.is-breached {1142  color: rgba(220, 80, 60, 0.75);1143  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1144}11451146/* ── Overlay views ─────────────────────────────────────────────────── */1147.peach-overlay-view {1148  position: absolute;1149  inset: 0;1150  display: flex;1151  flex-direction: column;1152  background:1153    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1154    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1155    var(--peach-bg);1156  z-index: 2;1157  overflow: hidden;1158  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1159}11601161.peach-overlay-view:has(.stk-shell) {1162  background: var(--peach-bg);1163}1164@keyframes overlay-in {1165  from { opacity: 0; transform: translateY(8px); }1166  to   { opacity: 1; transform: translateY(0); }1167}1168.peach-overlay-view.ov-enter-up {1169  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1170}1171.peach-overlay-view.ov-exit-up {1172  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1173}1174.peach-overlay-view.ov-enter-right {1175  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1176}1177.peach-overlay-view.ov-exit-right {1178  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1179}11801181@keyframes ov-enter-up {1182  from { opacity: 0; transform: translateY(18px); }1183  to   { opacity: 1; transform: translateY(0); }1184}1185@keyframes ov-exit-up {1186  from { opacity: 1; transform: translateY(0); }1187  to   { opacity: 0; transform: translateY(-12px); }1188}1189@keyframes ov-enter-right {1190  from { opacity: 0; transform: translateX(20px); }1191  to   { opacity: 1; transform: translateX(0); }1192}1193@keyframes ov-exit-right {1194  from { opacity: 1; transform: translateX(0); }1195  to   { opacity: 0; transform: translateX(20px); }1196}11971198/* Overlay shared header */1199.peach-overlay-header {1200  padding: 10px 12px 8px;1201  display: flex;1202  align-items: center;1203  gap: 10px;1204  flex-shrink: 0;1205}1206/* Back button — circular pill matching the settings stack masthead (.stk-back) */1207.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1208  width: 28px;1209  height: 28px;1210  flex: 0 0 28px;1211  border-radius: 999px;1212  border: 1px solid var(--peach-border);1213  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1214  color: var(--peach-t1);1215  padding: 0;1216}1217.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1218  color: var(--peach-t0);1219  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1220  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1221}1222.peach-overlay-title {1223  font-family: var(--font-display);1224  font-style: italic;1225  font-weight: 400;1226  font-size: 20px;1227  line-height: 1;1228  color: var(--peach-t0);1229  flex: 1;1230  text-align: center;1231}1232/* Balances the 28px back button so the title stays visually centred */1233.peach-overlay-spacer {1234  width: 28px;1235  flex: 0 0 28px;1236}12371238.peach-overlay-card {1239  background: var(--peach-s1);1240  border: 1px solid var(--peach-t3);1241  border-radius: 12px;1242  overflow: hidden;1243  width: 100%;1244}12451246.peach-onboarding-alt-actions {1247  display: flex;1248  flex-direction: column;1249  gap: 4px;1250  padding: 0;1251}12521253.peach-settings-copy {1254  margin: 0 0 10px;1255  font-size: 0.6875rem;1256  line-height: 1.5;1257  color: var(--peach-t2);1258}12591260.peach-settings-copy strong {1261  color: var(--peach-t0);1262}12631264.peach-settings-copy--spacious {1265  margin-bottom: 12px;1266}12671268.peach-settings-copy--result {1269  color: var(--peach-accent);1270  font-size: 0.8125rem;1271  text-align: center;1272  padding: 8px 0;1273}12741275.peach-settings-copy--danger {1276  color: var(--peach-breach);1277}12781279.peach-settings-copy--success {1280  color: var(--peach-accent);1281}12821283.peach-inline-feedback {1284  font-size: 0.6875rem;1285  margin: 10px 0 0;1286}12871288.peach-inline-feedback--ok {1289  color: var(--peach-accent);1290}12911292.peach-inline-feedback--error {1293  color: var(--peach-breach);1294}12951296.peach-inline-feedback--muted {1297  color: var(--peach-t2);1298  font-size: 0.625rem;1299  margin: 4px 0;1300}13011302.peach-inline-feedback--spaced {1303  margin-top: 12px;1304}13051306.peach-settings-actions--row {1307  display: flex;1308  gap: 6px;1309}13101311.peach-settings-actions--end {1312  margin-top: 14px;1313  justify-content: flex-end;1314}13151316.peach-settings-stack {1317  display: flex;1318  flex-direction: column;1319  gap: 6px;1320}13211322.peach-settings-stack--tight {1323  gap: 4px;1324}13251326.peach-settings-stack--spacious {1327  gap: 8px;1328}13291330.peach-settings-input {1331  width: 100%;1332  box-sizing: border-box;1333  padding: 8px 10px;1334  background: rgba(0, 0, 0, 0.22);1335  border: 1px solid transparent;1336  border-radius: 6px;1337  color: var(--peach-t0);1338  font-family: var(--font-ui);1339  font-size: 0.75rem;1340  outline: none;1341  transition: border-color 120ms ease, background 120ms ease;1342}13431344.peach-settings-input:focus {1345  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1346  background: rgba(0, 0, 0, 0.28);1347}13481349.peach-settings-input[type="password"] {1350  font-family: var(--font-mono);1351  letter-spacing: 0.04em;1352}13531354.peach-hidden-file-input {1355  display: none;1356}13571358.peach-checkbox-note {1359  display: flex;1360  align-items: flex-start;1361  gap: 8px;1362  font-size: 0.6875rem;1363  color: var(--peach-t1);1364  cursor: pointer;1365  margin: 12px 0;1366}13671368.peach-checkbox-note input {1369  margin-top: 1px;1370}13711372.peach-danger-notice {1373  background: rgba(220, 80, 60, 0.08);1374  border: 1px solid rgba(220, 80, 60, 0.2);1375  border-radius: 6px;1376  padding: 9px 11px;1377  font-size: 0.6875rem;1378  color: var(--peach-t1);1379  line-height: 1.5;1380}13811382.peach-info-notice {1383  font-size: 0.6875rem;1384  color: var(--peach-t1);1385  line-height: 1.5;1386  background: var(--surface-card);1387  border: 1px solid var(--peach-t3);1388  border-radius: 6px;1389  padding: 8px 10px;1390}13911392.peach-info-notice--warn {1393  border-color: rgba(220, 38, 38, 0.4);1394  background: rgba(220, 38, 38, 0.06);1395  color: rgba(220, 38, 38, 0.92);1396  margin-bottom: 8px;1397}13981399/* Warm helpful-context note — reads as a soft aside, not an alert. */1400.peach-info-notice--note {1401  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);1402  border-color: color-mix(in srgb, var(--peach-accent) 18%, transparent);1403  color: var(--peach-t2);1404}14051406.peach-strength-row {1407  display: flex;1408  align-items: center;1409  gap: 8px;1410  margin-bottom: 10px;1411}14121413.peach-strength-track {1414  flex: 1;1415  height: 4px;1416  background: var(--peach-s2);1417  border-radius: 2px;1418  overflow: hidden;1419}14201421.peach-strength-fill {1422  height: 100%;1423  border-radius: 2px;1424  transition: width 120ms ease, background 120ms ease;1425}14261427/* ── Type selector tabs ── */1428.peach-type-tabs {1429  display: flex;1430  gap: 0;1431  background: var(--peach-t4);1432  border-radius: 8px;1433  padding: 3px;1434}14351436.peach-type-tab {1437  flex: 1;1438  display: flex;1439  align-items: center;1440  justify-content: center;1441  gap: 6px;1442  padding: 6px 10px;1443  border-radius: 6px;1444  border: none;1445  background: transparent;1446  cursor: pointer;1447  font-family: Inter, system-ui, sans-serif;1448  font-size: 0.6875rem;1449  font-weight: 400;1450  letter-spacing: 0.04em;1451  color: var(--peach-t1);1452  transition: background 150ms ease, color 150ms ease;1453}14541455.peach-type-tab.is-active {1456  background: var(--peach-s2);1457  color: var(--peach-t0);1458  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1459}14601461.peach-type-tab:not(.is-active):hover {1462  color: var(--peach-t0);1463}14641465.peach-type-tab svg {1466  opacity: 0.7;1467  flex-shrink: 0;1468}14691470.peach-type-tab.is-active svg {1471  opacity: 1;1472}14731474/* ── List view ───────────────────────────────────────────────────────── */1475.peach-list-top {1476  padding: 0 10px;1477  min-height: 46px;1478  display: flex;1479  align-items: center;1480  gap: 6px;1481  border-bottom: 1px solid var(--peach-t3);1482  flex-shrink: 0;1483  background: var(--peach-s1);1484}14851486.peach-vault-list {1487  flex: 1;1488  overflow-y: auto;1489  scrollbar-width: none;1490}1491.peach-vault-list::-webkit-scrollbar { display: none; }14921493/* Scrollbar — vault list */1494.peach-vault-list {1495  scrollbar-width: thin;1496  scrollbar-color: var(--peach-t3) transparent;1497}14981499.peach-vault-list::-webkit-scrollbar {1500  width: 3px;1501}15021503.peach-vault-list::-webkit-scrollbar-thumb {1504  background: var(--peach-t3);1505  border-radius: 2px;1506}15071508.peach-entry-row {1509  width: 100%;1510  display: flex;1511  align-items: center;1512  gap: 10px;1513  padding: 9px 16px;1514  background: transparent;1515  border: none;1516  border-bottom: 1px solid var(--peach-t3);1517  cursor: pointer;1518  color: inherit;1519  text-align: left;1520  transition: background 80ms ease;1521}1522.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1523.peach-entry-row:last-child { border-bottom: none; }1524.peach-entry-row.is-active {1525  box-shadow: inset 2px 0 0 var(--peach-accent);1526  background: rgba(240,232,216,0.03);1527}1528.peach-entry-row:focus-visible {1529  outline: none;1530  box-shadow: 0 0 0 1px var(--peach-border-accent);1531  background: rgba(240,232,216,0.03);1532}1533.peach-entry-row-icon {1534  width: 26px; height: 26px;1535  border-radius: 7px;1536  border: 1px solid var(--peach-t3);1537  display: flex; align-items: center; justify-content: center;1538  color: var(--peach-t2);1539  flex-shrink: 0;1540}1541.peach-entry-row-icon.is-breach {1542  border-color: rgba(220,80,60,0.3);1543  color: rgba(220,80,60,0.7);1544}15451546/* Title-initials chip used as the favicon fallback for login entries whose1547 * real favicon hasn't been cached by the browser yet (freshly-imported,1548 * never-visited domains). Background colour is hashed from the title so1549 * the same entry always shows the same chip. The chip fits the same1550 * 26×26 row icon slot the favicon would take. */1551.peach-favicon-initials {1552  display: inline-flex;1553  align-items: center;1554  justify-content: center;1555  width: 100%;1556  height: 100%;1557  border-radius: 4px;1558  font-family: "IBM Plex Mono", monospace;1559  font-size: 0.5625rem;1560  font-weight: 600;1561  letter-spacing: 0.04em;1562  color: rgba(240, 232, 216, 0.92);1563  text-transform: uppercase;1564  user-select: none;1565}1566.peach-entry-row-info { flex: 1; min-width: 0; }1567.peach-entry-row-name {1568  display: block;1569  font-family: var(--font-display);1570  font-size: 1.0625rem;1571  font-style: italic;1572  font-weight: 400;1573  color: var(--peach-t0);1574  line-height: 1.2;1575  white-space: nowrap;1576  overflow: hidden;1577  text-overflow: ellipsis;1578}1579.peach-entry-row-meta {1580  display: block;1581  font-family: "IBM Plex Mono", monospace;1582  font-size: 0.5625rem;1583  color: var(--peach-t2);1584  margin-top: 1px;1585  letter-spacing: 0.05em;1586}1587.peach-entry-row-dot {1588  width: 5px; height: 5px;1589  border-radius: 50%;1590  background: rgba(220,80,60,0.7);1591  flex-shrink: 0;1592}1593.peach-new-entry-row {1594  display: flex;1595  align-items: center;1596  justify-content: center;1597  gap: 6px;1598  width: 100%;1599  padding: 11px;1600  background: transparent;1601  border: none;1602  border-top: 1px solid var(--peach-t3);1603  color: var(--peach-t2);1604  font-family: "IBM Plex Mono", monospace;1605  font-size: 0.5625rem;1606  text-transform: uppercase;1607  letter-spacing: 0.14em;1608  cursor: pointer;1609  flex-shrink: 0;1610  transition: color 120ms ease, background 120ms ease;1611}1612.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }16131614/* ── Multi-select mode ─────────────────────────────────────────────── */16151616/* Select-mode trigger button in sort bar — same shape as trash btn */1617.peach-sort-select-btn {1618  display: flex;1619  align-items: center;1620  justify-content: center;1621  padding: 3px 5px;1622  background: transparent;1623  border: none;1624  cursor: pointer;1625  color: var(--peach-t2);1626  border-radius: 4px;1627  transition: color 140ms ease, background 140ms ease;1628}1629.peach-sort-select-btn:hover {1630  color: var(--peach-t1);1631  background: var(--peach-t3);1632}16331634/* Sort bar in select mode */1635.peach-select-cancel-btn {1636  background: transparent;1637  border: none;1638  padding: 0 4px;1639  cursor: pointer;1640  font-family: "IBM Plex Mono", monospace;1641  font-size: 0.5625rem;1642  letter-spacing: 0.12em;1643  text-transform: uppercase;1644  color: var(--peach-t2);1645  transition: color 140ms ease;1646  flex-shrink: 0;1647}1648.peach-select-cancel-btn:hover { color: var(--peach-t0); }16491650.peach-select-count-label {1651  flex: 1;1652  text-align: center;1653  font-family: "IBM Plex Mono", monospace;1654  font-size: 0.5625rem;1655  letter-spacing: 0.14em;1656  text-transform: uppercase;1657  color: var(--peach-t1);1658}16591660.peach-select-all-btn {1661  background: transparent;1662  border: none;1663  padding: 0 4px;1664  cursor: pointer;1665  font-family: "IBM Plex Mono", monospace;1666  font-size: 0.5625rem;1667  letter-spacing: 0.12em;1668  text-transform: uppercase;1669  color: var(--peach-t2);1670  transition: color 140ms ease;1671  flex-shrink: 0;1672}1673.peach-select-all-btn:hover { color: var(--peach-accent); }16741675/* List in select mode */1676.peach-vault-list.is-selecting .peach-entry-row {1677  cursor: default;1678}1679.peach-vault-list.is-selecting .peach-entry-row:hover {1680  background: rgba(240,232,216,0.02);1681}1682.peach-vault-list.is-selecting .peach-entry-row.is-selected {1683  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1684}1685.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1686  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1687}16881689/* Select indicator circles in icon slot */1690.peach-entry-row-icon.is-select-icon {1691  color: var(--peach-t2);1692}1693.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1694  color: var(--peach-accent);1695}16961697/* Delete action bar at bottom (replaces new-entry row) */1698.peach-select-action-bar {1699  display: flex;1700  align-items: center;1701  justify-content: center;1702  gap: 7px;1703  width: 100%;1704  padding: 11px;1705  background: transparent;1706  border: none;1707  border-top: 1px solid var(--peach-t3);1708  color: var(--peach-t1);1709  font-family: "IBM Plex Mono", monospace;1710  font-size: 0.5625rem;1711  text-transform: uppercase;1712  letter-spacing: 0.14em;1713  cursor: pointer;1714  flex-shrink: 0;1715  transition: color 120ms ease, background 120ms ease;1716}1717.peach-select-action-bar:not(:disabled):hover {1718  color: var(--peach-t0);1719  background: rgba(220,80,60,0.06);1720}1721.peach-select-action-bar:not(:disabled):hover svg {1722  stroke: rgba(220,80,60,0.8);1723}1724.peach-select-action-bar:disabled,1725.peach-select-action-bar.is-empty {1726  color: var(--peach-t2);1727  cursor: default;1728  opacity: 0.5;1729}1730.peach-search-counter-list {1731  white-space: nowrap;1732  flex-shrink: 0;1733}1734.peach-list-empty {1735  min-height: 180px;1736  display: grid;1737  place-items: center;1738  color: var(--peach-t2);1739  font-family: "IBM Plex Mono", monospace;1740  font-size: 0.6875rem;1741}17421743/* ── Settings view ───────────────────────────────────────────────────── */1744.peach-settings-body {1745  flex: 1;1746  overflow-y: auto;1747  min-height: 0;1748  display: flex;1749  flex-direction: column;1750  padding: 2px 0 10px;1751}1752.peach-settings-group {1753  margin: 4px 10px;1754  padding: 9px 14px 11px;1755  border-radius: 12px;1756  border: 1px solid rgba(255, 255, 255, 0.07);1757  background: rgba(26, 20, 16, 0.60);1758  backdrop-filter: blur(10px) saturate(1.3);1759  -webkit-backdrop-filter: blur(10px) saturate(1.3);1760}17611762.peach-settings-group + .peach-settings-group {1763  margin-top: 6px;1764}17651766@supports not (backdrop-filter: blur(1px)) {1767  .peach-settings-group {1768    background: rgba(26, 20, 16, 0.90);1769    border-color: rgba(255, 255, 255, 0.09);1770    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1771  }1772}17731774.light .peach-settings-group,1775[data-theme="light"] .peach-settings-group {1776  background: rgba(245, 237, 226, 0.70);1777  border-color: rgba(26, 18, 8, 0.08);1778  backdrop-filter: blur(10px) saturate(1.2);1779  -webkit-backdrop-filter: blur(10px) saturate(1.2);1780}17811782@supports not (backdrop-filter: blur(1px)) {1783  .light .peach-settings-group,1784  [data-theme="light"] .peach-settings-group {1785    background: rgba(245, 237, 226, 0.97);1786    border-color: rgba(26, 18, 8, 0.10);1787  }1788}1789.peach-export-intro {1790  padding-bottom: 8px;1791}1792.peach-export-card {1793  display: grid;1794  gap: 10px;1795}1796.peach-rune-canvas {1797  border-radius: 8px;1798  background: rgba(0, 0, 0, 0.22);1799  flex: 1;1800  align-self: center;1801}1802.peach-script-input {1803  font-family: "PeachScript", monospace;1804  font-size: 0.6875rem;1805  line-height: 1.9;1806  letter-spacing: 0.06em;1807  color: var(--peach-t0);1808  background: rgba(0, 0, 0, 0.22);1809  border: none;1810  border-radius: 6px;1811  padding: 12px;1812  width: 100%;1813  min-height: 96px;1814  resize: vertical;1815  word-break: break-all;1816  scrollbar-width: none;1817  -ms-overflow-style: none;1818}18191820.peach-script-input::-webkit-scrollbar { display: none; }1821.peach-csv-warning {1822  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1823  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1824  color: var(--peach-t0);1825  border-radius: 6px;1826  padding: 10px 12px;1827  margin-bottom: 8px;1828  font-size: 0.75rem;1829  line-height: 1.45;1830}1831.peach-export-card--primary {1832  background:1833    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1834}18351836/* Export menu — distribute the three format cards across the popup. */1837.peach-export-menu {1838  display: flex;1839  flex-direction: column;1840  flex: 1;1841  min-height: 0;1842}1843.peach-export-menu .peach-settings-group {1844  flex: 1;1845  display: flex;1846  flex-direction: column;1847  justify-content: center;1848  gap: 10px;1849}18501851/* Result view — the script-string fills the remaining vertical surface. */1852.peach-export-result-group {1853  flex: 1;1854  display: flex;1855  flex-direction: column;1856  min-height: 0;1857  border-bottom: none;1858}1859.peach-export-result-group .peach-export-card {1860  flex: 1;1861  min-height: 0;1862  display: flex;1863  flex-direction: column;1864  gap: 10px;1865}1866.peach-export-result-group .peach-export-card-copy {1867  flex-shrink: 0;1868}1869.peach-export-result-group .peach-settings-label {1870  flex-shrink: 0;1871}1872.peach-export-result-group button {1873  flex-shrink: 0;1874}1875.peach-export-card-head {1876  display: flex;1877  align-items: center;1878  justify-content: space-between;1879  gap: 10px;1880}1881.peach-export-card-copy {1882  margin: 0;1883  font-size: 0.75rem;1884  line-height: 1.55;1885  color: var(--peach-t1);1886}1887.peach-export-note {1888  margin: 0;1889  font-size: 0.625rem;1890  line-height: 1.5;1891  color: var(--peach-t2);1892}1893.peach-export-strength-track {1894  height: 3px;1895  background: var(--peach-border);1896  border-radius: 2px;1897  margin: 4px 0 2px;1898  overflow: hidden;1899}1900.peach-export-strength-fill {1901  height: 100%;1902  border-radius: 2px;1903  transition: width 250ms ease, background 250ms ease;1904}1905.peach-export-strength-warn {1906  margin: 0;1907  font-size: 0.625rem;1908  line-height: 1.5;1909  color: #e84040;1910  font-family: "IBM Plex Mono", monospace;1911}1912.peach-export-strength-hint {1913  margin: 0;1914  font-size: 0.625rem;1915  line-height: 1.5;1916  color: var(--peach-t2);1917  font-family: "IBM Plex Mono", monospace;1918}1919.peach-export-pill {1920  display: inline-flex;1921  align-items: center;1922  padding: 4px 8px;1923  border-radius: 999px;1924  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1925  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1926  color: var(--peach-accent);1927  font-family: "IBM Plex Mono", monospace;1928  font-size: 0.5rem;1929  letter-spacing: 0.12em;1930  text-transform: uppercase;1931  white-space: nowrap;1932}1933.peach-export-pill--danger {1934  border-color: rgba(220,80,60,0.22);1935  background: rgba(220,80,60,0.08);1936  color: var(--peach-breach);1937}1938.peach-settings-label {1939  margin: 0 0 6px;1940  font-family: "IBM Plex Mono", monospace;1941  font-size: 0.5rem;1942  text-transform: uppercase;1943  letter-spacing: 0.18em;1944  color: var(--peach-t2);1945}1946.peach-settings-row {1947  display: flex;1948  align-items: center;1949  justify-content: space-between;1950  gap: 12px;1951  min-height: 34px;1952  padding: 6px 0;1953  font-size: 0.8125rem;1954  color: var(--peach-t1);1955}1956.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1957.peach-settings-value {1958  font-family: "IBM Plex Mono", monospace;1959  font-size: 0.625rem;1960  color: var(--peach-t2);1961}19621963.peach-settings-value--status {1964  display: flex;1965  align-items: center;1966  gap: 6px;1967}19681969.peach-settings-link {1970  font-family: "IBM Plex Mono", monospace;1971  font-size: 0.625rem;1972  color: var(--peach-accent);1973  text-decoration: none;1974  cursor: pointer;1975}1976.peach-settings-link:hover {1977  text-decoration: underline;1978}19791980.peach-settings-row--stack {1981  flex-direction: column;1982  align-items: stretch;1983  gap: 6px;1984}19851986.peach-settings-row--top {1987  align-items: flex-start;1988}19891990.peach-settings-row-main {1991  display: flex;1992  flex-direction: column;1993  gap: 4px;1994  flex: 1;1995}1996.peach-toggle {1997  width: 28px; height: 16px;1998  border-radius: 999px;1999  background: var(--peach-t3);2000  border: 1px solid var(--peach-t3);2001  display: flex; align-items: center; justify-content: flex-start; padding: 2px;2002  flex-shrink: 0;2003  transition: background 200ms ease, border-color 200ms ease;2004  cursor: pointer;2005}2006.peach-toggle.is-on {2007  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);2008  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2009}2010.peach-toggle-knob {2011  width: 10px; height: 10px;2012  border-radius: 50%;2013  background: var(--peach-t2);2014  flex-shrink: 0;2015  transform: translateX(0px);2016  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);2017}2018.peach-toggle.is-on .peach-toggle-knob {2019  background: var(--peach-accent);2020  transform: translateX(12px);2021}2022.peach-settings-footer {2023  display: flex;2024  align-items: center;2025  gap: 8px;2026  margin-top: auto;2027  padding: 14px 16px 8px;2028  font-family: "IBM Plex Mono", monospace;2029  font-size: 0.5625rem;2030  color: var(--peach-t2);2031}20322033/* ── Settings home navigation ──────────────────────────────────────────── */2034.peach-settings-nav-label {2035  margin: 0 0 2px;2036  padding: 12px 16px 4px;2037  font-family: "IBM Plex Mono", monospace;2038  font-size: 0.5rem;2039  text-transform: uppercase;2040  letter-spacing: 0.18em;2041  color: var(--peach-t2);2042}20432044.peach-settings-cat-row {2045  display: flex;2046  align-items: center;2047  gap: 10px;2048  width: 100%;2049  padding: 9px 16px;2050  background: none;2051  border: none;2052  border-bottom: 1px solid var(--peach-t3);2053  cursor: pointer;2054  text-align: left;2055  color: inherit;2056  transition: background var(--peach-dur-80) ease;2057}2058.peach-settings-cat-row:hover {2059  background: var(--peach-t3);2060}2061.peach-settings-cat-row:last-child {2062  border-bottom: none;2063}20642065.peach-settings-cat-icon {2066  width: 28px;2067  height: 28px;2068  border-radius: 7px;2069  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2070  color: var(--peach-accent);2071  display: flex;2072  align-items: center;2073  justify-content: center;2074  flex-shrink: 0;2075}2076/* Light theme: peach-on-cream is too low-contrast — both colors are warm.2077   Darken the icon stroke to ink and bump the bg tint so the icon reads2078   sharply while the cell still feels accent-tinted. */2079.light .peach-settings-cat-icon {2080  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);2081  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));2082}20832084.peach-settings-cat-content {2085  flex: 1;2086  display: flex;2087  flex-direction: column;2088  gap: 2px;2089  min-width: 0;2090}20912092.peach-settings-cat-name {2093  font-size: 0.8125rem;2094  font-weight: 450;2095  color: var(--peach-t0);2096  line-height: 1.2;2097}20982099.peach-settings-cat-desc {2100  font-size: 0.625rem;2101  color: var(--peach-t2);2102  line-height: 1.3;2103  white-space: nowrap;2104  overflow: hidden;2105  text-overflow: ellipsis;2106}21072108.peach-settings-cat-chevron {2109  color: var(--peach-t2);2110  flex-shrink: 0;2111  opacity: 0.5;2112}21132114/* ── Settings sub-view section labels ──────────────────────────────────── */2115.peach-settings-sub-label {2116  margin: 12px 0 4px;2117  font-family: "IBM Plex Mono", monospace;2118  font-size: 0.5rem;2119  text-transform: uppercase;2120  letter-spacing: 0.18em;2121  color: var(--peach-t2);2122}2123.peach-settings-sub-label:first-child {2124  margin-top: 4px;2125}21262127/* ── Settings: collapsible Advanced section ─────────────────────────────── */2128.peach-settings-advanced-toggle {2129  display: flex;2130  align-items: center;2131  justify-content: space-between;2132  width: 100%;2133  background: none;2134  border: none;2135  cursor: pointer;2136  padding: 12px 0 4px;2137  margin: 0;2138  color: inherit;2139}2140.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {2141  color: var(--peach-t1);2142}2143.peach-settings-advanced-chevron {2144  font-size: 0.5625rem;2145  color: var(--peach-t3);2146  letter-spacing: 0;2147  transition: color 120ms ease;2148}21492150/* ── Feedback form ──────────────────────────────────────────────────────── */2151.peach-feedback-group {2152  flex: 1;2153  display: flex;2154  flex-direction: column;2155  border-bottom: none;2156}21572158.peach-feedback-intro {2159  margin: 4px 0 14px;2160  font-size: 0.75rem;2161  line-height: 1.55;2162  color: var(--peach-t1);2163}21642165.peach-feedback-chips {2166  display: flex;2167  flex-wrap: wrap;2168  gap: 6px;2169  margin-bottom: 14px;2170}21712172.peach-feedback-chip {2173  padding: 4px 10px;2174  border-radius: 999px;2175  border: 1px solid var(--peach-t3);2176  background: none;2177  color: var(--peach-t2);2178  font-size: 0.6875rem;2179  font-family: var(--font-ui);2180  cursor: pointer;2181  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2182    background var(--peach-dur-80) ease;2183}2184.peach-feedback-chip:hover {2185  border-color: var(--peach-t2);2186  color: var(--peach-t1);2187}2188.peach-feedback-chip.is-active {2189  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);2190  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));2191  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);2192  box-shadow:2193    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),2194    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);2195  font-weight: 700;2196}21972198.peach-feedback-textarea {2199  flex: 1;2200  width: 100%;2201  min-height: 120px;2202  box-sizing: border-box;2203  background: rgba(0, 0, 0, 0.22);2204  border: 1px solid transparent;2205  border-radius: 6px;2206  color: var(--peach-t0);2207  font-size: 0.75rem;2208  font-family: var(--font-ui);2209  line-height: 1.5;2210  padding: 8px 10px;2211  resize: none;2212  outline: none;2213  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2214}2215.peach-feedback-textarea:focus {2216  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2217  background: rgba(0, 0, 0, 0.28);2218}2219.peach-feedback-textarea:focus {2220  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2221}2222.peach-feedback-textarea::placeholder {2223  color: var(--peach-t2);2224}22252226.peach-feedback-meta {2227  margin: 6px 0 0;2228  font-size: 0.625rem;2229  color: var(--peach-t2);2230  font-family: "IBM Plex Mono", monospace;2231}22322233.peach-feedback-result {2234  margin: 8px 0 0;2235  font-size: 0.6875rem;2236  font-family: "IBM Plex Mono", monospace;2237}2238.peach-feedback-result--ok { color: var(--peach-sync-ok); }2239.peach-feedback-result--err { color: var(--peach-breach); }22402241.peach-feedback-submit {2242  width: 100%;2243  margin-top: 12px;2244  justify-content: center;2245}22462247.peach-feedback-anon {2248  margin: 8px 0 0;2249  font-size: 0.625rem;2250  color: var(--peach-t2);2251  text-align: center;2252}22532254.peach-feedback-thanks {2255  margin: auto 0;2256  padding: 18px 14px;2257  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);2258  border-radius: 8px;2259  background:2260    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),2261    rgba(0, 0, 0, 0.18);2262  color: var(--peach-t1);2263  text-align: center;2264}22652266.peach-feedback-thanks p {2267  margin: 0;2268  font-size: 0.75rem;2269  line-height: 1.5;2270}22712272.peach-feedback-thanks-title {2273  color: var(--peach-t0);2274  font-family: "Cormorant Garamond", serif;2275  font-size: 1.375rem !important;2276  line-height: 1.1 !important;2277  margin-bottom: 8px !important;2278}22792280.peach-passkey-badge {2281  margin-left: 8px;2282  font-size: 0.625rem;2283  letter-spacing: 0.06em;2284  text-transform: uppercase;2285  color: var(--peach-t2);2286  font-family: var(--font-ui);2287  vertical-align: middle;2288}22892290.peach-passkey-delete-btn {2291  color: var(--peach-breach);2292  border-color: rgba(229, 85, 85, 0.25);2293}22942295.peach-passkey-delete-confirm {2296  display: flex;2297  align-items: center;2298  gap: 8px;2299  padding: 8px 10px;2300  background: rgba(229, 85, 85, 0.06);2301  border: 1px solid rgba(229, 85, 85, 0.2);2302  border-radius: 6px;2303}23042305.peach-passkey-delete-confirm-copy {2306  flex: 1;2307  font-size: 0.6875rem;2308  color: var(--peach-t1);2309}23102311.peach-passkey-delete-btn--confirm {2312  color: var(--peach-breach);2313  border-color: rgba(229, 85, 85, 0.4);2314}23152316.peach-passkey-activity {2317  flex-direction: column;2318  align-items: flex-start;2319  gap: 4px;2320}23212322.peach-passkey-meta {2323  font-size: 0.6875rem;2324  color: var(--peach-t2);2325}23262327.peach-passkey-actions {2328  position: relative;2329  z-index: 1;2330  margin-top: 14px;2331  display: flex;2332  flex-direction: column;2333  gap: 8px;2334}23352336.peach-passkey-approval {2337  display: flex;2338  flex-direction: column;2339  align-items: center;2340  padding: 16px 20px 14px;2341  gap: 8px;2342  text-align: center;2343}23442345.peach-passkey-approval-icon {2346  width: 36px;2347  height: 36px;2348  border-radius: 10px;2349  background: var(--peach-s2);2350  border: 1px solid var(--peach-t3);2351  display: flex;2352  align-items: center;2353  justify-content: center;2354  flex-shrink: 0;2355  color: var(--peach-accent);2356}23572358.peach-passkey-approval-icon img,2359.peach-passkey-approval-icon svg {2360  width: 22px;2361  height: 22px;2362  border-radius: 5px;2363}23642365.peach-passkey-approval-rp {2366  font-family: var(--font-ui);2367  font-size: 0.75rem;2368  color: var(--peach-t2);2369  letter-spacing: 0.03em;2370}23712372.peach-passkey-approval-action {2373  font-family: var(--font-display);2374  font-style: italic;2375  font-weight: 300;2376  font-size: 18px;2377  color: var(--peach-t0);2378  line-height: 1.1;2379  margin: 1px 0;2380}23812382.peach-passkey-approval-user {2383  font-family: var(--font-mono);2384  font-size: 0.6875rem;2385  color: var(--peach-t1);2386  background: var(--peach-s2);2387  border: 1px solid var(--peach-t3);2388  border-radius: 4px;2389  padding: 3px 8px;2390}23912392.peach-passkey-approval-notice {2393  font-size: 0.625rem;2394  color: var(--peach-t2);2395  line-height: 1.5;2396  max-width: 220px;2397}23982399.peach-passkey-approval-actions {2400  display: flex;2401  gap: 8px;2402  width: 100%;2403  margin-top: 6px;2404}24052406.peach-passkey-approval-actions .peach-btn {2407  flex: 1;2408}24092410/* ── Inline generator drawer ── */2411.peach-generator-drawer {2412  display: grid;2413  grid-template-rows: 0fr;2414  transition: grid-template-rows 320ms var(--peach-curve-arrival);2415  overflow: hidden;2416}2417.peach-generator-drawer.is-open {2418  grid-template-rows: 1fr;2419}2420.peach-generator-drawer-inner {2421  min-height: 0;2422  overflow: hidden;2423}2424.peach-generator-drawer-content {2425  border-top: 1px solid var(--peach-t3);2426  padding: 8px 0 4px;2427  display: flex;2428  flex-direction: column;2429  gap: 8px;2430}24312432/* ── Compact generator (inside entry edit) ── */2433.peach-generator-drawer-content--compact {2434  border-top: 1px solid var(--peach-t3);2435  padding: 8px 0 2px;2436  gap: 7px;2437}2438.peach-pwgen-compact-display-row {2439  display: flex;2440  align-items: center;2441  gap: 6px;2442}2443.peach-pwgen-compact-output {2444  flex: 1;2445  min-width: 0;2446  font-family: "IBM Plex Mono", monospace;2447  font-size: 0.6875rem;2448  font-weight: 400;2449  letter-spacing: 0.04em;2450  color: var(--peach-t0);2451  background: rgba(240, 232, 216, 0.04);2452  border: 1px solid var(--peach-t3);2453  border-radius: 5px;2454  padding: 5px 8px;2455  line-height: 1.5;2456  outline: none;2457  transition: border-color 120ms ease;2458}24592460.peach-pwgen-compact-output:focus {2461  border-color: var(--peach-t1);2462}2463.peach-pwgen-compact-controls {2464  display: flex;2465  align-items: center;2466  gap: 6px;2467}2468.peach-pwgen-compact-slider {2469  flex: 1;2470  min-width: 0;2471  height: 2px !important;2472}2473.peach-pwgen-compact-controls .peach-pwgen-len-num {2474  flex-shrink: 0;2475  min-width: 18px;2476  text-align: right;2477}2478.peach-pwgen-compact-pills {2479  display: flex;2480  gap: 3px;2481  flex-shrink: 0;2482}2483.peach-pwgen-compact-pills .peach-pwgen-pill {2484  padding: 2px 7px;2485  font-size: 0.5rem;2486}2487.peach-pwgen-compact-use {2488  flex-shrink: 0;2489  font-size: 0.625rem !important;2490  padding: 3px 9px !important;2491  min-height: 22px !important;2492  border-radius: 5px !important;2493}24942495/* ── Password edit row (input + eye toggle side-by-side) ── */2496.peach-password-edit-row {2497  display: flex;2498  align-items: center;2499  gap: 6px;2500}2501.peach-password-edit-row .peach-inline-input {2502  flex: 1;2503  min-width: 0;2504}25052506/* ── Generate toggle link ── */2507.peach-generate-toggle-link {2508  display: inline-flex;2509  align-items: center;2510  gap: 5px;2511  background: none;2512  border: none;2513  padding: 0;2514  cursor: pointer;2515  font-family: "IBM Plex Mono", monospace;2516  font-size: 0.625rem;2517  color: var(--peach-t2);2518  letter-spacing: 0.04em;2519  transition: color 120ms ease;2520  align-self: flex-start;2521}2522.peach-generate-toggle-link:hover {2523  color: var(--peach-accent);2524}25252526/* Holds the generate + history toggle links on one row under the editor. */2527.peach-password-edit-links {2528  display: flex;2529  align-items: center;2530  gap: 14px;2531  flex-wrap: wrap;2532}25332534/* ── Past-password history list ── */2535.peach-password-history {2536  display: grid;2537  gap: 4px;2538  margin-top: 2px;2539  max-height: 168px;2540  overflow-y: auto;2541  scrollbar-width: thin;2542}2543.peach-history-row {2544  display: flex;2545  align-items: center;2546  justify-content: space-between;2547  gap: 8px;2548  padding: 5px 7px;2549  border-radius: 7px;2550  background: color-mix(in srgb, var(--peach-accent) 5%, transparent);2551  border: 1px solid color-mix(in srgb, var(--peach-accent) 9%, transparent);2552}2553.peach-history-main {2554  display: flex;2555  flex-direction: column;2556  gap: 1px;2557  min-width: 0;2558  flex: 1;2559}2560.peach-history-pw {2561  font-family: "IBM Plex Mono", monospace;2562  font-size: 0.6875rem;2563  color: var(--peach-t1);2564  white-space: nowrap;2565  overflow: hidden;2566  text-overflow: ellipsis;2567}2568.peach-history-pw .peach-password-mask {2569  letter-spacing: 0.08em;2570  color: var(--peach-t2);2571}2572.peach-history-age {2573  font-family: "IBM Plex Mono", monospace;2574  font-size: 0.5625rem;2575  color: var(--peach-t3, var(--peach-t2));2576  letter-spacing: 0.03em;2577}2578.peach-history-actions {2579  display: flex;2580  align-items: center;2581  gap: 2px;2582  flex-shrink: 0;2583}2584.peach-history-use {2585  font-family: "IBM Plex Mono", monospace;2586  font-size: 0.5625rem;2587  letter-spacing: 0.05em;2588  padding: 3px 7px;2589}2590.peach-history-empty {2591  font-family: "IBM Plex Mono", monospace;2592  font-size: 0.625rem;2593  line-height: 1.45;2594  color: var(--peach-t2);2595  padding: 6px 8px;2596  border-radius: 7px;2597  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);2598  border: 1px solid color-mix(in srgb, var(--peach-accent) 8%, transparent);2599}26002601/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2602.peach-entry-body {2603  flex: 1;2604  overflow-y: auto;2605  overflow-x: hidden;2606  scrollbar-width: none;2607  -ms-overflow-style: none;2608  overscroll-behavior: contain;2609  display: grid;2610  gap: 10px;2611  align-content: start;2612  padding: 10px 20px 14px;2613  min-width: 0;2614  min-height: 0;2615}2616.peach-entry-body::-webkit-scrollbar { display: none; }26172618/* Type-toggle pills + inline note toolbar */2619.peach-new-type-row {2620  display: flex;2621  align-items: center;2622  gap: 6px;2623  margin-bottom: 2px;2624}2625.peach-new-type-btn {2626  background: transparent;2627  border: 1px solid var(--peach-t3);2628  border-radius: 12px;2629  padding: 3px 10px;2630  font-family: "IBM Plex Mono", monospace;2631  font-size: 0.5625rem;2632  letter-spacing: 0.12em;2633  text-transform: uppercase;2634  color: var(--peach-t2);2635  cursor: pointer;2636  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2637}2638.peach-new-type-btn.is-active {2639  color: var(--peach-t0);2640  border-color: var(--peach-accent);2641  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2642}2643.peach-new-type-btn:not(.is-active):hover {2644  color: var(--peach-t1);2645  border-color: var(--peach-t2);2646}26472648/* Editable title */2649.peach-new-title-wrap { margin: 0 0 2px; }2650.peach-new-title-input {2651  background: transparent;2652  border: none;2653  outline: none;2654  width: 100%;2655  color: var(--peach-t0);2656  font-family: var(--font-display);2657  font-style: italic;2658  font-weight: 400;2659  font-size: 40px;2660  line-height: 0.95;2661  caret-color: var(--peach-accent);2662}2663.peach-new-title-input::placeholder { color: var(--peach-t2); }26642665/* Editable domain field */2666.peach-domain-edit-row {2667  display: flex;2668  align-items: center;2669  gap: 6px;2670}26712672.peach-domain-edit-row .peach-domain-value--edit {2673  flex: 1;2674  width: 0;2675}26762677.peach-domain-url-btn {2678  flex-shrink: 0;2679  background: transparent;2680  border: none;2681  cursor: pointer;2682  color: var(--peach-t3);2683  padding: 2px 3px;2684  display: flex;2685  align-items: center;2686  line-height: 0;2687  border-radius: 3px;2688  transition: color 120ms ease;2689}26902691.peach-domain-url-btn:hover {2692  color: var(--peach-accent);2693}26942695.peach-domain-value--edit {2696  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2697  font-size: 0.625rem;2698  font-style: italic;2699  letter-spacing: 0.12em;2700  color: var(--peach-t1);2701  background: transparent;2702  border: none;2703  border-bottom: 1px solid var(--peach-t3);2704  outline: none;2705  width: 100%;2706  padding: 2px 0;2707  caret-color: var(--peach-accent);2708  transition: border-color 140ms ease, color 140ms ease;2709}2710.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2711.peach-domain-value--edit:focus {2712  border-bottom-color: rgba(240, 232, 216, 0.28);2713  color: var(--peach-t0);2714}27152716/* Editable field values (username, password, totp) */2717.peach-field-value--edit {2718  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2719  font-size: 0.8125rem;2720  color: var(--peach-t0);2721  background: transparent;2722  border: none;2723  border-bottom: 1px solid var(--peach-t3);2724  outline: none;2725  flex: 1;2726  min-width: 0;2727  padding: 3px 0;2728  caret-color: var(--peach-accent);2729  transition: border-color 140ms ease, color 140ms ease;2730}2731.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2732.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2733.peach-field-value--edit:focus {2734  border-bottom-color: rgba(240, 232, 216, 0.28);2735  color: var(--peach-t0);2736}27372738/* "+ add optional field" links */2739.peach-entry-add-links {2740  display: flex;2741  gap: 12px;2742  flex-wrap: wrap;2743  margin-top: -2px;2744}2745.peach-add-field-link {2746  background: transparent;2747  border: none;2748  padding: 0;2749  cursor: pointer;2750  font-family: "IBM Plex Mono", monospace;2751  font-size: 0.5625rem;2752  letter-spacing: 0.1em;2753  text-transform: uppercase;2754  color: var(--peach-t2);2755  transition: color 140ms ease;2756}2757.peach-add-field-link:hover { color: var(--peach-accent); }27582759/* ── New entry form (legacy classes) ────────────────────────────────── */2760.peach-new-body {2761  flex: 1;2762  overflow-y: auto;2763  padding: 10px 20px 14px;2764}2765.peach-new-name-input {2766  background: transparent;2767  border: none;2768  outline: none;2769  width: 100%;2770  color: var(--peach-t0);2771  font-family: var(--font-display);2772  font-style: italic;2773  font-weight: 400;2774  font-size: 40px;2775  line-height: 0.95;2776  caret-color: var(--peach-accent);2777}2778.peach-new-name-input::placeholder { color: var(--peach-t2); }2779.peach-new-field-input {2780  background: transparent;2781  border: none;2782  outline: none;2783  flex: 1;2784  min-width: 0;2785  caret-color: var(--peach-accent);2786}2787.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }27882789/* ── Canary card ── */2790.peach-canary-card {2791  border: 1px solid rgba(217, 160, 48, 0.2);2792  background: rgba(217, 160, 48, 0.03);2793  border-radius: 8px;2794  padding: 12px;2795}27962797.peach-canary-settings-header {2798  display: flex;2799  align-items: center;2800  justify-content: space-between;2801  cursor: pointer;2802  user-select: none;2803}28042805.peach-canary-card .peach-label {2806  color: rgba(217, 160, 48, 0.85);2807}28082809.peach-canary-card .peach-new-field-input {2810  border-color: rgba(217, 160, 48, 0.25);2811}28122813.peach-canary-card .peach-new-field-input:focus {2814  border-color: rgba(217, 160, 48, 0.5);2815}28162817.peach-canary-body {2818  margin-top: 12px;2819  display: flex;2820  flex-direction: column;2821  gap: 10px;2822}28232824.peach-canary-explainer {2825  display: flex;2826  gap: 10px;2827  padding: 10px 12px;2828  border-radius: 10px;2829  background: rgba(217, 160, 48, 0.06);2830  border: 1px solid rgba(217, 160, 48, 0.22);2831  margin-bottom: 4px;2832}28332834.peach-canary-explainer-icon {2835  font-size: 1rem;2836  flex-shrink: 0;2837  line-height: 1.2;2838}28392840.peach-canary-explainer-title {2841  font-family: var(--font-ui);2842  font-size: 0.6875rem;2843  font-weight: 500;2844  color: rgba(217, 160, 48, 0.9);2845  margin: 0 0 3px;2846}28472848.peach-canary-explainer-copy {2849  font-family: var(--font-ui);2850  font-size: 0.625rem;2851  color: var(--peach-t2);2852  line-height: 1.55;2853  margin: 0;2854}28552856.peach-canary-hint {2857  font-size: 0.625rem;2858  color: var(--peach-t2);2859  font-family: Inter, system-ui, sans-serif;2860  line-height: 1.5;2861  margin-top: 4px;2862}28632864.peach-canary-actions-row {2865  display: flex;2866  align-items: center;2867  gap: 8px;2868}28692870.peach-canary-test-btn {2871  border-color: rgba(217, 160, 48, 0.3);2872  color: rgba(217, 160, 48, 0.85);2873}28742875.peach-canary-test-result {2876  font-size: 0.625rem;2877  font-family: Inter, system-ui, sans-serif;2878}28792880.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2881.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }28822883.peach-canary-badge {2884  display: flex;2885  position: relative;2886  z-index: 1;2887  align-items: center;2888  gap: 5px;2889  padding: 4px 10px;2890  background: rgba(217, 160, 48, 0.12);2891  border: 1px solid rgba(217, 160, 48, 0.35);2892  border-radius: 6px;2893  margin-bottom: 6px;2894  width: fit-content;2895}28962897.peach-canary-badge-label {2898  font-size: 0.625rem;2899  letter-spacing: 0.06em;2900  color: rgba(217, 160, 48, 0.9);2901  font-family: var(--font-ui);2902  text-transform: uppercase;2903}29042905.peach-canary-badge-icon {2906  font-size: 0.6875rem;2907}29082909.peach-canary-suppress-row {2910  display: flex;2911  align-items: center;2912  gap: 8px;2913  padding: 6px 10px;2914  background: rgba(217, 160, 48, 0.08);2915  border-radius: 6px;2916  margin-bottom: 8px;2917}29182919.peach-canary-suppress-label {2920  font-size: 0.6875rem;2921  color: rgba(217, 160, 48, 0.85);2922  cursor: pointer;2923  font-family: var(--font-ui);2924  letter-spacing: 0.04em;2925}29262927.peach-regen-panel {2928  position: relative;2929  z-index: 1;2930  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2931  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2932  border-radius: 8px;2933  padding: 12px;2934  margin-bottom: 8px;2935}29362937.peach-regen-panel-header {2938  display: flex;2939  align-items: center;2940  justify-content: space-between;2941  margin-bottom: 10px;2942}29432944.peach-regen-panel-title {2945  font-size: 0.6875rem;2946  font-weight: 600;2947  letter-spacing: 0.06em;2948  text-transform: uppercase;2949  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2950}29512952.peach-regen-output {2953  background: rgba(0, 0, 0, 0.2);2954  border-radius: 6px;2955  padding: 10px;2956  margin-bottom: 10px;2957  font-family: var(--font-mono);2958  font-size: 0.8125rem;2959  word-break: break-all;2960  color: var(--peach-t1);2961}29622963.peach-regen-actions {2964  display: flex;2965  gap: 6px;2966}29672968.peach-regen-actions--spaced {2969  margin-bottom: 8px;2970}29712972.peach-regen-action-grow {2973  flex: 1;2974}29752976.peach-regen-copy-btn {2977  padding: 0 8px;2978}29792980.peach-regen-success {2981  position: relative;2982  z-index: 1;2983  background: rgba(40, 180, 80, 0.1);2984  border: 1px solid rgba(40, 180, 80, 0.3);2985  border-radius: 8px;2986  padding: 10px 12px;2987  margin-bottom: 8px;2988  display: flex;2989  align-items: center;2990  gap: 8px;2991  font-size: 0.6875rem;2992  color: rgba(40, 180, 80, 0.9);2993}29942995/* ── Note editor overlay ── */2996.peach-note-editor {2997  position: absolute;2998  inset: 0;2999  z-index: 200;3000  display: flex;3001  flex-direction: column;3002  background:3003    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),3004    var(--peach-bg);3005  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;3006}30073008.peach-note-editor-header {3009  display: flex;3010  align-items: center;3011  gap: 10px;3012  padding: 14px 16px 10px;3013  border-bottom: 1px solid var(--peach-t3);3014  flex-shrink: 0;3015}30163017.peach-note-editor-back {3018  background: transparent;3019  border: none;3020  cursor: pointer;3021  color: var(--peach-t2);3022  padding: 4px 6px;3023  border-radius: 6px;3024  display: flex;3025  align-items: center;3026  transition: color 120ms ease, background 120ms ease;3027  flex-shrink: 0;3028}3029.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }30303031.peach-note-editor-label {3032  flex: 1;3033  font-family: var(--font-display);3034  font-style: italic;3035  font-size: 0.9375rem;3036  color: var(--peach-t1);3037  letter-spacing: 0.02em;3038}30393040.peach-note-editor-save-btn {3041  background: transparent;3042  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);3043  border-radius: 8px;3044  color: var(--peach-accent);3045  font-family: "IBM Plex Mono", monospace;3046  font-size: 0.625rem;3047  letter-spacing: 0.06em;3048  text-transform: uppercase;3049  padding: 3px 10px;3050  cursor: pointer;3051  transition: background 120ms ease, border-color 120ms ease;3052}3053.peach-note-editor-save-btn:hover:not(:disabled) {3054  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3055  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3056}3057.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }30583059.peach-note-toolbar {3060  display: flex;3061  align-items: center;3062  gap: 3px;3063  padding: 6px 14px 5px;3064  border-bottom: 1px solid var(--peach-t3);3065  flex-shrink: 0;3066}30673068.peach-note-tool-btn {3069  background: transparent;3070  border: 1px solid transparent;3071  border-radius: 5px;3072  color: var(--peach-t2);3073  font-family: "IBM Plex Mono", monospace;3074  font-size: 0.625rem;3075  letter-spacing: 0.04em;3076  padding: 2px 8px;3077  cursor: pointer;3078  line-height: 1.6;3079  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;3080}3081.peach-note-tool-btn:hover {3082  background: var(--peach-t4);3083  color: var(--peach-t0);3084  border-color: var(--peach-t3);3085}30863087.peach-note-tool-icon {3088  padding: 3px 7px;3089  display: inline-flex;3090  align-items: center;3091  justify-content: center;3092}30933094.peach-note-tool-divider {3095  width: 1px;3096  height: 14px;3097  background: var(--peach-t3);3098  margin: 0 4px;3099  flex-shrink: 0;3100}31013102.peach-note-editor-body {3103  flex: 1;3104  overflow-y: auto;3105  padding: 16px 20px 20px;3106  outline: none;3107  font-family: var(--font-display);3108  font-size: 1rem;3109  line-height: 1.75;3110  color: var(--peach-t0);3111  scrollbar-width: none;3112  word-break: break-word;3113}3114.peach-note-editor-body:empty::before {3115  content: "write your note…";3116  color: var(--peach-t3);3117  font-style: italic;3118  pointer-events: none;3119}31203121/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */3122.peach-note-editor-inline {3123  display: flex;3124  flex-direction: column;3125  flex: 1;3126  min-height: 0;3127}3128.peach-note-editor-body--inline {3129  flex: 1;3130  min-height: 0;3131  font-size: 0.9375rem;3132  padding: 10px 20px 14px;3133}31343135/* Full-width toolbar row inside the body (Add.tsx note type).3136   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */3137.peach-note-toolbar-body {3138  display: flex;3139  align-items: center;3140  gap: 3px;3141  padding: 5px 20px 4px;3142  margin: 2px -20px 0;3143  border-bottom: 1px solid var(--peach-t3);3144  flex-shrink: 0;3145}31463147/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)3148   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn3149   and .peach-note-tool-divider button-level styles. */3150.peach-note-toolbar-inline {3151  display: flex;3152  align-items: center;3153  gap: 3px;3154  margin-left: auto;3155  padding-left: 10px;3156  border-left: 1px solid var(--peach-t3);3157  min-height: 22px;3158}31593160/* Entry.tsx toolbar row (no tabs, toolbar only) */3161.peach-entry-note-toolbar-row {3162  display: flex;3163  align-items: center;3164  margin: 4px 0 6px;3165  position: relative;3166  z-index: 1;3167}3168.peach-entry-note-toolbar-row .peach-note-toolbar-inline {3169  border-left: none;3170  padding-left: 0;3171  margin-left: 0;3172}31733174/* Note body — fills available vertical space in Add.tsx and Entry.tsx */3175.peach-note-body {3176  display: flex;3177  flex-direction: column;3178  flex: 1;3179  min-height: 0;3180  margin: 4px 0 0;3181}3182.peach-entry-body--new .peach-note-body {3183  margin: 8px -20px 0;3184}31853186/* Add.tsx body is a grid by default; swap to a flex column when a note is3187   active so the note body can stretch and pin the tags row to the bottom. */3188.peach-entry-body--new:has(.peach-note-body) {3189  display: flex;3190  flex-direction: column;3191}31923193/* Rich content element styles (editor + display) */3194.peach-note-editor-body h2,3195.peach-note-content h2 {3196  font-family: var(--font-display);3197  font-size: 20px;3198  font-weight: 600;3199  font-style: italic;3200  color: var(--peach-t0);3201  margin: 6px 0 2px;3202  line-height: 1.3;3203}3204.peach-note-editor-body ul,3205.peach-note-content ul {3206  padding-left: 18px;3207  margin: 3px 0;3208  list-style: disc;3209}3210.peach-note-editor-body ol,3211.peach-note-content ol {3212  padding-left: 18px;3213  margin: 3px 0;3214  list-style: decimal;3215}3216.peach-note-editor-body li,3217.peach-note-content li { margin: 2px 0; }3218.peach-note-editor-body hr,3219.peach-note-content hr {3220  border: none;3221  border-top: 1px solid var(--peach-t3);3222  margin: 10px 0;3223}32243225/* font size elements from execCommand */3226.peach-note-editor-body font[size="1"],3227.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }3228.peach-note-editor-body font[size="2"],3229.peach-note-content font[size="2"] { font-size: 0.8125rem; }3230.peach-note-editor-body font[size="3"],3231.peach-note-content font[size="3"] { font-size: 1rem; }3232.peach-note-editor-body font[size="4"],3233.peach-note-content font[size="4"] { font-size: 20px; }3234.peach-note-editor-body font[size="5"],3235.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }32363237/* bold / italic inside the editor and note display */3238.peach-note-editor-body b, .peach-note-editor-body strong,3239.peach-note-content b, .peach-note-content strong { font-weight: 700; }3240.peach-note-editor-body em, .peach-note-editor-body i,3241.peach-note-content em, .peach-note-content i { font-style: italic; }32423243/* note display — rendered HTML, no pre-wrap */3244.peach-note-content {3245  overflow: auto;3246  max-height: 340px;3247  word-break: break-word;3248}32493250/* ── Note textarea ── */3251.peach-note-textarea {3252  width: 100%;3253  min-height: 180px;3254  max-height: 280px;3255  resize: vertical;3256  background: var(--peach-t4);3257  border: 1px solid var(--peach-t3);3258  border-radius: 8px;3259  padding: 10px 12px;3260  font-family: "IBM Plex Mono", monospace;3261  font-size: 0.75rem;3262  line-height: 1.7;3263  color: var(--peach-t1);3264  outline: none;3265  transition: border-color 150ms ease;3266}32673268.peach-note-textarea:focus {3269  border-color: var(--peach-t2);3270}32713272.peach-note-char-count {3273  font-family: "IBM Plex Mono", monospace;3274  font-size: 0.5625rem;3275  color: var(--peach-t3);3276  text-align: right;3277  margin-top: 4px;3278  letter-spacing: 0.1em;3279}32803281/* ── Field input baseline ── */3282.peach-new-field-input {3283  width: 100%;3284  background: transparent;3285  border: none;3286  border-bottom: 1px solid var(--peach-t3);3287  padding: 4px 0;3288  color: var(--peach-t1);3289  font-family: "IBM Plex Mono", monospace;3290  font-size: 0.8125rem;3291  outline: none;3292  transition: border-color 150ms ease;3293}32943295.peach-new-field-input:focus {3296  border-bottom-color: var(--peach-t0);3297  color: var(--peach-t0);3298}32993300.peach-new-name-input {3301  width: 100%;3302  background: transparent;3303  border: none;3304  border-bottom: 1px solid var(--peach-t3);3305  padding: 6px 0;3306  font-family: var(--font-display);3307  font-style: italic;3308  font-size: 28px;3309  color: var(--peach-t0);3310  outline: none;3311  transition: border-color 150ms ease;3312}33133314.peach-new-name-input:focus {3315  border-bottom-color: var(--peach-t1);3316}33173318.peach-new-name-input::placeholder {3319  color: var(--peach-t2);3320  font-style: italic;3321}33223323.peach-new-field-input::placeholder {3324  color: var(--peach-t3);3325}33263327/* ── Demo entrance animation ── */3328#hd-shell {3329  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3330}3331@keyframes hd-shell-enter {3332  from { opacity: 0; transform: scale(0.96) translateY(16px); }3333  to   { opacity: 1; transform: scale(1) translateY(0); }3334}33353336/* ── Keyframes ── */3337@keyframes peach-char-enter {3338  from { opacity: 0; transform: translateY(0.22em); }3339  to   { opacity: 1; transform: translateY(0); }3340}3341@keyframes peach-content-enter {3342  from { opacity: 0.96; transform: translateY(4px); }3343  to   { opacity: 1; transform: translateY(0); }3344}3345@keyframes peach-content-exit {3346  from { opacity: 1; transform: translateY(0); }3347  to   { opacity: 0.92; transform: translateY(-3px); }3348}3349@keyframes peach-screen-enter {3350  from { opacity: 0; transform: translateY(14px); }3351  to   { opacity: 1; transform: translateY(0); }3352}3353@keyframes peach-shell-fade-in {3354  from { opacity: 0; }3355  to   { opacity: 1; }3356}3357@keyframes peach-veil-in {3358  from { opacity: 0; }3359  to   { opacity: 1; }3360}3361@keyframes peach-lock-settle {3362  0%   { transform: scale(0.9); }3363  65%  { transform: scale(1.08); }3364  100% { transform: scale(1); }3365}3366@keyframes peach-copy-confirm {3367  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3368  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); }3369}3370@keyframes peach-copy-retreat {3371  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); }3372  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3373}3374@keyframes peach-copy-flood {3375  from { opacity: 0; transform: scaleX(0.15); }3376  to   { opacity: 1; transform: scaleX(1); }3377}3378@keyframes peach-copy-icon-settle {3379  from  { transform: scale(0.84); }3380  70%   { transform: scale(1.08); }3381  to    { transform: scale(1); }3382}3383@keyframes peach-copy-sheen-retreat {3384  from { opacity: 1; transform: scaleX(1); }3385  to   { opacity: 0; transform: scaleX(0.15); }3386}3387@keyframes peach-copy-drain {3388  from { width: 100%; }3389  to   { width: 0; }3390}3391@keyframes peach-shake {3392  0%, 100% { transform: translateX(0); }3393  20%      { transform: translateX(-6px); }3394  40%      { transform: translateX(6px); }3395  60%      { transform: translateX(-4px); }3396  80%      { transform: translateX(4px); }3397}33983399@keyframes pip-pulse {3400  0% { transform: scale(1); }3401  40% { transform: scale(2.2); }3402  100% { transform: scale(1); }3403}340434053406/* ── Password generator ── */3407.peach-pwgen-body {3408  flex: 1; overflow-y: auto;3409  display: flex; flex-direction: column;3410}3411.peach-policy-badge {3412  display: flex; align-items: center;3413  padding: 6px 20px 0;3414  font-size: 0.625rem; font-family: Inter, sans-serif;3415  color: var(--peach-t2); letter-spacing: 0.04em;3416}3417.peach-pwgen-display {3418  padding: 14px 20px 12px;3419  border-bottom: 1px solid var(--peach-t3);3420  display: flex; align-items: flex-start; gap: 10px;3421}3422.peach-pwgen-display-row {3423  display: flex;3424  align-items: flex-start;3425  gap: 8px;3426  padding-bottom: 8px;3427  border-bottom: 1px solid var(--peach-t3);3428}3429.peach-pwgen-output {3430  flex: 1; min-width: 0; margin: 0;3431  font-family: "IBM Plex Mono", monospace;3432  font-size: 0.8125rem; color: var(--peach-t0);3433  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3434  white-space: normal;3435  padding: 10px 12px;3436  background: var(--peach-t4);3437  border-radius: 6px;3438  min-height: 36px;3439}3440.peach-pwgen-output-display {3441  flex: 1;3442  min-width: 0;3443  margin: 0;3444  font-family: var(--font-display);3445  font-style: italic;3446  font-weight: 300;3447  font-size: 32px;3448  line-height: 1.05;3449  color: var(--peach-t0);3450  word-break: break-all;3451  overflow-wrap: break-word;3452  white-space: normal;3453  letter-spacing: 0.02em;3454}3455.peach-pwgen-display-actions {3456  display: flex;3457  flex-direction: column;3458  gap: 4px;3459  flex-shrink: 0;3460  margin-top: 2px;3461}3462.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3463.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3464.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3465.peach-pwgen-len-num {3466  font-family: "IBM Plex Mono", monospace;3467  font-size: 0.75rem; color: var(--peach-accent);3468}3469.peach-pwgen-len-num--edit {3470  cursor: text;3471  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3472}3473.peach-pwgen-len-input {3474  font-family: "IBM Plex Mono", monospace;3475  font-size: 0.75rem;3476  color: var(--peach-accent);3477  background: transparent;3478  border: none;3479  border-bottom: 1px solid var(--peach-accent);3480  outline: none;3481  width: 32px;3482  text-align: right;3483  padding: 0;3484}3485.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3486.peach-pwgen-toggles { display: flex; flex-direction: column; }3487.peach-pwgen-charset-pills {3488  display: flex;3489  gap: 6px;3490  flex-wrap: wrap;3491}3492.peach-pwgen-pill {3493  padding: 4px 11px;3494  border-radius: 999px;3495  border: 1px solid var(--peach-t3);3496  background: transparent;3497  color: var(--peach-t2);3498  font-family: "IBM Plex Mono", monospace;3499  font-size: 0.5625rem;3500  letter-spacing: 0.08em;3501  cursor: pointer;3502  transition: all 150ms ease;3503}3504.peach-pwgen-pill.is-on {3505  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3506  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3507  color: var(--peach-accent);3508}3509.peach-pwgen-pill:not(.is-on):hover {3510  color: var(--peach-t1);3511  border-color: var(--peach-t2);3512}3513.peach-pwgen-use-btn {3514  width: 100%;3515  min-height: 34px;3516  border-radius: 8px;3517  margin-top: 2px;3518}3519.peach-generator-constraint-note {3520  font-family: 'IBM Plex Mono', monospace;3521  font-size: 10px;3522  color: var(--peach-t3);3523  letter-spacing: 0.04em;3524  margin: 0;3525  transition: opacity 200ms ease;3526}3527.peach-pwgen-toggle-row {3528  display: flex; align-items: center; justify-content: space-between;3529  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3530}3531.peach-pwgen-toggle-row:last-child { border-bottom: none; }3532.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }35333534/* Peach popup should not expose native scrollbars on internal panels. */3535.peach-settings-body,3536.peach-new-body,3537.peach-pwgen-body,3538.lock-screen,3539.peach-import-preview {3540  scrollbar-width: none;3541  -ms-overflow-style: none;3542  overscroll-behavior: contain;3543}3544.peach-settings-body::-webkit-scrollbar,3545.peach-new-body::-webkit-scrollbar,3546.peach-pwgen-body::-webkit-scrollbar,3547.lock-screen::-webkit-scrollbar,3548.peach-import-preview::-webkit-scrollbar {3549  width: 0;3550  height: 0;3551  display: none;3552}35533554.lock-screen {3555  height: 100%;3556  min-height: 100%;3557  overflow-y: auto;3558  padding: 18px 18px 16px;3559  gap: 14px;3560  grid-template-rows: auto auto auto 1fr auto;3561  align-content: stretch;3562  position: relative;3563  isolation: isolate;3564}3565.peach-screen.lock-screen--vault-stage {3566  display: flex;3567  flex-direction: column;3568  justify-content: flex-start;3569  gap: 18px;3570  padding: 20px 18px 18px;3571  overflow: hidden;3572}3573.peach-screen.lock-screen--vault-stage .peach-lock-panel {3574  margin-top: 0;3575}3576.lock-screen--onboarding {3577  display: flex;3578  flex-direction: column;3579  gap: 12px;3580  justify-content: flex-start;3581}35823583.lock-screen::before {3584  content: "";3585  position: absolute;3586  inset: 12px 18px auto auto;3587  width: 160px;3588  height: 160px;3589  border-radius: 999px;3590  background:3591    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%);3592  filter: blur(6px);3593  opacity: 0.7;3594  pointer-events: none;3595  z-index: 0;3596}35973598.peach-lock-rune-string {3599  flex: 1;3600  display: flex;3601  align-items: center;3602  justify-content: center;3603  gap: 6px;3604  font-family: PeachScript, monospace;3605  font-size: 0.8125rem;3606  letter-spacing: 0.05em;3607  pointer-events: none;3608  user-select: none;3609  position: relative;3610  z-index: 1;3611}36123613.peach-lock-rune-string span {3614  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3615  text-shadow:3616    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3617    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3618  transition: color 0.9s ease, text-shadow 0.9s ease;3619}36203621.peach-lock-rune-string span.is-glowing {3622  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3623  text-shadow:3624    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3625    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3626}36273628.lock-screen-header {3629  display: flex;3630  align-items: center;3631  justify-content: space-between;3632  position: relative;3633  z-index: 1;3634}36353636.lock-password-input.shake {3637  animation: peach-shake 300ms ease-in-out;3638}36393640.peach-hint-error {3641  color: rgba(220, 80, 60, 0.92);3642}36433644.peach-onboarding-headline {3645  margin: 0;3646  font-family: var(--font-display);3647  font-size: 35px;3648  line-height: 0.88;3649  font-style: italic;3650  font-weight: 400;3651  max-width: 252px;3652}36533654.peach-lock-copy {3655  display: grid;3656  gap: 8px;3657  position: relative;3658  z-index: 1;3659}36603661.peach-lock-copy--onboarding {3662  gap: 10px;3663}36643665.peach-lock-hero {3666  position: relative;3667  z-index: 1;3668  display: grid;3669  gap: 8px;3670  min-height: 0;3671  padding: 4px 2px 0;3672  border: none;3673  border-radius: 0;3674  background: transparent;3675  box-shadow: none;3676}3677.peach-lock-hero-art {3678  position: absolute;3679  right: -8px;3680  top: -6px;3681  width: 120px;3682  height: 120px;3683  display: flex;3684  align-items: center;3685  justify-content: center;3686  pointer-events: none;3687  opacity: 0.12;3688  filter: saturate(0.9);3689}3690.peach-lock-hero-mark {3691  width: 100%;3692  height: 100%;3693}3694/* Peach body stays brand-peach across every accent — we don't want a3695   green or blue peach when sage/sky is selected. Leaf + vein keep the3696   sage tint because a real peach has a sage leaf. In the new brand-kit3697   mark the leaf is path 1 and the vein stroke is path 2; the body and3698   back-lobe (paths 3 + 4) must stay untouched. */3699.peach-lock-hero-mark path:nth-child(1) {3700  fill: rgba(123, 144, 96, 0.88);3701}3702.peach-lock-hero-mark path:nth-child(2) {3703  stroke: rgba(94, 122, 66, 0.95);3704}3705.peach-lock-hero > *:not(.peach-lock-hero-art) {3706  position: relative;3707  z-index: 1;3708}37093710.peach-lock-eyebrow {3711  display: inline-flex;3712  align-items: center;3713  width: fit-content;3714  padding: 4px 9px;3715  border-radius: 999px;3716  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3717  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3718  color: var(--peach-t0);3719  font-family: "IBM Plex Mono", monospace;3720  font-size: 0.5rem;3721  letter-spacing: 0.18em;3722  text-transform: uppercase;3723}37243725.peach-lock-label-row {3726  display: flex;3727  align-items: center;3728  justify-content: space-between;3729  margin-bottom: 0;3730}37313732.peach-lock-reveal-btn {3733  display: inline-flex;3734  align-items: center;3735  gap: 4px;3736  background: none;3737  border: none;3738  cursor: pointer;3739  font-family: "IBM Plex Mono", monospace;3740  font-size: 0.5625rem;3741  letter-spacing: 0.06em;3742  color: var(--peach-t2);3743  padding: 2px 0;3744  transition: color 150ms ease;3745}37463747.peach-lock-reveal-btn:hover {3748  color: var(--peach-t1);3749}37503751.peach-lock-warning {3752  color: rgba(220, 80, 60, 0.85) !important;3753  line-height: 1.5;3754}37553756.peach-onboarding-cards {3757  display: grid;3758  gap: 8px;3759  position: relative;3760  z-index: 1;3761}37623763.peach-lock-panel {3764  position: relative;3765  z-index: 1;3766  display: grid;3767  gap: 9px;3768  padding: 14px 16px 15px;3769  border-radius: 18px;3770  border: 1px solid var(--peach-t3);3771  background:3772    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3773  box-shadow:3774    inset 0 1px 0 rgba(240, 232, 216, 0.04),3775    0 12px 28px rgba(0, 0, 0, 0.12);3776}37773778/* Glass surface — lock panel and settings groups */3779.peach-glass {3780  background: rgba(26, 20, 16, 0.65);3781  border: 1px solid rgba(255, 255, 255, 0.08);3782  border-radius: 12px;3783  backdrop-filter: blur(12px) saturate(1.4);3784  -webkit-backdrop-filter: blur(12px) saturate(1.4);3785}37863787@supports not (backdrop-filter: blur(1px)) {3788  .peach-glass {3789    background: rgba(26, 20, 16, 0.92);3790    border: 1px solid rgba(255, 255, 255, 0.10);3791    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3792  }3793}37943795.light .peach-glass,3796[data-theme="light"] .peach-glass {3797  background: rgba(240, 233, 223, 0.72);3798  border: 1px solid rgba(26, 18, 8, 0.08);3799  backdrop-filter: blur(12px) saturate(1.2);3800  -webkit-backdrop-filter: blur(12px) saturate(1.2);3801}38023803@supports not (backdrop-filter: blur(1px)) {3804  .light .peach-glass,3805  [data-theme="light"] .peach-glass {3806    background: rgba(240, 233, 223, 0.97);3807    border: 1px solid rgba(26, 18, 8, 0.10);3808  }3809}38103811/* Lock panel keeps its own border-radius over the generic glass token */3812.peach-lock-panel.peach-glass {3813  border-radius: 18px;3814  background: rgba(26, 20, 16, 0.65);3815  border: 1px solid rgba(255, 255, 255, 0.08);3816  box-shadow:3817    inset 0 1px 0 rgba(255, 255, 255, 0.05),3818    0 12px 28px rgba(0, 0, 0, 0.3);3819}38203821.light .peach-lock-panel.peach-glass,3822[data-theme="light"] .peach-lock-panel.peach-glass {3823  background: rgba(240, 233, 223, 0.82);3824  border: 1px solid rgba(26, 18, 8, 0.08);3825  box-shadow:3826    inset 0 1px 0 rgba(255, 255, 255, 0.4),3827    0 8px 24px rgba(80, 56, 32, 0.15);3828}38293830@supports not (backdrop-filter: blur(1px)) {3831  .peach-lock-panel.peach-glass {3832    background: rgba(26, 20, 16, 0.92);3833    box-shadow:3834      inset 0 1px 0 rgba(255, 255, 255, 0.05),3835      0 12px 28px rgba(0, 0, 0, 0.4);3836  }3837  .light .peach-lock-panel.peach-glass,3838  [data-theme="light"] .peach-lock-panel.peach-glass {3839    background: rgba(240, 233, 223, 0.98);3840  }3841}38423843.peach-lock-panel--secondary {3844  gap: 12px;3845}38463847.peach-lock-panel-header {3848  display: flex;3849  align-items: baseline;3850  justify-content: space-between;3851  gap: 12px;3852}38533854.peach-lock-option-grid {3855  display: grid;3856  gap: 10px;3857}38583859.peach-lock-option {3860  width: 100%;3861  display: grid;3862  gap: 6px;3863  padding: 14px 15px;3864  border-radius: 16px;3865  border: 1px solid rgba(240, 232, 216, 0.08);3866  background: rgba(240, 232, 216, 0.02);3867  color: var(--peach-t0);3868  text-align: left;3869  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3870}38713872.peach-lock-option:hover {3873  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3874  background: rgba(240, 232, 216, 0.04);3875  transform: translateY(-1px);3876}38773878.peach-lock-option-title {3879  font-size: 0.75rem;3880  color: var(--peach-t0);3881}38823883.peach-lock-option-copy {3884  font-size: 0.6875rem;3885  line-height: 1.55;3886  color: var(--peach-t1);3887}38883889.peach-onboarding-stack {3890  margin-top: 2px;3891}3892.peach-lock-panel-footer {3893  display: grid;3894  gap: 6px;3895  margin-top: 2px;3896  padding-top: 10px;3897  border-top: 1px solid rgba(240, 232, 216, 0.06);3898}38993900/* ── Restore tab view ─────────────────────────────────────────────────────3901   Tab-based restore screen replacing the old three-card picker. */39023903.peach-restore-tabview {3904  overflow: hidden;3905}39063907.peach-restore-tabcard {3908  flex: 1;3909  display: flex;3910  flex-direction: column;3911  gap: 0;3912  padding: 0;3913  overflow: hidden;3914  cursor: default;3915  user-select: none;3916  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3917}39183919/* ── Tab selector ─────────────────────────────────────────────────────── */39203921.peach-restore-tabs {3922  display: flex;3923  justify-content: space-around;3924  padding: 14px 10px 10px;3925  border-bottom: 1px solid var(--peach-t3);3926  gap: 2px;3927  overflow: hidden;3928  scrollbar-width: none;3929}3930.peach-restore-tabs::-webkit-scrollbar { display: none; }39313932.peach-restore-tab {3933  background: none;3934  border: none;3935  cursor: pointer;3936  padding: 3px 2px;3937  font-family: 'Cormorant Garamond', Georgia, serif;3938  font-style: italic;3939  font-size: 11px;3940  color: var(--peach-t2);3941  transition: color 150ms ease, text-shadow 150ms ease;3942  flex: 1;3943  min-width: 0;3944  text-align: center;3945  white-space: nowrap;3946  overflow: hidden;3947  text-overflow: ellipsis;3948}3949.peach-restore-tab:hover {3950  color: var(--peach-accent);3951  text-shadow:3952    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3953    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3954}3955.peach-restore-tab.is-active {3956  color: var(--peach-accent);3957  text-shadow:3958    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3959    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3960}39613962/* ── Content area ─────────────────────────────────────────────────────── */39633964.peach-restore-content {3965  padding: 16px 16px 14px;3966  display: flex;3967  flex-direction: column;3968  gap: 8px;3969  overflow: hidden;3970  scrollbar-width: none;3971  flex: 1;3972}3973.peach-restore-content::-webkit-scrollbar { display: none; }3974.peach-restore-content > * {3975  overflow: hidden;3976  scrollbar-width: none;3977}3978.peach-restore-content > *::-webkit-scrollbar { display: none; }39793980/* ── Shared tab inner layout ──────────────────────────────────────────── */39813982.peach-rt-symbols,3983.peach-rt-csv,3984.peach-rt-phone,3985.peach-restore-codex {3986  display: flex;3987  flex-direction: column;3988  gap: 8px;3989  overflow: hidden;3990}39913992.peach-restore-codex {3993  min-height: 0;3994  justify-content: center;3995}39963997.peach-restore-codex-title {3998  margin: 0;3999  font-family: var(--font-display);4000  font-size: 1rem;4001  font-style: italic;4002  color: var(--peach-t0);4003}40044005.peach-restore-codex-copy {4006  margin: 0;4007  font-size: 0.75rem;4008  line-height: 1.5;4009  color: var(--peach-t1);4010}40114012.peach-restore-codex-button {4013  width: 100%;4014  justify-content: center;4015}40164017.peach-rt-submit {4018  width: 100%;4019}40204021.peach-rt-error {4022  margin: 0;4023  font-size: 0.6875rem;4024  color: var(--peach-breach);4025  line-height: 1.4;4026}40274028/* ── PeachScript tab ──────────────────────────────────────────────────── */40294030.peach-restore-symbols-textarea {4031  font-family: 'PeachScript', monospace;4032  font-size: 13px;4033  line-height: 1.9;4034  letter-spacing: 0.1em;4035  word-break: break-all;4036  resize: none;4037  width: 100%;4038  min-height: 56px;4039  max-height: 72px;4040  overflow: hidden;4041  scrollbar-width: none;4042  -ms-overflow-style: none;4043  box-sizing: border-box;4044  padding: 6px 8px;4045  border-radius: 8px;4046  border: 1px solid var(--peach-t3);4047  background: rgba(240, 232, 216, 0.03);4048  color: var(--peach-t0);4049}4050.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }4051.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }40524053.peach-restore-symbols-pass {4054  width: 100%;4055  box-sizing: border-box;4056  padding: 7px 10px;4057  border-radius: 8px;4058  border: 1px solid var(--peach-t3);4059  background: rgba(240, 232, 216, 0.03);4060  color: var(--peach-t0);4061  font-size: 0.8125rem;4062}4063.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }4064.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }40654066.peach-rt-divider {4067  text-align: center;4068  font-size: 0.6875rem;4069  color: var(--peach-t2);4070  font-style: italic;4071}40724073.peach-rt-file-label {4074  width: 100%;4075  justify-content: center;4076}40774078.peach-rt-anim-canvas {4079  width: 100%;4080  height: 180px;4081  border-radius: 10px;4082  overflow: hidden;4083  display: block;4084}40854086/* ── CSV tab ──────────────────────────────────────────────────────────── */40874088.peach-rt-csv-sources {4089  margin: 0;4090  font-size: 0.6875rem;4091  color: var(--peach-t2);4092  line-height: 1.5;4093  text-align: center;4094}40954096.peach-rt-csv-warning {4097  margin: 0;4098  font-family: "IBM Plex Mono", monospace;4099  font-size: 0.5625rem;4100  letter-spacing: 0.12em;4101  color: var(--peach-breach);4102  text-align: center;4103}41044105/* ── From Phone tab ───────────────────────────────────────────────────── */41064107.peach-rt-phone-code {4108  margin: 0;4109  text-align: center;4110  font-family: "IBM Plex Mono", monospace;4111  font-size: 22px;4112  letter-spacing: 0.18em;4113  color: var(--peach-t0);4114}41154116.peach-rt-phone-qr {4117  display: block;4118  width: 96px;4119  height: 96px;4120  margin: 0 auto;4121  border-radius: 6px;4122  image-rendering: pixelated;4123  overflow: hidden;4124}41254126.peach-rt-phone-hint {4127  margin: 0;4128  font-size: 0.6875rem;4129  color: var(--peach-t2);4130  line-height: 1.55;4131  text-align: center;4132}41334134/* ── Intro popup ──────────────────────────────────────────────────────── */41354136.peach-restore-intro-overlay {4137  position: absolute;4138  inset: 0;4139  z-index: 100;4140  display: flex;4141  align-items: center;4142  justify-content: center;4143  padding: 20px;4144  background: rgba(12, 10, 6, 0.7);4145  backdrop-filter: blur(4px);4146  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4147}41484149.peach-restore-intro-card {4150  width: 100%;4151  display: flex;4152  flex-direction: column;4153  gap: 12px;4154  padding: 22px 20px 20px;4155  border-radius: 16px;4156  border: 1px solid var(--peach-t3);4157  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));4158  backdrop-filter: blur(4px);4159  -webkit-backdrop-filter: blur(4px);4160  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);4161}41624163.peach-restore-intro-headline {4164  margin: 0;4165  font-family: var(--font-display);4166  font-style: italic;4167  font-size: 20px;4168  font-weight: 400;4169  color: var(--peach-t0);4170}41714172.peach-restore-intro-body {4173  display: flex;4174  flex-direction: column;4175  gap: 8px;4176}4177.peach-restore-intro-body p {4178  margin: 0;4179  font-size: 0.75rem;4180  color: var(--peach-t1);4181  line-height: 1.5;4182}41834184.peach-restore-intro-btn {4185  width: 100%;4186  margin-top: 4px;4187}41884189/* Snapshot restore panel */4190.peach-snapshot-panel {4191  gap: 10px;4192  overflow-y: auto;4193  max-height: 340px;4194}4195.peach-snapshot-list {4196  display: flex;4197  flex-direction: column;4198  gap: 4px;4199}4200.peach-snapshot-row {4201  display: flex;4202  align-items: center;4203  justify-content: space-between;4204  width: 100%;4205  padding: 8px 10px;4206  border-radius: 8px;4207  border: 1px solid rgba(240, 232, 216, 0.07);4208  background: transparent;4209  cursor: pointer;4210  transition: border-color 120ms, background 120ms;4211  text-align: left;4212  gap: 8px;4213}4214.peach-snapshot-row:hover {4215  border-color: rgba(240, 232, 216, 0.14);4216  background: rgba(240, 232, 216, 0.03);4217}4218.peach-snapshot-row.is-selected {4219  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4220  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);4221}4222.peach-snapshot-time {4223  font-size: 11.5px;4224  color: var(--peach-t0);4225  flex: 1;4226}4227.peach-snapshot-count {4228  font-family: "IBM Plex Mono", monospace;4229  font-size: 0.625rem;4230  color: var(--peach-t2);4231  flex-shrink: 0;4232}4233.peach-snapshot-confirm {4234  display: flex;4235  flex-direction: column;4236  gap: 8px;4237  padding-top: 10px;4238  border-top: 1px solid rgba(240, 232, 216, 0.06);4239}4240.peach-snapshot-warning {4241  display: flex;4242  align-items: flex-start;4243  gap: 6px;4244  font-size: 10.5px;4245  color: rgba(220, 80, 60, 0.85);4246  line-height: 1.55;4247}4248.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }4249.peach-snapshot-confirm-row {4250  display: flex;4251  gap: 6px;4252  align-items: center;4253}4254.peach-snapshot-restore-btn {4255  width: 100%;4256}4257.peach-lock-hero--unlock .peach-lock-hero-art {4258  width: 112px;4259  height: 112px;4260  right: 0;4261  top: 2px;4262  opacity: 0.1;4263}42644265.peach-card {4266  border: 1px solid var(--peach-t3);4267  border-radius: 18px;4268  background:4269    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4270  box-shadow:4271    inset 0 0 0 1px var(--peach-border-accent),4272    inset 0 1px 0 rgba(240, 232, 216, 0.04),4273    0 12px 32px rgba(0, 0, 0, 0.14);4274  overflow: hidden;4275}42764277.peach-card-active {4278  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4279  box-shadow:4280    inset 0 1px 0 rgba(240, 232, 216, 0.05),4281    0 16px 38px rgba(0, 0, 0, 0.18),4282    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4283}42844285.peach-card-disabled {4286  opacity: 0.72;4287}42884289.peach-card-header {4290  width: 100%;4291  padding: 13px 16px 11px;4292  background: transparent;4293  color: var(--peach-t0);4294  display: flex;4295  justify-content: space-between;4296  align-items: center;4297  text-align: left;4298  font-size: 0.75rem;4299}43004301.peach-card-body {4302  padding: 0 16px 16px;4303  display: grid;4304  gap: 9px;4305}43064307.peach-card-tag {4308  color: var(--peach-t2);4309  font-family: "IBM Plex Mono", monospace;4310  font-size: 0.5625rem;4311  letter-spacing: 0.12em;4312  text-transform: uppercase;4313}43144315.peach-empty-copy {4316  display: grid;4317  gap: 6px;4318  color: var(--peach-t1);4319  font-size: 0.8125rem;4320}43214322.peach-lock-submit {4323  width: 100%;4324  box-shadow:4325    0 1px 0 rgba(255,255,255,0.10) inset,4326    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4327    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4328    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4329}43304331.peach-lock-secondary {4332  width: 100%;4333  border-color: var(--peach-t3);4334  background: rgba(240, 232, 216, 0.02);4335}43364337.peach-lock-secondary:hover {4338  background: rgba(240, 232, 216, 0.04);4339}43404341.peach-lock-note {4342  max-width: none;4343  line-height: 1.55;4344  margin: 0;4345}43464347.peach-overlay-action {4348  font-size: 0.625rem;4349  padding: 4px 8px;4350  letter-spacing: 0.06em;4351  min-width: 44px;4352  text-align: center;4353}43544355.peach-inline-action {4356  flex-shrink: 0;4357  font-size: 0.5625rem;4358  letter-spacing: 0.1em;4359  text-transform: uppercase;4360  padding: 4px 7px;4361}4362.peach-password-toggle-btn {4363  display: inline-flex;4364  align-items: center;4365  justify-content: center;4366  min-width: 30px;4367  min-height: 26px;4368  padding: 0 7px;4369  border: 1px solid var(--peach-t3);4370  border-radius: 999px;4371  background: rgba(240, 232, 216, 0.04);4372  color: var(--peach-t2);4373  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4374}4375.peach-password-toggle-btn:hover {4376  border-color: var(--peach-t2);4377  color: var(--peach-t0);4378  background: rgba(240, 232, 216, 0.06);4379}43804381.peach-new-textarea {4382  width: 100%;4383  min-height: 88px;4384  resize: vertical;4385  border: 0;4386  outline: none;4387  background: transparent;4388  color: var(--peach-t1);4389  font-family: "IBM Plex Mono", monospace;4390  font-size: 0.75rem;4391  line-height: 1.65;4392  caret-color: var(--peach-accent);4393}43944395.peach-new-textarea::placeholder {4396  color: var(--peach-t2);4397  opacity: 0.7;4398}43994400.peach-settings-actions {4401  display: grid;4402  gap: 8px;4403}44044405.peach-sync-section-label {4406  font-size: 0.6875rem;4407  color: var(--peach-t2);4408  text-transform: uppercase;4409  letter-spacing: 0.05em;4410}44114412.peach-sync-network-note {4413  margin: 0 0 6px;4414  font-size: 0.75rem;4415  color: var(--peach-t2);4416  line-height: 1.4;4417}44184419.peach-settings-row--tappable {4420  background: none;4421  border: none;4422  width: 100%;4423  text-align: left;4424  cursor: pointer;4425  color: var(--peach-t1);4426  font-size: 0.8125rem;4427}4428.peach-settings-row--tappable:hover {4429  color: var(--peach-t0);4430}44314432.peach-sync-pro-hint {4433  display: flex;4434  flex-direction: column;4435  align-items: flex-start;4436  gap: 8px;4437  padding: 12px 0 4px;4438}44394440.peach-sync-device-row {4441  display: flex;4442  justify-content: space-between;4443  align-items: center;4444  padding: 6px 0;4445  border-bottom: 1px solid var(--peach-t3);4446}44474448.peach-sync-device-info {4449  display: flex;4450  flex-direction: column;4451  gap: 2px;4452}44534454.peach-sync-device-name {4455  font-size: 0.8125rem;4456  color: var(--peach-t0);4457}44584459.peach-sync-device-meta {4460  font-size: 0.6875rem;4461  color: var(--peach-t2);4462}44634464.peach-sync-status-dot {4465  display: inline-block;4466  width: 8px;4467  height: 8px;4468  border-radius: 50%;4469  vertical-align: middle;4470}44714472.peach-sync-remove-btn {4473  color: var(--peach-breach);4474}44754476.peach-sync-advanced-row {4477  display: flex;4478  justify-content: space-between;4479  align-items: center;4480  padding: 6px 0;4481  gap: 12px;4482}44834484.peach-sync-advanced-info {4485  display: flex;4486  flex-direction: column;4487  gap: 2px;4488  flex: 1;4489}44904491.peach-sync-advanced-name {4492  font-size: 0.8125rem;4493  color: var(--peach-t0);4494}44954496.peach-sync-reset-confirm {4497  display: flex;4498  flex-direction: column;4499  gap: 8px;4500  padding: 10px;4501  border: 1px solid var(--peach-breach);4502  border-radius: 10px;4503  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4504}45054506.peach-sync-reset-confirm-headline {4507  font-size: 0.8125rem;4508  font-weight: 600;4509  color: var(--peach-t0);4510  margin: 0;4511}45124513.peach-sync-reset-confirm-body {4514  font-size: 0.75rem;4515  color: var(--peach-t1);4516  margin: 0;4517  line-height: 1.4;4518}45194520.peach-btn--danger {4521  background: var(--peach-breach);4522  color: #fff;4523  border-color: var(--peach-breach);4524}4525.peach-btn--danger:hover:not(:disabled) {4526  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4527}4528.peach-btn--danger:disabled {4529  opacity: 0.55;4530  cursor: not-allowed;4531}45324533.peach-sync-hero-icon {4534  color: var(--peach-t1);4535  opacity: 0.85;4536}45374538.peach-import-preview {4539  margin-bottom: 12px;4540  max-height: 152px;4541  overflow-y: auto;4542  border: 1px solid var(--peach-t3);4543  border-radius: 10px;4544  padding: 8px 10px;4545  display: grid;4546  gap: 8px;4547  background: rgba(240, 232, 216, 0.02);4548}45494550.peach-import-preview-row {4551  display: flex;4552  justify-content: space-between;4553  gap: 10px;4554  font-size: 0.6875rem;4555  color: var(--peach-t1);4556}45574558.peach-import-preview-title {4559  color: var(--peach-t0);4560  flex: 1;4561  min-width: 0;4562  overflow: hidden;4563  text-overflow: ellipsis;4564  white-space: nowrap;4565}45664567.peach-import-preview-meta {4568  color: var(--peach-t2);4569  flex-shrink: 0;4570  max-width: 42%;4571  overflow: hidden;4572  text-overflow: ellipsis;4573  white-space: nowrap;4574}45754576.peach-import-preview-more {4577  color: var(--peach-t2);4578  font-size: 0.625rem;4579}45804581.peach-restore-copy {4582  margin: 0;4583  color: var(--peach-t1);4584  font-size: 0.6875rem;4585  line-height: 1.6;4586}45874588.peach-restore-warning {4589  padding: 10px 12px;4590  border-radius: 12px;4591  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4592  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4593  color: var(--peach-t0);4594  font-size: 0.6875rem;4595  line-height: 1.55;4596}45974598.peach-provider-chips {4599  display: flex;4600  flex-wrap: wrap;4601  gap: 6px;4602}46034604.peach-provider-chip {4605  display: inline-flex;4606  align-items: center;4607  padding: 5px 8px;4608  border-radius: 999px;4609  border: 1px solid var(--peach-t3);4610  background: rgba(240, 232, 216, 0.02);4611  color: var(--peach-t1);4612  font-family: "IBM Plex Mono", monospace;4613  font-size: 0.5rem;4614  letter-spacing: 0.08em;4615  text-transform: uppercase;4616}46174618.peach-restore-file,4619.peach-restore-input {4620  width: 100%;4621  border-radius: 10px;4622  border: 1px solid var(--peach-t3);4623  background: var(--peach-s2);4624  color: var(--peach-t0);4625  font-size: 0.75rem;4626}46274628.peach-restore-file {4629  padding: 9px 10px;4630}46314632.peach-restore-file::file-selector-button {4633  margin-right: 10px;4634  padding: 7px 10px;4635  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4636  border-radius: 999px;4637  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4638  color: var(--peach-t0);4639  font-size: 0.625rem;4640  letter-spacing: 0.08em;4641  text-transform: uppercase;4642  cursor: pointer;4643}46444645.peach-restore-input {4646  padding: 10px 12px;4647}46484649.peach-auth-grid {4650  display: grid;4651  gap: 10px;4652}46534654.peach-import-summary {4655  color: var(--peach-t1);4656  font-size: 0.75rem;4657  line-height: 1.6;4658  margin-bottom: 12px;4659}46604661.peach-restore-error {4662  color: rgba(220, 80, 60, 0.95);4663  font-size: 0.75rem;4664  line-height: 1.55;4665}46664667.peach-passkey-card {4668  max-width: 400px;4669  margin: auto 16px;4670  align-self: center;4671  width: calc(100% - 32px);4672}46734674/* Center the approval card vertically inside the overlay-view (which sets4675 * flex-direction: column without justify-content). Without this, the card4676 * sits at the top with a tall empty band below — looks unfinished on the4677 * 320px popup. */4678.peach-overlay-view:has(.peach-passkey-card) {4679  justify-content: center;4680}46814682.peach-pro-badge {4683  padding: 2px 6px;4684  border-radius: 999px;4685  font-family: var(--font-ui);4686  font-size: 0.625rem;4687  letter-spacing: 0.08em;4688  text-transform: uppercase;4689  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4690  color: var(--peach-accent);4691}46924693/* ── Shortcuts rebind table ─────────────────────────────────── */4694.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4695.peach-shortcut-row {4696  display: flex;4697  align-items: center;4698  gap: 10px;4699  padding: 6px 0;4700}4701.peach-shortcut-row-label {4702  flex: 1;4703  font-size: 0.75rem;4704  color: var(--peach-t0);4705}4706.peach-shortcut-chip {4707  min-width: 64px;4708  padding: 4px 10px;4709  border-radius: 6px;4710  border: 1px solid var(--peach-t3);4711  background: var(--peach-input-bg, var(--surface-card));4712  color: var(--peach-t0);4713  font-family: var(--font-mono);4714  font-size: 0.6875rem;4715  letter-spacing: 0.04em;4716  cursor: pointer;4717  text-align: center;4718  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4719}4720.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4721.peach-shortcut-chip.is-custom {4722  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4723  color: var(--peach-accent);4724}4725.peach-shortcut-chip.is-capturing {4726  border-color: var(--peach-accent);4727  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4728  color: var(--peach-accent);4729  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4730}4731@keyframes peach-shortcut-capture-pulse {4732  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4733  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4734}4735.peach-shortcut-reset {4736  background: transparent;4737  border: none;4738  cursor: pointer;4739  color: var(--peach-t2);4740  padding: 4px 6px;4741  border-radius: 5px;4742  font-size: 0.875rem;4743  line-height: 1;4744  transition: color 120ms ease, background 120ms ease;4745}4746.peach-shortcut-reset:hover {4747  color: var(--peach-t0);4748  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4749}4750.peach-shortcuts-conflict {4751  margin: 4px 0 0;4752  padding: 8px 10px;4753  border-radius: 7px;4754  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4755  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4756  font-family: var(--font-mono);4757  font-size: 0.6875rem;4758  color: var(--peach-t0);4759}47604761/* ── Help dialog overlay (? to open) ────────────────────────── */4762.peach-shortcuts-help-backdrop {4763  position: fixed;4764  inset: 0;4765  background: rgba(0, 0, 0, 0.55);4766  backdrop-filter: blur(2px);4767  display: flex;4768  align-items: center;4769  justify-content: center;4770  z-index: 1000;4771  animation: peach-help-fade-in 140ms ease forwards;4772}4773@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4774.peach-shortcuts-help-card {4775  width: min(320px, 92vw);4776  max-height: 80vh;4777  overflow-y: auto;4778  border-radius: 14px;4779  border: 1px solid var(--peach-t3);4780  background: var(--peach-bg);4781  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4782  padding: 16px 18px 18px;4783  display: flex;4784  flex-direction: column;4785  gap: 12px;4786}4787.peach-shortcuts-help-head {4788  display: flex; align-items: center; justify-content: space-between;4789}4790.peach-shortcuts-help-head h3 {4791  margin: 0;4792  font-family: var(--font-display);4793  font-style: italic;4794  font-weight: 400;4795  font-size: 22px;4796  color: var(--peach-t0);4797}4798.peach-shortcuts-help-close {4799  background: transparent;4800  border: none;4801  color: var(--peach-t2);4802  cursor: pointer;4803  font-size: 0.875rem;4804  padding: 4px 8px;4805  border-radius: 5px;4806}4807.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4808.peach-shortcuts-help-body ul {4809  list-style: none; padding: 0; margin: 4px 0 12px;4810  display: grid; gap: 8px;4811}4812.peach-shortcuts-help-body li {4813  display: flex; align-items: center; justify-content: space-between; gap: 12px;4814  font-size: 0.75rem; color: var(--peach-t0);4815}4816.peach-shortcuts-help-body kbd {4817  font-family: var(--font-mono);4818  font-size: 0.6875rem;4819  padding: 3px 8px;4820  border-radius: 6px;4821  background: var(--surface-card);4822  border: 1px solid var(--peach-t3);4823  color: var(--peach-accent);4824  letter-spacing: 0.04em;4825}48264827/* ── Pro promo on Account screen ────────────────────────────── */4828.peach-pro-promo {4829  position: relative;4830  border-radius: 14px;4831  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4832  background:4833    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4834    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4835    var(--surface-card);4836  overflow: hidden;4837  margin-bottom: 14px;4838}4839.peach-pro-promo-glow {4840  position: absolute;4841  inset: -40% -20% auto auto;4842  width: 220px; height: 220px;4843  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4844  pointer-events: none;4845  filter: blur(8px);4846}4847.peach-pro-promo-inner {4848  position: relative;4849  padding: 18px 18px 16px;4850}4851.peach-pro-promo-title {4852  font-family: var(--font-display);4853  font-style: italic;4854  font-weight: 400;4855  font-size: 28px;4856  line-height: 1;4857  letter-spacing: -0.005em;4858  color: var(--peach-t0);4859  margin: 0 0 4px;4860}4861.peach-pro-promo-tagline {4862  font-family: var(--font-mono);4863  font-size: 0.625rem;4864  letter-spacing: 0.06em;4865  color: var(--peach-t2);4866  margin: 0 0 14px;4867}4868.peach-pro-promo-list {4869  list-style: none;4870  margin: 0 0 16px;4871  padding: 0;4872  display: grid;4873  gap: 9px;4874}4875.peach-pro-promo-list li {4876  display: flex;4877  align-items: flex-start;4878  gap: 9px;4879  font-size: 0.75rem;4880  color: var(--peach-t1);4881  line-height: 1.4;4882}4883.peach-pro-promo-list svg {4884  width: 14px;4885  height: 14px;4886  flex-shrink: 0;4887  color: var(--peach-accent);4888  margin-top: 2px;4889}4890.peach-pro-promo-list span {4891  color: var(--peach-t0);4892}4893.peach-pro-promo-cta {4894  width: 100%;4895  background: var(--peach-accent);4896  color: #fff;4897  border: none;4898  padding: 9px 12px;4899  border-radius: 9px;4900  font-size: 0.75rem;4901  font-weight: 500;4902  font-family: var(--font-ui);4903  letter-spacing: 0.02em;4904  text-decoration: none;4905  display: inline-flex;4906  align-items: center;4907  justify-content: center;4908  cursor: pointer;4909  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4910  box-shadow: 0 2px 16px var(--peach-glow);4911}4912.peach-pro-promo-cta:hover {4913  filter: brightness(1.07);4914  box-shadow: 0 4px 24px var(--peach-glow);4915  transform: translateY(-1px);4916}4917.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }49184919.peach-pro-or-divider {4920  display: flex;4921  align-items: center;4922  gap: 10px;4923  margin: 4px 0 12px;4924  font-family: var(--font-mono);4925  font-size: 0.625rem;4926  letter-spacing: 0.06em;4927  color: var(--peach-t2);4928  text-transform: uppercase;4929}4930.peach-pro-or-divider::before,4931.peach-pro-or-divider::after {4932  content: "";4933  flex: 1;4934  height: 1px;4935  background: var(--peach-t3);4936}49374938.peach-loading {4939  position: absolute;4940  inset: 0;4941  display: flex;4942  align-items: center;4943  justify-content: center;4944  background: var(--bg);4945  animation: peach-loading-pulse 1.2s ease-in-out infinite;4946}49474948@keyframes peach-loading-pulse {4949  0%, 100% { opacity: 0.6; }4950  50% { opacity: 1; }4951}49524953/* ── Health Dashboard ─────────────────────────────────────────────────── */4954.peach-health-body {4955  flex: 1;4956  overflow-y: auto;4957  display: flex;4958  flex-direction: column;4959  /* Hide the platform scrollbar — every other scrollable surface in the4960   * popup hides it; the Health view was the one outlier and it ruined the4961   * polish. Behavior unchanged, just no rail rendered. */4962  scrollbar-width: none;4963  -ms-overflow-style: none;4964}4965.peach-health-body::-webkit-scrollbar { display: none; }49664967/* Loading screen for the Vault Health view. The advanced report computation4968 * can run for a few seconds on a large vault — without a clear loading4969 * screen the surface looked broken (the entry view bleeds through the4970 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4971.peach-health-loading-screen {4972  flex: 1;4973  display: flex;4974  flex-direction: column;4975  align-items: center;4976  justify-content: center;4977  gap: 14px;4978  padding: 32px 28px;4979  text-align: center;4980}49814982.peach-health-loading-glyph {4983  width: 48px;4984  height: 48px;4985  display: flex;4986  align-items: center;4987  justify-content: center;4988  border-radius: 14px;4989  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4990  color: var(--peach-accent);4991}49924993.peach-health-loading-title {4994  margin: 0;4995  font-family: var(--font-display);4996  font-style: italic;4997  font-weight: 300;4998  font-size: 19px;4999  line-height: 1.2;5000  color: var(--peach-t0);5001}50025003.peach-health-loading-copy {5004  margin: 0;5005  max-width: 240px;5006  font-size: 0.75rem;5007  line-height: 1.55;5008  color: var(--peach-t2);5009}50105011.peach-health-loading-track {5012  width: 200px;5013  height: 3px;5014  margin-top: 6px;5015  border-radius: 999px;5016  background: rgba(240, 232, 216, 0.06);5017  overflow: hidden;5018}50195020.peach-health-loading-fill {5021  width: 40%;5022  height: 100%;5023  border-radius: inherit;5024  background: linear-gradient(5025    90deg,5026    transparent 0%,5027    var(--peach-accent) 50%,5028    transparent 100%5029  );5030  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;5031}50325033@keyframes peach-health-loading-sweep {5034  0%   { transform: translateX(-100%); }5035  100% { transform: translateX(350%); }5036}50375038[data-motion="reduce"] .peach-health-loading-fill,5039[data-motion="reduce"] .peach-health-loading-glyph svg path {5040  animation: none;5041}50425043.peach-health-summary {5044  padding: 10px 16px 6px;5045  font-family: "IBM Plex Mono", monospace;5046  font-size: 0.6875rem;5047}5048.peach-health-summary-warn { color: rgba(220,80,60,0.9); }5049.peach-health-summary-ok { color: var(--peach-t2); }50505051.peach-health-check-row {5052  padding: 0 16px 10px;5053}5054.peach-health-check-btn {5055  width: 100%;5056  display: flex;5057  align-items: center;5058  justify-content: center;5059}50605061.peach-health-sections {5062  flex: 1;5063  display: flex;5064  flex-direction: column;5065}50665067.peach-health-section {5068  border-bottom: 1px solid var(--peach-t3);5069}50705071.peach-health-section-header {5072  width: 100%;5073  display: flex;5074  align-items: center;5075  justify-content: space-between;5076  padding: 9px 16px;5077  background: transparent;5078  cursor: pointer;5079  color: var(--peach-t0);5080}50815082.peach-health-section-title-row {5083  display: flex;5084  align-items: center;5085  gap: 8px;5086}50875088.peach-health-count-badge {5089  display: inline-flex;5090  align-items: center;5091  justify-content: center;5092  min-width: 20px;5093  height: 18px;5094  padding: 0 5px;5095  border-radius: 999px;5096  background: rgba(220,80,60,0.15);5097  border: 1px solid rgba(220,80,60,0.25);5098  font-family: "IBM Plex Mono", monospace;5099  font-size: 0.5625rem;5100  color: rgba(220,80,60,0.9);5101}51025103.peach-health-section-title {5104  font-family: "IBM Plex Mono", monospace;5105  font-size: 0.6875rem;5106  text-transform: uppercase;5107  letter-spacing: 0.1em;5108  color: var(--peach-t1);5109}51105111.peach-health-chevron {5112  color: var(--peach-t2);5113  transition: transform 200ms ease;5114  flex-shrink: 0;5115}5116.peach-health-chevron.is-expanded {5117  transform: rotate(180deg);5118}51195120.peach-health-section-body {5121  padding: 0 16px 10px;5122  display: flex;5123  flex-direction: column;5124  gap: 4px;5125}51265127.peach-health-row {5128  display: flex;5129  align-items: flex-start;5130  justify-content: space-between;5131  gap: 8px;5132  padding: 6px 8px;5133  border-radius: 8px;5134  background: rgba(240,232,216,0.02);5135}51365137.peach-health-row-info {5138  flex: 1;5139  min-width: 0;5140  display: flex;5141  flex-direction: column;5142  gap: 2px;5143}51445145.peach-health-row-name {5146  font-family: var(--font-display);5147  font-size: 0.9375rem;5148  font-style: italic;5149  font-weight: 400;5150  color: var(--peach-t0);5151  white-space: nowrap;5152  overflow: hidden;5153  text-overflow: ellipsis;5154}51555156.peach-health-row-meta {5157  font-family: "IBM Plex Mono", monospace;5158  font-size: 0.5625rem;5159  color: var(--peach-t2);5160  letter-spacing: 0.05em;5161}51625163.peach-health-fix-btn {5164  font-size: 0.5625rem;5165  letter-spacing: 0.08em;5166  text-transform: uppercase;5167  padding: 4px 7px;5168  flex-shrink: 0;5169  display: flex;5170  align-items: center;5171}51725173.peach-health-empty {5174  font-family: "IBM Plex Mono", monospace;5175  font-size: 0.625rem;5176  color: var(--peach-t2);5177  padding: 6px 0;5178}51795180.peach-health-loading {5181  font-family: "IBM Plex Mono", monospace;5182  font-size: 0.625rem;5183  color: var(--peach-t2);5184  padding: 6px 0;5185  display: flex;5186  align-items: center;5187  gap: 6px;5188}51895190.peach-health-loading::before {5191  content: "";5192  width: 10px;5193  height: 10px;5194  border: 1.5px solid var(--peach-t3);5195  border-top-color: var(--peach-accent);5196  border-radius: 50%;5197  animation: peach-spin 600ms linear infinite;5198}51995200@keyframes peach-spin {5201  to { transform: rotate(360deg); }5202}52035204.peach-spinner {5205  width: 32px;5206  height: 32px;5207  border: 2px solid var(--peach-s2);5208  border-top-color: var(--peach-accent);5209  border-radius: 50%;5210  margin: 0 auto 16px;5211  animation: peach-spin 0.8s linear infinite;5212}52135214.peach-progress-screen {5215  text-align: center;5216  padding: 32px 16px;5217}52185219.peach-progress-screen-title {5220  font-size: 0.8125rem;5221  color: var(--peach-t0);5222  margin-bottom: 16px;5223}52245225.peach-progress-screen-stage {5226  font-size: 0.6875rem;5227  color: var(--peach-t2);5228  min-height: 14px;5229}52305231.peach-progress-screen-note {5232  font-size: 0.625rem;5233  color: var(--peach-t2);5234  margin-top: 8px;5235}52365237/* Tag chips */5238.peach-tag-chip {5239  display: inline-flex;5240  align-items: center;5241  gap: 4px;5242  padding: 3px 8px;5243  border-radius: 999px;5244  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5245  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5246  color: var(--peach-t0);5247  font-family: "IBM Plex Mono", monospace;5248  font-size: 0.625rem;5249  letter-spacing: 0.04em;5250}52515252.peach-tag-chip-remove {5253  background: transparent;5254  border: none;5255  color: inherit;5256  opacity: 0.6;5257  cursor: pointer;5258  padding: 0;5259  font-size: 0.75rem;5260  line-height: 1;5261}52625263.peach-tag-chip-remove:hover {5264  opacity: 1;5265}52665267/* Tag input */5268.peach-tag-input-wrap {5269  border-bottom: 1px solid var(--peach-t3);5270}52715272.peach-tag-suggestions {5273  display: flex;5274  flex-wrap: wrap;5275  gap: 4px;5276  padding: 6px 0;5277}52785279.peach-tag-suggestion {5280  padding: 2px 8px;5281  border-radius: 999px;5282  border: 1px solid var(--peach-t3);5283  background: var(--peach-s2);5284  color: var(--peach-t1);5285  font-family: "IBM Plex Mono", monospace;5286  font-size: 0.625rem;5287  cursor: pointer;5288  transition: border-color 80ms ease, background 80ms ease;5289}52905291.peach-tag-suggestion:hover {5292  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5293  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5294}52955296/* Identity suggestions — shown below username/email inputs in new-entry form */5297@keyframes peach-suggest-in {5298  from { opacity: 0; transform: translateY(-4px); }5299  to   { opacity: 1; transform: none; }5300}53015302.peach-identity-suggestions {5303  display: flex;5304  flex-direction: column;5305  gap: 1px;5306  margin-top: 4px;5307  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5308}53095310.peach-identity-filter-row {5311  display: flex;5312  align-items: center;5313  gap: 4px;5314  padding: 2px 0 5px;5315}53165317.peach-identity-collapse-btn {5318  margin-left: auto;5319  background: transparent;5320  border: none;5321  cursor: pointer;5322  color: var(--peach-t3);5323  padding: 2px 4px;5324  display: flex;5325  align-items: center;5326  line-height: 0;5327  border-radius: 3px;5328  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5329}53305331.peach-identity-collapse-btn:hover {5332  color: var(--peach-t1);5333}53345335.peach-identity-collapse-btn.is-collapsed {5336  transform: rotate(-90deg);5337}53385339.peach-identity-rows {5340  display: grid;5341  grid-template-rows: 1fr;5342  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5343}53445345.peach-identity-rows.is-collapsed {5346  grid-template-rows: 0fr;5347}53485349.peach-identity-rows-inner {5350  overflow-y: auto;5351  min-height: 0;5352  max-height: 148px;5353  scrollbar-width: thin;5354  scrollbar-color: var(--peach-t3) transparent;5355  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5356  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5357}53585359.peach-identity-rows-inner::-webkit-scrollbar {5360  width: 4px;5361}53625363.peach-identity-rows-inner::-webkit-scrollbar-track {5364  background: transparent;5365}53665367.peach-identity-rows-inner::-webkit-scrollbar-thumb {5368  background: var(--peach-t3);5369  border-radius: 2px;5370}53715372.peach-identity-filter-pill {5373  padding: 2px 7px;5374  border-radius: 999px;5375  border: 1px solid var(--peach-t3);5376  background: transparent;5377  color: var(--peach-t2);5378  font-family: "IBM Plex Mono", monospace;5379  font-size: 0.6rem;5380  cursor: pointer;5381  transition: border-color 80ms, background 80ms, color 80ms;5382}53835384.peach-identity-filter-pill.is-on {5385  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5386  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5387  color: var(--peach-accent);5388}53895390.peach-identity-suggestion {5391  display: flex;5392  align-items: center;5393  gap: 6px;5394  width: 100%;5395  padding: 4px 6px;5396  border-radius: 5px;5397  border: none;5398  background: transparent;5399  cursor: pointer;5400  text-align: left;5401  transition: background 80ms ease;5402}54035404.peach-identity-suggestion:hover,5405.peach-identity-suggestion:focus {5406  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5407  outline: none;5408}54095410.peach-identity-suggestion-value {5411  font-family: "IBM Plex Mono", monospace;5412  font-size: 0.7rem;5413  color: var(--peach-t1);5414  overflow: hidden;5415  text-overflow: ellipsis;5416  white-space: nowrap;5417  flex: 1;5418  min-width: 0;5419}54205421.peach-identity-suggestion-type {5422  font-family: "IBM Plex Mono", monospace;5423  font-size: 0.55rem;5424  font-weight: 600;5425  flex-shrink: 0;5426  padding: 1px 4px;5427  border-radius: 3px;5428}54295430.peach-identity-suggestion-type--email {5431  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5432  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5433}54345435.peach-identity-suggestion-type--username {5436  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5437  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5438}54395440.peach-identity-suggestion-meta {5441  font-family: "IBM Plex Mono", monospace;5442  font-size: 0.6rem;5443  color: var(--peach-t3);5444  flex-shrink: 0;5445}54465447/* Tag filter strip */5448.peach-tag-filter-strip {5449  border-bottom: 1px solid var(--peach-t3);5450  flex-shrink: 0;5451}54525453.peach-tag-filter-chip {5454  display: inline-flex;5455  align-items: center;5456  padding: 4px 10px;5457  border-radius: 999px;5458  border: 1px solid var(--peach-t3);5459  background: transparent;5460  color: var(--peach-t2);5461  font-family: "IBM Plex Mono", monospace;5462  font-size: 0.5625rem;5463  letter-spacing: 0.06em;5464  text-transform: uppercase;5465  cursor: pointer;5466  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5467  white-space: nowrap;5468}54695470.peach-tag-filter-chip:hover {5471  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5472  color: var(--peach-t1);5473}54745475.peach-tag-filter-chip.is-selected {5476  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5477  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5478  color: var(--peach-t0);5479}54805481/* ─────────────────────────────────────────────────────────────────────────5482   v1.4.12 additions5483   ─────────────────────────────────────────────────────────────────────── */54845485/* Sort bar */5486.peach-sort-bar {5487  display: flex;5488  align-items: center;5489  gap: 4px;5490  padding: 5px 12px;5491  border-bottom: 1px solid var(--peach-t3);5492  flex-shrink: 0;5493  overflow-x: auto;5494  scrollbar-width: none;5495}54965497.peach-sort-btn {5498  padding: 2px 9px;5499  border-radius: 999px;5500  border: 1px solid transparent;5501  background: transparent;5502  color: var(--peach-t2);5503  font-family: "IBM Plex Mono", monospace;5504  font-size: 0.5625rem;5505  letter-spacing: 0.07em;5506  text-transform: uppercase;5507  cursor: pointer;5508  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5509  white-space: nowrap;5510}55115512.peach-sort-btn:hover {5513  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5514  color: var(--peach-t1);5515}55165517.peach-sort-btn.is-active {5518  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5519  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5520  color: var(--peach-t0);5521}55225523.peach-sort-scope-btn {5524  padding-inline: 8px;5525  font-size: 0.53125rem;5526  letter-spacing: 0.05em;5527}55285529.peach-sort-domain-hint {5530  margin-left: auto;5531  font-family: "IBM Plex Mono", monospace;5532  font-size: 0.5625rem;5533  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5534  white-space: nowrap;5535  overflow: hidden;5536  text-overflow: ellipsis;5537  max-width: 110px;5538}55395540/* Tab-match badge on entry rows */5541.peach-tab-match-badge {5542  display: inline-block;5543  width: 6px;5544  height: 6px;5545  border-radius: 50%;5546  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5547  margin-left: 5px;5548  vertical-align: middle;5549  flex-shrink: 0;5550  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5551}55525553.peach-entry-row.is-tab-match {5554  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5555  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5556}55575558.peach-entry-row.is-tab-match:hover {5559  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5560}55615562/* Entry list stagger entrance */5563@keyframes peach-entry-fadein {5564  from { opacity: 0; transform: translateY(4px); }5565  to   { opacity: 1; transform: translateY(0); }5566}55675568.peach-vault-list .peach-entry-row {5569  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5570}55715572/* Button press micro-interaction */5573.peach-btn:active {5574  transform: scale(0.95);5575  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5576}55775578.peach-sort-btn:active,5579.peach-tag-filter-chip:active {5580  transform: scale(0.93);5581  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5582}55835584/* Password strength bar (Lock view + shared) */5585.peach-password-strength {5586  display: flex;5587  align-items: center;5588  gap: 8px;5589  margin-top: 6px;5590}55915592.peach-strength-bar {5593  flex: 1;5594  height: 3px;5595  border-radius: 2px;5596  background: var(--peach-t3);5597  overflow: hidden;5598}55995600.peach-strength-fill {5601  height: 100%;5602  border-radius: 2px;5603  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5604              background 300ms ease;5605}56065607.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5608.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5609.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5610.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }56115612.peach-strength-label {5613  font-family: "IBM Plex Mono", monospace;5614  font-style: italic;5615  font-size: 0.5625rem;5616  font-weight: 300;5617  letter-spacing: 0.06em;5618  color: var(--peach-t2);5619  min-width: 36px;5620  text-align: right;5621}56225623.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5624.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5625.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5626.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }56275628/* Duress form */5629.peach-duress-status {5630  padding: 2px 8px;5631  border-radius: 999px;5632  border: 1px solid var(--peach-t3);5633  font-family: "IBM Plex Mono", monospace;5634  font-size: 0.5625rem;5635  letter-spacing: 0.07em;5636  text-transform: uppercase;5637  color: var(--peach-t2);5638  flex-shrink: 0;5639}56405641.peach-duress-status.is-active {5642  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5643  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5644  color: var(--peach-t0);5645}56465647.peach-duress-form {5648  padding: 8px 0 4px;5649  display: flex;5650  flex-direction: column;5651  gap: 6px;5652}56535654.peach-duress-form .peach-label {5655  margin-top: 4px;5656}56575658.peach-duress-actions {5659  display: flex;5660  gap: 6px;5661  align-items: center;5662  margin-top: 4px;5663}56645665.peach-duress-actions .peach-btn:first-child {5666  margin-right: auto;5667}56685669/* Improved overlay spring entrance */5670.peach-overlay-view.ov-enter-up {5671  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5672}56735674@keyframes ov-enter-up-spring {5675  from { opacity: 0; transform: translateY(16px) scale(0.98); }5676  to   { opacity: 1; transform: translateY(0) scale(1); }5677}56785679.peach-overlay-view.ov-enter-right {5680  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5681}56825683@keyframes ov-enter-right-spring {5684  from { opacity: 0; transform: translateX(18px) scale(0.98); }5685  to   { opacity: 1; transform: translateX(0) scale(1); }5686}56875688/* ── Onboarding-mode restore screens (file import) ── */5689/* Used when MainImportView renders during onboarding (no vault yet).5690   Animates like a lock-screen transition. */5691.peach-lock-view {5692  position: absolute;5693  inset: 0;5694  display: flex;5695  flex-direction: column;5696  background:5697    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5698    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5699    var(--peach-bg);5700  z-index: 2;5701  overflow: hidden;5702  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5703}57045705.peach-lock-view-header {5706  display: flex;5707  align-items: center;5708  justify-content: space-between;5709  padding: 16px 18px 12px;5710  flex-shrink: 0;5711}57125713/* ───────── Settings: auto-lock select ───────── */5714.peach-settings-select {5715  font-family: "IBM Plex Mono", monospace;5716  font-size: 0.6875rem;5717  background: transparent;5718  border: 1px solid var(--peach-t3);5719  border-radius: 4px;5720  color: var(--peach-t1);5721  padding: 3px 6px;5722  cursor: pointer;5723  outline: none;5724}5725.peach-settings-select:focus {5726  border-color: var(--peach-accent);5727}57285729/* ───────── Duress status pill (new polished) ───────── */5730.peach-duress-status-pill {5731  font-family: "IBM Plex Mono", monospace;5732  font-size: 0.5625rem;5733  text-transform: uppercase;5734  letter-spacing: 0.12em;5735  padding: 2px 8px;5736  border-radius: 12px;5737  background: var(--peach-t3);5738  color: var(--peach-t2);5739  flex-shrink: 0;5740}5741.peach-duress-status-pill.is-active {5742  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5743  color: var(--peach-accent);5744}57455746/* ───────── Entry advanced disclosure (canary) ───────── */5747.peach-entry-advanced {5748  margin-top: 12px;5749  border-top: 1px solid var(--peach-t3);5750  padding-top: 10px;5751  position: relative;5752  z-index: 1;5753}5754.peach-entry-advanced-toggle {5755  display: flex;5756  align-items: center;5757  justify-content: space-between;5758  width: 100%;5759  background: transparent;5760  border: none;5761  cursor: pointer;5762  padding: 0;5763  color: var(--peach-t2);5764}5765.peach-canary-section {5766  margin-top: 10px;5767  display: grid;5768  gap: 6px;5769}57705771/* ───────── Import: merge/replace radio choices ───────── */5772.peach-import-choice {5773  display: flex;5774  align-items: flex-start;5775  gap: 10px;5776  padding: 8px 10px;5777  border: 1px solid var(--peach-t3);5778  border-radius: 10px;5779  cursor: pointer;5780  margin-bottom: 6px;5781  transition: border-color 120ms ease, background 120ms ease;5782}5783.peach-import-choice:hover {5784  border-color: var(--peach-accent);5785}5786.peach-import-choice input[type="radio"] {5787  margin-top: 3px;5788  accent-color: var(--peach-accent);5789  flex-shrink: 0;5790}5791.peach-import-choice-main {5792  display: flex;5793  flex-direction: column;5794  gap: 2px;5795  min-width: 0;5796}5797.peach-import-choice-label {5798  font-size: 0.75rem;5799  color: var(--peach-t0);5800}5801.peach-import-choice-sub {5802  font-size: 0.6875rem;5803  color: var(--peach-t2);5804  line-height: 1.5;5805}58065807/* ───────── Export: success confirmation strip ───────── */5808.peach-export-success {5809  display: flex;5810  align-items: flex-start;5811  gap: 10px;5812  padding: 12px;5813  border-radius: 12px;5814  border: 1px solid rgba(150, 175, 110, 0.3);5815  background: rgba(150, 175, 110, 0.08);5816  color: var(--peach-t0);5817  font-size: 0.75rem;5818  line-height: 1.55;5819}5820.peach-export-success-check {5821  color: rgba(150, 175, 110, 0.9);5822  font-size: 0.875rem;5823  flex-shrink: 0;5824}58255826/* ── Trash view ──────────────────────────────────────────────────────── */5827.peach-trash-entry-row {5828  display: flex;5829  align-items: center;5830  justify-content: space-between;5831  gap: 8px;5832  padding: 8px 0;5833  border-bottom: 1px solid var(--peach-border);5834}5835.peach-trash-entry-info {5836  flex: 1;5837  min-width: 0;5838  display: flex;5839  flex-direction: column;5840  gap: 2px;5841}5842.peach-trash-entry-title {5843  font-size: 0.8125rem;5844  color: var(--peach-t0);5845  overflow: hidden;5846  text-overflow: ellipsis;5847  white-space: nowrap;5848}5849.peach-trash-entry-meta {5850  font-family: var(--font-mono);5851  font-size: 0.5625rem;5852  color: var(--peach-t2);5853  letter-spacing: 0.04em;5854}5855.peach-trash-entry-actions {5856  display: flex;5857  align-items: center;5858  gap: 4px;5859  flex-shrink: 0;5860}5861.peach-trash-delete-btn {5862  background: transparent;5863  border: 0;5864  color: var(--peach-t3);5865  font-size: 1rem;5866  line-height: 1;5867  cursor: pointer;5868  padding: 2px 5px;5869  transition: color 0.15s;5870}5871.peach-trash-delete-btn:hover { color: var(--peach-breach); }5872.peach-trash-list {5873  overflow-y: auto;5874}5875.peach-trash-footer {5876  display: flex;5877  align-items: center;5878  gap: 8px;5879  padding: 8px 0 0;5880  border-top: 1px solid var(--peach-border);5881  margin-top: 4px;5882}5883.peach-trash-purge-all {5884  background: transparent;5885  border: 0;5886  color: var(--peach-t3);5887  font-size: 0.625rem;5888  cursor: pointer;5889  padding: 4px 0;5890  letter-spacing: 0.03em;5891  transition: color 0.2s;5892}5893.peach-trash-purge-all:hover { color: var(--peach-breach); }5894.peach-trash-purge-confirm-label {5895  font-size: 0.625rem;5896  color: var(--peach-t1);5897  flex: 1;5898}58995900/* ── Settings shortcuts grid ─────────────────────────────────────────── */5901.peach-shortcuts-grid {5902  display: grid;5903  grid-template-columns: auto 1fr;5904  gap: 6px 12px;5905  align-items: center;5906  padding: 4px 0;5907}5908.peach-shortcut-key {5909  font-family: var(--font-mono);5910  font-size: 0.625rem;5911  color: var(--peach-t0);5912  background: var(--peach-t3);5913  border-radius: 4px;5914  padding: 2px 6px;5915  white-space: nowrap;5916  text-align: center;5917}5918.peach-shortcut-desc {5919  font-size: 0.6875rem;5920  color: var(--peach-t1);5921}59225923/* ── Sort bar trash button ───────────────────────────────────────────── */5924.peach-sort-trash-btn {5925  display: flex;5926  align-items: center;5927  justify-content: center;5928  padding: 3px 5px;5929  background: transparent;5930  border: none;5931  cursor: pointer;5932  color: var(--peach-t2);5933  border-radius: 4px;5934  transition: color 140ms ease, background 140ms ease;5935}5936.peach-sort-trash-btn:hover {5937  color: var(--peach-t1);5938  background: var(--peach-t3);5939}5940.peach-sort-trash-btn.is-active {5941  color: var(--peach-accent);5942}59435944/* Accent color picker */5945.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5946.peach-accent-picker {5947  display: flex;5948  flex-wrap: wrap;5949  gap: 7px;5950  padding: 2px 0;5951}5952.peach-accent-swatch {5953  width: 22px;5954  height: 22px;5955  border-radius: 50%;5956  border: 2px solid transparent;5957  cursor: pointer;5958  padding: 0;5959  transition: transform 100ms;5960  outline-offset: 2px;5961}5962.peach-accent-swatch:hover { transform: scale(1.15); }5963.peach-accent-swatch.is-active {5964  border-color: var(--peach-t0);5965  transform: scale(1.1);5966}59675968.peach-pill-group {5969  display: flex;5970  gap: 6px;5971}5972.peach-pill-group .peach-btn.is-active {5973  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5974  border-color: var(--peach-accent);5975  color: var(--peach-t0);5976}59775978/* ── Card entry styles ───────────────────────────────────────── */5979.peach-card-number {5980  font-family: var(--peach-mono);5981  letter-spacing: 0.08em;5982}59835984.peach-card-network-badge {5985  font-size: 0.625rem;5986  padding: 1px 5px;5987  border-radius: 4px;5988  border: 0.5px solid var(--peach-border);5989  color: var(--peach-text-dim);5990  margin-left: 6px;5991  vertical-align: middle;5992}59935994.peach-card-expiry-row {5995  display: flex;5996  align-items: center;5997  gap: 8px;5998}59996000.peach-card-expiry-sep {6001  color: var(--peach-text-dim);6002}60036004/* ── Pro tier — upgrade screen ──────────────────────────────── */6005.peach-pro-mark {6006  font-size: 0.5625rem;6007  color: var(--peach-accent);6008  margin-left: 6px;6009  vertical-align: super;6010  opacity: 0.7;6011}60126013.peach-pro-mini-badge {6014  display: block;6015  font-size: 0.625rem;6016  font-style: italic;6017  color: var(--peach-accent);6018  letter-spacing: 0.04em;6019  margin-top: -2px;6020  padding-left: 2px;6021  opacity: 0.85;6022  text-align: center;6023}60246025.peach-wordmark-stack {6026  display: inline-flex;6027  flex-direction: column;6028  align-items: center;6029}60306031/* ── Pro tier — upgrade page ─────────────────────────────────── */6032/* ── Pro upgrade — redesigned editorial layout ─────────────────── */60336034.peach-pro-upgrade {6035  display: flex;6036  flex-direction: column;6037  align-items: stretch;6038  gap: 10px;6039  padding: 2px 2px 12px;6040}60416042.peach-pro-eyebrow {6043  margin: 0;6044  font-family: var(--font-ui);6045  font-size: 0.625rem;6046  font-weight: 500;6047  letter-spacing: 0.12em;6048  color: var(--peach-accent);6049}60506051.peach-pro-headline {6052  margin: 0;6053  font-family: var(--font-display, "Cormorant Garamond", serif);6054  font-size: 30px;6055  font-weight: 700;6056  font-style: normal;6057  line-height: 1.05;6058  color: var(--peach-t0);6059  letter-spacing: -0.01em;6060}6061.peach-pro-headline em {6062  font-style: italic;6063  font-weight: 400;6064  color: var(--peach-accent);6065}60666067.peach-pro-subtitle {6068  margin: 0;6069  font-size: 0.6875rem;6070  line-height: 1.5;6071  color: var(--peach-t1);6072}60736074/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6075.peach-pro-section-label {6076  margin: 6px 0 0;6077  font-family: var(--font-ui);6078  font-size: 0.5625rem;6079  font-weight: 500;6080  letter-spacing: 0.12em;6081  text-transform: uppercase;6082  color: var(--peach-t2);6083}60846085/* 2-column numbered feature grid */6086.peach-pro-grid {6087  display: grid;6088  grid-template-columns: 1fr 1fr;6089  border-top: 1px solid var(--peach-border);6090  border-left: 1px solid var(--peach-border);6091}60926093.peach-pro-grid-item {6094  display: flex;6095  flex-direction: column;6096  gap: 2px;6097  padding: 8px 9px;6098  border-right: 1px solid var(--peach-border);6099  border-bottom: 1px solid var(--peach-border);6100}61016102.peach-pro-grid-item--wide {6103  grid-column: 1 / -1;6104}61056106.peach-pro-grid-num {6107  font-family: var(--font-mono);6108  font-size: 0.5625rem;6109  color: var(--peach-accent);6110  letter-spacing: 0.06em;6111  opacity: 0.85;6112}61136114.peach-pro-grid-name {6115  font-size: 0.8125rem;6116  font-weight: 500;6117  color: var(--peach-t0);6118  line-height: 1.2;6119}61206121.peach-pro-grid-desc {6122  font-size: 0.625rem;6123  color: var(--peach-t1);6124  line-height: 1.4;6125}61266127.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6128  animation: peach-pulse-accent 600ms ease-out forwards;6129}61306131@keyframes peach-pulse-accent {6132  0%   { opacity: 1; transform: scale(1.2); }6133  100% { opacity: 0.85; transform: scale(1); }6134}61356136/* Actions */6137.peach-pro-upgrade-actions {6138  display: flex;6139  flex-direction: column;6140  align-items: stretch;6141  gap: 10px;6142}61436144.peach-pro-pricing {6145  margin: 0;6146  font-size: 1rem;6147  font-weight: 600;6148  color: var(--peach-t0);6149  letter-spacing: 0.01em;6150}6151.peach-pro-pricing-sub {6152  font-size: 0.75rem;6153  font-weight: 400;6154  color: var(--peach-t1);6155  letter-spacing: 0.02em;6156}61576158.peach-pro-upgrade-cta {6159  display: flex;6160  align-items: center;6161  justify-content: center;6162  text-decoration: none;6163  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6164  border: 1px solid var(--peach-accent);6165  border-radius: 10px;6166  color: var(--peach-accent);6167  font-family: var(--font-ui);6168  font-size: 0.8125rem;6169  font-weight: 600;6170  letter-spacing: 0.06em;6171  padding: 11px 16px;6172  transition: background 0.15s ease, color 0.15s ease;6173}6174.peach-pro-upgrade-cta:hover {6175  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6176}61776178.peach-pro-key-divider {6179  display: flex;6180  align-items: center;6181  gap: 8px;6182  color: var(--peach-t2);6183  font-size: 0.5625rem;6184  letter-spacing: 0.1em;6185}6186.peach-pro-key-divider::before,6187.peach-pro-key-divider::after {6188  content: "";6189  flex: 1;6190  height: 1px;6191  background: var(--peach-border);6192}61936194/* Inline key entry row */6195.peach-pro-key-inline {6196  display: flex;6197  align-items: center;6198  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6199  border: 1px solid var(--peach-border);6200  border-radius: 8px;6201  overflow: hidden;6202}6203.peach-pro-key-inline-input {6204  flex: 1;6205  background: transparent;6206  border: none;6207  outline: none;6208  color: var(--peach-t1);6209  font-family: var(--font-mono);6210  font-size: 0.625rem;6211  letter-spacing: 0.06em;6212  padding: 9px 10px;6213}6214.peach-pro-key-inline-input::placeholder {6215  color: var(--peach-t2);6216}6217.peach-pro-key-apply {6218  background: transparent;6219  border: none;6220  border-left: 1px solid var(--peach-border);6221  color: var(--peach-t2);6222  font-family: var(--font-ui);6223  font-size: 0.5625rem;6224  font-weight: 600;6225  letter-spacing: 0.08em;6226  padding: 9px 10px;6227  cursor: pointer;6228  transition: color 0.15s ease;6229  flex-shrink: 0;6230}6231.peach-pro-key-apply:not(:disabled):hover {6232  color: var(--peach-accent);6233}6234.peach-pro-key-apply:disabled {6235  opacity: 0.35;6236  cursor: not-allowed;6237}62386239/* ── Pro tier — key ceremony ─────────────────────────────────── */6240.peach-pro-key-ceremony {6241  display: flex;6242  flex-direction: column;6243  align-items: center;6244  gap: 12px;6245  padding: 20px 4px 16px;6246}62476248.peach-pro-key-ceremony .peach-lock-rune-string {6249  font-size: 1rem;6250  gap: 12px;6251  flex: 0;6252  justify-content: center;6253}62546255.peach-pro-key-ceremony-label {6256  margin: 0;6257  font-size: 0.6875rem;6258  color: var(--peach-t2);6259  font-style: italic;6260  letter-spacing: 0.04em;6261}62626263.peach-pro-key-input {6264  font-family: var(--font-mono, monospace);6265  letter-spacing: 0.06em;6266  text-align: center;6267  width: 100%;6268  box-sizing: border-box;6269}62706271.peach-pro-key-error {6272  margin: 0;6273  font-size: 0.75rem;6274  text-align: center;6275  color: var(--peach-breach, #e55);6276  padding: 0;6277}62786279.peach-pro-key-activate {6280  width: 100%;6281  text-align: center;6282  box-sizing: border-box;6283  padding: 10px 20px;6284  font-size: 0.8125rem;6285}62866287.peach-pro-key-cancel {6288  background: transparent;6289  border: 0;6290  color: var(--peach-t2);6291  font-size: 0.6875rem;6292  cursor: pointer;6293  padding: 2px 8px;6294  transition: color 0.2s;6295}62966297.peach-pro-key-cancel:hover { color: var(--peach-accent); }62986299/* ── Pro tier — active state ─────────────────────────────────── */6300.peach-pro-active {6301  display: flex;6302  flex-direction: column;6303  align-items: center;6304  gap: 0;6305  padding: 8px 4px 16px;6306  min-height: 280px;6307}63086309.peach-pro-active-hero {6310  display: flex;6311  flex-direction: column;6312  align-items: center;6313  gap: 6px;6314  padding: 20px 0 8px;6315}63166317.peach-pro-active-mark-wrap {6318  display: flex;6319  align-items: center;6320  justify-content: center;6321  margin-bottom: 4px;6322}63236324.peach-pro-active-mark {6325  width: 60px;6326  height: 60px;6327}63286329.peach-pro-active-title {6330  font-family: var(--font-display, var(--font-ui));6331  font-size: 26px;6332  margin: 0;6333  color: var(--peach-t0);6334  letter-spacing: 0.01em;6335}63366337.peach-pro-active-since {6338  margin: 0;6339  font-size: 0.6875rem;6340  color: var(--peach-t2);6341  font-style: italic;6342}63436344.peach-pro-active-features {6345  display: flex;6346  flex-direction: column;6347  gap: 8px;6348  width: 100%;6349  padding: 14px 8px 0;6350  border-top: 1px solid var(--peach-border);6351  flex: 1;6352}63536354.peach-pro-active-feature {6355  display: flex;6356  align-items: center;6357  gap: 9px;6358}63596360.peach-pro-active-feature-mark {6361  color: var(--peach-accent);6362  font-size: 0.625rem;6363  opacity: 0.65;6364  flex-shrink: 0;6365}63666367.peach-pro-active-feature-name {6368  font-size: 0.75rem;6369  color: var(--peach-t1);6370}63716372.peach-pro-deactivate {6373  align-self: center;6374  background: transparent;6375  border: 0;6376  color: var(--peach-t3);6377  font-size: 0.625rem;6378  cursor: pointer;6379  padding: 8px 0 0;6380  margin-top: 16px;6381  letter-spacing: 0.03em;6382  transition: color 0.2s;6383}63846385.peach-pro-deactivate:hover { color: var(--peach-t2); }63866387.peach-pro-deactivate:disabled {6388  opacity: 0.5;6389  cursor: default;6390}63916392/* ── Pro card activation sparkles & thank-you ── */6393button.peach-pro-active-mark-wrap {6394  background: transparent;6395  border: 0;6396  padding: 0;6397  cursor: pointer;6398  position: relative;6399  overflow: visible;6400}64016402.peach-pro-sparks {6403  position: absolute;6404  inset: 0;6405  pointer-events: none;6406  overflow: visible;6407}64086409.peach-pro-spark {6410  position: absolute;6411  top: 50%;6412  left: 50%;6413  font-size: 9px;6414  line-height: 1;6415  opacity: 0;6416  transform: translate(-50%, -50%);6417  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;6418}64196420@keyframes peach-pro-spark-fly {6421  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }6422  25%  { opacity: 1; }6423  100% {6424    opacity: 0;6425    transform: translate(6426      calc(-50% + var(--spark-x, 0px)),6427      calc(-50% + var(--spark-y, -40px))6428    ) scale(0.8);6429  }6430}64316432.peach-pro-thankyou-text {6433  margin: 4px 0 0;6434  font-size: 0.6875rem;6435  font-style: italic;6436  color: currentColor;6437  opacity: 0;6438  animation: peach-pro-thankyou-flash 2.5s ease both;6439}64406441@keyframes peach-pro-thankyou-flash {6442  0%   { opacity: 0; transform: translateY(4px); }6443  15%  { opacity: 0.75; transform: translateY(0); }6444  75%  { opacity: 0.75; }6445  100% { opacity: 0; }6446}64476448/* ── Pro advanced health remediation queue ──────────────────── */6449.peach-health-pro-queue {6450  display: flex;6451  flex-direction: column;6452  gap: 10px;6453  padding: 12px;6454  margin: 0 0 12px;6455  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6456  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6457  border-radius: 10px;6458}64596460.peach-health-pro-queue-head {6461  display: flex;6462  justify-content: space-between;6463  align-items: baseline;6464}64656466.peach-health-pro-queue-title {6467  font-size: 0.75rem;6468  font-weight: 500;6469  letter-spacing: 0.04em;6470  text-transform: uppercase;6471  color: var(--peach-accent);6472}64736474.peach-health-pro-queue-score {6475  font-size: 0.6875rem;6476  color: var(--peach-t2);6477}64786479.peach-health-pro-row {6480  display: flex;6481  gap: 10px;6482  align-items: center;6483  padding: 8px 0;6484  border-top: 1px solid var(--peach-border);6485}64866487.peach-health-pro-row-info {6488  flex: 1;6489  display: flex;6490  flex-direction: column;6491  gap: 4px;6492  min-width: 0;6493}64946495.peach-health-pro-action {6496  flex: 0 0 auto;6497  padding: 4px 8px;6498  font-size: 0.5625rem;6499  letter-spacing: 0.08em;6500  text-transform: uppercase;6501}65026503.peach-health-pro-row-name {6504  font-size: 0.8125rem;6505  color: var(--peach-t0);6506  overflow: hidden;6507  text-overflow: ellipsis;6508  white-space: nowrap;6509}65106511.peach-health-pro-row-meta {6512  font-size: 0.6875rem;6513  color: var(--peach-t2);6514}65156516.peach-health-pro-bar {6517  height: 2px;6518  background: var(--peach-border);6519  border-radius: 2px;6520  overflow: hidden;6521  margin-top: 2px;6522}65236524.peach-health-pro-bar-fill {6525  height: 100%;6526  background: var(--peach-accent);6527  transition: width 200ms ease-out;6528}65296530/* ── Pro activation celebration ── */6531@keyframes peach-pro-bloom {6532  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6533  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6534                 drop-shadow(0 0 48px var(--peach-glow)); }6535  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6536}65376538@keyframes peach-pro-wordmark-in {6539  from { opacity: 0; transform: translateY(4px); }6540  to   { opacity: 1; transform: translateY(0); }6541}65426543@keyframes peach-pro-fade-out {6544  from { opacity: 1; }6545  to   { opacity: 0; }6546}65476548.peach-pro-celebration {6549  background:6550    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6551    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6552    var(--peach-bg);6553  border: 1px solid var(--peach-t3);6554  box-shadow:6555    0 2px 8px rgba(0,0,0,0.55),6556    0 14px 48px rgba(0,0,0,0.7),6557    0 0 0 1px rgba(240,232,216,0.04);6558  overflow: hidden;6559  width: 320px;6560  height: 520px;6561  display: flex;6562  flex-direction: column;6563  align-items: center;6564  justify-content: center;6565  gap: 8px;6566  padding: 32px 24px;6567  text-align: center;6568}65696570.peach-pro-celebration.is-leaving {6571  animation: peach-pro-fade-out 400ms ease forwards;6572}65736574.peach-pro-bloom-target {6575  display: flex;6576  align-items: center;6577  justify-content: center;6578  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6579  margin-bottom: 12px;6580}65816582.peach-pro-bloom-icon {6583  width: 48px;6584  height: 48px;6585}65866587.peach-pro-wordmark {6588  font-family: var(--font-display);6589  font-size: 22px;6590  font-style: italic;6591  font-weight: 400;6592  color: var(--peach-accent);6593  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6594}65956596.peach-pro-thankyou {6597  font-size: 0.75rem;6598  font-style: italic;6599  color: var(--peach-t2);6600  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6601}660266036604/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6605.peach-pro-notice-banner {6606  display: flex;6607  align-items: center;6608  gap: 8px;6609  padding: 7px 12px;6610  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6611  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6612  font-size: 0.6875rem;6613  color: var(--peach-t2);6614  font-family: "IBM Plex Mono", monospace;6615  flex-shrink: 0;6616}66176618.peach-pro-notice-link {6619  background: none;6620  border: none;6621  padding: 0;6622  cursor: pointer;6623  font-size: 0.6875rem;6624  color: var(--peach-accent);6625  font-family: "IBM Plex Mono", monospace;6626  margin-left: auto;6627  white-space: nowrap;6628}66296630.peach-pro-notice-close {6631  background: none;6632  border: none;6633  padding: 0 0 0 4px;6634  cursor: pointer;6635  font-size: 0.625rem;6636  color: var(--peach-t3);6637  line-height: 1;6638}66396640/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6641   Renders over whatever view is showing. 60-second expiry; the popup ticks6642   the countdown each second and clears the banner when it hits zero. */6643.peach-pair-request-banner {6644  display: flex;6645  flex-direction: column;6646  gap: 8px;6647  padding: 10px 12px;6648  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6649  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6650  font-family: "IBM Plex Mono", monospace;6651  flex-shrink: 0;6652}66536654.peach-pair-toast {6655  padding: 8px 12px;6656  font-family: "IBM Plex Mono", monospace;6657  font-size: 0.75rem;6658  color: var(--peach-t1);6659  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6660  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6661  flex-shrink: 0;6662  text-align: center;6663}66646665.peach-pair-toast strong {6666  color: var(--peach-t0);6667  font-weight: 500;6668}66696670.peach-pair-request-header {6671  display: flex;6672  align-items: center;6673  gap: 8px;6674  font-size: 0.75rem;6675  color: var(--peach-t1);6676}66776678.peach-pair-request-mark {6679  font-size: 0.875rem;6680  display: inline-flex;6681  align-items: center;6682}66836684.peach-pair-request-icon {6685  width: 1em;6686  height: 1em;6687}66886689.peach-pair-request-title {6690  font-weight: 600;6691  color: var(--peach-t0);6692}66936694.peach-pair-request-countdown {6695  margin-left: auto;6696  font-variant-numeric: tabular-nums;6697  color: var(--peach-t2);6698  font-size: 0.6875rem;6699}67006701.peach-pair-request-body {6702  margin: 0;6703  font-size: 0.75rem;6704  color: var(--peach-t1);6705  line-height: 1.4;6706}67076708.peach-pair-request-body strong {6709  color: var(--peach-t0);6710  font-weight: 600;6711}67126713.peach-pair-request-actions {6714  display: flex;6715  gap: 8px;6716  justify-content: flex-end;6717}67186719/* ─── First-run onboarding ──────────────────────────────────────────────6720   Three-card welcome shown once before vault creation. The PeachScript6721   rune background drifts behind everything at very low opacity — it's6722   atmosphere, not focus. The cards themselves use the same panel6723   language as the rest of the popup so the transition into NewVault is6724   continuous, not a jarring switch of visual register. */67256726.peach-onboarding {6727  position: relative;6728  display: flex;6729  flex-direction: column;6730  width: 100%;6731  height: 100%;6732  padding: 16px 16px 18px;6733  box-sizing: border-box;6734  overflow: hidden;6735  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6736}67376738.peach-onboarding.is-completing {6739  animation: peach-onboard-exit 200ms ease-out forwards;6740}67416742.peach-rune-background {6743  position: absolute;6744  inset: 0;6745  width: 100%;6746  height: 100%;6747  pointer-events: none;6748  z-index: 0;6749  transition: opacity 500ms ease-out;6750}67516752.peach-onboarding.is-completing .peach-rune-background {6753  opacity: 0;6754}67556756.peach-onboarding-header {6757  position: relative;6758  z-index: 1;6759  display: flex;6760  align-items: center;6761  margin-bottom: 14px;6762}67636764.peach-onboarding-card {6765  position: relative;6766  z-index: 1;6767  flex: 1;6768  display: flex;6769  flex-direction: column;6770  gap: 10px;6771  padding: 22px 20px;6772  border-radius: 16px;6773  border: 1px solid var(--peach-t3);6774  background:6775    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6776  backdrop-filter: blur(3px);6777  -webkit-backdrop-filter: blur(3px);6778  box-shadow:6779    inset 0 1px 0 rgba(240, 232, 216, 0.04),6780    0 12px 28px rgba(0, 0, 0, 0.12);6781  cursor: pointer;6782  user-select: none;6783  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6784}67856786.peach-onboarding-card.is-exiting {6787  animation: peach-card-out 120ms ease-in forwards;6788  pointer-events: none;6789}67906791.peach-onboarding-card-headline {6792  margin: 0;6793  font-family: var(--font-display);6794  font-style: italic;6795  font-weight: 400;6796  font-size: 22px;6797  line-height: 1.05;6798  color: var(--peach-t0);6799  white-space: pre-line;6800}68016802.peach-onboarding-divider {6803  margin: 4px 0 6px;6804  border: 0;6805  border-top: 1px solid var(--peach-t3);6806  width: 100%;6807}68086809.peach-onboarding-body {6810  margin: 0;6811  font-size: 0.8125rem;6812  line-height: 1.6;6813  color: var(--peach-t1);6814}68156816.peach-onboarding-warning {6817  display: flex;6818  align-items: flex-start;6819  gap: 8px;6820  margin: 6px 0 0;6821  padding-top: 8px;6822  border-top: 1px dashed var(--peach-t3);6823  font-size: 0.8125rem;6824  line-height: 1.5;6825  color: var(--peach-t1);6826}68276828.peach-onboarding-warning-icon {6829  color: var(--peach-accent);6830  font-size: 0.8125rem;6831  line-height: 1.5;6832  flex: 0 0 auto;6833}68346835.peach-onboarding-nav {6836  position: relative;6837  z-index: 1;6838  display: flex;6839  align-items: center;6840  justify-content: space-between;6841  margin-top: 12px;6842  padding: 0 4px;6843}68446845.peach-onboarding-dots {6846  display: flex;6847  align-items: center;6848  gap: 6px;6849}68506851.peach-onboarding-dot {6852  width: 6px;6853  height: 6px;6854  border-radius: 50%;6855  background: var(--peach-t2);6856  transition: width 200ms ease, height 200ms ease, background 200ms ease;6857}68586859.peach-onboarding-dot.is-active {6860  width: 8px;6861  height: 8px;6862  background: var(--peach-accent);6863}68646865.peach-onboarding-next {6866  background: none;6867  border: none;6868  padding: 4px 0;6869  cursor: pointer;6870  font-family: "IBM Plex Mono", monospace;6871  font-size: 0.6875rem;6872  letter-spacing: 0.04em;6873  color: var(--peach-t1);6874  transition: color 150ms ease;6875}68766877.peach-onboarding-next:hover {6878  color: var(--peach-t0);6879}68806881.peach-onboarding-next:disabled {6882  opacity: 0.5;6883  cursor: default;6884}68856886.peach-onboarding-back {6887  background: none;6888  border: none;6889  padding: 4px 0;6890  cursor: pointer;6891  font-family: "IBM Plex Mono", monospace;6892  font-size: 0.6875rem;6893  letter-spacing: 0.04em;6894  color: var(--peach-t2);6895  transition: color 150ms ease;6896}68976898.peach-onboarding-back:hover {6899  color: var(--peach-t0);6900}69016902.peach-onboarding-back:disabled {6903  opacity: 0.5;6904  cursor: default;6905}69066907/* Reserve back-button width on the first card so the dots stay centred */6908.peach-onboarding-back-spacer {6909  width: 44px;6910}69116912.peach-onboarding-choice-row {6913  display: grid;6914  grid-template-columns: 1fr;6915  gap: 8px;6916  margin-top: 14px;6917}69186919.peach-onboarding-choice {6920  min-height: 34px;6921  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);6922  border-radius: 8px;6923  padding: 8px 10px;6924  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);6925  color: var(--peach-t0);6926  font-size: 0.76rem;6927  font-weight: 700;6928  text-align: left;6929}69306931.peach-onboarding-choice--adopt {6932  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);6933  background: color-mix(in srgb, var(--peach-accent) 13%, transparent);6934}69356936.peach-adopt-vault {6937  position: relative;6938  min-height: 100%;6939  padding: 22px;6940  display: grid;6941  place-items: center;6942}69436944.peach-adopt-card {6945  position: relative;6946  z-index: 1;6947  width: min(100%, 330px);6948  padding: 20px;6949  border-radius: 8px;6950  border: 1px solid color-mix(in srgb, var(--peach-t0) 13%, transparent);6951  background: color-mix(in srgb, var(--peach-surface) 90%, transparent);6952  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);6953}69546955.peach-adopt-card h1 {6956  margin: 0 0 10px;6957  font-size: 1.28rem;6958  line-height: 1.15;6959}69606961.peach-adopt-card p {6962  margin: 0 0 14px;6963  color: var(--peach-t1);6964  line-height: 1.35;6965}69666967.peach-adopt-input {6968  margin-bottom: 12px;6969}69706971.peach-adopt-card textarea.peach-adopt-input {6972  width: 100%;6973  resize: vertical;6974  overflow-wrap: anywhere;6975  font-family: "IBM Plex Mono", monospace;6976  font-size: 0.64rem;6977}69786979.peach-adopt-qr-video {6980  display: block;6981  width: 100%;6982  max-height: 220px;6983  margin: 0 0 12px;6984  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);6985  border-radius: 8px;6986  background: #000;6987  object-fit: cover;6988}69896990.peach-adoption-source-invitation {6991  display: flex;6992  flex-direction: column;6993  align-items: center;6994  gap: 10px;6995  padding: 4px 18px 16px;6996  text-align: center;6997}69986999.peach-pair-qr {7000  display: block;7001  max-width: min(224px, 100%);7002  height: auto;7003  padding: 8px;7004  border-radius: 10px;7005  background: #fff;7006}70077008/* The same invitation the QR carries, as text — the fallback when a camera7009   won't cooperate. Monospace and full width so it can be read out loud. */7010.peach-pair-invitation-text {7011  width: 100%;7012  resize: none;7013  padding: 8px 10px;7014  border-radius: 10px;7015  border: 1px solid var(--peach-border);7016  background: color-mix(in srgb, var(--peach-t0) 3%, transparent);7017  color: var(--peach-t1);7018  font-family: var(--peach-mono, ui-monospace, SFMono-Regular, Menlo, monospace);7019  font-size: 10px;7020  line-height: 1.5;7021  word-break: break-all;7022}70237024.peach-adopt-card > .peach-btn + .peach-btn {7025  margin-top: 8px;7026}70277028.peach-adopt-actions {7029  display: flex;7030  gap: 10px;7031  margin-top: 14px;7032}70337034.peach-adopt-actions > button {7035  flex: 1;7036}70377038.peach-adopt-birds {7039  width: 120px;7040  height: 54px;7041  margin-bottom: 14px;7042  position: relative;7043}70447045.peach-adopt-birds::before {7046  content: "";7047  position: absolute;7048  left: 29px;7049  right: 29px;7050  top: 25px;7051  height: 1px;7052  background: color-mix(in srgb, var(--peach-accent) 50%, transparent);7053}70547055.peach-adopt-birds span {7056  position: absolute;7057  top: 11px;7058  width: 34px;7059  height: 28px;7060  border-radius: 50% 50% 46% 46%;7061  background: color-mix(in srgb, var(--peach-accent) 45%, var(--peach-t0));7062  box-shadow: 0 0 18px color-mix(in srgb, var(--peach-accent) 24%, transparent);7063  animation: peach-adopt-bob 1.8s ease-in-out infinite;7064}70657066.peach-adopt-birds span:first-child {7067  left: 12px;7068}70697070.peach-adopt-birds span:last-child {7071  right: 12px;7072  animation-delay: 0.25s;7073}70747075.peach-adopt-sas {7076  margin: 18px 0;7077  padding: 14px;7078  border-radius: 8px;7079  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);7080  color: var(--peach-t0);7081  font-size: 1.35rem;7082  font-weight: 800;7083  font-variant-numeric: tabular-nums;7084  text-align: center;7085}70867087@keyframes peach-adopt-bob {7088  0%, 100% { transform: translateY(0); }7089  50% { transform: translateY(-5px); }7090}70917092.peach-onboarding-mobile-card-buttons {7093  display: flex;7094  flex-direction: column;7095  gap: 8px;7096  margin-top: 16px;7097}70987099@keyframes peach-onboard-enter {7100  from { opacity: 0; transform: translateY(20px); }7101  to   { opacity: 1; transform: translateY(0); }7102}71037104@keyframes peach-onboard-exit {7105  from { opacity: 1; }7106  to   { opacity: 0; }7107}71087109@keyframes peach-card-in {7110  from { opacity: 0; transform: translateX(12px); }7111  to   { opacity: 1; transform: translateX(0); }7112}71137114@keyframes peach-card-out {7115  from { opacity: 1; transform: translateX(0); }7116  to   { opacity: 0; transform: translateX(-12px); }7117}71187119/* ─── New vault screen — matched to onboarding card language ─────────── */71207121/* Two classes so this beats the shared .peach-screen.lock-screen--vault-stage7122   rule (same element) without loosening the unlock/restore screens. The7123   create-vault screen is the only vault-stage view tall enough to overflow7124   the 520px popup, so its spacing is tuned to fit header → card → restore →7125   recovery warning with nothing clipped. */7126.peach-screen.peach-newvault {7127  position: relative;7128  display: flex;7129  flex-direction: column;7130  gap: 12px;7131  padding: 14px 16px 12px;7132  overflow: hidden;7133}71347135/* Suppress the warm-blob ambient art inherited from .lock-screen — the7136   new vault card now carries the visual weight. */7137.peach-newvault::before {7138  content: none;7139}71407141.peach-newvault-header {7142  position: relative;7143  z-index: 2;7144  display: flex;7145  align-items: center;7146  gap: 10px;7147  margin-bottom: 2px;7148}71497150.peach-newvault-back {7151  display: inline-flex;7152  align-items: center;7153  gap: 4px;7154  background: transparent;7155  border: none;7156  color: var(--peach-t2);7157  font-family: "IBM Plex Mono", monospace;7158  font-size: 0.625rem;7159  letter-spacing: 0.06em;7160  cursor: pointer;7161  padding: 4px 6px;7162  border-radius: 6px;7163  transition: color 120ms ease, background 120ms ease;7164}71657166.peach-newvault-back:hover {7167  color: var(--peach-t0);7168  background: rgba(240, 232, 216, 0.04);7169}71707171.peach-newvault-mark {7172  position: absolute;7173  right: -12px;7174  top: 6px;7175  width: 110px;7176  height: 110px;7177  pointer-events: none;7178  opacity: 0.10;7179  filter: saturate(0.9);7180  z-index: 0;7181}7182.peach-newvault-mark-art {7183  width: 100%;7184  height: 100%;7185}7186.peach-newvault-mark-art path:nth-child(1) {7187  fill: rgba(123, 144, 96, 0.88);7188}7189.peach-newvault-mark-art path:nth-child(2) {7190  stroke: rgba(94, 122, 66, 0.95);7191}71927193.peach-newvault-card {7194  position: relative;7195  z-index: 1;7196  display: flex;7197  flex-direction: column;7198  gap: 8px;7199  padding: 16px 20px 14px;7200  border-radius: 16px;7201  border: 1px solid var(--peach-t3);7202  background:7203    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));7204  backdrop-filter: blur(3px);7205  -webkit-backdrop-filter: blur(3px);7206  box-shadow:7207    inset 0 1px 0 rgba(240, 232, 216, 0.04),7208    0 12px 28px rgba(0, 0, 0, 0.12);7209  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;7210}72117212.peach-newvault-headline {7213  margin: 0;7214  font-family: var(--font-display);7215  font-style: italic;7216  font-weight: 400;7217  font-size: 24px;7218  line-height: 1.05;7219  color: var(--peach-t0);7220  white-space: pre-line;7221}72227223.peach-newvault-divider {7224  margin: 2px 0 4px;7225  border: 0;7226  border-top: 1px solid var(--peach-t3);7227  width: 100%;7228}72297230.peach-newvault-field {7231  display: flex;7232  flex-direction: column;7233  gap: 4px;7234}72357236.peach-newvault-label-row {7237  display: flex;7238  align-items: center;7239  justify-content: space-between;7240}72417242/* Monospace input scaled to the card. Replaces the 22px unlock-input7243   so the placeholder no longer overflows and the field reads as part7244   of the same surface as the body copy. */7245.peach-newvault-input {7246  font-size: 0.875rem;7247  letter-spacing: 0.18em;7248  padding: 8px 0;7249}7250.peach-newvault-input::placeholder {7251  letter-spacing: 0.18em;7252  color: var(--peach-t2);7253}72547255.peach-newvault-hint {7256  margin: 2px 0 0;7257  font-family: "IBM Plex Mono", monospace;7258  font-size: 0.625rem;7259  color: var(--peach-t2);7260  letter-spacing: 0.04em;7261}72627263.peach-newvault-submit {7264  margin-top: 4px;7265}72667267.peach-newvault-warning {7268  display: flex;7269  align-items: flex-start;7270  gap: 8px;7271  margin: 2px 0 0;7272  padding-top: 8px;7273  border-top: 1px dashed var(--peach-t3);7274  font-size: 0.75rem;7275  line-height: 1.45;7276  color: var(--peach-t1);7277}72787279.peach-newvault-warning-icon {7280  color: var(--peach-accent);7281  font-size: 0.8125rem;7282  line-height: 1.4;7283  flex: 0 0 auto;7284}72857286/* Restore options sit inside the card, directly under "create vault", so7287   they are always reachable without scrolling. The top divider mirrors the7288   warning's so the choice reads as a deliberate fork, not a footnote. */7289.peach-newvault-restore {7290  position: relative;7291  z-index: 1;7292  display: flex;7293  flex-direction: column;7294  gap: 4px;7295  margin-top: 4px;7296  padding-top: 10px;7297  border-top: 1px dashed var(--peach-t3);7298}72997300/* Settings body — warm accent gradient gives the glass something to blur against */7301.peach-settings-body {7302  background:7303    radial-gradient(7304      ellipse at 30% 20%,7305      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7306      transparent 60%7307    );7308}73097310/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7311/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7312 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7313 * (replacing the vault from a backup file) and "hazard" for actions that7314 * are absolutely irreversible (Panic). Both use the same card scaffold so7315 * they read as a pair, but the colour family signals the severity at a7316 * glance — yellow for caution, red for don't.7317 */7318.peach-danger-card {7319  --danger-tint: 235, 158, 52; /* amber */7320  display: flex;7321  flex-direction: column;7322  gap: 8px;7323  padding: 14px;7324  margin-top: 10px;7325  border-radius: 12px;7326  border: 1px solid rgba(var(--danger-tint), 0.32);7327  background:7328    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7329    rgba(var(--danger-tint), 0.04);7330  box-shadow:7331    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7332    0 0 24px rgba(var(--danger-tint), 0.04);7333  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7334}73357336.peach-danger-card:hover {7337  border-color: rgba(var(--danger-tint), 0.55);7338  box-shadow:7339    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7340    0 0 36px rgba(var(--danger-tint), 0.10);7341}73427343.peach-danger-card--hazard {7344  --danger-tint: 220, 38, 38; /* red */7345}73467347.peach-danger-card-head {7348  display: flex;7349  align-items: center;7350  gap: 10px;7351}73527353.peach-danger-card-glyph {7354  width: 28px;7355  height: 28px;7356  flex-shrink: 0;7357  display: flex;7358  align-items: center;7359  justify-content: center;7360  border-radius: 8px;7361  background: rgba(var(--danger-tint), 0.12);7362  color: rgba(var(--danger-tint), 0.95);7363  font-size: 1rem;7364  line-height: 1;7365}73667367.peach-danger-card-title {7368  margin: 0;7369  font-size: 0.8125rem;7370  font-weight: 600;7371  color: rgba(var(--danger-tint), 0.92);7372  letter-spacing: 0.01em;7373}73747375.peach-danger-card-copy {7376  margin: 0;7377  font-size: 0.6875rem;7378  line-height: 1.5;7379  color: var(--peach-t2);7380}73817382.peach-danger-card-button {7383  width: 100%;7384  padding: 9px;7385  margin-top: 4px;7386  background: transparent;7387  border: 1px solid rgba(var(--danger-tint), 0.45);7388  border-radius: 8px;7389  color: rgba(var(--danger-tint), 0.9);7390  font-size: 0.75rem;7391  font-weight: 500;7392  letter-spacing: 0.02em;7393  cursor: pointer;7394  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7395}73967397.peach-danger-card-button:hover {7398  background: rgba(var(--danger-tint), 0.10);7399  border-color: rgba(var(--danger-tint), 0.75);7400  color: rgb(var(--danger-tint));7401}74027403.peach-adoption-sas {7404  margin: 16px auto 0;7405  padding: 12px 16px;7406  border: 1px solid color-mix(in srgb, var(--peach-t0) 18%, transparent);7407  border-radius: 10px;7408  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);7409  color: var(--peach-t0);7410  text-align: center;7411}74127413.peach-adoption-sas strong {7414  font-size: 1.65rem;7415  font-variant-numeric: tabular-nums;7416  letter-spacing: 0.18em;7417  white-space: nowrap;7418}74197420/* ── Panic flow (three-step destruction) ───────────────────────────────── */7421.peach-panic {7422  display: flex;7423  flex-direction: column;7424  flex: 1;7425  min-height: 0;7426  padding: 28px 20px 20px;7427  gap: 18px;7428  overflow-y: auto;7429  scrollbar-width: none;7430  -ms-overflow-style: none;7431}74327433.peach-panic::-webkit-scrollbar { display: none; }74347435.peach-panic-step2 {7436  background: rgba(220, 38, 38, 0.04);7437}74387439.peach-panic-step3 {7440  position: relative;7441  background: #0f0505;7442  color: #ffffff;7443  overflow: hidden;7444}74457446.peach-panic-rune-bg {7447  position: absolute;7448  inset: 0;7449  opacity: 0.22;7450  pointer-events: none;7451  overflow: hidden;7452}74537454.peach-panic-rune-bg canvas {7455  width: 100% !important;7456  height: 100% !important;7457}74587459.peach-panic-icon {7460  font-size: 32px;7461  color: rgb(220, 38, 38);7462  line-height: 1;7463}74647465.peach-panic-title {7466  margin: 0;7467  font-size: 18px;7468  font-weight: 500;7469  color: var(--peach-t1);7470}74717472.peach-panic-title--severe {7473  font-size: 20px;7474  font-weight: 700;7475  color: rgb(220, 38, 38);7476}74777478.peach-panic-body {7479  margin: 0;7480  font-size: 0.8125rem;7481  line-height: 1.55;7482  color: var(--peach-t2);7483}74847485.peach-panic-body--severe {7486  color: rgba(220, 38, 38, 0.85);7487}74887489.peach-panic-body--final {7490  font-size: 1rem;7491  font-weight: 700;7492  color: rgb(255, 80, 80);7493  line-height: 1.4;7494}74957496.peach-panic-body--final-intro {7497  font-size: 1rem;7498  color: #ffffff;7499  font-weight: 400;7500}75017502.peach-panic-divider {7503  height: 1px;7504  background: rgba(255, 255, 255, 0.08);7505  margin: 4px 0;7506}75077508.peach-panic-confirm-input {7509  width: 100%;7510  padding: 10px 12px;7511  background: rgba(255, 255, 255, 0.02);7512  border: 1px solid rgba(220, 38, 38, 0.4);7513  border-radius: 8px;7514  color: var(--peach-t1);7515  font-family: "IBM Plex Mono", monospace;7516  font-size: 0.875rem;7517  letter-spacing: 0.12em;7518  text-transform: uppercase;7519}75207521.peach-panic-confirm-input:focus {7522  outline: none;7523  border-color: rgb(220, 38, 38);7524}75257526.peach-panic-confirm-input--match {7527  border-color: rgb(220, 38, 38);7528  color: rgb(220, 38, 38);7529}75307531.peach-panic-confirm-label {7532  font-size: 0.6875rem;7533  color: var(--peach-t2);7534  margin: 0 0 -8px;7535  letter-spacing: 0.06em;7536}75377538.peach-panic-actions {7539  display: flex;7540  flex-direction: column;7541  gap: 10px;7542  margin-top: auto;7543}75447545.peach-panic-button {7546  width: 100%;7547  padding: 12px;7548  border-radius: 8px;7549  font-size: 0.8125rem;7550  cursor: pointer;7551  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7552}75537554.peach-panic-button--primary {7555  background: var(--peach-accent);7556  border: 1px solid var(--peach-accent);7557  color: #ffffff;7558  font-weight: 600;7559}75607561.peach-panic-button--primary:hover {7562  background: color-mix(in srgb, var(--peach-accent) 88%, white);7563}75647565.peach-panic-button--danger {7566  background: rgb(220, 38, 38);7567  border: 1px solid rgb(220, 38, 38);7568  color: #ffffff;7569  font-weight: 600;7570}75717572.peach-panic-button--danger:disabled {7573  opacity: 0.35;7574  cursor: not-allowed;7575}75767577.peach-panic-button--ghost {7578  background: transparent;7579  border: 1px solid rgba(255, 255, 255, 0.18);7580  color: var(--peach-t2);7581}75827583.peach-panic-button--ghost:hover {7584  border-color: rgba(255, 255, 255, 0.32);7585  color: var(--peach-t1);7586}75877588.peach-panic-link {7589  background: transparent;7590  border: none;7591  padding: 4px 0;7592  color: rgba(220, 38, 38, 0.65);7593  font-size: 0.75rem;7594  cursor: pointer;7595  text-align: left;7596  text-decoration: underline;7597  text-underline-offset: 3px;7598}75997600.peach-panic-link:hover {7601  color: rgb(220, 38, 38);7602}76037604.peach-panic-bar {7605  background: rgb(220, 38, 38);7606  padding: 16px 20px;7607  margin: -28px -20px 0;7608  text-align: center;7609  font-size: 0.8125rem;7610  font-weight: 700;7611  letter-spacing: 0.12em;7612  color: #ffffff;7613}76147615.peach-panic-final-button {7616  width: 100%;7617  padding: 14px;7618  background: rgb(220, 38, 38);7619  border: none;7620  border-radius: 8px;7621  color: #ffffff;7622  font-size: 0.875rem;7623  font-weight: 700;7624  letter-spacing: 0.08em;7625  text-transform: uppercase;7626  cursor: pointer;7627  animation: peach-panic-pulse 2s ease-in-out infinite;7628}76297630.peach-settings-license {7631  margin-top: 10px;7632  padding-top: 10px;7633  border-top: 1px solid var(--peach-t3);7634}76357636.peach-settings-label {7637  font-size: 0.625rem;7638  letter-spacing: 0.08em;7639  color: var(--peach-t3);7640  display: block;7641  margin-bottom: 6px;7642}76437644.peach-settings-license-row {7645  display: flex;7646  align-items: center;7647  justify-content: space-between;7648  gap: 8px;7649}76507651.peach-settings-license-key {7652  font-family: 'IBM Plex Mono', monospace;7653  font-size: 0.75rem;7654  color: var(--peach-t0);7655  letter-spacing: 0.04em;7656  word-break: break-all;7657  flex: 1;7658  min-width: 0;7659}76607661.peach-settings-license-key--masked {7662  font-family: 'IBM Plex Mono', monospace;7663  font-size: 0.6rem;7664  color: var(--peach-t1);7665  letter-spacing: 0.18em;7666  user-select: none;7667}76687669.peach-settings-license-actions {7670  display: flex;7671  align-items: center;7672  gap: 2px;7673  flex-shrink: 0;7674}76757676.peach-settings-license-copy {7677  font-size: 0.6875rem;7678  color: var(--peach-accent);7679  background: transparent;7680  border: none;7681  cursor: pointer;7682  padding: 4px 8px;7683  border-radius: 4px;7684  flex-shrink: 0;7685  transition: opacity 150ms ease;7686}76877688.peach-settings-license-copy:hover {7689  opacity: 0.75;7690}76917692.peach-settings-license-toggle {7693  display: flex;7694  align-items: center;7695  justify-content: center;7696  background: transparent;7697  border: none;7698  cursor: pointer;7699  padding: 4px 6px;7700  border-radius: 4px;7701  color: var(--peach-t2);7702  transition: color 150ms ease;7703}77047705.peach-settings-license-toggle:hover {7706  color: var(--peach-t1);7707}77087709@keyframes peach-panic-pulse {7710  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7711  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7712}77137714[data-motion="reduce"] .peach-panic-final-button {7715  animation: none;7716}77177718/* Vault History — Settings → Vault sub-view */77197720.peach-history-list {7721  border: 1px solid var(--peach-border);7722  border-radius: 8px;7723  overflow: hidden;7724  margin: 8px 0 4px;7725}77267727.peach-history-row {7728  display: flex;7729  align-items: center;7730  justify-content: space-between;7731  padding: 9px 12px;7732  gap: 10px;7733  border-bottom: 1px solid var(--peach-border);7734}77357736.peach-history-row:last-child {7737  border-bottom: none;7738}77397740.peach-history-meta {7741  display: flex;7742  flex-direction: column;7743  gap: 2px;7744  min-width: 0;7745  flex: 1;7746}77477748.peach-history-time {7749  font-size: 0.75rem;7750  font-family: 'IBM Plex Mono', ui-monospace, monospace;7751  color: var(--peach-t0);7752  white-space: nowrap;7753  overflow: hidden;7754  text-overflow: ellipsis;7755}77567757.peach-history-sub {7758  font-size: 0.625rem;7759  color: var(--peach-t2);7760  letter-spacing: 0.06em;7761  text-transform: uppercase;7762  white-space: nowrap;7763  overflow: hidden;7764  text-overflow: ellipsis;7765}77667767.peach-history-btn {7768  flex-shrink: 0;7769  white-space: nowrap;7770  min-width: 56px;7771  text-align: center;7772}77737774.peach-history-btn.is-busy {7775  opacity: 0.65;7776}77777778.peach-history-footer {7779  font-size: 0.625rem;7780  color: var(--peach-t3);7781  letter-spacing: 0.05em;7782  text-align: right;7783  margin: 0;7784  padding: 2px 0 0;7785}77867787/* ── Context menu + swipe-copy flash ─────────────────────── */7788.peach-context-menu-backdrop {7789  position: fixed;7790  inset: 0;7791  background: rgba(0, 0, 0, 0.45);7792  z-index: 100;7793  display: flex;7794  align-items: flex-end;7795  justify-content: center;7796  animation: peach-ctx-fade 140ms ease both;7797}7798.peach-context-menu {7799  width: min(360px, calc(100vw - 24px));7800  margin-bottom: max(env(safe-area-inset-bottom), 12px);7801  background: var(--peach-bg);7802  border: 1px solid var(--peach-t3);7803  border-radius: 14px;7804  padding: 6px;7805  display: flex;7806  flex-direction: column;7807  gap: 2px;7808  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7809  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7810}7811@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7812@keyframes peach-ctx-rise {7813  from { transform: translateY(16px); opacity: 0; }7814  to   { transform: translateY(0);    opacity: 1; }7815}7816.peach-context-menu-item {7817  background: transparent;7818  color: var(--peach-t0);7819  border: 0;7820  border-radius: 10px;7821  padding: 12px 14px;7822  text-align: left;7823  font: inherit;7824  cursor: pointer;7825}7826.peach-context-menu-item:hover,7827.peach-context-menu-item:focus-visible {7828  background: var(--peach-t3);7829}7830.peach-context-menu-item--danger {7831  color: var(--peach-health-bad, #d96868);7832}7833.peach-context-menu-item--cancel {7834  color: var(--peach-t2);7835  margin-top: 4px;7836  border-top: 1px solid var(--peach-t3);7837  border-radius: 0 0 10px 10px;7838}78397840/* Swipe-to-copy flash */7841.peach-entry-row.is-copy-flash {7842  animation: peach-copy-flash 600ms ease both;7843}7844@keyframes peach-copy-flash {7845  0%   { background: transparent; }7846  20%  { background: rgba(217, 153, 51, 0.32); }7847  100% { background: transparent; }7848}78497850html { font-size: 16px; }78517852/* ── Recovery word entry ─────────────────────────────────────────── */7853.peach-lock-recover-link {7854  display: block;7855  width: 100%;7856  margin-top: 12px;7857  background: none;7858  border: none;7859  font-family: "IBM Plex Mono", monospace;7860  font-size: 0.625rem;7861  letter-spacing: 0.06em;7862  color: var(--peach-t2);7863  cursor: pointer;7864  text-align: center;7865  padding: 4px;7866  transition: color 120ms ease;7867}7868.peach-lock-recover-link:hover {7869  color: var(--peach-t0);7870}78717872.lock-screen--recovery {7873  display: flex;7874  flex-direction: column;7875  align-items: stretch;7876  padding: 12px 20px 24px;7877  overflow: hidden;7878}78797880.peach-recovery-nav {7881  display: flex;7882  align-items: center;7883  position: relative;7884  z-index: 1;7885  margin-bottom: 4px;7886}78877888/* Mask runes to the top decorative band only — keep inputs and the7889   bottom CTA button clear. The bottom of the popup is reserved for7890   submit buttons; rendering runes there overlaps the button glyph. */7891.peach-rune-background--recovery {7892  -webkit-mask-image: linear-gradient(7893    to bottom,7894    black 0px, black 85px,7895    transparent 110px,7896    transparent 100%7897  );7898  mask-image: linear-gradient(7899    to bottom,7900    black 0px, black 85px,7901    transparent 110px,7902    transparent 100%7903  );7904}79057906.peach-recovery-header {7907  text-align: center;7908  margin-bottom: 16px;7909  margin-top: 4px;7910}7911.peach-recovery-header .peach-onboarding-headline {7912  font-size: 1.25rem;7913  font-weight: 300;7914  letter-spacing: 0.02em;7915  margin: 0 0 4px;7916}7917.peach-recovery-header .peach-hint {7918  font-family: "IBM Plex Mono", monospace;7919  font-size: 0.625rem;7920  color: var(--peach-t2);7921  letter-spacing: 0.04em;7922  margin: 0;7923}79247925/* 12-word grid: 2 columns × 6 rows */7926.peach-recovery-grid {7927  display: grid;7928  grid-template-columns: repeat(2, 1fr);7929  gap: 12px 20px;7930  width: 100%;7931  margin-bottom: 0;7932}79337934.peach-recovery-word-slot {7935  display: flex;7936  align-items: center;7937  gap: 6px;7938  min-width: 0;7939}79407941.peach-recovery-word-index {7942  font-family: "IBM Plex Mono", monospace;7943  font-size: 0.5rem;7944  color: rgba(255, 255, 255, 0.35);7945  min-width: 14px;7946  flex-shrink: 0;7947  text-align: right;7948  letter-spacing: 0.04em;7949}79507951.peach-recovery-word-input {7952  flex: 1;7953  min-width: 0;7954  background: transparent;7955  border: none;7956  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7957  color: var(--peach-t0);7958  font-family: "IBM Plex Mono", monospace;7959  font-size: 0.6875rem;7960  letter-spacing: 0.06em;7961  padding: 5px 2px 4px;7962  outline: none;7963  text-transform: lowercase;7964  transition: border-color 120ms ease;7965}7966.peach-recovery-word-input::placeholder {7967  color: rgba(255, 255, 255, 0.18);7968}7969.peach-recovery-word-input:focus {7970  border-bottom-color: var(--peach-accent);7971}79727973.peach-recovery-submit {7974  width: 100%;7975  margin-top: auto;7976}79777978.peach-recovery-new-password-form {7979  width: 100%;7980  display: flex;7981  flex-direction: column;7982  gap: 16px;7983  margin-bottom: 8px;7984}7985.peach-recovery-new-password-form .peach-newvault-field {7986  display: flex;7987  flex-direction: column;7988  gap: 4px;7989}79907991/* ── Recovery words display (post-create) ────────────────────────── */7992.lock-screen--recovery-display {7993  display: flex;7994  flex-direction: column;7995  align-items: stretch;7996  padding: 0 20px 20px;7997  min-height: 0;7998  overflow-y: auto;7999}80008001.peach-recovery-words-display {8002  width: 100%;8003  margin-bottom: 16px;8004  border: 1px solid var(--peach-t3);8005  border-radius: 8px;8006  padding: 12px 14px;8007  background: rgba(245, 240, 234, 0.04);8008}80098010.peach-recovery-words-label {8011  font-family: "IBM Plex Mono", monospace;8012  font-size: 0.5rem;8013  letter-spacing: 0.08em;8014  color: var(--peach-t2);8015  text-transform: uppercase;8016  margin-bottom: 10px;8017}80188019.peach-recovery-word-list {8020  list-style: none;8021  margin: 0;8022  padding: 0;8023  display: grid;8024  grid-template-columns: repeat(2, 1fr);8025  gap: 6px 16px;8026}80278028.peach-recovery-word-item {8029  display: flex;8030  align-items: baseline;8031  gap: 5px;8032}80338034.peach-recovery-word-num {8035  font-family: "IBM Plex Mono", monospace;8036  font-size: 0.5rem;8037  color: var(--peach-t2);8038  width: 14px;8039  flex: 0 0 14px;8040  text-align: right;8041  letter-spacing: 0.04em;8042  font-variant-numeric: tabular-nums;8043}80448045.peach-recovery-download-btn {8046  display: block;8047  margin: 10px auto 0;8048  padding: 4px 10px;8049  background: transparent;8050  border: 1px solid var(--peach-border);8051  border-radius: 6px;8052  color: var(--peach-t2);8053  font-family: "IBM Plex Mono", monospace;8054  font-size: 0.5625rem;8055  letter-spacing: 0.06em;8056  text-transform: lowercase;8057  cursor: pointer;8058  transition: border-color 0.15s, color 0.15s;8059}80608061.peach-recovery-download-btn:hover {8062  border-color: var(--peach-accent);8063  color: var(--peach-t0);8064}80658066.peach-recovery-word-text {8067  font-family: "IBM Plex Mono", monospace;8068  font-size: 0.6875rem;8069  letter-spacing: 0.06em;8070  color: var(--peach-t0);8071  text-transform: lowercase;8072}80738074.peach-hint--warning {8075  color: var(--peach-accent);8076  font-style: italic;8077}8078.peach-hint--success {8079  color: var(--peach-t2);8080  font-family: "IBM Plex Mono", monospace;8081  font-size: 0.625rem;8082  letter-spacing: 0.06em;8083}80848085/* Confirmation step */8086.peach-recovery-confirm {8087  width: 100%;8088  flex: 1;8089  display: flex;8090  flex-direction: column;8091}8092.peach-recovery-confirm-label {8093  font-family: "IBM Plex Mono", monospace;8094  font-size: 0.5625rem;8095  letter-spacing: 0.04em;8096  color: var(--peach-t2);8097  text-align: center;8098  margin: 0 0 12px;8099}8100.peach-recovery-confirm-fields {8101  display: flex;8102  flex-direction: column;8103  gap: 14px;8104  margin-bottom: 10px;8105}8106.peach-recovery-confirm-field {8107  display: flex;8108  align-items: center;8109  gap: 8px;8110}8111.peach-recovery-confirm-num {8112  font-family: "IBM Plex Mono", monospace;8113  font-size: 0.5rem;8114  color: var(--peach-t2);8115  min-width: 44px;8116  letter-spacing: 0.04em;8117}8118.peach-recovery-confirm-input {8119  flex: 1;8120  background: transparent;8121  border: none;8122  border-bottom: 1px solid var(--peach-t3);8123  color: var(--peach-t0);8124  font-family: "IBM Plex Mono", monospace;8125  font-size: 0.6875rem;8126  letter-spacing: 0.06em;8127  padding: 4px 2px 3px;8128  outline: none;8129  text-transform: lowercase;8130  transition: border-color 120ms ease;8131}8132.peach-recovery-confirm-input:focus {8133  border-bottom-color: var(--peach-accent);8134}8135.peach-recovery-confirm-input:disabled {8136  opacity: 0.4;8137  cursor: not-allowed;8138}8139.peach-recovery-confirm-btn {8140  width: 100%;8141  margin-top: auto;8142}81438144/* ============================================================8145   Sync info sheet8146   ============================================================ */81478148.peach-sync-info-backdrop {8149  position: fixed;8150  inset: 0;8151  z-index: 200;8152  background: rgba(0, 0, 0, 0.55);8153  display: flex;8154  align-items: flex-end;8155  animation: peach-fade-in 200ms ease forwards;8156}81578158@keyframes peach-fade-in {8159  from { opacity: 0; }8160  to   { opacity: 1; }8161}81628163.peach-sync-info-sheet {8164  width: 100%;8165  background: var(--peach-bg-card, var(--peach-bg));8166  border-top-left-radius: 20px;8167  border-top-right-radius: 20px;8168  padding: 12px 24px 32px;8169  display: flex;8170  flex-direction: column;8171  gap: 20px;8172  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;8173}81748175@keyframes peach-sheet-up {8176  from { transform: translateY(100%); }8177  to   { transform: translateY(0); }8178}81798180.peach-sync-info-handle {8181  width: 36px;8182  height: 4px;8183  border-radius: 2px;8184  background: var(--peach-border);8185  margin: 0 auto 4px;8186  flex-shrink: 0;8187}81888189.peach-sync-info-title {8190  font-family: 'Cormorant Garamond', serif;8191  font-style: italic;8192  font-size: 26px;8193  font-weight: 600;8194  color: var(--peach-t0);8195  margin: 0;8196  line-height: 1.2;8197}81988199.peach-sync-info-body {8200  display: flex;8201  flex-direction: column;8202  gap: 14px;8203}82048205.peach-sync-info-point {8206  display: flex;8207  gap: 12px;8208  align-items: flex-start;8209  font-size: 14px;8210  color: var(--peach-t2);8211  line-height: 1.6;8212  margin: 0;8213}82148215.peach-sync-info-icon {8216  color: var(--peach-accent);8217  font-size: 16px;8218  flex-shrink: 0;8219  margin-top: 1px;8220}82218222.peach-sync-info-actions {8223  display: flex;8224  flex-direction: column;8225  gap: 12px;8226  margin-top: 4px;8227}82288229.peach-sync-info-pro-link {8230  background: none;8231  border: none;8232  font-size: 13px;8233  color: var(--peach-t3);8234  cursor: pointer;8235  padding: 0;8236  font-family: inherit;8237  text-align: center;8238  transition: color 150ms ease;8239}82408241.peach-sync-info-pro-link:hover {8242  color: var(--peach-accent);8243}82448245.peach-btn--full {8246  width: 100%;8247}82488249/* ── Sync screen ── */82508251.peach-sync-coming-soon {8252  display: flex;8253  align-items: flex-start;8254  gap: 10px;8255  padding: 12px 14px;8256  background: var(--peach-s1);8257  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8258  border-radius: 10px;8259}8260.peach-sync-coming-soon__icon {8261  flex-shrink: 0;8262  color: var(--peach-accent);8263  margin-top: 1px;8264  line-height: 0;8265}8266.peach-sync-coming-soon__title {8267  font-family: 'Cormorant Garamond', serif;8268  font-weight: 500;8269  font-size: 13px;8270  color: var(--peach-accent);8271  margin: 0 0 5px;8272  line-height: 1.3;8273}8274.peach-sync-coming-soon__body {8275  font-size: 12px;8276  color: var(--peach-t1);8277  line-height: 1.55;8278  margin: 0;8279}82808281.peach-sync-screen {8282  display: flex;8283  flex-direction: column;8284  height: 100%;8285}82868287.peach-sync-content {8288  flex: 1;8289  overflow-y: auto;8290  padding: 24px 20px 40px;8291  display: flex;8292  flex-direction: column;8293  gap: 24px;8294}82958296/* Intro (State A) */8297.peach-sync-headline {8298  font-family: 'Cormorant Garamond', serif;8299  font-style: italic;8300  font-size: 28px;8301  font-weight: 600;8302  color: var(--peach-t0);8303  margin: 0 0 10px;8304  line-height: 1.2;8305}83068307.peach-sync-intro-body {8308  font-size: 14px;8309  color: var(--peach-t1);8310  line-height: 1.6;8311  margin: 0;8312}83138314.peach-sync-pro-note {8315  display: flex;8316  flex-direction: column;8317  gap: 8px;8318  background: var(--peach-t3);8319  border-radius: 10px;8320  padding: 12px 14px;8321}83228323.peach-sync-pro-note-text {8324  font-size: 12px;8325  color: var(--peach-t2);8326  line-height: 1.5;8327  margin: 0;8328}83298330.peach-sync-pro-link {8331  background: none;8332  border: none;8333  font-size: 12px;8334  color: var(--peach-accent);8335  cursor: pointer;8336  padding: 0;8337  font-family: inherit;8338  text-align: left;8339}83408341/* Status (State C) */8342.peach-sync-status {8343  padding: 12px 0;8344  border-bottom: 1px solid var(--peach-border);8345}83468347.peach-sync-status-row {8348  display: flex;8349  align-items: center;8350  gap: 8px;8351}83528353.peach-sync-dot {8354  width: 7px;8355  height: 7px;8356  border-radius: 50%;8357  flex-shrink: 0;8358}83598360.peach-sync-dot--green { background: var(--peach-health-ok); }8361.peach-sync-dot--amber { background: var(--peach-accent); }83628363.peach-sync-status-text {8364  font-family: 'IBM Plex Mono', monospace;8365  font-size: 11px;8366  color: var(--peach-t2);8367}83688369/* Paired devices */8370.peach-sync-section {8371  display: flex;8372  flex-direction: column;8373  gap: 2px;8374}83758376.peach-sync-section-label {8377  font-family: 'IBM Plex Mono', monospace;8378  font-size: 10px;8379  letter-spacing: 0.1em;8380  color: var(--peach-t3);8381  margin: 0 0 10px;8382}83838384.peach-sync-device-row {8385  display: flex;8386  justify-content: space-between;8387  align-items: baseline;8388  padding: 10px 0;8389  border-bottom: 1px solid var(--peach-border);8390  gap: 12px;8391}83928393.peach-sync-device-name {8394  font-size: 14px;8395  color: var(--peach-t1);8396}83978398.peach-sync-device-meta {8399  font-family: 'IBM Plex Mono', monospace;8400  font-size: 11px;8401  color: var(--peach-t3);8402  white-space: nowrap;8403}84048405.peach-sync-hub-note {8406  padding: 14px 16px;8407  border: 1px solid var(--peach-border);8408  border-radius: 10px;8409  display: flex;8410  flex-direction: column;8411  gap: 6px;8412  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8413}84148415.peach-sync-hub-note-title {8416  font-size: 13px;8417  font-weight: 600;8418  color: var(--peach-t0);8419  margin: 0;8420}84218422.peach-sync-hub-note-body {8423  font-size: 12px;8424  color: var(--peach-t2);8425  line-height: 1.6;8426  margin: 0;8427}84288429/* Action buttons */8430.peach-sync-actions {8431  display: flex;8432  gap: 10px;8433  flex-wrap: wrap;8434}84358436/* Upgrade prompt (State B) */8437.peach-sync-upgrade {8438  display: flex;8439  flex-direction: column;8440  gap: 12px;8441  padding: 16px;8442  border: 1px solid var(--peach-border);8443  border-radius: 10px;8444}84458446.peach-sync-upgrade-text {8447  font-size: 13px;8448  color: var(--peach-t2);8449  line-height: 1.6;8450  margin: 0;8451}84528453/* Network note */8454.peach-sync-network-note {8455  font-size: 12px;8456  color: var(--peach-t3);8457  line-height: 1.6;8458  margin: 0;8459}84608461/* Advanced */8462.peach-sync-advanced {8463  margin-top: auto;8464  padding-top: 16px;8465  border-top: 1px solid var(--peach-border);8466}84678468.peach-sync-advanced-toggle {8469  display: flex;8470  align-items: center;8471  gap: 8px;8472  background: none;8473  border: none;8474  font-family: 'IBM Plex Mono', monospace;8475  font-size: 11px;8476  letter-spacing: 0.08em;8477  color: var(--peach-t3);8478  cursor: pointer;8479  padding: 0;8480  text-transform: uppercase;8481}84828483.peach-sync-advanced-chevron {8484  display: inline-block;8485  transition: transform 200ms ease;8486  font-size: 10px;8487}84888489.peach-sync-advanced-chevron.is-open {8490  transform: rotate(90deg);8491}84928493.peach-sync-advanced-content {8494  margin-top: 14px;8495}84968497.peach-sync-advanced-row {8498  display: flex;8499  justify-content: space-between;8500  align-items: center;8501  gap: 16px;8502}85038504.peach-sync-advanced-title {8505  font-size: 14px;8506  color: var(--peach-t1);8507  margin: 0 0 2px;8508}85098510.peach-sync-advanced-subtitle {8511  font-size: 12px;8512  color: var(--peach-t3);8513  margin: 0;8514  line-height: 1.5;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   Pair-device flow — bird-stage animation (Phase 1)9130   See src/popup/components/PairingBirds.tsx and the brief §6.2.9131   Three-act animation gated on the [data-phase] attribute of9132   .peach-pair-pair; child layers (birds, sound 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-pair-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-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9157}9158@keyframes peach-pair-overlay-in {9159  from { opacity: 0; transform: translateY(8px); }9160  to   { opacity: 1; transform: translateY(0); }9161}9162.peach-pair-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }9163.peach-pair-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-pair-pair > * { position: relative; z-index: 1; }91739174/* Header --------------------------------------------------------------- */9175.peach-pair-head {9176  display: flex; align-items: center; gap: 10px;9177}9178.peach-pair-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-pair-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-pair-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-pair-head-spacer { flex: 1; }92029203/* Chip row ------------------------------------------------------------- */9204.peach-pair-chip-row {9205  display: flex;9206  align-items: center;9207  justify-content: flex-start;9208  margin-top: 12px;9209}9210.peach-pair-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-pair-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-pair-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-pair-chip[data-phase="paired"] .peach-pair-chip-dot {9232  background: #76b6e8;9233  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9234}9235.peach-pair-chip[data-phase="timeout"],9236.peach-pair-chip[data-phase="mic_denied"],9237.peach-pair-chip[data-phase="version_mismatch"],9238.peach-pair-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-pair-chip[data-phase="timeout"] .peach-pair-chip-dot,9244.peach-pair-chip[data-phase="mic_denied"] .peach-pair-chip-dot,9245.peach-pair-chip[data-phase="version_mismatch"] .peach-pair-chip-dot,9246.peach-pair-chip[data-phase="handshake_failed"] .peach-pair-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-pair-stage {9253  position: relative;9254  /* Never let the flex column steal the stage's height to fit whatever is9255     below it — that is what clipped the birds to their legs before. Anything9256     that does not fit has to give somewhere else. */9257  flex: none;9258  margin: 14px 0 8px;9259  height: 180px;9260  border-radius: 12px;9261  background:9262    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9263    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),9264    color-mix(in srgb, var(--peach-bg) 92%, #000);9265  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);9266  overflow: hidden;9267  isolation: isolate;9268}9269.peach-pair-stage::after {9270  content: '';9271  position: absolute;9272  left: 12%; right: 12%;9273  bottom: 36px;9274  height: 1px;9275  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9276}92779278.peach-pair-bird-slot {9279  position: absolute;9280  bottom: 8px;9281  width: 100px;9282  height: 110px;9283  display: flex;9284  align-items: flex-end;9285  justify-content: center;9286}9287.peach-pair-bird-slot-desktop { left: 28px; }9288.peach-pair-bird-slot-mobile { right: 28px; }92899290/* The QR screen is the tallest in the flow: a 180px stage plus headline, sub,9291   QR and action overflows the popup, and the stage is what gets clipped — you9292   saw bird legs and nothing else. Shrink the stage and the birds with it here9293   only, so the birds stay whole and the QR stays comfortably above the fold.9294   Uses the individual `scale` property rather than `transform`, which the9295   mobile bird's hop animation already owns. */9296.peach-adoption-source[data-phase="invitation"] .peach-pair-stage {9297  height: 108px;9298  margin: 8px 0 6px;9299}9300.peach-adoption-source[data-phase="invitation"] .peach-pair-bird-slot {9301  scale: 0.62;9302  transform-origin: center bottom;9303}9304.peach-adoption-source[data-phase="invitation"] .peach-pair-stage::after {9305  bottom: 20px;9306}93079308/* Mobile bird hops in from the right when handshake begins */9309.peach-pair-bird-slot-mobile {9310  opacity: 1;9311  transform: translateX(-6px);9312  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9313}9314.peach-pair-stage.act-listening .peach-pair-bird-slot-mobile,9315.peach-pair-stage.act-chirping .peach-pair-bird-slot-mobile,9316.peach-pair-stage.act-idle .peach-pair-bird-slot-mobile {9317  opacity: 0;9318  transform: translateX(60px) rotate(8deg);9319}9320.peach-pair-stage.act-handshake .peach-pair-bird-slot-desktop,9321.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop {9322  transform: translateX(6px);9323  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9324}93259326/* Paired: both birds bob together */9327.peach-pair-stage.act-paired .peach-pair-bird-slot {9328  animation: peach-pair-happy-bob 1.2s ease-in-out infinite;9329}9330.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { animation-delay: 0.2s; }9331.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop { --bb-x: 6px; }9332.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { --bb-x: -6px; }9333@keyframes peach-pair-happy-bob {9334  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9335  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9336}93379338/* Bird internal -------------------------------------------------------- */9339.peach-pair-bird {9340  width: 108px;9341  height: 108px;9342  transform-origin: 50% 95%;9343}9344.peach-pair-bird svg { width: 100%; height: 100%; overflow: visible; }93459346.peach-pair-bird-body {9347  transform-origin: 50% 80%;9348  animation: peach-pair-bird-bob 2.4s ease-in-out infinite;9349}9350@keyframes peach-pair-bird-bob {9351  0%, 100% { transform: translateY(0) scale(1, 1); }9352  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9353}93549355.peach-pair-bird-eye-group {9356  animation: peach-pair-blink 5.2s steps(1, end) infinite;9357  transform-origin: center;9358  transform-box: fill-box;9359}9360@keyframes peach-pair-blink {9361  0%, 92%, 96%, 100% { transform: scaleY(1); }9362  94%                { transform: scaleY(0.05); }9363}93649365/* Pose: chirping — beak opens, head bobs, aura blooms */9366.peach-pair-bird-pose-chirping .peach-pair-bird-body {9367  animation:9368    peach-pair-bird-bob 2.4s ease-in-out infinite,9369    peach-pair-squeeze 1.7s ease-in-out infinite;9370}9371@keyframes peach-pair-squeeze {9372  0%, 70%, 100% { transform-origin: 50% 85%; }9373  78%           { transform: scale(1.04, 0.96) translateY(1px); }9374  86%           { transform: scale(0.98, 1.02); }9375}9376.peach-pair-bird-pose-chirping .peach-pair-bird-head-group {9377  animation: peach-pair-head-bob 1.7s ease-in-out infinite;9378}9379@keyframes peach-pair-head-bob {9380  0%, 70%, 100% { transform: translateY(0) rotate(0); }9381  78%           { transform: translateY(-3px) rotate(-4deg); }9382  86%           { transform: translateY(-1px) rotate(-2deg); }9383}9384.peach-pair-bird-pose-chirping .peach-pair-bird-beak {9385  animation: peach-pair-beak-open 1.7s ease-in-out infinite;9386}9387@keyframes peach-pair-beak-open {9388  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9389  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9390  86%           { transform: rotate(-6deg); }9391}9392.peach-pair-bird-pose-chirping .peach-pair-bird-aura {9393  animation: peach-pair-aura 1.7s ease-in-out infinite;9394}9395@keyframes peach-pair-aura {9396  0%, 100% { opacity: 0; }9397  50%      { opacity: 0.8; }9398}9399.peach-pair-bird-pose-chirping .peach-pair-bird-tail {9400  animation: peach-pair-tail-twitch 1.7s ease-in-out infinite;9401  transform-origin: 100% 50%;9402}9403@keyframes peach-pair-tail-twitch {9404  0%, 75%, 100% { transform: rotate(0); }9405  82%           { transform: rotate(-3deg) translateX(-1px); }9406}94079408/* Pose: attentive — head tilts toward partner */9409.peach-pair-bird-pose-attentive .peach-pair-bird-head-group {9410  animation: peach-pair-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9411}9412@keyframes peach-pair-head-tilt {9413  0%   { transform: rotate(0) translateY(0); }9414  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9415  100% { transform: rotate(-6deg); }9416}9417.peach-pair-bird-pose-attentive .peach-pair-bird-tail {9418  animation: peach-pair-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9419  transform-origin: 100% 50%;9420}9421@keyframes peach-pair-tail-cock {9422  0%   { transform: rotate(0); }9423  100% { transform: rotate(-4deg); }9424}94259426/* Pose: happy — wing flutter, tuft perk, tail wag */9427.peach-pair-bird-pose-happy .peach-pair-bird-wing {9428  transform-origin: 80% 60%;9429  animation: peach-pair-wing-flutter 0.32s ease-in-out 5;9430}9431@keyframes peach-pair-wing-flutter {9432  0%, 100% { transform: rotate(0) translateY(0); }9433  50%      { transform: rotate(-16deg) translateY(-2px); }9434}9435.peach-pair-bird-pose-happy .peach-pair-bird-tuft {9436  transform-origin: 0% 100%;9437  animation: peach-pair-tuft-perk 0.4s ease-in-out 3;9438}9439@keyframes peach-pair-tuft-perk {9440  0%, 100% { transform: rotate(0); }9441  50%      { transform: rotate(-15deg) translateY(-1px); }9442}9443.peach-pair-bird-pose-happy .peach-pair-bird-tail {9444  transform-origin: 100% 50%;9445  animation: peach-pair-tail-wag 0.5s ease-in-out 4;9446}9447@keyframes peach-pair-tail-wag {9448  0%, 100% { transform: rotate(0); }9449  25%      { transform: rotate(6deg); }9450  75%      { transform: rotate(-6deg); }9451}9452.peach-pair-bird-pose-happy .peach-pair-bird-head-group {9453  animation: peach-pair-head-perk 0.5s ease-out;9454}9455@keyframes peach-pair-head-perk {9456  0%   { transform: translateY(0); }9457  40%  { transform: translateY(-3px) rotate(2deg); }9458  100% { transform: translateY(0); }9459}94609461/* Pose: sad — body droops forward */9462.peach-pair-bird-pose-sad .peach-pair-bird-body {9463  transform: translateY(5px) rotate(-2deg);9464  animation: none;9465}9466.peach-pair-bird-pose-sad .peach-pair-bird-head-group {9467  transform: translateY(4px) rotate(8deg);9468}9469.peach-pair-bird-pose-sad .peach-pair-bird-tuft { transform: rotate(15deg) translateY(2px); }9470.peach-pair-bird-pose-sad .peach-pair-bird-tail { transform: rotate(8deg) translateY(2px); }94719472.peach-pair-bird-pose-hidden { opacity: 0; }94739474/* Sound arcs ----------------------------------------------------------- */9475.peach-pair-arcs {9476  position: absolute;9477  top: 18px;9478  width: 96px;9479  height: 70px;9480  pointer-events: none;9481}9482.peach-pair-arcs-right { right: -60px; }9483.peach-pair-arcs-left  { left: -60px; transform: scaleX(-1); }9484.peach-pair-arc {9485  position: absolute;9486  top: 50%;9487  left: 0;9488  width: 40px;9489  height: 40px;9490  margin-top: -20px;9491  border: 1.2px solid #f4d5a8;9492  border-color: transparent #f4d5a8 transparent transparent;9493  border-radius: 50%;9494  opacity: 0;9495  animation: peach-pair-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9496}9497@keyframes peach-pair-arc-expand {9498  0%   { transform: scale(0.4); opacity: 0; }9499  20%  { opacity: 0.9; }9500  100% { transform: scale(1.6); opacity: 0; }9501}95029503/* Flight wave ---------------------------------------------------------- */9504.peach-pair-flight-track {9505  position: absolute;9506  inset: 32px 36px 38px 36px;9507  pointer-events: none;9508}9509.peach-pair-flight-wave {9510  position: absolute;9511  top: 8px;9512  left: 76px;9513  right: 76px;9514  height: 60px;9515  width: auto;9516  opacity: 0;9517  transition: opacity 0.15s ease;9518  stroke: #f4d5a8;9519  fill: none;9520}9521.peach-pair-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9522.peach-pair-flight-wave.is-visible { opacity: 1; }9523.peach-pair-flight-path,9524.peach-pair-flight-path-2 {9525  stroke-dasharray: 240;9526  stroke-dashoffset: 240;9527  stroke-linecap: round;9528  fill: none;9529}9530.peach-pair-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9531.peach-pair-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9532.peach-pair-flight-wave.is-visible .peach-pair-flight-path {9533  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9534}9535.peach-pair-flight-wave.is-visible .peach-pair-flight-path-2 {9536  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9537}9538@keyframes peach-pair-fly {9539  0%   { stroke-dashoffset: 240; opacity: 0; }9540  20%  { opacity: 1; }9541  100% { stroke-dashoffset: -120; opacity: 0; }9542}95439544/* Connection dot ------------------------------------------------------- */9545.peach-pair-dot {9546  position: absolute;9547  top: 50%; left: 50%;9548  transform: translate(-50%, -50%);9549  width: 40px; height: 40px;9550  opacity: 0;9551  pointer-events: none;9552  transition: opacity 0.3s ease;9553  color: var(--peach-accent);9554}9555.peach-pair-dot.is-visible { opacity: 1; }9556.peach-pair-dot-glow {9557  position: absolute; top: 50%; left: 50%;9558  transform: translate(-50%, -50%);9559  width: 38px; height: 38px;9560  border-radius: 50%;9561  filter: blur(10px);9562  opacity: 0.55;9563  background: var(--peach-accent);9564  animation: peach-pair-dot-bloom 1.4s ease-out;9565}9566.peach-pair-dot-core {9567  position: absolute; top: 50%; left: 50%;9568  transform: translate(-50%, -50%);9569  width: 8px; height: 8px;9570  border-radius: 50%;9571  background: var(--peach-accent);9572  box-shadow: 0 0 12px currentColor;9573  animation: peach-pair-dot-core 1.4s ease-out;9574}9575.peach-pair-dot-ring {9576  position: absolute; top: 50%; left: 50%;9577  width: 60px; height: 60px;9578  transform: translate(-50%, -50%);9579  animation: peach-pair-dot-ring 1.4s linear;9580  stroke: var(--peach-accent);9581}9582@keyframes peach-pair-dot-bloom {9583  0%   { width: 4px; height: 4px; opacity: 0; }9584  35%  { width: 60px; height: 60px; opacity: 0.7; }9585  100% { width: 38px; height: 38px; opacity: 0.55; }9586}9587@keyframes peach-pair-dot-core {9588  0%   { width: 0; height: 0; }9589  35%  { width: 12px; height: 12px; }9590  100% { width: 8px; height: 8px; }9591}9592@keyframes peach-pair-dot-ring {9593  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9594  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9595  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9596}95979598/* Motes — drift upward across the stage */9599.peach-pair-motes {9600  position: absolute;9601  inset: 0;9602  pointer-events: none;9603}9604.peach-pair-mote {9605  position: absolute;9606  width: 2px; height: 2px;9607  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9608  border-radius: 50%;9609  bottom: 32px;9610  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9611  opacity: 0;9612  animation: peach-pair-mote-drift 6s linear infinite;9613  animation-delay: calc(var(--mote-i, 0) * 0.7s);9614}9615@keyframes peach-pair-mote-drift {9616  0%   { transform: translateY(0); opacity: 0; }9617  10%  { opacity: 0.6; }9618  90%  { opacity: 0.1; }9619  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9620}96219622/* Status copy ---------------------------------------------------------- */9623.peach-pair-copy-host {9624  margin: 4px 4px 10px;9625  text-align: center;9626  min-height: 50px;9627}9628.peach-pair-copy {9629  animation: peach-pair-copy-in 0.35s ease both;9630}9631@keyframes peach-pair-copy-in {9632  from { opacity: 0; transform: translateY(4px); }9633  to   { opacity: 1; transform: translateY(0); }9634}9635.peach-pair-headline {9636  font-family: var(--font-display, Georgia, serif);9637  font-style: italic;9638  font-size: 20px;9639  font-weight: 500;9640  line-height: 1.2;9641  letter-spacing: 0.005em;9642  color: var(--peach-t0);9643  margin-bottom: 6px;9644}9645.peach-pair-copy-listening .peach-pair-headline,9646.peach-pair-copy-chirping .peach-pair-headline,9647.peach-pair-copy-idle .peach-pair-headline {9648  font-family: inherit;9649  font-style: normal;9650  font-weight: 500;9651  font-size: 15px;9652  color: var(--peach-t0);9653  letter-spacing: 0;9654}9655.peach-pair-copy-paired .peach-pair-headline {9656  color: var(--peach-t0);9657  font-weight: 600;9658}9659.peach-pair-sub {9660  font-size: 12.5px;9661  line-height: 1.45;9662  color: var(--peach-t1);9663  max-width: 280px;9664  margin: 0 auto;9665  text-wrap: pretty;9666}96679668/* Status action -------------------------------------------------------- */9669.peach-pair-action {9670  margin: 2px 4px 10px;9671  margin-top: auto;9672  display: flex;9673  flex-direction: column;9674  gap: 8px;9675}9676.peach-pair-action-waiting {9677  display: flex;9678  align-items: center;9679  justify-content: space-between;9680  gap: 12px;9681}9682.peach-pair-cancel {9683  min-width: 96px;9684}9685.peach-pair-listening {9686  display: inline-flex; align-items: center; gap: 4px;9687  font-family: var(--peach-mono, ui-monospace, monospace);9688  font-size: 9.5px;9689  text-transform: uppercase;9690  letter-spacing: 0.12em;9691  color: var(--peach-t1);9692  padding: 8px 10px;9693}9694.peach-pair-listen-dot {9695  width: 4px; height: 4px;9696  border-radius: 50%;9697  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9698  animation: peach-pair-listen-pulse 1.2s ease-in-out infinite;9699}9700.peach-pair-listen-dot:nth-child(2) { animation-delay: 0.2s; }9701.peach-pair-listen-dot:nth-child(3) { animation-delay: 0.4s; }9702.peach-pair-listen-label { margin-left: 6px; }9703@keyframes peach-pair-listen-pulse {9704  0%, 100% { opacity: 0.25; transform: scale(0.9); }9705  50%      { opacity: 1;     transform: scale(1.15); }9706}97079708.peach-pair-action-handshake {9709  display: flex;9710  flex-direction: column;9711  align-items: center;9712  gap: 8px;9713  padding: 8px 4px;9714}9715.peach-pair-meter {9716  width: 100%;9717  max-width: 280px;9718  height: 2px;9719  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9720  border-radius: 2px;9721  position: relative;9722  overflow: hidden;9723}9724.peach-pair-meter-bar {9725  position: absolute;9726  top: 0; bottom: 0;9727  width: 30%;9728  left: -30%;9729  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9730  animation: peach-pair-meter-sweep 1.4s ease-in-out infinite;9731}9732@keyframes peach-pair-meter-sweep {9733  0%   { left: -30%; }9734  100% { left: 100%; }9735}9736.peach-pair-meter-label {9737  font-family: var(--peach-mono, ui-monospace, monospace);9738  font-size: 9.5px;9739  text-transform: uppercase;9740  letter-spacing: 0.14em;9741  color: var(--peach-t1);9742}97439744.peach-pair-action-paired {9745  display: flex;9746  align-items: center;9747  gap: 10px;9748}9749.peach-pair-device-confirm {9750  flex: 1;9751  display: inline-flex;9752  align-items: center;9753  gap: 8px;9754  padding: 9px 10px 9px 12px;9755  border-radius: 10px;9756  background: color-mix(in srgb, #76b6e8 12%, transparent);9757  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9758  font-size: 12.5px;9759  color: var(--peach-t0);9760  min-width: 0;9761}9762.peach-pair-device-confirm-glyph {9763  display: inline-flex;9764  color: #76b6e8;9765}9766.peach-pair-device-confirm-name {9767  flex: 1;9768  overflow: hidden;9769  text-overflow: ellipsis;9770  white-space: nowrap;9771}9772.peach-pair-device-confirm-trust {9773  font-family: var(--peach-mono, ui-monospace, monospace);9774  font-size: 9.5px;9775  text-transform: uppercase;9776  letter-spacing: 0.1em;9777  color: #76b6e8;9778  padding: 2px 6px;9779  border-radius: 4px;9780  background: color-mix(in srgb, #76b6e8 14%, transparent);9781}9782.peach-pair-done {9783  min-width: 80px;9784}9785.peach-pair-retry {9786  align-self: center;9787  display: block;9788  margin: 6px auto 0;9789  min-width: 120px;9790}9791.peach-pair-mic-help {9792  font-size: 12px;9793  color: var(--peach-t1);9794  text-align: center;9795  max-width: 320px;9796  margin: 0 auto;9797}97989799/* Rest state — bird stage at idle pose, primary CTA + paired list */9800.peach-pair-pair[data-phase="idle"] .peach-pair-stage {9801  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9802  height: 160px;9803}9804.peach-pair-pair-start {9805  width: 100%;9806  display: inline-flex;9807  align-items: center;9808  justify-content: center;9809  gap: 8px;9810  padding: 11px 14px;9811  border-radius: 10px;9812  background: var(--peach-accent);9813  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9814  color: #1a0905;9815  font-family: inherit;9816  font-size: 13px;9817  font-weight: 600;9818  letter-spacing: 0.01em;9819  cursor: pointer;9820  transition: filter 0.15s ease, transform 0.1s ease;9821}9822.peach-pair-pair-start:hover { filter: brightness(1.08); }9823.peach-pair-pair-start:active { transform: translateY(1px); }98249825.peach-pair-paired-section {9826  margin-top: 14px;9827  display: flex;9828  flex-direction: column;9829  gap: 8px;9830}9831.peach-pair-paired-heading {9832  margin: 0;9833  font-family: var(--peach-mono, ui-monospace, monospace);9834  font-size: 10px;9835  font-weight: 500;9836  letter-spacing: 0.14em;9837  text-transform: uppercase;9838  color: var(--peach-t1);9839}98409841/* Footer --------------------------------------------------------------- */9842.peach-pair-foot {9843  margin: 10px -4px -2px;9844  margin-top: auto;9845}9846.peach-pair-foot-divider {9847  height: 1px;9848  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9849  margin-bottom: 10px;9850}9851.peach-pair-foot-text {9852  font-size: 11px;9853  line-height: 1.5;9854  color: var(--peach-t1);9855  text-align: center;9856  padding: 0 4px;9857  text-wrap: pretty;9858}98599860/* Screen-reader-only live region. Kept off the visual flow but read by9861   assistive tech as the pairing phase advances. */9862.peach-sr-only {9863  position: absolute;9864  width: 1px; height: 1px;9865  padding: 0; margin: -1px;9866  overflow: hidden;9867  clip: rect(0, 0, 0, 0);9868  white-space: nowrap;9869  border: 0;9870}98719872/* Reduced motion — stage simplifies to opacity transitions only */9873@media (prefers-reduced-motion: reduce) {9874  .peach-pair-bird-body,9875  .peach-pair-bird-head-group,9876  .peach-pair-bird-beak,9877  .peach-pair-bird-wing,9878  .peach-pair-bird-tuft,9879  .peach-pair-bird-tail,9880  .peach-pair-bird-eye-group,9881  .peach-pair-bird-aura,9882  .peach-pair-arc,9883  .peach-pair-flight-path,9884  .peach-pair-flight-path-2,9885  .peach-pair-dot-glow,9886  .peach-pair-dot-core,9887  .peach-pair-dot-ring,9888  .peach-pair-mote,9889  .peach-pair-meter-bar,9890  .peach-pair-listen-dot,9891  .peach-pair-bird-slot,9892  .peach-pair-bird-slot-mobile {9893    animation: none !important;9894    transition: opacity 0.2s linear !important;9895  }9896}98979898/* ─────────────────────────────────────────────────────────────────9899   Settings → Sync surface. Wraps the same bird9900   animation used by the pairing flow with a paired-devices list and9901   the "Pair a device" CTA.9902   ───────────────────────────────────────────────────────────────── */9903.peach-pair-settings {9904  position: absolute;9905  inset: 0;9906  z-index: 3;9907  display: flex;9908  flex-direction: column;9909  gap: 18px;9910  padding: 14px 12px 12px;9911  width: 100%;9912  box-sizing: border-box;9913  overflow-y: auto;9914  overflow-x: hidden;9915  /* Same warm surface as the pairing screen — unifies the two views. */9916  background:9917    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9918    var(--peach-bg);9919  color: var(--peach-t0);9920  isolation: isolate;9921  /* Hide native scrollbar — content fits 99% of the time and a chunky9922     gutter ruins the surface. */9923  scrollbar-width: none;9924  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9925}9926.peach-pair-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9927.peach-pair-settings::before {9928  content: '';9929  position: absolute;9930  inset: 0;9931  pointer-events: none;9932  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9933  z-index: 0;9934}9935.peach-pair-settings > * { position: relative; z-index: 1; }99369937.peach-pair-settings--pairing {9938  padding: 0;9939  align-items: stretch;9940  justify-content: stretch;9941  background: none;9942  isolation: auto;9943}9944.peach-pair-settings--pairing::before { display: none; }99459946.peach-pair-settings-header {9947  display: flex;9948  align-items: center;9949  gap: 10px;9950}9951.peach-pair-settings-title {9952  margin: 0;9953  font-family: var(--font-display, Georgia, serif);9954  font-style: italic;9955  font-size: 24px;9956  font-weight: 500;9957  line-height: 1;9958  color: var(--peach-t0);9959  letter-spacing: 0.005em;9960}9961.peach-pair-settings-section {9962  margin: 6px 0 -4px;9963  font-size: 11px;9964  font-weight: 600;9965  letter-spacing: 0.08em;9966  text-transform: uppercase;9967  color: var(--peach-text-muted);9968}9969.peach-pair-settings-error {9970  font-size: 12px;9971  padding: 8px 10px;9972  border-radius: 8px;9973  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);9974  color: var(--peach-text);9975}9976.peach-pair-settings-footer {9977  margin-top: auto;9978  padding-top: 18px;9979  font-size: 11.5px;9980  line-height: 1.5;9981  color: var(--peach-text-muted);9982  text-align: center;9983}99849985/* Hero card shown when no devices are paired yet. */9986.peach-pair-hero {9987  display: flex;9988  flex-direction: column;9989  align-items: center;9990  gap: 12px;9991  padding: 20px 12px 8px;9992  text-align: center;9993}9994.peach-pair-hero-svg {9995  display: block;9996  max-width: 100%;9997  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));9998}9999.peach-pair-hero-headline {10000  margin: 0;10001  font-family: var(--font-display, Georgia, serif);10002  font-style: italic;10003  font-size: 20px;10004  font-weight: 500;10005  line-height: 1.2;10006  letter-spacing: 0.005em;10007  color: var(--peach-t0);10008}10009.peach-pair-hero-sub {10010  margin: 0;10011  font-size: 13px;10012  line-height: 1.5;10013  color: var(--peach-t1);10014  max-width: 320px;10015  text-wrap: pretty;10016}1001710018.peach-pair-pair-cta {10019  display: flex;10020  justify-content: center;10021  padding: 4px 0 6px;10022}10023.peach-pair-pair-button {10024  display: inline-flex;10025  align-items: center;10026  gap: 8px;10027  min-width: 220px;10028  justify-content: center;10029}10030.peach-pair-pair-button-icon {10031  flex: 0 0 auto;10032}1003310034/* Paired devices list. Roomy rows that look at home next to the rest10035   of Settings; stale rows get a soft warm-warning border tint. */10036.peach-pair-device-list {10037  list-style: none;10038  margin: 0;10039  padding: 0;10040  display: flex;10041  flex-direction: column;10042  gap: 8px;10043}10044.peach-pair-device-row {10045  display: flex;10046  align-items: center;10047  gap: 12px;10048  padding: 12px;10049  border-radius: 10px;10050  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10051  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);10052}10053.peach-pair-device-row[data-stale="true"] {10054  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);10055}10056.peach-pair-device-icon {10057  width: 32px;10058  height: 32px;10059  display: flex;10060  align-items: center;10061  justify-content: center;10062  border-radius: 8px;10063  color: var(--peach-text);10064  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);10065}10066.peach-pair-device-info {10067  flex: 1;10068  display: flex;10069  flex-direction: column;10070  gap: 2px;10071  min-width: 0;10072}10073.peach-pair-device-name {10074  font-size: 14px;10075  font-weight: 600;10076  color: var(--peach-text);10077  overflow: hidden;10078  text-overflow: ellipsis;10079  white-space: nowrap;10080}10081.peach-pair-device-meta {10082  font-size: 11.5px;10083  color: var(--peach-text-muted);10084  display: flex;10085  flex-wrap: wrap;10086  align-items: center;10087  gap: 8px;10088}10089.peach-pair-device-badge {10090  font-size: 10.5px;10091  font-weight: 500;10092  letter-spacing: 0.02em;10093  padding: 2px 6px;10094  border-radius: 999px;10095  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);10096  color: var(--peach-text);10097}10098.peach-pair-device-stale {10099  font-size: 10.5px;10100  font-weight: 500;10101  color: var(--peach-warn, #d29257);10102}10103.peach-pair-device-remove {10104  flex: 0 0 auto;10105  color: var(--peach-text-muted);10106}10107.peach-pair-device-remove:hover {10108  color: var(--peach-danger, #c25b4a);10109}10110.peach-pair-unpair-confirm {10111  display: flex;10112  gap: 6px;10113  align-items: center;10114}1011510116/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */10117.peach-pair-pro-card {10118  position: relative;10119  margin: 18px 12px;10120  padding: 18px 20px 22px;10121  border-radius: 22px;10122  background:10123    radial-gradient(140% 90% at 50% 0%,10124      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,10125      transparent 60%),10126    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10127  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);10128  box-shadow:10129    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,10130    0 18px 40px -24px rgba(0, 0, 0, 0.45);10131  display: flex;10132  flex-direction: column;10133  align-items: center;10134  gap: 10px;10135  text-align: center;10136  overflow: hidden;10137}10138.peach-pair-pro-stage {10139  position: relative;10140  width: 220px;10141  height: 140px;10142  display: flex;10143  align-items: flex-end;10144  justify-content: center;10145  margin-bottom: 2px;10146}10147.peach-pair-pro-bird-slot {10148  width: 140px;10149  height: 132px;10150  display: flex;10151  align-items: flex-end;10152  justify-content: center;10153  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));10154}10155.peach-pair-pro-bird-slot .peach-pair-bird {10156  width: 100%;10157  height: 100%;10158}10159.peach-pair-pro-bird-slot .peach-pair-bird svg {10160  width: 100%;10161  height: 100%;10162  overflow: visible;10163}10164.peach-pair-pro-headline {10165  margin: 4px 0 0;10166  font-family: var(--font-display, "Cormorant Garamond", serif);10167  font-style: italic;10168  font-size: 19px;10169  font-weight: 500;10170  letter-spacing: 0.01em;10171  color: var(--peach-t0);10172  max-width: 280px;10173  line-height: 1.25;10174}10175.peach-pair-pro-body {10176  margin: 0;10177  font-size: 13px;10178  line-height: 1.55;10179  color: var(--peach-t1);10180  max-width: 300px;10181}10182.peach-pair-pro-cta {10183  margin-top: 4px;10184}10185.peach-pair-pro-foot {10186  margin: 2px 0 0;10187  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10188  font-size: 0.625rem;10189  letter-spacing: 0.08em;10190  text-transform: uppercase;10191  color: var(--peach-t2);10192  opacity: 0.75;10193}1019410195/* Shell border and shadow in light mode: match dark mode's near-invisible10196   border weight so the popup frame looks the same in both themes. */10197.light .peach-shell,10198.light .peach-screen {10199  border-color: rgba(26, 18, 8, 0.07);10200  box-shadow:10201    0 2px 8px rgba(80, 56, 32, 0.08),10202    0 14px 48px rgba(80, 56, 32, 0.10),10203    0 0 0 1px rgba(26, 18, 8, 0.04);10204}1020510206/* HOLE 4: the revoke confirmation carries its own disclosure, so it needs the10207   full row width rather than sitting inline beside the device name. */10208.peach-settings-row:has(> .peach-unpair-confirm) { flex-wrap: wrap; }10209.peach-unpair-confirm {10210  display: flex;10211  flex-direction: column;10212  gap: 8px;10213  width: 100%;10214}10215.peach-unpair-confirm-note {10216  margin: 0;10217  font-size: 0.6875rem;10218  line-height: 1.5;10219  color: var(--peach-t2);10220}1022110222/* Sync mode selector — three named choices (public / private / off). Replaces10223   the old binary "local network only" toggle; see docs/sync-lan-retirement.md. */10224.peach-sync-mode {10225  display: flex;10226  align-items: flex-start;10227  gap: 10px;10228  width: 100%;10229  text-align: left;10230  padding: 10px 12px;10231  margin-top: 8px;10232  border-radius: 10px;10233  border: 1px solid var(--peach-border);10234  background: color-mix(in srgb, var(--peach-t0) 3%, transparent);10235  color: var(--peach-t1);10236  cursor: pointer;10237  transition: border-color var(--peach-dur-80) var(--peach-curve-arrival),10238              background-color var(--peach-dur-80) var(--peach-curve-arrival);10239}10240.peach-sync-mode:hover:not(:disabled) {10241  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);10242}10243.peach-sync-mode.is-active {10244  border-color: var(--peach-accent);10245  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);10246}10247.peach-sync-mode:disabled { opacity: 0.6; cursor: default; }10248.peach-sync-mode-main { display: flex; flex-direction: column; gap: 3px; flex: 1; }10249.peach-sync-mode-title { font-size: 12px; }10250.peach-sync-mode-sub {10251  font-size: 11px;10252  line-height: 1.5;10253  color: var(--peach-t2);10254}10255.peach-sync-mode-pip {10256  flex: none;10257  margin-top: 3px;10258  width: 12px; height: 12px;10259  border-radius: 50%;10260  border: 1px solid var(--peach-t3);10261}10262.peach-sync-mode.is-active .peach-sync-mode-pip {10263  border-color: var(--peach-accent);10264  background:10265    radial-gradient(circle at 50% 50%, var(--peach-accent) 0 42%, transparent 44%);10266}10267.peach-sync-mode-disclosure {10268  margin: 10px 2px 0;10269  font-size: 11px;10270  line-height: 1.5;10271  color: var(--peach-t2);10272}10273.peach-sync-mode-warn { color: var(--peach-breach); }1027410275/* Compact form, used mid-pairing: a quiet line, not a decision to make. */10276.peach-sync-mode-summary {10277  margin: 8px 2px 0;10278  font-size: 11px;10279  color: var(--peach-t2);10280  text-align: center;10281}10282.peach-sync-mode-change {10283  background: none;10284  border: none;10285  padding: 0;10286  font: inherit;10287  color: var(--peach-accent);10288  text-decoration: underline;10289  cursor: pointer;10290}