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  /* Grid item of .peach-shell: without a zero min-width the nowrap alert text675     sizes this item to its min-content, blowing the fixed-width shell past676     320px and clipping/distorting everything else in it. */677  min-width: 0;678}679.peach-sync-alert {680  display: flex;681  align-items: center;682  gap: 8px;683  padding: 8px 10px;684  border-radius: 7px;685  min-width: 0;686  max-width: 100%;687  background: color-mix(in srgb, #C8A840 14%, transparent);688  border: 1px solid color-mix(in srgb, #C8A840 38%, transparent);689}690.peach-sync-alert-text {691  flex: 1;692  min-width: 0;693  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;694  font-size: 10px;695  line-height: 1.45;696  color: var(--peach-t0);697  overflow: hidden;698  text-overflow: ellipsis;699  white-space: nowrap;700}701.peach-sync-alert-flip {702  flex-shrink: 0;703  background: none;704  border: none;705  color: var(--peach-t2);706  font-size: 14px;707  line-height: 1;708  cursor: pointer;709  padding: 0 2px;710}711.peach-sync-alert-flip:hover { color: var(--peach-t0); }712.peach-sync-alert-count {713  flex-shrink: 0;714  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;715  font-size: 9px;716  color: var(--peach-t2);717  min-width: 24px;718  text-align: center;719}720.peach-sync-alert-dismiss {721  flex-shrink: 0;722  background: none;723  border: none;724  color: var(--peach-t2);725  font-size: 14px;726  line-height: 1;727  cursor: pointer;728  padding: 0 2px;729}730.peach-sync-alert-dismiss:hover { color: var(--peach-t0); }731732/* UI-8 / LV-2: non-blocking homograph warning under the URL editor. */733.peach-homograph-warning {734  margin: 4px 0 2px;735  padding: 6px 8px;736  border-radius: 6px;737  background: color-mix(in srgb, var(--peach-breach) 12%, transparent);738  border: 1px solid color-mix(in srgb, var(--peach-breach) 36%, transparent);739  color: var(--peach-t1);740  font-size: 0.6875rem;741  line-height: 1.4;742}743.peach-additional-url-row {744  display: flex;745  align-items: center;746  gap: 6px;747}748.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }749.peach-additional-url-remove {750  background: transparent;751  border: 1px solid var(--peach-t3);752  color: var(--peach-t2);753  width: 22px;754  height: 22px;755  border-radius: 4px;756  cursor: pointer;757  font-size: 0.875rem;758  line-height: 1;759  display: inline-flex;760  align-items: center;761  justify-content: center;762  flex-shrink: 0;763  transition: color 120ms ease, border-color 120ms ease;764}765.peach-additional-url-remove:hover:not(:disabled) {766  color: var(--peach-accent);767  border-color: var(--peach-border-accent);768}769.peach-additional-urls-add { align-self: flex-start; }770771/* Delete row */772.peach-entry-delete-row {773  display: flex;774  align-items: center;775  gap: 8px;776  padding-top: 18px;777  margin-top: 8px;778  border-top: 1px solid var(--peach-t3);779}780.peach-delete-btn {781  font-size: 0.6875rem;782  color: var(--peach-t2);783  padding: 4px 0;784}785.peach-delete-confirm-text {786  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;787  font-size: 0.6875rem;788  font-style: italic;789  color: var(--peach-t2);790  flex-shrink: 0;791}792793/* TOTP band */794.peach-totp-band {795  border-top: 1px solid var(--peach-t3);796  padding: 12px 20px 14px;797  position: relative;798  display: grid;799  grid-template-columns: 1fr auto;800  gap: 10px;801}802.peach-totp-main {803  min-width: 0;804  cursor: pointer;805  user-select: none;806}807.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }808.peach-totp-code-row {809  display: flex;810  align-items: flex-end;811  gap: 10px;812  min-width: 0;813}814.peach-totp-code {815  margin: 2px 0 0;816  font-family: var(--font-display);817  font-style: italic;818  font-weight: 300;819  font-size: 38px; color: var(--peach-accent);820  line-height: 0.95; min-height: 1em;821  min-width: 0;822}823.peach-totp-code-text {824  display: inline-flex;825  overflow: hidden;826  text-overflow: ellipsis;827  white-space: nowrap;828}829.peach-totp-copy-btn {830  margin-bottom: 2px;831  flex-shrink: 0;832  border-color: transparent;833}834.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }835.peach-totp-countdown {836  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;837  font-size: 22px; color: var(--peach-t1);838}839.peach-totp-ring { transform: rotate(-90deg); }840.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }841.peach-totp-ring-progress {842  fill: none; stroke: var(--peach-accent); stroke-width: 2;843  stroke-linecap: round;844  transition: stroke-dashoffset 1s linear, stroke 500ms ease;845}846/* Search bar */847.peach-search-wrap {848  border-top: 1px solid var(--peach-t3);849  background: var(--peach-s1);850  min-height: 54px; position: relative;851  box-shadow: inset 0 6px 18px transparent;852  transition: box-shadow 700ms ease;853}854.peach-search-wrap::before {855  content: "";856  position: absolute;857  left: 0;858  top: 0;859  height: 2px;860  width: var(--peach-totp-progress, 0%);861  background: var(--peach-accent);862  opacity: 0;863  transition: width 1s linear, opacity 180ms ease;864  pointer-events: none;865}866.peach-shell[data-totp-active="true"] .peach-search-wrap::before {867  opacity: 0.9;868}869.peach-shell[data-totp-active="true"] .peach-search-wrap {870  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);871}872873@keyframes peach-totp-code-flare {874  0%   { filter: brightness(1); }875  25%  { filter: brightness(1.3); }876  100% { filter: brightness(1); }877}878.peach-totp-code.is-hot {879  animation: peach-totp-code-flare 3000ms ease-in-out both;880}881.peach-search-bar {882  min-height: 54px;883  display: grid;884  grid-template-columns: auto minmax(0, 1fr) auto;885  align-items: center;886  gap: 8px; padding: 0 9px 0 12px;887}888.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }889.peach-search-input {890  border: 0; background: transparent; color: var(--peach-t0);891  font-family: var(--font-display);892  font-style: italic; font-size: 18px;893  outline: none; width: 100%; min-width: 0; padding: 0;894  caret-color: var(--peach-accent);895}896.peach-search-input::placeholder { color: var(--peach-t2); }897.peach-search-meta {898  display: grid;899  grid-auto-flow: column;900  align-items: center;901  justify-content: end;902  gap: 6px;903  min-width: max-content;904}905.peach-search-counter {906  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;907  font-size: 0.625rem; color: var(--peach-t2);908  display: inline-flex;909  align-items: center;910  line-height: 1;911}912.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }913914/* Buttons */915.peach-btn {916  border: 1px solid transparent; border-radius: 12px;917  background: transparent; color: var(--peach-t0);918  font-family: Inter, system-ui, sans-serif;919  font-size: 0.75rem; letter-spacing: 0.02em; padding: 8px 12px;920  cursor: pointer;921  transition:922    background-color var(--peach-dur-80) var(--peach-curve-arrival),923    color var(--peach-dur-80) var(--peach-curve-arrival),924    border-color var(--peach-dur-150) var(--peach-curve-arrival);925}926.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }927.peach-btn:disabled {928  opacity: 0.45;929  cursor: not-allowed;930}931.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 0.6875rem; }932.peach-btn--md { min-height: 38px; }933.peach-btn--accent {934  background: var(--peach-accent);935  color: rgba(0,0,0,0.92);936  font-weight: 500;937  box-shadow:938    0 1px 0 rgba(255,255,255,0.08) inset,939    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),940    0 3px 16px var(--peach-glow),941    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);942}943.peach-btn--accent:hover:not(:disabled) {944  background: var(--peach-accent);945  filter: brightness(1.10) saturate(1.05);946  box-shadow:947    0 1px 0 rgba(255,255,255,0.10) inset,948    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),949    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),950    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);951}952.peach-btn--ghost:not(.peach-icon-btn) { border-color: var(--peach-t3); color: var(--peach-t1); }953.peach-btn--ghost.peach-icon-btn { color: var(--peach-t1); }954.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }955.peach-icon-btn {956  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;957  display: inline-flex; align-items: center; justify-content: center;958  border-color: transparent;959  transition:960    color var(--peach-dur-80) var(--peach-curve-arrival),961    box-shadow var(--peach-dur-150) var(--peach-curve-arrival),962    background-color var(--peach-dur-80) var(--peach-curve-arrival);963}964.peach-icon-btn:hover:not(:disabled) {965  background: transparent;966  color: var(--peach-accent);967  box-shadow: 0 0 12px color-mix(in srgb, var(--peach-accent) 28%, transparent),968              0 0 4px color-mix(in srgb, var(--peach-accent) 16%, transparent);969}970971/* Topbar sync. Only rendered when a device is paired, so it never sits there972   as a control that cannot do anything. */973.peach-sync-btn.is-syncing { color: var(--peach-accent); }974.peach-sync-btn.is-syncing .peach-sync-icon {975  animation: peach-sync-spin 900ms linear infinite;976  transform-origin: 50% 50%;977}978.peach-sync-btn.is-ok { color: var(--peach-accent); }979.peach-sync-btn.is-error { color: var(--peach-breach, #d66); }980@keyframes peach-sync-spin { to { transform: rotate(360deg); } }981982/* Sync indicator light — same taxonomy as the Settings pip, sized for the983   14px topbar icon. Unlit when nothing has happened yet; never green when984   sync is not actually working. */985.peach-sync-btn { position: relative; }986.peach-sync-pip {987  position: absolute;988  top: 2px;989  right: 2px;990  width: 5px;991  height: 5px;992  border-radius: 50%;993  background: transparent;994}995.peach-sync-pip.is-ok,996.peach-sync-pip.is-busy {997  background: var(--peach-health-ok);998  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-health-ok) 60%, transparent);999}1000.peach-sync-pip.is-busy { animation: peach-sync-pip-pulse 1600ms ease-in-out infinite; }1001/* Yellow — the dial did not reach the peer, but the alarm will retry. Distinct1002   from is-error (red) so a transient network miss does not look like a real1003   fault. */1004.peach-sync-pip.is-warn {1005  background: var(--peach-health-warn);1006  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-health-warn) 60%, transparent);1007}1008.peach-sync-pip.is-error {1009  background: var(--peach-breach);1010  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-breach) 60%, transparent);1011}1012@keyframes peach-sync-pip-pulse {1013  0%, 100% { opacity: 1; }1014  50% { opacity: 0.35; }1015}1016@media (prefers-reduced-motion: reduce) {1017  .peach-sync-btn.is-syncing .peach-sync-icon { animation: none; opacity: 0.6; }1018  .peach-sync-pip.is-busy { animation: none; }1019}10201021.peach-btn:focus-visible {1022  outline: none;1023  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);1024}10251026/* Lock button */1027.peach-lock-icon { transform-origin: center; }1028.peach-lock-btn { color: var(--peach-accent); }1029.peach-lock-btn.is-locking .peach-lock-icon {1030  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);1031}10321033/* Biometric unlock button */1034.peach-biometric-btn {1035  display: flex;1036  align-items: center;1037  justify-content: center;1038  gap: 6px;1039  margin-top: 8px;1040  width: 100%;1041}10421043/* Copy button */1044.peach-copy-btn {1045  position: relative; overflow: hidden;1046  color: var(--peach-t2); border-color: var(--peach-t3);1047}1048.peach-copy-icon {1049  display: inline-flex; align-items: center; justify-content: center;1050  position: relative; z-index: 1;1051}1052.peach-copy-icon-svg { display: block; }1053.peach-copy-sheen {1054  position: absolute; inset: 0;1055  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%);1056  opacity: 0; transform: scaleX(0.15); transform-origin: left center;1057}1058.peach-copy-btn.is-copied {1059  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;1060  box-shadow:1061    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),1062    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),1063    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);1064}1065.peach-copy-btn.is-copied .peach-copy-icon {1066  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;1067}1068.peach-copy-btn.is-copied .peach-copy-sheen {1069  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;1070}1071.peach-copy-btn.is-retreat {1072  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;1073}1074.peach-copy-btn.is-retreat .peach-copy-sheen {1075  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;1076}1077.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }1078.peach-copy-drain-bar {1079  display: block; width: 100%; height: 100%;1080  background: var(--peach-accent); opacity: 0.7;1081  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;1082}10831084/* Unlock screen elements */1085.peach-underline-input {1086  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);1087  padding: 6px 0; background: transparent; color: var(--peach-t0);1088  outline: none;1089  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1090  font-size: 0.8125rem;1091  caret-color: var(--peach-accent);1092}1093.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }1094.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }1095.peach-hint {1096  margin: 0;1097  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1098  font-size: 0.625rem; color: var(--peach-t2);1099}1100.peach-unlock-footer {1101  margin-top: 4px; display: flex; align-items: center; gap: 7px;1102  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1103  font-size: 0.625rem; color: var(--peach-t2);1104}1105.peach-unlock-footer--lock {1106  padding-top: 2px;1107}11081109/* Desktop helper (peach-sync) code pairing — additive hooks. The shared pairing1110   classes (peach-pair-*) carry the shared layout; these only style the parts1111   unique to the typed-code path. Inline styles cover the SAS/confirm gate. */1112.peach-desktop-pair { display: flex; flex-direction: column; }1113.peach-desktop-enter,1114.peach-desktop-searching,1115.peach-desktop-paired,1116.peach-desktop-error {1117  display: flex; flex-direction: column; gap: 8px;1118  padding: 4px 18px 16px; text-align: center; align-items: center;1119}1120.peach-desktop-enter .peach-label { align-self: flex-start; }1121/* Sized for a full 19-character pairing code (A74H-48J3-KI32-OEP4) in a1122   320px popup — a 6-digit legacy helper code still reads fine at this size. */1123.peach-code-input {1124  text-align: center; letter-spacing: 0.12em; padding-left: 0.12em;1125  font-size: 15px;1126}1127.peach-code-input::placeholder { letter-spacing: 0.12em; }11281129/* Sync card "pair a device" options — bordered, raised tappable rows that read1130   as buttons on any card hue (theme-neutral light overlay, not the peach accent). */1131.peach-sync-pair-option {1132  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;1133  width: 100%; text-align: left; cursor: pointer; font-family: inherit;1134  padding: 11px 12px; border-radius: 10px;1135  background: color-mix(in srgb, var(--peach-t0) 6%, transparent);1136  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);1137  color: var(--peach-t0);1138  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;1139}1140.peach-sync-pair-option + .peach-sync-pair-option { margin-top: 8px; }1141.peach-sync-pair-option:hover {1142  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);1143  border-color: color-mix(in srgb, var(--peach-t0) 28%, transparent);1144}1145.peach-sync-pair-option:active { transform: translateY(1px); }1146.peach-sync-pair-option:disabled { opacity: 0.5; cursor: default; }1147.peach-sync-pair-option-icon { flex-shrink: 0; display: flex; align-items: center; color: var(--peach-t1); margin-top: 1px; }1148.peach-sync-pair-option-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }1149.peach-sync-pair-option-title { font-size: 0.8125rem; font-weight: 600; }1150.peach-sync-pair-option-sub { font-size: 0.6875rem; line-height: 1.45; color: var(--peach-t2); }1151.peach-sync-pair-option-chevron { flex-shrink: 0; color: var(--peach-t2); font-size: 1.05rem; line-height: 1.3; }11521153/* Breach badge */1154.peach-breach-badge {1155  display: flex;1156  position: relative;1157  z-index: 1;1158  align-items: center;1159  gap: 7px;1160  font-size: 0.5625rem;1161  color: var(--peach-breach);1162  padding: 5px 10px;1163  margin-bottom: 4px;1164  border-radius: 8px;1165  background: rgba(220, 80, 60, 0.07);1166  border: 1px solid rgba(220, 80, 60, 0.18);1167  letter-spacing: 0.04em;1168}11691170.peach-password-value.is-breached {1171  color: rgba(220, 80, 60, 0.75);1172  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1173}11741175/* ── Overlay views ─────────────────────────────────────────────────── */1176.peach-overlay-view {1177  position: absolute;1178  inset: 0;1179  display: flex;1180  flex-direction: column;1181  background:1182    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1183    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1184    var(--peach-bg);1185  z-index: 2;1186  overflow: hidden;1187  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1188}11891190.peach-overlay-view:has(.stk-shell) {1191  background: var(--peach-bg);1192}1193@keyframes overlay-in {1194  from { opacity: 0; transform: translateY(8px); }1195  to   { opacity: 1; transform: translateY(0); }1196}1197.peach-overlay-view.ov-enter-up {1198  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1199}1200.peach-overlay-view.ov-exit-up {1201  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1202}1203.peach-overlay-view.ov-enter-right {1204  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1205}1206.peach-overlay-view.ov-exit-right {1207  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1208}12091210@keyframes ov-enter-up {1211  from { opacity: 0; transform: translateY(18px); }1212  to   { opacity: 1; transform: translateY(0); }1213}1214@keyframes ov-exit-up {1215  from { opacity: 1; transform: translateY(0); }1216  to   { opacity: 0; transform: translateY(-12px); }1217}1218@keyframes ov-enter-right {1219  from { opacity: 0; transform: translateX(20px); }1220  to   { opacity: 1; transform: translateX(0); }1221}1222@keyframes ov-exit-right {1223  from { opacity: 1; transform: translateX(0); }1224  to   { opacity: 0; transform: translateX(20px); }1225}12261227/* Overlay shared header */1228.peach-overlay-header {1229  padding: 10px 12px 8px;1230  display: flex;1231  align-items: center;1232  gap: 10px;1233  flex-shrink: 0;1234}1235/* Back button — circular pill matching the settings stack masthead (.stk-back) */1236.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1237  width: 28px;1238  height: 28px;1239  flex: 0 0 28px;1240  border-radius: 999px;1241  border: 1px solid var(--peach-border);1242  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1243  color: var(--peach-t1);1244  padding: 0;1245}1246.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1247  color: var(--peach-t0);1248  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1249  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1250}1251.peach-overlay-title {1252  font-family: var(--font-display);1253  font-style: italic;1254  font-weight: 400;1255  font-size: 20px;1256  line-height: 1;1257  color: var(--peach-t0);1258  flex: 1;1259  text-align: center;1260}1261/* Balances the 28px back button so the title stays visually centred */1262.peach-overlay-spacer {1263  width: 28px;1264  flex: 0 0 28px;1265}12661267.peach-overlay-card {1268  background: var(--peach-s1);1269  border: 1px solid var(--peach-t3);1270  border-radius: 12px;1271  overflow: hidden;1272  width: 100%;1273}12741275.peach-onboarding-alt-actions {1276  display: flex;1277  flex-direction: column;1278  gap: 4px;1279  padding: 0;1280}12811282.peach-settings-copy {1283  margin: 0 0 10px;1284  font-size: 0.6875rem;1285  line-height: 1.5;1286  color: var(--peach-t2);1287}12881289.peach-settings-copy strong {1290  color: var(--peach-t0);1291}12921293.peach-settings-copy--spacious {1294  margin-bottom: 12px;1295}12961297.peach-settings-copy--result {1298  color: var(--peach-accent);1299  font-size: 0.8125rem;1300  text-align: center;1301  padding: 8px 0;1302}13031304.peach-settings-copy--danger {1305  color: var(--peach-breach);1306}13071308.peach-settings-copy--success {1309  color: var(--peach-accent);1310}13111312.peach-inline-feedback {1313  font-size: 0.6875rem;1314  margin: 10px 0 0;1315}13161317.peach-inline-feedback--ok {1318  color: var(--peach-accent);1319}13201321.peach-inline-feedback--error {1322  color: var(--peach-breach);1323}13241325.peach-inline-feedback--muted {1326  color: var(--peach-t2);1327  font-size: 0.625rem;1328  margin: 4px 0;1329}13301331.peach-inline-feedback--spaced {1332  margin-top: 12px;1333}13341335.peach-settings-actions--row {1336  display: flex;1337  gap: 6px;1338}13391340.peach-settings-actions--end {1341  margin-top: 14px;1342  justify-content: flex-end;1343}13441345.peach-settings-stack {1346  display: flex;1347  flex-direction: column;1348  gap: 6px;1349}13501351.peach-settings-stack--tight {1352  gap: 4px;1353}13541355.peach-settings-stack--spacious {1356  gap: 8px;1357}13581359.peach-settings-input {1360  width: 100%;1361  box-sizing: border-box;1362  padding: 8px 10px;1363  background: rgba(0, 0, 0, 0.22);1364  border: 1px solid transparent;1365  border-radius: 6px;1366  color: var(--peach-t0);1367  font-family: var(--font-ui);1368  font-size: 0.75rem;1369  outline: none;1370  transition: border-color 120ms ease, background 120ms ease;1371}13721373.peach-settings-input:focus {1374  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1375  background: rgba(0, 0, 0, 0.28);1376}13771378.peach-settings-input[type="password"] {1379  font-family: var(--font-mono);1380  letter-spacing: 0.04em;1381}13821383.peach-hidden-file-input {1384  display: none;1385}13861387.peach-checkbox-note {1388  display: flex;1389  align-items: flex-start;1390  gap: 8px;1391  font-size: 0.6875rem;1392  color: var(--peach-t1);1393  cursor: pointer;1394  margin: 12px 0;1395}13961397.peach-checkbox-note input {1398  margin-top: 1px;1399}14001401.peach-danger-notice {1402  background: rgba(220, 80, 60, 0.08);1403  border: 1px solid rgba(220, 80, 60, 0.2);1404  border-radius: 6px;1405  padding: 9px 11px;1406  font-size: 0.6875rem;1407  color: var(--peach-t1);1408  line-height: 1.5;1409}14101411.peach-info-notice {1412  font-size: 0.6875rem;1413  color: var(--peach-t1);1414  line-height: 1.5;1415  background: var(--surface-card);1416  border: 1px solid var(--peach-t3);1417  border-radius: 6px;1418  padding: 8px 10px;1419}14201421.peach-info-notice--warn {1422  border-color: rgba(220, 38, 38, 0.4);1423  background: rgba(220, 38, 38, 0.06);1424  color: rgba(220, 38, 38, 0.92);1425  margin-bottom: 8px;1426}14271428/* Warm helpful-context note — reads as a soft aside, not an alert. */1429.peach-info-notice--note {1430  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);1431  border-color: color-mix(in srgb, var(--peach-accent) 18%, transparent);1432  color: var(--peach-t2);1433}14341435.peach-strength-row {1436  display: flex;1437  align-items: center;1438  gap: 8px;1439  margin-bottom: 10px;1440}14411442.peach-strength-track {1443  flex: 1;1444  height: 4px;1445  background: var(--peach-s2);1446  border-radius: 2px;1447  overflow: hidden;1448}14491450.peach-strength-fill {1451  height: 100%;1452  border-radius: 2px;1453  transition: width 120ms ease, background 120ms ease;1454}14551456/* ── Type selector tabs ── */1457.peach-type-tabs {1458  display: flex;1459  gap: 0;1460  background: var(--peach-t4);1461  border-radius: 8px;1462  padding: 3px;1463}14641465.peach-type-tab {1466  flex: 1;1467  display: flex;1468  align-items: center;1469  justify-content: center;1470  gap: 6px;1471  padding: 6px 10px;1472  border-radius: 6px;1473  border: none;1474  background: transparent;1475  cursor: pointer;1476  font-family: Inter, system-ui, sans-serif;1477  font-size: 0.6875rem;1478  font-weight: 400;1479  letter-spacing: 0.04em;1480  color: var(--peach-t1);1481  transition: background 150ms ease, color 150ms ease;1482}14831484.peach-type-tab.is-active {1485  background: var(--peach-s2);1486  color: var(--peach-t0);1487  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1488}14891490.peach-type-tab:not(.is-active):hover {1491  color: var(--peach-t0);1492}14931494.peach-type-tab svg {1495  opacity: 0.7;1496  flex-shrink: 0;1497}14981499.peach-type-tab.is-active svg {1500  opacity: 1;1501}15021503/* ── List view ───────────────────────────────────────────────────────── */1504.peach-list-top {1505  padding: 0 10px;1506  min-height: 46px;1507  display: flex;1508  align-items: center;1509  gap: 6px;1510  border-bottom: 1px solid var(--peach-t3);1511  flex-shrink: 0;1512  background: var(--peach-s1);1513}15141515.peach-vault-list {1516  flex: 1;1517  overflow-y: auto;1518  scrollbar-width: none;1519}1520.peach-vault-list::-webkit-scrollbar { display: none; }15211522/* Scrollbar — vault list */1523.peach-vault-list {1524  scrollbar-width: thin;1525  scrollbar-color: var(--peach-t3) transparent;1526}15271528.peach-vault-list::-webkit-scrollbar {1529  width: 3px;1530}15311532.peach-vault-list::-webkit-scrollbar-thumb {1533  background: var(--peach-t3);1534  border-radius: 2px;1535}15361537.peach-entry-row {1538  width: 100%;1539  display: flex;1540  align-items: center;1541  gap: 10px;1542  padding: 9px 16px;1543  background: transparent;1544  border: none;1545  border-bottom: 1px solid var(--peach-t3);1546  cursor: pointer;1547  color: inherit;1548  text-align: left;1549  transition: background 80ms ease;1550}1551.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1552.peach-entry-row:last-child { border-bottom: none; }1553.peach-entry-row.is-active {1554  box-shadow: inset 2px 0 0 var(--peach-accent);1555  background: rgba(240,232,216,0.03);1556}1557.peach-entry-row:focus-visible {1558  outline: none;1559  box-shadow: 0 0 0 1px var(--peach-border-accent);1560  background: rgba(240,232,216,0.03);1561}1562.peach-entry-row-icon {1563  width: 26px; height: 26px;1564  border-radius: 7px;1565  border: 1px solid var(--peach-t3);1566  display: flex; align-items: center; justify-content: center;1567  color: var(--peach-t2);1568  flex-shrink: 0;1569}1570.peach-entry-row-icon.is-breach {1571  border-color: rgba(220,80,60,0.3);1572  color: rgba(220,80,60,0.7);1573}15741575/* Title-initials chip used as the favicon fallback for login entries whose1576 * real favicon hasn't been cached by the browser yet (freshly-imported,1577 * never-visited domains). Background colour is hashed from the title so1578 * the same entry always shows the same chip. The chip fits the same1579 * 26×26 row icon slot the favicon would take. */1580.peach-favicon-initials {1581  display: inline-flex;1582  align-items: center;1583  justify-content: center;1584  width: 100%;1585  height: 100%;1586  border-radius: 4px;1587  font-family: "IBM Plex Mono", monospace;1588  font-size: 0.5625rem;1589  font-weight: 600;1590  letter-spacing: 0.04em;1591  color: rgba(240, 232, 216, 0.92);1592  text-transform: uppercase;1593  user-select: none;1594}1595.peach-entry-row-info { flex: 1; min-width: 0; }1596.peach-entry-row-name {1597  display: block;1598  font-family: var(--font-display);1599  font-size: 1.0625rem;1600  font-style: italic;1601  font-weight: 400;1602  color: var(--peach-t0);1603  line-height: 1.2;1604  white-space: nowrap;1605  overflow: hidden;1606  text-overflow: ellipsis;1607}1608.peach-entry-row-meta {1609  display: block;1610  font-family: "IBM Plex Mono", monospace;1611  font-size: 0.5625rem;1612  color: var(--peach-t2);1613  margin-top: 1px;1614  letter-spacing: 0.05em;1615}1616.peach-entry-row-dot {1617  width: 5px; height: 5px;1618  border-radius: 50%;1619  background: rgba(220,80,60,0.7);1620  flex-shrink: 0;1621}1622.peach-new-entry-row {1623  display: flex;1624  align-items: center;1625  justify-content: center;1626  gap: 6px;1627  width: 100%;1628  padding: 11px;1629  background: transparent;1630  border: none;1631  border-top: 1px solid var(--peach-t3);1632  color: var(--peach-t2);1633  font-family: "IBM Plex Mono", monospace;1634  font-size: 0.5625rem;1635  text-transform: uppercase;1636  letter-spacing: 0.14em;1637  cursor: pointer;1638  flex-shrink: 0;1639  transition: color 120ms ease, background 120ms ease;1640}1641.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }16421643/* ── Multi-select mode ─────────────────────────────────────────────── */16441645/* Select-mode trigger button in sort bar — same shape as trash btn */1646.peach-sort-select-btn {1647  display: flex;1648  align-items: center;1649  justify-content: center;1650  padding: 3px 5px;1651  background: transparent;1652  border: none;1653  cursor: pointer;1654  color: var(--peach-t2);1655  border-radius: 4px;1656  transition: color 140ms ease, background 140ms ease;1657}1658.peach-sort-select-btn:hover {1659  color: var(--peach-t1);1660  background: var(--peach-t3);1661}16621663/* Sort bar in select mode */1664.peach-select-cancel-btn {1665  background: transparent;1666  border: none;1667  padding: 0 4px;1668  cursor: pointer;1669  font-family: "IBM Plex Mono", monospace;1670  font-size: 0.5625rem;1671  letter-spacing: 0.12em;1672  text-transform: uppercase;1673  color: var(--peach-t2);1674  transition: color 140ms ease;1675  flex-shrink: 0;1676}1677.peach-select-cancel-btn:hover { color: var(--peach-t0); }16781679.peach-select-count-label {1680  flex: 1;1681  text-align: center;1682  font-family: "IBM Plex Mono", monospace;1683  font-size: 0.5625rem;1684  letter-spacing: 0.14em;1685  text-transform: uppercase;1686  color: var(--peach-t1);1687}16881689.peach-select-all-btn {1690  background: transparent;1691  border: none;1692  padding: 0 4px;1693  cursor: pointer;1694  font-family: "IBM Plex Mono", monospace;1695  font-size: 0.5625rem;1696  letter-spacing: 0.12em;1697  text-transform: uppercase;1698  color: var(--peach-t2);1699  transition: color 140ms ease;1700  flex-shrink: 0;1701}1702.peach-select-all-btn:hover { color: var(--peach-accent); }17031704/* List in select mode */1705.peach-vault-list.is-selecting .peach-entry-row {1706  cursor: default;1707}1708.peach-vault-list.is-selecting .peach-entry-row:hover {1709  background: rgba(240,232,216,0.02);1710}1711.peach-vault-list.is-selecting .peach-entry-row.is-selected {1712  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1713}1714.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1715  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1716}17171718/* Select indicator circles in icon slot */1719.peach-entry-row-icon.is-select-icon {1720  color: var(--peach-t2);1721}1722.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1723  color: var(--peach-accent);1724}17251726/* Delete action bar at bottom (replaces new-entry row) */1727.peach-select-action-bar {1728  display: flex;1729  align-items: center;1730  justify-content: center;1731  gap: 7px;1732  width: 100%;1733  padding: 11px;1734  background: transparent;1735  border: none;1736  border-top: 1px solid var(--peach-t3);1737  color: var(--peach-t1);1738  font-family: "IBM Plex Mono", monospace;1739  font-size: 0.5625rem;1740  text-transform: uppercase;1741  letter-spacing: 0.14em;1742  cursor: pointer;1743  flex-shrink: 0;1744  transition: color 120ms ease, background 120ms ease;1745}1746.peach-select-action-bar:not(:disabled):hover {1747  color: var(--peach-t0);1748  background: rgba(220,80,60,0.06);1749}1750.peach-select-action-bar:not(:disabled):hover svg {1751  stroke: rgba(220,80,60,0.8);1752}1753.peach-select-action-bar:disabled,1754.peach-select-action-bar.is-empty {1755  color: var(--peach-t2);1756  cursor: default;1757  opacity: 0.5;1758}1759.peach-search-counter-list {1760  white-space: nowrap;1761  flex-shrink: 0;1762}1763.peach-list-empty {1764  min-height: 180px;1765  display: grid;1766  place-items: center;1767  color: var(--peach-t2);1768  font-family: "IBM Plex Mono", monospace;1769  font-size: 0.6875rem;1770}17711772/* ── Settings view ───────────────────────────────────────────────────── */1773.peach-settings-body {1774  flex: 1;1775  overflow-y: auto;1776  min-height: 0;1777  display: flex;1778  flex-direction: column;1779  padding: 2px 0 10px;1780}1781.peach-settings-group {1782  margin: 4px 10px;1783  padding: 9px 14px 11px;1784  border-radius: 12px;1785  border: 1px solid rgba(255, 255, 255, 0.07);1786  background: rgba(26, 20, 16, 0.60);1787  backdrop-filter: blur(10px) saturate(1.3);1788  -webkit-backdrop-filter: blur(10px) saturate(1.3);1789}17901791.peach-settings-group + .peach-settings-group {1792  margin-top: 6px;1793}17941795@supports not (backdrop-filter: blur(1px)) {1796  .peach-settings-group {1797    background: rgba(26, 20, 16, 0.90);1798    border-color: rgba(255, 255, 255, 0.09);1799    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1800  }1801}18021803.light .peach-settings-group,1804[data-theme="light"] .peach-settings-group {1805  background: rgba(245, 237, 226, 0.70);1806  border-color: rgba(26, 18, 8, 0.08);1807  backdrop-filter: blur(10px) saturate(1.2);1808  -webkit-backdrop-filter: blur(10px) saturate(1.2);1809}18101811@supports not (backdrop-filter: blur(1px)) {1812  .light .peach-settings-group,1813  [data-theme="light"] .peach-settings-group {1814    background: rgba(245, 237, 226, 0.97);1815    border-color: rgba(26, 18, 8, 0.10);1816  }1817}1818.peach-export-intro {1819  padding-bottom: 8px;1820}1821.peach-export-card {1822  display: grid;1823  gap: 10px;1824}1825.peach-rune-canvas {1826  border-radius: 8px;1827  background: rgba(0, 0, 0, 0.22);1828  flex: 1;1829  align-self: center;1830}1831.peach-script-input {1832  font-family: "PeachScript", monospace;1833  font-size: 0.6875rem;1834  line-height: 1.9;1835  letter-spacing: 0.06em;1836  color: var(--peach-t0);1837  background: rgba(0, 0, 0, 0.22);1838  border: none;1839  border-radius: 6px;1840  padding: 12px;1841  width: 100%;1842  min-height: 96px;1843  resize: vertical;1844  word-break: break-all;1845  scrollbar-width: none;1846  -ms-overflow-style: none;1847}18481849.peach-script-input::-webkit-scrollbar { display: none; }1850.peach-csv-warning {1851  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1852  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1853  color: var(--peach-t0);1854  border-radius: 6px;1855  padding: 10px 12px;1856  margin-bottom: 8px;1857  font-size: 0.75rem;1858  line-height: 1.45;1859}1860.peach-export-card--primary {1861  background:1862    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1863}18641865/* Export menu — distribute the three format cards across the popup. */1866.peach-export-menu {1867  display: flex;1868  flex-direction: column;1869  flex: 1;1870  min-height: 0;1871}1872.peach-export-menu .peach-settings-group {1873  flex: 1;1874  display: flex;1875  flex-direction: column;1876  justify-content: center;1877  gap: 10px;1878}18791880/* Result view — the script-string fills the remaining vertical surface. */1881.peach-export-result-group {1882  flex: 1;1883  display: flex;1884  flex-direction: column;1885  min-height: 0;1886  border-bottom: none;1887}1888.peach-export-result-group .peach-export-card {1889  flex: 1;1890  min-height: 0;1891  display: flex;1892  flex-direction: column;1893  gap: 10px;1894}1895.peach-export-result-group .peach-export-card-copy {1896  flex-shrink: 0;1897}1898.peach-export-result-group .peach-settings-label {1899  flex-shrink: 0;1900}1901.peach-export-result-group button {1902  flex-shrink: 0;1903}1904.peach-export-card-head {1905  display: flex;1906  align-items: center;1907  justify-content: space-between;1908  gap: 10px;1909}1910.peach-export-card-copy {1911  margin: 0;1912  font-size: 0.75rem;1913  line-height: 1.55;1914  color: var(--peach-t1);1915}1916.peach-export-note {1917  margin: 0;1918  font-size: 0.625rem;1919  line-height: 1.5;1920  color: var(--peach-t2);1921}1922.peach-export-strength-track {1923  height: 3px;1924  background: var(--peach-border);1925  border-radius: 2px;1926  margin: 4px 0 2px;1927  overflow: hidden;1928}1929.peach-export-strength-fill {1930  height: 100%;1931  border-radius: 2px;1932  transition: width 250ms ease, background 250ms ease;1933}1934.peach-export-strength-warn {1935  margin: 0;1936  font-size: 0.625rem;1937  line-height: 1.5;1938  color: #e84040;1939  font-family: "IBM Plex Mono", monospace;1940}1941.peach-export-strength-hint {1942  margin: 0;1943  font-size: 0.625rem;1944  line-height: 1.5;1945  color: var(--peach-t2);1946  font-family: "IBM Plex Mono", monospace;1947}1948.peach-export-pill {1949  display: inline-flex;1950  align-items: center;1951  padding: 4px 8px;1952  border-radius: 999px;1953  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1954  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1955  color: var(--peach-accent);1956  font-family: "IBM Plex Mono", monospace;1957  font-size: 0.5rem;1958  letter-spacing: 0.12em;1959  text-transform: uppercase;1960  white-space: nowrap;1961}1962.peach-export-pill--danger {1963  border-color: rgba(220,80,60,0.22);1964  background: rgba(220,80,60,0.08);1965  color: var(--peach-breach);1966}1967.peach-settings-label {1968  margin: 0 0 6px;1969  font-family: "IBM Plex Mono", monospace;1970  font-size: 0.5rem;1971  text-transform: uppercase;1972  letter-spacing: 0.18em;1973  color: var(--peach-t2);1974}1975.peach-settings-row {1976  display: flex;1977  align-items: center;1978  justify-content: space-between;1979  gap: 12px;1980  min-height: 34px;1981  padding: 6px 0;1982  font-size: 0.8125rem;1983  color: var(--peach-t1);1984}1985.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1986.peach-settings-value {1987  font-family: "IBM Plex Mono", monospace;1988  font-size: 0.625rem;1989  color: var(--peach-t2);1990}19911992.peach-settings-value--status {1993  display: flex;1994  align-items: center;1995  gap: 6px;1996}19971998.peach-settings-link {1999  font-family: "IBM Plex Mono", monospace;2000  font-size: 0.625rem;2001  color: var(--peach-accent);2002  text-decoration: none;2003  cursor: pointer;2004}2005.peach-settings-link:hover {2006  text-decoration: underline;2007}20082009.peach-settings-row--stack {2010  flex-direction: column;2011  align-items: stretch;2012  gap: 6px;2013}20142015.peach-settings-row--top {2016  align-items: flex-start;2017}20182019.peach-settings-row-main {2020  display: flex;2021  flex-direction: column;2022  gap: 4px;2023  flex: 1;2024}2025.peach-toggle {2026  width: 28px; height: 16px;2027  border-radius: 999px;2028  background: var(--peach-t3);2029  border: 1px solid var(--peach-t3);2030  display: flex; align-items: center; justify-content: flex-start; padding: 2px;2031  flex-shrink: 0;2032  transition: background 200ms ease, border-color 200ms ease;2033  cursor: pointer;2034}2035.peach-toggle.is-on {2036  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);2037  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2038}2039.peach-toggle-knob {2040  width: 10px; height: 10px;2041  border-radius: 50%;2042  background: var(--peach-t2);2043  flex-shrink: 0;2044  transform: translateX(0px);2045  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);2046}2047.peach-toggle.is-on .peach-toggle-knob {2048  background: var(--peach-accent);2049  transform: translateX(12px);2050}2051.peach-settings-footer {2052  display: flex;2053  align-items: center;2054  gap: 8px;2055  margin-top: auto;2056  padding: 14px 16px 8px;2057  font-family: "IBM Plex Mono", monospace;2058  font-size: 0.5625rem;2059  color: var(--peach-t2);2060}20612062/* ── Settings home navigation ──────────────────────────────────────────── */2063.peach-settings-nav-label {2064  margin: 0 0 2px;2065  padding: 12px 16px 4px;2066  font-family: "IBM Plex Mono", monospace;2067  font-size: 0.5rem;2068  text-transform: uppercase;2069  letter-spacing: 0.18em;2070  color: var(--peach-t2);2071}20722073.peach-settings-cat-row {2074  display: flex;2075  align-items: center;2076  gap: 10px;2077  width: 100%;2078  padding: 9px 16px;2079  background: none;2080  border: none;2081  border-bottom: 1px solid var(--peach-t3);2082  cursor: pointer;2083  text-align: left;2084  color: inherit;2085  transition: background var(--peach-dur-80) ease;2086}2087.peach-settings-cat-row:hover {2088  background: var(--peach-t3);2089}2090.peach-settings-cat-row:last-child {2091  border-bottom: none;2092}20932094.peach-settings-cat-icon {2095  width: 28px;2096  height: 28px;2097  border-radius: 7px;2098  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2099  color: var(--peach-accent);2100  display: flex;2101  align-items: center;2102  justify-content: center;2103  flex-shrink: 0;2104}2105/* Light theme: peach-on-cream is too low-contrast — both colors are warm.2106   Darken the icon stroke to ink and bump the bg tint so the icon reads2107   sharply while the cell still feels accent-tinted. */2108.light .peach-settings-cat-icon {2109  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);2110  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));2111}21122113.peach-settings-cat-content {2114  flex: 1;2115  display: flex;2116  flex-direction: column;2117  gap: 2px;2118  min-width: 0;2119}21202121.peach-settings-cat-name {2122  font-size: 0.8125rem;2123  font-weight: 450;2124  color: var(--peach-t0);2125  line-height: 1.2;2126}21272128.peach-settings-cat-desc {2129  font-size: 0.625rem;2130  color: var(--peach-t2);2131  line-height: 1.3;2132  white-space: nowrap;2133  overflow: hidden;2134  text-overflow: ellipsis;2135}21362137.peach-settings-cat-chevron {2138  color: var(--peach-t2);2139  flex-shrink: 0;2140  opacity: 0.5;2141}21422143/* ── Settings sub-view section labels ──────────────────────────────────── */2144.peach-settings-sub-label {2145  margin: 12px 0 4px;2146  font-family: "IBM Plex Mono", monospace;2147  font-size: 0.5rem;2148  text-transform: uppercase;2149  letter-spacing: 0.18em;2150  color: var(--peach-t2);2151}2152.peach-settings-sub-label:first-child {2153  margin-top: 4px;2154}21552156/* ── Settings: collapsible Advanced section ─────────────────────────────── */2157.peach-settings-advanced-toggle {2158  display: flex;2159  align-items: center;2160  justify-content: space-between;2161  width: 100%;2162  background: none;2163  border: none;2164  cursor: pointer;2165  padding: 12px 0 4px;2166  margin: 0;2167  color: inherit;2168}2169.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {2170  color: var(--peach-t1);2171}2172.peach-settings-advanced-chevron {2173  font-size: 0.5625rem;2174  color: var(--peach-t3);2175  letter-spacing: 0;2176  transition: color 120ms ease;2177}21782179.peach-sync-disclosure-toggle {2180  min-height: 48px;2181  padding: 10px 0;2182  text-align: left;2183}21842185.peach-sync-disclosure-toggle > span:first-child {2186  display: flex;2187  flex-direction: column;2188  gap: 3px;2189}21902191.peach-sync-disclosure-summary {2192  color: var(--peach-t2);2193  font-size: 0.6875rem;2194  line-height: 1.35;2195}21962197.peach-sync-disclosure-content {2198  padding-bottom: 4px;2199}22002201/* ── Feedback form ──────────────────────────────────────────────────────── */2202.peach-feedback-group {2203  flex: 1;2204  display: flex;2205  flex-direction: column;2206  border-bottom: none;2207}22082209.peach-feedback-intro {2210  margin: 4px 0 14px;2211  font-size: 0.75rem;2212  line-height: 1.55;2213  color: var(--peach-t1);2214}22152216.peach-feedback-chips {2217  display: flex;2218  flex-wrap: wrap;2219  gap: 6px;2220  margin-bottom: 14px;2221}22222223.peach-feedback-chip {2224  padding: 4px 10px;2225  border-radius: 999px;2226  border: 1px solid var(--peach-t3);2227  background: none;2228  color: var(--peach-t2);2229  font-size: 0.6875rem;2230  font-family: var(--font-ui);2231  cursor: pointer;2232  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2233    background var(--peach-dur-80) ease;2234}2235.peach-feedback-chip:hover {2236  border-color: var(--peach-t2);2237  color: var(--peach-t1);2238}2239.peach-feedback-chip.is-active {2240  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);2241  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));2242  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);2243  box-shadow:2244    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),2245    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);2246  font-weight: 700;2247}22482249.peach-feedback-textarea {2250  flex: 1;2251  width: 100%;2252  min-height: 120px;2253  box-sizing: border-box;2254  background: rgba(0, 0, 0, 0.22);2255  border: 1px solid transparent;2256  border-radius: 6px;2257  color: var(--peach-t0);2258  font-size: 0.75rem;2259  font-family: var(--font-ui);2260  line-height: 1.5;2261  padding: 8px 10px;2262  resize: none;2263  outline: none;2264  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2265}2266.peach-feedback-textarea:focus {2267  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2268  background: rgba(0, 0, 0, 0.28);2269}2270.peach-feedback-textarea:focus {2271  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2272}2273.peach-feedback-textarea::placeholder {2274  color: var(--peach-t2);2275}22762277.peach-feedback-meta {2278  margin: 6px 0 0;2279  font-size: 0.625rem;2280  color: var(--peach-t2);2281  font-family: "IBM Plex Mono", monospace;2282}22832284.peach-feedback-result {2285  margin: 8px 0 0;2286  font-size: 0.6875rem;2287  font-family: "IBM Plex Mono", monospace;2288}2289.peach-feedback-result--ok { color: var(--peach-sync-ok); }2290.peach-feedback-result--err { color: var(--peach-breach); }22912292.peach-feedback-submit {2293  width: 100%;2294  margin-top: 12px;2295  justify-content: center;2296}22972298.peach-feedback-anon {2299  margin: 8px 0 0;2300  font-size: 0.625rem;2301  color: var(--peach-t2);2302  text-align: center;2303}23042305.peach-feedback-thanks {2306  margin: auto 0;2307  padding: 18px 14px;2308  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);2309  border-radius: 8px;2310  background:2311    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),2312    rgba(0, 0, 0, 0.18);2313  color: var(--peach-t1);2314  text-align: center;2315}23162317.peach-feedback-thanks p {2318  margin: 0;2319  font-size: 0.75rem;2320  line-height: 1.5;2321}23222323.peach-feedback-thanks-title {2324  color: var(--peach-t0);2325  font-family: "Cormorant Garamond", serif;2326  font-size: 1.375rem !important;2327  line-height: 1.1 !important;2328  margin-bottom: 8px !important;2329}23302331.peach-passkey-badge {2332  margin-left: 8px;2333  font-size: 0.625rem;2334  letter-spacing: 0.06em;2335  text-transform: uppercase;2336  color: var(--peach-t2);2337  font-family: var(--font-ui);2338  vertical-align: middle;2339}23402341.peach-passkey-delete-btn {2342  color: var(--peach-breach);2343  border-color: rgba(229, 85, 85, 0.25);2344}23452346.peach-passkey-delete-confirm {2347  display: flex;2348  align-items: center;2349  gap: 8px;2350  padding: 8px 10px;2351  background: rgba(229, 85, 85, 0.06);2352  border: 1px solid rgba(229, 85, 85, 0.2);2353  border-radius: 6px;2354}23552356.peach-passkey-delete-confirm-copy {2357  flex: 1;2358  font-size: 0.6875rem;2359  color: var(--peach-t1);2360}23612362.peach-passkey-delete-btn--confirm {2363  color: var(--peach-breach);2364  border-color: rgba(229, 85, 85, 0.4);2365}23662367.peach-passkey-activity {2368  flex-direction: column;2369  align-items: flex-start;2370  gap: 4px;2371}23722373.peach-passkey-meta {2374  font-size: 0.6875rem;2375  color: var(--peach-t2);2376}23772378.peach-passkey-actions {2379  position: relative;2380  z-index: 1;2381  margin-top: 14px;2382  display: flex;2383  flex-direction: column;2384  gap: 8px;2385}23862387.peach-passkey-approval {2388  display: flex;2389  flex-direction: column;2390  align-items: center;2391  padding: 16px 20px 14px;2392  gap: 8px;2393  text-align: center;2394}23952396.peach-passkey-approval-icon {2397  width: 36px;2398  height: 36px;2399  border-radius: 10px;2400  background: var(--peach-s2);2401  border: 1px solid var(--peach-t3);2402  display: flex;2403  align-items: center;2404  justify-content: center;2405  flex-shrink: 0;2406  color: var(--peach-accent);2407}24082409.peach-passkey-approval-icon img,2410.peach-passkey-approval-icon svg {2411  width: 22px;2412  height: 22px;2413  border-radius: 5px;2414}24152416.peach-passkey-approval-rp {2417  font-family: var(--font-ui);2418  font-size: 0.75rem;2419  color: var(--peach-t2);2420  letter-spacing: 0.03em;2421}24222423.peach-passkey-approval-action {2424  font-family: var(--font-display);2425  font-style: italic;2426  font-weight: 300;2427  font-size: 18px;2428  color: var(--peach-t0);2429  line-height: 1.1;2430  margin: 1px 0;2431}24322433.peach-passkey-approval-user {2434  font-family: var(--font-mono);2435  font-size: 0.6875rem;2436  color: var(--peach-t1);2437  background: var(--peach-s2);2438  border: 1px solid var(--peach-t3);2439  border-radius: 4px;2440  padding: 3px 8px;2441}24422443.peach-passkey-approval-notice {2444  font-size: 0.625rem;2445  color: var(--peach-t2);2446  line-height: 1.5;2447  max-width: 220px;2448}24492450.peach-passkey-approval-actions {2451  display: flex;2452  gap: 8px;2453  width: 100%;2454  margin-top: 6px;2455}24562457.peach-passkey-approval-actions .peach-btn {2458  flex: 1;2459}24602461/* ── Inline generator drawer ── */2462.peach-generator-drawer {2463  display: grid;2464  grid-template-rows: 0fr;2465  transition: grid-template-rows 320ms var(--peach-curve-arrival);2466  overflow: hidden;2467}2468.peach-generator-drawer.is-open {2469  grid-template-rows: 1fr;2470}2471.peach-generator-drawer-inner {2472  min-height: 0;2473  overflow: hidden;2474}2475.peach-generator-drawer-content {2476  border-top: 1px solid var(--peach-t3);2477  padding: 8px 0 4px;2478  display: flex;2479  flex-direction: column;2480  gap: 8px;2481}24822483/* ── Compact generator (inside entry edit) ── */2484.peach-generator-drawer-content--compact {2485  border-top: 1px solid var(--peach-t3);2486  padding: 8px 0 2px;2487  gap: 7px;2488}2489.peach-pwgen-compact-display-row {2490  display: flex;2491  align-items: center;2492  gap: 6px;2493}2494.peach-pwgen-compact-output {2495  flex: 1;2496  min-width: 0;2497  font-family: "IBM Plex Mono", monospace;2498  font-size: 0.6875rem;2499  font-weight: 400;2500  letter-spacing: 0.04em;2501  color: var(--peach-t0);2502  background: rgba(240, 232, 216, 0.04);2503  border: 1px solid var(--peach-t3);2504  border-radius: 5px;2505  padding: 5px 8px;2506  line-height: 1.5;2507  outline: none;2508  transition: border-color 120ms ease;2509}25102511.peach-pwgen-compact-output:focus {2512  border-color: var(--peach-t1);2513}2514.peach-pwgen-compact-controls {2515  display: flex;2516  align-items: center;2517  gap: 6px;2518}2519.peach-pwgen-compact-slider {2520  flex: 1;2521  min-width: 0;2522  height: 2px !important;2523}2524.peach-pwgen-compact-controls .peach-pwgen-len-num {2525  flex-shrink: 0;2526  min-width: 18px;2527  text-align: right;2528}2529.peach-pwgen-compact-pills {2530  display: flex;2531  gap: 3px;2532  flex-shrink: 0;2533}2534.peach-pwgen-compact-pills .peach-pwgen-pill {2535  padding: 2px 7px;2536  font-size: 0.5rem;2537}2538.peach-pwgen-compact-use {2539  flex-shrink: 0;2540  font-size: 0.625rem !important;2541  padding: 3px 9px !important;2542  min-height: 22px !important;2543  border-radius: 5px !important;2544}25452546/* ── Password edit row (input + eye toggle side-by-side) ── */2547.peach-password-edit-row {2548  display: flex;2549  align-items: center;2550  gap: 6px;2551}2552.peach-password-edit-row .peach-inline-input {2553  flex: 1;2554  min-width: 0;2555}25562557/* ── Generate toggle link ── */2558.peach-generate-toggle-link {2559  display: inline-flex;2560  align-items: center;2561  gap: 5px;2562  background: none;2563  border: none;2564  padding: 0;2565  cursor: pointer;2566  font-family: "IBM Plex Mono", monospace;2567  font-size: 0.625rem;2568  color: var(--peach-t2);2569  letter-spacing: 0.04em;2570  transition: color 120ms ease;2571  align-self: flex-start;2572}2573.peach-generate-toggle-link:hover {2574  color: var(--peach-accent);2575}25762577/* Holds the generate + history toggle links on one row under the editor. */2578.peach-password-edit-links {2579  display: flex;2580  align-items: center;2581  gap: 14px;2582  flex-wrap: wrap;2583}25842585/* ── Past-password history list ── */2586.peach-password-history {2587  display: grid;2588  gap: 4px;2589  margin-top: 2px;2590  max-height: 168px;2591  overflow-y: auto;2592  scrollbar-width: thin;2593}2594.peach-history-row {2595  display: flex;2596  align-items: center;2597  justify-content: space-between;2598  gap: 8px;2599  padding: 5px 7px;2600  border-radius: 7px;2601  background: color-mix(in srgb, var(--peach-accent) 5%, transparent);2602  border: 1px solid color-mix(in srgb, var(--peach-accent) 9%, transparent);2603}2604.peach-history-main {2605  display: flex;2606  flex-direction: column;2607  gap: 1px;2608  min-width: 0;2609  flex: 1;2610}2611.peach-history-pw {2612  font-family: "IBM Plex Mono", monospace;2613  font-size: 0.6875rem;2614  color: var(--peach-t1);2615  white-space: nowrap;2616  overflow: hidden;2617  text-overflow: ellipsis;2618}2619.peach-history-pw .peach-password-mask {2620  letter-spacing: 0.08em;2621  color: var(--peach-t2);2622}2623.peach-history-age {2624  font-family: "IBM Plex Mono", monospace;2625  font-size: 0.5625rem;2626  color: var(--peach-t3, var(--peach-t2));2627  letter-spacing: 0.03em;2628}2629.peach-history-actions {2630  display: flex;2631  align-items: center;2632  gap: 2px;2633  flex-shrink: 0;2634}2635.peach-history-use {2636  font-family: "IBM Plex Mono", monospace;2637  font-size: 0.5625rem;2638  letter-spacing: 0.05em;2639  padding: 3px 7px;2640}2641.peach-history-empty {2642  font-family: "IBM Plex Mono", monospace;2643  font-size: 0.625rem;2644  line-height: 1.45;2645  color: var(--peach-t2);2646  padding: 6px 8px;2647  border-radius: 7px;2648  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);2649  border: 1px solid color-mix(in srgb, var(--peach-accent) 8%, transparent);2650}26512652/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2653.peach-entry-body {2654  flex: 1;2655  overflow-y: auto;2656  overflow-x: hidden;2657  scrollbar-width: none;2658  -ms-overflow-style: none;2659  overscroll-behavior: contain;2660  display: grid;2661  gap: 10px;2662  align-content: start;2663  padding: 10px 20px 14px;2664  min-width: 0;2665  min-height: 0;2666}2667.peach-entry-body::-webkit-scrollbar { display: none; }26682669/* Type-toggle pills + inline note toolbar */2670.peach-new-type-row {2671  display: flex;2672  align-items: center;2673  gap: 6px;2674  margin-bottom: 2px;2675}2676.peach-new-type-btn {2677  background: transparent;2678  border: 1px solid var(--peach-t3);2679  border-radius: 12px;2680  padding: 3px 10px;2681  font-family: "IBM Plex Mono", monospace;2682  font-size: 0.5625rem;2683  letter-spacing: 0.12em;2684  text-transform: uppercase;2685  color: var(--peach-t2);2686  cursor: pointer;2687  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2688}2689.peach-new-type-btn.is-active {2690  color: var(--peach-t0);2691  border-color: var(--peach-accent);2692  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2693}2694.peach-new-type-btn:not(.is-active):hover {2695  color: var(--peach-t1);2696  border-color: var(--peach-t2);2697}26982699/* Editable title */2700.peach-new-title-wrap { margin: 0 0 2px; }2701.peach-new-title-input {2702  background: transparent;2703  border: none;2704  outline: none;2705  width: 100%;2706  color: var(--peach-t0);2707  font-family: var(--font-display);2708  font-style: italic;2709  font-weight: 400;2710  font-size: 40px;2711  line-height: 0.95;2712  caret-color: var(--peach-accent);2713}2714.peach-new-title-input::placeholder { color: var(--peach-t2); }27152716/* Editable domain field */2717.peach-domain-edit-row {2718  display: flex;2719  align-items: center;2720  gap: 6px;2721}27222723.peach-domain-edit-row .peach-domain-value--edit {2724  flex: 1;2725  width: 0;2726}27272728.peach-domain-url-btn {2729  flex-shrink: 0;2730  background: transparent;2731  border: none;2732  cursor: pointer;2733  color: var(--peach-t3);2734  padding: 2px 3px;2735  display: flex;2736  align-items: center;2737  line-height: 0;2738  border-radius: 3px;2739  transition: color 120ms ease;2740}27412742.peach-domain-url-btn:hover {2743  color: var(--peach-accent);2744}27452746.peach-domain-value--edit {2747  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2748  font-size: 0.625rem;2749  font-style: italic;2750  letter-spacing: 0.12em;2751  color: var(--peach-t1);2752  background: transparent;2753  border: none;2754  border-bottom: 1px solid var(--peach-t3);2755  outline: none;2756  width: 100%;2757  padding: 2px 0;2758  caret-color: var(--peach-accent);2759  transition: border-color 140ms ease, color 140ms ease;2760}2761.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2762.peach-domain-value--edit:focus {2763  border-bottom-color: rgba(240, 232, 216, 0.28);2764  color: var(--peach-t0);2765}27662767/* Editable field values (username, password, totp) */2768.peach-field-value--edit {2769  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2770  font-size: 0.8125rem;2771  color: var(--peach-t0);2772  background: transparent;2773  border: none;2774  border-bottom: 1px solid var(--peach-t3);2775  outline: none;2776  flex: 1;2777  min-width: 0;2778  padding: 3px 0;2779  caret-color: var(--peach-accent);2780  transition: border-color 140ms ease, color 140ms ease;2781}2782.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2783.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2784.peach-field-value--edit:focus {2785  border-bottom-color: rgba(240, 232, 216, 0.28);2786  color: var(--peach-t0);2787}27882789/* "+ add optional field" links */2790.peach-entry-add-links {2791  display: flex;2792  gap: 12px;2793  flex-wrap: wrap;2794  margin-top: -2px;2795}2796.peach-add-field-link {2797  background: transparent;2798  border: none;2799  padding: 0;2800  cursor: pointer;2801  font-family: "IBM Plex Mono", monospace;2802  font-size: 0.5625rem;2803  letter-spacing: 0.1em;2804  text-transform: uppercase;2805  color: var(--peach-t2);2806  transition: color 140ms ease;2807}2808.peach-add-field-link:hover { color: var(--peach-accent); }28092810/* ── New entry form (legacy classes) ────────────────────────────────── */2811.peach-new-body {2812  flex: 1;2813  overflow-y: auto;2814  padding: 10px 20px 14px;2815}2816.peach-new-name-input {2817  background: transparent;2818  border: none;2819  outline: none;2820  width: 100%;2821  color: var(--peach-t0);2822  font-family: var(--font-display);2823  font-style: italic;2824  font-weight: 400;2825  font-size: 40px;2826  line-height: 0.95;2827  caret-color: var(--peach-accent);2828}2829.peach-new-name-input::placeholder { color: var(--peach-t2); }2830.peach-new-field-input {2831  background: transparent;2832  border: none;2833  outline: none;2834  flex: 1;2835  min-width: 0;2836  caret-color: var(--peach-accent);2837}2838.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }28392840/* ── Canary card ── */2841.peach-canary-card {2842  border: 1px solid rgba(217, 160, 48, 0.2);2843  background: rgba(217, 160, 48, 0.03);2844  border-radius: 8px;2845  padding: 12px;2846}28472848.peach-canary-settings-header {2849  display: flex;2850  align-items: center;2851  justify-content: space-between;2852  cursor: pointer;2853  user-select: none;2854}28552856.peach-canary-card .peach-label {2857  color: rgba(217, 160, 48, 0.85);2858}28592860.peach-canary-card .peach-new-field-input {2861  border-color: rgba(217, 160, 48, 0.25);2862}28632864.peach-canary-card .peach-new-field-input:focus {2865  border-color: rgba(217, 160, 48, 0.5);2866}28672868.peach-canary-body {2869  margin-top: 12px;2870  display: flex;2871  flex-direction: column;2872  gap: 10px;2873}28742875.peach-canary-explainer {2876  display: flex;2877  gap: 10px;2878  padding: 10px 12px;2879  border-radius: 10px;2880  background: rgba(217, 160, 48, 0.06);2881  border: 1px solid rgba(217, 160, 48, 0.22);2882  margin-bottom: 4px;2883}28842885.peach-canary-explainer-icon {2886  font-size: 1rem;2887  flex-shrink: 0;2888  line-height: 1.2;2889}28902891.peach-canary-explainer-title {2892  font-family: var(--font-ui);2893  font-size: 0.6875rem;2894  font-weight: 500;2895  color: rgba(217, 160, 48, 0.9);2896  margin: 0 0 3px;2897}28982899.peach-canary-explainer-copy {2900  font-family: var(--font-ui);2901  font-size: 0.625rem;2902  color: var(--peach-t2);2903  line-height: 1.55;2904  margin: 0;2905}29062907.peach-canary-hint {2908  font-size: 0.625rem;2909  color: var(--peach-t2);2910  font-family: Inter, system-ui, sans-serif;2911  line-height: 1.5;2912  margin-top: 4px;2913}29142915.peach-canary-actions-row {2916  display: flex;2917  align-items: center;2918  gap: 8px;2919}29202921.peach-canary-test-btn {2922  border-color: rgba(217, 160, 48, 0.3);2923  color: rgba(217, 160, 48, 0.85);2924}29252926.peach-canary-test-result {2927  font-size: 0.625rem;2928  font-family: Inter, system-ui, sans-serif;2929}29302931.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2932.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }29332934.peach-canary-badge {2935  display: flex;2936  position: relative;2937  z-index: 1;2938  align-items: center;2939  gap: 5px;2940  padding: 4px 10px;2941  background: rgba(217, 160, 48, 0.12);2942  border: 1px solid rgba(217, 160, 48, 0.35);2943  border-radius: 6px;2944  margin-bottom: 6px;2945  width: fit-content;2946}29472948.peach-canary-badge-label {2949  font-size: 0.625rem;2950  letter-spacing: 0.06em;2951  color: rgba(217, 160, 48, 0.9);2952  font-family: var(--font-ui);2953  text-transform: uppercase;2954}29552956.peach-canary-badge-icon {2957  font-size: 0.6875rem;2958}29592960.peach-canary-suppress-row {2961  display: flex;2962  align-items: center;2963  gap: 8px;2964  padding: 6px 10px;2965  background: rgba(217, 160, 48, 0.08);2966  border-radius: 6px;2967  margin-bottom: 8px;2968}29692970.peach-canary-suppress-label {2971  font-size: 0.6875rem;2972  color: rgba(217, 160, 48, 0.85);2973  cursor: pointer;2974  font-family: var(--font-ui);2975  letter-spacing: 0.04em;2976}29772978.peach-regen-panel {2979  position: relative;2980  z-index: 1;2981  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2982  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2983  border-radius: 8px;2984  padding: 12px;2985  margin-bottom: 8px;2986}29872988.peach-regen-panel-header {2989  display: flex;2990  align-items: center;2991  justify-content: space-between;2992  margin-bottom: 10px;2993}29942995.peach-regen-panel-title {2996  font-size: 0.6875rem;2997  font-weight: 600;2998  letter-spacing: 0.06em;2999  text-transform: uppercase;3000  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);3001}30023003.peach-regen-output {3004  background: rgba(0, 0, 0, 0.2);3005  border-radius: 6px;3006  padding: 10px;3007  margin-bottom: 10px;3008  font-family: var(--font-mono);3009  font-size: 0.8125rem;3010  word-break: break-all;3011  color: var(--peach-t1);3012}30133014.peach-regen-actions {3015  display: flex;3016  gap: 6px;3017}30183019.peach-regen-actions--spaced {3020  margin-bottom: 8px;3021}30223023.peach-regen-action-grow {3024  flex: 1;3025}30263027.peach-regen-copy-btn {3028  padding: 0 8px;3029}30303031.peach-regen-success {3032  position: relative;3033  z-index: 1;3034  background: rgba(40, 180, 80, 0.1);3035  border: 1px solid rgba(40, 180, 80, 0.3);3036  border-radius: 8px;3037  padding: 10px 12px;3038  margin-bottom: 8px;3039  display: flex;3040  align-items: center;3041  gap: 8px;3042  font-size: 0.6875rem;3043  color: rgba(40, 180, 80, 0.9);3044}30453046/* ── Note editor overlay ── */3047.peach-note-editor {3048  position: absolute;3049  inset: 0;3050  z-index: 200;3051  display: flex;3052  flex-direction: column;3053  background:3054    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),3055    var(--peach-bg);3056  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;3057}30583059.peach-note-editor-header {3060  display: flex;3061  align-items: center;3062  gap: 10px;3063  padding: 14px 16px 10px;3064  border-bottom: 1px solid var(--peach-t3);3065  flex-shrink: 0;3066}30673068.peach-note-editor-back {3069  background: transparent;3070  border: none;3071  cursor: pointer;3072  color: var(--peach-t2);3073  padding: 4px 6px;3074  border-radius: 6px;3075  display: flex;3076  align-items: center;3077  transition: color 120ms ease, background 120ms ease;3078  flex-shrink: 0;3079}3080.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }30813082.peach-note-editor-label {3083  flex: 1;3084  font-family: var(--font-display);3085  font-style: italic;3086  font-size: 0.9375rem;3087  color: var(--peach-t1);3088  letter-spacing: 0.02em;3089}30903091.peach-note-editor-save-btn {3092  background: transparent;3093  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);3094  border-radius: 8px;3095  color: var(--peach-accent);3096  font-family: "IBM Plex Mono", monospace;3097  font-size: 0.625rem;3098  letter-spacing: 0.06em;3099  text-transform: uppercase;3100  padding: 3px 10px;3101  cursor: pointer;3102  transition: background 120ms ease, border-color 120ms ease;3103}3104.peach-note-editor-save-btn:hover:not(:disabled) {3105  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3106  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3107}3108.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }31093110.peach-note-toolbar {3111  display: flex;3112  align-items: center;3113  gap: 3px;3114  padding: 6px 14px 5px;3115  border-bottom: 1px solid var(--peach-t3);3116  flex-shrink: 0;3117}31183119.peach-note-tool-btn {3120  background: transparent;3121  border: 1px solid transparent;3122  border-radius: 5px;3123  color: var(--peach-t2);3124  font-family: "IBM Plex Mono", monospace;3125  font-size: 0.625rem;3126  letter-spacing: 0.04em;3127  padding: 2px 8px;3128  cursor: pointer;3129  line-height: 1.6;3130  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;3131}3132.peach-note-tool-btn:hover {3133  background: var(--peach-t4);3134  color: var(--peach-t0);3135  border-color: var(--peach-t3);3136}31373138.peach-note-tool-icon {3139  padding: 3px 7px;3140  display: inline-flex;3141  align-items: center;3142  justify-content: center;3143}31443145.peach-note-tool-divider {3146  width: 1px;3147  height: 14px;3148  background: var(--peach-t3);3149  margin: 0 4px;3150  flex-shrink: 0;3151}31523153.peach-note-editor-body {3154  flex: 1;3155  overflow-y: auto;3156  padding: 16px 20px 20px;3157  outline: none;3158  font-family: var(--font-display);3159  font-size: 1rem;3160  line-height: 1.75;3161  color: var(--peach-t0);3162  scrollbar-width: none;3163  word-break: break-word;3164}3165.peach-note-editor-body:empty::before {3166  content: "write your note…";3167  color: var(--peach-t3);3168  font-style: italic;3169  pointer-events: none;3170}31713172/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */3173.peach-note-editor-inline {3174  display: flex;3175  flex-direction: column;3176  flex: 1;3177  min-height: 0;3178}3179.peach-note-editor-body--inline {3180  flex: 1;3181  min-height: 0;3182  font-size: 0.9375rem;3183  padding: 10px 20px 14px;3184}31853186/* Full-width toolbar row inside the body (Add.tsx note type).3187   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */3188.peach-note-toolbar-body {3189  display: flex;3190  align-items: center;3191  gap: 3px;3192  padding: 5px 20px 4px;3193  margin: 2px -20px 0;3194  border-bottom: 1px solid var(--peach-t3);3195  flex-shrink: 0;3196}31973198/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)3199   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn3200   and .peach-note-tool-divider button-level styles. */3201.peach-note-toolbar-inline {3202  display: flex;3203  align-items: center;3204  gap: 3px;3205  margin-left: auto;3206  padding-left: 10px;3207  border-left: 1px solid var(--peach-t3);3208  min-height: 22px;3209}32103211/* Entry.tsx toolbar row (no tabs, toolbar only) */3212.peach-entry-note-toolbar-row {3213  display: flex;3214  align-items: center;3215  margin: 4px 0 6px;3216  position: relative;3217  z-index: 1;3218}3219.peach-entry-note-toolbar-row .peach-note-toolbar-inline {3220  border-left: none;3221  padding-left: 0;3222  margin-left: 0;3223}32243225/* Note body — fills available vertical space in Add.tsx and Entry.tsx */3226.peach-note-body {3227  display: flex;3228  flex-direction: column;3229  flex: 1;3230  min-height: 0;3231  margin: 4px 0 0;3232}3233.peach-entry-body--new .peach-note-body {3234  margin: 8px -20px 0;3235}32363237/* Add.tsx body is a grid by default; swap to a flex column when a note is3238   active so the note body can stretch and pin the tags row to the bottom. */3239.peach-entry-body--new:has(.peach-note-body) {3240  display: flex;3241  flex-direction: column;3242}32433244/* Rich content element styles (editor + display) */3245.peach-note-editor-body h2,3246.peach-note-content h2 {3247  font-family: var(--font-display);3248  font-size: 20px;3249  font-weight: 600;3250  font-style: italic;3251  color: var(--peach-t0);3252  margin: 6px 0 2px;3253  line-height: 1.3;3254}3255.peach-note-editor-body ul,3256.peach-note-content ul {3257  padding-left: 18px;3258  margin: 3px 0;3259  list-style: disc;3260}3261.peach-note-editor-body ol,3262.peach-note-content ol {3263  padding-left: 18px;3264  margin: 3px 0;3265  list-style: decimal;3266}3267.peach-note-editor-body li,3268.peach-note-content li { margin: 2px 0; }3269.peach-note-editor-body hr,3270.peach-note-content hr {3271  border: none;3272  border-top: 1px solid var(--peach-t3);3273  margin: 10px 0;3274}32753276/* font size elements from execCommand */3277.peach-note-editor-body font[size="1"],3278.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }3279.peach-note-editor-body font[size="2"],3280.peach-note-content font[size="2"] { font-size: 0.8125rem; }3281.peach-note-editor-body font[size="3"],3282.peach-note-content font[size="3"] { font-size: 1rem; }3283.peach-note-editor-body font[size="4"],3284.peach-note-content font[size="4"] { font-size: 20px; }3285.peach-note-editor-body font[size="5"],3286.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }32873288/* bold / italic inside the editor and note display */3289.peach-note-editor-body b, .peach-note-editor-body strong,3290.peach-note-content b, .peach-note-content strong { font-weight: 700; }3291.peach-note-editor-body em, .peach-note-editor-body i,3292.peach-note-content em, .peach-note-content i { font-style: italic; }32933294/* note display — rendered HTML, no pre-wrap */3295.peach-note-content {3296  overflow: auto;3297  max-height: 340px;3298  word-break: break-word;3299}33003301/* ── Note textarea ── */3302.peach-note-textarea {3303  width: 100%;3304  min-height: 180px;3305  max-height: 280px;3306  resize: vertical;3307  background: var(--peach-t4);3308  border: 1px solid var(--peach-t3);3309  border-radius: 8px;3310  padding: 10px 12px;3311  font-family: "IBM Plex Mono", monospace;3312  font-size: 0.75rem;3313  line-height: 1.7;3314  color: var(--peach-t1);3315  outline: none;3316  transition: border-color 150ms ease;3317}33183319.peach-note-textarea:focus {3320  border-color: var(--peach-t2);3321}33223323.peach-note-char-count {3324  font-family: "IBM Plex Mono", monospace;3325  font-size: 0.5625rem;3326  color: var(--peach-t3);3327  text-align: right;3328  margin-top: 4px;3329  letter-spacing: 0.1em;3330}33313332/* ── Field input baseline ── */3333.peach-new-field-input {3334  width: 100%;3335  background: transparent;3336  border: none;3337  border-bottom: 1px solid var(--peach-t3);3338  padding: 4px 0;3339  color: var(--peach-t1);3340  font-family: "IBM Plex Mono", monospace;3341  font-size: 0.8125rem;3342  outline: none;3343  transition: border-color 150ms ease;3344}33453346.peach-new-field-input:focus {3347  border-bottom-color: var(--peach-t0);3348  color: var(--peach-t0);3349}33503351.peach-new-name-input {3352  width: 100%;3353  background: transparent;3354  border: none;3355  border-bottom: 1px solid var(--peach-t3);3356  padding: 6px 0;3357  font-family: var(--font-display);3358  font-style: italic;3359  font-size: 28px;3360  color: var(--peach-t0);3361  outline: none;3362  transition: border-color 150ms ease;3363}33643365.peach-new-name-input:focus {3366  border-bottom-color: var(--peach-t1);3367}33683369.peach-new-name-input::placeholder {3370  color: var(--peach-t2);3371  font-style: italic;3372}33733374.peach-new-field-input::placeholder {3375  color: var(--peach-t3);3376}33773378/* ── Demo entrance animation ── */3379#hd-shell {3380  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3381}3382@keyframes hd-shell-enter {3383  from { opacity: 0; transform: scale(0.96) translateY(16px); }3384  to   { opacity: 1; transform: scale(1) translateY(0); }3385}33863387/* ── Keyframes ── */3388@keyframes peach-char-enter {3389  from { opacity: 0; transform: translateY(0.22em); }3390  to   { opacity: 1; transform: translateY(0); }3391}3392@keyframes peach-content-enter {3393  from { opacity: 0.96; transform: translateY(4px); }3394  to   { opacity: 1; transform: translateY(0); }3395}3396@keyframes peach-content-exit {3397  from { opacity: 1; transform: translateY(0); }3398  to   { opacity: 0.92; transform: translateY(-3px); }3399}3400@keyframes peach-screen-enter {3401  from { opacity: 0; transform: translateY(14px); }3402  to   { opacity: 1; transform: translateY(0); }3403}3404@keyframes peach-shell-fade-in {3405  from { opacity: 0; }3406  to   { opacity: 1; }3407}3408@keyframes peach-veil-in {3409  from { opacity: 0; }3410  to   { opacity: 1; }3411}3412@keyframes peach-lock-settle {3413  0%   { transform: scale(0.9); }3414  65%  { transform: scale(1.08); }3415  100% { transform: scale(1); }3416}3417@keyframes peach-copy-confirm {3418  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3419  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); }3420}3421@keyframes peach-copy-retreat {3422  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); }3423  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3424}3425@keyframes peach-copy-flood {3426  from { opacity: 0; transform: scaleX(0.15); }3427  to   { opacity: 1; transform: scaleX(1); }3428}3429@keyframes peach-copy-icon-settle {3430  from  { transform: scale(0.84); }3431  70%   { transform: scale(1.08); }3432  to    { transform: scale(1); }3433}3434@keyframes peach-copy-sheen-retreat {3435  from { opacity: 1; transform: scaleX(1); }3436  to   { opacity: 0; transform: scaleX(0.15); }3437}3438@keyframes peach-copy-drain {3439  from { width: 100%; }3440  to   { width: 0; }3441}3442@keyframes peach-shake {3443  0%, 100% { transform: translateX(0); }3444  20%      { transform: translateX(-6px); }3445  40%      { transform: translateX(6px); }3446  60%      { transform: translateX(-4px); }3447  80%      { transform: translateX(4px); }3448}34493450@keyframes pip-pulse {3451  0% { transform: scale(1); }3452  40% { transform: scale(2.2); }3453  100% { transform: scale(1); }3454}345534563457/* ── Password generator ── */3458.peach-pwgen-body {3459  flex: 1; overflow-y: auto;3460  display: flex; flex-direction: column;3461}3462.peach-policy-badge {3463  display: flex; align-items: center;3464  padding: 6px 20px 0;3465  font-size: 0.625rem; font-family: Inter, sans-serif;3466  color: var(--peach-t2); letter-spacing: 0.04em;3467}3468.peach-pwgen-display {3469  padding: 14px 20px 12px;3470  border-bottom: 1px solid var(--peach-t3);3471  display: flex; align-items: flex-start; gap: 10px;3472}3473.peach-pwgen-display-row {3474  display: flex;3475  align-items: flex-start;3476  gap: 8px;3477  padding-bottom: 8px;3478  border-bottom: 1px solid var(--peach-t3);3479}3480.peach-pwgen-output {3481  flex: 1; min-width: 0; margin: 0;3482  font-family: "IBM Plex Mono", monospace;3483  font-size: 0.8125rem; color: var(--peach-t0);3484  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3485  white-space: normal;3486  padding: 10px 12px;3487  background: var(--peach-t4);3488  border-radius: 6px;3489  min-height: 36px;3490}3491.peach-pwgen-output-display {3492  flex: 1;3493  min-width: 0;3494  margin: 0;3495  font-family: var(--font-display);3496  font-style: italic;3497  font-weight: 300;3498  font-size: 32px;3499  line-height: 1.05;3500  color: var(--peach-t0);3501  word-break: break-all;3502  overflow-wrap: break-word;3503  white-space: normal;3504  letter-spacing: 0.02em;3505}3506.peach-pwgen-display-actions {3507  display: flex;3508  flex-direction: column;3509  gap: 4px;3510  flex-shrink: 0;3511  margin-top: 2px;3512}3513.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3514.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3515.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3516.peach-pwgen-len-num {3517  font-family: "IBM Plex Mono", monospace;3518  font-size: 0.75rem; color: var(--peach-accent);3519}3520.peach-pwgen-len-num--edit {3521  cursor: text;3522  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3523}3524.peach-pwgen-len-input {3525  font-family: "IBM Plex Mono", monospace;3526  font-size: 0.75rem;3527  color: var(--peach-accent);3528  background: transparent;3529  border: none;3530  border-bottom: 1px solid var(--peach-accent);3531  outline: none;3532  width: 32px;3533  text-align: right;3534  padding: 0;3535}3536.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3537.peach-pwgen-toggles { display: flex; flex-direction: column; }3538.peach-pwgen-charset-pills {3539  display: flex;3540  gap: 6px;3541  flex-wrap: wrap;3542}3543.peach-pwgen-pill {3544  padding: 4px 11px;3545  border-radius: 999px;3546  border: 1px solid var(--peach-t3);3547  background: transparent;3548  color: var(--peach-t2);3549  font-family: "IBM Plex Mono", monospace;3550  font-size: 0.5625rem;3551  letter-spacing: 0.08em;3552  cursor: pointer;3553  transition: all 150ms ease;3554}3555.peach-pwgen-pill.is-on {3556  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3557  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3558  color: var(--peach-accent);3559}3560.peach-pwgen-pill:not(.is-on):hover {3561  color: var(--peach-t1);3562  border-color: var(--peach-t2);3563}3564.peach-pwgen-use-btn {3565  width: 100%;3566  min-height: 34px;3567  border-radius: 8px;3568  margin-top: 2px;3569}3570.peach-generator-constraint-note {3571  font-family: 'IBM Plex Mono', monospace;3572  font-size: 10px;3573  color: var(--peach-t3);3574  letter-spacing: 0.04em;3575  margin: 0;3576  transition: opacity 200ms ease;3577}3578.peach-pwgen-toggle-row {3579  display: flex; align-items: center; justify-content: space-between;3580  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3581}3582.peach-pwgen-toggle-row:last-child { border-bottom: none; }3583.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }35843585/* Peach popup should not expose native scrollbars on internal panels. */3586.peach-settings-body,3587.peach-new-body,3588.peach-pwgen-body,3589.lock-screen,3590.peach-import-preview {3591  scrollbar-width: none;3592  -ms-overflow-style: none;3593  overscroll-behavior: contain;3594}3595.peach-settings-body::-webkit-scrollbar,3596.peach-new-body::-webkit-scrollbar,3597.peach-pwgen-body::-webkit-scrollbar,3598.lock-screen::-webkit-scrollbar,3599.peach-import-preview::-webkit-scrollbar {3600  width: 0;3601  height: 0;3602  display: none;3603}36043605.lock-screen {3606  height: 100%;3607  min-height: 100%;3608  overflow-y: auto;3609  padding: 18px 18px 16px;3610  gap: 14px;3611  grid-template-rows: auto auto auto 1fr auto;3612  align-content: stretch;3613  position: relative;3614  isolation: isolate;3615}3616.peach-screen.lock-screen--vault-stage {3617  display: flex;3618  flex-direction: column;3619  justify-content: flex-start;3620  gap: 18px;3621  padding: 20px 18px 18px;3622  overflow: hidden;3623}3624.peach-screen.lock-screen--vault-stage .peach-lock-panel {3625  margin-top: 0;3626}3627.lock-screen--onboarding {3628  display: flex;3629  flex-direction: column;3630  gap: 12px;3631  justify-content: flex-start;3632}36333634.lock-screen::before {3635  content: "";3636  position: absolute;3637  inset: 12px 18px auto auto;3638  width: 160px;3639  height: 160px;3640  border-radius: 999px;3641  background:3642    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%);3643  filter: blur(6px);3644  opacity: 0.7;3645  pointer-events: none;3646  z-index: 0;3647}36483649.peach-lock-rune-string {3650  flex: 1;3651  display: flex;3652  align-items: center;3653  justify-content: center;3654  gap: 6px;3655  font-family: PeachScript, monospace;3656  font-size: 0.8125rem;3657  letter-spacing: 0.05em;3658  pointer-events: none;3659  user-select: none;3660  position: relative;3661  z-index: 1;3662}36633664.peach-lock-rune-string span {3665  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3666  text-shadow:3667    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3668    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3669  transition: color 0.9s ease, text-shadow 0.9s ease;3670}36713672.peach-lock-rune-string span.is-glowing {3673  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3674  text-shadow:3675    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3676    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3677}36783679.lock-screen-header {3680  display: flex;3681  align-items: center;3682  justify-content: space-between;3683  position: relative;3684  z-index: 1;3685}36863687.lock-password-input.shake {3688  animation: peach-shake 300ms ease-in-out;3689}36903691.peach-hint-error {3692  color: rgba(220, 80, 60, 0.92);3693}36943695.peach-onboarding-headline {3696  margin: 0;3697  font-family: var(--font-display);3698  font-size: 35px;3699  line-height: 0.88;3700  font-style: italic;3701  font-weight: 400;3702  max-width: 252px;3703}37043705.peach-lock-copy {3706  display: grid;3707  gap: 8px;3708  position: relative;3709  z-index: 1;3710}37113712.peach-lock-copy--onboarding {3713  gap: 10px;3714}37153716.peach-lock-hero {3717  position: relative;3718  z-index: 1;3719  display: grid;3720  gap: 8px;3721  min-height: 0;3722  padding: 4px 2px 0;3723  border: none;3724  border-radius: 0;3725  background: transparent;3726  box-shadow: none;3727}3728.peach-lock-hero-art {3729  position: absolute;3730  right: -8px;3731  top: -6px;3732  width: 120px;3733  height: 120px;3734  display: flex;3735  align-items: center;3736  justify-content: center;3737  pointer-events: none;3738  opacity: 0.12;3739  filter: saturate(0.9);3740}3741.peach-lock-hero-mark {3742  width: 100%;3743  height: 100%;3744}3745/* Peach body stays brand-peach across every accent — we don't want a3746   green or blue peach when sage/sky is selected. Leaf + vein keep the3747   sage tint because a real peach has a sage leaf. In the new brand-kit3748   mark the leaf is path 1 and the vein stroke is path 2; the body and3749   back-lobe (paths 3 + 4) must stay untouched. */3750.peach-lock-hero-mark path:nth-child(1) {3751  fill: rgba(123, 144, 96, 0.88);3752}3753.peach-lock-hero-mark path:nth-child(2) {3754  stroke: rgba(94, 122, 66, 0.95);3755}3756.peach-lock-hero > *:not(.peach-lock-hero-art) {3757  position: relative;3758  z-index: 1;3759}37603761.peach-lock-eyebrow {3762  display: inline-flex;3763  align-items: center;3764  width: fit-content;3765  padding: 4px 9px;3766  border-radius: 999px;3767  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3768  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3769  color: var(--peach-t0);3770  font-family: "IBM Plex Mono", monospace;3771  font-size: 0.5rem;3772  letter-spacing: 0.18em;3773  text-transform: uppercase;3774}37753776.peach-lock-label-row {3777  display: flex;3778  align-items: center;3779  justify-content: space-between;3780  margin-bottom: 0;3781}37823783.peach-lock-reveal-btn {3784  display: inline-flex;3785  align-items: center;3786  gap: 4px;3787  background: none;3788  border: none;3789  cursor: pointer;3790  font-family: "IBM Plex Mono", monospace;3791  font-size: 0.5625rem;3792  letter-spacing: 0.06em;3793  color: var(--peach-t2);3794  padding: 2px 0;3795  transition: color 150ms ease;3796}37973798.peach-lock-reveal-btn:hover {3799  color: var(--peach-t1);3800}38013802.peach-lock-warning {3803  color: rgba(220, 80, 60, 0.85) !important;3804  line-height: 1.5;3805}38063807.peach-onboarding-cards {3808  display: grid;3809  gap: 8px;3810  position: relative;3811  z-index: 1;3812}38133814.peach-lock-panel {3815  position: relative;3816  z-index: 1;3817  display: grid;3818  gap: 9px;3819  padding: 14px 16px 15px;3820  border-radius: 18px;3821  border: 1px solid var(--peach-t3);3822  background:3823    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3824  box-shadow:3825    inset 0 1px 0 rgba(240, 232, 216, 0.04),3826    0 12px 28px rgba(0, 0, 0, 0.12);3827}38283829/* Glass surface — lock panel and settings groups */3830.peach-glass {3831  background: rgba(26, 20, 16, 0.65);3832  border: 1px solid rgba(255, 255, 255, 0.08);3833  border-radius: 12px;3834  backdrop-filter: blur(12px) saturate(1.4);3835  -webkit-backdrop-filter: blur(12px) saturate(1.4);3836}38373838@supports not (backdrop-filter: blur(1px)) {3839  .peach-glass {3840    background: rgba(26, 20, 16, 0.92);3841    border: 1px solid rgba(255, 255, 255, 0.10);3842    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3843  }3844}38453846.light .peach-glass,3847[data-theme="light"] .peach-glass {3848  background: rgba(240, 233, 223, 0.72);3849  border: 1px solid rgba(26, 18, 8, 0.08);3850  backdrop-filter: blur(12px) saturate(1.2);3851  -webkit-backdrop-filter: blur(12px) saturate(1.2);3852}38533854@supports not (backdrop-filter: blur(1px)) {3855  .light .peach-glass,3856  [data-theme="light"] .peach-glass {3857    background: rgba(240, 233, 223, 0.97);3858    border: 1px solid rgba(26, 18, 8, 0.10);3859  }3860}38613862/* Lock panel keeps its own border-radius over the generic glass token */3863.peach-lock-panel.peach-glass {3864  border-radius: 18px;3865  background: rgba(26, 20, 16, 0.65);3866  border: 1px solid rgba(255, 255, 255, 0.08);3867  box-shadow:3868    inset 0 1px 0 rgba(255, 255, 255, 0.05),3869    0 12px 28px rgba(0, 0, 0, 0.3);3870}38713872.light .peach-lock-panel.peach-glass,3873[data-theme="light"] .peach-lock-panel.peach-glass {3874  background: rgba(240, 233, 223, 0.82);3875  border: 1px solid rgba(26, 18, 8, 0.08);3876  box-shadow:3877    inset 0 1px 0 rgba(255, 255, 255, 0.4),3878    0 8px 24px rgba(80, 56, 32, 0.15);3879}38803881@supports not (backdrop-filter: blur(1px)) {3882  .peach-lock-panel.peach-glass {3883    background: rgba(26, 20, 16, 0.92);3884    box-shadow:3885      inset 0 1px 0 rgba(255, 255, 255, 0.05),3886      0 12px 28px rgba(0, 0, 0, 0.4);3887  }3888  .light .peach-lock-panel.peach-glass,3889  [data-theme="light"] .peach-lock-panel.peach-glass {3890    background: rgba(240, 233, 223, 0.98);3891  }3892}38933894.peach-lock-panel--secondary {3895  gap: 12px;3896}38973898.peach-lock-panel-header {3899  display: flex;3900  align-items: baseline;3901  justify-content: space-between;3902  gap: 12px;3903}39043905.peach-lock-option-grid {3906  display: grid;3907  gap: 10px;3908}39093910.peach-lock-option {3911  width: 100%;3912  display: grid;3913  gap: 6px;3914  padding: 14px 15px;3915  border-radius: 16px;3916  border: 1px solid rgba(240, 232, 216, 0.08);3917  background: rgba(240, 232, 216, 0.02);3918  color: var(--peach-t0);3919  text-align: left;3920  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3921}39223923.peach-lock-option:hover {3924  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3925  background: rgba(240, 232, 216, 0.04);3926  transform: translateY(-1px);3927}39283929.peach-lock-option-title {3930  font-size: 0.75rem;3931  color: var(--peach-t0);3932}39333934.peach-lock-option-copy {3935  font-size: 0.6875rem;3936  line-height: 1.55;3937  color: var(--peach-t1);3938}39393940.peach-onboarding-stack {3941  margin-top: 2px;3942}3943.peach-lock-panel-footer {3944  display: grid;3945  gap: 6px;3946  margin-top: 2px;3947  padding-top: 10px;3948  border-top: 1px solid rgba(240, 232, 216, 0.06);3949}39503951/* ── Restore tab view ─────────────────────────────────────────────────────3952   Tab-based restore screen replacing the old three-card picker. */39533954.peach-restore-tabview {3955  overflow: hidden;3956}39573958.peach-restore-tabcard {3959  flex: 1;3960  display: flex;3961  flex-direction: column;3962  gap: 0;3963  padding: 0;3964  overflow: hidden;3965  cursor: default;3966  user-select: none;3967  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3968}39693970/* ── Tab selector ─────────────────────────────────────────────────────── */39713972.peach-restore-tabs {3973  display: flex;3974  justify-content: space-around;3975  padding: 14px 10px 10px;3976  border-bottom: 1px solid var(--peach-t3);3977  gap: 2px;3978  overflow: hidden;3979  scrollbar-width: none;3980}3981.peach-restore-tabs::-webkit-scrollbar { display: none; }39823983.peach-restore-tab {3984  background: none;3985  border: none;3986  cursor: pointer;3987  padding: 3px 2px;3988  font-family: 'Cormorant Garamond', Georgia, serif;3989  font-style: italic;3990  font-size: 11px;3991  color: var(--peach-t2);3992  transition: color 150ms ease, text-shadow 150ms ease;3993  flex: 1;3994  min-width: 0;3995  text-align: center;3996  white-space: nowrap;3997  overflow: hidden;3998  text-overflow: ellipsis;3999}4000.peach-restore-tab:hover {4001  color: var(--peach-accent);4002  text-shadow:4003    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),4004    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);4005}4006.peach-restore-tab.is-active {4007  color: var(--peach-accent);4008  text-shadow:4009    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),4010    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);4011}40124013/* ── Content area ─────────────────────────────────────────────────────── */40144015.peach-restore-content {4016  padding: 16px 16px 14px;4017  display: flex;4018  flex-direction: column;4019  gap: 8px;4020  overflow: hidden;4021  scrollbar-width: none;4022  flex: 1;4023}4024.peach-restore-content::-webkit-scrollbar { display: none; }4025.peach-restore-content > * {4026  overflow: hidden;4027  scrollbar-width: none;4028}4029.peach-restore-content > *::-webkit-scrollbar { display: none; }40304031/* ── Shared tab inner layout ──────────────────────────────────────────── */40324033.peach-rt-symbols,4034.peach-rt-csv,4035.peach-rt-phone,4036.peach-restore-codex {4037  display: flex;4038  flex-direction: column;4039  gap: 8px;4040  overflow: hidden;4041}40424043.peach-restore-codex {4044  min-height: 0;4045  justify-content: center;4046}40474048.peach-restore-codex-title {4049  margin: 0;4050  font-family: var(--font-display);4051  font-size: 1rem;4052  font-style: italic;4053  color: var(--peach-t0);4054}40554056.peach-restore-codex-copy {4057  margin: 0;4058  font-size: 0.75rem;4059  line-height: 1.5;4060  color: var(--peach-t1);4061}40624063.peach-restore-codex-button {4064  width: 100%;4065  justify-content: center;4066}40674068.peach-rt-submit {4069  width: 100%;4070}40714072.peach-rt-error {4073  margin: 0;4074  font-size: 0.6875rem;4075  color: var(--peach-breach);4076  line-height: 1.4;4077}40784079/* ── PeachScript tab ──────────────────────────────────────────────────── */40804081.peach-restore-symbols-textarea {4082  font-family: 'PeachScript', monospace;4083  font-size: 13px;4084  line-height: 1.9;4085  letter-spacing: 0.1em;4086  word-break: break-all;4087  resize: none;4088  width: 100%;4089  min-height: 56px;4090  max-height: 72px;4091  overflow: hidden;4092  scrollbar-width: none;4093  -ms-overflow-style: none;4094  box-sizing: border-box;4095  padding: 6px 8px;4096  border-radius: 8px;4097  border: 1px solid var(--peach-t3);4098  background: rgba(240, 232, 216, 0.03);4099  color: var(--peach-t0);4100}4101.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }4102.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }41034104.peach-restore-symbols-pass {4105  width: 100%;4106  box-sizing: border-box;4107  padding: 7px 10px;4108  border-radius: 8px;4109  border: 1px solid var(--peach-t3);4110  background: rgba(240, 232, 216, 0.03);4111  color: var(--peach-t0);4112  font-size: 0.8125rem;4113}4114.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }4115.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }41164117.peach-rt-divider {4118  text-align: center;4119  font-size: 0.6875rem;4120  color: var(--peach-t2);4121  font-style: italic;4122}41234124.peach-rt-file-label {4125  width: 100%;4126  justify-content: center;4127}41284129.peach-rt-anim-canvas {4130  width: 100%;4131  height: 180px;4132  border-radius: 10px;4133  overflow: hidden;4134  display: block;4135}41364137/* ── CSV tab ──────────────────────────────────────────────────────────── */41384139.peach-rt-csv-sources {4140  margin: 0;4141  font-size: 0.6875rem;4142  color: var(--peach-t2);4143  line-height: 1.5;4144  text-align: center;4145}41464147.peach-rt-csv-warning {4148  margin: 0;4149  font-family: "IBM Plex Mono", monospace;4150  font-size: 0.5625rem;4151  letter-spacing: 0.12em;4152  color: var(--peach-breach);4153  text-align: center;4154}41554156/* ── From Phone tab ───────────────────────────────────────────────────── */41574158.peach-rt-phone-code {4159  margin: 0;4160  text-align: center;4161  font-family: "IBM Plex Mono", monospace;4162  font-size: 22px;4163  letter-spacing: 0.18em;4164  color: var(--peach-t0);4165}41664167.peach-rt-phone-qr {4168  display: block;4169  width: 96px;4170  height: 96px;4171  margin: 0 auto;4172  border-radius: 6px;4173  image-rendering: pixelated;4174  overflow: hidden;4175}41764177.peach-rt-phone-hint {4178  margin: 0;4179  font-size: 0.6875rem;4180  color: var(--peach-t2);4181  line-height: 1.55;4182  text-align: center;4183}41844185/* ── Intro popup ──────────────────────────────────────────────────────── */41864187.peach-restore-intro-overlay {4188  position: absolute;4189  inset: 0;4190  z-index: 100;4191  display: flex;4192  align-items: center;4193  justify-content: center;4194  padding: 20px;4195  background: rgba(12, 10, 6, 0.7);4196  backdrop-filter: blur(4px);4197  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4198}41994200.peach-restore-intro-card {4201  width: 100%;4202  display: flex;4203  flex-direction: column;4204  gap: 12px;4205  padding: 22px 20px 20px;4206  border-radius: 16px;4207  border: 1px solid var(--peach-t3);4208  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));4209  backdrop-filter: blur(4px);4210  -webkit-backdrop-filter: blur(4px);4211  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);4212}42134214.peach-restore-intro-headline {4215  margin: 0;4216  font-family: var(--font-display);4217  font-style: italic;4218  font-size: 20px;4219  font-weight: 400;4220  color: var(--peach-t0);4221}42224223.peach-restore-intro-body {4224  display: flex;4225  flex-direction: column;4226  gap: 8px;4227}4228.peach-restore-intro-body p {4229  margin: 0;4230  font-size: 0.75rem;4231  color: var(--peach-t1);4232  line-height: 1.5;4233}42344235.peach-restore-intro-btn {4236  width: 100%;4237  margin-top: 4px;4238}42394240/* Snapshot restore panel */4241.peach-snapshot-panel {4242  gap: 10px;4243  overflow-y: auto;4244  max-height: 340px;4245}4246.peach-snapshot-list {4247  display: flex;4248  flex-direction: column;4249  gap: 4px;4250}4251.peach-snapshot-row {4252  display: flex;4253  align-items: center;4254  justify-content: space-between;4255  width: 100%;4256  padding: 8px 10px;4257  border-radius: 8px;4258  border: 1px solid rgba(240, 232, 216, 0.07);4259  background: transparent;4260  cursor: pointer;4261  transition: border-color 120ms, background 120ms;4262  text-align: left;4263  gap: 8px;4264}4265.peach-snapshot-row:hover {4266  border-color: rgba(240, 232, 216, 0.14);4267  background: rgba(240, 232, 216, 0.03);4268}4269.peach-snapshot-row.is-selected {4270  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4271  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);4272}4273.peach-snapshot-time {4274  font-size: 11.5px;4275  color: var(--peach-t0);4276  flex: 1;4277}4278.peach-snapshot-count {4279  font-family: "IBM Plex Mono", monospace;4280  font-size: 0.625rem;4281  color: var(--peach-t2);4282  flex-shrink: 0;4283}4284.peach-snapshot-confirm {4285  display: flex;4286  flex-direction: column;4287  gap: 8px;4288  padding-top: 10px;4289  border-top: 1px solid rgba(240, 232, 216, 0.06);4290}4291.peach-snapshot-warning {4292  display: flex;4293  align-items: flex-start;4294  gap: 6px;4295  font-size: 10.5px;4296  color: rgba(220, 80, 60, 0.85);4297  line-height: 1.55;4298}4299.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }4300.peach-snapshot-confirm-row {4301  display: flex;4302  gap: 6px;4303  align-items: center;4304}4305.peach-snapshot-restore-btn {4306  width: 100%;4307}4308.peach-lock-hero--unlock .peach-lock-hero-art {4309  width: 112px;4310  height: 112px;4311  right: 0;4312  top: 2px;4313  opacity: 0.1;4314}43154316.peach-card {4317  border: 1px solid var(--peach-t3);4318  border-radius: 18px;4319  background:4320    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4321  box-shadow:4322    inset 0 0 0 1px var(--peach-border-accent),4323    inset 0 1px 0 rgba(240, 232, 216, 0.04),4324    0 12px 32px rgba(0, 0, 0, 0.14);4325  overflow: hidden;4326}43274328.peach-card-active {4329  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4330  box-shadow:4331    inset 0 1px 0 rgba(240, 232, 216, 0.05),4332    0 16px 38px rgba(0, 0, 0, 0.18),4333    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4334}43354336.peach-card-disabled {4337  opacity: 0.72;4338}43394340.peach-card-header {4341  width: 100%;4342  padding: 13px 16px 11px;4343  background: transparent;4344  color: var(--peach-t0);4345  display: flex;4346  justify-content: space-between;4347  align-items: center;4348  text-align: left;4349  font-size: 0.75rem;4350}43514352.peach-card-body {4353  padding: 0 16px 16px;4354  display: grid;4355  gap: 9px;4356}43574358.peach-card-tag {4359  color: var(--peach-t2);4360  font-family: "IBM Plex Mono", monospace;4361  font-size: 0.5625rem;4362  letter-spacing: 0.12em;4363  text-transform: uppercase;4364}43654366.peach-empty-copy {4367  display: grid;4368  gap: 6px;4369  color: var(--peach-t1);4370  font-size: 0.8125rem;4371}43724373.peach-lock-submit {4374  width: 100%;4375  box-shadow:4376    0 1px 0 rgba(255,255,255,0.10) inset,4377    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4378    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4379    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4380}43814382.peach-lock-secondary {4383  width: 100%;4384  border-color: var(--peach-t3);4385  background: rgba(240, 232, 216, 0.02);4386}43874388.peach-lock-secondary:hover {4389  background: rgba(240, 232, 216, 0.04);4390}43914392.peach-lock-note {4393  max-width: none;4394  line-height: 1.55;4395  margin: 0;4396}43974398.peach-overlay-action {4399  font-size: 0.625rem;4400  padding: 4px 8px;4401  letter-spacing: 0.06em;4402  min-width: 44px;4403  text-align: center;4404}44054406.peach-inline-action {4407  flex-shrink: 0;4408  font-size: 0.5625rem;4409  letter-spacing: 0.1em;4410  text-transform: uppercase;4411  padding: 4px 7px;4412}4413.peach-password-toggle-btn {4414  display: inline-flex;4415  align-items: center;4416  justify-content: center;4417  min-width: 30px;4418  min-height: 26px;4419  padding: 0 7px;4420  border: 1px solid var(--peach-t3);4421  border-radius: 999px;4422  background: rgba(240, 232, 216, 0.04);4423  color: var(--peach-t2);4424  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4425}4426.peach-password-toggle-btn:hover {4427  border-color: var(--peach-t2);4428  color: var(--peach-t0);4429  background: rgba(240, 232, 216, 0.06);4430}44314432.peach-new-textarea {4433  width: 100%;4434  min-height: 88px;4435  resize: vertical;4436  border: 0;4437  outline: none;4438  background: transparent;4439  color: var(--peach-t1);4440  font-family: "IBM Plex Mono", monospace;4441  font-size: 0.75rem;4442  line-height: 1.65;4443  caret-color: var(--peach-accent);4444}44454446.peach-new-textarea::placeholder {4447  color: var(--peach-t2);4448  opacity: 0.7;4449}44504451.peach-settings-actions {4452  display: grid;4453  gap: 8px;4454}44554456.peach-sync-section-label {4457  font-size: 0.6875rem;4458  color: var(--peach-t2);4459  text-transform: uppercase;4460  letter-spacing: 0.05em;4461}44624463.peach-sync-network-note {4464  margin: 0 0 6px;4465  font-size: 0.75rem;4466  color: var(--peach-t2);4467  line-height: 1.4;4468}44694470.peach-settings-row--tappable {4471  background: none;4472  border: none;4473  width: 100%;4474  text-align: left;4475  cursor: pointer;4476  color: var(--peach-t1);4477  font-size: 0.8125rem;4478}4479.peach-settings-row--tappable:hover {4480  color: var(--peach-t0);4481}44824483.peach-sync-pro-hint {4484  display: flex;4485  flex-direction: column;4486  align-items: flex-start;4487  gap: 8px;4488  padding: 12px 0 4px;4489}44904491.peach-sync-device-row {4492  display: flex;4493  justify-content: space-between;4494  align-items: center;4495  padding: 6px 0;4496  border-bottom: 1px solid var(--peach-t3);4497}44984499.peach-sync-device-info {4500  display: flex;4501  flex-direction: column;4502  gap: 2px;4503}45044505.peach-sync-device-name {4506  font-size: 0.8125rem;4507  color: var(--peach-t0);4508}45094510.peach-sync-device-meta {4511  font-size: 0.6875rem;4512  color: var(--peach-t2);4513}45144515.peach-sync-status-dot {4516  display: inline-block;4517  width: 8px;4518  height: 8px;4519  border-radius: 50%;4520  vertical-align: middle;4521}45224523.peach-sync-remove-btn {4524  color: var(--peach-breach);4525}45264527.peach-sync-advanced-row {4528  display: flex;4529  justify-content: space-between;4530  align-items: center;4531  padding: 6px 0;4532  gap: 12px;4533}45344535.peach-sync-advanced-info {4536  display: flex;4537  flex-direction: column;4538  gap: 2px;4539  flex: 1;4540}45414542.peach-sync-advanced-name {4543  font-size: 0.8125rem;4544  color: var(--peach-t0);4545}45464547.peach-sync-reset-confirm {4548  display: flex;4549  flex-direction: column;4550  gap: 8px;4551  padding: 10px;4552  border: 1px solid var(--peach-breach);4553  border-radius: 10px;4554  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4555}45564557.peach-sync-reset-confirm-headline {4558  font-size: 0.8125rem;4559  font-weight: 600;4560  color: var(--peach-t0);4561  margin: 0;4562}45634564.peach-sync-reset-confirm-body {4565  font-size: 0.75rem;4566  color: var(--peach-t1);4567  margin: 0;4568  line-height: 1.4;4569}45704571.peach-btn--danger {4572  background: var(--peach-breach);4573  color: #fff;4574  border-color: var(--peach-breach);4575}4576.peach-btn--danger:hover:not(:disabled) {4577  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4578}4579.peach-btn--danger:disabled {4580  opacity: 0.55;4581  cursor: not-allowed;4582}45834584.peach-sync-hero-icon {4585  color: var(--peach-t1);4586  opacity: 0.85;4587}45884589.peach-import-preview {4590  margin-bottom: 12px;4591  max-height: 152px;4592  overflow-y: auto;4593  border: 1px solid var(--peach-t3);4594  border-radius: 10px;4595  padding: 8px 10px;4596  display: grid;4597  gap: 8px;4598  background: rgba(240, 232, 216, 0.02);4599}46004601.peach-import-preview-row {4602  display: flex;4603  justify-content: space-between;4604  gap: 10px;4605  font-size: 0.6875rem;4606  color: var(--peach-t1);4607}46084609.peach-import-preview-title {4610  color: var(--peach-t0);4611  flex: 1;4612  min-width: 0;4613  overflow: hidden;4614  text-overflow: ellipsis;4615  white-space: nowrap;4616}46174618.peach-import-preview-meta {4619  color: var(--peach-t2);4620  flex-shrink: 0;4621  max-width: 42%;4622  overflow: hidden;4623  text-overflow: ellipsis;4624  white-space: nowrap;4625}46264627.peach-import-preview-more {4628  color: var(--peach-t2);4629  font-size: 0.625rem;4630}46314632.peach-restore-copy {4633  margin: 0;4634  color: var(--peach-t1);4635  font-size: 0.6875rem;4636  line-height: 1.6;4637}46384639.peach-restore-warning {4640  padding: 10px 12px;4641  border-radius: 12px;4642  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4643  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4644  color: var(--peach-t0);4645  font-size: 0.6875rem;4646  line-height: 1.55;4647}46484649.peach-provider-chips {4650  display: flex;4651  flex-wrap: wrap;4652  gap: 6px;4653}46544655.peach-provider-chip {4656  display: inline-flex;4657  align-items: center;4658  padding: 5px 8px;4659  border-radius: 999px;4660  border: 1px solid var(--peach-t3);4661  background: rgba(240, 232, 216, 0.02);4662  color: var(--peach-t1);4663  font-family: "IBM Plex Mono", monospace;4664  font-size: 0.5rem;4665  letter-spacing: 0.08em;4666  text-transform: uppercase;4667}46684669.peach-restore-file,4670.peach-restore-input {4671  width: 100%;4672  border-radius: 10px;4673  border: 1px solid var(--peach-t3);4674  background: var(--peach-s2);4675  color: var(--peach-t0);4676  font-size: 0.75rem;4677}46784679.peach-restore-file {4680  padding: 9px 10px;4681}46824683.peach-restore-file::file-selector-button {4684  margin-right: 10px;4685  padding: 7px 10px;4686  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4687  border-radius: 999px;4688  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4689  color: var(--peach-t0);4690  font-size: 0.625rem;4691  letter-spacing: 0.08em;4692  text-transform: uppercase;4693  cursor: pointer;4694}46954696.peach-restore-input {4697  padding: 10px 12px;4698}46994700.peach-auth-grid {4701  display: grid;4702  gap: 10px;4703}47044705.peach-import-summary {4706  color: var(--peach-t1);4707  font-size: 0.75rem;4708  line-height: 1.6;4709  margin-bottom: 12px;4710}47114712.peach-restore-error {4713  color: rgba(220, 80, 60, 0.95);4714  font-size: 0.75rem;4715  line-height: 1.55;4716}47174718.peach-passkey-card {4719  max-width: 400px;4720  margin: auto 16px;4721  align-self: center;4722  width: calc(100% - 32px);4723}47244725/* Center the approval card vertically inside the overlay-view (which sets4726 * flex-direction: column without justify-content). Without this, the card4727 * sits at the top with a tall empty band below — looks unfinished on the4728 * 320px popup. */4729.peach-overlay-view:has(.peach-passkey-card) {4730  justify-content: center;4731}47324733.peach-pro-badge {4734  padding: 2px 6px;4735  border-radius: 999px;4736  font-family: var(--font-ui);4737  font-size: 0.625rem;4738  letter-spacing: 0.08em;4739  text-transform: uppercase;4740  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4741  color: var(--peach-accent);4742}47434744/* ── Shortcuts rebind table ─────────────────────────────────── */4745.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4746.peach-shortcut-row {4747  display: flex;4748  align-items: center;4749  gap: 10px;4750  padding: 6px 0;4751}4752.peach-shortcut-row-label {4753  flex: 1;4754  font-size: 0.75rem;4755  color: var(--peach-t0);4756}4757.peach-shortcut-chip {4758  min-width: 64px;4759  padding: 4px 10px;4760  border-radius: 6px;4761  border: 1px solid var(--peach-t3);4762  background: var(--peach-input-bg, var(--surface-card));4763  color: var(--peach-t0);4764  font-family: var(--font-mono);4765  font-size: 0.6875rem;4766  letter-spacing: 0.04em;4767  cursor: pointer;4768  text-align: center;4769  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4770}4771.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4772.peach-shortcut-chip.is-custom {4773  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4774  color: var(--peach-accent);4775}4776.peach-shortcut-chip.is-capturing {4777  border-color: var(--peach-accent);4778  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4779  color: var(--peach-accent);4780  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4781}4782@keyframes peach-shortcut-capture-pulse {4783  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4784  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4785}4786.peach-shortcut-reset {4787  background: transparent;4788  border: none;4789  cursor: pointer;4790  color: var(--peach-t2);4791  padding: 4px 6px;4792  border-radius: 5px;4793  font-size: 0.875rem;4794  line-height: 1;4795  transition: color 120ms ease, background 120ms ease;4796}4797.peach-shortcut-reset:hover {4798  color: var(--peach-t0);4799  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4800}4801.peach-shortcuts-conflict {4802  margin: 4px 0 0;4803  padding: 8px 10px;4804  border-radius: 7px;4805  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4806  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4807  font-family: var(--font-mono);4808  font-size: 0.6875rem;4809  color: var(--peach-t0);4810}48114812/* ── Help dialog overlay (? to open) ────────────────────────── */4813.peach-shortcuts-help-backdrop {4814  position: fixed;4815  inset: 0;4816  background: rgba(0, 0, 0, 0.55);4817  backdrop-filter: blur(2px);4818  display: flex;4819  align-items: center;4820  justify-content: center;4821  z-index: 1000;4822  animation: peach-help-fade-in 140ms ease forwards;4823}4824@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4825.peach-shortcuts-help-card {4826  width: min(320px, 92vw);4827  max-height: 80vh;4828  overflow-y: auto;4829  border-radius: 14px;4830  border: 1px solid var(--peach-t3);4831  background: var(--peach-bg);4832  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4833  padding: 16px 18px 18px;4834  display: flex;4835  flex-direction: column;4836  gap: 12px;4837}4838.peach-shortcuts-help-head {4839  display: flex; align-items: center; justify-content: space-between;4840}4841.peach-shortcuts-help-head h3 {4842  margin: 0;4843  font-family: var(--font-display);4844  font-style: italic;4845  font-weight: 400;4846  font-size: 22px;4847  color: var(--peach-t0);4848}4849.peach-shortcuts-help-close {4850  background: transparent;4851  border: none;4852  color: var(--peach-t2);4853  cursor: pointer;4854  font-size: 0.875rem;4855  padding: 4px 8px;4856  border-radius: 5px;4857}4858.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4859.peach-shortcuts-help-body ul {4860  list-style: none; padding: 0; margin: 4px 0 12px;4861  display: grid; gap: 8px;4862}4863.peach-shortcuts-help-body li {4864  display: flex; align-items: center; justify-content: space-between; gap: 12px;4865  font-size: 0.75rem; color: var(--peach-t0);4866}4867.peach-shortcuts-help-body kbd {4868  font-family: var(--font-mono);4869  font-size: 0.6875rem;4870  padding: 3px 8px;4871  border-radius: 6px;4872  background: var(--surface-card);4873  border: 1px solid var(--peach-t3);4874  color: var(--peach-accent);4875  letter-spacing: 0.04em;4876}48774878/* ── Pro promo on Account screen ────────────────────────────── */4879.peach-pro-promo {4880  position: relative;4881  border-radius: 14px;4882  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4883  background:4884    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4885    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4886    var(--surface-card);4887  overflow: hidden;4888  margin-bottom: 14px;4889}4890.peach-pro-promo-glow {4891  position: absolute;4892  inset: -40% -20% auto auto;4893  width: 220px; height: 220px;4894  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4895  pointer-events: none;4896  filter: blur(8px);4897}4898.peach-pro-promo-inner {4899  position: relative;4900  padding: 18px 18px 16px;4901}4902.peach-pro-promo-title {4903  font-family: var(--font-display);4904  font-style: italic;4905  font-weight: 400;4906  font-size: 28px;4907  line-height: 1;4908  letter-spacing: -0.005em;4909  color: var(--peach-t0);4910  margin: 0 0 4px;4911}4912.peach-pro-promo-tagline {4913  font-family: var(--font-mono);4914  font-size: 0.625rem;4915  letter-spacing: 0.06em;4916  color: var(--peach-t2);4917  margin: 0 0 14px;4918}4919.peach-pro-promo-list {4920  list-style: none;4921  margin: 0 0 16px;4922  padding: 0;4923  display: grid;4924  gap: 9px;4925}4926.peach-pro-promo-list li {4927  display: flex;4928  align-items: flex-start;4929  gap: 9px;4930  font-size: 0.75rem;4931  color: var(--peach-t1);4932  line-height: 1.4;4933}4934.peach-pro-promo-list svg {4935  width: 14px;4936  height: 14px;4937  flex-shrink: 0;4938  color: var(--peach-accent);4939  margin-top: 2px;4940}4941.peach-pro-promo-list span {4942  color: var(--peach-t0);4943}4944.peach-pro-promo-cta {4945  width: 100%;4946  background: var(--peach-accent);4947  color: #fff;4948  border: none;4949  padding: 9px 12px;4950  border-radius: 9px;4951  font-size: 0.75rem;4952  font-weight: 500;4953  font-family: var(--font-ui);4954  letter-spacing: 0.02em;4955  text-decoration: none;4956  display: inline-flex;4957  align-items: center;4958  justify-content: center;4959  cursor: pointer;4960  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4961  box-shadow: 0 2px 16px var(--peach-glow);4962}4963.peach-pro-promo-cta:hover {4964  filter: brightness(1.07);4965  box-shadow: 0 4px 24px var(--peach-glow);4966  transform: translateY(-1px);4967}4968.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }49694970.peach-pro-or-divider {4971  display: flex;4972  align-items: center;4973  gap: 10px;4974  margin: 4px 0 12px;4975  font-family: var(--font-mono);4976  font-size: 0.625rem;4977  letter-spacing: 0.06em;4978  color: var(--peach-t2);4979  text-transform: uppercase;4980}4981.peach-pro-or-divider::before,4982.peach-pro-or-divider::after {4983  content: "";4984  flex: 1;4985  height: 1px;4986  background: var(--peach-t3);4987}49884989.peach-loading {4990  position: absolute;4991  inset: 0;4992  display: flex;4993  align-items: center;4994  justify-content: center;4995  background: var(--bg);4996  animation: peach-loading-pulse 1.2s ease-in-out infinite;4997}49984999@keyframes peach-loading-pulse {5000  0%, 100% { opacity: 0.6; }5001  50% { opacity: 1; }5002}50035004/* ── Health Dashboard ─────────────────────────────────────────────────── */5005.peach-health-body {5006  flex: 1;5007  overflow-y: auto;5008  display: flex;5009  flex-direction: column;5010  /* Hide the platform scrollbar — every other scrollable surface in the5011   * popup hides it; the Health view was the one outlier and it ruined the5012   * polish. Behavior unchanged, just no rail rendered. */5013  scrollbar-width: none;5014  -ms-overflow-style: none;5015}5016.peach-health-body::-webkit-scrollbar { display: none; }50175018/* Loading screen for the Vault Health view. The advanced report computation5019 * can run for a few seconds on a large vault — without a clear loading5020 * screen the surface looked broken (the entry view bleeds through the5021 * empty body). Centered glyph + title + copy + indeterminate progress bar. */5022.peach-health-loading-screen {5023  flex: 1;5024  display: flex;5025  flex-direction: column;5026  align-items: center;5027  justify-content: center;5028  gap: 14px;5029  padding: 32px 28px;5030  text-align: center;5031}50325033.peach-health-loading-glyph {5034  width: 48px;5035  height: 48px;5036  display: flex;5037  align-items: center;5038  justify-content: center;5039  border-radius: 14px;5040  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5041  color: var(--peach-accent);5042}50435044.peach-health-loading-title {5045  margin: 0;5046  font-family: var(--font-display);5047  font-style: italic;5048  font-weight: 300;5049  font-size: 19px;5050  line-height: 1.2;5051  color: var(--peach-t0);5052}50535054.peach-health-loading-copy {5055  margin: 0;5056  max-width: 240px;5057  font-size: 0.75rem;5058  line-height: 1.55;5059  color: var(--peach-t2);5060}50615062.peach-health-loading-track {5063  width: 200px;5064  height: 3px;5065  margin-top: 6px;5066  border-radius: 999px;5067  background: rgba(240, 232, 216, 0.06);5068  overflow: hidden;5069}50705071.peach-health-loading-fill {5072  width: 40%;5073  height: 100%;5074  border-radius: inherit;5075  background: linear-gradient(5076    90deg,5077    transparent 0%,5078    var(--peach-accent) 50%,5079    transparent 100%5080  );5081  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;5082}50835084@keyframes peach-health-loading-sweep {5085  0%   { transform: translateX(-100%); }5086  100% { transform: translateX(350%); }5087}50885089[data-motion="reduce"] .peach-health-loading-fill,5090[data-motion="reduce"] .peach-health-loading-glyph svg path {5091  animation: none;5092}50935094.peach-health-summary {5095  padding: 10px 16px 6px;5096  font-family: "IBM Plex Mono", monospace;5097  font-size: 0.6875rem;5098}5099.peach-health-summary-warn { color: rgba(220,80,60,0.9); }5100.peach-health-summary-ok { color: var(--peach-t2); }51015102.peach-health-check-row {5103  padding: 0 16px 10px;5104}5105.peach-health-check-btn {5106  width: 100%;5107  display: flex;5108  align-items: center;5109  justify-content: center;5110}51115112.peach-health-sections {5113  flex: 1;5114  display: flex;5115  flex-direction: column;5116}51175118.peach-health-section {5119  border-bottom: 1px solid var(--peach-t3);5120}51215122.peach-health-section-header {5123  width: 100%;5124  display: flex;5125  align-items: center;5126  justify-content: space-between;5127  padding: 9px 16px;5128  background: transparent;5129  cursor: pointer;5130  color: var(--peach-t0);5131}51325133.peach-health-section-title-row {5134  display: flex;5135  align-items: center;5136  gap: 8px;5137}51385139.peach-health-count-badge {5140  display: inline-flex;5141  align-items: center;5142  justify-content: center;5143  min-width: 20px;5144  height: 18px;5145  padding: 0 5px;5146  border-radius: 999px;5147  background: rgba(220,80,60,0.15);5148  border: 1px solid rgba(220,80,60,0.25);5149  font-family: "IBM Plex Mono", monospace;5150  font-size: 0.5625rem;5151  color: rgba(220,80,60,0.9);5152}51535154.peach-health-section-title {5155  font-family: "IBM Plex Mono", monospace;5156  font-size: 0.6875rem;5157  text-transform: uppercase;5158  letter-spacing: 0.1em;5159  color: var(--peach-t1);5160}51615162.peach-health-chevron {5163  color: var(--peach-t2);5164  transition: transform 200ms ease;5165  flex-shrink: 0;5166}5167.peach-health-chevron.is-expanded {5168  transform: rotate(180deg);5169}51705171.peach-health-section-body {5172  padding: 0 16px 10px;5173  display: flex;5174  flex-direction: column;5175  gap: 4px;5176}51775178.peach-health-row {5179  display: flex;5180  align-items: flex-start;5181  justify-content: space-between;5182  gap: 8px;5183  padding: 6px 8px;5184  border-radius: 8px;5185  background: rgba(240,232,216,0.02);5186}51875188.peach-health-row-info {5189  flex: 1;5190  min-width: 0;5191  display: flex;5192  flex-direction: column;5193  gap: 2px;5194}51955196.peach-health-row-name {5197  font-family: var(--font-display);5198  font-size: 0.9375rem;5199  font-style: italic;5200  font-weight: 400;5201  color: var(--peach-t0);5202  white-space: nowrap;5203  overflow: hidden;5204  text-overflow: ellipsis;5205}52065207.peach-health-row-meta {5208  font-family: "IBM Plex Mono", monospace;5209  font-size: 0.5625rem;5210  color: var(--peach-t2);5211  letter-spacing: 0.05em;5212}52135214.peach-health-fix-btn {5215  font-size: 0.5625rem;5216  letter-spacing: 0.08em;5217  text-transform: uppercase;5218  padding: 4px 7px;5219  flex-shrink: 0;5220  display: flex;5221  align-items: center;5222}52235224.peach-health-empty {5225  font-family: "IBM Plex Mono", monospace;5226  font-size: 0.625rem;5227  color: var(--peach-t2);5228  padding: 6px 0;5229}52305231.peach-health-loading {5232  font-family: "IBM Plex Mono", monospace;5233  font-size: 0.625rem;5234  color: var(--peach-t2);5235  padding: 6px 0;5236  display: flex;5237  align-items: center;5238  gap: 6px;5239}52405241.peach-health-loading::before {5242  content: "";5243  width: 10px;5244  height: 10px;5245  border: 1.5px solid var(--peach-t3);5246  border-top-color: var(--peach-accent);5247  border-radius: 50%;5248  animation: peach-spin 600ms linear infinite;5249}52505251@keyframes peach-spin {5252  to { transform: rotate(360deg); }5253}52545255.peach-spinner {5256  width: 32px;5257  height: 32px;5258  border: 2px solid var(--peach-s2);5259  border-top-color: var(--peach-accent);5260  border-radius: 50%;5261  margin: 0 auto 16px;5262  animation: peach-spin 0.8s linear infinite;5263}52645265.peach-progress-screen {5266  text-align: center;5267  padding: 32px 16px;5268}52695270.peach-progress-screen-title {5271  font-size: 0.8125rem;5272  color: var(--peach-t0);5273  margin-bottom: 16px;5274}52755276.peach-progress-screen-stage {5277  font-size: 0.6875rem;5278  color: var(--peach-t2);5279  min-height: 14px;5280}52815282.peach-progress-screen-note {5283  font-size: 0.625rem;5284  color: var(--peach-t2);5285  margin-top: 8px;5286}52875288/* Pairing commits the vault key before the first entry sync. Keep that5289   implementation detail off-screen until the paired source records a real,5290   durable sync completion. */5291.peach-initial-sync {5292  position: relative;5293  display: flex;5294  align-items: center;5295  justify-content: center;5296  overflow: hidden;5297}52985299.peach-initial-sync-card {5300  position: relative;5301  z-index: 1;5302  width: min(100%, 320px);5303  display: flex;5304  flex-direction: column;5305  align-items: center;5306  gap: 10px;5307  padding: 36px 26px;5308  text-align: center;5309}53105311.peach-initial-sync-mark {5312  width: 54px;5313  height: 54px;5314  display: flex;5315  align-items: center;5316  justify-content: center;5317  border-radius: 18px;5318  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5319  margin-bottom: 4px;5320}53215322.peach-initial-sync-mark svg {5323  width: 34px;5324  height: 34px;5325}53265327.peach-initial-sync-card h1 {5328  margin: 0;5329  color: var(--peach-t0);5330  font-family: var(--font-display);5331  font-size: 1.55rem;5332  font-style: italic;5333  font-weight: 400;5334}53355336.peach-initial-sync-card > p {5337  margin: 0;5338}53395340.peach-initial-sync-card #initial-sync-copy {5341  color: var(--peach-t1);5342  font-size: 0.78rem;5343  line-height: 1.55;5344}53455346.peach-initial-sync-progress {5347  width: 100%;5348  height: 3px;5349  overflow: hidden;5350  border-radius: 999px;5351  background: color-mix(in srgb, var(--peach-t0) 8%, transparent);5352  margin: 8px 0 2px;5353}53545355.peach-initial-sync-progress span {5356  display: block;5357  width: 42%;5358  height: 100%;5359  border-radius: inherit;5360  background: var(--peach-accent);5361  animation: peach-initial-sync-progress 1.4s cubic-bezier(0.2, 0, 0, 1) infinite;5362}53635364@keyframes peach-initial-sync-progress {5365  from { transform: translateX(-115%); }5366  to { transform: translateX(340%); }5367}53685369.peach-initial-sync-note {5370  color: var(--peach-t2);5371  font-size: 0.625rem;5372  line-height: 1.45;5373}53745375.peach-initial-sync-slow {5376  width: 100%;5377  display: flex;5378  flex-direction: column;5379  gap: 10px;5380  padding-top: 10px;5381  border-top: 1px solid var(--peach-border);5382}53835384.peach-initial-sync-slow p {5385  margin: 0;5386  color: var(--peach-t2);5387  font-size: 0.6875rem;5388  line-height: 1.45;5389}53905391.peach-initial-sync-slow .peach-btn {5392  width: 100%;5393}53945395@media (prefers-reduced-motion: reduce) {5396  .peach-initial-sync-progress span {5397    width: 100%;5398    opacity: 0.7;5399    animation: none;5400  }5401}54025403/* Tag chips */5404.peach-tag-chip {5405  display: inline-flex;5406  align-items: center;5407  gap: 4px;5408  padding: 3px 8px;5409  border-radius: 999px;5410  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5411  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5412  color: var(--peach-t0);5413  font-family: "IBM Plex Mono", monospace;5414  font-size: 0.625rem;5415  letter-spacing: 0.04em;5416}54175418.peach-tag-chip-remove {5419  background: transparent;5420  border: none;5421  color: inherit;5422  opacity: 0.6;5423  cursor: pointer;5424  padding: 0;5425  font-size: 0.75rem;5426  line-height: 1;5427}54285429.peach-tag-chip-remove:hover {5430  opacity: 1;5431}54325433/* Tag input */5434.peach-tag-input-wrap {5435  border-bottom: 1px solid var(--peach-t3);5436}54375438.peach-tag-suggestions {5439  display: flex;5440  flex-wrap: wrap;5441  gap: 4px;5442  padding: 6px 0;5443}54445445.peach-tag-suggestion {5446  padding: 2px 8px;5447  border-radius: 999px;5448  border: 1px solid var(--peach-t3);5449  background: var(--peach-s2);5450  color: var(--peach-t1);5451  font-family: "IBM Plex Mono", monospace;5452  font-size: 0.625rem;5453  cursor: pointer;5454  transition: border-color 80ms ease, background 80ms ease;5455}54565457.peach-tag-suggestion:hover {5458  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5459  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5460}54615462/* Identity suggestions — shown below username/email inputs in new-entry form */5463@keyframes peach-suggest-in {5464  from { opacity: 0; transform: translateY(-4px); }5465  to   { opacity: 1; transform: none; }5466}54675468.peach-identity-suggestions {5469  display: flex;5470  flex-direction: column;5471  gap: 1px;5472  margin-top: 4px;5473  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5474}54755476.peach-identity-filter-row {5477  display: flex;5478  align-items: center;5479  gap: 4px;5480  padding: 2px 0 5px;5481}54825483.peach-identity-collapse-btn {5484  margin-left: auto;5485  background: transparent;5486  border: none;5487  cursor: pointer;5488  color: var(--peach-t3);5489  padding: 2px 4px;5490  display: flex;5491  align-items: center;5492  line-height: 0;5493  border-radius: 3px;5494  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5495}54965497.peach-identity-collapse-btn:hover {5498  color: var(--peach-t1);5499}55005501.peach-identity-collapse-btn.is-collapsed {5502  transform: rotate(-90deg);5503}55045505.peach-identity-rows {5506  display: grid;5507  grid-template-rows: 1fr;5508  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5509}55105511.peach-identity-rows.is-collapsed {5512  grid-template-rows: 0fr;5513}55145515.peach-identity-rows-inner {5516  overflow-y: auto;5517  min-height: 0;5518  max-height: 148px;5519  scrollbar-width: thin;5520  scrollbar-color: var(--peach-t3) transparent;5521  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5522  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5523}55245525.peach-identity-rows-inner::-webkit-scrollbar {5526  width: 4px;5527}55285529.peach-identity-rows-inner::-webkit-scrollbar-track {5530  background: transparent;5531}55325533.peach-identity-rows-inner::-webkit-scrollbar-thumb {5534  background: var(--peach-t3);5535  border-radius: 2px;5536}55375538.peach-identity-filter-pill {5539  padding: 2px 7px;5540  border-radius: 999px;5541  border: 1px solid var(--peach-t3);5542  background: transparent;5543  color: var(--peach-t2);5544  font-family: "IBM Plex Mono", monospace;5545  font-size: 0.6rem;5546  cursor: pointer;5547  transition: border-color 80ms, background 80ms, color 80ms;5548}55495550.peach-identity-filter-pill.is-on {5551  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5552  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5553  color: var(--peach-accent);5554}55555556.peach-identity-suggestion {5557  display: flex;5558  align-items: center;5559  gap: 6px;5560  width: 100%;5561  padding: 4px 6px;5562  border-radius: 5px;5563  border: none;5564  background: transparent;5565  cursor: pointer;5566  text-align: left;5567  transition: background 80ms ease;5568}55695570.peach-identity-suggestion:hover,5571.peach-identity-suggestion:focus {5572  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5573  outline: none;5574}55755576.peach-identity-suggestion-value {5577  font-family: "IBM Plex Mono", monospace;5578  font-size: 0.7rem;5579  color: var(--peach-t1);5580  overflow: hidden;5581  text-overflow: ellipsis;5582  white-space: nowrap;5583  flex: 1;5584  min-width: 0;5585}55865587.peach-identity-suggestion-type {5588  font-family: "IBM Plex Mono", monospace;5589  font-size: 0.55rem;5590  font-weight: 600;5591  flex-shrink: 0;5592  padding: 1px 4px;5593  border-radius: 3px;5594}55955596.peach-identity-suggestion-type--email {5597  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5598  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5599}56005601.peach-identity-suggestion-type--username {5602  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5603  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5604}56055606.peach-identity-suggestion-meta {5607  font-family: "IBM Plex Mono", monospace;5608  font-size: 0.6rem;5609  color: var(--peach-t3);5610  flex-shrink: 0;5611}56125613/* Tag filter strip */5614.peach-tag-filter-strip {5615  border-bottom: 1px solid var(--peach-t3);5616  flex-shrink: 0;5617}56185619.peach-tag-filter-chip {5620  display: inline-flex;5621  align-items: center;5622  padding: 4px 10px;5623  border-radius: 999px;5624  border: 1px solid var(--peach-t3);5625  background: transparent;5626  color: var(--peach-t2);5627  font-family: "IBM Plex Mono", monospace;5628  font-size: 0.5625rem;5629  letter-spacing: 0.06em;5630  text-transform: uppercase;5631  cursor: pointer;5632  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5633  white-space: nowrap;5634}56355636.peach-tag-filter-chip:hover {5637  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5638  color: var(--peach-t1);5639}56405641.peach-tag-filter-chip.is-selected {5642  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5643  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5644  color: var(--peach-t0);5645}56465647/* ─────────────────────────────────────────────────────────────────────────5648   v1.4.12 additions5649   ─────────────────────────────────────────────────────────────────────── */56505651/* Sort bar */5652.peach-sort-bar {5653  display: flex;5654  align-items: center;5655  gap: 4px;5656  padding: 5px 12px;5657  border-bottom: 1px solid var(--peach-t3);5658  flex-shrink: 0;5659  overflow-x: auto;5660  scrollbar-width: none;5661}56625663.peach-sort-btn {5664  padding: 2px 9px;5665  border-radius: 999px;5666  border: 1px solid transparent;5667  background: transparent;5668  color: var(--peach-t2);5669  font-family: "IBM Plex Mono", monospace;5670  font-size: 0.5625rem;5671  letter-spacing: 0.07em;5672  text-transform: uppercase;5673  cursor: pointer;5674  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5675  white-space: nowrap;5676}56775678.peach-sort-btn:hover {5679  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5680  color: var(--peach-t1);5681}56825683.peach-sort-btn.is-active {5684  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5685  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5686  color: var(--peach-t0);5687}56885689.peach-sort-scope-btn {5690  padding-inline: 8px;5691  font-size: 0.53125rem;5692  letter-spacing: 0.05em;5693}56945695.peach-sort-domain-hint {5696  margin-left: auto;5697  font-family: "IBM Plex Mono", monospace;5698  font-size: 0.5625rem;5699  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5700  white-space: nowrap;5701  overflow: hidden;5702  text-overflow: ellipsis;5703  max-width: 110px;5704}57055706/* Tab-match badge on entry rows */5707.peach-tab-match-badge {5708  display: inline-block;5709  width: 6px;5710  height: 6px;5711  border-radius: 50%;5712  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5713  margin-left: 5px;5714  vertical-align: middle;5715  flex-shrink: 0;5716  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5717}57185719.peach-entry-row.is-tab-match {5720  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5721  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5722}57235724.peach-entry-row.is-tab-match:hover {5725  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5726}57275728/* Entry list stagger entrance */5729@keyframes peach-entry-fadein {5730  from { opacity: 0; transform: translateY(4px); }5731  to   { opacity: 1; transform: translateY(0); }5732}57335734.peach-vault-list .peach-entry-row {5735  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5736}57375738/* Button press micro-interaction */5739.peach-btn:active {5740  transform: scale(0.95);5741  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5742}57435744.peach-sort-btn:active,5745.peach-tag-filter-chip:active {5746  transform: scale(0.93);5747  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5748}57495750/* Password strength bar (Lock view + shared) */5751.peach-password-strength {5752  display: flex;5753  align-items: center;5754  gap: 8px;5755  margin-top: 6px;5756}57575758.peach-strength-bar {5759  flex: 1;5760  height: 3px;5761  border-radius: 2px;5762  background: var(--peach-t3);5763  overflow: hidden;5764}57655766.peach-strength-fill {5767  height: 100%;5768  border-radius: 2px;5769  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5770              background 300ms ease;5771}57725773.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5774.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5775.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5776.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }57775778.peach-strength-label {5779  font-family: "IBM Plex Mono", monospace;5780  font-style: italic;5781  font-size: 0.5625rem;5782  font-weight: 300;5783  letter-spacing: 0.06em;5784  color: var(--peach-t2);5785  min-width: 36px;5786  text-align: right;5787}57885789.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5790.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5791.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5792.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }57935794/* Duress form */5795.peach-duress-status {5796  padding: 2px 8px;5797  border-radius: 999px;5798  border: 1px solid var(--peach-t3);5799  font-family: "IBM Plex Mono", monospace;5800  font-size: 0.5625rem;5801  letter-spacing: 0.07em;5802  text-transform: uppercase;5803  color: var(--peach-t2);5804  flex-shrink: 0;5805}58065807.peach-duress-status.is-active {5808  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5809  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5810  color: var(--peach-t0);5811}58125813.peach-duress-form {5814  padding: 8px 0 4px;5815  display: flex;5816  flex-direction: column;5817  gap: 6px;5818}58195820.peach-duress-form .peach-label {5821  margin-top: 4px;5822}58235824.peach-duress-actions {5825  display: flex;5826  gap: 6px;5827  align-items: center;5828  margin-top: 4px;5829}58305831.peach-duress-actions .peach-btn:first-child {5832  margin-right: auto;5833}58345835/* Improved overlay spring entrance */5836.peach-overlay-view.ov-enter-up {5837  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5838}58395840@keyframes ov-enter-up-spring {5841  from { opacity: 0; transform: translateY(16px) scale(0.98); }5842  to   { opacity: 1; transform: translateY(0) scale(1); }5843}58445845.peach-overlay-view.ov-enter-right {5846  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5847}58485849@keyframes ov-enter-right-spring {5850  from { opacity: 0; transform: translateX(18px) scale(0.98); }5851  to   { opacity: 1; transform: translateX(0) scale(1); }5852}58535854/* ── Onboarding-mode restore screens (file import) ── */5855/* Used when MainImportView renders during onboarding (no vault yet).5856   Animates like a lock-screen transition. */5857.peach-lock-view {5858  position: absolute;5859  inset: 0;5860  display: flex;5861  flex-direction: column;5862  background:5863    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5864    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5865    var(--peach-bg);5866  z-index: 2;5867  overflow: hidden;5868  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5869}58705871.peach-lock-view-header {5872  display: flex;5873  align-items: center;5874  justify-content: space-between;5875  padding: 16px 18px 12px;5876  flex-shrink: 0;5877}58785879/* ───────── Settings: auto-lock select ───────── */5880.peach-settings-select {5881  font-family: "IBM Plex Mono", monospace;5882  font-size: 0.6875rem;5883  background: transparent;5884  border: 1px solid var(--peach-t3);5885  border-radius: 4px;5886  color: var(--peach-t1);5887  padding: 3px 6px;5888  cursor: pointer;5889  outline: none;5890}5891.peach-settings-select:focus {5892  border-color: var(--peach-accent);5893}58945895/* ───────── Duress status pill (new polished) ───────── */5896.peach-duress-status-pill {5897  font-family: "IBM Plex Mono", monospace;5898  font-size: 0.5625rem;5899  text-transform: uppercase;5900  letter-spacing: 0.12em;5901  padding: 2px 8px;5902  border-radius: 12px;5903  background: var(--peach-t3);5904  color: var(--peach-t2);5905  flex-shrink: 0;5906}5907.peach-duress-status-pill.is-active {5908  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5909  color: var(--peach-accent);5910}59115912/* ───────── Entry advanced disclosure (canary) ───────── */5913.peach-entry-advanced {5914  margin-top: 12px;5915  border-top: 1px solid var(--peach-t3);5916  padding-top: 10px;5917  position: relative;5918  z-index: 1;5919}5920.peach-entry-advanced-toggle {5921  display: flex;5922  align-items: center;5923  justify-content: space-between;5924  width: 100%;5925  background: transparent;5926  border: none;5927  cursor: pointer;5928  padding: 0;5929  color: var(--peach-t2);5930}5931.peach-canary-section {5932  margin-top: 10px;5933  display: grid;5934  gap: 6px;5935}59365937/* ───────── Import: merge/replace radio choices ───────── */5938.peach-import-choice {5939  display: flex;5940  align-items: flex-start;5941  gap: 10px;5942  padding: 8px 10px;5943  border: 1px solid var(--peach-t3);5944  border-radius: 10px;5945  cursor: pointer;5946  margin-bottom: 6px;5947  transition: border-color 120ms ease, background 120ms ease;5948}5949.peach-import-choice:hover {5950  border-color: var(--peach-accent);5951}5952.peach-import-choice input[type="radio"] {5953  margin-top: 3px;5954  accent-color: var(--peach-accent);5955  flex-shrink: 0;5956}5957.peach-import-choice-main {5958  display: flex;5959  flex-direction: column;5960  gap: 2px;5961  min-width: 0;5962}5963.peach-import-choice-label {5964  font-size: 0.75rem;5965  color: var(--peach-t0);5966}5967.peach-import-choice-sub {5968  font-size: 0.6875rem;5969  color: var(--peach-t2);5970  line-height: 1.5;5971}59725973/* ───────── Export: success confirmation strip ───────── */5974.peach-export-success {5975  display: flex;5976  align-items: flex-start;5977  gap: 10px;5978  padding: 12px;5979  border-radius: 12px;5980  border: 1px solid rgba(150, 175, 110, 0.3);5981  background: rgba(150, 175, 110, 0.08);5982  color: var(--peach-t0);5983  font-size: 0.75rem;5984  line-height: 1.55;5985}5986.peach-export-success-check {5987  color: rgba(150, 175, 110, 0.9);5988  font-size: 0.875rem;5989  flex-shrink: 0;5990}59915992/* ── Trash view ──────────────────────────────────────────────────────── */5993.peach-trash-entry-row {5994  display: flex;5995  align-items: center;5996  justify-content: space-between;5997  gap: 8px;5998  padding: 8px 0;5999  border-bottom: 1px solid var(--peach-border);6000}6001.peach-trash-entry-info {6002  flex: 1;6003  min-width: 0;6004  display: flex;6005  flex-direction: column;6006  gap: 2px;6007}6008.peach-trash-entry-title {6009  font-size: 0.8125rem;6010  color: var(--peach-t0);6011  overflow: hidden;6012  text-overflow: ellipsis;6013  white-space: nowrap;6014}6015.peach-trash-entry-meta {6016  font-family: var(--font-mono);6017  font-size: 0.5625rem;6018  color: var(--peach-t2);6019  letter-spacing: 0.04em;6020}6021.peach-trash-entry-actions {6022  display: flex;6023  align-items: center;6024  gap: 4px;6025  flex-shrink: 0;6026}6027.peach-trash-delete-btn {6028  background: transparent;6029  border: 0;6030  color: var(--peach-t3);6031  font-size: 1rem;6032  line-height: 1;6033  cursor: pointer;6034  padding: 2px 5px;6035  transition: color 0.15s;6036}6037.peach-trash-delete-btn:hover { color: var(--peach-breach); }6038.peach-trash-list {6039  overflow-y: auto;6040}6041.peach-trash-footer {6042  display: flex;6043  align-items: center;6044  gap: 8px;6045  padding: 8px 0 0;6046  border-top: 1px solid var(--peach-border);6047  margin-top: 4px;6048}6049.peach-trash-purge-all {6050  background: transparent;6051  border: 0;6052  color: var(--peach-t3);6053  font-size: 0.625rem;6054  cursor: pointer;6055  padding: 4px 0;6056  letter-spacing: 0.03em;6057  transition: color 0.2s;6058}6059.peach-trash-purge-all:hover { color: var(--peach-breach); }6060.peach-trash-purge-confirm-label {6061  font-size: 0.625rem;6062  color: var(--peach-t1);6063  flex: 1;6064}60656066/* ── Settings shortcuts grid ─────────────────────────────────────────── */6067.peach-shortcuts-grid {6068  display: grid;6069  grid-template-columns: auto 1fr;6070  gap: 6px 12px;6071  align-items: center;6072  padding: 4px 0;6073}6074.peach-shortcut-key {6075  font-family: var(--font-mono);6076  font-size: 0.625rem;6077  color: var(--peach-t0);6078  background: var(--peach-t3);6079  border-radius: 4px;6080  padding: 2px 6px;6081  white-space: nowrap;6082  text-align: center;6083}6084.peach-shortcut-desc {6085  font-size: 0.6875rem;6086  color: var(--peach-t1);6087}60886089/* ── Sort bar trash button ───────────────────────────────────────────── */6090.peach-sort-trash-btn {6091  display: flex;6092  align-items: center;6093  justify-content: center;6094  padding: 3px 5px;6095  background: transparent;6096  border: none;6097  cursor: pointer;6098  color: var(--peach-t2);6099  border-radius: 4px;6100  transition: color 140ms ease, background 140ms ease;6101}6102.peach-sort-trash-btn:hover {6103  color: var(--peach-t1);6104  background: var(--peach-t3);6105}6106.peach-sort-trash-btn.is-active {6107  color: var(--peach-accent);6108}61096110/* Accent color picker */6111.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }6112.peach-accent-picker {6113  display: flex;6114  flex-wrap: wrap;6115  gap: 7px;6116  padding: 2px 0;6117}6118.peach-accent-swatch {6119  width: 22px;6120  height: 22px;6121  border-radius: 50%;6122  border: 2px solid transparent;6123  cursor: pointer;6124  padding: 0;6125  transition: transform 100ms;6126  outline-offset: 2px;6127}6128.peach-accent-swatch:hover { transform: scale(1.15); }6129.peach-accent-swatch.is-active {6130  border-color: var(--peach-t0);6131  transform: scale(1.1);6132}61336134.peach-pill-group {6135  display: flex;6136  gap: 6px;6137}6138.peach-pill-group .peach-btn.is-active {6139  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);6140  border-color: var(--peach-accent);6141  color: var(--peach-t0);6142}61436144/* ── Card entry styles ───────────────────────────────────────── */6145.peach-card-number {6146  font-family: var(--peach-mono);6147  letter-spacing: 0.08em;6148}61496150.peach-card-network-badge {6151  font-size: 0.625rem;6152  padding: 1px 5px;6153  border-radius: 4px;6154  border: 0.5px solid var(--peach-border);6155  color: var(--peach-text-dim);6156  margin-left: 6px;6157  vertical-align: middle;6158}61596160.peach-card-expiry-row {6161  display: flex;6162  align-items: center;6163  gap: 8px;6164}61656166.peach-card-expiry-sep {6167  color: var(--peach-text-dim);6168}61696170/* ── Pro tier — upgrade screen ──────────────────────────────── */6171.peach-pro-mark {6172  font-size: 0.5625rem;6173  color: var(--peach-accent);6174  margin-left: 6px;6175  vertical-align: super;6176  opacity: 0.7;6177}61786179.peach-pro-mini-badge {6180  display: block;6181  font-size: 0.625rem;6182  font-style: italic;6183  color: var(--peach-accent);6184  letter-spacing: 0.04em;6185  margin-top: -2px;6186  padding-left: 2px;6187  opacity: 0.85;6188  text-align: center;6189}61906191.peach-wordmark-stack {6192  display: inline-flex;6193  flex-direction: column;6194  align-items: center;6195}61966197/* ── Pro tier — upgrade page ─────────────────────────────────── */6198/* ── Pro upgrade — redesigned editorial layout ─────────────────── */61996200.peach-pro-upgrade {6201  display: flex;6202  flex-direction: column;6203  align-items: stretch;6204  gap: 10px;6205  padding: 2px 2px 12px;6206}62076208.peach-pro-eyebrow {6209  margin: 0;6210  font-family: var(--font-ui);6211  font-size: 0.625rem;6212  font-weight: 500;6213  letter-spacing: 0.12em;6214  color: var(--peach-accent);6215}62166217.peach-pro-headline {6218  margin: 0;6219  font-family: var(--font-display, "Cormorant Garamond", serif);6220  font-size: 30px;6221  font-weight: 700;6222  font-style: normal;6223  line-height: 1.05;6224  color: var(--peach-t0);6225  letter-spacing: -0.01em;6226}6227.peach-pro-headline em {6228  font-style: italic;6229  font-weight: 400;6230  color: var(--peach-accent);6231}62326233.peach-pro-subtitle {6234  margin: 0;6235  font-size: 0.6875rem;6236  line-height: 1.5;6237  color: var(--peach-t1);6238}62396240/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6241.peach-pro-section-label {6242  margin: 6px 0 0;6243  font-family: var(--font-ui);6244  font-size: 0.5625rem;6245  font-weight: 500;6246  letter-spacing: 0.12em;6247  text-transform: uppercase;6248  color: var(--peach-t2);6249}62506251/* 2-column numbered feature grid */6252.peach-pro-grid {6253  display: grid;6254  grid-template-columns: 1fr 1fr;6255  border-top: 1px solid var(--peach-border);6256  border-left: 1px solid var(--peach-border);6257}62586259.peach-pro-grid-item {6260  display: flex;6261  flex-direction: column;6262  gap: 2px;6263  padding: 8px 9px;6264  border-right: 1px solid var(--peach-border);6265  border-bottom: 1px solid var(--peach-border);6266}62676268.peach-pro-grid-item--wide {6269  grid-column: 1 / -1;6270}62716272.peach-pro-grid-num {6273  font-family: var(--font-mono);6274  font-size: 0.5625rem;6275  color: var(--peach-accent);6276  letter-spacing: 0.06em;6277  opacity: 0.85;6278}62796280.peach-pro-grid-name {6281  font-size: 0.8125rem;6282  font-weight: 500;6283  color: var(--peach-t0);6284  line-height: 1.2;6285}62866287.peach-pro-grid-desc {6288  font-size: 0.625rem;6289  color: var(--peach-t1);6290  line-height: 1.4;6291}62926293.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6294  animation: peach-pulse-accent 600ms ease-out forwards;6295}62966297@keyframes peach-pulse-accent {6298  0%   { opacity: 1; transform: scale(1.2); }6299  100% { opacity: 0.85; transform: scale(1); }6300}63016302/* Actions */6303.peach-pro-upgrade-actions {6304  display: flex;6305  flex-direction: column;6306  align-items: stretch;6307  gap: 10px;6308}63096310.peach-pro-pricing {6311  margin: 0;6312  font-size: 1rem;6313  font-weight: 600;6314  color: var(--peach-t0);6315  letter-spacing: 0.01em;6316}6317.peach-pro-pricing-sub {6318  font-size: 0.75rem;6319  font-weight: 400;6320  color: var(--peach-t1);6321  letter-spacing: 0.02em;6322}63236324.peach-pro-upgrade-cta {6325  display: flex;6326  align-items: center;6327  justify-content: center;6328  text-decoration: none;6329  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6330  border: 1px solid var(--peach-accent);6331  border-radius: 10px;6332  color: var(--peach-accent);6333  font-family: var(--font-ui);6334  font-size: 0.8125rem;6335  font-weight: 600;6336  letter-spacing: 0.06em;6337  padding: 11px 16px;6338  transition: background 0.15s ease, color 0.15s ease;6339}6340.peach-pro-upgrade-cta:hover {6341  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6342}63436344/* Pairing's terminal entitlement fallback reuses the Peach Pro card's6345   editorial hierarchy without embedding the settings deck itself. */6346.peach-pair-pro-required {6347  width: 100%;6348  display: flex;6349  flex-direction: column;6350  align-items: stretch;6351  gap: 10px;6352  text-align: left;6353}6354.peach-pair-pro-required .peach-pro-headline {6355  font-size: 1.75rem;6356}6357.peach-pair-pro-required .peach-pro-subtitle {6358  font-size: 0.6875rem;6359}6360.peach-pair-pro-grid {6361  grid-template-columns: 1fr;6362}6363.peach-pair-pro-button {6364  width: 100%;6365  cursor: pointer;6366}6367.peach-desktop-error--pro {6368  width: min(100%, 320px);6369  overflow-y: auto;6370}63716372.peach-pro-key-divider {6373  display: flex;6374  align-items: center;6375  gap: 8px;6376  color: var(--peach-t2);6377  font-size: 0.5625rem;6378  letter-spacing: 0.1em;6379}6380.peach-pro-key-divider::before,6381.peach-pro-key-divider::after {6382  content: "";6383  flex: 1;6384  height: 1px;6385  background: var(--peach-border);6386}63876388/* Inline key entry row */6389.peach-pro-key-inline {6390  display: flex;6391  align-items: center;6392  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6393  border: 1px solid var(--peach-border);6394  border-radius: 8px;6395  overflow: hidden;6396}6397.peach-pro-key-inline-input {6398  flex: 1;6399  background: transparent;6400  border: none;6401  outline: none;6402  color: var(--peach-t1);6403  font-family: var(--font-mono);6404  font-size: 0.625rem;6405  letter-spacing: 0.06em;6406  padding: 9px 10px;6407}6408.peach-pro-key-inline-input::placeholder {6409  color: var(--peach-t2);6410}6411.peach-pro-key-apply {6412  background: transparent;6413  border: none;6414  border-left: 1px solid var(--peach-border);6415  color: var(--peach-t2);6416  font-family: var(--font-ui);6417  font-size: 0.5625rem;6418  font-weight: 600;6419  letter-spacing: 0.08em;6420  padding: 9px 10px;6421  cursor: pointer;6422  transition: color 0.15s ease;6423  flex-shrink: 0;6424}6425.peach-pro-key-apply:not(:disabled):hover {6426  color: var(--peach-accent);6427}6428.peach-pro-key-apply:disabled {6429  opacity: 0.35;6430  cursor: not-allowed;6431}64326433/* ── Pro tier — key ceremony ─────────────────────────────────── */6434.peach-pro-key-ceremony {6435  display: flex;6436  flex-direction: column;6437  align-items: center;6438  gap: 12px;6439  padding: 20px 4px 16px;6440}64416442.peach-pro-key-ceremony .peach-lock-rune-string {6443  font-size: 1rem;6444  gap: 12px;6445  flex: 0;6446  justify-content: center;6447}64486449.peach-pro-key-ceremony-label {6450  margin: 0;6451  font-size: 0.6875rem;6452  color: var(--peach-t2);6453  font-style: italic;6454  letter-spacing: 0.04em;6455}64566457.peach-pro-key-input {6458  font-family: var(--font-mono, monospace);6459  letter-spacing: 0.06em;6460  text-align: center;6461  width: 100%;6462  box-sizing: border-box;6463}64646465.peach-pro-key-error {6466  margin: 0;6467  font-size: 0.75rem;6468  text-align: center;6469  color: var(--peach-breach, #e55);6470  padding: 0;6471}64726473.peach-pro-key-activate {6474  width: 100%;6475  text-align: center;6476  box-sizing: border-box;6477  padding: 10px 20px;6478  font-size: 0.8125rem;6479}64806481.peach-pro-key-cancel {6482  background: transparent;6483  border: 0;6484  color: var(--peach-t2);6485  font-size: 0.6875rem;6486  cursor: pointer;6487  padding: 2px 8px;6488  transition: color 0.2s;6489}64906491.peach-pro-key-cancel:hover { color: var(--peach-accent); }64926493/* ── Pro tier — active state ─────────────────────────────────── */6494.peach-pro-active {6495  display: flex;6496  flex-direction: column;6497  align-items: center;6498  gap: 0;6499  padding: 8px 4px 16px;6500  min-height: 280px;6501}65026503.peach-pro-active-hero {6504  display: flex;6505  flex-direction: column;6506  align-items: center;6507  gap: 6px;6508  padding: 20px 0 8px;6509}65106511.peach-pro-active-mark-wrap {6512  display: flex;6513  align-items: center;6514  justify-content: center;6515  margin-bottom: 4px;6516}65176518.peach-pro-active-mark {6519  width: 60px;6520  height: 60px;6521}65226523.peach-pro-active-title {6524  font-family: var(--font-display, var(--font-ui));6525  font-size: 26px;6526  margin: 0;6527  color: var(--peach-t0);6528  letter-spacing: 0.01em;6529}65306531.peach-pro-active-since {6532  margin: 0;6533  font-size: 0.6875rem;6534  color: var(--peach-t2);6535  font-style: italic;6536}65376538.peach-pro-active-features {6539  display: flex;6540  flex-direction: column;6541  gap: 8px;6542  width: 100%;6543  padding: 14px 8px 0;6544  border-top: 1px solid var(--peach-border);6545  flex: 1;6546}65476548.peach-pro-active-feature {6549  display: flex;6550  align-items: center;6551  gap: 9px;6552}65536554.peach-pro-active-feature-mark {6555  color: var(--peach-accent);6556  font-size: 0.625rem;6557  opacity: 0.65;6558  flex-shrink: 0;6559}65606561.peach-pro-active-feature-name {6562  font-size: 0.75rem;6563  color: var(--peach-t1);6564}65656566.peach-pro-deactivate {6567  align-self: center;6568  background: transparent;6569  border: 0;6570  color: var(--peach-t3);6571  font-size: 0.625rem;6572  cursor: pointer;6573  padding: 8px 0 0;6574  margin-top: 16px;6575  letter-spacing: 0.03em;6576  transition: color 0.2s;6577}65786579.peach-pro-deactivate:hover { color: var(--peach-t2); }65806581.peach-pro-deactivate:disabled {6582  opacity: 0.5;6583  cursor: default;6584}65856586/* ── Pro card activation sparkles & thank-you ── */6587button.peach-pro-active-mark-wrap {6588  background: transparent;6589  border: 0;6590  padding: 0;6591  cursor: pointer;6592  position: relative;6593  overflow: visible;6594}65956596.peach-pro-sparks {6597  position: absolute;6598  inset: 0;6599  pointer-events: none;6600  overflow: visible;6601}66026603.peach-pro-spark {6604  position: absolute;6605  top: 50%;6606  left: 50%;6607  font-size: 9px;6608  line-height: 1;6609  opacity: 0;6610  transform: translate(-50%, -50%);6611  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;6612}66136614@keyframes peach-pro-spark-fly {6615  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }6616  25%  { opacity: 1; }6617  100% {6618    opacity: 0;6619    transform: translate(6620      calc(-50% + var(--spark-x, 0px)),6621      calc(-50% + var(--spark-y, -40px))6622    ) scale(0.8);6623  }6624}66256626.peach-pro-thankyou-text {6627  margin: 4px 0 0;6628  font-size: 0.6875rem;6629  font-style: italic;6630  color: currentColor;6631  opacity: 0;6632  animation: peach-pro-thankyou-flash 2.5s ease both;6633}66346635@keyframes peach-pro-thankyou-flash {6636  0%   { opacity: 0; transform: translateY(4px); }6637  15%  { opacity: 0.75; transform: translateY(0); }6638  75%  { opacity: 0.75; }6639  100% { opacity: 0; }6640}66416642/* ── Pro advanced health remediation queue ──────────────────── */6643.peach-health-pro-queue {6644  display: flex;6645  flex-direction: column;6646  gap: 10px;6647  padding: 12px;6648  margin: 0 0 12px;6649  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6650  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6651  border-radius: 10px;6652}66536654.peach-health-pro-queue-head {6655  display: flex;6656  justify-content: space-between;6657  align-items: baseline;6658}66596660.peach-health-pro-queue-title {6661  font-size: 0.75rem;6662  font-weight: 500;6663  letter-spacing: 0.04em;6664  text-transform: uppercase;6665  color: var(--peach-accent);6666}66676668.peach-health-pro-queue-score {6669  font-size: 0.6875rem;6670  color: var(--peach-t2);6671}66726673.peach-health-pro-row {6674  display: flex;6675  gap: 10px;6676  align-items: center;6677  padding: 8px 0;6678  border-top: 1px solid var(--peach-border);6679}66806681.peach-health-pro-row-info {6682  flex: 1;6683  display: flex;6684  flex-direction: column;6685  gap: 4px;6686  min-width: 0;6687}66886689.peach-health-pro-action {6690  flex: 0 0 auto;6691  padding: 4px 8px;6692  font-size: 0.5625rem;6693  letter-spacing: 0.08em;6694  text-transform: uppercase;6695}66966697.peach-health-pro-row-name {6698  font-size: 0.8125rem;6699  color: var(--peach-t0);6700  overflow: hidden;6701  text-overflow: ellipsis;6702  white-space: nowrap;6703}67046705.peach-health-pro-row-meta {6706  font-size: 0.6875rem;6707  color: var(--peach-t2);6708}67096710.peach-health-pro-bar {6711  height: 2px;6712  background: var(--peach-border);6713  border-radius: 2px;6714  overflow: hidden;6715  margin-top: 2px;6716}67176718.peach-health-pro-bar-fill {6719  height: 100%;6720  background: var(--peach-accent);6721  transition: width 200ms ease-out;6722}67236724/* ── Pro activation celebration ── */6725@keyframes peach-pro-bloom {6726  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6727  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6728                 drop-shadow(0 0 48px var(--peach-glow)); }6729  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6730}67316732@keyframes peach-pro-wordmark-in {6733  from { opacity: 0; transform: translateY(4px); }6734  to   { opacity: 1; transform: translateY(0); }6735}67366737@keyframes peach-pro-fade-out {6738  from { opacity: 1; }6739  to   { opacity: 0; }6740}67416742.peach-pro-celebration {6743  background:6744    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6745    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6746    var(--peach-bg);6747  border: 1px solid var(--peach-t3);6748  box-shadow:6749    0 2px 8px rgba(0,0,0,0.55),6750    0 14px 48px rgba(0,0,0,0.7),6751    0 0 0 1px rgba(240,232,216,0.04);6752  overflow: hidden;6753  width: 320px;6754  height: 520px;6755  display: flex;6756  flex-direction: column;6757  align-items: center;6758  justify-content: center;6759  gap: 8px;6760  padding: 32px 24px;6761  text-align: center;6762}67636764.peach-pro-celebration.is-leaving {6765  animation: peach-pro-fade-out 400ms ease forwards;6766}67676768.peach-pro-bloom-target {6769  display: flex;6770  align-items: center;6771  justify-content: center;6772  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6773  margin-bottom: 12px;6774}67756776.peach-pro-bloom-icon {6777  width: 48px;6778  height: 48px;6779}67806781.peach-pro-wordmark {6782  font-family: var(--font-display);6783  font-size: 22px;6784  font-style: italic;6785  font-weight: 400;6786  color: var(--peach-accent);6787  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6788}67896790.peach-pro-thankyou {6791  font-size: 0.75rem;6792  font-style: italic;6793  color: var(--peach-t2);6794  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6795}679667976798/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6799.peach-pro-notice-banner {6800  display: flex;6801  align-items: center;6802  gap: 8px;6803  padding: 7px 12px;6804  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6805  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6806  font-size: 0.6875rem;6807  color: var(--peach-t2);6808  font-family: "IBM Plex Mono", monospace;6809  flex-shrink: 0;6810}68116812.peach-pro-notice-link {6813  background: none;6814  border: none;6815  padding: 0;6816  cursor: pointer;6817  font-size: 0.6875rem;6818  color: var(--peach-accent);6819  font-family: "IBM Plex Mono", monospace;6820  margin-left: auto;6821  white-space: nowrap;6822}68236824.peach-pro-notice-close {6825  background: none;6826  border: none;6827  padding: 0 0 0 4px;6828  cursor: pointer;6829  font-size: 0.625rem;6830  color: var(--peach-t3);6831  line-height: 1;6832}68336834/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6835   Renders over whatever view is showing. 60-second expiry; the popup ticks6836   the countdown each second and clears the banner when it hits zero. */6837.peach-pair-request-banner {6838  display: flex;6839  flex-direction: column;6840  gap: 8px;6841  padding: 10px 12px;6842  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6843  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6844  font-family: "IBM Plex Mono", monospace;6845  flex-shrink: 0;6846}68476848.peach-pair-toast {6849  padding: 8px 12px;6850  font-family: "IBM Plex Mono", monospace;6851  font-size: 0.75rem;6852  color: var(--peach-t1);6853  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6854  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6855  flex-shrink: 0;6856  text-align: center;6857}68586859.peach-pair-toast strong {6860  color: var(--peach-t0);6861  font-weight: 500;6862}68636864.peach-pair-request-header {6865  display: flex;6866  align-items: center;6867  gap: 8px;6868  font-size: 0.75rem;6869  color: var(--peach-t1);6870}68716872.peach-pair-request-mark {6873  font-size: 0.875rem;6874  display: inline-flex;6875  align-items: center;6876}68776878.peach-pair-request-icon {6879  width: 1em;6880  height: 1em;6881}68826883.peach-pair-request-title {6884  font-weight: 600;6885  color: var(--peach-t0);6886}68876888.peach-pair-request-countdown {6889  margin-left: auto;6890  font-variant-numeric: tabular-nums;6891  color: var(--peach-t2);6892  font-size: 0.6875rem;6893}68946895.peach-pair-request-body {6896  margin: 0;6897  font-size: 0.75rem;6898  color: var(--peach-t1);6899  line-height: 1.4;6900}69016902.peach-pair-request-body strong {6903  color: var(--peach-t0);6904  font-weight: 600;6905}69066907.peach-pair-request-actions {6908  display: flex;6909  gap: 8px;6910  justify-content: flex-end;6911}69126913/* ─── First-run onboarding ──────────────────────────────────────────────6914   Three-card welcome shown once before vault creation. The PeachScript6915   rune background drifts behind everything at very low opacity — it's6916   atmosphere, not focus. The cards themselves use the same panel6917   language as the rest of the popup so the transition into NewVault is6918   continuous, not a jarring switch of visual register. */69196920.peach-onboarding {6921  position: relative;6922  display: flex;6923  flex-direction: column;6924  width: 100%;6925  height: 100%;6926  padding: 16px 16px 18px;6927  box-sizing: border-box;6928  overflow: hidden;6929  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6930}69316932.peach-onboarding.is-completing {6933  animation: peach-onboard-exit 200ms ease-out forwards;6934}69356936.peach-rune-background {6937  position: absolute;6938  inset: 0;6939  width: 100%;6940  height: 100%;6941  pointer-events: none;6942  z-index: 0;6943  transition: opacity 500ms ease-out;6944}69456946.peach-onboarding.is-completing .peach-rune-background {6947  opacity: 0;6948}69496950.peach-onboarding-header {6951  position: relative;6952  z-index: 1;6953  display: flex;6954  align-items: center;6955  margin-bottom: 14px;6956}69576958.peach-onboarding-card {6959  position: relative;6960  z-index: 1;6961  flex: 1;6962  display: flex;6963  flex-direction: column;6964  gap: 10px;6965  padding: 22px 20px;6966  border-radius: 16px;6967  border: 1px solid var(--peach-t3);6968  background:6969    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6970  backdrop-filter: blur(3px);6971  -webkit-backdrop-filter: blur(3px);6972  box-shadow:6973    inset 0 1px 0 rgba(240, 232, 216, 0.04),6974    0 12px 28px rgba(0, 0, 0, 0.12);6975  cursor: pointer;6976  user-select: none;6977  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6978}69796980.peach-onboarding-card.is-exiting {6981  animation: peach-card-out 120ms ease-in forwards;6982  pointer-events: none;6983}69846985.peach-onboarding-card-headline {6986  margin: 0;6987  font-family: var(--font-display);6988  font-style: italic;6989  font-weight: 400;6990  font-size: 22px;6991  line-height: 1.05;6992  color: var(--peach-t0);6993  white-space: pre-line;6994}69956996.peach-onboarding-divider {6997  margin: 4px 0 6px;6998  border: 0;6999  border-top: 1px solid var(--peach-t3);7000  width: 100%;7001}70027003.peach-onboarding-body {7004  margin: 0;7005  font-size: 0.8125rem;7006  line-height: 1.6;7007  color: var(--peach-t1);7008}70097010.peach-onboarding-warning {7011  display: flex;7012  align-items: flex-start;7013  gap: 8px;7014  margin: 6px 0 0;7015  padding-top: 8px;7016  border-top: 1px dashed var(--peach-t3);7017  font-size: 0.8125rem;7018  line-height: 1.5;7019  color: var(--peach-t1);7020}70217022.peach-onboarding-warning-icon {7023  color: var(--peach-accent);7024  font-size: 0.8125rem;7025  line-height: 1.5;7026  flex: 0 0 auto;7027}70287029.peach-onboarding-nav {7030  position: relative;7031  z-index: 1;7032  display: flex;7033  align-items: center;7034  justify-content: space-between;7035  margin-top: 12px;7036  padding: 0 4px;7037}70387039.peach-onboarding-dots {7040  display: flex;7041  align-items: center;7042  gap: 6px;7043}70447045.peach-onboarding-dot {7046  width: 6px;7047  height: 6px;7048  border-radius: 50%;7049  background: var(--peach-t2);7050  transition: width 200ms ease, height 200ms ease, background 200ms ease;7051}70527053.peach-onboarding-dot.is-active {7054  width: 8px;7055  height: 8px;7056  background: var(--peach-accent);7057}70587059.peach-onboarding-next {7060  background: none;7061  border: none;7062  padding: 4px 0;7063  cursor: pointer;7064  font-family: "IBM Plex Mono", monospace;7065  font-size: 0.6875rem;7066  letter-spacing: 0.04em;7067  color: var(--peach-t1);7068  transition: color 150ms ease;7069}70707071.peach-onboarding-next:hover {7072  color: var(--peach-t0);7073}70747075.peach-onboarding-next:disabled {7076  opacity: 0.5;7077  cursor: default;7078}70797080.peach-onboarding-back {7081  background: none;7082  border: none;7083  padding: 4px 0;7084  cursor: pointer;7085  font-family: "IBM Plex Mono", monospace;7086  font-size: 0.6875rem;7087  letter-spacing: 0.04em;7088  color: var(--peach-t2);7089  transition: color 150ms ease;7090}70917092.peach-onboarding-back:hover {7093  color: var(--peach-t0);7094}70957096.peach-onboarding-back:disabled {7097  opacity: 0.5;7098  cursor: default;7099}71007101/* Reserve back-button width on the first card so the dots stay centred */7102.peach-onboarding-back-spacer {7103  width: 44px;7104}71057106.peach-onboarding-choice-row {7107  display: grid;7108  grid-template-columns: 1fr;7109  gap: 8px;7110}71117112.peach-onboarding-choice-heading {7113  margin: 8px 0 -2px;7114  color: var(--peach-t1);7115  font-family: "IBM Plex Mono", monospace;7116  font-size: 0.6875rem;7117  letter-spacing: 0.04em;7118  text-transform: uppercase;7119}71207121.peach-onboarding-choice {7122  min-height: 48px;7123  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);7124  border-radius: 8px;7125  padding: 8px 10px;7126  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);7127  color: var(--peach-t0);7128  font-size: 0.76rem;7129  font-weight: 700;7130  text-align: left;7131}71327133.peach-onboarding-choice-label,7134.peach-onboarding-choice-detail {7135  display: block;7136}71377138.peach-onboarding-choice-detail {7139  margin-top: 2px;7140  color: var(--peach-t1);7141  font-size: 0.625rem;7142  font-weight: 400;7143  line-height: 1.35;7144}71457146.peach-onboarding-choice--adopt {7147  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);7148  background: color-mix(in srgb, var(--peach-accent) 13%, transparent);7149}71507151.peach-adopt-vault {7152  position: relative;7153  min-height: 100%;7154  padding: 22px;7155  display: grid;7156  place-items: center;7157}71587159.peach-adopt-vault--pair {7160  padding: 10px;7161  overflow-y: auto;7162  scrollbar-width: none;7163}71647165.peach-adopt-vault--pair::-webkit-scrollbar {7166  display: none;7167}71687169.peach-adopt-card {7170  position: relative;7171  z-index: 1;7172  width: min(100%, 330px);7173  padding: 20px;7174  border-radius: 8px;7175  border: 1px solid color-mix(in srgb, var(--peach-t0) 13%, transparent);7176  background: color-mix(in srgb, var(--peach-surface) 90%, transparent);7177  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);7178}71797180.peach-adopt-card--pair {7181  width: 100%;7182  max-height: 500px;7183  margin: auto;7184  padding: 14px 16px 12px;7185  overflow-y: auto;7186  scrollbar-width: none;7187  border: 0;7188  border-radius: 16px;7189  background:7190    radial-gradient(7191      circle at 50% -10%,7192      color-mix(in srgb, var(--peach-accent) 14%, transparent),7193      transparent 38%7194    ),7195    color-mix(in srgb, var(--peach-surface) 94%, transparent);7196}71977198.peach-adopt-card--pair::-webkit-scrollbar {7199  display: none;7200}72017202.peach-adopt-card h1 {7203  margin: 0 0 10px;7204  font-size: 1.28rem;7205  line-height: 1.15;7206}72077208.peach-adopt-card p {7209  margin: 0 0 14px;7210  color: var(--peach-t1);7211  line-height: 1.35;7212}72137214.peach-adopt-card .peach-hint-relay {7215  margin: 12px 0 0;7216  font-size: 11px;7217  line-height: 1.4;7218  color: var(--peach-t2);7219  opacity: 0.85;7220}72217222.peach-adopt-input {7223  margin-bottom: 12px;7224}72257226.peach-adopt-card textarea.peach-adopt-input {7227  width: 100%;7228  resize: vertical;7229  overflow-wrap: anywhere;7230  font-family: "IBM Plex Mono", monospace;7231  font-size: 0.64rem;7232}72337234.peach-adopt-qr-video {7235  display: block;7236  width: 100%;7237  max-height: 220px;7238  margin: 0 0 12px;7239  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);7240  border-radius: 8px;7241  background: #000;7242  object-fit: cover;7243}72447245.peach-adoption-source-invitation {7246  display: flex;7247  flex-direction: column;7248  align-items: center;7249  gap: 10px;7250  padding: 4px 18px 16px;7251  text-align: center;7252}72537254.peach-pair-qr {7255  display: block;7256  margin-inline: auto;7257  max-width: min(224px, 100%);7258  height: auto;7259  padding: 8px;7260  border-radius: 10px;7261  background: #fff;7262}72637264.peach-adopt-card > .peach-btn + .peach-btn {7265  margin-top: 8px;7266}72677268.peach-adopt-actions {7269  display: flex;7270  gap: 10px;7271  margin-top: 14px;7272}72737274.peach-adopt-actions > button {7275  flex: 1;7276}72777278.peach-adopt-sas {7279  margin: 18px 0;7280  padding: 14px;7281  border-radius: 8px;7282  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);7283  color: var(--peach-t0);7284  font-size: 1.35rem;7285  font-weight: 800;7286  font-variant-numeric: tabular-nums;7287  text-align: center;7288}72897290.peach-adopt-pairing {7291  text-align: center;7292}72937294.peach-adopt-pairing h1 {7295  max-width: 260px;7296  margin: 0 auto 6px;7297  color: var(--peach-t0);7298  font-family: var(--font-display, Georgia, serif);7299  font-size: 1.42rem;7300  font-style: italic;7301  font-weight: 500;7302  line-height: 1.12;7303  text-wrap: balance;7304}73057306.peach-adopt-pairing .peach-adopt-pair-lede {7307  max-width: 258px;7308  margin: 0 auto;7309  color: color-mix(in srgb, var(--peach-t0) 82%, var(--peach-bg));7310  font-size: 0.73rem;7311  line-height: 1.42;7312  text-wrap: pretty;7313}73147315.peach-pair-stage.peach-adopt-bird-stage {7316  width: min(100%, 260px);7317  height: 102px;7318  margin: -6px auto 2px;7319}73207321.peach-adopt-bird-stage .peach-pair-bird-slot,7322.peach-adopt-bird-stage .peach-pair-bird {7323  width: 90px;7324  height: 90px;7325}73267327.peach-adopt-bird-stage .peach-pair-bird-slot-desktop {7328  left: 12px;7329}73307331.peach-adopt-bird-stage .peach-pair-bird-slot-mobile {7332  right: 12px;7333}73347335.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot-desktop {7336  --bb-x: 12px;7337  transform: translateX(12px);7338}73397340.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot-mobile {7341  --bb-x: -12px;7342  transform: translateX(-12px);7343}73447345.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot {7346  animation: peach-adopt-happy-bob 0.8s ease-in-out infinite;7347}73487349.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot-mobile {7350  animation-delay: 0.18s;7351  animation-direction: reverse;7352}73537354.peach-adopt-pairing.is-complete .peach-pair-stage.peach-adopt-bird-stage {7355  width: 100%;7356  height: 135px;7357  margin: -8px auto 6px;7358}73597360.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird-slot,7361.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird {7362  width: 112px;7363  height: 112px;7364}73657366.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird-slot-desktop {7367  left: 0;7368  --bb-x: 0;7369  transform: translateX(0);7370}73717372.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird-slot-mobile {7373  right: 0;7374  --bb-x: 0;7375  transform: translateX(0);7376}73777378.peach-adopt-pairing.is-complete h1 {7379  font-size: 1.6rem;7380}73817382.peach-adopt-pairing.is-complete .peach-adopt-pair-lede {7383  font-size: 0.78rem;7384}73857386@keyframes peach-adopt-happy-bob {7387  0%, 100% {7388    transform: translateX(var(--bb-x, 0)) translateY(0) rotate(0deg);7389  }7390  35% {7391    transform: translateX(var(--bb-x, 0)) translateY(-8px) rotate(-3deg);7392  }7393  70% {7394    transform: translateX(var(--bb-x, 0)) translateY(-3px) rotate(2deg);7395  }7396}73977398.peach-adopt-connection {7399  position: absolute;7400  left: 50%;7401  bottom: 38px;7402  width: 78px;7403  height: 1px;7404  translate: -50% 0;7405  background: color-mix(in srgb, var(--peach-accent) 62%, transparent);7406  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 56%, transparent);7407}74087409.peach-adopt-pairing.is-complete .peach-adopt-connection {7410  bottom: 49px;7411  width: 92px;7412}74137414.peach-adopt-connection::after {7415  content: "";7416  position: absolute;7417  left: 50%;7418  top: 50%;7419  width: 7px;7420  height: 7px;7421  border-radius: 50%;7422  translate: -50% -50%;7423  background: var(--peach-accent);7424  box-shadow:7425    0 0 0 4px color-mix(in srgb, var(--peach-accent) 17%, transparent),7426    0 0 14px color-mix(in srgb, var(--peach-accent) 74%, transparent);7427  animation: peach-adopt-connection-pulse 1.1s ease-in-out infinite;7428}74297430@keyframes peach-adopt-connection-pulse {7431  0%, 100% { scale: 0.8; opacity: 0.72; }7432  50% { scale: 1.14; opacity: 1; }7433}74347435.peach-adopt-qr-wrap {7436  min-height: 160px;7437  display: grid;7438  place-items: center;7439}74407441.peach-adopt-qr-wrap .peach-hint-error {7442  margin: 12px 0;7443}74447445.peach-adopt-pairing .peach-adopt-pair-status {7446  margin: 0;7447  color: var(--peach-t0);7448  font-size: 0.75rem;7449}74507451.peach-adopt-confirmation {7452  margin-top: 18px;7453  padding: 8px 0 4px;7454}74557456.peach-adopt-confirmation .peach-adopt-confirmation-label {7457  margin: 0 0 7px;7458  color: color-mix(in srgb, var(--peach-accent) 72%, var(--peach-t0));7459  font-family: var(--peach-mono, "IBM Plex Mono", monospace);7460  font-size: 0.625rem;7461  font-weight: 700;7462  letter-spacing: 0.14em;7463}74647465.peach-adopt-confirmation .peach-adoption-sas {7466  margin: 0 auto;7467  padding: 12px 14px;7468  border-color: color-mix(in srgb, var(--peach-accent) 36%, transparent);7469  background: color-mix(in srgb, var(--peach-accent) 13%, transparent);7470}74717472.peach-adopt-confirmation .peach-adoption-sas strong {7473  color: color-mix(in srgb, var(--peach-accent) 84%, var(--peach-t0));7474  font-size: 1.58rem;7475  text-shadow: 0 0 16px color-mix(in srgb, var(--peach-accent) 30%, transparent);7476}74777478.peach-adopt-confirmation .peach-adopt-confirmation-help {7479  max-width: 270px;7480  margin: 8px auto 0;7481  color: color-mix(in srgb, var(--peach-t0) 78%, var(--peach-bg));7482  font-size: 0.7rem;7483  line-height: 1.45;7484}74857486.peach-adopt-privacy {7487  display: flex;7488  align-items: flex-start;7489  gap: 9px;7490  margin-top: 10px;7491  padding: 8px 9px;7492  border: 1px solid color-mix(in srgb, var(--peach-t0) 13%, transparent);7493  border-radius: 10px;7494  background: color-mix(in srgb, var(--peach-t0) 6%, transparent);7495  text-align: left;7496}74977498.peach-adopt-privacy svg {7499  width: 16px;7500  height: 16px;7501  flex: 0 0 auto;7502  margin-top: 1px;7503  fill: none;7504  stroke: color-mix(in srgb, var(--peach-accent) 74%, var(--peach-t0));7505  stroke-linecap: round;7506  stroke-linejoin: round;7507  stroke-width: 1.7;7508}75097510.peach-adopt-pairing .peach-adopt-privacy p {7511  margin: 0;7512  color: color-mix(in srgb, var(--peach-t0) 76%, var(--peach-bg));7513  font-size: 0.62rem;7514  line-height: 1.4;7515}75167517.peach-adopt-privacy strong {7518  color: var(--peach-t0);7519  font-weight: 700;7520}75217522.peach-adopt-pair-actions {7523  margin-top: 9px;7524}75257526.peach-adopt-pair-actions > button {7527  width: 100%;7528}75297530.peach-adopt-paired-status {7531  display: inline-flex;7532  align-items: center;7533  gap: 8px;7534  margin: 22px auto 18px;7535  padding: 9px 13px;7536  border: 1px solid color-mix(in srgb, var(--peach-accent) 30%, transparent);7537  border-radius: 999px;7538  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);7539  color: color-mix(in srgb, var(--peach-accent) 78%, var(--peach-t0));7540  font-family: var(--peach-mono, "IBM Plex Mono", monospace);7541  font-size: 0.66rem;7542  font-weight: 700;7543  letter-spacing: 0.04em;7544}75457546.peach-adopt-paired-status span {7547  width: 7px;7548  height: 7px;7549  border-radius: 50%;7550  background: var(--peach-accent);7551  box-shadow: 0 0 8px color-mix(in srgb, var(--peach-accent) 68%, transparent);7552}75537554@media (prefers-reduced-motion: reduce) {7555  .peach-adopt-connection::after {7556    animation: none;7557  }7558}75597560.peach-onboarding-mobile-card-buttons {7561  display: flex;7562  flex-direction: column;7563  gap: 8px;7564  margin-top: 16px;7565}75667567@keyframes peach-onboard-enter {7568  from { opacity: 0; transform: translateY(20px); }7569  to   { opacity: 1; transform: translateY(0); }7570}75717572@keyframes peach-onboard-exit {7573  from { opacity: 1; }7574  to   { opacity: 0; }7575}75767577@keyframes peach-card-in {7578  from { opacity: 0; transform: translateX(12px); }7579  to   { opacity: 1; transform: translateX(0); }7580}75817582@keyframes peach-card-out {7583  from { opacity: 1; transform: translateX(0); }7584  to   { opacity: 0; transform: translateX(-12px); }7585}75867587/* ─── New vault screen — matched to onboarding card language ─────────── */75887589/* Two classes so this beats the shared .peach-screen.lock-screen--vault-stage7590   rule (same element) without loosening the unlock/restore screens. The7591   create-vault screen is the only vault-stage view tall enough to overflow7592   the 520px popup, so its spacing is tuned to fit header → card → restore →7593   recovery warning with nothing clipped. */7594.peach-screen.peach-newvault {7595  position: relative;7596  display: flex;7597  flex-direction: column;7598  gap: 12px;7599  padding: 14px 16px 12px;7600  overflow: hidden;7601}76027603/* Suppress the warm-blob ambient art inherited from .lock-screen — the7604   new vault card now carries the visual weight. */7605.peach-newvault::before {7606  content: none;7607}76087609.peach-newvault-header {7610  position: relative;7611  z-index: 2;7612  display: flex;7613  align-items: center;7614  gap: 10px;7615  margin-bottom: 2px;7616}76177618.peach-newvault-back {7619  display: inline-flex;7620  align-items: center;7621  gap: 4px;7622  background: transparent;7623  border: none;7624  color: var(--peach-t2);7625  font-family: "IBM Plex Mono", monospace;7626  font-size: 0.625rem;7627  letter-spacing: 0.06em;7628  cursor: pointer;7629  padding: 4px 6px;7630  border-radius: 6px;7631  transition: color 120ms ease, background 120ms ease;7632}76337634.peach-newvault-back:hover {7635  color: var(--peach-t0);7636  background: rgba(240, 232, 216, 0.04);7637}76387639.peach-newvault-mark {7640  position: absolute;7641  right: -12px;7642  top: 6px;7643  width: 110px;7644  height: 110px;7645  pointer-events: none;7646  opacity: 0.10;7647  filter: saturate(0.9);7648  z-index: 0;7649}7650.peach-newvault-mark-art {7651  width: 100%;7652  height: 100%;7653}7654.peach-newvault-mark-art path:nth-child(1) {7655  fill: rgba(123, 144, 96, 0.88);7656}7657.peach-newvault-mark-art path:nth-child(2) {7658  stroke: rgba(94, 122, 66, 0.95);7659}76607661.peach-newvault-card {7662  position: relative;7663  z-index: 1;7664  display: flex;7665  flex-direction: column;7666  gap: 8px;7667  padding: 16px 20px 14px;7668  border-radius: 16px;7669  border: 1px solid var(--peach-t3);7670  background:7671    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));7672  backdrop-filter: blur(3px);7673  -webkit-backdrop-filter: blur(3px);7674  box-shadow:7675    inset 0 1px 0 rgba(240, 232, 216, 0.04),7676    0 12px 28px rgba(0, 0, 0, 0.12);7677  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;7678}76797680.peach-newvault-headline {7681  margin: 0;7682  font-family: var(--font-display);7683  font-style: italic;7684  font-weight: 400;7685  font-size: 24px;7686  line-height: 1.05;7687  color: var(--peach-t0);7688  white-space: pre-line;7689}76907691.peach-newvault-divider {7692  margin: 2px 0 4px;7693  border: 0;7694  border-top: 1px solid var(--peach-t3);7695  width: 100%;7696}76977698.peach-newvault-field {7699  display: flex;7700  flex-direction: column;7701  gap: 4px;7702}77037704.peach-newvault-label-row {7705  display: flex;7706  align-items: center;7707  justify-content: space-between;7708}77097710/* Monospace input scaled to the card. Replaces the 22px unlock-input7711   so the placeholder no longer overflows and the field reads as part7712   of the same surface as the body copy. */7713.peach-newvault-input {7714  font-size: 0.875rem;7715  letter-spacing: 0.18em;7716  padding: 8px 0;7717}7718.peach-newvault-input::placeholder {7719  letter-spacing: 0.18em;7720  color: var(--peach-t2);7721}77227723.peach-newvault-hint {7724  margin: 2px 0 0;7725  font-family: "IBM Plex Mono", monospace;7726  font-size: 0.625rem;7727  color: var(--peach-t2);7728  letter-spacing: 0.04em;7729}77307731.peach-newvault-submit {7732  margin-top: 4px;7733}77347735.peach-newvault-warning {7736  display: flex;7737  align-items: flex-start;7738  gap: 8px;7739  margin: 2px 0 0;7740  padding-top: 8px;7741  border-top: 1px dashed var(--peach-t3);7742  font-size: 0.75rem;7743  line-height: 1.45;7744  color: var(--peach-t1);7745}77467747.peach-newvault-warning-icon {7748  color: var(--peach-accent);7749  font-size: 0.8125rem;7750  line-height: 1.4;7751  flex: 0 0 auto;7752}77537754/* Restore options sit inside the card, directly under "create vault", so7755   they are always reachable without scrolling. The top divider mirrors the7756   warning's so the choice reads as a deliberate fork, not a footnote. */7757.peach-newvault-restore {7758  position: relative;7759  z-index: 1;7760  display: flex;7761  flex-direction: column;7762  gap: 4px;7763  margin-top: 4px;7764  padding-top: 10px;7765  border-top: 1px dashed var(--peach-t3);7766}77677768/* Settings body — warm accent gradient gives the glass something to blur against */7769.peach-settings-body {7770  background:7771    radial-gradient(7772      ellipse at 30% 20%,7773      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7774      transparent 60%7775    );7776}77777778/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7779/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7780 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7781 * (replacing the vault from a backup file) and "hazard" for actions that7782 * are absolutely irreversible (Panic). Both use the same card scaffold so7783 * they read as a pair, but the colour family signals the severity at a7784 * glance — yellow for caution, red for don't.7785 */7786.peach-danger-card {7787  --danger-tint: 235, 158, 52; /* amber */7788  display: flex;7789  flex-direction: column;7790  gap: 8px;7791  padding: 14px;7792  margin-top: 10px;7793  border-radius: 12px;7794  border: 1px solid rgba(var(--danger-tint), 0.32);7795  background:7796    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7797    rgba(var(--danger-tint), 0.04);7798  box-shadow:7799    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7800    0 0 24px rgba(var(--danger-tint), 0.04);7801  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7802}78037804.peach-danger-card:hover {7805  border-color: rgba(var(--danger-tint), 0.55);7806  box-shadow:7807    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7808    0 0 36px rgba(var(--danger-tint), 0.10);7809}78107811.peach-danger-card--hazard {7812  --danger-tint: 220, 38, 38; /* red */7813}78147815.peach-danger-card-head {7816  display: flex;7817  align-items: center;7818  gap: 10px;7819}78207821.peach-danger-card-glyph {7822  width: 28px;7823  height: 28px;7824  flex-shrink: 0;7825  display: flex;7826  align-items: center;7827  justify-content: center;7828  border-radius: 8px;7829  background: rgba(var(--danger-tint), 0.12);7830  color: rgba(var(--danger-tint), 0.95);7831  font-size: 1rem;7832  line-height: 1;7833}78347835.peach-danger-card-title {7836  margin: 0;7837  font-size: 0.8125rem;7838  font-weight: 600;7839  color: rgba(var(--danger-tint), 0.92);7840  letter-spacing: 0.01em;7841}78427843.peach-danger-card-copy {7844  margin: 0;7845  font-size: 0.6875rem;7846  line-height: 1.5;7847  color: var(--peach-t2);7848}78497850.peach-danger-card-button {7851  width: 100%;7852  padding: 9px;7853  margin-top: 4px;7854  background: transparent;7855  border: 1px solid rgba(var(--danger-tint), 0.45);7856  border-radius: 8px;7857  color: rgba(var(--danger-tint), 0.9);7858  font-size: 0.75rem;7859  font-weight: 500;7860  letter-spacing: 0.02em;7861  cursor: pointer;7862  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7863}78647865.peach-danger-card-button:hover {7866  background: rgba(var(--danger-tint), 0.10);7867  border-color: rgba(var(--danger-tint), 0.75);7868  color: rgb(var(--danger-tint));7869}78707871.peach-adoption-sas {7872  margin: 16px auto 0;7873  padding: 12px 16px;7874  border: 1px solid color-mix(in srgb, var(--peach-t0) 18%, transparent);7875  border-radius: 10px;7876  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);7877  color: var(--peach-t0);7878  text-align: center;7879}78807881.peach-adoption-sas strong {7882  font-size: 1.65rem;7883  font-variant-numeric: tabular-nums;7884  letter-spacing: 0.18em;7885  white-space: nowrap;7886}78877888/* ── Panic flow (three-step destruction) ───────────────────────────────── */7889.peach-panic {7890  display: flex;7891  flex-direction: column;7892  flex: 1;7893  min-height: 0;7894  padding: 28px 20px 20px;7895  gap: 18px;7896  overflow-y: auto;7897  scrollbar-width: none;7898  -ms-overflow-style: none;7899}79007901.peach-panic::-webkit-scrollbar { display: none; }79027903.peach-panic-step2 {7904  background: rgba(220, 38, 38, 0.04);7905}79067907.peach-panic-step3 {7908  position: relative;7909  background: #0f0505;7910  color: #ffffff;7911  overflow: hidden;7912}79137914.peach-panic-rune-bg {7915  position: absolute;7916  inset: 0;7917  opacity: 0.22;7918  pointer-events: none;7919  overflow: hidden;7920}79217922.peach-panic-rune-bg canvas {7923  width: 100% !important;7924  height: 100% !important;7925}79267927.peach-panic-icon {7928  font-size: 32px;7929  color: rgb(220, 38, 38);7930  line-height: 1;7931}79327933.peach-panic-title {7934  margin: 0;7935  font-size: 18px;7936  font-weight: 500;7937  color: var(--peach-t1);7938}79397940.peach-panic-title--severe {7941  font-size: 20px;7942  font-weight: 700;7943  color: rgb(220, 38, 38);7944}79457946.peach-panic-body {7947  margin: 0;7948  font-size: 0.8125rem;7949  line-height: 1.55;7950  color: var(--peach-t2);7951}79527953.peach-panic-body--severe {7954  color: rgba(220, 38, 38, 0.85);7955}79567957.peach-panic-body--final {7958  font-size: 1rem;7959  font-weight: 700;7960  color: rgb(255, 80, 80);7961  line-height: 1.4;7962}79637964.peach-panic-body--final-intro {7965  font-size: 1rem;7966  color: #ffffff;7967  font-weight: 400;7968}79697970.peach-panic-divider {7971  height: 1px;7972  background: rgba(255, 255, 255, 0.08);7973  margin: 4px 0;7974}79757976.peach-panic-confirm-input {7977  width: 100%;7978  padding: 10px 12px;7979  background: rgba(255, 255, 255, 0.02);7980  border: 1px solid rgba(220, 38, 38, 0.4);7981  border-radius: 8px;7982  color: var(--peach-t1);7983  font-family: "IBM Plex Mono", monospace;7984  font-size: 0.875rem;7985  letter-spacing: 0.12em;7986  text-transform: uppercase;7987}79887989.peach-panic-confirm-input:focus {7990  outline: none;7991  border-color: rgb(220, 38, 38);7992}79937994.peach-panic-confirm-input--match {7995  border-color: rgb(220, 38, 38);7996  color: rgb(220, 38, 38);7997}79987999.peach-panic-confirm-label {8000  font-size: 0.6875rem;8001  color: var(--peach-t2);8002  margin: 0 0 -8px;8003  letter-spacing: 0.06em;8004}80058006.peach-panic-actions {8007  display: flex;8008  flex-direction: column;8009  gap: 10px;8010  margin-top: auto;8011}80128013.peach-panic-button {8014  width: 100%;8015  padding: 12px;8016  border-radius: 8px;8017  font-size: 0.8125rem;8018  cursor: pointer;8019  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;8020}80218022.peach-panic-button--primary {8023  background: var(--peach-accent);8024  border: 1px solid var(--peach-accent);8025  color: #ffffff;8026  font-weight: 600;8027}80288029.peach-panic-button--primary:hover {8030  background: color-mix(in srgb, var(--peach-accent) 88%, white);8031}80328033.peach-panic-button--danger {8034  background: rgb(220, 38, 38);8035  border: 1px solid rgb(220, 38, 38);8036  color: #ffffff;8037  font-weight: 600;8038}80398040.peach-panic-button--danger:disabled {8041  opacity: 0.35;8042  cursor: not-allowed;8043}80448045.peach-panic-button--ghost {8046  background: transparent;8047  border: 1px solid rgba(255, 255, 255, 0.18);8048  color: var(--peach-t2);8049}80508051.peach-panic-button--ghost:hover {8052  border-color: rgba(255, 255, 255, 0.32);8053  color: var(--peach-t1);8054}80558056.peach-panic-link {8057  background: transparent;8058  border: none;8059  padding: 4px 0;8060  color: rgba(220, 38, 38, 0.65);8061  font-size: 0.75rem;8062  cursor: pointer;8063  text-align: left;8064  text-decoration: underline;8065  text-underline-offset: 3px;8066}80678068.peach-panic-link:hover {8069  color: rgb(220, 38, 38);8070}80718072.peach-panic-bar {8073  background: rgb(220, 38, 38);8074  padding: 16px 20px;8075  margin: -28px -20px 0;8076  text-align: center;8077  font-size: 0.8125rem;8078  font-weight: 700;8079  letter-spacing: 0.12em;8080  color: #ffffff;8081}80828083.peach-panic-final-button {8084  width: 100%;8085  padding: 14px;8086  background: rgb(220, 38, 38);8087  border: none;8088  border-radius: 8px;8089  color: #ffffff;8090  font-size: 0.875rem;8091  font-weight: 700;8092  letter-spacing: 0.08em;8093  text-transform: uppercase;8094  cursor: pointer;8095  animation: peach-panic-pulse 2s ease-in-out infinite;8096}80978098.peach-settings-license {8099  margin-top: 10px;8100  padding-top: 10px;8101  border-top: 1px solid var(--peach-t3);8102}81038104.peach-settings-label {8105  font-size: 0.625rem;8106  letter-spacing: 0.08em;8107  color: var(--peach-t3);8108  display: block;8109  margin-bottom: 6px;8110}81118112.peach-settings-license-row {8113  display: flex;8114  align-items: center;8115  justify-content: space-between;8116  gap: 8px;8117}81188119.peach-settings-license-key {8120  font-family: 'IBM Plex Mono', monospace;8121  font-size: 0.75rem;8122  color: var(--peach-t0);8123  letter-spacing: 0.04em;8124  word-break: break-all;8125  flex: 1;8126  min-width: 0;8127}81288129.peach-settings-license-key--masked {8130  font-family: 'IBM Plex Mono', monospace;8131  font-size: 0.6rem;8132  color: var(--peach-t1);8133  letter-spacing: 0.18em;8134  user-select: none;8135}81368137.peach-settings-license-actions {8138  display: flex;8139  align-items: center;8140  gap: 2px;8141  flex-shrink: 0;8142}81438144.peach-settings-license-copy {8145  font-size: 0.6875rem;8146  color: var(--peach-accent);8147  background: transparent;8148  border: none;8149  cursor: pointer;8150  padding: 4px 8px;8151  border-radius: 4px;8152  flex-shrink: 0;8153  transition: opacity 150ms ease;8154}81558156.peach-settings-license-copy:hover {8157  opacity: 0.75;8158}81598160.peach-settings-license-toggle {8161  display: flex;8162  align-items: center;8163  justify-content: center;8164  background: transparent;8165  border: none;8166  cursor: pointer;8167  padding: 4px 6px;8168  border-radius: 4px;8169  color: var(--peach-t2);8170  transition: color 150ms ease;8171}81728173.peach-settings-license-toggle:hover {8174  color: var(--peach-t1);8175}81768177@keyframes peach-panic-pulse {8178  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }8179  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }8180}81818182[data-motion="reduce"] .peach-panic-final-button {8183  animation: none;8184}81858186/* Vault History — Settings → Vault sub-view */81878188.peach-history-list {8189  border: 1px solid var(--peach-border);8190  border-radius: 8px;8191  overflow: hidden;8192  margin: 8px 0 4px;8193}81948195.peach-history-row {8196  display: flex;8197  align-items: center;8198  justify-content: space-between;8199  padding: 9px 12px;8200  gap: 10px;8201  border-bottom: 1px solid var(--peach-border);8202}82038204.peach-history-row:last-child {8205  border-bottom: none;8206}82078208.peach-history-meta {8209  display: flex;8210  flex-direction: column;8211  gap: 2px;8212  min-width: 0;8213  flex: 1;8214}82158216.peach-history-time {8217  font-size: 0.75rem;8218  font-family: 'IBM Plex Mono', ui-monospace, monospace;8219  color: var(--peach-t0);8220  white-space: nowrap;8221  overflow: hidden;8222  text-overflow: ellipsis;8223}82248225.peach-history-sub {8226  font-size: 0.625rem;8227  color: var(--peach-t2);8228  letter-spacing: 0.06em;8229  text-transform: uppercase;8230  white-space: nowrap;8231  overflow: hidden;8232  text-overflow: ellipsis;8233}82348235.peach-history-btn {8236  flex-shrink: 0;8237  white-space: nowrap;8238  min-width: 56px;8239  text-align: center;8240}82418242.peach-history-btn.is-busy {8243  opacity: 0.65;8244}82458246.peach-history-footer {8247  font-size: 0.625rem;8248  color: var(--peach-t3);8249  letter-spacing: 0.05em;8250  text-align: right;8251  margin: 0;8252  padding: 2px 0 0;8253}82548255/* ── Context menu + swipe-copy flash ─────────────────────── */8256.peach-context-menu-backdrop {8257  position: fixed;8258  inset: 0;8259  background: rgba(0, 0, 0, 0.45);8260  z-index: 100;8261  display: flex;8262  align-items: flex-end;8263  justify-content: center;8264  animation: peach-ctx-fade 140ms ease both;8265}8266.peach-context-menu {8267  width: min(360px, calc(100vw - 24px));8268  margin-bottom: max(env(safe-area-inset-bottom), 12px);8269  background: var(--peach-bg);8270  border: 1px solid var(--peach-t3);8271  border-radius: 14px;8272  padding: 6px;8273  display: flex;8274  flex-direction: column;8275  gap: 2px;8276  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);8277  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;8278}8279@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }8280@keyframes peach-ctx-rise {8281  from { transform: translateY(16px); opacity: 0; }8282  to   { transform: translateY(0);    opacity: 1; }8283}8284.peach-context-menu-item {8285  background: transparent;8286  color: var(--peach-t0);8287  border: 0;8288  border-radius: 10px;8289  padding: 12px 14px;8290  text-align: left;8291  font: inherit;8292  cursor: pointer;8293}8294.peach-context-menu-item:hover,8295.peach-context-menu-item:focus-visible {8296  background: var(--peach-t3);8297}8298.peach-context-menu-item--danger {8299  color: var(--peach-health-bad, #d96868);8300}8301.peach-context-menu-item--cancel {8302  color: var(--peach-t2);8303  margin-top: 4px;8304  border-top: 1px solid var(--peach-t3);8305  border-radius: 0 0 10px 10px;8306}83078308/* Swipe-to-copy flash */8309.peach-entry-row.is-copy-flash {8310  animation: peach-copy-flash 600ms ease both;8311}8312@keyframes peach-copy-flash {8313  0%   { background: transparent; }8314  20%  { background: rgba(217, 153, 51, 0.32); }8315  100% { background: transparent; }8316}83178318html { font-size: 16px; }83198320/* ── Recovery word entry ─────────────────────────────────────────── */8321.peach-lock-recover-link {8322  display: block;8323  width: 100%;8324  margin-top: 12px;8325  background: none;8326  border: none;8327  font-family: "IBM Plex Mono", monospace;8328  font-size: 0.625rem;8329  letter-spacing: 0.06em;8330  color: var(--peach-t2);8331  cursor: pointer;8332  text-align: center;8333  padding: 4px;8334  transition: color 120ms ease;8335}8336.peach-lock-recover-link:hover {8337  color: var(--peach-t0);8338}83398340.lock-screen--recovery {8341  display: flex;8342  flex-direction: column;8343  align-items: stretch;8344  padding: 12px 20px 24px;8345  overflow: hidden;8346}83478348.peach-recovery-nav {8349  display: flex;8350  align-items: center;8351  position: relative;8352  z-index: 1;8353  margin-bottom: 4px;8354}83558356/* Mask runes to the top decorative band only — keep inputs and the8357   bottom CTA button clear. The bottom of the popup is reserved for8358   submit buttons; rendering runes there overlaps the button glyph. */8359.peach-rune-background--recovery {8360  -webkit-mask-image: linear-gradient(8361    to bottom,8362    black 0px, black 85px,8363    transparent 110px,8364    transparent 100%8365  );8366  mask-image: linear-gradient(8367    to bottom,8368    black 0px, black 85px,8369    transparent 110px,8370    transparent 100%8371  );8372}83738374.peach-recovery-header {8375  text-align: center;8376  margin-bottom: 16px;8377  margin-top: 4px;8378}8379.peach-recovery-header .peach-onboarding-headline {8380  font-size: 1.25rem;8381  font-weight: 300;8382  letter-spacing: 0.02em;8383  margin: 0 0 4px;8384}8385.peach-recovery-header .peach-hint {8386  font-family: "IBM Plex Mono", monospace;8387  font-size: 0.625rem;8388  color: var(--peach-t2);8389  letter-spacing: 0.04em;8390  margin: 0;8391}83928393/* 12-word grid: 2 columns × 6 rows */8394.peach-recovery-grid {8395  display: grid;8396  grid-template-columns: repeat(2, 1fr);8397  gap: 12px 20px;8398  width: 100%;8399  margin-bottom: 0;8400}84018402.peach-recovery-word-slot {8403  display: flex;8404  align-items: center;8405  gap: 6px;8406  min-width: 0;8407}84088409.peach-recovery-word-index {8410  font-family: "IBM Plex Mono", monospace;8411  font-size: 0.5rem;8412  color: rgba(255, 255, 255, 0.35);8413  min-width: 14px;8414  flex-shrink: 0;8415  text-align: right;8416  letter-spacing: 0.04em;8417}84188419.peach-recovery-word-input {8420  flex: 1;8421  min-width: 0;8422  background: transparent;8423  border: none;8424  border-bottom: 1px solid rgba(255, 255, 255, 0.22);8425  color: var(--peach-t0);8426  font-family: "IBM Plex Mono", monospace;8427  font-size: 0.6875rem;8428  letter-spacing: 0.06em;8429  padding: 5px 2px 4px;8430  outline: none;8431  text-transform: lowercase;8432  transition: border-color 120ms ease;8433}8434.peach-recovery-word-input::placeholder {8435  color: rgba(255, 255, 255, 0.18);8436}8437.peach-recovery-word-input:focus {8438  border-bottom-color: var(--peach-accent);8439}84408441.peach-recovery-submit {8442  width: 100%;8443  margin-top: auto;8444}84458446.peach-recovery-new-password-form {8447  width: 100%;8448  display: flex;8449  flex-direction: column;8450  gap: 16px;8451  margin-bottom: 8px;8452}8453.peach-recovery-new-password-form .peach-newvault-field {8454  display: flex;8455  flex-direction: column;8456  gap: 4px;8457}84588459/* ── Recovery words display (post-create) ────────────────────────── */8460.lock-screen--recovery-display {8461  display: flex;8462  flex-direction: column;8463  align-items: stretch;8464  padding: 0 20px 20px;8465  min-height: 0;8466  overflow-y: auto;8467}84688469.peach-recovery-words-display {8470  width: 100%;8471  margin-bottom: 16px;8472  border: 1px solid var(--peach-t3);8473  border-radius: 8px;8474  padding: 12px 14px;8475  background: rgba(245, 240, 234, 0.04);8476}84778478.peach-recovery-words-label {8479  font-family: "IBM Plex Mono", monospace;8480  font-size: 0.5rem;8481  letter-spacing: 0.08em;8482  color: var(--peach-t2);8483  text-transform: uppercase;8484  margin-bottom: 10px;8485}84868487.peach-recovery-word-list {8488  list-style: none;8489  margin: 0;8490  padding: 0;8491  display: grid;8492  grid-template-columns: repeat(2, 1fr);8493  gap: 6px 16px;8494}84958496.peach-recovery-word-item {8497  display: flex;8498  align-items: baseline;8499  gap: 5px;8500}85018502.peach-recovery-word-num {8503  font-family: "IBM Plex Mono", monospace;8504  font-size: 0.5rem;8505  color: var(--peach-t2);8506  width: 14px;8507  flex: 0 0 14px;8508  text-align: right;8509  letter-spacing: 0.04em;8510  font-variant-numeric: tabular-nums;8511}85128513.peach-recovery-download-btn {8514  display: block;8515  margin: 10px auto 0;8516  padding: 4px 10px;8517  background: transparent;8518  border: 1px solid var(--peach-border);8519  border-radius: 6px;8520  color: var(--peach-t2);8521  font-family: "IBM Plex Mono", monospace;8522  font-size: 0.5625rem;8523  letter-spacing: 0.06em;8524  text-transform: lowercase;8525  cursor: pointer;8526  transition: border-color 0.15s, color 0.15s;8527}85288529.peach-recovery-download-btn:hover {8530  border-color: var(--peach-accent);8531  color: var(--peach-t0);8532}85338534.peach-recovery-word-text {8535  font-family: "IBM Plex Mono", monospace;8536  font-size: 0.6875rem;8537  letter-spacing: 0.06em;8538  color: var(--peach-t0);8539  text-transform: lowercase;8540}85418542.peach-hint--warning {8543  color: var(--peach-accent);8544  font-style: italic;8545}8546.peach-hint--success {8547  color: var(--peach-t2);8548  font-family: "IBM Plex Mono", monospace;8549  font-size: 0.625rem;8550  letter-spacing: 0.06em;8551}85528553/* Confirmation step */8554.peach-recovery-confirm {8555  width: 100%;8556  flex: 1;8557  display: flex;8558  flex-direction: column;8559}8560.peach-recovery-confirm-label {8561  font-family: "IBM Plex Mono", monospace;8562  font-size: 0.5625rem;8563  letter-spacing: 0.04em;8564  color: var(--peach-t2);8565  text-align: center;8566  margin: 0 0 12px;8567}8568.peach-recovery-confirm-fields {8569  display: flex;8570  flex-direction: column;8571  gap: 14px;8572  margin-bottom: 10px;8573}8574.peach-recovery-confirm-field {8575  display: flex;8576  align-items: center;8577  gap: 8px;8578}8579.peach-recovery-confirm-num {8580  font-family: "IBM Plex Mono", monospace;8581  font-size: 0.5rem;8582  color: var(--peach-t2);8583  min-width: 44px;8584  letter-spacing: 0.04em;8585}8586.peach-recovery-confirm-input {8587  flex: 1;8588  background: transparent;8589  border: none;8590  border-bottom: 1px solid var(--peach-t3);8591  color: var(--peach-t0);8592  font-family: "IBM Plex Mono", monospace;8593  font-size: 0.6875rem;8594  letter-spacing: 0.06em;8595  padding: 4px 2px 3px;8596  outline: none;8597  text-transform: lowercase;8598  transition: border-color 120ms ease;8599}8600.peach-recovery-confirm-input:focus {8601  border-bottom-color: var(--peach-accent);8602}8603.peach-recovery-confirm-input:disabled {8604  opacity: 0.4;8605  cursor: not-allowed;8606}8607.peach-recovery-confirm-btn {8608  width: 100%;8609  margin-top: auto;8610}86118612/* ============================================================8613   Sync info sheet8614   ============================================================ */86158616.peach-sync-info-backdrop {8617  position: fixed;8618  inset: 0;8619  z-index: 200;8620  background: rgba(0, 0, 0, 0.55);8621  display: flex;8622  align-items: flex-end;8623  animation: peach-fade-in 200ms ease forwards;8624}86258626@keyframes peach-fade-in {8627  from { opacity: 0; }8628  to   { opacity: 1; }8629}86308631.peach-sync-info-sheet {8632  width: 100%;8633  background: var(--peach-bg-card, var(--peach-bg));8634  border-top-left-radius: 20px;8635  border-top-right-radius: 20px;8636  padding: 12px 24px 32px;8637  display: flex;8638  flex-direction: column;8639  gap: 20px;8640  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;8641}86428643@keyframes peach-sheet-up {8644  from { transform: translateY(100%); }8645  to   { transform: translateY(0); }8646}86478648.peach-sync-info-handle {8649  width: 36px;8650  height: 4px;8651  border-radius: 2px;8652  background: var(--peach-border);8653  margin: 0 auto 4px;8654  flex-shrink: 0;8655}86568657.peach-sync-info-title {8658  font-family: 'Cormorant Garamond', serif;8659  font-style: italic;8660  font-size: 26px;8661  font-weight: 600;8662  color: var(--peach-t0);8663  margin: 0;8664  line-height: 1.2;8665}86668667.peach-sync-info-body {8668  display: flex;8669  flex-direction: column;8670  gap: 14px;8671}86728673.peach-sync-info-point {8674  display: flex;8675  gap: 12px;8676  align-items: flex-start;8677  font-size: 14px;8678  color: var(--peach-t2);8679  line-height: 1.6;8680  margin: 0;8681}86828683.peach-sync-info-icon {8684  color: var(--peach-accent);8685  font-size: 16px;8686  flex-shrink: 0;8687  margin-top: 1px;8688}86898690.peach-sync-info-actions {8691  display: flex;8692  flex-direction: column;8693  gap: 12px;8694  margin-top: 4px;8695}86968697.peach-sync-info-pro-link {8698  background: none;8699  border: none;8700  font-size: 13px;8701  color: var(--peach-t3);8702  cursor: pointer;8703  padding: 0;8704  font-family: inherit;8705  text-align: center;8706  transition: color 150ms ease;8707}87088709.peach-sync-info-pro-link:hover {8710  color: var(--peach-accent);8711}87128713.peach-btn--full {8714  width: 100%;8715}87168717/* ── Sync screen ── */87188719.peach-sync-coming-soon {8720  display: flex;8721  align-items: flex-start;8722  gap: 10px;8723  padding: 12px 14px;8724  background: var(--peach-s1);8725  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8726  border-radius: 10px;8727}8728.peach-sync-coming-soon__icon {8729  flex-shrink: 0;8730  color: var(--peach-accent);8731  margin-top: 1px;8732  line-height: 0;8733}8734.peach-sync-coming-soon__title {8735  font-family: 'Cormorant Garamond', serif;8736  font-weight: 500;8737  font-size: 13px;8738  color: var(--peach-accent);8739  margin: 0 0 5px;8740  line-height: 1.3;8741}8742.peach-sync-coming-soon__body {8743  font-size: 12px;8744  color: var(--peach-t1);8745  line-height: 1.55;8746  margin: 0;8747}87488749.peach-sync-screen {8750  display: flex;8751  flex-direction: column;8752  height: 100%;8753}87548755.peach-sync-content {8756  flex: 1;8757  overflow-y: auto;8758  padding: 24px 20px 40px;8759  display: flex;8760  flex-direction: column;8761  gap: 24px;8762}87638764/* Intro (State A) */8765.peach-sync-headline {8766  font-family: 'Cormorant Garamond', serif;8767  font-style: italic;8768  font-size: 28px;8769  font-weight: 600;8770  color: var(--peach-t0);8771  margin: 0 0 10px;8772  line-height: 1.2;8773}87748775.peach-sync-intro-body {8776  font-size: 14px;8777  color: var(--peach-t1);8778  line-height: 1.6;8779  margin: 0;8780}87818782.peach-sync-pro-note {8783  display: flex;8784  flex-direction: column;8785  gap: 8px;8786  background: var(--peach-t3);8787  border-radius: 10px;8788  padding: 12px 14px;8789}87908791.peach-sync-pro-note-text {8792  font-size: 12px;8793  color: var(--peach-t2);8794  line-height: 1.5;8795  margin: 0;8796}87978798.peach-sync-pro-link {8799  background: none;8800  border: none;8801  font-size: 12px;8802  color: var(--peach-accent);8803  cursor: pointer;8804  padding: 0;8805  font-family: inherit;8806  text-align: left;8807}88088809/* Status (State C) */8810.peach-sync-status {8811  padding: 12px 0;8812  border-bottom: 1px solid var(--peach-border);8813}88148815.peach-sync-status-row {8816  display: flex;8817  align-items: center;8818  gap: 8px;8819}88208821.peach-sync-dot {8822  width: 7px;8823  height: 7px;8824  border-radius: 50%;8825  flex-shrink: 0;8826}88278828.peach-sync-dot--green { background: var(--peach-health-ok); }8829.peach-sync-dot--amber { background: var(--peach-accent); }88308831.peach-sync-status-text {8832  font-family: 'IBM Plex Mono', monospace;8833  font-size: 11px;8834  color: var(--peach-t2);8835}88368837/* Paired devices */8838.peach-sync-section {8839  display: flex;8840  flex-direction: column;8841  gap: 2px;8842}88438844.peach-sync-section-label {8845  font-family: 'IBM Plex Mono', monospace;8846  font-size: 10px;8847  letter-spacing: 0.1em;8848  color: var(--peach-t3);8849  margin: 0 0 10px;8850}88518852.peach-sync-device-row {8853  display: flex;8854  justify-content: space-between;8855  align-items: baseline;8856  padding: 10px 0;8857  border-bottom: 1px solid var(--peach-border);8858  gap: 12px;8859}88608861.peach-sync-device-name {8862  font-size: 14px;8863  color: var(--peach-t1);8864}88658866.peach-sync-device-meta {8867  font-family: 'IBM Plex Mono', monospace;8868  font-size: 11px;8869  color: var(--peach-t3);8870  white-space: nowrap;8871}88728873.peach-sync-hub-note {8874  padding: 14px 16px;8875  border: 1px solid var(--peach-border);8876  border-radius: 10px;8877  display: flex;8878  flex-direction: column;8879  gap: 6px;8880  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8881}88828883.peach-sync-hub-note-title {8884  font-size: 13px;8885  font-weight: 600;8886  color: var(--peach-t0);8887  margin: 0;8888}88898890.peach-sync-hub-note-body {8891  font-size: 12px;8892  color: var(--peach-t2);8893  line-height: 1.6;8894  margin: 0;8895}88968897/* Action buttons */8898.peach-sync-actions {8899  display: flex;8900  gap: 10px;8901  flex-wrap: wrap;8902}89038904/* Upgrade prompt (State B) */8905.peach-sync-upgrade {8906  display: flex;8907  flex-direction: column;8908  gap: 12px;8909  padding: 16px;8910  border: 1px solid var(--peach-border);8911  border-radius: 10px;8912}89138914.peach-sync-upgrade-text {8915  font-size: 13px;8916  color: var(--peach-t2);8917  line-height: 1.6;8918  margin: 0;8919}89208921/* Network note */8922.peach-sync-network-note {8923  font-size: 12px;8924  color: var(--peach-t3);8925  line-height: 1.6;8926  margin: 0;8927}89288929/* Advanced */8930.peach-sync-advanced {8931  margin-top: auto;8932  padding-top: 16px;8933  border-top: 1px solid var(--peach-border);8934}89358936.peach-sync-advanced-toggle {8937  display: flex;8938  align-items: center;8939  gap: 8px;8940  background: none;8941  border: none;8942  font-family: 'IBM Plex Mono', monospace;8943  font-size: 11px;8944  letter-spacing: 0.08em;8945  color: var(--peach-t3);8946  cursor: pointer;8947  padding: 0;8948  text-transform: uppercase;8949}89508951.peach-sync-advanced-chevron {8952  display: inline-block;8953  transition: transform 200ms ease;8954  font-size: 10px;8955}89568957.peach-sync-advanced-chevron.is-open {8958  transform: rotate(90deg);8959}89608961.peach-sync-advanced-content {8962  margin-top: 14px;8963}89648965.peach-sync-advanced-row {8966  display: flex;8967  justify-content: space-between;8968  align-items: center;8969  gap: 16px;8970}89718972.peach-sync-advanced-title {8973  font-size: 14px;8974  color: var(--peach-t1);8975  margin: 0 0 2px;8976}89778978.peach-sync-advanced-subtitle {8979  font-size: 12px;8980  color: var(--peach-t3);8981  margin: 0;8982  line-height: 1.5;8983}89848985/* ── Notes Mode ── */89868987/* Overlay that crossfades over the vault */8988.peach-notes-overlay {8989  position: fixed;8990  inset: 0;8991  z-index: 90;8992  opacity: 0;8993  pointer-events: none;8994  animation: peach-mode-in 220ms ease-in forwards;8995}89968997.peach-notes-overlay.is-visible {8998  opacity: 1;8999  pointer-events: auto;9000}90019002@keyframes peach-mode-in {9003  from { opacity: 0; }9004  to   { opacity: 1; }9005}90069007/* Top-level notes surface */9008.peach-notes-mode {9009  position: absolute;9010  inset: 0;9011  background: var(--peach-bg);9012  display: flex;9013  flex-direction: column;9014}90159016/* Rune canvas positioned behind content */9017.peach-note-rune-canvas {9018  position: absolute;9019  inset: 0;9020  width: 100%;9021  height: 100%;9022  pointer-events: none;9023  z-index: 0;9024}90259026/* TOC wrapper */9027.peach-notes-toc-wrapper {9028  position: absolute;9029  inset: 0;9030  z-index: 1;9031  opacity: 1;9032  pointer-events: auto;9033  transition: opacity 200ms ease;9034}90359036.peach-notes-toc-wrapper.is-hidden {9037  opacity: 0;9038  pointer-events: none;9039}90409041/* Editor wrapper */9042.peach-notes-editor-wrapper {9043  position: absolute;9044  inset: 0;9045  z-index: 2;9046  opacity: 0;9047  pointer-events: none;9048  transition: opacity 200ms ease;9049}90509051.peach-notes-editor-wrapper.is-visible {9052  opacity: 1;9053  pointer-events: auto;9054}90559056/* TOC inner */9057.peach-notes-toc {9058  position: relative;9059  display: flex;9060  flex-direction: column;9061  height: 100%;9062  padding-top: env(safe-area-inset-top, 0px);9063  padding-bottom: env(safe-area-inset-bottom, 0px);9064}90659066/* Shared header */9067.peach-notes-header {9068  display: flex;9069  align-items: center;9070  padding: 12px 16px;9071  gap: 12px;9072  flex-shrink: 0;9073  min-height: 52px;9074  position: relative;9075  z-index: 2;9076}90779078.peach-notes-back {9079  font-size: 22px;9080  color: var(--peach-t2);9081  background: none;9082  border: none;9083  padding: 4px;9084  cursor: pointer;9085  line-height: 1;9086  flex-shrink: 0;9087  transition: color 150ms ease;9088  -webkit-tap-highlight-color: transparent;9089}90909091.peach-notes-back:active { color: var(--peach-t0); }90929093.peach-notes-header-title {9094  flex: 1;9095  font-family: 'Cormorant Garamond', serif;9096  font-style: italic;9097  font-size: 22px;9098  color: var(--peach-t0);9099  text-align: center;9100}91019102.peach-notes-header-title.is-breadcrumb {9103  font-family: 'IBM Plex Mono', monospace;9104  font-style: normal;9105  font-size: 11px;9106  color: var(--peach-t3);9107  letter-spacing: 0.08em;9108  text-transform: uppercase;9109  cursor: pointer;9110}91119112.peach-notes-header-actions {9113  display: flex;9114  gap: 8px;9115  flex-shrink: 0;9116}91179118.peach-notes-header-btn {9119  width: 36px;9120  height: 36px;9121  display: flex;9122  align-items: center;9123  justify-content: center;9124  background: none;9125  border: none;9126  color: var(--peach-t2);9127  cursor: pointer;9128  border-radius: 8px;9129  font-size: 16px;9130  transition: color 150ms ease, background 150ms ease;9131  -webkit-tap-highlight-color: transparent;9132}91339134.peach-notes-header-btn:active {9135  background: rgba(255,255,255,0.06);9136  color: var(--peach-t0);9137}91389139/* The header + glyph is larger than the search svg so the two right-side9140 * buttons feel visually balanced. The base .peach-notes-header-btn caps font9141 * at 16px which would render the + too small. */9142.peach-notes-new-btn-icon {9143  font-size: 22px;9144  font-weight: 300;9145  line-height: 1;9146}91479148/* Inline search bar */9149.peach-notes-search-input {9150  flex: 1;9151  background: none;9152  border: none;9153  outline: none;9154  font-family: 'IBM Plex Mono', monospace;9155  font-size: 13px;9156  color: var(--peach-t0);9157  padding: 4px 0;9158  letter-spacing: 0.02em;9159}91609161.peach-notes-search-input::placeholder {9162  color: var(--peach-t3);9163}91649165/* TOC list */9166.peach-notes-list-container {9167  flex: 1;9168  overflow-y: auto;9169  overflow-x: hidden;9170  scrollbar-width: none;9171  -webkit-overflow-scrolling: touch;9172  overscroll-behavior: contain;9173  position: relative;9174  z-index: 1;9175}91769177.peach-notes-list-container::-webkit-scrollbar { display: none; }91789179/* Note row */9180.peach-note-row {9181  position: relative;9182  display: grid;9183  grid-template-columns: 44px 8px 1fr 8px auto;9184  align-items: center;9185  min-height: 72px;9186  padding: 16px 20px;9187  border-bottom: 0.5px solid var(--peach-border);9188  cursor: pointer;9189  overflow: hidden;9190  touch-action: pan-y;9191  user-select: none;9192  -webkit-user-select: none;9193  -webkit-tap-highlight-color: transparent;9194}91959196.peach-note-row:first-child {9197  border-top: 0.5px solid var(--peach-border);9198}91999200.peach-note-row:active {9201  background: rgba(255,255,255,0.02);9202}92039204.peach-note-numeral {9205  font-family: 'Cormorant Garamond', serif;9206  font-style: italic;9207  font-size: 15px;9208  color: var(--peach-accent);9209  text-align: right;9210  line-height: 1;9211  flex-shrink: 0;9212}92139214.peach-note-title-gap { /* grid spacer */ }92159216.peach-note-title {9217  font-family: 'Cormorant Garamond', serif;9218  font-style: italic;9219  font-size: 18px;9220  color: var(--peach-t0);9221  line-height: 1.3;9222  min-width: 0;9223  overflow-wrap: break-word;9224}92259226.peach-note-title-match {9227  color: var(--peach-accent);9228}92299230.peach-note-date {9231  font-family: 'IBM Plex Mono', monospace;9232  font-size: 11px;9233  color: var(--peach-t2);9234  white-space: nowrap;9235  text-align: right;9236  flex-shrink: 0;9237  grid-column: 5;9238}92399240/* Swipe underlays */9241.peach-note-row-underlay {9242  position: absolute;9243  inset: 0;9244  display: flex;9245  align-items: center;9246  padding: 0 24px;9247  font-family: 'IBM Plex Mono', monospace;9248  font-size: 11px;9249  letter-spacing: 0.1em;9250  pointer-events: none;9251  z-index: 0;9252}92539254.peach-note-row-underlay--delete {9255  background: #8B2020;9256  color: rgba(255,255,255,0.9);9257  justify-content: flex-end;9258}92599260.peach-note-row-underlay--archive {9261  background: var(--peach-accent);9262  color: #0C0A06;9263  justify-content: flex-start;9264}92659266/* Delete confirm strip */9267.peach-note-delete-confirm {9268  position: absolute;9269  inset: 0;9270  background: var(--peach-bg);9271  display: flex;9272  align-items: center;9273  gap: 12px;9274  padding: 0 20px;9275  font-family: 'IBM Plex Mono', monospace;9276  font-size: 11px;9277  color: var(--peach-t1);9278  letter-spacing: 0.04em;9279  animation: peach-delete-confirm-in 150ms ease both;9280  z-index: 10;9281}92829283@keyframes peach-delete-confirm-in {9284  from { opacity: 0; }9285  to   { opacity: 1; }9286}92879288.peach-note-delete-confirm-btn {9289  background: #8B2020;9290  color: rgba(255,255,255,0.9);9291  border: none;9292  border-radius: 6px;9293  padding: 4px 10px;9294  font-family: 'IBM Plex Mono', monospace;9295  font-size: 10px;9296  cursor: pointer;9297  letter-spacing: 0.06em;9298}92999300.peach-note-delete-cancel-btn {9301  background: none;9302  border: none;9303  color: var(--peach-t3);9304  font-family: 'IBM Plex Mono', monospace;9305  font-size: 10px;9306  cursor: pointer;9307  letter-spacing: 0.06em;9308  padding: 4px 6px;9309}93109311/* + New note button */9312.peach-notes-new-btn {9313  font-family: 'IBM Plex Mono', monospace;9314  font-size: 12px;9315  color: var(--peach-t3);9316  text-align: center;9317  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));9318  background: none;9319  border: none;9320  width: 100%;9321  cursor: pointer;9322  letter-spacing: 0.04em;9323  transition: color 150ms ease;9324  -webkit-tap-highlight-color: transparent;9325}93269327.peach-notes-new-btn:active { color: var(--peach-accent); }93289329/* Empty state */9330.peach-notes-empty {9331  display: flex;9332  flex-direction: column;9333  align-items: center;9334  justify-content: center;9335  flex: 1;9336  padding: 48px 32px;9337  gap: 16px;9338}93399340.peach-notes-empty-text {9341  font-family: 'Cormorant Garamond', serif;9342  font-style: italic;9343  font-size: 20px;9344  color: var(--peach-t3);9345  text-align: center;9346  margin: 0;9347  line-height: 1.4;9348  white-space: pre-line;9349}93509351/* ── Editor surface ── */93529353.peach-note-editor-surface {9354  position: absolute;9355  inset: 0;9356  background: var(--peach-bg);9357  display: flex;9358  flex-direction: column;9359  padding-top: env(safe-area-inset-top, 0px);9360}93619362.peach-note-editor-scroll {9363  flex: 1;9364  overflow-y: auto;9365  overflow-x: hidden;9366  scrollbar-width: none;9367  -webkit-overflow-scrolling: touch;9368  padding: 0 24px 120px;9369  position: relative;9370  z-index: 1;9371}93729373.peach-note-editor-scroll::-webkit-scrollbar { display: none; }93749375/* Desktop toolbar (always visible above body) */9376.peach-note-toolbar-desktop-inline {9377  display: flex;9378  align-items: center;9379  gap: 2px;9380  padding: 6px 0 12px;9381  margin-bottom: 4px;9382  border-bottom: 0.5px solid var(--peach-border);9383}93849385/* Title field */9386.peach-note-title-field {9387  font-family: 'Cormorant Garamond', serif;9388  font-style: italic;9389  font-size: 32px;9390  font-weight: 600;9391  color: var(--peach-t0);9392  line-height: 1.2;9393  padding: 8px 0 0;9394  outline: none;9395  min-height: 44px;9396  word-break: break-word;9397  position: relative;9398  z-index: 1;9399}94009401.peach-note-title-field:empty::before {9402  content: attr(data-placeholder);9403  color: var(--peach-t3);9404  pointer-events: none;9405}94069407/* Hairline separator */9408.peach-note-hairline {9409  height: 0.5px;9410  background: var(--peach-border);9411  margin: 12px 0 20px;9412  position: relative;9413  z-index: 1;9414}94159416/* Body field */9417.peach-note-body-field {9418  font-family: 'DM Sans', sans-serif;9419  font-size: 16px;9420  color: var(--peach-t0);9421  line-height: 1.85;9422  padding: 0;9423  outline: none;9424  min-height: 240px;9425  word-break: break-word;9426  position: relative;9427  z-index: 1;9428}94299430.peach-note-body-field:empty::before {9431  content: attr(data-placeholder);9432  color: var(--peach-t3);9433  font-style: italic;9434  pointer-events: none;9435}94369437.peach-note-body-field h2 {9438  font-family: 'Cormorant Garamond', serif;9439  font-style: italic;9440  font-size: 22px;9441  font-weight: 600;9442  color: var(--peach-t0);9443  margin: 20px 0 8px;9444}94459446.peach-note-body-field blockquote {9447  border-left: 2px solid var(--peach-accent);9448  margin: 12px 0;9449  padding-left: 16px;9450  color: var(--peach-t1);9451  font-style: italic;9452}94539454.peach-note-body-field ul,9455.peach-note-body-field ol {9456  padding-left: 20px;9457  margin: 8px 0;9458}94599460.peach-note-body-field li {9461  margin: 4px 0;9462}94639464.peach-note-body-field hr {9465  border: none;9466  border-top: 0.5px solid var(--peach-border);9467  margin: 16px 0;9468}94699470/* Saved indicator */9471.peach-note-saved-indicator {9472  font-family: 'IBM Plex Mono', monospace;9473  font-size: 11px;9474  color: var(--peach-t3);9475  letter-spacing: 0.04em;9476  text-align: right;9477  padding: 6px 24px;9478  flex-shrink: 0;9479  transition: opacity 300ms ease;9480  pointer-events: none;9481  position: relative;9482  z-index: 1;9483}94849485/* Mobile keyboard toolbar */9486.peach-note-toolbar-mobile {9487  display: flex;9488  align-items: center;9489  padding: 8px 16px;9490  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));9491  background: var(--peach-bg);9492  border-top: 0.5px solid var(--peach-border);9493  gap: 4px;9494  flex-shrink: 0;9495  position: relative;9496  z-index: 10;9497}94989499.peach-note-toolbar-btn {9500  min-width: 36px;9501  height: 36px;9502  display: flex;9503  align-items: center;9504  justify-content: center;9505  background: none;9506  border: none;9507  border-radius: 8px;9508  cursor: pointer;9509  font-size: 14px;9510  color: var(--peach-t1);9511  font-family: 'DM Sans', sans-serif;9512  font-weight: 600;9513  transition: background 100ms ease, color 100ms ease;9514  -webkit-tap-highlight-color: transparent;9515}95169517.peach-note-toolbar-btn--italic { font-style: italic; }9518.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }9519.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }95209521.peach-note-toolbar-divider {9522  width: 0.5px;9523  height: 20px;9524  background: var(--peach-border);9525  margin: 0 4px;9526  flex-shrink: 0;9527}95289529.peach-note-toolbar-spacer { flex: 1; }95309531/* Desktop: larger headline in TOC */9532@media (min-width: 400px) {9533  .peach-notes-header-title:not(.is-breadcrumb) {9534    font-size: 32px;9535  }95369537  .peach-note-row {9538    min-height: 64px;9539    padding: 14px 16px;9540  }9541}95429543/* Flying title — shared element during expansion/collapse */95449545/* ─── Light theme overrides ───────────────────────────────────────────────9546   Tokens that cannot be expressed as variable substitutions — hardcoded9547   context-specific values that need separate light-mode rules. */95489549/* Settings section headers: use text-label (#79766F) per restoration brief —9550   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY9551   presence without fighting the light parchment background. */9552.light .peach-settings-sub-label,9553[data-theme="light"] .peach-settings-sub-label,9554.light .peach-settings-nav-label,9555[data-theme="light"] .peach-settings-nav-label {9556  color: #79766F;9557}95589559/* Secondary action buttons (ghost / subtle): filled with input-well surface9560   so they read as recessed against the parchment card background. */9561.light .peach-btn--ghost:not(.peach-icon-btn),9562[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {9563  background: #EEE7DD;9564  border-color: #DDD5CB;9565  color: #1A1208;9566}9567.light .peach-icon-btn,9568[data-theme="light"] .peach-icon-btn {9569  background: transparent;9570  border-color: transparent;9571}9572.light .peach-btn--subtle,9573[data-theme="light"] .peach-btn--subtle {9574  background: #EEE7DD;9575  border-color: #DDD5CB;9576}95779578/* Wide secondary action button on the lock screen — override the9579   hardcoded dark-mode rgba values with warm parchment equivalents. */9580.light .peach-lock-secondary,9581[data-theme="light"] .peach-lock-secondary {9582  background: #EEE7DD;9583  border-color: #DDD5CB;9584  color: #1A1208;9585}9586.light .peach-lock-secondary:hover,9587[data-theme="light"] .peach-lock-secondary:hover {9588  background: #F0E9DF;9589}95909591/* Entry row hover: bg-row lifts the row above the card surface. */9592.light .peach-entry-row:hover,9593[data-theme="light"] .peach-entry-row:hover {9594  background: #F2EBE1;9595}9596.light .peach-entry-row.is-active,9597[data-theme="light"] .peach-entry-row.is-active {9598  background: #F2EBE1;9599}9600.light .peach-entry-row.is-selected,9601[data-theme="light"] .peach-entry-row.is-selected {9602  background: #F5EDE2;9603}96049605/* ──────────────────────────────────────────────────────────────────────────9606   Pair-device flow — bird-stage animation (Phase 1)9607   See src/popup/components/PairingBirds.tsx and the brief §6.2.9608   Three-act animation gated on the [data-phase] attribute of9609   .peach-pair-pair; child layers (birds, sound arcs, flight wave, dot)9610   each react via either pose class or visibility flag.9611   Tokens: accent surfaces use var(--peach-accent); bird illustration9612   colours are baked into the SVG per the brand-peach exception in §3.1.9613   ────────────────────────────────────────────────────────────────────── */96149615.peach-pair-pair {9616  position: absolute;9617  inset: 0;9618  z-index: 3;9619  display: flex;9620  flex-direction: column;9621  padding: 14px 12px 12px;9622  width: 100%;9623  box-sizing: border-box;9624  gap: 0;9625  background:9626    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9627    var(--peach-bg);9628  color: var(--peach-t0);9629  overflow-y: auto;9630  overflow-x: hidden;9631  scrollbar-width: none;9632  isolation: isolate;9633  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9634}9635@keyframes peach-pair-overlay-in {9636  from { opacity: 0; transform: translateY(8px); }9637  to   { opacity: 1; transform: translateY(0); }9638}9639.peach-pair-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }9640.peach-pair-pair::before {9641  content: '';9642  position: absolute;9643  inset: 0;9644  border-radius: inherit;9645  pointer-events: none;9646  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9647  z-index: 0;9648}9649.peach-pair-pair > * { position: relative; z-index: 1; }96509651/* Header --------------------------------------------------------------- */9652.peach-pair-head {9653  display: flex; align-items: center; gap: 10px;9654}9655.peach-pair-back {9656  width: 32px; height: 32px;9657  display: inline-flex; align-items: center; justify-content: center;9658  background: transparent;9659  border: none;9660  border-radius: 8px;9661  color: var(--peach-t1);9662  cursor: pointer;9663  transition: color 0.15s ease, box-shadow 0.15s ease;9664}9665.peach-pair-back:hover {9666  color: var(--peach-accent);9667  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9668}9669.peach-pair-title {9670  font-family: var(--font-display, Georgia, serif);9671  font-style: italic;9672  font-size: 24px;9673  font-weight: 500;9674  letter-spacing: 0.005em;9675  color: var(--peach-t0);9676  line-height: 1;9677}9678.peach-pair-head-spacer { flex: 1; }96799680/* Chip row ------------------------------------------------------------- */9681.peach-pair-chip-row {9682  display: flex;9683  align-items: center;9684  justify-content: flex-start;9685  margin-top: 12px;9686}9687.peach-pair-chip {9688  display: inline-flex; align-items: center; gap: 8px;9689  padding: 5px 10px 5px 8px;9690  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9691  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9692  border-radius: 999px;9693  font-family: var(--peach-mono, ui-monospace, monospace);9694  font-size: 11px;9695  letter-spacing: 0.04em;9696  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9697}9698.peach-pair-chip-dot {9699  width: 6px; height: 6px; border-radius: 50%;9700  background: var(--peach-accent);9701  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9702}9703.peach-pair-chip[data-phase="paired"] {9704  background: color-mix(in srgb, #4f9eda 12%, transparent);9705  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9706  color: #76b6e8;9707}9708.peach-pair-chip[data-phase="paired"] .peach-pair-chip-dot {9709  background: #76b6e8;9710  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9711}9712.peach-pair-chip[data-phase="timeout"],9713.peach-pair-chip[data-phase="mic_denied"],9714.peach-pair-chip[data-phase="version_mismatch"],9715.peach-pair-chip[data-phase="handshake_failed"] {9716  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9717  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9718  color: var(--peach-warn, #d29257);9719}9720.peach-pair-chip[data-phase="timeout"] .peach-pair-chip-dot,9721.peach-pair-chip[data-phase="mic_denied"] .peach-pair-chip-dot,9722.peach-pair-chip[data-phase="version_mismatch"] .peach-pair-chip-dot,9723.peach-pair-chip[data-phase="handshake_failed"] .peach-pair-chip-dot {9724  background: var(--peach-warn, #d29257);9725  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9726}972797289729/* Bird stage ----------------------------------------------------------- */9730.peach-pair-stage {9731  position: relative;9732  height: 180px;9733  margin: 8px auto 18px;9734  width: 300px;9735  display: flex;9736  align-items: flex-end;9737  justify-content: center;9738}9739.peach-pair-bird-slot {9740  position: absolute;9741  bottom: 0;9742  width: 108px;9743  height: 108px;9744  transform-origin: 50% 95%;9745}9746.peach-pair-bird-slot-desktop { left: 12px; }9747.peach-pair-bird-slot-mobile { right: 12px; }9748.peach-pair-stage.act-handshake .peach-pair-bird-slot-desktop,9749.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop {9750  transform: translateX(6px);9751  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9752}9753.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop { --bb-x: 6px; }9754.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { --bb-x: -6px; }9755.peach-pair-stage.act-paired .peach-pair-bird-slot {9756  animation: peach-pair-happy-bob 1.2s ease-in-out infinite;9757}9758.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { animation-delay: 0.2s; }9759@keyframes peach-pair-happy-bob {9760  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9761  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9762}97639764/* Bird internal -------------------------------------------------------- */9765.peach-pair-bird {9766  width: 108px;9767  height: 108px;9768  transform-origin: 50% 95%;9769}9770.peach-pair-bird svg { width: 100%; height: 100%; overflow: visible; }97719772.peach-pair-bird-body {9773  transform-origin: 50% 80%;9774  animation: peach-pair-bird-bob 2.4s ease-in-out infinite;9775}9776.peach-pair-bird-pose-chirping .peach-pair-bird-body { animation-duration: 1.4s; }9777.peach-pair-bird-pose-happy .peach-pair-bird-body   { animation: peach-pair-bird-celebrate 0.9s ease-in-out infinite; }9778.peach-pair-bird-pose-attentive .peach-pair-bird-body { animation-duration: 2.0s; }97799780@keyframes peach-pair-bird-bob {9781  0%, 100% { transform: translateY(0) rotate(0deg); }9782  50%      { transform: translateY(-2px) rotate(-1deg); }9783}9784@keyframes peach-pair-bird-celebrate {9785  0%, 100% { transform: translateY(0) rotate(0deg); }9786  25%      { transform: translateY(-4px) rotate(-2deg); }9787  75%      { transform: translateY(-4px) rotate(2deg); }9788}97899790.peach-pair-bird-wing {9791  transform-origin: 50% 50%;9792  animation: peach-pair-bird-flap 0.9s ease-in-out infinite;9793}9794.peach-pair-bird-pose-happy .peach-pair-bird-wing { animation-duration: 0.35s; }9795.peach-pair-bird-pose-attentive .peach-pair-bird-wing { animation-duration: 1.4s; }9796@keyframes peach-pair-bird-flap {9797  0%, 100% { transform: scaleY(1); }9798  50%      { transform: scaleY(0.85); }9799}98009801.peach-pair-bird-head-group {9802  transform-origin: 95px 52px;9803  animation: peach-pair-bird-bob-head 2.6s ease-in-out infinite;9804}9805.peach-pair-bird-pose-chirping .peach-pair-bird-head-group { animation-duration: 0.45s; }9806.peach-pair-bird-pose-attentive .peach-pair-bird-head-group { animation: none; }9807@keyframes peach-pair-bird-bob-head {9808  0%, 100% { transform: rotate(0deg); }9809  50%      { transform: rotate(3deg); }9810}98119812.peach-pair-bird-eye-group { transform-origin: center; }9813.peach-pair-bird-blink { animation: peach-pair-bird-blink 4s ease-in-out infinite; }9814@keyframes peach-pair-bird-blink {9815  0%, 92%, 100% { transform: scaleY(1); }9816  95%           { transform: scaleY(0.1); }9817}98189819.peach-pair-bird-aura {9820  animation: peach-pair-bird-aura 2.6s ease-in-out infinite;9821}9822.peach-pair-bird-pose-happy .peach-pair-bird-aura { animation-duration: 1.4s; }9823@keyframes peach-pair-bird-aura {9824  0%, 100% { opacity: 0; }9825  50%      { opacity: 0.18; }9826}98279828.peach-pair-bird-tail {9829  transform-origin: 50% 100%;9830  animation: peach-pair-bird-tail-wag 3s ease-in-out infinite;9831}9832@keyframes peach-pair-bird-tail-wag {9833  0%, 100% { transform: rotate(0deg); }9834  50%      { transform: rotate(2deg); }9835}98369837.peach-pair-bird-pose-happy .peach-pair-bird-shadow { animation: peach-pair-bird-shadow-pulse 0.9s ease-in-out infinite; }9838@keyframes peach-pair-bird-shadow-pulse {9839  0%, 100% { transform: scaleX(1); opacity: 0.45; }9840  50%      { transform: scaleX(0.92); opacity: 0.3; }9841}98429843/* Per-pose variants --------------------------------------------------- */9844.peach-pair-bird-pose-sad .peach-pair-bird-head-group { transform: translateY(4px) rotate(8deg); }9845.peach-pair-bird-pose-sad .peach-pair-bird-tuft { transform: rotate(15deg) translateY(2px); }9846.peach-pair-bird-pose-sad .peach-pair-bird-tail { transform: rotate(8deg) translateY(2px); }9847.peach-pair-bird-pose-hidden { opacity: 0; }98489849/* Rest state — bird stage at idle pose, primary CTA + paired list */9850.peach-pair-pair[data-phase="idle"] .peach-pair-stage {9851  height: 160px;9852}98539854/* Sound arcs ----------------------------------------------------------- */9855.peach-pair-arcs {9856  position: absolute;9857  top: 18px;9858  width: 96px;9859  height: 70px;9860  pointer-events: none;9861}9862.peach-pair-arcs-right { right: -60px; }9863.peach-pair-arcs-left  { left: -60px; transform: scaleX(-1); }9864.peach-pair-arc {9865  position: absolute;9866  top: 50%;9867  left: 0;9868  width: 40px;9869  height: 40px;9870  margin-top: -20px;9871  border: 1.2px solid #f4d5a8;9872  border-color: transparent #f4d5a8 transparent transparent;9873  border-radius: 50%;9874  opacity: 0;9875  animation: peach-pair-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9876}9877@keyframes peach-pair-arc-expand {9878  0%   { transform: scale(0.4); opacity: 0; }9879  20%  { opacity: 0.9; }9880  100% { transform: scale(1.6); opacity: 0; }9881}98829883/* Flight wave ---------------------------------------------------------- */9884.peach-pair-flight-track {9885  position: absolute;9886  inset: 32px 36px 38px 36px;9887  pointer-events: none;9888}9889.peach-pair-flight-wave {9890  position: absolute;9891  top: 8px;9892  left: 76px;9893  right: 76px;9894  height: 60px;9895  width: auto;9896  opacity: 0;9897  transition: opacity 0.15s ease;9898  stroke: #f4d5a8;9899  fill: none;9900}9901.peach-pair-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9902.peach-pair-flight-wave.is-visible { opacity: 1; }9903.peach-pair-flight-path,9904.peach-pair-flight-path-2 {9905  stroke-dasharray: 240;9906  stroke-dashoffset: 240;9907  stroke-linecap: round;9908  fill: none;9909}9910.peach-pair-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9911.peach-pair-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9912.peach-pair-flight-wave.is-visible .peach-pair-flight-path {9913  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9914}9915.peach-pair-flight-wave.is-visible .peach-pair-flight-path-2 {9916  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9917}9918@keyframes peach-pair-fly {9919  0%   { stroke-dashoffset: 240; opacity: 0; }9920  20%  { opacity: 1; }9921  100% { stroke-dashoffset: -120; opacity: 0; }9922}99239924/* Connection dot ------------------------------------------------------- */9925.peach-pair-dot {9926  position: absolute;9927  top: 50%; left: 50%;9928  transform: translate(-50%, -50%);9929  width: 40px; height: 40px;9930  opacity: 0;9931  pointer-events: none;9932  transition: opacity 0.3s ease;9933  color: var(--peach-accent);9934}9935.peach-pair-dot.is-visible { opacity: 1; }9936.peach-pair-dot-glow {9937  position: absolute; top: 50%; left: 50%;9938  transform: translate(-50%, -50%);9939  width: 38px; height: 38px;9940  border-radius: 50%;9941  filter: blur(10px);9942  opacity: 0.55;9943  background: var(--peach-accent);9944  animation: peach-pair-dot-bloom 1.4s ease-out;9945}9946.peach-pair-dot-core {9947  position: absolute; top: 50%; left: 50%;9948  transform: translate(-50%, -50%);9949  width: 8px; height: 8px;9950  border-radius: 50%;9951  background: var(--peach-accent);9952  box-shadow: 0 0 12px currentColor;9953  animation: peach-pair-dot-core 1.4s ease-out;9954}9955.peach-pair-dot-ring {9956  position: absolute; top: 50%; left: 50%;9957  width: 60px; height: 60px;9958  transform: translate(-50%, -50%);9959  animation: peach-pair-dot-ring 1.4s linear;9960  stroke: var(--peach-accent);9961}9962@keyframes peach-pair-dot-bloom {9963  0%   { width: 4px; height: 4px; opacity: 0; }9964  35%  { width: 60px; height: 60px; opacity: 0.7; }9965  100% { width: 38px; height: 38px; opacity: 0.55; }9966}9967@keyframes peach-pair-dot-core {9968  0%   { width: 0; height: 0; }9969  35%  { width: 12px; height: 12px; }9970  100% { width: 8px; height: 8px; }9971}9972@keyframes peach-pair-dot-ring {9973  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9974  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9975  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9976}99779978/* Motes — drift upward across the stage */9979.peach-pair-motes {9980  position: absolute;9981  inset: 0;9982  pointer-events: none;9983}9984.peach-pair-mote {9985  position: absolute;9986  width: 2px; height: 2px;9987  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9988  border-radius: 50%;9989  bottom: 32px;9990  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9991  opacity: 0;9992  animation: peach-pair-mote-drift 6s linear infinite;9993  animation-delay: calc(var(--mote-i, 0) * 0.7s);9994}9995@keyframes peach-pair-mote-drift {9996  0%   { transform: translateY(0); opacity: 0; }9997  10%  { opacity: 0.6; }9998  90%  { opacity: 0.1; }9999  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }10000}1000110002/* Status copy ---------------------------------------------------------- */10003.peach-pair-copy-host {10004  margin: 4px 4px 10px;10005  text-align: center;10006  min-height: 50px;10007}10008.peach-pair-copy {10009  animation: peach-pair-copy-in 0.35s ease both;10010}10011@keyframes peach-pair-copy-in {10012  from { opacity: 0; transform: translateY(4px); }10013  to   { opacity: 1; transform: translateY(0); }10014}10015.peach-pair-headline {10016  font-family: var(--font-display, Georgia, serif);10017  font-style: italic;10018  font-size: 20px;10019  font-weight: 500;10020  line-height: 1.2;10021  letter-spacing: 0.005em;10022  color: var(--peach-t0);10023  margin-bottom: 6px;10024}10025.peach-pair-copy-listening .peach-pair-headline,10026.peach-pair-copy-chirping .peach-pair-headline,10027.peach-pair-copy-idle .peach-pair-headline {10028  font-family: inherit;10029  font-style: normal;10030  font-weight: 500;10031  font-size: 15px;10032  color: var(--peach-t0);10033  letter-spacing: 0;10034}10035.peach-pair-copy-paired .peach-pair-headline {10036  color: var(--peach-t0);10037  font-weight: 600;10038}10039.peach-pair-sub {10040  font-size: 12.5px;10041  line-height: 1.45;10042  color: var(--peach-t1);10043  max-width: 280px;10044  margin: 0 auto;10045  text-wrap: pretty;10046}1004710048/* Status action -------------------------------------------------------- */10049.peach-pair-action {10050  margin: 2px 4px 10px;10051  margin-top: auto;10052  display: flex;10053  flex-direction: column;10054  gap: 8px;10055}10056.peach-pair-action-waiting {10057  display: flex;10058  align-items: center;10059  justify-content: space-between;10060  gap: 12px;10061}10062.peach-pair-cancel {10063  min-width: 96px;10064}10065.peach-pair-listening {10066  display: inline-flex; align-items: center; gap: 4px;10067  font-family: var(--peach-mono, ui-monospace, monospace);10068  font-size: 9.5px;10069  text-transform: uppercase;10070  letter-spacing: 0.12em;10071  color: var(--peach-t1);10072  padding: 8px 10px;10073}10074.peach-pair-listen-dot {10075  width: 4px; height: 4px;10076  border-radius: 50%;10077  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);10078  animation: peach-pair-listen-pulse 1.2s ease-in-out infinite;10079}10080.peach-pair-listen-dot:nth-child(2) { animation-delay: 0.2s; }10081.peach-pair-listen-dot:nth-child(3) { animation-delay: 0.4s; }10082.peach-pair-listen-label { margin-left: 6px; }10083@keyframes peach-pair-listen-pulse {10084  0%, 100% { opacity: 0.25; transform: scale(0.9); }10085  50%      { opacity: 1;     transform: scale(1.15); }10086}1008710088.peach-pair-action-handshake {10089  display: flex;10090  flex-direction: column;10091  align-items: center;10092  gap: 8px;10093  padding: 8px 4px;10094}10095.peach-pair-meter {10096  width: 100%;10097  max-width: 280px;10098  height: 2px;10099  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);10100  border-radius: 2px;10101  position: relative;10102  overflow: hidden;10103}10104.peach-pair-meter-bar {10105  position: absolute;10106  top: 0; bottom: 0;10107  width: 30%;10108  left: -30%;10109  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);10110  animation: peach-pair-meter-sweep 1.4s ease-in-out infinite;10111}10112@keyframes peach-pair-meter-sweep {10113  0%   { left: -30%; }10114  100% { left: 100%; }10115}10116.peach-pair-meter-label {10117  font-family: var(--peach-mono, ui-monospace, monospace);10118  font-size: 9.5px;10119  text-transform: uppercase;10120  letter-spacing: 0.14em;10121  color: var(--peach-t1);10122}1012310124.peach-pair-action-paired {10125  display: flex;10126  align-items: center;10127  gap: 10px;10128}10129.peach-pair-device-confirm {10130  flex: 1;10131  display: inline-flex;10132  align-items: center;10133  gap: 8px;10134  padding: 9px 10px 9px 12px;10135  border-radius: 10px;10136  background: color-mix(in srgb, #76b6e8 12%, transparent);10137  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);10138  font-size: 12.5px;10139  color: var(--peach-t0);10140  min-width: 0;10141}10142.peach-pair-device-confirm-glyph {10143  display: inline-flex;10144  color: #76b6e8;10145}10146.peach-pair-device-confirm-name {10147  flex: 1;10148  overflow: hidden;10149  text-overflow: ellipsis;10150  white-space: nowrap;10151}10152.peach-pair-device-confirm-trust {10153  font-family: var(--peach-mono, ui-monospace, monospace);10154  font-size: 9.5px;10155  text-transform: uppercase;10156  letter-spacing: 0.1em;10157  color: #76b6e8;10158  padding: 2px 6px;10159  border-radius: 4px;10160  background: color-mix(in srgb, #76b6e8 14%, transparent);10161}10162.peach-pair-done {10163  min-width: 80px;10164}10165.peach-pair-retry {10166  align-self: center;10167  display: block;10168  margin: 6px auto 0;10169  min-width: 120px;10170}10171.peach-pair-mic-help {10172  font-size: 12px;10173  color: var(--peach-t1);10174  text-align: center;10175  max-width: 320px;10176  margin: 0 auto;10177}1017810179/* Rest state — bird stage at idle pose, primary CTA + paired list */10180.peach-pair-pair[data-phase="idle"] .peach-pair-stage {10181  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */10182  height: 160px;10183}10184.peach-pair-pair-start {10185  width: 100%;10186  display: inline-flex;10187  align-items: center;10188  justify-content: center;10189  gap: 8px;10190  padding: 11px 14px;10191  border-radius: 10px;10192  background: var(--peach-accent);10193  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);10194  color: #1a0905;10195  font-family: inherit;10196  font-size: 13px;10197  font-weight: 600;10198  letter-spacing: 0.01em;10199  cursor: pointer;10200  transition: filter 0.15s ease, transform 0.1s ease;10201}10202.peach-pair-pair-start:hover { filter: brightness(1.08); }10203.peach-pair-pair-start:active { transform: translateY(1px); }1020410205.peach-pair-paired-section {10206  margin-top: 14px;10207  display: flex;10208  flex-direction: column;10209  gap: 8px;10210}10211.peach-pair-paired-heading {10212  margin: 0;10213  font-family: var(--peach-mono, ui-monospace, monospace);10214  font-size: 10px;10215  font-weight: 500;10216  letter-spacing: 0.14em;10217  text-transform: uppercase;10218  color: var(--peach-t1);10219}1022010221/* Footer --------------------------------------------------------------- */10222.peach-pair-foot {10223  margin: 10px -4px -2px;10224  margin-top: auto;10225}10226.peach-pair-foot-divider {10227  height: 1px;10228  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);10229  margin-bottom: 10px;10230}10231.peach-pair-foot-text {10232  font-size: 11px;10233  line-height: 1.5;10234  color: var(--peach-t1);10235  text-align: center;10236  padding: 0 4px;10237  text-wrap: pretty;10238}1023910240/* Screen-reader-only live region. Kept off the visual flow but read by10241   assistive tech as the pairing phase advances. */10242.peach-sr-only {10243  position: absolute;10244  width: 1px; height: 1px;10245  padding: 0; margin: -1px;10246  overflow: hidden;10247  clip: rect(0, 0, 0, 0);10248  white-space: nowrap;10249  border: 0;10250}1025110252/* Reduced motion — stage simplifies to opacity transitions only */10253@media (prefers-reduced-motion: reduce) {10254  .peach-pair-bird-body,10255  .peach-pair-bird-head-group,10256  .peach-pair-bird-beak,10257  .peach-pair-bird-wing,10258  .peach-pair-bird-tuft,10259  .peach-pair-bird-tail,10260  .peach-pair-bird-eye-group,10261  .peach-pair-bird-aura,10262  .peach-pair-arc,10263  .peach-pair-flight-path,10264  .peach-pair-flight-path-2,10265  .peach-pair-dot-glow,10266  .peach-pair-dot-core,10267  .peach-pair-dot-ring,10268  .peach-pair-mote,10269  .peach-pair-meter-bar,10270  .peach-pair-listen-dot,10271  .peach-pair-bird-slot,10272  .peach-pair-bird-slot-mobile {10273    animation: none !important;10274    transition: opacity 0.2s linear !important;10275  }10276}1027710278/* ─────────────────────────────────────────────────────────────────10279   Settings → Sync surface. Wraps the same bird10280   animation used by the pairing flow with a paired-devices list and10281   the "Pair a device" CTA.10282   ───────────────────────────────────────────────────────────────── */10283.peach-pair-settings {10284  position: absolute;10285  inset: 0;10286  z-index: 3;10287  display: flex;10288  flex-direction: column;10289  gap: 18px;10290  padding: 14px 12px 12px;10291  width: 100%;10292  box-sizing: border-box;10293  overflow-y: auto;10294  overflow-x: hidden;10295  /* Same warm surface as the pairing screen — unifies the two views. */10296  background:10297    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),10298    var(--peach-bg);10299  color: var(--peach-t0);10300  isolation: isolate;10301  /* Hide native scrollbar — content fits 99% of the time and a chunky10302     gutter ruins the surface. */10303  scrollbar-width: none;10304  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;10305}10306.peach-pair-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }10307.peach-pair-settings::before {10308  content: '';10309  position: absolute;10310  inset: 0;10311  pointer-events: none;10312  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);10313  z-index: 0;10314}10315.peach-pair-settings > * { position: relative; z-index: 1; }1031610317.peach-pair-settings--pairing {10318  padding: 0;10319  align-items: stretch;10320  justify-content: stretch;10321  background: none;10322  isolation: auto;10323}10324.peach-pair-settings--pairing::before { display: none; }1032510326.peach-pair-settings-header {10327  display: flex;10328  align-items: center;10329  gap: 10px;10330}10331.peach-pair-settings-title {10332  margin: 0;10333  font-family: var(--font-display, Georgia, serif);10334  font-style: italic;10335  font-size: 24px;10336  font-weight: 500;10337  line-height: 1;10338  color: var(--peach-t0);10339  letter-spacing: 0.005em;10340}10341.peach-pair-settings-section {10342  margin: 6px 0 -4px;10343  font-size: 11px;10344  font-weight: 600;10345  letter-spacing: 0.08em;10346  text-transform: uppercase;10347  color: var(--peach-text-muted);10348}10349.peach-pair-settings-error {10350  font-size: 12px;10351  padding: 8px 10px;10352  border-radius: 8px;10353  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);10354  color: var(--peach-text);10355}10356.peach-pair-settings-footer {10357  margin-top: auto;10358  padding-top: 18px;10359  font-size: 11.5px;10360  line-height: 1.5;10361  color: var(--peach-text-muted);10362  text-align: center;10363}1036410365/* Hero card shown when no devices are paired yet. */10366.peach-pair-hero {10367  display: flex;10368  flex-direction: column;10369  align-items: center;10370  gap: 12px;10371  padding: 20px 12px 8px;10372  text-align: center;10373}10374.peach-pair-hero-svg {10375  display: block;10376  max-width: 100%;10377  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));10378}10379.peach-pair-hero-headline {10380  margin: 0;10381  font-family: var(--font-display, Georgia, serif);10382  font-style: italic;10383  font-size: 20px;10384  font-weight: 500;10385  line-height: 1.2;10386  letter-spacing: 0.005em;10387  color: var(--peach-t0);10388}10389.peach-pair-hero-sub {10390  margin: 0;10391  font-size: 13px;10392  line-height: 1.5;10393  color: var(--peach-t1);10394  max-width: 320px;10395  text-wrap: pretty;10396}1039710398.peach-pair-pair-cta {10399  display: flex;10400  justify-content: center;10401  padding: 4px 0 6px;10402}10403.peach-pair-pair-button {10404  display: inline-flex;10405  align-items: center;10406  gap: 8px;10407  min-width: 220px;10408  justify-content: center;10409}10410.peach-pair-pair-button-icon {10411  flex: 0 0 auto;10412}1041310414/* Paired devices list. Roomy rows that look at home next to the rest10415   of Settings; stale rows get a soft warm-warning border tint. */10416.peach-pair-device-list {10417  list-style: none;10418  margin: 0;10419  padding: 0;10420  display: flex;10421  flex-direction: column;10422  gap: 8px;10423}10424.peach-pair-device-row {10425  display: flex;10426  align-items: center;10427  gap: 12px;10428  padding: 12px;10429  border-radius: 10px;10430  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10431  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);10432}10433.peach-pair-device-row[data-stale="true"] {10434  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);10435}10436.peach-pair-device-icon {10437  width: 32px;10438  height: 32px;10439  display: flex;10440  align-items: center;10441  justify-content: center;10442  border-radius: 8px;10443  color: var(--peach-text);10444  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);10445}10446.peach-pair-device-info {10447  flex: 1;10448  display: flex;10449  flex-direction: column;10450  gap: 2px;10451  min-width: 0;10452}10453.peach-pair-device-name {10454  font-size: 14px;10455  font-weight: 600;10456  color: var(--peach-text);10457  overflow: hidden;10458  text-overflow: ellipsis;10459  white-space: nowrap;10460}10461.peach-pair-device-meta {10462  font-size: 11.5px;10463  color: var(--peach-text-muted);10464  display: flex;10465  flex-wrap: wrap;10466  align-items: center;10467  gap: 8px;10468}10469.peach-pair-device-badge {10470  font-size: 10.5px;10471  font-weight: 500;10472  letter-spacing: 0.02em;10473  padding: 2px 6px;10474  border-radius: 999px;10475  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);10476  color: var(--peach-text);10477}10478.peach-pair-device-stale {10479  font-size: 10.5px;10480  font-weight: 500;10481  color: var(--peach-warn, #d29257);10482}10483.peach-pair-device-remove {10484  flex: 0 0 auto;10485  color: var(--peach-text-muted);10486}10487.peach-pair-device-remove:hover {10488  color: var(--peach-danger, #c25b4a);10489}10490.peach-pair-unpair-confirm {10491  display: flex;10492  gap: 6px;10493  align-items: center;10494}1049510496/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */10497.peach-pair-pro-card {10498  position: relative;10499  margin: 18px 12px;10500  padding: 18px 20px 22px;10501  border-radius: 22px;10502  background:10503    radial-gradient(140% 90% at 50% 0%,10504      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,10505      transparent 60%),10506    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10507  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);10508  box-shadow:10509    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,10510    0 18px 40px -24px rgba(0, 0, 0, 0.45);10511  display: flex;10512  flex-direction: column;10513  align-items: center;10514  gap: 10px;10515  text-align: center;10516  overflow: hidden;10517}10518.peach-pair-pro-stage {10519  position: relative;10520  width: 220px;10521  height: 140px;10522  display: flex;10523  align-items: flex-end;10524  justify-content: center;10525  margin-bottom: 2px;10526}10527.peach-pair-pro-bird-slot {10528  width: 140px;10529  height: 132px;10530  display: flex;10531  align-items: flex-end;10532  justify-content: center;10533  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));10534}10535.peach-pair-pro-bird-slot .peach-pair-bird {10536  width: 100%;10537  height: 100%;10538}10539.peach-pair-pro-bird-slot .peach-pair-bird svg {10540  width: 100%;10541  height: 100%;10542  overflow: visible;10543}10544.peach-pair-pro-headline {10545  margin: 4px 0 0;10546  font-family: var(--font-display, "Cormorant Garamond", serif);10547  font-style: italic;10548  font-size: 19px;10549  font-weight: 500;10550  letter-spacing: 0.01em;10551  color: var(--peach-t0);10552  max-width: 280px;10553  line-height: 1.25;10554}10555.peach-pair-pro-body {10556  margin: 0;10557  font-size: 13px;10558  line-height: 1.55;10559  color: var(--peach-t1);10560  max-width: 300px;10561}10562.peach-pair-pro-cta {10563  margin-top: 4px;10564}10565.peach-pair-pro-foot {10566  margin: 2px 0 0;10567  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10568  font-size: 0.625rem;10569  letter-spacing: 0.08em;10570  text-transform: uppercase;10571  color: var(--peach-t2);10572  opacity: 0.75;10573}1057410575/* Shell border and shadow in light mode: match dark mode's near-invisible10576   border weight so the popup frame looks the same in both themes. */10577.light .peach-shell,10578.light .peach-screen {10579  border-color: rgba(26, 18, 8, 0.07);10580  box-shadow:10581    0 2px 8px rgba(80, 56, 32, 0.08),10582    0 14px 48px rgba(80, 56, 32, 0.10),10583    0 0 0 1px rgba(26, 18, 8, 0.04);10584}1058510586/* HOLE 4: the revoke confirmation carries its own disclosure, so it needs the10587   full row width rather than sitting inline beside the device name. */10588.peach-settings-row:has(> .peach-unpair-confirm) { flex-wrap: wrap; }10589.peach-unpair-confirm {10590  display: flex;10591  flex-direction: column;10592  gap: 8px;10593  width: 100%;10594}10595.peach-unpair-confirm-note {10596  margin: 0;10597  font-size: 0.6875rem;10598  line-height: 1.5;10599  color: var(--peach-t2);10600}1060110602/* Sync mode selector — three named choices (public / private / off). Replaces10603   the old binary "local network only" toggle; see docs/sync-lan-retirement.md. */10604.peach-sync-mode {10605  display: flex;10606  align-items: flex-start;10607  gap: 10px;10608  width: 100%;10609  text-align: left;10610  padding: 10px 12px;10611  margin-top: 8px;10612  border-radius: 10px;10613  border: 1px solid var(--peach-border);10614  background: color-mix(in srgb, var(--peach-t0) 3%, transparent);10615  color: var(--peach-t1);10616  cursor: pointer;10617  transition: border-color var(--peach-dur-80) var(--peach-curve-arrival),10618              background-color var(--peach-dur-80) var(--peach-curve-arrival);10619}10620.peach-sync-mode:hover:not(:disabled) {10621  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);10622}10623.peach-sync-mode.is-active {10624  border-color: var(--peach-accent);10625  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);10626}10627.peach-sync-mode:disabled { opacity: 0.6; cursor: default; }10628.peach-sync-mode-main { display: flex; flex-direction: column; gap: 3px; flex: 1; }10629.peach-sync-mode-title { font-size: 12px; }10630.peach-sync-mode-sub {10631  font-size: 11px;10632  line-height: 1.5;10633  color: var(--peach-t2);10634}10635.peach-sync-mode-pip {10636  flex: none;10637  margin-top: 3px;10638  width: 12px; height: 12px;10639  border-radius: 50%;10640  border: 1px solid var(--peach-t3);10641}10642.peach-sync-mode.is-active .peach-sync-mode-pip {10643  border-color: var(--peach-accent);10644  background:10645    radial-gradient(circle at 50% 50%, var(--peach-accent) 0 42%, transparent 44%);10646}10647.peach-sync-mode-disclosure {10648  margin: 10px 2px 0;10649  font-size: 11px;10650  line-height: 1.5;10651  color: var(--peach-t2);10652}10653.peach-sync-mode-warn { color: var(--peach-breach); }1065410655/* Compact form, used mid-pairing: a quiet line, not a decision to make. */10656.peach-sync-mode-summary {10657  margin: 8px 2px 0;10658  font-size: 11px;10659  color: var(--peach-t2);10660  text-align: center;10661}10662.peach-sync-mode-change {10663  background: none;10664  border: none;10665  padding: 0;10666  font: inherit;10667  color: var(--peach-accent);10668  text-decoration: underline;10669  cursor: pointer;10670}