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-consent-backdrop {7404  position: fixed;7405  inset: 0;7406  z-index: 1000;7407  display: grid;7408  place-items: center;7409  padding: 18px;7410  background: rgba(15, 10, 5, 0.72);7411}74127413.peach-adoption-consent {7414  width: min(100%, 340px);7415  border: 1px solid color-mix(in srgb, #f59e0b 54%, var(--peach-border));7416  border-radius: 8px;7417  padding: 18px;7418  background: color-mix(in srgb, #2c1b08 84%, var(--peach-surface));7419  color: var(--peach-t0);7420  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42);7421}74227423.peach-adoption-consent-icon {7424  width: 32px;7425  height: 32px;7426  display: grid;7427  place-items: center;7428  border-radius: 50%;7429  background: #f59e0b;7430  color: #1f1304;7431  font-weight: 800;7432}74337434.peach-adoption-consent h2 {7435  margin: 12px 0 8px;7436  font-size: 1.22rem;7437  line-height: 1.15;7438}74397440.peach-adoption-consent-device,7441.peach-adoption-consent-warning {7442  margin: 0 0 12px;7443  color: var(--peach-t1);7444  line-height: 1.35;7445}74467447.peach-adoption-consent-device strong {7448  color: var(--peach-t0);7449}74507451.peach-adoption-consent-warning {7452  color: #ffd79a;7453}74547455.peach-adoption-consent-sas {7456  display: flex;7457  justify-content: space-between;7458  align-items: center;7459  gap: 12px;7460  margin: 14px 0;7461  padding: 10px;7462  border-radius: 6px;7463  background: rgba(245, 158, 11, 0.12);7464}74657466/* Tracking, not interleaved spaces: eight digits with per-digit spaces no7467   longer fit beside the label at 320px. */7468.peach-adoption-consent-sas strong {7469  font-variant-numeric: tabular-nums;7470  letter-spacing: 0.18em;7471  white-space: nowrap;7472}74737474.peach-adoption-consent-actions {7475  display: flex;7476  justify-content: space-between;7477  gap: 10px;7478  margin-top: 16px;7479}74807481.peach-adoption-consent-actions > button {7482  flex: 1;7483}74847485/* ── Panic flow (three-step destruction) ───────────────────────────────── */7486.peach-panic {7487  display: flex;7488  flex-direction: column;7489  flex: 1;7490  min-height: 0;7491  padding: 28px 20px 20px;7492  gap: 18px;7493  overflow-y: auto;7494  scrollbar-width: none;7495  -ms-overflow-style: none;7496}74977498.peach-panic::-webkit-scrollbar { display: none; }74997500.peach-panic-step2 {7501  background: rgba(220, 38, 38, 0.04);7502}75037504.peach-panic-step3 {7505  position: relative;7506  background: #0f0505;7507  color: #ffffff;7508  overflow: hidden;7509}75107511.peach-panic-rune-bg {7512  position: absolute;7513  inset: 0;7514  opacity: 0.22;7515  pointer-events: none;7516  overflow: hidden;7517}75187519.peach-panic-rune-bg canvas {7520  width: 100% !important;7521  height: 100% !important;7522}75237524.peach-panic-icon {7525  font-size: 32px;7526  color: rgb(220, 38, 38);7527  line-height: 1;7528}75297530.peach-panic-title {7531  margin: 0;7532  font-size: 18px;7533  font-weight: 500;7534  color: var(--peach-t1);7535}75367537.peach-panic-title--severe {7538  font-size: 20px;7539  font-weight: 700;7540  color: rgb(220, 38, 38);7541}75427543.peach-panic-body {7544  margin: 0;7545  font-size: 0.8125rem;7546  line-height: 1.55;7547  color: var(--peach-t2);7548}75497550.peach-panic-body--severe {7551  color: rgba(220, 38, 38, 0.85);7552}75537554.peach-panic-body--final {7555  font-size: 1rem;7556  font-weight: 700;7557  color: rgb(255, 80, 80);7558  line-height: 1.4;7559}75607561.peach-panic-body--final-intro {7562  font-size: 1rem;7563  color: #ffffff;7564  font-weight: 400;7565}75667567.peach-panic-divider {7568  height: 1px;7569  background: rgba(255, 255, 255, 0.08);7570  margin: 4px 0;7571}75727573.peach-panic-confirm-input {7574  width: 100%;7575  padding: 10px 12px;7576  background: rgba(255, 255, 255, 0.02);7577  border: 1px solid rgba(220, 38, 38, 0.4);7578  border-radius: 8px;7579  color: var(--peach-t1);7580  font-family: "IBM Plex Mono", monospace;7581  font-size: 0.875rem;7582  letter-spacing: 0.12em;7583  text-transform: uppercase;7584}75857586.peach-panic-confirm-input:focus {7587  outline: none;7588  border-color: rgb(220, 38, 38);7589}75907591.peach-panic-confirm-input--match {7592  border-color: rgb(220, 38, 38);7593  color: rgb(220, 38, 38);7594}75957596.peach-panic-confirm-label {7597  font-size: 0.6875rem;7598  color: var(--peach-t2);7599  margin: 0 0 -8px;7600  letter-spacing: 0.06em;7601}76027603.peach-panic-actions {7604  display: flex;7605  flex-direction: column;7606  gap: 10px;7607  margin-top: auto;7608}76097610.peach-panic-button {7611  width: 100%;7612  padding: 12px;7613  border-radius: 8px;7614  font-size: 0.8125rem;7615  cursor: pointer;7616  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7617}76187619.peach-panic-button--primary {7620  background: var(--peach-accent);7621  border: 1px solid var(--peach-accent);7622  color: #ffffff;7623  font-weight: 600;7624}76257626.peach-panic-button--primary:hover {7627  background: color-mix(in srgb, var(--peach-accent) 88%, white);7628}76297630.peach-panic-button--danger {7631  background: rgb(220, 38, 38);7632  border: 1px solid rgb(220, 38, 38);7633  color: #ffffff;7634  font-weight: 600;7635}76367637.peach-panic-button--danger:disabled {7638  opacity: 0.35;7639  cursor: not-allowed;7640}76417642.peach-panic-button--ghost {7643  background: transparent;7644  border: 1px solid rgba(255, 255, 255, 0.18);7645  color: var(--peach-t2);7646}76477648.peach-panic-button--ghost:hover {7649  border-color: rgba(255, 255, 255, 0.32);7650  color: var(--peach-t1);7651}76527653.peach-panic-link {7654  background: transparent;7655  border: none;7656  padding: 4px 0;7657  color: rgba(220, 38, 38, 0.65);7658  font-size: 0.75rem;7659  cursor: pointer;7660  text-align: left;7661  text-decoration: underline;7662  text-underline-offset: 3px;7663}76647665.peach-panic-link:hover {7666  color: rgb(220, 38, 38);7667}76687669.peach-panic-bar {7670  background: rgb(220, 38, 38);7671  padding: 16px 20px;7672  margin: -28px -20px 0;7673  text-align: center;7674  font-size: 0.8125rem;7675  font-weight: 700;7676  letter-spacing: 0.12em;7677  color: #ffffff;7678}76797680.peach-panic-final-button {7681  width: 100%;7682  padding: 14px;7683  background: rgb(220, 38, 38);7684  border: none;7685  border-radius: 8px;7686  color: #ffffff;7687  font-size: 0.875rem;7688  font-weight: 700;7689  letter-spacing: 0.08em;7690  text-transform: uppercase;7691  cursor: pointer;7692  animation: peach-panic-pulse 2s ease-in-out infinite;7693}76947695.peach-settings-license {7696  margin-top: 10px;7697  padding-top: 10px;7698  border-top: 1px solid var(--peach-t3);7699}77007701.peach-settings-label {7702  font-size: 0.625rem;7703  letter-spacing: 0.08em;7704  color: var(--peach-t3);7705  display: block;7706  margin-bottom: 6px;7707}77087709.peach-settings-license-row {7710  display: flex;7711  align-items: center;7712  justify-content: space-between;7713  gap: 8px;7714}77157716.peach-settings-license-key {7717  font-family: 'IBM Plex Mono', monospace;7718  font-size: 0.75rem;7719  color: var(--peach-t0);7720  letter-spacing: 0.04em;7721  word-break: break-all;7722  flex: 1;7723  min-width: 0;7724}77257726.peach-settings-license-key--masked {7727  font-family: 'IBM Plex Mono', monospace;7728  font-size: 0.6rem;7729  color: var(--peach-t1);7730  letter-spacing: 0.18em;7731  user-select: none;7732}77337734.peach-settings-license-actions {7735  display: flex;7736  align-items: center;7737  gap: 2px;7738  flex-shrink: 0;7739}77407741.peach-settings-license-copy {7742  font-size: 0.6875rem;7743  color: var(--peach-accent);7744  background: transparent;7745  border: none;7746  cursor: pointer;7747  padding: 4px 8px;7748  border-radius: 4px;7749  flex-shrink: 0;7750  transition: opacity 150ms ease;7751}77527753.peach-settings-license-copy:hover {7754  opacity: 0.75;7755}77567757.peach-settings-license-toggle {7758  display: flex;7759  align-items: center;7760  justify-content: center;7761  background: transparent;7762  border: none;7763  cursor: pointer;7764  padding: 4px 6px;7765  border-radius: 4px;7766  color: var(--peach-t2);7767  transition: color 150ms ease;7768}77697770.peach-settings-license-toggle:hover {7771  color: var(--peach-t1);7772}77737774@keyframes peach-panic-pulse {7775  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7776  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7777}77787779[data-motion="reduce"] .peach-panic-final-button {7780  animation: none;7781}77827783/* Vault History — Settings → Vault sub-view */77847785.peach-history-list {7786  border: 1px solid var(--peach-border);7787  border-radius: 8px;7788  overflow: hidden;7789  margin: 8px 0 4px;7790}77917792.peach-history-row {7793  display: flex;7794  align-items: center;7795  justify-content: space-between;7796  padding: 9px 12px;7797  gap: 10px;7798  border-bottom: 1px solid var(--peach-border);7799}78007801.peach-history-row:last-child {7802  border-bottom: none;7803}78047805.peach-history-meta {7806  display: flex;7807  flex-direction: column;7808  gap: 2px;7809  min-width: 0;7810  flex: 1;7811}78127813.peach-history-time {7814  font-size: 0.75rem;7815  font-family: 'IBM Plex Mono', ui-monospace, monospace;7816  color: var(--peach-t0);7817  white-space: nowrap;7818  overflow: hidden;7819  text-overflow: ellipsis;7820}78217822.peach-history-sub {7823  font-size: 0.625rem;7824  color: var(--peach-t2);7825  letter-spacing: 0.06em;7826  text-transform: uppercase;7827  white-space: nowrap;7828  overflow: hidden;7829  text-overflow: ellipsis;7830}78317832.peach-history-btn {7833  flex-shrink: 0;7834  white-space: nowrap;7835  min-width: 56px;7836  text-align: center;7837}78387839.peach-history-btn.is-busy {7840  opacity: 0.65;7841}78427843.peach-history-footer {7844  font-size: 0.625rem;7845  color: var(--peach-t3);7846  letter-spacing: 0.05em;7847  text-align: right;7848  margin: 0;7849  padding: 2px 0 0;7850}78517852/* ── Context menu + swipe-copy flash ─────────────────────── */7853.peach-context-menu-backdrop {7854  position: fixed;7855  inset: 0;7856  background: rgba(0, 0, 0, 0.45);7857  z-index: 100;7858  display: flex;7859  align-items: flex-end;7860  justify-content: center;7861  animation: peach-ctx-fade 140ms ease both;7862}7863.peach-context-menu {7864  width: min(360px, calc(100vw - 24px));7865  margin-bottom: max(env(safe-area-inset-bottom), 12px);7866  background: var(--peach-bg);7867  border: 1px solid var(--peach-t3);7868  border-radius: 14px;7869  padding: 6px;7870  display: flex;7871  flex-direction: column;7872  gap: 2px;7873  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7874  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7875}7876@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7877@keyframes peach-ctx-rise {7878  from { transform: translateY(16px); opacity: 0; }7879  to   { transform: translateY(0);    opacity: 1; }7880}7881.peach-context-menu-item {7882  background: transparent;7883  color: var(--peach-t0);7884  border: 0;7885  border-radius: 10px;7886  padding: 12px 14px;7887  text-align: left;7888  font: inherit;7889  cursor: pointer;7890}7891.peach-context-menu-item:hover,7892.peach-context-menu-item:focus-visible {7893  background: var(--peach-t3);7894}7895.peach-context-menu-item--danger {7896  color: var(--peach-health-bad, #d96868);7897}7898.peach-context-menu-item--cancel {7899  color: var(--peach-t2);7900  margin-top: 4px;7901  border-top: 1px solid var(--peach-t3);7902  border-radius: 0 0 10px 10px;7903}79047905/* Swipe-to-copy flash */7906.peach-entry-row.is-copy-flash {7907  animation: peach-copy-flash 600ms ease both;7908}7909@keyframes peach-copy-flash {7910  0%   { background: transparent; }7911  20%  { background: rgba(217, 153, 51, 0.32); }7912  100% { background: transparent; }7913}79147915html { font-size: 16px; }79167917/* ── Recovery word entry ─────────────────────────────────────────── */7918.peach-lock-recover-link {7919  display: block;7920  width: 100%;7921  margin-top: 12px;7922  background: none;7923  border: none;7924  font-family: "IBM Plex Mono", monospace;7925  font-size: 0.625rem;7926  letter-spacing: 0.06em;7927  color: var(--peach-t2);7928  cursor: pointer;7929  text-align: center;7930  padding: 4px;7931  transition: color 120ms ease;7932}7933.peach-lock-recover-link:hover {7934  color: var(--peach-t0);7935}79367937.lock-screen--recovery {7938  display: flex;7939  flex-direction: column;7940  align-items: stretch;7941  padding: 12px 20px 24px;7942  overflow: hidden;7943}79447945.peach-recovery-nav {7946  display: flex;7947  align-items: center;7948  position: relative;7949  z-index: 1;7950  margin-bottom: 4px;7951}79527953/* Mask runes to the top decorative band only — keep inputs and the7954   bottom CTA button clear. The bottom of the popup is reserved for7955   submit buttons; rendering runes there overlaps the button glyph. */7956.peach-rune-background--recovery {7957  -webkit-mask-image: linear-gradient(7958    to bottom,7959    black 0px, black 85px,7960    transparent 110px,7961    transparent 100%7962  );7963  mask-image: linear-gradient(7964    to bottom,7965    black 0px, black 85px,7966    transparent 110px,7967    transparent 100%7968  );7969}79707971.peach-recovery-header {7972  text-align: center;7973  margin-bottom: 16px;7974  margin-top: 4px;7975}7976.peach-recovery-header .peach-onboarding-headline {7977  font-size: 1.25rem;7978  font-weight: 300;7979  letter-spacing: 0.02em;7980  margin: 0 0 4px;7981}7982.peach-recovery-header .peach-hint {7983  font-family: "IBM Plex Mono", monospace;7984  font-size: 0.625rem;7985  color: var(--peach-t2);7986  letter-spacing: 0.04em;7987  margin: 0;7988}79897990/* 12-word grid: 2 columns × 6 rows */7991.peach-recovery-grid {7992  display: grid;7993  grid-template-columns: repeat(2, 1fr);7994  gap: 12px 20px;7995  width: 100%;7996  margin-bottom: 0;7997}79987999.peach-recovery-word-slot {8000  display: flex;8001  align-items: center;8002  gap: 6px;8003  min-width: 0;8004}80058006.peach-recovery-word-index {8007  font-family: "IBM Plex Mono", monospace;8008  font-size: 0.5rem;8009  color: rgba(255, 255, 255, 0.35);8010  min-width: 14px;8011  flex-shrink: 0;8012  text-align: right;8013  letter-spacing: 0.04em;8014}80158016.peach-recovery-word-input {8017  flex: 1;8018  min-width: 0;8019  background: transparent;8020  border: none;8021  border-bottom: 1px solid rgba(255, 255, 255, 0.22);8022  color: var(--peach-t0);8023  font-family: "IBM Plex Mono", monospace;8024  font-size: 0.6875rem;8025  letter-spacing: 0.06em;8026  padding: 5px 2px 4px;8027  outline: none;8028  text-transform: lowercase;8029  transition: border-color 120ms ease;8030}8031.peach-recovery-word-input::placeholder {8032  color: rgba(255, 255, 255, 0.18);8033}8034.peach-recovery-word-input:focus {8035  border-bottom-color: var(--peach-accent);8036}80378038.peach-recovery-submit {8039  width: 100%;8040  margin-top: auto;8041}80428043.peach-recovery-new-password-form {8044  width: 100%;8045  display: flex;8046  flex-direction: column;8047  gap: 16px;8048  margin-bottom: 8px;8049}8050.peach-recovery-new-password-form .peach-newvault-field {8051  display: flex;8052  flex-direction: column;8053  gap: 4px;8054}80558056/* ── Recovery words display (post-create) ────────────────────────── */8057.lock-screen--recovery-display {8058  display: flex;8059  flex-direction: column;8060  align-items: stretch;8061  padding: 0 20px 20px;8062  min-height: 0;8063  overflow-y: auto;8064}80658066.peach-recovery-words-display {8067  width: 100%;8068  margin-bottom: 16px;8069  border: 1px solid var(--peach-t3);8070  border-radius: 8px;8071  padding: 12px 14px;8072  background: rgba(245, 240, 234, 0.04);8073}80748075.peach-recovery-words-label {8076  font-family: "IBM Plex Mono", monospace;8077  font-size: 0.5rem;8078  letter-spacing: 0.08em;8079  color: var(--peach-t2);8080  text-transform: uppercase;8081  margin-bottom: 10px;8082}80838084.peach-recovery-word-list {8085  list-style: none;8086  margin: 0;8087  padding: 0;8088  display: grid;8089  grid-template-columns: repeat(2, 1fr);8090  gap: 6px 16px;8091}80928093.peach-recovery-word-item {8094  display: flex;8095  align-items: baseline;8096  gap: 5px;8097}80988099.peach-recovery-word-num {8100  font-family: "IBM Plex Mono", monospace;8101  font-size: 0.5rem;8102  color: var(--peach-t2);8103  width: 14px;8104  flex: 0 0 14px;8105  text-align: right;8106  letter-spacing: 0.04em;8107  font-variant-numeric: tabular-nums;8108}81098110.peach-recovery-download-btn {8111  display: block;8112  margin: 10px auto 0;8113  padding: 4px 10px;8114  background: transparent;8115  border: 1px solid var(--peach-border);8116  border-radius: 6px;8117  color: var(--peach-t2);8118  font-family: "IBM Plex Mono", monospace;8119  font-size: 0.5625rem;8120  letter-spacing: 0.06em;8121  text-transform: lowercase;8122  cursor: pointer;8123  transition: border-color 0.15s, color 0.15s;8124}81258126.peach-recovery-download-btn:hover {8127  border-color: var(--peach-accent);8128  color: var(--peach-t0);8129}81308131.peach-recovery-word-text {8132  font-family: "IBM Plex Mono", monospace;8133  font-size: 0.6875rem;8134  letter-spacing: 0.06em;8135  color: var(--peach-t0);8136  text-transform: lowercase;8137}81388139.peach-hint--warning {8140  color: var(--peach-accent);8141  font-style: italic;8142}8143.peach-hint--success {8144  color: var(--peach-t2);8145  font-family: "IBM Plex Mono", monospace;8146  font-size: 0.625rem;8147  letter-spacing: 0.06em;8148}81498150/* Confirmation step */8151.peach-recovery-confirm {8152  width: 100%;8153  flex: 1;8154  display: flex;8155  flex-direction: column;8156}8157.peach-recovery-confirm-label {8158  font-family: "IBM Plex Mono", monospace;8159  font-size: 0.5625rem;8160  letter-spacing: 0.04em;8161  color: var(--peach-t2);8162  text-align: center;8163  margin: 0 0 12px;8164}8165.peach-recovery-confirm-fields {8166  display: flex;8167  flex-direction: column;8168  gap: 14px;8169  margin-bottom: 10px;8170}8171.peach-recovery-confirm-field {8172  display: flex;8173  align-items: center;8174  gap: 8px;8175}8176.peach-recovery-confirm-num {8177  font-family: "IBM Plex Mono", monospace;8178  font-size: 0.5rem;8179  color: var(--peach-t2);8180  min-width: 44px;8181  letter-spacing: 0.04em;8182}8183.peach-recovery-confirm-input {8184  flex: 1;8185  background: transparent;8186  border: none;8187  border-bottom: 1px solid var(--peach-t3);8188  color: var(--peach-t0);8189  font-family: "IBM Plex Mono", monospace;8190  font-size: 0.6875rem;8191  letter-spacing: 0.06em;8192  padding: 4px 2px 3px;8193  outline: none;8194  text-transform: lowercase;8195  transition: border-color 120ms ease;8196}8197.peach-recovery-confirm-input:focus {8198  border-bottom-color: var(--peach-accent);8199}8200.peach-recovery-confirm-input:disabled {8201  opacity: 0.4;8202  cursor: not-allowed;8203}8204.peach-recovery-confirm-btn {8205  width: 100%;8206  margin-top: auto;8207}82088209/* ============================================================8210   Sync info sheet8211   ============================================================ */82128213.peach-sync-info-backdrop {8214  position: fixed;8215  inset: 0;8216  z-index: 200;8217  background: rgba(0, 0, 0, 0.55);8218  display: flex;8219  align-items: flex-end;8220  animation: peach-fade-in 200ms ease forwards;8221}82228223@keyframes peach-fade-in {8224  from { opacity: 0; }8225  to   { opacity: 1; }8226}82278228.peach-sync-info-sheet {8229  width: 100%;8230  background: var(--peach-bg-card, var(--peach-bg));8231  border-top-left-radius: 20px;8232  border-top-right-radius: 20px;8233  padding: 12px 24px 32px;8234  display: flex;8235  flex-direction: column;8236  gap: 20px;8237  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;8238}82398240@keyframes peach-sheet-up {8241  from { transform: translateY(100%); }8242  to   { transform: translateY(0); }8243}82448245.peach-sync-info-handle {8246  width: 36px;8247  height: 4px;8248  border-radius: 2px;8249  background: var(--peach-border);8250  margin: 0 auto 4px;8251  flex-shrink: 0;8252}82538254.peach-sync-info-title {8255  font-family: 'Cormorant Garamond', serif;8256  font-style: italic;8257  font-size: 26px;8258  font-weight: 600;8259  color: var(--peach-t0);8260  margin: 0;8261  line-height: 1.2;8262}82638264.peach-sync-info-body {8265  display: flex;8266  flex-direction: column;8267  gap: 14px;8268}82698270.peach-sync-info-point {8271  display: flex;8272  gap: 12px;8273  align-items: flex-start;8274  font-size: 14px;8275  color: var(--peach-t2);8276  line-height: 1.6;8277  margin: 0;8278}82798280.peach-sync-info-icon {8281  color: var(--peach-accent);8282  font-size: 16px;8283  flex-shrink: 0;8284  margin-top: 1px;8285}82868287.peach-sync-info-actions {8288  display: flex;8289  flex-direction: column;8290  gap: 12px;8291  margin-top: 4px;8292}82938294.peach-sync-info-pro-link {8295  background: none;8296  border: none;8297  font-size: 13px;8298  color: var(--peach-t3);8299  cursor: pointer;8300  padding: 0;8301  font-family: inherit;8302  text-align: center;8303  transition: color 150ms ease;8304}83058306.peach-sync-info-pro-link:hover {8307  color: var(--peach-accent);8308}83098310.peach-btn--full {8311  width: 100%;8312}83138314/* ── Sync screen ── */83158316.peach-sync-coming-soon {8317  display: flex;8318  align-items: flex-start;8319  gap: 10px;8320  padding: 12px 14px;8321  background: var(--peach-s1);8322  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8323  border-radius: 10px;8324}8325.peach-sync-coming-soon__icon {8326  flex-shrink: 0;8327  color: var(--peach-accent);8328  margin-top: 1px;8329  line-height: 0;8330}8331.peach-sync-coming-soon__title {8332  font-family: 'Cormorant Garamond', serif;8333  font-weight: 500;8334  font-size: 13px;8335  color: var(--peach-accent);8336  margin: 0 0 5px;8337  line-height: 1.3;8338}8339.peach-sync-coming-soon__body {8340  font-size: 12px;8341  color: var(--peach-t1);8342  line-height: 1.55;8343  margin: 0;8344}83458346.peach-sync-screen {8347  display: flex;8348  flex-direction: column;8349  height: 100%;8350}83518352.peach-sync-content {8353  flex: 1;8354  overflow-y: auto;8355  padding: 24px 20px 40px;8356  display: flex;8357  flex-direction: column;8358  gap: 24px;8359}83608361/* Intro (State A) */8362.peach-sync-headline {8363  font-family: 'Cormorant Garamond', serif;8364  font-style: italic;8365  font-size: 28px;8366  font-weight: 600;8367  color: var(--peach-t0);8368  margin: 0 0 10px;8369  line-height: 1.2;8370}83718372.peach-sync-intro-body {8373  font-size: 14px;8374  color: var(--peach-t1);8375  line-height: 1.6;8376  margin: 0;8377}83788379.peach-sync-pro-note {8380  display: flex;8381  flex-direction: column;8382  gap: 8px;8383  background: var(--peach-t3);8384  border-radius: 10px;8385  padding: 12px 14px;8386}83878388.peach-sync-pro-note-text {8389  font-size: 12px;8390  color: var(--peach-t2);8391  line-height: 1.5;8392  margin: 0;8393}83948395.peach-sync-pro-link {8396  background: none;8397  border: none;8398  font-size: 12px;8399  color: var(--peach-accent);8400  cursor: pointer;8401  padding: 0;8402  font-family: inherit;8403  text-align: left;8404}84058406/* Status (State C) */8407.peach-sync-status {8408  padding: 12px 0;8409  border-bottom: 1px solid var(--peach-border);8410}84118412.peach-sync-status-row {8413  display: flex;8414  align-items: center;8415  gap: 8px;8416}84178418.peach-sync-dot {8419  width: 7px;8420  height: 7px;8421  border-radius: 50%;8422  flex-shrink: 0;8423}84248425.peach-sync-dot--green { background: var(--peach-health-ok); }8426.peach-sync-dot--amber { background: var(--peach-accent); }84278428.peach-sync-status-text {8429  font-family: 'IBM Plex Mono', monospace;8430  font-size: 11px;8431  color: var(--peach-t2);8432}84338434/* Paired devices */8435.peach-sync-section {8436  display: flex;8437  flex-direction: column;8438  gap: 2px;8439}84408441.peach-sync-section-label {8442  font-family: 'IBM Plex Mono', monospace;8443  font-size: 10px;8444  letter-spacing: 0.1em;8445  color: var(--peach-t3);8446  margin: 0 0 10px;8447}84488449.peach-sync-device-row {8450  display: flex;8451  justify-content: space-between;8452  align-items: baseline;8453  padding: 10px 0;8454  border-bottom: 1px solid var(--peach-border);8455  gap: 12px;8456}84578458.peach-sync-device-name {8459  font-size: 14px;8460  color: var(--peach-t1);8461}84628463.peach-sync-device-meta {8464  font-family: 'IBM Plex Mono', monospace;8465  font-size: 11px;8466  color: var(--peach-t3);8467  white-space: nowrap;8468}84698470.peach-sync-hub-note {8471  padding: 14px 16px;8472  border: 1px solid var(--peach-border);8473  border-radius: 10px;8474  display: flex;8475  flex-direction: column;8476  gap: 6px;8477  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8478}84798480.peach-sync-hub-note-title {8481  font-size: 13px;8482  font-weight: 600;8483  color: var(--peach-t0);8484  margin: 0;8485}84868487.peach-sync-hub-note-body {8488  font-size: 12px;8489  color: var(--peach-t2);8490  line-height: 1.6;8491  margin: 0;8492}84938494/* Action buttons */8495.peach-sync-actions {8496  display: flex;8497  gap: 10px;8498  flex-wrap: wrap;8499}85008501/* Upgrade prompt (State B) */8502.peach-sync-upgrade {8503  display: flex;8504  flex-direction: column;8505  gap: 12px;8506  padding: 16px;8507  border: 1px solid var(--peach-border);8508  border-radius: 10px;8509}85108511.peach-sync-upgrade-text {8512  font-size: 13px;8513  color: var(--peach-t2);8514  line-height: 1.6;8515  margin: 0;8516}85178518/* Network note */8519.peach-sync-network-note {8520  font-size: 12px;8521  color: var(--peach-t3);8522  line-height: 1.6;8523  margin: 0;8524}85258526/* Advanced */8527.peach-sync-advanced {8528  margin-top: auto;8529  padding-top: 16px;8530  border-top: 1px solid var(--peach-border);8531}85328533.peach-sync-advanced-toggle {8534  display: flex;8535  align-items: center;8536  gap: 8px;8537  background: none;8538  border: none;8539  font-family: 'IBM Plex Mono', monospace;8540  font-size: 11px;8541  letter-spacing: 0.08em;8542  color: var(--peach-t3);8543  cursor: pointer;8544  padding: 0;8545  text-transform: uppercase;8546}85478548.peach-sync-advanced-chevron {8549  display: inline-block;8550  transition: transform 200ms ease;8551  font-size: 10px;8552}85538554.peach-sync-advanced-chevron.is-open {8555  transform: rotate(90deg);8556}85578558.peach-sync-advanced-content {8559  margin-top: 14px;8560}85618562.peach-sync-advanced-row {8563  display: flex;8564  justify-content: space-between;8565  align-items: center;8566  gap: 16px;8567}85688569.peach-sync-advanced-title {8570  font-size: 14px;8571  color: var(--peach-t1);8572  margin: 0 0 2px;8573}85748575.peach-sync-advanced-subtitle {8576  font-size: 12px;8577  color: var(--peach-t3);8578  margin: 0;8579  line-height: 1.5;8580}85818582/* ── Notes Mode ── */85838584/* Overlay that crossfades over the vault */8585.peach-notes-overlay {8586  position: fixed;8587  inset: 0;8588  z-index: 90;8589  opacity: 0;8590  pointer-events: none;8591  animation: peach-mode-in 220ms ease-in forwards;8592}85938594.peach-notes-overlay.is-visible {8595  opacity: 1;8596  pointer-events: auto;8597}85988599@keyframes peach-mode-in {8600  from { opacity: 0; }8601  to   { opacity: 1; }8602}86038604/* Top-level notes surface */8605.peach-notes-mode {8606  position: absolute;8607  inset: 0;8608  background: var(--peach-bg);8609  display: flex;8610  flex-direction: column;8611}86128613/* Rune canvas positioned behind content */8614.peach-note-rune-canvas {8615  position: absolute;8616  inset: 0;8617  width: 100%;8618  height: 100%;8619  pointer-events: none;8620  z-index: 0;8621}86228623/* TOC wrapper */8624.peach-notes-toc-wrapper {8625  position: absolute;8626  inset: 0;8627  z-index: 1;8628  opacity: 1;8629  pointer-events: auto;8630  transition: opacity 200ms ease;8631}86328633.peach-notes-toc-wrapper.is-hidden {8634  opacity: 0;8635  pointer-events: none;8636}86378638/* Editor wrapper */8639.peach-notes-editor-wrapper {8640  position: absolute;8641  inset: 0;8642  z-index: 2;8643  opacity: 0;8644  pointer-events: none;8645  transition: opacity 200ms ease;8646}86478648.peach-notes-editor-wrapper.is-visible {8649  opacity: 1;8650  pointer-events: auto;8651}86528653/* TOC inner */8654.peach-notes-toc {8655  position: relative;8656  display: flex;8657  flex-direction: column;8658  height: 100%;8659  padding-top: env(safe-area-inset-top, 0px);8660  padding-bottom: env(safe-area-inset-bottom, 0px);8661}86628663/* Shared header */8664.peach-notes-header {8665  display: flex;8666  align-items: center;8667  padding: 12px 16px;8668  gap: 12px;8669  flex-shrink: 0;8670  min-height: 52px;8671  position: relative;8672  z-index: 2;8673}86748675.peach-notes-back {8676  font-size: 22px;8677  color: var(--peach-t2);8678  background: none;8679  border: none;8680  padding: 4px;8681  cursor: pointer;8682  line-height: 1;8683  flex-shrink: 0;8684  transition: color 150ms ease;8685  -webkit-tap-highlight-color: transparent;8686}86878688.peach-notes-back:active { color: var(--peach-t0); }86898690.peach-notes-header-title {8691  flex: 1;8692  font-family: 'Cormorant Garamond', serif;8693  font-style: italic;8694  font-size: 22px;8695  color: var(--peach-t0);8696  text-align: center;8697}86988699.peach-notes-header-title.is-breadcrumb {8700  font-family: 'IBM Plex Mono', monospace;8701  font-style: normal;8702  font-size: 11px;8703  color: var(--peach-t3);8704  letter-spacing: 0.08em;8705  text-transform: uppercase;8706  cursor: pointer;8707}87088709.peach-notes-header-actions {8710  display: flex;8711  gap: 8px;8712  flex-shrink: 0;8713}87148715.peach-notes-header-btn {8716  width: 36px;8717  height: 36px;8718  display: flex;8719  align-items: center;8720  justify-content: center;8721  background: none;8722  border: none;8723  color: var(--peach-t2);8724  cursor: pointer;8725  border-radius: 8px;8726  font-size: 16px;8727  transition: color 150ms ease, background 150ms ease;8728  -webkit-tap-highlight-color: transparent;8729}87308731.peach-notes-header-btn:active {8732  background: rgba(255,255,255,0.06);8733  color: var(--peach-t0);8734}87358736/* Inline search bar */8737.peach-notes-search-input {8738  flex: 1;8739  background: none;8740  border: none;8741  outline: none;8742  font-family: 'IBM Plex Mono', monospace;8743  font-size: 13px;8744  color: var(--peach-t0);8745  padding: 4px 0;8746  letter-spacing: 0.02em;8747}87488749.peach-notes-search-input::placeholder {8750  color: var(--peach-t3);8751}87528753/* TOC list */8754.peach-notes-list-container {8755  flex: 1;8756  overflow-y: auto;8757  overflow-x: hidden;8758  scrollbar-width: none;8759  -webkit-overflow-scrolling: touch;8760  overscroll-behavior: contain;8761  position: relative;8762  z-index: 1;8763}87648765.peach-notes-list-container::-webkit-scrollbar { display: none; }87668767/* Note row */8768.peach-note-row {8769  position: relative;8770  display: grid;8771  grid-template-columns: 44px 8px 1fr 8px auto;8772  align-items: center;8773  min-height: 72px;8774  padding: 16px 20px;8775  border-bottom: 0.5px solid var(--peach-border);8776  cursor: pointer;8777  overflow: hidden;8778  touch-action: pan-y;8779  user-select: none;8780  -webkit-user-select: none;8781  -webkit-tap-highlight-color: transparent;8782}87838784.peach-note-row:first-child {8785  border-top: 0.5px solid var(--peach-border);8786}87878788.peach-note-row:active {8789  background: rgba(255,255,255,0.02);8790}87918792.peach-note-numeral {8793  font-family: 'Cormorant Garamond', serif;8794  font-style: italic;8795  font-size: 15px;8796  color: var(--peach-accent);8797  text-align: right;8798  line-height: 1;8799  flex-shrink: 0;8800}88018802.peach-note-title-gap { /* grid spacer */ }88038804.peach-note-title {8805  font-family: 'Cormorant Garamond', serif;8806  font-style: italic;8807  font-size: 18px;8808  color: var(--peach-t0);8809  line-height: 1.3;8810  min-width: 0;8811  overflow-wrap: break-word;8812}88138814.peach-note-title-match {8815  color: var(--peach-accent);8816}88178818.peach-note-date {8819  font-family: 'IBM Plex Mono', monospace;8820  font-size: 11px;8821  color: var(--peach-t2);8822  white-space: nowrap;8823  text-align: right;8824  flex-shrink: 0;8825  grid-column: 5;8826}88278828/* Swipe underlays */8829.peach-note-row-underlay {8830  position: absolute;8831  inset: 0;8832  display: flex;8833  align-items: center;8834  padding: 0 24px;8835  font-family: 'IBM Plex Mono', monospace;8836  font-size: 11px;8837  letter-spacing: 0.1em;8838  pointer-events: none;8839  z-index: 0;8840}88418842.peach-note-row-underlay--delete {8843  background: #8B2020;8844  color: rgba(255,255,255,0.9);8845  justify-content: flex-end;8846}88478848.peach-note-row-underlay--archive {8849  background: var(--peach-accent);8850  color: #0C0A06;8851  justify-content: flex-start;8852}88538854/* Delete confirm strip */8855.peach-note-delete-confirm {8856  position: absolute;8857  inset: 0;8858  background: var(--peach-bg);8859  display: flex;8860  align-items: center;8861  gap: 12px;8862  padding: 0 20px;8863  font-family: 'IBM Plex Mono', monospace;8864  font-size: 11px;8865  color: var(--peach-t1);8866  letter-spacing: 0.04em;8867  animation: peach-delete-confirm-in 150ms ease both;8868  z-index: 10;8869}88708871@keyframes peach-delete-confirm-in {8872  from { opacity: 0; }8873  to   { opacity: 1; }8874}88758876.peach-note-delete-confirm-btn {8877  background: #8B2020;8878  color: rgba(255,255,255,0.9);8879  border: none;8880  border-radius: 6px;8881  padding: 4px 10px;8882  font-family: 'IBM Plex Mono', monospace;8883  font-size: 10px;8884  cursor: pointer;8885  letter-spacing: 0.06em;8886}88878888.peach-note-delete-cancel-btn {8889  background: none;8890  border: none;8891  color: var(--peach-t3);8892  font-family: 'IBM Plex Mono', monospace;8893  font-size: 10px;8894  cursor: pointer;8895  letter-spacing: 0.06em;8896  padding: 4px 6px;8897}88988899/* + New note button */8900.peach-notes-new-btn {8901  font-family: 'IBM Plex Mono', monospace;8902  font-size: 12px;8903  color: var(--peach-t3);8904  text-align: center;8905  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8906  background: none;8907  border: none;8908  width: 100%;8909  cursor: pointer;8910  letter-spacing: 0.04em;8911  transition: color 150ms ease;8912  -webkit-tap-highlight-color: transparent;8913}89148915.peach-notes-new-btn:active { color: var(--peach-accent); }89168917/* Empty state */8918.peach-notes-empty {8919  display: flex;8920  flex-direction: column;8921  align-items: center;8922  justify-content: center;8923  flex: 1;8924  padding: 48px 32px;8925  gap: 16px;8926}89278928.peach-notes-empty-text {8929  font-family: 'Cormorant Garamond', serif;8930  font-style: italic;8931  font-size: 20px;8932  color: var(--peach-t3);8933  text-align: center;8934  margin: 0;8935  line-height: 1.4;8936  white-space: pre-line;8937}89388939/* ── Editor surface ── */89408941.peach-note-editor-surface {8942  position: absolute;8943  inset: 0;8944  background: var(--peach-bg);8945  display: flex;8946  flex-direction: column;8947  padding-top: env(safe-area-inset-top, 0px);8948}89498950.peach-note-editor-scroll {8951  flex: 1;8952  overflow-y: auto;8953  overflow-x: hidden;8954  scrollbar-width: none;8955  -webkit-overflow-scrolling: touch;8956  padding: 0 24px 120px;8957  position: relative;8958  z-index: 1;8959}89608961.peach-note-editor-scroll::-webkit-scrollbar { display: none; }89628963/* Desktop toolbar (always visible above body) */8964.peach-note-toolbar-desktop-inline {8965  display: flex;8966  align-items: center;8967  gap: 2px;8968  padding: 6px 0 12px;8969  margin-bottom: 4px;8970  border-bottom: 0.5px solid var(--peach-border);8971}89728973/* Title field */8974.peach-note-title-field {8975  font-family: 'Cormorant Garamond', serif;8976  font-style: italic;8977  font-size: 32px;8978  font-weight: 600;8979  color: var(--peach-t0);8980  line-height: 1.2;8981  padding: 8px 0 0;8982  outline: none;8983  min-height: 44px;8984  word-break: break-word;8985  position: relative;8986  z-index: 1;8987}89888989.peach-note-title-field:empty::before {8990  content: attr(data-placeholder);8991  color: var(--peach-t3);8992  pointer-events: none;8993}89948995/* Hairline separator */8996.peach-note-hairline {8997  height: 0.5px;8998  background: var(--peach-border);8999  margin: 12px 0 20px;9000  position: relative;9001  z-index: 1;9002}90039004/* Body field */9005.peach-note-body-field {9006  font-family: 'DM Sans', sans-serif;9007  font-size: 16px;9008  color: var(--peach-t0);9009  line-height: 1.85;9010  padding: 0;9011  outline: none;9012  min-height: 240px;9013  word-break: break-word;9014  position: relative;9015  z-index: 1;9016}90179018.peach-note-body-field:empty::before {9019  content: attr(data-placeholder);9020  color: var(--peach-t3);9021  font-style: italic;9022  pointer-events: none;9023}90249025.peach-note-body-field h2 {9026  font-family: 'Cormorant Garamond', serif;9027  font-style: italic;9028  font-size: 22px;9029  font-weight: 600;9030  color: var(--peach-t0);9031  margin: 20px 0 8px;9032}90339034.peach-note-body-field blockquote {9035  border-left: 2px solid var(--peach-accent);9036  margin: 12px 0;9037  padding-left: 16px;9038  color: var(--peach-t1);9039  font-style: italic;9040}90419042.peach-note-body-field ul,9043.peach-note-body-field ol {9044  padding-left: 20px;9045  margin: 8px 0;9046}90479048.peach-note-body-field li {9049  margin: 4px 0;9050}90519052.peach-note-body-field hr {9053  border: none;9054  border-top: 0.5px solid var(--peach-border);9055  margin: 16px 0;9056}90579058/* Saved indicator */9059.peach-note-saved-indicator {9060  font-family: 'IBM Plex Mono', monospace;9061  font-size: 11px;9062  color: var(--peach-t3);9063  letter-spacing: 0.04em;9064  text-align: right;9065  padding: 6px 24px;9066  flex-shrink: 0;9067  transition: opacity 300ms ease;9068  pointer-events: none;9069  position: relative;9070  z-index: 1;9071}90729073/* Mobile keyboard toolbar */9074.peach-note-toolbar-mobile {9075  display: flex;9076  align-items: center;9077  padding: 8px 16px;9078  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));9079  background: var(--peach-bg);9080  border-top: 0.5px solid var(--peach-border);9081  gap: 4px;9082  flex-shrink: 0;9083  position: relative;9084  z-index: 10;9085}90869087.peach-note-toolbar-btn {9088  min-width: 36px;9089  height: 36px;9090  display: flex;9091  align-items: center;9092  justify-content: center;9093  background: none;9094  border: none;9095  border-radius: 8px;9096  cursor: pointer;9097  font-size: 14px;9098  color: var(--peach-t1);9099  font-family: 'DM Sans', sans-serif;9100  font-weight: 600;9101  transition: background 100ms ease, color 100ms ease;9102  -webkit-tap-highlight-color: transparent;9103}91049105.peach-note-toolbar-btn--italic { font-style: italic; }9106.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }9107.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }91089109.peach-note-toolbar-divider {9110  width: 0.5px;9111  height: 20px;9112  background: var(--peach-border);9113  margin: 0 4px;9114  flex-shrink: 0;9115}91169117.peach-note-toolbar-spacer { flex: 1; }91189119/* Desktop: larger headline in TOC */9120@media (min-width: 400px) {9121  .peach-notes-header-title:not(.is-breadcrumb) {9122    font-size: 32px;9123  }91249125  .peach-note-row {9126    min-height: 64px;9127    padding: 14px 16px;9128  }9129}91309131/* Flying title — shared element during expansion/collapse */91329133/* ─── Light theme overrides ───────────────────────────────────────────────9134   Tokens that cannot be expressed as variable substitutions — hardcoded9135   context-specific values that need separate light-mode rules. */91369137/* Settings section headers: use text-label (#79766F) per restoration brief —9138   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY9139   presence without fighting the light parchment background. */9140.light .peach-settings-sub-label,9141[data-theme="light"] .peach-settings-sub-label,9142.light .peach-settings-nav-label,9143[data-theme="light"] .peach-settings-nav-label {9144  color: #79766F;9145}91469147/* Secondary action buttons (ghost / subtle): filled with input-well surface9148   so they read as recessed against the parchment card background. */9149.light .peach-btn--ghost:not(.peach-icon-btn),9150[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {9151  background: #EEE7DD;9152  border-color: #DDD5CB;9153  color: #1A1208;9154}9155.light .peach-icon-btn,9156[data-theme="light"] .peach-icon-btn {9157  background: transparent;9158  border-color: transparent;9159}9160.light .peach-btn--subtle,9161[data-theme="light"] .peach-btn--subtle {9162  background: #EEE7DD;9163  border-color: #DDD5CB;9164}91659166/* Wide secondary action button on the lock screen — override the9167   hardcoded dark-mode rgba values with warm parchment equivalents. */9168.light .peach-lock-secondary,9169[data-theme="light"] .peach-lock-secondary {9170  background: #EEE7DD;9171  border-color: #DDD5CB;9172  color: #1A1208;9173}9174.light .peach-lock-secondary:hover,9175[data-theme="light"] .peach-lock-secondary:hover {9176  background: #F0E9DF;9177}91789179/* Entry row hover: bg-row lifts the row above the card surface. */9180.light .peach-entry-row:hover,9181[data-theme="light"] .peach-entry-row:hover {9182  background: #F2EBE1;9183}9184.light .peach-entry-row.is-active,9185[data-theme="light"] .peach-entry-row.is-active {9186  background: #F2EBE1;9187}9188.light .peach-entry-row.is-selected,9189[data-theme="light"] .peach-entry-row.is-selected {9190  background: #F5EDE2;9191}91929193/* ──────────────────────────────────────────────────────────────────────────9194   Pair-device flow — bird-stage animation (Phase 1)9195   See src/popup/components/PairingBirds.tsx and the brief §6.2.9196   Three-act animation gated on the [data-phase] attribute of9197   .peach-pair-pair; child layers (birds, sound arcs, flight wave, dot)9198   each react via either pose class or visibility flag.9199   Tokens: accent surfaces use var(--peach-accent); bird illustration9200   colours are baked into the SVG per the brand-peach exception in §3.1.9201   ────────────────────────────────────────────────────────────────────── */92029203.peach-pair-pair {9204  position: absolute;9205  inset: 0;9206  z-index: 3;9207  display: flex;9208  flex-direction: column;9209  padding: 14px 12px 12px;9210  width: 100%;9211  box-sizing: border-box;9212  gap: 0;9213  background:9214    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9215    var(--peach-bg);9216  color: var(--peach-t0);9217  overflow-y: auto;9218  overflow-x: hidden;9219  scrollbar-width: none;9220  isolation: isolate;9221  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9222}9223@keyframes peach-pair-overlay-in {9224  from { opacity: 0; transform: translateY(8px); }9225  to   { opacity: 1; transform: translateY(0); }9226}9227.peach-pair-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }9228.peach-pair-pair::before {9229  content: '';9230  position: absolute;9231  inset: 0;9232  border-radius: inherit;9233  pointer-events: none;9234  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9235  z-index: 0;9236}9237.peach-pair-pair > * { position: relative; z-index: 1; }92389239/* Header --------------------------------------------------------------- */9240.peach-pair-head {9241  display: flex; align-items: center; gap: 10px;9242}9243.peach-pair-back {9244  width: 32px; height: 32px;9245  display: inline-flex; align-items: center; justify-content: center;9246  background: transparent;9247  border: none;9248  border-radius: 8px;9249  color: var(--peach-t1);9250  cursor: pointer;9251  transition: color 0.15s ease, box-shadow 0.15s ease;9252}9253.peach-pair-back:hover {9254  color: var(--peach-accent);9255  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9256}9257.peach-pair-title {9258  font-family: var(--font-display, Georgia, serif);9259  font-style: italic;9260  font-size: 24px;9261  font-weight: 500;9262  letter-spacing: 0.005em;9263  color: var(--peach-t0);9264  line-height: 1;9265}9266.peach-pair-head-spacer { flex: 1; }92679268/* Chip row ------------------------------------------------------------- */9269.peach-pair-chip-row {9270  display: flex;9271  align-items: center;9272  justify-content: flex-start;9273  margin-top: 12px;9274}9275.peach-pair-chip {9276  display: inline-flex; align-items: center; gap: 8px;9277  padding: 5px 10px 5px 8px;9278  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9279  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9280  border-radius: 999px;9281  font-family: var(--peach-mono, ui-monospace, monospace);9282  font-size: 11px;9283  letter-spacing: 0.04em;9284  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9285}9286.peach-pair-chip-dot {9287  width: 6px; height: 6px; border-radius: 50%;9288  background: var(--peach-accent);9289  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9290}9291.peach-pair-chip[data-phase="paired"] {9292  background: color-mix(in srgb, #4f9eda 12%, transparent);9293  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9294  color: #76b6e8;9295}9296.peach-pair-chip[data-phase="paired"] .peach-pair-chip-dot {9297  background: #76b6e8;9298  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9299}9300.peach-pair-chip[data-phase="timeout"],9301.peach-pair-chip[data-phase="mic_denied"],9302.peach-pair-chip[data-phase="version_mismatch"],9303.peach-pair-chip[data-phase="handshake_failed"] {9304  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9305  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9306  color: var(--peach-warn, #d29257);9307}9308.peach-pair-chip[data-phase="timeout"] .peach-pair-chip-dot,9309.peach-pair-chip[data-phase="mic_denied"] .peach-pair-chip-dot,9310.peach-pair-chip[data-phase="version_mismatch"] .peach-pair-chip-dot,9311.peach-pair-chip[data-phase="handshake_failed"] .peach-pair-chip-dot {9312  background: var(--peach-warn, #d29257);9313  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9314}93159316/* Bird stage ----------------------------------------------------------- */9317.peach-pair-stage {9318  position: relative;9319  /* Never let the flex column steal the stage's height to fit whatever is9320     below it — that is what clipped the birds to their legs before. Anything9321     that does not fit has to give somewhere else. */9322  flex: none;9323  margin: 14px 0 8px;9324  height: 180px;9325  border-radius: 12px;9326  background:9327    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9328    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),9329    color-mix(in srgb, var(--peach-bg) 92%, #000);9330  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);9331  overflow: hidden;9332  isolation: isolate;9333}9334.peach-pair-stage::after {9335  content: '';9336  position: absolute;9337  left: 12%; right: 12%;9338  bottom: 36px;9339  height: 1px;9340  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9341}93429343.peach-pair-bird-slot {9344  position: absolute;9345  bottom: 8px;9346  width: 100px;9347  height: 110px;9348  display: flex;9349  align-items: flex-end;9350  justify-content: center;9351}9352.peach-pair-bird-slot-desktop { left: 28px; }9353.peach-pair-bird-slot-mobile { right: 28px; }93549355/* The QR screen is the tallest in the flow: a 180px stage plus headline, sub,9356   QR and action overflows the popup, and the stage is what gets clipped — you9357   saw bird legs and nothing else. Shrink the stage and the birds with it here9358   only, so the birds stay whole and the QR stays comfortably above the fold.9359   Uses the individual `scale` property rather than `transform`, which the9360   mobile bird's hop animation already owns. */9361.peach-adoption-source[data-phase="invitation"] .peach-pair-stage {9362  height: 108px;9363  margin: 8px 0 6px;9364}9365.peach-adoption-source[data-phase="invitation"] .peach-pair-bird-slot {9366  scale: 0.62;9367  transform-origin: center bottom;9368}9369.peach-adoption-source[data-phase="invitation"] .peach-pair-stage::after {9370  bottom: 20px;9371}93729373/* Mobile bird hops in from the right when handshake begins */9374.peach-pair-bird-slot-mobile {9375  opacity: 1;9376  transform: translateX(-6px);9377  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9378}9379.peach-pair-stage.act-listening .peach-pair-bird-slot-mobile,9380.peach-pair-stage.act-chirping .peach-pair-bird-slot-mobile,9381.peach-pair-stage.act-idle .peach-pair-bird-slot-mobile {9382  opacity: 0;9383  transform: translateX(60px) rotate(8deg);9384}9385.peach-pair-stage.act-handshake .peach-pair-bird-slot-desktop,9386.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop {9387  transform: translateX(6px);9388  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9389}93909391/* Paired: both birds bob together */9392.peach-pair-stage.act-paired .peach-pair-bird-slot {9393  animation: peach-pair-happy-bob 1.2s ease-in-out infinite;9394}9395.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { animation-delay: 0.2s; }9396.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop { --bb-x: 6px; }9397.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { --bb-x: -6px; }9398@keyframes peach-pair-happy-bob {9399  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9400  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9401}94029403/* Bird internal -------------------------------------------------------- */9404.peach-pair-bird {9405  width: 108px;9406  height: 108px;9407  transform-origin: 50% 95%;9408}9409.peach-pair-bird svg { width: 100%; height: 100%; overflow: visible; }94109411.peach-pair-bird-body {9412  transform-origin: 50% 80%;9413  animation: peach-pair-bird-bob 2.4s ease-in-out infinite;9414}9415@keyframes peach-pair-bird-bob {9416  0%, 100% { transform: translateY(0) scale(1, 1); }9417  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9418}94199420.peach-pair-bird-eye-group {9421  animation: peach-pair-blink 5.2s steps(1, end) infinite;9422  transform-origin: center;9423  transform-box: fill-box;9424}9425@keyframes peach-pair-blink {9426  0%, 92%, 96%, 100% { transform: scaleY(1); }9427  94%                { transform: scaleY(0.05); }9428}94299430/* Pose: chirping — beak opens, head bobs, aura blooms */9431.peach-pair-bird-pose-chirping .peach-pair-bird-body {9432  animation:9433    peach-pair-bird-bob 2.4s ease-in-out infinite,9434    peach-pair-squeeze 1.7s ease-in-out infinite;9435}9436@keyframes peach-pair-squeeze {9437  0%, 70%, 100% { transform-origin: 50% 85%; }9438  78%           { transform: scale(1.04, 0.96) translateY(1px); }9439  86%           { transform: scale(0.98, 1.02); }9440}9441.peach-pair-bird-pose-chirping .peach-pair-bird-head-group {9442  animation: peach-pair-head-bob 1.7s ease-in-out infinite;9443}9444@keyframes peach-pair-head-bob {9445  0%, 70%, 100% { transform: translateY(0) rotate(0); }9446  78%           { transform: translateY(-3px) rotate(-4deg); }9447  86%           { transform: translateY(-1px) rotate(-2deg); }9448}9449.peach-pair-bird-pose-chirping .peach-pair-bird-beak {9450  animation: peach-pair-beak-open 1.7s ease-in-out infinite;9451}9452@keyframes peach-pair-beak-open {9453  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9454  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9455  86%           { transform: rotate(-6deg); }9456}9457.peach-pair-bird-pose-chirping .peach-pair-bird-aura {9458  animation: peach-pair-aura 1.7s ease-in-out infinite;9459}9460@keyframes peach-pair-aura {9461  0%, 100% { opacity: 0; }9462  50%      { opacity: 0.8; }9463}9464.peach-pair-bird-pose-chirping .peach-pair-bird-tail {9465  animation: peach-pair-tail-twitch 1.7s ease-in-out infinite;9466  transform-origin: 100% 50%;9467}9468@keyframes peach-pair-tail-twitch {9469  0%, 75%, 100% { transform: rotate(0); }9470  82%           { transform: rotate(-3deg) translateX(-1px); }9471}94729473/* Pose: attentive — head tilts toward partner */9474.peach-pair-bird-pose-attentive .peach-pair-bird-head-group {9475  animation: peach-pair-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9476}9477@keyframes peach-pair-head-tilt {9478  0%   { transform: rotate(0) translateY(0); }9479  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9480  100% { transform: rotate(-6deg); }9481}9482.peach-pair-bird-pose-attentive .peach-pair-bird-tail {9483  animation: peach-pair-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9484  transform-origin: 100% 50%;9485}9486@keyframes peach-pair-tail-cock {9487  0%   { transform: rotate(0); }9488  100% { transform: rotate(-4deg); }9489}94909491/* Pose: happy — wing flutter, tuft perk, tail wag */9492.peach-pair-bird-pose-happy .peach-pair-bird-wing {9493  transform-origin: 80% 60%;9494  animation: peach-pair-wing-flutter 0.32s ease-in-out 5;9495}9496@keyframes peach-pair-wing-flutter {9497  0%, 100% { transform: rotate(0) translateY(0); }9498  50%      { transform: rotate(-16deg) translateY(-2px); }9499}9500.peach-pair-bird-pose-happy .peach-pair-bird-tuft {9501  transform-origin: 0% 100%;9502  animation: peach-pair-tuft-perk 0.4s ease-in-out 3;9503}9504@keyframes peach-pair-tuft-perk {9505  0%, 100% { transform: rotate(0); }9506  50%      { transform: rotate(-15deg) translateY(-1px); }9507}9508.peach-pair-bird-pose-happy .peach-pair-bird-tail {9509  transform-origin: 100% 50%;9510  animation: peach-pair-tail-wag 0.5s ease-in-out 4;9511}9512@keyframes peach-pair-tail-wag {9513  0%, 100% { transform: rotate(0); }9514  25%      { transform: rotate(6deg); }9515  75%      { transform: rotate(-6deg); }9516}9517.peach-pair-bird-pose-happy .peach-pair-bird-head-group {9518  animation: peach-pair-head-perk 0.5s ease-out;9519}9520@keyframes peach-pair-head-perk {9521  0%   { transform: translateY(0); }9522  40%  { transform: translateY(-3px) rotate(2deg); }9523  100% { transform: translateY(0); }9524}95259526/* Pose: sad — body droops forward */9527.peach-pair-bird-pose-sad .peach-pair-bird-body {9528  transform: translateY(5px) rotate(-2deg);9529  animation: none;9530}9531.peach-pair-bird-pose-sad .peach-pair-bird-head-group {9532  transform: translateY(4px) rotate(8deg);9533}9534.peach-pair-bird-pose-sad .peach-pair-bird-tuft { transform: rotate(15deg) translateY(2px); }9535.peach-pair-bird-pose-sad .peach-pair-bird-tail { transform: rotate(8deg) translateY(2px); }95369537.peach-pair-bird-pose-hidden { opacity: 0; }95389539/* Sound arcs ----------------------------------------------------------- */9540.peach-pair-arcs {9541  position: absolute;9542  top: 18px;9543  width: 96px;9544  height: 70px;9545  pointer-events: none;9546}9547.peach-pair-arcs-right { right: -60px; }9548.peach-pair-arcs-left  { left: -60px; transform: scaleX(-1); }9549.peach-pair-arc {9550  position: absolute;9551  top: 50%;9552  left: 0;9553  width: 40px;9554  height: 40px;9555  margin-top: -20px;9556  border: 1.2px solid #f4d5a8;9557  border-color: transparent #f4d5a8 transparent transparent;9558  border-radius: 50%;9559  opacity: 0;9560  animation: peach-pair-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9561}9562@keyframes peach-pair-arc-expand {9563  0%   { transform: scale(0.4); opacity: 0; }9564  20%  { opacity: 0.9; }9565  100% { transform: scale(1.6); opacity: 0; }9566}95679568/* Flight wave ---------------------------------------------------------- */9569.peach-pair-flight-track {9570  position: absolute;9571  inset: 32px 36px 38px 36px;9572  pointer-events: none;9573}9574.peach-pair-flight-wave {9575  position: absolute;9576  top: 8px;9577  left: 76px;9578  right: 76px;9579  height: 60px;9580  width: auto;9581  opacity: 0;9582  transition: opacity 0.15s ease;9583  stroke: #f4d5a8;9584  fill: none;9585}9586.peach-pair-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9587.peach-pair-flight-wave.is-visible { opacity: 1; }9588.peach-pair-flight-path,9589.peach-pair-flight-path-2 {9590  stroke-dasharray: 240;9591  stroke-dashoffset: 240;9592  stroke-linecap: round;9593  fill: none;9594}9595.peach-pair-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9596.peach-pair-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9597.peach-pair-flight-wave.is-visible .peach-pair-flight-path {9598  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9599}9600.peach-pair-flight-wave.is-visible .peach-pair-flight-path-2 {9601  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9602}9603@keyframes peach-pair-fly {9604  0%   { stroke-dashoffset: 240; opacity: 0; }9605  20%  { opacity: 1; }9606  100% { stroke-dashoffset: -120; opacity: 0; }9607}96089609/* Connection dot ------------------------------------------------------- */9610.peach-pair-dot {9611  position: absolute;9612  top: 50%; left: 50%;9613  transform: translate(-50%, -50%);9614  width: 40px; height: 40px;9615  opacity: 0;9616  pointer-events: none;9617  transition: opacity 0.3s ease;9618  color: var(--peach-accent);9619}9620.peach-pair-dot.is-visible { opacity: 1; }9621.peach-pair-dot-glow {9622  position: absolute; top: 50%; left: 50%;9623  transform: translate(-50%, -50%);9624  width: 38px; height: 38px;9625  border-radius: 50%;9626  filter: blur(10px);9627  opacity: 0.55;9628  background: var(--peach-accent);9629  animation: peach-pair-dot-bloom 1.4s ease-out;9630}9631.peach-pair-dot-core {9632  position: absolute; top: 50%; left: 50%;9633  transform: translate(-50%, -50%);9634  width: 8px; height: 8px;9635  border-radius: 50%;9636  background: var(--peach-accent);9637  box-shadow: 0 0 12px currentColor;9638  animation: peach-pair-dot-core 1.4s ease-out;9639}9640.peach-pair-dot-ring {9641  position: absolute; top: 50%; left: 50%;9642  width: 60px; height: 60px;9643  transform: translate(-50%, -50%);9644  animation: peach-pair-dot-ring 1.4s linear;9645  stroke: var(--peach-accent);9646}9647@keyframes peach-pair-dot-bloom {9648  0%   { width: 4px; height: 4px; opacity: 0; }9649  35%  { width: 60px; height: 60px; opacity: 0.7; }9650  100% { width: 38px; height: 38px; opacity: 0.55; }9651}9652@keyframes peach-pair-dot-core {9653  0%   { width: 0; height: 0; }9654  35%  { width: 12px; height: 12px; }9655  100% { width: 8px; height: 8px; }9656}9657@keyframes peach-pair-dot-ring {9658  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9659  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9660  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9661}96629663/* Motes — drift upward across the stage */9664.peach-pair-motes {9665  position: absolute;9666  inset: 0;9667  pointer-events: none;9668}9669.peach-pair-mote {9670  position: absolute;9671  width: 2px; height: 2px;9672  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9673  border-radius: 50%;9674  bottom: 32px;9675  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9676  opacity: 0;9677  animation: peach-pair-mote-drift 6s linear infinite;9678  animation-delay: calc(var(--mote-i, 0) * 0.7s);9679}9680@keyframes peach-pair-mote-drift {9681  0%   { transform: translateY(0); opacity: 0; }9682  10%  { opacity: 0.6; }9683  90%  { opacity: 0.1; }9684  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9685}96869687/* Status copy ---------------------------------------------------------- */9688.peach-pair-copy-host {9689  margin: 4px 4px 10px;9690  text-align: center;9691  min-height: 50px;9692}9693.peach-pair-copy {9694  animation: peach-pair-copy-in 0.35s ease both;9695}9696@keyframes peach-pair-copy-in {9697  from { opacity: 0; transform: translateY(4px); }9698  to   { opacity: 1; transform: translateY(0); }9699}9700.peach-pair-headline {9701  font-family: var(--font-display, Georgia, serif);9702  font-style: italic;9703  font-size: 20px;9704  font-weight: 500;9705  line-height: 1.2;9706  letter-spacing: 0.005em;9707  color: var(--peach-t0);9708  margin-bottom: 6px;9709}9710.peach-pair-copy-listening .peach-pair-headline,9711.peach-pair-copy-chirping .peach-pair-headline,9712.peach-pair-copy-idle .peach-pair-headline {9713  font-family: inherit;9714  font-style: normal;9715  font-weight: 500;9716  font-size: 15px;9717  color: var(--peach-t0);9718  letter-spacing: 0;9719}9720.peach-pair-copy-paired .peach-pair-headline {9721  color: var(--peach-t0);9722  font-weight: 600;9723}9724.peach-pair-sub {9725  font-size: 12.5px;9726  line-height: 1.45;9727  color: var(--peach-t1);9728  max-width: 280px;9729  margin: 0 auto;9730  text-wrap: pretty;9731}97329733/* Status action -------------------------------------------------------- */9734.peach-pair-action {9735  margin: 2px 4px 10px;9736  margin-top: auto;9737  display: flex;9738  flex-direction: column;9739  gap: 8px;9740}9741.peach-pair-action-waiting {9742  display: flex;9743  align-items: center;9744  justify-content: space-between;9745  gap: 12px;9746}9747.peach-pair-cancel {9748  min-width: 96px;9749}9750.peach-pair-listening {9751  display: inline-flex; align-items: center; gap: 4px;9752  font-family: var(--peach-mono, ui-monospace, monospace);9753  font-size: 9.5px;9754  text-transform: uppercase;9755  letter-spacing: 0.12em;9756  color: var(--peach-t1);9757  padding: 8px 10px;9758}9759.peach-pair-listen-dot {9760  width: 4px; height: 4px;9761  border-radius: 50%;9762  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9763  animation: peach-pair-listen-pulse 1.2s ease-in-out infinite;9764}9765.peach-pair-listen-dot:nth-child(2) { animation-delay: 0.2s; }9766.peach-pair-listen-dot:nth-child(3) { animation-delay: 0.4s; }9767.peach-pair-listen-label { margin-left: 6px; }9768@keyframes peach-pair-listen-pulse {9769  0%, 100% { opacity: 0.25; transform: scale(0.9); }9770  50%      { opacity: 1;     transform: scale(1.15); }9771}97729773.peach-pair-action-handshake {9774  display: flex;9775  flex-direction: column;9776  align-items: center;9777  gap: 8px;9778  padding: 8px 4px;9779}9780.peach-pair-meter {9781  width: 100%;9782  max-width: 280px;9783  height: 2px;9784  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9785  border-radius: 2px;9786  position: relative;9787  overflow: hidden;9788}9789.peach-pair-meter-bar {9790  position: absolute;9791  top: 0; bottom: 0;9792  width: 30%;9793  left: -30%;9794  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9795  animation: peach-pair-meter-sweep 1.4s ease-in-out infinite;9796}9797@keyframes peach-pair-meter-sweep {9798  0%   { left: -30%; }9799  100% { left: 100%; }9800}9801.peach-pair-meter-label {9802  font-family: var(--peach-mono, ui-monospace, monospace);9803  font-size: 9.5px;9804  text-transform: uppercase;9805  letter-spacing: 0.14em;9806  color: var(--peach-t1);9807}98089809.peach-pair-action-paired {9810  display: flex;9811  align-items: center;9812  gap: 10px;9813}9814.peach-pair-device-confirm {9815  flex: 1;9816  display: inline-flex;9817  align-items: center;9818  gap: 8px;9819  padding: 9px 10px 9px 12px;9820  border-radius: 10px;9821  background: color-mix(in srgb, #76b6e8 12%, transparent);9822  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9823  font-size: 12.5px;9824  color: var(--peach-t0);9825  min-width: 0;9826}9827.peach-pair-device-confirm-glyph {9828  display: inline-flex;9829  color: #76b6e8;9830}9831.peach-pair-device-confirm-name {9832  flex: 1;9833  overflow: hidden;9834  text-overflow: ellipsis;9835  white-space: nowrap;9836}9837.peach-pair-device-confirm-trust {9838  font-family: var(--peach-mono, ui-monospace, monospace);9839  font-size: 9.5px;9840  text-transform: uppercase;9841  letter-spacing: 0.1em;9842  color: #76b6e8;9843  padding: 2px 6px;9844  border-radius: 4px;9845  background: color-mix(in srgb, #76b6e8 14%, transparent);9846}9847.peach-pair-done {9848  min-width: 80px;9849}9850.peach-pair-retry {9851  align-self: center;9852  display: block;9853  margin: 6px auto 0;9854  min-width: 120px;9855}9856.peach-pair-mic-help {9857  font-size: 12px;9858  color: var(--peach-t1);9859  text-align: center;9860  max-width: 320px;9861  margin: 0 auto;9862}98639864/* Rest state — bird stage at idle pose, primary CTA + paired list */9865.peach-pair-pair[data-phase="idle"] .peach-pair-stage {9866  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9867  height: 160px;9868}9869.peach-pair-pair-start {9870  width: 100%;9871  display: inline-flex;9872  align-items: center;9873  justify-content: center;9874  gap: 8px;9875  padding: 11px 14px;9876  border-radius: 10px;9877  background: var(--peach-accent);9878  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9879  color: #1a0905;9880  font-family: inherit;9881  font-size: 13px;9882  font-weight: 600;9883  letter-spacing: 0.01em;9884  cursor: pointer;9885  transition: filter 0.15s ease, transform 0.1s ease;9886}9887.peach-pair-pair-start:hover { filter: brightness(1.08); }9888.peach-pair-pair-start:active { transform: translateY(1px); }98899890.peach-pair-paired-section {9891  margin-top: 14px;9892  display: flex;9893  flex-direction: column;9894  gap: 8px;9895}9896.peach-pair-paired-heading {9897  margin: 0;9898  font-family: var(--peach-mono, ui-monospace, monospace);9899  font-size: 10px;9900  font-weight: 500;9901  letter-spacing: 0.14em;9902  text-transform: uppercase;9903  color: var(--peach-t1);9904}99059906/* Footer --------------------------------------------------------------- */9907.peach-pair-foot {9908  margin: 10px -4px -2px;9909  margin-top: auto;9910}9911.peach-pair-foot-divider {9912  height: 1px;9913  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9914  margin-bottom: 10px;9915}9916.peach-pair-foot-text {9917  font-size: 11px;9918  line-height: 1.5;9919  color: var(--peach-t1);9920  text-align: center;9921  padding: 0 4px;9922  text-wrap: pretty;9923}99249925/* Screen-reader-only live region. Kept off the visual flow but read by9926   assistive tech as the pairing phase advances. */9927.peach-sr-only {9928  position: absolute;9929  width: 1px; height: 1px;9930  padding: 0; margin: -1px;9931  overflow: hidden;9932  clip: rect(0, 0, 0, 0);9933  white-space: nowrap;9934  border: 0;9935}99369937/* Reduced motion — stage simplifies to opacity transitions only */9938@media (prefers-reduced-motion: reduce) {9939  .peach-pair-bird-body,9940  .peach-pair-bird-head-group,9941  .peach-pair-bird-beak,9942  .peach-pair-bird-wing,9943  .peach-pair-bird-tuft,9944  .peach-pair-bird-tail,9945  .peach-pair-bird-eye-group,9946  .peach-pair-bird-aura,9947  .peach-pair-arc,9948  .peach-pair-flight-path,9949  .peach-pair-flight-path-2,9950  .peach-pair-dot-glow,9951  .peach-pair-dot-core,9952  .peach-pair-dot-ring,9953  .peach-pair-mote,9954  .peach-pair-meter-bar,9955  .peach-pair-listen-dot,9956  .peach-pair-bird-slot,9957  .peach-pair-bird-slot-mobile {9958    animation: none !important;9959    transition: opacity 0.2s linear !important;9960  }9961}99629963/* ─────────────────────────────────────────────────────────────────9964   Settings → Sync surface. Wraps the same bird9965   animation used by the pairing flow with a paired-devices list and9966   the "Pair a device" CTA.9967   ───────────────────────────────────────────────────────────────── */9968.peach-pair-settings {9969  position: absolute;9970  inset: 0;9971  z-index: 3;9972  display: flex;9973  flex-direction: column;9974  gap: 18px;9975  padding: 14px 12px 12px;9976  width: 100%;9977  box-sizing: border-box;9978  overflow-y: auto;9979  overflow-x: hidden;9980  /* Same warm surface as the pairing screen — unifies the two views. */9981  background:9982    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9983    var(--peach-bg);9984  color: var(--peach-t0);9985  isolation: isolate;9986  /* Hide native scrollbar — content fits 99% of the time and a chunky9987     gutter ruins the surface. */9988  scrollbar-width: none;9989  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9990}9991.peach-pair-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9992.peach-pair-settings::before {9993  content: '';9994  position: absolute;9995  inset: 0;9996  pointer-events: none;9997  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9998  z-index: 0;9999}10000.peach-pair-settings > * { position: relative; z-index: 1; }1000110002.peach-pair-settings--pairing {10003  padding: 0;10004  align-items: stretch;10005  justify-content: stretch;10006  background: none;10007  isolation: auto;10008}10009.peach-pair-settings--pairing::before { display: none; }1001010011.peach-pair-settings-header {10012  display: flex;10013  align-items: center;10014  gap: 10px;10015}10016.peach-pair-settings-title {10017  margin: 0;10018  font-family: var(--font-display, Georgia, serif);10019  font-style: italic;10020  font-size: 24px;10021  font-weight: 500;10022  line-height: 1;10023  color: var(--peach-t0);10024  letter-spacing: 0.005em;10025}10026.peach-pair-settings-section {10027  margin: 6px 0 -4px;10028  font-size: 11px;10029  font-weight: 600;10030  letter-spacing: 0.08em;10031  text-transform: uppercase;10032  color: var(--peach-text-muted);10033}10034.peach-pair-settings-error {10035  font-size: 12px;10036  padding: 8px 10px;10037  border-radius: 8px;10038  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);10039  color: var(--peach-text);10040}10041.peach-pair-settings-footer {10042  margin-top: auto;10043  padding-top: 18px;10044  font-size: 11.5px;10045  line-height: 1.5;10046  color: var(--peach-text-muted);10047  text-align: center;10048}1004910050/* Hero card shown when no devices are paired yet. */10051.peach-pair-hero {10052  display: flex;10053  flex-direction: column;10054  align-items: center;10055  gap: 12px;10056  padding: 20px 12px 8px;10057  text-align: center;10058}10059.peach-pair-hero-svg {10060  display: block;10061  max-width: 100%;10062  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));10063}10064.peach-pair-hero-headline {10065  margin: 0;10066  font-family: var(--font-display, Georgia, serif);10067  font-style: italic;10068  font-size: 20px;10069  font-weight: 500;10070  line-height: 1.2;10071  letter-spacing: 0.005em;10072  color: var(--peach-t0);10073}10074.peach-pair-hero-sub {10075  margin: 0;10076  font-size: 13px;10077  line-height: 1.5;10078  color: var(--peach-t1);10079  max-width: 320px;10080  text-wrap: pretty;10081}1008210083.peach-pair-pair-cta {10084  display: flex;10085  justify-content: center;10086  padding: 4px 0 6px;10087}10088.peach-pair-pair-button {10089  display: inline-flex;10090  align-items: center;10091  gap: 8px;10092  min-width: 220px;10093  justify-content: center;10094}10095.peach-pair-pair-button-icon {10096  flex: 0 0 auto;10097}1009810099/* Paired devices list. Roomy rows that look at home next to the rest10100   of Settings; stale rows get a soft warm-warning border tint. */10101.peach-pair-device-list {10102  list-style: none;10103  margin: 0;10104  padding: 0;10105  display: flex;10106  flex-direction: column;10107  gap: 8px;10108}10109.peach-pair-device-row {10110  display: flex;10111  align-items: center;10112  gap: 12px;10113  padding: 12px;10114  border-radius: 10px;10115  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10116  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);10117}10118.peach-pair-device-row[data-stale="true"] {10119  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);10120}10121.peach-pair-device-icon {10122  width: 32px;10123  height: 32px;10124  display: flex;10125  align-items: center;10126  justify-content: center;10127  border-radius: 8px;10128  color: var(--peach-text);10129  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);10130}10131.peach-pair-device-info {10132  flex: 1;10133  display: flex;10134  flex-direction: column;10135  gap: 2px;10136  min-width: 0;10137}10138.peach-pair-device-name {10139  font-size: 14px;10140  font-weight: 600;10141  color: var(--peach-text);10142  overflow: hidden;10143  text-overflow: ellipsis;10144  white-space: nowrap;10145}10146.peach-pair-device-meta {10147  font-size: 11.5px;10148  color: var(--peach-text-muted);10149  display: flex;10150  flex-wrap: wrap;10151  align-items: center;10152  gap: 8px;10153}10154.peach-pair-device-badge {10155  font-size: 10.5px;10156  font-weight: 500;10157  letter-spacing: 0.02em;10158  padding: 2px 6px;10159  border-radius: 999px;10160  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);10161  color: var(--peach-text);10162}10163.peach-pair-device-stale {10164  font-size: 10.5px;10165  font-weight: 500;10166  color: var(--peach-warn, #d29257);10167}10168.peach-pair-device-remove {10169  flex: 0 0 auto;10170  color: var(--peach-text-muted);10171}10172.peach-pair-device-remove:hover {10173  color: var(--peach-danger, #c25b4a);10174}10175.peach-pair-unpair-confirm {10176  display: flex;10177  gap: 6px;10178  align-items: center;10179}1018010181/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */10182.peach-pair-pro-card {10183  position: relative;10184  margin: 18px 12px;10185  padding: 18px 20px 22px;10186  border-radius: 22px;10187  background:10188    radial-gradient(140% 90% at 50% 0%,10189      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,10190      transparent 60%),10191    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10192  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);10193  box-shadow:10194    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,10195    0 18px 40px -24px rgba(0, 0, 0, 0.45);10196  display: flex;10197  flex-direction: column;10198  align-items: center;10199  gap: 10px;10200  text-align: center;10201  overflow: hidden;10202}10203.peach-pair-pro-stage {10204  position: relative;10205  width: 220px;10206  height: 140px;10207  display: flex;10208  align-items: flex-end;10209  justify-content: center;10210  margin-bottom: 2px;10211}10212.peach-pair-pro-bird-slot {10213  width: 140px;10214  height: 132px;10215  display: flex;10216  align-items: flex-end;10217  justify-content: center;10218  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));10219}10220.peach-pair-pro-bird-slot .peach-pair-bird {10221  width: 100%;10222  height: 100%;10223}10224.peach-pair-pro-bird-slot .peach-pair-bird svg {10225  width: 100%;10226  height: 100%;10227  overflow: visible;10228}10229.peach-pair-pro-headline {10230  margin: 4px 0 0;10231  font-family: var(--font-display, "Cormorant Garamond", serif);10232  font-style: italic;10233  font-size: 19px;10234  font-weight: 500;10235  letter-spacing: 0.01em;10236  color: var(--peach-t0);10237  max-width: 280px;10238  line-height: 1.25;10239}10240.peach-pair-pro-body {10241  margin: 0;10242  font-size: 13px;10243  line-height: 1.55;10244  color: var(--peach-t1);10245  max-width: 300px;10246}10247.peach-pair-pro-cta {10248  margin-top: 4px;10249}10250.peach-pair-pro-foot {10251  margin: 2px 0 0;10252  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10253  font-size: 0.625rem;10254  letter-spacing: 0.08em;10255  text-transform: uppercase;10256  color: var(--peach-t2);10257  opacity: 0.75;10258}1025910260/* Shell border and shadow in light mode: match dark mode's near-invisible10261   border weight so the popup frame looks the same in both themes. */10262.light .peach-shell,10263.light .peach-screen {10264  border-color: rgba(26, 18, 8, 0.07);10265  box-shadow:10266    0 2px 8px rgba(80, 56, 32, 0.08),10267    0 14px 48px rgba(80, 56, 32, 0.10),10268    0 0 0 1px rgba(26, 18, 8, 0.04);10269}1027010271/* HOLE 4: the revoke confirmation carries its own disclosure, so it needs the10272   full row width rather than sitting inline beside the device name. */10273.peach-settings-row:has(> .peach-unpair-confirm) { flex-wrap: wrap; }10274.peach-unpair-confirm {10275  display: flex;10276  flex-direction: column;10277  gap: 8px;10278  width: 100%;10279}10280.peach-unpair-confirm-note {10281  margin: 0;10282  font-size: 0.6875rem;10283  line-height: 1.5;10284  color: var(--peach-t2);10285}1028610287/* Sync mode selector — three named choices (public / private / off). Replaces10288   the old binary "local network only" toggle; see docs/sync-lan-retirement.md. */10289.peach-sync-mode {10290  display: flex;10291  align-items: flex-start;10292  gap: 10px;10293  width: 100%;10294  text-align: left;10295  padding: 10px 12px;10296  margin-top: 8px;10297  border-radius: 10px;10298  border: 1px solid var(--peach-border);10299  background: color-mix(in srgb, var(--peach-t0) 3%, transparent);10300  color: var(--peach-t1);10301  cursor: pointer;10302  transition: border-color var(--peach-dur-80) var(--peach-curve-arrival),10303              background-color var(--peach-dur-80) var(--peach-curve-arrival);10304}10305.peach-sync-mode:hover:not(:disabled) {10306  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);10307}10308.peach-sync-mode.is-active {10309  border-color: var(--peach-accent);10310  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);10311}10312.peach-sync-mode:disabled { opacity: 0.6; cursor: default; }10313.peach-sync-mode-main { display: flex; flex-direction: column; gap: 3px; flex: 1; }10314.peach-sync-mode-title { font-size: 12px; }10315.peach-sync-mode-sub {10316  font-size: 11px;10317  line-height: 1.5;10318  color: var(--peach-t2);10319}10320.peach-sync-mode-pip {10321  flex: none;10322  margin-top: 3px;10323  width: 12px; height: 12px;10324  border-radius: 50%;10325  border: 1px solid var(--peach-t3);10326}10327.peach-sync-mode.is-active .peach-sync-mode-pip {10328  border-color: var(--peach-accent);10329  background:10330    radial-gradient(circle at 50% 50%, var(--peach-accent) 0 42%, transparent 44%);10331}10332.peach-sync-mode-disclosure {10333  margin: 10px 2px 0;10334  font-size: 11px;10335  line-height: 1.5;10336  color: var(--peach-t2);10337}10338.peach-sync-mode-warn { color: var(--peach-breach); }1033910340/* Compact form, used mid-pairing: a quiet line, not a decision to make. */10341.peach-sync-mode-summary {10342  margin: 8px 2px 0;10343  font-size: 11px;10344  color: var(--peach-t2);10345  text-align: center;10346}10347.peach-sync-mode-change {10348  background: none;10349  border: none;10350  padding: 0;10351  font: inherit;10352  color: var(--peach-accent);10353  text-decoration: underline;10354  cursor: pointer;10355}