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/* On the rest screen the two options sit at the bottom, like the old CTA did. */1051.peach-pair-method-list--rest { margin-top: auto; padding-bottom: 12px; }1052.peach-pair-method {1053  display: flex; align-items: center; gap: 12px;1054  width: 100%; text-align: left; cursor: pointer;1055  padding: 12px; border-radius: 10px;1056  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);1057  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);1058  color: var(--peach-text);1059  font-family: inherit;1060  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;1061}1062.peach-pair-method:hover {1063  border-color: color-mix(in srgb, var(--peach-accent) 36%, transparent);1064  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 80%, var(--peach-accent) 20%);1065}1066.peach-pair-method:active { transform: translateY(1px); }1067.peach-pair-method-icon {1068  flex-shrink: 0;1069  width: 32px; height: 32px;1070  display: flex; align-items: center; justify-content: center;1071  border-radius: 8px;1072  color: var(--peach-text);1073  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);1074}1075.peach-pair-method-text {1076  display: flex; flex-direction: column; gap: 2px; min-width: 0;1077}1078.peach-pair-method-title { font-size: 0.875rem; font-weight: 600; }1079.peach-pair-method-sub { font-size: 0.6875rem; color: var(--peach-t2); }10801081/* Breach badge */1082.peach-breach-badge {1083  display: flex;1084  position: relative;1085  z-index: 1;1086  align-items: center;1087  gap: 7px;1088  font-size: 0.5625rem;1089  color: var(--peach-breach);1090  padding: 5px 10px;1091  margin-bottom: 4px;1092  border-radius: 8px;1093  background: rgba(220, 80, 60, 0.07);1094  border: 1px solid rgba(220, 80, 60, 0.18);1095  letter-spacing: 0.04em;1096}10971098.peach-password-value.is-breached {1099  color: rgba(220, 80, 60, 0.75);1100  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1101}11021103/* ── Overlay views ─────────────────────────────────────────────────── */1104.peach-overlay-view {1105  position: absolute;1106  inset: 0;1107  display: flex;1108  flex-direction: column;1109  background:1110    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1111    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1112    var(--peach-bg);1113  z-index: 2;1114  overflow: hidden;1115  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1116}11171118.peach-overlay-view:has(.stk-shell) {1119  background: var(--peach-bg);1120}1121@keyframes overlay-in {1122  from { opacity: 0; transform: translateY(8px); }1123  to   { opacity: 1; transform: translateY(0); }1124}1125.peach-overlay-view.ov-enter-up {1126  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1127}1128.peach-overlay-view.ov-exit-up {1129  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1130}1131.peach-overlay-view.ov-enter-right {1132  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1133}1134.peach-overlay-view.ov-exit-right {1135  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1136}11371138@keyframes ov-enter-up {1139  from { opacity: 0; transform: translateY(18px); }1140  to   { opacity: 1; transform: translateY(0); }1141}1142@keyframes ov-exit-up {1143  from { opacity: 1; transform: translateY(0); }1144  to   { opacity: 0; transform: translateY(-12px); }1145}1146@keyframes ov-enter-right {1147  from { opacity: 0; transform: translateX(20px); }1148  to   { opacity: 1; transform: translateX(0); }1149}1150@keyframes ov-exit-right {1151  from { opacity: 1; transform: translateX(0); }1152  to   { opacity: 0; transform: translateX(20px); }1153}11541155/* Overlay shared header */1156.peach-overlay-header {1157  padding: 10px 12px 8px;1158  display: flex;1159  align-items: center;1160  gap: 10px;1161  flex-shrink: 0;1162}1163/* Back button — circular pill matching the settings stack masthead (.stk-back) */1164.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1165  width: 28px;1166  height: 28px;1167  flex: 0 0 28px;1168  border-radius: 999px;1169  border: 1px solid var(--peach-border);1170  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1171  color: var(--peach-t1);1172  padding: 0;1173}1174.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1175  color: var(--peach-t0);1176  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1177  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1178}1179.peach-overlay-title {1180  font-family: var(--font-display);1181  font-style: italic;1182  font-weight: 400;1183  font-size: 20px;1184  line-height: 1;1185  color: var(--peach-t0);1186  flex: 1;1187  text-align: center;1188}1189/* Balances the 28px back button so the title stays visually centred */1190.peach-overlay-spacer {1191  width: 28px;1192  flex: 0 0 28px;1193}11941195.peach-overlay-card {1196  background: var(--peach-s1);1197  border: 1px solid var(--peach-t3);1198  border-radius: 12px;1199  overflow: hidden;1200  width: 100%;1201}12021203.peach-onboarding-alt-actions {1204  display: flex;1205  flex-direction: column;1206  gap: 4px;1207  padding: 0;1208}12091210.peach-settings-copy {1211  margin: 0 0 10px;1212  font-size: 0.6875rem;1213  line-height: 1.5;1214  color: var(--peach-t2);1215}12161217.peach-settings-copy strong {1218  color: var(--peach-t0);1219}12201221.peach-settings-copy--spacious {1222  margin-bottom: 12px;1223}12241225.peach-settings-copy--result {1226  color: var(--peach-accent);1227  font-size: 0.8125rem;1228  text-align: center;1229  padding: 8px 0;1230}12311232.peach-settings-copy--danger {1233  color: var(--peach-breach);1234}12351236.peach-settings-copy--success {1237  color: var(--peach-accent);1238}12391240.peach-inline-feedback {1241  font-size: 0.6875rem;1242  margin: 10px 0 0;1243}12441245.peach-inline-feedback--ok {1246  color: var(--peach-accent);1247}12481249.peach-inline-feedback--error {1250  color: var(--peach-breach);1251}12521253.peach-inline-feedback--muted {1254  color: var(--peach-t2);1255  font-size: 0.625rem;1256  margin: 4px 0;1257}12581259.peach-inline-feedback--spaced {1260  margin-top: 12px;1261}12621263.peach-settings-actions--row {1264  display: flex;1265  gap: 6px;1266}12671268.peach-settings-actions--end {1269  margin-top: 14px;1270  justify-content: flex-end;1271}12721273.peach-settings-stack {1274  display: flex;1275  flex-direction: column;1276  gap: 6px;1277}12781279.peach-settings-stack--tight {1280  gap: 4px;1281}12821283.peach-settings-stack--spacious {1284  gap: 8px;1285}12861287.peach-settings-input {1288  width: 100%;1289  box-sizing: border-box;1290  padding: 8px 10px;1291  background: rgba(0, 0, 0, 0.22);1292  border: 1px solid transparent;1293  border-radius: 6px;1294  color: var(--peach-t0);1295  font-family: var(--font-ui);1296  font-size: 0.75rem;1297  outline: none;1298  transition: border-color 120ms ease, background 120ms ease;1299}13001301.peach-settings-input:focus {1302  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1303  background: rgba(0, 0, 0, 0.28);1304}13051306.peach-settings-input[type="password"] {1307  font-family: var(--font-mono);1308  letter-spacing: 0.04em;1309}13101311.peach-hidden-file-input {1312  display: none;1313}13141315.peach-checkbox-note {1316  display: flex;1317  align-items: flex-start;1318  gap: 8px;1319  font-size: 0.6875rem;1320  color: var(--peach-t1);1321  cursor: pointer;1322  margin: 12px 0;1323}13241325.peach-checkbox-note input {1326  margin-top: 1px;1327}13281329.peach-danger-notice {1330  background: rgba(220, 80, 60, 0.08);1331  border: 1px solid rgba(220, 80, 60, 0.2);1332  border-radius: 6px;1333  padding: 9px 11px;1334  font-size: 0.6875rem;1335  color: var(--peach-t1);1336  line-height: 1.5;1337}13381339.peach-info-notice {1340  font-size: 0.6875rem;1341  color: var(--peach-t1);1342  line-height: 1.5;1343  background: var(--surface-card);1344  border: 1px solid var(--peach-t3);1345  border-radius: 6px;1346  padding: 8px 10px;1347}13481349.peach-info-notice--warn {1350  border-color: rgba(220, 38, 38, 0.4);1351  background: rgba(220, 38, 38, 0.06);1352  color: rgba(220, 38, 38, 0.92);1353  margin-bottom: 8px;1354}13551356/* Warm helpful-context note — reads as a soft aside, not an alert. */1357.peach-info-notice--note {1358  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);1359  border-color: color-mix(in srgb, var(--peach-accent) 18%, transparent);1360  color: var(--peach-t2);1361}13621363.peach-strength-row {1364  display: flex;1365  align-items: center;1366  gap: 8px;1367  margin-bottom: 10px;1368}13691370.peach-strength-track {1371  flex: 1;1372  height: 4px;1373  background: var(--peach-s2);1374  border-radius: 2px;1375  overflow: hidden;1376}13771378.peach-strength-fill {1379  height: 100%;1380  border-radius: 2px;1381  transition: width 120ms ease, background 120ms ease;1382}13831384/* ── Type selector tabs ── */1385.peach-type-tabs {1386  display: flex;1387  gap: 0;1388  background: var(--peach-t4);1389  border-radius: 8px;1390  padding: 3px;1391}13921393.peach-type-tab {1394  flex: 1;1395  display: flex;1396  align-items: center;1397  justify-content: center;1398  gap: 6px;1399  padding: 6px 10px;1400  border-radius: 6px;1401  border: none;1402  background: transparent;1403  cursor: pointer;1404  font-family: Inter, system-ui, sans-serif;1405  font-size: 0.6875rem;1406  font-weight: 400;1407  letter-spacing: 0.04em;1408  color: var(--peach-t1);1409  transition: background 150ms ease, color 150ms ease;1410}14111412.peach-type-tab.is-active {1413  background: var(--peach-s2);1414  color: var(--peach-t0);1415  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1416}14171418.peach-type-tab:not(.is-active):hover {1419  color: var(--peach-t0);1420}14211422.peach-type-tab svg {1423  opacity: 0.7;1424  flex-shrink: 0;1425}14261427.peach-type-tab.is-active svg {1428  opacity: 1;1429}14301431/* ── List view ───────────────────────────────────────────────────────── */1432.peach-list-top {1433  padding: 0 10px;1434  min-height: 46px;1435  display: flex;1436  align-items: center;1437  gap: 6px;1438  border-bottom: 1px solid var(--peach-t3);1439  flex-shrink: 0;1440  background: var(--peach-s1);1441}14421443.peach-vault-list {1444  flex: 1;1445  overflow-y: auto;1446  scrollbar-width: none;1447}1448.peach-vault-list::-webkit-scrollbar { display: none; }14491450/* Scrollbar — vault list */1451.peach-vault-list {1452  scrollbar-width: thin;1453  scrollbar-color: var(--peach-t3) transparent;1454}14551456.peach-vault-list::-webkit-scrollbar {1457  width: 3px;1458}14591460.peach-vault-list::-webkit-scrollbar-thumb {1461  background: var(--peach-t3);1462  border-radius: 2px;1463}14641465.peach-entry-row {1466  width: 100%;1467  display: flex;1468  align-items: center;1469  gap: 10px;1470  padding: 9px 16px;1471  background: transparent;1472  border: none;1473  border-bottom: 1px solid var(--peach-t3);1474  cursor: pointer;1475  color: inherit;1476  text-align: left;1477  transition: background 80ms ease;1478}1479.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1480.peach-entry-row:last-child { border-bottom: none; }1481.peach-entry-row.is-active {1482  box-shadow: inset 2px 0 0 var(--peach-accent);1483  background: rgba(240,232,216,0.03);1484}1485.peach-entry-row:focus-visible {1486  outline: none;1487  box-shadow: 0 0 0 1px var(--peach-border-accent);1488  background: rgba(240,232,216,0.03);1489}1490.peach-entry-row-icon {1491  width: 26px; height: 26px;1492  border-radius: 7px;1493  border: 1px solid var(--peach-t3);1494  display: flex; align-items: center; justify-content: center;1495  color: var(--peach-t2);1496  flex-shrink: 0;1497}1498.peach-entry-row-icon.is-breach {1499  border-color: rgba(220,80,60,0.3);1500  color: rgba(220,80,60,0.7);1501}15021503/* Title-initials chip used as the favicon fallback for login entries whose1504 * real favicon hasn't been cached by the browser yet (freshly-imported,1505 * never-visited domains). Background colour is hashed from the title so1506 * the same entry always shows the same chip. The chip fits the same1507 * 26×26 row icon slot the favicon would take. */1508.peach-favicon-initials {1509  display: inline-flex;1510  align-items: center;1511  justify-content: center;1512  width: 100%;1513  height: 100%;1514  border-radius: 4px;1515  font-family: "IBM Plex Mono", monospace;1516  font-size: 0.5625rem;1517  font-weight: 600;1518  letter-spacing: 0.04em;1519  color: rgba(240, 232, 216, 0.92);1520  text-transform: uppercase;1521  user-select: none;1522}1523.peach-entry-row-info { flex: 1; min-width: 0; }1524.peach-entry-row-name {1525  display: block;1526  font-family: var(--font-display);1527  font-size: 1.0625rem;1528  font-style: italic;1529  font-weight: 400;1530  color: var(--peach-t0);1531  line-height: 1.2;1532  white-space: nowrap;1533  overflow: hidden;1534  text-overflow: ellipsis;1535}1536.peach-entry-row-meta {1537  display: block;1538  font-family: "IBM Plex Mono", monospace;1539  font-size: 0.5625rem;1540  color: var(--peach-t2);1541  margin-top: 1px;1542  letter-spacing: 0.05em;1543}1544.peach-entry-row-dot {1545  width: 5px; height: 5px;1546  border-radius: 50%;1547  background: rgba(220,80,60,0.7);1548  flex-shrink: 0;1549}1550.peach-new-entry-row {1551  display: flex;1552  align-items: center;1553  justify-content: center;1554  gap: 6px;1555  width: 100%;1556  padding: 11px;1557  background: transparent;1558  border: none;1559  border-top: 1px solid var(--peach-t3);1560  color: var(--peach-t2);1561  font-family: "IBM Plex Mono", monospace;1562  font-size: 0.5625rem;1563  text-transform: uppercase;1564  letter-spacing: 0.14em;1565  cursor: pointer;1566  flex-shrink: 0;1567  transition: color 120ms ease, background 120ms ease;1568}1569.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }15701571/* ── Multi-select mode ─────────────────────────────────────────────── */15721573/* Select-mode trigger button in sort bar — same shape as trash btn */1574.peach-sort-select-btn {1575  display: flex;1576  align-items: center;1577  justify-content: center;1578  padding: 3px 5px;1579  background: transparent;1580  border: none;1581  cursor: pointer;1582  color: var(--peach-t2);1583  border-radius: 4px;1584  transition: color 140ms ease, background 140ms ease;1585}1586.peach-sort-select-btn:hover {1587  color: var(--peach-t1);1588  background: var(--peach-t3);1589}15901591/* Sort bar in select mode */1592.peach-select-cancel-btn {1593  background: transparent;1594  border: none;1595  padding: 0 4px;1596  cursor: pointer;1597  font-family: "IBM Plex Mono", monospace;1598  font-size: 0.5625rem;1599  letter-spacing: 0.12em;1600  text-transform: uppercase;1601  color: var(--peach-t2);1602  transition: color 140ms ease;1603  flex-shrink: 0;1604}1605.peach-select-cancel-btn:hover { color: var(--peach-t0); }16061607.peach-select-count-label {1608  flex: 1;1609  text-align: center;1610  font-family: "IBM Plex Mono", monospace;1611  font-size: 0.5625rem;1612  letter-spacing: 0.14em;1613  text-transform: uppercase;1614  color: var(--peach-t1);1615}16161617.peach-select-all-btn {1618  background: transparent;1619  border: none;1620  padding: 0 4px;1621  cursor: pointer;1622  font-family: "IBM Plex Mono", monospace;1623  font-size: 0.5625rem;1624  letter-spacing: 0.12em;1625  text-transform: uppercase;1626  color: var(--peach-t2);1627  transition: color 140ms ease;1628  flex-shrink: 0;1629}1630.peach-select-all-btn:hover { color: var(--peach-accent); }16311632/* List in select mode */1633.peach-vault-list.is-selecting .peach-entry-row {1634  cursor: default;1635}1636.peach-vault-list.is-selecting .peach-entry-row:hover {1637  background: rgba(240,232,216,0.02);1638}1639.peach-vault-list.is-selecting .peach-entry-row.is-selected {1640  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1641}1642.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1643  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1644}16451646/* Select indicator circles in icon slot */1647.peach-entry-row-icon.is-select-icon {1648  color: var(--peach-t2);1649}1650.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1651  color: var(--peach-accent);1652}16531654/* Delete action bar at bottom (replaces new-entry row) */1655.peach-select-action-bar {1656  display: flex;1657  align-items: center;1658  justify-content: center;1659  gap: 7px;1660  width: 100%;1661  padding: 11px;1662  background: transparent;1663  border: none;1664  border-top: 1px solid var(--peach-t3);1665  color: var(--peach-t1);1666  font-family: "IBM Plex Mono", monospace;1667  font-size: 0.5625rem;1668  text-transform: uppercase;1669  letter-spacing: 0.14em;1670  cursor: pointer;1671  flex-shrink: 0;1672  transition: color 120ms ease, background 120ms ease;1673}1674.peach-select-action-bar:not(:disabled):hover {1675  color: var(--peach-t0);1676  background: rgba(220,80,60,0.06);1677}1678.peach-select-action-bar:not(:disabled):hover svg {1679  stroke: rgba(220,80,60,0.8);1680}1681.peach-select-action-bar:disabled,1682.peach-select-action-bar.is-empty {1683  color: var(--peach-t2);1684  cursor: default;1685  opacity: 0.5;1686}1687.peach-search-counter-list {1688  white-space: nowrap;1689  flex-shrink: 0;1690}1691.peach-list-empty {1692  min-height: 180px;1693  display: grid;1694  place-items: center;1695  color: var(--peach-t2);1696  font-family: "IBM Plex Mono", monospace;1697  font-size: 0.6875rem;1698}16991700/* ── Settings view ───────────────────────────────────────────────────── */1701.peach-settings-body {1702  flex: 1;1703  overflow-y: auto;1704  min-height: 0;1705  display: flex;1706  flex-direction: column;1707  padding: 2px 0 10px;1708}1709.peach-settings-group {1710  margin: 4px 10px;1711  padding: 9px 14px 11px;1712  border-radius: 12px;1713  border: 1px solid rgba(255, 255, 255, 0.07);1714  background: rgba(26, 20, 16, 0.60);1715  backdrop-filter: blur(10px) saturate(1.3);1716  -webkit-backdrop-filter: blur(10px) saturate(1.3);1717}17181719.peach-settings-group + .peach-settings-group {1720  margin-top: 6px;1721}17221723@supports not (backdrop-filter: blur(1px)) {1724  .peach-settings-group {1725    background: rgba(26, 20, 16, 0.90);1726    border-color: rgba(255, 255, 255, 0.09);1727    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1728  }1729}17301731.light .peach-settings-group,1732[data-theme="light"] .peach-settings-group {1733  background: rgba(245, 237, 226, 0.70);1734  border-color: rgba(26, 18, 8, 0.08);1735  backdrop-filter: blur(10px) saturate(1.2);1736  -webkit-backdrop-filter: blur(10px) saturate(1.2);1737}17381739@supports not (backdrop-filter: blur(1px)) {1740  .light .peach-settings-group,1741  [data-theme="light"] .peach-settings-group {1742    background: rgba(245, 237, 226, 0.97);1743    border-color: rgba(26, 18, 8, 0.10);1744  }1745}1746.peach-export-intro {1747  padding-bottom: 8px;1748}1749.peach-export-card {1750  display: grid;1751  gap: 10px;1752}1753.peach-rune-canvas {1754  border-radius: 8px;1755  background: rgba(0, 0, 0, 0.22);1756  flex: 1;1757  align-self: center;1758}1759.peach-script-input {1760  font-family: "PeachScript", monospace;1761  font-size: 0.6875rem;1762  line-height: 1.9;1763  letter-spacing: 0.06em;1764  color: var(--peach-t0);1765  background: rgba(0, 0, 0, 0.22);1766  border: none;1767  border-radius: 6px;1768  padding: 12px;1769  width: 100%;1770  min-height: 96px;1771  resize: vertical;1772  word-break: break-all;1773  scrollbar-width: none;1774  -ms-overflow-style: none;1775}17761777.peach-script-input::-webkit-scrollbar { display: none; }1778.peach-csv-warning {1779  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1780  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1781  color: var(--peach-t0);1782  border-radius: 6px;1783  padding: 10px 12px;1784  margin-bottom: 8px;1785  font-size: 0.75rem;1786  line-height: 1.45;1787}1788.peach-export-card--primary {1789  background:1790    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1791}17921793/* Export menu — distribute the three format cards across the popup. */1794.peach-export-menu {1795  display: flex;1796  flex-direction: column;1797  flex: 1;1798  min-height: 0;1799}1800.peach-export-menu .peach-settings-group {1801  flex: 1;1802  display: flex;1803  flex-direction: column;1804  justify-content: center;1805  gap: 10px;1806}18071808/* Result view — the script-string fills the remaining vertical surface. */1809.peach-export-result-group {1810  flex: 1;1811  display: flex;1812  flex-direction: column;1813  min-height: 0;1814  border-bottom: none;1815}1816.peach-export-result-group .peach-export-card {1817  flex: 1;1818  min-height: 0;1819  display: flex;1820  flex-direction: column;1821  gap: 10px;1822}1823.peach-export-result-group .peach-export-card-copy {1824  flex-shrink: 0;1825}1826.peach-export-result-group .peach-settings-label {1827  flex-shrink: 0;1828}1829.peach-export-result-group button {1830  flex-shrink: 0;1831}1832.peach-export-card-head {1833  display: flex;1834  align-items: center;1835  justify-content: space-between;1836  gap: 10px;1837}1838.peach-export-card-copy {1839  margin: 0;1840  font-size: 0.75rem;1841  line-height: 1.55;1842  color: var(--peach-t1);1843}1844.peach-export-note {1845  margin: 0;1846  font-size: 0.625rem;1847  line-height: 1.5;1848  color: var(--peach-t2);1849}1850.peach-export-strength-track {1851  height: 3px;1852  background: var(--peach-border);1853  border-radius: 2px;1854  margin: 4px 0 2px;1855  overflow: hidden;1856}1857.peach-export-strength-fill {1858  height: 100%;1859  border-radius: 2px;1860  transition: width 250ms ease, background 250ms ease;1861}1862.peach-export-strength-warn {1863  margin: 0;1864  font-size: 0.625rem;1865  line-height: 1.5;1866  color: #e84040;1867  font-family: "IBM Plex Mono", monospace;1868}1869.peach-export-strength-hint {1870  margin: 0;1871  font-size: 0.625rem;1872  line-height: 1.5;1873  color: var(--peach-t2);1874  font-family: "IBM Plex Mono", monospace;1875}1876.peach-export-pill {1877  display: inline-flex;1878  align-items: center;1879  padding: 4px 8px;1880  border-radius: 999px;1881  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1882  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1883  color: var(--peach-accent);1884  font-family: "IBM Plex Mono", monospace;1885  font-size: 0.5rem;1886  letter-spacing: 0.12em;1887  text-transform: uppercase;1888  white-space: nowrap;1889}1890.peach-export-pill--danger {1891  border-color: rgba(220,80,60,0.22);1892  background: rgba(220,80,60,0.08);1893  color: var(--peach-breach);1894}1895.peach-settings-label {1896  margin: 0 0 6px;1897  font-family: "IBM Plex Mono", monospace;1898  font-size: 0.5rem;1899  text-transform: uppercase;1900  letter-spacing: 0.18em;1901  color: var(--peach-t2);1902}1903.peach-settings-row {1904  display: flex;1905  align-items: center;1906  justify-content: space-between;1907  gap: 12px;1908  min-height: 34px;1909  padding: 6px 0;1910  font-size: 0.8125rem;1911  color: var(--peach-t1);1912}1913.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1914.peach-settings-value {1915  font-family: "IBM Plex Mono", monospace;1916  font-size: 0.625rem;1917  color: var(--peach-t2);1918}19191920.peach-settings-value--status {1921  display: flex;1922  align-items: center;1923  gap: 6px;1924}19251926.peach-settings-link {1927  font-family: "IBM Plex Mono", monospace;1928  font-size: 0.625rem;1929  color: var(--peach-accent);1930  text-decoration: none;1931  cursor: pointer;1932}1933.peach-settings-link:hover {1934  text-decoration: underline;1935}19361937.peach-settings-row--stack {1938  flex-direction: column;1939  align-items: stretch;1940  gap: 6px;1941}19421943.peach-settings-row--top {1944  align-items: flex-start;1945}19461947.peach-settings-row-main {1948  display: flex;1949  flex-direction: column;1950  gap: 4px;1951  flex: 1;1952}1953.peach-toggle {1954  width: 28px; height: 16px;1955  border-radius: 999px;1956  background: var(--peach-t3);1957  border: 1px solid var(--peach-t3);1958  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1959  flex-shrink: 0;1960  transition: background 200ms ease, border-color 200ms ease;1961  cursor: pointer;1962}1963.peach-toggle.is-on {1964  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1965  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1966}1967.peach-toggle-knob {1968  width: 10px; height: 10px;1969  border-radius: 50%;1970  background: var(--peach-t2);1971  flex-shrink: 0;1972  transform: translateX(0px);1973  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1974}1975.peach-toggle.is-on .peach-toggle-knob {1976  background: var(--peach-accent);1977  transform: translateX(12px);1978}1979.peach-settings-footer {1980  display: flex;1981  align-items: center;1982  gap: 8px;1983  margin-top: auto;1984  padding: 14px 16px 8px;1985  font-family: "IBM Plex Mono", monospace;1986  font-size: 0.5625rem;1987  color: var(--peach-t2);1988}19891990/* ── Settings home navigation ──────────────────────────────────────────── */1991.peach-settings-nav-label {1992  margin: 0 0 2px;1993  padding: 12px 16px 4px;1994  font-family: "IBM Plex Mono", monospace;1995  font-size: 0.5rem;1996  text-transform: uppercase;1997  letter-spacing: 0.18em;1998  color: var(--peach-t2);1999}20002001.peach-settings-cat-row {2002  display: flex;2003  align-items: center;2004  gap: 10px;2005  width: 100%;2006  padding: 9px 16px;2007  background: none;2008  border: none;2009  border-bottom: 1px solid var(--peach-t3);2010  cursor: pointer;2011  text-align: left;2012  color: inherit;2013  transition: background var(--peach-dur-80) ease;2014}2015.peach-settings-cat-row:hover {2016  background: var(--peach-t3);2017}2018.peach-settings-cat-row:last-child {2019  border-bottom: none;2020}20212022.peach-settings-cat-icon {2023  width: 28px;2024  height: 28px;2025  border-radius: 7px;2026  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2027  color: var(--peach-accent);2028  display: flex;2029  align-items: center;2030  justify-content: center;2031  flex-shrink: 0;2032}2033/* Light theme: peach-on-cream is too low-contrast — both colors are warm.2034   Darken the icon stroke to ink and bump the bg tint so the icon reads2035   sharply while the cell still feels accent-tinted. */2036.light .peach-settings-cat-icon {2037  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);2038  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));2039}20402041.peach-settings-cat-content {2042  flex: 1;2043  display: flex;2044  flex-direction: column;2045  gap: 2px;2046  min-width: 0;2047}20482049.peach-settings-cat-name {2050  font-size: 0.8125rem;2051  font-weight: 450;2052  color: var(--peach-t0);2053  line-height: 1.2;2054}20552056.peach-settings-cat-desc {2057  font-size: 0.625rem;2058  color: var(--peach-t2);2059  line-height: 1.3;2060  white-space: nowrap;2061  overflow: hidden;2062  text-overflow: ellipsis;2063}20642065.peach-settings-cat-chevron {2066  color: var(--peach-t2);2067  flex-shrink: 0;2068  opacity: 0.5;2069}20702071/* ── Settings sub-view section labels ──────────────────────────────────── */2072.peach-settings-sub-label {2073  margin: 12px 0 4px;2074  font-family: "IBM Plex Mono", monospace;2075  font-size: 0.5rem;2076  text-transform: uppercase;2077  letter-spacing: 0.18em;2078  color: var(--peach-t2);2079}2080.peach-settings-sub-label:first-child {2081  margin-top: 4px;2082}20832084/* ── Settings: collapsible Advanced section ─────────────────────────────── */2085.peach-settings-advanced-toggle {2086  display: flex;2087  align-items: center;2088  justify-content: space-between;2089  width: 100%;2090  background: none;2091  border: none;2092  cursor: pointer;2093  padding: 12px 0 4px;2094  margin: 0;2095  color: inherit;2096}2097.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {2098  color: var(--peach-t1);2099}2100.peach-settings-advanced-chevron {2101  font-size: 0.5625rem;2102  color: var(--peach-t3);2103  letter-spacing: 0;2104  transition: color 120ms ease;2105}21062107/* ── Feedback form ──────────────────────────────────────────────────────── */2108.peach-feedback-group {2109  flex: 1;2110  display: flex;2111  flex-direction: column;2112  border-bottom: none;2113}21142115.peach-feedback-intro {2116  margin: 4px 0 14px;2117  font-size: 0.75rem;2118  line-height: 1.55;2119  color: var(--peach-t1);2120}21212122.peach-feedback-chips {2123  display: flex;2124  flex-wrap: wrap;2125  gap: 6px;2126  margin-bottom: 14px;2127}21282129.peach-feedback-chip {2130  padding: 4px 10px;2131  border-radius: 999px;2132  border: 1px solid var(--peach-t3);2133  background: none;2134  color: var(--peach-t2);2135  font-size: 0.6875rem;2136  font-family: var(--font-ui);2137  cursor: pointer;2138  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2139    background var(--peach-dur-80) ease;2140}2141.peach-feedback-chip:hover {2142  border-color: var(--peach-t2);2143  color: var(--peach-t1);2144}2145.peach-feedback-chip.is-active {2146  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);2147  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));2148  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);2149  box-shadow:2150    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),2151    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);2152  font-weight: 700;2153}21542155.peach-feedback-textarea {2156  flex: 1;2157  width: 100%;2158  min-height: 120px;2159  box-sizing: border-box;2160  background: rgba(0, 0, 0, 0.22);2161  border: 1px solid transparent;2162  border-radius: 6px;2163  color: var(--peach-t0);2164  font-size: 0.75rem;2165  font-family: var(--font-ui);2166  line-height: 1.5;2167  padding: 8px 10px;2168  resize: none;2169  outline: none;2170  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2171}2172.peach-feedback-textarea:focus {2173  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2174  background: rgba(0, 0, 0, 0.28);2175}2176.peach-feedback-textarea:focus {2177  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2178}2179.peach-feedback-textarea::placeholder {2180  color: var(--peach-t2);2181}21822183.peach-feedback-meta {2184  margin: 6px 0 0;2185  font-size: 0.625rem;2186  color: var(--peach-t2);2187  font-family: "IBM Plex Mono", monospace;2188}21892190.peach-feedback-result {2191  margin: 8px 0 0;2192  font-size: 0.6875rem;2193  font-family: "IBM Plex Mono", monospace;2194}2195.peach-feedback-result--ok { color: var(--peach-sync-ok); }2196.peach-feedback-result--err { color: var(--peach-breach); }21972198.peach-feedback-submit {2199  width: 100%;2200  margin-top: 12px;2201  justify-content: center;2202}22032204.peach-feedback-anon {2205  margin: 8px 0 0;2206  font-size: 0.625rem;2207  color: var(--peach-t2);2208  text-align: center;2209}22102211.peach-feedback-thanks {2212  margin: auto 0;2213  padding: 18px 14px;2214  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);2215  border-radius: 8px;2216  background:2217    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),2218    rgba(0, 0, 0, 0.18);2219  color: var(--peach-t1);2220  text-align: center;2221}22222223.peach-feedback-thanks p {2224  margin: 0;2225  font-size: 0.75rem;2226  line-height: 1.5;2227}22282229.peach-feedback-thanks-title {2230  color: var(--peach-t0);2231  font-family: "Cormorant Garamond", serif;2232  font-size: 1.375rem !important;2233  line-height: 1.1 !important;2234  margin-bottom: 8px !important;2235}22362237.peach-passkey-badge {2238  margin-left: 8px;2239  font-size: 0.625rem;2240  letter-spacing: 0.06em;2241  text-transform: uppercase;2242  color: var(--peach-t2);2243  font-family: var(--font-ui);2244  vertical-align: middle;2245}22462247.peach-passkey-delete-btn {2248  color: var(--peach-breach);2249  border-color: rgba(229, 85, 85, 0.25);2250}22512252.peach-passkey-delete-confirm {2253  display: flex;2254  align-items: center;2255  gap: 8px;2256  padding: 8px 10px;2257  background: rgba(229, 85, 85, 0.06);2258  border: 1px solid rgba(229, 85, 85, 0.2);2259  border-radius: 6px;2260}22612262.peach-passkey-delete-confirm-copy {2263  flex: 1;2264  font-size: 0.6875rem;2265  color: var(--peach-t1);2266}22672268.peach-passkey-delete-btn--confirm {2269  color: var(--peach-breach);2270  border-color: rgba(229, 85, 85, 0.4);2271}22722273.peach-passkey-activity {2274  flex-direction: column;2275  align-items: flex-start;2276  gap: 4px;2277}22782279.peach-passkey-meta {2280  font-size: 0.6875rem;2281  color: var(--peach-t2);2282}22832284.peach-passkey-actions {2285  position: relative;2286  z-index: 1;2287  margin-top: 14px;2288  display: flex;2289  flex-direction: column;2290  gap: 8px;2291}22922293.peach-passkey-approval {2294  display: flex;2295  flex-direction: column;2296  align-items: center;2297  padding: 16px 20px 14px;2298  gap: 8px;2299  text-align: center;2300}23012302.peach-passkey-approval-icon {2303  width: 36px;2304  height: 36px;2305  border-radius: 10px;2306  background: var(--peach-s2);2307  border: 1px solid var(--peach-t3);2308  display: flex;2309  align-items: center;2310  justify-content: center;2311  flex-shrink: 0;2312  color: var(--peach-accent);2313}23142315.peach-passkey-approval-icon img,2316.peach-passkey-approval-icon svg {2317  width: 22px;2318  height: 22px;2319  border-radius: 5px;2320}23212322.peach-passkey-approval-rp {2323  font-family: var(--font-ui);2324  font-size: 0.75rem;2325  color: var(--peach-t2);2326  letter-spacing: 0.03em;2327}23282329.peach-passkey-approval-action {2330  font-family: var(--font-display);2331  font-style: italic;2332  font-weight: 300;2333  font-size: 18px;2334  color: var(--peach-t0);2335  line-height: 1.1;2336  margin: 1px 0;2337}23382339.peach-passkey-approval-user {2340  font-family: var(--font-mono);2341  font-size: 0.6875rem;2342  color: var(--peach-t1);2343  background: var(--peach-s2);2344  border: 1px solid var(--peach-t3);2345  border-radius: 4px;2346  padding: 3px 8px;2347}23482349.peach-passkey-approval-notice {2350  font-size: 0.625rem;2351  color: var(--peach-t2);2352  line-height: 1.5;2353  max-width: 220px;2354}23552356.peach-passkey-approval-actions {2357  display: flex;2358  gap: 8px;2359  width: 100%;2360  margin-top: 6px;2361}23622363.peach-passkey-approval-actions .peach-btn {2364  flex: 1;2365}23662367/* ── Inline generator drawer ── */2368.peach-generator-drawer {2369  display: grid;2370  grid-template-rows: 0fr;2371  transition: grid-template-rows 320ms var(--peach-curve-arrival);2372  overflow: hidden;2373}2374.peach-generator-drawer.is-open {2375  grid-template-rows: 1fr;2376}2377.peach-generator-drawer-inner {2378  min-height: 0;2379  overflow: hidden;2380}2381.peach-generator-drawer-content {2382  border-top: 1px solid var(--peach-t3);2383  padding: 8px 0 4px;2384  display: flex;2385  flex-direction: column;2386  gap: 8px;2387}23882389/* ── Compact generator (inside entry edit) ── */2390.peach-generator-drawer-content--compact {2391  border-top: 1px solid var(--peach-t3);2392  padding: 8px 0 2px;2393  gap: 7px;2394}2395.peach-pwgen-compact-display-row {2396  display: flex;2397  align-items: center;2398  gap: 6px;2399}2400.peach-pwgen-compact-output {2401  flex: 1;2402  min-width: 0;2403  font-family: "IBM Plex Mono", monospace;2404  font-size: 0.6875rem;2405  font-weight: 400;2406  letter-spacing: 0.04em;2407  color: var(--peach-t0);2408  background: rgba(240, 232, 216, 0.04);2409  border: 1px solid var(--peach-t3);2410  border-radius: 5px;2411  padding: 5px 8px;2412  line-height: 1.5;2413  outline: none;2414  transition: border-color 120ms ease;2415}24162417.peach-pwgen-compact-output:focus {2418  border-color: var(--peach-t1);2419}2420.peach-pwgen-compact-controls {2421  display: flex;2422  align-items: center;2423  gap: 6px;2424}2425.peach-pwgen-compact-slider {2426  flex: 1;2427  min-width: 0;2428  height: 2px !important;2429}2430.peach-pwgen-compact-controls .peach-pwgen-len-num {2431  flex-shrink: 0;2432  min-width: 18px;2433  text-align: right;2434}2435.peach-pwgen-compact-pills {2436  display: flex;2437  gap: 3px;2438  flex-shrink: 0;2439}2440.peach-pwgen-compact-pills .peach-pwgen-pill {2441  padding: 2px 7px;2442  font-size: 0.5rem;2443}2444.peach-pwgen-compact-use {2445  flex-shrink: 0;2446  font-size: 0.625rem !important;2447  padding: 3px 9px !important;2448  min-height: 22px !important;2449  border-radius: 5px !important;2450}24512452/* ── Password edit row (input + eye toggle side-by-side) ── */2453.peach-password-edit-row {2454  display: flex;2455  align-items: center;2456  gap: 6px;2457}2458.peach-password-edit-row .peach-inline-input {2459  flex: 1;2460  min-width: 0;2461}24622463/* ── Generate toggle link ── */2464.peach-generate-toggle-link {2465  display: inline-flex;2466  align-items: center;2467  gap: 5px;2468  background: none;2469  border: none;2470  padding: 0;2471  cursor: pointer;2472  font-family: "IBM Plex Mono", monospace;2473  font-size: 0.625rem;2474  color: var(--peach-t2);2475  letter-spacing: 0.04em;2476  transition: color 120ms ease;2477  align-self: flex-start;2478}2479.peach-generate-toggle-link:hover {2480  color: var(--peach-accent);2481}24822483/* Holds the generate + history toggle links on one row under the editor. */2484.peach-password-edit-links {2485  display: flex;2486  align-items: center;2487  gap: 14px;2488  flex-wrap: wrap;2489}24902491/* ── Past-password history list ── */2492.peach-password-history {2493  display: grid;2494  gap: 4px;2495  margin-top: 2px;2496  max-height: 168px;2497  overflow-y: auto;2498  scrollbar-width: thin;2499}2500.peach-history-row {2501  display: flex;2502  align-items: center;2503  justify-content: space-between;2504  gap: 8px;2505  padding: 5px 7px;2506  border-radius: 7px;2507  background: color-mix(in srgb, var(--peach-accent) 5%, transparent);2508  border: 1px solid color-mix(in srgb, var(--peach-accent) 9%, transparent);2509}2510.peach-history-main {2511  display: flex;2512  flex-direction: column;2513  gap: 1px;2514  min-width: 0;2515  flex: 1;2516}2517.peach-history-pw {2518  font-family: "IBM Plex Mono", monospace;2519  font-size: 0.6875rem;2520  color: var(--peach-t1);2521  white-space: nowrap;2522  overflow: hidden;2523  text-overflow: ellipsis;2524}2525.peach-history-pw .peach-password-mask {2526  letter-spacing: 0.08em;2527  color: var(--peach-t2);2528}2529.peach-history-age {2530  font-family: "IBM Plex Mono", monospace;2531  font-size: 0.5625rem;2532  color: var(--peach-t3, var(--peach-t2));2533  letter-spacing: 0.03em;2534}2535.peach-history-actions {2536  display: flex;2537  align-items: center;2538  gap: 2px;2539  flex-shrink: 0;2540}2541.peach-history-use {2542  font-family: "IBM Plex Mono", monospace;2543  font-size: 0.5625rem;2544  letter-spacing: 0.05em;2545  padding: 3px 7px;2546}2547.peach-history-empty {2548  font-family: "IBM Plex Mono", monospace;2549  font-size: 0.625rem;2550  line-height: 1.45;2551  color: var(--peach-t2);2552  padding: 6px 8px;2553  border-radius: 7px;2554  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);2555  border: 1px solid color-mix(in srgb, var(--peach-accent) 8%, transparent);2556}25572558/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2559.peach-entry-body {2560  flex: 1;2561  overflow-y: auto;2562  overflow-x: hidden;2563  scrollbar-width: none;2564  -ms-overflow-style: none;2565  overscroll-behavior: contain;2566  display: grid;2567  gap: 10px;2568  align-content: start;2569  padding: 10px 20px 14px;2570  min-width: 0;2571  min-height: 0;2572}2573.peach-entry-body::-webkit-scrollbar { display: none; }25742575/* Type-toggle pills + inline note toolbar */2576.peach-new-type-row {2577  display: flex;2578  align-items: center;2579  gap: 6px;2580  margin-bottom: 2px;2581}2582.peach-new-type-btn {2583  background: transparent;2584  border: 1px solid var(--peach-t3);2585  border-radius: 12px;2586  padding: 3px 10px;2587  font-family: "IBM Plex Mono", monospace;2588  font-size: 0.5625rem;2589  letter-spacing: 0.12em;2590  text-transform: uppercase;2591  color: var(--peach-t2);2592  cursor: pointer;2593  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2594}2595.peach-new-type-btn.is-active {2596  color: var(--peach-t0);2597  border-color: var(--peach-accent);2598  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2599}2600.peach-new-type-btn:not(.is-active):hover {2601  color: var(--peach-t1);2602  border-color: var(--peach-t2);2603}26042605/* Editable title */2606.peach-new-title-wrap { margin: 0 0 2px; }2607.peach-new-title-input {2608  background: transparent;2609  border: none;2610  outline: none;2611  width: 100%;2612  color: var(--peach-t0);2613  font-family: var(--font-display);2614  font-style: italic;2615  font-weight: 400;2616  font-size: 40px;2617  line-height: 0.95;2618  caret-color: var(--peach-accent);2619}2620.peach-new-title-input::placeholder { color: var(--peach-t2); }26212622/* Editable domain field */2623.peach-domain-edit-row {2624  display: flex;2625  align-items: center;2626  gap: 6px;2627}26282629.peach-domain-edit-row .peach-domain-value--edit {2630  flex: 1;2631  width: 0;2632}26332634.peach-domain-url-btn {2635  flex-shrink: 0;2636  background: transparent;2637  border: none;2638  cursor: pointer;2639  color: var(--peach-t3);2640  padding: 2px 3px;2641  display: flex;2642  align-items: center;2643  line-height: 0;2644  border-radius: 3px;2645  transition: color 120ms ease;2646}26472648.peach-domain-url-btn:hover {2649  color: var(--peach-accent);2650}26512652.peach-domain-value--edit {2653  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2654  font-size: 0.625rem;2655  font-style: italic;2656  letter-spacing: 0.12em;2657  color: var(--peach-t1);2658  background: transparent;2659  border: none;2660  border-bottom: 1px solid var(--peach-t3);2661  outline: none;2662  width: 100%;2663  padding: 2px 0;2664  caret-color: var(--peach-accent);2665  transition: border-color 140ms ease, color 140ms ease;2666}2667.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2668.peach-domain-value--edit:focus {2669  border-bottom-color: rgba(240, 232, 216, 0.28);2670  color: var(--peach-t0);2671}26722673/* Editable field values (username, password, totp) */2674.peach-field-value--edit {2675  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2676  font-size: 0.8125rem;2677  color: var(--peach-t0);2678  background: transparent;2679  border: none;2680  border-bottom: 1px solid var(--peach-t3);2681  outline: none;2682  flex: 1;2683  min-width: 0;2684  padding: 3px 0;2685  caret-color: var(--peach-accent);2686  transition: border-color 140ms ease, color 140ms ease;2687}2688.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2689.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2690.peach-field-value--edit:focus {2691  border-bottom-color: rgba(240, 232, 216, 0.28);2692  color: var(--peach-t0);2693}26942695/* "+ add optional field" links */2696.peach-entry-add-links {2697  display: flex;2698  gap: 12px;2699  flex-wrap: wrap;2700  margin-top: -2px;2701}2702.peach-add-field-link {2703  background: transparent;2704  border: none;2705  padding: 0;2706  cursor: pointer;2707  font-family: "IBM Plex Mono", monospace;2708  font-size: 0.5625rem;2709  letter-spacing: 0.1em;2710  text-transform: uppercase;2711  color: var(--peach-t2);2712  transition: color 140ms ease;2713}2714.peach-add-field-link:hover { color: var(--peach-accent); }27152716/* ── New entry form (legacy classes) ────────────────────────────────── */2717.peach-new-body {2718  flex: 1;2719  overflow-y: auto;2720  padding: 10px 20px 14px;2721}2722.peach-new-name-input {2723  background: transparent;2724  border: none;2725  outline: none;2726  width: 100%;2727  color: var(--peach-t0);2728  font-family: var(--font-display);2729  font-style: italic;2730  font-weight: 400;2731  font-size: 40px;2732  line-height: 0.95;2733  caret-color: var(--peach-accent);2734}2735.peach-new-name-input::placeholder { color: var(--peach-t2); }2736.peach-new-field-input {2737  background: transparent;2738  border: none;2739  outline: none;2740  flex: 1;2741  min-width: 0;2742  caret-color: var(--peach-accent);2743}2744.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }27452746/* ── Canary card ── */2747.peach-canary-card {2748  border: 1px solid rgba(217, 160, 48, 0.2);2749  background: rgba(217, 160, 48, 0.03);2750  border-radius: 8px;2751  padding: 12px;2752}27532754.peach-canary-settings-header {2755  display: flex;2756  align-items: center;2757  justify-content: space-between;2758  cursor: pointer;2759  user-select: none;2760}27612762.peach-canary-card .peach-label {2763  color: rgba(217, 160, 48, 0.85);2764}27652766.peach-canary-card .peach-new-field-input {2767  border-color: rgba(217, 160, 48, 0.25);2768}27692770.peach-canary-card .peach-new-field-input:focus {2771  border-color: rgba(217, 160, 48, 0.5);2772}27732774.peach-canary-body {2775  margin-top: 12px;2776  display: flex;2777  flex-direction: column;2778  gap: 10px;2779}27802781.peach-canary-explainer {2782  display: flex;2783  gap: 10px;2784  padding: 10px 12px;2785  border-radius: 10px;2786  background: rgba(217, 160, 48, 0.06);2787  border: 1px solid rgba(217, 160, 48, 0.22);2788  margin-bottom: 4px;2789}27902791.peach-canary-explainer-icon {2792  font-size: 1rem;2793  flex-shrink: 0;2794  line-height: 1.2;2795}27962797.peach-canary-explainer-title {2798  font-family: var(--font-ui);2799  font-size: 0.6875rem;2800  font-weight: 500;2801  color: rgba(217, 160, 48, 0.9);2802  margin: 0 0 3px;2803}28042805.peach-canary-explainer-copy {2806  font-family: var(--font-ui);2807  font-size: 0.625rem;2808  color: var(--peach-t2);2809  line-height: 1.55;2810  margin: 0;2811}28122813.peach-canary-hint {2814  font-size: 0.625rem;2815  color: var(--peach-t2);2816  font-family: Inter, system-ui, sans-serif;2817  line-height: 1.5;2818  margin-top: 4px;2819}28202821.peach-canary-actions-row {2822  display: flex;2823  align-items: center;2824  gap: 8px;2825}28262827.peach-canary-test-btn {2828  border-color: rgba(217, 160, 48, 0.3);2829  color: rgba(217, 160, 48, 0.85);2830}28312832.peach-canary-test-result {2833  font-size: 0.625rem;2834  font-family: Inter, system-ui, sans-serif;2835}28362837.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2838.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }28392840.peach-canary-badge {2841  display: flex;2842  position: relative;2843  z-index: 1;2844  align-items: center;2845  gap: 5px;2846  padding: 4px 10px;2847  background: rgba(217, 160, 48, 0.12);2848  border: 1px solid rgba(217, 160, 48, 0.35);2849  border-radius: 6px;2850  margin-bottom: 6px;2851  width: fit-content;2852}28532854.peach-canary-badge-label {2855  font-size: 0.625rem;2856  letter-spacing: 0.06em;2857  color: rgba(217, 160, 48, 0.9);2858  font-family: var(--font-ui);2859  text-transform: uppercase;2860}28612862.peach-canary-badge-icon {2863  font-size: 0.6875rem;2864}28652866.peach-canary-suppress-row {2867  display: flex;2868  align-items: center;2869  gap: 8px;2870  padding: 6px 10px;2871  background: rgba(217, 160, 48, 0.08);2872  border-radius: 6px;2873  margin-bottom: 8px;2874}28752876.peach-canary-suppress-label {2877  font-size: 0.6875rem;2878  color: rgba(217, 160, 48, 0.85);2879  cursor: pointer;2880  font-family: var(--font-ui);2881  letter-spacing: 0.04em;2882}28832884.peach-regen-panel {2885  position: relative;2886  z-index: 1;2887  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2888  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2889  border-radius: 8px;2890  padding: 12px;2891  margin-bottom: 8px;2892}28932894.peach-regen-panel-header {2895  display: flex;2896  align-items: center;2897  justify-content: space-between;2898  margin-bottom: 10px;2899}29002901.peach-regen-panel-title {2902  font-size: 0.6875rem;2903  font-weight: 600;2904  letter-spacing: 0.06em;2905  text-transform: uppercase;2906  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2907}29082909.peach-regen-output {2910  background: rgba(0, 0, 0, 0.2);2911  border-radius: 6px;2912  padding: 10px;2913  margin-bottom: 10px;2914  font-family: var(--font-mono);2915  font-size: 0.8125rem;2916  word-break: break-all;2917  color: var(--peach-t1);2918}29192920.peach-regen-actions {2921  display: flex;2922  gap: 6px;2923}29242925.peach-regen-actions--spaced {2926  margin-bottom: 8px;2927}29282929.peach-regen-action-grow {2930  flex: 1;2931}29322933.peach-regen-copy-btn {2934  padding: 0 8px;2935}29362937.peach-regen-success {2938  position: relative;2939  z-index: 1;2940  background: rgba(40, 180, 80, 0.1);2941  border: 1px solid rgba(40, 180, 80, 0.3);2942  border-radius: 8px;2943  padding: 10px 12px;2944  margin-bottom: 8px;2945  display: flex;2946  align-items: center;2947  gap: 8px;2948  font-size: 0.6875rem;2949  color: rgba(40, 180, 80, 0.9);2950}29512952/* ── Note editor overlay ── */2953.peach-note-editor {2954  position: absolute;2955  inset: 0;2956  z-index: 200;2957  display: flex;2958  flex-direction: column;2959  background:2960    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2961    var(--peach-bg);2962  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2963}29642965.peach-note-editor-header {2966  display: flex;2967  align-items: center;2968  gap: 10px;2969  padding: 14px 16px 10px;2970  border-bottom: 1px solid var(--peach-t3);2971  flex-shrink: 0;2972}29732974.peach-note-editor-back {2975  background: transparent;2976  border: none;2977  cursor: pointer;2978  color: var(--peach-t2);2979  padding: 4px 6px;2980  border-radius: 6px;2981  display: flex;2982  align-items: center;2983  transition: color 120ms ease, background 120ms ease;2984  flex-shrink: 0;2985}2986.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }29872988.peach-note-editor-label {2989  flex: 1;2990  font-family: var(--font-display);2991  font-style: italic;2992  font-size: 0.9375rem;2993  color: var(--peach-t1);2994  letter-spacing: 0.02em;2995}29962997.peach-note-editor-save-btn {2998  background: transparent;2999  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);3000  border-radius: 8px;3001  color: var(--peach-accent);3002  font-family: "IBM Plex Mono", monospace;3003  font-size: 0.625rem;3004  letter-spacing: 0.06em;3005  text-transform: uppercase;3006  padding: 3px 10px;3007  cursor: pointer;3008  transition: background 120ms ease, border-color 120ms ease;3009}3010.peach-note-editor-save-btn:hover:not(:disabled) {3011  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3012  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3013}3014.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }30153016.peach-note-toolbar {3017  display: flex;3018  align-items: center;3019  gap: 3px;3020  padding: 6px 14px 5px;3021  border-bottom: 1px solid var(--peach-t3);3022  flex-shrink: 0;3023}30243025.peach-note-tool-btn {3026  background: transparent;3027  border: 1px solid transparent;3028  border-radius: 5px;3029  color: var(--peach-t2);3030  font-family: "IBM Plex Mono", monospace;3031  font-size: 0.625rem;3032  letter-spacing: 0.04em;3033  padding: 2px 8px;3034  cursor: pointer;3035  line-height: 1.6;3036  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;3037}3038.peach-note-tool-btn:hover {3039  background: var(--peach-t4);3040  color: var(--peach-t0);3041  border-color: var(--peach-t3);3042}30433044.peach-note-tool-icon {3045  padding: 3px 7px;3046  display: inline-flex;3047  align-items: center;3048  justify-content: center;3049}30503051.peach-note-tool-divider {3052  width: 1px;3053  height: 14px;3054  background: var(--peach-t3);3055  margin: 0 4px;3056  flex-shrink: 0;3057}30583059.peach-note-editor-body {3060  flex: 1;3061  overflow-y: auto;3062  padding: 16px 20px 20px;3063  outline: none;3064  font-family: var(--font-display);3065  font-size: 1rem;3066  line-height: 1.75;3067  color: var(--peach-t0);3068  scrollbar-width: none;3069  word-break: break-word;3070}3071.peach-note-editor-body:empty::before {3072  content: "write your note…";3073  color: var(--peach-t3);3074  font-style: italic;3075  pointer-events: none;3076}30773078/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */3079.peach-note-editor-inline {3080  display: flex;3081  flex-direction: column;3082  flex: 1;3083  min-height: 0;3084}3085.peach-note-editor-body--inline {3086  flex: 1;3087  min-height: 0;3088  font-size: 0.9375rem;3089  padding: 10px 20px 14px;3090}30913092/* Full-width toolbar row inside the body (Add.tsx note type).3093   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */3094.peach-note-toolbar-body {3095  display: flex;3096  align-items: center;3097  gap: 3px;3098  padding: 5px 20px 4px;3099  margin: 2px -20px 0;3100  border-bottom: 1px solid var(--peach-t3);3101  flex-shrink: 0;3102}31033104/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)3105   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn3106   and .peach-note-tool-divider button-level styles. */3107.peach-note-toolbar-inline {3108  display: flex;3109  align-items: center;3110  gap: 3px;3111  margin-left: auto;3112  padding-left: 10px;3113  border-left: 1px solid var(--peach-t3);3114  min-height: 22px;3115}31163117/* Entry.tsx toolbar row (no tabs, toolbar only) */3118.peach-entry-note-toolbar-row {3119  display: flex;3120  align-items: center;3121  margin: 4px 0 6px;3122  position: relative;3123  z-index: 1;3124}3125.peach-entry-note-toolbar-row .peach-note-toolbar-inline {3126  border-left: none;3127  padding-left: 0;3128  margin-left: 0;3129}31303131/* Note body — fills available vertical space in Add.tsx and Entry.tsx */3132.peach-note-body {3133  display: flex;3134  flex-direction: column;3135  flex: 1;3136  min-height: 0;3137  margin: 4px 0 0;3138}3139.peach-entry-body--new .peach-note-body {3140  margin: 8px -20px 0;3141}31423143/* Add.tsx body is a grid by default; swap to a flex column when a note is3144   active so the note body can stretch and pin the tags row to the bottom. */3145.peach-entry-body--new:has(.peach-note-body) {3146  display: flex;3147  flex-direction: column;3148}31493150/* Rich content element styles (editor + display) */3151.peach-note-editor-body h2,3152.peach-note-content h2 {3153  font-family: var(--font-display);3154  font-size: 20px;3155  font-weight: 600;3156  font-style: italic;3157  color: var(--peach-t0);3158  margin: 6px 0 2px;3159  line-height: 1.3;3160}3161.peach-note-editor-body ul,3162.peach-note-content ul {3163  padding-left: 18px;3164  margin: 3px 0;3165  list-style: disc;3166}3167.peach-note-editor-body ol,3168.peach-note-content ol {3169  padding-left: 18px;3170  margin: 3px 0;3171  list-style: decimal;3172}3173.peach-note-editor-body li,3174.peach-note-content li { margin: 2px 0; }3175.peach-note-editor-body hr,3176.peach-note-content hr {3177  border: none;3178  border-top: 1px solid var(--peach-t3);3179  margin: 10px 0;3180}31813182/* font size elements from execCommand */3183.peach-note-editor-body font[size="1"],3184.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }3185.peach-note-editor-body font[size="2"],3186.peach-note-content font[size="2"] { font-size: 0.8125rem; }3187.peach-note-editor-body font[size="3"],3188.peach-note-content font[size="3"] { font-size: 1rem; }3189.peach-note-editor-body font[size="4"],3190.peach-note-content font[size="4"] { font-size: 20px; }3191.peach-note-editor-body font[size="5"],3192.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }31933194/* bold / italic inside the editor and note display */3195.peach-note-editor-body b, .peach-note-editor-body strong,3196.peach-note-content b, .peach-note-content strong { font-weight: 700; }3197.peach-note-editor-body em, .peach-note-editor-body i,3198.peach-note-content em, .peach-note-content i { font-style: italic; }31993200/* note display — rendered HTML, no pre-wrap */3201.peach-note-content {3202  overflow: auto;3203  max-height: 340px;3204  word-break: break-word;3205}32063207/* ── Note textarea ── */3208.peach-note-textarea {3209  width: 100%;3210  min-height: 180px;3211  max-height: 280px;3212  resize: vertical;3213  background: var(--peach-t4);3214  border: 1px solid var(--peach-t3);3215  border-radius: 8px;3216  padding: 10px 12px;3217  font-family: "IBM Plex Mono", monospace;3218  font-size: 0.75rem;3219  line-height: 1.7;3220  color: var(--peach-t1);3221  outline: none;3222  transition: border-color 150ms ease;3223}32243225.peach-note-textarea:focus {3226  border-color: var(--peach-t2);3227}32283229.peach-note-char-count {3230  font-family: "IBM Plex Mono", monospace;3231  font-size: 0.5625rem;3232  color: var(--peach-t3);3233  text-align: right;3234  margin-top: 4px;3235  letter-spacing: 0.1em;3236}32373238/* ── Field input baseline ── */3239.peach-new-field-input {3240  width: 100%;3241  background: transparent;3242  border: none;3243  border-bottom: 1px solid var(--peach-t3);3244  padding: 4px 0;3245  color: var(--peach-t1);3246  font-family: "IBM Plex Mono", monospace;3247  font-size: 0.8125rem;3248  outline: none;3249  transition: border-color 150ms ease;3250}32513252.peach-new-field-input:focus {3253  border-bottom-color: var(--peach-t0);3254  color: var(--peach-t0);3255}32563257.peach-new-name-input {3258  width: 100%;3259  background: transparent;3260  border: none;3261  border-bottom: 1px solid var(--peach-t3);3262  padding: 6px 0;3263  font-family: var(--font-display);3264  font-style: italic;3265  font-size: 28px;3266  color: var(--peach-t0);3267  outline: none;3268  transition: border-color 150ms ease;3269}32703271.peach-new-name-input:focus {3272  border-bottom-color: var(--peach-t1);3273}32743275.peach-new-name-input::placeholder {3276  color: var(--peach-t2);3277  font-style: italic;3278}32793280.peach-new-field-input::placeholder {3281  color: var(--peach-t3);3282}32833284/* ── Demo entrance animation ── */3285#hd-shell {3286  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3287}3288@keyframes hd-shell-enter {3289  from { opacity: 0; transform: scale(0.96) translateY(16px); }3290  to   { opacity: 1; transform: scale(1) translateY(0); }3291}32923293/* ── Keyframes ── */3294@keyframes peach-char-enter {3295  from { opacity: 0; transform: translateY(0.22em); }3296  to   { opacity: 1; transform: translateY(0); }3297}3298@keyframes peach-content-enter {3299  from { opacity: 0.96; transform: translateY(4px); }3300  to   { opacity: 1; transform: translateY(0); }3301}3302@keyframes peach-content-exit {3303  from { opacity: 1; transform: translateY(0); }3304  to   { opacity: 0.92; transform: translateY(-3px); }3305}3306@keyframes peach-screen-enter {3307  from { opacity: 0; transform: translateY(14px); }3308  to   { opacity: 1; transform: translateY(0); }3309}3310@keyframes peach-shell-fade-in {3311  from { opacity: 0; }3312  to   { opacity: 1; }3313}3314@keyframes peach-veil-in {3315  from { opacity: 0; }3316  to   { opacity: 1; }3317}3318@keyframes peach-lock-settle {3319  0%   { transform: scale(0.9); }3320  65%  { transform: scale(1.08); }3321  100% { transform: scale(1); }3322}3323@keyframes peach-copy-confirm {3324  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3325  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); }3326}3327@keyframes peach-copy-retreat {3328  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); }3329  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3330}3331@keyframes peach-copy-flood {3332  from { opacity: 0; transform: scaleX(0.15); }3333  to   { opacity: 1; transform: scaleX(1); }3334}3335@keyframes peach-copy-icon-settle {3336  from  { transform: scale(0.84); }3337  70%   { transform: scale(1.08); }3338  to    { transform: scale(1); }3339}3340@keyframes peach-copy-sheen-retreat {3341  from { opacity: 1; transform: scaleX(1); }3342  to   { opacity: 0; transform: scaleX(0.15); }3343}3344@keyframes peach-copy-drain {3345  from { width: 100%; }3346  to   { width: 0; }3347}3348@keyframes peach-shake {3349  0%, 100% { transform: translateX(0); }3350  20%      { transform: translateX(-6px); }3351  40%      { transform: translateX(6px); }3352  60%      { transform: translateX(-4px); }3353  80%      { transform: translateX(4px); }3354}33553356@keyframes pip-pulse {3357  0% { transform: scale(1); }3358  40% { transform: scale(2.2); }3359  100% { transform: scale(1); }3360}336133623363/* ── Password generator ── */3364.peach-pwgen-body {3365  flex: 1; overflow-y: auto;3366  display: flex; flex-direction: column;3367}3368.peach-policy-badge {3369  display: flex; align-items: center;3370  padding: 6px 20px 0;3371  font-size: 0.625rem; font-family: Inter, sans-serif;3372  color: var(--peach-t2); letter-spacing: 0.04em;3373}3374.peach-pwgen-display {3375  padding: 14px 20px 12px;3376  border-bottom: 1px solid var(--peach-t3);3377  display: flex; align-items: flex-start; gap: 10px;3378}3379.peach-pwgen-display-row {3380  display: flex;3381  align-items: flex-start;3382  gap: 8px;3383  padding-bottom: 8px;3384  border-bottom: 1px solid var(--peach-t3);3385}3386.peach-pwgen-output {3387  flex: 1; min-width: 0; margin: 0;3388  font-family: "IBM Plex Mono", monospace;3389  font-size: 0.8125rem; color: var(--peach-t0);3390  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3391  white-space: normal;3392  padding: 10px 12px;3393  background: var(--peach-t4);3394  border-radius: 6px;3395  min-height: 36px;3396}3397.peach-pwgen-output-display {3398  flex: 1;3399  min-width: 0;3400  margin: 0;3401  font-family: var(--font-display);3402  font-style: italic;3403  font-weight: 300;3404  font-size: 32px;3405  line-height: 1.05;3406  color: var(--peach-t0);3407  word-break: break-all;3408  overflow-wrap: break-word;3409  white-space: normal;3410  letter-spacing: 0.02em;3411}3412.peach-pwgen-display-actions {3413  display: flex;3414  flex-direction: column;3415  gap: 4px;3416  flex-shrink: 0;3417  margin-top: 2px;3418}3419.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3420.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3421.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3422.peach-pwgen-len-num {3423  font-family: "IBM Plex Mono", monospace;3424  font-size: 0.75rem; color: var(--peach-accent);3425}3426.peach-pwgen-len-num--edit {3427  cursor: text;3428  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3429}3430.peach-pwgen-len-input {3431  font-family: "IBM Plex Mono", monospace;3432  font-size: 0.75rem;3433  color: var(--peach-accent);3434  background: transparent;3435  border: none;3436  border-bottom: 1px solid var(--peach-accent);3437  outline: none;3438  width: 32px;3439  text-align: right;3440  padding: 0;3441}3442.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3443.peach-pwgen-toggles { display: flex; flex-direction: column; }3444.peach-pwgen-charset-pills {3445  display: flex;3446  gap: 6px;3447  flex-wrap: wrap;3448}3449.peach-pwgen-pill {3450  padding: 4px 11px;3451  border-radius: 999px;3452  border: 1px solid var(--peach-t3);3453  background: transparent;3454  color: var(--peach-t2);3455  font-family: "IBM Plex Mono", monospace;3456  font-size: 0.5625rem;3457  letter-spacing: 0.08em;3458  cursor: pointer;3459  transition: all 150ms ease;3460}3461.peach-pwgen-pill.is-on {3462  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3463  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3464  color: var(--peach-accent);3465}3466.peach-pwgen-pill:not(.is-on):hover {3467  color: var(--peach-t1);3468  border-color: var(--peach-t2);3469}3470.peach-pwgen-use-btn {3471  width: 100%;3472  min-height: 34px;3473  border-radius: 8px;3474  margin-top: 2px;3475}3476.peach-generator-constraint-note {3477  font-family: 'IBM Plex Mono', monospace;3478  font-size: 10px;3479  color: var(--peach-t3);3480  letter-spacing: 0.04em;3481  margin: 0;3482  transition: opacity 200ms ease;3483}3484.peach-pwgen-toggle-row {3485  display: flex; align-items: center; justify-content: space-between;3486  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3487}3488.peach-pwgen-toggle-row:last-child { border-bottom: none; }3489.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }34903491/* Peach popup should not expose native scrollbars on internal panels. */3492.peach-settings-body,3493.peach-new-body,3494.peach-pwgen-body,3495.lock-screen,3496.peach-import-preview {3497  scrollbar-width: none;3498  -ms-overflow-style: none;3499  overscroll-behavior: contain;3500}3501.peach-settings-body::-webkit-scrollbar,3502.peach-new-body::-webkit-scrollbar,3503.peach-pwgen-body::-webkit-scrollbar,3504.lock-screen::-webkit-scrollbar,3505.peach-import-preview::-webkit-scrollbar {3506  width: 0;3507  height: 0;3508  display: none;3509}35103511.lock-screen {3512  height: 100%;3513  min-height: 100%;3514  overflow-y: auto;3515  padding: 18px 18px 16px;3516  gap: 14px;3517  grid-template-rows: auto auto auto 1fr auto;3518  align-content: stretch;3519  position: relative;3520  isolation: isolate;3521}3522.peach-screen.lock-screen--vault-stage {3523  display: flex;3524  flex-direction: column;3525  justify-content: flex-start;3526  gap: 18px;3527  padding: 20px 18px 18px;3528  overflow: hidden;3529}3530.peach-screen.lock-screen--vault-stage .peach-lock-panel {3531  margin-top: 0;3532}3533.lock-screen--onboarding {3534  display: flex;3535  flex-direction: column;3536  gap: 12px;3537  justify-content: flex-start;3538}35393540.lock-screen::before {3541  content: "";3542  position: absolute;3543  inset: 12px 18px auto auto;3544  width: 160px;3545  height: 160px;3546  border-radius: 999px;3547  background:3548    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%);3549  filter: blur(6px);3550  opacity: 0.7;3551  pointer-events: none;3552  z-index: 0;3553}35543555.peach-lock-rune-string {3556  flex: 1;3557  display: flex;3558  align-items: center;3559  justify-content: center;3560  gap: 6px;3561  font-family: PeachScript, monospace;3562  font-size: 0.8125rem;3563  letter-spacing: 0.05em;3564  pointer-events: none;3565  user-select: none;3566  position: relative;3567  z-index: 1;3568}35693570.peach-lock-rune-string span {3571  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3572  text-shadow:3573    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3574    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3575  transition: color 0.9s ease, text-shadow 0.9s ease;3576}35773578.peach-lock-rune-string span.is-glowing {3579  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3580  text-shadow:3581    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3582    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3583}35843585.lock-screen-header {3586  display: flex;3587  align-items: center;3588  justify-content: space-between;3589  position: relative;3590  z-index: 1;3591}35923593.lock-password-input.shake {3594  animation: peach-shake 300ms ease-in-out;3595}35963597.peach-hint-error {3598  color: rgba(220, 80, 60, 0.92);3599}36003601.peach-onboarding-headline {3602  margin: 0;3603  font-family: var(--font-display);3604  font-size: 35px;3605  line-height: 0.88;3606  font-style: italic;3607  font-weight: 400;3608  max-width: 252px;3609}36103611.peach-lock-copy {3612  display: grid;3613  gap: 8px;3614  position: relative;3615  z-index: 1;3616}36173618.peach-lock-copy--onboarding {3619  gap: 10px;3620}36213622.peach-lock-hero {3623  position: relative;3624  z-index: 1;3625  display: grid;3626  gap: 8px;3627  min-height: 0;3628  padding: 4px 2px 0;3629  border: none;3630  border-radius: 0;3631  background: transparent;3632  box-shadow: none;3633}3634.peach-lock-hero-art {3635  position: absolute;3636  right: -8px;3637  top: -6px;3638  width: 120px;3639  height: 120px;3640  display: flex;3641  align-items: center;3642  justify-content: center;3643  pointer-events: none;3644  opacity: 0.12;3645  filter: saturate(0.9);3646}3647.peach-lock-hero-mark {3648  width: 100%;3649  height: 100%;3650}3651/* Peach body stays brand-peach across every accent — we don't want a3652   green or blue peach when sage/sky is selected. Leaf + vein keep the3653   sage tint because a real peach has a sage leaf. In the new brand-kit3654   mark the leaf is path 1 and the vein stroke is path 2; the body and3655   back-lobe (paths 3 + 4) must stay untouched. */3656.peach-lock-hero-mark path:nth-child(1) {3657  fill: rgba(123, 144, 96, 0.88);3658}3659.peach-lock-hero-mark path:nth-child(2) {3660  stroke: rgba(94, 122, 66, 0.95);3661}3662.peach-lock-hero > *:not(.peach-lock-hero-art) {3663  position: relative;3664  z-index: 1;3665}36663667.peach-lock-eyebrow {3668  display: inline-flex;3669  align-items: center;3670  width: fit-content;3671  padding: 4px 9px;3672  border-radius: 999px;3673  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3674  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3675  color: var(--peach-t0);3676  font-family: "IBM Plex Mono", monospace;3677  font-size: 0.5rem;3678  letter-spacing: 0.18em;3679  text-transform: uppercase;3680}36813682.peach-lock-label-row {3683  display: flex;3684  align-items: center;3685  justify-content: space-between;3686  margin-bottom: 0;3687}36883689.peach-lock-reveal-btn {3690  display: inline-flex;3691  align-items: center;3692  gap: 4px;3693  background: none;3694  border: none;3695  cursor: pointer;3696  font-family: "IBM Plex Mono", monospace;3697  font-size: 0.5625rem;3698  letter-spacing: 0.06em;3699  color: var(--peach-t2);3700  padding: 2px 0;3701  transition: color 150ms ease;3702}37033704.peach-lock-reveal-btn:hover {3705  color: var(--peach-t1);3706}37073708.peach-lock-warning {3709  color: rgba(220, 80, 60, 0.85) !important;3710  line-height: 1.5;3711}37123713.peach-onboarding-cards {3714  display: grid;3715  gap: 8px;3716  position: relative;3717  z-index: 1;3718}37193720.peach-lock-panel {3721  position: relative;3722  z-index: 1;3723  display: grid;3724  gap: 9px;3725  padding: 14px 16px 15px;3726  border-radius: 18px;3727  border: 1px solid var(--peach-t3);3728  background:3729    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3730  box-shadow:3731    inset 0 1px 0 rgba(240, 232, 216, 0.04),3732    0 12px 28px rgba(0, 0, 0, 0.12);3733}37343735/* Glass surface — lock panel and settings groups */3736.peach-glass {3737  background: rgba(26, 20, 16, 0.65);3738  border: 1px solid rgba(255, 255, 255, 0.08);3739  border-radius: 12px;3740  backdrop-filter: blur(12px) saturate(1.4);3741  -webkit-backdrop-filter: blur(12px) saturate(1.4);3742}37433744@supports not (backdrop-filter: blur(1px)) {3745  .peach-glass {3746    background: rgba(26, 20, 16, 0.92);3747    border: 1px solid rgba(255, 255, 255, 0.10);3748    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3749  }3750}37513752.light .peach-glass,3753[data-theme="light"] .peach-glass {3754  background: rgba(240, 233, 223, 0.72);3755  border: 1px solid rgba(26, 18, 8, 0.08);3756  backdrop-filter: blur(12px) saturate(1.2);3757  -webkit-backdrop-filter: blur(12px) saturate(1.2);3758}37593760@supports not (backdrop-filter: blur(1px)) {3761  .light .peach-glass,3762  [data-theme="light"] .peach-glass {3763    background: rgba(240, 233, 223, 0.97);3764    border: 1px solid rgba(26, 18, 8, 0.10);3765  }3766}37673768/* Lock panel keeps its own border-radius over the generic glass token */3769.peach-lock-panel.peach-glass {3770  border-radius: 18px;3771  background: rgba(26, 20, 16, 0.65);3772  border: 1px solid rgba(255, 255, 255, 0.08);3773  box-shadow:3774    inset 0 1px 0 rgba(255, 255, 255, 0.05),3775    0 12px 28px rgba(0, 0, 0, 0.3);3776}37773778.light .peach-lock-panel.peach-glass,3779[data-theme="light"] .peach-lock-panel.peach-glass {3780  background: rgba(240, 233, 223, 0.82);3781  border: 1px solid rgba(26, 18, 8, 0.08);3782  box-shadow:3783    inset 0 1px 0 rgba(255, 255, 255, 0.4),3784    0 8px 24px rgba(80, 56, 32, 0.15);3785}37863787@supports not (backdrop-filter: blur(1px)) {3788  .peach-lock-panel.peach-glass {3789    background: rgba(26, 20, 16, 0.92);3790    box-shadow:3791      inset 0 1px 0 rgba(255, 255, 255, 0.05),3792      0 12px 28px rgba(0, 0, 0, 0.4);3793  }3794  .light .peach-lock-panel.peach-glass,3795  [data-theme="light"] .peach-lock-panel.peach-glass {3796    background: rgba(240, 233, 223, 0.98);3797  }3798}37993800.peach-lock-panel--secondary {3801  gap: 12px;3802}38033804.peach-lock-panel-header {3805  display: flex;3806  align-items: baseline;3807  justify-content: space-between;3808  gap: 12px;3809}38103811.peach-lock-option-grid {3812  display: grid;3813  gap: 10px;3814}38153816.peach-lock-option {3817  width: 100%;3818  display: grid;3819  gap: 6px;3820  padding: 14px 15px;3821  border-radius: 16px;3822  border: 1px solid rgba(240, 232, 216, 0.08);3823  background: rgba(240, 232, 216, 0.02);3824  color: var(--peach-t0);3825  text-align: left;3826  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3827}38283829.peach-lock-option:hover {3830  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3831  background: rgba(240, 232, 216, 0.04);3832  transform: translateY(-1px);3833}38343835.peach-lock-option-title {3836  font-size: 0.75rem;3837  color: var(--peach-t0);3838}38393840.peach-lock-option-copy {3841  font-size: 0.6875rem;3842  line-height: 1.55;3843  color: var(--peach-t1);3844}38453846.peach-onboarding-stack {3847  margin-top: 2px;3848}3849.peach-lock-panel-footer {3850  display: grid;3851  gap: 6px;3852  margin-top: 2px;3853  padding-top: 10px;3854  border-top: 1px solid rgba(240, 232, 216, 0.06);3855}38563857/* ── Restore tab view ─────────────────────────────────────────────────────3858   Tab-based restore screen replacing the old three-card picker. */38593860.peach-restore-tabview {3861  overflow: hidden;3862}38633864.peach-restore-tabcard {3865  flex: 1;3866  display: flex;3867  flex-direction: column;3868  gap: 0;3869  padding: 0;3870  overflow: hidden;3871  cursor: default;3872  user-select: none;3873  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3874}38753876/* ── Tab selector ─────────────────────────────────────────────────────── */38773878.peach-restore-tabs {3879  display: flex;3880  justify-content: space-around;3881  padding: 14px 10px 10px;3882  border-bottom: 1px solid var(--peach-t3);3883  gap: 2px;3884  overflow: hidden;3885  scrollbar-width: none;3886}3887.peach-restore-tabs::-webkit-scrollbar { display: none; }38883889.peach-restore-tab {3890  background: none;3891  border: none;3892  cursor: pointer;3893  padding: 3px 2px;3894  font-family: 'Cormorant Garamond', Georgia, serif;3895  font-style: italic;3896  font-size: 11px;3897  color: var(--peach-t2);3898  transition: color 150ms ease, text-shadow 150ms ease;3899  flex: 1;3900  min-width: 0;3901  text-align: center;3902  white-space: nowrap;3903  overflow: hidden;3904  text-overflow: ellipsis;3905}3906.peach-restore-tab:hover {3907  color: var(--peach-accent);3908  text-shadow:3909    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3910    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3911}3912.peach-restore-tab.is-active {3913  color: var(--peach-accent);3914  text-shadow:3915    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3916    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3917}39183919/* ── Content area ─────────────────────────────────────────────────────── */39203921.peach-restore-content {3922  padding: 16px 16px 14px;3923  display: flex;3924  flex-direction: column;3925  gap: 8px;3926  overflow: hidden;3927  scrollbar-width: none;3928  flex: 1;3929}3930.peach-restore-content::-webkit-scrollbar { display: none; }3931.peach-restore-content > * {3932  overflow: hidden;3933  scrollbar-width: none;3934}3935.peach-restore-content > *::-webkit-scrollbar { display: none; }39363937/* ── Shared tab inner layout ──────────────────────────────────────────── */39383939.peach-rt-symbols,3940.peach-rt-csv,3941.peach-rt-phone,3942.peach-restore-codex {3943  display: flex;3944  flex-direction: column;3945  gap: 8px;3946  overflow: hidden;3947}39483949.peach-restore-codex {3950  min-height: 0;3951  justify-content: center;3952}39533954.peach-restore-codex-title {3955  margin: 0;3956  font-family: var(--font-display);3957  font-size: 1rem;3958  font-style: italic;3959  color: var(--peach-t0);3960}39613962.peach-restore-codex-copy {3963  margin: 0;3964  font-size: 0.75rem;3965  line-height: 1.5;3966  color: var(--peach-t1);3967}39683969.peach-restore-codex-button {3970  width: 100%;3971  justify-content: center;3972}39733974.peach-rt-submit {3975  width: 100%;3976}39773978.peach-rt-error {3979  margin: 0;3980  font-size: 0.6875rem;3981  color: var(--peach-breach);3982  line-height: 1.4;3983}39843985/* ── PeachScript tab ──────────────────────────────────────────────────── */39863987.peach-restore-symbols-textarea {3988  font-family: 'PeachScript', monospace;3989  font-size: 13px;3990  line-height: 1.9;3991  letter-spacing: 0.1em;3992  word-break: break-all;3993  resize: none;3994  width: 100%;3995  min-height: 56px;3996  max-height: 72px;3997  overflow: hidden;3998  scrollbar-width: none;3999  -ms-overflow-style: none;4000  box-sizing: border-box;4001  padding: 6px 8px;4002  border-radius: 8px;4003  border: 1px solid var(--peach-t3);4004  background: rgba(240, 232, 216, 0.03);4005  color: var(--peach-t0);4006}4007.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }4008.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }40094010.peach-restore-symbols-pass {4011  width: 100%;4012  box-sizing: border-box;4013  padding: 7px 10px;4014  border-radius: 8px;4015  border: 1px solid var(--peach-t3);4016  background: rgba(240, 232, 216, 0.03);4017  color: var(--peach-t0);4018  font-size: 0.8125rem;4019}4020.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }4021.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }40224023.peach-rt-divider {4024  text-align: center;4025  font-size: 0.6875rem;4026  color: var(--peach-t2);4027  font-style: italic;4028}40294030.peach-rt-file-label {4031  width: 100%;4032  justify-content: center;4033}40344035.peach-rt-anim-canvas {4036  width: 100%;4037  height: 180px;4038  border-radius: 10px;4039  overflow: hidden;4040  display: block;4041}40424043/* ── CSV tab ──────────────────────────────────────────────────────────── */40444045.peach-rt-csv-sources {4046  margin: 0;4047  font-size: 0.6875rem;4048  color: var(--peach-t2);4049  line-height: 1.5;4050  text-align: center;4051}40524053.peach-rt-csv-warning {4054  margin: 0;4055  font-family: "IBM Plex Mono", monospace;4056  font-size: 0.5625rem;4057  letter-spacing: 0.12em;4058  color: var(--peach-breach);4059  text-align: center;4060}40614062/* ── From Phone tab ───────────────────────────────────────────────────── */40634064.peach-rt-phone-code {4065  margin: 0;4066  text-align: center;4067  font-family: "IBM Plex Mono", monospace;4068  font-size: 22px;4069  letter-spacing: 0.18em;4070  color: var(--peach-t0);4071}40724073.peach-rt-phone-qr {4074  display: block;4075  width: 96px;4076  height: 96px;4077  margin: 0 auto;4078  border-radius: 6px;4079  image-rendering: pixelated;4080  overflow: hidden;4081}40824083.peach-rt-phone-hint {4084  margin: 0;4085  font-size: 0.6875rem;4086  color: var(--peach-t2);4087  line-height: 1.55;4088  text-align: center;4089}40904091/* ── Intro popup ──────────────────────────────────────────────────────── */40924093.peach-restore-intro-overlay {4094  position: absolute;4095  inset: 0;4096  z-index: 100;4097  display: flex;4098  align-items: center;4099  justify-content: center;4100  padding: 20px;4101  background: rgba(12, 10, 6, 0.7);4102  backdrop-filter: blur(4px);4103  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4104}41054106.peach-restore-intro-card {4107  width: 100%;4108  display: flex;4109  flex-direction: column;4110  gap: 12px;4111  padding: 22px 20px 20px;4112  border-radius: 16px;4113  border: 1px solid var(--peach-t3);4114  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));4115  backdrop-filter: blur(4px);4116  -webkit-backdrop-filter: blur(4px);4117  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);4118}41194120.peach-restore-intro-headline {4121  margin: 0;4122  font-family: var(--font-display);4123  font-style: italic;4124  font-size: 20px;4125  font-weight: 400;4126  color: var(--peach-t0);4127}41284129.peach-restore-intro-body {4130  display: flex;4131  flex-direction: column;4132  gap: 8px;4133}4134.peach-restore-intro-body p {4135  margin: 0;4136  font-size: 0.75rem;4137  color: var(--peach-t1);4138  line-height: 1.5;4139}41404141.peach-restore-intro-btn {4142  width: 100%;4143  margin-top: 4px;4144}41454146/* Snapshot restore panel */4147.peach-snapshot-panel {4148  gap: 10px;4149  overflow-y: auto;4150  max-height: 340px;4151}4152.peach-snapshot-list {4153  display: flex;4154  flex-direction: column;4155  gap: 4px;4156}4157.peach-snapshot-row {4158  display: flex;4159  align-items: center;4160  justify-content: space-between;4161  width: 100%;4162  padding: 8px 10px;4163  border-radius: 8px;4164  border: 1px solid rgba(240, 232, 216, 0.07);4165  background: transparent;4166  cursor: pointer;4167  transition: border-color 120ms, background 120ms;4168  text-align: left;4169  gap: 8px;4170}4171.peach-snapshot-row:hover {4172  border-color: rgba(240, 232, 216, 0.14);4173  background: rgba(240, 232, 216, 0.03);4174}4175.peach-snapshot-row.is-selected {4176  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4177  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);4178}4179.peach-snapshot-time {4180  font-size: 11.5px;4181  color: var(--peach-t0);4182  flex: 1;4183}4184.peach-snapshot-count {4185  font-family: "IBM Plex Mono", monospace;4186  font-size: 0.625rem;4187  color: var(--peach-t2);4188  flex-shrink: 0;4189}4190.peach-snapshot-confirm {4191  display: flex;4192  flex-direction: column;4193  gap: 8px;4194  padding-top: 10px;4195  border-top: 1px solid rgba(240, 232, 216, 0.06);4196}4197.peach-snapshot-warning {4198  display: flex;4199  align-items: flex-start;4200  gap: 6px;4201  font-size: 10.5px;4202  color: rgba(220, 80, 60, 0.85);4203  line-height: 1.55;4204}4205.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }4206.peach-snapshot-confirm-row {4207  display: flex;4208  gap: 6px;4209  align-items: center;4210}4211.peach-snapshot-restore-btn {4212  width: 100%;4213}4214.peach-lock-hero--unlock .peach-lock-hero-art {4215  width: 112px;4216  height: 112px;4217  right: 0;4218  top: 2px;4219  opacity: 0.1;4220}42214222.peach-card {4223  border: 1px solid var(--peach-t3);4224  border-radius: 18px;4225  background:4226    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4227  box-shadow:4228    inset 0 0 0 1px var(--peach-border-accent),4229    inset 0 1px 0 rgba(240, 232, 216, 0.04),4230    0 12px 32px rgba(0, 0, 0, 0.14);4231  overflow: hidden;4232}42334234.peach-card-active {4235  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4236  box-shadow:4237    inset 0 1px 0 rgba(240, 232, 216, 0.05),4238    0 16px 38px rgba(0, 0, 0, 0.18),4239    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4240}42414242.peach-card-disabled {4243  opacity: 0.72;4244}42454246.peach-card-header {4247  width: 100%;4248  padding: 13px 16px 11px;4249  background: transparent;4250  color: var(--peach-t0);4251  display: flex;4252  justify-content: space-between;4253  align-items: center;4254  text-align: left;4255  font-size: 0.75rem;4256}42574258.peach-card-body {4259  padding: 0 16px 16px;4260  display: grid;4261  gap: 9px;4262}42634264.peach-card-tag {4265  color: var(--peach-t2);4266  font-family: "IBM Plex Mono", monospace;4267  font-size: 0.5625rem;4268  letter-spacing: 0.12em;4269  text-transform: uppercase;4270}42714272.peach-empty-copy {4273  display: grid;4274  gap: 6px;4275  color: var(--peach-t1);4276  font-size: 0.8125rem;4277}42784279.peach-lock-submit {4280  width: 100%;4281  box-shadow:4282    0 1px 0 rgba(255,255,255,0.10) inset,4283    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4284    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4285    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4286}42874288.peach-lock-secondary {4289  width: 100%;4290  border-color: var(--peach-t3);4291  background: rgba(240, 232, 216, 0.02);4292}42934294.peach-lock-secondary:hover {4295  background: rgba(240, 232, 216, 0.04);4296}42974298.peach-lock-note {4299  max-width: none;4300  line-height: 1.55;4301  margin: 0;4302}43034304.peach-overlay-action {4305  font-size: 0.625rem;4306  padding: 4px 8px;4307  letter-spacing: 0.06em;4308  min-width: 44px;4309  text-align: center;4310}43114312.peach-inline-action {4313  flex-shrink: 0;4314  font-size: 0.5625rem;4315  letter-spacing: 0.1em;4316  text-transform: uppercase;4317  padding: 4px 7px;4318}4319.peach-password-toggle-btn {4320  display: inline-flex;4321  align-items: center;4322  justify-content: center;4323  min-width: 30px;4324  min-height: 26px;4325  padding: 0 7px;4326  border: 1px solid var(--peach-t3);4327  border-radius: 999px;4328  background: rgba(240, 232, 216, 0.04);4329  color: var(--peach-t2);4330  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4331}4332.peach-password-toggle-btn:hover {4333  border-color: var(--peach-t2);4334  color: var(--peach-t0);4335  background: rgba(240, 232, 216, 0.06);4336}43374338.peach-new-textarea {4339  width: 100%;4340  min-height: 88px;4341  resize: vertical;4342  border: 0;4343  outline: none;4344  background: transparent;4345  color: var(--peach-t1);4346  font-family: "IBM Plex Mono", monospace;4347  font-size: 0.75rem;4348  line-height: 1.65;4349  caret-color: var(--peach-accent);4350}43514352.peach-new-textarea::placeholder {4353  color: var(--peach-t2);4354  opacity: 0.7;4355}43564357.peach-settings-actions {4358  display: grid;4359  gap: 8px;4360}43614362.peach-sync-section-label {4363  font-size: 0.6875rem;4364  color: var(--peach-t2);4365  text-transform: uppercase;4366  letter-spacing: 0.05em;4367}43684369.peach-sync-network-note {4370  margin: 0 0 6px;4371  font-size: 0.75rem;4372  color: var(--peach-t2);4373  line-height: 1.4;4374}43754376.peach-settings-row--tappable {4377  background: none;4378  border: none;4379  width: 100%;4380  text-align: left;4381  cursor: pointer;4382  color: var(--peach-t1);4383  font-size: 0.8125rem;4384}4385.peach-settings-row--tappable:hover {4386  color: var(--peach-t0);4387}43884389.peach-sync-pro-hint {4390  display: flex;4391  flex-direction: column;4392  align-items: flex-start;4393  gap: 8px;4394  padding: 12px 0 4px;4395}43964397.peach-sync-device-row {4398  display: flex;4399  justify-content: space-between;4400  align-items: center;4401  padding: 6px 0;4402  border-bottom: 1px solid var(--peach-t3);4403}44044405.peach-sync-device-info {4406  display: flex;4407  flex-direction: column;4408  gap: 2px;4409}44104411.peach-sync-device-name {4412  font-size: 0.8125rem;4413  color: var(--peach-t0);4414}44154416.peach-sync-device-meta {4417  font-size: 0.6875rem;4418  color: var(--peach-t2);4419}44204421.peach-sync-status-dot {4422  display: inline-block;4423  width: 8px;4424  height: 8px;4425  border-radius: 50%;4426  vertical-align: middle;4427}44284429.peach-sync-remove-btn {4430  color: var(--peach-breach);4431}44324433.peach-sync-advanced-row {4434  display: flex;4435  justify-content: space-between;4436  align-items: center;4437  padding: 6px 0;4438  gap: 12px;4439}44404441.peach-sync-advanced-info {4442  display: flex;4443  flex-direction: column;4444  gap: 2px;4445  flex: 1;4446}44474448.peach-sync-advanced-name {4449  font-size: 0.8125rem;4450  color: var(--peach-t0);4451}44524453.peach-sync-reset-confirm {4454  display: flex;4455  flex-direction: column;4456  gap: 8px;4457  padding: 10px;4458  border: 1px solid var(--peach-breach);4459  border-radius: 10px;4460  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4461}44624463.peach-sync-reset-confirm-headline {4464  font-size: 0.8125rem;4465  font-weight: 600;4466  color: var(--peach-t0);4467  margin: 0;4468}44694470.peach-sync-reset-confirm-body {4471  font-size: 0.75rem;4472  color: var(--peach-t1);4473  margin: 0;4474  line-height: 1.4;4475}44764477.peach-btn--danger {4478  background: var(--peach-breach);4479  color: #fff;4480  border-color: var(--peach-breach);4481}4482.peach-btn--danger:hover:not(:disabled) {4483  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4484}4485.peach-btn--danger:disabled {4486  opacity: 0.55;4487  cursor: not-allowed;4488}44894490.peach-sync-hero-icon {4491  color: var(--peach-t1);4492  opacity: 0.85;4493}44944495.peach-import-preview {4496  margin-bottom: 12px;4497  max-height: 152px;4498  overflow-y: auto;4499  border: 1px solid var(--peach-t3);4500  border-radius: 10px;4501  padding: 8px 10px;4502  display: grid;4503  gap: 8px;4504  background: rgba(240, 232, 216, 0.02);4505}45064507.peach-import-preview-row {4508  display: flex;4509  justify-content: space-between;4510  gap: 10px;4511  font-size: 0.6875rem;4512  color: var(--peach-t1);4513}45144515.peach-import-preview-title {4516  color: var(--peach-t0);4517  flex: 1;4518  min-width: 0;4519  overflow: hidden;4520  text-overflow: ellipsis;4521  white-space: nowrap;4522}45234524.peach-import-preview-meta {4525  color: var(--peach-t2);4526  flex-shrink: 0;4527  max-width: 42%;4528  overflow: hidden;4529  text-overflow: ellipsis;4530  white-space: nowrap;4531}45324533.peach-import-preview-more {4534  color: var(--peach-t2);4535  font-size: 0.625rem;4536}45374538.peach-restore-copy {4539  margin: 0;4540  color: var(--peach-t1);4541  font-size: 0.6875rem;4542  line-height: 1.6;4543}45444545.peach-restore-warning {4546  padding: 10px 12px;4547  border-radius: 12px;4548  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4549  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4550  color: var(--peach-t0);4551  font-size: 0.6875rem;4552  line-height: 1.55;4553}45544555.peach-provider-chips {4556  display: flex;4557  flex-wrap: wrap;4558  gap: 6px;4559}45604561.peach-provider-chip {4562  display: inline-flex;4563  align-items: center;4564  padding: 5px 8px;4565  border-radius: 999px;4566  border: 1px solid var(--peach-t3);4567  background: rgba(240, 232, 216, 0.02);4568  color: var(--peach-t1);4569  font-family: "IBM Plex Mono", monospace;4570  font-size: 0.5rem;4571  letter-spacing: 0.08em;4572  text-transform: uppercase;4573}45744575.peach-restore-file,4576.peach-restore-input {4577  width: 100%;4578  border-radius: 10px;4579  border: 1px solid var(--peach-t3);4580  background: var(--peach-s2);4581  color: var(--peach-t0);4582  font-size: 0.75rem;4583}45844585.peach-restore-file {4586  padding: 9px 10px;4587}45884589.peach-restore-file::file-selector-button {4590  margin-right: 10px;4591  padding: 7px 10px;4592  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4593  border-radius: 999px;4594  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4595  color: var(--peach-t0);4596  font-size: 0.625rem;4597  letter-spacing: 0.08em;4598  text-transform: uppercase;4599  cursor: pointer;4600}46014602.peach-restore-input {4603  padding: 10px 12px;4604}46054606.peach-auth-grid {4607  display: grid;4608  gap: 10px;4609}46104611.peach-import-summary {4612  color: var(--peach-t1);4613  font-size: 0.75rem;4614  line-height: 1.6;4615  margin-bottom: 12px;4616}46174618.peach-restore-error {4619  color: rgba(220, 80, 60, 0.95);4620  font-size: 0.75rem;4621  line-height: 1.55;4622}46234624.peach-passkey-card {4625  max-width: 400px;4626  margin: auto 16px;4627  align-self: center;4628  width: calc(100% - 32px);4629}46304631/* Center the approval card vertically inside the overlay-view (which sets4632 * flex-direction: column without justify-content). Without this, the card4633 * sits at the top with a tall empty band below — looks unfinished on the4634 * 320px popup. */4635.peach-overlay-view:has(.peach-passkey-card) {4636  justify-content: center;4637}46384639.peach-pro-badge {4640  padding: 2px 6px;4641  border-radius: 999px;4642  font-family: var(--font-ui);4643  font-size: 0.625rem;4644  letter-spacing: 0.08em;4645  text-transform: uppercase;4646  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4647  color: var(--peach-accent);4648}46494650/* ── Shortcuts rebind table ─────────────────────────────────── */4651.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4652.peach-shortcut-row {4653  display: flex;4654  align-items: center;4655  gap: 10px;4656  padding: 6px 0;4657}4658.peach-shortcut-row-label {4659  flex: 1;4660  font-size: 0.75rem;4661  color: var(--peach-t0);4662}4663.peach-shortcut-chip {4664  min-width: 64px;4665  padding: 4px 10px;4666  border-radius: 6px;4667  border: 1px solid var(--peach-t3);4668  background: var(--peach-input-bg, var(--surface-card));4669  color: var(--peach-t0);4670  font-family: var(--font-mono);4671  font-size: 0.6875rem;4672  letter-spacing: 0.04em;4673  cursor: pointer;4674  text-align: center;4675  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4676}4677.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4678.peach-shortcut-chip.is-custom {4679  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4680  color: var(--peach-accent);4681}4682.peach-shortcut-chip.is-capturing {4683  border-color: var(--peach-accent);4684  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4685  color: var(--peach-accent);4686  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4687}4688@keyframes peach-shortcut-capture-pulse {4689  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4690  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4691}4692.peach-shortcut-reset {4693  background: transparent;4694  border: none;4695  cursor: pointer;4696  color: var(--peach-t2);4697  padding: 4px 6px;4698  border-radius: 5px;4699  font-size: 0.875rem;4700  line-height: 1;4701  transition: color 120ms ease, background 120ms ease;4702}4703.peach-shortcut-reset:hover {4704  color: var(--peach-t0);4705  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4706}4707.peach-shortcuts-conflict {4708  margin: 4px 0 0;4709  padding: 8px 10px;4710  border-radius: 7px;4711  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4712  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4713  font-family: var(--font-mono);4714  font-size: 0.6875rem;4715  color: var(--peach-t0);4716}47174718/* ── Help dialog overlay (? to open) ────────────────────────── */4719.peach-shortcuts-help-backdrop {4720  position: fixed;4721  inset: 0;4722  background: rgba(0, 0, 0, 0.55);4723  backdrop-filter: blur(2px);4724  display: flex;4725  align-items: center;4726  justify-content: center;4727  z-index: 1000;4728  animation: peach-help-fade-in 140ms ease forwards;4729}4730@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4731.peach-shortcuts-help-card {4732  width: min(320px, 92vw);4733  max-height: 80vh;4734  overflow-y: auto;4735  border-radius: 14px;4736  border: 1px solid var(--peach-t3);4737  background: var(--peach-bg);4738  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4739  padding: 16px 18px 18px;4740  display: flex;4741  flex-direction: column;4742  gap: 12px;4743}4744.peach-shortcuts-help-head {4745  display: flex; align-items: center; justify-content: space-between;4746}4747.peach-shortcuts-help-head h3 {4748  margin: 0;4749  font-family: var(--font-display);4750  font-style: italic;4751  font-weight: 400;4752  font-size: 22px;4753  color: var(--peach-t0);4754}4755.peach-shortcuts-help-close {4756  background: transparent;4757  border: none;4758  color: var(--peach-t2);4759  cursor: pointer;4760  font-size: 0.875rem;4761  padding: 4px 8px;4762  border-radius: 5px;4763}4764.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4765.peach-shortcuts-help-body ul {4766  list-style: none; padding: 0; margin: 4px 0 12px;4767  display: grid; gap: 8px;4768}4769.peach-shortcuts-help-body li {4770  display: flex; align-items: center; justify-content: space-between; gap: 12px;4771  font-size: 0.75rem; color: var(--peach-t0);4772}4773.peach-shortcuts-help-body kbd {4774  font-family: var(--font-mono);4775  font-size: 0.6875rem;4776  padding: 3px 8px;4777  border-radius: 6px;4778  background: var(--surface-card);4779  border: 1px solid var(--peach-t3);4780  color: var(--peach-accent);4781  letter-spacing: 0.04em;4782}47834784/* ── Pro promo on Account screen ────────────────────────────── */4785.peach-pro-promo {4786  position: relative;4787  border-radius: 14px;4788  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4789  background:4790    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4791    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4792    var(--surface-card);4793  overflow: hidden;4794  margin-bottom: 14px;4795}4796.peach-pro-promo-glow {4797  position: absolute;4798  inset: -40% -20% auto auto;4799  width: 220px; height: 220px;4800  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4801  pointer-events: none;4802  filter: blur(8px);4803}4804.peach-pro-promo-inner {4805  position: relative;4806  padding: 18px 18px 16px;4807}4808.peach-pro-promo-title {4809  font-family: var(--font-display);4810  font-style: italic;4811  font-weight: 400;4812  font-size: 28px;4813  line-height: 1;4814  letter-spacing: -0.005em;4815  color: var(--peach-t0);4816  margin: 0 0 4px;4817}4818.peach-pro-promo-tagline {4819  font-family: var(--font-mono);4820  font-size: 0.625rem;4821  letter-spacing: 0.06em;4822  color: var(--peach-t2);4823  margin: 0 0 14px;4824}4825.peach-pro-promo-list {4826  list-style: none;4827  margin: 0 0 16px;4828  padding: 0;4829  display: grid;4830  gap: 9px;4831}4832.peach-pro-promo-list li {4833  display: flex;4834  align-items: flex-start;4835  gap: 9px;4836  font-size: 0.75rem;4837  color: var(--peach-t1);4838  line-height: 1.4;4839}4840.peach-pro-promo-list svg {4841  width: 14px;4842  height: 14px;4843  flex-shrink: 0;4844  color: var(--peach-accent);4845  margin-top: 2px;4846}4847.peach-pro-promo-list span {4848  color: var(--peach-t0);4849}4850.peach-pro-promo-cta {4851  width: 100%;4852  background: var(--peach-accent);4853  color: #fff;4854  border: none;4855  padding: 9px 12px;4856  border-radius: 9px;4857  font-size: 0.75rem;4858  font-weight: 500;4859  font-family: var(--font-ui);4860  letter-spacing: 0.02em;4861  text-decoration: none;4862  display: inline-flex;4863  align-items: center;4864  justify-content: center;4865  cursor: pointer;4866  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4867  box-shadow: 0 2px 16px var(--peach-glow);4868}4869.peach-pro-promo-cta:hover {4870  filter: brightness(1.07);4871  box-shadow: 0 4px 24px var(--peach-glow);4872  transform: translateY(-1px);4873}4874.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }48754876.peach-pro-or-divider {4877  display: flex;4878  align-items: center;4879  gap: 10px;4880  margin: 4px 0 12px;4881  font-family: var(--font-mono);4882  font-size: 0.625rem;4883  letter-spacing: 0.06em;4884  color: var(--peach-t2);4885  text-transform: uppercase;4886}4887.peach-pro-or-divider::before,4888.peach-pro-or-divider::after {4889  content: "";4890  flex: 1;4891  height: 1px;4892  background: var(--peach-t3);4893}48944895.peach-loading {4896  position: absolute;4897  inset: 0;4898  display: flex;4899  align-items: center;4900  justify-content: center;4901  background: var(--bg);4902  animation: peach-loading-pulse 1.2s ease-in-out infinite;4903}49044905@keyframes peach-loading-pulse {4906  0%, 100% { opacity: 0.6; }4907  50% { opacity: 1; }4908}49094910/* ── Health Dashboard ─────────────────────────────────────────────────── */4911.peach-health-body {4912  flex: 1;4913  overflow-y: auto;4914  display: flex;4915  flex-direction: column;4916  /* Hide the platform scrollbar — every other scrollable surface in the4917   * popup hides it; the Health view was the one outlier and it ruined the4918   * polish. Behavior unchanged, just no rail rendered. */4919  scrollbar-width: none;4920  -ms-overflow-style: none;4921}4922.peach-health-body::-webkit-scrollbar { display: none; }49234924/* Loading screen for the Vault Health view. The advanced report computation4925 * can run for a few seconds on a large vault — without a clear loading4926 * screen the surface looked broken (the entry view bleeds through the4927 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4928.peach-health-loading-screen {4929  flex: 1;4930  display: flex;4931  flex-direction: column;4932  align-items: center;4933  justify-content: center;4934  gap: 14px;4935  padding: 32px 28px;4936  text-align: center;4937}49384939.peach-health-loading-glyph {4940  width: 48px;4941  height: 48px;4942  display: flex;4943  align-items: center;4944  justify-content: center;4945  border-radius: 14px;4946  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4947  color: var(--peach-accent);4948}49494950.peach-health-loading-title {4951  margin: 0;4952  font-family: var(--font-display);4953  font-style: italic;4954  font-weight: 300;4955  font-size: 19px;4956  line-height: 1.2;4957  color: var(--peach-t0);4958}49594960.peach-health-loading-copy {4961  margin: 0;4962  max-width: 240px;4963  font-size: 0.75rem;4964  line-height: 1.55;4965  color: var(--peach-t2);4966}49674968.peach-health-loading-track {4969  width: 200px;4970  height: 3px;4971  margin-top: 6px;4972  border-radius: 999px;4973  background: rgba(240, 232, 216, 0.06);4974  overflow: hidden;4975}49764977.peach-health-loading-fill {4978  width: 40%;4979  height: 100%;4980  border-radius: inherit;4981  background: linear-gradient(4982    90deg,4983    transparent 0%,4984    var(--peach-accent) 50%,4985    transparent 100%4986  );4987  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4988}49894990@keyframes peach-health-loading-sweep {4991  0%   { transform: translateX(-100%); }4992  100% { transform: translateX(350%); }4993}49944995[data-motion="reduce"] .peach-health-loading-fill,4996[data-motion="reduce"] .peach-health-loading-glyph svg path {4997  animation: none;4998}49995000.peach-health-summary {5001  padding: 10px 16px 6px;5002  font-family: "IBM Plex Mono", monospace;5003  font-size: 0.6875rem;5004}5005.peach-health-summary-warn { color: rgba(220,80,60,0.9); }5006.peach-health-summary-ok { color: var(--peach-t2); }50075008.peach-health-check-row {5009  padding: 0 16px 10px;5010}5011.peach-health-check-btn {5012  width: 100%;5013  display: flex;5014  align-items: center;5015  justify-content: center;5016}50175018.peach-health-sections {5019  flex: 1;5020  display: flex;5021  flex-direction: column;5022}50235024.peach-health-section {5025  border-bottom: 1px solid var(--peach-t3);5026}50275028.peach-health-section-header {5029  width: 100%;5030  display: flex;5031  align-items: center;5032  justify-content: space-between;5033  padding: 9px 16px;5034  background: transparent;5035  cursor: pointer;5036  color: var(--peach-t0);5037}50385039.peach-health-section-title-row {5040  display: flex;5041  align-items: center;5042  gap: 8px;5043}50445045.peach-health-count-badge {5046  display: inline-flex;5047  align-items: center;5048  justify-content: center;5049  min-width: 20px;5050  height: 18px;5051  padding: 0 5px;5052  border-radius: 999px;5053  background: rgba(220,80,60,0.15);5054  border: 1px solid rgba(220,80,60,0.25);5055  font-family: "IBM Plex Mono", monospace;5056  font-size: 0.5625rem;5057  color: rgba(220,80,60,0.9);5058}50595060.peach-health-section-title {5061  font-family: "IBM Plex Mono", monospace;5062  font-size: 0.6875rem;5063  text-transform: uppercase;5064  letter-spacing: 0.1em;5065  color: var(--peach-t1);5066}50675068.peach-health-chevron {5069  color: var(--peach-t2);5070  transition: transform 200ms ease;5071  flex-shrink: 0;5072}5073.peach-health-chevron.is-expanded {5074  transform: rotate(180deg);5075}50765077.peach-health-section-body {5078  padding: 0 16px 10px;5079  display: flex;5080  flex-direction: column;5081  gap: 4px;5082}50835084.peach-health-row {5085  display: flex;5086  align-items: flex-start;5087  justify-content: space-between;5088  gap: 8px;5089  padding: 6px 8px;5090  border-radius: 8px;5091  background: rgba(240,232,216,0.02);5092}50935094.peach-health-row-info {5095  flex: 1;5096  min-width: 0;5097  display: flex;5098  flex-direction: column;5099  gap: 2px;5100}51015102.peach-health-row-name {5103  font-family: var(--font-display);5104  font-size: 0.9375rem;5105  font-style: italic;5106  font-weight: 400;5107  color: var(--peach-t0);5108  white-space: nowrap;5109  overflow: hidden;5110  text-overflow: ellipsis;5111}51125113.peach-health-row-meta {5114  font-family: "IBM Plex Mono", monospace;5115  font-size: 0.5625rem;5116  color: var(--peach-t2);5117  letter-spacing: 0.05em;5118}51195120.peach-health-fix-btn {5121  font-size: 0.5625rem;5122  letter-spacing: 0.08em;5123  text-transform: uppercase;5124  padding: 4px 7px;5125  flex-shrink: 0;5126  display: flex;5127  align-items: center;5128}51295130.peach-health-empty {5131  font-family: "IBM Plex Mono", monospace;5132  font-size: 0.625rem;5133  color: var(--peach-t2);5134  padding: 6px 0;5135}51365137.peach-health-loading {5138  font-family: "IBM Plex Mono", monospace;5139  font-size: 0.625rem;5140  color: var(--peach-t2);5141  padding: 6px 0;5142  display: flex;5143  align-items: center;5144  gap: 6px;5145}51465147.peach-health-loading::before {5148  content: "";5149  width: 10px;5150  height: 10px;5151  border: 1.5px solid var(--peach-t3);5152  border-top-color: var(--peach-accent);5153  border-radius: 50%;5154  animation: peach-spin 600ms linear infinite;5155}51565157@keyframes peach-spin {5158  to { transform: rotate(360deg); }5159}51605161.peach-spinner {5162  width: 32px;5163  height: 32px;5164  border: 2px solid var(--peach-s2);5165  border-top-color: var(--peach-accent);5166  border-radius: 50%;5167  margin: 0 auto 16px;5168  animation: peach-spin 0.8s linear infinite;5169}51705171.peach-progress-screen {5172  text-align: center;5173  padding: 32px 16px;5174}51755176.peach-progress-screen-title {5177  font-size: 0.8125rem;5178  color: var(--peach-t0);5179  margin-bottom: 16px;5180}51815182.peach-progress-screen-stage {5183  font-size: 0.6875rem;5184  color: var(--peach-t2);5185  min-height: 14px;5186}51875188.peach-progress-screen-note {5189  font-size: 0.625rem;5190  color: var(--peach-t2);5191  margin-top: 8px;5192}51935194.peach-pairing-body {5195  flex: 1;5196  overflow-y: auto;5197  display: flex;5198  flex-direction: column;5199}52005201.peach-pairing-content {5202  flex: 1;5203  display: flex;5204  flex-direction: column;5205  align-items: center;5206  justify-content: center;5207  gap: 14px;5208  padding: 28px 20px;5209  text-align: center;5210}52115212.peach-pairing-code-screen {5213  gap: 18px;5214}52155216.peach-pairing-headline {5217  font-family: var(--font-display);5218  font-style: italic;5219  font-weight: 300;5220  font-size: 28px;5221  color: var(--peach-t0);5222  margin: 0;5223  line-height: 1;5224}52255226.peach-pairing-subline {5227  font-size: 0.75rem;5228  color: var(--peach-t2);5229  max-width: 220px;5230  line-height: 1.5;5231  margin: 0;5232}52335234.peach-pairing-subline--center {5235  text-align: center;5236}52375238/* 6-digit pairing code — both display (.peach-pairing-code) and entry5239   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking5240   so the two modes feel like the same surface. */5241.peach-pairing-code {5242  font-family: "IBM Plex Mono", monospace;5243  font-size: 36px;5244  letter-spacing: 0.25em;5245  color: var(--peach-t0);5246  text-align: center;5247  padding: 24px 0;5248  text-shadow:5249    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),5250    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);5251  background: transparent;5252  border: 0;5253  cursor: default;5254  user-select: text;5255}52565257.peach-pairing-code--loading,5258.peach-pairing-code--expired {5259  font-size: 18px;5260  letter-spacing: 0.04em;5261  color: var(--peach-t2);5262  cursor: pointer;5263  text-shadow: none;5264}52655266.peach-pairing-qr-container {5267  display: flex;5268  flex-direction: column;5269  align-items: center;5270  gap: 10px;5271}52725273.peach-pairing-qr {5274  width: 240px;5275  height: 240px;5276  display: block;5277}52785279.peach-pairing-instruction {5280  font-size: 0.75rem;5281  color: var(--peach-t2);5282  text-align: center;5283  line-height: 1.5;5284  margin: 0;5285  max-width: 220px;5286}52875288.peach-pairing-expiry {5289  font-family: "IBM Plex Mono", monospace;5290  font-size: 13px;5291  letter-spacing: 0.06em;5292  color: var(--peach-t2);5293  margin: 0;5294}52955296.peach-pairing-regen {5297  font-size: 0.75rem;5298  color: var(--peach-accent);5299  background: transparent;5300  border: 0;5301  cursor: pointer;5302  padding: 4px 0;5303  text-decoration: underline;5304  text-underline-offset: 2px;5305}53065307.peach-pairing-code-input {5308  font-family: "IBM Plex Mono", monospace;5309  font-size: 36px;5310  letter-spacing: 0.25em;5311  color: var(--peach-t0);5312  background: transparent;5313  border: 0;5314  border-bottom: 1px solid var(--peach-t3);5315  outline: none;5316  text-align: center;5317  padding: 18px 0;5318  width: 220px;5319  caret-color: var(--peach-accent);5320  transition: border-color 160ms ease;5321}53225323.peach-pairing-code-input::placeholder {5324  color: var(--peach-t3);5325}53265327.peach-pairing-code-input:focus {5328  border-bottom-color: var(--peach-accent);5329}53305331.peach-pairing-toggle {5332  background: transparent;5333  border: 0;5334  color: var(--peach-t2);5335  font-size: 0.75rem;5336  padding: 8px 4px;5337  cursor: pointer;5338  transition: color 120ms ease;5339}53405341.peach-pairing-toggle:hover:not(:disabled) {5342  color: var(--peach-t1);5343}53445345.peach-pairing-toggle:disabled {5346  opacity: 0.5;5347  cursor: default;5348}53495350.peach-pairing-hint {5351  font-size: 0.6875rem;5352  color: var(--peach-t2);5353  margin: 0;5354  text-align: center;5355}53565357.peach-pairing-status {5358  display: flex;5359  align-items: center;5360  gap: 8px;5361  margin: 0;5362  font-size: 0.75rem;5363  color: var(--peach-t1);5364}53655366.peach-pairing-error {5367  margin: 0;5368  font-size: 0.6875rem;5369  color: var(--peach-breach);5370}53715372.peach-pairing-error--muted {5373  color: var(--peach-t2);5374}53755376.peach-pairing-spinner {5377  width: 12px;5378  height: 12px;5379  border: 1.5px solid var(--peach-t3);5380  border-top-color: var(--peach-accent);5381  border-radius: 50%;5382  animation: peach-spin 0.8s linear infinite;5383}53845385.peach-pairing-success-icon,5386.peach-pairing-error-icon,5387.peach-pairing-hero {5388  display: inline-flex;5389  align-items: center;5390  justify-content: center;5391}53925393/* Tag chips */5394.peach-tag-chip {5395  display: inline-flex;5396  align-items: center;5397  gap: 4px;5398  padding: 3px 8px;5399  border-radius: 999px;5400  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5401  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5402  color: var(--peach-t0);5403  font-family: "IBM Plex Mono", monospace;5404  font-size: 0.625rem;5405  letter-spacing: 0.04em;5406}54075408.peach-tag-chip-remove {5409  background: transparent;5410  border: none;5411  color: inherit;5412  opacity: 0.6;5413  cursor: pointer;5414  padding: 0;5415  font-size: 0.75rem;5416  line-height: 1;5417}54185419.peach-tag-chip-remove:hover {5420  opacity: 1;5421}54225423/* Tag input */5424.peach-tag-input-wrap {5425  border-bottom: 1px solid var(--peach-t3);5426}54275428.peach-tag-suggestions {5429  display: flex;5430  flex-wrap: wrap;5431  gap: 4px;5432  padding: 6px 0;5433}54345435.peach-tag-suggestion {5436  padding: 2px 8px;5437  border-radius: 999px;5438  border: 1px solid var(--peach-t3);5439  background: var(--peach-s2);5440  color: var(--peach-t1);5441  font-family: "IBM Plex Mono", monospace;5442  font-size: 0.625rem;5443  cursor: pointer;5444  transition: border-color 80ms ease, background 80ms ease;5445}54465447.peach-tag-suggestion:hover {5448  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5449  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5450}54515452/* Identity suggestions — shown below username/email inputs in new-entry form */5453@keyframes peach-suggest-in {5454  from { opacity: 0; transform: translateY(-4px); }5455  to   { opacity: 1; transform: none; }5456}54575458.peach-identity-suggestions {5459  display: flex;5460  flex-direction: column;5461  gap: 1px;5462  margin-top: 4px;5463  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5464}54655466.peach-identity-filter-row {5467  display: flex;5468  align-items: center;5469  gap: 4px;5470  padding: 2px 0 5px;5471}54725473.peach-identity-collapse-btn {5474  margin-left: auto;5475  background: transparent;5476  border: none;5477  cursor: pointer;5478  color: var(--peach-t3);5479  padding: 2px 4px;5480  display: flex;5481  align-items: center;5482  line-height: 0;5483  border-radius: 3px;5484  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5485}54865487.peach-identity-collapse-btn:hover {5488  color: var(--peach-t1);5489}54905491.peach-identity-collapse-btn.is-collapsed {5492  transform: rotate(-90deg);5493}54945495.peach-identity-rows {5496  display: grid;5497  grid-template-rows: 1fr;5498  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5499}55005501.peach-identity-rows.is-collapsed {5502  grid-template-rows: 0fr;5503}55045505.peach-identity-rows-inner {5506  overflow-y: auto;5507  min-height: 0;5508  max-height: 148px;5509  scrollbar-width: thin;5510  scrollbar-color: var(--peach-t3) transparent;5511  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5512  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5513}55145515.peach-identity-rows-inner::-webkit-scrollbar {5516  width: 4px;5517}55185519.peach-identity-rows-inner::-webkit-scrollbar-track {5520  background: transparent;5521}55225523.peach-identity-rows-inner::-webkit-scrollbar-thumb {5524  background: var(--peach-t3);5525  border-radius: 2px;5526}55275528.peach-identity-filter-pill {5529  padding: 2px 7px;5530  border-radius: 999px;5531  border: 1px solid var(--peach-t3);5532  background: transparent;5533  color: var(--peach-t2);5534  font-family: "IBM Plex Mono", monospace;5535  font-size: 0.6rem;5536  cursor: pointer;5537  transition: border-color 80ms, background 80ms, color 80ms;5538}55395540.peach-identity-filter-pill.is-on {5541  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5542  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5543  color: var(--peach-accent);5544}55455546.peach-identity-suggestion {5547  display: flex;5548  align-items: center;5549  gap: 6px;5550  width: 100%;5551  padding: 4px 6px;5552  border-radius: 5px;5553  border: none;5554  background: transparent;5555  cursor: pointer;5556  text-align: left;5557  transition: background 80ms ease;5558}55595560.peach-identity-suggestion:hover,5561.peach-identity-suggestion:focus {5562  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5563  outline: none;5564}55655566.peach-identity-suggestion-value {5567  font-family: "IBM Plex Mono", monospace;5568  font-size: 0.7rem;5569  color: var(--peach-t1);5570  overflow: hidden;5571  text-overflow: ellipsis;5572  white-space: nowrap;5573  flex: 1;5574  min-width: 0;5575}55765577.peach-identity-suggestion-type {5578  font-family: "IBM Plex Mono", monospace;5579  font-size: 0.55rem;5580  font-weight: 600;5581  flex-shrink: 0;5582  padding: 1px 4px;5583  border-radius: 3px;5584}55855586.peach-identity-suggestion-type--email {5587  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5588  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5589}55905591.peach-identity-suggestion-type--username {5592  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5593  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5594}55955596.peach-identity-suggestion-meta {5597  font-family: "IBM Plex Mono", monospace;5598  font-size: 0.6rem;5599  color: var(--peach-t3);5600  flex-shrink: 0;5601}56025603/* Tag filter strip */5604.peach-tag-filter-strip {5605  border-bottom: 1px solid var(--peach-t3);5606  flex-shrink: 0;5607}56085609.peach-tag-filter-chip {5610  display: inline-flex;5611  align-items: center;5612  padding: 4px 10px;5613  border-radius: 999px;5614  border: 1px solid var(--peach-t3);5615  background: transparent;5616  color: var(--peach-t2);5617  font-family: "IBM Plex Mono", monospace;5618  font-size: 0.5625rem;5619  letter-spacing: 0.06em;5620  text-transform: uppercase;5621  cursor: pointer;5622  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5623  white-space: nowrap;5624}56255626.peach-tag-filter-chip:hover {5627  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5628  color: var(--peach-t1);5629}56305631.peach-tag-filter-chip.is-selected {5632  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5633  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5634  color: var(--peach-t0);5635}56365637/* ─────────────────────────────────────────────────────────────────────────5638   v1.4.12 additions5639   ─────────────────────────────────────────────────────────────────────── */56405641/* Sort bar */5642.peach-sort-bar {5643  display: flex;5644  align-items: center;5645  gap: 4px;5646  padding: 5px 12px;5647  border-bottom: 1px solid var(--peach-t3);5648  flex-shrink: 0;5649  overflow-x: auto;5650  scrollbar-width: none;5651}56525653.peach-sort-btn {5654  padding: 2px 9px;5655  border-radius: 999px;5656  border: 1px solid transparent;5657  background: transparent;5658  color: var(--peach-t2);5659  font-family: "IBM Plex Mono", monospace;5660  font-size: 0.5625rem;5661  letter-spacing: 0.07em;5662  text-transform: uppercase;5663  cursor: pointer;5664  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5665  white-space: nowrap;5666}56675668.peach-sort-btn:hover {5669  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5670  color: var(--peach-t1);5671}56725673.peach-sort-btn.is-active {5674  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5675  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5676  color: var(--peach-t0);5677}56785679.peach-sort-scope-btn {5680  padding-inline: 8px;5681  font-size: 0.53125rem;5682  letter-spacing: 0.05em;5683}56845685.peach-sort-domain-hint {5686  margin-left: auto;5687  font-family: "IBM Plex Mono", monospace;5688  font-size: 0.5625rem;5689  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5690  white-space: nowrap;5691  overflow: hidden;5692  text-overflow: ellipsis;5693  max-width: 110px;5694}56955696/* Tab-match badge on entry rows */5697.peach-tab-match-badge {5698  display: inline-block;5699  width: 6px;5700  height: 6px;5701  border-radius: 50%;5702  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5703  margin-left: 5px;5704  vertical-align: middle;5705  flex-shrink: 0;5706  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5707}57085709.peach-entry-row.is-tab-match {5710  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5711  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5712}57135714.peach-entry-row.is-tab-match:hover {5715  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5716}57175718/* Entry list stagger entrance */5719@keyframes peach-entry-fadein {5720  from { opacity: 0; transform: translateY(4px); }5721  to   { opacity: 1; transform: translateY(0); }5722}57235724.peach-vault-list .peach-entry-row {5725  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5726}57275728/* Button press micro-interaction */5729.peach-btn:active {5730  transform: scale(0.95);5731  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5732}57335734.peach-sort-btn:active,5735.peach-tag-filter-chip:active {5736  transform: scale(0.93);5737  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5738}57395740/* Password strength bar (Lock view + shared) */5741.peach-password-strength {5742  display: flex;5743  align-items: center;5744  gap: 8px;5745  margin-top: 6px;5746}57475748.peach-strength-bar {5749  flex: 1;5750  height: 3px;5751  border-radius: 2px;5752  background: var(--peach-t3);5753  overflow: hidden;5754}57555756.peach-strength-fill {5757  height: 100%;5758  border-radius: 2px;5759  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5760              background 300ms ease;5761}57625763.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5764.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5765.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5766.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }57675768.peach-strength-label {5769  font-family: "IBM Plex Mono", monospace;5770  font-style: italic;5771  font-size: 0.5625rem;5772  font-weight: 300;5773  letter-spacing: 0.06em;5774  color: var(--peach-t2);5775  min-width: 36px;5776  text-align: right;5777}57785779.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5780.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5781.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5782.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }57835784/* Duress form */5785.peach-duress-status {5786  padding: 2px 8px;5787  border-radius: 999px;5788  border: 1px solid var(--peach-t3);5789  font-family: "IBM Plex Mono", monospace;5790  font-size: 0.5625rem;5791  letter-spacing: 0.07em;5792  text-transform: uppercase;5793  color: var(--peach-t2);5794  flex-shrink: 0;5795}57965797.peach-duress-status.is-active {5798  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5799  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5800  color: var(--peach-t0);5801}58025803.peach-duress-form {5804  padding: 8px 0 4px;5805  display: flex;5806  flex-direction: column;5807  gap: 6px;5808}58095810.peach-duress-form .peach-label {5811  margin-top: 4px;5812}58135814.peach-duress-actions {5815  display: flex;5816  gap: 6px;5817  align-items: center;5818  margin-top: 4px;5819}58205821.peach-duress-actions .peach-btn:first-child {5822  margin-right: auto;5823}58245825/* Improved overlay spring entrance */5826.peach-overlay-view.ov-enter-up {5827  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5828}58295830@keyframes ov-enter-up-spring {5831  from { opacity: 0; transform: translateY(16px) scale(0.98); }5832  to   { opacity: 1; transform: translateY(0) scale(1); }5833}58345835.peach-overlay-view.ov-enter-right {5836  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5837}58385839@keyframes ov-enter-right-spring {5840  from { opacity: 0; transform: translateX(18px) scale(0.98); }5841  to   { opacity: 1; transform: translateX(0) scale(1); }5842}58435844/* ── Onboarding-mode restore screens (file import) ── */5845/* Used when MainImportView renders during onboarding (no vault yet).5846   Animates like a lock-screen transition. */5847.peach-lock-view {5848  position: absolute;5849  inset: 0;5850  display: flex;5851  flex-direction: column;5852  background:5853    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5854    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5855    var(--peach-bg);5856  z-index: 2;5857  overflow: hidden;5858  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5859}58605861.peach-lock-view-header {5862  display: flex;5863  align-items: center;5864  justify-content: space-between;5865  padding: 16px 18px 12px;5866  flex-shrink: 0;5867}58685869/* ───────── Settings: auto-lock select ───────── */5870.peach-settings-select {5871  font-family: "IBM Plex Mono", monospace;5872  font-size: 0.6875rem;5873  background: transparent;5874  border: 1px solid var(--peach-t3);5875  border-radius: 4px;5876  color: var(--peach-t1);5877  padding: 3px 6px;5878  cursor: pointer;5879  outline: none;5880}5881.peach-settings-select:focus {5882  border-color: var(--peach-accent);5883}58845885/* ───────── Duress status pill (new polished) ───────── */5886.peach-duress-status-pill {5887  font-family: "IBM Plex Mono", monospace;5888  font-size: 0.5625rem;5889  text-transform: uppercase;5890  letter-spacing: 0.12em;5891  padding: 2px 8px;5892  border-radius: 12px;5893  background: var(--peach-t3);5894  color: var(--peach-t2);5895  flex-shrink: 0;5896}5897.peach-duress-status-pill.is-active {5898  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5899  color: var(--peach-accent);5900}59015902/* ───────── Entry advanced disclosure (canary) ───────── */5903.peach-entry-advanced {5904  margin-top: 12px;5905  border-top: 1px solid var(--peach-t3);5906  padding-top: 10px;5907  position: relative;5908  z-index: 1;5909}5910.peach-entry-advanced-toggle {5911  display: flex;5912  align-items: center;5913  justify-content: space-between;5914  width: 100%;5915  background: transparent;5916  border: none;5917  cursor: pointer;5918  padding: 0;5919  color: var(--peach-t2);5920}5921.peach-canary-section {5922  margin-top: 10px;5923  display: grid;5924  gap: 6px;5925}59265927/* ───────── Import: merge/replace radio choices ───────── */5928.peach-import-choice {5929  display: flex;5930  align-items: flex-start;5931  gap: 10px;5932  padding: 8px 10px;5933  border: 1px solid var(--peach-t3);5934  border-radius: 10px;5935  cursor: pointer;5936  margin-bottom: 6px;5937  transition: border-color 120ms ease, background 120ms ease;5938}5939.peach-import-choice:hover {5940  border-color: var(--peach-accent);5941}5942.peach-import-choice input[type="radio"] {5943  margin-top: 3px;5944  accent-color: var(--peach-accent);5945  flex-shrink: 0;5946}5947.peach-import-choice-main {5948  display: flex;5949  flex-direction: column;5950  gap: 2px;5951  min-width: 0;5952}5953.peach-import-choice-label {5954  font-size: 0.75rem;5955  color: var(--peach-t0);5956}5957.peach-import-choice-sub {5958  font-size: 0.6875rem;5959  color: var(--peach-t2);5960  line-height: 1.5;5961}59625963/* ───────── Export: success confirmation strip ───────── */5964.peach-export-success {5965  display: flex;5966  align-items: flex-start;5967  gap: 10px;5968  padding: 12px;5969  border-radius: 12px;5970  border: 1px solid rgba(150, 175, 110, 0.3);5971  background: rgba(150, 175, 110, 0.08);5972  color: var(--peach-t0);5973  font-size: 0.75rem;5974  line-height: 1.55;5975}5976.peach-export-success-check {5977  color: rgba(150, 175, 110, 0.9);5978  font-size: 0.875rem;5979  flex-shrink: 0;5980}59815982/* ── Trash view ──────────────────────────────────────────────────────── */5983.peach-trash-entry-row {5984  display: flex;5985  align-items: center;5986  justify-content: space-between;5987  gap: 8px;5988  padding: 8px 0;5989  border-bottom: 1px solid var(--peach-border);5990}5991.peach-trash-entry-info {5992  flex: 1;5993  min-width: 0;5994  display: flex;5995  flex-direction: column;5996  gap: 2px;5997}5998.peach-trash-entry-title {5999  font-size: 0.8125rem;6000  color: var(--peach-t0);6001  overflow: hidden;6002  text-overflow: ellipsis;6003  white-space: nowrap;6004}6005.peach-trash-entry-meta {6006  font-family: var(--font-mono);6007  font-size: 0.5625rem;6008  color: var(--peach-t2);6009  letter-spacing: 0.04em;6010}6011.peach-trash-entry-actions {6012  display: flex;6013  align-items: center;6014  gap: 4px;6015  flex-shrink: 0;6016}6017.peach-trash-delete-btn {6018  background: transparent;6019  border: 0;6020  color: var(--peach-t3);6021  font-size: 1rem;6022  line-height: 1;6023  cursor: pointer;6024  padding: 2px 5px;6025  transition: color 0.15s;6026}6027.peach-trash-delete-btn:hover { color: var(--peach-breach); }6028.peach-trash-list {6029  overflow-y: auto;6030}6031.peach-trash-footer {6032  display: flex;6033  align-items: center;6034  gap: 8px;6035  padding: 8px 0 0;6036  border-top: 1px solid var(--peach-border);6037  margin-top: 4px;6038}6039.peach-trash-purge-all {6040  background: transparent;6041  border: 0;6042  color: var(--peach-t3);6043  font-size: 0.625rem;6044  cursor: pointer;6045  padding: 4px 0;6046  letter-spacing: 0.03em;6047  transition: color 0.2s;6048}6049.peach-trash-purge-all:hover { color: var(--peach-breach); }6050.peach-trash-purge-confirm-label {6051  font-size: 0.625rem;6052  color: var(--peach-t1);6053  flex: 1;6054}60556056/* ── Settings shortcuts grid ─────────────────────────────────────────── */6057.peach-shortcuts-grid {6058  display: grid;6059  grid-template-columns: auto 1fr;6060  gap: 6px 12px;6061  align-items: center;6062  padding: 4px 0;6063}6064.peach-shortcut-key {6065  font-family: var(--font-mono);6066  font-size: 0.625rem;6067  color: var(--peach-t0);6068  background: var(--peach-t3);6069  border-radius: 4px;6070  padding: 2px 6px;6071  white-space: nowrap;6072  text-align: center;6073}6074.peach-shortcut-desc {6075  font-size: 0.6875rem;6076  color: var(--peach-t1);6077}60786079/* ── Sort bar trash button ───────────────────────────────────────────── */6080.peach-sort-trash-btn {6081  display: flex;6082  align-items: center;6083  justify-content: center;6084  padding: 3px 5px;6085  background: transparent;6086  border: none;6087  cursor: pointer;6088  color: var(--peach-t2);6089  border-radius: 4px;6090  transition: color 140ms ease, background 140ms ease;6091}6092.peach-sort-trash-btn:hover {6093  color: var(--peach-t1);6094  background: var(--peach-t3);6095}6096.peach-sort-trash-btn.is-active {6097  color: var(--peach-accent);6098}60996100/* Accent color picker */6101.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }6102.peach-accent-picker {6103  display: flex;6104  flex-wrap: wrap;6105  gap: 7px;6106  padding: 2px 0;6107}6108.peach-accent-swatch {6109  width: 22px;6110  height: 22px;6111  border-radius: 50%;6112  border: 2px solid transparent;6113  cursor: pointer;6114  padding: 0;6115  transition: transform 100ms;6116  outline-offset: 2px;6117}6118.peach-accent-swatch:hover { transform: scale(1.15); }6119.peach-accent-swatch.is-active {6120  border-color: var(--peach-t0);6121  transform: scale(1.1);6122}61236124.peach-pill-group {6125  display: flex;6126  gap: 6px;6127}6128.peach-pill-group .peach-btn.is-active {6129  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);6130  border-color: var(--peach-accent);6131  color: var(--peach-t0);6132}61336134/* ── Card entry styles ───────────────────────────────────────── */6135.peach-card-number {6136  font-family: var(--peach-mono);6137  letter-spacing: 0.08em;6138}61396140.peach-card-network-badge {6141  font-size: 0.625rem;6142  padding: 1px 5px;6143  border-radius: 4px;6144  border: 0.5px solid var(--peach-border);6145  color: var(--peach-text-dim);6146  margin-left: 6px;6147  vertical-align: middle;6148}61496150.peach-card-expiry-row {6151  display: flex;6152  align-items: center;6153  gap: 8px;6154}61556156.peach-card-expiry-sep {6157  color: var(--peach-text-dim);6158}61596160/* ── Pro tier — upgrade screen ──────────────────────────────── */6161.peach-pro-mark {6162  font-size: 0.5625rem;6163  color: var(--peach-accent);6164  margin-left: 6px;6165  vertical-align: super;6166  opacity: 0.7;6167}61686169.peach-pro-mini-badge {6170  display: block;6171  font-size: 0.625rem;6172  font-style: italic;6173  color: var(--peach-accent);6174  letter-spacing: 0.04em;6175  margin-top: -2px;6176  padding-left: 2px;6177  opacity: 0.85;6178  text-align: center;6179}61806181.peach-wordmark-stack {6182  display: inline-flex;6183  flex-direction: column;6184  align-items: center;6185}61866187/* ── Pro tier — upgrade page ─────────────────────────────────── */6188/* ── Pro upgrade — redesigned editorial layout ─────────────────── */61896190.peach-pro-upgrade {6191  display: flex;6192  flex-direction: column;6193  align-items: stretch;6194  gap: 10px;6195  padding: 2px 2px 12px;6196}61976198.peach-pro-eyebrow {6199  margin: 0;6200  font-family: var(--font-ui);6201  font-size: 0.625rem;6202  font-weight: 500;6203  letter-spacing: 0.12em;6204  color: var(--peach-accent);6205}62066207.peach-pro-headline {6208  margin: 0;6209  font-family: var(--font-display, "Cormorant Garamond", serif);6210  font-size: 30px;6211  font-weight: 700;6212  font-style: normal;6213  line-height: 1.05;6214  color: var(--peach-t0);6215  letter-spacing: -0.01em;6216}6217.peach-pro-headline em {6218  font-style: italic;6219  font-weight: 400;6220  color: var(--peach-accent);6221}62226223.peach-pro-subtitle {6224  margin: 0;6225  font-size: 0.6875rem;6226  line-height: 1.5;6227  color: var(--peach-t1);6228}62296230/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6231.peach-pro-section-label {6232  margin: 6px 0 0;6233  font-family: var(--font-ui);6234  font-size: 0.5625rem;6235  font-weight: 500;6236  letter-spacing: 0.12em;6237  text-transform: uppercase;6238  color: var(--peach-t2);6239}62406241/* 2-column numbered feature grid */6242.peach-pro-grid {6243  display: grid;6244  grid-template-columns: 1fr 1fr;6245  border-top: 1px solid var(--peach-border);6246  border-left: 1px solid var(--peach-border);6247}62486249.peach-pro-grid-item {6250  display: flex;6251  flex-direction: column;6252  gap: 2px;6253  padding: 8px 9px;6254  border-right: 1px solid var(--peach-border);6255  border-bottom: 1px solid var(--peach-border);6256}62576258.peach-pro-grid-item--wide {6259  grid-column: 1 / -1;6260}62616262.peach-pro-grid-num {6263  font-family: var(--font-mono);6264  font-size: 0.5625rem;6265  color: var(--peach-accent);6266  letter-spacing: 0.06em;6267  opacity: 0.85;6268}62696270.peach-pro-grid-name {6271  font-size: 0.8125rem;6272  font-weight: 500;6273  color: var(--peach-t0);6274  line-height: 1.2;6275}62766277.peach-pro-grid-desc {6278  font-size: 0.625rem;6279  color: var(--peach-t1);6280  line-height: 1.4;6281}62826283.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6284  animation: peach-pulse-accent 600ms ease-out forwards;6285}62866287@keyframes peach-pulse-accent {6288  0%   { opacity: 1; transform: scale(1.2); }6289  100% { opacity: 0.85; transform: scale(1); }6290}62916292/* Actions */6293.peach-pro-upgrade-actions {6294  display: flex;6295  flex-direction: column;6296  align-items: stretch;6297  gap: 10px;6298}62996300.peach-pro-pricing {6301  margin: 0;6302  font-size: 1rem;6303  font-weight: 600;6304  color: var(--peach-t0);6305  letter-spacing: 0.01em;6306}6307.peach-pro-pricing-sub {6308  font-size: 0.75rem;6309  font-weight: 400;6310  color: var(--peach-t1);6311  letter-spacing: 0.02em;6312}63136314.peach-pro-upgrade-cta {6315  display: flex;6316  align-items: center;6317  justify-content: center;6318  text-decoration: none;6319  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6320  border: 1px solid var(--peach-accent);6321  border-radius: 10px;6322  color: var(--peach-accent);6323  font-family: var(--font-ui);6324  font-size: 0.8125rem;6325  font-weight: 600;6326  letter-spacing: 0.06em;6327  padding: 11px 16px;6328  transition: background 0.15s ease, color 0.15s ease;6329}6330.peach-pro-upgrade-cta:hover {6331  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6332}63336334.peach-pro-key-divider {6335  display: flex;6336  align-items: center;6337  gap: 8px;6338  color: var(--peach-t2);6339  font-size: 0.5625rem;6340  letter-spacing: 0.1em;6341}6342.peach-pro-key-divider::before,6343.peach-pro-key-divider::after {6344  content: "";6345  flex: 1;6346  height: 1px;6347  background: var(--peach-border);6348}63496350/* Inline key entry row */6351.peach-pro-key-inline {6352  display: flex;6353  align-items: center;6354  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6355  border: 1px solid var(--peach-border);6356  border-radius: 8px;6357  overflow: hidden;6358}6359.peach-pro-key-inline-input {6360  flex: 1;6361  background: transparent;6362  border: none;6363  outline: none;6364  color: var(--peach-t1);6365  font-family: var(--font-mono);6366  font-size: 0.625rem;6367  letter-spacing: 0.06em;6368  padding: 9px 10px;6369}6370.peach-pro-key-inline-input::placeholder {6371  color: var(--peach-t2);6372}6373.peach-pro-key-apply {6374  background: transparent;6375  border: none;6376  border-left: 1px solid var(--peach-border);6377  color: var(--peach-t2);6378  font-family: var(--font-ui);6379  font-size: 0.5625rem;6380  font-weight: 600;6381  letter-spacing: 0.08em;6382  padding: 9px 10px;6383  cursor: pointer;6384  transition: color 0.15s ease;6385  flex-shrink: 0;6386}6387.peach-pro-key-apply:not(:disabled):hover {6388  color: var(--peach-accent);6389}6390.peach-pro-key-apply:disabled {6391  opacity: 0.35;6392  cursor: not-allowed;6393}63946395/* ── Pro tier — key ceremony ─────────────────────────────────── */6396.peach-pro-key-ceremony {6397  display: flex;6398  flex-direction: column;6399  align-items: center;6400  gap: 12px;6401  padding: 20px 4px 16px;6402}64036404.peach-pro-key-ceremony .peach-lock-rune-string {6405  font-size: 1rem;6406  gap: 12px;6407  flex: 0;6408  justify-content: center;6409}64106411.peach-pro-key-ceremony-label {6412  margin: 0;6413  font-size: 0.6875rem;6414  color: var(--peach-t2);6415  font-style: italic;6416  letter-spacing: 0.04em;6417}64186419.peach-pro-key-input {6420  font-family: var(--font-mono, monospace);6421  letter-spacing: 0.06em;6422  text-align: center;6423  width: 100%;6424  box-sizing: border-box;6425}64266427.peach-pro-key-error {6428  margin: 0;6429  font-size: 0.75rem;6430  text-align: center;6431  color: var(--peach-breach, #e55);6432  padding: 0;6433}64346435.peach-pro-key-activate {6436  width: 100%;6437  text-align: center;6438  box-sizing: border-box;6439  padding: 10px 20px;6440  font-size: 0.8125rem;6441}64426443.peach-pro-key-cancel {6444  background: transparent;6445  border: 0;6446  color: var(--peach-t2);6447  font-size: 0.6875rem;6448  cursor: pointer;6449  padding: 2px 8px;6450  transition: color 0.2s;6451}64526453.peach-pro-key-cancel:hover { color: var(--peach-accent); }64546455/* ── Pro tier — active state ─────────────────────────────────── */6456.peach-pro-active {6457  display: flex;6458  flex-direction: column;6459  align-items: center;6460  gap: 0;6461  padding: 8px 4px 16px;6462  min-height: 280px;6463}64646465.peach-pro-active-hero {6466  display: flex;6467  flex-direction: column;6468  align-items: center;6469  gap: 6px;6470  padding: 20px 0 8px;6471}64726473.peach-pro-active-mark-wrap {6474  display: flex;6475  align-items: center;6476  justify-content: center;6477  margin-bottom: 4px;6478}64796480.peach-pro-active-mark {6481  width: 60px;6482  height: 60px;6483}64846485.peach-pro-active-title {6486  font-family: var(--font-display, var(--font-ui));6487  font-size: 26px;6488  margin: 0;6489  color: var(--peach-t0);6490  letter-spacing: 0.01em;6491}64926493.peach-pro-active-since {6494  margin: 0;6495  font-size: 0.6875rem;6496  color: var(--peach-t2);6497  font-style: italic;6498}64996500.peach-pro-active-features {6501  display: flex;6502  flex-direction: column;6503  gap: 8px;6504  width: 100%;6505  padding: 14px 8px 0;6506  border-top: 1px solid var(--peach-border);6507  flex: 1;6508}65096510.peach-pro-active-feature {6511  display: flex;6512  align-items: center;6513  gap: 9px;6514}65156516.peach-pro-active-feature-mark {6517  color: var(--peach-accent);6518  font-size: 0.625rem;6519  opacity: 0.65;6520  flex-shrink: 0;6521}65226523.peach-pro-active-feature-name {6524  font-size: 0.75rem;6525  color: var(--peach-t1);6526}65276528.peach-pro-deactivate {6529  align-self: center;6530  background: transparent;6531  border: 0;6532  color: var(--peach-t3);6533  font-size: 0.625rem;6534  cursor: pointer;6535  padding: 8px 0 0;6536  margin-top: 16px;6537  letter-spacing: 0.03em;6538  transition: color 0.2s;6539}65406541.peach-pro-deactivate:hover { color: var(--peach-t2); }65426543.peach-pro-deactivate:disabled {6544  opacity: 0.5;6545  cursor: default;6546}65476548/* ── Pro card activation sparkles & thank-you ── */6549button.peach-pro-active-mark-wrap {6550  background: transparent;6551  border: 0;6552  padding: 0;6553  cursor: pointer;6554  position: relative;6555  overflow: visible;6556}65576558.peach-pro-sparks {6559  position: absolute;6560  inset: 0;6561  pointer-events: none;6562  overflow: visible;6563}65646565.peach-pro-spark {6566  position: absolute;6567  top: 50%;6568  left: 50%;6569  font-size: 9px;6570  line-height: 1;6571  opacity: 0;6572  transform: translate(-50%, -50%);6573  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;6574}65756576@keyframes peach-pro-spark-fly {6577  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }6578  25%  { opacity: 1; }6579  100% {6580    opacity: 0;6581    transform: translate(6582      calc(-50% + var(--spark-x, 0px)),6583      calc(-50% + var(--spark-y, -40px))6584    ) scale(0.8);6585  }6586}65876588.peach-pro-thankyou-text {6589  margin: 4px 0 0;6590  font-size: 0.6875rem;6591  font-style: italic;6592  color: currentColor;6593  opacity: 0;6594  animation: peach-pro-thankyou-flash 2.5s ease both;6595}65966597@keyframes peach-pro-thankyou-flash {6598  0%   { opacity: 0; transform: translateY(4px); }6599  15%  { opacity: 0.75; transform: translateY(0); }6600  75%  { opacity: 0.75; }6601  100% { opacity: 0; }6602}66036604/* ── Pro advanced health remediation queue ──────────────────── */6605.peach-health-pro-queue {6606  display: flex;6607  flex-direction: column;6608  gap: 10px;6609  padding: 12px;6610  margin: 0 0 12px;6611  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6612  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6613  border-radius: 10px;6614}66156616.peach-health-pro-queue-head {6617  display: flex;6618  justify-content: space-between;6619  align-items: baseline;6620}66216622.peach-health-pro-queue-title {6623  font-size: 0.75rem;6624  font-weight: 500;6625  letter-spacing: 0.04em;6626  text-transform: uppercase;6627  color: var(--peach-accent);6628}66296630.peach-health-pro-queue-score {6631  font-size: 0.6875rem;6632  color: var(--peach-t2);6633}66346635.peach-health-pro-row {6636  display: flex;6637  gap: 10px;6638  align-items: center;6639  padding: 8px 0;6640  border-top: 1px solid var(--peach-border);6641}66426643.peach-health-pro-row-info {6644  flex: 1;6645  display: flex;6646  flex-direction: column;6647  gap: 4px;6648  min-width: 0;6649}66506651.peach-health-pro-action {6652  flex: 0 0 auto;6653  padding: 4px 8px;6654  font-size: 0.5625rem;6655  letter-spacing: 0.08em;6656  text-transform: uppercase;6657}66586659.peach-health-pro-row-name {6660  font-size: 0.8125rem;6661  color: var(--peach-t0);6662  overflow: hidden;6663  text-overflow: ellipsis;6664  white-space: nowrap;6665}66666667.peach-health-pro-row-meta {6668  font-size: 0.6875rem;6669  color: var(--peach-t2);6670}66716672.peach-health-pro-bar {6673  height: 2px;6674  background: var(--peach-border);6675  border-radius: 2px;6676  overflow: hidden;6677  margin-top: 2px;6678}66796680.peach-health-pro-bar-fill {6681  height: 100%;6682  background: var(--peach-accent);6683  transition: width 200ms ease-out;6684}66856686/* ── Pro activation celebration ── */6687@keyframes peach-pro-bloom {6688  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6689  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6690                 drop-shadow(0 0 48px var(--peach-glow)); }6691  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6692}66936694@keyframes peach-pro-wordmark-in {6695  from { opacity: 0; transform: translateY(4px); }6696  to   { opacity: 1; transform: translateY(0); }6697}66986699@keyframes peach-pro-fade-out {6700  from { opacity: 1; }6701  to   { opacity: 0; }6702}67036704.peach-pro-celebration {6705  background:6706    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6707    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6708    var(--peach-bg);6709  border: 1px solid var(--peach-t3);6710  box-shadow:6711    0 2px 8px rgba(0,0,0,0.55),6712    0 14px 48px rgba(0,0,0,0.7),6713    0 0 0 1px rgba(240,232,216,0.04);6714  overflow: hidden;6715  width: 320px;6716  height: 520px;6717  display: flex;6718  flex-direction: column;6719  align-items: center;6720  justify-content: center;6721  gap: 8px;6722  padding: 32px 24px;6723  text-align: center;6724}67256726.peach-pro-celebration.is-leaving {6727  animation: peach-pro-fade-out 400ms ease forwards;6728}67296730.peach-pro-bloom-target {6731  display: flex;6732  align-items: center;6733  justify-content: center;6734  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6735  margin-bottom: 12px;6736}67376738.peach-pro-bloom-icon {6739  width: 48px;6740  height: 48px;6741}67426743.peach-pro-wordmark {6744  font-family: var(--font-display);6745  font-size: 22px;6746  font-style: italic;6747  font-weight: 400;6748  color: var(--peach-accent);6749  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6750}67516752.peach-pro-thankyou {6753  font-size: 0.75rem;6754  font-style: italic;6755  color: var(--peach-t2);6756  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6757}675867596760/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6761.peach-pro-notice-banner {6762  display: flex;6763  align-items: center;6764  gap: 8px;6765  padding: 7px 12px;6766  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6767  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6768  font-size: 0.6875rem;6769  color: var(--peach-t2);6770  font-family: "IBM Plex Mono", monospace;6771  flex-shrink: 0;6772}67736774.peach-pro-notice-link {6775  background: none;6776  border: none;6777  padding: 0;6778  cursor: pointer;6779  font-size: 0.6875rem;6780  color: var(--peach-accent);6781  font-family: "IBM Plex Mono", monospace;6782  margin-left: auto;6783  white-space: nowrap;6784}67856786.peach-pro-notice-close {6787  background: none;6788  border: none;6789  padding: 0 0 0 4px;6790  cursor: pointer;6791  font-size: 0.625rem;6792  color: var(--peach-t3);6793  line-height: 1;6794}67956796/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6797   Renders over whatever view is showing. 60-second expiry; the popup ticks6798   the countdown each second and clears the banner when it hits zero. */6799.peach-pair-request-banner {6800  display: flex;6801  flex-direction: column;6802  gap: 8px;6803  padding: 10px 12px;6804  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6805  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6806  font-family: "IBM Plex Mono", monospace;6807  flex-shrink: 0;6808}68096810.peach-pair-toast {6811  padding: 8px 12px;6812  font-family: "IBM Plex Mono", monospace;6813  font-size: 0.75rem;6814  color: var(--peach-t1);6815  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6816  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6817  flex-shrink: 0;6818  text-align: center;6819}68206821.peach-pair-toast strong {6822  color: var(--peach-t0);6823  font-weight: 500;6824}68256826.peach-pair-request-header {6827  display: flex;6828  align-items: center;6829  gap: 8px;6830  font-size: 0.75rem;6831  color: var(--peach-t1);6832}68336834.peach-pair-request-mark {6835  font-size: 0.875rem;6836  display: inline-flex;6837  align-items: center;6838}68396840.peach-pair-request-icon {6841  width: 1em;6842  height: 1em;6843}68446845.peach-pair-request-title {6846  font-weight: 600;6847  color: var(--peach-t0);6848}68496850.peach-pair-request-countdown {6851  margin-left: auto;6852  font-variant-numeric: tabular-nums;6853  color: var(--peach-t2);6854  font-size: 0.6875rem;6855}68566857.peach-pair-request-body {6858  margin: 0;6859  font-size: 0.75rem;6860  color: var(--peach-t1);6861  line-height: 1.4;6862}68636864.peach-pair-request-body strong {6865  color: var(--peach-t0);6866  font-weight: 600;6867}68686869.peach-pair-request-actions {6870  display: flex;6871  gap: 8px;6872  justify-content: flex-end;6873}68746875/* ─── First-run onboarding ──────────────────────────────────────────────6876   Three-card welcome shown once before vault creation. The PeachScript6877   rune background drifts behind everything at very low opacity — it's6878   atmosphere, not focus. The cards themselves use the same panel6879   language as the rest of the popup so the transition into NewVault is6880   continuous, not a jarring switch of visual register. */68816882.peach-onboarding {6883  position: relative;6884  display: flex;6885  flex-direction: column;6886  width: 100%;6887  height: 100%;6888  padding: 16px 16px 18px;6889  box-sizing: border-box;6890  overflow: hidden;6891  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6892}68936894.peach-onboarding.is-completing {6895  animation: peach-onboard-exit 200ms ease-out forwards;6896}68976898.peach-rune-background {6899  position: absolute;6900  inset: 0;6901  width: 100%;6902  height: 100%;6903  pointer-events: none;6904  z-index: 0;6905  transition: opacity 500ms ease-out;6906}69076908.peach-onboarding.is-completing .peach-rune-background {6909  opacity: 0;6910}69116912.peach-onboarding-header {6913  position: relative;6914  z-index: 1;6915  display: flex;6916  align-items: center;6917  margin-bottom: 14px;6918}69196920.peach-onboarding-card {6921  position: relative;6922  z-index: 1;6923  flex: 1;6924  display: flex;6925  flex-direction: column;6926  gap: 10px;6927  padding: 22px 20px;6928  border-radius: 16px;6929  border: 1px solid var(--peach-t3);6930  background:6931    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6932  backdrop-filter: blur(3px);6933  -webkit-backdrop-filter: blur(3px);6934  box-shadow:6935    inset 0 1px 0 rgba(240, 232, 216, 0.04),6936    0 12px 28px rgba(0, 0, 0, 0.12);6937  cursor: pointer;6938  user-select: none;6939  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6940}69416942.peach-onboarding-card.is-exiting {6943  animation: peach-card-out 120ms ease-in forwards;6944  pointer-events: none;6945}69466947.peach-onboarding-card-headline {6948  margin: 0;6949  font-family: var(--font-display);6950  font-style: italic;6951  font-weight: 400;6952  font-size: 22px;6953  line-height: 1.05;6954  color: var(--peach-t0);6955  white-space: pre-line;6956}69576958.peach-onboarding-divider {6959  margin: 4px 0 6px;6960  border: 0;6961  border-top: 1px solid var(--peach-t3);6962  width: 100%;6963}69646965.peach-onboarding-body {6966  margin: 0;6967  font-size: 0.8125rem;6968  line-height: 1.6;6969  color: var(--peach-t1);6970}69716972.peach-onboarding-warning {6973  display: flex;6974  align-items: flex-start;6975  gap: 8px;6976  margin: 6px 0 0;6977  padding-top: 8px;6978  border-top: 1px dashed var(--peach-t3);6979  font-size: 0.8125rem;6980  line-height: 1.5;6981  color: var(--peach-t1);6982}69836984.peach-onboarding-warning-icon {6985  color: var(--peach-accent);6986  font-size: 0.8125rem;6987  line-height: 1.5;6988  flex: 0 0 auto;6989}69906991.peach-onboarding-nav {6992  position: relative;6993  z-index: 1;6994  display: flex;6995  align-items: center;6996  justify-content: space-between;6997  margin-top: 12px;6998  padding: 0 4px;6999}70007001.peach-onboarding-dots {7002  display: flex;7003  align-items: center;7004  gap: 6px;7005}70067007.peach-onboarding-dot {7008  width: 6px;7009  height: 6px;7010  border-radius: 50%;7011  background: var(--peach-t2);7012  transition: width 200ms ease, height 200ms ease, background 200ms ease;7013}70147015.peach-onboarding-dot.is-active {7016  width: 8px;7017  height: 8px;7018  background: var(--peach-accent);7019}70207021.peach-onboarding-next {7022  background: none;7023  border: none;7024  padding: 4px 0;7025  cursor: pointer;7026  font-family: "IBM Plex Mono", monospace;7027  font-size: 0.6875rem;7028  letter-spacing: 0.04em;7029  color: var(--peach-t1);7030  transition: color 150ms ease;7031}70327033.peach-onboarding-next:hover {7034  color: var(--peach-t0);7035}70367037.peach-onboarding-next:disabled {7038  opacity: 0.5;7039  cursor: default;7040}70417042.peach-onboarding-back {7043  background: none;7044  border: none;7045  padding: 4px 0;7046  cursor: pointer;7047  font-family: "IBM Plex Mono", monospace;7048  font-size: 0.6875rem;7049  letter-spacing: 0.04em;7050  color: var(--peach-t2);7051  transition: color 150ms ease;7052}70537054.peach-onboarding-back:hover {7055  color: var(--peach-t0);7056}70577058.peach-onboarding-back:disabled {7059  opacity: 0.5;7060  cursor: default;7061}70627063/* Reserve back-button width on the first card so the dots stay centred */7064.peach-onboarding-back-spacer {7065  width: 44px;7066}70677068.peach-onboarding-mobile-card-buttons {7069  display: flex;7070  flex-direction: column;7071  gap: 8px;7072  margin-top: 16px;7073}70747075@keyframes peach-onboard-enter {7076  from { opacity: 0; transform: translateY(20px); }7077  to   { opacity: 1; transform: translateY(0); }7078}70797080@keyframes peach-onboard-exit {7081  from { opacity: 1; }7082  to   { opacity: 0; }7083}70847085@keyframes peach-card-in {7086  from { opacity: 0; transform: translateX(12px); }7087  to   { opacity: 1; transform: translateX(0); }7088}70897090@keyframes peach-card-out {7091  from { opacity: 1; transform: translateX(0); }7092  to   { opacity: 0; transform: translateX(-12px); }7093}70947095/* ─── New vault screen — matched to onboarding card language ─────────── */70967097/* Two classes so this beats the shared .peach-screen.lock-screen--vault-stage7098   rule (same element) without loosening the unlock/restore screens. The7099   create-vault screen is the only vault-stage view tall enough to overflow7100   the 520px popup, so its spacing is tuned to fit header → card → restore →7101   recovery warning with nothing clipped. */7102.peach-screen.peach-newvault {7103  position: relative;7104  display: flex;7105  flex-direction: column;7106  gap: 12px;7107  padding: 14px 16px 12px;7108  overflow: hidden;7109}71107111/* Suppress the warm-blob ambient art inherited from .lock-screen — the7112   new vault card now carries the visual weight. */7113.peach-newvault::before {7114  content: none;7115}71167117.peach-newvault-header {7118  position: relative;7119  z-index: 2;7120  display: flex;7121  align-items: center;7122  gap: 10px;7123  margin-bottom: 2px;7124}71257126.peach-newvault-back {7127  display: inline-flex;7128  align-items: center;7129  gap: 4px;7130  background: transparent;7131  border: none;7132  color: var(--peach-t2);7133  font-family: "IBM Plex Mono", monospace;7134  font-size: 0.625rem;7135  letter-spacing: 0.06em;7136  cursor: pointer;7137  padding: 4px 6px;7138  border-radius: 6px;7139  transition: color 120ms ease, background 120ms ease;7140}71417142.peach-newvault-back:hover {7143  color: var(--peach-t0);7144  background: rgba(240, 232, 216, 0.04);7145}71467147.peach-newvault-mark {7148  position: absolute;7149  right: -12px;7150  top: 6px;7151  width: 110px;7152  height: 110px;7153  pointer-events: none;7154  opacity: 0.10;7155  filter: saturate(0.9);7156  z-index: 0;7157}7158.peach-newvault-mark-art {7159  width: 100%;7160  height: 100%;7161}7162.peach-newvault-mark-art path:nth-child(1) {7163  fill: rgba(123, 144, 96, 0.88);7164}7165.peach-newvault-mark-art path:nth-child(2) {7166  stroke: rgba(94, 122, 66, 0.95);7167}71687169.peach-newvault-card {7170  position: relative;7171  z-index: 1;7172  display: flex;7173  flex-direction: column;7174  gap: 8px;7175  padding: 16px 20px 14px;7176  border-radius: 16px;7177  border: 1px solid var(--peach-t3);7178  background:7179    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));7180  backdrop-filter: blur(3px);7181  -webkit-backdrop-filter: blur(3px);7182  box-shadow:7183    inset 0 1px 0 rgba(240, 232, 216, 0.04),7184    0 12px 28px rgba(0, 0, 0, 0.12);7185  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;7186}71877188.peach-newvault-headline {7189  margin: 0;7190  font-family: var(--font-display);7191  font-style: italic;7192  font-weight: 400;7193  font-size: 24px;7194  line-height: 1.05;7195  color: var(--peach-t0);7196  white-space: pre-line;7197}71987199.peach-newvault-divider {7200  margin: 2px 0 4px;7201  border: 0;7202  border-top: 1px solid var(--peach-t3);7203  width: 100%;7204}72057206.peach-newvault-field {7207  display: flex;7208  flex-direction: column;7209  gap: 4px;7210}72117212.peach-newvault-label-row {7213  display: flex;7214  align-items: center;7215  justify-content: space-between;7216}72177218/* Monospace input scaled to the card. Replaces the 22px unlock-input7219   so the placeholder no longer overflows and the field reads as part7220   of the same surface as the body copy. */7221.peach-newvault-input {7222  font-size: 0.875rem;7223  letter-spacing: 0.18em;7224  padding: 8px 0;7225}7226.peach-newvault-input::placeholder {7227  letter-spacing: 0.18em;7228  color: var(--peach-t2);7229}72307231.peach-newvault-hint {7232  margin: 2px 0 0;7233  font-family: "IBM Plex Mono", monospace;7234  font-size: 0.625rem;7235  color: var(--peach-t2);7236  letter-spacing: 0.04em;7237}72387239.peach-newvault-submit {7240  margin-top: 4px;7241}72427243.peach-newvault-warning {7244  display: flex;7245  align-items: flex-start;7246  gap: 8px;7247  margin: 2px 0 0;7248  padding-top: 8px;7249  border-top: 1px dashed var(--peach-t3);7250  font-size: 0.75rem;7251  line-height: 1.45;7252  color: var(--peach-t1);7253}72547255.peach-newvault-warning-icon {7256  color: var(--peach-accent);7257  font-size: 0.8125rem;7258  line-height: 1.4;7259  flex: 0 0 auto;7260}72617262/* Restore options sit inside the card, directly under "create vault", so7263   they are always reachable without scrolling. The top divider mirrors the7264   warning's so the choice reads as a deliberate fork, not a footnote. */7265.peach-newvault-restore {7266  position: relative;7267  z-index: 1;7268  display: flex;7269  flex-direction: column;7270  gap: 4px;7271  margin-top: 4px;7272  padding-top: 10px;7273  border-top: 1px dashed var(--peach-t3);7274}72757276/* Settings body — warm accent gradient gives the glass something to blur against */7277.peach-settings-body {7278  background:7279    radial-gradient(7280      ellipse at 30% 20%,7281      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7282      transparent 60%7283    );7284}72857286/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7287/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7288 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7289 * (replacing the vault from a backup file) and "hazard" for actions that7290 * are absolutely irreversible (Panic). Both use the same card scaffold so7291 * they read as a pair, but the colour family signals the severity at a7292 * glance — yellow for caution, red for don't.7293 */7294.peach-danger-card {7295  --danger-tint: 235, 158, 52; /* amber */7296  display: flex;7297  flex-direction: column;7298  gap: 8px;7299  padding: 14px;7300  margin-top: 10px;7301  border-radius: 12px;7302  border: 1px solid rgba(var(--danger-tint), 0.32);7303  background:7304    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7305    rgba(var(--danger-tint), 0.04);7306  box-shadow:7307    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7308    0 0 24px rgba(var(--danger-tint), 0.04);7309  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7310}73117312.peach-danger-card:hover {7313  border-color: rgba(var(--danger-tint), 0.55);7314  box-shadow:7315    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7316    0 0 36px rgba(var(--danger-tint), 0.10);7317}73187319.peach-danger-card--hazard {7320  --danger-tint: 220, 38, 38; /* red */7321}73227323.peach-danger-card-head {7324  display: flex;7325  align-items: center;7326  gap: 10px;7327}73287329.peach-danger-card-glyph {7330  width: 28px;7331  height: 28px;7332  flex-shrink: 0;7333  display: flex;7334  align-items: center;7335  justify-content: center;7336  border-radius: 8px;7337  background: rgba(var(--danger-tint), 0.12);7338  color: rgba(var(--danger-tint), 0.95);7339  font-size: 1rem;7340  line-height: 1;7341}73427343.peach-danger-card-title {7344  margin: 0;7345  font-size: 0.8125rem;7346  font-weight: 600;7347  color: rgba(var(--danger-tint), 0.92);7348  letter-spacing: 0.01em;7349}73507351.peach-danger-card-copy {7352  margin: 0;7353  font-size: 0.6875rem;7354  line-height: 1.5;7355  color: var(--peach-t2);7356}73577358.peach-danger-card-button {7359  width: 100%;7360  padding: 9px;7361  margin-top: 4px;7362  background: transparent;7363  border: 1px solid rgba(var(--danger-tint), 0.45);7364  border-radius: 8px;7365  color: rgba(var(--danger-tint), 0.9);7366  font-size: 0.75rem;7367  font-weight: 500;7368  letter-spacing: 0.02em;7369  cursor: pointer;7370  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7371}73727373.peach-danger-card-button:hover {7374  background: rgba(var(--danger-tint), 0.10);7375  border-color: rgba(var(--danger-tint), 0.75);7376  color: rgb(var(--danger-tint));7377}73787379/* ── Panic flow (three-step destruction) ───────────────────────────────── */7380.peach-panic {7381  display: flex;7382  flex-direction: column;7383  flex: 1;7384  min-height: 0;7385  padding: 28px 20px 20px;7386  gap: 18px;7387  overflow-y: auto;7388  scrollbar-width: none;7389  -ms-overflow-style: none;7390}73917392.peach-panic::-webkit-scrollbar { display: none; }73937394.peach-panic-step2 {7395  background: rgba(220, 38, 38, 0.04);7396}73977398.peach-panic-step3 {7399  position: relative;7400  background: #0f0505;7401  color: #ffffff;7402  overflow: hidden;7403}74047405.peach-panic-rune-bg {7406  position: absolute;7407  inset: 0;7408  opacity: 0.22;7409  pointer-events: none;7410  overflow: hidden;7411}74127413.peach-panic-rune-bg canvas {7414  width: 100% !important;7415  height: 100% !important;7416}74177418.peach-panic-icon {7419  font-size: 32px;7420  color: rgb(220, 38, 38);7421  line-height: 1;7422}74237424.peach-panic-title {7425  margin: 0;7426  font-size: 18px;7427  font-weight: 500;7428  color: var(--peach-t1);7429}74307431.peach-panic-title--severe {7432  font-size: 20px;7433  font-weight: 700;7434  color: rgb(220, 38, 38);7435}74367437.peach-panic-body {7438  margin: 0;7439  font-size: 0.8125rem;7440  line-height: 1.55;7441  color: var(--peach-t2);7442}74437444.peach-panic-body--severe {7445  color: rgba(220, 38, 38, 0.85);7446}74477448.peach-panic-body--final {7449  font-size: 1rem;7450  font-weight: 700;7451  color: rgb(255, 80, 80);7452  line-height: 1.4;7453}74547455.peach-panic-body--final-intro {7456  font-size: 1rem;7457  color: #ffffff;7458  font-weight: 400;7459}74607461.peach-panic-divider {7462  height: 1px;7463  background: rgba(255, 255, 255, 0.08);7464  margin: 4px 0;7465}74667467.peach-panic-confirm-input {7468  width: 100%;7469  padding: 10px 12px;7470  background: rgba(255, 255, 255, 0.02);7471  border: 1px solid rgba(220, 38, 38, 0.4);7472  border-radius: 8px;7473  color: var(--peach-t1);7474  font-family: "IBM Plex Mono", monospace;7475  font-size: 0.875rem;7476  letter-spacing: 0.12em;7477  text-transform: uppercase;7478}74797480.peach-panic-confirm-input:focus {7481  outline: none;7482  border-color: rgb(220, 38, 38);7483}74847485.peach-panic-confirm-input--match {7486  border-color: rgb(220, 38, 38);7487  color: rgb(220, 38, 38);7488}74897490.peach-panic-confirm-label {7491  font-size: 0.6875rem;7492  color: var(--peach-t2);7493  margin: 0 0 -8px;7494  letter-spacing: 0.06em;7495}74967497.peach-panic-actions {7498  display: flex;7499  flex-direction: column;7500  gap: 10px;7501  margin-top: auto;7502}75037504.peach-panic-button {7505  width: 100%;7506  padding: 12px;7507  border-radius: 8px;7508  font-size: 0.8125rem;7509  cursor: pointer;7510  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7511}75127513.peach-panic-button--primary {7514  background: var(--peach-accent);7515  border: 1px solid var(--peach-accent);7516  color: #ffffff;7517  font-weight: 600;7518}75197520.peach-panic-button--primary:hover {7521  background: color-mix(in srgb, var(--peach-accent) 88%, white);7522}75237524.peach-panic-button--danger {7525  background: rgb(220, 38, 38);7526  border: 1px solid rgb(220, 38, 38);7527  color: #ffffff;7528  font-weight: 600;7529}75307531.peach-panic-button--danger:disabled {7532  opacity: 0.35;7533  cursor: not-allowed;7534}75357536.peach-panic-button--ghost {7537  background: transparent;7538  border: 1px solid rgba(255, 255, 255, 0.18);7539  color: var(--peach-t2);7540}75417542.peach-panic-button--ghost:hover {7543  border-color: rgba(255, 255, 255, 0.32);7544  color: var(--peach-t1);7545}75467547.peach-panic-link {7548  background: transparent;7549  border: none;7550  padding: 4px 0;7551  color: rgba(220, 38, 38, 0.65);7552  font-size: 0.75rem;7553  cursor: pointer;7554  text-align: left;7555  text-decoration: underline;7556  text-underline-offset: 3px;7557}75587559.peach-panic-link:hover {7560  color: rgb(220, 38, 38);7561}75627563.peach-panic-bar {7564  background: rgb(220, 38, 38);7565  padding: 16px 20px;7566  margin: -28px -20px 0;7567  text-align: center;7568  font-size: 0.8125rem;7569  font-weight: 700;7570  letter-spacing: 0.12em;7571  color: #ffffff;7572}75737574.peach-panic-final-button {7575  width: 100%;7576  padding: 14px;7577  background: rgb(220, 38, 38);7578  border: none;7579  border-radius: 8px;7580  color: #ffffff;7581  font-size: 0.875rem;7582  font-weight: 700;7583  letter-spacing: 0.08em;7584  text-transform: uppercase;7585  cursor: pointer;7586  animation: peach-panic-pulse 2s ease-in-out infinite;7587}75887589.peach-settings-license {7590  margin-top: 10px;7591  padding-top: 10px;7592  border-top: 1px solid var(--peach-t3);7593}75947595.peach-settings-label {7596  font-size: 0.625rem;7597  letter-spacing: 0.08em;7598  color: var(--peach-t3);7599  display: block;7600  margin-bottom: 6px;7601}76027603.peach-settings-license-row {7604  display: flex;7605  align-items: center;7606  justify-content: space-between;7607  gap: 8px;7608}76097610.peach-settings-license-key {7611  font-family: 'IBM Plex Mono', monospace;7612  font-size: 0.75rem;7613  color: var(--peach-t0);7614  letter-spacing: 0.04em;7615  word-break: break-all;7616  flex: 1;7617  min-width: 0;7618}76197620.peach-settings-license-key--masked {7621  font-family: 'IBM Plex Mono', monospace;7622  font-size: 0.6rem;7623  color: var(--peach-t1);7624  letter-spacing: 0.18em;7625  user-select: none;7626}76277628.peach-settings-license-actions {7629  display: flex;7630  align-items: center;7631  gap: 2px;7632  flex-shrink: 0;7633}76347635.peach-settings-license-copy {7636  font-size: 0.6875rem;7637  color: var(--peach-accent);7638  background: transparent;7639  border: none;7640  cursor: pointer;7641  padding: 4px 8px;7642  border-radius: 4px;7643  flex-shrink: 0;7644  transition: opacity 150ms ease;7645}76467647.peach-settings-license-copy:hover {7648  opacity: 0.75;7649}76507651.peach-settings-license-toggle {7652  display: flex;7653  align-items: center;7654  justify-content: center;7655  background: transparent;7656  border: none;7657  cursor: pointer;7658  padding: 4px 6px;7659  border-radius: 4px;7660  color: var(--peach-t2);7661  transition: color 150ms ease;7662}76637664.peach-settings-license-toggle:hover {7665  color: var(--peach-t1);7666}76677668@keyframes peach-panic-pulse {7669  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7670  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7671}76727673[data-motion="reduce"] .peach-panic-final-button {7674  animation: none;7675}76767677/* Vault History — Settings → Vault sub-view */76787679.peach-history-list {7680  border: 1px solid var(--peach-border);7681  border-radius: 8px;7682  overflow: hidden;7683  margin: 8px 0 4px;7684}76857686.peach-history-row {7687  display: flex;7688  align-items: center;7689  justify-content: space-between;7690  padding: 9px 12px;7691  gap: 10px;7692  border-bottom: 1px solid var(--peach-border);7693}76947695.peach-history-row:last-child {7696  border-bottom: none;7697}76987699.peach-history-meta {7700  display: flex;7701  flex-direction: column;7702  gap: 2px;7703  min-width: 0;7704  flex: 1;7705}77067707.peach-history-time {7708  font-size: 0.75rem;7709  font-family: 'IBM Plex Mono', ui-monospace, monospace;7710  color: var(--peach-t0);7711  white-space: nowrap;7712  overflow: hidden;7713  text-overflow: ellipsis;7714}77157716.peach-history-sub {7717  font-size: 0.625rem;7718  color: var(--peach-t2);7719  letter-spacing: 0.06em;7720  text-transform: uppercase;7721  white-space: nowrap;7722  overflow: hidden;7723  text-overflow: ellipsis;7724}77257726.peach-history-btn {7727  flex-shrink: 0;7728  white-space: nowrap;7729  min-width: 56px;7730  text-align: center;7731}77327733.peach-history-btn.is-busy {7734  opacity: 0.65;7735}77367737.peach-history-footer {7738  font-size: 0.625rem;7739  color: var(--peach-t3);7740  letter-spacing: 0.05em;7741  text-align: right;7742  margin: 0;7743  padding: 2px 0 0;7744}77457746/* ── Context menu + swipe-copy flash ─────────────────────── */7747.peach-context-menu-backdrop {7748  position: fixed;7749  inset: 0;7750  background: rgba(0, 0, 0, 0.45);7751  z-index: 100;7752  display: flex;7753  align-items: flex-end;7754  justify-content: center;7755  animation: peach-ctx-fade 140ms ease both;7756}7757.peach-context-menu {7758  width: min(360px, calc(100vw - 24px));7759  margin-bottom: max(env(safe-area-inset-bottom), 12px);7760  background: var(--peach-bg);7761  border: 1px solid var(--peach-t3);7762  border-radius: 14px;7763  padding: 6px;7764  display: flex;7765  flex-direction: column;7766  gap: 2px;7767  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7768  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7769}7770@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7771@keyframes peach-ctx-rise {7772  from { transform: translateY(16px); opacity: 0; }7773  to   { transform: translateY(0);    opacity: 1; }7774}7775.peach-context-menu-item {7776  background: transparent;7777  color: var(--peach-t0);7778  border: 0;7779  border-radius: 10px;7780  padding: 12px 14px;7781  text-align: left;7782  font: inherit;7783  cursor: pointer;7784}7785.peach-context-menu-item:hover,7786.peach-context-menu-item:focus-visible {7787  background: var(--peach-t3);7788}7789.peach-context-menu-item--danger {7790  color: var(--peach-health-bad, #d96868);7791}7792.peach-context-menu-item--cancel {7793  color: var(--peach-t2);7794  margin-top: 4px;7795  border-top: 1px solid var(--peach-t3);7796  border-radius: 0 0 10px 10px;7797}77987799/* Swipe-to-copy flash */7800.peach-entry-row.is-copy-flash {7801  animation: peach-copy-flash 600ms ease both;7802}7803@keyframes peach-copy-flash {7804  0%   { background: transparent; }7805  20%  { background: rgba(217, 153, 51, 0.32); }7806  100% { background: transparent; }7807}78087809html { font-size: 16px; }78107811/* ── Recovery word entry ─────────────────────────────────────────── */7812.peach-lock-recover-link {7813  display: block;7814  width: 100%;7815  margin-top: 12px;7816  background: none;7817  border: none;7818  font-family: "IBM Plex Mono", monospace;7819  font-size: 0.625rem;7820  letter-spacing: 0.06em;7821  color: var(--peach-t2);7822  cursor: pointer;7823  text-align: center;7824  padding: 4px;7825  transition: color 120ms ease;7826}7827.peach-lock-recover-link:hover {7828  color: var(--peach-t0);7829}78307831.lock-screen--recovery {7832  display: flex;7833  flex-direction: column;7834  align-items: stretch;7835  padding: 12px 20px 24px;7836  overflow: hidden;7837}78387839.peach-recovery-nav {7840  display: flex;7841  align-items: center;7842  position: relative;7843  z-index: 1;7844  margin-bottom: 4px;7845}78467847/* Mask runes to the top decorative band only — keep inputs and the7848   bottom CTA button clear. The bottom of the popup is reserved for7849   submit buttons; rendering runes there overlaps the button glyph. */7850.peach-rune-background--recovery {7851  -webkit-mask-image: linear-gradient(7852    to bottom,7853    black 0px, black 85px,7854    transparent 110px,7855    transparent 100%7856  );7857  mask-image: linear-gradient(7858    to bottom,7859    black 0px, black 85px,7860    transparent 110px,7861    transparent 100%7862  );7863}78647865.peach-recovery-header {7866  text-align: center;7867  margin-bottom: 16px;7868  margin-top: 4px;7869}7870.peach-recovery-header .peach-onboarding-headline {7871  font-size: 1.25rem;7872  font-weight: 300;7873  letter-spacing: 0.02em;7874  margin: 0 0 4px;7875}7876.peach-recovery-header .peach-hint {7877  font-family: "IBM Plex Mono", monospace;7878  font-size: 0.625rem;7879  color: var(--peach-t2);7880  letter-spacing: 0.04em;7881  margin: 0;7882}78837884/* 12-word grid: 2 columns × 6 rows */7885.peach-recovery-grid {7886  display: grid;7887  grid-template-columns: repeat(2, 1fr);7888  gap: 12px 20px;7889  width: 100%;7890  margin-bottom: 0;7891}78927893.peach-recovery-word-slot {7894  display: flex;7895  align-items: center;7896  gap: 6px;7897  min-width: 0;7898}78997900.peach-recovery-word-index {7901  font-family: "IBM Plex Mono", monospace;7902  font-size: 0.5rem;7903  color: rgba(255, 255, 255, 0.35);7904  min-width: 14px;7905  flex-shrink: 0;7906  text-align: right;7907  letter-spacing: 0.04em;7908}79097910.peach-recovery-word-input {7911  flex: 1;7912  min-width: 0;7913  background: transparent;7914  border: none;7915  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7916  color: var(--peach-t0);7917  font-family: "IBM Plex Mono", monospace;7918  font-size: 0.6875rem;7919  letter-spacing: 0.06em;7920  padding: 5px 2px 4px;7921  outline: none;7922  text-transform: lowercase;7923  transition: border-color 120ms ease;7924}7925.peach-recovery-word-input::placeholder {7926  color: rgba(255, 255, 255, 0.18);7927}7928.peach-recovery-word-input:focus {7929  border-bottom-color: var(--peach-accent);7930}79317932.peach-recovery-submit {7933  width: 100%;7934  margin-top: auto;7935}79367937.peach-recovery-new-password-form {7938  width: 100%;7939  display: flex;7940  flex-direction: column;7941  gap: 16px;7942  margin-bottom: 8px;7943}7944.peach-recovery-new-password-form .peach-newvault-field {7945  display: flex;7946  flex-direction: column;7947  gap: 4px;7948}79497950/* ── Recovery words display (post-create) ────────────────────────── */7951.lock-screen--recovery-display {7952  display: flex;7953  flex-direction: column;7954  align-items: stretch;7955  padding: 0 20px 20px;7956  min-height: 0;7957  overflow-y: auto;7958}79597960.peach-recovery-words-display {7961  width: 100%;7962  margin-bottom: 16px;7963  border: 1px solid var(--peach-t3);7964  border-radius: 8px;7965  padding: 12px 14px;7966  background: rgba(245, 240, 234, 0.04);7967}79687969.peach-recovery-words-label {7970  font-family: "IBM Plex Mono", monospace;7971  font-size: 0.5rem;7972  letter-spacing: 0.08em;7973  color: var(--peach-t2);7974  text-transform: uppercase;7975  margin-bottom: 10px;7976}79777978.peach-recovery-word-list {7979  list-style: none;7980  margin: 0;7981  padding: 0;7982  display: grid;7983  grid-template-columns: repeat(2, 1fr);7984  gap: 6px 16px;7985}79867987.peach-recovery-word-item {7988  display: flex;7989  align-items: baseline;7990  gap: 5px;7991}79927993.peach-recovery-word-num {7994  font-family: "IBM Plex Mono", monospace;7995  font-size: 0.5rem;7996  color: var(--peach-t2);7997  width: 14px;7998  flex: 0 0 14px;7999  text-align: right;8000  letter-spacing: 0.04em;8001  font-variant-numeric: tabular-nums;8002}80038004.peach-recovery-download-btn {8005  display: block;8006  margin: 10px auto 0;8007  padding: 4px 10px;8008  background: transparent;8009  border: 1px solid var(--peach-border);8010  border-radius: 6px;8011  color: var(--peach-t2);8012  font-family: "IBM Plex Mono", monospace;8013  font-size: 0.5625rem;8014  letter-spacing: 0.06em;8015  text-transform: lowercase;8016  cursor: pointer;8017  transition: border-color 0.15s, color 0.15s;8018}80198020.peach-recovery-download-btn:hover {8021  border-color: var(--peach-accent);8022  color: var(--peach-t0);8023}80248025.peach-recovery-word-text {8026  font-family: "IBM Plex Mono", monospace;8027  font-size: 0.6875rem;8028  letter-spacing: 0.06em;8029  color: var(--peach-t0);8030  text-transform: lowercase;8031}80328033.peach-hint--warning {8034  color: var(--peach-accent);8035  font-style: italic;8036}8037.peach-hint--success {8038  color: var(--peach-t2);8039  font-family: "IBM Plex Mono", monospace;8040  font-size: 0.625rem;8041  letter-spacing: 0.06em;8042}80438044/* Confirmation step */8045.peach-recovery-confirm {8046  width: 100%;8047  flex: 1;8048  display: flex;8049  flex-direction: column;8050}8051.peach-recovery-confirm-label {8052  font-family: "IBM Plex Mono", monospace;8053  font-size: 0.5625rem;8054  letter-spacing: 0.04em;8055  color: var(--peach-t2);8056  text-align: center;8057  margin: 0 0 12px;8058}8059.peach-recovery-confirm-fields {8060  display: flex;8061  flex-direction: column;8062  gap: 14px;8063  margin-bottom: 10px;8064}8065.peach-recovery-confirm-field {8066  display: flex;8067  align-items: center;8068  gap: 8px;8069}8070.peach-recovery-confirm-num {8071  font-family: "IBM Plex Mono", monospace;8072  font-size: 0.5rem;8073  color: var(--peach-t2);8074  min-width: 44px;8075  letter-spacing: 0.04em;8076}8077.peach-recovery-confirm-input {8078  flex: 1;8079  background: transparent;8080  border: none;8081  border-bottom: 1px solid var(--peach-t3);8082  color: var(--peach-t0);8083  font-family: "IBM Plex Mono", monospace;8084  font-size: 0.6875rem;8085  letter-spacing: 0.06em;8086  padding: 4px 2px 3px;8087  outline: none;8088  text-transform: lowercase;8089  transition: border-color 120ms ease;8090}8091.peach-recovery-confirm-input:focus {8092  border-bottom-color: var(--peach-accent);8093}8094.peach-recovery-confirm-input:disabled {8095  opacity: 0.4;8096  cursor: not-allowed;8097}8098.peach-recovery-confirm-btn {8099  width: 100%;8100  margin-top: auto;8101}81028103/* ============================================================8104   Sync info sheet8105   ============================================================ */81068107.peach-sync-info-backdrop {8108  position: fixed;8109  inset: 0;8110  z-index: 200;8111  background: rgba(0, 0, 0, 0.55);8112  display: flex;8113  align-items: flex-end;8114  animation: peach-fade-in 200ms ease forwards;8115}81168117@keyframes peach-fade-in {8118  from { opacity: 0; }8119  to   { opacity: 1; }8120}81218122.peach-sync-info-sheet {8123  width: 100%;8124  background: var(--peach-bg-card, var(--peach-bg));8125  border-top-left-radius: 20px;8126  border-top-right-radius: 20px;8127  padding: 12px 24px 32px;8128  display: flex;8129  flex-direction: column;8130  gap: 20px;8131  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;8132}81338134@keyframes peach-sheet-up {8135  from { transform: translateY(100%); }8136  to   { transform: translateY(0); }8137}81388139.peach-sync-info-handle {8140  width: 36px;8141  height: 4px;8142  border-radius: 2px;8143  background: var(--peach-border);8144  margin: 0 auto 4px;8145  flex-shrink: 0;8146}81478148.peach-sync-info-title {8149  font-family: 'Cormorant Garamond', serif;8150  font-style: italic;8151  font-size: 26px;8152  font-weight: 600;8153  color: var(--peach-t0);8154  margin: 0;8155  line-height: 1.2;8156}81578158.peach-sync-info-body {8159  display: flex;8160  flex-direction: column;8161  gap: 14px;8162}81638164.peach-sync-info-point {8165  display: flex;8166  gap: 12px;8167  align-items: flex-start;8168  font-size: 14px;8169  color: var(--peach-t2);8170  line-height: 1.6;8171  margin: 0;8172}81738174.peach-sync-info-icon {8175  color: var(--peach-accent);8176  font-size: 16px;8177  flex-shrink: 0;8178  margin-top: 1px;8179}81808181.peach-sync-info-actions {8182  display: flex;8183  flex-direction: column;8184  gap: 12px;8185  margin-top: 4px;8186}81878188.peach-sync-info-pro-link {8189  background: none;8190  border: none;8191  font-size: 13px;8192  color: var(--peach-t3);8193  cursor: pointer;8194  padding: 0;8195  font-family: inherit;8196  text-align: center;8197  transition: color 150ms ease;8198}81998200.peach-sync-info-pro-link:hover {8201  color: var(--peach-accent);8202}82038204.peach-btn--full {8205  width: 100%;8206}82078208/* ── Sync screen ── */82098210.peach-sync-coming-soon {8211  display: flex;8212  align-items: flex-start;8213  gap: 10px;8214  padding: 12px 14px;8215  background: var(--peach-s1);8216  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8217  border-radius: 10px;8218}8219.peach-sync-coming-soon__icon {8220  flex-shrink: 0;8221  color: var(--peach-accent);8222  margin-top: 1px;8223  line-height: 0;8224}8225.peach-sync-coming-soon__title {8226  font-family: 'Cormorant Garamond', serif;8227  font-weight: 500;8228  font-size: 13px;8229  color: var(--peach-accent);8230  margin: 0 0 5px;8231  line-height: 1.3;8232}8233.peach-sync-coming-soon__body {8234  font-size: 12px;8235  color: var(--peach-t1);8236  line-height: 1.55;8237  margin: 0;8238}82398240.peach-sync-screen {8241  display: flex;8242  flex-direction: column;8243  height: 100%;8244}82458246.peach-sync-content {8247  flex: 1;8248  overflow-y: auto;8249  padding: 24px 20px 40px;8250  display: flex;8251  flex-direction: column;8252  gap: 24px;8253}82548255/* Intro (State A) */8256.peach-sync-headline {8257  font-family: 'Cormorant Garamond', serif;8258  font-style: italic;8259  font-size: 28px;8260  font-weight: 600;8261  color: var(--peach-t0);8262  margin: 0 0 10px;8263  line-height: 1.2;8264}82658266.peach-sync-intro-body {8267  font-size: 14px;8268  color: var(--peach-t1);8269  line-height: 1.6;8270  margin: 0;8271}82728273.peach-sync-pro-note {8274  display: flex;8275  flex-direction: column;8276  gap: 8px;8277  background: var(--peach-t3);8278  border-radius: 10px;8279  padding: 12px 14px;8280}82818282.peach-sync-pro-note-text {8283  font-size: 12px;8284  color: var(--peach-t2);8285  line-height: 1.5;8286  margin: 0;8287}82888289.peach-sync-pro-link {8290  background: none;8291  border: none;8292  font-size: 12px;8293  color: var(--peach-accent);8294  cursor: pointer;8295  padding: 0;8296  font-family: inherit;8297  text-align: left;8298}82998300/* Status (State C) */8301.peach-sync-status {8302  padding: 12px 0;8303  border-bottom: 1px solid var(--peach-border);8304}83058306.peach-sync-status-row {8307  display: flex;8308  align-items: center;8309  gap: 8px;8310}83118312.peach-sync-dot {8313  width: 7px;8314  height: 7px;8315  border-radius: 50%;8316  flex-shrink: 0;8317}83188319.peach-sync-dot--green { background: var(--peach-health-ok); }8320.peach-sync-dot--amber { background: var(--peach-accent); }83218322.peach-sync-status-text {8323  font-family: 'IBM Plex Mono', monospace;8324  font-size: 11px;8325  color: var(--peach-t2);8326}83278328/* Paired devices */8329.peach-sync-section {8330  display: flex;8331  flex-direction: column;8332  gap: 2px;8333}83348335.peach-sync-section-label {8336  font-family: 'IBM Plex Mono', monospace;8337  font-size: 10px;8338  letter-spacing: 0.1em;8339  color: var(--peach-t3);8340  margin: 0 0 10px;8341}83428343.peach-sync-device-row {8344  display: flex;8345  justify-content: space-between;8346  align-items: baseline;8347  padding: 10px 0;8348  border-bottom: 1px solid var(--peach-border);8349  gap: 12px;8350}83518352.peach-sync-device-name {8353  font-size: 14px;8354  color: var(--peach-t1);8355}83568357.peach-sync-device-meta {8358  font-family: 'IBM Plex Mono', monospace;8359  font-size: 11px;8360  color: var(--peach-t3);8361  white-space: nowrap;8362}83638364.peach-sync-hub-note {8365  padding: 14px 16px;8366  border: 1px solid var(--peach-border);8367  border-radius: 10px;8368  display: flex;8369  flex-direction: column;8370  gap: 6px;8371  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8372}83738374.peach-sync-hub-note-title {8375  font-size: 13px;8376  font-weight: 600;8377  color: var(--peach-t0);8378  margin: 0;8379}83808381.peach-sync-hub-note-body {8382  font-size: 12px;8383  color: var(--peach-t2);8384  line-height: 1.6;8385  margin: 0;8386}83878388/* Action buttons */8389.peach-sync-actions {8390  display: flex;8391  gap: 10px;8392  flex-wrap: wrap;8393}83948395/* Upgrade prompt (State B) */8396.peach-sync-upgrade {8397  display: flex;8398  flex-direction: column;8399  gap: 12px;8400  padding: 16px;8401  border: 1px solid var(--peach-border);8402  border-radius: 10px;8403}84048405.peach-sync-upgrade-text {8406  font-size: 13px;8407  color: var(--peach-t2);8408  line-height: 1.6;8409  margin: 0;8410}84118412/* Network note */8413.peach-sync-network-note {8414  font-size: 12px;8415  color: var(--peach-t3);8416  line-height: 1.6;8417  margin: 0;8418}84198420/* Advanced */8421.peach-sync-advanced {8422  margin-top: auto;8423  padding-top: 16px;8424  border-top: 1px solid var(--peach-border);8425}84268427.peach-sync-advanced-toggle {8428  display: flex;8429  align-items: center;8430  gap: 8px;8431  background: none;8432  border: none;8433  font-family: 'IBM Plex Mono', monospace;8434  font-size: 11px;8435  letter-spacing: 0.08em;8436  color: var(--peach-t3);8437  cursor: pointer;8438  padding: 0;8439  text-transform: uppercase;8440}84418442.peach-sync-advanced-chevron {8443  display: inline-block;8444  transition: transform 200ms ease;8445  font-size: 10px;8446}84478448.peach-sync-advanced-chevron.is-open {8449  transform: rotate(90deg);8450}84518452.peach-sync-advanced-content {8453  margin-top: 14px;8454}84558456.peach-sync-advanced-row {8457  display: flex;8458  justify-content: space-between;8459  align-items: center;8460  gap: 16px;8461}84628463.peach-sync-advanced-title {8464  font-size: 14px;8465  color: var(--peach-t1);8466  margin: 0 0 2px;8467}84688469.peach-sync-advanced-subtitle {8470  font-size: 12px;8471  color: var(--peach-t3);8472  margin: 0;8473  line-height: 1.5;8474}84758476/* ── Add Device — Android scan tabs ─────────────────────────────────────── */84778478.peach-pairing-tabs {8479  display: flex;8480  border: 1px solid var(--peach-border);8481  border-radius: 8px;8482  overflow: hidden;8483  margin-bottom: 4px;8484}84858486.peach-pairing-tab {8487  flex: 1;8488  padding: 10px 0;8489  background: none;8490  border: none;8491  font-family: 'IBM Plex Mono', monospace;8492  font-size: 11px;8493  letter-spacing: 0.06em;8494  color: var(--peach-t2);8495  cursor: pointer;8496  transition: background 150ms, color 150ms;8497}84988499.peach-pairing-tab.is-active {8500  background: var(--peach-accent);8501  color: #fff;8502  font-weight: 600;8503}85048505.peach-pairing-tab:not(.is-active):active {8506  background: var(--peach-border);8507}85088509/* Camera view */8510.peach-pairing-camera-container {8511  position: relative;8512  width: 100%;8513  aspect-ratio: 1;8514  border-radius: 12px;8515  overflow: hidden;8516  background: #000;8517  flex-shrink: 0;8518}85198520.peach-pairing-video {8521  width: 100%;8522  height: 100%;8523  object-fit: cover;8524}85258526.peach-pairing-scan-frame {8527  position: absolute;8528  top: 50%;8529  left: 50%;8530  transform: translate(-50%, -50%);8531  width: 60%;8532  aspect-ratio: 1;8533  border: 2px solid var(--peach-accent);8534  border-radius: 8px;8535  pointer-events: none;8536}85378538/* ── Notes Mode ── */85398540/* Overlay that crossfades over the vault */8541.peach-notes-overlay {8542  position: fixed;8543  inset: 0;8544  z-index: 90;8545  opacity: 0;8546  pointer-events: none;8547  animation: peach-mode-in 220ms ease-in forwards;8548}85498550.peach-notes-overlay.is-visible {8551  opacity: 1;8552  pointer-events: auto;8553}85548555@keyframes peach-mode-in {8556  from { opacity: 0; }8557  to   { opacity: 1; }8558}85598560/* Top-level notes surface */8561.peach-notes-mode {8562  position: absolute;8563  inset: 0;8564  background: var(--peach-bg);8565  display: flex;8566  flex-direction: column;8567}85688569/* Rune canvas positioned behind content */8570.peach-note-rune-canvas {8571  position: absolute;8572  inset: 0;8573  width: 100%;8574  height: 100%;8575  pointer-events: none;8576  z-index: 0;8577}85788579/* TOC wrapper */8580.peach-notes-toc-wrapper {8581  position: absolute;8582  inset: 0;8583  z-index: 1;8584  opacity: 1;8585  pointer-events: auto;8586  transition: opacity 200ms ease;8587}85888589.peach-notes-toc-wrapper.is-hidden {8590  opacity: 0;8591  pointer-events: none;8592}85938594/* Editor wrapper */8595.peach-notes-editor-wrapper {8596  position: absolute;8597  inset: 0;8598  z-index: 2;8599  opacity: 0;8600  pointer-events: none;8601  transition: opacity 200ms ease;8602}86038604.peach-notes-editor-wrapper.is-visible {8605  opacity: 1;8606  pointer-events: auto;8607}86088609/* TOC inner */8610.peach-notes-toc {8611  position: relative;8612  display: flex;8613  flex-direction: column;8614  height: 100%;8615  padding-top: env(safe-area-inset-top, 0px);8616  padding-bottom: env(safe-area-inset-bottom, 0px);8617}86188619/* Shared header */8620.peach-notes-header {8621  display: flex;8622  align-items: center;8623  padding: 12px 16px;8624  gap: 12px;8625  flex-shrink: 0;8626  min-height: 52px;8627  position: relative;8628  z-index: 2;8629}86308631.peach-notes-back {8632  font-size: 22px;8633  color: var(--peach-t2);8634  background: none;8635  border: none;8636  padding: 4px;8637  cursor: pointer;8638  line-height: 1;8639  flex-shrink: 0;8640  transition: color 150ms ease;8641  -webkit-tap-highlight-color: transparent;8642}86438644.peach-notes-back:active { color: var(--peach-t0); }86458646.peach-notes-header-title {8647  flex: 1;8648  font-family: 'Cormorant Garamond', serif;8649  font-style: italic;8650  font-size: 22px;8651  color: var(--peach-t0);8652  text-align: center;8653}86548655.peach-notes-header-title.is-breadcrumb {8656  font-family: 'IBM Plex Mono', monospace;8657  font-style: normal;8658  font-size: 11px;8659  color: var(--peach-t3);8660  letter-spacing: 0.08em;8661  text-transform: uppercase;8662  cursor: pointer;8663}86648665.peach-notes-header-actions {8666  display: flex;8667  gap: 8px;8668  flex-shrink: 0;8669}86708671.peach-notes-header-btn {8672  width: 36px;8673  height: 36px;8674  display: flex;8675  align-items: center;8676  justify-content: center;8677  background: none;8678  border: none;8679  color: var(--peach-t2);8680  cursor: pointer;8681  border-radius: 8px;8682  font-size: 16px;8683  transition: color 150ms ease, background 150ms ease;8684  -webkit-tap-highlight-color: transparent;8685}86868687.peach-notes-header-btn:active {8688  background: rgba(255,255,255,0.06);8689  color: var(--peach-t0);8690}86918692/* Inline search bar */8693.peach-notes-search-input {8694  flex: 1;8695  background: none;8696  border: none;8697  outline: none;8698  font-family: 'IBM Plex Mono', monospace;8699  font-size: 13px;8700  color: var(--peach-t0);8701  padding: 4px 0;8702  letter-spacing: 0.02em;8703}87048705.peach-notes-search-input::placeholder {8706  color: var(--peach-t3);8707}87088709/* TOC list */8710.peach-notes-list-container {8711  flex: 1;8712  overflow-y: auto;8713  overflow-x: hidden;8714  scrollbar-width: none;8715  -webkit-overflow-scrolling: touch;8716  overscroll-behavior: contain;8717  position: relative;8718  z-index: 1;8719}87208721.peach-notes-list-container::-webkit-scrollbar { display: none; }87228723/* Note row */8724.peach-note-row {8725  position: relative;8726  display: grid;8727  grid-template-columns: 44px 8px 1fr 8px auto;8728  align-items: center;8729  min-height: 72px;8730  padding: 16px 20px;8731  border-bottom: 0.5px solid var(--peach-border);8732  cursor: pointer;8733  overflow: hidden;8734  touch-action: pan-y;8735  user-select: none;8736  -webkit-user-select: none;8737  -webkit-tap-highlight-color: transparent;8738}87398740.peach-note-row:first-child {8741  border-top: 0.5px solid var(--peach-border);8742}87438744.peach-note-row:active {8745  background: rgba(255,255,255,0.02);8746}87478748.peach-note-numeral {8749  font-family: 'Cormorant Garamond', serif;8750  font-style: italic;8751  font-size: 15px;8752  color: var(--peach-accent);8753  text-align: right;8754  line-height: 1;8755  flex-shrink: 0;8756}87578758.peach-note-title-gap { /* grid spacer */ }87598760.peach-note-title {8761  font-family: 'Cormorant Garamond', serif;8762  font-style: italic;8763  font-size: 18px;8764  color: var(--peach-t0);8765  line-height: 1.3;8766  min-width: 0;8767  overflow-wrap: break-word;8768}87698770.peach-note-title-match {8771  color: var(--peach-accent);8772}87738774.peach-note-date {8775  font-family: 'IBM Plex Mono', monospace;8776  font-size: 11px;8777  color: var(--peach-t2);8778  white-space: nowrap;8779  text-align: right;8780  flex-shrink: 0;8781  grid-column: 5;8782}87838784/* Swipe underlays */8785.peach-note-row-underlay {8786  position: absolute;8787  inset: 0;8788  display: flex;8789  align-items: center;8790  padding: 0 24px;8791  font-family: 'IBM Plex Mono', monospace;8792  font-size: 11px;8793  letter-spacing: 0.1em;8794  pointer-events: none;8795  z-index: 0;8796}87978798.peach-note-row-underlay--delete {8799  background: #8B2020;8800  color: rgba(255,255,255,0.9);8801  justify-content: flex-end;8802}88038804.peach-note-row-underlay--archive {8805  background: var(--peach-accent);8806  color: #0C0A06;8807  justify-content: flex-start;8808}88098810/* Delete confirm strip */8811.peach-note-delete-confirm {8812  position: absolute;8813  inset: 0;8814  background: var(--peach-bg);8815  display: flex;8816  align-items: center;8817  gap: 12px;8818  padding: 0 20px;8819  font-family: 'IBM Plex Mono', monospace;8820  font-size: 11px;8821  color: var(--peach-t1);8822  letter-spacing: 0.04em;8823  animation: peach-delete-confirm-in 150ms ease both;8824  z-index: 10;8825}88268827@keyframes peach-delete-confirm-in {8828  from { opacity: 0; }8829  to   { opacity: 1; }8830}88318832.peach-note-delete-confirm-btn {8833  background: #8B2020;8834  color: rgba(255,255,255,0.9);8835  border: none;8836  border-radius: 6px;8837  padding: 4px 10px;8838  font-family: 'IBM Plex Mono', monospace;8839  font-size: 10px;8840  cursor: pointer;8841  letter-spacing: 0.06em;8842}88438844.peach-note-delete-cancel-btn {8845  background: none;8846  border: none;8847  color: var(--peach-t3);8848  font-family: 'IBM Plex Mono', monospace;8849  font-size: 10px;8850  cursor: pointer;8851  letter-spacing: 0.06em;8852  padding: 4px 6px;8853}88548855/* + New note button */8856.peach-notes-new-btn {8857  font-family: 'IBM Plex Mono', monospace;8858  font-size: 12px;8859  color: var(--peach-t3);8860  text-align: center;8861  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8862  background: none;8863  border: none;8864  width: 100%;8865  cursor: pointer;8866  letter-spacing: 0.04em;8867  transition: color 150ms ease;8868  -webkit-tap-highlight-color: transparent;8869}88708871.peach-notes-new-btn:active { color: var(--peach-accent); }88728873/* Empty state */8874.peach-notes-empty {8875  display: flex;8876  flex-direction: column;8877  align-items: center;8878  justify-content: center;8879  flex: 1;8880  padding: 48px 32px;8881  gap: 16px;8882}88838884.peach-notes-empty-text {8885  font-family: 'Cormorant Garamond', serif;8886  font-style: italic;8887  font-size: 20px;8888  color: var(--peach-t3);8889  text-align: center;8890  margin: 0;8891  line-height: 1.4;8892  white-space: pre-line;8893}88948895/* ── Editor surface ── */88968897.peach-note-editor-surface {8898  position: absolute;8899  inset: 0;8900  background: var(--peach-bg);8901  display: flex;8902  flex-direction: column;8903  padding-top: env(safe-area-inset-top, 0px);8904}89058906.peach-note-editor-scroll {8907  flex: 1;8908  overflow-y: auto;8909  overflow-x: hidden;8910  scrollbar-width: none;8911  -webkit-overflow-scrolling: touch;8912  padding: 0 24px 120px;8913  position: relative;8914  z-index: 1;8915}89168917.peach-note-editor-scroll::-webkit-scrollbar { display: none; }89188919/* Desktop toolbar (always visible above body) */8920.peach-note-toolbar-desktop-inline {8921  display: flex;8922  align-items: center;8923  gap: 2px;8924  padding: 6px 0 12px;8925  margin-bottom: 4px;8926  border-bottom: 0.5px solid var(--peach-border);8927}89288929/* Title field */8930.peach-note-title-field {8931  font-family: 'Cormorant Garamond', serif;8932  font-style: italic;8933  font-size: 32px;8934  font-weight: 600;8935  color: var(--peach-t0);8936  line-height: 1.2;8937  padding: 8px 0 0;8938  outline: none;8939  min-height: 44px;8940  word-break: break-word;8941  position: relative;8942  z-index: 1;8943}89448945.peach-note-title-field:empty::before {8946  content: attr(data-placeholder);8947  color: var(--peach-t3);8948  pointer-events: none;8949}89508951/* Hairline separator */8952.peach-note-hairline {8953  height: 0.5px;8954  background: var(--peach-border);8955  margin: 12px 0 20px;8956  position: relative;8957  z-index: 1;8958}89598960/* Body field */8961.peach-note-body-field {8962  font-family: 'DM Sans', sans-serif;8963  font-size: 16px;8964  color: var(--peach-t0);8965  line-height: 1.85;8966  padding: 0;8967  outline: none;8968  min-height: 240px;8969  word-break: break-word;8970  position: relative;8971  z-index: 1;8972}89738974.peach-note-body-field:empty::before {8975  content: attr(data-placeholder);8976  color: var(--peach-t3);8977  font-style: italic;8978  pointer-events: none;8979}89808981.peach-note-body-field h2 {8982  font-family: 'Cormorant Garamond', serif;8983  font-style: italic;8984  font-size: 22px;8985  font-weight: 600;8986  color: var(--peach-t0);8987  margin: 20px 0 8px;8988}89898990.peach-note-body-field blockquote {8991  border-left: 2px solid var(--peach-accent);8992  margin: 12px 0;8993  padding-left: 16px;8994  color: var(--peach-t1);8995  font-style: italic;8996}89978998.peach-note-body-field ul,8999.peach-note-body-field ol {9000  padding-left: 20px;9001  margin: 8px 0;9002}90039004.peach-note-body-field li {9005  margin: 4px 0;9006}90079008.peach-note-body-field hr {9009  border: none;9010  border-top: 0.5px solid var(--peach-border);9011  margin: 16px 0;9012}90139014/* Saved indicator */9015.peach-note-saved-indicator {9016  font-family: 'IBM Plex Mono', monospace;9017  font-size: 11px;9018  color: var(--peach-t3);9019  letter-spacing: 0.04em;9020  text-align: right;9021  padding: 6px 24px;9022  flex-shrink: 0;9023  transition: opacity 300ms ease;9024  pointer-events: none;9025  position: relative;9026  z-index: 1;9027}90289029/* Mobile keyboard toolbar */9030.peach-note-toolbar-mobile {9031  display: flex;9032  align-items: center;9033  padding: 8px 16px;9034  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));9035  background: var(--peach-bg);9036  border-top: 0.5px solid var(--peach-border);9037  gap: 4px;9038  flex-shrink: 0;9039  position: relative;9040  z-index: 10;9041}90429043.peach-note-toolbar-btn {9044  min-width: 36px;9045  height: 36px;9046  display: flex;9047  align-items: center;9048  justify-content: center;9049  background: none;9050  border: none;9051  border-radius: 8px;9052  cursor: pointer;9053  font-size: 14px;9054  color: var(--peach-t1);9055  font-family: 'DM Sans', sans-serif;9056  font-weight: 600;9057  transition: background 100ms ease, color 100ms ease;9058  -webkit-tap-highlight-color: transparent;9059}90609061.peach-note-toolbar-btn--italic { font-style: italic; }9062.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }9063.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }90649065.peach-note-toolbar-divider {9066  width: 0.5px;9067  height: 20px;9068  background: var(--peach-border);9069  margin: 0 4px;9070  flex-shrink: 0;9071}90729073.peach-note-toolbar-spacer { flex: 1; }90749075/* Desktop: larger headline in TOC */9076@media (min-width: 400px) {9077  .peach-notes-header-title:not(.is-breadcrumb) {9078    font-size: 32px;9079  }90809081  .peach-note-row {9082    min-height: 64px;9083    padding: 14px 16px;9084  }9085}90869087/* Flying title — shared element during expansion/collapse */90889089/* ─── Light theme overrides ───────────────────────────────────────────────9090   Tokens that cannot be expressed as variable substitutions — hardcoded9091   context-specific values that need separate light-mode rules. */90929093/* Settings section headers: use text-label (#79766F) per restoration brief —9094   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY9095   presence without fighting the light parchment background. */9096.light .peach-settings-sub-label,9097[data-theme="light"] .peach-settings-sub-label,9098.light .peach-settings-nav-label,9099[data-theme="light"] .peach-settings-nav-label {9100  color: #79766F;9101}91029103/* Secondary action buttons (ghost / subtle): filled with input-well surface9104   so they read as recessed against the parchment card background. */9105.light .peach-btn--ghost:not(.peach-icon-btn),9106[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {9107  background: #EEE7DD;9108  border-color: #DDD5CB;9109  color: #1A1208;9110}9111.light .peach-icon-btn,9112[data-theme="light"] .peach-icon-btn {9113  background: transparent;9114  border-color: transparent;9115}9116.light .peach-btn--subtle,9117[data-theme="light"] .peach-btn--subtle {9118  background: #EEE7DD;9119  border-color: #DDD5CB;9120}91219122/* Wide secondary action button on the lock screen — override the9123   hardcoded dark-mode rgba values with warm parchment equivalents. */9124.light .peach-lock-secondary,9125[data-theme="light"] .peach-lock-secondary {9126  background: #EEE7DD;9127  border-color: #DDD5CB;9128  color: #1A1208;9129}9130.light .peach-lock-secondary:hover,9131[data-theme="light"] .peach-lock-secondary:hover {9132  background: #F0E9DF;9133}91349135/* Entry row hover: bg-row lifts the row above the card surface. */9136.light .peach-entry-row:hover,9137[data-theme="light"] .peach-entry-row:hover {9138  background: #F2EBE1;9139}9140.light .peach-entry-row.is-active,9141[data-theme="light"] .peach-entry-row.is-active {9142  background: #F2EBE1;9143}9144.light .peach-entry-row.is-selected,9145[data-theme="light"] .peach-entry-row.is-selected {9146  background: #F5EDE2;9147}91489149/* ──────────────────────────────────────────────────────────────────────────9150   Chirp pairing flow — bird-stage animation (Phase 1)9151   See src/popup/components/ChirpPairingFlow.tsx and the brief §6.2.9152   Three-act animation gated on the [data-phase] attribute of9153   .peach-chirp-pair; child layers (birds, chirp arcs, flight wave, dot)9154   each react via either pose class or visibility flag.9155   Tokens: accent surfaces use var(--peach-accent); bird illustration9156   colours are baked into the SVG per the brand-peach exception in §3.1.9157   ────────────────────────────────────────────────────────────────────── */91589159.peach-chirp-pair {9160  position: absolute;9161  inset: 0;9162  z-index: 3;9163  display: flex;9164  flex-direction: column;9165  padding: 14px 12px 12px;9166  width: 100%;9167  box-sizing: border-box;9168  gap: 0;9169  background:9170    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9171    var(--peach-bg);9172  color: var(--peach-t0);9173  overflow-y: auto;9174  overflow-x: hidden;9175  scrollbar-width: none;9176  isolation: isolate;9177  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9178}9179@keyframes peach-chirp-overlay-in {9180  from { opacity: 0; transform: translateY(8px); }9181  to   { opacity: 1; transform: translateY(0); }9182}9183.peach-chirp-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }9184.peach-chirp-pair::before {9185  content: '';9186  position: absolute;9187  inset: 0;9188  border-radius: inherit;9189  pointer-events: none;9190  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9191  z-index: 0;9192}9193.peach-chirp-pair > * { position: relative; z-index: 1; }91949195/* Header --------------------------------------------------------------- */9196.peach-chirp-head {9197  display: flex; align-items: center; gap: 10px;9198}9199.peach-chirp-back {9200  width: 32px; height: 32px;9201  display: inline-flex; align-items: center; justify-content: center;9202  background: transparent;9203  border: none;9204  border-radius: 8px;9205  color: var(--peach-t1);9206  cursor: pointer;9207  transition: color 0.15s ease, box-shadow 0.15s ease;9208}9209.peach-chirp-back:hover {9210  color: var(--peach-accent);9211  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9212}9213.peach-chirp-title {9214  font-family: var(--font-display, Georgia, serif);9215  font-style: italic;9216  font-size: 24px;9217  font-weight: 500;9218  letter-spacing: 0.005em;9219  color: var(--peach-t0);9220  line-height: 1;9221}9222.peach-chirp-head-spacer { flex: 1; }92239224/* Chip row ------------------------------------------------------------- */9225.peach-chirp-chip-row {9226  display: flex;9227  align-items: center;9228  justify-content: flex-start;9229  margin-top: 12px;9230}9231.peach-chirp-chip {9232  display: inline-flex; align-items: center; gap: 8px;9233  padding: 5px 10px 5px 8px;9234  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9235  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9236  border-radius: 999px;9237  font-family: var(--peach-mono, ui-monospace, monospace);9238  font-size: 11px;9239  letter-spacing: 0.04em;9240  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9241}9242.peach-chirp-chip-dot {9243  width: 6px; height: 6px; border-radius: 50%;9244  background: var(--peach-accent);9245  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9246}9247.peach-chirp-chip[data-phase="paired"] {9248  background: color-mix(in srgb, #4f9eda 12%, transparent);9249  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9250  color: #76b6e8;9251}9252.peach-chirp-chip[data-phase="paired"] .peach-chirp-chip-dot {9253  background: #76b6e8;9254  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9255}9256.peach-chirp-chip[data-phase="timeout"],9257.peach-chirp-chip[data-phase="mic_denied"],9258.peach-chirp-chip[data-phase="version_mismatch"],9259.peach-chirp-chip[data-phase="handshake_failed"] {9260  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9261  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9262  color: var(--peach-warn, #d29257);9263}9264.peach-chirp-chip[data-phase="timeout"] .peach-chirp-chip-dot,9265.peach-chirp-chip[data-phase="mic_denied"] .peach-chirp-chip-dot,9266.peach-chirp-chip[data-phase="version_mismatch"] .peach-chirp-chip-dot,9267.peach-chirp-chip[data-phase="handshake_failed"] .peach-chirp-chip-dot {9268  background: var(--peach-warn, #d29257);9269  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9270}92719272/* Bird stage ----------------------------------------------------------- */9273.peach-chirp-stage {9274  position: relative;9275  margin: 14px 0 8px;9276  height: 180px;9277  border-radius: 12px;9278  background:9279    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9280    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),9281    color-mix(in srgb, var(--peach-bg) 92%, #000);9282  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);9283  overflow: hidden;9284  isolation: isolate;9285}9286.peach-chirp-stage::after {9287  content: '';9288  position: absolute;9289  left: 12%; right: 12%;9290  bottom: 36px;9291  height: 1px;9292  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9293}92949295.peach-chirp-bird-slot {9296  position: absolute;9297  bottom: 8px;9298  width: 100px;9299  height: 110px;9300  display: flex;9301  align-items: flex-end;9302  justify-content: center;9303}9304.peach-chirp-bird-slot-desktop { left: 28px; }9305.peach-chirp-bird-slot-mobile { right: 28px; }93069307/* Mobile bird hops in from the right when handshake begins */9308.peach-chirp-bird-slot-mobile {9309  opacity: 1;9310  transform: translateX(-6px);9311  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9312}9313.peach-chirp-stage.act-listening .peach-chirp-bird-slot-mobile,9314.peach-chirp-stage.act-chirping .peach-chirp-bird-slot-mobile,9315.peach-chirp-stage.act-idle .peach-chirp-bird-slot-mobile {9316  opacity: 0;9317  transform: translateX(60px) rotate(8deg);9318}9319.peach-chirp-stage.act-handshake .peach-chirp-bird-slot-desktop,9320.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop {9321  transform: translateX(6px);9322  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9323}93249325/* Paired: both birds bob together */9326.peach-chirp-stage.act-paired .peach-chirp-bird-slot {9327  animation: peach-chirp-happy-bob 1.2s ease-in-out infinite;9328}9329.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { animation-delay: 0.2s; }9330.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop { --bb-x: 6px; }9331.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { --bb-x: -6px; }9332@keyframes peach-chirp-happy-bob {9333  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9334  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9335}93369337/* Bird internal -------------------------------------------------------- */9338.peach-chirp-bird {9339  width: 108px;9340  height: 108px;9341  transform-origin: 50% 95%;9342}9343.peach-chirp-bird svg { width: 100%; height: 100%; overflow: visible; }93449345.peach-chirp-bird-body {9346  transform-origin: 50% 80%;9347  animation: peach-chirp-bird-bob 2.4s ease-in-out infinite;9348}9349@keyframes peach-chirp-bird-bob {9350  0%, 100% { transform: translateY(0) scale(1, 1); }9351  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9352}93539354.peach-chirp-bird-eye-group {9355  animation: peach-chirp-blink 5.2s steps(1, end) infinite;9356  transform-origin: center;9357  transform-box: fill-box;9358}9359@keyframes peach-chirp-blink {9360  0%, 92%, 96%, 100% { transform: scaleY(1); }9361  94%                { transform: scaleY(0.05); }9362}93639364/* Pose: chirping — beak opens, head bobs, aura blooms */9365.peach-chirp-bird-pose-chirping .peach-chirp-bird-body {9366  animation:9367    peach-chirp-bird-bob 2.4s ease-in-out infinite,9368    peach-chirp-squeeze 1.7s ease-in-out infinite;9369}9370@keyframes peach-chirp-squeeze {9371  0%, 70%, 100% { transform-origin: 50% 85%; }9372  78%           { transform: scale(1.04, 0.96) translateY(1px); }9373  86%           { transform: scale(0.98, 1.02); }9374}9375.peach-chirp-bird-pose-chirping .peach-chirp-bird-head-group {9376  animation: peach-chirp-head-bob 1.7s ease-in-out infinite;9377}9378@keyframes peach-chirp-head-bob {9379  0%, 70%, 100% { transform: translateY(0) rotate(0); }9380  78%           { transform: translateY(-3px) rotate(-4deg); }9381  86%           { transform: translateY(-1px) rotate(-2deg); }9382}9383.peach-chirp-bird-pose-chirping .peach-chirp-bird-beak {9384  animation: peach-chirp-beak-open 1.7s ease-in-out infinite;9385}9386@keyframes peach-chirp-beak-open {9387  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9388  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9389  86%           { transform: rotate(-6deg); }9390}9391.peach-chirp-bird-pose-chirping .peach-chirp-bird-aura {9392  animation: peach-chirp-aura 1.7s ease-in-out infinite;9393}9394@keyframes peach-chirp-aura {9395  0%, 100% { opacity: 0; }9396  50%      { opacity: 0.8; }9397}9398.peach-chirp-bird-pose-chirping .peach-chirp-bird-tail {9399  animation: peach-chirp-tail-twitch 1.7s ease-in-out infinite;9400  transform-origin: 100% 50%;9401}9402@keyframes peach-chirp-tail-twitch {9403  0%, 75%, 100% { transform: rotate(0); }9404  82%           { transform: rotate(-3deg) translateX(-1px); }9405}94069407/* Pose: attentive — head tilts toward partner */9408.peach-chirp-bird-pose-attentive .peach-chirp-bird-head-group {9409  animation: peach-chirp-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9410}9411@keyframes peach-chirp-head-tilt {9412  0%   { transform: rotate(0) translateY(0); }9413  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9414  100% { transform: rotate(-6deg); }9415}9416.peach-chirp-bird-pose-attentive .peach-chirp-bird-tail {9417  animation: peach-chirp-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9418  transform-origin: 100% 50%;9419}9420@keyframes peach-chirp-tail-cock {9421  0%   { transform: rotate(0); }9422  100% { transform: rotate(-4deg); }9423}94249425/* Pose: happy — wing flutter, tuft perk, tail wag */9426.peach-chirp-bird-pose-happy .peach-chirp-bird-wing {9427  transform-origin: 80% 60%;9428  animation: peach-chirp-wing-flutter 0.32s ease-in-out 5;9429}9430@keyframes peach-chirp-wing-flutter {9431  0%, 100% { transform: rotate(0) translateY(0); }9432  50%      { transform: rotate(-16deg) translateY(-2px); }9433}9434.peach-chirp-bird-pose-happy .peach-chirp-bird-tuft {9435  transform-origin: 0% 100%;9436  animation: peach-chirp-tuft-perk 0.4s ease-in-out 3;9437}9438@keyframes peach-chirp-tuft-perk {9439  0%, 100% { transform: rotate(0); }9440  50%      { transform: rotate(-15deg) translateY(-1px); }9441}9442.peach-chirp-bird-pose-happy .peach-chirp-bird-tail {9443  transform-origin: 100% 50%;9444  animation: peach-chirp-tail-wag 0.5s ease-in-out 4;9445}9446@keyframes peach-chirp-tail-wag {9447  0%, 100% { transform: rotate(0); }9448  25%      { transform: rotate(6deg); }9449  75%      { transform: rotate(-6deg); }9450}9451.peach-chirp-bird-pose-happy .peach-chirp-bird-head-group {9452  animation: peach-chirp-head-perk 0.5s ease-out;9453}9454@keyframes peach-chirp-head-perk {9455  0%   { transform: translateY(0); }9456  40%  { transform: translateY(-3px) rotate(2deg); }9457  100% { transform: translateY(0); }9458}94599460/* Pose: sad — body droops forward */9461.peach-chirp-bird-pose-sad .peach-chirp-bird-body {9462  transform: translateY(5px) rotate(-2deg);9463  animation: none;9464}9465.peach-chirp-bird-pose-sad .peach-chirp-bird-head-group {9466  transform: translateY(4px) rotate(8deg);9467}9468.peach-chirp-bird-pose-sad .peach-chirp-bird-tuft { transform: rotate(15deg) translateY(2px); }9469.peach-chirp-bird-pose-sad .peach-chirp-bird-tail { transform: rotate(8deg) translateY(2px); }94709471.peach-chirp-bird-pose-hidden { opacity: 0; }94729473/* Chirp arcs ----------------------------------------------------------- */9474.peach-chirp-arcs {9475  position: absolute;9476  top: 18px;9477  width: 96px;9478  height: 70px;9479  pointer-events: none;9480}9481.peach-chirp-arcs-right { right: -60px; }9482.peach-chirp-arcs-left  { left: -60px; transform: scaleX(-1); }9483.peach-chirp-arc {9484  position: absolute;9485  top: 50%;9486  left: 0;9487  width: 40px;9488  height: 40px;9489  margin-top: -20px;9490  border: 1.2px solid #f4d5a8;9491  border-color: transparent #f4d5a8 transparent transparent;9492  border-radius: 50%;9493  opacity: 0;9494  animation: peach-chirp-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9495}9496@keyframes peach-chirp-arc-expand {9497  0%   { transform: scale(0.4); opacity: 0; }9498  20%  { opacity: 0.9; }9499  100% { transform: scale(1.6); opacity: 0; }9500}95019502/* Flight wave ---------------------------------------------------------- */9503.peach-chirp-flight-track {9504  position: absolute;9505  inset: 32px 36px 38px 36px;9506  pointer-events: none;9507}9508.peach-chirp-flight-wave {9509  position: absolute;9510  top: 8px;9511  left: 76px;9512  right: 76px;9513  height: 60px;9514  width: auto;9515  opacity: 0;9516  transition: opacity 0.15s ease;9517  stroke: #f4d5a8;9518  fill: none;9519}9520.peach-chirp-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9521.peach-chirp-flight-wave.is-visible { opacity: 1; }9522.peach-chirp-flight-path,9523.peach-chirp-flight-path-2 {9524  stroke-dasharray: 240;9525  stroke-dashoffset: 240;9526  stroke-linecap: round;9527  fill: none;9528}9529.peach-chirp-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9530.peach-chirp-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9531.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path {9532  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9533}9534.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path-2 {9535  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9536}9537@keyframes peach-chirp-fly {9538  0%   { stroke-dashoffset: 240; opacity: 0; }9539  20%  { opacity: 1; }9540  100% { stroke-dashoffset: -120; opacity: 0; }9541}95429543/* Connection dot ------------------------------------------------------- */9544.peach-chirp-dot {9545  position: absolute;9546  top: 50%; left: 50%;9547  transform: translate(-50%, -50%);9548  width: 40px; height: 40px;9549  opacity: 0;9550  pointer-events: none;9551  transition: opacity 0.3s ease;9552  color: var(--peach-accent);9553}9554.peach-chirp-dot.is-visible { opacity: 1; }9555.peach-chirp-dot-glow {9556  position: absolute; top: 50%; left: 50%;9557  transform: translate(-50%, -50%);9558  width: 38px; height: 38px;9559  border-radius: 50%;9560  filter: blur(10px);9561  opacity: 0.55;9562  background: var(--peach-accent);9563  animation: peach-chirp-dot-bloom 1.4s ease-out;9564}9565.peach-chirp-dot-core {9566  position: absolute; top: 50%; left: 50%;9567  transform: translate(-50%, -50%);9568  width: 8px; height: 8px;9569  border-radius: 50%;9570  background: var(--peach-accent);9571  box-shadow: 0 0 12px currentColor;9572  animation: peach-chirp-dot-core 1.4s ease-out;9573}9574.peach-chirp-dot-ring {9575  position: absolute; top: 50%; left: 50%;9576  width: 60px; height: 60px;9577  transform: translate(-50%, -50%);9578  animation: peach-chirp-dot-ring 1.4s linear;9579  stroke: var(--peach-accent);9580}9581@keyframes peach-chirp-dot-bloom {9582  0%   { width: 4px; height: 4px; opacity: 0; }9583  35%  { width: 60px; height: 60px; opacity: 0.7; }9584  100% { width: 38px; height: 38px; opacity: 0.55; }9585}9586@keyframes peach-chirp-dot-core {9587  0%   { width: 0; height: 0; }9588  35%  { width: 12px; height: 12px; }9589  100% { width: 8px; height: 8px; }9590}9591@keyframes peach-chirp-dot-ring {9592  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9593  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9594  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9595}95969597/* Motes — drift upward across the stage */9598.peach-chirp-motes {9599  position: absolute;9600  inset: 0;9601  pointer-events: none;9602}9603.peach-chirp-mote {9604  position: absolute;9605  width: 2px; height: 2px;9606  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9607  border-radius: 50%;9608  bottom: 32px;9609  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9610  opacity: 0;9611  animation: peach-chirp-mote-drift 6s linear infinite;9612  animation-delay: calc(var(--mote-i, 0) * 0.7s);9613}9614@keyframes peach-chirp-mote-drift {9615  0%   { transform: translateY(0); opacity: 0; }9616  10%  { opacity: 0.6; }9617  90%  { opacity: 0.1; }9618  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9619}96209621/* Status copy ---------------------------------------------------------- */9622.peach-chirp-copy-host {9623  margin: 4px 4px 10px;9624  text-align: center;9625  min-height: 50px;9626}9627.peach-chirp-copy {9628  animation: peach-chirp-copy-in 0.35s ease both;9629}9630@keyframes peach-chirp-copy-in {9631  from { opacity: 0; transform: translateY(4px); }9632  to   { opacity: 1; transform: translateY(0); }9633}9634.peach-chirp-headline {9635  font-family: var(--font-display, Georgia, serif);9636  font-style: italic;9637  font-size: 20px;9638  font-weight: 500;9639  line-height: 1.2;9640  letter-spacing: 0.005em;9641  color: var(--peach-t0);9642  margin-bottom: 6px;9643}9644.peach-chirp-copy-listening .peach-chirp-headline,9645.peach-chirp-copy-chirping .peach-chirp-headline,9646.peach-chirp-copy-idle .peach-chirp-headline {9647  font-family: inherit;9648  font-style: normal;9649  font-weight: 500;9650  font-size: 15px;9651  color: var(--peach-t0);9652  letter-spacing: 0;9653}9654.peach-chirp-copy-paired .peach-chirp-headline {9655  color: var(--peach-t0);9656  font-weight: 600;9657}9658.peach-chirp-sub {9659  font-size: 12.5px;9660  line-height: 1.45;9661  color: var(--peach-t1);9662  max-width: 280px;9663  margin: 0 auto;9664  text-wrap: pretty;9665}96669667/* Status action -------------------------------------------------------- */9668.peach-chirp-action {9669  margin: 2px 4px 10px;9670  margin-top: auto;9671  display: flex;9672  flex-direction: column;9673  gap: 8px;9674}9675.peach-chirp-action-waiting {9676  display: flex;9677  align-items: center;9678  justify-content: space-between;9679  gap: 12px;9680}9681.peach-chirp-cancel {9682  min-width: 96px;9683}9684.peach-chirp-listening {9685  display: inline-flex; align-items: center; gap: 4px;9686  font-family: var(--peach-mono, ui-monospace, monospace);9687  font-size: 9.5px;9688  text-transform: uppercase;9689  letter-spacing: 0.12em;9690  color: var(--peach-t1);9691  padding: 8px 10px;9692}9693.peach-chirp-listen-dot {9694  width: 4px; height: 4px;9695  border-radius: 50%;9696  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9697  animation: peach-chirp-listen-pulse 1.2s ease-in-out infinite;9698}9699.peach-chirp-listen-dot:nth-child(2) { animation-delay: 0.2s; }9700.peach-chirp-listen-dot:nth-child(3) { animation-delay: 0.4s; }9701.peach-chirp-listen-label { margin-left: 6px; }9702@keyframes peach-chirp-listen-pulse {9703  0%, 100% { opacity: 0.25; transform: scale(0.9); }9704  50%      { opacity: 1;     transform: scale(1.15); }9705}97069707.peach-chirp-action-handshake {9708  display: flex;9709  flex-direction: column;9710  align-items: center;9711  gap: 8px;9712  padding: 8px 4px;9713}9714.peach-chirp-meter {9715  width: 100%;9716  max-width: 280px;9717  height: 2px;9718  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9719  border-radius: 2px;9720  position: relative;9721  overflow: hidden;9722}9723.peach-chirp-meter-bar {9724  position: absolute;9725  top: 0; bottom: 0;9726  width: 30%;9727  left: -30%;9728  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9729  animation: peach-chirp-meter-sweep 1.4s ease-in-out infinite;9730}9731@keyframes peach-chirp-meter-sweep {9732  0%   { left: -30%; }9733  100% { left: 100%; }9734}9735.peach-chirp-meter-label {9736  font-family: var(--peach-mono, ui-monospace, monospace);9737  font-size: 9.5px;9738  text-transform: uppercase;9739  letter-spacing: 0.14em;9740  color: var(--peach-t1);9741}97429743.peach-chirp-action-paired {9744  display: flex;9745  align-items: center;9746  gap: 10px;9747}9748.peach-chirp-device-confirm {9749  flex: 1;9750  display: inline-flex;9751  align-items: center;9752  gap: 8px;9753  padding: 9px 10px 9px 12px;9754  border-radius: 10px;9755  background: color-mix(in srgb, #76b6e8 12%, transparent);9756  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9757  font-size: 12.5px;9758  color: var(--peach-t0);9759  min-width: 0;9760}9761.peach-chirp-device-confirm-glyph {9762  display: inline-flex;9763  color: #76b6e8;9764}9765.peach-chirp-device-confirm-name {9766  flex: 1;9767  overflow: hidden;9768  text-overflow: ellipsis;9769  white-space: nowrap;9770}9771.peach-chirp-device-confirm-trust {9772  font-family: var(--peach-mono, ui-monospace, monospace);9773  font-size: 9.5px;9774  text-transform: uppercase;9775  letter-spacing: 0.1em;9776  color: #76b6e8;9777  padding: 2px 6px;9778  border-radius: 4px;9779  background: color-mix(in srgb, #76b6e8 14%, transparent);9780}9781.peach-chirp-done {9782  min-width: 80px;9783}9784.peach-chirp-retry {9785  align-self: center;9786  display: block;9787  margin: 6px auto 0;9788  min-width: 120px;9789}9790.peach-chirp-mic-help {9791  font-size: 12px;9792  color: var(--peach-t1);9793  text-align: center;9794  max-width: 320px;9795  margin: 0 auto;9796}97979798/* Rest state — bird stage at idle pose, primary CTA + paired list */9799.peach-chirp-pair[data-phase="idle"] .peach-chirp-stage {9800  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9801  height: 160px;9802}9803.peach-chirp-pair-start {9804  width: 100%;9805  display: inline-flex;9806  align-items: center;9807  justify-content: center;9808  gap: 8px;9809  padding: 11px 14px;9810  border-radius: 10px;9811  background: var(--peach-accent);9812  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9813  color: #1a0905;9814  font-family: inherit;9815  font-size: 13px;9816  font-weight: 600;9817  letter-spacing: 0.01em;9818  cursor: pointer;9819  transition: filter 0.15s ease, transform 0.1s ease;9820}9821.peach-chirp-pair-start:hover { filter: brightness(1.08); }9822.peach-chirp-pair-start:active { transform: translateY(1px); }98239824.peach-chirp-paired-section {9825  margin-top: 14px;9826  display: flex;9827  flex-direction: column;9828  gap: 8px;9829}9830.peach-chirp-paired-heading {9831  margin: 0;9832  font-family: var(--peach-mono, ui-monospace, monospace);9833  font-size: 10px;9834  font-weight: 500;9835  letter-spacing: 0.14em;9836  text-transform: uppercase;9837  color: var(--peach-t1);9838}98399840/* Footer --------------------------------------------------------------- */9841.peach-chirp-foot {9842  margin: 10px -4px -2px;9843  margin-top: auto;9844}9845.peach-chirp-foot-divider {9846  height: 1px;9847  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9848  margin-bottom: 10px;9849}9850.peach-chirp-foot-text {9851  font-size: 11px;9852  line-height: 1.5;9853  color: var(--peach-t1);9854  text-align: center;9855  padding: 0 4px;9856  text-wrap: pretty;9857}98589859/* Screen-reader-only live region. Kept off the visual flow but read by9860   assistive tech as the pairing phase advances. */9861.peach-sr-only {9862  position: absolute;9863  width: 1px; height: 1px;9864  padding: 0; margin: -1px;9865  overflow: hidden;9866  clip: rect(0, 0, 0, 0);9867  white-space: nowrap;9868  border: 0;9869}98709871/* Reduced motion — stage simplifies to opacity transitions only */9872@media (prefers-reduced-motion: reduce) {9873  .peach-chirp-bird-body,9874  .peach-chirp-bird-head-group,9875  .peach-chirp-bird-beak,9876  .peach-chirp-bird-wing,9877  .peach-chirp-bird-tuft,9878  .peach-chirp-bird-tail,9879  .peach-chirp-bird-eye-group,9880  .peach-chirp-bird-aura,9881  .peach-chirp-arc,9882  .peach-chirp-flight-path,9883  .peach-chirp-flight-path-2,9884  .peach-chirp-dot-glow,9885  .peach-chirp-dot-core,9886  .peach-chirp-dot-ring,9887  .peach-chirp-mote,9888  .peach-chirp-meter-bar,9889  .peach-chirp-listen-dot,9890  .peach-chirp-bird-slot,9891  .peach-chirp-bird-slot-mobile {9892    animation: none !important;9893    transition: opacity 0.2s linear !important;9894  }9895}98969897/* ─────────────────────────────────────────────────────────────────9898   Settings → Sync surface (v3 ChirpSync). Wraps the same bird9899   animation used by the pairing flow with a paired-devices list and9900   the "Pair a device" CTA.9901   ───────────────────────────────────────────────────────────────── */9902.peach-chirp-settings {9903  position: absolute;9904  inset: 0;9905  z-index: 3;9906  display: flex;9907  flex-direction: column;9908  gap: 18px;9909  padding: 14px 12px 12px;9910  width: 100%;9911  box-sizing: border-box;9912  overflow-y: auto;9913  overflow-x: hidden;9914  /* Same warm Chirp surface as the pairing screen — unifies the two views. */9915  background:9916    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9917    var(--peach-bg);9918  color: var(--peach-t0);9919  isolation: isolate;9920  /* Hide native scrollbar — content fits 99% of the time and a chunky9921     gutter ruins the surface. */9922  scrollbar-width: none;9923  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9924}9925.peach-chirp-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9926.peach-chirp-settings::before {9927  content: '';9928  position: absolute;9929  inset: 0;9930  pointer-events: none;9931  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9932  z-index: 0;9933}9934.peach-chirp-settings > * { position: relative; z-index: 1; }99359936.peach-chirp-settings--pairing {9937  padding: 0;9938  align-items: stretch;9939  justify-content: stretch;9940  background: none;9941  isolation: auto;9942}9943.peach-chirp-settings--pairing::before { display: none; }99449945.peach-chirp-settings-header {9946  display: flex;9947  align-items: center;9948  gap: 10px;9949}9950.peach-chirp-settings-title {9951  margin: 0;9952  font-family: var(--font-display, Georgia, serif);9953  font-style: italic;9954  font-size: 24px;9955  font-weight: 500;9956  line-height: 1;9957  color: var(--peach-t0);9958  letter-spacing: 0.005em;9959}9960.peach-chirp-settings-section {9961  margin: 6px 0 -4px;9962  font-size: 11px;9963  font-weight: 600;9964  letter-spacing: 0.08em;9965  text-transform: uppercase;9966  color: var(--peach-text-muted);9967}9968.peach-chirp-settings-error {9969  font-size: 12px;9970  padding: 8px 10px;9971  border-radius: 8px;9972  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);9973  color: var(--peach-text);9974}9975.peach-chirp-settings-footer {9976  margin-top: auto;9977  padding-top: 18px;9978  font-size: 11.5px;9979  line-height: 1.5;9980  color: var(--peach-text-muted);9981  text-align: center;9982}99839984/* Hero card shown when no devices are paired yet. */9985.peach-chirp-hero {9986  display: flex;9987  flex-direction: column;9988  align-items: center;9989  gap: 12px;9990  padding: 20px 12px 8px;9991  text-align: center;9992}9993.peach-chirp-hero-svg {9994  display: block;9995  max-width: 100%;9996  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));9997}9998.peach-chirp-hero-headline {9999  margin: 0;10000  font-family: var(--font-display, Georgia, serif);10001  font-style: italic;10002  font-size: 20px;10003  font-weight: 500;10004  line-height: 1.2;10005  letter-spacing: 0.005em;10006  color: var(--peach-t0);10007}10008.peach-chirp-hero-sub {10009  margin: 0;10010  font-size: 13px;10011  line-height: 1.5;10012  color: var(--peach-t1);10013  max-width: 320px;10014  text-wrap: pretty;10015}1001610017.peach-chirp-pair-cta {10018  display: flex;10019  justify-content: center;10020  padding: 4px 0 6px;10021}10022.peach-chirp-pair-button {10023  display: inline-flex;10024  align-items: center;10025  gap: 8px;10026  min-width: 220px;10027  justify-content: center;10028}10029.peach-chirp-pair-button-icon {10030  flex: 0 0 auto;10031}1003210033/* Paired devices list. Roomy rows that look at home next to the rest10034   of Settings; stale rows get a soft warm-warning border tint. */10035.peach-chirp-device-list {10036  list-style: none;10037  margin: 0;10038  padding: 0;10039  display: flex;10040  flex-direction: column;10041  gap: 8px;10042}10043.peach-chirp-device-row {10044  display: flex;10045  align-items: center;10046  gap: 12px;10047  padding: 12px;10048  border-radius: 10px;10049  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10050  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);10051}10052.peach-chirp-device-row[data-stale="true"] {10053  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);10054}10055.peach-chirp-device-icon {10056  width: 32px;10057  height: 32px;10058  display: flex;10059  align-items: center;10060  justify-content: center;10061  border-radius: 8px;10062  color: var(--peach-text);10063  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);10064}10065.peach-chirp-device-info {10066  flex: 1;10067  display: flex;10068  flex-direction: column;10069  gap: 2px;10070  min-width: 0;10071}10072.peach-chirp-device-name {10073  font-size: 14px;10074  font-weight: 600;10075  color: var(--peach-text);10076  overflow: hidden;10077  text-overflow: ellipsis;10078  white-space: nowrap;10079}10080.peach-chirp-device-meta {10081  font-size: 11.5px;10082  color: var(--peach-text-muted);10083  display: flex;10084  flex-wrap: wrap;10085  align-items: center;10086  gap: 8px;10087}10088.peach-chirp-device-badge {10089  font-size: 10.5px;10090  font-weight: 500;10091  letter-spacing: 0.02em;10092  padding: 2px 6px;10093  border-radius: 999px;10094  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);10095  color: var(--peach-text);10096}10097.peach-chirp-device-stale {10098  font-size: 10.5px;10099  font-weight: 500;10100  color: var(--peach-warn, #d29257);10101}10102.peach-chirp-device-remove {10103  flex: 0 0 auto;10104  color: var(--peach-text-muted);10105}10106.peach-chirp-device-remove:hover {10107  color: var(--peach-danger, #c25b4a);10108}10109.peach-chirp-unpair-confirm {10110  display: flex;10111  gap: 6px;10112  align-items: center;10113}1011410115/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */10116.peach-chirp-pro-card {10117  position: relative;10118  margin: 18px 12px;10119  padding: 18px 20px 22px;10120  border-radius: 22px;10121  background:10122    radial-gradient(140% 90% at 50% 0%,10123      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,10124      transparent 60%),10125    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10126  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);10127  box-shadow:10128    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,10129    0 18px 40px -24px rgba(0, 0, 0, 0.45);10130  display: flex;10131  flex-direction: column;10132  align-items: center;10133  gap: 10px;10134  text-align: center;10135  overflow: hidden;10136}10137.peach-chirp-pro-stage {10138  position: relative;10139  width: 220px;10140  height: 140px;10141  display: flex;10142  align-items: flex-end;10143  justify-content: center;10144  margin-bottom: 2px;10145}10146.peach-chirp-pro-bird-slot {10147  width: 140px;10148  height: 132px;10149  display: flex;10150  align-items: flex-end;10151  justify-content: center;10152  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));10153}10154.peach-chirp-pro-bird-slot .peach-chirp-bird {10155  width: 100%;10156  height: 100%;10157}10158.peach-chirp-pro-bird-slot .peach-chirp-bird svg {10159  width: 100%;10160  height: 100%;10161  overflow: visible;10162}10163.peach-chirp-pro-chirp {10164  position: absolute;10165  top: 14px;10166  right: 8px;10167  width: 96px;10168  height: 80px;10169  color: var(--peach-accent);10170  animation: peach-chirp-pulse 2.6s ease-in-out infinite;10171  transform-origin: 0% 50%;10172  pointer-events: none;10173}10174@keyframes peach-chirp-pulse {10175  0%, 100% { opacity: 0.35; transform: translateX(0) scale(0.92); }10176  45%      { opacity: 1;    transform: translateX(2px) scale(1); }10177  70%      { opacity: 0.6;  transform: translateX(4px) scale(1.04); }10178}10179@media (prefers-reduced-motion: reduce) {10180  .peach-chirp-pro-chirp { animation: none; opacity: 0.7; }10181}10182.peach-chirp-pro-headline {10183  margin: 4px 0 0;10184  font-family: var(--font-display, "Cormorant Garamond", serif);10185  font-style: italic;10186  font-size: 19px;10187  font-weight: 500;10188  letter-spacing: 0.01em;10189  color: var(--peach-t0);10190  max-width: 280px;10191  line-height: 1.25;10192}10193.peach-chirp-pro-body {10194  margin: 0;10195  font-size: 13px;10196  line-height: 1.55;10197  color: var(--peach-t1);10198  max-width: 300px;10199}10200.peach-chirp-pro-cta {10201  margin-top: 4px;10202}10203.peach-chirp-pro-foot {10204  margin: 2px 0 0;10205  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10206  font-size: 0.625rem;10207  letter-spacing: 0.08em;10208  text-transform: uppercase;10209  color: var(--peach-t2);10210  opacity: 0.75;10211}1021210213/* Shell border and shadow in light mode: match dark mode's near-invisible10214   border weight so the popup frame looks the same in both themes. */10215.light .peach-shell,10216.light .peach-screen {10217  border-color: rgba(26, 18, 8, 0.07);10218  box-shadow:10219    0 2px 8px rgba(80, 56, 32, 0.08),10220    0 14px 48px rgba(80, 56, 32, 0.10),10221    0 0 0 1px rgba(26, 18, 8, 0.04);10222}