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.peach-sync-disclosure-toggle {2151  min-height: 48px;2152  padding: 10px 0;2153  text-align: left;2154}21552156.peach-sync-disclosure-toggle > span:first-child {2157  display: flex;2158  flex-direction: column;2159  gap: 3px;2160}21612162.peach-sync-disclosure-summary {2163  color: var(--peach-t2);2164  font-size: 0.6875rem;2165  line-height: 1.35;2166}21672168.peach-sync-disclosure-content {2169  padding-bottom: 4px;2170}21712172/* ── Feedback form ──────────────────────────────────────────────────────── */2173.peach-feedback-group {2174  flex: 1;2175  display: flex;2176  flex-direction: column;2177  border-bottom: none;2178}21792180.peach-feedback-intro {2181  margin: 4px 0 14px;2182  font-size: 0.75rem;2183  line-height: 1.55;2184  color: var(--peach-t1);2185}21862187.peach-feedback-chips {2188  display: flex;2189  flex-wrap: wrap;2190  gap: 6px;2191  margin-bottom: 14px;2192}21932194.peach-feedback-chip {2195  padding: 4px 10px;2196  border-radius: 999px;2197  border: 1px solid var(--peach-t3);2198  background: none;2199  color: var(--peach-t2);2200  font-size: 0.6875rem;2201  font-family: var(--font-ui);2202  cursor: pointer;2203  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2204    background var(--peach-dur-80) ease;2205}2206.peach-feedback-chip:hover {2207  border-color: var(--peach-t2);2208  color: var(--peach-t1);2209}2210.peach-feedback-chip.is-active {2211  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);2212  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));2213  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);2214  box-shadow:2215    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),2216    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);2217  font-weight: 700;2218}22192220.peach-feedback-textarea {2221  flex: 1;2222  width: 100%;2223  min-height: 120px;2224  box-sizing: border-box;2225  background: rgba(0, 0, 0, 0.22);2226  border: 1px solid transparent;2227  border-radius: 6px;2228  color: var(--peach-t0);2229  font-size: 0.75rem;2230  font-family: var(--font-ui);2231  line-height: 1.5;2232  padding: 8px 10px;2233  resize: none;2234  outline: none;2235  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2236}2237.peach-feedback-textarea:focus {2238  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2239  background: rgba(0, 0, 0, 0.28);2240}2241.peach-feedback-textarea:focus {2242  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2243}2244.peach-feedback-textarea::placeholder {2245  color: var(--peach-t2);2246}22472248.peach-feedback-meta {2249  margin: 6px 0 0;2250  font-size: 0.625rem;2251  color: var(--peach-t2);2252  font-family: "IBM Plex Mono", monospace;2253}22542255.peach-feedback-result {2256  margin: 8px 0 0;2257  font-size: 0.6875rem;2258  font-family: "IBM Plex Mono", monospace;2259}2260.peach-feedback-result--ok { color: var(--peach-sync-ok); }2261.peach-feedback-result--err { color: var(--peach-breach); }22622263.peach-feedback-submit {2264  width: 100%;2265  margin-top: 12px;2266  justify-content: center;2267}22682269.peach-feedback-anon {2270  margin: 8px 0 0;2271  font-size: 0.625rem;2272  color: var(--peach-t2);2273  text-align: center;2274}22752276.peach-feedback-thanks {2277  margin: auto 0;2278  padding: 18px 14px;2279  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);2280  border-radius: 8px;2281  background:2282    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),2283    rgba(0, 0, 0, 0.18);2284  color: var(--peach-t1);2285  text-align: center;2286}22872288.peach-feedback-thanks p {2289  margin: 0;2290  font-size: 0.75rem;2291  line-height: 1.5;2292}22932294.peach-feedback-thanks-title {2295  color: var(--peach-t0);2296  font-family: "Cormorant Garamond", serif;2297  font-size: 1.375rem !important;2298  line-height: 1.1 !important;2299  margin-bottom: 8px !important;2300}23012302.peach-passkey-badge {2303  margin-left: 8px;2304  font-size: 0.625rem;2305  letter-spacing: 0.06em;2306  text-transform: uppercase;2307  color: var(--peach-t2);2308  font-family: var(--font-ui);2309  vertical-align: middle;2310}23112312.peach-passkey-delete-btn {2313  color: var(--peach-breach);2314  border-color: rgba(229, 85, 85, 0.25);2315}23162317.peach-passkey-delete-confirm {2318  display: flex;2319  align-items: center;2320  gap: 8px;2321  padding: 8px 10px;2322  background: rgba(229, 85, 85, 0.06);2323  border: 1px solid rgba(229, 85, 85, 0.2);2324  border-radius: 6px;2325}23262327.peach-passkey-delete-confirm-copy {2328  flex: 1;2329  font-size: 0.6875rem;2330  color: var(--peach-t1);2331}23322333.peach-passkey-delete-btn--confirm {2334  color: var(--peach-breach);2335  border-color: rgba(229, 85, 85, 0.4);2336}23372338.peach-passkey-activity {2339  flex-direction: column;2340  align-items: flex-start;2341  gap: 4px;2342}23432344.peach-passkey-meta {2345  font-size: 0.6875rem;2346  color: var(--peach-t2);2347}23482349.peach-passkey-actions {2350  position: relative;2351  z-index: 1;2352  margin-top: 14px;2353  display: flex;2354  flex-direction: column;2355  gap: 8px;2356}23572358.peach-passkey-approval {2359  display: flex;2360  flex-direction: column;2361  align-items: center;2362  padding: 16px 20px 14px;2363  gap: 8px;2364  text-align: center;2365}23662367.peach-passkey-approval-icon {2368  width: 36px;2369  height: 36px;2370  border-radius: 10px;2371  background: var(--peach-s2);2372  border: 1px solid var(--peach-t3);2373  display: flex;2374  align-items: center;2375  justify-content: center;2376  flex-shrink: 0;2377  color: var(--peach-accent);2378}23792380.peach-passkey-approval-icon img,2381.peach-passkey-approval-icon svg {2382  width: 22px;2383  height: 22px;2384  border-radius: 5px;2385}23862387.peach-passkey-approval-rp {2388  font-family: var(--font-ui);2389  font-size: 0.75rem;2390  color: var(--peach-t2);2391  letter-spacing: 0.03em;2392}23932394.peach-passkey-approval-action {2395  font-family: var(--font-display);2396  font-style: italic;2397  font-weight: 300;2398  font-size: 18px;2399  color: var(--peach-t0);2400  line-height: 1.1;2401  margin: 1px 0;2402}24032404.peach-passkey-approval-user {2405  font-family: var(--font-mono);2406  font-size: 0.6875rem;2407  color: var(--peach-t1);2408  background: var(--peach-s2);2409  border: 1px solid var(--peach-t3);2410  border-radius: 4px;2411  padding: 3px 8px;2412}24132414.peach-passkey-approval-notice {2415  font-size: 0.625rem;2416  color: var(--peach-t2);2417  line-height: 1.5;2418  max-width: 220px;2419}24202421.peach-passkey-approval-actions {2422  display: flex;2423  gap: 8px;2424  width: 100%;2425  margin-top: 6px;2426}24272428.peach-passkey-approval-actions .peach-btn {2429  flex: 1;2430}24312432/* ── Inline generator drawer ── */2433.peach-generator-drawer {2434  display: grid;2435  grid-template-rows: 0fr;2436  transition: grid-template-rows 320ms var(--peach-curve-arrival);2437  overflow: hidden;2438}2439.peach-generator-drawer.is-open {2440  grid-template-rows: 1fr;2441}2442.peach-generator-drawer-inner {2443  min-height: 0;2444  overflow: hidden;2445}2446.peach-generator-drawer-content {2447  border-top: 1px solid var(--peach-t3);2448  padding: 8px 0 4px;2449  display: flex;2450  flex-direction: column;2451  gap: 8px;2452}24532454/* ── Compact generator (inside entry edit) ── */2455.peach-generator-drawer-content--compact {2456  border-top: 1px solid var(--peach-t3);2457  padding: 8px 0 2px;2458  gap: 7px;2459}2460.peach-pwgen-compact-display-row {2461  display: flex;2462  align-items: center;2463  gap: 6px;2464}2465.peach-pwgen-compact-output {2466  flex: 1;2467  min-width: 0;2468  font-family: "IBM Plex Mono", monospace;2469  font-size: 0.6875rem;2470  font-weight: 400;2471  letter-spacing: 0.04em;2472  color: var(--peach-t0);2473  background: rgba(240, 232, 216, 0.04);2474  border: 1px solid var(--peach-t3);2475  border-radius: 5px;2476  padding: 5px 8px;2477  line-height: 1.5;2478  outline: none;2479  transition: border-color 120ms ease;2480}24812482.peach-pwgen-compact-output:focus {2483  border-color: var(--peach-t1);2484}2485.peach-pwgen-compact-controls {2486  display: flex;2487  align-items: center;2488  gap: 6px;2489}2490.peach-pwgen-compact-slider {2491  flex: 1;2492  min-width: 0;2493  height: 2px !important;2494}2495.peach-pwgen-compact-controls .peach-pwgen-len-num {2496  flex-shrink: 0;2497  min-width: 18px;2498  text-align: right;2499}2500.peach-pwgen-compact-pills {2501  display: flex;2502  gap: 3px;2503  flex-shrink: 0;2504}2505.peach-pwgen-compact-pills .peach-pwgen-pill {2506  padding: 2px 7px;2507  font-size: 0.5rem;2508}2509.peach-pwgen-compact-use {2510  flex-shrink: 0;2511  font-size: 0.625rem !important;2512  padding: 3px 9px !important;2513  min-height: 22px !important;2514  border-radius: 5px !important;2515}25162517/* ── Password edit row (input + eye toggle side-by-side) ── */2518.peach-password-edit-row {2519  display: flex;2520  align-items: center;2521  gap: 6px;2522}2523.peach-password-edit-row .peach-inline-input {2524  flex: 1;2525  min-width: 0;2526}25272528/* ── Generate toggle link ── */2529.peach-generate-toggle-link {2530  display: inline-flex;2531  align-items: center;2532  gap: 5px;2533  background: none;2534  border: none;2535  padding: 0;2536  cursor: pointer;2537  font-family: "IBM Plex Mono", monospace;2538  font-size: 0.625rem;2539  color: var(--peach-t2);2540  letter-spacing: 0.04em;2541  transition: color 120ms ease;2542  align-self: flex-start;2543}2544.peach-generate-toggle-link:hover {2545  color: var(--peach-accent);2546}25472548/* Holds the generate + history toggle links on one row under the editor. */2549.peach-password-edit-links {2550  display: flex;2551  align-items: center;2552  gap: 14px;2553  flex-wrap: wrap;2554}25552556/* ── Past-password history list ── */2557.peach-password-history {2558  display: grid;2559  gap: 4px;2560  margin-top: 2px;2561  max-height: 168px;2562  overflow-y: auto;2563  scrollbar-width: thin;2564}2565.peach-history-row {2566  display: flex;2567  align-items: center;2568  justify-content: space-between;2569  gap: 8px;2570  padding: 5px 7px;2571  border-radius: 7px;2572  background: color-mix(in srgb, var(--peach-accent) 5%, transparent);2573  border: 1px solid color-mix(in srgb, var(--peach-accent) 9%, transparent);2574}2575.peach-history-main {2576  display: flex;2577  flex-direction: column;2578  gap: 1px;2579  min-width: 0;2580  flex: 1;2581}2582.peach-history-pw {2583  font-family: "IBM Plex Mono", monospace;2584  font-size: 0.6875rem;2585  color: var(--peach-t1);2586  white-space: nowrap;2587  overflow: hidden;2588  text-overflow: ellipsis;2589}2590.peach-history-pw .peach-password-mask {2591  letter-spacing: 0.08em;2592  color: var(--peach-t2);2593}2594.peach-history-age {2595  font-family: "IBM Plex Mono", monospace;2596  font-size: 0.5625rem;2597  color: var(--peach-t3, var(--peach-t2));2598  letter-spacing: 0.03em;2599}2600.peach-history-actions {2601  display: flex;2602  align-items: center;2603  gap: 2px;2604  flex-shrink: 0;2605}2606.peach-history-use {2607  font-family: "IBM Plex Mono", monospace;2608  font-size: 0.5625rem;2609  letter-spacing: 0.05em;2610  padding: 3px 7px;2611}2612.peach-history-empty {2613  font-family: "IBM Plex Mono", monospace;2614  font-size: 0.625rem;2615  line-height: 1.45;2616  color: var(--peach-t2);2617  padding: 6px 8px;2618  border-radius: 7px;2619  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);2620  border: 1px solid color-mix(in srgb, var(--peach-accent) 8%, transparent);2621}26222623/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2624.peach-entry-body {2625  flex: 1;2626  overflow-y: auto;2627  overflow-x: hidden;2628  scrollbar-width: none;2629  -ms-overflow-style: none;2630  overscroll-behavior: contain;2631  display: grid;2632  gap: 10px;2633  align-content: start;2634  padding: 10px 20px 14px;2635  min-width: 0;2636  min-height: 0;2637}2638.peach-entry-body::-webkit-scrollbar { display: none; }26392640/* Type-toggle pills + inline note toolbar */2641.peach-new-type-row {2642  display: flex;2643  align-items: center;2644  gap: 6px;2645  margin-bottom: 2px;2646}2647.peach-new-type-btn {2648  background: transparent;2649  border: 1px solid var(--peach-t3);2650  border-radius: 12px;2651  padding: 3px 10px;2652  font-family: "IBM Plex Mono", monospace;2653  font-size: 0.5625rem;2654  letter-spacing: 0.12em;2655  text-transform: uppercase;2656  color: var(--peach-t2);2657  cursor: pointer;2658  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2659}2660.peach-new-type-btn.is-active {2661  color: var(--peach-t0);2662  border-color: var(--peach-accent);2663  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2664}2665.peach-new-type-btn:not(.is-active):hover {2666  color: var(--peach-t1);2667  border-color: var(--peach-t2);2668}26692670/* Editable title */2671.peach-new-title-wrap { margin: 0 0 2px; }2672.peach-new-title-input {2673  background: transparent;2674  border: none;2675  outline: none;2676  width: 100%;2677  color: var(--peach-t0);2678  font-family: var(--font-display);2679  font-style: italic;2680  font-weight: 400;2681  font-size: 40px;2682  line-height: 0.95;2683  caret-color: var(--peach-accent);2684}2685.peach-new-title-input::placeholder { color: var(--peach-t2); }26862687/* Editable domain field */2688.peach-domain-edit-row {2689  display: flex;2690  align-items: center;2691  gap: 6px;2692}26932694.peach-domain-edit-row .peach-domain-value--edit {2695  flex: 1;2696  width: 0;2697}26982699.peach-domain-url-btn {2700  flex-shrink: 0;2701  background: transparent;2702  border: none;2703  cursor: pointer;2704  color: var(--peach-t3);2705  padding: 2px 3px;2706  display: flex;2707  align-items: center;2708  line-height: 0;2709  border-radius: 3px;2710  transition: color 120ms ease;2711}27122713.peach-domain-url-btn:hover {2714  color: var(--peach-accent);2715}27162717.peach-domain-value--edit {2718  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2719  font-size: 0.625rem;2720  font-style: italic;2721  letter-spacing: 0.12em;2722  color: var(--peach-t1);2723  background: transparent;2724  border: none;2725  border-bottom: 1px solid var(--peach-t3);2726  outline: none;2727  width: 100%;2728  padding: 2px 0;2729  caret-color: var(--peach-accent);2730  transition: border-color 140ms ease, color 140ms ease;2731}2732.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2733.peach-domain-value--edit:focus {2734  border-bottom-color: rgba(240, 232, 216, 0.28);2735  color: var(--peach-t0);2736}27372738/* Editable field values (username, password, totp) */2739.peach-field-value--edit {2740  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2741  font-size: 0.8125rem;2742  color: var(--peach-t0);2743  background: transparent;2744  border: none;2745  border-bottom: 1px solid var(--peach-t3);2746  outline: none;2747  flex: 1;2748  min-width: 0;2749  padding: 3px 0;2750  caret-color: var(--peach-accent);2751  transition: border-color 140ms ease, color 140ms ease;2752}2753.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2754.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2755.peach-field-value--edit:focus {2756  border-bottom-color: rgba(240, 232, 216, 0.28);2757  color: var(--peach-t0);2758}27592760/* "+ add optional field" links */2761.peach-entry-add-links {2762  display: flex;2763  gap: 12px;2764  flex-wrap: wrap;2765  margin-top: -2px;2766}2767.peach-add-field-link {2768  background: transparent;2769  border: none;2770  padding: 0;2771  cursor: pointer;2772  font-family: "IBM Plex Mono", monospace;2773  font-size: 0.5625rem;2774  letter-spacing: 0.1em;2775  text-transform: uppercase;2776  color: var(--peach-t2);2777  transition: color 140ms ease;2778}2779.peach-add-field-link:hover { color: var(--peach-accent); }27802781/* ── New entry form (legacy classes) ────────────────────────────────── */2782.peach-new-body {2783  flex: 1;2784  overflow-y: auto;2785  padding: 10px 20px 14px;2786}2787.peach-new-name-input {2788  background: transparent;2789  border: none;2790  outline: none;2791  width: 100%;2792  color: var(--peach-t0);2793  font-family: var(--font-display);2794  font-style: italic;2795  font-weight: 400;2796  font-size: 40px;2797  line-height: 0.95;2798  caret-color: var(--peach-accent);2799}2800.peach-new-name-input::placeholder { color: var(--peach-t2); }2801.peach-new-field-input {2802  background: transparent;2803  border: none;2804  outline: none;2805  flex: 1;2806  min-width: 0;2807  caret-color: var(--peach-accent);2808}2809.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }28102811/* ── Canary card ── */2812.peach-canary-card {2813  border: 1px solid rgba(217, 160, 48, 0.2);2814  background: rgba(217, 160, 48, 0.03);2815  border-radius: 8px;2816  padding: 12px;2817}28182819.peach-canary-settings-header {2820  display: flex;2821  align-items: center;2822  justify-content: space-between;2823  cursor: pointer;2824  user-select: none;2825}28262827.peach-canary-card .peach-label {2828  color: rgba(217, 160, 48, 0.85);2829}28302831.peach-canary-card .peach-new-field-input {2832  border-color: rgba(217, 160, 48, 0.25);2833}28342835.peach-canary-card .peach-new-field-input:focus {2836  border-color: rgba(217, 160, 48, 0.5);2837}28382839.peach-canary-body {2840  margin-top: 12px;2841  display: flex;2842  flex-direction: column;2843  gap: 10px;2844}28452846.peach-canary-explainer {2847  display: flex;2848  gap: 10px;2849  padding: 10px 12px;2850  border-radius: 10px;2851  background: rgba(217, 160, 48, 0.06);2852  border: 1px solid rgba(217, 160, 48, 0.22);2853  margin-bottom: 4px;2854}28552856.peach-canary-explainer-icon {2857  font-size: 1rem;2858  flex-shrink: 0;2859  line-height: 1.2;2860}28612862.peach-canary-explainer-title {2863  font-family: var(--font-ui);2864  font-size: 0.6875rem;2865  font-weight: 500;2866  color: rgba(217, 160, 48, 0.9);2867  margin: 0 0 3px;2868}28692870.peach-canary-explainer-copy {2871  font-family: var(--font-ui);2872  font-size: 0.625rem;2873  color: var(--peach-t2);2874  line-height: 1.55;2875  margin: 0;2876}28772878.peach-canary-hint {2879  font-size: 0.625rem;2880  color: var(--peach-t2);2881  font-family: Inter, system-ui, sans-serif;2882  line-height: 1.5;2883  margin-top: 4px;2884}28852886.peach-canary-actions-row {2887  display: flex;2888  align-items: center;2889  gap: 8px;2890}28912892.peach-canary-test-btn {2893  border-color: rgba(217, 160, 48, 0.3);2894  color: rgba(217, 160, 48, 0.85);2895}28962897.peach-canary-test-result {2898  font-size: 0.625rem;2899  font-family: Inter, system-ui, sans-serif;2900}29012902.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2903.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }29042905.peach-canary-badge {2906  display: flex;2907  position: relative;2908  z-index: 1;2909  align-items: center;2910  gap: 5px;2911  padding: 4px 10px;2912  background: rgba(217, 160, 48, 0.12);2913  border: 1px solid rgba(217, 160, 48, 0.35);2914  border-radius: 6px;2915  margin-bottom: 6px;2916  width: fit-content;2917}29182919.peach-canary-badge-label {2920  font-size: 0.625rem;2921  letter-spacing: 0.06em;2922  color: rgba(217, 160, 48, 0.9);2923  font-family: var(--font-ui);2924  text-transform: uppercase;2925}29262927.peach-canary-badge-icon {2928  font-size: 0.6875rem;2929}29302931.peach-canary-suppress-row {2932  display: flex;2933  align-items: center;2934  gap: 8px;2935  padding: 6px 10px;2936  background: rgba(217, 160, 48, 0.08);2937  border-radius: 6px;2938  margin-bottom: 8px;2939}29402941.peach-canary-suppress-label {2942  font-size: 0.6875rem;2943  color: rgba(217, 160, 48, 0.85);2944  cursor: pointer;2945  font-family: var(--font-ui);2946  letter-spacing: 0.04em;2947}29482949.peach-regen-panel {2950  position: relative;2951  z-index: 1;2952  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2953  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2954  border-radius: 8px;2955  padding: 12px;2956  margin-bottom: 8px;2957}29582959.peach-regen-panel-header {2960  display: flex;2961  align-items: center;2962  justify-content: space-between;2963  margin-bottom: 10px;2964}29652966.peach-regen-panel-title {2967  font-size: 0.6875rem;2968  font-weight: 600;2969  letter-spacing: 0.06em;2970  text-transform: uppercase;2971  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2972}29732974.peach-regen-output {2975  background: rgba(0, 0, 0, 0.2);2976  border-radius: 6px;2977  padding: 10px;2978  margin-bottom: 10px;2979  font-family: var(--font-mono);2980  font-size: 0.8125rem;2981  word-break: break-all;2982  color: var(--peach-t1);2983}29842985.peach-regen-actions {2986  display: flex;2987  gap: 6px;2988}29892990.peach-regen-actions--spaced {2991  margin-bottom: 8px;2992}29932994.peach-regen-action-grow {2995  flex: 1;2996}29972998.peach-regen-copy-btn {2999  padding: 0 8px;3000}30013002.peach-regen-success {3003  position: relative;3004  z-index: 1;3005  background: rgba(40, 180, 80, 0.1);3006  border: 1px solid rgba(40, 180, 80, 0.3);3007  border-radius: 8px;3008  padding: 10px 12px;3009  margin-bottom: 8px;3010  display: flex;3011  align-items: center;3012  gap: 8px;3013  font-size: 0.6875rem;3014  color: rgba(40, 180, 80, 0.9);3015}30163017/* ── Note editor overlay ── */3018.peach-note-editor {3019  position: absolute;3020  inset: 0;3021  z-index: 200;3022  display: flex;3023  flex-direction: column;3024  background:3025    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),3026    var(--peach-bg);3027  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;3028}30293030.peach-note-editor-header {3031  display: flex;3032  align-items: center;3033  gap: 10px;3034  padding: 14px 16px 10px;3035  border-bottom: 1px solid var(--peach-t3);3036  flex-shrink: 0;3037}30383039.peach-note-editor-back {3040  background: transparent;3041  border: none;3042  cursor: pointer;3043  color: var(--peach-t2);3044  padding: 4px 6px;3045  border-radius: 6px;3046  display: flex;3047  align-items: center;3048  transition: color 120ms ease, background 120ms ease;3049  flex-shrink: 0;3050}3051.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }30523053.peach-note-editor-label {3054  flex: 1;3055  font-family: var(--font-display);3056  font-style: italic;3057  font-size: 0.9375rem;3058  color: var(--peach-t1);3059  letter-spacing: 0.02em;3060}30613062.peach-note-editor-save-btn {3063  background: transparent;3064  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);3065  border-radius: 8px;3066  color: var(--peach-accent);3067  font-family: "IBM Plex Mono", monospace;3068  font-size: 0.625rem;3069  letter-spacing: 0.06em;3070  text-transform: uppercase;3071  padding: 3px 10px;3072  cursor: pointer;3073  transition: background 120ms ease, border-color 120ms ease;3074}3075.peach-note-editor-save-btn:hover:not(:disabled) {3076  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3077  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3078}3079.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }30803081.peach-note-toolbar {3082  display: flex;3083  align-items: center;3084  gap: 3px;3085  padding: 6px 14px 5px;3086  border-bottom: 1px solid var(--peach-t3);3087  flex-shrink: 0;3088}30893090.peach-note-tool-btn {3091  background: transparent;3092  border: 1px solid transparent;3093  border-radius: 5px;3094  color: var(--peach-t2);3095  font-family: "IBM Plex Mono", monospace;3096  font-size: 0.625rem;3097  letter-spacing: 0.04em;3098  padding: 2px 8px;3099  cursor: pointer;3100  line-height: 1.6;3101  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;3102}3103.peach-note-tool-btn:hover {3104  background: var(--peach-t4);3105  color: var(--peach-t0);3106  border-color: var(--peach-t3);3107}31083109.peach-note-tool-icon {3110  padding: 3px 7px;3111  display: inline-flex;3112  align-items: center;3113  justify-content: center;3114}31153116.peach-note-tool-divider {3117  width: 1px;3118  height: 14px;3119  background: var(--peach-t3);3120  margin: 0 4px;3121  flex-shrink: 0;3122}31233124.peach-note-editor-body {3125  flex: 1;3126  overflow-y: auto;3127  padding: 16px 20px 20px;3128  outline: none;3129  font-family: var(--font-display);3130  font-size: 1rem;3131  line-height: 1.75;3132  color: var(--peach-t0);3133  scrollbar-width: none;3134  word-break: break-word;3135}3136.peach-note-editor-body:empty::before {3137  content: "write your note…";3138  color: var(--peach-t3);3139  font-style: italic;3140  pointer-events: none;3141}31423143/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */3144.peach-note-editor-inline {3145  display: flex;3146  flex-direction: column;3147  flex: 1;3148  min-height: 0;3149}3150.peach-note-editor-body--inline {3151  flex: 1;3152  min-height: 0;3153  font-size: 0.9375rem;3154  padding: 10px 20px 14px;3155}31563157/* Full-width toolbar row inside the body (Add.tsx note type).3158   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */3159.peach-note-toolbar-body {3160  display: flex;3161  align-items: center;3162  gap: 3px;3163  padding: 5px 20px 4px;3164  margin: 2px -20px 0;3165  border-bottom: 1px solid var(--peach-t3);3166  flex-shrink: 0;3167}31683169/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)3170   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn3171   and .peach-note-tool-divider button-level styles. */3172.peach-note-toolbar-inline {3173  display: flex;3174  align-items: center;3175  gap: 3px;3176  margin-left: auto;3177  padding-left: 10px;3178  border-left: 1px solid var(--peach-t3);3179  min-height: 22px;3180}31813182/* Entry.tsx toolbar row (no tabs, toolbar only) */3183.peach-entry-note-toolbar-row {3184  display: flex;3185  align-items: center;3186  margin: 4px 0 6px;3187  position: relative;3188  z-index: 1;3189}3190.peach-entry-note-toolbar-row .peach-note-toolbar-inline {3191  border-left: none;3192  padding-left: 0;3193  margin-left: 0;3194}31953196/* Note body — fills available vertical space in Add.tsx and Entry.tsx */3197.peach-note-body {3198  display: flex;3199  flex-direction: column;3200  flex: 1;3201  min-height: 0;3202  margin: 4px 0 0;3203}3204.peach-entry-body--new .peach-note-body {3205  margin: 8px -20px 0;3206}32073208/* Add.tsx body is a grid by default; swap to a flex column when a note is3209   active so the note body can stretch and pin the tags row to the bottom. */3210.peach-entry-body--new:has(.peach-note-body) {3211  display: flex;3212  flex-direction: column;3213}32143215/* Rich content element styles (editor + display) */3216.peach-note-editor-body h2,3217.peach-note-content h2 {3218  font-family: var(--font-display);3219  font-size: 20px;3220  font-weight: 600;3221  font-style: italic;3222  color: var(--peach-t0);3223  margin: 6px 0 2px;3224  line-height: 1.3;3225}3226.peach-note-editor-body ul,3227.peach-note-content ul {3228  padding-left: 18px;3229  margin: 3px 0;3230  list-style: disc;3231}3232.peach-note-editor-body ol,3233.peach-note-content ol {3234  padding-left: 18px;3235  margin: 3px 0;3236  list-style: decimal;3237}3238.peach-note-editor-body li,3239.peach-note-content li { margin: 2px 0; }3240.peach-note-editor-body hr,3241.peach-note-content hr {3242  border: none;3243  border-top: 1px solid var(--peach-t3);3244  margin: 10px 0;3245}32463247/* font size elements from execCommand */3248.peach-note-editor-body font[size="1"],3249.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }3250.peach-note-editor-body font[size="2"],3251.peach-note-content font[size="2"] { font-size: 0.8125rem; }3252.peach-note-editor-body font[size="3"],3253.peach-note-content font[size="3"] { font-size: 1rem; }3254.peach-note-editor-body font[size="4"],3255.peach-note-content font[size="4"] { font-size: 20px; }3256.peach-note-editor-body font[size="5"],3257.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }32583259/* bold / italic inside the editor and note display */3260.peach-note-editor-body b, .peach-note-editor-body strong,3261.peach-note-content b, .peach-note-content strong { font-weight: 700; }3262.peach-note-editor-body em, .peach-note-editor-body i,3263.peach-note-content em, .peach-note-content i { font-style: italic; }32643265/* note display — rendered HTML, no pre-wrap */3266.peach-note-content {3267  overflow: auto;3268  max-height: 340px;3269  word-break: break-word;3270}32713272/* ── Note textarea ── */3273.peach-note-textarea {3274  width: 100%;3275  min-height: 180px;3276  max-height: 280px;3277  resize: vertical;3278  background: var(--peach-t4);3279  border: 1px solid var(--peach-t3);3280  border-radius: 8px;3281  padding: 10px 12px;3282  font-family: "IBM Plex Mono", monospace;3283  font-size: 0.75rem;3284  line-height: 1.7;3285  color: var(--peach-t1);3286  outline: none;3287  transition: border-color 150ms ease;3288}32893290.peach-note-textarea:focus {3291  border-color: var(--peach-t2);3292}32933294.peach-note-char-count {3295  font-family: "IBM Plex Mono", monospace;3296  font-size: 0.5625rem;3297  color: var(--peach-t3);3298  text-align: right;3299  margin-top: 4px;3300  letter-spacing: 0.1em;3301}33023303/* ── Field input baseline ── */3304.peach-new-field-input {3305  width: 100%;3306  background: transparent;3307  border: none;3308  border-bottom: 1px solid var(--peach-t3);3309  padding: 4px 0;3310  color: var(--peach-t1);3311  font-family: "IBM Plex Mono", monospace;3312  font-size: 0.8125rem;3313  outline: none;3314  transition: border-color 150ms ease;3315}33163317.peach-new-field-input:focus {3318  border-bottom-color: var(--peach-t0);3319  color: var(--peach-t0);3320}33213322.peach-new-name-input {3323  width: 100%;3324  background: transparent;3325  border: none;3326  border-bottom: 1px solid var(--peach-t3);3327  padding: 6px 0;3328  font-family: var(--font-display);3329  font-style: italic;3330  font-size: 28px;3331  color: var(--peach-t0);3332  outline: none;3333  transition: border-color 150ms ease;3334}33353336.peach-new-name-input:focus {3337  border-bottom-color: var(--peach-t1);3338}33393340.peach-new-name-input::placeholder {3341  color: var(--peach-t2);3342  font-style: italic;3343}33443345.peach-new-field-input::placeholder {3346  color: var(--peach-t3);3347}33483349/* ── Demo entrance animation ── */3350#hd-shell {3351  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3352}3353@keyframes hd-shell-enter {3354  from { opacity: 0; transform: scale(0.96) translateY(16px); }3355  to   { opacity: 1; transform: scale(1) translateY(0); }3356}33573358/* ── Keyframes ── */3359@keyframes peach-char-enter {3360  from { opacity: 0; transform: translateY(0.22em); }3361  to   { opacity: 1; transform: translateY(0); }3362}3363@keyframes peach-content-enter {3364  from { opacity: 0.96; transform: translateY(4px); }3365  to   { opacity: 1; transform: translateY(0); }3366}3367@keyframes peach-content-exit {3368  from { opacity: 1; transform: translateY(0); }3369  to   { opacity: 0.92; transform: translateY(-3px); }3370}3371@keyframes peach-screen-enter {3372  from { opacity: 0; transform: translateY(14px); }3373  to   { opacity: 1; transform: translateY(0); }3374}3375@keyframes peach-shell-fade-in {3376  from { opacity: 0; }3377  to   { opacity: 1; }3378}3379@keyframes peach-veil-in {3380  from { opacity: 0; }3381  to   { opacity: 1; }3382}3383@keyframes peach-lock-settle {3384  0%   { transform: scale(0.9); }3385  65%  { transform: scale(1.08); }3386  100% { transform: scale(1); }3387}3388@keyframes peach-copy-confirm {3389  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3390  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); }3391}3392@keyframes peach-copy-retreat {3393  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); }3394  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3395}3396@keyframes peach-copy-flood {3397  from { opacity: 0; transform: scaleX(0.15); }3398  to   { opacity: 1; transform: scaleX(1); }3399}3400@keyframes peach-copy-icon-settle {3401  from  { transform: scale(0.84); }3402  70%   { transform: scale(1.08); }3403  to    { transform: scale(1); }3404}3405@keyframes peach-copy-sheen-retreat {3406  from { opacity: 1; transform: scaleX(1); }3407  to   { opacity: 0; transform: scaleX(0.15); }3408}3409@keyframes peach-copy-drain {3410  from { width: 100%; }3411  to   { width: 0; }3412}3413@keyframes peach-shake {3414  0%, 100% { transform: translateX(0); }3415  20%      { transform: translateX(-6px); }3416  40%      { transform: translateX(6px); }3417  60%      { transform: translateX(-4px); }3418  80%      { transform: translateX(4px); }3419}34203421@keyframes pip-pulse {3422  0% { transform: scale(1); }3423  40% { transform: scale(2.2); }3424  100% { transform: scale(1); }3425}342634273428/* ── Password generator ── */3429.peach-pwgen-body {3430  flex: 1; overflow-y: auto;3431  display: flex; flex-direction: column;3432}3433.peach-policy-badge {3434  display: flex; align-items: center;3435  padding: 6px 20px 0;3436  font-size: 0.625rem; font-family: Inter, sans-serif;3437  color: var(--peach-t2); letter-spacing: 0.04em;3438}3439.peach-pwgen-display {3440  padding: 14px 20px 12px;3441  border-bottom: 1px solid var(--peach-t3);3442  display: flex; align-items: flex-start; gap: 10px;3443}3444.peach-pwgen-display-row {3445  display: flex;3446  align-items: flex-start;3447  gap: 8px;3448  padding-bottom: 8px;3449  border-bottom: 1px solid var(--peach-t3);3450}3451.peach-pwgen-output {3452  flex: 1; min-width: 0; margin: 0;3453  font-family: "IBM Plex Mono", monospace;3454  font-size: 0.8125rem; color: var(--peach-t0);3455  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3456  white-space: normal;3457  padding: 10px 12px;3458  background: var(--peach-t4);3459  border-radius: 6px;3460  min-height: 36px;3461}3462.peach-pwgen-output-display {3463  flex: 1;3464  min-width: 0;3465  margin: 0;3466  font-family: var(--font-display);3467  font-style: italic;3468  font-weight: 300;3469  font-size: 32px;3470  line-height: 1.05;3471  color: var(--peach-t0);3472  word-break: break-all;3473  overflow-wrap: break-word;3474  white-space: normal;3475  letter-spacing: 0.02em;3476}3477.peach-pwgen-display-actions {3478  display: flex;3479  flex-direction: column;3480  gap: 4px;3481  flex-shrink: 0;3482  margin-top: 2px;3483}3484.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3485.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3486.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3487.peach-pwgen-len-num {3488  font-family: "IBM Plex Mono", monospace;3489  font-size: 0.75rem; color: var(--peach-accent);3490}3491.peach-pwgen-len-num--edit {3492  cursor: text;3493  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3494}3495.peach-pwgen-len-input {3496  font-family: "IBM Plex Mono", monospace;3497  font-size: 0.75rem;3498  color: var(--peach-accent);3499  background: transparent;3500  border: none;3501  border-bottom: 1px solid var(--peach-accent);3502  outline: none;3503  width: 32px;3504  text-align: right;3505  padding: 0;3506}3507.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3508.peach-pwgen-toggles { display: flex; flex-direction: column; }3509.peach-pwgen-charset-pills {3510  display: flex;3511  gap: 6px;3512  flex-wrap: wrap;3513}3514.peach-pwgen-pill {3515  padding: 4px 11px;3516  border-radius: 999px;3517  border: 1px solid var(--peach-t3);3518  background: transparent;3519  color: var(--peach-t2);3520  font-family: "IBM Plex Mono", monospace;3521  font-size: 0.5625rem;3522  letter-spacing: 0.08em;3523  cursor: pointer;3524  transition: all 150ms ease;3525}3526.peach-pwgen-pill.is-on {3527  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3528  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3529  color: var(--peach-accent);3530}3531.peach-pwgen-pill:not(.is-on):hover {3532  color: var(--peach-t1);3533  border-color: var(--peach-t2);3534}3535.peach-pwgen-use-btn {3536  width: 100%;3537  min-height: 34px;3538  border-radius: 8px;3539  margin-top: 2px;3540}3541.peach-generator-constraint-note {3542  font-family: 'IBM Plex Mono', monospace;3543  font-size: 10px;3544  color: var(--peach-t3);3545  letter-spacing: 0.04em;3546  margin: 0;3547  transition: opacity 200ms ease;3548}3549.peach-pwgen-toggle-row {3550  display: flex; align-items: center; justify-content: space-between;3551  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3552}3553.peach-pwgen-toggle-row:last-child { border-bottom: none; }3554.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }35553556/* Peach popup should not expose native scrollbars on internal panels. */3557.peach-settings-body,3558.peach-new-body,3559.peach-pwgen-body,3560.lock-screen,3561.peach-import-preview {3562  scrollbar-width: none;3563  -ms-overflow-style: none;3564  overscroll-behavior: contain;3565}3566.peach-settings-body::-webkit-scrollbar,3567.peach-new-body::-webkit-scrollbar,3568.peach-pwgen-body::-webkit-scrollbar,3569.lock-screen::-webkit-scrollbar,3570.peach-import-preview::-webkit-scrollbar {3571  width: 0;3572  height: 0;3573  display: none;3574}35753576.lock-screen {3577  height: 100%;3578  min-height: 100%;3579  overflow-y: auto;3580  padding: 18px 18px 16px;3581  gap: 14px;3582  grid-template-rows: auto auto auto 1fr auto;3583  align-content: stretch;3584  position: relative;3585  isolation: isolate;3586}3587.peach-screen.lock-screen--vault-stage {3588  display: flex;3589  flex-direction: column;3590  justify-content: flex-start;3591  gap: 18px;3592  padding: 20px 18px 18px;3593  overflow: hidden;3594}3595.peach-screen.lock-screen--vault-stage .peach-lock-panel {3596  margin-top: 0;3597}3598.lock-screen--onboarding {3599  display: flex;3600  flex-direction: column;3601  gap: 12px;3602  justify-content: flex-start;3603}36043605.lock-screen::before {3606  content: "";3607  position: absolute;3608  inset: 12px 18px auto auto;3609  width: 160px;3610  height: 160px;3611  border-radius: 999px;3612  background:3613    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%);3614  filter: blur(6px);3615  opacity: 0.7;3616  pointer-events: none;3617  z-index: 0;3618}36193620.peach-lock-rune-string {3621  flex: 1;3622  display: flex;3623  align-items: center;3624  justify-content: center;3625  gap: 6px;3626  font-family: PeachScript, monospace;3627  font-size: 0.8125rem;3628  letter-spacing: 0.05em;3629  pointer-events: none;3630  user-select: none;3631  position: relative;3632  z-index: 1;3633}36343635.peach-lock-rune-string span {3636  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3637  text-shadow:3638    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3639    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3640  transition: color 0.9s ease, text-shadow 0.9s ease;3641}36423643.peach-lock-rune-string span.is-glowing {3644  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3645  text-shadow:3646    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3647    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3648}36493650.lock-screen-header {3651  display: flex;3652  align-items: center;3653  justify-content: space-between;3654  position: relative;3655  z-index: 1;3656}36573658.lock-password-input.shake {3659  animation: peach-shake 300ms ease-in-out;3660}36613662.peach-hint-error {3663  color: rgba(220, 80, 60, 0.92);3664}36653666.peach-onboarding-headline {3667  margin: 0;3668  font-family: var(--font-display);3669  font-size: 35px;3670  line-height: 0.88;3671  font-style: italic;3672  font-weight: 400;3673  max-width: 252px;3674}36753676.peach-lock-copy {3677  display: grid;3678  gap: 8px;3679  position: relative;3680  z-index: 1;3681}36823683.peach-lock-copy--onboarding {3684  gap: 10px;3685}36863687.peach-lock-hero {3688  position: relative;3689  z-index: 1;3690  display: grid;3691  gap: 8px;3692  min-height: 0;3693  padding: 4px 2px 0;3694  border: none;3695  border-radius: 0;3696  background: transparent;3697  box-shadow: none;3698}3699.peach-lock-hero-art {3700  position: absolute;3701  right: -8px;3702  top: -6px;3703  width: 120px;3704  height: 120px;3705  display: flex;3706  align-items: center;3707  justify-content: center;3708  pointer-events: none;3709  opacity: 0.12;3710  filter: saturate(0.9);3711}3712.peach-lock-hero-mark {3713  width: 100%;3714  height: 100%;3715}3716/* Peach body stays brand-peach across every accent — we don't want a3717   green or blue peach when sage/sky is selected. Leaf + vein keep the3718   sage tint because a real peach has a sage leaf. In the new brand-kit3719   mark the leaf is path 1 and the vein stroke is path 2; the body and3720   back-lobe (paths 3 + 4) must stay untouched. */3721.peach-lock-hero-mark path:nth-child(1) {3722  fill: rgba(123, 144, 96, 0.88);3723}3724.peach-lock-hero-mark path:nth-child(2) {3725  stroke: rgba(94, 122, 66, 0.95);3726}3727.peach-lock-hero > *:not(.peach-lock-hero-art) {3728  position: relative;3729  z-index: 1;3730}37313732.peach-lock-eyebrow {3733  display: inline-flex;3734  align-items: center;3735  width: fit-content;3736  padding: 4px 9px;3737  border-radius: 999px;3738  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3739  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3740  color: var(--peach-t0);3741  font-family: "IBM Plex Mono", monospace;3742  font-size: 0.5rem;3743  letter-spacing: 0.18em;3744  text-transform: uppercase;3745}37463747.peach-lock-label-row {3748  display: flex;3749  align-items: center;3750  justify-content: space-between;3751  margin-bottom: 0;3752}37533754.peach-lock-reveal-btn {3755  display: inline-flex;3756  align-items: center;3757  gap: 4px;3758  background: none;3759  border: none;3760  cursor: pointer;3761  font-family: "IBM Plex Mono", monospace;3762  font-size: 0.5625rem;3763  letter-spacing: 0.06em;3764  color: var(--peach-t2);3765  padding: 2px 0;3766  transition: color 150ms ease;3767}37683769.peach-lock-reveal-btn:hover {3770  color: var(--peach-t1);3771}37723773.peach-lock-warning {3774  color: rgba(220, 80, 60, 0.85) !important;3775  line-height: 1.5;3776}37773778.peach-onboarding-cards {3779  display: grid;3780  gap: 8px;3781  position: relative;3782  z-index: 1;3783}37843785.peach-lock-panel {3786  position: relative;3787  z-index: 1;3788  display: grid;3789  gap: 9px;3790  padding: 14px 16px 15px;3791  border-radius: 18px;3792  border: 1px solid var(--peach-t3);3793  background:3794    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3795  box-shadow:3796    inset 0 1px 0 rgba(240, 232, 216, 0.04),3797    0 12px 28px rgba(0, 0, 0, 0.12);3798}37993800/* Glass surface — lock panel and settings groups */3801.peach-glass {3802  background: rgba(26, 20, 16, 0.65);3803  border: 1px solid rgba(255, 255, 255, 0.08);3804  border-radius: 12px;3805  backdrop-filter: blur(12px) saturate(1.4);3806  -webkit-backdrop-filter: blur(12px) saturate(1.4);3807}38083809@supports not (backdrop-filter: blur(1px)) {3810  .peach-glass {3811    background: rgba(26, 20, 16, 0.92);3812    border: 1px solid rgba(255, 255, 255, 0.10);3813    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3814  }3815}38163817.light .peach-glass,3818[data-theme="light"] .peach-glass {3819  background: rgba(240, 233, 223, 0.72);3820  border: 1px solid rgba(26, 18, 8, 0.08);3821  backdrop-filter: blur(12px) saturate(1.2);3822  -webkit-backdrop-filter: blur(12px) saturate(1.2);3823}38243825@supports not (backdrop-filter: blur(1px)) {3826  .light .peach-glass,3827  [data-theme="light"] .peach-glass {3828    background: rgba(240, 233, 223, 0.97);3829    border: 1px solid rgba(26, 18, 8, 0.10);3830  }3831}38323833/* Lock panel keeps its own border-radius over the generic glass token */3834.peach-lock-panel.peach-glass {3835  border-radius: 18px;3836  background: rgba(26, 20, 16, 0.65);3837  border: 1px solid rgba(255, 255, 255, 0.08);3838  box-shadow:3839    inset 0 1px 0 rgba(255, 255, 255, 0.05),3840    0 12px 28px rgba(0, 0, 0, 0.3);3841}38423843.light .peach-lock-panel.peach-glass,3844[data-theme="light"] .peach-lock-panel.peach-glass {3845  background: rgba(240, 233, 223, 0.82);3846  border: 1px solid rgba(26, 18, 8, 0.08);3847  box-shadow:3848    inset 0 1px 0 rgba(255, 255, 255, 0.4),3849    0 8px 24px rgba(80, 56, 32, 0.15);3850}38513852@supports not (backdrop-filter: blur(1px)) {3853  .peach-lock-panel.peach-glass {3854    background: rgba(26, 20, 16, 0.92);3855    box-shadow:3856      inset 0 1px 0 rgba(255, 255, 255, 0.05),3857      0 12px 28px rgba(0, 0, 0, 0.4);3858  }3859  .light .peach-lock-panel.peach-glass,3860  [data-theme="light"] .peach-lock-panel.peach-glass {3861    background: rgba(240, 233, 223, 0.98);3862  }3863}38643865.peach-lock-panel--secondary {3866  gap: 12px;3867}38683869.peach-lock-panel-header {3870  display: flex;3871  align-items: baseline;3872  justify-content: space-between;3873  gap: 12px;3874}38753876.peach-lock-option-grid {3877  display: grid;3878  gap: 10px;3879}38803881.peach-lock-option {3882  width: 100%;3883  display: grid;3884  gap: 6px;3885  padding: 14px 15px;3886  border-radius: 16px;3887  border: 1px solid rgba(240, 232, 216, 0.08);3888  background: rgba(240, 232, 216, 0.02);3889  color: var(--peach-t0);3890  text-align: left;3891  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3892}38933894.peach-lock-option:hover {3895  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3896  background: rgba(240, 232, 216, 0.04);3897  transform: translateY(-1px);3898}38993900.peach-lock-option-title {3901  font-size: 0.75rem;3902  color: var(--peach-t0);3903}39043905.peach-lock-option-copy {3906  font-size: 0.6875rem;3907  line-height: 1.55;3908  color: var(--peach-t1);3909}39103911.peach-onboarding-stack {3912  margin-top: 2px;3913}3914.peach-lock-panel-footer {3915  display: grid;3916  gap: 6px;3917  margin-top: 2px;3918  padding-top: 10px;3919  border-top: 1px solid rgba(240, 232, 216, 0.06);3920}39213922/* ── Restore tab view ─────────────────────────────────────────────────────3923   Tab-based restore screen replacing the old three-card picker. */39243925.peach-restore-tabview {3926  overflow: hidden;3927}39283929.peach-restore-tabcard {3930  flex: 1;3931  display: flex;3932  flex-direction: column;3933  gap: 0;3934  padding: 0;3935  overflow: hidden;3936  cursor: default;3937  user-select: none;3938  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3939}39403941/* ── Tab selector ─────────────────────────────────────────────────────── */39423943.peach-restore-tabs {3944  display: flex;3945  justify-content: space-around;3946  padding: 14px 10px 10px;3947  border-bottom: 1px solid var(--peach-t3);3948  gap: 2px;3949  overflow: hidden;3950  scrollbar-width: none;3951}3952.peach-restore-tabs::-webkit-scrollbar { display: none; }39533954.peach-restore-tab {3955  background: none;3956  border: none;3957  cursor: pointer;3958  padding: 3px 2px;3959  font-family: 'Cormorant Garamond', Georgia, serif;3960  font-style: italic;3961  font-size: 11px;3962  color: var(--peach-t2);3963  transition: color 150ms ease, text-shadow 150ms ease;3964  flex: 1;3965  min-width: 0;3966  text-align: center;3967  white-space: nowrap;3968  overflow: hidden;3969  text-overflow: ellipsis;3970}3971.peach-restore-tab:hover {3972  color: var(--peach-accent);3973  text-shadow:3974    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3975    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3976}3977.peach-restore-tab.is-active {3978  color: var(--peach-accent);3979  text-shadow:3980    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3981    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3982}39833984/* ── Content area ─────────────────────────────────────────────────────── */39853986.peach-restore-content {3987  padding: 16px 16px 14px;3988  display: flex;3989  flex-direction: column;3990  gap: 8px;3991  overflow: hidden;3992  scrollbar-width: none;3993  flex: 1;3994}3995.peach-restore-content::-webkit-scrollbar { display: none; }3996.peach-restore-content > * {3997  overflow: hidden;3998  scrollbar-width: none;3999}4000.peach-restore-content > *::-webkit-scrollbar { display: none; }40014002/* ── Shared tab inner layout ──────────────────────────────────────────── */40034004.peach-rt-symbols,4005.peach-rt-csv,4006.peach-rt-phone,4007.peach-restore-codex {4008  display: flex;4009  flex-direction: column;4010  gap: 8px;4011  overflow: hidden;4012}40134014.peach-restore-codex {4015  min-height: 0;4016  justify-content: center;4017}40184019.peach-restore-codex-title {4020  margin: 0;4021  font-family: var(--font-display);4022  font-size: 1rem;4023  font-style: italic;4024  color: var(--peach-t0);4025}40264027.peach-restore-codex-copy {4028  margin: 0;4029  font-size: 0.75rem;4030  line-height: 1.5;4031  color: var(--peach-t1);4032}40334034.peach-restore-codex-button {4035  width: 100%;4036  justify-content: center;4037}40384039.peach-rt-submit {4040  width: 100%;4041}40424043.peach-rt-error {4044  margin: 0;4045  font-size: 0.6875rem;4046  color: var(--peach-breach);4047  line-height: 1.4;4048}40494050/* ── PeachScript tab ──────────────────────────────────────────────────── */40514052.peach-restore-symbols-textarea {4053  font-family: 'PeachScript', monospace;4054  font-size: 13px;4055  line-height: 1.9;4056  letter-spacing: 0.1em;4057  word-break: break-all;4058  resize: none;4059  width: 100%;4060  min-height: 56px;4061  max-height: 72px;4062  overflow: hidden;4063  scrollbar-width: none;4064  -ms-overflow-style: none;4065  box-sizing: border-box;4066  padding: 6px 8px;4067  border-radius: 8px;4068  border: 1px solid var(--peach-t3);4069  background: rgba(240, 232, 216, 0.03);4070  color: var(--peach-t0);4071}4072.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }4073.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }40744075.peach-restore-symbols-pass {4076  width: 100%;4077  box-sizing: border-box;4078  padding: 7px 10px;4079  border-radius: 8px;4080  border: 1px solid var(--peach-t3);4081  background: rgba(240, 232, 216, 0.03);4082  color: var(--peach-t0);4083  font-size: 0.8125rem;4084}4085.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }4086.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }40874088.peach-rt-divider {4089  text-align: center;4090  font-size: 0.6875rem;4091  color: var(--peach-t2);4092  font-style: italic;4093}40944095.peach-rt-file-label {4096  width: 100%;4097  justify-content: center;4098}40994100.peach-rt-anim-canvas {4101  width: 100%;4102  height: 180px;4103  border-radius: 10px;4104  overflow: hidden;4105  display: block;4106}41074108/* ── CSV tab ──────────────────────────────────────────────────────────── */41094110.peach-rt-csv-sources {4111  margin: 0;4112  font-size: 0.6875rem;4113  color: var(--peach-t2);4114  line-height: 1.5;4115  text-align: center;4116}41174118.peach-rt-csv-warning {4119  margin: 0;4120  font-family: "IBM Plex Mono", monospace;4121  font-size: 0.5625rem;4122  letter-spacing: 0.12em;4123  color: var(--peach-breach);4124  text-align: center;4125}41264127/* ── From Phone tab ───────────────────────────────────────────────────── */41284129.peach-rt-phone-code {4130  margin: 0;4131  text-align: center;4132  font-family: "IBM Plex Mono", monospace;4133  font-size: 22px;4134  letter-spacing: 0.18em;4135  color: var(--peach-t0);4136}41374138.peach-rt-phone-qr {4139  display: block;4140  width: 96px;4141  height: 96px;4142  margin: 0 auto;4143  border-radius: 6px;4144  image-rendering: pixelated;4145  overflow: hidden;4146}41474148.peach-rt-phone-hint {4149  margin: 0;4150  font-size: 0.6875rem;4151  color: var(--peach-t2);4152  line-height: 1.55;4153  text-align: center;4154}41554156/* ── Intro popup ──────────────────────────────────────────────────────── */41574158.peach-restore-intro-overlay {4159  position: absolute;4160  inset: 0;4161  z-index: 100;4162  display: flex;4163  align-items: center;4164  justify-content: center;4165  padding: 20px;4166  background: rgba(12, 10, 6, 0.7);4167  backdrop-filter: blur(4px);4168  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4169}41704171.peach-restore-intro-card {4172  width: 100%;4173  display: flex;4174  flex-direction: column;4175  gap: 12px;4176  padding: 22px 20px 20px;4177  border-radius: 16px;4178  border: 1px solid var(--peach-t3);4179  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));4180  backdrop-filter: blur(4px);4181  -webkit-backdrop-filter: blur(4px);4182  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);4183}41844185.peach-restore-intro-headline {4186  margin: 0;4187  font-family: var(--font-display);4188  font-style: italic;4189  font-size: 20px;4190  font-weight: 400;4191  color: var(--peach-t0);4192}41934194.peach-restore-intro-body {4195  display: flex;4196  flex-direction: column;4197  gap: 8px;4198}4199.peach-restore-intro-body p {4200  margin: 0;4201  font-size: 0.75rem;4202  color: var(--peach-t1);4203  line-height: 1.5;4204}42054206.peach-restore-intro-btn {4207  width: 100%;4208  margin-top: 4px;4209}42104211/* Snapshot restore panel */4212.peach-snapshot-panel {4213  gap: 10px;4214  overflow-y: auto;4215  max-height: 340px;4216}4217.peach-snapshot-list {4218  display: flex;4219  flex-direction: column;4220  gap: 4px;4221}4222.peach-snapshot-row {4223  display: flex;4224  align-items: center;4225  justify-content: space-between;4226  width: 100%;4227  padding: 8px 10px;4228  border-radius: 8px;4229  border: 1px solid rgba(240, 232, 216, 0.07);4230  background: transparent;4231  cursor: pointer;4232  transition: border-color 120ms, background 120ms;4233  text-align: left;4234  gap: 8px;4235}4236.peach-snapshot-row:hover {4237  border-color: rgba(240, 232, 216, 0.14);4238  background: rgba(240, 232, 216, 0.03);4239}4240.peach-snapshot-row.is-selected {4241  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4242  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);4243}4244.peach-snapshot-time {4245  font-size: 11.5px;4246  color: var(--peach-t0);4247  flex: 1;4248}4249.peach-snapshot-count {4250  font-family: "IBM Plex Mono", monospace;4251  font-size: 0.625rem;4252  color: var(--peach-t2);4253  flex-shrink: 0;4254}4255.peach-snapshot-confirm {4256  display: flex;4257  flex-direction: column;4258  gap: 8px;4259  padding-top: 10px;4260  border-top: 1px solid rgba(240, 232, 216, 0.06);4261}4262.peach-snapshot-warning {4263  display: flex;4264  align-items: flex-start;4265  gap: 6px;4266  font-size: 10.5px;4267  color: rgba(220, 80, 60, 0.85);4268  line-height: 1.55;4269}4270.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }4271.peach-snapshot-confirm-row {4272  display: flex;4273  gap: 6px;4274  align-items: center;4275}4276.peach-snapshot-restore-btn {4277  width: 100%;4278}4279.peach-lock-hero--unlock .peach-lock-hero-art {4280  width: 112px;4281  height: 112px;4282  right: 0;4283  top: 2px;4284  opacity: 0.1;4285}42864287.peach-card {4288  border: 1px solid var(--peach-t3);4289  border-radius: 18px;4290  background:4291    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4292  box-shadow:4293    inset 0 0 0 1px var(--peach-border-accent),4294    inset 0 1px 0 rgba(240, 232, 216, 0.04),4295    0 12px 32px rgba(0, 0, 0, 0.14);4296  overflow: hidden;4297}42984299.peach-card-active {4300  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4301  box-shadow:4302    inset 0 1px 0 rgba(240, 232, 216, 0.05),4303    0 16px 38px rgba(0, 0, 0, 0.18),4304    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4305}43064307.peach-card-disabled {4308  opacity: 0.72;4309}43104311.peach-card-header {4312  width: 100%;4313  padding: 13px 16px 11px;4314  background: transparent;4315  color: var(--peach-t0);4316  display: flex;4317  justify-content: space-between;4318  align-items: center;4319  text-align: left;4320  font-size: 0.75rem;4321}43224323.peach-card-body {4324  padding: 0 16px 16px;4325  display: grid;4326  gap: 9px;4327}43284329.peach-card-tag {4330  color: var(--peach-t2);4331  font-family: "IBM Plex Mono", monospace;4332  font-size: 0.5625rem;4333  letter-spacing: 0.12em;4334  text-transform: uppercase;4335}43364337.peach-empty-copy {4338  display: grid;4339  gap: 6px;4340  color: var(--peach-t1);4341  font-size: 0.8125rem;4342}43434344.peach-lock-submit {4345  width: 100%;4346  box-shadow:4347    0 1px 0 rgba(255,255,255,0.10) inset,4348    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4349    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4350    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4351}43524353.peach-lock-secondary {4354  width: 100%;4355  border-color: var(--peach-t3);4356  background: rgba(240, 232, 216, 0.02);4357}43584359.peach-lock-secondary:hover {4360  background: rgba(240, 232, 216, 0.04);4361}43624363.peach-lock-note {4364  max-width: none;4365  line-height: 1.55;4366  margin: 0;4367}43684369.peach-overlay-action {4370  font-size: 0.625rem;4371  padding: 4px 8px;4372  letter-spacing: 0.06em;4373  min-width: 44px;4374  text-align: center;4375}43764377.peach-inline-action {4378  flex-shrink: 0;4379  font-size: 0.5625rem;4380  letter-spacing: 0.1em;4381  text-transform: uppercase;4382  padding: 4px 7px;4383}4384.peach-password-toggle-btn {4385  display: inline-flex;4386  align-items: center;4387  justify-content: center;4388  min-width: 30px;4389  min-height: 26px;4390  padding: 0 7px;4391  border: 1px solid var(--peach-t3);4392  border-radius: 999px;4393  background: rgba(240, 232, 216, 0.04);4394  color: var(--peach-t2);4395  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4396}4397.peach-password-toggle-btn:hover {4398  border-color: var(--peach-t2);4399  color: var(--peach-t0);4400  background: rgba(240, 232, 216, 0.06);4401}44024403.peach-new-textarea {4404  width: 100%;4405  min-height: 88px;4406  resize: vertical;4407  border: 0;4408  outline: none;4409  background: transparent;4410  color: var(--peach-t1);4411  font-family: "IBM Plex Mono", monospace;4412  font-size: 0.75rem;4413  line-height: 1.65;4414  caret-color: var(--peach-accent);4415}44164417.peach-new-textarea::placeholder {4418  color: var(--peach-t2);4419  opacity: 0.7;4420}44214422.peach-settings-actions {4423  display: grid;4424  gap: 8px;4425}44264427.peach-sync-section-label {4428  font-size: 0.6875rem;4429  color: var(--peach-t2);4430  text-transform: uppercase;4431  letter-spacing: 0.05em;4432}44334434.peach-sync-network-note {4435  margin: 0 0 6px;4436  font-size: 0.75rem;4437  color: var(--peach-t2);4438  line-height: 1.4;4439}44404441.peach-settings-row--tappable {4442  background: none;4443  border: none;4444  width: 100%;4445  text-align: left;4446  cursor: pointer;4447  color: var(--peach-t1);4448  font-size: 0.8125rem;4449}4450.peach-settings-row--tappable:hover {4451  color: var(--peach-t0);4452}44534454.peach-sync-pro-hint {4455  display: flex;4456  flex-direction: column;4457  align-items: flex-start;4458  gap: 8px;4459  padding: 12px 0 4px;4460}44614462.peach-sync-device-row {4463  display: flex;4464  justify-content: space-between;4465  align-items: center;4466  padding: 6px 0;4467  border-bottom: 1px solid var(--peach-t3);4468}44694470.peach-sync-device-info {4471  display: flex;4472  flex-direction: column;4473  gap: 2px;4474}44754476.peach-sync-device-name {4477  font-size: 0.8125rem;4478  color: var(--peach-t0);4479}44804481.peach-sync-device-meta {4482  font-size: 0.6875rem;4483  color: var(--peach-t2);4484}44854486.peach-sync-status-dot {4487  display: inline-block;4488  width: 8px;4489  height: 8px;4490  border-radius: 50%;4491  vertical-align: middle;4492}44934494.peach-sync-remove-btn {4495  color: var(--peach-breach);4496}44974498.peach-sync-advanced-row {4499  display: flex;4500  justify-content: space-between;4501  align-items: center;4502  padding: 6px 0;4503  gap: 12px;4504}45054506.peach-sync-advanced-info {4507  display: flex;4508  flex-direction: column;4509  gap: 2px;4510  flex: 1;4511}45124513.peach-sync-advanced-name {4514  font-size: 0.8125rem;4515  color: var(--peach-t0);4516}45174518.peach-sync-reset-confirm {4519  display: flex;4520  flex-direction: column;4521  gap: 8px;4522  padding: 10px;4523  border: 1px solid var(--peach-breach);4524  border-radius: 10px;4525  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4526}45274528.peach-sync-reset-confirm-headline {4529  font-size: 0.8125rem;4530  font-weight: 600;4531  color: var(--peach-t0);4532  margin: 0;4533}45344535.peach-sync-reset-confirm-body {4536  font-size: 0.75rem;4537  color: var(--peach-t1);4538  margin: 0;4539  line-height: 1.4;4540}45414542.peach-btn--danger {4543  background: var(--peach-breach);4544  color: #fff;4545  border-color: var(--peach-breach);4546}4547.peach-btn--danger:hover:not(:disabled) {4548  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4549}4550.peach-btn--danger:disabled {4551  opacity: 0.55;4552  cursor: not-allowed;4553}45544555.peach-sync-hero-icon {4556  color: var(--peach-t1);4557  opacity: 0.85;4558}45594560.peach-import-preview {4561  margin-bottom: 12px;4562  max-height: 152px;4563  overflow-y: auto;4564  border: 1px solid var(--peach-t3);4565  border-radius: 10px;4566  padding: 8px 10px;4567  display: grid;4568  gap: 8px;4569  background: rgba(240, 232, 216, 0.02);4570}45714572.peach-import-preview-row {4573  display: flex;4574  justify-content: space-between;4575  gap: 10px;4576  font-size: 0.6875rem;4577  color: var(--peach-t1);4578}45794580.peach-import-preview-title {4581  color: var(--peach-t0);4582  flex: 1;4583  min-width: 0;4584  overflow: hidden;4585  text-overflow: ellipsis;4586  white-space: nowrap;4587}45884589.peach-import-preview-meta {4590  color: var(--peach-t2);4591  flex-shrink: 0;4592  max-width: 42%;4593  overflow: hidden;4594  text-overflow: ellipsis;4595  white-space: nowrap;4596}45974598.peach-import-preview-more {4599  color: var(--peach-t2);4600  font-size: 0.625rem;4601}46024603.peach-restore-copy {4604  margin: 0;4605  color: var(--peach-t1);4606  font-size: 0.6875rem;4607  line-height: 1.6;4608}46094610.peach-restore-warning {4611  padding: 10px 12px;4612  border-radius: 12px;4613  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4614  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4615  color: var(--peach-t0);4616  font-size: 0.6875rem;4617  line-height: 1.55;4618}46194620.peach-provider-chips {4621  display: flex;4622  flex-wrap: wrap;4623  gap: 6px;4624}46254626.peach-provider-chip {4627  display: inline-flex;4628  align-items: center;4629  padding: 5px 8px;4630  border-radius: 999px;4631  border: 1px solid var(--peach-t3);4632  background: rgba(240, 232, 216, 0.02);4633  color: var(--peach-t1);4634  font-family: "IBM Plex Mono", monospace;4635  font-size: 0.5rem;4636  letter-spacing: 0.08em;4637  text-transform: uppercase;4638}46394640.peach-restore-file,4641.peach-restore-input {4642  width: 100%;4643  border-radius: 10px;4644  border: 1px solid var(--peach-t3);4645  background: var(--peach-s2);4646  color: var(--peach-t0);4647  font-size: 0.75rem;4648}46494650.peach-restore-file {4651  padding: 9px 10px;4652}46534654.peach-restore-file::file-selector-button {4655  margin-right: 10px;4656  padding: 7px 10px;4657  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4658  border-radius: 999px;4659  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4660  color: var(--peach-t0);4661  font-size: 0.625rem;4662  letter-spacing: 0.08em;4663  text-transform: uppercase;4664  cursor: pointer;4665}46664667.peach-restore-input {4668  padding: 10px 12px;4669}46704671.peach-auth-grid {4672  display: grid;4673  gap: 10px;4674}46754676.peach-import-summary {4677  color: var(--peach-t1);4678  font-size: 0.75rem;4679  line-height: 1.6;4680  margin-bottom: 12px;4681}46824683.peach-restore-error {4684  color: rgba(220, 80, 60, 0.95);4685  font-size: 0.75rem;4686  line-height: 1.55;4687}46884689.peach-passkey-card {4690  max-width: 400px;4691  margin: auto 16px;4692  align-self: center;4693  width: calc(100% - 32px);4694}46954696/* Center the approval card vertically inside the overlay-view (which sets4697 * flex-direction: column without justify-content). Without this, the card4698 * sits at the top with a tall empty band below — looks unfinished on the4699 * 320px popup. */4700.peach-overlay-view:has(.peach-passkey-card) {4701  justify-content: center;4702}47034704.peach-pro-badge {4705  padding: 2px 6px;4706  border-radius: 999px;4707  font-family: var(--font-ui);4708  font-size: 0.625rem;4709  letter-spacing: 0.08em;4710  text-transform: uppercase;4711  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4712  color: var(--peach-accent);4713}47144715/* ── Shortcuts rebind table ─────────────────────────────────── */4716.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4717.peach-shortcut-row {4718  display: flex;4719  align-items: center;4720  gap: 10px;4721  padding: 6px 0;4722}4723.peach-shortcut-row-label {4724  flex: 1;4725  font-size: 0.75rem;4726  color: var(--peach-t0);4727}4728.peach-shortcut-chip {4729  min-width: 64px;4730  padding: 4px 10px;4731  border-radius: 6px;4732  border: 1px solid var(--peach-t3);4733  background: var(--peach-input-bg, var(--surface-card));4734  color: var(--peach-t0);4735  font-family: var(--font-mono);4736  font-size: 0.6875rem;4737  letter-spacing: 0.04em;4738  cursor: pointer;4739  text-align: center;4740  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4741}4742.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4743.peach-shortcut-chip.is-custom {4744  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4745  color: var(--peach-accent);4746}4747.peach-shortcut-chip.is-capturing {4748  border-color: var(--peach-accent);4749  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4750  color: var(--peach-accent);4751  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4752}4753@keyframes peach-shortcut-capture-pulse {4754  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4755  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4756}4757.peach-shortcut-reset {4758  background: transparent;4759  border: none;4760  cursor: pointer;4761  color: var(--peach-t2);4762  padding: 4px 6px;4763  border-radius: 5px;4764  font-size: 0.875rem;4765  line-height: 1;4766  transition: color 120ms ease, background 120ms ease;4767}4768.peach-shortcut-reset:hover {4769  color: var(--peach-t0);4770  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4771}4772.peach-shortcuts-conflict {4773  margin: 4px 0 0;4774  padding: 8px 10px;4775  border-radius: 7px;4776  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4777  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4778  font-family: var(--font-mono);4779  font-size: 0.6875rem;4780  color: var(--peach-t0);4781}47824783/* ── Help dialog overlay (? to open) ────────────────────────── */4784.peach-shortcuts-help-backdrop {4785  position: fixed;4786  inset: 0;4787  background: rgba(0, 0, 0, 0.55);4788  backdrop-filter: blur(2px);4789  display: flex;4790  align-items: center;4791  justify-content: center;4792  z-index: 1000;4793  animation: peach-help-fade-in 140ms ease forwards;4794}4795@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4796.peach-shortcuts-help-card {4797  width: min(320px, 92vw);4798  max-height: 80vh;4799  overflow-y: auto;4800  border-radius: 14px;4801  border: 1px solid var(--peach-t3);4802  background: var(--peach-bg);4803  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4804  padding: 16px 18px 18px;4805  display: flex;4806  flex-direction: column;4807  gap: 12px;4808}4809.peach-shortcuts-help-head {4810  display: flex; align-items: center; justify-content: space-between;4811}4812.peach-shortcuts-help-head h3 {4813  margin: 0;4814  font-family: var(--font-display);4815  font-style: italic;4816  font-weight: 400;4817  font-size: 22px;4818  color: var(--peach-t0);4819}4820.peach-shortcuts-help-close {4821  background: transparent;4822  border: none;4823  color: var(--peach-t2);4824  cursor: pointer;4825  font-size: 0.875rem;4826  padding: 4px 8px;4827  border-radius: 5px;4828}4829.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4830.peach-shortcuts-help-body ul {4831  list-style: none; padding: 0; margin: 4px 0 12px;4832  display: grid; gap: 8px;4833}4834.peach-shortcuts-help-body li {4835  display: flex; align-items: center; justify-content: space-between; gap: 12px;4836  font-size: 0.75rem; color: var(--peach-t0);4837}4838.peach-shortcuts-help-body kbd {4839  font-family: var(--font-mono);4840  font-size: 0.6875rem;4841  padding: 3px 8px;4842  border-radius: 6px;4843  background: var(--surface-card);4844  border: 1px solid var(--peach-t3);4845  color: var(--peach-accent);4846  letter-spacing: 0.04em;4847}48484849/* ── Pro promo on Account screen ────────────────────────────── */4850.peach-pro-promo {4851  position: relative;4852  border-radius: 14px;4853  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4854  background:4855    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4856    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4857    var(--surface-card);4858  overflow: hidden;4859  margin-bottom: 14px;4860}4861.peach-pro-promo-glow {4862  position: absolute;4863  inset: -40% -20% auto auto;4864  width: 220px; height: 220px;4865  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4866  pointer-events: none;4867  filter: blur(8px);4868}4869.peach-pro-promo-inner {4870  position: relative;4871  padding: 18px 18px 16px;4872}4873.peach-pro-promo-title {4874  font-family: var(--font-display);4875  font-style: italic;4876  font-weight: 400;4877  font-size: 28px;4878  line-height: 1;4879  letter-spacing: -0.005em;4880  color: var(--peach-t0);4881  margin: 0 0 4px;4882}4883.peach-pro-promo-tagline {4884  font-family: var(--font-mono);4885  font-size: 0.625rem;4886  letter-spacing: 0.06em;4887  color: var(--peach-t2);4888  margin: 0 0 14px;4889}4890.peach-pro-promo-list {4891  list-style: none;4892  margin: 0 0 16px;4893  padding: 0;4894  display: grid;4895  gap: 9px;4896}4897.peach-pro-promo-list li {4898  display: flex;4899  align-items: flex-start;4900  gap: 9px;4901  font-size: 0.75rem;4902  color: var(--peach-t1);4903  line-height: 1.4;4904}4905.peach-pro-promo-list svg {4906  width: 14px;4907  height: 14px;4908  flex-shrink: 0;4909  color: var(--peach-accent);4910  margin-top: 2px;4911}4912.peach-pro-promo-list span {4913  color: var(--peach-t0);4914}4915.peach-pro-promo-cta {4916  width: 100%;4917  background: var(--peach-accent);4918  color: #fff;4919  border: none;4920  padding: 9px 12px;4921  border-radius: 9px;4922  font-size: 0.75rem;4923  font-weight: 500;4924  font-family: var(--font-ui);4925  letter-spacing: 0.02em;4926  text-decoration: none;4927  display: inline-flex;4928  align-items: center;4929  justify-content: center;4930  cursor: pointer;4931  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4932  box-shadow: 0 2px 16px var(--peach-glow);4933}4934.peach-pro-promo-cta:hover {4935  filter: brightness(1.07);4936  box-shadow: 0 4px 24px var(--peach-glow);4937  transform: translateY(-1px);4938}4939.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }49404941.peach-pro-or-divider {4942  display: flex;4943  align-items: center;4944  gap: 10px;4945  margin: 4px 0 12px;4946  font-family: var(--font-mono);4947  font-size: 0.625rem;4948  letter-spacing: 0.06em;4949  color: var(--peach-t2);4950  text-transform: uppercase;4951}4952.peach-pro-or-divider::before,4953.peach-pro-or-divider::after {4954  content: "";4955  flex: 1;4956  height: 1px;4957  background: var(--peach-t3);4958}49594960.peach-loading {4961  position: absolute;4962  inset: 0;4963  display: flex;4964  align-items: center;4965  justify-content: center;4966  background: var(--bg);4967  animation: peach-loading-pulse 1.2s ease-in-out infinite;4968}49694970@keyframes peach-loading-pulse {4971  0%, 100% { opacity: 0.6; }4972  50% { opacity: 1; }4973}49744975/* ── Health Dashboard ─────────────────────────────────────────────────── */4976.peach-health-body {4977  flex: 1;4978  overflow-y: auto;4979  display: flex;4980  flex-direction: column;4981  /* Hide the platform scrollbar — every other scrollable surface in the4982   * popup hides it; the Health view was the one outlier and it ruined the4983   * polish. Behavior unchanged, just no rail rendered. */4984  scrollbar-width: none;4985  -ms-overflow-style: none;4986}4987.peach-health-body::-webkit-scrollbar { display: none; }49884989/* Loading screen for the Vault Health view. The advanced report computation4990 * can run for a few seconds on a large vault — without a clear loading4991 * screen the surface looked broken (the entry view bleeds through the4992 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4993.peach-health-loading-screen {4994  flex: 1;4995  display: flex;4996  flex-direction: column;4997  align-items: center;4998  justify-content: center;4999  gap: 14px;5000  padding: 32px 28px;5001  text-align: center;5002}50035004.peach-health-loading-glyph {5005  width: 48px;5006  height: 48px;5007  display: flex;5008  align-items: center;5009  justify-content: center;5010  border-radius: 14px;5011  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5012  color: var(--peach-accent);5013}50145015.peach-health-loading-title {5016  margin: 0;5017  font-family: var(--font-display);5018  font-style: italic;5019  font-weight: 300;5020  font-size: 19px;5021  line-height: 1.2;5022  color: var(--peach-t0);5023}50245025.peach-health-loading-copy {5026  margin: 0;5027  max-width: 240px;5028  font-size: 0.75rem;5029  line-height: 1.55;5030  color: var(--peach-t2);5031}50325033.peach-health-loading-track {5034  width: 200px;5035  height: 3px;5036  margin-top: 6px;5037  border-radius: 999px;5038  background: rgba(240, 232, 216, 0.06);5039  overflow: hidden;5040}50415042.peach-health-loading-fill {5043  width: 40%;5044  height: 100%;5045  border-radius: inherit;5046  background: linear-gradient(5047    90deg,5048    transparent 0%,5049    var(--peach-accent) 50%,5050    transparent 100%5051  );5052  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;5053}50545055@keyframes peach-health-loading-sweep {5056  0%   { transform: translateX(-100%); }5057  100% { transform: translateX(350%); }5058}50595060[data-motion="reduce"] .peach-health-loading-fill,5061[data-motion="reduce"] .peach-health-loading-glyph svg path {5062  animation: none;5063}50645065.peach-health-summary {5066  padding: 10px 16px 6px;5067  font-family: "IBM Plex Mono", monospace;5068  font-size: 0.6875rem;5069}5070.peach-health-summary-warn { color: rgba(220,80,60,0.9); }5071.peach-health-summary-ok { color: var(--peach-t2); }50725073.peach-health-check-row {5074  padding: 0 16px 10px;5075}5076.peach-health-check-btn {5077  width: 100%;5078  display: flex;5079  align-items: center;5080  justify-content: center;5081}50825083.peach-health-sections {5084  flex: 1;5085  display: flex;5086  flex-direction: column;5087}50885089.peach-health-section {5090  border-bottom: 1px solid var(--peach-t3);5091}50925093.peach-health-section-header {5094  width: 100%;5095  display: flex;5096  align-items: center;5097  justify-content: space-between;5098  padding: 9px 16px;5099  background: transparent;5100  cursor: pointer;5101  color: var(--peach-t0);5102}51035104.peach-health-section-title-row {5105  display: flex;5106  align-items: center;5107  gap: 8px;5108}51095110.peach-health-count-badge {5111  display: inline-flex;5112  align-items: center;5113  justify-content: center;5114  min-width: 20px;5115  height: 18px;5116  padding: 0 5px;5117  border-radius: 999px;5118  background: rgba(220,80,60,0.15);5119  border: 1px solid rgba(220,80,60,0.25);5120  font-family: "IBM Plex Mono", monospace;5121  font-size: 0.5625rem;5122  color: rgba(220,80,60,0.9);5123}51245125.peach-health-section-title {5126  font-family: "IBM Plex Mono", monospace;5127  font-size: 0.6875rem;5128  text-transform: uppercase;5129  letter-spacing: 0.1em;5130  color: var(--peach-t1);5131}51325133.peach-health-chevron {5134  color: var(--peach-t2);5135  transition: transform 200ms ease;5136  flex-shrink: 0;5137}5138.peach-health-chevron.is-expanded {5139  transform: rotate(180deg);5140}51415142.peach-health-section-body {5143  padding: 0 16px 10px;5144  display: flex;5145  flex-direction: column;5146  gap: 4px;5147}51485149.peach-health-row {5150  display: flex;5151  align-items: flex-start;5152  justify-content: space-between;5153  gap: 8px;5154  padding: 6px 8px;5155  border-radius: 8px;5156  background: rgba(240,232,216,0.02);5157}51585159.peach-health-row-info {5160  flex: 1;5161  min-width: 0;5162  display: flex;5163  flex-direction: column;5164  gap: 2px;5165}51665167.peach-health-row-name {5168  font-family: var(--font-display);5169  font-size: 0.9375rem;5170  font-style: italic;5171  font-weight: 400;5172  color: var(--peach-t0);5173  white-space: nowrap;5174  overflow: hidden;5175  text-overflow: ellipsis;5176}51775178.peach-health-row-meta {5179  font-family: "IBM Plex Mono", monospace;5180  font-size: 0.5625rem;5181  color: var(--peach-t2);5182  letter-spacing: 0.05em;5183}51845185.peach-health-fix-btn {5186  font-size: 0.5625rem;5187  letter-spacing: 0.08em;5188  text-transform: uppercase;5189  padding: 4px 7px;5190  flex-shrink: 0;5191  display: flex;5192  align-items: center;5193}51945195.peach-health-empty {5196  font-family: "IBM Plex Mono", monospace;5197  font-size: 0.625rem;5198  color: var(--peach-t2);5199  padding: 6px 0;5200}52015202.peach-health-loading {5203  font-family: "IBM Plex Mono", monospace;5204  font-size: 0.625rem;5205  color: var(--peach-t2);5206  padding: 6px 0;5207  display: flex;5208  align-items: center;5209  gap: 6px;5210}52115212.peach-health-loading::before {5213  content: "";5214  width: 10px;5215  height: 10px;5216  border: 1.5px solid var(--peach-t3);5217  border-top-color: var(--peach-accent);5218  border-radius: 50%;5219  animation: peach-spin 600ms linear infinite;5220}52215222@keyframes peach-spin {5223  to { transform: rotate(360deg); }5224}52255226.peach-spinner {5227  width: 32px;5228  height: 32px;5229  border: 2px solid var(--peach-s2);5230  border-top-color: var(--peach-accent);5231  border-radius: 50%;5232  margin: 0 auto 16px;5233  animation: peach-spin 0.8s linear infinite;5234}52355236.peach-progress-screen {5237  text-align: center;5238  padding: 32px 16px;5239}52405241.peach-progress-screen-title {5242  font-size: 0.8125rem;5243  color: var(--peach-t0);5244  margin-bottom: 16px;5245}52465247.peach-progress-screen-stage {5248  font-size: 0.6875rem;5249  color: var(--peach-t2);5250  min-height: 14px;5251}52525253.peach-progress-screen-note {5254  font-size: 0.625rem;5255  color: var(--peach-t2);5256  margin-top: 8px;5257}52585259/* Tag chips */5260.peach-tag-chip {5261  display: inline-flex;5262  align-items: center;5263  gap: 4px;5264  padding: 3px 8px;5265  border-radius: 999px;5266  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5267  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5268  color: var(--peach-t0);5269  font-family: "IBM Plex Mono", monospace;5270  font-size: 0.625rem;5271  letter-spacing: 0.04em;5272}52735274.peach-tag-chip-remove {5275  background: transparent;5276  border: none;5277  color: inherit;5278  opacity: 0.6;5279  cursor: pointer;5280  padding: 0;5281  font-size: 0.75rem;5282  line-height: 1;5283}52845285.peach-tag-chip-remove:hover {5286  opacity: 1;5287}52885289/* Tag input */5290.peach-tag-input-wrap {5291  border-bottom: 1px solid var(--peach-t3);5292}52935294.peach-tag-suggestions {5295  display: flex;5296  flex-wrap: wrap;5297  gap: 4px;5298  padding: 6px 0;5299}53005301.peach-tag-suggestion {5302  padding: 2px 8px;5303  border-radius: 999px;5304  border: 1px solid var(--peach-t3);5305  background: var(--peach-s2);5306  color: var(--peach-t1);5307  font-family: "IBM Plex Mono", monospace;5308  font-size: 0.625rem;5309  cursor: pointer;5310  transition: border-color 80ms ease, background 80ms ease;5311}53125313.peach-tag-suggestion:hover {5314  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5315  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5316}53175318/* Identity suggestions — shown below username/email inputs in new-entry form */5319@keyframes peach-suggest-in {5320  from { opacity: 0; transform: translateY(-4px); }5321  to   { opacity: 1; transform: none; }5322}53235324.peach-identity-suggestions {5325  display: flex;5326  flex-direction: column;5327  gap: 1px;5328  margin-top: 4px;5329  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5330}53315332.peach-identity-filter-row {5333  display: flex;5334  align-items: center;5335  gap: 4px;5336  padding: 2px 0 5px;5337}53385339.peach-identity-collapse-btn {5340  margin-left: auto;5341  background: transparent;5342  border: none;5343  cursor: pointer;5344  color: var(--peach-t3);5345  padding: 2px 4px;5346  display: flex;5347  align-items: center;5348  line-height: 0;5349  border-radius: 3px;5350  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5351}53525353.peach-identity-collapse-btn:hover {5354  color: var(--peach-t1);5355}53565357.peach-identity-collapse-btn.is-collapsed {5358  transform: rotate(-90deg);5359}53605361.peach-identity-rows {5362  display: grid;5363  grid-template-rows: 1fr;5364  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5365}53665367.peach-identity-rows.is-collapsed {5368  grid-template-rows: 0fr;5369}53705371.peach-identity-rows-inner {5372  overflow-y: auto;5373  min-height: 0;5374  max-height: 148px;5375  scrollbar-width: thin;5376  scrollbar-color: var(--peach-t3) transparent;5377  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5378  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5379}53805381.peach-identity-rows-inner::-webkit-scrollbar {5382  width: 4px;5383}53845385.peach-identity-rows-inner::-webkit-scrollbar-track {5386  background: transparent;5387}53885389.peach-identity-rows-inner::-webkit-scrollbar-thumb {5390  background: var(--peach-t3);5391  border-radius: 2px;5392}53935394.peach-identity-filter-pill {5395  padding: 2px 7px;5396  border-radius: 999px;5397  border: 1px solid var(--peach-t3);5398  background: transparent;5399  color: var(--peach-t2);5400  font-family: "IBM Plex Mono", monospace;5401  font-size: 0.6rem;5402  cursor: pointer;5403  transition: border-color 80ms, background 80ms, color 80ms;5404}54055406.peach-identity-filter-pill.is-on {5407  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5408  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5409  color: var(--peach-accent);5410}54115412.peach-identity-suggestion {5413  display: flex;5414  align-items: center;5415  gap: 6px;5416  width: 100%;5417  padding: 4px 6px;5418  border-radius: 5px;5419  border: none;5420  background: transparent;5421  cursor: pointer;5422  text-align: left;5423  transition: background 80ms ease;5424}54255426.peach-identity-suggestion:hover,5427.peach-identity-suggestion:focus {5428  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5429  outline: none;5430}54315432.peach-identity-suggestion-value {5433  font-family: "IBM Plex Mono", monospace;5434  font-size: 0.7rem;5435  color: var(--peach-t1);5436  overflow: hidden;5437  text-overflow: ellipsis;5438  white-space: nowrap;5439  flex: 1;5440  min-width: 0;5441}54425443.peach-identity-suggestion-type {5444  font-family: "IBM Plex Mono", monospace;5445  font-size: 0.55rem;5446  font-weight: 600;5447  flex-shrink: 0;5448  padding: 1px 4px;5449  border-radius: 3px;5450}54515452.peach-identity-suggestion-type--email {5453  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5454  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5455}54565457.peach-identity-suggestion-type--username {5458  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5459  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5460}54615462.peach-identity-suggestion-meta {5463  font-family: "IBM Plex Mono", monospace;5464  font-size: 0.6rem;5465  color: var(--peach-t3);5466  flex-shrink: 0;5467}54685469/* Tag filter strip */5470.peach-tag-filter-strip {5471  border-bottom: 1px solid var(--peach-t3);5472  flex-shrink: 0;5473}54745475.peach-tag-filter-chip {5476  display: inline-flex;5477  align-items: center;5478  padding: 4px 10px;5479  border-radius: 999px;5480  border: 1px solid var(--peach-t3);5481  background: transparent;5482  color: var(--peach-t2);5483  font-family: "IBM Plex Mono", monospace;5484  font-size: 0.5625rem;5485  letter-spacing: 0.06em;5486  text-transform: uppercase;5487  cursor: pointer;5488  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5489  white-space: nowrap;5490}54915492.peach-tag-filter-chip:hover {5493  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5494  color: var(--peach-t1);5495}54965497.peach-tag-filter-chip.is-selected {5498  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5499  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5500  color: var(--peach-t0);5501}55025503/* ─────────────────────────────────────────────────────────────────────────5504   v1.4.12 additions5505   ─────────────────────────────────────────────────────────────────────── */55065507/* Sort bar */5508.peach-sort-bar {5509  display: flex;5510  align-items: center;5511  gap: 4px;5512  padding: 5px 12px;5513  border-bottom: 1px solid var(--peach-t3);5514  flex-shrink: 0;5515  overflow-x: auto;5516  scrollbar-width: none;5517}55185519.peach-sort-btn {5520  padding: 2px 9px;5521  border-radius: 999px;5522  border: 1px solid transparent;5523  background: transparent;5524  color: var(--peach-t2);5525  font-family: "IBM Plex Mono", monospace;5526  font-size: 0.5625rem;5527  letter-spacing: 0.07em;5528  text-transform: uppercase;5529  cursor: pointer;5530  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5531  white-space: nowrap;5532}55335534.peach-sort-btn:hover {5535  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5536  color: var(--peach-t1);5537}55385539.peach-sort-btn.is-active {5540  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5541  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5542  color: var(--peach-t0);5543}55445545.peach-sort-scope-btn {5546  padding-inline: 8px;5547  font-size: 0.53125rem;5548  letter-spacing: 0.05em;5549}55505551.peach-sort-domain-hint {5552  margin-left: auto;5553  font-family: "IBM Plex Mono", monospace;5554  font-size: 0.5625rem;5555  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5556  white-space: nowrap;5557  overflow: hidden;5558  text-overflow: ellipsis;5559  max-width: 110px;5560}55615562/* Tab-match badge on entry rows */5563.peach-tab-match-badge {5564  display: inline-block;5565  width: 6px;5566  height: 6px;5567  border-radius: 50%;5568  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5569  margin-left: 5px;5570  vertical-align: middle;5571  flex-shrink: 0;5572  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5573}55745575.peach-entry-row.is-tab-match {5576  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5577  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5578}55795580.peach-entry-row.is-tab-match:hover {5581  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5582}55835584/* Entry list stagger entrance */5585@keyframes peach-entry-fadein {5586  from { opacity: 0; transform: translateY(4px); }5587  to   { opacity: 1; transform: translateY(0); }5588}55895590.peach-vault-list .peach-entry-row {5591  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5592}55935594/* Button press micro-interaction */5595.peach-btn:active {5596  transform: scale(0.95);5597  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5598}55995600.peach-sort-btn:active,5601.peach-tag-filter-chip:active {5602  transform: scale(0.93);5603  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5604}56055606/* Password strength bar (Lock view + shared) */5607.peach-password-strength {5608  display: flex;5609  align-items: center;5610  gap: 8px;5611  margin-top: 6px;5612}56135614.peach-strength-bar {5615  flex: 1;5616  height: 3px;5617  border-radius: 2px;5618  background: var(--peach-t3);5619  overflow: hidden;5620}56215622.peach-strength-fill {5623  height: 100%;5624  border-radius: 2px;5625  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5626              background 300ms ease;5627}56285629.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5630.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5631.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5632.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }56335634.peach-strength-label {5635  font-family: "IBM Plex Mono", monospace;5636  font-style: italic;5637  font-size: 0.5625rem;5638  font-weight: 300;5639  letter-spacing: 0.06em;5640  color: var(--peach-t2);5641  min-width: 36px;5642  text-align: right;5643}56445645.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5646.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5647.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5648.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }56495650/* Duress form */5651.peach-duress-status {5652  padding: 2px 8px;5653  border-radius: 999px;5654  border: 1px solid var(--peach-t3);5655  font-family: "IBM Plex Mono", monospace;5656  font-size: 0.5625rem;5657  letter-spacing: 0.07em;5658  text-transform: uppercase;5659  color: var(--peach-t2);5660  flex-shrink: 0;5661}56625663.peach-duress-status.is-active {5664  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5665  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5666  color: var(--peach-t0);5667}56685669.peach-duress-form {5670  padding: 8px 0 4px;5671  display: flex;5672  flex-direction: column;5673  gap: 6px;5674}56755676.peach-duress-form .peach-label {5677  margin-top: 4px;5678}56795680.peach-duress-actions {5681  display: flex;5682  gap: 6px;5683  align-items: center;5684  margin-top: 4px;5685}56865687.peach-duress-actions .peach-btn:first-child {5688  margin-right: auto;5689}56905691/* Improved overlay spring entrance */5692.peach-overlay-view.ov-enter-up {5693  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5694}56955696@keyframes ov-enter-up-spring {5697  from { opacity: 0; transform: translateY(16px) scale(0.98); }5698  to   { opacity: 1; transform: translateY(0) scale(1); }5699}57005701.peach-overlay-view.ov-enter-right {5702  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5703}57045705@keyframes ov-enter-right-spring {5706  from { opacity: 0; transform: translateX(18px) scale(0.98); }5707  to   { opacity: 1; transform: translateX(0) scale(1); }5708}57095710/* ── Onboarding-mode restore screens (file import) ── */5711/* Used when MainImportView renders during onboarding (no vault yet).5712   Animates like a lock-screen transition. */5713.peach-lock-view {5714  position: absolute;5715  inset: 0;5716  display: flex;5717  flex-direction: column;5718  background:5719    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5720    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5721    var(--peach-bg);5722  z-index: 2;5723  overflow: hidden;5724  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5725}57265727.peach-lock-view-header {5728  display: flex;5729  align-items: center;5730  justify-content: space-between;5731  padding: 16px 18px 12px;5732  flex-shrink: 0;5733}57345735/* ───────── Settings: auto-lock select ───────── */5736.peach-settings-select {5737  font-family: "IBM Plex Mono", monospace;5738  font-size: 0.6875rem;5739  background: transparent;5740  border: 1px solid var(--peach-t3);5741  border-radius: 4px;5742  color: var(--peach-t1);5743  padding: 3px 6px;5744  cursor: pointer;5745  outline: none;5746}5747.peach-settings-select:focus {5748  border-color: var(--peach-accent);5749}57505751/* ───────── Duress status pill (new polished) ───────── */5752.peach-duress-status-pill {5753  font-family: "IBM Plex Mono", monospace;5754  font-size: 0.5625rem;5755  text-transform: uppercase;5756  letter-spacing: 0.12em;5757  padding: 2px 8px;5758  border-radius: 12px;5759  background: var(--peach-t3);5760  color: var(--peach-t2);5761  flex-shrink: 0;5762}5763.peach-duress-status-pill.is-active {5764  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5765  color: var(--peach-accent);5766}57675768/* ───────── Entry advanced disclosure (canary) ───────── */5769.peach-entry-advanced {5770  margin-top: 12px;5771  border-top: 1px solid var(--peach-t3);5772  padding-top: 10px;5773  position: relative;5774  z-index: 1;5775}5776.peach-entry-advanced-toggle {5777  display: flex;5778  align-items: center;5779  justify-content: space-between;5780  width: 100%;5781  background: transparent;5782  border: none;5783  cursor: pointer;5784  padding: 0;5785  color: var(--peach-t2);5786}5787.peach-canary-section {5788  margin-top: 10px;5789  display: grid;5790  gap: 6px;5791}57925793/* ───────── Import: merge/replace radio choices ───────── */5794.peach-import-choice {5795  display: flex;5796  align-items: flex-start;5797  gap: 10px;5798  padding: 8px 10px;5799  border: 1px solid var(--peach-t3);5800  border-radius: 10px;5801  cursor: pointer;5802  margin-bottom: 6px;5803  transition: border-color 120ms ease, background 120ms ease;5804}5805.peach-import-choice:hover {5806  border-color: var(--peach-accent);5807}5808.peach-import-choice input[type="radio"] {5809  margin-top: 3px;5810  accent-color: var(--peach-accent);5811  flex-shrink: 0;5812}5813.peach-import-choice-main {5814  display: flex;5815  flex-direction: column;5816  gap: 2px;5817  min-width: 0;5818}5819.peach-import-choice-label {5820  font-size: 0.75rem;5821  color: var(--peach-t0);5822}5823.peach-import-choice-sub {5824  font-size: 0.6875rem;5825  color: var(--peach-t2);5826  line-height: 1.5;5827}58285829/* ───────── Export: success confirmation strip ───────── */5830.peach-export-success {5831  display: flex;5832  align-items: flex-start;5833  gap: 10px;5834  padding: 12px;5835  border-radius: 12px;5836  border: 1px solid rgba(150, 175, 110, 0.3);5837  background: rgba(150, 175, 110, 0.08);5838  color: var(--peach-t0);5839  font-size: 0.75rem;5840  line-height: 1.55;5841}5842.peach-export-success-check {5843  color: rgba(150, 175, 110, 0.9);5844  font-size: 0.875rem;5845  flex-shrink: 0;5846}58475848/* ── Trash view ──────────────────────────────────────────────────────── */5849.peach-trash-entry-row {5850  display: flex;5851  align-items: center;5852  justify-content: space-between;5853  gap: 8px;5854  padding: 8px 0;5855  border-bottom: 1px solid var(--peach-border);5856}5857.peach-trash-entry-info {5858  flex: 1;5859  min-width: 0;5860  display: flex;5861  flex-direction: column;5862  gap: 2px;5863}5864.peach-trash-entry-title {5865  font-size: 0.8125rem;5866  color: var(--peach-t0);5867  overflow: hidden;5868  text-overflow: ellipsis;5869  white-space: nowrap;5870}5871.peach-trash-entry-meta {5872  font-family: var(--font-mono);5873  font-size: 0.5625rem;5874  color: var(--peach-t2);5875  letter-spacing: 0.04em;5876}5877.peach-trash-entry-actions {5878  display: flex;5879  align-items: center;5880  gap: 4px;5881  flex-shrink: 0;5882}5883.peach-trash-delete-btn {5884  background: transparent;5885  border: 0;5886  color: var(--peach-t3);5887  font-size: 1rem;5888  line-height: 1;5889  cursor: pointer;5890  padding: 2px 5px;5891  transition: color 0.15s;5892}5893.peach-trash-delete-btn:hover { color: var(--peach-breach); }5894.peach-trash-list {5895  overflow-y: auto;5896}5897.peach-trash-footer {5898  display: flex;5899  align-items: center;5900  gap: 8px;5901  padding: 8px 0 0;5902  border-top: 1px solid var(--peach-border);5903  margin-top: 4px;5904}5905.peach-trash-purge-all {5906  background: transparent;5907  border: 0;5908  color: var(--peach-t3);5909  font-size: 0.625rem;5910  cursor: pointer;5911  padding: 4px 0;5912  letter-spacing: 0.03em;5913  transition: color 0.2s;5914}5915.peach-trash-purge-all:hover { color: var(--peach-breach); }5916.peach-trash-purge-confirm-label {5917  font-size: 0.625rem;5918  color: var(--peach-t1);5919  flex: 1;5920}59215922/* ── Settings shortcuts grid ─────────────────────────────────────────── */5923.peach-shortcuts-grid {5924  display: grid;5925  grid-template-columns: auto 1fr;5926  gap: 6px 12px;5927  align-items: center;5928  padding: 4px 0;5929}5930.peach-shortcut-key {5931  font-family: var(--font-mono);5932  font-size: 0.625rem;5933  color: var(--peach-t0);5934  background: var(--peach-t3);5935  border-radius: 4px;5936  padding: 2px 6px;5937  white-space: nowrap;5938  text-align: center;5939}5940.peach-shortcut-desc {5941  font-size: 0.6875rem;5942  color: var(--peach-t1);5943}59445945/* ── Sort bar trash button ───────────────────────────────────────────── */5946.peach-sort-trash-btn {5947  display: flex;5948  align-items: center;5949  justify-content: center;5950  padding: 3px 5px;5951  background: transparent;5952  border: none;5953  cursor: pointer;5954  color: var(--peach-t2);5955  border-radius: 4px;5956  transition: color 140ms ease, background 140ms ease;5957}5958.peach-sort-trash-btn:hover {5959  color: var(--peach-t1);5960  background: var(--peach-t3);5961}5962.peach-sort-trash-btn.is-active {5963  color: var(--peach-accent);5964}59655966/* Accent color picker */5967.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5968.peach-accent-picker {5969  display: flex;5970  flex-wrap: wrap;5971  gap: 7px;5972  padding: 2px 0;5973}5974.peach-accent-swatch {5975  width: 22px;5976  height: 22px;5977  border-radius: 50%;5978  border: 2px solid transparent;5979  cursor: pointer;5980  padding: 0;5981  transition: transform 100ms;5982  outline-offset: 2px;5983}5984.peach-accent-swatch:hover { transform: scale(1.15); }5985.peach-accent-swatch.is-active {5986  border-color: var(--peach-t0);5987  transform: scale(1.1);5988}59895990.peach-pill-group {5991  display: flex;5992  gap: 6px;5993}5994.peach-pill-group .peach-btn.is-active {5995  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5996  border-color: var(--peach-accent);5997  color: var(--peach-t0);5998}59996000/* ── Card entry styles ───────────────────────────────────────── */6001.peach-card-number {6002  font-family: var(--peach-mono);6003  letter-spacing: 0.08em;6004}60056006.peach-card-network-badge {6007  font-size: 0.625rem;6008  padding: 1px 5px;6009  border-radius: 4px;6010  border: 0.5px solid var(--peach-border);6011  color: var(--peach-text-dim);6012  margin-left: 6px;6013  vertical-align: middle;6014}60156016.peach-card-expiry-row {6017  display: flex;6018  align-items: center;6019  gap: 8px;6020}60216022.peach-card-expiry-sep {6023  color: var(--peach-text-dim);6024}60256026/* ── Pro tier — upgrade screen ──────────────────────────────── */6027.peach-pro-mark {6028  font-size: 0.5625rem;6029  color: var(--peach-accent);6030  margin-left: 6px;6031  vertical-align: super;6032  opacity: 0.7;6033}60346035.peach-pro-mini-badge {6036  display: block;6037  font-size: 0.625rem;6038  font-style: italic;6039  color: var(--peach-accent);6040  letter-spacing: 0.04em;6041  margin-top: -2px;6042  padding-left: 2px;6043  opacity: 0.85;6044  text-align: center;6045}60466047.peach-wordmark-stack {6048  display: inline-flex;6049  flex-direction: column;6050  align-items: center;6051}60526053/* ── Pro tier — upgrade page ─────────────────────────────────── */6054/* ── Pro upgrade — redesigned editorial layout ─────────────────── */60556056.peach-pro-upgrade {6057  display: flex;6058  flex-direction: column;6059  align-items: stretch;6060  gap: 10px;6061  padding: 2px 2px 12px;6062}60636064.peach-pro-eyebrow {6065  margin: 0;6066  font-family: var(--font-ui);6067  font-size: 0.625rem;6068  font-weight: 500;6069  letter-spacing: 0.12em;6070  color: var(--peach-accent);6071}60726073.peach-pro-headline {6074  margin: 0;6075  font-family: var(--font-display, "Cormorant Garamond", serif);6076  font-size: 30px;6077  font-weight: 700;6078  font-style: normal;6079  line-height: 1.05;6080  color: var(--peach-t0);6081  letter-spacing: -0.01em;6082}6083.peach-pro-headline em {6084  font-style: italic;6085  font-weight: 400;6086  color: var(--peach-accent);6087}60886089.peach-pro-subtitle {6090  margin: 0;6091  font-size: 0.6875rem;6092  line-height: 1.5;6093  color: var(--peach-t1);6094}60956096/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6097.peach-pro-section-label {6098  margin: 6px 0 0;6099  font-family: var(--font-ui);6100  font-size: 0.5625rem;6101  font-weight: 500;6102  letter-spacing: 0.12em;6103  text-transform: uppercase;6104  color: var(--peach-t2);6105}61066107/* 2-column numbered feature grid */6108.peach-pro-grid {6109  display: grid;6110  grid-template-columns: 1fr 1fr;6111  border-top: 1px solid var(--peach-border);6112  border-left: 1px solid var(--peach-border);6113}61146115.peach-pro-grid-item {6116  display: flex;6117  flex-direction: column;6118  gap: 2px;6119  padding: 8px 9px;6120  border-right: 1px solid var(--peach-border);6121  border-bottom: 1px solid var(--peach-border);6122}61236124.peach-pro-grid-item--wide {6125  grid-column: 1 / -1;6126}61276128.peach-pro-grid-num {6129  font-family: var(--font-mono);6130  font-size: 0.5625rem;6131  color: var(--peach-accent);6132  letter-spacing: 0.06em;6133  opacity: 0.85;6134}61356136.peach-pro-grid-name {6137  font-size: 0.8125rem;6138  font-weight: 500;6139  color: var(--peach-t0);6140  line-height: 1.2;6141}61426143.peach-pro-grid-desc {6144  font-size: 0.625rem;6145  color: var(--peach-t1);6146  line-height: 1.4;6147}61486149.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6150  animation: peach-pulse-accent 600ms ease-out forwards;6151}61526153@keyframes peach-pulse-accent {6154  0%   { opacity: 1; transform: scale(1.2); }6155  100% { opacity: 0.85; transform: scale(1); }6156}61576158/* Actions */6159.peach-pro-upgrade-actions {6160  display: flex;6161  flex-direction: column;6162  align-items: stretch;6163  gap: 10px;6164}61656166.peach-pro-pricing {6167  margin: 0;6168  font-size: 1rem;6169  font-weight: 600;6170  color: var(--peach-t0);6171  letter-spacing: 0.01em;6172}6173.peach-pro-pricing-sub {6174  font-size: 0.75rem;6175  font-weight: 400;6176  color: var(--peach-t1);6177  letter-spacing: 0.02em;6178}61796180.peach-pro-upgrade-cta {6181  display: flex;6182  align-items: center;6183  justify-content: center;6184  text-decoration: none;6185  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6186  border: 1px solid var(--peach-accent);6187  border-radius: 10px;6188  color: var(--peach-accent);6189  font-family: var(--font-ui);6190  font-size: 0.8125rem;6191  font-weight: 600;6192  letter-spacing: 0.06em;6193  padding: 11px 16px;6194  transition: background 0.15s ease, color 0.15s ease;6195}6196.peach-pro-upgrade-cta:hover {6197  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6198}61996200.peach-pro-key-divider {6201  display: flex;6202  align-items: center;6203  gap: 8px;6204  color: var(--peach-t2);6205  font-size: 0.5625rem;6206  letter-spacing: 0.1em;6207}6208.peach-pro-key-divider::before,6209.peach-pro-key-divider::after {6210  content: "";6211  flex: 1;6212  height: 1px;6213  background: var(--peach-border);6214}62156216/* Inline key entry row */6217.peach-pro-key-inline {6218  display: flex;6219  align-items: center;6220  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6221  border: 1px solid var(--peach-border);6222  border-radius: 8px;6223  overflow: hidden;6224}6225.peach-pro-key-inline-input {6226  flex: 1;6227  background: transparent;6228  border: none;6229  outline: none;6230  color: var(--peach-t1);6231  font-family: var(--font-mono);6232  font-size: 0.625rem;6233  letter-spacing: 0.06em;6234  padding: 9px 10px;6235}6236.peach-pro-key-inline-input::placeholder {6237  color: var(--peach-t2);6238}6239.peach-pro-key-apply {6240  background: transparent;6241  border: none;6242  border-left: 1px solid var(--peach-border);6243  color: var(--peach-t2);6244  font-family: var(--font-ui);6245  font-size: 0.5625rem;6246  font-weight: 600;6247  letter-spacing: 0.08em;6248  padding: 9px 10px;6249  cursor: pointer;6250  transition: color 0.15s ease;6251  flex-shrink: 0;6252}6253.peach-pro-key-apply:not(:disabled):hover {6254  color: var(--peach-accent);6255}6256.peach-pro-key-apply:disabled {6257  opacity: 0.35;6258  cursor: not-allowed;6259}62606261/* ── Pro tier — key ceremony ─────────────────────────────────── */6262.peach-pro-key-ceremony {6263  display: flex;6264  flex-direction: column;6265  align-items: center;6266  gap: 12px;6267  padding: 20px 4px 16px;6268}62696270.peach-pro-key-ceremony .peach-lock-rune-string {6271  font-size: 1rem;6272  gap: 12px;6273  flex: 0;6274  justify-content: center;6275}62766277.peach-pro-key-ceremony-label {6278  margin: 0;6279  font-size: 0.6875rem;6280  color: var(--peach-t2);6281  font-style: italic;6282  letter-spacing: 0.04em;6283}62846285.peach-pro-key-input {6286  font-family: var(--font-mono, monospace);6287  letter-spacing: 0.06em;6288  text-align: center;6289  width: 100%;6290  box-sizing: border-box;6291}62926293.peach-pro-key-error {6294  margin: 0;6295  font-size: 0.75rem;6296  text-align: center;6297  color: var(--peach-breach, #e55);6298  padding: 0;6299}63006301.peach-pro-key-activate {6302  width: 100%;6303  text-align: center;6304  box-sizing: border-box;6305  padding: 10px 20px;6306  font-size: 0.8125rem;6307}63086309.peach-pro-key-cancel {6310  background: transparent;6311  border: 0;6312  color: var(--peach-t2);6313  font-size: 0.6875rem;6314  cursor: pointer;6315  padding: 2px 8px;6316  transition: color 0.2s;6317}63186319.peach-pro-key-cancel:hover { color: var(--peach-accent); }63206321/* ── Pro tier — active state ─────────────────────────────────── */6322.peach-pro-active {6323  display: flex;6324  flex-direction: column;6325  align-items: center;6326  gap: 0;6327  padding: 8px 4px 16px;6328  min-height: 280px;6329}63306331.peach-pro-active-hero {6332  display: flex;6333  flex-direction: column;6334  align-items: center;6335  gap: 6px;6336  padding: 20px 0 8px;6337}63386339.peach-pro-active-mark-wrap {6340  display: flex;6341  align-items: center;6342  justify-content: center;6343  margin-bottom: 4px;6344}63456346.peach-pro-active-mark {6347  width: 60px;6348  height: 60px;6349}63506351.peach-pro-active-title {6352  font-family: var(--font-display, var(--font-ui));6353  font-size: 26px;6354  margin: 0;6355  color: var(--peach-t0);6356  letter-spacing: 0.01em;6357}63586359.peach-pro-active-since {6360  margin: 0;6361  font-size: 0.6875rem;6362  color: var(--peach-t2);6363  font-style: italic;6364}63656366.peach-pro-active-features {6367  display: flex;6368  flex-direction: column;6369  gap: 8px;6370  width: 100%;6371  padding: 14px 8px 0;6372  border-top: 1px solid var(--peach-border);6373  flex: 1;6374}63756376.peach-pro-active-feature {6377  display: flex;6378  align-items: center;6379  gap: 9px;6380}63816382.peach-pro-active-feature-mark {6383  color: var(--peach-accent);6384  font-size: 0.625rem;6385  opacity: 0.65;6386  flex-shrink: 0;6387}63886389.peach-pro-active-feature-name {6390  font-size: 0.75rem;6391  color: var(--peach-t1);6392}63936394.peach-pro-deactivate {6395  align-self: center;6396  background: transparent;6397  border: 0;6398  color: var(--peach-t3);6399  font-size: 0.625rem;6400  cursor: pointer;6401  padding: 8px 0 0;6402  margin-top: 16px;6403  letter-spacing: 0.03em;6404  transition: color 0.2s;6405}64066407.peach-pro-deactivate:hover { color: var(--peach-t2); }64086409.peach-pro-deactivate:disabled {6410  opacity: 0.5;6411  cursor: default;6412}64136414/* ── Pro card activation sparkles & thank-you ── */6415button.peach-pro-active-mark-wrap {6416  background: transparent;6417  border: 0;6418  padding: 0;6419  cursor: pointer;6420  position: relative;6421  overflow: visible;6422}64236424.peach-pro-sparks {6425  position: absolute;6426  inset: 0;6427  pointer-events: none;6428  overflow: visible;6429}64306431.peach-pro-spark {6432  position: absolute;6433  top: 50%;6434  left: 50%;6435  font-size: 9px;6436  line-height: 1;6437  opacity: 0;6438  transform: translate(-50%, -50%);6439  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;6440}64416442@keyframes peach-pro-spark-fly {6443  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }6444  25%  { opacity: 1; }6445  100% {6446    opacity: 0;6447    transform: translate(6448      calc(-50% + var(--spark-x, 0px)),6449      calc(-50% + var(--spark-y, -40px))6450    ) scale(0.8);6451  }6452}64536454.peach-pro-thankyou-text {6455  margin: 4px 0 0;6456  font-size: 0.6875rem;6457  font-style: italic;6458  color: currentColor;6459  opacity: 0;6460  animation: peach-pro-thankyou-flash 2.5s ease both;6461}64626463@keyframes peach-pro-thankyou-flash {6464  0%   { opacity: 0; transform: translateY(4px); }6465  15%  { opacity: 0.75; transform: translateY(0); }6466  75%  { opacity: 0.75; }6467  100% { opacity: 0; }6468}64696470/* ── Pro advanced health remediation queue ──────────────────── */6471.peach-health-pro-queue {6472  display: flex;6473  flex-direction: column;6474  gap: 10px;6475  padding: 12px;6476  margin: 0 0 12px;6477  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6478  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6479  border-radius: 10px;6480}64816482.peach-health-pro-queue-head {6483  display: flex;6484  justify-content: space-between;6485  align-items: baseline;6486}64876488.peach-health-pro-queue-title {6489  font-size: 0.75rem;6490  font-weight: 500;6491  letter-spacing: 0.04em;6492  text-transform: uppercase;6493  color: var(--peach-accent);6494}64956496.peach-health-pro-queue-score {6497  font-size: 0.6875rem;6498  color: var(--peach-t2);6499}65006501.peach-health-pro-row {6502  display: flex;6503  gap: 10px;6504  align-items: center;6505  padding: 8px 0;6506  border-top: 1px solid var(--peach-border);6507}65086509.peach-health-pro-row-info {6510  flex: 1;6511  display: flex;6512  flex-direction: column;6513  gap: 4px;6514  min-width: 0;6515}65166517.peach-health-pro-action {6518  flex: 0 0 auto;6519  padding: 4px 8px;6520  font-size: 0.5625rem;6521  letter-spacing: 0.08em;6522  text-transform: uppercase;6523}65246525.peach-health-pro-row-name {6526  font-size: 0.8125rem;6527  color: var(--peach-t0);6528  overflow: hidden;6529  text-overflow: ellipsis;6530  white-space: nowrap;6531}65326533.peach-health-pro-row-meta {6534  font-size: 0.6875rem;6535  color: var(--peach-t2);6536}65376538.peach-health-pro-bar {6539  height: 2px;6540  background: var(--peach-border);6541  border-radius: 2px;6542  overflow: hidden;6543  margin-top: 2px;6544}65456546.peach-health-pro-bar-fill {6547  height: 100%;6548  background: var(--peach-accent);6549  transition: width 200ms ease-out;6550}65516552/* ── Pro activation celebration ── */6553@keyframes peach-pro-bloom {6554  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6555  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6556                 drop-shadow(0 0 48px var(--peach-glow)); }6557  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6558}65596560@keyframes peach-pro-wordmark-in {6561  from { opacity: 0; transform: translateY(4px); }6562  to   { opacity: 1; transform: translateY(0); }6563}65646565@keyframes peach-pro-fade-out {6566  from { opacity: 1; }6567  to   { opacity: 0; }6568}65696570.peach-pro-celebration {6571  background:6572    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6573    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6574    var(--peach-bg);6575  border: 1px solid var(--peach-t3);6576  box-shadow:6577    0 2px 8px rgba(0,0,0,0.55),6578    0 14px 48px rgba(0,0,0,0.7),6579    0 0 0 1px rgba(240,232,216,0.04);6580  overflow: hidden;6581  width: 320px;6582  height: 520px;6583  display: flex;6584  flex-direction: column;6585  align-items: center;6586  justify-content: center;6587  gap: 8px;6588  padding: 32px 24px;6589  text-align: center;6590}65916592.peach-pro-celebration.is-leaving {6593  animation: peach-pro-fade-out 400ms ease forwards;6594}65956596.peach-pro-bloom-target {6597  display: flex;6598  align-items: center;6599  justify-content: center;6600  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6601  margin-bottom: 12px;6602}66036604.peach-pro-bloom-icon {6605  width: 48px;6606  height: 48px;6607}66086609.peach-pro-wordmark {6610  font-family: var(--font-display);6611  font-size: 22px;6612  font-style: italic;6613  font-weight: 400;6614  color: var(--peach-accent);6615  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6616}66176618.peach-pro-thankyou {6619  font-size: 0.75rem;6620  font-style: italic;6621  color: var(--peach-t2);6622  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6623}662466256626/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6627.peach-pro-notice-banner {6628  display: flex;6629  align-items: center;6630  gap: 8px;6631  padding: 7px 12px;6632  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6633  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6634  font-size: 0.6875rem;6635  color: var(--peach-t2);6636  font-family: "IBM Plex Mono", monospace;6637  flex-shrink: 0;6638}66396640.peach-pro-notice-link {6641  background: none;6642  border: none;6643  padding: 0;6644  cursor: pointer;6645  font-size: 0.6875rem;6646  color: var(--peach-accent);6647  font-family: "IBM Plex Mono", monospace;6648  margin-left: auto;6649  white-space: nowrap;6650}66516652.peach-pro-notice-close {6653  background: none;6654  border: none;6655  padding: 0 0 0 4px;6656  cursor: pointer;6657  font-size: 0.625rem;6658  color: var(--peach-t3);6659  line-height: 1;6660}66616662/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6663   Renders over whatever view is showing. 60-second expiry; the popup ticks6664   the countdown each second and clears the banner when it hits zero. */6665.peach-pair-request-banner {6666  display: flex;6667  flex-direction: column;6668  gap: 8px;6669  padding: 10px 12px;6670  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6671  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6672  font-family: "IBM Plex Mono", monospace;6673  flex-shrink: 0;6674}66756676.peach-pair-toast {6677  padding: 8px 12px;6678  font-family: "IBM Plex Mono", monospace;6679  font-size: 0.75rem;6680  color: var(--peach-t1);6681  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6682  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6683  flex-shrink: 0;6684  text-align: center;6685}66866687.peach-pair-toast strong {6688  color: var(--peach-t0);6689  font-weight: 500;6690}66916692.peach-pair-request-header {6693  display: flex;6694  align-items: center;6695  gap: 8px;6696  font-size: 0.75rem;6697  color: var(--peach-t1);6698}66996700.peach-pair-request-mark {6701  font-size: 0.875rem;6702  display: inline-flex;6703  align-items: center;6704}67056706.peach-pair-request-icon {6707  width: 1em;6708  height: 1em;6709}67106711.peach-pair-request-title {6712  font-weight: 600;6713  color: var(--peach-t0);6714}67156716.peach-pair-request-countdown {6717  margin-left: auto;6718  font-variant-numeric: tabular-nums;6719  color: var(--peach-t2);6720  font-size: 0.6875rem;6721}67226723.peach-pair-request-body {6724  margin: 0;6725  font-size: 0.75rem;6726  color: var(--peach-t1);6727  line-height: 1.4;6728}67296730.peach-pair-request-body strong {6731  color: var(--peach-t0);6732  font-weight: 600;6733}67346735.peach-pair-request-actions {6736  display: flex;6737  gap: 8px;6738  justify-content: flex-end;6739}67406741/* ─── First-run onboarding ──────────────────────────────────────────────6742   Three-card welcome shown once before vault creation. The PeachScript6743   rune background drifts behind everything at very low opacity — it's6744   atmosphere, not focus. The cards themselves use the same panel6745   language as the rest of the popup so the transition into NewVault is6746   continuous, not a jarring switch of visual register. */67476748.peach-onboarding {6749  position: relative;6750  display: flex;6751  flex-direction: column;6752  width: 100%;6753  height: 100%;6754  padding: 16px 16px 18px;6755  box-sizing: border-box;6756  overflow: hidden;6757  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6758}67596760.peach-onboarding.is-completing {6761  animation: peach-onboard-exit 200ms ease-out forwards;6762}67636764.peach-rune-background {6765  position: absolute;6766  inset: 0;6767  width: 100%;6768  height: 100%;6769  pointer-events: none;6770  z-index: 0;6771  transition: opacity 500ms ease-out;6772}67736774.peach-onboarding.is-completing .peach-rune-background {6775  opacity: 0;6776}67776778.peach-onboarding-header {6779  position: relative;6780  z-index: 1;6781  display: flex;6782  align-items: center;6783  margin-bottom: 14px;6784}67856786.peach-onboarding-card {6787  position: relative;6788  z-index: 1;6789  flex: 1;6790  display: flex;6791  flex-direction: column;6792  gap: 10px;6793  padding: 22px 20px;6794  border-radius: 16px;6795  border: 1px solid var(--peach-t3);6796  background:6797    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6798  backdrop-filter: blur(3px);6799  -webkit-backdrop-filter: blur(3px);6800  box-shadow:6801    inset 0 1px 0 rgba(240, 232, 216, 0.04),6802    0 12px 28px rgba(0, 0, 0, 0.12);6803  cursor: pointer;6804  user-select: none;6805  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6806}68076808.peach-onboarding-card.is-exiting {6809  animation: peach-card-out 120ms ease-in forwards;6810  pointer-events: none;6811}68126813.peach-onboarding-card-headline {6814  margin: 0;6815  font-family: var(--font-display);6816  font-style: italic;6817  font-weight: 400;6818  font-size: 22px;6819  line-height: 1.05;6820  color: var(--peach-t0);6821  white-space: pre-line;6822}68236824.peach-onboarding-divider {6825  margin: 4px 0 6px;6826  border: 0;6827  border-top: 1px solid var(--peach-t3);6828  width: 100%;6829}68306831.peach-onboarding-body {6832  margin: 0;6833  font-size: 0.8125rem;6834  line-height: 1.6;6835  color: var(--peach-t1);6836}68376838.peach-onboarding-warning {6839  display: flex;6840  align-items: flex-start;6841  gap: 8px;6842  margin: 6px 0 0;6843  padding-top: 8px;6844  border-top: 1px dashed var(--peach-t3);6845  font-size: 0.8125rem;6846  line-height: 1.5;6847  color: var(--peach-t1);6848}68496850.peach-onboarding-warning-icon {6851  color: var(--peach-accent);6852  font-size: 0.8125rem;6853  line-height: 1.5;6854  flex: 0 0 auto;6855}68566857.peach-onboarding-nav {6858  position: relative;6859  z-index: 1;6860  display: flex;6861  align-items: center;6862  justify-content: space-between;6863  margin-top: 12px;6864  padding: 0 4px;6865}68666867.peach-onboarding-dots {6868  display: flex;6869  align-items: center;6870  gap: 6px;6871}68726873.peach-onboarding-dot {6874  width: 6px;6875  height: 6px;6876  border-radius: 50%;6877  background: var(--peach-t2);6878  transition: width 200ms ease, height 200ms ease, background 200ms ease;6879}68806881.peach-onboarding-dot.is-active {6882  width: 8px;6883  height: 8px;6884  background: var(--peach-accent);6885}68866887.peach-onboarding-next {6888  background: none;6889  border: none;6890  padding: 4px 0;6891  cursor: pointer;6892  font-family: "IBM Plex Mono", monospace;6893  font-size: 0.6875rem;6894  letter-spacing: 0.04em;6895  color: var(--peach-t1);6896  transition: color 150ms ease;6897}68986899.peach-onboarding-next:hover {6900  color: var(--peach-t0);6901}69026903.peach-onboarding-next:disabled {6904  opacity: 0.5;6905  cursor: default;6906}69076908.peach-onboarding-back {6909  background: none;6910  border: none;6911  padding: 4px 0;6912  cursor: pointer;6913  font-family: "IBM Plex Mono", monospace;6914  font-size: 0.6875rem;6915  letter-spacing: 0.04em;6916  color: var(--peach-t2);6917  transition: color 150ms ease;6918}69196920.peach-onboarding-back:hover {6921  color: var(--peach-t0);6922}69236924.peach-onboarding-back:disabled {6925  opacity: 0.5;6926  cursor: default;6927}69286929/* Reserve back-button width on the first card so the dots stay centred */6930.peach-onboarding-back-spacer {6931  width: 44px;6932}69336934.peach-onboarding-choice-row {6935  display: grid;6936  grid-template-columns: 1fr;6937  gap: 8px;6938}69396940.peach-onboarding-choice-heading {6941  margin: 8px 0 -2px;6942  color: var(--peach-t1);6943  font-family: "IBM Plex Mono", monospace;6944  font-size: 0.6875rem;6945  letter-spacing: 0.04em;6946  text-transform: uppercase;6947}69486949.peach-onboarding-choice {6950  min-height: 48px;6951  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);6952  border-radius: 8px;6953  padding: 8px 10px;6954  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);6955  color: var(--peach-t0);6956  font-size: 0.76rem;6957  font-weight: 700;6958  text-align: left;6959}69606961.peach-onboarding-choice-label,6962.peach-onboarding-choice-detail {6963  display: block;6964}69656966.peach-onboarding-choice-detail {6967  margin-top: 2px;6968  color: var(--peach-t1);6969  font-size: 0.625rem;6970  font-weight: 400;6971  line-height: 1.35;6972}69736974.peach-onboarding-choice--adopt {6975  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);6976  background: color-mix(in srgb, var(--peach-accent) 13%, transparent);6977}69786979.peach-adopt-vault {6980  position: relative;6981  min-height: 100%;6982  padding: 22px;6983  display: grid;6984  place-items: center;6985}69866987.peach-adopt-card {6988  position: relative;6989  z-index: 1;6990  width: min(100%, 330px);6991  padding: 20px;6992  border-radius: 8px;6993  border: 1px solid color-mix(in srgb, var(--peach-t0) 13%, transparent);6994  background: color-mix(in srgb, var(--peach-surface) 90%, transparent);6995  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);6996}69976998.peach-adopt-card h1 {6999  margin: 0 0 10px;7000  font-size: 1.28rem;7001  line-height: 1.15;7002}70037004.peach-adopt-card p {7005  margin: 0 0 14px;7006  color: var(--peach-t1);7007  line-height: 1.35;7008}70097010.peach-adopt-input {7011  margin-bottom: 12px;7012}70137014.peach-adopt-card textarea.peach-adopt-input {7015  width: 100%;7016  resize: vertical;7017  overflow-wrap: anywhere;7018  font-family: "IBM Plex Mono", monospace;7019  font-size: 0.64rem;7020}70217022.peach-adopt-qr-video {7023  display: block;7024  width: 100%;7025  max-height: 220px;7026  margin: 0 0 12px;7027  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);7028  border-radius: 8px;7029  background: #000;7030  object-fit: cover;7031}70327033.peach-adoption-source-invitation {7034  display: flex;7035  flex-direction: column;7036  align-items: center;7037  gap: 10px;7038  padding: 4px 18px 16px;7039  text-align: center;7040}70417042.peach-pair-qr {7043  display: block;7044  max-width: min(224px, 100%);7045  height: auto;7046  padding: 8px;7047  border-radius: 10px;7048  background: #fff;7049}70507051/* The same invitation the QR carries, as text — the fallback when a camera7052   won't cooperate. Monospace and full width so it can be read out loud. */7053.peach-pair-invitation-text {7054  width: 100%;7055  resize: none;7056  padding: 8px 10px;7057  border-radius: 10px;7058  border: 1px solid var(--peach-border);7059  background: color-mix(in srgb, var(--peach-t0) 3%, transparent);7060  color: var(--peach-t1);7061  font-family: var(--peach-mono, ui-monospace, SFMono-Regular, Menlo, monospace);7062  font-size: 10px;7063  line-height: 1.5;7064  word-break: break-all;7065}70667067.peach-adopt-card > .peach-btn + .peach-btn {7068  margin-top: 8px;7069}70707071.peach-adopt-actions {7072  display: flex;7073  gap: 10px;7074  margin-top: 14px;7075}70767077.peach-adopt-actions > button {7078  flex: 1;7079}70807081.peach-adopt-birds {7082  width: 120px;7083  height: 54px;7084  margin-bottom: 14px;7085  position: relative;7086}70877088.peach-adopt-birds::before {7089  content: "";7090  position: absolute;7091  left: 29px;7092  right: 29px;7093  top: 25px;7094  height: 1px;7095  background: color-mix(in srgb, var(--peach-accent) 50%, transparent);7096}70977098.peach-adopt-birds span {7099  position: absolute;7100  top: 11px;7101  width: 34px;7102  height: 28px;7103  border-radius: 50% 50% 46% 46%;7104  background: color-mix(in srgb, var(--peach-accent) 45%, var(--peach-t0));7105  box-shadow: 0 0 18px color-mix(in srgb, var(--peach-accent) 24%, transparent);7106  animation: peach-adopt-bob 1.8s ease-in-out infinite;7107}71087109.peach-adopt-birds span:first-child {7110  left: 12px;7111}71127113.peach-adopt-birds span:last-child {7114  right: 12px;7115  animation-delay: 0.25s;7116}71177118.peach-adopt-sas {7119  margin: 18px 0;7120  padding: 14px;7121  border-radius: 8px;7122  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);7123  color: var(--peach-t0);7124  font-size: 1.35rem;7125  font-weight: 800;7126  font-variant-numeric: tabular-nums;7127  text-align: center;7128}71297130@keyframes peach-adopt-bob {7131  0%, 100% { transform: translateY(0); }7132  50% { transform: translateY(-5px); }7133}71347135.peach-onboarding-mobile-card-buttons {7136  display: flex;7137  flex-direction: column;7138  gap: 8px;7139  margin-top: 16px;7140}71417142@keyframes peach-onboard-enter {7143  from { opacity: 0; transform: translateY(20px); }7144  to   { opacity: 1; transform: translateY(0); }7145}71467147@keyframes peach-onboard-exit {7148  from { opacity: 1; }7149  to   { opacity: 0; }7150}71517152@keyframes peach-card-in {7153  from { opacity: 0; transform: translateX(12px); }7154  to   { opacity: 1; transform: translateX(0); }7155}71567157@keyframes peach-card-out {7158  from { opacity: 1; transform: translateX(0); }7159  to   { opacity: 0; transform: translateX(-12px); }7160}71617162/* ─── New vault screen — matched to onboarding card language ─────────── */71637164/* Two classes so this beats the shared .peach-screen.lock-screen--vault-stage7165   rule (same element) without loosening the unlock/restore screens. The7166   create-vault screen is the only vault-stage view tall enough to overflow7167   the 520px popup, so its spacing is tuned to fit header → card → restore →7168   recovery warning with nothing clipped. */7169.peach-screen.peach-newvault {7170  position: relative;7171  display: flex;7172  flex-direction: column;7173  gap: 12px;7174  padding: 14px 16px 12px;7175  overflow: hidden;7176}71777178/* Suppress the warm-blob ambient art inherited from .lock-screen — the7179   new vault card now carries the visual weight. */7180.peach-newvault::before {7181  content: none;7182}71837184.peach-newvault-header {7185  position: relative;7186  z-index: 2;7187  display: flex;7188  align-items: center;7189  gap: 10px;7190  margin-bottom: 2px;7191}71927193.peach-newvault-back {7194  display: inline-flex;7195  align-items: center;7196  gap: 4px;7197  background: transparent;7198  border: none;7199  color: var(--peach-t2);7200  font-family: "IBM Plex Mono", monospace;7201  font-size: 0.625rem;7202  letter-spacing: 0.06em;7203  cursor: pointer;7204  padding: 4px 6px;7205  border-radius: 6px;7206  transition: color 120ms ease, background 120ms ease;7207}72087209.peach-newvault-back:hover {7210  color: var(--peach-t0);7211  background: rgba(240, 232, 216, 0.04);7212}72137214.peach-newvault-mark {7215  position: absolute;7216  right: -12px;7217  top: 6px;7218  width: 110px;7219  height: 110px;7220  pointer-events: none;7221  opacity: 0.10;7222  filter: saturate(0.9);7223  z-index: 0;7224}7225.peach-newvault-mark-art {7226  width: 100%;7227  height: 100%;7228}7229.peach-newvault-mark-art path:nth-child(1) {7230  fill: rgba(123, 144, 96, 0.88);7231}7232.peach-newvault-mark-art path:nth-child(2) {7233  stroke: rgba(94, 122, 66, 0.95);7234}72357236.peach-newvault-card {7237  position: relative;7238  z-index: 1;7239  display: flex;7240  flex-direction: column;7241  gap: 8px;7242  padding: 16px 20px 14px;7243  border-radius: 16px;7244  border: 1px solid var(--peach-t3);7245  background:7246    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));7247  backdrop-filter: blur(3px);7248  -webkit-backdrop-filter: blur(3px);7249  box-shadow:7250    inset 0 1px 0 rgba(240, 232, 216, 0.04),7251    0 12px 28px rgba(0, 0, 0, 0.12);7252  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;7253}72547255.peach-newvault-headline {7256  margin: 0;7257  font-family: var(--font-display);7258  font-style: italic;7259  font-weight: 400;7260  font-size: 24px;7261  line-height: 1.05;7262  color: var(--peach-t0);7263  white-space: pre-line;7264}72657266.peach-newvault-divider {7267  margin: 2px 0 4px;7268  border: 0;7269  border-top: 1px solid var(--peach-t3);7270  width: 100%;7271}72727273.peach-newvault-field {7274  display: flex;7275  flex-direction: column;7276  gap: 4px;7277}72787279.peach-newvault-label-row {7280  display: flex;7281  align-items: center;7282  justify-content: space-between;7283}72847285/* Monospace input scaled to the card. Replaces the 22px unlock-input7286   so the placeholder no longer overflows and the field reads as part7287   of the same surface as the body copy. */7288.peach-newvault-input {7289  font-size: 0.875rem;7290  letter-spacing: 0.18em;7291  padding: 8px 0;7292}7293.peach-newvault-input::placeholder {7294  letter-spacing: 0.18em;7295  color: var(--peach-t2);7296}72977298.peach-newvault-hint {7299  margin: 2px 0 0;7300  font-family: "IBM Plex Mono", monospace;7301  font-size: 0.625rem;7302  color: var(--peach-t2);7303  letter-spacing: 0.04em;7304}73057306.peach-newvault-submit {7307  margin-top: 4px;7308}73097310.peach-newvault-warning {7311  display: flex;7312  align-items: flex-start;7313  gap: 8px;7314  margin: 2px 0 0;7315  padding-top: 8px;7316  border-top: 1px dashed var(--peach-t3);7317  font-size: 0.75rem;7318  line-height: 1.45;7319  color: var(--peach-t1);7320}73217322.peach-newvault-warning-icon {7323  color: var(--peach-accent);7324  font-size: 0.8125rem;7325  line-height: 1.4;7326  flex: 0 0 auto;7327}73287329/* Restore options sit inside the card, directly under "create vault", so7330   they are always reachable without scrolling. The top divider mirrors the7331   warning's so the choice reads as a deliberate fork, not a footnote. */7332.peach-newvault-restore {7333  position: relative;7334  z-index: 1;7335  display: flex;7336  flex-direction: column;7337  gap: 4px;7338  margin-top: 4px;7339  padding-top: 10px;7340  border-top: 1px dashed var(--peach-t3);7341}73427343/* Settings body — warm accent gradient gives the glass something to blur against */7344.peach-settings-body {7345  background:7346    radial-gradient(7347      ellipse at 30% 20%,7348      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7349      transparent 60%7350    );7351}73527353/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7354/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7355 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7356 * (replacing the vault from a backup file) and "hazard" for actions that7357 * are absolutely irreversible (Panic). Both use the same card scaffold so7358 * they read as a pair, but the colour family signals the severity at a7359 * glance — yellow for caution, red for don't.7360 */7361.peach-danger-card {7362  --danger-tint: 235, 158, 52; /* amber */7363  display: flex;7364  flex-direction: column;7365  gap: 8px;7366  padding: 14px;7367  margin-top: 10px;7368  border-radius: 12px;7369  border: 1px solid rgba(var(--danger-tint), 0.32);7370  background:7371    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7372    rgba(var(--danger-tint), 0.04);7373  box-shadow:7374    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7375    0 0 24px rgba(var(--danger-tint), 0.04);7376  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7377}73787379.peach-danger-card:hover {7380  border-color: rgba(var(--danger-tint), 0.55);7381  box-shadow:7382    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7383    0 0 36px rgba(var(--danger-tint), 0.10);7384}73857386.peach-danger-card--hazard {7387  --danger-tint: 220, 38, 38; /* red */7388}73897390.peach-danger-card-head {7391  display: flex;7392  align-items: center;7393  gap: 10px;7394}73957396.peach-danger-card-glyph {7397  width: 28px;7398  height: 28px;7399  flex-shrink: 0;7400  display: flex;7401  align-items: center;7402  justify-content: center;7403  border-radius: 8px;7404  background: rgba(var(--danger-tint), 0.12);7405  color: rgba(var(--danger-tint), 0.95);7406  font-size: 1rem;7407  line-height: 1;7408}74097410.peach-danger-card-title {7411  margin: 0;7412  font-size: 0.8125rem;7413  font-weight: 600;7414  color: rgba(var(--danger-tint), 0.92);7415  letter-spacing: 0.01em;7416}74177418.peach-danger-card-copy {7419  margin: 0;7420  font-size: 0.6875rem;7421  line-height: 1.5;7422  color: var(--peach-t2);7423}74247425.peach-danger-card-button {7426  width: 100%;7427  padding: 9px;7428  margin-top: 4px;7429  background: transparent;7430  border: 1px solid rgba(var(--danger-tint), 0.45);7431  border-radius: 8px;7432  color: rgba(var(--danger-tint), 0.9);7433  font-size: 0.75rem;7434  font-weight: 500;7435  letter-spacing: 0.02em;7436  cursor: pointer;7437  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7438}74397440.peach-danger-card-button:hover {7441  background: rgba(var(--danger-tint), 0.10);7442  border-color: rgba(var(--danger-tint), 0.75);7443  color: rgb(var(--danger-tint));7444}74457446.peach-adoption-sas {7447  margin: 16px auto 0;7448  padding: 12px 16px;7449  border: 1px solid color-mix(in srgb, var(--peach-t0) 18%, transparent);7450  border-radius: 10px;7451  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);7452  color: var(--peach-t0);7453  text-align: center;7454}74557456.peach-adoption-sas strong {7457  font-size: 1.65rem;7458  font-variant-numeric: tabular-nums;7459  letter-spacing: 0.18em;7460  white-space: nowrap;7461}74627463/* ── Panic flow (three-step destruction) ───────────────────────────────── */7464.peach-panic {7465  display: flex;7466  flex-direction: column;7467  flex: 1;7468  min-height: 0;7469  padding: 28px 20px 20px;7470  gap: 18px;7471  overflow-y: auto;7472  scrollbar-width: none;7473  -ms-overflow-style: none;7474}74757476.peach-panic::-webkit-scrollbar { display: none; }74777478.peach-panic-step2 {7479  background: rgba(220, 38, 38, 0.04);7480}74817482.peach-panic-step3 {7483  position: relative;7484  background: #0f0505;7485  color: #ffffff;7486  overflow: hidden;7487}74887489.peach-panic-rune-bg {7490  position: absolute;7491  inset: 0;7492  opacity: 0.22;7493  pointer-events: none;7494  overflow: hidden;7495}74967497.peach-panic-rune-bg canvas {7498  width: 100% !important;7499  height: 100% !important;7500}75017502.peach-panic-icon {7503  font-size: 32px;7504  color: rgb(220, 38, 38);7505  line-height: 1;7506}75077508.peach-panic-title {7509  margin: 0;7510  font-size: 18px;7511  font-weight: 500;7512  color: var(--peach-t1);7513}75147515.peach-panic-title--severe {7516  font-size: 20px;7517  font-weight: 700;7518  color: rgb(220, 38, 38);7519}75207521.peach-panic-body {7522  margin: 0;7523  font-size: 0.8125rem;7524  line-height: 1.55;7525  color: var(--peach-t2);7526}75277528.peach-panic-body--severe {7529  color: rgba(220, 38, 38, 0.85);7530}75317532.peach-panic-body--final {7533  font-size: 1rem;7534  font-weight: 700;7535  color: rgb(255, 80, 80);7536  line-height: 1.4;7537}75387539.peach-panic-body--final-intro {7540  font-size: 1rem;7541  color: #ffffff;7542  font-weight: 400;7543}75447545.peach-panic-divider {7546  height: 1px;7547  background: rgba(255, 255, 255, 0.08);7548  margin: 4px 0;7549}75507551.peach-panic-confirm-input {7552  width: 100%;7553  padding: 10px 12px;7554  background: rgba(255, 255, 255, 0.02);7555  border: 1px solid rgba(220, 38, 38, 0.4);7556  border-radius: 8px;7557  color: var(--peach-t1);7558  font-family: "IBM Plex Mono", monospace;7559  font-size: 0.875rem;7560  letter-spacing: 0.12em;7561  text-transform: uppercase;7562}75637564.peach-panic-confirm-input:focus {7565  outline: none;7566  border-color: rgb(220, 38, 38);7567}75687569.peach-panic-confirm-input--match {7570  border-color: rgb(220, 38, 38);7571  color: rgb(220, 38, 38);7572}75737574.peach-panic-confirm-label {7575  font-size: 0.6875rem;7576  color: var(--peach-t2);7577  margin: 0 0 -8px;7578  letter-spacing: 0.06em;7579}75807581.peach-panic-actions {7582  display: flex;7583  flex-direction: column;7584  gap: 10px;7585  margin-top: auto;7586}75877588.peach-panic-button {7589  width: 100%;7590  padding: 12px;7591  border-radius: 8px;7592  font-size: 0.8125rem;7593  cursor: pointer;7594  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7595}75967597.peach-panic-button--primary {7598  background: var(--peach-accent);7599  border: 1px solid var(--peach-accent);7600  color: #ffffff;7601  font-weight: 600;7602}76037604.peach-panic-button--primary:hover {7605  background: color-mix(in srgb, var(--peach-accent) 88%, white);7606}76077608.peach-panic-button--danger {7609  background: rgb(220, 38, 38);7610  border: 1px solid rgb(220, 38, 38);7611  color: #ffffff;7612  font-weight: 600;7613}76147615.peach-panic-button--danger:disabled {7616  opacity: 0.35;7617  cursor: not-allowed;7618}76197620.peach-panic-button--ghost {7621  background: transparent;7622  border: 1px solid rgba(255, 255, 255, 0.18);7623  color: var(--peach-t2);7624}76257626.peach-panic-button--ghost:hover {7627  border-color: rgba(255, 255, 255, 0.32);7628  color: var(--peach-t1);7629}76307631.peach-panic-link {7632  background: transparent;7633  border: none;7634  padding: 4px 0;7635  color: rgba(220, 38, 38, 0.65);7636  font-size: 0.75rem;7637  cursor: pointer;7638  text-align: left;7639  text-decoration: underline;7640  text-underline-offset: 3px;7641}76427643.peach-panic-link:hover {7644  color: rgb(220, 38, 38);7645}76467647.peach-panic-bar {7648  background: rgb(220, 38, 38);7649  padding: 16px 20px;7650  margin: -28px -20px 0;7651  text-align: center;7652  font-size: 0.8125rem;7653  font-weight: 700;7654  letter-spacing: 0.12em;7655  color: #ffffff;7656}76577658.peach-panic-final-button {7659  width: 100%;7660  padding: 14px;7661  background: rgb(220, 38, 38);7662  border: none;7663  border-radius: 8px;7664  color: #ffffff;7665  font-size: 0.875rem;7666  font-weight: 700;7667  letter-spacing: 0.08em;7668  text-transform: uppercase;7669  cursor: pointer;7670  animation: peach-panic-pulse 2s ease-in-out infinite;7671}76727673.peach-settings-license {7674  margin-top: 10px;7675  padding-top: 10px;7676  border-top: 1px solid var(--peach-t3);7677}76787679.peach-settings-label {7680  font-size: 0.625rem;7681  letter-spacing: 0.08em;7682  color: var(--peach-t3);7683  display: block;7684  margin-bottom: 6px;7685}76867687.peach-settings-license-row {7688  display: flex;7689  align-items: center;7690  justify-content: space-between;7691  gap: 8px;7692}76937694.peach-settings-license-key {7695  font-family: 'IBM Plex Mono', monospace;7696  font-size: 0.75rem;7697  color: var(--peach-t0);7698  letter-spacing: 0.04em;7699  word-break: break-all;7700  flex: 1;7701  min-width: 0;7702}77037704.peach-settings-license-key--masked {7705  font-family: 'IBM Plex Mono', monospace;7706  font-size: 0.6rem;7707  color: var(--peach-t1);7708  letter-spacing: 0.18em;7709  user-select: none;7710}77117712.peach-settings-license-actions {7713  display: flex;7714  align-items: center;7715  gap: 2px;7716  flex-shrink: 0;7717}77187719.peach-settings-license-copy {7720  font-size: 0.6875rem;7721  color: var(--peach-accent);7722  background: transparent;7723  border: none;7724  cursor: pointer;7725  padding: 4px 8px;7726  border-radius: 4px;7727  flex-shrink: 0;7728  transition: opacity 150ms ease;7729}77307731.peach-settings-license-copy:hover {7732  opacity: 0.75;7733}77347735.peach-settings-license-toggle {7736  display: flex;7737  align-items: center;7738  justify-content: center;7739  background: transparent;7740  border: none;7741  cursor: pointer;7742  padding: 4px 6px;7743  border-radius: 4px;7744  color: var(--peach-t2);7745  transition: color 150ms ease;7746}77477748.peach-settings-license-toggle:hover {7749  color: var(--peach-t1);7750}77517752@keyframes peach-panic-pulse {7753  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7754  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7755}77567757[data-motion="reduce"] .peach-panic-final-button {7758  animation: none;7759}77607761/* Vault History — Settings → Vault sub-view */77627763.peach-history-list {7764  border: 1px solid var(--peach-border);7765  border-radius: 8px;7766  overflow: hidden;7767  margin: 8px 0 4px;7768}77697770.peach-history-row {7771  display: flex;7772  align-items: center;7773  justify-content: space-between;7774  padding: 9px 12px;7775  gap: 10px;7776  border-bottom: 1px solid var(--peach-border);7777}77787779.peach-history-row:last-child {7780  border-bottom: none;7781}77827783.peach-history-meta {7784  display: flex;7785  flex-direction: column;7786  gap: 2px;7787  min-width: 0;7788  flex: 1;7789}77907791.peach-history-time {7792  font-size: 0.75rem;7793  font-family: 'IBM Plex Mono', ui-monospace, monospace;7794  color: var(--peach-t0);7795  white-space: nowrap;7796  overflow: hidden;7797  text-overflow: ellipsis;7798}77997800.peach-history-sub {7801  font-size: 0.625rem;7802  color: var(--peach-t2);7803  letter-spacing: 0.06em;7804  text-transform: uppercase;7805  white-space: nowrap;7806  overflow: hidden;7807  text-overflow: ellipsis;7808}78097810.peach-history-btn {7811  flex-shrink: 0;7812  white-space: nowrap;7813  min-width: 56px;7814  text-align: center;7815}78167817.peach-history-btn.is-busy {7818  opacity: 0.65;7819}78207821.peach-history-footer {7822  font-size: 0.625rem;7823  color: var(--peach-t3);7824  letter-spacing: 0.05em;7825  text-align: right;7826  margin: 0;7827  padding: 2px 0 0;7828}78297830/* ── Context menu + swipe-copy flash ─────────────────────── */7831.peach-context-menu-backdrop {7832  position: fixed;7833  inset: 0;7834  background: rgba(0, 0, 0, 0.45);7835  z-index: 100;7836  display: flex;7837  align-items: flex-end;7838  justify-content: center;7839  animation: peach-ctx-fade 140ms ease both;7840}7841.peach-context-menu {7842  width: min(360px, calc(100vw - 24px));7843  margin-bottom: max(env(safe-area-inset-bottom), 12px);7844  background: var(--peach-bg);7845  border: 1px solid var(--peach-t3);7846  border-radius: 14px;7847  padding: 6px;7848  display: flex;7849  flex-direction: column;7850  gap: 2px;7851  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7852  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7853}7854@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7855@keyframes peach-ctx-rise {7856  from { transform: translateY(16px); opacity: 0; }7857  to   { transform: translateY(0);    opacity: 1; }7858}7859.peach-context-menu-item {7860  background: transparent;7861  color: var(--peach-t0);7862  border: 0;7863  border-radius: 10px;7864  padding: 12px 14px;7865  text-align: left;7866  font: inherit;7867  cursor: pointer;7868}7869.peach-context-menu-item:hover,7870.peach-context-menu-item:focus-visible {7871  background: var(--peach-t3);7872}7873.peach-context-menu-item--danger {7874  color: var(--peach-health-bad, #d96868);7875}7876.peach-context-menu-item--cancel {7877  color: var(--peach-t2);7878  margin-top: 4px;7879  border-top: 1px solid var(--peach-t3);7880  border-radius: 0 0 10px 10px;7881}78827883/* Swipe-to-copy flash */7884.peach-entry-row.is-copy-flash {7885  animation: peach-copy-flash 600ms ease both;7886}7887@keyframes peach-copy-flash {7888  0%   { background: transparent; }7889  20%  { background: rgba(217, 153, 51, 0.32); }7890  100% { background: transparent; }7891}78927893html { font-size: 16px; }78947895/* ── Recovery word entry ─────────────────────────────────────────── */7896.peach-lock-recover-link {7897  display: block;7898  width: 100%;7899  margin-top: 12px;7900  background: none;7901  border: none;7902  font-family: "IBM Plex Mono", monospace;7903  font-size: 0.625rem;7904  letter-spacing: 0.06em;7905  color: var(--peach-t2);7906  cursor: pointer;7907  text-align: center;7908  padding: 4px;7909  transition: color 120ms ease;7910}7911.peach-lock-recover-link:hover {7912  color: var(--peach-t0);7913}79147915.lock-screen--recovery {7916  display: flex;7917  flex-direction: column;7918  align-items: stretch;7919  padding: 12px 20px 24px;7920  overflow: hidden;7921}79227923.peach-recovery-nav {7924  display: flex;7925  align-items: center;7926  position: relative;7927  z-index: 1;7928  margin-bottom: 4px;7929}79307931/* Mask runes to the top decorative band only — keep inputs and the7932   bottom CTA button clear. The bottom of the popup is reserved for7933   submit buttons; rendering runes there overlaps the button glyph. */7934.peach-rune-background--recovery {7935  -webkit-mask-image: linear-gradient(7936    to bottom,7937    black 0px, black 85px,7938    transparent 110px,7939    transparent 100%7940  );7941  mask-image: linear-gradient(7942    to bottom,7943    black 0px, black 85px,7944    transparent 110px,7945    transparent 100%7946  );7947}79487949.peach-recovery-header {7950  text-align: center;7951  margin-bottom: 16px;7952  margin-top: 4px;7953}7954.peach-recovery-header .peach-onboarding-headline {7955  font-size: 1.25rem;7956  font-weight: 300;7957  letter-spacing: 0.02em;7958  margin: 0 0 4px;7959}7960.peach-recovery-header .peach-hint {7961  font-family: "IBM Plex Mono", monospace;7962  font-size: 0.625rem;7963  color: var(--peach-t2);7964  letter-spacing: 0.04em;7965  margin: 0;7966}79677968/* 12-word grid: 2 columns × 6 rows */7969.peach-recovery-grid {7970  display: grid;7971  grid-template-columns: repeat(2, 1fr);7972  gap: 12px 20px;7973  width: 100%;7974  margin-bottom: 0;7975}79767977.peach-recovery-word-slot {7978  display: flex;7979  align-items: center;7980  gap: 6px;7981  min-width: 0;7982}79837984.peach-recovery-word-index {7985  font-family: "IBM Plex Mono", monospace;7986  font-size: 0.5rem;7987  color: rgba(255, 255, 255, 0.35);7988  min-width: 14px;7989  flex-shrink: 0;7990  text-align: right;7991  letter-spacing: 0.04em;7992}79937994.peach-recovery-word-input {7995  flex: 1;7996  min-width: 0;7997  background: transparent;7998  border: none;7999  border-bottom: 1px solid rgba(255, 255, 255, 0.22);8000  color: var(--peach-t0);8001  font-family: "IBM Plex Mono", monospace;8002  font-size: 0.6875rem;8003  letter-spacing: 0.06em;8004  padding: 5px 2px 4px;8005  outline: none;8006  text-transform: lowercase;8007  transition: border-color 120ms ease;8008}8009.peach-recovery-word-input::placeholder {8010  color: rgba(255, 255, 255, 0.18);8011}8012.peach-recovery-word-input:focus {8013  border-bottom-color: var(--peach-accent);8014}80158016.peach-recovery-submit {8017  width: 100%;8018  margin-top: auto;8019}80208021.peach-recovery-new-password-form {8022  width: 100%;8023  display: flex;8024  flex-direction: column;8025  gap: 16px;8026  margin-bottom: 8px;8027}8028.peach-recovery-new-password-form .peach-newvault-field {8029  display: flex;8030  flex-direction: column;8031  gap: 4px;8032}80338034/* ── Recovery words display (post-create) ────────────────────────── */8035.lock-screen--recovery-display {8036  display: flex;8037  flex-direction: column;8038  align-items: stretch;8039  padding: 0 20px 20px;8040  min-height: 0;8041  overflow-y: auto;8042}80438044.peach-recovery-words-display {8045  width: 100%;8046  margin-bottom: 16px;8047  border: 1px solid var(--peach-t3);8048  border-radius: 8px;8049  padding: 12px 14px;8050  background: rgba(245, 240, 234, 0.04);8051}80528053.peach-recovery-words-label {8054  font-family: "IBM Plex Mono", monospace;8055  font-size: 0.5rem;8056  letter-spacing: 0.08em;8057  color: var(--peach-t2);8058  text-transform: uppercase;8059  margin-bottom: 10px;8060}80618062.peach-recovery-word-list {8063  list-style: none;8064  margin: 0;8065  padding: 0;8066  display: grid;8067  grid-template-columns: repeat(2, 1fr);8068  gap: 6px 16px;8069}80708071.peach-recovery-word-item {8072  display: flex;8073  align-items: baseline;8074  gap: 5px;8075}80768077.peach-recovery-word-num {8078  font-family: "IBM Plex Mono", monospace;8079  font-size: 0.5rem;8080  color: var(--peach-t2);8081  width: 14px;8082  flex: 0 0 14px;8083  text-align: right;8084  letter-spacing: 0.04em;8085  font-variant-numeric: tabular-nums;8086}80878088.peach-recovery-download-btn {8089  display: block;8090  margin: 10px auto 0;8091  padding: 4px 10px;8092  background: transparent;8093  border: 1px solid var(--peach-border);8094  border-radius: 6px;8095  color: var(--peach-t2);8096  font-family: "IBM Plex Mono", monospace;8097  font-size: 0.5625rem;8098  letter-spacing: 0.06em;8099  text-transform: lowercase;8100  cursor: pointer;8101  transition: border-color 0.15s, color 0.15s;8102}81038104.peach-recovery-download-btn:hover {8105  border-color: var(--peach-accent);8106  color: var(--peach-t0);8107}81088109.peach-recovery-word-text {8110  font-family: "IBM Plex Mono", monospace;8111  font-size: 0.6875rem;8112  letter-spacing: 0.06em;8113  color: var(--peach-t0);8114  text-transform: lowercase;8115}81168117.peach-hint--warning {8118  color: var(--peach-accent);8119  font-style: italic;8120}8121.peach-hint--success {8122  color: var(--peach-t2);8123  font-family: "IBM Plex Mono", monospace;8124  font-size: 0.625rem;8125  letter-spacing: 0.06em;8126}81278128/* Confirmation step */8129.peach-recovery-confirm {8130  width: 100%;8131  flex: 1;8132  display: flex;8133  flex-direction: column;8134}8135.peach-recovery-confirm-label {8136  font-family: "IBM Plex Mono", monospace;8137  font-size: 0.5625rem;8138  letter-spacing: 0.04em;8139  color: var(--peach-t2);8140  text-align: center;8141  margin: 0 0 12px;8142}8143.peach-recovery-confirm-fields {8144  display: flex;8145  flex-direction: column;8146  gap: 14px;8147  margin-bottom: 10px;8148}8149.peach-recovery-confirm-field {8150  display: flex;8151  align-items: center;8152  gap: 8px;8153}8154.peach-recovery-confirm-num {8155  font-family: "IBM Plex Mono", monospace;8156  font-size: 0.5rem;8157  color: var(--peach-t2);8158  min-width: 44px;8159  letter-spacing: 0.04em;8160}8161.peach-recovery-confirm-input {8162  flex: 1;8163  background: transparent;8164  border: none;8165  border-bottom: 1px solid var(--peach-t3);8166  color: var(--peach-t0);8167  font-family: "IBM Plex Mono", monospace;8168  font-size: 0.6875rem;8169  letter-spacing: 0.06em;8170  padding: 4px 2px 3px;8171  outline: none;8172  text-transform: lowercase;8173  transition: border-color 120ms ease;8174}8175.peach-recovery-confirm-input:focus {8176  border-bottom-color: var(--peach-accent);8177}8178.peach-recovery-confirm-input:disabled {8179  opacity: 0.4;8180  cursor: not-allowed;8181}8182.peach-recovery-confirm-btn {8183  width: 100%;8184  margin-top: auto;8185}81868187/* ============================================================8188   Sync info sheet8189   ============================================================ */81908191.peach-sync-info-backdrop {8192  position: fixed;8193  inset: 0;8194  z-index: 200;8195  background: rgba(0, 0, 0, 0.55);8196  display: flex;8197  align-items: flex-end;8198  animation: peach-fade-in 200ms ease forwards;8199}82008201@keyframes peach-fade-in {8202  from { opacity: 0; }8203  to   { opacity: 1; }8204}82058206.peach-sync-info-sheet {8207  width: 100%;8208  background: var(--peach-bg-card, var(--peach-bg));8209  border-top-left-radius: 20px;8210  border-top-right-radius: 20px;8211  padding: 12px 24px 32px;8212  display: flex;8213  flex-direction: column;8214  gap: 20px;8215  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;8216}82178218@keyframes peach-sheet-up {8219  from { transform: translateY(100%); }8220  to   { transform: translateY(0); }8221}82228223.peach-sync-info-handle {8224  width: 36px;8225  height: 4px;8226  border-radius: 2px;8227  background: var(--peach-border);8228  margin: 0 auto 4px;8229  flex-shrink: 0;8230}82318232.peach-sync-info-title {8233  font-family: 'Cormorant Garamond', serif;8234  font-style: italic;8235  font-size: 26px;8236  font-weight: 600;8237  color: var(--peach-t0);8238  margin: 0;8239  line-height: 1.2;8240}82418242.peach-sync-info-body {8243  display: flex;8244  flex-direction: column;8245  gap: 14px;8246}82478248.peach-sync-info-point {8249  display: flex;8250  gap: 12px;8251  align-items: flex-start;8252  font-size: 14px;8253  color: var(--peach-t2);8254  line-height: 1.6;8255  margin: 0;8256}82578258.peach-sync-info-icon {8259  color: var(--peach-accent);8260  font-size: 16px;8261  flex-shrink: 0;8262  margin-top: 1px;8263}82648265.peach-sync-info-actions {8266  display: flex;8267  flex-direction: column;8268  gap: 12px;8269  margin-top: 4px;8270}82718272.peach-sync-info-pro-link {8273  background: none;8274  border: none;8275  font-size: 13px;8276  color: var(--peach-t3);8277  cursor: pointer;8278  padding: 0;8279  font-family: inherit;8280  text-align: center;8281  transition: color 150ms ease;8282}82838284.peach-sync-info-pro-link:hover {8285  color: var(--peach-accent);8286}82878288.peach-btn--full {8289  width: 100%;8290}82918292/* ── Sync screen ── */82938294.peach-sync-coming-soon {8295  display: flex;8296  align-items: flex-start;8297  gap: 10px;8298  padding: 12px 14px;8299  background: var(--peach-s1);8300  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8301  border-radius: 10px;8302}8303.peach-sync-coming-soon__icon {8304  flex-shrink: 0;8305  color: var(--peach-accent);8306  margin-top: 1px;8307  line-height: 0;8308}8309.peach-sync-coming-soon__title {8310  font-family: 'Cormorant Garamond', serif;8311  font-weight: 500;8312  font-size: 13px;8313  color: var(--peach-accent);8314  margin: 0 0 5px;8315  line-height: 1.3;8316}8317.peach-sync-coming-soon__body {8318  font-size: 12px;8319  color: var(--peach-t1);8320  line-height: 1.55;8321  margin: 0;8322}83238324.peach-sync-screen {8325  display: flex;8326  flex-direction: column;8327  height: 100%;8328}83298330.peach-sync-content {8331  flex: 1;8332  overflow-y: auto;8333  padding: 24px 20px 40px;8334  display: flex;8335  flex-direction: column;8336  gap: 24px;8337}83388339/* Intro (State A) */8340.peach-sync-headline {8341  font-family: 'Cormorant Garamond', serif;8342  font-style: italic;8343  font-size: 28px;8344  font-weight: 600;8345  color: var(--peach-t0);8346  margin: 0 0 10px;8347  line-height: 1.2;8348}83498350.peach-sync-intro-body {8351  font-size: 14px;8352  color: var(--peach-t1);8353  line-height: 1.6;8354  margin: 0;8355}83568357.peach-sync-pro-note {8358  display: flex;8359  flex-direction: column;8360  gap: 8px;8361  background: var(--peach-t3);8362  border-radius: 10px;8363  padding: 12px 14px;8364}83658366.peach-sync-pro-note-text {8367  font-size: 12px;8368  color: var(--peach-t2);8369  line-height: 1.5;8370  margin: 0;8371}83728373.peach-sync-pro-link {8374  background: none;8375  border: none;8376  font-size: 12px;8377  color: var(--peach-accent);8378  cursor: pointer;8379  padding: 0;8380  font-family: inherit;8381  text-align: left;8382}83838384/* Status (State C) */8385.peach-sync-status {8386  padding: 12px 0;8387  border-bottom: 1px solid var(--peach-border);8388}83898390.peach-sync-status-row {8391  display: flex;8392  align-items: center;8393  gap: 8px;8394}83958396.peach-sync-dot {8397  width: 7px;8398  height: 7px;8399  border-radius: 50%;8400  flex-shrink: 0;8401}84028403.peach-sync-dot--green { background: var(--peach-health-ok); }8404.peach-sync-dot--amber { background: var(--peach-accent); }84058406.peach-sync-status-text {8407  font-family: 'IBM Plex Mono', monospace;8408  font-size: 11px;8409  color: var(--peach-t2);8410}84118412/* Paired devices */8413.peach-sync-section {8414  display: flex;8415  flex-direction: column;8416  gap: 2px;8417}84188419.peach-sync-section-label {8420  font-family: 'IBM Plex Mono', monospace;8421  font-size: 10px;8422  letter-spacing: 0.1em;8423  color: var(--peach-t3);8424  margin: 0 0 10px;8425}84268427.peach-sync-device-row {8428  display: flex;8429  justify-content: space-between;8430  align-items: baseline;8431  padding: 10px 0;8432  border-bottom: 1px solid var(--peach-border);8433  gap: 12px;8434}84358436.peach-sync-device-name {8437  font-size: 14px;8438  color: var(--peach-t1);8439}84408441.peach-sync-device-meta {8442  font-family: 'IBM Plex Mono', monospace;8443  font-size: 11px;8444  color: var(--peach-t3);8445  white-space: nowrap;8446}84478448.peach-sync-hub-note {8449  padding: 14px 16px;8450  border: 1px solid var(--peach-border);8451  border-radius: 10px;8452  display: flex;8453  flex-direction: column;8454  gap: 6px;8455  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8456}84578458.peach-sync-hub-note-title {8459  font-size: 13px;8460  font-weight: 600;8461  color: var(--peach-t0);8462  margin: 0;8463}84648465.peach-sync-hub-note-body {8466  font-size: 12px;8467  color: var(--peach-t2);8468  line-height: 1.6;8469  margin: 0;8470}84718472/* Action buttons */8473.peach-sync-actions {8474  display: flex;8475  gap: 10px;8476  flex-wrap: wrap;8477}84788479/* Upgrade prompt (State B) */8480.peach-sync-upgrade {8481  display: flex;8482  flex-direction: column;8483  gap: 12px;8484  padding: 16px;8485  border: 1px solid var(--peach-border);8486  border-radius: 10px;8487}84888489.peach-sync-upgrade-text {8490  font-size: 13px;8491  color: var(--peach-t2);8492  line-height: 1.6;8493  margin: 0;8494}84958496/* Network note */8497.peach-sync-network-note {8498  font-size: 12px;8499  color: var(--peach-t3);8500  line-height: 1.6;8501  margin: 0;8502}85038504/* Advanced */8505.peach-sync-advanced {8506  margin-top: auto;8507  padding-top: 16px;8508  border-top: 1px solid var(--peach-border);8509}85108511.peach-sync-advanced-toggle {8512  display: flex;8513  align-items: center;8514  gap: 8px;8515  background: none;8516  border: none;8517  font-family: 'IBM Plex Mono', monospace;8518  font-size: 11px;8519  letter-spacing: 0.08em;8520  color: var(--peach-t3);8521  cursor: pointer;8522  padding: 0;8523  text-transform: uppercase;8524}85258526.peach-sync-advanced-chevron {8527  display: inline-block;8528  transition: transform 200ms ease;8529  font-size: 10px;8530}85318532.peach-sync-advanced-chevron.is-open {8533  transform: rotate(90deg);8534}85358536.peach-sync-advanced-content {8537  margin-top: 14px;8538}85398540.peach-sync-advanced-row {8541  display: flex;8542  justify-content: space-between;8543  align-items: center;8544  gap: 16px;8545}85468547.peach-sync-advanced-title {8548  font-size: 14px;8549  color: var(--peach-t1);8550  margin: 0 0 2px;8551}85528553.peach-sync-advanced-subtitle {8554  font-size: 12px;8555  color: var(--peach-t3);8556  margin: 0;8557  line-height: 1.5;8558}85598560/* ── Notes Mode ── */85618562/* Overlay that crossfades over the vault */8563.peach-notes-overlay {8564  position: fixed;8565  inset: 0;8566  z-index: 90;8567  opacity: 0;8568  pointer-events: none;8569  animation: peach-mode-in 220ms ease-in forwards;8570}85718572.peach-notes-overlay.is-visible {8573  opacity: 1;8574  pointer-events: auto;8575}85768577@keyframes peach-mode-in {8578  from { opacity: 0; }8579  to   { opacity: 1; }8580}85818582/* Top-level notes surface */8583.peach-notes-mode {8584  position: absolute;8585  inset: 0;8586  background: var(--peach-bg);8587  display: flex;8588  flex-direction: column;8589}85908591/* Rune canvas positioned behind content */8592.peach-note-rune-canvas {8593  position: absolute;8594  inset: 0;8595  width: 100%;8596  height: 100%;8597  pointer-events: none;8598  z-index: 0;8599}86008601/* TOC wrapper */8602.peach-notes-toc-wrapper {8603  position: absolute;8604  inset: 0;8605  z-index: 1;8606  opacity: 1;8607  pointer-events: auto;8608  transition: opacity 200ms ease;8609}86108611.peach-notes-toc-wrapper.is-hidden {8612  opacity: 0;8613  pointer-events: none;8614}86158616/* Editor wrapper */8617.peach-notes-editor-wrapper {8618  position: absolute;8619  inset: 0;8620  z-index: 2;8621  opacity: 0;8622  pointer-events: none;8623  transition: opacity 200ms ease;8624}86258626.peach-notes-editor-wrapper.is-visible {8627  opacity: 1;8628  pointer-events: auto;8629}86308631/* TOC inner */8632.peach-notes-toc {8633  position: relative;8634  display: flex;8635  flex-direction: column;8636  height: 100%;8637  padding-top: env(safe-area-inset-top, 0px);8638  padding-bottom: env(safe-area-inset-bottom, 0px);8639}86408641/* Shared header */8642.peach-notes-header {8643  display: flex;8644  align-items: center;8645  padding: 12px 16px;8646  gap: 12px;8647  flex-shrink: 0;8648  min-height: 52px;8649  position: relative;8650  z-index: 2;8651}86528653.peach-notes-back {8654  font-size: 22px;8655  color: var(--peach-t2);8656  background: none;8657  border: none;8658  padding: 4px;8659  cursor: pointer;8660  line-height: 1;8661  flex-shrink: 0;8662  transition: color 150ms ease;8663  -webkit-tap-highlight-color: transparent;8664}86658666.peach-notes-back:active { color: var(--peach-t0); }86678668.peach-notes-header-title {8669  flex: 1;8670  font-family: 'Cormorant Garamond', serif;8671  font-style: italic;8672  font-size: 22px;8673  color: var(--peach-t0);8674  text-align: center;8675}86768677.peach-notes-header-title.is-breadcrumb {8678  font-family: 'IBM Plex Mono', monospace;8679  font-style: normal;8680  font-size: 11px;8681  color: var(--peach-t3);8682  letter-spacing: 0.08em;8683  text-transform: uppercase;8684  cursor: pointer;8685}86868687.peach-notes-header-actions {8688  display: flex;8689  gap: 8px;8690  flex-shrink: 0;8691}86928693.peach-notes-header-btn {8694  width: 36px;8695  height: 36px;8696  display: flex;8697  align-items: center;8698  justify-content: center;8699  background: none;8700  border: none;8701  color: var(--peach-t2);8702  cursor: pointer;8703  border-radius: 8px;8704  font-size: 16px;8705  transition: color 150ms ease, background 150ms ease;8706  -webkit-tap-highlight-color: transparent;8707}87088709.peach-notes-header-btn:active {8710  background: rgba(255,255,255,0.06);8711  color: var(--peach-t0);8712}87138714/* Inline search bar */8715.peach-notes-search-input {8716  flex: 1;8717  background: none;8718  border: none;8719  outline: none;8720  font-family: 'IBM Plex Mono', monospace;8721  font-size: 13px;8722  color: var(--peach-t0);8723  padding: 4px 0;8724  letter-spacing: 0.02em;8725}87268727.peach-notes-search-input::placeholder {8728  color: var(--peach-t3);8729}87308731/* TOC list */8732.peach-notes-list-container {8733  flex: 1;8734  overflow-y: auto;8735  overflow-x: hidden;8736  scrollbar-width: none;8737  -webkit-overflow-scrolling: touch;8738  overscroll-behavior: contain;8739  position: relative;8740  z-index: 1;8741}87428743.peach-notes-list-container::-webkit-scrollbar { display: none; }87448745/* Note row */8746.peach-note-row {8747  position: relative;8748  display: grid;8749  grid-template-columns: 44px 8px 1fr 8px auto;8750  align-items: center;8751  min-height: 72px;8752  padding: 16px 20px;8753  border-bottom: 0.5px solid var(--peach-border);8754  cursor: pointer;8755  overflow: hidden;8756  touch-action: pan-y;8757  user-select: none;8758  -webkit-user-select: none;8759  -webkit-tap-highlight-color: transparent;8760}87618762.peach-note-row:first-child {8763  border-top: 0.5px solid var(--peach-border);8764}87658766.peach-note-row:active {8767  background: rgba(255,255,255,0.02);8768}87698770.peach-note-numeral {8771  font-family: 'Cormorant Garamond', serif;8772  font-style: italic;8773  font-size: 15px;8774  color: var(--peach-accent);8775  text-align: right;8776  line-height: 1;8777  flex-shrink: 0;8778}87798780.peach-note-title-gap { /* grid spacer */ }87818782.peach-note-title {8783  font-family: 'Cormorant Garamond', serif;8784  font-style: italic;8785  font-size: 18px;8786  color: var(--peach-t0);8787  line-height: 1.3;8788  min-width: 0;8789  overflow-wrap: break-word;8790}87918792.peach-note-title-match {8793  color: var(--peach-accent);8794}87958796.peach-note-date {8797  font-family: 'IBM Plex Mono', monospace;8798  font-size: 11px;8799  color: var(--peach-t2);8800  white-space: nowrap;8801  text-align: right;8802  flex-shrink: 0;8803  grid-column: 5;8804}88058806/* Swipe underlays */8807.peach-note-row-underlay {8808  position: absolute;8809  inset: 0;8810  display: flex;8811  align-items: center;8812  padding: 0 24px;8813  font-family: 'IBM Plex Mono', monospace;8814  font-size: 11px;8815  letter-spacing: 0.1em;8816  pointer-events: none;8817  z-index: 0;8818}88198820.peach-note-row-underlay--delete {8821  background: #8B2020;8822  color: rgba(255,255,255,0.9);8823  justify-content: flex-end;8824}88258826.peach-note-row-underlay--archive {8827  background: var(--peach-accent);8828  color: #0C0A06;8829  justify-content: flex-start;8830}88318832/* Delete confirm strip */8833.peach-note-delete-confirm {8834  position: absolute;8835  inset: 0;8836  background: var(--peach-bg);8837  display: flex;8838  align-items: center;8839  gap: 12px;8840  padding: 0 20px;8841  font-family: 'IBM Plex Mono', monospace;8842  font-size: 11px;8843  color: var(--peach-t1);8844  letter-spacing: 0.04em;8845  animation: peach-delete-confirm-in 150ms ease both;8846  z-index: 10;8847}88488849@keyframes peach-delete-confirm-in {8850  from { opacity: 0; }8851  to   { opacity: 1; }8852}88538854.peach-note-delete-confirm-btn {8855  background: #8B2020;8856  color: rgba(255,255,255,0.9);8857  border: none;8858  border-radius: 6px;8859  padding: 4px 10px;8860  font-family: 'IBM Plex Mono', monospace;8861  font-size: 10px;8862  cursor: pointer;8863  letter-spacing: 0.06em;8864}88658866.peach-note-delete-cancel-btn {8867  background: none;8868  border: none;8869  color: var(--peach-t3);8870  font-family: 'IBM Plex Mono', monospace;8871  font-size: 10px;8872  cursor: pointer;8873  letter-spacing: 0.06em;8874  padding: 4px 6px;8875}88768877/* + New note button */8878.peach-notes-new-btn {8879  font-family: 'IBM Plex Mono', monospace;8880  font-size: 12px;8881  color: var(--peach-t3);8882  text-align: center;8883  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8884  background: none;8885  border: none;8886  width: 100%;8887  cursor: pointer;8888  letter-spacing: 0.04em;8889  transition: color 150ms ease;8890  -webkit-tap-highlight-color: transparent;8891}88928893.peach-notes-new-btn:active { color: var(--peach-accent); }88948895/* Empty state */8896.peach-notes-empty {8897  display: flex;8898  flex-direction: column;8899  align-items: center;8900  justify-content: center;8901  flex: 1;8902  padding: 48px 32px;8903  gap: 16px;8904}89058906.peach-notes-empty-text {8907  font-family: 'Cormorant Garamond', serif;8908  font-style: italic;8909  font-size: 20px;8910  color: var(--peach-t3);8911  text-align: center;8912  margin: 0;8913  line-height: 1.4;8914  white-space: pre-line;8915}89168917/* ── Editor surface ── */89188919.peach-note-editor-surface {8920  position: absolute;8921  inset: 0;8922  background: var(--peach-bg);8923  display: flex;8924  flex-direction: column;8925  padding-top: env(safe-area-inset-top, 0px);8926}89278928.peach-note-editor-scroll {8929  flex: 1;8930  overflow-y: auto;8931  overflow-x: hidden;8932  scrollbar-width: none;8933  -webkit-overflow-scrolling: touch;8934  padding: 0 24px 120px;8935  position: relative;8936  z-index: 1;8937}89388939.peach-note-editor-scroll::-webkit-scrollbar { display: none; }89408941/* Desktop toolbar (always visible above body) */8942.peach-note-toolbar-desktop-inline {8943  display: flex;8944  align-items: center;8945  gap: 2px;8946  padding: 6px 0 12px;8947  margin-bottom: 4px;8948  border-bottom: 0.5px solid var(--peach-border);8949}89508951/* Title field */8952.peach-note-title-field {8953  font-family: 'Cormorant Garamond', serif;8954  font-style: italic;8955  font-size: 32px;8956  font-weight: 600;8957  color: var(--peach-t0);8958  line-height: 1.2;8959  padding: 8px 0 0;8960  outline: none;8961  min-height: 44px;8962  word-break: break-word;8963  position: relative;8964  z-index: 1;8965}89668967.peach-note-title-field:empty::before {8968  content: attr(data-placeholder);8969  color: var(--peach-t3);8970  pointer-events: none;8971}89728973/* Hairline separator */8974.peach-note-hairline {8975  height: 0.5px;8976  background: var(--peach-border);8977  margin: 12px 0 20px;8978  position: relative;8979  z-index: 1;8980}89818982/* Body field */8983.peach-note-body-field {8984  font-family: 'DM Sans', sans-serif;8985  font-size: 16px;8986  color: var(--peach-t0);8987  line-height: 1.85;8988  padding: 0;8989  outline: none;8990  min-height: 240px;8991  word-break: break-word;8992  position: relative;8993  z-index: 1;8994}89958996.peach-note-body-field:empty::before {8997  content: attr(data-placeholder);8998  color: var(--peach-t3);8999  font-style: italic;9000  pointer-events: none;9001}90029003.peach-note-body-field h2 {9004  font-family: 'Cormorant Garamond', serif;9005  font-style: italic;9006  font-size: 22px;9007  font-weight: 600;9008  color: var(--peach-t0);9009  margin: 20px 0 8px;9010}90119012.peach-note-body-field blockquote {9013  border-left: 2px solid var(--peach-accent);9014  margin: 12px 0;9015  padding-left: 16px;9016  color: var(--peach-t1);9017  font-style: italic;9018}90199020.peach-note-body-field ul,9021.peach-note-body-field ol {9022  padding-left: 20px;9023  margin: 8px 0;9024}90259026.peach-note-body-field li {9027  margin: 4px 0;9028}90299030.peach-note-body-field hr {9031  border: none;9032  border-top: 0.5px solid var(--peach-border);9033  margin: 16px 0;9034}90359036/* Saved indicator */9037.peach-note-saved-indicator {9038  font-family: 'IBM Plex Mono', monospace;9039  font-size: 11px;9040  color: var(--peach-t3);9041  letter-spacing: 0.04em;9042  text-align: right;9043  padding: 6px 24px;9044  flex-shrink: 0;9045  transition: opacity 300ms ease;9046  pointer-events: none;9047  position: relative;9048  z-index: 1;9049}90509051/* Mobile keyboard toolbar */9052.peach-note-toolbar-mobile {9053  display: flex;9054  align-items: center;9055  padding: 8px 16px;9056  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));9057  background: var(--peach-bg);9058  border-top: 0.5px solid var(--peach-border);9059  gap: 4px;9060  flex-shrink: 0;9061  position: relative;9062  z-index: 10;9063}90649065.peach-note-toolbar-btn {9066  min-width: 36px;9067  height: 36px;9068  display: flex;9069  align-items: center;9070  justify-content: center;9071  background: none;9072  border: none;9073  border-radius: 8px;9074  cursor: pointer;9075  font-size: 14px;9076  color: var(--peach-t1);9077  font-family: 'DM Sans', sans-serif;9078  font-weight: 600;9079  transition: background 100ms ease, color 100ms ease;9080  -webkit-tap-highlight-color: transparent;9081}90829083.peach-note-toolbar-btn--italic { font-style: italic; }9084.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }9085.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }90869087.peach-note-toolbar-divider {9088  width: 0.5px;9089  height: 20px;9090  background: var(--peach-border);9091  margin: 0 4px;9092  flex-shrink: 0;9093}90949095.peach-note-toolbar-spacer { flex: 1; }90969097/* Desktop: larger headline in TOC */9098@media (min-width: 400px) {9099  .peach-notes-header-title:not(.is-breadcrumb) {9100    font-size: 32px;9101  }91029103  .peach-note-row {9104    min-height: 64px;9105    padding: 14px 16px;9106  }9107}91089109/* Flying title — shared element during expansion/collapse */91109111/* ─── Light theme overrides ───────────────────────────────────────────────9112   Tokens that cannot be expressed as variable substitutions — hardcoded9113   context-specific values that need separate light-mode rules. */91149115/* Settings section headers: use text-label (#79766F) per restoration brief —9116   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY9117   presence without fighting the light parchment background. */9118.light .peach-settings-sub-label,9119[data-theme="light"] .peach-settings-sub-label,9120.light .peach-settings-nav-label,9121[data-theme="light"] .peach-settings-nav-label {9122  color: #79766F;9123}91249125/* Secondary action buttons (ghost / subtle): filled with input-well surface9126   so they read as recessed against the parchment card background. */9127.light .peach-btn--ghost:not(.peach-icon-btn),9128[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {9129  background: #EEE7DD;9130  border-color: #DDD5CB;9131  color: #1A1208;9132}9133.light .peach-icon-btn,9134[data-theme="light"] .peach-icon-btn {9135  background: transparent;9136  border-color: transparent;9137}9138.light .peach-btn--subtle,9139[data-theme="light"] .peach-btn--subtle {9140  background: #EEE7DD;9141  border-color: #DDD5CB;9142}91439144/* Wide secondary action button on the lock screen — override the9145   hardcoded dark-mode rgba values with warm parchment equivalents. */9146.light .peach-lock-secondary,9147[data-theme="light"] .peach-lock-secondary {9148  background: #EEE7DD;9149  border-color: #DDD5CB;9150  color: #1A1208;9151}9152.light .peach-lock-secondary:hover,9153[data-theme="light"] .peach-lock-secondary:hover {9154  background: #F0E9DF;9155}91569157/* Entry row hover: bg-row lifts the row above the card surface. */9158.light .peach-entry-row:hover,9159[data-theme="light"] .peach-entry-row:hover {9160  background: #F2EBE1;9161}9162.light .peach-entry-row.is-active,9163[data-theme="light"] .peach-entry-row.is-active {9164  background: #F2EBE1;9165}9166.light .peach-entry-row.is-selected,9167[data-theme="light"] .peach-entry-row.is-selected {9168  background: #F5EDE2;9169}91709171/* ──────────────────────────────────────────────────────────────────────────9172   Pair-device flow — bird-stage animation (Phase 1)9173   See src/popup/components/PairingBirds.tsx and the brief §6.2.9174   Three-act animation gated on the [data-phase] attribute of9175   .peach-pair-pair; child layers (birds, sound arcs, flight wave, dot)9176   each react via either pose class or visibility flag.9177   Tokens: accent surfaces use var(--peach-accent); bird illustration9178   colours are baked into the SVG per the brand-peach exception in §3.1.9179   ────────────────────────────────────────────────────────────────────── */91809181.peach-pair-pair {9182  position: absolute;9183  inset: 0;9184  z-index: 3;9185  display: flex;9186  flex-direction: column;9187  padding: 14px 12px 12px;9188  width: 100%;9189  box-sizing: border-box;9190  gap: 0;9191  background:9192    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9193    var(--peach-bg);9194  color: var(--peach-t0);9195  overflow-y: auto;9196  overflow-x: hidden;9197  scrollbar-width: none;9198  isolation: isolate;9199  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9200}9201@keyframes peach-pair-overlay-in {9202  from { opacity: 0; transform: translateY(8px); }9203  to   { opacity: 1; transform: translateY(0); }9204}9205.peach-pair-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }9206.peach-pair-pair::before {9207  content: '';9208  position: absolute;9209  inset: 0;9210  border-radius: inherit;9211  pointer-events: none;9212  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9213  z-index: 0;9214}9215.peach-pair-pair > * { position: relative; z-index: 1; }92169217/* Header --------------------------------------------------------------- */9218.peach-pair-head {9219  display: flex; align-items: center; gap: 10px;9220}9221.peach-pair-back {9222  width: 32px; height: 32px;9223  display: inline-flex; align-items: center; justify-content: center;9224  background: transparent;9225  border: none;9226  border-radius: 8px;9227  color: var(--peach-t1);9228  cursor: pointer;9229  transition: color 0.15s ease, box-shadow 0.15s ease;9230}9231.peach-pair-back:hover {9232  color: var(--peach-accent);9233  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9234}9235.peach-pair-title {9236  font-family: var(--font-display, Georgia, serif);9237  font-style: italic;9238  font-size: 24px;9239  font-weight: 500;9240  letter-spacing: 0.005em;9241  color: var(--peach-t0);9242  line-height: 1;9243}9244.peach-pair-head-spacer { flex: 1; }92459246/* Chip row ------------------------------------------------------------- */9247.peach-pair-chip-row {9248  display: flex;9249  align-items: center;9250  justify-content: flex-start;9251  margin-top: 12px;9252}9253.peach-pair-chip {9254  display: inline-flex; align-items: center; gap: 8px;9255  padding: 5px 10px 5px 8px;9256  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9257  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9258  border-radius: 999px;9259  font-family: var(--peach-mono, ui-monospace, monospace);9260  font-size: 11px;9261  letter-spacing: 0.04em;9262  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9263}9264.peach-pair-chip-dot {9265  width: 6px; height: 6px; border-radius: 50%;9266  background: var(--peach-accent);9267  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9268}9269.peach-pair-chip[data-phase="paired"] {9270  background: color-mix(in srgb, #4f9eda 12%, transparent);9271  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9272  color: #76b6e8;9273}9274.peach-pair-chip[data-phase="paired"] .peach-pair-chip-dot {9275  background: #76b6e8;9276  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9277}9278.peach-pair-chip[data-phase="timeout"],9279.peach-pair-chip[data-phase="mic_denied"],9280.peach-pair-chip[data-phase="version_mismatch"],9281.peach-pair-chip[data-phase="handshake_failed"] {9282  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9283  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9284  color: var(--peach-warn, #d29257);9285}9286.peach-pair-chip[data-phase="timeout"] .peach-pair-chip-dot,9287.peach-pair-chip[data-phase="mic_denied"] .peach-pair-chip-dot,9288.peach-pair-chip[data-phase="version_mismatch"] .peach-pair-chip-dot,9289.peach-pair-chip[data-phase="handshake_failed"] .peach-pair-chip-dot {9290  background: var(--peach-warn, #d29257);9291  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9292}92939294/* Bird stage ----------------------------------------------------------- */9295.peach-pair-stage {9296  position: relative;9297  /* Never let the flex column steal the stage's height to fit whatever is9298     below it — that is what clipped the birds to their legs before. Anything9299     that does not fit has to give somewhere else. */9300  flex: none;9301  margin: 14px 0 8px;9302  height: 180px;9303  border-radius: 12px;9304  background:9305    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9306    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),9307    color-mix(in srgb, var(--peach-bg) 92%, #000);9308  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);9309  overflow: hidden;9310  isolation: isolate;9311}9312.peach-pair-stage::after {9313  content: '';9314  position: absolute;9315  left: 12%; right: 12%;9316  bottom: 36px;9317  height: 1px;9318  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9319}93209321.peach-pair-bird-slot {9322  position: absolute;9323  bottom: 8px;9324  width: 100px;9325  height: 110px;9326  display: flex;9327  align-items: flex-end;9328  justify-content: center;9329}9330.peach-pair-bird-slot-desktop { left: 28px; }9331.peach-pair-bird-slot-mobile { right: 28px; }93329333/* The QR screen is the tallest in the flow: a 180px stage plus headline, sub,9334   QR and action overflows the popup, and the stage is what gets clipped — you9335   saw bird legs and nothing else. Shrink the stage and the birds with it here9336   only, so the birds stay whole and the QR stays comfortably above the fold.9337   Uses the individual `scale` property rather than `transform`, which the9338   mobile bird's hop animation already owns. */9339.peach-adoption-source[data-phase="invitation"] .peach-pair-stage {9340  height: 108px;9341  margin: 8px 0 6px;9342}9343.peach-adoption-source[data-phase="invitation"] .peach-pair-bird-slot {9344  scale: 0.62;9345  transform-origin: center bottom;9346}9347.peach-adoption-source[data-phase="invitation"] .peach-pair-stage::after {9348  bottom: 20px;9349}93509351/* Mobile bird hops in from the right when handshake begins */9352.peach-pair-bird-slot-mobile {9353  opacity: 1;9354  transform: translateX(-6px);9355  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9356}9357.peach-pair-stage.act-listening .peach-pair-bird-slot-mobile,9358.peach-pair-stage.act-chirping .peach-pair-bird-slot-mobile,9359.peach-pair-stage.act-idle .peach-pair-bird-slot-mobile {9360  opacity: 0;9361  transform: translateX(60px) rotate(8deg);9362}9363.peach-pair-stage.act-handshake .peach-pair-bird-slot-desktop,9364.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop {9365  transform: translateX(6px);9366  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9367}93689369/* Paired: both birds bob together */9370.peach-pair-stage.act-paired .peach-pair-bird-slot {9371  animation: peach-pair-happy-bob 1.2s ease-in-out infinite;9372}9373.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { animation-delay: 0.2s; }9374.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop { --bb-x: 6px; }9375.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { --bb-x: -6px; }9376@keyframes peach-pair-happy-bob {9377  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9378  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9379}93809381/* Bird internal -------------------------------------------------------- */9382.peach-pair-bird {9383  width: 108px;9384  height: 108px;9385  transform-origin: 50% 95%;9386}9387.peach-pair-bird svg { width: 100%; height: 100%; overflow: visible; }93889389.peach-pair-bird-body {9390  transform-origin: 50% 80%;9391  animation: peach-pair-bird-bob 2.4s ease-in-out infinite;9392}9393@keyframes peach-pair-bird-bob {9394  0%, 100% { transform: translateY(0) scale(1, 1); }9395  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9396}93979398.peach-pair-bird-eye-group {9399  animation: peach-pair-blink 5.2s steps(1, end) infinite;9400  transform-origin: center;9401  transform-box: fill-box;9402}9403@keyframes peach-pair-blink {9404  0%, 92%, 96%, 100% { transform: scaleY(1); }9405  94%                { transform: scaleY(0.05); }9406}94079408/* Pose: chirping — beak opens, head bobs, aura blooms */9409.peach-pair-bird-pose-chirping .peach-pair-bird-body {9410  animation:9411    peach-pair-bird-bob 2.4s ease-in-out infinite,9412    peach-pair-squeeze 1.7s ease-in-out infinite;9413}9414@keyframes peach-pair-squeeze {9415  0%, 70%, 100% { transform-origin: 50% 85%; }9416  78%           { transform: scale(1.04, 0.96) translateY(1px); }9417  86%           { transform: scale(0.98, 1.02); }9418}9419.peach-pair-bird-pose-chirping .peach-pair-bird-head-group {9420  animation: peach-pair-head-bob 1.7s ease-in-out infinite;9421}9422@keyframes peach-pair-head-bob {9423  0%, 70%, 100% { transform: translateY(0) rotate(0); }9424  78%           { transform: translateY(-3px) rotate(-4deg); }9425  86%           { transform: translateY(-1px) rotate(-2deg); }9426}9427.peach-pair-bird-pose-chirping .peach-pair-bird-beak {9428  animation: peach-pair-beak-open 1.7s ease-in-out infinite;9429}9430@keyframes peach-pair-beak-open {9431  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9432  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9433  86%           { transform: rotate(-6deg); }9434}9435.peach-pair-bird-pose-chirping .peach-pair-bird-aura {9436  animation: peach-pair-aura 1.7s ease-in-out infinite;9437}9438@keyframes peach-pair-aura {9439  0%, 100% { opacity: 0; }9440  50%      { opacity: 0.8; }9441}9442.peach-pair-bird-pose-chirping .peach-pair-bird-tail {9443  animation: peach-pair-tail-twitch 1.7s ease-in-out infinite;9444  transform-origin: 100% 50%;9445}9446@keyframes peach-pair-tail-twitch {9447  0%, 75%, 100% { transform: rotate(0); }9448  82%           { transform: rotate(-3deg) translateX(-1px); }9449}94509451/* Pose: attentive — head tilts toward partner */9452.peach-pair-bird-pose-attentive .peach-pair-bird-head-group {9453  animation: peach-pair-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9454}9455@keyframes peach-pair-head-tilt {9456  0%   { transform: rotate(0) translateY(0); }9457  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9458  100% { transform: rotate(-6deg); }9459}9460.peach-pair-bird-pose-attentive .peach-pair-bird-tail {9461  animation: peach-pair-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9462  transform-origin: 100% 50%;9463}9464@keyframes peach-pair-tail-cock {9465  0%   { transform: rotate(0); }9466  100% { transform: rotate(-4deg); }9467}94689469/* Pose: happy — wing flutter, tuft perk, tail wag */9470.peach-pair-bird-pose-happy .peach-pair-bird-wing {9471  transform-origin: 80% 60%;9472  animation: peach-pair-wing-flutter 0.32s ease-in-out 5;9473}9474@keyframes peach-pair-wing-flutter {9475  0%, 100% { transform: rotate(0) translateY(0); }9476  50%      { transform: rotate(-16deg) translateY(-2px); }9477}9478.peach-pair-bird-pose-happy .peach-pair-bird-tuft {9479  transform-origin: 0% 100%;9480  animation: peach-pair-tuft-perk 0.4s ease-in-out 3;9481}9482@keyframes peach-pair-tuft-perk {9483  0%, 100% { transform: rotate(0); }9484  50%      { transform: rotate(-15deg) translateY(-1px); }9485}9486.peach-pair-bird-pose-happy .peach-pair-bird-tail {9487  transform-origin: 100% 50%;9488  animation: peach-pair-tail-wag 0.5s ease-in-out 4;9489}9490@keyframes peach-pair-tail-wag {9491  0%, 100% { transform: rotate(0); }9492  25%      { transform: rotate(6deg); }9493  75%      { transform: rotate(-6deg); }9494}9495.peach-pair-bird-pose-happy .peach-pair-bird-head-group {9496  animation: peach-pair-head-perk 0.5s ease-out;9497}9498@keyframes peach-pair-head-perk {9499  0%   { transform: translateY(0); }9500  40%  { transform: translateY(-3px) rotate(2deg); }9501  100% { transform: translateY(0); }9502}95039504/* Pose: sad — body droops forward */9505.peach-pair-bird-pose-sad .peach-pair-bird-body {9506  transform: translateY(5px) rotate(-2deg);9507  animation: none;9508}9509.peach-pair-bird-pose-sad .peach-pair-bird-head-group {9510  transform: translateY(4px) rotate(8deg);9511}9512.peach-pair-bird-pose-sad .peach-pair-bird-tuft { transform: rotate(15deg) translateY(2px); }9513.peach-pair-bird-pose-sad .peach-pair-bird-tail { transform: rotate(8deg) translateY(2px); }95149515.peach-pair-bird-pose-hidden { opacity: 0; }95169517/* Sound arcs ----------------------------------------------------------- */9518.peach-pair-arcs {9519  position: absolute;9520  top: 18px;9521  width: 96px;9522  height: 70px;9523  pointer-events: none;9524}9525.peach-pair-arcs-right { right: -60px; }9526.peach-pair-arcs-left  { left: -60px; transform: scaleX(-1); }9527.peach-pair-arc {9528  position: absolute;9529  top: 50%;9530  left: 0;9531  width: 40px;9532  height: 40px;9533  margin-top: -20px;9534  border: 1.2px solid #f4d5a8;9535  border-color: transparent #f4d5a8 transparent transparent;9536  border-radius: 50%;9537  opacity: 0;9538  animation: peach-pair-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9539}9540@keyframes peach-pair-arc-expand {9541  0%   { transform: scale(0.4); opacity: 0; }9542  20%  { opacity: 0.9; }9543  100% { transform: scale(1.6); opacity: 0; }9544}95459546/* Flight wave ---------------------------------------------------------- */9547.peach-pair-flight-track {9548  position: absolute;9549  inset: 32px 36px 38px 36px;9550  pointer-events: none;9551}9552.peach-pair-flight-wave {9553  position: absolute;9554  top: 8px;9555  left: 76px;9556  right: 76px;9557  height: 60px;9558  width: auto;9559  opacity: 0;9560  transition: opacity 0.15s ease;9561  stroke: #f4d5a8;9562  fill: none;9563}9564.peach-pair-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9565.peach-pair-flight-wave.is-visible { opacity: 1; }9566.peach-pair-flight-path,9567.peach-pair-flight-path-2 {9568  stroke-dasharray: 240;9569  stroke-dashoffset: 240;9570  stroke-linecap: round;9571  fill: none;9572}9573.peach-pair-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9574.peach-pair-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9575.peach-pair-flight-wave.is-visible .peach-pair-flight-path {9576  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9577}9578.peach-pair-flight-wave.is-visible .peach-pair-flight-path-2 {9579  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9580}9581@keyframes peach-pair-fly {9582  0%   { stroke-dashoffset: 240; opacity: 0; }9583  20%  { opacity: 1; }9584  100% { stroke-dashoffset: -120; opacity: 0; }9585}95869587/* Connection dot ------------------------------------------------------- */9588.peach-pair-dot {9589  position: absolute;9590  top: 50%; left: 50%;9591  transform: translate(-50%, -50%);9592  width: 40px; height: 40px;9593  opacity: 0;9594  pointer-events: none;9595  transition: opacity 0.3s ease;9596  color: var(--peach-accent);9597}9598.peach-pair-dot.is-visible { opacity: 1; }9599.peach-pair-dot-glow {9600  position: absolute; top: 50%; left: 50%;9601  transform: translate(-50%, -50%);9602  width: 38px; height: 38px;9603  border-radius: 50%;9604  filter: blur(10px);9605  opacity: 0.55;9606  background: var(--peach-accent);9607  animation: peach-pair-dot-bloom 1.4s ease-out;9608}9609.peach-pair-dot-core {9610  position: absolute; top: 50%; left: 50%;9611  transform: translate(-50%, -50%);9612  width: 8px; height: 8px;9613  border-radius: 50%;9614  background: var(--peach-accent);9615  box-shadow: 0 0 12px currentColor;9616  animation: peach-pair-dot-core 1.4s ease-out;9617}9618.peach-pair-dot-ring {9619  position: absolute; top: 50%; left: 50%;9620  width: 60px; height: 60px;9621  transform: translate(-50%, -50%);9622  animation: peach-pair-dot-ring 1.4s linear;9623  stroke: var(--peach-accent);9624}9625@keyframes peach-pair-dot-bloom {9626  0%   { width: 4px; height: 4px; opacity: 0; }9627  35%  { width: 60px; height: 60px; opacity: 0.7; }9628  100% { width: 38px; height: 38px; opacity: 0.55; }9629}9630@keyframes peach-pair-dot-core {9631  0%   { width: 0; height: 0; }9632  35%  { width: 12px; height: 12px; }9633  100% { width: 8px; height: 8px; }9634}9635@keyframes peach-pair-dot-ring {9636  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9637  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9638  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9639}96409641/* Motes — drift upward across the stage */9642.peach-pair-motes {9643  position: absolute;9644  inset: 0;9645  pointer-events: none;9646}9647.peach-pair-mote {9648  position: absolute;9649  width: 2px; height: 2px;9650  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9651  border-radius: 50%;9652  bottom: 32px;9653  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9654  opacity: 0;9655  animation: peach-pair-mote-drift 6s linear infinite;9656  animation-delay: calc(var(--mote-i, 0) * 0.7s);9657}9658@keyframes peach-pair-mote-drift {9659  0%   { transform: translateY(0); opacity: 0; }9660  10%  { opacity: 0.6; }9661  90%  { opacity: 0.1; }9662  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9663}96649665/* Status copy ---------------------------------------------------------- */9666.peach-pair-copy-host {9667  margin: 4px 4px 10px;9668  text-align: center;9669  min-height: 50px;9670}9671.peach-pair-copy {9672  animation: peach-pair-copy-in 0.35s ease both;9673}9674@keyframes peach-pair-copy-in {9675  from { opacity: 0; transform: translateY(4px); }9676  to   { opacity: 1; transform: translateY(0); }9677}9678.peach-pair-headline {9679  font-family: var(--font-display, Georgia, serif);9680  font-style: italic;9681  font-size: 20px;9682  font-weight: 500;9683  line-height: 1.2;9684  letter-spacing: 0.005em;9685  color: var(--peach-t0);9686  margin-bottom: 6px;9687}9688.peach-pair-copy-listening .peach-pair-headline,9689.peach-pair-copy-chirping .peach-pair-headline,9690.peach-pair-copy-idle .peach-pair-headline {9691  font-family: inherit;9692  font-style: normal;9693  font-weight: 500;9694  font-size: 15px;9695  color: var(--peach-t0);9696  letter-spacing: 0;9697}9698.peach-pair-copy-paired .peach-pair-headline {9699  color: var(--peach-t0);9700  font-weight: 600;9701}9702.peach-pair-sub {9703  font-size: 12.5px;9704  line-height: 1.45;9705  color: var(--peach-t1);9706  max-width: 280px;9707  margin: 0 auto;9708  text-wrap: pretty;9709}97109711/* Status action -------------------------------------------------------- */9712.peach-pair-action {9713  margin: 2px 4px 10px;9714  margin-top: auto;9715  display: flex;9716  flex-direction: column;9717  gap: 8px;9718}9719.peach-pair-action-waiting {9720  display: flex;9721  align-items: center;9722  justify-content: space-between;9723  gap: 12px;9724}9725.peach-pair-cancel {9726  min-width: 96px;9727}9728.peach-pair-listening {9729  display: inline-flex; align-items: center; gap: 4px;9730  font-family: var(--peach-mono, ui-monospace, monospace);9731  font-size: 9.5px;9732  text-transform: uppercase;9733  letter-spacing: 0.12em;9734  color: var(--peach-t1);9735  padding: 8px 10px;9736}9737.peach-pair-listen-dot {9738  width: 4px; height: 4px;9739  border-radius: 50%;9740  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9741  animation: peach-pair-listen-pulse 1.2s ease-in-out infinite;9742}9743.peach-pair-listen-dot:nth-child(2) { animation-delay: 0.2s; }9744.peach-pair-listen-dot:nth-child(3) { animation-delay: 0.4s; }9745.peach-pair-listen-label { margin-left: 6px; }9746@keyframes peach-pair-listen-pulse {9747  0%, 100% { opacity: 0.25; transform: scale(0.9); }9748  50%      { opacity: 1;     transform: scale(1.15); }9749}97509751.peach-pair-action-handshake {9752  display: flex;9753  flex-direction: column;9754  align-items: center;9755  gap: 8px;9756  padding: 8px 4px;9757}9758.peach-pair-meter {9759  width: 100%;9760  max-width: 280px;9761  height: 2px;9762  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9763  border-radius: 2px;9764  position: relative;9765  overflow: hidden;9766}9767.peach-pair-meter-bar {9768  position: absolute;9769  top: 0; bottom: 0;9770  width: 30%;9771  left: -30%;9772  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9773  animation: peach-pair-meter-sweep 1.4s ease-in-out infinite;9774}9775@keyframes peach-pair-meter-sweep {9776  0%   { left: -30%; }9777  100% { left: 100%; }9778}9779.peach-pair-meter-label {9780  font-family: var(--peach-mono, ui-monospace, monospace);9781  font-size: 9.5px;9782  text-transform: uppercase;9783  letter-spacing: 0.14em;9784  color: var(--peach-t1);9785}97869787.peach-pair-action-paired {9788  display: flex;9789  align-items: center;9790  gap: 10px;9791}9792.peach-pair-device-confirm {9793  flex: 1;9794  display: inline-flex;9795  align-items: center;9796  gap: 8px;9797  padding: 9px 10px 9px 12px;9798  border-radius: 10px;9799  background: color-mix(in srgb, #76b6e8 12%, transparent);9800  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9801  font-size: 12.5px;9802  color: var(--peach-t0);9803  min-width: 0;9804}9805.peach-pair-device-confirm-glyph {9806  display: inline-flex;9807  color: #76b6e8;9808}9809.peach-pair-device-confirm-name {9810  flex: 1;9811  overflow: hidden;9812  text-overflow: ellipsis;9813  white-space: nowrap;9814}9815.peach-pair-device-confirm-trust {9816  font-family: var(--peach-mono, ui-monospace, monospace);9817  font-size: 9.5px;9818  text-transform: uppercase;9819  letter-spacing: 0.1em;9820  color: #76b6e8;9821  padding: 2px 6px;9822  border-radius: 4px;9823  background: color-mix(in srgb, #76b6e8 14%, transparent);9824}9825.peach-pair-done {9826  min-width: 80px;9827}9828.peach-pair-retry {9829  align-self: center;9830  display: block;9831  margin: 6px auto 0;9832  min-width: 120px;9833}9834.peach-pair-mic-help {9835  font-size: 12px;9836  color: var(--peach-t1);9837  text-align: center;9838  max-width: 320px;9839  margin: 0 auto;9840}98419842/* Rest state — bird stage at idle pose, primary CTA + paired list */9843.peach-pair-pair[data-phase="idle"] .peach-pair-stage {9844  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9845  height: 160px;9846}9847.peach-pair-pair-start {9848  width: 100%;9849  display: inline-flex;9850  align-items: center;9851  justify-content: center;9852  gap: 8px;9853  padding: 11px 14px;9854  border-radius: 10px;9855  background: var(--peach-accent);9856  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9857  color: #1a0905;9858  font-family: inherit;9859  font-size: 13px;9860  font-weight: 600;9861  letter-spacing: 0.01em;9862  cursor: pointer;9863  transition: filter 0.15s ease, transform 0.1s ease;9864}9865.peach-pair-pair-start:hover { filter: brightness(1.08); }9866.peach-pair-pair-start:active { transform: translateY(1px); }98679868.peach-pair-paired-section {9869  margin-top: 14px;9870  display: flex;9871  flex-direction: column;9872  gap: 8px;9873}9874.peach-pair-paired-heading {9875  margin: 0;9876  font-family: var(--peach-mono, ui-monospace, monospace);9877  font-size: 10px;9878  font-weight: 500;9879  letter-spacing: 0.14em;9880  text-transform: uppercase;9881  color: var(--peach-t1);9882}98839884/* Footer --------------------------------------------------------------- */9885.peach-pair-foot {9886  margin: 10px -4px -2px;9887  margin-top: auto;9888}9889.peach-pair-foot-divider {9890  height: 1px;9891  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9892  margin-bottom: 10px;9893}9894.peach-pair-foot-text {9895  font-size: 11px;9896  line-height: 1.5;9897  color: var(--peach-t1);9898  text-align: center;9899  padding: 0 4px;9900  text-wrap: pretty;9901}99029903/* Screen-reader-only live region. Kept off the visual flow but read by9904   assistive tech as the pairing phase advances. */9905.peach-sr-only {9906  position: absolute;9907  width: 1px; height: 1px;9908  padding: 0; margin: -1px;9909  overflow: hidden;9910  clip: rect(0, 0, 0, 0);9911  white-space: nowrap;9912  border: 0;9913}99149915/* Reduced motion — stage simplifies to opacity transitions only */9916@media (prefers-reduced-motion: reduce) {9917  .peach-pair-bird-body,9918  .peach-pair-bird-head-group,9919  .peach-pair-bird-beak,9920  .peach-pair-bird-wing,9921  .peach-pair-bird-tuft,9922  .peach-pair-bird-tail,9923  .peach-pair-bird-eye-group,9924  .peach-pair-bird-aura,9925  .peach-pair-arc,9926  .peach-pair-flight-path,9927  .peach-pair-flight-path-2,9928  .peach-pair-dot-glow,9929  .peach-pair-dot-core,9930  .peach-pair-dot-ring,9931  .peach-pair-mote,9932  .peach-pair-meter-bar,9933  .peach-pair-listen-dot,9934  .peach-pair-bird-slot,9935  .peach-pair-bird-slot-mobile {9936    animation: none !important;9937    transition: opacity 0.2s linear !important;9938  }9939}99409941/* ─────────────────────────────────────────────────────────────────9942   Settings → Sync surface. Wraps the same bird9943   animation used by the pairing flow with a paired-devices list and9944   the "Pair a device" CTA.9945   ───────────────────────────────────────────────────────────────── */9946.peach-pair-settings {9947  position: absolute;9948  inset: 0;9949  z-index: 3;9950  display: flex;9951  flex-direction: column;9952  gap: 18px;9953  padding: 14px 12px 12px;9954  width: 100%;9955  box-sizing: border-box;9956  overflow-y: auto;9957  overflow-x: hidden;9958  /* Same warm surface as the pairing screen — unifies the two views. */9959  background:9960    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9961    var(--peach-bg);9962  color: var(--peach-t0);9963  isolation: isolate;9964  /* Hide native scrollbar — content fits 99% of the time and a chunky9965     gutter ruins the surface. */9966  scrollbar-width: none;9967  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9968}9969.peach-pair-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9970.peach-pair-settings::before {9971  content: '';9972  position: absolute;9973  inset: 0;9974  pointer-events: none;9975  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9976  z-index: 0;9977}9978.peach-pair-settings > * { position: relative; z-index: 1; }99799980.peach-pair-settings--pairing {9981  padding: 0;9982  align-items: stretch;9983  justify-content: stretch;9984  background: none;9985  isolation: auto;9986}9987.peach-pair-settings--pairing::before { display: none; }99889989.peach-pair-settings-header {9990  display: flex;9991  align-items: center;9992  gap: 10px;9993}9994.peach-pair-settings-title {9995  margin: 0;9996  font-family: var(--font-display, Georgia, serif);9997  font-style: italic;9998  font-size: 24px;9999  font-weight: 500;10000  line-height: 1;10001  color: var(--peach-t0);10002  letter-spacing: 0.005em;10003}10004.peach-pair-settings-section {10005  margin: 6px 0 -4px;10006  font-size: 11px;10007  font-weight: 600;10008  letter-spacing: 0.08em;10009  text-transform: uppercase;10010  color: var(--peach-text-muted);10011}10012.peach-pair-settings-error {10013  font-size: 12px;10014  padding: 8px 10px;10015  border-radius: 8px;10016  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);10017  color: var(--peach-text);10018}10019.peach-pair-settings-footer {10020  margin-top: auto;10021  padding-top: 18px;10022  font-size: 11.5px;10023  line-height: 1.5;10024  color: var(--peach-text-muted);10025  text-align: center;10026}1002710028/* Hero card shown when no devices are paired yet. */10029.peach-pair-hero {10030  display: flex;10031  flex-direction: column;10032  align-items: center;10033  gap: 12px;10034  padding: 20px 12px 8px;10035  text-align: center;10036}10037.peach-pair-hero-svg {10038  display: block;10039  max-width: 100%;10040  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));10041}10042.peach-pair-hero-headline {10043  margin: 0;10044  font-family: var(--font-display, Georgia, serif);10045  font-style: italic;10046  font-size: 20px;10047  font-weight: 500;10048  line-height: 1.2;10049  letter-spacing: 0.005em;10050  color: var(--peach-t0);10051}10052.peach-pair-hero-sub {10053  margin: 0;10054  font-size: 13px;10055  line-height: 1.5;10056  color: var(--peach-t1);10057  max-width: 320px;10058  text-wrap: pretty;10059}1006010061.peach-pair-pair-cta {10062  display: flex;10063  justify-content: center;10064  padding: 4px 0 6px;10065}10066.peach-pair-pair-button {10067  display: inline-flex;10068  align-items: center;10069  gap: 8px;10070  min-width: 220px;10071  justify-content: center;10072}10073.peach-pair-pair-button-icon {10074  flex: 0 0 auto;10075}1007610077/* Paired devices list. Roomy rows that look at home next to the rest10078   of Settings; stale rows get a soft warm-warning border tint. */10079.peach-pair-device-list {10080  list-style: none;10081  margin: 0;10082  padding: 0;10083  display: flex;10084  flex-direction: column;10085  gap: 8px;10086}10087.peach-pair-device-row {10088  display: flex;10089  align-items: center;10090  gap: 12px;10091  padding: 12px;10092  border-radius: 10px;10093  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10094  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);10095}10096.peach-pair-device-row[data-stale="true"] {10097  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);10098}10099.peach-pair-device-icon {10100  width: 32px;10101  height: 32px;10102  display: flex;10103  align-items: center;10104  justify-content: center;10105  border-radius: 8px;10106  color: var(--peach-text);10107  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);10108}10109.peach-pair-device-info {10110  flex: 1;10111  display: flex;10112  flex-direction: column;10113  gap: 2px;10114  min-width: 0;10115}10116.peach-pair-device-name {10117  font-size: 14px;10118  font-weight: 600;10119  color: var(--peach-text);10120  overflow: hidden;10121  text-overflow: ellipsis;10122  white-space: nowrap;10123}10124.peach-pair-device-meta {10125  font-size: 11.5px;10126  color: var(--peach-text-muted);10127  display: flex;10128  flex-wrap: wrap;10129  align-items: center;10130  gap: 8px;10131}10132.peach-pair-device-badge {10133  font-size: 10.5px;10134  font-weight: 500;10135  letter-spacing: 0.02em;10136  padding: 2px 6px;10137  border-radius: 999px;10138  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);10139  color: var(--peach-text);10140}10141.peach-pair-device-stale {10142  font-size: 10.5px;10143  font-weight: 500;10144  color: var(--peach-warn, #d29257);10145}10146.peach-pair-device-remove {10147  flex: 0 0 auto;10148  color: var(--peach-text-muted);10149}10150.peach-pair-device-remove:hover {10151  color: var(--peach-danger, #c25b4a);10152}10153.peach-pair-unpair-confirm {10154  display: flex;10155  gap: 6px;10156  align-items: center;10157}1015810159/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */10160.peach-pair-pro-card {10161  position: relative;10162  margin: 18px 12px;10163  padding: 18px 20px 22px;10164  border-radius: 22px;10165  background:10166    radial-gradient(140% 90% at 50% 0%,10167      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,10168      transparent 60%),10169    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10170  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);10171  box-shadow:10172    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,10173    0 18px 40px -24px rgba(0, 0, 0, 0.45);10174  display: flex;10175  flex-direction: column;10176  align-items: center;10177  gap: 10px;10178  text-align: center;10179  overflow: hidden;10180}10181.peach-pair-pro-stage {10182  position: relative;10183  width: 220px;10184  height: 140px;10185  display: flex;10186  align-items: flex-end;10187  justify-content: center;10188  margin-bottom: 2px;10189}10190.peach-pair-pro-bird-slot {10191  width: 140px;10192  height: 132px;10193  display: flex;10194  align-items: flex-end;10195  justify-content: center;10196  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));10197}10198.peach-pair-pro-bird-slot .peach-pair-bird {10199  width: 100%;10200  height: 100%;10201}10202.peach-pair-pro-bird-slot .peach-pair-bird svg {10203  width: 100%;10204  height: 100%;10205  overflow: visible;10206}10207.peach-pair-pro-headline {10208  margin: 4px 0 0;10209  font-family: var(--font-display, "Cormorant Garamond", serif);10210  font-style: italic;10211  font-size: 19px;10212  font-weight: 500;10213  letter-spacing: 0.01em;10214  color: var(--peach-t0);10215  max-width: 280px;10216  line-height: 1.25;10217}10218.peach-pair-pro-body {10219  margin: 0;10220  font-size: 13px;10221  line-height: 1.55;10222  color: var(--peach-t1);10223  max-width: 300px;10224}10225.peach-pair-pro-cta {10226  margin-top: 4px;10227}10228.peach-pair-pro-foot {10229  margin: 2px 0 0;10230  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10231  font-size: 0.625rem;10232  letter-spacing: 0.08em;10233  text-transform: uppercase;10234  color: var(--peach-t2);10235  opacity: 0.75;10236}1023710238/* Shell border and shadow in light mode: match dark mode's near-invisible10239   border weight so the popup frame looks the same in both themes. */10240.light .peach-shell,10241.light .peach-screen {10242  border-color: rgba(26, 18, 8, 0.07);10243  box-shadow:10244    0 2px 8px rgba(80, 56, 32, 0.08),10245    0 14px 48px rgba(80, 56, 32, 0.10),10246    0 0 0 1px rgba(26, 18, 8, 0.04);10247}1024810249/* HOLE 4: the revoke confirmation carries its own disclosure, so it needs the10250   full row width rather than sitting inline beside the device name. */10251.peach-settings-row:has(> .peach-unpair-confirm) { flex-wrap: wrap; }10252.peach-unpair-confirm {10253  display: flex;10254  flex-direction: column;10255  gap: 8px;10256  width: 100%;10257}10258.peach-unpair-confirm-note {10259  margin: 0;10260  font-size: 0.6875rem;10261  line-height: 1.5;10262  color: var(--peach-t2);10263}1026410265/* Sync mode selector — three named choices (public / private / off). Replaces10266   the old binary "local network only" toggle; see docs/sync-lan-retirement.md. */10267.peach-sync-mode {10268  display: flex;10269  align-items: flex-start;10270  gap: 10px;10271  width: 100%;10272  text-align: left;10273  padding: 10px 12px;10274  margin-top: 8px;10275  border-radius: 10px;10276  border: 1px solid var(--peach-border);10277  background: color-mix(in srgb, var(--peach-t0) 3%, transparent);10278  color: var(--peach-t1);10279  cursor: pointer;10280  transition: border-color var(--peach-dur-80) var(--peach-curve-arrival),10281              background-color var(--peach-dur-80) var(--peach-curve-arrival);10282}10283.peach-sync-mode:hover:not(:disabled) {10284  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);10285}10286.peach-sync-mode.is-active {10287  border-color: var(--peach-accent);10288  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);10289}10290.peach-sync-mode:disabled { opacity: 0.6; cursor: default; }10291.peach-sync-mode-main { display: flex; flex-direction: column; gap: 3px; flex: 1; }10292.peach-sync-mode-title { font-size: 12px; }10293.peach-sync-mode-sub {10294  font-size: 11px;10295  line-height: 1.5;10296  color: var(--peach-t2);10297}10298.peach-sync-mode-pip {10299  flex: none;10300  margin-top: 3px;10301  width: 12px; height: 12px;10302  border-radius: 50%;10303  border: 1px solid var(--peach-t3);10304}10305.peach-sync-mode.is-active .peach-sync-mode-pip {10306  border-color: var(--peach-accent);10307  background:10308    radial-gradient(circle at 50% 50%, var(--peach-accent) 0 42%, transparent 44%);10309}10310.peach-sync-mode-disclosure {10311  margin: 10px 2px 0;10312  font-size: 11px;10313  line-height: 1.5;10314  color: var(--peach-t2);10315}10316.peach-sync-mode-warn { color: var(--peach-breach); }1031710318/* Compact form, used mid-pairing: a quiet line, not a decision to make. */10319.peach-sync-mode-summary {10320  margin: 8px 2px 0;10321  font-size: 11px;10322  color: var(--peach-t2);10323  text-align: center;10324}10325.peach-sync-mode-change {10326  background: none;10327  border: none;10328  padding: 0;10329  font: inherit;10330  color: var(--peach-accent);10331  text-decoration: underline;10332  cursor: pointer;10333}