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); } }952@media (prefers-reduced-motion: reduce) {953  .peach-sync-btn.is-syncing .peach-sync-icon { animation: none; opacity: 0.6; }954}955956.peach-btn:focus-visible {957  outline: none;958  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);959}960961/* Lock button */962.peach-lock-icon { transform-origin: center; }963.peach-lock-btn { color: var(--peach-accent); }964.peach-lock-btn.is-locking .peach-lock-icon {965  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);966}967968/* Biometric unlock button */969.peach-biometric-btn {970  display: flex;971  align-items: center;972  justify-content: center;973  gap: 6px;974  margin-top: 8px;975  width: 100%;976}977978/* Copy button */979.peach-copy-btn {980  position: relative; overflow: hidden;981  color: var(--peach-t2); border-color: var(--peach-t3);982}983.peach-copy-icon {984  display: inline-flex; align-items: center; justify-content: center;985  position: relative; z-index: 1;986}987.peach-copy-icon-svg { display: block; }988.peach-copy-sheen {989  position: absolute; inset: 0;990  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%);991  opacity: 0; transform: scaleX(0.15); transform-origin: left center;992}993.peach-copy-btn.is-copied {994  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;995  box-shadow:996    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),997    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),998    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);999}1000.peach-copy-btn.is-copied .peach-copy-icon {1001  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;1002}1003.peach-copy-btn.is-copied .peach-copy-sheen {1004  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;1005}1006.peach-copy-btn.is-retreat {1007  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;1008}1009.peach-copy-btn.is-retreat .peach-copy-sheen {1010  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;1011}1012.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }1013.peach-copy-drain-bar {1014  display: block; width: 100%; height: 100%;1015  background: var(--peach-accent); opacity: 0.7;1016  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;1017}10181019/* Unlock screen elements */1020.peach-underline-input {1021  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);1022  padding: 6px 0; background: transparent; color: var(--peach-t0);1023  outline: none;1024  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1025  font-size: 0.8125rem;1026  caret-color: var(--peach-accent);1027}1028.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }1029.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }1030.peach-hint {1031  margin: 0;1032  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1033  font-size: 0.625rem; color: var(--peach-t2);1034}1035.peach-unlock-footer {1036  margin-top: 4px; display: flex; align-items: center; gap: 7px;1037  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1038  font-size: 0.625rem; color: var(--peach-t2);1039}1040.peach-unlock-footer--lock {1041  padding-top: 2px;1042}10431044/* Desktop helper (peach-sync) code pairing — additive hooks. The shared pairing1045   classes (peach-pair-*) carry the shared layout; these only style the parts1046   unique to the typed-code path. Inline styles cover the SAS/confirm gate. */1047.peach-desktop-pair { display: flex; flex-direction: column; }1048.peach-desktop-enter,1049.peach-desktop-searching,1050.peach-desktop-paired,1051.peach-desktop-error {1052  display: flex; flex-direction: column; gap: 8px;1053  padding: 4px 18px 16px; text-align: center; align-items: center;1054}1055.peach-desktop-enter .peach-label { align-self: flex-start; }1056/* Sized for a full 19-character pairing code (A74H-48J3-KI32-OEP4) in a1057   320px popup — a 6-digit legacy helper code still reads fine at this size. */1058.peach-code-input {1059  text-align: center; letter-spacing: 0.12em; padding-left: 0.12em;1060  font-size: 15px;1061}1062.peach-code-input::placeholder { letter-spacing: 0.12em; }10631064/* Sync card "pair a device" options — bordered, raised tappable rows that read1065   as buttons on any card hue (theme-neutral light overlay, not the peach accent). */1066.peach-sync-pair-option {1067  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;1068  width: 100%; text-align: left; cursor: pointer; font-family: inherit;1069  padding: 11px 12px; border-radius: 10px;1070  background: color-mix(in srgb, var(--peach-t0) 6%, transparent);1071  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);1072  color: var(--peach-t0);1073  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;1074}1075.peach-sync-pair-option + .peach-sync-pair-option { margin-top: 8px; }1076.peach-sync-pair-option:hover {1077  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);1078  border-color: color-mix(in srgb, var(--peach-t0) 28%, transparent);1079}1080.peach-sync-pair-option:active { transform: translateY(1px); }1081.peach-sync-pair-option:disabled { opacity: 0.5; cursor: default; }1082.peach-sync-pair-option-icon { flex-shrink: 0; display: flex; align-items: center; color: var(--peach-t1); margin-top: 1px; }1083.peach-sync-pair-option-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }1084.peach-sync-pair-option-title { font-size: 0.8125rem; font-weight: 600; }1085.peach-sync-pair-option-sub { font-size: 0.6875rem; line-height: 1.45; color: var(--peach-t2); }1086.peach-sync-pair-option-chevron { flex-shrink: 0; color: var(--peach-t2); font-size: 1.05rem; line-height: 1.3; }10871088/* Breach badge */1089.peach-breach-badge {1090  display: flex;1091  position: relative;1092  z-index: 1;1093  align-items: center;1094  gap: 7px;1095  font-size: 0.5625rem;1096  color: var(--peach-breach);1097  padding: 5px 10px;1098  margin-bottom: 4px;1099  border-radius: 8px;1100  background: rgba(220, 80, 60, 0.07);1101  border: 1px solid rgba(220, 80, 60, 0.18);1102  letter-spacing: 0.04em;1103}11041105.peach-password-value.is-breached {1106  color: rgba(220, 80, 60, 0.75);1107  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1108}11091110/* ── Overlay views ─────────────────────────────────────────────────── */1111.peach-overlay-view {1112  position: absolute;1113  inset: 0;1114  display: flex;1115  flex-direction: column;1116  background:1117    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1118    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1119    var(--peach-bg);1120  z-index: 2;1121  overflow: hidden;1122  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1123}11241125.peach-overlay-view:has(.stk-shell) {1126  background: var(--peach-bg);1127}1128@keyframes overlay-in {1129  from { opacity: 0; transform: translateY(8px); }1130  to   { opacity: 1; transform: translateY(0); }1131}1132.peach-overlay-view.ov-enter-up {1133  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1134}1135.peach-overlay-view.ov-exit-up {1136  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1137}1138.peach-overlay-view.ov-enter-right {1139  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1140}1141.peach-overlay-view.ov-exit-right {1142  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1143}11441145@keyframes ov-enter-up {1146  from { opacity: 0; transform: translateY(18px); }1147  to   { opacity: 1; transform: translateY(0); }1148}1149@keyframes ov-exit-up {1150  from { opacity: 1; transform: translateY(0); }1151  to   { opacity: 0; transform: translateY(-12px); }1152}1153@keyframes ov-enter-right {1154  from { opacity: 0; transform: translateX(20px); }1155  to   { opacity: 1; transform: translateX(0); }1156}1157@keyframes ov-exit-right {1158  from { opacity: 1; transform: translateX(0); }1159  to   { opacity: 0; transform: translateX(20px); }1160}11611162/* Overlay shared header */1163.peach-overlay-header {1164  padding: 10px 12px 8px;1165  display: flex;1166  align-items: center;1167  gap: 10px;1168  flex-shrink: 0;1169}1170/* Back button — circular pill matching the settings stack masthead (.stk-back) */1171.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1172  width: 28px;1173  height: 28px;1174  flex: 0 0 28px;1175  border-radius: 999px;1176  border: 1px solid var(--peach-border);1177  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1178  color: var(--peach-t1);1179  padding: 0;1180}1181.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1182  color: var(--peach-t0);1183  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1184  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1185}1186.peach-overlay-title {1187  font-family: var(--font-display);1188  font-style: italic;1189  font-weight: 400;1190  font-size: 20px;1191  line-height: 1;1192  color: var(--peach-t0);1193  flex: 1;1194  text-align: center;1195}1196/* Balances the 28px back button so the title stays visually centred */1197.peach-overlay-spacer {1198  width: 28px;1199  flex: 0 0 28px;1200}12011202.peach-overlay-card {1203  background: var(--peach-s1);1204  border: 1px solid var(--peach-t3);1205  border-radius: 12px;1206  overflow: hidden;1207  width: 100%;1208}12091210.peach-onboarding-alt-actions {1211  display: flex;1212  flex-direction: column;1213  gap: 4px;1214  padding: 0;1215}12161217.peach-settings-copy {1218  margin: 0 0 10px;1219  font-size: 0.6875rem;1220  line-height: 1.5;1221  color: var(--peach-t2);1222}12231224.peach-settings-copy strong {1225  color: var(--peach-t0);1226}12271228.peach-settings-copy--spacious {1229  margin-bottom: 12px;1230}12311232.peach-settings-copy--result {1233  color: var(--peach-accent);1234  font-size: 0.8125rem;1235  text-align: center;1236  padding: 8px 0;1237}12381239.peach-settings-copy--danger {1240  color: var(--peach-breach);1241}12421243.peach-settings-copy--success {1244  color: var(--peach-accent);1245}12461247.peach-inline-feedback {1248  font-size: 0.6875rem;1249  margin: 10px 0 0;1250}12511252.peach-inline-feedback--ok {1253  color: var(--peach-accent);1254}12551256.peach-inline-feedback--error {1257  color: var(--peach-breach);1258}12591260.peach-inline-feedback--muted {1261  color: var(--peach-t2);1262  font-size: 0.625rem;1263  margin: 4px 0;1264}12651266.peach-inline-feedback--spaced {1267  margin-top: 12px;1268}12691270.peach-settings-actions--row {1271  display: flex;1272  gap: 6px;1273}12741275.peach-settings-actions--end {1276  margin-top: 14px;1277  justify-content: flex-end;1278}12791280.peach-settings-stack {1281  display: flex;1282  flex-direction: column;1283  gap: 6px;1284}12851286.peach-settings-stack--tight {1287  gap: 4px;1288}12891290.peach-settings-stack--spacious {1291  gap: 8px;1292}12931294.peach-settings-input {1295  width: 100%;1296  box-sizing: border-box;1297  padding: 8px 10px;1298  background: rgba(0, 0, 0, 0.22);1299  border: 1px solid transparent;1300  border-radius: 6px;1301  color: var(--peach-t0);1302  font-family: var(--font-ui);1303  font-size: 0.75rem;1304  outline: none;1305  transition: border-color 120ms ease, background 120ms ease;1306}13071308.peach-settings-input:focus {1309  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1310  background: rgba(0, 0, 0, 0.28);1311}13121313.peach-settings-input[type="password"] {1314  font-family: var(--font-mono);1315  letter-spacing: 0.04em;1316}13171318.peach-hidden-file-input {1319  display: none;1320}13211322.peach-checkbox-note {1323  display: flex;1324  align-items: flex-start;1325  gap: 8px;1326  font-size: 0.6875rem;1327  color: var(--peach-t1);1328  cursor: pointer;1329  margin: 12px 0;1330}13311332.peach-checkbox-note input {1333  margin-top: 1px;1334}13351336.peach-danger-notice {1337  background: rgba(220, 80, 60, 0.08);1338  border: 1px solid rgba(220, 80, 60, 0.2);1339  border-radius: 6px;1340  padding: 9px 11px;1341  font-size: 0.6875rem;1342  color: var(--peach-t1);1343  line-height: 1.5;1344}13451346.peach-info-notice {1347  font-size: 0.6875rem;1348  color: var(--peach-t1);1349  line-height: 1.5;1350  background: var(--surface-card);1351  border: 1px solid var(--peach-t3);1352  border-radius: 6px;1353  padding: 8px 10px;1354}13551356.peach-info-notice--warn {1357  border-color: rgba(220, 38, 38, 0.4);1358  background: rgba(220, 38, 38, 0.06);1359  color: rgba(220, 38, 38, 0.92);1360  margin-bottom: 8px;1361}13621363/* Warm helpful-context note — reads as a soft aside, not an alert. */1364.peach-info-notice--note {1365  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);1366  border-color: color-mix(in srgb, var(--peach-accent) 18%, transparent);1367  color: var(--peach-t2);1368}13691370.peach-strength-row {1371  display: flex;1372  align-items: center;1373  gap: 8px;1374  margin-bottom: 10px;1375}13761377.peach-strength-track {1378  flex: 1;1379  height: 4px;1380  background: var(--peach-s2);1381  border-radius: 2px;1382  overflow: hidden;1383}13841385.peach-strength-fill {1386  height: 100%;1387  border-radius: 2px;1388  transition: width 120ms ease, background 120ms ease;1389}13901391/* ── Type selector tabs ── */1392.peach-type-tabs {1393  display: flex;1394  gap: 0;1395  background: var(--peach-t4);1396  border-radius: 8px;1397  padding: 3px;1398}13991400.peach-type-tab {1401  flex: 1;1402  display: flex;1403  align-items: center;1404  justify-content: center;1405  gap: 6px;1406  padding: 6px 10px;1407  border-radius: 6px;1408  border: none;1409  background: transparent;1410  cursor: pointer;1411  font-family: Inter, system-ui, sans-serif;1412  font-size: 0.6875rem;1413  font-weight: 400;1414  letter-spacing: 0.04em;1415  color: var(--peach-t1);1416  transition: background 150ms ease, color 150ms ease;1417}14181419.peach-type-tab.is-active {1420  background: var(--peach-s2);1421  color: var(--peach-t0);1422  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1423}14241425.peach-type-tab:not(.is-active):hover {1426  color: var(--peach-t0);1427}14281429.peach-type-tab svg {1430  opacity: 0.7;1431  flex-shrink: 0;1432}14331434.peach-type-tab.is-active svg {1435  opacity: 1;1436}14371438/* ── List view ───────────────────────────────────────────────────────── */1439.peach-list-top {1440  padding: 0 10px;1441  min-height: 46px;1442  display: flex;1443  align-items: center;1444  gap: 6px;1445  border-bottom: 1px solid var(--peach-t3);1446  flex-shrink: 0;1447  background: var(--peach-s1);1448}14491450.peach-vault-list {1451  flex: 1;1452  overflow-y: auto;1453  scrollbar-width: none;1454}1455.peach-vault-list::-webkit-scrollbar { display: none; }14561457/* Scrollbar — vault list */1458.peach-vault-list {1459  scrollbar-width: thin;1460  scrollbar-color: var(--peach-t3) transparent;1461}14621463.peach-vault-list::-webkit-scrollbar {1464  width: 3px;1465}14661467.peach-vault-list::-webkit-scrollbar-thumb {1468  background: var(--peach-t3);1469  border-radius: 2px;1470}14711472.peach-entry-row {1473  width: 100%;1474  display: flex;1475  align-items: center;1476  gap: 10px;1477  padding: 9px 16px;1478  background: transparent;1479  border: none;1480  border-bottom: 1px solid var(--peach-t3);1481  cursor: pointer;1482  color: inherit;1483  text-align: left;1484  transition: background 80ms ease;1485}1486.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1487.peach-entry-row:last-child { border-bottom: none; }1488.peach-entry-row.is-active {1489  box-shadow: inset 2px 0 0 var(--peach-accent);1490  background: rgba(240,232,216,0.03);1491}1492.peach-entry-row:focus-visible {1493  outline: none;1494  box-shadow: 0 0 0 1px var(--peach-border-accent);1495  background: rgba(240,232,216,0.03);1496}1497.peach-entry-row-icon {1498  width: 26px; height: 26px;1499  border-radius: 7px;1500  border: 1px solid var(--peach-t3);1501  display: flex; align-items: center; justify-content: center;1502  color: var(--peach-t2);1503  flex-shrink: 0;1504}1505.peach-entry-row-icon.is-breach {1506  border-color: rgba(220,80,60,0.3);1507  color: rgba(220,80,60,0.7);1508}15091510/* Title-initials chip used as the favicon fallback for login entries whose1511 * real favicon hasn't been cached by the browser yet (freshly-imported,1512 * never-visited domains). Background colour is hashed from the title so1513 * the same entry always shows the same chip. The chip fits the same1514 * 26×26 row icon slot the favicon would take. */1515.peach-favicon-initials {1516  display: inline-flex;1517  align-items: center;1518  justify-content: center;1519  width: 100%;1520  height: 100%;1521  border-radius: 4px;1522  font-family: "IBM Plex Mono", monospace;1523  font-size: 0.5625rem;1524  font-weight: 600;1525  letter-spacing: 0.04em;1526  color: rgba(240, 232, 216, 0.92);1527  text-transform: uppercase;1528  user-select: none;1529}1530.peach-entry-row-info { flex: 1; min-width: 0; }1531.peach-entry-row-name {1532  display: block;1533  font-family: var(--font-display);1534  font-size: 1.0625rem;1535  font-style: italic;1536  font-weight: 400;1537  color: var(--peach-t0);1538  line-height: 1.2;1539  white-space: nowrap;1540  overflow: hidden;1541  text-overflow: ellipsis;1542}1543.peach-entry-row-meta {1544  display: block;1545  font-family: "IBM Plex Mono", monospace;1546  font-size: 0.5625rem;1547  color: var(--peach-t2);1548  margin-top: 1px;1549  letter-spacing: 0.05em;1550}1551.peach-entry-row-dot {1552  width: 5px; height: 5px;1553  border-radius: 50%;1554  background: rgba(220,80,60,0.7);1555  flex-shrink: 0;1556}1557.peach-new-entry-row {1558  display: flex;1559  align-items: center;1560  justify-content: center;1561  gap: 6px;1562  width: 100%;1563  padding: 11px;1564  background: transparent;1565  border: none;1566  border-top: 1px solid var(--peach-t3);1567  color: var(--peach-t2);1568  font-family: "IBM Plex Mono", monospace;1569  font-size: 0.5625rem;1570  text-transform: uppercase;1571  letter-spacing: 0.14em;1572  cursor: pointer;1573  flex-shrink: 0;1574  transition: color 120ms ease, background 120ms ease;1575}1576.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }15771578/* ── Multi-select mode ─────────────────────────────────────────────── */15791580/* Select-mode trigger button in sort bar — same shape as trash btn */1581.peach-sort-select-btn {1582  display: flex;1583  align-items: center;1584  justify-content: center;1585  padding: 3px 5px;1586  background: transparent;1587  border: none;1588  cursor: pointer;1589  color: var(--peach-t2);1590  border-radius: 4px;1591  transition: color 140ms ease, background 140ms ease;1592}1593.peach-sort-select-btn:hover {1594  color: var(--peach-t1);1595  background: var(--peach-t3);1596}15971598/* Sort bar in select mode */1599.peach-select-cancel-btn {1600  background: transparent;1601  border: none;1602  padding: 0 4px;1603  cursor: pointer;1604  font-family: "IBM Plex Mono", monospace;1605  font-size: 0.5625rem;1606  letter-spacing: 0.12em;1607  text-transform: uppercase;1608  color: var(--peach-t2);1609  transition: color 140ms ease;1610  flex-shrink: 0;1611}1612.peach-select-cancel-btn:hover { color: var(--peach-t0); }16131614.peach-select-count-label {1615  flex: 1;1616  text-align: center;1617  font-family: "IBM Plex Mono", monospace;1618  font-size: 0.5625rem;1619  letter-spacing: 0.14em;1620  text-transform: uppercase;1621  color: var(--peach-t1);1622}16231624.peach-select-all-btn {1625  background: transparent;1626  border: none;1627  padding: 0 4px;1628  cursor: pointer;1629  font-family: "IBM Plex Mono", monospace;1630  font-size: 0.5625rem;1631  letter-spacing: 0.12em;1632  text-transform: uppercase;1633  color: var(--peach-t2);1634  transition: color 140ms ease;1635  flex-shrink: 0;1636}1637.peach-select-all-btn:hover { color: var(--peach-accent); }16381639/* List in select mode */1640.peach-vault-list.is-selecting .peach-entry-row {1641  cursor: default;1642}1643.peach-vault-list.is-selecting .peach-entry-row:hover {1644  background: rgba(240,232,216,0.02);1645}1646.peach-vault-list.is-selecting .peach-entry-row.is-selected {1647  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1648}1649.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1650  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1651}16521653/* Select indicator circles in icon slot */1654.peach-entry-row-icon.is-select-icon {1655  color: var(--peach-t2);1656}1657.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1658  color: var(--peach-accent);1659}16601661/* Delete action bar at bottom (replaces new-entry row) */1662.peach-select-action-bar {1663  display: flex;1664  align-items: center;1665  justify-content: center;1666  gap: 7px;1667  width: 100%;1668  padding: 11px;1669  background: transparent;1670  border: none;1671  border-top: 1px solid var(--peach-t3);1672  color: var(--peach-t1);1673  font-family: "IBM Plex Mono", monospace;1674  font-size: 0.5625rem;1675  text-transform: uppercase;1676  letter-spacing: 0.14em;1677  cursor: pointer;1678  flex-shrink: 0;1679  transition: color 120ms ease, background 120ms ease;1680}1681.peach-select-action-bar:not(:disabled):hover {1682  color: var(--peach-t0);1683  background: rgba(220,80,60,0.06);1684}1685.peach-select-action-bar:not(:disabled):hover svg {1686  stroke: rgba(220,80,60,0.8);1687}1688.peach-select-action-bar:disabled,1689.peach-select-action-bar.is-empty {1690  color: var(--peach-t2);1691  cursor: default;1692  opacity: 0.5;1693}1694.peach-search-counter-list {1695  white-space: nowrap;1696  flex-shrink: 0;1697}1698.peach-list-empty {1699  min-height: 180px;1700  display: grid;1701  place-items: center;1702  color: var(--peach-t2);1703  font-family: "IBM Plex Mono", monospace;1704  font-size: 0.6875rem;1705}17061707/* ── Settings view ───────────────────────────────────────────────────── */1708.peach-settings-body {1709  flex: 1;1710  overflow-y: auto;1711  min-height: 0;1712  display: flex;1713  flex-direction: column;1714  padding: 2px 0 10px;1715}1716.peach-settings-group {1717  margin: 4px 10px;1718  padding: 9px 14px 11px;1719  border-radius: 12px;1720  border: 1px solid rgba(255, 255, 255, 0.07);1721  background: rgba(26, 20, 16, 0.60);1722  backdrop-filter: blur(10px) saturate(1.3);1723  -webkit-backdrop-filter: blur(10px) saturate(1.3);1724}17251726.peach-settings-group + .peach-settings-group {1727  margin-top: 6px;1728}17291730@supports not (backdrop-filter: blur(1px)) {1731  .peach-settings-group {1732    background: rgba(26, 20, 16, 0.90);1733    border-color: rgba(255, 255, 255, 0.09);1734    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1735  }1736}17371738.light .peach-settings-group,1739[data-theme="light"] .peach-settings-group {1740  background: rgba(245, 237, 226, 0.70);1741  border-color: rgba(26, 18, 8, 0.08);1742  backdrop-filter: blur(10px) saturate(1.2);1743  -webkit-backdrop-filter: blur(10px) saturate(1.2);1744}17451746@supports not (backdrop-filter: blur(1px)) {1747  .light .peach-settings-group,1748  [data-theme="light"] .peach-settings-group {1749    background: rgba(245, 237, 226, 0.97);1750    border-color: rgba(26, 18, 8, 0.10);1751  }1752}1753.peach-export-intro {1754  padding-bottom: 8px;1755}1756.peach-export-card {1757  display: grid;1758  gap: 10px;1759}1760.peach-rune-canvas {1761  border-radius: 8px;1762  background: rgba(0, 0, 0, 0.22);1763  flex: 1;1764  align-self: center;1765}1766.peach-script-input {1767  font-family: "PeachScript", monospace;1768  font-size: 0.6875rem;1769  line-height: 1.9;1770  letter-spacing: 0.06em;1771  color: var(--peach-t0);1772  background: rgba(0, 0, 0, 0.22);1773  border: none;1774  border-radius: 6px;1775  padding: 12px;1776  width: 100%;1777  min-height: 96px;1778  resize: vertical;1779  word-break: break-all;1780  scrollbar-width: none;1781  -ms-overflow-style: none;1782}17831784.peach-script-input::-webkit-scrollbar { display: none; }1785.peach-csv-warning {1786  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1787  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1788  color: var(--peach-t0);1789  border-radius: 6px;1790  padding: 10px 12px;1791  margin-bottom: 8px;1792  font-size: 0.75rem;1793  line-height: 1.45;1794}1795.peach-export-card--primary {1796  background:1797    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1798}17991800/* Export menu — distribute the three format cards across the popup. */1801.peach-export-menu {1802  display: flex;1803  flex-direction: column;1804  flex: 1;1805  min-height: 0;1806}1807.peach-export-menu .peach-settings-group {1808  flex: 1;1809  display: flex;1810  flex-direction: column;1811  justify-content: center;1812  gap: 10px;1813}18141815/* Result view — the script-string fills the remaining vertical surface. */1816.peach-export-result-group {1817  flex: 1;1818  display: flex;1819  flex-direction: column;1820  min-height: 0;1821  border-bottom: none;1822}1823.peach-export-result-group .peach-export-card {1824  flex: 1;1825  min-height: 0;1826  display: flex;1827  flex-direction: column;1828  gap: 10px;1829}1830.peach-export-result-group .peach-export-card-copy {1831  flex-shrink: 0;1832}1833.peach-export-result-group .peach-settings-label {1834  flex-shrink: 0;1835}1836.peach-export-result-group button {1837  flex-shrink: 0;1838}1839.peach-export-card-head {1840  display: flex;1841  align-items: center;1842  justify-content: space-between;1843  gap: 10px;1844}1845.peach-export-card-copy {1846  margin: 0;1847  font-size: 0.75rem;1848  line-height: 1.55;1849  color: var(--peach-t1);1850}1851.peach-export-note {1852  margin: 0;1853  font-size: 0.625rem;1854  line-height: 1.5;1855  color: var(--peach-t2);1856}1857.peach-export-strength-track {1858  height: 3px;1859  background: var(--peach-border);1860  border-radius: 2px;1861  margin: 4px 0 2px;1862  overflow: hidden;1863}1864.peach-export-strength-fill {1865  height: 100%;1866  border-radius: 2px;1867  transition: width 250ms ease, background 250ms ease;1868}1869.peach-export-strength-warn {1870  margin: 0;1871  font-size: 0.625rem;1872  line-height: 1.5;1873  color: #e84040;1874  font-family: "IBM Plex Mono", monospace;1875}1876.peach-export-strength-hint {1877  margin: 0;1878  font-size: 0.625rem;1879  line-height: 1.5;1880  color: var(--peach-t2);1881  font-family: "IBM Plex Mono", monospace;1882}1883.peach-export-pill {1884  display: inline-flex;1885  align-items: center;1886  padding: 4px 8px;1887  border-radius: 999px;1888  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1889  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1890  color: var(--peach-accent);1891  font-family: "IBM Plex Mono", monospace;1892  font-size: 0.5rem;1893  letter-spacing: 0.12em;1894  text-transform: uppercase;1895  white-space: nowrap;1896}1897.peach-export-pill--danger {1898  border-color: rgba(220,80,60,0.22);1899  background: rgba(220,80,60,0.08);1900  color: var(--peach-breach);1901}1902.peach-settings-label {1903  margin: 0 0 6px;1904  font-family: "IBM Plex Mono", monospace;1905  font-size: 0.5rem;1906  text-transform: uppercase;1907  letter-spacing: 0.18em;1908  color: var(--peach-t2);1909}1910.peach-settings-row {1911  display: flex;1912  align-items: center;1913  justify-content: space-between;1914  gap: 12px;1915  min-height: 34px;1916  padding: 6px 0;1917  font-size: 0.8125rem;1918  color: var(--peach-t1);1919}1920.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1921.peach-settings-value {1922  font-family: "IBM Plex Mono", monospace;1923  font-size: 0.625rem;1924  color: var(--peach-t2);1925}19261927.peach-settings-value--status {1928  display: flex;1929  align-items: center;1930  gap: 6px;1931}19321933.peach-settings-link {1934  font-family: "IBM Plex Mono", monospace;1935  font-size: 0.625rem;1936  color: var(--peach-accent);1937  text-decoration: none;1938  cursor: pointer;1939}1940.peach-settings-link:hover {1941  text-decoration: underline;1942}19431944.peach-settings-row--stack {1945  flex-direction: column;1946  align-items: stretch;1947  gap: 6px;1948}19491950.peach-settings-row--top {1951  align-items: flex-start;1952}19531954.peach-settings-row-main {1955  display: flex;1956  flex-direction: column;1957  gap: 4px;1958  flex: 1;1959}1960.peach-toggle {1961  width: 28px; height: 16px;1962  border-radius: 999px;1963  background: var(--peach-t3);1964  border: 1px solid var(--peach-t3);1965  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1966  flex-shrink: 0;1967  transition: background 200ms ease, border-color 200ms ease;1968  cursor: pointer;1969}1970.peach-toggle.is-on {1971  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1972  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1973}1974.peach-toggle-knob {1975  width: 10px; height: 10px;1976  border-radius: 50%;1977  background: var(--peach-t2);1978  flex-shrink: 0;1979  transform: translateX(0px);1980  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1981}1982.peach-toggle.is-on .peach-toggle-knob {1983  background: var(--peach-accent);1984  transform: translateX(12px);1985}1986.peach-settings-footer {1987  display: flex;1988  align-items: center;1989  gap: 8px;1990  margin-top: auto;1991  padding: 14px 16px 8px;1992  font-family: "IBM Plex Mono", monospace;1993  font-size: 0.5625rem;1994  color: var(--peach-t2);1995}19961997/* ── Settings home navigation ──────────────────────────────────────────── */1998.peach-settings-nav-label {1999  margin: 0 0 2px;2000  padding: 12px 16px 4px;2001  font-family: "IBM Plex Mono", monospace;2002  font-size: 0.5rem;2003  text-transform: uppercase;2004  letter-spacing: 0.18em;2005  color: var(--peach-t2);2006}20072008.peach-settings-cat-row {2009  display: flex;2010  align-items: center;2011  gap: 10px;2012  width: 100%;2013  padding: 9px 16px;2014  background: none;2015  border: none;2016  border-bottom: 1px solid var(--peach-t3);2017  cursor: pointer;2018  text-align: left;2019  color: inherit;2020  transition: background var(--peach-dur-80) ease;2021}2022.peach-settings-cat-row:hover {2023  background: var(--peach-t3);2024}2025.peach-settings-cat-row:last-child {2026  border-bottom: none;2027}20282029.peach-settings-cat-icon {2030  width: 28px;2031  height: 28px;2032  border-radius: 7px;2033  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2034  color: var(--peach-accent);2035  display: flex;2036  align-items: center;2037  justify-content: center;2038  flex-shrink: 0;2039}2040/* Light theme: peach-on-cream is too low-contrast — both colors are warm.2041   Darken the icon stroke to ink and bump the bg tint so the icon reads2042   sharply while the cell still feels accent-tinted. */2043.light .peach-settings-cat-icon {2044  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);2045  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));2046}20472048.peach-settings-cat-content {2049  flex: 1;2050  display: flex;2051  flex-direction: column;2052  gap: 2px;2053  min-width: 0;2054}20552056.peach-settings-cat-name {2057  font-size: 0.8125rem;2058  font-weight: 450;2059  color: var(--peach-t0);2060  line-height: 1.2;2061}20622063.peach-settings-cat-desc {2064  font-size: 0.625rem;2065  color: var(--peach-t2);2066  line-height: 1.3;2067  white-space: nowrap;2068  overflow: hidden;2069  text-overflow: ellipsis;2070}20712072.peach-settings-cat-chevron {2073  color: var(--peach-t2);2074  flex-shrink: 0;2075  opacity: 0.5;2076}20772078/* ── Settings sub-view section labels ──────────────────────────────────── */2079.peach-settings-sub-label {2080  margin: 12px 0 4px;2081  font-family: "IBM Plex Mono", monospace;2082  font-size: 0.5rem;2083  text-transform: uppercase;2084  letter-spacing: 0.18em;2085  color: var(--peach-t2);2086}2087.peach-settings-sub-label:first-child {2088  margin-top: 4px;2089}20902091/* ── Settings: collapsible Advanced section ─────────────────────────────── */2092.peach-settings-advanced-toggle {2093  display: flex;2094  align-items: center;2095  justify-content: space-between;2096  width: 100%;2097  background: none;2098  border: none;2099  cursor: pointer;2100  padding: 12px 0 4px;2101  margin: 0;2102  color: inherit;2103}2104.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {2105  color: var(--peach-t1);2106}2107.peach-settings-advanced-chevron {2108  font-size: 0.5625rem;2109  color: var(--peach-t3);2110  letter-spacing: 0;2111  transition: color 120ms ease;2112}21132114/* ── Feedback form ──────────────────────────────────────────────────────── */2115.peach-feedback-group {2116  flex: 1;2117  display: flex;2118  flex-direction: column;2119  border-bottom: none;2120}21212122.peach-feedback-intro {2123  margin: 4px 0 14px;2124  font-size: 0.75rem;2125  line-height: 1.55;2126  color: var(--peach-t1);2127}21282129.peach-feedback-chips {2130  display: flex;2131  flex-wrap: wrap;2132  gap: 6px;2133  margin-bottom: 14px;2134}21352136.peach-feedback-chip {2137  padding: 4px 10px;2138  border-radius: 999px;2139  border: 1px solid var(--peach-t3);2140  background: none;2141  color: var(--peach-t2);2142  font-size: 0.6875rem;2143  font-family: var(--font-ui);2144  cursor: pointer;2145  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2146    background var(--peach-dur-80) ease;2147}2148.peach-feedback-chip:hover {2149  border-color: var(--peach-t2);2150  color: var(--peach-t1);2151}2152.peach-feedback-chip.is-active {2153  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);2154  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));2155  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);2156  box-shadow:2157    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),2158    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);2159  font-weight: 700;2160}21612162.peach-feedback-textarea {2163  flex: 1;2164  width: 100%;2165  min-height: 120px;2166  box-sizing: border-box;2167  background: rgba(0, 0, 0, 0.22);2168  border: 1px solid transparent;2169  border-radius: 6px;2170  color: var(--peach-t0);2171  font-size: 0.75rem;2172  font-family: var(--font-ui);2173  line-height: 1.5;2174  padding: 8px 10px;2175  resize: none;2176  outline: none;2177  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2178}2179.peach-feedback-textarea:focus {2180  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2181  background: rgba(0, 0, 0, 0.28);2182}2183.peach-feedback-textarea:focus {2184  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2185}2186.peach-feedback-textarea::placeholder {2187  color: var(--peach-t2);2188}21892190.peach-feedback-meta {2191  margin: 6px 0 0;2192  font-size: 0.625rem;2193  color: var(--peach-t2);2194  font-family: "IBM Plex Mono", monospace;2195}21962197.peach-feedback-result {2198  margin: 8px 0 0;2199  font-size: 0.6875rem;2200  font-family: "IBM Plex Mono", monospace;2201}2202.peach-feedback-result--ok { color: var(--peach-sync-ok); }2203.peach-feedback-result--err { color: var(--peach-breach); }22042205.peach-feedback-submit {2206  width: 100%;2207  margin-top: 12px;2208  justify-content: center;2209}22102211.peach-feedback-anon {2212  margin: 8px 0 0;2213  font-size: 0.625rem;2214  color: var(--peach-t2);2215  text-align: center;2216}22172218.peach-feedback-thanks {2219  margin: auto 0;2220  padding: 18px 14px;2221  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);2222  border-radius: 8px;2223  background:2224    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),2225    rgba(0, 0, 0, 0.18);2226  color: var(--peach-t1);2227  text-align: center;2228}22292230.peach-feedback-thanks p {2231  margin: 0;2232  font-size: 0.75rem;2233  line-height: 1.5;2234}22352236.peach-feedback-thanks-title {2237  color: var(--peach-t0);2238  font-family: "Cormorant Garamond", serif;2239  font-size: 1.375rem !important;2240  line-height: 1.1 !important;2241  margin-bottom: 8px !important;2242}22432244.peach-passkey-badge {2245  margin-left: 8px;2246  font-size: 0.625rem;2247  letter-spacing: 0.06em;2248  text-transform: uppercase;2249  color: var(--peach-t2);2250  font-family: var(--font-ui);2251  vertical-align: middle;2252}22532254.peach-passkey-delete-btn {2255  color: var(--peach-breach);2256  border-color: rgba(229, 85, 85, 0.25);2257}22582259.peach-passkey-delete-confirm {2260  display: flex;2261  align-items: center;2262  gap: 8px;2263  padding: 8px 10px;2264  background: rgba(229, 85, 85, 0.06);2265  border: 1px solid rgba(229, 85, 85, 0.2);2266  border-radius: 6px;2267}22682269.peach-passkey-delete-confirm-copy {2270  flex: 1;2271  font-size: 0.6875rem;2272  color: var(--peach-t1);2273}22742275.peach-passkey-delete-btn--confirm {2276  color: var(--peach-breach);2277  border-color: rgba(229, 85, 85, 0.4);2278}22792280.peach-passkey-activity {2281  flex-direction: column;2282  align-items: flex-start;2283  gap: 4px;2284}22852286.peach-passkey-meta {2287  font-size: 0.6875rem;2288  color: var(--peach-t2);2289}22902291.peach-passkey-actions {2292  position: relative;2293  z-index: 1;2294  margin-top: 14px;2295  display: flex;2296  flex-direction: column;2297  gap: 8px;2298}22992300.peach-passkey-approval {2301  display: flex;2302  flex-direction: column;2303  align-items: center;2304  padding: 16px 20px 14px;2305  gap: 8px;2306  text-align: center;2307}23082309.peach-passkey-approval-icon {2310  width: 36px;2311  height: 36px;2312  border-radius: 10px;2313  background: var(--peach-s2);2314  border: 1px solid var(--peach-t3);2315  display: flex;2316  align-items: center;2317  justify-content: center;2318  flex-shrink: 0;2319  color: var(--peach-accent);2320}23212322.peach-passkey-approval-icon img,2323.peach-passkey-approval-icon svg {2324  width: 22px;2325  height: 22px;2326  border-radius: 5px;2327}23282329.peach-passkey-approval-rp {2330  font-family: var(--font-ui);2331  font-size: 0.75rem;2332  color: var(--peach-t2);2333  letter-spacing: 0.03em;2334}23352336.peach-passkey-approval-action {2337  font-family: var(--font-display);2338  font-style: italic;2339  font-weight: 300;2340  font-size: 18px;2341  color: var(--peach-t0);2342  line-height: 1.1;2343  margin: 1px 0;2344}23452346.peach-passkey-approval-user {2347  font-family: var(--font-mono);2348  font-size: 0.6875rem;2349  color: var(--peach-t1);2350  background: var(--peach-s2);2351  border: 1px solid var(--peach-t3);2352  border-radius: 4px;2353  padding: 3px 8px;2354}23552356.peach-passkey-approval-notice {2357  font-size: 0.625rem;2358  color: var(--peach-t2);2359  line-height: 1.5;2360  max-width: 220px;2361}23622363.peach-passkey-approval-actions {2364  display: flex;2365  gap: 8px;2366  width: 100%;2367  margin-top: 6px;2368}23692370.peach-passkey-approval-actions .peach-btn {2371  flex: 1;2372}23732374/* ── Inline generator drawer ── */2375.peach-generator-drawer {2376  display: grid;2377  grid-template-rows: 0fr;2378  transition: grid-template-rows 320ms var(--peach-curve-arrival);2379  overflow: hidden;2380}2381.peach-generator-drawer.is-open {2382  grid-template-rows: 1fr;2383}2384.peach-generator-drawer-inner {2385  min-height: 0;2386  overflow: hidden;2387}2388.peach-generator-drawer-content {2389  border-top: 1px solid var(--peach-t3);2390  padding: 8px 0 4px;2391  display: flex;2392  flex-direction: column;2393  gap: 8px;2394}23952396/* ── Compact generator (inside entry edit) ── */2397.peach-generator-drawer-content--compact {2398  border-top: 1px solid var(--peach-t3);2399  padding: 8px 0 2px;2400  gap: 7px;2401}2402.peach-pwgen-compact-display-row {2403  display: flex;2404  align-items: center;2405  gap: 6px;2406}2407.peach-pwgen-compact-output {2408  flex: 1;2409  min-width: 0;2410  font-family: "IBM Plex Mono", monospace;2411  font-size: 0.6875rem;2412  font-weight: 400;2413  letter-spacing: 0.04em;2414  color: var(--peach-t0);2415  background: rgba(240, 232, 216, 0.04);2416  border: 1px solid var(--peach-t3);2417  border-radius: 5px;2418  padding: 5px 8px;2419  line-height: 1.5;2420  outline: none;2421  transition: border-color 120ms ease;2422}24232424.peach-pwgen-compact-output:focus {2425  border-color: var(--peach-t1);2426}2427.peach-pwgen-compact-controls {2428  display: flex;2429  align-items: center;2430  gap: 6px;2431}2432.peach-pwgen-compact-slider {2433  flex: 1;2434  min-width: 0;2435  height: 2px !important;2436}2437.peach-pwgen-compact-controls .peach-pwgen-len-num {2438  flex-shrink: 0;2439  min-width: 18px;2440  text-align: right;2441}2442.peach-pwgen-compact-pills {2443  display: flex;2444  gap: 3px;2445  flex-shrink: 0;2446}2447.peach-pwgen-compact-pills .peach-pwgen-pill {2448  padding: 2px 7px;2449  font-size: 0.5rem;2450}2451.peach-pwgen-compact-use {2452  flex-shrink: 0;2453  font-size: 0.625rem !important;2454  padding: 3px 9px !important;2455  min-height: 22px !important;2456  border-radius: 5px !important;2457}24582459/* ── Password edit row (input + eye toggle side-by-side) ── */2460.peach-password-edit-row {2461  display: flex;2462  align-items: center;2463  gap: 6px;2464}2465.peach-password-edit-row .peach-inline-input {2466  flex: 1;2467  min-width: 0;2468}24692470/* ── Generate toggle link ── */2471.peach-generate-toggle-link {2472  display: inline-flex;2473  align-items: center;2474  gap: 5px;2475  background: none;2476  border: none;2477  padding: 0;2478  cursor: pointer;2479  font-family: "IBM Plex Mono", monospace;2480  font-size: 0.625rem;2481  color: var(--peach-t2);2482  letter-spacing: 0.04em;2483  transition: color 120ms ease;2484  align-self: flex-start;2485}2486.peach-generate-toggle-link:hover {2487  color: var(--peach-accent);2488}24892490/* Holds the generate + history toggle links on one row under the editor. */2491.peach-password-edit-links {2492  display: flex;2493  align-items: center;2494  gap: 14px;2495  flex-wrap: wrap;2496}24972498/* ── Past-password history list ── */2499.peach-password-history {2500  display: grid;2501  gap: 4px;2502  margin-top: 2px;2503  max-height: 168px;2504  overflow-y: auto;2505  scrollbar-width: thin;2506}2507.peach-history-row {2508  display: flex;2509  align-items: center;2510  justify-content: space-between;2511  gap: 8px;2512  padding: 5px 7px;2513  border-radius: 7px;2514  background: color-mix(in srgb, var(--peach-accent) 5%, transparent);2515  border: 1px solid color-mix(in srgb, var(--peach-accent) 9%, transparent);2516}2517.peach-history-main {2518  display: flex;2519  flex-direction: column;2520  gap: 1px;2521  min-width: 0;2522  flex: 1;2523}2524.peach-history-pw {2525  font-family: "IBM Plex Mono", monospace;2526  font-size: 0.6875rem;2527  color: var(--peach-t1);2528  white-space: nowrap;2529  overflow: hidden;2530  text-overflow: ellipsis;2531}2532.peach-history-pw .peach-password-mask {2533  letter-spacing: 0.08em;2534  color: var(--peach-t2);2535}2536.peach-history-age {2537  font-family: "IBM Plex Mono", monospace;2538  font-size: 0.5625rem;2539  color: var(--peach-t3, var(--peach-t2));2540  letter-spacing: 0.03em;2541}2542.peach-history-actions {2543  display: flex;2544  align-items: center;2545  gap: 2px;2546  flex-shrink: 0;2547}2548.peach-history-use {2549  font-family: "IBM Plex Mono", monospace;2550  font-size: 0.5625rem;2551  letter-spacing: 0.05em;2552  padding: 3px 7px;2553}2554.peach-history-empty {2555  font-family: "IBM Plex Mono", monospace;2556  font-size: 0.625rem;2557  line-height: 1.45;2558  color: var(--peach-t2);2559  padding: 6px 8px;2560  border-radius: 7px;2561  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);2562  border: 1px solid color-mix(in srgb, var(--peach-accent) 8%, transparent);2563}25642565/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2566.peach-entry-body {2567  flex: 1;2568  overflow-y: auto;2569  overflow-x: hidden;2570  scrollbar-width: none;2571  -ms-overflow-style: none;2572  overscroll-behavior: contain;2573  display: grid;2574  gap: 10px;2575  align-content: start;2576  padding: 10px 20px 14px;2577  min-width: 0;2578  min-height: 0;2579}2580.peach-entry-body::-webkit-scrollbar { display: none; }25812582/* Type-toggle pills + inline note toolbar */2583.peach-new-type-row {2584  display: flex;2585  align-items: center;2586  gap: 6px;2587  margin-bottom: 2px;2588}2589.peach-new-type-btn {2590  background: transparent;2591  border: 1px solid var(--peach-t3);2592  border-radius: 12px;2593  padding: 3px 10px;2594  font-family: "IBM Plex Mono", monospace;2595  font-size: 0.5625rem;2596  letter-spacing: 0.12em;2597  text-transform: uppercase;2598  color: var(--peach-t2);2599  cursor: pointer;2600  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2601}2602.peach-new-type-btn.is-active {2603  color: var(--peach-t0);2604  border-color: var(--peach-accent);2605  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2606}2607.peach-new-type-btn:not(.is-active):hover {2608  color: var(--peach-t1);2609  border-color: var(--peach-t2);2610}26112612/* Editable title */2613.peach-new-title-wrap { margin: 0 0 2px; }2614.peach-new-title-input {2615  background: transparent;2616  border: none;2617  outline: none;2618  width: 100%;2619  color: var(--peach-t0);2620  font-family: var(--font-display);2621  font-style: italic;2622  font-weight: 400;2623  font-size: 40px;2624  line-height: 0.95;2625  caret-color: var(--peach-accent);2626}2627.peach-new-title-input::placeholder { color: var(--peach-t2); }26282629/* Editable domain field */2630.peach-domain-edit-row {2631  display: flex;2632  align-items: center;2633  gap: 6px;2634}26352636.peach-domain-edit-row .peach-domain-value--edit {2637  flex: 1;2638  width: 0;2639}26402641.peach-domain-url-btn {2642  flex-shrink: 0;2643  background: transparent;2644  border: none;2645  cursor: pointer;2646  color: var(--peach-t3);2647  padding: 2px 3px;2648  display: flex;2649  align-items: center;2650  line-height: 0;2651  border-radius: 3px;2652  transition: color 120ms ease;2653}26542655.peach-domain-url-btn:hover {2656  color: var(--peach-accent);2657}26582659.peach-domain-value--edit {2660  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2661  font-size: 0.625rem;2662  font-style: italic;2663  letter-spacing: 0.12em;2664  color: var(--peach-t1);2665  background: transparent;2666  border: none;2667  border-bottom: 1px solid var(--peach-t3);2668  outline: none;2669  width: 100%;2670  padding: 2px 0;2671  caret-color: var(--peach-accent);2672  transition: border-color 140ms ease, color 140ms ease;2673}2674.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2675.peach-domain-value--edit:focus {2676  border-bottom-color: rgba(240, 232, 216, 0.28);2677  color: var(--peach-t0);2678}26792680/* Editable field values (username, password, totp) */2681.peach-field-value--edit {2682  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2683  font-size: 0.8125rem;2684  color: var(--peach-t0);2685  background: transparent;2686  border: none;2687  border-bottom: 1px solid var(--peach-t3);2688  outline: none;2689  flex: 1;2690  min-width: 0;2691  padding: 3px 0;2692  caret-color: var(--peach-accent);2693  transition: border-color 140ms ease, color 140ms ease;2694}2695.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2696.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2697.peach-field-value--edit:focus {2698  border-bottom-color: rgba(240, 232, 216, 0.28);2699  color: var(--peach-t0);2700}27012702/* "+ add optional field" links */2703.peach-entry-add-links {2704  display: flex;2705  gap: 12px;2706  flex-wrap: wrap;2707  margin-top: -2px;2708}2709.peach-add-field-link {2710  background: transparent;2711  border: none;2712  padding: 0;2713  cursor: pointer;2714  font-family: "IBM Plex Mono", monospace;2715  font-size: 0.5625rem;2716  letter-spacing: 0.1em;2717  text-transform: uppercase;2718  color: var(--peach-t2);2719  transition: color 140ms ease;2720}2721.peach-add-field-link:hover { color: var(--peach-accent); }27222723/* ── New entry form (legacy classes) ────────────────────────────────── */2724.peach-new-body {2725  flex: 1;2726  overflow-y: auto;2727  padding: 10px 20px 14px;2728}2729.peach-new-name-input {2730  background: transparent;2731  border: none;2732  outline: none;2733  width: 100%;2734  color: var(--peach-t0);2735  font-family: var(--font-display);2736  font-style: italic;2737  font-weight: 400;2738  font-size: 40px;2739  line-height: 0.95;2740  caret-color: var(--peach-accent);2741}2742.peach-new-name-input::placeholder { color: var(--peach-t2); }2743.peach-new-field-input {2744  background: transparent;2745  border: none;2746  outline: none;2747  flex: 1;2748  min-width: 0;2749  caret-color: var(--peach-accent);2750}2751.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }27522753/* ── Canary card ── */2754.peach-canary-card {2755  border: 1px solid rgba(217, 160, 48, 0.2);2756  background: rgba(217, 160, 48, 0.03);2757  border-radius: 8px;2758  padding: 12px;2759}27602761.peach-canary-settings-header {2762  display: flex;2763  align-items: center;2764  justify-content: space-between;2765  cursor: pointer;2766  user-select: none;2767}27682769.peach-canary-card .peach-label {2770  color: rgba(217, 160, 48, 0.85);2771}27722773.peach-canary-card .peach-new-field-input {2774  border-color: rgba(217, 160, 48, 0.25);2775}27762777.peach-canary-card .peach-new-field-input:focus {2778  border-color: rgba(217, 160, 48, 0.5);2779}27802781.peach-canary-body {2782  margin-top: 12px;2783  display: flex;2784  flex-direction: column;2785  gap: 10px;2786}27872788.peach-canary-explainer {2789  display: flex;2790  gap: 10px;2791  padding: 10px 12px;2792  border-radius: 10px;2793  background: rgba(217, 160, 48, 0.06);2794  border: 1px solid rgba(217, 160, 48, 0.22);2795  margin-bottom: 4px;2796}27972798.peach-canary-explainer-icon {2799  font-size: 1rem;2800  flex-shrink: 0;2801  line-height: 1.2;2802}28032804.peach-canary-explainer-title {2805  font-family: var(--font-ui);2806  font-size: 0.6875rem;2807  font-weight: 500;2808  color: rgba(217, 160, 48, 0.9);2809  margin: 0 0 3px;2810}28112812.peach-canary-explainer-copy {2813  font-family: var(--font-ui);2814  font-size: 0.625rem;2815  color: var(--peach-t2);2816  line-height: 1.55;2817  margin: 0;2818}28192820.peach-canary-hint {2821  font-size: 0.625rem;2822  color: var(--peach-t2);2823  font-family: Inter, system-ui, sans-serif;2824  line-height: 1.5;2825  margin-top: 4px;2826}28272828.peach-canary-actions-row {2829  display: flex;2830  align-items: center;2831  gap: 8px;2832}28332834.peach-canary-test-btn {2835  border-color: rgba(217, 160, 48, 0.3);2836  color: rgba(217, 160, 48, 0.85);2837}28382839.peach-canary-test-result {2840  font-size: 0.625rem;2841  font-family: Inter, system-ui, sans-serif;2842}28432844.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2845.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }28462847.peach-canary-badge {2848  display: flex;2849  position: relative;2850  z-index: 1;2851  align-items: center;2852  gap: 5px;2853  padding: 4px 10px;2854  background: rgba(217, 160, 48, 0.12);2855  border: 1px solid rgba(217, 160, 48, 0.35);2856  border-radius: 6px;2857  margin-bottom: 6px;2858  width: fit-content;2859}28602861.peach-canary-badge-label {2862  font-size: 0.625rem;2863  letter-spacing: 0.06em;2864  color: rgba(217, 160, 48, 0.9);2865  font-family: var(--font-ui);2866  text-transform: uppercase;2867}28682869.peach-canary-badge-icon {2870  font-size: 0.6875rem;2871}28722873.peach-canary-suppress-row {2874  display: flex;2875  align-items: center;2876  gap: 8px;2877  padding: 6px 10px;2878  background: rgba(217, 160, 48, 0.08);2879  border-radius: 6px;2880  margin-bottom: 8px;2881}28822883.peach-canary-suppress-label {2884  font-size: 0.6875rem;2885  color: rgba(217, 160, 48, 0.85);2886  cursor: pointer;2887  font-family: var(--font-ui);2888  letter-spacing: 0.04em;2889}28902891.peach-regen-panel {2892  position: relative;2893  z-index: 1;2894  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2895  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2896  border-radius: 8px;2897  padding: 12px;2898  margin-bottom: 8px;2899}29002901.peach-regen-panel-header {2902  display: flex;2903  align-items: center;2904  justify-content: space-between;2905  margin-bottom: 10px;2906}29072908.peach-regen-panel-title {2909  font-size: 0.6875rem;2910  font-weight: 600;2911  letter-spacing: 0.06em;2912  text-transform: uppercase;2913  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2914}29152916.peach-regen-output {2917  background: rgba(0, 0, 0, 0.2);2918  border-radius: 6px;2919  padding: 10px;2920  margin-bottom: 10px;2921  font-family: var(--font-mono);2922  font-size: 0.8125rem;2923  word-break: break-all;2924  color: var(--peach-t1);2925}29262927.peach-regen-actions {2928  display: flex;2929  gap: 6px;2930}29312932.peach-regen-actions--spaced {2933  margin-bottom: 8px;2934}29352936.peach-regen-action-grow {2937  flex: 1;2938}29392940.peach-regen-copy-btn {2941  padding: 0 8px;2942}29432944.peach-regen-success {2945  position: relative;2946  z-index: 1;2947  background: rgba(40, 180, 80, 0.1);2948  border: 1px solid rgba(40, 180, 80, 0.3);2949  border-radius: 8px;2950  padding: 10px 12px;2951  margin-bottom: 8px;2952  display: flex;2953  align-items: center;2954  gap: 8px;2955  font-size: 0.6875rem;2956  color: rgba(40, 180, 80, 0.9);2957}29582959/* ── Note editor overlay ── */2960.peach-note-editor {2961  position: absolute;2962  inset: 0;2963  z-index: 200;2964  display: flex;2965  flex-direction: column;2966  background:2967    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2968    var(--peach-bg);2969  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2970}29712972.peach-note-editor-header {2973  display: flex;2974  align-items: center;2975  gap: 10px;2976  padding: 14px 16px 10px;2977  border-bottom: 1px solid var(--peach-t3);2978  flex-shrink: 0;2979}29802981.peach-note-editor-back {2982  background: transparent;2983  border: none;2984  cursor: pointer;2985  color: var(--peach-t2);2986  padding: 4px 6px;2987  border-radius: 6px;2988  display: flex;2989  align-items: center;2990  transition: color 120ms ease, background 120ms ease;2991  flex-shrink: 0;2992}2993.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }29942995.peach-note-editor-label {2996  flex: 1;2997  font-family: var(--font-display);2998  font-style: italic;2999  font-size: 0.9375rem;3000  color: var(--peach-t1);3001  letter-spacing: 0.02em;3002}30033004.peach-note-editor-save-btn {3005  background: transparent;3006  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);3007  border-radius: 8px;3008  color: var(--peach-accent);3009  font-family: "IBM Plex Mono", monospace;3010  font-size: 0.625rem;3011  letter-spacing: 0.06em;3012  text-transform: uppercase;3013  padding: 3px 10px;3014  cursor: pointer;3015  transition: background 120ms ease, border-color 120ms ease;3016}3017.peach-note-editor-save-btn:hover:not(:disabled) {3018  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3019  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3020}3021.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }30223023.peach-note-toolbar {3024  display: flex;3025  align-items: center;3026  gap: 3px;3027  padding: 6px 14px 5px;3028  border-bottom: 1px solid var(--peach-t3);3029  flex-shrink: 0;3030}30313032.peach-note-tool-btn {3033  background: transparent;3034  border: 1px solid transparent;3035  border-radius: 5px;3036  color: var(--peach-t2);3037  font-family: "IBM Plex Mono", monospace;3038  font-size: 0.625rem;3039  letter-spacing: 0.04em;3040  padding: 2px 8px;3041  cursor: pointer;3042  line-height: 1.6;3043  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;3044}3045.peach-note-tool-btn:hover {3046  background: var(--peach-t4);3047  color: var(--peach-t0);3048  border-color: var(--peach-t3);3049}30503051.peach-note-tool-icon {3052  padding: 3px 7px;3053  display: inline-flex;3054  align-items: center;3055  justify-content: center;3056}30573058.peach-note-tool-divider {3059  width: 1px;3060  height: 14px;3061  background: var(--peach-t3);3062  margin: 0 4px;3063  flex-shrink: 0;3064}30653066.peach-note-editor-body {3067  flex: 1;3068  overflow-y: auto;3069  padding: 16px 20px 20px;3070  outline: none;3071  font-family: var(--font-display);3072  font-size: 1rem;3073  line-height: 1.75;3074  color: var(--peach-t0);3075  scrollbar-width: none;3076  word-break: break-word;3077}3078.peach-note-editor-body:empty::before {3079  content: "write your note…";3080  color: var(--peach-t3);3081  font-style: italic;3082  pointer-events: none;3083}30843085/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */3086.peach-note-editor-inline {3087  display: flex;3088  flex-direction: column;3089  flex: 1;3090  min-height: 0;3091}3092.peach-note-editor-body--inline {3093  flex: 1;3094  min-height: 0;3095  font-size: 0.9375rem;3096  padding: 10px 20px 14px;3097}30983099/* Full-width toolbar row inside the body (Add.tsx note type).3100   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */3101.peach-note-toolbar-body {3102  display: flex;3103  align-items: center;3104  gap: 3px;3105  padding: 5px 20px 4px;3106  margin: 2px -20px 0;3107  border-bottom: 1px solid var(--peach-t3);3108  flex-shrink: 0;3109}31103111/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)3112   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn3113   and .peach-note-tool-divider button-level styles. */3114.peach-note-toolbar-inline {3115  display: flex;3116  align-items: center;3117  gap: 3px;3118  margin-left: auto;3119  padding-left: 10px;3120  border-left: 1px solid var(--peach-t3);3121  min-height: 22px;3122}31233124/* Entry.tsx toolbar row (no tabs, toolbar only) */3125.peach-entry-note-toolbar-row {3126  display: flex;3127  align-items: center;3128  margin: 4px 0 6px;3129  position: relative;3130  z-index: 1;3131}3132.peach-entry-note-toolbar-row .peach-note-toolbar-inline {3133  border-left: none;3134  padding-left: 0;3135  margin-left: 0;3136}31373138/* Note body — fills available vertical space in Add.tsx and Entry.tsx */3139.peach-note-body {3140  display: flex;3141  flex-direction: column;3142  flex: 1;3143  min-height: 0;3144  margin: 4px 0 0;3145}3146.peach-entry-body--new .peach-note-body {3147  margin: 8px -20px 0;3148}31493150/* Add.tsx body is a grid by default; swap to a flex column when a note is3151   active so the note body can stretch and pin the tags row to the bottom. */3152.peach-entry-body--new:has(.peach-note-body) {3153  display: flex;3154  flex-direction: column;3155}31563157/* Rich content element styles (editor + display) */3158.peach-note-editor-body h2,3159.peach-note-content h2 {3160  font-family: var(--font-display);3161  font-size: 20px;3162  font-weight: 600;3163  font-style: italic;3164  color: var(--peach-t0);3165  margin: 6px 0 2px;3166  line-height: 1.3;3167}3168.peach-note-editor-body ul,3169.peach-note-content ul {3170  padding-left: 18px;3171  margin: 3px 0;3172  list-style: disc;3173}3174.peach-note-editor-body ol,3175.peach-note-content ol {3176  padding-left: 18px;3177  margin: 3px 0;3178  list-style: decimal;3179}3180.peach-note-editor-body li,3181.peach-note-content li { margin: 2px 0; }3182.peach-note-editor-body hr,3183.peach-note-content hr {3184  border: none;3185  border-top: 1px solid var(--peach-t3);3186  margin: 10px 0;3187}31883189/* font size elements from execCommand */3190.peach-note-editor-body font[size="1"],3191.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }3192.peach-note-editor-body font[size="2"],3193.peach-note-content font[size="2"] { font-size: 0.8125rem; }3194.peach-note-editor-body font[size="3"],3195.peach-note-content font[size="3"] { font-size: 1rem; }3196.peach-note-editor-body font[size="4"],3197.peach-note-content font[size="4"] { font-size: 20px; }3198.peach-note-editor-body font[size="5"],3199.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }32003201/* bold / italic inside the editor and note display */3202.peach-note-editor-body b, .peach-note-editor-body strong,3203.peach-note-content b, .peach-note-content strong { font-weight: 700; }3204.peach-note-editor-body em, .peach-note-editor-body i,3205.peach-note-content em, .peach-note-content i { font-style: italic; }32063207/* note display — rendered HTML, no pre-wrap */3208.peach-note-content {3209  overflow: auto;3210  max-height: 340px;3211  word-break: break-word;3212}32133214/* ── Note textarea ── */3215.peach-note-textarea {3216  width: 100%;3217  min-height: 180px;3218  max-height: 280px;3219  resize: vertical;3220  background: var(--peach-t4);3221  border: 1px solid var(--peach-t3);3222  border-radius: 8px;3223  padding: 10px 12px;3224  font-family: "IBM Plex Mono", monospace;3225  font-size: 0.75rem;3226  line-height: 1.7;3227  color: var(--peach-t1);3228  outline: none;3229  transition: border-color 150ms ease;3230}32313232.peach-note-textarea:focus {3233  border-color: var(--peach-t2);3234}32353236.peach-note-char-count {3237  font-family: "IBM Plex Mono", monospace;3238  font-size: 0.5625rem;3239  color: var(--peach-t3);3240  text-align: right;3241  margin-top: 4px;3242  letter-spacing: 0.1em;3243}32443245/* ── Field input baseline ── */3246.peach-new-field-input {3247  width: 100%;3248  background: transparent;3249  border: none;3250  border-bottom: 1px solid var(--peach-t3);3251  padding: 4px 0;3252  color: var(--peach-t1);3253  font-family: "IBM Plex Mono", monospace;3254  font-size: 0.8125rem;3255  outline: none;3256  transition: border-color 150ms ease;3257}32583259.peach-new-field-input:focus {3260  border-bottom-color: var(--peach-t0);3261  color: var(--peach-t0);3262}32633264.peach-new-name-input {3265  width: 100%;3266  background: transparent;3267  border: none;3268  border-bottom: 1px solid var(--peach-t3);3269  padding: 6px 0;3270  font-family: var(--font-display);3271  font-style: italic;3272  font-size: 28px;3273  color: var(--peach-t0);3274  outline: none;3275  transition: border-color 150ms ease;3276}32773278.peach-new-name-input:focus {3279  border-bottom-color: var(--peach-t1);3280}32813282.peach-new-name-input::placeholder {3283  color: var(--peach-t2);3284  font-style: italic;3285}32863287.peach-new-field-input::placeholder {3288  color: var(--peach-t3);3289}32903291/* ── Demo entrance animation ── */3292#hd-shell {3293  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3294}3295@keyframes hd-shell-enter {3296  from { opacity: 0; transform: scale(0.96) translateY(16px); }3297  to   { opacity: 1; transform: scale(1) translateY(0); }3298}32993300/* ── Keyframes ── */3301@keyframes peach-char-enter {3302  from { opacity: 0; transform: translateY(0.22em); }3303  to   { opacity: 1; transform: translateY(0); }3304}3305@keyframes peach-content-enter {3306  from { opacity: 0.96; transform: translateY(4px); }3307  to   { opacity: 1; transform: translateY(0); }3308}3309@keyframes peach-content-exit {3310  from { opacity: 1; transform: translateY(0); }3311  to   { opacity: 0.92; transform: translateY(-3px); }3312}3313@keyframes peach-screen-enter {3314  from { opacity: 0; transform: translateY(14px); }3315  to   { opacity: 1; transform: translateY(0); }3316}3317@keyframes peach-shell-fade-in {3318  from { opacity: 0; }3319  to   { opacity: 1; }3320}3321@keyframes peach-veil-in {3322  from { opacity: 0; }3323  to   { opacity: 1; }3324}3325@keyframes peach-lock-settle {3326  0%   { transform: scale(0.9); }3327  65%  { transform: scale(1.08); }3328  100% { transform: scale(1); }3329}3330@keyframes peach-copy-confirm {3331  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3332  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); }3333}3334@keyframes peach-copy-retreat {3335  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); }3336  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3337}3338@keyframes peach-copy-flood {3339  from { opacity: 0; transform: scaleX(0.15); }3340  to   { opacity: 1; transform: scaleX(1); }3341}3342@keyframes peach-copy-icon-settle {3343  from  { transform: scale(0.84); }3344  70%   { transform: scale(1.08); }3345  to    { transform: scale(1); }3346}3347@keyframes peach-copy-sheen-retreat {3348  from { opacity: 1; transform: scaleX(1); }3349  to   { opacity: 0; transform: scaleX(0.15); }3350}3351@keyframes peach-copy-drain {3352  from { width: 100%; }3353  to   { width: 0; }3354}3355@keyframes peach-shake {3356  0%, 100% { transform: translateX(0); }3357  20%      { transform: translateX(-6px); }3358  40%      { transform: translateX(6px); }3359  60%      { transform: translateX(-4px); }3360  80%      { transform: translateX(4px); }3361}33623363@keyframes pip-pulse {3364  0% { transform: scale(1); }3365  40% { transform: scale(2.2); }3366  100% { transform: scale(1); }3367}336833693370/* ── Password generator ── */3371.peach-pwgen-body {3372  flex: 1; overflow-y: auto;3373  display: flex; flex-direction: column;3374}3375.peach-policy-badge {3376  display: flex; align-items: center;3377  padding: 6px 20px 0;3378  font-size: 0.625rem; font-family: Inter, sans-serif;3379  color: var(--peach-t2); letter-spacing: 0.04em;3380}3381.peach-pwgen-display {3382  padding: 14px 20px 12px;3383  border-bottom: 1px solid var(--peach-t3);3384  display: flex; align-items: flex-start; gap: 10px;3385}3386.peach-pwgen-display-row {3387  display: flex;3388  align-items: flex-start;3389  gap: 8px;3390  padding-bottom: 8px;3391  border-bottom: 1px solid var(--peach-t3);3392}3393.peach-pwgen-output {3394  flex: 1; min-width: 0; margin: 0;3395  font-family: "IBM Plex Mono", monospace;3396  font-size: 0.8125rem; color: var(--peach-t0);3397  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3398  white-space: normal;3399  padding: 10px 12px;3400  background: var(--peach-t4);3401  border-radius: 6px;3402  min-height: 36px;3403}3404.peach-pwgen-output-display {3405  flex: 1;3406  min-width: 0;3407  margin: 0;3408  font-family: var(--font-display);3409  font-style: italic;3410  font-weight: 300;3411  font-size: 32px;3412  line-height: 1.05;3413  color: var(--peach-t0);3414  word-break: break-all;3415  overflow-wrap: break-word;3416  white-space: normal;3417  letter-spacing: 0.02em;3418}3419.peach-pwgen-display-actions {3420  display: flex;3421  flex-direction: column;3422  gap: 4px;3423  flex-shrink: 0;3424  margin-top: 2px;3425}3426.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3427.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3428.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3429.peach-pwgen-len-num {3430  font-family: "IBM Plex Mono", monospace;3431  font-size: 0.75rem; color: var(--peach-accent);3432}3433.peach-pwgen-len-num--edit {3434  cursor: text;3435  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3436}3437.peach-pwgen-len-input {3438  font-family: "IBM Plex Mono", monospace;3439  font-size: 0.75rem;3440  color: var(--peach-accent);3441  background: transparent;3442  border: none;3443  border-bottom: 1px solid var(--peach-accent);3444  outline: none;3445  width: 32px;3446  text-align: right;3447  padding: 0;3448}3449.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3450.peach-pwgen-toggles { display: flex; flex-direction: column; }3451.peach-pwgen-charset-pills {3452  display: flex;3453  gap: 6px;3454  flex-wrap: wrap;3455}3456.peach-pwgen-pill {3457  padding: 4px 11px;3458  border-radius: 999px;3459  border: 1px solid var(--peach-t3);3460  background: transparent;3461  color: var(--peach-t2);3462  font-family: "IBM Plex Mono", monospace;3463  font-size: 0.5625rem;3464  letter-spacing: 0.08em;3465  cursor: pointer;3466  transition: all 150ms ease;3467}3468.peach-pwgen-pill.is-on {3469  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3470  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3471  color: var(--peach-accent);3472}3473.peach-pwgen-pill:not(.is-on):hover {3474  color: var(--peach-t1);3475  border-color: var(--peach-t2);3476}3477.peach-pwgen-use-btn {3478  width: 100%;3479  min-height: 34px;3480  border-radius: 8px;3481  margin-top: 2px;3482}3483.peach-generator-constraint-note {3484  font-family: 'IBM Plex Mono', monospace;3485  font-size: 10px;3486  color: var(--peach-t3);3487  letter-spacing: 0.04em;3488  margin: 0;3489  transition: opacity 200ms ease;3490}3491.peach-pwgen-toggle-row {3492  display: flex; align-items: center; justify-content: space-between;3493  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3494}3495.peach-pwgen-toggle-row:last-child { border-bottom: none; }3496.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }34973498/* Peach popup should not expose native scrollbars on internal panels. */3499.peach-settings-body,3500.peach-new-body,3501.peach-pwgen-body,3502.lock-screen,3503.peach-import-preview {3504  scrollbar-width: none;3505  -ms-overflow-style: none;3506  overscroll-behavior: contain;3507}3508.peach-settings-body::-webkit-scrollbar,3509.peach-new-body::-webkit-scrollbar,3510.peach-pwgen-body::-webkit-scrollbar,3511.lock-screen::-webkit-scrollbar,3512.peach-import-preview::-webkit-scrollbar {3513  width: 0;3514  height: 0;3515  display: none;3516}35173518.lock-screen {3519  height: 100%;3520  min-height: 100%;3521  overflow-y: auto;3522  padding: 18px 18px 16px;3523  gap: 14px;3524  grid-template-rows: auto auto auto 1fr auto;3525  align-content: stretch;3526  position: relative;3527  isolation: isolate;3528}3529.peach-screen.lock-screen--vault-stage {3530  display: flex;3531  flex-direction: column;3532  justify-content: flex-start;3533  gap: 18px;3534  padding: 20px 18px 18px;3535  overflow: hidden;3536}3537.peach-screen.lock-screen--vault-stage .peach-lock-panel {3538  margin-top: 0;3539}3540.lock-screen--onboarding {3541  display: flex;3542  flex-direction: column;3543  gap: 12px;3544  justify-content: flex-start;3545}35463547.lock-screen::before {3548  content: "";3549  position: absolute;3550  inset: 12px 18px auto auto;3551  width: 160px;3552  height: 160px;3553  border-radius: 999px;3554  background:3555    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%);3556  filter: blur(6px);3557  opacity: 0.7;3558  pointer-events: none;3559  z-index: 0;3560}35613562.peach-lock-rune-string {3563  flex: 1;3564  display: flex;3565  align-items: center;3566  justify-content: center;3567  gap: 6px;3568  font-family: PeachScript, monospace;3569  font-size: 0.8125rem;3570  letter-spacing: 0.05em;3571  pointer-events: none;3572  user-select: none;3573  position: relative;3574  z-index: 1;3575}35763577.peach-lock-rune-string span {3578  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3579  text-shadow:3580    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3581    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3582  transition: color 0.9s ease, text-shadow 0.9s ease;3583}35843585.peach-lock-rune-string span.is-glowing {3586  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3587  text-shadow:3588    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3589    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3590}35913592.lock-screen-header {3593  display: flex;3594  align-items: center;3595  justify-content: space-between;3596  position: relative;3597  z-index: 1;3598}35993600.lock-password-input.shake {3601  animation: peach-shake 300ms ease-in-out;3602}36033604.peach-hint-error {3605  color: rgba(220, 80, 60, 0.92);3606}36073608.peach-onboarding-headline {3609  margin: 0;3610  font-family: var(--font-display);3611  font-size: 35px;3612  line-height: 0.88;3613  font-style: italic;3614  font-weight: 400;3615  max-width: 252px;3616}36173618.peach-lock-copy {3619  display: grid;3620  gap: 8px;3621  position: relative;3622  z-index: 1;3623}36243625.peach-lock-copy--onboarding {3626  gap: 10px;3627}36283629.peach-lock-hero {3630  position: relative;3631  z-index: 1;3632  display: grid;3633  gap: 8px;3634  min-height: 0;3635  padding: 4px 2px 0;3636  border: none;3637  border-radius: 0;3638  background: transparent;3639  box-shadow: none;3640}3641.peach-lock-hero-art {3642  position: absolute;3643  right: -8px;3644  top: -6px;3645  width: 120px;3646  height: 120px;3647  display: flex;3648  align-items: center;3649  justify-content: center;3650  pointer-events: none;3651  opacity: 0.12;3652  filter: saturate(0.9);3653}3654.peach-lock-hero-mark {3655  width: 100%;3656  height: 100%;3657}3658/* Peach body stays brand-peach across every accent — we don't want a3659   green or blue peach when sage/sky is selected. Leaf + vein keep the3660   sage tint because a real peach has a sage leaf. In the new brand-kit3661   mark the leaf is path 1 and the vein stroke is path 2; the body and3662   back-lobe (paths 3 + 4) must stay untouched. */3663.peach-lock-hero-mark path:nth-child(1) {3664  fill: rgba(123, 144, 96, 0.88);3665}3666.peach-lock-hero-mark path:nth-child(2) {3667  stroke: rgba(94, 122, 66, 0.95);3668}3669.peach-lock-hero > *:not(.peach-lock-hero-art) {3670  position: relative;3671  z-index: 1;3672}36733674.peach-lock-eyebrow {3675  display: inline-flex;3676  align-items: center;3677  width: fit-content;3678  padding: 4px 9px;3679  border-radius: 999px;3680  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3681  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3682  color: var(--peach-t0);3683  font-family: "IBM Plex Mono", monospace;3684  font-size: 0.5rem;3685  letter-spacing: 0.18em;3686  text-transform: uppercase;3687}36883689.peach-lock-label-row {3690  display: flex;3691  align-items: center;3692  justify-content: space-between;3693  margin-bottom: 0;3694}36953696.peach-lock-reveal-btn {3697  display: inline-flex;3698  align-items: center;3699  gap: 4px;3700  background: none;3701  border: none;3702  cursor: pointer;3703  font-family: "IBM Plex Mono", monospace;3704  font-size: 0.5625rem;3705  letter-spacing: 0.06em;3706  color: var(--peach-t2);3707  padding: 2px 0;3708  transition: color 150ms ease;3709}37103711.peach-lock-reveal-btn:hover {3712  color: var(--peach-t1);3713}37143715.peach-lock-warning {3716  color: rgba(220, 80, 60, 0.85) !important;3717  line-height: 1.5;3718}37193720.peach-onboarding-cards {3721  display: grid;3722  gap: 8px;3723  position: relative;3724  z-index: 1;3725}37263727.peach-lock-panel {3728  position: relative;3729  z-index: 1;3730  display: grid;3731  gap: 9px;3732  padding: 14px 16px 15px;3733  border-radius: 18px;3734  border: 1px solid var(--peach-t3);3735  background:3736    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3737  box-shadow:3738    inset 0 1px 0 rgba(240, 232, 216, 0.04),3739    0 12px 28px rgba(0, 0, 0, 0.12);3740}37413742/* Glass surface — lock panel and settings groups */3743.peach-glass {3744  background: rgba(26, 20, 16, 0.65);3745  border: 1px solid rgba(255, 255, 255, 0.08);3746  border-radius: 12px;3747  backdrop-filter: blur(12px) saturate(1.4);3748  -webkit-backdrop-filter: blur(12px) saturate(1.4);3749}37503751@supports not (backdrop-filter: blur(1px)) {3752  .peach-glass {3753    background: rgba(26, 20, 16, 0.92);3754    border: 1px solid rgba(255, 255, 255, 0.10);3755    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3756  }3757}37583759.light .peach-glass,3760[data-theme="light"] .peach-glass {3761  background: rgba(240, 233, 223, 0.72);3762  border: 1px solid rgba(26, 18, 8, 0.08);3763  backdrop-filter: blur(12px) saturate(1.2);3764  -webkit-backdrop-filter: blur(12px) saturate(1.2);3765}37663767@supports not (backdrop-filter: blur(1px)) {3768  .light .peach-glass,3769  [data-theme="light"] .peach-glass {3770    background: rgba(240, 233, 223, 0.97);3771    border: 1px solid rgba(26, 18, 8, 0.10);3772  }3773}37743775/* Lock panel keeps its own border-radius over the generic glass token */3776.peach-lock-panel.peach-glass {3777  border-radius: 18px;3778  background: rgba(26, 20, 16, 0.65);3779  border: 1px solid rgba(255, 255, 255, 0.08);3780  box-shadow:3781    inset 0 1px 0 rgba(255, 255, 255, 0.05),3782    0 12px 28px rgba(0, 0, 0, 0.3);3783}37843785.light .peach-lock-panel.peach-glass,3786[data-theme="light"] .peach-lock-panel.peach-glass {3787  background: rgba(240, 233, 223, 0.82);3788  border: 1px solid rgba(26, 18, 8, 0.08);3789  box-shadow:3790    inset 0 1px 0 rgba(255, 255, 255, 0.4),3791    0 8px 24px rgba(80, 56, 32, 0.15);3792}37933794@supports not (backdrop-filter: blur(1px)) {3795  .peach-lock-panel.peach-glass {3796    background: rgba(26, 20, 16, 0.92);3797    box-shadow:3798      inset 0 1px 0 rgba(255, 255, 255, 0.05),3799      0 12px 28px rgba(0, 0, 0, 0.4);3800  }3801  .light .peach-lock-panel.peach-glass,3802  [data-theme="light"] .peach-lock-panel.peach-glass {3803    background: rgba(240, 233, 223, 0.98);3804  }3805}38063807.peach-lock-panel--secondary {3808  gap: 12px;3809}38103811.peach-lock-panel-header {3812  display: flex;3813  align-items: baseline;3814  justify-content: space-between;3815  gap: 12px;3816}38173818.peach-lock-option-grid {3819  display: grid;3820  gap: 10px;3821}38223823.peach-lock-option {3824  width: 100%;3825  display: grid;3826  gap: 6px;3827  padding: 14px 15px;3828  border-radius: 16px;3829  border: 1px solid rgba(240, 232, 216, 0.08);3830  background: rgba(240, 232, 216, 0.02);3831  color: var(--peach-t0);3832  text-align: left;3833  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3834}38353836.peach-lock-option:hover {3837  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3838  background: rgba(240, 232, 216, 0.04);3839  transform: translateY(-1px);3840}38413842.peach-lock-option-title {3843  font-size: 0.75rem;3844  color: var(--peach-t0);3845}38463847.peach-lock-option-copy {3848  font-size: 0.6875rem;3849  line-height: 1.55;3850  color: var(--peach-t1);3851}38523853.peach-onboarding-stack {3854  margin-top: 2px;3855}3856.peach-lock-panel-footer {3857  display: grid;3858  gap: 6px;3859  margin-top: 2px;3860  padding-top: 10px;3861  border-top: 1px solid rgba(240, 232, 216, 0.06);3862}38633864/* ── Restore tab view ─────────────────────────────────────────────────────3865   Tab-based restore screen replacing the old three-card picker. */38663867.peach-restore-tabview {3868  overflow: hidden;3869}38703871.peach-restore-tabcard {3872  flex: 1;3873  display: flex;3874  flex-direction: column;3875  gap: 0;3876  padding: 0;3877  overflow: hidden;3878  cursor: default;3879  user-select: none;3880  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3881}38823883/* ── Tab selector ─────────────────────────────────────────────────────── */38843885.peach-restore-tabs {3886  display: flex;3887  justify-content: space-around;3888  padding: 14px 10px 10px;3889  border-bottom: 1px solid var(--peach-t3);3890  gap: 2px;3891  overflow: hidden;3892  scrollbar-width: none;3893}3894.peach-restore-tabs::-webkit-scrollbar { display: none; }38953896.peach-restore-tab {3897  background: none;3898  border: none;3899  cursor: pointer;3900  padding: 3px 2px;3901  font-family: 'Cormorant Garamond', Georgia, serif;3902  font-style: italic;3903  font-size: 11px;3904  color: var(--peach-t2);3905  transition: color 150ms ease, text-shadow 150ms ease;3906  flex: 1;3907  min-width: 0;3908  text-align: center;3909  white-space: nowrap;3910  overflow: hidden;3911  text-overflow: ellipsis;3912}3913.peach-restore-tab:hover {3914  color: var(--peach-accent);3915  text-shadow:3916    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3917    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3918}3919.peach-restore-tab.is-active {3920  color: var(--peach-accent);3921  text-shadow:3922    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3923    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3924}39253926/* ── Content area ─────────────────────────────────────────────────────── */39273928.peach-restore-content {3929  padding: 16px 16px 14px;3930  display: flex;3931  flex-direction: column;3932  gap: 8px;3933  overflow: hidden;3934  scrollbar-width: none;3935  flex: 1;3936}3937.peach-restore-content::-webkit-scrollbar { display: none; }3938.peach-restore-content > * {3939  overflow: hidden;3940  scrollbar-width: none;3941}3942.peach-restore-content > *::-webkit-scrollbar { display: none; }39433944/* ── Shared tab inner layout ──────────────────────────────────────────── */39453946.peach-rt-symbols,3947.peach-rt-csv,3948.peach-rt-phone,3949.peach-restore-codex {3950  display: flex;3951  flex-direction: column;3952  gap: 8px;3953  overflow: hidden;3954}39553956.peach-restore-codex {3957  min-height: 0;3958  justify-content: center;3959}39603961.peach-restore-codex-title {3962  margin: 0;3963  font-family: var(--font-display);3964  font-size: 1rem;3965  font-style: italic;3966  color: var(--peach-t0);3967}39683969.peach-restore-codex-copy {3970  margin: 0;3971  font-size: 0.75rem;3972  line-height: 1.5;3973  color: var(--peach-t1);3974}39753976.peach-restore-codex-button {3977  width: 100%;3978  justify-content: center;3979}39803981.peach-rt-submit {3982  width: 100%;3983}39843985.peach-rt-error {3986  margin: 0;3987  font-size: 0.6875rem;3988  color: var(--peach-breach);3989  line-height: 1.4;3990}39913992/* ── PeachScript tab ──────────────────────────────────────────────────── */39933994.peach-restore-symbols-textarea {3995  font-family: 'PeachScript', monospace;3996  font-size: 13px;3997  line-height: 1.9;3998  letter-spacing: 0.1em;3999  word-break: break-all;4000  resize: none;4001  width: 100%;4002  min-height: 56px;4003  max-height: 72px;4004  overflow: hidden;4005  scrollbar-width: none;4006  -ms-overflow-style: none;4007  box-sizing: border-box;4008  padding: 6px 8px;4009  border-radius: 8px;4010  border: 1px solid var(--peach-t3);4011  background: rgba(240, 232, 216, 0.03);4012  color: var(--peach-t0);4013}4014.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }4015.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }40164017.peach-restore-symbols-pass {4018  width: 100%;4019  box-sizing: border-box;4020  padding: 7px 10px;4021  border-radius: 8px;4022  border: 1px solid var(--peach-t3);4023  background: rgba(240, 232, 216, 0.03);4024  color: var(--peach-t0);4025  font-size: 0.8125rem;4026}4027.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }4028.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }40294030.peach-rt-divider {4031  text-align: center;4032  font-size: 0.6875rem;4033  color: var(--peach-t2);4034  font-style: italic;4035}40364037.peach-rt-file-label {4038  width: 100%;4039  justify-content: center;4040}40414042.peach-rt-anim-canvas {4043  width: 100%;4044  height: 180px;4045  border-radius: 10px;4046  overflow: hidden;4047  display: block;4048}40494050/* ── CSV tab ──────────────────────────────────────────────────────────── */40514052.peach-rt-csv-sources {4053  margin: 0;4054  font-size: 0.6875rem;4055  color: var(--peach-t2);4056  line-height: 1.5;4057  text-align: center;4058}40594060.peach-rt-csv-warning {4061  margin: 0;4062  font-family: "IBM Plex Mono", monospace;4063  font-size: 0.5625rem;4064  letter-spacing: 0.12em;4065  color: var(--peach-breach);4066  text-align: center;4067}40684069/* ── From Phone tab ───────────────────────────────────────────────────── */40704071.peach-rt-phone-code {4072  margin: 0;4073  text-align: center;4074  font-family: "IBM Plex Mono", monospace;4075  font-size: 22px;4076  letter-spacing: 0.18em;4077  color: var(--peach-t0);4078}40794080.peach-rt-phone-qr {4081  display: block;4082  width: 96px;4083  height: 96px;4084  margin: 0 auto;4085  border-radius: 6px;4086  image-rendering: pixelated;4087  overflow: hidden;4088}40894090.peach-rt-phone-hint {4091  margin: 0;4092  font-size: 0.6875rem;4093  color: var(--peach-t2);4094  line-height: 1.55;4095  text-align: center;4096}40974098/* ── Intro popup ──────────────────────────────────────────────────────── */40994100.peach-restore-intro-overlay {4101  position: absolute;4102  inset: 0;4103  z-index: 100;4104  display: flex;4105  align-items: center;4106  justify-content: center;4107  padding: 20px;4108  background: rgba(12, 10, 6, 0.7);4109  backdrop-filter: blur(4px);4110  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4111}41124113.peach-restore-intro-card {4114  width: 100%;4115  display: flex;4116  flex-direction: column;4117  gap: 12px;4118  padding: 22px 20px 20px;4119  border-radius: 16px;4120  border: 1px solid var(--peach-t3);4121  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));4122  backdrop-filter: blur(4px);4123  -webkit-backdrop-filter: blur(4px);4124  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);4125}41264127.peach-restore-intro-headline {4128  margin: 0;4129  font-family: var(--font-display);4130  font-style: italic;4131  font-size: 20px;4132  font-weight: 400;4133  color: var(--peach-t0);4134}41354136.peach-restore-intro-body {4137  display: flex;4138  flex-direction: column;4139  gap: 8px;4140}4141.peach-restore-intro-body p {4142  margin: 0;4143  font-size: 0.75rem;4144  color: var(--peach-t1);4145  line-height: 1.5;4146}41474148.peach-restore-intro-btn {4149  width: 100%;4150  margin-top: 4px;4151}41524153/* Snapshot restore panel */4154.peach-snapshot-panel {4155  gap: 10px;4156  overflow-y: auto;4157  max-height: 340px;4158}4159.peach-snapshot-list {4160  display: flex;4161  flex-direction: column;4162  gap: 4px;4163}4164.peach-snapshot-row {4165  display: flex;4166  align-items: center;4167  justify-content: space-between;4168  width: 100%;4169  padding: 8px 10px;4170  border-radius: 8px;4171  border: 1px solid rgba(240, 232, 216, 0.07);4172  background: transparent;4173  cursor: pointer;4174  transition: border-color 120ms, background 120ms;4175  text-align: left;4176  gap: 8px;4177}4178.peach-snapshot-row:hover {4179  border-color: rgba(240, 232, 216, 0.14);4180  background: rgba(240, 232, 216, 0.03);4181}4182.peach-snapshot-row.is-selected {4183  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4184  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);4185}4186.peach-snapshot-time {4187  font-size: 11.5px;4188  color: var(--peach-t0);4189  flex: 1;4190}4191.peach-snapshot-count {4192  font-family: "IBM Plex Mono", monospace;4193  font-size: 0.625rem;4194  color: var(--peach-t2);4195  flex-shrink: 0;4196}4197.peach-snapshot-confirm {4198  display: flex;4199  flex-direction: column;4200  gap: 8px;4201  padding-top: 10px;4202  border-top: 1px solid rgba(240, 232, 216, 0.06);4203}4204.peach-snapshot-warning {4205  display: flex;4206  align-items: flex-start;4207  gap: 6px;4208  font-size: 10.5px;4209  color: rgba(220, 80, 60, 0.85);4210  line-height: 1.55;4211}4212.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }4213.peach-snapshot-confirm-row {4214  display: flex;4215  gap: 6px;4216  align-items: center;4217}4218.peach-snapshot-restore-btn {4219  width: 100%;4220}4221.peach-lock-hero--unlock .peach-lock-hero-art {4222  width: 112px;4223  height: 112px;4224  right: 0;4225  top: 2px;4226  opacity: 0.1;4227}42284229.peach-card {4230  border: 1px solid var(--peach-t3);4231  border-radius: 18px;4232  background:4233    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4234  box-shadow:4235    inset 0 0 0 1px var(--peach-border-accent),4236    inset 0 1px 0 rgba(240, 232, 216, 0.04),4237    0 12px 32px rgba(0, 0, 0, 0.14);4238  overflow: hidden;4239}42404241.peach-card-active {4242  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4243  box-shadow:4244    inset 0 1px 0 rgba(240, 232, 216, 0.05),4245    0 16px 38px rgba(0, 0, 0, 0.18),4246    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4247}42484249.peach-card-disabled {4250  opacity: 0.72;4251}42524253.peach-card-header {4254  width: 100%;4255  padding: 13px 16px 11px;4256  background: transparent;4257  color: var(--peach-t0);4258  display: flex;4259  justify-content: space-between;4260  align-items: center;4261  text-align: left;4262  font-size: 0.75rem;4263}42644265.peach-card-body {4266  padding: 0 16px 16px;4267  display: grid;4268  gap: 9px;4269}42704271.peach-card-tag {4272  color: var(--peach-t2);4273  font-family: "IBM Plex Mono", monospace;4274  font-size: 0.5625rem;4275  letter-spacing: 0.12em;4276  text-transform: uppercase;4277}42784279.peach-empty-copy {4280  display: grid;4281  gap: 6px;4282  color: var(--peach-t1);4283  font-size: 0.8125rem;4284}42854286.peach-lock-submit {4287  width: 100%;4288  box-shadow:4289    0 1px 0 rgba(255,255,255,0.10) inset,4290    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4291    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4292    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4293}42944295.peach-lock-secondary {4296  width: 100%;4297  border-color: var(--peach-t3);4298  background: rgba(240, 232, 216, 0.02);4299}43004301.peach-lock-secondary:hover {4302  background: rgba(240, 232, 216, 0.04);4303}43044305.peach-lock-note {4306  max-width: none;4307  line-height: 1.55;4308  margin: 0;4309}43104311.peach-overlay-action {4312  font-size: 0.625rem;4313  padding: 4px 8px;4314  letter-spacing: 0.06em;4315  min-width: 44px;4316  text-align: center;4317}43184319.peach-inline-action {4320  flex-shrink: 0;4321  font-size: 0.5625rem;4322  letter-spacing: 0.1em;4323  text-transform: uppercase;4324  padding: 4px 7px;4325}4326.peach-password-toggle-btn {4327  display: inline-flex;4328  align-items: center;4329  justify-content: center;4330  min-width: 30px;4331  min-height: 26px;4332  padding: 0 7px;4333  border: 1px solid var(--peach-t3);4334  border-radius: 999px;4335  background: rgba(240, 232, 216, 0.04);4336  color: var(--peach-t2);4337  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4338}4339.peach-password-toggle-btn:hover {4340  border-color: var(--peach-t2);4341  color: var(--peach-t0);4342  background: rgba(240, 232, 216, 0.06);4343}43444345.peach-new-textarea {4346  width: 100%;4347  min-height: 88px;4348  resize: vertical;4349  border: 0;4350  outline: none;4351  background: transparent;4352  color: var(--peach-t1);4353  font-family: "IBM Plex Mono", monospace;4354  font-size: 0.75rem;4355  line-height: 1.65;4356  caret-color: var(--peach-accent);4357}43584359.peach-new-textarea::placeholder {4360  color: var(--peach-t2);4361  opacity: 0.7;4362}43634364.peach-settings-actions {4365  display: grid;4366  gap: 8px;4367}43684369.peach-sync-section-label {4370  font-size: 0.6875rem;4371  color: var(--peach-t2);4372  text-transform: uppercase;4373  letter-spacing: 0.05em;4374}43754376.peach-sync-network-note {4377  margin: 0 0 6px;4378  font-size: 0.75rem;4379  color: var(--peach-t2);4380  line-height: 1.4;4381}43824383.peach-settings-row--tappable {4384  background: none;4385  border: none;4386  width: 100%;4387  text-align: left;4388  cursor: pointer;4389  color: var(--peach-t1);4390  font-size: 0.8125rem;4391}4392.peach-settings-row--tappable:hover {4393  color: var(--peach-t0);4394}43954396.peach-sync-pro-hint {4397  display: flex;4398  flex-direction: column;4399  align-items: flex-start;4400  gap: 8px;4401  padding: 12px 0 4px;4402}44034404.peach-sync-device-row {4405  display: flex;4406  justify-content: space-between;4407  align-items: center;4408  padding: 6px 0;4409  border-bottom: 1px solid var(--peach-t3);4410}44114412.peach-sync-device-info {4413  display: flex;4414  flex-direction: column;4415  gap: 2px;4416}44174418.peach-sync-device-name {4419  font-size: 0.8125rem;4420  color: var(--peach-t0);4421}44224423.peach-sync-device-meta {4424  font-size: 0.6875rem;4425  color: var(--peach-t2);4426}44274428.peach-sync-status-dot {4429  display: inline-block;4430  width: 8px;4431  height: 8px;4432  border-radius: 50%;4433  vertical-align: middle;4434}44354436.peach-sync-remove-btn {4437  color: var(--peach-breach);4438}44394440.peach-sync-advanced-row {4441  display: flex;4442  justify-content: space-between;4443  align-items: center;4444  padding: 6px 0;4445  gap: 12px;4446}44474448.peach-sync-advanced-info {4449  display: flex;4450  flex-direction: column;4451  gap: 2px;4452  flex: 1;4453}44544455.peach-sync-advanced-name {4456  font-size: 0.8125rem;4457  color: var(--peach-t0);4458}44594460.peach-sync-reset-confirm {4461  display: flex;4462  flex-direction: column;4463  gap: 8px;4464  padding: 10px;4465  border: 1px solid var(--peach-breach);4466  border-radius: 10px;4467  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4468}44694470.peach-sync-reset-confirm-headline {4471  font-size: 0.8125rem;4472  font-weight: 600;4473  color: var(--peach-t0);4474  margin: 0;4475}44764477.peach-sync-reset-confirm-body {4478  font-size: 0.75rem;4479  color: var(--peach-t1);4480  margin: 0;4481  line-height: 1.4;4482}44834484.peach-btn--danger {4485  background: var(--peach-breach);4486  color: #fff;4487  border-color: var(--peach-breach);4488}4489.peach-btn--danger:hover:not(:disabled) {4490  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4491}4492.peach-btn--danger:disabled {4493  opacity: 0.55;4494  cursor: not-allowed;4495}44964497.peach-sync-hero-icon {4498  color: var(--peach-t1);4499  opacity: 0.85;4500}45014502.peach-import-preview {4503  margin-bottom: 12px;4504  max-height: 152px;4505  overflow-y: auto;4506  border: 1px solid var(--peach-t3);4507  border-radius: 10px;4508  padding: 8px 10px;4509  display: grid;4510  gap: 8px;4511  background: rgba(240, 232, 216, 0.02);4512}45134514.peach-import-preview-row {4515  display: flex;4516  justify-content: space-between;4517  gap: 10px;4518  font-size: 0.6875rem;4519  color: var(--peach-t1);4520}45214522.peach-import-preview-title {4523  color: var(--peach-t0);4524  flex: 1;4525  min-width: 0;4526  overflow: hidden;4527  text-overflow: ellipsis;4528  white-space: nowrap;4529}45304531.peach-import-preview-meta {4532  color: var(--peach-t2);4533  flex-shrink: 0;4534  max-width: 42%;4535  overflow: hidden;4536  text-overflow: ellipsis;4537  white-space: nowrap;4538}45394540.peach-import-preview-more {4541  color: var(--peach-t2);4542  font-size: 0.625rem;4543}45444545.peach-restore-copy {4546  margin: 0;4547  color: var(--peach-t1);4548  font-size: 0.6875rem;4549  line-height: 1.6;4550}45514552.peach-restore-warning {4553  padding: 10px 12px;4554  border-radius: 12px;4555  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4556  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4557  color: var(--peach-t0);4558  font-size: 0.6875rem;4559  line-height: 1.55;4560}45614562.peach-provider-chips {4563  display: flex;4564  flex-wrap: wrap;4565  gap: 6px;4566}45674568.peach-provider-chip {4569  display: inline-flex;4570  align-items: center;4571  padding: 5px 8px;4572  border-radius: 999px;4573  border: 1px solid var(--peach-t3);4574  background: rgba(240, 232, 216, 0.02);4575  color: var(--peach-t1);4576  font-family: "IBM Plex Mono", monospace;4577  font-size: 0.5rem;4578  letter-spacing: 0.08em;4579  text-transform: uppercase;4580}45814582.peach-restore-file,4583.peach-restore-input {4584  width: 100%;4585  border-radius: 10px;4586  border: 1px solid var(--peach-t3);4587  background: var(--peach-s2);4588  color: var(--peach-t0);4589  font-size: 0.75rem;4590}45914592.peach-restore-file {4593  padding: 9px 10px;4594}45954596.peach-restore-file::file-selector-button {4597  margin-right: 10px;4598  padding: 7px 10px;4599  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4600  border-radius: 999px;4601  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4602  color: var(--peach-t0);4603  font-size: 0.625rem;4604  letter-spacing: 0.08em;4605  text-transform: uppercase;4606  cursor: pointer;4607}46084609.peach-restore-input {4610  padding: 10px 12px;4611}46124613.peach-auth-grid {4614  display: grid;4615  gap: 10px;4616}46174618.peach-import-summary {4619  color: var(--peach-t1);4620  font-size: 0.75rem;4621  line-height: 1.6;4622  margin-bottom: 12px;4623}46244625.peach-restore-error {4626  color: rgba(220, 80, 60, 0.95);4627  font-size: 0.75rem;4628  line-height: 1.55;4629}46304631.peach-passkey-card {4632  max-width: 400px;4633  margin: auto 16px;4634  align-self: center;4635  width: calc(100% - 32px);4636}46374638/* Center the approval card vertically inside the overlay-view (which sets4639 * flex-direction: column without justify-content). Without this, the card4640 * sits at the top with a tall empty band below — looks unfinished on the4641 * 320px popup. */4642.peach-overlay-view:has(.peach-passkey-card) {4643  justify-content: center;4644}46454646.peach-pro-badge {4647  padding: 2px 6px;4648  border-radius: 999px;4649  font-family: var(--font-ui);4650  font-size: 0.625rem;4651  letter-spacing: 0.08em;4652  text-transform: uppercase;4653  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4654  color: var(--peach-accent);4655}46564657/* ── Shortcuts rebind table ─────────────────────────────────── */4658.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4659.peach-shortcut-row {4660  display: flex;4661  align-items: center;4662  gap: 10px;4663  padding: 6px 0;4664}4665.peach-shortcut-row-label {4666  flex: 1;4667  font-size: 0.75rem;4668  color: var(--peach-t0);4669}4670.peach-shortcut-chip {4671  min-width: 64px;4672  padding: 4px 10px;4673  border-radius: 6px;4674  border: 1px solid var(--peach-t3);4675  background: var(--peach-input-bg, var(--surface-card));4676  color: var(--peach-t0);4677  font-family: var(--font-mono);4678  font-size: 0.6875rem;4679  letter-spacing: 0.04em;4680  cursor: pointer;4681  text-align: center;4682  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4683}4684.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4685.peach-shortcut-chip.is-custom {4686  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4687  color: var(--peach-accent);4688}4689.peach-shortcut-chip.is-capturing {4690  border-color: var(--peach-accent);4691  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4692  color: var(--peach-accent);4693  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4694}4695@keyframes peach-shortcut-capture-pulse {4696  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4697  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4698}4699.peach-shortcut-reset {4700  background: transparent;4701  border: none;4702  cursor: pointer;4703  color: var(--peach-t2);4704  padding: 4px 6px;4705  border-radius: 5px;4706  font-size: 0.875rem;4707  line-height: 1;4708  transition: color 120ms ease, background 120ms ease;4709}4710.peach-shortcut-reset:hover {4711  color: var(--peach-t0);4712  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4713}4714.peach-shortcuts-conflict {4715  margin: 4px 0 0;4716  padding: 8px 10px;4717  border-radius: 7px;4718  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4719  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4720  font-family: var(--font-mono);4721  font-size: 0.6875rem;4722  color: var(--peach-t0);4723}47244725/* ── Help dialog overlay (? to open) ────────────────────────── */4726.peach-shortcuts-help-backdrop {4727  position: fixed;4728  inset: 0;4729  background: rgba(0, 0, 0, 0.55);4730  backdrop-filter: blur(2px);4731  display: flex;4732  align-items: center;4733  justify-content: center;4734  z-index: 1000;4735  animation: peach-help-fade-in 140ms ease forwards;4736}4737@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4738.peach-shortcuts-help-card {4739  width: min(320px, 92vw);4740  max-height: 80vh;4741  overflow-y: auto;4742  border-radius: 14px;4743  border: 1px solid var(--peach-t3);4744  background: var(--peach-bg);4745  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4746  padding: 16px 18px 18px;4747  display: flex;4748  flex-direction: column;4749  gap: 12px;4750}4751.peach-shortcuts-help-head {4752  display: flex; align-items: center; justify-content: space-between;4753}4754.peach-shortcuts-help-head h3 {4755  margin: 0;4756  font-family: var(--font-display);4757  font-style: italic;4758  font-weight: 400;4759  font-size: 22px;4760  color: var(--peach-t0);4761}4762.peach-shortcuts-help-close {4763  background: transparent;4764  border: none;4765  color: var(--peach-t2);4766  cursor: pointer;4767  font-size: 0.875rem;4768  padding: 4px 8px;4769  border-radius: 5px;4770}4771.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4772.peach-shortcuts-help-body ul {4773  list-style: none; padding: 0; margin: 4px 0 12px;4774  display: grid; gap: 8px;4775}4776.peach-shortcuts-help-body li {4777  display: flex; align-items: center; justify-content: space-between; gap: 12px;4778  font-size: 0.75rem; color: var(--peach-t0);4779}4780.peach-shortcuts-help-body kbd {4781  font-family: var(--font-mono);4782  font-size: 0.6875rem;4783  padding: 3px 8px;4784  border-radius: 6px;4785  background: var(--surface-card);4786  border: 1px solid var(--peach-t3);4787  color: var(--peach-accent);4788  letter-spacing: 0.04em;4789}47904791/* ── Pro promo on Account screen ────────────────────────────── */4792.peach-pro-promo {4793  position: relative;4794  border-radius: 14px;4795  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4796  background:4797    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4798    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4799    var(--surface-card);4800  overflow: hidden;4801  margin-bottom: 14px;4802}4803.peach-pro-promo-glow {4804  position: absolute;4805  inset: -40% -20% auto auto;4806  width: 220px; height: 220px;4807  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4808  pointer-events: none;4809  filter: blur(8px);4810}4811.peach-pro-promo-inner {4812  position: relative;4813  padding: 18px 18px 16px;4814}4815.peach-pro-promo-title {4816  font-family: var(--font-display);4817  font-style: italic;4818  font-weight: 400;4819  font-size: 28px;4820  line-height: 1;4821  letter-spacing: -0.005em;4822  color: var(--peach-t0);4823  margin: 0 0 4px;4824}4825.peach-pro-promo-tagline {4826  font-family: var(--font-mono);4827  font-size: 0.625rem;4828  letter-spacing: 0.06em;4829  color: var(--peach-t2);4830  margin: 0 0 14px;4831}4832.peach-pro-promo-list {4833  list-style: none;4834  margin: 0 0 16px;4835  padding: 0;4836  display: grid;4837  gap: 9px;4838}4839.peach-pro-promo-list li {4840  display: flex;4841  align-items: flex-start;4842  gap: 9px;4843  font-size: 0.75rem;4844  color: var(--peach-t1);4845  line-height: 1.4;4846}4847.peach-pro-promo-list svg {4848  width: 14px;4849  height: 14px;4850  flex-shrink: 0;4851  color: var(--peach-accent);4852  margin-top: 2px;4853}4854.peach-pro-promo-list span {4855  color: var(--peach-t0);4856}4857.peach-pro-promo-cta {4858  width: 100%;4859  background: var(--peach-accent);4860  color: #fff;4861  border: none;4862  padding: 9px 12px;4863  border-radius: 9px;4864  font-size: 0.75rem;4865  font-weight: 500;4866  font-family: var(--font-ui);4867  letter-spacing: 0.02em;4868  text-decoration: none;4869  display: inline-flex;4870  align-items: center;4871  justify-content: center;4872  cursor: pointer;4873  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4874  box-shadow: 0 2px 16px var(--peach-glow);4875}4876.peach-pro-promo-cta:hover {4877  filter: brightness(1.07);4878  box-shadow: 0 4px 24px var(--peach-glow);4879  transform: translateY(-1px);4880}4881.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }48824883.peach-pro-or-divider {4884  display: flex;4885  align-items: center;4886  gap: 10px;4887  margin: 4px 0 12px;4888  font-family: var(--font-mono);4889  font-size: 0.625rem;4890  letter-spacing: 0.06em;4891  color: var(--peach-t2);4892  text-transform: uppercase;4893}4894.peach-pro-or-divider::before,4895.peach-pro-or-divider::after {4896  content: "";4897  flex: 1;4898  height: 1px;4899  background: var(--peach-t3);4900}49014902.peach-loading {4903  position: absolute;4904  inset: 0;4905  display: flex;4906  align-items: center;4907  justify-content: center;4908  background: var(--bg);4909  animation: peach-loading-pulse 1.2s ease-in-out infinite;4910}49114912@keyframes peach-loading-pulse {4913  0%, 100% { opacity: 0.6; }4914  50% { opacity: 1; }4915}49164917/* ── Health Dashboard ─────────────────────────────────────────────────── */4918.peach-health-body {4919  flex: 1;4920  overflow-y: auto;4921  display: flex;4922  flex-direction: column;4923  /* Hide the platform scrollbar — every other scrollable surface in the4924   * popup hides it; the Health view was the one outlier and it ruined the4925   * polish. Behavior unchanged, just no rail rendered. */4926  scrollbar-width: none;4927  -ms-overflow-style: none;4928}4929.peach-health-body::-webkit-scrollbar { display: none; }49304931/* Loading screen for the Vault Health view. The advanced report computation4932 * can run for a few seconds on a large vault — without a clear loading4933 * screen the surface looked broken (the entry view bleeds through the4934 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4935.peach-health-loading-screen {4936  flex: 1;4937  display: flex;4938  flex-direction: column;4939  align-items: center;4940  justify-content: center;4941  gap: 14px;4942  padding: 32px 28px;4943  text-align: center;4944}49454946.peach-health-loading-glyph {4947  width: 48px;4948  height: 48px;4949  display: flex;4950  align-items: center;4951  justify-content: center;4952  border-radius: 14px;4953  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4954  color: var(--peach-accent);4955}49564957.peach-health-loading-title {4958  margin: 0;4959  font-family: var(--font-display);4960  font-style: italic;4961  font-weight: 300;4962  font-size: 19px;4963  line-height: 1.2;4964  color: var(--peach-t0);4965}49664967.peach-health-loading-copy {4968  margin: 0;4969  max-width: 240px;4970  font-size: 0.75rem;4971  line-height: 1.55;4972  color: var(--peach-t2);4973}49744975.peach-health-loading-track {4976  width: 200px;4977  height: 3px;4978  margin-top: 6px;4979  border-radius: 999px;4980  background: rgba(240, 232, 216, 0.06);4981  overflow: hidden;4982}49834984.peach-health-loading-fill {4985  width: 40%;4986  height: 100%;4987  border-radius: inherit;4988  background: linear-gradient(4989    90deg,4990    transparent 0%,4991    var(--peach-accent) 50%,4992    transparent 100%4993  );4994  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4995}49964997@keyframes peach-health-loading-sweep {4998  0%   { transform: translateX(-100%); }4999  100% { transform: translateX(350%); }5000}50015002[data-motion="reduce"] .peach-health-loading-fill,5003[data-motion="reduce"] .peach-health-loading-glyph svg path {5004  animation: none;5005}50065007.peach-health-summary {5008  padding: 10px 16px 6px;5009  font-family: "IBM Plex Mono", monospace;5010  font-size: 0.6875rem;5011}5012.peach-health-summary-warn { color: rgba(220,80,60,0.9); }5013.peach-health-summary-ok { color: var(--peach-t2); }50145015.peach-health-check-row {5016  padding: 0 16px 10px;5017}5018.peach-health-check-btn {5019  width: 100%;5020  display: flex;5021  align-items: center;5022  justify-content: center;5023}50245025.peach-health-sections {5026  flex: 1;5027  display: flex;5028  flex-direction: column;5029}50305031.peach-health-section {5032  border-bottom: 1px solid var(--peach-t3);5033}50345035.peach-health-section-header {5036  width: 100%;5037  display: flex;5038  align-items: center;5039  justify-content: space-between;5040  padding: 9px 16px;5041  background: transparent;5042  cursor: pointer;5043  color: var(--peach-t0);5044}50455046.peach-health-section-title-row {5047  display: flex;5048  align-items: center;5049  gap: 8px;5050}50515052.peach-health-count-badge {5053  display: inline-flex;5054  align-items: center;5055  justify-content: center;5056  min-width: 20px;5057  height: 18px;5058  padding: 0 5px;5059  border-radius: 999px;5060  background: rgba(220,80,60,0.15);5061  border: 1px solid rgba(220,80,60,0.25);5062  font-family: "IBM Plex Mono", monospace;5063  font-size: 0.5625rem;5064  color: rgba(220,80,60,0.9);5065}50665067.peach-health-section-title {5068  font-family: "IBM Plex Mono", monospace;5069  font-size: 0.6875rem;5070  text-transform: uppercase;5071  letter-spacing: 0.1em;5072  color: var(--peach-t1);5073}50745075.peach-health-chevron {5076  color: var(--peach-t2);5077  transition: transform 200ms ease;5078  flex-shrink: 0;5079}5080.peach-health-chevron.is-expanded {5081  transform: rotate(180deg);5082}50835084.peach-health-section-body {5085  padding: 0 16px 10px;5086  display: flex;5087  flex-direction: column;5088  gap: 4px;5089}50905091.peach-health-row {5092  display: flex;5093  align-items: flex-start;5094  justify-content: space-between;5095  gap: 8px;5096  padding: 6px 8px;5097  border-radius: 8px;5098  background: rgba(240,232,216,0.02);5099}51005101.peach-health-row-info {5102  flex: 1;5103  min-width: 0;5104  display: flex;5105  flex-direction: column;5106  gap: 2px;5107}51085109.peach-health-row-name {5110  font-family: var(--font-display);5111  font-size: 0.9375rem;5112  font-style: italic;5113  font-weight: 400;5114  color: var(--peach-t0);5115  white-space: nowrap;5116  overflow: hidden;5117  text-overflow: ellipsis;5118}51195120.peach-health-row-meta {5121  font-family: "IBM Plex Mono", monospace;5122  font-size: 0.5625rem;5123  color: var(--peach-t2);5124  letter-spacing: 0.05em;5125}51265127.peach-health-fix-btn {5128  font-size: 0.5625rem;5129  letter-spacing: 0.08em;5130  text-transform: uppercase;5131  padding: 4px 7px;5132  flex-shrink: 0;5133  display: flex;5134  align-items: center;5135}51365137.peach-health-empty {5138  font-family: "IBM Plex Mono", monospace;5139  font-size: 0.625rem;5140  color: var(--peach-t2);5141  padding: 6px 0;5142}51435144.peach-health-loading {5145  font-family: "IBM Plex Mono", monospace;5146  font-size: 0.625rem;5147  color: var(--peach-t2);5148  padding: 6px 0;5149  display: flex;5150  align-items: center;5151  gap: 6px;5152}51535154.peach-health-loading::before {5155  content: "";5156  width: 10px;5157  height: 10px;5158  border: 1.5px solid var(--peach-t3);5159  border-top-color: var(--peach-accent);5160  border-radius: 50%;5161  animation: peach-spin 600ms linear infinite;5162}51635164@keyframes peach-spin {5165  to { transform: rotate(360deg); }5166}51675168.peach-spinner {5169  width: 32px;5170  height: 32px;5171  border: 2px solid var(--peach-s2);5172  border-top-color: var(--peach-accent);5173  border-radius: 50%;5174  margin: 0 auto 16px;5175  animation: peach-spin 0.8s linear infinite;5176}51775178.peach-progress-screen {5179  text-align: center;5180  padding: 32px 16px;5181}51825183.peach-progress-screen-title {5184  font-size: 0.8125rem;5185  color: var(--peach-t0);5186  margin-bottom: 16px;5187}51885189.peach-progress-screen-stage {5190  font-size: 0.6875rem;5191  color: var(--peach-t2);5192  min-height: 14px;5193}51945195.peach-progress-screen-note {5196  font-size: 0.625rem;5197  color: var(--peach-t2);5198  margin-top: 8px;5199}52005201/* Tag chips */5202.peach-tag-chip {5203  display: inline-flex;5204  align-items: center;5205  gap: 4px;5206  padding: 3px 8px;5207  border-radius: 999px;5208  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5209  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5210  color: var(--peach-t0);5211  font-family: "IBM Plex Mono", monospace;5212  font-size: 0.625rem;5213  letter-spacing: 0.04em;5214}52155216.peach-tag-chip-remove {5217  background: transparent;5218  border: none;5219  color: inherit;5220  opacity: 0.6;5221  cursor: pointer;5222  padding: 0;5223  font-size: 0.75rem;5224  line-height: 1;5225}52265227.peach-tag-chip-remove:hover {5228  opacity: 1;5229}52305231/* Tag input */5232.peach-tag-input-wrap {5233  border-bottom: 1px solid var(--peach-t3);5234}52355236.peach-tag-suggestions {5237  display: flex;5238  flex-wrap: wrap;5239  gap: 4px;5240  padding: 6px 0;5241}52425243.peach-tag-suggestion {5244  padding: 2px 8px;5245  border-radius: 999px;5246  border: 1px solid var(--peach-t3);5247  background: var(--peach-s2);5248  color: var(--peach-t1);5249  font-family: "IBM Plex Mono", monospace;5250  font-size: 0.625rem;5251  cursor: pointer;5252  transition: border-color 80ms ease, background 80ms ease;5253}52545255.peach-tag-suggestion:hover {5256  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5257  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5258}52595260/* Identity suggestions — shown below username/email inputs in new-entry form */5261@keyframes peach-suggest-in {5262  from { opacity: 0; transform: translateY(-4px); }5263  to   { opacity: 1; transform: none; }5264}52655266.peach-identity-suggestions {5267  display: flex;5268  flex-direction: column;5269  gap: 1px;5270  margin-top: 4px;5271  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5272}52735274.peach-identity-filter-row {5275  display: flex;5276  align-items: center;5277  gap: 4px;5278  padding: 2px 0 5px;5279}52805281.peach-identity-collapse-btn {5282  margin-left: auto;5283  background: transparent;5284  border: none;5285  cursor: pointer;5286  color: var(--peach-t3);5287  padding: 2px 4px;5288  display: flex;5289  align-items: center;5290  line-height: 0;5291  border-radius: 3px;5292  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5293}52945295.peach-identity-collapse-btn:hover {5296  color: var(--peach-t1);5297}52985299.peach-identity-collapse-btn.is-collapsed {5300  transform: rotate(-90deg);5301}53025303.peach-identity-rows {5304  display: grid;5305  grid-template-rows: 1fr;5306  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5307}53085309.peach-identity-rows.is-collapsed {5310  grid-template-rows: 0fr;5311}53125313.peach-identity-rows-inner {5314  overflow-y: auto;5315  min-height: 0;5316  max-height: 148px;5317  scrollbar-width: thin;5318  scrollbar-color: var(--peach-t3) transparent;5319  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5320  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5321}53225323.peach-identity-rows-inner::-webkit-scrollbar {5324  width: 4px;5325}53265327.peach-identity-rows-inner::-webkit-scrollbar-track {5328  background: transparent;5329}53305331.peach-identity-rows-inner::-webkit-scrollbar-thumb {5332  background: var(--peach-t3);5333  border-radius: 2px;5334}53355336.peach-identity-filter-pill {5337  padding: 2px 7px;5338  border-radius: 999px;5339  border: 1px solid var(--peach-t3);5340  background: transparent;5341  color: var(--peach-t2);5342  font-family: "IBM Plex Mono", monospace;5343  font-size: 0.6rem;5344  cursor: pointer;5345  transition: border-color 80ms, background 80ms, color 80ms;5346}53475348.peach-identity-filter-pill.is-on {5349  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5350  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5351  color: var(--peach-accent);5352}53535354.peach-identity-suggestion {5355  display: flex;5356  align-items: center;5357  gap: 6px;5358  width: 100%;5359  padding: 4px 6px;5360  border-radius: 5px;5361  border: none;5362  background: transparent;5363  cursor: pointer;5364  text-align: left;5365  transition: background 80ms ease;5366}53675368.peach-identity-suggestion:hover,5369.peach-identity-suggestion:focus {5370  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5371  outline: none;5372}53735374.peach-identity-suggestion-value {5375  font-family: "IBM Plex Mono", monospace;5376  font-size: 0.7rem;5377  color: var(--peach-t1);5378  overflow: hidden;5379  text-overflow: ellipsis;5380  white-space: nowrap;5381  flex: 1;5382  min-width: 0;5383}53845385.peach-identity-suggestion-type {5386  font-family: "IBM Plex Mono", monospace;5387  font-size: 0.55rem;5388  font-weight: 600;5389  flex-shrink: 0;5390  padding: 1px 4px;5391  border-radius: 3px;5392}53935394.peach-identity-suggestion-type--email {5395  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5396  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5397}53985399.peach-identity-suggestion-type--username {5400  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5401  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5402}54035404.peach-identity-suggestion-meta {5405  font-family: "IBM Plex Mono", monospace;5406  font-size: 0.6rem;5407  color: var(--peach-t3);5408  flex-shrink: 0;5409}54105411/* Tag filter strip */5412.peach-tag-filter-strip {5413  border-bottom: 1px solid var(--peach-t3);5414  flex-shrink: 0;5415}54165417.peach-tag-filter-chip {5418  display: inline-flex;5419  align-items: center;5420  padding: 4px 10px;5421  border-radius: 999px;5422  border: 1px solid var(--peach-t3);5423  background: transparent;5424  color: var(--peach-t2);5425  font-family: "IBM Plex Mono", monospace;5426  font-size: 0.5625rem;5427  letter-spacing: 0.06em;5428  text-transform: uppercase;5429  cursor: pointer;5430  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5431  white-space: nowrap;5432}54335434.peach-tag-filter-chip:hover {5435  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5436  color: var(--peach-t1);5437}54385439.peach-tag-filter-chip.is-selected {5440  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5441  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5442  color: var(--peach-t0);5443}54445445/* ─────────────────────────────────────────────────────────────────────────5446   v1.4.12 additions5447   ─────────────────────────────────────────────────────────────────────── */54485449/* Sort bar */5450.peach-sort-bar {5451  display: flex;5452  align-items: center;5453  gap: 4px;5454  padding: 5px 12px;5455  border-bottom: 1px solid var(--peach-t3);5456  flex-shrink: 0;5457  overflow-x: auto;5458  scrollbar-width: none;5459}54605461.peach-sort-btn {5462  padding: 2px 9px;5463  border-radius: 999px;5464  border: 1px solid transparent;5465  background: transparent;5466  color: var(--peach-t2);5467  font-family: "IBM Plex Mono", monospace;5468  font-size: 0.5625rem;5469  letter-spacing: 0.07em;5470  text-transform: uppercase;5471  cursor: pointer;5472  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5473  white-space: nowrap;5474}54755476.peach-sort-btn:hover {5477  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5478  color: var(--peach-t1);5479}54805481.peach-sort-btn.is-active {5482  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5483  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5484  color: var(--peach-t0);5485}54865487.peach-sort-scope-btn {5488  padding-inline: 8px;5489  font-size: 0.53125rem;5490  letter-spacing: 0.05em;5491}54925493.peach-sort-domain-hint {5494  margin-left: auto;5495  font-family: "IBM Plex Mono", monospace;5496  font-size: 0.5625rem;5497  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5498  white-space: nowrap;5499  overflow: hidden;5500  text-overflow: ellipsis;5501  max-width: 110px;5502}55035504/* Tab-match badge on entry rows */5505.peach-tab-match-badge {5506  display: inline-block;5507  width: 6px;5508  height: 6px;5509  border-radius: 50%;5510  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5511  margin-left: 5px;5512  vertical-align: middle;5513  flex-shrink: 0;5514  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5515}55165517.peach-entry-row.is-tab-match {5518  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5519  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5520}55215522.peach-entry-row.is-tab-match:hover {5523  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5524}55255526/* Entry list stagger entrance */5527@keyframes peach-entry-fadein {5528  from { opacity: 0; transform: translateY(4px); }5529  to   { opacity: 1; transform: translateY(0); }5530}55315532.peach-vault-list .peach-entry-row {5533  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5534}55355536/* Button press micro-interaction */5537.peach-btn:active {5538  transform: scale(0.95);5539  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5540}55415542.peach-sort-btn:active,5543.peach-tag-filter-chip:active {5544  transform: scale(0.93);5545  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5546}55475548/* Password strength bar (Lock view + shared) */5549.peach-password-strength {5550  display: flex;5551  align-items: center;5552  gap: 8px;5553  margin-top: 6px;5554}55555556.peach-strength-bar {5557  flex: 1;5558  height: 3px;5559  border-radius: 2px;5560  background: var(--peach-t3);5561  overflow: hidden;5562}55635564.peach-strength-fill {5565  height: 100%;5566  border-radius: 2px;5567  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5568              background 300ms ease;5569}55705571.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5572.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5573.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5574.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }55755576.peach-strength-label {5577  font-family: "IBM Plex Mono", monospace;5578  font-style: italic;5579  font-size: 0.5625rem;5580  font-weight: 300;5581  letter-spacing: 0.06em;5582  color: var(--peach-t2);5583  min-width: 36px;5584  text-align: right;5585}55865587.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5588.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5589.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5590.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }55915592/* Duress form */5593.peach-duress-status {5594  padding: 2px 8px;5595  border-radius: 999px;5596  border: 1px solid var(--peach-t3);5597  font-family: "IBM Plex Mono", monospace;5598  font-size: 0.5625rem;5599  letter-spacing: 0.07em;5600  text-transform: uppercase;5601  color: var(--peach-t2);5602  flex-shrink: 0;5603}56045605.peach-duress-status.is-active {5606  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5607  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5608  color: var(--peach-t0);5609}56105611.peach-duress-form {5612  padding: 8px 0 4px;5613  display: flex;5614  flex-direction: column;5615  gap: 6px;5616}56175618.peach-duress-form .peach-label {5619  margin-top: 4px;5620}56215622.peach-duress-actions {5623  display: flex;5624  gap: 6px;5625  align-items: center;5626  margin-top: 4px;5627}56285629.peach-duress-actions .peach-btn:first-child {5630  margin-right: auto;5631}56325633/* Improved overlay spring entrance */5634.peach-overlay-view.ov-enter-up {5635  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5636}56375638@keyframes ov-enter-up-spring {5639  from { opacity: 0; transform: translateY(16px) scale(0.98); }5640  to   { opacity: 1; transform: translateY(0) scale(1); }5641}56425643.peach-overlay-view.ov-enter-right {5644  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5645}56465647@keyframes ov-enter-right-spring {5648  from { opacity: 0; transform: translateX(18px) scale(0.98); }5649  to   { opacity: 1; transform: translateX(0) scale(1); }5650}56515652/* ── Onboarding-mode restore screens (file import) ── */5653/* Used when MainImportView renders during onboarding (no vault yet).5654   Animates like a lock-screen transition. */5655.peach-lock-view {5656  position: absolute;5657  inset: 0;5658  display: flex;5659  flex-direction: column;5660  background:5661    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5662    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5663    var(--peach-bg);5664  z-index: 2;5665  overflow: hidden;5666  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5667}56685669.peach-lock-view-header {5670  display: flex;5671  align-items: center;5672  justify-content: space-between;5673  padding: 16px 18px 12px;5674  flex-shrink: 0;5675}56765677/* ───────── Settings: auto-lock select ───────── */5678.peach-settings-select {5679  font-family: "IBM Plex Mono", monospace;5680  font-size: 0.6875rem;5681  background: transparent;5682  border: 1px solid var(--peach-t3);5683  border-radius: 4px;5684  color: var(--peach-t1);5685  padding: 3px 6px;5686  cursor: pointer;5687  outline: none;5688}5689.peach-settings-select:focus {5690  border-color: var(--peach-accent);5691}56925693/* ───────── Duress status pill (new polished) ───────── */5694.peach-duress-status-pill {5695  font-family: "IBM Plex Mono", monospace;5696  font-size: 0.5625rem;5697  text-transform: uppercase;5698  letter-spacing: 0.12em;5699  padding: 2px 8px;5700  border-radius: 12px;5701  background: var(--peach-t3);5702  color: var(--peach-t2);5703  flex-shrink: 0;5704}5705.peach-duress-status-pill.is-active {5706  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5707  color: var(--peach-accent);5708}57095710/* ───────── Entry advanced disclosure (canary) ───────── */5711.peach-entry-advanced {5712  margin-top: 12px;5713  border-top: 1px solid var(--peach-t3);5714  padding-top: 10px;5715  position: relative;5716  z-index: 1;5717}5718.peach-entry-advanced-toggle {5719  display: flex;5720  align-items: center;5721  justify-content: space-between;5722  width: 100%;5723  background: transparent;5724  border: none;5725  cursor: pointer;5726  padding: 0;5727  color: var(--peach-t2);5728}5729.peach-canary-section {5730  margin-top: 10px;5731  display: grid;5732  gap: 6px;5733}57345735/* ───────── Import: merge/replace radio choices ───────── */5736.peach-import-choice {5737  display: flex;5738  align-items: flex-start;5739  gap: 10px;5740  padding: 8px 10px;5741  border: 1px solid var(--peach-t3);5742  border-radius: 10px;5743  cursor: pointer;5744  margin-bottom: 6px;5745  transition: border-color 120ms ease, background 120ms ease;5746}5747.peach-import-choice:hover {5748  border-color: var(--peach-accent);5749}5750.peach-import-choice input[type="radio"] {5751  margin-top: 3px;5752  accent-color: var(--peach-accent);5753  flex-shrink: 0;5754}5755.peach-import-choice-main {5756  display: flex;5757  flex-direction: column;5758  gap: 2px;5759  min-width: 0;5760}5761.peach-import-choice-label {5762  font-size: 0.75rem;5763  color: var(--peach-t0);5764}5765.peach-import-choice-sub {5766  font-size: 0.6875rem;5767  color: var(--peach-t2);5768  line-height: 1.5;5769}57705771/* ───────── Export: success confirmation strip ───────── */5772.peach-export-success {5773  display: flex;5774  align-items: flex-start;5775  gap: 10px;5776  padding: 12px;5777  border-radius: 12px;5778  border: 1px solid rgba(150, 175, 110, 0.3);5779  background: rgba(150, 175, 110, 0.08);5780  color: var(--peach-t0);5781  font-size: 0.75rem;5782  line-height: 1.55;5783}5784.peach-export-success-check {5785  color: rgba(150, 175, 110, 0.9);5786  font-size: 0.875rem;5787  flex-shrink: 0;5788}57895790/* ── Trash view ──────────────────────────────────────────────────────── */5791.peach-trash-entry-row {5792  display: flex;5793  align-items: center;5794  justify-content: space-between;5795  gap: 8px;5796  padding: 8px 0;5797  border-bottom: 1px solid var(--peach-border);5798}5799.peach-trash-entry-info {5800  flex: 1;5801  min-width: 0;5802  display: flex;5803  flex-direction: column;5804  gap: 2px;5805}5806.peach-trash-entry-title {5807  font-size: 0.8125rem;5808  color: var(--peach-t0);5809  overflow: hidden;5810  text-overflow: ellipsis;5811  white-space: nowrap;5812}5813.peach-trash-entry-meta {5814  font-family: var(--font-mono);5815  font-size: 0.5625rem;5816  color: var(--peach-t2);5817  letter-spacing: 0.04em;5818}5819.peach-trash-entry-actions {5820  display: flex;5821  align-items: center;5822  gap: 4px;5823  flex-shrink: 0;5824}5825.peach-trash-delete-btn {5826  background: transparent;5827  border: 0;5828  color: var(--peach-t3);5829  font-size: 1rem;5830  line-height: 1;5831  cursor: pointer;5832  padding: 2px 5px;5833  transition: color 0.15s;5834}5835.peach-trash-delete-btn:hover { color: var(--peach-breach); }5836.peach-trash-list {5837  overflow-y: auto;5838}5839.peach-trash-footer {5840  display: flex;5841  align-items: center;5842  gap: 8px;5843  padding: 8px 0 0;5844  border-top: 1px solid var(--peach-border);5845  margin-top: 4px;5846}5847.peach-trash-purge-all {5848  background: transparent;5849  border: 0;5850  color: var(--peach-t3);5851  font-size: 0.625rem;5852  cursor: pointer;5853  padding: 4px 0;5854  letter-spacing: 0.03em;5855  transition: color 0.2s;5856}5857.peach-trash-purge-all:hover { color: var(--peach-breach); }5858.peach-trash-purge-confirm-label {5859  font-size: 0.625rem;5860  color: var(--peach-t1);5861  flex: 1;5862}58635864/* ── Settings shortcuts grid ─────────────────────────────────────────── */5865.peach-shortcuts-grid {5866  display: grid;5867  grid-template-columns: auto 1fr;5868  gap: 6px 12px;5869  align-items: center;5870  padding: 4px 0;5871}5872.peach-shortcut-key {5873  font-family: var(--font-mono);5874  font-size: 0.625rem;5875  color: var(--peach-t0);5876  background: var(--peach-t3);5877  border-radius: 4px;5878  padding: 2px 6px;5879  white-space: nowrap;5880  text-align: center;5881}5882.peach-shortcut-desc {5883  font-size: 0.6875rem;5884  color: var(--peach-t1);5885}58865887/* ── Sort bar trash button ───────────────────────────────────────────── */5888.peach-sort-trash-btn {5889  display: flex;5890  align-items: center;5891  justify-content: center;5892  padding: 3px 5px;5893  background: transparent;5894  border: none;5895  cursor: pointer;5896  color: var(--peach-t2);5897  border-radius: 4px;5898  transition: color 140ms ease, background 140ms ease;5899}5900.peach-sort-trash-btn:hover {5901  color: var(--peach-t1);5902  background: var(--peach-t3);5903}5904.peach-sort-trash-btn.is-active {5905  color: var(--peach-accent);5906}59075908/* Accent color picker */5909.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5910.peach-accent-picker {5911  display: flex;5912  flex-wrap: wrap;5913  gap: 7px;5914  padding: 2px 0;5915}5916.peach-accent-swatch {5917  width: 22px;5918  height: 22px;5919  border-radius: 50%;5920  border: 2px solid transparent;5921  cursor: pointer;5922  padding: 0;5923  transition: transform 100ms;5924  outline-offset: 2px;5925}5926.peach-accent-swatch:hover { transform: scale(1.15); }5927.peach-accent-swatch.is-active {5928  border-color: var(--peach-t0);5929  transform: scale(1.1);5930}59315932.peach-pill-group {5933  display: flex;5934  gap: 6px;5935}5936.peach-pill-group .peach-btn.is-active {5937  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5938  border-color: var(--peach-accent);5939  color: var(--peach-t0);5940}59415942/* ── Card entry styles ───────────────────────────────────────── */5943.peach-card-number {5944  font-family: var(--peach-mono);5945  letter-spacing: 0.08em;5946}59475948.peach-card-network-badge {5949  font-size: 0.625rem;5950  padding: 1px 5px;5951  border-radius: 4px;5952  border: 0.5px solid var(--peach-border);5953  color: var(--peach-text-dim);5954  margin-left: 6px;5955  vertical-align: middle;5956}59575958.peach-card-expiry-row {5959  display: flex;5960  align-items: center;5961  gap: 8px;5962}59635964.peach-card-expiry-sep {5965  color: var(--peach-text-dim);5966}59675968/* ── Pro tier — upgrade screen ──────────────────────────────── */5969.peach-pro-mark {5970  font-size: 0.5625rem;5971  color: var(--peach-accent);5972  margin-left: 6px;5973  vertical-align: super;5974  opacity: 0.7;5975}59765977.peach-pro-mini-badge {5978  display: block;5979  font-size: 0.625rem;5980  font-style: italic;5981  color: var(--peach-accent);5982  letter-spacing: 0.04em;5983  margin-top: -2px;5984  padding-left: 2px;5985  opacity: 0.85;5986  text-align: center;5987}59885989.peach-wordmark-stack {5990  display: inline-flex;5991  flex-direction: column;5992  align-items: center;5993}59945995/* ── Pro tier — upgrade page ─────────────────────────────────── */5996/* ── Pro upgrade — redesigned editorial layout ─────────────────── */59975998.peach-pro-upgrade {5999  display: flex;6000  flex-direction: column;6001  align-items: stretch;6002  gap: 10px;6003  padding: 2px 2px 12px;6004}60056006.peach-pro-eyebrow {6007  margin: 0;6008  font-family: var(--font-ui);6009  font-size: 0.625rem;6010  font-weight: 500;6011  letter-spacing: 0.12em;6012  color: var(--peach-accent);6013}60146015.peach-pro-headline {6016  margin: 0;6017  font-family: var(--font-display, "Cormorant Garamond", serif);6018  font-size: 30px;6019  font-weight: 700;6020  font-style: normal;6021  line-height: 1.05;6022  color: var(--peach-t0);6023  letter-spacing: -0.01em;6024}6025.peach-pro-headline em {6026  font-style: italic;6027  font-weight: 400;6028  color: var(--peach-accent);6029}60306031.peach-pro-subtitle {6032  margin: 0;6033  font-size: 0.6875rem;6034  line-height: 1.5;6035  color: var(--peach-t1);6036}60376038/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6039.peach-pro-section-label {6040  margin: 6px 0 0;6041  font-family: var(--font-ui);6042  font-size: 0.5625rem;6043  font-weight: 500;6044  letter-spacing: 0.12em;6045  text-transform: uppercase;6046  color: var(--peach-t2);6047}60486049/* 2-column numbered feature grid */6050.peach-pro-grid {6051  display: grid;6052  grid-template-columns: 1fr 1fr;6053  border-top: 1px solid var(--peach-border);6054  border-left: 1px solid var(--peach-border);6055}60566057.peach-pro-grid-item {6058  display: flex;6059  flex-direction: column;6060  gap: 2px;6061  padding: 8px 9px;6062  border-right: 1px solid var(--peach-border);6063  border-bottom: 1px solid var(--peach-border);6064}60656066.peach-pro-grid-item--wide {6067  grid-column: 1 / -1;6068}60696070.peach-pro-grid-num {6071  font-family: var(--font-mono);6072  font-size: 0.5625rem;6073  color: var(--peach-accent);6074  letter-spacing: 0.06em;6075  opacity: 0.85;6076}60776078.peach-pro-grid-name {6079  font-size: 0.8125rem;6080  font-weight: 500;6081  color: var(--peach-t0);6082  line-height: 1.2;6083}60846085.peach-pro-grid-desc {6086  font-size: 0.625rem;6087  color: var(--peach-t1);6088  line-height: 1.4;6089}60906091.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6092  animation: peach-pulse-accent 600ms ease-out forwards;6093}60946095@keyframes peach-pulse-accent {6096  0%   { opacity: 1; transform: scale(1.2); }6097  100% { opacity: 0.85; transform: scale(1); }6098}60996100/* Actions */6101.peach-pro-upgrade-actions {6102  display: flex;6103  flex-direction: column;6104  align-items: stretch;6105  gap: 10px;6106}61076108.peach-pro-pricing {6109  margin: 0;6110  font-size: 1rem;6111  font-weight: 600;6112  color: var(--peach-t0);6113  letter-spacing: 0.01em;6114}6115.peach-pro-pricing-sub {6116  font-size: 0.75rem;6117  font-weight: 400;6118  color: var(--peach-t1);6119  letter-spacing: 0.02em;6120}61216122.peach-pro-upgrade-cta {6123  display: flex;6124  align-items: center;6125  justify-content: center;6126  text-decoration: none;6127  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6128  border: 1px solid var(--peach-accent);6129  border-radius: 10px;6130  color: var(--peach-accent);6131  font-family: var(--font-ui);6132  font-size: 0.8125rem;6133  font-weight: 600;6134  letter-spacing: 0.06em;6135  padding: 11px 16px;6136  transition: background 0.15s ease, color 0.15s ease;6137}6138.peach-pro-upgrade-cta:hover {6139  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6140}61416142.peach-pro-key-divider {6143  display: flex;6144  align-items: center;6145  gap: 8px;6146  color: var(--peach-t2);6147  font-size: 0.5625rem;6148  letter-spacing: 0.1em;6149}6150.peach-pro-key-divider::before,6151.peach-pro-key-divider::after {6152  content: "";6153  flex: 1;6154  height: 1px;6155  background: var(--peach-border);6156}61576158/* Inline key entry row */6159.peach-pro-key-inline {6160  display: flex;6161  align-items: center;6162  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6163  border: 1px solid var(--peach-border);6164  border-radius: 8px;6165  overflow: hidden;6166}6167.peach-pro-key-inline-input {6168  flex: 1;6169  background: transparent;6170  border: none;6171  outline: none;6172  color: var(--peach-t1);6173  font-family: var(--font-mono);6174  font-size: 0.625rem;6175  letter-spacing: 0.06em;6176  padding: 9px 10px;6177}6178.peach-pro-key-inline-input::placeholder {6179  color: var(--peach-t2);6180}6181.peach-pro-key-apply {6182  background: transparent;6183  border: none;6184  border-left: 1px solid var(--peach-border);6185  color: var(--peach-t2);6186  font-family: var(--font-ui);6187  font-size: 0.5625rem;6188  font-weight: 600;6189  letter-spacing: 0.08em;6190  padding: 9px 10px;6191  cursor: pointer;6192  transition: color 0.15s ease;6193  flex-shrink: 0;6194}6195.peach-pro-key-apply:not(:disabled):hover {6196  color: var(--peach-accent);6197}6198.peach-pro-key-apply:disabled {6199  opacity: 0.35;6200  cursor: not-allowed;6201}62026203/* ── Pro tier — key ceremony ─────────────────────────────────── */6204.peach-pro-key-ceremony {6205  display: flex;6206  flex-direction: column;6207  align-items: center;6208  gap: 12px;6209  padding: 20px 4px 16px;6210}62116212.peach-pro-key-ceremony .peach-lock-rune-string {6213  font-size: 1rem;6214  gap: 12px;6215  flex: 0;6216  justify-content: center;6217}62186219.peach-pro-key-ceremony-label {6220  margin: 0;6221  font-size: 0.6875rem;6222  color: var(--peach-t2);6223  font-style: italic;6224  letter-spacing: 0.04em;6225}62266227.peach-pro-key-input {6228  font-family: var(--font-mono, monospace);6229  letter-spacing: 0.06em;6230  text-align: center;6231  width: 100%;6232  box-sizing: border-box;6233}62346235.peach-pro-key-error {6236  margin: 0;6237  font-size: 0.75rem;6238  text-align: center;6239  color: var(--peach-breach, #e55);6240  padding: 0;6241}62426243.peach-pro-key-activate {6244  width: 100%;6245  text-align: center;6246  box-sizing: border-box;6247  padding: 10px 20px;6248  font-size: 0.8125rem;6249}62506251.peach-pro-key-cancel {6252  background: transparent;6253  border: 0;6254  color: var(--peach-t2);6255  font-size: 0.6875rem;6256  cursor: pointer;6257  padding: 2px 8px;6258  transition: color 0.2s;6259}62606261.peach-pro-key-cancel:hover { color: var(--peach-accent); }62626263/* ── Pro tier — active state ─────────────────────────────────── */6264.peach-pro-active {6265  display: flex;6266  flex-direction: column;6267  align-items: center;6268  gap: 0;6269  padding: 8px 4px 16px;6270  min-height: 280px;6271}62726273.peach-pro-active-hero {6274  display: flex;6275  flex-direction: column;6276  align-items: center;6277  gap: 6px;6278  padding: 20px 0 8px;6279}62806281.peach-pro-active-mark-wrap {6282  display: flex;6283  align-items: center;6284  justify-content: center;6285  margin-bottom: 4px;6286}62876288.peach-pro-active-mark {6289  width: 60px;6290  height: 60px;6291}62926293.peach-pro-active-title {6294  font-family: var(--font-display, var(--font-ui));6295  font-size: 26px;6296  margin: 0;6297  color: var(--peach-t0);6298  letter-spacing: 0.01em;6299}63006301.peach-pro-active-since {6302  margin: 0;6303  font-size: 0.6875rem;6304  color: var(--peach-t2);6305  font-style: italic;6306}63076308.peach-pro-active-features {6309  display: flex;6310  flex-direction: column;6311  gap: 8px;6312  width: 100%;6313  padding: 14px 8px 0;6314  border-top: 1px solid var(--peach-border);6315  flex: 1;6316}63176318.peach-pro-active-feature {6319  display: flex;6320  align-items: center;6321  gap: 9px;6322}63236324.peach-pro-active-feature-mark {6325  color: var(--peach-accent);6326  font-size: 0.625rem;6327  opacity: 0.65;6328  flex-shrink: 0;6329}63306331.peach-pro-active-feature-name {6332  font-size: 0.75rem;6333  color: var(--peach-t1);6334}63356336.peach-pro-deactivate {6337  align-self: center;6338  background: transparent;6339  border: 0;6340  color: var(--peach-t3);6341  font-size: 0.625rem;6342  cursor: pointer;6343  padding: 8px 0 0;6344  margin-top: 16px;6345  letter-spacing: 0.03em;6346  transition: color 0.2s;6347}63486349.peach-pro-deactivate:hover { color: var(--peach-t2); }63506351.peach-pro-deactivate:disabled {6352  opacity: 0.5;6353  cursor: default;6354}63556356/* ── Pro card activation sparkles & thank-you ── */6357button.peach-pro-active-mark-wrap {6358  background: transparent;6359  border: 0;6360  padding: 0;6361  cursor: pointer;6362  position: relative;6363  overflow: visible;6364}63656366.peach-pro-sparks {6367  position: absolute;6368  inset: 0;6369  pointer-events: none;6370  overflow: visible;6371}63726373.peach-pro-spark {6374  position: absolute;6375  top: 50%;6376  left: 50%;6377  font-size: 9px;6378  line-height: 1;6379  opacity: 0;6380  transform: translate(-50%, -50%);6381  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;6382}63836384@keyframes peach-pro-spark-fly {6385  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }6386  25%  { opacity: 1; }6387  100% {6388    opacity: 0;6389    transform: translate(6390      calc(-50% + var(--spark-x, 0px)),6391      calc(-50% + var(--spark-y, -40px))6392    ) scale(0.8);6393  }6394}63956396.peach-pro-thankyou-text {6397  margin: 4px 0 0;6398  font-size: 0.6875rem;6399  font-style: italic;6400  color: currentColor;6401  opacity: 0;6402  animation: peach-pro-thankyou-flash 2.5s ease both;6403}64046405@keyframes peach-pro-thankyou-flash {6406  0%   { opacity: 0; transform: translateY(4px); }6407  15%  { opacity: 0.75; transform: translateY(0); }6408  75%  { opacity: 0.75; }6409  100% { opacity: 0; }6410}64116412/* ── Pro advanced health remediation queue ──────────────────── */6413.peach-health-pro-queue {6414  display: flex;6415  flex-direction: column;6416  gap: 10px;6417  padding: 12px;6418  margin: 0 0 12px;6419  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6420  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6421  border-radius: 10px;6422}64236424.peach-health-pro-queue-head {6425  display: flex;6426  justify-content: space-between;6427  align-items: baseline;6428}64296430.peach-health-pro-queue-title {6431  font-size: 0.75rem;6432  font-weight: 500;6433  letter-spacing: 0.04em;6434  text-transform: uppercase;6435  color: var(--peach-accent);6436}64376438.peach-health-pro-queue-score {6439  font-size: 0.6875rem;6440  color: var(--peach-t2);6441}64426443.peach-health-pro-row {6444  display: flex;6445  gap: 10px;6446  align-items: center;6447  padding: 8px 0;6448  border-top: 1px solid var(--peach-border);6449}64506451.peach-health-pro-row-info {6452  flex: 1;6453  display: flex;6454  flex-direction: column;6455  gap: 4px;6456  min-width: 0;6457}64586459.peach-health-pro-action {6460  flex: 0 0 auto;6461  padding: 4px 8px;6462  font-size: 0.5625rem;6463  letter-spacing: 0.08em;6464  text-transform: uppercase;6465}64666467.peach-health-pro-row-name {6468  font-size: 0.8125rem;6469  color: var(--peach-t0);6470  overflow: hidden;6471  text-overflow: ellipsis;6472  white-space: nowrap;6473}64746475.peach-health-pro-row-meta {6476  font-size: 0.6875rem;6477  color: var(--peach-t2);6478}64796480.peach-health-pro-bar {6481  height: 2px;6482  background: var(--peach-border);6483  border-radius: 2px;6484  overflow: hidden;6485  margin-top: 2px;6486}64876488.peach-health-pro-bar-fill {6489  height: 100%;6490  background: var(--peach-accent);6491  transition: width 200ms ease-out;6492}64936494/* ── Pro activation celebration ── */6495@keyframes peach-pro-bloom {6496  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6497  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6498                 drop-shadow(0 0 48px var(--peach-glow)); }6499  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6500}65016502@keyframes peach-pro-wordmark-in {6503  from { opacity: 0; transform: translateY(4px); }6504  to   { opacity: 1; transform: translateY(0); }6505}65066507@keyframes peach-pro-fade-out {6508  from { opacity: 1; }6509  to   { opacity: 0; }6510}65116512.peach-pro-celebration {6513  background:6514    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6515    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6516    var(--peach-bg);6517  border: 1px solid var(--peach-t3);6518  box-shadow:6519    0 2px 8px rgba(0,0,0,0.55),6520    0 14px 48px rgba(0,0,0,0.7),6521    0 0 0 1px rgba(240,232,216,0.04);6522  overflow: hidden;6523  width: 320px;6524  height: 520px;6525  display: flex;6526  flex-direction: column;6527  align-items: center;6528  justify-content: center;6529  gap: 8px;6530  padding: 32px 24px;6531  text-align: center;6532}65336534.peach-pro-celebration.is-leaving {6535  animation: peach-pro-fade-out 400ms ease forwards;6536}65376538.peach-pro-bloom-target {6539  display: flex;6540  align-items: center;6541  justify-content: center;6542  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6543  margin-bottom: 12px;6544}65456546.peach-pro-bloom-icon {6547  width: 48px;6548  height: 48px;6549}65506551.peach-pro-wordmark {6552  font-family: var(--font-display);6553  font-size: 22px;6554  font-style: italic;6555  font-weight: 400;6556  color: var(--peach-accent);6557  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6558}65596560.peach-pro-thankyou {6561  font-size: 0.75rem;6562  font-style: italic;6563  color: var(--peach-t2);6564  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6565}656665676568/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6569.peach-pro-notice-banner {6570  display: flex;6571  align-items: center;6572  gap: 8px;6573  padding: 7px 12px;6574  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6575  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6576  font-size: 0.6875rem;6577  color: var(--peach-t2);6578  font-family: "IBM Plex Mono", monospace;6579  flex-shrink: 0;6580}65816582.peach-pro-notice-link {6583  background: none;6584  border: none;6585  padding: 0;6586  cursor: pointer;6587  font-size: 0.6875rem;6588  color: var(--peach-accent);6589  font-family: "IBM Plex Mono", monospace;6590  margin-left: auto;6591  white-space: nowrap;6592}65936594.peach-pro-notice-close {6595  background: none;6596  border: none;6597  padding: 0 0 0 4px;6598  cursor: pointer;6599  font-size: 0.625rem;6600  color: var(--peach-t3);6601  line-height: 1;6602}66036604/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6605   Renders over whatever view is showing. 60-second expiry; the popup ticks6606   the countdown each second and clears the banner when it hits zero. */6607.peach-pair-request-banner {6608  display: flex;6609  flex-direction: column;6610  gap: 8px;6611  padding: 10px 12px;6612  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6613  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6614  font-family: "IBM Plex Mono", monospace;6615  flex-shrink: 0;6616}66176618.peach-pair-toast {6619  padding: 8px 12px;6620  font-family: "IBM Plex Mono", monospace;6621  font-size: 0.75rem;6622  color: var(--peach-t1);6623  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6624  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6625  flex-shrink: 0;6626  text-align: center;6627}66286629.peach-pair-toast strong {6630  color: var(--peach-t0);6631  font-weight: 500;6632}66336634.peach-pair-request-header {6635  display: flex;6636  align-items: center;6637  gap: 8px;6638  font-size: 0.75rem;6639  color: var(--peach-t1);6640}66416642.peach-pair-request-mark {6643  font-size: 0.875rem;6644  display: inline-flex;6645  align-items: center;6646}66476648.peach-pair-request-icon {6649  width: 1em;6650  height: 1em;6651}66526653.peach-pair-request-title {6654  font-weight: 600;6655  color: var(--peach-t0);6656}66576658.peach-pair-request-countdown {6659  margin-left: auto;6660  font-variant-numeric: tabular-nums;6661  color: var(--peach-t2);6662  font-size: 0.6875rem;6663}66646665.peach-pair-request-body {6666  margin: 0;6667  font-size: 0.75rem;6668  color: var(--peach-t1);6669  line-height: 1.4;6670}66716672.peach-pair-request-body strong {6673  color: var(--peach-t0);6674  font-weight: 600;6675}66766677.peach-pair-request-actions {6678  display: flex;6679  gap: 8px;6680  justify-content: flex-end;6681}66826683/* ─── First-run onboarding ──────────────────────────────────────────────6684   Three-card welcome shown once before vault creation. The PeachScript6685   rune background drifts behind everything at very low opacity — it's6686   atmosphere, not focus. The cards themselves use the same panel6687   language as the rest of the popup so the transition into NewVault is6688   continuous, not a jarring switch of visual register. */66896690.peach-onboarding {6691  position: relative;6692  display: flex;6693  flex-direction: column;6694  width: 100%;6695  height: 100%;6696  padding: 16px 16px 18px;6697  box-sizing: border-box;6698  overflow: hidden;6699  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6700}67016702.peach-onboarding.is-completing {6703  animation: peach-onboard-exit 200ms ease-out forwards;6704}67056706.peach-rune-background {6707  position: absolute;6708  inset: 0;6709  width: 100%;6710  height: 100%;6711  pointer-events: none;6712  z-index: 0;6713  transition: opacity 500ms ease-out;6714}67156716.peach-onboarding.is-completing .peach-rune-background {6717  opacity: 0;6718}67196720.peach-onboarding-header {6721  position: relative;6722  z-index: 1;6723  display: flex;6724  align-items: center;6725  margin-bottom: 14px;6726}67276728.peach-onboarding-card {6729  position: relative;6730  z-index: 1;6731  flex: 1;6732  display: flex;6733  flex-direction: column;6734  gap: 10px;6735  padding: 22px 20px;6736  border-radius: 16px;6737  border: 1px solid var(--peach-t3);6738  background:6739    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6740  backdrop-filter: blur(3px);6741  -webkit-backdrop-filter: blur(3px);6742  box-shadow:6743    inset 0 1px 0 rgba(240, 232, 216, 0.04),6744    0 12px 28px rgba(0, 0, 0, 0.12);6745  cursor: pointer;6746  user-select: none;6747  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6748}67496750.peach-onboarding-card.is-exiting {6751  animation: peach-card-out 120ms ease-in forwards;6752  pointer-events: none;6753}67546755.peach-onboarding-card-headline {6756  margin: 0;6757  font-family: var(--font-display);6758  font-style: italic;6759  font-weight: 400;6760  font-size: 22px;6761  line-height: 1.05;6762  color: var(--peach-t0);6763  white-space: pre-line;6764}67656766.peach-onboarding-divider {6767  margin: 4px 0 6px;6768  border: 0;6769  border-top: 1px solid var(--peach-t3);6770  width: 100%;6771}67726773.peach-onboarding-body {6774  margin: 0;6775  font-size: 0.8125rem;6776  line-height: 1.6;6777  color: var(--peach-t1);6778}67796780.peach-onboarding-warning {6781  display: flex;6782  align-items: flex-start;6783  gap: 8px;6784  margin: 6px 0 0;6785  padding-top: 8px;6786  border-top: 1px dashed var(--peach-t3);6787  font-size: 0.8125rem;6788  line-height: 1.5;6789  color: var(--peach-t1);6790}67916792.peach-onboarding-warning-icon {6793  color: var(--peach-accent);6794  font-size: 0.8125rem;6795  line-height: 1.5;6796  flex: 0 0 auto;6797}67986799.peach-onboarding-nav {6800  position: relative;6801  z-index: 1;6802  display: flex;6803  align-items: center;6804  justify-content: space-between;6805  margin-top: 12px;6806  padding: 0 4px;6807}68086809.peach-onboarding-dots {6810  display: flex;6811  align-items: center;6812  gap: 6px;6813}68146815.peach-onboarding-dot {6816  width: 6px;6817  height: 6px;6818  border-radius: 50%;6819  background: var(--peach-t2);6820  transition: width 200ms ease, height 200ms ease, background 200ms ease;6821}68226823.peach-onboarding-dot.is-active {6824  width: 8px;6825  height: 8px;6826  background: var(--peach-accent);6827}68286829.peach-onboarding-next {6830  background: none;6831  border: none;6832  padding: 4px 0;6833  cursor: pointer;6834  font-family: "IBM Plex Mono", monospace;6835  font-size: 0.6875rem;6836  letter-spacing: 0.04em;6837  color: var(--peach-t1);6838  transition: color 150ms ease;6839}68406841.peach-onboarding-next:hover {6842  color: var(--peach-t0);6843}68446845.peach-onboarding-next:disabled {6846  opacity: 0.5;6847  cursor: default;6848}68496850.peach-onboarding-back {6851  background: none;6852  border: none;6853  padding: 4px 0;6854  cursor: pointer;6855  font-family: "IBM Plex Mono", monospace;6856  font-size: 0.6875rem;6857  letter-spacing: 0.04em;6858  color: var(--peach-t2);6859  transition: color 150ms ease;6860}68616862.peach-onboarding-back:hover {6863  color: var(--peach-t0);6864}68656866.peach-onboarding-back:disabled {6867  opacity: 0.5;6868  cursor: default;6869}68706871/* Reserve back-button width on the first card so the dots stay centred */6872.peach-onboarding-back-spacer {6873  width: 44px;6874}68756876.peach-onboarding-choice-row {6877  display: grid;6878  grid-template-columns: 1fr;6879  gap: 8px;6880  margin-top: 14px;6881}68826883.peach-onboarding-choice {6884  min-height: 34px;6885  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);6886  border-radius: 8px;6887  padding: 8px 10px;6888  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);6889  color: var(--peach-t0);6890  font-size: 0.76rem;6891  font-weight: 700;6892  text-align: left;6893}68946895.peach-onboarding-choice--adopt {6896  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);6897  background: color-mix(in srgb, var(--peach-accent) 13%, transparent);6898}68996900.peach-adopt-vault {6901  position: relative;6902  min-height: 100%;6903  padding: 22px;6904  display: grid;6905  place-items: center;6906}69076908.peach-adopt-card {6909  position: relative;6910  z-index: 1;6911  width: min(100%, 330px);6912  padding: 20px;6913  border-radius: 8px;6914  border: 1px solid color-mix(in srgb, var(--peach-t0) 13%, transparent);6915  background: color-mix(in srgb, var(--peach-surface) 90%, transparent);6916  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);6917}69186919.peach-adopt-card h1 {6920  margin: 0 0 10px;6921  font-size: 1.28rem;6922  line-height: 1.15;6923}69246925.peach-adopt-card p {6926  margin: 0 0 14px;6927  color: var(--peach-t1);6928  line-height: 1.35;6929}69306931.peach-adopt-input {6932  margin-bottom: 12px;6933}69346935.peach-adopt-card textarea.peach-adopt-input {6936  width: 100%;6937  resize: vertical;6938  overflow-wrap: anywhere;6939  font-family: "IBM Plex Mono", monospace;6940  font-size: 0.64rem;6941}69426943.peach-adopt-qr-video {6944  display: block;6945  width: 100%;6946  max-height: 220px;6947  margin: 0 0 12px;6948  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);6949  border-radius: 8px;6950  background: #000;6951  object-fit: cover;6952}69536954.peach-adoption-source-invitation {6955  display: flex;6956  flex-direction: column;6957  align-items: center;6958  gap: 10px;6959  padding: 4px 18px 16px;6960  text-align: center;6961}69626963.peach-pair-qr {6964  display: block;6965  max-width: min(224px, 100%);6966  height: auto;6967  padding: 8px;6968  border-radius: 10px;6969  background: #fff;6970}69716972/* The same invitation the QR carries, as text — the fallback when a camera6973   won't cooperate. Monospace and full width so it can be read out loud. */6974.peach-pair-invitation-text {6975  width: 100%;6976  resize: none;6977  padding: 8px 10px;6978  border-radius: 10px;6979  border: 1px solid var(--peach-border);6980  background: color-mix(in srgb, var(--peach-t0) 3%, transparent);6981  color: var(--peach-t1);6982  font-family: var(--peach-mono, ui-monospace, SFMono-Regular, Menlo, monospace);6983  font-size: 10px;6984  line-height: 1.5;6985  word-break: break-all;6986}69876988.peach-adopt-card > .peach-btn + .peach-btn {6989  margin-top: 8px;6990}69916992.peach-adopt-actions {6993  display: flex;6994  gap: 10px;6995  margin-top: 14px;6996}69976998.peach-adopt-actions > button {6999  flex: 1;7000}70017002.peach-adopt-birds {7003  width: 120px;7004  height: 54px;7005  margin-bottom: 14px;7006  position: relative;7007}70087009.peach-adopt-birds::before {7010  content: "";7011  position: absolute;7012  left: 29px;7013  right: 29px;7014  top: 25px;7015  height: 1px;7016  background: color-mix(in srgb, var(--peach-accent) 50%, transparent);7017}70187019.peach-adopt-birds span {7020  position: absolute;7021  top: 11px;7022  width: 34px;7023  height: 28px;7024  border-radius: 50% 50% 46% 46%;7025  background: color-mix(in srgb, var(--peach-accent) 45%, var(--peach-t0));7026  box-shadow: 0 0 18px color-mix(in srgb, var(--peach-accent) 24%, transparent);7027  animation: peach-adopt-bob 1.8s ease-in-out infinite;7028}70297030.peach-adopt-birds span:first-child {7031  left: 12px;7032}70337034.peach-adopt-birds span:last-child {7035  right: 12px;7036  animation-delay: 0.25s;7037}70387039.peach-adopt-sas {7040  margin: 18px 0;7041  padding: 14px;7042  border-radius: 8px;7043  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);7044  color: var(--peach-t0);7045  font-size: 1.35rem;7046  font-weight: 800;7047  font-variant-numeric: tabular-nums;7048  text-align: center;7049}70507051@keyframes peach-adopt-bob {7052  0%, 100% { transform: translateY(0); }7053  50% { transform: translateY(-5px); }7054}70557056.peach-onboarding-mobile-card-buttons {7057  display: flex;7058  flex-direction: column;7059  gap: 8px;7060  margin-top: 16px;7061}70627063@keyframes peach-onboard-enter {7064  from { opacity: 0; transform: translateY(20px); }7065  to   { opacity: 1; transform: translateY(0); }7066}70677068@keyframes peach-onboard-exit {7069  from { opacity: 1; }7070  to   { opacity: 0; }7071}70727073@keyframes peach-card-in {7074  from { opacity: 0; transform: translateX(12px); }7075  to   { opacity: 1; transform: translateX(0); }7076}70777078@keyframes peach-card-out {7079  from { opacity: 1; transform: translateX(0); }7080  to   { opacity: 0; transform: translateX(-12px); }7081}70827083/* ─── New vault screen — matched to onboarding card language ─────────── */70847085/* Two classes so this beats the shared .peach-screen.lock-screen--vault-stage7086   rule (same element) without loosening the unlock/restore screens. The7087   create-vault screen is the only vault-stage view tall enough to overflow7088   the 520px popup, so its spacing is tuned to fit header → card → restore →7089   recovery warning with nothing clipped. */7090.peach-screen.peach-newvault {7091  position: relative;7092  display: flex;7093  flex-direction: column;7094  gap: 12px;7095  padding: 14px 16px 12px;7096  overflow: hidden;7097}70987099/* Suppress the warm-blob ambient art inherited from .lock-screen — the7100   new vault card now carries the visual weight. */7101.peach-newvault::before {7102  content: none;7103}71047105.peach-newvault-header {7106  position: relative;7107  z-index: 2;7108  display: flex;7109  align-items: center;7110  gap: 10px;7111  margin-bottom: 2px;7112}71137114.peach-newvault-back {7115  display: inline-flex;7116  align-items: center;7117  gap: 4px;7118  background: transparent;7119  border: none;7120  color: var(--peach-t2);7121  font-family: "IBM Plex Mono", monospace;7122  font-size: 0.625rem;7123  letter-spacing: 0.06em;7124  cursor: pointer;7125  padding: 4px 6px;7126  border-radius: 6px;7127  transition: color 120ms ease, background 120ms ease;7128}71297130.peach-newvault-back:hover {7131  color: var(--peach-t0);7132  background: rgba(240, 232, 216, 0.04);7133}71347135.peach-newvault-mark {7136  position: absolute;7137  right: -12px;7138  top: 6px;7139  width: 110px;7140  height: 110px;7141  pointer-events: none;7142  opacity: 0.10;7143  filter: saturate(0.9);7144  z-index: 0;7145}7146.peach-newvault-mark-art {7147  width: 100%;7148  height: 100%;7149}7150.peach-newvault-mark-art path:nth-child(1) {7151  fill: rgba(123, 144, 96, 0.88);7152}7153.peach-newvault-mark-art path:nth-child(2) {7154  stroke: rgba(94, 122, 66, 0.95);7155}71567157.peach-newvault-card {7158  position: relative;7159  z-index: 1;7160  display: flex;7161  flex-direction: column;7162  gap: 8px;7163  padding: 16px 20px 14px;7164  border-radius: 16px;7165  border: 1px solid var(--peach-t3);7166  background:7167    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));7168  backdrop-filter: blur(3px);7169  -webkit-backdrop-filter: blur(3px);7170  box-shadow:7171    inset 0 1px 0 rgba(240, 232, 216, 0.04),7172    0 12px 28px rgba(0, 0, 0, 0.12);7173  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;7174}71757176.peach-newvault-headline {7177  margin: 0;7178  font-family: var(--font-display);7179  font-style: italic;7180  font-weight: 400;7181  font-size: 24px;7182  line-height: 1.05;7183  color: var(--peach-t0);7184  white-space: pre-line;7185}71867187.peach-newvault-divider {7188  margin: 2px 0 4px;7189  border: 0;7190  border-top: 1px solid var(--peach-t3);7191  width: 100%;7192}71937194.peach-newvault-field {7195  display: flex;7196  flex-direction: column;7197  gap: 4px;7198}71997200.peach-newvault-label-row {7201  display: flex;7202  align-items: center;7203  justify-content: space-between;7204}72057206/* Monospace input scaled to the card. Replaces the 22px unlock-input7207   so the placeholder no longer overflows and the field reads as part7208   of the same surface as the body copy. */7209.peach-newvault-input {7210  font-size: 0.875rem;7211  letter-spacing: 0.18em;7212  padding: 8px 0;7213}7214.peach-newvault-input::placeholder {7215  letter-spacing: 0.18em;7216  color: var(--peach-t2);7217}72187219.peach-newvault-hint {7220  margin: 2px 0 0;7221  font-family: "IBM Plex Mono", monospace;7222  font-size: 0.625rem;7223  color: var(--peach-t2);7224  letter-spacing: 0.04em;7225}72267227.peach-newvault-submit {7228  margin-top: 4px;7229}72307231.peach-newvault-warning {7232  display: flex;7233  align-items: flex-start;7234  gap: 8px;7235  margin: 2px 0 0;7236  padding-top: 8px;7237  border-top: 1px dashed var(--peach-t3);7238  font-size: 0.75rem;7239  line-height: 1.45;7240  color: var(--peach-t1);7241}72427243.peach-newvault-warning-icon {7244  color: var(--peach-accent);7245  font-size: 0.8125rem;7246  line-height: 1.4;7247  flex: 0 0 auto;7248}72497250/* Restore options sit inside the card, directly under "create vault", so7251   they are always reachable without scrolling. The top divider mirrors the7252   warning's so the choice reads as a deliberate fork, not a footnote. */7253.peach-newvault-restore {7254  position: relative;7255  z-index: 1;7256  display: flex;7257  flex-direction: column;7258  gap: 4px;7259  margin-top: 4px;7260  padding-top: 10px;7261  border-top: 1px dashed var(--peach-t3);7262}72637264/* Settings body — warm accent gradient gives the glass something to blur against */7265.peach-settings-body {7266  background:7267    radial-gradient(7268      ellipse at 30% 20%,7269      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7270      transparent 60%7271    );7272}72737274/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7275/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7276 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7277 * (replacing the vault from a backup file) and "hazard" for actions that7278 * are absolutely irreversible (Panic). Both use the same card scaffold so7279 * they read as a pair, but the colour family signals the severity at a7280 * glance — yellow for caution, red for don't.7281 */7282.peach-danger-card {7283  --danger-tint: 235, 158, 52; /* amber */7284  display: flex;7285  flex-direction: column;7286  gap: 8px;7287  padding: 14px;7288  margin-top: 10px;7289  border-radius: 12px;7290  border: 1px solid rgba(var(--danger-tint), 0.32);7291  background:7292    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7293    rgba(var(--danger-tint), 0.04);7294  box-shadow:7295    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7296    0 0 24px rgba(var(--danger-tint), 0.04);7297  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7298}72997300.peach-danger-card:hover {7301  border-color: rgba(var(--danger-tint), 0.55);7302  box-shadow:7303    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7304    0 0 36px rgba(var(--danger-tint), 0.10);7305}73067307.peach-danger-card--hazard {7308  --danger-tint: 220, 38, 38; /* red */7309}73107311.peach-danger-card-head {7312  display: flex;7313  align-items: center;7314  gap: 10px;7315}73167317.peach-danger-card-glyph {7318  width: 28px;7319  height: 28px;7320  flex-shrink: 0;7321  display: flex;7322  align-items: center;7323  justify-content: center;7324  border-radius: 8px;7325  background: rgba(var(--danger-tint), 0.12);7326  color: rgba(var(--danger-tint), 0.95);7327  font-size: 1rem;7328  line-height: 1;7329}73307331.peach-danger-card-title {7332  margin: 0;7333  font-size: 0.8125rem;7334  font-weight: 600;7335  color: rgba(var(--danger-tint), 0.92);7336  letter-spacing: 0.01em;7337}73387339.peach-danger-card-copy {7340  margin: 0;7341  font-size: 0.6875rem;7342  line-height: 1.5;7343  color: var(--peach-t2);7344}73457346.peach-danger-card-button {7347  width: 100%;7348  padding: 9px;7349  margin-top: 4px;7350  background: transparent;7351  border: 1px solid rgba(var(--danger-tint), 0.45);7352  border-radius: 8px;7353  color: rgba(var(--danger-tint), 0.9);7354  font-size: 0.75rem;7355  font-weight: 500;7356  letter-spacing: 0.02em;7357  cursor: pointer;7358  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7359}73607361.peach-danger-card-button:hover {7362  background: rgba(var(--danger-tint), 0.10);7363  border-color: rgba(var(--danger-tint), 0.75);7364  color: rgb(var(--danger-tint));7365}73667367.peach-adoption-consent-backdrop {7368  position: fixed;7369  inset: 0;7370  z-index: 1000;7371  display: grid;7372  place-items: center;7373  padding: 18px;7374  background: rgba(15, 10, 5, 0.72);7375}73767377.peach-adoption-consent {7378  width: min(100%, 340px);7379  border: 1px solid color-mix(in srgb, #f59e0b 54%, var(--peach-border));7380  border-radius: 8px;7381  padding: 18px;7382  background: color-mix(in srgb, #2c1b08 84%, var(--peach-surface));7383  color: var(--peach-t0);7384  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42);7385}73867387.peach-adoption-consent-icon {7388  width: 32px;7389  height: 32px;7390  display: grid;7391  place-items: center;7392  border-radius: 50%;7393  background: #f59e0b;7394  color: #1f1304;7395  font-weight: 800;7396}73977398.peach-adoption-consent h2 {7399  margin: 12px 0 8px;7400  font-size: 1.22rem;7401  line-height: 1.15;7402}74037404.peach-adoption-consent-device,7405.peach-adoption-consent-warning {7406  margin: 0 0 12px;7407  color: var(--peach-t1);7408  line-height: 1.35;7409}74107411.peach-adoption-consent-device strong {7412  color: var(--peach-t0);7413}74147415.peach-adoption-consent-warning {7416  color: #ffd79a;7417}74187419.peach-adoption-consent-sas {7420  display: flex;7421  justify-content: space-between;7422  align-items: center;7423  gap: 12px;7424  margin: 14px 0;7425  padding: 10px;7426  border-radius: 6px;7427  background: rgba(245, 158, 11, 0.12);7428}74297430/* Tracking, not interleaved spaces: eight digits with per-digit spaces no7431   longer fit beside the label at 320px. */7432.peach-adoption-consent-sas strong {7433  font-variant-numeric: tabular-nums;7434  letter-spacing: 0.18em;7435  white-space: nowrap;7436}74377438.peach-adoption-consent-actions {7439  display: flex;7440  justify-content: space-between;7441  gap: 10px;7442  margin-top: 16px;7443}74447445.peach-adoption-consent-actions > button {7446  flex: 1;7447}74487449/* ── Panic flow (three-step destruction) ───────────────────────────────── */7450.peach-panic {7451  display: flex;7452  flex-direction: column;7453  flex: 1;7454  min-height: 0;7455  padding: 28px 20px 20px;7456  gap: 18px;7457  overflow-y: auto;7458  scrollbar-width: none;7459  -ms-overflow-style: none;7460}74617462.peach-panic::-webkit-scrollbar { display: none; }74637464.peach-panic-step2 {7465  background: rgba(220, 38, 38, 0.04);7466}74677468.peach-panic-step3 {7469  position: relative;7470  background: #0f0505;7471  color: #ffffff;7472  overflow: hidden;7473}74747475.peach-panic-rune-bg {7476  position: absolute;7477  inset: 0;7478  opacity: 0.22;7479  pointer-events: none;7480  overflow: hidden;7481}74827483.peach-panic-rune-bg canvas {7484  width: 100% !important;7485  height: 100% !important;7486}74877488.peach-panic-icon {7489  font-size: 32px;7490  color: rgb(220, 38, 38);7491  line-height: 1;7492}74937494.peach-panic-title {7495  margin: 0;7496  font-size: 18px;7497  font-weight: 500;7498  color: var(--peach-t1);7499}75007501.peach-panic-title--severe {7502  font-size: 20px;7503  font-weight: 700;7504  color: rgb(220, 38, 38);7505}75067507.peach-panic-body {7508  margin: 0;7509  font-size: 0.8125rem;7510  line-height: 1.55;7511  color: var(--peach-t2);7512}75137514.peach-panic-body--severe {7515  color: rgba(220, 38, 38, 0.85);7516}75177518.peach-panic-body--final {7519  font-size: 1rem;7520  font-weight: 700;7521  color: rgb(255, 80, 80);7522  line-height: 1.4;7523}75247525.peach-panic-body--final-intro {7526  font-size: 1rem;7527  color: #ffffff;7528  font-weight: 400;7529}75307531.peach-panic-divider {7532  height: 1px;7533  background: rgba(255, 255, 255, 0.08);7534  margin: 4px 0;7535}75367537.peach-panic-confirm-input {7538  width: 100%;7539  padding: 10px 12px;7540  background: rgba(255, 255, 255, 0.02);7541  border: 1px solid rgba(220, 38, 38, 0.4);7542  border-radius: 8px;7543  color: var(--peach-t1);7544  font-family: "IBM Plex Mono", monospace;7545  font-size: 0.875rem;7546  letter-spacing: 0.12em;7547  text-transform: uppercase;7548}75497550.peach-panic-confirm-input:focus {7551  outline: none;7552  border-color: rgb(220, 38, 38);7553}75547555.peach-panic-confirm-input--match {7556  border-color: rgb(220, 38, 38);7557  color: rgb(220, 38, 38);7558}75597560.peach-panic-confirm-label {7561  font-size: 0.6875rem;7562  color: var(--peach-t2);7563  margin: 0 0 -8px;7564  letter-spacing: 0.06em;7565}75667567.peach-panic-actions {7568  display: flex;7569  flex-direction: column;7570  gap: 10px;7571  margin-top: auto;7572}75737574.peach-panic-button {7575  width: 100%;7576  padding: 12px;7577  border-radius: 8px;7578  font-size: 0.8125rem;7579  cursor: pointer;7580  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7581}75827583.peach-panic-button--primary {7584  background: var(--peach-accent);7585  border: 1px solid var(--peach-accent);7586  color: #ffffff;7587  font-weight: 600;7588}75897590.peach-panic-button--primary:hover {7591  background: color-mix(in srgb, var(--peach-accent) 88%, white);7592}75937594.peach-panic-button--danger {7595  background: rgb(220, 38, 38);7596  border: 1px solid rgb(220, 38, 38);7597  color: #ffffff;7598  font-weight: 600;7599}76007601.peach-panic-button--danger:disabled {7602  opacity: 0.35;7603  cursor: not-allowed;7604}76057606.peach-panic-button--ghost {7607  background: transparent;7608  border: 1px solid rgba(255, 255, 255, 0.18);7609  color: var(--peach-t2);7610}76117612.peach-panic-button--ghost:hover {7613  border-color: rgba(255, 255, 255, 0.32);7614  color: var(--peach-t1);7615}76167617.peach-panic-link {7618  background: transparent;7619  border: none;7620  padding: 4px 0;7621  color: rgba(220, 38, 38, 0.65);7622  font-size: 0.75rem;7623  cursor: pointer;7624  text-align: left;7625  text-decoration: underline;7626  text-underline-offset: 3px;7627}76287629.peach-panic-link:hover {7630  color: rgb(220, 38, 38);7631}76327633.peach-panic-bar {7634  background: rgb(220, 38, 38);7635  padding: 16px 20px;7636  margin: -28px -20px 0;7637  text-align: center;7638  font-size: 0.8125rem;7639  font-weight: 700;7640  letter-spacing: 0.12em;7641  color: #ffffff;7642}76437644.peach-panic-final-button {7645  width: 100%;7646  padding: 14px;7647  background: rgb(220, 38, 38);7648  border: none;7649  border-radius: 8px;7650  color: #ffffff;7651  font-size: 0.875rem;7652  font-weight: 700;7653  letter-spacing: 0.08em;7654  text-transform: uppercase;7655  cursor: pointer;7656  animation: peach-panic-pulse 2s ease-in-out infinite;7657}76587659.peach-settings-license {7660  margin-top: 10px;7661  padding-top: 10px;7662  border-top: 1px solid var(--peach-t3);7663}76647665.peach-settings-label {7666  font-size: 0.625rem;7667  letter-spacing: 0.08em;7668  color: var(--peach-t3);7669  display: block;7670  margin-bottom: 6px;7671}76727673.peach-settings-license-row {7674  display: flex;7675  align-items: center;7676  justify-content: space-between;7677  gap: 8px;7678}76797680.peach-settings-license-key {7681  font-family: 'IBM Plex Mono', monospace;7682  font-size: 0.75rem;7683  color: var(--peach-t0);7684  letter-spacing: 0.04em;7685  word-break: break-all;7686  flex: 1;7687  min-width: 0;7688}76897690.peach-settings-license-key--masked {7691  font-family: 'IBM Plex Mono', monospace;7692  font-size: 0.6rem;7693  color: var(--peach-t1);7694  letter-spacing: 0.18em;7695  user-select: none;7696}76977698.peach-settings-license-actions {7699  display: flex;7700  align-items: center;7701  gap: 2px;7702  flex-shrink: 0;7703}77047705.peach-settings-license-copy {7706  font-size: 0.6875rem;7707  color: var(--peach-accent);7708  background: transparent;7709  border: none;7710  cursor: pointer;7711  padding: 4px 8px;7712  border-radius: 4px;7713  flex-shrink: 0;7714  transition: opacity 150ms ease;7715}77167717.peach-settings-license-copy:hover {7718  opacity: 0.75;7719}77207721.peach-settings-license-toggle {7722  display: flex;7723  align-items: center;7724  justify-content: center;7725  background: transparent;7726  border: none;7727  cursor: pointer;7728  padding: 4px 6px;7729  border-radius: 4px;7730  color: var(--peach-t2);7731  transition: color 150ms ease;7732}77337734.peach-settings-license-toggle:hover {7735  color: var(--peach-t1);7736}77377738@keyframes peach-panic-pulse {7739  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7740  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7741}77427743[data-motion="reduce"] .peach-panic-final-button {7744  animation: none;7745}77467747/* Vault History — Settings → Vault sub-view */77487749.peach-history-list {7750  border: 1px solid var(--peach-border);7751  border-radius: 8px;7752  overflow: hidden;7753  margin: 8px 0 4px;7754}77557756.peach-history-row {7757  display: flex;7758  align-items: center;7759  justify-content: space-between;7760  padding: 9px 12px;7761  gap: 10px;7762  border-bottom: 1px solid var(--peach-border);7763}77647765.peach-history-row:last-child {7766  border-bottom: none;7767}77687769.peach-history-meta {7770  display: flex;7771  flex-direction: column;7772  gap: 2px;7773  min-width: 0;7774  flex: 1;7775}77767777.peach-history-time {7778  font-size: 0.75rem;7779  font-family: 'IBM Plex Mono', ui-monospace, monospace;7780  color: var(--peach-t0);7781  white-space: nowrap;7782  overflow: hidden;7783  text-overflow: ellipsis;7784}77857786.peach-history-sub {7787  font-size: 0.625rem;7788  color: var(--peach-t2);7789  letter-spacing: 0.06em;7790  text-transform: uppercase;7791  white-space: nowrap;7792  overflow: hidden;7793  text-overflow: ellipsis;7794}77957796.peach-history-btn {7797  flex-shrink: 0;7798  white-space: nowrap;7799  min-width: 56px;7800  text-align: center;7801}78027803.peach-history-btn.is-busy {7804  opacity: 0.65;7805}78067807.peach-history-footer {7808  font-size: 0.625rem;7809  color: var(--peach-t3);7810  letter-spacing: 0.05em;7811  text-align: right;7812  margin: 0;7813  padding: 2px 0 0;7814}78157816/* ── Context menu + swipe-copy flash ─────────────────────── */7817.peach-context-menu-backdrop {7818  position: fixed;7819  inset: 0;7820  background: rgba(0, 0, 0, 0.45);7821  z-index: 100;7822  display: flex;7823  align-items: flex-end;7824  justify-content: center;7825  animation: peach-ctx-fade 140ms ease both;7826}7827.peach-context-menu {7828  width: min(360px, calc(100vw - 24px));7829  margin-bottom: max(env(safe-area-inset-bottom), 12px);7830  background: var(--peach-bg);7831  border: 1px solid var(--peach-t3);7832  border-radius: 14px;7833  padding: 6px;7834  display: flex;7835  flex-direction: column;7836  gap: 2px;7837  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7838  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7839}7840@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7841@keyframes peach-ctx-rise {7842  from { transform: translateY(16px); opacity: 0; }7843  to   { transform: translateY(0);    opacity: 1; }7844}7845.peach-context-menu-item {7846  background: transparent;7847  color: var(--peach-t0);7848  border: 0;7849  border-radius: 10px;7850  padding: 12px 14px;7851  text-align: left;7852  font: inherit;7853  cursor: pointer;7854}7855.peach-context-menu-item:hover,7856.peach-context-menu-item:focus-visible {7857  background: var(--peach-t3);7858}7859.peach-context-menu-item--danger {7860  color: var(--peach-health-bad, #d96868);7861}7862.peach-context-menu-item--cancel {7863  color: var(--peach-t2);7864  margin-top: 4px;7865  border-top: 1px solid var(--peach-t3);7866  border-radius: 0 0 10px 10px;7867}78687869/* Swipe-to-copy flash */7870.peach-entry-row.is-copy-flash {7871  animation: peach-copy-flash 600ms ease both;7872}7873@keyframes peach-copy-flash {7874  0%   { background: transparent; }7875  20%  { background: rgba(217, 153, 51, 0.32); }7876  100% { background: transparent; }7877}78787879html { font-size: 16px; }78807881/* ── Recovery word entry ─────────────────────────────────────────── */7882.peach-lock-recover-link {7883  display: block;7884  width: 100%;7885  margin-top: 12px;7886  background: none;7887  border: none;7888  font-family: "IBM Plex Mono", monospace;7889  font-size: 0.625rem;7890  letter-spacing: 0.06em;7891  color: var(--peach-t2);7892  cursor: pointer;7893  text-align: center;7894  padding: 4px;7895  transition: color 120ms ease;7896}7897.peach-lock-recover-link:hover {7898  color: var(--peach-t0);7899}79007901.lock-screen--recovery {7902  display: flex;7903  flex-direction: column;7904  align-items: stretch;7905  padding: 12px 20px 24px;7906  overflow: hidden;7907}79087909.peach-recovery-nav {7910  display: flex;7911  align-items: center;7912  position: relative;7913  z-index: 1;7914  margin-bottom: 4px;7915}79167917/* Mask runes to the top decorative band only — keep inputs and the7918   bottom CTA button clear. The bottom of the popup is reserved for7919   submit buttons; rendering runes there overlaps the button glyph. */7920.peach-rune-background--recovery {7921  -webkit-mask-image: linear-gradient(7922    to bottom,7923    black 0px, black 85px,7924    transparent 110px,7925    transparent 100%7926  );7927  mask-image: linear-gradient(7928    to bottom,7929    black 0px, black 85px,7930    transparent 110px,7931    transparent 100%7932  );7933}79347935.peach-recovery-header {7936  text-align: center;7937  margin-bottom: 16px;7938  margin-top: 4px;7939}7940.peach-recovery-header .peach-onboarding-headline {7941  font-size: 1.25rem;7942  font-weight: 300;7943  letter-spacing: 0.02em;7944  margin: 0 0 4px;7945}7946.peach-recovery-header .peach-hint {7947  font-family: "IBM Plex Mono", monospace;7948  font-size: 0.625rem;7949  color: var(--peach-t2);7950  letter-spacing: 0.04em;7951  margin: 0;7952}79537954/* 12-word grid: 2 columns × 6 rows */7955.peach-recovery-grid {7956  display: grid;7957  grid-template-columns: repeat(2, 1fr);7958  gap: 12px 20px;7959  width: 100%;7960  margin-bottom: 0;7961}79627963.peach-recovery-word-slot {7964  display: flex;7965  align-items: center;7966  gap: 6px;7967  min-width: 0;7968}79697970.peach-recovery-word-index {7971  font-family: "IBM Plex Mono", monospace;7972  font-size: 0.5rem;7973  color: rgba(255, 255, 255, 0.35);7974  min-width: 14px;7975  flex-shrink: 0;7976  text-align: right;7977  letter-spacing: 0.04em;7978}79797980.peach-recovery-word-input {7981  flex: 1;7982  min-width: 0;7983  background: transparent;7984  border: none;7985  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7986  color: var(--peach-t0);7987  font-family: "IBM Plex Mono", monospace;7988  font-size: 0.6875rem;7989  letter-spacing: 0.06em;7990  padding: 5px 2px 4px;7991  outline: none;7992  text-transform: lowercase;7993  transition: border-color 120ms ease;7994}7995.peach-recovery-word-input::placeholder {7996  color: rgba(255, 255, 255, 0.18);7997}7998.peach-recovery-word-input:focus {7999  border-bottom-color: var(--peach-accent);8000}80018002.peach-recovery-submit {8003  width: 100%;8004  margin-top: auto;8005}80068007.peach-recovery-new-password-form {8008  width: 100%;8009  display: flex;8010  flex-direction: column;8011  gap: 16px;8012  margin-bottom: 8px;8013}8014.peach-recovery-new-password-form .peach-newvault-field {8015  display: flex;8016  flex-direction: column;8017  gap: 4px;8018}80198020/* ── Recovery words display (post-create) ────────────────────────── */8021.lock-screen--recovery-display {8022  display: flex;8023  flex-direction: column;8024  align-items: stretch;8025  padding: 0 20px 20px;8026  min-height: 0;8027  overflow-y: auto;8028}80298030.peach-recovery-words-display {8031  width: 100%;8032  margin-bottom: 16px;8033  border: 1px solid var(--peach-t3);8034  border-radius: 8px;8035  padding: 12px 14px;8036  background: rgba(245, 240, 234, 0.04);8037}80388039.peach-recovery-words-label {8040  font-family: "IBM Plex Mono", monospace;8041  font-size: 0.5rem;8042  letter-spacing: 0.08em;8043  color: var(--peach-t2);8044  text-transform: uppercase;8045  margin-bottom: 10px;8046}80478048.peach-recovery-word-list {8049  list-style: none;8050  margin: 0;8051  padding: 0;8052  display: grid;8053  grid-template-columns: repeat(2, 1fr);8054  gap: 6px 16px;8055}80568057.peach-recovery-word-item {8058  display: flex;8059  align-items: baseline;8060  gap: 5px;8061}80628063.peach-recovery-word-num {8064  font-family: "IBM Plex Mono", monospace;8065  font-size: 0.5rem;8066  color: var(--peach-t2);8067  width: 14px;8068  flex: 0 0 14px;8069  text-align: right;8070  letter-spacing: 0.04em;8071  font-variant-numeric: tabular-nums;8072}80738074.peach-recovery-download-btn {8075  display: block;8076  margin: 10px auto 0;8077  padding: 4px 10px;8078  background: transparent;8079  border: 1px solid var(--peach-border);8080  border-radius: 6px;8081  color: var(--peach-t2);8082  font-family: "IBM Plex Mono", monospace;8083  font-size: 0.5625rem;8084  letter-spacing: 0.06em;8085  text-transform: lowercase;8086  cursor: pointer;8087  transition: border-color 0.15s, color 0.15s;8088}80898090.peach-recovery-download-btn:hover {8091  border-color: var(--peach-accent);8092  color: var(--peach-t0);8093}80948095.peach-recovery-word-text {8096  font-family: "IBM Plex Mono", monospace;8097  font-size: 0.6875rem;8098  letter-spacing: 0.06em;8099  color: var(--peach-t0);8100  text-transform: lowercase;8101}81028103.peach-hint--warning {8104  color: var(--peach-accent);8105  font-style: italic;8106}8107.peach-hint--success {8108  color: var(--peach-t2);8109  font-family: "IBM Plex Mono", monospace;8110  font-size: 0.625rem;8111  letter-spacing: 0.06em;8112}81138114/* Confirmation step */8115.peach-recovery-confirm {8116  width: 100%;8117  flex: 1;8118  display: flex;8119  flex-direction: column;8120}8121.peach-recovery-confirm-label {8122  font-family: "IBM Plex Mono", monospace;8123  font-size: 0.5625rem;8124  letter-spacing: 0.04em;8125  color: var(--peach-t2);8126  text-align: center;8127  margin: 0 0 12px;8128}8129.peach-recovery-confirm-fields {8130  display: flex;8131  flex-direction: column;8132  gap: 14px;8133  margin-bottom: 10px;8134}8135.peach-recovery-confirm-field {8136  display: flex;8137  align-items: center;8138  gap: 8px;8139}8140.peach-recovery-confirm-num {8141  font-family: "IBM Plex Mono", monospace;8142  font-size: 0.5rem;8143  color: var(--peach-t2);8144  min-width: 44px;8145  letter-spacing: 0.04em;8146}8147.peach-recovery-confirm-input {8148  flex: 1;8149  background: transparent;8150  border: none;8151  border-bottom: 1px solid var(--peach-t3);8152  color: var(--peach-t0);8153  font-family: "IBM Plex Mono", monospace;8154  font-size: 0.6875rem;8155  letter-spacing: 0.06em;8156  padding: 4px 2px 3px;8157  outline: none;8158  text-transform: lowercase;8159  transition: border-color 120ms ease;8160}8161.peach-recovery-confirm-input:focus {8162  border-bottom-color: var(--peach-accent);8163}8164.peach-recovery-confirm-input:disabled {8165  opacity: 0.4;8166  cursor: not-allowed;8167}8168.peach-recovery-confirm-btn {8169  width: 100%;8170  margin-top: auto;8171}81728173/* ============================================================8174   Sync info sheet8175   ============================================================ */81768177.peach-sync-info-backdrop {8178  position: fixed;8179  inset: 0;8180  z-index: 200;8181  background: rgba(0, 0, 0, 0.55);8182  display: flex;8183  align-items: flex-end;8184  animation: peach-fade-in 200ms ease forwards;8185}81868187@keyframes peach-fade-in {8188  from { opacity: 0; }8189  to   { opacity: 1; }8190}81918192.peach-sync-info-sheet {8193  width: 100%;8194  background: var(--peach-bg-card, var(--peach-bg));8195  border-top-left-radius: 20px;8196  border-top-right-radius: 20px;8197  padding: 12px 24px 32px;8198  display: flex;8199  flex-direction: column;8200  gap: 20px;8201  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;8202}82038204@keyframes peach-sheet-up {8205  from { transform: translateY(100%); }8206  to   { transform: translateY(0); }8207}82088209.peach-sync-info-handle {8210  width: 36px;8211  height: 4px;8212  border-radius: 2px;8213  background: var(--peach-border);8214  margin: 0 auto 4px;8215  flex-shrink: 0;8216}82178218.peach-sync-info-title {8219  font-family: 'Cormorant Garamond', serif;8220  font-style: italic;8221  font-size: 26px;8222  font-weight: 600;8223  color: var(--peach-t0);8224  margin: 0;8225  line-height: 1.2;8226}82278228.peach-sync-info-body {8229  display: flex;8230  flex-direction: column;8231  gap: 14px;8232}82338234.peach-sync-info-point {8235  display: flex;8236  gap: 12px;8237  align-items: flex-start;8238  font-size: 14px;8239  color: var(--peach-t2);8240  line-height: 1.6;8241  margin: 0;8242}82438244.peach-sync-info-icon {8245  color: var(--peach-accent);8246  font-size: 16px;8247  flex-shrink: 0;8248  margin-top: 1px;8249}82508251.peach-sync-info-actions {8252  display: flex;8253  flex-direction: column;8254  gap: 12px;8255  margin-top: 4px;8256}82578258.peach-sync-info-pro-link {8259  background: none;8260  border: none;8261  font-size: 13px;8262  color: var(--peach-t3);8263  cursor: pointer;8264  padding: 0;8265  font-family: inherit;8266  text-align: center;8267  transition: color 150ms ease;8268}82698270.peach-sync-info-pro-link:hover {8271  color: var(--peach-accent);8272}82738274.peach-btn--full {8275  width: 100%;8276}82778278/* ── Sync screen ── */82798280.peach-sync-coming-soon {8281  display: flex;8282  align-items: flex-start;8283  gap: 10px;8284  padding: 12px 14px;8285  background: var(--peach-s1);8286  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8287  border-radius: 10px;8288}8289.peach-sync-coming-soon__icon {8290  flex-shrink: 0;8291  color: var(--peach-accent);8292  margin-top: 1px;8293  line-height: 0;8294}8295.peach-sync-coming-soon__title {8296  font-family: 'Cormorant Garamond', serif;8297  font-weight: 500;8298  font-size: 13px;8299  color: var(--peach-accent);8300  margin: 0 0 5px;8301  line-height: 1.3;8302}8303.peach-sync-coming-soon__body {8304  font-size: 12px;8305  color: var(--peach-t1);8306  line-height: 1.55;8307  margin: 0;8308}83098310.peach-sync-screen {8311  display: flex;8312  flex-direction: column;8313  height: 100%;8314}83158316.peach-sync-content {8317  flex: 1;8318  overflow-y: auto;8319  padding: 24px 20px 40px;8320  display: flex;8321  flex-direction: column;8322  gap: 24px;8323}83248325/* Intro (State A) */8326.peach-sync-headline {8327  font-family: 'Cormorant Garamond', serif;8328  font-style: italic;8329  font-size: 28px;8330  font-weight: 600;8331  color: var(--peach-t0);8332  margin: 0 0 10px;8333  line-height: 1.2;8334}83358336.peach-sync-intro-body {8337  font-size: 14px;8338  color: var(--peach-t1);8339  line-height: 1.6;8340  margin: 0;8341}83428343.peach-sync-pro-note {8344  display: flex;8345  flex-direction: column;8346  gap: 8px;8347  background: var(--peach-t3);8348  border-radius: 10px;8349  padding: 12px 14px;8350}83518352.peach-sync-pro-note-text {8353  font-size: 12px;8354  color: var(--peach-t2);8355  line-height: 1.5;8356  margin: 0;8357}83588359.peach-sync-pro-link {8360  background: none;8361  border: none;8362  font-size: 12px;8363  color: var(--peach-accent);8364  cursor: pointer;8365  padding: 0;8366  font-family: inherit;8367  text-align: left;8368}83698370/* Status (State C) */8371.peach-sync-status {8372  padding: 12px 0;8373  border-bottom: 1px solid var(--peach-border);8374}83758376.peach-sync-status-row {8377  display: flex;8378  align-items: center;8379  gap: 8px;8380}83818382.peach-sync-dot {8383  width: 7px;8384  height: 7px;8385  border-radius: 50%;8386  flex-shrink: 0;8387}83888389.peach-sync-dot--green { background: var(--peach-health-ok); }8390.peach-sync-dot--amber { background: var(--peach-accent); }83918392.peach-sync-status-text {8393  font-family: 'IBM Plex Mono', monospace;8394  font-size: 11px;8395  color: var(--peach-t2);8396}83978398/* Paired devices */8399.peach-sync-section {8400  display: flex;8401  flex-direction: column;8402  gap: 2px;8403}84048405.peach-sync-section-label {8406  font-family: 'IBM Plex Mono', monospace;8407  font-size: 10px;8408  letter-spacing: 0.1em;8409  color: var(--peach-t3);8410  margin: 0 0 10px;8411}84128413.peach-sync-device-row {8414  display: flex;8415  justify-content: space-between;8416  align-items: baseline;8417  padding: 10px 0;8418  border-bottom: 1px solid var(--peach-border);8419  gap: 12px;8420}84218422.peach-sync-device-name {8423  font-size: 14px;8424  color: var(--peach-t1);8425}84268427.peach-sync-device-meta {8428  font-family: 'IBM Plex Mono', monospace;8429  font-size: 11px;8430  color: var(--peach-t3);8431  white-space: nowrap;8432}84338434.peach-sync-hub-note {8435  padding: 14px 16px;8436  border: 1px solid var(--peach-border);8437  border-radius: 10px;8438  display: flex;8439  flex-direction: column;8440  gap: 6px;8441  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8442}84438444.peach-sync-hub-note-title {8445  font-size: 13px;8446  font-weight: 600;8447  color: var(--peach-t0);8448  margin: 0;8449}84508451.peach-sync-hub-note-body {8452  font-size: 12px;8453  color: var(--peach-t2);8454  line-height: 1.6;8455  margin: 0;8456}84578458/* Action buttons */8459.peach-sync-actions {8460  display: flex;8461  gap: 10px;8462  flex-wrap: wrap;8463}84648465/* Upgrade prompt (State B) */8466.peach-sync-upgrade {8467  display: flex;8468  flex-direction: column;8469  gap: 12px;8470  padding: 16px;8471  border: 1px solid var(--peach-border);8472  border-radius: 10px;8473}84748475.peach-sync-upgrade-text {8476  font-size: 13px;8477  color: var(--peach-t2);8478  line-height: 1.6;8479  margin: 0;8480}84818482/* Network note */8483.peach-sync-network-note {8484  font-size: 12px;8485  color: var(--peach-t3);8486  line-height: 1.6;8487  margin: 0;8488}84898490/* Advanced */8491.peach-sync-advanced {8492  margin-top: auto;8493  padding-top: 16px;8494  border-top: 1px solid var(--peach-border);8495}84968497.peach-sync-advanced-toggle {8498  display: flex;8499  align-items: center;8500  gap: 8px;8501  background: none;8502  border: none;8503  font-family: 'IBM Plex Mono', monospace;8504  font-size: 11px;8505  letter-spacing: 0.08em;8506  color: var(--peach-t3);8507  cursor: pointer;8508  padding: 0;8509  text-transform: uppercase;8510}85118512.peach-sync-advanced-chevron {8513  display: inline-block;8514  transition: transform 200ms ease;8515  font-size: 10px;8516}85178518.peach-sync-advanced-chevron.is-open {8519  transform: rotate(90deg);8520}85218522.peach-sync-advanced-content {8523  margin-top: 14px;8524}85258526.peach-sync-advanced-row {8527  display: flex;8528  justify-content: space-between;8529  align-items: center;8530  gap: 16px;8531}85328533.peach-sync-advanced-title {8534  font-size: 14px;8535  color: var(--peach-t1);8536  margin: 0 0 2px;8537}85388539.peach-sync-advanced-subtitle {8540  font-size: 12px;8541  color: var(--peach-t3);8542  margin: 0;8543  line-height: 1.5;8544}85458546/* ── Notes Mode ── */85478548/* Overlay that crossfades over the vault */8549.peach-notes-overlay {8550  position: fixed;8551  inset: 0;8552  z-index: 90;8553  opacity: 0;8554  pointer-events: none;8555  animation: peach-mode-in 220ms ease-in forwards;8556}85578558.peach-notes-overlay.is-visible {8559  opacity: 1;8560  pointer-events: auto;8561}85628563@keyframes peach-mode-in {8564  from { opacity: 0; }8565  to   { opacity: 1; }8566}85678568/* Top-level notes surface */8569.peach-notes-mode {8570  position: absolute;8571  inset: 0;8572  background: var(--peach-bg);8573  display: flex;8574  flex-direction: column;8575}85768577/* Rune canvas positioned behind content */8578.peach-note-rune-canvas {8579  position: absolute;8580  inset: 0;8581  width: 100%;8582  height: 100%;8583  pointer-events: none;8584  z-index: 0;8585}85868587/* TOC wrapper */8588.peach-notes-toc-wrapper {8589  position: absolute;8590  inset: 0;8591  z-index: 1;8592  opacity: 1;8593  pointer-events: auto;8594  transition: opacity 200ms ease;8595}85968597.peach-notes-toc-wrapper.is-hidden {8598  opacity: 0;8599  pointer-events: none;8600}86018602/* Editor wrapper */8603.peach-notes-editor-wrapper {8604  position: absolute;8605  inset: 0;8606  z-index: 2;8607  opacity: 0;8608  pointer-events: none;8609  transition: opacity 200ms ease;8610}86118612.peach-notes-editor-wrapper.is-visible {8613  opacity: 1;8614  pointer-events: auto;8615}86168617/* TOC inner */8618.peach-notes-toc {8619  position: relative;8620  display: flex;8621  flex-direction: column;8622  height: 100%;8623  padding-top: env(safe-area-inset-top, 0px);8624  padding-bottom: env(safe-area-inset-bottom, 0px);8625}86268627/* Shared header */8628.peach-notes-header {8629  display: flex;8630  align-items: center;8631  padding: 12px 16px;8632  gap: 12px;8633  flex-shrink: 0;8634  min-height: 52px;8635  position: relative;8636  z-index: 2;8637}86388639.peach-notes-back {8640  font-size: 22px;8641  color: var(--peach-t2);8642  background: none;8643  border: none;8644  padding: 4px;8645  cursor: pointer;8646  line-height: 1;8647  flex-shrink: 0;8648  transition: color 150ms ease;8649  -webkit-tap-highlight-color: transparent;8650}86518652.peach-notes-back:active { color: var(--peach-t0); }86538654.peach-notes-header-title {8655  flex: 1;8656  font-family: 'Cormorant Garamond', serif;8657  font-style: italic;8658  font-size: 22px;8659  color: var(--peach-t0);8660  text-align: center;8661}86628663.peach-notes-header-title.is-breadcrumb {8664  font-family: 'IBM Plex Mono', monospace;8665  font-style: normal;8666  font-size: 11px;8667  color: var(--peach-t3);8668  letter-spacing: 0.08em;8669  text-transform: uppercase;8670  cursor: pointer;8671}86728673.peach-notes-header-actions {8674  display: flex;8675  gap: 8px;8676  flex-shrink: 0;8677}86788679.peach-notes-header-btn {8680  width: 36px;8681  height: 36px;8682  display: flex;8683  align-items: center;8684  justify-content: center;8685  background: none;8686  border: none;8687  color: var(--peach-t2);8688  cursor: pointer;8689  border-radius: 8px;8690  font-size: 16px;8691  transition: color 150ms ease, background 150ms ease;8692  -webkit-tap-highlight-color: transparent;8693}86948695.peach-notes-header-btn:active {8696  background: rgba(255,255,255,0.06);8697  color: var(--peach-t0);8698}86998700/* Inline search bar */8701.peach-notes-search-input {8702  flex: 1;8703  background: none;8704  border: none;8705  outline: none;8706  font-family: 'IBM Plex Mono', monospace;8707  font-size: 13px;8708  color: var(--peach-t0);8709  padding: 4px 0;8710  letter-spacing: 0.02em;8711}87128713.peach-notes-search-input::placeholder {8714  color: var(--peach-t3);8715}87168717/* TOC list */8718.peach-notes-list-container {8719  flex: 1;8720  overflow-y: auto;8721  overflow-x: hidden;8722  scrollbar-width: none;8723  -webkit-overflow-scrolling: touch;8724  overscroll-behavior: contain;8725  position: relative;8726  z-index: 1;8727}87288729.peach-notes-list-container::-webkit-scrollbar { display: none; }87308731/* Note row */8732.peach-note-row {8733  position: relative;8734  display: grid;8735  grid-template-columns: 44px 8px 1fr 8px auto;8736  align-items: center;8737  min-height: 72px;8738  padding: 16px 20px;8739  border-bottom: 0.5px solid var(--peach-border);8740  cursor: pointer;8741  overflow: hidden;8742  touch-action: pan-y;8743  user-select: none;8744  -webkit-user-select: none;8745  -webkit-tap-highlight-color: transparent;8746}87478748.peach-note-row:first-child {8749  border-top: 0.5px solid var(--peach-border);8750}87518752.peach-note-row:active {8753  background: rgba(255,255,255,0.02);8754}87558756.peach-note-numeral {8757  font-family: 'Cormorant Garamond', serif;8758  font-style: italic;8759  font-size: 15px;8760  color: var(--peach-accent);8761  text-align: right;8762  line-height: 1;8763  flex-shrink: 0;8764}87658766.peach-note-title-gap { /* grid spacer */ }87678768.peach-note-title {8769  font-family: 'Cormorant Garamond', serif;8770  font-style: italic;8771  font-size: 18px;8772  color: var(--peach-t0);8773  line-height: 1.3;8774  min-width: 0;8775  overflow-wrap: break-word;8776}87778778.peach-note-title-match {8779  color: var(--peach-accent);8780}87818782.peach-note-date {8783  font-family: 'IBM Plex Mono', monospace;8784  font-size: 11px;8785  color: var(--peach-t2);8786  white-space: nowrap;8787  text-align: right;8788  flex-shrink: 0;8789  grid-column: 5;8790}87918792/* Swipe underlays */8793.peach-note-row-underlay {8794  position: absolute;8795  inset: 0;8796  display: flex;8797  align-items: center;8798  padding: 0 24px;8799  font-family: 'IBM Plex Mono', monospace;8800  font-size: 11px;8801  letter-spacing: 0.1em;8802  pointer-events: none;8803  z-index: 0;8804}88058806.peach-note-row-underlay--delete {8807  background: #8B2020;8808  color: rgba(255,255,255,0.9);8809  justify-content: flex-end;8810}88118812.peach-note-row-underlay--archive {8813  background: var(--peach-accent);8814  color: #0C0A06;8815  justify-content: flex-start;8816}88178818/* Delete confirm strip */8819.peach-note-delete-confirm {8820  position: absolute;8821  inset: 0;8822  background: var(--peach-bg);8823  display: flex;8824  align-items: center;8825  gap: 12px;8826  padding: 0 20px;8827  font-family: 'IBM Plex Mono', monospace;8828  font-size: 11px;8829  color: var(--peach-t1);8830  letter-spacing: 0.04em;8831  animation: peach-delete-confirm-in 150ms ease both;8832  z-index: 10;8833}88348835@keyframes peach-delete-confirm-in {8836  from { opacity: 0; }8837  to   { opacity: 1; }8838}88398840.peach-note-delete-confirm-btn {8841  background: #8B2020;8842  color: rgba(255,255,255,0.9);8843  border: none;8844  border-radius: 6px;8845  padding: 4px 10px;8846  font-family: 'IBM Plex Mono', monospace;8847  font-size: 10px;8848  cursor: pointer;8849  letter-spacing: 0.06em;8850}88518852.peach-note-delete-cancel-btn {8853  background: none;8854  border: none;8855  color: var(--peach-t3);8856  font-family: 'IBM Plex Mono', monospace;8857  font-size: 10px;8858  cursor: pointer;8859  letter-spacing: 0.06em;8860  padding: 4px 6px;8861}88628863/* + New note button */8864.peach-notes-new-btn {8865  font-family: 'IBM Plex Mono', monospace;8866  font-size: 12px;8867  color: var(--peach-t3);8868  text-align: center;8869  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8870  background: none;8871  border: none;8872  width: 100%;8873  cursor: pointer;8874  letter-spacing: 0.04em;8875  transition: color 150ms ease;8876  -webkit-tap-highlight-color: transparent;8877}88788879.peach-notes-new-btn:active { color: var(--peach-accent); }88808881/* Empty state */8882.peach-notes-empty {8883  display: flex;8884  flex-direction: column;8885  align-items: center;8886  justify-content: center;8887  flex: 1;8888  padding: 48px 32px;8889  gap: 16px;8890}88918892.peach-notes-empty-text {8893  font-family: 'Cormorant Garamond', serif;8894  font-style: italic;8895  font-size: 20px;8896  color: var(--peach-t3);8897  text-align: center;8898  margin: 0;8899  line-height: 1.4;8900  white-space: pre-line;8901}89028903/* ── Editor surface ── */89048905.peach-note-editor-surface {8906  position: absolute;8907  inset: 0;8908  background: var(--peach-bg);8909  display: flex;8910  flex-direction: column;8911  padding-top: env(safe-area-inset-top, 0px);8912}89138914.peach-note-editor-scroll {8915  flex: 1;8916  overflow-y: auto;8917  overflow-x: hidden;8918  scrollbar-width: none;8919  -webkit-overflow-scrolling: touch;8920  padding: 0 24px 120px;8921  position: relative;8922  z-index: 1;8923}89248925.peach-note-editor-scroll::-webkit-scrollbar { display: none; }89268927/* Desktop toolbar (always visible above body) */8928.peach-note-toolbar-desktop-inline {8929  display: flex;8930  align-items: center;8931  gap: 2px;8932  padding: 6px 0 12px;8933  margin-bottom: 4px;8934  border-bottom: 0.5px solid var(--peach-border);8935}89368937/* Title field */8938.peach-note-title-field {8939  font-family: 'Cormorant Garamond', serif;8940  font-style: italic;8941  font-size: 32px;8942  font-weight: 600;8943  color: var(--peach-t0);8944  line-height: 1.2;8945  padding: 8px 0 0;8946  outline: none;8947  min-height: 44px;8948  word-break: break-word;8949  position: relative;8950  z-index: 1;8951}89528953.peach-note-title-field:empty::before {8954  content: attr(data-placeholder);8955  color: var(--peach-t3);8956  pointer-events: none;8957}89588959/* Hairline separator */8960.peach-note-hairline {8961  height: 0.5px;8962  background: var(--peach-border);8963  margin: 12px 0 20px;8964  position: relative;8965  z-index: 1;8966}89678968/* Body field */8969.peach-note-body-field {8970  font-family: 'DM Sans', sans-serif;8971  font-size: 16px;8972  color: var(--peach-t0);8973  line-height: 1.85;8974  padding: 0;8975  outline: none;8976  min-height: 240px;8977  word-break: break-word;8978  position: relative;8979  z-index: 1;8980}89818982.peach-note-body-field:empty::before {8983  content: attr(data-placeholder);8984  color: var(--peach-t3);8985  font-style: italic;8986  pointer-events: none;8987}89888989.peach-note-body-field h2 {8990  font-family: 'Cormorant Garamond', serif;8991  font-style: italic;8992  font-size: 22px;8993  font-weight: 600;8994  color: var(--peach-t0);8995  margin: 20px 0 8px;8996}89978998.peach-note-body-field blockquote {8999  border-left: 2px solid var(--peach-accent);9000  margin: 12px 0;9001  padding-left: 16px;9002  color: var(--peach-t1);9003  font-style: italic;9004}90059006.peach-note-body-field ul,9007.peach-note-body-field ol {9008  padding-left: 20px;9009  margin: 8px 0;9010}90119012.peach-note-body-field li {9013  margin: 4px 0;9014}90159016.peach-note-body-field hr {9017  border: none;9018  border-top: 0.5px solid var(--peach-border);9019  margin: 16px 0;9020}90219022/* Saved indicator */9023.peach-note-saved-indicator {9024  font-family: 'IBM Plex Mono', monospace;9025  font-size: 11px;9026  color: var(--peach-t3);9027  letter-spacing: 0.04em;9028  text-align: right;9029  padding: 6px 24px;9030  flex-shrink: 0;9031  transition: opacity 300ms ease;9032  pointer-events: none;9033  position: relative;9034  z-index: 1;9035}90369037/* Mobile keyboard toolbar */9038.peach-note-toolbar-mobile {9039  display: flex;9040  align-items: center;9041  padding: 8px 16px;9042  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));9043  background: var(--peach-bg);9044  border-top: 0.5px solid var(--peach-border);9045  gap: 4px;9046  flex-shrink: 0;9047  position: relative;9048  z-index: 10;9049}90509051.peach-note-toolbar-btn {9052  min-width: 36px;9053  height: 36px;9054  display: flex;9055  align-items: center;9056  justify-content: center;9057  background: none;9058  border: none;9059  border-radius: 8px;9060  cursor: pointer;9061  font-size: 14px;9062  color: var(--peach-t1);9063  font-family: 'DM Sans', sans-serif;9064  font-weight: 600;9065  transition: background 100ms ease, color 100ms ease;9066  -webkit-tap-highlight-color: transparent;9067}90689069.peach-note-toolbar-btn--italic { font-style: italic; }9070.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }9071.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }90729073.peach-note-toolbar-divider {9074  width: 0.5px;9075  height: 20px;9076  background: var(--peach-border);9077  margin: 0 4px;9078  flex-shrink: 0;9079}90809081.peach-note-toolbar-spacer { flex: 1; }90829083/* Desktop: larger headline in TOC */9084@media (min-width: 400px) {9085  .peach-notes-header-title:not(.is-breadcrumb) {9086    font-size: 32px;9087  }90889089  .peach-note-row {9090    min-height: 64px;9091    padding: 14px 16px;9092  }9093}90949095/* Flying title — shared element during expansion/collapse */90969097/* ─── Light theme overrides ───────────────────────────────────────────────9098   Tokens that cannot be expressed as variable substitutions — hardcoded9099   context-specific values that need separate light-mode rules. */91009101/* Settings section headers: use text-label (#79766F) per restoration brief —9102   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY9103   presence without fighting the light parchment background. */9104.light .peach-settings-sub-label,9105[data-theme="light"] .peach-settings-sub-label,9106.light .peach-settings-nav-label,9107[data-theme="light"] .peach-settings-nav-label {9108  color: #79766F;9109}91109111/* Secondary action buttons (ghost / subtle): filled with input-well surface9112   so they read as recessed against the parchment card background. */9113.light .peach-btn--ghost:not(.peach-icon-btn),9114[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {9115  background: #EEE7DD;9116  border-color: #DDD5CB;9117  color: #1A1208;9118}9119.light .peach-icon-btn,9120[data-theme="light"] .peach-icon-btn {9121  background: transparent;9122  border-color: transparent;9123}9124.light .peach-btn--subtle,9125[data-theme="light"] .peach-btn--subtle {9126  background: #EEE7DD;9127  border-color: #DDD5CB;9128}91299130/* Wide secondary action button on the lock screen — override the9131   hardcoded dark-mode rgba values with warm parchment equivalents. */9132.light .peach-lock-secondary,9133[data-theme="light"] .peach-lock-secondary {9134  background: #EEE7DD;9135  border-color: #DDD5CB;9136  color: #1A1208;9137}9138.light .peach-lock-secondary:hover,9139[data-theme="light"] .peach-lock-secondary:hover {9140  background: #F0E9DF;9141}91429143/* Entry row hover: bg-row lifts the row above the card surface. */9144.light .peach-entry-row:hover,9145[data-theme="light"] .peach-entry-row:hover {9146  background: #F2EBE1;9147}9148.light .peach-entry-row.is-active,9149[data-theme="light"] .peach-entry-row.is-active {9150  background: #F2EBE1;9151}9152.light .peach-entry-row.is-selected,9153[data-theme="light"] .peach-entry-row.is-selected {9154  background: #F5EDE2;9155}91569157/* ──────────────────────────────────────────────────────────────────────────9158   Pair-device flow — bird-stage animation (Phase 1)9159   See src/popup/components/PairingBirds.tsx and the brief §6.2.9160   Three-act animation gated on the [data-phase] attribute of9161   .peach-pair-pair; child layers (birds, sound arcs, flight wave, dot)9162   each react via either pose class or visibility flag.9163   Tokens: accent surfaces use var(--peach-accent); bird illustration9164   colours are baked into the SVG per the brand-peach exception in §3.1.9165   ────────────────────────────────────────────────────────────────────── */91669167.peach-pair-pair {9168  position: absolute;9169  inset: 0;9170  z-index: 3;9171  display: flex;9172  flex-direction: column;9173  padding: 14px 12px 12px;9174  width: 100%;9175  box-sizing: border-box;9176  gap: 0;9177  background:9178    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9179    var(--peach-bg);9180  color: var(--peach-t0);9181  overflow-y: auto;9182  overflow-x: hidden;9183  scrollbar-width: none;9184  isolation: isolate;9185  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9186}9187@keyframes peach-pair-overlay-in {9188  from { opacity: 0; transform: translateY(8px); }9189  to   { opacity: 1; transform: translateY(0); }9190}9191.peach-pair-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }9192.peach-pair-pair::before {9193  content: '';9194  position: absolute;9195  inset: 0;9196  border-radius: inherit;9197  pointer-events: none;9198  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9199  z-index: 0;9200}9201.peach-pair-pair > * { position: relative; z-index: 1; }92029203/* Header --------------------------------------------------------------- */9204.peach-pair-head {9205  display: flex; align-items: center; gap: 10px;9206}9207.peach-pair-back {9208  width: 32px; height: 32px;9209  display: inline-flex; align-items: center; justify-content: center;9210  background: transparent;9211  border: none;9212  border-radius: 8px;9213  color: var(--peach-t1);9214  cursor: pointer;9215  transition: color 0.15s ease, box-shadow 0.15s ease;9216}9217.peach-pair-back:hover {9218  color: var(--peach-accent);9219  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9220}9221.peach-pair-title {9222  font-family: var(--font-display, Georgia, serif);9223  font-style: italic;9224  font-size: 24px;9225  font-weight: 500;9226  letter-spacing: 0.005em;9227  color: var(--peach-t0);9228  line-height: 1;9229}9230.peach-pair-head-spacer { flex: 1; }92319232/* Chip row ------------------------------------------------------------- */9233.peach-pair-chip-row {9234  display: flex;9235  align-items: center;9236  justify-content: flex-start;9237  margin-top: 12px;9238}9239.peach-pair-chip {9240  display: inline-flex; align-items: center; gap: 8px;9241  padding: 5px 10px 5px 8px;9242  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9243  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9244  border-radius: 999px;9245  font-family: var(--peach-mono, ui-monospace, monospace);9246  font-size: 11px;9247  letter-spacing: 0.04em;9248  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9249}9250.peach-pair-chip-dot {9251  width: 6px; height: 6px; border-radius: 50%;9252  background: var(--peach-accent);9253  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9254}9255.peach-pair-chip[data-phase="paired"] {9256  background: color-mix(in srgb, #4f9eda 12%, transparent);9257  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9258  color: #76b6e8;9259}9260.peach-pair-chip[data-phase="paired"] .peach-pair-chip-dot {9261  background: #76b6e8;9262  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9263}9264.peach-pair-chip[data-phase="timeout"],9265.peach-pair-chip[data-phase="mic_denied"],9266.peach-pair-chip[data-phase="version_mismatch"],9267.peach-pair-chip[data-phase="handshake_failed"] {9268  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9269  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9270  color: var(--peach-warn, #d29257);9271}9272.peach-pair-chip[data-phase="timeout"] .peach-pair-chip-dot,9273.peach-pair-chip[data-phase="mic_denied"] .peach-pair-chip-dot,9274.peach-pair-chip[data-phase="version_mismatch"] .peach-pair-chip-dot,9275.peach-pair-chip[data-phase="handshake_failed"] .peach-pair-chip-dot {9276  background: var(--peach-warn, #d29257);9277  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9278}92799280/* Bird stage ----------------------------------------------------------- */9281.peach-pair-stage {9282  position: relative;9283  /* Never let the flex column steal the stage's height to fit whatever is9284     below it — that is what clipped the birds to their legs before. Anything9285     that does not fit has to give somewhere else. */9286  flex: none;9287  margin: 14px 0 8px;9288  height: 180px;9289  border-radius: 12px;9290  background:9291    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9292    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),9293    color-mix(in srgb, var(--peach-bg) 92%, #000);9294  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);9295  overflow: hidden;9296  isolation: isolate;9297}9298.peach-pair-stage::after {9299  content: '';9300  position: absolute;9301  left: 12%; right: 12%;9302  bottom: 36px;9303  height: 1px;9304  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9305}93069307.peach-pair-bird-slot {9308  position: absolute;9309  bottom: 8px;9310  width: 100px;9311  height: 110px;9312  display: flex;9313  align-items: flex-end;9314  justify-content: center;9315}9316.peach-pair-bird-slot-desktop { left: 28px; }9317.peach-pair-bird-slot-mobile { right: 28px; }93189319/* The QR screen is the tallest in the flow: a 180px stage plus headline, sub,9320   QR and action overflows the popup, and the stage is what gets clipped — you9321   saw bird legs and nothing else. Shrink the stage and the birds with it here9322   only, so the birds stay whole and the QR stays comfortably above the fold.9323   Uses the individual `scale` property rather than `transform`, which the9324   mobile bird's hop animation already owns. */9325.peach-adoption-source[data-phase="invitation"] .peach-pair-stage {9326  height: 108px;9327  margin: 8px 0 6px;9328}9329.peach-adoption-source[data-phase="invitation"] .peach-pair-bird-slot {9330  scale: 0.62;9331  transform-origin: center bottom;9332}9333.peach-adoption-source[data-phase="invitation"] .peach-pair-stage::after {9334  bottom: 20px;9335}93369337/* Mobile bird hops in from the right when handshake begins */9338.peach-pair-bird-slot-mobile {9339  opacity: 1;9340  transform: translateX(-6px);9341  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9342}9343.peach-pair-stage.act-listening .peach-pair-bird-slot-mobile,9344.peach-pair-stage.act-chirping .peach-pair-bird-slot-mobile,9345.peach-pair-stage.act-idle .peach-pair-bird-slot-mobile {9346  opacity: 0;9347  transform: translateX(60px) rotate(8deg);9348}9349.peach-pair-stage.act-handshake .peach-pair-bird-slot-desktop,9350.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop {9351  transform: translateX(6px);9352  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9353}93549355/* Paired: both birds bob together */9356.peach-pair-stage.act-paired .peach-pair-bird-slot {9357  animation: peach-pair-happy-bob 1.2s ease-in-out infinite;9358}9359.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { animation-delay: 0.2s; }9360.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop { --bb-x: 6px; }9361.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { --bb-x: -6px; }9362@keyframes peach-pair-happy-bob {9363  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9364  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9365}93669367/* Bird internal -------------------------------------------------------- */9368.peach-pair-bird {9369  width: 108px;9370  height: 108px;9371  transform-origin: 50% 95%;9372}9373.peach-pair-bird svg { width: 100%; height: 100%; overflow: visible; }93749375.peach-pair-bird-body {9376  transform-origin: 50% 80%;9377  animation: peach-pair-bird-bob 2.4s ease-in-out infinite;9378}9379@keyframes peach-pair-bird-bob {9380  0%, 100% { transform: translateY(0) scale(1, 1); }9381  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9382}93839384.peach-pair-bird-eye-group {9385  animation: peach-pair-blink 5.2s steps(1, end) infinite;9386  transform-origin: center;9387  transform-box: fill-box;9388}9389@keyframes peach-pair-blink {9390  0%, 92%, 96%, 100% { transform: scaleY(1); }9391  94%                { transform: scaleY(0.05); }9392}93939394/* Pose: chirping — beak opens, head bobs, aura blooms */9395.peach-pair-bird-pose-chirping .peach-pair-bird-body {9396  animation:9397    peach-pair-bird-bob 2.4s ease-in-out infinite,9398    peach-pair-squeeze 1.7s ease-in-out infinite;9399}9400@keyframes peach-pair-squeeze {9401  0%, 70%, 100% { transform-origin: 50% 85%; }9402  78%           { transform: scale(1.04, 0.96) translateY(1px); }9403  86%           { transform: scale(0.98, 1.02); }9404}9405.peach-pair-bird-pose-chirping .peach-pair-bird-head-group {9406  animation: peach-pair-head-bob 1.7s ease-in-out infinite;9407}9408@keyframes peach-pair-head-bob {9409  0%, 70%, 100% { transform: translateY(0) rotate(0); }9410  78%           { transform: translateY(-3px) rotate(-4deg); }9411  86%           { transform: translateY(-1px) rotate(-2deg); }9412}9413.peach-pair-bird-pose-chirping .peach-pair-bird-beak {9414  animation: peach-pair-beak-open 1.7s ease-in-out infinite;9415}9416@keyframes peach-pair-beak-open {9417  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9418  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9419  86%           { transform: rotate(-6deg); }9420}9421.peach-pair-bird-pose-chirping .peach-pair-bird-aura {9422  animation: peach-pair-aura 1.7s ease-in-out infinite;9423}9424@keyframes peach-pair-aura {9425  0%, 100% { opacity: 0; }9426  50%      { opacity: 0.8; }9427}9428.peach-pair-bird-pose-chirping .peach-pair-bird-tail {9429  animation: peach-pair-tail-twitch 1.7s ease-in-out infinite;9430  transform-origin: 100% 50%;9431}9432@keyframes peach-pair-tail-twitch {9433  0%, 75%, 100% { transform: rotate(0); }9434  82%           { transform: rotate(-3deg) translateX(-1px); }9435}94369437/* Pose: attentive — head tilts toward partner */9438.peach-pair-bird-pose-attentive .peach-pair-bird-head-group {9439  animation: peach-pair-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9440}9441@keyframes peach-pair-head-tilt {9442  0%   { transform: rotate(0) translateY(0); }9443  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9444  100% { transform: rotate(-6deg); }9445}9446.peach-pair-bird-pose-attentive .peach-pair-bird-tail {9447  animation: peach-pair-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9448  transform-origin: 100% 50%;9449}9450@keyframes peach-pair-tail-cock {9451  0%   { transform: rotate(0); }9452  100% { transform: rotate(-4deg); }9453}94549455/* Pose: happy — wing flutter, tuft perk, tail wag */9456.peach-pair-bird-pose-happy .peach-pair-bird-wing {9457  transform-origin: 80% 60%;9458  animation: peach-pair-wing-flutter 0.32s ease-in-out 5;9459}9460@keyframes peach-pair-wing-flutter {9461  0%, 100% { transform: rotate(0) translateY(0); }9462  50%      { transform: rotate(-16deg) translateY(-2px); }9463}9464.peach-pair-bird-pose-happy .peach-pair-bird-tuft {9465  transform-origin: 0% 100%;9466  animation: peach-pair-tuft-perk 0.4s ease-in-out 3;9467}9468@keyframes peach-pair-tuft-perk {9469  0%, 100% { transform: rotate(0); }9470  50%      { transform: rotate(-15deg) translateY(-1px); }9471}9472.peach-pair-bird-pose-happy .peach-pair-bird-tail {9473  transform-origin: 100% 50%;9474  animation: peach-pair-tail-wag 0.5s ease-in-out 4;9475}9476@keyframes peach-pair-tail-wag {9477  0%, 100% { transform: rotate(0); }9478  25%      { transform: rotate(6deg); }9479  75%      { transform: rotate(-6deg); }9480}9481.peach-pair-bird-pose-happy .peach-pair-bird-head-group {9482  animation: peach-pair-head-perk 0.5s ease-out;9483}9484@keyframes peach-pair-head-perk {9485  0%   { transform: translateY(0); }9486  40%  { transform: translateY(-3px) rotate(2deg); }9487  100% { transform: translateY(0); }9488}94899490/* Pose: sad — body droops forward */9491.peach-pair-bird-pose-sad .peach-pair-bird-body {9492  transform: translateY(5px) rotate(-2deg);9493  animation: none;9494}9495.peach-pair-bird-pose-sad .peach-pair-bird-head-group {9496  transform: translateY(4px) rotate(8deg);9497}9498.peach-pair-bird-pose-sad .peach-pair-bird-tuft { transform: rotate(15deg) translateY(2px); }9499.peach-pair-bird-pose-sad .peach-pair-bird-tail { transform: rotate(8deg) translateY(2px); }95009501.peach-pair-bird-pose-hidden { opacity: 0; }95029503/* Sound arcs ----------------------------------------------------------- */9504.peach-pair-arcs {9505  position: absolute;9506  top: 18px;9507  width: 96px;9508  height: 70px;9509  pointer-events: none;9510}9511.peach-pair-arcs-right { right: -60px; }9512.peach-pair-arcs-left  { left: -60px; transform: scaleX(-1); }9513.peach-pair-arc {9514  position: absolute;9515  top: 50%;9516  left: 0;9517  width: 40px;9518  height: 40px;9519  margin-top: -20px;9520  border: 1.2px solid #f4d5a8;9521  border-color: transparent #f4d5a8 transparent transparent;9522  border-radius: 50%;9523  opacity: 0;9524  animation: peach-pair-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9525}9526@keyframes peach-pair-arc-expand {9527  0%   { transform: scale(0.4); opacity: 0; }9528  20%  { opacity: 0.9; }9529  100% { transform: scale(1.6); opacity: 0; }9530}95319532/* Flight wave ---------------------------------------------------------- */9533.peach-pair-flight-track {9534  position: absolute;9535  inset: 32px 36px 38px 36px;9536  pointer-events: none;9537}9538.peach-pair-flight-wave {9539  position: absolute;9540  top: 8px;9541  left: 76px;9542  right: 76px;9543  height: 60px;9544  width: auto;9545  opacity: 0;9546  transition: opacity 0.15s ease;9547  stroke: #f4d5a8;9548  fill: none;9549}9550.peach-pair-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9551.peach-pair-flight-wave.is-visible { opacity: 1; }9552.peach-pair-flight-path,9553.peach-pair-flight-path-2 {9554  stroke-dasharray: 240;9555  stroke-dashoffset: 240;9556  stroke-linecap: round;9557  fill: none;9558}9559.peach-pair-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9560.peach-pair-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9561.peach-pair-flight-wave.is-visible .peach-pair-flight-path {9562  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9563}9564.peach-pair-flight-wave.is-visible .peach-pair-flight-path-2 {9565  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9566}9567@keyframes peach-pair-fly {9568  0%   { stroke-dashoffset: 240; opacity: 0; }9569  20%  { opacity: 1; }9570  100% { stroke-dashoffset: -120; opacity: 0; }9571}95729573/* Connection dot ------------------------------------------------------- */9574.peach-pair-dot {9575  position: absolute;9576  top: 50%; left: 50%;9577  transform: translate(-50%, -50%);9578  width: 40px; height: 40px;9579  opacity: 0;9580  pointer-events: none;9581  transition: opacity 0.3s ease;9582  color: var(--peach-accent);9583}9584.peach-pair-dot.is-visible { opacity: 1; }9585.peach-pair-dot-glow {9586  position: absolute; top: 50%; left: 50%;9587  transform: translate(-50%, -50%);9588  width: 38px; height: 38px;9589  border-radius: 50%;9590  filter: blur(10px);9591  opacity: 0.55;9592  background: var(--peach-accent);9593  animation: peach-pair-dot-bloom 1.4s ease-out;9594}9595.peach-pair-dot-core {9596  position: absolute; top: 50%; left: 50%;9597  transform: translate(-50%, -50%);9598  width: 8px; height: 8px;9599  border-radius: 50%;9600  background: var(--peach-accent);9601  box-shadow: 0 0 12px currentColor;9602  animation: peach-pair-dot-core 1.4s ease-out;9603}9604.peach-pair-dot-ring {9605  position: absolute; top: 50%; left: 50%;9606  width: 60px; height: 60px;9607  transform: translate(-50%, -50%);9608  animation: peach-pair-dot-ring 1.4s linear;9609  stroke: var(--peach-accent);9610}9611@keyframes peach-pair-dot-bloom {9612  0%   { width: 4px; height: 4px; opacity: 0; }9613  35%  { width: 60px; height: 60px; opacity: 0.7; }9614  100% { width: 38px; height: 38px; opacity: 0.55; }9615}9616@keyframes peach-pair-dot-core {9617  0%   { width: 0; height: 0; }9618  35%  { width: 12px; height: 12px; }9619  100% { width: 8px; height: 8px; }9620}9621@keyframes peach-pair-dot-ring {9622  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9623  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9624  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9625}96269627/* Motes — drift upward across the stage */9628.peach-pair-motes {9629  position: absolute;9630  inset: 0;9631  pointer-events: none;9632}9633.peach-pair-mote {9634  position: absolute;9635  width: 2px; height: 2px;9636  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9637  border-radius: 50%;9638  bottom: 32px;9639  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9640  opacity: 0;9641  animation: peach-pair-mote-drift 6s linear infinite;9642  animation-delay: calc(var(--mote-i, 0) * 0.7s);9643}9644@keyframes peach-pair-mote-drift {9645  0%   { transform: translateY(0); opacity: 0; }9646  10%  { opacity: 0.6; }9647  90%  { opacity: 0.1; }9648  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9649}96509651/* Status copy ---------------------------------------------------------- */9652.peach-pair-copy-host {9653  margin: 4px 4px 10px;9654  text-align: center;9655  min-height: 50px;9656}9657.peach-pair-copy {9658  animation: peach-pair-copy-in 0.35s ease both;9659}9660@keyframes peach-pair-copy-in {9661  from { opacity: 0; transform: translateY(4px); }9662  to   { opacity: 1; transform: translateY(0); }9663}9664.peach-pair-headline {9665  font-family: var(--font-display, Georgia, serif);9666  font-style: italic;9667  font-size: 20px;9668  font-weight: 500;9669  line-height: 1.2;9670  letter-spacing: 0.005em;9671  color: var(--peach-t0);9672  margin-bottom: 6px;9673}9674.peach-pair-copy-listening .peach-pair-headline,9675.peach-pair-copy-chirping .peach-pair-headline,9676.peach-pair-copy-idle .peach-pair-headline {9677  font-family: inherit;9678  font-style: normal;9679  font-weight: 500;9680  font-size: 15px;9681  color: var(--peach-t0);9682  letter-spacing: 0;9683}9684.peach-pair-copy-paired .peach-pair-headline {9685  color: var(--peach-t0);9686  font-weight: 600;9687}9688.peach-pair-sub {9689  font-size: 12.5px;9690  line-height: 1.45;9691  color: var(--peach-t1);9692  max-width: 280px;9693  margin: 0 auto;9694  text-wrap: pretty;9695}96969697/* Status action -------------------------------------------------------- */9698.peach-pair-action {9699  margin: 2px 4px 10px;9700  margin-top: auto;9701  display: flex;9702  flex-direction: column;9703  gap: 8px;9704}9705.peach-pair-action-waiting {9706  display: flex;9707  align-items: center;9708  justify-content: space-between;9709  gap: 12px;9710}9711.peach-pair-cancel {9712  min-width: 96px;9713}9714.peach-pair-listening {9715  display: inline-flex; align-items: center; gap: 4px;9716  font-family: var(--peach-mono, ui-monospace, monospace);9717  font-size: 9.5px;9718  text-transform: uppercase;9719  letter-spacing: 0.12em;9720  color: var(--peach-t1);9721  padding: 8px 10px;9722}9723.peach-pair-listen-dot {9724  width: 4px; height: 4px;9725  border-radius: 50%;9726  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9727  animation: peach-pair-listen-pulse 1.2s ease-in-out infinite;9728}9729.peach-pair-listen-dot:nth-child(2) { animation-delay: 0.2s; }9730.peach-pair-listen-dot:nth-child(3) { animation-delay: 0.4s; }9731.peach-pair-listen-label { margin-left: 6px; }9732@keyframes peach-pair-listen-pulse {9733  0%, 100% { opacity: 0.25; transform: scale(0.9); }9734  50%      { opacity: 1;     transform: scale(1.15); }9735}97369737.peach-pair-action-handshake {9738  display: flex;9739  flex-direction: column;9740  align-items: center;9741  gap: 8px;9742  padding: 8px 4px;9743}9744.peach-pair-meter {9745  width: 100%;9746  max-width: 280px;9747  height: 2px;9748  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9749  border-radius: 2px;9750  position: relative;9751  overflow: hidden;9752}9753.peach-pair-meter-bar {9754  position: absolute;9755  top: 0; bottom: 0;9756  width: 30%;9757  left: -30%;9758  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9759  animation: peach-pair-meter-sweep 1.4s ease-in-out infinite;9760}9761@keyframes peach-pair-meter-sweep {9762  0%   { left: -30%; }9763  100% { left: 100%; }9764}9765.peach-pair-meter-label {9766  font-family: var(--peach-mono, ui-monospace, monospace);9767  font-size: 9.5px;9768  text-transform: uppercase;9769  letter-spacing: 0.14em;9770  color: var(--peach-t1);9771}97729773.peach-pair-action-paired {9774  display: flex;9775  align-items: center;9776  gap: 10px;9777}9778.peach-pair-device-confirm {9779  flex: 1;9780  display: inline-flex;9781  align-items: center;9782  gap: 8px;9783  padding: 9px 10px 9px 12px;9784  border-radius: 10px;9785  background: color-mix(in srgb, #76b6e8 12%, transparent);9786  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9787  font-size: 12.5px;9788  color: var(--peach-t0);9789  min-width: 0;9790}9791.peach-pair-device-confirm-glyph {9792  display: inline-flex;9793  color: #76b6e8;9794}9795.peach-pair-device-confirm-name {9796  flex: 1;9797  overflow: hidden;9798  text-overflow: ellipsis;9799  white-space: nowrap;9800}9801.peach-pair-device-confirm-trust {9802  font-family: var(--peach-mono, ui-monospace, monospace);9803  font-size: 9.5px;9804  text-transform: uppercase;9805  letter-spacing: 0.1em;9806  color: #76b6e8;9807  padding: 2px 6px;9808  border-radius: 4px;9809  background: color-mix(in srgb, #76b6e8 14%, transparent);9810}9811.peach-pair-done {9812  min-width: 80px;9813}9814.peach-pair-retry {9815  align-self: center;9816  display: block;9817  margin: 6px auto 0;9818  min-width: 120px;9819}9820.peach-pair-mic-help {9821  font-size: 12px;9822  color: var(--peach-t1);9823  text-align: center;9824  max-width: 320px;9825  margin: 0 auto;9826}98279828/* Rest state — bird stage at idle pose, primary CTA + paired list */9829.peach-pair-pair[data-phase="idle"] .peach-pair-stage {9830  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9831  height: 160px;9832}9833.peach-pair-pair-start {9834  width: 100%;9835  display: inline-flex;9836  align-items: center;9837  justify-content: center;9838  gap: 8px;9839  padding: 11px 14px;9840  border-radius: 10px;9841  background: var(--peach-accent);9842  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9843  color: #1a0905;9844  font-family: inherit;9845  font-size: 13px;9846  font-weight: 600;9847  letter-spacing: 0.01em;9848  cursor: pointer;9849  transition: filter 0.15s ease, transform 0.1s ease;9850}9851.peach-pair-pair-start:hover { filter: brightness(1.08); }9852.peach-pair-pair-start:active { transform: translateY(1px); }98539854.peach-pair-paired-section {9855  margin-top: 14px;9856  display: flex;9857  flex-direction: column;9858  gap: 8px;9859}9860.peach-pair-paired-heading {9861  margin: 0;9862  font-family: var(--peach-mono, ui-monospace, monospace);9863  font-size: 10px;9864  font-weight: 500;9865  letter-spacing: 0.14em;9866  text-transform: uppercase;9867  color: var(--peach-t1);9868}98699870/* Footer --------------------------------------------------------------- */9871.peach-pair-foot {9872  margin: 10px -4px -2px;9873  margin-top: auto;9874}9875.peach-pair-foot-divider {9876  height: 1px;9877  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9878  margin-bottom: 10px;9879}9880.peach-pair-foot-text {9881  font-size: 11px;9882  line-height: 1.5;9883  color: var(--peach-t1);9884  text-align: center;9885  padding: 0 4px;9886  text-wrap: pretty;9887}98889889/* Screen-reader-only live region. Kept off the visual flow but read by9890   assistive tech as the pairing phase advances. */9891.peach-sr-only {9892  position: absolute;9893  width: 1px; height: 1px;9894  padding: 0; margin: -1px;9895  overflow: hidden;9896  clip: rect(0, 0, 0, 0);9897  white-space: nowrap;9898  border: 0;9899}99009901/* Reduced motion — stage simplifies to opacity transitions only */9902@media (prefers-reduced-motion: reduce) {9903  .peach-pair-bird-body,9904  .peach-pair-bird-head-group,9905  .peach-pair-bird-beak,9906  .peach-pair-bird-wing,9907  .peach-pair-bird-tuft,9908  .peach-pair-bird-tail,9909  .peach-pair-bird-eye-group,9910  .peach-pair-bird-aura,9911  .peach-pair-arc,9912  .peach-pair-flight-path,9913  .peach-pair-flight-path-2,9914  .peach-pair-dot-glow,9915  .peach-pair-dot-core,9916  .peach-pair-dot-ring,9917  .peach-pair-mote,9918  .peach-pair-meter-bar,9919  .peach-pair-listen-dot,9920  .peach-pair-bird-slot,9921  .peach-pair-bird-slot-mobile {9922    animation: none !important;9923    transition: opacity 0.2s linear !important;9924  }9925}99269927/* ─────────────────────────────────────────────────────────────────9928   Settings → Sync surface. Wraps the same bird9929   animation used by the pairing flow with a paired-devices list and9930   the "Pair a device" CTA.9931   ───────────────────────────────────────────────────────────────── */9932.peach-pair-settings {9933  position: absolute;9934  inset: 0;9935  z-index: 3;9936  display: flex;9937  flex-direction: column;9938  gap: 18px;9939  padding: 14px 12px 12px;9940  width: 100%;9941  box-sizing: border-box;9942  overflow-y: auto;9943  overflow-x: hidden;9944  /* Same warm surface as the pairing screen — unifies the two views. */9945  background:9946    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9947    var(--peach-bg);9948  color: var(--peach-t0);9949  isolation: isolate;9950  /* Hide native scrollbar — content fits 99% of the time and a chunky9951     gutter ruins the surface. */9952  scrollbar-width: none;9953  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9954}9955.peach-pair-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9956.peach-pair-settings::before {9957  content: '';9958  position: absolute;9959  inset: 0;9960  pointer-events: none;9961  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9962  z-index: 0;9963}9964.peach-pair-settings > * { position: relative; z-index: 1; }99659966.peach-pair-settings--pairing {9967  padding: 0;9968  align-items: stretch;9969  justify-content: stretch;9970  background: none;9971  isolation: auto;9972}9973.peach-pair-settings--pairing::before { display: none; }99749975.peach-pair-settings-header {9976  display: flex;9977  align-items: center;9978  gap: 10px;9979}9980.peach-pair-settings-title {9981  margin: 0;9982  font-family: var(--font-display, Georgia, serif);9983  font-style: italic;9984  font-size: 24px;9985  font-weight: 500;9986  line-height: 1;9987  color: var(--peach-t0);9988  letter-spacing: 0.005em;9989}9990.peach-pair-settings-section {9991  margin: 6px 0 -4px;9992  font-size: 11px;9993  font-weight: 600;9994  letter-spacing: 0.08em;9995  text-transform: uppercase;9996  color: var(--peach-text-muted);9997}9998.peach-pair-settings-error {9999  font-size: 12px;10000  padding: 8px 10px;10001  border-radius: 8px;10002  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);10003  color: var(--peach-text);10004}10005.peach-pair-settings-footer {10006  margin-top: auto;10007  padding-top: 18px;10008  font-size: 11.5px;10009  line-height: 1.5;10010  color: var(--peach-text-muted);10011  text-align: center;10012}1001310014/* Hero card shown when no devices are paired yet. */10015.peach-pair-hero {10016  display: flex;10017  flex-direction: column;10018  align-items: center;10019  gap: 12px;10020  padding: 20px 12px 8px;10021  text-align: center;10022}10023.peach-pair-hero-svg {10024  display: block;10025  max-width: 100%;10026  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));10027}10028.peach-pair-hero-headline {10029  margin: 0;10030  font-family: var(--font-display, Georgia, serif);10031  font-style: italic;10032  font-size: 20px;10033  font-weight: 500;10034  line-height: 1.2;10035  letter-spacing: 0.005em;10036  color: var(--peach-t0);10037}10038.peach-pair-hero-sub {10039  margin: 0;10040  font-size: 13px;10041  line-height: 1.5;10042  color: var(--peach-t1);10043  max-width: 320px;10044  text-wrap: pretty;10045}1004610047.peach-pair-pair-cta {10048  display: flex;10049  justify-content: center;10050  padding: 4px 0 6px;10051}10052.peach-pair-pair-button {10053  display: inline-flex;10054  align-items: center;10055  gap: 8px;10056  min-width: 220px;10057  justify-content: center;10058}10059.peach-pair-pair-button-icon {10060  flex: 0 0 auto;10061}1006210063/* Paired devices list. Roomy rows that look at home next to the rest10064   of Settings; stale rows get a soft warm-warning border tint. */10065.peach-pair-device-list {10066  list-style: none;10067  margin: 0;10068  padding: 0;10069  display: flex;10070  flex-direction: column;10071  gap: 8px;10072}10073.peach-pair-device-row {10074  display: flex;10075  align-items: center;10076  gap: 12px;10077  padding: 12px;10078  border-radius: 10px;10079  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10080  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);10081}10082.peach-pair-device-row[data-stale="true"] {10083  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);10084}10085.peach-pair-device-icon {10086  width: 32px;10087  height: 32px;10088  display: flex;10089  align-items: center;10090  justify-content: center;10091  border-radius: 8px;10092  color: var(--peach-text);10093  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);10094}10095.peach-pair-device-info {10096  flex: 1;10097  display: flex;10098  flex-direction: column;10099  gap: 2px;10100  min-width: 0;10101}10102.peach-pair-device-name {10103  font-size: 14px;10104  font-weight: 600;10105  color: var(--peach-text);10106  overflow: hidden;10107  text-overflow: ellipsis;10108  white-space: nowrap;10109}10110.peach-pair-device-meta {10111  font-size: 11.5px;10112  color: var(--peach-text-muted);10113  display: flex;10114  flex-wrap: wrap;10115  align-items: center;10116  gap: 8px;10117}10118.peach-pair-device-badge {10119  font-size: 10.5px;10120  font-weight: 500;10121  letter-spacing: 0.02em;10122  padding: 2px 6px;10123  border-radius: 999px;10124  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);10125  color: var(--peach-text);10126}10127.peach-pair-device-stale {10128  font-size: 10.5px;10129  font-weight: 500;10130  color: var(--peach-warn, #d29257);10131}10132.peach-pair-device-remove {10133  flex: 0 0 auto;10134  color: var(--peach-text-muted);10135}10136.peach-pair-device-remove:hover {10137  color: var(--peach-danger, #c25b4a);10138}10139.peach-pair-unpair-confirm {10140  display: flex;10141  gap: 6px;10142  align-items: center;10143}1014410145/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */10146.peach-pair-pro-card {10147  position: relative;10148  margin: 18px 12px;10149  padding: 18px 20px 22px;10150  border-radius: 22px;10151  background:10152    radial-gradient(140% 90% at 50% 0%,10153      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,10154      transparent 60%),10155    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10156  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);10157  box-shadow:10158    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,10159    0 18px 40px -24px rgba(0, 0, 0, 0.45);10160  display: flex;10161  flex-direction: column;10162  align-items: center;10163  gap: 10px;10164  text-align: center;10165  overflow: hidden;10166}10167.peach-pair-pro-stage {10168  position: relative;10169  width: 220px;10170  height: 140px;10171  display: flex;10172  align-items: flex-end;10173  justify-content: center;10174  margin-bottom: 2px;10175}10176.peach-pair-pro-bird-slot {10177  width: 140px;10178  height: 132px;10179  display: flex;10180  align-items: flex-end;10181  justify-content: center;10182  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));10183}10184.peach-pair-pro-bird-slot .peach-pair-bird {10185  width: 100%;10186  height: 100%;10187}10188.peach-pair-pro-bird-slot .peach-pair-bird svg {10189  width: 100%;10190  height: 100%;10191  overflow: visible;10192}10193.peach-pair-pro-headline {10194  margin: 4px 0 0;10195  font-family: var(--font-display, "Cormorant Garamond", serif);10196  font-style: italic;10197  font-size: 19px;10198  font-weight: 500;10199  letter-spacing: 0.01em;10200  color: var(--peach-t0);10201  max-width: 280px;10202  line-height: 1.25;10203}10204.peach-pair-pro-body {10205  margin: 0;10206  font-size: 13px;10207  line-height: 1.55;10208  color: var(--peach-t1);10209  max-width: 300px;10210}10211.peach-pair-pro-cta {10212  margin-top: 4px;10213}10214.peach-pair-pro-foot {10215  margin: 2px 0 0;10216  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10217  font-size: 0.625rem;10218  letter-spacing: 0.08em;10219  text-transform: uppercase;10220  color: var(--peach-t2);10221  opacity: 0.75;10222}1022310224/* Shell border and shadow in light mode: match dark mode's near-invisible10225   border weight so the popup frame looks the same in both themes. */10226.light .peach-shell,10227.light .peach-screen {10228  border-color: rgba(26, 18, 8, 0.07);10229  box-shadow:10230    0 2px 8px rgba(80, 56, 32, 0.08),10231    0 14px 48px rgba(80, 56, 32, 0.10),10232    0 0 0 1px rgba(26, 18, 8, 0.04);10233}1023410235/* HOLE 4: the revoke confirmation carries its own disclosure, so it needs the10236   full row width rather than sitting inline beside the device name. */10237.peach-settings-row:has(> .peach-unpair-confirm) { flex-wrap: wrap; }10238.peach-unpair-confirm {10239  display: flex;10240  flex-direction: column;10241  gap: 8px;10242  width: 100%;10243}10244.peach-unpair-confirm-note {10245  margin: 0;10246  font-size: 0.6875rem;10247  line-height: 1.5;10248  color: var(--peach-t2);10249}1025010251/* Sync mode selector — three named choices (public / private / off). Replaces10252   the old binary "local network only" toggle; see docs/sync-lan-retirement.md. */10253.peach-sync-mode {10254  display: flex;10255  align-items: flex-start;10256  gap: 10px;10257  width: 100%;10258  text-align: left;10259  padding: 10px 12px;10260  margin-top: 8px;10261  border-radius: 10px;10262  border: 1px solid var(--peach-border);10263  background: color-mix(in srgb, var(--peach-t0) 3%, transparent);10264  color: var(--peach-t1);10265  cursor: pointer;10266  transition: border-color var(--peach-dur-80) var(--peach-curve-arrival),10267              background-color var(--peach-dur-80) var(--peach-curve-arrival);10268}10269.peach-sync-mode:hover:not(:disabled) {10270  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);10271}10272.peach-sync-mode.is-active {10273  border-color: var(--peach-accent);10274  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);10275}10276.peach-sync-mode:disabled { opacity: 0.6; cursor: default; }10277.peach-sync-mode-main { display: flex; flex-direction: column; gap: 3px; flex: 1; }10278.peach-sync-mode-title { font-size: 12px; }10279.peach-sync-mode-sub {10280  font-size: 11px;10281  line-height: 1.5;10282  color: var(--peach-t2);10283}10284.peach-sync-mode-pip {10285  flex: none;10286  margin-top: 3px;10287  width: 12px; height: 12px;10288  border-radius: 50%;10289  border: 1px solid var(--peach-t3);10290}10291.peach-sync-mode.is-active .peach-sync-mode-pip {10292  border-color: var(--peach-accent);10293  background:10294    radial-gradient(circle at 50% 50%, var(--peach-accent) 0 42%, transparent 44%);10295}10296.peach-sync-mode-disclosure {10297  margin: 10px 2px 0;10298  font-size: 11px;10299  line-height: 1.5;10300  color: var(--peach-t2);10301}10302.peach-sync-mode-warn { color: var(--peach-breach); }1030310304/* Compact form, used mid-pairing: a quiet line, not a decision to make. */10305.peach-sync-mode-summary {10306  margin: 8px 2px 0;10307  font-size: 11px;10308  color: var(--peach-t2);10309  text-align: center;10310}10311.peach-sync-mode-change {10312  background: none;10313  border: none;10314  padding: 0;10315  font: inherit;10316  color: var(--peach-accent);10317  text-decoration: underline;10318  cursor: pointer;10319}