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.peach-sync-pip.is-error {973  background: var(--peach-breach);974  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-breach) 60%, transparent);975}976@keyframes peach-sync-pip-pulse {977  0%, 100% { opacity: 1; }978  50% { opacity: 0.35; }979}980@media (prefers-reduced-motion: reduce) {981  .peach-sync-btn.is-syncing .peach-sync-icon { animation: none; opacity: 0.6; }982  .peach-sync-pip.is-busy { animation: none; }983}984985.peach-btn:focus-visible {986  outline: none;987  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);988}989990/* Lock button */991.peach-lock-icon { transform-origin: center; }992.peach-lock-btn { color: var(--peach-accent); }993.peach-lock-btn.is-locking .peach-lock-icon {994  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);995}996997/* Biometric unlock button */998.peach-biometric-btn {999  display: flex;1000  align-items: center;1001  justify-content: center;1002  gap: 6px;1003  margin-top: 8px;1004  width: 100%;1005}10061007/* Copy button */1008.peach-copy-btn {1009  position: relative; overflow: hidden;1010  color: var(--peach-t2); border-color: var(--peach-t3);1011}1012.peach-copy-icon {1013  display: inline-flex; align-items: center; justify-content: center;1014  position: relative; z-index: 1;1015}1016.peach-copy-icon-svg { display: block; }1017.peach-copy-sheen {1018  position: absolute; inset: 0;1019  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%);1020  opacity: 0; transform: scaleX(0.15); transform-origin: left center;1021}1022.peach-copy-btn.is-copied {1023  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;1024  box-shadow:1025    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),1026    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),1027    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);1028}1029.peach-copy-btn.is-copied .peach-copy-icon {1030  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;1031}1032.peach-copy-btn.is-copied .peach-copy-sheen {1033  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;1034}1035.peach-copy-btn.is-retreat {1036  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;1037}1038.peach-copy-btn.is-retreat .peach-copy-sheen {1039  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;1040}1041.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }1042.peach-copy-drain-bar {1043  display: block; width: 100%; height: 100%;1044  background: var(--peach-accent); opacity: 0.7;1045  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;1046}10471048/* Unlock screen elements */1049.peach-underline-input {1050  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);1051  padding: 6px 0; background: transparent; color: var(--peach-t0);1052  outline: none;1053  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1054  font-size: 0.8125rem;1055  caret-color: var(--peach-accent);1056}1057.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }1058.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }1059.peach-hint {1060  margin: 0;1061  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1062  font-size: 0.625rem; color: var(--peach-t2);1063}1064.peach-unlock-footer {1065  margin-top: 4px; display: flex; align-items: center; gap: 7px;1066  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1067  font-size: 0.625rem; color: var(--peach-t2);1068}1069.peach-unlock-footer--lock {1070  padding-top: 2px;1071}10721073/* Desktop helper (peach-sync) code pairing — additive hooks. The shared pairing1074   classes (peach-pair-*) carry the shared layout; these only style the parts1075   unique to the typed-code path. Inline styles cover the SAS/confirm gate. */1076.peach-desktop-pair { display: flex; flex-direction: column; }1077.peach-desktop-enter,1078.peach-desktop-searching,1079.peach-desktop-paired,1080.peach-desktop-error {1081  display: flex; flex-direction: column; gap: 8px;1082  padding: 4px 18px 16px; text-align: center; align-items: center;1083}1084.peach-desktop-enter .peach-label { align-self: flex-start; }1085/* Sized for a full 19-character pairing code (A74H-48J3-KI32-OEP4) in a1086   320px popup — a 6-digit legacy helper code still reads fine at this size. */1087.peach-code-input {1088  text-align: center; letter-spacing: 0.12em; padding-left: 0.12em;1089  font-size: 15px;1090}1091.peach-code-input::placeholder { letter-spacing: 0.12em; }10921093/* Sync card "pair a device" options — bordered, raised tappable rows that read1094   as buttons on any card hue (theme-neutral light overlay, not the peach accent). */1095.peach-sync-pair-option {1096  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;1097  width: 100%; text-align: left; cursor: pointer; font-family: inherit;1098  padding: 11px 12px; border-radius: 10px;1099  background: color-mix(in srgb, var(--peach-t0) 6%, transparent);1100  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);1101  color: var(--peach-t0);1102  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;1103}1104.peach-sync-pair-option + .peach-sync-pair-option { margin-top: 8px; }1105.peach-sync-pair-option:hover {1106  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);1107  border-color: color-mix(in srgb, var(--peach-t0) 28%, transparent);1108}1109.peach-sync-pair-option:active { transform: translateY(1px); }1110.peach-sync-pair-option:disabled { opacity: 0.5; cursor: default; }1111.peach-sync-pair-option-icon { flex-shrink: 0; display: flex; align-items: center; color: var(--peach-t1); margin-top: 1px; }1112.peach-sync-pair-option-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }1113.peach-sync-pair-option-title { font-size: 0.8125rem; font-weight: 600; }1114.peach-sync-pair-option-sub { font-size: 0.6875rem; line-height: 1.45; color: var(--peach-t2); }1115.peach-sync-pair-option-chevron { flex-shrink: 0; color: var(--peach-t2); font-size: 1.05rem; line-height: 1.3; }11161117/* Breach badge */1118.peach-breach-badge {1119  display: flex;1120  position: relative;1121  z-index: 1;1122  align-items: center;1123  gap: 7px;1124  font-size: 0.5625rem;1125  color: var(--peach-breach);1126  padding: 5px 10px;1127  margin-bottom: 4px;1128  border-radius: 8px;1129  background: rgba(220, 80, 60, 0.07);1130  border: 1px solid rgba(220, 80, 60, 0.18);1131  letter-spacing: 0.04em;1132}11331134.peach-password-value.is-breached {1135  color: rgba(220, 80, 60, 0.75);1136  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1137}11381139/* ── Overlay views ─────────────────────────────────────────────────── */1140.peach-overlay-view {1141  position: absolute;1142  inset: 0;1143  display: flex;1144  flex-direction: column;1145  background:1146    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1147    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1148    var(--peach-bg);1149  z-index: 2;1150  overflow: hidden;1151  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1152}11531154.peach-overlay-view:has(.stk-shell) {1155  background: var(--peach-bg);1156}1157@keyframes overlay-in {1158  from { opacity: 0; transform: translateY(8px); }1159  to   { opacity: 1; transform: translateY(0); }1160}1161.peach-overlay-view.ov-enter-up {1162  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1163}1164.peach-overlay-view.ov-exit-up {1165  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1166}1167.peach-overlay-view.ov-enter-right {1168  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1169}1170.peach-overlay-view.ov-exit-right {1171  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1172}11731174@keyframes ov-enter-up {1175  from { opacity: 0; transform: translateY(18px); }1176  to   { opacity: 1; transform: translateY(0); }1177}1178@keyframes ov-exit-up {1179  from { opacity: 1; transform: translateY(0); }1180  to   { opacity: 0; transform: translateY(-12px); }1181}1182@keyframes ov-enter-right {1183  from { opacity: 0; transform: translateX(20px); }1184  to   { opacity: 1; transform: translateX(0); }1185}1186@keyframes ov-exit-right {1187  from { opacity: 1; transform: translateX(0); }1188  to   { opacity: 0; transform: translateX(20px); }1189}11901191/* Overlay shared header */1192.peach-overlay-header {1193  padding: 10px 12px 8px;1194  display: flex;1195  align-items: center;1196  gap: 10px;1197  flex-shrink: 0;1198}1199/* Back button — circular pill matching the settings stack masthead (.stk-back) */1200.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1201  width: 28px;1202  height: 28px;1203  flex: 0 0 28px;1204  border-radius: 999px;1205  border: 1px solid var(--peach-border);1206  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1207  color: var(--peach-t1);1208  padding: 0;1209}1210.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1211  color: var(--peach-t0);1212  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1213  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1214}1215.peach-overlay-title {1216  font-family: var(--font-display);1217  font-style: italic;1218  font-weight: 400;1219  font-size: 20px;1220  line-height: 1;1221  color: var(--peach-t0);1222  flex: 1;1223  text-align: center;1224}1225/* Balances the 28px back button so the title stays visually centred */1226.peach-overlay-spacer {1227  width: 28px;1228  flex: 0 0 28px;1229}12301231.peach-overlay-card {1232  background: var(--peach-s1);1233  border: 1px solid var(--peach-t3);1234  border-radius: 12px;1235  overflow: hidden;1236  width: 100%;1237}12381239.peach-onboarding-alt-actions {1240  display: flex;1241  flex-direction: column;1242  gap: 4px;1243  padding: 0;1244}12451246.peach-settings-copy {1247  margin: 0 0 10px;1248  font-size: 0.6875rem;1249  line-height: 1.5;1250  color: var(--peach-t2);1251}12521253.peach-settings-copy strong {1254  color: var(--peach-t0);1255}12561257.peach-settings-copy--spacious {1258  margin-bottom: 12px;1259}12601261.peach-settings-copy--result {1262  color: var(--peach-accent);1263  font-size: 0.8125rem;1264  text-align: center;1265  padding: 8px 0;1266}12671268.peach-settings-copy--danger {1269  color: var(--peach-breach);1270}12711272.peach-settings-copy--success {1273  color: var(--peach-accent);1274}12751276.peach-inline-feedback {1277  font-size: 0.6875rem;1278  margin: 10px 0 0;1279}12801281.peach-inline-feedback--ok {1282  color: var(--peach-accent);1283}12841285.peach-inline-feedback--error {1286  color: var(--peach-breach);1287}12881289.peach-inline-feedback--muted {1290  color: var(--peach-t2);1291  font-size: 0.625rem;1292  margin: 4px 0;1293}12941295.peach-inline-feedback--spaced {1296  margin-top: 12px;1297}12981299.peach-settings-actions--row {1300  display: flex;1301  gap: 6px;1302}13031304.peach-settings-actions--end {1305  margin-top: 14px;1306  justify-content: flex-end;1307}13081309.peach-settings-stack {1310  display: flex;1311  flex-direction: column;1312  gap: 6px;1313}13141315.peach-settings-stack--tight {1316  gap: 4px;1317}13181319.peach-settings-stack--spacious {1320  gap: 8px;1321}13221323.peach-settings-input {1324  width: 100%;1325  box-sizing: border-box;1326  padding: 8px 10px;1327  background: rgba(0, 0, 0, 0.22);1328  border: 1px solid transparent;1329  border-radius: 6px;1330  color: var(--peach-t0);1331  font-family: var(--font-ui);1332  font-size: 0.75rem;1333  outline: none;1334  transition: border-color 120ms ease, background 120ms ease;1335}13361337.peach-settings-input:focus {1338  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1339  background: rgba(0, 0, 0, 0.28);1340}13411342.peach-settings-input[type="password"] {1343  font-family: var(--font-mono);1344  letter-spacing: 0.04em;1345}13461347.peach-hidden-file-input {1348  display: none;1349}13501351.peach-checkbox-note {1352  display: flex;1353  align-items: flex-start;1354  gap: 8px;1355  font-size: 0.6875rem;1356  color: var(--peach-t1);1357  cursor: pointer;1358  margin: 12px 0;1359}13601361.peach-checkbox-note input {1362  margin-top: 1px;1363}13641365.peach-danger-notice {1366  background: rgba(220, 80, 60, 0.08);1367  border: 1px solid rgba(220, 80, 60, 0.2);1368  border-radius: 6px;1369  padding: 9px 11px;1370  font-size: 0.6875rem;1371  color: var(--peach-t1);1372  line-height: 1.5;1373}13741375.peach-info-notice {1376  font-size: 0.6875rem;1377  color: var(--peach-t1);1378  line-height: 1.5;1379  background: var(--surface-card);1380  border: 1px solid var(--peach-t3);1381  border-radius: 6px;1382  padding: 8px 10px;1383}13841385.peach-info-notice--warn {1386  border-color: rgba(220, 38, 38, 0.4);1387  background: rgba(220, 38, 38, 0.06);1388  color: rgba(220, 38, 38, 0.92);1389  margin-bottom: 8px;1390}13911392/* Warm helpful-context note — reads as a soft aside, not an alert. */1393.peach-info-notice--note {1394  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);1395  border-color: color-mix(in srgb, var(--peach-accent) 18%, transparent);1396  color: var(--peach-t2);1397}13981399.peach-strength-row {1400  display: flex;1401  align-items: center;1402  gap: 8px;1403  margin-bottom: 10px;1404}14051406.peach-strength-track {1407  flex: 1;1408  height: 4px;1409  background: var(--peach-s2);1410  border-radius: 2px;1411  overflow: hidden;1412}14131414.peach-strength-fill {1415  height: 100%;1416  border-radius: 2px;1417  transition: width 120ms ease, background 120ms ease;1418}14191420/* ── Type selector tabs ── */1421.peach-type-tabs {1422  display: flex;1423  gap: 0;1424  background: var(--peach-t4);1425  border-radius: 8px;1426  padding: 3px;1427}14281429.peach-type-tab {1430  flex: 1;1431  display: flex;1432  align-items: center;1433  justify-content: center;1434  gap: 6px;1435  padding: 6px 10px;1436  border-radius: 6px;1437  border: none;1438  background: transparent;1439  cursor: pointer;1440  font-family: Inter, system-ui, sans-serif;1441  font-size: 0.6875rem;1442  font-weight: 400;1443  letter-spacing: 0.04em;1444  color: var(--peach-t1);1445  transition: background 150ms ease, color 150ms ease;1446}14471448.peach-type-tab.is-active {1449  background: var(--peach-s2);1450  color: var(--peach-t0);1451  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1452}14531454.peach-type-tab:not(.is-active):hover {1455  color: var(--peach-t0);1456}14571458.peach-type-tab svg {1459  opacity: 0.7;1460  flex-shrink: 0;1461}14621463.peach-type-tab.is-active svg {1464  opacity: 1;1465}14661467/* ── List view ───────────────────────────────────────────────────────── */1468.peach-list-top {1469  padding: 0 10px;1470  min-height: 46px;1471  display: flex;1472  align-items: center;1473  gap: 6px;1474  border-bottom: 1px solid var(--peach-t3);1475  flex-shrink: 0;1476  background: var(--peach-s1);1477}14781479.peach-vault-list {1480  flex: 1;1481  overflow-y: auto;1482  scrollbar-width: none;1483}1484.peach-vault-list::-webkit-scrollbar { display: none; }14851486/* Scrollbar — vault list */1487.peach-vault-list {1488  scrollbar-width: thin;1489  scrollbar-color: var(--peach-t3) transparent;1490}14911492.peach-vault-list::-webkit-scrollbar {1493  width: 3px;1494}14951496.peach-vault-list::-webkit-scrollbar-thumb {1497  background: var(--peach-t3);1498  border-radius: 2px;1499}15001501.peach-entry-row {1502  width: 100%;1503  display: flex;1504  align-items: center;1505  gap: 10px;1506  padding: 9px 16px;1507  background: transparent;1508  border: none;1509  border-bottom: 1px solid var(--peach-t3);1510  cursor: pointer;1511  color: inherit;1512  text-align: left;1513  transition: background 80ms ease;1514}1515.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1516.peach-entry-row:last-child { border-bottom: none; }1517.peach-entry-row.is-active {1518  box-shadow: inset 2px 0 0 var(--peach-accent);1519  background: rgba(240,232,216,0.03);1520}1521.peach-entry-row:focus-visible {1522  outline: none;1523  box-shadow: 0 0 0 1px var(--peach-border-accent);1524  background: rgba(240,232,216,0.03);1525}1526.peach-entry-row-icon {1527  width: 26px; height: 26px;1528  border-radius: 7px;1529  border: 1px solid var(--peach-t3);1530  display: flex; align-items: center; justify-content: center;1531  color: var(--peach-t2);1532  flex-shrink: 0;1533}1534.peach-entry-row-icon.is-breach {1535  border-color: rgba(220,80,60,0.3);1536  color: rgba(220,80,60,0.7);1537}15381539/* Title-initials chip used as the favicon fallback for login entries whose1540 * real favicon hasn't been cached by the browser yet (freshly-imported,1541 * never-visited domains). Background colour is hashed from the title so1542 * the same entry always shows the same chip. The chip fits the same1543 * 26×26 row icon slot the favicon would take. */1544.peach-favicon-initials {1545  display: inline-flex;1546  align-items: center;1547  justify-content: center;1548  width: 100%;1549  height: 100%;1550  border-radius: 4px;1551  font-family: "IBM Plex Mono", monospace;1552  font-size: 0.5625rem;1553  font-weight: 600;1554  letter-spacing: 0.04em;1555  color: rgba(240, 232, 216, 0.92);1556  text-transform: uppercase;1557  user-select: none;1558}1559.peach-entry-row-info { flex: 1; min-width: 0; }1560.peach-entry-row-name {1561  display: block;1562  font-family: var(--font-display);1563  font-size: 1.0625rem;1564  font-style: italic;1565  font-weight: 400;1566  color: var(--peach-t0);1567  line-height: 1.2;1568  white-space: nowrap;1569  overflow: hidden;1570  text-overflow: ellipsis;1571}1572.peach-entry-row-meta {1573  display: block;1574  font-family: "IBM Plex Mono", monospace;1575  font-size: 0.5625rem;1576  color: var(--peach-t2);1577  margin-top: 1px;1578  letter-spacing: 0.05em;1579}1580.peach-entry-row-dot {1581  width: 5px; height: 5px;1582  border-radius: 50%;1583  background: rgba(220,80,60,0.7);1584  flex-shrink: 0;1585}1586.peach-new-entry-row {1587  display: flex;1588  align-items: center;1589  justify-content: center;1590  gap: 6px;1591  width: 100%;1592  padding: 11px;1593  background: transparent;1594  border: none;1595  border-top: 1px solid var(--peach-t3);1596  color: var(--peach-t2);1597  font-family: "IBM Plex Mono", monospace;1598  font-size: 0.5625rem;1599  text-transform: uppercase;1600  letter-spacing: 0.14em;1601  cursor: pointer;1602  flex-shrink: 0;1603  transition: color 120ms ease, background 120ms ease;1604}1605.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }16061607/* ── Multi-select mode ─────────────────────────────────────────────── */16081609/* Select-mode trigger button in sort bar — same shape as trash btn */1610.peach-sort-select-btn {1611  display: flex;1612  align-items: center;1613  justify-content: center;1614  padding: 3px 5px;1615  background: transparent;1616  border: none;1617  cursor: pointer;1618  color: var(--peach-t2);1619  border-radius: 4px;1620  transition: color 140ms ease, background 140ms ease;1621}1622.peach-sort-select-btn:hover {1623  color: var(--peach-t1);1624  background: var(--peach-t3);1625}16261627/* Sort bar in select mode */1628.peach-select-cancel-btn {1629  background: transparent;1630  border: none;1631  padding: 0 4px;1632  cursor: pointer;1633  font-family: "IBM Plex Mono", monospace;1634  font-size: 0.5625rem;1635  letter-spacing: 0.12em;1636  text-transform: uppercase;1637  color: var(--peach-t2);1638  transition: color 140ms ease;1639  flex-shrink: 0;1640}1641.peach-select-cancel-btn:hover { color: var(--peach-t0); }16421643.peach-select-count-label {1644  flex: 1;1645  text-align: center;1646  font-family: "IBM Plex Mono", monospace;1647  font-size: 0.5625rem;1648  letter-spacing: 0.14em;1649  text-transform: uppercase;1650  color: var(--peach-t1);1651}16521653.peach-select-all-btn {1654  background: transparent;1655  border: none;1656  padding: 0 4px;1657  cursor: pointer;1658  font-family: "IBM Plex Mono", monospace;1659  font-size: 0.5625rem;1660  letter-spacing: 0.12em;1661  text-transform: uppercase;1662  color: var(--peach-t2);1663  transition: color 140ms ease;1664  flex-shrink: 0;1665}1666.peach-select-all-btn:hover { color: var(--peach-accent); }16671668/* List in select mode */1669.peach-vault-list.is-selecting .peach-entry-row {1670  cursor: default;1671}1672.peach-vault-list.is-selecting .peach-entry-row:hover {1673  background: rgba(240,232,216,0.02);1674}1675.peach-vault-list.is-selecting .peach-entry-row.is-selected {1676  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1677}1678.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1679  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1680}16811682/* Select indicator circles in icon slot */1683.peach-entry-row-icon.is-select-icon {1684  color: var(--peach-t2);1685}1686.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1687  color: var(--peach-accent);1688}16891690/* Delete action bar at bottom (replaces new-entry row) */1691.peach-select-action-bar {1692  display: flex;1693  align-items: center;1694  justify-content: center;1695  gap: 7px;1696  width: 100%;1697  padding: 11px;1698  background: transparent;1699  border: none;1700  border-top: 1px solid var(--peach-t3);1701  color: var(--peach-t1);1702  font-family: "IBM Plex Mono", monospace;1703  font-size: 0.5625rem;1704  text-transform: uppercase;1705  letter-spacing: 0.14em;1706  cursor: pointer;1707  flex-shrink: 0;1708  transition: color 120ms ease, background 120ms ease;1709}1710.peach-select-action-bar:not(:disabled):hover {1711  color: var(--peach-t0);1712  background: rgba(220,80,60,0.06);1713}1714.peach-select-action-bar:not(:disabled):hover svg {1715  stroke: rgba(220,80,60,0.8);1716}1717.peach-select-action-bar:disabled,1718.peach-select-action-bar.is-empty {1719  color: var(--peach-t2);1720  cursor: default;1721  opacity: 0.5;1722}1723.peach-search-counter-list {1724  white-space: nowrap;1725  flex-shrink: 0;1726}1727.peach-list-empty {1728  min-height: 180px;1729  display: grid;1730  place-items: center;1731  color: var(--peach-t2);1732  font-family: "IBM Plex Mono", monospace;1733  font-size: 0.6875rem;1734}17351736/* ── Settings view ───────────────────────────────────────────────────── */1737.peach-settings-body {1738  flex: 1;1739  overflow-y: auto;1740  min-height: 0;1741  display: flex;1742  flex-direction: column;1743  padding: 2px 0 10px;1744}1745.peach-settings-group {1746  margin: 4px 10px;1747  padding: 9px 14px 11px;1748  border-radius: 12px;1749  border: 1px solid rgba(255, 255, 255, 0.07);1750  background: rgba(26, 20, 16, 0.60);1751  backdrop-filter: blur(10px) saturate(1.3);1752  -webkit-backdrop-filter: blur(10px) saturate(1.3);1753}17541755.peach-settings-group + .peach-settings-group {1756  margin-top: 6px;1757}17581759@supports not (backdrop-filter: blur(1px)) {1760  .peach-settings-group {1761    background: rgba(26, 20, 16, 0.90);1762    border-color: rgba(255, 255, 255, 0.09);1763    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1764  }1765}17661767.light .peach-settings-group,1768[data-theme="light"] .peach-settings-group {1769  background: rgba(245, 237, 226, 0.70);1770  border-color: rgba(26, 18, 8, 0.08);1771  backdrop-filter: blur(10px) saturate(1.2);1772  -webkit-backdrop-filter: blur(10px) saturate(1.2);1773}17741775@supports not (backdrop-filter: blur(1px)) {1776  .light .peach-settings-group,1777  [data-theme="light"] .peach-settings-group {1778    background: rgba(245, 237, 226, 0.97);1779    border-color: rgba(26, 18, 8, 0.10);1780  }1781}1782.peach-export-intro {1783  padding-bottom: 8px;1784}1785.peach-export-card {1786  display: grid;1787  gap: 10px;1788}1789.peach-rune-canvas {1790  border-radius: 8px;1791  background: rgba(0, 0, 0, 0.22);1792  flex: 1;1793  align-self: center;1794}1795.peach-script-input {1796  font-family: "PeachScript", monospace;1797  font-size: 0.6875rem;1798  line-height: 1.9;1799  letter-spacing: 0.06em;1800  color: var(--peach-t0);1801  background: rgba(0, 0, 0, 0.22);1802  border: none;1803  border-radius: 6px;1804  padding: 12px;1805  width: 100%;1806  min-height: 96px;1807  resize: vertical;1808  word-break: break-all;1809  scrollbar-width: none;1810  -ms-overflow-style: none;1811}18121813.peach-script-input::-webkit-scrollbar { display: none; }1814.peach-csv-warning {1815  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1816  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1817  color: var(--peach-t0);1818  border-radius: 6px;1819  padding: 10px 12px;1820  margin-bottom: 8px;1821  font-size: 0.75rem;1822  line-height: 1.45;1823}1824.peach-export-card--primary {1825  background:1826    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1827}18281829/* Export menu — distribute the three format cards across the popup. */1830.peach-export-menu {1831  display: flex;1832  flex-direction: column;1833  flex: 1;1834  min-height: 0;1835}1836.peach-export-menu .peach-settings-group {1837  flex: 1;1838  display: flex;1839  flex-direction: column;1840  justify-content: center;1841  gap: 10px;1842}18431844/* Result view — the script-string fills the remaining vertical surface. */1845.peach-export-result-group {1846  flex: 1;1847  display: flex;1848  flex-direction: column;1849  min-height: 0;1850  border-bottom: none;1851}1852.peach-export-result-group .peach-export-card {1853  flex: 1;1854  min-height: 0;1855  display: flex;1856  flex-direction: column;1857  gap: 10px;1858}1859.peach-export-result-group .peach-export-card-copy {1860  flex-shrink: 0;1861}1862.peach-export-result-group .peach-settings-label {1863  flex-shrink: 0;1864}1865.peach-export-result-group button {1866  flex-shrink: 0;1867}1868.peach-export-card-head {1869  display: flex;1870  align-items: center;1871  justify-content: space-between;1872  gap: 10px;1873}1874.peach-export-card-copy {1875  margin: 0;1876  font-size: 0.75rem;1877  line-height: 1.55;1878  color: var(--peach-t1);1879}1880.peach-export-note {1881  margin: 0;1882  font-size: 0.625rem;1883  line-height: 1.5;1884  color: var(--peach-t2);1885}1886.peach-export-strength-track {1887  height: 3px;1888  background: var(--peach-border);1889  border-radius: 2px;1890  margin: 4px 0 2px;1891  overflow: hidden;1892}1893.peach-export-strength-fill {1894  height: 100%;1895  border-radius: 2px;1896  transition: width 250ms ease, background 250ms ease;1897}1898.peach-export-strength-warn {1899  margin: 0;1900  font-size: 0.625rem;1901  line-height: 1.5;1902  color: #e84040;1903  font-family: "IBM Plex Mono", monospace;1904}1905.peach-export-strength-hint {1906  margin: 0;1907  font-size: 0.625rem;1908  line-height: 1.5;1909  color: var(--peach-t2);1910  font-family: "IBM Plex Mono", monospace;1911}1912.peach-export-pill {1913  display: inline-flex;1914  align-items: center;1915  padding: 4px 8px;1916  border-radius: 999px;1917  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1918  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1919  color: var(--peach-accent);1920  font-family: "IBM Plex Mono", monospace;1921  font-size: 0.5rem;1922  letter-spacing: 0.12em;1923  text-transform: uppercase;1924  white-space: nowrap;1925}1926.peach-export-pill--danger {1927  border-color: rgba(220,80,60,0.22);1928  background: rgba(220,80,60,0.08);1929  color: var(--peach-breach);1930}1931.peach-settings-label {1932  margin: 0 0 6px;1933  font-family: "IBM Plex Mono", monospace;1934  font-size: 0.5rem;1935  text-transform: uppercase;1936  letter-spacing: 0.18em;1937  color: var(--peach-t2);1938}1939.peach-settings-row {1940  display: flex;1941  align-items: center;1942  justify-content: space-between;1943  gap: 12px;1944  min-height: 34px;1945  padding: 6px 0;1946  font-size: 0.8125rem;1947  color: var(--peach-t1);1948}1949.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1950.peach-settings-value {1951  font-family: "IBM Plex Mono", monospace;1952  font-size: 0.625rem;1953  color: var(--peach-t2);1954}19551956.peach-settings-value--status {1957  display: flex;1958  align-items: center;1959  gap: 6px;1960}19611962.peach-settings-link {1963  font-family: "IBM Plex Mono", monospace;1964  font-size: 0.625rem;1965  color: var(--peach-accent);1966  text-decoration: none;1967  cursor: pointer;1968}1969.peach-settings-link:hover {1970  text-decoration: underline;1971}19721973.peach-settings-row--stack {1974  flex-direction: column;1975  align-items: stretch;1976  gap: 6px;1977}19781979.peach-settings-row--top {1980  align-items: flex-start;1981}19821983.peach-settings-row-main {1984  display: flex;1985  flex-direction: column;1986  gap: 4px;1987  flex: 1;1988}1989.peach-toggle {1990  width: 28px; height: 16px;1991  border-radius: 999px;1992  background: var(--peach-t3);1993  border: 1px solid var(--peach-t3);1994  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1995  flex-shrink: 0;1996  transition: background 200ms ease, border-color 200ms ease;1997  cursor: pointer;1998}1999.peach-toggle.is-on {2000  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);2001  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2002}2003.peach-toggle-knob {2004  width: 10px; height: 10px;2005  border-radius: 50%;2006  background: var(--peach-t2);2007  flex-shrink: 0;2008  transform: translateX(0px);2009  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);2010}2011.peach-toggle.is-on .peach-toggle-knob {2012  background: var(--peach-accent);2013  transform: translateX(12px);2014}2015.peach-settings-footer {2016  display: flex;2017  align-items: center;2018  gap: 8px;2019  margin-top: auto;2020  padding: 14px 16px 8px;2021  font-family: "IBM Plex Mono", monospace;2022  font-size: 0.5625rem;2023  color: var(--peach-t2);2024}20252026/* ── Settings home navigation ──────────────────────────────────────────── */2027.peach-settings-nav-label {2028  margin: 0 0 2px;2029  padding: 12px 16px 4px;2030  font-family: "IBM Plex Mono", monospace;2031  font-size: 0.5rem;2032  text-transform: uppercase;2033  letter-spacing: 0.18em;2034  color: var(--peach-t2);2035}20362037.peach-settings-cat-row {2038  display: flex;2039  align-items: center;2040  gap: 10px;2041  width: 100%;2042  padding: 9px 16px;2043  background: none;2044  border: none;2045  border-bottom: 1px solid var(--peach-t3);2046  cursor: pointer;2047  text-align: left;2048  color: inherit;2049  transition: background var(--peach-dur-80) ease;2050}2051.peach-settings-cat-row:hover {2052  background: var(--peach-t3);2053}2054.peach-settings-cat-row:last-child {2055  border-bottom: none;2056}20572058.peach-settings-cat-icon {2059  width: 28px;2060  height: 28px;2061  border-radius: 7px;2062  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2063  color: var(--peach-accent);2064  display: flex;2065  align-items: center;2066  justify-content: center;2067  flex-shrink: 0;2068}2069/* Light theme: peach-on-cream is too low-contrast — both colors are warm.2070   Darken the icon stroke to ink and bump the bg tint so the icon reads2071   sharply while the cell still feels accent-tinted. */2072.light .peach-settings-cat-icon {2073  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);2074  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));2075}20762077.peach-settings-cat-content {2078  flex: 1;2079  display: flex;2080  flex-direction: column;2081  gap: 2px;2082  min-width: 0;2083}20842085.peach-settings-cat-name {2086  font-size: 0.8125rem;2087  font-weight: 450;2088  color: var(--peach-t0);2089  line-height: 1.2;2090}20912092.peach-settings-cat-desc {2093  font-size: 0.625rem;2094  color: var(--peach-t2);2095  line-height: 1.3;2096  white-space: nowrap;2097  overflow: hidden;2098  text-overflow: ellipsis;2099}21002101.peach-settings-cat-chevron {2102  color: var(--peach-t2);2103  flex-shrink: 0;2104  opacity: 0.5;2105}21062107/* ── Settings sub-view section labels ──────────────────────────────────── */2108.peach-settings-sub-label {2109  margin: 12px 0 4px;2110  font-family: "IBM Plex Mono", monospace;2111  font-size: 0.5rem;2112  text-transform: uppercase;2113  letter-spacing: 0.18em;2114  color: var(--peach-t2);2115}2116.peach-settings-sub-label:first-child {2117  margin-top: 4px;2118}21192120/* ── Settings: collapsible Advanced section ─────────────────────────────── */2121.peach-settings-advanced-toggle {2122  display: flex;2123  align-items: center;2124  justify-content: space-between;2125  width: 100%;2126  background: none;2127  border: none;2128  cursor: pointer;2129  padding: 12px 0 4px;2130  margin: 0;2131  color: inherit;2132}2133.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {2134  color: var(--peach-t1);2135}2136.peach-settings-advanced-chevron {2137  font-size: 0.5625rem;2138  color: var(--peach-t3);2139  letter-spacing: 0;2140  transition: color 120ms ease;2141}21422143/* ── Feedback form ──────────────────────────────────────────────────────── */2144.peach-feedback-group {2145  flex: 1;2146  display: flex;2147  flex-direction: column;2148  border-bottom: none;2149}21502151.peach-feedback-intro {2152  margin: 4px 0 14px;2153  font-size: 0.75rem;2154  line-height: 1.55;2155  color: var(--peach-t1);2156}21572158.peach-feedback-chips {2159  display: flex;2160  flex-wrap: wrap;2161  gap: 6px;2162  margin-bottom: 14px;2163}21642165.peach-feedback-chip {2166  padding: 4px 10px;2167  border-radius: 999px;2168  border: 1px solid var(--peach-t3);2169  background: none;2170  color: var(--peach-t2);2171  font-size: 0.6875rem;2172  font-family: var(--font-ui);2173  cursor: pointer;2174  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2175    background var(--peach-dur-80) ease;2176}2177.peach-feedback-chip:hover {2178  border-color: var(--peach-t2);2179  color: var(--peach-t1);2180}2181.peach-feedback-chip.is-active {2182  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);2183  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));2184  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);2185  box-shadow:2186    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),2187    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);2188  font-weight: 700;2189}21902191.peach-feedback-textarea {2192  flex: 1;2193  width: 100%;2194  min-height: 120px;2195  box-sizing: border-box;2196  background: rgba(0, 0, 0, 0.22);2197  border: 1px solid transparent;2198  border-radius: 6px;2199  color: var(--peach-t0);2200  font-size: 0.75rem;2201  font-family: var(--font-ui);2202  line-height: 1.5;2203  padding: 8px 10px;2204  resize: none;2205  outline: none;2206  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2207}2208.peach-feedback-textarea:focus {2209  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2210  background: rgba(0, 0, 0, 0.28);2211}2212.peach-feedback-textarea:focus {2213  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2214}2215.peach-feedback-textarea::placeholder {2216  color: var(--peach-t2);2217}22182219.peach-feedback-meta {2220  margin: 6px 0 0;2221  font-size: 0.625rem;2222  color: var(--peach-t2);2223  font-family: "IBM Plex Mono", monospace;2224}22252226.peach-feedback-result {2227  margin: 8px 0 0;2228  font-size: 0.6875rem;2229  font-family: "IBM Plex Mono", monospace;2230}2231.peach-feedback-result--ok { color: var(--peach-sync-ok); }2232.peach-feedback-result--err { color: var(--peach-breach); }22332234.peach-feedback-submit {2235  width: 100%;2236  margin-top: 12px;2237  justify-content: center;2238}22392240.peach-feedback-anon {2241  margin: 8px 0 0;2242  font-size: 0.625rem;2243  color: var(--peach-t2);2244  text-align: center;2245}22462247.peach-feedback-thanks {2248  margin: auto 0;2249  padding: 18px 14px;2250  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);2251  border-radius: 8px;2252  background:2253    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),2254    rgba(0, 0, 0, 0.18);2255  color: var(--peach-t1);2256  text-align: center;2257}22582259.peach-feedback-thanks p {2260  margin: 0;2261  font-size: 0.75rem;2262  line-height: 1.5;2263}22642265.peach-feedback-thanks-title {2266  color: var(--peach-t0);2267  font-family: "Cormorant Garamond", serif;2268  font-size: 1.375rem !important;2269  line-height: 1.1 !important;2270  margin-bottom: 8px !important;2271}22722273.peach-passkey-badge {2274  margin-left: 8px;2275  font-size: 0.625rem;2276  letter-spacing: 0.06em;2277  text-transform: uppercase;2278  color: var(--peach-t2);2279  font-family: var(--font-ui);2280  vertical-align: middle;2281}22822283.peach-passkey-delete-btn {2284  color: var(--peach-breach);2285  border-color: rgba(229, 85, 85, 0.25);2286}22872288.peach-passkey-delete-confirm {2289  display: flex;2290  align-items: center;2291  gap: 8px;2292  padding: 8px 10px;2293  background: rgba(229, 85, 85, 0.06);2294  border: 1px solid rgba(229, 85, 85, 0.2);2295  border-radius: 6px;2296}22972298.peach-passkey-delete-confirm-copy {2299  flex: 1;2300  font-size: 0.6875rem;2301  color: var(--peach-t1);2302}23032304.peach-passkey-delete-btn--confirm {2305  color: var(--peach-breach);2306  border-color: rgba(229, 85, 85, 0.4);2307}23082309.peach-passkey-activity {2310  flex-direction: column;2311  align-items: flex-start;2312  gap: 4px;2313}23142315.peach-passkey-meta {2316  font-size: 0.6875rem;2317  color: var(--peach-t2);2318}23192320.peach-passkey-actions {2321  position: relative;2322  z-index: 1;2323  margin-top: 14px;2324  display: flex;2325  flex-direction: column;2326  gap: 8px;2327}23282329.peach-passkey-approval {2330  display: flex;2331  flex-direction: column;2332  align-items: center;2333  padding: 16px 20px 14px;2334  gap: 8px;2335  text-align: center;2336}23372338.peach-passkey-approval-icon {2339  width: 36px;2340  height: 36px;2341  border-radius: 10px;2342  background: var(--peach-s2);2343  border: 1px solid var(--peach-t3);2344  display: flex;2345  align-items: center;2346  justify-content: center;2347  flex-shrink: 0;2348  color: var(--peach-accent);2349}23502351.peach-passkey-approval-icon img,2352.peach-passkey-approval-icon svg {2353  width: 22px;2354  height: 22px;2355  border-radius: 5px;2356}23572358.peach-passkey-approval-rp {2359  font-family: var(--font-ui);2360  font-size: 0.75rem;2361  color: var(--peach-t2);2362  letter-spacing: 0.03em;2363}23642365.peach-passkey-approval-action {2366  font-family: var(--font-display);2367  font-style: italic;2368  font-weight: 300;2369  font-size: 18px;2370  color: var(--peach-t0);2371  line-height: 1.1;2372  margin: 1px 0;2373}23742375.peach-passkey-approval-user {2376  font-family: var(--font-mono);2377  font-size: 0.6875rem;2378  color: var(--peach-t1);2379  background: var(--peach-s2);2380  border: 1px solid var(--peach-t3);2381  border-radius: 4px;2382  padding: 3px 8px;2383}23842385.peach-passkey-approval-notice {2386  font-size: 0.625rem;2387  color: var(--peach-t2);2388  line-height: 1.5;2389  max-width: 220px;2390}23912392.peach-passkey-approval-actions {2393  display: flex;2394  gap: 8px;2395  width: 100%;2396  margin-top: 6px;2397}23982399.peach-passkey-approval-actions .peach-btn {2400  flex: 1;2401}24022403/* ── Inline generator drawer ── */2404.peach-generator-drawer {2405  display: grid;2406  grid-template-rows: 0fr;2407  transition: grid-template-rows 320ms var(--peach-curve-arrival);2408  overflow: hidden;2409}2410.peach-generator-drawer.is-open {2411  grid-template-rows: 1fr;2412}2413.peach-generator-drawer-inner {2414  min-height: 0;2415  overflow: hidden;2416}2417.peach-generator-drawer-content {2418  border-top: 1px solid var(--peach-t3);2419  padding: 8px 0 4px;2420  display: flex;2421  flex-direction: column;2422  gap: 8px;2423}24242425/* ── Compact generator (inside entry edit) ── */2426.peach-generator-drawer-content--compact {2427  border-top: 1px solid var(--peach-t3);2428  padding: 8px 0 2px;2429  gap: 7px;2430}2431.peach-pwgen-compact-display-row {2432  display: flex;2433  align-items: center;2434  gap: 6px;2435}2436.peach-pwgen-compact-output {2437  flex: 1;2438  min-width: 0;2439  font-family: "IBM Plex Mono", monospace;2440  font-size: 0.6875rem;2441  font-weight: 400;2442  letter-spacing: 0.04em;2443  color: var(--peach-t0);2444  background: rgba(240, 232, 216, 0.04);2445  border: 1px solid var(--peach-t3);2446  border-radius: 5px;2447  padding: 5px 8px;2448  line-height: 1.5;2449  outline: none;2450  transition: border-color 120ms ease;2451}24522453.peach-pwgen-compact-output:focus {2454  border-color: var(--peach-t1);2455}2456.peach-pwgen-compact-controls {2457  display: flex;2458  align-items: center;2459  gap: 6px;2460}2461.peach-pwgen-compact-slider {2462  flex: 1;2463  min-width: 0;2464  height: 2px !important;2465}2466.peach-pwgen-compact-controls .peach-pwgen-len-num {2467  flex-shrink: 0;2468  min-width: 18px;2469  text-align: right;2470}2471.peach-pwgen-compact-pills {2472  display: flex;2473  gap: 3px;2474  flex-shrink: 0;2475}2476.peach-pwgen-compact-pills .peach-pwgen-pill {2477  padding: 2px 7px;2478  font-size: 0.5rem;2479}2480.peach-pwgen-compact-use {2481  flex-shrink: 0;2482  font-size: 0.625rem !important;2483  padding: 3px 9px !important;2484  min-height: 22px !important;2485  border-radius: 5px !important;2486}24872488/* ── Password edit row (input + eye toggle side-by-side) ── */2489.peach-password-edit-row {2490  display: flex;2491  align-items: center;2492  gap: 6px;2493}2494.peach-password-edit-row .peach-inline-input {2495  flex: 1;2496  min-width: 0;2497}24982499/* ── Generate toggle link ── */2500.peach-generate-toggle-link {2501  display: inline-flex;2502  align-items: center;2503  gap: 5px;2504  background: none;2505  border: none;2506  padding: 0;2507  cursor: pointer;2508  font-family: "IBM Plex Mono", monospace;2509  font-size: 0.625rem;2510  color: var(--peach-t2);2511  letter-spacing: 0.04em;2512  transition: color 120ms ease;2513  align-self: flex-start;2514}2515.peach-generate-toggle-link:hover {2516  color: var(--peach-accent);2517}25182519/* Holds the generate + history toggle links on one row under the editor. */2520.peach-password-edit-links {2521  display: flex;2522  align-items: center;2523  gap: 14px;2524  flex-wrap: wrap;2525}25262527/* ── Past-password history list ── */2528.peach-password-history {2529  display: grid;2530  gap: 4px;2531  margin-top: 2px;2532  max-height: 168px;2533  overflow-y: auto;2534  scrollbar-width: thin;2535}2536.peach-history-row {2537  display: flex;2538  align-items: center;2539  justify-content: space-between;2540  gap: 8px;2541  padding: 5px 7px;2542  border-radius: 7px;2543  background: color-mix(in srgb, var(--peach-accent) 5%, transparent);2544  border: 1px solid color-mix(in srgb, var(--peach-accent) 9%, transparent);2545}2546.peach-history-main {2547  display: flex;2548  flex-direction: column;2549  gap: 1px;2550  min-width: 0;2551  flex: 1;2552}2553.peach-history-pw {2554  font-family: "IBM Plex Mono", monospace;2555  font-size: 0.6875rem;2556  color: var(--peach-t1);2557  white-space: nowrap;2558  overflow: hidden;2559  text-overflow: ellipsis;2560}2561.peach-history-pw .peach-password-mask {2562  letter-spacing: 0.08em;2563  color: var(--peach-t2);2564}2565.peach-history-age {2566  font-family: "IBM Plex Mono", monospace;2567  font-size: 0.5625rem;2568  color: var(--peach-t3, var(--peach-t2));2569  letter-spacing: 0.03em;2570}2571.peach-history-actions {2572  display: flex;2573  align-items: center;2574  gap: 2px;2575  flex-shrink: 0;2576}2577.peach-history-use {2578  font-family: "IBM Plex Mono", monospace;2579  font-size: 0.5625rem;2580  letter-spacing: 0.05em;2581  padding: 3px 7px;2582}2583.peach-history-empty {2584  font-family: "IBM Plex Mono", monospace;2585  font-size: 0.625rem;2586  line-height: 1.45;2587  color: var(--peach-t2);2588  padding: 6px 8px;2589  border-radius: 7px;2590  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);2591  border: 1px solid color-mix(in srgb, var(--peach-accent) 8%, transparent);2592}25932594/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2595.peach-entry-body {2596  flex: 1;2597  overflow-y: auto;2598  overflow-x: hidden;2599  scrollbar-width: none;2600  -ms-overflow-style: none;2601  overscroll-behavior: contain;2602  display: grid;2603  gap: 10px;2604  align-content: start;2605  padding: 10px 20px 14px;2606  min-width: 0;2607  min-height: 0;2608}2609.peach-entry-body::-webkit-scrollbar { display: none; }26102611/* Type-toggle pills + inline note toolbar */2612.peach-new-type-row {2613  display: flex;2614  align-items: center;2615  gap: 6px;2616  margin-bottom: 2px;2617}2618.peach-new-type-btn {2619  background: transparent;2620  border: 1px solid var(--peach-t3);2621  border-radius: 12px;2622  padding: 3px 10px;2623  font-family: "IBM Plex Mono", monospace;2624  font-size: 0.5625rem;2625  letter-spacing: 0.12em;2626  text-transform: uppercase;2627  color: var(--peach-t2);2628  cursor: pointer;2629  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2630}2631.peach-new-type-btn.is-active {2632  color: var(--peach-t0);2633  border-color: var(--peach-accent);2634  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2635}2636.peach-new-type-btn:not(.is-active):hover {2637  color: var(--peach-t1);2638  border-color: var(--peach-t2);2639}26402641/* Editable title */2642.peach-new-title-wrap { margin: 0 0 2px; }2643.peach-new-title-input {2644  background: transparent;2645  border: none;2646  outline: none;2647  width: 100%;2648  color: var(--peach-t0);2649  font-family: var(--font-display);2650  font-style: italic;2651  font-weight: 400;2652  font-size: 40px;2653  line-height: 0.95;2654  caret-color: var(--peach-accent);2655}2656.peach-new-title-input::placeholder { color: var(--peach-t2); }26572658/* Editable domain field */2659.peach-domain-edit-row {2660  display: flex;2661  align-items: center;2662  gap: 6px;2663}26642665.peach-domain-edit-row .peach-domain-value--edit {2666  flex: 1;2667  width: 0;2668}26692670.peach-domain-url-btn {2671  flex-shrink: 0;2672  background: transparent;2673  border: none;2674  cursor: pointer;2675  color: var(--peach-t3);2676  padding: 2px 3px;2677  display: flex;2678  align-items: center;2679  line-height: 0;2680  border-radius: 3px;2681  transition: color 120ms ease;2682}26832684.peach-domain-url-btn:hover {2685  color: var(--peach-accent);2686}26872688.peach-domain-value--edit {2689  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2690  font-size: 0.625rem;2691  font-style: italic;2692  letter-spacing: 0.12em;2693  color: var(--peach-t1);2694  background: transparent;2695  border: none;2696  border-bottom: 1px solid var(--peach-t3);2697  outline: none;2698  width: 100%;2699  padding: 2px 0;2700  caret-color: var(--peach-accent);2701  transition: border-color 140ms ease, color 140ms ease;2702}2703.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2704.peach-domain-value--edit:focus {2705  border-bottom-color: rgba(240, 232, 216, 0.28);2706  color: var(--peach-t0);2707}27082709/* Editable field values (username, password, totp) */2710.peach-field-value--edit {2711  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2712  font-size: 0.8125rem;2713  color: var(--peach-t0);2714  background: transparent;2715  border: none;2716  border-bottom: 1px solid var(--peach-t3);2717  outline: none;2718  flex: 1;2719  min-width: 0;2720  padding: 3px 0;2721  caret-color: var(--peach-accent);2722  transition: border-color 140ms ease, color 140ms ease;2723}2724.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2725.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2726.peach-field-value--edit:focus {2727  border-bottom-color: rgba(240, 232, 216, 0.28);2728  color: var(--peach-t0);2729}27302731/* "+ add optional field" links */2732.peach-entry-add-links {2733  display: flex;2734  gap: 12px;2735  flex-wrap: wrap;2736  margin-top: -2px;2737}2738.peach-add-field-link {2739  background: transparent;2740  border: none;2741  padding: 0;2742  cursor: pointer;2743  font-family: "IBM Plex Mono", monospace;2744  font-size: 0.5625rem;2745  letter-spacing: 0.1em;2746  text-transform: uppercase;2747  color: var(--peach-t2);2748  transition: color 140ms ease;2749}2750.peach-add-field-link:hover { color: var(--peach-accent); }27512752/* ── New entry form (legacy classes) ────────────────────────────────── */2753.peach-new-body {2754  flex: 1;2755  overflow-y: auto;2756  padding: 10px 20px 14px;2757}2758.peach-new-name-input {2759  background: transparent;2760  border: none;2761  outline: none;2762  width: 100%;2763  color: var(--peach-t0);2764  font-family: var(--font-display);2765  font-style: italic;2766  font-weight: 400;2767  font-size: 40px;2768  line-height: 0.95;2769  caret-color: var(--peach-accent);2770}2771.peach-new-name-input::placeholder { color: var(--peach-t2); }2772.peach-new-field-input {2773  background: transparent;2774  border: none;2775  outline: none;2776  flex: 1;2777  min-width: 0;2778  caret-color: var(--peach-accent);2779}2780.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }27812782/* ── Canary card ── */2783.peach-canary-card {2784  border: 1px solid rgba(217, 160, 48, 0.2);2785  background: rgba(217, 160, 48, 0.03);2786  border-radius: 8px;2787  padding: 12px;2788}27892790.peach-canary-settings-header {2791  display: flex;2792  align-items: center;2793  justify-content: space-between;2794  cursor: pointer;2795  user-select: none;2796}27972798.peach-canary-card .peach-label {2799  color: rgba(217, 160, 48, 0.85);2800}28012802.peach-canary-card .peach-new-field-input {2803  border-color: rgba(217, 160, 48, 0.25);2804}28052806.peach-canary-card .peach-new-field-input:focus {2807  border-color: rgba(217, 160, 48, 0.5);2808}28092810.peach-canary-body {2811  margin-top: 12px;2812  display: flex;2813  flex-direction: column;2814  gap: 10px;2815}28162817.peach-canary-explainer {2818  display: flex;2819  gap: 10px;2820  padding: 10px 12px;2821  border-radius: 10px;2822  background: rgba(217, 160, 48, 0.06);2823  border: 1px solid rgba(217, 160, 48, 0.22);2824  margin-bottom: 4px;2825}28262827.peach-canary-explainer-icon {2828  font-size: 1rem;2829  flex-shrink: 0;2830  line-height: 1.2;2831}28322833.peach-canary-explainer-title {2834  font-family: var(--font-ui);2835  font-size: 0.6875rem;2836  font-weight: 500;2837  color: rgba(217, 160, 48, 0.9);2838  margin: 0 0 3px;2839}28402841.peach-canary-explainer-copy {2842  font-family: var(--font-ui);2843  font-size: 0.625rem;2844  color: var(--peach-t2);2845  line-height: 1.55;2846  margin: 0;2847}28482849.peach-canary-hint {2850  font-size: 0.625rem;2851  color: var(--peach-t2);2852  font-family: Inter, system-ui, sans-serif;2853  line-height: 1.5;2854  margin-top: 4px;2855}28562857.peach-canary-actions-row {2858  display: flex;2859  align-items: center;2860  gap: 8px;2861}28622863.peach-canary-test-btn {2864  border-color: rgba(217, 160, 48, 0.3);2865  color: rgba(217, 160, 48, 0.85);2866}28672868.peach-canary-test-result {2869  font-size: 0.625rem;2870  font-family: Inter, system-ui, sans-serif;2871}28722873.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2874.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }28752876.peach-canary-badge {2877  display: flex;2878  position: relative;2879  z-index: 1;2880  align-items: center;2881  gap: 5px;2882  padding: 4px 10px;2883  background: rgba(217, 160, 48, 0.12);2884  border: 1px solid rgba(217, 160, 48, 0.35);2885  border-radius: 6px;2886  margin-bottom: 6px;2887  width: fit-content;2888}28892890.peach-canary-badge-label {2891  font-size: 0.625rem;2892  letter-spacing: 0.06em;2893  color: rgba(217, 160, 48, 0.9);2894  font-family: var(--font-ui);2895  text-transform: uppercase;2896}28972898.peach-canary-badge-icon {2899  font-size: 0.6875rem;2900}29012902.peach-canary-suppress-row {2903  display: flex;2904  align-items: center;2905  gap: 8px;2906  padding: 6px 10px;2907  background: rgba(217, 160, 48, 0.08);2908  border-radius: 6px;2909  margin-bottom: 8px;2910}29112912.peach-canary-suppress-label {2913  font-size: 0.6875rem;2914  color: rgba(217, 160, 48, 0.85);2915  cursor: pointer;2916  font-family: var(--font-ui);2917  letter-spacing: 0.04em;2918}29192920.peach-regen-panel {2921  position: relative;2922  z-index: 1;2923  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2924  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2925  border-radius: 8px;2926  padding: 12px;2927  margin-bottom: 8px;2928}29292930.peach-regen-panel-header {2931  display: flex;2932  align-items: center;2933  justify-content: space-between;2934  margin-bottom: 10px;2935}29362937.peach-regen-panel-title {2938  font-size: 0.6875rem;2939  font-weight: 600;2940  letter-spacing: 0.06em;2941  text-transform: uppercase;2942  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2943}29442945.peach-regen-output {2946  background: rgba(0, 0, 0, 0.2);2947  border-radius: 6px;2948  padding: 10px;2949  margin-bottom: 10px;2950  font-family: var(--font-mono);2951  font-size: 0.8125rem;2952  word-break: break-all;2953  color: var(--peach-t1);2954}29552956.peach-regen-actions {2957  display: flex;2958  gap: 6px;2959}29602961.peach-regen-actions--spaced {2962  margin-bottom: 8px;2963}29642965.peach-regen-action-grow {2966  flex: 1;2967}29682969.peach-regen-copy-btn {2970  padding: 0 8px;2971}29722973.peach-regen-success {2974  position: relative;2975  z-index: 1;2976  background: rgba(40, 180, 80, 0.1);2977  border: 1px solid rgba(40, 180, 80, 0.3);2978  border-radius: 8px;2979  padding: 10px 12px;2980  margin-bottom: 8px;2981  display: flex;2982  align-items: center;2983  gap: 8px;2984  font-size: 0.6875rem;2985  color: rgba(40, 180, 80, 0.9);2986}29872988/* ── Note editor overlay ── */2989.peach-note-editor {2990  position: absolute;2991  inset: 0;2992  z-index: 200;2993  display: flex;2994  flex-direction: column;2995  background:2996    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2997    var(--peach-bg);2998  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2999}30003001.peach-note-editor-header {3002  display: flex;3003  align-items: center;3004  gap: 10px;3005  padding: 14px 16px 10px;3006  border-bottom: 1px solid var(--peach-t3);3007  flex-shrink: 0;3008}30093010.peach-note-editor-back {3011  background: transparent;3012  border: none;3013  cursor: pointer;3014  color: var(--peach-t2);3015  padding: 4px 6px;3016  border-radius: 6px;3017  display: flex;3018  align-items: center;3019  transition: color 120ms ease, background 120ms ease;3020  flex-shrink: 0;3021}3022.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }30233024.peach-note-editor-label {3025  flex: 1;3026  font-family: var(--font-display);3027  font-style: italic;3028  font-size: 0.9375rem;3029  color: var(--peach-t1);3030  letter-spacing: 0.02em;3031}30323033.peach-note-editor-save-btn {3034  background: transparent;3035  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);3036  border-radius: 8px;3037  color: var(--peach-accent);3038  font-family: "IBM Plex Mono", monospace;3039  font-size: 0.625rem;3040  letter-spacing: 0.06em;3041  text-transform: uppercase;3042  padding: 3px 10px;3043  cursor: pointer;3044  transition: background 120ms ease, border-color 120ms ease;3045}3046.peach-note-editor-save-btn:hover:not(:disabled) {3047  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3048  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3049}3050.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }30513052.peach-note-toolbar {3053  display: flex;3054  align-items: center;3055  gap: 3px;3056  padding: 6px 14px 5px;3057  border-bottom: 1px solid var(--peach-t3);3058  flex-shrink: 0;3059}30603061.peach-note-tool-btn {3062  background: transparent;3063  border: 1px solid transparent;3064  border-radius: 5px;3065  color: var(--peach-t2);3066  font-family: "IBM Plex Mono", monospace;3067  font-size: 0.625rem;3068  letter-spacing: 0.04em;3069  padding: 2px 8px;3070  cursor: pointer;3071  line-height: 1.6;3072  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;3073}3074.peach-note-tool-btn:hover {3075  background: var(--peach-t4);3076  color: var(--peach-t0);3077  border-color: var(--peach-t3);3078}30793080.peach-note-tool-icon {3081  padding: 3px 7px;3082  display: inline-flex;3083  align-items: center;3084  justify-content: center;3085}30863087.peach-note-tool-divider {3088  width: 1px;3089  height: 14px;3090  background: var(--peach-t3);3091  margin: 0 4px;3092  flex-shrink: 0;3093}30943095.peach-note-editor-body {3096  flex: 1;3097  overflow-y: auto;3098  padding: 16px 20px 20px;3099  outline: none;3100  font-family: var(--font-display);3101  font-size: 1rem;3102  line-height: 1.75;3103  color: var(--peach-t0);3104  scrollbar-width: none;3105  word-break: break-word;3106}3107.peach-note-editor-body:empty::before {3108  content: "write your note…";3109  color: var(--peach-t3);3110  font-style: italic;3111  pointer-events: none;3112}31133114/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */3115.peach-note-editor-inline {3116  display: flex;3117  flex-direction: column;3118  flex: 1;3119  min-height: 0;3120}3121.peach-note-editor-body--inline {3122  flex: 1;3123  min-height: 0;3124  font-size: 0.9375rem;3125  padding: 10px 20px 14px;3126}31273128/* Full-width toolbar row inside the body (Add.tsx note type).3129   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */3130.peach-note-toolbar-body {3131  display: flex;3132  align-items: center;3133  gap: 3px;3134  padding: 5px 20px 4px;3135  margin: 2px -20px 0;3136  border-bottom: 1px solid var(--peach-t3);3137  flex-shrink: 0;3138}31393140/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)3141   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn3142   and .peach-note-tool-divider button-level styles. */3143.peach-note-toolbar-inline {3144  display: flex;3145  align-items: center;3146  gap: 3px;3147  margin-left: auto;3148  padding-left: 10px;3149  border-left: 1px solid var(--peach-t3);3150  min-height: 22px;3151}31523153/* Entry.tsx toolbar row (no tabs, toolbar only) */3154.peach-entry-note-toolbar-row {3155  display: flex;3156  align-items: center;3157  margin: 4px 0 6px;3158  position: relative;3159  z-index: 1;3160}3161.peach-entry-note-toolbar-row .peach-note-toolbar-inline {3162  border-left: none;3163  padding-left: 0;3164  margin-left: 0;3165}31663167/* Note body — fills available vertical space in Add.tsx and Entry.tsx */3168.peach-note-body {3169  display: flex;3170  flex-direction: column;3171  flex: 1;3172  min-height: 0;3173  margin: 4px 0 0;3174}3175.peach-entry-body--new .peach-note-body {3176  margin: 8px -20px 0;3177}31783179/* Add.tsx body is a grid by default; swap to a flex column when a note is3180   active so the note body can stretch and pin the tags row to the bottom. */3181.peach-entry-body--new:has(.peach-note-body) {3182  display: flex;3183  flex-direction: column;3184}31853186/* Rich content element styles (editor + display) */3187.peach-note-editor-body h2,3188.peach-note-content h2 {3189  font-family: var(--font-display);3190  font-size: 20px;3191  font-weight: 600;3192  font-style: italic;3193  color: var(--peach-t0);3194  margin: 6px 0 2px;3195  line-height: 1.3;3196}3197.peach-note-editor-body ul,3198.peach-note-content ul {3199  padding-left: 18px;3200  margin: 3px 0;3201  list-style: disc;3202}3203.peach-note-editor-body ol,3204.peach-note-content ol {3205  padding-left: 18px;3206  margin: 3px 0;3207  list-style: decimal;3208}3209.peach-note-editor-body li,3210.peach-note-content li { margin: 2px 0; }3211.peach-note-editor-body hr,3212.peach-note-content hr {3213  border: none;3214  border-top: 1px solid var(--peach-t3);3215  margin: 10px 0;3216}32173218/* font size elements from execCommand */3219.peach-note-editor-body font[size="1"],3220.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }3221.peach-note-editor-body font[size="2"],3222.peach-note-content font[size="2"] { font-size: 0.8125rem; }3223.peach-note-editor-body font[size="3"],3224.peach-note-content font[size="3"] { font-size: 1rem; }3225.peach-note-editor-body font[size="4"],3226.peach-note-content font[size="4"] { font-size: 20px; }3227.peach-note-editor-body font[size="5"],3228.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }32293230/* bold / italic inside the editor and note display */3231.peach-note-editor-body b, .peach-note-editor-body strong,3232.peach-note-content b, .peach-note-content strong { font-weight: 700; }3233.peach-note-editor-body em, .peach-note-editor-body i,3234.peach-note-content em, .peach-note-content i { font-style: italic; }32353236/* note display — rendered HTML, no pre-wrap */3237.peach-note-content {3238  overflow: auto;3239  max-height: 340px;3240  word-break: break-word;3241}32423243/* ── Note textarea ── */3244.peach-note-textarea {3245  width: 100%;3246  min-height: 180px;3247  max-height: 280px;3248  resize: vertical;3249  background: var(--peach-t4);3250  border: 1px solid var(--peach-t3);3251  border-radius: 8px;3252  padding: 10px 12px;3253  font-family: "IBM Plex Mono", monospace;3254  font-size: 0.75rem;3255  line-height: 1.7;3256  color: var(--peach-t1);3257  outline: none;3258  transition: border-color 150ms ease;3259}32603261.peach-note-textarea:focus {3262  border-color: var(--peach-t2);3263}32643265.peach-note-char-count {3266  font-family: "IBM Plex Mono", monospace;3267  font-size: 0.5625rem;3268  color: var(--peach-t3);3269  text-align: right;3270  margin-top: 4px;3271  letter-spacing: 0.1em;3272}32733274/* ── Field input baseline ── */3275.peach-new-field-input {3276  width: 100%;3277  background: transparent;3278  border: none;3279  border-bottom: 1px solid var(--peach-t3);3280  padding: 4px 0;3281  color: var(--peach-t1);3282  font-family: "IBM Plex Mono", monospace;3283  font-size: 0.8125rem;3284  outline: none;3285  transition: border-color 150ms ease;3286}32873288.peach-new-field-input:focus {3289  border-bottom-color: var(--peach-t0);3290  color: var(--peach-t0);3291}32923293.peach-new-name-input {3294  width: 100%;3295  background: transparent;3296  border: none;3297  border-bottom: 1px solid var(--peach-t3);3298  padding: 6px 0;3299  font-family: var(--font-display);3300  font-style: italic;3301  font-size: 28px;3302  color: var(--peach-t0);3303  outline: none;3304  transition: border-color 150ms ease;3305}33063307.peach-new-name-input:focus {3308  border-bottom-color: var(--peach-t1);3309}33103311.peach-new-name-input::placeholder {3312  color: var(--peach-t2);3313  font-style: italic;3314}33153316.peach-new-field-input::placeholder {3317  color: var(--peach-t3);3318}33193320/* ── Demo entrance animation ── */3321#hd-shell {3322  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3323}3324@keyframes hd-shell-enter {3325  from { opacity: 0; transform: scale(0.96) translateY(16px); }3326  to   { opacity: 1; transform: scale(1) translateY(0); }3327}33283329/* ── Keyframes ── */3330@keyframes peach-char-enter {3331  from { opacity: 0; transform: translateY(0.22em); }3332  to   { opacity: 1; transform: translateY(0); }3333}3334@keyframes peach-content-enter {3335  from { opacity: 0.96; transform: translateY(4px); }3336  to   { opacity: 1; transform: translateY(0); }3337}3338@keyframes peach-content-exit {3339  from { opacity: 1; transform: translateY(0); }3340  to   { opacity: 0.92; transform: translateY(-3px); }3341}3342@keyframes peach-screen-enter {3343  from { opacity: 0; transform: translateY(14px); }3344  to   { opacity: 1; transform: translateY(0); }3345}3346@keyframes peach-shell-fade-in {3347  from { opacity: 0; }3348  to   { opacity: 1; }3349}3350@keyframes peach-veil-in {3351  from { opacity: 0; }3352  to   { opacity: 1; }3353}3354@keyframes peach-lock-settle {3355  0%   { transform: scale(0.9); }3356  65%  { transform: scale(1.08); }3357  100% { transform: scale(1); }3358}3359@keyframes peach-copy-confirm {3360  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3361  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); }3362}3363@keyframes peach-copy-retreat {3364  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); }3365  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3366}3367@keyframes peach-copy-flood {3368  from { opacity: 0; transform: scaleX(0.15); }3369  to   { opacity: 1; transform: scaleX(1); }3370}3371@keyframes peach-copy-icon-settle {3372  from  { transform: scale(0.84); }3373  70%   { transform: scale(1.08); }3374  to    { transform: scale(1); }3375}3376@keyframes peach-copy-sheen-retreat {3377  from { opacity: 1; transform: scaleX(1); }3378  to   { opacity: 0; transform: scaleX(0.15); }3379}3380@keyframes peach-copy-drain {3381  from { width: 100%; }3382  to   { width: 0; }3383}3384@keyframes peach-shake {3385  0%, 100% { transform: translateX(0); }3386  20%      { transform: translateX(-6px); }3387  40%      { transform: translateX(6px); }3388  60%      { transform: translateX(-4px); }3389  80%      { transform: translateX(4px); }3390}33913392@keyframes pip-pulse {3393  0% { transform: scale(1); }3394  40% { transform: scale(2.2); }3395  100% { transform: scale(1); }3396}339733983399/* ── Password generator ── */3400.peach-pwgen-body {3401  flex: 1; overflow-y: auto;3402  display: flex; flex-direction: column;3403}3404.peach-policy-badge {3405  display: flex; align-items: center;3406  padding: 6px 20px 0;3407  font-size: 0.625rem; font-family: Inter, sans-serif;3408  color: var(--peach-t2); letter-spacing: 0.04em;3409}3410.peach-pwgen-display {3411  padding: 14px 20px 12px;3412  border-bottom: 1px solid var(--peach-t3);3413  display: flex; align-items: flex-start; gap: 10px;3414}3415.peach-pwgen-display-row {3416  display: flex;3417  align-items: flex-start;3418  gap: 8px;3419  padding-bottom: 8px;3420  border-bottom: 1px solid var(--peach-t3);3421}3422.peach-pwgen-output {3423  flex: 1; min-width: 0; margin: 0;3424  font-family: "IBM Plex Mono", monospace;3425  font-size: 0.8125rem; color: var(--peach-t0);3426  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3427  white-space: normal;3428  padding: 10px 12px;3429  background: var(--peach-t4);3430  border-radius: 6px;3431  min-height: 36px;3432}3433.peach-pwgen-output-display {3434  flex: 1;3435  min-width: 0;3436  margin: 0;3437  font-family: var(--font-display);3438  font-style: italic;3439  font-weight: 300;3440  font-size: 32px;3441  line-height: 1.05;3442  color: var(--peach-t0);3443  word-break: break-all;3444  overflow-wrap: break-word;3445  white-space: normal;3446  letter-spacing: 0.02em;3447}3448.peach-pwgen-display-actions {3449  display: flex;3450  flex-direction: column;3451  gap: 4px;3452  flex-shrink: 0;3453  margin-top: 2px;3454}3455.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3456.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3457.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3458.peach-pwgen-len-num {3459  font-family: "IBM Plex Mono", monospace;3460  font-size: 0.75rem; color: var(--peach-accent);3461}3462.peach-pwgen-len-num--edit {3463  cursor: text;3464  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3465}3466.peach-pwgen-len-input {3467  font-family: "IBM Plex Mono", monospace;3468  font-size: 0.75rem;3469  color: var(--peach-accent);3470  background: transparent;3471  border: none;3472  border-bottom: 1px solid var(--peach-accent);3473  outline: none;3474  width: 32px;3475  text-align: right;3476  padding: 0;3477}3478.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3479.peach-pwgen-toggles { display: flex; flex-direction: column; }3480.peach-pwgen-charset-pills {3481  display: flex;3482  gap: 6px;3483  flex-wrap: wrap;3484}3485.peach-pwgen-pill {3486  padding: 4px 11px;3487  border-radius: 999px;3488  border: 1px solid var(--peach-t3);3489  background: transparent;3490  color: var(--peach-t2);3491  font-family: "IBM Plex Mono", monospace;3492  font-size: 0.5625rem;3493  letter-spacing: 0.08em;3494  cursor: pointer;3495  transition: all 150ms ease;3496}3497.peach-pwgen-pill.is-on {3498  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3499  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3500  color: var(--peach-accent);3501}3502.peach-pwgen-pill:not(.is-on):hover {3503  color: var(--peach-t1);3504  border-color: var(--peach-t2);3505}3506.peach-pwgen-use-btn {3507  width: 100%;3508  min-height: 34px;3509  border-radius: 8px;3510  margin-top: 2px;3511}3512.peach-generator-constraint-note {3513  font-family: 'IBM Plex Mono', monospace;3514  font-size: 10px;3515  color: var(--peach-t3);3516  letter-spacing: 0.04em;3517  margin: 0;3518  transition: opacity 200ms ease;3519}3520.peach-pwgen-toggle-row {3521  display: flex; align-items: center; justify-content: space-between;3522  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3523}3524.peach-pwgen-toggle-row:last-child { border-bottom: none; }3525.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }35263527/* Peach popup should not expose native scrollbars on internal panels. */3528.peach-settings-body,3529.peach-new-body,3530.peach-pwgen-body,3531.lock-screen,3532.peach-import-preview {3533  scrollbar-width: none;3534  -ms-overflow-style: none;3535  overscroll-behavior: contain;3536}3537.peach-settings-body::-webkit-scrollbar,3538.peach-new-body::-webkit-scrollbar,3539.peach-pwgen-body::-webkit-scrollbar,3540.lock-screen::-webkit-scrollbar,3541.peach-import-preview::-webkit-scrollbar {3542  width: 0;3543  height: 0;3544  display: none;3545}35463547.lock-screen {3548  height: 100%;3549  min-height: 100%;3550  overflow-y: auto;3551  padding: 18px 18px 16px;3552  gap: 14px;3553  grid-template-rows: auto auto auto 1fr auto;3554  align-content: stretch;3555  position: relative;3556  isolation: isolate;3557}3558.peach-screen.lock-screen--vault-stage {3559  display: flex;3560  flex-direction: column;3561  justify-content: flex-start;3562  gap: 18px;3563  padding: 20px 18px 18px;3564  overflow: hidden;3565}3566.peach-screen.lock-screen--vault-stage .peach-lock-panel {3567  margin-top: 0;3568}3569.lock-screen--onboarding {3570  display: flex;3571  flex-direction: column;3572  gap: 12px;3573  justify-content: flex-start;3574}35753576.lock-screen::before {3577  content: "";3578  position: absolute;3579  inset: 12px 18px auto auto;3580  width: 160px;3581  height: 160px;3582  border-radius: 999px;3583  background:3584    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%);3585  filter: blur(6px);3586  opacity: 0.7;3587  pointer-events: none;3588  z-index: 0;3589}35903591.peach-lock-rune-string {3592  flex: 1;3593  display: flex;3594  align-items: center;3595  justify-content: center;3596  gap: 6px;3597  font-family: PeachScript, monospace;3598  font-size: 0.8125rem;3599  letter-spacing: 0.05em;3600  pointer-events: none;3601  user-select: none;3602  position: relative;3603  z-index: 1;3604}36053606.peach-lock-rune-string span {3607  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3608  text-shadow:3609    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3610    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3611  transition: color 0.9s ease, text-shadow 0.9s ease;3612}36133614.peach-lock-rune-string span.is-glowing {3615  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3616  text-shadow:3617    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3618    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3619}36203621.lock-screen-header {3622  display: flex;3623  align-items: center;3624  justify-content: space-between;3625  position: relative;3626  z-index: 1;3627}36283629.lock-password-input.shake {3630  animation: peach-shake 300ms ease-in-out;3631}36323633.peach-hint-error {3634  color: rgba(220, 80, 60, 0.92);3635}36363637.peach-onboarding-headline {3638  margin: 0;3639  font-family: var(--font-display);3640  font-size: 35px;3641  line-height: 0.88;3642  font-style: italic;3643  font-weight: 400;3644  max-width: 252px;3645}36463647.peach-lock-copy {3648  display: grid;3649  gap: 8px;3650  position: relative;3651  z-index: 1;3652}36533654.peach-lock-copy--onboarding {3655  gap: 10px;3656}36573658.peach-lock-hero {3659  position: relative;3660  z-index: 1;3661  display: grid;3662  gap: 8px;3663  min-height: 0;3664  padding: 4px 2px 0;3665  border: none;3666  border-radius: 0;3667  background: transparent;3668  box-shadow: none;3669}3670.peach-lock-hero-art {3671  position: absolute;3672  right: -8px;3673  top: -6px;3674  width: 120px;3675  height: 120px;3676  display: flex;3677  align-items: center;3678  justify-content: center;3679  pointer-events: none;3680  opacity: 0.12;3681  filter: saturate(0.9);3682}3683.peach-lock-hero-mark {3684  width: 100%;3685  height: 100%;3686}3687/* Peach body stays brand-peach across every accent — we don't want a3688   green or blue peach when sage/sky is selected. Leaf + vein keep the3689   sage tint because a real peach has a sage leaf. In the new brand-kit3690   mark the leaf is path 1 and the vein stroke is path 2; the body and3691   back-lobe (paths 3 + 4) must stay untouched. */3692.peach-lock-hero-mark path:nth-child(1) {3693  fill: rgba(123, 144, 96, 0.88);3694}3695.peach-lock-hero-mark path:nth-child(2) {3696  stroke: rgba(94, 122, 66, 0.95);3697}3698.peach-lock-hero > *:not(.peach-lock-hero-art) {3699  position: relative;3700  z-index: 1;3701}37023703.peach-lock-eyebrow {3704  display: inline-flex;3705  align-items: center;3706  width: fit-content;3707  padding: 4px 9px;3708  border-radius: 999px;3709  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3710  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3711  color: var(--peach-t0);3712  font-family: "IBM Plex Mono", monospace;3713  font-size: 0.5rem;3714  letter-spacing: 0.18em;3715  text-transform: uppercase;3716}37173718.peach-lock-label-row {3719  display: flex;3720  align-items: center;3721  justify-content: space-between;3722  margin-bottom: 0;3723}37243725.peach-lock-reveal-btn {3726  display: inline-flex;3727  align-items: center;3728  gap: 4px;3729  background: none;3730  border: none;3731  cursor: pointer;3732  font-family: "IBM Plex Mono", monospace;3733  font-size: 0.5625rem;3734  letter-spacing: 0.06em;3735  color: var(--peach-t2);3736  padding: 2px 0;3737  transition: color 150ms ease;3738}37393740.peach-lock-reveal-btn:hover {3741  color: var(--peach-t1);3742}37433744.peach-lock-warning {3745  color: rgba(220, 80, 60, 0.85) !important;3746  line-height: 1.5;3747}37483749.peach-onboarding-cards {3750  display: grid;3751  gap: 8px;3752  position: relative;3753  z-index: 1;3754}37553756.peach-lock-panel {3757  position: relative;3758  z-index: 1;3759  display: grid;3760  gap: 9px;3761  padding: 14px 16px 15px;3762  border-radius: 18px;3763  border: 1px solid var(--peach-t3);3764  background:3765    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3766  box-shadow:3767    inset 0 1px 0 rgba(240, 232, 216, 0.04),3768    0 12px 28px rgba(0, 0, 0, 0.12);3769}37703771/* Glass surface — lock panel and settings groups */3772.peach-glass {3773  background: rgba(26, 20, 16, 0.65);3774  border: 1px solid rgba(255, 255, 255, 0.08);3775  border-radius: 12px;3776  backdrop-filter: blur(12px) saturate(1.4);3777  -webkit-backdrop-filter: blur(12px) saturate(1.4);3778}37793780@supports not (backdrop-filter: blur(1px)) {3781  .peach-glass {3782    background: rgba(26, 20, 16, 0.92);3783    border: 1px solid rgba(255, 255, 255, 0.10);3784    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3785  }3786}37873788.light .peach-glass,3789[data-theme="light"] .peach-glass {3790  background: rgba(240, 233, 223, 0.72);3791  border: 1px solid rgba(26, 18, 8, 0.08);3792  backdrop-filter: blur(12px) saturate(1.2);3793  -webkit-backdrop-filter: blur(12px) saturate(1.2);3794}37953796@supports not (backdrop-filter: blur(1px)) {3797  .light .peach-glass,3798  [data-theme="light"] .peach-glass {3799    background: rgba(240, 233, 223, 0.97);3800    border: 1px solid rgba(26, 18, 8, 0.10);3801  }3802}38033804/* Lock panel keeps its own border-radius over the generic glass token */3805.peach-lock-panel.peach-glass {3806  border-radius: 18px;3807  background: rgba(26, 20, 16, 0.65);3808  border: 1px solid rgba(255, 255, 255, 0.08);3809  box-shadow:3810    inset 0 1px 0 rgba(255, 255, 255, 0.05),3811    0 12px 28px rgba(0, 0, 0, 0.3);3812}38133814.light .peach-lock-panel.peach-glass,3815[data-theme="light"] .peach-lock-panel.peach-glass {3816  background: rgba(240, 233, 223, 0.82);3817  border: 1px solid rgba(26, 18, 8, 0.08);3818  box-shadow:3819    inset 0 1px 0 rgba(255, 255, 255, 0.4),3820    0 8px 24px rgba(80, 56, 32, 0.15);3821}38223823@supports not (backdrop-filter: blur(1px)) {3824  .peach-lock-panel.peach-glass {3825    background: rgba(26, 20, 16, 0.92);3826    box-shadow:3827      inset 0 1px 0 rgba(255, 255, 255, 0.05),3828      0 12px 28px rgba(0, 0, 0, 0.4);3829  }3830  .light .peach-lock-panel.peach-glass,3831  [data-theme="light"] .peach-lock-panel.peach-glass {3832    background: rgba(240, 233, 223, 0.98);3833  }3834}38353836.peach-lock-panel--secondary {3837  gap: 12px;3838}38393840.peach-lock-panel-header {3841  display: flex;3842  align-items: baseline;3843  justify-content: space-between;3844  gap: 12px;3845}38463847.peach-lock-option-grid {3848  display: grid;3849  gap: 10px;3850}38513852.peach-lock-option {3853  width: 100%;3854  display: grid;3855  gap: 6px;3856  padding: 14px 15px;3857  border-radius: 16px;3858  border: 1px solid rgba(240, 232, 216, 0.08);3859  background: rgba(240, 232, 216, 0.02);3860  color: var(--peach-t0);3861  text-align: left;3862  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3863}38643865.peach-lock-option:hover {3866  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3867  background: rgba(240, 232, 216, 0.04);3868  transform: translateY(-1px);3869}38703871.peach-lock-option-title {3872  font-size: 0.75rem;3873  color: var(--peach-t0);3874}38753876.peach-lock-option-copy {3877  font-size: 0.6875rem;3878  line-height: 1.55;3879  color: var(--peach-t1);3880}38813882.peach-onboarding-stack {3883  margin-top: 2px;3884}3885.peach-lock-panel-footer {3886  display: grid;3887  gap: 6px;3888  margin-top: 2px;3889  padding-top: 10px;3890  border-top: 1px solid rgba(240, 232, 216, 0.06);3891}38923893/* ── Restore tab view ─────────────────────────────────────────────────────3894   Tab-based restore screen replacing the old three-card picker. */38953896.peach-restore-tabview {3897  overflow: hidden;3898}38993900.peach-restore-tabcard {3901  flex: 1;3902  display: flex;3903  flex-direction: column;3904  gap: 0;3905  padding: 0;3906  overflow: hidden;3907  cursor: default;3908  user-select: none;3909  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3910}39113912/* ── Tab selector ─────────────────────────────────────────────────────── */39133914.peach-restore-tabs {3915  display: flex;3916  justify-content: space-around;3917  padding: 14px 10px 10px;3918  border-bottom: 1px solid var(--peach-t3);3919  gap: 2px;3920  overflow: hidden;3921  scrollbar-width: none;3922}3923.peach-restore-tabs::-webkit-scrollbar { display: none; }39243925.peach-restore-tab {3926  background: none;3927  border: none;3928  cursor: pointer;3929  padding: 3px 2px;3930  font-family: 'Cormorant Garamond', Georgia, serif;3931  font-style: italic;3932  font-size: 11px;3933  color: var(--peach-t2);3934  transition: color 150ms ease, text-shadow 150ms ease;3935  flex: 1;3936  min-width: 0;3937  text-align: center;3938  white-space: nowrap;3939  overflow: hidden;3940  text-overflow: ellipsis;3941}3942.peach-restore-tab:hover {3943  color: var(--peach-accent);3944  text-shadow:3945    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3946    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3947}3948.peach-restore-tab.is-active {3949  color: var(--peach-accent);3950  text-shadow:3951    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3952    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3953}39543955/* ── Content area ─────────────────────────────────────────────────────── */39563957.peach-restore-content {3958  padding: 16px 16px 14px;3959  display: flex;3960  flex-direction: column;3961  gap: 8px;3962  overflow: hidden;3963  scrollbar-width: none;3964  flex: 1;3965}3966.peach-restore-content::-webkit-scrollbar { display: none; }3967.peach-restore-content > * {3968  overflow: hidden;3969  scrollbar-width: none;3970}3971.peach-restore-content > *::-webkit-scrollbar { display: none; }39723973/* ── Shared tab inner layout ──────────────────────────────────────────── */39743975.peach-rt-symbols,3976.peach-rt-csv,3977.peach-rt-phone,3978.peach-restore-codex {3979  display: flex;3980  flex-direction: column;3981  gap: 8px;3982  overflow: hidden;3983}39843985.peach-restore-codex {3986  min-height: 0;3987  justify-content: center;3988}39893990.peach-restore-codex-title {3991  margin: 0;3992  font-family: var(--font-display);3993  font-size: 1rem;3994  font-style: italic;3995  color: var(--peach-t0);3996}39973998.peach-restore-codex-copy {3999  margin: 0;4000  font-size: 0.75rem;4001  line-height: 1.5;4002  color: var(--peach-t1);4003}40044005.peach-restore-codex-button {4006  width: 100%;4007  justify-content: center;4008}40094010.peach-rt-submit {4011  width: 100%;4012}40134014.peach-rt-error {4015  margin: 0;4016  font-size: 0.6875rem;4017  color: var(--peach-breach);4018  line-height: 1.4;4019}40204021/* ── PeachScript tab ──────────────────────────────────────────────────── */40224023.peach-restore-symbols-textarea {4024  font-family: 'PeachScript', monospace;4025  font-size: 13px;4026  line-height: 1.9;4027  letter-spacing: 0.1em;4028  word-break: break-all;4029  resize: none;4030  width: 100%;4031  min-height: 56px;4032  max-height: 72px;4033  overflow: hidden;4034  scrollbar-width: none;4035  -ms-overflow-style: none;4036  box-sizing: border-box;4037  padding: 6px 8px;4038  border-radius: 8px;4039  border: 1px solid var(--peach-t3);4040  background: rgba(240, 232, 216, 0.03);4041  color: var(--peach-t0);4042}4043.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }4044.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }40454046.peach-restore-symbols-pass {4047  width: 100%;4048  box-sizing: border-box;4049  padding: 7px 10px;4050  border-radius: 8px;4051  border: 1px solid var(--peach-t3);4052  background: rgba(240, 232, 216, 0.03);4053  color: var(--peach-t0);4054  font-size: 0.8125rem;4055}4056.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }4057.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }40584059.peach-rt-divider {4060  text-align: center;4061  font-size: 0.6875rem;4062  color: var(--peach-t2);4063  font-style: italic;4064}40654066.peach-rt-file-label {4067  width: 100%;4068  justify-content: center;4069}40704071.peach-rt-anim-canvas {4072  width: 100%;4073  height: 180px;4074  border-radius: 10px;4075  overflow: hidden;4076  display: block;4077}40784079/* ── CSV tab ──────────────────────────────────────────────────────────── */40804081.peach-rt-csv-sources {4082  margin: 0;4083  font-size: 0.6875rem;4084  color: var(--peach-t2);4085  line-height: 1.5;4086  text-align: center;4087}40884089.peach-rt-csv-warning {4090  margin: 0;4091  font-family: "IBM Plex Mono", monospace;4092  font-size: 0.5625rem;4093  letter-spacing: 0.12em;4094  color: var(--peach-breach);4095  text-align: center;4096}40974098/* ── From Phone tab ───────────────────────────────────────────────────── */40994100.peach-rt-phone-code {4101  margin: 0;4102  text-align: center;4103  font-family: "IBM Plex Mono", monospace;4104  font-size: 22px;4105  letter-spacing: 0.18em;4106  color: var(--peach-t0);4107}41084109.peach-rt-phone-qr {4110  display: block;4111  width: 96px;4112  height: 96px;4113  margin: 0 auto;4114  border-radius: 6px;4115  image-rendering: pixelated;4116  overflow: hidden;4117}41184119.peach-rt-phone-hint {4120  margin: 0;4121  font-size: 0.6875rem;4122  color: var(--peach-t2);4123  line-height: 1.55;4124  text-align: center;4125}41264127/* ── Intro popup ──────────────────────────────────────────────────────── */41284129.peach-restore-intro-overlay {4130  position: absolute;4131  inset: 0;4132  z-index: 100;4133  display: flex;4134  align-items: center;4135  justify-content: center;4136  padding: 20px;4137  background: rgba(12, 10, 6, 0.7);4138  backdrop-filter: blur(4px);4139  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4140}41414142.peach-restore-intro-card {4143  width: 100%;4144  display: flex;4145  flex-direction: column;4146  gap: 12px;4147  padding: 22px 20px 20px;4148  border-radius: 16px;4149  border: 1px solid var(--peach-t3);4150  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));4151  backdrop-filter: blur(4px);4152  -webkit-backdrop-filter: blur(4px);4153  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);4154}41554156.peach-restore-intro-headline {4157  margin: 0;4158  font-family: var(--font-display);4159  font-style: italic;4160  font-size: 20px;4161  font-weight: 400;4162  color: var(--peach-t0);4163}41644165.peach-restore-intro-body {4166  display: flex;4167  flex-direction: column;4168  gap: 8px;4169}4170.peach-restore-intro-body p {4171  margin: 0;4172  font-size: 0.75rem;4173  color: var(--peach-t1);4174  line-height: 1.5;4175}41764177.peach-restore-intro-btn {4178  width: 100%;4179  margin-top: 4px;4180}41814182/* Snapshot restore panel */4183.peach-snapshot-panel {4184  gap: 10px;4185  overflow-y: auto;4186  max-height: 340px;4187}4188.peach-snapshot-list {4189  display: flex;4190  flex-direction: column;4191  gap: 4px;4192}4193.peach-snapshot-row {4194  display: flex;4195  align-items: center;4196  justify-content: space-between;4197  width: 100%;4198  padding: 8px 10px;4199  border-radius: 8px;4200  border: 1px solid rgba(240, 232, 216, 0.07);4201  background: transparent;4202  cursor: pointer;4203  transition: border-color 120ms, background 120ms;4204  text-align: left;4205  gap: 8px;4206}4207.peach-snapshot-row:hover {4208  border-color: rgba(240, 232, 216, 0.14);4209  background: rgba(240, 232, 216, 0.03);4210}4211.peach-snapshot-row.is-selected {4212  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4213  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);4214}4215.peach-snapshot-time {4216  font-size: 11.5px;4217  color: var(--peach-t0);4218  flex: 1;4219}4220.peach-snapshot-count {4221  font-family: "IBM Plex Mono", monospace;4222  font-size: 0.625rem;4223  color: var(--peach-t2);4224  flex-shrink: 0;4225}4226.peach-snapshot-confirm {4227  display: flex;4228  flex-direction: column;4229  gap: 8px;4230  padding-top: 10px;4231  border-top: 1px solid rgba(240, 232, 216, 0.06);4232}4233.peach-snapshot-warning {4234  display: flex;4235  align-items: flex-start;4236  gap: 6px;4237  font-size: 10.5px;4238  color: rgba(220, 80, 60, 0.85);4239  line-height: 1.55;4240}4241.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }4242.peach-snapshot-confirm-row {4243  display: flex;4244  gap: 6px;4245  align-items: center;4246}4247.peach-snapshot-restore-btn {4248  width: 100%;4249}4250.peach-lock-hero--unlock .peach-lock-hero-art {4251  width: 112px;4252  height: 112px;4253  right: 0;4254  top: 2px;4255  opacity: 0.1;4256}42574258.peach-card {4259  border: 1px solid var(--peach-t3);4260  border-radius: 18px;4261  background:4262    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4263  box-shadow:4264    inset 0 0 0 1px var(--peach-border-accent),4265    inset 0 1px 0 rgba(240, 232, 216, 0.04),4266    0 12px 32px rgba(0, 0, 0, 0.14);4267  overflow: hidden;4268}42694270.peach-card-active {4271  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4272  box-shadow:4273    inset 0 1px 0 rgba(240, 232, 216, 0.05),4274    0 16px 38px rgba(0, 0, 0, 0.18),4275    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4276}42774278.peach-card-disabled {4279  opacity: 0.72;4280}42814282.peach-card-header {4283  width: 100%;4284  padding: 13px 16px 11px;4285  background: transparent;4286  color: var(--peach-t0);4287  display: flex;4288  justify-content: space-between;4289  align-items: center;4290  text-align: left;4291  font-size: 0.75rem;4292}42934294.peach-card-body {4295  padding: 0 16px 16px;4296  display: grid;4297  gap: 9px;4298}42994300.peach-card-tag {4301  color: var(--peach-t2);4302  font-family: "IBM Plex Mono", monospace;4303  font-size: 0.5625rem;4304  letter-spacing: 0.12em;4305  text-transform: uppercase;4306}43074308.peach-empty-copy {4309  display: grid;4310  gap: 6px;4311  color: var(--peach-t1);4312  font-size: 0.8125rem;4313}43144315.peach-lock-submit {4316  width: 100%;4317  box-shadow:4318    0 1px 0 rgba(255,255,255,0.10) inset,4319    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4320    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4321    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4322}43234324.peach-lock-secondary {4325  width: 100%;4326  border-color: var(--peach-t3);4327  background: rgba(240, 232, 216, 0.02);4328}43294330.peach-lock-secondary:hover {4331  background: rgba(240, 232, 216, 0.04);4332}43334334.peach-lock-note {4335  max-width: none;4336  line-height: 1.55;4337  margin: 0;4338}43394340.peach-overlay-action {4341  font-size: 0.625rem;4342  padding: 4px 8px;4343  letter-spacing: 0.06em;4344  min-width: 44px;4345  text-align: center;4346}43474348.peach-inline-action {4349  flex-shrink: 0;4350  font-size: 0.5625rem;4351  letter-spacing: 0.1em;4352  text-transform: uppercase;4353  padding: 4px 7px;4354}4355.peach-password-toggle-btn {4356  display: inline-flex;4357  align-items: center;4358  justify-content: center;4359  min-width: 30px;4360  min-height: 26px;4361  padding: 0 7px;4362  border: 1px solid var(--peach-t3);4363  border-radius: 999px;4364  background: rgba(240, 232, 216, 0.04);4365  color: var(--peach-t2);4366  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4367}4368.peach-password-toggle-btn:hover {4369  border-color: var(--peach-t2);4370  color: var(--peach-t0);4371  background: rgba(240, 232, 216, 0.06);4372}43734374.peach-new-textarea {4375  width: 100%;4376  min-height: 88px;4377  resize: vertical;4378  border: 0;4379  outline: none;4380  background: transparent;4381  color: var(--peach-t1);4382  font-family: "IBM Plex Mono", monospace;4383  font-size: 0.75rem;4384  line-height: 1.65;4385  caret-color: var(--peach-accent);4386}43874388.peach-new-textarea::placeholder {4389  color: var(--peach-t2);4390  opacity: 0.7;4391}43924393.peach-settings-actions {4394  display: grid;4395  gap: 8px;4396}43974398.peach-sync-section-label {4399  font-size: 0.6875rem;4400  color: var(--peach-t2);4401  text-transform: uppercase;4402  letter-spacing: 0.05em;4403}44044405.peach-sync-network-note {4406  margin: 0 0 6px;4407  font-size: 0.75rem;4408  color: var(--peach-t2);4409  line-height: 1.4;4410}44114412.peach-settings-row--tappable {4413  background: none;4414  border: none;4415  width: 100%;4416  text-align: left;4417  cursor: pointer;4418  color: var(--peach-t1);4419  font-size: 0.8125rem;4420}4421.peach-settings-row--tappable:hover {4422  color: var(--peach-t0);4423}44244425.peach-sync-pro-hint {4426  display: flex;4427  flex-direction: column;4428  align-items: flex-start;4429  gap: 8px;4430  padding: 12px 0 4px;4431}44324433.peach-sync-device-row {4434  display: flex;4435  justify-content: space-between;4436  align-items: center;4437  padding: 6px 0;4438  border-bottom: 1px solid var(--peach-t3);4439}44404441.peach-sync-device-info {4442  display: flex;4443  flex-direction: column;4444  gap: 2px;4445}44464447.peach-sync-device-name {4448  font-size: 0.8125rem;4449  color: var(--peach-t0);4450}44514452.peach-sync-device-meta {4453  font-size: 0.6875rem;4454  color: var(--peach-t2);4455}44564457.peach-sync-status-dot {4458  display: inline-block;4459  width: 8px;4460  height: 8px;4461  border-radius: 50%;4462  vertical-align: middle;4463}44644465.peach-sync-remove-btn {4466  color: var(--peach-breach);4467}44684469.peach-sync-advanced-row {4470  display: flex;4471  justify-content: space-between;4472  align-items: center;4473  padding: 6px 0;4474  gap: 12px;4475}44764477.peach-sync-advanced-info {4478  display: flex;4479  flex-direction: column;4480  gap: 2px;4481  flex: 1;4482}44834484.peach-sync-advanced-name {4485  font-size: 0.8125rem;4486  color: var(--peach-t0);4487}44884489.peach-sync-reset-confirm {4490  display: flex;4491  flex-direction: column;4492  gap: 8px;4493  padding: 10px;4494  border: 1px solid var(--peach-breach);4495  border-radius: 10px;4496  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4497}44984499.peach-sync-reset-confirm-headline {4500  font-size: 0.8125rem;4501  font-weight: 600;4502  color: var(--peach-t0);4503  margin: 0;4504}45054506.peach-sync-reset-confirm-body {4507  font-size: 0.75rem;4508  color: var(--peach-t1);4509  margin: 0;4510  line-height: 1.4;4511}45124513.peach-btn--danger {4514  background: var(--peach-breach);4515  color: #fff;4516  border-color: var(--peach-breach);4517}4518.peach-btn--danger:hover:not(:disabled) {4519  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4520}4521.peach-btn--danger:disabled {4522  opacity: 0.55;4523  cursor: not-allowed;4524}45254526.peach-sync-hero-icon {4527  color: var(--peach-t1);4528  opacity: 0.85;4529}45304531.peach-import-preview {4532  margin-bottom: 12px;4533  max-height: 152px;4534  overflow-y: auto;4535  border: 1px solid var(--peach-t3);4536  border-radius: 10px;4537  padding: 8px 10px;4538  display: grid;4539  gap: 8px;4540  background: rgba(240, 232, 216, 0.02);4541}45424543.peach-import-preview-row {4544  display: flex;4545  justify-content: space-between;4546  gap: 10px;4547  font-size: 0.6875rem;4548  color: var(--peach-t1);4549}45504551.peach-import-preview-title {4552  color: var(--peach-t0);4553  flex: 1;4554  min-width: 0;4555  overflow: hidden;4556  text-overflow: ellipsis;4557  white-space: nowrap;4558}45594560.peach-import-preview-meta {4561  color: var(--peach-t2);4562  flex-shrink: 0;4563  max-width: 42%;4564  overflow: hidden;4565  text-overflow: ellipsis;4566  white-space: nowrap;4567}45684569.peach-import-preview-more {4570  color: var(--peach-t2);4571  font-size: 0.625rem;4572}45734574.peach-restore-copy {4575  margin: 0;4576  color: var(--peach-t1);4577  font-size: 0.6875rem;4578  line-height: 1.6;4579}45804581.peach-restore-warning {4582  padding: 10px 12px;4583  border-radius: 12px;4584  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4585  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4586  color: var(--peach-t0);4587  font-size: 0.6875rem;4588  line-height: 1.55;4589}45904591.peach-provider-chips {4592  display: flex;4593  flex-wrap: wrap;4594  gap: 6px;4595}45964597.peach-provider-chip {4598  display: inline-flex;4599  align-items: center;4600  padding: 5px 8px;4601  border-radius: 999px;4602  border: 1px solid var(--peach-t3);4603  background: rgba(240, 232, 216, 0.02);4604  color: var(--peach-t1);4605  font-family: "IBM Plex Mono", monospace;4606  font-size: 0.5rem;4607  letter-spacing: 0.08em;4608  text-transform: uppercase;4609}46104611.peach-restore-file,4612.peach-restore-input {4613  width: 100%;4614  border-radius: 10px;4615  border: 1px solid var(--peach-t3);4616  background: var(--peach-s2);4617  color: var(--peach-t0);4618  font-size: 0.75rem;4619}46204621.peach-restore-file {4622  padding: 9px 10px;4623}46244625.peach-restore-file::file-selector-button {4626  margin-right: 10px;4627  padding: 7px 10px;4628  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4629  border-radius: 999px;4630  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4631  color: var(--peach-t0);4632  font-size: 0.625rem;4633  letter-spacing: 0.08em;4634  text-transform: uppercase;4635  cursor: pointer;4636}46374638.peach-restore-input {4639  padding: 10px 12px;4640}46414642.peach-auth-grid {4643  display: grid;4644  gap: 10px;4645}46464647.peach-import-summary {4648  color: var(--peach-t1);4649  font-size: 0.75rem;4650  line-height: 1.6;4651  margin-bottom: 12px;4652}46534654.peach-restore-error {4655  color: rgba(220, 80, 60, 0.95);4656  font-size: 0.75rem;4657  line-height: 1.55;4658}46594660.peach-passkey-card {4661  max-width: 400px;4662  margin: auto 16px;4663  align-self: center;4664  width: calc(100% - 32px);4665}46664667/* Center the approval card vertically inside the overlay-view (which sets4668 * flex-direction: column without justify-content). Without this, the card4669 * sits at the top with a tall empty band below — looks unfinished on the4670 * 320px popup. */4671.peach-overlay-view:has(.peach-passkey-card) {4672  justify-content: center;4673}46744675.peach-pro-badge {4676  padding: 2px 6px;4677  border-radius: 999px;4678  font-family: var(--font-ui);4679  font-size: 0.625rem;4680  letter-spacing: 0.08em;4681  text-transform: uppercase;4682  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4683  color: var(--peach-accent);4684}46854686/* ── Shortcuts rebind table ─────────────────────────────────── */4687.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4688.peach-shortcut-row {4689  display: flex;4690  align-items: center;4691  gap: 10px;4692  padding: 6px 0;4693}4694.peach-shortcut-row-label {4695  flex: 1;4696  font-size: 0.75rem;4697  color: var(--peach-t0);4698}4699.peach-shortcut-chip {4700  min-width: 64px;4701  padding: 4px 10px;4702  border-radius: 6px;4703  border: 1px solid var(--peach-t3);4704  background: var(--peach-input-bg, var(--surface-card));4705  color: var(--peach-t0);4706  font-family: var(--font-mono);4707  font-size: 0.6875rem;4708  letter-spacing: 0.04em;4709  cursor: pointer;4710  text-align: center;4711  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4712}4713.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4714.peach-shortcut-chip.is-custom {4715  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4716  color: var(--peach-accent);4717}4718.peach-shortcut-chip.is-capturing {4719  border-color: var(--peach-accent);4720  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4721  color: var(--peach-accent);4722  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4723}4724@keyframes peach-shortcut-capture-pulse {4725  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4726  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4727}4728.peach-shortcut-reset {4729  background: transparent;4730  border: none;4731  cursor: pointer;4732  color: var(--peach-t2);4733  padding: 4px 6px;4734  border-radius: 5px;4735  font-size: 0.875rem;4736  line-height: 1;4737  transition: color 120ms ease, background 120ms ease;4738}4739.peach-shortcut-reset:hover {4740  color: var(--peach-t0);4741  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4742}4743.peach-shortcuts-conflict {4744  margin: 4px 0 0;4745  padding: 8px 10px;4746  border-radius: 7px;4747  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4748  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4749  font-family: var(--font-mono);4750  font-size: 0.6875rem;4751  color: var(--peach-t0);4752}47534754/* ── Help dialog overlay (? to open) ────────────────────────── */4755.peach-shortcuts-help-backdrop {4756  position: fixed;4757  inset: 0;4758  background: rgba(0, 0, 0, 0.55);4759  backdrop-filter: blur(2px);4760  display: flex;4761  align-items: center;4762  justify-content: center;4763  z-index: 1000;4764  animation: peach-help-fade-in 140ms ease forwards;4765}4766@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4767.peach-shortcuts-help-card {4768  width: min(320px, 92vw);4769  max-height: 80vh;4770  overflow-y: auto;4771  border-radius: 14px;4772  border: 1px solid var(--peach-t3);4773  background: var(--peach-bg);4774  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4775  padding: 16px 18px 18px;4776  display: flex;4777  flex-direction: column;4778  gap: 12px;4779}4780.peach-shortcuts-help-head {4781  display: flex; align-items: center; justify-content: space-between;4782}4783.peach-shortcuts-help-head h3 {4784  margin: 0;4785  font-family: var(--font-display);4786  font-style: italic;4787  font-weight: 400;4788  font-size: 22px;4789  color: var(--peach-t0);4790}4791.peach-shortcuts-help-close {4792  background: transparent;4793  border: none;4794  color: var(--peach-t2);4795  cursor: pointer;4796  font-size: 0.875rem;4797  padding: 4px 8px;4798  border-radius: 5px;4799}4800.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4801.peach-shortcuts-help-body ul {4802  list-style: none; padding: 0; margin: 4px 0 12px;4803  display: grid; gap: 8px;4804}4805.peach-shortcuts-help-body li {4806  display: flex; align-items: center; justify-content: space-between; gap: 12px;4807  font-size: 0.75rem; color: var(--peach-t0);4808}4809.peach-shortcuts-help-body kbd {4810  font-family: var(--font-mono);4811  font-size: 0.6875rem;4812  padding: 3px 8px;4813  border-radius: 6px;4814  background: var(--surface-card);4815  border: 1px solid var(--peach-t3);4816  color: var(--peach-accent);4817  letter-spacing: 0.04em;4818}48194820/* ── Pro promo on Account screen ────────────────────────────── */4821.peach-pro-promo {4822  position: relative;4823  border-radius: 14px;4824  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4825  background:4826    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4827    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4828    var(--surface-card);4829  overflow: hidden;4830  margin-bottom: 14px;4831}4832.peach-pro-promo-glow {4833  position: absolute;4834  inset: -40% -20% auto auto;4835  width: 220px; height: 220px;4836  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4837  pointer-events: none;4838  filter: blur(8px);4839}4840.peach-pro-promo-inner {4841  position: relative;4842  padding: 18px 18px 16px;4843}4844.peach-pro-promo-title {4845  font-family: var(--font-display);4846  font-style: italic;4847  font-weight: 400;4848  font-size: 28px;4849  line-height: 1;4850  letter-spacing: -0.005em;4851  color: var(--peach-t0);4852  margin: 0 0 4px;4853}4854.peach-pro-promo-tagline {4855  font-family: var(--font-mono);4856  font-size: 0.625rem;4857  letter-spacing: 0.06em;4858  color: var(--peach-t2);4859  margin: 0 0 14px;4860}4861.peach-pro-promo-list {4862  list-style: none;4863  margin: 0 0 16px;4864  padding: 0;4865  display: grid;4866  gap: 9px;4867}4868.peach-pro-promo-list li {4869  display: flex;4870  align-items: flex-start;4871  gap: 9px;4872  font-size: 0.75rem;4873  color: var(--peach-t1);4874  line-height: 1.4;4875}4876.peach-pro-promo-list svg {4877  width: 14px;4878  height: 14px;4879  flex-shrink: 0;4880  color: var(--peach-accent);4881  margin-top: 2px;4882}4883.peach-pro-promo-list span {4884  color: var(--peach-t0);4885}4886.peach-pro-promo-cta {4887  width: 100%;4888  background: var(--peach-accent);4889  color: #fff;4890  border: none;4891  padding: 9px 12px;4892  border-radius: 9px;4893  font-size: 0.75rem;4894  font-weight: 500;4895  font-family: var(--font-ui);4896  letter-spacing: 0.02em;4897  text-decoration: none;4898  display: inline-flex;4899  align-items: center;4900  justify-content: center;4901  cursor: pointer;4902  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4903  box-shadow: 0 2px 16px var(--peach-glow);4904}4905.peach-pro-promo-cta:hover {4906  filter: brightness(1.07);4907  box-shadow: 0 4px 24px var(--peach-glow);4908  transform: translateY(-1px);4909}4910.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }49114912.peach-pro-or-divider {4913  display: flex;4914  align-items: center;4915  gap: 10px;4916  margin: 4px 0 12px;4917  font-family: var(--font-mono);4918  font-size: 0.625rem;4919  letter-spacing: 0.06em;4920  color: var(--peach-t2);4921  text-transform: uppercase;4922}4923.peach-pro-or-divider::before,4924.peach-pro-or-divider::after {4925  content: "";4926  flex: 1;4927  height: 1px;4928  background: var(--peach-t3);4929}49304931.peach-loading {4932  position: absolute;4933  inset: 0;4934  display: flex;4935  align-items: center;4936  justify-content: center;4937  background: var(--bg);4938  animation: peach-loading-pulse 1.2s ease-in-out infinite;4939}49404941@keyframes peach-loading-pulse {4942  0%, 100% { opacity: 0.6; }4943  50% { opacity: 1; }4944}49454946/* ── Health Dashboard ─────────────────────────────────────────────────── */4947.peach-health-body {4948  flex: 1;4949  overflow-y: auto;4950  display: flex;4951  flex-direction: column;4952  /* Hide the platform scrollbar — every other scrollable surface in the4953   * popup hides it; the Health view was the one outlier and it ruined the4954   * polish. Behavior unchanged, just no rail rendered. */4955  scrollbar-width: none;4956  -ms-overflow-style: none;4957}4958.peach-health-body::-webkit-scrollbar { display: none; }49594960/* Loading screen for the Vault Health view. The advanced report computation4961 * can run for a few seconds on a large vault — without a clear loading4962 * screen the surface looked broken (the entry view bleeds through the4963 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4964.peach-health-loading-screen {4965  flex: 1;4966  display: flex;4967  flex-direction: column;4968  align-items: center;4969  justify-content: center;4970  gap: 14px;4971  padding: 32px 28px;4972  text-align: center;4973}49744975.peach-health-loading-glyph {4976  width: 48px;4977  height: 48px;4978  display: flex;4979  align-items: center;4980  justify-content: center;4981  border-radius: 14px;4982  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4983  color: var(--peach-accent);4984}49854986.peach-health-loading-title {4987  margin: 0;4988  font-family: var(--font-display);4989  font-style: italic;4990  font-weight: 300;4991  font-size: 19px;4992  line-height: 1.2;4993  color: var(--peach-t0);4994}49954996.peach-health-loading-copy {4997  margin: 0;4998  max-width: 240px;4999  font-size: 0.75rem;5000  line-height: 1.55;5001  color: var(--peach-t2);5002}50035004.peach-health-loading-track {5005  width: 200px;5006  height: 3px;5007  margin-top: 6px;5008  border-radius: 999px;5009  background: rgba(240, 232, 216, 0.06);5010  overflow: hidden;5011}50125013.peach-health-loading-fill {5014  width: 40%;5015  height: 100%;5016  border-radius: inherit;5017  background: linear-gradient(5018    90deg,5019    transparent 0%,5020    var(--peach-accent) 50%,5021    transparent 100%5022  );5023  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;5024}50255026@keyframes peach-health-loading-sweep {5027  0%   { transform: translateX(-100%); }5028  100% { transform: translateX(350%); }5029}50305031[data-motion="reduce"] .peach-health-loading-fill,5032[data-motion="reduce"] .peach-health-loading-glyph svg path {5033  animation: none;5034}50355036.peach-health-summary {5037  padding: 10px 16px 6px;5038  font-family: "IBM Plex Mono", monospace;5039  font-size: 0.6875rem;5040}5041.peach-health-summary-warn { color: rgba(220,80,60,0.9); }5042.peach-health-summary-ok { color: var(--peach-t2); }50435044.peach-health-check-row {5045  padding: 0 16px 10px;5046}5047.peach-health-check-btn {5048  width: 100%;5049  display: flex;5050  align-items: center;5051  justify-content: center;5052}50535054.peach-health-sections {5055  flex: 1;5056  display: flex;5057  flex-direction: column;5058}50595060.peach-health-section {5061  border-bottom: 1px solid var(--peach-t3);5062}50635064.peach-health-section-header {5065  width: 100%;5066  display: flex;5067  align-items: center;5068  justify-content: space-between;5069  padding: 9px 16px;5070  background: transparent;5071  cursor: pointer;5072  color: var(--peach-t0);5073}50745075.peach-health-section-title-row {5076  display: flex;5077  align-items: center;5078  gap: 8px;5079}50805081.peach-health-count-badge {5082  display: inline-flex;5083  align-items: center;5084  justify-content: center;5085  min-width: 20px;5086  height: 18px;5087  padding: 0 5px;5088  border-radius: 999px;5089  background: rgba(220,80,60,0.15);5090  border: 1px solid rgba(220,80,60,0.25);5091  font-family: "IBM Plex Mono", monospace;5092  font-size: 0.5625rem;5093  color: rgba(220,80,60,0.9);5094}50955096.peach-health-section-title {5097  font-family: "IBM Plex Mono", monospace;5098  font-size: 0.6875rem;5099  text-transform: uppercase;5100  letter-spacing: 0.1em;5101  color: var(--peach-t1);5102}51035104.peach-health-chevron {5105  color: var(--peach-t2);5106  transition: transform 200ms ease;5107  flex-shrink: 0;5108}5109.peach-health-chevron.is-expanded {5110  transform: rotate(180deg);5111}51125113.peach-health-section-body {5114  padding: 0 16px 10px;5115  display: flex;5116  flex-direction: column;5117  gap: 4px;5118}51195120.peach-health-row {5121  display: flex;5122  align-items: flex-start;5123  justify-content: space-between;5124  gap: 8px;5125  padding: 6px 8px;5126  border-radius: 8px;5127  background: rgba(240,232,216,0.02);5128}51295130.peach-health-row-info {5131  flex: 1;5132  min-width: 0;5133  display: flex;5134  flex-direction: column;5135  gap: 2px;5136}51375138.peach-health-row-name {5139  font-family: var(--font-display);5140  font-size: 0.9375rem;5141  font-style: italic;5142  font-weight: 400;5143  color: var(--peach-t0);5144  white-space: nowrap;5145  overflow: hidden;5146  text-overflow: ellipsis;5147}51485149.peach-health-row-meta {5150  font-family: "IBM Plex Mono", monospace;5151  font-size: 0.5625rem;5152  color: var(--peach-t2);5153  letter-spacing: 0.05em;5154}51555156.peach-health-fix-btn {5157  font-size: 0.5625rem;5158  letter-spacing: 0.08em;5159  text-transform: uppercase;5160  padding: 4px 7px;5161  flex-shrink: 0;5162  display: flex;5163  align-items: center;5164}51655166.peach-health-empty {5167  font-family: "IBM Plex Mono", monospace;5168  font-size: 0.625rem;5169  color: var(--peach-t2);5170  padding: 6px 0;5171}51725173.peach-health-loading {5174  font-family: "IBM Plex Mono", monospace;5175  font-size: 0.625rem;5176  color: var(--peach-t2);5177  padding: 6px 0;5178  display: flex;5179  align-items: center;5180  gap: 6px;5181}51825183.peach-health-loading::before {5184  content: "";5185  width: 10px;5186  height: 10px;5187  border: 1.5px solid var(--peach-t3);5188  border-top-color: var(--peach-accent);5189  border-radius: 50%;5190  animation: peach-spin 600ms linear infinite;5191}51925193@keyframes peach-spin {5194  to { transform: rotate(360deg); }5195}51965197.peach-spinner {5198  width: 32px;5199  height: 32px;5200  border: 2px solid var(--peach-s2);5201  border-top-color: var(--peach-accent);5202  border-radius: 50%;5203  margin: 0 auto 16px;5204  animation: peach-spin 0.8s linear infinite;5205}52065207.peach-progress-screen {5208  text-align: center;5209  padding: 32px 16px;5210}52115212.peach-progress-screen-title {5213  font-size: 0.8125rem;5214  color: var(--peach-t0);5215  margin-bottom: 16px;5216}52175218.peach-progress-screen-stage {5219  font-size: 0.6875rem;5220  color: var(--peach-t2);5221  min-height: 14px;5222}52235224.peach-progress-screen-note {5225  font-size: 0.625rem;5226  color: var(--peach-t2);5227  margin-top: 8px;5228}52295230/* Tag chips */5231.peach-tag-chip {5232  display: inline-flex;5233  align-items: center;5234  gap: 4px;5235  padding: 3px 8px;5236  border-radius: 999px;5237  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5238  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5239  color: var(--peach-t0);5240  font-family: "IBM Plex Mono", monospace;5241  font-size: 0.625rem;5242  letter-spacing: 0.04em;5243}52445245.peach-tag-chip-remove {5246  background: transparent;5247  border: none;5248  color: inherit;5249  opacity: 0.6;5250  cursor: pointer;5251  padding: 0;5252  font-size: 0.75rem;5253  line-height: 1;5254}52555256.peach-tag-chip-remove:hover {5257  opacity: 1;5258}52595260/* Tag input */5261.peach-tag-input-wrap {5262  border-bottom: 1px solid var(--peach-t3);5263}52645265.peach-tag-suggestions {5266  display: flex;5267  flex-wrap: wrap;5268  gap: 4px;5269  padding: 6px 0;5270}52715272.peach-tag-suggestion {5273  padding: 2px 8px;5274  border-radius: 999px;5275  border: 1px solid var(--peach-t3);5276  background: var(--peach-s2);5277  color: var(--peach-t1);5278  font-family: "IBM Plex Mono", monospace;5279  font-size: 0.625rem;5280  cursor: pointer;5281  transition: border-color 80ms ease, background 80ms ease;5282}52835284.peach-tag-suggestion:hover {5285  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5286  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5287}52885289/* Identity suggestions — shown below username/email inputs in new-entry form */5290@keyframes peach-suggest-in {5291  from { opacity: 0; transform: translateY(-4px); }5292  to   { opacity: 1; transform: none; }5293}52945295.peach-identity-suggestions {5296  display: flex;5297  flex-direction: column;5298  gap: 1px;5299  margin-top: 4px;5300  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5301}53025303.peach-identity-filter-row {5304  display: flex;5305  align-items: center;5306  gap: 4px;5307  padding: 2px 0 5px;5308}53095310.peach-identity-collapse-btn {5311  margin-left: auto;5312  background: transparent;5313  border: none;5314  cursor: pointer;5315  color: var(--peach-t3);5316  padding: 2px 4px;5317  display: flex;5318  align-items: center;5319  line-height: 0;5320  border-radius: 3px;5321  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5322}53235324.peach-identity-collapse-btn:hover {5325  color: var(--peach-t1);5326}53275328.peach-identity-collapse-btn.is-collapsed {5329  transform: rotate(-90deg);5330}53315332.peach-identity-rows {5333  display: grid;5334  grid-template-rows: 1fr;5335  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5336}53375338.peach-identity-rows.is-collapsed {5339  grid-template-rows: 0fr;5340}53415342.peach-identity-rows-inner {5343  overflow-y: auto;5344  min-height: 0;5345  max-height: 148px;5346  scrollbar-width: thin;5347  scrollbar-color: var(--peach-t3) transparent;5348  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5349  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5350}53515352.peach-identity-rows-inner::-webkit-scrollbar {5353  width: 4px;5354}53555356.peach-identity-rows-inner::-webkit-scrollbar-track {5357  background: transparent;5358}53595360.peach-identity-rows-inner::-webkit-scrollbar-thumb {5361  background: var(--peach-t3);5362  border-radius: 2px;5363}53645365.peach-identity-filter-pill {5366  padding: 2px 7px;5367  border-radius: 999px;5368  border: 1px solid var(--peach-t3);5369  background: transparent;5370  color: var(--peach-t2);5371  font-family: "IBM Plex Mono", monospace;5372  font-size: 0.6rem;5373  cursor: pointer;5374  transition: border-color 80ms, background 80ms, color 80ms;5375}53765377.peach-identity-filter-pill.is-on {5378  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5379  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5380  color: var(--peach-accent);5381}53825383.peach-identity-suggestion {5384  display: flex;5385  align-items: center;5386  gap: 6px;5387  width: 100%;5388  padding: 4px 6px;5389  border-radius: 5px;5390  border: none;5391  background: transparent;5392  cursor: pointer;5393  text-align: left;5394  transition: background 80ms ease;5395}53965397.peach-identity-suggestion:hover,5398.peach-identity-suggestion:focus {5399  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5400  outline: none;5401}54025403.peach-identity-suggestion-value {5404  font-family: "IBM Plex Mono", monospace;5405  font-size: 0.7rem;5406  color: var(--peach-t1);5407  overflow: hidden;5408  text-overflow: ellipsis;5409  white-space: nowrap;5410  flex: 1;5411  min-width: 0;5412}54135414.peach-identity-suggestion-type {5415  font-family: "IBM Plex Mono", monospace;5416  font-size: 0.55rem;5417  font-weight: 600;5418  flex-shrink: 0;5419  padding: 1px 4px;5420  border-radius: 3px;5421}54225423.peach-identity-suggestion-type--email {5424  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5425  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5426}54275428.peach-identity-suggestion-type--username {5429  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5430  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5431}54325433.peach-identity-suggestion-meta {5434  font-family: "IBM Plex Mono", monospace;5435  font-size: 0.6rem;5436  color: var(--peach-t3);5437  flex-shrink: 0;5438}54395440/* Tag filter strip */5441.peach-tag-filter-strip {5442  border-bottom: 1px solid var(--peach-t3);5443  flex-shrink: 0;5444}54455446.peach-tag-filter-chip {5447  display: inline-flex;5448  align-items: center;5449  padding: 4px 10px;5450  border-radius: 999px;5451  border: 1px solid var(--peach-t3);5452  background: transparent;5453  color: var(--peach-t2);5454  font-family: "IBM Plex Mono", monospace;5455  font-size: 0.5625rem;5456  letter-spacing: 0.06em;5457  text-transform: uppercase;5458  cursor: pointer;5459  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5460  white-space: nowrap;5461}54625463.peach-tag-filter-chip:hover {5464  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5465  color: var(--peach-t1);5466}54675468.peach-tag-filter-chip.is-selected {5469  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5470  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5471  color: var(--peach-t0);5472}54735474/* ─────────────────────────────────────────────────────────────────────────5475   v1.4.12 additions5476   ─────────────────────────────────────────────────────────────────────── */54775478/* Sort bar */5479.peach-sort-bar {5480  display: flex;5481  align-items: center;5482  gap: 4px;5483  padding: 5px 12px;5484  border-bottom: 1px solid var(--peach-t3);5485  flex-shrink: 0;5486  overflow-x: auto;5487  scrollbar-width: none;5488}54895490.peach-sort-btn {5491  padding: 2px 9px;5492  border-radius: 999px;5493  border: 1px solid transparent;5494  background: transparent;5495  color: var(--peach-t2);5496  font-family: "IBM Plex Mono", monospace;5497  font-size: 0.5625rem;5498  letter-spacing: 0.07em;5499  text-transform: uppercase;5500  cursor: pointer;5501  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5502  white-space: nowrap;5503}55045505.peach-sort-btn:hover {5506  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5507  color: var(--peach-t1);5508}55095510.peach-sort-btn.is-active {5511  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5512  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5513  color: var(--peach-t0);5514}55155516.peach-sort-scope-btn {5517  padding-inline: 8px;5518  font-size: 0.53125rem;5519  letter-spacing: 0.05em;5520}55215522.peach-sort-domain-hint {5523  margin-left: auto;5524  font-family: "IBM Plex Mono", monospace;5525  font-size: 0.5625rem;5526  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5527  white-space: nowrap;5528  overflow: hidden;5529  text-overflow: ellipsis;5530  max-width: 110px;5531}55325533/* Tab-match badge on entry rows */5534.peach-tab-match-badge {5535  display: inline-block;5536  width: 6px;5537  height: 6px;5538  border-radius: 50%;5539  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5540  margin-left: 5px;5541  vertical-align: middle;5542  flex-shrink: 0;5543  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5544}55455546.peach-entry-row.is-tab-match {5547  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5548  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5549}55505551.peach-entry-row.is-tab-match:hover {5552  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5553}55545555/* Entry list stagger entrance */5556@keyframes peach-entry-fadein {5557  from { opacity: 0; transform: translateY(4px); }5558  to   { opacity: 1; transform: translateY(0); }5559}55605561.peach-vault-list .peach-entry-row {5562  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5563}55645565/* Button press micro-interaction */5566.peach-btn:active {5567  transform: scale(0.95);5568  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5569}55705571.peach-sort-btn:active,5572.peach-tag-filter-chip:active {5573  transform: scale(0.93);5574  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5575}55765577/* Password strength bar (Lock view + shared) */5578.peach-password-strength {5579  display: flex;5580  align-items: center;5581  gap: 8px;5582  margin-top: 6px;5583}55845585.peach-strength-bar {5586  flex: 1;5587  height: 3px;5588  border-radius: 2px;5589  background: var(--peach-t3);5590  overflow: hidden;5591}55925593.peach-strength-fill {5594  height: 100%;5595  border-radius: 2px;5596  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5597              background 300ms ease;5598}55995600.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5601.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5602.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5603.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }56045605.peach-strength-label {5606  font-family: "IBM Plex Mono", monospace;5607  font-style: italic;5608  font-size: 0.5625rem;5609  font-weight: 300;5610  letter-spacing: 0.06em;5611  color: var(--peach-t2);5612  min-width: 36px;5613  text-align: right;5614}56155616.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5617.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5618.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5619.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }56205621/* Duress form */5622.peach-duress-status {5623  padding: 2px 8px;5624  border-radius: 999px;5625  border: 1px solid var(--peach-t3);5626  font-family: "IBM Plex Mono", monospace;5627  font-size: 0.5625rem;5628  letter-spacing: 0.07em;5629  text-transform: uppercase;5630  color: var(--peach-t2);5631  flex-shrink: 0;5632}56335634.peach-duress-status.is-active {5635  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5636  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5637  color: var(--peach-t0);5638}56395640.peach-duress-form {5641  padding: 8px 0 4px;5642  display: flex;5643  flex-direction: column;5644  gap: 6px;5645}56465647.peach-duress-form .peach-label {5648  margin-top: 4px;5649}56505651.peach-duress-actions {5652  display: flex;5653  gap: 6px;5654  align-items: center;5655  margin-top: 4px;5656}56575658.peach-duress-actions .peach-btn:first-child {5659  margin-right: auto;5660}56615662/* Improved overlay spring entrance */5663.peach-overlay-view.ov-enter-up {5664  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5665}56665667@keyframes ov-enter-up-spring {5668  from { opacity: 0; transform: translateY(16px) scale(0.98); }5669  to   { opacity: 1; transform: translateY(0) scale(1); }5670}56715672.peach-overlay-view.ov-enter-right {5673  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5674}56755676@keyframes ov-enter-right-spring {5677  from { opacity: 0; transform: translateX(18px) scale(0.98); }5678  to   { opacity: 1; transform: translateX(0) scale(1); }5679}56805681/* ── Onboarding-mode restore screens (file import) ── */5682/* Used when MainImportView renders during onboarding (no vault yet).5683   Animates like a lock-screen transition. */5684.peach-lock-view {5685  position: absolute;5686  inset: 0;5687  display: flex;5688  flex-direction: column;5689  background:5690    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5691    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5692    var(--peach-bg);5693  z-index: 2;5694  overflow: hidden;5695  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5696}56975698.peach-lock-view-header {5699  display: flex;5700  align-items: center;5701  justify-content: space-between;5702  padding: 16px 18px 12px;5703  flex-shrink: 0;5704}57055706/* ───────── Settings: auto-lock select ───────── */5707.peach-settings-select {5708  font-family: "IBM Plex Mono", monospace;5709  font-size: 0.6875rem;5710  background: transparent;5711  border: 1px solid var(--peach-t3);5712  border-radius: 4px;5713  color: var(--peach-t1);5714  padding: 3px 6px;5715  cursor: pointer;5716  outline: none;5717}5718.peach-settings-select:focus {5719  border-color: var(--peach-accent);5720}57215722/* ───────── Duress status pill (new polished) ───────── */5723.peach-duress-status-pill {5724  font-family: "IBM Plex Mono", monospace;5725  font-size: 0.5625rem;5726  text-transform: uppercase;5727  letter-spacing: 0.12em;5728  padding: 2px 8px;5729  border-radius: 12px;5730  background: var(--peach-t3);5731  color: var(--peach-t2);5732  flex-shrink: 0;5733}5734.peach-duress-status-pill.is-active {5735  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5736  color: var(--peach-accent);5737}57385739/* ───────── Entry advanced disclosure (canary) ───────── */5740.peach-entry-advanced {5741  margin-top: 12px;5742  border-top: 1px solid var(--peach-t3);5743  padding-top: 10px;5744  position: relative;5745  z-index: 1;5746}5747.peach-entry-advanced-toggle {5748  display: flex;5749  align-items: center;5750  justify-content: space-between;5751  width: 100%;5752  background: transparent;5753  border: none;5754  cursor: pointer;5755  padding: 0;5756  color: var(--peach-t2);5757}5758.peach-canary-section {5759  margin-top: 10px;5760  display: grid;5761  gap: 6px;5762}57635764/* ───────── Import: merge/replace radio choices ───────── */5765.peach-import-choice {5766  display: flex;5767  align-items: flex-start;5768  gap: 10px;5769  padding: 8px 10px;5770  border: 1px solid var(--peach-t3);5771  border-radius: 10px;5772  cursor: pointer;5773  margin-bottom: 6px;5774  transition: border-color 120ms ease, background 120ms ease;5775}5776.peach-import-choice:hover {5777  border-color: var(--peach-accent);5778}5779.peach-import-choice input[type="radio"] {5780  margin-top: 3px;5781  accent-color: var(--peach-accent);5782  flex-shrink: 0;5783}5784.peach-import-choice-main {5785  display: flex;5786  flex-direction: column;5787  gap: 2px;5788  min-width: 0;5789}5790.peach-import-choice-label {5791  font-size: 0.75rem;5792  color: var(--peach-t0);5793}5794.peach-import-choice-sub {5795  font-size: 0.6875rem;5796  color: var(--peach-t2);5797  line-height: 1.5;5798}57995800/* ───────── Export: success confirmation strip ───────── */5801.peach-export-success {5802  display: flex;5803  align-items: flex-start;5804  gap: 10px;5805  padding: 12px;5806  border-radius: 12px;5807  border: 1px solid rgba(150, 175, 110, 0.3);5808  background: rgba(150, 175, 110, 0.08);5809  color: var(--peach-t0);5810  font-size: 0.75rem;5811  line-height: 1.55;5812}5813.peach-export-success-check {5814  color: rgba(150, 175, 110, 0.9);5815  font-size: 0.875rem;5816  flex-shrink: 0;5817}58185819/* ── Trash view ──────────────────────────────────────────────────────── */5820.peach-trash-entry-row {5821  display: flex;5822  align-items: center;5823  justify-content: space-between;5824  gap: 8px;5825  padding: 8px 0;5826  border-bottom: 1px solid var(--peach-border);5827}5828.peach-trash-entry-info {5829  flex: 1;5830  min-width: 0;5831  display: flex;5832  flex-direction: column;5833  gap: 2px;5834}5835.peach-trash-entry-title {5836  font-size: 0.8125rem;5837  color: var(--peach-t0);5838  overflow: hidden;5839  text-overflow: ellipsis;5840  white-space: nowrap;5841}5842.peach-trash-entry-meta {5843  font-family: var(--font-mono);5844  font-size: 0.5625rem;5845  color: var(--peach-t2);5846  letter-spacing: 0.04em;5847}5848.peach-trash-entry-actions {5849  display: flex;5850  align-items: center;5851  gap: 4px;5852  flex-shrink: 0;5853}5854.peach-trash-delete-btn {5855  background: transparent;5856  border: 0;5857  color: var(--peach-t3);5858  font-size: 1rem;5859  line-height: 1;5860  cursor: pointer;5861  padding: 2px 5px;5862  transition: color 0.15s;5863}5864.peach-trash-delete-btn:hover { color: var(--peach-breach); }5865.peach-trash-list {5866  overflow-y: auto;5867}5868.peach-trash-footer {5869  display: flex;5870  align-items: center;5871  gap: 8px;5872  padding: 8px 0 0;5873  border-top: 1px solid var(--peach-border);5874  margin-top: 4px;5875}5876.peach-trash-purge-all {5877  background: transparent;5878  border: 0;5879  color: var(--peach-t3);5880  font-size: 0.625rem;5881  cursor: pointer;5882  padding: 4px 0;5883  letter-spacing: 0.03em;5884  transition: color 0.2s;5885}5886.peach-trash-purge-all:hover { color: var(--peach-breach); }5887.peach-trash-purge-confirm-label {5888  font-size: 0.625rem;5889  color: var(--peach-t1);5890  flex: 1;5891}58925893/* ── Settings shortcuts grid ─────────────────────────────────────────── */5894.peach-shortcuts-grid {5895  display: grid;5896  grid-template-columns: auto 1fr;5897  gap: 6px 12px;5898  align-items: center;5899  padding: 4px 0;5900}5901.peach-shortcut-key {5902  font-family: var(--font-mono);5903  font-size: 0.625rem;5904  color: var(--peach-t0);5905  background: var(--peach-t3);5906  border-radius: 4px;5907  padding: 2px 6px;5908  white-space: nowrap;5909  text-align: center;5910}5911.peach-shortcut-desc {5912  font-size: 0.6875rem;5913  color: var(--peach-t1);5914}59155916/* ── Sort bar trash button ───────────────────────────────────────────── */5917.peach-sort-trash-btn {5918  display: flex;5919  align-items: center;5920  justify-content: center;5921  padding: 3px 5px;5922  background: transparent;5923  border: none;5924  cursor: pointer;5925  color: var(--peach-t2);5926  border-radius: 4px;5927  transition: color 140ms ease, background 140ms ease;5928}5929.peach-sort-trash-btn:hover {5930  color: var(--peach-t1);5931  background: var(--peach-t3);5932}5933.peach-sort-trash-btn.is-active {5934  color: var(--peach-accent);5935}59365937/* Accent color picker */5938.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5939.peach-accent-picker {5940  display: flex;5941  flex-wrap: wrap;5942  gap: 7px;5943  padding: 2px 0;5944}5945.peach-accent-swatch {5946  width: 22px;5947  height: 22px;5948  border-radius: 50%;5949  border: 2px solid transparent;5950  cursor: pointer;5951  padding: 0;5952  transition: transform 100ms;5953  outline-offset: 2px;5954}5955.peach-accent-swatch:hover { transform: scale(1.15); }5956.peach-accent-swatch.is-active {5957  border-color: var(--peach-t0);5958  transform: scale(1.1);5959}59605961.peach-pill-group {5962  display: flex;5963  gap: 6px;5964}5965.peach-pill-group .peach-btn.is-active {5966  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5967  border-color: var(--peach-accent);5968  color: var(--peach-t0);5969}59705971/* ── Card entry styles ───────────────────────────────────────── */5972.peach-card-number {5973  font-family: var(--peach-mono);5974  letter-spacing: 0.08em;5975}59765977.peach-card-network-badge {5978  font-size: 0.625rem;5979  padding: 1px 5px;5980  border-radius: 4px;5981  border: 0.5px solid var(--peach-border);5982  color: var(--peach-text-dim);5983  margin-left: 6px;5984  vertical-align: middle;5985}59865987.peach-card-expiry-row {5988  display: flex;5989  align-items: center;5990  gap: 8px;5991}59925993.peach-card-expiry-sep {5994  color: var(--peach-text-dim);5995}59965997/* ── Pro tier — upgrade screen ──────────────────────────────── */5998.peach-pro-mark {5999  font-size: 0.5625rem;6000  color: var(--peach-accent);6001  margin-left: 6px;6002  vertical-align: super;6003  opacity: 0.7;6004}60056006.peach-pro-mini-badge {6007  display: block;6008  font-size: 0.625rem;6009  font-style: italic;6010  color: var(--peach-accent);6011  letter-spacing: 0.04em;6012  margin-top: -2px;6013  padding-left: 2px;6014  opacity: 0.85;6015  text-align: center;6016}60176018.peach-wordmark-stack {6019  display: inline-flex;6020  flex-direction: column;6021  align-items: center;6022}60236024/* ── Pro tier — upgrade page ─────────────────────────────────── */6025/* ── Pro upgrade — redesigned editorial layout ─────────────────── */60266027.peach-pro-upgrade {6028  display: flex;6029  flex-direction: column;6030  align-items: stretch;6031  gap: 10px;6032  padding: 2px 2px 12px;6033}60346035.peach-pro-eyebrow {6036  margin: 0;6037  font-family: var(--font-ui);6038  font-size: 0.625rem;6039  font-weight: 500;6040  letter-spacing: 0.12em;6041  color: var(--peach-accent);6042}60436044.peach-pro-headline {6045  margin: 0;6046  font-family: var(--font-display, "Cormorant Garamond", serif);6047  font-size: 30px;6048  font-weight: 700;6049  font-style: normal;6050  line-height: 1.05;6051  color: var(--peach-t0);6052  letter-spacing: -0.01em;6053}6054.peach-pro-headline em {6055  font-style: italic;6056  font-weight: 400;6057  color: var(--peach-accent);6058}60596060.peach-pro-subtitle {6061  margin: 0;6062  font-size: 0.6875rem;6063  line-height: 1.5;6064  color: var(--peach-t1);6065}60666067/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6068.peach-pro-section-label {6069  margin: 6px 0 0;6070  font-family: var(--font-ui);6071  font-size: 0.5625rem;6072  font-weight: 500;6073  letter-spacing: 0.12em;6074  text-transform: uppercase;6075  color: var(--peach-t2);6076}60776078/* 2-column numbered feature grid */6079.peach-pro-grid {6080  display: grid;6081  grid-template-columns: 1fr 1fr;6082  border-top: 1px solid var(--peach-border);6083  border-left: 1px solid var(--peach-border);6084}60856086.peach-pro-grid-item {6087  display: flex;6088  flex-direction: column;6089  gap: 2px;6090  padding: 8px 9px;6091  border-right: 1px solid var(--peach-border);6092  border-bottom: 1px solid var(--peach-border);6093}60946095.peach-pro-grid-item--wide {6096  grid-column: 1 / -1;6097}60986099.peach-pro-grid-num {6100  font-family: var(--font-mono);6101  font-size: 0.5625rem;6102  color: var(--peach-accent);6103  letter-spacing: 0.06em;6104  opacity: 0.85;6105}61066107.peach-pro-grid-name {6108  font-size: 0.8125rem;6109  font-weight: 500;6110  color: var(--peach-t0);6111  line-height: 1.2;6112}61136114.peach-pro-grid-desc {6115  font-size: 0.625rem;6116  color: var(--peach-t1);6117  line-height: 1.4;6118}61196120.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6121  animation: peach-pulse-accent 600ms ease-out forwards;6122}61236124@keyframes peach-pulse-accent {6125  0%   { opacity: 1; transform: scale(1.2); }6126  100% { opacity: 0.85; transform: scale(1); }6127}61286129/* Actions */6130.peach-pro-upgrade-actions {6131  display: flex;6132  flex-direction: column;6133  align-items: stretch;6134  gap: 10px;6135}61366137.peach-pro-pricing {6138  margin: 0;6139  font-size: 1rem;6140  font-weight: 600;6141  color: var(--peach-t0);6142  letter-spacing: 0.01em;6143}6144.peach-pro-pricing-sub {6145  font-size: 0.75rem;6146  font-weight: 400;6147  color: var(--peach-t1);6148  letter-spacing: 0.02em;6149}61506151.peach-pro-upgrade-cta {6152  display: flex;6153  align-items: center;6154  justify-content: center;6155  text-decoration: none;6156  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6157  border: 1px solid var(--peach-accent);6158  border-radius: 10px;6159  color: var(--peach-accent);6160  font-family: var(--font-ui);6161  font-size: 0.8125rem;6162  font-weight: 600;6163  letter-spacing: 0.06em;6164  padding: 11px 16px;6165  transition: background 0.15s ease, color 0.15s ease;6166}6167.peach-pro-upgrade-cta:hover {6168  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6169}61706171.peach-pro-key-divider {6172  display: flex;6173  align-items: center;6174  gap: 8px;6175  color: var(--peach-t2);6176  font-size: 0.5625rem;6177  letter-spacing: 0.1em;6178}6179.peach-pro-key-divider::before,6180.peach-pro-key-divider::after {6181  content: "";6182  flex: 1;6183  height: 1px;6184  background: var(--peach-border);6185}61866187/* Inline key entry row */6188.peach-pro-key-inline {6189  display: flex;6190  align-items: center;6191  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6192  border: 1px solid var(--peach-border);6193  border-radius: 8px;6194  overflow: hidden;6195}6196.peach-pro-key-inline-input {6197  flex: 1;6198  background: transparent;6199  border: none;6200  outline: none;6201  color: var(--peach-t1);6202  font-family: var(--font-mono);6203  font-size: 0.625rem;6204  letter-spacing: 0.06em;6205  padding: 9px 10px;6206}6207.peach-pro-key-inline-input::placeholder {6208  color: var(--peach-t2);6209}6210.peach-pro-key-apply {6211  background: transparent;6212  border: none;6213  border-left: 1px solid var(--peach-border);6214  color: var(--peach-t2);6215  font-family: var(--font-ui);6216  font-size: 0.5625rem;6217  font-weight: 600;6218  letter-spacing: 0.08em;6219  padding: 9px 10px;6220  cursor: pointer;6221  transition: color 0.15s ease;6222  flex-shrink: 0;6223}6224.peach-pro-key-apply:not(:disabled):hover {6225  color: var(--peach-accent);6226}6227.peach-pro-key-apply:disabled {6228  opacity: 0.35;6229  cursor: not-allowed;6230}62316232/* ── Pro tier — key ceremony ─────────────────────────────────── */6233.peach-pro-key-ceremony {6234  display: flex;6235  flex-direction: column;6236  align-items: center;6237  gap: 12px;6238  padding: 20px 4px 16px;6239}62406241.peach-pro-key-ceremony .peach-lock-rune-string {6242  font-size: 1rem;6243  gap: 12px;6244  flex: 0;6245  justify-content: center;6246}62476248.peach-pro-key-ceremony-label {6249  margin: 0;6250  font-size: 0.6875rem;6251  color: var(--peach-t2);6252  font-style: italic;6253  letter-spacing: 0.04em;6254}62556256.peach-pro-key-input {6257  font-family: var(--font-mono, monospace);6258  letter-spacing: 0.06em;6259  text-align: center;6260  width: 100%;6261  box-sizing: border-box;6262}62636264.peach-pro-key-error {6265  margin: 0;6266  font-size: 0.75rem;6267  text-align: center;6268  color: var(--peach-breach, #e55);6269  padding: 0;6270}62716272.peach-pro-key-activate {6273  width: 100%;6274  text-align: center;6275  box-sizing: border-box;6276  padding: 10px 20px;6277  font-size: 0.8125rem;6278}62796280.peach-pro-key-cancel {6281  background: transparent;6282  border: 0;6283  color: var(--peach-t2);6284  font-size: 0.6875rem;6285  cursor: pointer;6286  padding: 2px 8px;6287  transition: color 0.2s;6288}62896290.peach-pro-key-cancel:hover { color: var(--peach-accent); }62916292/* ── Pro tier — active state ─────────────────────────────────── */6293.peach-pro-active {6294  display: flex;6295  flex-direction: column;6296  align-items: center;6297  gap: 0;6298  padding: 8px 4px 16px;6299  min-height: 280px;6300}63016302.peach-pro-active-hero {6303  display: flex;6304  flex-direction: column;6305  align-items: center;6306  gap: 6px;6307  padding: 20px 0 8px;6308}63096310.peach-pro-active-mark-wrap {6311  display: flex;6312  align-items: center;6313  justify-content: center;6314  margin-bottom: 4px;6315}63166317.peach-pro-active-mark {6318  width: 60px;6319  height: 60px;6320}63216322.peach-pro-active-title {6323  font-family: var(--font-display, var(--font-ui));6324  font-size: 26px;6325  margin: 0;6326  color: var(--peach-t0);6327  letter-spacing: 0.01em;6328}63296330.peach-pro-active-since {6331  margin: 0;6332  font-size: 0.6875rem;6333  color: var(--peach-t2);6334  font-style: italic;6335}63366337.peach-pro-active-features {6338  display: flex;6339  flex-direction: column;6340  gap: 8px;6341  width: 100%;6342  padding: 14px 8px 0;6343  border-top: 1px solid var(--peach-border);6344  flex: 1;6345}63466347.peach-pro-active-feature {6348  display: flex;6349  align-items: center;6350  gap: 9px;6351}63526353.peach-pro-active-feature-mark {6354  color: var(--peach-accent);6355  font-size: 0.625rem;6356  opacity: 0.65;6357  flex-shrink: 0;6358}63596360.peach-pro-active-feature-name {6361  font-size: 0.75rem;6362  color: var(--peach-t1);6363}63646365.peach-pro-deactivate {6366  align-self: center;6367  background: transparent;6368  border: 0;6369  color: var(--peach-t3);6370  font-size: 0.625rem;6371  cursor: pointer;6372  padding: 8px 0 0;6373  margin-top: 16px;6374  letter-spacing: 0.03em;6375  transition: color 0.2s;6376}63776378.peach-pro-deactivate:hover { color: var(--peach-t2); }63796380.peach-pro-deactivate:disabled {6381  opacity: 0.5;6382  cursor: default;6383}63846385/* ── Pro card activation sparkles & thank-you ── */6386button.peach-pro-active-mark-wrap {6387  background: transparent;6388  border: 0;6389  padding: 0;6390  cursor: pointer;6391  position: relative;6392  overflow: visible;6393}63946395.peach-pro-sparks {6396  position: absolute;6397  inset: 0;6398  pointer-events: none;6399  overflow: visible;6400}64016402.peach-pro-spark {6403  position: absolute;6404  top: 50%;6405  left: 50%;6406  font-size: 9px;6407  line-height: 1;6408  opacity: 0;6409  transform: translate(-50%, -50%);6410  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;6411}64126413@keyframes peach-pro-spark-fly {6414  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }6415  25%  { opacity: 1; }6416  100% {6417    opacity: 0;6418    transform: translate(6419      calc(-50% + var(--spark-x, 0px)),6420      calc(-50% + var(--spark-y, -40px))6421    ) scale(0.8);6422  }6423}64246425.peach-pro-thankyou-text {6426  margin: 4px 0 0;6427  font-size: 0.6875rem;6428  font-style: italic;6429  color: currentColor;6430  opacity: 0;6431  animation: peach-pro-thankyou-flash 2.5s ease both;6432}64336434@keyframes peach-pro-thankyou-flash {6435  0%   { opacity: 0; transform: translateY(4px); }6436  15%  { opacity: 0.75; transform: translateY(0); }6437  75%  { opacity: 0.75; }6438  100% { opacity: 0; }6439}64406441/* ── Pro advanced health remediation queue ──────────────────── */6442.peach-health-pro-queue {6443  display: flex;6444  flex-direction: column;6445  gap: 10px;6446  padding: 12px;6447  margin: 0 0 12px;6448  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6449  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6450  border-radius: 10px;6451}64526453.peach-health-pro-queue-head {6454  display: flex;6455  justify-content: space-between;6456  align-items: baseline;6457}64586459.peach-health-pro-queue-title {6460  font-size: 0.75rem;6461  font-weight: 500;6462  letter-spacing: 0.04em;6463  text-transform: uppercase;6464  color: var(--peach-accent);6465}64666467.peach-health-pro-queue-score {6468  font-size: 0.6875rem;6469  color: var(--peach-t2);6470}64716472.peach-health-pro-row {6473  display: flex;6474  gap: 10px;6475  align-items: center;6476  padding: 8px 0;6477  border-top: 1px solid var(--peach-border);6478}64796480.peach-health-pro-row-info {6481  flex: 1;6482  display: flex;6483  flex-direction: column;6484  gap: 4px;6485  min-width: 0;6486}64876488.peach-health-pro-action {6489  flex: 0 0 auto;6490  padding: 4px 8px;6491  font-size: 0.5625rem;6492  letter-spacing: 0.08em;6493  text-transform: uppercase;6494}64956496.peach-health-pro-row-name {6497  font-size: 0.8125rem;6498  color: var(--peach-t0);6499  overflow: hidden;6500  text-overflow: ellipsis;6501  white-space: nowrap;6502}65036504.peach-health-pro-row-meta {6505  font-size: 0.6875rem;6506  color: var(--peach-t2);6507}65086509.peach-health-pro-bar {6510  height: 2px;6511  background: var(--peach-border);6512  border-radius: 2px;6513  overflow: hidden;6514  margin-top: 2px;6515}65166517.peach-health-pro-bar-fill {6518  height: 100%;6519  background: var(--peach-accent);6520  transition: width 200ms ease-out;6521}65226523/* ── Pro activation celebration ── */6524@keyframes peach-pro-bloom {6525  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6526  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6527                 drop-shadow(0 0 48px var(--peach-glow)); }6528  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6529}65306531@keyframes peach-pro-wordmark-in {6532  from { opacity: 0; transform: translateY(4px); }6533  to   { opacity: 1; transform: translateY(0); }6534}65356536@keyframes peach-pro-fade-out {6537  from { opacity: 1; }6538  to   { opacity: 0; }6539}65406541.peach-pro-celebration {6542  background:6543    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6544    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6545    var(--peach-bg);6546  border: 1px solid var(--peach-t3);6547  box-shadow:6548    0 2px 8px rgba(0,0,0,0.55),6549    0 14px 48px rgba(0,0,0,0.7),6550    0 0 0 1px rgba(240,232,216,0.04);6551  overflow: hidden;6552  width: 320px;6553  height: 520px;6554  display: flex;6555  flex-direction: column;6556  align-items: center;6557  justify-content: center;6558  gap: 8px;6559  padding: 32px 24px;6560  text-align: center;6561}65626563.peach-pro-celebration.is-leaving {6564  animation: peach-pro-fade-out 400ms ease forwards;6565}65666567.peach-pro-bloom-target {6568  display: flex;6569  align-items: center;6570  justify-content: center;6571  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6572  margin-bottom: 12px;6573}65746575.peach-pro-bloom-icon {6576  width: 48px;6577  height: 48px;6578}65796580.peach-pro-wordmark {6581  font-family: var(--font-display);6582  font-size: 22px;6583  font-style: italic;6584  font-weight: 400;6585  color: var(--peach-accent);6586  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6587}65886589.peach-pro-thankyou {6590  font-size: 0.75rem;6591  font-style: italic;6592  color: var(--peach-t2);6593  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6594}659565966597/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6598.peach-pro-notice-banner {6599  display: flex;6600  align-items: center;6601  gap: 8px;6602  padding: 7px 12px;6603  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6604  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6605  font-size: 0.6875rem;6606  color: var(--peach-t2);6607  font-family: "IBM Plex Mono", monospace;6608  flex-shrink: 0;6609}66106611.peach-pro-notice-link {6612  background: none;6613  border: none;6614  padding: 0;6615  cursor: pointer;6616  font-size: 0.6875rem;6617  color: var(--peach-accent);6618  font-family: "IBM Plex Mono", monospace;6619  margin-left: auto;6620  white-space: nowrap;6621}66226623.peach-pro-notice-close {6624  background: none;6625  border: none;6626  padding: 0 0 0 4px;6627  cursor: pointer;6628  font-size: 0.625rem;6629  color: var(--peach-t3);6630  line-height: 1;6631}66326633/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6634   Renders over whatever view is showing. 60-second expiry; the popup ticks6635   the countdown each second and clears the banner when it hits zero. */6636.peach-pair-request-banner {6637  display: flex;6638  flex-direction: column;6639  gap: 8px;6640  padding: 10px 12px;6641  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6642  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6643  font-family: "IBM Plex Mono", monospace;6644  flex-shrink: 0;6645}66466647.peach-pair-toast {6648  padding: 8px 12px;6649  font-family: "IBM Plex Mono", monospace;6650  font-size: 0.75rem;6651  color: var(--peach-t1);6652  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6653  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6654  flex-shrink: 0;6655  text-align: center;6656}66576658.peach-pair-toast strong {6659  color: var(--peach-t0);6660  font-weight: 500;6661}66626663.peach-pair-request-header {6664  display: flex;6665  align-items: center;6666  gap: 8px;6667  font-size: 0.75rem;6668  color: var(--peach-t1);6669}66706671.peach-pair-request-mark {6672  font-size: 0.875rem;6673  display: inline-flex;6674  align-items: center;6675}66766677.peach-pair-request-icon {6678  width: 1em;6679  height: 1em;6680}66816682.peach-pair-request-title {6683  font-weight: 600;6684  color: var(--peach-t0);6685}66866687.peach-pair-request-countdown {6688  margin-left: auto;6689  font-variant-numeric: tabular-nums;6690  color: var(--peach-t2);6691  font-size: 0.6875rem;6692}66936694.peach-pair-request-body {6695  margin: 0;6696  font-size: 0.75rem;6697  color: var(--peach-t1);6698  line-height: 1.4;6699}67006701.peach-pair-request-body strong {6702  color: var(--peach-t0);6703  font-weight: 600;6704}67056706.peach-pair-request-actions {6707  display: flex;6708  gap: 8px;6709  justify-content: flex-end;6710}67116712/* ─── First-run onboarding ──────────────────────────────────────────────6713   Three-card welcome shown once before vault creation. The PeachScript6714   rune background drifts behind everything at very low opacity — it's6715   atmosphere, not focus. The cards themselves use the same panel6716   language as the rest of the popup so the transition into NewVault is6717   continuous, not a jarring switch of visual register. */67186719.peach-onboarding {6720  position: relative;6721  display: flex;6722  flex-direction: column;6723  width: 100%;6724  height: 100%;6725  padding: 16px 16px 18px;6726  box-sizing: border-box;6727  overflow: hidden;6728  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6729}67306731.peach-onboarding.is-completing {6732  animation: peach-onboard-exit 200ms ease-out forwards;6733}67346735.peach-rune-background {6736  position: absolute;6737  inset: 0;6738  width: 100%;6739  height: 100%;6740  pointer-events: none;6741  z-index: 0;6742  transition: opacity 500ms ease-out;6743}67446745.peach-onboarding.is-completing .peach-rune-background {6746  opacity: 0;6747}67486749.peach-onboarding-header {6750  position: relative;6751  z-index: 1;6752  display: flex;6753  align-items: center;6754  margin-bottom: 14px;6755}67566757.peach-onboarding-card {6758  position: relative;6759  z-index: 1;6760  flex: 1;6761  display: flex;6762  flex-direction: column;6763  gap: 10px;6764  padding: 22px 20px;6765  border-radius: 16px;6766  border: 1px solid var(--peach-t3);6767  background:6768    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6769  backdrop-filter: blur(3px);6770  -webkit-backdrop-filter: blur(3px);6771  box-shadow:6772    inset 0 1px 0 rgba(240, 232, 216, 0.04),6773    0 12px 28px rgba(0, 0, 0, 0.12);6774  cursor: pointer;6775  user-select: none;6776  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6777}67786779.peach-onboarding-card.is-exiting {6780  animation: peach-card-out 120ms ease-in forwards;6781  pointer-events: none;6782}67836784.peach-onboarding-card-headline {6785  margin: 0;6786  font-family: var(--font-display);6787  font-style: italic;6788  font-weight: 400;6789  font-size: 22px;6790  line-height: 1.05;6791  color: var(--peach-t0);6792  white-space: pre-line;6793}67946795.peach-onboarding-divider {6796  margin: 4px 0 6px;6797  border: 0;6798  border-top: 1px solid var(--peach-t3);6799  width: 100%;6800}68016802.peach-onboarding-body {6803  margin: 0;6804  font-size: 0.8125rem;6805  line-height: 1.6;6806  color: var(--peach-t1);6807}68086809.peach-onboarding-warning {6810  display: flex;6811  align-items: flex-start;6812  gap: 8px;6813  margin: 6px 0 0;6814  padding-top: 8px;6815  border-top: 1px dashed var(--peach-t3);6816  font-size: 0.8125rem;6817  line-height: 1.5;6818  color: var(--peach-t1);6819}68206821.peach-onboarding-warning-icon {6822  color: var(--peach-accent);6823  font-size: 0.8125rem;6824  line-height: 1.5;6825  flex: 0 0 auto;6826}68276828.peach-onboarding-nav {6829  position: relative;6830  z-index: 1;6831  display: flex;6832  align-items: center;6833  justify-content: space-between;6834  margin-top: 12px;6835  padding: 0 4px;6836}68376838.peach-onboarding-dots {6839  display: flex;6840  align-items: center;6841  gap: 6px;6842}68436844.peach-onboarding-dot {6845  width: 6px;6846  height: 6px;6847  border-radius: 50%;6848  background: var(--peach-t2);6849  transition: width 200ms ease, height 200ms ease, background 200ms ease;6850}68516852.peach-onboarding-dot.is-active {6853  width: 8px;6854  height: 8px;6855  background: var(--peach-accent);6856}68576858.peach-onboarding-next {6859  background: none;6860  border: none;6861  padding: 4px 0;6862  cursor: pointer;6863  font-family: "IBM Plex Mono", monospace;6864  font-size: 0.6875rem;6865  letter-spacing: 0.04em;6866  color: var(--peach-t1);6867  transition: color 150ms ease;6868}68696870.peach-onboarding-next:hover {6871  color: var(--peach-t0);6872}68736874.peach-onboarding-next:disabled {6875  opacity: 0.5;6876  cursor: default;6877}68786879.peach-onboarding-back {6880  background: none;6881  border: none;6882  padding: 4px 0;6883  cursor: pointer;6884  font-family: "IBM Plex Mono", monospace;6885  font-size: 0.6875rem;6886  letter-spacing: 0.04em;6887  color: var(--peach-t2);6888  transition: color 150ms ease;6889}68906891.peach-onboarding-back:hover {6892  color: var(--peach-t0);6893}68946895.peach-onboarding-back:disabled {6896  opacity: 0.5;6897  cursor: default;6898}68996900/* Reserve back-button width on the first card so the dots stay centred */6901.peach-onboarding-back-spacer {6902  width: 44px;6903}69046905.peach-onboarding-choice-row {6906  display: grid;6907  grid-template-columns: 1fr;6908  gap: 8px;6909  margin-top: 14px;6910}69116912.peach-onboarding-choice {6913  min-height: 34px;6914  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);6915  border-radius: 8px;6916  padding: 8px 10px;6917  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);6918  color: var(--peach-t0);6919  font-size: 0.76rem;6920  font-weight: 700;6921  text-align: left;6922}69236924.peach-onboarding-choice--adopt {6925  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);6926  background: color-mix(in srgb, var(--peach-accent) 13%, transparent);6927}69286929.peach-adopt-vault {6930  position: relative;6931  min-height: 100%;6932  padding: 22px;6933  display: grid;6934  place-items: center;6935}69366937.peach-adopt-card {6938  position: relative;6939  z-index: 1;6940  width: min(100%, 330px);6941  padding: 20px;6942  border-radius: 8px;6943  border: 1px solid color-mix(in srgb, var(--peach-t0) 13%, transparent);6944  background: color-mix(in srgb, var(--peach-surface) 90%, transparent);6945  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);6946}69476948.peach-adopt-card h1 {6949  margin: 0 0 10px;6950  font-size: 1.28rem;6951  line-height: 1.15;6952}69536954.peach-adopt-card p {6955  margin: 0 0 14px;6956  color: var(--peach-t1);6957  line-height: 1.35;6958}69596960.peach-adopt-input {6961  margin-bottom: 12px;6962}69636964.peach-adopt-card textarea.peach-adopt-input {6965  width: 100%;6966  resize: vertical;6967  overflow-wrap: anywhere;6968  font-family: "IBM Plex Mono", monospace;6969  font-size: 0.64rem;6970}69716972.peach-adopt-qr-video {6973  display: block;6974  width: 100%;6975  max-height: 220px;6976  margin: 0 0 12px;6977  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);6978  border-radius: 8px;6979  background: #000;6980  object-fit: cover;6981}69826983.peach-adoption-source-invitation {6984  display: flex;6985  flex-direction: column;6986  align-items: center;6987  gap: 10px;6988  padding: 4px 18px 16px;6989  text-align: center;6990}69916992.peach-pair-qr {6993  display: block;6994  max-width: min(224px, 100%);6995  height: auto;6996  padding: 8px;6997  border-radius: 10px;6998  background: #fff;6999}70007001/* The same invitation the QR carries, as text — the fallback when a camera7002   won't cooperate. Monospace and full width so it can be read out loud. */7003.peach-pair-invitation-text {7004  width: 100%;7005  resize: none;7006  padding: 8px 10px;7007  border-radius: 10px;7008  border: 1px solid var(--peach-border);7009  background: color-mix(in srgb, var(--peach-t0) 3%, transparent);7010  color: var(--peach-t1);7011  font-family: var(--peach-mono, ui-monospace, SFMono-Regular, Menlo, monospace);7012  font-size: 10px;7013  line-height: 1.5;7014  word-break: break-all;7015}70167017.peach-adopt-card > .peach-btn + .peach-btn {7018  margin-top: 8px;7019}70207021.peach-adopt-actions {7022  display: flex;7023  gap: 10px;7024  margin-top: 14px;7025}70267027.peach-adopt-actions > button {7028  flex: 1;7029}70307031.peach-adopt-birds {7032  width: 120px;7033  height: 54px;7034  margin-bottom: 14px;7035  position: relative;7036}70377038.peach-adopt-birds::before {7039  content: "";7040  position: absolute;7041  left: 29px;7042  right: 29px;7043  top: 25px;7044  height: 1px;7045  background: color-mix(in srgb, var(--peach-accent) 50%, transparent);7046}70477048.peach-adopt-birds span {7049  position: absolute;7050  top: 11px;7051  width: 34px;7052  height: 28px;7053  border-radius: 50% 50% 46% 46%;7054  background: color-mix(in srgb, var(--peach-accent) 45%, var(--peach-t0));7055  box-shadow: 0 0 18px color-mix(in srgb, var(--peach-accent) 24%, transparent);7056  animation: peach-adopt-bob 1.8s ease-in-out infinite;7057}70587059.peach-adopt-birds span:first-child {7060  left: 12px;7061}70627063.peach-adopt-birds span:last-child {7064  right: 12px;7065  animation-delay: 0.25s;7066}70677068.peach-adopt-sas {7069  margin: 18px 0;7070  padding: 14px;7071  border-radius: 8px;7072  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);7073  color: var(--peach-t0);7074  font-size: 1.35rem;7075  font-weight: 800;7076  font-variant-numeric: tabular-nums;7077  text-align: center;7078}70797080@keyframes peach-adopt-bob {7081  0%, 100% { transform: translateY(0); }7082  50% { transform: translateY(-5px); }7083}70847085.peach-onboarding-mobile-card-buttons {7086  display: flex;7087  flex-direction: column;7088  gap: 8px;7089  margin-top: 16px;7090}70917092@keyframes peach-onboard-enter {7093  from { opacity: 0; transform: translateY(20px); }7094  to   { opacity: 1; transform: translateY(0); }7095}70967097@keyframes peach-onboard-exit {7098  from { opacity: 1; }7099  to   { opacity: 0; }7100}71017102@keyframes peach-card-in {7103  from { opacity: 0; transform: translateX(12px); }7104  to   { opacity: 1; transform: translateX(0); }7105}71067107@keyframes peach-card-out {7108  from { opacity: 1; transform: translateX(0); }7109  to   { opacity: 0; transform: translateX(-12px); }7110}71117112/* ─── New vault screen — matched to onboarding card language ─────────── */71137114/* Two classes so this beats the shared .peach-screen.lock-screen--vault-stage7115   rule (same element) without loosening the unlock/restore screens. The7116   create-vault screen is the only vault-stage view tall enough to overflow7117   the 520px popup, so its spacing is tuned to fit header → card → restore →7118   recovery warning with nothing clipped. */7119.peach-screen.peach-newvault {7120  position: relative;7121  display: flex;7122  flex-direction: column;7123  gap: 12px;7124  padding: 14px 16px 12px;7125  overflow: hidden;7126}71277128/* Suppress the warm-blob ambient art inherited from .lock-screen — the7129   new vault card now carries the visual weight. */7130.peach-newvault::before {7131  content: none;7132}71337134.peach-newvault-header {7135  position: relative;7136  z-index: 2;7137  display: flex;7138  align-items: center;7139  gap: 10px;7140  margin-bottom: 2px;7141}71427143.peach-newvault-back {7144  display: inline-flex;7145  align-items: center;7146  gap: 4px;7147  background: transparent;7148  border: none;7149  color: var(--peach-t2);7150  font-family: "IBM Plex Mono", monospace;7151  font-size: 0.625rem;7152  letter-spacing: 0.06em;7153  cursor: pointer;7154  padding: 4px 6px;7155  border-radius: 6px;7156  transition: color 120ms ease, background 120ms ease;7157}71587159.peach-newvault-back:hover {7160  color: var(--peach-t0);7161  background: rgba(240, 232, 216, 0.04);7162}71637164.peach-newvault-mark {7165  position: absolute;7166  right: -12px;7167  top: 6px;7168  width: 110px;7169  height: 110px;7170  pointer-events: none;7171  opacity: 0.10;7172  filter: saturate(0.9);7173  z-index: 0;7174}7175.peach-newvault-mark-art {7176  width: 100%;7177  height: 100%;7178}7179.peach-newvault-mark-art path:nth-child(1) {7180  fill: rgba(123, 144, 96, 0.88);7181}7182.peach-newvault-mark-art path:nth-child(2) {7183  stroke: rgba(94, 122, 66, 0.95);7184}71857186.peach-newvault-card {7187  position: relative;7188  z-index: 1;7189  display: flex;7190  flex-direction: column;7191  gap: 8px;7192  padding: 16px 20px 14px;7193  border-radius: 16px;7194  border: 1px solid var(--peach-t3);7195  background:7196    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));7197  backdrop-filter: blur(3px);7198  -webkit-backdrop-filter: blur(3px);7199  box-shadow:7200    inset 0 1px 0 rgba(240, 232, 216, 0.04),7201    0 12px 28px rgba(0, 0, 0, 0.12);7202  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;7203}72047205.peach-newvault-headline {7206  margin: 0;7207  font-family: var(--font-display);7208  font-style: italic;7209  font-weight: 400;7210  font-size: 24px;7211  line-height: 1.05;7212  color: var(--peach-t0);7213  white-space: pre-line;7214}72157216.peach-newvault-divider {7217  margin: 2px 0 4px;7218  border: 0;7219  border-top: 1px solid var(--peach-t3);7220  width: 100%;7221}72227223.peach-newvault-field {7224  display: flex;7225  flex-direction: column;7226  gap: 4px;7227}72287229.peach-newvault-label-row {7230  display: flex;7231  align-items: center;7232  justify-content: space-between;7233}72347235/* Monospace input scaled to the card. Replaces the 22px unlock-input7236   so the placeholder no longer overflows and the field reads as part7237   of the same surface as the body copy. */7238.peach-newvault-input {7239  font-size: 0.875rem;7240  letter-spacing: 0.18em;7241  padding: 8px 0;7242}7243.peach-newvault-input::placeholder {7244  letter-spacing: 0.18em;7245  color: var(--peach-t2);7246}72477248.peach-newvault-hint {7249  margin: 2px 0 0;7250  font-family: "IBM Plex Mono", monospace;7251  font-size: 0.625rem;7252  color: var(--peach-t2);7253  letter-spacing: 0.04em;7254}72557256.peach-newvault-submit {7257  margin-top: 4px;7258}72597260.peach-newvault-warning {7261  display: flex;7262  align-items: flex-start;7263  gap: 8px;7264  margin: 2px 0 0;7265  padding-top: 8px;7266  border-top: 1px dashed var(--peach-t3);7267  font-size: 0.75rem;7268  line-height: 1.45;7269  color: var(--peach-t1);7270}72717272.peach-newvault-warning-icon {7273  color: var(--peach-accent);7274  font-size: 0.8125rem;7275  line-height: 1.4;7276  flex: 0 0 auto;7277}72787279/* Restore options sit inside the card, directly under "create vault", so7280   they are always reachable without scrolling. The top divider mirrors the7281   warning's so the choice reads as a deliberate fork, not a footnote. */7282.peach-newvault-restore {7283  position: relative;7284  z-index: 1;7285  display: flex;7286  flex-direction: column;7287  gap: 4px;7288  margin-top: 4px;7289  padding-top: 10px;7290  border-top: 1px dashed var(--peach-t3);7291}72927293/* Settings body — warm accent gradient gives the glass something to blur against */7294.peach-settings-body {7295  background:7296    radial-gradient(7297      ellipse at 30% 20%,7298      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7299      transparent 60%7300    );7301}73027303/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7304/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7305 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7306 * (replacing the vault from a backup file) and "hazard" for actions that7307 * are absolutely irreversible (Panic). Both use the same card scaffold so7308 * they read as a pair, but the colour family signals the severity at a7309 * glance — yellow for caution, red for don't.7310 */7311.peach-danger-card {7312  --danger-tint: 235, 158, 52; /* amber */7313  display: flex;7314  flex-direction: column;7315  gap: 8px;7316  padding: 14px;7317  margin-top: 10px;7318  border-radius: 12px;7319  border: 1px solid rgba(var(--danger-tint), 0.32);7320  background:7321    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7322    rgba(var(--danger-tint), 0.04);7323  box-shadow:7324    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7325    0 0 24px rgba(var(--danger-tint), 0.04);7326  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7327}73287329.peach-danger-card:hover {7330  border-color: rgba(var(--danger-tint), 0.55);7331  box-shadow:7332    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7333    0 0 36px rgba(var(--danger-tint), 0.10);7334}73357336.peach-danger-card--hazard {7337  --danger-tint: 220, 38, 38; /* red */7338}73397340.peach-danger-card-head {7341  display: flex;7342  align-items: center;7343  gap: 10px;7344}73457346.peach-danger-card-glyph {7347  width: 28px;7348  height: 28px;7349  flex-shrink: 0;7350  display: flex;7351  align-items: center;7352  justify-content: center;7353  border-radius: 8px;7354  background: rgba(var(--danger-tint), 0.12);7355  color: rgba(var(--danger-tint), 0.95);7356  font-size: 1rem;7357  line-height: 1;7358}73597360.peach-danger-card-title {7361  margin: 0;7362  font-size: 0.8125rem;7363  font-weight: 600;7364  color: rgba(var(--danger-tint), 0.92);7365  letter-spacing: 0.01em;7366}73677368.peach-danger-card-copy {7369  margin: 0;7370  font-size: 0.6875rem;7371  line-height: 1.5;7372  color: var(--peach-t2);7373}73747375.peach-danger-card-button {7376  width: 100%;7377  padding: 9px;7378  margin-top: 4px;7379  background: transparent;7380  border: 1px solid rgba(var(--danger-tint), 0.45);7381  border-radius: 8px;7382  color: rgba(var(--danger-tint), 0.9);7383  font-size: 0.75rem;7384  font-weight: 500;7385  letter-spacing: 0.02em;7386  cursor: pointer;7387  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7388}73897390.peach-danger-card-button:hover {7391  background: rgba(var(--danger-tint), 0.10);7392  border-color: rgba(var(--danger-tint), 0.75);7393  color: rgb(var(--danger-tint));7394}73957396.peach-adoption-consent-backdrop {7397  position: fixed;7398  inset: 0;7399  z-index: 1000;7400  display: grid;7401  place-items: center;7402  padding: 18px;7403  background: rgba(15, 10, 5, 0.72);7404}74057406.peach-adoption-consent {7407  width: min(100%, 340px);7408  border: 1px solid color-mix(in srgb, #f59e0b 54%, var(--peach-border));7409  border-radius: 8px;7410  padding: 18px;7411  background: color-mix(in srgb, #2c1b08 84%, var(--peach-surface));7412  color: var(--peach-t0);7413  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42);7414}74157416.peach-adoption-consent-icon {7417  width: 32px;7418  height: 32px;7419  display: grid;7420  place-items: center;7421  border-radius: 50%;7422  background: #f59e0b;7423  color: #1f1304;7424  font-weight: 800;7425}74267427.peach-adoption-consent h2 {7428  margin: 12px 0 8px;7429  font-size: 1.22rem;7430  line-height: 1.15;7431}74327433.peach-adoption-consent-device,7434.peach-adoption-consent-warning {7435  margin: 0 0 12px;7436  color: var(--peach-t1);7437  line-height: 1.35;7438}74397440.peach-adoption-consent-device strong {7441  color: var(--peach-t0);7442}74437444.peach-adoption-consent-warning {7445  color: #ffd79a;7446}74477448.peach-adoption-consent-sas {7449  display: flex;7450  justify-content: space-between;7451  align-items: center;7452  gap: 12px;7453  margin: 14px 0;7454  padding: 10px;7455  border-radius: 6px;7456  background: rgba(245, 158, 11, 0.12);7457}74587459/* Tracking, not interleaved spaces: eight digits with per-digit spaces no7460   longer fit beside the label at 320px. */7461.peach-adoption-consent-sas strong {7462  font-variant-numeric: tabular-nums;7463  letter-spacing: 0.18em;7464  white-space: nowrap;7465}74667467.peach-adoption-consent-actions {7468  display: flex;7469  justify-content: space-between;7470  gap: 10px;7471  margin-top: 16px;7472}74737474.peach-adoption-consent-actions > button {7475  flex: 1;7476}74777478/* ── Panic flow (three-step destruction) ───────────────────────────────── */7479.peach-panic {7480  display: flex;7481  flex-direction: column;7482  flex: 1;7483  min-height: 0;7484  padding: 28px 20px 20px;7485  gap: 18px;7486  overflow-y: auto;7487  scrollbar-width: none;7488  -ms-overflow-style: none;7489}74907491.peach-panic::-webkit-scrollbar { display: none; }74927493.peach-panic-step2 {7494  background: rgba(220, 38, 38, 0.04);7495}74967497.peach-panic-step3 {7498  position: relative;7499  background: #0f0505;7500  color: #ffffff;7501  overflow: hidden;7502}75037504.peach-panic-rune-bg {7505  position: absolute;7506  inset: 0;7507  opacity: 0.22;7508  pointer-events: none;7509  overflow: hidden;7510}75117512.peach-panic-rune-bg canvas {7513  width: 100% !important;7514  height: 100% !important;7515}75167517.peach-panic-icon {7518  font-size: 32px;7519  color: rgb(220, 38, 38);7520  line-height: 1;7521}75227523.peach-panic-title {7524  margin: 0;7525  font-size: 18px;7526  font-weight: 500;7527  color: var(--peach-t1);7528}75297530.peach-panic-title--severe {7531  font-size: 20px;7532  font-weight: 700;7533  color: rgb(220, 38, 38);7534}75357536.peach-panic-body {7537  margin: 0;7538  font-size: 0.8125rem;7539  line-height: 1.55;7540  color: var(--peach-t2);7541}75427543.peach-panic-body--severe {7544  color: rgba(220, 38, 38, 0.85);7545}75467547.peach-panic-body--final {7548  font-size: 1rem;7549  font-weight: 700;7550  color: rgb(255, 80, 80);7551  line-height: 1.4;7552}75537554.peach-panic-body--final-intro {7555  font-size: 1rem;7556  color: #ffffff;7557  font-weight: 400;7558}75597560.peach-panic-divider {7561  height: 1px;7562  background: rgba(255, 255, 255, 0.08);7563  margin: 4px 0;7564}75657566.peach-panic-confirm-input {7567  width: 100%;7568  padding: 10px 12px;7569  background: rgba(255, 255, 255, 0.02);7570  border: 1px solid rgba(220, 38, 38, 0.4);7571  border-radius: 8px;7572  color: var(--peach-t1);7573  font-family: "IBM Plex Mono", monospace;7574  font-size: 0.875rem;7575  letter-spacing: 0.12em;7576  text-transform: uppercase;7577}75787579.peach-panic-confirm-input:focus {7580  outline: none;7581  border-color: rgb(220, 38, 38);7582}75837584.peach-panic-confirm-input--match {7585  border-color: rgb(220, 38, 38);7586  color: rgb(220, 38, 38);7587}75887589.peach-panic-confirm-label {7590  font-size: 0.6875rem;7591  color: var(--peach-t2);7592  margin: 0 0 -8px;7593  letter-spacing: 0.06em;7594}75957596.peach-panic-actions {7597  display: flex;7598  flex-direction: column;7599  gap: 10px;7600  margin-top: auto;7601}76027603.peach-panic-button {7604  width: 100%;7605  padding: 12px;7606  border-radius: 8px;7607  font-size: 0.8125rem;7608  cursor: pointer;7609  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7610}76117612.peach-panic-button--primary {7613  background: var(--peach-accent);7614  border: 1px solid var(--peach-accent);7615  color: #ffffff;7616  font-weight: 600;7617}76187619.peach-panic-button--primary:hover {7620  background: color-mix(in srgb, var(--peach-accent) 88%, white);7621}76227623.peach-panic-button--danger {7624  background: rgb(220, 38, 38);7625  border: 1px solid rgb(220, 38, 38);7626  color: #ffffff;7627  font-weight: 600;7628}76297630.peach-panic-button--danger:disabled {7631  opacity: 0.35;7632  cursor: not-allowed;7633}76347635.peach-panic-button--ghost {7636  background: transparent;7637  border: 1px solid rgba(255, 255, 255, 0.18);7638  color: var(--peach-t2);7639}76407641.peach-panic-button--ghost:hover {7642  border-color: rgba(255, 255, 255, 0.32);7643  color: var(--peach-t1);7644}76457646.peach-panic-link {7647  background: transparent;7648  border: none;7649  padding: 4px 0;7650  color: rgba(220, 38, 38, 0.65);7651  font-size: 0.75rem;7652  cursor: pointer;7653  text-align: left;7654  text-decoration: underline;7655  text-underline-offset: 3px;7656}76577658.peach-panic-link:hover {7659  color: rgb(220, 38, 38);7660}76617662.peach-panic-bar {7663  background: rgb(220, 38, 38);7664  padding: 16px 20px;7665  margin: -28px -20px 0;7666  text-align: center;7667  font-size: 0.8125rem;7668  font-weight: 700;7669  letter-spacing: 0.12em;7670  color: #ffffff;7671}76727673.peach-panic-final-button {7674  width: 100%;7675  padding: 14px;7676  background: rgb(220, 38, 38);7677  border: none;7678  border-radius: 8px;7679  color: #ffffff;7680  font-size: 0.875rem;7681  font-weight: 700;7682  letter-spacing: 0.08em;7683  text-transform: uppercase;7684  cursor: pointer;7685  animation: peach-panic-pulse 2s ease-in-out infinite;7686}76877688.peach-settings-license {7689  margin-top: 10px;7690  padding-top: 10px;7691  border-top: 1px solid var(--peach-t3);7692}76937694.peach-settings-label {7695  font-size: 0.625rem;7696  letter-spacing: 0.08em;7697  color: var(--peach-t3);7698  display: block;7699  margin-bottom: 6px;7700}77017702.peach-settings-license-row {7703  display: flex;7704  align-items: center;7705  justify-content: space-between;7706  gap: 8px;7707}77087709.peach-settings-license-key {7710  font-family: 'IBM Plex Mono', monospace;7711  font-size: 0.75rem;7712  color: var(--peach-t0);7713  letter-spacing: 0.04em;7714  word-break: break-all;7715  flex: 1;7716  min-width: 0;7717}77187719.peach-settings-license-key--masked {7720  font-family: 'IBM Plex Mono', monospace;7721  font-size: 0.6rem;7722  color: var(--peach-t1);7723  letter-spacing: 0.18em;7724  user-select: none;7725}77267727.peach-settings-license-actions {7728  display: flex;7729  align-items: center;7730  gap: 2px;7731  flex-shrink: 0;7732}77337734.peach-settings-license-copy {7735  font-size: 0.6875rem;7736  color: var(--peach-accent);7737  background: transparent;7738  border: none;7739  cursor: pointer;7740  padding: 4px 8px;7741  border-radius: 4px;7742  flex-shrink: 0;7743  transition: opacity 150ms ease;7744}77457746.peach-settings-license-copy:hover {7747  opacity: 0.75;7748}77497750.peach-settings-license-toggle {7751  display: flex;7752  align-items: center;7753  justify-content: center;7754  background: transparent;7755  border: none;7756  cursor: pointer;7757  padding: 4px 6px;7758  border-radius: 4px;7759  color: var(--peach-t2);7760  transition: color 150ms ease;7761}77627763.peach-settings-license-toggle:hover {7764  color: var(--peach-t1);7765}77667767@keyframes peach-panic-pulse {7768  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7769  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7770}77717772[data-motion="reduce"] .peach-panic-final-button {7773  animation: none;7774}77757776/* Vault History — Settings → Vault sub-view */77777778.peach-history-list {7779  border: 1px solid var(--peach-border);7780  border-radius: 8px;7781  overflow: hidden;7782  margin: 8px 0 4px;7783}77847785.peach-history-row {7786  display: flex;7787  align-items: center;7788  justify-content: space-between;7789  padding: 9px 12px;7790  gap: 10px;7791  border-bottom: 1px solid var(--peach-border);7792}77937794.peach-history-row:last-child {7795  border-bottom: none;7796}77977798.peach-history-meta {7799  display: flex;7800  flex-direction: column;7801  gap: 2px;7802  min-width: 0;7803  flex: 1;7804}78057806.peach-history-time {7807  font-size: 0.75rem;7808  font-family: 'IBM Plex Mono', ui-monospace, monospace;7809  color: var(--peach-t0);7810  white-space: nowrap;7811  overflow: hidden;7812  text-overflow: ellipsis;7813}78147815.peach-history-sub {7816  font-size: 0.625rem;7817  color: var(--peach-t2);7818  letter-spacing: 0.06em;7819  text-transform: uppercase;7820  white-space: nowrap;7821  overflow: hidden;7822  text-overflow: ellipsis;7823}78247825.peach-history-btn {7826  flex-shrink: 0;7827  white-space: nowrap;7828  min-width: 56px;7829  text-align: center;7830}78317832.peach-history-btn.is-busy {7833  opacity: 0.65;7834}78357836.peach-history-footer {7837  font-size: 0.625rem;7838  color: var(--peach-t3);7839  letter-spacing: 0.05em;7840  text-align: right;7841  margin: 0;7842  padding: 2px 0 0;7843}78447845/* ── Context menu + swipe-copy flash ─────────────────────── */7846.peach-context-menu-backdrop {7847  position: fixed;7848  inset: 0;7849  background: rgba(0, 0, 0, 0.45);7850  z-index: 100;7851  display: flex;7852  align-items: flex-end;7853  justify-content: center;7854  animation: peach-ctx-fade 140ms ease both;7855}7856.peach-context-menu {7857  width: min(360px, calc(100vw - 24px));7858  margin-bottom: max(env(safe-area-inset-bottom), 12px);7859  background: var(--peach-bg);7860  border: 1px solid var(--peach-t3);7861  border-radius: 14px;7862  padding: 6px;7863  display: flex;7864  flex-direction: column;7865  gap: 2px;7866  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7867  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7868}7869@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7870@keyframes peach-ctx-rise {7871  from { transform: translateY(16px); opacity: 0; }7872  to   { transform: translateY(0);    opacity: 1; }7873}7874.peach-context-menu-item {7875  background: transparent;7876  color: var(--peach-t0);7877  border: 0;7878  border-radius: 10px;7879  padding: 12px 14px;7880  text-align: left;7881  font: inherit;7882  cursor: pointer;7883}7884.peach-context-menu-item:hover,7885.peach-context-menu-item:focus-visible {7886  background: var(--peach-t3);7887}7888.peach-context-menu-item--danger {7889  color: var(--peach-health-bad, #d96868);7890}7891.peach-context-menu-item--cancel {7892  color: var(--peach-t2);7893  margin-top: 4px;7894  border-top: 1px solid var(--peach-t3);7895  border-radius: 0 0 10px 10px;7896}78977898/* Swipe-to-copy flash */7899.peach-entry-row.is-copy-flash {7900  animation: peach-copy-flash 600ms ease both;7901}7902@keyframes peach-copy-flash {7903  0%   { background: transparent; }7904  20%  { background: rgba(217, 153, 51, 0.32); }7905  100% { background: transparent; }7906}79077908html { font-size: 16px; }79097910/* ── Recovery word entry ─────────────────────────────────────────── */7911.peach-lock-recover-link {7912  display: block;7913  width: 100%;7914  margin-top: 12px;7915  background: none;7916  border: none;7917  font-family: "IBM Plex Mono", monospace;7918  font-size: 0.625rem;7919  letter-spacing: 0.06em;7920  color: var(--peach-t2);7921  cursor: pointer;7922  text-align: center;7923  padding: 4px;7924  transition: color 120ms ease;7925}7926.peach-lock-recover-link:hover {7927  color: var(--peach-t0);7928}79297930.lock-screen--recovery {7931  display: flex;7932  flex-direction: column;7933  align-items: stretch;7934  padding: 12px 20px 24px;7935  overflow: hidden;7936}79377938.peach-recovery-nav {7939  display: flex;7940  align-items: center;7941  position: relative;7942  z-index: 1;7943  margin-bottom: 4px;7944}79457946/* Mask runes to the top decorative band only — keep inputs and the7947   bottom CTA button clear. The bottom of the popup is reserved for7948   submit buttons; rendering runes there overlaps the button glyph. */7949.peach-rune-background--recovery {7950  -webkit-mask-image: linear-gradient(7951    to bottom,7952    black 0px, black 85px,7953    transparent 110px,7954    transparent 100%7955  );7956  mask-image: linear-gradient(7957    to bottom,7958    black 0px, black 85px,7959    transparent 110px,7960    transparent 100%7961  );7962}79637964.peach-recovery-header {7965  text-align: center;7966  margin-bottom: 16px;7967  margin-top: 4px;7968}7969.peach-recovery-header .peach-onboarding-headline {7970  font-size: 1.25rem;7971  font-weight: 300;7972  letter-spacing: 0.02em;7973  margin: 0 0 4px;7974}7975.peach-recovery-header .peach-hint {7976  font-family: "IBM Plex Mono", monospace;7977  font-size: 0.625rem;7978  color: var(--peach-t2);7979  letter-spacing: 0.04em;7980  margin: 0;7981}79827983/* 12-word grid: 2 columns × 6 rows */7984.peach-recovery-grid {7985  display: grid;7986  grid-template-columns: repeat(2, 1fr);7987  gap: 12px 20px;7988  width: 100%;7989  margin-bottom: 0;7990}79917992.peach-recovery-word-slot {7993  display: flex;7994  align-items: center;7995  gap: 6px;7996  min-width: 0;7997}79987999.peach-recovery-word-index {8000  font-family: "IBM Plex Mono", monospace;8001  font-size: 0.5rem;8002  color: rgba(255, 255, 255, 0.35);8003  min-width: 14px;8004  flex-shrink: 0;8005  text-align: right;8006  letter-spacing: 0.04em;8007}80088009.peach-recovery-word-input {8010  flex: 1;8011  min-width: 0;8012  background: transparent;8013  border: none;8014  border-bottom: 1px solid rgba(255, 255, 255, 0.22);8015  color: var(--peach-t0);8016  font-family: "IBM Plex Mono", monospace;8017  font-size: 0.6875rem;8018  letter-spacing: 0.06em;8019  padding: 5px 2px 4px;8020  outline: none;8021  text-transform: lowercase;8022  transition: border-color 120ms ease;8023}8024.peach-recovery-word-input::placeholder {8025  color: rgba(255, 255, 255, 0.18);8026}8027.peach-recovery-word-input:focus {8028  border-bottom-color: var(--peach-accent);8029}80308031.peach-recovery-submit {8032  width: 100%;8033  margin-top: auto;8034}80358036.peach-recovery-new-password-form {8037  width: 100%;8038  display: flex;8039  flex-direction: column;8040  gap: 16px;8041  margin-bottom: 8px;8042}8043.peach-recovery-new-password-form .peach-newvault-field {8044  display: flex;8045  flex-direction: column;8046  gap: 4px;8047}80488049/* ── Recovery words display (post-create) ────────────────────────── */8050.lock-screen--recovery-display {8051  display: flex;8052  flex-direction: column;8053  align-items: stretch;8054  padding: 0 20px 20px;8055  min-height: 0;8056  overflow-y: auto;8057}80588059.peach-recovery-words-display {8060  width: 100%;8061  margin-bottom: 16px;8062  border: 1px solid var(--peach-t3);8063  border-radius: 8px;8064  padding: 12px 14px;8065  background: rgba(245, 240, 234, 0.04);8066}80678068.peach-recovery-words-label {8069  font-family: "IBM Plex Mono", monospace;8070  font-size: 0.5rem;8071  letter-spacing: 0.08em;8072  color: var(--peach-t2);8073  text-transform: uppercase;8074  margin-bottom: 10px;8075}80768077.peach-recovery-word-list {8078  list-style: none;8079  margin: 0;8080  padding: 0;8081  display: grid;8082  grid-template-columns: repeat(2, 1fr);8083  gap: 6px 16px;8084}80858086.peach-recovery-word-item {8087  display: flex;8088  align-items: baseline;8089  gap: 5px;8090}80918092.peach-recovery-word-num {8093  font-family: "IBM Plex Mono", monospace;8094  font-size: 0.5rem;8095  color: var(--peach-t2);8096  width: 14px;8097  flex: 0 0 14px;8098  text-align: right;8099  letter-spacing: 0.04em;8100  font-variant-numeric: tabular-nums;8101}81028103.peach-recovery-download-btn {8104  display: block;8105  margin: 10px auto 0;8106  padding: 4px 10px;8107  background: transparent;8108  border: 1px solid var(--peach-border);8109  border-radius: 6px;8110  color: var(--peach-t2);8111  font-family: "IBM Plex Mono", monospace;8112  font-size: 0.5625rem;8113  letter-spacing: 0.06em;8114  text-transform: lowercase;8115  cursor: pointer;8116  transition: border-color 0.15s, color 0.15s;8117}81188119.peach-recovery-download-btn:hover {8120  border-color: var(--peach-accent);8121  color: var(--peach-t0);8122}81238124.peach-recovery-word-text {8125  font-family: "IBM Plex Mono", monospace;8126  font-size: 0.6875rem;8127  letter-spacing: 0.06em;8128  color: var(--peach-t0);8129  text-transform: lowercase;8130}81318132.peach-hint--warning {8133  color: var(--peach-accent);8134  font-style: italic;8135}8136.peach-hint--success {8137  color: var(--peach-t2);8138  font-family: "IBM Plex Mono", monospace;8139  font-size: 0.625rem;8140  letter-spacing: 0.06em;8141}81428143/* Confirmation step */8144.peach-recovery-confirm {8145  width: 100%;8146  flex: 1;8147  display: flex;8148  flex-direction: column;8149}8150.peach-recovery-confirm-label {8151  font-family: "IBM Plex Mono", monospace;8152  font-size: 0.5625rem;8153  letter-spacing: 0.04em;8154  color: var(--peach-t2);8155  text-align: center;8156  margin: 0 0 12px;8157}8158.peach-recovery-confirm-fields {8159  display: flex;8160  flex-direction: column;8161  gap: 14px;8162  margin-bottom: 10px;8163}8164.peach-recovery-confirm-field {8165  display: flex;8166  align-items: center;8167  gap: 8px;8168}8169.peach-recovery-confirm-num {8170  font-family: "IBM Plex Mono", monospace;8171  font-size: 0.5rem;8172  color: var(--peach-t2);8173  min-width: 44px;8174  letter-spacing: 0.04em;8175}8176.peach-recovery-confirm-input {8177  flex: 1;8178  background: transparent;8179  border: none;8180  border-bottom: 1px solid var(--peach-t3);8181  color: var(--peach-t0);8182  font-family: "IBM Plex Mono", monospace;8183  font-size: 0.6875rem;8184  letter-spacing: 0.06em;8185  padding: 4px 2px 3px;8186  outline: none;8187  text-transform: lowercase;8188  transition: border-color 120ms ease;8189}8190.peach-recovery-confirm-input:focus {8191  border-bottom-color: var(--peach-accent);8192}8193.peach-recovery-confirm-input:disabled {8194  opacity: 0.4;8195  cursor: not-allowed;8196}8197.peach-recovery-confirm-btn {8198  width: 100%;8199  margin-top: auto;8200}82018202/* ============================================================8203   Sync info sheet8204   ============================================================ */82058206.peach-sync-info-backdrop {8207  position: fixed;8208  inset: 0;8209  z-index: 200;8210  background: rgba(0, 0, 0, 0.55);8211  display: flex;8212  align-items: flex-end;8213  animation: peach-fade-in 200ms ease forwards;8214}82158216@keyframes peach-fade-in {8217  from { opacity: 0; }8218  to   { opacity: 1; }8219}82208221.peach-sync-info-sheet {8222  width: 100%;8223  background: var(--peach-bg-card, var(--peach-bg));8224  border-top-left-radius: 20px;8225  border-top-right-radius: 20px;8226  padding: 12px 24px 32px;8227  display: flex;8228  flex-direction: column;8229  gap: 20px;8230  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;8231}82328233@keyframes peach-sheet-up {8234  from { transform: translateY(100%); }8235  to   { transform: translateY(0); }8236}82378238.peach-sync-info-handle {8239  width: 36px;8240  height: 4px;8241  border-radius: 2px;8242  background: var(--peach-border);8243  margin: 0 auto 4px;8244  flex-shrink: 0;8245}82468247.peach-sync-info-title {8248  font-family: 'Cormorant Garamond', serif;8249  font-style: italic;8250  font-size: 26px;8251  font-weight: 600;8252  color: var(--peach-t0);8253  margin: 0;8254  line-height: 1.2;8255}82568257.peach-sync-info-body {8258  display: flex;8259  flex-direction: column;8260  gap: 14px;8261}82628263.peach-sync-info-point {8264  display: flex;8265  gap: 12px;8266  align-items: flex-start;8267  font-size: 14px;8268  color: var(--peach-t2);8269  line-height: 1.6;8270  margin: 0;8271}82728273.peach-sync-info-icon {8274  color: var(--peach-accent);8275  font-size: 16px;8276  flex-shrink: 0;8277  margin-top: 1px;8278}82798280.peach-sync-info-actions {8281  display: flex;8282  flex-direction: column;8283  gap: 12px;8284  margin-top: 4px;8285}82868287.peach-sync-info-pro-link {8288  background: none;8289  border: none;8290  font-size: 13px;8291  color: var(--peach-t3);8292  cursor: pointer;8293  padding: 0;8294  font-family: inherit;8295  text-align: center;8296  transition: color 150ms ease;8297}82988299.peach-sync-info-pro-link:hover {8300  color: var(--peach-accent);8301}83028303.peach-btn--full {8304  width: 100%;8305}83068307/* ── Sync screen ── */83088309.peach-sync-coming-soon {8310  display: flex;8311  align-items: flex-start;8312  gap: 10px;8313  padding: 12px 14px;8314  background: var(--peach-s1);8315  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8316  border-radius: 10px;8317}8318.peach-sync-coming-soon__icon {8319  flex-shrink: 0;8320  color: var(--peach-accent);8321  margin-top: 1px;8322  line-height: 0;8323}8324.peach-sync-coming-soon__title {8325  font-family: 'Cormorant Garamond', serif;8326  font-weight: 500;8327  font-size: 13px;8328  color: var(--peach-accent);8329  margin: 0 0 5px;8330  line-height: 1.3;8331}8332.peach-sync-coming-soon__body {8333  font-size: 12px;8334  color: var(--peach-t1);8335  line-height: 1.55;8336  margin: 0;8337}83388339.peach-sync-screen {8340  display: flex;8341  flex-direction: column;8342  height: 100%;8343}83448345.peach-sync-content {8346  flex: 1;8347  overflow-y: auto;8348  padding: 24px 20px 40px;8349  display: flex;8350  flex-direction: column;8351  gap: 24px;8352}83538354/* Intro (State A) */8355.peach-sync-headline {8356  font-family: 'Cormorant Garamond', serif;8357  font-style: italic;8358  font-size: 28px;8359  font-weight: 600;8360  color: var(--peach-t0);8361  margin: 0 0 10px;8362  line-height: 1.2;8363}83648365.peach-sync-intro-body {8366  font-size: 14px;8367  color: var(--peach-t1);8368  line-height: 1.6;8369  margin: 0;8370}83718372.peach-sync-pro-note {8373  display: flex;8374  flex-direction: column;8375  gap: 8px;8376  background: var(--peach-t3);8377  border-radius: 10px;8378  padding: 12px 14px;8379}83808381.peach-sync-pro-note-text {8382  font-size: 12px;8383  color: var(--peach-t2);8384  line-height: 1.5;8385  margin: 0;8386}83878388.peach-sync-pro-link {8389  background: none;8390  border: none;8391  font-size: 12px;8392  color: var(--peach-accent);8393  cursor: pointer;8394  padding: 0;8395  font-family: inherit;8396  text-align: left;8397}83988399/* Status (State C) */8400.peach-sync-status {8401  padding: 12px 0;8402  border-bottom: 1px solid var(--peach-border);8403}84048405.peach-sync-status-row {8406  display: flex;8407  align-items: center;8408  gap: 8px;8409}84108411.peach-sync-dot {8412  width: 7px;8413  height: 7px;8414  border-radius: 50%;8415  flex-shrink: 0;8416}84178418.peach-sync-dot--green { background: var(--peach-health-ok); }8419.peach-sync-dot--amber { background: var(--peach-accent); }84208421.peach-sync-status-text {8422  font-family: 'IBM Plex Mono', monospace;8423  font-size: 11px;8424  color: var(--peach-t2);8425}84268427/* Paired devices */8428.peach-sync-section {8429  display: flex;8430  flex-direction: column;8431  gap: 2px;8432}84338434.peach-sync-section-label {8435  font-family: 'IBM Plex Mono', monospace;8436  font-size: 10px;8437  letter-spacing: 0.1em;8438  color: var(--peach-t3);8439  margin: 0 0 10px;8440}84418442.peach-sync-device-row {8443  display: flex;8444  justify-content: space-between;8445  align-items: baseline;8446  padding: 10px 0;8447  border-bottom: 1px solid var(--peach-border);8448  gap: 12px;8449}84508451.peach-sync-device-name {8452  font-size: 14px;8453  color: var(--peach-t1);8454}84558456.peach-sync-device-meta {8457  font-family: 'IBM Plex Mono', monospace;8458  font-size: 11px;8459  color: var(--peach-t3);8460  white-space: nowrap;8461}84628463.peach-sync-hub-note {8464  padding: 14px 16px;8465  border: 1px solid var(--peach-border);8466  border-radius: 10px;8467  display: flex;8468  flex-direction: column;8469  gap: 6px;8470  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8471}84728473.peach-sync-hub-note-title {8474  font-size: 13px;8475  font-weight: 600;8476  color: var(--peach-t0);8477  margin: 0;8478}84798480.peach-sync-hub-note-body {8481  font-size: 12px;8482  color: var(--peach-t2);8483  line-height: 1.6;8484  margin: 0;8485}84868487/* Action buttons */8488.peach-sync-actions {8489  display: flex;8490  gap: 10px;8491  flex-wrap: wrap;8492}84938494/* Upgrade prompt (State B) */8495.peach-sync-upgrade {8496  display: flex;8497  flex-direction: column;8498  gap: 12px;8499  padding: 16px;8500  border: 1px solid var(--peach-border);8501  border-radius: 10px;8502}85038504.peach-sync-upgrade-text {8505  font-size: 13px;8506  color: var(--peach-t2);8507  line-height: 1.6;8508  margin: 0;8509}85108511/* Network note */8512.peach-sync-network-note {8513  font-size: 12px;8514  color: var(--peach-t3);8515  line-height: 1.6;8516  margin: 0;8517}85188519/* Advanced */8520.peach-sync-advanced {8521  margin-top: auto;8522  padding-top: 16px;8523  border-top: 1px solid var(--peach-border);8524}85258526.peach-sync-advanced-toggle {8527  display: flex;8528  align-items: center;8529  gap: 8px;8530  background: none;8531  border: none;8532  font-family: 'IBM Plex Mono', monospace;8533  font-size: 11px;8534  letter-spacing: 0.08em;8535  color: var(--peach-t3);8536  cursor: pointer;8537  padding: 0;8538  text-transform: uppercase;8539}85408541.peach-sync-advanced-chevron {8542  display: inline-block;8543  transition: transform 200ms ease;8544  font-size: 10px;8545}85468547.peach-sync-advanced-chevron.is-open {8548  transform: rotate(90deg);8549}85508551.peach-sync-advanced-content {8552  margin-top: 14px;8553}85548555.peach-sync-advanced-row {8556  display: flex;8557  justify-content: space-between;8558  align-items: center;8559  gap: 16px;8560}85618562.peach-sync-advanced-title {8563  font-size: 14px;8564  color: var(--peach-t1);8565  margin: 0 0 2px;8566}85678568.peach-sync-advanced-subtitle {8569  font-size: 12px;8570  color: var(--peach-t3);8571  margin: 0;8572  line-height: 1.5;8573}85748575/* ── Notes Mode ── */85768577/* Overlay that crossfades over the vault */8578.peach-notes-overlay {8579  position: fixed;8580  inset: 0;8581  z-index: 90;8582  opacity: 0;8583  pointer-events: none;8584  animation: peach-mode-in 220ms ease-in forwards;8585}85868587.peach-notes-overlay.is-visible {8588  opacity: 1;8589  pointer-events: auto;8590}85918592@keyframes peach-mode-in {8593  from { opacity: 0; }8594  to   { opacity: 1; }8595}85968597/* Top-level notes surface */8598.peach-notes-mode {8599  position: absolute;8600  inset: 0;8601  background: var(--peach-bg);8602  display: flex;8603  flex-direction: column;8604}86058606/* Rune canvas positioned behind content */8607.peach-note-rune-canvas {8608  position: absolute;8609  inset: 0;8610  width: 100%;8611  height: 100%;8612  pointer-events: none;8613  z-index: 0;8614}86158616/* TOC wrapper */8617.peach-notes-toc-wrapper {8618  position: absolute;8619  inset: 0;8620  z-index: 1;8621  opacity: 1;8622  pointer-events: auto;8623  transition: opacity 200ms ease;8624}86258626.peach-notes-toc-wrapper.is-hidden {8627  opacity: 0;8628  pointer-events: none;8629}86308631/* Editor wrapper */8632.peach-notes-editor-wrapper {8633  position: absolute;8634  inset: 0;8635  z-index: 2;8636  opacity: 0;8637  pointer-events: none;8638  transition: opacity 200ms ease;8639}86408641.peach-notes-editor-wrapper.is-visible {8642  opacity: 1;8643  pointer-events: auto;8644}86458646/* TOC inner */8647.peach-notes-toc {8648  position: relative;8649  display: flex;8650  flex-direction: column;8651  height: 100%;8652  padding-top: env(safe-area-inset-top, 0px);8653  padding-bottom: env(safe-area-inset-bottom, 0px);8654}86558656/* Shared header */8657.peach-notes-header {8658  display: flex;8659  align-items: center;8660  padding: 12px 16px;8661  gap: 12px;8662  flex-shrink: 0;8663  min-height: 52px;8664  position: relative;8665  z-index: 2;8666}86678668.peach-notes-back {8669  font-size: 22px;8670  color: var(--peach-t2);8671  background: none;8672  border: none;8673  padding: 4px;8674  cursor: pointer;8675  line-height: 1;8676  flex-shrink: 0;8677  transition: color 150ms ease;8678  -webkit-tap-highlight-color: transparent;8679}86808681.peach-notes-back:active { color: var(--peach-t0); }86828683.peach-notes-header-title {8684  flex: 1;8685  font-family: 'Cormorant Garamond', serif;8686  font-style: italic;8687  font-size: 22px;8688  color: var(--peach-t0);8689  text-align: center;8690}86918692.peach-notes-header-title.is-breadcrumb {8693  font-family: 'IBM Plex Mono', monospace;8694  font-style: normal;8695  font-size: 11px;8696  color: var(--peach-t3);8697  letter-spacing: 0.08em;8698  text-transform: uppercase;8699  cursor: pointer;8700}87018702.peach-notes-header-actions {8703  display: flex;8704  gap: 8px;8705  flex-shrink: 0;8706}87078708.peach-notes-header-btn {8709  width: 36px;8710  height: 36px;8711  display: flex;8712  align-items: center;8713  justify-content: center;8714  background: none;8715  border: none;8716  color: var(--peach-t2);8717  cursor: pointer;8718  border-radius: 8px;8719  font-size: 16px;8720  transition: color 150ms ease, background 150ms ease;8721  -webkit-tap-highlight-color: transparent;8722}87238724.peach-notes-header-btn:active {8725  background: rgba(255,255,255,0.06);8726  color: var(--peach-t0);8727}87288729/* Inline search bar */8730.peach-notes-search-input {8731  flex: 1;8732  background: none;8733  border: none;8734  outline: none;8735  font-family: 'IBM Plex Mono', monospace;8736  font-size: 13px;8737  color: var(--peach-t0);8738  padding: 4px 0;8739  letter-spacing: 0.02em;8740}87418742.peach-notes-search-input::placeholder {8743  color: var(--peach-t3);8744}87458746/* TOC list */8747.peach-notes-list-container {8748  flex: 1;8749  overflow-y: auto;8750  overflow-x: hidden;8751  scrollbar-width: none;8752  -webkit-overflow-scrolling: touch;8753  overscroll-behavior: contain;8754  position: relative;8755  z-index: 1;8756}87578758.peach-notes-list-container::-webkit-scrollbar { display: none; }87598760/* Note row */8761.peach-note-row {8762  position: relative;8763  display: grid;8764  grid-template-columns: 44px 8px 1fr 8px auto;8765  align-items: center;8766  min-height: 72px;8767  padding: 16px 20px;8768  border-bottom: 0.5px solid var(--peach-border);8769  cursor: pointer;8770  overflow: hidden;8771  touch-action: pan-y;8772  user-select: none;8773  -webkit-user-select: none;8774  -webkit-tap-highlight-color: transparent;8775}87768777.peach-note-row:first-child {8778  border-top: 0.5px solid var(--peach-border);8779}87808781.peach-note-row:active {8782  background: rgba(255,255,255,0.02);8783}87848785.peach-note-numeral {8786  font-family: 'Cormorant Garamond', serif;8787  font-style: italic;8788  font-size: 15px;8789  color: var(--peach-accent);8790  text-align: right;8791  line-height: 1;8792  flex-shrink: 0;8793}87948795.peach-note-title-gap { /* grid spacer */ }87968797.peach-note-title {8798  font-family: 'Cormorant Garamond', serif;8799  font-style: italic;8800  font-size: 18px;8801  color: var(--peach-t0);8802  line-height: 1.3;8803  min-width: 0;8804  overflow-wrap: break-word;8805}88068807.peach-note-title-match {8808  color: var(--peach-accent);8809}88108811.peach-note-date {8812  font-family: 'IBM Plex Mono', monospace;8813  font-size: 11px;8814  color: var(--peach-t2);8815  white-space: nowrap;8816  text-align: right;8817  flex-shrink: 0;8818  grid-column: 5;8819}88208821/* Swipe underlays */8822.peach-note-row-underlay {8823  position: absolute;8824  inset: 0;8825  display: flex;8826  align-items: center;8827  padding: 0 24px;8828  font-family: 'IBM Plex Mono', monospace;8829  font-size: 11px;8830  letter-spacing: 0.1em;8831  pointer-events: none;8832  z-index: 0;8833}88348835.peach-note-row-underlay--delete {8836  background: #8B2020;8837  color: rgba(255,255,255,0.9);8838  justify-content: flex-end;8839}88408841.peach-note-row-underlay--archive {8842  background: var(--peach-accent);8843  color: #0C0A06;8844  justify-content: flex-start;8845}88468847/* Delete confirm strip */8848.peach-note-delete-confirm {8849  position: absolute;8850  inset: 0;8851  background: var(--peach-bg);8852  display: flex;8853  align-items: center;8854  gap: 12px;8855  padding: 0 20px;8856  font-family: 'IBM Plex Mono', monospace;8857  font-size: 11px;8858  color: var(--peach-t1);8859  letter-spacing: 0.04em;8860  animation: peach-delete-confirm-in 150ms ease both;8861  z-index: 10;8862}88638864@keyframes peach-delete-confirm-in {8865  from { opacity: 0; }8866  to   { opacity: 1; }8867}88688869.peach-note-delete-confirm-btn {8870  background: #8B2020;8871  color: rgba(255,255,255,0.9);8872  border: none;8873  border-radius: 6px;8874  padding: 4px 10px;8875  font-family: 'IBM Plex Mono', monospace;8876  font-size: 10px;8877  cursor: pointer;8878  letter-spacing: 0.06em;8879}88808881.peach-note-delete-cancel-btn {8882  background: none;8883  border: none;8884  color: var(--peach-t3);8885  font-family: 'IBM Plex Mono', monospace;8886  font-size: 10px;8887  cursor: pointer;8888  letter-spacing: 0.06em;8889  padding: 4px 6px;8890}88918892/* + New note button */8893.peach-notes-new-btn {8894  font-family: 'IBM Plex Mono', monospace;8895  font-size: 12px;8896  color: var(--peach-t3);8897  text-align: center;8898  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8899  background: none;8900  border: none;8901  width: 100%;8902  cursor: pointer;8903  letter-spacing: 0.04em;8904  transition: color 150ms ease;8905  -webkit-tap-highlight-color: transparent;8906}89078908.peach-notes-new-btn:active { color: var(--peach-accent); }89098910/* Empty state */8911.peach-notes-empty {8912  display: flex;8913  flex-direction: column;8914  align-items: center;8915  justify-content: center;8916  flex: 1;8917  padding: 48px 32px;8918  gap: 16px;8919}89208921.peach-notes-empty-text {8922  font-family: 'Cormorant Garamond', serif;8923  font-style: italic;8924  font-size: 20px;8925  color: var(--peach-t3);8926  text-align: center;8927  margin: 0;8928  line-height: 1.4;8929  white-space: pre-line;8930}89318932/* ── Editor surface ── */89338934.peach-note-editor-surface {8935  position: absolute;8936  inset: 0;8937  background: var(--peach-bg);8938  display: flex;8939  flex-direction: column;8940  padding-top: env(safe-area-inset-top, 0px);8941}89428943.peach-note-editor-scroll {8944  flex: 1;8945  overflow-y: auto;8946  overflow-x: hidden;8947  scrollbar-width: none;8948  -webkit-overflow-scrolling: touch;8949  padding: 0 24px 120px;8950  position: relative;8951  z-index: 1;8952}89538954.peach-note-editor-scroll::-webkit-scrollbar { display: none; }89558956/* Desktop toolbar (always visible above body) */8957.peach-note-toolbar-desktop-inline {8958  display: flex;8959  align-items: center;8960  gap: 2px;8961  padding: 6px 0 12px;8962  margin-bottom: 4px;8963  border-bottom: 0.5px solid var(--peach-border);8964}89658966/* Title field */8967.peach-note-title-field {8968  font-family: 'Cormorant Garamond', serif;8969  font-style: italic;8970  font-size: 32px;8971  font-weight: 600;8972  color: var(--peach-t0);8973  line-height: 1.2;8974  padding: 8px 0 0;8975  outline: none;8976  min-height: 44px;8977  word-break: break-word;8978  position: relative;8979  z-index: 1;8980}89818982.peach-note-title-field:empty::before {8983  content: attr(data-placeholder);8984  color: var(--peach-t3);8985  pointer-events: none;8986}89878988/* Hairline separator */8989.peach-note-hairline {8990  height: 0.5px;8991  background: var(--peach-border);8992  margin: 12px 0 20px;8993  position: relative;8994  z-index: 1;8995}89968997/* Body field */8998.peach-note-body-field {8999  font-family: 'DM Sans', sans-serif;9000  font-size: 16px;9001  color: var(--peach-t0);9002  line-height: 1.85;9003  padding: 0;9004  outline: none;9005  min-height: 240px;9006  word-break: break-word;9007  position: relative;9008  z-index: 1;9009}90109011.peach-note-body-field:empty::before {9012  content: attr(data-placeholder);9013  color: var(--peach-t3);9014  font-style: italic;9015  pointer-events: none;9016}90179018.peach-note-body-field h2 {9019  font-family: 'Cormorant Garamond', serif;9020  font-style: italic;9021  font-size: 22px;9022  font-weight: 600;9023  color: var(--peach-t0);9024  margin: 20px 0 8px;9025}90269027.peach-note-body-field blockquote {9028  border-left: 2px solid var(--peach-accent);9029  margin: 12px 0;9030  padding-left: 16px;9031  color: var(--peach-t1);9032  font-style: italic;9033}90349035.peach-note-body-field ul,9036.peach-note-body-field ol {9037  padding-left: 20px;9038  margin: 8px 0;9039}90409041.peach-note-body-field li {9042  margin: 4px 0;9043}90449045.peach-note-body-field hr {9046  border: none;9047  border-top: 0.5px solid var(--peach-border);9048  margin: 16px 0;9049}90509051/* Saved indicator */9052.peach-note-saved-indicator {9053  font-family: 'IBM Plex Mono', monospace;9054  font-size: 11px;9055  color: var(--peach-t3);9056  letter-spacing: 0.04em;9057  text-align: right;9058  padding: 6px 24px;9059  flex-shrink: 0;9060  transition: opacity 300ms ease;9061  pointer-events: none;9062  position: relative;9063  z-index: 1;9064}90659066/* Mobile keyboard toolbar */9067.peach-note-toolbar-mobile {9068  display: flex;9069  align-items: center;9070  padding: 8px 16px;9071  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));9072  background: var(--peach-bg);9073  border-top: 0.5px solid var(--peach-border);9074  gap: 4px;9075  flex-shrink: 0;9076  position: relative;9077  z-index: 10;9078}90799080.peach-note-toolbar-btn {9081  min-width: 36px;9082  height: 36px;9083  display: flex;9084  align-items: center;9085  justify-content: center;9086  background: none;9087  border: none;9088  border-radius: 8px;9089  cursor: pointer;9090  font-size: 14px;9091  color: var(--peach-t1);9092  font-family: 'DM Sans', sans-serif;9093  font-weight: 600;9094  transition: background 100ms ease, color 100ms ease;9095  -webkit-tap-highlight-color: transparent;9096}90979098.peach-note-toolbar-btn--italic { font-style: italic; }9099.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }9100.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }91019102.peach-note-toolbar-divider {9103  width: 0.5px;9104  height: 20px;9105  background: var(--peach-border);9106  margin: 0 4px;9107  flex-shrink: 0;9108}91099110.peach-note-toolbar-spacer { flex: 1; }91119112/* Desktop: larger headline in TOC */9113@media (min-width: 400px) {9114  .peach-notes-header-title:not(.is-breadcrumb) {9115    font-size: 32px;9116  }91179118  .peach-note-row {9119    min-height: 64px;9120    padding: 14px 16px;9121  }9122}91239124/* Flying title — shared element during expansion/collapse */91259126/* ─── Light theme overrides ───────────────────────────────────────────────9127   Tokens that cannot be expressed as variable substitutions — hardcoded9128   context-specific values that need separate light-mode rules. */91299130/* Settings section headers: use text-label (#79766F) per restoration brief —9131   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY9132   presence without fighting the light parchment background. */9133.light .peach-settings-sub-label,9134[data-theme="light"] .peach-settings-sub-label,9135.light .peach-settings-nav-label,9136[data-theme="light"] .peach-settings-nav-label {9137  color: #79766F;9138}91399140/* Secondary action buttons (ghost / subtle): filled with input-well surface9141   so they read as recessed against the parchment card background. */9142.light .peach-btn--ghost:not(.peach-icon-btn),9143[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {9144  background: #EEE7DD;9145  border-color: #DDD5CB;9146  color: #1A1208;9147}9148.light .peach-icon-btn,9149[data-theme="light"] .peach-icon-btn {9150  background: transparent;9151  border-color: transparent;9152}9153.light .peach-btn--subtle,9154[data-theme="light"] .peach-btn--subtle {9155  background: #EEE7DD;9156  border-color: #DDD5CB;9157}91589159/* Wide secondary action button on the lock screen — override the9160   hardcoded dark-mode rgba values with warm parchment equivalents. */9161.light .peach-lock-secondary,9162[data-theme="light"] .peach-lock-secondary {9163  background: #EEE7DD;9164  border-color: #DDD5CB;9165  color: #1A1208;9166}9167.light .peach-lock-secondary:hover,9168[data-theme="light"] .peach-lock-secondary:hover {9169  background: #F0E9DF;9170}91719172/* Entry row hover: bg-row lifts the row above the card surface. */9173.light .peach-entry-row:hover,9174[data-theme="light"] .peach-entry-row:hover {9175  background: #F2EBE1;9176}9177.light .peach-entry-row.is-active,9178[data-theme="light"] .peach-entry-row.is-active {9179  background: #F2EBE1;9180}9181.light .peach-entry-row.is-selected,9182[data-theme="light"] .peach-entry-row.is-selected {9183  background: #F5EDE2;9184}91859186/* ──────────────────────────────────────────────────────────────────────────9187   Pair-device flow — bird-stage animation (Phase 1)9188   See src/popup/components/PairingBirds.tsx and the brief §6.2.9189   Three-act animation gated on the [data-phase] attribute of9190   .peach-pair-pair; child layers (birds, sound arcs, flight wave, dot)9191   each react via either pose class or visibility flag.9192   Tokens: accent surfaces use var(--peach-accent); bird illustration9193   colours are baked into the SVG per the brand-peach exception in §3.1.9194   ────────────────────────────────────────────────────────────────────── */91959196.peach-pair-pair {9197  position: absolute;9198  inset: 0;9199  z-index: 3;9200  display: flex;9201  flex-direction: column;9202  padding: 14px 12px 12px;9203  width: 100%;9204  box-sizing: border-box;9205  gap: 0;9206  background:9207    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9208    var(--peach-bg);9209  color: var(--peach-t0);9210  overflow-y: auto;9211  overflow-x: hidden;9212  scrollbar-width: none;9213  isolation: isolate;9214  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9215}9216@keyframes peach-pair-overlay-in {9217  from { opacity: 0; transform: translateY(8px); }9218  to   { opacity: 1; transform: translateY(0); }9219}9220.peach-pair-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }9221.peach-pair-pair::before {9222  content: '';9223  position: absolute;9224  inset: 0;9225  border-radius: inherit;9226  pointer-events: none;9227  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9228  z-index: 0;9229}9230.peach-pair-pair > * { position: relative; z-index: 1; }92319232/* Header --------------------------------------------------------------- */9233.peach-pair-head {9234  display: flex; align-items: center; gap: 10px;9235}9236.peach-pair-back {9237  width: 32px; height: 32px;9238  display: inline-flex; align-items: center; justify-content: center;9239  background: transparent;9240  border: none;9241  border-radius: 8px;9242  color: var(--peach-t1);9243  cursor: pointer;9244  transition: color 0.15s ease, box-shadow 0.15s ease;9245}9246.peach-pair-back:hover {9247  color: var(--peach-accent);9248  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9249}9250.peach-pair-title {9251  font-family: var(--font-display, Georgia, serif);9252  font-style: italic;9253  font-size: 24px;9254  font-weight: 500;9255  letter-spacing: 0.005em;9256  color: var(--peach-t0);9257  line-height: 1;9258}9259.peach-pair-head-spacer { flex: 1; }92609261/* Chip row ------------------------------------------------------------- */9262.peach-pair-chip-row {9263  display: flex;9264  align-items: center;9265  justify-content: flex-start;9266  margin-top: 12px;9267}9268.peach-pair-chip {9269  display: inline-flex; align-items: center; gap: 8px;9270  padding: 5px 10px 5px 8px;9271  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9272  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9273  border-radius: 999px;9274  font-family: var(--peach-mono, ui-monospace, monospace);9275  font-size: 11px;9276  letter-spacing: 0.04em;9277  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9278}9279.peach-pair-chip-dot {9280  width: 6px; height: 6px; border-radius: 50%;9281  background: var(--peach-accent);9282  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9283}9284.peach-pair-chip[data-phase="paired"] {9285  background: color-mix(in srgb, #4f9eda 12%, transparent);9286  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9287  color: #76b6e8;9288}9289.peach-pair-chip[data-phase="paired"] .peach-pair-chip-dot {9290  background: #76b6e8;9291  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9292}9293.peach-pair-chip[data-phase="timeout"],9294.peach-pair-chip[data-phase="mic_denied"],9295.peach-pair-chip[data-phase="version_mismatch"],9296.peach-pair-chip[data-phase="handshake_failed"] {9297  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9298  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9299  color: var(--peach-warn, #d29257);9300}9301.peach-pair-chip[data-phase="timeout"] .peach-pair-chip-dot,9302.peach-pair-chip[data-phase="mic_denied"] .peach-pair-chip-dot,9303.peach-pair-chip[data-phase="version_mismatch"] .peach-pair-chip-dot,9304.peach-pair-chip[data-phase="handshake_failed"] .peach-pair-chip-dot {9305  background: var(--peach-warn, #d29257);9306  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9307}93089309/* Bird stage ----------------------------------------------------------- */9310.peach-pair-stage {9311  position: relative;9312  /* Never let the flex column steal the stage's height to fit whatever is9313     below it — that is what clipped the birds to their legs before. Anything9314     that does not fit has to give somewhere else. */9315  flex: none;9316  margin: 14px 0 8px;9317  height: 180px;9318  border-radius: 12px;9319  background:9320    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9321    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),9322    color-mix(in srgb, var(--peach-bg) 92%, #000);9323  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);9324  overflow: hidden;9325  isolation: isolate;9326}9327.peach-pair-stage::after {9328  content: '';9329  position: absolute;9330  left: 12%; right: 12%;9331  bottom: 36px;9332  height: 1px;9333  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9334}93359336.peach-pair-bird-slot {9337  position: absolute;9338  bottom: 8px;9339  width: 100px;9340  height: 110px;9341  display: flex;9342  align-items: flex-end;9343  justify-content: center;9344}9345.peach-pair-bird-slot-desktop { left: 28px; }9346.peach-pair-bird-slot-mobile { right: 28px; }93479348/* The QR screen is the tallest in the flow: a 180px stage plus headline, sub,9349   QR and action overflows the popup, and the stage is what gets clipped — you9350   saw bird legs and nothing else. Shrink the stage and the birds with it here9351   only, so the birds stay whole and the QR stays comfortably above the fold.9352   Uses the individual `scale` property rather than `transform`, which the9353   mobile bird's hop animation already owns. */9354.peach-adoption-source[data-phase="invitation"] .peach-pair-stage {9355  height: 108px;9356  margin: 8px 0 6px;9357}9358.peach-adoption-source[data-phase="invitation"] .peach-pair-bird-slot {9359  scale: 0.62;9360  transform-origin: center bottom;9361}9362.peach-adoption-source[data-phase="invitation"] .peach-pair-stage::after {9363  bottom: 20px;9364}93659366/* Mobile bird hops in from the right when handshake begins */9367.peach-pair-bird-slot-mobile {9368  opacity: 1;9369  transform: translateX(-6px);9370  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9371}9372.peach-pair-stage.act-listening .peach-pair-bird-slot-mobile,9373.peach-pair-stage.act-chirping .peach-pair-bird-slot-mobile,9374.peach-pair-stage.act-idle .peach-pair-bird-slot-mobile {9375  opacity: 0;9376  transform: translateX(60px) rotate(8deg);9377}9378.peach-pair-stage.act-handshake .peach-pair-bird-slot-desktop,9379.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop {9380  transform: translateX(6px);9381  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9382}93839384/* Paired: both birds bob together */9385.peach-pair-stage.act-paired .peach-pair-bird-slot {9386  animation: peach-pair-happy-bob 1.2s ease-in-out infinite;9387}9388.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { animation-delay: 0.2s; }9389.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop { --bb-x: 6px; }9390.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { --bb-x: -6px; }9391@keyframes peach-pair-happy-bob {9392  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9393  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9394}93959396/* Bird internal -------------------------------------------------------- */9397.peach-pair-bird {9398  width: 108px;9399  height: 108px;9400  transform-origin: 50% 95%;9401}9402.peach-pair-bird svg { width: 100%; height: 100%; overflow: visible; }94039404.peach-pair-bird-body {9405  transform-origin: 50% 80%;9406  animation: peach-pair-bird-bob 2.4s ease-in-out infinite;9407}9408@keyframes peach-pair-bird-bob {9409  0%, 100% { transform: translateY(0) scale(1, 1); }9410  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9411}94129413.peach-pair-bird-eye-group {9414  animation: peach-pair-blink 5.2s steps(1, end) infinite;9415  transform-origin: center;9416  transform-box: fill-box;9417}9418@keyframes peach-pair-blink {9419  0%, 92%, 96%, 100% { transform: scaleY(1); }9420  94%                { transform: scaleY(0.05); }9421}94229423/* Pose: chirping — beak opens, head bobs, aura blooms */9424.peach-pair-bird-pose-chirping .peach-pair-bird-body {9425  animation:9426    peach-pair-bird-bob 2.4s ease-in-out infinite,9427    peach-pair-squeeze 1.7s ease-in-out infinite;9428}9429@keyframes peach-pair-squeeze {9430  0%, 70%, 100% { transform-origin: 50% 85%; }9431  78%           { transform: scale(1.04, 0.96) translateY(1px); }9432  86%           { transform: scale(0.98, 1.02); }9433}9434.peach-pair-bird-pose-chirping .peach-pair-bird-head-group {9435  animation: peach-pair-head-bob 1.7s ease-in-out infinite;9436}9437@keyframes peach-pair-head-bob {9438  0%, 70%, 100% { transform: translateY(0) rotate(0); }9439  78%           { transform: translateY(-3px) rotate(-4deg); }9440  86%           { transform: translateY(-1px) rotate(-2deg); }9441}9442.peach-pair-bird-pose-chirping .peach-pair-bird-beak {9443  animation: peach-pair-beak-open 1.7s ease-in-out infinite;9444}9445@keyframes peach-pair-beak-open {9446  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9447  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9448  86%           { transform: rotate(-6deg); }9449}9450.peach-pair-bird-pose-chirping .peach-pair-bird-aura {9451  animation: peach-pair-aura 1.7s ease-in-out infinite;9452}9453@keyframes peach-pair-aura {9454  0%, 100% { opacity: 0; }9455  50%      { opacity: 0.8; }9456}9457.peach-pair-bird-pose-chirping .peach-pair-bird-tail {9458  animation: peach-pair-tail-twitch 1.7s ease-in-out infinite;9459  transform-origin: 100% 50%;9460}9461@keyframes peach-pair-tail-twitch {9462  0%, 75%, 100% { transform: rotate(0); }9463  82%           { transform: rotate(-3deg) translateX(-1px); }9464}94659466/* Pose: attentive — head tilts toward partner */9467.peach-pair-bird-pose-attentive .peach-pair-bird-head-group {9468  animation: peach-pair-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9469}9470@keyframes peach-pair-head-tilt {9471  0%   { transform: rotate(0) translateY(0); }9472  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9473  100% { transform: rotate(-6deg); }9474}9475.peach-pair-bird-pose-attentive .peach-pair-bird-tail {9476  animation: peach-pair-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9477  transform-origin: 100% 50%;9478}9479@keyframes peach-pair-tail-cock {9480  0%   { transform: rotate(0); }9481  100% { transform: rotate(-4deg); }9482}94839484/* Pose: happy — wing flutter, tuft perk, tail wag */9485.peach-pair-bird-pose-happy .peach-pair-bird-wing {9486  transform-origin: 80% 60%;9487  animation: peach-pair-wing-flutter 0.32s ease-in-out 5;9488}9489@keyframes peach-pair-wing-flutter {9490  0%, 100% { transform: rotate(0) translateY(0); }9491  50%      { transform: rotate(-16deg) translateY(-2px); }9492}9493.peach-pair-bird-pose-happy .peach-pair-bird-tuft {9494  transform-origin: 0% 100%;9495  animation: peach-pair-tuft-perk 0.4s ease-in-out 3;9496}9497@keyframes peach-pair-tuft-perk {9498  0%, 100% { transform: rotate(0); }9499  50%      { transform: rotate(-15deg) translateY(-1px); }9500}9501.peach-pair-bird-pose-happy .peach-pair-bird-tail {9502  transform-origin: 100% 50%;9503  animation: peach-pair-tail-wag 0.5s ease-in-out 4;9504}9505@keyframes peach-pair-tail-wag {9506  0%, 100% { transform: rotate(0); }9507  25%      { transform: rotate(6deg); }9508  75%      { transform: rotate(-6deg); }9509}9510.peach-pair-bird-pose-happy .peach-pair-bird-head-group {9511  animation: peach-pair-head-perk 0.5s ease-out;9512}9513@keyframes peach-pair-head-perk {9514  0%   { transform: translateY(0); }9515  40%  { transform: translateY(-3px) rotate(2deg); }9516  100% { transform: translateY(0); }9517}95189519/* Pose: sad — body droops forward */9520.peach-pair-bird-pose-sad .peach-pair-bird-body {9521  transform: translateY(5px) rotate(-2deg);9522  animation: none;9523}9524.peach-pair-bird-pose-sad .peach-pair-bird-head-group {9525  transform: translateY(4px) rotate(8deg);9526}9527.peach-pair-bird-pose-sad .peach-pair-bird-tuft { transform: rotate(15deg) translateY(2px); }9528.peach-pair-bird-pose-sad .peach-pair-bird-tail { transform: rotate(8deg) translateY(2px); }95299530.peach-pair-bird-pose-hidden { opacity: 0; }95319532/* Sound arcs ----------------------------------------------------------- */9533.peach-pair-arcs {9534  position: absolute;9535  top: 18px;9536  width: 96px;9537  height: 70px;9538  pointer-events: none;9539}9540.peach-pair-arcs-right { right: -60px; }9541.peach-pair-arcs-left  { left: -60px; transform: scaleX(-1); }9542.peach-pair-arc {9543  position: absolute;9544  top: 50%;9545  left: 0;9546  width: 40px;9547  height: 40px;9548  margin-top: -20px;9549  border: 1.2px solid #f4d5a8;9550  border-color: transparent #f4d5a8 transparent transparent;9551  border-radius: 50%;9552  opacity: 0;9553  animation: peach-pair-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9554}9555@keyframes peach-pair-arc-expand {9556  0%   { transform: scale(0.4); opacity: 0; }9557  20%  { opacity: 0.9; }9558  100% { transform: scale(1.6); opacity: 0; }9559}95609561/* Flight wave ---------------------------------------------------------- */9562.peach-pair-flight-track {9563  position: absolute;9564  inset: 32px 36px 38px 36px;9565  pointer-events: none;9566}9567.peach-pair-flight-wave {9568  position: absolute;9569  top: 8px;9570  left: 76px;9571  right: 76px;9572  height: 60px;9573  width: auto;9574  opacity: 0;9575  transition: opacity 0.15s ease;9576  stroke: #f4d5a8;9577  fill: none;9578}9579.peach-pair-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9580.peach-pair-flight-wave.is-visible { opacity: 1; }9581.peach-pair-flight-path,9582.peach-pair-flight-path-2 {9583  stroke-dasharray: 240;9584  stroke-dashoffset: 240;9585  stroke-linecap: round;9586  fill: none;9587}9588.peach-pair-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9589.peach-pair-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9590.peach-pair-flight-wave.is-visible .peach-pair-flight-path {9591  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9592}9593.peach-pair-flight-wave.is-visible .peach-pair-flight-path-2 {9594  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9595}9596@keyframes peach-pair-fly {9597  0%   { stroke-dashoffset: 240; opacity: 0; }9598  20%  { opacity: 1; }9599  100% { stroke-dashoffset: -120; opacity: 0; }9600}96019602/* Connection dot ------------------------------------------------------- */9603.peach-pair-dot {9604  position: absolute;9605  top: 50%; left: 50%;9606  transform: translate(-50%, -50%);9607  width: 40px; height: 40px;9608  opacity: 0;9609  pointer-events: none;9610  transition: opacity 0.3s ease;9611  color: var(--peach-accent);9612}9613.peach-pair-dot.is-visible { opacity: 1; }9614.peach-pair-dot-glow {9615  position: absolute; top: 50%; left: 50%;9616  transform: translate(-50%, -50%);9617  width: 38px; height: 38px;9618  border-radius: 50%;9619  filter: blur(10px);9620  opacity: 0.55;9621  background: var(--peach-accent);9622  animation: peach-pair-dot-bloom 1.4s ease-out;9623}9624.peach-pair-dot-core {9625  position: absolute; top: 50%; left: 50%;9626  transform: translate(-50%, -50%);9627  width: 8px; height: 8px;9628  border-radius: 50%;9629  background: var(--peach-accent);9630  box-shadow: 0 0 12px currentColor;9631  animation: peach-pair-dot-core 1.4s ease-out;9632}9633.peach-pair-dot-ring {9634  position: absolute; top: 50%; left: 50%;9635  width: 60px; height: 60px;9636  transform: translate(-50%, -50%);9637  animation: peach-pair-dot-ring 1.4s linear;9638  stroke: var(--peach-accent);9639}9640@keyframes peach-pair-dot-bloom {9641  0%   { width: 4px; height: 4px; opacity: 0; }9642  35%  { width: 60px; height: 60px; opacity: 0.7; }9643  100% { width: 38px; height: 38px; opacity: 0.55; }9644}9645@keyframes peach-pair-dot-core {9646  0%   { width: 0; height: 0; }9647  35%  { width: 12px; height: 12px; }9648  100% { width: 8px; height: 8px; }9649}9650@keyframes peach-pair-dot-ring {9651  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9652  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9653  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9654}96559656/* Motes — drift upward across the stage */9657.peach-pair-motes {9658  position: absolute;9659  inset: 0;9660  pointer-events: none;9661}9662.peach-pair-mote {9663  position: absolute;9664  width: 2px; height: 2px;9665  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9666  border-radius: 50%;9667  bottom: 32px;9668  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9669  opacity: 0;9670  animation: peach-pair-mote-drift 6s linear infinite;9671  animation-delay: calc(var(--mote-i, 0) * 0.7s);9672}9673@keyframes peach-pair-mote-drift {9674  0%   { transform: translateY(0); opacity: 0; }9675  10%  { opacity: 0.6; }9676  90%  { opacity: 0.1; }9677  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9678}96799680/* Status copy ---------------------------------------------------------- */9681.peach-pair-copy-host {9682  margin: 4px 4px 10px;9683  text-align: center;9684  min-height: 50px;9685}9686.peach-pair-copy {9687  animation: peach-pair-copy-in 0.35s ease both;9688}9689@keyframes peach-pair-copy-in {9690  from { opacity: 0; transform: translateY(4px); }9691  to   { opacity: 1; transform: translateY(0); }9692}9693.peach-pair-headline {9694  font-family: var(--font-display, Georgia, serif);9695  font-style: italic;9696  font-size: 20px;9697  font-weight: 500;9698  line-height: 1.2;9699  letter-spacing: 0.005em;9700  color: var(--peach-t0);9701  margin-bottom: 6px;9702}9703.peach-pair-copy-listening .peach-pair-headline,9704.peach-pair-copy-chirping .peach-pair-headline,9705.peach-pair-copy-idle .peach-pair-headline {9706  font-family: inherit;9707  font-style: normal;9708  font-weight: 500;9709  font-size: 15px;9710  color: var(--peach-t0);9711  letter-spacing: 0;9712}9713.peach-pair-copy-paired .peach-pair-headline {9714  color: var(--peach-t0);9715  font-weight: 600;9716}9717.peach-pair-sub {9718  font-size: 12.5px;9719  line-height: 1.45;9720  color: var(--peach-t1);9721  max-width: 280px;9722  margin: 0 auto;9723  text-wrap: pretty;9724}97259726/* Status action -------------------------------------------------------- */9727.peach-pair-action {9728  margin: 2px 4px 10px;9729  margin-top: auto;9730  display: flex;9731  flex-direction: column;9732  gap: 8px;9733}9734.peach-pair-action-waiting {9735  display: flex;9736  align-items: center;9737  justify-content: space-between;9738  gap: 12px;9739}9740.peach-pair-cancel {9741  min-width: 96px;9742}9743.peach-pair-listening {9744  display: inline-flex; align-items: center; gap: 4px;9745  font-family: var(--peach-mono, ui-monospace, monospace);9746  font-size: 9.5px;9747  text-transform: uppercase;9748  letter-spacing: 0.12em;9749  color: var(--peach-t1);9750  padding: 8px 10px;9751}9752.peach-pair-listen-dot {9753  width: 4px; height: 4px;9754  border-radius: 50%;9755  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9756  animation: peach-pair-listen-pulse 1.2s ease-in-out infinite;9757}9758.peach-pair-listen-dot:nth-child(2) { animation-delay: 0.2s; }9759.peach-pair-listen-dot:nth-child(3) { animation-delay: 0.4s; }9760.peach-pair-listen-label { margin-left: 6px; }9761@keyframes peach-pair-listen-pulse {9762  0%, 100% { opacity: 0.25; transform: scale(0.9); }9763  50%      { opacity: 1;     transform: scale(1.15); }9764}97659766.peach-pair-action-handshake {9767  display: flex;9768  flex-direction: column;9769  align-items: center;9770  gap: 8px;9771  padding: 8px 4px;9772}9773.peach-pair-meter {9774  width: 100%;9775  max-width: 280px;9776  height: 2px;9777  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9778  border-radius: 2px;9779  position: relative;9780  overflow: hidden;9781}9782.peach-pair-meter-bar {9783  position: absolute;9784  top: 0; bottom: 0;9785  width: 30%;9786  left: -30%;9787  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9788  animation: peach-pair-meter-sweep 1.4s ease-in-out infinite;9789}9790@keyframes peach-pair-meter-sweep {9791  0%   { left: -30%; }9792  100% { left: 100%; }9793}9794.peach-pair-meter-label {9795  font-family: var(--peach-mono, ui-monospace, monospace);9796  font-size: 9.5px;9797  text-transform: uppercase;9798  letter-spacing: 0.14em;9799  color: var(--peach-t1);9800}98019802.peach-pair-action-paired {9803  display: flex;9804  align-items: center;9805  gap: 10px;9806}9807.peach-pair-device-confirm {9808  flex: 1;9809  display: inline-flex;9810  align-items: center;9811  gap: 8px;9812  padding: 9px 10px 9px 12px;9813  border-radius: 10px;9814  background: color-mix(in srgb, #76b6e8 12%, transparent);9815  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9816  font-size: 12.5px;9817  color: var(--peach-t0);9818  min-width: 0;9819}9820.peach-pair-device-confirm-glyph {9821  display: inline-flex;9822  color: #76b6e8;9823}9824.peach-pair-device-confirm-name {9825  flex: 1;9826  overflow: hidden;9827  text-overflow: ellipsis;9828  white-space: nowrap;9829}9830.peach-pair-device-confirm-trust {9831  font-family: var(--peach-mono, ui-monospace, monospace);9832  font-size: 9.5px;9833  text-transform: uppercase;9834  letter-spacing: 0.1em;9835  color: #76b6e8;9836  padding: 2px 6px;9837  border-radius: 4px;9838  background: color-mix(in srgb, #76b6e8 14%, transparent);9839}9840.peach-pair-done {9841  min-width: 80px;9842}9843.peach-pair-retry {9844  align-self: center;9845  display: block;9846  margin: 6px auto 0;9847  min-width: 120px;9848}9849.peach-pair-mic-help {9850  font-size: 12px;9851  color: var(--peach-t1);9852  text-align: center;9853  max-width: 320px;9854  margin: 0 auto;9855}98569857/* Rest state — bird stage at idle pose, primary CTA + paired list */9858.peach-pair-pair[data-phase="idle"] .peach-pair-stage {9859  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9860  height: 160px;9861}9862.peach-pair-pair-start {9863  width: 100%;9864  display: inline-flex;9865  align-items: center;9866  justify-content: center;9867  gap: 8px;9868  padding: 11px 14px;9869  border-radius: 10px;9870  background: var(--peach-accent);9871  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9872  color: #1a0905;9873  font-family: inherit;9874  font-size: 13px;9875  font-weight: 600;9876  letter-spacing: 0.01em;9877  cursor: pointer;9878  transition: filter 0.15s ease, transform 0.1s ease;9879}9880.peach-pair-pair-start:hover { filter: brightness(1.08); }9881.peach-pair-pair-start:active { transform: translateY(1px); }98829883.peach-pair-paired-section {9884  margin-top: 14px;9885  display: flex;9886  flex-direction: column;9887  gap: 8px;9888}9889.peach-pair-paired-heading {9890  margin: 0;9891  font-family: var(--peach-mono, ui-monospace, monospace);9892  font-size: 10px;9893  font-weight: 500;9894  letter-spacing: 0.14em;9895  text-transform: uppercase;9896  color: var(--peach-t1);9897}98989899/* Footer --------------------------------------------------------------- */9900.peach-pair-foot {9901  margin: 10px -4px -2px;9902  margin-top: auto;9903}9904.peach-pair-foot-divider {9905  height: 1px;9906  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9907  margin-bottom: 10px;9908}9909.peach-pair-foot-text {9910  font-size: 11px;9911  line-height: 1.5;9912  color: var(--peach-t1);9913  text-align: center;9914  padding: 0 4px;9915  text-wrap: pretty;9916}99179918/* Screen-reader-only live region. Kept off the visual flow but read by9919   assistive tech as the pairing phase advances. */9920.peach-sr-only {9921  position: absolute;9922  width: 1px; height: 1px;9923  padding: 0; margin: -1px;9924  overflow: hidden;9925  clip: rect(0, 0, 0, 0);9926  white-space: nowrap;9927  border: 0;9928}99299930/* Reduced motion — stage simplifies to opacity transitions only */9931@media (prefers-reduced-motion: reduce) {9932  .peach-pair-bird-body,9933  .peach-pair-bird-head-group,9934  .peach-pair-bird-beak,9935  .peach-pair-bird-wing,9936  .peach-pair-bird-tuft,9937  .peach-pair-bird-tail,9938  .peach-pair-bird-eye-group,9939  .peach-pair-bird-aura,9940  .peach-pair-arc,9941  .peach-pair-flight-path,9942  .peach-pair-flight-path-2,9943  .peach-pair-dot-glow,9944  .peach-pair-dot-core,9945  .peach-pair-dot-ring,9946  .peach-pair-mote,9947  .peach-pair-meter-bar,9948  .peach-pair-listen-dot,9949  .peach-pair-bird-slot,9950  .peach-pair-bird-slot-mobile {9951    animation: none !important;9952    transition: opacity 0.2s linear !important;9953  }9954}99559956/* ─────────────────────────────────────────────────────────────────9957   Settings → Sync surface. Wraps the same bird9958   animation used by the pairing flow with a paired-devices list and9959   the "Pair a device" CTA.9960   ───────────────────────────────────────────────────────────────── */9961.peach-pair-settings {9962  position: absolute;9963  inset: 0;9964  z-index: 3;9965  display: flex;9966  flex-direction: column;9967  gap: 18px;9968  padding: 14px 12px 12px;9969  width: 100%;9970  box-sizing: border-box;9971  overflow-y: auto;9972  overflow-x: hidden;9973  /* Same warm surface as the pairing screen — unifies the two views. */9974  background:9975    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9976    var(--peach-bg);9977  color: var(--peach-t0);9978  isolation: isolate;9979  /* Hide native scrollbar — content fits 99% of the time and a chunky9980     gutter ruins the surface. */9981  scrollbar-width: none;9982  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9983}9984.peach-pair-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9985.peach-pair-settings::before {9986  content: '';9987  position: absolute;9988  inset: 0;9989  pointer-events: none;9990  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9991  z-index: 0;9992}9993.peach-pair-settings > * { position: relative; z-index: 1; }99949995.peach-pair-settings--pairing {9996  padding: 0;9997  align-items: stretch;9998  justify-content: stretch;9999  background: none;10000  isolation: auto;10001}10002.peach-pair-settings--pairing::before { display: none; }1000310004.peach-pair-settings-header {10005  display: flex;10006  align-items: center;10007  gap: 10px;10008}10009.peach-pair-settings-title {10010  margin: 0;10011  font-family: var(--font-display, Georgia, serif);10012  font-style: italic;10013  font-size: 24px;10014  font-weight: 500;10015  line-height: 1;10016  color: var(--peach-t0);10017  letter-spacing: 0.005em;10018}10019.peach-pair-settings-section {10020  margin: 6px 0 -4px;10021  font-size: 11px;10022  font-weight: 600;10023  letter-spacing: 0.08em;10024  text-transform: uppercase;10025  color: var(--peach-text-muted);10026}10027.peach-pair-settings-error {10028  font-size: 12px;10029  padding: 8px 10px;10030  border-radius: 8px;10031  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);10032  color: var(--peach-text);10033}10034.peach-pair-settings-footer {10035  margin-top: auto;10036  padding-top: 18px;10037  font-size: 11.5px;10038  line-height: 1.5;10039  color: var(--peach-text-muted);10040  text-align: center;10041}1004210043/* Hero card shown when no devices are paired yet. */10044.peach-pair-hero {10045  display: flex;10046  flex-direction: column;10047  align-items: center;10048  gap: 12px;10049  padding: 20px 12px 8px;10050  text-align: center;10051}10052.peach-pair-hero-svg {10053  display: block;10054  max-width: 100%;10055  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));10056}10057.peach-pair-hero-headline {10058  margin: 0;10059  font-family: var(--font-display, Georgia, serif);10060  font-style: italic;10061  font-size: 20px;10062  font-weight: 500;10063  line-height: 1.2;10064  letter-spacing: 0.005em;10065  color: var(--peach-t0);10066}10067.peach-pair-hero-sub {10068  margin: 0;10069  font-size: 13px;10070  line-height: 1.5;10071  color: var(--peach-t1);10072  max-width: 320px;10073  text-wrap: pretty;10074}1007510076.peach-pair-pair-cta {10077  display: flex;10078  justify-content: center;10079  padding: 4px 0 6px;10080}10081.peach-pair-pair-button {10082  display: inline-flex;10083  align-items: center;10084  gap: 8px;10085  min-width: 220px;10086  justify-content: center;10087}10088.peach-pair-pair-button-icon {10089  flex: 0 0 auto;10090}1009110092/* Paired devices list. Roomy rows that look at home next to the rest10093   of Settings; stale rows get a soft warm-warning border tint. */10094.peach-pair-device-list {10095  list-style: none;10096  margin: 0;10097  padding: 0;10098  display: flex;10099  flex-direction: column;10100  gap: 8px;10101}10102.peach-pair-device-row {10103  display: flex;10104  align-items: center;10105  gap: 12px;10106  padding: 12px;10107  border-radius: 10px;10108  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10109  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);10110}10111.peach-pair-device-row[data-stale="true"] {10112  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);10113}10114.peach-pair-device-icon {10115  width: 32px;10116  height: 32px;10117  display: flex;10118  align-items: center;10119  justify-content: center;10120  border-radius: 8px;10121  color: var(--peach-text);10122  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);10123}10124.peach-pair-device-info {10125  flex: 1;10126  display: flex;10127  flex-direction: column;10128  gap: 2px;10129  min-width: 0;10130}10131.peach-pair-device-name {10132  font-size: 14px;10133  font-weight: 600;10134  color: var(--peach-text);10135  overflow: hidden;10136  text-overflow: ellipsis;10137  white-space: nowrap;10138}10139.peach-pair-device-meta {10140  font-size: 11.5px;10141  color: var(--peach-text-muted);10142  display: flex;10143  flex-wrap: wrap;10144  align-items: center;10145  gap: 8px;10146}10147.peach-pair-device-badge {10148  font-size: 10.5px;10149  font-weight: 500;10150  letter-spacing: 0.02em;10151  padding: 2px 6px;10152  border-radius: 999px;10153  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);10154  color: var(--peach-text);10155}10156.peach-pair-device-stale {10157  font-size: 10.5px;10158  font-weight: 500;10159  color: var(--peach-warn, #d29257);10160}10161.peach-pair-device-remove {10162  flex: 0 0 auto;10163  color: var(--peach-text-muted);10164}10165.peach-pair-device-remove:hover {10166  color: var(--peach-danger, #c25b4a);10167}10168.peach-pair-unpair-confirm {10169  display: flex;10170  gap: 6px;10171  align-items: center;10172}1017310174/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */10175.peach-pair-pro-card {10176  position: relative;10177  margin: 18px 12px;10178  padding: 18px 20px 22px;10179  border-radius: 22px;10180  background:10181    radial-gradient(140% 90% at 50% 0%,10182      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,10183      transparent 60%),10184    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10185  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);10186  box-shadow:10187    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,10188    0 18px 40px -24px rgba(0, 0, 0, 0.45);10189  display: flex;10190  flex-direction: column;10191  align-items: center;10192  gap: 10px;10193  text-align: center;10194  overflow: hidden;10195}10196.peach-pair-pro-stage {10197  position: relative;10198  width: 220px;10199  height: 140px;10200  display: flex;10201  align-items: flex-end;10202  justify-content: center;10203  margin-bottom: 2px;10204}10205.peach-pair-pro-bird-slot {10206  width: 140px;10207  height: 132px;10208  display: flex;10209  align-items: flex-end;10210  justify-content: center;10211  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));10212}10213.peach-pair-pro-bird-slot .peach-pair-bird {10214  width: 100%;10215  height: 100%;10216}10217.peach-pair-pro-bird-slot .peach-pair-bird svg {10218  width: 100%;10219  height: 100%;10220  overflow: visible;10221}10222.peach-pair-pro-headline {10223  margin: 4px 0 0;10224  font-family: var(--font-display, "Cormorant Garamond", serif);10225  font-style: italic;10226  font-size: 19px;10227  font-weight: 500;10228  letter-spacing: 0.01em;10229  color: var(--peach-t0);10230  max-width: 280px;10231  line-height: 1.25;10232}10233.peach-pair-pro-body {10234  margin: 0;10235  font-size: 13px;10236  line-height: 1.55;10237  color: var(--peach-t1);10238  max-width: 300px;10239}10240.peach-pair-pro-cta {10241  margin-top: 4px;10242}10243.peach-pair-pro-foot {10244  margin: 2px 0 0;10245  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10246  font-size: 0.625rem;10247  letter-spacing: 0.08em;10248  text-transform: uppercase;10249  color: var(--peach-t2);10250  opacity: 0.75;10251}1025210253/* Shell border and shadow in light mode: match dark mode's near-invisible10254   border weight so the popup frame looks the same in both themes. */10255.light .peach-shell,10256.light .peach-screen {10257  border-color: rgba(26, 18, 8, 0.07);10258  box-shadow:10259    0 2px 8px rgba(80, 56, 32, 0.08),10260    0 14px 48px rgba(80, 56, 32, 0.10),10261    0 0 0 1px rgba(26, 18, 8, 0.04);10262}1026310264/* HOLE 4: the revoke confirmation carries its own disclosure, so it needs the10265   full row width rather than sitting inline beside the device name. */10266.peach-settings-row:has(> .peach-unpair-confirm) { flex-wrap: wrap; }10267.peach-unpair-confirm {10268  display: flex;10269  flex-direction: column;10270  gap: 8px;10271  width: 100%;10272}10273.peach-unpair-confirm-note {10274  margin: 0;10275  font-size: 0.6875rem;10276  line-height: 1.5;10277  color: var(--peach-t2);10278}1027910280/* Sync mode selector — three named choices (public / private / off). Replaces10281   the old binary "local network only" toggle; see docs/sync-lan-retirement.md. */10282.peach-sync-mode {10283  display: flex;10284  align-items: flex-start;10285  gap: 10px;10286  width: 100%;10287  text-align: left;10288  padding: 10px 12px;10289  margin-top: 8px;10290  border-radius: 10px;10291  border: 1px solid var(--peach-border);10292  background: color-mix(in srgb, var(--peach-t0) 3%, transparent);10293  color: var(--peach-t1);10294  cursor: pointer;10295  transition: border-color var(--peach-dur-80) var(--peach-curve-arrival),10296              background-color var(--peach-dur-80) var(--peach-curve-arrival);10297}10298.peach-sync-mode:hover:not(:disabled) {10299  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);10300}10301.peach-sync-mode.is-active {10302  border-color: var(--peach-accent);10303  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);10304}10305.peach-sync-mode:disabled { opacity: 0.6; cursor: default; }10306.peach-sync-mode-main { display: flex; flex-direction: column; gap: 3px; flex: 1; }10307.peach-sync-mode-title { font-size: 12px; }10308.peach-sync-mode-sub {10309  font-size: 11px;10310  line-height: 1.5;10311  color: var(--peach-t2);10312}10313.peach-sync-mode-pip {10314  flex: none;10315  margin-top: 3px;10316  width: 12px; height: 12px;10317  border-radius: 50%;10318  border: 1px solid var(--peach-t3);10319}10320.peach-sync-mode.is-active .peach-sync-mode-pip {10321  border-color: var(--peach-accent);10322  background:10323    radial-gradient(circle at 50% 50%, var(--peach-accent) 0 42%, transparent 44%);10324}10325.peach-sync-mode-disclosure {10326  margin: 10px 2px 0;10327  font-size: 11px;10328  line-height: 1.5;10329  color: var(--peach-t2);10330}10331.peach-sync-mode-warn { color: var(--peach-breach); }1033210333/* Compact form, used mid-pairing: a quiet line, not a decision to make. */10334.peach-sync-mode-summary {10335  margin: 8px 2px 0;10336  font-size: 11px;10337  color: var(--peach-t2);10338  text-align: center;10339}10340.peach-sync-mode-change {10341  background: none;10342  border: none;10343  padding: 0;10344  font: inherit;10345  color: var(--peach-accent);10346  text-decoration: underline;10347  cursor: pointer;10348}