popup.css

1html,2body,3#app,4.popup-root {5  width: 320px;6  min-height: 520px;7  height: 520px;8  margin: 0;9}1011body {12  overflow: hidden;13  background: var(--bg);14  color: var(--t0);15  font-family: var(--font-ui);16  font-weight: 300;17  position: relative;18}1920* {21  box-sizing: border-box;22}2324button,25input,26textarea,27select {28  font: inherit;29}3031button {32  border: 0;33}3435.popup-root {36  position: relative;37  overflow: hidden;38}3940.peach-theme {41  color: var(--peach-t0);42  font-family: var(--font-ui);43  font-weight: 300;44  box-sizing: border-box;45  text-align: left;46}47.peach-theme, .peach-theme * { box-sizing: inherit; }4849.peach-brand-mark {50  width: 14px;51  height: 14px;52  flex-shrink: 0;53}5455.peach-status-pip.is-hidden {56  display: none;57}5859.peach-status-pip.unlocked {60  background: var(--peach-health-ok);61  box-shadow: 0 0 6px rgba(100, 210, 100, 0.6);62}6364.peach-status-pip.pulse {65  animation: pip-pulse 400ms var(--peach-curve-settle) both;66}6768/* Shell */69.peach-shell, .peach-screen {70  background:71    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),72    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),73    var(--peach-bg);74  border: 1px solid var(--peach-t3);75  box-shadow:76    0 2px 8px rgba(0,0,0,0.55),77    0 14px 48px rgba(0,0,0,0.7),78    0 0 0 1px rgba(240,232,216,0.04);79  overflow: hidden;80}81.peach-shell {82  display: grid;83  grid-template-rows: auto 1fr;84  min-height: 520px;85  position: relative;86  isolation: isolate;87}8889.peach-shell[data-surface="extension"] {90  width: min(320px, 100vw);91  border-radius: 0;92  height: 520px;93  max-height: 520px;94  overflow: hidden;95}9697/* ── Lock screen – full-window lock/create stage ── */98.lock-screen--vault-stage {99  display: flex;100  flex-direction: column;101  gap: 18px;102  padding: 20px 18px 18px;103  justify-content: flex-start;104}105.lock-screen--vault-stage .peach-lock-panel {106  margin-top: auto;107}108.peach-lock-headline--unlock {109  max-width: 220px;110}111.peach-lock-hero--unlock {112  padding-top: 14px;113}114.peach-lock-panel--unlock {115  gap: 10px;116}117118.peach-lock-restore-link {119  background: transparent;120  border: none;121  cursor: pointer;122  font-family: var(--font-mono);123  font-size: 0.625rem;124  letter-spacing: 0.08em;125  color: var(--t1);126  padding: 5px 0;127  text-align: left;128  transition: color 150ms ease;129}130131.peach-lock-restore-link:hover {132  color: var(--t0);133}134.peach-shell[data-surface="extension"] .peach-stage {135  min-height: 250px;136}137138/* Screen (unlock) */139.peach-screen {140  width: min(320px, 100vw);141  min-height: 100%;142  height: 100%;143  border-radius: 0;144  padding: 16px 20px 18px;145  display: grid;146  gap: 14px;147}148.peach-screen[data-motion-phase="enter"] {149  animation: peach-screen-enter var(--peach-dur-600) var(--peach-curve-arrival) both;150}151.peach-screen-header { min-height: 20px; }152153/* Wordmark */154.peach-wordmark {155  margin: 0;156  font-family: var(--font-display);157  font-size: 0.9375rem;158  font-style: italic;159  letter-spacing: 0.03em;160  color: var(--peach-t0);161  display: inline-flex;162  min-height: 1em;163}164165/* Motion text / char animation */166.peach-motion-text { display: inline-flex; min-height: 1em; }167.peach-motion-char {168  display: inline-block;169  white-space: pre;170  opacity: 0;171  transform: translateY(0.22em);172  animation: peach-char-enter var(--peach-motion-duration, 380ms) var(--peach-curve-arrival) forwards;173  animation-delay: calc(var(--peach-char-index, 0) * 20ms);174}175176/* Chrome */177.peach-chrome {178  position: relative;179  z-index: 10;180  padding: 16px 20px 0;181  display: flex;182  justify-content: space-between;183  align-items: center;184  /* z-index:10 keeps the header icons above `.peach-loading` (Suspense185     fallback) per §15 regression guard. Without pointer-events:none, the186     empty header strip also sits above `.peach-overlay-view` (z-index:2)187     and swallows clicks meant for an overlay's back button / top search. */188  pointer-events: none;189}190.peach-chrome .peach-btn { pointer-events: auto; }191.peach-chrome.is-hidden-for-overlay,192.peach-search-wrap.is-hidden-for-overlay {193  opacity: 0;194  visibility: hidden;195  pointer-events: none;196}197/* The pair-device surface owns its own header and header — fully collapse the global198   chrome row so the warm gradient reaches the popup edge. */199.peach-chrome.is-collapsed,200.peach-search-wrap.is-collapsed {201  display: none;202}203.peach-wordmark-wrap { display: flex; align-items: center; gap: 5px; }204.peach-status-pip {205  width: 5px;206  height: 5px;207  border-radius: 50%;208  background: var(--peach-t3);209  display: inline-flex;210  flex-shrink: 0;211  transition: background 400ms ease, box-shadow 400ms ease;212}213.peach-chrome-actions { display: flex; gap: 6px; }214215/* Shell body */216.peach-shell-body {217  position: relative;218  display: grid;219  grid-template-rows: 1fr auto;220  min-height: 0;221  min-width: 0;222  width: 100%;223  overflow: hidden;224  height: 100%;225}226.peach-shell-veil {227  position: absolute; inset: 0;228  background: #000; opacity: 0;229  pointer-events: none; z-index: 1;230}231.peach-shell[data-motion-phase="enter"] .peach-shell-body {232  animation: peach-shell-fade-in var(--peach-dur-600) var(--peach-curve-arrival) both;233}234.peach-shell[data-motion-phase="exit"] .peach-shell-veil {235  animation: peach-veil-in 300ms var(--peach-curve-departure) forwards;236}237238/* Content frame */239.peach-content-frame {240  display: grid;241  grid-template-rows: 1fr auto;242  grid-template-columns: minmax(0, 1fr);243  align-content: start;244  min-height: 0;245  min-width: 0;246  overflow: hidden;247  transition: opacity 80ms ease, transform 80ms ease;248}249.peach-content-frame.navigating {250  opacity: 0.93;251  transform: translateX(2px);252}253.peach-content-frame[data-content-phase="enter"] {254  animation: peach-content-enter 135ms ease-out both;255}256.peach-content-frame[data-content-phase="exit"] {257  animation: peach-content-exit 95ms ease-in forwards;258}259.peach-content-frame[data-content-phase="idle"] { opacity: 1; transform: none; }260261/* Stage */262.peach-stage {263  padding: 10px 20px 12px;264  display: grid;265  gap: 12px;266  align-content: start;267  min-width: 0;268  min-height: 0;269  max-width: 100%;270  overflow-y: auto;271  overflow-x: hidden;272  scrollbar-width: none;273  -ms-overflow-style: none;274  overscroll-behavior: contain;275}276.peach-stage::-webkit-scrollbar { display: none; }277278/* Entry name */279.peach-entry-name-wrap { position: relative; overflow: hidden; max-width: 100%; }280.peach-entry-header {281  position: relative;282  z-index: 1;283  display: flex;284  align-items: flex-start;285  gap: 6px;286  min-width: 0;287}288.peach-entry-header-name {289  flex: 1;290  min-width: 0;291}292.peach-entry-name {293  margin: 0;294  padding-bottom: 0.12em;295  font-family: var(--font-display);296  font-style: italic; font-weight: 400;297  font-size: 44px; line-height: 0.95;298  color: var(--peach-t0);299  display: -webkit-box;300  -webkit-line-clamp: 2;301  -webkit-box-orient: vertical;302  overflow: hidden;303  text-wrap: balance;304}305.peach-entry-name--lg { font-size: 40px; }306.peach-entry-name--xl { font-size: 34px; line-height: 0.98; }307.peach-entry-name--xxl { font-size: 30px; line-height: 1.02; }308.peach-entry-name-text { display: block; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; padding-bottom: 0.12em; }309310/* Trash icon in entry header */311.peach-entry-trash-btn {312  flex-shrink: 0;313  padding: 4px;314  margin-top: 4px;315  background: transparent;316  border: none;317  cursor: pointer;318  color: var(--peach-t2);319  border-radius: 4px;320  transition: color 140ms ease, background 140ms ease;321  display: flex;322  align-items: center;323  justify-content: center;324}325.peach-entry-trash-btn:hover {326  color: var(--peach-t1);327  background: var(--peach-t3);328}329.peach-entry-trash-confirm {330  display: flex;331  align-items: center;332  gap: 6px;333  flex-shrink: 0;334  margin-top: 6px;335  flex-wrap: nowrap;336}337.peach-entry-trash-confirm-label {338  font-family: var(--font-mono);339  font-size: 0.5625rem;340  letter-spacing: 0.1em;341  color: var(--peach-t2);342  white-space: nowrap;343}344.peach-entry-name-button {345  padding: 0;346  background: transparent;347  text-align: left;348  cursor: pointer;349  max-width: 100%;350  overflow: hidden;351  display: block;352}353.peach-entry-name-char {354  display: inline-block;355  white-space: pre;356  opacity: 0;357  transform: translateY(0.22em);358  animation: peach-char-enter 380ms var(--peach-curve-arrival) forwards;359  animation-delay: calc(var(--char-index, 0) * 20ms);360}361362/* Domain */363.peach-domain { border-top: 1px solid var(--peach-t3); padding-top: 9px; }364.peach-domain-row {365  width: 100%; border: 0; background: transparent; color: inherit;366  padding: 0; display: flex; justify-content: space-between; align-items: baseline;367  cursor: default;368}369.peach-domain-value {370  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;371  font-size: 0.625rem; font-style: italic;372  letter-spacing: 0.12em; color: var(--peach-t1);373}374375/* Fields */376.peach-fields { display: grid; gap: 10px; }377.peach-field-card { display: grid; gap: 7px; }378.peach-label {379  font-family: Inter, system-ui, sans-serif;380  text-transform: uppercase; letter-spacing: 0.2em;381  font-size: 0.5rem; color: var(--peach-t2);382}383.peach-add-field-btn {384  align-self: flex-start;385  background: none; border: none; padding: 2px 0;386  font-family: Inter, system-ui, sans-serif;387  font-size: 0.6875rem; color: var(--peach-accent);388  cursor: pointer; opacity: 0.75;389  letter-spacing: 0.02em;390}391.peach-add-field-btn:hover { opacity: 1; }392.peach-field-value-row {393  display: flex; justify-content: space-between;394  align-items: center; gap: 8px;395  min-width: 0;396}397.peach-field-value {398  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;399  font-size: 0.8125rem; color: var(--peach-t1);400  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;401  flex: 1;402  min-width: 0;403}404.peach-password-value {405  display: inline-flex;406  align-items: center;407  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;408  font-size: 1rem; letter-spacing: 0.3em; color: var(--peach-t0);409  overflow: hidden;410  text-overflow: ellipsis;411  white-space: nowrap;412  flex: 1;413  min-width: 0;414  max-width: 100%;415}416.peach-password-value.is-revealed {417  font-size: 0.875rem;418  letter-spacing: 0.08em;419}420.peach-password-text,421.peach-password-mask {422  display: block;423  width: 100%;424  overflow: hidden;425  white-space: nowrap;426  /* Render as uniform mid-line bullets, not baseline periods */427  font-family: Inter, system-ui, sans-serif;428  font-size: 0.625rem;429  letter-spacing: 3px;430  user-select: none;431}432.peach-field-actions { display: flex; gap: 4px; align-items: center; }433.peach-password-strength { display: flex; align-items: center; gap: 8px; }434.peach-strength-bar { display: flex; gap: 3px; }435.peach-strength-seg { width: 28px; height: 4px; border-radius: 2px; background: #eee; }436.peach-strength-label {437  font-family: "IBM Plex Mono", monospace;438  font-style: italic;439  font-size: 0.5625rem;440  font-weight: 300;441  min-width: 36px;442  text-align: right;443  color: var(--peach-t2);444  letter-spacing: 0.06em;445}446447.peach-strength-hairline {448  display: flex;449  align-items: center;450  gap: 10px;451  margin-top: -2px;452}453454.peach-strength-hairline-track {455  flex: 1;456  height: 3px;457  border-radius: 2px;458  background: var(--peach-s2);459  overflow: hidden;460}461462.peach-strength-hairline-fill {463  height: 100%;464  border-radius: 2px;465  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),466    background 400ms ease;467}468469/* Note content (display) */470.peach-note-content {471  border-top: 1px solid var(--peach-t3);472  padding-top: 10px;473  font-family: var(--font-display);474  font-size: 0.9375rem;475  line-height: 1.75;476  color: var(--peach-t1);477}478479/* ── Inline editing ─────────────────────────────────────────────────── */480481/* Clickable display values */482.peach-inline-clickable {483  cursor: text;484  border-radius: 3px;485  transition: background 150ms ease;486}487.peach-inline-clickable:hover {488  background: rgba(240, 232, 216, 0.05);489}490491/* Subtle "edit" hint that appears on hover */492.peach-inline-edit-hint {493  font-family: Inter, system-ui, sans-serif;494  font-size: 0.5625rem;495  text-transform: uppercase;496  letter-spacing: 0.14em;497  color: var(--peach-t2);498  opacity: 0;499  transition: opacity 120ms ease;500  pointer-events: none;501  margin-left: 6px;502  flex-shrink: 0;503}504.peach-domain-row:hover .peach-inline-edit-hint {505  opacity: 1;506}507508/* Title editing */509.peach-inline-title-wrap {510  display: flex;511  flex-direction: column;512  gap: 6px;513}514.peach-inline-title-input {515  font-family: var(--font-display);516  font-style: italic;517  font-weight: 400;518  font-size: 40px;519  line-height: 0.95;520  color: var(--peach-t0);521  background: transparent;522  border: none;523  border-bottom: 1px solid var(--peach-accent);524  outline: none;525  width: 100%;526  padding: 2px 0;527}528529/* Generic inline field */530.peach-inline-field-wrap {531  display: flex;532  flex-direction: column;533  gap: 6px;534}535.peach-inline-input {536  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;537  font-size: 0.8125rem;538  color: var(--peach-t0);539  background: transparent;540  border: none;541  border-bottom: 1px solid var(--peach-accent);542  outline: none;543  width: 100%;544  padding: 3px 0;545}546.peach-inline-textarea {547  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;548  font-size: 0.6875rem;549  line-height: 1.7;550  color: var(--peach-t0);551  background: rgba(240, 232, 216, 0.04);552  border: 1px solid var(--peach-accent);553  border-radius: 4px;554  outline: none;555  width: 100%;556  padding: 8px;557  resize: vertical;558  min-height: 80px;559}560561/* Save / cancel row */562.peach-inline-actions {563  display: flex;564  gap: 6px;565  align-items: center;566}567.peach-inline-save-btn,568.peach-inline-cancel-btn {569  display: inline-flex;570  align-items: center;571  justify-content: center;572  width: 26px;573  height: 26px;574  border-radius: 4px;575  border: none;576  cursor: pointer;577  transition: background 140ms ease, opacity 140ms ease;578  flex-shrink: 0;579}580.peach-inline-save-btn {581  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);582  color: var(--peach-accent);583}584.peach-inline-save-btn:hover:not(:disabled) {585  background: color-mix(in srgb, var(--peach-accent) 30%, transparent);586}587.peach-inline-cancel-btn {588  background: rgba(240, 232, 216, 0.06);589  color: var(--peach-t2);590}591.peach-inline-cancel-btn:hover:not(:disabled) {592  background: rgba(240, 232, 216, 0.12);593  color: var(--peach-t1);594}595.peach-inline-save-btn:disabled,596.peach-inline-cancel-btn:disabled {597  opacity: 0.4;598  cursor: not-allowed;599}600601/* Inline password generator wrapper */602.peach-inline-generator-wrap {603  margin-top: 10px;604  padding-top: 10px;605  border-top: 1px solid var(--peach-t3);606  display: flex;607  flex-direction: column;608  gap: 8px;609}610.peach-inline-generator-cancel {611  align-self: flex-start;612  font-size: 0.6875rem;613  color: var(--peach-t2);614}615616/* "is-editing" card state */617.peach-field-card.is-editing {618  background: rgba(240, 232, 216, 0.02);619  border-radius: 6px;620  padding: 8px;621  margin: -8px;622}623624/* Inline tag editor on Entry detail view */625.peach-inline-tag-editor {626  display: flex;627  flex-direction: column;628  gap: 6px;629}630631/* Quiet inline "+ add X" link in the entry detail body */632.peach-entry-add-link {633  justify-self: start;634  margin-top: 8px;635}636637/* Additional URLs editor revealed by clicking the URL field */638.peach-additional-urls {639  display: flex;640  flex-direction: column;641  gap: 6px;642  margin-top: 8px;643}644.peach-additional-urls-label {645  font-size: 0.5625rem;646  letter-spacing: 0.1em;647  text-transform: uppercase;648  color: var(--peach-t2);649  margin-bottom: 2px;650}651/* UI-5 / LV-4: recovery words grid in the view-words reveal. */652.peach-recovery-words-grid {653  display: grid;654  grid-template-columns: 1fr 1fr;655  gap: 4px 10px;656}657.peach-recovery-word {658  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;659  font-size: 11px;660  color: var(--peach-t0);661}662.peach-recovery-word b {663  color: var(--peach-t2);664  font-weight: 400;665  margin-right: 4px;666}667668/* UI-1 / HV-1b: dismissible sync alert banners at the top of the vault view. */669.peach-sync-alerts {670  display: flex;671  flex-direction: column;672  gap: 6px;673  padding: 8px 12px 0;674}675.peach-sync-alert {676  display: flex;677  align-items: flex-start;678  gap: 8px;679  padding: 8px 10px;680  border-radius: 7px;681  background: color-mix(in srgb, #C8A840 14%, transparent);682  border: 1px solid color-mix(in srgb, #C8A840 38%, transparent);683}684.peach-sync-alert-text {685  flex: 1;686  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;687  font-size: 10px;688  line-height: 1.45;689  color: var(--peach-t0);690}691.peach-sync-alert-dismiss {692  flex-shrink: 0;693  background: none;694  border: none;695  color: var(--peach-t2);696  font-size: 14px;697  line-height: 1;698  cursor: pointer;699  padding: 0 2px;700}701.peach-sync-alert-dismiss:hover { color: var(--peach-t0); }702703/* UI-8 / LV-2: non-blocking homograph warning under the URL editor. */704.peach-homograph-warning {705  margin: 4px 0 2px;706  padding: 6px 8px;707  border-radius: 6px;708  background: color-mix(in srgb, var(--peach-breach) 12%, transparent);709  border: 1px solid color-mix(in srgb, var(--peach-breach) 36%, transparent);710  color: var(--peach-t1);711  font-size: 0.6875rem;712  line-height: 1.4;713}714.peach-additional-url-row {715  display: flex;716  align-items: center;717  gap: 6px;718}719.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }720.peach-additional-url-remove {721  background: transparent;722  border: 1px solid var(--peach-t3);723  color: var(--peach-t2);724  width: 22px;725  height: 22px;726  border-radius: 4px;727  cursor: pointer;728  font-size: 0.875rem;729  line-height: 1;730  display: inline-flex;731  align-items: center;732  justify-content: center;733  flex-shrink: 0;734  transition: color 120ms ease, border-color 120ms ease;735}736.peach-additional-url-remove:hover:not(:disabled) {737  color: var(--peach-accent);738  border-color: var(--peach-border-accent);739}740.peach-additional-urls-add { align-self: flex-start; }741742/* Delete row */743.peach-entry-delete-row {744  display: flex;745  align-items: center;746  gap: 8px;747  padding-top: 18px;748  margin-top: 8px;749  border-top: 1px solid var(--peach-t3);750}751.peach-delete-btn {752  font-size: 0.6875rem;753  color: var(--peach-t2);754  padding: 4px 0;755}756.peach-delete-confirm-text {757  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;758  font-size: 0.6875rem;759  font-style: italic;760  color: var(--peach-t2);761  flex-shrink: 0;762}763764/* TOTP band */765.peach-totp-band {766  border-top: 1px solid var(--peach-t3);767  padding: 12px 20px 14px;768  position: relative;769  display: grid;770  grid-template-columns: 1fr auto;771  gap: 10px;772}773.peach-totp-main {774  min-width: 0;775  cursor: pointer;776  user-select: none;777}778.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }779.peach-totp-code-row {780  display: flex;781  align-items: flex-end;782  gap: 10px;783  min-width: 0;784}785.peach-totp-code {786  margin: 2px 0 0;787  font-family: var(--font-display);788  font-style: italic;789  font-weight: 300;790  font-size: 38px; color: var(--peach-accent);791  line-height: 0.95; min-height: 1em;792  min-width: 0;793}794.peach-totp-code-text {795  display: inline-flex;796  overflow: hidden;797  text-overflow: ellipsis;798  white-space: nowrap;799}800.peach-totp-copy-btn {801  margin-bottom: 2px;802  flex-shrink: 0;803  border-color: transparent;804}805.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }806.peach-totp-countdown {807  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;808  font-size: 22px; color: var(--peach-t1);809}810.peach-totp-ring { transform: rotate(-90deg); }811.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }812.peach-totp-ring-progress {813  fill: none; stroke: var(--peach-accent); stroke-width: 2;814  stroke-linecap: round;815  transition: stroke-dashoffset 1s linear, stroke 500ms ease;816}817/* Search bar */818.peach-search-wrap {819  border-top: 1px solid var(--peach-t3);820  background: var(--peach-s1);821  min-height: 54px; position: relative;822  box-shadow: inset 0 6px 18px transparent;823  transition: box-shadow 700ms ease;824}825.peach-search-wrap::before {826  content: "";827  position: absolute;828  left: 0;829  top: 0;830  height: 2px;831  width: var(--peach-totp-progress, 0%);832  background: var(--peach-accent);833  opacity: 0;834  transition: width 1s linear, opacity 180ms ease;835  pointer-events: none;836}837.peach-shell[data-totp-active="true"] .peach-search-wrap::before {838  opacity: 0.9;839}840.peach-shell[data-totp-active="true"] .peach-search-wrap {841  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);842}843844@keyframes peach-totp-code-flare {845  0%   { filter: brightness(1); }846  25%  { filter: brightness(1.3); }847  100% { filter: brightness(1); }848}849.peach-totp-code.is-hot {850  animation: peach-totp-code-flare 3000ms ease-in-out both;851}852.peach-search-bar {853  min-height: 54px;854  display: grid;855  grid-template-columns: auto minmax(0, 1fr) auto;856  align-items: center;857  gap: 8px; padding: 0 9px 0 12px;858}859.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }860.peach-search-input {861  border: 0; background: transparent; color: var(--peach-t0);862  font-family: var(--font-display);863  font-style: italic; font-size: 18px;864  outline: none; width: 100%; min-width: 0; padding: 0;865  caret-color: var(--peach-accent);866}867.peach-search-input::placeholder { color: var(--peach-t2); }868.peach-search-meta {869  display: grid;870  grid-auto-flow: column;871  align-items: center;872  justify-content: end;873  gap: 6px;874  min-width: max-content;875}876.peach-search-counter {877  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;878  font-size: 0.625rem; color: var(--peach-t2);879  display: inline-flex;880  align-items: center;881  line-height: 1;882}883.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }884885/* Buttons */886.peach-btn {887  border: 1px solid transparent; border-radius: 12px;888  background: transparent; color: var(--peach-t0);889  font-family: Inter, system-ui, sans-serif;890  font-size: 0.75rem; letter-spacing: 0.02em; padding: 8px 12px;891  cursor: pointer;892  transition:893    background-color var(--peach-dur-80) var(--peach-curve-arrival),894    color var(--peach-dur-80) var(--peach-curve-arrival),895    border-color var(--peach-dur-150) var(--peach-curve-arrival);896}897.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }898.peach-btn:disabled {899  opacity: 0.45;900  cursor: not-allowed;901}902.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 0.6875rem; }903.peach-btn--md { min-height: 38px; }904.peach-btn--accent {905  background: var(--peach-accent);906  color: rgba(0,0,0,0.92);907  font-weight: 500;908  box-shadow:909    0 1px 0 rgba(255,255,255,0.08) inset,910    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),911    0 3px 16px var(--peach-glow),912    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);913}914.peach-btn--accent:hover:not(:disabled) {915  background: var(--peach-accent);916  filter: brightness(1.10) saturate(1.05);917  box-shadow:918    0 1px 0 rgba(255,255,255,0.10) inset,919    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),920    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),921    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);922}923.peach-btn--ghost:not(.peach-icon-btn) { border-color: var(--peach-t3); color: var(--peach-t1); }924.peach-btn--ghost.peach-icon-btn { color: var(--peach-t1); }925.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }926.peach-icon-btn {927  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;928  display: inline-flex; align-items: center; justify-content: center;929  border-color: transparent;930  transition:931    color var(--peach-dur-80) var(--peach-curve-arrival),932    box-shadow var(--peach-dur-150) var(--peach-curve-arrival),933    background-color var(--peach-dur-80) var(--peach-curve-arrival);934}935.peach-icon-btn:hover:not(:disabled) {936  background: transparent;937  color: var(--peach-accent);938  box-shadow: 0 0 12px color-mix(in srgb, var(--peach-accent) 28%, transparent),939              0 0 4px color-mix(in srgb, var(--peach-accent) 16%, transparent);940}941942/* Topbar sync. Only rendered when a device is paired, so it never sits there943   as a control that cannot do anything. */944.peach-sync-btn.is-syncing { color: var(--peach-accent); }945.peach-sync-btn.is-syncing .peach-sync-icon {946  animation: peach-sync-spin 900ms linear infinite;947  transform-origin: 50% 50%;948}949.peach-sync-btn.is-ok { color: var(--peach-accent); }950.peach-sync-btn.is-error { color: var(--peach-breach, #d66); }951@keyframes peach-sync-spin { to { transform: rotate(360deg); } }952953/* Sync indicator light — same taxonomy as the Settings pip, sized for the954   14px topbar icon. Unlit when nothing has happened yet; never green when955   sync is not actually working. */956.peach-sync-btn { position: relative; }957.peach-sync-pip {958  position: absolute;959  top: 2px;960  right: 2px;961  width: 5px;962  height: 5px;963  border-radius: 50%;964  background: transparent;965}966.peach-sync-pip.is-ok,967.peach-sync-pip.is-busy {968  background: var(--peach-health-ok);969  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-health-ok) 60%, transparent);970}971.peach-sync-pip.is-busy { animation: peach-sync-pip-pulse 1600ms ease-in-out infinite; }972/* Yellow — the dial did not reach the peer, but the alarm will retry. Distinct973   from is-error (red) so a transient network miss does not look like a real974   fault. */975.peach-sync-pip.is-warn {976  background: var(--peach-health-warn);977  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-health-warn) 60%, transparent);978}979.peach-sync-pip.is-error {980  background: var(--peach-breach);981  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-breach) 60%, transparent);982}983@keyframes peach-sync-pip-pulse {984  0%, 100% { opacity: 1; }985  50% { opacity: 0.35; }986}987@media (prefers-reduced-motion: reduce) {988  .peach-sync-btn.is-syncing .peach-sync-icon { animation: none; opacity: 0.6; }989  .peach-sync-pip.is-busy { animation: none; }990}991992.peach-btn:focus-visible {993  outline: none;994  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);995}996997/* Lock button */998.peach-lock-icon { transform-origin: center; }999.peach-lock-btn { color: var(--peach-accent); }1000.peach-lock-btn.is-locking .peach-lock-icon {1001  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);1002}10031004/* Biometric unlock button */1005.peach-biometric-btn {1006  display: flex;1007  align-items: center;1008  justify-content: center;1009  gap: 6px;1010  margin-top: 8px;1011  width: 100%;1012}10131014/* Copy button */1015.peach-copy-btn {1016  position: relative; overflow: hidden;1017  color: var(--peach-t2); border-color: var(--peach-t3);1018}1019.peach-copy-icon {1020  display: inline-flex; align-items: center; justify-content: center;1021  position: relative; z-index: 1;1022}1023.peach-copy-icon-svg { display: block; }1024.peach-copy-sheen {1025  position: absolute; inset: 0;1026  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--peach-accent) 18%, transparent) 30%, color-mix(in srgb, var(--peach-accent) 8%, transparent) 100%);1027  opacity: 0; transform: scaleX(0.15); transform-origin: left center;1028}1029.peach-copy-btn.is-copied {1030  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;1031  box-shadow:1032    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),1033    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),1034    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);1035}1036.peach-copy-btn.is-copied .peach-copy-icon {1037  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;1038}1039.peach-copy-btn.is-copied .peach-copy-sheen {1040  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;1041}1042.peach-copy-btn.is-retreat {1043  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;1044}1045.peach-copy-btn.is-retreat .peach-copy-sheen {1046  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;1047}1048.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }1049.peach-copy-drain-bar {1050  display: block; width: 100%; height: 100%;1051  background: var(--peach-accent); opacity: 0.7;1052  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;1053}10541055/* Unlock screen elements */1056.peach-underline-input {1057  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);1058  padding: 6px 0; background: transparent; color: var(--peach-t0);1059  outline: none;1060  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1061  font-size: 0.8125rem;1062  caret-color: var(--peach-accent);1063}1064.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }1065.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }1066.peach-hint {1067  margin: 0;1068  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1069  font-size: 0.625rem; color: var(--peach-t2);1070}1071.peach-unlock-footer {1072  margin-top: 4px; display: flex; align-items: center; gap: 7px;1073  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1074  font-size: 0.625rem; color: var(--peach-t2);1075}1076.peach-unlock-footer--lock {1077  padding-top: 2px;1078}10791080/* Desktop helper (peach-sync) code pairing — additive hooks. The shared pairing1081   classes (peach-pair-*) carry the shared layout; these only style the parts1082   unique to the typed-code path. Inline styles cover the SAS/confirm gate. */1083.peach-desktop-pair { display: flex; flex-direction: column; }1084.peach-desktop-enter,1085.peach-desktop-searching,1086.peach-desktop-paired,1087.peach-desktop-error {1088  display: flex; flex-direction: column; gap: 8px;1089  padding: 4px 18px 16px; text-align: center; align-items: center;1090}1091.peach-desktop-enter .peach-label { align-self: flex-start; }1092/* Sized for a full 19-character pairing code (A74H-48J3-KI32-OEP4) in a1093   320px popup — a 6-digit legacy helper code still reads fine at this size. */1094.peach-code-input {1095  text-align: center; letter-spacing: 0.12em; padding-left: 0.12em;1096  font-size: 15px;1097}1098.peach-code-input::placeholder { letter-spacing: 0.12em; }10991100/* Sync card "pair a device" options — bordered, raised tappable rows that read1101   as buttons on any card hue (theme-neutral light overlay, not the peach accent). */1102.peach-sync-pair-option {1103  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;1104  width: 100%; text-align: left; cursor: pointer; font-family: inherit;1105  padding: 11px 12px; border-radius: 10px;1106  background: color-mix(in srgb, var(--peach-t0) 6%, transparent);1107  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);1108  color: var(--peach-t0);1109  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;1110}1111.peach-sync-pair-option + .peach-sync-pair-option { margin-top: 8px; }1112.peach-sync-pair-option:hover {1113  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);1114  border-color: color-mix(in srgb, var(--peach-t0) 28%, transparent);1115}1116.peach-sync-pair-option:active { transform: translateY(1px); }1117.peach-sync-pair-option:disabled { opacity: 0.5; cursor: default; }1118.peach-sync-pair-option-icon { flex-shrink: 0; display: flex; align-items: center; color: var(--peach-t1); margin-top: 1px; }1119.peach-sync-pair-option-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }1120.peach-sync-pair-option-title { font-size: 0.8125rem; font-weight: 600; }1121.peach-sync-pair-option-sub { font-size: 0.6875rem; line-height: 1.45; color: var(--peach-t2); }1122.peach-sync-pair-option-chevron { flex-shrink: 0; color: var(--peach-t2); font-size: 1.05rem; line-height: 1.3; }11231124/* Breach badge */1125.peach-breach-badge {1126  display: flex;1127  position: relative;1128  z-index: 1;1129  align-items: center;1130  gap: 7px;1131  font-size: 0.5625rem;1132  color: var(--peach-breach);1133  padding: 5px 10px;1134  margin-bottom: 4px;1135  border-radius: 8px;1136  background: rgba(220, 80, 60, 0.07);1137  border: 1px solid rgba(220, 80, 60, 0.18);1138  letter-spacing: 0.04em;1139}11401141.peach-password-value.is-breached {1142  color: rgba(220, 80, 60, 0.75);1143  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1144}11451146/* ── Overlay views ─────────────────────────────────────────────────── */1147.peach-overlay-view {1148  position: absolute;1149  inset: 0;1150  display: flex;1151  flex-direction: column;1152  background:1153    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1154    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1155    var(--peach-bg);1156  z-index: 2;1157  overflow: hidden;1158  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1159}11601161.peach-overlay-view:has(.stk-shell) {1162  background: var(--peach-bg);1163}1164@keyframes overlay-in {1165  from { opacity: 0; transform: translateY(8px); }1166  to   { opacity: 1; transform: translateY(0); }1167}1168.peach-overlay-view.ov-enter-up {1169  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1170}1171.peach-overlay-view.ov-exit-up {1172  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1173}1174.peach-overlay-view.ov-enter-right {1175  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1176}1177.peach-overlay-view.ov-exit-right {1178  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1179}11801181@keyframes ov-enter-up {1182  from { opacity: 0; transform: translateY(18px); }1183  to   { opacity: 1; transform: translateY(0); }1184}1185@keyframes ov-exit-up {1186  from { opacity: 1; transform: translateY(0); }1187  to   { opacity: 0; transform: translateY(-12px); }1188}1189@keyframes ov-enter-right {1190  from { opacity: 0; transform: translateX(20px); }1191  to   { opacity: 1; transform: translateX(0); }1192}1193@keyframes ov-exit-right {1194  from { opacity: 1; transform: translateX(0); }1195  to   { opacity: 0; transform: translateX(20px); }1196}11971198/* Overlay shared header */1199.peach-overlay-header {1200  padding: 10px 12px 8px;1201  display: flex;1202  align-items: center;1203  gap: 10px;1204  flex-shrink: 0;1205}1206/* Back button — circular pill matching the settings stack masthead (.stk-back) */1207.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1208  width: 28px;1209  height: 28px;1210  flex: 0 0 28px;1211  border-radius: 999px;1212  border: 1px solid var(--peach-border);1213  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1214  color: var(--peach-t1);1215  padding: 0;1216}1217.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1218  color: var(--peach-t0);1219  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1220  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1221}1222.peach-overlay-title {1223  font-family: var(--font-display);1224  font-style: italic;1225  font-weight: 400;1226  font-size: 20px;1227  line-height: 1;1228  color: var(--peach-t0);1229  flex: 1;1230  text-align: center;1231}1232/* Balances the 28px back button so the title stays visually centred */1233.peach-overlay-spacer {1234  width: 28px;1235  flex: 0 0 28px;1236}12371238.peach-overlay-card {1239  background: var(--peach-s1);1240  border: 1px solid var(--peach-t3);1241  border-radius: 12px;1242  overflow: hidden;1243  width: 100%;1244}12451246.peach-onboarding-alt-actions {1247  display: flex;1248  flex-direction: column;1249  gap: 4px;1250  padding: 0;1251}12521253.peach-settings-copy {1254  margin: 0 0 10px;1255  font-size: 0.6875rem;1256  line-height: 1.5;1257  color: var(--peach-t2);1258}12591260.peach-settings-copy strong {1261  color: var(--peach-t0);1262}12631264.peach-settings-copy--spacious {1265  margin-bottom: 12px;1266}12671268.peach-settings-copy--result {1269  color: var(--peach-accent);1270  font-size: 0.8125rem;1271  text-align: center;1272  padding: 8px 0;1273}12741275.peach-settings-copy--danger {1276  color: var(--peach-breach);1277}12781279.peach-settings-copy--success {1280  color: var(--peach-accent);1281}12821283.peach-inline-feedback {1284  font-size: 0.6875rem;1285  margin: 10px 0 0;1286}12871288.peach-inline-feedback--ok {1289  color: var(--peach-accent);1290}12911292.peach-inline-feedback--error {1293  color: var(--peach-breach);1294}12951296.peach-inline-feedback--muted {1297  color: var(--peach-t2);1298  font-size: 0.625rem;1299  margin: 4px 0;1300}13011302.peach-inline-feedback--spaced {1303  margin-top: 12px;1304}13051306.peach-settings-actions--row {1307  display: flex;1308  gap: 6px;1309}13101311.peach-settings-actions--end {1312  margin-top: 14px;1313  justify-content: flex-end;1314}13151316.peach-settings-stack {1317  display: flex;1318  flex-direction: column;1319  gap: 6px;1320}13211322.peach-settings-stack--tight {1323  gap: 4px;1324}13251326.peach-settings-stack--spacious {1327  gap: 8px;1328}13291330.peach-settings-input {1331  width: 100%;1332  box-sizing: border-box;1333  padding: 8px 10px;1334  background: rgba(0, 0, 0, 0.22);1335  border: 1px solid transparent;1336  border-radius: 6px;1337  color: var(--peach-t0);1338  font-family: var(--font-ui);1339  font-size: 0.75rem;1340  outline: none;1341  transition: border-color 120ms ease, background 120ms ease;1342}13431344.peach-settings-input:focus {1345  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1346  background: rgba(0, 0, 0, 0.28);1347}13481349.peach-settings-input[type="password"] {1350  font-family: var(--font-mono);1351  letter-spacing: 0.04em;1352}13531354.peach-hidden-file-input {1355  display: none;1356}13571358.peach-checkbox-note {1359  display: flex;1360  align-items: flex-start;1361  gap: 8px;1362  font-size: 0.6875rem;1363  color: var(--peach-t1);1364  cursor: pointer;1365  margin: 12px 0;1366}13671368.peach-checkbox-note input {1369  margin-top: 1px;1370}13711372.peach-danger-notice {1373  background: rgba(220, 80, 60, 0.08);1374  border: 1px solid rgba(220, 80, 60, 0.2);1375  border-radius: 6px;1376  padding: 9px 11px;1377  font-size: 0.6875rem;1378  color: var(--peach-t1);1379  line-height: 1.5;1380}13811382.peach-info-notice {1383  font-size: 0.6875rem;1384  color: var(--peach-t1);1385  line-height: 1.5;1386  background: var(--surface-card);1387  border: 1px solid var(--peach-t3);1388  border-radius: 6px;1389  padding: 8px 10px;1390}13911392.peach-info-notice--warn {1393  border-color: rgba(220, 38, 38, 0.4);1394  background: rgba(220, 38, 38, 0.06);1395  color: rgba(220, 38, 38, 0.92);1396  margin-bottom: 8px;1397}13981399/* Warm helpful-context note — reads as a soft aside, not an alert. */1400.peach-info-notice--note {1401  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);1402  border-color: color-mix(in srgb, var(--peach-accent) 18%, transparent);1403  color: var(--peach-t2);1404}14051406.peach-strength-row {1407  display: flex;1408  align-items: center;1409  gap: 8px;1410  margin-bottom: 10px;1411}14121413.peach-strength-track {1414  flex: 1;1415  height: 4px;1416  background: var(--peach-s2);1417  border-radius: 2px;1418  overflow: hidden;1419}14201421.peach-strength-fill {1422  height: 100%;1423  border-radius: 2px;1424  transition: width 120ms ease, background 120ms ease;1425}14261427/* ── Type selector tabs ── */1428.peach-type-tabs {1429  display: flex;1430  gap: 0;1431  background: var(--peach-t4);1432  border-radius: 8px;1433  padding: 3px;1434}14351436.peach-type-tab {1437  flex: 1;1438  display: flex;1439  align-items: center;1440  justify-content: center;1441  gap: 6px;1442  padding: 6px 10px;1443  border-radius: 6px;1444  border: none;1445  background: transparent;1446  cursor: pointer;1447  font-family: Inter, system-ui, sans-serif;1448  font-size: 0.6875rem;1449  font-weight: 400;1450  letter-spacing: 0.04em;1451  color: var(--peach-t1);1452  transition: background 150ms ease, color 150ms ease;1453}14541455.peach-type-tab.is-active {1456  background: var(--peach-s2);1457  color: var(--peach-t0);1458  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1459}14601461.peach-type-tab:not(.is-active):hover {1462  color: var(--peach-t0);1463}14641465.peach-type-tab svg {1466  opacity: 0.7;1467  flex-shrink: 0;1468}14691470.peach-type-tab.is-active svg {1471  opacity: 1;1472}14731474/* ── List view ───────────────────────────────────────────────────────── */1475.peach-list-top {1476  padding: 0 10px;1477  min-height: 46px;1478  display: flex;1479  align-items: center;1480  gap: 6px;1481  border-bottom: 1px solid var(--peach-t3);1482  flex-shrink: 0;1483  background: var(--peach-s1);1484}14851486.peach-vault-list {1487  flex: 1;1488  overflow-y: auto;1489  scrollbar-width: none;1490}1491.peach-vault-list::-webkit-scrollbar { display: none; }14921493/* Scrollbar — vault list */1494.peach-vault-list {1495  scrollbar-width: thin;1496  scrollbar-color: var(--peach-t3) transparent;1497}14981499.peach-vault-list::-webkit-scrollbar {1500  width: 3px;1501}15021503.peach-vault-list::-webkit-scrollbar-thumb {1504  background: var(--peach-t3);1505  border-radius: 2px;1506}15071508.peach-entry-row {1509  width: 100%;1510  display: flex;1511  align-items: center;1512  gap: 10px;1513  padding: 9px 16px;1514  background: transparent;1515  border: none;1516  border-bottom: 1px solid var(--peach-t3);1517  cursor: pointer;1518  color: inherit;1519  text-align: left;1520  transition: background 80ms ease;1521}1522.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1523.peach-entry-row:last-child { border-bottom: none; }1524.peach-entry-row.is-active {1525  box-shadow: inset 2px 0 0 var(--peach-accent);1526  background: rgba(240,232,216,0.03);1527}1528.peach-entry-row:focus-visible {1529  outline: none;1530  box-shadow: 0 0 0 1px var(--peach-border-accent);1531  background: rgba(240,232,216,0.03);1532}1533.peach-entry-row-icon {1534  width: 26px; height: 26px;1535  border-radius: 7px;1536  border: 1px solid var(--peach-t3);1537  display: flex; align-items: center; justify-content: center;1538  color: var(--peach-t2);1539  flex-shrink: 0;1540}1541.peach-entry-row-icon.is-breach {1542  border-color: rgba(220,80,60,0.3);1543  color: rgba(220,80,60,0.7);1544}15451546/* Title-initials chip used as the favicon fallback for login entries whose1547 * real favicon hasn't been cached by the browser yet (freshly-imported,1548 * never-visited domains). Background colour is hashed from the title so1549 * the same entry always shows the same chip. The chip fits the same1550 * 26×26 row icon slot the favicon would take. */1551.peach-favicon-initials {1552  display: inline-flex;1553  align-items: center;1554  justify-content: center;1555  width: 100%;1556  height: 100%;1557  border-radius: 4px;1558  font-family: "IBM Plex Mono", monospace;1559  font-size: 0.5625rem;1560  font-weight: 600;1561  letter-spacing: 0.04em;1562  color: rgba(240, 232, 216, 0.92);1563  text-transform: uppercase;1564  user-select: none;1565}1566.peach-entry-row-info { flex: 1; min-width: 0; }1567.peach-entry-row-name {1568  display: block;1569  font-family: var(--font-display);1570  font-size: 1.0625rem;1571  font-style: italic;1572  font-weight: 400;1573  color: var(--peach-t0);1574  line-height: 1.2;1575  white-space: nowrap;1576  overflow: hidden;1577  text-overflow: ellipsis;1578}1579.peach-entry-row-meta {1580  display: block;1581  font-family: "IBM Plex Mono", monospace;1582  font-size: 0.5625rem;1583  color: var(--peach-t2);1584  margin-top: 1px;1585  letter-spacing: 0.05em;1586}1587.peach-entry-row-dot {1588  width: 5px; height: 5px;1589  border-radius: 50%;1590  background: rgba(220,80,60,0.7);1591  flex-shrink: 0;1592}1593.peach-new-entry-row {1594  display: flex;1595  align-items: center;1596  justify-content: center;1597  gap: 6px;1598  width: 100%;1599  padding: 11px;1600  background: transparent;1601  border: none;1602  border-top: 1px solid var(--peach-t3);1603  color: var(--peach-t2);1604  font-family: "IBM Plex Mono", monospace;1605  font-size: 0.5625rem;1606  text-transform: uppercase;1607  letter-spacing: 0.14em;1608  cursor: pointer;1609  flex-shrink: 0;1610  transition: color 120ms ease, background 120ms ease;1611}1612.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }16131614/* ── Multi-select mode ─────────────────────────────────────────────── */16151616/* Select-mode trigger button in sort bar — same shape as trash btn */1617.peach-sort-select-btn {1618  display: flex;1619  align-items: center;1620  justify-content: center;1621  padding: 3px 5px;1622  background: transparent;1623  border: none;1624  cursor: pointer;1625  color: var(--peach-t2);1626  border-radius: 4px;1627  transition: color 140ms ease, background 140ms ease;1628}1629.peach-sort-select-btn:hover {1630  color: var(--peach-t1);1631  background: var(--peach-t3);1632}16331634/* Sort bar in select mode */1635.peach-select-cancel-btn {1636  background: transparent;1637  border: none;1638  padding: 0 4px;1639  cursor: pointer;1640  font-family: "IBM Plex Mono", monospace;1641  font-size: 0.5625rem;1642  letter-spacing: 0.12em;1643  text-transform: uppercase;1644  color: var(--peach-t2);1645  transition: color 140ms ease;1646  flex-shrink: 0;1647}1648.peach-select-cancel-btn:hover { color: var(--peach-t0); }16491650.peach-select-count-label {1651  flex: 1;1652  text-align: center;1653  font-family: "IBM Plex Mono", monospace;1654  font-size: 0.5625rem;1655  letter-spacing: 0.14em;1656  text-transform: uppercase;1657  color: var(--peach-t1);1658}16591660.peach-select-all-btn {1661  background: transparent;1662  border: none;1663  padding: 0 4px;1664  cursor: pointer;1665  font-family: "IBM Plex Mono", monospace;1666  font-size: 0.5625rem;1667  letter-spacing: 0.12em;1668  text-transform: uppercase;1669  color: var(--peach-t2);1670  transition: color 140ms ease;1671  flex-shrink: 0;1672}1673.peach-select-all-btn:hover { color: var(--peach-accent); }16741675/* List in select mode */1676.peach-vault-list.is-selecting .peach-entry-row {1677  cursor: default;1678}1679.peach-vault-list.is-selecting .peach-entry-row:hover {1680  background: rgba(240,232,216,0.02);1681}1682.peach-vault-list.is-selecting .peach-entry-row.is-selected {1683  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1684}1685.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1686  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1687}16881689/* Select indicator circles in icon slot */1690.peach-entry-row-icon.is-select-icon {1691  color: var(--peach-t2);1692}1693.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1694  color: var(--peach-accent);1695}16961697/* Delete action bar at bottom (replaces new-entry row) */1698.peach-select-action-bar {1699  display: flex;1700  align-items: center;1701  justify-content: center;1702  gap: 7px;1703  width: 100%;1704  padding: 11px;1705  background: transparent;1706  border: none;1707  border-top: 1px solid var(--peach-t3);1708  color: var(--peach-t1);1709  font-family: "IBM Plex Mono", monospace;1710  font-size: 0.5625rem;1711  text-transform: uppercase;1712  letter-spacing: 0.14em;1713  cursor: pointer;1714  flex-shrink: 0;1715  transition: color 120ms ease, background 120ms ease;1716}1717.peach-select-action-bar:not(:disabled):hover {1718  color: var(--peach-t0);1719  background: rgba(220,80,60,0.06);1720}1721.peach-select-action-bar:not(:disabled):hover svg {1722  stroke: rgba(220,80,60,0.8);1723}1724.peach-select-action-bar:disabled,1725.peach-select-action-bar.is-empty {1726  color: var(--peach-t2);1727  cursor: default;1728  opacity: 0.5;1729}1730.peach-search-counter-list {1731  white-space: nowrap;1732  flex-shrink: 0;1733}1734.peach-list-empty {1735  min-height: 180px;1736  display: grid;1737  place-items: center;1738  color: var(--peach-t2);1739  font-family: "IBM Plex Mono", monospace;1740  font-size: 0.6875rem;1741}17421743/* ── Settings view ───────────────────────────────────────────────────── */1744.peach-settings-body {1745  flex: 1;1746  overflow-y: auto;1747  min-height: 0;1748  display: flex;1749  flex-direction: column;1750  padding: 2px 0 10px;1751}1752.peach-settings-group {1753  margin: 4px 10px;1754  padding: 9px 14px 11px;1755  border-radius: 12px;1756  border: 1px solid rgba(255, 255, 255, 0.07);1757  background: rgba(26, 20, 16, 0.60);1758  backdrop-filter: blur(10px) saturate(1.3);1759  -webkit-backdrop-filter: blur(10px) saturate(1.3);1760}17611762.peach-settings-group + .peach-settings-group {1763  margin-top: 6px;1764}17651766@supports not (backdrop-filter: blur(1px)) {1767  .peach-settings-group {1768    background: rgba(26, 20, 16, 0.90);1769    border-color: rgba(255, 255, 255, 0.09);1770    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1771  }1772}17731774.light .peach-settings-group,1775[data-theme="light"] .peach-settings-group {1776  background: rgba(245, 237, 226, 0.70);1777  border-color: rgba(26, 18, 8, 0.08);1778  backdrop-filter: blur(10px) saturate(1.2);1779  -webkit-backdrop-filter: blur(10px) saturate(1.2);1780}17811782@supports not (backdrop-filter: blur(1px)) {1783  .light .peach-settings-group,1784  [data-theme="light"] .peach-settings-group {1785    background: rgba(245, 237, 226, 0.97);1786    border-color: rgba(26, 18, 8, 0.10);1787  }1788}1789.peach-export-intro {1790  padding-bottom: 8px;1791}1792.peach-export-card {1793  display: grid;1794  gap: 10px;1795}1796.peach-rune-canvas {1797  border-radius: 8px;1798  background: rgba(0, 0, 0, 0.22);1799  flex: 1;1800  align-self: center;1801}1802.peach-script-input {1803  font-family: "PeachScript", monospace;1804  font-size: 0.6875rem;1805  line-height: 1.9;1806  letter-spacing: 0.06em;1807  color: var(--peach-t0);1808  background: rgba(0, 0, 0, 0.22);1809  border: none;1810  border-radius: 6px;1811  padding: 12px;1812  width: 100%;1813  min-height: 96px;1814  resize: vertical;1815  word-break: break-all;1816  scrollbar-width: none;1817  -ms-overflow-style: none;1818}18191820.peach-script-input::-webkit-scrollbar { display: none; }1821.peach-csv-warning {1822  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1823  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1824  color: var(--peach-t0);1825  border-radius: 6px;1826  padding: 10px 12px;1827  margin-bottom: 8px;1828  font-size: 0.75rem;1829  line-height: 1.45;1830}1831.peach-export-card--primary {1832  background:1833    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1834}18351836/* Export menu — distribute the three format cards across the popup. */1837.peach-export-menu {1838  display: flex;1839  flex-direction: column;1840  flex: 1;1841  min-height: 0;1842}1843.peach-export-menu .peach-settings-group {1844  flex: 1;1845  display: flex;1846  flex-direction: column;1847  justify-content: center;1848  gap: 10px;1849}18501851/* Result view — the script-string fills the remaining vertical surface. */1852.peach-export-result-group {1853  flex: 1;1854  display: flex;1855  flex-direction: column;1856  min-height: 0;1857  border-bottom: none;1858}1859.peach-export-result-group .peach-export-card {1860  flex: 1;1861  min-height: 0;1862  display: flex;1863  flex-direction: column;1864  gap: 10px;1865}1866.peach-export-result-group .peach-export-card-copy {1867  flex-shrink: 0;1868}1869.peach-export-result-group .peach-settings-label {1870  flex-shrink: 0;1871}1872.peach-export-result-group button {1873  flex-shrink: 0;1874}1875.peach-export-card-head {1876  display: flex;1877  align-items: center;1878  justify-content: space-between;1879  gap: 10px;1880}1881.peach-export-card-copy {1882  margin: 0;1883  font-size: 0.75rem;1884  line-height: 1.55;1885  color: var(--peach-t1);1886}1887.peach-export-note {1888  margin: 0;1889  font-size: 0.625rem;1890  line-height: 1.5;1891  color: var(--peach-t2);1892}1893.peach-export-strength-track {1894  height: 3px;1895  background: var(--peach-border);1896  border-radius: 2px;1897  margin: 4px 0 2px;1898  overflow: hidden;1899}1900.peach-export-strength-fill {1901  height: 100%;1902  border-radius: 2px;1903  transition: width 250ms ease, background 250ms ease;1904}1905.peach-export-strength-warn {1906  margin: 0;1907  font-size: 0.625rem;1908  line-height: 1.5;1909  color: #e84040;1910  font-family: "IBM Plex Mono", monospace;1911}1912.peach-export-strength-hint {1913  margin: 0;1914  font-size: 0.625rem;1915  line-height: 1.5;1916  color: var(--peach-t2);1917  font-family: "IBM Plex Mono", monospace;1918}1919.peach-export-pill {1920  display: inline-flex;1921  align-items: center;1922  padding: 4px 8px;1923  border-radius: 999px;1924  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1925  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1926  color: var(--peach-accent);1927  font-family: "IBM Plex Mono", monospace;1928  font-size: 0.5rem;1929  letter-spacing: 0.12em;1930  text-transform: uppercase;1931  white-space: nowrap;1932}1933.peach-export-pill--danger {1934  border-color: rgba(220,80,60,0.22);1935  background: rgba(220,80,60,0.08);1936  color: var(--peach-breach);1937}1938.peach-settings-label {1939  margin: 0 0 6px;1940  font-family: "IBM Plex Mono", monospace;1941  font-size: 0.5rem;1942  text-transform: uppercase;1943  letter-spacing: 0.18em;1944  color: var(--peach-t2);1945}1946.peach-settings-row {1947  display: flex;1948  align-items: center;1949  justify-content: space-between;1950  gap: 12px;1951  min-height: 34px;1952  padding: 6px 0;1953  font-size: 0.8125rem;1954  color: var(--peach-t1);1955}1956.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1957.peach-settings-value {1958  font-family: "IBM Plex Mono", monospace;1959  font-size: 0.625rem;1960  color: var(--peach-t2);1961}19621963.peach-settings-value--status {1964  display: flex;1965  align-items: center;1966  gap: 6px;1967}19681969.peach-settings-link {1970  font-family: "IBM Plex Mono", monospace;1971  font-size: 0.625rem;1972  color: var(--peach-accent);1973  text-decoration: none;1974  cursor: pointer;1975}1976.peach-settings-link:hover {1977  text-decoration: underline;1978}19791980.peach-settings-row--stack {1981  flex-direction: column;1982  align-items: stretch;1983  gap: 6px;1984}19851986.peach-settings-row--top {1987  align-items: flex-start;1988}19891990.peach-settings-row-main {1991  display: flex;1992  flex-direction: column;1993  gap: 4px;1994  flex: 1;1995}1996.peach-toggle {1997  width: 28px; height: 16px;1998  border-radius: 999px;1999  background: var(--peach-t3);2000  border: 1px solid var(--peach-t3);2001  display: flex; align-items: center; justify-content: flex-start; padding: 2px;2002  flex-shrink: 0;2003  transition: background 200ms ease, border-color 200ms ease;2004  cursor: pointer;2005}2006.peach-toggle.is-on {2007  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);2008  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2009}2010.peach-toggle-knob {2011  width: 10px; height: 10px;2012  border-radius: 50%;2013  background: var(--peach-t2);2014  flex-shrink: 0;2015  transform: translateX(0px);2016  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);2017}2018.peach-toggle.is-on .peach-toggle-knob {2019  background: var(--peach-accent);2020  transform: translateX(12px);2021}2022.peach-settings-footer {2023  display: flex;2024  align-items: center;2025  gap: 8px;2026  margin-top: auto;2027  padding: 14px 16px 8px;2028  font-family: "IBM Plex Mono", monospace;2029  font-size: 0.5625rem;2030  color: var(--peach-t2);2031}20322033/* ── Settings home navigation ──────────────────────────────────────────── */2034.peach-settings-nav-label {2035  margin: 0 0 2px;2036  padding: 12px 16px 4px;2037  font-family: "IBM Plex Mono", monospace;2038  font-size: 0.5rem;2039  text-transform: uppercase;2040  letter-spacing: 0.18em;2041  color: var(--peach-t2);2042}20432044.peach-settings-cat-row {2045  display: flex;2046  align-items: center;2047  gap: 10px;2048  width: 100%;2049  padding: 9px 16px;2050  background: none;2051  border: none;2052  border-bottom: 1px solid var(--peach-t3);2053  cursor: pointer;2054  text-align: left;2055  color: inherit;2056  transition: background var(--peach-dur-80) ease;2057}2058.peach-settings-cat-row:hover {2059  background: var(--peach-t3);2060}2061.peach-settings-cat-row:last-child {2062  border-bottom: none;2063}20642065.peach-settings-cat-icon {2066  width: 28px;2067  height: 28px;2068  border-radius: 7px;2069  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2070  color: var(--peach-accent);2071  display: flex;2072  align-items: center;2073  justify-content: center;2074  flex-shrink: 0;2075}2076/* Light theme: peach-on-cream is too low-contrast — both colors are warm.2077   Darken the icon stroke to ink and bump the bg tint so the icon reads2078   sharply while the cell still feels accent-tinted. */2079.light .peach-settings-cat-icon {2080  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);2081  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));2082}20832084.peach-settings-cat-content {2085  flex: 1;2086  display: flex;2087  flex-direction: column;2088  gap: 2px;2089  min-width: 0;2090}20912092.peach-settings-cat-name {2093  font-size: 0.8125rem;2094  font-weight: 450;2095  color: var(--peach-t0);2096  line-height: 1.2;2097}20982099.peach-settings-cat-desc {2100  font-size: 0.625rem;2101  color: var(--peach-t2);2102  line-height: 1.3;2103  white-space: nowrap;2104  overflow: hidden;2105  text-overflow: ellipsis;2106}21072108.peach-settings-cat-chevron {2109  color: var(--peach-t2);2110  flex-shrink: 0;2111  opacity: 0.5;2112}21132114/* ── Settings sub-view section labels ──────────────────────────────────── */2115.peach-settings-sub-label {2116  margin: 12px 0 4px;2117  font-family: "IBM Plex Mono", monospace;2118  font-size: 0.5rem;2119  text-transform: uppercase;2120  letter-spacing: 0.18em;2121  color: var(--peach-t2);2122}2123.peach-settings-sub-label:first-child {2124  margin-top: 4px;2125}21262127/* ── Settings: collapsible Advanced section ─────────────────────────────── */2128.peach-settings-advanced-toggle {2129  display: flex;2130  align-items: center;2131  justify-content: space-between;2132  width: 100%;2133  background: none;2134  border: none;2135  cursor: pointer;2136  padding: 12px 0 4px;2137  margin: 0;2138  color: inherit;2139}2140.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {2141  color: var(--peach-t1);2142}2143.peach-settings-advanced-chevron {2144  font-size: 0.5625rem;2145  color: var(--peach-t3);2146  letter-spacing: 0;2147  transition: color 120ms ease;2148}21492150.peach-sync-disclosure-toggle {2151  min-height: 48px;2152  padding: 10px 0;2153  text-align: left;2154}21552156.peach-sync-disclosure-toggle > span:first-child {2157  display: flex;2158  flex-direction: column;2159  gap: 3px;2160}21612162.peach-sync-disclosure-summary {2163  color: var(--peach-t2);2164  font-size: 0.6875rem;2165  line-height: 1.35;2166}21672168.peach-sync-disclosure-content {2169  padding-bottom: 4px;2170}21712172/* ── Feedback form ──────────────────────────────────────────────────────── */2173.peach-feedback-group {2174  flex: 1;2175  display: flex;2176  flex-direction: column;2177  border-bottom: none;2178}21792180.peach-feedback-intro {2181  margin: 4px 0 14px;2182  font-size: 0.75rem;2183  line-height: 1.55;2184  color: var(--peach-t1);2185}21862187.peach-feedback-chips {2188  display: flex;2189  flex-wrap: wrap;2190  gap: 6px;2191  margin-bottom: 14px;2192}21932194.peach-feedback-chip {2195  padding: 4px 10px;2196  border-radius: 999px;2197  border: 1px solid var(--peach-t3);2198  background: none;2199  color: var(--peach-t2);2200  font-size: 0.6875rem;2201  font-family: var(--font-ui);2202  cursor: pointer;2203  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2204    background var(--peach-dur-80) ease;2205}2206.peach-feedback-chip:hover {2207  border-color: var(--peach-t2);2208  color: var(--peach-t1);2209}2210.peach-feedback-chip.is-active {2211  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);2212  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));2213  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);2214  box-shadow:2215    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),2216    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);2217  font-weight: 700;2218}22192220.peach-feedback-textarea {2221  flex: 1;2222  width: 100%;2223  min-height: 120px;2224  box-sizing: border-box;2225  background: rgba(0, 0, 0, 0.22);2226  border: 1px solid transparent;2227  border-radius: 6px;2228  color: var(--peach-t0);2229  font-size: 0.75rem;2230  font-family: var(--font-ui);2231  line-height: 1.5;2232  padding: 8px 10px;2233  resize: none;2234  outline: none;2235  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2236}2237.peach-feedback-textarea:focus {2238  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2239  background: rgba(0, 0, 0, 0.28);2240}2241.peach-feedback-textarea:focus {2242  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2243}2244.peach-feedback-textarea::placeholder {2245  color: var(--peach-t2);2246}22472248.peach-feedback-meta {2249  margin: 6px 0 0;2250  font-size: 0.625rem;2251  color: var(--peach-t2);2252  font-family: "IBM Plex Mono", monospace;2253}22542255.peach-feedback-result {2256  margin: 8px 0 0;2257  font-size: 0.6875rem;2258  font-family: "IBM Plex Mono", monospace;2259}2260.peach-feedback-result--ok { color: var(--peach-sync-ok); }2261.peach-feedback-result--err { color: var(--peach-breach); }22622263.peach-feedback-submit {2264  width: 100%;2265  margin-top: 12px;2266  justify-content: center;2267}22682269.peach-feedback-anon {2270  margin: 8px 0 0;2271  font-size: 0.625rem;2272  color: var(--peach-t2);2273  text-align: center;2274}22752276.peach-feedback-thanks {2277  margin: auto 0;2278  padding: 18px 14px;2279  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);2280  border-radius: 8px;2281  background:2282    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),2283    rgba(0, 0, 0, 0.18);2284  color: var(--peach-t1);2285  text-align: center;2286}22872288.peach-feedback-thanks p {2289  margin: 0;2290  font-size: 0.75rem;2291  line-height: 1.5;2292}22932294.peach-feedback-thanks-title {2295  color: var(--peach-t0);2296  font-family: "Cormorant Garamond", serif;2297  font-size: 1.375rem !important;2298  line-height: 1.1 !important;2299  margin-bottom: 8px !important;2300}23012302.peach-passkey-badge {2303  margin-left: 8px;2304  font-size: 0.625rem;2305  letter-spacing: 0.06em;2306  text-transform: uppercase;2307  color: var(--peach-t2);2308  font-family: var(--font-ui);2309  vertical-align: middle;2310}23112312.peach-passkey-delete-btn {2313  color: var(--peach-breach);2314  border-color: rgba(229, 85, 85, 0.25);2315}23162317.peach-passkey-delete-confirm {2318  display: flex;2319  align-items: center;2320  gap: 8px;2321  padding: 8px 10px;2322  background: rgba(229, 85, 85, 0.06);2323  border: 1px solid rgba(229, 85, 85, 0.2);2324  border-radius: 6px;2325}23262327.peach-passkey-delete-confirm-copy {2328  flex: 1;2329  font-size: 0.6875rem;2330  color: var(--peach-t1);2331}23322333.peach-passkey-delete-btn--confirm {2334  color: var(--peach-breach);2335  border-color: rgba(229, 85, 85, 0.4);2336}23372338.peach-passkey-activity {2339  flex-direction: column;2340  align-items: flex-start;2341  gap: 4px;2342}23432344.peach-passkey-meta {2345  font-size: 0.6875rem;2346  color: var(--peach-t2);2347}23482349.peach-passkey-actions {2350  position: relative;2351  z-index: 1;2352  margin-top: 14px;2353  display: flex;2354  flex-direction: column;2355  gap: 8px;2356}23572358.peach-passkey-approval {2359  display: flex;2360  flex-direction: column;2361  align-items: center;2362  padding: 16px 20px 14px;2363  gap: 8px;2364  text-align: center;2365}23662367.peach-passkey-approval-icon {2368  width: 36px;2369  height: 36px;2370  border-radius: 10px;2371  background: var(--peach-s2);2372  border: 1px solid var(--peach-t3);2373  display: flex;2374  align-items: center;2375  justify-content: center;2376  flex-shrink: 0;2377  color: var(--peach-accent);2378}23792380.peach-passkey-approval-icon img,2381.peach-passkey-approval-icon svg {2382  width: 22px;2383  height: 22px;2384  border-radius: 5px;2385}23862387.peach-passkey-approval-rp {2388  font-family: var(--font-ui);2389  font-size: 0.75rem;2390  color: var(--peach-t2);2391  letter-spacing: 0.03em;2392}23932394.peach-passkey-approval-action {2395  font-family: var(--font-display);2396  font-style: italic;2397  font-weight: 300;2398  font-size: 18px;2399  color: var(--peach-t0);2400  line-height: 1.1;2401  margin: 1px 0;2402}24032404.peach-passkey-approval-user {2405  font-family: var(--font-mono);2406  font-size: 0.6875rem;2407  color: var(--peach-t1);2408  background: var(--peach-s2);2409  border: 1px solid var(--peach-t3);2410  border-radius: 4px;2411  padding: 3px 8px;2412}24132414.peach-passkey-approval-notice {2415  font-size: 0.625rem;2416  color: var(--peach-t2);2417  line-height: 1.5;2418  max-width: 220px;2419}24202421.peach-passkey-approval-actions {2422  display: flex;2423  gap: 8px;2424  width: 100%;2425  margin-top: 6px;2426}24272428.peach-passkey-approval-actions .peach-btn {2429  flex: 1;2430}24312432/* ── Inline generator drawer ── */2433.peach-generator-drawer {2434  display: grid;2435  grid-template-rows: 0fr;2436  transition: grid-template-rows 320ms var(--peach-curve-arrival);2437  overflow: hidden;2438}2439.peach-generator-drawer.is-open {2440  grid-template-rows: 1fr;2441}2442.peach-generator-drawer-inner {2443  min-height: 0;2444  overflow: hidden;2445}2446.peach-generator-drawer-content {2447  border-top: 1px solid var(--peach-t3);2448  padding: 8px 0 4px;2449  display: flex;2450  flex-direction: column;2451  gap: 8px;2452}24532454/* ── Compact generator (inside entry edit) ── */2455.peach-generator-drawer-content--compact {2456  border-top: 1px solid var(--peach-t3);2457  padding: 8px 0 2px;2458  gap: 7px;2459}2460.peach-pwgen-compact-display-row {2461  display: flex;2462  align-items: center;2463  gap: 6px;2464}2465.peach-pwgen-compact-output {2466  flex: 1;2467  min-width: 0;2468  font-family: "IBM Plex Mono", monospace;2469  font-size: 0.6875rem;2470  font-weight: 400;2471  letter-spacing: 0.04em;2472  color: var(--peach-t0);2473  background: rgba(240, 232, 216, 0.04);2474  border: 1px solid var(--peach-t3);2475  border-radius: 5px;2476  padding: 5px 8px;2477  line-height: 1.5;2478  outline: none;2479  transition: border-color 120ms ease;2480}24812482.peach-pwgen-compact-output:focus {2483  border-color: var(--peach-t1);2484}2485.peach-pwgen-compact-controls {2486  display: flex;2487  align-items: center;2488  gap: 6px;2489}2490.peach-pwgen-compact-slider {2491  flex: 1;2492  min-width: 0;2493  height: 2px !important;2494}2495.peach-pwgen-compact-controls .peach-pwgen-len-num {2496  flex-shrink: 0;2497  min-width: 18px;2498  text-align: right;2499}2500.peach-pwgen-compact-pills {2501  display: flex;2502  gap: 3px;2503  flex-shrink: 0;2504}2505.peach-pwgen-compact-pills .peach-pwgen-pill {2506  padding: 2px 7px;2507  font-size: 0.5rem;2508}2509.peach-pwgen-compact-use {2510  flex-shrink: 0;2511  font-size: 0.625rem !important;2512  padding: 3px 9px !important;2513  min-height: 22px !important;2514  border-radius: 5px !important;2515}25162517/* ── Password edit row (input + eye toggle side-by-side) ── */2518.peach-password-edit-row {2519  display: flex;2520  align-items: center;2521  gap: 6px;2522}2523.peach-password-edit-row .peach-inline-input {2524  flex: 1;2525  min-width: 0;2526}25272528/* ── Generate toggle link ── */2529.peach-generate-toggle-link {2530  display: inline-flex;2531  align-items: center;2532  gap: 5px;2533  background: none;2534  border: none;2535  padding: 0;2536  cursor: pointer;2537  font-family: "IBM Plex Mono", monospace;2538  font-size: 0.625rem;2539  color: var(--peach-t2);2540  letter-spacing: 0.04em;2541  transition: color 120ms ease;2542  align-self: flex-start;2543}2544.peach-generate-toggle-link:hover {2545  color: var(--peach-accent);2546}25472548/* Holds the generate + history toggle links on one row under the editor. */2549.peach-password-edit-links {2550  display: flex;2551  align-items: center;2552  gap: 14px;2553  flex-wrap: wrap;2554}25552556/* ── Past-password history list ── */2557.peach-password-history {2558  display: grid;2559  gap: 4px;2560  margin-top: 2px;2561  max-height: 168px;2562  overflow-y: auto;2563  scrollbar-width: thin;2564}2565.peach-history-row {2566  display: flex;2567  align-items: center;2568  justify-content: space-between;2569  gap: 8px;2570  padding: 5px 7px;2571  border-radius: 7px;2572  background: color-mix(in srgb, var(--peach-accent) 5%, transparent);2573  border: 1px solid color-mix(in srgb, var(--peach-accent) 9%, transparent);2574}2575.peach-history-main {2576  display: flex;2577  flex-direction: column;2578  gap: 1px;2579  min-width: 0;2580  flex: 1;2581}2582.peach-history-pw {2583  font-family: "IBM Plex Mono", monospace;2584  font-size: 0.6875rem;2585  color: var(--peach-t1);2586  white-space: nowrap;2587  overflow: hidden;2588  text-overflow: ellipsis;2589}2590.peach-history-pw .peach-password-mask {2591  letter-spacing: 0.08em;2592  color: var(--peach-t2);2593}2594.peach-history-age {2595  font-family: "IBM Plex Mono", monospace;2596  font-size: 0.5625rem;2597  color: var(--peach-t3, var(--peach-t2));2598  letter-spacing: 0.03em;2599}2600.peach-history-actions {2601  display: flex;2602  align-items: center;2603  gap: 2px;2604  flex-shrink: 0;2605}2606.peach-history-use {2607  font-family: "IBM Plex Mono", monospace;2608  font-size: 0.5625rem;2609  letter-spacing: 0.05em;2610  padding: 3px 7px;2611}2612.peach-history-empty {2613  font-family: "IBM Plex Mono", monospace;2614  font-size: 0.625rem;2615  line-height: 1.45;2616  color: var(--peach-t2);2617  padding: 6px 8px;2618  border-radius: 7px;2619  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);2620  border: 1px solid color-mix(in srgb, var(--peach-accent) 8%, transparent);2621}26222623/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2624.peach-entry-body {2625  flex: 1;2626  overflow-y: auto;2627  overflow-x: hidden;2628  scrollbar-width: none;2629  -ms-overflow-style: none;2630  overscroll-behavior: contain;2631  display: grid;2632  gap: 10px;2633  align-content: start;2634  padding: 10px 20px 14px;2635  min-width: 0;2636  min-height: 0;2637}2638.peach-entry-body::-webkit-scrollbar { display: none; }26392640/* Type-toggle pills + inline note toolbar */2641.peach-new-type-row {2642  display: flex;2643  align-items: center;2644  gap: 6px;2645  margin-bottom: 2px;2646}2647.peach-new-type-btn {2648  background: transparent;2649  border: 1px solid var(--peach-t3);2650  border-radius: 12px;2651  padding: 3px 10px;2652  font-family: "IBM Plex Mono", monospace;2653  font-size: 0.5625rem;2654  letter-spacing: 0.12em;2655  text-transform: uppercase;2656  color: var(--peach-t2);2657  cursor: pointer;2658  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2659}2660.peach-new-type-btn.is-active {2661  color: var(--peach-t0);2662  border-color: var(--peach-accent);2663  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2664}2665.peach-new-type-btn:not(.is-active):hover {2666  color: var(--peach-t1);2667  border-color: var(--peach-t2);2668}26692670/* Editable title */2671.peach-new-title-wrap { margin: 0 0 2px; }2672.peach-new-title-input {2673  background: transparent;2674  border: none;2675  outline: none;2676  width: 100%;2677  color: var(--peach-t0);2678  font-family: var(--font-display);2679  font-style: italic;2680  font-weight: 400;2681  font-size: 40px;2682  line-height: 0.95;2683  caret-color: var(--peach-accent);2684}2685.peach-new-title-input::placeholder { color: var(--peach-t2); }26862687/* Editable domain field */2688.peach-domain-edit-row {2689  display: flex;2690  align-items: center;2691  gap: 6px;2692}26932694.peach-domain-edit-row .peach-domain-value--edit {2695  flex: 1;2696  width: 0;2697}26982699.peach-domain-url-btn {2700  flex-shrink: 0;2701  background: transparent;2702  border: none;2703  cursor: pointer;2704  color: var(--peach-t3);2705  padding: 2px 3px;2706  display: flex;2707  align-items: center;2708  line-height: 0;2709  border-radius: 3px;2710  transition: color 120ms ease;2711}27122713.peach-domain-url-btn:hover {2714  color: var(--peach-accent);2715}27162717.peach-domain-value--edit {2718  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2719  font-size: 0.625rem;2720  font-style: italic;2721  letter-spacing: 0.12em;2722  color: var(--peach-t1);2723  background: transparent;2724  border: none;2725  border-bottom: 1px solid var(--peach-t3);2726  outline: none;2727  width: 100%;2728  padding: 2px 0;2729  caret-color: var(--peach-accent);2730  transition: border-color 140ms ease, color 140ms ease;2731}2732.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2733.peach-domain-value--edit:focus {2734  border-bottom-color: rgba(240, 232, 216, 0.28);2735  color: var(--peach-t0);2736}27372738/* Editable field values (username, password, totp) */2739.peach-field-value--edit {2740  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2741  font-size: 0.8125rem;2742  color: var(--peach-t0);2743  background: transparent;2744  border: none;2745  border-bottom: 1px solid var(--peach-t3);2746  outline: none;2747  flex: 1;2748  min-width: 0;2749  padding: 3px 0;2750  caret-color: var(--peach-accent);2751  transition: border-color 140ms ease, color 140ms ease;2752}2753.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2754.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2755.peach-field-value--edit:focus {2756  border-bottom-color: rgba(240, 232, 216, 0.28);2757  color: var(--peach-t0);2758}27592760/* "+ add optional field" links */2761.peach-entry-add-links {2762  display: flex;2763  gap: 12px;2764  flex-wrap: wrap;2765  margin-top: -2px;2766}2767.peach-add-field-link {2768  background: transparent;2769  border: none;2770  padding: 0;2771  cursor: pointer;2772  font-family: "IBM Plex Mono", monospace;2773  font-size: 0.5625rem;2774  letter-spacing: 0.1em;2775  text-transform: uppercase;2776  color: var(--peach-t2);2777  transition: color 140ms ease;2778}2779.peach-add-field-link:hover { color: var(--peach-accent); }27802781/* ── New entry form (legacy classes) ────────────────────────────────── */2782.peach-new-body {2783  flex: 1;2784  overflow-y: auto;2785  padding: 10px 20px 14px;2786}2787.peach-new-name-input {2788  background: transparent;2789  border: none;2790  outline: none;2791  width: 100%;2792  color: var(--peach-t0);2793  font-family: var(--font-display);2794  font-style: italic;2795  font-weight: 400;2796  font-size: 40px;2797  line-height: 0.95;2798  caret-color: var(--peach-accent);2799}2800.peach-new-name-input::placeholder { color: var(--peach-t2); }2801.peach-new-field-input {2802  background: transparent;2803  border: none;2804  outline: none;2805  flex: 1;2806  min-width: 0;2807  caret-color: var(--peach-accent);2808}2809.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }28102811/* ── Canary card ── */2812.peach-canary-card {2813  border: 1px solid rgba(217, 160, 48, 0.2);2814  background: rgba(217, 160, 48, 0.03);2815  border-radius: 8px;2816  padding: 12px;2817}28182819.peach-canary-settings-header {2820  display: flex;2821  align-items: center;2822  justify-content: space-between;2823  cursor: pointer;2824  user-select: none;2825}28262827.peach-canary-card .peach-label {2828  color: rgba(217, 160, 48, 0.85);2829}28302831.peach-canary-card .peach-new-field-input {2832  border-color: rgba(217, 160, 48, 0.25);2833}28342835.peach-canary-card .peach-new-field-input:focus {2836  border-color: rgba(217, 160, 48, 0.5);2837}28382839.peach-canary-body {2840  margin-top: 12px;2841  display: flex;2842  flex-direction: column;2843  gap: 10px;2844}28452846.peach-canary-explainer {2847  display: flex;2848  gap: 10px;2849  padding: 10px 12px;2850  border-radius: 10px;2851  background: rgba(217, 160, 48, 0.06);2852  border: 1px solid rgba(217, 160, 48, 0.22);2853  margin-bottom: 4px;2854}28552856.peach-canary-explainer-icon {2857  font-size: 1rem;2858  flex-shrink: 0;2859  line-height: 1.2;2860}28612862.peach-canary-explainer-title {2863  font-family: var(--font-ui);2864  font-size: 0.6875rem;2865  font-weight: 500;2866  color: rgba(217, 160, 48, 0.9);2867  margin: 0 0 3px;2868}28692870.peach-canary-explainer-copy {2871  font-family: var(--font-ui);2872  font-size: 0.625rem;2873  color: var(--peach-t2);2874  line-height: 1.55;2875  margin: 0;2876}28772878.peach-canary-hint {2879  font-size: 0.625rem;2880  color: var(--peach-t2);2881  font-family: Inter, system-ui, sans-serif;2882  line-height: 1.5;2883  margin-top: 4px;2884}28852886.peach-canary-actions-row {2887  display: flex;2888  align-items: center;2889  gap: 8px;2890}28912892.peach-canary-test-btn {2893  border-color: rgba(217, 160, 48, 0.3);2894  color: rgba(217, 160, 48, 0.85);2895}28962897.peach-canary-test-result {2898  font-size: 0.625rem;2899  font-family: Inter, system-ui, sans-serif;2900}29012902.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2903.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }29042905.peach-canary-badge {2906  display: flex;2907  position: relative;2908  z-index: 1;2909  align-items: center;2910  gap: 5px;2911  padding: 4px 10px;2912  background: rgba(217, 160, 48, 0.12);2913  border: 1px solid rgba(217, 160, 48, 0.35);2914  border-radius: 6px;2915  margin-bottom: 6px;2916  width: fit-content;2917}29182919.peach-canary-badge-label {2920  font-size: 0.625rem;2921  letter-spacing: 0.06em;2922  color: rgba(217, 160, 48, 0.9);2923  font-family: var(--font-ui);2924  text-transform: uppercase;2925}29262927.peach-canary-badge-icon {2928  font-size: 0.6875rem;2929}29302931.peach-canary-suppress-row {2932  display: flex;2933  align-items: center;2934  gap: 8px;2935  padding: 6px 10px;2936  background: rgba(217, 160, 48, 0.08);2937  border-radius: 6px;2938  margin-bottom: 8px;2939}29402941.peach-canary-suppress-label {2942  font-size: 0.6875rem;2943  color: rgba(217, 160, 48, 0.85);2944  cursor: pointer;2945  font-family: var(--font-ui);2946  letter-spacing: 0.04em;2947}29482949.peach-regen-panel {2950  position: relative;2951  z-index: 1;2952  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2953  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2954  border-radius: 8px;2955  padding: 12px;2956  margin-bottom: 8px;2957}29582959.peach-regen-panel-header {2960  display: flex;2961  align-items: center;2962  justify-content: space-between;2963  margin-bottom: 10px;2964}29652966.peach-regen-panel-title {2967  font-size: 0.6875rem;2968  font-weight: 600;2969  letter-spacing: 0.06em;2970  text-transform: uppercase;2971  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2972}29732974.peach-regen-output {2975  background: rgba(0, 0, 0, 0.2);2976  border-radius: 6px;2977  padding: 10px;2978  margin-bottom: 10px;2979  font-family: var(--font-mono);2980  font-size: 0.8125rem;2981  word-break: break-all;2982  color: var(--peach-t1);2983}29842985.peach-regen-actions {2986  display: flex;2987  gap: 6px;2988}29892990.peach-regen-actions--spaced {2991  margin-bottom: 8px;2992}29932994.peach-regen-action-grow {2995  flex: 1;2996}29972998.peach-regen-copy-btn {2999  padding: 0 8px;3000}30013002.peach-regen-success {3003  position: relative;3004  z-index: 1;3005  background: rgba(40, 180, 80, 0.1);3006  border: 1px solid rgba(40, 180, 80, 0.3);3007  border-radius: 8px;3008  padding: 10px 12px;3009  margin-bottom: 8px;3010  display: flex;3011  align-items: center;3012  gap: 8px;3013  font-size: 0.6875rem;3014  color: rgba(40, 180, 80, 0.9);3015}30163017/* ── Note editor overlay ── */3018.peach-note-editor {3019  position: absolute;3020  inset: 0;3021  z-index: 200;3022  display: flex;3023  flex-direction: column;3024  background:3025    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),3026    var(--peach-bg);3027  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;3028}30293030.peach-note-editor-header {3031  display: flex;3032  align-items: center;3033  gap: 10px;3034  padding: 14px 16px 10px;3035  border-bottom: 1px solid var(--peach-t3);3036  flex-shrink: 0;3037}30383039.peach-note-editor-back {3040  background: transparent;3041  border: none;3042  cursor: pointer;3043  color: var(--peach-t2);3044  padding: 4px 6px;3045  border-radius: 6px;3046  display: flex;3047  align-items: center;3048  transition: color 120ms ease, background 120ms ease;3049  flex-shrink: 0;3050}3051.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }30523053.peach-note-editor-label {3054  flex: 1;3055  font-family: var(--font-display);3056  font-style: italic;3057  font-size: 0.9375rem;3058  color: var(--peach-t1);3059  letter-spacing: 0.02em;3060}30613062.peach-note-editor-save-btn {3063  background: transparent;3064  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);3065  border-radius: 8px;3066  color: var(--peach-accent);3067  font-family: "IBM Plex Mono", monospace;3068  font-size: 0.625rem;3069  letter-spacing: 0.06em;3070  text-transform: uppercase;3071  padding: 3px 10px;3072  cursor: pointer;3073  transition: background 120ms ease, border-color 120ms ease;3074}3075.peach-note-editor-save-btn:hover:not(:disabled) {3076  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3077  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3078}3079.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }30803081.peach-note-toolbar {3082  display: flex;3083  align-items: center;3084  gap: 3px;3085  padding: 6px 14px 5px;3086  border-bottom: 1px solid var(--peach-t3);3087  flex-shrink: 0;3088}30893090.peach-note-tool-btn {3091  background: transparent;3092  border: 1px solid transparent;3093  border-radius: 5px;3094  color: var(--peach-t2);3095  font-family: "IBM Plex Mono", monospace;3096  font-size: 0.625rem;3097  letter-spacing: 0.04em;3098  padding: 2px 8px;3099  cursor: pointer;3100  line-height: 1.6;3101  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;3102}3103.peach-note-tool-btn:hover {3104  background: var(--peach-t4);3105  color: var(--peach-t0);3106  border-color: var(--peach-t3);3107}31083109.peach-note-tool-icon {3110  padding: 3px 7px;3111  display: inline-flex;3112  align-items: center;3113  justify-content: center;3114}31153116.peach-note-tool-divider {3117  width: 1px;3118  height: 14px;3119  background: var(--peach-t3);3120  margin: 0 4px;3121  flex-shrink: 0;3122}31233124.peach-note-editor-body {3125  flex: 1;3126  overflow-y: auto;3127  padding: 16px 20px 20px;3128  outline: none;3129  font-family: var(--font-display);3130  font-size: 1rem;3131  line-height: 1.75;3132  color: var(--peach-t0);3133  scrollbar-width: none;3134  word-break: break-word;3135}3136.peach-note-editor-body:empty::before {3137  content: "write your note…";3138  color: var(--peach-t3);3139  font-style: italic;3140  pointer-events: none;3141}31423143/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */3144.peach-note-editor-inline {3145  display: flex;3146  flex-direction: column;3147  flex: 1;3148  min-height: 0;3149}3150.peach-note-editor-body--inline {3151  flex: 1;3152  min-height: 0;3153  font-size: 0.9375rem;3154  padding: 10px 20px 14px;3155}31563157/* Full-width toolbar row inside the body (Add.tsx note type).3158   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */3159.peach-note-toolbar-body {3160  display: flex;3161  align-items: center;3162  gap: 3px;3163  padding: 5px 20px 4px;3164  margin: 2px -20px 0;3165  border-bottom: 1px solid var(--peach-t3);3166  flex-shrink: 0;3167}31683169/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)3170   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn3171   and .peach-note-tool-divider button-level styles. */3172.peach-note-toolbar-inline {3173  display: flex;3174  align-items: center;3175  gap: 3px;3176  margin-left: auto;3177  padding-left: 10px;3178  border-left: 1px solid var(--peach-t3);3179  min-height: 22px;3180}31813182/* Entry.tsx toolbar row (no tabs, toolbar only) */3183.peach-entry-note-toolbar-row {3184  display: flex;3185  align-items: center;3186  margin: 4px 0 6px;3187  position: relative;3188  z-index: 1;3189}3190.peach-entry-note-toolbar-row .peach-note-toolbar-inline {3191  border-left: none;3192  padding-left: 0;3193  margin-left: 0;3194}31953196/* Note body — fills available vertical space in Add.tsx and Entry.tsx */3197.peach-note-body {3198  display: flex;3199  flex-direction: column;3200  flex: 1;3201  min-height: 0;3202  margin: 4px 0 0;3203}3204.peach-entry-body--new .peach-note-body {3205  margin: 8px -20px 0;3206}32073208/* Add.tsx body is a grid by default; swap to a flex column when a note is3209   active so the note body can stretch and pin the tags row to the bottom. */3210.peach-entry-body--new:has(.peach-note-body) {3211  display: flex;3212  flex-direction: column;3213}32143215/* Rich content element styles (editor + display) */3216.peach-note-editor-body h2,3217.peach-note-content h2 {3218  font-family: var(--font-display);3219  font-size: 20px;3220  font-weight: 600;3221  font-style: italic;3222  color: var(--peach-t0);3223  margin: 6px 0 2px;3224  line-height: 1.3;3225}3226.peach-note-editor-body ul,3227.peach-note-content ul {3228  padding-left: 18px;3229  margin: 3px 0;3230  list-style: disc;3231}3232.peach-note-editor-body ol,3233.peach-note-content ol {3234  padding-left: 18px;3235  margin: 3px 0;3236  list-style: decimal;3237}3238.peach-note-editor-body li,3239.peach-note-content li { margin: 2px 0; }3240.peach-note-editor-body hr,3241.peach-note-content hr {3242  border: none;3243  border-top: 1px solid var(--peach-t3);3244  margin: 10px 0;3245}32463247/* font size elements from execCommand */3248.peach-note-editor-body font[size="1"],3249.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }3250.peach-note-editor-body font[size="2"],3251.peach-note-content font[size="2"] { font-size: 0.8125rem; }3252.peach-note-editor-body font[size="3"],3253.peach-note-content font[size="3"] { font-size: 1rem; }3254.peach-note-editor-body font[size="4"],3255.peach-note-content font[size="4"] { font-size: 20px; }3256.peach-note-editor-body font[size="5"],3257.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }32583259/* bold / italic inside the editor and note display */3260.peach-note-editor-body b, .peach-note-editor-body strong,3261.peach-note-content b, .peach-note-content strong { font-weight: 700; }3262.peach-note-editor-body em, .peach-note-editor-body i,3263.peach-note-content em, .peach-note-content i { font-style: italic; }32643265/* note display — rendered HTML, no pre-wrap */3266.peach-note-content {3267  overflow: auto;3268  max-height: 340px;3269  word-break: break-word;3270}32713272/* ── Note textarea ── */3273.peach-note-textarea {3274  width: 100%;3275  min-height: 180px;3276  max-height: 280px;3277  resize: vertical;3278  background: var(--peach-t4);3279  border: 1px solid var(--peach-t3);3280  border-radius: 8px;3281  padding: 10px 12px;3282  font-family: "IBM Plex Mono", monospace;3283  font-size: 0.75rem;3284  line-height: 1.7;3285  color: var(--peach-t1);3286  outline: none;3287  transition: border-color 150ms ease;3288}32893290.peach-note-textarea:focus {3291  border-color: var(--peach-t2);3292}32933294.peach-note-char-count {3295  font-family: "IBM Plex Mono", monospace;3296  font-size: 0.5625rem;3297  color: var(--peach-t3);3298  text-align: right;3299  margin-top: 4px;3300  letter-spacing: 0.1em;3301}33023303/* ── Field input baseline ── */3304.peach-new-field-input {3305  width: 100%;3306  background: transparent;3307  border: none;3308  border-bottom: 1px solid var(--peach-t3);3309  padding: 4px 0;3310  color: var(--peach-t1);3311  font-family: "IBM Plex Mono", monospace;3312  font-size: 0.8125rem;3313  outline: none;3314  transition: border-color 150ms ease;3315}33163317.peach-new-field-input:focus {3318  border-bottom-color: var(--peach-t0);3319  color: var(--peach-t0);3320}33213322.peach-new-name-input {3323  width: 100%;3324  background: transparent;3325  border: none;3326  border-bottom: 1px solid var(--peach-t3);3327  padding: 6px 0;3328  font-family: var(--font-display);3329  font-style: italic;3330  font-size: 28px;3331  color: var(--peach-t0);3332  outline: none;3333  transition: border-color 150ms ease;3334}33353336.peach-new-name-input:focus {3337  border-bottom-color: var(--peach-t1);3338}33393340.peach-new-name-input::placeholder {3341  color: var(--peach-t2);3342  font-style: italic;3343}33443345.peach-new-field-input::placeholder {3346  color: var(--peach-t3);3347}33483349/* ── Demo entrance animation ── */3350#hd-shell {3351  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3352}3353@keyframes hd-shell-enter {3354  from { opacity: 0; transform: scale(0.96) translateY(16px); }3355  to   { opacity: 1; transform: scale(1) translateY(0); }3356}33573358/* ── Keyframes ── */3359@keyframes peach-char-enter {3360  from { opacity: 0; transform: translateY(0.22em); }3361  to   { opacity: 1; transform: translateY(0); }3362}3363@keyframes peach-content-enter {3364  from { opacity: 0.96; transform: translateY(4px); }3365  to   { opacity: 1; transform: translateY(0); }3366}3367@keyframes peach-content-exit {3368  from { opacity: 1; transform: translateY(0); }3369  to   { opacity: 0.92; transform: translateY(-3px); }3370}3371@keyframes peach-screen-enter {3372  from { opacity: 0; transform: translateY(14px); }3373  to   { opacity: 1; transform: translateY(0); }3374}3375@keyframes peach-shell-fade-in {3376  from { opacity: 0; }3377  to   { opacity: 1; }3378}3379@keyframes peach-veil-in {3380  from { opacity: 0; }3381  to   { opacity: 1; }3382}3383@keyframes peach-lock-settle {3384  0%   { transform: scale(0.9); }3385  65%  { transform: scale(1.08); }3386  100% { transform: scale(1); }3387}3388@keyframes peach-copy-confirm {3389  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3390  to   { color: var(--peach-accent); border-color: color-mix(in srgb, var(--peach-accent) 42%, transparent); background-color: color-mix(in srgb, var(--peach-accent) 9%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--peach-accent) 22%, transparent), inset 0 0 18px color-mix(in srgb, var(--peach-accent) 12%, transparent); }3391}3392@keyframes peach-copy-retreat {3393  from { color: var(--peach-accent); border-color: color-mix(in srgb, var(--peach-accent) 42%, transparent); background-color: color-mix(in srgb, var(--peach-accent) 9%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--peach-accent) 22%, transparent), inset 0 0 18px color-mix(in srgb, var(--peach-accent) 12%, transparent); }3394  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3395}3396@keyframes peach-copy-flood {3397  from { opacity: 0; transform: scaleX(0.15); }3398  to   { opacity: 1; transform: scaleX(1); }3399}3400@keyframes peach-copy-icon-settle {3401  from  { transform: scale(0.84); }3402  70%   { transform: scale(1.08); }3403  to    { transform: scale(1); }3404}3405@keyframes peach-copy-sheen-retreat {3406  from { opacity: 1; transform: scaleX(1); }3407  to   { opacity: 0; transform: scaleX(0.15); }3408}3409@keyframes peach-copy-drain {3410  from { width: 100%; }3411  to   { width: 0; }3412}3413@keyframes peach-shake {3414  0%, 100% { transform: translateX(0); }3415  20%      { transform: translateX(-6px); }3416  40%      { transform: translateX(6px); }3417  60%      { transform: translateX(-4px); }3418  80%      { transform: translateX(4px); }3419}34203421@keyframes pip-pulse {3422  0% { transform: scale(1); }3423  40% { transform: scale(2.2); }3424  100% { transform: scale(1); }3425}342634273428/* ── Password generator ── */3429.peach-pwgen-body {3430  flex: 1; overflow-y: auto;3431  display: flex; flex-direction: column;3432}3433.peach-policy-badge {3434  display: flex; align-items: center;3435  padding: 6px 20px 0;3436  font-size: 0.625rem; font-family: Inter, sans-serif;3437  color: var(--peach-t2); letter-spacing: 0.04em;3438}3439.peach-pwgen-display {3440  padding: 14px 20px 12px;3441  border-bottom: 1px solid var(--peach-t3);3442  display: flex; align-items: flex-start; gap: 10px;3443}3444.peach-pwgen-display-row {3445  display: flex;3446  align-items: flex-start;3447  gap: 8px;3448  padding-bottom: 8px;3449  border-bottom: 1px solid var(--peach-t3);3450}3451.peach-pwgen-output {3452  flex: 1; min-width: 0; margin: 0;3453  font-family: "IBM Plex Mono", monospace;3454  font-size: 0.8125rem; color: var(--peach-t0);3455  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3456  white-space: normal;3457  padding: 10px 12px;3458  background: var(--peach-t4);3459  border-radius: 6px;3460  min-height: 36px;3461}3462.peach-pwgen-output-display {3463  flex: 1;3464  min-width: 0;3465  margin: 0;3466  font-family: var(--font-display);3467  font-style: italic;3468  font-weight: 300;3469  font-size: 32px;3470  line-height: 1.05;3471  color: var(--peach-t0);3472  word-break: break-all;3473  overflow-wrap: break-word;3474  white-space: normal;3475  letter-spacing: 0.02em;3476}3477.peach-pwgen-display-actions {3478  display: flex;3479  flex-direction: column;3480  gap: 4px;3481  flex-shrink: 0;3482  margin-top: 2px;3483}3484.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3485.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3486.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3487.peach-pwgen-len-num {3488  font-family: "IBM Plex Mono", monospace;3489  font-size: 0.75rem; color: var(--peach-accent);3490}3491.peach-pwgen-len-num--edit {3492  cursor: text;3493  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3494}3495.peach-pwgen-len-input {3496  font-family: "IBM Plex Mono", monospace;3497  font-size: 0.75rem;3498  color: var(--peach-accent);3499  background: transparent;3500  border: none;3501  border-bottom: 1px solid var(--peach-accent);3502  outline: none;3503  width: 32px;3504  text-align: right;3505  padding: 0;3506}3507.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3508.peach-pwgen-toggles { display: flex; flex-direction: column; }3509.peach-pwgen-charset-pills {3510  display: flex;3511  gap: 6px;3512  flex-wrap: wrap;3513}3514.peach-pwgen-pill {3515  padding: 4px 11px;3516  border-radius: 999px;3517  border: 1px solid var(--peach-t3);3518  background: transparent;3519  color: var(--peach-t2);3520  font-family: "IBM Plex Mono", monospace;3521  font-size: 0.5625rem;3522  letter-spacing: 0.08em;3523  cursor: pointer;3524  transition: all 150ms ease;3525}3526.peach-pwgen-pill.is-on {3527  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3528  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3529  color: var(--peach-accent);3530}3531.peach-pwgen-pill:not(.is-on):hover {3532  color: var(--peach-t1);3533  border-color: var(--peach-t2);3534}3535.peach-pwgen-use-btn {3536  width: 100%;3537  min-height: 34px;3538  border-radius: 8px;3539  margin-top: 2px;3540}3541.peach-generator-constraint-note {3542  font-family: 'IBM Plex Mono', monospace;3543  font-size: 10px;3544  color: var(--peach-t3);3545  letter-spacing: 0.04em;3546  margin: 0;3547  transition: opacity 200ms ease;3548}3549.peach-pwgen-toggle-row {3550  display: flex; align-items: center; justify-content: space-between;3551  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3552}3553.peach-pwgen-toggle-row:last-child { border-bottom: none; }3554.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }35553556/* Peach popup should not expose native scrollbars on internal panels. */3557.peach-settings-body,3558.peach-new-body,3559.peach-pwgen-body,3560.lock-screen,3561.peach-import-preview {3562  scrollbar-width: none;3563  -ms-overflow-style: none;3564  overscroll-behavior: contain;3565}3566.peach-settings-body::-webkit-scrollbar,3567.peach-new-body::-webkit-scrollbar,3568.peach-pwgen-body::-webkit-scrollbar,3569.lock-screen::-webkit-scrollbar,3570.peach-import-preview::-webkit-scrollbar {3571  width: 0;3572  height: 0;3573  display: none;3574}35753576.lock-screen {3577  height: 100%;3578  min-height: 100%;3579  overflow-y: auto;3580  padding: 18px 18px 16px;3581  gap: 14px;3582  grid-template-rows: auto auto auto 1fr auto;3583  align-content: stretch;3584  position: relative;3585  isolation: isolate;3586}3587.peach-screen.lock-screen--vault-stage {3588  display: flex;3589  flex-direction: column;3590  justify-content: flex-start;3591  gap: 18px;3592  padding: 20px 18px 18px;3593  overflow: hidden;3594}3595.peach-screen.lock-screen--vault-stage .peach-lock-panel {3596  margin-top: 0;3597}3598.lock-screen--onboarding {3599  display: flex;3600  flex-direction: column;3601  gap: 12px;3602  justify-content: flex-start;3603}36043605.lock-screen::before {3606  content: "";3607  position: absolute;3608  inset: 12px 18px auto auto;3609  width: 160px;3610  height: 160px;3611  border-radius: 999px;3612  background:3613    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 42%, transparent 72%);3614  filter: blur(6px);3615  opacity: 0.7;3616  pointer-events: none;3617  z-index: 0;3618}36193620.peach-lock-rune-string {3621  flex: 1;3622  display: flex;3623  align-items: center;3624  justify-content: center;3625  gap: 6px;3626  font-family: PeachScript, monospace;3627  font-size: 0.8125rem;3628  letter-spacing: 0.05em;3629  pointer-events: none;3630  user-select: none;3631  position: relative;3632  z-index: 1;3633}36343635.peach-lock-rune-string span {3636  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3637  text-shadow:3638    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3639    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3640  transition: color 0.9s ease, text-shadow 0.9s ease;3641}36423643.peach-lock-rune-string span.is-glowing {3644  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3645  text-shadow:3646    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3647    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3648}36493650.lock-screen-header {3651  display: flex;3652  align-items: center;3653  justify-content: space-between;3654  position: relative;3655  z-index: 1;3656}36573658.lock-password-input.shake {3659  animation: peach-shake 300ms ease-in-out;3660}36613662.peach-hint-error {3663  color: rgba(220, 80, 60, 0.92);3664}36653666.peach-onboarding-headline {3667  margin: 0;3668  font-family: var(--font-display);3669  font-size: 35px;3670  line-height: 0.88;3671  font-style: italic;3672  font-weight: 400;3673  max-width: 252px;3674}36753676.peach-lock-copy {3677  display: grid;3678  gap: 8px;3679  position: relative;3680  z-index: 1;3681}36823683.peach-lock-copy--onboarding {3684  gap: 10px;3685}36863687.peach-lock-hero {3688  position: relative;3689  z-index: 1;3690  display: grid;3691  gap: 8px;3692  min-height: 0;3693  padding: 4px 2px 0;3694  border: none;3695  border-radius: 0;3696  background: transparent;3697  box-shadow: none;3698}3699.peach-lock-hero-art {3700  position: absolute;3701  right: -8px;3702  top: -6px;3703  width: 120px;3704  height: 120px;3705  display: flex;3706  align-items: center;3707  justify-content: center;3708  pointer-events: none;3709  opacity: 0.12;3710  filter: saturate(0.9);3711}3712.peach-lock-hero-mark {3713  width: 100%;3714  height: 100%;3715}3716/* Peach body stays brand-peach across every accent — we don't want a3717   green or blue peach when sage/sky is selected. Leaf + vein keep the3718   sage tint because a real peach has a sage leaf. In the new brand-kit3719   mark the leaf is path 1 and the vein stroke is path 2; the body and3720   back-lobe (paths 3 + 4) must stay untouched. */3721.peach-lock-hero-mark path:nth-child(1) {3722  fill: rgba(123, 144, 96, 0.88);3723}3724.peach-lock-hero-mark path:nth-child(2) {3725  stroke: rgba(94, 122, 66, 0.95);3726}3727.peach-lock-hero > *:not(.peach-lock-hero-art) {3728  position: relative;3729  z-index: 1;3730}37313732.peach-lock-eyebrow {3733  display: inline-flex;3734  align-items: center;3735  width: fit-content;3736  padding: 4px 9px;3737  border-radius: 999px;3738  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3739  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3740  color: var(--peach-t0);3741  font-family: "IBM Plex Mono", monospace;3742  font-size: 0.5rem;3743  letter-spacing: 0.18em;3744  text-transform: uppercase;3745}37463747.peach-lock-label-row {3748  display: flex;3749  align-items: center;3750  justify-content: space-between;3751  margin-bottom: 0;3752}37533754.peach-lock-reveal-btn {3755  display: inline-flex;3756  align-items: center;3757  gap: 4px;3758  background: none;3759  border: none;3760  cursor: pointer;3761  font-family: "IBM Plex Mono", monospace;3762  font-size: 0.5625rem;3763  letter-spacing: 0.06em;3764  color: var(--peach-t2);3765  padding: 2px 0;3766  transition: color 150ms ease;3767}37683769.peach-lock-reveal-btn:hover {3770  color: var(--peach-t1);3771}37723773.peach-lock-warning {3774  color: rgba(220, 80, 60, 0.85) !important;3775  line-height: 1.5;3776}37773778.peach-onboarding-cards {3779  display: grid;3780  gap: 8px;3781  position: relative;3782  z-index: 1;3783}37843785.peach-lock-panel {3786  position: relative;3787  z-index: 1;3788  display: grid;3789  gap: 9px;3790  padding: 14px 16px 15px;3791  border-radius: 18px;3792  border: 1px solid var(--peach-t3);3793  background:3794    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3795  box-shadow:3796    inset 0 1px 0 rgba(240, 232, 216, 0.04),3797    0 12px 28px rgba(0, 0, 0, 0.12);3798}37993800/* Glass surface — lock panel and settings groups */3801.peach-glass {3802  background: rgba(26, 20, 16, 0.65);3803  border: 1px solid rgba(255, 255, 255, 0.08);3804  border-radius: 12px;3805  backdrop-filter: blur(12px) saturate(1.4);3806  -webkit-backdrop-filter: blur(12px) saturate(1.4);3807}38083809@supports not (backdrop-filter: blur(1px)) {3810  .peach-glass {3811    background: rgba(26, 20, 16, 0.92);3812    border: 1px solid rgba(255, 255, 255, 0.10);3813    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3814  }3815}38163817.light .peach-glass,3818[data-theme="light"] .peach-glass {3819  background: rgba(240, 233, 223, 0.72);3820  border: 1px solid rgba(26, 18, 8, 0.08);3821  backdrop-filter: blur(12px) saturate(1.2);3822  -webkit-backdrop-filter: blur(12px) saturate(1.2);3823}38243825@supports not (backdrop-filter: blur(1px)) {3826  .light .peach-glass,3827  [data-theme="light"] .peach-glass {3828    background: rgba(240, 233, 223, 0.97);3829    border: 1px solid rgba(26, 18, 8, 0.10);3830  }3831}38323833/* Lock panel keeps its own border-radius over the generic glass token */3834.peach-lock-panel.peach-glass {3835  border-radius: 18px;3836  background: rgba(26, 20, 16, 0.65);3837  border: 1px solid rgba(255, 255, 255, 0.08);3838  box-shadow:3839    inset 0 1px 0 rgba(255, 255, 255, 0.05),3840    0 12px 28px rgba(0, 0, 0, 0.3);3841}38423843.light .peach-lock-panel.peach-glass,3844[data-theme="light"] .peach-lock-panel.peach-glass {3845  background: rgba(240, 233, 223, 0.82);3846  border: 1px solid rgba(26, 18, 8, 0.08);3847  box-shadow:3848    inset 0 1px 0 rgba(255, 255, 255, 0.4),3849    0 8px 24px rgba(80, 56, 32, 0.15);3850}38513852@supports not (backdrop-filter: blur(1px)) {3853  .peach-lock-panel.peach-glass {3854    background: rgba(26, 20, 16, 0.92);3855    box-shadow:3856      inset 0 1px 0 rgba(255, 255, 255, 0.05),3857      0 12px 28px rgba(0, 0, 0, 0.4);3858  }3859  .light .peach-lock-panel.peach-glass,3860  [data-theme="light"] .peach-lock-panel.peach-glass {3861    background: rgba(240, 233, 223, 0.98);3862  }3863}38643865.peach-lock-panel--secondary {3866  gap: 12px;3867}38683869.peach-lock-panel-header {3870  display: flex;3871  align-items: baseline;3872  justify-content: space-between;3873  gap: 12px;3874}38753876.peach-lock-option-grid {3877  display: grid;3878  gap: 10px;3879}38803881.peach-lock-option {3882  width: 100%;3883  display: grid;3884  gap: 6px;3885  padding: 14px 15px;3886  border-radius: 16px;3887  border: 1px solid rgba(240, 232, 216, 0.08);3888  background: rgba(240, 232, 216, 0.02);3889  color: var(--peach-t0);3890  text-align: left;3891  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3892}38933894.peach-lock-option:hover {3895  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3896  background: rgba(240, 232, 216, 0.04);3897  transform: translateY(-1px);3898}38993900.peach-lock-option-title {3901  font-size: 0.75rem;3902  color: var(--peach-t0);3903}39043905.peach-lock-option-copy {3906  font-size: 0.6875rem;3907  line-height: 1.55;3908  color: var(--peach-t1);3909}39103911.peach-onboarding-stack {3912  margin-top: 2px;3913}3914.peach-lock-panel-footer {3915  display: grid;3916  gap: 6px;3917  margin-top: 2px;3918  padding-top: 10px;3919  border-top: 1px solid rgba(240, 232, 216, 0.06);3920}39213922/* ── Restore tab view ─────────────────────────────────────────────────────3923   Tab-based restore screen replacing the old three-card picker. */39243925.peach-restore-tabview {3926  overflow: hidden;3927}39283929.peach-restore-tabcard {3930  flex: 1;3931  display: flex;3932  flex-direction: column;3933  gap: 0;3934  padding: 0;3935  overflow: hidden;3936  cursor: default;3937  user-select: none;3938  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3939}39403941/* ── Tab selector ─────────────────────────────────────────────────────── */39423943.peach-restore-tabs {3944  display: flex;3945  justify-content: space-around;3946  padding: 14px 10px 10px;3947  border-bottom: 1px solid var(--peach-t3);3948  gap: 2px;3949  overflow: hidden;3950  scrollbar-width: none;3951}3952.peach-restore-tabs::-webkit-scrollbar { display: none; }39533954.peach-restore-tab {3955  background: none;3956  border: none;3957  cursor: pointer;3958  padding: 3px 2px;3959  font-family: 'Cormorant Garamond', Georgia, serif;3960  font-style: italic;3961  font-size: 11px;3962  color: var(--peach-t2);3963  transition: color 150ms ease, text-shadow 150ms ease;3964  flex: 1;3965  min-width: 0;3966  text-align: center;3967  white-space: nowrap;3968  overflow: hidden;3969  text-overflow: ellipsis;3970}3971.peach-restore-tab:hover {3972  color: var(--peach-accent);3973  text-shadow:3974    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3975    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3976}3977.peach-restore-tab.is-active {3978  color: var(--peach-accent);3979  text-shadow:3980    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3981    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3982}39833984/* ── Content area ─────────────────────────────────────────────────────── */39853986.peach-restore-content {3987  padding: 16px 16px 14px;3988  display: flex;3989  flex-direction: column;3990  gap: 8px;3991  overflow: hidden;3992  scrollbar-width: none;3993  flex: 1;3994}3995.peach-restore-content::-webkit-scrollbar { display: none; }3996.peach-restore-content > * {3997  overflow: hidden;3998  scrollbar-width: none;3999}4000.peach-restore-content > *::-webkit-scrollbar { display: none; }40014002/* ── Shared tab inner layout ──────────────────────────────────────────── */40034004.peach-rt-symbols,4005.peach-rt-csv,4006.peach-rt-phone,4007.peach-restore-codex {4008  display: flex;4009  flex-direction: column;4010  gap: 8px;4011  overflow: hidden;4012}40134014.peach-restore-codex {4015  min-height: 0;4016  justify-content: center;4017}40184019.peach-restore-codex-title {4020  margin: 0;4021  font-family: var(--font-display);4022  font-size: 1rem;4023  font-style: italic;4024  color: var(--peach-t0);4025}40264027.peach-restore-codex-copy {4028  margin: 0;4029  font-size: 0.75rem;4030  line-height: 1.5;4031  color: var(--peach-t1);4032}40334034.peach-restore-codex-button {4035  width: 100%;4036  justify-content: center;4037}40384039.peach-rt-submit {4040  width: 100%;4041}40424043.peach-rt-error {4044  margin: 0;4045  font-size: 0.6875rem;4046  color: var(--peach-breach);4047  line-height: 1.4;4048}40494050/* ── PeachScript tab ──────────────────────────────────────────────────── */40514052.peach-restore-symbols-textarea {4053  font-family: 'PeachScript', monospace;4054  font-size: 13px;4055  line-height: 1.9;4056  letter-spacing: 0.1em;4057  word-break: break-all;4058  resize: none;4059  width: 100%;4060  min-height: 56px;4061  max-height: 72px;4062  overflow: hidden;4063  scrollbar-width: none;4064  -ms-overflow-style: none;4065  box-sizing: border-box;4066  padding: 6px 8px;4067  border-radius: 8px;4068  border: 1px solid var(--peach-t3);4069  background: rgba(240, 232, 216, 0.03);4070  color: var(--peach-t0);4071}4072.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }4073.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }40744075.peach-restore-symbols-pass {4076  width: 100%;4077  box-sizing: border-box;4078  padding: 7px 10px;4079  border-radius: 8px;4080  border: 1px solid var(--peach-t3);4081  background: rgba(240, 232, 216, 0.03);4082  color: var(--peach-t0);4083  font-size: 0.8125rem;4084}4085.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }4086.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }40874088.peach-rt-divider {4089  text-align: center;4090  font-size: 0.6875rem;4091  color: var(--peach-t2);4092  font-style: italic;4093}40944095.peach-rt-file-label {4096  width: 100%;4097  justify-content: center;4098}40994100.peach-rt-anim-canvas {4101  width: 100%;4102  height: 180px;4103  border-radius: 10px;4104  overflow: hidden;4105  display: block;4106}41074108/* ── CSV tab ──────────────────────────────────────────────────────────── */41094110.peach-rt-csv-sources {4111  margin: 0;4112  font-size: 0.6875rem;4113  color: var(--peach-t2);4114  line-height: 1.5;4115  text-align: center;4116}41174118.peach-rt-csv-warning {4119  margin: 0;4120  font-family: "IBM Plex Mono", monospace;4121  font-size: 0.5625rem;4122  letter-spacing: 0.12em;4123  color: var(--peach-breach);4124  text-align: center;4125}41264127/* ── From Phone tab ───────────────────────────────────────────────────── */41284129.peach-rt-phone-code {4130  margin: 0;4131  text-align: center;4132  font-family: "IBM Plex Mono", monospace;4133  font-size: 22px;4134  letter-spacing: 0.18em;4135  color: var(--peach-t0);4136}41374138.peach-rt-phone-qr {4139  display: block;4140  width: 96px;4141  height: 96px;4142  margin: 0 auto;4143  border-radius: 6px;4144  image-rendering: pixelated;4145  overflow: hidden;4146}41474148.peach-rt-phone-hint {4149  margin: 0;4150  font-size: 0.6875rem;4151  color: var(--peach-t2);4152  line-height: 1.55;4153  text-align: center;4154}41554156/* ── Intro popup ──────────────────────────────────────────────────────── */41574158.peach-restore-intro-overlay {4159  position: absolute;4160  inset: 0;4161  z-index: 100;4162  display: flex;4163  align-items: center;4164  justify-content: center;4165  padding: 20px;4166  background: rgba(12, 10, 6, 0.7);4167  backdrop-filter: blur(4px);4168  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4169}41704171.peach-restore-intro-card {4172  width: 100%;4173  display: flex;4174  flex-direction: column;4175  gap: 12px;4176  padding: 22px 20px 20px;4177  border-radius: 16px;4178  border: 1px solid var(--peach-t3);4179  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));4180  backdrop-filter: blur(4px);4181  -webkit-backdrop-filter: blur(4px);4182  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);4183}41844185.peach-restore-intro-headline {4186  margin: 0;4187  font-family: var(--font-display);4188  font-style: italic;4189  font-size: 20px;4190  font-weight: 400;4191  color: var(--peach-t0);4192}41934194.peach-restore-intro-body {4195  display: flex;4196  flex-direction: column;4197  gap: 8px;4198}4199.peach-restore-intro-body p {4200  margin: 0;4201  font-size: 0.75rem;4202  color: var(--peach-t1);4203  line-height: 1.5;4204}42054206.peach-restore-intro-btn {4207  width: 100%;4208  margin-top: 4px;4209}42104211/* Snapshot restore panel */4212.peach-snapshot-panel {4213  gap: 10px;4214  overflow-y: auto;4215  max-height: 340px;4216}4217.peach-snapshot-list {4218  display: flex;4219  flex-direction: column;4220  gap: 4px;4221}4222.peach-snapshot-row {4223  display: flex;4224  align-items: center;4225  justify-content: space-between;4226  width: 100%;4227  padding: 8px 10px;4228  border-radius: 8px;4229  border: 1px solid rgba(240, 232, 216, 0.07);4230  background: transparent;4231  cursor: pointer;4232  transition: border-color 120ms, background 120ms;4233  text-align: left;4234  gap: 8px;4235}4236.peach-snapshot-row:hover {4237  border-color: rgba(240, 232, 216, 0.14);4238  background: rgba(240, 232, 216, 0.03);4239}4240.peach-snapshot-row.is-selected {4241  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4242  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);4243}4244.peach-snapshot-time {4245  font-size: 11.5px;4246  color: var(--peach-t0);4247  flex: 1;4248}4249.peach-snapshot-count {4250  font-family: "IBM Plex Mono", monospace;4251  font-size: 0.625rem;4252  color: var(--peach-t2);4253  flex-shrink: 0;4254}4255.peach-snapshot-confirm {4256  display: flex;4257  flex-direction: column;4258  gap: 8px;4259  padding-top: 10px;4260  border-top: 1px solid rgba(240, 232, 216, 0.06);4261}4262.peach-snapshot-warning {4263  display: flex;4264  align-items: flex-start;4265  gap: 6px;4266  font-size: 10.5px;4267  color: rgba(220, 80, 60, 0.85);4268  line-height: 1.55;4269}4270.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }4271.peach-snapshot-confirm-row {4272  display: flex;4273  gap: 6px;4274  align-items: center;4275}4276.peach-snapshot-restore-btn {4277  width: 100%;4278}4279.peach-lock-hero--unlock .peach-lock-hero-art {4280  width: 112px;4281  height: 112px;4282  right: 0;4283  top: 2px;4284  opacity: 0.1;4285}42864287.peach-card {4288  border: 1px solid var(--peach-t3);4289  border-radius: 18px;4290  background:4291    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4292  box-shadow:4293    inset 0 0 0 1px var(--peach-border-accent),4294    inset 0 1px 0 rgba(240, 232, 216, 0.04),4295    0 12px 32px rgba(0, 0, 0, 0.14);4296  overflow: hidden;4297}42984299.peach-card-active {4300  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4301  box-shadow:4302    inset 0 1px 0 rgba(240, 232, 216, 0.05),4303    0 16px 38px rgba(0, 0, 0, 0.18),4304    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4305}43064307.peach-card-disabled {4308  opacity: 0.72;4309}43104311.peach-card-header {4312  width: 100%;4313  padding: 13px 16px 11px;4314  background: transparent;4315  color: var(--peach-t0);4316  display: flex;4317  justify-content: space-between;4318  align-items: center;4319  text-align: left;4320  font-size: 0.75rem;4321}43224323.peach-card-body {4324  padding: 0 16px 16px;4325  display: grid;4326  gap: 9px;4327}43284329.peach-card-tag {4330  color: var(--peach-t2);4331  font-family: "IBM Plex Mono", monospace;4332  font-size: 0.5625rem;4333  letter-spacing: 0.12em;4334  text-transform: uppercase;4335}43364337.peach-empty-copy {4338  display: grid;4339  gap: 6px;4340  color: var(--peach-t1);4341  font-size: 0.8125rem;4342}43434344.peach-lock-submit {4345  width: 100%;4346  box-shadow:4347    0 1px 0 rgba(255,255,255,0.10) inset,4348    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4349    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4350    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4351}43524353.peach-lock-secondary {4354  width: 100%;4355  border-color: var(--peach-t3);4356  background: rgba(240, 232, 216, 0.02);4357}43584359.peach-lock-secondary:hover {4360  background: rgba(240, 232, 216, 0.04);4361}43624363.peach-lock-note {4364  max-width: none;4365  line-height: 1.55;4366  margin: 0;4367}43684369.peach-overlay-action {4370  font-size: 0.625rem;4371  padding: 4px 8px;4372  letter-spacing: 0.06em;4373  min-width: 44px;4374  text-align: center;4375}43764377.peach-inline-action {4378  flex-shrink: 0;4379  font-size: 0.5625rem;4380  letter-spacing: 0.1em;4381  text-transform: uppercase;4382  padding: 4px 7px;4383}4384.peach-password-toggle-btn {4385  display: inline-flex;4386  align-items: center;4387  justify-content: center;4388  min-width: 30px;4389  min-height: 26px;4390  padding: 0 7px;4391  border: 1px solid var(--peach-t3);4392  border-radius: 999px;4393  background: rgba(240, 232, 216, 0.04);4394  color: var(--peach-t2);4395  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4396}4397.peach-password-toggle-btn:hover {4398  border-color: var(--peach-t2);4399  color: var(--peach-t0);4400  background: rgba(240, 232, 216, 0.06);4401}44024403.peach-new-textarea {4404  width: 100%;4405  min-height: 88px;4406  resize: vertical;4407  border: 0;4408  outline: none;4409  background: transparent;4410  color: var(--peach-t1);4411  font-family: "IBM Plex Mono", monospace;4412  font-size: 0.75rem;4413  line-height: 1.65;4414  caret-color: var(--peach-accent);4415}44164417.peach-new-textarea::placeholder {4418  color: var(--peach-t2);4419  opacity: 0.7;4420}44214422.peach-settings-actions {4423  display: grid;4424  gap: 8px;4425}44264427.peach-sync-section-label {4428  font-size: 0.6875rem;4429  color: var(--peach-t2);4430  text-transform: uppercase;4431  letter-spacing: 0.05em;4432}44334434.peach-sync-network-note {4435  margin: 0 0 6px;4436  font-size: 0.75rem;4437  color: var(--peach-t2);4438  line-height: 1.4;4439}44404441.peach-settings-row--tappable {4442  background: none;4443  border: none;4444  width: 100%;4445  text-align: left;4446  cursor: pointer;4447  color: var(--peach-t1);4448  font-size: 0.8125rem;4449}4450.peach-settings-row--tappable:hover {4451  color: var(--peach-t0);4452}44534454.peach-sync-pro-hint {4455  display: flex;4456  flex-direction: column;4457  align-items: flex-start;4458  gap: 8px;4459  padding: 12px 0 4px;4460}44614462.peach-sync-device-row {4463  display: flex;4464  justify-content: space-between;4465  align-items: center;4466  padding: 6px 0;4467  border-bottom: 1px solid var(--peach-t3);4468}44694470.peach-sync-device-info {4471  display: flex;4472  flex-direction: column;4473  gap: 2px;4474}44754476.peach-sync-device-name {4477  font-size: 0.8125rem;4478  color: var(--peach-t0);4479}44804481.peach-sync-device-meta {4482  font-size: 0.6875rem;4483  color: var(--peach-t2);4484}44854486.peach-sync-status-dot {4487  display: inline-block;4488  width: 8px;4489  height: 8px;4490  border-radius: 50%;4491  vertical-align: middle;4492}44934494.peach-sync-remove-btn {4495  color: var(--peach-breach);4496}44974498.peach-sync-advanced-row {4499  display: flex;4500  justify-content: space-between;4501  align-items: center;4502  padding: 6px 0;4503  gap: 12px;4504}45054506.peach-sync-advanced-info {4507  display: flex;4508  flex-direction: column;4509  gap: 2px;4510  flex: 1;4511}45124513.peach-sync-advanced-name {4514  font-size: 0.8125rem;4515  color: var(--peach-t0);4516}45174518.peach-sync-reset-confirm {4519  display: flex;4520  flex-direction: column;4521  gap: 8px;4522  padding: 10px;4523  border: 1px solid var(--peach-breach);4524  border-radius: 10px;4525  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4526}45274528.peach-sync-reset-confirm-headline {4529  font-size: 0.8125rem;4530  font-weight: 600;4531  color: var(--peach-t0);4532  margin: 0;4533}45344535.peach-sync-reset-confirm-body {4536  font-size: 0.75rem;4537  color: var(--peach-t1);4538  margin: 0;4539  line-height: 1.4;4540}45414542.peach-btn--danger {4543  background: var(--peach-breach);4544  color: #fff;4545  border-color: var(--peach-breach);4546}4547.peach-btn--danger:hover:not(:disabled) {4548  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4549}4550.peach-btn--danger:disabled {4551  opacity: 0.55;4552  cursor: not-allowed;4553}45544555.peach-sync-hero-icon {4556  color: var(--peach-t1);4557  opacity: 0.85;4558}45594560.peach-import-preview {4561  margin-bottom: 12px;4562  max-height: 152px;4563  overflow-y: auto;4564  border: 1px solid var(--peach-t3);4565  border-radius: 10px;4566  padding: 8px 10px;4567  display: grid;4568  gap: 8px;4569  background: rgba(240, 232, 216, 0.02);4570}45714572.peach-import-preview-row {4573  display: flex;4574  justify-content: space-between;4575  gap: 10px;4576  font-size: 0.6875rem;4577  color: var(--peach-t1);4578}45794580.peach-import-preview-title {4581  color: var(--peach-t0);4582  flex: 1;4583  min-width: 0;4584  overflow: hidden;4585  text-overflow: ellipsis;4586  white-space: nowrap;4587}45884589.peach-import-preview-meta {4590  color: var(--peach-t2);4591  flex-shrink: 0;4592  max-width: 42%;4593  overflow: hidden;4594  text-overflow: ellipsis;4595  white-space: nowrap;4596}45974598.peach-import-preview-more {4599  color: var(--peach-t2);4600  font-size: 0.625rem;4601}46024603.peach-restore-copy {4604  margin: 0;4605  color: var(--peach-t1);4606  font-size: 0.6875rem;4607  line-height: 1.6;4608}46094610.peach-restore-warning {4611  padding: 10px 12px;4612  border-radius: 12px;4613  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4614  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4615  color: var(--peach-t0);4616  font-size: 0.6875rem;4617  line-height: 1.55;4618}46194620.peach-provider-chips {4621  display: flex;4622  flex-wrap: wrap;4623  gap: 6px;4624}46254626.peach-provider-chip {4627  display: inline-flex;4628  align-items: center;4629  padding: 5px 8px;4630  border-radius: 999px;4631  border: 1px solid var(--peach-t3);4632  background: rgba(240, 232, 216, 0.02);4633  color: var(--peach-t1);4634  font-family: "IBM Plex Mono", monospace;4635  font-size: 0.5rem;4636  letter-spacing: 0.08em;4637  text-transform: uppercase;4638}46394640.peach-restore-file,4641.peach-restore-input {4642  width: 100%;4643  border-radius: 10px;4644  border: 1px solid var(--peach-t3);4645  background: var(--peach-s2);4646  color: var(--peach-t0);4647  font-size: 0.75rem;4648}46494650.peach-restore-file {4651  padding: 9px 10px;4652}46534654.peach-restore-file::file-selector-button {4655  margin-right: 10px;4656  padding: 7px 10px;4657  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4658  border-radius: 999px;4659  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4660  color: var(--peach-t0);4661  font-size: 0.625rem;4662  letter-spacing: 0.08em;4663  text-transform: uppercase;4664  cursor: pointer;4665}46664667.peach-restore-input {4668  padding: 10px 12px;4669}46704671.peach-auth-grid {4672  display: grid;4673  gap: 10px;4674}46754676.peach-import-summary {4677  color: var(--peach-t1);4678  font-size: 0.75rem;4679  line-height: 1.6;4680  margin-bottom: 12px;4681}46824683.peach-restore-error {4684  color: rgba(220, 80, 60, 0.95);4685  font-size: 0.75rem;4686  line-height: 1.55;4687}46884689.peach-passkey-card {4690  max-width: 400px;4691  margin: auto 16px;4692  align-self: center;4693  width: calc(100% - 32px);4694}46954696/* Center the approval card vertically inside the overlay-view (which sets4697 * flex-direction: column without justify-content). Without this, the card4698 * sits at the top with a tall empty band below — looks unfinished on the4699 * 320px popup. */4700.peach-overlay-view:has(.peach-passkey-card) {4701  justify-content: center;4702}47034704.peach-pro-badge {4705  padding: 2px 6px;4706  border-radius: 999px;4707  font-family: var(--font-ui);4708  font-size: 0.625rem;4709  letter-spacing: 0.08em;4710  text-transform: uppercase;4711  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4712  color: var(--peach-accent);4713}47144715/* ── Shortcuts rebind table ─────────────────────────────────── */4716.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4717.peach-shortcut-row {4718  display: flex;4719  align-items: center;4720  gap: 10px;4721  padding: 6px 0;4722}4723.peach-shortcut-row-label {4724  flex: 1;4725  font-size: 0.75rem;4726  color: var(--peach-t0);4727}4728.peach-shortcut-chip {4729  min-width: 64px;4730  padding: 4px 10px;4731  border-radius: 6px;4732  border: 1px solid var(--peach-t3);4733  background: var(--peach-input-bg, var(--surface-card));4734  color: var(--peach-t0);4735  font-family: var(--font-mono);4736  font-size: 0.6875rem;4737  letter-spacing: 0.04em;4738  cursor: pointer;4739  text-align: center;4740  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4741}4742.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4743.peach-shortcut-chip.is-custom {4744  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4745  color: var(--peach-accent);4746}4747.peach-shortcut-chip.is-capturing {4748  border-color: var(--peach-accent);4749  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4750  color: var(--peach-accent);4751  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4752}4753@keyframes peach-shortcut-capture-pulse {4754  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4755  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4756}4757.peach-shortcut-reset {4758  background: transparent;4759  border: none;4760  cursor: pointer;4761  color: var(--peach-t2);4762  padding: 4px 6px;4763  border-radius: 5px;4764  font-size: 0.875rem;4765  line-height: 1;4766  transition: color 120ms ease, background 120ms ease;4767}4768.peach-shortcut-reset:hover {4769  color: var(--peach-t0);4770  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4771}4772.peach-shortcuts-conflict {4773  margin: 4px 0 0;4774  padding: 8px 10px;4775  border-radius: 7px;4776  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4777  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4778  font-family: var(--font-mono);4779  font-size: 0.6875rem;4780  color: var(--peach-t0);4781}47824783/* ── Help dialog overlay (? to open) ────────────────────────── */4784.peach-shortcuts-help-backdrop {4785  position: fixed;4786  inset: 0;4787  background: rgba(0, 0, 0, 0.55);4788  backdrop-filter: blur(2px);4789  display: flex;4790  align-items: center;4791  justify-content: center;4792  z-index: 1000;4793  animation: peach-help-fade-in 140ms ease forwards;4794}4795@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4796.peach-shortcuts-help-card {4797  width: min(320px, 92vw);4798  max-height: 80vh;4799  overflow-y: auto;4800  border-radius: 14px;4801  border: 1px solid var(--peach-t3);4802  background: var(--peach-bg);4803  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4804  padding: 16px 18px 18px;4805  display: flex;4806  flex-direction: column;4807  gap: 12px;4808}4809.peach-shortcuts-help-head {4810  display: flex; align-items: center; justify-content: space-between;4811}4812.peach-shortcuts-help-head h3 {4813  margin: 0;4814  font-family: var(--font-display);4815  font-style: italic;4816  font-weight: 400;4817  font-size: 22px;4818  color: var(--peach-t0);4819}4820.peach-shortcuts-help-close {4821  background: transparent;4822  border: none;4823  color: var(--peach-t2);4824  cursor: pointer;4825  font-size: 0.875rem;4826  padding: 4px 8px;4827  border-radius: 5px;4828}4829.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4830.peach-shortcuts-help-body ul {4831  list-style: none; padding: 0; margin: 4px 0 12px;4832  display: grid; gap: 8px;4833}4834.peach-shortcuts-help-body li {4835  display: flex; align-items: center; justify-content: space-between; gap: 12px;4836  font-size: 0.75rem; color: var(--peach-t0);4837}4838.peach-shortcuts-help-body kbd {4839  font-family: var(--font-mono);4840  font-size: 0.6875rem;4841  padding: 3px 8px;4842  border-radius: 6px;4843  background: var(--surface-card);4844  border: 1px solid var(--peach-t3);4845  color: var(--peach-accent);4846  letter-spacing: 0.04em;4847}48484849/* ── Pro promo on Account screen ────────────────────────────── */4850.peach-pro-promo {4851  position: relative;4852  border-radius: 14px;4853  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4854  background:4855    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4856    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4857    var(--surface-card);4858  overflow: hidden;4859  margin-bottom: 14px;4860}4861.peach-pro-promo-glow {4862  position: absolute;4863  inset: -40% -20% auto auto;4864  width: 220px; height: 220px;4865  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4866  pointer-events: none;4867  filter: blur(8px);4868}4869.peach-pro-promo-inner {4870  position: relative;4871  padding: 18px 18px 16px;4872}4873.peach-pro-promo-title {4874  font-family: var(--font-display);4875  font-style: italic;4876  font-weight: 400;4877  font-size: 28px;4878  line-height: 1;4879  letter-spacing: -0.005em;4880  color: var(--peach-t0);4881  margin: 0 0 4px;4882}4883.peach-pro-promo-tagline {4884  font-family: var(--font-mono);4885  font-size: 0.625rem;4886  letter-spacing: 0.06em;4887  color: var(--peach-t2);4888  margin: 0 0 14px;4889}4890.peach-pro-promo-list {4891  list-style: none;4892  margin: 0 0 16px;4893  padding: 0;4894  display: grid;4895  gap: 9px;4896}4897.peach-pro-promo-list li {4898  display: flex;4899  align-items: flex-start;4900  gap: 9px;4901  font-size: 0.75rem;4902  color: var(--peach-t1);4903  line-height: 1.4;4904}4905.peach-pro-promo-list svg {4906  width: 14px;4907  height: 14px;4908  flex-shrink: 0;4909  color: var(--peach-accent);4910  margin-top: 2px;4911}4912.peach-pro-promo-list span {4913  color: var(--peach-t0);4914}4915.peach-pro-promo-cta {4916  width: 100%;4917  background: var(--peach-accent);4918  color: #fff;4919  border: none;4920  padding: 9px 12px;4921  border-radius: 9px;4922  font-size: 0.75rem;4923  font-weight: 500;4924  font-family: var(--font-ui);4925  letter-spacing: 0.02em;4926  text-decoration: none;4927  display: inline-flex;4928  align-items: center;4929  justify-content: center;4930  cursor: pointer;4931  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4932  box-shadow: 0 2px 16px var(--peach-glow);4933}4934.peach-pro-promo-cta:hover {4935  filter: brightness(1.07);4936  box-shadow: 0 4px 24px var(--peach-glow);4937  transform: translateY(-1px);4938}4939.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }49404941.peach-pro-or-divider {4942  display: flex;4943  align-items: center;4944  gap: 10px;4945  margin: 4px 0 12px;4946  font-family: var(--font-mono);4947  font-size: 0.625rem;4948  letter-spacing: 0.06em;4949  color: var(--peach-t2);4950  text-transform: uppercase;4951}4952.peach-pro-or-divider::before,4953.peach-pro-or-divider::after {4954  content: "";4955  flex: 1;4956  height: 1px;4957  background: var(--peach-t3);4958}49594960.peach-loading {4961  position: absolute;4962  inset: 0;4963  display: flex;4964  align-items: center;4965  justify-content: center;4966  background: var(--bg);4967  animation: peach-loading-pulse 1.2s ease-in-out infinite;4968}49694970@keyframes peach-loading-pulse {4971  0%, 100% { opacity: 0.6; }4972  50% { opacity: 1; }4973}49744975/* ── Health Dashboard ─────────────────────────────────────────────────── */4976.peach-health-body {4977  flex: 1;4978  overflow-y: auto;4979  display: flex;4980  flex-direction: column;4981  /* Hide the platform scrollbar — every other scrollable surface in the4982   * popup hides it; the Health view was the one outlier and it ruined the4983   * polish. Behavior unchanged, just no rail rendered. */4984  scrollbar-width: none;4985  -ms-overflow-style: none;4986}4987.peach-health-body::-webkit-scrollbar { display: none; }49884989/* Loading screen for the Vault Health view. The advanced report computation4990 * can run for a few seconds on a large vault — without a clear loading4991 * screen the surface looked broken (the entry view bleeds through the4992 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4993.peach-health-loading-screen {4994  flex: 1;4995  display: flex;4996  flex-direction: column;4997  align-items: center;4998  justify-content: center;4999  gap: 14px;5000  padding: 32px 28px;5001  text-align: center;5002}50035004.peach-health-loading-glyph {5005  width: 48px;5006  height: 48px;5007  display: flex;5008  align-items: center;5009  justify-content: center;5010  border-radius: 14px;5011  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5012  color: var(--peach-accent);5013}50145015.peach-health-loading-title {5016  margin: 0;5017  font-family: var(--font-display);5018  font-style: italic;5019  font-weight: 300;5020  font-size: 19px;5021  line-height: 1.2;5022  color: var(--peach-t0);5023}50245025.peach-health-loading-copy {5026  margin: 0;5027  max-width: 240px;5028  font-size: 0.75rem;5029  line-height: 1.55;5030  color: var(--peach-t2);5031}50325033.peach-health-loading-track {5034  width: 200px;5035  height: 3px;5036  margin-top: 6px;5037  border-radius: 999px;5038  background: rgba(240, 232, 216, 0.06);5039  overflow: hidden;5040}50415042.peach-health-loading-fill {5043  width: 40%;5044  height: 100%;5045  border-radius: inherit;5046  background: linear-gradient(5047    90deg,5048    transparent 0%,5049    var(--peach-accent) 50%,5050    transparent 100%5051  );5052  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;5053}50545055@keyframes peach-health-loading-sweep {5056  0%   { transform: translateX(-100%); }5057  100% { transform: translateX(350%); }5058}50595060[data-motion="reduce"] .peach-health-loading-fill,5061[data-motion="reduce"] .peach-health-loading-glyph svg path {5062  animation: none;5063}50645065.peach-health-summary {5066  padding: 10px 16px 6px;5067  font-family: "IBM Plex Mono", monospace;5068  font-size: 0.6875rem;5069}5070.peach-health-summary-warn { color: rgba(220,80,60,0.9); }5071.peach-health-summary-ok { color: var(--peach-t2); }50725073.peach-health-check-row {5074  padding: 0 16px 10px;5075}5076.peach-health-check-btn {5077  width: 100%;5078  display: flex;5079  align-items: center;5080  justify-content: center;5081}50825083.peach-health-sections {5084  flex: 1;5085  display: flex;5086  flex-direction: column;5087}50885089.peach-health-section {5090  border-bottom: 1px solid var(--peach-t3);5091}50925093.peach-health-section-header {5094  width: 100%;5095  display: flex;5096  align-items: center;5097  justify-content: space-between;5098  padding: 9px 16px;5099  background: transparent;5100  cursor: pointer;5101  color: var(--peach-t0);5102}51035104.peach-health-section-title-row {5105  display: flex;5106  align-items: center;5107  gap: 8px;5108}51095110.peach-health-count-badge {5111  display: inline-flex;5112  align-items: center;5113  justify-content: center;5114  min-width: 20px;5115  height: 18px;5116  padding: 0 5px;5117  border-radius: 999px;5118  background: rgba(220,80,60,0.15);5119  border: 1px solid rgba(220,80,60,0.25);5120  font-family: "IBM Plex Mono", monospace;5121  font-size: 0.5625rem;5122  color: rgba(220,80,60,0.9);5123}51245125.peach-health-section-title {5126  font-family: "IBM Plex Mono", monospace;5127  font-size: 0.6875rem;5128  text-transform: uppercase;5129  letter-spacing: 0.1em;5130  color: var(--peach-t1);5131}51325133.peach-health-chevron {5134  color: var(--peach-t2);5135  transition: transform 200ms ease;5136  flex-shrink: 0;5137}5138.peach-health-chevron.is-expanded {5139  transform: rotate(180deg);5140}51415142.peach-health-section-body {5143  padding: 0 16px 10px;5144  display: flex;5145  flex-direction: column;5146  gap: 4px;5147}51485149.peach-health-row {5150  display: flex;5151  align-items: flex-start;5152  justify-content: space-between;5153  gap: 8px;5154  padding: 6px 8px;5155  border-radius: 8px;5156  background: rgba(240,232,216,0.02);5157}51585159.peach-health-row-info {5160  flex: 1;5161  min-width: 0;5162  display: flex;5163  flex-direction: column;5164  gap: 2px;5165}51665167.peach-health-row-name {5168  font-family: var(--font-display);5169  font-size: 0.9375rem;5170  font-style: italic;5171  font-weight: 400;5172  color: var(--peach-t0);5173  white-space: nowrap;5174  overflow: hidden;5175  text-overflow: ellipsis;5176}51775178.peach-health-row-meta {5179  font-family: "IBM Plex Mono", monospace;5180  font-size: 0.5625rem;5181  color: var(--peach-t2);5182  letter-spacing: 0.05em;5183}51845185.peach-health-fix-btn {5186  font-size: 0.5625rem;5187  letter-spacing: 0.08em;5188  text-transform: uppercase;5189  padding: 4px 7px;5190  flex-shrink: 0;5191  display: flex;5192  align-items: center;5193}51945195.peach-health-empty {5196  font-family: "IBM Plex Mono", monospace;5197  font-size: 0.625rem;5198  color: var(--peach-t2);5199  padding: 6px 0;5200}52015202.peach-health-loading {5203  font-family: "IBM Plex Mono", monospace;5204  font-size: 0.625rem;5205  color: var(--peach-t2);5206  padding: 6px 0;5207  display: flex;5208  align-items: center;5209  gap: 6px;5210}52115212.peach-health-loading::before {5213  content: "";5214  width: 10px;5215  height: 10px;5216  border: 1.5px solid var(--peach-t3);5217  border-top-color: var(--peach-accent);5218  border-radius: 50%;5219  animation: peach-spin 600ms linear infinite;5220}52215222@keyframes peach-spin {5223  to { transform: rotate(360deg); }5224}52255226.peach-spinner {5227  width: 32px;5228  height: 32px;5229  border: 2px solid var(--peach-s2);5230  border-top-color: var(--peach-accent);5231  border-radius: 50%;5232  margin: 0 auto 16px;5233  animation: peach-spin 0.8s linear infinite;5234}52355236.peach-progress-screen {5237  text-align: center;5238  padding: 32px 16px;5239}52405241.peach-progress-screen-title {5242  font-size: 0.8125rem;5243  color: var(--peach-t0);5244  margin-bottom: 16px;5245}52465247.peach-progress-screen-stage {5248  font-size: 0.6875rem;5249  color: var(--peach-t2);5250  min-height: 14px;5251}52525253.peach-progress-screen-note {5254  font-size: 0.625rem;5255  color: var(--peach-t2);5256  margin-top: 8px;5257}52585259/* Tag chips */5260.peach-tag-chip {5261  display: inline-flex;5262  align-items: center;5263  gap: 4px;5264  padding: 3px 8px;5265  border-radius: 999px;5266  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5267  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5268  color: var(--peach-t0);5269  font-family: "IBM Plex Mono", monospace;5270  font-size: 0.625rem;5271  letter-spacing: 0.04em;5272}52735274.peach-tag-chip-remove {5275  background: transparent;5276  border: none;5277  color: inherit;5278  opacity: 0.6;5279  cursor: pointer;5280  padding: 0;5281  font-size: 0.75rem;5282  line-height: 1;5283}52845285.peach-tag-chip-remove:hover {5286  opacity: 1;5287}52885289/* Tag input */5290.peach-tag-input-wrap {5291  border-bottom: 1px solid var(--peach-t3);5292}52935294.peach-tag-suggestions {5295  display: flex;5296  flex-wrap: wrap;5297  gap: 4px;5298  padding: 6px 0;5299}53005301.peach-tag-suggestion {5302  padding: 2px 8px;5303  border-radius: 999px;5304  border: 1px solid var(--peach-t3);5305  background: var(--peach-s2);5306  color: var(--peach-t1);5307  font-family: "IBM Plex Mono", monospace;5308  font-size: 0.625rem;5309  cursor: pointer;5310  transition: border-color 80ms ease, background 80ms ease;5311}53125313.peach-tag-suggestion:hover {5314  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5315  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5316}53175318/* Identity suggestions — shown below username/email inputs in new-entry form */5319@keyframes peach-suggest-in {5320  from { opacity: 0; transform: translateY(-4px); }5321  to   { opacity: 1; transform: none; }5322}53235324.peach-identity-suggestions {5325  display: flex;5326  flex-direction: column;5327  gap: 1px;5328  margin-top: 4px;5329  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5330}53315332.peach-identity-filter-row {5333  display: flex;5334  align-items: center;5335  gap: 4px;5336  padding: 2px 0 5px;5337}53385339.peach-identity-collapse-btn {5340  margin-left: auto;5341  background: transparent;5342  border: none;5343  cursor: pointer;5344  color: var(--peach-t3);5345  padding: 2px 4px;5346  display: flex;5347  align-items: center;5348  line-height: 0;5349  border-radius: 3px;5350  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5351}53525353.peach-identity-collapse-btn:hover {5354  color: var(--peach-t1);5355}53565357.peach-identity-collapse-btn.is-collapsed {5358  transform: rotate(-90deg);5359}53605361.peach-identity-rows {5362  display: grid;5363  grid-template-rows: 1fr;5364  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5365}53665367.peach-identity-rows.is-collapsed {5368  grid-template-rows: 0fr;5369}53705371.peach-identity-rows-inner {5372  overflow-y: auto;5373  min-height: 0;5374  max-height: 148px;5375  scrollbar-width: thin;5376  scrollbar-color: var(--peach-t3) transparent;5377  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5378  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5379}53805381.peach-identity-rows-inner::-webkit-scrollbar {5382  width: 4px;5383}53845385.peach-identity-rows-inner::-webkit-scrollbar-track {5386  background: transparent;5387}53885389.peach-identity-rows-inner::-webkit-scrollbar-thumb {5390  background: var(--peach-t3);5391  border-radius: 2px;5392}53935394.peach-identity-filter-pill {5395  padding: 2px 7px;5396  border-radius: 999px;5397  border: 1px solid var(--peach-t3);5398  background: transparent;5399  color: var(--peach-t2);5400  font-family: "IBM Plex Mono", monospace;5401  font-size: 0.6rem;5402  cursor: pointer;5403  transition: border-color 80ms, background 80ms, color 80ms;5404}54055406.peach-identity-filter-pill.is-on {5407  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5408  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5409  color: var(--peach-accent);5410}54115412.peach-identity-suggestion {5413  display: flex;5414  align-items: center;5415  gap: 6px;5416  width: 100%;5417  padding: 4px 6px;5418  border-radius: 5px;5419  border: none;5420  background: transparent;5421  cursor: pointer;5422  text-align: left;5423  transition: background 80ms ease;5424}54255426.peach-identity-suggestion:hover,5427.peach-identity-suggestion:focus {5428  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5429  outline: none;5430}54315432.peach-identity-suggestion-value {5433  font-family: "IBM Plex Mono", monospace;5434  font-size: 0.7rem;5435  color: var(--peach-t1);5436  overflow: hidden;5437  text-overflow: ellipsis;5438  white-space: nowrap;5439  flex: 1;5440  min-width: 0;5441}54425443.peach-identity-suggestion-type {5444  font-family: "IBM Plex Mono", monospace;5445  font-size: 0.55rem;5446  font-weight: 600;5447  flex-shrink: 0;5448  padding: 1px 4px;5449  border-radius: 3px;5450}54515452.peach-identity-suggestion-type--email {5453  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5454  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5455}54565457.peach-identity-suggestion-type--username {5458  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5459  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5460}54615462.peach-identity-suggestion-meta {5463  font-family: "IBM Plex Mono", monospace;5464  font-size: 0.6rem;5465  color: var(--peach-t3);5466  flex-shrink: 0;5467}54685469/* Tag filter strip */5470.peach-tag-filter-strip {5471  border-bottom: 1px solid var(--peach-t3);5472  flex-shrink: 0;5473}54745475.peach-tag-filter-chip {5476  display: inline-flex;5477  align-items: center;5478  padding: 4px 10px;5479  border-radius: 999px;5480  border: 1px solid var(--peach-t3);5481  background: transparent;5482  color: var(--peach-t2);5483  font-family: "IBM Plex Mono", monospace;5484  font-size: 0.5625rem;5485  letter-spacing: 0.06em;5486  text-transform: uppercase;5487  cursor: pointer;5488  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5489  white-space: nowrap;5490}54915492.peach-tag-filter-chip:hover {5493  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5494  color: var(--peach-t1);5495}54965497.peach-tag-filter-chip.is-selected {5498  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5499  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5500  color: var(--peach-t0);5501}55025503/* ─────────────────────────────────────────────────────────────────────────5504   v1.4.12 additions5505   ─────────────────────────────────────────────────────────────────────── */55065507/* Sort bar */5508.peach-sort-bar {5509  display: flex;5510  align-items: center;5511  gap: 4px;5512  padding: 5px 12px;5513  border-bottom: 1px solid var(--peach-t3);5514  flex-shrink: 0;5515  overflow-x: auto;5516  scrollbar-width: none;5517}55185519.peach-sort-btn {5520  padding: 2px 9px;5521  border-radius: 999px;5522  border: 1px solid transparent;5523  background: transparent;5524  color: var(--peach-t2);5525  font-family: "IBM Plex Mono", monospace;5526  font-size: 0.5625rem;5527  letter-spacing: 0.07em;5528  text-transform: uppercase;5529  cursor: pointer;5530  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5531  white-space: nowrap;5532}55335534.peach-sort-btn:hover {5535  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5536  color: var(--peach-t1);5537}55385539.peach-sort-btn.is-active {5540  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5541  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5542  color: var(--peach-t0);5543}55445545.peach-sort-scope-btn {5546  padding-inline: 8px;5547  font-size: 0.53125rem;5548  letter-spacing: 0.05em;5549}55505551.peach-sort-domain-hint {5552  margin-left: auto;5553  font-family: "IBM Plex Mono", monospace;5554  font-size: 0.5625rem;5555  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5556  white-space: nowrap;5557  overflow: hidden;5558  text-overflow: ellipsis;5559  max-width: 110px;5560}55615562/* Tab-match badge on entry rows */5563.peach-tab-match-badge {5564  display: inline-block;5565  width: 6px;5566  height: 6px;5567  border-radius: 50%;5568  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5569  margin-left: 5px;5570  vertical-align: middle;5571  flex-shrink: 0;5572  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5573}55745575.peach-entry-row.is-tab-match {5576  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5577  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5578}55795580.peach-entry-row.is-tab-match:hover {5581  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5582}55835584/* Entry list stagger entrance */5585@keyframes peach-entry-fadein {5586  from { opacity: 0; transform: translateY(4px); }5587  to   { opacity: 1; transform: translateY(0); }5588}55895590.peach-vault-list .peach-entry-row {5591  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5592}55935594/* Button press micro-interaction */5595.peach-btn:active {5596  transform: scale(0.95);5597  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5598}55995600.peach-sort-btn:active,5601.peach-tag-filter-chip:active {5602  transform: scale(0.93);5603  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5604}56055606/* Password strength bar (Lock view + shared) */5607.peach-password-strength {5608  display: flex;5609  align-items: center;5610  gap: 8px;5611  margin-top: 6px;5612}56135614.peach-strength-bar {5615  flex: 1;5616  height: 3px;5617  border-radius: 2px;5618  background: var(--peach-t3);5619  overflow: hidden;5620}56215622.peach-strength-fill {5623  height: 100%;5624  border-radius: 2px;5625  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5626              background 300ms ease;5627}56285629.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5630.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5631.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5632.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }56335634.peach-strength-label {5635  font-family: "IBM Plex Mono", monospace;5636  font-style: italic;5637  font-size: 0.5625rem;5638  font-weight: 300;5639  letter-spacing: 0.06em;5640  color: var(--peach-t2);5641  min-width: 36px;5642  text-align: right;5643}56445645.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5646.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5647.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5648.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }56495650/* Duress form */5651.peach-duress-status {5652  padding: 2px 8px;5653  border-radius: 999px;5654  border: 1px solid var(--peach-t3);5655  font-family: "IBM Plex Mono", monospace;5656  font-size: 0.5625rem;5657  letter-spacing: 0.07em;5658  text-transform: uppercase;5659  color: var(--peach-t2);5660  flex-shrink: 0;5661}56625663.peach-duress-status.is-active {5664  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5665  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5666  color: var(--peach-t0);5667}56685669.peach-duress-form {5670  padding: 8px 0 4px;5671  display: flex;5672  flex-direction: column;5673  gap: 6px;5674}56755676.peach-duress-form .peach-label {5677  margin-top: 4px;5678}56795680.peach-duress-actions {5681  display: flex;5682  gap: 6px;5683  align-items: center;5684  margin-top: 4px;5685}56865687.peach-duress-actions .peach-btn:first-child {5688  margin-right: auto;5689}56905691/* Improved overlay spring entrance */5692.peach-overlay-view.ov-enter-up {5693  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5694}56955696@keyframes ov-enter-up-spring {5697  from { opacity: 0; transform: translateY(16px) scale(0.98); }5698  to   { opacity: 1; transform: translateY(0) scale(1); }5699}57005701.peach-overlay-view.ov-enter-right {5702  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5703}57045705@keyframes ov-enter-right-spring {5706  from { opacity: 0; transform: translateX(18px) scale(0.98); }5707  to   { opacity: 1; transform: translateX(0) scale(1); }5708}57095710/* ── Onboarding-mode restore screens (file import) ── */5711/* Used when MainImportView renders during onboarding (no vault yet).5712   Animates like a lock-screen transition. */5713.peach-lock-view {5714  position: absolute;5715  inset: 0;5716  display: flex;5717  flex-direction: column;5718  background:5719    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5720    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5721    var(--peach-bg);5722  z-index: 2;5723  overflow: hidden;5724  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5725}57265727.peach-lock-view-header {5728  display: flex;5729  align-items: center;5730  justify-content: space-between;5731  padding: 16px 18px 12px;5732  flex-shrink: 0;5733}57345735/* ───────── Settings: auto-lock select ───────── */5736.peach-settings-select {5737  font-family: "IBM Plex Mono", monospace;5738  font-size: 0.6875rem;5739  background: transparent;5740  border: 1px solid var(--peach-t3);5741  border-radius: 4px;5742  color: var(--peach-t1);5743  padding: 3px 6px;5744  cursor: pointer;5745  outline: none;5746}5747.peach-settings-select:focus {5748  border-color: var(--peach-accent);5749}57505751/* ───────── Duress status pill (new polished) ───────── */5752.peach-duress-status-pill {5753  font-family: "IBM Plex Mono", monospace;5754  font-size: 0.5625rem;5755  text-transform: uppercase;5756  letter-spacing: 0.12em;5757  padding: 2px 8px;5758  border-radius: 12px;5759  background: var(--peach-t3);5760  color: var(--peach-t2);5761  flex-shrink: 0;5762}5763.peach-duress-status-pill.is-active {5764  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5765  color: var(--peach-accent);5766}57675768/* ───────── Entry advanced disclosure (canary) ───────── */5769.peach-entry-advanced {5770  margin-top: 12px;5771  border-top: 1px solid var(--peach-t3);5772  padding-top: 10px;5773  position: relative;5774  z-index: 1;5775}5776.peach-entry-advanced-toggle {5777  display: flex;5778  align-items: center;5779  justify-content: space-between;5780  width: 100%;5781  background: transparent;5782  border: none;5783  cursor: pointer;5784  padding: 0;5785  color: var(--peach-t2);5786}5787.peach-canary-section {5788  margin-top: 10px;5789  display: grid;5790  gap: 6px;5791}57925793/* ───────── Import: merge/replace radio choices ───────── */5794.peach-import-choice {5795  display: flex;5796  align-items: flex-start;5797  gap: 10px;5798  padding: 8px 10px;5799  border: 1px solid var(--peach-t3);5800  border-radius: 10px;5801  cursor: pointer;5802  margin-bottom: 6px;5803  transition: border-color 120ms ease, background 120ms ease;5804}5805.peach-import-choice:hover {5806  border-color: var(--peach-accent);5807}5808.peach-import-choice input[type="radio"] {5809  margin-top: 3px;5810  accent-color: var(--peach-accent);5811  flex-shrink: 0;5812}5813.peach-import-choice-main {5814  display: flex;5815  flex-direction: column;5816  gap: 2px;5817  min-width: 0;5818}5819.peach-import-choice-label {5820  font-size: 0.75rem;5821  color: var(--peach-t0);5822}5823.peach-import-choice-sub {5824  font-size: 0.6875rem;5825  color: var(--peach-t2);5826  line-height: 1.5;5827}58285829/* ───────── Export: success confirmation strip ───────── */5830.peach-export-success {5831  display: flex;5832  align-items: flex-start;5833  gap: 10px;5834  padding: 12px;5835  border-radius: 12px;5836  border: 1px solid rgba(150, 175, 110, 0.3);5837  background: rgba(150, 175, 110, 0.08);5838  color: var(--peach-t0);5839  font-size: 0.75rem;5840  line-height: 1.55;5841}5842.peach-export-success-check {5843  color: rgba(150, 175, 110, 0.9);5844  font-size: 0.875rem;5845  flex-shrink: 0;5846}58475848/* ── Trash view ──────────────────────────────────────────────────────── */5849.peach-trash-entry-row {5850  display: flex;5851  align-items: center;5852  justify-content: space-between;5853  gap: 8px;5854  padding: 8px 0;5855  border-bottom: 1px solid var(--peach-border);5856}5857.peach-trash-entry-info {5858  flex: 1;5859  min-width: 0;5860  display: flex;5861  flex-direction: column;5862  gap: 2px;5863}5864.peach-trash-entry-title {5865  font-size: 0.8125rem;5866  color: var(--peach-t0);5867  overflow: hidden;5868  text-overflow: ellipsis;5869  white-space: nowrap;5870}5871.peach-trash-entry-meta {5872  font-family: var(--font-mono);5873  font-size: 0.5625rem;5874  color: var(--peach-t2);5875  letter-spacing: 0.04em;5876}5877.peach-trash-entry-actions {5878  display: flex;5879  align-items: center;5880  gap: 4px;5881  flex-shrink: 0;5882}5883.peach-trash-delete-btn {5884  background: transparent;5885  border: 0;5886  color: var(--peach-t3);5887  font-size: 1rem;5888  line-height: 1;5889  cursor: pointer;5890  padding: 2px 5px;5891  transition: color 0.15s;5892}5893.peach-trash-delete-btn:hover { color: var(--peach-breach); }5894.peach-trash-list {5895  overflow-y: auto;5896}5897.peach-trash-footer {5898  display: flex;5899  align-items: center;5900  gap: 8px;5901  padding: 8px 0 0;5902  border-top: 1px solid var(--peach-border);5903  margin-top: 4px;5904}5905.peach-trash-purge-all {5906  background: transparent;5907  border: 0;5908  color: var(--peach-t3);5909  font-size: 0.625rem;5910  cursor: pointer;5911  padding: 4px 0;5912  letter-spacing: 0.03em;5913  transition: color 0.2s;5914}5915.peach-trash-purge-all:hover { color: var(--peach-breach); }5916.peach-trash-purge-confirm-label {5917  font-size: 0.625rem;5918  color: var(--peach-t1);5919  flex: 1;5920}59215922/* ── Settings shortcuts grid ─────────────────────────────────────────── */5923.peach-shortcuts-grid {5924  display: grid;5925  grid-template-columns: auto 1fr;5926  gap: 6px 12px;5927  align-items: center;5928  padding: 4px 0;5929}5930.peach-shortcut-key {5931  font-family: var(--font-mono);5932  font-size: 0.625rem;5933  color: var(--peach-t0);5934  background: var(--peach-t3);5935  border-radius: 4px;5936  padding: 2px 6px;5937  white-space: nowrap;5938  text-align: center;5939}5940.peach-shortcut-desc {5941  font-size: 0.6875rem;5942  color: var(--peach-t1);5943}59445945/* ── Sort bar trash button ───────────────────────────────────────────── */5946.peach-sort-trash-btn {5947  display: flex;5948  align-items: center;5949  justify-content: center;5950  padding: 3px 5px;5951  background: transparent;5952  border: none;5953  cursor: pointer;5954  color: var(--peach-t2);5955  border-radius: 4px;5956  transition: color 140ms ease, background 140ms ease;5957}5958.peach-sort-trash-btn:hover {5959  color: var(--peach-t1);5960  background: var(--peach-t3);5961}5962.peach-sort-trash-btn.is-active {5963  color: var(--peach-accent);5964}59655966/* Accent color picker */5967.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5968.peach-accent-picker {5969  display: flex;5970  flex-wrap: wrap;5971  gap: 7px;5972  padding: 2px 0;5973}5974.peach-accent-swatch {5975  width: 22px;5976  height: 22px;5977  border-radius: 50%;5978  border: 2px solid transparent;5979  cursor: pointer;5980  padding: 0;5981  transition: transform 100ms;5982  outline-offset: 2px;5983}5984.peach-accent-swatch:hover { transform: scale(1.15); }5985.peach-accent-swatch.is-active {5986  border-color: var(--peach-t0);5987  transform: scale(1.1);5988}59895990.peach-pill-group {5991  display: flex;5992  gap: 6px;5993}5994.peach-pill-group .peach-btn.is-active {5995  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5996  border-color: var(--peach-accent);5997  color: var(--peach-t0);5998}59996000/* ── Card entry styles ───────────────────────────────────────── */6001.peach-card-number {6002  font-family: var(--peach-mono);6003  letter-spacing: 0.08em;6004}60056006.peach-card-network-badge {6007  font-size: 0.625rem;6008  padding: 1px 5px;6009  border-radius: 4px;6010  border: 0.5px solid var(--peach-border);6011  color: var(--peach-text-dim);6012  margin-left: 6px;6013  vertical-align: middle;6014}60156016.peach-card-expiry-row {6017  display: flex;6018  align-items: center;6019  gap: 8px;6020}60216022.peach-card-expiry-sep {6023  color: var(--peach-text-dim);6024}60256026/* ── Pro tier — upgrade screen ──────────────────────────────── */6027.peach-pro-mark {6028  font-size: 0.5625rem;6029  color: var(--peach-accent);6030  margin-left: 6px;6031  vertical-align: super;6032  opacity: 0.7;6033}60346035.peach-pro-mini-badge {6036  display: block;6037  font-size: 0.625rem;6038  font-style: italic;6039  color: var(--peach-accent);6040  letter-spacing: 0.04em;6041  margin-top: -2px;6042  padding-left: 2px;6043  opacity: 0.85;6044  text-align: center;6045}60466047.peach-wordmark-stack {6048  display: inline-flex;6049  flex-direction: column;6050  align-items: center;6051}60526053/* ── Pro tier — upgrade page ─────────────────────────────────── */6054/* ── Pro upgrade — redesigned editorial layout ─────────────────── */60556056.peach-pro-upgrade {6057  display: flex;6058  flex-direction: column;6059  align-items: stretch;6060  gap: 10px;6061  padding: 2px 2px 12px;6062}60636064.peach-pro-eyebrow {6065  margin: 0;6066  font-family: var(--font-ui);6067  font-size: 0.625rem;6068  font-weight: 500;6069  letter-spacing: 0.12em;6070  color: var(--peach-accent);6071}60726073.peach-pro-headline {6074  margin: 0;6075  font-family: var(--font-display, "Cormorant Garamond", serif);6076  font-size: 30px;6077  font-weight: 700;6078  font-style: normal;6079  line-height: 1.05;6080  color: var(--peach-t0);6081  letter-spacing: -0.01em;6082}6083.peach-pro-headline em {6084  font-style: italic;6085  font-weight: 400;6086  color: var(--peach-accent);6087}60886089.peach-pro-subtitle {6090  margin: 0;6091  font-size: 0.6875rem;6092  line-height: 1.5;6093  color: var(--peach-t1);6094}60956096/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6097.peach-pro-section-label {6098  margin: 6px 0 0;6099  font-family: var(--font-ui);6100  font-size: 0.5625rem;6101  font-weight: 500;6102  letter-spacing: 0.12em;6103  text-transform: uppercase;6104  color: var(--peach-t2);6105}61066107/* 2-column numbered feature grid */6108.peach-pro-grid {6109  display: grid;6110  grid-template-columns: 1fr 1fr;6111  border-top: 1px solid var(--peach-border);6112  border-left: 1px solid var(--peach-border);6113}61146115.peach-pro-grid-item {6116  display: flex;6117  flex-direction: column;6118  gap: 2px;6119  padding: 8px 9px;6120  border-right: 1px solid var(--peach-border);6121  border-bottom: 1px solid var(--peach-border);6122}61236124.peach-pro-grid-item--wide {6125  grid-column: 1 / -1;6126}61276128.peach-pro-grid-num {6129  font-family: var(--font-mono);6130  font-size: 0.5625rem;6131  color: var(--peach-accent);6132  letter-spacing: 0.06em;6133  opacity: 0.85;6134}61356136.peach-pro-grid-name {6137  font-size: 0.8125rem;6138  font-weight: 500;6139  color: var(--peach-t0);6140  line-height: 1.2;6141}61426143.peach-pro-grid-desc {6144  font-size: 0.625rem;6145  color: var(--peach-t1);6146  line-height: 1.4;6147}61486149.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6150  animation: peach-pulse-accent 600ms ease-out forwards;6151}61526153@keyframes peach-pulse-accent {6154  0%   { opacity: 1; transform: scale(1.2); }6155  100% { opacity: 0.85; transform: scale(1); }6156}61576158/* Actions */6159.peach-pro-upgrade-actions {6160  display: flex;6161  flex-direction: column;6162  align-items: stretch;6163  gap: 10px;6164}61656166.peach-pro-pricing {6167  margin: 0;6168  font-size: 1rem;6169  font-weight: 600;6170  color: var(--peach-t0);6171  letter-spacing: 0.01em;6172}6173.peach-pro-pricing-sub {6174  font-size: 0.75rem;6175  font-weight: 400;6176  color: var(--peach-t1);6177  letter-spacing: 0.02em;6178}61796180.peach-pro-upgrade-cta {6181  display: flex;6182  align-items: center;6183  justify-content: center;6184  text-decoration: none;6185  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6186  border: 1px solid var(--peach-accent);6187  border-radius: 10px;6188  color: var(--peach-accent);6189  font-family: var(--font-ui);6190  font-size: 0.8125rem;6191  font-weight: 600;6192  letter-spacing: 0.06em;6193  padding: 11px 16px;6194  transition: background 0.15s ease, color 0.15s ease;6195}6196.peach-pro-upgrade-cta:hover {6197  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6198}61996200.peach-pro-key-divider {6201  display: flex;6202  align-items: center;6203  gap: 8px;6204  color: var(--peach-t2);6205  font-size: 0.5625rem;6206  letter-spacing: 0.1em;6207}6208.peach-pro-key-divider::before,6209.peach-pro-key-divider::after {6210  content: "";6211  flex: 1;6212  height: 1px;6213  background: var(--peach-border);6214}62156216/* Inline key entry row */6217.peach-pro-key-inline {6218  display: flex;6219  align-items: center;6220  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6221  border: 1px solid var(--peach-border);6222  border-radius: 8px;6223  overflow: hidden;6224}6225.peach-pro-key-inline-input {6226  flex: 1;6227  background: transparent;6228  border: none;6229  outline: none;6230  color: var(--peach-t1);6231  font-family: var(--font-mono);6232  font-size: 0.625rem;6233  letter-spacing: 0.06em;6234  padding: 9px 10px;6235}6236.peach-pro-key-inline-input::placeholder {6237  color: var(--peach-t2);6238}6239.peach-pro-key-apply {6240  background: transparent;6241  border: none;6242  border-left: 1px solid var(--peach-border);6243  color: var(--peach-t2);6244  font-family: var(--font-ui);6245  font-size: 0.5625rem;6246  font-weight: 600;6247  letter-spacing: 0.08em;6248  padding: 9px 10px;6249  cursor: pointer;6250  transition: color 0.15s ease;6251  flex-shrink: 0;6252}6253.peach-pro-key-apply:not(:disabled):hover {6254  color: var(--peach-accent);6255}6256.peach-pro-key-apply:disabled {6257  opacity: 0.35;6258  cursor: not-allowed;6259}62606261/* ── Pro tier — key ceremony ─────────────────────────────────── */6262.peach-pro-key-ceremony {6263  display: flex;6264  flex-direction: column;6265  align-items: center;6266  gap: 12px;6267  padding: 20px 4px 16px;6268}62696270.peach-pro-key-ceremony .peach-lock-rune-string {6271  font-size: 1rem;6272  gap: 12px;6273  flex: 0;6274  justify-content: center;6275}62766277.peach-pro-key-ceremony-label {6278  margin: 0;6279  font-size: 0.6875rem;6280  color: var(--peach-t2);6281  font-style: italic;6282  letter-spacing: 0.04em;6283}62846285.peach-pro-key-input {6286  font-family: var(--font-mono, monospace);6287  letter-spacing: 0.06em;6288  text-align: center;6289  width: 100%;6290  box-sizing: border-box;6291}62926293.peach-pro-key-error {6294  margin: 0;6295  font-size: 0.75rem;6296  text-align: center;6297  color: var(--peach-breach, #e55);6298  padding: 0;6299}63006301.peach-pro-key-activate {6302  width: 100%;6303  text-align: center;6304  box-sizing: border-box;6305  padding: 10px 20px;6306  font-size: 0.8125rem;6307}63086309.peach-pro-key-cancel {6310  background: transparent;6311  border: 0;6312  color: var(--peach-t2);6313  font-size: 0.6875rem;6314  cursor: pointer;6315  padding: 2px 8px;6316  transition: color 0.2s;6317}63186319.peach-pro-key-cancel:hover { color: var(--peach-accent); }63206321/* ── Pro tier — active state ─────────────────────────────────── */6322.peach-pro-active {6323  display: flex;6324  flex-direction: column;6325  align-items: center;6326  gap: 0;6327  padding: 8px 4px 16px;6328  min-height: 280px;6329}63306331.peach-pro-active-hero {6332  display: flex;6333  flex-direction: column;6334  align-items: center;6335  gap: 6px;6336  padding: 20px 0 8px;6337}63386339.peach-pro-active-mark-wrap {6340  display: flex;6341  align-items: center;6342  justify-content: center;6343  margin-bottom: 4px;6344}63456346.peach-pro-active-mark {6347  width: 60px;6348  height: 60px;6349}63506351.peach-pro-active-title {6352  font-family: var(--font-display, var(--font-ui));6353  font-size: 26px;6354  margin: 0;6355  color: var(--peach-t0);6356  letter-spacing: 0.01em;6357}63586359.peach-pro-active-since {6360  margin: 0;6361  font-size: 0.6875rem;6362  color: var(--peach-t2);6363  font-style: italic;6364}63656366.peach-pro-active-features {6367  display: flex;6368  flex-direction: column;6369  gap: 8px;6370  width: 100%;6371  padding: 14px 8px 0;6372  border-top: 1px solid var(--peach-border);6373  flex: 1;6374}63756376.peach-pro-active-feature {6377  display: flex;6378  align-items: center;6379  gap: 9px;6380}63816382.peach-pro-active-feature-mark {6383  color: var(--peach-accent);6384  font-size: 0.625rem;6385  opacity: 0.65;6386  flex-shrink: 0;6387}63886389.peach-pro-active-feature-name {6390  font-size: 0.75rem;6391  color: var(--peach-t1);6392}63936394.peach-pro-deactivate {6395  align-self: center;6396  background: transparent;6397  border: 0;6398  color: var(--peach-t3);6399  font-size: 0.625rem;6400  cursor: pointer;6401  padding: 8px 0 0;6402  margin-top: 16px;6403  letter-spacing: 0.03em;6404  transition: color 0.2s;6405}64066407.peach-pro-deactivate:hover { color: var(--peach-t2); }64086409.peach-pro-deactivate:disabled {6410  opacity: 0.5;6411  cursor: default;6412}64136414/* ── Pro card activation sparkles & thank-you ── */6415button.peach-pro-active-mark-wrap {6416  background: transparent;6417  border: 0;6418  padding: 0;6419  cursor: pointer;6420  position: relative;6421  overflow: visible;6422}64236424.peach-pro-sparks {6425  position: absolute;6426  inset: 0;6427  pointer-events: none;6428  overflow: visible;6429}64306431.peach-pro-spark {6432  position: absolute;6433  top: 50%;6434  left: 50%;6435  font-size: 9px;6436  line-height: 1;6437  opacity: 0;6438  transform: translate(-50%, -50%);6439  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;6440}64416442@keyframes peach-pro-spark-fly {6443  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }6444  25%  { opacity: 1; }6445  100% {6446    opacity: 0;6447    transform: translate(6448      calc(-50% + var(--spark-x, 0px)),6449      calc(-50% + var(--spark-y, -40px))6450    ) scale(0.8);6451  }6452}64536454.peach-pro-thankyou-text {6455  margin: 4px 0 0;6456  font-size: 0.6875rem;6457  font-style: italic;6458  color: currentColor;6459  opacity: 0;6460  animation: peach-pro-thankyou-flash 2.5s ease both;6461}64626463@keyframes peach-pro-thankyou-flash {6464  0%   { opacity: 0; transform: translateY(4px); }6465  15%  { opacity: 0.75; transform: translateY(0); }6466  75%  { opacity: 0.75; }6467  100% { opacity: 0; }6468}64696470/* ── Pro advanced health remediation queue ──────────────────── */6471.peach-health-pro-queue {6472  display: flex;6473  flex-direction: column;6474  gap: 10px;6475  padding: 12px;6476  margin: 0 0 12px;6477  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6478  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6479  border-radius: 10px;6480}64816482.peach-health-pro-queue-head {6483  display: flex;6484  justify-content: space-between;6485  align-items: baseline;6486}64876488.peach-health-pro-queue-title {6489  font-size: 0.75rem;6490  font-weight: 500;6491  letter-spacing: 0.04em;6492  text-transform: uppercase;6493  color: var(--peach-accent);6494}64956496.peach-health-pro-queue-score {6497  font-size: 0.6875rem;6498  color: var(--peach-t2);6499}65006501.peach-health-pro-row {6502  display: flex;6503  gap: 10px;6504  align-items: center;6505  padding: 8px 0;6506  border-top: 1px solid var(--peach-border);6507}65086509.peach-health-pro-row-info {6510  flex: 1;6511  display: flex;6512  flex-direction: column;6513  gap: 4px;6514  min-width: 0;6515}65166517.peach-health-pro-action {6518  flex: 0 0 auto;6519  padding: 4px 8px;6520  font-size: 0.5625rem;6521  letter-spacing: 0.08em;6522  text-transform: uppercase;6523}65246525.peach-health-pro-row-name {6526  font-size: 0.8125rem;6527  color: var(--peach-t0);6528  overflow: hidden;6529  text-overflow: ellipsis;6530  white-space: nowrap;6531}65326533.peach-health-pro-row-meta {6534  font-size: 0.6875rem;6535  color: var(--peach-t2);6536}65376538.peach-health-pro-bar {6539  height: 2px;6540  background: var(--peach-border);6541  border-radius: 2px;6542  overflow: hidden;6543  margin-top: 2px;6544}65456546.peach-health-pro-bar-fill {6547  height: 100%;6548  background: var(--peach-accent);6549  transition: width 200ms ease-out;6550}65516552/* ── Pro activation celebration ── */6553@keyframes peach-pro-bloom {6554  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6555  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6556                 drop-shadow(0 0 48px var(--peach-glow)); }6557  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6558}65596560@keyframes peach-pro-wordmark-in {6561  from { opacity: 0; transform: translateY(4px); }6562  to   { opacity: 1; transform: translateY(0); }6563}65646565@keyframes peach-pro-fade-out {6566  from { opacity: 1; }6567  to   { opacity: 0; }6568}65696570.peach-pro-celebration {6571  background:6572    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6573    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6574    var(--peach-bg);6575  border: 1px solid var(--peach-t3);6576  box-shadow:6577    0 2px 8px rgba(0,0,0,0.55),6578    0 14px 48px rgba(0,0,0,0.7),6579    0 0 0 1px rgba(240,232,216,0.04);6580  overflow: hidden;6581  width: 320px;6582  height: 520px;6583  display: flex;6584  flex-direction: column;6585  align-items: center;6586  justify-content: center;6587  gap: 8px;6588  padding: 32px 24px;6589  text-align: center;6590}65916592.peach-pro-celebration.is-leaving {6593  animation: peach-pro-fade-out 400ms ease forwards;6594}65956596.peach-pro-bloom-target {6597  display: flex;6598  align-items: center;6599  justify-content: center;6600  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6601  margin-bottom: 12px;6602}66036604.peach-pro-bloom-icon {6605  width: 48px;6606  height: 48px;6607}66086609.peach-pro-wordmark {6610  font-family: var(--font-display);6611  font-size: 22px;6612  font-style: italic;6613  font-weight: 400;6614  color: var(--peach-accent);6615  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6616}66176618.peach-pro-thankyou {6619  font-size: 0.75rem;6620  font-style: italic;6621  color: var(--peach-t2);6622  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6623}662466256626/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6627.peach-pro-notice-banner {6628  display: flex;6629  align-items: center;6630  gap: 8px;6631  padding: 7px 12px;6632  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6633  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6634  font-size: 0.6875rem;6635  color: var(--peach-t2);6636  font-family: "IBM Plex Mono", monospace;6637  flex-shrink: 0;6638}66396640.peach-pro-notice-link {6641  background: none;6642  border: none;6643  padding: 0;6644  cursor: pointer;6645  font-size: 0.6875rem;6646  color: var(--peach-accent);6647  font-family: "IBM Plex Mono", monospace;6648  margin-left: auto;6649  white-space: nowrap;6650}66516652.peach-pro-notice-close {6653  background: none;6654  border: none;6655  padding: 0 0 0 4px;6656  cursor: pointer;6657  font-size: 0.625rem;6658  color: var(--peach-t3);6659  line-height: 1;6660}66616662/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6663   Renders over whatever view is showing. 60-second expiry; the popup ticks6664   the countdown each second and clears the banner when it hits zero. */6665.peach-pair-request-banner {6666  display: flex;6667  flex-direction: column;6668  gap: 8px;6669  padding: 10px 12px;6670  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6671  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6672  font-family: "IBM Plex Mono", monospace;6673  flex-shrink: 0;6674}66756676.peach-pair-toast {6677  padding: 8px 12px;6678  font-family: "IBM Plex Mono", monospace;6679  font-size: 0.75rem;6680  color: var(--peach-t1);6681  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6682  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6683  flex-shrink: 0;6684  text-align: center;6685}66866687.peach-pair-toast strong {6688  color: var(--peach-t0);6689  font-weight: 500;6690}66916692.peach-pair-request-header {6693  display: flex;6694  align-items: center;6695  gap: 8px;6696  font-size: 0.75rem;6697  color: var(--peach-t1);6698}66996700.peach-pair-request-mark {6701  font-size: 0.875rem;6702  display: inline-flex;6703  align-items: center;6704}67056706.peach-pair-request-icon {6707  width: 1em;6708  height: 1em;6709}67106711.peach-pair-request-title {6712  font-weight: 600;6713  color: var(--peach-t0);6714}67156716.peach-pair-request-countdown {6717  margin-left: auto;6718  font-variant-numeric: tabular-nums;6719  color: var(--peach-t2);6720  font-size: 0.6875rem;6721}67226723.peach-pair-request-body {6724  margin: 0;6725  font-size: 0.75rem;6726  color: var(--peach-t1);6727  line-height: 1.4;6728}67296730.peach-pair-request-body strong {6731  color: var(--peach-t0);6732  font-weight: 600;6733}67346735.peach-pair-request-actions {6736  display: flex;6737  gap: 8px;6738  justify-content: flex-end;6739}67406741/* ─── First-run onboarding ──────────────────────────────────────────────6742   Three-card welcome shown once before vault creation. The PeachScript6743   rune background drifts behind everything at very low opacity — it's6744   atmosphere, not focus. The cards themselves use the same panel6745   language as the rest of the popup so the transition into NewVault is6746   continuous, not a jarring switch of visual register. */67476748.peach-onboarding {6749  position: relative;6750  display: flex;6751  flex-direction: column;6752  width: 100%;6753  height: 100%;6754  padding: 16px 16px 18px;6755  box-sizing: border-box;6756  overflow: hidden;6757  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6758}67596760.peach-onboarding.is-completing {6761  animation: peach-onboard-exit 200ms ease-out forwards;6762}67636764.peach-rune-background {6765  position: absolute;6766  inset: 0;6767  width: 100%;6768  height: 100%;6769  pointer-events: none;6770  z-index: 0;6771  transition: opacity 500ms ease-out;6772}67736774.peach-onboarding.is-completing .peach-rune-background {6775  opacity: 0;6776}67776778.peach-onboarding-header {6779  position: relative;6780  z-index: 1;6781  display: flex;6782  align-items: center;6783  margin-bottom: 14px;6784}67856786.peach-onboarding-card {6787  position: relative;6788  z-index: 1;6789  flex: 1;6790  display: flex;6791  flex-direction: column;6792  gap: 10px;6793  padding: 22px 20px;6794  border-radius: 16px;6795  border: 1px solid var(--peach-t3);6796  background:6797    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6798  backdrop-filter: blur(3px);6799  -webkit-backdrop-filter: blur(3px);6800  box-shadow:6801    inset 0 1px 0 rgba(240, 232, 216, 0.04),6802    0 12px 28px rgba(0, 0, 0, 0.12);6803  cursor: pointer;6804  user-select: none;6805  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6806}68076808.peach-onboarding-card.is-exiting {6809  animation: peach-card-out 120ms ease-in forwards;6810  pointer-events: none;6811}68126813.peach-onboarding-card-headline {6814  margin: 0;6815  font-family: var(--font-display);6816  font-style: italic;6817  font-weight: 400;6818  font-size: 22px;6819  line-height: 1.05;6820  color: var(--peach-t0);6821  white-space: pre-line;6822}68236824.peach-onboarding-divider {6825  margin: 4px 0 6px;6826  border: 0;6827  border-top: 1px solid var(--peach-t3);6828  width: 100%;6829}68306831.peach-onboarding-body {6832  margin: 0;6833  font-size: 0.8125rem;6834  line-height: 1.6;6835  color: var(--peach-t1);6836}68376838.peach-onboarding-warning {6839  display: flex;6840  align-items: flex-start;6841  gap: 8px;6842  margin: 6px 0 0;6843  padding-top: 8px;6844  border-top: 1px dashed var(--peach-t3);6845  font-size: 0.8125rem;6846  line-height: 1.5;6847  color: var(--peach-t1);6848}68496850.peach-onboarding-warning-icon {6851  color: var(--peach-accent);6852  font-size: 0.8125rem;6853  line-height: 1.5;6854  flex: 0 0 auto;6855}68566857.peach-onboarding-nav {6858  position: relative;6859  z-index: 1;6860  display: flex;6861  align-items: center;6862  justify-content: space-between;6863  margin-top: 12px;6864  padding: 0 4px;6865}68666867.peach-onboarding-dots {6868  display: flex;6869  align-items: center;6870  gap: 6px;6871}68726873.peach-onboarding-dot {6874  width: 6px;6875  height: 6px;6876  border-radius: 50%;6877  background: var(--peach-t2);6878  transition: width 200ms ease, height 200ms ease, background 200ms ease;6879}68806881.peach-onboarding-dot.is-active {6882  width: 8px;6883  height: 8px;6884  background: var(--peach-accent);6885}68866887.peach-onboarding-next {6888  background: none;6889  border: none;6890  padding: 4px 0;6891  cursor: pointer;6892  font-family: "IBM Plex Mono", monospace;6893  font-size: 0.6875rem;6894  letter-spacing: 0.04em;6895  color: var(--peach-t1);6896  transition: color 150ms ease;6897}68986899.peach-onboarding-next:hover {6900  color: var(--peach-t0);6901}69026903.peach-onboarding-next:disabled {6904  opacity: 0.5;6905  cursor: default;6906}69076908.peach-onboarding-back {6909  background: none;6910  border: none;6911  padding: 4px 0;6912  cursor: pointer;6913  font-family: "IBM Plex Mono", monospace;6914  font-size: 0.6875rem;6915  letter-spacing: 0.04em;6916  color: var(--peach-t2);6917  transition: color 150ms ease;6918}69196920.peach-onboarding-back:hover {6921  color: var(--peach-t0);6922}69236924.peach-onboarding-back:disabled {6925  opacity: 0.5;6926  cursor: default;6927}69286929/* Reserve back-button width on the first card so the dots stay centred */6930.peach-onboarding-back-spacer {6931  width: 44px;6932}69336934.peach-onboarding-choice-row {6935  display: grid;6936  grid-template-columns: 1fr;6937  gap: 8px;6938  margin-top: 14px;6939}69406941.peach-onboarding-choice {6942  min-height: 34px;6943  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);6944  border-radius: 8px;6945  padding: 8px 10px;6946  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);6947  color: var(--peach-t0);6948  font-size: 0.76rem;6949  font-weight: 700;6950  text-align: left;6951}69526953.peach-onboarding-choice--adopt {6954  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);6955  background: color-mix(in srgb, var(--peach-accent) 13%, transparent);6956}69576958.peach-adopt-vault {6959  position: relative;6960  min-height: 100%;6961  padding: 22px;6962  display: grid;6963  place-items: center;6964}69656966.peach-adopt-card {6967  position: relative;6968  z-index: 1;6969  width: min(100%, 330px);6970  padding: 20px;6971  border-radius: 8px;6972  border: 1px solid color-mix(in srgb, var(--peach-t0) 13%, transparent);6973  background: color-mix(in srgb, var(--peach-surface) 90%, transparent);6974  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);6975}69766977.peach-adopt-card h1 {6978  margin: 0 0 10px;6979  font-size: 1.28rem;6980  line-height: 1.15;6981}69826983.peach-adopt-card p {6984  margin: 0 0 14px;6985  color: var(--peach-t1);6986  line-height: 1.35;6987}69886989.peach-adopt-input {6990  margin-bottom: 12px;6991}69926993.peach-adopt-card textarea.peach-adopt-input {6994  width: 100%;6995  resize: vertical;6996  overflow-wrap: anywhere;6997  font-family: "IBM Plex Mono", monospace;6998  font-size: 0.64rem;6999}70007001.peach-adopt-qr-video {7002  display: block;7003  width: 100%;7004  max-height: 220px;7005  margin: 0 0 12px;7006  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);7007  border-radius: 8px;7008  background: #000;7009  object-fit: cover;7010}70117012.peach-adoption-source-invitation {7013  display: flex;7014  flex-direction: column;7015  align-items: center;7016  gap: 10px;7017  padding: 4px 18px 16px;7018  text-align: center;7019}70207021.peach-pair-qr {7022  display: block;7023  max-width: min(224px, 100%);7024  height: auto;7025  padding: 8px;7026  border-radius: 10px;7027  background: #fff;7028}70297030/* The same invitation the QR carries, as text — the fallback when a camera7031   won't cooperate. Monospace and full width so it can be read out loud. */7032.peach-pair-invitation-text {7033  width: 100%;7034  resize: none;7035  padding: 8px 10px;7036  border-radius: 10px;7037  border: 1px solid var(--peach-border);7038  background: color-mix(in srgb, var(--peach-t0) 3%, transparent);7039  color: var(--peach-t1);7040  font-family: var(--peach-mono, ui-monospace, SFMono-Regular, Menlo, monospace);7041  font-size: 10px;7042  line-height: 1.5;7043  word-break: break-all;7044}70457046.peach-adopt-card > .peach-btn + .peach-btn {7047  margin-top: 8px;7048}70497050.peach-adopt-actions {7051  display: flex;7052  gap: 10px;7053  margin-top: 14px;7054}70557056.peach-adopt-actions > button {7057  flex: 1;7058}70597060.peach-adopt-birds {7061  width: 120px;7062  height: 54px;7063  margin-bottom: 14px;7064  position: relative;7065}70667067.peach-adopt-birds::before {7068  content: "";7069  position: absolute;7070  left: 29px;7071  right: 29px;7072  top: 25px;7073  height: 1px;7074  background: color-mix(in srgb, var(--peach-accent) 50%, transparent);7075}70767077.peach-adopt-birds span {7078  position: absolute;7079  top: 11px;7080  width: 34px;7081  height: 28px;7082  border-radius: 50% 50% 46% 46%;7083  background: color-mix(in srgb, var(--peach-accent) 45%, var(--peach-t0));7084  box-shadow: 0 0 18px color-mix(in srgb, var(--peach-accent) 24%, transparent);7085  animation: peach-adopt-bob 1.8s ease-in-out infinite;7086}70877088.peach-adopt-birds span:first-child {7089  left: 12px;7090}70917092.peach-adopt-birds span:last-child {7093  right: 12px;7094  animation-delay: 0.25s;7095}70967097.peach-adopt-sas {7098  margin: 18px 0;7099  padding: 14px;7100  border-radius: 8px;7101  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);7102  color: var(--peach-t0);7103  font-size: 1.35rem;7104  font-weight: 800;7105  font-variant-numeric: tabular-nums;7106  text-align: center;7107}71087109@keyframes peach-adopt-bob {7110  0%, 100% { transform: translateY(0); }7111  50% { transform: translateY(-5px); }7112}71137114.peach-onboarding-mobile-card-buttons {7115  display: flex;7116  flex-direction: column;7117  gap: 8px;7118  margin-top: 16px;7119}71207121@keyframes peach-onboard-enter {7122  from { opacity: 0; transform: translateY(20px); }7123  to   { opacity: 1; transform: translateY(0); }7124}71257126@keyframes peach-onboard-exit {7127  from { opacity: 1; }7128  to   { opacity: 0; }7129}71307131@keyframes peach-card-in {7132  from { opacity: 0; transform: translateX(12px); }7133  to   { opacity: 1; transform: translateX(0); }7134}71357136@keyframes peach-card-out {7137  from { opacity: 1; transform: translateX(0); }7138  to   { opacity: 0; transform: translateX(-12px); }7139}71407141/* ─── New vault screen — matched to onboarding card language ─────────── */71427143/* Two classes so this beats the shared .peach-screen.lock-screen--vault-stage7144   rule (same element) without loosening the unlock/restore screens. The7145   create-vault screen is the only vault-stage view tall enough to overflow7146   the 520px popup, so its spacing is tuned to fit header → card → restore →7147   recovery warning with nothing clipped. */7148.peach-screen.peach-newvault {7149  position: relative;7150  display: flex;7151  flex-direction: column;7152  gap: 12px;7153  padding: 14px 16px 12px;7154  overflow: hidden;7155}71567157/* Suppress the warm-blob ambient art inherited from .lock-screen — the7158   new vault card now carries the visual weight. */7159.peach-newvault::before {7160  content: none;7161}71627163.peach-newvault-header {7164  position: relative;7165  z-index: 2;7166  display: flex;7167  align-items: center;7168  gap: 10px;7169  margin-bottom: 2px;7170}71717172.peach-newvault-back {7173  display: inline-flex;7174  align-items: center;7175  gap: 4px;7176  background: transparent;7177  border: none;7178  color: var(--peach-t2);7179  font-family: "IBM Plex Mono", monospace;7180  font-size: 0.625rem;7181  letter-spacing: 0.06em;7182  cursor: pointer;7183  padding: 4px 6px;7184  border-radius: 6px;7185  transition: color 120ms ease, background 120ms ease;7186}71877188.peach-newvault-back:hover {7189  color: var(--peach-t0);7190  background: rgba(240, 232, 216, 0.04);7191}71927193.peach-newvault-mark {7194  position: absolute;7195  right: -12px;7196  top: 6px;7197  width: 110px;7198  height: 110px;7199  pointer-events: none;7200  opacity: 0.10;7201  filter: saturate(0.9);7202  z-index: 0;7203}7204.peach-newvault-mark-art {7205  width: 100%;7206  height: 100%;7207}7208.peach-newvault-mark-art path:nth-child(1) {7209  fill: rgba(123, 144, 96, 0.88);7210}7211.peach-newvault-mark-art path:nth-child(2) {7212  stroke: rgba(94, 122, 66, 0.95);7213}72147215.peach-newvault-card {7216  position: relative;7217  z-index: 1;7218  display: flex;7219  flex-direction: column;7220  gap: 8px;7221  padding: 16px 20px 14px;7222  border-radius: 16px;7223  border: 1px solid var(--peach-t3);7224  background:7225    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));7226  backdrop-filter: blur(3px);7227  -webkit-backdrop-filter: blur(3px);7228  box-shadow:7229    inset 0 1px 0 rgba(240, 232, 216, 0.04),7230    0 12px 28px rgba(0, 0, 0, 0.12);7231  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;7232}72337234.peach-newvault-headline {7235  margin: 0;7236  font-family: var(--font-display);7237  font-style: italic;7238  font-weight: 400;7239  font-size: 24px;7240  line-height: 1.05;7241  color: var(--peach-t0);7242  white-space: pre-line;7243}72447245.peach-newvault-divider {7246  margin: 2px 0 4px;7247  border: 0;7248  border-top: 1px solid var(--peach-t3);7249  width: 100%;7250}72517252.peach-newvault-field {7253  display: flex;7254  flex-direction: column;7255  gap: 4px;7256}72577258.peach-newvault-label-row {7259  display: flex;7260  align-items: center;7261  justify-content: space-between;7262}72637264/* Monospace input scaled to the card. Replaces the 22px unlock-input7265   so the placeholder no longer overflows and the field reads as part7266   of the same surface as the body copy. */7267.peach-newvault-input {7268  font-size: 0.875rem;7269  letter-spacing: 0.18em;7270  padding: 8px 0;7271}7272.peach-newvault-input::placeholder {7273  letter-spacing: 0.18em;7274  color: var(--peach-t2);7275}72767277.peach-newvault-hint {7278  margin: 2px 0 0;7279  font-family: "IBM Plex Mono", monospace;7280  font-size: 0.625rem;7281  color: var(--peach-t2);7282  letter-spacing: 0.04em;7283}72847285.peach-newvault-submit {7286  margin-top: 4px;7287}72887289.peach-newvault-warning {7290  display: flex;7291  align-items: flex-start;7292  gap: 8px;7293  margin: 2px 0 0;7294  padding-top: 8px;7295  border-top: 1px dashed var(--peach-t3);7296  font-size: 0.75rem;7297  line-height: 1.45;7298  color: var(--peach-t1);7299}73007301.peach-newvault-warning-icon {7302  color: var(--peach-accent);7303  font-size: 0.8125rem;7304  line-height: 1.4;7305  flex: 0 0 auto;7306}73077308/* Restore options sit inside the card, directly under "create vault", so7309   they are always reachable without scrolling. The top divider mirrors the7310   warning's so the choice reads as a deliberate fork, not a footnote. */7311.peach-newvault-restore {7312  position: relative;7313  z-index: 1;7314  display: flex;7315  flex-direction: column;7316  gap: 4px;7317  margin-top: 4px;7318  padding-top: 10px;7319  border-top: 1px dashed var(--peach-t3);7320}73217322/* Settings body — warm accent gradient gives the glass something to blur against */7323.peach-settings-body {7324  background:7325    radial-gradient(7326      ellipse at 30% 20%,7327      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7328      transparent 60%7329    );7330}73317332/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7333/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7334 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7335 * (replacing the vault from a backup file) and "hazard" for actions that7336 * are absolutely irreversible (Panic). Both use the same card scaffold so7337 * they read as a pair, but the colour family signals the severity at a7338 * glance — yellow for caution, red for don't.7339 */7340.peach-danger-card {7341  --danger-tint: 235, 158, 52; /* amber */7342  display: flex;7343  flex-direction: column;7344  gap: 8px;7345  padding: 14px;7346  margin-top: 10px;7347  border-radius: 12px;7348  border: 1px solid rgba(var(--danger-tint), 0.32);7349  background:7350    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7351    rgba(var(--danger-tint), 0.04);7352  box-shadow:7353    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7354    0 0 24px rgba(var(--danger-tint), 0.04);7355  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7356}73577358.peach-danger-card:hover {7359  border-color: rgba(var(--danger-tint), 0.55);7360  box-shadow:7361    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7362    0 0 36px rgba(var(--danger-tint), 0.10);7363}73647365.peach-danger-card--hazard {7366  --danger-tint: 220, 38, 38; /* red */7367}73687369.peach-danger-card-head {7370  display: flex;7371  align-items: center;7372  gap: 10px;7373}73747375.peach-danger-card-glyph {7376  width: 28px;7377  height: 28px;7378  flex-shrink: 0;7379  display: flex;7380  align-items: center;7381  justify-content: center;7382  border-radius: 8px;7383  background: rgba(var(--danger-tint), 0.12);7384  color: rgba(var(--danger-tint), 0.95);7385  font-size: 1rem;7386  line-height: 1;7387}73887389.peach-danger-card-title {7390  margin: 0;7391  font-size: 0.8125rem;7392  font-weight: 600;7393  color: rgba(var(--danger-tint), 0.92);7394  letter-spacing: 0.01em;7395}73967397.peach-danger-card-copy {7398  margin: 0;7399  font-size: 0.6875rem;7400  line-height: 1.5;7401  color: var(--peach-t2);7402}74037404.peach-danger-card-button {7405  width: 100%;7406  padding: 9px;7407  margin-top: 4px;7408  background: transparent;7409  border: 1px solid rgba(var(--danger-tint), 0.45);7410  border-radius: 8px;7411  color: rgba(var(--danger-tint), 0.9);7412  font-size: 0.75rem;7413  font-weight: 500;7414  letter-spacing: 0.02em;7415  cursor: pointer;7416  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7417}74187419.peach-danger-card-button:hover {7420  background: rgba(var(--danger-tint), 0.10);7421  border-color: rgba(var(--danger-tint), 0.75);7422  color: rgb(var(--danger-tint));7423}74247425.peach-adoption-sas {7426  margin: 16px auto 0;7427  padding: 12px 16px;7428  border: 1px solid color-mix(in srgb, var(--peach-t0) 18%, transparent);7429  border-radius: 10px;7430  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);7431  color: var(--peach-t0);7432  text-align: center;7433}74347435.peach-adoption-sas strong {7436  font-size: 1.65rem;7437  font-variant-numeric: tabular-nums;7438  letter-spacing: 0.18em;7439  white-space: nowrap;7440}74417442/* ── Panic flow (three-step destruction) ───────────────────────────────── */7443.peach-panic {7444  display: flex;7445  flex-direction: column;7446  flex: 1;7447  min-height: 0;7448  padding: 28px 20px 20px;7449  gap: 18px;7450  overflow-y: auto;7451  scrollbar-width: none;7452  -ms-overflow-style: none;7453}74547455.peach-panic::-webkit-scrollbar { display: none; }74567457.peach-panic-step2 {7458  background: rgba(220, 38, 38, 0.04);7459}74607461.peach-panic-step3 {7462  position: relative;7463  background: #0f0505;7464  color: #ffffff;7465  overflow: hidden;7466}74677468.peach-panic-rune-bg {7469  position: absolute;7470  inset: 0;7471  opacity: 0.22;7472  pointer-events: none;7473  overflow: hidden;7474}74757476.peach-panic-rune-bg canvas {7477  width: 100% !important;7478  height: 100% !important;7479}74807481.peach-panic-icon {7482  font-size: 32px;7483  color: rgb(220, 38, 38);7484  line-height: 1;7485}74867487.peach-panic-title {7488  margin: 0;7489  font-size: 18px;7490  font-weight: 500;7491  color: var(--peach-t1);7492}74937494.peach-panic-title--severe {7495  font-size: 20px;7496  font-weight: 700;7497  color: rgb(220, 38, 38);7498}74997500.peach-panic-body {7501  margin: 0;7502  font-size: 0.8125rem;7503  line-height: 1.55;7504  color: var(--peach-t2);7505}75067507.peach-panic-body--severe {7508  color: rgba(220, 38, 38, 0.85);7509}75107511.peach-panic-body--final {7512  font-size: 1rem;7513  font-weight: 700;7514  color: rgb(255, 80, 80);7515  line-height: 1.4;7516}75177518.peach-panic-body--final-intro {7519  font-size: 1rem;7520  color: #ffffff;7521  font-weight: 400;7522}75237524.peach-panic-divider {7525  height: 1px;7526  background: rgba(255, 255, 255, 0.08);7527  margin: 4px 0;7528}75297530.peach-panic-confirm-input {7531  width: 100%;7532  padding: 10px 12px;7533  background: rgba(255, 255, 255, 0.02);7534  border: 1px solid rgba(220, 38, 38, 0.4);7535  border-radius: 8px;7536  color: var(--peach-t1);7537  font-family: "IBM Plex Mono", monospace;7538  font-size: 0.875rem;7539  letter-spacing: 0.12em;7540  text-transform: uppercase;7541}75427543.peach-panic-confirm-input:focus {7544  outline: none;7545  border-color: rgb(220, 38, 38);7546}75477548.peach-panic-confirm-input--match {7549  border-color: rgb(220, 38, 38);7550  color: rgb(220, 38, 38);7551}75527553.peach-panic-confirm-label {7554  font-size: 0.6875rem;7555  color: var(--peach-t2);7556  margin: 0 0 -8px;7557  letter-spacing: 0.06em;7558}75597560.peach-panic-actions {7561  display: flex;7562  flex-direction: column;7563  gap: 10px;7564  margin-top: auto;7565}75667567.peach-panic-button {7568  width: 100%;7569  padding: 12px;7570  border-radius: 8px;7571  font-size: 0.8125rem;7572  cursor: pointer;7573  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7574}75757576.peach-panic-button--primary {7577  background: var(--peach-accent);7578  border: 1px solid var(--peach-accent);7579  color: #ffffff;7580  font-weight: 600;7581}75827583.peach-panic-button--primary:hover {7584  background: color-mix(in srgb, var(--peach-accent) 88%, white);7585}75867587.peach-panic-button--danger {7588  background: rgb(220, 38, 38);7589  border: 1px solid rgb(220, 38, 38);7590  color: #ffffff;7591  font-weight: 600;7592}75937594.peach-panic-button--danger:disabled {7595  opacity: 0.35;7596  cursor: not-allowed;7597}75987599.peach-panic-button--ghost {7600  background: transparent;7601  border: 1px solid rgba(255, 255, 255, 0.18);7602  color: var(--peach-t2);7603}76047605.peach-panic-button--ghost:hover {7606  border-color: rgba(255, 255, 255, 0.32);7607  color: var(--peach-t1);7608}76097610.peach-panic-link {7611  background: transparent;7612  border: none;7613  padding: 4px 0;7614  color: rgba(220, 38, 38, 0.65);7615  font-size: 0.75rem;7616  cursor: pointer;7617  text-align: left;7618  text-decoration: underline;7619  text-underline-offset: 3px;7620}76217622.peach-panic-link:hover {7623  color: rgb(220, 38, 38);7624}76257626.peach-panic-bar {7627  background: rgb(220, 38, 38);7628  padding: 16px 20px;7629  margin: -28px -20px 0;7630  text-align: center;7631  font-size: 0.8125rem;7632  font-weight: 700;7633  letter-spacing: 0.12em;7634  color: #ffffff;7635}76367637.peach-panic-final-button {7638  width: 100%;7639  padding: 14px;7640  background: rgb(220, 38, 38);7641  border: none;7642  border-radius: 8px;7643  color: #ffffff;7644  font-size: 0.875rem;7645  font-weight: 700;7646  letter-spacing: 0.08em;7647  text-transform: uppercase;7648  cursor: pointer;7649  animation: peach-panic-pulse 2s ease-in-out infinite;7650}76517652.peach-settings-license {7653  margin-top: 10px;7654  padding-top: 10px;7655  border-top: 1px solid var(--peach-t3);7656}76577658.peach-settings-label {7659  font-size: 0.625rem;7660  letter-spacing: 0.08em;7661  color: var(--peach-t3);7662  display: block;7663  margin-bottom: 6px;7664}76657666.peach-settings-license-row {7667  display: flex;7668  align-items: center;7669  justify-content: space-between;7670  gap: 8px;7671}76727673.peach-settings-license-key {7674  font-family: 'IBM Plex Mono', monospace;7675  font-size: 0.75rem;7676  color: var(--peach-t0);7677  letter-spacing: 0.04em;7678  word-break: break-all;7679  flex: 1;7680  min-width: 0;7681}76827683.peach-settings-license-key--masked {7684  font-family: 'IBM Plex Mono', monospace;7685  font-size: 0.6rem;7686  color: var(--peach-t1);7687  letter-spacing: 0.18em;7688  user-select: none;7689}76907691.peach-settings-license-actions {7692  display: flex;7693  align-items: center;7694  gap: 2px;7695  flex-shrink: 0;7696}76977698.peach-settings-license-copy {7699  font-size: 0.6875rem;7700  color: var(--peach-accent);7701  background: transparent;7702  border: none;7703  cursor: pointer;7704  padding: 4px 8px;7705  border-radius: 4px;7706  flex-shrink: 0;7707  transition: opacity 150ms ease;7708}77097710.peach-settings-license-copy:hover {7711  opacity: 0.75;7712}77137714.peach-settings-license-toggle {7715  display: flex;7716  align-items: center;7717  justify-content: center;7718  background: transparent;7719  border: none;7720  cursor: pointer;7721  padding: 4px 6px;7722  border-radius: 4px;7723  color: var(--peach-t2);7724  transition: color 150ms ease;7725}77267727.peach-settings-license-toggle:hover {7728  color: var(--peach-t1);7729}77307731@keyframes peach-panic-pulse {7732  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7733  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7734}77357736[data-motion="reduce"] .peach-panic-final-button {7737  animation: none;7738}77397740/* Vault History — Settings → Vault sub-view */77417742.peach-history-list {7743  border: 1px solid var(--peach-border);7744  border-radius: 8px;7745  overflow: hidden;7746  margin: 8px 0 4px;7747}77487749.peach-history-row {7750  display: flex;7751  align-items: center;7752  justify-content: space-between;7753  padding: 9px 12px;7754  gap: 10px;7755  border-bottom: 1px solid var(--peach-border);7756}77577758.peach-history-row:last-child {7759  border-bottom: none;7760}77617762.peach-history-meta {7763  display: flex;7764  flex-direction: column;7765  gap: 2px;7766  min-width: 0;7767  flex: 1;7768}77697770.peach-history-time {7771  font-size: 0.75rem;7772  font-family: 'IBM Plex Mono', ui-monospace, monospace;7773  color: var(--peach-t0);7774  white-space: nowrap;7775  overflow: hidden;7776  text-overflow: ellipsis;7777}77787779.peach-history-sub {7780  font-size: 0.625rem;7781  color: var(--peach-t2);7782  letter-spacing: 0.06em;7783  text-transform: uppercase;7784  white-space: nowrap;7785  overflow: hidden;7786  text-overflow: ellipsis;7787}77887789.peach-history-btn {7790  flex-shrink: 0;7791  white-space: nowrap;7792  min-width: 56px;7793  text-align: center;7794}77957796.peach-history-btn.is-busy {7797  opacity: 0.65;7798}77997800.peach-history-footer {7801  font-size: 0.625rem;7802  color: var(--peach-t3);7803  letter-spacing: 0.05em;7804  text-align: right;7805  margin: 0;7806  padding: 2px 0 0;7807}78087809/* ── Context menu + swipe-copy flash ─────────────────────── */7810.peach-context-menu-backdrop {7811  position: fixed;7812  inset: 0;7813  background: rgba(0, 0, 0, 0.45);7814  z-index: 100;7815  display: flex;7816  align-items: flex-end;7817  justify-content: center;7818  animation: peach-ctx-fade 140ms ease both;7819}7820.peach-context-menu {7821  width: min(360px, calc(100vw - 24px));7822  margin-bottom: max(env(safe-area-inset-bottom), 12px);7823  background: var(--peach-bg);7824  border: 1px solid var(--peach-t3);7825  border-radius: 14px;7826  padding: 6px;7827  display: flex;7828  flex-direction: column;7829  gap: 2px;7830  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7831  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7832}7833@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7834@keyframes peach-ctx-rise {7835  from { transform: translateY(16px); opacity: 0; }7836  to   { transform: translateY(0);    opacity: 1; }7837}7838.peach-context-menu-item {7839  background: transparent;7840  color: var(--peach-t0);7841  border: 0;7842  border-radius: 10px;7843  padding: 12px 14px;7844  text-align: left;7845  font: inherit;7846  cursor: pointer;7847}7848.peach-context-menu-item:hover,7849.peach-context-menu-item:focus-visible {7850  background: var(--peach-t3);7851}7852.peach-context-menu-item--danger {7853  color: var(--peach-health-bad, #d96868);7854}7855.peach-context-menu-item--cancel {7856  color: var(--peach-t2);7857  margin-top: 4px;7858  border-top: 1px solid var(--peach-t3);7859  border-radius: 0 0 10px 10px;7860}78617862/* Swipe-to-copy flash */7863.peach-entry-row.is-copy-flash {7864  animation: peach-copy-flash 600ms ease both;7865}7866@keyframes peach-copy-flash {7867  0%   { background: transparent; }7868  20%  { background: rgba(217, 153, 51, 0.32); }7869  100% { background: transparent; }7870}78717872html { font-size: 16px; }78737874/* ── Recovery word entry ─────────────────────────────────────────── */7875.peach-lock-recover-link {7876  display: block;7877  width: 100%;7878  margin-top: 12px;7879  background: none;7880  border: none;7881  font-family: "IBM Plex Mono", monospace;7882  font-size: 0.625rem;7883  letter-spacing: 0.06em;7884  color: var(--peach-t2);7885  cursor: pointer;7886  text-align: center;7887  padding: 4px;7888  transition: color 120ms ease;7889}7890.peach-lock-recover-link:hover {7891  color: var(--peach-t0);7892}78937894.lock-screen--recovery {7895  display: flex;7896  flex-direction: column;7897  align-items: stretch;7898  padding: 12px 20px 24px;7899  overflow: hidden;7900}79017902.peach-recovery-nav {7903  display: flex;7904  align-items: center;7905  position: relative;7906  z-index: 1;7907  margin-bottom: 4px;7908}79097910/* Mask runes to the top decorative band only — keep inputs and the7911   bottom CTA button clear. The bottom of the popup is reserved for7912   submit buttons; rendering runes there overlaps the button glyph. */7913.peach-rune-background--recovery {7914  -webkit-mask-image: linear-gradient(7915    to bottom,7916    black 0px, black 85px,7917    transparent 110px,7918    transparent 100%7919  );7920  mask-image: linear-gradient(7921    to bottom,7922    black 0px, black 85px,7923    transparent 110px,7924    transparent 100%7925  );7926}79277928.peach-recovery-header {7929  text-align: center;7930  margin-bottom: 16px;7931  margin-top: 4px;7932}7933.peach-recovery-header .peach-onboarding-headline {7934  font-size: 1.25rem;7935  font-weight: 300;7936  letter-spacing: 0.02em;7937  margin: 0 0 4px;7938}7939.peach-recovery-header .peach-hint {7940  font-family: "IBM Plex Mono", monospace;7941  font-size: 0.625rem;7942  color: var(--peach-t2);7943  letter-spacing: 0.04em;7944  margin: 0;7945}79467947/* 12-word grid: 2 columns × 6 rows */7948.peach-recovery-grid {7949  display: grid;7950  grid-template-columns: repeat(2, 1fr);7951  gap: 12px 20px;7952  width: 100%;7953  margin-bottom: 0;7954}79557956.peach-recovery-word-slot {7957  display: flex;7958  align-items: center;7959  gap: 6px;7960  min-width: 0;7961}79627963.peach-recovery-word-index {7964  font-family: "IBM Plex Mono", monospace;7965  font-size: 0.5rem;7966  color: rgba(255, 255, 255, 0.35);7967  min-width: 14px;7968  flex-shrink: 0;7969  text-align: right;7970  letter-spacing: 0.04em;7971}79727973.peach-recovery-word-input {7974  flex: 1;7975  min-width: 0;7976  background: transparent;7977  border: none;7978  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7979  color: var(--peach-t0);7980  font-family: "IBM Plex Mono", monospace;7981  font-size: 0.6875rem;7982  letter-spacing: 0.06em;7983  padding: 5px 2px 4px;7984  outline: none;7985  text-transform: lowercase;7986  transition: border-color 120ms ease;7987}7988.peach-recovery-word-input::placeholder {7989  color: rgba(255, 255, 255, 0.18);7990}7991.peach-recovery-word-input:focus {7992  border-bottom-color: var(--peach-accent);7993}79947995.peach-recovery-submit {7996  width: 100%;7997  margin-top: auto;7998}79998000.peach-recovery-new-password-form {8001  width: 100%;8002  display: flex;8003  flex-direction: column;8004  gap: 16px;8005  margin-bottom: 8px;8006}8007.peach-recovery-new-password-form .peach-newvault-field {8008  display: flex;8009  flex-direction: column;8010  gap: 4px;8011}80128013/* ── Recovery words display (post-create) ────────────────────────── */8014.lock-screen--recovery-display {8015  display: flex;8016  flex-direction: column;8017  align-items: stretch;8018  padding: 0 20px 20px;8019  min-height: 0;8020  overflow-y: auto;8021}80228023.peach-recovery-words-display {8024  width: 100%;8025  margin-bottom: 16px;8026  border: 1px solid var(--peach-t3);8027  border-radius: 8px;8028  padding: 12px 14px;8029  background: rgba(245, 240, 234, 0.04);8030}80318032.peach-recovery-words-label {8033  font-family: "IBM Plex Mono", monospace;8034  font-size: 0.5rem;8035  letter-spacing: 0.08em;8036  color: var(--peach-t2);8037  text-transform: uppercase;8038  margin-bottom: 10px;8039}80408041.peach-recovery-word-list {8042  list-style: none;8043  margin: 0;8044  padding: 0;8045  display: grid;8046  grid-template-columns: repeat(2, 1fr);8047  gap: 6px 16px;8048}80498050.peach-recovery-word-item {8051  display: flex;8052  align-items: baseline;8053  gap: 5px;8054}80558056.peach-recovery-word-num {8057  font-family: "IBM Plex Mono", monospace;8058  font-size: 0.5rem;8059  color: var(--peach-t2);8060  width: 14px;8061  flex: 0 0 14px;8062  text-align: right;8063  letter-spacing: 0.04em;8064  font-variant-numeric: tabular-nums;8065}80668067.peach-recovery-download-btn {8068  display: block;8069  margin: 10px auto 0;8070  padding: 4px 10px;8071  background: transparent;8072  border: 1px solid var(--peach-border);8073  border-radius: 6px;8074  color: var(--peach-t2);8075  font-family: "IBM Plex Mono", monospace;8076  font-size: 0.5625rem;8077  letter-spacing: 0.06em;8078  text-transform: lowercase;8079  cursor: pointer;8080  transition: border-color 0.15s, color 0.15s;8081}80828083.peach-recovery-download-btn:hover {8084  border-color: var(--peach-accent);8085  color: var(--peach-t0);8086}80878088.peach-recovery-word-text {8089  font-family: "IBM Plex Mono", monospace;8090  font-size: 0.6875rem;8091  letter-spacing: 0.06em;8092  color: var(--peach-t0);8093  text-transform: lowercase;8094}80958096.peach-hint--warning {8097  color: var(--peach-accent);8098  font-style: italic;8099}8100.peach-hint--success {8101  color: var(--peach-t2);8102  font-family: "IBM Plex Mono", monospace;8103  font-size: 0.625rem;8104  letter-spacing: 0.06em;8105}81068107/* Confirmation step */8108.peach-recovery-confirm {8109  width: 100%;8110  flex: 1;8111  display: flex;8112  flex-direction: column;8113}8114.peach-recovery-confirm-label {8115  font-family: "IBM Plex Mono", monospace;8116  font-size: 0.5625rem;8117  letter-spacing: 0.04em;8118  color: var(--peach-t2);8119  text-align: center;8120  margin: 0 0 12px;8121}8122.peach-recovery-confirm-fields {8123  display: flex;8124  flex-direction: column;8125  gap: 14px;8126  margin-bottom: 10px;8127}8128.peach-recovery-confirm-field {8129  display: flex;8130  align-items: center;8131  gap: 8px;8132}8133.peach-recovery-confirm-num {8134  font-family: "IBM Plex Mono", monospace;8135  font-size: 0.5rem;8136  color: var(--peach-t2);8137  min-width: 44px;8138  letter-spacing: 0.04em;8139}8140.peach-recovery-confirm-input {8141  flex: 1;8142  background: transparent;8143  border: none;8144  border-bottom: 1px solid var(--peach-t3);8145  color: var(--peach-t0);8146  font-family: "IBM Plex Mono", monospace;8147  font-size: 0.6875rem;8148  letter-spacing: 0.06em;8149  padding: 4px 2px 3px;8150  outline: none;8151  text-transform: lowercase;8152  transition: border-color 120ms ease;8153}8154.peach-recovery-confirm-input:focus {8155  border-bottom-color: var(--peach-accent);8156}8157.peach-recovery-confirm-input:disabled {8158  opacity: 0.4;8159  cursor: not-allowed;8160}8161.peach-recovery-confirm-btn {8162  width: 100%;8163  margin-top: auto;8164}81658166/* ============================================================8167   Sync info sheet8168   ============================================================ */81698170.peach-sync-info-backdrop {8171  position: fixed;8172  inset: 0;8173  z-index: 200;8174  background: rgba(0, 0, 0, 0.55);8175  display: flex;8176  align-items: flex-end;8177  animation: peach-fade-in 200ms ease forwards;8178}81798180@keyframes peach-fade-in {8181  from { opacity: 0; }8182  to   { opacity: 1; }8183}81848185.peach-sync-info-sheet {8186  width: 100%;8187  background: var(--peach-bg-card, var(--peach-bg));8188  border-top-left-radius: 20px;8189  border-top-right-radius: 20px;8190  padding: 12px 24px 32px;8191  display: flex;8192  flex-direction: column;8193  gap: 20px;8194  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;8195}81968197@keyframes peach-sheet-up {8198  from { transform: translateY(100%); }8199  to   { transform: translateY(0); }8200}82018202.peach-sync-info-handle {8203  width: 36px;8204  height: 4px;8205  border-radius: 2px;8206  background: var(--peach-border);8207  margin: 0 auto 4px;8208  flex-shrink: 0;8209}82108211.peach-sync-info-title {8212  font-family: 'Cormorant Garamond', serif;8213  font-style: italic;8214  font-size: 26px;8215  font-weight: 600;8216  color: var(--peach-t0);8217  margin: 0;8218  line-height: 1.2;8219}82208221.peach-sync-info-body {8222  display: flex;8223  flex-direction: column;8224  gap: 14px;8225}82268227.peach-sync-info-point {8228  display: flex;8229  gap: 12px;8230  align-items: flex-start;8231  font-size: 14px;8232  color: var(--peach-t2);8233  line-height: 1.6;8234  margin: 0;8235}82368237.peach-sync-info-icon {8238  color: var(--peach-accent);8239  font-size: 16px;8240  flex-shrink: 0;8241  margin-top: 1px;8242}82438244.peach-sync-info-actions {8245  display: flex;8246  flex-direction: column;8247  gap: 12px;8248  margin-top: 4px;8249}82508251.peach-sync-info-pro-link {8252  background: none;8253  border: none;8254  font-size: 13px;8255  color: var(--peach-t3);8256  cursor: pointer;8257  padding: 0;8258  font-family: inherit;8259  text-align: center;8260  transition: color 150ms ease;8261}82628263.peach-sync-info-pro-link:hover {8264  color: var(--peach-accent);8265}82668267.peach-btn--full {8268  width: 100%;8269}82708271/* ── Sync screen ── */82728273.peach-sync-coming-soon {8274  display: flex;8275  align-items: flex-start;8276  gap: 10px;8277  padding: 12px 14px;8278  background: var(--peach-s1);8279  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8280  border-radius: 10px;8281}8282.peach-sync-coming-soon__icon {8283  flex-shrink: 0;8284  color: var(--peach-accent);8285  margin-top: 1px;8286  line-height: 0;8287}8288.peach-sync-coming-soon__title {8289  font-family: 'Cormorant Garamond', serif;8290  font-weight: 500;8291  font-size: 13px;8292  color: var(--peach-accent);8293  margin: 0 0 5px;8294  line-height: 1.3;8295}8296.peach-sync-coming-soon__body {8297  font-size: 12px;8298  color: var(--peach-t1);8299  line-height: 1.55;8300  margin: 0;8301}83028303.peach-sync-screen {8304  display: flex;8305  flex-direction: column;8306  height: 100%;8307}83088309.peach-sync-content {8310  flex: 1;8311  overflow-y: auto;8312  padding: 24px 20px 40px;8313  display: flex;8314  flex-direction: column;8315  gap: 24px;8316}83178318/* Intro (State A) */8319.peach-sync-headline {8320  font-family: 'Cormorant Garamond', serif;8321  font-style: italic;8322  font-size: 28px;8323  font-weight: 600;8324  color: var(--peach-t0);8325  margin: 0 0 10px;8326  line-height: 1.2;8327}83288329.peach-sync-intro-body {8330  font-size: 14px;8331  color: var(--peach-t1);8332  line-height: 1.6;8333  margin: 0;8334}83358336.peach-sync-pro-note {8337  display: flex;8338  flex-direction: column;8339  gap: 8px;8340  background: var(--peach-t3);8341  border-radius: 10px;8342  padding: 12px 14px;8343}83448345.peach-sync-pro-note-text {8346  font-size: 12px;8347  color: var(--peach-t2);8348  line-height: 1.5;8349  margin: 0;8350}83518352.peach-sync-pro-link {8353  background: none;8354  border: none;8355  font-size: 12px;8356  color: var(--peach-accent);8357  cursor: pointer;8358  padding: 0;8359  font-family: inherit;8360  text-align: left;8361}83628363/* Status (State C) */8364.peach-sync-status {8365  padding: 12px 0;8366  border-bottom: 1px solid var(--peach-border);8367}83688369.peach-sync-status-row {8370  display: flex;8371  align-items: center;8372  gap: 8px;8373}83748375.peach-sync-dot {8376  width: 7px;8377  height: 7px;8378  border-radius: 50%;8379  flex-shrink: 0;8380}83818382.peach-sync-dot--green { background: var(--peach-health-ok); }8383.peach-sync-dot--amber { background: var(--peach-accent); }83848385.peach-sync-status-text {8386  font-family: 'IBM Plex Mono', monospace;8387  font-size: 11px;8388  color: var(--peach-t2);8389}83908391/* Paired devices */8392.peach-sync-section {8393  display: flex;8394  flex-direction: column;8395  gap: 2px;8396}83978398.peach-sync-section-label {8399  font-family: 'IBM Plex Mono', monospace;8400  font-size: 10px;8401  letter-spacing: 0.1em;8402  color: var(--peach-t3);8403  margin: 0 0 10px;8404}84058406.peach-sync-device-row {8407  display: flex;8408  justify-content: space-between;8409  align-items: baseline;8410  padding: 10px 0;8411  border-bottom: 1px solid var(--peach-border);8412  gap: 12px;8413}84148415.peach-sync-device-name {8416  font-size: 14px;8417  color: var(--peach-t1);8418}84198420.peach-sync-device-meta {8421  font-family: 'IBM Plex Mono', monospace;8422  font-size: 11px;8423  color: var(--peach-t3);8424  white-space: nowrap;8425}84268427.peach-sync-hub-note {8428  padding: 14px 16px;8429  border: 1px solid var(--peach-border);8430  border-radius: 10px;8431  display: flex;8432  flex-direction: column;8433  gap: 6px;8434  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8435}84368437.peach-sync-hub-note-title {8438  font-size: 13px;8439  font-weight: 600;8440  color: var(--peach-t0);8441  margin: 0;8442}84438444.peach-sync-hub-note-body {8445  font-size: 12px;8446  color: var(--peach-t2);8447  line-height: 1.6;8448  margin: 0;8449}84508451/* Action buttons */8452.peach-sync-actions {8453  display: flex;8454  gap: 10px;8455  flex-wrap: wrap;8456}84578458/* Upgrade prompt (State B) */8459.peach-sync-upgrade {8460  display: flex;8461  flex-direction: column;8462  gap: 12px;8463  padding: 16px;8464  border: 1px solid var(--peach-border);8465  border-radius: 10px;8466}84678468.peach-sync-upgrade-text {8469  font-size: 13px;8470  color: var(--peach-t2);8471  line-height: 1.6;8472  margin: 0;8473}84748475/* Network note */8476.peach-sync-network-note {8477  font-size: 12px;8478  color: var(--peach-t3);8479  line-height: 1.6;8480  margin: 0;8481}84828483/* Advanced */8484.peach-sync-advanced {8485  margin-top: auto;8486  padding-top: 16px;8487  border-top: 1px solid var(--peach-border);8488}84898490.peach-sync-advanced-toggle {8491  display: flex;8492  align-items: center;8493  gap: 8px;8494  background: none;8495  border: none;8496  font-family: 'IBM Plex Mono', monospace;8497  font-size: 11px;8498  letter-spacing: 0.08em;8499  color: var(--peach-t3);8500  cursor: pointer;8501  padding: 0;8502  text-transform: uppercase;8503}85048505.peach-sync-advanced-chevron {8506  display: inline-block;8507  transition: transform 200ms ease;8508  font-size: 10px;8509}85108511.peach-sync-advanced-chevron.is-open {8512  transform: rotate(90deg);8513}85148515.peach-sync-advanced-content {8516  margin-top: 14px;8517}85188519.peach-sync-advanced-row {8520  display: flex;8521  justify-content: space-between;8522  align-items: center;8523  gap: 16px;8524}85258526.peach-sync-advanced-title {8527  font-size: 14px;8528  color: var(--peach-t1);8529  margin: 0 0 2px;8530}85318532.peach-sync-advanced-subtitle {8533  font-size: 12px;8534  color: var(--peach-t3);8535  margin: 0;8536  line-height: 1.5;8537}85388539/* ── Notes Mode ── */85408541/* Overlay that crossfades over the vault */8542.peach-notes-overlay {8543  position: fixed;8544  inset: 0;8545  z-index: 90;8546  opacity: 0;8547  pointer-events: none;8548  animation: peach-mode-in 220ms ease-in forwards;8549}85508551.peach-notes-overlay.is-visible {8552  opacity: 1;8553  pointer-events: auto;8554}85558556@keyframes peach-mode-in {8557  from { opacity: 0; }8558  to   { opacity: 1; }8559}85608561/* Top-level notes surface */8562.peach-notes-mode {8563  position: absolute;8564  inset: 0;8565  background: var(--peach-bg);8566  display: flex;8567  flex-direction: column;8568}85698570/* Rune canvas positioned behind content */8571.peach-note-rune-canvas {8572  position: absolute;8573  inset: 0;8574  width: 100%;8575  height: 100%;8576  pointer-events: none;8577  z-index: 0;8578}85798580/* TOC wrapper */8581.peach-notes-toc-wrapper {8582  position: absolute;8583  inset: 0;8584  z-index: 1;8585  opacity: 1;8586  pointer-events: auto;8587  transition: opacity 200ms ease;8588}85898590.peach-notes-toc-wrapper.is-hidden {8591  opacity: 0;8592  pointer-events: none;8593}85948595/* Editor wrapper */8596.peach-notes-editor-wrapper {8597  position: absolute;8598  inset: 0;8599  z-index: 2;8600  opacity: 0;8601  pointer-events: none;8602  transition: opacity 200ms ease;8603}86048605.peach-notes-editor-wrapper.is-visible {8606  opacity: 1;8607  pointer-events: auto;8608}86098610/* TOC inner */8611.peach-notes-toc {8612  position: relative;8613  display: flex;8614  flex-direction: column;8615  height: 100%;8616  padding-top: env(safe-area-inset-top, 0px);8617  padding-bottom: env(safe-area-inset-bottom, 0px);8618}86198620/* Shared header */8621.peach-notes-header {8622  display: flex;8623  align-items: center;8624  padding: 12px 16px;8625  gap: 12px;8626  flex-shrink: 0;8627  min-height: 52px;8628  position: relative;8629  z-index: 2;8630}86318632.peach-notes-back {8633  font-size: 22px;8634  color: var(--peach-t2);8635  background: none;8636  border: none;8637  padding: 4px;8638  cursor: pointer;8639  line-height: 1;8640  flex-shrink: 0;8641  transition: color 150ms ease;8642  -webkit-tap-highlight-color: transparent;8643}86448645.peach-notes-back:active { color: var(--peach-t0); }86468647.peach-notes-header-title {8648  flex: 1;8649  font-family: 'Cormorant Garamond', serif;8650  font-style: italic;8651  font-size: 22px;8652  color: var(--peach-t0);8653  text-align: center;8654}86558656.peach-notes-header-title.is-breadcrumb {8657  font-family: 'IBM Plex Mono', monospace;8658  font-style: normal;8659  font-size: 11px;8660  color: var(--peach-t3);8661  letter-spacing: 0.08em;8662  text-transform: uppercase;8663  cursor: pointer;8664}86658666.peach-notes-header-actions {8667  display: flex;8668  gap: 8px;8669  flex-shrink: 0;8670}86718672.peach-notes-header-btn {8673  width: 36px;8674  height: 36px;8675  display: flex;8676  align-items: center;8677  justify-content: center;8678  background: none;8679  border: none;8680  color: var(--peach-t2);8681  cursor: pointer;8682  border-radius: 8px;8683  font-size: 16px;8684  transition: color 150ms ease, background 150ms ease;8685  -webkit-tap-highlight-color: transparent;8686}86878688.peach-notes-header-btn:active {8689  background: rgba(255,255,255,0.06);8690  color: var(--peach-t0);8691}86928693/* Inline search bar */8694.peach-notes-search-input {8695  flex: 1;8696  background: none;8697  border: none;8698  outline: none;8699  font-family: 'IBM Plex Mono', monospace;8700  font-size: 13px;8701  color: var(--peach-t0);8702  padding: 4px 0;8703  letter-spacing: 0.02em;8704}87058706.peach-notes-search-input::placeholder {8707  color: var(--peach-t3);8708}87098710/* TOC list */8711.peach-notes-list-container {8712  flex: 1;8713  overflow-y: auto;8714  overflow-x: hidden;8715  scrollbar-width: none;8716  -webkit-overflow-scrolling: touch;8717  overscroll-behavior: contain;8718  position: relative;8719  z-index: 1;8720}87218722.peach-notes-list-container::-webkit-scrollbar { display: none; }87238724/* Note row */8725.peach-note-row {8726  position: relative;8727  display: grid;8728  grid-template-columns: 44px 8px 1fr 8px auto;8729  align-items: center;8730  min-height: 72px;8731  padding: 16px 20px;8732  border-bottom: 0.5px solid var(--peach-border);8733  cursor: pointer;8734  overflow: hidden;8735  touch-action: pan-y;8736  user-select: none;8737  -webkit-user-select: none;8738  -webkit-tap-highlight-color: transparent;8739}87408741.peach-note-row:first-child {8742  border-top: 0.5px solid var(--peach-border);8743}87448745.peach-note-row:active {8746  background: rgba(255,255,255,0.02);8747}87488749.peach-note-numeral {8750  font-family: 'Cormorant Garamond', serif;8751  font-style: italic;8752  font-size: 15px;8753  color: var(--peach-accent);8754  text-align: right;8755  line-height: 1;8756  flex-shrink: 0;8757}87588759.peach-note-title-gap { /* grid spacer */ }87608761.peach-note-title {8762  font-family: 'Cormorant Garamond', serif;8763  font-style: italic;8764  font-size: 18px;8765  color: var(--peach-t0);8766  line-height: 1.3;8767  min-width: 0;8768  overflow-wrap: break-word;8769}87708771.peach-note-title-match {8772  color: var(--peach-accent);8773}87748775.peach-note-date {8776  font-family: 'IBM Plex Mono', monospace;8777  font-size: 11px;8778  color: var(--peach-t2);8779  white-space: nowrap;8780  text-align: right;8781  flex-shrink: 0;8782  grid-column: 5;8783}87848785/* Swipe underlays */8786.peach-note-row-underlay {8787  position: absolute;8788  inset: 0;8789  display: flex;8790  align-items: center;8791  padding: 0 24px;8792  font-family: 'IBM Plex Mono', monospace;8793  font-size: 11px;8794  letter-spacing: 0.1em;8795  pointer-events: none;8796  z-index: 0;8797}87988799.peach-note-row-underlay--delete {8800  background: #8B2020;8801  color: rgba(255,255,255,0.9);8802  justify-content: flex-end;8803}88048805.peach-note-row-underlay--archive {8806  background: var(--peach-accent);8807  color: #0C0A06;8808  justify-content: flex-start;8809}88108811/* Delete confirm strip */8812.peach-note-delete-confirm {8813  position: absolute;8814  inset: 0;8815  background: var(--peach-bg);8816  display: flex;8817  align-items: center;8818  gap: 12px;8819  padding: 0 20px;8820  font-family: 'IBM Plex Mono', monospace;8821  font-size: 11px;8822  color: var(--peach-t1);8823  letter-spacing: 0.04em;8824  animation: peach-delete-confirm-in 150ms ease both;8825  z-index: 10;8826}88278828@keyframes peach-delete-confirm-in {8829  from { opacity: 0; }8830  to   { opacity: 1; }8831}88328833.peach-note-delete-confirm-btn {8834  background: #8B2020;8835  color: rgba(255,255,255,0.9);8836  border: none;8837  border-radius: 6px;8838  padding: 4px 10px;8839  font-family: 'IBM Plex Mono', monospace;8840  font-size: 10px;8841  cursor: pointer;8842  letter-spacing: 0.06em;8843}88448845.peach-note-delete-cancel-btn {8846  background: none;8847  border: none;8848  color: var(--peach-t3);8849  font-family: 'IBM Plex Mono', monospace;8850  font-size: 10px;8851  cursor: pointer;8852  letter-spacing: 0.06em;8853  padding: 4px 6px;8854}88558856/* + New note button */8857.peach-notes-new-btn {8858  font-family: 'IBM Plex Mono', monospace;8859  font-size: 12px;8860  color: var(--peach-t3);8861  text-align: center;8862  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8863  background: none;8864  border: none;8865  width: 100%;8866  cursor: pointer;8867  letter-spacing: 0.04em;8868  transition: color 150ms ease;8869  -webkit-tap-highlight-color: transparent;8870}88718872.peach-notes-new-btn:active { color: var(--peach-accent); }88738874/* Empty state */8875.peach-notes-empty {8876  display: flex;8877  flex-direction: column;8878  align-items: center;8879  justify-content: center;8880  flex: 1;8881  padding: 48px 32px;8882  gap: 16px;8883}88848885.peach-notes-empty-text {8886  font-family: 'Cormorant Garamond', serif;8887  font-style: italic;8888  font-size: 20px;8889  color: var(--peach-t3);8890  text-align: center;8891  margin: 0;8892  line-height: 1.4;8893  white-space: pre-line;8894}88958896/* ── Editor surface ── */88978898.peach-note-editor-surface {8899  position: absolute;8900  inset: 0;8901  background: var(--peach-bg);8902  display: flex;8903  flex-direction: column;8904  padding-top: env(safe-area-inset-top, 0px);8905}89068907.peach-note-editor-scroll {8908  flex: 1;8909  overflow-y: auto;8910  overflow-x: hidden;8911  scrollbar-width: none;8912  -webkit-overflow-scrolling: touch;8913  padding: 0 24px 120px;8914  position: relative;8915  z-index: 1;8916}89178918.peach-note-editor-scroll::-webkit-scrollbar { display: none; }89198920/* Desktop toolbar (always visible above body) */8921.peach-note-toolbar-desktop-inline {8922  display: flex;8923  align-items: center;8924  gap: 2px;8925  padding: 6px 0 12px;8926  margin-bottom: 4px;8927  border-bottom: 0.5px solid var(--peach-border);8928}89298930/* Title field */8931.peach-note-title-field {8932  font-family: 'Cormorant Garamond', serif;8933  font-style: italic;8934  font-size: 32px;8935  font-weight: 600;8936  color: var(--peach-t0);8937  line-height: 1.2;8938  padding: 8px 0 0;8939  outline: none;8940  min-height: 44px;8941  word-break: break-word;8942  position: relative;8943  z-index: 1;8944}89458946.peach-note-title-field:empty::before {8947  content: attr(data-placeholder);8948  color: var(--peach-t3);8949  pointer-events: none;8950}89518952/* Hairline separator */8953.peach-note-hairline {8954  height: 0.5px;8955  background: var(--peach-border);8956  margin: 12px 0 20px;8957  position: relative;8958  z-index: 1;8959}89608961/* Body field */8962.peach-note-body-field {8963  font-family: 'DM Sans', sans-serif;8964  font-size: 16px;8965  color: var(--peach-t0);8966  line-height: 1.85;8967  padding: 0;8968  outline: none;8969  min-height: 240px;8970  word-break: break-word;8971  position: relative;8972  z-index: 1;8973}89748975.peach-note-body-field:empty::before {8976  content: attr(data-placeholder);8977  color: var(--peach-t3);8978  font-style: italic;8979  pointer-events: none;8980}89818982.peach-note-body-field h2 {8983  font-family: 'Cormorant Garamond', serif;8984  font-style: italic;8985  font-size: 22px;8986  font-weight: 600;8987  color: var(--peach-t0);8988  margin: 20px 0 8px;8989}89908991.peach-note-body-field blockquote {8992  border-left: 2px solid var(--peach-accent);8993  margin: 12px 0;8994  padding-left: 16px;8995  color: var(--peach-t1);8996  font-style: italic;8997}89988999.peach-note-body-field ul,9000.peach-note-body-field ol {9001  padding-left: 20px;9002  margin: 8px 0;9003}90049005.peach-note-body-field li {9006  margin: 4px 0;9007}90089009.peach-note-body-field hr {9010  border: none;9011  border-top: 0.5px solid var(--peach-border);9012  margin: 16px 0;9013}90149015/* Saved indicator */9016.peach-note-saved-indicator {9017  font-family: 'IBM Plex Mono', monospace;9018  font-size: 11px;9019  color: var(--peach-t3);9020  letter-spacing: 0.04em;9021  text-align: right;9022  padding: 6px 24px;9023  flex-shrink: 0;9024  transition: opacity 300ms ease;9025  pointer-events: none;9026  position: relative;9027  z-index: 1;9028}90299030/* Mobile keyboard toolbar */9031.peach-note-toolbar-mobile {9032  display: flex;9033  align-items: center;9034  padding: 8px 16px;9035  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));9036  background: var(--peach-bg);9037  border-top: 0.5px solid var(--peach-border);9038  gap: 4px;9039  flex-shrink: 0;9040  position: relative;9041  z-index: 10;9042}90439044.peach-note-toolbar-btn {9045  min-width: 36px;9046  height: 36px;9047  display: flex;9048  align-items: center;9049  justify-content: center;9050  background: none;9051  border: none;9052  border-radius: 8px;9053  cursor: pointer;9054  font-size: 14px;9055  color: var(--peach-t1);9056  font-family: 'DM Sans', sans-serif;9057  font-weight: 600;9058  transition: background 100ms ease, color 100ms ease;9059  -webkit-tap-highlight-color: transparent;9060}90619062.peach-note-toolbar-btn--italic { font-style: italic; }9063.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }9064.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }90659066.peach-note-toolbar-divider {9067  width: 0.5px;9068  height: 20px;9069  background: var(--peach-border);9070  margin: 0 4px;9071  flex-shrink: 0;9072}90739074.peach-note-toolbar-spacer { flex: 1; }90759076/* Desktop: larger headline in TOC */9077@media (min-width: 400px) {9078  .peach-notes-header-title:not(.is-breadcrumb) {9079    font-size: 32px;9080  }90819082  .peach-note-row {9083    min-height: 64px;9084    padding: 14px 16px;9085  }9086}90879088/* Flying title — shared element during expansion/collapse */90899090/* ─── Light theme overrides ───────────────────────────────────────────────9091   Tokens that cannot be expressed as variable substitutions — hardcoded9092   context-specific values that need separate light-mode rules. */90939094/* Settings section headers: use text-label (#79766F) per restoration brief —9095   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY9096   presence without fighting the light parchment background. */9097.light .peach-settings-sub-label,9098[data-theme="light"] .peach-settings-sub-label,9099.light .peach-settings-nav-label,9100[data-theme="light"] .peach-settings-nav-label {9101  color: #79766F;9102}91039104/* Secondary action buttons (ghost / subtle): filled with input-well surface9105   so they read as recessed against the parchment card background. */9106.light .peach-btn--ghost:not(.peach-icon-btn),9107[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {9108  background: #EEE7DD;9109  border-color: #DDD5CB;9110  color: #1A1208;9111}9112.light .peach-icon-btn,9113[data-theme="light"] .peach-icon-btn {9114  background: transparent;9115  border-color: transparent;9116}9117.light .peach-btn--subtle,9118[data-theme="light"] .peach-btn--subtle {9119  background: #EEE7DD;9120  border-color: #DDD5CB;9121}91229123/* Wide secondary action button on the lock screen — override the9124   hardcoded dark-mode rgba values with warm parchment equivalents. */9125.light .peach-lock-secondary,9126[data-theme="light"] .peach-lock-secondary {9127  background: #EEE7DD;9128  border-color: #DDD5CB;9129  color: #1A1208;9130}9131.light .peach-lock-secondary:hover,9132[data-theme="light"] .peach-lock-secondary:hover {9133  background: #F0E9DF;9134}91359136/* Entry row hover: bg-row lifts the row above the card surface. */9137.light .peach-entry-row:hover,9138[data-theme="light"] .peach-entry-row:hover {9139  background: #F2EBE1;9140}9141.light .peach-entry-row.is-active,9142[data-theme="light"] .peach-entry-row.is-active {9143  background: #F2EBE1;9144}9145.light .peach-entry-row.is-selected,9146[data-theme="light"] .peach-entry-row.is-selected {9147  background: #F5EDE2;9148}91499150/* ──────────────────────────────────────────────────────────────────────────9151   Pair-device flow — bird-stage animation (Phase 1)9152   See src/popup/components/PairingBirds.tsx and the brief §6.2.9153   Three-act animation gated on the [data-phase] attribute of9154   .peach-pair-pair; child layers (birds, sound arcs, flight wave, dot)9155   each react via either pose class or visibility flag.9156   Tokens: accent surfaces use var(--peach-accent); bird illustration9157   colours are baked into the SVG per the brand-peach exception in §3.1.9158   ────────────────────────────────────────────────────────────────────── */91599160.peach-pair-pair {9161  position: absolute;9162  inset: 0;9163  z-index: 3;9164  display: flex;9165  flex-direction: column;9166  padding: 14px 12px 12px;9167  width: 100%;9168  box-sizing: border-box;9169  gap: 0;9170  background:9171    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9172    var(--peach-bg);9173  color: var(--peach-t0);9174  overflow-y: auto;9175  overflow-x: hidden;9176  scrollbar-width: none;9177  isolation: isolate;9178  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9179}9180@keyframes peach-pair-overlay-in {9181  from { opacity: 0; transform: translateY(8px); }9182  to   { opacity: 1; transform: translateY(0); }9183}9184.peach-pair-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }9185.peach-pair-pair::before {9186  content: '';9187  position: absolute;9188  inset: 0;9189  border-radius: inherit;9190  pointer-events: none;9191  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9192  z-index: 0;9193}9194.peach-pair-pair > * { position: relative; z-index: 1; }91959196/* Header --------------------------------------------------------------- */9197.peach-pair-head {9198  display: flex; align-items: center; gap: 10px;9199}9200.peach-pair-back {9201  width: 32px; height: 32px;9202  display: inline-flex; align-items: center; justify-content: center;9203  background: transparent;9204  border: none;9205  border-radius: 8px;9206  color: var(--peach-t1);9207  cursor: pointer;9208  transition: color 0.15s ease, box-shadow 0.15s ease;9209}9210.peach-pair-back:hover {9211  color: var(--peach-accent);9212  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9213}9214.peach-pair-title {9215  font-family: var(--font-display, Georgia, serif);9216  font-style: italic;9217  font-size: 24px;9218  font-weight: 500;9219  letter-spacing: 0.005em;9220  color: var(--peach-t0);9221  line-height: 1;9222}9223.peach-pair-head-spacer { flex: 1; }92249225/* Chip row ------------------------------------------------------------- */9226.peach-pair-chip-row {9227  display: flex;9228  align-items: center;9229  justify-content: flex-start;9230  margin-top: 12px;9231}9232.peach-pair-chip {9233  display: inline-flex; align-items: center; gap: 8px;9234  padding: 5px 10px 5px 8px;9235  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9236  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9237  border-radius: 999px;9238  font-family: var(--peach-mono, ui-monospace, monospace);9239  font-size: 11px;9240  letter-spacing: 0.04em;9241  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9242}9243.peach-pair-chip-dot {9244  width: 6px; height: 6px; border-radius: 50%;9245  background: var(--peach-accent);9246  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9247}9248.peach-pair-chip[data-phase="paired"] {9249  background: color-mix(in srgb, #4f9eda 12%, transparent);9250  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9251  color: #76b6e8;9252}9253.peach-pair-chip[data-phase="paired"] .peach-pair-chip-dot {9254  background: #76b6e8;9255  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9256}9257.peach-pair-chip[data-phase="timeout"],9258.peach-pair-chip[data-phase="mic_denied"],9259.peach-pair-chip[data-phase="version_mismatch"],9260.peach-pair-chip[data-phase="handshake_failed"] {9261  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9262  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9263  color: var(--peach-warn, #d29257);9264}9265.peach-pair-chip[data-phase="timeout"] .peach-pair-chip-dot,9266.peach-pair-chip[data-phase="mic_denied"] .peach-pair-chip-dot,9267.peach-pair-chip[data-phase="version_mismatch"] .peach-pair-chip-dot,9268.peach-pair-chip[data-phase="handshake_failed"] .peach-pair-chip-dot {9269  background: var(--peach-warn, #d29257);9270  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9271}92729273/* Bird stage ----------------------------------------------------------- */9274.peach-pair-stage {9275  position: relative;9276  /* Never let the flex column steal the stage's height to fit whatever is9277     below it — that is what clipped the birds to their legs before. Anything9278     that does not fit has to give somewhere else. */9279  flex: none;9280  margin: 14px 0 8px;9281  height: 180px;9282  border-radius: 12px;9283  background:9284    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9285    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),9286    color-mix(in srgb, var(--peach-bg) 92%, #000);9287  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);9288  overflow: hidden;9289  isolation: isolate;9290}9291.peach-pair-stage::after {9292  content: '';9293  position: absolute;9294  left: 12%; right: 12%;9295  bottom: 36px;9296  height: 1px;9297  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9298}92999300.peach-pair-bird-slot {9301  position: absolute;9302  bottom: 8px;9303  width: 100px;9304  height: 110px;9305  display: flex;9306  align-items: flex-end;9307  justify-content: center;9308}9309.peach-pair-bird-slot-desktop { left: 28px; }9310.peach-pair-bird-slot-mobile { right: 28px; }93119312/* The QR screen is the tallest in the flow: a 180px stage plus headline, sub,9313   QR and action overflows the popup, and the stage is what gets clipped — you9314   saw bird legs and nothing else. Shrink the stage and the birds with it here9315   only, so the birds stay whole and the QR stays comfortably above the fold.9316   Uses the individual `scale` property rather than `transform`, which the9317   mobile bird's hop animation already owns. */9318.peach-adoption-source[data-phase="invitation"] .peach-pair-stage {9319  height: 108px;9320  margin: 8px 0 6px;9321}9322.peach-adoption-source[data-phase="invitation"] .peach-pair-bird-slot {9323  scale: 0.62;9324  transform-origin: center bottom;9325}9326.peach-adoption-source[data-phase="invitation"] .peach-pair-stage::after {9327  bottom: 20px;9328}93299330/* Mobile bird hops in from the right when handshake begins */9331.peach-pair-bird-slot-mobile {9332  opacity: 1;9333  transform: translateX(-6px);9334  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9335}9336.peach-pair-stage.act-listening .peach-pair-bird-slot-mobile,9337.peach-pair-stage.act-chirping .peach-pair-bird-slot-mobile,9338.peach-pair-stage.act-idle .peach-pair-bird-slot-mobile {9339  opacity: 0;9340  transform: translateX(60px) rotate(8deg);9341}9342.peach-pair-stage.act-handshake .peach-pair-bird-slot-desktop,9343.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop {9344  transform: translateX(6px);9345  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9346}93479348/* Paired: both birds bob together */9349.peach-pair-stage.act-paired .peach-pair-bird-slot {9350  animation: peach-pair-happy-bob 1.2s ease-in-out infinite;9351}9352.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { animation-delay: 0.2s; }9353.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop { --bb-x: 6px; }9354.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { --bb-x: -6px; }9355@keyframes peach-pair-happy-bob {9356  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9357  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9358}93599360/* Bird internal -------------------------------------------------------- */9361.peach-pair-bird {9362  width: 108px;9363  height: 108px;9364  transform-origin: 50% 95%;9365}9366.peach-pair-bird svg { width: 100%; height: 100%; overflow: visible; }93679368.peach-pair-bird-body {9369  transform-origin: 50% 80%;9370  animation: peach-pair-bird-bob 2.4s ease-in-out infinite;9371}9372@keyframes peach-pair-bird-bob {9373  0%, 100% { transform: translateY(0) scale(1, 1); }9374  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9375}93769377.peach-pair-bird-eye-group {9378  animation: peach-pair-blink 5.2s steps(1, end) infinite;9379  transform-origin: center;9380  transform-box: fill-box;9381}9382@keyframes peach-pair-blink {9383  0%, 92%, 96%, 100% { transform: scaleY(1); }9384  94%                { transform: scaleY(0.05); }9385}93869387/* Pose: chirping — beak opens, head bobs, aura blooms */9388.peach-pair-bird-pose-chirping .peach-pair-bird-body {9389  animation:9390    peach-pair-bird-bob 2.4s ease-in-out infinite,9391    peach-pair-squeeze 1.7s ease-in-out infinite;9392}9393@keyframes peach-pair-squeeze {9394  0%, 70%, 100% { transform-origin: 50% 85%; }9395  78%           { transform: scale(1.04, 0.96) translateY(1px); }9396  86%           { transform: scale(0.98, 1.02); }9397}9398.peach-pair-bird-pose-chirping .peach-pair-bird-head-group {9399  animation: peach-pair-head-bob 1.7s ease-in-out infinite;9400}9401@keyframes peach-pair-head-bob {9402  0%, 70%, 100% { transform: translateY(0) rotate(0); }9403  78%           { transform: translateY(-3px) rotate(-4deg); }9404  86%           { transform: translateY(-1px) rotate(-2deg); }9405}9406.peach-pair-bird-pose-chirping .peach-pair-bird-beak {9407  animation: peach-pair-beak-open 1.7s ease-in-out infinite;9408}9409@keyframes peach-pair-beak-open {9410  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9411  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9412  86%           { transform: rotate(-6deg); }9413}9414.peach-pair-bird-pose-chirping .peach-pair-bird-aura {9415  animation: peach-pair-aura 1.7s ease-in-out infinite;9416}9417@keyframes peach-pair-aura {9418  0%, 100% { opacity: 0; }9419  50%      { opacity: 0.8; }9420}9421.peach-pair-bird-pose-chirping .peach-pair-bird-tail {9422  animation: peach-pair-tail-twitch 1.7s ease-in-out infinite;9423  transform-origin: 100% 50%;9424}9425@keyframes peach-pair-tail-twitch {9426  0%, 75%, 100% { transform: rotate(0); }9427  82%           { transform: rotate(-3deg) translateX(-1px); }9428}94299430/* Pose: attentive — head tilts toward partner */9431.peach-pair-bird-pose-attentive .peach-pair-bird-head-group {9432  animation: peach-pair-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9433}9434@keyframes peach-pair-head-tilt {9435  0%   { transform: rotate(0) translateY(0); }9436  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9437  100% { transform: rotate(-6deg); }9438}9439.peach-pair-bird-pose-attentive .peach-pair-bird-tail {9440  animation: peach-pair-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9441  transform-origin: 100% 50%;9442}9443@keyframes peach-pair-tail-cock {9444  0%   { transform: rotate(0); }9445  100% { transform: rotate(-4deg); }9446}94479448/* Pose: happy — wing flutter, tuft perk, tail wag */9449.peach-pair-bird-pose-happy .peach-pair-bird-wing {9450  transform-origin: 80% 60%;9451  animation: peach-pair-wing-flutter 0.32s ease-in-out 5;9452}9453@keyframes peach-pair-wing-flutter {9454  0%, 100% { transform: rotate(0) translateY(0); }9455  50%      { transform: rotate(-16deg) translateY(-2px); }9456}9457.peach-pair-bird-pose-happy .peach-pair-bird-tuft {9458  transform-origin: 0% 100%;9459  animation: peach-pair-tuft-perk 0.4s ease-in-out 3;9460}9461@keyframes peach-pair-tuft-perk {9462  0%, 100% { transform: rotate(0); }9463  50%      { transform: rotate(-15deg) translateY(-1px); }9464}9465.peach-pair-bird-pose-happy .peach-pair-bird-tail {9466  transform-origin: 100% 50%;9467  animation: peach-pair-tail-wag 0.5s ease-in-out 4;9468}9469@keyframes peach-pair-tail-wag {9470  0%, 100% { transform: rotate(0); }9471  25%      { transform: rotate(6deg); }9472  75%      { transform: rotate(-6deg); }9473}9474.peach-pair-bird-pose-happy .peach-pair-bird-head-group {9475  animation: peach-pair-head-perk 0.5s ease-out;9476}9477@keyframes peach-pair-head-perk {9478  0%   { transform: translateY(0); }9479  40%  { transform: translateY(-3px) rotate(2deg); }9480  100% { transform: translateY(0); }9481}94829483/* Pose: sad — body droops forward */9484.peach-pair-bird-pose-sad .peach-pair-bird-body {9485  transform: translateY(5px) rotate(-2deg);9486  animation: none;9487}9488.peach-pair-bird-pose-sad .peach-pair-bird-head-group {9489  transform: translateY(4px) rotate(8deg);9490}9491.peach-pair-bird-pose-sad .peach-pair-bird-tuft { transform: rotate(15deg) translateY(2px); }9492.peach-pair-bird-pose-sad .peach-pair-bird-tail { transform: rotate(8deg) translateY(2px); }94939494.peach-pair-bird-pose-hidden { opacity: 0; }94959496/* Sound arcs ----------------------------------------------------------- */9497.peach-pair-arcs {9498  position: absolute;9499  top: 18px;9500  width: 96px;9501  height: 70px;9502  pointer-events: none;9503}9504.peach-pair-arcs-right { right: -60px; }9505.peach-pair-arcs-left  { left: -60px; transform: scaleX(-1); }9506.peach-pair-arc {9507  position: absolute;9508  top: 50%;9509  left: 0;9510  width: 40px;9511  height: 40px;9512  margin-top: -20px;9513  border: 1.2px solid #f4d5a8;9514  border-color: transparent #f4d5a8 transparent transparent;9515  border-radius: 50%;9516  opacity: 0;9517  animation: peach-pair-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9518}9519@keyframes peach-pair-arc-expand {9520  0%   { transform: scale(0.4); opacity: 0; }9521  20%  { opacity: 0.9; }9522  100% { transform: scale(1.6); opacity: 0; }9523}95249525/* Flight wave ---------------------------------------------------------- */9526.peach-pair-flight-track {9527  position: absolute;9528  inset: 32px 36px 38px 36px;9529  pointer-events: none;9530}9531.peach-pair-flight-wave {9532  position: absolute;9533  top: 8px;9534  left: 76px;9535  right: 76px;9536  height: 60px;9537  width: auto;9538  opacity: 0;9539  transition: opacity 0.15s ease;9540  stroke: #f4d5a8;9541  fill: none;9542}9543.peach-pair-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9544.peach-pair-flight-wave.is-visible { opacity: 1; }9545.peach-pair-flight-path,9546.peach-pair-flight-path-2 {9547  stroke-dasharray: 240;9548  stroke-dashoffset: 240;9549  stroke-linecap: round;9550  fill: none;9551}9552.peach-pair-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9553.peach-pair-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9554.peach-pair-flight-wave.is-visible .peach-pair-flight-path {9555  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9556}9557.peach-pair-flight-wave.is-visible .peach-pair-flight-path-2 {9558  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9559}9560@keyframes peach-pair-fly {9561  0%   { stroke-dashoffset: 240; opacity: 0; }9562  20%  { opacity: 1; }9563  100% { stroke-dashoffset: -120; opacity: 0; }9564}95659566/* Connection dot ------------------------------------------------------- */9567.peach-pair-dot {9568  position: absolute;9569  top: 50%; left: 50%;9570  transform: translate(-50%, -50%);9571  width: 40px; height: 40px;9572  opacity: 0;9573  pointer-events: none;9574  transition: opacity 0.3s ease;9575  color: var(--peach-accent);9576}9577.peach-pair-dot.is-visible { opacity: 1; }9578.peach-pair-dot-glow {9579  position: absolute; top: 50%; left: 50%;9580  transform: translate(-50%, -50%);9581  width: 38px; height: 38px;9582  border-radius: 50%;9583  filter: blur(10px);9584  opacity: 0.55;9585  background: var(--peach-accent);9586  animation: peach-pair-dot-bloom 1.4s ease-out;9587}9588.peach-pair-dot-core {9589  position: absolute; top: 50%; left: 50%;9590  transform: translate(-50%, -50%);9591  width: 8px; height: 8px;9592  border-radius: 50%;9593  background: var(--peach-accent);9594  box-shadow: 0 0 12px currentColor;9595  animation: peach-pair-dot-core 1.4s ease-out;9596}9597.peach-pair-dot-ring {9598  position: absolute; top: 50%; left: 50%;9599  width: 60px; height: 60px;9600  transform: translate(-50%, -50%);9601  animation: peach-pair-dot-ring 1.4s linear;9602  stroke: var(--peach-accent);9603}9604@keyframes peach-pair-dot-bloom {9605  0%   { width: 4px; height: 4px; opacity: 0; }9606  35%  { width: 60px; height: 60px; opacity: 0.7; }9607  100% { width: 38px; height: 38px; opacity: 0.55; }9608}9609@keyframes peach-pair-dot-core {9610  0%   { width: 0; height: 0; }9611  35%  { width: 12px; height: 12px; }9612  100% { width: 8px; height: 8px; }9613}9614@keyframes peach-pair-dot-ring {9615  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9616  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9617  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9618}96199620/* Motes — drift upward across the stage */9621.peach-pair-motes {9622  position: absolute;9623  inset: 0;9624  pointer-events: none;9625}9626.peach-pair-mote {9627  position: absolute;9628  width: 2px; height: 2px;9629  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9630  border-radius: 50%;9631  bottom: 32px;9632  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9633  opacity: 0;9634  animation: peach-pair-mote-drift 6s linear infinite;9635  animation-delay: calc(var(--mote-i, 0) * 0.7s);9636}9637@keyframes peach-pair-mote-drift {9638  0%   { transform: translateY(0); opacity: 0; }9639  10%  { opacity: 0.6; }9640  90%  { opacity: 0.1; }9641  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9642}96439644/* Status copy ---------------------------------------------------------- */9645.peach-pair-copy-host {9646  margin: 4px 4px 10px;9647  text-align: center;9648  min-height: 50px;9649}9650.peach-pair-copy {9651  animation: peach-pair-copy-in 0.35s ease both;9652}9653@keyframes peach-pair-copy-in {9654  from { opacity: 0; transform: translateY(4px); }9655  to   { opacity: 1; transform: translateY(0); }9656}9657.peach-pair-headline {9658  font-family: var(--font-display, Georgia, serif);9659  font-style: italic;9660  font-size: 20px;9661  font-weight: 500;9662  line-height: 1.2;9663  letter-spacing: 0.005em;9664  color: var(--peach-t0);9665  margin-bottom: 6px;9666}9667.peach-pair-copy-listening .peach-pair-headline,9668.peach-pair-copy-chirping .peach-pair-headline,9669.peach-pair-copy-idle .peach-pair-headline {9670  font-family: inherit;9671  font-style: normal;9672  font-weight: 500;9673  font-size: 15px;9674  color: var(--peach-t0);9675  letter-spacing: 0;9676}9677.peach-pair-copy-paired .peach-pair-headline {9678  color: var(--peach-t0);9679  font-weight: 600;9680}9681.peach-pair-sub {9682  font-size: 12.5px;9683  line-height: 1.45;9684  color: var(--peach-t1);9685  max-width: 280px;9686  margin: 0 auto;9687  text-wrap: pretty;9688}96899690/* Status action -------------------------------------------------------- */9691.peach-pair-action {9692  margin: 2px 4px 10px;9693  margin-top: auto;9694  display: flex;9695  flex-direction: column;9696  gap: 8px;9697}9698.peach-pair-action-waiting {9699  display: flex;9700  align-items: center;9701  justify-content: space-between;9702  gap: 12px;9703}9704.peach-pair-cancel {9705  min-width: 96px;9706}9707.peach-pair-listening {9708  display: inline-flex; align-items: center; gap: 4px;9709  font-family: var(--peach-mono, ui-monospace, monospace);9710  font-size: 9.5px;9711  text-transform: uppercase;9712  letter-spacing: 0.12em;9713  color: var(--peach-t1);9714  padding: 8px 10px;9715}9716.peach-pair-listen-dot {9717  width: 4px; height: 4px;9718  border-radius: 50%;9719  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9720  animation: peach-pair-listen-pulse 1.2s ease-in-out infinite;9721}9722.peach-pair-listen-dot:nth-child(2) { animation-delay: 0.2s; }9723.peach-pair-listen-dot:nth-child(3) { animation-delay: 0.4s; }9724.peach-pair-listen-label { margin-left: 6px; }9725@keyframes peach-pair-listen-pulse {9726  0%, 100% { opacity: 0.25; transform: scale(0.9); }9727  50%      { opacity: 1;     transform: scale(1.15); }9728}97299730.peach-pair-action-handshake {9731  display: flex;9732  flex-direction: column;9733  align-items: center;9734  gap: 8px;9735  padding: 8px 4px;9736}9737.peach-pair-meter {9738  width: 100%;9739  max-width: 280px;9740  height: 2px;9741  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9742  border-radius: 2px;9743  position: relative;9744  overflow: hidden;9745}9746.peach-pair-meter-bar {9747  position: absolute;9748  top: 0; bottom: 0;9749  width: 30%;9750  left: -30%;9751  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9752  animation: peach-pair-meter-sweep 1.4s ease-in-out infinite;9753}9754@keyframes peach-pair-meter-sweep {9755  0%   { left: -30%; }9756  100% { left: 100%; }9757}9758.peach-pair-meter-label {9759  font-family: var(--peach-mono, ui-monospace, monospace);9760  font-size: 9.5px;9761  text-transform: uppercase;9762  letter-spacing: 0.14em;9763  color: var(--peach-t1);9764}97659766.peach-pair-action-paired {9767  display: flex;9768  align-items: center;9769  gap: 10px;9770}9771.peach-pair-device-confirm {9772  flex: 1;9773  display: inline-flex;9774  align-items: center;9775  gap: 8px;9776  padding: 9px 10px 9px 12px;9777  border-radius: 10px;9778  background: color-mix(in srgb, #76b6e8 12%, transparent);9779  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9780  font-size: 12.5px;9781  color: var(--peach-t0);9782  min-width: 0;9783}9784.peach-pair-device-confirm-glyph {9785  display: inline-flex;9786  color: #76b6e8;9787}9788.peach-pair-device-confirm-name {9789  flex: 1;9790  overflow: hidden;9791  text-overflow: ellipsis;9792  white-space: nowrap;9793}9794.peach-pair-device-confirm-trust {9795  font-family: var(--peach-mono, ui-monospace, monospace);9796  font-size: 9.5px;9797  text-transform: uppercase;9798  letter-spacing: 0.1em;9799  color: #76b6e8;9800  padding: 2px 6px;9801  border-radius: 4px;9802  background: color-mix(in srgb, #76b6e8 14%, transparent);9803}9804.peach-pair-done {9805  min-width: 80px;9806}9807.peach-pair-retry {9808  align-self: center;9809  display: block;9810  margin: 6px auto 0;9811  min-width: 120px;9812}9813.peach-pair-mic-help {9814  font-size: 12px;9815  color: var(--peach-t1);9816  text-align: center;9817  max-width: 320px;9818  margin: 0 auto;9819}98209821/* Rest state — bird stage at idle pose, primary CTA + paired list */9822.peach-pair-pair[data-phase="idle"] .peach-pair-stage {9823  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9824  height: 160px;9825}9826.peach-pair-pair-start {9827  width: 100%;9828  display: inline-flex;9829  align-items: center;9830  justify-content: center;9831  gap: 8px;9832  padding: 11px 14px;9833  border-radius: 10px;9834  background: var(--peach-accent);9835  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9836  color: #1a0905;9837  font-family: inherit;9838  font-size: 13px;9839  font-weight: 600;9840  letter-spacing: 0.01em;9841  cursor: pointer;9842  transition: filter 0.15s ease, transform 0.1s ease;9843}9844.peach-pair-pair-start:hover { filter: brightness(1.08); }9845.peach-pair-pair-start:active { transform: translateY(1px); }98469847.peach-pair-paired-section {9848  margin-top: 14px;9849  display: flex;9850  flex-direction: column;9851  gap: 8px;9852}9853.peach-pair-paired-heading {9854  margin: 0;9855  font-family: var(--peach-mono, ui-monospace, monospace);9856  font-size: 10px;9857  font-weight: 500;9858  letter-spacing: 0.14em;9859  text-transform: uppercase;9860  color: var(--peach-t1);9861}98629863/* Footer --------------------------------------------------------------- */9864.peach-pair-foot {9865  margin: 10px -4px -2px;9866  margin-top: auto;9867}9868.peach-pair-foot-divider {9869  height: 1px;9870  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9871  margin-bottom: 10px;9872}9873.peach-pair-foot-text {9874  font-size: 11px;9875  line-height: 1.5;9876  color: var(--peach-t1);9877  text-align: center;9878  padding: 0 4px;9879  text-wrap: pretty;9880}98819882/* Screen-reader-only live region. Kept off the visual flow but read by9883   assistive tech as the pairing phase advances. */9884.peach-sr-only {9885  position: absolute;9886  width: 1px; height: 1px;9887  padding: 0; margin: -1px;9888  overflow: hidden;9889  clip: rect(0, 0, 0, 0);9890  white-space: nowrap;9891  border: 0;9892}98939894/* Reduced motion — stage simplifies to opacity transitions only */9895@media (prefers-reduced-motion: reduce) {9896  .peach-pair-bird-body,9897  .peach-pair-bird-head-group,9898  .peach-pair-bird-beak,9899  .peach-pair-bird-wing,9900  .peach-pair-bird-tuft,9901  .peach-pair-bird-tail,9902  .peach-pair-bird-eye-group,9903  .peach-pair-bird-aura,9904  .peach-pair-arc,9905  .peach-pair-flight-path,9906  .peach-pair-flight-path-2,9907  .peach-pair-dot-glow,9908  .peach-pair-dot-core,9909  .peach-pair-dot-ring,9910  .peach-pair-mote,9911  .peach-pair-meter-bar,9912  .peach-pair-listen-dot,9913  .peach-pair-bird-slot,9914  .peach-pair-bird-slot-mobile {9915    animation: none !important;9916    transition: opacity 0.2s linear !important;9917  }9918}99199920/* ─────────────────────────────────────────────────────────────────9921   Settings → Sync surface. Wraps the same bird9922   animation used by the pairing flow with a paired-devices list and9923   the "Pair a device" CTA.9924   ───────────────────────────────────────────────────────────────── */9925.peach-pair-settings {9926  position: absolute;9927  inset: 0;9928  z-index: 3;9929  display: flex;9930  flex-direction: column;9931  gap: 18px;9932  padding: 14px 12px 12px;9933  width: 100%;9934  box-sizing: border-box;9935  overflow-y: auto;9936  overflow-x: hidden;9937  /* Same warm surface as the pairing screen — unifies the two views. */9938  background:9939    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9940    var(--peach-bg);9941  color: var(--peach-t0);9942  isolation: isolate;9943  /* Hide native scrollbar — content fits 99% of the time and a chunky9944     gutter ruins the surface. */9945  scrollbar-width: none;9946  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9947}9948.peach-pair-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9949.peach-pair-settings::before {9950  content: '';9951  position: absolute;9952  inset: 0;9953  pointer-events: none;9954  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9955  z-index: 0;9956}9957.peach-pair-settings > * { position: relative; z-index: 1; }99589959.peach-pair-settings--pairing {9960  padding: 0;9961  align-items: stretch;9962  justify-content: stretch;9963  background: none;9964  isolation: auto;9965}9966.peach-pair-settings--pairing::before { display: none; }99679968.peach-pair-settings-header {9969  display: flex;9970  align-items: center;9971  gap: 10px;9972}9973.peach-pair-settings-title {9974  margin: 0;9975  font-family: var(--font-display, Georgia, serif);9976  font-style: italic;9977  font-size: 24px;9978  font-weight: 500;9979  line-height: 1;9980  color: var(--peach-t0);9981  letter-spacing: 0.005em;9982}9983.peach-pair-settings-section {9984  margin: 6px 0 -4px;9985  font-size: 11px;9986  font-weight: 600;9987  letter-spacing: 0.08em;9988  text-transform: uppercase;9989  color: var(--peach-text-muted);9990}9991.peach-pair-settings-error {9992  font-size: 12px;9993  padding: 8px 10px;9994  border-radius: 8px;9995  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);9996  color: var(--peach-text);9997}9998.peach-pair-settings-footer {9999  margin-top: auto;10000  padding-top: 18px;10001  font-size: 11.5px;10002  line-height: 1.5;10003  color: var(--peach-text-muted);10004  text-align: center;10005}1000610007/* Hero card shown when no devices are paired yet. */10008.peach-pair-hero {10009  display: flex;10010  flex-direction: column;10011  align-items: center;10012  gap: 12px;10013  padding: 20px 12px 8px;10014  text-align: center;10015}10016.peach-pair-hero-svg {10017  display: block;10018  max-width: 100%;10019  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));10020}10021.peach-pair-hero-headline {10022  margin: 0;10023  font-family: var(--font-display, Georgia, serif);10024  font-style: italic;10025  font-size: 20px;10026  font-weight: 500;10027  line-height: 1.2;10028  letter-spacing: 0.005em;10029  color: var(--peach-t0);10030}10031.peach-pair-hero-sub {10032  margin: 0;10033  font-size: 13px;10034  line-height: 1.5;10035  color: var(--peach-t1);10036  max-width: 320px;10037  text-wrap: pretty;10038}1003910040.peach-pair-pair-cta {10041  display: flex;10042  justify-content: center;10043  padding: 4px 0 6px;10044}10045.peach-pair-pair-button {10046  display: inline-flex;10047  align-items: center;10048  gap: 8px;10049  min-width: 220px;10050  justify-content: center;10051}10052.peach-pair-pair-button-icon {10053  flex: 0 0 auto;10054}1005510056/* Paired devices list. Roomy rows that look at home next to the rest10057   of Settings; stale rows get a soft warm-warning border tint. */10058.peach-pair-device-list {10059  list-style: none;10060  margin: 0;10061  padding: 0;10062  display: flex;10063  flex-direction: column;10064  gap: 8px;10065}10066.peach-pair-device-row {10067  display: flex;10068  align-items: center;10069  gap: 12px;10070  padding: 12px;10071  border-radius: 10px;10072  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10073  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);10074}10075.peach-pair-device-row[data-stale="true"] {10076  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);10077}10078.peach-pair-device-icon {10079  width: 32px;10080  height: 32px;10081  display: flex;10082  align-items: center;10083  justify-content: center;10084  border-radius: 8px;10085  color: var(--peach-text);10086  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);10087}10088.peach-pair-device-info {10089  flex: 1;10090  display: flex;10091  flex-direction: column;10092  gap: 2px;10093  min-width: 0;10094}10095.peach-pair-device-name {10096  font-size: 14px;10097  font-weight: 600;10098  color: var(--peach-text);10099  overflow: hidden;10100  text-overflow: ellipsis;10101  white-space: nowrap;10102}10103.peach-pair-device-meta {10104  font-size: 11.5px;10105  color: var(--peach-text-muted);10106  display: flex;10107  flex-wrap: wrap;10108  align-items: center;10109  gap: 8px;10110}10111.peach-pair-device-badge {10112  font-size: 10.5px;10113  font-weight: 500;10114  letter-spacing: 0.02em;10115  padding: 2px 6px;10116  border-radius: 999px;10117  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);10118  color: var(--peach-text);10119}10120.peach-pair-device-stale {10121  font-size: 10.5px;10122  font-weight: 500;10123  color: var(--peach-warn, #d29257);10124}10125.peach-pair-device-remove {10126  flex: 0 0 auto;10127  color: var(--peach-text-muted);10128}10129.peach-pair-device-remove:hover {10130  color: var(--peach-danger, #c25b4a);10131}10132.peach-pair-unpair-confirm {10133  display: flex;10134  gap: 6px;10135  align-items: center;10136}1013710138/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */10139.peach-pair-pro-card {10140  position: relative;10141  margin: 18px 12px;10142  padding: 18px 20px 22px;10143  border-radius: 22px;10144  background:10145    radial-gradient(140% 90% at 50% 0%,10146      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,10147      transparent 60%),10148    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10149  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);10150  box-shadow:10151    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,10152    0 18px 40px -24px rgba(0, 0, 0, 0.45);10153  display: flex;10154  flex-direction: column;10155  align-items: center;10156  gap: 10px;10157  text-align: center;10158  overflow: hidden;10159}10160.peach-pair-pro-stage {10161  position: relative;10162  width: 220px;10163  height: 140px;10164  display: flex;10165  align-items: flex-end;10166  justify-content: center;10167  margin-bottom: 2px;10168}10169.peach-pair-pro-bird-slot {10170  width: 140px;10171  height: 132px;10172  display: flex;10173  align-items: flex-end;10174  justify-content: center;10175  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));10176}10177.peach-pair-pro-bird-slot .peach-pair-bird {10178  width: 100%;10179  height: 100%;10180}10181.peach-pair-pro-bird-slot .peach-pair-bird svg {10182  width: 100%;10183  height: 100%;10184  overflow: visible;10185}10186.peach-pair-pro-headline {10187  margin: 4px 0 0;10188  font-family: var(--font-display, "Cormorant Garamond", serif);10189  font-style: italic;10190  font-size: 19px;10191  font-weight: 500;10192  letter-spacing: 0.01em;10193  color: var(--peach-t0);10194  max-width: 280px;10195  line-height: 1.25;10196}10197.peach-pair-pro-body {10198  margin: 0;10199  font-size: 13px;10200  line-height: 1.55;10201  color: var(--peach-t1);10202  max-width: 300px;10203}10204.peach-pair-pro-cta {10205  margin-top: 4px;10206}10207.peach-pair-pro-foot {10208  margin: 2px 0 0;10209  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10210  font-size: 0.625rem;10211  letter-spacing: 0.08em;10212  text-transform: uppercase;10213  color: var(--peach-t2);10214  opacity: 0.75;10215}1021610217/* Shell border and shadow in light mode: match dark mode's near-invisible10218   border weight so the popup frame looks the same in both themes. */10219.light .peach-shell,10220.light .peach-screen {10221  border-color: rgba(26, 18, 8, 0.07);10222  box-shadow:10223    0 2px 8px rgba(80, 56, 32, 0.08),10224    0 14px 48px rgba(80, 56, 32, 0.10),10225    0 0 0 1px rgba(26, 18, 8, 0.04);10226}1022710228/* HOLE 4: the revoke confirmation carries its own disclosure, so it needs the10229   full row width rather than sitting inline beside the device name. */10230.peach-settings-row:has(> .peach-unpair-confirm) { flex-wrap: wrap; }10231.peach-unpair-confirm {10232  display: flex;10233  flex-direction: column;10234  gap: 8px;10235  width: 100%;10236}10237.peach-unpair-confirm-note {10238  margin: 0;10239  font-size: 0.6875rem;10240  line-height: 1.5;10241  color: var(--peach-t2);10242}1024310244/* Sync mode selector — three named choices (public / private / off). Replaces10245   the old binary "local network only" toggle; see docs/sync-lan-retirement.md. */10246.peach-sync-mode {10247  display: flex;10248  align-items: flex-start;10249  gap: 10px;10250  width: 100%;10251  text-align: left;10252  padding: 10px 12px;10253  margin-top: 8px;10254  border-radius: 10px;10255  border: 1px solid var(--peach-border);10256  background: color-mix(in srgb, var(--peach-t0) 3%, transparent);10257  color: var(--peach-t1);10258  cursor: pointer;10259  transition: border-color var(--peach-dur-80) var(--peach-curve-arrival),10260              background-color var(--peach-dur-80) var(--peach-curve-arrival);10261}10262.peach-sync-mode:hover:not(:disabled) {10263  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);10264}10265.peach-sync-mode.is-active {10266  border-color: var(--peach-accent);10267  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);10268}10269.peach-sync-mode:disabled { opacity: 0.6; cursor: default; }10270.peach-sync-mode-main { display: flex; flex-direction: column; gap: 3px; flex: 1; }10271.peach-sync-mode-title { font-size: 12px; }10272.peach-sync-mode-sub {10273  font-size: 11px;10274  line-height: 1.5;10275  color: var(--peach-t2);10276}10277.peach-sync-mode-pip {10278  flex: none;10279  margin-top: 3px;10280  width: 12px; height: 12px;10281  border-radius: 50%;10282  border: 1px solid var(--peach-t3);10283}10284.peach-sync-mode.is-active .peach-sync-mode-pip {10285  border-color: var(--peach-accent);10286  background:10287    radial-gradient(circle at 50% 50%, var(--peach-accent) 0 42%, transparent 44%);10288}10289.peach-sync-mode-disclosure {10290  margin: 10px 2px 0;10291  font-size: 11px;10292  line-height: 1.5;10293  color: var(--peach-t2);10294}10295.peach-sync-mode-warn { color: var(--peach-breach); }1029610297/* Compact form, used mid-pairing: a quiet line, not a decision to make. */10298.peach-sync-mode-summary {10299  margin: 8px 2px 0;10300  font-size: 11px;10301  color: var(--peach-t2);10302  text-align: center;10303}10304.peach-sync-mode-change {10305  background: none;10306  border: none;10307  padding: 0;10308  font: inherit;10309  color: var(--peach-accent);10310  text-decoration: underline;10311  cursor: pointer;10312}