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.peach-adopt-card > .peach-btn + .peach-btn {7052  margin-top: 8px;7053}70547055.peach-adopt-actions {7056  display: flex;7057  gap: 10px;7058  margin-top: 14px;7059}70607061.peach-adopt-actions > button {7062  flex: 1;7063}70647065.peach-adopt-birds {7066  width: 120px;7067  height: 54px;7068  margin-bottom: 14px;7069  position: relative;7070}70717072.peach-adopt-birds::before {7073  content: "";7074  position: absolute;7075  left: 29px;7076  right: 29px;7077  top: 25px;7078  height: 1px;7079  background: color-mix(in srgb, var(--peach-accent) 50%, transparent);7080}70817082.peach-adopt-birds span {7083  position: absolute;7084  top: 11px;7085  width: 34px;7086  height: 28px;7087  border-radius: 50% 50% 46% 46%;7088  background: color-mix(in srgb, var(--peach-accent) 45%, var(--peach-t0));7089  box-shadow: 0 0 18px color-mix(in srgb, var(--peach-accent) 24%, transparent);7090  animation: peach-adopt-bob 1.8s ease-in-out infinite;7091}70927093.peach-adopt-birds span:first-child {7094  left: 12px;7095}70967097.peach-adopt-birds span:last-child {7098  right: 12px;7099  animation-delay: 0.25s;7100}71017102.peach-adopt-sas {7103  margin: 18px 0;7104  padding: 14px;7105  border-radius: 8px;7106  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);7107  color: var(--peach-t0);7108  font-size: 1.35rem;7109  font-weight: 800;7110  font-variant-numeric: tabular-nums;7111  text-align: center;7112}71137114@keyframes peach-adopt-bob {7115  0%, 100% { transform: translateY(0); }7116  50% { transform: translateY(-5px); }7117}71187119.peach-onboarding-mobile-card-buttons {7120  display: flex;7121  flex-direction: column;7122  gap: 8px;7123  margin-top: 16px;7124}71257126@keyframes peach-onboard-enter {7127  from { opacity: 0; transform: translateY(20px); }7128  to   { opacity: 1; transform: translateY(0); }7129}71307131@keyframes peach-onboard-exit {7132  from { opacity: 1; }7133  to   { opacity: 0; }7134}71357136@keyframes peach-card-in {7137  from { opacity: 0; transform: translateX(12px); }7138  to   { opacity: 1; transform: translateX(0); }7139}71407141@keyframes peach-card-out {7142  from { opacity: 1; transform: translateX(0); }7143  to   { opacity: 0; transform: translateX(-12px); }7144}71457146/* ─── New vault screen — matched to onboarding card language ─────────── */71477148/* Two classes so this beats the shared .peach-screen.lock-screen--vault-stage7149   rule (same element) without loosening the unlock/restore screens. The7150   create-vault screen is the only vault-stage view tall enough to overflow7151   the 520px popup, so its spacing is tuned to fit header → card → restore →7152   recovery warning with nothing clipped. */7153.peach-screen.peach-newvault {7154  position: relative;7155  display: flex;7156  flex-direction: column;7157  gap: 12px;7158  padding: 14px 16px 12px;7159  overflow: hidden;7160}71617162/* Suppress the warm-blob ambient art inherited from .lock-screen — the7163   new vault card now carries the visual weight. */7164.peach-newvault::before {7165  content: none;7166}71677168.peach-newvault-header {7169  position: relative;7170  z-index: 2;7171  display: flex;7172  align-items: center;7173  gap: 10px;7174  margin-bottom: 2px;7175}71767177.peach-newvault-back {7178  display: inline-flex;7179  align-items: center;7180  gap: 4px;7181  background: transparent;7182  border: none;7183  color: var(--peach-t2);7184  font-family: "IBM Plex Mono", monospace;7185  font-size: 0.625rem;7186  letter-spacing: 0.06em;7187  cursor: pointer;7188  padding: 4px 6px;7189  border-radius: 6px;7190  transition: color 120ms ease, background 120ms ease;7191}71927193.peach-newvault-back:hover {7194  color: var(--peach-t0);7195  background: rgba(240, 232, 216, 0.04);7196}71977198.peach-newvault-mark {7199  position: absolute;7200  right: -12px;7201  top: 6px;7202  width: 110px;7203  height: 110px;7204  pointer-events: none;7205  opacity: 0.10;7206  filter: saturate(0.9);7207  z-index: 0;7208}7209.peach-newvault-mark-art {7210  width: 100%;7211  height: 100%;7212}7213.peach-newvault-mark-art path:nth-child(1) {7214  fill: rgba(123, 144, 96, 0.88);7215}7216.peach-newvault-mark-art path:nth-child(2) {7217  stroke: rgba(94, 122, 66, 0.95);7218}72197220.peach-newvault-card {7221  position: relative;7222  z-index: 1;7223  display: flex;7224  flex-direction: column;7225  gap: 8px;7226  padding: 16px 20px 14px;7227  border-radius: 16px;7228  border: 1px solid var(--peach-t3);7229  background:7230    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));7231  backdrop-filter: blur(3px);7232  -webkit-backdrop-filter: blur(3px);7233  box-shadow:7234    inset 0 1px 0 rgba(240, 232, 216, 0.04),7235    0 12px 28px rgba(0, 0, 0, 0.12);7236  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;7237}72387239.peach-newvault-headline {7240  margin: 0;7241  font-family: var(--font-display);7242  font-style: italic;7243  font-weight: 400;7244  font-size: 24px;7245  line-height: 1.05;7246  color: var(--peach-t0);7247  white-space: pre-line;7248}72497250.peach-newvault-divider {7251  margin: 2px 0 4px;7252  border: 0;7253  border-top: 1px solid var(--peach-t3);7254  width: 100%;7255}72567257.peach-newvault-field {7258  display: flex;7259  flex-direction: column;7260  gap: 4px;7261}72627263.peach-newvault-label-row {7264  display: flex;7265  align-items: center;7266  justify-content: space-between;7267}72687269/* Monospace input scaled to the card. Replaces the 22px unlock-input7270   so the placeholder no longer overflows and the field reads as part7271   of the same surface as the body copy. */7272.peach-newvault-input {7273  font-size: 0.875rem;7274  letter-spacing: 0.18em;7275  padding: 8px 0;7276}7277.peach-newvault-input::placeholder {7278  letter-spacing: 0.18em;7279  color: var(--peach-t2);7280}72817282.peach-newvault-hint {7283  margin: 2px 0 0;7284  font-family: "IBM Plex Mono", monospace;7285  font-size: 0.625rem;7286  color: var(--peach-t2);7287  letter-spacing: 0.04em;7288}72897290.peach-newvault-submit {7291  margin-top: 4px;7292}72937294.peach-newvault-warning {7295  display: flex;7296  align-items: flex-start;7297  gap: 8px;7298  margin: 2px 0 0;7299  padding-top: 8px;7300  border-top: 1px dashed var(--peach-t3);7301  font-size: 0.75rem;7302  line-height: 1.45;7303  color: var(--peach-t1);7304}73057306.peach-newvault-warning-icon {7307  color: var(--peach-accent);7308  font-size: 0.8125rem;7309  line-height: 1.4;7310  flex: 0 0 auto;7311}73127313/* Restore options sit inside the card, directly under "create vault", so7314   they are always reachable without scrolling. The top divider mirrors the7315   warning's so the choice reads as a deliberate fork, not a footnote. */7316.peach-newvault-restore {7317  position: relative;7318  z-index: 1;7319  display: flex;7320  flex-direction: column;7321  gap: 4px;7322  margin-top: 4px;7323  padding-top: 10px;7324  border-top: 1px dashed var(--peach-t3);7325}73267327/* Settings body — warm accent gradient gives the glass something to blur against */7328.peach-settings-body {7329  background:7330    radial-gradient(7331      ellipse at 30% 20%,7332      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7333      transparent 60%7334    );7335}73367337/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7338/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7339 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7340 * (replacing the vault from a backup file) and "hazard" for actions that7341 * are absolutely irreversible (Panic). Both use the same card scaffold so7342 * they read as a pair, but the colour family signals the severity at a7343 * glance — yellow for caution, red for don't.7344 */7345.peach-danger-card {7346  --danger-tint: 235, 158, 52; /* amber */7347  display: flex;7348  flex-direction: column;7349  gap: 8px;7350  padding: 14px;7351  margin-top: 10px;7352  border-radius: 12px;7353  border: 1px solid rgba(var(--danger-tint), 0.32);7354  background:7355    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7356    rgba(var(--danger-tint), 0.04);7357  box-shadow:7358    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7359    0 0 24px rgba(var(--danger-tint), 0.04);7360  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7361}73627363.peach-danger-card:hover {7364  border-color: rgba(var(--danger-tint), 0.55);7365  box-shadow:7366    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7367    0 0 36px rgba(var(--danger-tint), 0.10);7368}73697370.peach-danger-card--hazard {7371  --danger-tint: 220, 38, 38; /* red */7372}73737374.peach-danger-card-head {7375  display: flex;7376  align-items: center;7377  gap: 10px;7378}73797380.peach-danger-card-glyph {7381  width: 28px;7382  height: 28px;7383  flex-shrink: 0;7384  display: flex;7385  align-items: center;7386  justify-content: center;7387  border-radius: 8px;7388  background: rgba(var(--danger-tint), 0.12);7389  color: rgba(var(--danger-tint), 0.95);7390  font-size: 1rem;7391  line-height: 1;7392}73937394.peach-danger-card-title {7395  margin: 0;7396  font-size: 0.8125rem;7397  font-weight: 600;7398  color: rgba(var(--danger-tint), 0.92);7399  letter-spacing: 0.01em;7400}74017402.peach-danger-card-copy {7403  margin: 0;7404  font-size: 0.6875rem;7405  line-height: 1.5;7406  color: var(--peach-t2);7407}74087409.peach-danger-card-button {7410  width: 100%;7411  padding: 9px;7412  margin-top: 4px;7413  background: transparent;7414  border: 1px solid rgba(var(--danger-tint), 0.45);7415  border-radius: 8px;7416  color: rgba(var(--danger-tint), 0.9);7417  font-size: 0.75rem;7418  font-weight: 500;7419  letter-spacing: 0.02em;7420  cursor: pointer;7421  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7422}74237424.peach-danger-card-button:hover {7425  background: rgba(var(--danger-tint), 0.10);7426  border-color: rgba(var(--danger-tint), 0.75);7427  color: rgb(var(--danger-tint));7428}74297430.peach-adoption-sas {7431  margin: 16px auto 0;7432  padding: 12px 16px;7433  border: 1px solid color-mix(in srgb, var(--peach-t0) 18%, transparent);7434  border-radius: 10px;7435  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);7436  color: var(--peach-t0);7437  text-align: center;7438}74397440.peach-adoption-sas strong {7441  font-size: 1.65rem;7442  font-variant-numeric: tabular-nums;7443  letter-spacing: 0.18em;7444  white-space: nowrap;7445}74467447/* ── Panic flow (three-step destruction) ───────────────────────────────── */7448.peach-panic {7449  display: flex;7450  flex-direction: column;7451  flex: 1;7452  min-height: 0;7453  padding: 28px 20px 20px;7454  gap: 18px;7455  overflow-y: auto;7456  scrollbar-width: none;7457  -ms-overflow-style: none;7458}74597460.peach-panic::-webkit-scrollbar { display: none; }74617462.peach-panic-step2 {7463  background: rgba(220, 38, 38, 0.04);7464}74657466.peach-panic-step3 {7467  position: relative;7468  background: #0f0505;7469  color: #ffffff;7470  overflow: hidden;7471}74727473.peach-panic-rune-bg {7474  position: absolute;7475  inset: 0;7476  opacity: 0.22;7477  pointer-events: none;7478  overflow: hidden;7479}74807481.peach-panic-rune-bg canvas {7482  width: 100% !important;7483  height: 100% !important;7484}74857486.peach-panic-icon {7487  font-size: 32px;7488  color: rgb(220, 38, 38);7489  line-height: 1;7490}74917492.peach-panic-title {7493  margin: 0;7494  font-size: 18px;7495  font-weight: 500;7496  color: var(--peach-t1);7497}74987499.peach-panic-title--severe {7500  font-size: 20px;7501  font-weight: 700;7502  color: rgb(220, 38, 38);7503}75047505.peach-panic-body {7506  margin: 0;7507  font-size: 0.8125rem;7508  line-height: 1.55;7509  color: var(--peach-t2);7510}75117512.peach-panic-body--severe {7513  color: rgba(220, 38, 38, 0.85);7514}75157516.peach-panic-body--final {7517  font-size: 1rem;7518  font-weight: 700;7519  color: rgb(255, 80, 80);7520  line-height: 1.4;7521}75227523.peach-panic-body--final-intro {7524  font-size: 1rem;7525  color: #ffffff;7526  font-weight: 400;7527}75287529.peach-panic-divider {7530  height: 1px;7531  background: rgba(255, 255, 255, 0.08);7532  margin: 4px 0;7533}75347535.peach-panic-confirm-input {7536  width: 100%;7537  padding: 10px 12px;7538  background: rgba(255, 255, 255, 0.02);7539  border: 1px solid rgba(220, 38, 38, 0.4);7540  border-radius: 8px;7541  color: var(--peach-t1);7542  font-family: "IBM Plex Mono", monospace;7543  font-size: 0.875rem;7544  letter-spacing: 0.12em;7545  text-transform: uppercase;7546}75477548.peach-panic-confirm-input:focus {7549  outline: none;7550  border-color: rgb(220, 38, 38);7551}75527553.peach-panic-confirm-input--match {7554  border-color: rgb(220, 38, 38);7555  color: rgb(220, 38, 38);7556}75577558.peach-panic-confirm-label {7559  font-size: 0.6875rem;7560  color: var(--peach-t2);7561  margin: 0 0 -8px;7562  letter-spacing: 0.06em;7563}75647565.peach-panic-actions {7566  display: flex;7567  flex-direction: column;7568  gap: 10px;7569  margin-top: auto;7570}75717572.peach-panic-button {7573  width: 100%;7574  padding: 12px;7575  border-radius: 8px;7576  font-size: 0.8125rem;7577  cursor: pointer;7578  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7579}75807581.peach-panic-button--primary {7582  background: var(--peach-accent);7583  border: 1px solid var(--peach-accent);7584  color: #ffffff;7585  font-weight: 600;7586}75877588.peach-panic-button--primary:hover {7589  background: color-mix(in srgb, var(--peach-accent) 88%, white);7590}75917592.peach-panic-button--danger {7593  background: rgb(220, 38, 38);7594  border: 1px solid rgb(220, 38, 38);7595  color: #ffffff;7596  font-weight: 600;7597}75987599.peach-panic-button--danger:disabled {7600  opacity: 0.35;7601  cursor: not-allowed;7602}76037604.peach-panic-button--ghost {7605  background: transparent;7606  border: 1px solid rgba(255, 255, 255, 0.18);7607  color: var(--peach-t2);7608}76097610.peach-panic-button--ghost:hover {7611  border-color: rgba(255, 255, 255, 0.32);7612  color: var(--peach-t1);7613}76147615.peach-panic-link {7616  background: transparent;7617  border: none;7618  padding: 4px 0;7619  color: rgba(220, 38, 38, 0.65);7620  font-size: 0.75rem;7621  cursor: pointer;7622  text-align: left;7623  text-decoration: underline;7624  text-underline-offset: 3px;7625}76267627.peach-panic-link:hover {7628  color: rgb(220, 38, 38);7629}76307631.peach-panic-bar {7632  background: rgb(220, 38, 38);7633  padding: 16px 20px;7634  margin: -28px -20px 0;7635  text-align: center;7636  font-size: 0.8125rem;7637  font-weight: 700;7638  letter-spacing: 0.12em;7639  color: #ffffff;7640}76417642.peach-panic-final-button {7643  width: 100%;7644  padding: 14px;7645  background: rgb(220, 38, 38);7646  border: none;7647  border-radius: 8px;7648  color: #ffffff;7649  font-size: 0.875rem;7650  font-weight: 700;7651  letter-spacing: 0.08em;7652  text-transform: uppercase;7653  cursor: pointer;7654  animation: peach-panic-pulse 2s ease-in-out infinite;7655}76567657.peach-settings-license {7658  margin-top: 10px;7659  padding-top: 10px;7660  border-top: 1px solid var(--peach-t3);7661}76627663.peach-settings-label {7664  font-size: 0.625rem;7665  letter-spacing: 0.08em;7666  color: var(--peach-t3);7667  display: block;7668  margin-bottom: 6px;7669}76707671.peach-settings-license-row {7672  display: flex;7673  align-items: center;7674  justify-content: space-between;7675  gap: 8px;7676}76777678.peach-settings-license-key {7679  font-family: 'IBM Plex Mono', monospace;7680  font-size: 0.75rem;7681  color: var(--peach-t0);7682  letter-spacing: 0.04em;7683  word-break: break-all;7684  flex: 1;7685  min-width: 0;7686}76877688.peach-settings-license-key--masked {7689  font-family: 'IBM Plex Mono', monospace;7690  font-size: 0.6rem;7691  color: var(--peach-t1);7692  letter-spacing: 0.18em;7693  user-select: none;7694}76957696.peach-settings-license-actions {7697  display: flex;7698  align-items: center;7699  gap: 2px;7700  flex-shrink: 0;7701}77027703.peach-settings-license-copy {7704  font-size: 0.6875rem;7705  color: var(--peach-accent);7706  background: transparent;7707  border: none;7708  cursor: pointer;7709  padding: 4px 8px;7710  border-radius: 4px;7711  flex-shrink: 0;7712  transition: opacity 150ms ease;7713}77147715.peach-settings-license-copy:hover {7716  opacity: 0.75;7717}77187719.peach-settings-license-toggle {7720  display: flex;7721  align-items: center;7722  justify-content: center;7723  background: transparent;7724  border: none;7725  cursor: pointer;7726  padding: 4px 6px;7727  border-radius: 4px;7728  color: var(--peach-t2);7729  transition: color 150ms ease;7730}77317732.peach-settings-license-toggle:hover {7733  color: var(--peach-t1);7734}77357736@keyframes peach-panic-pulse {7737  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7738  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7739}77407741[data-motion="reduce"] .peach-panic-final-button {7742  animation: none;7743}77447745/* Vault History — Settings → Vault sub-view */77467747.peach-history-list {7748  border: 1px solid var(--peach-border);7749  border-radius: 8px;7750  overflow: hidden;7751  margin: 8px 0 4px;7752}77537754.peach-history-row {7755  display: flex;7756  align-items: center;7757  justify-content: space-between;7758  padding: 9px 12px;7759  gap: 10px;7760  border-bottom: 1px solid var(--peach-border);7761}77627763.peach-history-row:last-child {7764  border-bottom: none;7765}77667767.peach-history-meta {7768  display: flex;7769  flex-direction: column;7770  gap: 2px;7771  min-width: 0;7772  flex: 1;7773}77747775.peach-history-time {7776  font-size: 0.75rem;7777  font-family: 'IBM Plex Mono', ui-monospace, monospace;7778  color: var(--peach-t0);7779  white-space: nowrap;7780  overflow: hidden;7781  text-overflow: ellipsis;7782}77837784.peach-history-sub {7785  font-size: 0.625rem;7786  color: var(--peach-t2);7787  letter-spacing: 0.06em;7788  text-transform: uppercase;7789  white-space: nowrap;7790  overflow: hidden;7791  text-overflow: ellipsis;7792}77937794.peach-history-btn {7795  flex-shrink: 0;7796  white-space: nowrap;7797  min-width: 56px;7798  text-align: center;7799}78007801.peach-history-btn.is-busy {7802  opacity: 0.65;7803}78047805.peach-history-footer {7806  font-size: 0.625rem;7807  color: var(--peach-t3);7808  letter-spacing: 0.05em;7809  text-align: right;7810  margin: 0;7811  padding: 2px 0 0;7812}78137814/* ── Context menu + swipe-copy flash ─────────────────────── */7815.peach-context-menu-backdrop {7816  position: fixed;7817  inset: 0;7818  background: rgba(0, 0, 0, 0.45);7819  z-index: 100;7820  display: flex;7821  align-items: flex-end;7822  justify-content: center;7823  animation: peach-ctx-fade 140ms ease both;7824}7825.peach-context-menu {7826  width: min(360px, calc(100vw - 24px));7827  margin-bottom: max(env(safe-area-inset-bottom), 12px);7828  background: var(--peach-bg);7829  border: 1px solid var(--peach-t3);7830  border-radius: 14px;7831  padding: 6px;7832  display: flex;7833  flex-direction: column;7834  gap: 2px;7835  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7836  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7837}7838@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7839@keyframes peach-ctx-rise {7840  from { transform: translateY(16px); opacity: 0; }7841  to   { transform: translateY(0);    opacity: 1; }7842}7843.peach-context-menu-item {7844  background: transparent;7845  color: var(--peach-t0);7846  border: 0;7847  border-radius: 10px;7848  padding: 12px 14px;7849  text-align: left;7850  font: inherit;7851  cursor: pointer;7852}7853.peach-context-menu-item:hover,7854.peach-context-menu-item:focus-visible {7855  background: var(--peach-t3);7856}7857.peach-context-menu-item--danger {7858  color: var(--peach-health-bad, #d96868);7859}7860.peach-context-menu-item--cancel {7861  color: var(--peach-t2);7862  margin-top: 4px;7863  border-top: 1px solid var(--peach-t3);7864  border-radius: 0 0 10px 10px;7865}78667867/* Swipe-to-copy flash */7868.peach-entry-row.is-copy-flash {7869  animation: peach-copy-flash 600ms ease both;7870}7871@keyframes peach-copy-flash {7872  0%   { background: transparent; }7873  20%  { background: rgba(217, 153, 51, 0.32); }7874  100% { background: transparent; }7875}78767877html { font-size: 16px; }78787879/* ── Recovery word entry ─────────────────────────────────────────── */7880.peach-lock-recover-link {7881  display: block;7882  width: 100%;7883  margin-top: 12px;7884  background: none;7885  border: none;7886  font-family: "IBM Plex Mono", monospace;7887  font-size: 0.625rem;7888  letter-spacing: 0.06em;7889  color: var(--peach-t2);7890  cursor: pointer;7891  text-align: center;7892  padding: 4px;7893  transition: color 120ms ease;7894}7895.peach-lock-recover-link:hover {7896  color: var(--peach-t0);7897}78987899.lock-screen--recovery {7900  display: flex;7901  flex-direction: column;7902  align-items: stretch;7903  padding: 12px 20px 24px;7904  overflow: hidden;7905}79067907.peach-recovery-nav {7908  display: flex;7909  align-items: center;7910  position: relative;7911  z-index: 1;7912  margin-bottom: 4px;7913}79147915/* Mask runes to the top decorative band only — keep inputs and the7916   bottom CTA button clear. The bottom of the popup is reserved for7917   submit buttons; rendering runes there overlaps the button glyph. */7918.peach-rune-background--recovery {7919  -webkit-mask-image: linear-gradient(7920    to bottom,7921    black 0px, black 85px,7922    transparent 110px,7923    transparent 100%7924  );7925  mask-image: linear-gradient(7926    to bottom,7927    black 0px, black 85px,7928    transparent 110px,7929    transparent 100%7930  );7931}79327933.peach-recovery-header {7934  text-align: center;7935  margin-bottom: 16px;7936  margin-top: 4px;7937}7938.peach-recovery-header .peach-onboarding-headline {7939  font-size: 1.25rem;7940  font-weight: 300;7941  letter-spacing: 0.02em;7942  margin: 0 0 4px;7943}7944.peach-recovery-header .peach-hint {7945  font-family: "IBM Plex Mono", monospace;7946  font-size: 0.625rem;7947  color: var(--peach-t2);7948  letter-spacing: 0.04em;7949  margin: 0;7950}79517952/* 12-word grid: 2 columns × 6 rows */7953.peach-recovery-grid {7954  display: grid;7955  grid-template-columns: repeat(2, 1fr);7956  gap: 12px 20px;7957  width: 100%;7958  margin-bottom: 0;7959}79607961.peach-recovery-word-slot {7962  display: flex;7963  align-items: center;7964  gap: 6px;7965  min-width: 0;7966}79677968.peach-recovery-word-index {7969  font-family: "IBM Plex Mono", monospace;7970  font-size: 0.5rem;7971  color: rgba(255, 255, 255, 0.35);7972  min-width: 14px;7973  flex-shrink: 0;7974  text-align: right;7975  letter-spacing: 0.04em;7976}79777978.peach-recovery-word-input {7979  flex: 1;7980  min-width: 0;7981  background: transparent;7982  border: none;7983  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7984  color: var(--peach-t0);7985  font-family: "IBM Plex Mono", monospace;7986  font-size: 0.6875rem;7987  letter-spacing: 0.06em;7988  padding: 5px 2px 4px;7989  outline: none;7990  text-transform: lowercase;7991  transition: border-color 120ms ease;7992}7993.peach-recovery-word-input::placeholder {7994  color: rgba(255, 255, 255, 0.18);7995}7996.peach-recovery-word-input:focus {7997  border-bottom-color: var(--peach-accent);7998}79998000.peach-recovery-submit {8001  width: 100%;8002  margin-top: auto;8003}80048005.peach-recovery-new-password-form {8006  width: 100%;8007  display: flex;8008  flex-direction: column;8009  gap: 16px;8010  margin-bottom: 8px;8011}8012.peach-recovery-new-password-form .peach-newvault-field {8013  display: flex;8014  flex-direction: column;8015  gap: 4px;8016}80178018/* ── Recovery words display (post-create) ────────────────────────── */8019.lock-screen--recovery-display {8020  display: flex;8021  flex-direction: column;8022  align-items: stretch;8023  padding: 0 20px 20px;8024  min-height: 0;8025  overflow-y: auto;8026}80278028.peach-recovery-words-display {8029  width: 100%;8030  margin-bottom: 16px;8031  border: 1px solid var(--peach-t3);8032  border-radius: 8px;8033  padding: 12px 14px;8034  background: rgba(245, 240, 234, 0.04);8035}80368037.peach-recovery-words-label {8038  font-family: "IBM Plex Mono", monospace;8039  font-size: 0.5rem;8040  letter-spacing: 0.08em;8041  color: var(--peach-t2);8042  text-transform: uppercase;8043  margin-bottom: 10px;8044}80458046.peach-recovery-word-list {8047  list-style: none;8048  margin: 0;8049  padding: 0;8050  display: grid;8051  grid-template-columns: repeat(2, 1fr);8052  gap: 6px 16px;8053}80548055.peach-recovery-word-item {8056  display: flex;8057  align-items: baseline;8058  gap: 5px;8059}80608061.peach-recovery-word-num {8062  font-family: "IBM Plex Mono", monospace;8063  font-size: 0.5rem;8064  color: var(--peach-t2);8065  width: 14px;8066  flex: 0 0 14px;8067  text-align: right;8068  letter-spacing: 0.04em;8069  font-variant-numeric: tabular-nums;8070}80718072.peach-recovery-download-btn {8073  display: block;8074  margin: 10px auto 0;8075  padding: 4px 10px;8076  background: transparent;8077  border: 1px solid var(--peach-border);8078  border-radius: 6px;8079  color: var(--peach-t2);8080  font-family: "IBM Plex Mono", monospace;8081  font-size: 0.5625rem;8082  letter-spacing: 0.06em;8083  text-transform: lowercase;8084  cursor: pointer;8085  transition: border-color 0.15s, color 0.15s;8086}80878088.peach-recovery-download-btn:hover {8089  border-color: var(--peach-accent);8090  color: var(--peach-t0);8091}80928093.peach-recovery-word-text {8094  font-family: "IBM Plex Mono", monospace;8095  font-size: 0.6875rem;8096  letter-spacing: 0.06em;8097  color: var(--peach-t0);8098  text-transform: lowercase;8099}81008101.peach-hint--warning {8102  color: var(--peach-accent);8103  font-style: italic;8104}8105.peach-hint--success {8106  color: var(--peach-t2);8107  font-family: "IBM Plex Mono", monospace;8108  font-size: 0.625rem;8109  letter-spacing: 0.06em;8110}81118112/* Confirmation step */8113.peach-recovery-confirm {8114  width: 100%;8115  flex: 1;8116  display: flex;8117  flex-direction: column;8118}8119.peach-recovery-confirm-label {8120  font-family: "IBM Plex Mono", monospace;8121  font-size: 0.5625rem;8122  letter-spacing: 0.04em;8123  color: var(--peach-t2);8124  text-align: center;8125  margin: 0 0 12px;8126}8127.peach-recovery-confirm-fields {8128  display: flex;8129  flex-direction: column;8130  gap: 14px;8131  margin-bottom: 10px;8132}8133.peach-recovery-confirm-field {8134  display: flex;8135  align-items: center;8136  gap: 8px;8137}8138.peach-recovery-confirm-num {8139  font-family: "IBM Plex Mono", monospace;8140  font-size: 0.5rem;8141  color: var(--peach-t2);8142  min-width: 44px;8143  letter-spacing: 0.04em;8144}8145.peach-recovery-confirm-input {8146  flex: 1;8147  background: transparent;8148  border: none;8149  border-bottom: 1px solid var(--peach-t3);8150  color: var(--peach-t0);8151  font-family: "IBM Plex Mono", monospace;8152  font-size: 0.6875rem;8153  letter-spacing: 0.06em;8154  padding: 4px 2px 3px;8155  outline: none;8156  text-transform: lowercase;8157  transition: border-color 120ms ease;8158}8159.peach-recovery-confirm-input:focus {8160  border-bottom-color: var(--peach-accent);8161}8162.peach-recovery-confirm-input:disabled {8163  opacity: 0.4;8164  cursor: not-allowed;8165}8166.peach-recovery-confirm-btn {8167  width: 100%;8168  margin-top: auto;8169}81708171/* ============================================================8172   Sync info sheet8173   ============================================================ */81748175.peach-sync-info-backdrop {8176  position: fixed;8177  inset: 0;8178  z-index: 200;8179  background: rgba(0, 0, 0, 0.55);8180  display: flex;8181  align-items: flex-end;8182  animation: peach-fade-in 200ms ease forwards;8183}81848185@keyframes peach-fade-in {8186  from { opacity: 0; }8187  to   { opacity: 1; }8188}81898190.peach-sync-info-sheet {8191  width: 100%;8192  background: var(--peach-bg-card, var(--peach-bg));8193  border-top-left-radius: 20px;8194  border-top-right-radius: 20px;8195  padding: 12px 24px 32px;8196  display: flex;8197  flex-direction: column;8198  gap: 20px;8199  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;8200}82018202@keyframes peach-sheet-up {8203  from { transform: translateY(100%); }8204  to   { transform: translateY(0); }8205}82068207.peach-sync-info-handle {8208  width: 36px;8209  height: 4px;8210  border-radius: 2px;8211  background: var(--peach-border);8212  margin: 0 auto 4px;8213  flex-shrink: 0;8214}82158216.peach-sync-info-title {8217  font-family: 'Cormorant Garamond', serif;8218  font-style: italic;8219  font-size: 26px;8220  font-weight: 600;8221  color: var(--peach-t0);8222  margin: 0;8223  line-height: 1.2;8224}82258226.peach-sync-info-body {8227  display: flex;8228  flex-direction: column;8229  gap: 14px;8230}82318232.peach-sync-info-point {8233  display: flex;8234  gap: 12px;8235  align-items: flex-start;8236  font-size: 14px;8237  color: var(--peach-t2);8238  line-height: 1.6;8239  margin: 0;8240}82418242.peach-sync-info-icon {8243  color: var(--peach-accent);8244  font-size: 16px;8245  flex-shrink: 0;8246  margin-top: 1px;8247}82488249.peach-sync-info-actions {8250  display: flex;8251  flex-direction: column;8252  gap: 12px;8253  margin-top: 4px;8254}82558256.peach-sync-info-pro-link {8257  background: none;8258  border: none;8259  font-size: 13px;8260  color: var(--peach-t3);8261  cursor: pointer;8262  padding: 0;8263  font-family: inherit;8264  text-align: center;8265  transition: color 150ms ease;8266}82678268.peach-sync-info-pro-link:hover {8269  color: var(--peach-accent);8270}82718272.peach-btn--full {8273  width: 100%;8274}82758276/* ── Sync screen ── */82778278.peach-sync-coming-soon {8279  display: flex;8280  align-items: flex-start;8281  gap: 10px;8282  padding: 12px 14px;8283  background: var(--peach-s1);8284  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8285  border-radius: 10px;8286}8287.peach-sync-coming-soon__icon {8288  flex-shrink: 0;8289  color: var(--peach-accent);8290  margin-top: 1px;8291  line-height: 0;8292}8293.peach-sync-coming-soon__title {8294  font-family: 'Cormorant Garamond', serif;8295  font-weight: 500;8296  font-size: 13px;8297  color: var(--peach-accent);8298  margin: 0 0 5px;8299  line-height: 1.3;8300}8301.peach-sync-coming-soon__body {8302  font-size: 12px;8303  color: var(--peach-t1);8304  line-height: 1.55;8305  margin: 0;8306}83078308.peach-sync-screen {8309  display: flex;8310  flex-direction: column;8311  height: 100%;8312}83138314.peach-sync-content {8315  flex: 1;8316  overflow-y: auto;8317  padding: 24px 20px 40px;8318  display: flex;8319  flex-direction: column;8320  gap: 24px;8321}83228323/* Intro (State A) */8324.peach-sync-headline {8325  font-family: 'Cormorant Garamond', serif;8326  font-style: italic;8327  font-size: 28px;8328  font-weight: 600;8329  color: var(--peach-t0);8330  margin: 0 0 10px;8331  line-height: 1.2;8332}83338334.peach-sync-intro-body {8335  font-size: 14px;8336  color: var(--peach-t1);8337  line-height: 1.6;8338  margin: 0;8339}83408341.peach-sync-pro-note {8342  display: flex;8343  flex-direction: column;8344  gap: 8px;8345  background: var(--peach-t3);8346  border-radius: 10px;8347  padding: 12px 14px;8348}83498350.peach-sync-pro-note-text {8351  font-size: 12px;8352  color: var(--peach-t2);8353  line-height: 1.5;8354  margin: 0;8355}83568357.peach-sync-pro-link {8358  background: none;8359  border: none;8360  font-size: 12px;8361  color: var(--peach-accent);8362  cursor: pointer;8363  padding: 0;8364  font-family: inherit;8365  text-align: left;8366}83678368/* Status (State C) */8369.peach-sync-status {8370  padding: 12px 0;8371  border-bottom: 1px solid var(--peach-border);8372}83738374.peach-sync-status-row {8375  display: flex;8376  align-items: center;8377  gap: 8px;8378}83798380.peach-sync-dot {8381  width: 7px;8382  height: 7px;8383  border-radius: 50%;8384  flex-shrink: 0;8385}83868387.peach-sync-dot--green { background: var(--peach-health-ok); }8388.peach-sync-dot--amber { background: var(--peach-accent); }83898390.peach-sync-status-text {8391  font-family: 'IBM Plex Mono', monospace;8392  font-size: 11px;8393  color: var(--peach-t2);8394}83958396/* Paired devices */8397.peach-sync-section {8398  display: flex;8399  flex-direction: column;8400  gap: 2px;8401}84028403.peach-sync-section-label {8404  font-family: 'IBM Plex Mono', monospace;8405  font-size: 10px;8406  letter-spacing: 0.1em;8407  color: var(--peach-t3);8408  margin: 0 0 10px;8409}84108411.peach-sync-device-row {8412  display: flex;8413  justify-content: space-between;8414  align-items: baseline;8415  padding: 10px 0;8416  border-bottom: 1px solid var(--peach-border);8417  gap: 12px;8418}84198420.peach-sync-device-name {8421  font-size: 14px;8422  color: var(--peach-t1);8423}84248425.peach-sync-device-meta {8426  font-family: 'IBM Plex Mono', monospace;8427  font-size: 11px;8428  color: var(--peach-t3);8429  white-space: nowrap;8430}84318432.peach-sync-hub-note {8433  padding: 14px 16px;8434  border: 1px solid var(--peach-border);8435  border-radius: 10px;8436  display: flex;8437  flex-direction: column;8438  gap: 6px;8439  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8440}84418442.peach-sync-hub-note-title {8443  font-size: 13px;8444  font-weight: 600;8445  color: var(--peach-t0);8446  margin: 0;8447}84488449.peach-sync-hub-note-body {8450  font-size: 12px;8451  color: var(--peach-t2);8452  line-height: 1.6;8453  margin: 0;8454}84558456/* Action buttons */8457.peach-sync-actions {8458  display: flex;8459  gap: 10px;8460  flex-wrap: wrap;8461}84628463/* Upgrade prompt (State B) */8464.peach-sync-upgrade {8465  display: flex;8466  flex-direction: column;8467  gap: 12px;8468  padding: 16px;8469  border: 1px solid var(--peach-border);8470  border-radius: 10px;8471}84728473.peach-sync-upgrade-text {8474  font-size: 13px;8475  color: var(--peach-t2);8476  line-height: 1.6;8477  margin: 0;8478}84798480/* Network note */8481.peach-sync-network-note {8482  font-size: 12px;8483  color: var(--peach-t3);8484  line-height: 1.6;8485  margin: 0;8486}84878488/* Advanced */8489.peach-sync-advanced {8490  margin-top: auto;8491  padding-top: 16px;8492  border-top: 1px solid var(--peach-border);8493}84948495.peach-sync-advanced-toggle {8496  display: flex;8497  align-items: center;8498  gap: 8px;8499  background: none;8500  border: none;8501  font-family: 'IBM Plex Mono', monospace;8502  font-size: 11px;8503  letter-spacing: 0.08em;8504  color: var(--peach-t3);8505  cursor: pointer;8506  padding: 0;8507  text-transform: uppercase;8508}85098510.peach-sync-advanced-chevron {8511  display: inline-block;8512  transition: transform 200ms ease;8513  font-size: 10px;8514}85158516.peach-sync-advanced-chevron.is-open {8517  transform: rotate(90deg);8518}85198520.peach-sync-advanced-content {8521  margin-top: 14px;8522}85238524.peach-sync-advanced-row {8525  display: flex;8526  justify-content: space-between;8527  align-items: center;8528  gap: 16px;8529}85308531.peach-sync-advanced-title {8532  font-size: 14px;8533  color: var(--peach-t1);8534  margin: 0 0 2px;8535}85368537.peach-sync-advanced-subtitle {8538  font-size: 12px;8539  color: var(--peach-t3);8540  margin: 0;8541  line-height: 1.5;8542}85438544/* ── Notes Mode ── */85458546/* Overlay that crossfades over the vault */8547.peach-notes-overlay {8548  position: fixed;8549  inset: 0;8550  z-index: 90;8551  opacity: 0;8552  pointer-events: none;8553  animation: peach-mode-in 220ms ease-in forwards;8554}85558556.peach-notes-overlay.is-visible {8557  opacity: 1;8558  pointer-events: auto;8559}85608561@keyframes peach-mode-in {8562  from { opacity: 0; }8563  to   { opacity: 1; }8564}85658566/* Top-level notes surface */8567.peach-notes-mode {8568  position: absolute;8569  inset: 0;8570  background: var(--peach-bg);8571  display: flex;8572  flex-direction: column;8573}85748575/* Rune canvas positioned behind content */8576.peach-note-rune-canvas {8577  position: absolute;8578  inset: 0;8579  width: 100%;8580  height: 100%;8581  pointer-events: none;8582  z-index: 0;8583}85848585/* TOC wrapper */8586.peach-notes-toc-wrapper {8587  position: absolute;8588  inset: 0;8589  z-index: 1;8590  opacity: 1;8591  pointer-events: auto;8592  transition: opacity 200ms ease;8593}85948595.peach-notes-toc-wrapper.is-hidden {8596  opacity: 0;8597  pointer-events: none;8598}85998600/* Editor wrapper */8601.peach-notes-editor-wrapper {8602  position: absolute;8603  inset: 0;8604  z-index: 2;8605  opacity: 0;8606  pointer-events: none;8607  transition: opacity 200ms ease;8608}86098610.peach-notes-editor-wrapper.is-visible {8611  opacity: 1;8612  pointer-events: auto;8613}86148615/* TOC inner */8616.peach-notes-toc {8617  position: relative;8618  display: flex;8619  flex-direction: column;8620  height: 100%;8621  padding-top: env(safe-area-inset-top, 0px);8622  padding-bottom: env(safe-area-inset-bottom, 0px);8623}86248625/* Shared header */8626.peach-notes-header {8627  display: flex;8628  align-items: center;8629  padding: 12px 16px;8630  gap: 12px;8631  flex-shrink: 0;8632  min-height: 52px;8633  position: relative;8634  z-index: 2;8635}86368637.peach-notes-back {8638  font-size: 22px;8639  color: var(--peach-t2);8640  background: none;8641  border: none;8642  padding: 4px;8643  cursor: pointer;8644  line-height: 1;8645  flex-shrink: 0;8646  transition: color 150ms ease;8647  -webkit-tap-highlight-color: transparent;8648}86498650.peach-notes-back:active { color: var(--peach-t0); }86518652.peach-notes-header-title {8653  flex: 1;8654  font-family: 'Cormorant Garamond', serif;8655  font-style: italic;8656  font-size: 22px;8657  color: var(--peach-t0);8658  text-align: center;8659}86608661.peach-notes-header-title.is-breadcrumb {8662  font-family: 'IBM Plex Mono', monospace;8663  font-style: normal;8664  font-size: 11px;8665  color: var(--peach-t3);8666  letter-spacing: 0.08em;8667  text-transform: uppercase;8668  cursor: pointer;8669}86708671.peach-notes-header-actions {8672  display: flex;8673  gap: 8px;8674  flex-shrink: 0;8675}86768677.peach-notes-header-btn {8678  width: 36px;8679  height: 36px;8680  display: flex;8681  align-items: center;8682  justify-content: center;8683  background: none;8684  border: none;8685  color: var(--peach-t2);8686  cursor: pointer;8687  border-radius: 8px;8688  font-size: 16px;8689  transition: color 150ms ease, background 150ms ease;8690  -webkit-tap-highlight-color: transparent;8691}86928693.peach-notes-header-btn:active {8694  background: rgba(255,255,255,0.06);8695  color: var(--peach-t0);8696}86978698/* The header + glyph is larger than the search svg so the two right-side8699 * buttons feel visually balanced. The base .peach-notes-header-btn caps font8700 * at 16px which would render the + too small. */8701.peach-notes-new-btn-icon {8702  font-size: 22px;8703  font-weight: 300;8704  line-height: 1;8705}87068707/* Inline search bar */8708.peach-notes-search-input {8709  flex: 1;8710  background: none;8711  border: none;8712  outline: none;8713  font-family: 'IBM Plex Mono', monospace;8714  font-size: 13px;8715  color: var(--peach-t0);8716  padding: 4px 0;8717  letter-spacing: 0.02em;8718}87198720.peach-notes-search-input::placeholder {8721  color: var(--peach-t3);8722}87238724/* TOC list */8725.peach-notes-list-container {8726  flex: 1;8727  overflow-y: auto;8728  overflow-x: hidden;8729  scrollbar-width: none;8730  -webkit-overflow-scrolling: touch;8731  overscroll-behavior: contain;8732  position: relative;8733  z-index: 1;8734}87358736.peach-notes-list-container::-webkit-scrollbar { display: none; }87378738/* Note row */8739.peach-note-row {8740  position: relative;8741  display: grid;8742  grid-template-columns: 44px 8px 1fr 8px auto;8743  align-items: center;8744  min-height: 72px;8745  padding: 16px 20px;8746  border-bottom: 0.5px solid var(--peach-border);8747  cursor: pointer;8748  overflow: hidden;8749  touch-action: pan-y;8750  user-select: none;8751  -webkit-user-select: none;8752  -webkit-tap-highlight-color: transparent;8753}87548755.peach-note-row:first-child {8756  border-top: 0.5px solid var(--peach-border);8757}87588759.peach-note-row:active {8760  background: rgba(255,255,255,0.02);8761}87628763.peach-note-numeral {8764  font-family: 'Cormorant Garamond', serif;8765  font-style: italic;8766  font-size: 15px;8767  color: var(--peach-accent);8768  text-align: right;8769  line-height: 1;8770  flex-shrink: 0;8771}87728773.peach-note-title-gap { /* grid spacer */ }87748775.peach-note-title {8776  font-family: 'Cormorant Garamond', serif;8777  font-style: italic;8778  font-size: 18px;8779  color: var(--peach-t0);8780  line-height: 1.3;8781  min-width: 0;8782  overflow-wrap: break-word;8783}87848785.peach-note-title-match {8786  color: var(--peach-accent);8787}87888789.peach-note-date {8790  font-family: 'IBM Plex Mono', monospace;8791  font-size: 11px;8792  color: var(--peach-t2);8793  white-space: nowrap;8794  text-align: right;8795  flex-shrink: 0;8796  grid-column: 5;8797}87988799/* Swipe underlays */8800.peach-note-row-underlay {8801  position: absolute;8802  inset: 0;8803  display: flex;8804  align-items: center;8805  padding: 0 24px;8806  font-family: 'IBM Plex Mono', monospace;8807  font-size: 11px;8808  letter-spacing: 0.1em;8809  pointer-events: none;8810  z-index: 0;8811}88128813.peach-note-row-underlay--delete {8814  background: #8B2020;8815  color: rgba(255,255,255,0.9);8816  justify-content: flex-end;8817}88188819.peach-note-row-underlay--archive {8820  background: var(--peach-accent);8821  color: #0C0A06;8822  justify-content: flex-start;8823}88248825/* Delete confirm strip */8826.peach-note-delete-confirm {8827  position: absolute;8828  inset: 0;8829  background: var(--peach-bg);8830  display: flex;8831  align-items: center;8832  gap: 12px;8833  padding: 0 20px;8834  font-family: 'IBM Plex Mono', monospace;8835  font-size: 11px;8836  color: var(--peach-t1);8837  letter-spacing: 0.04em;8838  animation: peach-delete-confirm-in 150ms ease both;8839  z-index: 10;8840}88418842@keyframes peach-delete-confirm-in {8843  from { opacity: 0; }8844  to   { opacity: 1; }8845}88468847.peach-note-delete-confirm-btn {8848  background: #8B2020;8849  color: rgba(255,255,255,0.9);8850  border: none;8851  border-radius: 6px;8852  padding: 4px 10px;8853  font-family: 'IBM Plex Mono', monospace;8854  font-size: 10px;8855  cursor: pointer;8856  letter-spacing: 0.06em;8857}88588859.peach-note-delete-cancel-btn {8860  background: none;8861  border: none;8862  color: var(--peach-t3);8863  font-family: 'IBM Plex Mono', monospace;8864  font-size: 10px;8865  cursor: pointer;8866  letter-spacing: 0.06em;8867  padding: 4px 6px;8868}88698870/* + New note button */8871.peach-notes-new-btn {8872  font-family: 'IBM Plex Mono', monospace;8873  font-size: 12px;8874  color: var(--peach-t3);8875  text-align: center;8876  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8877  background: none;8878  border: none;8879  width: 100%;8880  cursor: pointer;8881  letter-spacing: 0.04em;8882  transition: color 150ms ease;8883  -webkit-tap-highlight-color: transparent;8884}88858886.peach-notes-new-btn:active { color: var(--peach-accent); }88878888/* Empty state */8889.peach-notes-empty {8890  display: flex;8891  flex-direction: column;8892  align-items: center;8893  justify-content: center;8894  flex: 1;8895  padding: 48px 32px;8896  gap: 16px;8897}88988899.peach-notes-empty-text {8900  font-family: 'Cormorant Garamond', serif;8901  font-style: italic;8902  font-size: 20px;8903  color: var(--peach-t3);8904  text-align: center;8905  margin: 0;8906  line-height: 1.4;8907  white-space: pre-line;8908}89098910/* ── Editor surface ── */89118912.peach-note-editor-surface {8913  position: absolute;8914  inset: 0;8915  background: var(--peach-bg);8916  display: flex;8917  flex-direction: column;8918  padding-top: env(safe-area-inset-top, 0px);8919}89208921.peach-note-editor-scroll {8922  flex: 1;8923  overflow-y: auto;8924  overflow-x: hidden;8925  scrollbar-width: none;8926  -webkit-overflow-scrolling: touch;8927  padding: 0 24px 120px;8928  position: relative;8929  z-index: 1;8930}89318932.peach-note-editor-scroll::-webkit-scrollbar { display: none; }89338934/* Desktop toolbar (always visible above body) */8935.peach-note-toolbar-desktop-inline {8936  display: flex;8937  align-items: center;8938  gap: 2px;8939  padding: 6px 0 12px;8940  margin-bottom: 4px;8941  border-bottom: 0.5px solid var(--peach-border);8942}89438944/* Title field */8945.peach-note-title-field {8946  font-family: 'Cormorant Garamond', serif;8947  font-style: italic;8948  font-size: 32px;8949  font-weight: 600;8950  color: var(--peach-t0);8951  line-height: 1.2;8952  padding: 8px 0 0;8953  outline: none;8954  min-height: 44px;8955  word-break: break-word;8956  position: relative;8957  z-index: 1;8958}89598960.peach-note-title-field:empty::before {8961  content: attr(data-placeholder);8962  color: var(--peach-t3);8963  pointer-events: none;8964}89658966/* Hairline separator */8967.peach-note-hairline {8968  height: 0.5px;8969  background: var(--peach-border);8970  margin: 12px 0 20px;8971  position: relative;8972  z-index: 1;8973}89748975/* Body field */8976.peach-note-body-field {8977  font-family: 'DM Sans', sans-serif;8978  font-size: 16px;8979  color: var(--peach-t0);8980  line-height: 1.85;8981  padding: 0;8982  outline: none;8983  min-height: 240px;8984  word-break: break-word;8985  position: relative;8986  z-index: 1;8987}89888989.peach-note-body-field:empty::before {8990  content: attr(data-placeholder);8991  color: var(--peach-t3);8992  font-style: italic;8993  pointer-events: none;8994}89958996.peach-note-body-field h2 {8997  font-family: 'Cormorant Garamond', serif;8998  font-style: italic;8999  font-size: 22px;9000  font-weight: 600;9001  color: var(--peach-t0);9002  margin: 20px 0 8px;9003}90049005.peach-note-body-field blockquote {9006  border-left: 2px solid var(--peach-accent);9007  margin: 12px 0;9008  padding-left: 16px;9009  color: var(--peach-t1);9010  font-style: italic;9011}90129013.peach-note-body-field ul,9014.peach-note-body-field ol {9015  padding-left: 20px;9016  margin: 8px 0;9017}90189019.peach-note-body-field li {9020  margin: 4px 0;9021}90229023.peach-note-body-field hr {9024  border: none;9025  border-top: 0.5px solid var(--peach-border);9026  margin: 16px 0;9027}90289029/* Saved indicator */9030.peach-note-saved-indicator {9031  font-family: 'IBM Plex Mono', monospace;9032  font-size: 11px;9033  color: var(--peach-t3);9034  letter-spacing: 0.04em;9035  text-align: right;9036  padding: 6px 24px;9037  flex-shrink: 0;9038  transition: opacity 300ms ease;9039  pointer-events: none;9040  position: relative;9041  z-index: 1;9042}90439044/* Mobile keyboard toolbar */9045.peach-note-toolbar-mobile {9046  display: flex;9047  align-items: center;9048  padding: 8px 16px;9049  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));9050  background: var(--peach-bg);9051  border-top: 0.5px solid var(--peach-border);9052  gap: 4px;9053  flex-shrink: 0;9054  position: relative;9055  z-index: 10;9056}90579058.peach-note-toolbar-btn {9059  min-width: 36px;9060  height: 36px;9061  display: flex;9062  align-items: center;9063  justify-content: center;9064  background: none;9065  border: none;9066  border-radius: 8px;9067  cursor: pointer;9068  font-size: 14px;9069  color: var(--peach-t1);9070  font-family: 'DM Sans', sans-serif;9071  font-weight: 600;9072  transition: background 100ms ease, color 100ms ease;9073  -webkit-tap-highlight-color: transparent;9074}90759076.peach-note-toolbar-btn--italic { font-style: italic; }9077.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }9078.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }90799080.peach-note-toolbar-divider {9081  width: 0.5px;9082  height: 20px;9083  background: var(--peach-border);9084  margin: 0 4px;9085  flex-shrink: 0;9086}90879088.peach-note-toolbar-spacer { flex: 1; }90899090/* Desktop: larger headline in TOC */9091@media (min-width: 400px) {9092  .peach-notes-header-title:not(.is-breadcrumb) {9093    font-size: 32px;9094  }90959096  .peach-note-row {9097    min-height: 64px;9098    padding: 14px 16px;9099  }9100}91019102/* Flying title — shared element during expansion/collapse */91039104/* ─── Light theme overrides ───────────────────────────────────────────────9105   Tokens that cannot be expressed as variable substitutions — hardcoded9106   context-specific values that need separate light-mode rules. */91079108/* Settings section headers: use text-label (#79766F) per restoration brief —9109   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY9110   presence without fighting the light parchment background. */9111.light .peach-settings-sub-label,9112[data-theme="light"] .peach-settings-sub-label,9113.light .peach-settings-nav-label,9114[data-theme="light"] .peach-settings-nav-label {9115  color: #79766F;9116}91179118/* Secondary action buttons (ghost / subtle): filled with input-well surface9119   so they read as recessed against the parchment card background. */9120.light .peach-btn--ghost:not(.peach-icon-btn),9121[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {9122  background: #EEE7DD;9123  border-color: #DDD5CB;9124  color: #1A1208;9125}9126.light .peach-icon-btn,9127[data-theme="light"] .peach-icon-btn {9128  background: transparent;9129  border-color: transparent;9130}9131.light .peach-btn--subtle,9132[data-theme="light"] .peach-btn--subtle {9133  background: #EEE7DD;9134  border-color: #DDD5CB;9135}91369137/* Wide secondary action button on the lock screen — override the9138   hardcoded dark-mode rgba values with warm parchment equivalents. */9139.light .peach-lock-secondary,9140[data-theme="light"] .peach-lock-secondary {9141  background: #EEE7DD;9142  border-color: #DDD5CB;9143  color: #1A1208;9144}9145.light .peach-lock-secondary:hover,9146[data-theme="light"] .peach-lock-secondary:hover {9147  background: #F0E9DF;9148}91499150/* Entry row hover: bg-row lifts the row above the card surface. */9151.light .peach-entry-row:hover,9152[data-theme="light"] .peach-entry-row:hover {9153  background: #F2EBE1;9154}9155.light .peach-entry-row.is-active,9156[data-theme="light"] .peach-entry-row.is-active {9157  background: #F2EBE1;9158}9159.light .peach-entry-row.is-selected,9160[data-theme="light"] .peach-entry-row.is-selected {9161  background: #F5EDE2;9162}91639164/* ──────────────────────────────────────────────────────────────────────────9165   Pair-device flow — bird-stage animation (Phase 1)9166   See src/popup/components/PairingBirds.tsx and the brief §6.2.9167   Three-act animation gated on the [data-phase] attribute of9168   .peach-pair-pair; child layers (birds, sound arcs, flight wave, dot)9169   each react via either pose class or visibility flag.9170   Tokens: accent surfaces use var(--peach-accent); bird illustration9171   colours are baked into the SVG per the brand-peach exception in §3.1.9172   ────────────────────────────────────────────────────────────────────── */91739174.peach-pair-pair {9175  position: absolute;9176  inset: 0;9177  z-index: 3;9178  display: flex;9179  flex-direction: column;9180  padding: 14px 12px 12px;9181  width: 100%;9182  box-sizing: border-box;9183  gap: 0;9184  background:9185    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9186    var(--peach-bg);9187  color: var(--peach-t0);9188  overflow-y: auto;9189  overflow-x: hidden;9190  scrollbar-width: none;9191  isolation: isolate;9192  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9193}9194@keyframes peach-pair-overlay-in {9195  from { opacity: 0; transform: translateY(8px); }9196  to   { opacity: 1; transform: translateY(0); }9197}9198.peach-pair-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }9199.peach-pair-pair::before {9200  content: '';9201  position: absolute;9202  inset: 0;9203  border-radius: inherit;9204  pointer-events: none;9205  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9206  z-index: 0;9207}9208.peach-pair-pair > * { position: relative; z-index: 1; }92099210/* Header --------------------------------------------------------------- */9211.peach-pair-head {9212  display: flex; align-items: center; gap: 10px;9213}9214.peach-pair-back {9215  width: 32px; height: 32px;9216  display: inline-flex; align-items: center; justify-content: center;9217  background: transparent;9218  border: none;9219  border-radius: 8px;9220  color: var(--peach-t1);9221  cursor: pointer;9222  transition: color 0.15s ease, box-shadow 0.15s ease;9223}9224.peach-pair-back:hover {9225  color: var(--peach-accent);9226  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9227}9228.peach-pair-title {9229  font-family: var(--font-display, Georgia, serif);9230  font-style: italic;9231  font-size: 24px;9232  font-weight: 500;9233  letter-spacing: 0.005em;9234  color: var(--peach-t0);9235  line-height: 1;9236}9237.peach-pair-head-spacer { flex: 1; }92389239/* Chip row ------------------------------------------------------------- */9240.peach-pair-chip-row {9241  display: flex;9242  align-items: center;9243  justify-content: flex-start;9244  margin-top: 12px;9245}9246.peach-pair-chip {9247  display: inline-flex; align-items: center; gap: 8px;9248  padding: 5px 10px 5px 8px;9249  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9250  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9251  border-radius: 999px;9252  font-family: var(--peach-mono, ui-monospace, monospace);9253  font-size: 11px;9254  letter-spacing: 0.04em;9255  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9256}9257.peach-pair-chip-dot {9258  width: 6px; height: 6px; border-radius: 50%;9259  background: var(--peach-accent);9260  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9261}9262.peach-pair-chip[data-phase="paired"] {9263  background: color-mix(in srgb, #4f9eda 12%, transparent);9264  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9265  color: #76b6e8;9266}9267.peach-pair-chip[data-phase="paired"] .peach-pair-chip-dot {9268  background: #76b6e8;9269  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9270}9271.peach-pair-chip[data-phase="timeout"],9272.peach-pair-chip[data-phase="mic_denied"],9273.peach-pair-chip[data-phase="version_mismatch"],9274.peach-pair-chip[data-phase="handshake_failed"] {9275  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9276  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9277  color: var(--peach-warn, #d29257);9278}9279.peach-pair-chip[data-phase="timeout"] .peach-pair-chip-dot,9280.peach-pair-chip[data-phase="mic_denied"] .peach-pair-chip-dot,9281.peach-pair-chip[data-phase="version_mismatch"] .peach-pair-chip-dot,9282.peach-pair-chip[data-phase="handshake_failed"] .peach-pair-chip-dot {9283  background: var(--peach-warn, #d29257);9284  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9285}92869287/* Bird stage ----------------------------------------------------------- */9288.peach-pair-stage {9289  position: relative;9290  /* Never let the flex column steal the stage's height to fit whatever is9291     below it — that is what clipped the birds to their legs before. Anything9292     that does not fit has to give somewhere else. */9293  flex: none;9294  margin: 14px 0 8px;9295  height: 180px;9296  border-radius: 12px;9297  background:9298    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9299    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),9300    color-mix(in srgb, var(--peach-bg) 92%, #000);9301  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);9302  overflow: hidden;9303  isolation: isolate;9304}9305.peach-pair-stage::after {9306  content: '';9307  position: absolute;9308  left: 12%; right: 12%;9309  bottom: 36px;9310  height: 1px;9311  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9312}93139314.peach-pair-bird-slot {9315  position: absolute;9316  bottom: 8px;9317  width: 100px;9318  height: 110px;9319  display: flex;9320  align-items: flex-end;9321  justify-content: center;9322}9323.peach-pair-bird-slot-desktop { left: 28px; }9324.peach-pair-bird-slot-mobile { right: 28px; }93259326/* The QR screen is the tallest in the flow: a 180px stage plus headline, sub,9327   QR and action overflows the popup, and the stage is what gets clipped — you9328   saw bird legs and nothing else. Shrink the stage and the birds with it here9329   only, so the birds stay whole and the QR stays comfortably above the fold.9330   Uses the individual `scale` property rather than `transform`, which the9331   mobile bird's hop animation already owns. */9332.peach-adoption-source[data-phase="invitation"] .peach-pair-stage {9333  height: 108px;9334  margin: 8px 0 6px;9335}9336.peach-adoption-source[data-phase="invitation"] .peach-pair-bird-slot {9337  scale: 0.62;9338  transform-origin: center bottom;9339}9340.peach-adoption-source[data-phase="invitation"] .peach-pair-stage::after {9341  bottom: 20px;9342}93439344/* Mobile bird hops in from the right when handshake begins */9345.peach-pair-bird-slot-mobile {9346  opacity: 1;9347  transform: translateX(-6px);9348  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9349}9350.peach-pair-stage.act-listening .peach-pair-bird-slot-mobile,9351.peach-pair-stage.act-chirping .peach-pair-bird-slot-mobile,9352.peach-pair-stage.act-idle .peach-pair-bird-slot-mobile {9353  opacity: 0;9354  transform: translateX(60px) rotate(8deg);9355}9356.peach-pair-stage.act-handshake .peach-pair-bird-slot-desktop,9357.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop {9358  transform: translateX(6px);9359  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9360}93619362/* Paired: both birds bob together */9363.peach-pair-stage.act-paired .peach-pair-bird-slot {9364  animation: peach-pair-happy-bob 1.2s ease-in-out infinite;9365}9366.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { animation-delay: 0.2s; }9367.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop { --bb-x: 6px; }9368.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { --bb-x: -6px; }9369@keyframes peach-pair-happy-bob {9370  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9371  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9372}93739374/* Bird internal -------------------------------------------------------- */9375.peach-pair-bird {9376  width: 108px;9377  height: 108px;9378  transform-origin: 50% 95%;9379}9380.peach-pair-bird svg { width: 100%; height: 100%; overflow: visible; }93819382.peach-pair-bird-body {9383  transform-origin: 50% 80%;9384  animation: peach-pair-bird-bob 2.4s ease-in-out infinite;9385}9386@keyframes peach-pair-bird-bob {9387  0%, 100% { transform: translateY(0) scale(1, 1); }9388  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9389}93909391.peach-pair-bird-eye-group {9392  animation: peach-pair-blink 5.2s steps(1, end) infinite;9393  transform-origin: center;9394  transform-box: fill-box;9395}9396@keyframes peach-pair-blink {9397  0%, 92%, 96%, 100% { transform: scaleY(1); }9398  94%                { transform: scaleY(0.05); }9399}94009401/* Pose: chirping — beak opens, head bobs, aura blooms */9402.peach-pair-bird-pose-chirping .peach-pair-bird-body {9403  animation:9404    peach-pair-bird-bob 2.4s ease-in-out infinite,9405    peach-pair-squeeze 1.7s ease-in-out infinite;9406}9407@keyframes peach-pair-squeeze {9408  0%, 70%, 100% { transform-origin: 50% 85%; }9409  78%           { transform: scale(1.04, 0.96) translateY(1px); }9410  86%           { transform: scale(0.98, 1.02); }9411}9412.peach-pair-bird-pose-chirping .peach-pair-bird-head-group {9413  animation: peach-pair-head-bob 1.7s ease-in-out infinite;9414}9415@keyframes peach-pair-head-bob {9416  0%, 70%, 100% { transform: translateY(0) rotate(0); }9417  78%           { transform: translateY(-3px) rotate(-4deg); }9418  86%           { transform: translateY(-1px) rotate(-2deg); }9419}9420.peach-pair-bird-pose-chirping .peach-pair-bird-beak {9421  animation: peach-pair-beak-open 1.7s ease-in-out infinite;9422}9423@keyframes peach-pair-beak-open {9424  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9425  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9426  86%           { transform: rotate(-6deg); }9427}9428.peach-pair-bird-pose-chirping .peach-pair-bird-aura {9429  animation: peach-pair-aura 1.7s ease-in-out infinite;9430}9431@keyframes peach-pair-aura {9432  0%, 100% { opacity: 0; }9433  50%      { opacity: 0.8; }9434}9435.peach-pair-bird-pose-chirping .peach-pair-bird-tail {9436  animation: peach-pair-tail-twitch 1.7s ease-in-out infinite;9437  transform-origin: 100% 50%;9438}9439@keyframes peach-pair-tail-twitch {9440  0%, 75%, 100% { transform: rotate(0); }9441  82%           { transform: rotate(-3deg) translateX(-1px); }9442}94439444/* Pose: attentive — head tilts toward partner */9445.peach-pair-bird-pose-attentive .peach-pair-bird-head-group {9446  animation: peach-pair-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9447}9448@keyframes peach-pair-head-tilt {9449  0%   { transform: rotate(0) translateY(0); }9450  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9451  100% { transform: rotate(-6deg); }9452}9453.peach-pair-bird-pose-attentive .peach-pair-bird-tail {9454  animation: peach-pair-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9455  transform-origin: 100% 50%;9456}9457@keyframes peach-pair-tail-cock {9458  0%   { transform: rotate(0); }9459  100% { transform: rotate(-4deg); }9460}94619462/* Pose: happy — wing flutter, tuft perk, tail wag */9463.peach-pair-bird-pose-happy .peach-pair-bird-wing {9464  transform-origin: 80% 60%;9465  animation: peach-pair-wing-flutter 0.32s ease-in-out 5;9466}9467@keyframes peach-pair-wing-flutter {9468  0%, 100% { transform: rotate(0) translateY(0); }9469  50%      { transform: rotate(-16deg) translateY(-2px); }9470}9471.peach-pair-bird-pose-happy .peach-pair-bird-tuft {9472  transform-origin: 0% 100%;9473  animation: peach-pair-tuft-perk 0.4s ease-in-out 3;9474}9475@keyframes peach-pair-tuft-perk {9476  0%, 100% { transform: rotate(0); }9477  50%      { transform: rotate(-15deg) translateY(-1px); }9478}9479.peach-pair-bird-pose-happy .peach-pair-bird-tail {9480  transform-origin: 100% 50%;9481  animation: peach-pair-tail-wag 0.5s ease-in-out 4;9482}9483@keyframes peach-pair-tail-wag {9484  0%, 100% { transform: rotate(0); }9485  25%      { transform: rotate(6deg); }9486  75%      { transform: rotate(-6deg); }9487}9488.peach-pair-bird-pose-happy .peach-pair-bird-head-group {9489  animation: peach-pair-head-perk 0.5s ease-out;9490}9491@keyframes peach-pair-head-perk {9492  0%   { transform: translateY(0); }9493  40%  { transform: translateY(-3px) rotate(2deg); }9494  100% { transform: translateY(0); }9495}94969497/* Pose: sad — body droops forward */9498.peach-pair-bird-pose-sad .peach-pair-bird-body {9499  transform: translateY(5px) rotate(-2deg);9500  animation: none;9501}9502.peach-pair-bird-pose-sad .peach-pair-bird-head-group {9503  transform: translateY(4px) rotate(8deg);9504}9505.peach-pair-bird-pose-sad .peach-pair-bird-tuft { transform: rotate(15deg) translateY(2px); }9506.peach-pair-bird-pose-sad .peach-pair-bird-tail { transform: rotate(8deg) translateY(2px); }95079508.peach-pair-bird-pose-hidden { opacity: 0; }95099510/* Sound arcs ----------------------------------------------------------- */9511.peach-pair-arcs {9512  position: absolute;9513  top: 18px;9514  width: 96px;9515  height: 70px;9516  pointer-events: none;9517}9518.peach-pair-arcs-right { right: -60px; }9519.peach-pair-arcs-left  { left: -60px; transform: scaleX(-1); }9520.peach-pair-arc {9521  position: absolute;9522  top: 50%;9523  left: 0;9524  width: 40px;9525  height: 40px;9526  margin-top: -20px;9527  border: 1.2px solid #f4d5a8;9528  border-color: transparent #f4d5a8 transparent transparent;9529  border-radius: 50%;9530  opacity: 0;9531  animation: peach-pair-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9532}9533@keyframes peach-pair-arc-expand {9534  0%   { transform: scale(0.4); opacity: 0; }9535  20%  { opacity: 0.9; }9536  100% { transform: scale(1.6); opacity: 0; }9537}95389539/* Flight wave ---------------------------------------------------------- */9540.peach-pair-flight-track {9541  position: absolute;9542  inset: 32px 36px 38px 36px;9543  pointer-events: none;9544}9545.peach-pair-flight-wave {9546  position: absolute;9547  top: 8px;9548  left: 76px;9549  right: 76px;9550  height: 60px;9551  width: auto;9552  opacity: 0;9553  transition: opacity 0.15s ease;9554  stroke: #f4d5a8;9555  fill: none;9556}9557.peach-pair-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9558.peach-pair-flight-wave.is-visible { opacity: 1; }9559.peach-pair-flight-path,9560.peach-pair-flight-path-2 {9561  stroke-dasharray: 240;9562  stroke-dashoffset: 240;9563  stroke-linecap: round;9564  fill: none;9565}9566.peach-pair-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9567.peach-pair-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9568.peach-pair-flight-wave.is-visible .peach-pair-flight-path {9569  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9570}9571.peach-pair-flight-wave.is-visible .peach-pair-flight-path-2 {9572  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9573}9574@keyframes peach-pair-fly {9575  0%   { stroke-dashoffset: 240; opacity: 0; }9576  20%  { opacity: 1; }9577  100% { stroke-dashoffset: -120; opacity: 0; }9578}95799580/* Connection dot ------------------------------------------------------- */9581.peach-pair-dot {9582  position: absolute;9583  top: 50%; left: 50%;9584  transform: translate(-50%, -50%);9585  width: 40px; height: 40px;9586  opacity: 0;9587  pointer-events: none;9588  transition: opacity 0.3s ease;9589  color: var(--peach-accent);9590}9591.peach-pair-dot.is-visible { opacity: 1; }9592.peach-pair-dot-glow {9593  position: absolute; top: 50%; left: 50%;9594  transform: translate(-50%, -50%);9595  width: 38px; height: 38px;9596  border-radius: 50%;9597  filter: blur(10px);9598  opacity: 0.55;9599  background: var(--peach-accent);9600  animation: peach-pair-dot-bloom 1.4s ease-out;9601}9602.peach-pair-dot-core {9603  position: absolute; top: 50%; left: 50%;9604  transform: translate(-50%, -50%);9605  width: 8px; height: 8px;9606  border-radius: 50%;9607  background: var(--peach-accent);9608  box-shadow: 0 0 12px currentColor;9609  animation: peach-pair-dot-core 1.4s ease-out;9610}9611.peach-pair-dot-ring {9612  position: absolute; top: 50%; left: 50%;9613  width: 60px; height: 60px;9614  transform: translate(-50%, -50%);9615  animation: peach-pair-dot-ring 1.4s linear;9616  stroke: var(--peach-accent);9617}9618@keyframes peach-pair-dot-bloom {9619  0%   { width: 4px; height: 4px; opacity: 0; }9620  35%  { width: 60px; height: 60px; opacity: 0.7; }9621  100% { width: 38px; height: 38px; opacity: 0.55; }9622}9623@keyframes peach-pair-dot-core {9624  0%   { width: 0; height: 0; }9625  35%  { width: 12px; height: 12px; }9626  100% { width: 8px; height: 8px; }9627}9628@keyframes peach-pair-dot-ring {9629  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9630  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9631  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9632}96339634/* Motes — drift upward across the stage */9635.peach-pair-motes {9636  position: absolute;9637  inset: 0;9638  pointer-events: none;9639}9640.peach-pair-mote {9641  position: absolute;9642  width: 2px; height: 2px;9643  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9644  border-radius: 50%;9645  bottom: 32px;9646  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9647  opacity: 0;9648  animation: peach-pair-mote-drift 6s linear infinite;9649  animation-delay: calc(var(--mote-i, 0) * 0.7s);9650}9651@keyframes peach-pair-mote-drift {9652  0%   { transform: translateY(0); opacity: 0; }9653  10%  { opacity: 0.6; }9654  90%  { opacity: 0.1; }9655  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9656}96579658/* Status copy ---------------------------------------------------------- */9659.peach-pair-copy-host {9660  margin: 4px 4px 10px;9661  text-align: center;9662  min-height: 50px;9663}9664.peach-pair-copy {9665  animation: peach-pair-copy-in 0.35s ease both;9666}9667@keyframes peach-pair-copy-in {9668  from { opacity: 0; transform: translateY(4px); }9669  to   { opacity: 1; transform: translateY(0); }9670}9671.peach-pair-headline {9672  font-family: var(--font-display, Georgia, serif);9673  font-style: italic;9674  font-size: 20px;9675  font-weight: 500;9676  line-height: 1.2;9677  letter-spacing: 0.005em;9678  color: var(--peach-t0);9679  margin-bottom: 6px;9680}9681.peach-pair-copy-listening .peach-pair-headline,9682.peach-pair-copy-chirping .peach-pair-headline,9683.peach-pair-copy-idle .peach-pair-headline {9684  font-family: inherit;9685  font-style: normal;9686  font-weight: 500;9687  font-size: 15px;9688  color: var(--peach-t0);9689  letter-spacing: 0;9690}9691.peach-pair-copy-paired .peach-pair-headline {9692  color: var(--peach-t0);9693  font-weight: 600;9694}9695.peach-pair-sub {9696  font-size: 12.5px;9697  line-height: 1.45;9698  color: var(--peach-t1);9699  max-width: 280px;9700  margin: 0 auto;9701  text-wrap: pretty;9702}97039704/* Status action -------------------------------------------------------- */9705.peach-pair-action {9706  margin: 2px 4px 10px;9707  margin-top: auto;9708  display: flex;9709  flex-direction: column;9710  gap: 8px;9711}9712.peach-pair-action-waiting {9713  display: flex;9714  align-items: center;9715  justify-content: space-between;9716  gap: 12px;9717}9718.peach-pair-cancel {9719  min-width: 96px;9720}9721.peach-pair-listening {9722  display: inline-flex; align-items: center; gap: 4px;9723  font-family: var(--peach-mono, ui-monospace, monospace);9724  font-size: 9.5px;9725  text-transform: uppercase;9726  letter-spacing: 0.12em;9727  color: var(--peach-t1);9728  padding: 8px 10px;9729}9730.peach-pair-listen-dot {9731  width: 4px; height: 4px;9732  border-radius: 50%;9733  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9734  animation: peach-pair-listen-pulse 1.2s ease-in-out infinite;9735}9736.peach-pair-listen-dot:nth-child(2) { animation-delay: 0.2s; }9737.peach-pair-listen-dot:nth-child(3) { animation-delay: 0.4s; }9738.peach-pair-listen-label { margin-left: 6px; }9739@keyframes peach-pair-listen-pulse {9740  0%, 100% { opacity: 0.25; transform: scale(0.9); }9741  50%      { opacity: 1;     transform: scale(1.15); }9742}97439744.peach-pair-action-handshake {9745  display: flex;9746  flex-direction: column;9747  align-items: center;9748  gap: 8px;9749  padding: 8px 4px;9750}9751.peach-pair-meter {9752  width: 100%;9753  max-width: 280px;9754  height: 2px;9755  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9756  border-radius: 2px;9757  position: relative;9758  overflow: hidden;9759}9760.peach-pair-meter-bar {9761  position: absolute;9762  top: 0; bottom: 0;9763  width: 30%;9764  left: -30%;9765  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9766  animation: peach-pair-meter-sweep 1.4s ease-in-out infinite;9767}9768@keyframes peach-pair-meter-sweep {9769  0%   { left: -30%; }9770  100% { left: 100%; }9771}9772.peach-pair-meter-label {9773  font-family: var(--peach-mono, ui-monospace, monospace);9774  font-size: 9.5px;9775  text-transform: uppercase;9776  letter-spacing: 0.14em;9777  color: var(--peach-t1);9778}97799780.peach-pair-action-paired {9781  display: flex;9782  align-items: center;9783  gap: 10px;9784}9785.peach-pair-device-confirm {9786  flex: 1;9787  display: inline-flex;9788  align-items: center;9789  gap: 8px;9790  padding: 9px 10px 9px 12px;9791  border-radius: 10px;9792  background: color-mix(in srgb, #76b6e8 12%, transparent);9793  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9794  font-size: 12.5px;9795  color: var(--peach-t0);9796  min-width: 0;9797}9798.peach-pair-device-confirm-glyph {9799  display: inline-flex;9800  color: #76b6e8;9801}9802.peach-pair-device-confirm-name {9803  flex: 1;9804  overflow: hidden;9805  text-overflow: ellipsis;9806  white-space: nowrap;9807}9808.peach-pair-device-confirm-trust {9809  font-family: var(--peach-mono, ui-monospace, monospace);9810  font-size: 9.5px;9811  text-transform: uppercase;9812  letter-spacing: 0.1em;9813  color: #76b6e8;9814  padding: 2px 6px;9815  border-radius: 4px;9816  background: color-mix(in srgb, #76b6e8 14%, transparent);9817}9818.peach-pair-done {9819  min-width: 80px;9820}9821.peach-pair-retry {9822  align-self: center;9823  display: block;9824  margin: 6px auto 0;9825  min-width: 120px;9826}9827.peach-pair-mic-help {9828  font-size: 12px;9829  color: var(--peach-t1);9830  text-align: center;9831  max-width: 320px;9832  margin: 0 auto;9833}98349835/* Rest state — bird stage at idle pose, primary CTA + paired list */9836.peach-pair-pair[data-phase="idle"] .peach-pair-stage {9837  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9838  height: 160px;9839}9840.peach-pair-pair-start {9841  width: 100%;9842  display: inline-flex;9843  align-items: center;9844  justify-content: center;9845  gap: 8px;9846  padding: 11px 14px;9847  border-radius: 10px;9848  background: var(--peach-accent);9849  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9850  color: #1a0905;9851  font-family: inherit;9852  font-size: 13px;9853  font-weight: 600;9854  letter-spacing: 0.01em;9855  cursor: pointer;9856  transition: filter 0.15s ease, transform 0.1s ease;9857}9858.peach-pair-pair-start:hover { filter: brightness(1.08); }9859.peach-pair-pair-start:active { transform: translateY(1px); }98609861.peach-pair-paired-section {9862  margin-top: 14px;9863  display: flex;9864  flex-direction: column;9865  gap: 8px;9866}9867.peach-pair-paired-heading {9868  margin: 0;9869  font-family: var(--peach-mono, ui-monospace, monospace);9870  font-size: 10px;9871  font-weight: 500;9872  letter-spacing: 0.14em;9873  text-transform: uppercase;9874  color: var(--peach-t1);9875}98769877/* Footer --------------------------------------------------------------- */9878.peach-pair-foot {9879  margin: 10px -4px -2px;9880  margin-top: auto;9881}9882.peach-pair-foot-divider {9883  height: 1px;9884  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9885  margin-bottom: 10px;9886}9887.peach-pair-foot-text {9888  font-size: 11px;9889  line-height: 1.5;9890  color: var(--peach-t1);9891  text-align: center;9892  padding: 0 4px;9893  text-wrap: pretty;9894}98959896/* Screen-reader-only live region. Kept off the visual flow but read by9897   assistive tech as the pairing phase advances. */9898.peach-sr-only {9899  position: absolute;9900  width: 1px; height: 1px;9901  padding: 0; margin: -1px;9902  overflow: hidden;9903  clip: rect(0, 0, 0, 0);9904  white-space: nowrap;9905  border: 0;9906}99079908/* Reduced motion — stage simplifies to opacity transitions only */9909@media (prefers-reduced-motion: reduce) {9910  .peach-pair-bird-body,9911  .peach-pair-bird-head-group,9912  .peach-pair-bird-beak,9913  .peach-pair-bird-wing,9914  .peach-pair-bird-tuft,9915  .peach-pair-bird-tail,9916  .peach-pair-bird-eye-group,9917  .peach-pair-bird-aura,9918  .peach-pair-arc,9919  .peach-pair-flight-path,9920  .peach-pair-flight-path-2,9921  .peach-pair-dot-glow,9922  .peach-pair-dot-core,9923  .peach-pair-dot-ring,9924  .peach-pair-mote,9925  .peach-pair-meter-bar,9926  .peach-pair-listen-dot,9927  .peach-pair-bird-slot,9928  .peach-pair-bird-slot-mobile {9929    animation: none !important;9930    transition: opacity 0.2s linear !important;9931  }9932}99339934/* ─────────────────────────────────────────────────────────────────9935   Settings → Sync surface. Wraps the same bird9936   animation used by the pairing flow with a paired-devices list and9937   the "Pair a device" CTA.9938   ───────────────────────────────────────────────────────────────── */9939.peach-pair-settings {9940  position: absolute;9941  inset: 0;9942  z-index: 3;9943  display: flex;9944  flex-direction: column;9945  gap: 18px;9946  padding: 14px 12px 12px;9947  width: 100%;9948  box-sizing: border-box;9949  overflow-y: auto;9950  overflow-x: hidden;9951  /* Same warm surface as the pairing screen — unifies the two views. */9952  background:9953    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9954    var(--peach-bg);9955  color: var(--peach-t0);9956  isolation: isolate;9957  /* Hide native scrollbar — content fits 99% of the time and a chunky9958     gutter ruins the surface. */9959  scrollbar-width: none;9960  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9961}9962.peach-pair-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9963.peach-pair-settings::before {9964  content: '';9965  position: absolute;9966  inset: 0;9967  pointer-events: none;9968  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9969  z-index: 0;9970}9971.peach-pair-settings > * { position: relative; z-index: 1; }99729973.peach-pair-settings--pairing {9974  padding: 0;9975  align-items: stretch;9976  justify-content: stretch;9977  background: none;9978  isolation: auto;9979}9980.peach-pair-settings--pairing::before { display: none; }99819982.peach-pair-settings-header {9983  display: flex;9984  align-items: center;9985  gap: 10px;9986}9987.peach-pair-settings-title {9988  margin: 0;9989  font-family: var(--font-display, Georgia, serif);9990  font-style: italic;9991  font-size: 24px;9992  font-weight: 500;9993  line-height: 1;9994  color: var(--peach-t0);9995  letter-spacing: 0.005em;9996}9997.peach-pair-settings-section {9998  margin: 6px 0 -4px;9999  font-size: 11px;10000  font-weight: 600;10001  letter-spacing: 0.08em;10002  text-transform: uppercase;10003  color: var(--peach-text-muted);10004}10005.peach-pair-settings-error {10006  font-size: 12px;10007  padding: 8px 10px;10008  border-radius: 8px;10009  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);10010  color: var(--peach-text);10011}10012.peach-pair-settings-footer {10013  margin-top: auto;10014  padding-top: 18px;10015  font-size: 11.5px;10016  line-height: 1.5;10017  color: var(--peach-text-muted);10018  text-align: center;10019}1002010021/* Hero card shown when no devices are paired yet. */10022.peach-pair-hero {10023  display: flex;10024  flex-direction: column;10025  align-items: center;10026  gap: 12px;10027  padding: 20px 12px 8px;10028  text-align: center;10029}10030.peach-pair-hero-svg {10031  display: block;10032  max-width: 100%;10033  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));10034}10035.peach-pair-hero-headline {10036  margin: 0;10037  font-family: var(--font-display, Georgia, serif);10038  font-style: italic;10039  font-size: 20px;10040  font-weight: 500;10041  line-height: 1.2;10042  letter-spacing: 0.005em;10043  color: var(--peach-t0);10044}10045.peach-pair-hero-sub {10046  margin: 0;10047  font-size: 13px;10048  line-height: 1.5;10049  color: var(--peach-t1);10050  max-width: 320px;10051  text-wrap: pretty;10052}1005310054.peach-pair-pair-cta {10055  display: flex;10056  justify-content: center;10057  padding: 4px 0 6px;10058}10059.peach-pair-pair-button {10060  display: inline-flex;10061  align-items: center;10062  gap: 8px;10063  min-width: 220px;10064  justify-content: center;10065}10066.peach-pair-pair-button-icon {10067  flex: 0 0 auto;10068}1006910070/* Paired devices list. Roomy rows that look at home next to the rest10071   of Settings; stale rows get a soft warm-warning border tint. */10072.peach-pair-device-list {10073  list-style: none;10074  margin: 0;10075  padding: 0;10076  display: flex;10077  flex-direction: column;10078  gap: 8px;10079}10080.peach-pair-device-row {10081  display: flex;10082  align-items: center;10083  gap: 12px;10084  padding: 12px;10085  border-radius: 10px;10086  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10087  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);10088}10089.peach-pair-device-row[data-stale="true"] {10090  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);10091}10092.peach-pair-device-icon {10093  width: 32px;10094  height: 32px;10095  display: flex;10096  align-items: center;10097  justify-content: center;10098  border-radius: 8px;10099  color: var(--peach-text);10100  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);10101}10102.peach-pair-device-info {10103  flex: 1;10104  display: flex;10105  flex-direction: column;10106  gap: 2px;10107  min-width: 0;10108}10109.peach-pair-device-name {10110  font-size: 14px;10111  font-weight: 600;10112  color: var(--peach-text);10113  overflow: hidden;10114  text-overflow: ellipsis;10115  white-space: nowrap;10116}10117.peach-pair-device-meta {10118  font-size: 11.5px;10119  color: var(--peach-text-muted);10120  display: flex;10121  flex-wrap: wrap;10122  align-items: center;10123  gap: 8px;10124}10125.peach-pair-device-badge {10126  font-size: 10.5px;10127  font-weight: 500;10128  letter-spacing: 0.02em;10129  padding: 2px 6px;10130  border-radius: 999px;10131  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);10132  color: var(--peach-text);10133}10134.peach-pair-device-stale {10135  font-size: 10.5px;10136  font-weight: 500;10137  color: var(--peach-warn, #d29257);10138}10139.peach-pair-device-remove {10140  flex: 0 0 auto;10141  color: var(--peach-text-muted);10142}10143.peach-pair-device-remove:hover {10144  color: var(--peach-danger, #c25b4a);10145}10146.peach-pair-unpair-confirm {10147  display: flex;10148  gap: 6px;10149  align-items: center;10150}1015110152/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */10153.peach-pair-pro-card {10154  position: relative;10155  margin: 18px 12px;10156  padding: 18px 20px 22px;10157  border-radius: 22px;10158  background:10159    radial-gradient(140% 90% at 50% 0%,10160      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,10161      transparent 60%),10162    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10163  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);10164  box-shadow:10165    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,10166    0 18px 40px -24px rgba(0, 0, 0, 0.45);10167  display: flex;10168  flex-direction: column;10169  align-items: center;10170  gap: 10px;10171  text-align: center;10172  overflow: hidden;10173}10174.peach-pair-pro-stage {10175  position: relative;10176  width: 220px;10177  height: 140px;10178  display: flex;10179  align-items: flex-end;10180  justify-content: center;10181  margin-bottom: 2px;10182}10183.peach-pair-pro-bird-slot {10184  width: 140px;10185  height: 132px;10186  display: flex;10187  align-items: flex-end;10188  justify-content: center;10189  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));10190}10191.peach-pair-pro-bird-slot .peach-pair-bird {10192  width: 100%;10193  height: 100%;10194}10195.peach-pair-pro-bird-slot .peach-pair-bird svg {10196  width: 100%;10197  height: 100%;10198  overflow: visible;10199}10200.peach-pair-pro-headline {10201  margin: 4px 0 0;10202  font-family: var(--font-display, "Cormorant Garamond", serif);10203  font-style: italic;10204  font-size: 19px;10205  font-weight: 500;10206  letter-spacing: 0.01em;10207  color: var(--peach-t0);10208  max-width: 280px;10209  line-height: 1.25;10210}10211.peach-pair-pro-body {10212  margin: 0;10213  font-size: 13px;10214  line-height: 1.55;10215  color: var(--peach-t1);10216  max-width: 300px;10217}10218.peach-pair-pro-cta {10219  margin-top: 4px;10220}10221.peach-pair-pro-foot {10222  margin: 2px 0 0;10223  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10224  font-size: 0.625rem;10225  letter-spacing: 0.08em;10226  text-transform: uppercase;10227  color: var(--peach-t2);10228  opacity: 0.75;10229}1023010231/* Shell border and shadow in light mode: match dark mode's near-invisible10232   border weight so the popup frame looks the same in both themes. */10233.light .peach-shell,10234.light .peach-screen {10235  border-color: rgba(26, 18, 8, 0.07);10236  box-shadow:10237    0 2px 8px rgba(80, 56, 32, 0.08),10238    0 14px 48px rgba(80, 56, 32, 0.10),10239    0 0 0 1px rgba(26, 18, 8, 0.04);10240}1024110242/* HOLE 4: the revoke confirmation carries its own disclosure, so it needs the10243   full row width rather than sitting inline beside the device name. */10244.peach-settings-row:has(> .peach-unpair-confirm) { flex-wrap: wrap; }10245.peach-unpair-confirm {10246  display: flex;10247  flex-direction: column;10248  gap: 8px;10249  width: 100%;10250}10251.peach-unpair-confirm-note {10252  margin: 0;10253  font-size: 0.6875rem;10254  line-height: 1.5;10255  color: var(--peach-t2);10256}1025710258/* Sync mode selector — three named choices (public / private / off). Replaces10259   the old binary "local network only" toggle; see docs/sync-lan-retirement.md. */10260.peach-sync-mode {10261  display: flex;10262  align-items: flex-start;10263  gap: 10px;10264  width: 100%;10265  text-align: left;10266  padding: 10px 12px;10267  margin-top: 8px;10268  border-radius: 10px;10269  border: 1px solid var(--peach-border);10270  background: color-mix(in srgb, var(--peach-t0) 3%, transparent);10271  color: var(--peach-t1);10272  cursor: pointer;10273  transition: border-color var(--peach-dur-80) var(--peach-curve-arrival),10274              background-color var(--peach-dur-80) var(--peach-curve-arrival);10275}10276.peach-sync-mode:hover:not(:disabled) {10277  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);10278}10279.peach-sync-mode.is-active {10280  border-color: var(--peach-accent);10281  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);10282}10283.peach-sync-mode:disabled { opacity: 0.6; cursor: default; }10284.peach-sync-mode-main { display: flex; flex-direction: column; gap: 3px; flex: 1; }10285.peach-sync-mode-title { font-size: 12px; }10286.peach-sync-mode-sub {10287  font-size: 11px;10288  line-height: 1.5;10289  color: var(--peach-t2);10290}10291.peach-sync-mode-pip {10292  flex: none;10293  margin-top: 3px;10294  width: 12px; height: 12px;10295  border-radius: 50%;10296  border: 1px solid var(--peach-t3);10297}10298.peach-sync-mode.is-active .peach-sync-mode-pip {10299  border-color: var(--peach-accent);10300  background:10301    radial-gradient(circle at 50% 50%, var(--peach-accent) 0 42%, transparent 44%);10302}10303.peach-sync-mode-disclosure {10304  margin: 10px 2px 0;10305  font-size: 11px;10306  line-height: 1.5;10307  color: var(--peach-t2);10308}10309.peach-sync-mode-warn { color: var(--peach-breach); }1031010311/* Compact form, used mid-pairing: a quiet line, not a decision to make. */10312.peach-sync-mode-summary {10313  margin: 8px 2px 0;10314  font-size: 11px;10315  color: var(--peach-t2);10316  text-align: center;10317}10318.peach-sync-mode-change {10319  background: none;10320  border: none;10321  padding: 0;10322  font: inherit;10323  color: var(--peach-accent);10324  text-decoration: underline;10325  cursor: pointer;10326}