popup.css

1html,2body,3#app,4.popup-root {5  width: 320px;6  min-height: 520px;7  height: 520px;8  margin: 0;9}1011body {12  overflow: hidden;13  background: var(--bg);14  color: var(--t0);15  font-family: var(--font-ui);16  font-weight: 300;17  position: relative;18}1920* {21  box-sizing: border-box;22}2324button,25input,26textarea,27select {28  font: inherit;29}3031button {32  border: 0;33}3435.popup-root {36  position: relative;37  overflow: hidden;38}3940.peach-theme {41  color: var(--peach-t0);42  font-family: var(--font-ui);43  font-weight: 300;44  box-sizing: border-box;45  text-align: left;46}47.peach-theme, .peach-theme * { box-sizing: inherit; }4849.peach-brand-mark {50  width: 14px;51  height: 14px;52  flex-shrink: 0;53}5455.peach-status-pip.is-hidden {56  display: none;57}5859.peach-status-pip.unlocked {60  background: var(--peach-health-ok);61  box-shadow: 0 0 6px rgba(100, 210, 100, 0.6);62}6364.peach-status-pip.pulse {65  animation: pip-pulse 400ms var(--peach-curve-settle) both;66}6768/* Shell */69.peach-shell, .peach-screen {70  background:71    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),72    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),73    var(--peach-bg);74  border: 1px solid var(--peach-t3);75  box-shadow:76    0 2px 8px rgba(0,0,0,0.55),77    0 14px 48px rgba(0,0,0,0.7),78    0 0 0 1px rgba(240,232,216,0.04);79  overflow: hidden;80}81.peach-shell {82  display: grid;83  grid-template-rows: auto 1fr;84  min-height: 520px;85  position: relative;86  isolation: isolate;87}8889.peach-shell[data-surface="extension"] {90  width: min(320px, 100vw);91  border-radius: 0;92  height: 520px;93  max-height: 520px;94  overflow: hidden;95}9697/* ── Lock screen – full-window lock/create stage ── */98.lock-screen--vault-stage {99  display: flex;100  flex-direction: column;101  gap: 18px;102  padding: 20px 18px 18px;103  justify-content: flex-start;104}105.lock-screen--vault-stage .peach-lock-panel {106  margin-top: auto;107}108.peach-lock-headline--unlock {109  max-width: 220px;110}111.peach-lock-hero--unlock {112  padding-top: 14px;113}114.peach-lock-panel--unlock {115  gap: 10px;116}117118.peach-lock-restore-link {119  background: transparent;120  border: none;121  cursor: pointer;122  font-family: var(--font-mono);123  font-size: 0.625rem;124  letter-spacing: 0.08em;125  color: var(--t1);126  padding: 5px 0;127  text-align: left;128  transition: color 150ms ease;129}130131.peach-lock-restore-link:hover {132  color: var(--t0);133}134.peach-shell[data-surface="extension"] .peach-stage {135  min-height: 250px;136}137138/* Screen (unlock) */139.peach-screen {140  width: min(320px, 100vw);141  min-height: 100%;142  height: 100%;143  border-radius: 0;144  padding: 16px 20px 18px;145  display: grid;146  gap: 14px;147}148.peach-screen[data-motion-phase="enter"] {149  animation: peach-screen-enter var(--peach-dur-600) var(--peach-curve-arrival) both;150}151.peach-screen-header { min-height: 20px; }152153/* Wordmark */154.peach-wordmark {155  margin: 0;156  font-family: var(--font-display);157  font-size: 0.9375rem;158  font-style: italic;159  letter-spacing: 0.03em;160  color: var(--peach-t0);161  display: inline-flex;162  min-height: 1em;163}164165/* Motion text / char animation */166.peach-motion-text { display: inline-flex; min-height: 1em; }167.peach-motion-char {168  display: inline-block;169  white-space: pre;170  opacity: 0;171  transform: translateY(0.22em);172  animation: peach-char-enter var(--peach-motion-duration, 380ms) var(--peach-curve-arrival) forwards;173  animation-delay: calc(var(--peach-char-index, 0) * 20ms);174}175176/* Chrome */177.peach-chrome {178  position: relative;179  z-index: 10;180  padding: 16px 20px 0;181  display: flex;182  justify-content: space-between;183  align-items: center;184  /* z-index:10 keeps the header icons above `.peach-loading` (Suspense185     fallback) per §15 regression guard. Without pointer-events:none, the186     empty header strip also sits above `.peach-overlay-view` (z-index:2)187     and swallows clicks meant for an overlay's back button / top search. */188  pointer-events: none;189}190.peach-chrome .peach-btn { pointer-events: auto; }191.peach-chrome.is-hidden-for-overlay,192.peach-search-wrap.is-hidden-for-overlay {193  opacity: 0;194  visibility: hidden;195  pointer-events: none;196}197/* The pair-device surface owns its own header and header — fully collapse the global198   chrome row so the warm gradient reaches the popup edge. */199.peach-chrome.is-collapsed,200.peach-search-wrap.is-collapsed {201  display: none;202}203.peach-wordmark-wrap { display: flex; align-items: center; gap: 5px; }204.peach-status-pip {205  width: 5px;206  height: 5px;207  border-radius: 50%;208  background: var(--peach-t3);209  display: inline-flex;210  flex-shrink: 0;211  transition: background 400ms ease, box-shadow 400ms ease;212}213.peach-chrome-actions { display: flex; gap: 6px; }214215/* Shell body */216.peach-shell-body {217  position: relative;218  display: grid;219  grid-template-rows: 1fr auto;220  min-height: 0;221  min-width: 0;222  width: 100%;223  overflow: hidden;224  height: 100%;225}226.peach-shell-veil {227  position: absolute; inset: 0;228  background: #000; opacity: 0;229  pointer-events: none; z-index: 1;230}231.peach-shell[data-motion-phase="enter"] .peach-shell-body {232  animation: peach-shell-fade-in var(--peach-dur-600) var(--peach-curve-arrival) both;233}234.peach-shell[data-motion-phase="exit"] .peach-shell-veil {235  animation: peach-veil-in 300ms var(--peach-curve-departure) forwards;236}237238/* Content frame */239.peach-content-frame {240  display: grid;241  grid-template-rows: 1fr auto;242  grid-template-columns: minmax(0, 1fr);243  align-content: start;244  min-height: 0;245  min-width: 0;246  overflow: hidden;247  transition: opacity 80ms ease, transform 80ms ease;248}249.peach-content-frame.navigating {250  opacity: 0.93;251  transform: translateX(2px);252}253.peach-content-frame[data-content-phase="enter"] {254  animation: peach-content-enter 135ms ease-out both;255}256.peach-content-frame[data-content-phase="exit"] {257  animation: peach-content-exit 95ms ease-in forwards;258}259.peach-content-frame[data-content-phase="idle"] { opacity: 1; transform: none; }260261/* Stage */262.peach-stage {263  padding: 10px 20px 12px;264  display: grid;265  gap: 12px;266  align-content: start;267  min-width: 0;268  min-height: 0;269  max-width: 100%;270  overflow-y: auto;271  overflow-x: hidden;272  scrollbar-width: none;273  -ms-overflow-style: none;274  overscroll-behavior: contain;275}276.peach-stage::-webkit-scrollbar { display: none; }277278/* Entry name */279.peach-entry-name-wrap { position: relative; overflow: hidden; max-width: 100%; }280.peach-entry-header {281  position: relative;282  z-index: 1;283  display: flex;284  align-items: flex-start;285  gap: 6px;286  min-width: 0;287}288.peach-entry-header-name {289  flex: 1;290  min-width: 0;291}292.peach-entry-name {293  margin: 0;294  padding-bottom: 0.12em;295  font-family: var(--font-display);296  font-style: italic; font-weight: 400;297  font-size: 44px; line-height: 0.95;298  color: var(--peach-t0);299  display: -webkit-box;300  -webkit-line-clamp: 2;301  -webkit-box-orient: vertical;302  overflow: hidden;303  text-wrap: balance;304}305.peach-entry-name--lg { font-size: 40px; }306.peach-entry-name--xl { font-size: 34px; line-height: 0.98; }307.peach-entry-name--xxl { font-size: 30px; line-height: 1.02; }308.peach-entry-name-text { display: block; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; padding-bottom: 0.12em; }309310/* Trash icon in entry header */311.peach-entry-trash-btn {312  flex-shrink: 0;313  padding: 4px;314  margin-top: 4px;315  background: transparent;316  border: none;317  cursor: pointer;318  color: var(--peach-t2);319  border-radius: 4px;320  transition: color 140ms ease, background 140ms ease;321  display: flex;322  align-items: center;323  justify-content: center;324}325.peach-entry-trash-btn:hover {326  color: var(--peach-t1);327  background: var(--peach-t3);328}329.peach-entry-trash-confirm {330  display: flex;331  align-items: center;332  gap: 6px;333  flex-shrink: 0;334  margin-top: 6px;335  flex-wrap: nowrap;336}337.peach-entry-trash-confirm-label {338  font-family: var(--font-mono);339  font-size: 0.5625rem;340  letter-spacing: 0.1em;341  color: var(--peach-t2);342  white-space: nowrap;343}344.peach-entry-name-button {345  padding: 0;346  background: transparent;347  text-align: left;348  cursor: pointer;349  max-width: 100%;350  overflow: hidden;351  display: block;352}353.peach-entry-name-char {354  display: inline-block;355  white-space: pre;356  opacity: 0;357  transform: translateY(0.22em);358  animation: peach-char-enter 380ms var(--peach-curve-arrival) forwards;359  animation-delay: calc(var(--char-index, 0) * 20ms);360}361362/* Domain */363.peach-domain { border-top: 1px solid var(--peach-t3); padding-top: 9px; }364.peach-domain-row {365  width: 100%; border: 0; background: transparent; color: inherit;366  padding: 0; display: flex; justify-content: space-between; align-items: baseline;367  cursor: default;368}369.peach-domain-value {370  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;371  font-size: 0.625rem; font-style: italic;372  letter-spacing: 0.12em; color: var(--peach-t1);373}374375/* Fields */376.peach-fields { display: grid; gap: 10px; }377.peach-field-card { display: grid; gap: 7px; }378.peach-label {379  font-family: Inter, system-ui, sans-serif;380  text-transform: uppercase; letter-spacing: 0.2em;381  font-size: 0.5rem; color: var(--peach-t2);382}383.peach-add-field-btn {384  align-self: flex-start;385  background: none; border: none; padding: 2px 0;386  font-family: Inter, system-ui, sans-serif;387  font-size: 0.6875rem; color: var(--peach-accent);388  cursor: pointer; opacity: 0.75;389  letter-spacing: 0.02em;390}391.peach-add-field-btn:hover { opacity: 1; }392.peach-field-value-row {393  display: flex; justify-content: space-between;394  align-items: center; gap: 8px;395  min-width: 0;396}397.peach-field-value {398  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;399  font-size: 0.8125rem; color: var(--peach-t1);400  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;401  flex: 1;402  min-width: 0;403}404.peach-password-value {405  display: inline-flex;406  align-items: center;407  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;408  font-size: 1rem; letter-spacing: 0.3em; color: var(--peach-t0);409  overflow: hidden;410  text-overflow: ellipsis;411  white-space: nowrap;412  flex: 1;413  min-width: 0;414  max-width: 100%;415}416.peach-password-value.is-revealed {417  font-size: 0.875rem;418  letter-spacing: 0.08em;419}420.peach-password-text,421.peach-password-mask {422  display: block;423  width: 100%;424  overflow: hidden;425  white-space: nowrap;426  /* Render as uniform mid-line bullets, not baseline periods */427  font-family: Inter, system-ui, sans-serif;428  font-size: 0.625rem;429  letter-spacing: 3px;430  user-select: none;431}432.peach-field-actions { display: flex; gap: 4px; align-items: center; }433.peach-password-strength { display: flex; align-items: center; gap: 8px; }434.peach-strength-bar { display: flex; gap: 3px; }435.peach-strength-seg { width: 28px; height: 4px; border-radius: 2px; background: #eee; }436.peach-strength-label {437  font-family: "IBM Plex Mono", monospace;438  font-style: italic;439  font-size: 0.5625rem;440  font-weight: 300;441  min-width: 36px;442  text-align: right;443  color: var(--peach-t2);444  letter-spacing: 0.06em;445}446447.peach-strength-hairline {448  display: flex;449  align-items: center;450  gap: 10px;451  margin-top: -2px;452}453454.peach-strength-hairline-track {455  flex: 1;456  height: 3px;457  border-radius: 2px;458  background: var(--peach-s2);459  overflow: hidden;460}461462.peach-strength-hairline-fill {463  height: 100%;464  border-radius: 2px;465  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),466    background 400ms ease;467}468469/* Note content (display) */470.peach-note-content {471  border-top: 1px solid var(--peach-t3);472  padding-top: 10px;473  font-family: var(--font-display);474  font-size: 0.9375rem;475  line-height: 1.75;476  color: var(--peach-t1);477}478479/* ── Inline editing ─────────────────────────────────────────────────── */480481/* Clickable display values */482.peach-inline-clickable {483  cursor: text;484  border-radius: 3px;485  transition: background 150ms ease;486}487.peach-inline-clickable:hover {488  background: rgba(240, 232, 216, 0.05);489}490491/* Subtle "edit" hint that appears on hover */492.peach-inline-edit-hint {493  font-family: Inter, system-ui, sans-serif;494  font-size: 0.5625rem;495  text-transform: uppercase;496  letter-spacing: 0.14em;497  color: var(--peach-t2);498  opacity: 0;499  transition: opacity 120ms ease;500  pointer-events: none;501  margin-left: 6px;502  flex-shrink: 0;503}504.peach-domain-row:hover .peach-inline-edit-hint {505  opacity: 1;506}507508/* Title editing */509.peach-inline-title-wrap {510  display: flex;511  flex-direction: column;512  gap: 6px;513}514.peach-inline-title-input {515  font-family: var(--font-display);516  font-style: italic;517  font-weight: 400;518  font-size: 40px;519  line-height: 0.95;520  color: var(--peach-t0);521  background: transparent;522  border: none;523  border-bottom: 1px solid var(--peach-accent);524  outline: none;525  width: 100%;526  padding: 2px 0;527}528529/* Generic inline field */530.peach-inline-field-wrap {531  display: flex;532  flex-direction: column;533  gap: 6px;534}535.peach-inline-input {536  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;537  font-size: 0.8125rem;538  color: var(--peach-t0);539  background: transparent;540  border: none;541  border-bottom: 1px solid var(--peach-accent);542  outline: none;543  width: 100%;544  padding: 3px 0;545}546.peach-inline-textarea {547  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;548  font-size: 0.6875rem;549  line-height: 1.7;550  color: var(--peach-t0);551  background: rgba(240, 232, 216, 0.04);552  border: 1px solid var(--peach-accent);553  border-radius: 4px;554  outline: none;555  width: 100%;556  padding: 8px;557  resize: vertical;558  min-height: 80px;559}560561/* Save / cancel row */562.peach-inline-actions {563  display: flex;564  gap: 6px;565  align-items: center;566}567.peach-inline-save-btn,568.peach-inline-cancel-btn {569  display: inline-flex;570  align-items: center;571  justify-content: center;572  width: 26px;573  height: 26px;574  border-radius: 4px;575  border: none;576  cursor: pointer;577  transition: background 140ms ease, opacity 140ms ease;578  flex-shrink: 0;579}580.peach-inline-save-btn {581  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);582  color: var(--peach-accent);583}584.peach-inline-save-btn:hover:not(:disabled) {585  background: color-mix(in srgb, var(--peach-accent) 30%, transparent);586}587.peach-inline-cancel-btn {588  background: rgba(240, 232, 216, 0.06);589  color: var(--peach-t2);590}591.peach-inline-cancel-btn:hover:not(:disabled) {592  background: rgba(240, 232, 216, 0.12);593  color: var(--peach-t1);594}595.peach-inline-save-btn:disabled,596.peach-inline-cancel-btn:disabled {597  opacity: 0.4;598  cursor: not-allowed;599}600601/* Inline password generator wrapper */602.peach-inline-generator-wrap {603  margin-top: 10px;604  padding-top: 10px;605  border-top: 1px solid var(--peach-t3);606  display: flex;607  flex-direction: column;608  gap: 8px;609}610.peach-inline-generator-cancel {611  align-self: flex-start;612  font-size: 0.6875rem;613  color: var(--peach-t2);614}615616/* "is-editing" card state */617.peach-field-card.is-editing {618  background: rgba(240, 232, 216, 0.02);619  border-radius: 6px;620  padding: 8px;621  margin: -8px;622}623624/* Inline tag editor on Entry detail view */625.peach-inline-tag-editor {626  display: flex;627  flex-direction: column;628  gap: 6px;629}630631/* Quiet inline "+ add X" link in the entry detail body */632.peach-entry-add-link {633  justify-self: start;634  margin-top: 8px;635}636637/* Additional URLs editor revealed by clicking the URL field */638.peach-additional-urls {639  display: flex;640  flex-direction: column;641  gap: 6px;642  margin-top: 8px;643}644.peach-additional-urls-label {645  font-size: 0.5625rem;646  letter-spacing: 0.1em;647  text-transform: uppercase;648  color: var(--peach-t2);649  margin-bottom: 2px;650}651/* UI-5 / LV-4: recovery words grid in the view-words reveal. */652.peach-recovery-words-grid {653  display: grid;654  grid-template-columns: 1fr 1fr;655  gap: 4px 10px;656}657.peach-recovery-word {658  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;659  font-size: 11px;660  color: var(--peach-t0);661}662.peach-recovery-word b {663  color: var(--peach-t2);664  font-weight: 400;665  margin-right: 4px;666}667668/* UI-1 / HV-1b: dismissible sync alert banners at the top of the vault view. */669.peach-sync-alerts {670  display: flex;671  flex-direction: column;672  gap: 6px;673  padding: 8px 12px 0;674}675.peach-sync-alert {676  display: flex;677  align-items: flex-start;678  gap: 8px;679  padding: 8px 10px;680  border-radius: 7px;681  background: color-mix(in srgb, #C8A840 14%, transparent);682  border: 1px solid color-mix(in srgb, #C8A840 38%, transparent);683}684.peach-sync-alert-text {685  flex: 1;686  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;687  font-size: 10px;688  line-height: 1.45;689  color: var(--peach-t0);690}691.peach-sync-alert-dismiss {692  flex-shrink: 0;693  background: none;694  border: none;695  color: var(--peach-t2);696  font-size: 14px;697  line-height: 1;698  cursor: pointer;699  padding: 0 2px;700}701.peach-sync-alert-dismiss:hover { color: var(--peach-t0); }702703/* UI-8 / LV-2: non-blocking homograph warning under the URL editor. */704.peach-homograph-warning {705  margin: 4px 0 2px;706  padding: 6px 8px;707  border-radius: 6px;708  background: color-mix(in srgb, var(--peach-breach) 12%, transparent);709  border: 1px solid color-mix(in srgb, var(--peach-breach) 36%, transparent);710  color: var(--peach-t1);711  font-size: 0.6875rem;712  line-height: 1.4;713}714.peach-additional-url-row {715  display: flex;716  align-items: center;717  gap: 6px;718}719.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }720.peach-additional-url-remove {721  background: transparent;722  border: 1px solid var(--peach-t3);723  color: var(--peach-t2);724  width: 22px;725  height: 22px;726  border-radius: 4px;727  cursor: pointer;728  font-size: 0.875rem;729  line-height: 1;730  display: inline-flex;731  align-items: center;732  justify-content: center;733  flex-shrink: 0;734  transition: color 120ms ease, border-color 120ms ease;735}736.peach-additional-url-remove:hover:not(:disabled) {737  color: var(--peach-accent);738  border-color: var(--peach-border-accent);739}740.peach-additional-urls-add { align-self: flex-start; }741742/* Delete row */743.peach-entry-delete-row {744  display: flex;745  align-items: center;746  gap: 8px;747  padding-top: 18px;748  margin-top: 8px;749  border-top: 1px solid var(--peach-t3);750}751.peach-delete-btn {752  font-size: 0.6875rem;753  color: var(--peach-t2);754  padding: 4px 0;755}756.peach-delete-confirm-text {757  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;758  font-size: 0.6875rem;759  font-style: italic;760  color: var(--peach-t2);761  flex-shrink: 0;762}763764/* TOTP band */765.peach-totp-band {766  border-top: 1px solid var(--peach-t3);767  padding: 12px 20px 14px;768  position: relative;769  display: grid;770  grid-template-columns: 1fr auto;771  gap: 10px;772}773.peach-totp-main {774  min-width: 0;775  cursor: pointer;776  user-select: none;777}778.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }779.peach-totp-code-row {780  display: flex;781  align-items: flex-end;782  gap: 10px;783  min-width: 0;784}785.peach-totp-code {786  margin: 2px 0 0;787  font-family: var(--font-display);788  font-style: italic;789  font-weight: 300;790  font-size: 38px; color: var(--peach-accent);791  line-height: 0.95; min-height: 1em;792  min-width: 0;793}794.peach-totp-code-text {795  display: inline-flex;796  overflow: hidden;797  text-overflow: ellipsis;798  white-space: nowrap;799}800.peach-totp-copy-btn {801  margin-bottom: 2px;802  flex-shrink: 0;803  border-color: transparent;804}805.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }806.peach-totp-countdown {807  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;808  font-size: 22px; color: var(--peach-t1);809}810.peach-totp-ring { transform: rotate(-90deg); }811.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }812.peach-totp-ring-progress {813  fill: none; stroke: var(--peach-accent); stroke-width: 2;814  stroke-linecap: round;815  transition: stroke-dashoffset 1s linear, stroke 500ms ease;816}817/* Search bar */818.peach-search-wrap {819  border-top: 1px solid var(--peach-t3);820  background: var(--peach-s1);821  min-height: 54px; position: relative;822  box-shadow: inset 0 6px 18px transparent;823  transition: box-shadow 700ms ease;824}825.peach-search-wrap::before {826  content: "";827  position: absolute;828  left: 0;829  top: 0;830  height: 2px;831  width: var(--peach-totp-progress, 0%);832  background: var(--peach-accent);833  opacity: 0;834  transition: width 1s linear, opacity 180ms ease;835  pointer-events: none;836}837.peach-shell[data-totp-active="true"] .peach-search-wrap::before {838  opacity: 0.9;839}840.peach-shell[data-totp-active="true"] .peach-search-wrap {841  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);842}843844@keyframes peach-totp-code-flare {845  0%   { filter: brightness(1); }846  25%  { filter: brightness(1.3); }847  100% { filter: brightness(1); }848}849.peach-totp-code.is-hot {850  animation: peach-totp-code-flare 3000ms ease-in-out both;851}852.peach-search-bar {853  min-height: 54px;854  display: grid;855  grid-template-columns: auto minmax(0, 1fr) auto;856  align-items: center;857  gap: 8px; padding: 0 9px 0 12px;858}859.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }860.peach-search-input {861  border: 0; background: transparent; color: var(--peach-t0);862  font-family: var(--font-display);863  font-style: italic; font-size: 18px;864  outline: none; width: 100%; min-width: 0; padding: 0;865  caret-color: var(--peach-accent);866}867.peach-search-input::placeholder { color: var(--peach-t2); }868.peach-search-meta {869  display: grid;870  grid-auto-flow: column;871  align-items: center;872  justify-content: end;873  gap: 6px;874  min-width: max-content;875}876.peach-search-counter {877  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;878  font-size: 0.625rem; color: var(--peach-t2);879  display: inline-flex;880  align-items: center;881  line-height: 1;882}883.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }884885/* Buttons */886.peach-btn {887  border: 1px solid transparent; border-radius: 12px;888  background: transparent; color: var(--peach-t0);889  font-family: Inter, system-ui, sans-serif;890  font-size: 0.75rem; letter-spacing: 0.02em; padding: 8px 12px;891  cursor: pointer;892  transition:893    background-color var(--peach-dur-80) var(--peach-curve-arrival),894    color var(--peach-dur-80) var(--peach-curve-arrival),895    border-color var(--peach-dur-150) var(--peach-curve-arrival);896}897.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }898.peach-btn:disabled {899  opacity: 0.45;900  cursor: not-allowed;901}902.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 0.6875rem; }903.peach-btn--md { min-height: 38px; }904.peach-btn--accent {905  background: var(--peach-accent);906  color: rgba(0,0,0,0.92);907  font-weight: 500;908  box-shadow:909    0 1px 0 rgba(255,255,255,0.08) inset,910    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),911    0 3px 16px var(--peach-glow),912    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);913}914.peach-btn--accent:hover:not(:disabled) {915  background: var(--peach-accent);916  filter: brightness(1.10) saturate(1.05);917  box-shadow:918    0 1px 0 rgba(255,255,255,0.10) inset,919    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),920    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),921    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);922}923.peach-btn--ghost:not(.peach-icon-btn) { border-color: var(--peach-t3); color: var(--peach-t1); }924.peach-btn--ghost.peach-icon-btn { color: var(--peach-t1); }925.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }926.peach-icon-btn {927  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;928  display: inline-flex; align-items: center; justify-content: center;929  border-color: transparent;930  transition:931    color var(--peach-dur-80) var(--peach-curve-arrival),932    box-shadow var(--peach-dur-150) var(--peach-curve-arrival),933    background-color var(--peach-dur-80) var(--peach-curve-arrival);934}935.peach-icon-btn:hover:not(:disabled) {936  background: transparent;937  color: var(--peach-accent);938  box-shadow: 0 0 12px color-mix(in srgb, var(--peach-accent) 28%, transparent),939              0 0 4px color-mix(in srgb, var(--peach-accent) 16%, transparent);940}941942/* Topbar sync. Only rendered when a device is paired, so it never sits there943   as a control that cannot do anything. */944.peach-sync-btn.is-syncing { color: var(--peach-accent); }945.peach-sync-btn.is-syncing .peach-sync-icon {946  animation: peach-sync-spin 900ms linear infinite;947  transform-origin: 50% 50%;948}949.peach-sync-btn.is-ok { color: var(--peach-accent); }950.peach-sync-btn.is-error { color: var(--peach-breach, #d66); }951@keyframes peach-sync-spin { to { transform: rotate(360deg); } }952@media (prefers-reduced-motion: reduce) {953  .peach-sync-btn.is-syncing .peach-sync-icon { animation: none; opacity: 0.6; }954}955956.peach-btn:focus-visible {957  outline: none;958  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);959}960961/* Lock button */962.peach-lock-icon { transform-origin: center; }963.peach-lock-btn { color: var(--peach-accent); }964.peach-lock-btn.is-locking .peach-lock-icon {965  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);966}967968/* Biometric unlock button */969.peach-biometric-btn {970  display: flex;971  align-items: center;972  justify-content: center;973  gap: 6px;974  margin-top: 8px;975  width: 100%;976}977978/* Copy button */979.peach-copy-btn {980  position: relative; overflow: hidden;981  color: var(--peach-t2); border-color: var(--peach-t3);982}983.peach-copy-icon {984  display: inline-flex; align-items: center; justify-content: center;985  position: relative; z-index: 1;986}987.peach-copy-icon-svg { display: block; }988.peach-copy-sheen {989  position: absolute; inset: 0;990  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--peach-accent) 18%, transparent) 30%, color-mix(in srgb, var(--peach-accent) 8%, transparent) 100%);991  opacity: 0; transform: scaleX(0.15); transform-origin: left center;992}993.peach-copy-btn.is-copied {994  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;995  box-shadow:996    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),997    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),998    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);999}1000.peach-copy-btn.is-copied .peach-copy-icon {1001  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;1002}1003.peach-copy-btn.is-copied .peach-copy-sheen {1004  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;1005}1006.peach-copy-btn.is-retreat {1007  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;1008}1009.peach-copy-btn.is-retreat .peach-copy-sheen {1010  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;1011}1012.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }1013.peach-copy-drain-bar {1014  display: block; width: 100%; height: 100%;1015  background: var(--peach-accent); opacity: 0.7;1016  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;1017}10181019/* Unlock screen elements */1020.peach-underline-input {1021  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);1022  padding: 6px 0; background: transparent; color: var(--peach-t0);1023  outline: none;1024  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1025  font-size: 0.8125rem;1026  caret-color: var(--peach-accent);1027}1028.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }1029.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }1030.peach-hint {1031  margin: 0;1032  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1033  font-size: 0.625rem; color: var(--peach-t2);1034}1035.peach-unlock-footer {1036  margin-top: 4px; display: flex; align-items: center; gap: 7px;1037  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1038  font-size: 0.625rem; color: var(--peach-t2);1039}1040.peach-unlock-footer--lock {1041  padding-top: 2px;1042}10431044/* Desktop helper (peach-sync) code pairing — additive hooks. The shared pairing1045   classes (peach-pair-*) carry the shared layout; these only style the parts1046   unique to the typed-code path. Inline styles cover the SAS/confirm gate. */1047.peach-desktop-pair { display: flex; flex-direction: column; }1048.peach-desktop-enter,1049.peach-desktop-searching,1050.peach-desktop-paired,1051.peach-desktop-error {1052  display: flex; flex-direction: column; gap: 8px;1053  padding: 4px 18px 16px; text-align: center; align-items: center;1054}1055.peach-desktop-enter .peach-label { align-self: flex-start; }1056/* Sized for a full 19-character pairing code (A74H-48J3-KI32-OEP4) in a1057   320px popup — a 6-digit legacy helper code still reads fine at this size. */1058.peach-code-input {1059  text-align: center; letter-spacing: 0.12em; padding-left: 0.12em;1060  font-size: 15px;1061}1062.peach-code-input::placeholder { letter-spacing: 0.12em; }10631064/* Sync card "pair a device" options — bordered, raised tappable rows that read1065   as buttons on any card hue (theme-neutral light overlay, not the peach accent). */1066.peach-sync-pair-option {1067  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;1068  width: 100%; text-align: left; cursor: pointer; font-family: inherit;1069  padding: 11px 12px; border-radius: 10px;1070  background: color-mix(in srgb, var(--peach-t0) 6%, transparent);1071  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);1072  color: var(--peach-t0);1073  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;1074}1075.peach-sync-pair-option + .peach-sync-pair-option { margin-top: 8px; }1076.peach-sync-pair-option:hover {1077  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);1078  border-color: color-mix(in srgb, var(--peach-t0) 28%, transparent);1079}1080.peach-sync-pair-option:active { transform: translateY(1px); }1081.peach-sync-pair-option:disabled { opacity: 0.5; cursor: default; }1082.peach-sync-pair-option-icon { flex-shrink: 0; display: flex; align-items: center; color: var(--peach-t1); margin-top: 1px; }1083.peach-sync-pair-option-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }1084.peach-sync-pair-option-title { font-size: 0.8125rem; font-weight: 600; }1085.peach-sync-pair-option-sub { font-size: 0.6875rem; line-height: 1.45; color: var(--peach-t2); }1086.peach-sync-pair-option-chevron { flex-shrink: 0; color: var(--peach-t2); font-size: 1.05rem; line-height: 1.3; }10871088/* Breach badge */1089.peach-breach-badge {1090  display: flex;1091  position: relative;1092  z-index: 1;1093  align-items: center;1094  gap: 7px;1095  font-size: 0.5625rem;1096  color: var(--peach-breach);1097  padding: 5px 10px;1098  margin-bottom: 4px;1099  border-radius: 8px;1100  background: rgba(220, 80, 60, 0.07);1101  border: 1px solid rgba(220, 80, 60, 0.18);1102  letter-spacing: 0.04em;1103}11041105.peach-password-value.is-breached {1106  color: rgba(220, 80, 60, 0.75);1107  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1108}11091110/* ── Overlay views ─────────────────────────────────────────────────── */1111.peach-overlay-view {1112  position: absolute;1113  inset: 0;1114  display: flex;1115  flex-direction: column;1116  background:1117    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1118    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1119    var(--peach-bg);1120  z-index: 2;1121  overflow: hidden;1122  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1123}11241125.peach-overlay-view:has(.stk-shell) {1126  background: var(--peach-bg);1127}1128@keyframes overlay-in {1129  from { opacity: 0; transform: translateY(8px); }1130  to   { opacity: 1; transform: translateY(0); }1131}1132.peach-overlay-view.ov-enter-up {1133  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1134}1135.peach-overlay-view.ov-exit-up {1136  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1137}1138.peach-overlay-view.ov-enter-right {1139  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1140}1141.peach-overlay-view.ov-exit-right {1142  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1143}11441145@keyframes ov-enter-up {1146  from { opacity: 0; transform: translateY(18px); }1147  to   { opacity: 1; transform: translateY(0); }1148}1149@keyframes ov-exit-up {1150  from { opacity: 1; transform: translateY(0); }1151  to   { opacity: 0; transform: translateY(-12px); }1152}1153@keyframes ov-enter-right {1154  from { opacity: 0; transform: translateX(20px); }1155  to   { opacity: 1; transform: translateX(0); }1156}1157@keyframes ov-exit-right {1158  from { opacity: 1; transform: translateX(0); }1159  to   { opacity: 0; transform: translateX(20px); }1160}11611162/* Overlay shared header */1163.peach-overlay-header {1164  padding: 10px 12px 8px;1165  display: flex;1166  align-items: center;1167  gap: 10px;1168  flex-shrink: 0;1169}1170/* Back button — circular pill matching the settings stack masthead (.stk-back) */1171.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1172  width: 28px;1173  height: 28px;1174  flex: 0 0 28px;1175  border-radius: 999px;1176  border: 1px solid var(--peach-border);1177  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1178  color: var(--peach-t1);1179  padding: 0;1180}1181.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1182  color: var(--peach-t0);1183  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1184  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1185}1186.peach-overlay-title {1187  font-family: var(--font-display);1188  font-style: italic;1189  font-weight: 400;1190  font-size: 20px;1191  line-height: 1;1192  color: var(--peach-t0);1193  flex: 1;1194  text-align: center;1195}1196/* Balances the 28px back button so the title stays visually centred */1197.peach-overlay-spacer {1198  width: 28px;1199  flex: 0 0 28px;1200}12011202.peach-overlay-card {1203  background: var(--peach-s1);1204  border: 1px solid var(--peach-t3);1205  border-radius: 12px;1206  overflow: hidden;1207  width: 100%;1208}12091210.peach-onboarding-alt-actions {1211  display: flex;1212  flex-direction: column;1213  gap: 4px;1214  padding: 0;1215}12161217.peach-settings-copy {1218  margin: 0 0 10px;1219  font-size: 0.6875rem;1220  line-height: 1.5;1221  color: var(--peach-t2);1222}12231224.peach-settings-copy strong {1225  color: var(--peach-t0);1226}12271228.peach-settings-copy--spacious {1229  margin-bottom: 12px;1230}12311232.peach-settings-copy--result {1233  color: var(--peach-accent);1234  font-size: 0.8125rem;1235  text-align: center;1236  padding: 8px 0;1237}12381239.peach-settings-copy--danger {1240  color: var(--peach-breach);1241}12421243.peach-settings-copy--success {1244  color: var(--peach-accent);1245}12461247.peach-inline-feedback {1248  font-size: 0.6875rem;1249  margin: 10px 0 0;1250}12511252.peach-inline-feedback--ok {1253  color: var(--peach-accent);1254}12551256.peach-inline-feedback--error {1257  color: var(--peach-breach);1258}12591260.peach-inline-feedback--muted {1261  color: var(--peach-t2);1262  font-size: 0.625rem;1263  margin: 4px 0;1264}12651266.peach-inline-feedback--spaced {1267  margin-top: 12px;1268}12691270.peach-settings-actions--row {1271  display: flex;1272  gap: 6px;1273}12741275.peach-settings-actions--end {1276  margin-top: 14px;1277  justify-content: flex-end;1278}12791280.peach-settings-stack {1281  display: flex;1282  flex-direction: column;1283  gap: 6px;1284}12851286.peach-settings-stack--tight {1287  gap: 4px;1288}12891290.peach-settings-stack--spacious {1291  gap: 8px;1292}12931294.peach-settings-input {1295  width: 100%;1296  box-sizing: border-box;1297  padding: 8px 10px;1298  background: rgba(0, 0, 0, 0.22);1299  border: 1px solid transparent;1300  border-radius: 6px;1301  color: var(--peach-t0);1302  font-family: var(--font-ui);1303  font-size: 0.75rem;1304  outline: none;1305  transition: border-color 120ms ease, background 120ms ease;1306}13071308.peach-settings-input:focus {1309  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1310  background: rgba(0, 0, 0, 0.28);1311}13121313.peach-settings-input[type="password"] {1314  font-family: var(--font-mono);1315  letter-spacing: 0.04em;1316}13171318.peach-hidden-file-input {1319  display: none;1320}13211322.peach-checkbox-note {1323  display: flex;1324  align-items: flex-start;1325  gap: 8px;1326  font-size: 0.6875rem;1327  color: var(--peach-t1);1328  cursor: pointer;1329  margin: 12px 0;1330}13311332.peach-checkbox-note input {1333  margin-top: 1px;1334}13351336.peach-danger-notice {1337  background: rgba(220, 80, 60, 0.08);1338  border: 1px solid rgba(220, 80, 60, 0.2);1339  border-radius: 6px;1340  padding: 9px 11px;1341  font-size: 0.6875rem;1342  color: var(--peach-t1);1343  line-height: 1.5;1344}13451346.peach-info-notice {1347  font-size: 0.6875rem;1348  color: var(--peach-t1);1349  line-height: 1.5;1350  background: var(--surface-card);1351  border: 1px solid var(--peach-t3);1352  border-radius: 6px;1353  padding: 8px 10px;1354}13551356.peach-info-notice--warn {1357  border-color: rgba(220, 38, 38, 0.4);1358  background: rgba(220, 38, 38, 0.06);1359  color: rgba(220, 38, 38, 0.92);1360  margin-bottom: 8px;1361}13621363/* Warm helpful-context note — reads as a soft aside, not an alert. */1364.peach-info-notice--note {1365  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);1366  border-color: color-mix(in srgb, var(--peach-accent) 18%, transparent);1367  color: var(--peach-t2);1368}13691370.peach-strength-row {1371  display: flex;1372  align-items: center;1373  gap: 8px;1374  margin-bottom: 10px;1375}13761377.peach-strength-track {1378  flex: 1;1379  height: 4px;1380  background: var(--peach-s2);1381  border-radius: 2px;1382  overflow: hidden;1383}13841385.peach-strength-fill {1386  height: 100%;1387  border-radius: 2px;1388  transition: width 120ms ease, background 120ms ease;1389}13901391/* ── Type selector tabs ── */1392.peach-type-tabs {1393  display: flex;1394  gap: 0;1395  background: var(--peach-t4);1396  border-radius: 8px;1397  padding: 3px;1398}13991400.peach-type-tab {1401  flex: 1;1402  display: flex;1403  align-items: center;1404  justify-content: center;1405  gap: 6px;1406  padding: 6px 10px;1407  border-radius: 6px;1408  border: none;1409  background: transparent;1410  cursor: pointer;1411  font-family: Inter, system-ui, sans-serif;1412  font-size: 0.6875rem;1413  font-weight: 400;1414  letter-spacing: 0.04em;1415  color: var(--peach-t1);1416  transition: background 150ms ease, color 150ms ease;1417}14181419.peach-type-tab.is-active {1420  background: var(--peach-s2);1421  color: var(--peach-t0);1422  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1423}14241425.peach-type-tab:not(.is-active):hover {1426  color: var(--peach-t0);1427}14281429.peach-type-tab svg {1430  opacity: 0.7;1431  flex-shrink: 0;1432}14331434.peach-type-tab.is-active svg {1435  opacity: 1;1436}14371438/* ── List view ───────────────────────────────────────────────────────── */1439.peach-list-top {1440  padding: 0 10px;1441  min-height: 46px;1442  display: flex;1443  align-items: center;1444  gap: 6px;1445  border-bottom: 1px solid var(--peach-t3);1446  flex-shrink: 0;1447  background: var(--peach-s1);1448}14491450.peach-vault-list {1451  flex: 1;1452  overflow-y: auto;1453  scrollbar-width: none;1454}1455.peach-vault-list::-webkit-scrollbar { display: none; }14561457/* Scrollbar — vault list */1458.peach-vault-list {1459  scrollbar-width: thin;1460  scrollbar-color: var(--peach-t3) transparent;1461}14621463.peach-vault-list::-webkit-scrollbar {1464  width: 3px;1465}14661467.peach-vault-list::-webkit-scrollbar-thumb {1468  background: var(--peach-t3);1469  border-radius: 2px;1470}14711472.peach-entry-row {1473  width: 100%;1474  display: flex;1475  align-items: center;1476  gap: 10px;1477  padding: 9px 16px;1478  background: transparent;1479  border: none;1480  border-bottom: 1px solid var(--peach-t3);1481  cursor: pointer;1482  color: inherit;1483  text-align: left;1484  transition: background 80ms ease;1485}1486.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1487.peach-entry-row:last-child { border-bottom: none; }1488.peach-entry-row.is-active {1489  box-shadow: inset 2px 0 0 var(--peach-accent);1490  background: rgba(240,232,216,0.03);1491}1492.peach-entry-row:focus-visible {1493  outline: none;1494  box-shadow: 0 0 0 1px var(--peach-border-accent);1495  background: rgba(240,232,216,0.03);1496}1497.peach-entry-row-icon {1498  width: 26px; height: 26px;1499  border-radius: 7px;1500  border: 1px solid var(--peach-t3);1501  display: flex; align-items: center; justify-content: center;1502  color: var(--peach-t2);1503  flex-shrink: 0;1504}1505.peach-entry-row-icon.is-breach {1506  border-color: rgba(220,80,60,0.3);1507  color: rgba(220,80,60,0.7);1508}15091510/* Title-initials chip used as the favicon fallback for login entries whose1511 * real favicon hasn't been cached by the browser yet (freshly-imported,1512 * never-visited domains). Background colour is hashed from the title so1513 * the same entry always shows the same chip. The chip fits the same1514 * 26×26 row icon slot the favicon would take. */1515.peach-favicon-initials {1516  display: inline-flex;1517  align-items: center;1518  justify-content: center;1519  width: 100%;1520  height: 100%;1521  border-radius: 4px;1522  font-family: "IBM Plex Mono", monospace;1523  font-size: 0.5625rem;1524  font-weight: 600;1525  letter-spacing: 0.04em;1526  color: rgba(240, 232, 216, 0.92);1527  text-transform: uppercase;1528  user-select: none;1529}1530.peach-entry-row-info { flex: 1; min-width: 0; }1531.peach-entry-row-name {1532  display: block;1533  font-family: var(--font-display);1534  font-size: 1.0625rem;1535  font-style: italic;1536  font-weight: 400;1537  color: var(--peach-t0);1538  line-height: 1.2;1539  white-space: nowrap;1540  overflow: hidden;1541  text-overflow: ellipsis;1542}1543.peach-entry-row-meta {1544  display: block;1545  font-family: "IBM Plex Mono", monospace;1546  font-size: 0.5625rem;1547  color: var(--peach-t2);1548  margin-top: 1px;1549  letter-spacing: 0.05em;1550}1551.peach-entry-row-dot {1552  width: 5px; height: 5px;1553  border-radius: 50%;1554  background: rgba(220,80,60,0.7);1555  flex-shrink: 0;1556}1557.peach-new-entry-row {1558  display: flex;1559  align-items: center;1560  justify-content: center;1561  gap: 6px;1562  width: 100%;1563  padding: 11px;1564  background: transparent;1565  border: none;1566  border-top: 1px solid var(--peach-t3);1567  color: var(--peach-t2);1568  font-family: "IBM Plex Mono", monospace;1569  font-size: 0.5625rem;1570  text-transform: uppercase;1571  letter-spacing: 0.14em;1572  cursor: pointer;1573  flex-shrink: 0;1574  transition: color 120ms ease, background 120ms ease;1575}1576.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }15771578/* ── Multi-select mode ─────────────────────────────────────────────── */15791580/* Select-mode trigger button in sort bar — same shape as trash btn */1581.peach-sort-select-btn {1582  display: flex;1583  align-items: center;1584  justify-content: center;1585  padding: 3px 5px;1586  background: transparent;1587  border: none;1588  cursor: pointer;1589  color: var(--peach-t2);1590  border-radius: 4px;1591  transition: color 140ms ease, background 140ms ease;1592}1593.peach-sort-select-btn:hover {1594  color: var(--peach-t1);1595  background: var(--peach-t3);1596}15971598/* Sort bar in select mode */1599.peach-select-cancel-btn {1600  background: transparent;1601  border: none;1602  padding: 0 4px;1603  cursor: pointer;1604  font-family: "IBM Plex Mono", monospace;1605  font-size: 0.5625rem;1606  letter-spacing: 0.12em;1607  text-transform: uppercase;1608  color: var(--peach-t2);1609  transition: color 140ms ease;1610  flex-shrink: 0;1611}1612.peach-select-cancel-btn:hover { color: var(--peach-t0); }16131614.peach-select-count-label {1615  flex: 1;1616  text-align: center;1617  font-family: "IBM Plex Mono", monospace;1618  font-size: 0.5625rem;1619  letter-spacing: 0.14em;1620  text-transform: uppercase;1621  color: var(--peach-t1);1622}16231624.peach-select-all-btn {1625  background: transparent;1626  border: none;1627  padding: 0 4px;1628  cursor: pointer;1629  font-family: "IBM Plex Mono", monospace;1630  font-size: 0.5625rem;1631  letter-spacing: 0.12em;1632  text-transform: uppercase;1633  color: var(--peach-t2);1634  transition: color 140ms ease;1635  flex-shrink: 0;1636}1637.peach-select-all-btn:hover { color: var(--peach-accent); }16381639/* List in select mode */1640.peach-vault-list.is-selecting .peach-entry-row {1641  cursor: default;1642}1643.peach-vault-list.is-selecting .peach-entry-row:hover {1644  background: rgba(240,232,216,0.02);1645}1646.peach-vault-list.is-selecting .peach-entry-row.is-selected {1647  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1648}1649.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1650  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1651}16521653/* Select indicator circles in icon slot */1654.peach-entry-row-icon.is-select-icon {1655  color: var(--peach-t2);1656}1657.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1658  color: var(--peach-accent);1659}16601661/* Delete action bar at bottom (replaces new-entry row) */1662.peach-select-action-bar {1663  display: flex;1664  align-items: center;1665  justify-content: center;1666  gap: 7px;1667  width: 100%;1668  padding: 11px;1669  background: transparent;1670  border: none;1671  border-top: 1px solid var(--peach-t3);1672  color: var(--peach-t1);1673  font-family: "IBM Plex Mono", monospace;1674  font-size: 0.5625rem;1675  text-transform: uppercase;1676  letter-spacing: 0.14em;1677  cursor: pointer;1678  flex-shrink: 0;1679  transition: color 120ms ease, background 120ms ease;1680}1681.peach-select-action-bar:not(:disabled):hover {1682  color: var(--peach-t0);1683  background: rgba(220,80,60,0.06);1684}1685.peach-select-action-bar:not(:disabled):hover svg {1686  stroke: rgba(220,80,60,0.8);1687}1688.peach-select-action-bar:disabled,1689.peach-select-action-bar.is-empty {1690  color: var(--peach-t2);1691  cursor: default;1692  opacity: 0.5;1693}1694.peach-search-counter-list {1695  white-space: nowrap;1696  flex-shrink: 0;1697}1698.peach-list-empty {1699  min-height: 180px;1700  display: grid;1701  place-items: center;1702  color: var(--peach-t2);1703  font-family: "IBM Plex Mono", monospace;1704  font-size: 0.6875rem;1705}17061707/* ── Settings view ───────────────────────────────────────────────────── */1708.peach-settings-body {1709  flex: 1;1710  overflow-y: auto;1711  min-height: 0;1712  display: flex;1713  flex-direction: column;1714  padding: 2px 0 10px;1715}1716.peach-settings-group {1717  margin: 4px 10px;1718  padding: 9px 14px 11px;1719  border-radius: 12px;1720  border: 1px solid rgba(255, 255, 255, 0.07);1721  background: rgba(26, 20, 16, 0.60);1722  backdrop-filter: blur(10px) saturate(1.3);1723  -webkit-backdrop-filter: blur(10px) saturate(1.3);1724}17251726.peach-settings-group + .peach-settings-group {1727  margin-top: 6px;1728}17291730@supports not (backdrop-filter: blur(1px)) {1731  .peach-settings-group {1732    background: rgba(26, 20, 16, 0.90);1733    border-color: rgba(255, 255, 255, 0.09);1734    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1735  }1736}17371738.light .peach-settings-group,1739[data-theme="light"] .peach-settings-group {1740  background: rgba(245, 237, 226, 0.70);1741  border-color: rgba(26, 18, 8, 0.08);1742  backdrop-filter: blur(10px) saturate(1.2);1743  -webkit-backdrop-filter: blur(10px) saturate(1.2);1744}17451746@supports not (backdrop-filter: blur(1px)) {1747  .light .peach-settings-group,1748  [data-theme="light"] .peach-settings-group {1749    background: rgba(245, 237, 226, 0.97);1750    border-color: rgba(26, 18, 8, 0.10);1751  }1752}1753.peach-export-intro {1754  padding-bottom: 8px;1755}1756.peach-export-card {1757  display: grid;1758  gap: 10px;1759}1760.peach-rune-canvas {1761  border-radius: 8px;1762  background: rgba(0, 0, 0, 0.22);1763  flex: 1;1764  align-self: center;1765}1766.peach-script-input {1767  font-family: "PeachScript", monospace;1768  font-size: 0.6875rem;1769  line-height: 1.9;1770  letter-spacing: 0.06em;1771  color: var(--peach-t0);1772  background: rgba(0, 0, 0, 0.22);1773  border: none;1774  border-radius: 6px;1775  padding: 12px;1776  width: 100%;1777  min-height: 96px;1778  resize: vertical;1779  word-break: break-all;1780  scrollbar-width: none;1781  -ms-overflow-style: none;1782}17831784.peach-script-input::-webkit-scrollbar { display: none; }1785.peach-csv-warning {1786  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1787  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1788  color: var(--peach-t0);1789  border-radius: 6px;1790  padding: 10px 12px;1791  margin-bottom: 8px;1792  font-size: 0.75rem;1793  line-height: 1.45;1794}1795.peach-export-card--primary {1796  background:1797    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1798}17991800/* Export menu — distribute the three format cards across the popup. */1801.peach-export-menu {1802  display: flex;1803  flex-direction: column;1804  flex: 1;1805  min-height: 0;1806}1807.peach-export-menu .peach-settings-group {1808  flex: 1;1809  display: flex;1810  flex-direction: column;1811  justify-content: center;1812  gap: 10px;1813}18141815/* Result view — the script-string fills the remaining vertical surface. */1816.peach-export-result-group {1817  flex: 1;1818  display: flex;1819  flex-direction: column;1820  min-height: 0;1821  border-bottom: none;1822}1823.peach-export-result-group .peach-export-card {1824  flex: 1;1825  min-height: 0;1826  display: flex;1827  flex-direction: column;1828  gap: 10px;1829}1830.peach-export-result-group .peach-export-card-copy {1831  flex-shrink: 0;1832}1833.peach-export-result-group .peach-settings-label {1834  flex-shrink: 0;1835}1836.peach-export-result-group button {1837  flex-shrink: 0;1838}1839.peach-export-card-head {1840  display: flex;1841  align-items: center;1842  justify-content: space-between;1843  gap: 10px;1844}1845.peach-export-card-copy {1846  margin: 0;1847  font-size: 0.75rem;1848  line-height: 1.55;1849  color: var(--peach-t1);1850}1851.peach-export-note {1852  margin: 0;1853  font-size: 0.625rem;1854  line-height: 1.5;1855  color: var(--peach-t2);1856}1857.peach-export-strength-track {1858  height: 3px;1859  background: var(--peach-border);1860  border-radius: 2px;1861  margin: 4px 0 2px;1862  overflow: hidden;1863}1864.peach-export-strength-fill {1865  height: 100%;1866  border-radius: 2px;1867  transition: width 250ms ease, background 250ms ease;1868}1869.peach-export-strength-warn {1870  margin: 0;1871  font-size: 0.625rem;1872  line-height: 1.5;1873  color: #e84040;1874  font-family: "IBM Plex Mono", monospace;1875}1876.peach-export-strength-hint {1877  margin: 0;1878  font-size: 0.625rem;1879  line-height: 1.5;1880  color: var(--peach-t2);1881  font-family: "IBM Plex Mono", monospace;1882}1883.peach-export-pill {1884  display: inline-flex;1885  align-items: center;1886  padding: 4px 8px;1887  border-radius: 999px;1888  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1889  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1890  color: var(--peach-accent);1891  font-family: "IBM Plex Mono", monospace;1892  font-size: 0.5rem;1893  letter-spacing: 0.12em;1894  text-transform: uppercase;1895  white-space: nowrap;1896}1897.peach-export-pill--danger {1898  border-color: rgba(220,80,60,0.22);1899  background: rgba(220,80,60,0.08);1900  color: var(--peach-breach);1901}1902.peach-settings-label {1903  margin: 0 0 6px;1904  font-family: "IBM Plex Mono", monospace;1905  font-size: 0.5rem;1906  text-transform: uppercase;1907  letter-spacing: 0.18em;1908  color: var(--peach-t2);1909}1910.peach-settings-row {1911  display: flex;1912  align-items: center;1913  justify-content: space-between;1914  gap: 12px;1915  min-height: 34px;1916  padding: 6px 0;1917  font-size: 0.8125rem;1918  color: var(--peach-t1);1919}1920.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1921.peach-settings-value {1922  font-family: "IBM Plex Mono", monospace;1923  font-size: 0.625rem;1924  color: var(--peach-t2);1925}19261927.peach-settings-value--status {1928  display: flex;1929  align-items: center;1930  gap: 6px;1931}19321933.peach-settings-link {1934  font-family: "IBM Plex Mono", monospace;1935  font-size: 0.625rem;1936  color: var(--peach-accent);1937  text-decoration: none;1938  cursor: pointer;1939}1940.peach-settings-link:hover {1941  text-decoration: underline;1942}19431944.peach-settings-row--stack {1945  flex-direction: column;1946  align-items: stretch;1947  gap: 6px;1948}19491950.peach-settings-row--top {1951  align-items: flex-start;1952}19531954.peach-settings-row-main {1955  display: flex;1956  flex-direction: column;1957  gap: 4px;1958  flex: 1;1959}1960.peach-toggle {1961  width: 28px; height: 16px;1962  border-radius: 999px;1963  background: var(--peach-t3);1964  border: 1px solid var(--peach-t3);1965  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1966  flex-shrink: 0;1967  transition: background 200ms ease, border-color 200ms ease;1968  cursor: pointer;1969}1970.peach-toggle.is-on {1971  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1972  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1973}1974.peach-toggle-knob {1975  width: 10px; height: 10px;1976  border-radius: 50%;1977  background: var(--peach-t2);1978  flex-shrink: 0;1979  transform: translateX(0px);1980  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1981}1982.peach-toggle.is-on .peach-toggle-knob {1983  background: var(--peach-accent);1984  transform: translateX(12px);1985}1986.peach-settings-footer {1987  display: flex;1988  align-items: center;1989  gap: 8px;1990  margin-top: auto;1991  padding: 14px 16px 8px;1992  font-family: "IBM Plex Mono", monospace;1993  font-size: 0.5625rem;1994  color: var(--peach-t2);1995}19961997/* ── Settings home navigation ──────────────────────────────────────────── */1998.peach-settings-nav-label {1999  margin: 0 0 2px;2000  padding: 12px 16px 4px;2001  font-family: "IBM Plex Mono", monospace;2002  font-size: 0.5rem;2003  text-transform: uppercase;2004  letter-spacing: 0.18em;2005  color: var(--peach-t2);2006}20072008.peach-settings-cat-row {2009  display: flex;2010  align-items: center;2011  gap: 10px;2012  width: 100%;2013  padding: 9px 16px;2014  background: none;2015  border: none;2016  border-bottom: 1px solid var(--peach-t3);2017  cursor: pointer;2018  text-align: left;2019  color: inherit;2020  transition: background var(--peach-dur-80) ease;2021}2022.peach-settings-cat-row:hover {2023  background: var(--peach-t3);2024}2025.peach-settings-cat-row:last-child {2026  border-bottom: none;2027}20282029.peach-settings-cat-icon {2030  width: 28px;2031  height: 28px;2032  border-radius: 7px;2033  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2034  color: var(--peach-accent);2035  display: flex;2036  align-items: center;2037  justify-content: center;2038  flex-shrink: 0;2039}2040/* Light theme: peach-on-cream is too low-contrast — both colors are warm.2041   Darken the icon stroke to ink and bump the bg tint so the icon reads2042   sharply while the cell still feels accent-tinted. */2043.light .peach-settings-cat-icon {2044  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);2045  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));2046}20472048.peach-settings-cat-content {2049  flex: 1;2050  display: flex;2051  flex-direction: column;2052  gap: 2px;2053  min-width: 0;2054}20552056.peach-settings-cat-name {2057  font-size: 0.8125rem;2058  font-weight: 450;2059  color: var(--peach-t0);2060  line-height: 1.2;2061}20622063.peach-settings-cat-desc {2064  font-size: 0.625rem;2065  color: var(--peach-t2);2066  line-height: 1.3;2067  white-space: nowrap;2068  overflow: hidden;2069  text-overflow: ellipsis;2070}20712072.peach-settings-cat-chevron {2073  color: var(--peach-t2);2074  flex-shrink: 0;2075  opacity: 0.5;2076}20772078/* ── Settings sub-view section labels ──────────────────────────────────── */2079.peach-settings-sub-label {2080  margin: 12px 0 4px;2081  font-family: "IBM Plex Mono", monospace;2082  font-size: 0.5rem;2083  text-transform: uppercase;2084  letter-spacing: 0.18em;2085  color: var(--peach-t2);2086}2087.peach-settings-sub-label:first-child {2088  margin-top: 4px;2089}20902091/* ── Settings: collapsible Advanced section ─────────────────────────────── */2092.peach-settings-advanced-toggle {2093  display: flex;2094  align-items: center;2095  justify-content: space-between;2096  width: 100%;2097  background: none;2098  border: none;2099  cursor: pointer;2100  padding: 12px 0 4px;2101  margin: 0;2102  color: inherit;2103}2104.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {2105  color: var(--peach-t1);2106}2107.peach-settings-advanced-chevron {2108  font-size: 0.5625rem;2109  color: var(--peach-t3);2110  letter-spacing: 0;2111  transition: color 120ms ease;2112}21132114/* ── Feedback form ──────────────────────────────────────────────────────── */2115.peach-feedback-group {2116  flex: 1;2117  display: flex;2118  flex-direction: column;2119  border-bottom: none;2120}21212122.peach-feedback-intro {2123  margin: 4px 0 14px;2124  font-size: 0.75rem;2125  line-height: 1.55;2126  color: var(--peach-t1);2127}21282129.peach-feedback-chips {2130  display: flex;2131  flex-wrap: wrap;2132  gap: 6px;2133  margin-bottom: 14px;2134}21352136.peach-feedback-chip {2137  padding: 4px 10px;2138  border-radius: 999px;2139  border: 1px solid var(--peach-t3);2140  background: none;2141  color: var(--peach-t2);2142  font-size: 0.6875rem;2143  font-family: var(--font-ui);2144  cursor: pointer;2145  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2146    background var(--peach-dur-80) ease;2147}2148.peach-feedback-chip:hover {2149  border-color: var(--peach-t2);2150  color: var(--peach-t1);2151}2152.peach-feedback-chip.is-active {2153  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);2154  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));2155  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);2156  box-shadow:2157    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),2158    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);2159  font-weight: 700;2160}21612162.peach-feedback-textarea {2163  flex: 1;2164  width: 100%;2165  min-height: 120px;2166  box-sizing: border-box;2167  background: rgba(0, 0, 0, 0.22);2168  border: 1px solid transparent;2169  border-radius: 6px;2170  color: var(--peach-t0);2171  font-size: 0.75rem;2172  font-family: var(--font-ui);2173  line-height: 1.5;2174  padding: 8px 10px;2175  resize: none;2176  outline: none;2177  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2178}2179.peach-feedback-textarea:focus {2180  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2181  background: rgba(0, 0, 0, 0.28);2182}2183.peach-feedback-textarea:focus {2184  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2185}2186.peach-feedback-textarea::placeholder {2187  color: var(--peach-t2);2188}21892190.peach-feedback-meta {2191  margin: 6px 0 0;2192  font-size: 0.625rem;2193  color: var(--peach-t2);2194  font-family: "IBM Plex Mono", monospace;2195}21962197.peach-feedback-result {2198  margin: 8px 0 0;2199  font-size: 0.6875rem;2200  font-family: "IBM Plex Mono", monospace;2201}2202.peach-feedback-result--ok { color: var(--peach-sync-ok); }2203.peach-feedback-result--err { color: var(--peach-breach); }22042205.peach-feedback-submit {2206  width: 100%;2207  margin-top: 12px;2208  justify-content: center;2209}22102211.peach-feedback-anon {2212  margin: 8px 0 0;2213  font-size: 0.625rem;2214  color: var(--peach-t2);2215  text-align: center;2216}22172218.peach-feedback-thanks {2219  margin: auto 0;2220  padding: 18px 14px;2221  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);2222  border-radius: 8px;2223  background:2224    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),2225    rgba(0, 0, 0, 0.18);2226  color: var(--peach-t1);2227  text-align: center;2228}22292230.peach-feedback-thanks p {2231  margin: 0;2232  font-size: 0.75rem;2233  line-height: 1.5;2234}22352236.peach-feedback-thanks-title {2237  color: var(--peach-t0);2238  font-family: "Cormorant Garamond", serif;2239  font-size: 1.375rem !important;2240  line-height: 1.1 !important;2241  margin-bottom: 8px !important;2242}22432244.peach-passkey-badge {2245  margin-left: 8px;2246  font-size: 0.625rem;2247  letter-spacing: 0.06em;2248  text-transform: uppercase;2249  color: var(--peach-t2);2250  font-family: var(--font-ui);2251  vertical-align: middle;2252}22532254.peach-passkey-delete-btn {2255  color: var(--peach-breach);2256  border-color: rgba(229, 85, 85, 0.25);2257}22582259.peach-passkey-delete-confirm {2260  display: flex;2261  align-items: center;2262  gap: 8px;2263  padding: 8px 10px;2264  background: rgba(229, 85, 85, 0.06);2265  border: 1px solid rgba(229, 85, 85, 0.2);2266  border-radius: 6px;2267}22682269.peach-passkey-delete-confirm-copy {2270  flex: 1;2271  font-size: 0.6875rem;2272  color: var(--peach-t1);2273}22742275.peach-passkey-delete-btn--confirm {2276  color: var(--peach-breach);2277  border-color: rgba(229, 85, 85, 0.4);2278}22792280.peach-passkey-activity {2281  flex-direction: column;2282  align-items: flex-start;2283  gap: 4px;2284}22852286.peach-passkey-meta {2287  font-size: 0.6875rem;2288  color: var(--peach-t2);2289}22902291.peach-passkey-actions {2292  position: relative;2293  z-index: 1;2294  margin-top: 14px;2295  display: flex;2296  flex-direction: column;2297  gap: 8px;2298}22992300.peach-passkey-approval {2301  display: flex;2302  flex-direction: column;2303  align-items: center;2304  padding: 16px 20px 14px;2305  gap: 8px;2306  text-align: center;2307}23082309.peach-passkey-approval-icon {2310  width: 36px;2311  height: 36px;2312  border-radius: 10px;2313  background: var(--peach-s2);2314  border: 1px solid var(--peach-t3);2315  display: flex;2316  align-items: center;2317  justify-content: center;2318  flex-shrink: 0;2319  color: var(--peach-accent);2320}23212322.peach-passkey-approval-icon img,2323.peach-passkey-approval-icon svg {2324  width: 22px;2325  height: 22px;2326  border-radius: 5px;2327}23282329.peach-passkey-approval-rp {2330  font-family: var(--font-ui);2331  font-size: 0.75rem;2332  color: var(--peach-t2);2333  letter-spacing: 0.03em;2334}23352336.peach-passkey-approval-action {2337  font-family: var(--font-display);2338  font-style: italic;2339  font-weight: 300;2340  font-size: 18px;2341  color: var(--peach-t0);2342  line-height: 1.1;2343  margin: 1px 0;2344}23452346.peach-passkey-approval-user {2347  font-family: var(--font-mono);2348  font-size: 0.6875rem;2349  color: var(--peach-t1);2350  background: var(--peach-s2);2351  border: 1px solid var(--peach-t3);2352  border-radius: 4px;2353  padding: 3px 8px;2354}23552356.peach-passkey-approval-notice {2357  font-size: 0.625rem;2358  color: var(--peach-t2);2359  line-height: 1.5;2360  max-width: 220px;2361}23622363.peach-passkey-approval-actions {2364  display: flex;2365  gap: 8px;2366  width: 100%;2367  margin-top: 6px;2368}23692370.peach-passkey-approval-actions .peach-btn {2371  flex: 1;2372}23732374/* ── Inline generator drawer ── */2375.peach-generator-drawer {2376  display: grid;2377  grid-template-rows: 0fr;2378  transition: grid-template-rows 320ms var(--peach-curve-arrival);2379  overflow: hidden;2380}2381.peach-generator-drawer.is-open {2382  grid-template-rows: 1fr;2383}2384.peach-generator-drawer-inner {2385  min-height: 0;2386  overflow: hidden;2387}2388.peach-generator-drawer-content {2389  border-top: 1px solid var(--peach-t3);2390  padding: 8px 0 4px;2391  display: flex;2392  flex-direction: column;2393  gap: 8px;2394}23952396/* ── Compact generator (inside entry edit) ── */2397.peach-generator-drawer-content--compact {2398  border-top: 1px solid var(--peach-t3);2399  padding: 8px 0 2px;2400  gap: 7px;2401}2402.peach-pwgen-compact-display-row {2403  display: flex;2404  align-items: center;2405  gap: 6px;2406}2407.peach-pwgen-compact-output {2408  flex: 1;2409  min-width: 0;2410  font-family: "IBM Plex Mono", monospace;2411  font-size: 0.6875rem;2412  font-weight: 400;2413  letter-spacing: 0.04em;2414  color: var(--peach-t0);2415  background: rgba(240, 232, 216, 0.04);2416  border: 1px solid var(--peach-t3);2417  border-radius: 5px;2418  padding: 5px 8px;2419  line-height: 1.5;2420  outline: none;2421  transition: border-color 120ms ease;2422}24232424.peach-pwgen-compact-output:focus {2425  border-color: var(--peach-t1);2426}2427.peach-pwgen-compact-controls {2428  display: flex;2429  align-items: center;2430  gap: 6px;2431}2432.peach-pwgen-compact-slider {2433  flex: 1;2434  min-width: 0;2435  height: 2px !important;2436}2437.peach-pwgen-compact-controls .peach-pwgen-len-num {2438  flex-shrink: 0;2439  min-width: 18px;2440  text-align: right;2441}2442.peach-pwgen-compact-pills {2443  display: flex;2444  gap: 3px;2445  flex-shrink: 0;2446}2447.peach-pwgen-compact-pills .peach-pwgen-pill {2448  padding: 2px 7px;2449  font-size: 0.5rem;2450}2451.peach-pwgen-compact-use {2452  flex-shrink: 0;2453  font-size: 0.625rem !important;2454  padding: 3px 9px !important;2455  min-height: 22px !important;2456  border-radius: 5px !important;2457}24582459/* ── Password edit row (input + eye toggle side-by-side) ── */2460.peach-password-edit-row {2461  display: flex;2462  align-items: center;2463  gap: 6px;2464}2465.peach-password-edit-row .peach-inline-input {2466  flex: 1;2467  min-width: 0;2468}24692470/* ── Generate toggle link ── */2471.peach-generate-toggle-link {2472  display: inline-flex;2473  align-items: center;2474  gap: 5px;2475  background: none;2476  border: none;2477  padding: 0;2478  cursor: pointer;2479  font-family: "IBM Plex Mono", monospace;2480  font-size: 0.625rem;2481  color: var(--peach-t2);2482  letter-spacing: 0.04em;2483  transition: color 120ms ease;2484  align-self: flex-start;2485}2486.peach-generate-toggle-link:hover {2487  color: var(--peach-accent);2488}24892490/* Holds the generate + history toggle links on one row under the editor. */2491.peach-password-edit-links {2492  display: flex;2493  align-items: center;2494  gap: 14px;2495  flex-wrap: wrap;2496}24972498/* ── Past-password history list ── */2499.peach-password-history {2500  display: grid;2501  gap: 4px;2502  margin-top: 2px;2503  max-height: 168px;2504  overflow-y: auto;2505  scrollbar-width: thin;2506}2507.peach-history-row {2508  display: flex;2509  align-items: center;2510  justify-content: space-between;2511  gap: 8px;2512  padding: 5px 7px;2513  border-radius: 7px;2514  background: color-mix(in srgb, var(--peach-accent) 5%, transparent);2515  border: 1px solid color-mix(in srgb, var(--peach-accent) 9%, transparent);2516}2517.peach-history-main {2518  display: flex;2519  flex-direction: column;2520  gap: 1px;2521  min-width: 0;2522  flex: 1;2523}2524.peach-history-pw {2525  font-family: "IBM Plex Mono", monospace;2526  font-size: 0.6875rem;2527  color: var(--peach-t1);2528  white-space: nowrap;2529  overflow: hidden;2530  text-overflow: ellipsis;2531}2532.peach-history-pw .peach-password-mask {2533  letter-spacing: 0.08em;2534  color: var(--peach-t2);2535}2536.peach-history-age {2537  font-family: "IBM Plex Mono", monospace;2538  font-size: 0.5625rem;2539  color: var(--peach-t3, var(--peach-t2));2540  letter-spacing: 0.03em;2541}2542.peach-history-actions {2543  display: flex;2544  align-items: center;2545  gap: 2px;2546  flex-shrink: 0;2547}2548.peach-history-use {2549  font-family: "IBM Plex Mono", monospace;2550  font-size: 0.5625rem;2551  letter-spacing: 0.05em;2552  padding: 3px 7px;2553}2554.peach-history-empty {2555  font-family: "IBM Plex Mono", monospace;2556  font-size: 0.625rem;2557  line-height: 1.45;2558  color: var(--peach-t2);2559  padding: 6px 8px;2560  border-radius: 7px;2561  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);2562  border: 1px solid color-mix(in srgb, var(--peach-accent) 8%, transparent);2563}25642565/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2566.peach-entry-body {2567  flex: 1;2568  overflow-y: auto;2569  overflow-x: hidden;2570  scrollbar-width: none;2571  -ms-overflow-style: none;2572  overscroll-behavior: contain;2573  display: grid;2574  gap: 10px;2575  align-content: start;2576  padding: 10px 20px 14px;2577  min-width: 0;2578  min-height: 0;2579}2580.peach-entry-body::-webkit-scrollbar { display: none; }25812582/* Type-toggle pills + inline note toolbar */2583.peach-new-type-row {2584  display: flex;2585  align-items: center;2586  gap: 6px;2587  margin-bottom: 2px;2588}2589.peach-new-type-btn {2590  background: transparent;2591  border: 1px solid var(--peach-t3);2592  border-radius: 12px;2593  padding: 3px 10px;2594  font-family: "IBM Plex Mono", monospace;2595  font-size: 0.5625rem;2596  letter-spacing: 0.12em;2597  text-transform: uppercase;2598  color: var(--peach-t2);2599  cursor: pointer;2600  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2601}2602.peach-new-type-btn.is-active {2603  color: var(--peach-t0);2604  border-color: var(--peach-accent);2605  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2606}2607.peach-new-type-btn:not(.is-active):hover {2608  color: var(--peach-t1);2609  border-color: var(--peach-t2);2610}26112612/* Editable title */2613.peach-new-title-wrap { margin: 0 0 2px; }2614.peach-new-title-input {2615  background: transparent;2616  border: none;2617  outline: none;2618  width: 100%;2619  color: var(--peach-t0);2620  font-family: var(--font-display);2621  font-style: italic;2622  font-weight: 400;2623  font-size: 40px;2624  line-height: 0.95;2625  caret-color: var(--peach-accent);2626}2627.peach-new-title-input::placeholder { color: var(--peach-t2); }26282629/* Editable domain field */2630.peach-domain-edit-row {2631  display: flex;2632  align-items: center;2633  gap: 6px;2634}26352636.peach-domain-edit-row .peach-domain-value--edit {2637  flex: 1;2638  width: 0;2639}26402641.peach-domain-url-btn {2642  flex-shrink: 0;2643  background: transparent;2644  border: none;2645  cursor: pointer;2646  color: var(--peach-t3);2647  padding: 2px 3px;2648  display: flex;2649  align-items: center;2650  line-height: 0;2651  border-radius: 3px;2652  transition: color 120ms ease;2653}26542655.peach-domain-url-btn:hover {2656  color: var(--peach-accent);2657}26582659.peach-domain-value--edit {2660  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2661  font-size: 0.625rem;2662  font-style: italic;2663  letter-spacing: 0.12em;2664  color: var(--peach-t1);2665  background: transparent;2666  border: none;2667  border-bottom: 1px solid var(--peach-t3);2668  outline: none;2669  width: 100%;2670  padding: 2px 0;2671  caret-color: var(--peach-accent);2672  transition: border-color 140ms ease, color 140ms ease;2673}2674.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2675.peach-domain-value--edit:focus {2676  border-bottom-color: rgba(240, 232, 216, 0.28);2677  color: var(--peach-t0);2678}26792680/* Editable field values (username, password, totp) */2681.peach-field-value--edit {2682  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2683  font-size: 0.8125rem;2684  color: var(--peach-t0);2685  background: transparent;2686  border: none;2687  border-bottom: 1px solid var(--peach-t3);2688  outline: none;2689  flex: 1;2690  min-width: 0;2691  padding: 3px 0;2692  caret-color: var(--peach-accent);2693  transition: border-color 140ms ease, color 140ms ease;2694}2695.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2696.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2697.peach-field-value--edit:focus {2698  border-bottom-color: rgba(240, 232, 216, 0.28);2699  color: var(--peach-t0);2700}27012702/* "+ add optional field" links */2703.peach-entry-add-links {2704  display: flex;2705  gap: 12px;2706  flex-wrap: wrap;2707  margin-top: -2px;2708}2709.peach-add-field-link {2710  background: transparent;2711  border: none;2712  padding: 0;2713  cursor: pointer;2714  font-family: "IBM Plex Mono", monospace;2715  font-size: 0.5625rem;2716  letter-spacing: 0.1em;2717  text-transform: uppercase;2718  color: var(--peach-t2);2719  transition: color 140ms ease;2720}2721.peach-add-field-link:hover { color: var(--peach-accent); }27222723/* ── New entry form (legacy classes) ────────────────────────────────── */2724.peach-new-body {2725  flex: 1;2726  overflow-y: auto;2727  padding: 10px 20px 14px;2728}2729.peach-new-name-input {2730  background: transparent;2731  border: none;2732  outline: none;2733  width: 100%;2734  color: var(--peach-t0);2735  font-family: var(--font-display);2736  font-style: italic;2737  font-weight: 400;2738  font-size: 40px;2739  line-height: 0.95;2740  caret-color: var(--peach-accent);2741}2742.peach-new-name-input::placeholder { color: var(--peach-t2); }2743.peach-new-field-input {2744  background: transparent;2745  border: none;2746  outline: none;2747  flex: 1;2748  min-width: 0;2749  caret-color: var(--peach-accent);2750}2751.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }27522753/* ── Canary card ── */2754.peach-canary-card {2755  border: 1px solid rgba(217, 160, 48, 0.2);2756  background: rgba(217, 160, 48, 0.03);2757  border-radius: 8px;2758  padding: 12px;2759}27602761.peach-canary-settings-header {2762  display: flex;2763  align-items: center;2764  justify-content: space-between;2765  cursor: pointer;2766  user-select: none;2767}27682769.peach-canary-card .peach-label {2770  color: rgba(217, 160, 48, 0.85);2771}27722773.peach-canary-card .peach-new-field-input {2774  border-color: rgba(217, 160, 48, 0.25);2775}27762777.peach-canary-card .peach-new-field-input:focus {2778  border-color: rgba(217, 160, 48, 0.5);2779}27802781.peach-canary-body {2782  margin-top: 12px;2783  display: flex;2784  flex-direction: column;2785  gap: 10px;2786}27872788.peach-canary-explainer {2789  display: flex;2790  gap: 10px;2791  padding: 10px 12px;2792  border-radius: 10px;2793  background: rgba(217, 160, 48, 0.06);2794  border: 1px solid rgba(217, 160, 48, 0.22);2795  margin-bottom: 4px;2796}27972798.peach-canary-explainer-icon {2799  font-size: 1rem;2800  flex-shrink: 0;2801  line-height: 1.2;2802}28032804.peach-canary-explainer-title {2805  font-family: var(--font-ui);2806  font-size: 0.6875rem;2807  font-weight: 500;2808  color: rgba(217, 160, 48, 0.9);2809  margin: 0 0 3px;2810}28112812.peach-canary-explainer-copy {2813  font-family: var(--font-ui);2814  font-size: 0.625rem;2815  color: var(--peach-t2);2816  line-height: 1.55;2817  margin: 0;2818}28192820.peach-canary-hint {2821  font-size: 0.625rem;2822  color: var(--peach-t2);2823  font-family: Inter, system-ui, sans-serif;2824  line-height: 1.5;2825  margin-top: 4px;2826}28272828.peach-canary-actions-row {2829  display: flex;2830  align-items: center;2831  gap: 8px;2832}28332834.peach-canary-test-btn {2835  border-color: rgba(217, 160, 48, 0.3);2836  color: rgba(217, 160, 48, 0.85);2837}28382839.peach-canary-test-result {2840  font-size: 0.625rem;2841  font-family: Inter, system-ui, sans-serif;2842}28432844.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2845.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }28462847.peach-canary-badge {2848  display: flex;2849  position: relative;2850  z-index: 1;2851  align-items: center;2852  gap: 5px;2853  padding: 4px 10px;2854  background: rgba(217, 160, 48, 0.12);2855  border: 1px solid rgba(217, 160, 48, 0.35);2856  border-radius: 6px;2857  margin-bottom: 6px;2858  width: fit-content;2859}28602861.peach-canary-badge-label {2862  font-size: 0.625rem;2863  letter-spacing: 0.06em;2864  color: rgba(217, 160, 48, 0.9);2865  font-family: var(--font-ui);2866  text-transform: uppercase;2867}28682869.peach-canary-badge-icon {2870  font-size: 0.6875rem;2871}28722873.peach-canary-suppress-row {2874  display: flex;2875  align-items: center;2876  gap: 8px;2877  padding: 6px 10px;2878  background: rgba(217, 160, 48, 0.08);2879  border-radius: 6px;2880  margin-bottom: 8px;2881}28822883.peach-canary-suppress-label {2884  font-size: 0.6875rem;2885  color: rgba(217, 160, 48, 0.85);2886  cursor: pointer;2887  font-family: var(--font-ui);2888  letter-spacing: 0.04em;2889}28902891.peach-regen-panel {2892  position: relative;2893  z-index: 1;2894  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2895  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2896  border-radius: 8px;2897  padding: 12px;2898  margin-bottom: 8px;2899}29002901.peach-regen-panel-header {2902  display: flex;2903  align-items: center;2904  justify-content: space-between;2905  margin-bottom: 10px;2906}29072908.peach-regen-panel-title {2909  font-size: 0.6875rem;2910  font-weight: 600;2911  letter-spacing: 0.06em;2912  text-transform: uppercase;2913  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2914}29152916.peach-regen-output {2917  background: rgba(0, 0, 0, 0.2);2918  border-radius: 6px;2919  padding: 10px;2920  margin-bottom: 10px;2921  font-family: var(--font-mono);2922  font-size: 0.8125rem;2923  word-break: break-all;2924  color: var(--peach-t1);2925}29262927.peach-regen-actions {2928  display: flex;2929  gap: 6px;2930}29312932.peach-regen-actions--spaced {2933  margin-bottom: 8px;2934}29352936.peach-regen-action-grow {2937  flex: 1;2938}29392940.peach-regen-copy-btn {2941  padding: 0 8px;2942}29432944.peach-regen-success {2945  position: relative;2946  z-index: 1;2947  background: rgba(40, 180, 80, 0.1);2948  border: 1px solid rgba(40, 180, 80, 0.3);2949  border-radius: 8px;2950  padding: 10px 12px;2951  margin-bottom: 8px;2952  display: flex;2953  align-items: center;2954  gap: 8px;2955  font-size: 0.6875rem;2956  color: rgba(40, 180, 80, 0.9);2957}29582959/* ── Note editor overlay ── */2960.peach-note-editor {2961  position: absolute;2962  inset: 0;2963  z-index: 200;2964  display: flex;2965  flex-direction: column;2966  background:2967    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2968    var(--peach-bg);2969  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2970}29712972.peach-note-editor-header {2973  display: flex;2974  align-items: center;2975  gap: 10px;2976  padding: 14px 16px 10px;2977  border-bottom: 1px solid var(--peach-t3);2978  flex-shrink: 0;2979}29802981.peach-note-editor-back {2982  background: transparent;2983  border: none;2984  cursor: pointer;2985  color: var(--peach-t2);2986  padding: 4px 6px;2987  border-radius: 6px;2988  display: flex;2989  align-items: center;2990  transition: color 120ms ease, background 120ms ease;2991  flex-shrink: 0;2992}2993.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }29942995.peach-note-editor-label {2996  flex: 1;2997  font-family: var(--font-display);2998  font-style: italic;2999  font-size: 0.9375rem;3000  color: var(--peach-t1);3001  letter-spacing: 0.02em;3002}30033004.peach-note-editor-save-btn {3005  background: transparent;3006  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);3007  border-radius: 8px;3008  color: var(--peach-accent);3009  font-family: "IBM Plex Mono", monospace;3010  font-size: 0.625rem;3011  letter-spacing: 0.06em;3012  text-transform: uppercase;3013  padding: 3px 10px;3014  cursor: pointer;3015  transition: background 120ms ease, border-color 120ms ease;3016}3017.peach-note-editor-save-btn:hover:not(:disabled) {3018  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3019  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3020}3021.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }30223023.peach-note-toolbar {3024  display: flex;3025  align-items: center;3026  gap: 3px;3027  padding: 6px 14px 5px;3028  border-bottom: 1px solid var(--peach-t3);3029  flex-shrink: 0;3030}30313032.peach-note-tool-btn {3033  background: transparent;3034  border: 1px solid transparent;3035  border-radius: 5px;3036  color: var(--peach-t2);3037  font-family: "IBM Plex Mono", monospace;3038  font-size: 0.625rem;3039  letter-spacing: 0.04em;3040  padding: 2px 8px;3041  cursor: pointer;3042  line-height: 1.6;3043  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;3044}3045.peach-note-tool-btn:hover {3046  background: var(--peach-t4);3047  color: var(--peach-t0);3048  border-color: var(--peach-t3);3049}30503051.peach-note-tool-icon {3052  padding: 3px 7px;3053  display: inline-flex;3054  align-items: center;3055  justify-content: center;3056}30573058.peach-note-tool-divider {3059  width: 1px;3060  height: 14px;3061  background: var(--peach-t3);3062  margin: 0 4px;3063  flex-shrink: 0;3064}30653066.peach-note-editor-body {3067  flex: 1;3068  overflow-y: auto;3069  padding: 16px 20px 20px;3070  outline: none;3071  font-family: var(--font-display);3072  font-size: 1rem;3073  line-height: 1.75;3074  color: var(--peach-t0);3075  scrollbar-width: none;3076  word-break: break-word;3077}3078.peach-note-editor-body:empty::before {3079  content: "write your note…";3080  color: var(--peach-t3);3081  font-style: italic;3082  pointer-events: none;3083}30843085/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */3086.peach-note-editor-inline {3087  display: flex;3088  flex-direction: column;3089  flex: 1;3090  min-height: 0;3091}3092.peach-note-editor-body--inline {3093  flex: 1;3094  min-height: 0;3095  font-size: 0.9375rem;3096  padding: 10px 20px 14px;3097}30983099/* Full-width toolbar row inside the body (Add.tsx note type).3100   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */3101.peach-note-toolbar-body {3102  display: flex;3103  align-items: center;3104  gap: 3px;3105  padding: 5px 20px 4px;3106  margin: 2px -20px 0;3107  border-bottom: 1px solid var(--peach-t3);3108  flex-shrink: 0;3109}31103111/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)3112   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn3113   and .peach-note-tool-divider button-level styles. */3114.peach-note-toolbar-inline {3115  display: flex;3116  align-items: center;3117  gap: 3px;3118  margin-left: auto;3119  padding-left: 10px;3120  border-left: 1px solid var(--peach-t3);3121  min-height: 22px;3122}31233124/* Entry.tsx toolbar row (no tabs, toolbar only) */3125.peach-entry-note-toolbar-row {3126  display: flex;3127  align-items: center;3128  margin: 4px 0 6px;3129  position: relative;3130  z-index: 1;3131}3132.peach-entry-note-toolbar-row .peach-note-toolbar-inline {3133  border-left: none;3134  padding-left: 0;3135  margin-left: 0;3136}31373138/* Note body — fills available vertical space in Add.tsx and Entry.tsx */3139.peach-note-body {3140  display: flex;3141  flex-direction: column;3142  flex: 1;3143  min-height: 0;3144  margin: 4px 0 0;3145}3146.peach-entry-body--new .peach-note-body {3147  margin: 8px -20px 0;3148}31493150/* Add.tsx body is a grid by default; swap to a flex column when a note is3151   active so the note body can stretch and pin the tags row to the bottom. */3152.peach-entry-body--new:has(.peach-note-body) {3153  display: flex;3154  flex-direction: column;3155}31563157/* Rich content element styles (editor + display) */3158.peach-note-editor-body h2,3159.peach-note-content h2 {3160  font-family: var(--font-display);3161  font-size: 20px;3162  font-weight: 600;3163  font-style: italic;3164  color: var(--peach-t0);3165  margin: 6px 0 2px;3166  line-height: 1.3;3167}3168.peach-note-editor-body ul,3169.peach-note-content ul {3170  padding-left: 18px;3171  margin: 3px 0;3172  list-style: disc;3173}3174.peach-note-editor-body ol,3175.peach-note-content ol {3176  padding-left: 18px;3177  margin: 3px 0;3178  list-style: decimal;3179}3180.peach-note-editor-body li,3181.peach-note-content li { margin: 2px 0; }3182.peach-note-editor-body hr,3183.peach-note-content hr {3184  border: none;3185  border-top: 1px solid var(--peach-t3);3186  margin: 10px 0;3187}31883189/* font size elements from execCommand */3190.peach-note-editor-body font[size="1"],3191.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }3192.peach-note-editor-body font[size="2"],3193.peach-note-content font[size="2"] { font-size: 0.8125rem; }3194.peach-note-editor-body font[size="3"],3195.peach-note-content font[size="3"] { font-size: 1rem; }3196.peach-note-editor-body font[size="4"],3197.peach-note-content font[size="4"] { font-size: 20px; }3198.peach-note-editor-body font[size="5"],3199.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }32003201/* bold / italic inside the editor and note display */3202.peach-note-editor-body b, .peach-note-editor-body strong,3203.peach-note-content b, .peach-note-content strong { font-weight: 700; }3204.peach-note-editor-body em, .peach-note-editor-body i,3205.peach-note-content em, .peach-note-content i { font-style: italic; }32063207/* note display — rendered HTML, no pre-wrap */3208.peach-note-content {3209  overflow: auto;3210  max-height: 340px;3211  word-break: break-word;3212}32133214/* ── Note textarea ── */3215.peach-note-textarea {3216  width: 100%;3217  min-height: 180px;3218  max-height: 280px;3219  resize: vertical;3220  background: var(--peach-t4);3221  border: 1px solid var(--peach-t3);3222  border-radius: 8px;3223  padding: 10px 12px;3224  font-family: "IBM Plex Mono", monospace;3225  font-size: 0.75rem;3226  line-height: 1.7;3227  color: var(--peach-t1);3228  outline: none;3229  transition: border-color 150ms ease;3230}32313232.peach-note-textarea:focus {3233  border-color: var(--peach-t2);3234}32353236.peach-note-char-count {3237  font-family: "IBM Plex Mono", monospace;3238  font-size: 0.5625rem;3239  color: var(--peach-t3);3240  text-align: right;3241  margin-top: 4px;3242  letter-spacing: 0.1em;3243}32443245/* ── Field input baseline ── */3246.peach-new-field-input {3247  width: 100%;3248  background: transparent;3249  border: none;3250  border-bottom: 1px solid var(--peach-t3);3251  padding: 4px 0;3252  color: var(--peach-t1);3253  font-family: "IBM Plex Mono", monospace;3254  font-size: 0.8125rem;3255  outline: none;3256  transition: border-color 150ms ease;3257}32583259.peach-new-field-input:focus {3260  border-bottom-color: var(--peach-t0);3261  color: var(--peach-t0);3262}32633264.peach-new-name-input {3265  width: 100%;3266  background: transparent;3267  border: none;3268  border-bottom: 1px solid var(--peach-t3);3269  padding: 6px 0;3270  font-family: var(--font-display);3271  font-style: italic;3272  font-size: 28px;3273  color: var(--peach-t0);3274  outline: none;3275  transition: border-color 150ms ease;3276}32773278.peach-new-name-input:focus {3279  border-bottom-color: var(--peach-t1);3280}32813282.peach-new-name-input::placeholder {3283  color: var(--peach-t2);3284  font-style: italic;3285}32863287.peach-new-field-input::placeholder {3288  color: var(--peach-t3);3289}32903291/* ── Demo entrance animation ── */3292#hd-shell {3293  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3294}3295@keyframes hd-shell-enter {3296  from { opacity: 0; transform: scale(0.96) translateY(16px); }3297  to   { opacity: 1; transform: scale(1) translateY(0); }3298}32993300/* ── Keyframes ── */3301@keyframes peach-char-enter {3302  from { opacity: 0; transform: translateY(0.22em); }3303  to   { opacity: 1; transform: translateY(0); }3304}3305@keyframes peach-content-enter {3306  from { opacity: 0.96; transform: translateY(4px); }3307  to   { opacity: 1; transform: translateY(0); }3308}3309@keyframes peach-content-exit {3310  from { opacity: 1; transform: translateY(0); }3311  to   { opacity: 0.92; transform: translateY(-3px); }3312}3313@keyframes peach-screen-enter {3314  from { opacity: 0; transform: translateY(14px); }3315  to   { opacity: 1; transform: translateY(0); }3316}3317@keyframes peach-shell-fade-in {3318  from { opacity: 0; }3319  to   { opacity: 1; }3320}3321@keyframes peach-veil-in {3322  from { opacity: 0; }3323  to   { opacity: 1; }3324}3325@keyframes peach-lock-settle {3326  0%   { transform: scale(0.9); }3327  65%  { transform: scale(1.08); }3328  100% { transform: scale(1); }3329}3330@keyframes peach-copy-confirm {3331  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3332  to   { color: var(--peach-accent); border-color: color-mix(in srgb, var(--peach-accent) 42%, transparent); background-color: color-mix(in srgb, var(--peach-accent) 9%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--peach-accent) 22%, transparent), inset 0 0 18px color-mix(in srgb, var(--peach-accent) 12%, transparent); }3333}3334@keyframes peach-copy-retreat {3335  from { color: var(--peach-accent); border-color: color-mix(in srgb, var(--peach-accent) 42%, transparent); background-color: color-mix(in srgb, var(--peach-accent) 9%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--peach-accent) 22%, transparent), inset 0 0 18px color-mix(in srgb, var(--peach-accent) 12%, transparent); }3336  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3337}3338@keyframes peach-copy-flood {3339  from { opacity: 0; transform: scaleX(0.15); }3340  to   { opacity: 1; transform: scaleX(1); }3341}3342@keyframes peach-copy-icon-settle {3343  from  { transform: scale(0.84); }3344  70%   { transform: scale(1.08); }3345  to    { transform: scale(1); }3346}3347@keyframes peach-copy-sheen-retreat {3348  from { opacity: 1; transform: scaleX(1); }3349  to   { opacity: 0; transform: scaleX(0.15); }3350}3351@keyframes peach-copy-drain {3352  from { width: 100%; }3353  to   { width: 0; }3354}3355@keyframes peach-shake {3356  0%, 100% { transform: translateX(0); }3357  20%      { transform: translateX(-6px); }3358  40%      { transform: translateX(6px); }3359  60%      { transform: translateX(-4px); }3360  80%      { transform: translateX(4px); }3361}33623363@keyframes pip-pulse {3364  0% { transform: scale(1); }3365  40% { transform: scale(2.2); }3366  100% { transform: scale(1); }3367}336833693370/* ── Password generator ── */3371.peach-pwgen-body {3372  flex: 1; overflow-y: auto;3373  display: flex; flex-direction: column;3374}3375.peach-policy-badge {3376  display: flex; align-items: center;3377  padding: 6px 20px 0;3378  font-size: 0.625rem; font-family: Inter, sans-serif;3379  color: var(--peach-t2); letter-spacing: 0.04em;3380}3381.peach-pwgen-display {3382  padding: 14px 20px 12px;3383  border-bottom: 1px solid var(--peach-t3);3384  display: flex; align-items: flex-start; gap: 10px;3385}3386.peach-pwgen-display-row {3387  display: flex;3388  align-items: flex-start;3389  gap: 8px;3390  padding-bottom: 8px;3391  border-bottom: 1px solid var(--peach-t3);3392}3393.peach-pwgen-output {3394  flex: 1; min-width: 0; margin: 0;3395  font-family: "IBM Plex Mono", monospace;3396  font-size: 0.8125rem; color: var(--peach-t0);3397  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3398  white-space: normal;3399  padding: 10px 12px;3400  background: var(--peach-t4);3401  border-radius: 6px;3402  min-height: 36px;3403}3404.peach-pwgen-output-display {3405  flex: 1;3406  min-width: 0;3407  margin: 0;3408  font-family: var(--font-display);3409  font-style: italic;3410  font-weight: 300;3411  font-size: 32px;3412  line-height: 1.05;3413  color: var(--peach-t0);3414  word-break: break-all;3415  overflow-wrap: break-word;3416  white-space: normal;3417  letter-spacing: 0.02em;3418}3419.peach-pwgen-display-actions {3420  display: flex;3421  flex-direction: column;3422  gap: 4px;3423  flex-shrink: 0;3424  margin-top: 2px;3425}3426.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3427.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3428.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3429.peach-pwgen-len-num {3430  font-family: "IBM Plex Mono", monospace;3431  font-size: 0.75rem; color: var(--peach-accent);3432}3433.peach-pwgen-len-num--edit {3434  cursor: text;3435  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3436}3437.peach-pwgen-len-input {3438  font-family: "IBM Plex Mono", monospace;3439  font-size: 0.75rem;3440  color: var(--peach-accent);3441  background: transparent;3442  border: none;3443  border-bottom: 1px solid var(--peach-accent);3444  outline: none;3445  width: 32px;3446  text-align: right;3447  padding: 0;3448}3449.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3450.peach-pwgen-toggles { display: flex; flex-direction: column; }3451.peach-pwgen-charset-pills {3452  display: flex;3453  gap: 6px;3454  flex-wrap: wrap;3455}3456.peach-pwgen-pill {3457  padding: 4px 11px;3458  border-radius: 999px;3459  border: 1px solid var(--peach-t3);3460  background: transparent;3461  color: var(--peach-t2);3462  font-family: "IBM Plex Mono", monospace;3463  font-size: 0.5625rem;3464  letter-spacing: 0.08em;3465  cursor: pointer;3466  transition: all 150ms ease;3467}3468.peach-pwgen-pill.is-on {3469  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3470  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3471  color: var(--peach-accent);3472}3473.peach-pwgen-pill:not(.is-on):hover {3474  color: var(--peach-t1);3475  border-color: var(--peach-t2);3476}3477.peach-pwgen-use-btn {3478  width: 100%;3479  min-height: 34px;3480  border-radius: 8px;3481  margin-top: 2px;3482}3483.peach-generator-constraint-note {3484  font-family: 'IBM Plex Mono', monospace;3485  font-size: 10px;3486  color: var(--peach-t3);3487  letter-spacing: 0.04em;3488  margin: 0;3489  transition: opacity 200ms ease;3490}3491.peach-pwgen-toggle-row {3492  display: flex; align-items: center; justify-content: space-between;3493  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3494}3495.peach-pwgen-toggle-row:last-child { border-bottom: none; }3496.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }34973498/* Peach popup should not expose native scrollbars on internal panels. */3499.peach-settings-body,3500.peach-new-body,3501.peach-pwgen-body,3502.lock-screen,3503.peach-import-preview {3504  scrollbar-width: none;3505  -ms-overflow-style: none;3506  overscroll-behavior: contain;3507}3508.peach-settings-body::-webkit-scrollbar,3509.peach-new-body::-webkit-scrollbar,3510.peach-pwgen-body::-webkit-scrollbar,3511.lock-screen::-webkit-scrollbar,3512.peach-import-preview::-webkit-scrollbar {3513  width: 0;3514  height: 0;3515  display: none;3516}35173518.lock-screen {3519  height: 100%;3520  min-height: 100%;3521  overflow-y: auto;3522  padding: 18px 18px 16px;3523  gap: 14px;3524  grid-template-rows: auto auto auto 1fr auto;3525  align-content: stretch;3526  position: relative;3527  isolation: isolate;3528}3529.peach-screen.lock-screen--vault-stage {3530  display: flex;3531  flex-direction: column;3532  justify-content: flex-start;3533  gap: 18px;3534  padding: 20px 18px 18px;3535  overflow: hidden;3536}3537.peach-screen.lock-screen--vault-stage .peach-lock-panel {3538  margin-top: 0;3539}3540.lock-screen--onboarding {3541  display: flex;3542  flex-direction: column;3543  gap: 12px;3544  justify-content: flex-start;3545}35463547.lock-screen::before {3548  content: "";3549  position: absolute;3550  inset: 12px 18px auto auto;3551  width: 160px;3552  height: 160px;3553  border-radius: 999px;3554  background:3555    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 42%, transparent 72%);3556  filter: blur(6px);3557  opacity: 0.7;3558  pointer-events: none;3559  z-index: 0;3560}35613562.peach-lock-rune-string {3563  flex: 1;3564  display: flex;3565  align-items: center;3566  justify-content: center;3567  gap: 6px;3568  font-family: PeachScript, monospace;3569  font-size: 0.8125rem;3570  letter-spacing: 0.05em;3571  pointer-events: none;3572  user-select: none;3573  position: relative;3574  z-index: 1;3575}35763577.peach-lock-rune-string span {3578  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3579  text-shadow:3580    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3581    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3582  transition: color 0.9s ease, text-shadow 0.9s ease;3583}35843585.peach-lock-rune-string span.is-glowing {3586  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3587  text-shadow:3588    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3589    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3590}35913592.lock-screen-header {3593  display: flex;3594  align-items: center;3595  justify-content: space-between;3596  position: relative;3597  z-index: 1;3598}35993600.lock-password-input.shake {3601  animation: peach-shake 300ms ease-in-out;3602}36033604.peach-hint-error {3605  color: rgba(220, 80, 60, 0.92);3606}36073608.peach-onboarding-headline {3609  margin: 0;3610  font-family: var(--font-display);3611  font-size: 35px;3612  line-height: 0.88;3613  font-style: italic;3614  font-weight: 400;3615  max-width: 252px;3616}36173618.peach-lock-copy {3619  display: grid;3620  gap: 8px;3621  position: relative;3622  z-index: 1;3623}36243625.peach-lock-copy--onboarding {3626  gap: 10px;3627}36283629.peach-lock-hero {3630  position: relative;3631  z-index: 1;3632  display: grid;3633  gap: 8px;3634  min-height: 0;3635  padding: 4px 2px 0;3636  border: none;3637  border-radius: 0;3638  background: transparent;3639  box-shadow: none;3640}3641.peach-lock-hero-art {3642  position: absolute;3643  right: -8px;3644  top: -6px;3645  width: 120px;3646  height: 120px;3647  display: flex;3648  align-items: center;3649  justify-content: center;3650  pointer-events: none;3651  opacity: 0.12;3652  filter: saturate(0.9);3653}3654.peach-lock-hero-mark {3655  width: 100%;3656  height: 100%;3657}3658/* Peach body stays brand-peach across every accent — we don't want a3659   green or blue peach when sage/sky is selected. Leaf + vein keep the3660   sage tint because a real peach has a sage leaf. In the new brand-kit3661   mark the leaf is path 1 and the vein stroke is path 2; the body and3662   back-lobe (paths 3 + 4) must stay untouched. */3663.peach-lock-hero-mark path:nth-child(1) {3664  fill: rgba(123, 144, 96, 0.88);3665}3666.peach-lock-hero-mark path:nth-child(2) {3667  stroke: rgba(94, 122, 66, 0.95);3668}3669.peach-lock-hero > *:not(.peach-lock-hero-art) {3670  position: relative;3671  z-index: 1;3672}36733674.peach-lock-eyebrow {3675  display: inline-flex;3676  align-items: center;3677  width: fit-content;3678  padding: 4px 9px;3679  border-radius: 999px;3680  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3681  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3682  color: var(--peach-t0);3683  font-family: "IBM Plex Mono", monospace;3684  font-size: 0.5rem;3685  letter-spacing: 0.18em;3686  text-transform: uppercase;3687}36883689.peach-lock-label-row {3690  display: flex;3691  align-items: center;3692  justify-content: space-between;3693  margin-bottom: 0;3694}36953696.peach-lock-reveal-btn {3697  display: inline-flex;3698  align-items: center;3699  gap: 4px;3700  background: none;3701  border: none;3702  cursor: pointer;3703  font-family: "IBM Plex Mono", monospace;3704  font-size: 0.5625rem;3705  letter-spacing: 0.06em;3706  color: var(--peach-t2);3707  padding: 2px 0;3708  transition: color 150ms ease;3709}37103711.peach-lock-reveal-btn:hover {3712  color: var(--peach-t1);3713}37143715.peach-lock-warning {3716  color: rgba(220, 80, 60, 0.85) !important;3717  line-height: 1.5;3718}37193720.peach-onboarding-cards {3721  display: grid;3722  gap: 8px;3723  position: relative;3724  z-index: 1;3725}37263727.peach-lock-panel {3728  position: relative;3729  z-index: 1;3730  display: grid;3731  gap: 9px;3732  padding: 14px 16px 15px;3733  border-radius: 18px;3734  border: 1px solid var(--peach-t3);3735  background:3736    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3737  box-shadow:3738    inset 0 1px 0 rgba(240, 232, 216, 0.04),3739    0 12px 28px rgba(0, 0, 0, 0.12);3740}37413742/* Glass surface — lock panel and settings groups */3743.peach-glass {3744  background: rgba(26, 20, 16, 0.65);3745  border: 1px solid rgba(255, 255, 255, 0.08);3746  border-radius: 12px;3747  backdrop-filter: blur(12px) saturate(1.4);3748  -webkit-backdrop-filter: blur(12px) saturate(1.4);3749}37503751@supports not (backdrop-filter: blur(1px)) {3752  .peach-glass {3753    background: rgba(26, 20, 16, 0.92);3754    border: 1px solid rgba(255, 255, 255, 0.10);3755    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3756  }3757}37583759.light .peach-glass,3760[data-theme="light"] .peach-glass {3761  background: rgba(240, 233, 223, 0.72);3762  border: 1px solid rgba(26, 18, 8, 0.08);3763  backdrop-filter: blur(12px) saturate(1.2);3764  -webkit-backdrop-filter: blur(12px) saturate(1.2);3765}37663767@supports not (backdrop-filter: blur(1px)) {3768  .light .peach-glass,3769  [data-theme="light"] .peach-glass {3770    background: rgba(240, 233, 223, 0.97);3771    border: 1px solid rgba(26, 18, 8, 0.10);3772  }3773}37743775/* Lock panel keeps its own border-radius over the generic glass token */3776.peach-lock-panel.peach-glass {3777  border-radius: 18px;3778  background: rgba(26, 20, 16, 0.65);3779  border: 1px solid rgba(255, 255, 255, 0.08);3780  box-shadow:3781    inset 0 1px 0 rgba(255, 255, 255, 0.05),3782    0 12px 28px rgba(0, 0, 0, 0.3);3783}37843785.light .peach-lock-panel.peach-glass,3786[data-theme="light"] .peach-lock-panel.peach-glass {3787  background: rgba(240, 233, 223, 0.82);3788  border: 1px solid rgba(26, 18, 8, 0.08);3789  box-shadow:3790    inset 0 1px 0 rgba(255, 255, 255, 0.4),3791    0 8px 24px rgba(80, 56, 32, 0.15);3792}37933794@supports not (backdrop-filter: blur(1px)) {3795  .peach-lock-panel.peach-glass {3796    background: rgba(26, 20, 16, 0.92);3797    box-shadow:3798      inset 0 1px 0 rgba(255, 255, 255, 0.05),3799      0 12px 28px rgba(0, 0, 0, 0.4);3800  }3801  .light .peach-lock-panel.peach-glass,3802  [data-theme="light"] .peach-lock-panel.peach-glass {3803    background: rgba(240, 233, 223, 0.98);3804  }3805}38063807.peach-lock-panel--secondary {3808  gap: 12px;3809}38103811.peach-lock-panel-header {3812  display: flex;3813  align-items: baseline;3814  justify-content: space-between;3815  gap: 12px;3816}38173818.peach-lock-option-grid {3819  display: grid;3820  gap: 10px;3821}38223823.peach-lock-option {3824  width: 100%;3825  display: grid;3826  gap: 6px;3827  padding: 14px 15px;3828  border-radius: 16px;3829  border: 1px solid rgba(240, 232, 216, 0.08);3830  background: rgba(240, 232, 216, 0.02);3831  color: var(--peach-t0);3832  text-align: left;3833  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3834}38353836.peach-lock-option:hover {3837  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3838  background: rgba(240, 232, 216, 0.04);3839  transform: translateY(-1px);3840}38413842.peach-lock-option-title {3843  font-size: 0.75rem;3844  color: var(--peach-t0);3845}38463847.peach-lock-option-copy {3848  font-size: 0.6875rem;3849  line-height: 1.55;3850  color: var(--peach-t1);3851}38523853.peach-onboarding-stack {3854  margin-top: 2px;3855}3856.peach-lock-panel-footer {3857  display: grid;3858  gap: 6px;3859  margin-top: 2px;3860  padding-top: 10px;3861  border-top: 1px solid rgba(240, 232, 216, 0.06);3862}38633864/* ── Restore tab view ─────────────────────────────────────────────────────3865   Tab-based restore screen replacing the old three-card picker. */38663867.peach-restore-tabview {3868  overflow: hidden;3869}38703871.peach-restore-tabcard {3872  flex: 1;3873  display: flex;3874  flex-direction: column;3875  gap: 0;3876  padding: 0;3877  overflow: hidden;3878  cursor: default;3879  user-select: none;3880  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3881}38823883/* ── Tab selector ─────────────────────────────────────────────────────── */38843885.peach-restore-tabs {3886  display: flex;3887  justify-content: space-around;3888  padding: 14px 10px 10px;3889  border-bottom: 1px solid var(--peach-t3);3890  gap: 2px;3891  overflow: hidden;3892  scrollbar-width: none;3893}3894.peach-restore-tabs::-webkit-scrollbar { display: none; }38953896.peach-restore-tab {3897  background: none;3898  border: none;3899  cursor: pointer;3900  padding: 3px 2px;3901  font-family: 'Cormorant Garamond', Georgia, serif;3902  font-style: italic;3903  font-size: 11px;3904  color: var(--peach-t2);3905  transition: color 150ms ease, text-shadow 150ms ease;3906  flex: 1;3907  min-width: 0;3908  text-align: center;3909  white-space: nowrap;3910  overflow: hidden;3911  text-overflow: ellipsis;3912}3913.peach-restore-tab:hover {3914  color: var(--peach-accent);3915  text-shadow:3916    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3917    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3918}3919.peach-restore-tab.is-active {3920  color: var(--peach-accent);3921  text-shadow:3922    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3923    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3924}39253926/* ── Content area ─────────────────────────────────────────────────────── */39273928.peach-restore-content {3929  padding: 16px 16px 14px;3930  display: flex;3931  flex-direction: column;3932  gap: 8px;3933  overflow: hidden;3934  scrollbar-width: none;3935  flex: 1;3936}3937.peach-restore-content::-webkit-scrollbar { display: none; }3938.peach-restore-content > * {3939  overflow: hidden;3940  scrollbar-width: none;3941}3942.peach-restore-content > *::-webkit-scrollbar { display: none; }39433944/* ── Shared tab inner layout ──────────────────────────────────────────── */39453946.peach-rt-symbols,3947.peach-rt-csv,3948.peach-rt-phone,3949.peach-restore-codex {3950  display: flex;3951  flex-direction: column;3952  gap: 8px;3953  overflow: hidden;3954}39553956.peach-restore-codex {3957  min-height: 0;3958  justify-content: center;3959}39603961.peach-restore-codex-title {3962  margin: 0;3963  font-family: var(--font-display);3964  font-size: 1rem;3965  font-style: italic;3966  color: var(--peach-t0);3967}39683969.peach-restore-codex-copy {3970  margin: 0;3971  font-size: 0.75rem;3972  line-height: 1.5;3973  color: var(--peach-t1);3974}39753976.peach-restore-codex-button {3977  width: 100%;3978  justify-content: center;3979}39803981.peach-rt-submit {3982  width: 100%;3983}39843985.peach-rt-error {3986  margin: 0;3987  font-size: 0.6875rem;3988  color: var(--peach-breach);3989  line-height: 1.4;3990}39913992/* ── PeachScript tab ──────────────────────────────────────────────────── */39933994.peach-restore-symbols-textarea {3995  font-family: 'PeachScript', monospace;3996  font-size: 13px;3997  line-height: 1.9;3998  letter-spacing: 0.1em;3999  word-break: break-all;4000  resize: none;4001  width: 100%;4002  min-height: 56px;4003  max-height: 72px;4004  overflow: hidden;4005  scrollbar-width: none;4006  -ms-overflow-style: none;4007  box-sizing: border-box;4008  padding: 6px 8px;4009  border-radius: 8px;4010  border: 1px solid var(--peach-t3);4011  background: rgba(240, 232, 216, 0.03);4012  color: var(--peach-t0);4013}4014.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }4015.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }40164017.peach-restore-symbols-pass {4018  width: 100%;4019  box-sizing: border-box;4020  padding: 7px 10px;4021  border-radius: 8px;4022  border: 1px solid var(--peach-t3);4023  background: rgba(240, 232, 216, 0.03);4024  color: var(--peach-t0);4025  font-size: 0.8125rem;4026}4027.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }4028.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }40294030.peach-rt-divider {4031  text-align: center;4032  font-size: 0.6875rem;4033  color: var(--peach-t2);4034  font-style: italic;4035}40364037.peach-rt-file-label {4038  width: 100%;4039  justify-content: center;4040}40414042.peach-rt-anim-canvas {4043  width: 100%;4044  height: 180px;4045  border-radius: 10px;4046  overflow: hidden;4047  display: block;4048}40494050/* ── CSV tab ──────────────────────────────────────────────────────────── */40514052.peach-rt-csv-sources {4053  margin: 0;4054  font-size: 0.6875rem;4055  color: var(--peach-t2);4056  line-height: 1.5;4057  text-align: center;4058}40594060.peach-rt-csv-warning {4061  margin: 0;4062  font-family: "IBM Plex Mono", monospace;4063  font-size: 0.5625rem;4064  letter-spacing: 0.12em;4065  color: var(--peach-breach);4066  text-align: center;4067}40684069/* ── From Phone tab ───────────────────────────────────────────────────── */40704071.peach-rt-phone-code {4072  margin: 0;4073  text-align: center;4074  font-family: "IBM Plex Mono", monospace;4075  font-size: 22px;4076  letter-spacing: 0.18em;4077  color: var(--peach-t0);4078}40794080.peach-rt-phone-qr {4081  display: block;4082  width: 96px;4083  height: 96px;4084  margin: 0 auto;4085  border-radius: 6px;4086  image-rendering: pixelated;4087  overflow: hidden;4088}40894090.peach-rt-phone-hint {4091  margin: 0;4092  font-size: 0.6875rem;4093  color: var(--peach-t2);4094  line-height: 1.55;4095  text-align: center;4096}40974098/* ── Intro popup ──────────────────────────────────────────────────────── */40994100.peach-restore-intro-overlay {4101  position: absolute;4102  inset: 0;4103  z-index: 100;4104  display: flex;4105  align-items: center;4106  justify-content: center;4107  padding: 20px;4108  background: rgba(12, 10, 6, 0.7);4109  backdrop-filter: blur(4px);4110  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4111}41124113.peach-restore-intro-card {4114  width: 100%;4115  display: flex;4116  flex-direction: column;4117  gap: 12px;4118  padding: 22px 20px 20px;4119  border-radius: 16px;4120  border: 1px solid var(--peach-t3);4121  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));4122  backdrop-filter: blur(4px);4123  -webkit-backdrop-filter: blur(4px);4124  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);4125}41264127.peach-restore-intro-headline {4128  margin: 0;4129  font-family: var(--font-display);4130  font-style: italic;4131  font-size: 20px;4132  font-weight: 400;4133  color: var(--peach-t0);4134}41354136.peach-restore-intro-body {4137  display: flex;4138  flex-direction: column;4139  gap: 8px;4140}4141.peach-restore-intro-body p {4142  margin: 0;4143  font-size: 0.75rem;4144  color: var(--peach-t1);4145  line-height: 1.5;4146}41474148.peach-restore-intro-btn {4149  width: 100%;4150  margin-top: 4px;4151}41524153/* Snapshot restore panel */4154.peach-snapshot-panel {4155  gap: 10px;4156  overflow-y: auto;4157  max-height: 340px;4158}4159.peach-snapshot-list {4160  display: flex;4161  flex-direction: column;4162  gap: 4px;4163}4164.peach-snapshot-row {4165  display: flex;4166  align-items: center;4167  justify-content: space-between;4168  width: 100%;4169  padding: 8px 10px;4170  border-radius: 8px;4171  border: 1px solid rgba(240, 232, 216, 0.07);4172  background: transparent;4173  cursor: pointer;4174  transition: border-color 120ms, background 120ms;4175  text-align: left;4176  gap: 8px;4177}4178.peach-snapshot-row:hover {4179  border-color: rgba(240, 232, 216, 0.14);4180  background: rgba(240, 232, 216, 0.03);4181}4182.peach-snapshot-row.is-selected {4183  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4184  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);4185}4186.peach-snapshot-time {4187  font-size: 11.5px;4188  color: var(--peach-t0);4189  flex: 1;4190}4191.peach-snapshot-count {4192  font-family: "IBM Plex Mono", monospace;4193  font-size: 0.625rem;4194  color: var(--peach-t2);4195  flex-shrink: 0;4196}4197.peach-snapshot-confirm {4198  display: flex;4199  flex-direction: column;4200  gap: 8px;4201  padding-top: 10px;4202  border-top: 1px solid rgba(240, 232, 216, 0.06);4203}4204.peach-snapshot-warning {4205  display: flex;4206  align-items: flex-start;4207  gap: 6px;4208  font-size: 10.5px;4209  color: rgba(220, 80, 60, 0.85);4210  line-height: 1.55;4211}4212.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }4213.peach-snapshot-confirm-row {4214  display: flex;4215  gap: 6px;4216  align-items: center;4217}4218.peach-snapshot-restore-btn {4219  width: 100%;4220}4221.peach-lock-hero--unlock .peach-lock-hero-art {4222  width: 112px;4223  height: 112px;4224  right: 0;4225  top: 2px;4226  opacity: 0.1;4227}42284229.peach-card {4230  border: 1px solid var(--peach-t3);4231  border-radius: 18px;4232  background:4233    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4234  box-shadow:4235    inset 0 0 0 1px var(--peach-border-accent),4236    inset 0 1px 0 rgba(240, 232, 216, 0.04),4237    0 12px 32px rgba(0, 0, 0, 0.14);4238  overflow: hidden;4239}42404241.peach-card-active {4242  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4243  box-shadow:4244    inset 0 1px 0 rgba(240, 232, 216, 0.05),4245    0 16px 38px rgba(0, 0, 0, 0.18),4246    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4247}42484249.peach-card-disabled {4250  opacity: 0.72;4251}42524253.peach-card-header {4254  width: 100%;4255  padding: 13px 16px 11px;4256  background: transparent;4257  color: var(--peach-t0);4258  display: flex;4259  justify-content: space-between;4260  align-items: center;4261  text-align: left;4262  font-size: 0.75rem;4263}42644265.peach-card-body {4266  padding: 0 16px 16px;4267  display: grid;4268  gap: 9px;4269}42704271.peach-card-tag {4272  color: var(--peach-t2);4273  font-family: "IBM Plex Mono", monospace;4274  font-size: 0.5625rem;4275  letter-spacing: 0.12em;4276  text-transform: uppercase;4277}42784279.peach-empty-copy {4280  display: grid;4281  gap: 6px;4282  color: var(--peach-t1);4283  font-size: 0.8125rem;4284}42854286.peach-lock-submit {4287  width: 100%;4288  box-shadow:4289    0 1px 0 rgba(255,255,255,0.10) inset,4290    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4291    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4292    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4293}42944295.peach-lock-secondary {4296  width: 100%;4297  border-color: var(--peach-t3);4298  background: rgba(240, 232, 216, 0.02);4299}43004301.peach-lock-secondary:hover {4302  background: rgba(240, 232, 216, 0.04);4303}43044305.peach-lock-note {4306  max-width: none;4307  line-height: 1.55;4308  margin: 0;4309}43104311.peach-overlay-action {4312  font-size: 0.625rem;4313  padding: 4px 8px;4314  letter-spacing: 0.06em;4315  min-width: 44px;4316  text-align: center;4317}43184319.peach-inline-action {4320  flex-shrink: 0;4321  font-size: 0.5625rem;4322  letter-spacing: 0.1em;4323  text-transform: uppercase;4324  padding: 4px 7px;4325}4326.peach-password-toggle-btn {4327  display: inline-flex;4328  align-items: center;4329  justify-content: center;4330  min-width: 30px;4331  min-height: 26px;4332  padding: 0 7px;4333  border: 1px solid var(--peach-t3);4334  border-radius: 999px;4335  background: rgba(240, 232, 216, 0.04);4336  color: var(--peach-t2);4337  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4338}4339.peach-password-toggle-btn:hover {4340  border-color: var(--peach-t2);4341  color: var(--peach-t0);4342  background: rgba(240, 232, 216, 0.06);4343}43444345.peach-new-textarea {4346  width: 100%;4347  min-height: 88px;4348  resize: vertical;4349  border: 0;4350  outline: none;4351  background: transparent;4352  color: var(--peach-t1);4353  font-family: "IBM Plex Mono", monospace;4354  font-size: 0.75rem;4355  line-height: 1.65;4356  caret-color: var(--peach-accent);4357}43584359.peach-new-textarea::placeholder {4360  color: var(--peach-t2);4361  opacity: 0.7;4362}43634364.peach-settings-actions {4365  display: grid;4366  gap: 8px;4367}43684369.peach-sync-section-label {4370  font-size: 0.6875rem;4371  color: var(--peach-t2);4372  text-transform: uppercase;4373  letter-spacing: 0.05em;4374}43754376.peach-sync-network-note {4377  margin: 0 0 6px;4378  font-size: 0.75rem;4379  color: var(--peach-t2);4380  line-height: 1.4;4381}43824383.peach-settings-row--tappable {4384  background: none;4385  border: none;4386  width: 100%;4387  text-align: left;4388  cursor: pointer;4389  color: var(--peach-t1);4390  font-size: 0.8125rem;4391}4392.peach-settings-row--tappable:hover {4393  color: var(--peach-t0);4394}43954396.peach-sync-pro-hint {4397  display: flex;4398  flex-direction: column;4399  align-items: flex-start;4400  gap: 8px;4401  padding: 12px 0 4px;4402}44034404.peach-sync-device-row {4405  display: flex;4406  justify-content: space-between;4407  align-items: center;4408  padding: 6px 0;4409  border-bottom: 1px solid var(--peach-t3);4410}44114412.peach-sync-device-info {4413  display: flex;4414  flex-direction: column;4415  gap: 2px;4416}44174418.peach-sync-device-name {4419  font-size: 0.8125rem;4420  color: var(--peach-t0);4421}44224423.peach-sync-device-meta {4424  font-size: 0.6875rem;4425  color: var(--peach-t2);4426}44274428.peach-sync-status-dot {4429  display: inline-block;4430  width: 8px;4431  height: 8px;4432  border-radius: 50%;4433  vertical-align: middle;4434}44354436.peach-sync-remove-btn {4437  color: var(--peach-breach);4438}44394440.peach-sync-advanced-row {4441  display: flex;4442  justify-content: space-between;4443  align-items: center;4444  padding: 6px 0;4445  gap: 12px;4446}44474448.peach-sync-advanced-info {4449  display: flex;4450  flex-direction: column;4451  gap: 2px;4452  flex: 1;4453}44544455.peach-sync-advanced-name {4456  font-size: 0.8125rem;4457  color: var(--peach-t0);4458}44594460.peach-sync-reset-confirm {4461  display: flex;4462  flex-direction: column;4463  gap: 8px;4464  padding: 10px;4465  border: 1px solid var(--peach-breach);4466  border-radius: 10px;4467  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4468}44694470.peach-sync-reset-confirm-headline {4471  font-size: 0.8125rem;4472  font-weight: 600;4473  color: var(--peach-t0);4474  margin: 0;4475}44764477.peach-sync-reset-confirm-body {4478  font-size: 0.75rem;4479  color: var(--peach-t1);4480  margin: 0;4481  line-height: 1.4;4482}44834484.peach-btn--danger {4485  background: var(--peach-breach);4486  color: #fff;4487  border-color: var(--peach-breach);4488}4489.peach-btn--danger:hover:not(:disabled) {4490  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4491}4492.peach-btn--danger:disabled {4493  opacity: 0.55;4494  cursor: not-allowed;4495}44964497.peach-sync-hero-icon {4498  color: var(--peach-t1);4499  opacity: 0.85;4500}45014502.peach-import-preview {4503  margin-bottom: 12px;4504  max-height: 152px;4505  overflow-y: auto;4506  border: 1px solid var(--peach-t3);4507  border-radius: 10px;4508  padding: 8px 10px;4509  display: grid;4510  gap: 8px;4511  background: rgba(240, 232, 216, 0.02);4512}45134514.peach-import-preview-row {4515  display: flex;4516  justify-content: space-between;4517  gap: 10px;4518  font-size: 0.6875rem;4519  color: var(--peach-t1);4520}45214522.peach-import-preview-title {4523  color: var(--peach-t0);4524  flex: 1;4525  min-width: 0;4526  overflow: hidden;4527  text-overflow: ellipsis;4528  white-space: nowrap;4529}45304531.peach-import-preview-meta {4532  color: var(--peach-t2);4533  flex-shrink: 0;4534  max-width: 42%;4535  overflow: hidden;4536  text-overflow: ellipsis;4537  white-space: nowrap;4538}45394540.peach-import-preview-more {4541  color: var(--peach-t2);4542  font-size: 0.625rem;4543}45444545.peach-restore-copy {4546  margin: 0;4547  color: var(--peach-t1);4548  font-size: 0.6875rem;4549  line-height: 1.6;4550}45514552.peach-restore-warning {4553  padding: 10px 12px;4554  border-radius: 12px;4555  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4556  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4557  color: var(--peach-t0);4558  font-size: 0.6875rem;4559  line-height: 1.55;4560}45614562.peach-provider-chips {4563  display: flex;4564  flex-wrap: wrap;4565  gap: 6px;4566}45674568.peach-provider-chip {4569  display: inline-flex;4570  align-items: center;4571  padding: 5px 8px;4572  border-radius: 999px;4573  border: 1px solid var(--peach-t3);4574  background: rgba(240, 232, 216, 0.02);4575  color: var(--peach-t1);4576  font-family: "IBM Plex Mono", monospace;4577  font-size: 0.5rem;4578  letter-spacing: 0.08em;4579  text-transform: uppercase;4580}45814582.peach-restore-file,4583.peach-restore-input {4584  width: 100%;4585  border-radius: 10px;4586  border: 1px solid var(--peach-t3);4587  background: var(--peach-s2);4588  color: var(--peach-t0);4589  font-size: 0.75rem;4590}45914592.peach-restore-file {4593  padding: 9px 10px;4594}45954596.peach-restore-file::file-selector-button {4597  margin-right: 10px;4598  padding: 7px 10px;4599  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4600  border-radius: 999px;4601  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4602  color: var(--peach-t0);4603  font-size: 0.625rem;4604  letter-spacing: 0.08em;4605  text-transform: uppercase;4606  cursor: pointer;4607}46084609.peach-restore-input {4610  padding: 10px 12px;4611}46124613.peach-auth-grid {4614  display: grid;4615  gap: 10px;4616}46174618.peach-import-summary {4619  color: var(--peach-t1);4620  font-size: 0.75rem;4621  line-height: 1.6;4622  margin-bottom: 12px;4623}46244625.peach-restore-error {4626  color: rgba(220, 80, 60, 0.95);4627  font-size: 0.75rem;4628  line-height: 1.55;4629}46304631.peach-passkey-card {4632  max-width: 400px;4633  margin: auto 16px;4634  align-self: center;4635  width: calc(100% - 32px);4636}46374638/* Center the approval card vertically inside the overlay-view (which sets4639 * flex-direction: column without justify-content). Without this, the card4640 * sits at the top with a tall empty band below — looks unfinished on the4641 * 320px popup. */4642.peach-overlay-view:has(.peach-passkey-card) {4643  justify-content: center;4644}46454646.peach-pro-badge {4647  padding: 2px 6px;4648  border-radius: 999px;4649  font-family: var(--font-ui);4650  font-size: 0.625rem;4651  letter-spacing: 0.08em;4652  text-transform: uppercase;4653  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4654  color: var(--peach-accent);4655}46564657/* ── Shortcuts rebind table ─────────────────────────────────── */4658.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4659.peach-shortcut-row {4660  display: flex;4661  align-items: center;4662  gap: 10px;4663  padding: 6px 0;4664}4665.peach-shortcut-row-label {4666  flex: 1;4667  font-size: 0.75rem;4668  color: var(--peach-t0);4669}4670.peach-shortcut-chip {4671  min-width: 64px;4672  padding: 4px 10px;4673  border-radius: 6px;4674  border: 1px solid var(--peach-t3);4675  background: var(--peach-input-bg, var(--surface-card));4676  color: var(--peach-t0);4677  font-family: var(--font-mono);4678  font-size: 0.6875rem;4679  letter-spacing: 0.04em;4680  cursor: pointer;4681  text-align: center;4682  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4683}4684.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4685.peach-shortcut-chip.is-custom {4686  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4687  color: var(--peach-accent);4688}4689.peach-shortcut-chip.is-capturing {4690  border-color: var(--peach-accent);4691  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4692  color: var(--peach-accent);4693  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4694}4695@keyframes peach-shortcut-capture-pulse {4696  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4697  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4698}4699.peach-shortcut-reset {4700  background: transparent;4701  border: none;4702  cursor: pointer;4703  color: var(--peach-t2);4704  padding: 4px 6px;4705  border-radius: 5px;4706  font-size: 0.875rem;4707  line-height: 1;4708  transition: color 120ms ease, background 120ms ease;4709}4710.peach-shortcut-reset:hover {4711  color: var(--peach-t0);4712  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4713}4714.peach-shortcuts-conflict {4715  margin: 4px 0 0;4716  padding: 8px 10px;4717  border-radius: 7px;4718  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4719  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4720  font-family: var(--font-mono);4721  font-size: 0.6875rem;4722  color: var(--peach-t0);4723}47244725/* ── Help dialog overlay (? to open) ────────────────────────── */4726.peach-shortcuts-help-backdrop {4727  position: fixed;4728  inset: 0;4729  background: rgba(0, 0, 0, 0.55);4730  backdrop-filter: blur(2px);4731  display: flex;4732  align-items: center;4733  justify-content: center;4734  z-index: 1000;4735  animation: peach-help-fade-in 140ms ease forwards;4736}4737@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4738.peach-shortcuts-help-card {4739  width: min(320px, 92vw);4740  max-height: 80vh;4741  overflow-y: auto;4742  border-radius: 14px;4743  border: 1px solid var(--peach-t3);4744  background: var(--peach-bg);4745  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4746  padding: 16px 18px 18px;4747  display: flex;4748  flex-direction: column;4749  gap: 12px;4750}4751.peach-shortcuts-help-head {4752  display: flex; align-items: center; justify-content: space-between;4753}4754.peach-shortcuts-help-head h3 {4755  margin: 0;4756  font-family: var(--font-display);4757  font-style: italic;4758  font-weight: 400;4759  font-size: 22px;4760  color: var(--peach-t0);4761}4762.peach-shortcuts-help-close {4763  background: transparent;4764  border: none;4765  color: var(--peach-t2);4766  cursor: pointer;4767  font-size: 0.875rem;4768  padding: 4px 8px;4769  border-radius: 5px;4770}4771.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4772.peach-shortcuts-help-body ul {4773  list-style: none; padding: 0; margin: 4px 0 12px;4774  display: grid; gap: 8px;4775}4776.peach-shortcuts-help-body li {4777  display: flex; align-items: center; justify-content: space-between; gap: 12px;4778  font-size: 0.75rem; color: var(--peach-t0);4779}4780.peach-shortcuts-help-body kbd {4781  font-family: var(--font-mono);4782  font-size: 0.6875rem;4783  padding: 3px 8px;4784  border-radius: 6px;4785  background: var(--surface-card);4786  border: 1px solid var(--peach-t3);4787  color: var(--peach-accent);4788  letter-spacing: 0.04em;4789}47904791/* ── Pro promo on Account screen ────────────────────────────── */4792.peach-pro-promo {4793  position: relative;4794  border-radius: 14px;4795  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4796  background:4797    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4798    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4799    var(--surface-card);4800  overflow: hidden;4801  margin-bottom: 14px;4802}4803.peach-pro-promo-glow {4804  position: absolute;4805  inset: -40% -20% auto auto;4806  width: 220px; height: 220px;4807  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4808  pointer-events: none;4809  filter: blur(8px);4810}4811.peach-pro-promo-inner {4812  position: relative;4813  padding: 18px 18px 16px;4814}4815.peach-pro-promo-title {4816  font-family: var(--font-display);4817  font-style: italic;4818  font-weight: 400;4819  font-size: 28px;4820  line-height: 1;4821  letter-spacing: -0.005em;4822  color: var(--peach-t0);4823  margin: 0 0 4px;4824}4825.peach-pro-promo-tagline {4826  font-family: var(--font-mono);4827  font-size: 0.625rem;4828  letter-spacing: 0.06em;4829  color: var(--peach-t2);4830  margin: 0 0 14px;4831}4832.peach-pro-promo-list {4833  list-style: none;4834  margin: 0 0 16px;4835  padding: 0;4836  display: grid;4837  gap: 9px;4838}4839.peach-pro-promo-list li {4840  display: flex;4841  align-items: flex-start;4842  gap: 9px;4843  font-size: 0.75rem;4844  color: var(--peach-t1);4845  line-height: 1.4;4846}4847.peach-pro-promo-list svg {4848  width: 14px;4849  height: 14px;4850  flex-shrink: 0;4851  color: var(--peach-accent);4852  margin-top: 2px;4853}4854.peach-pro-promo-list span {4855  color: var(--peach-t0);4856}4857.peach-pro-promo-cta {4858  width: 100%;4859  background: var(--peach-accent);4860  color: #fff;4861  border: none;4862  padding: 9px 12px;4863  border-radius: 9px;4864  font-size: 0.75rem;4865  font-weight: 500;4866  font-family: var(--font-ui);4867  letter-spacing: 0.02em;4868  text-decoration: none;4869  display: inline-flex;4870  align-items: center;4871  justify-content: center;4872  cursor: pointer;4873  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4874  box-shadow: 0 2px 16px var(--peach-glow);4875}4876.peach-pro-promo-cta:hover {4877  filter: brightness(1.07);4878  box-shadow: 0 4px 24px var(--peach-glow);4879  transform: translateY(-1px);4880}4881.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }48824883.peach-pro-or-divider {4884  display: flex;4885  align-items: center;4886  gap: 10px;4887  margin: 4px 0 12px;4888  font-family: var(--font-mono);4889  font-size: 0.625rem;4890  letter-spacing: 0.06em;4891  color: var(--peach-t2);4892  text-transform: uppercase;4893}4894.peach-pro-or-divider::before,4895.peach-pro-or-divider::after {4896  content: "";4897  flex: 1;4898  height: 1px;4899  background: var(--peach-t3);4900}49014902.peach-loading {4903  position: absolute;4904  inset: 0;4905  display: flex;4906  align-items: center;4907  justify-content: center;4908  background: var(--bg);4909  animation: peach-loading-pulse 1.2s ease-in-out infinite;4910}49114912@keyframes peach-loading-pulse {4913  0%, 100% { opacity: 0.6; }4914  50% { opacity: 1; }4915}49164917/* ── Health Dashboard ─────────────────────────────────────────────────── */4918.peach-health-body {4919  flex: 1;4920  overflow-y: auto;4921  display: flex;4922  flex-direction: column;4923  /* Hide the platform scrollbar — every other scrollable surface in the4924   * popup hides it; the Health view was the one outlier and it ruined the4925   * polish. Behavior unchanged, just no rail rendered. */4926  scrollbar-width: none;4927  -ms-overflow-style: none;4928}4929.peach-health-body::-webkit-scrollbar { display: none; }49304931/* Loading screen for the Vault Health view. The advanced report computation4932 * can run for a few seconds on a large vault — without a clear loading4933 * screen the surface looked broken (the entry view bleeds through the4934 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4935.peach-health-loading-screen {4936  flex: 1;4937  display: flex;4938  flex-direction: column;4939  align-items: center;4940  justify-content: center;4941  gap: 14px;4942  padding: 32px 28px;4943  text-align: center;4944}49454946.peach-health-loading-glyph {4947  width: 48px;4948  height: 48px;4949  display: flex;4950  align-items: center;4951  justify-content: center;4952  border-radius: 14px;4953  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4954  color: var(--peach-accent);4955}49564957.peach-health-loading-title {4958  margin: 0;4959  font-family: var(--font-display);4960  font-style: italic;4961  font-weight: 300;4962  font-size: 19px;4963  line-height: 1.2;4964  color: var(--peach-t0);4965}49664967.peach-health-loading-copy {4968  margin: 0;4969  max-width: 240px;4970  font-size: 0.75rem;4971  line-height: 1.55;4972  color: var(--peach-t2);4973}49744975.peach-health-loading-track {4976  width: 200px;4977  height: 3px;4978  margin-top: 6px;4979  border-radius: 999px;4980  background: rgba(240, 232, 216, 0.06);4981  overflow: hidden;4982}49834984.peach-health-loading-fill {4985  width: 40%;4986  height: 100%;4987  border-radius: inherit;4988  background: linear-gradient(4989    90deg,4990    transparent 0%,4991    var(--peach-accent) 50%,4992    transparent 100%4993  );4994  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4995}49964997@keyframes peach-health-loading-sweep {4998  0%   { transform: translateX(-100%); }4999  100% { transform: translateX(350%); }5000}50015002[data-motion="reduce"] .peach-health-loading-fill,5003[data-motion="reduce"] .peach-health-loading-glyph svg path {5004  animation: none;5005}50065007.peach-health-summary {5008  padding: 10px 16px 6px;5009  font-family: "IBM Plex Mono", monospace;5010  font-size: 0.6875rem;5011}5012.peach-health-summary-warn { color: rgba(220,80,60,0.9); }5013.peach-health-summary-ok { color: var(--peach-t2); }50145015.peach-health-check-row {5016  padding: 0 16px 10px;5017}5018.peach-health-check-btn {5019  width: 100%;5020  display: flex;5021  align-items: center;5022  justify-content: center;5023}50245025.peach-health-sections {5026  flex: 1;5027  display: flex;5028  flex-direction: column;5029}50305031.peach-health-section {5032  border-bottom: 1px solid var(--peach-t3);5033}50345035.peach-health-section-header {5036  width: 100%;5037  display: flex;5038  align-items: center;5039  justify-content: space-between;5040  padding: 9px 16px;5041  background: transparent;5042  cursor: pointer;5043  color: var(--peach-t0);5044}50455046.peach-health-section-title-row {5047  display: flex;5048  align-items: center;5049  gap: 8px;5050}50515052.peach-health-count-badge {5053  display: inline-flex;5054  align-items: center;5055  justify-content: center;5056  min-width: 20px;5057  height: 18px;5058  padding: 0 5px;5059  border-radius: 999px;5060  background: rgba(220,80,60,0.15);5061  border: 1px solid rgba(220,80,60,0.25);5062  font-family: "IBM Plex Mono", monospace;5063  font-size: 0.5625rem;5064  color: rgba(220,80,60,0.9);5065}50665067.peach-health-section-title {5068  font-family: "IBM Plex Mono", monospace;5069  font-size: 0.6875rem;5070  text-transform: uppercase;5071  letter-spacing: 0.1em;5072  color: var(--peach-t1);5073}50745075.peach-health-chevron {5076  color: var(--peach-t2);5077  transition: transform 200ms ease;5078  flex-shrink: 0;5079}5080.peach-health-chevron.is-expanded {5081  transform: rotate(180deg);5082}50835084.peach-health-section-body {5085  padding: 0 16px 10px;5086  display: flex;5087  flex-direction: column;5088  gap: 4px;5089}50905091.peach-health-row {5092  display: flex;5093  align-items: flex-start;5094  justify-content: space-between;5095  gap: 8px;5096  padding: 6px 8px;5097  border-radius: 8px;5098  background: rgba(240,232,216,0.02);5099}51005101.peach-health-row-info {5102  flex: 1;5103  min-width: 0;5104  display: flex;5105  flex-direction: column;5106  gap: 2px;5107}51085109.peach-health-row-name {5110  font-family: var(--font-display);5111  font-size: 0.9375rem;5112  font-style: italic;5113  font-weight: 400;5114  color: var(--peach-t0);5115  white-space: nowrap;5116  overflow: hidden;5117  text-overflow: ellipsis;5118}51195120.peach-health-row-meta {5121  font-family: "IBM Plex Mono", monospace;5122  font-size: 0.5625rem;5123  color: var(--peach-t2);5124  letter-spacing: 0.05em;5125}51265127.peach-health-fix-btn {5128  font-size: 0.5625rem;5129  letter-spacing: 0.08em;5130  text-transform: uppercase;5131  padding: 4px 7px;5132  flex-shrink: 0;5133  display: flex;5134  align-items: center;5135}51365137.peach-health-empty {5138  font-family: "IBM Plex Mono", monospace;5139  font-size: 0.625rem;5140  color: var(--peach-t2);5141  padding: 6px 0;5142}51435144.peach-health-loading {5145  font-family: "IBM Plex Mono", monospace;5146  font-size: 0.625rem;5147  color: var(--peach-t2);5148  padding: 6px 0;5149  display: flex;5150  align-items: center;5151  gap: 6px;5152}51535154.peach-health-loading::before {5155  content: "";5156  width: 10px;5157  height: 10px;5158  border: 1.5px solid var(--peach-t3);5159  border-top-color: var(--peach-accent);5160  border-radius: 50%;5161  animation: peach-spin 600ms linear infinite;5162}51635164@keyframes peach-spin {5165  to { transform: rotate(360deg); }5166}51675168.peach-spinner {5169  width: 32px;5170  height: 32px;5171  border: 2px solid var(--peach-s2);5172  border-top-color: var(--peach-accent);5173  border-radius: 50%;5174  margin: 0 auto 16px;5175  animation: peach-spin 0.8s linear infinite;5176}51775178.peach-progress-screen {5179  text-align: center;5180  padding: 32px 16px;5181}51825183.peach-progress-screen-title {5184  font-size: 0.8125rem;5185  color: var(--peach-t0);5186  margin-bottom: 16px;5187}51885189.peach-progress-screen-stage {5190  font-size: 0.6875rem;5191  color: var(--peach-t2);5192  min-height: 14px;5193}51945195.peach-progress-screen-note {5196  font-size: 0.625rem;5197  color: var(--peach-t2);5198  margin-top: 8px;5199}52005201.peach-pairing-body {5202  flex: 1;5203  overflow-y: auto;5204  display: flex;5205  flex-direction: column;5206}52075208.peach-pairing-content {5209  flex: 1;5210  display: flex;5211  flex-direction: column;5212  align-items: center;5213  justify-content: center;5214  gap: 14px;5215  padding: 28px 20px;5216  text-align: center;5217}52185219.peach-pairing-code-screen {5220  gap: 18px;5221}52225223.peach-pairing-headline {5224  font-family: var(--font-display);5225  font-style: italic;5226  font-weight: 300;5227  font-size: 28px;5228  color: var(--peach-t0);5229  margin: 0;5230  line-height: 1;5231}52325233.peach-pairing-subline {5234  font-size: 0.75rem;5235  color: var(--peach-t2);5236  max-width: 220px;5237  line-height: 1.5;5238  margin: 0;5239}52405241.peach-pairing-subline--center {5242  text-align: center;5243}52445245/* 6-digit pairing code — both display (.peach-pairing-code) and entry5246   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking5247   so the two modes feel like the same surface. */5248.peach-pairing-code {5249  font-family: "IBM Plex Mono", monospace;5250  font-size: 36px;5251  letter-spacing: 0.25em;5252  color: var(--peach-t0);5253  text-align: center;5254  padding: 24px 0;5255  text-shadow:5256    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),5257    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);5258  background: transparent;5259  border: 0;5260  cursor: default;5261  user-select: text;5262}52635264.peach-pairing-code--loading,5265.peach-pairing-code--expired {5266  font-size: 18px;5267  letter-spacing: 0.04em;5268  color: var(--peach-t2);5269  cursor: pointer;5270  text-shadow: none;5271}52725273.peach-pairing-qr-container {5274  display: flex;5275  flex-direction: column;5276  align-items: center;5277  gap: 10px;5278}52795280.peach-pairing-qr {5281  width: 240px;5282  height: 240px;5283  display: block;5284}52855286.peach-pairing-instruction {5287  font-size: 0.75rem;5288  color: var(--peach-t2);5289  text-align: center;5290  line-height: 1.5;5291  margin: 0;5292  max-width: 220px;5293}52945295.peach-pairing-expiry {5296  font-family: "IBM Plex Mono", monospace;5297  font-size: 13px;5298  letter-spacing: 0.06em;5299  color: var(--peach-t2);5300  margin: 0;5301}53025303.peach-pairing-regen {5304  font-size: 0.75rem;5305  color: var(--peach-accent);5306  background: transparent;5307  border: 0;5308  cursor: pointer;5309  padding: 4px 0;5310  text-decoration: underline;5311  text-underline-offset: 2px;5312}53135314.peach-pairing-code-input {5315  font-family: "IBM Plex Mono", monospace;5316  font-size: 36px;5317  letter-spacing: 0.25em;5318  color: var(--peach-t0);5319  background: transparent;5320  border: 0;5321  border-bottom: 1px solid var(--peach-t3);5322  outline: none;5323  text-align: center;5324  padding: 18px 0;5325  width: 220px;5326  caret-color: var(--peach-accent);5327  transition: border-color 160ms ease;5328}53295330.peach-pairing-code-input::placeholder {5331  color: var(--peach-t3);5332}53335334.peach-pairing-code-input:focus {5335  border-bottom-color: var(--peach-accent);5336}53375338.peach-pairing-toggle {5339  background: transparent;5340  border: 0;5341  color: var(--peach-t2);5342  font-size: 0.75rem;5343  padding: 8px 4px;5344  cursor: pointer;5345  transition: color 120ms ease;5346}53475348.peach-pairing-toggle:hover:not(:disabled) {5349  color: var(--peach-t1);5350}53515352.peach-pairing-toggle:disabled {5353  opacity: 0.5;5354  cursor: default;5355}53565357.peach-pairing-hint {5358  font-size: 0.6875rem;5359  color: var(--peach-t2);5360  margin: 0;5361  text-align: center;5362}53635364.peach-pairing-status {5365  display: flex;5366  align-items: center;5367  gap: 8px;5368  margin: 0;5369  font-size: 0.75rem;5370  color: var(--peach-t1);5371}53725373.peach-pairing-error {5374  margin: 0;5375  font-size: 0.6875rem;5376  color: var(--peach-breach);5377}53785379.peach-pairing-error--muted {5380  color: var(--peach-t2);5381}53825383.peach-pairing-spinner {5384  width: 12px;5385  height: 12px;5386  border: 1.5px solid var(--peach-t3);5387  border-top-color: var(--peach-accent);5388  border-radius: 50%;5389  animation: peach-spin 0.8s linear infinite;5390}53915392.peach-pairing-success-icon,5393.peach-pairing-error-icon,5394.peach-pairing-hero {5395  display: inline-flex;5396  align-items: center;5397  justify-content: center;5398}53995400/* Tag chips */5401.peach-tag-chip {5402  display: inline-flex;5403  align-items: center;5404  gap: 4px;5405  padding: 3px 8px;5406  border-radius: 999px;5407  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5408  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5409  color: var(--peach-t0);5410  font-family: "IBM Plex Mono", monospace;5411  font-size: 0.625rem;5412  letter-spacing: 0.04em;5413}54145415.peach-tag-chip-remove {5416  background: transparent;5417  border: none;5418  color: inherit;5419  opacity: 0.6;5420  cursor: pointer;5421  padding: 0;5422  font-size: 0.75rem;5423  line-height: 1;5424}54255426.peach-tag-chip-remove:hover {5427  opacity: 1;5428}54295430/* Tag input */5431.peach-tag-input-wrap {5432  border-bottom: 1px solid var(--peach-t3);5433}54345435.peach-tag-suggestions {5436  display: flex;5437  flex-wrap: wrap;5438  gap: 4px;5439  padding: 6px 0;5440}54415442.peach-tag-suggestion {5443  padding: 2px 8px;5444  border-radius: 999px;5445  border: 1px solid var(--peach-t3);5446  background: var(--peach-s2);5447  color: var(--peach-t1);5448  font-family: "IBM Plex Mono", monospace;5449  font-size: 0.625rem;5450  cursor: pointer;5451  transition: border-color 80ms ease, background 80ms ease;5452}54535454.peach-tag-suggestion:hover {5455  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5456  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5457}54585459/* Identity suggestions — shown below username/email inputs in new-entry form */5460@keyframes peach-suggest-in {5461  from { opacity: 0; transform: translateY(-4px); }5462  to   { opacity: 1; transform: none; }5463}54645465.peach-identity-suggestions {5466  display: flex;5467  flex-direction: column;5468  gap: 1px;5469  margin-top: 4px;5470  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5471}54725473.peach-identity-filter-row {5474  display: flex;5475  align-items: center;5476  gap: 4px;5477  padding: 2px 0 5px;5478}54795480.peach-identity-collapse-btn {5481  margin-left: auto;5482  background: transparent;5483  border: none;5484  cursor: pointer;5485  color: var(--peach-t3);5486  padding: 2px 4px;5487  display: flex;5488  align-items: center;5489  line-height: 0;5490  border-radius: 3px;5491  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5492}54935494.peach-identity-collapse-btn:hover {5495  color: var(--peach-t1);5496}54975498.peach-identity-collapse-btn.is-collapsed {5499  transform: rotate(-90deg);5500}55015502.peach-identity-rows {5503  display: grid;5504  grid-template-rows: 1fr;5505  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5506}55075508.peach-identity-rows.is-collapsed {5509  grid-template-rows: 0fr;5510}55115512.peach-identity-rows-inner {5513  overflow-y: auto;5514  min-height: 0;5515  max-height: 148px;5516  scrollbar-width: thin;5517  scrollbar-color: var(--peach-t3) transparent;5518  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5519  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5520}55215522.peach-identity-rows-inner::-webkit-scrollbar {5523  width: 4px;5524}55255526.peach-identity-rows-inner::-webkit-scrollbar-track {5527  background: transparent;5528}55295530.peach-identity-rows-inner::-webkit-scrollbar-thumb {5531  background: var(--peach-t3);5532  border-radius: 2px;5533}55345535.peach-identity-filter-pill {5536  padding: 2px 7px;5537  border-radius: 999px;5538  border: 1px solid var(--peach-t3);5539  background: transparent;5540  color: var(--peach-t2);5541  font-family: "IBM Plex Mono", monospace;5542  font-size: 0.6rem;5543  cursor: pointer;5544  transition: border-color 80ms, background 80ms, color 80ms;5545}55465547.peach-identity-filter-pill.is-on {5548  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5549  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5550  color: var(--peach-accent);5551}55525553.peach-identity-suggestion {5554  display: flex;5555  align-items: center;5556  gap: 6px;5557  width: 100%;5558  padding: 4px 6px;5559  border-radius: 5px;5560  border: none;5561  background: transparent;5562  cursor: pointer;5563  text-align: left;5564  transition: background 80ms ease;5565}55665567.peach-identity-suggestion:hover,5568.peach-identity-suggestion:focus {5569  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5570  outline: none;5571}55725573.peach-identity-suggestion-value {5574  font-family: "IBM Plex Mono", monospace;5575  font-size: 0.7rem;5576  color: var(--peach-t1);5577  overflow: hidden;5578  text-overflow: ellipsis;5579  white-space: nowrap;5580  flex: 1;5581  min-width: 0;5582}55835584.peach-identity-suggestion-type {5585  font-family: "IBM Plex Mono", monospace;5586  font-size: 0.55rem;5587  font-weight: 600;5588  flex-shrink: 0;5589  padding: 1px 4px;5590  border-radius: 3px;5591}55925593.peach-identity-suggestion-type--email {5594  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5595  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5596}55975598.peach-identity-suggestion-type--username {5599  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5600  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5601}56025603.peach-identity-suggestion-meta {5604  font-family: "IBM Plex Mono", monospace;5605  font-size: 0.6rem;5606  color: var(--peach-t3);5607  flex-shrink: 0;5608}56095610/* Tag filter strip */5611.peach-tag-filter-strip {5612  border-bottom: 1px solid var(--peach-t3);5613  flex-shrink: 0;5614}56155616.peach-tag-filter-chip {5617  display: inline-flex;5618  align-items: center;5619  padding: 4px 10px;5620  border-radius: 999px;5621  border: 1px solid var(--peach-t3);5622  background: transparent;5623  color: var(--peach-t2);5624  font-family: "IBM Plex Mono", monospace;5625  font-size: 0.5625rem;5626  letter-spacing: 0.06em;5627  text-transform: uppercase;5628  cursor: pointer;5629  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5630  white-space: nowrap;5631}56325633.peach-tag-filter-chip:hover {5634  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5635  color: var(--peach-t1);5636}56375638.peach-tag-filter-chip.is-selected {5639  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5640  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5641  color: var(--peach-t0);5642}56435644/* ─────────────────────────────────────────────────────────────────────────5645   v1.4.12 additions5646   ─────────────────────────────────────────────────────────────────────── */56475648/* Sort bar */5649.peach-sort-bar {5650  display: flex;5651  align-items: center;5652  gap: 4px;5653  padding: 5px 12px;5654  border-bottom: 1px solid var(--peach-t3);5655  flex-shrink: 0;5656  overflow-x: auto;5657  scrollbar-width: none;5658}56595660.peach-sort-btn {5661  padding: 2px 9px;5662  border-radius: 999px;5663  border: 1px solid transparent;5664  background: transparent;5665  color: var(--peach-t2);5666  font-family: "IBM Plex Mono", monospace;5667  font-size: 0.5625rem;5668  letter-spacing: 0.07em;5669  text-transform: uppercase;5670  cursor: pointer;5671  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5672  white-space: nowrap;5673}56745675.peach-sort-btn:hover {5676  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5677  color: var(--peach-t1);5678}56795680.peach-sort-btn.is-active {5681  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5682  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5683  color: var(--peach-t0);5684}56855686.peach-sort-scope-btn {5687  padding-inline: 8px;5688  font-size: 0.53125rem;5689  letter-spacing: 0.05em;5690}56915692.peach-sort-domain-hint {5693  margin-left: auto;5694  font-family: "IBM Plex Mono", monospace;5695  font-size: 0.5625rem;5696  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5697  white-space: nowrap;5698  overflow: hidden;5699  text-overflow: ellipsis;5700  max-width: 110px;5701}57025703/* Tab-match badge on entry rows */5704.peach-tab-match-badge {5705  display: inline-block;5706  width: 6px;5707  height: 6px;5708  border-radius: 50%;5709  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5710  margin-left: 5px;5711  vertical-align: middle;5712  flex-shrink: 0;5713  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5714}57155716.peach-entry-row.is-tab-match {5717  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5718  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5719}57205721.peach-entry-row.is-tab-match:hover {5722  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5723}57245725/* Entry list stagger entrance */5726@keyframes peach-entry-fadein {5727  from { opacity: 0; transform: translateY(4px); }5728  to   { opacity: 1; transform: translateY(0); }5729}57305731.peach-vault-list .peach-entry-row {5732  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5733}57345735/* Button press micro-interaction */5736.peach-btn:active {5737  transform: scale(0.95);5738  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5739}57405741.peach-sort-btn:active,5742.peach-tag-filter-chip:active {5743  transform: scale(0.93);5744  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5745}57465747/* Password strength bar (Lock view + shared) */5748.peach-password-strength {5749  display: flex;5750  align-items: center;5751  gap: 8px;5752  margin-top: 6px;5753}57545755.peach-strength-bar {5756  flex: 1;5757  height: 3px;5758  border-radius: 2px;5759  background: var(--peach-t3);5760  overflow: hidden;5761}57625763.peach-strength-fill {5764  height: 100%;5765  border-radius: 2px;5766  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5767              background 300ms ease;5768}57695770.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5771.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5772.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5773.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }57745775.peach-strength-label {5776  font-family: "IBM Plex Mono", monospace;5777  font-style: italic;5778  font-size: 0.5625rem;5779  font-weight: 300;5780  letter-spacing: 0.06em;5781  color: var(--peach-t2);5782  min-width: 36px;5783  text-align: right;5784}57855786.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5787.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5788.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5789.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }57905791/* Duress form */5792.peach-duress-status {5793  padding: 2px 8px;5794  border-radius: 999px;5795  border: 1px solid var(--peach-t3);5796  font-family: "IBM Plex Mono", monospace;5797  font-size: 0.5625rem;5798  letter-spacing: 0.07em;5799  text-transform: uppercase;5800  color: var(--peach-t2);5801  flex-shrink: 0;5802}58035804.peach-duress-status.is-active {5805  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5806  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5807  color: var(--peach-t0);5808}58095810.peach-duress-form {5811  padding: 8px 0 4px;5812  display: flex;5813  flex-direction: column;5814  gap: 6px;5815}58165817.peach-duress-form .peach-label {5818  margin-top: 4px;5819}58205821.peach-duress-actions {5822  display: flex;5823  gap: 6px;5824  align-items: center;5825  margin-top: 4px;5826}58275828.peach-duress-actions .peach-btn:first-child {5829  margin-right: auto;5830}58315832/* Improved overlay spring entrance */5833.peach-overlay-view.ov-enter-up {5834  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5835}58365837@keyframes ov-enter-up-spring {5838  from { opacity: 0; transform: translateY(16px) scale(0.98); }5839  to   { opacity: 1; transform: translateY(0) scale(1); }5840}58415842.peach-overlay-view.ov-enter-right {5843  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5844}58455846@keyframes ov-enter-right-spring {5847  from { opacity: 0; transform: translateX(18px) scale(0.98); }5848  to   { opacity: 1; transform: translateX(0) scale(1); }5849}58505851/* ── Onboarding-mode restore screens (file import) ── */5852/* Used when MainImportView renders during onboarding (no vault yet).5853   Animates like a lock-screen transition. */5854.peach-lock-view {5855  position: absolute;5856  inset: 0;5857  display: flex;5858  flex-direction: column;5859  background:5860    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5861    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5862    var(--peach-bg);5863  z-index: 2;5864  overflow: hidden;5865  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5866}58675868.peach-lock-view-header {5869  display: flex;5870  align-items: center;5871  justify-content: space-between;5872  padding: 16px 18px 12px;5873  flex-shrink: 0;5874}58755876/* ───────── Settings: auto-lock select ───────── */5877.peach-settings-select {5878  font-family: "IBM Plex Mono", monospace;5879  font-size: 0.6875rem;5880  background: transparent;5881  border: 1px solid var(--peach-t3);5882  border-radius: 4px;5883  color: var(--peach-t1);5884  padding: 3px 6px;5885  cursor: pointer;5886  outline: none;5887}5888.peach-settings-select:focus {5889  border-color: var(--peach-accent);5890}58915892/* ───────── Duress status pill (new polished) ───────── */5893.peach-duress-status-pill {5894  font-family: "IBM Plex Mono", monospace;5895  font-size: 0.5625rem;5896  text-transform: uppercase;5897  letter-spacing: 0.12em;5898  padding: 2px 8px;5899  border-radius: 12px;5900  background: var(--peach-t3);5901  color: var(--peach-t2);5902  flex-shrink: 0;5903}5904.peach-duress-status-pill.is-active {5905  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5906  color: var(--peach-accent);5907}59085909/* ───────── Entry advanced disclosure (canary) ───────── */5910.peach-entry-advanced {5911  margin-top: 12px;5912  border-top: 1px solid var(--peach-t3);5913  padding-top: 10px;5914  position: relative;5915  z-index: 1;5916}5917.peach-entry-advanced-toggle {5918  display: flex;5919  align-items: center;5920  justify-content: space-between;5921  width: 100%;5922  background: transparent;5923  border: none;5924  cursor: pointer;5925  padding: 0;5926  color: var(--peach-t2);5927}5928.peach-canary-section {5929  margin-top: 10px;5930  display: grid;5931  gap: 6px;5932}59335934/* ───────── Import: merge/replace radio choices ───────── */5935.peach-import-choice {5936  display: flex;5937  align-items: flex-start;5938  gap: 10px;5939  padding: 8px 10px;5940  border: 1px solid var(--peach-t3);5941  border-radius: 10px;5942  cursor: pointer;5943  margin-bottom: 6px;5944  transition: border-color 120ms ease, background 120ms ease;5945}5946.peach-import-choice:hover {5947  border-color: var(--peach-accent);5948}5949.peach-import-choice input[type="radio"] {5950  margin-top: 3px;5951  accent-color: var(--peach-accent);5952  flex-shrink: 0;5953}5954.peach-import-choice-main {5955  display: flex;5956  flex-direction: column;5957  gap: 2px;5958  min-width: 0;5959}5960.peach-import-choice-label {5961  font-size: 0.75rem;5962  color: var(--peach-t0);5963}5964.peach-import-choice-sub {5965  font-size: 0.6875rem;5966  color: var(--peach-t2);5967  line-height: 1.5;5968}59695970/* ───────── Export: success confirmation strip ───────── */5971.peach-export-success {5972  display: flex;5973  align-items: flex-start;5974  gap: 10px;5975  padding: 12px;5976  border-radius: 12px;5977  border: 1px solid rgba(150, 175, 110, 0.3);5978  background: rgba(150, 175, 110, 0.08);5979  color: var(--peach-t0);5980  font-size: 0.75rem;5981  line-height: 1.55;5982}5983.peach-export-success-check {5984  color: rgba(150, 175, 110, 0.9);5985  font-size: 0.875rem;5986  flex-shrink: 0;5987}59885989/* ── Trash view ──────────────────────────────────────────────────────── */5990.peach-trash-entry-row {5991  display: flex;5992  align-items: center;5993  justify-content: space-between;5994  gap: 8px;5995  padding: 8px 0;5996  border-bottom: 1px solid var(--peach-border);5997}5998.peach-trash-entry-info {5999  flex: 1;6000  min-width: 0;6001  display: flex;6002  flex-direction: column;6003  gap: 2px;6004}6005.peach-trash-entry-title {6006  font-size: 0.8125rem;6007  color: var(--peach-t0);6008  overflow: hidden;6009  text-overflow: ellipsis;6010  white-space: nowrap;6011}6012.peach-trash-entry-meta {6013  font-family: var(--font-mono);6014  font-size: 0.5625rem;6015  color: var(--peach-t2);6016  letter-spacing: 0.04em;6017}6018.peach-trash-entry-actions {6019  display: flex;6020  align-items: center;6021  gap: 4px;6022  flex-shrink: 0;6023}6024.peach-trash-delete-btn {6025  background: transparent;6026  border: 0;6027  color: var(--peach-t3);6028  font-size: 1rem;6029  line-height: 1;6030  cursor: pointer;6031  padding: 2px 5px;6032  transition: color 0.15s;6033}6034.peach-trash-delete-btn:hover { color: var(--peach-breach); }6035.peach-trash-list {6036  overflow-y: auto;6037}6038.peach-trash-footer {6039  display: flex;6040  align-items: center;6041  gap: 8px;6042  padding: 8px 0 0;6043  border-top: 1px solid var(--peach-border);6044  margin-top: 4px;6045}6046.peach-trash-purge-all {6047  background: transparent;6048  border: 0;6049  color: var(--peach-t3);6050  font-size: 0.625rem;6051  cursor: pointer;6052  padding: 4px 0;6053  letter-spacing: 0.03em;6054  transition: color 0.2s;6055}6056.peach-trash-purge-all:hover { color: var(--peach-breach); }6057.peach-trash-purge-confirm-label {6058  font-size: 0.625rem;6059  color: var(--peach-t1);6060  flex: 1;6061}60626063/* ── Settings shortcuts grid ─────────────────────────────────────────── */6064.peach-shortcuts-grid {6065  display: grid;6066  grid-template-columns: auto 1fr;6067  gap: 6px 12px;6068  align-items: center;6069  padding: 4px 0;6070}6071.peach-shortcut-key {6072  font-family: var(--font-mono);6073  font-size: 0.625rem;6074  color: var(--peach-t0);6075  background: var(--peach-t3);6076  border-radius: 4px;6077  padding: 2px 6px;6078  white-space: nowrap;6079  text-align: center;6080}6081.peach-shortcut-desc {6082  font-size: 0.6875rem;6083  color: var(--peach-t1);6084}60856086/* ── Sort bar trash button ───────────────────────────────────────────── */6087.peach-sort-trash-btn {6088  display: flex;6089  align-items: center;6090  justify-content: center;6091  padding: 3px 5px;6092  background: transparent;6093  border: none;6094  cursor: pointer;6095  color: var(--peach-t2);6096  border-radius: 4px;6097  transition: color 140ms ease, background 140ms ease;6098}6099.peach-sort-trash-btn:hover {6100  color: var(--peach-t1);6101  background: var(--peach-t3);6102}6103.peach-sort-trash-btn.is-active {6104  color: var(--peach-accent);6105}61066107/* Accent color picker */6108.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }6109.peach-accent-picker {6110  display: flex;6111  flex-wrap: wrap;6112  gap: 7px;6113  padding: 2px 0;6114}6115.peach-accent-swatch {6116  width: 22px;6117  height: 22px;6118  border-radius: 50%;6119  border: 2px solid transparent;6120  cursor: pointer;6121  padding: 0;6122  transition: transform 100ms;6123  outline-offset: 2px;6124}6125.peach-accent-swatch:hover { transform: scale(1.15); }6126.peach-accent-swatch.is-active {6127  border-color: var(--peach-t0);6128  transform: scale(1.1);6129}61306131.peach-pill-group {6132  display: flex;6133  gap: 6px;6134}6135.peach-pill-group .peach-btn.is-active {6136  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);6137  border-color: var(--peach-accent);6138  color: var(--peach-t0);6139}61406141/* ── Card entry styles ───────────────────────────────────────── */6142.peach-card-number {6143  font-family: var(--peach-mono);6144  letter-spacing: 0.08em;6145}61466147.peach-card-network-badge {6148  font-size: 0.625rem;6149  padding: 1px 5px;6150  border-radius: 4px;6151  border: 0.5px solid var(--peach-border);6152  color: var(--peach-text-dim);6153  margin-left: 6px;6154  vertical-align: middle;6155}61566157.peach-card-expiry-row {6158  display: flex;6159  align-items: center;6160  gap: 8px;6161}61626163.peach-card-expiry-sep {6164  color: var(--peach-text-dim);6165}61666167/* ── Pro tier — upgrade screen ──────────────────────────────── */6168.peach-pro-mark {6169  font-size: 0.5625rem;6170  color: var(--peach-accent);6171  margin-left: 6px;6172  vertical-align: super;6173  opacity: 0.7;6174}61756176.peach-pro-mini-badge {6177  display: block;6178  font-size: 0.625rem;6179  font-style: italic;6180  color: var(--peach-accent);6181  letter-spacing: 0.04em;6182  margin-top: -2px;6183  padding-left: 2px;6184  opacity: 0.85;6185  text-align: center;6186}61876188.peach-wordmark-stack {6189  display: inline-flex;6190  flex-direction: column;6191  align-items: center;6192}61936194/* ── Pro tier — upgrade page ─────────────────────────────────── */6195/* ── Pro upgrade — redesigned editorial layout ─────────────────── */61966197.peach-pro-upgrade {6198  display: flex;6199  flex-direction: column;6200  align-items: stretch;6201  gap: 10px;6202  padding: 2px 2px 12px;6203}62046205.peach-pro-eyebrow {6206  margin: 0;6207  font-family: var(--font-ui);6208  font-size: 0.625rem;6209  font-weight: 500;6210  letter-spacing: 0.12em;6211  color: var(--peach-accent);6212}62136214.peach-pro-headline {6215  margin: 0;6216  font-family: var(--font-display, "Cormorant Garamond", serif);6217  font-size: 30px;6218  font-weight: 700;6219  font-style: normal;6220  line-height: 1.05;6221  color: var(--peach-t0);6222  letter-spacing: -0.01em;6223}6224.peach-pro-headline em {6225  font-style: italic;6226  font-weight: 400;6227  color: var(--peach-accent);6228}62296230.peach-pro-subtitle {6231  margin: 0;6232  font-size: 0.6875rem;6233  line-height: 1.5;6234  color: var(--peach-t1);6235}62366237/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6238.peach-pro-section-label {6239  margin: 6px 0 0;6240  font-family: var(--font-ui);6241  font-size: 0.5625rem;6242  font-weight: 500;6243  letter-spacing: 0.12em;6244  text-transform: uppercase;6245  color: var(--peach-t2);6246}62476248/* 2-column numbered feature grid */6249.peach-pro-grid {6250  display: grid;6251  grid-template-columns: 1fr 1fr;6252  border-top: 1px solid var(--peach-border);6253  border-left: 1px solid var(--peach-border);6254}62556256.peach-pro-grid-item {6257  display: flex;6258  flex-direction: column;6259  gap: 2px;6260  padding: 8px 9px;6261  border-right: 1px solid var(--peach-border);6262  border-bottom: 1px solid var(--peach-border);6263}62646265.peach-pro-grid-item--wide {6266  grid-column: 1 / -1;6267}62686269.peach-pro-grid-num {6270  font-family: var(--font-mono);6271  font-size: 0.5625rem;6272  color: var(--peach-accent);6273  letter-spacing: 0.06em;6274  opacity: 0.85;6275}62766277.peach-pro-grid-name {6278  font-size: 0.8125rem;6279  font-weight: 500;6280  color: var(--peach-t0);6281  line-height: 1.2;6282}62836284.peach-pro-grid-desc {6285  font-size: 0.625rem;6286  color: var(--peach-t1);6287  line-height: 1.4;6288}62896290.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6291  animation: peach-pulse-accent 600ms ease-out forwards;6292}62936294@keyframes peach-pulse-accent {6295  0%   { opacity: 1; transform: scale(1.2); }6296  100% { opacity: 0.85; transform: scale(1); }6297}62986299/* Actions */6300.peach-pro-upgrade-actions {6301  display: flex;6302  flex-direction: column;6303  align-items: stretch;6304  gap: 10px;6305}63066307.peach-pro-pricing {6308  margin: 0;6309  font-size: 1rem;6310  font-weight: 600;6311  color: var(--peach-t0);6312  letter-spacing: 0.01em;6313}6314.peach-pro-pricing-sub {6315  font-size: 0.75rem;6316  font-weight: 400;6317  color: var(--peach-t1);6318  letter-spacing: 0.02em;6319}63206321.peach-pro-upgrade-cta {6322  display: flex;6323  align-items: center;6324  justify-content: center;6325  text-decoration: none;6326  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6327  border: 1px solid var(--peach-accent);6328  border-radius: 10px;6329  color: var(--peach-accent);6330  font-family: var(--font-ui);6331  font-size: 0.8125rem;6332  font-weight: 600;6333  letter-spacing: 0.06em;6334  padding: 11px 16px;6335  transition: background 0.15s ease, color 0.15s ease;6336}6337.peach-pro-upgrade-cta:hover {6338  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6339}63406341.peach-pro-key-divider {6342  display: flex;6343  align-items: center;6344  gap: 8px;6345  color: var(--peach-t2);6346  font-size: 0.5625rem;6347  letter-spacing: 0.1em;6348}6349.peach-pro-key-divider::before,6350.peach-pro-key-divider::after {6351  content: "";6352  flex: 1;6353  height: 1px;6354  background: var(--peach-border);6355}63566357/* Inline key entry row */6358.peach-pro-key-inline {6359  display: flex;6360  align-items: center;6361  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6362  border: 1px solid var(--peach-border);6363  border-radius: 8px;6364  overflow: hidden;6365}6366.peach-pro-key-inline-input {6367  flex: 1;6368  background: transparent;6369  border: none;6370  outline: none;6371  color: var(--peach-t1);6372  font-family: var(--font-mono);6373  font-size: 0.625rem;6374  letter-spacing: 0.06em;6375  padding: 9px 10px;6376}6377.peach-pro-key-inline-input::placeholder {6378  color: var(--peach-t2);6379}6380.peach-pro-key-apply {6381  background: transparent;6382  border: none;6383  border-left: 1px solid var(--peach-border);6384  color: var(--peach-t2);6385  font-family: var(--font-ui);6386  font-size: 0.5625rem;6387  font-weight: 600;6388  letter-spacing: 0.08em;6389  padding: 9px 10px;6390  cursor: pointer;6391  transition: color 0.15s ease;6392  flex-shrink: 0;6393}6394.peach-pro-key-apply:not(:disabled):hover {6395  color: var(--peach-accent);6396}6397.peach-pro-key-apply:disabled {6398  opacity: 0.35;6399  cursor: not-allowed;6400}64016402/* ── Pro tier — key ceremony ─────────────────────────────────── */6403.peach-pro-key-ceremony {6404  display: flex;6405  flex-direction: column;6406  align-items: center;6407  gap: 12px;6408  padding: 20px 4px 16px;6409}64106411.peach-pro-key-ceremony .peach-lock-rune-string {6412  font-size: 1rem;6413  gap: 12px;6414  flex: 0;6415  justify-content: center;6416}64176418.peach-pro-key-ceremony-label {6419  margin: 0;6420  font-size: 0.6875rem;6421  color: var(--peach-t2);6422  font-style: italic;6423  letter-spacing: 0.04em;6424}64256426.peach-pro-key-input {6427  font-family: var(--font-mono, monospace);6428  letter-spacing: 0.06em;6429  text-align: center;6430  width: 100%;6431  box-sizing: border-box;6432}64336434.peach-pro-key-error {6435  margin: 0;6436  font-size: 0.75rem;6437  text-align: center;6438  color: var(--peach-breach, #e55);6439  padding: 0;6440}64416442.peach-pro-key-activate {6443  width: 100%;6444  text-align: center;6445  box-sizing: border-box;6446  padding: 10px 20px;6447  font-size: 0.8125rem;6448}64496450.peach-pro-key-cancel {6451  background: transparent;6452  border: 0;6453  color: var(--peach-t2);6454  font-size: 0.6875rem;6455  cursor: pointer;6456  padding: 2px 8px;6457  transition: color 0.2s;6458}64596460.peach-pro-key-cancel:hover { color: var(--peach-accent); }64616462/* ── Pro tier — active state ─────────────────────────────────── */6463.peach-pro-active {6464  display: flex;6465  flex-direction: column;6466  align-items: center;6467  gap: 0;6468  padding: 8px 4px 16px;6469  min-height: 280px;6470}64716472.peach-pro-active-hero {6473  display: flex;6474  flex-direction: column;6475  align-items: center;6476  gap: 6px;6477  padding: 20px 0 8px;6478}64796480.peach-pro-active-mark-wrap {6481  display: flex;6482  align-items: center;6483  justify-content: center;6484  margin-bottom: 4px;6485}64866487.peach-pro-active-mark {6488  width: 60px;6489  height: 60px;6490}64916492.peach-pro-active-title {6493  font-family: var(--font-display, var(--font-ui));6494  font-size: 26px;6495  margin: 0;6496  color: var(--peach-t0);6497  letter-spacing: 0.01em;6498}64996500.peach-pro-active-since {6501  margin: 0;6502  font-size: 0.6875rem;6503  color: var(--peach-t2);6504  font-style: italic;6505}65066507.peach-pro-active-features {6508  display: flex;6509  flex-direction: column;6510  gap: 8px;6511  width: 100%;6512  padding: 14px 8px 0;6513  border-top: 1px solid var(--peach-border);6514  flex: 1;6515}65166517.peach-pro-active-feature {6518  display: flex;6519  align-items: center;6520  gap: 9px;6521}65226523.peach-pro-active-feature-mark {6524  color: var(--peach-accent);6525  font-size: 0.625rem;6526  opacity: 0.65;6527  flex-shrink: 0;6528}65296530.peach-pro-active-feature-name {6531  font-size: 0.75rem;6532  color: var(--peach-t1);6533}65346535.peach-pro-deactivate {6536  align-self: center;6537  background: transparent;6538  border: 0;6539  color: var(--peach-t3);6540  font-size: 0.625rem;6541  cursor: pointer;6542  padding: 8px 0 0;6543  margin-top: 16px;6544  letter-spacing: 0.03em;6545  transition: color 0.2s;6546}65476548.peach-pro-deactivate:hover { color: var(--peach-t2); }65496550.peach-pro-deactivate:disabled {6551  opacity: 0.5;6552  cursor: default;6553}65546555/* ── Pro card activation sparkles & thank-you ── */6556button.peach-pro-active-mark-wrap {6557  background: transparent;6558  border: 0;6559  padding: 0;6560  cursor: pointer;6561  position: relative;6562  overflow: visible;6563}65646565.peach-pro-sparks {6566  position: absolute;6567  inset: 0;6568  pointer-events: none;6569  overflow: visible;6570}65716572.peach-pro-spark {6573  position: absolute;6574  top: 50%;6575  left: 50%;6576  font-size: 9px;6577  line-height: 1;6578  opacity: 0;6579  transform: translate(-50%, -50%);6580  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;6581}65826583@keyframes peach-pro-spark-fly {6584  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }6585  25%  { opacity: 1; }6586  100% {6587    opacity: 0;6588    transform: translate(6589      calc(-50% + var(--spark-x, 0px)),6590      calc(-50% + var(--spark-y, -40px))6591    ) scale(0.8);6592  }6593}65946595.peach-pro-thankyou-text {6596  margin: 4px 0 0;6597  font-size: 0.6875rem;6598  font-style: italic;6599  color: currentColor;6600  opacity: 0;6601  animation: peach-pro-thankyou-flash 2.5s ease both;6602}66036604@keyframes peach-pro-thankyou-flash {6605  0%   { opacity: 0; transform: translateY(4px); }6606  15%  { opacity: 0.75; transform: translateY(0); }6607  75%  { opacity: 0.75; }6608  100% { opacity: 0; }6609}66106611/* ── Pro advanced health remediation queue ──────────────────── */6612.peach-health-pro-queue {6613  display: flex;6614  flex-direction: column;6615  gap: 10px;6616  padding: 12px;6617  margin: 0 0 12px;6618  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6619  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6620  border-radius: 10px;6621}66226623.peach-health-pro-queue-head {6624  display: flex;6625  justify-content: space-between;6626  align-items: baseline;6627}66286629.peach-health-pro-queue-title {6630  font-size: 0.75rem;6631  font-weight: 500;6632  letter-spacing: 0.04em;6633  text-transform: uppercase;6634  color: var(--peach-accent);6635}66366637.peach-health-pro-queue-score {6638  font-size: 0.6875rem;6639  color: var(--peach-t2);6640}66416642.peach-health-pro-row {6643  display: flex;6644  gap: 10px;6645  align-items: center;6646  padding: 8px 0;6647  border-top: 1px solid var(--peach-border);6648}66496650.peach-health-pro-row-info {6651  flex: 1;6652  display: flex;6653  flex-direction: column;6654  gap: 4px;6655  min-width: 0;6656}66576658.peach-health-pro-action {6659  flex: 0 0 auto;6660  padding: 4px 8px;6661  font-size: 0.5625rem;6662  letter-spacing: 0.08em;6663  text-transform: uppercase;6664}66656666.peach-health-pro-row-name {6667  font-size: 0.8125rem;6668  color: var(--peach-t0);6669  overflow: hidden;6670  text-overflow: ellipsis;6671  white-space: nowrap;6672}66736674.peach-health-pro-row-meta {6675  font-size: 0.6875rem;6676  color: var(--peach-t2);6677}66786679.peach-health-pro-bar {6680  height: 2px;6681  background: var(--peach-border);6682  border-radius: 2px;6683  overflow: hidden;6684  margin-top: 2px;6685}66866687.peach-health-pro-bar-fill {6688  height: 100%;6689  background: var(--peach-accent);6690  transition: width 200ms ease-out;6691}66926693/* ── Pro activation celebration ── */6694@keyframes peach-pro-bloom {6695  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6696  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6697                 drop-shadow(0 0 48px var(--peach-glow)); }6698  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6699}67006701@keyframes peach-pro-wordmark-in {6702  from { opacity: 0; transform: translateY(4px); }6703  to   { opacity: 1; transform: translateY(0); }6704}67056706@keyframes peach-pro-fade-out {6707  from { opacity: 1; }6708  to   { opacity: 0; }6709}67106711.peach-pro-celebration {6712  background:6713    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6714    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6715    var(--peach-bg);6716  border: 1px solid var(--peach-t3);6717  box-shadow:6718    0 2px 8px rgba(0,0,0,0.55),6719    0 14px 48px rgba(0,0,0,0.7),6720    0 0 0 1px rgba(240,232,216,0.04);6721  overflow: hidden;6722  width: 320px;6723  height: 520px;6724  display: flex;6725  flex-direction: column;6726  align-items: center;6727  justify-content: center;6728  gap: 8px;6729  padding: 32px 24px;6730  text-align: center;6731}67326733.peach-pro-celebration.is-leaving {6734  animation: peach-pro-fade-out 400ms ease forwards;6735}67366737.peach-pro-bloom-target {6738  display: flex;6739  align-items: center;6740  justify-content: center;6741  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6742  margin-bottom: 12px;6743}67446745.peach-pro-bloom-icon {6746  width: 48px;6747  height: 48px;6748}67496750.peach-pro-wordmark {6751  font-family: var(--font-display);6752  font-size: 22px;6753  font-style: italic;6754  font-weight: 400;6755  color: var(--peach-accent);6756  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6757}67586759.peach-pro-thankyou {6760  font-size: 0.75rem;6761  font-style: italic;6762  color: var(--peach-t2);6763  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6764}676567666767/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6768.peach-pro-notice-banner {6769  display: flex;6770  align-items: center;6771  gap: 8px;6772  padding: 7px 12px;6773  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6774  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6775  font-size: 0.6875rem;6776  color: var(--peach-t2);6777  font-family: "IBM Plex Mono", monospace;6778  flex-shrink: 0;6779}67806781.peach-pro-notice-link {6782  background: none;6783  border: none;6784  padding: 0;6785  cursor: pointer;6786  font-size: 0.6875rem;6787  color: var(--peach-accent);6788  font-family: "IBM Plex Mono", monospace;6789  margin-left: auto;6790  white-space: nowrap;6791}67926793.peach-pro-notice-close {6794  background: none;6795  border: none;6796  padding: 0 0 0 4px;6797  cursor: pointer;6798  font-size: 0.625rem;6799  color: var(--peach-t3);6800  line-height: 1;6801}68026803/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6804   Renders over whatever view is showing. 60-second expiry; the popup ticks6805   the countdown each second and clears the banner when it hits zero. */6806.peach-pair-request-banner {6807  display: flex;6808  flex-direction: column;6809  gap: 8px;6810  padding: 10px 12px;6811  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6812  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6813  font-family: "IBM Plex Mono", monospace;6814  flex-shrink: 0;6815}68166817.peach-pair-toast {6818  padding: 8px 12px;6819  font-family: "IBM Plex Mono", monospace;6820  font-size: 0.75rem;6821  color: var(--peach-t1);6822  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6823  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6824  flex-shrink: 0;6825  text-align: center;6826}68276828.peach-pair-toast strong {6829  color: var(--peach-t0);6830  font-weight: 500;6831}68326833.peach-pair-request-header {6834  display: flex;6835  align-items: center;6836  gap: 8px;6837  font-size: 0.75rem;6838  color: var(--peach-t1);6839}68406841.peach-pair-request-mark {6842  font-size: 0.875rem;6843  display: inline-flex;6844  align-items: center;6845}68466847.peach-pair-request-icon {6848  width: 1em;6849  height: 1em;6850}68516852.peach-pair-request-title {6853  font-weight: 600;6854  color: var(--peach-t0);6855}68566857.peach-pair-request-countdown {6858  margin-left: auto;6859  font-variant-numeric: tabular-nums;6860  color: var(--peach-t2);6861  font-size: 0.6875rem;6862}68636864.peach-pair-request-body {6865  margin: 0;6866  font-size: 0.75rem;6867  color: var(--peach-t1);6868  line-height: 1.4;6869}68706871.peach-pair-request-body strong {6872  color: var(--peach-t0);6873  font-weight: 600;6874}68756876.peach-pair-request-actions {6877  display: flex;6878  gap: 8px;6879  justify-content: flex-end;6880}68816882/* ─── First-run onboarding ──────────────────────────────────────────────6883   Three-card welcome shown once before vault creation. The PeachScript6884   rune background drifts behind everything at very low opacity — it's6885   atmosphere, not focus. The cards themselves use the same panel6886   language as the rest of the popup so the transition into NewVault is6887   continuous, not a jarring switch of visual register. */68886889.peach-onboarding {6890  position: relative;6891  display: flex;6892  flex-direction: column;6893  width: 100%;6894  height: 100%;6895  padding: 16px 16px 18px;6896  box-sizing: border-box;6897  overflow: hidden;6898  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6899}69006901.peach-onboarding.is-completing {6902  animation: peach-onboard-exit 200ms ease-out forwards;6903}69046905.peach-rune-background {6906  position: absolute;6907  inset: 0;6908  width: 100%;6909  height: 100%;6910  pointer-events: none;6911  z-index: 0;6912  transition: opacity 500ms ease-out;6913}69146915.peach-onboarding.is-completing .peach-rune-background {6916  opacity: 0;6917}69186919.peach-onboarding-header {6920  position: relative;6921  z-index: 1;6922  display: flex;6923  align-items: center;6924  margin-bottom: 14px;6925}69266927.peach-onboarding-card {6928  position: relative;6929  z-index: 1;6930  flex: 1;6931  display: flex;6932  flex-direction: column;6933  gap: 10px;6934  padding: 22px 20px;6935  border-radius: 16px;6936  border: 1px solid var(--peach-t3);6937  background:6938    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6939  backdrop-filter: blur(3px);6940  -webkit-backdrop-filter: blur(3px);6941  box-shadow:6942    inset 0 1px 0 rgba(240, 232, 216, 0.04),6943    0 12px 28px rgba(0, 0, 0, 0.12);6944  cursor: pointer;6945  user-select: none;6946  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6947}69486949.peach-onboarding-card.is-exiting {6950  animation: peach-card-out 120ms ease-in forwards;6951  pointer-events: none;6952}69536954.peach-onboarding-card-headline {6955  margin: 0;6956  font-family: var(--font-display);6957  font-style: italic;6958  font-weight: 400;6959  font-size: 22px;6960  line-height: 1.05;6961  color: var(--peach-t0);6962  white-space: pre-line;6963}69646965.peach-onboarding-divider {6966  margin: 4px 0 6px;6967  border: 0;6968  border-top: 1px solid var(--peach-t3);6969  width: 100%;6970}69716972.peach-onboarding-body {6973  margin: 0;6974  font-size: 0.8125rem;6975  line-height: 1.6;6976  color: var(--peach-t1);6977}69786979.peach-onboarding-warning {6980  display: flex;6981  align-items: flex-start;6982  gap: 8px;6983  margin: 6px 0 0;6984  padding-top: 8px;6985  border-top: 1px dashed var(--peach-t3);6986  font-size: 0.8125rem;6987  line-height: 1.5;6988  color: var(--peach-t1);6989}69906991.peach-onboarding-warning-icon {6992  color: var(--peach-accent);6993  font-size: 0.8125rem;6994  line-height: 1.5;6995  flex: 0 0 auto;6996}69976998.peach-onboarding-nav {6999  position: relative;7000  z-index: 1;7001  display: flex;7002  align-items: center;7003  justify-content: space-between;7004  margin-top: 12px;7005  padding: 0 4px;7006}70077008.peach-onboarding-dots {7009  display: flex;7010  align-items: center;7011  gap: 6px;7012}70137014.peach-onboarding-dot {7015  width: 6px;7016  height: 6px;7017  border-radius: 50%;7018  background: var(--peach-t2);7019  transition: width 200ms ease, height 200ms ease, background 200ms ease;7020}70217022.peach-onboarding-dot.is-active {7023  width: 8px;7024  height: 8px;7025  background: var(--peach-accent);7026}70277028.peach-onboarding-next {7029  background: none;7030  border: none;7031  padding: 4px 0;7032  cursor: pointer;7033  font-family: "IBM Plex Mono", monospace;7034  font-size: 0.6875rem;7035  letter-spacing: 0.04em;7036  color: var(--peach-t1);7037  transition: color 150ms ease;7038}70397040.peach-onboarding-next:hover {7041  color: var(--peach-t0);7042}70437044.peach-onboarding-next:disabled {7045  opacity: 0.5;7046  cursor: default;7047}70487049.peach-onboarding-back {7050  background: none;7051  border: none;7052  padding: 4px 0;7053  cursor: pointer;7054  font-family: "IBM Plex Mono", monospace;7055  font-size: 0.6875rem;7056  letter-spacing: 0.04em;7057  color: var(--peach-t2);7058  transition: color 150ms ease;7059}70607061.peach-onboarding-back:hover {7062  color: var(--peach-t0);7063}70647065.peach-onboarding-back:disabled {7066  opacity: 0.5;7067  cursor: default;7068}70697070/* Reserve back-button width on the first card so the dots stay centred */7071.peach-onboarding-back-spacer {7072  width: 44px;7073}70747075.peach-onboarding-choice-row {7076  display: grid;7077  grid-template-columns: 1fr;7078  gap: 8px;7079  margin-top: 14px;7080}70817082.peach-onboarding-choice {7083  min-height: 34px;7084  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);7085  border-radius: 8px;7086  padding: 8px 10px;7087  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);7088  color: var(--peach-t0);7089  font-size: 0.76rem;7090  font-weight: 700;7091  text-align: left;7092}70937094.peach-onboarding-choice--adopt {7095  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);7096  background: color-mix(in srgb, var(--peach-accent) 13%, transparent);7097}70987099.peach-adopt-vault {7100  position: relative;7101  min-height: 100%;7102  padding: 22px;7103  display: grid;7104  place-items: center;7105}71067107.peach-adopt-card {7108  position: relative;7109  z-index: 1;7110  width: min(100%, 330px);7111  padding: 20px;7112  border-radius: 8px;7113  border: 1px solid color-mix(in srgb, var(--peach-t0) 13%, transparent);7114  background: color-mix(in srgb, var(--peach-surface) 90%, transparent);7115  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);7116}71177118.peach-adopt-card h1 {7119  margin: 0 0 10px;7120  font-size: 1.28rem;7121  line-height: 1.15;7122}71237124.peach-adopt-card p {7125  margin: 0 0 14px;7126  color: var(--peach-t1);7127  line-height: 1.35;7128}71297130.peach-adopt-input {7131  margin-bottom: 12px;7132}71337134.peach-adopt-card textarea.peach-adopt-input {7135  width: 100%;7136  resize: vertical;7137  overflow-wrap: anywhere;7138  font-family: "IBM Plex Mono", monospace;7139  font-size: 0.64rem;7140}71417142.peach-adopt-qr-video {7143  display: block;7144  width: 100%;7145  max-height: 220px;7146  margin: 0 0 12px;7147  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);7148  border-radius: 8px;7149  background: #000;7150  object-fit: cover;7151}71527153.peach-adoption-source-invitation {7154  display: flex;7155  flex-direction: column;7156  align-items: center;7157  gap: 10px;7158  padding: 4px 18px 16px;7159  text-align: center;7160}71617162.peach-pair-qr {7163  display: block;7164  max-width: min(224px, 100%);7165  height: auto;7166  padding: 8px;7167  border-radius: 10px;7168  background: #fff;7169}71707171/* The same invitation the QR carries, as text — the fallback when a camera7172   won't cooperate. Monospace and full width so it can be read out loud. */7173.peach-pair-invitation-text {7174  width: 100%;7175  resize: none;7176  padding: 8px 10px;7177  border-radius: 10px;7178  border: 1px solid var(--peach-border);7179  background: color-mix(in srgb, var(--peach-t0) 3%, transparent);7180  color: var(--peach-t1);7181  font-family: var(--peach-mono, ui-monospace, SFMono-Regular, Menlo, monospace);7182  font-size: 10px;7183  line-height: 1.5;7184  word-break: break-all;7185}71867187.peach-adopt-card > .peach-btn + .peach-btn {7188  margin-top: 8px;7189}71907191.peach-adopt-actions {7192  display: flex;7193  gap: 10px;7194  margin-top: 14px;7195}71967197.peach-adopt-actions > button {7198  flex: 1;7199}72007201.peach-adopt-birds {7202  width: 120px;7203  height: 54px;7204  margin-bottom: 14px;7205  position: relative;7206}72077208.peach-adopt-birds::before {7209  content: "";7210  position: absolute;7211  left: 29px;7212  right: 29px;7213  top: 25px;7214  height: 1px;7215  background: color-mix(in srgb, var(--peach-accent) 50%, transparent);7216}72177218.peach-adopt-birds span {7219  position: absolute;7220  top: 11px;7221  width: 34px;7222  height: 28px;7223  border-radius: 50% 50% 46% 46%;7224  background: color-mix(in srgb, var(--peach-accent) 45%, var(--peach-t0));7225  box-shadow: 0 0 18px color-mix(in srgb, var(--peach-accent) 24%, transparent);7226  animation: peach-adopt-bob 1.8s ease-in-out infinite;7227}72287229.peach-adopt-birds span:first-child {7230  left: 12px;7231}72327233.peach-adopt-birds span:last-child {7234  right: 12px;7235  animation-delay: 0.25s;7236}72377238.peach-adopt-sas {7239  margin: 18px 0;7240  padding: 14px;7241  border-radius: 8px;7242  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);7243  color: var(--peach-t0);7244  font-size: 1.35rem;7245  font-weight: 800;7246  font-variant-numeric: tabular-nums;7247  text-align: center;7248}72497250@keyframes peach-adopt-bob {7251  0%, 100% { transform: translateY(0); }7252  50% { transform: translateY(-5px); }7253}72547255.peach-onboarding-mobile-card-buttons {7256  display: flex;7257  flex-direction: column;7258  gap: 8px;7259  margin-top: 16px;7260}72617262@keyframes peach-onboard-enter {7263  from { opacity: 0; transform: translateY(20px); }7264  to   { opacity: 1; transform: translateY(0); }7265}72667267@keyframes peach-onboard-exit {7268  from { opacity: 1; }7269  to   { opacity: 0; }7270}72717272@keyframes peach-card-in {7273  from { opacity: 0; transform: translateX(12px); }7274  to   { opacity: 1; transform: translateX(0); }7275}72767277@keyframes peach-card-out {7278  from { opacity: 1; transform: translateX(0); }7279  to   { opacity: 0; transform: translateX(-12px); }7280}72817282/* ─── New vault screen — matched to onboarding card language ─────────── */72837284/* Two classes so this beats the shared .peach-screen.lock-screen--vault-stage7285   rule (same element) without loosening the unlock/restore screens. The7286   create-vault screen is the only vault-stage view tall enough to overflow7287   the 520px popup, so its spacing is tuned to fit header → card → restore →7288   recovery warning with nothing clipped. */7289.peach-screen.peach-newvault {7290  position: relative;7291  display: flex;7292  flex-direction: column;7293  gap: 12px;7294  padding: 14px 16px 12px;7295  overflow: hidden;7296}72977298/* Suppress the warm-blob ambient art inherited from .lock-screen — the7299   new vault card now carries the visual weight. */7300.peach-newvault::before {7301  content: none;7302}73037304.peach-newvault-header {7305  position: relative;7306  z-index: 2;7307  display: flex;7308  align-items: center;7309  gap: 10px;7310  margin-bottom: 2px;7311}73127313.peach-newvault-back {7314  display: inline-flex;7315  align-items: center;7316  gap: 4px;7317  background: transparent;7318  border: none;7319  color: var(--peach-t2);7320  font-family: "IBM Plex Mono", monospace;7321  font-size: 0.625rem;7322  letter-spacing: 0.06em;7323  cursor: pointer;7324  padding: 4px 6px;7325  border-radius: 6px;7326  transition: color 120ms ease, background 120ms ease;7327}73287329.peach-newvault-back:hover {7330  color: var(--peach-t0);7331  background: rgba(240, 232, 216, 0.04);7332}73337334.peach-newvault-mark {7335  position: absolute;7336  right: -12px;7337  top: 6px;7338  width: 110px;7339  height: 110px;7340  pointer-events: none;7341  opacity: 0.10;7342  filter: saturate(0.9);7343  z-index: 0;7344}7345.peach-newvault-mark-art {7346  width: 100%;7347  height: 100%;7348}7349.peach-newvault-mark-art path:nth-child(1) {7350  fill: rgba(123, 144, 96, 0.88);7351}7352.peach-newvault-mark-art path:nth-child(2) {7353  stroke: rgba(94, 122, 66, 0.95);7354}73557356.peach-newvault-card {7357  position: relative;7358  z-index: 1;7359  display: flex;7360  flex-direction: column;7361  gap: 8px;7362  padding: 16px 20px 14px;7363  border-radius: 16px;7364  border: 1px solid var(--peach-t3);7365  background:7366    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));7367  backdrop-filter: blur(3px);7368  -webkit-backdrop-filter: blur(3px);7369  box-shadow:7370    inset 0 1px 0 rgba(240, 232, 216, 0.04),7371    0 12px 28px rgba(0, 0, 0, 0.12);7372  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;7373}73747375.peach-newvault-headline {7376  margin: 0;7377  font-family: var(--font-display);7378  font-style: italic;7379  font-weight: 400;7380  font-size: 24px;7381  line-height: 1.05;7382  color: var(--peach-t0);7383  white-space: pre-line;7384}73857386.peach-newvault-divider {7387  margin: 2px 0 4px;7388  border: 0;7389  border-top: 1px solid var(--peach-t3);7390  width: 100%;7391}73927393.peach-newvault-field {7394  display: flex;7395  flex-direction: column;7396  gap: 4px;7397}73987399.peach-newvault-label-row {7400  display: flex;7401  align-items: center;7402  justify-content: space-between;7403}74047405/* Monospace input scaled to the card. Replaces the 22px unlock-input7406   so the placeholder no longer overflows and the field reads as part7407   of the same surface as the body copy. */7408.peach-newvault-input {7409  font-size: 0.875rem;7410  letter-spacing: 0.18em;7411  padding: 8px 0;7412}7413.peach-newvault-input::placeholder {7414  letter-spacing: 0.18em;7415  color: var(--peach-t2);7416}74177418.peach-newvault-hint {7419  margin: 2px 0 0;7420  font-family: "IBM Plex Mono", monospace;7421  font-size: 0.625rem;7422  color: var(--peach-t2);7423  letter-spacing: 0.04em;7424}74257426.peach-newvault-submit {7427  margin-top: 4px;7428}74297430.peach-newvault-warning {7431  display: flex;7432  align-items: flex-start;7433  gap: 8px;7434  margin: 2px 0 0;7435  padding-top: 8px;7436  border-top: 1px dashed var(--peach-t3);7437  font-size: 0.75rem;7438  line-height: 1.45;7439  color: var(--peach-t1);7440}74417442.peach-newvault-warning-icon {7443  color: var(--peach-accent);7444  font-size: 0.8125rem;7445  line-height: 1.4;7446  flex: 0 0 auto;7447}74487449/* Restore options sit inside the card, directly under "create vault", so7450   they are always reachable without scrolling. The top divider mirrors the7451   warning's so the choice reads as a deliberate fork, not a footnote. */7452.peach-newvault-restore {7453  position: relative;7454  z-index: 1;7455  display: flex;7456  flex-direction: column;7457  gap: 4px;7458  margin-top: 4px;7459  padding-top: 10px;7460  border-top: 1px dashed var(--peach-t3);7461}74627463/* Settings body — warm accent gradient gives the glass something to blur against */7464.peach-settings-body {7465  background:7466    radial-gradient(7467      ellipse at 30% 20%,7468      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7469      transparent 60%7470    );7471}74727473/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7474/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7475 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7476 * (replacing the vault from a backup file) and "hazard" for actions that7477 * are absolutely irreversible (Panic). Both use the same card scaffold so7478 * they read as a pair, but the colour family signals the severity at a7479 * glance — yellow for caution, red for don't.7480 */7481.peach-danger-card {7482  --danger-tint: 235, 158, 52; /* amber */7483  display: flex;7484  flex-direction: column;7485  gap: 8px;7486  padding: 14px;7487  margin-top: 10px;7488  border-radius: 12px;7489  border: 1px solid rgba(var(--danger-tint), 0.32);7490  background:7491    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7492    rgba(var(--danger-tint), 0.04);7493  box-shadow:7494    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7495    0 0 24px rgba(var(--danger-tint), 0.04);7496  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7497}74987499.peach-danger-card:hover {7500  border-color: rgba(var(--danger-tint), 0.55);7501  box-shadow:7502    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7503    0 0 36px rgba(var(--danger-tint), 0.10);7504}75057506.peach-danger-card--hazard {7507  --danger-tint: 220, 38, 38; /* red */7508}75097510.peach-danger-card-head {7511  display: flex;7512  align-items: center;7513  gap: 10px;7514}75157516.peach-danger-card-glyph {7517  width: 28px;7518  height: 28px;7519  flex-shrink: 0;7520  display: flex;7521  align-items: center;7522  justify-content: center;7523  border-radius: 8px;7524  background: rgba(var(--danger-tint), 0.12);7525  color: rgba(var(--danger-tint), 0.95);7526  font-size: 1rem;7527  line-height: 1;7528}75297530.peach-danger-card-title {7531  margin: 0;7532  font-size: 0.8125rem;7533  font-weight: 600;7534  color: rgba(var(--danger-tint), 0.92);7535  letter-spacing: 0.01em;7536}75377538.peach-danger-card-copy {7539  margin: 0;7540  font-size: 0.6875rem;7541  line-height: 1.5;7542  color: var(--peach-t2);7543}75447545.peach-danger-card-button {7546  width: 100%;7547  padding: 9px;7548  margin-top: 4px;7549  background: transparent;7550  border: 1px solid rgba(var(--danger-tint), 0.45);7551  border-radius: 8px;7552  color: rgba(var(--danger-tint), 0.9);7553  font-size: 0.75rem;7554  font-weight: 500;7555  letter-spacing: 0.02em;7556  cursor: pointer;7557  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7558}75597560.peach-danger-card-button:hover {7561  background: rgba(var(--danger-tint), 0.10);7562  border-color: rgba(var(--danger-tint), 0.75);7563  color: rgb(var(--danger-tint));7564}75657566.peach-adoption-consent-backdrop {7567  position: fixed;7568  inset: 0;7569  z-index: 1000;7570  display: grid;7571  place-items: center;7572  padding: 18px;7573  background: rgba(15, 10, 5, 0.72);7574}75757576.peach-adoption-consent {7577  width: min(100%, 340px);7578  border: 1px solid color-mix(in srgb, #f59e0b 54%, var(--peach-border));7579  border-radius: 8px;7580  padding: 18px;7581  background: color-mix(in srgb, #2c1b08 84%, var(--peach-surface));7582  color: var(--peach-t0);7583  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42);7584}75857586.peach-adoption-consent-icon {7587  width: 32px;7588  height: 32px;7589  display: grid;7590  place-items: center;7591  border-radius: 50%;7592  background: #f59e0b;7593  color: #1f1304;7594  font-weight: 800;7595}75967597.peach-adoption-consent h2 {7598  margin: 12px 0 8px;7599  font-size: 1.22rem;7600  line-height: 1.15;7601}76027603.peach-adoption-consent-device,7604.peach-adoption-consent-warning {7605  margin: 0 0 12px;7606  color: var(--peach-t1);7607  line-height: 1.35;7608}76097610.peach-adoption-consent-device strong {7611  color: var(--peach-t0);7612}76137614.peach-adoption-consent-warning {7615  color: #ffd79a;7616}76177618.peach-adoption-consent-sas {7619  display: flex;7620  justify-content: space-between;7621  align-items: center;7622  gap: 12px;7623  margin: 14px 0;7624  padding: 10px;7625  border-radius: 6px;7626  background: rgba(245, 158, 11, 0.12);7627}76287629/* Tracking, not interleaved spaces: eight digits with per-digit spaces no7630   longer fit beside the label at 320px. */7631.peach-adoption-consent-sas strong {7632  font-variant-numeric: tabular-nums;7633  letter-spacing: 0.18em;7634  white-space: nowrap;7635}76367637.peach-adoption-consent-actions {7638  display: flex;7639  justify-content: space-between;7640  gap: 10px;7641  margin-top: 16px;7642}76437644.peach-adoption-consent-actions > button {7645  flex: 1;7646}76477648/* ── Panic flow (three-step destruction) ───────────────────────────────── */7649.peach-panic {7650  display: flex;7651  flex-direction: column;7652  flex: 1;7653  min-height: 0;7654  padding: 28px 20px 20px;7655  gap: 18px;7656  overflow-y: auto;7657  scrollbar-width: none;7658  -ms-overflow-style: none;7659}76607661.peach-panic::-webkit-scrollbar { display: none; }76627663.peach-panic-step2 {7664  background: rgba(220, 38, 38, 0.04);7665}76667667.peach-panic-step3 {7668  position: relative;7669  background: #0f0505;7670  color: #ffffff;7671  overflow: hidden;7672}76737674.peach-panic-rune-bg {7675  position: absolute;7676  inset: 0;7677  opacity: 0.22;7678  pointer-events: none;7679  overflow: hidden;7680}76817682.peach-panic-rune-bg canvas {7683  width: 100% !important;7684  height: 100% !important;7685}76867687.peach-panic-icon {7688  font-size: 32px;7689  color: rgb(220, 38, 38);7690  line-height: 1;7691}76927693.peach-panic-title {7694  margin: 0;7695  font-size: 18px;7696  font-weight: 500;7697  color: var(--peach-t1);7698}76997700.peach-panic-title--severe {7701  font-size: 20px;7702  font-weight: 700;7703  color: rgb(220, 38, 38);7704}77057706.peach-panic-body {7707  margin: 0;7708  font-size: 0.8125rem;7709  line-height: 1.55;7710  color: var(--peach-t2);7711}77127713.peach-panic-body--severe {7714  color: rgba(220, 38, 38, 0.85);7715}77167717.peach-panic-body--final {7718  font-size: 1rem;7719  font-weight: 700;7720  color: rgb(255, 80, 80);7721  line-height: 1.4;7722}77237724.peach-panic-body--final-intro {7725  font-size: 1rem;7726  color: #ffffff;7727  font-weight: 400;7728}77297730.peach-panic-divider {7731  height: 1px;7732  background: rgba(255, 255, 255, 0.08);7733  margin: 4px 0;7734}77357736.peach-panic-confirm-input {7737  width: 100%;7738  padding: 10px 12px;7739  background: rgba(255, 255, 255, 0.02);7740  border: 1px solid rgba(220, 38, 38, 0.4);7741  border-radius: 8px;7742  color: var(--peach-t1);7743  font-family: "IBM Plex Mono", monospace;7744  font-size: 0.875rem;7745  letter-spacing: 0.12em;7746  text-transform: uppercase;7747}77487749.peach-panic-confirm-input:focus {7750  outline: none;7751  border-color: rgb(220, 38, 38);7752}77537754.peach-panic-confirm-input--match {7755  border-color: rgb(220, 38, 38);7756  color: rgb(220, 38, 38);7757}77587759.peach-panic-confirm-label {7760  font-size: 0.6875rem;7761  color: var(--peach-t2);7762  margin: 0 0 -8px;7763  letter-spacing: 0.06em;7764}77657766.peach-panic-actions {7767  display: flex;7768  flex-direction: column;7769  gap: 10px;7770  margin-top: auto;7771}77727773.peach-panic-button {7774  width: 100%;7775  padding: 12px;7776  border-radius: 8px;7777  font-size: 0.8125rem;7778  cursor: pointer;7779  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7780}77817782.peach-panic-button--primary {7783  background: var(--peach-accent);7784  border: 1px solid var(--peach-accent);7785  color: #ffffff;7786  font-weight: 600;7787}77887789.peach-panic-button--primary:hover {7790  background: color-mix(in srgb, var(--peach-accent) 88%, white);7791}77927793.peach-panic-button--danger {7794  background: rgb(220, 38, 38);7795  border: 1px solid rgb(220, 38, 38);7796  color: #ffffff;7797  font-weight: 600;7798}77997800.peach-panic-button--danger:disabled {7801  opacity: 0.35;7802  cursor: not-allowed;7803}78047805.peach-panic-button--ghost {7806  background: transparent;7807  border: 1px solid rgba(255, 255, 255, 0.18);7808  color: var(--peach-t2);7809}78107811.peach-panic-button--ghost:hover {7812  border-color: rgba(255, 255, 255, 0.32);7813  color: var(--peach-t1);7814}78157816.peach-panic-link {7817  background: transparent;7818  border: none;7819  padding: 4px 0;7820  color: rgba(220, 38, 38, 0.65);7821  font-size: 0.75rem;7822  cursor: pointer;7823  text-align: left;7824  text-decoration: underline;7825  text-underline-offset: 3px;7826}78277828.peach-panic-link:hover {7829  color: rgb(220, 38, 38);7830}78317832.peach-panic-bar {7833  background: rgb(220, 38, 38);7834  padding: 16px 20px;7835  margin: -28px -20px 0;7836  text-align: center;7837  font-size: 0.8125rem;7838  font-weight: 700;7839  letter-spacing: 0.12em;7840  color: #ffffff;7841}78427843.peach-panic-final-button {7844  width: 100%;7845  padding: 14px;7846  background: rgb(220, 38, 38);7847  border: none;7848  border-radius: 8px;7849  color: #ffffff;7850  font-size: 0.875rem;7851  font-weight: 700;7852  letter-spacing: 0.08em;7853  text-transform: uppercase;7854  cursor: pointer;7855  animation: peach-panic-pulse 2s ease-in-out infinite;7856}78577858.peach-settings-license {7859  margin-top: 10px;7860  padding-top: 10px;7861  border-top: 1px solid var(--peach-t3);7862}78637864.peach-settings-label {7865  font-size: 0.625rem;7866  letter-spacing: 0.08em;7867  color: var(--peach-t3);7868  display: block;7869  margin-bottom: 6px;7870}78717872.peach-settings-license-row {7873  display: flex;7874  align-items: center;7875  justify-content: space-between;7876  gap: 8px;7877}78787879.peach-settings-license-key {7880  font-family: 'IBM Plex Mono', monospace;7881  font-size: 0.75rem;7882  color: var(--peach-t0);7883  letter-spacing: 0.04em;7884  word-break: break-all;7885  flex: 1;7886  min-width: 0;7887}78887889.peach-settings-license-key--masked {7890  font-family: 'IBM Plex Mono', monospace;7891  font-size: 0.6rem;7892  color: var(--peach-t1);7893  letter-spacing: 0.18em;7894  user-select: none;7895}78967897.peach-settings-license-actions {7898  display: flex;7899  align-items: center;7900  gap: 2px;7901  flex-shrink: 0;7902}79037904.peach-settings-license-copy {7905  font-size: 0.6875rem;7906  color: var(--peach-accent);7907  background: transparent;7908  border: none;7909  cursor: pointer;7910  padding: 4px 8px;7911  border-radius: 4px;7912  flex-shrink: 0;7913  transition: opacity 150ms ease;7914}79157916.peach-settings-license-copy:hover {7917  opacity: 0.75;7918}79197920.peach-settings-license-toggle {7921  display: flex;7922  align-items: center;7923  justify-content: center;7924  background: transparent;7925  border: none;7926  cursor: pointer;7927  padding: 4px 6px;7928  border-radius: 4px;7929  color: var(--peach-t2);7930  transition: color 150ms ease;7931}79327933.peach-settings-license-toggle:hover {7934  color: var(--peach-t1);7935}79367937@keyframes peach-panic-pulse {7938  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7939  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7940}79417942[data-motion="reduce"] .peach-panic-final-button {7943  animation: none;7944}79457946/* Vault History — Settings → Vault sub-view */79477948.peach-history-list {7949  border: 1px solid var(--peach-border);7950  border-radius: 8px;7951  overflow: hidden;7952  margin: 8px 0 4px;7953}79547955.peach-history-row {7956  display: flex;7957  align-items: center;7958  justify-content: space-between;7959  padding: 9px 12px;7960  gap: 10px;7961  border-bottom: 1px solid var(--peach-border);7962}79637964.peach-history-row:last-child {7965  border-bottom: none;7966}79677968.peach-history-meta {7969  display: flex;7970  flex-direction: column;7971  gap: 2px;7972  min-width: 0;7973  flex: 1;7974}79757976.peach-history-time {7977  font-size: 0.75rem;7978  font-family: 'IBM Plex Mono', ui-monospace, monospace;7979  color: var(--peach-t0);7980  white-space: nowrap;7981  overflow: hidden;7982  text-overflow: ellipsis;7983}79847985.peach-history-sub {7986  font-size: 0.625rem;7987  color: var(--peach-t2);7988  letter-spacing: 0.06em;7989  text-transform: uppercase;7990  white-space: nowrap;7991  overflow: hidden;7992  text-overflow: ellipsis;7993}79947995.peach-history-btn {7996  flex-shrink: 0;7997  white-space: nowrap;7998  min-width: 56px;7999  text-align: center;8000}80018002.peach-history-btn.is-busy {8003  opacity: 0.65;8004}80058006.peach-history-footer {8007  font-size: 0.625rem;8008  color: var(--peach-t3);8009  letter-spacing: 0.05em;8010  text-align: right;8011  margin: 0;8012  padding: 2px 0 0;8013}80148015/* ── Context menu + swipe-copy flash ─────────────────────── */8016.peach-context-menu-backdrop {8017  position: fixed;8018  inset: 0;8019  background: rgba(0, 0, 0, 0.45);8020  z-index: 100;8021  display: flex;8022  align-items: flex-end;8023  justify-content: center;8024  animation: peach-ctx-fade 140ms ease both;8025}8026.peach-context-menu {8027  width: min(360px, calc(100vw - 24px));8028  margin-bottom: max(env(safe-area-inset-bottom), 12px);8029  background: var(--peach-bg);8030  border: 1px solid var(--peach-t3);8031  border-radius: 14px;8032  padding: 6px;8033  display: flex;8034  flex-direction: column;8035  gap: 2px;8036  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);8037  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;8038}8039@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }8040@keyframes peach-ctx-rise {8041  from { transform: translateY(16px); opacity: 0; }8042  to   { transform: translateY(0);    opacity: 1; }8043}8044.peach-context-menu-item {8045  background: transparent;8046  color: var(--peach-t0);8047  border: 0;8048  border-radius: 10px;8049  padding: 12px 14px;8050  text-align: left;8051  font: inherit;8052  cursor: pointer;8053}8054.peach-context-menu-item:hover,8055.peach-context-menu-item:focus-visible {8056  background: var(--peach-t3);8057}8058.peach-context-menu-item--danger {8059  color: var(--peach-health-bad, #d96868);8060}8061.peach-context-menu-item--cancel {8062  color: var(--peach-t2);8063  margin-top: 4px;8064  border-top: 1px solid var(--peach-t3);8065  border-radius: 0 0 10px 10px;8066}80678068/* Swipe-to-copy flash */8069.peach-entry-row.is-copy-flash {8070  animation: peach-copy-flash 600ms ease both;8071}8072@keyframes peach-copy-flash {8073  0%   { background: transparent; }8074  20%  { background: rgba(217, 153, 51, 0.32); }8075  100% { background: transparent; }8076}80778078html { font-size: 16px; }80798080/* ── Recovery word entry ─────────────────────────────────────────── */8081.peach-lock-recover-link {8082  display: block;8083  width: 100%;8084  margin-top: 12px;8085  background: none;8086  border: none;8087  font-family: "IBM Plex Mono", monospace;8088  font-size: 0.625rem;8089  letter-spacing: 0.06em;8090  color: var(--peach-t2);8091  cursor: pointer;8092  text-align: center;8093  padding: 4px;8094  transition: color 120ms ease;8095}8096.peach-lock-recover-link:hover {8097  color: var(--peach-t0);8098}80998100.lock-screen--recovery {8101  display: flex;8102  flex-direction: column;8103  align-items: stretch;8104  padding: 12px 20px 24px;8105  overflow: hidden;8106}81078108.peach-recovery-nav {8109  display: flex;8110  align-items: center;8111  position: relative;8112  z-index: 1;8113  margin-bottom: 4px;8114}81158116/* Mask runes to the top decorative band only — keep inputs and the8117   bottom CTA button clear. The bottom of the popup is reserved for8118   submit buttons; rendering runes there overlaps the button glyph. */8119.peach-rune-background--recovery {8120  -webkit-mask-image: linear-gradient(8121    to bottom,8122    black 0px, black 85px,8123    transparent 110px,8124    transparent 100%8125  );8126  mask-image: linear-gradient(8127    to bottom,8128    black 0px, black 85px,8129    transparent 110px,8130    transparent 100%8131  );8132}81338134.peach-recovery-header {8135  text-align: center;8136  margin-bottom: 16px;8137  margin-top: 4px;8138}8139.peach-recovery-header .peach-onboarding-headline {8140  font-size: 1.25rem;8141  font-weight: 300;8142  letter-spacing: 0.02em;8143  margin: 0 0 4px;8144}8145.peach-recovery-header .peach-hint {8146  font-family: "IBM Plex Mono", monospace;8147  font-size: 0.625rem;8148  color: var(--peach-t2);8149  letter-spacing: 0.04em;8150  margin: 0;8151}81528153/* 12-word grid: 2 columns × 6 rows */8154.peach-recovery-grid {8155  display: grid;8156  grid-template-columns: repeat(2, 1fr);8157  gap: 12px 20px;8158  width: 100%;8159  margin-bottom: 0;8160}81618162.peach-recovery-word-slot {8163  display: flex;8164  align-items: center;8165  gap: 6px;8166  min-width: 0;8167}81688169.peach-recovery-word-index {8170  font-family: "IBM Plex Mono", monospace;8171  font-size: 0.5rem;8172  color: rgba(255, 255, 255, 0.35);8173  min-width: 14px;8174  flex-shrink: 0;8175  text-align: right;8176  letter-spacing: 0.04em;8177}81788179.peach-recovery-word-input {8180  flex: 1;8181  min-width: 0;8182  background: transparent;8183  border: none;8184  border-bottom: 1px solid rgba(255, 255, 255, 0.22);8185  color: var(--peach-t0);8186  font-family: "IBM Plex Mono", monospace;8187  font-size: 0.6875rem;8188  letter-spacing: 0.06em;8189  padding: 5px 2px 4px;8190  outline: none;8191  text-transform: lowercase;8192  transition: border-color 120ms ease;8193}8194.peach-recovery-word-input::placeholder {8195  color: rgba(255, 255, 255, 0.18);8196}8197.peach-recovery-word-input:focus {8198  border-bottom-color: var(--peach-accent);8199}82008201.peach-recovery-submit {8202  width: 100%;8203  margin-top: auto;8204}82058206.peach-recovery-new-password-form {8207  width: 100%;8208  display: flex;8209  flex-direction: column;8210  gap: 16px;8211  margin-bottom: 8px;8212}8213.peach-recovery-new-password-form .peach-newvault-field {8214  display: flex;8215  flex-direction: column;8216  gap: 4px;8217}82188219/* ── Recovery words display (post-create) ────────────────────────── */8220.lock-screen--recovery-display {8221  display: flex;8222  flex-direction: column;8223  align-items: stretch;8224  padding: 0 20px 20px;8225  min-height: 0;8226  overflow-y: auto;8227}82288229.peach-recovery-words-display {8230  width: 100%;8231  margin-bottom: 16px;8232  border: 1px solid var(--peach-t3);8233  border-radius: 8px;8234  padding: 12px 14px;8235  background: rgba(245, 240, 234, 0.04);8236}82378238.peach-recovery-words-label {8239  font-family: "IBM Plex Mono", monospace;8240  font-size: 0.5rem;8241  letter-spacing: 0.08em;8242  color: var(--peach-t2);8243  text-transform: uppercase;8244  margin-bottom: 10px;8245}82468247.peach-recovery-word-list {8248  list-style: none;8249  margin: 0;8250  padding: 0;8251  display: grid;8252  grid-template-columns: repeat(2, 1fr);8253  gap: 6px 16px;8254}82558256.peach-recovery-word-item {8257  display: flex;8258  align-items: baseline;8259  gap: 5px;8260}82618262.peach-recovery-word-num {8263  font-family: "IBM Plex Mono", monospace;8264  font-size: 0.5rem;8265  color: var(--peach-t2);8266  width: 14px;8267  flex: 0 0 14px;8268  text-align: right;8269  letter-spacing: 0.04em;8270  font-variant-numeric: tabular-nums;8271}82728273.peach-recovery-download-btn {8274  display: block;8275  margin: 10px auto 0;8276  padding: 4px 10px;8277  background: transparent;8278  border: 1px solid var(--peach-border);8279  border-radius: 6px;8280  color: var(--peach-t2);8281  font-family: "IBM Plex Mono", monospace;8282  font-size: 0.5625rem;8283  letter-spacing: 0.06em;8284  text-transform: lowercase;8285  cursor: pointer;8286  transition: border-color 0.15s, color 0.15s;8287}82888289.peach-recovery-download-btn:hover {8290  border-color: var(--peach-accent);8291  color: var(--peach-t0);8292}82938294.peach-recovery-word-text {8295  font-family: "IBM Plex Mono", monospace;8296  font-size: 0.6875rem;8297  letter-spacing: 0.06em;8298  color: var(--peach-t0);8299  text-transform: lowercase;8300}83018302.peach-hint--warning {8303  color: var(--peach-accent);8304  font-style: italic;8305}8306.peach-hint--success {8307  color: var(--peach-t2);8308  font-family: "IBM Plex Mono", monospace;8309  font-size: 0.625rem;8310  letter-spacing: 0.06em;8311}83128313/* Confirmation step */8314.peach-recovery-confirm {8315  width: 100%;8316  flex: 1;8317  display: flex;8318  flex-direction: column;8319}8320.peach-recovery-confirm-label {8321  font-family: "IBM Plex Mono", monospace;8322  font-size: 0.5625rem;8323  letter-spacing: 0.04em;8324  color: var(--peach-t2);8325  text-align: center;8326  margin: 0 0 12px;8327}8328.peach-recovery-confirm-fields {8329  display: flex;8330  flex-direction: column;8331  gap: 14px;8332  margin-bottom: 10px;8333}8334.peach-recovery-confirm-field {8335  display: flex;8336  align-items: center;8337  gap: 8px;8338}8339.peach-recovery-confirm-num {8340  font-family: "IBM Plex Mono", monospace;8341  font-size: 0.5rem;8342  color: var(--peach-t2);8343  min-width: 44px;8344  letter-spacing: 0.04em;8345}8346.peach-recovery-confirm-input {8347  flex: 1;8348  background: transparent;8349  border: none;8350  border-bottom: 1px solid var(--peach-t3);8351  color: var(--peach-t0);8352  font-family: "IBM Plex Mono", monospace;8353  font-size: 0.6875rem;8354  letter-spacing: 0.06em;8355  padding: 4px 2px 3px;8356  outline: none;8357  text-transform: lowercase;8358  transition: border-color 120ms ease;8359}8360.peach-recovery-confirm-input:focus {8361  border-bottom-color: var(--peach-accent);8362}8363.peach-recovery-confirm-input:disabled {8364  opacity: 0.4;8365  cursor: not-allowed;8366}8367.peach-recovery-confirm-btn {8368  width: 100%;8369  margin-top: auto;8370}83718372/* ============================================================8373   Sync info sheet8374   ============================================================ */83758376.peach-sync-info-backdrop {8377  position: fixed;8378  inset: 0;8379  z-index: 200;8380  background: rgba(0, 0, 0, 0.55);8381  display: flex;8382  align-items: flex-end;8383  animation: peach-fade-in 200ms ease forwards;8384}83858386@keyframes peach-fade-in {8387  from { opacity: 0; }8388  to   { opacity: 1; }8389}83908391.peach-sync-info-sheet {8392  width: 100%;8393  background: var(--peach-bg-card, var(--peach-bg));8394  border-top-left-radius: 20px;8395  border-top-right-radius: 20px;8396  padding: 12px 24px 32px;8397  display: flex;8398  flex-direction: column;8399  gap: 20px;8400  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;8401}84028403@keyframes peach-sheet-up {8404  from { transform: translateY(100%); }8405  to   { transform: translateY(0); }8406}84078408.peach-sync-info-handle {8409  width: 36px;8410  height: 4px;8411  border-radius: 2px;8412  background: var(--peach-border);8413  margin: 0 auto 4px;8414  flex-shrink: 0;8415}84168417.peach-sync-info-title {8418  font-family: 'Cormorant Garamond', serif;8419  font-style: italic;8420  font-size: 26px;8421  font-weight: 600;8422  color: var(--peach-t0);8423  margin: 0;8424  line-height: 1.2;8425}84268427.peach-sync-info-body {8428  display: flex;8429  flex-direction: column;8430  gap: 14px;8431}84328433.peach-sync-info-point {8434  display: flex;8435  gap: 12px;8436  align-items: flex-start;8437  font-size: 14px;8438  color: var(--peach-t2);8439  line-height: 1.6;8440  margin: 0;8441}84428443.peach-sync-info-icon {8444  color: var(--peach-accent);8445  font-size: 16px;8446  flex-shrink: 0;8447  margin-top: 1px;8448}84498450.peach-sync-info-actions {8451  display: flex;8452  flex-direction: column;8453  gap: 12px;8454  margin-top: 4px;8455}84568457.peach-sync-info-pro-link {8458  background: none;8459  border: none;8460  font-size: 13px;8461  color: var(--peach-t3);8462  cursor: pointer;8463  padding: 0;8464  font-family: inherit;8465  text-align: center;8466  transition: color 150ms ease;8467}84688469.peach-sync-info-pro-link:hover {8470  color: var(--peach-accent);8471}84728473.peach-btn--full {8474  width: 100%;8475}84768477/* ── Sync screen ── */84788479.peach-sync-coming-soon {8480  display: flex;8481  align-items: flex-start;8482  gap: 10px;8483  padding: 12px 14px;8484  background: var(--peach-s1);8485  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8486  border-radius: 10px;8487}8488.peach-sync-coming-soon__icon {8489  flex-shrink: 0;8490  color: var(--peach-accent);8491  margin-top: 1px;8492  line-height: 0;8493}8494.peach-sync-coming-soon__title {8495  font-family: 'Cormorant Garamond', serif;8496  font-weight: 500;8497  font-size: 13px;8498  color: var(--peach-accent);8499  margin: 0 0 5px;8500  line-height: 1.3;8501}8502.peach-sync-coming-soon__body {8503  font-size: 12px;8504  color: var(--peach-t1);8505  line-height: 1.55;8506  margin: 0;8507}85088509.peach-sync-screen {8510  display: flex;8511  flex-direction: column;8512  height: 100%;8513}85148515.peach-sync-content {8516  flex: 1;8517  overflow-y: auto;8518  padding: 24px 20px 40px;8519  display: flex;8520  flex-direction: column;8521  gap: 24px;8522}85238524/* Intro (State A) */8525.peach-sync-headline {8526  font-family: 'Cormorant Garamond', serif;8527  font-style: italic;8528  font-size: 28px;8529  font-weight: 600;8530  color: var(--peach-t0);8531  margin: 0 0 10px;8532  line-height: 1.2;8533}85348535.peach-sync-intro-body {8536  font-size: 14px;8537  color: var(--peach-t1);8538  line-height: 1.6;8539  margin: 0;8540}85418542.peach-sync-pro-note {8543  display: flex;8544  flex-direction: column;8545  gap: 8px;8546  background: var(--peach-t3);8547  border-radius: 10px;8548  padding: 12px 14px;8549}85508551.peach-sync-pro-note-text {8552  font-size: 12px;8553  color: var(--peach-t2);8554  line-height: 1.5;8555  margin: 0;8556}85578558.peach-sync-pro-link {8559  background: none;8560  border: none;8561  font-size: 12px;8562  color: var(--peach-accent);8563  cursor: pointer;8564  padding: 0;8565  font-family: inherit;8566  text-align: left;8567}85688569/* Status (State C) */8570.peach-sync-status {8571  padding: 12px 0;8572  border-bottom: 1px solid var(--peach-border);8573}85748575.peach-sync-status-row {8576  display: flex;8577  align-items: center;8578  gap: 8px;8579}85808581.peach-sync-dot {8582  width: 7px;8583  height: 7px;8584  border-radius: 50%;8585  flex-shrink: 0;8586}85878588.peach-sync-dot--green { background: var(--peach-health-ok); }8589.peach-sync-dot--amber { background: var(--peach-accent); }85908591.peach-sync-status-text {8592  font-family: 'IBM Plex Mono', monospace;8593  font-size: 11px;8594  color: var(--peach-t2);8595}85968597/* Paired devices */8598.peach-sync-section {8599  display: flex;8600  flex-direction: column;8601  gap: 2px;8602}86038604.peach-sync-section-label {8605  font-family: 'IBM Plex Mono', monospace;8606  font-size: 10px;8607  letter-spacing: 0.1em;8608  color: var(--peach-t3);8609  margin: 0 0 10px;8610}86118612.peach-sync-device-row {8613  display: flex;8614  justify-content: space-between;8615  align-items: baseline;8616  padding: 10px 0;8617  border-bottom: 1px solid var(--peach-border);8618  gap: 12px;8619}86208621.peach-sync-device-name {8622  font-size: 14px;8623  color: var(--peach-t1);8624}86258626.peach-sync-device-meta {8627  font-family: 'IBM Plex Mono', monospace;8628  font-size: 11px;8629  color: var(--peach-t3);8630  white-space: nowrap;8631}86328633.peach-sync-hub-note {8634  padding: 14px 16px;8635  border: 1px solid var(--peach-border);8636  border-radius: 10px;8637  display: flex;8638  flex-direction: column;8639  gap: 6px;8640  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8641}86428643.peach-sync-hub-note-title {8644  font-size: 13px;8645  font-weight: 600;8646  color: var(--peach-t0);8647  margin: 0;8648}86498650.peach-sync-hub-note-body {8651  font-size: 12px;8652  color: var(--peach-t2);8653  line-height: 1.6;8654  margin: 0;8655}86568657/* Action buttons */8658.peach-sync-actions {8659  display: flex;8660  gap: 10px;8661  flex-wrap: wrap;8662}86638664/* Upgrade prompt (State B) */8665.peach-sync-upgrade {8666  display: flex;8667  flex-direction: column;8668  gap: 12px;8669  padding: 16px;8670  border: 1px solid var(--peach-border);8671  border-radius: 10px;8672}86738674.peach-sync-upgrade-text {8675  font-size: 13px;8676  color: var(--peach-t2);8677  line-height: 1.6;8678  margin: 0;8679}86808681/* Network note */8682.peach-sync-network-note {8683  font-size: 12px;8684  color: var(--peach-t3);8685  line-height: 1.6;8686  margin: 0;8687}86888689/* Advanced */8690.peach-sync-advanced {8691  margin-top: auto;8692  padding-top: 16px;8693  border-top: 1px solid var(--peach-border);8694}86958696.peach-sync-advanced-toggle {8697  display: flex;8698  align-items: center;8699  gap: 8px;8700  background: none;8701  border: none;8702  font-family: 'IBM Plex Mono', monospace;8703  font-size: 11px;8704  letter-spacing: 0.08em;8705  color: var(--peach-t3);8706  cursor: pointer;8707  padding: 0;8708  text-transform: uppercase;8709}87108711.peach-sync-advanced-chevron {8712  display: inline-block;8713  transition: transform 200ms ease;8714  font-size: 10px;8715}87168717.peach-sync-advanced-chevron.is-open {8718  transform: rotate(90deg);8719}87208721.peach-sync-advanced-content {8722  margin-top: 14px;8723}87248725.peach-sync-advanced-row {8726  display: flex;8727  justify-content: space-between;8728  align-items: center;8729  gap: 16px;8730}87318732.peach-sync-advanced-title {8733  font-size: 14px;8734  color: var(--peach-t1);8735  margin: 0 0 2px;8736}87378738.peach-sync-advanced-subtitle {8739  font-size: 12px;8740  color: var(--peach-t3);8741  margin: 0;8742  line-height: 1.5;8743}87448745/* ── Add Device — Android scan tabs ─────────────────────────────────────── */87468747.peach-pairing-tabs {8748  display: flex;8749  border: 1px solid var(--peach-border);8750  border-radius: 8px;8751  overflow: hidden;8752  margin-bottom: 4px;8753}87548755.peach-pairing-tab {8756  flex: 1;8757  padding: 10px 0;8758  background: none;8759  border: none;8760  font-family: 'IBM Plex Mono', monospace;8761  font-size: 11px;8762  letter-spacing: 0.06em;8763  color: var(--peach-t2);8764  cursor: pointer;8765  transition: background 150ms, color 150ms;8766}87678768.peach-pairing-tab.is-active {8769  background: var(--peach-accent);8770  color: #fff;8771  font-weight: 600;8772}87738774.peach-pairing-tab:not(.is-active):active {8775  background: var(--peach-border);8776}87778778/* Camera view */8779.peach-pairing-camera-container {8780  position: relative;8781  width: 100%;8782  aspect-ratio: 1;8783  border-radius: 12px;8784  overflow: hidden;8785  background: #000;8786  flex-shrink: 0;8787}87888789.peach-pairing-video {8790  width: 100%;8791  height: 100%;8792  object-fit: cover;8793}87948795.peach-pairing-scan-frame {8796  position: absolute;8797  top: 50%;8798  left: 50%;8799  transform: translate(-50%, -50%);8800  width: 60%;8801  aspect-ratio: 1;8802  border: 2px solid var(--peach-accent);8803  border-radius: 8px;8804  pointer-events: none;8805}88068807/* ── Notes Mode ── */88088809/* Overlay that crossfades over the vault */8810.peach-notes-overlay {8811  position: fixed;8812  inset: 0;8813  z-index: 90;8814  opacity: 0;8815  pointer-events: none;8816  animation: peach-mode-in 220ms ease-in forwards;8817}88188819.peach-notes-overlay.is-visible {8820  opacity: 1;8821  pointer-events: auto;8822}88238824@keyframes peach-mode-in {8825  from { opacity: 0; }8826  to   { opacity: 1; }8827}88288829/* Top-level notes surface */8830.peach-notes-mode {8831  position: absolute;8832  inset: 0;8833  background: var(--peach-bg);8834  display: flex;8835  flex-direction: column;8836}88378838/* Rune canvas positioned behind content */8839.peach-note-rune-canvas {8840  position: absolute;8841  inset: 0;8842  width: 100%;8843  height: 100%;8844  pointer-events: none;8845  z-index: 0;8846}88478848/* TOC wrapper */8849.peach-notes-toc-wrapper {8850  position: absolute;8851  inset: 0;8852  z-index: 1;8853  opacity: 1;8854  pointer-events: auto;8855  transition: opacity 200ms ease;8856}88578858.peach-notes-toc-wrapper.is-hidden {8859  opacity: 0;8860  pointer-events: none;8861}88628863/* Editor wrapper */8864.peach-notes-editor-wrapper {8865  position: absolute;8866  inset: 0;8867  z-index: 2;8868  opacity: 0;8869  pointer-events: none;8870  transition: opacity 200ms ease;8871}88728873.peach-notes-editor-wrapper.is-visible {8874  opacity: 1;8875  pointer-events: auto;8876}88778878/* TOC inner */8879.peach-notes-toc {8880  position: relative;8881  display: flex;8882  flex-direction: column;8883  height: 100%;8884  padding-top: env(safe-area-inset-top, 0px);8885  padding-bottom: env(safe-area-inset-bottom, 0px);8886}88878888/* Shared header */8889.peach-notes-header {8890  display: flex;8891  align-items: center;8892  padding: 12px 16px;8893  gap: 12px;8894  flex-shrink: 0;8895  min-height: 52px;8896  position: relative;8897  z-index: 2;8898}88998900.peach-notes-back {8901  font-size: 22px;8902  color: var(--peach-t2);8903  background: none;8904  border: none;8905  padding: 4px;8906  cursor: pointer;8907  line-height: 1;8908  flex-shrink: 0;8909  transition: color 150ms ease;8910  -webkit-tap-highlight-color: transparent;8911}89128913.peach-notes-back:active { color: var(--peach-t0); }89148915.peach-notes-header-title {8916  flex: 1;8917  font-family: 'Cormorant Garamond', serif;8918  font-style: italic;8919  font-size: 22px;8920  color: var(--peach-t0);8921  text-align: center;8922}89238924.peach-notes-header-title.is-breadcrumb {8925  font-family: 'IBM Plex Mono', monospace;8926  font-style: normal;8927  font-size: 11px;8928  color: var(--peach-t3);8929  letter-spacing: 0.08em;8930  text-transform: uppercase;8931  cursor: pointer;8932}89338934.peach-notes-header-actions {8935  display: flex;8936  gap: 8px;8937  flex-shrink: 0;8938}89398940.peach-notes-header-btn {8941  width: 36px;8942  height: 36px;8943  display: flex;8944  align-items: center;8945  justify-content: center;8946  background: none;8947  border: none;8948  color: var(--peach-t2);8949  cursor: pointer;8950  border-radius: 8px;8951  font-size: 16px;8952  transition: color 150ms ease, background 150ms ease;8953  -webkit-tap-highlight-color: transparent;8954}89558956.peach-notes-header-btn:active {8957  background: rgba(255,255,255,0.06);8958  color: var(--peach-t0);8959}89608961/* Inline search bar */8962.peach-notes-search-input {8963  flex: 1;8964  background: none;8965  border: none;8966  outline: none;8967  font-family: 'IBM Plex Mono', monospace;8968  font-size: 13px;8969  color: var(--peach-t0);8970  padding: 4px 0;8971  letter-spacing: 0.02em;8972}89738974.peach-notes-search-input::placeholder {8975  color: var(--peach-t3);8976}89778978/* TOC list */8979.peach-notes-list-container {8980  flex: 1;8981  overflow-y: auto;8982  overflow-x: hidden;8983  scrollbar-width: none;8984  -webkit-overflow-scrolling: touch;8985  overscroll-behavior: contain;8986  position: relative;8987  z-index: 1;8988}89898990.peach-notes-list-container::-webkit-scrollbar { display: none; }89918992/* Note row */8993.peach-note-row {8994  position: relative;8995  display: grid;8996  grid-template-columns: 44px 8px 1fr 8px auto;8997  align-items: center;8998  min-height: 72px;8999  padding: 16px 20px;9000  border-bottom: 0.5px solid var(--peach-border);9001  cursor: pointer;9002  overflow: hidden;9003  touch-action: pan-y;9004  user-select: none;9005  -webkit-user-select: none;9006  -webkit-tap-highlight-color: transparent;9007}90089009.peach-note-row:first-child {9010  border-top: 0.5px solid var(--peach-border);9011}90129013.peach-note-row:active {9014  background: rgba(255,255,255,0.02);9015}90169017.peach-note-numeral {9018  font-family: 'Cormorant Garamond', serif;9019  font-style: italic;9020  font-size: 15px;9021  color: var(--peach-accent);9022  text-align: right;9023  line-height: 1;9024  flex-shrink: 0;9025}90269027.peach-note-title-gap { /* grid spacer */ }90289029.peach-note-title {9030  font-family: 'Cormorant Garamond', serif;9031  font-style: italic;9032  font-size: 18px;9033  color: var(--peach-t0);9034  line-height: 1.3;9035  min-width: 0;9036  overflow-wrap: break-word;9037}90389039.peach-note-title-match {9040  color: var(--peach-accent);9041}90429043.peach-note-date {9044  font-family: 'IBM Plex Mono', monospace;9045  font-size: 11px;9046  color: var(--peach-t2);9047  white-space: nowrap;9048  text-align: right;9049  flex-shrink: 0;9050  grid-column: 5;9051}90529053/* Swipe underlays */9054.peach-note-row-underlay {9055  position: absolute;9056  inset: 0;9057  display: flex;9058  align-items: center;9059  padding: 0 24px;9060  font-family: 'IBM Plex Mono', monospace;9061  font-size: 11px;9062  letter-spacing: 0.1em;9063  pointer-events: none;9064  z-index: 0;9065}90669067.peach-note-row-underlay--delete {9068  background: #8B2020;9069  color: rgba(255,255,255,0.9);9070  justify-content: flex-end;9071}90729073.peach-note-row-underlay--archive {9074  background: var(--peach-accent);9075  color: #0C0A06;9076  justify-content: flex-start;9077}90789079/* Delete confirm strip */9080.peach-note-delete-confirm {9081  position: absolute;9082  inset: 0;9083  background: var(--peach-bg);9084  display: flex;9085  align-items: center;9086  gap: 12px;9087  padding: 0 20px;9088  font-family: 'IBM Plex Mono', monospace;9089  font-size: 11px;9090  color: var(--peach-t1);9091  letter-spacing: 0.04em;9092  animation: peach-delete-confirm-in 150ms ease both;9093  z-index: 10;9094}90959096@keyframes peach-delete-confirm-in {9097  from { opacity: 0; }9098  to   { opacity: 1; }9099}91009101.peach-note-delete-confirm-btn {9102  background: #8B2020;9103  color: rgba(255,255,255,0.9);9104  border: none;9105  border-radius: 6px;9106  padding: 4px 10px;9107  font-family: 'IBM Plex Mono', monospace;9108  font-size: 10px;9109  cursor: pointer;9110  letter-spacing: 0.06em;9111}91129113.peach-note-delete-cancel-btn {9114  background: none;9115  border: none;9116  color: var(--peach-t3);9117  font-family: 'IBM Plex Mono', monospace;9118  font-size: 10px;9119  cursor: pointer;9120  letter-spacing: 0.06em;9121  padding: 4px 6px;9122}91239124/* + New note button */9125.peach-notes-new-btn {9126  font-family: 'IBM Plex Mono', monospace;9127  font-size: 12px;9128  color: var(--peach-t3);9129  text-align: center;9130  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));9131  background: none;9132  border: none;9133  width: 100%;9134  cursor: pointer;9135  letter-spacing: 0.04em;9136  transition: color 150ms ease;9137  -webkit-tap-highlight-color: transparent;9138}91399140.peach-notes-new-btn:active { color: var(--peach-accent); }91419142/* Empty state */9143.peach-notes-empty {9144  display: flex;9145  flex-direction: column;9146  align-items: center;9147  justify-content: center;9148  flex: 1;9149  padding: 48px 32px;9150  gap: 16px;9151}91529153.peach-notes-empty-text {9154  font-family: 'Cormorant Garamond', serif;9155  font-style: italic;9156  font-size: 20px;9157  color: var(--peach-t3);9158  text-align: center;9159  margin: 0;9160  line-height: 1.4;9161  white-space: pre-line;9162}91639164/* ── Editor surface ── */91659166.peach-note-editor-surface {9167  position: absolute;9168  inset: 0;9169  background: var(--peach-bg);9170  display: flex;9171  flex-direction: column;9172  padding-top: env(safe-area-inset-top, 0px);9173}91749175.peach-note-editor-scroll {9176  flex: 1;9177  overflow-y: auto;9178  overflow-x: hidden;9179  scrollbar-width: none;9180  -webkit-overflow-scrolling: touch;9181  padding: 0 24px 120px;9182  position: relative;9183  z-index: 1;9184}91859186.peach-note-editor-scroll::-webkit-scrollbar { display: none; }91879188/* Desktop toolbar (always visible above body) */9189.peach-note-toolbar-desktop-inline {9190  display: flex;9191  align-items: center;9192  gap: 2px;9193  padding: 6px 0 12px;9194  margin-bottom: 4px;9195  border-bottom: 0.5px solid var(--peach-border);9196}91979198/* Title field */9199.peach-note-title-field {9200  font-family: 'Cormorant Garamond', serif;9201  font-style: italic;9202  font-size: 32px;9203  font-weight: 600;9204  color: var(--peach-t0);9205  line-height: 1.2;9206  padding: 8px 0 0;9207  outline: none;9208  min-height: 44px;9209  word-break: break-word;9210  position: relative;9211  z-index: 1;9212}92139214.peach-note-title-field:empty::before {9215  content: attr(data-placeholder);9216  color: var(--peach-t3);9217  pointer-events: none;9218}92199220/* Hairline separator */9221.peach-note-hairline {9222  height: 0.5px;9223  background: var(--peach-border);9224  margin: 12px 0 20px;9225  position: relative;9226  z-index: 1;9227}92289229/* Body field */9230.peach-note-body-field {9231  font-family: 'DM Sans', sans-serif;9232  font-size: 16px;9233  color: var(--peach-t0);9234  line-height: 1.85;9235  padding: 0;9236  outline: none;9237  min-height: 240px;9238  word-break: break-word;9239  position: relative;9240  z-index: 1;9241}92429243.peach-note-body-field:empty::before {9244  content: attr(data-placeholder);9245  color: var(--peach-t3);9246  font-style: italic;9247  pointer-events: none;9248}92499250.peach-note-body-field h2 {9251  font-family: 'Cormorant Garamond', serif;9252  font-style: italic;9253  font-size: 22px;9254  font-weight: 600;9255  color: var(--peach-t0);9256  margin: 20px 0 8px;9257}92589259.peach-note-body-field blockquote {9260  border-left: 2px solid var(--peach-accent);9261  margin: 12px 0;9262  padding-left: 16px;9263  color: var(--peach-t1);9264  font-style: italic;9265}92669267.peach-note-body-field ul,9268.peach-note-body-field ol {9269  padding-left: 20px;9270  margin: 8px 0;9271}92729273.peach-note-body-field li {9274  margin: 4px 0;9275}92769277.peach-note-body-field hr {9278  border: none;9279  border-top: 0.5px solid var(--peach-border);9280  margin: 16px 0;9281}92829283/* Saved indicator */9284.peach-note-saved-indicator {9285  font-family: 'IBM Plex Mono', monospace;9286  font-size: 11px;9287  color: var(--peach-t3);9288  letter-spacing: 0.04em;9289  text-align: right;9290  padding: 6px 24px;9291  flex-shrink: 0;9292  transition: opacity 300ms ease;9293  pointer-events: none;9294  position: relative;9295  z-index: 1;9296}92979298/* Mobile keyboard toolbar */9299.peach-note-toolbar-mobile {9300  display: flex;9301  align-items: center;9302  padding: 8px 16px;9303  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));9304  background: var(--peach-bg);9305  border-top: 0.5px solid var(--peach-border);9306  gap: 4px;9307  flex-shrink: 0;9308  position: relative;9309  z-index: 10;9310}93119312.peach-note-toolbar-btn {9313  min-width: 36px;9314  height: 36px;9315  display: flex;9316  align-items: center;9317  justify-content: center;9318  background: none;9319  border: none;9320  border-radius: 8px;9321  cursor: pointer;9322  font-size: 14px;9323  color: var(--peach-t1);9324  font-family: 'DM Sans', sans-serif;9325  font-weight: 600;9326  transition: background 100ms ease, color 100ms ease;9327  -webkit-tap-highlight-color: transparent;9328}93299330.peach-note-toolbar-btn--italic { font-style: italic; }9331.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }9332.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }93339334.peach-note-toolbar-divider {9335  width: 0.5px;9336  height: 20px;9337  background: var(--peach-border);9338  margin: 0 4px;9339  flex-shrink: 0;9340}93419342.peach-note-toolbar-spacer { flex: 1; }93439344/* Desktop: larger headline in TOC */9345@media (min-width: 400px) {9346  .peach-notes-header-title:not(.is-breadcrumb) {9347    font-size: 32px;9348  }93499350  .peach-note-row {9351    min-height: 64px;9352    padding: 14px 16px;9353  }9354}93559356/* Flying title — shared element during expansion/collapse */93579358/* ─── Light theme overrides ───────────────────────────────────────────────9359   Tokens that cannot be expressed as variable substitutions — hardcoded9360   context-specific values that need separate light-mode rules. */93619362/* Settings section headers: use text-label (#79766F) per restoration brief —9363   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY9364   presence without fighting the light parchment background. */9365.light .peach-settings-sub-label,9366[data-theme="light"] .peach-settings-sub-label,9367.light .peach-settings-nav-label,9368[data-theme="light"] .peach-settings-nav-label {9369  color: #79766F;9370}93719372/* Secondary action buttons (ghost / subtle): filled with input-well surface9373   so they read as recessed against the parchment card background. */9374.light .peach-btn--ghost:not(.peach-icon-btn),9375[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {9376  background: #EEE7DD;9377  border-color: #DDD5CB;9378  color: #1A1208;9379}9380.light .peach-icon-btn,9381[data-theme="light"] .peach-icon-btn {9382  background: transparent;9383  border-color: transparent;9384}9385.light .peach-btn--subtle,9386[data-theme="light"] .peach-btn--subtle {9387  background: #EEE7DD;9388  border-color: #DDD5CB;9389}93909391/* Wide secondary action button on the lock screen — override the9392   hardcoded dark-mode rgba values with warm parchment equivalents. */9393.light .peach-lock-secondary,9394[data-theme="light"] .peach-lock-secondary {9395  background: #EEE7DD;9396  border-color: #DDD5CB;9397  color: #1A1208;9398}9399.light .peach-lock-secondary:hover,9400[data-theme="light"] .peach-lock-secondary:hover {9401  background: #F0E9DF;9402}94039404/* Entry row hover: bg-row lifts the row above the card surface. */9405.light .peach-entry-row:hover,9406[data-theme="light"] .peach-entry-row:hover {9407  background: #F2EBE1;9408}9409.light .peach-entry-row.is-active,9410[data-theme="light"] .peach-entry-row.is-active {9411  background: #F2EBE1;9412}9413.light .peach-entry-row.is-selected,9414[data-theme="light"] .peach-entry-row.is-selected {9415  background: #F5EDE2;9416}94179418/* ──────────────────────────────────────────────────────────────────────────9419   Pair-device flow — bird-stage animation (Phase 1)9420   See src/popup/components/PairingBirds.tsx and the brief §6.2.9421   Three-act animation gated on the [data-phase] attribute of9422   .peach-pair-pair; child layers (birds, sound arcs, flight wave, dot)9423   each react via either pose class or visibility flag.9424   Tokens: accent surfaces use var(--peach-accent); bird illustration9425   colours are baked into the SVG per the brand-peach exception in §3.1.9426   ────────────────────────────────────────────────────────────────────── */94279428.peach-pair-pair {9429  position: absolute;9430  inset: 0;9431  z-index: 3;9432  display: flex;9433  flex-direction: column;9434  padding: 14px 12px 12px;9435  width: 100%;9436  box-sizing: border-box;9437  gap: 0;9438  background:9439    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9440    var(--peach-bg);9441  color: var(--peach-t0);9442  overflow-y: auto;9443  overflow-x: hidden;9444  scrollbar-width: none;9445  isolation: isolate;9446  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9447}9448@keyframes peach-pair-overlay-in {9449  from { opacity: 0; transform: translateY(8px); }9450  to   { opacity: 1; transform: translateY(0); }9451}9452.peach-pair-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }9453.peach-pair-pair::before {9454  content: '';9455  position: absolute;9456  inset: 0;9457  border-radius: inherit;9458  pointer-events: none;9459  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9460  z-index: 0;9461}9462.peach-pair-pair > * { position: relative; z-index: 1; }94639464/* Header --------------------------------------------------------------- */9465.peach-pair-head {9466  display: flex; align-items: center; gap: 10px;9467}9468.peach-pair-back {9469  width: 32px; height: 32px;9470  display: inline-flex; align-items: center; justify-content: center;9471  background: transparent;9472  border: none;9473  border-radius: 8px;9474  color: var(--peach-t1);9475  cursor: pointer;9476  transition: color 0.15s ease, box-shadow 0.15s ease;9477}9478.peach-pair-back:hover {9479  color: var(--peach-accent);9480  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9481}9482.peach-pair-title {9483  font-family: var(--font-display, Georgia, serif);9484  font-style: italic;9485  font-size: 24px;9486  font-weight: 500;9487  letter-spacing: 0.005em;9488  color: var(--peach-t0);9489  line-height: 1;9490}9491.peach-pair-head-spacer { flex: 1; }94929493/* Chip row ------------------------------------------------------------- */9494.peach-pair-chip-row {9495  display: flex;9496  align-items: center;9497  justify-content: flex-start;9498  margin-top: 12px;9499}9500.peach-pair-chip {9501  display: inline-flex; align-items: center; gap: 8px;9502  padding: 5px 10px 5px 8px;9503  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9504  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9505  border-radius: 999px;9506  font-family: var(--peach-mono, ui-monospace, monospace);9507  font-size: 11px;9508  letter-spacing: 0.04em;9509  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9510}9511.peach-pair-chip-dot {9512  width: 6px; height: 6px; border-radius: 50%;9513  background: var(--peach-accent);9514  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9515}9516.peach-pair-chip[data-phase="paired"] {9517  background: color-mix(in srgb, #4f9eda 12%, transparent);9518  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9519  color: #76b6e8;9520}9521.peach-pair-chip[data-phase="paired"] .peach-pair-chip-dot {9522  background: #76b6e8;9523  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9524}9525.peach-pair-chip[data-phase="timeout"],9526.peach-pair-chip[data-phase="mic_denied"],9527.peach-pair-chip[data-phase="version_mismatch"],9528.peach-pair-chip[data-phase="handshake_failed"] {9529  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9530  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9531  color: var(--peach-warn, #d29257);9532}9533.peach-pair-chip[data-phase="timeout"] .peach-pair-chip-dot,9534.peach-pair-chip[data-phase="mic_denied"] .peach-pair-chip-dot,9535.peach-pair-chip[data-phase="version_mismatch"] .peach-pair-chip-dot,9536.peach-pair-chip[data-phase="handshake_failed"] .peach-pair-chip-dot {9537  background: var(--peach-warn, #d29257);9538  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9539}95409541/* Bird stage ----------------------------------------------------------- */9542.peach-pair-stage {9543  position: relative;9544  margin: 14px 0 8px;9545  height: 180px;9546  border-radius: 12px;9547  background:9548    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9549    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),9550    color-mix(in srgb, var(--peach-bg) 92%, #000);9551  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);9552  overflow: hidden;9553  isolation: isolate;9554}9555.peach-pair-stage::after {9556  content: '';9557  position: absolute;9558  left: 12%; right: 12%;9559  bottom: 36px;9560  height: 1px;9561  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9562}95639564.peach-pair-bird-slot {9565  position: absolute;9566  bottom: 8px;9567  width: 100px;9568  height: 110px;9569  display: flex;9570  align-items: flex-end;9571  justify-content: center;9572}9573.peach-pair-bird-slot-desktop { left: 28px; }9574.peach-pair-bird-slot-mobile { right: 28px; }95759576/* The QR screen is the tallest in the flow: a 180px stage plus headline, sub,9577   QR and action overflows the popup, and the stage is what gets clipped — you9578   saw bird legs and nothing else. Shrink the stage and the birds with it here9579   only, so the birds stay whole and the QR stays comfortably above the fold.9580   Uses the individual `scale` property rather than `transform`, which the9581   mobile bird's hop animation already owns. */9582.peach-adoption-source[data-phase="invitation"] .peach-pair-stage {9583  height: 108px;9584  margin: 8px 0 6px;9585}9586.peach-adoption-source[data-phase="invitation"] .peach-pair-bird-slot {9587  scale: 0.62;9588  transform-origin: center bottom;9589}9590.peach-adoption-source[data-phase="invitation"] .peach-pair-stage::after {9591  bottom: 20px;9592}95939594/* Mobile bird hops in from the right when handshake begins */9595.peach-pair-bird-slot-mobile {9596  opacity: 1;9597  transform: translateX(-6px);9598  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9599}9600.peach-pair-stage.act-listening .peach-pair-bird-slot-mobile,9601.peach-pair-stage.act-chirping .peach-pair-bird-slot-mobile,9602.peach-pair-stage.act-idle .peach-pair-bird-slot-mobile {9603  opacity: 0;9604  transform: translateX(60px) rotate(8deg);9605}9606.peach-pair-stage.act-handshake .peach-pair-bird-slot-desktop,9607.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop {9608  transform: translateX(6px);9609  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9610}96119612/* Paired: both birds bob together */9613.peach-pair-stage.act-paired .peach-pair-bird-slot {9614  animation: peach-pair-happy-bob 1.2s ease-in-out infinite;9615}9616.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { animation-delay: 0.2s; }9617.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop { --bb-x: 6px; }9618.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { --bb-x: -6px; }9619@keyframes peach-pair-happy-bob {9620  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9621  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9622}96239624/* Bird internal -------------------------------------------------------- */9625.peach-pair-bird {9626  width: 108px;9627  height: 108px;9628  transform-origin: 50% 95%;9629}9630.peach-pair-bird svg { width: 100%; height: 100%; overflow: visible; }96319632.peach-pair-bird-body {9633  transform-origin: 50% 80%;9634  animation: peach-pair-bird-bob 2.4s ease-in-out infinite;9635}9636@keyframes peach-pair-bird-bob {9637  0%, 100% { transform: translateY(0) scale(1, 1); }9638  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9639}96409641.peach-pair-bird-eye-group {9642  animation: peach-pair-blink 5.2s steps(1, end) infinite;9643  transform-origin: center;9644  transform-box: fill-box;9645}9646@keyframes peach-pair-blink {9647  0%, 92%, 96%, 100% { transform: scaleY(1); }9648  94%                { transform: scaleY(0.05); }9649}96509651/* Pose: chirping — beak opens, head bobs, aura blooms */9652.peach-pair-bird-pose-chirping .peach-pair-bird-body {9653  animation:9654    peach-pair-bird-bob 2.4s ease-in-out infinite,9655    peach-pair-squeeze 1.7s ease-in-out infinite;9656}9657@keyframes peach-pair-squeeze {9658  0%, 70%, 100% { transform-origin: 50% 85%; }9659  78%           { transform: scale(1.04, 0.96) translateY(1px); }9660  86%           { transform: scale(0.98, 1.02); }9661}9662.peach-pair-bird-pose-chirping .peach-pair-bird-head-group {9663  animation: peach-pair-head-bob 1.7s ease-in-out infinite;9664}9665@keyframes peach-pair-head-bob {9666  0%, 70%, 100% { transform: translateY(0) rotate(0); }9667  78%           { transform: translateY(-3px) rotate(-4deg); }9668  86%           { transform: translateY(-1px) rotate(-2deg); }9669}9670.peach-pair-bird-pose-chirping .peach-pair-bird-beak {9671  animation: peach-pair-beak-open 1.7s ease-in-out infinite;9672}9673@keyframes peach-pair-beak-open {9674  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9675  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9676  86%           { transform: rotate(-6deg); }9677}9678.peach-pair-bird-pose-chirping .peach-pair-bird-aura {9679  animation: peach-pair-aura 1.7s ease-in-out infinite;9680}9681@keyframes peach-pair-aura {9682  0%, 100% { opacity: 0; }9683  50%      { opacity: 0.8; }9684}9685.peach-pair-bird-pose-chirping .peach-pair-bird-tail {9686  animation: peach-pair-tail-twitch 1.7s ease-in-out infinite;9687  transform-origin: 100% 50%;9688}9689@keyframes peach-pair-tail-twitch {9690  0%, 75%, 100% { transform: rotate(0); }9691  82%           { transform: rotate(-3deg) translateX(-1px); }9692}96939694/* Pose: attentive — head tilts toward partner */9695.peach-pair-bird-pose-attentive .peach-pair-bird-head-group {9696  animation: peach-pair-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9697}9698@keyframes peach-pair-head-tilt {9699  0%   { transform: rotate(0) translateY(0); }9700  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9701  100% { transform: rotate(-6deg); }9702}9703.peach-pair-bird-pose-attentive .peach-pair-bird-tail {9704  animation: peach-pair-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9705  transform-origin: 100% 50%;9706}9707@keyframes peach-pair-tail-cock {9708  0%   { transform: rotate(0); }9709  100% { transform: rotate(-4deg); }9710}97119712/* Pose: happy — wing flutter, tuft perk, tail wag */9713.peach-pair-bird-pose-happy .peach-pair-bird-wing {9714  transform-origin: 80% 60%;9715  animation: peach-pair-wing-flutter 0.32s ease-in-out 5;9716}9717@keyframes peach-pair-wing-flutter {9718  0%, 100% { transform: rotate(0) translateY(0); }9719  50%      { transform: rotate(-16deg) translateY(-2px); }9720}9721.peach-pair-bird-pose-happy .peach-pair-bird-tuft {9722  transform-origin: 0% 100%;9723  animation: peach-pair-tuft-perk 0.4s ease-in-out 3;9724}9725@keyframes peach-pair-tuft-perk {9726  0%, 100% { transform: rotate(0); }9727  50%      { transform: rotate(-15deg) translateY(-1px); }9728}9729.peach-pair-bird-pose-happy .peach-pair-bird-tail {9730  transform-origin: 100% 50%;9731  animation: peach-pair-tail-wag 0.5s ease-in-out 4;9732}9733@keyframes peach-pair-tail-wag {9734  0%, 100% { transform: rotate(0); }9735  25%      { transform: rotate(6deg); }9736  75%      { transform: rotate(-6deg); }9737}9738.peach-pair-bird-pose-happy .peach-pair-bird-head-group {9739  animation: peach-pair-head-perk 0.5s ease-out;9740}9741@keyframes peach-pair-head-perk {9742  0%   { transform: translateY(0); }9743  40%  { transform: translateY(-3px) rotate(2deg); }9744  100% { transform: translateY(0); }9745}97469747/* Pose: sad — body droops forward */9748.peach-pair-bird-pose-sad .peach-pair-bird-body {9749  transform: translateY(5px) rotate(-2deg);9750  animation: none;9751}9752.peach-pair-bird-pose-sad .peach-pair-bird-head-group {9753  transform: translateY(4px) rotate(8deg);9754}9755.peach-pair-bird-pose-sad .peach-pair-bird-tuft { transform: rotate(15deg) translateY(2px); }9756.peach-pair-bird-pose-sad .peach-pair-bird-tail { transform: rotate(8deg) translateY(2px); }97579758.peach-pair-bird-pose-hidden { opacity: 0; }97599760/* Sound arcs ----------------------------------------------------------- */9761.peach-pair-arcs {9762  position: absolute;9763  top: 18px;9764  width: 96px;9765  height: 70px;9766  pointer-events: none;9767}9768.peach-pair-arcs-right { right: -60px; }9769.peach-pair-arcs-left  { left: -60px; transform: scaleX(-1); }9770.peach-pair-arc {9771  position: absolute;9772  top: 50%;9773  left: 0;9774  width: 40px;9775  height: 40px;9776  margin-top: -20px;9777  border: 1.2px solid #f4d5a8;9778  border-color: transparent #f4d5a8 transparent transparent;9779  border-radius: 50%;9780  opacity: 0;9781  animation: peach-pair-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9782}9783@keyframes peach-pair-arc-expand {9784  0%   { transform: scale(0.4); opacity: 0; }9785  20%  { opacity: 0.9; }9786  100% { transform: scale(1.6); opacity: 0; }9787}97889789/* Flight wave ---------------------------------------------------------- */9790.peach-pair-flight-track {9791  position: absolute;9792  inset: 32px 36px 38px 36px;9793  pointer-events: none;9794}9795.peach-pair-flight-wave {9796  position: absolute;9797  top: 8px;9798  left: 76px;9799  right: 76px;9800  height: 60px;9801  width: auto;9802  opacity: 0;9803  transition: opacity 0.15s ease;9804  stroke: #f4d5a8;9805  fill: none;9806}9807.peach-pair-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9808.peach-pair-flight-wave.is-visible { opacity: 1; }9809.peach-pair-flight-path,9810.peach-pair-flight-path-2 {9811  stroke-dasharray: 240;9812  stroke-dashoffset: 240;9813  stroke-linecap: round;9814  fill: none;9815}9816.peach-pair-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9817.peach-pair-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9818.peach-pair-flight-wave.is-visible .peach-pair-flight-path {9819  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9820}9821.peach-pair-flight-wave.is-visible .peach-pair-flight-path-2 {9822  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9823}9824@keyframes peach-pair-fly {9825  0%   { stroke-dashoffset: 240; opacity: 0; }9826  20%  { opacity: 1; }9827  100% { stroke-dashoffset: -120; opacity: 0; }9828}98299830/* Connection dot ------------------------------------------------------- */9831.peach-pair-dot {9832  position: absolute;9833  top: 50%; left: 50%;9834  transform: translate(-50%, -50%);9835  width: 40px; height: 40px;9836  opacity: 0;9837  pointer-events: none;9838  transition: opacity 0.3s ease;9839  color: var(--peach-accent);9840}9841.peach-pair-dot.is-visible { opacity: 1; }9842.peach-pair-dot-glow {9843  position: absolute; top: 50%; left: 50%;9844  transform: translate(-50%, -50%);9845  width: 38px; height: 38px;9846  border-radius: 50%;9847  filter: blur(10px);9848  opacity: 0.55;9849  background: var(--peach-accent);9850  animation: peach-pair-dot-bloom 1.4s ease-out;9851}9852.peach-pair-dot-core {9853  position: absolute; top: 50%; left: 50%;9854  transform: translate(-50%, -50%);9855  width: 8px; height: 8px;9856  border-radius: 50%;9857  background: var(--peach-accent);9858  box-shadow: 0 0 12px currentColor;9859  animation: peach-pair-dot-core 1.4s ease-out;9860}9861.peach-pair-dot-ring {9862  position: absolute; top: 50%; left: 50%;9863  width: 60px; height: 60px;9864  transform: translate(-50%, -50%);9865  animation: peach-pair-dot-ring 1.4s linear;9866  stroke: var(--peach-accent);9867}9868@keyframes peach-pair-dot-bloom {9869  0%   { width: 4px; height: 4px; opacity: 0; }9870  35%  { width: 60px; height: 60px; opacity: 0.7; }9871  100% { width: 38px; height: 38px; opacity: 0.55; }9872}9873@keyframes peach-pair-dot-core {9874  0%   { width: 0; height: 0; }9875  35%  { width: 12px; height: 12px; }9876  100% { width: 8px; height: 8px; }9877}9878@keyframes peach-pair-dot-ring {9879  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9880  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9881  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9882}98839884/* Motes — drift upward across the stage */9885.peach-pair-motes {9886  position: absolute;9887  inset: 0;9888  pointer-events: none;9889}9890.peach-pair-mote {9891  position: absolute;9892  width: 2px; height: 2px;9893  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9894  border-radius: 50%;9895  bottom: 32px;9896  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9897  opacity: 0;9898  animation: peach-pair-mote-drift 6s linear infinite;9899  animation-delay: calc(var(--mote-i, 0) * 0.7s);9900}9901@keyframes peach-pair-mote-drift {9902  0%   { transform: translateY(0); opacity: 0; }9903  10%  { opacity: 0.6; }9904  90%  { opacity: 0.1; }9905  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9906}99079908/* Status copy ---------------------------------------------------------- */9909.peach-pair-copy-host {9910  margin: 4px 4px 10px;9911  text-align: center;9912  min-height: 50px;9913}9914.peach-pair-copy {9915  animation: peach-pair-copy-in 0.35s ease both;9916}9917@keyframes peach-pair-copy-in {9918  from { opacity: 0; transform: translateY(4px); }9919  to   { opacity: 1; transform: translateY(0); }9920}9921.peach-pair-headline {9922  font-family: var(--font-display, Georgia, serif);9923  font-style: italic;9924  font-size: 20px;9925  font-weight: 500;9926  line-height: 1.2;9927  letter-spacing: 0.005em;9928  color: var(--peach-t0);9929  margin-bottom: 6px;9930}9931.peach-pair-copy-listening .peach-pair-headline,9932.peach-pair-copy-chirping .peach-pair-headline,9933.peach-pair-copy-idle .peach-pair-headline {9934  font-family: inherit;9935  font-style: normal;9936  font-weight: 500;9937  font-size: 15px;9938  color: var(--peach-t0);9939  letter-spacing: 0;9940}9941.peach-pair-copy-paired .peach-pair-headline {9942  color: var(--peach-t0);9943  font-weight: 600;9944}9945.peach-pair-sub {9946  font-size: 12.5px;9947  line-height: 1.45;9948  color: var(--peach-t1);9949  max-width: 280px;9950  margin: 0 auto;9951  text-wrap: pretty;9952}99539954/* Status action -------------------------------------------------------- */9955.peach-pair-action {9956  margin: 2px 4px 10px;9957  margin-top: auto;9958  display: flex;9959  flex-direction: column;9960  gap: 8px;9961}9962.peach-pair-action-waiting {9963  display: flex;9964  align-items: center;9965  justify-content: space-between;9966  gap: 12px;9967}9968.peach-pair-cancel {9969  min-width: 96px;9970}9971.peach-pair-listening {9972  display: inline-flex; align-items: center; gap: 4px;9973  font-family: var(--peach-mono, ui-monospace, monospace);9974  font-size: 9.5px;9975  text-transform: uppercase;9976  letter-spacing: 0.12em;9977  color: var(--peach-t1);9978  padding: 8px 10px;9979}9980.peach-pair-listen-dot {9981  width: 4px; height: 4px;9982  border-radius: 50%;9983  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9984  animation: peach-pair-listen-pulse 1.2s ease-in-out infinite;9985}9986.peach-pair-listen-dot:nth-child(2) { animation-delay: 0.2s; }9987.peach-pair-listen-dot:nth-child(3) { animation-delay: 0.4s; }9988.peach-pair-listen-label { margin-left: 6px; }9989@keyframes peach-pair-listen-pulse {9990  0%, 100% { opacity: 0.25; transform: scale(0.9); }9991  50%      { opacity: 1;     transform: scale(1.15); }9992}99939994.peach-pair-action-handshake {9995  display: flex;9996  flex-direction: column;9997  align-items: center;9998  gap: 8px;9999  padding: 8px 4px;10000}10001.peach-pair-meter {10002  width: 100%;10003  max-width: 280px;10004  height: 2px;10005  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);10006  border-radius: 2px;10007  position: relative;10008  overflow: hidden;10009}10010.peach-pair-meter-bar {10011  position: absolute;10012  top: 0; bottom: 0;10013  width: 30%;10014  left: -30%;10015  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);10016  animation: peach-pair-meter-sweep 1.4s ease-in-out infinite;10017}10018@keyframes peach-pair-meter-sweep {10019  0%   { left: -30%; }10020  100% { left: 100%; }10021}10022.peach-pair-meter-label {10023  font-family: var(--peach-mono, ui-monospace, monospace);10024  font-size: 9.5px;10025  text-transform: uppercase;10026  letter-spacing: 0.14em;10027  color: var(--peach-t1);10028}1002910030.peach-pair-action-paired {10031  display: flex;10032  align-items: center;10033  gap: 10px;10034}10035.peach-pair-device-confirm {10036  flex: 1;10037  display: inline-flex;10038  align-items: center;10039  gap: 8px;10040  padding: 9px 10px 9px 12px;10041  border-radius: 10px;10042  background: color-mix(in srgb, #76b6e8 12%, transparent);10043  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);10044  font-size: 12.5px;10045  color: var(--peach-t0);10046  min-width: 0;10047}10048.peach-pair-device-confirm-glyph {10049  display: inline-flex;10050  color: #76b6e8;10051}10052.peach-pair-device-confirm-name {10053  flex: 1;10054  overflow: hidden;10055  text-overflow: ellipsis;10056  white-space: nowrap;10057}10058.peach-pair-device-confirm-trust {10059  font-family: var(--peach-mono, ui-monospace, monospace);10060  font-size: 9.5px;10061  text-transform: uppercase;10062  letter-spacing: 0.1em;10063  color: #76b6e8;10064  padding: 2px 6px;10065  border-radius: 4px;10066  background: color-mix(in srgb, #76b6e8 14%, transparent);10067}10068.peach-pair-done {10069  min-width: 80px;10070}10071.peach-pair-retry {10072  align-self: center;10073  display: block;10074  margin: 6px auto 0;10075  min-width: 120px;10076}10077.peach-pair-mic-help {10078  font-size: 12px;10079  color: var(--peach-t1);10080  text-align: center;10081  max-width: 320px;10082  margin: 0 auto;10083}1008410085/* Rest state — bird stage at idle pose, primary CTA + paired list */10086.peach-pair-pair[data-phase="idle"] .peach-pair-stage {10087  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */10088  height: 160px;10089}10090.peach-pair-pair-start {10091  width: 100%;10092  display: inline-flex;10093  align-items: center;10094  justify-content: center;10095  gap: 8px;10096  padding: 11px 14px;10097  border-radius: 10px;10098  background: var(--peach-accent);10099  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);10100  color: #1a0905;10101  font-family: inherit;10102  font-size: 13px;10103  font-weight: 600;10104  letter-spacing: 0.01em;10105  cursor: pointer;10106  transition: filter 0.15s ease, transform 0.1s ease;10107}10108.peach-pair-pair-start:hover { filter: brightness(1.08); }10109.peach-pair-pair-start:active { transform: translateY(1px); }1011010111.peach-pair-paired-section {10112  margin-top: 14px;10113  display: flex;10114  flex-direction: column;10115  gap: 8px;10116}10117.peach-pair-paired-heading {10118  margin: 0;10119  font-family: var(--peach-mono, ui-monospace, monospace);10120  font-size: 10px;10121  font-weight: 500;10122  letter-spacing: 0.14em;10123  text-transform: uppercase;10124  color: var(--peach-t1);10125}1012610127/* Footer --------------------------------------------------------------- */10128.peach-pair-foot {10129  margin: 10px -4px -2px;10130  margin-top: auto;10131}10132.peach-pair-foot-divider {10133  height: 1px;10134  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);10135  margin-bottom: 10px;10136}10137.peach-pair-foot-text {10138  font-size: 11px;10139  line-height: 1.5;10140  color: var(--peach-t1);10141  text-align: center;10142  padding: 0 4px;10143  text-wrap: pretty;10144}1014510146/* Screen-reader-only live region. Kept off the visual flow but read by10147   assistive tech as the pairing phase advances. */10148.peach-sr-only {10149  position: absolute;10150  width: 1px; height: 1px;10151  padding: 0; margin: -1px;10152  overflow: hidden;10153  clip: rect(0, 0, 0, 0);10154  white-space: nowrap;10155  border: 0;10156}1015710158/* Reduced motion — stage simplifies to opacity transitions only */10159@media (prefers-reduced-motion: reduce) {10160  .peach-pair-bird-body,10161  .peach-pair-bird-head-group,10162  .peach-pair-bird-beak,10163  .peach-pair-bird-wing,10164  .peach-pair-bird-tuft,10165  .peach-pair-bird-tail,10166  .peach-pair-bird-eye-group,10167  .peach-pair-bird-aura,10168  .peach-pair-arc,10169  .peach-pair-flight-path,10170  .peach-pair-flight-path-2,10171  .peach-pair-dot-glow,10172  .peach-pair-dot-core,10173  .peach-pair-dot-ring,10174  .peach-pair-mote,10175  .peach-pair-meter-bar,10176  .peach-pair-listen-dot,10177  .peach-pair-bird-slot,10178  .peach-pair-bird-slot-mobile {10179    animation: none !important;10180    transition: opacity 0.2s linear !important;10181  }10182}1018310184/* ─────────────────────────────────────────────────────────────────10185   Settings → Sync surface. Wraps the same bird10186   animation used by the pairing flow with a paired-devices list and10187   the "Pair a device" CTA.10188   ───────────────────────────────────────────────────────────────── */10189.peach-pair-settings {10190  position: absolute;10191  inset: 0;10192  z-index: 3;10193  display: flex;10194  flex-direction: column;10195  gap: 18px;10196  padding: 14px 12px 12px;10197  width: 100%;10198  box-sizing: border-box;10199  overflow-y: auto;10200  overflow-x: hidden;10201  /* Same warm surface as the pairing screen — unifies the two views. */10202  background:10203    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),10204    var(--peach-bg);10205  color: var(--peach-t0);10206  isolation: isolate;10207  /* Hide native scrollbar — content fits 99% of the time and a chunky10208     gutter ruins the surface. */10209  scrollbar-width: none;10210  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;10211}10212.peach-pair-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }10213.peach-pair-settings::before {10214  content: '';10215  position: absolute;10216  inset: 0;10217  pointer-events: none;10218  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);10219  z-index: 0;10220}10221.peach-pair-settings > * { position: relative; z-index: 1; }1022210223.peach-pair-settings--pairing {10224  padding: 0;10225  align-items: stretch;10226  justify-content: stretch;10227  background: none;10228  isolation: auto;10229}10230.peach-pair-settings--pairing::before { display: none; }1023110232.peach-pair-settings-header {10233  display: flex;10234  align-items: center;10235  gap: 10px;10236}10237.peach-pair-settings-title {10238  margin: 0;10239  font-family: var(--font-display, Georgia, serif);10240  font-style: italic;10241  font-size: 24px;10242  font-weight: 500;10243  line-height: 1;10244  color: var(--peach-t0);10245  letter-spacing: 0.005em;10246}10247.peach-pair-settings-section {10248  margin: 6px 0 -4px;10249  font-size: 11px;10250  font-weight: 600;10251  letter-spacing: 0.08em;10252  text-transform: uppercase;10253  color: var(--peach-text-muted);10254}10255.peach-pair-settings-error {10256  font-size: 12px;10257  padding: 8px 10px;10258  border-radius: 8px;10259  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);10260  color: var(--peach-text);10261}10262.peach-pair-settings-footer {10263  margin-top: auto;10264  padding-top: 18px;10265  font-size: 11.5px;10266  line-height: 1.5;10267  color: var(--peach-text-muted);10268  text-align: center;10269}1027010271/* Hero card shown when no devices are paired yet. */10272.peach-pair-hero {10273  display: flex;10274  flex-direction: column;10275  align-items: center;10276  gap: 12px;10277  padding: 20px 12px 8px;10278  text-align: center;10279}10280.peach-pair-hero-svg {10281  display: block;10282  max-width: 100%;10283  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));10284}10285.peach-pair-hero-headline {10286  margin: 0;10287  font-family: var(--font-display, Georgia, serif);10288  font-style: italic;10289  font-size: 20px;10290  font-weight: 500;10291  line-height: 1.2;10292  letter-spacing: 0.005em;10293  color: var(--peach-t0);10294}10295.peach-pair-hero-sub {10296  margin: 0;10297  font-size: 13px;10298  line-height: 1.5;10299  color: var(--peach-t1);10300  max-width: 320px;10301  text-wrap: pretty;10302}1030310304.peach-pair-pair-cta {10305  display: flex;10306  justify-content: center;10307  padding: 4px 0 6px;10308}10309.peach-pair-pair-button {10310  display: inline-flex;10311  align-items: center;10312  gap: 8px;10313  min-width: 220px;10314  justify-content: center;10315}10316.peach-pair-pair-button-icon {10317  flex: 0 0 auto;10318}1031910320/* Paired devices list. Roomy rows that look at home next to the rest10321   of Settings; stale rows get a soft warm-warning border tint. */10322.peach-pair-device-list {10323  list-style: none;10324  margin: 0;10325  padding: 0;10326  display: flex;10327  flex-direction: column;10328  gap: 8px;10329}10330.peach-pair-device-row {10331  display: flex;10332  align-items: center;10333  gap: 12px;10334  padding: 12px;10335  border-radius: 10px;10336  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10337  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);10338}10339.peach-pair-device-row[data-stale="true"] {10340  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);10341}10342.peach-pair-device-icon {10343  width: 32px;10344  height: 32px;10345  display: flex;10346  align-items: center;10347  justify-content: center;10348  border-radius: 8px;10349  color: var(--peach-text);10350  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);10351}10352.peach-pair-device-info {10353  flex: 1;10354  display: flex;10355  flex-direction: column;10356  gap: 2px;10357  min-width: 0;10358}10359.peach-pair-device-name {10360  font-size: 14px;10361  font-weight: 600;10362  color: var(--peach-text);10363  overflow: hidden;10364  text-overflow: ellipsis;10365  white-space: nowrap;10366}10367.peach-pair-device-meta {10368  font-size: 11.5px;10369  color: var(--peach-text-muted);10370  display: flex;10371  flex-wrap: wrap;10372  align-items: center;10373  gap: 8px;10374}10375.peach-pair-device-badge {10376  font-size: 10.5px;10377  font-weight: 500;10378  letter-spacing: 0.02em;10379  padding: 2px 6px;10380  border-radius: 999px;10381  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);10382  color: var(--peach-text);10383}10384.peach-pair-device-stale {10385  font-size: 10.5px;10386  font-weight: 500;10387  color: var(--peach-warn, #d29257);10388}10389.peach-pair-device-remove {10390  flex: 0 0 auto;10391  color: var(--peach-text-muted);10392}10393.peach-pair-device-remove:hover {10394  color: var(--peach-danger, #c25b4a);10395}10396.peach-pair-unpair-confirm {10397  display: flex;10398  gap: 6px;10399  align-items: center;10400}1040110402/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */10403.peach-pair-pro-card {10404  position: relative;10405  margin: 18px 12px;10406  padding: 18px 20px 22px;10407  border-radius: 22px;10408  background:10409    radial-gradient(140% 90% at 50% 0%,10410      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,10411      transparent 60%),10412    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10413  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);10414  box-shadow:10415    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,10416    0 18px 40px -24px rgba(0, 0, 0, 0.45);10417  display: flex;10418  flex-direction: column;10419  align-items: center;10420  gap: 10px;10421  text-align: center;10422  overflow: hidden;10423}10424.peach-pair-pro-stage {10425  position: relative;10426  width: 220px;10427  height: 140px;10428  display: flex;10429  align-items: flex-end;10430  justify-content: center;10431  margin-bottom: 2px;10432}10433.peach-pair-pro-bird-slot {10434  width: 140px;10435  height: 132px;10436  display: flex;10437  align-items: flex-end;10438  justify-content: center;10439  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));10440}10441.peach-pair-pro-bird-slot .peach-pair-bird {10442  width: 100%;10443  height: 100%;10444}10445.peach-pair-pro-bird-slot .peach-pair-bird svg {10446  width: 100%;10447  height: 100%;10448  overflow: visible;10449}10450.peach-pair-pro-headline {10451  margin: 4px 0 0;10452  font-family: var(--font-display, "Cormorant Garamond", serif);10453  font-style: italic;10454  font-size: 19px;10455  font-weight: 500;10456  letter-spacing: 0.01em;10457  color: var(--peach-t0);10458  max-width: 280px;10459  line-height: 1.25;10460}10461.peach-pair-pro-body {10462  margin: 0;10463  font-size: 13px;10464  line-height: 1.55;10465  color: var(--peach-t1);10466  max-width: 300px;10467}10468.peach-pair-pro-cta {10469  margin-top: 4px;10470}10471.peach-pair-pro-foot {10472  margin: 2px 0 0;10473  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10474  font-size: 0.625rem;10475  letter-spacing: 0.08em;10476  text-transform: uppercase;10477  color: var(--peach-t2);10478  opacity: 0.75;10479}1048010481/* Shell border and shadow in light mode: match dark mode's near-invisible10482   border weight so the popup frame looks the same in both themes. */10483.light .peach-shell,10484.light .peach-screen {10485  border-color: rgba(26, 18, 8, 0.07);10486  box-shadow:10487    0 2px 8px rgba(80, 56, 32, 0.08),10488    0 14px 48px rgba(80, 56, 32, 0.10),10489    0 0 0 1px rgba(26, 18, 8, 0.04);10490}1049110492/* HOLE 4: the revoke confirmation carries its own disclosure, so it needs the10493   full row width rather than sitting inline beside the device name. */10494.peach-settings-row:has(> .peach-unpair-confirm) { flex-wrap: wrap; }10495.peach-unpair-confirm {10496  display: flex;10497  flex-direction: column;10498  gap: 8px;10499  width: 100%;10500}10501.peach-unpair-confirm-note {10502  margin: 0;10503  font-size: 0.6875rem;10504  line-height: 1.5;10505  color: var(--peach-t2);10506}1050710508/* Sync mode selector — three named choices (public / private / off). Replaces10509   the old binary "local network only" toggle; see docs/sync-lan-retirement.md. */10510.peach-sync-mode {10511  display: flex;10512  align-items: flex-start;10513  gap: 10px;10514  width: 100%;10515  text-align: left;10516  padding: 10px 12px;10517  margin-top: 8px;10518  border-radius: 10px;10519  border: 1px solid var(--peach-border);10520  background: color-mix(in srgb, var(--peach-t0) 3%, transparent);10521  color: var(--peach-t1);10522  cursor: pointer;10523  transition: border-color var(--peach-dur-80) var(--peach-curve-arrival),10524              background-color var(--peach-dur-80) var(--peach-curve-arrival);10525}10526.peach-sync-mode:hover:not(:disabled) {10527  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);10528}10529.peach-sync-mode.is-active {10530  border-color: var(--peach-accent);10531  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);10532}10533.peach-sync-mode:disabled { opacity: 0.6; cursor: default; }10534.peach-sync-mode-main { display: flex; flex-direction: column; gap: 3px; flex: 1; }10535.peach-sync-mode-title { font-size: 12px; }10536.peach-sync-mode-sub {10537  font-size: 11px;10538  line-height: 1.5;10539  color: var(--peach-t2);10540}10541.peach-sync-mode-pip {10542  flex: none;10543  margin-top: 3px;10544  width: 12px; height: 12px;10545  border-radius: 50%;10546  border: 1px solid var(--peach-t3);10547}10548.peach-sync-mode.is-active .peach-sync-mode-pip {10549  border-color: var(--peach-accent);10550  background:10551    radial-gradient(circle at 50% 50%, var(--peach-accent) 0 42%, transparent 44%);10552}10553.peach-sync-mode-disclosure {10554  margin: 10px 2px 0;10555  font-size: 11px;10556  line-height: 1.5;10557  color: var(--peach-t2);10558}10559.peach-sync-mode-warn { color: var(--peach-breach); }1056010561/* Compact form, used mid-pairing: a quiet line, not a decision to make. */10562.peach-sync-mode-summary {10563  margin: 8px 2px 0;10564  font-size: 11px;10565  color: var(--peach-t2);10566  text-align: center;10567}10568.peach-sync-mode-change {10569  background: none;10570  border: none;10571  padding: 0;10572  font: inherit;10573  color: var(--peach-accent);10574  text-decoration: underline;10575  cursor: pointer;10576}