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; }1046/* Method chooser — two large tappable cards before the birds appear. */1047.peach-pair-method-list {1048  display: flex; flex-direction: column; gap: 10px; padding: 4px 18px 8px;1049}1050.peach-pair-method {1051  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;1052  width: 100%; text-align: left;1053}1054.peach-pair-method-title { font-size: 0.875rem; font-weight: 600; }1055.peach-pair-method-sub { font-size: 0.6875rem; color: var(--peach-t2); }1056.peach-chirp-pair-start--desktop {1057  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1058}10591060/* Breach badge */1061.peach-breach-badge {1062  display: flex;1063  position: relative;1064  z-index: 1;1065  align-items: center;1066  gap: 7px;1067  font-size: 0.5625rem;1068  color: var(--peach-breach);1069  padding: 5px 10px;1070  margin-bottom: 4px;1071  border-radius: 8px;1072  background: rgba(220, 80, 60, 0.07);1073  border: 1px solid rgba(220, 80, 60, 0.18);1074  letter-spacing: 0.04em;1075}10761077.peach-password-value.is-breached {1078  color: rgba(220, 80, 60, 0.75);1079  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1080}10811082/* ── Overlay views ─────────────────────────────────────────────────── */1083.peach-overlay-view {1084  position: absolute;1085  inset: 0;1086  display: flex;1087  flex-direction: column;1088  background:1089    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1090    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1091    var(--peach-bg);1092  z-index: 2;1093  overflow: hidden;1094  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1095}10961097.peach-overlay-view:has(.stk-shell) {1098  background: var(--peach-bg);1099}1100@keyframes overlay-in {1101  from { opacity: 0; transform: translateY(8px); }1102  to   { opacity: 1; transform: translateY(0); }1103}1104.peach-overlay-view.ov-enter-up {1105  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1106}1107.peach-overlay-view.ov-exit-up {1108  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1109}1110.peach-overlay-view.ov-enter-right {1111  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1112}1113.peach-overlay-view.ov-exit-right {1114  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1115}11161117@keyframes ov-enter-up {1118  from { opacity: 0; transform: translateY(18px); }1119  to   { opacity: 1; transform: translateY(0); }1120}1121@keyframes ov-exit-up {1122  from { opacity: 1; transform: translateY(0); }1123  to   { opacity: 0; transform: translateY(-12px); }1124}1125@keyframes ov-enter-right {1126  from { opacity: 0; transform: translateX(20px); }1127  to   { opacity: 1; transform: translateX(0); }1128}1129@keyframes ov-exit-right {1130  from { opacity: 1; transform: translateX(0); }1131  to   { opacity: 0; transform: translateX(20px); }1132}11331134/* Overlay shared header */1135.peach-overlay-header {1136  padding: 10px 12px 8px;1137  display: flex;1138  align-items: center;1139  gap: 10px;1140  flex-shrink: 0;1141}1142/* Back button — circular pill matching the settings stack masthead (.stk-back) */1143.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1144  width: 28px;1145  height: 28px;1146  flex: 0 0 28px;1147  border-radius: 999px;1148  border: 1px solid var(--peach-border);1149  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1150  color: var(--peach-t1);1151  padding: 0;1152}1153.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1154  color: var(--peach-t0);1155  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1156  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1157}1158.peach-overlay-title {1159  font-family: var(--font-display);1160  font-style: italic;1161  font-weight: 400;1162  font-size: 20px;1163  line-height: 1;1164  color: var(--peach-t0);1165  flex: 1;1166  text-align: center;1167}1168/* Balances the 28px back button so the title stays visually centred */1169.peach-overlay-spacer {1170  width: 28px;1171  flex: 0 0 28px;1172}11731174.peach-overlay-card {1175  background: var(--peach-s1);1176  border: 1px solid var(--peach-t3);1177  border-radius: 12px;1178  overflow: hidden;1179  width: 100%;1180}11811182.peach-onboarding-alt-actions {1183  display: flex;1184  flex-direction: column;1185  gap: 4px;1186  padding: 0;1187}11881189.peach-settings-copy {1190  margin: 0 0 10px;1191  font-size: 0.6875rem;1192  line-height: 1.5;1193  color: var(--peach-t2);1194}11951196.peach-settings-copy strong {1197  color: var(--peach-t0);1198}11991200.peach-settings-copy--spacious {1201  margin-bottom: 12px;1202}12031204.peach-settings-copy--result {1205  color: var(--peach-accent);1206  font-size: 0.8125rem;1207  text-align: center;1208  padding: 8px 0;1209}12101211.peach-settings-copy--danger {1212  color: var(--peach-breach);1213}12141215.peach-settings-copy--success {1216  color: var(--peach-accent);1217}12181219.peach-inline-feedback {1220  font-size: 0.6875rem;1221  margin: 10px 0 0;1222}12231224.peach-inline-feedback--ok {1225  color: var(--peach-accent);1226}12271228.peach-inline-feedback--error {1229  color: var(--peach-breach);1230}12311232.peach-inline-feedback--muted {1233  color: var(--peach-t2);1234  font-size: 0.625rem;1235  margin: 4px 0;1236}12371238.peach-inline-feedback--spaced {1239  margin-top: 12px;1240}12411242.peach-settings-actions--row {1243  display: flex;1244  gap: 6px;1245}12461247.peach-settings-actions--end {1248  margin-top: 14px;1249  justify-content: flex-end;1250}12511252.peach-settings-stack {1253  display: flex;1254  flex-direction: column;1255  gap: 6px;1256}12571258.peach-settings-stack--tight {1259  gap: 4px;1260}12611262.peach-settings-stack--spacious {1263  gap: 8px;1264}12651266.peach-settings-input {1267  width: 100%;1268  box-sizing: border-box;1269  padding: 8px 10px;1270  background: rgba(0, 0, 0, 0.22);1271  border: 1px solid transparent;1272  border-radius: 6px;1273  color: var(--peach-t0);1274  font-family: var(--font-ui);1275  font-size: 0.75rem;1276  outline: none;1277  transition: border-color 120ms ease, background 120ms ease;1278}12791280.peach-settings-input:focus {1281  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1282  background: rgba(0, 0, 0, 0.28);1283}12841285.peach-settings-input[type="password"] {1286  font-family: var(--font-mono);1287  letter-spacing: 0.04em;1288}12891290.peach-hidden-file-input {1291  display: none;1292}12931294.peach-checkbox-note {1295  display: flex;1296  align-items: flex-start;1297  gap: 8px;1298  font-size: 0.6875rem;1299  color: var(--peach-t1);1300  cursor: pointer;1301  margin: 12px 0;1302}13031304.peach-checkbox-note input {1305  margin-top: 1px;1306}13071308.peach-danger-notice {1309  background: rgba(220, 80, 60, 0.08);1310  border: 1px solid rgba(220, 80, 60, 0.2);1311  border-radius: 6px;1312  padding: 9px 11px;1313  font-size: 0.6875rem;1314  color: var(--peach-t1);1315  line-height: 1.5;1316}13171318.peach-info-notice {1319  font-size: 0.6875rem;1320  color: var(--peach-t1);1321  line-height: 1.5;1322  background: var(--surface-card);1323  border: 1px solid var(--peach-t3);1324  border-radius: 6px;1325  padding: 8px 10px;1326}13271328.peach-info-notice--warn {1329  border-color: rgba(220, 38, 38, 0.4);1330  background: rgba(220, 38, 38, 0.06);1331  color: rgba(220, 38, 38, 0.92);1332  margin-bottom: 8px;1333}13341335.peach-strength-row {1336  display: flex;1337  align-items: center;1338  gap: 8px;1339  margin-bottom: 10px;1340}13411342.peach-strength-track {1343  flex: 1;1344  height: 4px;1345  background: var(--peach-s2);1346  border-radius: 2px;1347  overflow: hidden;1348}13491350.peach-strength-fill {1351  height: 100%;1352  border-radius: 2px;1353  transition: width 120ms ease, background 120ms ease;1354}13551356/* ── Type selector tabs ── */1357.peach-type-tabs {1358  display: flex;1359  gap: 0;1360  background: var(--peach-t4);1361  border-radius: 8px;1362  padding: 3px;1363}13641365.peach-type-tab {1366  flex: 1;1367  display: flex;1368  align-items: center;1369  justify-content: center;1370  gap: 6px;1371  padding: 6px 10px;1372  border-radius: 6px;1373  border: none;1374  background: transparent;1375  cursor: pointer;1376  font-family: Inter, system-ui, sans-serif;1377  font-size: 0.6875rem;1378  font-weight: 400;1379  letter-spacing: 0.04em;1380  color: var(--peach-t1);1381  transition: background 150ms ease, color 150ms ease;1382}13831384.peach-type-tab.is-active {1385  background: var(--peach-s2);1386  color: var(--peach-t0);1387  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1388}13891390.peach-type-tab:not(.is-active):hover {1391  color: var(--peach-t0);1392}13931394.peach-type-tab svg {1395  opacity: 0.7;1396  flex-shrink: 0;1397}13981399.peach-type-tab.is-active svg {1400  opacity: 1;1401}14021403/* ── List view ───────────────────────────────────────────────────────── */1404.peach-list-top {1405  padding: 0 10px;1406  min-height: 46px;1407  display: flex;1408  align-items: center;1409  gap: 6px;1410  border-bottom: 1px solid var(--peach-t3);1411  flex-shrink: 0;1412  background: var(--peach-s1);1413}14141415.peach-vault-list {1416  flex: 1;1417  overflow-y: auto;1418  scrollbar-width: none;1419}1420.peach-vault-list::-webkit-scrollbar { display: none; }14211422/* Scrollbar — vault list */1423.peach-vault-list {1424  scrollbar-width: thin;1425  scrollbar-color: var(--peach-t3) transparent;1426}14271428.peach-vault-list::-webkit-scrollbar {1429  width: 3px;1430}14311432.peach-vault-list::-webkit-scrollbar-thumb {1433  background: var(--peach-t3);1434  border-radius: 2px;1435}14361437.peach-entry-row {1438  width: 100%;1439  display: flex;1440  align-items: center;1441  gap: 10px;1442  padding: 9px 16px;1443  background: transparent;1444  border: none;1445  border-bottom: 1px solid var(--peach-t3);1446  cursor: pointer;1447  color: inherit;1448  text-align: left;1449  transition: background 80ms ease;1450}1451.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1452.peach-entry-row:last-child { border-bottom: none; }1453.peach-entry-row.is-active {1454  box-shadow: inset 2px 0 0 var(--peach-accent);1455  background: rgba(240,232,216,0.03);1456}1457.peach-entry-row:focus-visible {1458  outline: none;1459  box-shadow: 0 0 0 1px var(--peach-border-accent);1460  background: rgba(240,232,216,0.03);1461}1462.peach-entry-row-icon {1463  width: 26px; height: 26px;1464  border-radius: 7px;1465  border: 1px solid var(--peach-t3);1466  display: flex; align-items: center; justify-content: center;1467  color: var(--peach-t2);1468  flex-shrink: 0;1469}1470.peach-entry-row-icon.is-breach {1471  border-color: rgba(220,80,60,0.3);1472  color: rgba(220,80,60,0.7);1473}14741475/* Title-initials chip used as the favicon fallback for login entries whose1476 * real favicon hasn't been cached by the browser yet (freshly-imported,1477 * never-visited domains). Background colour is hashed from the title so1478 * the same entry always shows the same chip. The chip fits the same1479 * 26×26 row icon slot the favicon would take. */1480.peach-favicon-initials {1481  display: inline-flex;1482  align-items: center;1483  justify-content: center;1484  width: 100%;1485  height: 100%;1486  border-radius: 4px;1487  font-family: "IBM Plex Mono", monospace;1488  font-size: 0.5625rem;1489  font-weight: 600;1490  letter-spacing: 0.04em;1491  color: rgba(240, 232, 216, 0.92);1492  text-transform: uppercase;1493  user-select: none;1494}1495.peach-entry-row-info { flex: 1; min-width: 0; }1496.peach-entry-row-name {1497  display: block;1498  font-family: var(--font-display);1499  font-size: 1.0625rem;1500  font-style: italic;1501  font-weight: 400;1502  color: var(--peach-t0);1503  line-height: 1.2;1504  white-space: nowrap;1505  overflow: hidden;1506  text-overflow: ellipsis;1507}1508.peach-entry-row-meta {1509  display: block;1510  font-family: "IBM Plex Mono", monospace;1511  font-size: 0.5625rem;1512  color: var(--peach-t2);1513  margin-top: 1px;1514  letter-spacing: 0.05em;1515}1516.peach-entry-row-dot {1517  width: 5px; height: 5px;1518  border-radius: 50%;1519  background: rgba(220,80,60,0.7);1520  flex-shrink: 0;1521}1522.peach-new-entry-row {1523  display: flex;1524  align-items: center;1525  justify-content: center;1526  gap: 6px;1527  width: 100%;1528  padding: 11px;1529  background: transparent;1530  border: none;1531  border-top: 1px solid var(--peach-t3);1532  color: var(--peach-t2);1533  font-family: "IBM Plex Mono", monospace;1534  font-size: 0.5625rem;1535  text-transform: uppercase;1536  letter-spacing: 0.14em;1537  cursor: pointer;1538  flex-shrink: 0;1539  transition: color 120ms ease, background 120ms ease;1540}1541.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }15421543/* ── Multi-select mode ─────────────────────────────────────────────── */15441545/* Select-mode trigger button in sort bar — same shape as trash btn */1546.peach-sort-select-btn {1547  display: flex;1548  align-items: center;1549  justify-content: center;1550  padding: 3px 5px;1551  background: transparent;1552  border: none;1553  cursor: pointer;1554  color: var(--peach-t2);1555  border-radius: 4px;1556  transition: color 140ms ease, background 140ms ease;1557}1558.peach-sort-select-btn:hover {1559  color: var(--peach-t1);1560  background: var(--peach-t3);1561}15621563/* Sort bar in select mode */1564.peach-select-cancel-btn {1565  background: transparent;1566  border: none;1567  padding: 0 4px;1568  cursor: pointer;1569  font-family: "IBM Plex Mono", monospace;1570  font-size: 0.5625rem;1571  letter-spacing: 0.12em;1572  text-transform: uppercase;1573  color: var(--peach-t2);1574  transition: color 140ms ease;1575  flex-shrink: 0;1576}1577.peach-select-cancel-btn:hover { color: var(--peach-t0); }15781579.peach-select-count-label {1580  flex: 1;1581  text-align: center;1582  font-family: "IBM Plex Mono", monospace;1583  font-size: 0.5625rem;1584  letter-spacing: 0.14em;1585  text-transform: uppercase;1586  color: var(--peach-t1);1587}15881589.peach-select-all-btn {1590  background: transparent;1591  border: none;1592  padding: 0 4px;1593  cursor: pointer;1594  font-family: "IBM Plex Mono", monospace;1595  font-size: 0.5625rem;1596  letter-spacing: 0.12em;1597  text-transform: uppercase;1598  color: var(--peach-t2);1599  transition: color 140ms ease;1600  flex-shrink: 0;1601}1602.peach-select-all-btn:hover { color: var(--peach-accent); }16031604/* List in select mode */1605.peach-vault-list.is-selecting .peach-entry-row {1606  cursor: default;1607}1608.peach-vault-list.is-selecting .peach-entry-row:hover {1609  background: rgba(240,232,216,0.02);1610}1611.peach-vault-list.is-selecting .peach-entry-row.is-selected {1612  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1613}1614.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1615  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1616}16171618/* Select indicator circles in icon slot */1619.peach-entry-row-icon.is-select-icon {1620  color: var(--peach-t2);1621}1622.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1623  color: var(--peach-accent);1624}16251626/* Delete action bar at bottom (replaces new-entry row) */1627.peach-select-action-bar {1628  display: flex;1629  align-items: center;1630  justify-content: center;1631  gap: 7px;1632  width: 100%;1633  padding: 11px;1634  background: transparent;1635  border: none;1636  border-top: 1px solid var(--peach-t3);1637  color: var(--peach-t1);1638  font-family: "IBM Plex Mono", monospace;1639  font-size: 0.5625rem;1640  text-transform: uppercase;1641  letter-spacing: 0.14em;1642  cursor: pointer;1643  flex-shrink: 0;1644  transition: color 120ms ease, background 120ms ease;1645}1646.peach-select-action-bar:not(:disabled):hover {1647  color: var(--peach-t0);1648  background: rgba(220,80,60,0.06);1649}1650.peach-select-action-bar:not(:disabled):hover svg {1651  stroke: rgba(220,80,60,0.8);1652}1653.peach-select-action-bar:disabled,1654.peach-select-action-bar.is-empty {1655  color: var(--peach-t2);1656  cursor: default;1657  opacity: 0.5;1658}1659.peach-search-counter-list {1660  white-space: nowrap;1661  flex-shrink: 0;1662}1663.peach-list-empty {1664  min-height: 180px;1665  display: grid;1666  place-items: center;1667  color: var(--peach-t2);1668  font-family: "IBM Plex Mono", monospace;1669  font-size: 0.6875rem;1670}16711672/* ── Settings view ───────────────────────────────────────────────────── */1673.peach-settings-body {1674  flex: 1;1675  overflow-y: auto;1676  min-height: 0;1677  display: flex;1678  flex-direction: column;1679  padding: 2px 0 10px;1680}1681.peach-settings-group {1682  margin: 4px 10px;1683  padding: 9px 14px 11px;1684  border-radius: 12px;1685  border: 1px solid rgba(255, 255, 255, 0.07);1686  background: rgba(26, 20, 16, 0.60);1687  backdrop-filter: blur(10px) saturate(1.3);1688  -webkit-backdrop-filter: blur(10px) saturate(1.3);1689}16901691.peach-settings-group + .peach-settings-group {1692  margin-top: 6px;1693}16941695@supports not (backdrop-filter: blur(1px)) {1696  .peach-settings-group {1697    background: rgba(26, 20, 16, 0.90);1698    border-color: rgba(255, 255, 255, 0.09);1699    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1700  }1701}17021703.light .peach-settings-group,1704[data-theme="light"] .peach-settings-group {1705  background: rgba(245, 237, 226, 0.70);1706  border-color: rgba(26, 18, 8, 0.08);1707  backdrop-filter: blur(10px) saturate(1.2);1708  -webkit-backdrop-filter: blur(10px) saturate(1.2);1709}17101711@supports not (backdrop-filter: blur(1px)) {1712  .light .peach-settings-group,1713  [data-theme="light"] .peach-settings-group {1714    background: rgba(245, 237, 226, 0.97);1715    border-color: rgba(26, 18, 8, 0.10);1716  }1717}1718.peach-export-intro {1719  padding-bottom: 8px;1720}1721.peach-export-card {1722  display: grid;1723  gap: 10px;1724}1725.peach-rune-canvas {1726  border-radius: 8px;1727  background: rgba(0, 0, 0, 0.22);1728  flex: 1;1729  align-self: center;1730}1731.peach-script-input {1732  font-family: "PeachScript", monospace;1733  font-size: 0.6875rem;1734  line-height: 1.9;1735  letter-spacing: 0.06em;1736  color: var(--peach-t0);1737  background: rgba(0, 0, 0, 0.22);1738  border: none;1739  border-radius: 6px;1740  padding: 12px;1741  width: 100%;1742  min-height: 96px;1743  resize: vertical;1744  word-break: break-all;1745  scrollbar-width: none;1746  -ms-overflow-style: none;1747}17481749.peach-script-input::-webkit-scrollbar { display: none; }1750.peach-csv-warning {1751  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1752  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1753  color: var(--peach-t0);1754  border-radius: 6px;1755  padding: 10px 12px;1756  margin-bottom: 8px;1757  font-size: 0.75rem;1758  line-height: 1.45;1759}1760.peach-export-card--primary {1761  background:1762    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1763}17641765/* Export menu — distribute the three format cards across the popup. */1766.peach-export-menu {1767  display: flex;1768  flex-direction: column;1769  flex: 1;1770  min-height: 0;1771}1772.peach-export-menu .peach-settings-group {1773  flex: 1;1774  display: flex;1775  flex-direction: column;1776  justify-content: center;1777  gap: 10px;1778}17791780/* Result view — the script-string fills the remaining vertical surface. */1781.peach-export-result-group {1782  flex: 1;1783  display: flex;1784  flex-direction: column;1785  min-height: 0;1786  border-bottom: none;1787}1788.peach-export-result-group .peach-export-card {1789  flex: 1;1790  min-height: 0;1791  display: flex;1792  flex-direction: column;1793  gap: 10px;1794}1795.peach-export-result-group .peach-export-card-copy {1796  flex-shrink: 0;1797}1798.peach-export-result-group .peach-settings-label {1799  flex-shrink: 0;1800}1801.peach-export-result-group button {1802  flex-shrink: 0;1803}1804.peach-export-card-head {1805  display: flex;1806  align-items: center;1807  justify-content: space-between;1808  gap: 10px;1809}1810.peach-export-card-copy {1811  margin: 0;1812  font-size: 0.75rem;1813  line-height: 1.55;1814  color: var(--peach-t1);1815}1816.peach-export-note {1817  margin: 0;1818  font-size: 0.625rem;1819  line-height: 1.5;1820  color: var(--peach-t2);1821}1822.peach-export-strength-track {1823  height: 3px;1824  background: var(--peach-border);1825  border-radius: 2px;1826  margin: 4px 0 2px;1827  overflow: hidden;1828}1829.peach-export-strength-fill {1830  height: 100%;1831  border-radius: 2px;1832  transition: width 250ms ease, background 250ms ease;1833}1834.peach-export-strength-warn {1835  margin: 0;1836  font-size: 0.625rem;1837  line-height: 1.5;1838  color: #e84040;1839  font-family: "IBM Plex Mono", monospace;1840}1841.peach-export-strength-hint {1842  margin: 0;1843  font-size: 0.625rem;1844  line-height: 1.5;1845  color: var(--peach-t2);1846  font-family: "IBM Plex Mono", monospace;1847}1848.peach-export-pill {1849  display: inline-flex;1850  align-items: center;1851  padding: 4px 8px;1852  border-radius: 999px;1853  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1854  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1855  color: var(--peach-accent);1856  font-family: "IBM Plex Mono", monospace;1857  font-size: 0.5rem;1858  letter-spacing: 0.12em;1859  text-transform: uppercase;1860  white-space: nowrap;1861}1862.peach-export-pill--danger {1863  border-color: rgba(220,80,60,0.22);1864  background: rgba(220,80,60,0.08);1865  color: var(--peach-breach);1866}1867.peach-settings-label {1868  margin: 0 0 6px;1869  font-family: "IBM Plex Mono", monospace;1870  font-size: 0.5rem;1871  text-transform: uppercase;1872  letter-spacing: 0.18em;1873  color: var(--peach-t2);1874}1875.peach-settings-row {1876  display: flex;1877  align-items: center;1878  justify-content: space-between;1879  gap: 12px;1880  min-height: 34px;1881  padding: 6px 0;1882  font-size: 0.8125rem;1883  color: var(--peach-t1);1884}1885.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1886.peach-settings-value {1887  font-family: "IBM Plex Mono", monospace;1888  font-size: 0.625rem;1889  color: var(--peach-t2);1890}18911892.peach-settings-value--status {1893  display: flex;1894  align-items: center;1895  gap: 6px;1896}18971898.peach-settings-link {1899  font-family: "IBM Plex Mono", monospace;1900  font-size: 0.625rem;1901  color: var(--peach-accent);1902  text-decoration: none;1903  cursor: pointer;1904}1905.peach-settings-link:hover {1906  text-decoration: underline;1907}19081909.peach-settings-row--stack {1910  flex-direction: column;1911  align-items: stretch;1912  gap: 6px;1913}19141915.peach-settings-row--top {1916  align-items: flex-start;1917}19181919.peach-settings-row-main {1920  display: flex;1921  flex-direction: column;1922  gap: 4px;1923  flex: 1;1924}1925.peach-toggle {1926  width: 28px; height: 16px;1927  border-radius: 999px;1928  background: var(--peach-t3);1929  border: 1px solid var(--peach-t3);1930  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1931  flex-shrink: 0;1932  transition: background 200ms ease, border-color 200ms ease;1933  cursor: pointer;1934}1935.peach-toggle.is-on {1936  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1937  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1938}1939.peach-toggle-knob {1940  width: 10px; height: 10px;1941  border-radius: 50%;1942  background: var(--peach-t2);1943  flex-shrink: 0;1944  transform: translateX(0px);1945  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1946}1947.peach-toggle.is-on .peach-toggle-knob {1948  background: var(--peach-accent);1949  transform: translateX(12px);1950}1951.peach-settings-footer {1952  display: flex;1953  align-items: center;1954  gap: 8px;1955  margin-top: auto;1956  padding: 14px 16px 8px;1957  font-family: "IBM Plex Mono", monospace;1958  font-size: 0.5625rem;1959  color: var(--peach-t2);1960}19611962/* ── Settings home navigation ──────────────────────────────────────────── */1963.peach-settings-nav-label {1964  margin: 0 0 2px;1965  padding: 12px 16px 4px;1966  font-family: "IBM Plex Mono", monospace;1967  font-size: 0.5rem;1968  text-transform: uppercase;1969  letter-spacing: 0.18em;1970  color: var(--peach-t2);1971}19721973.peach-settings-cat-row {1974  display: flex;1975  align-items: center;1976  gap: 10px;1977  width: 100%;1978  padding: 9px 16px;1979  background: none;1980  border: none;1981  border-bottom: 1px solid var(--peach-t3);1982  cursor: pointer;1983  text-align: left;1984  color: inherit;1985  transition: background var(--peach-dur-80) ease;1986}1987.peach-settings-cat-row:hover {1988  background: var(--peach-t3);1989}1990.peach-settings-cat-row:last-child {1991  border-bottom: none;1992}19931994.peach-settings-cat-icon {1995  width: 28px;1996  height: 28px;1997  border-radius: 7px;1998  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1999  color: var(--peach-accent);2000  display: flex;2001  align-items: center;2002  justify-content: center;2003  flex-shrink: 0;2004}2005/* Light theme: peach-on-cream is too low-contrast — both colors are warm.2006   Darken the icon stroke to ink and bump the bg tint so the icon reads2007   sharply while the cell still feels accent-tinted. */2008.light .peach-settings-cat-icon {2009  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);2010  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));2011}20122013.peach-settings-cat-content {2014  flex: 1;2015  display: flex;2016  flex-direction: column;2017  gap: 2px;2018  min-width: 0;2019}20202021.peach-settings-cat-name {2022  font-size: 0.8125rem;2023  font-weight: 450;2024  color: var(--peach-t0);2025  line-height: 1.2;2026}20272028.peach-settings-cat-desc {2029  font-size: 0.625rem;2030  color: var(--peach-t2);2031  line-height: 1.3;2032  white-space: nowrap;2033  overflow: hidden;2034  text-overflow: ellipsis;2035}20362037.peach-settings-cat-chevron {2038  color: var(--peach-t2);2039  flex-shrink: 0;2040  opacity: 0.5;2041}20422043/* ── Settings sub-view section labels ──────────────────────────────────── */2044.peach-settings-sub-label {2045  margin: 12px 0 4px;2046  font-family: "IBM Plex Mono", monospace;2047  font-size: 0.5rem;2048  text-transform: uppercase;2049  letter-spacing: 0.18em;2050  color: var(--peach-t2);2051}2052.peach-settings-sub-label:first-child {2053  margin-top: 4px;2054}20552056/* ── Settings: collapsible Advanced section ─────────────────────────────── */2057.peach-settings-advanced-toggle {2058  display: flex;2059  align-items: center;2060  justify-content: space-between;2061  width: 100%;2062  background: none;2063  border: none;2064  cursor: pointer;2065  padding: 12px 0 4px;2066  margin: 0;2067  color: inherit;2068}2069.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {2070  color: var(--peach-t1);2071}2072.peach-settings-advanced-chevron {2073  font-size: 0.5625rem;2074  color: var(--peach-t3);2075  letter-spacing: 0;2076  transition: color 120ms ease;2077}20782079/* ── Feedback form ──────────────────────────────────────────────────────── */2080.peach-feedback-group {2081  flex: 1;2082  display: flex;2083  flex-direction: column;2084  border-bottom: none;2085}20862087.peach-feedback-intro {2088  margin: 4px 0 14px;2089  font-size: 0.75rem;2090  line-height: 1.55;2091  color: var(--peach-t1);2092}20932094.peach-feedback-chips {2095  display: flex;2096  flex-wrap: wrap;2097  gap: 6px;2098  margin-bottom: 14px;2099}21002101.peach-feedback-chip {2102  padding: 4px 10px;2103  border-radius: 999px;2104  border: 1px solid var(--peach-t3);2105  background: none;2106  color: var(--peach-t2);2107  font-size: 0.6875rem;2108  font-family: var(--font-ui);2109  cursor: pointer;2110  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2111    background var(--peach-dur-80) ease;2112}2113.peach-feedback-chip:hover {2114  border-color: var(--peach-t2);2115  color: var(--peach-t1);2116}2117.peach-feedback-chip.is-active {2118  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);2119  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));2120  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);2121  box-shadow:2122    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),2123    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);2124  font-weight: 700;2125}21262127.peach-feedback-textarea {2128  flex: 1;2129  width: 100%;2130  min-height: 120px;2131  box-sizing: border-box;2132  background: rgba(0, 0, 0, 0.22);2133  border: 1px solid transparent;2134  border-radius: 6px;2135  color: var(--peach-t0);2136  font-size: 0.75rem;2137  font-family: var(--font-ui);2138  line-height: 1.5;2139  padding: 8px 10px;2140  resize: none;2141  outline: none;2142  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2143}2144.peach-feedback-textarea:focus {2145  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2146  background: rgba(0, 0, 0, 0.28);2147}2148.peach-feedback-textarea:focus {2149  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2150}2151.peach-feedback-textarea::placeholder {2152  color: var(--peach-t2);2153}21542155.peach-feedback-meta {2156  margin: 6px 0 0;2157  font-size: 0.625rem;2158  color: var(--peach-t2);2159  font-family: "IBM Plex Mono", monospace;2160}21612162.peach-feedback-result {2163  margin: 8px 0 0;2164  font-size: 0.6875rem;2165  font-family: "IBM Plex Mono", monospace;2166}2167.peach-feedback-result--ok { color: var(--peach-sync-ok); }2168.peach-feedback-result--err { color: var(--peach-breach); }21692170.peach-feedback-submit {2171  width: 100%;2172  margin-top: 12px;2173  justify-content: center;2174}21752176.peach-feedback-anon {2177  margin: 8px 0 0;2178  font-size: 0.625rem;2179  color: var(--peach-t2);2180  text-align: center;2181}21822183.peach-feedback-thanks {2184  margin: auto 0;2185  padding: 18px 14px;2186  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);2187  border-radius: 8px;2188  background:2189    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),2190    rgba(0, 0, 0, 0.18);2191  color: var(--peach-t1);2192  text-align: center;2193}21942195.peach-feedback-thanks p {2196  margin: 0;2197  font-size: 0.75rem;2198  line-height: 1.5;2199}22002201.peach-feedback-thanks-title {2202  color: var(--peach-t0);2203  font-family: "Cormorant Garamond", serif;2204  font-size: 1.375rem !important;2205  line-height: 1.1 !important;2206  margin-bottom: 8px !important;2207}22082209.peach-passkey-badge {2210  margin-left: 8px;2211  font-size: 0.625rem;2212  letter-spacing: 0.06em;2213  text-transform: uppercase;2214  color: var(--peach-t2);2215  font-family: var(--font-ui);2216  vertical-align: middle;2217}22182219.peach-passkey-delete-btn {2220  color: var(--peach-breach);2221  border-color: rgba(229, 85, 85, 0.25);2222}22232224.peach-passkey-delete-confirm {2225  display: flex;2226  align-items: center;2227  gap: 8px;2228  padding: 8px 10px;2229  background: rgba(229, 85, 85, 0.06);2230  border: 1px solid rgba(229, 85, 85, 0.2);2231  border-radius: 6px;2232}22332234.peach-passkey-delete-confirm-copy {2235  flex: 1;2236  font-size: 0.6875rem;2237  color: var(--peach-t1);2238}22392240.peach-passkey-delete-btn--confirm {2241  color: var(--peach-breach);2242  border-color: rgba(229, 85, 85, 0.4);2243}22442245.peach-passkey-activity {2246  flex-direction: column;2247  align-items: flex-start;2248  gap: 4px;2249}22502251.peach-passkey-meta {2252  font-size: 0.6875rem;2253  color: var(--peach-t2);2254}22552256.peach-passkey-actions {2257  position: relative;2258  z-index: 1;2259  margin-top: 14px;2260  display: flex;2261  flex-direction: column;2262  gap: 8px;2263}22642265.peach-passkey-approval {2266  display: flex;2267  flex-direction: column;2268  align-items: center;2269  padding: 16px 20px 14px;2270  gap: 8px;2271  text-align: center;2272}22732274.peach-passkey-approval-icon {2275  width: 36px;2276  height: 36px;2277  border-radius: 10px;2278  background: var(--peach-s2);2279  border: 1px solid var(--peach-t3);2280  display: flex;2281  align-items: center;2282  justify-content: center;2283  flex-shrink: 0;2284  color: var(--peach-accent);2285}22862287.peach-passkey-approval-icon img,2288.peach-passkey-approval-icon svg {2289  width: 22px;2290  height: 22px;2291  border-radius: 5px;2292}22932294.peach-passkey-approval-rp {2295  font-family: var(--font-ui);2296  font-size: 0.75rem;2297  color: var(--peach-t2);2298  letter-spacing: 0.03em;2299}23002301.peach-passkey-approval-action {2302  font-family: var(--font-display);2303  font-style: italic;2304  font-weight: 300;2305  font-size: 18px;2306  color: var(--peach-t0);2307  line-height: 1.1;2308  margin: 1px 0;2309}23102311.peach-passkey-approval-user {2312  font-family: var(--font-mono);2313  font-size: 0.6875rem;2314  color: var(--peach-t1);2315  background: var(--peach-s2);2316  border: 1px solid var(--peach-t3);2317  border-radius: 4px;2318  padding: 3px 8px;2319}23202321.peach-passkey-approval-notice {2322  font-size: 0.625rem;2323  color: var(--peach-t2);2324  line-height: 1.5;2325  max-width: 220px;2326}23272328.peach-passkey-approval-actions {2329  display: flex;2330  gap: 8px;2331  width: 100%;2332  margin-top: 6px;2333}23342335.peach-passkey-approval-actions .peach-btn {2336  flex: 1;2337}23382339/* ── Inline generator drawer ── */2340.peach-generator-drawer {2341  display: grid;2342  grid-template-rows: 0fr;2343  transition: grid-template-rows 320ms var(--peach-curve-arrival);2344  overflow: hidden;2345}2346.peach-generator-drawer.is-open {2347  grid-template-rows: 1fr;2348}2349.peach-generator-drawer-inner {2350  min-height: 0;2351  overflow: hidden;2352}2353.peach-generator-drawer-content {2354  border-top: 1px solid var(--peach-t3);2355  padding: 8px 0 4px;2356  display: flex;2357  flex-direction: column;2358  gap: 8px;2359}23602361/* ── Compact generator (inside entry edit) ── */2362.peach-generator-drawer-content--compact {2363  border-top: 1px solid var(--peach-t3);2364  padding: 8px 0 2px;2365  gap: 7px;2366}2367.peach-pwgen-compact-display-row {2368  display: flex;2369  align-items: center;2370  gap: 6px;2371}2372.peach-pwgen-compact-output {2373  flex: 1;2374  min-width: 0;2375  font-family: "IBM Plex Mono", monospace;2376  font-size: 0.6875rem;2377  font-weight: 400;2378  letter-spacing: 0.04em;2379  color: var(--peach-t0);2380  background: rgba(240, 232, 216, 0.04);2381  border: 1px solid var(--peach-t3);2382  border-radius: 5px;2383  padding: 5px 8px;2384  line-height: 1.5;2385  outline: none;2386  transition: border-color 120ms ease;2387}23882389.peach-pwgen-compact-output:focus {2390  border-color: var(--peach-t1);2391}2392.peach-pwgen-compact-controls {2393  display: flex;2394  align-items: center;2395  gap: 6px;2396}2397.peach-pwgen-compact-slider {2398  flex: 1;2399  min-width: 0;2400  height: 2px !important;2401}2402.peach-pwgen-compact-controls .peach-pwgen-len-num {2403  flex-shrink: 0;2404  min-width: 18px;2405  text-align: right;2406}2407.peach-pwgen-compact-pills {2408  display: flex;2409  gap: 3px;2410  flex-shrink: 0;2411}2412.peach-pwgen-compact-pills .peach-pwgen-pill {2413  padding: 2px 7px;2414  font-size: 0.5rem;2415}2416.peach-pwgen-compact-use {2417  flex-shrink: 0;2418  font-size: 0.625rem !important;2419  padding: 3px 9px !important;2420  min-height: 22px !important;2421  border-radius: 5px !important;2422}24232424/* ── Password edit row (input + eye toggle side-by-side) ── */2425.peach-password-edit-row {2426  display: flex;2427  align-items: center;2428  gap: 6px;2429}2430.peach-password-edit-row .peach-inline-input {2431  flex: 1;2432  min-width: 0;2433}24342435/* ── Generate toggle link ── */2436.peach-generate-toggle-link {2437  display: inline-flex;2438  align-items: center;2439  gap: 5px;2440  background: none;2441  border: none;2442  padding: 0;2443  cursor: pointer;2444  font-family: "IBM Plex Mono", monospace;2445  font-size: 0.625rem;2446  color: var(--peach-t2);2447  letter-spacing: 0.04em;2448  transition: color 120ms ease;2449  align-self: flex-start;2450}2451.peach-generate-toggle-link:hover {2452  color: var(--peach-accent);2453}24542455/* Holds the generate + history toggle links on one row under the editor. */2456.peach-password-edit-links {2457  display: flex;2458  align-items: center;2459  gap: 14px;2460  flex-wrap: wrap;2461}24622463/* ── Past-password history list ── */2464.peach-password-history {2465  display: grid;2466  gap: 4px;2467  margin-top: 2px;2468  max-height: 168px;2469  overflow-y: auto;2470  scrollbar-width: thin;2471}2472.peach-history-row {2473  display: flex;2474  align-items: center;2475  justify-content: space-between;2476  gap: 8px;2477  padding: 5px 7px;2478  border-radius: 7px;2479  background: color-mix(in srgb, var(--peach-accent) 5%, transparent);2480  border: 1px solid color-mix(in srgb, var(--peach-accent) 9%, transparent);2481}2482.peach-history-main {2483  display: flex;2484  flex-direction: column;2485  gap: 1px;2486  min-width: 0;2487  flex: 1;2488}2489.peach-history-pw {2490  font-family: "IBM Plex Mono", monospace;2491  font-size: 0.6875rem;2492  color: var(--peach-t1);2493  white-space: nowrap;2494  overflow: hidden;2495  text-overflow: ellipsis;2496}2497.peach-history-pw .peach-password-mask {2498  letter-spacing: 0.08em;2499  color: var(--peach-t2);2500}2501.peach-history-age {2502  font-family: "IBM Plex Mono", monospace;2503  font-size: 0.5625rem;2504  color: var(--peach-t3, var(--peach-t2));2505  letter-spacing: 0.03em;2506}2507.peach-history-actions {2508  display: flex;2509  align-items: center;2510  gap: 2px;2511  flex-shrink: 0;2512}2513.peach-history-use {2514  font-family: "IBM Plex Mono", monospace;2515  font-size: 0.5625rem;2516  letter-spacing: 0.05em;2517  padding: 3px 7px;2518}2519.peach-history-empty {2520  font-family: "IBM Plex Mono", monospace;2521  font-size: 0.625rem;2522  line-height: 1.45;2523  color: var(--peach-t2);2524  padding: 6px 8px;2525  border-radius: 7px;2526  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);2527  border: 1px solid color-mix(in srgb, var(--peach-accent) 8%, transparent);2528}25292530/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2531.peach-entry-body {2532  flex: 1;2533  overflow-y: auto;2534  overflow-x: hidden;2535  scrollbar-width: none;2536  -ms-overflow-style: none;2537  overscroll-behavior: contain;2538  display: grid;2539  gap: 10px;2540  align-content: start;2541  padding: 10px 20px 14px;2542  min-width: 0;2543  min-height: 0;2544}2545.peach-entry-body::-webkit-scrollbar { display: none; }25462547/* Type-toggle pills + inline note toolbar */2548.peach-new-type-row {2549  display: flex;2550  align-items: center;2551  gap: 6px;2552  margin-bottom: 2px;2553}2554.peach-new-type-btn {2555  background: transparent;2556  border: 1px solid var(--peach-t3);2557  border-radius: 12px;2558  padding: 3px 10px;2559  font-family: "IBM Plex Mono", monospace;2560  font-size: 0.5625rem;2561  letter-spacing: 0.12em;2562  text-transform: uppercase;2563  color: var(--peach-t2);2564  cursor: pointer;2565  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2566}2567.peach-new-type-btn.is-active {2568  color: var(--peach-t0);2569  border-color: var(--peach-accent);2570  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2571}2572.peach-new-type-btn:not(.is-active):hover {2573  color: var(--peach-t1);2574  border-color: var(--peach-t2);2575}25762577/* Editable title */2578.peach-new-title-wrap { margin: 0 0 2px; }2579.peach-new-title-input {2580  background: transparent;2581  border: none;2582  outline: none;2583  width: 100%;2584  color: var(--peach-t0);2585  font-family: var(--font-display);2586  font-style: italic;2587  font-weight: 400;2588  font-size: 40px;2589  line-height: 0.95;2590  caret-color: var(--peach-accent);2591}2592.peach-new-title-input::placeholder { color: var(--peach-t2); }25932594/* Editable domain field */2595.peach-domain-edit-row {2596  display: flex;2597  align-items: center;2598  gap: 6px;2599}26002601.peach-domain-edit-row .peach-domain-value--edit {2602  flex: 1;2603  width: 0;2604}26052606.peach-domain-url-btn {2607  flex-shrink: 0;2608  background: transparent;2609  border: none;2610  cursor: pointer;2611  color: var(--peach-t3);2612  padding: 2px 3px;2613  display: flex;2614  align-items: center;2615  line-height: 0;2616  border-radius: 3px;2617  transition: color 120ms ease;2618}26192620.peach-domain-url-btn:hover {2621  color: var(--peach-accent);2622}26232624.peach-domain-value--edit {2625  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2626  font-size: 0.625rem;2627  font-style: italic;2628  letter-spacing: 0.12em;2629  color: var(--peach-t1);2630  background: transparent;2631  border: none;2632  border-bottom: 1px solid var(--peach-t3);2633  outline: none;2634  width: 100%;2635  padding: 2px 0;2636  caret-color: var(--peach-accent);2637  transition: border-color 140ms ease, color 140ms ease;2638}2639.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2640.peach-domain-value--edit:focus {2641  border-bottom-color: rgba(240, 232, 216, 0.28);2642  color: var(--peach-t0);2643}26442645/* Editable field values (username, password, totp) */2646.peach-field-value--edit {2647  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2648  font-size: 0.8125rem;2649  color: var(--peach-t0);2650  background: transparent;2651  border: none;2652  border-bottom: 1px solid var(--peach-t3);2653  outline: none;2654  flex: 1;2655  min-width: 0;2656  padding: 3px 0;2657  caret-color: var(--peach-accent);2658  transition: border-color 140ms ease, color 140ms ease;2659}2660.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2661.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2662.peach-field-value--edit:focus {2663  border-bottom-color: rgba(240, 232, 216, 0.28);2664  color: var(--peach-t0);2665}26662667/* "+ add optional field" links */2668.peach-entry-add-links {2669  display: flex;2670  gap: 12px;2671  flex-wrap: wrap;2672  margin-top: -2px;2673}2674.peach-add-field-link {2675  background: transparent;2676  border: none;2677  padding: 0;2678  cursor: pointer;2679  font-family: "IBM Plex Mono", monospace;2680  font-size: 0.5625rem;2681  letter-spacing: 0.1em;2682  text-transform: uppercase;2683  color: var(--peach-t2);2684  transition: color 140ms ease;2685}2686.peach-add-field-link:hover { color: var(--peach-accent); }26872688/* ── New entry form (legacy classes) ────────────────────────────────── */2689.peach-new-body {2690  flex: 1;2691  overflow-y: auto;2692  padding: 10px 20px 14px;2693}2694.peach-new-name-input {2695  background: transparent;2696  border: none;2697  outline: none;2698  width: 100%;2699  color: var(--peach-t0);2700  font-family: var(--font-display);2701  font-style: italic;2702  font-weight: 400;2703  font-size: 40px;2704  line-height: 0.95;2705  caret-color: var(--peach-accent);2706}2707.peach-new-name-input::placeholder { color: var(--peach-t2); }2708.peach-new-field-input {2709  background: transparent;2710  border: none;2711  outline: none;2712  flex: 1;2713  min-width: 0;2714  caret-color: var(--peach-accent);2715}2716.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }27172718/* ── Canary card ── */2719.peach-canary-card {2720  border: 1px solid rgba(217, 160, 48, 0.2);2721  background: rgba(217, 160, 48, 0.03);2722  border-radius: 8px;2723  padding: 12px;2724}27252726.peach-canary-settings-header {2727  display: flex;2728  align-items: center;2729  justify-content: space-between;2730  cursor: pointer;2731  user-select: none;2732}27332734.peach-canary-card .peach-label {2735  color: rgba(217, 160, 48, 0.85);2736}27372738.peach-canary-card .peach-new-field-input {2739  border-color: rgba(217, 160, 48, 0.25);2740}27412742.peach-canary-card .peach-new-field-input:focus {2743  border-color: rgba(217, 160, 48, 0.5);2744}27452746.peach-canary-body {2747  margin-top: 12px;2748  display: flex;2749  flex-direction: column;2750  gap: 10px;2751}27522753.peach-canary-explainer {2754  display: flex;2755  gap: 10px;2756  padding: 10px 12px;2757  border-radius: 10px;2758  background: rgba(217, 160, 48, 0.06);2759  border: 1px solid rgba(217, 160, 48, 0.22);2760  margin-bottom: 4px;2761}27622763.peach-canary-explainer-icon {2764  font-size: 1rem;2765  flex-shrink: 0;2766  line-height: 1.2;2767}27682769.peach-canary-explainer-title {2770  font-family: var(--font-ui);2771  font-size: 0.6875rem;2772  font-weight: 500;2773  color: rgba(217, 160, 48, 0.9);2774  margin: 0 0 3px;2775}27762777.peach-canary-explainer-copy {2778  font-family: var(--font-ui);2779  font-size: 0.625rem;2780  color: var(--peach-t2);2781  line-height: 1.55;2782  margin: 0;2783}27842785.peach-canary-hint {2786  font-size: 0.625rem;2787  color: var(--peach-t2);2788  font-family: Inter, system-ui, sans-serif;2789  line-height: 1.5;2790  margin-top: 4px;2791}27922793.peach-canary-actions-row {2794  display: flex;2795  align-items: center;2796  gap: 8px;2797}27982799.peach-canary-test-btn {2800  border-color: rgba(217, 160, 48, 0.3);2801  color: rgba(217, 160, 48, 0.85);2802}28032804.peach-canary-test-result {2805  font-size: 0.625rem;2806  font-family: Inter, system-ui, sans-serif;2807}28082809.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2810.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }28112812.peach-canary-badge {2813  display: flex;2814  position: relative;2815  z-index: 1;2816  align-items: center;2817  gap: 5px;2818  padding: 4px 10px;2819  background: rgba(217, 160, 48, 0.12);2820  border: 1px solid rgba(217, 160, 48, 0.35);2821  border-radius: 6px;2822  margin-bottom: 6px;2823  width: fit-content;2824}28252826.peach-canary-badge-label {2827  font-size: 0.625rem;2828  letter-spacing: 0.06em;2829  color: rgba(217, 160, 48, 0.9);2830  font-family: var(--font-ui);2831  text-transform: uppercase;2832}28332834.peach-canary-badge-icon {2835  font-size: 0.6875rem;2836}28372838.peach-canary-suppress-row {2839  display: flex;2840  align-items: center;2841  gap: 8px;2842  padding: 6px 10px;2843  background: rgba(217, 160, 48, 0.08);2844  border-radius: 6px;2845  margin-bottom: 8px;2846}28472848.peach-canary-suppress-label {2849  font-size: 0.6875rem;2850  color: rgba(217, 160, 48, 0.85);2851  cursor: pointer;2852  font-family: var(--font-ui);2853  letter-spacing: 0.04em;2854}28552856.peach-regen-panel {2857  position: relative;2858  z-index: 1;2859  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2860  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2861  border-radius: 8px;2862  padding: 12px;2863  margin-bottom: 8px;2864}28652866.peach-regen-panel-header {2867  display: flex;2868  align-items: center;2869  justify-content: space-between;2870  margin-bottom: 10px;2871}28722873.peach-regen-panel-title {2874  font-size: 0.6875rem;2875  font-weight: 600;2876  letter-spacing: 0.06em;2877  text-transform: uppercase;2878  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2879}28802881.peach-regen-output {2882  background: rgba(0, 0, 0, 0.2);2883  border-radius: 6px;2884  padding: 10px;2885  margin-bottom: 10px;2886  font-family: var(--font-mono);2887  font-size: 0.8125rem;2888  word-break: break-all;2889  color: var(--peach-t1);2890}28912892.peach-regen-actions {2893  display: flex;2894  gap: 6px;2895}28962897.peach-regen-actions--spaced {2898  margin-bottom: 8px;2899}29002901.peach-regen-action-grow {2902  flex: 1;2903}29042905.peach-regen-copy-btn {2906  padding: 0 8px;2907}29082909.peach-regen-success {2910  position: relative;2911  z-index: 1;2912  background: rgba(40, 180, 80, 0.1);2913  border: 1px solid rgba(40, 180, 80, 0.3);2914  border-radius: 8px;2915  padding: 10px 12px;2916  margin-bottom: 8px;2917  display: flex;2918  align-items: center;2919  gap: 8px;2920  font-size: 0.6875rem;2921  color: rgba(40, 180, 80, 0.9);2922}29232924/* ── Note editor overlay ── */2925.peach-note-editor {2926  position: absolute;2927  inset: 0;2928  z-index: 200;2929  display: flex;2930  flex-direction: column;2931  background:2932    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2933    var(--peach-bg);2934  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2935}29362937.peach-note-editor-header {2938  display: flex;2939  align-items: center;2940  gap: 10px;2941  padding: 14px 16px 10px;2942  border-bottom: 1px solid var(--peach-t3);2943  flex-shrink: 0;2944}29452946.peach-note-editor-back {2947  background: transparent;2948  border: none;2949  cursor: pointer;2950  color: var(--peach-t2);2951  padding: 4px 6px;2952  border-radius: 6px;2953  display: flex;2954  align-items: center;2955  transition: color 120ms ease, background 120ms ease;2956  flex-shrink: 0;2957}2958.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }29592960.peach-note-editor-label {2961  flex: 1;2962  font-family: var(--font-display);2963  font-style: italic;2964  font-size: 0.9375rem;2965  color: var(--peach-t1);2966  letter-spacing: 0.02em;2967}29682969.peach-note-editor-save-btn {2970  background: transparent;2971  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2972  border-radius: 8px;2973  color: var(--peach-accent);2974  font-family: "IBM Plex Mono", monospace;2975  font-size: 0.625rem;2976  letter-spacing: 0.06em;2977  text-transform: uppercase;2978  padding: 3px 10px;2979  cursor: pointer;2980  transition: background 120ms ease, border-color 120ms ease;2981}2982.peach-note-editor-save-btn:hover:not(:disabled) {2983  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2984  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2985}2986.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }29872988.peach-note-toolbar {2989  display: flex;2990  align-items: center;2991  gap: 3px;2992  padding: 6px 14px 5px;2993  border-bottom: 1px solid var(--peach-t3);2994  flex-shrink: 0;2995}29962997.peach-note-tool-btn {2998  background: transparent;2999  border: 1px solid transparent;3000  border-radius: 5px;3001  color: var(--peach-t2);3002  font-family: "IBM Plex Mono", monospace;3003  font-size: 0.625rem;3004  letter-spacing: 0.04em;3005  padding: 2px 8px;3006  cursor: pointer;3007  line-height: 1.6;3008  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;3009}3010.peach-note-tool-btn:hover {3011  background: var(--peach-t4);3012  color: var(--peach-t0);3013  border-color: var(--peach-t3);3014}30153016.peach-note-tool-icon {3017  padding: 3px 7px;3018  display: inline-flex;3019  align-items: center;3020  justify-content: center;3021}30223023.peach-note-tool-divider {3024  width: 1px;3025  height: 14px;3026  background: var(--peach-t3);3027  margin: 0 4px;3028  flex-shrink: 0;3029}30303031.peach-note-editor-body {3032  flex: 1;3033  overflow-y: auto;3034  padding: 16px 20px 20px;3035  outline: none;3036  font-family: var(--font-display);3037  font-size: 1rem;3038  line-height: 1.75;3039  color: var(--peach-t0);3040  scrollbar-width: none;3041  word-break: break-word;3042}3043.peach-note-editor-body:empty::before {3044  content: "write your note…";3045  color: var(--peach-t3);3046  font-style: italic;3047  pointer-events: none;3048}30493050/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */3051.peach-note-editor-inline {3052  display: flex;3053  flex-direction: column;3054  flex: 1;3055  min-height: 0;3056}3057.peach-note-editor-body--inline {3058  flex: 1;3059  min-height: 0;3060  font-size: 0.9375rem;3061  padding: 10px 20px 14px;3062}30633064/* Full-width toolbar row inside the body (Add.tsx note type).3065   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */3066.peach-note-toolbar-body {3067  display: flex;3068  align-items: center;3069  gap: 3px;3070  padding: 5px 20px 4px;3071  margin: 2px -20px 0;3072  border-bottom: 1px solid var(--peach-t3);3073  flex-shrink: 0;3074}30753076/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)3077   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn3078   and .peach-note-tool-divider button-level styles. */3079.peach-note-toolbar-inline {3080  display: flex;3081  align-items: center;3082  gap: 3px;3083  margin-left: auto;3084  padding-left: 10px;3085  border-left: 1px solid var(--peach-t3);3086  min-height: 22px;3087}30883089/* Entry.tsx toolbar row (no tabs, toolbar only) */3090.peach-entry-note-toolbar-row {3091  display: flex;3092  align-items: center;3093  margin: 4px 0 6px;3094  position: relative;3095  z-index: 1;3096}3097.peach-entry-note-toolbar-row .peach-note-toolbar-inline {3098  border-left: none;3099  padding-left: 0;3100  margin-left: 0;3101}31023103/* Note body — fills available vertical space in Add.tsx and Entry.tsx */3104.peach-note-body {3105  display: flex;3106  flex-direction: column;3107  flex: 1;3108  min-height: 0;3109  margin: 4px 0 0;3110}3111.peach-entry-body--new .peach-note-body {3112  margin: 8px -20px 0;3113}31143115/* Add.tsx body is a grid by default; swap to a flex column when a note is3116   active so the note body can stretch and pin the tags row to the bottom. */3117.peach-entry-body--new:has(.peach-note-body) {3118  display: flex;3119  flex-direction: column;3120}31213122/* Rich content element styles (editor + display) */3123.peach-note-editor-body h2,3124.peach-note-content h2 {3125  font-family: var(--font-display);3126  font-size: 20px;3127  font-weight: 600;3128  font-style: italic;3129  color: var(--peach-t0);3130  margin: 6px 0 2px;3131  line-height: 1.3;3132}3133.peach-note-editor-body ul,3134.peach-note-content ul {3135  padding-left: 18px;3136  margin: 3px 0;3137  list-style: disc;3138}3139.peach-note-editor-body ol,3140.peach-note-content ol {3141  padding-left: 18px;3142  margin: 3px 0;3143  list-style: decimal;3144}3145.peach-note-editor-body li,3146.peach-note-content li { margin: 2px 0; }3147.peach-note-editor-body hr,3148.peach-note-content hr {3149  border: none;3150  border-top: 1px solid var(--peach-t3);3151  margin: 10px 0;3152}31533154/* font size elements from execCommand */3155.peach-note-editor-body font[size="1"],3156.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }3157.peach-note-editor-body font[size="2"],3158.peach-note-content font[size="2"] { font-size: 0.8125rem; }3159.peach-note-editor-body font[size="3"],3160.peach-note-content font[size="3"] { font-size: 1rem; }3161.peach-note-editor-body font[size="4"],3162.peach-note-content font[size="4"] { font-size: 20px; }3163.peach-note-editor-body font[size="5"],3164.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }31653166/* bold / italic inside the editor and note display */3167.peach-note-editor-body b, .peach-note-editor-body strong,3168.peach-note-content b, .peach-note-content strong { font-weight: 700; }3169.peach-note-editor-body em, .peach-note-editor-body i,3170.peach-note-content em, .peach-note-content i { font-style: italic; }31713172/* note display — rendered HTML, no pre-wrap */3173.peach-note-content {3174  overflow: auto;3175  max-height: 340px;3176  word-break: break-word;3177}31783179/* ── Note textarea ── */3180.peach-note-textarea {3181  width: 100%;3182  min-height: 180px;3183  max-height: 280px;3184  resize: vertical;3185  background: var(--peach-t4);3186  border: 1px solid var(--peach-t3);3187  border-radius: 8px;3188  padding: 10px 12px;3189  font-family: "IBM Plex Mono", monospace;3190  font-size: 0.75rem;3191  line-height: 1.7;3192  color: var(--peach-t1);3193  outline: none;3194  transition: border-color 150ms ease;3195}31963197.peach-note-textarea:focus {3198  border-color: var(--peach-t2);3199}32003201.peach-note-char-count {3202  font-family: "IBM Plex Mono", monospace;3203  font-size: 0.5625rem;3204  color: var(--peach-t3);3205  text-align: right;3206  margin-top: 4px;3207  letter-spacing: 0.1em;3208}32093210/* ── Field input baseline ── */3211.peach-new-field-input {3212  width: 100%;3213  background: transparent;3214  border: none;3215  border-bottom: 1px solid var(--peach-t3);3216  padding: 4px 0;3217  color: var(--peach-t1);3218  font-family: "IBM Plex Mono", monospace;3219  font-size: 0.8125rem;3220  outline: none;3221  transition: border-color 150ms ease;3222}32233224.peach-new-field-input:focus {3225  border-bottom-color: var(--peach-t0);3226  color: var(--peach-t0);3227}32283229.peach-new-name-input {3230  width: 100%;3231  background: transparent;3232  border: none;3233  border-bottom: 1px solid var(--peach-t3);3234  padding: 6px 0;3235  font-family: var(--font-display);3236  font-style: italic;3237  font-size: 28px;3238  color: var(--peach-t0);3239  outline: none;3240  transition: border-color 150ms ease;3241}32423243.peach-new-name-input:focus {3244  border-bottom-color: var(--peach-t1);3245}32463247.peach-new-name-input::placeholder {3248  color: var(--peach-t2);3249  font-style: italic;3250}32513252.peach-new-field-input::placeholder {3253  color: var(--peach-t3);3254}32553256/* ── Demo entrance animation ── */3257#hd-shell {3258  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3259}3260@keyframes hd-shell-enter {3261  from { opacity: 0; transform: scale(0.96) translateY(16px); }3262  to   { opacity: 1; transform: scale(1) translateY(0); }3263}32643265/* ── Keyframes ── */3266@keyframes peach-char-enter {3267  from { opacity: 0; transform: translateY(0.22em); }3268  to   { opacity: 1; transform: translateY(0); }3269}3270@keyframes peach-content-enter {3271  from { opacity: 0.96; transform: translateY(4px); }3272  to   { opacity: 1; transform: translateY(0); }3273}3274@keyframes peach-content-exit {3275  from { opacity: 1; transform: translateY(0); }3276  to   { opacity: 0.92; transform: translateY(-3px); }3277}3278@keyframes peach-screen-enter {3279  from { opacity: 0; transform: translateY(14px); }3280  to   { opacity: 1; transform: translateY(0); }3281}3282@keyframes peach-shell-fade-in {3283  from { opacity: 0; }3284  to   { opacity: 1; }3285}3286@keyframes peach-veil-in {3287  from { opacity: 0; }3288  to   { opacity: 1; }3289}3290@keyframes peach-lock-settle {3291  0%   { transform: scale(0.9); }3292  65%  { transform: scale(1.08); }3293  100% { transform: scale(1); }3294}3295@keyframes peach-copy-confirm {3296  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3297  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); }3298}3299@keyframes peach-copy-retreat {3300  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); }3301  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3302}3303@keyframes peach-copy-flood {3304  from { opacity: 0; transform: scaleX(0.15); }3305  to   { opacity: 1; transform: scaleX(1); }3306}3307@keyframes peach-copy-icon-settle {3308  from  { transform: scale(0.84); }3309  70%   { transform: scale(1.08); }3310  to    { transform: scale(1); }3311}3312@keyframes peach-copy-sheen-retreat {3313  from { opacity: 1; transform: scaleX(1); }3314  to   { opacity: 0; transform: scaleX(0.15); }3315}3316@keyframes peach-copy-drain {3317  from { width: 100%; }3318  to   { width: 0; }3319}3320@keyframes peach-shake {3321  0%, 100% { transform: translateX(0); }3322  20%      { transform: translateX(-6px); }3323  40%      { transform: translateX(6px); }3324  60%      { transform: translateX(-4px); }3325  80%      { transform: translateX(4px); }3326}33273328@keyframes pip-pulse {3329  0% { transform: scale(1); }3330  40% { transform: scale(2.2); }3331  100% { transform: scale(1); }3332}333333343335/* ── Password generator ── */3336.peach-pwgen-body {3337  flex: 1; overflow-y: auto;3338  display: flex; flex-direction: column;3339}3340.peach-policy-badge {3341  display: flex; align-items: center;3342  padding: 6px 20px 0;3343  font-size: 0.625rem; font-family: Inter, sans-serif;3344  color: var(--peach-t2); letter-spacing: 0.04em;3345}3346.peach-pwgen-display {3347  padding: 14px 20px 12px;3348  border-bottom: 1px solid var(--peach-t3);3349  display: flex; align-items: flex-start; gap: 10px;3350}3351.peach-pwgen-display-row {3352  display: flex;3353  align-items: flex-start;3354  gap: 8px;3355  padding-bottom: 8px;3356  border-bottom: 1px solid var(--peach-t3);3357}3358.peach-pwgen-output {3359  flex: 1; min-width: 0; margin: 0;3360  font-family: "IBM Plex Mono", monospace;3361  font-size: 0.8125rem; color: var(--peach-t0);3362  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3363  white-space: normal;3364  padding: 10px 12px;3365  background: var(--peach-t4);3366  border-radius: 6px;3367  min-height: 36px;3368}3369.peach-pwgen-output-display {3370  flex: 1;3371  min-width: 0;3372  margin: 0;3373  font-family: var(--font-display);3374  font-style: italic;3375  font-weight: 300;3376  font-size: 32px;3377  line-height: 1.05;3378  color: var(--peach-t0);3379  word-break: break-all;3380  overflow-wrap: break-word;3381  white-space: normal;3382  letter-spacing: 0.02em;3383}3384.peach-pwgen-display-actions {3385  display: flex;3386  flex-direction: column;3387  gap: 4px;3388  flex-shrink: 0;3389  margin-top: 2px;3390}3391.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3392.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3393.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3394.peach-pwgen-len-num {3395  font-family: "IBM Plex Mono", monospace;3396  font-size: 0.75rem; color: var(--peach-accent);3397}3398.peach-pwgen-len-num--edit {3399  cursor: text;3400  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3401}3402.peach-pwgen-len-input {3403  font-family: "IBM Plex Mono", monospace;3404  font-size: 0.75rem;3405  color: var(--peach-accent);3406  background: transparent;3407  border: none;3408  border-bottom: 1px solid var(--peach-accent);3409  outline: none;3410  width: 32px;3411  text-align: right;3412  padding: 0;3413}3414.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3415.peach-pwgen-toggles { display: flex; flex-direction: column; }3416.peach-pwgen-charset-pills {3417  display: flex;3418  gap: 6px;3419  flex-wrap: wrap;3420}3421.peach-pwgen-pill {3422  padding: 4px 11px;3423  border-radius: 999px;3424  border: 1px solid var(--peach-t3);3425  background: transparent;3426  color: var(--peach-t2);3427  font-family: "IBM Plex Mono", monospace;3428  font-size: 0.5625rem;3429  letter-spacing: 0.08em;3430  cursor: pointer;3431  transition: all 150ms ease;3432}3433.peach-pwgen-pill.is-on {3434  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3435  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3436  color: var(--peach-accent);3437}3438.peach-pwgen-pill:not(.is-on):hover {3439  color: var(--peach-t1);3440  border-color: var(--peach-t2);3441}3442.peach-pwgen-use-btn {3443  width: 100%;3444  min-height: 34px;3445  border-radius: 8px;3446  margin-top: 2px;3447}3448.peach-generator-constraint-note {3449  font-family: 'IBM Plex Mono', monospace;3450  font-size: 10px;3451  color: var(--peach-t3);3452  letter-spacing: 0.04em;3453  margin: 0;3454  transition: opacity 200ms ease;3455}3456.peach-pwgen-toggle-row {3457  display: flex; align-items: center; justify-content: space-between;3458  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3459}3460.peach-pwgen-toggle-row:last-child { border-bottom: none; }3461.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }34623463/* Peach popup should not expose native scrollbars on internal panels. */3464.peach-settings-body,3465.peach-new-body,3466.peach-pwgen-body,3467.lock-screen,3468.peach-import-preview {3469  scrollbar-width: none;3470  -ms-overflow-style: none;3471  overscroll-behavior: contain;3472}3473.peach-settings-body::-webkit-scrollbar,3474.peach-new-body::-webkit-scrollbar,3475.peach-pwgen-body::-webkit-scrollbar,3476.lock-screen::-webkit-scrollbar,3477.peach-import-preview::-webkit-scrollbar {3478  width: 0;3479  height: 0;3480  display: none;3481}34823483.lock-screen {3484  height: 100%;3485  min-height: 100%;3486  overflow-y: auto;3487  padding: 18px 18px 16px;3488  gap: 14px;3489  grid-template-rows: auto auto auto 1fr auto;3490  align-content: stretch;3491  position: relative;3492  isolation: isolate;3493}3494.peach-screen.lock-screen--vault-stage {3495  display: flex;3496  flex-direction: column;3497  justify-content: flex-start;3498  gap: 18px;3499  padding: 20px 18px 18px;3500  overflow: hidden;3501}3502.peach-screen.lock-screen--vault-stage .peach-lock-panel {3503  margin-top: 0;3504}3505.lock-screen--onboarding {3506  display: flex;3507  flex-direction: column;3508  gap: 12px;3509  justify-content: flex-start;3510}35113512.lock-screen::before {3513  content: "";3514  position: absolute;3515  inset: 12px 18px auto auto;3516  width: 160px;3517  height: 160px;3518  border-radius: 999px;3519  background:3520    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%);3521  filter: blur(6px);3522  opacity: 0.7;3523  pointer-events: none;3524  z-index: 0;3525}35263527.peach-lock-rune-string {3528  flex: 1;3529  display: flex;3530  align-items: center;3531  justify-content: center;3532  gap: 6px;3533  font-family: PeachScript, monospace;3534  font-size: 0.8125rem;3535  letter-spacing: 0.05em;3536  pointer-events: none;3537  user-select: none;3538  position: relative;3539  z-index: 1;3540}35413542.peach-lock-rune-string span {3543  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3544  text-shadow:3545    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3546    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3547  transition: color 0.9s ease, text-shadow 0.9s ease;3548}35493550.peach-lock-rune-string span.is-glowing {3551  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3552  text-shadow:3553    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3554    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3555}35563557.lock-screen-header {3558  display: flex;3559  align-items: center;3560  justify-content: space-between;3561  position: relative;3562  z-index: 1;3563}35643565.lock-password-input.shake {3566  animation: peach-shake 300ms ease-in-out;3567}35683569.peach-hint-error {3570  color: rgba(220, 80, 60, 0.92);3571}35723573.peach-onboarding-headline {3574  margin: 0;3575  font-family: var(--font-display);3576  font-size: 35px;3577  line-height: 0.88;3578  font-style: italic;3579  font-weight: 400;3580  max-width: 252px;3581}35823583.peach-lock-copy {3584  display: grid;3585  gap: 8px;3586  position: relative;3587  z-index: 1;3588}35893590.peach-lock-copy--onboarding {3591  gap: 10px;3592}35933594.peach-lock-hero {3595  position: relative;3596  z-index: 1;3597  display: grid;3598  gap: 8px;3599  min-height: 0;3600  padding: 4px 2px 0;3601  border: none;3602  border-radius: 0;3603  background: transparent;3604  box-shadow: none;3605}3606.peach-lock-hero-art {3607  position: absolute;3608  right: -8px;3609  top: -6px;3610  width: 120px;3611  height: 120px;3612  display: flex;3613  align-items: center;3614  justify-content: center;3615  pointer-events: none;3616  opacity: 0.12;3617  filter: saturate(0.9);3618}3619.peach-lock-hero-mark {3620  width: 100%;3621  height: 100%;3622}3623/* Peach body stays brand-peach across every accent — we don't want a3624   green or blue peach when sage/sky is selected. Leaf + vein keep the3625   sage tint because a real peach has a sage leaf. In the new brand-kit3626   mark the leaf is path 1 and the vein stroke is path 2; the body and3627   back-lobe (paths 3 + 4) must stay untouched. */3628.peach-lock-hero-mark path:nth-child(1) {3629  fill: rgba(123, 144, 96, 0.88);3630}3631.peach-lock-hero-mark path:nth-child(2) {3632  stroke: rgba(94, 122, 66, 0.95);3633}3634.peach-lock-hero > *:not(.peach-lock-hero-art) {3635  position: relative;3636  z-index: 1;3637}36383639.peach-lock-eyebrow {3640  display: inline-flex;3641  align-items: center;3642  width: fit-content;3643  padding: 4px 9px;3644  border-radius: 999px;3645  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3646  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3647  color: var(--peach-t0);3648  font-family: "IBM Plex Mono", monospace;3649  font-size: 0.5rem;3650  letter-spacing: 0.18em;3651  text-transform: uppercase;3652}36533654.peach-lock-label-row {3655  display: flex;3656  align-items: center;3657  justify-content: space-between;3658  margin-bottom: 0;3659}36603661.peach-lock-reveal-btn {3662  display: inline-flex;3663  align-items: center;3664  gap: 4px;3665  background: none;3666  border: none;3667  cursor: pointer;3668  font-family: "IBM Plex Mono", monospace;3669  font-size: 0.5625rem;3670  letter-spacing: 0.06em;3671  color: var(--peach-t2);3672  padding: 2px 0;3673  transition: color 150ms ease;3674}36753676.peach-lock-reveal-btn:hover {3677  color: var(--peach-t1);3678}36793680.peach-lock-warning {3681  color: rgba(220, 80, 60, 0.85) !important;3682  line-height: 1.5;3683}36843685.peach-onboarding-cards {3686  display: grid;3687  gap: 8px;3688  position: relative;3689  z-index: 1;3690}36913692.peach-lock-panel {3693  position: relative;3694  z-index: 1;3695  display: grid;3696  gap: 9px;3697  padding: 14px 16px 15px;3698  border-radius: 18px;3699  border: 1px solid var(--peach-t3);3700  background:3701    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3702  box-shadow:3703    inset 0 1px 0 rgba(240, 232, 216, 0.04),3704    0 12px 28px rgba(0, 0, 0, 0.12);3705}37063707/* Glass surface — lock panel and settings groups */3708.peach-glass {3709  background: rgba(26, 20, 16, 0.65);3710  border: 1px solid rgba(255, 255, 255, 0.08);3711  border-radius: 12px;3712  backdrop-filter: blur(12px) saturate(1.4);3713  -webkit-backdrop-filter: blur(12px) saturate(1.4);3714}37153716@supports not (backdrop-filter: blur(1px)) {3717  .peach-glass {3718    background: rgba(26, 20, 16, 0.92);3719    border: 1px solid rgba(255, 255, 255, 0.10);3720    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3721  }3722}37233724.light .peach-glass,3725[data-theme="light"] .peach-glass {3726  background: rgba(240, 233, 223, 0.72);3727  border: 1px solid rgba(26, 18, 8, 0.08);3728  backdrop-filter: blur(12px) saturate(1.2);3729  -webkit-backdrop-filter: blur(12px) saturate(1.2);3730}37313732@supports not (backdrop-filter: blur(1px)) {3733  .light .peach-glass,3734  [data-theme="light"] .peach-glass {3735    background: rgba(240, 233, 223, 0.97);3736    border: 1px solid rgba(26, 18, 8, 0.10);3737  }3738}37393740/* Lock panel keeps its own border-radius over the generic glass token */3741.peach-lock-panel.peach-glass {3742  border-radius: 18px;3743  background: rgba(26, 20, 16, 0.65);3744  border: 1px solid rgba(255, 255, 255, 0.08);3745  box-shadow:3746    inset 0 1px 0 rgba(255, 255, 255, 0.05),3747    0 12px 28px rgba(0, 0, 0, 0.3);3748}37493750.light .peach-lock-panel.peach-glass,3751[data-theme="light"] .peach-lock-panel.peach-glass {3752  background: rgba(240, 233, 223, 0.82);3753  border: 1px solid rgba(26, 18, 8, 0.08);3754  box-shadow:3755    inset 0 1px 0 rgba(255, 255, 255, 0.4),3756    0 8px 24px rgba(80, 56, 32, 0.15);3757}37583759@supports not (backdrop-filter: blur(1px)) {3760  .peach-lock-panel.peach-glass {3761    background: rgba(26, 20, 16, 0.92);3762    box-shadow:3763      inset 0 1px 0 rgba(255, 255, 255, 0.05),3764      0 12px 28px rgba(0, 0, 0, 0.4);3765  }3766  .light .peach-lock-panel.peach-glass,3767  [data-theme="light"] .peach-lock-panel.peach-glass {3768    background: rgba(240, 233, 223, 0.98);3769  }3770}37713772.peach-lock-panel--secondary {3773  gap: 12px;3774}37753776.peach-lock-panel-header {3777  display: flex;3778  align-items: baseline;3779  justify-content: space-between;3780  gap: 12px;3781}37823783.peach-lock-option-grid {3784  display: grid;3785  gap: 10px;3786}37873788.peach-lock-option {3789  width: 100%;3790  display: grid;3791  gap: 6px;3792  padding: 14px 15px;3793  border-radius: 16px;3794  border: 1px solid rgba(240, 232, 216, 0.08);3795  background: rgba(240, 232, 216, 0.02);3796  color: var(--peach-t0);3797  text-align: left;3798  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3799}38003801.peach-lock-option:hover {3802  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3803  background: rgba(240, 232, 216, 0.04);3804  transform: translateY(-1px);3805}38063807.peach-lock-option-title {3808  font-size: 0.75rem;3809  color: var(--peach-t0);3810}38113812.peach-lock-option-copy {3813  font-size: 0.6875rem;3814  line-height: 1.55;3815  color: var(--peach-t1);3816}38173818.peach-onboarding-stack {3819  margin-top: 2px;3820}3821.peach-lock-panel-footer {3822  display: grid;3823  gap: 6px;3824  margin-top: 2px;3825  padding-top: 10px;3826  border-top: 1px solid rgba(240, 232, 216, 0.06);3827}38283829/* ── Restore tab view ─────────────────────────────────────────────────────3830   Tab-based restore screen replacing the old three-card picker. */38313832.peach-restore-tabview {3833  overflow: hidden;3834}38353836.peach-restore-tabcard {3837  flex: 1;3838  display: flex;3839  flex-direction: column;3840  gap: 0;3841  padding: 0;3842  overflow: hidden;3843  cursor: default;3844  user-select: none;3845  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3846}38473848/* ── Tab selector ─────────────────────────────────────────────────────── */38493850.peach-restore-tabs {3851  display: flex;3852  justify-content: space-around;3853  padding: 14px 10px 10px;3854  border-bottom: 1px solid var(--peach-t3);3855  gap: 2px;3856  overflow: hidden;3857  scrollbar-width: none;3858}3859.peach-restore-tabs::-webkit-scrollbar { display: none; }38603861.peach-restore-tab {3862  background: none;3863  border: none;3864  cursor: pointer;3865  padding: 3px 2px;3866  font-family: 'Cormorant Garamond', Georgia, serif;3867  font-style: italic;3868  font-size: 11px;3869  color: var(--peach-t2);3870  transition: color 150ms ease, text-shadow 150ms ease;3871  flex: 1;3872  min-width: 0;3873  text-align: center;3874  white-space: nowrap;3875  overflow: hidden;3876  text-overflow: ellipsis;3877}3878.peach-restore-tab:hover {3879  color: var(--peach-accent);3880  text-shadow:3881    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3882    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3883}3884.peach-restore-tab.is-active {3885  color: var(--peach-accent);3886  text-shadow:3887    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3888    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3889}38903891/* ── Content area ─────────────────────────────────────────────────────── */38923893.peach-restore-content {3894  padding: 16px 16px 14px;3895  display: flex;3896  flex-direction: column;3897  gap: 8px;3898  overflow: hidden;3899  scrollbar-width: none;3900  flex: 1;3901}3902.peach-restore-content::-webkit-scrollbar { display: none; }3903.peach-restore-content > * {3904  overflow: hidden;3905  scrollbar-width: none;3906}3907.peach-restore-content > *::-webkit-scrollbar { display: none; }39083909/* ── Shared tab inner layout ──────────────────────────────────────────── */39103911.peach-rt-symbols,3912.peach-rt-csv,3913.peach-rt-phone,3914.peach-restore-codex {3915  display: flex;3916  flex-direction: column;3917  gap: 8px;3918  overflow: hidden;3919}39203921.peach-restore-codex {3922  min-height: 0;3923  justify-content: center;3924}39253926.peach-restore-codex-title {3927  margin: 0;3928  font-family: var(--font-display);3929  font-size: 1rem;3930  font-style: italic;3931  color: var(--peach-t0);3932}39333934.peach-restore-codex-copy {3935  margin: 0;3936  font-size: 0.75rem;3937  line-height: 1.5;3938  color: var(--peach-t1);3939}39403941.peach-restore-codex-button {3942  width: 100%;3943  justify-content: center;3944}39453946.peach-rt-submit {3947  width: 100%;3948}39493950.peach-rt-error {3951  margin: 0;3952  font-size: 0.6875rem;3953  color: var(--peach-breach);3954  line-height: 1.4;3955}39563957/* ── PeachScript tab ──────────────────────────────────────────────────── */39583959.peach-restore-symbols-textarea {3960  font-family: 'PeachScript', monospace;3961  font-size: 13px;3962  line-height: 1.9;3963  letter-spacing: 0.1em;3964  word-break: break-all;3965  resize: none;3966  width: 100%;3967  min-height: 56px;3968  max-height: 72px;3969  overflow: hidden;3970  scrollbar-width: none;3971  -ms-overflow-style: none;3972  box-sizing: border-box;3973  padding: 6px 8px;3974  border-radius: 8px;3975  border: 1px solid var(--peach-t3);3976  background: rgba(240, 232, 216, 0.03);3977  color: var(--peach-t0);3978}3979.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3980.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }39813982.peach-restore-symbols-pass {3983  width: 100%;3984  box-sizing: border-box;3985  padding: 7px 10px;3986  border-radius: 8px;3987  border: 1px solid var(--peach-t3);3988  background: rgba(240, 232, 216, 0.03);3989  color: var(--peach-t0);3990  font-size: 0.8125rem;3991}3992.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }3993.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }39943995.peach-rt-divider {3996  text-align: center;3997  font-size: 0.6875rem;3998  color: var(--peach-t2);3999  font-style: italic;4000}40014002.peach-rt-file-label {4003  width: 100%;4004  justify-content: center;4005}40064007.peach-rt-anim-canvas {4008  width: 100%;4009  height: 180px;4010  border-radius: 10px;4011  overflow: hidden;4012  display: block;4013}40144015/* ── CSV tab ──────────────────────────────────────────────────────────── */40164017.peach-rt-csv-sources {4018  margin: 0;4019  font-size: 0.6875rem;4020  color: var(--peach-t2);4021  line-height: 1.5;4022  text-align: center;4023}40244025.peach-rt-csv-warning {4026  margin: 0;4027  font-family: "IBM Plex Mono", monospace;4028  font-size: 0.5625rem;4029  letter-spacing: 0.12em;4030  color: var(--peach-breach);4031  text-align: center;4032}40334034/* ── From Phone tab ───────────────────────────────────────────────────── */40354036.peach-rt-phone-code {4037  margin: 0;4038  text-align: center;4039  font-family: "IBM Plex Mono", monospace;4040  font-size: 22px;4041  letter-spacing: 0.18em;4042  color: var(--peach-t0);4043}40444045.peach-rt-phone-qr {4046  display: block;4047  width: 96px;4048  height: 96px;4049  margin: 0 auto;4050  border-radius: 6px;4051  image-rendering: pixelated;4052  overflow: hidden;4053}40544055.peach-rt-phone-hint {4056  margin: 0;4057  font-size: 0.6875rem;4058  color: var(--peach-t2);4059  line-height: 1.55;4060  text-align: center;4061}40624063/* ── Intro popup ──────────────────────────────────────────────────────── */40644065.peach-restore-intro-overlay {4066  position: absolute;4067  inset: 0;4068  z-index: 100;4069  display: flex;4070  align-items: center;4071  justify-content: center;4072  padding: 20px;4073  background: rgba(12, 10, 6, 0.7);4074  backdrop-filter: blur(4px);4075  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4076}40774078.peach-restore-intro-card {4079  width: 100%;4080  display: flex;4081  flex-direction: column;4082  gap: 12px;4083  padding: 22px 20px 20px;4084  border-radius: 16px;4085  border: 1px solid var(--peach-t3);4086  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));4087  backdrop-filter: blur(4px);4088  -webkit-backdrop-filter: blur(4px);4089  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);4090}40914092.peach-restore-intro-headline {4093  margin: 0;4094  font-family: var(--font-display);4095  font-style: italic;4096  font-size: 20px;4097  font-weight: 400;4098  color: var(--peach-t0);4099}41004101.peach-restore-intro-body {4102  display: flex;4103  flex-direction: column;4104  gap: 8px;4105}4106.peach-restore-intro-body p {4107  margin: 0;4108  font-size: 0.75rem;4109  color: var(--peach-t1);4110  line-height: 1.5;4111}41124113.peach-restore-intro-btn {4114  width: 100%;4115  margin-top: 4px;4116}41174118/* Snapshot restore panel */4119.peach-snapshot-panel {4120  gap: 10px;4121  overflow-y: auto;4122  max-height: 340px;4123}4124.peach-snapshot-list {4125  display: flex;4126  flex-direction: column;4127  gap: 4px;4128}4129.peach-snapshot-row {4130  display: flex;4131  align-items: center;4132  justify-content: space-between;4133  width: 100%;4134  padding: 8px 10px;4135  border-radius: 8px;4136  border: 1px solid rgba(240, 232, 216, 0.07);4137  background: transparent;4138  cursor: pointer;4139  transition: border-color 120ms, background 120ms;4140  text-align: left;4141  gap: 8px;4142}4143.peach-snapshot-row:hover {4144  border-color: rgba(240, 232, 216, 0.14);4145  background: rgba(240, 232, 216, 0.03);4146}4147.peach-snapshot-row.is-selected {4148  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4149  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);4150}4151.peach-snapshot-time {4152  font-size: 11.5px;4153  color: var(--peach-t0);4154  flex: 1;4155}4156.peach-snapshot-count {4157  font-family: "IBM Plex Mono", monospace;4158  font-size: 0.625rem;4159  color: var(--peach-t2);4160  flex-shrink: 0;4161}4162.peach-snapshot-confirm {4163  display: flex;4164  flex-direction: column;4165  gap: 8px;4166  padding-top: 10px;4167  border-top: 1px solid rgba(240, 232, 216, 0.06);4168}4169.peach-snapshot-warning {4170  display: flex;4171  align-items: flex-start;4172  gap: 6px;4173  font-size: 10.5px;4174  color: rgba(220, 80, 60, 0.85);4175  line-height: 1.55;4176}4177.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }4178.peach-snapshot-confirm-row {4179  display: flex;4180  gap: 6px;4181  align-items: center;4182}4183.peach-snapshot-restore-btn {4184  width: 100%;4185}4186.peach-lock-hero--unlock .peach-lock-hero-art {4187  width: 112px;4188  height: 112px;4189  right: 0;4190  top: 2px;4191  opacity: 0.1;4192}41934194.peach-card {4195  border: 1px solid var(--peach-t3);4196  border-radius: 18px;4197  background:4198    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4199  box-shadow:4200    inset 0 0 0 1px var(--peach-border-accent),4201    inset 0 1px 0 rgba(240, 232, 216, 0.04),4202    0 12px 32px rgba(0, 0, 0, 0.14);4203  overflow: hidden;4204}42054206.peach-card-active {4207  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4208  box-shadow:4209    inset 0 1px 0 rgba(240, 232, 216, 0.05),4210    0 16px 38px rgba(0, 0, 0, 0.18),4211    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4212}42134214.peach-card-disabled {4215  opacity: 0.72;4216}42174218.peach-card-header {4219  width: 100%;4220  padding: 13px 16px 11px;4221  background: transparent;4222  color: var(--peach-t0);4223  display: flex;4224  justify-content: space-between;4225  align-items: center;4226  text-align: left;4227  font-size: 0.75rem;4228}42294230.peach-card-body {4231  padding: 0 16px 16px;4232  display: grid;4233  gap: 9px;4234}42354236.peach-card-tag {4237  color: var(--peach-t2);4238  font-family: "IBM Plex Mono", monospace;4239  font-size: 0.5625rem;4240  letter-spacing: 0.12em;4241  text-transform: uppercase;4242}42434244.peach-empty-copy {4245  display: grid;4246  gap: 6px;4247  color: var(--peach-t1);4248  font-size: 0.8125rem;4249}42504251.peach-lock-submit {4252  width: 100%;4253  box-shadow:4254    0 1px 0 rgba(255,255,255,0.10) inset,4255    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4256    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4257    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4258}42594260.peach-lock-secondary {4261  width: 100%;4262  border-color: var(--peach-t3);4263  background: rgba(240, 232, 216, 0.02);4264}42654266.peach-lock-secondary:hover {4267  background: rgba(240, 232, 216, 0.04);4268}42694270.peach-lock-note {4271  max-width: none;4272  line-height: 1.55;4273  margin: 0;4274}42754276.peach-overlay-action {4277  font-size: 0.625rem;4278  padding: 4px 8px;4279  letter-spacing: 0.06em;4280  min-width: 44px;4281  text-align: center;4282}42834284.peach-inline-action {4285  flex-shrink: 0;4286  font-size: 0.5625rem;4287  letter-spacing: 0.1em;4288  text-transform: uppercase;4289  padding: 4px 7px;4290}4291.peach-password-toggle-btn {4292  display: inline-flex;4293  align-items: center;4294  justify-content: center;4295  min-width: 30px;4296  min-height: 26px;4297  padding: 0 7px;4298  border: 1px solid var(--peach-t3);4299  border-radius: 999px;4300  background: rgba(240, 232, 216, 0.04);4301  color: var(--peach-t2);4302  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4303}4304.peach-password-toggle-btn:hover {4305  border-color: var(--peach-t2);4306  color: var(--peach-t0);4307  background: rgba(240, 232, 216, 0.06);4308}43094310.peach-new-textarea {4311  width: 100%;4312  min-height: 88px;4313  resize: vertical;4314  border: 0;4315  outline: none;4316  background: transparent;4317  color: var(--peach-t1);4318  font-family: "IBM Plex Mono", monospace;4319  font-size: 0.75rem;4320  line-height: 1.65;4321  caret-color: var(--peach-accent);4322}43234324.peach-new-textarea::placeholder {4325  color: var(--peach-t2);4326  opacity: 0.7;4327}43284329.peach-settings-actions {4330  display: grid;4331  gap: 8px;4332}43334334.peach-sync-section-label {4335  font-size: 0.6875rem;4336  color: var(--peach-t2);4337  text-transform: uppercase;4338  letter-spacing: 0.05em;4339}43404341.peach-sync-network-note {4342  margin: 0 0 6px;4343  font-size: 0.75rem;4344  color: var(--peach-t2);4345  line-height: 1.4;4346}43474348.peach-settings-row--tappable {4349  background: none;4350  border: none;4351  width: 100%;4352  text-align: left;4353  cursor: pointer;4354  color: var(--peach-t1);4355  font-size: 0.8125rem;4356}4357.peach-settings-row--tappable:hover {4358  color: var(--peach-t0);4359}43604361.peach-sync-pro-hint {4362  display: flex;4363  flex-direction: column;4364  align-items: flex-start;4365  gap: 8px;4366  padding: 12px 0 4px;4367}43684369.peach-sync-device-row {4370  display: flex;4371  justify-content: space-between;4372  align-items: center;4373  padding: 6px 0;4374  border-bottom: 1px solid var(--peach-t3);4375}43764377.peach-sync-device-info {4378  display: flex;4379  flex-direction: column;4380  gap: 2px;4381}43824383.peach-sync-device-name {4384  font-size: 0.8125rem;4385  color: var(--peach-t0);4386}43874388.peach-sync-device-meta {4389  font-size: 0.6875rem;4390  color: var(--peach-t2);4391}43924393.peach-sync-status-dot {4394  display: inline-block;4395  width: 8px;4396  height: 8px;4397  border-radius: 50%;4398  vertical-align: middle;4399}44004401.peach-sync-remove-btn {4402  color: var(--peach-breach);4403}44044405.peach-sync-advanced-row {4406  display: flex;4407  justify-content: space-between;4408  align-items: center;4409  padding: 6px 0;4410  gap: 12px;4411}44124413.peach-sync-advanced-info {4414  display: flex;4415  flex-direction: column;4416  gap: 2px;4417  flex: 1;4418}44194420.peach-sync-advanced-name {4421  font-size: 0.8125rem;4422  color: var(--peach-t0);4423}44244425.peach-sync-reset-confirm {4426  display: flex;4427  flex-direction: column;4428  gap: 8px;4429  padding: 10px;4430  border: 1px solid var(--peach-breach);4431  border-radius: 10px;4432  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4433}44344435.peach-sync-reset-confirm-headline {4436  font-size: 0.8125rem;4437  font-weight: 600;4438  color: var(--peach-t0);4439  margin: 0;4440}44414442.peach-sync-reset-confirm-body {4443  font-size: 0.75rem;4444  color: var(--peach-t1);4445  margin: 0;4446  line-height: 1.4;4447}44484449.peach-btn--danger {4450  background: var(--peach-breach);4451  color: #fff;4452  border-color: var(--peach-breach);4453}4454.peach-btn--danger:hover:not(:disabled) {4455  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4456}4457.peach-btn--danger:disabled {4458  opacity: 0.55;4459  cursor: not-allowed;4460}44614462.peach-sync-hero-icon {4463  color: var(--peach-t1);4464  opacity: 0.85;4465}44664467.peach-import-preview {4468  margin-bottom: 12px;4469  max-height: 152px;4470  overflow-y: auto;4471  border: 1px solid var(--peach-t3);4472  border-radius: 10px;4473  padding: 8px 10px;4474  display: grid;4475  gap: 8px;4476  background: rgba(240, 232, 216, 0.02);4477}44784479.peach-import-preview-row {4480  display: flex;4481  justify-content: space-between;4482  gap: 10px;4483  font-size: 0.6875rem;4484  color: var(--peach-t1);4485}44864487.peach-import-preview-title {4488  color: var(--peach-t0);4489  flex: 1;4490  min-width: 0;4491  overflow: hidden;4492  text-overflow: ellipsis;4493  white-space: nowrap;4494}44954496.peach-import-preview-meta {4497  color: var(--peach-t2);4498  flex-shrink: 0;4499  max-width: 42%;4500  overflow: hidden;4501  text-overflow: ellipsis;4502  white-space: nowrap;4503}45044505.peach-import-preview-more {4506  color: var(--peach-t2);4507  font-size: 0.625rem;4508}45094510.peach-restore-copy {4511  margin: 0;4512  color: var(--peach-t1);4513  font-size: 0.6875rem;4514  line-height: 1.6;4515}45164517.peach-restore-warning {4518  padding: 10px 12px;4519  border-radius: 12px;4520  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4521  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4522  color: var(--peach-t0);4523  font-size: 0.6875rem;4524  line-height: 1.55;4525}45264527.peach-provider-chips {4528  display: flex;4529  flex-wrap: wrap;4530  gap: 6px;4531}45324533.peach-provider-chip {4534  display: inline-flex;4535  align-items: center;4536  padding: 5px 8px;4537  border-radius: 999px;4538  border: 1px solid var(--peach-t3);4539  background: rgba(240, 232, 216, 0.02);4540  color: var(--peach-t1);4541  font-family: "IBM Plex Mono", monospace;4542  font-size: 0.5rem;4543  letter-spacing: 0.08em;4544  text-transform: uppercase;4545}45464547.peach-restore-file,4548.peach-restore-input {4549  width: 100%;4550  border-radius: 10px;4551  border: 1px solid var(--peach-t3);4552  background: var(--peach-s2);4553  color: var(--peach-t0);4554  font-size: 0.75rem;4555}45564557.peach-restore-file {4558  padding: 9px 10px;4559}45604561.peach-restore-file::file-selector-button {4562  margin-right: 10px;4563  padding: 7px 10px;4564  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4565  border-radius: 999px;4566  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4567  color: var(--peach-t0);4568  font-size: 0.625rem;4569  letter-spacing: 0.08em;4570  text-transform: uppercase;4571  cursor: pointer;4572}45734574.peach-restore-input {4575  padding: 10px 12px;4576}45774578.peach-auth-grid {4579  display: grid;4580  gap: 10px;4581}45824583.peach-import-summary {4584  color: var(--peach-t1);4585  font-size: 0.75rem;4586  line-height: 1.6;4587  margin-bottom: 12px;4588}45894590.peach-restore-error {4591  color: rgba(220, 80, 60, 0.95);4592  font-size: 0.75rem;4593  line-height: 1.55;4594}45954596.peach-passkey-card {4597  max-width: 400px;4598  margin: auto 16px;4599  align-self: center;4600  width: calc(100% - 32px);4601}46024603/* Center the approval card vertically inside the overlay-view (which sets4604 * flex-direction: column without justify-content). Without this, the card4605 * sits at the top with a tall empty band below — looks unfinished on the4606 * 320px popup. */4607.peach-overlay-view:has(.peach-passkey-card) {4608  justify-content: center;4609}46104611.peach-pro-badge {4612  padding: 2px 6px;4613  border-radius: 999px;4614  font-family: var(--font-ui);4615  font-size: 0.625rem;4616  letter-spacing: 0.08em;4617  text-transform: uppercase;4618  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4619  color: var(--peach-accent);4620}46214622/* ── Shortcuts rebind table ─────────────────────────────────── */4623.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4624.peach-shortcut-row {4625  display: flex;4626  align-items: center;4627  gap: 10px;4628  padding: 6px 0;4629}4630.peach-shortcut-row-label {4631  flex: 1;4632  font-size: 0.75rem;4633  color: var(--peach-t0);4634}4635.peach-shortcut-chip {4636  min-width: 64px;4637  padding: 4px 10px;4638  border-radius: 6px;4639  border: 1px solid var(--peach-t3);4640  background: var(--peach-input-bg, var(--surface-card));4641  color: var(--peach-t0);4642  font-family: var(--font-mono);4643  font-size: 0.6875rem;4644  letter-spacing: 0.04em;4645  cursor: pointer;4646  text-align: center;4647  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4648}4649.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4650.peach-shortcut-chip.is-custom {4651  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4652  color: var(--peach-accent);4653}4654.peach-shortcut-chip.is-capturing {4655  border-color: var(--peach-accent);4656  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4657  color: var(--peach-accent);4658  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4659}4660@keyframes peach-shortcut-capture-pulse {4661  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4662  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4663}4664.peach-shortcut-reset {4665  background: transparent;4666  border: none;4667  cursor: pointer;4668  color: var(--peach-t2);4669  padding: 4px 6px;4670  border-radius: 5px;4671  font-size: 0.875rem;4672  line-height: 1;4673  transition: color 120ms ease, background 120ms ease;4674}4675.peach-shortcut-reset:hover {4676  color: var(--peach-t0);4677  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4678}4679.peach-shortcuts-conflict {4680  margin: 4px 0 0;4681  padding: 8px 10px;4682  border-radius: 7px;4683  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4684  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4685  font-family: var(--font-mono);4686  font-size: 0.6875rem;4687  color: var(--peach-t0);4688}46894690/* ── Help dialog overlay (? to open) ────────────────────────── */4691.peach-shortcuts-help-backdrop {4692  position: fixed;4693  inset: 0;4694  background: rgba(0, 0, 0, 0.55);4695  backdrop-filter: blur(2px);4696  display: flex;4697  align-items: center;4698  justify-content: center;4699  z-index: 1000;4700  animation: peach-help-fade-in 140ms ease forwards;4701}4702@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4703.peach-shortcuts-help-card {4704  width: min(320px, 92vw);4705  max-height: 80vh;4706  overflow-y: auto;4707  border-radius: 14px;4708  border: 1px solid var(--peach-t3);4709  background: var(--peach-bg);4710  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4711  padding: 16px 18px 18px;4712  display: flex;4713  flex-direction: column;4714  gap: 12px;4715}4716.peach-shortcuts-help-head {4717  display: flex; align-items: center; justify-content: space-between;4718}4719.peach-shortcuts-help-head h3 {4720  margin: 0;4721  font-family: var(--font-display);4722  font-style: italic;4723  font-weight: 400;4724  font-size: 22px;4725  color: var(--peach-t0);4726}4727.peach-shortcuts-help-close {4728  background: transparent;4729  border: none;4730  color: var(--peach-t2);4731  cursor: pointer;4732  font-size: 0.875rem;4733  padding: 4px 8px;4734  border-radius: 5px;4735}4736.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4737.peach-shortcuts-help-body ul {4738  list-style: none; padding: 0; margin: 4px 0 12px;4739  display: grid; gap: 8px;4740}4741.peach-shortcuts-help-body li {4742  display: flex; align-items: center; justify-content: space-between; gap: 12px;4743  font-size: 0.75rem; color: var(--peach-t0);4744}4745.peach-shortcuts-help-body kbd {4746  font-family: var(--font-mono);4747  font-size: 0.6875rem;4748  padding: 3px 8px;4749  border-radius: 6px;4750  background: var(--surface-card);4751  border: 1px solid var(--peach-t3);4752  color: var(--peach-accent);4753  letter-spacing: 0.04em;4754}47554756/* ── Pro promo on Account screen ────────────────────────────── */4757.peach-pro-promo {4758  position: relative;4759  border-radius: 14px;4760  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4761  background:4762    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4763    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4764    var(--surface-card);4765  overflow: hidden;4766  margin-bottom: 14px;4767}4768.peach-pro-promo-glow {4769  position: absolute;4770  inset: -40% -20% auto auto;4771  width: 220px; height: 220px;4772  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4773  pointer-events: none;4774  filter: blur(8px);4775}4776.peach-pro-promo-inner {4777  position: relative;4778  padding: 18px 18px 16px;4779}4780.peach-pro-promo-title {4781  font-family: var(--font-display);4782  font-style: italic;4783  font-weight: 400;4784  font-size: 28px;4785  line-height: 1;4786  letter-spacing: -0.005em;4787  color: var(--peach-t0);4788  margin: 0 0 4px;4789}4790.peach-pro-promo-tagline {4791  font-family: var(--font-mono);4792  font-size: 0.625rem;4793  letter-spacing: 0.06em;4794  color: var(--peach-t2);4795  margin: 0 0 14px;4796}4797.peach-pro-promo-list {4798  list-style: none;4799  margin: 0 0 16px;4800  padding: 0;4801  display: grid;4802  gap: 9px;4803}4804.peach-pro-promo-list li {4805  display: flex;4806  align-items: flex-start;4807  gap: 9px;4808  font-size: 0.75rem;4809  color: var(--peach-t1);4810  line-height: 1.4;4811}4812.peach-pro-promo-list svg {4813  width: 14px;4814  height: 14px;4815  flex-shrink: 0;4816  color: var(--peach-accent);4817  margin-top: 2px;4818}4819.peach-pro-promo-list span {4820  color: var(--peach-t0);4821}4822.peach-pro-promo-cta {4823  width: 100%;4824  background: var(--peach-accent);4825  color: #fff;4826  border: none;4827  padding: 9px 12px;4828  border-radius: 9px;4829  font-size: 0.75rem;4830  font-weight: 500;4831  font-family: var(--font-ui);4832  letter-spacing: 0.02em;4833  text-decoration: none;4834  display: inline-flex;4835  align-items: center;4836  justify-content: center;4837  cursor: pointer;4838  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4839  box-shadow: 0 2px 16px var(--peach-glow);4840}4841.peach-pro-promo-cta:hover {4842  filter: brightness(1.07);4843  box-shadow: 0 4px 24px var(--peach-glow);4844  transform: translateY(-1px);4845}4846.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }48474848.peach-pro-or-divider {4849  display: flex;4850  align-items: center;4851  gap: 10px;4852  margin: 4px 0 12px;4853  font-family: var(--font-mono);4854  font-size: 0.625rem;4855  letter-spacing: 0.06em;4856  color: var(--peach-t2);4857  text-transform: uppercase;4858}4859.peach-pro-or-divider::before,4860.peach-pro-or-divider::after {4861  content: "";4862  flex: 1;4863  height: 1px;4864  background: var(--peach-t3);4865}48664867.peach-loading {4868  position: absolute;4869  inset: 0;4870  display: flex;4871  align-items: center;4872  justify-content: center;4873  background: var(--bg);4874  animation: peach-loading-pulse 1.2s ease-in-out infinite;4875}48764877@keyframes peach-loading-pulse {4878  0%, 100% { opacity: 0.6; }4879  50% { opacity: 1; }4880}48814882/* ── Health Dashboard ─────────────────────────────────────────────────── */4883.peach-health-body {4884  flex: 1;4885  overflow-y: auto;4886  display: flex;4887  flex-direction: column;4888  /* Hide the platform scrollbar — every other scrollable surface in the4889   * popup hides it; the Health view was the one outlier and it ruined the4890   * polish. Behavior unchanged, just no rail rendered. */4891  scrollbar-width: none;4892  -ms-overflow-style: none;4893}4894.peach-health-body::-webkit-scrollbar { display: none; }48954896/* Loading screen for the Vault Health view. The advanced report computation4897 * can run for a few seconds on a large vault — without a clear loading4898 * screen the surface looked broken (the entry view bleeds through the4899 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4900.peach-health-loading-screen {4901  flex: 1;4902  display: flex;4903  flex-direction: column;4904  align-items: center;4905  justify-content: center;4906  gap: 14px;4907  padding: 32px 28px;4908  text-align: center;4909}49104911.peach-health-loading-glyph {4912  width: 48px;4913  height: 48px;4914  display: flex;4915  align-items: center;4916  justify-content: center;4917  border-radius: 14px;4918  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4919  color: var(--peach-accent);4920}49214922.peach-health-loading-title {4923  margin: 0;4924  font-family: var(--font-display);4925  font-style: italic;4926  font-weight: 300;4927  font-size: 19px;4928  line-height: 1.2;4929  color: var(--peach-t0);4930}49314932.peach-health-loading-copy {4933  margin: 0;4934  max-width: 240px;4935  font-size: 0.75rem;4936  line-height: 1.55;4937  color: var(--peach-t2);4938}49394940.peach-health-loading-track {4941  width: 200px;4942  height: 3px;4943  margin-top: 6px;4944  border-radius: 999px;4945  background: rgba(240, 232, 216, 0.06);4946  overflow: hidden;4947}49484949.peach-health-loading-fill {4950  width: 40%;4951  height: 100%;4952  border-radius: inherit;4953  background: linear-gradient(4954    90deg,4955    transparent 0%,4956    var(--peach-accent) 50%,4957    transparent 100%4958  );4959  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4960}49614962@keyframes peach-health-loading-sweep {4963  0%   { transform: translateX(-100%); }4964  100% { transform: translateX(350%); }4965}49664967[data-motion="reduce"] .peach-health-loading-fill,4968[data-motion="reduce"] .peach-health-loading-glyph svg path {4969  animation: none;4970}49714972.peach-health-summary {4973  padding: 10px 16px 6px;4974  font-family: "IBM Plex Mono", monospace;4975  font-size: 0.6875rem;4976}4977.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4978.peach-health-summary-ok { color: var(--peach-t2); }49794980.peach-health-check-row {4981  padding: 0 16px 10px;4982}4983.peach-health-check-btn {4984  width: 100%;4985  display: flex;4986  align-items: center;4987  justify-content: center;4988}49894990.peach-health-sections {4991  flex: 1;4992  display: flex;4993  flex-direction: column;4994}49954996.peach-health-section {4997  border-bottom: 1px solid var(--peach-t3);4998}49995000.peach-health-section-header {5001  width: 100%;5002  display: flex;5003  align-items: center;5004  justify-content: space-between;5005  padding: 9px 16px;5006  background: transparent;5007  cursor: pointer;5008  color: var(--peach-t0);5009}50105011.peach-health-section-title-row {5012  display: flex;5013  align-items: center;5014  gap: 8px;5015}50165017.peach-health-count-badge {5018  display: inline-flex;5019  align-items: center;5020  justify-content: center;5021  min-width: 20px;5022  height: 18px;5023  padding: 0 5px;5024  border-radius: 999px;5025  background: rgba(220,80,60,0.15);5026  border: 1px solid rgba(220,80,60,0.25);5027  font-family: "IBM Plex Mono", monospace;5028  font-size: 0.5625rem;5029  color: rgba(220,80,60,0.9);5030}50315032.peach-health-section-title {5033  font-family: "IBM Plex Mono", monospace;5034  font-size: 0.6875rem;5035  text-transform: uppercase;5036  letter-spacing: 0.1em;5037  color: var(--peach-t1);5038}50395040.peach-health-chevron {5041  color: var(--peach-t2);5042  transition: transform 200ms ease;5043  flex-shrink: 0;5044}5045.peach-health-chevron.is-expanded {5046  transform: rotate(180deg);5047}50485049.peach-health-section-body {5050  padding: 0 16px 10px;5051  display: flex;5052  flex-direction: column;5053  gap: 4px;5054}50555056.peach-health-row {5057  display: flex;5058  align-items: flex-start;5059  justify-content: space-between;5060  gap: 8px;5061  padding: 6px 8px;5062  border-radius: 8px;5063  background: rgba(240,232,216,0.02);5064}50655066.peach-health-row-info {5067  flex: 1;5068  min-width: 0;5069  display: flex;5070  flex-direction: column;5071  gap: 2px;5072}50735074.peach-health-row-name {5075  font-family: var(--font-display);5076  font-size: 0.9375rem;5077  font-style: italic;5078  font-weight: 400;5079  color: var(--peach-t0);5080  white-space: nowrap;5081  overflow: hidden;5082  text-overflow: ellipsis;5083}50845085.peach-health-row-meta {5086  font-family: "IBM Plex Mono", monospace;5087  font-size: 0.5625rem;5088  color: var(--peach-t2);5089  letter-spacing: 0.05em;5090}50915092.peach-health-fix-btn {5093  font-size: 0.5625rem;5094  letter-spacing: 0.08em;5095  text-transform: uppercase;5096  padding: 4px 7px;5097  flex-shrink: 0;5098  display: flex;5099  align-items: center;5100}51015102.peach-health-empty {5103  font-family: "IBM Plex Mono", monospace;5104  font-size: 0.625rem;5105  color: var(--peach-t2);5106  padding: 6px 0;5107}51085109.peach-health-loading {5110  font-family: "IBM Plex Mono", monospace;5111  font-size: 0.625rem;5112  color: var(--peach-t2);5113  padding: 6px 0;5114  display: flex;5115  align-items: center;5116  gap: 6px;5117}51185119.peach-health-loading::before {5120  content: "";5121  width: 10px;5122  height: 10px;5123  border: 1.5px solid var(--peach-t3);5124  border-top-color: var(--peach-accent);5125  border-radius: 50%;5126  animation: peach-spin 600ms linear infinite;5127}51285129@keyframes peach-spin {5130  to { transform: rotate(360deg); }5131}51325133.peach-spinner {5134  width: 32px;5135  height: 32px;5136  border: 2px solid var(--peach-s2);5137  border-top-color: var(--peach-accent);5138  border-radius: 50%;5139  margin: 0 auto 16px;5140  animation: peach-spin 0.8s linear infinite;5141}51425143.peach-progress-screen {5144  text-align: center;5145  padding: 32px 16px;5146}51475148.peach-progress-screen-title {5149  font-size: 0.8125rem;5150  color: var(--peach-t0);5151  margin-bottom: 16px;5152}51535154.peach-progress-screen-stage {5155  font-size: 0.6875rem;5156  color: var(--peach-t2);5157  min-height: 14px;5158}51595160.peach-progress-screen-note {5161  font-size: 0.625rem;5162  color: var(--peach-t2);5163  margin-top: 8px;5164}51655166.peach-pairing-body {5167  flex: 1;5168  overflow-y: auto;5169  display: flex;5170  flex-direction: column;5171}51725173.peach-pairing-content {5174  flex: 1;5175  display: flex;5176  flex-direction: column;5177  align-items: center;5178  justify-content: center;5179  gap: 14px;5180  padding: 28px 20px;5181  text-align: center;5182}51835184.peach-pairing-code-screen {5185  gap: 18px;5186}51875188.peach-pairing-headline {5189  font-family: var(--font-display);5190  font-style: italic;5191  font-weight: 300;5192  font-size: 28px;5193  color: var(--peach-t0);5194  margin: 0;5195  line-height: 1;5196}51975198.peach-pairing-subline {5199  font-size: 0.75rem;5200  color: var(--peach-t2);5201  max-width: 220px;5202  line-height: 1.5;5203  margin: 0;5204}52055206.peach-pairing-subline--center {5207  text-align: center;5208}52095210/* 6-digit pairing code — both display (.peach-pairing-code) and entry5211   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking5212   so the two modes feel like the same surface. */5213.peach-pairing-code {5214  font-family: "IBM Plex Mono", monospace;5215  font-size: 36px;5216  letter-spacing: 0.25em;5217  color: var(--peach-t0);5218  text-align: center;5219  padding: 24px 0;5220  text-shadow:5221    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),5222    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);5223  background: transparent;5224  border: 0;5225  cursor: default;5226  user-select: text;5227}52285229.peach-pairing-code--loading,5230.peach-pairing-code--expired {5231  font-size: 18px;5232  letter-spacing: 0.04em;5233  color: var(--peach-t2);5234  cursor: pointer;5235  text-shadow: none;5236}52375238.peach-pairing-qr-container {5239  display: flex;5240  flex-direction: column;5241  align-items: center;5242  gap: 10px;5243}52445245.peach-pairing-qr {5246  width: 240px;5247  height: 240px;5248  display: block;5249}52505251.peach-pairing-instruction {5252  font-size: 0.75rem;5253  color: var(--peach-t2);5254  text-align: center;5255  line-height: 1.5;5256  margin: 0;5257  max-width: 220px;5258}52595260.peach-pairing-expiry {5261  font-family: "IBM Plex Mono", monospace;5262  font-size: 13px;5263  letter-spacing: 0.06em;5264  color: var(--peach-t2);5265  margin: 0;5266}52675268.peach-pairing-regen {5269  font-size: 0.75rem;5270  color: var(--peach-accent);5271  background: transparent;5272  border: 0;5273  cursor: pointer;5274  padding: 4px 0;5275  text-decoration: underline;5276  text-underline-offset: 2px;5277}52785279.peach-pairing-code-input {5280  font-family: "IBM Plex Mono", monospace;5281  font-size: 36px;5282  letter-spacing: 0.25em;5283  color: var(--peach-t0);5284  background: transparent;5285  border: 0;5286  border-bottom: 1px solid var(--peach-t3);5287  outline: none;5288  text-align: center;5289  padding: 18px 0;5290  width: 220px;5291  caret-color: var(--peach-accent);5292  transition: border-color 160ms ease;5293}52945295.peach-pairing-code-input::placeholder {5296  color: var(--peach-t3);5297}52985299.peach-pairing-code-input:focus {5300  border-bottom-color: var(--peach-accent);5301}53025303.peach-pairing-toggle {5304  background: transparent;5305  border: 0;5306  color: var(--peach-t2);5307  font-size: 0.75rem;5308  padding: 8px 4px;5309  cursor: pointer;5310  transition: color 120ms ease;5311}53125313.peach-pairing-toggle:hover:not(:disabled) {5314  color: var(--peach-t1);5315}53165317.peach-pairing-toggle:disabled {5318  opacity: 0.5;5319  cursor: default;5320}53215322.peach-pairing-hint {5323  font-size: 0.6875rem;5324  color: var(--peach-t2);5325  margin: 0;5326  text-align: center;5327}53285329.peach-pairing-status {5330  display: flex;5331  align-items: center;5332  gap: 8px;5333  margin: 0;5334  font-size: 0.75rem;5335  color: var(--peach-t1);5336}53375338.peach-pairing-error {5339  margin: 0;5340  font-size: 0.6875rem;5341  color: var(--peach-breach);5342}53435344.peach-pairing-error--muted {5345  color: var(--peach-t2);5346}53475348.peach-pairing-spinner {5349  width: 12px;5350  height: 12px;5351  border: 1.5px solid var(--peach-t3);5352  border-top-color: var(--peach-accent);5353  border-radius: 50%;5354  animation: peach-spin 0.8s linear infinite;5355}53565357.peach-pairing-success-icon,5358.peach-pairing-error-icon,5359.peach-pairing-hero {5360  display: inline-flex;5361  align-items: center;5362  justify-content: center;5363}53645365/* Tag chips */5366.peach-tag-chip {5367  display: inline-flex;5368  align-items: center;5369  gap: 4px;5370  padding: 3px 8px;5371  border-radius: 999px;5372  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5373  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5374  color: var(--peach-t0);5375  font-family: "IBM Plex Mono", monospace;5376  font-size: 0.625rem;5377  letter-spacing: 0.04em;5378}53795380.peach-tag-chip-remove {5381  background: transparent;5382  border: none;5383  color: inherit;5384  opacity: 0.6;5385  cursor: pointer;5386  padding: 0;5387  font-size: 0.75rem;5388  line-height: 1;5389}53905391.peach-tag-chip-remove:hover {5392  opacity: 1;5393}53945395/* Tag input */5396.peach-tag-input-wrap {5397  border-bottom: 1px solid var(--peach-t3);5398}53995400.peach-tag-suggestions {5401  display: flex;5402  flex-wrap: wrap;5403  gap: 4px;5404  padding: 6px 0;5405}54065407.peach-tag-suggestion {5408  padding: 2px 8px;5409  border-radius: 999px;5410  border: 1px solid var(--peach-t3);5411  background: var(--peach-s2);5412  color: var(--peach-t1);5413  font-family: "IBM Plex Mono", monospace;5414  font-size: 0.625rem;5415  cursor: pointer;5416  transition: border-color 80ms ease, background 80ms ease;5417}54185419.peach-tag-suggestion:hover {5420  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5421  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5422}54235424/* Identity suggestions — shown below username/email inputs in new-entry form */5425@keyframes peach-suggest-in {5426  from { opacity: 0; transform: translateY(-4px); }5427  to   { opacity: 1; transform: none; }5428}54295430.peach-identity-suggestions {5431  display: flex;5432  flex-direction: column;5433  gap: 1px;5434  margin-top: 4px;5435  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5436}54375438.peach-identity-filter-row {5439  display: flex;5440  align-items: center;5441  gap: 4px;5442  padding: 2px 0 5px;5443}54445445.peach-identity-collapse-btn {5446  margin-left: auto;5447  background: transparent;5448  border: none;5449  cursor: pointer;5450  color: var(--peach-t3);5451  padding: 2px 4px;5452  display: flex;5453  align-items: center;5454  line-height: 0;5455  border-radius: 3px;5456  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5457}54585459.peach-identity-collapse-btn:hover {5460  color: var(--peach-t1);5461}54625463.peach-identity-collapse-btn.is-collapsed {5464  transform: rotate(-90deg);5465}54665467.peach-identity-rows {5468  display: grid;5469  grid-template-rows: 1fr;5470  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5471}54725473.peach-identity-rows.is-collapsed {5474  grid-template-rows: 0fr;5475}54765477.peach-identity-rows-inner {5478  overflow-y: auto;5479  min-height: 0;5480  max-height: 148px;5481  scrollbar-width: thin;5482  scrollbar-color: var(--peach-t3) transparent;5483  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5484  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5485}54865487.peach-identity-rows-inner::-webkit-scrollbar {5488  width: 4px;5489}54905491.peach-identity-rows-inner::-webkit-scrollbar-track {5492  background: transparent;5493}54945495.peach-identity-rows-inner::-webkit-scrollbar-thumb {5496  background: var(--peach-t3);5497  border-radius: 2px;5498}54995500.peach-identity-filter-pill {5501  padding: 2px 7px;5502  border-radius: 999px;5503  border: 1px solid var(--peach-t3);5504  background: transparent;5505  color: var(--peach-t2);5506  font-family: "IBM Plex Mono", monospace;5507  font-size: 0.6rem;5508  cursor: pointer;5509  transition: border-color 80ms, background 80ms, color 80ms;5510}55115512.peach-identity-filter-pill.is-on {5513  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5514  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5515  color: var(--peach-accent);5516}55175518.peach-identity-suggestion {5519  display: flex;5520  align-items: center;5521  gap: 6px;5522  width: 100%;5523  padding: 4px 6px;5524  border-radius: 5px;5525  border: none;5526  background: transparent;5527  cursor: pointer;5528  text-align: left;5529  transition: background 80ms ease;5530}55315532.peach-identity-suggestion:hover,5533.peach-identity-suggestion:focus {5534  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5535  outline: none;5536}55375538.peach-identity-suggestion-value {5539  font-family: "IBM Plex Mono", monospace;5540  font-size: 0.7rem;5541  color: var(--peach-t1);5542  overflow: hidden;5543  text-overflow: ellipsis;5544  white-space: nowrap;5545  flex: 1;5546  min-width: 0;5547}55485549.peach-identity-suggestion-type {5550  font-family: "IBM Plex Mono", monospace;5551  font-size: 0.55rem;5552  font-weight: 600;5553  flex-shrink: 0;5554  padding: 1px 4px;5555  border-radius: 3px;5556}55575558.peach-identity-suggestion-type--email {5559  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5560  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5561}55625563.peach-identity-suggestion-type--username {5564  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5565  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5566}55675568.peach-identity-suggestion-meta {5569  font-family: "IBM Plex Mono", monospace;5570  font-size: 0.6rem;5571  color: var(--peach-t3);5572  flex-shrink: 0;5573}55745575/* Tag filter strip */5576.peach-tag-filter-strip {5577  border-bottom: 1px solid var(--peach-t3);5578  flex-shrink: 0;5579}55805581.peach-tag-filter-chip {5582  display: inline-flex;5583  align-items: center;5584  padding: 4px 10px;5585  border-radius: 999px;5586  border: 1px solid var(--peach-t3);5587  background: transparent;5588  color: var(--peach-t2);5589  font-family: "IBM Plex Mono", monospace;5590  font-size: 0.5625rem;5591  letter-spacing: 0.06em;5592  text-transform: uppercase;5593  cursor: pointer;5594  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5595  white-space: nowrap;5596}55975598.peach-tag-filter-chip:hover {5599  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5600  color: var(--peach-t1);5601}56025603.peach-tag-filter-chip.is-selected {5604  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5605  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5606  color: var(--peach-t0);5607}56085609/* ─────────────────────────────────────────────────────────────────────────5610   v1.4.12 additions5611   ─────────────────────────────────────────────────────────────────────── */56125613/* Sort bar */5614.peach-sort-bar {5615  display: flex;5616  align-items: center;5617  gap: 4px;5618  padding: 5px 12px;5619  border-bottom: 1px solid var(--peach-t3);5620  flex-shrink: 0;5621  overflow-x: auto;5622  scrollbar-width: none;5623}56245625.peach-sort-btn {5626  padding: 2px 9px;5627  border-radius: 999px;5628  border: 1px solid transparent;5629  background: transparent;5630  color: var(--peach-t2);5631  font-family: "IBM Plex Mono", monospace;5632  font-size: 0.5625rem;5633  letter-spacing: 0.07em;5634  text-transform: uppercase;5635  cursor: pointer;5636  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5637  white-space: nowrap;5638}56395640.peach-sort-btn:hover {5641  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5642  color: var(--peach-t1);5643}56445645.peach-sort-btn.is-active {5646  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5647  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5648  color: var(--peach-t0);5649}56505651.peach-sort-scope-btn {5652  padding-inline: 8px;5653  font-size: 0.53125rem;5654  letter-spacing: 0.05em;5655}56565657.peach-sort-domain-hint {5658  margin-left: auto;5659  font-family: "IBM Plex Mono", monospace;5660  font-size: 0.5625rem;5661  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5662  white-space: nowrap;5663  overflow: hidden;5664  text-overflow: ellipsis;5665  max-width: 110px;5666}56675668/* Tab-match badge on entry rows */5669.peach-tab-match-badge {5670  display: inline-block;5671  width: 6px;5672  height: 6px;5673  border-radius: 50%;5674  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5675  margin-left: 5px;5676  vertical-align: middle;5677  flex-shrink: 0;5678  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5679}56805681.peach-entry-row.is-tab-match {5682  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5683  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5684}56855686.peach-entry-row.is-tab-match:hover {5687  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5688}56895690/* Entry list stagger entrance */5691@keyframes peach-entry-fadein {5692  from { opacity: 0; transform: translateY(4px); }5693  to   { opacity: 1; transform: translateY(0); }5694}56955696.peach-vault-list .peach-entry-row {5697  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5698}56995700/* Button press micro-interaction */5701.peach-btn:active {5702  transform: scale(0.95);5703  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5704}57055706.peach-sort-btn:active,5707.peach-tag-filter-chip:active {5708  transform: scale(0.93);5709  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5710}57115712/* Password strength bar (Lock view + shared) */5713.peach-password-strength {5714  display: flex;5715  align-items: center;5716  gap: 8px;5717  margin-top: 6px;5718}57195720.peach-strength-bar {5721  flex: 1;5722  height: 3px;5723  border-radius: 2px;5724  background: var(--peach-t3);5725  overflow: hidden;5726}57275728.peach-strength-fill {5729  height: 100%;5730  border-radius: 2px;5731  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5732              background 300ms ease;5733}57345735.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5736.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5737.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5738.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }57395740.peach-strength-label {5741  font-family: "IBM Plex Mono", monospace;5742  font-style: italic;5743  font-size: 0.5625rem;5744  font-weight: 300;5745  letter-spacing: 0.06em;5746  color: var(--peach-t2);5747  min-width: 36px;5748  text-align: right;5749}57505751.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5752.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5753.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5754.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }57555756/* Duress form */5757.peach-duress-status {5758  padding: 2px 8px;5759  border-radius: 999px;5760  border: 1px solid var(--peach-t3);5761  font-family: "IBM Plex Mono", monospace;5762  font-size: 0.5625rem;5763  letter-spacing: 0.07em;5764  text-transform: uppercase;5765  color: var(--peach-t2);5766  flex-shrink: 0;5767}57685769.peach-duress-status.is-active {5770  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5771  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5772  color: var(--peach-t0);5773}57745775.peach-duress-form {5776  padding: 8px 0 4px;5777  display: flex;5778  flex-direction: column;5779  gap: 6px;5780}57815782.peach-duress-form .peach-label {5783  margin-top: 4px;5784}57855786.peach-duress-actions {5787  display: flex;5788  gap: 6px;5789  align-items: center;5790  margin-top: 4px;5791}57925793.peach-duress-actions .peach-btn:first-child {5794  margin-right: auto;5795}57965797/* Improved overlay spring entrance */5798.peach-overlay-view.ov-enter-up {5799  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5800}58015802@keyframes ov-enter-up-spring {5803  from { opacity: 0; transform: translateY(16px) scale(0.98); }5804  to   { opacity: 1; transform: translateY(0) scale(1); }5805}58065807.peach-overlay-view.ov-enter-right {5808  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5809}58105811@keyframes ov-enter-right-spring {5812  from { opacity: 0; transform: translateX(18px) scale(0.98); }5813  to   { opacity: 1; transform: translateX(0) scale(1); }5814}58155816/* ── Onboarding-mode restore screens (file import) ── */5817/* Used when MainImportView renders during onboarding (no vault yet).5818   Animates like a lock-screen transition. */5819.peach-lock-view {5820  position: absolute;5821  inset: 0;5822  display: flex;5823  flex-direction: column;5824  background:5825    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5826    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5827    var(--peach-bg);5828  z-index: 2;5829  overflow: hidden;5830  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5831}58325833.peach-lock-view-header {5834  display: flex;5835  align-items: center;5836  justify-content: space-between;5837  padding: 16px 18px 12px;5838  flex-shrink: 0;5839}58405841/* ───────── Settings: auto-lock select ───────── */5842.peach-settings-select {5843  font-family: "IBM Plex Mono", monospace;5844  font-size: 0.6875rem;5845  background: transparent;5846  border: 1px solid var(--peach-t3);5847  border-radius: 4px;5848  color: var(--peach-t1);5849  padding: 3px 6px;5850  cursor: pointer;5851  outline: none;5852}5853.peach-settings-select:focus {5854  border-color: var(--peach-accent);5855}58565857/* ───────── Duress status pill (new polished) ───────── */5858.peach-duress-status-pill {5859  font-family: "IBM Plex Mono", monospace;5860  font-size: 0.5625rem;5861  text-transform: uppercase;5862  letter-spacing: 0.12em;5863  padding: 2px 8px;5864  border-radius: 12px;5865  background: var(--peach-t3);5866  color: var(--peach-t2);5867  flex-shrink: 0;5868}5869.peach-duress-status-pill.is-active {5870  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5871  color: var(--peach-accent);5872}58735874/* ───────── Entry advanced disclosure (canary) ───────── */5875.peach-entry-advanced {5876  margin-top: 12px;5877  border-top: 1px solid var(--peach-t3);5878  padding-top: 10px;5879  position: relative;5880  z-index: 1;5881}5882.peach-entry-advanced-toggle {5883  display: flex;5884  align-items: center;5885  justify-content: space-between;5886  width: 100%;5887  background: transparent;5888  border: none;5889  cursor: pointer;5890  padding: 0;5891  color: var(--peach-t2);5892}5893.peach-canary-section {5894  margin-top: 10px;5895  display: grid;5896  gap: 6px;5897}58985899/* ───────── Import: merge/replace radio choices ───────── */5900.peach-import-choice {5901  display: flex;5902  align-items: flex-start;5903  gap: 10px;5904  padding: 8px 10px;5905  border: 1px solid var(--peach-t3);5906  border-radius: 10px;5907  cursor: pointer;5908  margin-bottom: 6px;5909  transition: border-color 120ms ease, background 120ms ease;5910}5911.peach-import-choice:hover {5912  border-color: var(--peach-accent);5913}5914.peach-import-choice input[type="radio"] {5915  margin-top: 3px;5916  accent-color: var(--peach-accent);5917  flex-shrink: 0;5918}5919.peach-import-choice-main {5920  display: flex;5921  flex-direction: column;5922  gap: 2px;5923  min-width: 0;5924}5925.peach-import-choice-label {5926  font-size: 0.75rem;5927  color: var(--peach-t0);5928}5929.peach-import-choice-sub {5930  font-size: 0.6875rem;5931  color: var(--peach-t2);5932  line-height: 1.5;5933}59345935/* ───────── Export: success confirmation strip ───────── */5936.peach-export-success {5937  display: flex;5938  align-items: flex-start;5939  gap: 10px;5940  padding: 12px;5941  border-radius: 12px;5942  border: 1px solid rgba(150, 175, 110, 0.3);5943  background: rgba(150, 175, 110, 0.08);5944  color: var(--peach-t0);5945  font-size: 0.75rem;5946  line-height: 1.55;5947}5948.peach-export-success-check {5949  color: rgba(150, 175, 110, 0.9);5950  font-size: 0.875rem;5951  flex-shrink: 0;5952}59535954/* ── Trash view ──────────────────────────────────────────────────────── */5955.peach-trash-entry-row {5956  display: flex;5957  align-items: center;5958  justify-content: space-between;5959  gap: 8px;5960  padding: 8px 0;5961  border-bottom: 1px solid var(--peach-border);5962}5963.peach-trash-entry-info {5964  flex: 1;5965  min-width: 0;5966  display: flex;5967  flex-direction: column;5968  gap: 2px;5969}5970.peach-trash-entry-title {5971  font-size: 0.8125rem;5972  color: var(--peach-t0);5973  overflow: hidden;5974  text-overflow: ellipsis;5975  white-space: nowrap;5976}5977.peach-trash-entry-meta {5978  font-family: var(--font-mono);5979  font-size: 0.5625rem;5980  color: var(--peach-t2);5981  letter-spacing: 0.04em;5982}5983.peach-trash-entry-actions {5984  display: flex;5985  align-items: center;5986  gap: 4px;5987  flex-shrink: 0;5988}5989.peach-trash-delete-btn {5990  background: transparent;5991  border: 0;5992  color: var(--peach-t3);5993  font-size: 1rem;5994  line-height: 1;5995  cursor: pointer;5996  padding: 2px 5px;5997  transition: color 0.15s;5998}5999.peach-trash-delete-btn:hover { color: var(--peach-breach); }6000.peach-trash-list {6001  overflow-y: auto;6002}6003.peach-trash-footer {6004  display: flex;6005  align-items: center;6006  gap: 8px;6007  padding: 8px 0 0;6008  border-top: 1px solid var(--peach-border);6009  margin-top: 4px;6010}6011.peach-trash-purge-all {6012  background: transparent;6013  border: 0;6014  color: var(--peach-t3);6015  font-size: 0.625rem;6016  cursor: pointer;6017  padding: 4px 0;6018  letter-spacing: 0.03em;6019  transition: color 0.2s;6020}6021.peach-trash-purge-all:hover { color: var(--peach-breach); }6022.peach-trash-purge-confirm-label {6023  font-size: 0.625rem;6024  color: var(--peach-t1);6025  flex: 1;6026}60276028/* ── Settings shortcuts grid ─────────────────────────────────────────── */6029.peach-shortcuts-grid {6030  display: grid;6031  grid-template-columns: auto 1fr;6032  gap: 6px 12px;6033  align-items: center;6034  padding: 4px 0;6035}6036.peach-shortcut-key {6037  font-family: var(--font-mono);6038  font-size: 0.625rem;6039  color: var(--peach-t0);6040  background: var(--peach-t3);6041  border-radius: 4px;6042  padding: 2px 6px;6043  white-space: nowrap;6044  text-align: center;6045}6046.peach-shortcut-desc {6047  font-size: 0.6875rem;6048  color: var(--peach-t1);6049}60506051/* ── Sort bar trash button ───────────────────────────────────────────── */6052.peach-sort-trash-btn {6053  display: flex;6054  align-items: center;6055  justify-content: center;6056  padding: 3px 5px;6057  background: transparent;6058  border: none;6059  cursor: pointer;6060  color: var(--peach-t2);6061  border-radius: 4px;6062  transition: color 140ms ease, background 140ms ease;6063}6064.peach-sort-trash-btn:hover {6065  color: var(--peach-t1);6066  background: var(--peach-t3);6067}6068.peach-sort-trash-btn.is-active {6069  color: var(--peach-accent);6070}60716072/* Accent color picker */6073.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }6074.peach-accent-picker {6075  display: flex;6076  flex-wrap: wrap;6077  gap: 7px;6078  padding: 2px 0;6079}6080.peach-accent-swatch {6081  width: 22px;6082  height: 22px;6083  border-radius: 50%;6084  border: 2px solid transparent;6085  cursor: pointer;6086  padding: 0;6087  transition: transform 100ms;6088  outline-offset: 2px;6089}6090.peach-accent-swatch:hover { transform: scale(1.15); }6091.peach-accent-swatch.is-active {6092  border-color: var(--peach-t0);6093  transform: scale(1.1);6094}60956096.peach-pill-group {6097  display: flex;6098  gap: 6px;6099}6100.peach-pill-group .peach-btn.is-active {6101  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);6102  border-color: var(--peach-accent);6103  color: var(--peach-t0);6104}61056106/* ── Card entry styles ───────────────────────────────────────── */6107.peach-card-number {6108  font-family: var(--peach-mono);6109  letter-spacing: 0.08em;6110}61116112.peach-card-network-badge {6113  font-size: 0.625rem;6114  padding: 1px 5px;6115  border-radius: 4px;6116  border: 0.5px solid var(--peach-border);6117  color: var(--peach-text-dim);6118  margin-left: 6px;6119  vertical-align: middle;6120}61216122.peach-card-expiry-row {6123  display: flex;6124  align-items: center;6125  gap: 8px;6126}61276128.peach-card-expiry-sep {6129  color: var(--peach-text-dim);6130}61316132/* ── Pro tier — upgrade screen ──────────────────────────────── */6133.peach-pro-mark {6134  font-size: 0.5625rem;6135  color: var(--peach-accent);6136  margin-left: 6px;6137  vertical-align: super;6138  opacity: 0.7;6139}61406141.peach-pro-mini-badge {6142  display: block;6143  font-size: 0.625rem;6144  font-style: italic;6145  color: var(--peach-accent);6146  letter-spacing: 0.04em;6147  margin-top: -2px;6148  padding-left: 2px;6149  opacity: 0.85;6150  text-align: center;6151}61526153.peach-wordmark-stack {6154  display: inline-flex;6155  flex-direction: column;6156  align-items: center;6157}61586159/* ── Pro tier — upgrade page ─────────────────────────────────── */6160/* ── Pro upgrade — redesigned editorial layout ─────────────────── */61616162.peach-pro-upgrade {6163  display: flex;6164  flex-direction: column;6165  align-items: stretch;6166  gap: 10px;6167  padding: 2px 2px 12px;6168}61696170.peach-pro-eyebrow {6171  margin: 0;6172  font-family: var(--font-ui);6173  font-size: 0.625rem;6174  font-weight: 500;6175  letter-spacing: 0.12em;6176  color: var(--peach-accent);6177}61786179.peach-pro-headline {6180  margin: 0;6181  font-family: var(--font-display, "Cormorant Garamond", serif);6182  font-size: 30px;6183  font-weight: 700;6184  font-style: normal;6185  line-height: 1.05;6186  color: var(--peach-t0);6187  letter-spacing: -0.01em;6188}6189.peach-pro-headline em {6190  font-style: italic;6191  font-weight: 400;6192  color: var(--peach-accent);6193}61946195.peach-pro-subtitle {6196  margin: 0;6197  font-size: 0.6875rem;6198  line-height: 1.5;6199  color: var(--peach-t1);6200}62016202/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6203.peach-pro-section-label {6204  margin: 6px 0 0;6205  font-family: var(--font-ui);6206  font-size: 0.5625rem;6207  font-weight: 500;6208  letter-spacing: 0.12em;6209  text-transform: uppercase;6210  color: var(--peach-t2);6211}62126213/* 2-column numbered feature grid */6214.peach-pro-grid {6215  display: grid;6216  grid-template-columns: 1fr 1fr;6217  border-top: 1px solid var(--peach-border);6218  border-left: 1px solid var(--peach-border);6219}62206221.peach-pro-grid-item {6222  display: flex;6223  flex-direction: column;6224  gap: 2px;6225  padding: 8px 9px;6226  border-right: 1px solid var(--peach-border);6227  border-bottom: 1px solid var(--peach-border);6228}62296230.peach-pro-grid-item--wide {6231  grid-column: 1 / -1;6232}62336234.peach-pro-grid-num {6235  font-family: var(--font-mono);6236  font-size: 0.5625rem;6237  color: var(--peach-accent);6238  letter-spacing: 0.06em;6239  opacity: 0.85;6240}62416242.peach-pro-grid-name {6243  font-size: 0.8125rem;6244  font-weight: 500;6245  color: var(--peach-t0);6246  line-height: 1.2;6247}62486249.peach-pro-grid-desc {6250  font-size: 0.625rem;6251  color: var(--peach-t1);6252  line-height: 1.4;6253}62546255.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6256  animation: peach-pulse-accent 600ms ease-out forwards;6257}62586259@keyframes peach-pulse-accent {6260  0%   { opacity: 1; transform: scale(1.2); }6261  100% { opacity: 0.85; transform: scale(1); }6262}62636264/* Actions */6265.peach-pro-upgrade-actions {6266  display: flex;6267  flex-direction: column;6268  align-items: stretch;6269  gap: 10px;6270}62716272.peach-pro-pricing {6273  margin: 0;6274  font-size: 1rem;6275  font-weight: 600;6276  color: var(--peach-t0);6277  letter-spacing: 0.01em;6278}6279.peach-pro-pricing-sub {6280  font-size: 0.75rem;6281  font-weight: 400;6282  color: var(--peach-t1);6283  letter-spacing: 0.02em;6284}62856286.peach-pro-upgrade-cta {6287  display: flex;6288  align-items: center;6289  justify-content: center;6290  text-decoration: none;6291  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6292  border: 1px solid var(--peach-accent);6293  border-radius: 10px;6294  color: var(--peach-accent);6295  font-family: var(--font-ui);6296  font-size: 0.8125rem;6297  font-weight: 600;6298  letter-spacing: 0.06em;6299  padding: 11px 16px;6300  transition: background 0.15s ease, color 0.15s ease;6301}6302.peach-pro-upgrade-cta:hover {6303  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6304}63056306.peach-pro-key-divider {6307  display: flex;6308  align-items: center;6309  gap: 8px;6310  color: var(--peach-t2);6311  font-size: 0.5625rem;6312  letter-spacing: 0.1em;6313}6314.peach-pro-key-divider::before,6315.peach-pro-key-divider::after {6316  content: "";6317  flex: 1;6318  height: 1px;6319  background: var(--peach-border);6320}63216322/* Inline key entry row */6323.peach-pro-key-inline {6324  display: flex;6325  align-items: center;6326  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6327  border: 1px solid var(--peach-border);6328  border-radius: 8px;6329  overflow: hidden;6330}6331.peach-pro-key-inline-input {6332  flex: 1;6333  background: transparent;6334  border: none;6335  outline: none;6336  color: var(--peach-t1);6337  font-family: var(--font-mono);6338  font-size: 0.625rem;6339  letter-spacing: 0.06em;6340  padding: 9px 10px;6341}6342.peach-pro-key-inline-input::placeholder {6343  color: var(--peach-t2);6344}6345.peach-pro-key-apply {6346  background: transparent;6347  border: none;6348  border-left: 1px solid var(--peach-border);6349  color: var(--peach-t2);6350  font-family: var(--font-ui);6351  font-size: 0.5625rem;6352  font-weight: 600;6353  letter-spacing: 0.08em;6354  padding: 9px 10px;6355  cursor: pointer;6356  transition: color 0.15s ease;6357  flex-shrink: 0;6358}6359.peach-pro-key-apply:not(:disabled):hover {6360  color: var(--peach-accent);6361}6362.peach-pro-key-apply:disabled {6363  opacity: 0.35;6364  cursor: not-allowed;6365}63666367/* ── Pro tier — key ceremony ─────────────────────────────────── */6368.peach-pro-key-ceremony {6369  display: flex;6370  flex-direction: column;6371  align-items: center;6372  gap: 12px;6373  padding: 20px 4px 16px;6374}63756376.peach-pro-key-ceremony .peach-lock-rune-string {6377  font-size: 1rem;6378  gap: 12px;6379  flex: 0;6380  justify-content: center;6381}63826383.peach-pro-key-ceremony-label {6384  margin: 0;6385  font-size: 0.6875rem;6386  color: var(--peach-t2);6387  font-style: italic;6388  letter-spacing: 0.04em;6389}63906391.peach-pro-key-input {6392  font-family: var(--font-mono, monospace);6393  letter-spacing: 0.06em;6394  text-align: center;6395  width: 100%;6396  box-sizing: border-box;6397}63986399.peach-pro-key-error {6400  margin: 0;6401  font-size: 0.75rem;6402  text-align: center;6403  color: var(--peach-breach, #e55);6404  padding: 0;6405}64066407.peach-pro-key-activate {6408  width: 100%;6409  text-align: center;6410  box-sizing: border-box;6411  padding: 10px 20px;6412  font-size: 0.8125rem;6413}64146415.peach-pro-key-cancel {6416  background: transparent;6417  border: 0;6418  color: var(--peach-t2);6419  font-size: 0.6875rem;6420  cursor: pointer;6421  padding: 2px 8px;6422  transition: color 0.2s;6423}64246425.peach-pro-key-cancel:hover { color: var(--peach-accent); }64266427/* ── Pro tier — active state ─────────────────────────────────── */6428.peach-pro-active {6429  display: flex;6430  flex-direction: column;6431  align-items: center;6432  gap: 0;6433  padding: 8px 4px 16px;6434  min-height: 280px;6435}64366437.peach-pro-active-hero {6438  display: flex;6439  flex-direction: column;6440  align-items: center;6441  gap: 6px;6442  padding: 20px 0 8px;6443}64446445.peach-pro-active-mark-wrap {6446  display: flex;6447  align-items: center;6448  justify-content: center;6449  margin-bottom: 4px;6450}64516452.peach-pro-active-mark {6453  width: 60px;6454  height: 60px;6455}64566457.peach-pro-active-title {6458  font-family: var(--font-display, var(--font-ui));6459  font-size: 26px;6460  margin: 0;6461  color: var(--peach-t0);6462  letter-spacing: 0.01em;6463}64646465.peach-pro-active-since {6466  margin: 0;6467  font-size: 0.6875rem;6468  color: var(--peach-t2);6469  font-style: italic;6470}64716472.peach-pro-active-features {6473  display: flex;6474  flex-direction: column;6475  gap: 8px;6476  width: 100%;6477  padding: 14px 8px 0;6478  border-top: 1px solid var(--peach-border);6479  flex: 1;6480}64816482.peach-pro-active-feature {6483  display: flex;6484  align-items: center;6485  gap: 9px;6486}64876488.peach-pro-active-feature-mark {6489  color: var(--peach-accent);6490  font-size: 0.625rem;6491  opacity: 0.65;6492  flex-shrink: 0;6493}64946495.peach-pro-active-feature-name {6496  font-size: 0.75rem;6497  color: var(--peach-t1);6498}64996500.peach-pro-deactivate {6501  align-self: center;6502  background: transparent;6503  border: 0;6504  color: var(--peach-t3);6505  font-size: 0.625rem;6506  cursor: pointer;6507  padding: 8px 0 0;6508  margin-top: 16px;6509  letter-spacing: 0.03em;6510  transition: color 0.2s;6511}65126513.peach-pro-deactivate:hover { color: var(--peach-t2); }65146515.peach-pro-deactivate:disabled {6516  opacity: 0.5;6517  cursor: default;6518}65196520/* ── Pro card activation sparkles & thank-you ── */6521button.peach-pro-active-mark-wrap {6522  background: transparent;6523  border: 0;6524  padding: 0;6525  cursor: pointer;6526  position: relative;6527  overflow: visible;6528}65296530.peach-pro-sparks {6531  position: absolute;6532  inset: 0;6533  pointer-events: none;6534  overflow: visible;6535}65366537.peach-pro-spark {6538  position: absolute;6539  top: 50%;6540  left: 50%;6541  font-size: 9px;6542  line-height: 1;6543  opacity: 0;6544  transform: translate(-50%, -50%);6545  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;6546}65476548@keyframes peach-pro-spark-fly {6549  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }6550  25%  { opacity: 1; }6551  100% {6552    opacity: 0;6553    transform: translate(6554      calc(-50% + var(--spark-x, 0px)),6555      calc(-50% + var(--spark-y, -40px))6556    ) scale(0.8);6557  }6558}65596560.peach-pro-thankyou-text {6561  margin: 4px 0 0;6562  font-size: 0.6875rem;6563  font-style: italic;6564  color: currentColor;6565  opacity: 0;6566  animation: peach-pro-thankyou-flash 2.5s ease both;6567}65686569@keyframes peach-pro-thankyou-flash {6570  0%   { opacity: 0; transform: translateY(4px); }6571  15%  { opacity: 0.75; transform: translateY(0); }6572  75%  { opacity: 0.75; }6573  100% { opacity: 0; }6574}65756576/* ── Pro advanced health remediation queue ──────────────────── */6577.peach-health-pro-queue {6578  display: flex;6579  flex-direction: column;6580  gap: 10px;6581  padding: 12px;6582  margin: 0 0 12px;6583  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6584  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6585  border-radius: 10px;6586}65876588.peach-health-pro-queue-head {6589  display: flex;6590  justify-content: space-between;6591  align-items: baseline;6592}65936594.peach-health-pro-queue-title {6595  font-size: 0.75rem;6596  font-weight: 500;6597  letter-spacing: 0.04em;6598  text-transform: uppercase;6599  color: var(--peach-accent);6600}66016602.peach-health-pro-queue-score {6603  font-size: 0.6875rem;6604  color: var(--peach-t2);6605}66066607.peach-health-pro-row {6608  display: flex;6609  gap: 10px;6610  align-items: center;6611  padding: 8px 0;6612  border-top: 1px solid var(--peach-border);6613}66146615.peach-health-pro-row-info {6616  flex: 1;6617  display: flex;6618  flex-direction: column;6619  gap: 4px;6620  min-width: 0;6621}66226623.peach-health-pro-action {6624  flex: 0 0 auto;6625  padding: 4px 8px;6626  font-size: 0.5625rem;6627  letter-spacing: 0.08em;6628  text-transform: uppercase;6629}66306631.peach-health-pro-row-name {6632  font-size: 0.8125rem;6633  color: var(--peach-t0);6634  overflow: hidden;6635  text-overflow: ellipsis;6636  white-space: nowrap;6637}66386639.peach-health-pro-row-meta {6640  font-size: 0.6875rem;6641  color: var(--peach-t2);6642}66436644.peach-health-pro-bar {6645  height: 2px;6646  background: var(--peach-border);6647  border-radius: 2px;6648  overflow: hidden;6649  margin-top: 2px;6650}66516652.peach-health-pro-bar-fill {6653  height: 100%;6654  background: var(--peach-accent);6655  transition: width 200ms ease-out;6656}66576658/* ── Pro activation celebration ── */6659@keyframes peach-pro-bloom {6660  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6661  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6662                 drop-shadow(0 0 48px var(--peach-glow)); }6663  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6664}66656666@keyframes peach-pro-wordmark-in {6667  from { opacity: 0; transform: translateY(4px); }6668  to   { opacity: 1; transform: translateY(0); }6669}66706671@keyframes peach-pro-fade-out {6672  from { opacity: 1; }6673  to   { opacity: 0; }6674}66756676.peach-pro-celebration {6677  background:6678    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6679    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6680    var(--peach-bg);6681  border: 1px solid var(--peach-t3);6682  box-shadow:6683    0 2px 8px rgba(0,0,0,0.55),6684    0 14px 48px rgba(0,0,0,0.7),6685    0 0 0 1px rgba(240,232,216,0.04);6686  overflow: hidden;6687  width: 320px;6688  height: 520px;6689  display: flex;6690  flex-direction: column;6691  align-items: center;6692  justify-content: center;6693  gap: 8px;6694  padding: 32px 24px;6695  text-align: center;6696}66976698.peach-pro-celebration.is-leaving {6699  animation: peach-pro-fade-out 400ms ease forwards;6700}67016702.peach-pro-bloom-target {6703  display: flex;6704  align-items: center;6705  justify-content: center;6706  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6707  margin-bottom: 12px;6708}67096710.peach-pro-bloom-icon {6711  width: 48px;6712  height: 48px;6713}67146715.peach-pro-wordmark {6716  font-family: var(--font-display);6717  font-size: 22px;6718  font-style: italic;6719  font-weight: 400;6720  color: var(--peach-accent);6721  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6722}67236724.peach-pro-thankyou {6725  font-size: 0.75rem;6726  font-style: italic;6727  color: var(--peach-t2);6728  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6729}673067316732/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6733.peach-pro-notice-banner {6734  display: flex;6735  align-items: center;6736  gap: 8px;6737  padding: 7px 12px;6738  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6739  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6740  font-size: 0.6875rem;6741  color: var(--peach-t2);6742  font-family: "IBM Plex Mono", monospace;6743  flex-shrink: 0;6744}67456746.peach-pro-notice-link {6747  background: none;6748  border: none;6749  padding: 0;6750  cursor: pointer;6751  font-size: 0.6875rem;6752  color: var(--peach-accent);6753  font-family: "IBM Plex Mono", monospace;6754  margin-left: auto;6755  white-space: nowrap;6756}67576758.peach-pro-notice-close {6759  background: none;6760  border: none;6761  padding: 0 0 0 4px;6762  cursor: pointer;6763  font-size: 0.625rem;6764  color: var(--peach-t3);6765  line-height: 1;6766}67676768/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6769   Renders over whatever view is showing. 60-second expiry; the popup ticks6770   the countdown each second and clears the banner when it hits zero. */6771.peach-pair-request-banner {6772  display: flex;6773  flex-direction: column;6774  gap: 8px;6775  padding: 10px 12px;6776  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6777  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6778  font-family: "IBM Plex Mono", monospace;6779  flex-shrink: 0;6780}67816782.peach-pair-toast {6783  padding: 8px 12px;6784  font-family: "IBM Plex Mono", monospace;6785  font-size: 0.75rem;6786  color: var(--peach-t1);6787  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6788  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6789  flex-shrink: 0;6790  text-align: center;6791}67926793.peach-pair-toast strong {6794  color: var(--peach-t0);6795  font-weight: 500;6796}67976798.peach-pair-request-header {6799  display: flex;6800  align-items: center;6801  gap: 8px;6802  font-size: 0.75rem;6803  color: var(--peach-t1);6804}68056806.peach-pair-request-mark {6807  font-size: 0.875rem;6808  display: inline-flex;6809  align-items: center;6810}68116812.peach-pair-request-icon {6813  width: 1em;6814  height: 1em;6815}68166817.peach-pair-request-title {6818  font-weight: 600;6819  color: var(--peach-t0);6820}68216822.peach-pair-request-countdown {6823  margin-left: auto;6824  font-variant-numeric: tabular-nums;6825  color: var(--peach-t2);6826  font-size: 0.6875rem;6827}68286829.peach-pair-request-body {6830  margin: 0;6831  font-size: 0.75rem;6832  color: var(--peach-t1);6833  line-height: 1.4;6834}68356836.peach-pair-request-body strong {6837  color: var(--peach-t0);6838  font-weight: 600;6839}68406841.peach-pair-request-actions {6842  display: flex;6843  gap: 8px;6844  justify-content: flex-end;6845}68466847/* ─── First-run onboarding ──────────────────────────────────────────────6848   Three-card welcome shown once before vault creation. The PeachScript6849   rune background drifts behind everything at very low opacity — it's6850   atmosphere, not focus. The cards themselves use the same panel6851   language as the rest of the popup so the transition into NewVault is6852   continuous, not a jarring switch of visual register. */68536854.peach-onboarding {6855  position: relative;6856  display: flex;6857  flex-direction: column;6858  width: 100%;6859  height: 100%;6860  padding: 16px 16px 18px;6861  box-sizing: border-box;6862  overflow: hidden;6863  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6864}68656866.peach-onboarding.is-completing {6867  animation: peach-onboard-exit 200ms ease-out forwards;6868}68696870.peach-rune-background {6871  position: absolute;6872  inset: 0;6873  width: 100%;6874  height: 100%;6875  pointer-events: none;6876  z-index: 0;6877  transition: opacity 500ms ease-out;6878}68796880.peach-onboarding.is-completing .peach-rune-background {6881  opacity: 0;6882}68836884.peach-onboarding-header {6885  position: relative;6886  z-index: 1;6887  display: flex;6888  align-items: center;6889  margin-bottom: 14px;6890}68916892.peach-onboarding-card {6893  position: relative;6894  z-index: 1;6895  flex: 1;6896  display: flex;6897  flex-direction: column;6898  gap: 10px;6899  padding: 22px 20px;6900  border-radius: 16px;6901  border: 1px solid var(--peach-t3);6902  background:6903    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6904  backdrop-filter: blur(3px);6905  -webkit-backdrop-filter: blur(3px);6906  box-shadow:6907    inset 0 1px 0 rgba(240, 232, 216, 0.04),6908    0 12px 28px rgba(0, 0, 0, 0.12);6909  cursor: pointer;6910  user-select: none;6911  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6912}69136914.peach-onboarding-card.is-exiting {6915  animation: peach-card-out 120ms ease-in forwards;6916  pointer-events: none;6917}69186919.peach-onboarding-card-headline {6920  margin: 0;6921  font-family: var(--font-display);6922  font-style: italic;6923  font-weight: 400;6924  font-size: 22px;6925  line-height: 1.05;6926  color: var(--peach-t0);6927  white-space: pre-line;6928}69296930.peach-onboarding-divider {6931  margin: 4px 0 6px;6932  border: 0;6933  border-top: 1px solid var(--peach-t3);6934  width: 100%;6935}69366937.peach-onboarding-body {6938  margin: 0;6939  font-size: 0.8125rem;6940  line-height: 1.6;6941  color: var(--peach-t1);6942}69436944.peach-onboarding-warning {6945  display: flex;6946  align-items: flex-start;6947  gap: 8px;6948  margin: 6px 0 0;6949  padding-top: 8px;6950  border-top: 1px dashed var(--peach-t3);6951  font-size: 0.8125rem;6952  line-height: 1.5;6953  color: var(--peach-t1);6954}69556956.peach-onboarding-warning-icon {6957  color: var(--peach-accent);6958  font-size: 0.8125rem;6959  line-height: 1.5;6960  flex: 0 0 auto;6961}69626963.peach-onboarding-nav {6964  position: relative;6965  z-index: 1;6966  display: flex;6967  align-items: center;6968  justify-content: space-between;6969  margin-top: 12px;6970  padding: 0 4px;6971}69726973.peach-onboarding-dots {6974  display: flex;6975  align-items: center;6976  gap: 6px;6977}69786979.peach-onboarding-dot {6980  width: 6px;6981  height: 6px;6982  border-radius: 50%;6983  background: var(--peach-t2);6984  transition: width 200ms ease, height 200ms ease, background 200ms ease;6985}69866987.peach-onboarding-dot.is-active {6988  width: 8px;6989  height: 8px;6990  background: var(--peach-accent);6991}69926993.peach-onboarding-next {6994  background: none;6995  border: none;6996  padding: 4px 0;6997  cursor: pointer;6998  font-family: "IBM Plex Mono", monospace;6999  font-size: 0.6875rem;7000  letter-spacing: 0.04em;7001  color: var(--peach-t1);7002  transition: color 150ms ease;7003}70047005.peach-onboarding-next:hover {7006  color: var(--peach-t0);7007}70087009.peach-onboarding-next:disabled {7010  opacity: 0.5;7011  cursor: default;7012}70137014.peach-onboarding-back {7015  background: none;7016  border: none;7017  padding: 4px 0;7018  cursor: pointer;7019  font-family: "IBM Plex Mono", monospace;7020  font-size: 0.6875rem;7021  letter-spacing: 0.04em;7022  color: var(--peach-t2);7023  transition: color 150ms ease;7024}70257026.peach-onboarding-back:hover {7027  color: var(--peach-t0);7028}70297030.peach-onboarding-back:disabled {7031  opacity: 0.5;7032  cursor: default;7033}70347035/* Reserve back-button width on the first card so the dots stay centred */7036.peach-onboarding-back-spacer {7037  width: 44px;7038}70397040.peach-onboarding-mobile-card-buttons {7041  display: flex;7042  flex-direction: column;7043  gap: 8px;7044  margin-top: 16px;7045}70467047@keyframes peach-onboard-enter {7048  from { opacity: 0; transform: translateY(20px); }7049  to   { opacity: 1; transform: translateY(0); }7050}70517052@keyframes peach-onboard-exit {7053  from { opacity: 1; }7054  to   { opacity: 0; }7055}70567057@keyframes peach-card-in {7058  from { opacity: 0; transform: translateX(12px); }7059  to   { opacity: 1; transform: translateX(0); }7060}70617062@keyframes peach-card-out {7063  from { opacity: 1; transform: translateX(0); }7064  to   { opacity: 0; transform: translateX(-12px); }7065}70667067/* ─── New vault screen — matched to onboarding card language ─────────── */70687069/* Two classes so this beats the shared .peach-screen.lock-screen--vault-stage7070   rule (same element) without loosening the unlock/restore screens. The7071   create-vault screen is the only vault-stage view tall enough to overflow7072   the 520px popup, so its spacing is tuned to fit header → card → restore →7073   recovery warning with nothing clipped. */7074.peach-screen.peach-newvault {7075  position: relative;7076  display: flex;7077  flex-direction: column;7078  gap: 12px;7079  padding: 14px 16px 12px;7080  overflow: hidden;7081}70827083/* Suppress the warm-blob ambient art inherited from .lock-screen — the7084   new vault card now carries the visual weight. */7085.peach-newvault::before {7086  content: none;7087}70887089.peach-newvault-header {7090  position: relative;7091  z-index: 2;7092  display: flex;7093  align-items: center;7094  gap: 10px;7095  margin-bottom: 2px;7096}70977098.peach-newvault-back {7099  display: inline-flex;7100  align-items: center;7101  gap: 4px;7102  background: transparent;7103  border: none;7104  color: var(--peach-t2);7105  font-family: "IBM Plex Mono", monospace;7106  font-size: 0.625rem;7107  letter-spacing: 0.06em;7108  cursor: pointer;7109  padding: 4px 6px;7110  border-radius: 6px;7111  transition: color 120ms ease, background 120ms ease;7112}71137114.peach-newvault-back:hover {7115  color: var(--peach-t0);7116  background: rgba(240, 232, 216, 0.04);7117}71187119.peach-newvault-mark {7120  position: absolute;7121  right: -12px;7122  top: 6px;7123  width: 110px;7124  height: 110px;7125  pointer-events: none;7126  opacity: 0.10;7127  filter: saturate(0.9);7128  z-index: 0;7129}7130.peach-newvault-mark-art {7131  width: 100%;7132  height: 100%;7133}7134.peach-newvault-mark-art path:nth-child(1) {7135  fill: rgba(123, 144, 96, 0.88);7136}7137.peach-newvault-mark-art path:nth-child(2) {7138  stroke: rgba(94, 122, 66, 0.95);7139}71407141.peach-newvault-card {7142  position: relative;7143  z-index: 1;7144  display: flex;7145  flex-direction: column;7146  gap: 8px;7147  padding: 16px 20px 14px;7148  border-radius: 16px;7149  border: 1px solid var(--peach-t3);7150  background:7151    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));7152  backdrop-filter: blur(3px);7153  -webkit-backdrop-filter: blur(3px);7154  box-shadow:7155    inset 0 1px 0 rgba(240, 232, 216, 0.04),7156    0 12px 28px rgba(0, 0, 0, 0.12);7157  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;7158}71597160.peach-newvault-headline {7161  margin: 0;7162  font-family: var(--font-display);7163  font-style: italic;7164  font-weight: 400;7165  font-size: 24px;7166  line-height: 1.05;7167  color: var(--peach-t0);7168  white-space: pre-line;7169}71707171.peach-newvault-divider {7172  margin: 2px 0 4px;7173  border: 0;7174  border-top: 1px solid var(--peach-t3);7175  width: 100%;7176}71777178.peach-newvault-field {7179  display: flex;7180  flex-direction: column;7181  gap: 4px;7182}71837184.peach-newvault-label-row {7185  display: flex;7186  align-items: center;7187  justify-content: space-between;7188}71897190/* Monospace input scaled to the card. Replaces the 22px unlock-input7191   so the placeholder no longer overflows and the field reads as part7192   of the same surface as the body copy. */7193.peach-newvault-input {7194  font-size: 0.875rem;7195  letter-spacing: 0.18em;7196  padding: 8px 0;7197}7198.peach-newvault-input::placeholder {7199  letter-spacing: 0.18em;7200  color: var(--peach-t2);7201}72027203.peach-newvault-hint {7204  margin: 2px 0 0;7205  font-family: "IBM Plex Mono", monospace;7206  font-size: 0.625rem;7207  color: var(--peach-t2);7208  letter-spacing: 0.04em;7209}72107211.peach-newvault-submit {7212  margin-top: 4px;7213}72147215.peach-newvault-warning {7216  display: flex;7217  align-items: flex-start;7218  gap: 8px;7219  margin: 2px 0 0;7220  padding-top: 8px;7221  border-top: 1px dashed var(--peach-t3);7222  font-size: 0.75rem;7223  line-height: 1.45;7224  color: var(--peach-t1);7225}72267227.peach-newvault-warning-icon {7228  color: var(--peach-accent);7229  font-size: 0.8125rem;7230  line-height: 1.4;7231  flex: 0 0 auto;7232}72337234/* Restore options sit inside the card, directly under "create vault", so7235   they are always reachable without scrolling. The top divider mirrors the7236   warning's so the choice reads as a deliberate fork, not a footnote. */7237.peach-newvault-restore {7238  position: relative;7239  z-index: 1;7240  display: flex;7241  flex-direction: column;7242  gap: 4px;7243  margin-top: 4px;7244  padding-top: 10px;7245  border-top: 1px dashed var(--peach-t3);7246}72477248/* Settings body — warm accent gradient gives the glass something to blur against */7249.peach-settings-body {7250  background:7251    radial-gradient(7252      ellipse at 30% 20%,7253      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7254      transparent 60%7255    );7256}72577258/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7259/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7260 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7261 * (replacing the vault from a backup file) and "hazard" for actions that7262 * are absolutely irreversible (Panic). Both use the same card scaffold so7263 * they read as a pair, but the colour family signals the severity at a7264 * glance — yellow for caution, red for don't.7265 */7266.peach-danger-card {7267  --danger-tint: 235, 158, 52; /* amber */7268  display: flex;7269  flex-direction: column;7270  gap: 8px;7271  padding: 14px;7272  margin-top: 10px;7273  border-radius: 12px;7274  border: 1px solid rgba(var(--danger-tint), 0.32);7275  background:7276    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7277    rgba(var(--danger-tint), 0.04);7278  box-shadow:7279    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7280    0 0 24px rgba(var(--danger-tint), 0.04);7281  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7282}72837284.peach-danger-card:hover {7285  border-color: rgba(var(--danger-tint), 0.55);7286  box-shadow:7287    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7288    0 0 36px rgba(var(--danger-tint), 0.10);7289}72907291.peach-danger-card--hazard {7292  --danger-tint: 220, 38, 38; /* red */7293}72947295.peach-danger-card-head {7296  display: flex;7297  align-items: center;7298  gap: 10px;7299}73007301.peach-danger-card-glyph {7302  width: 28px;7303  height: 28px;7304  flex-shrink: 0;7305  display: flex;7306  align-items: center;7307  justify-content: center;7308  border-radius: 8px;7309  background: rgba(var(--danger-tint), 0.12);7310  color: rgba(var(--danger-tint), 0.95);7311  font-size: 1rem;7312  line-height: 1;7313}73147315.peach-danger-card-title {7316  margin: 0;7317  font-size: 0.8125rem;7318  font-weight: 600;7319  color: rgba(var(--danger-tint), 0.92);7320  letter-spacing: 0.01em;7321}73227323.peach-danger-card-copy {7324  margin: 0;7325  font-size: 0.6875rem;7326  line-height: 1.5;7327  color: var(--peach-t2);7328}73297330.peach-danger-card-button {7331  width: 100%;7332  padding: 9px;7333  margin-top: 4px;7334  background: transparent;7335  border: 1px solid rgba(var(--danger-tint), 0.45);7336  border-radius: 8px;7337  color: rgba(var(--danger-tint), 0.9);7338  font-size: 0.75rem;7339  font-weight: 500;7340  letter-spacing: 0.02em;7341  cursor: pointer;7342  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7343}73447345.peach-danger-card-button:hover {7346  background: rgba(var(--danger-tint), 0.10);7347  border-color: rgba(var(--danger-tint), 0.75);7348  color: rgb(var(--danger-tint));7349}73507351/* ── Panic flow (three-step destruction) ───────────────────────────────── */7352.peach-panic {7353  display: flex;7354  flex-direction: column;7355  flex: 1;7356  min-height: 0;7357  padding: 28px 20px 20px;7358  gap: 18px;7359  overflow-y: auto;7360  scrollbar-width: none;7361  -ms-overflow-style: none;7362}73637364.peach-panic::-webkit-scrollbar { display: none; }73657366.peach-panic-step2 {7367  background: rgba(220, 38, 38, 0.04);7368}73697370.peach-panic-step3 {7371  position: relative;7372  background: #0f0505;7373  color: #ffffff;7374  overflow: hidden;7375}73767377.peach-panic-rune-bg {7378  position: absolute;7379  inset: 0;7380  opacity: 0.22;7381  pointer-events: none;7382  overflow: hidden;7383}73847385.peach-panic-rune-bg canvas {7386  width: 100% !important;7387  height: 100% !important;7388}73897390.peach-panic-icon {7391  font-size: 32px;7392  color: rgb(220, 38, 38);7393  line-height: 1;7394}73957396.peach-panic-title {7397  margin: 0;7398  font-size: 18px;7399  font-weight: 500;7400  color: var(--peach-t1);7401}74027403.peach-panic-title--severe {7404  font-size: 20px;7405  font-weight: 700;7406  color: rgb(220, 38, 38);7407}74087409.peach-panic-body {7410  margin: 0;7411  font-size: 0.8125rem;7412  line-height: 1.55;7413  color: var(--peach-t2);7414}74157416.peach-panic-body--severe {7417  color: rgba(220, 38, 38, 0.85);7418}74197420.peach-panic-body--final {7421  font-size: 1rem;7422  font-weight: 700;7423  color: rgb(255, 80, 80);7424  line-height: 1.4;7425}74267427.peach-panic-body--final-intro {7428  font-size: 1rem;7429  color: #ffffff;7430  font-weight: 400;7431}74327433.peach-panic-divider {7434  height: 1px;7435  background: rgba(255, 255, 255, 0.08);7436  margin: 4px 0;7437}74387439.peach-panic-confirm-input {7440  width: 100%;7441  padding: 10px 12px;7442  background: rgba(255, 255, 255, 0.02);7443  border: 1px solid rgba(220, 38, 38, 0.4);7444  border-radius: 8px;7445  color: var(--peach-t1);7446  font-family: "IBM Plex Mono", monospace;7447  font-size: 0.875rem;7448  letter-spacing: 0.12em;7449  text-transform: uppercase;7450}74517452.peach-panic-confirm-input:focus {7453  outline: none;7454  border-color: rgb(220, 38, 38);7455}74567457.peach-panic-confirm-input--match {7458  border-color: rgb(220, 38, 38);7459  color: rgb(220, 38, 38);7460}74617462.peach-panic-confirm-label {7463  font-size: 0.6875rem;7464  color: var(--peach-t2);7465  margin: 0 0 -8px;7466  letter-spacing: 0.06em;7467}74687469.peach-panic-actions {7470  display: flex;7471  flex-direction: column;7472  gap: 10px;7473  margin-top: auto;7474}74757476.peach-panic-button {7477  width: 100%;7478  padding: 12px;7479  border-radius: 8px;7480  font-size: 0.8125rem;7481  cursor: pointer;7482  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7483}74847485.peach-panic-button--primary {7486  background: var(--peach-accent);7487  border: 1px solid var(--peach-accent);7488  color: #ffffff;7489  font-weight: 600;7490}74917492.peach-panic-button--primary:hover {7493  background: color-mix(in srgb, var(--peach-accent) 88%, white);7494}74957496.peach-panic-button--danger {7497  background: rgb(220, 38, 38);7498  border: 1px solid rgb(220, 38, 38);7499  color: #ffffff;7500  font-weight: 600;7501}75027503.peach-panic-button--danger:disabled {7504  opacity: 0.35;7505  cursor: not-allowed;7506}75077508.peach-panic-button--ghost {7509  background: transparent;7510  border: 1px solid rgba(255, 255, 255, 0.18);7511  color: var(--peach-t2);7512}75137514.peach-panic-button--ghost:hover {7515  border-color: rgba(255, 255, 255, 0.32);7516  color: var(--peach-t1);7517}75187519.peach-panic-link {7520  background: transparent;7521  border: none;7522  padding: 4px 0;7523  color: rgba(220, 38, 38, 0.65);7524  font-size: 0.75rem;7525  cursor: pointer;7526  text-align: left;7527  text-decoration: underline;7528  text-underline-offset: 3px;7529}75307531.peach-panic-link:hover {7532  color: rgb(220, 38, 38);7533}75347535.peach-panic-bar {7536  background: rgb(220, 38, 38);7537  padding: 16px 20px;7538  margin: -28px -20px 0;7539  text-align: center;7540  font-size: 0.8125rem;7541  font-weight: 700;7542  letter-spacing: 0.12em;7543  color: #ffffff;7544}75457546.peach-panic-final-button {7547  width: 100%;7548  padding: 14px;7549  background: rgb(220, 38, 38);7550  border: none;7551  border-radius: 8px;7552  color: #ffffff;7553  font-size: 0.875rem;7554  font-weight: 700;7555  letter-spacing: 0.08em;7556  text-transform: uppercase;7557  cursor: pointer;7558  animation: peach-panic-pulse 2s ease-in-out infinite;7559}75607561.peach-settings-license {7562  margin-top: 10px;7563  padding-top: 10px;7564  border-top: 1px solid var(--peach-t3);7565}75667567.peach-settings-label {7568  font-size: 0.625rem;7569  letter-spacing: 0.08em;7570  color: var(--peach-t3);7571  display: block;7572  margin-bottom: 6px;7573}75747575.peach-settings-license-row {7576  display: flex;7577  align-items: center;7578  justify-content: space-between;7579  gap: 8px;7580}75817582.peach-settings-license-key {7583  font-family: 'IBM Plex Mono', monospace;7584  font-size: 0.75rem;7585  color: var(--peach-t0);7586  letter-spacing: 0.04em;7587  word-break: break-all;7588  flex: 1;7589  min-width: 0;7590}75917592.peach-settings-license-key--masked {7593  font-family: 'IBM Plex Mono', monospace;7594  font-size: 0.6rem;7595  color: var(--peach-t1);7596  letter-spacing: 0.18em;7597  user-select: none;7598}75997600.peach-settings-license-actions {7601  display: flex;7602  align-items: center;7603  gap: 2px;7604  flex-shrink: 0;7605}76067607.peach-settings-license-copy {7608  font-size: 0.6875rem;7609  color: var(--peach-accent);7610  background: transparent;7611  border: none;7612  cursor: pointer;7613  padding: 4px 8px;7614  border-radius: 4px;7615  flex-shrink: 0;7616  transition: opacity 150ms ease;7617}76187619.peach-settings-license-copy:hover {7620  opacity: 0.75;7621}76227623.peach-settings-license-toggle {7624  display: flex;7625  align-items: center;7626  justify-content: center;7627  background: transparent;7628  border: none;7629  cursor: pointer;7630  padding: 4px 6px;7631  border-radius: 4px;7632  color: var(--peach-t2);7633  transition: color 150ms ease;7634}76357636.peach-settings-license-toggle:hover {7637  color: var(--peach-t1);7638}76397640@keyframes peach-panic-pulse {7641  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7642  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7643}76447645[data-motion="reduce"] .peach-panic-final-button {7646  animation: none;7647}76487649/* Vault History — Settings → Vault sub-view */76507651.peach-history-list {7652  border: 1px solid var(--peach-border);7653  border-radius: 8px;7654  overflow: hidden;7655  margin: 8px 0 4px;7656}76577658.peach-history-row {7659  display: flex;7660  align-items: center;7661  justify-content: space-between;7662  padding: 9px 12px;7663  gap: 10px;7664  border-bottom: 1px solid var(--peach-border);7665}76667667.peach-history-row:last-child {7668  border-bottom: none;7669}76707671.peach-history-meta {7672  display: flex;7673  flex-direction: column;7674  gap: 2px;7675  min-width: 0;7676  flex: 1;7677}76787679.peach-history-time {7680  font-size: 0.75rem;7681  font-family: 'IBM Plex Mono', ui-monospace, monospace;7682  color: var(--peach-t0);7683  white-space: nowrap;7684  overflow: hidden;7685  text-overflow: ellipsis;7686}76877688.peach-history-sub {7689  font-size: 0.625rem;7690  color: var(--peach-t2);7691  letter-spacing: 0.06em;7692  text-transform: uppercase;7693  white-space: nowrap;7694  overflow: hidden;7695  text-overflow: ellipsis;7696}76977698.peach-history-btn {7699  flex-shrink: 0;7700  white-space: nowrap;7701  min-width: 56px;7702  text-align: center;7703}77047705.peach-history-btn.is-busy {7706  opacity: 0.65;7707}77087709.peach-history-footer {7710  font-size: 0.625rem;7711  color: var(--peach-t3);7712  letter-spacing: 0.05em;7713  text-align: right;7714  margin: 0;7715  padding: 2px 0 0;7716}77177718/* ── Context menu + swipe-copy flash ─────────────────────── */7719.peach-context-menu-backdrop {7720  position: fixed;7721  inset: 0;7722  background: rgba(0, 0, 0, 0.45);7723  z-index: 100;7724  display: flex;7725  align-items: flex-end;7726  justify-content: center;7727  animation: peach-ctx-fade 140ms ease both;7728}7729.peach-context-menu {7730  width: min(360px, calc(100vw - 24px));7731  margin-bottom: max(env(safe-area-inset-bottom), 12px);7732  background: var(--peach-bg);7733  border: 1px solid var(--peach-t3);7734  border-radius: 14px;7735  padding: 6px;7736  display: flex;7737  flex-direction: column;7738  gap: 2px;7739  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7740  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7741}7742@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7743@keyframes peach-ctx-rise {7744  from { transform: translateY(16px); opacity: 0; }7745  to   { transform: translateY(0);    opacity: 1; }7746}7747.peach-context-menu-item {7748  background: transparent;7749  color: var(--peach-t0);7750  border: 0;7751  border-radius: 10px;7752  padding: 12px 14px;7753  text-align: left;7754  font: inherit;7755  cursor: pointer;7756}7757.peach-context-menu-item:hover,7758.peach-context-menu-item:focus-visible {7759  background: var(--peach-t3);7760}7761.peach-context-menu-item--danger {7762  color: var(--peach-health-bad, #d96868);7763}7764.peach-context-menu-item--cancel {7765  color: var(--peach-t2);7766  margin-top: 4px;7767  border-top: 1px solid var(--peach-t3);7768  border-radius: 0 0 10px 10px;7769}77707771/* Swipe-to-copy flash */7772.peach-entry-row.is-copy-flash {7773  animation: peach-copy-flash 600ms ease both;7774}7775@keyframes peach-copy-flash {7776  0%   { background: transparent; }7777  20%  { background: rgba(217, 153, 51, 0.32); }7778  100% { background: transparent; }7779}77807781html { font-size: 16px; }77827783/* ── Recovery word entry ─────────────────────────────────────────── */7784.peach-lock-recover-link {7785  display: block;7786  width: 100%;7787  margin-top: 12px;7788  background: none;7789  border: none;7790  font-family: "IBM Plex Mono", monospace;7791  font-size: 0.625rem;7792  letter-spacing: 0.06em;7793  color: var(--peach-t2);7794  cursor: pointer;7795  text-align: center;7796  padding: 4px;7797  transition: color 120ms ease;7798}7799.peach-lock-recover-link:hover {7800  color: var(--peach-t0);7801}78027803.lock-screen--recovery {7804  display: flex;7805  flex-direction: column;7806  align-items: stretch;7807  padding: 12px 20px 24px;7808  overflow: hidden;7809}78107811.peach-recovery-nav {7812  display: flex;7813  align-items: center;7814  position: relative;7815  z-index: 1;7816  margin-bottom: 4px;7817}78187819/* Mask runes to the top decorative band only — keep inputs and the7820   bottom CTA button clear. The bottom of the popup is reserved for7821   submit buttons; rendering runes there overlaps the button glyph. */7822.peach-rune-background--recovery {7823  -webkit-mask-image: linear-gradient(7824    to bottom,7825    black 0px, black 85px,7826    transparent 110px,7827    transparent 100%7828  );7829  mask-image: linear-gradient(7830    to bottom,7831    black 0px, black 85px,7832    transparent 110px,7833    transparent 100%7834  );7835}78367837.peach-recovery-header {7838  text-align: center;7839  margin-bottom: 16px;7840  margin-top: 4px;7841}7842.peach-recovery-header .peach-onboarding-headline {7843  font-size: 1.25rem;7844  font-weight: 300;7845  letter-spacing: 0.02em;7846  margin: 0 0 4px;7847}7848.peach-recovery-header .peach-hint {7849  font-family: "IBM Plex Mono", monospace;7850  font-size: 0.625rem;7851  color: var(--peach-t2);7852  letter-spacing: 0.04em;7853  margin: 0;7854}78557856/* 12-word grid: 2 columns × 6 rows */7857.peach-recovery-grid {7858  display: grid;7859  grid-template-columns: repeat(2, 1fr);7860  gap: 12px 20px;7861  width: 100%;7862  margin-bottom: 0;7863}78647865.peach-recovery-word-slot {7866  display: flex;7867  align-items: center;7868  gap: 6px;7869  min-width: 0;7870}78717872.peach-recovery-word-index {7873  font-family: "IBM Plex Mono", monospace;7874  font-size: 0.5rem;7875  color: rgba(255, 255, 255, 0.35);7876  min-width: 14px;7877  flex-shrink: 0;7878  text-align: right;7879  letter-spacing: 0.04em;7880}78817882.peach-recovery-word-input {7883  flex: 1;7884  min-width: 0;7885  background: transparent;7886  border: none;7887  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7888  color: var(--peach-t0);7889  font-family: "IBM Plex Mono", monospace;7890  font-size: 0.6875rem;7891  letter-spacing: 0.06em;7892  padding: 5px 2px 4px;7893  outline: none;7894  text-transform: lowercase;7895  transition: border-color 120ms ease;7896}7897.peach-recovery-word-input::placeholder {7898  color: rgba(255, 255, 255, 0.18);7899}7900.peach-recovery-word-input:focus {7901  border-bottom-color: var(--peach-accent);7902}79037904.peach-recovery-submit {7905  width: 100%;7906  margin-top: auto;7907}79087909.peach-recovery-new-password-form {7910  width: 100%;7911  display: flex;7912  flex-direction: column;7913  gap: 16px;7914  margin-bottom: 8px;7915}7916.peach-recovery-new-password-form .peach-newvault-field {7917  display: flex;7918  flex-direction: column;7919  gap: 4px;7920}79217922/* ── Recovery words display (post-create) ────────────────────────── */7923.lock-screen--recovery-display {7924  display: flex;7925  flex-direction: column;7926  align-items: stretch;7927  padding: 0 20px 20px;7928  min-height: 0;7929  overflow-y: auto;7930}79317932.peach-recovery-words-display {7933  width: 100%;7934  margin-bottom: 16px;7935  border: 1px solid var(--peach-t3);7936  border-radius: 8px;7937  padding: 12px 14px;7938  background: rgba(245, 240, 234, 0.04);7939}79407941.peach-recovery-words-label {7942  font-family: "IBM Plex Mono", monospace;7943  font-size: 0.5rem;7944  letter-spacing: 0.08em;7945  color: var(--peach-t2);7946  text-transform: uppercase;7947  margin-bottom: 10px;7948}79497950.peach-recovery-word-list {7951  list-style: none;7952  margin: 0;7953  padding: 0;7954  display: grid;7955  grid-template-columns: repeat(2, 1fr);7956  gap: 6px 16px;7957}79587959.peach-recovery-word-item {7960  display: flex;7961  align-items: baseline;7962  gap: 5px;7963}79647965.peach-recovery-word-num {7966  font-family: "IBM Plex Mono", monospace;7967  font-size: 0.5rem;7968  color: var(--peach-t2);7969  width: 14px;7970  flex: 0 0 14px;7971  text-align: right;7972  letter-spacing: 0.04em;7973  font-variant-numeric: tabular-nums;7974}79757976.peach-recovery-download-btn {7977  display: block;7978  margin: 10px auto 0;7979  padding: 4px 10px;7980  background: transparent;7981  border: 1px solid var(--peach-border);7982  border-radius: 6px;7983  color: var(--peach-t2);7984  font-family: "IBM Plex Mono", monospace;7985  font-size: 0.5625rem;7986  letter-spacing: 0.06em;7987  text-transform: lowercase;7988  cursor: pointer;7989  transition: border-color 0.15s, color 0.15s;7990}79917992.peach-recovery-download-btn:hover {7993  border-color: var(--peach-accent);7994  color: var(--peach-t0);7995}79967997.peach-recovery-word-text {7998  font-family: "IBM Plex Mono", monospace;7999  font-size: 0.6875rem;8000  letter-spacing: 0.06em;8001  color: var(--peach-t0);8002  text-transform: lowercase;8003}80048005.peach-hint--warning {8006  color: var(--peach-accent);8007  font-style: italic;8008}8009.peach-hint--success {8010  color: var(--peach-t2);8011  font-family: "IBM Plex Mono", monospace;8012  font-size: 0.625rem;8013  letter-spacing: 0.06em;8014}80158016/* Confirmation step */8017.peach-recovery-confirm {8018  width: 100%;8019  flex: 1;8020  display: flex;8021  flex-direction: column;8022}8023.peach-recovery-confirm-label {8024  font-family: "IBM Plex Mono", monospace;8025  font-size: 0.5625rem;8026  letter-spacing: 0.04em;8027  color: var(--peach-t2);8028  text-align: center;8029  margin: 0 0 12px;8030}8031.peach-recovery-confirm-fields {8032  display: flex;8033  flex-direction: column;8034  gap: 14px;8035  margin-bottom: 10px;8036}8037.peach-recovery-confirm-field {8038  display: flex;8039  align-items: center;8040  gap: 8px;8041}8042.peach-recovery-confirm-num {8043  font-family: "IBM Plex Mono", monospace;8044  font-size: 0.5rem;8045  color: var(--peach-t2);8046  min-width: 44px;8047  letter-spacing: 0.04em;8048}8049.peach-recovery-confirm-input {8050  flex: 1;8051  background: transparent;8052  border: none;8053  border-bottom: 1px solid var(--peach-t3);8054  color: var(--peach-t0);8055  font-family: "IBM Plex Mono", monospace;8056  font-size: 0.6875rem;8057  letter-spacing: 0.06em;8058  padding: 4px 2px 3px;8059  outline: none;8060  text-transform: lowercase;8061  transition: border-color 120ms ease;8062}8063.peach-recovery-confirm-input:focus {8064  border-bottom-color: var(--peach-accent);8065}8066.peach-recovery-confirm-input:disabled {8067  opacity: 0.4;8068  cursor: not-allowed;8069}8070.peach-recovery-confirm-btn {8071  width: 100%;8072  margin-top: auto;8073}80748075/* ============================================================8076   Sync info sheet8077   ============================================================ */80788079.peach-sync-info-backdrop {8080  position: fixed;8081  inset: 0;8082  z-index: 200;8083  background: rgba(0, 0, 0, 0.55);8084  display: flex;8085  align-items: flex-end;8086  animation: peach-fade-in 200ms ease forwards;8087}80888089@keyframes peach-fade-in {8090  from { opacity: 0; }8091  to   { opacity: 1; }8092}80938094.peach-sync-info-sheet {8095  width: 100%;8096  background: var(--peach-bg-card, var(--peach-bg));8097  border-top-left-radius: 20px;8098  border-top-right-radius: 20px;8099  padding: 12px 24px 32px;8100  display: flex;8101  flex-direction: column;8102  gap: 20px;8103  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;8104}81058106@keyframes peach-sheet-up {8107  from { transform: translateY(100%); }8108  to   { transform: translateY(0); }8109}81108111.peach-sync-info-handle {8112  width: 36px;8113  height: 4px;8114  border-radius: 2px;8115  background: var(--peach-border);8116  margin: 0 auto 4px;8117  flex-shrink: 0;8118}81198120.peach-sync-info-title {8121  font-family: 'Cormorant Garamond', serif;8122  font-style: italic;8123  font-size: 26px;8124  font-weight: 600;8125  color: var(--peach-t0);8126  margin: 0;8127  line-height: 1.2;8128}81298130.peach-sync-info-body {8131  display: flex;8132  flex-direction: column;8133  gap: 14px;8134}81358136.peach-sync-info-point {8137  display: flex;8138  gap: 12px;8139  align-items: flex-start;8140  font-size: 14px;8141  color: var(--peach-t2);8142  line-height: 1.6;8143  margin: 0;8144}81458146.peach-sync-info-icon {8147  color: var(--peach-accent);8148  font-size: 16px;8149  flex-shrink: 0;8150  margin-top: 1px;8151}81528153.peach-sync-info-actions {8154  display: flex;8155  flex-direction: column;8156  gap: 12px;8157  margin-top: 4px;8158}81598160.peach-sync-info-pro-link {8161  background: none;8162  border: none;8163  font-size: 13px;8164  color: var(--peach-t3);8165  cursor: pointer;8166  padding: 0;8167  font-family: inherit;8168  text-align: center;8169  transition: color 150ms ease;8170}81718172.peach-sync-info-pro-link:hover {8173  color: var(--peach-accent);8174}81758176.peach-btn--full {8177  width: 100%;8178}81798180/* ── Sync screen ── */81818182.peach-sync-coming-soon {8183  display: flex;8184  align-items: flex-start;8185  gap: 10px;8186  padding: 12px 14px;8187  background: var(--peach-s1);8188  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8189  border-radius: 10px;8190}8191.peach-sync-coming-soon__icon {8192  flex-shrink: 0;8193  color: var(--peach-accent);8194  margin-top: 1px;8195  line-height: 0;8196}8197.peach-sync-coming-soon__title {8198  font-family: 'Cormorant Garamond', serif;8199  font-weight: 500;8200  font-size: 13px;8201  color: var(--peach-accent);8202  margin: 0 0 5px;8203  line-height: 1.3;8204}8205.peach-sync-coming-soon__body {8206  font-size: 12px;8207  color: var(--peach-t1);8208  line-height: 1.55;8209  margin: 0;8210}82118212.peach-sync-screen {8213  display: flex;8214  flex-direction: column;8215  height: 100%;8216}82178218.peach-sync-content {8219  flex: 1;8220  overflow-y: auto;8221  padding: 24px 20px 40px;8222  display: flex;8223  flex-direction: column;8224  gap: 24px;8225}82268227/* Intro (State A) */8228.peach-sync-headline {8229  font-family: 'Cormorant Garamond', serif;8230  font-style: italic;8231  font-size: 28px;8232  font-weight: 600;8233  color: var(--peach-t0);8234  margin: 0 0 10px;8235  line-height: 1.2;8236}82378238.peach-sync-intro-body {8239  font-size: 14px;8240  color: var(--peach-t1);8241  line-height: 1.6;8242  margin: 0;8243}82448245.peach-sync-pro-note {8246  display: flex;8247  flex-direction: column;8248  gap: 8px;8249  background: var(--peach-t3);8250  border-radius: 10px;8251  padding: 12px 14px;8252}82538254.peach-sync-pro-note-text {8255  font-size: 12px;8256  color: var(--peach-t2);8257  line-height: 1.5;8258  margin: 0;8259}82608261.peach-sync-pro-link {8262  background: none;8263  border: none;8264  font-size: 12px;8265  color: var(--peach-accent);8266  cursor: pointer;8267  padding: 0;8268  font-family: inherit;8269  text-align: left;8270}82718272/* Status (State C) */8273.peach-sync-status {8274  padding: 12px 0;8275  border-bottom: 1px solid var(--peach-border);8276}82778278.peach-sync-status-row {8279  display: flex;8280  align-items: center;8281  gap: 8px;8282}82838284.peach-sync-dot {8285  width: 7px;8286  height: 7px;8287  border-radius: 50%;8288  flex-shrink: 0;8289}82908291.peach-sync-dot--green { background: var(--peach-health-ok); }8292.peach-sync-dot--amber { background: var(--peach-accent); }82938294.peach-sync-status-text {8295  font-family: 'IBM Plex Mono', monospace;8296  font-size: 11px;8297  color: var(--peach-t2);8298}82998300/* Paired devices */8301.peach-sync-section {8302  display: flex;8303  flex-direction: column;8304  gap: 2px;8305}83068307.peach-sync-section-label {8308  font-family: 'IBM Plex Mono', monospace;8309  font-size: 10px;8310  letter-spacing: 0.1em;8311  color: var(--peach-t3);8312  margin: 0 0 10px;8313}83148315.peach-sync-device-row {8316  display: flex;8317  justify-content: space-between;8318  align-items: baseline;8319  padding: 10px 0;8320  border-bottom: 1px solid var(--peach-border);8321  gap: 12px;8322}83238324.peach-sync-device-name {8325  font-size: 14px;8326  color: var(--peach-t1);8327}83288329.peach-sync-device-meta {8330  font-family: 'IBM Plex Mono', monospace;8331  font-size: 11px;8332  color: var(--peach-t3);8333  white-space: nowrap;8334}83358336.peach-sync-hub-note {8337  padding: 14px 16px;8338  border: 1px solid var(--peach-border);8339  border-radius: 10px;8340  display: flex;8341  flex-direction: column;8342  gap: 6px;8343  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8344}83458346.peach-sync-hub-note-title {8347  font-size: 13px;8348  font-weight: 600;8349  color: var(--peach-t0);8350  margin: 0;8351}83528353.peach-sync-hub-note-body {8354  font-size: 12px;8355  color: var(--peach-t2);8356  line-height: 1.6;8357  margin: 0;8358}83598360/* Action buttons */8361.peach-sync-actions {8362  display: flex;8363  gap: 10px;8364  flex-wrap: wrap;8365}83668367/* Upgrade prompt (State B) */8368.peach-sync-upgrade {8369  display: flex;8370  flex-direction: column;8371  gap: 12px;8372  padding: 16px;8373  border: 1px solid var(--peach-border);8374  border-radius: 10px;8375}83768377.peach-sync-upgrade-text {8378  font-size: 13px;8379  color: var(--peach-t2);8380  line-height: 1.6;8381  margin: 0;8382}83838384/* Network note */8385.peach-sync-network-note {8386  font-size: 12px;8387  color: var(--peach-t3);8388  line-height: 1.6;8389  margin: 0;8390}83918392/* Advanced */8393.peach-sync-advanced {8394  margin-top: auto;8395  padding-top: 16px;8396  border-top: 1px solid var(--peach-border);8397}83988399.peach-sync-advanced-toggle {8400  display: flex;8401  align-items: center;8402  gap: 8px;8403  background: none;8404  border: none;8405  font-family: 'IBM Plex Mono', monospace;8406  font-size: 11px;8407  letter-spacing: 0.08em;8408  color: var(--peach-t3);8409  cursor: pointer;8410  padding: 0;8411  text-transform: uppercase;8412}84138414.peach-sync-advanced-chevron {8415  display: inline-block;8416  transition: transform 200ms ease;8417  font-size: 10px;8418}84198420.peach-sync-advanced-chevron.is-open {8421  transform: rotate(90deg);8422}84238424.peach-sync-advanced-content {8425  margin-top: 14px;8426}84278428.peach-sync-advanced-row {8429  display: flex;8430  justify-content: space-between;8431  align-items: center;8432  gap: 16px;8433}84348435.peach-sync-advanced-title {8436  font-size: 14px;8437  color: var(--peach-t1);8438  margin: 0 0 2px;8439}84408441.peach-sync-advanced-subtitle {8442  font-size: 12px;8443  color: var(--peach-t3);8444  margin: 0;8445  line-height: 1.5;8446}84478448/* ── Add Device — Android scan tabs ─────────────────────────────────────── */84498450.peach-pairing-tabs {8451  display: flex;8452  border: 1px solid var(--peach-border);8453  border-radius: 8px;8454  overflow: hidden;8455  margin-bottom: 4px;8456}84578458.peach-pairing-tab {8459  flex: 1;8460  padding: 10px 0;8461  background: none;8462  border: none;8463  font-family: 'IBM Plex Mono', monospace;8464  font-size: 11px;8465  letter-spacing: 0.06em;8466  color: var(--peach-t2);8467  cursor: pointer;8468  transition: background 150ms, color 150ms;8469}84708471.peach-pairing-tab.is-active {8472  background: var(--peach-accent);8473  color: #fff;8474  font-weight: 600;8475}84768477.peach-pairing-tab:not(.is-active):active {8478  background: var(--peach-border);8479}84808481/* Camera view */8482.peach-pairing-camera-container {8483  position: relative;8484  width: 100%;8485  aspect-ratio: 1;8486  border-radius: 12px;8487  overflow: hidden;8488  background: #000;8489  flex-shrink: 0;8490}84918492.peach-pairing-video {8493  width: 100%;8494  height: 100%;8495  object-fit: cover;8496}84978498.peach-pairing-scan-frame {8499  position: absolute;8500  top: 50%;8501  left: 50%;8502  transform: translate(-50%, -50%);8503  width: 60%;8504  aspect-ratio: 1;8505  border: 2px solid var(--peach-accent);8506  border-radius: 8px;8507  pointer-events: none;8508}85098510/* ── Notes Mode ── */85118512/* Overlay that crossfades over the vault */8513.peach-notes-overlay {8514  position: fixed;8515  inset: 0;8516  z-index: 90;8517  opacity: 0;8518  pointer-events: none;8519  animation: peach-mode-in 220ms ease-in forwards;8520}85218522.peach-notes-overlay.is-visible {8523  opacity: 1;8524  pointer-events: auto;8525}85268527@keyframes peach-mode-in {8528  from { opacity: 0; }8529  to   { opacity: 1; }8530}85318532/* Top-level notes surface */8533.peach-notes-mode {8534  position: absolute;8535  inset: 0;8536  background: var(--peach-bg);8537  display: flex;8538  flex-direction: column;8539}85408541/* Rune canvas positioned behind content */8542.peach-note-rune-canvas {8543  position: absolute;8544  inset: 0;8545  width: 100%;8546  height: 100%;8547  pointer-events: none;8548  z-index: 0;8549}85508551/* TOC wrapper */8552.peach-notes-toc-wrapper {8553  position: absolute;8554  inset: 0;8555  z-index: 1;8556  opacity: 1;8557  pointer-events: auto;8558  transition: opacity 200ms ease;8559}85608561.peach-notes-toc-wrapper.is-hidden {8562  opacity: 0;8563  pointer-events: none;8564}85658566/* Editor wrapper */8567.peach-notes-editor-wrapper {8568  position: absolute;8569  inset: 0;8570  z-index: 2;8571  opacity: 0;8572  pointer-events: none;8573  transition: opacity 200ms ease;8574}85758576.peach-notes-editor-wrapper.is-visible {8577  opacity: 1;8578  pointer-events: auto;8579}85808581/* TOC inner */8582.peach-notes-toc {8583  position: relative;8584  display: flex;8585  flex-direction: column;8586  height: 100%;8587  padding-top: env(safe-area-inset-top, 0px);8588  padding-bottom: env(safe-area-inset-bottom, 0px);8589}85908591/* Shared header */8592.peach-notes-header {8593  display: flex;8594  align-items: center;8595  padding: 12px 16px;8596  gap: 12px;8597  flex-shrink: 0;8598  min-height: 52px;8599  position: relative;8600  z-index: 2;8601}86028603.peach-notes-back {8604  font-size: 22px;8605  color: var(--peach-t2);8606  background: none;8607  border: none;8608  padding: 4px;8609  cursor: pointer;8610  line-height: 1;8611  flex-shrink: 0;8612  transition: color 150ms ease;8613  -webkit-tap-highlight-color: transparent;8614}86158616.peach-notes-back:active { color: var(--peach-t0); }86178618.peach-notes-header-title {8619  flex: 1;8620  font-family: 'Cormorant Garamond', serif;8621  font-style: italic;8622  font-size: 22px;8623  color: var(--peach-t0);8624  text-align: center;8625}86268627.peach-notes-header-title.is-breadcrumb {8628  font-family: 'IBM Plex Mono', monospace;8629  font-style: normal;8630  font-size: 11px;8631  color: var(--peach-t3);8632  letter-spacing: 0.08em;8633  text-transform: uppercase;8634  cursor: pointer;8635}86368637.peach-notes-header-actions {8638  display: flex;8639  gap: 8px;8640  flex-shrink: 0;8641}86428643.peach-notes-header-btn {8644  width: 36px;8645  height: 36px;8646  display: flex;8647  align-items: center;8648  justify-content: center;8649  background: none;8650  border: none;8651  color: var(--peach-t2);8652  cursor: pointer;8653  border-radius: 8px;8654  font-size: 16px;8655  transition: color 150ms ease, background 150ms ease;8656  -webkit-tap-highlight-color: transparent;8657}86588659.peach-notes-header-btn:active {8660  background: rgba(255,255,255,0.06);8661  color: var(--peach-t0);8662}86638664/* Inline search bar */8665.peach-notes-search-input {8666  flex: 1;8667  background: none;8668  border: none;8669  outline: none;8670  font-family: 'IBM Plex Mono', monospace;8671  font-size: 13px;8672  color: var(--peach-t0);8673  padding: 4px 0;8674  letter-spacing: 0.02em;8675}86768677.peach-notes-search-input::placeholder {8678  color: var(--peach-t3);8679}86808681/* TOC list */8682.peach-notes-list-container {8683  flex: 1;8684  overflow-y: auto;8685  overflow-x: hidden;8686  scrollbar-width: none;8687  -webkit-overflow-scrolling: touch;8688  overscroll-behavior: contain;8689  position: relative;8690  z-index: 1;8691}86928693.peach-notes-list-container::-webkit-scrollbar { display: none; }86948695/* Note row */8696.peach-note-row {8697  position: relative;8698  display: grid;8699  grid-template-columns: 44px 8px 1fr 8px auto;8700  align-items: center;8701  min-height: 72px;8702  padding: 16px 20px;8703  border-bottom: 0.5px solid var(--peach-border);8704  cursor: pointer;8705  overflow: hidden;8706  touch-action: pan-y;8707  user-select: none;8708  -webkit-user-select: none;8709  -webkit-tap-highlight-color: transparent;8710}87118712.peach-note-row:first-child {8713  border-top: 0.5px solid var(--peach-border);8714}87158716.peach-note-row:active {8717  background: rgba(255,255,255,0.02);8718}87198720.peach-note-numeral {8721  font-family: 'Cormorant Garamond', serif;8722  font-style: italic;8723  font-size: 15px;8724  color: var(--peach-accent);8725  text-align: right;8726  line-height: 1;8727  flex-shrink: 0;8728}87298730.peach-note-title-gap { /* grid spacer */ }87318732.peach-note-title {8733  font-family: 'Cormorant Garamond', serif;8734  font-style: italic;8735  font-size: 18px;8736  color: var(--peach-t0);8737  line-height: 1.3;8738  min-width: 0;8739  overflow-wrap: break-word;8740}87418742.peach-note-title-match {8743  color: var(--peach-accent);8744}87458746.peach-note-date {8747  font-family: 'IBM Plex Mono', monospace;8748  font-size: 11px;8749  color: var(--peach-t2);8750  white-space: nowrap;8751  text-align: right;8752  flex-shrink: 0;8753  grid-column: 5;8754}87558756/* Swipe underlays */8757.peach-note-row-underlay {8758  position: absolute;8759  inset: 0;8760  display: flex;8761  align-items: center;8762  padding: 0 24px;8763  font-family: 'IBM Plex Mono', monospace;8764  font-size: 11px;8765  letter-spacing: 0.1em;8766  pointer-events: none;8767  z-index: 0;8768}87698770.peach-note-row-underlay--delete {8771  background: #8B2020;8772  color: rgba(255,255,255,0.9);8773  justify-content: flex-end;8774}87758776.peach-note-row-underlay--archive {8777  background: var(--peach-accent);8778  color: #0C0A06;8779  justify-content: flex-start;8780}87818782/* Delete confirm strip */8783.peach-note-delete-confirm {8784  position: absolute;8785  inset: 0;8786  background: var(--peach-bg);8787  display: flex;8788  align-items: center;8789  gap: 12px;8790  padding: 0 20px;8791  font-family: 'IBM Plex Mono', monospace;8792  font-size: 11px;8793  color: var(--peach-t1);8794  letter-spacing: 0.04em;8795  animation: peach-delete-confirm-in 150ms ease both;8796  z-index: 10;8797}87988799@keyframes peach-delete-confirm-in {8800  from { opacity: 0; }8801  to   { opacity: 1; }8802}88038804.peach-note-delete-confirm-btn {8805  background: #8B2020;8806  color: rgba(255,255,255,0.9);8807  border: none;8808  border-radius: 6px;8809  padding: 4px 10px;8810  font-family: 'IBM Plex Mono', monospace;8811  font-size: 10px;8812  cursor: pointer;8813  letter-spacing: 0.06em;8814}88158816.peach-note-delete-cancel-btn {8817  background: none;8818  border: none;8819  color: var(--peach-t3);8820  font-family: 'IBM Plex Mono', monospace;8821  font-size: 10px;8822  cursor: pointer;8823  letter-spacing: 0.06em;8824  padding: 4px 6px;8825}88268827/* + New note button */8828.peach-notes-new-btn {8829  font-family: 'IBM Plex Mono', monospace;8830  font-size: 12px;8831  color: var(--peach-t3);8832  text-align: center;8833  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8834  background: none;8835  border: none;8836  width: 100%;8837  cursor: pointer;8838  letter-spacing: 0.04em;8839  transition: color 150ms ease;8840  -webkit-tap-highlight-color: transparent;8841}88428843.peach-notes-new-btn:active { color: var(--peach-accent); }88448845/* Empty state */8846.peach-notes-empty {8847  display: flex;8848  flex-direction: column;8849  align-items: center;8850  justify-content: center;8851  flex: 1;8852  padding: 48px 32px;8853  gap: 16px;8854}88558856.peach-notes-empty-text {8857  font-family: 'Cormorant Garamond', serif;8858  font-style: italic;8859  font-size: 20px;8860  color: var(--peach-t3);8861  text-align: center;8862  margin: 0;8863  line-height: 1.4;8864  white-space: pre-line;8865}88668867/* ── Editor surface ── */88688869.peach-note-editor-surface {8870  position: absolute;8871  inset: 0;8872  background: var(--peach-bg);8873  display: flex;8874  flex-direction: column;8875  padding-top: env(safe-area-inset-top, 0px);8876}88778878.peach-note-editor-scroll {8879  flex: 1;8880  overflow-y: auto;8881  overflow-x: hidden;8882  scrollbar-width: none;8883  -webkit-overflow-scrolling: touch;8884  padding: 0 24px 120px;8885  position: relative;8886  z-index: 1;8887}88888889.peach-note-editor-scroll::-webkit-scrollbar { display: none; }88908891/* Desktop toolbar (always visible above body) */8892.peach-note-toolbar-desktop-inline {8893  display: flex;8894  align-items: center;8895  gap: 2px;8896  padding: 6px 0 12px;8897  margin-bottom: 4px;8898  border-bottom: 0.5px solid var(--peach-border);8899}89008901/* Title field */8902.peach-note-title-field {8903  font-family: 'Cormorant Garamond', serif;8904  font-style: italic;8905  font-size: 32px;8906  font-weight: 600;8907  color: var(--peach-t0);8908  line-height: 1.2;8909  padding: 8px 0 0;8910  outline: none;8911  min-height: 44px;8912  word-break: break-word;8913  position: relative;8914  z-index: 1;8915}89168917.peach-note-title-field:empty::before {8918  content: attr(data-placeholder);8919  color: var(--peach-t3);8920  pointer-events: none;8921}89228923/* Hairline separator */8924.peach-note-hairline {8925  height: 0.5px;8926  background: var(--peach-border);8927  margin: 12px 0 20px;8928  position: relative;8929  z-index: 1;8930}89318932/* Body field */8933.peach-note-body-field {8934  font-family: 'DM Sans', sans-serif;8935  font-size: 16px;8936  color: var(--peach-t0);8937  line-height: 1.85;8938  padding: 0;8939  outline: none;8940  min-height: 240px;8941  word-break: break-word;8942  position: relative;8943  z-index: 1;8944}89458946.peach-note-body-field:empty::before {8947  content: attr(data-placeholder);8948  color: var(--peach-t3);8949  font-style: italic;8950  pointer-events: none;8951}89528953.peach-note-body-field h2 {8954  font-family: 'Cormorant Garamond', serif;8955  font-style: italic;8956  font-size: 22px;8957  font-weight: 600;8958  color: var(--peach-t0);8959  margin: 20px 0 8px;8960}89618962.peach-note-body-field blockquote {8963  border-left: 2px solid var(--peach-accent);8964  margin: 12px 0;8965  padding-left: 16px;8966  color: var(--peach-t1);8967  font-style: italic;8968}89698970.peach-note-body-field ul,8971.peach-note-body-field ol {8972  padding-left: 20px;8973  margin: 8px 0;8974}89758976.peach-note-body-field li {8977  margin: 4px 0;8978}89798980.peach-note-body-field hr {8981  border: none;8982  border-top: 0.5px solid var(--peach-border);8983  margin: 16px 0;8984}89858986/* Saved indicator */8987.peach-note-saved-indicator {8988  font-family: 'IBM Plex Mono', monospace;8989  font-size: 11px;8990  color: var(--peach-t3);8991  letter-spacing: 0.04em;8992  text-align: right;8993  padding: 6px 24px;8994  flex-shrink: 0;8995  transition: opacity 300ms ease;8996  pointer-events: none;8997  position: relative;8998  z-index: 1;8999}90009001/* Mobile keyboard toolbar */9002.peach-note-toolbar-mobile {9003  display: flex;9004  align-items: center;9005  padding: 8px 16px;9006  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));9007  background: var(--peach-bg);9008  border-top: 0.5px solid var(--peach-border);9009  gap: 4px;9010  flex-shrink: 0;9011  position: relative;9012  z-index: 10;9013}90149015.peach-note-toolbar-btn {9016  min-width: 36px;9017  height: 36px;9018  display: flex;9019  align-items: center;9020  justify-content: center;9021  background: none;9022  border: none;9023  border-radius: 8px;9024  cursor: pointer;9025  font-size: 14px;9026  color: var(--peach-t1);9027  font-family: 'DM Sans', sans-serif;9028  font-weight: 600;9029  transition: background 100ms ease, color 100ms ease;9030  -webkit-tap-highlight-color: transparent;9031}90329033.peach-note-toolbar-btn--italic { font-style: italic; }9034.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }9035.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }90369037.peach-note-toolbar-divider {9038  width: 0.5px;9039  height: 20px;9040  background: var(--peach-border);9041  margin: 0 4px;9042  flex-shrink: 0;9043}90449045.peach-note-toolbar-spacer { flex: 1; }90469047/* Desktop: larger headline in TOC */9048@media (min-width: 400px) {9049  .peach-notes-header-title:not(.is-breadcrumb) {9050    font-size: 32px;9051  }90529053  .peach-note-row {9054    min-height: 64px;9055    padding: 14px 16px;9056  }9057}90589059/* Flying title — shared element during expansion/collapse */90609061/* ─── Light theme overrides ───────────────────────────────────────────────9062   Tokens that cannot be expressed as variable substitutions — hardcoded9063   context-specific values that need separate light-mode rules. */90649065/* Settings section headers: use text-label (#79766F) per restoration brief —9066   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY9067   presence without fighting the light parchment background. */9068.light .peach-settings-sub-label,9069[data-theme="light"] .peach-settings-sub-label,9070.light .peach-settings-nav-label,9071[data-theme="light"] .peach-settings-nav-label {9072  color: #79766F;9073}90749075/* Secondary action buttons (ghost / subtle): filled with input-well surface9076   so they read as recessed against the parchment card background. */9077.light .peach-btn--ghost:not(.peach-icon-btn),9078[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {9079  background: #EEE7DD;9080  border-color: #DDD5CB;9081  color: #1A1208;9082}9083.light .peach-icon-btn,9084[data-theme="light"] .peach-icon-btn {9085  background: transparent;9086  border-color: transparent;9087}9088.light .peach-btn--subtle,9089[data-theme="light"] .peach-btn--subtle {9090  background: #EEE7DD;9091  border-color: #DDD5CB;9092}90939094/* Wide secondary action button on the lock screen — override the9095   hardcoded dark-mode rgba values with warm parchment equivalents. */9096.light .peach-lock-secondary,9097[data-theme="light"] .peach-lock-secondary {9098  background: #EEE7DD;9099  border-color: #DDD5CB;9100  color: #1A1208;9101}9102.light .peach-lock-secondary:hover,9103[data-theme="light"] .peach-lock-secondary:hover {9104  background: #F0E9DF;9105}91069107/* Entry row hover: bg-row lifts the row above the card surface. */9108.light .peach-entry-row:hover,9109[data-theme="light"] .peach-entry-row:hover {9110  background: #F2EBE1;9111}9112.light .peach-entry-row.is-active,9113[data-theme="light"] .peach-entry-row.is-active {9114  background: #F2EBE1;9115}9116.light .peach-entry-row.is-selected,9117[data-theme="light"] .peach-entry-row.is-selected {9118  background: #F5EDE2;9119}91209121/* ──────────────────────────────────────────────────────────────────────────9122   Chirp pairing flow — bird-stage animation (Phase 1)9123   See src/popup/components/ChirpPairingFlow.tsx and the brief §6.2.9124   Three-act animation gated on the [data-phase] attribute of9125   .peach-chirp-pair; child layers (birds, chirp arcs, flight wave, dot)9126   each react via either pose class or visibility flag.9127   Tokens: accent surfaces use var(--peach-accent); bird illustration9128   colours are baked into the SVG per the brand-peach exception in §3.1.9129   ────────────────────────────────────────────────────────────────────── */91309131.peach-chirp-pair {9132  position: absolute;9133  inset: 0;9134  z-index: 3;9135  display: flex;9136  flex-direction: column;9137  padding: 14px 12px 12px;9138  width: 100%;9139  box-sizing: border-box;9140  gap: 0;9141  background:9142    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9143    var(--peach-bg);9144  color: var(--peach-t0);9145  overflow-y: auto;9146  overflow-x: hidden;9147  scrollbar-width: none;9148  isolation: isolate;9149  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9150}9151@keyframes peach-chirp-overlay-in {9152  from { opacity: 0; transform: translateY(8px); }9153  to   { opacity: 1; transform: translateY(0); }9154}9155.peach-chirp-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }9156.peach-chirp-pair::before {9157  content: '';9158  position: absolute;9159  inset: 0;9160  border-radius: inherit;9161  pointer-events: none;9162  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9163  z-index: 0;9164}9165.peach-chirp-pair > * { position: relative; z-index: 1; }91669167/* Header --------------------------------------------------------------- */9168.peach-chirp-head {9169  display: flex; align-items: center; gap: 10px;9170}9171.peach-chirp-back {9172  width: 32px; height: 32px;9173  display: inline-flex; align-items: center; justify-content: center;9174  background: transparent;9175  border: none;9176  border-radius: 8px;9177  color: var(--peach-t1);9178  cursor: pointer;9179  transition: color 0.15s ease, box-shadow 0.15s ease;9180}9181.peach-chirp-back:hover {9182  color: var(--peach-accent);9183  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9184}9185.peach-chirp-title {9186  font-family: var(--font-display, Georgia, serif);9187  font-style: italic;9188  font-size: 24px;9189  font-weight: 500;9190  letter-spacing: 0.005em;9191  color: var(--peach-t0);9192  line-height: 1;9193}9194.peach-chirp-head-spacer { flex: 1; }91959196/* Chip row ------------------------------------------------------------- */9197.peach-chirp-chip-row {9198  display: flex;9199  align-items: center;9200  justify-content: flex-start;9201  margin-top: 12px;9202}9203.peach-chirp-chip {9204  display: inline-flex; align-items: center; gap: 8px;9205  padding: 5px 10px 5px 8px;9206  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9207  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9208  border-radius: 999px;9209  font-family: var(--peach-mono, ui-monospace, monospace);9210  font-size: 11px;9211  letter-spacing: 0.04em;9212  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9213}9214.peach-chirp-chip-dot {9215  width: 6px; height: 6px; border-radius: 50%;9216  background: var(--peach-accent);9217  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9218}9219.peach-chirp-chip[data-phase="paired"] {9220  background: color-mix(in srgb, #4f9eda 12%, transparent);9221  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9222  color: #76b6e8;9223}9224.peach-chirp-chip[data-phase="paired"] .peach-chirp-chip-dot {9225  background: #76b6e8;9226  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9227}9228.peach-chirp-chip[data-phase="timeout"],9229.peach-chirp-chip[data-phase="mic_denied"],9230.peach-chirp-chip[data-phase="version_mismatch"],9231.peach-chirp-chip[data-phase="handshake_failed"] {9232  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9233  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9234  color: var(--peach-warn, #d29257);9235}9236.peach-chirp-chip[data-phase="timeout"] .peach-chirp-chip-dot,9237.peach-chirp-chip[data-phase="mic_denied"] .peach-chirp-chip-dot,9238.peach-chirp-chip[data-phase="version_mismatch"] .peach-chirp-chip-dot,9239.peach-chirp-chip[data-phase="handshake_failed"] .peach-chirp-chip-dot {9240  background: var(--peach-warn, #d29257);9241  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9242}92439244/* Bird stage ----------------------------------------------------------- */9245.peach-chirp-stage {9246  position: relative;9247  margin: 14px 0 8px;9248  height: 180px;9249  border-radius: 12px;9250  background:9251    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9252    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),9253    color-mix(in srgb, var(--peach-bg) 92%, #000);9254  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);9255  overflow: hidden;9256  isolation: isolate;9257}9258.peach-chirp-stage::after {9259  content: '';9260  position: absolute;9261  left: 12%; right: 12%;9262  bottom: 36px;9263  height: 1px;9264  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9265}92669267.peach-chirp-bird-slot {9268  position: absolute;9269  bottom: 8px;9270  width: 100px;9271  height: 110px;9272  display: flex;9273  align-items: flex-end;9274  justify-content: center;9275}9276.peach-chirp-bird-slot-desktop { left: 28px; }9277.peach-chirp-bird-slot-mobile { right: 28px; }92789279/* Mobile bird hops in from the right when handshake begins */9280.peach-chirp-bird-slot-mobile {9281  opacity: 1;9282  transform: translateX(-6px);9283  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9284}9285.peach-chirp-stage.act-listening .peach-chirp-bird-slot-mobile,9286.peach-chirp-stage.act-chirping .peach-chirp-bird-slot-mobile,9287.peach-chirp-stage.act-idle .peach-chirp-bird-slot-mobile {9288  opacity: 0;9289  transform: translateX(60px) rotate(8deg);9290}9291.peach-chirp-stage.act-handshake .peach-chirp-bird-slot-desktop,9292.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop {9293  transform: translateX(6px);9294  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9295}92969297/* Paired: both birds bob together */9298.peach-chirp-stage.act-paired .peach-chirp-bird-slot {9299  animation: peach-chirp-happy-bob 1.2s ease-in-out infinite;9300}9301.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { animation-delay: 0.2s; }9302.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop { --bb-x: 6px; }9303.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { --bb-x: -6px; }9304@keyframes peach-chirp-happy-bob {9305  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9306  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9307}93089309/* Bird internal -------------------------------------------------------- */9310.peach-chirp-bird {9311  width: 108px;9312  height: 108px;9313  transform-origin: 50% 95%;9314}9315.peach-chirp-bird svg { width: 100%; height: 100%; overflow: visible; }93169317.peach-chirp-bird-body {9318  transform-origin: 50% 80%;9319  animation: peach-chirp-bird-bob 2.4s ease-in-out infinite;9320}9321@keyframes peach-chirp-bird-bob {9322  0%, 100% { transform: translateY(0) scale(1, 1); }9323  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9324}93259326.peach-chirp-bird-eye-group {9327  animation: peach-chirp-blink 5.2s steps(1, end) infinite;9328  transform-origin: center;9329  transform-box: fill-box;9330}9331@keyframes peach-chirp-blink {9332  0%, 92%, 96%, 100% { transform: scaleY(1); }9333  94%                { transform: scaleY(0.05); }9334}93359336/* Pose: chirping — beak opens, head bobs, aura blooms */9337.peach-chirp-bird-pose-chirping .peach-chirp-bird-body {9338  animation:9339    peach-chirp-bird-bob 2.4s ease-in-out infinite,9340    peach-chirp-squeeze 1.7s ease-in-out infinite;9341}9342@keyframes peach-chirp-squeeze {9343  0%, 70%, 100% { transform-origin: 50% 85%; }9344  78%           { transform: scale(1.04, 0.96) translateY(1px); }9345  86%           { transform: scale(0.98, 1.02); }9346}9347.peach-chirp-bird-pose-chirping .peach-chirp-bird-head-group {9348  animation: peach-chirp-head-bob 1.7s ease-in-out infinite;9349}9350@keyframes peach-chirp-head-bob {9351  0%, 70%, 100% { transform: translateY(0) rotate(0); }9352  78%           { transform: translateY(-3px) rotate(-4deg); }9353  86%           { transform: translateY(-1px) rotate(-2deg); }9354}9355.peach-chirp-bird-pose-chirping .peach-chirp-bird-beak {9356  animation: peach-chirp-beak-open 1.7s ease-in-out infinite;9357}9358@keyframes peach-chirp-beak-open {9359  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9360  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9361  86%           { transform: rotate(-6deg); }9362}9363.peach-chirp-bird-pose-chirping .peach-chirp-bird-aura {9364  animation: peach-chirp-aura 1.7s ease-in-out infinite;9365}9366@keyframes peach-chirp-aura {9367  0%, 100% { opacity: 0; }9368  50%      { opacity: 0.8; }9369}9370.peach-chirp-bird-pose-chirping .peach-chirp-bird-tail {9371  animation: peach-chirp-tail-twitch 1.7s ease-in-out infinite;9372  transform-origin: 100% 50%;9373}9374@keyframes peach-chirp-tail-twitch {9375  0%, 75%, 100% { transform: rotate(0); }9376  82%           { transform: rotate(-3deg) translateX(-1px); }9377}93789379/* Pose: attentive — head tilts toward partner */9380.peach-chirp-bird-pose-attentive .peach-chirp-bird-head-group {9381  animation: peach-chirp-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9382}9383@keyframes peach-chirp-head-tilt {9384  0%   { transform: rotate(0) translateY(0); }9385  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9386  100% { transform: rotate(-6deg); }9387}9388.peach-chirp-bird-pose-attentive .peach-chirp-bird-tail {9389  animation: peach-chirp-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9390  transform-origin: 100% 50%;9391}9392@keyframes peach-chirp-tail-cock {9393  0%   { transform: rotate(0); }9394  100% { transform: rotate(-4deg); }9395}93969397/* Pose: happy — wing flutter, tuft perk, tail wag */9398.peach-chirp-bird-pose-happy .peach-chirp-bird-wing {9399  transform-origin: 80% 60%;9400  animation: peach-chirp-wing-flutter 0.32s ease-in-out 5;9401}9402@keyframes peach-chirp-wing-flutter {9403  0%, 100% { transform: rotate(0) translateY(0); }9404  50%      { transform: rotate(-16deg) translateY(-2px); }9405}9406.peach-chirp-bird-pose-happy .peach-chirp-bird-tuft {9407  transform-origin: 0% 100%;9408  animation: peach-chirp-tuft-perk 0.4s ease-in-out 3;9409}9410@keyframes peach-chirp-tuft-perk {9411  0%, 100% { transform: rotate(0); }9412  50%      { transform: rotate(-15deg) translateY(-1px); }9413}9414.peach-chirp-bird-pose-happy .peach-chirp-bird-tail {9415  transform-origin: 100% 50%;9416  animation: peach-chirp-tail-wag 0.5s ease-in-out 4;9417}9418@keyframes peach-chirp-tail-wag {9419  0%, 100% { transform: rotate(0); }9420  25%      { transform: rotate(6deg); }9421  75%      { transform: rotate(-6deg); }9422}9423.peach-chirp-bird-pose-happy .peach-chirp-bird-head-group {9424  animation: peach-chirp-head-perk 0.5s ease-out;9425}9426@keyframes peach-chirp-head-perk {9427  0%   { transform: translateY(0); }9428  40%  { transform: translateY(-3px) rotate(2deg); }9429  100% { transform: translateY(0); }9430}94319432/* Pose: sad — body droops forward */9433.peach-chirp-bird-pose-sad .peach-chirp-bird-body {9434  transform: translateY(5px) rotate(-2deg);9435  animation: none;9436}9437.peach-chirp-bird-pose-sad .peach-chirp-bird-head-group {9438  transform: translateY(4px) rotate(8deg);9439}9440.peach-chirp-bird-pose-sad .peach-chirp-bird-tuft { transform: rotate(15deg) translateY(2px); }9441.peach-chirp-bird-pose-sad .peach-chirp-bird-tail { transform: rotate(8deg) translateY(2px); }94429443.peach-chirp-bird-pose-hidden { opacity: 0; }94449445/* Chirp arcs ----------------------------------------------------------- */9446.peach-chirp-arcs {9447  position: absolute;9448  top: 18px;9449  width: 96px;9450  height: 70px;9451  pointer-events: none;9452}9453.peach-chirp-arcs-right { right: -60px; }9454.peach-chirp-arcs-left  { left: -60px; transform: scaleX(-1); }9455.peach-chirp-arc {9456  position: absolute;9457  top: 50%;9458  left: 0;9459  width: 40px;9460  height: 40px;9461  margin-top: -20px;9462  border: 1.2px solid #f4d5a8;9463  border-color: transparent #f4d5a8 transparent transparent;9464  border-radius: 50%;9465  opacity: 0;9466  animation: peach-chirp-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9467}9468@keyframes peach-chirp-arc-expand {9469  0%   { transform: scale(0.4); opacity: 0; }9470  20%  { opacity: 0.9; }9471  100% { transform: scale(1.6); opacity: 0; }9472}94739474/* Flight wave ---------------------------------------------------------- */9475.peach-chirp-flight-track {9476  position: absolute;9477  inset: 32px 36px 38px 36px;9478  pointer-events: none;9479}9480.peach-chirp-flight-wave {9481  position: absolute;9482  top: 8px;9483  left: 76px;9484  right: 76px;9485  height: 60px;9486  width: auto;9487  opacity: 0;9488  transition: opacity 0.15s ease;9489  stroke: #f4d5a8;9490  fill: none;9491}9492.peach-chirp-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9493.peach-chirp-flight-wave.is-visible { opacity: 1; }9494.peach-chirp-flight-path,9495.peach-chirp-flight-path-2 {9496  stroke-dasharray: 240;9497  stroke-dashoffset: 240;9498  stroke-linecap: round;9499  fill: none;9500}9501.peach-chirp-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9502.peach-chirp-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9503.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path {9504  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9505}9506.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path-2 {9507  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9508}9509@keyframes peach-chirp-fly {9510  0%   { stroke-dashoffset: 240; opacity: 0; }9511  20%  { opacity: 1; }9512  100% { stroke-dashoffset: -120; opacity: 0; }9513}95149515/* Connection dot ------------------------------------------------------- */9516.peach-chirp-dot {9517  position: absolute;9518  top: 50%; left: 50%;9519  transform: translate(-50%, -50%);9520  width: 40px; height: 40px;9521  opacity: 0;9522  pointer-events: none;9523  transition: opacity 0.3s ease;9524  color: var(--peach-accent);9525}9526.peach-chirp-dot.is-visible { opacity: 1; }9527.peach-chirp-dot-glow {9528  position: absolute; top: 50%; left: 50%;9529  transform: translate(-50%, -50%);9530  width: 38px; height: 38px;9531  border-radius: 50%;9532  filter: blur(10px);9533  opacity: 0.55;9534  background: var(--peach-accent);9535  animation: peach-chirp-dot-bloom 1.4s ease-out;9536}9537.peach-chirp-dot-core {9538  position: absolute; top: 50%; left: 50%;9539  transform: translate(-50%, -50%);9540  width: 8px; height: 8px;9541  border-radius: 50%;9542  background: var(--peach-accent);9543  box-shadow: 0 0 12px currentColor;9544  animation: peach-chirp-dot-core 1.4s ease-out;9545}9546.peach-chirp-dot-ring {9547  position: absolute; top: 50%; left: 50%;9548  width: 60px; height: 60px;9549  transform: translate(-50%, -50%);9550  animation: peach-chirp-dot-ring 1.4s linear;9551  stroke: var(--peach-accent);9552}9553@keyframes peach-chirp-dot-bloom {9554  0%   { width: 4px; height: 4px; opacity: 0; }9555  35%  { width: 60px; height: 60px; opacity: 0.7; }9556  100% { width: 38px; height: 38px; opacity: 0.55; }9557}9558@keyframes peach-chirp-dot-core {9559  0%   { width: 0; height: 0; }9560  35%  { width: 12px; height: 12px; }9561  100% { width: 8px; height: 8px; }9562}9563@keyframes peach-chirp-dot-ring {9564  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9565  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9566  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9567}95689569/* Motes — drift upward across the stage */9570.peach-chirp-motes {9571  position: absolute;9572  inset: 0;9573  pointer-events: none;9574}9575.peach-chirp-mote {9576  position: absolute;9577  width: 2px; height: 2px;9578  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9579  border-radius: 50%;9580  bottom: 32px;9581  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9582  opacity: 0;9583  animation: peach-chirp-mote-drift 6s linear infinite;9584  animation-delay: calc(var(--mote-i, 0) * 0.7s);9585}9586@keyframes peach-chirp-mote-drift {9587  0%   { transform: translateY(0); opacity: 0; }9588  10%  { opacity: 0.6; }9589  90%  { opacity: 0.1; }9590  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9591}95929593/* Status copy ---------------------------------------------------------- */9594.peach-chirp-copy-host {9595  margin: 4px 4px 10px;9596  text-align: center;9597  min-height: 50px;9598}9599.peach-chirp-copy {9600  animation: peach-chirp-copy-in 0.35s ease both;9601}9602@keyframes peach-chirp-copy-in {9603  from { opacity: 0; transform: translateY(4px); }9604  to   { opacity: 1; transform: translateY(0); }9605}9606.peach-chirp-headline {9607  font-family: var(--font-display, Georgia, serif);9608  font-style: italic;9609  font-size: 20px;9610  font-weight: 500;9611  line-height: 1.2;9612  letter-spacing: 0.005em;9613  color: var(--peach-t0);9614  margin-bottom: 6px;9615}9616.peach-chirp-copy-listening .peach-chirp-headline,9617.peach-chirp-copy-chirping .peach-chirp-headline,9618.peach-chirp-copy-idle .peach-chirp-headline {9619  font-family: inherit;9620  font-style: normal;9621  font-weight: 500;9622  font-size: 15px;9623  color: var(--peach-t0);9624  letter-spacing: 0;9625}9626.peach-chirp-copy-paired .peach-chirp-headline {9627  color: var(--peach-t0);9628  font-weight: 600;9629}9630.peach-chirp-sub {9631  font-size: 12.5px;9632  line-height: 1.45;9633  color: var(--peach-t1);9634  max-width: 280px;9635  margin: 0 auto;9636  text-wrap: pretty;9637}96389639/* Status action -------------------------------------------------------- */9640.peach-chirp-action {9641  margin: 2px 4px 10px;9642  margin-top: auto;9643  display: flex;9644  flex-direction: column;9645  gap: 8px;9646}9647.peach-chirp-mic-notice {9648  margin: 0;9649  font-size: 0.625rem;9650  color: var(--peach-t2);9651  line-height: 1.4;9652}9653.peach-chirp-action-waiting {9654  display: flex;9655  align-items: center;9656  justify-content: space-between;9657  gap: 12px;9658}9659.peach-chirp-cancel {9660  min-width: 96px;9661}9662.peach-chirp-listening {9663  display: inline-flex; align-items: center; gap: 4px;9664  font-family: var(--peach-mono, ui-monospace, monospace);9665  font-size: 9.5px;9666  text-transform: uppercase;9667  letter-spacing: 0.12em;9668  color: var(--peach-t1);9669  padding: 8px 10px;9670}9671.peach-chirp-listen-dot {9672  width: 4px; height: 4px;9673  border-radius: 50%;9674  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9675  animation: peach-chirp-listen-pulse 1.2s ease-in-out infinite;9676}9677.peach-chirp-listen-dot:nth-child(2) { animation-delay: 0.2s; }9678.peach-chirp-listen-dot:nth-child(3) { animation-delay: 0.4s; }9679.peach-chirp-listen-label { margin-left: 6px; }9680@keyframes peach-chirp-listen-pulse {9681  0%, 100% { opacity: 0.25; transform: scale(0.9); }9682  50%      { opacity: 1;     transform: scale(1.15); }9683}96849685.peach-chirp-action-handshake {9686  display: flex;9687  flex-direction: column;9688  align-items: center;9689  gap: 8px;9690  padding: 8px 4px;9691}9692.peach-chirp-meter {9693  width: 100%;9694  max-width: 280px;9695  height: 2px;9696  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9697  border-radius: 2px;9698  position: relative;9699  overflow: hidden;9700}9701.peach-chirp-meter-bar {9702  position: absolute;9703  top: 0; bottom: 0;9704  width: 30%;9705  left: -30%;9706  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9707  animation: peach-chirp-meter-sweep 1.4s ease-in-out infinite;9708}9709@keyframes peach-chirp-meter-sweep {9710  0%   { left: -30%; }9711  100% { left: 100%; }9712}9713.peach-chirp-meter-label {9714  font-family: var(--peach-mono, ui-monospace, monospace);9715  font-size: 9.5px;9716  text-transform: uppercase;9717  letter-spacing: 0.14em;9718  color: var(--peach-t1);9719}97209721.peach-chirp-action-paired {9722  display: flex;9723  align-items: center;9724  gap: 10px;9725}9726.peach-chirp-device-confirm {9727  flex: 1;9728  display: inline-flex;9729  align-items: center;9730  gap: 8px;9731  padding: 9px 10px 9px 12px;9732  border-radius: 10px;9733  background: color-mix(in srgb, #76b6e8 12%, transparent);9734  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9735  font-size: 12.5px;9736  color: var(--peach-t0);9737  min-width: 0;9738}9739.peach-chirp-device-confirm-glyph {9740  display: inline-flex;9741  color: #76b6e8;9742}9743.peach-chirp-device-confirm-name {9744  flex: 1;9745  overflow: hidden;9746  text-overflow: ellipsis;9747  white-space: nowrap;9748}9749.peach-chirp-device-confirm-trust {9750  font-family: var(--peach-mono, ui-monospace, monospace);9751  font-size: 9.5px;9752  text-transform: uppercase;9753  letter-spacing: 0.1em;9754  color: #76b6e8;9755  padding: 2px 6px;9756  border-radius: 4px;9757  background: color-mix(in srgb, #76b6e8 14%, transparent);9758}9759.peach-chirp-done {9760  min-width: 80px;9761}9762.peach-chirp-retry {9763  align-self: center;9764  display: block;9765  margin: 6px auto 0;9766  min-width: 120px;9767}9768.peach-chirp-mic-help {9769  font-size: 12px;9770  color: var(--peach-t1);9771  text-align: center;9772  max-width: 320px;9773  margin: 0 auto;9774}97759776/* Rest state — bird stage at idle pose, primary CTA + paired list */9777.peach-chirp-pair[data-phase="idle"] .peach-chirp-stage {9778  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9779  height: 160px;9780}9781.peach-chirp-pair-start {9782  width: 100%;9783  display: inline-flex;9784  align-items: center;9785  justify-content: center;9786  gap: 8px;9787  padding: 11px 14px;9788  border-radius: 10px;9789  background: var(--peach-accent);9790  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9791  color: #1a0905;9792  font-family: inherit;9793  font-size: 13px;9794  font-weight: 600;9795  letter-spacing: 0.01em;9796  cursor: pointer;9797  transition: filter 0.15s ease, transform 0.1s ease;9798}9799.peach-chirp-pair-start:hover { filter: brightness(1.08); }9800.peach-chirp-pair-start:active { transform: translateY(1px); }98019802.peach-chirp-paired-section {9803  margin-top: 14px;9804  display: flex;9805  flex-direction: column;9806  gap: 8px;9807}9808.peach-chirp-paired-heading {9809  margin: 0;9810  font-family: var(--peach-mono, ui-monospace, monospace);9811  font-size: 10px;9812  font-weight: 500;9813  letter-spacing: 0.14em;9814  text-transform: uppercase;9815  color: var(--peach-t1);9816}98179818/* Footer --------------------------------------------------------------- */9819.peach-chirp-foot {9820  margin: 10px -4px -2px;9821  margin-top: auto;9822}9823.peach-chirp-foot-divider {9824  height: 1px;9825  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9826  margin-bottom: 10px;9827}9828.peach-chirp-foot-text {9829  font-size: 11px;9830  line-height: 1.5;9831  color: var(--peach-t1);9832  text-align: center;9833  padding: 0 4px;9834  text-wrap: pretty;9835}98369837/* Screen-reader-only live region. Kept off the visual flow but read by9838   assistive tech as the pairing phase advances. */9839.peach-sr-only {9840  position: absolute;9841  width: 1px; height: 1px;9842  padding: 0; margin: -1px;9843  overflow: hidden;9844  clip: rect(0, 0, 0, 0);9845  white-space: nowrap;9846  border: 0;9847}98489849/* Reduced motion — stage simplifies to opacity transitions only */9850@media (prefers-reduced-motion: reduce) {9851  .peach-chirp-bird-body,9852  .peach-chirp-bird-head-group,9853  .peach-chirp-bird-beak,9854  .peach-chirp-bird-wing,9855  .peach-chirp-bird-tuft,9856  .peach-chirp-bird-tail,9857  .peach-chirp-bird-eye-group,9858  .peach-chirp-bird-aura,9859  .peach-chirp-arc,9860  .peach-chirp-flight-path,9861  .peach-chirp-flight-path-2,9862  .peach-chirp-dot-glow,9863  .peach-chirp-dot-core,9864  .peach-chirp-dot-ring,9865  .peach-chirp-mote,9866  .peach-chirp-meter-bar,9867  .peach-chirp-listen-dot,9868  .peach-chirp-bird-slot,9869  .peach-chirp-bird-slot-mobile {9870    animation: none !important;9871    transition: opacity 0.2s linear !important;9872  }9873}98749875/* ─────────────────────────────────────────────────────────────────9876   Settings → Sync surface (v3 ChirpSync). Wraps the same bird9877   animation used by the pairing flow with a paired-devices list and9878   the "Pair a device" CTA.9879   ───────────────────────────────────────────────────────────────── */9880.peach-chirp-settings {9881  position: absolute;9882  inset: 0;9883  z-index: 3;9884  display: flex;9885  flex-direction: column;9886  gap: 18px;9887  padding: 14px 12px 12px;9888  width: 100%;9889  box-sizing: border-box;9890  overflow-y: auto;9891  overflow-x: hidden;9892  /* Same warm Chirp surface as the pairing screen — unifies the two views. */9893  background:9894    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9895    var(--peach-bg);9896  color: var(--peach-t0);9897  isolation: isolate;9898  /* Hide native scrollbar — content fits 99% of the time and a chunky9899     gutter ruins the surface. */9900  scrollbar-width: none;9901  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9902}9903.peach-chirp-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9904.peach-chirp-settings::before {9905  content: '';9906  position: absolute;9907  inset: 0;9908  pointer-events: none;9909  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9910  z-index: 0;9911}9912.peach-chirp-settings > * { position: relative; z-index: 1; }99139914.peach-chirp-settings--pairing {9915  padding: 0;9916  align-items: stretch;9917  justify-content: stretch;9918  background: none;9919  isolation: auto;9920}9921.peach-chirp-settings--pairing::before { display: none; }99229923.peach-chirp-settings-header {9924  display: flex;9925  align-items: center;9926  gap: 10px;9927}9928.peach-chirp-settings-title {9929  margin: 0;9930  font-family: var(--font-display, Georgia, serif);9931  font-style: italic;9932  font-size: 24px;9933  font-weight: 500;9934  line-height: 1;9935  color: var(--peach-t0);9936  letter-spacing: 0.005em;9937}9938.peach-chirp-settings-section {9939  margin: 6px 0 -4px;9940  font-size: 11px;9941  font-weight: 600;9942  letter-spacing: 0.08em;9943  text-transform: uppercase;9944  color: var(--peach-text-muted);9945}9946.peach-chirp-settings-error {9947  font-size: 12px;9948  padding: 8px 10px;9949  border-radius: 8px;9950  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);9951  color: var(--peach-text);9952}9953.peach-chirp-settings-footer {9954  margin-top: auto;9955  padding-top: 18px;9956  font-size: 11.5px;9957  line-height: 1.5;9958  color: var(--peach-text-muted);9959  text-align: center;9960}99619962/* Hero card shown when no devices are paired yet. */9963.peach-chirp-hero {9964  display: flex;9965  flex-direction: column;9966  align-items: center;9967  gap: 12px;9968  padding: 20px 12px 8px;9969  text-align: center;9970}9971.peach-chirp-hero-svg {9972  display: block;9973  max-width: 100%;9974  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));9975}9976.peach-chirp-hero-headline {9977  margin: 0;9978  font-family: var(--font-display, Georgia, serif);9979  font-style: italic;9980  font-size: 20px;9981  font-weight: 500;9982  line-height: 1.2;9983  letter-spacing: 0.005em;9984  color: var(--peach-t0);9985}9986.peach-chirp-hero-sub {9987  margin: 0;9988  font-size: 13px;9989  line-height: 1.5;9990  color: var(--peach-t1);9991  max-width: 320px;9992  text-wrap: pretty;9993}99949995.peach-chirp-pair-cta {9996  display: flex;9997  justify-content: center;9998  padding: 4px 0 6px;9999}10000.peach-chirp-pair-button {10001  display: inline-flex;10002  align-items: center;10003  gap: 8px;10004  min-width: 220px;10005  justify-content: center;10006}10007.peach-chirp-pair-button-icon {10008  flex: 0 0 auto;10009}1001010011/* Paired devices list. Roomy rows that look at home next to the rest10012   of Settings; stale rows get a soft warm-warning border tint. */10013.peach-chirp-device-list {10014  list-style: none;10015  margin: 0;10016  padding: 0;10017  display: flex;10018  flex-direction: column;10019  gap: 8px;10020}10021.peach-chirp-device-row {10022  display: flex;10023  align-items: center;10024  gap: 12px;10025  padding: 12px;10026  border-radius: 10px;10027  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10028  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);10029}10030.peach-chirp-device-row[data-stale="true"] {10031  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);10032}10033.peach-chirp-device-icon {10034  width: 32px;10035  height: 32px;10036  display: flex;10037  align-items: center;10038  justify-content: center;10039  border-radius: 8px;10040  color: var(--peach-text);10041  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);10042}10043.peach-chirp-device-info {10044  flex: 1;10045  display: flex;10046  flex-direction: column;10047  gap: 2px;10048  min-width: 0;10049}10050.peach-chirp-device-name {10051  font-size: 14px;10052  font-weight: 600;10053  color: var(--peach-text);10054  overflow: hidden;10055  text-overflow: ellipsis;10056  white-space: nowrap;10057}10058.peach-chirp-device-meta {10059  font-size: 11.5px;10060  color: var(--peach-text-muted);10061  display: flex;10062  flex-wrap: wrap;10063  align-items: center;10064  gap: 8px;10065}10066.peach-chirp-device-badge {10067  font-size: 10.5px;10068  font-weight: 500;10069  letter-spacing: 0.02em;10070  padding: 2px 6px;10071  border-radius: 999px;10072  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);10073  color: var(--peach-text);10074}10075.peach-chirp-device-stale {10076  font-size: 10.5px;10077  font-weight: 500;10078  color: var(--peach-warn, #d29257);10079}10080.peach-chirp-device-remove {10081  flex: 0 0 auto;10082  color: var(--peach-text-muted);10083}10084.peach-chirp-device-remove:hover {10085  color: var(--peach-danger, #c25b4a);10086}10087.peach-chirp-unpair-confirm {10088  display: flex;10089  gap: 6px;10090  align-items: center;10091}1009210093/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */10094.peach-chirp-pro-card {10095  position: relative;10096  margin: 18px 12px;10097  padding: 18px 20px 22px;10098  border-radius: 22px;10099  background:10100    radial-gradient(140% 90% at 50% 0%,10101      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,10102      transparent 60%),10103    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10104  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);10105  box-shadow:10106    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,10107    0 18px 40px -24px rgba(0, 0, 0, 0.45);10108  display: flex;10109  flex-direction: column;10110  align-items: center;10111  gap: 10px;10112  text-align: center;10113  overflow: hidden;10114}10115.peach-chirp-pro-stage {10116  position: relative;10117  width: 220px;10118  height: 140px;10119  display: flex;10120  align-items: flex-end;10121  justify-content: center;10122  margin-bottom: 2px;10123}10124.peach-chirp-pro-bird-slot {10125  width: 140px;10126  height: 132px;10127  display: flex;10128  align-items: flex-end;10129  justify-content: center;10130  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));10131}10132.peach-chirp-pro-bird-slot .peach-chirp-bird {10133  width: 100%;10134  height: 100%;10135}10136.peach-chirp-pro-bird-slot .peach-chirp-bird svg {10137  width: 100%;10138  height: 100%;10139  overflow: visible;10140}10141.peach-chirp-pro-chirp {10142  position: absolute;10143  top: 14px;10144  right: 8px;10145  width: 96px;10146  height: 80px;10147  color: var(--peach-accent);10148  animation: peach-chirp-pulse 2.6s ease-in-out infinite;10149  transform-origin: 0% 50%;10150  pointer-events: none;10151}10152@keyframes peach-chirp-pulse {10153  0%, 100% { opacity: 0.35; transform: translateX(0) scale(0.92); }10154  45%      { opacity: 1;    transform: translateX(2px) scale(1); }10155  70%      { opacity: 0.6;  transform: translateX(4px) scale(1.04); }10156}10157@media (prefers-reduced-motion: reduce) {10158  .peach-chirp-pro-chirp { animation: none; opacity: 0.7; }10159}10160.peach-chirp-pro-headline {10161  margin: 4px 0 0;10162  font-family: var(--font-display, "Cormorant Garamond", serif);10163  font-style: italic;10164  font-size: 19px;10165  font-weight: 500;10166  letter-spacing: 0.01em;10167  color: var(--peach-t0);10168  max-width: 280px;10169  line-height: 1.25;10170}10171.peach-chirp-pro-body {10172  margin: 0;10173  font-size: 13px;10174  line-height: 1.55;10175  color: var(--peach-t1);10176  max-width: 300px;10177}10178.peach-chirp-pro-cta {10179  margin-top: 4px;10180}10181.peach-chirp-pro-foot {10182  margin: 2px 0 0;10183  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10184  font-size: 0.625rem;10185  letter-spacing: 0.08em;10186  text-transform: uppercase;10187  color: var(--peach-t2);10188  opacity: 0.75;10189}1019010191/* Shell border and shadow in light mode: match dark mode's near-invisible10192   border weight so the popup frame looks the same in both themes. */10193.light .peach-shell,10194.light .peach-screen {10195  border-color: rgba(26, 18, 8, 0.07);10196  box-shadow:10197    0 2px 8px rgba(80, 56, 32, 0.08),10198    0 14px 48px rgba(80, 56, 32, 0.10),10199    0 0 0 1px rgba(26, 18, 8, 0.04);10200}