popup.css

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