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/* Chirp-sync owns its own surface 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.peach-btn:focus-visible {943  outline: none;944  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);945}946947/* Lock button */948.peach-lock-icon { transform-origin: center; }949.peach-lock-btn { color: var(--peach-accent); }950.peach-lock-btn.is-locking .peach-lock-icon {951  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);952}953954/* Biometric unlock button */955.peach-biometric-btn {956  display: flex;957  align-items: center;958  justify-content: center;959  gap: 6px;960  margin-top: 8px;961  width: 100%;962}963964/* Copy button */965.peach-copy-btn {966  position: relative; overflow: hidden;967  color: var(--peach-t2); border-color: var(--peach-t3);968}969.peach-copy-icon {970  display: inline-flex; align-items: center; justify-content: center;971  position: relative; z-index: 1;972}973.peach-copy-icon-svg { display: block; }974.peach-copy-sheen {975  position: absolute; inset: 0;976  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%);977  opacity: 0; transform: scaleX(0.15); transform-origin: left center;978}979.peach-copy-btn.is-copied {980  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;981  box-shadow:982    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),983    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),984    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);985}986.peach-copy-btn.is-copied .peach-copy-icon {987  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;988}989.peach-copy-btn.is-copied .peach-copy-sheen {990  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;991}992.peach-copy-btn.is-retreat {993  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;994}995.peach-copy-btn.is-retreat .peach-copy-sheen {996  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;997}998.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }999.peach-copy-drain-bar {1000  display: block; width: 100%; height: 100%;1001  background: var(--peach-accent); opacity: 0.7;1002  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;1003}10041005/* Unlock screen elements */1006.peach-underline-input {1007  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);1008  padding: 6px 0; background: transparent; color: var(--peach-t0);1009  outline: none;1010  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1011  font-size: 0.8125rem;1012  caret-color: var(--peach-accent);1013}1014.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }1015.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }1016.peach-hint {1017  margin: 0;1018  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1019  font-size: 0.625rem; color: var(--peach-t2);1020}1021.peach-unlock-footer {1022  margin-top: 4px; display: flex; align-items: center; gap: 7px;1023  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1024  font-size: 0.625rem; color: var(--peach-t2);1025}1026.peach-unlock-footer--lock {1027  padding-top: 2px;1028}10291030/* Desktop helper (peach-sync) code pairing — additive hooks. The chirp pairing1031   classes (peach-chirp-*) carry the shared layout; these only style the parts1032   unique to the typed-code path. Inline styles cover the SAS/confirm gate. */1033.peach-desktop-pair { display: flex; flex-direction: column; }1034.peach-desktop-enter,1035.peach-desktop-searching,1036.peach-desktop-paired,1037.peach-desktop-error {1038  display: flex; flex-direction: column; gap: 8px;1039  padding: 4px 18px 16px; text-align: center; align-items: center;1040}1041.peach-desktop-enter .peach-label { align-self: flex-start; }1042.peach-code-input {1043  text-align: center; letter-spacing: 0.42em; padding-left: 0.42em;1044}1045.peach-code-input::placeholder { letter-spacing: 0.42em; }10461047/* Breach badge */1048.peach-breach-badge {1049  display: flex;1050  position: relative;1051  z-index: 1;1052  align-items: center;1053  gap: 7px;1054  font-size: 0.5625rem;1055  color: var(--peach-breach);1056  padding: 5px 10px;1057  margin-bottom: 4px;1058  border-radius: 8px;1059  background: rgba(220, 80, 60, 0.07);1060  border: 1px solid rgba(220, 80, 60, 0.18);1061  letter-spacing: 0.04em;1062}10631064.peach-password-value.is-breached {1065  color: rgba(220, 80, 60, 0.75);1066  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1067}10681069/* ── Overlay views ─────────────────────────────────────────────────── */1070.peach-overlay-view {1071  position: absolute;1072  inset: 0;1073  display: flex;1074  flex-direction: column;1075  background:1076    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1077    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1078    var(--peach-bg);1079  z-index: 2;1080  overflow: hidden;1081  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1082}10831084.peach-overlay-view:has(.stk-shell) {1085  background: var(--peach-bg);1086}1087@keyframes overlay-in {1088  from { opacity: 0; transform: translateY(8px); }1089  to   { opacity: 1; transform: translateY(0); }1090}1091.peach-overlay-view.ov-enter-up {1092  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1093}1094.peach-overlay-view.ov-exit-up {1095  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1096}1097.peach-overlay-view.ov-enter-right {1098  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1099}1100.peach-overlay-view.ov-exit-right {1101  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1102}11031104@keyframes ov-enter-up {1105  from { opacity: 0; transform: translateY(18px); }1106  to   { opacity: 1; transform: translateY(0); }1107}1108@keyframes ov-exit-up {1109  from { opacity: 1; transform: translateY(0); }1110  to   { opacity: 0; transform: translateY(-12px); }1111}1112@keyframes ov-enter-right {1113  from { opacity: 0; transform: translateX(20px); }1114  to   { opacity: 1; transform: translateX(0); }1115}1116@keyframes ov-exit-right {1117  from { opacity: 1; transform: translateX(0); }1118  to   { opacity: 0; transform: translateX(20px); }1119}11201121/* Overlay shared header */1122.peach-overlay-header {1123  padding: 10px 12px 8px;1124  display: flex;1125  align-items: center;1126  gap: 10px;1127  flex-shrink: 0;1128}1129/* Back button — circular pill matching the settings stack masthead (.stk-back) */1130.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1131  width: 28px;1132  height: 28px;1133  flex: 0 0 28px;1134  border-radius: 999px;1135  border: 1px solid var(--peach-border);1136  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1137  color: var(--peach-t1);1138  padding: 0;1139}1140.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1141  color: var(--peach-t0);1142  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1143  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1144}1145.peach-overlay-title {1146  font-family: var(--font-display);1147  font-style: italic;1148  font-weight: 400;1149  font-size: 20px;1150  line-height: 1;1151  color: var(--peach-t0);1152  flex: 1;1153  text-align: center;1154}1155/* Balances the 28px back button so the title stays visually centred */1156.peach-overlay-spacer {1157  width: 28px;1158  flex: 0 0 28px;1159}11601161.peach-overlay-card {1162  background: var(--peach-s1);1163  border: 1px solid var(--peach-t3);1164  border-radius: 12px;1165  overflow: hidden;1166  width: 100%;1167}11681169.peach-onboarding-alt-actions {1170  display: flex;1171  flex-direction: column;1172  gap: 4px;1173  padding: 0;1174}11751176.peach-settings-copy {1177  margin: 0 0 10px;1178  font-size: 0.6875rem;1179  line-height: 1.5;1180  color: var(--peach-t2);1181}11821183.peach-settings-copy strong {1184  color: var(--peach-t0);1185}11861187.peach-settings-copy--spacious {1188  margin-bottom: 12px;1189}11901191.peach-settings-copy--result {1192  color: var(--peach-accent);1193  font-size: 0.8125rem;1194  text-align: center;1195  padding: 8px 0;1196}11971198.peach-settings-copy--danger {1199  color: var(--peach-breach);1200}12011202.peach-settings-copy--success {1203  color: var(--peach-accent);1204}12051206.peach-inline-feedback {1207  font-size: 0.6875rem;1208  margin: 10px 0 0;1209}12101211.peach-inline-feedback--ok {1212  color: var(--peach-accent);1213}12141215.peach-inline-feedback--error {1216  color: var(--peach-breach);1217}12181219.peach-inline-feedback--muted {1220  color: var(--peach-t2);1221  font-size: 0.625rem;1222  margin: 4px 0;1223}12241225.peach-inline-feedback--spaced {1226  margin-top: 12px;1227}12281229.peach-settings-actions--row {1230  display: flex;1231  gap: 6px;1232}12331234.peach-settings-actions--end {1235  margin-top: 14px;1236  justify-content: flex-end;1237}12381239.peach-settings-stack {1240  display: flex;1241  flex-direction: column;1242  gap: 6px;1243}12441245.peach-settings-stack--tight {1246  gap: 4px;1247}12481249.peach-settings-stack--spacious {1250  gap: 8px;1251}12521253.peach-settings-input {1254  width: 100%;1255  box-sizing: border-box;1256  padding: 8px 10px;1257  background: rgba(0, 0, 0, 0.22);1258  border: 1px solid transparent;1259  border-radius: 6px;1260  color: var(--peach-t0);1261  font-family: var(--font-ui);1262  font-size: 0.75rem;1263  outline: none;1264  transition: border-color 120ms ease, background 120ms ease;1265}12661267.peach-settings-input:focus {1268  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1269  background: rgba(0, 0, 0, 0.28);1270}12711272.peach-settings-input[type="password"] {1273  font-family: var(--font-mono);1274  letter-spacing: 0.04em;1275}12761277.peach-hidden-file-input {1278  display: none;1279}12801281.peach-checkbox-note {1282  display: flex;1283  align-items: flex-start;1284  gap: 8px;1285  font-size: 0.6875rem;1286  color: var(--peach-t1);1287  cursor: pointer;1288  margin: 12px 0;1289}12901291.peach-checkbox-note input {1292  margin-top: 1px;1293}12941295.peach-danger-notice {1296  background: rgba(220, 80, 60, 0.08);1297  border: 1px solid rgba(220, 80, 60, 0.2);1298  border-radius: 6px;1299  padding: 9px 11px;1300  font-size: 0.6875rem;1301  color: var(--peach-t1);1302  line-height: 1.5;1303}13041305.peach-info-notice {1306  font-size: 0.6875rem;1307  color: var(--peach-t1);1308  line-height: 1.5;1309  background: var(--surface-card);1310  border: 1px solid var(--peach-t3);1311  border-radius: 6px;1312  padding: 8px 10px;1313}13141315.peach-info-notice--warn {1316  border-color: rgba(220, 38, 38, 0.4);1317  background: rgba(220, 38, 38, 0.06);1318  color: rgba(220, 38, 38, 0.92);1319  margin-bottom: 8px;1320}13211322/* Warm helpful-context note — reads as a soft aside, not an alert. */1323.peach-info-notice--note {1324  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);1325  border-color: color-mix(in srgb, var(--peach-accent) 18%, transparent);1326  color: var(--peach-t2);1327}13281329.peach-strength-row {1330  display: flex;1331  align-items: center;1332  gap: 8px;1333  margin-bottom: 10px;1334}13351336.peach-strength-track {1337  flex: 1;1338  height: 4px;1339  background: var(--peach-s2);1340  border-radius: 2px;1341  overflow: hidden;1342}13431344.peach-strength-fill {1345  height: 100%;1346  border-radius: 2px;1347  transition: width 120ms ease, background 120ms ease;1348}13491350/* ── Type selector tabs ── */1351.peach-type-tabs {1352  display: flex;1353  gap: 0;1354  background: var(--peach-t4);1355  border-radius: 8px;1356  padding: 3px;1357}13581359.peach-type-tab {1360  flex: 1;1361  display: flex;1362  align-items: center;1363  justify-content: center;1364  gap: 6px;1365  padding: 6px 10px;1366  border-radius: 6px;1367  border: none;1368  background: transparent;1369  cursor: pointer;1370  font-family: Inter, system-ui, sans-serif;1371  font-size: 0.6875rem;1372  font-weight: 400;1373  letter-spacing: 0.04em;1374  color: var(--peach-t1);1375  transition: background 150ms ease, color 150ms ease;1376}13771378.peach-type-tab.is-active {1379  background: var(--peach-s2);1380  color: var(--peach-t0);1381  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1382}13831384.peach-type-tab:not(.is-active):hover {1385  color: var(--peach-t0);1386}13871388.peach-type-tab svg {1389  opacity: 0.7;1390  flex-shrink: 0;1391}13921393.peach-type-tab.is-active svg {1394  opacity: 1;1395}13961397/* ── List view ───────────────────────────────────────────────────────── */1398.peach-list-top {1399  padding: 0 10px;1400  min-height: 46px;1401  display: flex;1402  align-items: center;1403  gap: 6px;1404  border-bottom: 1px solid var(--peach-t3);1405  flex-shrink: 0;1406  background: var(--peach-s1);1407}14081409.peach-vault-list {1410  flex: 1;1411  overflow-y: auto;1412  scrollbar-width: none;1413}1414.peach-vault-list::-webkit-scrollbar { display: none; }14151416/* Scrollbar — vault list */1417.peach-vault-list {1418  scrollbar-width: thin;1419  scrollbar-color: var(--peach-t3) transparent;1420}14211422.peach-vault-list::-webkit-scrollbar {1423  width: 3px;1424}14251426.peach-vault-list::-webkit-scrollbar-thumb {1427  background: var(--peach-t3);1428  border-radius: 2px;1429}14301431.peach-entry-row {1432  width: 100%;1433  display: flex;1434  align-items: center;1435  gap: 10px;1436  padding: 9px 16px;1437  background: transparent;1438  border: none;1439  border-bottom: 1px solid var(--peach-t3);1440  cursor: pointer;1441  color: inherit;1442  text-align: left;1443  transition: background 80ms ease;1444}1445.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1446.peach-entry-row:last-child { border-bottom: none; }1447.peach-entry-row.is-active {1448  box-shadow: inset 2px 0 0 var(--peach-accent);1449  background: rgba(240,232,216,0.03);1450}1451.peach-entry-row:focus-visible {1452  outline: none;1453  box-shadow: 0 0 0 1px var(--peach-border-accent);1454  background: rgba(240,232,216,0.03);1455}1456.peach-entry-row-icon {1457  width: 26px; height: 26px;1458  border-radius: 7px;1459  border: 1px solid var(--peach-t3);1460  display: flex; align-items: center; justify-content: center;1461  color: var(--peach-t2);1462  flex-shrink: 0;1463}1464.peach-entry-row-icon.is-breach {1465  border-color: rgba(220,80,60,0.3);1466  color: rgba(220,80,60,0.7);1467}14681469/* Title-initials chip used as the favicon fallback for login entries whose1470 * real favicon hasn't been cached by the browser yet (freshly-imported,1471 * never-visited domains). Background colour is hashed from the title so1472 * the same entry always shows the same chip. The chip fits the same1473 * 26×26 row icon slot the favicon would take. */1474.peach-favicon-initials {1475  display: inline-flex;1476  align-items: center;1477  justify-content: center;1478  width: 100%;1479  height: 100%;1480  border-radius: 4px;1481  font-family: "IBM Plex Mono", monospace;1482  font-size: 0.5625rem;1483  font-weight: 600;1484  letter-spacing: 0.04em;1485  color: rgba(240, 232, 216, 0.92);1486  text-transform: uppercase;1487  user-select: none;1488}1489.peach-entry-row-info { flex: 1; min-width: 0; }1490.peach-entry-row-name {1491  display: block;1492  font-family: var(--font-display);1493  font-size: 1.0625rem;1494  font-style: italic;1495  font-weight: 400;1496  color: var(--peach-t0);1497  line-height: 1.2;1498  white-space: nowrap;1499  overflow: hidden;1500  text-overflow: ellipsis;1501}1502.peach-entry-row-meta {1503  display: block;1504  font-family: "IBM Plex Mono", monospace;1505  font-size: 0.5625rem;1506  color: var(--peach-t2);1507  margin-top: 1px;1508  letter-spacing: 0.05em;1509}1510.peach-entry-row-dot {1511  width: 5px; height: 5px;1512  border-radius: 50%;1513  background: rgba(220,80,60,0.7);1514  flex-shrink: 0;1515}1516.peach-new-entry-row {1517  display: flex;1518  align-items: center;1519  justify-content: center;1520  gap: 6px;1521  width: 100%;1522  padding: 11px;1523  background: transparent;1524  border: none;1525  border-top: 1px solid var(--peach-t3);1526  color: var(--peach-t2);1527  font-family: "IBM Plex Mono", monospace;1528  font-size: 0.5625rem;1529  text-transform: uppercase;1530  letter-spacing: 0.14em;1531  cursor: pointer;1532  flex-shrink: 0;1533  transition: color 120ms ease, background 120ms ease;1534}1535.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }15361537/* ── Multi-select mode ─────────────────────────────────────────────── */15381539/* Select-mode trigger button in sort bar — same shape as trash btn */1540.peach-sort-select-btn {1541  display: flex;1542  align-items: center;1543  justify-content: center;1544  padding: 3px 5px;1545  background: transparent;1546  border: none;1547  cursor: pointer;1548  color: var(--peach-t2);1549  border-radius: 4px;1550  transition: color 140ms ease, background 140ms ease;1551}1552.peach-sort-select-btn:hover {1553  color: var(--peach-t1);1554  background: var(--peach-t3);1555}15561557/* Sort bar in select mode */1558.peach-select-cancel-btn {1559  background: transparent;1560  border: none;1561  padding: 0 4px;1562  cursor: pointer;1563  font-family: "IBM Plex Mono", monospace;1564  font-size: 0.5625rem;1565  letter-spacing: 0.12em;1566  text-transform: uppercase;1567  color: var(--peach-t2);1568  transition: color 140ms ease;1569  flex-shrink: 0;1570}1571.peach-select-cancel-btn:hover { color: var(--peach-t0); }15721573.peach-select-count-label {1574  flex: 1;1575  text-align: center;1576  font-family: "IBM Plex Mono", monospace;1577  font-size: 0.5625rem;1578  letter-spacing: 0.14em;1579  text-transform: uppercase;1580  color: var(--peach-t1);1581}15821583.peach-select-all-btn {1584  background: transparent;1585  border: none;1586  padding: 0 4px;1587  cursor: pointer;1588  font-family: "IBM Plex Mono", monospace;1589  font-size: 0.5625rem;1590  letter-spacing: 0.12em;1591  text-transform: uppercase;1592  color: var(--peach-t2);1593  transition: color 140ms ease;1594  flex-shrink: 0;1595}1596.peach-select-all-btn:hover { color: var(--peach-accent); }15971598/* List in select mode */1599.peach-vault-list.is-selecting .peach-entry-row {1600  cursor: default;1601}1602.peach-vault-list.is-selecting .peach-entry-row:hover {1603  background: rgba(240,232,216,0.02);1604}1605.peach-vault-list.is-selecting .peach-entry-row.is-selected {1606  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1607}1608.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1609  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1610}16111612/* Select indicator circles in icon slot */1613.peach-entry-row-icon.is-select-icon {1614  color: var(--peach-t2);1615}1616.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1617  color: var(--peach-accent);1618}16191620/* Delete action bar at bottom (replaces new-entry row) */1621.peach-select-action-bar {1622  display: flex;1623  align-items: center;1624  justify-content: center;1625  gap: 7px;1626  width: 100%;1627  padding: 11px;1628  background: transparent;1629  border: none;1630  border-top: 1px solid var(--peach-t3);1631  color: var(--peach-t1);1632  font-family: "IBM Plex Mono", monospace;1633  font-size: 0.5625rem;1634  text-transform: uppercase;1635  letter-spacing: 0.14em;1636  cursor: pointer;1637  flex-shrink: 0;1638  transition: color 120ms ease, background 120ms ease;1639}1640.peach-select-action-bar:not(:disabled):hover {1641  color: var(--peach-t0);1642  background: rgba(220,80,60,0.06);1643}1644.peach-select-action-bar:not(:disabled):hover svg {1645  stroke: rgba(220,80,60,0.8);1646}1647.peach-select-action-bar:disabled,1648.peach-select-action-bar.is-empty {1649  color: var(--peach-t2);1650  cursor: default;1651  opacity: 0.5;1652}1653.peach-search-counter-list {1654  white-space: nowrap;1655  flex-shrink: 0;1656}1657.peach-list-empty {1658  min-height: 180px;1659  display: grid;1660  place-items: center;1661  color: var(--peach-t2);1662  font-family: "IBM Plex Mono", monospace;1663  font-size: 0.6875rem;1664}16651666/* ── Settings view ───────────────────────────────────────────────────── */1667.peach-settings-body {1668  flex: 1;1669  overflow-y: auto;1670  min-height: 0;1671  display: flex;1672  flex-direction: column;1673  padding: 2px 0 10px;1674}1675.peach-settings-group {1676  margin: 4px 10px;1677  padding: 9px 14px 11px;1678  border-radius: 12px;1679  border: 1px solid rgba(255, 255, 255, 0.07);1680  background: rgba(26, 20, 16, 0.60);1681  backdrop-filter: blur(10px) saturate(1.3);1682  -webkit-backdrop-filter: blur(10px) saturate(1.3);1683}16841685.peach-settings-group + .peach-settings-group {1686  margin-top: 6px;1687}16881689@supports not (backdrop-filter: blur(1px)) {1690  .peach-settings-group {1691    background: rgba(26, 20, 16, 0.90);1692    border-color: rgba(255, 255, 255, 0.09);1693    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1694  }1695}16961697.light .peach-settings-group,1698[data-theme="light"] .peach-settings-group {1699  background: rgba(245, 237, 226, 0.70);1700  border-color: rgba(26, 18, 8, 0.08);1701  backdrop-filter: blur(10px) saturate(1.2);1702  -webkit-backdrop-filter: blur(10px) saturate(1.2);1703}17041705@supports not (backdrop-filter: blur(1px)) {1706  .light .peach-settings-group,1707  [data-theme="light"] .peach-settings-group {1708    background: rgba(245, 237, 226, 0.97);1709    border-color: rgba(26, 18, 8, 0.10);1710  }1711}1712.peach-export-intro {1713  padding-bottom: 8px;1714}1715.peach-export-card {1716  display: grid;1717  gap: 10px;1718}1719.peach-rune-canvas {1720  border-radius: 8px;1721  background: rgba(0, 0, 0, 0.22);1722  flex: 1;1723  align-self: center;1724}1725.peach-script-input {1726  font-family: "PeachScript", monospace;1727  font-size: 0.6875rem;1728  line-height: 1.9;1729  letter-spacing: 0.06em;1730  color: var(--peach-t0);1731  background: rgba(0, 0, 0, 0.22);1732  border: none;1733  border-radius: 6px;1734  padding: 12px;1735  width: 100%;1736  min-height: 96px;1737  resize: vertical;1738  word-break: break-all;1739  scrollbar-width: none;1740  -ms-overflow-style: none;1741}17421743.peach-script-input::-webkit-scrollbar { display: none; }1744.peach-csv-warning {1745  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1746  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1747  color: var(--peach-t0);1748  border-radius: 6px;1749  padding: 10px 12px;1750  margin-bottom: 8px;1751  font-size: 0.75rem;1752  line-height: 1.45;1753}1754.peach-export-card--primary {1755  background:1756    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1757}17581759/* Export menu — distribute the three format cards across the popup. */1760.peach-export-menu {1761  display: flex;1762  flex-direction: column;1763  flex: 1;1764  min-height: 0;1765}1766.peach-export-menu .peach-settings-group {1767  flex: 1;1768  display: flex;1769  flex-direction: column;1770  justify-content: center;1771  gap: 10px;1772}17731774/* Result view — the script-string fills the remaining vertical surface. */1775.peach-export-result-group {1776  flex: 1;1777  display: flex;1778  flex-direction: column;1779  min-height: 0;1780  border-bottom: none;1781}1782.peach-export-result-group .peach-export-card {1783  flex: 1;1784  min-height: 0;1785  display: flex;1786  flex-direction: column;1787  gap: 10px;1788}1789.peach-export-result-group .peach-export-card-copy {1790  flex-shrink: 0;1791}1792.peach-export-result-group .peach-settings-label {1793  flex-shrink: 0;1794}1795.peach-export-result-group button {1796  flex-shrink: 0;1797}1798.peach-export-card-head {1799  display: flex;1800  align-items: center;1801  justify-content: space-between;1802  gap: 10px;1803}1804.peach-export-card-copy {1805  margin: 0;1806  font-size: 0.75rem;1807  line-height: 1.55;1808  color: var(--peach-t1);1809}1810.peach-export-note {1811  margin: 0;1812  font-size: 0.625rem;1813  line-height: 1.5;1814  color: var(--peach-t2);1815}1816.peach-export-strength-track {1817  height: 3px;1818  background: var(--peach-border);1819  border-radius: 2px;1820  margin: 4px 0 2px;1821  overflow: hidden;1822}1823.peach-export-strength-fill {1824  height: 100%;1825  border-radius: 2px;1826  transition: width 250ms ease, background 250ms ease;1827}1828.peach-export-strength-warn {1829  margin: 0;1830  font-size: 0.625rem;1831  line-height: 1.5;1832  color: #e84040;1833  font-family: "IBM Plex Mono", monospace;1834}1835.peach-export-strength-hint {1836  margin: 0;1837  font-size: 0.625rem;1838  line-height: 1.5;1839  color: var(--peach-t2);1840  font-family: "IBM Plex Mono", monospace;1841}1842.peach-export-pill {1843  display: inline-flex;1844  align-items: center;1845  padding: 4px 8px;1846  border-radius: 999px;1847  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1848  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1849  color: var(--peach-accent);1850  font-family: "IBM Plex Mono", monospace;1851  font-size: 0.5rem;1852  letter-spacing: 0.12em;1853  text-transform: uppercase;1854  white-space: nowrap;1855}1856.peach-export-pill--danger {1857  border-color: rgba(220,80,60,0.22);1858  background: rgba(220,80,60,0.08);1859  color: var(--peach-breach);1860}1861.peach-settings-label {1862  margin: 0 0 6px;1863  font-family: "IBM Plex Mono", monospace;1864  font-size: 0.5rem;1865  text-transform: uppercase;1866  letter-spacing: 0.18em;1867  color: var(--peach-t2);1868}1869.peach-settings-row {1870  display: flex;1871  align-items: center;1872  justify-content: space-between;1873  gap: 12px;1874  min-height: 34px;1875  padding: 6px 0;1876  font-size: 0.8125rem;1877  color: var(--peach-t1);1878}1879.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1880.peach-settings-value {1881  font-family: "IBM Plex Mono", monospace;1882  font-size: 0.625rem;1883  color: var(--peach-t2);1884}18851886.peach-settings-value--status {1887  display: flex;1888  align-items: center;1889  gap: 6px;1890}18911892.peach-settings-link {1893  font-family: "IBM Plex Mono", monospace;1894  font-size: 0.625rem;1895  color: var(--peach-accent);1896  text-decoration: none;1897  cursor: pointer;1898}1899.peach-settings-link:hover {1900  text-decoration: underline;1901}19021903.peach-settings-row--stack {1904  flex-direction: column;1905  align-items: stretch;1906  gap: 6px;1907}19081909.peach-settings-row--top {1910  align-items: flex-start;1911}19121913.peach-settings-row-main {1914  display: flex;1915  flex-direction: column;1916  gap: 4px;1917  flex: 1;1918}1919.peach-toggle {1920  width: 28px; height: 16px;1921  border-radius: 999px;1922  background: var(--peach-t3);1923  border: 1px solid var(--peach-t3);1924  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1925  flex-shrink: 0;1926  transition: background 200ms ease, border-color 200ms ease;1927  cursor: pointer;1928}1929.peach-toggle.is-on {1930  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1931  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1932}1933.peach-toggle-knob {1934  width: 10px; height: 10px;1935  border-radius: 50%;1936  background: var(--peach-t2);1937  flex-shrink: 0;1938  transform: translateX(0px);1939  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1940}1941.peach-toggle.is-on .peach-toggle-knob {1942  background: var(--peach-accent);1943  transform: translateX(12px);1944}1945.peach-settings-footer {1946  display: flex;1947  align-items: center;1948  gap: 8px;1949  margin-top: auto;1950  padding: 14px 16px 8px;1951  font-family: "IBM Plex Mono", monospace;1952  font-size: 0.5625rem;1953  color: var(--peach-t2);1954}19551956/* ── Settings home navigation ──────────────────────────────────────────── */1957.peach-settings-nav-label {1958  margin: 0 0 2px;1959  padding: 12px 16px 4px;1960  font-family: "IBM Plex Mono", monospace;1961  font-size: 0.5rem;1962  text-transform: uppercase;1963  letter-spacing: 0.18em;1964  color: var(--peach-t2);1965}19661967.peach-settings-cat-row {1968  display: flex;1969  align-items: center;1970  gap: 10px;1971  width: 100%;1972  padding: 9px 16px;1973  background: none;1974  border: none;1975  border-bottom: 1px solid var(--peach-t3);1976  cursor: pointer;1977  text-align: left;1978  color: inherit;1979  transition: background var(--peach-dur-80) ease;1980}1981.peach-settings-cat-row:hover {1982  background: var(--peach-t3);1983}1984.peach-settings-cat-row:last-child {1985  border-bottom: none;1986}19871988.peach-settings-cat-icon {1989  width: 28px;1990  height: 28px;1991  border-radius: 7px;1992  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1993  color: var(--peach-accent);1994  display: flex;1995  align-items: center;1996  justify-content: center;1997  flex-shrink: 0;1998}1999/* Light theme: peach-on-cream is too low-contrast — both colors are warm.2000   Darken the icon stroke to ink and bump the bg tint so the icon reads2001   sharply while the cell still feels accent-tinted. */2002.light .peach-settings-cat-icon {2003  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);2004  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));2005}20062007.peach-settings-cat-content {2008  flex: 1;2009  display: flex;2010  flex-direction: column;2011  gap: 2px;2012  min-width: 0;2013}20142015.peach-settings-cat-name {2016  font-size: 0.8125rem;2017  font-weight: 450;2018  color: var(--peach-t0);2019  line-height: 1.2;2020}20212022.peach-settings-cat-desc {2023  font-size: 0.625rem;2024  color: var(--peach-t2);2025  line-height: 1.3;2026  white-space: nowrap;2027  overflow: hidden;2028  text-overflow: ellipsis;2029}20302031.peach-settings-cat-chevron {2032  color: var(--peach-t2);2033  flex-shrink: 0;2034  opacity: 0.5;2035}20362037/* ── Settings sub-view section labels ──────────────────────────────────── */2038.peach-settings-sub-label {2039  margin: 12px 0 4px;2040  font-family: "IBM Plex Mono", monospace;2041  font-size: 0.5rem;2042  text-transform: uppercase;2043  letter-spacing: 0.18em;2044  color: var(--peach-t2);2045}2046.peach-settings-sub-label:first-child {2047  margin-top: 4px;2048}20492050/* ── Settings: collapsible Advanced section ─────────────────────────────── */2051.peach-settings-advanced-toggle {2052  display: flex;2053  align-items: center;2054  justify-content: space-between;2055  width: 100%;2056  background: none;2057  border: none;2058  cursor: pointer;2059  padding: 12px 0 4px;2060  margin: 0;2061  color: inherit;2062}2063.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {2064  color: var(--peach-t1);2065}2066.peach-settings-advanced-chevron {2067  font-size: 0.5625rem;2068  color: var(--peach-t3);2069  letter-spacing: 0;2070  transition: color 120ms ease;2071}20722073/* ── Feedback form ──────────────────────────────────────────────────────── */2074.peach-feedback-group {2075  flex: 1;2076  display: flex;2077  flex-direction: column;2078  border-bottom: none;2079}20802081.peach-feedback-intro {2082  margin: 4px 0 14px;2083  font-size: 0.75rem;2084  line-height: 1.55;2085  color: var(--peach-t1);2086}20872088.peach-feedback-chips {2089  display: flex;2090  flex-wrap: wrap;2091  gap: 6px;2092  margin-bottom: 14px;2093}20942095.peach-feedback-chip {2096  padding: 4px 10px;2097  border-radius: 999px;2098  border: 1px solid var(--peach-t3);2099  background: none;2100  color: var(--peach-t2);2101  font-size: 0.6875rem;2102  font-family: var(--font-ui);2103  cursor: pointer;2104  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2105    background var(--peach-dur-80) ease;2106}2107.peach-feedback-chip:hover {2108  border-color: var(--peach-t2);2109  color: var(--peach-t1);2110}2111.peach-feedback-chip.is-active {2112  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);2113  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));2114  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);2115  box-shadow:2116    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),2117    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);2118  font-weight: 700;2119}21202121.peach-feedback-textarea {2122  flex: 1;2123  width: 100%;2124  min-height: 120px;2125  box-sizing: border-box;2126  background: rgba(0, 0, 0, 0.22);2127  border: 1px solid transparent;2128  border-radius: 6px;2129  color: var(--peach-t0);2130  font-size: 0.75rem;2131  font-family: var(--font-ui);2132  line-height: 1.5;2133  padding: 8px 10px;2134  resize: none;2135  outline: none;2136  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2137}2138.peach-feedback-textarea:focus {2139  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2140  background: rgba(0, 0, 0, 0.28);2141}2142.peach-feedback-textarea:focus {2143  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2144}2145.peach-feedback-textarea::placeholder {2146  color: var(--peach-t2);2147}21482149.peach-feedback-meta {2150  margin: 6px 0 0;2151  font-size: 0.625rem;2152  color: var(--peach-t2);2153  font-family: "IBM Plex Mono", monospace;2154}21552156.peach-feedback-result {2157  margin: 8px 0 0;2158  font-size: 0.6875rem;2159  font-family: "IBM Plex Mono", monospace;2160}2161.peach-feedback-result--ok { color: var(--peach-sync-ok); }2162.peach-feedback-result--err { color: var(--peach-breach); }21632164.peach-feedback-submit {2165  width: 100%;2166  margin-top: 12px;2167  justify-content: center;2168}21692170.peach-feedback-anon {2171  margin: 8px 0 0;2172  font-size: 0.625rem;2173  color: var(--peach-t2);2174  text-align: center;2175}21762177.peach-feedback-thanks {2178  margin: auto 0;2179  padding: 18px 14px;2180  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);2181  border-radius: 8px;2182  background:2183    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),2184    rgba(0, 0, 0, 0.18);2185  color: var(--peach-t1);2186  text-align: center;2187}21882189.peach-feedback-thanks p {2190  margin: 0;2191  font-size: 0.75rem;2192  line-height: 1.5;2193}21942195.peach-feedback-thanks-title {2196  color: var(--peach-t0);2197  font-family: "Cormorant Garamond", serif;2198  font-size: 1.375rem !important;2199  line-height: 1.1 !important;2200  margin-bottom: 8px !important;2201}22022203.peach-passkey-badge {2204  margin-left: 8px;2205  font-size: 0.625rem;2206  letter-spacing: 0.06em;2207  text-transform: uppercase;2208  color: var(--peach-t2);2209  font-family: var(--font-ui);2210  vertical-align: middle;2211}22122213.peach-passkey-delete-btn {2214  color: var(--peach-breach);2215  border-color: rgba(229, 85, 85, 0.25);2216}22172218.peach-passkey-delete-confirm {2219  display: flex;2220  align-items: center;2221  gap: 8px;2222  padding: 8px 10px;2223  background: rgba(229, 85, 85, 0.06);2224  border: 1px solid rgba(229, 85, 85, 0.2);2225  border-radius: 6px;2226}22272228.peach-passkey-delete-confirm-copy {2229  flex: 1;2230  font-size: 0.6875rem;2231  color: var(--peach-t1);2232}22332234.peach-passkey-delete-btn--confirm {2235  color: var(--peach-breach);2236  border-color: rgba(229, 85, 85, 0.4);2237}22382239.peach-passkey-activity {2240  flex-direction: column;2241  align-items: flex-start;2242  gap: 4px;2243}22442245.peach-passkey-meta {2246  font-size: 0.6875rem;2247  color: var(--peach-t2);2248}22492250.peach-passkey-actions {2251  position: relative;2252  z-index: 1;2253  margin-top: 14px;2254  display: flex;2255  flex-direction: column;2256  gap: 8px;2257}22582259.peach-passkey-approval {2260  display: flex;2261  flex-direction: column;2262  align-items: center;2263  padding: 16px 20px 14px;2264  gap: 8px;2265  text-align: center;2266}22672268.peach-passkey-approval-icon {2269  width: 36px;2270  height: 36px;2271  border-radius: 10px;2272  background: var(--peach-s2);2273  border: 1px solid var(--peach-t3);2274  display: flex;2275  align-items: center;2276  justify-content: center;2277  flex-shrink: 0;2278  color: var(--peach-accent);2279}22802281.peach-passkey-approval-icon img,2282.peach-passkey-approval-icon svg {2283  width: 22px;2284  height: 22px;2285  border-radius: 5px;2286}22872288.peach-passkey-approval-rp {2289  font-family: var(--font-ui);2290  font-size: 0.75rem;2291  color: var(--peach-t2);2292  letter-spacing: 0.03em;2293}22942295.peach-passkey-approval-action {2296  font-family: var(--font-display);2297  font-style: italic;2298  font-weight: 300;2299  font-size: 18px;2300  color: var(--peach-t0);2301  line-height: 1.1;2302  margin: 1px 0;2303}23042305.peach-passkey-approval-user {2306  font-family: var(--font-mono);2307  font-size: 0.6875rem;2308  color: var(--peach-t1);2309  background: var(--peach-s2);2310  border: 1px solid var(--peach-t3);2311  border-radius: 4px;2312  padding: 3px 8px;2313}23142315.peach-passkey-approval-notice {2316  font-size: 0.625rem;2317  color: var(--peach-t2);2318  line-height: 1.5;2319  max-width: 220px;2320}23212322.peach-passkey-approval-actions {2323  display: flex;2324  gap: 8px;2325  width: 100%;2326  margin-top: 6px;2327}23282329.peach-passkey-approval-actions .peach-btn {2330  flex: 1;2331}23322333/* ── Inline generator drawer ── */2334.peach-generator-drawer {2335  display: grid;2336  grid-template-rows: 0fr;2337  transition: grid-template-rows 320ms var(--peach-curve-arrival);2338  overflow: hidden;2339}2340.peach-generator-drawer.is-open {2341  grid-template-rows: 1fr;2342}2343.peach-generator-drawer-inner {2344  min-height: 0;2345  overflow: hidden;2346}2347.peach-generator-drawer-content {2348  border-top: 1px solid var(--peach-t3);2349  padding: 8px 0 4px;2350  display: flex;2351  flex-direction: column;2352  gap: 8px;2353}23542355/* ── Compact generator (inside entry edit) ── */2356.peach-generator-drawer-content--compact {2357  border-top: 1px solid var(--peach-t3);2358  padding: 8px 0 2px;2359  gap: 7px;2360}2361.peach-pwgen-compact-display-row {2362  display: flex;2363  align-items: center;2364  gap: 6px;2365}2366.peach-pwgen-compact-output {2367  flex: 1;2368  min-width: 0;2369  font-family: "IBM Plex Mono", monospace;2370  font-size: 0.6875rem;2371  font-weight: 400;2372  letter-spacing: 0.04em;2373  color: var(--peach-t0);2374  background: rgba(240, 232, 216, 0.04);2375  border: 1px solid var(--peach-t3);2376  border-radius: 5px;2377  padding: 5px 8px;2378  line-height: 1.5;2379  outline: none;2380  transition: border-color 120ms ease;2381}23822383.peach-pwgen-compact-output:focus {2384  border-color: var(--peach-t1);2385}2386.peach-pwgen-compact-controls {2387  display: flex;2388  align-items: center;2389  gap: 6px;2390}2391.peach-pwgen-compact-slider {2392  flex: 1;2393  min-width: 0;2394  height: 2px !important;2395}2396.peach-pwgen-compact-controls .peach-pwgen-len-num {2397  flex-shrink: 0;2398  min-width: 18px;2399  text-align: right;2400}2401.peach-pwgen-compact-pills {2402  display: flex;2403  gap: 3px;2404  flex-shrink: 0;2405}2406.peach-pwgen-compact-pills .peach-pwgen-pill {2407  padding: 2px 7px;2408  font-size: 0.5rem;2409}2410.peach-pwgen-compact-use {2411  flex-shrink: 0;2412  font-size: 0.625rem !important;2413  padding: 3px 9px !important;2414  min-height: 22px !important;2415  border-radius: 5px !important;2416}24172418/* ── Password edit row (input + eye toggle side-by-side) ── */2419.peach-password-edit-row {2420  display: flex;2421  align-items: center;2422  gap: 6px;2423}2424.peach-password-edit-row .peach-inline-input {2425  flex: 1;2426  min-width: 0;2427}24282429/* ── Generate toggle link ── */2430.peach-generate-toggle-link {2431  display: inline-flex;2432  align-items: center;2433  gap: 5px;2434  background: none;2435  border: none;2436  padding: 0;2437  cursor: pointer;2438  font-family: "IBM Plex Mono", monospace;2439  font-size: 0.625rem;2440  color: var(--peach-t2);2441  letter-spacing: 0.04em;2442  transition: color 120ms ease;2443  align-self: flex-start;2444}2445.peach-generate-toggle-link:hover {2446  color: var(--peach-accent);2447}24482449/* Holds the generate + history toggle links on one row under the editor. */2450.peach-password-edit-links {2451  display: flex;2452  align-items: center;2453  gap: 14px;2454  flex-wrap: wrap;2455}24562457/* ── Past-password history list ── */2458.peach-password-history {2459  display: grid;2460  gap: 4px;2461  margin-top: 2px;2462  max-height: 168px;2463  overflow-y: auto;2464  scrollbar-width: thin;2465}2466.peach-history-row {2467  display: flex;2468  align-items: center;2469  justify-content: space-between;2470  gap: 8px;2471  padding: 5px 7px;2472  border-radius: 7px;2473  background: color-mix(in srgb, var(--peach-accent) 5%, transparent);2474  border: 1px solid color-mix(in srgb, var(--peach-accent) 9%, transparent);2475}2476.peach-history-main {2477  display: flex;2478  flex-direction: column;2479  gap: 1px;2480  min-width: 0;2481  flex: 1;2482}2483.peach-history-pw {2484  font-family: "IBM Plex Mono", monospace;2485  font-size: 0.6875rem;2486  color: var(--peach-t1);2487  white-space: nowrap;2488  overflow: hidden;2489  text-overflow: ellipsis;2490}2491.peach-history-pw .peach-password-mask {2492  letter-spacing: 0.08em;2493  color: var(--peach-t2);2494}2495.peach-history-age {2496  font-family: "IBM Plex Mono", monospace;2497  font-size: 0.5625rem;2498  color: var(--peach-t3, var(--peach-t2));2499  letter-spacing: 0.03em;2500}2501.peach-history-actions {2502  display: flex;2503  align-items: center;2504  gap: 2px;2505  flex-shrink: 0;2506}2507.peach-history-use {2508  font-family: "IBM Plex Mono", monospace;2509  font-size: 0.5625rem;2510  letter-spacing: 0.05em;2511  padding: 3px 7px;2512}2513.peach-history-empty {2514  font-family: "IBM Plex Mono", monospace;2515  font-size: 0.625rem;2516  line-height: 1.45;2517  color: var(--peach-t2);2518  padding: 6px 8px;2519  border-radius: 7px;2520  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);2521  border: 1px solid color-mix(in srgb, var(--peach-accent) 8%, transparent);2522}25232524/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2525.peach-entry-body {2526  flex: 1;2527  overflow-y: auto;2528  overflow-x: hidden;2529  scrollbar-width: none;2530  -ms-overflow-style: none;2531  overscroll-behavior: contain;2532  display: grid;2533  gap: 10px;2534  align-content: start;2535  padding: 10px 20px 14px;2536  min-width: 0;2537  min-height: 0;2538}2539.peach-entry-body::-webkit-scrollbar { display: none; }25402541/* Type-toggle pills + inline note toolbar */2542.peach-new-type-row {2543  display: flex;2544  align-items: center;2545  gap: 6px;2546  margin-bottom: 2px;2547}2548.peach-new-type-btn {2549  background: transparent;2550  border: 1px solid var(--peach-t3);2551  border-radius: 12px;2552  padding: 3px 10px;2553  font-family: "IBM Plex Mono", monospace;2554  font-size: 0.5625rem;2555  letter-spacing: 0.12em;2556  text-transform: uppercase;2557  color: var(--peach-t2);2558  cursor: pointer;2559  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2560}2561.peach-new-type-btn.is-active {2562  color: var(--peach-t0);2563  border-color: var(--peach-accent);2564  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2565}2566.peach-new-type-btn:not(.is-active):hover {2567  color: var(--peach-t1);2568  border-color: var(--peach-t2);2569}25702571/* Editable title */2572.peach-new-title-wrap { margin: 0 0 2px; }2573.peach-new-title-input {2574  background: transparent;2575  border: none;2576  outline: none;2577  width: 100%;2578  color: var(--peach-t0);2579  font-family: var(--font-display);2580  font-style: italic;2581  font-weight: 400;2582  font-size: 40px;2583  line-height: 0.95;2584  caret-color: var(--peach-accent);2585}2586.peach-new-title-input::placeholder { color: var(--peach-t2); }25872588/* Editable domain field */2589.peach-domain-edit-row {2590  display: flex;2591  align-items: center;2592  gap: 6px;2593}25942595.peach-domain-edit-row .peach-domain-value--edit {2596  flex: 1;2597  width: 0;2598}25992600.peach-domain-url-btn {2601  flex-shrink: 0;2602  background: transparent;2603  border: none;2604  cursor: pointer;2605  color: var(--peach-t3);2606  padding: 2px 3px;2607  display: flex;2608  align-items: center;2609  line-height: 0;2610  border-radius: 3px;2611  transition: color 120ms ease;2612}26132614.peach-domain-url-btn:hover {2615  color: var(--peach-accent);2616}26172618.peach-domain-value--edit {2619  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2620  font-size: 0.625rem;2621  font-style: italic;2622  letter-spacing: 0.12em;2623  color: var(--peach-t1);2624  background: transparent;2625  border: none;2626  border-bottom: 1px solid var(--peach-t3);2627  outline: none;2628  width: 100%;2629  padding: 2px 0;2630  caret-color: var(--peach-accent);2631  transition: border-color 140ms ease, color 140ms ease;2632}2633.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2634.peach-domain-value--edit:focus {2635  border-bottom-color: rgba(240, 232, 216, 0.28);2636  color: var(--peach-t0);2637}26382639/* Editable field values (username, password, totp) */2640.peach-field-value--edit {2641  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2642  font-size: 0.8125rem;2643  color: var(--peach-t0);2644  background: transparent;2645  border: none;2646  border-bottom: 1px solid var(--peach-t3);2647  outline: none;2648  flex: 1;2649  min-width: 0;2650  padding: 3px 0;2651  caret-color: var(--peach-accent);2652  transition: border-color 140ms ease, color 140ms ease;2653}2654.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2655.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2656.peach-field-value--edit:focus {2657  border-bottom-color: rgba(240, 232, 216, 0.28);2658  color: var(--peach-t0);2659}26602661/* "+ add optional field" links */2662.peach-entry-add-links {2663  display: flex;2664  gap: 12px;2665  flex-wrap: wrap;2666  margin-top: -2px;2667}2668.peach-add-field-link {2669  background: transparent;2670  border: none;2671  padding: 0;2672  cursor: pointer;2673  font-family: "IBM Plex Mono", monospace;2674  font-size: 0.5625rem;2675  letter-spacing: 0.1em;2676  text-transform: uppercase;2677  color: var(--peach-t2);2678  transition: color 140ms ease;2679}2680.peach-add-field-link:hover { color: var(--peach-accent); }26812682/* ── New entry form (legacy classes) ────────────────────────────────── */2683.peach-new-body {2684  flex: 1;2685  overflow-y: auto;2686  padding: 10px 20px 14px;2687}2688.peach-new-name-input {2689  background: transparent;2690  border: none;2691  outline: none;2692  width: 100%;2693  color: var(--peach-t0);2694  font-family: var(--font-display);2695  font-style: italic;2696  font-weight: 400;2697  font-size: 40px;2698  line-height: 0.95;2699  caret-color: var(--peach-accent);2700}2701.peach-new-name-input::placeholder { color: var(--peach-t2); }2702.peach-new-field-input {2703  background: transparent;2704  border: none;2705  outline: none;2706  flex: 1;2707  min-width: 0;2708  caret-color: var(--peach-accent);2709}2710.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }27112712/* ── Canary card ── */2713.peach-canary-card {2714  border: 1px solid rgba(217, 160, 48, 0.2);2715  background: rgba(217, 160, 48, 0.03);2716  border-radius: 8px;2717  padding: 12px;2718}27192720.peach-canary-settings-header {2721  display: flex;2722  align-items: center;2723  justify-content: space-between;2724  cursor: pointer;2725  user-select: none;2726}27272728.peach-canary-card .peach-label {2729  color: rgba(217, 160, 48, 0.85);2730}27312732.peach-canary-card .peach-new-field-input {2733  border-color: rgba(217, 160, 48, 0.25);2734}27352736.peach-canary-card .peach-new-field-input:focus {2737  border-color: rgba(217, 160, 48, 0.5);2738}27392740.peach-canary-body {2741  margin-top: 12px;2742  display: flex;2743  flex-direction: column;2744  gap: 10px;2745}27462747.peach-canary-explainer {2748  display: flex;2749  gap: 10px;2750  padding: 10px 12px;2751  border-radius: 10px;2752  background: rgba(217, 160, 48, 0.06);2753  border: 1px solid rgba(217, 160, 48, 0.22);2754  margin-bottom: 4px;2755}27562757.peach-canary-explainer-icon {2758  font-size: 1rem;2759  flex-shrink: 0;2760  line-height: 1.2;2761}27622763.peach-canary-explainer-title {2764  font-family: var(--font-ui);2765  font-size: 0.6875rem;2766  font-weight: 500;2767  color: rgba(217, 160, 48, 0.9);2768  margin: 0 0 3px;2769}27702771.peach-canary-explainer-copy {2772  font-family: var(--font-ui);2773  font-size: 0.625rem;2774  color: var(--peach-t2);2775  line-height: 1.55;2776  margin: 0;2777}27782779.peach-canary-hint {2780  font-size: 0.625rem;2781  color: var(--peach-t2);2782  font-family: Inter, system-ui, sans-serif;2783  line-height: 1.5;2784  margin-top: 4px;2785}27862787.peach-canary-actions-row {2788  display: flex;2789  align-items: center;2790  gap: 8px;2791}27922793.peach-canary-test-btn {2794  border-color: rgba(217, 160, 48, 0.3);2795  color: rgba(217, 160, 48, 0.85);2796}27972798.peach-canary-test-result {2799  font-size: 0.625rem;2800  font-family: Inter, system-ui, sans-serif;2801}28022803.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2804.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }28052806.peach-canary-badge {2807  display: flex;2808  position: relative;2809  z-index: 1;2810  align-items: center;2811  gap: 5px;2812  padding: 4px 10px;2813  background: rgba(217, 160, 48, 0.12);2814  border: 1px solid rgba(217, 160, 48, 0.35);2815  border-radius: 6px;2816  margin-bottom: 6px;2817  width: fit-content;2818}28192820.peach-canary-badge-label {2821  font-size: 0.625rem;2822  letter-spacing: 0.06em;2823  color: rgba(217, 160, 48, 0.9);2824  font-family: var(--font-ui);2825  text-transform: uppercase;2826}28272828.peach-canary-badge-icon {2829  font-size: 0.6875rem;2830}28312832.peach-canary-suppress-row {2833  display: flex;2834  align-items: center;2835  gap: 8px;2836  padding: 6px 10px;2837  background: rgba(217, 160, 48, 0.08);2838  border-radius: 6px;2839  margin-bottom: 8px;2840}28412842.peach-canary-suppress-label {2843  font-size: 0.6875rem;2844  color: rgba(217, 160, 48, 0.85);2845  cursor: pointer;2846  font-family: var(--font-ui);2847  letter-spacing: 0.04em;2848}28492850.peach-regen-panel {2851  position: relative;2852  z-index: 1;2853  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2854  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2855  border-radius: 8px;2856  padding: 12px;2857  margin-bottom: 8px;2858}28592860.peach-regen-panel-header {2861  display: flex;2862  align-items: center;2863  justify-content: space-between;2864  margin-bottom: 10px;2865}28662867.peach-regen-panel-title {2868  font-size: 0.6875rem;2869  font-weight: 600;2870  letter-spacing: 0.06em;2871  text-transform: uppercase;2872  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2873}28742875.peach-regen-output {2876  background: rgba(0, 0, 0, 0.2);2877  border-radius: 6px;2878  padding: 10px;2879  margin-bottom: 10px;2880  font-family: var(--font-mono);2881  font-size: 0.8125rem;2882  word-break: break-all;2883  color: var(--peach-t1);2884}28852886.peach-regen-actions {2887  display: flex;2888  gap: 6px;2889}28902891.peach-regen-actions--spaced {2892  margin-bottom: 8px;2893}28942895.peach-regen-action-grow {2896  flex: 1;2897}28982899.peach-regen-copy-btn {2900  padding: 0 8px;2901}29022903.peach-regen-success {2904  position: relative;2905  z-index: 1;2906  background: rgba(40, 180, 80, 0.1);2907  border: 1px solid rgba(40, 180, 80, 0.3);2908  border-radius: 8px;2909  padding: 10px 12px;2910  margin-bottom: 8px;2911  display: flex;2912  align-items: center;2913  gap: 8px;2914  font-size: 0.6875rem;2915  color: rgba(40, 180, 80, 0.9);2916}29172918/* ── Note editor overlay ── */2919.peach-note-editor {2920  position: absolute;2921  inset: 0;2922  z-index: 200;2923  display: flex;2924  flex-direction: column;2925  background:2926    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2927    var(--peach-bg);2928  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2929}29302931.peach-note-editor-header {2932  display: flex;2933  align-items: center;2934  gap: 10px;2935  padding: 14px 16px 10px;2936  border-bottom: 1px solid var(--peach-t3);2937  flex-shrink: 0;2938}29392940.peach-note-editor-back {2941  background: transparent;2942  border: none;2943  cursor: pointer;2944  color: var(--peach-t2);2945  padding: 4px 6px;2946  border-radius: 6px;2947  display: flex;2948  align-items: center;2949  transition: color 120ms ease, background 120ms ease;2950  flex-shrink: 0;2951}2952.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }29532954.peach-note-editor-label {2955  flex: 1;2956  font-family: var(--font-display);2957  font-style: italic;2958  font-size: 0.9375rem;2959  color: var(--peach-t1);2960  letter-spacing: 0.02em;2961}29622963.peach-note-editor-save-btn {2964  background: transparent;2965  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2966  border-radius: 8px;2967  color: var(--peach-accent);2968  font-family: "IBM Plex Mono", monospace;2969  font-size: 0.625rem;2970  letter-spacing: 0.06em;2971  text-transform: uppercase;2972  padding: 3px 10px;2973  cursor: pointer;2974  transition: background 120ms ease, border-color 120ms ease;2975}2976.peach-note-editor-save-btn:hover:not(:disabled) {2977  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2978  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2979}2980.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }29812982.peach-note-toolbar {2983  display: flex;2984  align-items: center;2985  gap: 3px;2986  padding: 6px 14px 5px;2987  border-bottom: 1px solid var(--peach-t3);2988  flex-shrink: 0;2989}29902991.peach-note-tool-btn {2992  background: transparent;2993  border: 1px solid transparent;2994  border-radius: 5px;2995  color: var(--peach-t2);2996  font-family: "IBM Plex Mono", monospace;2997  font-size: 0.625rem;2998  letter-spacing: 0.04em;2999  padding: 2px 8px;3000  cursor: pointer;3001  line-height: 1.6;3002  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;3003}3004.peach-note-tool-btn:hover {3005  background: var(--peach-t4);3006  color: var(--peach-t0);3007  border-color: var(--peach-t3);3008}30093010.peach-note-tool-icon {3011  padding: 3px 7px;3012  display: inline-flex;3013  align-items: center;3014  justify-content: center;3015}30163017.peach-note-tool-divider {3018  width: 1px;3019  height: 14px;3020  background: var(--peach-t3);3021  margin: 0 4px;3022  flex-shrink: 0;3023}30243025.peach-note-editor-body {3026  flex: 1;3027  overflow-y: auto;3028  padding: 16px 20px 20px;3029  outline: none;3030  font-family: var(--font-display);3031  font-size: 1rem;3032  line-height: 1.75;3033  color: var(--peach-t0);3034  scrollbar-width: none;3035  word-break: break-word;3036}3037.peach-note-editor-body:empty::before {3038  content: "write your note…";3039  color: var(--peach-t3);3040  font-style: italic;3041  pointer-events: none;3042}30433044/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */3045.peach-note-editor-inline {3046  display: flex;3047  flex-direction: column;3048  flex: 1;3049  min-height: 0;3050}3051.peach-note-editor-body--inline {3052  flex: 1;3053  min-height: 0;3054  font-size: 0.9375rem;3055  padding: 10px 20px 14px;3056}30573058/* Full-width toolbar row inside the body (Add.tsx note type).3059   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */3060.peach-note-toolbar-body {3061  display: flex;3062  align-items: center;3063  gap: 3px;3064  padding: 5px 20px 4px;3065  margin: 2px -20px 0;3066  border-bottom: 1px solid var(--peach-t3);3067  flex-shrink: 0;3068}30693070/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)3071   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn3072   and .peach-note-tool-divider button-level styles. */3073.peach-note-toolbar-inline {3074  display: flex;3075  align-items: center;3076  gap: 3px;3077  margin-left: auto;3078  padding-left: 10px;3079  border-left: 1px solid var(--peach-t3);3080  min-height: 22px;3081}30823083/* Entry.tsx toolbar row (no tabs, toolbar only) */3084.peach-entry-note-toolbar-row {3085  display: flex;3086  align-items: center;3087  margin: 4px 0 6px;3088  position: relative;3089  z-index: 1;3090}3091.peach-entry-note-toolbar-row .peach-note-toolbar-inline {3092  border-left: none;3093  padding-left: 0;3094  margin-left: 0;3095}30963097/* Note body — fills available vertical space in Add.tsx and Entry.tsx */3098.peach-note-body {3099  display: flex;3100  flex-direction: column;3101  flex: 1;3102  min-height: 0;3103  margin: 4px 0 0;3104}3105.peach-entry-body--new .peach-note-body {3106  margin: 8px -20px 0;3107}31083109/* Add.tsx body is a grid by default; swap to a flex column when a note is3110   active so the note body can stretch and pin the tags row to the bottom. */3111.peach-entry-body--new:has(.peach-note-body) {3112  display: flex;3113  flex-direction: column;3114}31153116/* Rich content element styles (editor + display) */3117.peach-note-editor-body h2,3118.peach-note-content h2 {3119  font-family: var(--font-display);3120  font-size: 20px;3121  font-weight: 600;3122  font-style: italic;3123  color: var(--peach-t0);3124  margin: 6px 0 2px;3125  line-height: 1.3;3126}3127.peach-note-editor-body ul,3128.peach-note-content ul {3129  padding-left: 18px;3130  margin: 3px 0;3131  list-style: disc;3132}3133.peach-note-editor-body ol,3134.peach-note-content ol {3135  padding-left: 18px;3136  margin: 3px 0;3137  list-style: decimal;3138}3139.peach-note-editor-body li,3140.peach-note-content li { margin: 2px 0; }3141.peach-note-editor-body hr,3142.peach-note-content hr {3143  border: none;3144  border-top: 1px solid var(--peach-t3);3145  margin: 10px 0;3146}31473148/* font size elements from execCommand */3149.peach-note-editor-body font[size="1"],3150.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }3151.peach-note-editor-body font[size="2"],3152.peach-note-content font[size="2"] { font-size: 0.8125rem; }3153.peach-note-editor-body font[size="3"],3154.peach-note-content font[size="3"] { font-size: 1rem; }3155.peach-note-editor-body font[size="4"],3156.peach-note-content font[size="4"] { font-size: 20px; }3157.peach-note-editor-body font[size="5"],3158.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }31593160/* bold / italic inside the editor and note display */3161.peach-note-editor-body b, .peach-note-editor-body strong,3162.peach-note-content b, .peach-note-content strong { font-weight: 700; }3163.peach-note-editor-body em, .peach-note-editor-body i,3164.peach-note-content em, .peach-note-content i { font-style: italic; }31653166/* note display — rendered HTML, no pre-wrap */3167.peach-note-content {3168  overflow: auto;3169  max-height: 340px;3170  word-break: break-word;3171}31723173/* ── Note textarea ── */3174.peach-note-textarea {3175  width: 100%;3176  min-height: 180px;3177  max-height: 280px;3178  resize: vertical;3179  background: var(--peach-t4);3180  border: 1px solid var(--peach-t3);3181  border-radius: 8px;3182  padding: 10px 12px;3183  font-family: "IBM Plex Mono", monospace;3184  font-size: 0.75rem;3185  line-height: 1.7;3186  color: var(--peach-t1);3187  outline: none;3188  transition: border-color 150ms ease;3189}31903191.peach-note-textarea:focus {3192  border-color: var(--peach-t2);3193}31943195.peach-note-char-count {3196  font-family: "IBM Plex Mono", monospace;3197  font-size: 0.5625rem;3198  color: var(--peach-t3);3199  text-align: right;3200  margin-top: 4px;3201  letter-spacing: 0.1em;3202}32033204/* ── Field input baseline ── */3205.peach-new-field-input {3206  width: 100%;3207  background: transparent;3208  border: none;3209  border-bottom: 1px solid var(--peach-t3);3210  padding: 4px 0;3211  color: var(--peach-t1);3212  font-family: "IBM Plex Mono", monospace;3213  font-size: 0.8125rem;3214  outline: none;3215  transition: border-color 150ms ease;3216}32173218.peach-new-field-input:focus {3219  border-bottom-color: var(--peach-t0);3220  color: var(--peach-t0);3221}32223223.peach-new-name-input {3224  width: 100%;3225  background: transparent;3226  border: none;3227  border-bottom: 1px solid var(--peach-t3);3228  padding: 6px 0;3229  font-family: var(--font-display);3230  font-style: italic;3231  font-size: 28px;3232  color: var(--peach-t0);3233  outline: none;3234  transition: border-color 150ms ease;3235}32363237.peach-new-name-input:focus {3238  border-bottom-color: var(--peach-t1);3239}32403241.peach-new-name-input::placeholder {3242  color: var(--peach-t2);3243  font-style: italic;3244}32453246.peach-new-field-input::placeholder {3247  color: var(--peach-t3);3248}32493250/* ── Demo entrance animation ── */3251#hd-shell {3252  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3253}3254@keyframes hd-shell-enter {3255  from { opacity: 0; transform: scale(0.96) translateY(16px); }3256  to   { opacity: 1; transform: scale(1) translateY(0); }3257}32583259/* ── Keyframes ── */3260@keyframes peach-char-enter {3261  from { opacity: 0; transform: translateY(0.22em); }3262  to   { opacity: 1; transform: translateY(0); }3263}3264@keyframes peach-content-enter {3265  from { opacity: 0.96; transform: translateY(4px); }3266  to   { opacity: 1; transform: translateY(0); }3267}3268@keyframes peach-content-exit {3269  from { opacity: 1; transform: translateY(0); }3270  to   { opacity: 0.92; transform: translateY(-3px); }3271}3272@keyframes peach-screen-enter {3273  from { opacity: 0; transform: translateY(14px); }3274  to   { opacity: 1; transform: translateY(0); }3275}3276@keyframes peach-shell-fade-in {3277  from { opacity: 0; }3278  to   { opacity: 1; }3279}3280@keyframes peach-veil-in {3281  from { opacity: 0; }3282  to   { opacity: 1; }3283}3284@keyframes peach-lock-settle {3285  0%   { transform: scale(0.9); }3286  65%  { transform: scale(1.08); }3287  100% { transform: scale(1); }3288}3289@keyframes peach-copy-confirm {3290  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3291  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); }3292}3293@keyframes peach-copy-retreat {3294  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); }3295  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3296}3297@keyframes peach-copy-flood {3298  from { opacity: 0; transform: scaleX(0.15); }3299  to   { opacity: 1; transform: scaleX(1); }3300}3301@keyframes peach-copy-icon-settle {3302  from  { transform: scale(0.84); }3303  70%   { transform: scale(1.08); }3304  to    { transform: scale(1); }3305}3306@keyframes peach-copy-sheen-retreat {3307  from { opacity: 1; transform: scaleX(1); }3308  to   { opacity: 0; transform: scaleX(0.15); }3309}3310@keyframes peach-copy-drain {3311  from { width: 100%; }3312  to   { width: 0; }3313}3314@keyframes peach-shake {3315  0%, 100% { transform: translateX(0); }3316  20%      { transform: translateX(-6px); }3317  40%      { transform: translateX(6px); }3318  60%      { transform: translateX(-4px); }3319  80%      { transform: translateX(4px); }3320}33213322@keyframes pip-pulse {3323  0% { transform: scale(1); }3324  40% { transform: scale(2.2); }3325  100% { transform: scale(1); }3326}332733283329/* ── Password generator ── */3330.peach-pwgen-body {3331  flex: 1; overflow-y: auto;3332  display: flex; flex-direction: column;3333}3334.peach-policy-badge {3335  display: flex; align-items: center;3336  padding: 6px 20px 0;3337  font-size: 0.625rem; font-family: Inter, sans-serif;3338  color: var(--peach-t2); letter-spacing: 0.04em;3339}3340.peach-pwgen-display {3341  padding: 14px 20px 12px;3342  border-bottom: 1px solid var(--peach-t3);3343  display: flex; align-items: flex-start; gap: 10px;3344}3345.peach-pwgen-display-row {3346  display: flex;3347  align-items: flex-start;3348  gap: 8px;3349  padding-bottom: 8px;3350  border-bottom: 1px solid var(--peach-t3);3351}3352.peach-pwgen-output {3353  flex: 1; min-width: 0; margin: 0;3354  font-family: "IBM Plex Mono", monospace;3355  font-size: 0.8125rem; color: var(--peach-t0);3356  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3357  white-space: normal;3358  padding: 10px 12px;3359  background: var(--peach-t4);3360  border-radius: 6px;3361  min-height: 36px;3362}3363.peach-pwgen-output-display {3364  flex: 1;3365  min-width: 0;3366  margin: 0;3367  font-family: var(--font-display);3368  font-style: italic;3369  font-weight: 300;3370  font-size: 32px;3371  line-height: 1.05;3372  color: var(--peach-t0);3373  word-break: break-all;3374  overflow-wrap: break-word;3375  white-space: normal;3376  letter-spacing: 0.02em;3377}3378.peach-pwgen-display-actions {3379  display: flex;3380  flex-direction: column;3381  gap: 4px;3382  flex-shrink: 0;3383  margin-top: 2px;3384}3385.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3386.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3387.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3388.peach-pwgen-len-num {3389  font-family: "IBM Plex Mono", monospace;3390  font-size: 0.75rem; color: var(--peach-accent);3391}3392.peach-pwgen-len-num--edit {3393  cursor: text;3394  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3395}3396.peach-pwgen-len-input {3397  font-family: "IBM Plex Mono", monospace;3398  font-size: 0.75rem;3399  color: var(--peach-accent);3400  background: transparent;3401  border: none;3402  border-bottom: 1px solid var(--peach-accent);3403  outline: none;3404  width: 32px;3405  text-align: right;3406  padding: 0;3407}3408.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3409.peach-pwgen-toggles { display: flex; flex-direction: column; }3410.peach-pwgen-charset-pills {3411  display: flex;3412  gap: 6px;3413  flex-wrap: wrap;3414}3415.peach-pwgen-pill {3416  padding: 4px 11px;3417  border-radius: 999px;3418  border: 1px solid var(--peach-t3);3419  background: transparent;3420  color: var(--peach-t2);3421  font-family: "IBM Plex Mono", monospace;3422  font-size: 0.5625rem;3423  letter-spacing: 0.08em;3424  cursor: pointer;3425  transition: all 150ms ease;3426}3427.peach-pwgen-pill.is-on {3428  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3429  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3430  color: var(--peach-accent);3431}3432.peach-pwgen-pill:not(.is-on):hover {3433  color: var(--peach-t1);3434  border-color: var(--peach-t2);3435}3436.peach-pwgen-use-btn {3437  width: 100%;3438  min-height: 34px;3439  border-radius: 8px;3440  margin-top: 2px;3441}3442.peach-generator-constraint-note {3443  font-family: 'IBM Plex Mono', monospace;3444  font-size: 10px;3445  color: var(--peach-t3);3446  letter-spacing: 0.04em;3447  margin: 0;3448  transition: opacity 200ms ease;3449}3450.peach-pwgen-toggle-row {3451  display: flex; align-items: center; justify-content: space-between;3452  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3453}3454.peach-pwgen-toggle-row:last-child { border-bottom: none; }3455.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }34563457/* Peach popup should not expose native scrollbars on internal panels. */3458.peach-settings-body,3459.peach-new-body,3460.peach-pwgen-body,3461.lock-screen,3462.peach-import-preview {3463  scrollbar-width: none;3464  -ms-overflow-style: none;3465  overscroll-behavior: contain;3466}3467.peach-settings-body::-webkit-scrollbar,3468.peach-new-body::-webkit-scrollbar,3469.peach-pwgen-body::-webkit-scrollbar,3470.lock-screen::-webkit-scrollbar,3471.peach-import-preview::-webkit-scrollbar {3472  width: 0;3473  height: 0;3474  display: none;3475}34763477.lock-screen {3478  height: 100%;3479  min-height: 100%;3480  overflow-y: auto;3481  padding: 18px 18px 16px;3482  gap: 14px;3483  grid-template-rows: auto auto auto 1fr auto;3484  align-content: stretch;3485  position: relative;3486  isolation: isolate;3487}3488.peach-screen.lock-screen--vault-stage {3489  display: flex;3490  flex-direction: column;3491  justify-content: flex-start;3492  gap: 18px;3493  padding: 20px 18px 18px;3494  overflow: hidden;3495}3496.peach-screen.lock-screen--vault-stage .peach-lock-panel {3497  margin-top: 0;3498}3499.lock-screen--onboarding {3500  display: flex;3501  flex-direction: column;3502  gap: 12px;3503  justify-content: flex-start;3504}35053506.lock-screen::before {3507  content: "";3508  position: absolute;3509  inset: 12px 18px auto auto;3510  width: 160px;3511  height: 160px;3512  border-radius: 999px;3513  background:3514    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%);3515  filter: blur(6px);3516  opacity: 0.7;3517  pointer-events: none;3518  z-index: 0;3519}35203521.peach-lock-rune-string {3522  flex: 1;3523  display: flex;3524  align-items: center;3525  justify-content: center;3526  gap: 6px;3527  font-family: PeachScript, monospace;3528  font-size: 0.8125rem;3529  letter-spacing: 0.05em;3530  pointer-events: none;3531  user-select: none;3532  position: relative;3533  z-index: 1;3534}35353536.peach-lock-rune-string span {3537  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3538  text-shadow:3539    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3540    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3541  transition: color 0.9s ease, text-shadow 0.9s ease;3542}35433544.peach-lock-rune-string span.is-glowing {3545  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3546  text-shadow:3547    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3548    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3549}35503551.lock-screen-header {3552  display: flex;3553  align-items: center;3554  justify-content: space-between;3555  position: relative;3556  z-index: 1;3557}35583559.lock-password-input.shake {3560  animation: peach-shake 300ms ease-in-out;3561}35623563.peach-hint-error {3564  color: rgba(220, 80, 60, 0.92);3565}35663567.peach-onboarding-headline {3568  margin: 0;3569  font-family: var(--font-display);3570  font-size: 35px;3571  line-height: 0.88;3572  font-style: italic;3573  font-weight: 400;3574  max-width: 252px;3575}35763577.peach-lock-copy {3578  display: grid;3579  gap: 8px;3580  position: relative;3581  z-index: 1;3582}35833584.peach-lock-copy--onboarding {3585  gap: 10px;3586}35873588.peach-lock-hero {3589  position: relative;3590  z-index: 1;3591  display: grid;3592  gap: 8px;3593  min-height: 0;3594  padding: 4px 2px 0;3595  border: none;3596  border-radius: 0;3597  background: transparent;3598  box-shadow: none;3599}3600.peach-lock-hero-art {3601  position: absolute;3602  right: -8px;3603  top: -6px;3604  width: 120px;3605  height: 120px;3606  display: flex;3607  align-items: center;3608  justify-content: center;3609  pointer-events: none;3610  opacity: 0.12;3611  filter: saturate(0.9);3612}3613.peach-lock-hero-mark {3614  width: 100%;3615  height: 100%;3616}3617/* Peach body stays brand-peach across every accent — we don't want a3618   green or blue peach when sage/sky is selected. Leaf + vein keep the3619   sage tint because a real peach has a sage leaf. In the new brand-kit3620   mark the leaf is path 1 and the vein stroke is path 2; the body and3621   back-lobe (paths 3 + 4) must stay untouched. */3622.peach-lock-hero-mark path:nth-child(1) {3623  fill: rgba(123, 144, 96, 0.88);3624}3625.peach-lock-hero-mark path:nth-child(2) {3626  stroke: rgba(94, 122, 66, 0.95);3627}3628.peach-lock-hero > *:not(.peach-lock-hero-art) {3629  position: relative;3630  z-index: 1;3631}36323633.peach-lock-eyebrow {3634  display: inline-flex;3635  align-items: center;3636  width: fit-content;3637  padding: 4px 9px;3638  border-radius: 999px;3639  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3640  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3641  color: var(--peach-t0);3642  font-family: "IBM Plex Mono", monospace;3643  font-size: 0.5rem;3644  letter-spacing: 0.18em;3645  text-transform: uppercase;3646}36473648.peach-lock-label-row {3649  display: flex;3650  align-items: center;3651  justify-content: space-between;3652  margin-bottom: 0;3653}36543655.peach-lock-reveal-btn {3656  display: inline-flex;3657  align-items: center;3658  gap: 4px;3659  background: none;3660  border: none;3661  cursor: pointer;3662  font-family: "IBM Plex Mono", monospace;3663  font-size: 0.5625rem;3664  letter-spacing: 0.06em;3665  color: var(--peach-t2);3666  padding: 2px 0;3667  transition: color 150ms ease;3668}36693670.peach-lock-reveal-btn:hover {3671  color: var(--peach-t1);3672}36733674.peach-lock-warning {3675  color: rgba(220, 80, 60, 0.85) !important;3676  line-height: 1.5;3677}36783679.peach-onboarding-cards {3680  display: grid;3681  gap: 8px;3682  position: relative;3683  z-index: 1;3684}36853686.peach-lock-panel {3687  position: relative;3688  z-index: 1;3689  display: grid;3690  gap: 9px;3691  padding: 14px 16px 15px;3692  border-radius: 18px;3693  border: 1px solid var(--peach-t3);3694  background:3695    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3696  box-shadow:3697    inset 0 1px 0 rgba(240, 232, 216, 0.04),3698    0 12px 28px rgba(0, 0, 0, 0.12);3699}37003701/* Glass surface — lock panel and settings groups */3702.peach-glass {3703  background: rgba(26, 20, 16, 0.65);3704  border: 1px solid rgba(255, 255, 255, 0.08);3705  border-radius: 12px;3706  backdrop-filter: blur(12px) saturate(1.4);3707  -webkit-backdrop-filter: blur(12px) saturate(1.4);3708}37093710@supports not (backdrop-filter: blur(1px)) {3711  .peach-glass {3712    background: rgba(26, 20, 16, 0.92);3713    border: 1px solid rgba(255, 255, 255, 0.10);3714    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3715  }3716}37173718.light .peach-glass,3719[data-theme="light"] .peach-glass {3720  background: rgba(240, 233, 223, 0.72);3721  border: 1px solid rgba(26, 18, 8, 0.08);3722  backdrop-filter: blur(12px) saturate(1.2);3723  -webkit-backdrop-filter: blur(12px) saturate(1.2);3724}37253726@supports not (backdrop-filter: blur(1px)) {3727  .light .peach-glass,3728  [data-theme="light"] .peach-glass {3729    background: rgba(240, 233, 223, 0.97);3730    border: 1px solid rgba(26, 18, 8, 0.10);3731  }3732}37333734/* Lock panel keeps its own border-radius over the generic glass token */3735.peach-lock-panel.peach-glass {3736  border-radius: 18px;3737  background: rgba(26, 20, 16, 0.65);3738  border: 1px solid rgba(255, 255, 255, 0.08);3739  box-shadow:3740    inset 0 1px 0 rgba(255, 255, 255, 0.05),3741    0 12px 28px rgba(0, 0, 0, 0.3);3742}37433744.light .peach-lock-panel.peach-glass,3745[data-theme="light"] .peach-lock-panel.peach-glass {3746  background: rgba(240, 233, 223, 0.82);3747  border: 1px solid rgba(26, 18, 8, 0.08);3748  box-shadow:3749    inset 0 1px 0 rgba(255, 255, 255, 0.4),3750    0 8px 24px rgba(80, 56, 32, 0.15);3751}37523753@supports not (backdrop-filter: blur(1px)) {3754  .peach-lock-panel.peach-glass {3755    background: rgba(26, 20, 16, 0.92);3756    box-shadow:3757      inset 0 1px 0 rgba(255, 255, 255, 0.05),3758      0 12px 28px rgba(0, 0, 0, 0.4);3759  }3760  .light .peach-lock-panel.peach-glass,3761  [data-theme="light"] .peach-lock-panel.peach-glass {3762    background: rgba(240, 233, 223, 0.98);3763  }3764}37653766.peach-lock-panel--secondary {3767  gap: 12px;3768}37693770.peach-lock-panel-header {3771  display: flex;3772  align-items: baseline;3773  justify-content: space-between;3774  gap: 12px;3775}37763777.peach-lock-option-grid {3778  display: grid;3779  gap: 10px;3780}37813782.peach-lock-option {3783  width: 100%;3784  display: grid;3785  gap: 6px;3786  padding: 14px 15px;3787  border-radius: 16px;3788  border: 1px solid rgba(240, 232, 216, 0.08);3789  background: rgba(240, 232, 216, 0.02);3790  color: var(--peach-t0);3791  text-align: left;3792  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3793}37943795.peach-lock-option:hover {3796  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3797  background: rgba(240, 232, 216, 0.04);3798  transform: translateY(-1px);3799}38003801.peach-lock-option-title {3802  font-size: 0.75rem;3803  color: var(--peach-t0);3804}38053806.peach-lock-option-copy {3807  font-size: 0.6875rem;3808  line-height: 1.55;3809  color: var(--peach-t1);3810}38113812.peach-onboarding-stack {3813  margin-top: 2px;3814}3815.peach-lock-panel-footer {3816  display: grid;3817  gap: 6px;3818  margin-top: 2px;3819  padding-top: 10px;3820  border-top: 1px solid rgba(240, 232, 216, 0.06);3821}38223823/* ── Restore tab view ─────────────────────────────────────────────────────3824   Tab-based restore screen replacing the old three-card picker. */38253826.peach-restore-tabview {3827  overflow: hidden;3828}38293830.peach-restore-tabcard {3831  flex: 1;3832  display: flex;3833  flex-direction: column;3834  gap: 0;3835  padding: 0;3836  overflow: hidden;3837  cursor: default;3838  user-select: none;3839  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3840}38413842/* ── Tab selector ─────────────────────────────────────────────────────── */38433844.peach-restore-tabs {3845  display: flex;3846  justify-content: space-around;3847  padding: 14px 10px 10px;3848  border-bottom: 1px solid var(--peach-t3);3849  gap: 2px;3850  overflow: hidden;3851  scrollbar-width: none;3852}3853.peach-restore-tabs::-webkit-scrollbar { display: none; }38543855.peach-restore-tab {3856  background: none;3857  border: none;3858  cursor: pointer;3859  padding: 3px 2px;3860  font-family: 'Cormorant Garamond', Georgia, serif;3861  font-style: italic;3862  font-size: 11px;3863  color: var(--peach-t2);3864  transition: color 150ms ease, text-shadow 150ms ease;3865  flex: 1;3866  min-width: 0;3867  text-align: center;3868  white-space: nowrap;3869  overflow: hidden;3870  text-overflow: ellipsis;3871}3872.peach-restore-tab:hover {3873  color: var(--peach-accent);3874  text-shadow:3875    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3876    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3877}3878.peach-restore-tab.is-active {3879  color: var(--peach-accent);3880  text-shadow:3881    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3882    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3883}38843885/* ── Content area ─────────────────────────────────────────────────────── */38863887.peach-restore-content {3888  padding: 16px 16px 14px;3889  display: flex;3890  flex-direction: column;3891  gap: 8px;3892  overflow: hidden;3893  scrollbar-width: none;3894  flex: 1;3895}3896.peach-restore-content::-webkit-scrollbar { display: none; }3897.peach-restore-content > * {3898  overflow: hidden;3899  scrollbar-width: none;3900}3901.peach-restore-content > *::-webkit-scrollbar { display: none; }39023903/* ── Shared tab inner layout ──────────────────────────────────────────── */39043905.peach-rt-symbols,3906.peach-rt-csv,3907.peach-rt-phone,3908.peach-restore-codex {3909  display: flex;3910  flex-direction: column;3911  gap: 8px;3912  overflow: hidden;3913}39143915.peach-restore-codex {3916  min-height: 0;3917  justify-content: center;3918}39193920.peach-restore-codex-title {3921  margin: 0;3922  font-family: var(--font-display);3923  font-size: 1rem;3924  font-style: italic;3925  color: var(--peach-t0);3926}39273928.peach-restore-codex-copy {3929  margin: 0;3930  font-size: 0.75rem;3931  line-height: 1.5;3932  color: var(--peach-t1);3933}39343935.peach-restore-codex-button {3936  width: 100%;3937  justify-content: center;3938}39393940.peach-rt-submit {3941  width: 100%;3942}39433944.peach-rt-error {3945  margin: 0;3946  font-size: 0.6875rem;3947  color: var(--peach-breach);3948  line-height: 1.4;3949}39503951/* ── PeachScript tab ──────────────────────────────────────────────────── */39523953.peach-restore-symbols-textarea {3954  font-family: 'PeachScript', monospace;3955  font-size: 13px;3956  line-height: 1.9;3957  letter-spacing: 0.1em;3958  word-break: break-all;3959  resize: none;3960  width: 100%;3961  min-height: 56px;3962  max-height: 72px;3963  overflow: hidden;3964  scrollbar-width: none;3965  -ms-overflow-style: none;3966  box-sizing: border-box;3967  padding: 6px 8px;3968  border-radius: 8px;3969  border: 1px solid var(--peach-t3);3970  background: rgba(240, 232, 216, 0.03);3971  color: var(--peach-t0);3972}3973.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3974.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }39753976.peach-restore-symbols-pass {3977  width: 100%;3978  box-sizing: border-box;3979  padding: 7px 10px;3980  border-radius: 8px;3981  border: 1px solid var(--peach-t3);3982  background: rgba(240, 232, 216, 0.03);3983  color: var(--peach-t0);3984  font-size: 0.8125rem;3985}3986.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }3987.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }39883989.peach-rt-divider {3990  text-align: center;3991  font-size: 0.6875rem;3992  color: var(--peach-t2);3993  font-style: italic;3994}39953996.peach-rt-file-label {3997  width: 100%;3998  justify-content: center;3999}40004001.peach-rt-anim-canvas {4002  width: 100%;4003  height: 180px;4004  border-radius: 10px;4005  overflow: hidden;4006  display: block;4007}40084009/* ── CSV tab ──────────────────────────────────────────────────────────── */40104011.peach-rt-csv-sources {4012  margin: 0;4013  font-size: 0.6875rem;4014  color: var(--peach-t2);4015  line-height: 1.5;4016  text-align: center;4017}40184019.peach-rt-csv-warning {4020  margin: 0;4021  font-family: "IBM Plex Mono", monospace;4022  font-size: 0.5625rem;4023  letter-spacing: 0.12em;4024  color: var(--peach-breach);4025  text-align: center;4026}40274028/* ── From Phone tab ───────────────────────────────────────────────────── */40294030.peach-rt-phone-code {4031  margin: 0;4032  text-align: center;4033  font-family: "IBM Plex Mono", monospace;4034  font-size: 22px;4035  letter-spacing: 0.18em;4036  color: var(--peach-t0);4037}40384039.peach-rt-phone-qr {4040  display: block;4041  width: 96px;4042  height: 96px;4043  margin: 0 auto;4044  border-radius: 6px;4045  image-rendering: pixelated;4046  overflow: hidden;4047}40484049.peach-rt-phone-hint {4050  margin: 0;4051  font-size: 0.6875rem;4052  color: var(--peach-t2);4053  line-height: 1.55;4054  text-align: center;4055}40564057/* ── Intro popup ──────────────────────────────────────────────────────── */40584059.peach-restore-intro-overlay {4060  position: absolute;4061  inset: 0;4062  z-index: 100;4063  display: flex;4064  align-items: center;4065  justify-content: center;4066  padding: 20px;4067  background: rgba(12, 10, 6, 0.7);4068  backdrop-filter: blur(4px);4069  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4070}40714072.peach-restore-intro-card {4073  width: 100%;4074  display: flex;4075  flex-direction: column;4076  gap: 12px;4077  padding: 22px 20px 20px;4078  border-radius: 16px;4079  border: 1px solid var(--peach-t3);4080  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));4081  backdrop-filter: blur(4px);4082  -webkit-backdrop-filter: blur(4px);4083  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);4084}40854086.peach-restore-intro-headline {4087  margin: 0;4088  font-family: var(--font-display);4089  font-style: italic;4090  font-size: 20px;4091  font-weight: 400;4092  color: var(--peach-t0);4093}40944095.peach-restore-intro-body {4096  display: flex;4097  flex-direction: column;4098  gap: 8px;4099}4100.peach-restore-intro-body p {4101  margin: 0;4102  font-size: 0.75rem;4103  color: var(--peach-t1);4104  line-height: 1.5;4105}41064107.peach-restore-intro-btn {4108  width: 100%;4109  margin-top: 4px;4110}41114112/* Snapshot restore panel */4113.peach-snapshot-panel {4114  gap: 10px;4115  overflow-y: auto;4116  max-height: 340px;4117}4118.peach-snapshot-list {4119  display: flex;4120  flex-direction: column;4121  gap: 4px;4122}4123.peach-snapshot-row {4124  display: flex;4125  align-items: center;4126  justify-content: space-between;4127  width: 100%;4128  padding: 8px 10px;4129  border-radius: 8px;4130  border: 1px solid rgba(240, 232, 216, 0.07);4131  background: transparent;4132  cursor: pointer;4133  transition: border-color 120ms, background 120ms;4134  text-align: left;4135  gap: 8px;4136}4137.peach-snapshot-row:hover {4138  border-color: rgba(240, 232, 216, 0.14);4139  background: rgba(240, 232, 216, 0.03);4140}4141.peach-snapshot-row.is-selected {4142  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4143  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);4144}4145.peach-snapshot-time {4146  font-size: 11.5px;4147  color: var(--peach-t0);4148  flex: 1;4149}4150.peach-snapshot-count {4151  font-family: "IBM Plex Mono", monospace;4152  font-size: 0.625rem;4153  color: var(--peach-t2);4154  flex-shrink: 0;4155}4156.peach-snapshot-confirm {4157  display: flex;4158  flex-direction: column;4159  gap: 8px;4160  padding-top: 10px;4161  border-top: 1px solid rgba(240, 232, 216, 0.06);4162}4163.peach-snapshot-warning {4164  display: flex;4165  align-items: flex-start;4166  gap: 6px;4167  font-size: 10.5px;4168  color: rgba(220, 80, 60, 0.85);4169  line-height: 1.55;4170}4171.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }4172.peach-snapshot-confirm-row {4173  display: flex;4174  gap: 6px;4175  align-items: center;4176}4177.peach-snapshot-restore-btn {4178  width: 100%;4179}4180.peach-lock-hero--unlock .peach-lock-hero-art {4181  width: 112px;4182  height: 112px;4183  right: 0;4184  top: 2px;4185  opacity: 0.1;4186}41874188.peach-card {4189  border: 1px solid var(--peach-t3);4190  border-radius: 18px;4191  background:4192    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4193  box-shadow:4194    inset 0 0 0 1px var(--peach-border-accent),4195    inset 0 1px 0 rgba(240, 232, 216, 0.04),4196    0 12px 32px rgba(0, 0, 0, 0.14);4197  overflow: hidden;4198}41994200.peach-card-active {4201  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4202  box-shadow:4203    inset 0 1px 0 rgba(240, 232, 216, 0.05),4204    0 16px 38px rgba(0, 0, 0, 0.18),4205    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4206}42074208.peach-card-disabled {4209  opacity: 0.72;4210}42114212.peach-card-header {4213  width: 100%;4214  padding: 13px 16px 11px;4215  background: transparent;4216  color: var(--peach-t0);4217  display: flex;4218  justify-content: space-between;4219  align-items: center;4220  text-align: left;4221  font-size: 0.75rem;4222}42234224.peach-card-body {4225  padding: 0 16px 16px;4226  display: grid;4227  gap: 9px;4228}42294230.peach-card-tag {4231  color: var(--peach-t2);4232  font-family: "IBM Plex Mono", monospace;4233  font-size: 0.5625rem;4234  letter-spacing: 0.12em;4235  text-transform: uppercase;4236}42374238.peach-empty-copy {4239  display: grid;4240  gap: 6px;4241  color: var(--peach-t1);4242  font-size: 0.8125rem;4243}42444245.peach-lock-submit {4246  width: 100%;4247  box-shadow:4248    0 1px 0 rgba(255,255,255,0.10) inset,4249    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4250    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4251    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4252}42534254.peach-lock-secondary {4255  width: 100%;4256  border-color: var(--peach-t3);4257  background: rgba(240, 232, 216, 0.02);4258}42594260.peach-lock-secondary:hover {4261  background: rgba(240, 232, 216, 0.04);4262}42634264.peach-lock-note {4265  max-width: none;4266  line-height: 1.55;4267  margin: 0;4268}42694270.peach-overlay-action {4271  font-size: 0.625rem;4272  padding: 4px 8px;4273  letter-spacing: 0.06em;4274  min-width: 44px;4275  text-align: center;4276}42774278.peach-inline-action {4279  flex-shrink: 0;4280  font-size: 0.5625rem;4281  letter-spacing: 0.1em;4282  text-transform: uppercase;4283  padding: 4px 7px;4284}4285.peach-password-toggle-btn {4286  display: inline-flex;4287  align-items: center;4288  justify-content: center;4289  min-width: 30px;4290  min-height: 26px;4291  padding: 0 7px;4292  border: 1px solid var(--peach-t3);4293  border-radius: 999px;4294  background: rgba(240, 232, 216, 0.04);4295  color: var(--peach-t2);4296  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4297}4298.peach-password-toggle-btn:hover {4299  border-color: var(--peach-t2);4300  color: var(--peach-t0);4301  background: rgba(240, 232, 216, 0.06);4302}43034304.peach-new-textarea {4305  width: 100%;4306  min-height: 88px;4307  resize: vertical;4308  border: 0;4309  outline: none;4310  background: transparent;4311  color: var(--peach-t1);4312  font-family: "IBM Plex Mono", monospace;4313  font-size: 0.75rem;4314  line-height: 1.65;4315  caret-color: var(--peach-accent);4316}43174318.peach-new-textarea::placeholder {4319  color: var(--peach-t2);4320  opacity: 0.7;4321}43224323.peach-settings-actions {4324  display: grid;4325  gap: 8px;4326}43274328.peach-sync-section-label {4329  font-size: 0.6875rem;4330  color: var(--peach-t2);4331  text-transform: uppercase;4332  letter-spacing: 0.05em;4333}43344335.peach-sync-network-note {4336  margin: 0 0 6px;4337  font-size: 0.75rem;4338  color: var(--peach-t2);4339  line-height: 1.4;4340}43414342.peach-settings-row--tappable {4343  background: none;4344  border: none;4345  width: 100%;4346  text-align: left;4347  cursor: pointer;4348  color: var(--peach-t1);4349  font-size: 0.8125rem;4350}4351.peach-settings-row--tappable:hover {4352  color: var(--peach-t0);4353}43544355.peach-sync-pro-hint {4356  display: flex;4357  flex-direction: column;4358  align-items: flex-start;4359  gap: 8px;4360  padding: 12px 0 4px;4361}43624363.peach-sync-device-row {4364  display: flex;4365  justify-content: space-between;4366  align-items: center;4367  padding: 6px 0;4368  border-bottom: 1px solid var(--peach-t3);4369}43704371.peach-sync-device-info {4372  display: flex;4373  flex-direction: column;4374  gap: 2px;4375}43764377.peach-sync-device-name {4378  font-size: 0.8125rem;4379  color: var(--peach-t0);4380}43814382.peach-sync-device-meta {4383  font-size: 0.6875rem;4384  color: var(--peach-t2);4385}43864387.peach-sync-status-dot {4388  display: inline-block;4389  width: 8px;4390  height: 8px;4391  border-radius: 50%;4392  vertical-align: middle;4393}43944395.peach-sync-remove-btn {4396  color: var(--peach-breach);4397}43984399.peach-sync-advanced-row {4400  display: flex;4401  justify-content: space-between;4402  align-items: center;4403  padding: 6px 0;4404  gap: 12px;4405}44064407.peach-sync-advanced-info {4408  display: flex;4409  flex-direction: column;4410  gap: 2px;4411  flex: 1;4412}44134414.peach-sync-advanced-name {4415  font-size: 0.8125rem;4416  color: var(--peach-t0);4417}44184419.peach-sync-reset-confirm {4420  display: flex;4421  flex-direction: column;4422  gap: 8px;4423  padding: 10px;4424  border: 1px solid var(--peach-breach);4425  border-radius: 10px;4426  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4427}44284429.peach-sync-reset-confirm-headline {4430  font-size: 0.8125rem;4431  font-weight: 600;4432  color: var(--peach-t0);4433  margin: 0;4434}44354436.peach-sync-reset-confirm-body {4437  font-size: 0.75rem;4438  color: var(--peach-t1);4439  margin: 0;4440  line-height: 1.4;4441}44424443.peach-btn--danger {4444  background: var(--peach-breach);4445  color: #fff;4446  border-color: var(--peach-breach);4447}4448.peach-btn--danger:hover:not(:disabled) {4449  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4450}4451.peach-btn--danger:disabled {4452  opacity: 0.55;4453  cursor: not-allowed;4454}44554456.peach-sync-hero-icon {4457  color: var(--peach-t1);4458  opacity: 0.85;4459}44604461.peach-import-preview {4462  margin-bottom: 12px;4463  max-height: 152px;4464  overflow-y: auto;4465  border: 1px solid var(--peach-t3);4466  border-radius: 10px;4467  padding: 8px 10px;4468  display: grid;4469  gap: 8px;4470  background: rgba(240, 232, 216, 0.02);4471}44724473.peach-import-preview-row {4474  display: flex;4475  justify-content: space-between;4476  gap: 10px;4477  font-size: 0.6875rem;4478  color: var(--peach-t1);4479}44804481.peach-import-preview-title {4482  color: var(--peach-t0);4483  flex: 1;4484  min-width: 0;4485  overflow: hidden;4486  text-overflow: ellipsis;4487  white-space: nowrap;4488}44894490.peach-import-preview-meta {4491  color: var(--peach-t2);4492  flex-shrink: 0;4493  max-width: 42%;4494  overflow: hidden;4495  text-overflow: ellipsis;4496  white-space: nowrap;4497}44984499.peach-import-preview-more {4500  color: var(--peach-t2);4501  font-size: 0.625rem;4502}45034504.peach-restore-copy {4505  margin: 0;4506  color: var(--peach-t1);4507  font-size: 0.6875rem;4508  line-height: 1.6;4509}45104511.peach-restore-warning {4512  padding: 10px 12px;4513  border-radius: 12px;4514  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4515  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4516  color: var(--peach-t0);4517  font-size: 0.6875rem;4518  line-height: 1.55;4519}45204521.peach-provider-chips {4522  display: flex;4523  flex-wrap: wrap;4524  gap: 6px;4525}45264527.peach-provider-chip {4528  display: inline-flex;4529  align-items: center;4530  padding: 5px 8px;4531  border-radius: 999px;4532  border: 1px solid var(--peach-t3);4533  background: rgba(240, 232, 216, 0.02);4534  color: var(--peach-t1);4535  font-family: "IBM Plex Mono", monospace;4536  font-size: 0.5rem;4537  letter-spacing: 0.08em;4538  text-transform: uppercase;4539}45404541.peach-restore-file,4542.peach-restore-input {4543  width: 100%;4544  border-radius: 10px;4545  border: 1px solid var(--peach-t3);4546  background: var(--peach-s2);4547  color: var(--peach-t0);4548  font-size: 0.75rem;4549}45504551.peach-restore-file {4552  padding: 9px 10px;4553}45544555.peach-restore-file::file-selector-button {4556  margin-right: 10px;4557  padding: 7px 10px;4558  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4559  border-radius: 999px;4560  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4561  color: var(--peach-t0);4562  font-size: 0.625rem;4563  letter-spacing: 0.08em;4564  text-transform: uppercase;4565  cursor: pointer;4566}45674568.peach-restore-input {4569  padding: 10px 12px;4570}45714572.peach-auth-grid {4573  display: grid;4574  gap: 10px;4575}45764577.peach-import-summary {4578  color: var(--peach-t1);4579  font-size: 0.75rem;4580  line-height: 1.6;4581  margin-bottom: 12px;4582}45834584.peach-restore-error {4585  color: rgba(220, 80, 60, 0.95);4586  font-size: 0.75rem;4587  line-height: 1.55;4588}45894590.peach-passkey-card {4591  max-width: 400px;4592  margin: auto 16px;4593  align-self: center;4594  width: calc(100% - 32px);4595}45964597/* Center the approval card vertically inside the overlay-view (which sets4598 * flex-direction: column without justify-content). Without this, the card4599 * sits at the top with a tall empty band below — looks unfinished on the4600 * 320px popup. */4601.peach-overlay-view:has(.peach-passkey-card) {4602  justify-content: center;4603}46044605.peach-pro-badge {4606  padding: 2px 6px;4607  border-radius: 999px;4608  font-family: var(--font-ui);4609  font-size: 0.625rem;4610  letter-spacing: 0.08em;4611  text-transform: uppercase;4612  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4613  color: var(--peach-accent);4614}46154616/* ── Shortcuts rebind table ─────────────────────────────────── */4617.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4618.peach-shortcut-row {4619  display: flex;4620  align-items: center;4621  gap: 10px;4622  padding: 6px 0;4623}4624.peach-shortcut-row-label {4625  flex: 1;4626  font-size: 0.75rem;4627  color: var(--peach-t0);4628}4629.peach-shortcut-chip {4630  min-width: 64px;4631  padding: 4px 10px;4632  border-radius: 6px;4633  border: 1px solid var(--peach-t3);4634  background: var(--peach-input-bg, var(--surface-card));4635  color: var(--peach-t0);4636  font-family: var(--font-mono);4637  font-size: 0.6875rem;4638  letter-spacing: 0.04em;4639  cursor: pointer;4640  text-align: center;4641  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4642}4643.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4644.peach-shortcut-chip.is-custom {4645  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4646  color: var(--peach-accent);4647}4648.peach-shortcut-chip.is-capturing {4649  border-color: var(--peach-accent);4650  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4651  color: var(--peach-accent);4652  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4653}4654@keyframes peach-shortcut-capture-pulse {4655  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4656  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4657}4658.peach-shortcut-reset {4659  background: transparent;4660  border: none;4661  cursor: pointer;4662  color: var(--peach-t2);4663  padding: 4px 6px;4664  border-radius: 5px;4665  font-size: 0.875rem;4666  line-height: 1;4667  transition: color 120ms ease, background 120ms ease;4668}4669.peach-shortcut-reset:hover {4670  color: var(--peach-t0);4671  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4672}4673.peach-shortcuts-conflict {4674  margin: 4px 0 0;4675  padding: 8px 10px;4676  border-radius: 7px;4677  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4678  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4679  font-family: var(--font-mono);4680  font-size: 0.6875rem;4681  color: var(--peach-t0);4682}46834684/* ── Help dialog overlay (? to open) ────────────────────────── */4685.peach-shortcuts-help-backdrop {4686  position: fixed;4687  inset: 0;4688  background: rgba(0, 0, 0, 0.55);4689  backdrop-filter: blur(2px);4690  display: flex;4691  align-items: center;4692  justify-content: center;4693  z-index: 1000;4694  animation: peach-help-fade-in 140ms ease forwards;4695}4696@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4697.peach-shortcuts-help-card {4698  width: min(320px, 92vw);4699  max-height: 80vh;4700  overflow-y: auto;4701  border-radius: 14px;4702  border: 1px solid var(--peach-t3);4703  background: var(--peach-bg);4704  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4705  padding: 16px 18px 18px;4706  display: flex;4707  flex-direction: column;4708  gap: 12px;4709}4710.peach-shortcuts-help-head {4711  display: flex; align-items: center; justify-content: space-between;4712}4713.peach-shortcuts-help-head h3 {4714  margin: 0;4715  font-family: var(--font-display);4716  font-style: italic;4717  font-weight: 400;4718  font-size: 22px;4719  color: var(--peach-t0);4720}4721.peach-shortcuts-help-close {4722  background: transparent;4723  border: none;4724  color: var(--peach-t2);4725  cursor: pointer;4726  font-size: 0.875rem;4727  padding: 4px 8px;4728  border-radius: 5px;4729}4730.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4731.peach-shortcuts-help-body ul {4732  list-style: none; padding: 0; margin: 4px 0 12px;4733  display: grid; gap: 8px;4734}4735.peach-shortcuts-help-body li {4736  display: flex; align-items: center; justify-content: space-between; gap: 12px;4737  font-size: 0.75rem; color: var(--peach-t0);4738}4739.peach-shortcuts-help-body kbd {4740  font-family: var(--font-mono);4741  font-size: 0.6875rem;4742  padding: 3px 8px;4743  border-radius: 6px;4744  background: var(--surface-card);4745  border: 1px solid var(--peach-t3);4746  color: var(--peach-accent);4747  letter-spacing: 0.04em;4748}47494750/* ── Pro promo on Account screen ────────────────────────────── */4751.peach-pro-promo {4752  position: relative;4753  border-radius: 14px;4754  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4755  background:4756    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4757    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4758    var(--surface-card);4759  overflow: hidden;4760  margin-bottom: 14px;4761}4762.peach-pro-promo-glow {4763  position: absolute;4764  inset: -40% -20% auto auto;4765  width: 220px; height: 220px;4766  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4767  pointer-events: none;4768  filter: blur(8px);4769}4770.peach-pro-promo-inner {4771  position: relative;4772  padding: 18px 18px 16px;4773}4774.peach-pro-promo-title {4775  font-family: var(--font-display);4776  font-style: italic;4777  font-weight: 400;4778  font-size: 28px;4779  line-height: 1;4780  letter-spacing: -0.005em;4781  color: var(--peach-t0);4782  margin: 0 0 4px;4783}4784.peach-pro-promo-tagline {4785  font-family: var(--font-mono);4786  font-size: 0.625rem;4787  letter-spacing: 0.06em;4788  color: var(--peach-t2);4789  margin: 0 0 14px;4790}4791.peach-pro-promo-list {4792  list-style: none;4793  margin: 0 0 16px;4794  padding: 0;4795  display: grid;4796  gap: 9px;4797}4798.peach-pro-promo-list li {4799  display: flex;4800  align-items: flex-start;4801  gap: 9px;4802  font-size: 0.75rem;4803  color: var(--peach-t1);4804  line-height: 1.4;4805}4806.peach-pro-promo-list svg {4807  width: 14px;4808  height: 14px;4809  flex-shrink: 0;4810  color: var(--peach-accent);4811  margin-top: 2px;4812}4813.peach-pro-promo-list span {4814  color: var(--peach-t0);4815}4816.peach-pro-promo-cta {4817  width: 100%;4818  background: var(--peach-accent);4819  color: #fff;4820  border: none;4821  padding: 9px 12px;4822  border-radius: 9px;4823  font-size: 0.75rem;4824  font-weight: 500;4825  font-family: var(--font-ui);4826  letter-spacing: 0.02em;4827  text-decoration: none;4828  display: inline-flex;4829  align-items: center;4830  justify-content: center;4831  cursor: pointer;4832  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4833  box-shadow: 0 2px 16px var(--peach-glow);4834}4835.peach-pro-promo-cta:hover {4836  filter: brightness(1.07);4837  box-shadow: 0 4px 24px var(--peach-glow);4838  transform: translateY(-1px);4839}4840.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }48414842.peach-pro-or-divider {4843  display: flex;4844  align-items: center;4845  gap: 10px;4846  margin: 4px 0 12px;4847  font-family: var(--font-mono);4848  font-size: 0.625rem;4849  letter-spacing: 0.06em;4850  color: var(--peach-t2);4851  text-transform: uppercase;4852}4853.peach-pro-or-divider::before,4854.peach-pro-or-divider::after {4855  content: "";4856  flex: 1;4857  height: 1px;4858  background: var(--peach-t3);4859}48604861.peach-loading {4862  position: absolute;4863  inset: 0;4864  display: flex;4865  align-items: center;4866  justify-content: center;4867  background: var(--bg);4868  animation: peach-loading-pulse 1.2s ease-in-out infinite;4869}48704871@keyframes peach-loading-pulse {4872  0%, 100% { opacity: 0.6; }4873  50% { opacity: 1; }4874}48754876/* ── Health Dashboard ─────────────────────────────────────────────────── */4877.peach-health-body {4878  flex: 1;4879  overflow-y: auto;4880  display: flex;4881  flex-direction: column;4882  /* Hide the platform scrollbar — every other scrollable surface in the4883   * popup hides it; the Health view was the one outlier and it ruined the4884   * polish. Behavior unchanged, just no rail rendered. */4885  scrollbar-width: none;4886  -ms-overflow-style: none;4887}4888.peach-health-body::-webkit-scrollbar { display: none; }48894890/* Loading screen for the Vault Health view. The advanced report computation4891 * can run for a few seconds on a large vault — without a clear loading4892 * screen the surface looked broken (the entry view bleeds through the4893 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4894.peach-health-loading-screen {4895  flex: 1;4896  display: flex;4897  flex-direction: column;4898  align-items: center;4899  justify-content: center;4900  gap: 14px;4901  padding: 32px 28px;4902  text-align: center;4903}49044905.peach-health-loading-glyph {4906  width: 48px;4907  height: 48px;4908  display: flex;4909  align-items: center;4910  justify-content: center;4911  border-radius: 14px;4912  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4913  color: var(--peach-accent);4914}49154916.peach-health-loading-title {4917  margin: 0;4918  font-family: var(--font-display);4919  font-style: italic;4920  font-weight: 300;4921  font-size: 19px;4922  line-height: 1.2;4923  color: var(--peach-t0);4924}49254926.peach-health-loading-copy {4927  margin: 0;4928  max-width: 240px;4929  font-size: 0.75rem;4930  line-height: 1.55;4931  color: var(--peach-t2);4932}49334934.peach-health-loading-track {4935  width: 200px;4936  height: 3px;4937  margin-top: 6px;4938  border-radius: 999px;4939  background: rgba(240, 232, 216, 0.06);4940  overflow: hidden;4941}49424943.peach-health-loading-fill {4944  width: 40%;4945  height: 100%;4946  border-radius: inherit;4947  background: linear-gradient(4948    90deg,4949    transparent 0%,4950    var(--peach-accent) 50%,4951    transparent 100%4952  );4953  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4954}49554956@keyframes peach-health-loading-sweep {4957  0%   { transform: translateX(-100%); }4958  100% { transform: translateX(350%); }4959}49604961[data-motion="reduce"] .peach-health-loading-fill,4962[data-motion="reduce"] .peach-health-loading-glyph svg path {4963  animation: none;4964}49654966.peach-health-summary {4967  padding: 10px 16px 6px;4968  font-family: "IBM Plex Mono", monospace;4969  font-size: 0.6875rem;4970}4971.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4972.peach-health-summary-ok { color: var(--peach-t2); }49734974.peach-health-check-row {4975  padding: 0 16px 10px;4976}4977.peach-health-check-btn {4978  width: 100%;4979  display: flex;4980  align-items: center;4981  justify-content: center;4982}49834984.peach-health-sections {4985  flex: 1;4986  display: flex;4987  flex-direction: column;4988}49894990.peach-health-section {4991  border-bottom: 1px solid var(--peach-t3);4992}49934994.peach-health-section-header {4995  width: 100%;4996  display: flex;4997  align-items: center;4998  justify-content: space-between;4999  padding: 9px 16px;5000  background: transparent;5001  cursor: pointer;5002  color: var(--peach-t0);5003}50045005.peach-health-section-title-row {5006  display: flex;5007  align-items: center;5008  gap: 8px;5009}50105011.peach-health-count-badge {5012  display: inline-flex;5013  align-items: center;5014  justify-content: center;5015  min-width: 20px;5016  height: 18px;5017  padding: 0 5px;5018  border-radius: 999px;5019  background: rgba(220,80,60,0.15);5020  border: 1px solid rgba(220,80,60,0.25);5021  font-family: "IBM Plex Mono", monospace;5022  font-size: 0.5625rem;5023  color: rgba(220,80,60,0.9);5024}50255026.peach-health-section-title {5027  font-family: "IBM Plex Mono", monospace;5028  font-size: 0.6875rem;5029  text-transform: uppercase;5030  letter-spacing: 0.1em;5031  color: var(--peach-t1);5032}50335034.peach-health-chevron {5035  color: var(--peach-t2);5036  transition: transform 200ms ease;5037  flex-shrink: 0;5038}5039.peach-health-chevron.is-expanded {5040  transform: rotate(180deg);5041}50425043.peach-health-section-body {5044  padding: 0 16px 10px;5045  display: flex;5046  flex-direction: column;5047  gap: 4px;5048}50495050.peach-health-row {5051  display: flex;5052  align-items: flex-start;5053  justify-content: space-between;5054  gap: 8px;5055  padding: 6px 8px;5056  border-radius: 8px;5057  background: rgba(240,232,216,0.02);5058}50595060.peach-health-row-info {5061  flex: 1;5062  min-width: 0;5063  display: flex;5064  flex-direction: column;5065  gap: 2px;5066}50675068.peach-health-row-name {5069  font-family: var(--font-display);5070  font-size: 0.9375rem;5071  font-style: italic;5072  font-weight: 400;5073  color: var(--peach-t0);5074  white-space: nowrap;5075  overflow: hidden;5076  text-overflow: ellipsis;5077}50785079.peach-health-row-meta {5080  font-family: "IBM Plex Mono", monospace;5081  font-size: 0.5625rem;5082  color: var(--peach-t2);5083  letter-spacing: 0.05em;5084}50855086.peach-health-fix-btn {5087  font-size: 0.5625rem;5088  letter-spacing: 0.08em;5089  text-transform: uppercase;5090  padding: 4px 7px;5091  flex-shrink: 0;5092  display: flex;5093  align-items: center;5094}50955096.peach-health-empty {5097  font-family: "IBM Plex Mono", monospace;5098  font-size: 0.625rem;5099  color: var(--peach-t2);5100  padding: 6px 0;5101}51025103.peach-health-loading {5104  font-family: "IBM Plex Mono", monospace;5105  font-size: 0.625rem;5106  color: var(--peach-t2);5107  padding: 6px 0;5108  display: flex;5109  align-items: center;5110  gap: 6px;5111}51125113.peach-health-loading::before {5114  content: "";5115  width: 10px;5116  height: 10px;5117  border: 1.5px solid var(--peach-t3);5118  border-top-color: var(--peach-accent);5119  border-radius: 50%;5120  animation: peach-spin 600ms linear infinite;5121}51225123@keyframes peach-spin {5124  to { transform: rotate(360deg); }5125}51265127.peach-spinner {5128  width: 32px;5129  height: 32px;5130  border: 2px solid var(--peach-s2);5131  border-top-color: var(--peach-accent);5132  border-radius: 50%;5133  margin: 0 auto 16px;5134  animation: peach-spin 0.8s linear infinite;5135}51365137.peach-progress-screen {5138  text-align: center;5139  padding: 32px 16px;5140}51415142.peach-progress-screen-title {5143  font-size: 0.8125rem;5144  color: var(--peach-t0);5145  margin-bottom: 16px;5146}51475148.peach-progress-screen-stage {5149  font-size: 0.6875rem;5150  color: var(--peach-t2);5151  min-height: 14px;5152}51535154.peach-progress-screen-note {5155  font-size: 0.625rem;5156  color: var(--peach-t2);5157  margin-top: 8px;5158}51595160.peach-pairing-body {5161  flex: 1;5162  overflow-y: auto;5163  display: flex;5164  flex-direction: column;5165}51665167.peach-pairing-content {5168  flex: 1;5169  display: flex;5170  flex-direction: column;5171  align-items: center;5172  justify-content: center;5173  gap: 14px;5174  padding: 28px 20px;5175  text-align: center;5176}51775178.peach-pairing-code-screen {5179  gap: 18px;5180}51815182.peach-pairing-headline {5183  font-family: var(--font-display);5184  font-style: italic;5185  font-weight: 300;5186  font-size: 28px;5187  color: var(--peach-t0);5188  margin: 0;5189  line-height: 1;5190}51915192.peach-pairing-subline {5193  font-size: 0.75rem;5194  color: var(--peach-t2);5195  max-width: 220px;5196  line-height: 1.5;5197  margin: 0;5198}51995200.peach-pairing-subline--center {5201  text-align: center;5202}52035204/* 6-digit pairing code — both display (.peach-pairing-code) and entry5205   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking5206   so the two modes feel like the same surface. */5207.peach-pairing-code {5208  font-family: "IBM Plex Mono", monospace;5209  font-size: 36px;5210  letter-spacing: 0.25em;5211  color: var(--peach-t0);5212  text-align: center;5213  padding: 24px 0;5214  text-shadow:5215    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),5216    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);5217  background: transparent;5218  border: 0;5219  cursor: default;5220  user-select: text;5221}52225223.peach-pairing-code--loading,5224.peach-pairing-code--expired {5225  font-size: 18px;5226  letter-spacing: 0.04em;5227  color: var(--peach-t2);5228  cursor: pointer;5229  text-shadow: none;5230}52315232.peach-pairing-qr-container {5233  display: flex;5234  flex-direction: column;5235  align-items: center;5236  gap: 10px;5237}52385239.peach-pairing-qr {5240  width: 240px;5241  height: 240px;5242  display: block;5243}52445245.peach-pairing-instruction {5246  font-size: 0.75rem;5247  color: var(--peach-t2);5248  text-align: center;5249  line-height: 1.5;5250  margin: 0;5251  max-width: 220px;5252}52535254.peach-pairing-expiry {5255  font-family: "IBM Plex Mono", monospace;5256  font-size: 13px;5257  letter-spacing: 0.06em;5258  color: var(--peach-t2);5259  margin: 0;5260}52615262.peach-pairing-regen {5263  font-size: 0.75rem;5264  color: var(--peach-accent);5265  background: transparent;5266  border: 0;5267  cursor: pointer;5268  padding: 4px 0;5269  text-decoration: underline;5270  text-underline-offset: 2px;5271}52725273.peach-pairing-code-input {5274  font-family: "IBM Plex Mono", monospace;5275  font-size: 36px;5276  letter-spacing: 0.25em;5277  color: var(--peach-t0);5278  background: transparent;5279  border: 0;5280  border-bottom: 1px solid var(--peach-t3);5281  outline: none;5282  text-align: center;5283  padding: 18px 0;5284  width: 220px;5285  caret-color: var(--peach-accent);5286  transition: border-color 160ms ease;5287}52885289.peach-pairing-code-input::placeholder {5290  color: var(--peach-t3);5291}52925293.peach-pairing-code-input:focus {5294  border-bottom-color: var(--peach-accent);5295}52965297.peach-pairing-toggle {5298  background: transparent;5299  border: 0;5300  color: var(--peach-t2);5301  font-size: 0.75rem;5302  padding: 8px 4px;5303  cursor: pointer;5304  transition: color 120ms ease;5305}53065307.peach-pairing-toggle:hover:not(:disabled) {5308  color: var(--peach-t1);5309}53105311.peach-pairing-toggle:disabled {5312  opacity: 0.5;5313  cursor: default;5314}53155316.peach-pairing-hint {5317  font-size: 0.6875rem;5318  color: var(--peach-t2);5319  margin: 0;5320  text-align: center;5321}53225323.peach-pairing-status {5324  display: flex;5325  align-items: center;5326  gap: 8px;5327  margin: 0;5328  font-size: 0.75rem;5329  color: var(--peach-t1);5330}53315332.peach-pairing-error {5333  margin: 0;5334  font-size: 0.6875rem;5335  color: var(--peach-breach);5336}53375338.peach-pairing-error--muted {5339  color: var(--peach-t2);5340}53415342.peach-pairing-spinner {5343  width: 12px;5344  height: 12px;5345  border: 1.5px solid var(--peach-t3);5346  border-top-color: var(--peach-accent);5347  border-radius: 50%;5348  animation: peach-spin 0.8s linear infinite;5349}53505351.peach-pairing-success-icon,5352.peach-pairing-error-icon,5353.peach-pairing-hero {5354  display: inline-flex;5355  align-items: center;5356  justify-content: center;5357}53585359/* Tag chips */5360.peach-tag-chip {5361  display: inline-flex;5362  align-items: center;5363  gap: 4px;5364  padding: 3px 8px;5365  border-radius: 999px;5366  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5367  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5368  color: var(--peach-t0);5369  font-family: "IBM Plex Mono", monospace;5370  font-size: 0.625rem;5371  letter-spacing: 0.04em;5372}53735374.peach-tag-chip-remove {5375  background: transparent;5376  border: none;5377  color: inherit;5378  opacity: 0.6;5379  cursor: pointer;5380  padding: 0;5381  font-size: 0.75rem;5382  line-height: 1;5383}53845385.peach-tag-chip-remove:hover {5386  opacity: 1;5387}53885389/* Tag input */5390.peach-tag-input-wrap {5391  border-bottom: 1px solid var(--peach-t3);5392}53935394.peach-tag-suggestions {5395  display: flex;5396  flex-wrap: wrap;5397  gap: 4px;5398  padding: 6px 0;5399}54005401.peach-tag-suggestion {5402  padding: 2px 8px;5403  border-radius: 999px;5404  border: 1px solid var(--peach-t3);5405  background: var(--peach-s2);5406  color: var(--peach-t1);5407  font-family: "IBM Plex Mono", monospace;5408  font-size: 0.625rem;5409  cursor: pointer;5410  transition: border-color 80ms ease, background 80ms ease;5411}54125413.peach-tag-suggestion:hover {5414  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5415  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5416}54175418/* Identity suggestions — shown below username/email inputs in new-entry form */5419@keyframes peach-suggest-in {5420  from { opacity: 0; transform: translateY(-4px); }5421  to   { opacity: 1; transform: none; }5422}54235424.peach-identity-suggestions {5425  display: flex;5426  flex-direction: column;5427  gap: 1px;5428  margin-top: 4px;5429  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5430}54315432.peach-identity-filter-row {5433  display: flex;5434  align-items: center;5435  gap: 4px;5436  padding: 2px 0 5px;5437}54385439.peach-identity-collapse-btn {5440  margin-left: auto;5441  background: transparent;5442  border: none;5443  cursor: pointer;5444  color: var(--peach-t3);5445  padding: 2px 4px;5446  display: flex;5447  align-items: center;5448  line-height: 0;5449  border-radius: 3px;5450  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5451}54525453.peach-identity-collapse-btn:hover {5454  color: var(--peach-t1);5455}54565457.peach-identity-collapse-btn.is-collapsed {5458  transform: rotate(-90deg);5459}54605461.peach-identity-rows {5462  display: grid;5463  grid-template-rows: 1fr;5464  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5465}54665467.peach-identity-rows.is-collapsed {5468  grid-template-rows: 0fr;5469}54705471.peach-identity-rows-inner {5472  overflow-y: auto;5473  min-height: 0;5474  max-height: 148px;5475  scrollbar-width: thin;5476  scrollbar-color: var(--peach-t3) transparent;5477  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5478  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5479}54805481.peach-identity-rows-inner::-webkit-scrollbar {5482  width: 4px;5483}54845485.peach-identity-rows-inner::-webkit-scrollbar-track {5486  background: transparent;5487}54885489.peach-identity-rows-inner::-webkit-scrollbar-thumb {5490  background: var(--peach-t3);5491  border-radius: 2px;5492}54935494.peach-identity-filter-pill {5495  padding: 2px 7px;5496  border-radius: 999px;5497  border: 1px solid var(--peach-t3);5498  background: transparent;5499  color: var(--peach-t2);5500  font-family: "IBM Plex Mono", monospace;5501  font-size: 0.6rem;5502  cursor: pointer;5503  transition: border-color 80ms, background 80ms, color 80ms;5504}55055506.peach-identity-filter-pill.is-on {5507  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5508  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5509  color: var(--peach-accent);5510}55115512.peach-identity-suggestion {5513  display: flex;5514  align-items: center;5515  gap: 6px;5516  width: 100%;5517  padding: 4px 6px;5518  border-radius: 5px;5519  border: none;5520  background: transparent;5521  cursor: pointer;5522  text-align: left;5523  transition: background 80ms ease;5524}55255526.peach-identity-suggestion:hover,5527.peach-identity-suggestion:focus {5528  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5529  outline: none;5530}55315532.peach-identity-suggestion-value {5533  font-family: "IBM Plex Mono", monospace;5534  font-size: 0.7rem;5535  color: var(--peach-t1);5536  overflow: hidden;5537  text-overflow: ellipsis;5538  white-space: nowrap;5539  flex: 1;5540  min-width: 0;5541}55425543.peach-identity-suggestion-type {5544  font-family: "IBM Plex Mono", monospace;5545  font-size: 0.55rem;5546  font-weight: 600;5547  flex-shrink: 0;5548  padding: 1px 4px;5549  border-radius: 3px;5550}55515552.peach-identity-suggestion-type--email {5553  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5554  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5555}55565557.peach-identity-suggestion-type--username {5558  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5559  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5560}55615562.peach-identity-suggestion-meta {5563  font-family: "IBM Plex Mono", monospace;5564  font-size: 0.6rem;5565  color: var(--peach-t3);5566  flex-shrink: 0;5567}55685569/* Tag filter strip */5570.peach-tag-filter-strip {5571  border-bottom: 1px solid var(--peach-t3);5572  flex-shrink: 0;5573}55745575.peach-tag-filter-chip {5576  display: inline-flex;5577  align-items: center;5578  padding: 4px 10px;5579  border-radius: 999px;5580  border: 1px solid var(--peach-t3);5581  background: transparent;5582  color: var(--peach-t2);5583  font-family: "IBM Plex Mono", monospace;5584  font-size: 0.5625rem;5585  letter-spacing: 0.06em;5586  text-transform: uppercase;5587  cursor: pointer;5588  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5589  white-space: nowrap;5590}55915592.peach-tag-filter-chip:hover {5593  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5594  color: var(--peach-t1);5595}55965597.peach-tag-filter-chip.is-selected {5598  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5599  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5600  color: var(--peach-t0);5601}56025603/* ─────────────────────────────────────────────────────────────────────────5604   v1.4.12 additions5605   ─────────────────────────────────────────────────────────────────────── */56065607/* Sort bar */5608.peach-sort-bar {5609  display: flex;5610  align-items: center;5611  gap: 4px;5612  padding: 5px 12px;5613  border-bottom: 1px solid var(--peach-t3);5614  flex-shrink: 0;5615  overflow-x: auto;5616  scrollbar-width: none;5617}56185619.peach-sort-btn {5620  padding: 2px 9px;5621  border-radius: 999px;5622  border: 1px solid transparent;5623  background: transparent;5624  color: var(--peach-t2);5625  font-family: "IBM Plex Mono", monospace;5626  font-size: 0.5625rem;5627  letter-spacing: 0.07em;5628  text-transform: uppercase;5629  cursor: pointer;5630  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5631  white-space: nowrap;5632}56335634.peach-sort-btn:hover {5635  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5636  color: var(--peach-t1);5637}56385639.peach-sort-btn.is-active {5640  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5641  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5642  color: var(--peach-t0);5643}56445645.peach-sort-scope-btn {5646  padding-inline: 8px;5647  font-size: 0.53125rem;5648  letter-spacing: 0.05em;5649}56505651.peach-sort-domain-hint {5652  margin-left: auto;5653  font-family: "IBM Plex Mono", monospace;5654  font-size: 0.5625rem;5655  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5656  white-space: nowrap;5657  overflow: hidden;5658  text-overflow: ellipsis;5659  max-width: 110px;5660}56615662/* Tab-match badge on entry rows */5663.peach-tab-match-badge {5664  display: inline-block;5665  width: 6px;5666  height: 6px;5667  border-radius: 50%;5668  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5669  margin-left: 5px;5670  vertical-align: middle;5671  flex-shrink: 0;5672  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5673}56745675.peach-entry-row.is-tab-match {5676  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5677  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5678}56795680.peach-entry-row.is-tab-match:hover {5681  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5682}56835684/* Entry list stagger entrance */5685@keyframes peach-entry-fadein {5686  from { opacity: 0; transform: translateY(4px); }5687  to   { opacity: 1; transform: translateY(0); }5688}56895690.peach-vault-list .peach-entry-row {5691  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5692}56935694/* Button press micro-interaction */5695.peach-btn:active {5696  transform: scale(0.95);5697  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5698}56995700.peach-sort-btn:active,5701.peach-tag-filter-chip:active {5702  transform: scale(0.93);5703  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5704}57055706/* Password strength bar (Lock view + shared) */5707.peach-password-strength {5708  display: flex;5709  align-items: center;5710  gap: 8px;5711  margin-top: 6px;5712}57135714.peach-strength-bar {5715  flex: 1;5716  height: 3px;5717  border-radius: 2px;5718  background: var(--peach-t3);5719  overflow: hidden;5720}57215722.peach-strength-fill {5723  height: 100%;5724  border-radius: 2px;5725  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5726              background 300ms ease;5727}57285729.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5730.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5731.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5732.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }57335734.peach-strength-label {5735  font-family: "IBM Plex Mono", monospace;5736  font-style: italic;5737  font-size: 0.5625rem;5738  font-weight: 300;5739  letter-spacing: 0.06em;5740  color: var(--peach-t2);5741  min-width: 36px;5742  text-align: right;5743}57445745.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5746.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5747.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5748.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }57495750/* Duress form */5751.peach-duress-status {5752  padding: 2px 8px;5753  border-radius: 999px;5754  border: 1px solid var(--peach-t3);5755  font-family: "IBM Plex Mono", monospace;5756  font-size: 0.5625rem;5757  letter-spacing: 0.07em;5758  text-transform: uppercase;5759  color: var(--peach-t2);5760  flex-shrink: 0;5761}57625763.peach-duress-status.is-active {5764  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5765  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5766  color: var(--peach-t0);5767}57685769.peach-duress-form {5770  padding: 8px 0 4px;5771  display: flex;5772  flex-direction: column;5773  gap: 6px;5774}57755776.peach-duress-form .peach-label {5777  margin-top: 4px;5778}57795780.peach-duress-actions {5781  display: flex;5782  gap: 6px;5783  align-items: center;5784  margin-top: 4px;5785}57865787.peach-duress-actions .peach-btn:first-child {5788  margin-right: auto;5789}57905791/* Improved overlay spring entrance */5792.peach-overlay-view.ov-enter-up {5793  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5794}57955796@keyframes ov-enter-up-spring {5797  from { opacity: 0; transform: translateY(16px) scale(0.98); }5798  to   { opacity: 1; transform: translateY(0) scale(1); }5799}58005801.peach-overlay-view.ov-enter-right {5802  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5803}58045805@keyframes ov-enter-right-spring {5806  from { opacity: 0; transform: translateX(18px) scale(0.98); }5807  to   { opacity: 1; transform: translateX(0) scale(1); }5808}58095810/* ── Onboarding-mode restore screens (file import) ── */5811/* Used when MainImportView renders during onboarding (no vault yet).5812   Animates like a lock-screen transition. */5813.peach-lock-view {5814  position: absolute;5815  inset: 0;5816  display: flex;5817  flex-direction: column;5818  background:5819    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5820    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5821    var(--peach-bg);5822  z-index: 2;5823  overflow: hidden;5824  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5825}58265827.peach-lock-view-header {5828  display: flex;5829  align-items: center;5830  justify-content: space-between;5831  padding: 16px 18px 12px;5832  flex-shrink: 0;5833}58345835/* ───────── Settings: auto-lock select ───────── */5836.peach-settings-select {5837  font-family: "IBM Plex Mono", monospace;5838  font-size: 0.6875rem;5839  background: transparent;5840  border: 1px solid var(--peach-t3);5841  border-radius: 4px;5842  color: var(--peach-t1);5843  padding: 3px 6px;5844  cursor: pointer;5845  outline: none;5846}5847.peach-settings-select:focus {5848  border-color: var(--peach-accent);5849}58505851/* ───────── Duress status pill (new polished) ───────── */5852.peach-duress-status-pill {5853  font-family: "IBM Plex Mono", monospace;5854  font-size: 0.5625rem;5855  text-transform: uppercase;5856  letter-spacing: 0.12em;5857  padding: 2px 8px;5858  border-radius: 12px;5859  background: var(--peach-t3);5860  color: var(--peach-t2);5861  flex-shrink: 0;5862}5863.peach-duress-status-pill.is-active {5864  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5865  color: var(--peach-accent);5866}58675868/* ───────── Entry advanced disclosure (canary) ───────── */5869.peach-entry-advanced {5870  margin-top: 12px;5871  border-top: 1px solid var(--peach-t3);5872  padding-top: 10px;5873  position: relative;5874  z-index: 1;5875}5876.peach-entry-advanced-toggle {5877  display: flex;5878  align-items: center;5879  justify-content: space-between;5880  width: 100%;5881  background: transparent;5882  border: none;5883  cursor: pointer;5884  padding: 0;5885  color: var(--peach-t2);5886}5887.peach-canary-section {5888  margin-top: 10px;5889  display: grid;5890  gap: 6px;5891}58925893/* ───────── Import: merge/replace radio choices ───────── */5894.peach-import-choice {5895  display: flex;5896  align-items: flex-start;5897  gap: 10px;5898  padding: 8px 10px;5899  border: 1px solid var(--peach-t3);5900  border-radius: 10px;5901  cursor: pointer;5902  margin-bottom: 6px;5903  transition: border-color 120ms ease, background 120ms ease;5904}5905.peach-import-choice:hover {5906  border-color: var(--peach-accent);5907}5908.peach-import-choice input[type="radio"] {5909  margin-top: 3px;5910  accent-color: var(--peach-accent);5911  flex-shrink: 0;5912}5913.peach-import-choice-main {5914  display: flex;5915  flex-direction: column;5916  gap: 2px;5917  min-width: 0;5918}5919.peach-import-choice-label {5920  font-size: 0.75rem;5921  color: var(--peach-t0);5922}5923.peach-import-choice-sub {5924  font-size: 0.6875rem;5925  color: var(--peach-t2);5926  line-height: 1.5;5927}59285929/* ───────── Export: success confirmation strip ───────── */5930.peach-export-success {5931  display: flex;5932  align-items: flex-start;5933  gap: 10px;5934  padding: 12px;5935  border-radius: 12px;5936  border: 1px solid rgba(150, 175, 110, 0.3);5937  background: rgba(150, 175, 110, 0.08);5938  color: var(--peach-t0);5939  font-size: 0.75rem;5940  line-height: 1.55;5941}5942.peach-export-success-check {5943  color: rgba(150, 175, 110, 0.9);5944  font-size: 0.875rem;5945  flex-shrink: 0;5946}59475948/* ── Trash view ──────────────────────────────────────────────────────── */5949.peach-trash-entry-row {5950  display: flex;5951  align-items: center;5952  justify-content: space-between;5953  gap: 8px;5954  padding: 8px 0;5955  border-bottom: 1px solid var(--peach-border);5956}5957.peach-trash-entry-info {5958  flex: 1;5959  min-width: 0;5960  display: flex;5961  flex-direction: column;5962  gap: 2px;5963}5964.peach-trash-entry-title {5965  font-size: 0.8125rem;5966  color: var(--peach-t0);5967  overflow: hidden;5968  text-overflow: ellipsis;5969  white-space: nowrap;5970}5971.peach-trash-entry-meta {5972  font-family: var(--font-mono);5973  font-size: 0.5625rem;5974  color: var(--peach-t2);5975  letter-spacing: 0.04em;5976}5977.peach-trash-entry-actions {5978  display: flex;5979  align-items: center;5980  gap: 4px;5981  flex-shrink: 0;5982}5983.peach-trash-delete-btn {5984  background: transparent;5985  border: 0;5986  color: var(--peach-t3);5987  font-size: 1rem;5988  line-height: 1;5989  cursor: pointer;5990  padding: 2px 5px;5991  transition: color 0.15s;5992}5993.peach-trash-delete-btn:hover { color: var(--peach-breach); }5994.peach-trash-list {5995  overflow-y: auto;5996}5997.peach-trash-footer {5998  display: flex;5999  align-items: center;6000  gap: 8px;6001  padding: 8px 0 0;6002  border-top: 1px solid var(--peach-border);6003  margin-top: 4px;6004}6005.peach-trash-purge-all {6006  background: transparent;6007  border: 0;6008  color: var(--peach-t3);6009  font-size: 0.625rem;6010  cursor: pointer;6011  padding: 4px 0;6012  letter-spacing: 0.03em;6013  transition: color 0.2s;6014}6015.peach-trash-purge-all:hover { color: var(--peach-breach); }6016.peach-trash-purge-confirm-label {6017  font-size: 0.625rem;6018  color: var(--peach-t1);6019  flex: 1;6020}60216022/* ── Settings shortcuts grid ─────────────────────────────────────────── */6023.peach-shortcuts-grid {6024  display: grid;6025  grid-template-columns: auto 1fr;6026  gap: 6px 12px;6027  align-items: center;6028  padding: 4px 0;6029}6030.peach-shortcut-key {6031  font-family: var(--font-mono);6032  font-size: 0.625rem;6033  color: var(--peach-t0);6034  background: var(--peach-t3);6035  border-radius: 4px;6036  padding: 2px 6px;6037  white-space: nowrap;6038  text-align: center;6039}6040.peach-shortcut-desc {6041  font-size: 0.6875rem;6042  color: var(--peach-t1);6043}60446045/* ── Sort bar trash button ───────────────────────────────────────────── */6046.peach-sort-trash-btn {6047  display: flex;6048  align-items: center;6049  justify-content: center;6050  padding: 3px 5px;6051  background: transparent;6052  border: none;6053  cursor: pointer;6054  color: var(--peach-t2);6055  border-radius: 4px;6056  transition: color 140ms ease, background 140ms ease;6057}6058.peach-sort-trash-btn:hover {6059  color: var(--peach-t1);6060  background: var(--peach-t3);6061}6062.peach-sort-trash-btn.is-active {6063  color: var(--peach-accent);6064}60656066/* Accent color picker */6067.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }6068.peach-accent-picker {6069  display: flex;6070  flex-wrap: wrap;6071  gap: 7px;6072  padding: 2px 0;6073}6074.peach-accent-swatch {6075  width: 22px;6076  height: 22px;6077  border-radius: 50%;6078  border: 2px solid transparent;6079  cursor: pointer;6080  padding: 0;6081  transition: transform 100ms;6082  outline-offset: 2px;6083}6084.peach-accent-swatch:hover { transform: scale(1.15); }6085.peach-accent-swatch.is-active {6086  border-color: var(--peach-t0);6087  transform: scale(1.1);6088}60896090.peach-pill-group {6091  display: flex;6092  gap: 6px;6093}6094.peach-pill-group .peach-btn.is-active {6095  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);6096  border-color: var(--peach-accent);6097  color: var(--peach-t0);6098}60996100/* ── Card entry styles ───────────────────────────────────────── */6101.peach-card-number {6102  font-family: var(--peach-mono);6103  letter-spacing: 0.08em;6104}61056106.peach-card-network-badge {6107  font-size: 0.625rem;6108  padding: 1px 5px;6109  border-radius: 4px;6110  border: 0.5px solid var(--peach-border);6111  color: var(--peach-text-dim);6112  margin-left: 6px;6113  vertical-align: middle;6114}61156116.peach-card-expiry-row {6117  display: flex;6118  align-items: center;6119  gap: 8px;6120}61216122.peach-card-expiry-sep {6123  color: var(--peach-text-dim);6124}61256126/* ── Pro tier — upgrade screen ──────────────────────────────── */6127.peach-pro-mark {6128  font-size: 0.5625rem;6129  color: var(--peach-accent);6130  margin-left: 6px;6131  vertical-align: super;6132  opacity: 0.7;6133}61346135.peach-pro-mini-badge {6136  display: block;6137  font-size: 0.625rem;6138  font-style: italic;6139  color: var(--peach-accent);6140  letter-spacing: 0.04em;6141  margin-top: -2px;6142  padding-left: 2px;6143  opacity: 0.85;6144  text-align: center;6145}61466147.peach-wordmark-stack {6148  display: inline-flex;6149  flex-direction: column;6150  align-items: center;6151}61526153/* ── Pro tier — upgrade page ─────────────────────────────────── */6154/* ── Pro upgrade — redesigned editorial layout ─────────────────── */61556156.peach-pro-upgrade {6157  display: flex;6158  flex-direction: column;6159  align-items: stretch;6160  gap: 10px;6161  padding: 2px 2px 12px;6162}61636164.peach-pro-eyebrow {6165  margin: 0;6166  font-family: var(--font-ui);6167  font-size: 0.625rem;6168  font-weight: 500;6169  letter-spacing: 0.12em;6170  color: var(--peach-accent);6171}61726173.peach-pro-headline {6174  margin: 0;6175  font-family: var(--font-display, "Cormorant Garamond", serif);6176  font-size: 30px;6177  font-weight: 700;6178  font-style: normal;6179  line-height: 1.05;6180  color: var(--peach-t0);6181  letter-spacing: -0.01em;6182}6183.peach-pro-headline em {6184  font-style: italic;6185  font-weight: 400;6186  color: var(--peach-accent);6187}61886189.peach-pro-subtitle {6190  margin: 0;6191  font-size: 0.6875rem;6192  line-height: 1.5;6193  color: var(--peach-t1);6194}61956196/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6197.peach-pro-section-label {6198  margin: 6px 0 0;6199  font-family: var(--font-ui);6200  font-size: 0.5625rem;6201  font-weight: 500;6202  letter-spacing: 0.12em;6203  text-transform: uppercase;6204  color: var(--peach-t2);6205}62066207/* 2-column numbered feature grid */6208.peach-pro-grid {6209  display: grid;6210  grid-template-columns: 1fr 1fr;6211  border-top: 1px solid var(--peach-border);6212  border-left: 1px solid var(--peach-border);6213}62146215.peach-pro-grid-item {6216  display: flex;6217  flex-direction: column;6218  gap: 2px;6219  padding: 8px 9px;6220  border-right: 1px solid var(--peach-border);6221  border-bottom: 1px solid var(--peach-border);6222}62236224.peach-pro-grid-item--wide {6225  grid-column: 1 / -1;6226}62276228.peach-pro-grid-num {6229  font-family: var(--font-mono);6230  font-size: 0.5625rem;6231  color: var(--peach-accent);6232  letter-spacing: 0.06em;6233  opacity: 0.85;6234}62356236.peach-pro-grid-name {6237  font-size: 0.8125rem;6238  font-weight: 500;6239  color: var(--peach-t0);6240  line-height: 1.2;6241}62426243.peach-pro-grid-desc {6244  font-size: 0.625rem;6245  color: var(--peach-t1);6246  line-height: 1.4;6247}62486249.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6250  animation: peach-pulse-accent 600ms ease-out forwards;6251}62526253@keyframes peach-pulse-accent {6254  0%   { opacity: 1; transform: scale(1.2); }6255  100% { opacity: 0.85; transform: scale(1); }6256}62576258/* Actions */6259.peach-pro-upgrade-actions {6260  display: flex;6261  flex-direction: column;6262  align-items: stretch;6263  gap: 10px;6264}62656266.peach-pro-pricing {6267  margin: 0;6268  font-size: 1rem;6269  font-weight: 600;6270  color: var(--peach-t0);6271  letter-spacing: 0.01em;6272}6273.peach-pro-pricing-sub {6274  font-size: 0.75rem;6275  font-weight: 400;6276  color: var(--peach-t1);6277  letter-spacing: 0.02em;6278}62796280.peach-pro-upgrade-cta {6281  display: flex;6282  align-items: center;6283  justify-content: center;6284  text-decoration: none;6285  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6286  border: 1px solid var(--peach-accent);6287  border-radius: 10px;6288  color: var(--peach-accent);6289  font-family: var(--font-ui);6290  font-size: 0.8125rem;6291  font-weight: 600;6292  letter-spacing: 0.06em;6293  padding: 11px 16px;6294  transition: background 0.15s ease, color 0.15s ease;6295}6296.peach-pro-upgrade-cta:hover {6297  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6298}62996300.peach-pro-key-divider {6301  display: flex;6302  align-items: center;6303  gap: 8px;6304  color: var(--peach-t2);6305  font-size: 0.5625rem;6306  letter-spacing: 0.1em;6307}6308.peach-pro-key-divider::before,6309.peach-pro-key-divider::after {6310  content: "";6311  flex: 1;6312  height: 1px;6313  background: var(--peach-border);6314}63156316/* Inline key entry row */6317.peach-pro-key-inline {6318  display: flex;6319  align-items: center;6320  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6321  border: 1px solid var(--peach-border);6322  border-radius: 8px;6323  overflow: hidden;6324}6325.peach-pro-key-inline-input {6326  flex: 1;6327  background: transparent;6328  border: none;6329  outline: none;6330  color: var(--peach-t1);6331  font-family: var(--font-mono);6332  font-size: 0.625rem;6333  letter-spacing: 0.06em;6334  padding: 9px 10px;6335}6336.peach-pro-key-inline-input::placeholder {6337  color: var(--peach-t2);6338}6339.peach-pro-key-apply {6340  background: transparent;6341  border: none;6342  border-left: 1px solid var(--peach-border);6343  color: var(--peach-t2);6344  font-family: var(--font-ui);6345  font-size: 0.5625rem;6346  font-weight: 600;6347  letter-spacing: 0.08em;6348  padding: 9px 10px;6349  cursor: pointer;6350  transition: color 0.15s ease;6351  flex-shrink: 0;6352}6353.peach-pro-key-apply:not(:disabled):hover {6354  color: var(--peach-accent);6355}6356.peach-pro-key-apply:disabled {6357  opacity: 0.35;6358  cursor: not-allowed;6359}63606361/* ── Pro tier — key ceremony ─────────────────────────────────── */6362.peach-pro-key-ceremony {6363  display: flex;6364  flex-direction: column;6365  align-items: center;6366  gap: 12px;6367  padding: 20px 4px 16px;6368}63696370.peach-pro-key-ceremony .peach-lock-rune-string {6371  font-size: 1rem;6372  gap: 12px;6373  flex: 0;6374  justify-content: center;6375}63766377.peach-pro-key-ceremony-label {6378  margin: 0;6379  font-size: 0.6875rem;6380  color: var(--peach-t2);6381  font-style: italic;6382  letter-spacing: 0.04em;6383}63846385.peach-pro-key-input {6386  font-family: var(--font-mono, monospace);6387  letter-spacing: 0.06em;6388  text-align: center;6389  width: 100%;6390  box-sizing: border-box;6391}63926393.peach-pro-key-error {6394  margin: 0;6395  font-size: 0.75rem;6396  text-align: center;6397  color: var(--peach-breach, #e55);6398  padding: 0;6399}64006401.peach-pro-key-activate {6402  width: 100%;6403  text-align: center;6404  box-sizing: border-box;6405  padding: 10px 20px;6406  font-size: 0.8125rem;6407}64086409.peach-pro-key-cancel {6410  background: transparent;6411  border: 0;6412  color: var(--peach-t2);6413  font-size: 0.6875rem;6414  cursor: pointer;6415  padding: 2px 8px;6416  transition: color 0.2s;6417}64186419.peach-pro-key-cancel:hover { color: var(--peach-accent); }64206421/* ── Pro tier — active state ─────────────────────────────────── */6422.peach-pro-active {6423  display: flex;6424  flex-direction: column;6425  align-items: center;6426  gap: 0;6427  padding: 8px 4px 16px;6428  min-height: 280px;6429}64306431.peach-pro-active-hero {6432  display: flex;6433  flex-direction: column;6434  align-items: center;6435  gap: 6px;6436  padding: 20px 0 8px;6437}64386439.peach-pro-active-mark-wrap {6440  display: flex;6441  align-items: center;6442  justify-content: center;6443  margin-bottom: 4px;6444}64456446.peach-pro-active-mark {6447  width: 60px;6448  height: 60px;6449}64506451.peach-pro-active-title {6452  font-family: var(--font-display, var(--font-ui));6453  font-size: 26px;6454  margin: 0;6455  color: var(--peach-t0);6456  letter-spacing: 0.01em;6457}64586459.peach-pro-active-since {6460  margin: 0;6461  font-size: 0.6875rem;6462  color: var(--peach-t2);6463  font-style: italic;6464}64656466.peach-pro-active-features {6467  display: flex;6468  flex-direction: column;6469  gap: 8px;6470  width: 100%;6471  padding: 14px 8px 0;6472  border-top: 1px solid var(--peach-border);6473  flex: 1;6474}64756476.peach-pro-active-feature {6477  display: flex;6478  align-items: center;6479  gap: 9px;6480}64816482.peach-pro-active-feature-mark {6483  color: var(--peach-accent);6484  font-size: 0.625rem;6485  opacity: 0.65;6486  flex-shrink: 0;6487}64886489.peach-pro-active-feature-name {6490  font-size: 0.75rem;6491  color: var(--peach-t1);6492}64936494.peach-pro-deactivate {6495  align-self: center;6496  background: transparent;6497  border: 0;6498  color: var(--peach-t3);6499  font-size: 0.625rem;6500  cursor: pointer;6501  padding: 8px 0 0;6502  margin-top: 16px;6503  letter-spacing: 0.03em;6504  transition: color 0.2s;6505}65066507.peach-pro-deactivate:hover { color: var(--peach-t2); }65086509.peach-pro-deactivate:disabled {6510  opacity: 0.5;6511  cursor: default;6512}65136514/* ── Pro card activation sparkles & thank-you ── */6515button.peach-pro-active-mark-wrap {6516  background: transparent;6517  border: 0;6518  padding: 0;6519  cursor: pointer;6520  position: relative;6521  overflow: visible;6522}65236524.peach-pro-sparks {6525  position: absolute;6526  inset: 0;6527  pointer-events: none;6528  overflow: visible;6529}65306531.peach-pro-spark {6532  position: absolute;6533  top: 50%;6534  left: 50%;6535  font-size: 9px;6536  line-height: 1;6537  opacity: 0;6538  transform: translate(-50%, -50%);6539  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;6540}65416542@keyframes peach-pro-spark-fly {6543  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }6544  25%  { opacity: 1; }6545  100% {6546    opacity: 0;6547    transform: translate(6548      calc(-50% + var(--spark-x, 0px)),6549      calc(-50% + var(--spark-y, -40px))6550    ) scale(0.8);6551  }6552}65536554.peach-pro-thankyou-text {6555  margin: 4px 0 0;6556  font-size: 0.6875rem;6557  font-style: italic;6558  color: currentColor;6559  opacity: 0;6560  animation: peach-pro-thankyou-flash 2.5s ease both;6561}65626563@keyframes peach-pro-thankyou-flash {6564  0%   { opacity: 0; transform: translateY(4px); }6565  15%  { opacity: 0.75; transform: translateY(0); }6566  75%  { opacity: 0.75; }6567  100% { opacity: 0; }6568}65696570/* ── Pro advanced health remediation queue ──────────────────── */6571.peach-health-pro-queue {6572  display: flex;6573  flex-direction: column;6574  gap: 10px;6575  padding: 12px;6576  margin: 0 0 12px;6577  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6578  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6579  border-radius: 10px;6580}65816582.peach-health-pro-queue-head {6583  display: flex;6584  justify-content: space-between;6585  align-items: baseline;6586}65876588.peach-health-pro-queue-title {6589  font-size: 0.75rem;6590  font-weight: 500;6591  letter-spacing: 0.04em;6592  text-transform: uppercase;6593  color: var(--peach-accent);6594}65956596.peach-health-pro-queue-score {6597  font-size: 0.6875rem;6598  color: var(--peach-t2);6599}66006601.peach-health-pro-row {6602  display: flex;6603  gap: 10px;6604  align-items: center;6605  padding: 8px 0;6606  border-top: 1px solid var(--peach-border);6607}66086609.peach-health-pro-row-info {6610  flex: 1;6611  display: flex;6612  flex-direction: column;6613  gap: 4px;6614  min-width: 0;6615}66166617.peach-health-pro-action {6618  flex: 0 0 auto;6619  padding: 4px 8px;6620  font-size: 0.5625rem;6621  letter-spacing: 0.08em;6622  text-transform: uppercase;6623}66246625.peach-health-pro-row-name {6626  font-size: 0.8125rem;6627  color: var(--peach-t0);6628  overflow: hidden;6629  text-overflow: ellipsis;6630  white-space: nowrap;6631}66326633.peach-health-pro-row-meta {6634  font-size: 0.6875rem;6635  color: var(--peach-t2);6636}66376638.peach-health-pro-bar {6639  height: 2px;6640  background: var(--peach-border);6641  border-radius: 2px;6642  overflow: hidden;6643  margin-top: 2px;6644}66456646.peach-health-pro-bar-fill {6647  height: 100%;6648  background: var(--peach-accent);6649  transition: width 200ms ease-out;6650}66516652/* ── Pro activation celebration ── */6653@keyframes peach-pro-bloom {6654  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6655  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6656                 drop-shadow(0 0 48px var(--peach-glow)); }6657  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6658}66596660@keyframes peach-pro-wordmark-in {6661  from { opacity: 0; transform: translateY(4px); }6662  to   { opacity: 1; transform: translateY(0); }6663}66646665@keyframes peach-pro-fade-out {6666  from { opacity: 1; }6667  to   { opacity: 0; }6668}66696670.peach-pro-celebration {6671  background:6672    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6673    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6674    var(--peach-bg);6675  border: 1px solid var(--peach-t3);6676  box-shadow:6677    0 2px 8px rgba(0,0,0,0.55),6678    0 14px 48px rgba(0,0,0,0.7),6679    0 0 0 1px rgba(240,232,216,0.04);6680  overflow: hidden;6681  width: 320px;6682  height: 520px;6683  display: flex;6684  flex-direction: column;6685  align-items: center;6686  justify-content: center;6687  gap: 8px;6688  padding: 32px 24px;6689  text-align: center;6690}66916692.peach-pro-celebration.is-leaving {6693  animation: peach-pro-fade-out 400ms ease forwards;6694}66956696.peach-pro-bloom-target {6697  display: flex;6698  align-items: center;6699  justify-content: center;6700  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6701  margin-bottom: 12px;6702}67036704.peach-pro-bloom-icon {6705  width: 48px;6706  height: 48px;6707}67086709.peach-pro-wordmark {6710  font-family: var(--font-display);6711  font-size: 22px;6712  font-style: italic;6713  font-weight: 400;6714  color: var(--peach-accent);6715  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6716}67176718.peach-pro-thankyou {6719  font-size: 0.75rem;6720  font-style: italic;6721  color: var(--peach-t2);6722  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6723}672467256726/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6727.peach-pro-notice-banner {6728  display: flex;6729  align-items: center;6730  gap: 8px;6731  padding: 7px 12px;6732  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6733  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6734  font-size: 0.6875rem;6735  color: var(--peach-t2);6736  font-family: "IBM Plex Mono", monospace;6737  flex-shrink: 0;6738}67396740.peach-pro-notice-link {6741  background: none;6742  border: none;6743  padding: 0;6744  cursor: pointer;6745  font-size: 0.6875rem;6746  color: var(--peach-accent);6747  font-family: "IBM Plex Mono", monospace;6748  margin-left: auto;6749  white-space: nowrap;6750}67516752.peach-pro-notice-close {6753  background: none;6754  border: none;6755  padding: 0 0 0 4px;6756  cursor: pointer;6757  font-size: 0.625rem;6758  color: var(--peach-t3);6759  line-height: 1;6760}67616762/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6763   Renders over whatever view is showing. 60-second expiry; the popup ticks6764   the countdown each second and clears the banner when it hits zero. */6765.peach-pair-request-banner {6766  display: flex;6767  flex-direction: column;6768  gap: 8px;6769  padding: 10px 12px;6770  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6771  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6772  font-family: "IBM Plex Mono", monospace;6773  flex-shrink: 0;6774}67756776.peach-pair-toast {6777  padding: 8px 12px;6778  font-family: "IBM Plex Mono", monospace;6779  font-size: 0.75rem;6780  color: var(--peach-t1);6781  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6782  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6783  flex-shrink: 0;6784  text-align: center;6785}67866787.peach-pair-toast strong {6788  color: var(--peach-t0);6789  font-weight: 500;6790}67916792.peach-pair-request-header {6793  display: flex;6794  align-items: center;6795  gap: 8px;6796  font-size: 0.75rem;6797  color: var(--peach-t1);6798}67996800.peach-pair-request-mark {6801  font-size: 0.875rem;6802  display: inline-flex;6803  align-items: center;6804}68056806.peach-pair-request-icon {6807  width: 1em;6808  height: 1em;6809}68106811.peach-pair-request-title {6812  font-weight: 600;6813  color: var(--peach-t0);6814}68156816.peach-pair-request-countdown {6817  margin-left: auto;6818  font-variant-numeric: tabular-nums;6819  color: var(--peach-t2);6820  font-size: 0.6875rem;6821}68226823.peach-pair-request-body {6824  margin: 0;6825  font-size: 0.75rem;6826  color: var(--peach-t1);6827  line-height: 1.4;6828}68296830.peach-pair-request-body strong {6831  color: var(--peach-t0);6832  font-weight: 600;6833}68346835.peach-pair-request-actions {6836  display: flex;6837  gap: 8px;6838  justify-content: flex-end;6839}68406841/* ─── First-run onboarding ──────────────────────────────────────────────6842   Three-card welcome shown once before vault creation. The PeachScript6843   rune background drifts behind everything at very low opacity — it's6844   atmosphere, not focus. The cards themselves use the same panel6845   language as the rest of the popup so the transition into NewVault is6846   continuous, not a jarring switch of visual register. */68476848.peach-onboarding {6849  position: relative;6850  display: flex;6851  flex-direction: column;6852  width: 100%;6853  height: 100%;6854  padding: 16px 16px 18px;6855  box-sizing: border-box;6856  overflow: hidden;6857  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6858}68596860.peach-onboarding.is-completing {6861  animation: peach-onboard-exit 200ms ease-out forwards;6862}68636864.peach-rune-background {6865  position: absolute;6866  inset: 0;6867  width: 100%;6868  height: 100%;6869  pointer-events: none;6870  z-index: 0;6871  transition: opacity 500ms ease-out;6872}68736874.peach-onboarding.is-completing .peach-rune-background {6875  opacity: 0;6876}68776878.peach-onboarding-header {6879  position: relative;6880  z-index: 1;6881  display: flex;6882  align-items: center;6883  margin-bottom: 14px;6884}68856886.peach-onboarding-card {6887  position: relative;6888  z-index: 1;6889  flex: 1;6890  display: flex;6891  flex-direction: column;6892  gap: 10px;6893  padding: 22px 20px;6894  border-radius: 16px;6895  border: 1px solid var(--peach-t3);6896  background:6897    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6898  backdrop-filter: blur(3px);6899  -webkit-backdrop-filter: blur(3px);6900  box-shadow:6901    inset 0 1px 0 rgba(240, 232, 216, 0.04),6902    0 12px 28px rgba(0, 0, 0, 0.12);6903  cursor: pointer;6904  user-select: none;6905  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6906}69076908.peach-onboarding-card.is-exiting {6909  animation: peach-card-out 120ms ease-in forwards;6910  pointer-events: none;6911}69126913.peach-onboarding-card-headline {6914  margin: 0;6915  font-family: var(--font-display);6916  font-style: italic;6917  font-weight: 400;6918  font-size: 22px;6919  line-height: 1.05;6920  color: var(--peach-t0);6921  white-space: pre-line;6922}69236924.peach-onboarding-divider {6925  margin: 4px 0 6px;6926  border: 0;6927  border-top: 1px solid var(--peach-t3);6928  width: 100%;6929}69306931.peach-onboarding-body {6932  margin: 0;6933  font-size: 0.8125rem;6934  line-height: 1.6;6935  color: var(--peach-t1);6936}69376938.peach-onboarding-warning {6939  display: flex;6940  align-items: flex-start;6941  gap: 8px;6942  margin: 6px 0 0;6943  padding-top: 8px;6944  border-top: 1px dashed var(--peach-t3);6945  font-size: 0.8125rem;6946  line-height: 1.5;6947  color: var(--peach-t1);6948}69496950.peach-onboarding-warning-icon {6951  color: var(--peach-accent);6952  font-size: 0.8125rem;6953  line-height: 1.5;6954  flex: 0 0 auto;6955}69566957.peach-onboarding-nav {6958  position: relative;6959  z-index: 1;6960  display: flex;6961  align-items: center;6962  justify-content: space-between;6963  margin-top: 12px;6964  padding: 0 4px;6965}69666967.peach-onboarding-dots {6968  display: flex;6969  align-items: center;6970  gap: 6px;6971}69726973.peach-onboarding-dot {6974  width: 6px;6975  height: 6px;6976  border-radius: 50%;6977  background: var(--peach-t2);6978  transition: width 200ms ease, height 200ms ease, background 200ms ease;6979}69806981.peach-onboarding-dot.is-active {6982  width: 8px;6983  height: 8px;6984  background: var(--peach-accent);6985}69866987.peach-onboarding-next {6988  background: none;6989  border: none;6990  padding: 4px 0;6991  cursor: pointer;6992  font-family: "IBM Plex Mono", monospace;6993  font-size: 0.6875rem;6994  letter-spacing: 0.04em;6995  color: var(--peach-t1);6996  transition: color 150ms ease;6997}69986999.peach-onboarding-next:hover {7000  color: var(--peach-t0);7001}70027003.peach-onboarding-next:disabled {7004  opacity: 0.5;7005  cursor: default;7006}70077008.peach-onboarding-back {7009  background: none;7010  border: none;7011  padding: 4px 0;7012  cursor: pointer;7013  font-family: "IBM Plex Mono", monospace;7014  font-size: 0.6875rem;7015  letter-spacing: 0.04em;7016  color: var(--peach-t2);7017  transition: color 150ms ease;7018}70197020.peach-onboarding-back:hover {7021  color: var(--peach-t0);7022}70237024.peach-onboarding-back:disabled {7025  opacity: 0.5;7026  cursor: default;7027}70287029/* Reserve back-button width on the first card so the dots stay centred */7030.peach-onboarding-back-spacer {7031  width: 44px;7032}70337034.peach-onboarding-mobile-card-buttons {7035  display: flex;7036  flex-direction: column;7037  gap: 8px;7038  margin-top: 16px;7039}70407041@keyframes peach-onboard-enter {7042  from { opacity: 0; transform: translateY(20px); }7043  to   { opacity: 1; transform: translateY(0); }7044}70457046@keyframes peach-onboard-exit {7047  from { opacity: 1; }7048  to   { opacity: 0; }7049}70507051@keyframes peach-card-in {7052  from { opacity: 0; transform: translateX(12px); }7053  to   { opacity: 1; transform: translateX(0); }7054}70557056@keyframes peach-card-out {7057  from { opacity: 1; transform: translateX(0); }7058  to   { opacity: 0; transform: translateX(-12px); }7059}70607061/* ─── New vault screen — matched to onboarding card language ─────────── */70627063/* Two classes so this beats the shared .peach-screen.lock-screen--vault-stage7064   rule (same element) without loosening the unlock/restore screens. The7065   create-vault screen is the only vault-stage view tall enough to overflow7066   the 520px popup, so its spacing is tuned to fit header → card → restore →7067   recovery warning with nothing clipped. */7068.peach-screen.peach-newvault {7069  position: relative;7070  display: flex;7071  flex-direction: column;7072  gap: 12px;7073  padding: 14px 16px 12px;7074  overflow: hidden;7075}70767077/* Suppress the warm-blob ambient art inherited from .lock-screen — the7078   new vault card now carries the visual weight. */7079.peach-newvault::before {7080  content: none;7081}70827083.peach-newvault-header {7084  position: relative;7085  z-index: 2;7086  display: flex;7087  align-items: center;7088  gap: 10px;7089  margin-bottom: 2px;7090}70917092.peach-newvault-back {7093  display: inline-flex;7094  align-items: center;7095  gap: 4px;7096  background: transparent;7097  border: none;7098  color: var(--peach-t2);7099  font-family: "IBM Plex Mono", monospace;7100  font-size: 0.625rem;7101  letter-spacing: 0.06em;7102  cursor: pointer;7103  padding: 4px 6px;7104  border-radius: 6px;7105  transition: color 120ms ease, background 120ms ease;7106}71077108.peach-newvault-back:hover {7109  color: var(--peach-t0);7110  background: rgba(240, 232, 216, 0.04);7111}71127113.peach-newvault-mark {7114  position: absolute;7115  right: -12px;7116  top: 6px;7117  width: 110px;7118  height: 110px;7119  pointer-events: none;7120  opacity: 0.10;7121  filter: saturate(0.9);7122  z-index: 0;7123}7124.peach-newvault-mark-art {7125  width: 100%;7126  height: 100%;7127}7128.peach-newvault-mark-art path:nth-child(1) {7129  fill: rgba(123, 144, 96, 0.88);7130}7131.peach-newvault-mark-art path:nth-child(2) {7132  stroke: rgba(94, 122, 66, 0.95);7133}71347135.peach-newvault-card {7136  position: relative;7137  z-index: 1;7138  display: flex;7139  flex-direction: column;7140  gap: 8px;7141  padding: 16px 20px 14px;7142  border-radius: 16px;7143  border: 1px solid var(--peach-t3);7144  background:7145    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));7146  backdrop-filter: blur(3px);7147  -webkit-backdrop-filter: blur(3px);7148  box-shadow:7149    inset 0 1px 0 rgba(240, 232, 216, 0.04),7150    0 12px 28px rgba(0, 0, 0, 0.12);7151  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;7152}71537154.peach-newvault-headline {7155  margin: 0;7156  font-family: var(--font-display);7157  font-style: italic;7158  font-weight: 400;7159  font-size: 24px;7160  line-height: 1.05;7161  color: var(--peach-t0);7162  white-space: pre-line;7163}71647165.peach-newvault-divider {7166  margin: 2px 0 4px;7167  border: 0;7168  border-top: 1px solid var(--peach-t3);7169  width: 100%;7170}71717172.peach-newvault-field {7173  display: flex;7174  flex-direction: column;7175  gap: 4px;7176}71777178.peach-newvault-label-row {7179  display: flex;7180  align-items: center;7181  justify-content: space-between;7182}71837184/* Monospace input scaled to the card. Replaces the 22px unlock-input7185   so the placeholder no longer overflows and the field reads as part7186   of the same surface as the body copy. */7187.peach-newvault-input {7188  font-size: 0.875rem;7189  letter-spacing: 0.18em;7190  padding: 8px 0;7191}7192.peach-newvault-input::placeholder {7193  letter-spacing: 0.18em;7194  color: var(--peach-t2);7195}71967197.peach-newvault-hint {7198  margin: 2px 0 0;7199  font-family: "IBM Plex Mono", monospace;7200  font-size: 0.625rem;7201  color: var(--peach-t2);7202  letter-spacing: 0.04em;7203}72047205.peach-newvault-submit {7206  margin-top: 4px;7207}72087209.peach-newvault-warning {7210  display: flex;7211  align-items: flex-start;7212  gap: 8px;7213  margin: 2px 0 0;7214  padding-top: 8px;7215  border-top: 1px dashed var(--peach-t3);7216  font-size: 0.75rem;7217  line-height: 1.45;7218  color: var(--peach-t1);7219}72207221.peach-newvault-warning-icon {7222  color: var(--peach-accent);7223  font-size: 0.8125rem;7224  line-height: 1.4;7225  flex: 0 0 auto;7226}72277228/* Restore options sit inside the card, directly under "create vault", so7229   they are always reachable without scrolling. The top divider mirrors the7230   warning's so the choice reads as a deliberate fork, not a footnote. */7231.peach-newvault-restore {7232  position: relative;7233  z-index: 1;7234  display: flex;7235  flex-direction: column;7236  gap: 4px;7237  margin-top: 4px;7238  padding-top: 10px;7239  border-top: 1px dashed var(--peach-t3);7240}72417242/* Settings body — warm accent gradient gives the glass something to blur against */7243.peach-settings-body {7244  background:7245    radial-gradient(7246      ellipse at 30% 20%,7247      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7248      transparent 60%7249    );7250}72517252/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7253/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7254 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7255 * (replacing the vault from a backup file) and "hazard" for actions that7256 * are absolutely irreversible (Panic). Both use the same card scaffold so7257 * they read as a pair, but the colour family signals the severity at a7258 * glance — yellow for caution, red for don't.7259 */7260.peach-danger-card {7261  --danger-tint: 235, 158, 52; /* amber */7262  display: flex;7263  flex-direction: column;7264  gap: 8px;7265  padding: 14px;7266  margin-top: 10px;7267  border-radius: 12px;7268  border: 1px solid rgba(var(--danger-tint), 0.32);7269  background:7270    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7271    rgba(var(--danger-tint), 0.04);7272  box-shadow:7273    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7274    0 0 24px rgba(var(--danger-tint), 0.04);7275  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7276}72777278.peach-danger-card:hover {7279  border-color: rgba(var(--danger-tint), 0.55);7280  box-shadow:7281    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7282    0 0 36px rgba(var(--danger-tint), 0.10);7283}72847285.peach-danger-card--hazard {7286  --danger-tint: 220, 38, 38; /* red */7287}72887289.peach-danger-card-head {7290  display: flex;7291  align-items: center;7292  gap: 10px;7293}72947295.peach-danger-card-glyph {7296  width: 28px;7297  height: 28px;7298  flex-shrink: 0;7299  display: flex;7300  align-items: center;7301  justify-content: center;7302  border-radius: 8px;7303  background: rgba(var(--danger-tint), 0.12);7304  color: rgba(var(--danger-tint), 0.95);7305  font-size: 1rem;7306  line-height: 1;7307}73087309.peach-danger-card-title {7310  margin: 0;7311  font-size: 0.8125rem;7312  font-weight: 600;7313  color: rgba(var(--danger-tint), 0.92);7314  letter-spacing: 0.01em;7315}73167317.peach-danger-card-copy {7318  margin: 0;7319  font-size: 0.6875rem;7320  line-height: 1.5;7321  color: var(--peach-t2);7322}73237324.peach-danger-card-button {7325  width: 100%;7326  padding: 9px;7327  margin-top: 4px;7328  background: transparent;7329  border: 1px solid rgba(var(--danger-tint), 0.45);7330  border-radius: 8px;7331  color: rgba(var(--danger-tint), 0.9);7332  font-size: 0.75rem;7333  font-weight: 500;7334  letter-spacing: 0.02em;7335  cursor: pointer;7336  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7337}73387339.peach-danger-card-button:hover {7340  background: rgba(var(--danger-tint), 0.10);7341  border-color: rgba(var(--danger-tint), 0.75);7342  color: rgb(var(--danger-tint));7343}73447345/* ── Panic flow (three-step destruction) ───────────────────────────────── */7346.peach-panic {7347  display: flex;7348  flex-direction: column;7349  flex: 1;7350  min-height: 0;7351  padding: 28px 20px 20px;7352  gap: 18px;7353  overflow-y: auto;7354  scrollbar-width: none;7355  -ms-overflow-style: none;7356}73577358.peach-panic::-webkit-scrollbar { display: none; }73597360.peach-panic-step2 {7361  background: rgba(220, 38, 38, 0.04);7362}73637364.peach-panic-step3 {7365  position: relative;7366  background: #0f0505;7367  color: #ffffff;7368  overflow: hidden;7369}73707371.peach-panic-rune-bg {7372  position: absolute;7373  inset: 0;7374  opacity: 0.22;7375  pointer-events: none;7376  overflow: hidden;7377}73787379.peach-panic-rune-bg canvas {7380  width: 100% !important;7381  height: 100% !important;7382}73837384.peach-panic-icon {7385  font-size: 32px;7386  color: rgb(220, 38, 38);7387  line-height: 1;7388}73897390.peach-panic-title {7391  margin: 0;7392  font-size: 18px;7393  font-weight: 500;7394  color: var(--peach-t1);7395}73967397.peach-panic-title--severe {7398  font-size: 20px;7399  font-weight: 700;7400  color: rgb(220, 38, 38);7401}74027403.peach-panic-body {7404  margin: 0;7405  font-size: 0.8125rem;7406  line-height: 1.55;7407  color: var(--peach-t2);7408}74097410.peach-panic-body--severe {7411  color: rgba(220, 38, 38, 0.85);7412}74137414.peach-panic-body--final {7415  font-size: 1rem;7416  font-weight: 700;7417  color: rgb(255, 80, 80);7418  line-height: 1.4;7419}74207421.peach-panic-body--final-intro {7422  font-size: 1rem;7423  color: #ffffff;7424  font-weight: 400;7425}74267427.peach-panic-divider {7428  height: 1px;7429  background: rgba(255, 255, 255, 0.08);7430  margin: 4px 0;7431}74327433.peach-panic-confirm-input {7434  width: 100%;7435  padding: 10px 12px;7436  background: rgba(255, 255, 255, 0.02);7437  border: 1px solid rgba(220, 38, 38, 0.4);7438  border-radius: 8px;7439  color: var(--peach-t1);7440  font-family: "IBM Plex Mono", monospace;7441  font-size: 0.875rem;7442  letter-spacing: 0.12em;7443  text-transform: uppercase;7444}74457446.peach-panic-confirm-input:focus {7447  outline: none;7448  border-color: rgb(220, 38, 38);7449}74507451.peach-panic-confirm-input--match {7452  border-color: rgb(220, 38, 38);7453  color: rgb(220, 38, 38);7454}74557456.peach-panic-confirm-label {7457  font-size: 0.6875rem;7458  color: var(--peach-t2);7459  margin: 0 0 -8px;7460  letter-spacing: 0.06em;7461}74627463.peach-panic-actions {7464  display: flex;7465  flex-direction: column;7466  gap: 10px;7467  margin-top: auto;7468}74697470.peach-panic-button {7471  width: 100%;7472  padding: 12px;7473  border-radius: 8px;7474  font-size: 0.8125rem;7475  cursor: pointer;7476  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7477}74787479.peach-panic-button--primary {7480  background: var(--peach-accent);7481  border: 1px solid var(--peach-accent);7482  color: #ffffff;7483  font-weight: 600;7484}74857486.peach-panic-button--primary:hover {7487  background: color-mix(in srgb, var(--peach-accent) 88%, white);7488}74897490.peach-panic-button--danger {7491  background: rgb(220, 38, 38);7492  border: 1px solid rgb(220, 38, 38);7493  color: #ffffff;7494  font-weight: 600;7495}74967497.peach-panic-button--danger:disabled {7498  opacity: 0.35;7499  cursor: not-allowed;7500}75017502.peach-panic-button--ghost {7503  background: transparent;7504  border: 1px solid rgba(255, 255, 255, 0.18);7505  color: var(--peach-t2);7506}75077508.peach-panic-button--ghost:hover {7509  border-color: rgba(255, 255, 255, 0.32);7510  color: var(--peach-t1);7511}75127513.peach-panic-link {7514  background: transparent;7515  border: none;7516  padding: 4px 0;7517  color: rgba(220, 38, 38, 0.65);7518  font-size: 0.75rem;7519  cursor: pointer;7520  text-align: left;7521  text-decoration: underline;7522  text-underline-offset: 3px;7523}75247525.peach-panic-link:hover {7526  color: rgb(220, 38, 38);7527}75287529.peach-panic-bar {7530  background: rgb(220, 38, 38);7531  padding: 16px 20px;7532  margin: -28px -20px 0;7533  text-align: center;7534  font-size: 0.8125rem;7535  font-weight: 700;7536  letter-spacing: 0.12em;7537  color: #ffffff;7538}75397540.peach-panic-final-button {7541  width: 100%;7542  padding: 14px;7543  background: rgb(220, 38, 38);7544  border: none;7545  border-radius: 8px;7546  color: #ffffff;7547  font-size: 0.875rem;7548  font-weight: 700;7549  letter-spacing: 0.08em;7550  text-transform: uppercase;7551  cursor: pointer;7552  animation: peach-panic-pulse 2s ease-in-out infinite;7553}75547555.peach-settings-license {7556  margin-top: 10px;7557  padding-top: 10px;7558  border-top: 1px solid var(--peach-t3);7559}75607561.peach-settings-label {7562  font-size: 0.625rem;7563  letter-spacing: 0.08em;7564  color: var(--peach-t3);7565  display: block;7566  margin-bottom: 6px;7567}75687569.peach-settings-license-row {7570  display: flex;7571  align-items: center;7572  justify-content: space-between;7573  gap: 8px;7574}75757576.peach-settings-license-key {7577  font-family: 'IBM Plex Mono', monospace;7578  font-size: 0.75rem;7579  color: var(--peach-t0);7580  letter-spacing: 0.04em;7581  word-break: break-all;7582  flex: 1;7583  min-width: 0;7584}75857586.peach-settings-license-key--masked {7587  font-family: 'IBM Plex Mono', monospace;7588  font-size: 0.6rem;7589  color: var(--peach-t1);7590  letter-spacing: 0.18em;7591  user-select: none;7592}75937594.peach-settings-license-actions {7595  display: flex;7596  align-items: center;7597  gap: 2px;7598  flex-shrink: 0;7599}76007601.peach-settings-license-copy {7602  font-size: 0.6875rem;7603  color: var(--peach-accent);7604  background: transparent;7605  border: none;7606  cursor: pointer;7607  padding: 4px 8px;7608  border-radius: 4px;7609  flex-shrink: 0;7610  transition: opacity 150ms ease;7611}76127613.peach-settings-license-copy:hover {7614  opacity: 0.75;7615}76167617.peach-settings-license-toggle {7618  display: flex;7619  align-items: center;7620  justify-content: center;7621  background: transparent;7622  border: none;7623  cursor: pointer;7624  padding: 4px 6px;7625  border-radius: 4px;7626  color: var(--peach-t2);7627  transition: color 150ms ease;7628}76297630.peach-settings-license-toggle:hover {7631  color: var(--peach-t1);7632}76337634@keyframes peach-panic-pulse {7635  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7636  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7637}76387639[data-motion="reduce"] .peach-panic-final-button {7640  animation: none;7641}76427643/* Vault History — Settings → Vault sub-view */76447645.peach-history-list {7646  border: 1px solid var(--peach-border);7647  border-radius: 8px;7648  overflow: hidden;7649  margin: 8px 0 4px;7650}76517652.peach-history-row {7653  display: flex;7654  align-items: center;7655  justify-content: space-between;7656  padding: 9px 12px;7657  gap: 10px;7658  border-bottom: 1px solid var(--peach-border);7659}76607661.peach-history-row:last-child {7662  border-bottom: none;7663}76647665.peach-history-meta {7666  display: flex;7667  flex-direction: column;7668  gap: 2px;7669  min-width: 0;7670  flex: 1;7671}76727673.peach-history-time {7674  font-size: 0.75rem;7675  font-family: 'IBM Plex Mono', ui-monospace, monospace;7676  color: var(--peach-t0);7677  white-space: nowrap;7678  overflow: hidden;7679  text-overflow: ellipsis;7680}76817682.peach-history-sub {7683  font-size: 0.625rem;7684  color: var(--peach-t2);7685  letter-spacing: 0.06em;7686  text-transform: uppercase;7687  white-space: nowrap;7688  overflow: hidden;7689  text-overflow: ellipsis;7690}76917692.peach-history-btn {7693  flex-shrink: 0;7694  white-space: nowrap;7695  min-width: 56px;7696  text-align: center;7697}76987699.peach-history-btn.is-busy {7700  opacity: 0.65;7701}77027703.peach-history-footer {7704  font-size: 0.625rem;7705  color: var(--peach-t3);7706  letter-spacing: 0.05em;7707  text-align: right;7708  margin: 0;7709  padding: 2px 0 0;7710}77117712/* ── Context menu + swipe-copy flash ─────────────────────── */7713.peach-context-menu-backdrop {7714  position: fixed;7715  inset: 0;7716  background: rgba(0, 0, 0, 0.45);7717  z-index: 100;7718  display: flex;7719  align-items: flex-end;7720  justify-content: center;7721  animation: peach-ctx-fade 140ms ease both;7722}7723.peach-context-menu {7724  width: min(360px, calc(100vw - 24px));7725  margin-bottom: max(env(safe-area-inset-bottom), 12px);7726  background: var(--peach-bg);7727  border: 1px solid var(--peach-t3);7728  border-radius: 14px;7729  padding: 6px;7730  display: flex;7731  flex-direction: column;7732  gap: 2px;7733  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7734  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7735}7736@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7737@keyframes peach-ctx-rise {7738  from { transform: translateY(16px); opacity: 0; }7739  to   { transform: translateY(0);    opacity: 1; }7740}7741.peach-context-menu-item {7742  background: transparent;7743  color: var(--peach-t0);7744  border: 0;7745  border-radius: 10px;7746  padding: 12px 14px;7747  text-align: left;7748  font: inherit;7749  cursor: pointer;7750}7751.peach-context-menu-item:hover,7752.peach-context-menu-item:focus-visible {7753  background: var(--peach-t3);7754}7755.peach-context-menu-item--danger {7756  color: var(--peach-health-bad, #d96868);7757}7758.peach-context-menu-item--cancel {7759  color: var(--peach-t2);7760  margin-top: 4px;7761  border-top: 1px solid var(--peach-t3);7762  border-radius: 0 0 10px 10px;7763}77647765/* Swipe-to-copy flash */7766.peach-entry-row.is-copy-flash {7767  animation: peach-copy-flash 600ms ease both;7768}7769@keyframes peach-copy-flash {7770  0%   { background: transparent; }7771  20%  { background: rgba(217, 153, 51, 0.32); }7772  100% { background: transparent; }7773}77747775html { font-size: 16px; }77767777/* ── Recovery word entry ─────────────────────────────────────────── */7778.peach-lock-recover-link {7779  display: block;7780  width: 100%;7781  margin-top: 12px;7782  background: none;7783  border: none;7784  font-family: "IBM Plex Mono", monospace;7785  font-size: 0.625rem;7786  letter-spacing: 0.06em;7787  color: var(--peach-t2);7788  cursor: pointer;7789  text-align: center;7790  padding: 4px;7791  transition: color 120ms ease;7792}7793.peach-lock-recover-link:hover {7794  color: var(--peach-t0);7795}77967797.lock-screen--recovery {7798  display: flex;7799  flex-direction: column;7800  align-items: stretch;7801  padding: 12px 20px 24px;7802  overflow: hidden;7803}78047805.peach-recovery-nav {7806  display: flex;7807  align-items: center;7808  position: relative;7809  z-index: 1;7810  margin-bottom: 4px;7811}78127813/* Mask runes to the top decorative band only — keep inputs and the7814   bottom CTA button clear. The bottom of the popup is reserved for7815   submit buttons; rendering runes there overlaps the button glyph. */7816.peach-rune-background--recovery {7817  -webkit-mask-image: linear-gradient(7818    to bottom,7819    black 0px, black 85px,7820    transparent 110px,7821    transparent 100%7822  );7823  mask-image: linear-gradient(7824    to bottom,7825    black 0px, black 85px,7826    transparent 110px,7827    transparent 100%7828  );7829}78307831.peach-recovery-header {7832  text-align: center;7833  margin-bottom: 16px;7834  margin-top: 4px;7835}7836.peach-recovery-header .peach-onboarding-headline {7837  font-size: 1.25rem;7838  font-weight: 300;7839  letter-spacing: 0.02em;7840  margin: 0 0 4px;7841}7842.peach-recovery-header .peach-hint {7843  font-family: "IBM Plex Mono", monospace;7844  font-size: 0.625rem;7845  color: var(--peach-t2);7846  letter-spacing: 0.04em;7847  margin: 0;7848}78497850/* 12-word grid: 2 columns × 6 rows */7851.peach-recovery-grid {7852  display: grid;7853  grid-template-columns: repeat(2, 1fr);7854  gap: 12px 20px;7855  width: 100%;7856  margin-bottom: 0;7857}78587859.peach-recovery-word-slot {7860  display: flex;7861  align-items: center;7862  gap: 6px;7863  min-width: 0;7864}78657866.peach-recovery-word-index {7867  font-family: "IBM Plex Mono", monospace;7868  font-size: 0.5rem;7869  color: rgba(255, 255, 255, 0.35);7870  min-width: 14px;7871  flex-shrink: 0;7872  text-align: right;7873  letter-spacing: 0.04em;7874}78757876.peach-recovery-word-input {7877  flex: 1;7878  min-width: 0;7879  background: transparent;7880  border: none;7881  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7882  color: var(--peach-t0);7883  font-family: "IBM Plex Mono", monospace;7884  font-size: 0.6875rem;7885  letter-spacing: 0.06em;7886  padding: 5px 2px 4px;7887  outline: none;7888  text-transform: lowercase;7889  transition: border-color 120ms ease;7890}7891.peach-recovery-word-input::placeholder {7892  color: rgba(255, 255, 255, 0.18);7893}7894.peach-recovery-word-input:focus {7895  border-bottom-color: var(--peach-accent);7896}78977898.peach-recovery-submit {7899  width: 100%;7900  margin-top: auto;7901}79027903.peach-recovery-new-password-form {7904  width: 100%;7905  display: flex;7906  flex-direction: column;7907  gap: 16px;7908  margin-bottom: 8px;7909}7910.peach-recovery-new-password-form .peach-newvault-field {7911  display: flex;7912  flex-direction: column;7913  gap: 4px;7914}79157916/* ── Recovery words display (post-create) ────────────────────────── */7917.lock-screen--recovery-display {7918  display: flex;7919  flex-direction: column;7920  align-items: stretch;7921  padding: 0 20px 20px;7922  min-height: 0;7923  overflow-y: auto;7924}79257926.peach-recovery-words-display {7927  width: 100%;7928  margin-bottom: 16px;7929  border: 1px solid var(--peach-t3);7930  border-radius: 8px;7931  padding: 12px 14px;7932  background: rgba(245, 240, 234, 0.04);7933}79347935.peach-recovery-words-label {7936  font-family: "IBM Plex Mono", monospace;7937  font-size: 0.5rem;7938  letter-spacing: 0.08em;7939  color: var(--peach-t2);7940  text-transform: uppercase;7941  margin-bottom: 10px;7942}79437944.peach-recovery-word-list {7945  list-style: none;7946  margin: 0;7947  padding: 0;7948  display: grid;7949  grid-template-columns: repeat(2, 1fr);7950  gap: 6px 16px;7951}79527953.peach-recovery-word-item {7954  display: flex;7955  align-items: baseline;7956  gap: 5px;7957}79587959.peach-recovery-word-num {7960  font-family: "IBM Plex Mono", monospace;7961  font-size: 0.5rem;7962  color: var(--peach-t2);7963  width: 14px;7964  flex: 0 0 14px;7965  text-align: right;7966  letter-spacing: 0.04em;7967  font-variant-numeric: tabular-nums;7968}79697970.peach-recovery-download-btn {7971  display: block;7972  margin: 10px auto 0;7973  padding: 4px 10px;7974  background: transparent;7975  border: 1px solid var(--peach-border);7976  border-radius: 6px;7977  color: var(--peach-t2);7978  font-family: "IBM Plex Mono", monospace;7979  font-size: 0.5625rem;7980  letter-spacing: 0.06em;7981  text-transform: lowercase;7982  cursor: pointer;7983  transition: border-color 0.15s, color 0.15s;7984}79857986.peach-recovery-download-btn:hover {7987  border-color: var(--peach-accent);7988  color: var(--peach-t0);7989}79907991.peach-recovery-word-text {7992  font-family: "IBM Plex Mono", monospace;7993  font-size: 0.6875rem;7994  letter-spacing: 0.06em;7995  color: var(--peach-t0);7996  text-transform: lowercase;7997}79987999.peach-hint--warning {8000  color: var(--peach-accent);8001  font-style: italic;8002}8003.peach-hint--success {8004  color: var(--peach-t2);8005  font-family: "IBM Plex Mono", monospace;8006  font-size: 0.625rem;8007  letter-spacing: 0.06em;8008}80098010/* Confirmation step */8011.peach-recovery-confirm {8012  width: 100%;8013  flex: 1;8014  display: flex;8015  flex-direction: column;8016}8017.peach-recovery-confirm-label {8018  font-family: "IBM Plex Mono", monospace;8019  font-size: 0.5625rem;8020  letter-spacing: 0.04em;8021  color: var(--peach-t2);8022  text-align: center;8023  margin: 0 0 12px;8024}8025.peach-recovery-confirm-fields {8026  display: flex;8027  flex-direction: column;8028  gap: 14px;8029  margin-bottom: 10px;8030}8031.peach-recovery-confirm-field {8032  display: flex;8033  align-items: center;8034  gap: 8px;8035}8036.peach-recovery-confirm-num {8037  font-family: "IBM Plex Mono", monospace;8038  font-size: 0.5rem;8039  color: var(--peach-t2);8040  min-width: 44px;8041  letter-spacing: 0.04em;8042}8043.peach-recovery-confirm-input {8044  flex: 1;8045  background: transparent;8046  border: none;8047  border-bottom: 1px solid var(--peach-t3);8048  color: var(--peach-t0);8049  font-family: "IBM Plex Mono", monospace;8050  font-size: 0.6875rem;8051  letter-spacing: 0.06em;8052  padding: 4px 2px 3px;8053  outline: none;8054  text-transform: lowercase;8055  transition: border-color 120ms ease;8056}8057.peach-recovery-confirm-input:focus {8058  border-bottom-color: var(--peach-accent);8059}8060.peach-recovery-confirm-input:disabled {8061  opacity: 0.4;8062  cursor: not-allowed;8063}8064.peach-recovery-confirm-btn {8065  width: 100%;8066  margin-top: auto;8067}80688069/* ============================================================8070   Sync info sheet8071   ============================================================ */80728073.peach-sync-info-backdrop {8074  position: fixed;8075  inset: 0;8076  z-index: 200;8077  background: rgba(0, 0, 0, 0.55);8078  display: flex;8079  align-items: flex-end;8080  animation: peach-fade-in 200ms ease forwards;8081}80828083@keyframes peach-fade-in {8084  from { opacity: 0; }8085  to   { opacity: 1; }8086}80878088.peach-sync-info-sheet {8089  width: 100%;8090  background: var(--peach-bg-card, var(--peach-bg));8091  border-top-left-radius: 20px;8092  border-top-right-radius: 20px;8093  padding: 12px 24px 32px;8094  display: flex;8095  flex-direction: column;8096  gap: 20px;8097  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;8098}80998100@keyframes peach-sheet-up {8101  from { transform: translateY(100%); }8102  to   { transform: translateY(0); }8103}81048105.peach-sync-info-handle {8106  width: 36px;8107  height: 4px;8108  border-radius: 2px;8109  background: var(--peach-border);8110  margin: 0 auto 4px;8111  flex-shrink: 0;8112}81138114.peach-sync-info-title {8115  font-family: 'Cormorant Garamond', serif;8116  font-style: italic;8117  font-size: 26px;8118  font-weight: 600;8119  color: var(--peach-t0);8120  margin: 0;8121  line-height: 1.2;8122}81238124.peach-sync-info-body {8125  display: flex;8126  flex-direction: column;8127  gap: 14px;8128}81298130.peach-sync-info-point {8131  display: flex;8132  gap: 12px;8133  align-items: flex-start;8134  font-size: 14px;8135  color: var(--peach-t2);8136  line-height: 1.6;8137  margin: 0;8138}81398140.peach-sync-info-icon {8141  color: var(--peach-accent);8142  font-size: 16px;8143  flex-shrink: 0;8144  margin-top: 1px;8145}81468147.peach-sync-info-actions {8148  display: flex;8149  flex-direction: column;8150  gap: 12px;8151  margin-top: 4px;8152}81538154.peach-sync-info-pro-link {8155  background: none;8156  border: none;8157  font-size: 13px;8158  color: var(--peach-t3);8159  cursor: pointer;8160  padding: 0;8161  font-family: inherit;8162  text-align: center;8163  transition: color 150ms ease;8164}81658166.peach-sync-info-pro-link:hover {8167  color: var(--peach-accent);8168}81698170.peach-btn--full {8171  width: 100%;8172}81738174/* ── Sync screen ── */81758176.peach-sync-coming-soon {8177  display: flex;8178  align-items: flex-start;8179  gap: 10px;8180  padding: 12px 14px;8181  background: var(--peach-s1);8182  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8183  border-radius: 10px;8184}8185.peach-sync-coming-soon__icon {8186  flex-shrink: 0;8187  color: var(--peach-accent);8188  margin-top: 1px;8189  line-height: 0;8190}8191.peach-sync-coming-soon__title {8192  font-family: 'Cormorant Garamond', serif;8193  font-weight: 500;8194  font-size: 13px;8195  color: var(--peach-accent);8196  margin: 0 0 5px;8197  line-height: 1.3;8198}8199.peach-sync-coming-soon__body {8200  font-size: 12px;8201  color: var(--peach-t1);8202  line-height: 1.55;8203  margin: 0;8204}82058206.peach-sync-screen {8207  display: flex;8208  flex-direction: column;8209  height: 100%;8210}82118212.peach-sync-content {8213  flex: 1;8214  overflow-y: auto;8215  padding: 24px 20px 40px;8216  display: flex;8217  flex-direction: column;8218  gap: 24px;8219}82208221/* Intro (State A) */8222.peach-sync-headline {8223  font-family: 'Cormorant Garamond', serif;8224  font-style: italic;8225  font-size: 28px;8226  font-weight: 600;8227  color: var(--peach-t0);8228  margin: 0 0 10px;8229  line-height: 1.2;8230}82318232.peach-sync-intro-body {8233  font-size: 14px;8234  color: var(--peach-t1);8235  line-height: 1.6;8236  margin: 0;8237}82388239.peach-sync-pro-note {8240  display: flex;8241  flex-direction: column;8242  gap: 8px;8243  background: var(--peach-t3);8244  border-radius: 10px;8245  padding: 12px 14px;8246}82478248.peach-sync-pro-note-text {8249  font-size: 12px;8250  color: var(--peach-t2);8251  line-height: 1.5;8252  margin: 0;8253}82548255.peach-sync-pro-link {8256  background: none;8257  border: none;8258  font-size: 12px;8259  color: var(--peach-accent);8260  cursor: pointer;8261  padding: 0;8262  font-family: inherit;8263  text-align: left;8264}82658266/* Status (State C) */8267.peach-sync-status {8268  padding: 12px 0;8269  border-bottom: 1px solid var(--peach-border);8270}82718272.peach-sync-status-row {8273  display: flex;8274  align-items: center;8275  gap: 8px;8276}82778278.peach-sync-dot {8279  width: 7px;8280  height: 7px;8281  border-radius: 50%;8282  flex-shrink: 0;8283}82848285.peach-sync-dot--green { background: var(--peach-health-ok); }8286.peach-sync-dot--amber { background: var(--peach-accent); }82878288.peach-sync-status-text {8289  font-family: 'IBM Plex Mono', monospace;8290  font-size: 11px;8291  color: var(--peach-t2);8292}82938294/* Paired devices */8295.peach-sync-section {8296  display: flex;8297  flex-direction: column;8298  gap: 2px;8299}83008301.peach-sync-section-label {8302  font-family: 'IBM Plex Mono', monospace;8303  font-size: 10px;8304  letter-spacing: 0.1em;8305  color: var(--peach-t3);8306  margin: 0 0 10px;8307}83088309.peach-sync-device-row {8310  display: flex;8311  justify-content: space-between;8312  align-items: baseline;8313  padding: 10px 0;8314  border-bottom: 1px solid var(--peach-border);8315  gap: 12px;8316}83178318.peach-sync-device-name {8319  font-size: 14px;8320  color: var(--peach-t1);8321}83228323.peach-sync-device-meta {8324  font-family: 'IBM Plex Mono', monospace;8325  font-size: 11px;8326  color: var(--peach-t3);8327  white-space: nowrap;8328}83298330.peach-sync-hub-note {8331  padding: 14px 16px;8332  border: 1px solid var(--peach-border);8333  border-radius: 10px;8334  display: flex;8335  flex-direction: column;8336  gap: 6px;8337  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8338}83398340.peach-sync-hub-note-title {8341  font-size: 13px;8342  font-weight: 600;8343  color: var(--peach-t0);8344  margin: 0;8345}83468347.peach-sync-hub-note-body {8348  font-size: 12px;8349  color: var(--peach-t2);8350  line-height: 1.6;8351  margin: 0;8352}83538354/* Action buttons */8355.peach-sync-actions {8356  display: flex;8357  gap: 10px;8358  flex-wrap: wrap;8359}83608361/* Upgrade prompt (State B) */8362.peach-sync-upgrade {8363  display: flex;8364  flex-direction: column;8365  gap: 12px;8366  padding: 16px;8367  border: 1px solid var(--peach-border);8368  border-radius: 10px;8369}83708371.peach-sync-upgrade-text {8372  font-size: 13px;8373  color: var(--peach-t2);8374  line-height: 1.6;8375  margin: 0;8376}83778378/* Network note */8379.peach-sync-network-note {8380  font-size: 12px;8381  color: var(--peach-t3);8382  line-height: 1.6;8383  margin: 0;8384}83858386/* Advanced */8387.peach-sync-advanced {8388  margin-top: auto;8389  padding-top: 16px;8390  border-top: 1px solid var(--peach-border);8391}83928393.peach-sync-advanced-toggle {8394  display: flex;8395  align-items: center;8396  gap: 8px;8397  background: none;8398  border: none;8399  font-family: 'IBM Plex Mono', monospace;8400  font-size: 11px;8401  letter-spacing: 0.08em;8402  color: var(--peach-t3);8403  cursor: pointer;8404  padding: 0;8405  text-transform: uppercase;8406}84078408.peach-sync-advanced-chevron {8409  display: inline-block;8410  transition: transform 200ms ease;8411  font-size: 10px;8412}84138414.peach-sync-advanced-chevron.is-open {8415  transform: rotate(90deg);8416}84178418.peach-sync-advanced-content {8419  margin-top: 14px;8420}84218422.peach-sync-advanced-row {8423  display: flex;8424  justify-content: space-between;8425  align-items: center;8426  gap: 16px;8427}84288429.peach-sync-advanced-title {8430  font-size: 14px;8431  color: var(--peach-t1);8432  margin: 0 0 2px;8433}84348435.peach-sync-advanced-subtitle {8436  font-size: 12px;8437  color: var(--peach-t3);8438  margin: 0;8439  line-height: 1.5;8440}84418442/* ── Add Device — Android scan tabs ─────────────────────────────────────── */84438444.peach-pairing-tabs {8445  display: flex;8446  border: 1px solid var(--peach-border);8447  border-radius: 8px;8448  overflow: hidden;8449  margin-bottom: 4px;8450}84518452.peach-pairing-tab {8453  flex: 1;8454  padding: 10px 0;8455  background: none;8456  border: none;8457  font-family: 'IBM Plex Mono', monospace;8458  font-size: 11px;8459  letter-spacing: 0.06em;8460  color: var(--peach-t2);8461  cursor: pointer;8462  transition: background 150ms, color 150ms;8463}84648465.peach-pairing-tab.is-active {8466  background: var(--peach-accent);8467  color: #fff;8468  font-weight: 600;8469}84708471.peach-pairing-tab:not(.is-active):active {8472  background: var(--peach-border);8473}84748475/* Camera view */8476.peach-pairing-camera-container {8477  position: relative;8478  width: 100%;8479  aspect-ratio: 1;8480  border-radius: 12px;8481  overflow: hidden;8482  background: #000;8483  flex-shrink: 0;8484}84858486.peach-pairing-video {8487  width: 100%;8488  height: 100%;8489  object-fit: cover;8490}84918492.peach-pairing-scan-frame {8493  position: absolute;8494  top: 50%;8495  left: 50%;8496  transform: translate(-50%, -50%);8497  width: 60%;8498  aspect-ratio: 1;8499  border: 2px solid var(--peach-accent);8500  border-radius: 8px;8501  pointer-events: none;8502}85038504/* ── Notes Mode ── */85058506/* Overlay that crossfades over the vault */8507.peach-notes-overlay {8508  position: fixed;8509  inset: 0;8510  z-index: 90;8511  opacity: 0;8512  pointer-events: none;8513  animation: peach-mode-in 220ms ease-in forwards;8514}85158516.peach-notes-overlay.is-visible {8517  opacity: 1;8518  pointer-events: auto;8519}85208521@keyframes peach-mode-in {8522  from { opacity: 0; }8523  to   { opacity: 1; }8524}85258526/* Top-level notes surface */8527.peach-notes-mode {8528  position: absolute;8529  inset: 0;8530  background: var(--peach-bg);8531  display: flex;8532  flex-direction: column;8533}85348535/* Rune canvas positioned behind content */8536.peach-note-rune-canvas {8537  position: absolute;8538  inset: 0;8539  width: 100%;8540  height: 100%;8541  pointer-events: none;8542  z-index: 0;8543}85448545/* TOC wrapper */8546.peach-notes-toc-wrapper {8547  position: absolute;8548  inset: 0;8549  z-index: 1;8550  opacity: 1;8551  pointer-events: auto;8552  transition: opacity 200ms ease;8553}85548555.peach-notes-toc-wrapper.is-hidden {8556  opacity: 0;8557  pointer-events: none;8558}85598560/* Editor wrapper */8561.peach-notes-editor-wrapper {8562  position: absolute;8563  inset: 0;8564  z-index: 2;8565  opacity: 0;8566  pointer-events: none;8567  transition: opacity 200ms ease;8568}85698570.peach-notes-editor-wrapper.is-visible {8571  opacity: 1;8572  pointer-events: auto;8573}85748575/* TOC inner */8576.peach-notes-toc {8577  position: relative;8578  display: flex;8579  flex-direction: column;8580  height: 100%;8581  padding-top: env(safe-area-inset-top, 0px);8582  padding-bottom: env(safe-area-inset-bottom, 0px);8583}85848585/* Shared header */8586.peach-notes-header {8587  display: flex;8588  align-items: center;8589  padding: 12px 16px;8590  gap: 12px;8591  flex-shrink: 0;8592  min-height: 52px;8593  position: relative;8594  z-index: 2;8595}85968597.peach-notes-back {8598  font-size: 22px;8599  color: var(--peach-t2);8600  background: none;8601  border: none;8602  padding: 4px;8603  cursor: pointer;8604  line-height: 1;8605  flex-shrink: 0;8606  transition: color 150ms ease;8607  -webkit-tap-highlight-color: transparent;8608}86098610.peach-notes-back:active { color: var(--peach-t0); }86118612.peach-notes-header-title {8613  flex: 1;8614  font-family: 'Cormorant Garamond', serif;8615  font-style: italic;8616  font-size: 22px;8617  color: var(--peach-t0);8618  text-align: center;8619}86208621.peach-notes-header-title.is-breadcrumb {8622  font-family: 'IBM Plex Mono', monospace;8623  font-style: normal;8624  font-size: 11px;8625  color: var(--peach-t3);8626  letter-spacing: 0.08em;8627  text-transform: uppercase;8628  cursor: pointer;8629}86308631.peach-notes-header-actions {8632  display: flex;8633  gap: 8px;8634  flex-shrink: 0;8635}86368637.peach-notes-header-btn {8638  width: 36px;8639  height: 36px;8640  display: flex;8641  align-items: center;8642  justify-content: center;8643  background: none;8644  border: none;8645  color: var(--peach-t2);8646  cursor: pointer;8647  border-radius: 8px;8648  font-size: 16px;8649  transition: color 150ms ease, background 150ms ease;8650  -webkit-tap-highlight-color: transparent;8651}86528653.peach-notes-header-btn:active {8654  background: rgba(255,255,255,0.06);8655  color: var(--peach-t0);8656}86578658/* Inline search bar */8659.peach-notes-search-input {8660  flex: 1;8661  background: none;8662  border: none;8663  outline: none;8664  font-family: 'IBM Plex Mono', monospace;8665  font-size: 13px;8666  color: var(--peach-t0);8667  padding: 4px 0;8668  letter-spacing: 0.02em;8669}86708671.peach-notes-search-input::placeholder {8672  color: var(--peach-t3);8673}86748675/* TOC list */8676.peach-notes-list-container {8677  flex: 1;8678  overflow-y: auto;8679  overflow-x: hidden;8680  scrollbar-width: none;8681  -webkit-overflow-scrolling: touch;8682  overscroll-behavior: contain;8683  position: relative;8684  z-index: 1;8685}86868687.peach-notes-list-container::-webkit-scrollbar { display: none; }86888689/* Note row */8690.peach-note-row {8691  position: relative;8692  display: grid;8693  grid-template-columns: 44px 8px 1fr 8px auto;8694  align-items: center;8695  min-height: 72px;8696  padding: 16px 20px;8697  border-bottom: 0.5px solid var(--peach-border);8698  cursor: pointer;8699  overflow: hidden;8700  touch-action: pan-y;8701  user-select: none;8702  -webkit-user-select: none;8703  -webkit-tap-highlight-color: transparent;8704}87058706.peach-note-row:first-child {8707  border-top: 0.5px solid var(--peach-border);8708}87098710.peach-note-row:active {8711  background: rgba(255,255,255,0.02);8712}87138714.peach-note-numeral {8715  font-family: 'Cormorant Garamond', serif;8716  font-style: italic;8717  font-size: 15px;8718  color: var(--peach-accent);8719  text-align: right;8720  line-height: 1;8721  flex-shrink: 0;8722}87238724.peach-note-title-gap { /* grid spacer */ }87258726.peach-note-title {8727  font-family: 'Cormorant Garamond', serif;8728  font-style: italic;8729  font-size: 18px;8730  color: var(--peach-t0);8731  line-height: 1.3;8732  min-width: 0;8733  overflow-wrap: break-word;8734}87358736.peach-note-title-match {8737  color: var(--peach-accent);8738}87398740.peach-note-date {8741  font-family: 'IBM Plex Mono', monospace;8742  font-size: 11px;8743  color: var(--peach-t2);8744  white-space: nowrap;8745  text-align: right;8746  flex-shrink: 0;8747  grid-column: 5;8748}87498750/* Swipe underlays */8751.peach-note-row-underlay {8752  position: absolute;8753  inset: 0;8754  display: flex;8755  align-items: center;8756  padding: 0 24px;8757  font-family: 'IBM Plex Mono', monospace;8758  font-size: 11px;8759  letter-spacing: 0.1em;8760  pointer-events: none;8761  z-index: 0;8762}87638764.peach-note-row-underlay--delete {8765  background: #8B2020;8766  color: rgba(255,255,255,0.9);8767  justify-content: flex-end;8768}87698770.peach-note-row-underlay--archive {8771  background: var(--peach-accent);8772  color: #0C0A06;8773  justify-content: flex-start;8774}87758776/* Delete confirm strip */8777.peach-note-delete-confirm {8778  position: absolute;8779  inset: 0;8780  background: var(--peach-bg);8781  display: flex;8782  align-items: center;8783  gap: 12px;8784  padding: 0 20px;8785  font-family: 'IBM Plex Mono', monospace;8786  font-size: 11px;8787  color: var(--peach-t1);8788  letter-spacing: 0.04em;8789  animation: peach-delete-confirm-in 150ms ease both;8790  z-index: 10;8791}87928793@keyframes peach-delete-confirm-in {8794  from { opacity: 0; }8795  to   { opacity: 1; }8796}87978798.peach-note-delete-confirm-btn {8799  background: #8B2020;8800  color: rgba(255,255,255,0.9);8801  border: none;8802  border-radius: 6px;8803  padding: 4px 10px;8804  font-family: 'IBM Plex Mono', monospace;8805  font-size: 10px;8806  cursor: pointer;8807  letter-spacing: 0.06em;8808}88098810.peach-note-delete-cancel-btn {8811  background: none;8812  border: none;8813  color: var(--peach-t3);8814  font-family: 'IBM Plex Mono', monospace;8815  font-size: 10px;8816  cursor: pointer;8817  letter-spacing: 0.06em;8818  padding: 4px 6px;8819}88208821/* + New note button */8822.peach-notes-new-btn {8823  font-family: 'IBM Plex Mono', monospace;8824  font-size: 12px;8825  color: var(--peach-t3);8826  text-align: center;8827  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8828  background: none;8829  border: none;8830  width: 100%;8831  cursor: pointer;8832  letter-spacing: 0.04em;8833  transition: color 150ms ease;8834  -webkit-tap-highlight-color: transparent;8835}88368837.peach-notes-new-btn:active { color: var(--peach-accent); }88388839/* Empty state */8840.peach-notes-empty {8841  display: flex;8842  flex-direction: column;8843  align-items: center;8844  justify-content: center;8845  flex: 1;8846  padding: 48px 32px;8847  gap: 16px;8848}88498850.peach-notes-empty-text {8851  font-family: 'Cormorant Garamond', serif;8852  font-style: italic;8853  font-size: 20px;8854  color: var(--peach-t3);8855  text-align: center;8856  margin: 0;8857  line-height: 1.4;8858  white-space: pre-line;8859}88608861/* ── Editor surface ── */88628863.peach-note-editor-surface {8864  position: absolute;8865  inset: 0;8866  background: var(--peach-bg);8867  display: flex;8868  flex-direction: column;8869  padding-top: env(safe-area-inset-top, 0px);8870}88718872.peach-note-editor-scroll {8873  flex: 1;8874  overflow-y: auto;8875  overflow-x: hidden;8876  scrollbar-width: none;8877  -webkit-overflow-scrolling: touch;8878  padding: 0 24px 120px;8879  position: relative;8880  z-index: 1;8881}88828883.peach-note-editor-scroll::-webkit-scrollbar { display: none; }88848885/* Desktop toolbar (always visible above body) */8886.peach-note-toolbar-desktop-inline {8887  display: flex;8888  align-items: center;8889  gap: 2px;8890  padding: 6px 0 12px;8891  margin-bottom: 4px;8892  border-bottom: 0.5px solid var(--peach-border);8893}88948895/* Title field */8896.peach-note-title-field {8897  font-family: 'Cormorant Garamond', serif;8898  font-style: italic;8899  font-size: 32px;8900  font-weight: 600;8901  color: var(--peach-t0);8902  line-height: 1.2;8903  padding: 8px 0 0;8904  outline: none;8905  min-height: 44px;8906  word-break: break-word;8907  position: relative;8908  z-index: 1;8909}89108911.peach-note-title-field:empty::before {8912  content: attr(data-placeholder);8913  color: var(--peach-t3);8914  pointer-events: none;8915}89168917/* Hairline separator */8918.peach-note-hairline {8919  height: 0.5px;8920  background: var(--peach-border);8921  margin: 12px 0 20px;8922  position: relative;8923  z-index: 1;8924}89258926/* Body field */8927.peach-note-body-field {8928  font-family: 'DM Sans', sans-serif;8929  font-size: 16px;8930  color: var(--peach-t0);8931  line-height: 1.85;8932  padding: 0;8933  outline: none;8934  min-height: 240px;8935  word-break: break-word;8936  position: relative;8937  z-index: 1;8938}89398940.peach-note-body-field:empty::before {8941  content: attr(data-placeholder);8942  color: var(--peach-t3);8943  font-style: italic;8944  pointer-events: none;8945}89468947.peach-note-body-field h2 {8948  font-family: 'Cormorant Garamond', serif;8949  font-style: italic;8950  font-size: 22px;8951  font-weight: 600;8952  color: var(--peach-t0);8953  margin: 20px 0 8px;8954}89558956.peach-note-body-field blockquote {8957  border-left: 2px solid var(--peach-accent);8958  margin: 12px 0;8959  padding-left: 16px;8960  color: var(--peach-t1);8961  font-style: italic;8962}89638964.peach-note-body-field ul,8965.peach-note-body-field ol {8966  padding-left: 20px;8967  margin: 8px 0;8968}89698970.peach-note-body-field li {8971  margin: 4px 0;8972}89738974.peach-note-body-field hr {8975  border: none;8976  border-top: 0.5px solid var(--peach-border);8977  margin: 16px 0;8978}89798980/* Saved indicator */8981.peach-note-saved-indicator {8982  font-family: 'IBM Plex Mono', monospace;8983  font-size: 11px;8984  color: var(--peach-t3);8985  letter-spacing: 0.04em;8986  text-align: right;8987  padding: 6px 24px;8988  flex-shrink: 0;8989  transition: opacity 300ms ease;8990  pointer-events: none;8991  position: relative;8992  z-index: 1;8993}89948995/* Mobile keyboard toolbar */8996.peach-note-toolbar-mobile {8997  display: flex;8998  align-items: center;8999  padding: 8px 16px;9000  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));9001  background: var(--peach-bg);9002  border-top: 0.5px solid var(--peach-border);9003  gap: 4px;9004  flex-shrink: 0;9005  position: relative;9006  z-index: 10;9007}90089009.peach-note-toolbar-btn {9010  min-width: 36px;9011  height: 36px;9012  display: flex;9013  align-items: center;9014  justify-content: center;9015  background: none;9016  border: none;9017  border-radius: 8px;9018  cursor: pointer;9019  font-size: 14px;9020  color: var(--peach-t1);9021  font-family: 'DM Sans', sans-serif;9022  font-weight: 600;9023  transition: background 100ms ease, color 100ms ease;9024  -webkit-tap-highlight-color: transparent;9025}90269027.peach-note-toolbar-btn--italic { font-style: italic; }9028.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }9029.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }90309031.peach-note-toolbar-divider {9032  width: 0.5px;9033  height: 20px;9034  background: var(--peach-border);9035  margin: 0 4px;9036  flex-shrink: 0;9037}90389039.peach-note-toolbar-spacer { flex: 1; }90409041/* Desktop: larger headline in TOC */9042@media (min-width: 400px) {9043  .peach-notes-header-title:not(.is-breadcrumb) {9044    font-size: 32px;9045  }90469047  .peach-note-row {9048    min-height: 64px;9049    padding: 14px 16px;9050  }9051}90529053/* Flying title — shared element during expansion/collapse */90549055/* ─── Light theme overrides ───────────────────────────────────────────────9056   Tokens that cannot be expressed as variable substitutions — hardcoded9057   context-specific values that need separate light-mode rules. */90589059/* Settings section headers: use text-label (#79766F) per restoration brief —9060   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY9061   presence without fighting the light parchment background. */9062.light .peach-settings-sub-label,9063[data-theme="light"] .peach-settings-sub-label,9064.light .peach-settings-nav-label,9065[data-theme="light"] .peach-settings-nav-label {9066  color: #79766F;9067}90689069/* Secondary action buttons (ghost / subtle): filled with input-well surface9070   so they read as recessed against the parchment card background. */9071.light .peach-btn--ghost:not(.peach-icon-btn),9072[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {9073  background: #EEE7DD;9074  border-color: #DDD5CB;9075  color: #1A1208;9076}9077.light .peach-icon-btn,9078[data-theme="light"] .peach-icon-btn {9079  background: transparent;9080  border-color: transparent;9081}9082.light .peach-btn--subtle,9083[data-theme="light"] .peach-btn--subtle {9084  background: #EEE7DD;9085  border-color: #DDD5CB;9086}90879088/* Wide secondary action button on the lock screen — override the9089   hardcoded dark-mode rgba values with warm parchment equivalents. */9090.light .peach-lock-secondary,9091[data-theme="light"] .peach-lock-secondary {9092  background: #EEE7DD;9093  border-color: #DDD5CB;9094  color: #1A1208;9095}9096.light .peach-lock-secondary:hover,9097[data-theme="light"] .peach-lock-secondary:hover {9098  background: #F0E9DF;9099}91009101/* Entry row hover: bg-row lifts the row above the card surface. */9102.light .peach-entry-row:hover,9103[data-theme="light"] .peach-entry-row:hover {9104  background: #F2EBE1;9105}9106.light .peach-entry-row.is-active,9107[data-theme="light"] .peach-entry-row.is-active {9108  background: #F2EBE1;9109}9110.light .peach-entry-row.is-selected,9111[data-theme="light"] .peach-entry-row.is-selected {9112  background: #F5EDE2;9113}91149115/* ──────────────────────────────────────────────────────────────────────────9116   Chirp pairing flow — bird-stage animation (Phase 1)9117   See src/popup/components/ChirpPairingFlow.tsx and the brief §6.2.9118   Three-act animation gated on the [data-phase] attribute of9119   .peach-chirp-pair; child layers (birds, chirp arcs, flight wave, dot)9120   each react via either pose class or visibility flag.9121   Tokens: accent surfaces use var(--peach-accent); bird illustration9122   colours are baked into the SVG per the brand-peach exception in §3.1.9123   ────────────────────────────────────────────────────────────────────── */91249125.peach-chirp-pair {9126  position: absolute;9127  inset: 0;9128  z-index: 3;9129  display: flex;9130  flex-direction: column;9131  padding: 14px 12px 12px;9132  width: 100%;9133  box-sizing: border-box;9134  gap: 0;9135  background:9136    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9137    var(--peach-bg);9138  color: var(--peach-t0);9139  overflow-y: auto;9140  overflow-x: hidden;9141  scrollbar-width: none;9142  isolation: isolate;9143  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9144}9145@keyframes peach-chirp-overlay-in {9146  from { opacity: 0; transform: translateY(8px); }9147  to   { opacity: 1; transform: translateY(0); }9148}9149.peach-chirp-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }9150.peach-chirp-pair::before {9151  content: '';9152  position: absolute;9153  inset: 0;9154  border-radius: inherit;9155  pointer-events: none;9156  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9157  z-index: 0;9158}9159.peach-chirp-pair > * { position: relative; z-index: 1; }91609161/* Header --------------------------------------------------------------- */9162.peach-chirp-head {9163  display: flex; align-items: center; gap: 10px;9164}9165.peach-chirp-back {9166  width: 32px; height: 32px;9167  display: inline-flex; align-items: center; justify-content: center;9168  background: transparent;9169  border: none;9170  border-radius: 8px;9171  color: var(--peach-t1);9172  cursor: pointer;9173  transition: color 0.15s ease, box-shadow 0.15s ease;9174}9175.peach-chirp-back:hover {9176  color: var(--peach-accent);9177  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9178}9179.peach-chirp-title {9180  font-family: var(--font-display, Georgia, serif);9181  font-style: italic;9182  font-size: 24px;9183  font-weight: 500;9184  letter-spacing: 0.005em;9185  color: var(--peach-t0);9186  line-height: 1;9187}9188.peach-chirp-head-spacer { flex: 1; }91899190/* Chip row ------------------------------------------------------------- */9191.peach-chirp-chip-row {9192  display: flex;9193  align-items: center;9194  justify-content: flex-start;9195  margin-top: 12px;9196}9197.peach-chirp-chip {9198  display: inline-flex; align-items: center; gap: 8px;9199  padding: 5px 10px 5px 8px;9200  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9201  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9202  border-radius: 999px;9203  font-family: var(--peach-mono, ui-monospace, monospace);9204  font-size: 11px;9205  letter-spacing: 0.04em;9206  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9207}9208.peach-chirp-chip-dot {9209  width: 6px; height: 6px; border-radius: 50%;9210  background: var(--peach-accent);9211  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9212}9213.peach-chirp-chip[data-phase="paired"] {9214  background: color-mix(in srgb, #4f9eda 12%, transparent);9215  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9216  color: #76b6e8;9217}9218.peach-chirp-chip[data-phase="paired"] .peach-chirp-chip-dot {9219  background: #76b6e8;9220  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9221}9222.peach-chirp-chip[data-phase="timeout"],9223.peach-chirp-chip[data-phase="mic_denied"],9224.peach-chirp-chip[data-phase="version_mismatch"],9225.peach-chirp-chip[data-phase="handshake_failed"] {9226  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9227  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9228  color: var(--peach-warn, #d29257);9229}9230.peach-chirp-chip[data-phase="timeout"] .peach-chirp-chip-dot,9231.peach-chirp-chip[data-phase="mic_denied"] .peach-chirp-chip-dot,9232.peach-chirp-chip[data-phase="version_mismatch"] .peach-chirp-chip-dot,9233.peach-chirp-chip[data-phase="handshake_failed"] .peach-chirp-chip-dot {9234  background: var(--peach-warn, #d29257);9235  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9236}92379238/* Bird stage ----------------------------------------------------------- */9239.peach-chirp-stage {9240  position: relative;9241  margin: 14px 0 8px;9242  height: 180px;9243  border-radius: 12px;9244  background:9245    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9246    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),9247    color-mix(in srgb, var(--peach-bg) 92%, #000);9248  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);9249  overflow: hidden;9250  isolation: isolate;9251}9252.peach-chirp-stage::after {9253  content: '';9254  position: absolute;9255  left: 12%; right: 12%;9256  bottom: 36px;9257  height: 1px;9258  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9259}92609261.peach-chirp-bird-slot {9262  position: absolute;9263  bottom: 8px;9264  width: 100px;9265  height: 110px;9266  display: flex;9267  align-items: flex-end;9268  justify-content: center;9269}9270.peach-chirp-bird-slot-desktop { left: 28px; }9271.peach-chirp-bird-slot-mobile { right: 28px; }92729273/* Mobile bird hops in from the right when handshake begins */9274.peach-chirp-bird-slot-mobile {9275  opacity: 1;9276  transform: translateX(-6px);9277  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9278}9279.peach-chirp-stage.act-listening .peach-chirp-bird-slot-mobile,9280.peach-chirp-stage.act-chirping .peach-chirp-bird-slot-mobile,9281.peach-chirp-stage.act-idle .peach-chirp-bird-slot-mobile {9282  opacity: 0;9283  transform: translateX(60px) rotate(8deg);9284}9285.peach-chirp-stage.act-handshake .peach-chirp-bird-slot-desktop,9286.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop {9287  transform: translateX(6px);9288  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9289}92909291/* Paired: both birds bob together */9292.peach-chirp-stage.act-paired .peach-chirp-bird-slot {9293  animation: peach-chirp-happy-bob 1.2s ease-in-out infinite;9294}9295.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { animation-delay: 0.2s; }9296.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop { --bb-x: 6px; }9297.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { --bb-x: -6px; }9298@keyframes peach-chirp-happy-bob {9299  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9300  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9301}93029303/* Bird internal -------------------------------------------------------- */9304.peach-chirp-bird {9305  width: 108px;9306  height: 108px;9307  transform-origin: 50% 95%;9308}9309.peach-chirp-bird svg { width: 100%; height: 100%; overflow: visible; }93109311.peach-chirp-bird-body {9312  transform-origin: 50% 80%;9313  animation: peach-chirp-bird-bob 2.4s ease-in-out infinite;9314}9315@keyframes peach-chirp-bird-bob {9316  0%, 100% { transform: translateY(0) scale(1, 1); }9317  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9318}93199320.peach-chirp-bird-eye-group {9321  animation: peach-chirp-blink 5.2s steps(1, end) infinite;9322  transform-origin: center;9323  transform-box: fill-box;9324}9325@keyframes peach-chirp-blink {9326  0%, 92%, 96%, 100% { transform: scaleY(1); }9327  94%                { transform: scaleY(0.05); }9328}93299330/* Pose: chirping — beak opens, head bobs, aura blooms */9331.peach-chirp-bird-pose-chirping .peach-chirp-bird-body {9332  animation:9333    peach-chirp-bird-bob 2.4s ease-in-out infinite,9334    peach-chirp-squeeze 1.7s ease-in-out infinite;9335}9336@keyframes peach-chirp-squeeze {9337  0%, 70%, 100% { transform-origin: 50% 85%; }9338  78%           { transform: scale(1.04, 0.96) translateY(1px); }9339  86%           { transform: scale(0.98, 1.02); }9340}9341.peach-chirp-bird-pose-chirping .peach-chirp-bird-head-group {9342  animation: peach-chirp-head-bob 1.7s ease-in-out infinite;9343}9344@keyframes peach-chirp-head-bob {9345  0%, 70%, 100% { transform: translateY(0) rotate(0); }9346  78%           { transform: translateY(-3px) rotate(-4deg); }9347  86%           { transform: translateY(-1px) rotate(-2deg); }9348}9349.peach-chirp-bird-pose-chirping .peach-chirp-bird-beak {9350  animation: peach-chirp-beak-open 1.7s ease-in-out infinite;9351}9352@keyframes peach-chirp-beak-open {9353  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9354  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9355  86%           { transform: rotate(-6deg); }9356}9357.peach-chirp-bird-pose-chirping .peach-chirp-bird-aura {9358  animation: peach-chirp-aura 1.7s ease-in-out infinite;9359}9360@keyframes peach-chirp-aura {9361  0%, 100% { opacity: 0; }9362  50%      { opacity: 0.8; }9363}9364.peach-chirp-bird-pose-chirping .peach-chirp-bird-tail {9365  animation: peach-chirp-tail-twitch 1.7s ease-in-out infinite;9366  transform-origin: 100% 50%;9367}9368@keyframes peach-chirp-tail-twitch {9369  0%, 75%, 100% { transform: rotate(0); }9370  82%           { transform: rotate(-3deg) translateX(-1px); }9371}93729373/* Pose: attentive — head tilts toward partner */9374.peach-chirp-bird-pose-attentive .peach-chirp-bird-head-group {9375  animation: peach-chirp-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9376}9377@keyframes peach-chirp-head-tilt {9378  0%   { transform: rotate(0) translateY(0); }9379  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9380  100% { transform: rotate(-6deg); }9381}9382.peach-chirp-bird-pose-attentive .peach-chirp-bird-tail {9383  animation: peach-chirp-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9384  transform-origin: 100% 50%;9385}9386@keyframes peach-chirp-tail-cock {9387  0%   { transform: rotate(0); }9388  100% { transform: rotate(-4deg); }9389}93909391/* Pose: happy — wing flutter, tuft perk, tail wag */9392.peach-chirp-bird-pose-happy .peach-chirp-bird-wing {9393  transform-origin: 80% 60%;9394  animation: peach-chirp-wing-flutter 0.32s ease-in-out 5;9395}9396@keyframes peach-chirp-wing-flutter {9397  0%, 100% { transform: rotate(0) translateY(0); }9398  50%      { transform: rotate(-16deg) translateY(-2px); }9399}9400.peach-chirp-bird-pose-happy .peach-chirp-bird-tuft {9401  transform-origin: 0% 100%;9402  animation: peach-chirp-tuft-perk 0.4s ease-in-out 3;9403}9404@keyframes peach-chirp-tuft-perk {9405  0%, 100% { transform: rotate(0); }9406  50%      { transform: rotate(-15deg) translateY(-1px); }9407}9408.peach-chirp-bird-pose-happy .peach-chirp-bird-tail {9409  transform-origin: 100% 50%;9410  animation: peach-chirp-tail-wag 0.5s ease-in-out 4;9411}9412@keyframes peach-chirp-tail-wag {9413  0%, 100% { transform: rotate(0); }9414  25%      { transform: rotate(6deg); }9415  75%      { transform: rotate(-6deg); }9416}9417.peach-chirp-bird-pose-happy .peach-chirp-bird-head-group {9418  animation: peach-chirp-head-perk 0.5s ease-out;9419}9420@keyframes peach-chirp-head-perk {9421  0%   { transform: translateY(0); }9422  40%  { transform: translateY(-3px) rotate(2deg); }9423  100% { transform: translateY(0); }9424}94259426/* Pose: sad — body droops forward */9427.peach-chirp-bird-pose-sad .peach-chirp-bird-body {9428  transform: translateY(5px) rotate(-2deg);9429  animation: none;9430}9431.peach-chirp-bird-pose-sad .peach-chirp-bird-head-group {9432  transform: translateY(4px) rotate(8deg);9433}9434.peach-chirp-bird-pose-sad .peach-chirp-bird-tuft { transform: rotate(15deg) translateY(2px); }9435.peach-chirp-bird-pose-sad .peach-chirp-bird-tail { transform: rotate(8deg) translateY(2px); }94369437.peach-chirp-bird-pose-hidden { opacity: 0; }94389439/* Chirp arcs ----------------------------------------------------------- */9440.peach-chirp-arcs {9441  position: absolute;9442  top: 18px;9443  width: 96px;9444  height: 70px;9445  pointer-events: none;9446}9447.peach-chirp-arcs-right { right: -60px; }9448.peach-chirp-arcs-left  { left: -60px; transform: scaleX(-1); }9449.peach-chirp-arc {9450  position: absolute;9451  top: 50%;9452  left: 0;9453  width: 40px;9454  height: 40px;9455  margin-top: -20px;9456  border: 1.2px solid #f4d5a8;9457  border-color: transparent #f4d5a8 transparent transparent;9458  border-radius: 50%;9459  opacity: 0;9460  animation: peach-chirp-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9461}9462@keyframes peach-chirp-arc-expand {9463  0%   { transform: scale(0.4); opacity: 0; }9464  20%  { opacity: 0.9; }9465  100% { transform: scale(1.6); opacity: 0; }9466}94679468/* Flight wave ---------------------------------------------------------- */9469.peach-chirp-flight-track {9470  position: absolute;9471  inset: 32px 36px 38px 36px;9472  pointer-events: none;9473}9474.peach-chirp-flight-wave {9475  position: absolute;9476  top: 8px;9477  left: 76px;9478  right: 76px;9479  height: 60px;9480  width: auto;9481  opacity: 0;9482  transition: opacity 0.15s ease;9483  stroke: #f4d5a8;9484  fill: none;9485}9486.peach-chirp-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9487.peach-chirp-flight-wave.is-visible { opacity: 1; }9488.peach-chirp-flight-path,9489.peach-chirp-flight-path-2 {9490  stroke-dasharray: 240;9491  stroke-dashoffset: 240;9492  stroke-linecap: round;9493  fill: none;9494}9495.peach-chirp-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9496.peach-chirp-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9497.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path {9498  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9499}9500.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path-2 {9501  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9502}9503@keyframes peach-chirp-fly {9504  0%   { stroke-dashoffset: 240; opacity: 0; }9505  20%  { opacity: 1; }9506  100% { stroke-dashoffset: -120; opacity: 0; }9507}95089509/* Connection dot ------------------------------------------------------- */9510.peach-chirp-dot {9511  position: absolute;9512  top: 50%; left: 50%;9513  transform: translate(-50%, -50%);9514  width: 40px; height: 40px;9515  opacity: 0;9516  pointer-events: none;9517  transition: opacity 0.3s ease;9518  color: var(--peach-accent);9519}9520.peach-chirp-dot.is-visible { opacity: 1; }9521.peach-chirp-dot-glow {9522  position: absolute; top: 50%; left: 50%;9523  transform: translate(-50%, -50%);9524  width: 38px; height: 38px;9525  border-radius: 50%;9526  filter: blur(10px);9527  opacity: 0.55;9528  background: var(--peach-accent);9529  animation: peach-chirp-dot-bloom 1.4s ease-out;9530}9531.peach-chirp-dot-core {9532  position: absolute; top: 50%; left: 50%;9533  transform: translate(-50%, -50%);9534  width: 8px; height: 8px;9535  border-radius: 50%;9536  background: var(--peach-accent);9537  box-shadow: 0 0 12px currentColor;9538  animation: peach-chirp-dot-core 1.4s ease-out;9539}9540.peach-chirp-dot-ring {9541  position: absolute; top: 50%; left: 50%;9542  width: 60px; height: 60px;9543  transform: translate(-50%, -50%);9544  animation: peach-chirp-dot-ring 1.4s linear;9545  stroke: var(--peach-accent);9546}9547@keyframes peach-chirp-dot-bloom {9548  0%   { width: 4px; height: 4px; opacity: 0; }9549  35%  { width: 60px; height: 60px; opacity: 0.7; }9550  100% { width: 38px; height: 38px; opacity: 0.55; }9551}9552@keyframes peach-chirp-dot-core {9553  0%   { width: 0; height: 0; }9554  35%  { width: 12px; height: 12px; }9555  100% { width: 8px; height: 8px; }9556}9557@keyframes peach-chirp-dot-ring {9558  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9559  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9560  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9561}95629563/* Motes — drift upward across the stage */9564.peach-chirp-motes {9565  position: absolute;9566  inset: 0;9567  pointer-events: none;9568}9569.peach-chirp-mote {9570  position: absolute;9571  width: 2px; height: 2px;9572  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9573  border-radius: 50%;9574  bottom: 32px;9575  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9576  opacity: 0;9577  animation: peach-chirp-mote-drift 6s linear infinite;9578  animation-delay: calc(var(--mote-i, 0) * 0.7s);9579}9580@keyframes peach-chirp-mote-drift {9581  0%   { transform: translateY(0); opacity: 0; }9582  10%  { opacity: 0.6; }9583  90%  { opacity: 0.1; }9584  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9585}95869587/* Status copy ---------------------------------------------------------- */9588.peach-chirp-copy-host {9589  margin: 4px 4px 10px;9590  text-align: center;9591  min-height: 50px;9592}9593.peach-chirp-copy {9594  animation: peach-chirp-copy-in 0.35s ease both;9595}9596@keyframes peach-chirp-copy-in {9597  from { opacity: 0; transform: translateY(4px); }9598  to   { opacity: 1; transform: translateY(0); }9599}9600.peach-chirp-headline {9601  font-family: var(--font-display, Georgia, serif);9602  font-style: italic;9603  font-size: 20px;9604  font-weight: 500;9605  line-height: 1.2;9606  letter-spacing: 0.005em;9607  color: var(--peach-t0);9608  margin-bottom: 6px;9609}9610.peach-chirp-copy-listening .peach-chirp-headline,9611.peach-chirp-copy-chirping .peach-chirp-headline,9612.peach-chirp-copy-idle .peach-chirp-headline {9613  font-family: inherit;9614  font-style: normal;9615  font-weight: 500;9616  font-size: 15px;9617  color: var(--peach-t0);9618  letter-spacing: 0;9619}9620.peach-chirp-copy-paired .peach-chirp-headline {9621  color: var(--peach-t0);9622  font-weight: 600;9623}9624.peach-chirp-sub {9625  font-size: 12.5px;9626  line-height: 1.45;9627  color: var(--peach-t1);9628  max-width: 280px;9629  margin: 0 auto;9630  text-wrap: pretty;9631}96329633/* Status action -------------------------------------------------------- */9634.peach-chirp-action {9635  margin: 2px 4px 10px;9636  margin-top: auto;9637  display: flex;9638  flex-direction: column;9639  gap: 8px;9640}9641.peach-chirp-action-waiting {9642  display: flex;9643  align-items: center;9644  justify-content: space-between;9645  gap: 12px;9646}9647.peach-chirp-cancel {9648  min-width: 96px;9649}9650.peach-chirp-listening {9651  display: inline-flex; align-items: center; gap: 4px;9652  font-family: var(--peach-mono, ui-monospace, monospace);9653  font-size: 9.5px;9654  text-transform: uppercase;9655  letter-spacing: 0.12em;9656  color: var(--peach-t1);9657  padding: 8px 10px;9658}9659.peach-chirp-listen-dot {9660  width: 4px; height: 4px;9661  border-radius: 50%;9662  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9663  animation: peach-chirp-listen-pulse 1.2s ease-in-out infinite;9664}9665.peach-chirp-listen-dot:nth-child(2) { animation-delay: 0.2s; }9666.peach-chirp-listen-dot:nth-child(3) { animation-delay: 0.4s; }9667.peach-chirp-listen-label { margin-left: 6px; }9668@keyframes peach-chirp-listen-pulse {9669  0%, 100% { opacity: 0.25; transform: scale(0.9); }9670  50%      { opacity: 1;     transform: scale(1.15); }9671}96729673.peach-chirp-action-handshake {9674  display: flex;9675  flex-direction: column;9676  align-items: center;9677  gap: 8px;9678  padding: 8px 4px;9679}9680.peach-chirp-meter {9681  width: 100%;9682  max-width: 280px;9683  height: 2px;9684  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9685  border-radius: 2px;9686  position: relative;9687  overflow: hidden;9688}9689.peach-chirp-meter-bar {9690  position: absolute;9691  top: 0; bottom: 0;9692  width: 30%;9693  left: -30%;9694  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9695  animation: peach-chirp-meter-sweep 1.4s ease-in-out infinite;9696}9697@keyframes peach-chirp-meter-sweep {9698  0%   { left: -30%; }9699  100% { left: 100%; }9700}9701.peach-chirp-meter-label {9702  font-family: var(--peach-mono, ui-monospace, monospace);9703  font-size: 9.5px;9704  text-transform: uppercase;9705  letter-spacing: 0.14em;9706  color: var(--peach-t1);9707}97089709.peach-chirp-action-paired {9710  display: flex;9711  align-items: center;9712  gap: 10px;9713}9714.peach-chirp-device-confirm {9715  flex: 1;9716  display: inline-flex;9717  align-items: center;9718  gap: 8px;9719  padding: 9px 10px 9px 12px;9720  border-radius: 10px;9721  background: color-mix(in srgb, #76b6e8 12%, transparent);9722  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9723  font-size: 12.5px;9724  color: var(--peach-t0);9725  min-width: 0;9726}9727.peach-chirp-device-confirm-glyph {9728  display: inline-flex;9729  color: #76b6e8;9730}9731.peach-chirp-device-confirm-name {9732  flex: 1;9733  overflow: hidden;9734  text-overflow: ellipsis;9735  white-space: nowrap;9736}9737.peach-chirp-device-confirm-trust {9738  font-family: var(--peach-mono, ui-monospace, monospace);9739  font-size: 9.5px;9740  text-transform: uppercase;9741  letter-spacing: 0.1em;9742  color: #76b6e8;9743  padding: 2px 6px;9744  border-radius: 4px;9745  background: color-mix(in srgb, #76b6e8 14%, transparent);9746}9747.peach-chirp-done {9748  min-width: 80px;9749}9750.peach-chirp-retry {9751  align-self: center;9752  display: block;9753  margin: 6px auto 0;9754  min-width: 120px;9755}9756.peach-chirp-mic-help {9757  font-size: 12px;9758  color: var(--peach-t1);9759  text-align: center;9760  max-width: 320px;9761  margin: 0 auto;9762}97639764/* Rest state — bird stage at idle pose, primary CTA + paired list */9765.peach-chirp-pair[data-phase="idle"] .peach-chirp-stage {9766  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9767  height: 160px;9768}9769.peach-chirp-pair-start {9770  width: 100%;9771  display: inline-flex;9772  align-items: center;9773  justify-content: center;9774  gap: 8px;9775  padding: 11px 14px;9776  border-radius: 10px;9777  background: var(--peach-accent);9778  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9779  color: #1a0905;9780  font-family: inherit;9781  font-size: 13px;9782  font-weight: 600;9783  letter-spacing: 0.01em;9784  cursor: pointer;9785  transition: filter 0.15s ease, transform 0.1s ease;9786}9787.peach-chirp-pair-start:hover { filter: brightness(1.08); }9788.peach-chirp-pair-start:active { transform: translateY(1px); }97899790.peach-chirp-paired-section {9791  margin-top: 14px;9792  display: flex;9793  flex-direction: column;9794  gap: 8px;9795}9796.peach-chirp-paired-heading {9797  margin: 0;9798  font-family: var(--peach-mono, ui-monospace, monospace);9799  font-size: 10px;9800  font-weight: 500;9801  letter-spacing: 0.14em;9802  text-transform: uppercase;9803  color: var(--peach-t1);9804}98059806/* Footer --------------------------------------------------------------- */9807.peach-chirp-foot {9808  margin: 10px -4px -2px;9809  margin-top: auto;9810}9811.peach-chirp-foot-divider {9812  height: 1px;9813  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9814  margin-bottom: 10px;9815}9816.peach-chirp-foot-text {9817  font-size: 11px;9818  line-height: 1.5;9819  color: var(--peach-t1);9820  text-align: center;9821  padding: 0 4px;9822  text-wrap: pretty;9823}98249825/* Screen-reader-only live region. Kept off the visual flow but read by9826   assistive tech as the pairing phase advances. */9827.peach-sr-only {9828  position: absolute;9829  width: 1px; height: 1px;9830  padding: 0; margin: -1px;9831  overflow: hidden;9832  clip: rect(0, 0, 0, 0);9833  white-space: nowrap;9834  border: 0;9835}98369837/* Reduced motion — stage simplifies to opacity transitions only */9838@media (prefers-reduced-motion: reduce) {9839  .peach-chirp-bird-body,9840  .peach-chirp-bird-head-group,9841  .peach-chirp-bird-beak,9842  .peach-chirp-bird-wing,9843  .peach-chirp-bird-tuft,9844  .peach-chirp-bird-tail,9845  .peach-chirp-bird-eye-group,9846  .peach-chirp-bird-aura,9847  .peach-chirp-arc,9848  .peach-chirp-flight-path,9849  .peach-chirp-flight-path-2,9850  .peach-chirp-dot-glow,9851  .peach-chirp-dot-core,9852  .peach-chirp-dot-ring,9853  .peach-chirp-mote,9854  .peach-chirp-meter-bar,9855  .peach-chirp-listen-dot,9856  .peach-chirp-bird-slot,9857  .peach-chirp-bird-slot-mobile {9858    animation: none !important;9859    transition: opacity 0.2s linear !important;9860  }9861}98629863/* ─────────────────────────────────────────────────────────────────9864   Settings → Sync surface (v3 ChirpSync). Wraps the same bird9865   animation used by the pairing flow with a paired-devices list and9866   the "Pair a device" CTA.9867   ───────────────────────────────────────────────────────────────── */9868.peach-chirp-settings {9869  position: absolute;9870  inset: 0;9871  z-index: 3;9872  display: flex;9873  flex-direction: column;9874  gap: 18px;9875  padding: 14px 12px 12px;9876  width: 100%;9877  box-sizing: border-box;9878  overflow-y: auto;9879  overflow-x: hidden;9880  /* Same warm Chirp surface as the pairing screen — unifies the two views. */9881  background:9882    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9883    var(--peach-bg);9884  color: var(--peach-t0);9885  isolation: isolate;9886  /* Hide native scrollbar — content fits 99% of the time and a chunky9887     gutter ruins the surface. */9888  scrollbar-width: none;9889  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9890}9891.peach-chirp-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9892.peach-chirp-settings::before {9893  content: '';9894  position: absolute;9895  inset: 0;9896  pointer-events: none;9897  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9898  z-index: 0;9899}9900.peach-chirp-settings > * { position: relative; z-index: 1; }99019902.peach-chirp-settings--pairing {9903  padding: 0;9904  align-items: stretch;9905  justify-content: stretch;9906  background: none;9907  isolation: auto;9908}9909.peach-chirp-settings--pairing::before { display: none; }99109911.peach-chirp-settings-header {9912  display: flex;9913  align-items: center;9914  gap: 10px;9915}9916.peach-chirp-settings-title {9917  margin: 0;9918  font-family: var(--font-display, Georgia, serif);9919  font-style: italic;9920  font-size: 24px;9921  font-weight: 500;9922  line-height: 1;9923  color: var(--peach-t0);9924  letter-spacing: 0.005em;9925}9926.peach-chirp-settings-section {9927  margin: 6px 0 -4px;9928  font-size: 11px;9929  font-weight: 600;9930  letter-spacing: 0.08em;9931  text-transform: uppercase;9932  color: var(--peach-text-muted);9933}9934.peach-chirp-settings-error {9935  font-size: 12px;9936  padding: 8px 10px;9937  border-radius: 8px;9938  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);9939  color: var(--peach-text);9940}9941.peach-chirp-settings-footer {9942  margin-top: auto;9943  padding-top: 18px;9944  font-size: 11.5px;9945  line-height: 1.5;9946  color: var(--peach-text-muted);9947  text-align: center;9948}99499950/* Hero card shown when no devices are paired yet. */9951.peach-chirp-hero {9952  display: flex;9953  flex-direction: column;9954  align-items: center;9955  gap: 12px;9956  padding: 20px 12px 8px;9957  text-align: center;9958}9959.peach-chirp-hero-svg {9960  display: block;9961  max-width: 100%;9962  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));9963}9964.peach-chirp-hero-headline {9965  margin: 0;9966  font-family: var(--font-display, Georgia, serif);9967  font-style: italic;9968  font-size: 20px;9969  font-weight: 500;9970  line-height: 1.2;9971  letter-spacing: 0.005em;9972  color: var(--peach-t0);9973}9974.peach-chirp-hero-sub {9975  margin: 0;9976  font-size: 13px;9977  line-height: 1.5;9978  color: var(--peach-t1);9979  max-width: 320px;9980  text-wrap: pretty;9981}99829983.peach-chirp-pair-cta {9984  display: flex;9985  justify-content: center;9986  padding: 4px 0 6px;9987}9988.peach-chirp-pair-button {9989  display: inline-flex;9990  align-items: center;9991  gap: 8px;9992  min-width: 220px;9993  justify-content: center;9994}9995.peach-chirp-pair-button-icon {9996  flex: 0 0 auto;9997}99989999/* Paired devices list. Roomy rows that look at home next to the rest10000   of Settings; stale rows get a soft warm-warning border tint. */10001.peach-chirp-device-list {10002  list-style: none;10003  margin: 0;10004  padding: 0;10005  display: flex;10006  flex-direction: column;10007  gap: 8px;10008}10009.peach-chirp-device-row {10010  display: flex;10011  align-items: center;10012  gap: 12px;10013  padding: 12px;10014  border-radius: 10px;10015  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10016  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);10017}10018.peach-chirp-device-row[data-stale="true"] {10019  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);10020}10021.peach-chirp-device-icon {10022  width: 32px;10023  height: 32px;10024  display: flex;10025  align-items: center;10026  justify-content: center;10027  border-radius: 8px;10028  color: var(--peach-text);10029  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);10030}10031.peach-chirp-device-info {10032  flex: 1;10033  display: flex;10034  flex-direction: column;10035  gap: 2px;10036  min-width: 0;10037}10038.peach-chirp-device-name {10039  font-size: 14px;10040  font-weight: 600;10041  color: var(--peach-text);10042  overflow: hidden;10043  text-overflow: ellipsis;10044  white-space: nowrap;10045}10046.peach-chirp-device-meta {10047  font-size: 11.5px;10048  color: var(--peach-text-muted);10049  display: flex;10050  flex-wrap: wrap;10051  align-items: center;10052  gap: 8px;10053}10054.peach-chirp-device-badge {10055  font-size: 10.5px;10056  font-weight: 500;10057  letter-spacing: 0.02em;10058  padding: 2px 6px;10059  border-radius: 999px;10060  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);10061  color: var(--peach-text);10062}10063.peach-chirp-device-stale {10064  font-size: 10.5px;10065  font-weight: 500;10066  color: var(--peach-warn, #d29257);10067}10068.peach-chirp-device-remove {10069  flex: 0 0 auto;10070  color: var(--peach-text-muted);10071}10072.peach-chirp-device-remove:hover {10073  color: var(--peach-danger, #c25b4a);10074}10075.peach-chirp-unpair-confirm {10076  display: flex;10077  gap: 6px;10078  align-items: center;10079}1008010081/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */10082.peach-chirp-pro-card {10083  position: relative;10084  margin: 18px 12px;10085  padding: 18px 20px 22px;10086  border-radius: 22px;10087  background:10088    radial-gradient(140% 90% at 50% 0%,10089      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,10090      transparent 60%),10091    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10092  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);10093  box-shadow:10094    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,10095    0 18px 40px -24px rgba(0, 0, 0, 0.45);10096  display: flex;10097  flex-direction: column;10098  align-items: center;10099  gap: 10px;10100  text-align: center;10101  overflow: hidden;10102}10103.peach-chirp-pro-stage {10104  position: relative;10105  width: 220px;10106  height: 140px;10107  display: flex;10108  align-items: flex-end;10109  justify-content: center;10110  margin-bottom: 2px;10111}10112.peach-chirp-pro-bird-slot {10113  width: 140px;10114  height: 132px;10115  display: flex;10116  align-items: flex-end;10117  justify-content: center;10118  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));10119}10120.peach-chirp-pro-bird-slot .peach-chirp-bird {10121  width: 100%;10122  height: 100%;10123}10124.peach-chirp-pro-bird-slot .peach-chirp-bird svg {10125  width: 100%;10126  height: 100%;10127  overflow: visible;10128}10129.peach-chirp-pro-chirp {10130  position: absolute;10131  top: 14px;10132  right: 8px;10133  width: 96px;10134  height: 80px;10135  color: var(--peach-accent);10136  animation: peach-chirp-pulse 2.6s ease-in-out infinite;10137  transform-origin: 0% 50%;10138  pointer-events: none;10139}10140@keyframes peach-chirp-pulse {10141  0%, 100% { opacity: 0.35; transform: translateX(0) scale(0.92); }10142  45%      { opacity: 1;    transform: translateX(2px) scale(1); }10143  70%      { opacity: 0.6;  transform: translateX(4px) scale(1.04); }10144}10145@media (prefers-reduced-motion: reduce) {10146  .peach-chirp-pro-chirp { animation: none; opacity: 0.7; }10147}10148.peach-chirp-pro-headline {10149  margin: 4px 0 0;10150  font-family: var(--font-display, "Cormorant Garamond", serif);10151  font-style: italic;10152  font-size: 19px;10153  font-weight: 500;10154  letter-spacing: 0.01em;10155  color: var(--peach-t0);10156  max-width: 280px;10157  line-height: 1.25;10158}10159.peach-chirp-pro-body {10160  margin: 0;10161  font-size: 13px;10162  line-height: 1.55;10163  color: var(--peach-t1);10164  max-width: 300px;10165}10166.peach-chirp-pro-cta {10167  margin-top: 4px;10168}10169.peach-chirp-pro-foot {10170  margin: 2px 0 0;10171  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10172  font-size: 0.625rem;10173  letter-spacing: 0.08em;10174  text-transform: uppercase;10175  color: var(--peach-t2);10176  opacity: 0.75;10177}1017810179/* Shell border and shadow in light mode: match dark mode's near-invisible10180   border weight so the popup frame looks the same in both themes. */10181.light .peach-shell,10182.light .peach-screen {10183  border-color: rgba(26, 18, 8, 0.07);10184  box-shadow:10185    0 2px 8px rgba(80, 56, 32, 0.08),10186    0 14px 48px rgba(80, 56, 32, 0.10),10187    0 0 0 1px rgba(26, 18, 8, 0.04);10188}