popup.css

1html,2body,3#app,4.popup-root {5  width: 320px;6  min-height: 520px;7  height: 520px;8  margin: 0;9}1011body {12  overflow: hidden;13  background: var(--bg);14  color: var(--t0);15  font-family: var(--font-ui);16  font-weight: 300;17  position: relative;18}1920* {21  box-sizing: border-box;22}2324button,25input,26textarea,27select {28  font: inherit;29}3031button {32  border: 0;33}3435.popup-root {36  position: relative;37  overflow: hidden;38}3940.peach-theme {41  color: var(--peach-t0);42  font-family: var(--font-ui);43  font-weight: 300;44  box-sizing: border-box;45  text-align: left;46}47.peach-theme, .peach-theme * { box-sizing: inherit; }4849.peach-brand-mark {50  width: 14px;51  height: 14px;52  flex-shrink: 0;53}5455.peach-status-pip.is-hidden {56  display: none;57}5859.peach-status-pip.unlocked {60  background: var(--peach-health-ok);61  box-shadow: 0 0 6px rgba(100, 210, 100, 0.6);62}6364.peach-status-pip.pulse {65  animation: pip-pulse 400ms var(--peach-curve-settle) both;66}6768/* Shell */69.peach-shell, .peach-screen {70  background:71    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),72    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),73    var(--peach-bg);74  border: 1px solid var(--peach-t3);75  box-shadow:76    0 2px 8px rgba(0,0,0,0.55),77    0 14px 48px rgba(0,0,0,0.7),78    0 0 0 1px rgba(240,232,216,0.04);79  overflow: hidden;80}81.peach-shell {82  display: grid;83  grid-template-rows: auto 1fr;84  min-height: 520px;85  position: relative;86  isolation: isolate;87}8889.peach-shell[data-surface="extension"] {90  width: min(320px, 100vw);91  border-radius: 0;92  height: 520px;93  max-height: 520px;94  overflow: hidden;95}9697/* ── Lock screen – full-window lock/create stage ── */98.lock-screen--vault-stage {99  display: flex;100  flex-direction: column;101  gap: 18px;102  padding: 20px 18px 18px;103  justify-content: flex-start;104}105.lock-screen--vault-stage .peach-lock-panel {106  margin-top: auto;107}108.peach-lock-headline--unlock {109  max-width: 220px;110}111.peach-lock-hero--unlock {112  padding-top: 14px;113}114.peach-lock-panel--unlock {115  gap: 10px;116}117118.peach-lock-restore-link {119  background: transparent;120  border: none;121  cursor: pointer;122  font-family: var(--font-mono);123  font-size: 0.625rem;124  letter-spacing: 0.08em;125  color: var(--t1);126  padding: 5px 0;127  text-align: left;128  transition: color 150ms ease;129}130131.peach-lock-restore-link:hover {132  color: var(--t0);133}134.peach-shell[data-surface="extension"] .peach-stage {135  min-height: 250px;136}137138/* Screen (unlock) */139.peach-screen {140  width: min(320px, 100vw);141  min-height: 100%;142  height: 100%;143  border-radius: 0;144  padding: 16px 20px 18px;145  display: grid;146  gap: 14px;147}148.peach-screen[data-motion-phase="enter"] {149  animation: peach-screen-enter var(--peach-dur-600) var(--peach-curve-arrival) both;150}151.peach-screen-header { min-height: 20px; }152153/* Wordmark */154.peach-wordmark {155  margin: 0;156  font-family: var(--font-display);157  font-size: 0.9375rem;158  font-style: italic;159  letter-spacing: 0.03em;160  color: var(--peach-t0);161  display: inline-flex;162  min-height: 1em;163}164165/* Motion text / char animation */166.peach-motion-text { display: inline-flex; min-height: 1em; }167.peach-motion-char {168  display: inline-block;169  white-space: pre;170  opacity: 0;171  transform: translateY(0.22em);172  animation: peach-char-enter var(--peach-motion-duration, 380ms) var(--peach-curve-arrival) forwards;173  animation-delay: calc(var(--peach-char-index, 0) * 20ms);174}175176/* Chrome */177.peach-chrome {178  position: relative;179  z-index: 10;180  padding: 16px 20px 0;181  display: flex;182  justify-content: space-between;183  align-items: center;184  /* z-index:10 keeps the header icons above `.peach-loading` (Suspense185     fallback) per §15 regression guard. Without pointer-events:none, the186     empty header strip also sits above `.peach-overlay-view` (z-index:2)187     and swallows clicks meant for an overlay's back button / top search. */188  pointer-events: none;189}190.peach-chrome .peach-btn { pointer-events: auto; }191.peach-chrome.is-hidden-for-overlay,192.peach-search-wrap.is-hidden-for-overlay {193  opacity: 0;194  visibility: hidden;195  pointer-events: none;196}197/* Chirp-sync owns its own surface and header — fully collapse the global198   chrome row so the warm gradient reaches the popup edge. */199.peach-chrome.is-collapsed,200.peach-search-wrap.is-collapsed {201  display: none;202}203.peach-wordmark-wrap { display: flex; align-items: center; gap: 5px; }204.peach-status-pip {205  width: 5px;206  height: 5px;207  border-radius: 50%;208  background: var(--peach-t3);209  display: inline-flex;210  flex-shrink: 0;211  transition: background 400ms ease, box-shadow 400ms ease;212}213.peach-chrome-actions { display: flex; gap: 6px; }214215/* Shell body */216.peach-shell-body {217  position: relative;218  display: grid;219  grid-template-rows: 1fr auto;220  min-height: 0;221  min-width: 0;222  width: 100%;223  overflow: hidden;224  height: 100%;225}226.peach-shell-veil {227  position: absolute; inset: 0;228  background: #000; opacity: 0;229  pointer-events: none; z-index: 1;230}231.peach-shell[data-motion-phase="enter"] .peach-shell-body {232  animation: peach-shell-fade-in var(--peach-dur-600) var(--peach-curve-arrival) both;233}234.peach-shell[data-motion-phase="exit"] .peach-shell-veil {235  animation: peach-veil-in 300ms var(--peach-curve-departure) forwards;236}237238/* Content frame */239.peach-content-frame {240  display: grid;241  grid-template-rows: 1fr auto;242  grid-template-columns: minmax(0, 1fr);243  align-content: start;244  min-height: 0;245  min-width: 0;246  overflow: hidden;247  transition: opacity 80ms ease, transform 80ms ease;248}249.peach-content-frame.navigating {250  opacity: 0.93;251  transform: translateX(2px);252}253.peach-content-frame[data-content-phase="enter"] {254  animation: peach-content-enter 135ms ease-out both;255}256.peach-content-frame[data-content-phase="exit"] {257  animation: peach-content-exit 95ms ease-in forwards;258}259.peach-content-frame[data-content-phase="idle"] { opacity: 1; transform: none; }260261/* Stage */262.peach-stage {263  padding: 10px 20px 12px;264  display: grid;265  gap: 12px;266  align-content: start;267  min-width: 0;268  min-height: 0;269  max-width: 100%;270  overflow-y: auto;271  overflow-x: hidden;272  scrollbar-width: none;273  -ms-overflow-style: none;274  overscroll-behavior: contain;275}276.peach-stage::-webkit-scrollbar { display: none; }277278/* Entry name */279.peach-entry-name-wrap { position: relative; overflow: hidden; max-width: 100%; }280.peach-entry-header {281  position: relative;282  z-index: 1;283  display: flex;284  align-items: flex-start;285  gap: 6px;286  min-width: 0;287}288.peach-entry-header-name {289  flex: 1;290  min-width: 0;291}292.peach-entry-name {293  margin: 0;294  padding-bottom: 0.12em;295  font-family: var(--font-display);296  font-style: italic; font-weight: 400;297  font-size: 44px; line-height: 0.95;298  color: var(--peach-t0);299  display: -webkit-box;300  -webkit-line-clamp: 2;301  -webkit-box-orient: vertical;302  overflow: hidden;303  text-wrap: balance;304}305.peach-entry-name--lg { font-size: 40px; }306.peach-entry-name--xl { font-size: 34px; line-height: 0.98; }307.peach-entry-name--xxl { font-size: 30px; line-height: 1.02; }308.peach-entry-name-text { display: block; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; padding-bottom: 0.12em; }309310/* Trash icon in entry header */311.peach-entry-trash-btn {312  flex-shrink: 0;313  padding: 4px;314  margin-top: 4px;315  background: transparent;316  border: none;317  cursor: pointer;318  color: var(--peach-t2);319  border-radius: 4px;320  transition: color 140ms ease, background 140ms ease;321  display: flex;322  align-items: center;323  justify-content: center;324}325.peach-entry-trash-btn:hover {326  color: var(--peach-t1);327  background: var(--peach-t3);328}329.peach-entry-trash-confirm {330  display: flex;331  align-items: center;332  gap: 6px;333  flex-shrink: 0;334  margin-top: 6px;335  flex-wrap: nowrap;336}337.peach-entry-trash-confirm-label {338  font-family: var(--font-mono);339  font-size: 0.5625rem;340  letter-spacing: 0.1em;341  color: var(--peach-t2);342  white-space: nowrap;343}344.peach-entry-name-button {345  padding: 0;346  background: transparent;347  text-align: left;348  cursor: pointer;349  max-width: 100%;350  overflow: hidden;351  display: block;352}353.peach-entry-name-char {354  display: inline-block;355  white-space: pre;356  opacity: 0;357  transform: translateY(0.22em);358  animation: peach-char-enter 380ms var(--peach-curve-arrival) forwards;359  animation-delay: calc(var(--char-index, 0) * 20ms);360}361362/* Domain */363.peach-domain { border-top: 1px solid var(--peach-t3); padding-top: 9px; }364.peach-domain-row {365  width: 100%; border: 0; background: transparent; color: inherit;366  padding: 0; display: flex; justify-content: space-between; align-items: baseline;367  cursor: default;368}369.peach-domain-value {370  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;371  font-size: 0.625rem; font-style: italic;372  letter-spacing: 0.12em; color: var(--peach-t1);373}374375/* Fields */376.peach-fields { display: grid; gap: 10px; }377.peach-field-card { display: grid; gap: 7px; }378.peach-label {379  font-family: Inter, system-ui, sans-serif;380  text-transform: uppercase; letter-spacing: 0.2em;381  font-size: 0.5rem; color: var(--peach-t2);382}383.peach-add-field-btn {384  align-self: flex-start;385  background: none; border: none; padding: 2px 0;386  font-family: Inter, system-ui, sans-serif;387  font-size: 0.6875rem; color: var(--peach-accent);388  cursor: pointer; opacity: 0.75;389  letter-spacing: 0.02em;390}391.peach-add-field-btn:hover { opacity: 1; }392.peach-field-value-row {393  display: flex; justify-content: space-between;394  align-items: center; gap: 8px;395  min-width: 0;396}397.peach-field-value {398  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;399  font-size: 0.8125rem; color: var(--peach-t1);400  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;401  flex: 1;402  min-width: 0;403}404.peach-password-value {405  display: inline-flex;406  align-items: center;407  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;408  font-size: 1rem; letter-spacing: 0.3em; color: var(--peach-t0);409  overflow: hidden;410  text-overflow: ellipsis;411  white-space: nowrap;412  flex: 1;413  min-width: 0;414  max-width: 100%;415}416.peach-password-value.is-revealed {417  font-size: 0.875rem;418  letter-spacing: 0.08em;419}420.peach-password-text,421.peach-password-mask {422  display: block;423  width: 100%;424  overflow: hidden;425  white-space: nowrap;426  /* Render as uniform mid-line bullets, not baseline periods */427  font-family: Inter, system-ui, sans-serif;428  font-size: 0.625rem;429  letter-spacing: 3px;430  user-select: none;431}432.peach-field-actions { display: flex; gap: 4px; align-items: center; }433.peach-password-strength { display: flex; align-items: center; gap: 8px; }434.peach-strength-bar { display: flex; gap: 3px; }435.peach-strength-seg { width: 28px; height: 4px; border-radius: 2px; background: #eee; }436.peach-strength-label {437  font-family: "IBM Plex Mono", monospace;438  font-style: italic;439  font-size: 0.5625rem;440  font-weight: 300;441  min-width: 36px;442  text-align: right;443  color: var(--peach-t2);444  letter-spacing: 0.06em;445}446447.peach-strength-hairline {448  display: flex;449  align-items: center;450  gap: 10px;451  margin-top: -2px;452}453454.peach-strength-hairline-track {455  flex: 1;456  height: 3px;457  border-radius: 2px;458  background: var(--peach-s2);459  overflow: hidden;460}461462.peach-strength-hairline-fill {463  height: 100%;464  border-radius: 2px;465  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),466    background 400ms ease;467}468469/* Note content (display) */470.peach-note-content {471  border-top: 1px solid var(--peach-t3);472  padding-top: 10px;473  font-family: var(--font-display);474  font-size: 0.9375rem;475  line-height: 1.75;476  color: var(--peach-t1);477}478479/* ── Inline editing ─────────────────────────────────────────────────── */480481/* Clickable display values */482.peach-inline-clickable {483  cursor: text;484  border-radius: 3px;485  transition: background 150ms ease;486}487.peach-inline-clickable:hover {488  background: rgba(240, 232, 216, 0.05);489}490491/* Subtle "edit" hint that appears on hover */492.peach-inline-edit-hint {493  font-family: Inter, system-ui, sans-serif;494  font-size: 0.5625rem;495  text-transform: uppercase;496  letter-spacing: 0.14em;497  color: var(--peach-t2);498  opacity: 0;499  transition: opacity 120ms ease;500  pointer-events: none;501  margin-left: 6px;502  flex-shrink: 0;503}504.peach-domain-row:hover .peach-inline-edit-hint {505  opacity: 1;506}507508/* Title editing */509.peach-inline-title-wrap {510  display: flex;511  flex-direction: column;512  gap: 6px;513}514.peach-inline-title-input {515  font-family: var(--font-display);516  font-style: italic;517  font-weight: 400;518  font-size: 40px;519  line-height: 0.95;520  color: var(--peach-t0);521  background: transparent;522  border: none;523  border-bottom: 1px solid var(--peach-accent);524  outline: none;525  width: 100%;526  padding: 2px 0;527}528529/* Generic inline field */530.peach-inline-field-wrap {531  display: flex;532  flex-direction: column;533  gap: 6px;534}535.peach-inline-input {536  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;537  font-size: 0.8125rem;538  color: var(--peach-t0);539  background: transparent;540  border: none;541  border-bottom: 1px solid var(--peach-accent);542  outline: none;543  width: 100%;544  padding: 3px 0;545}546.peach-inline-textarea {547  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;548  font-size: 0.6875rem;549  line-height: 1.7;550  color: var(--peach-t0);551  background: rgba(240, 232, 216, 0.04);552  border: 1px solid var(--peach-accent);553  border-radius: 4px;554  outline: none;555  width: 100%;556  padding: 8px;557  resize: vertical;558  min-height: 80px;559}560561/* Save / cancel row */562.peach-inline-actions {563  display: flex;564  gap: 6px;565  align-items: center;566}567.peach-inline-save-btn,568.peach-inline-cancel-btn {569  display: inline-flex;570  align-items: center;571  justify-content: center;572  width: 26px;573  height: 26px;574  border-radius: 4px;575  border: none;576  cursor: pointer;577  transition: background 140ms ease, opacity 140ms ease;578  flex-shrink: 0;579}580.peach-inline-save-btn {581  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);582  color: var(--peach-accent);583}584.peach-inline-save-btn:hover:not(:disabled) {585  background: color-mix(in srgb, var(--peach-accent) 30%, transparent);586}587.peach-inline-cancel-btn {588  background: rgba(240, 232, 216, 0.06);589  color: var(--peach-t2);590}591.peach-inline-cancel-btn:hover:not(:disabled) {592  background: rgba(240, 232, 216, 0.12);593  color: var(--peach-t1);594}595.peach-inline-save-btn:disabled,596.peach-inline-cancel-btn:disabled {597  opacity: 0.4;598  cursor: not-allowed;599}600601/* Inline password generator wrapper */602.peach-inline-generator-wrap {603  margin-top: 10px;604  padding-top: 10px;605  border-top: 1px solid var(--peach-t3);606  display: flex;607  flex-direction: column;608  gap: 8px;609}610.peach-inline-generator-cancel {611  align-self: flex-start;612  font-size: 0.6875rem;613  color: var(--peach-t2);614}615616/* "is-editing" card state */617.peach-field-card.is-editing {618  background: rgba(240, 232, 216, 0.02);619  border-radius: 6px;620  padding: 8px;621  margin: -8px;622}623624/* Inline tag editor on Entry detail view */625.peach-inline-tag-editor {626  display: flex;627  flex-direction: column;628  gap: 6px;629}630631/* Quiet inline "+ add X" link in the entry detail body */632.peach-entry-add-link {633  justify-self: start;634  margin-top: 8px;635}636637/* Additional URLs editor revealed by clicking the URL field */638.peach-additional-urls {639  display: flex;640  flex-direction: column;641  gap: 6px;642  margin-top: 8px;643}644.peach-additional-urls-label {645  font-size: 0.5625rem;646  letter-spacing: 0.1em;647  text-transform: uppercase;648  color: var(--peach-t2);649  margin-bottom: 2px;650}651/* UI-5 / LV-4: recovery words grid in the view-words reveal. */652.peach-recovery-words-grid {653  display: grid;654  grid-template-columns: 1fr 1fr;655  gap: 4px 10px;656}657.peach-recovery-word {658  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;659  font-size: 11px;660  color: var(--peach-t0);661}662.peach-recovery-word b {663  color: var(--peach-t2);664  font-weight: 400;665  margin-right: 4px;666}667668/* UI-1 / HV-1b: dismissible sync alert banners at the top of the vault view. */669.peach-sync-alerts {670  display: flex;671  flex-direction: column;672  gap: 6px;673  padding: 8px 12px 0;674}675.peach-sync-alert {676  display: flex;677  align-items: flex-start;678  gap: 8px;679  padding: 8px 10px;680  border-radius: 7px;681  background: color-mix(in srgb, #C8A840 14%, transparent);682  border: 1px solid color-mix(in srgb, #C8A840 38%, transparent);683}684.peach-sync-alert-text {685  flex: 1;686  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;687  font-size: 10px;688  line-height: 1.45;689  color: var(--peach-t0);690}691.peach-sync-alert-dismiss {692  flex-shrink: 0;693  background: none;694  border: none;695  color: var(--peach-t2);696  font-size: 14px;697  line-height: 1;698  cursor: pointer;699  padding: 0 2px;700}701.peach-sync-alert-dismiss:hover { color: var(--peach-t0); }702703/* UI-8 / LV-2: non-blocking homograph warning under the URL editor. */704.peach-homograph-warning {705  margin: 4px 0 2px;706  padding: 6px 8px;707  border-radius: 6px;708  background: color-mix(in srgb, var(--peach-breach) 12%, transparent);709  border: 1px solid color-mix(in srgb, var(--peach-breach) 36%, transparent);710  color: var(--peach-t1);711  font-size: 0.6875rem;712  line-height: 1.4;713}714.peach-additional-url-row {715  display: flex;716  align-items: center;717  gap: 6px;718}719.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }720.peach-additional-url-remove {721  background: transparent;722  border: 1px solid var(--peach-t3);723  color: var(--peach-t2);724  width: 22px;725  height: 22px;726  border-radius: 4px;727  cursor: pointer;728  font-size: 0.875rem;729  line-height: 1;730  display: inline-flex;731  align-items: center;732  justify-content: center;733  flex-shrink: 0;734  transition: color 120ms ease, border-color 120ms ease;735}736.peach-additional-url-remove:hover:not(:disabled) {737  color: var(--peach-accent);738  border-color: var(--peach-border-accent);739}740.peach-additional-urls-add { align-self: flex-start; }741742/* Delete row */743.peach-entry-delete-row {744  display: flex;745  align-items: center;746  gap: 8px;747  padding-top: 18px;748  margin-top: 8px;749  border-top: 1px solid var(--peach-t3);750}751.peach-delete-btn {752  font-size: 0.6875rem;753  color: var(--peach-t2);754  padding: 4px 0;755}756.peach-delete-confirm-text {757  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;758  font-size: 0.6875rem;759  font-style: italic;760  color: var(--peach-t2);761  flex-shrink: 0;762}763764/* TOTP band */765.peach-totp-band {766  border-top: 1px solid var(--peach-t3);767  padding: 12px 20px 14px;768  position: relative;769  display: grid;770  grid-template-columns: 1fr auto;771  gap: 10px;772}773.peach-totp-main {774  min-width: 0;775  cursor: pointer;776  user-select: none;777}778.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }779.peach-totp-code-row {780  display: flex;781  align-items: flex-end;782  gap: 10px;783  min-width: 0;784}785.peach-totp-code {786  margin: 2px 0 0;787  font-family: var(--font-display);788  font-style: italic;789  font-weight: 300;790  font-size: 38px; color: var(--peach-accent);791  line-height: 0.95; min-height: 1em;792  min-width: 0;793}794.peach-totp-code-text {795  display: inline-flex;796  overflow: hidden;797  text-overflow: ellipsis;798  white-space: nowrap;799}800.peach-totp-copy-btn {801  margin-bottom: 2px;802  flex-shrink: 0;803  border-color: transparent;804}805.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }806.peach-totp-countdown {807  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;808  font-size: 22px; color: var(--peach-t1);809}810.peach-totp-ring { transform: rotate(-90deg); }811.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }812.peach-totp-ring-progress {813  fill: none; stroke: var(--peach-accent); stroke-width: 2;814  stroke-linecap: round;815  transition: stroke-dashoffset 1s linear, stroke 500ms ease;816}817/* Search bar */818.peach-search-wrap {819  border-top: 1px solid var(--peach-t3);820  background: var(--peach-s1);821  min-height: 54px; position: relative;822  box-shadow: inset 0 6px 18px transparent;823  transition: box-shadow 700ms ease;824}825.peach-search-wrap::before {826  content: "";827  position: absolute;828  left: 0;829  top: 0;830  height: 2px;831  width: var(--peach-totp-progress, 0%);832  background: var(--peach-accent);833  opacity: 0;834  transition: width 1s linear, opacity 180ms ease;835  pointer-events: none;836}837.peach-shell[data-totp-active="true"] .peach-search-wrap::before {838  opacity: 0.9;839}840.peach-shell[data-totp-active="true"] .peach-search-wrap {841  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);842}843844@keyframes peach-totp-code-flare {845  0%   { filter: brightness(1); }846  25%  { filter: brightness(1.3); }847  100% { filter: brightness(1); }848}849.peach-totp-code.is-hot {850  animation: peach-totp-code-flare 3000ms ease-in-out both;851}852.peach-search-bar {853  min-height: 54px;854  display: grid;855  grid-template-columns: auto minmax(0, 1fr) auto;856  align-items: center;857  gap: 8px; padding: 0 9px 0 12px;858}859.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }860.peach-search-input {861  border: 0; background: transparent; color: var(--peach-t0);862  font-family: var(--font-display);863  font-style: italic; font-size: 18px;864  outline: none; width: 100%; min-width: 0; padding: 0;865  caret-color: var(--peach-accent);866}867.peach-search-input::placeholder { color: var(--peach-t2); }868.peach-search-meta {869  display: grid;870  grid-auto-flow: column;871  align-items: center;872  justify-content: end;873  gap: 6px;874  min-width: max-content;875}876.peach-search-counter {877  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;878  font-size: 0.625rem; color: var(--peach-t2);879  display: inline-flex;880  align-items: center;881  line-height: 1;882}883.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }884885/* Buttons */886.peach-btn {887  border: 1px solid transparent; border-radius: 12px;888  background: transparent; color: var(--peach-t0);889  font-family: Inter, system-ui, sans-serif;890  font-size: 0.75rem; letter-spacing: 0.02em; padding: 8px 12px;891  cursor: pointer;892  transition:893    background-color var(--peach-dur-80) var(--peach-curve-arrival),894    color var(--peach-dur-80) var(--peach-curve-arrival),895    border-color var(--peach-dur-150) var(--peach-curve-arrival);896}897.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }898.peach-btn:disabled {899  opacity: 0.45;900  cursor: not-allowed;901}902.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 0.6875rem; }903.peach-btn--md { min-height: 38px; }904.peach-btn--accent {905  background: var(--peach-accent);906  color: rgba(0,0,0,0.92);907  font-weight: 500;908  box-shadow:909    0 1px 0 rgba(255,255,255,0.08) inset,910    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),911    0 3px 16px var(--peach-glow),912    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);913}914.peach-btn--accent:hover:not(:disabled) {915  background: var(--peach-accent);916  filter: brightness(1.10) saturate(1.05);917  box-shadow:918    0 1px 0 rgba(255,255,255,0.10) inset,919    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),920    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),921    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);922}923.peach-btn--ghost:not(.peach-icon-btn) { border-color: var(--peach-t3); color: var(--peach-t1); }924.peach-btn--ghost.peach-icon-btn { color: var(--peach-t1); }925.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }926.peach-icon-btn {927  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;928  display: inline-flex; align-items: center; justify-content: center;929  border-color: transparent;930  transition:931    color var(--peach-dur-80) var(--peach-curve-arrival),932    box-shadow var(--peach-dur-150) var(--peach-curve-arrival),933    background-color var(--peach-dur-80) var(--peach-curve-arrival);934}935.peach-icon-btn:hover:not(:disabled) {936  background: transparent;937  color: var(--peach-accent);938  box-shadow: 0 0 12px color-mix(in srgb, var(--peach-accent) 28%, transparent),939              0 0 4px color-mix(in srgb, var(--peach-accent) 16%, transparent);940}941942.peach-btn:focus-visible {943  outline: none;944  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);945}946947/* Lock button */948.peach-lock-icon { transform-origin: center; }949.peach-lock-btn { color: var(--peach-accent); }950.peach-lock-btn.is-locking .peach-lock-icon {951  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);952}953954/* Biometric unlock button */955.peach-biometric-btn {956  display: flex;957  align-items: center;958  justify-content: center;959  gap: 6px;960  margin-top: 8px;961  width: 100%;962}963964/* Copy button */965.peach-copy-btn {966  position: relative; overflow: hidden;967  color: var(--peach-t2); border-color: var(--peach-t3);968}969.peach-copy-icon {970  display: inline-flex; align-items: center; justify-content: center;971  position: relative; z-index: 1;972}973.peach-copy-icon-svg { display: block; }974.peach-copy-sheen {975  position: absolute; inset: 0;976  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--peach-accent) 18%, transparent) 30%, color-mix(in srgb, var(--peach-accent) 8%, transparent) 100%);977  opacity: 0; transform: scaleX(0.15); transform-origin: left center;978}979.peach-copy-btn.is-copied {980  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;981  box-shadow:982    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),983    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),984    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);985}986.peach-copy-btn.is-copied .peach-copy-icon {987  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;988}989.peach-copy-btn.is-copied .peach-copy-sheen {990  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;991}992.peach-copy-btn.is-retreat {993  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;994}995.peach-copy-btn.is-retreat .peach-copy-sheen {996  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;997}998.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }999.peach-copy-drain-bar {1000  display: block; width: 100%; height: 100%;1001  background: var(--peach-accent); opacity: 0.7;1002  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;1003}10041005/* Unlock screen elements */1006.peach-underline-input {1007  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);1008  padding: 6px 0; background: transparent; color: var(--peach-t0);1009  outline: none;1010  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1011  font-size: 0.8125rem;1012  caret-color: var(--peach-accent);1013}1014.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }1015.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }1016.peach-hint {1017  margin: 0;1018  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1019  font-size: 0.625rem; color: var(--peach-t2);1020}1021.peach-unlock-footer {1022  margin-top: 4px; display: flex; align-items: center; gap: 7px;1023  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1024  font-size: 0.625rem; color: var(--peach-t2);1025}1026.peach-unlock-footer--lock {1027  padding-top: 2px;1028}10291030/* Desktop helper (peach-sync) code pairing — additive hooks. The chirp pairing1031   classes (peach-chirp-*) carry the shared layout; these only style the parts1032   unique to the typed-code path. Inline styles cover the SAS/confirm gate. */1033.peach-desktop-pair { display: flex; flex-direction: column; }1034.peach-desktop-enter,1035.peach-desktop-searching,1036.peach-desktop-paired,1037.peach-desktop-error {1038  display: flex; flex-direction: column; gap: 8px;1039  padding: 4px 18px 16px; text-align: center; align-items: center;1040}1041.peach-desktop-enter .peach-label { align-self: flex-start; }1042.peach-code-input {1043  text-align: center; letter-spacing: 0.42em; padding-left: 0.42em;1044}1045.peach-code-input::placeholder { letter-spacing: 0.42em; }10461047/* Sync card "pair a device" options — bordered, raised tappable rows that read1048   as buttons on any card hue (theme-neutral light overlay, not the peach accent). */1049.peach-sync-pair-option {1050  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;1051  width: 100%; text-align: left; cursor: pointer; font-family: inherit;1052  padding: 11px 12px; border-radius: 10px;1053  background: color-mix(in srgb, var(--peach-t0) 6%, transparent);1054  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);1055  color: var(--peach-t0);1056  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;1057}1058.peach-sync-pair-option + .peach-sync-pair-option { margin-top: 8px; }1059.peach-sync-pair-option:hover {1060  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);1061  border-color: color-mix(in srgb, var(--peach-t0) 28%, transparent);1062}1063.peach-sync-pair-option:active { transform: translateY(1px); }1064.peach-sync-pair-option:disabled { opacity: 0.5; cursor: default; }1065.peach-sync-pair-option-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }1066.peach-sync-pair-option-title { font-size: 0.8125rem; font-weight: 600; }1067.peach-sync-pair-option-sub { font-size: 0.6875rem; line-height: 1.45; color: var(--peach-t2); }1068.peach-sync-pair-option-chevron { flex-shrink: 0; color: var(--peach-t2); font-size: 1.05rem; line-height: 1.3; }10691070/* Breach badge */1071.peach-breach-badge {1072  display: flex;1073  position: relative;1074  z-index: 1;1075  align-items: center;1076  gap: 7px;1077  font-size: 0.5625rem;1078  color: var(--peach-breach);1079  padding: 5px 10px;1080  margin-bottom: 4px;1081  border-radius: 8px;1082  background: rgba(220, 80, 60, 0.07);1083  border: 1px solid rgba(220, 80, 60, 0.18);1084  letter-spacing: 0.04em;1085}10861087.peach-password-value.is-breached {1088  color: rgba(220, 80, 60, 0.75);1089  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1090}10911092/* ── Overlay views ─────────────────────────────────────────────────── */1093.peach-overlay-view {1094  position: absolute;1095  inset: 0;1096  display: flex;1097  flex-direction: column;1098  background:1099    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1100    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1101    var(--peach-bg);1102  z-index: 2;1103  overflow: hidden;1104  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1105}11061107.peach-overlay-view:has(.stk-shell) {1108  background: var(--peach-bg);1109}1110@keyframes overlay-in {1111  from { opacity: 0; transform: translateY(8px); }1112  to   { opacity: 1; transform: translateY(0); }1113}1114.peach-overlay-view.ov-enter-up {1115  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1116}1117.peach-overlay-view.ov-exit-up {1118  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1119}1120.peach-overlay-view.ov-enter-right {1121  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1122}1123.peach-overlay-view.ov-exit-right {1124  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1125}11261127@keyframes ov-enter-up {1128  from { opacity: 0; transform: translateY(18px); }1129  to   { opacity: 1; transform: translateY(0); }1130}1131@keyframes ov-exit-up {1132  from { opacity: 1; transform: translateY(0); }1133  to   { opacity: 0; transform: translateY(-12px); }1134}1135@keyframes ov-enter-right {1136  from { opacity: 0; transform: translateX(20px); }1137  to   { opacity: 1; transform: translateX(0); }1138}1139@keyframes ov-exit-right {1140  from { opacity: 1; transform: translateX(0); }1141  to   { opacity: 0; transform: translateX(20px); }1142}11431144/* Overlay shared header */1145.peach-overlay-header {1146  padding: 10px 12px 8px;1147  display: flex;1148  align-items: center;1149  gap: 10px;1150  flex-shrink: 0;1151}1152/* Back button — circular pill matching the settings stack masthead (.stk-back) */1153.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1154  width: 28px;1155  height: 28px;1156  flex: 0 0 28px;1157  border-radius: 999px;1158  border: 1px solid var(--peach-border);1159  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1160  color: var(--peach-t1);1161  padding: 0;1162}1163.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1164  color: var(--peach-t0);1165  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1166  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1167}1168.peach-overlay-title {1169  font-family: var(--font-display);1170  font-style: italic;1171  font-weight: 400;1172  font-size: 20px;1173  line-height: 1;1174  color: var(--peach-t0);1175  flex: 1;1176  text-align: center;1177}1178/* Balances the 28px back button so the title stays visually centred */1179.peach-overlay-spacer {1180  width: 28px;1181  flex: 0 0 28px;1182}11831184.peach-overlay-card {1185  background: var(--peach-s1);1186  border: 1px solid var(--peach-t3);1187  border-radius: 12px;1188  overflow: hidden;1189  width: 100%;1190}11911192.peach-onboarding-alt-actions {1193  display: flex;1194  flex-direction: column;1195  gap: 4px;1196  padding: 0;1197}11981199.peach-settings-copy {1200  margin: 0 0 10px;1201  font-size: 0.6875rem;1202  line-height: 1.5;1203  color: var(--peach-t2);1204}12051206.peach-settings-copy strong {1207  color: var(--peach-t0);1208}12091210.peach-settings-copy--spacious {1211  margin-bottom: 12px;1212}12131214.peach-settings-copy--result {1215  color: var(--peach-accent);1216  font-size: 0.8125rem;1217  text-align: center;1218  padding: 8px 0;1219}12201221.peach-settings-copy--danger {1222  color: var(--peach-breach);1223}12241225.peach-settings-copy--success {1226  color: var(--peach-accent);1227}12281229.peach-inline-feedback {1230  font-size: 0.6875rem;1231  margin: 10px 0 0;1232}12331234.peach-inline-feedback--ok {1235  color: var(--peach-accent);1236}12371238.peach-inline-feedback--error {1239  color: var(--peach-breach);1240}12411242.peach-inline-feedback--muted {1243  color: var(--peach-t2);1244  font-size: 0.625rem;1245  margin: 4px 0;1246}12471248.peach-inline-feedback--spaced {1249  margin-top: 12px;1250}12511252.peach-settings-actions--row {1253  display: flex;1254  gap: 6px;1255}12561257.peach-settings-actions--end {1258  margin-top: 14px;1259  justify-content: flex-end;1260}12611262.peach-settings-stack {1263  display: flex;1264  flex-direction: column;1265  gap: 6px;1266}12671268.peach-settings-stack--tight {1269  gap: 4px;1270}12711272.peach-settings-stack--spacious {1273  gap: 8px;1274}12751276.peach-settings-input {1277  width: 100%;1278  box-sizing: border-box;1279  padding: 8px 10px;1280  background: rgba(0, 0, 0, 0.22);1281  border: 1px solid transparent;1282  border-radius: 6px;1283  color: var(--peach-t0);1284  font-family: var(--font-ui);1285  font-size: 0.75rem;1286  outline: none;1287  transition: border-color 120ms ease, background 120ms ease;1288}12891290.peach-settings-input:focus {1291  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1292  background: rgba(0, 0, 0, 0.28);1293}12941295.peach-settings-input[type="password"] {1296  font-family: var(--font-mono);1297  letter-spacing: 0.04em;1298}12991300.peach-hidden-file-input {1301  display: none;1302}13031304.peach-checkbox-note {1305  display: flex;1306  align-items: flex-start;1307  gap: 8px;1308  font-size: 0.6875rem;1309  color: var(--peach-t1);1310  cursor: pointer;1311  margin: 12px 0;1312}13131314.peach-checkbox-note input {1315  margin-top: 1px;1316}13171318.peach-danger-notice {1319  background: rgba(220, 80, 60, 0.08);1320  border: 1px solid rgba(220, 80, 60, 0.2);1321  border-radius: 6px;1322  padding: 9px 11px;1323  font-size: 0.6875rem;1324  color: var(--peach-t1);1325  line-height: 1.5;1326}13271328.peach-info-notice {1329  font-size: 0.6875rem;1330  color: var(--peach-t1);1331  line-height: 1.5;1332  background: var(--surface-card);1333  border: 1px solid var(--peach-t3);1334  border-radius: 6px;1335  padding: 8px 10px;1336}13371338.peach-info-notice--warn {1339  border-color: rgba(220, 38, 38, 0.4);1340  background: rgba(220, 38, 38, 0.06);1341  color: rgba(220, 38, 38, 0.92);1342  margin-bottom: 8px;1343}13441345/* Warm helpful-context note — reads as a soft aside, not an alert. */1346.peach-info-notice--note {1347  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);1348  border-color: color-mix(in srgb, var(--peach-accent) 18%, transparent);1349  color: var(--peach-t2);1350}13511352.peach-strength-row {1353  display: flex;1354  align-items: center;1355  gap: 8px;1356  margin-bottom: 10px;1357}13581359.peach-strength-track {1360  flex: 1;1361  height: 4px;1362  background: var(--peach-s2);1363  border-radius: 2px;1364  overflow: hidden;1365}13661367.peach-strength-fill {1368  height: 100%;1369  border-radius: 2px;1370  transition: width 120ms ease, background 120ms ease;1371}13721373/* ── Type selector tabs ── */1374.peach-type-tabs {1375  display: flex;1376  gap: 0;1377  background: var(--peach-t4);1378  border-radius: 8px;1379  padding: 3px;1380}13811382.peach-type-tab {1383  flex: 1;1384  display: flex;1385  align-items: center;1386  justify-content: center;1387  gap: 6px;1388  padding: 6px 10px;1389  border-radius: 6px;1390  border: none;1391  background: transparent;1392  cursor: pointer;1393  font-family: Inter, system-ui, sans-serif;1394  font-size: 0.6875rem;1395  font-weight: 400;1396  letter-spacing: 0.04em;1397  color: var(--peach-t1);1398  transition: background 150ms ease, color 150ms ease;1399}14001401.peach-type-tab.is-active {1402  background: var(--peach-s2);1403  color: var(--peach-t0);1404  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1405}14061407.peach-type-tab:not(.is-active):hover {1408  color: var(--peach-t0);1409}14101411.peach-type-tab svg {1412  opacity: 0.7;1413  flex-shrink: 0;1414}14151416.peach-type-tab.is-active svg {1417  opacity: 1;1418}14191420/* ── List view ───────────────────────────────────────────────────────── */1421.peach-list-top {1422  padding: 0 10px;1423  min-height: 46px;1424  display: flex;1425  align-items: center;1426  gap: 6px;1427  border-bottom: 1px solid var(--peach-t3);1428  flex-shrink: 0;1429  background: var(--peach-s1);1430}14311432.peach-vault-list {1433  flex: 1;1434  overflow-y: auto;1435  scrollbar-width: none;1436}1437.peach-vault-list::-webkit-scrollbar { display: none; }14381439/* Scrollbar — vault list */1440.peach-vault-list {1441  scrollbar-width: thin;1442  scrollbar-color: var(--peach-t3) transparent;1443}14441445.peach-vault-list::-webkit-scrollbar {1446  width: 3px;1447}14481449.peach-vault-list::-webkit-scrollbar-thumb {1450  background: var(--peach-t3);1451  border-radius: 2px;1452}14531454.peach-entry-row {1455  width: 100%;1456  display: flex;1457  align-items: center;1458  gap: 10px;1459  padding: 9px 16px;1460  background: transparent;1461  border: none;1462  border-bottom: 1px solid var(--peach-t3);1463  cursor: pointer;1464  color: inherit;1465  text-align: left;1466  transition: background 80ms ease;1467}1468.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1469.peach-entry-row:last-child { border-bottom: none; }1470.peach-entry-row.is-active {1471  box-shadow: inset 2px 0 0 var(--peach-accent);1472  background: rgba(240,232,216,0.03);1473}1474.peach-entry-row:focus-visible {1475  outline: none;1476  box-shadow: 0 0 0 1px var(--peach-border-accent);1477  background: rgba(240,232,216,0.03);1478}1479.peach-entry-row-icon {1480  width: 26px; height: 26px;1481  border-radius: 7px;1482  border: 1px solid var(--peach-t3);1483  display: flex; align-items: center; justify-content: center;1484  color: var(--peach-t2);1485  flex-shrink: 0;1486}1487.peach-entry-row-icon.is-breach {1488  border-color: rgba(220,80,60,0.3);1489  color: rgba(220,80,60,0.7);1490}14911492/* Title-initials chip used as the favicon fallback for login entries whose1493 * real favicon hasn't been cached by the browser yet (freshly-imported,1494 * never-visited domains). Background colour is hashed from the title so1495 * the same entry always shows the same chip. The chip fits the same1496 * 26×26 row icon slot the favicon would take. */1497.peach-favicon-initials {1498  display: inline-flex;1499  align-items: center;1500  justify-content: center;1501  width: 100%;1502  height: 100%;1503  border-radius: 4px;1504  font-family: "IBM Plex Mono", monospace;1505  font-size: 0.5625rem;1506  font-weight: 600;1507  letter-spacing: 0.04em;1508  color: rgba(240, 232, 216, 0.92);1509  text-transform: uppercase;1510  user-select: none;1511}1512.peach-entry-row-info { flex: 1; min-width: 0; }1513.peach-entry-row-name {1514  display: block;1515  font-family: var(--font-display);1516  font-size: 1.0625rem;1517  font-style: italic;1518  font-weight: 400;1519  color: var(--peach-t0);1520  line-height: 1.2;1521  white-space: nowrap;1522  overflow: hidden;1523  text-overflow: ellipsis;1524}1525.peach-entry-row-meta {1526  display: block;1527  font-family: "IBM Plex Mono", monospace;1528  font-size: 0.5625rem;1529  color: var(--peach-t2);1530  margin-top: 1px;1531  letter-spacing: 0.05em;1532}1533.peach-entry-row-dot {1534  width: 5px; height: 5px;1535  border-radius: 50%;1536  background: rgba(220,80,60,0.7);1537  flex-shrink: 0;1538}1539.peach-new-entry-row {1540  display: flex;1541  align-items: center;1542  justify-content: center;1543  gap: 6px;1544  width: 100%;1545  padding: 11px;1546  background: transparent;1547  border: none;1548  border-top: 1px solid var(--peach-t3);1549  color: var(--peach-t2);1550  font-family: "IBM Plex Mono", monospace;1551  font-size: 0.5625rem;1552  text-transform: uppercase;1553  letter-spacing: 0.14em;1554  cursor: pointer;1555  flex-shrink: 0;1556  transition: color 120ms ease, background 120ms ease;1557}1558.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }15591560/* ── Multi-select mode ─────────────────────────────────────────────── */15611562/* Select-mode trigger button in sort bar — same shape as trash btn */1563.peach-sort-select-btn {1564  display: flex;1565  align-items: center;1566  justify-content: center;1567  padding: 3px 5px;1568  background: transparent;1569  border: none;1570  cursor: pointer;1571  color: var(--peach-t2);1572  border-radius: 4px;1573  transition: color 140ms ease, background 140ms ease;1574}1575.peach-sort-select-btn:hover {1576  color: var(--peach-t1);1577  background: var(--peach-t3);1578}15791580/* Sort bar in select mode */1581.peach-select-cancel-btn {1582  background: transparent;1583  border: none;1584  padding: 0 4px;1585  cursor: pointer;1586  font-family: "IBM Plex Mono", monospace;1587  font-size: 0.5625rem;1588  letter-spacing: 0.12em;1589  text-transform: uppercase;1590  color: var(--peach-t2);1591  transition: color 140ms ease;1592  flex-shrink: 0;1593}1594.peach-select-cancel-btn:hover { color: var(--peach-t0); }15951596.peach-select-count-label {1597  flex: 1;1598  text-align: center;1599  font-family: "IBM Plex Mono", monospace;1600  font-size: 0.5625rem;1601  letter-spacing: 0.14em;1602  text-transform: uppercase;1603  color: var(--peach-t1);1604}16051606.peach-select-all-btn {1607  background: transparent;1608  border: none;1609  padding: 0 4px;1610  cursor: pointer;1611  font-family: "IBM Plex Mono", monospace;1612  font-size: 0.5625rem;1613  letter-spacing: 0.12em;1614  text-transform: uppercase;1615  color: var(--peach-t2);1616  transition: color 140ms ease;1617  flex-shrink: 0;1618}1619.peach-select-all-btn:hover { color: var(--peach-accent); }16201621/* List in select mode */1622.peach-vault-list.is-selecting .peach-entry-row {1623  cursor: default;1624}1625.peach-vault-list.is-selecting .peach-entry-row:hover {1626  background: rgba(240,232,216,0.02);1627}1628.peach-vault-list.is-selecting .peach-entry-row.is-selected {1629  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1630}1631.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1632  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1633}16341635/* Select indicator circles in icon slot */1636.peach-entry-row-icon.is-select-icon {1637  color: var(--peach-t2);1638}1639.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1640  color: var(--peach-accent);1641}16421643/* Delete action bar at bottom (replaces new-entry row) */1644.peach-select-action-bar {1645  display: flex;1646  align-items: center;1647  justify-content: center;1648  gap: 7px;1649  width: 100%;1650  padding: 11px;1651  background: transparent;1652  border: none;1653  border-top: 1px solid var(--peach-t3);1654  color: var(--peach-t1);1655  font-family: "IBM Plex Mono", monospace;1656  font-size: 0.5625rem;1657  text-transform: uppercase;1658  letter-spacing: 0.14em;1659  cursor: pointer;1660  flex-shrink: 0;1661  transition: color 120ms ease, background 120ms ease;1662}1663.peach-select-action-bar:not(:disabled):hover {1664  color: var(--peach-t0);1665  background: rgba(220,80,60,0.06);1666}1667.peach-select-action-bar:not(:disabled):hover svg {1668  stroke: rgba(220,80,60,0.8);1669}1670.peach-select-action-bar:disabled,1671.peach-select-action-bar.is-empty {1672  color: var(--peach-t2);1673  cursor: default;1674  opacity: 0.5;1675}1676.peach-search-counter-list {1677  white-space: nowrap;1678  flex-shrink: 0;1679}1680.peach-list-empty {1681  min-height: 180px;1682  display: grid;1683  place-items: center;1684  color: var(--peach-t2);1685  font-family: "IBM Plex Mono", monospace;1686  font-size: 0.6875rem;1687}16881689/* ── Settings view ───────────────────────────────────────────────────── */1690.peach-settings-body {1691  flex: 1;1692  overflow-y: auto;1693  min-height: 0;1694  display: flex;1695  flex-direction: column;1696  padding: 2px 0 10px;1697}1698.peach-settings-group {1699  margin: 4px 10px;1700  padding: 9px 14px 11px;1701  border-radius: 12px;1702  border: 1px solid rgba(255, 255, 255, 0.07);1703  background: rgba(26, 20, 16, 0.60);1704  backdrop-filter: blur(10px) saturate(1.3);1705  -webkit-backdrop-filter: blur(10px) saturate(1.3);1706}17071708.peach-settings-group + .peach-settings-group {1709  margin-top: 6px;1710}17111712@supports not (backdrop-filter: blur(1px)) {1713  .peach-settings-group {1714    background: rgba(26, 20, 16, 0.90);1715    border-color: rgba(255, 255, 255, 0.09);1716    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1717  }1718}17191720.light .peach-settings-group,1721[data-theme="light"] .peach-settings-group {1722  background: rgba(245, 237, 226, 0.70);1723  border-color: rgba(26, 18, 8, 0.08);1724  backdrop-filter: blur(10px) saturate(1.2);1725  -webkit-backdrop-filter: blur(10px) saturate(1.2);1726}17271728@supports not (backdrop-filter: blur(1px)) {1729  .light .peach-settings-group,1730  [data-theme="light"] .peach-settings-group {1731    background: rgba(245, 237, 226, 0.97);1732    border-color: rgba(26, 18, 8, 0.10);1733  }1734}1735.peach-export-intro {1736  padding-bottom: 8px;1737}1738.peach-export-card {1739  display: grid;1740  gap: 10px;1741}1742.peach-rune-canvas {1743  border-radius: 8px;1744  background: rgba(0, 0, 0, 0.22);1745  flex: 1;1746  align-self: center;1747}1748.peach-script-input {1749  font-family: "PeachScript", monospace;1750  font-size: 0.6875rem;1751  line-height: 1.9;1752  letter-spacing: 0.06em;1753  color: var(--peach-t0);1754  background: rgba(0, 0, 0, 0.22);1755  border: none;1756  border-radius: 6px;1757  padding: 12px;1758  width: 100%;1759  min-height: 96px;1760  resize: vertical;1761  word-break: break-all;1762  scrollbar-width: none;1763  -ms-overflow-style: none;1764}17651766.peach-script-input::-webkit-scrollbar { display: none; }1767.peach-csv-warning {1768  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1769  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1770  color: var(--peach-t0);1771  border-radius: 6px;1772  padding: 10px 12px;1773  margin-bottom: 8px;1774  font-size: 0.75rem;1775  line-height: 1.45;1776}1777.peach-export-card--primary {1778  background:1779    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1780}17811782/* Export menu — distribute the three format cards across the popup. */1783.peach-export-menu {1784  display: flex;1785  flex-direction: column;1786  flex: 1;1787  min-height: 0;1788}1789.peach-export-menu .peach-settings-group {1790  flex: 1;1791  display: flex;1792  flex-direction: column;1793  justify-content: center;1794  gap: 10px;1795}17961797/* Result view — the script-string fills the remaining vertical surface. */1798.peach-export-result-group {1799  flex: 1;1800  display: flex;1801  flex-direction: column;1802  min-height: 0;1803  border-bottom: none;1804}1805.peach-export-result-group .peach-export-card {1806  flex: 1;1807  min-height: 0;1808  display: flex;1809  flex-direction: column;1810  gap: 10px;1811}1812.peach-export-result-group .peach-export-card-copy {1813  flex-shrink: 0;1814}1815.peach-export-result-group .peach-settings-label {1816  flex-shrink: 0;1817}1818.peach-export-result-group button {1819  flex-shrink: 0;1820}1821.peach-export-card-head {1822  display: flex;1823  align-items: center;1824  justify-content: space-between;1825  gap: 10px;1826}1827.peach-export-card-copy {1828  margin: 0;1829  font-size: 0.75rem;1830  line-height: 1.55;1831  color: var(--peach-t1);1832}1833.peach-export-note {1834  margin: 0;1835  font-size: 0.625rem;1836  line-height: 1.5;1837  color: var(--peach-t2);1838}1839.peach-export-strength-track {1840  height: 3px;1841  background: var(--peach-border);1842  border-radius: 2px;1843  margin: 4px 0 2px;1844  overflow: hidden;1845}1846.peach-export-strength-fill {1847  height: 100%;1848  border-radius: 2px;1849  transition: width 250ms ease, background 250ms ease;1850}1851.peach-export-strength-warn {1852  margin: 0;1853  font-size: 0.625rem;1854  line-height: 1.5;1855  color: #e84040;1856  font-family: "IBM Plex Mono", monospace;1857}1858.peach-export-strength-hint {1859  margin: 0;1860  font-size: 0.625rem;1861  line-height: 1.5;1862  color: var(--peach-t2);1863  font-family: "IBM Plex Mono", monospace;1864}1865.peach-export-pill {1866  display: inline-flex;1867  align-items: center;1868  padding: 4px 8px;1869  border-radius: 999px;1870  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1871  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1872  color: var(--peach-accent);1873  font-family: "IBM Plex Mono", monospace;1874  font-size: 0.5rem;1875  letter-spacing: 0.12em;1876  text-transform: uppercase;1877  white-space: nowrap;1878}1879.peach-export-pill--danger {1880  border-color: rgba(220,80,60,0.22);1881  background: rgba(220,80,60,0.08);1882  color: var(--peach-breach);1883}1884.peach-settings-label {1885  margin: 0 0 6px;1886  font-family: "IBM Plex Mono", monospace;1887  font-size: 0.5rem;1888  text-transform: uppercase;1889  letter-spacing: 0.18em;1890  color: var(--peach-t2);1891}1892.peach-settings-row {1893  display: flex;1894  align-items: center;1895  justify-content: space-between;1896  gap: 12px;1897  min-height: 34px;1898  padding: 6px 0;1899  font-size: 0.8125rem;1900  color: var(--peach-t1);1901}1902.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1903.peach-settings-value {1904  font-family: "IBM Plex Mono", monospace;1905  font-size: 0.625rem;1906  color: var(--peach-t2);1907}19081909.peach-settings-value--status {1910  display: flex;1911  align-items: center;1912  gap: 6px;1913}19141915.peach-settings-link {1916  font-family: "IBM Plex Mono", monospace;1917  font-size: 0.625rem;1918  color: var(--peach-accent);1919  text-decoration: none;1920  cursor: pointer;1921}1922.peach-settings-link:hover {1923  text-decoration: underline;1924}19251926.peach-settings-row--stack {1927  flex-direction: column;1928  align-items: stretch;1929  gap: 6px;1930}19311932.peach-settings-row--top {1933  align-items: flex-start;1934}19351936.peach-settings-row-main {1937  display: flex;1938  flex-direction: column;1939  gap: 4px;1940  flex: 1;1941}1942.peach-toggle {1943  width: 28px; height: 16px;1944  border-radius: 999px;1945  background: var(--peach-t3);1946  border: 1px solid var(--peach-t3);1947  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1948  flex-shrink: 0;1949  transition: background 200ms ease, border-color 200ms ease;1950  cursor: pointer;1951}1952.peach-toggle.is-on {1953  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1954  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1955}1956.peach-toggle-knob {1957  width: 10px; height: 10px;1958  border-radius: 50%;1959  background: var(--peach-t2);1960  flex-shrink: 0;1961  transform: translateX(0px);1962  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1963}1964.peach-toggle.is-on .peach-toggle-knob {1965  background: var(--peach-accent);1966  transform: translateX(12px);1967}1968.peach-settings-footer {1969  display: flex;1970  align-items: center;1971  gap: 8px;1972  margin-top: auto;1973  padding: 14px 16px 8px;1974  font-family: "IBM Plex Mono", monospace;1975  font-size: 0.5625rem;1976  color: var(--peach-t2);1977}19781979/* ── Settings home navigation ──────────────────────────────────────────── */1980.peach-settings-nav-label {1981  margin: 0 0 2px;1982  padding: 12px 16px 4px;1983  font-family: "IBM Plex Mono", monospace;1984  font-size: 0.5rem;1985  text-transform: uppercase;1986  letter-spacing: 0.18em;1987  color: var(--peach-t2);1988}19891990.peach-settings-cat-row {1991  display: flex;1992  align-items: center;1993  gap: 10px;1994  width: 100%;1995  padding: 9px 16px;1996  background: none;1997  border: none;1998  border-bottom: 1px solid var(--peach-t3);1999  cursor: pointer;2000  text-align: left;2001  color: inherit;2002  transition: background var(--peach-dur-80) ease;2003}2004.peach-settings-cat-row:hover {2005  background: var(--peach-t3);2006}2007.peach-settings-cat-row:last-child {2008  border-bottom: none;2009}20102011.peach-settings-cat-icon {2012  width: 28px;2013  height: 28px;2014  border-radius: 7px;2015  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2016  color: var(--peach-accent);2017  display: flex;2018  align-items: center;2019  justify-content: center;2020  flex-shrink: 0;2021}2022/* Light theme: peach-on-cream is too low-contrast — both colors are warm.2023   Darken the icon stroke to ink and bump the bg tint so the icon reads2024   sharply while the cell still feels accent-tinted. */2025.light .peach-settings-cat-icon {2026  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);2027  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));2028}20292030.peach-settings-cat-content {2031  flex: 1;2032  display: flex;2033  flex-direction: column;2034  gap: 2px;2035  min-width: 0;2036}20372038.peach-settings-cat-name {2039  font-size: 0.8125rem;2040  font-weight: 450;2041  color: var(--peach-t0);2042  line-height: 1.2;2043}20442045.peach-settings-cat-desc {2046  font-size: 0.625rem;2047  color: var(--peach-t2);2048  line-height: 1.3;2049  white-space: nowrap;2050  overflow: hidden;2051  text-overflow: ellipsis;2052}20532054.peach-settings-cat-chevron {2055  color: var(--peach-t2);2056  flex-shrink: 0;2057  opacity: 0.5;2058}20592060/* ── Settings sub-view section labels ──────────────────────────────────── */2061.peach-settings-sub-label {2062  margin: 12px 0 4px;2063  font-family: "IBM Plex Mono", monospace;2064  font-size: 0.5rem;2065  text-transform: uppercase;2066  letter-spacing: 0.18em;2067  color: var(--peach-t2);2068}2069.peach-settings-sub-label:first-child {2070  margin-top: 4px;2071}20722073/* ── Settings: collapsible Advanced section ─────────────────────────────── */2074.peach-settings-advanced-toggle {2075  display: flex;2076  align-items: center;2077  justify-content: space-between;2078  width: 100%;2079  background: none;2080  border: none;2081  cursor: pointer;2082  padding: 12px 0 4px;2083  margin: 0;2084  color: inherit;2085}2086.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {2087  color: var(--peach-t1);2088}2089.peach-settings-advanced-chevron {2090  font-size: 0.5625rem;2091  color: var(--peach-t3);2092  letter-spacing: 0;2093  transition: color 120ms ease;2094}20952096/* ── Feedback form ──────────────────────────────────────────────────────── */2097.peach-feedback-group {2098  flex: 1;2099  display: flex;2100  flex-direction: column;2101  border-bottom: none;2102}21032104.peach-feedback-intro {2105  margin: 4px 0 14px;2106  font-size: 0.75rem;2107  line-height: 1.55;2108  color: var(--peach-t1);2109}21102111.peach-feedback-chips {2112  display: flex;2113  flex-wrap: wrap;2114  gap: 6px;2115  margin-bottom: 14px;2116}21172118.peach-feedback-chip {2119  padding: 4px 10px;2120  border-radius: 999px;2121  border: 1px solid var(--peach-t3);2122  background: none;2123  color: var(--peach-t2);2124  font-size: 0.6875rem;2125  font-family: var(--font-ui);2126  cursor: pointer;2127  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2128    background var(--peach-dur-80) ease;2129}2130.peach-feedback-chip:hover {2131  border-color: var(--peach-t2);2132  color: var(--peach-t1);2133}2134.peach-feedback-chip.is-active {2135  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);2136  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));2137  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);2138  box-shadow:2139    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),2140    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);2141  font-weight: 700;2142}21432144.peach-feedback-textarea {2145  flex: 1;2146  width: 100%;2147  min-height: 120px;2148  box-sizing: border-box;2149  background: rgba(0, 0, 0, 0.22);2150  border: 1px solid transparent;2151  border-radius: 6px;2152  color: var(--peach-t0);2153  font-size: 0.75rem;2154  font-family: var(--font-ui);2155  line-height: 1.5;2156  padding: 8px 10px;2157  resize: none;2158  outline: none;2159  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2160}2161.peach-feedback-textarea:focus {2162  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2163  background: rgba(0, 0, 0, 0.28);2164}2165.peach-feedback-textarea:focus {2166  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2167}2168.peach-feedback-textarea::placeholder {2169  color: var(--peach-t2);2170}21712172.peach-feedback-meta {2173  margin: 6px 0 0;2174  font-size: 0.625rem;2175  color: var(--peach-t2);2176  font-family: "IBM Plex Mono", monospace;2177}21782179.peach-feedback-result {2180  margin: 8px 0 0;2181  font-size: 0.6875rem;2182  font-family: "IBM Plex Mono", monospace;2183}2184.peach-feedback-result--ok { color: var(--peach-sync-ok); }2185.peach-feedback-result--err { color: var(--peach-breach); }21862187.peach-feedback-submit {2188  width: 100%;2189  margin-top: 12px;2190  justify-content: center;2191}21922193.peach-feedback-anon {2194  margin: 8px 0 0;2195  font-size: 0.625rem;2196  color: var(--peach-t2);2197  text-align: center;2198}21992200.peach-feedback-thanks {2201  margin: auto 0;2202  padding: 18px 14px;2203  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);2204  border-radius: 8px;2205  background:2206    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),2207    rgba(0, 0, 0, 0.18);2208  color: var(--peach-t1);2209  text-align: center;2210}22112212.peach-feedback-thanks p {2213  margin: 0;2214  font-size: 0.75rem;2215  line-height: 1.5;2216}22172218.peach-feedback-thanks-title {2219  color: var(--peach-t0);2220  font-family: "Cormorant Garamond", serif;2221  font-size: 1.375rem !important;2222  line-height: 1.1 !important;2223  margin-bottom: 8px !important;2224}22252226.peach-passkey-badge {2227  margin-left: 8px;2228  font-size: 0.625rem;2229  letter-spacing: 0.06em;2230  text-transform: uppercase;2231  color: var(--peach-t2);2232  font-family: var(--font-ui);2233  vertical-align: middle;2234}22352236.peach-passkey-delete-btn {2237  color: var(--peach-breach);2238  border-color: rgba(229, 85, 85, 0.25);2239}22402241.peach-passkey-delete-confirm {2242  display: flex;2243  align-items: center;2244  gap: 8px;2245  padding: 8px 10px;2246  background: rgba(229, 85, 85, 0.06);2247  border: 1px solid rgba(229, 85, 85, 0.2);2248  border-radius: 6px;2249}22502251.peach-passkey-delete-confirm-copy {2252  flex: 1;2253  font-size: 0.6875rem;2254  color: var(--peach-t1);2255}22562257.peach-passkey-delete-btn--confirm {2258  color: var(--peach-breach);2259  border-color: rgba(229, 85, 85, 0.4);2260}22612262.peach-passkey-activity {2263  flex-direction: column;2264  align-items: flex-start;2265  gap: 4px;2266}22672268.peach-passkey-meta {2269  font-size: 0.6875rem;2270  color: var(--peach-t2);2271}22722273.peach-passkey-actions {2274  position: relative;2275  z-index: 1;2276  margin-top: 14px;2277  display: flex;2278  flex-direction: column;2279  gap: 8px;2280}22812282.peach-passkey-approval {2283  display: flex;2284  flex-direction: column;2285  align-items: center;2286  padding: 16px 20px 14px;2287  gap: 8px;2288  text-align: center;2289}22902291.peach-passkey-approval-icon {2292  width: 36px;2293  height: 36px;2294  border-radius: 10px;2295  background: var(--peach-s2);2296  border: 1px solid var(--peach-t3);2297  display: flex;2298  align-items: center;2299  justify-content: center;2300  flex-shrink: 0;2301  color: var(--peach-accent);2302}23032304.peach-passkey-approval-icon img,2305.peach-passkey-approval-icon svg {2306  width: 22px;2307  height: 22px;2308  border-radius: 5px;2309}23102311.peach-passkey-approval-rp {2312  font-family: var(--font-ui);2313  font-size: 0.75rem;2314  color: var(--peach-t2);2315  letter-spacing: 0.03em;2316}23172318.peach-passkey-approval-action {2319  font-family: var(--font-display);2320  font-style: italic;2321  font-weight: 300;2322  font-size: 18px;2323  color: var(--peach-t0);2324  line-height: 1.1;2325  margin: 1px 0;2326}23272328.peach-passkey-approval-user {2329  font-family: var(--font-mono);2330  font-size: 0.6875rem;2331  color: var(--peach-t1);2332  background: var(--peach-s2);2333  border: 1px solid var(--peach-t3);2334  border-radius: 4px;2335  padding: 3px 8px;2336}23372338.peach-passkey-approval-notice {2339  font-size: 0.625rem;2340  color: var(--peach-t2);2341  line-height: 1.5;2342  max-width: 220px;2343}23442345.peach-passkey-approval-actions {2346  display: flex;2347  gap: 8px;2348  width: 100%;2349  margin-top: 6px;2350}23512352.peach-passkey-approval-actions .peach-btn {2353  flex: 1;2354}23552356/* ── Inline generator drawer ── */2357.peach-generator-drawer {2358  display: grid;2359  grid-template-rows: 0fr;2360  transition: grid-template-rows 320ms var(--peach-curve-arrival);2361  overflow: hidden;2362}2363.peach-generator-drawer.is-open {2364  grid-template-rows: 1fr;2365}2366.peach-generator-drawer-inner {2367  min-height: 0;2368  overflow: hidden;2369}2370.peach-generator-drawer-content {2371  border-top: 1px solid var(--peach-t3);2372  padding: 8px 0 4px;2373  display: flex;2374  flex-direction: column;2375  gap: 8px;2376}23772378/* ── Compact generator (inside entry edit) ── */2379.peach-generator-drawer-content--compact {2380  border-top: 1px solid var(--peach-t3);2381  padding: 8px 0 2px;2382  gap: 7px;2383}2384.peach-pwgen-compact-display-row {2385  display: flex;2386  align-items: center;2387  gap: 6px;2388}2389.peach-pwgen-compact-output {2390  flex: 1;2391  min-width: 0;2392  font-family: "IBM Plex Mono", monospace;2393  font-size: 0.6875rem;2394  font-weight: 400;2395  letter-spacing: 0.04em;2396  color: var(--peach-t0);2397  background: rgba(240, 232, 216, 0.04);2398  border: 1px solid var(--peach-t3);2399  border-radius: 5px;2400  padding: 5px 8px;2401  line-height: 1.5;2402  outline: none;2403  transition: border-color 120ms ease;2404}24052406.peach-pwgen-compact-output:focus {2407  border-color: var(--peach-t1);2408}2409.peach-pwgen-compact-controls {2410  display: flex;2411  align-items: center;2412  gap: 6px;2413}2414.peach-pwgen-compact-slider {2415  flex: 1;2416  min-width: 0;2417  height: 2px !important;2418}2419.peach-pwgen-compact-controls .peach-pwgen-len-num {2420  flex-shrink: 0;2421  min-width: 18px;2422  text-align: right;2423}2424.peach-pwgen-compact-pills {2425  display: flex;2426  gap: 3px;2427  flex-shrink: 0;2428}2429.peach-pwgen-compact-pills .peach-pwgen-pill {2430  padding: 2px 7px;2431  font-size: 0.5rem;2432}2433.peach-pwgen-compact-use {2434  flex-shrink: 0;2435  font-size: 0.625rem !important;2436  padding: 3px 9px !important;2437  min-height: 22px !important;2438  border-radius: 5px !important;2439}24402441/* ── Password edit row (input + eye toggle side-by-side) ── */2442.peach-password-edit-row {2443  display: flex;2444  align-items: center;2445  gap: 6px;2446}2447.peach-password-edit-row .peach-inline-input {2448  flex: 1;2449  min-width: 0;2450}24512452/* ── Generate toggle link ── */2453.peach-generate-toggle-link {2454  display: inline-flex;2455  align-items: center;2456  gap: 5px;2457  background: none;2458  border: none;2459  padding: 0;2460  cursor: pointer;2461  font-family: "IBM Plex Mono", monospace;2462  font-size: 0.625rem;2463  color: var(--peach-t2);2464  letter-spacing: 0.04em;2465  transition: color 120ms ease;2466  align-self: flex-start;2467}2468.peach-generate-toggle-link:hover {2469  color: var(--peach-accent);2470}24712472/* Holds the generate + history toggle links on one row under the editor. */2473.peach-password-edit-links {2474  display: flex;2475  align-items: center;2476  gap: 14px;2477  flex-wrap: wrap;2478}24792480/* ── Past-password history list ── */2481.peach-password-history {2482  display: grid;2483  gap: 4px;2484  margin-top: 2px;2485  max-height: 168px;2486  overflow-y: auto;2487  scrollbar-width: thin;2488}2489.peach-history-row {2490  display: flex;2491  align-items: center;2492  justify-content: space-between;2493  gap: 8px;2494  padding: 5px 7px;2495  border-radius: 7px;2496  background: color-mix(in srgb, var(--peach-accent) 5%, transparent);2497  border: 1px solid color-mix(in srgb, var(--peach-accent) 9%, transparent);2498}2499.peach-history-main {2500  display: flex;2501  flex-direction: column;2502  gap: 1px;2503  min-width: 0;2504  flex: 1;2505}2506.peach-history-pw {2507  font-family: "IBM Plex Mono", monospace;2508  font-size: 0.6875rem;2509  color: var(--peach-t1);2510  white-space: nowrap;2511  overflow: hidden;2512  text-overflow: ellipsis;2513}2514.peach-history-pw .peach-password-mask {2515  letter-spacing: 0.08em;2516  color: var(--peach-t2);2517}2518.peach-history-age {2519  font-family: "IBM Plex Mono", monospace;2520  font-size: 0.5625rem;2521  color: var(--peach-t3, var(--peach-t2));2522  letter-spacing: 0.03em;2523}2524.peach-history-actions {2525  display: flex;2526  align-items: center;2527  gap: 2px;2528  flex-shrink: 0;2529}2530.peach-history-use {2531  font-family: "IBM Plex Mono", monospace;2532  font-size: 0.5625rem;2533  letter-spacing: 0.05em;2534  padding: 3px 7px;2535}2536.peach-history-empty {2537  font-family: "IBM Plex Mono", monospace;2538  font-size: 0.625rem;2539  line-height: 1.45;2540  color: var(--peach-t2);2541  padding: 6px 8px;2542  border-radius: 7px;2543  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);2544  border: 1px solid color-mix(in srgb, var(--peach-accent) 8%, transparent);2545}25462547/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2548.peach-entry-body {2549  flex: 1;2550  overflow-y: auto;2551  overflow-x: hidden;2552  scrollbar-width: none;2553  -ms-overflow-style: none;2554  overscroll-behavior: contain;2555  display: grid;2556  gap: 10px;2557  align-content: start;2558  padding: 10px 20px 14px;2559  min-width: 0;2560  min-height: 0;2561}2562.peach-entry-body::-webkit-scrollbar { display: none; }25632564/* Type-toggle pills + inline note toolbar */2565.peach-new-type-row {2566  display: flex;2567  align-items: center;2568  gap: 6px;2569  margin-bottom: 2px;2570}2571.peach-new-type-btn {2572  background: transparent;2573  border: 1px solid var(--peach-t3);2574  border-radius: 12px;2575  padding: 3px 10px;2576  font-family: "IBM Plex Mono", monospace;2577  font-size: 0.5625rem;2578  letter-spacing: 0.12em;2579  text-transform: uppercase;2580  color: var(--peach-t2);2581  cursor: pointer;2582  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2583}2584.peach-new-type-btn.is-active {2585  color: var(--peach-t0);2586  border-color: var(--peach-accent);2587  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2588}2589.peach-new-type-btn:not(.is-active):hover {2590  color: var(--peach-t1);2591  border-color: var(--peach-t2);2592}25932594/* Editable title */2595.peach-new-title-wrap { margin: 0 0 2px; }2596.peach-new-title-input {2597  background: transparent;2598  border: none;2599  outline: none;2600  width: 100%;2601  color: var(--peach-t0);2602  font-family: var(--font-display);2603  font-style: italic;2604  font-weight: 400;2605  font-size: 40px;2606  line-height: 0.95;2607  caret-color: var(--peach-accent);2608}2609.peach-new-title-input::placeholder { color: var(--peach-t2); }26102611/* Editable domain field */2612.peach-domain-edit-row {2613  display: flex;2614  align-items: center;2615  gap: 6px;2616}26172618.peach-domain-edit-row .peach-domain-value--edit {2619  flex: 1;2620  width: 0;2621}26222623.peach-domain-url-btn {2624  flex-shrink: 0;2625  background: transparent;2626  border: none;2627  cursor: pointer;2628  color: var(--peach-t3);2629  padding: 2px 3px;2630  display: flex;2631  align-items: center;2632  line-height: 0;2633  border-radius: 3px;2634  transition: color 120ms ease;2635}26362637.peach-domain-url-btn:hover {2638  color: var(--peach-accent);2639}26402641.peach-domain-value--edit {2642  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2643  font-size: 0.625rem;2644  font-style: italic;2645  letter-spacing: 0.12em;2646  color: var(--peach-t1);2647  background: transparent;2648  border: none;2649  border-bottom: 1px solid var(--peach-t3);2650  outline: none;2651  width: 100%;2652  padding: 2px 0;2653  caret-color: var(--peach-accent);2654  transition: border-color 140ms ease, color 140ms ease;2655}2656.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2657.peach-domain-value--edit:focus {2658  border-bottom-color: rgba(240, 232, 216, 0.28);2659  color: var(--peach-t0);2660}26612662/* Editable field values (username, password, totp) */2663.peach-field-value--edit {2664  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2665  font-size: 0.8125rem;2666  color: var(--peach-t0);2667  background: transparent;2668  border: none;2669  border-bottom: 1px solid var(--peach-t3);2670  outline: none;2671  flex: 1;2672  min-width: 0;2673  padding: 3px 0;2674  caret-color: var(--peach-accent);2675  transition: border-color 140ms ease, color 140ms ease;2676}2677.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2678.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2679.peach-field-value--edit:focus {2680  border-bottom-color: rgba(240, 232, 216, 0.28);2681  color: var(--peach-t0);2682}26832684/* "+ add optional field" links */2685.peach-entry-add-links {2686  display: flex;2687  gap: 12px;2688  flex-wrap: wrap;2689  margin-top: -2px;2690}2691.peach-add-field-link {2692  background: transparent;2693  border: none;2694  padding: 0;2695  cursor: pointer;2696  font-family: "IBM Plex Mono", monospace;2697  font-size: 0.5625rem;2698  letter-spacing: 0.1em;2699  text-transform: uppercase;2700  color: var(--peach-t2);2701  transition: color 140ms ease;2702}2703.peach-add-field-link:hover { color: var(--peach-accent); }27042705/* ── New entry form (legacy classes) ────────────────────────────────── */2706.peach-new-body {2707  flex: 1;2708  overflow-y: auto;2709  padding: 10px 20px 14px;2710}2711.peach-new-name-input {2712  background: transparent;2713  border: none;2714  outline: none;2715  width: 100%;2716  color: var(--peach-t0);2717  font-family: var(--font-display);2718  font-style: italic;2719  font-weight: 400;2720  font-size: 40px;2721  line-height: 0.95;2722  caret-color: var(--peach-accent);2723}2724.peach-new-name-input::placeholder { color: var(--peach-t2); }2725.peach-new-field-input {2726  background: transparent;2727  border: none;2728  outline: none;2729  flex: 1;2730  min-width: 0;2731  caret-color: var(--peach-accent);2732}2733.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }27342735/* ── Canary card ── */2736.peach-canary-card {2737  border: 1px solid rgba(217, 160, 48, 0.2);2738  background: rgba(217, 160, 48, 0.03);2739  border-radius: 8px;2740  padding: 12px;2741}27422743.peach-canary-settings-header {2744  display: flex;2745  align-items: center;2746  justify-content: space-between;2747  cursor: pointer;2748  user-select: none;2749}27502751.peach-canary-card .peach-label {2752  color: rgba(217, 160, 48, 0.85);2753}27542755.peach-canary-card .peach-new-field-input {2756  border-color: rgba(217, 160, 48, 0.25);2757}27582759.peach-canary-card .peach-new-field-input:focus {2760  border-color: rgba(217, 160, 48, 0.5);2761}27622763.peach-canary-body {2764  margin-top: 12px;2765  display: flex;2766  flex-direction: column;2767  gap: 10px;2768}27692770.peach-canary-explainer {2771  display: flex;2772  gap: 10px;2773  padding: 10px 12px;2774  border-radius: 10px;2775  background: rgba(217, 160, 48, 0.06);2776  border: 1px solid rgba(217, 160, 48, 0.22);2777  margin-bottom: 4px;2778}27792780.peach-canary-explainer-icon {2781  font-size: 1rem;2782  flex-shrink: 0;2783  line-height: 1.2;2784}27852786.peach-canary-explainer-title {2787  font-family: var(--font-ui);2788  font-size: 0.6875rem;2789  font-weight: 500;2790  color: rgba(217, 160, 48, 0.9);2791  margin: 0 0 3px;2792}27932794.peach-canary-explainer-copy {2795  font-family: var(--font-ui);2796  font-size: 0.625rem;2797  color: var(--peach-t2);2798  line-height: 1.55;2799  margin: 0;2800}28012802.peach-canary-hint {2803  font-size: 0.625rem;2804  color: var(--peach-t2);2805  font-family: Inter, system-ui, sans-serif;2806  line-height: 1.5;2807  margin-top: 4px;2808}28092810.peach-canary-actions-row {2811  display: flex;2812  align-items: center;2813  gap: 8px;2814}28152816.peach-canary-test-btn {2817  border-color: rgba(217, 160, 48, 0.3);2818  color: rgba(217, 160, 48, 0.85);2819}28202821.peach-canary-test-result {2822  font-size: 0.625rem;2823  font-family: Inter, system-ui, sans-serif;2824}28252826.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2827.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }28282829.peach-canary-badge {2830  display: flex;2831  position: relative;2832  z-index: 1;2833  align-items: center;2834  gap: 5px;2835  padding: 4px 10px;2836  background: rgba(217, 160, 48, 0.12);2837  border: 1px solid rgba(217, 160, 48, 0.35);2838  border-radius: 6px;2839  margin-bottom: 6px;2840  width: fit-content;2841}28422843.peach-canary-badge-label {2844  font-size: 0.625rem;2845  letter-spacing: 0.06em;2846  color: rgba(217, 160, 48, 0.9);2847  font-family: var(--font-ui);2848  text-transform: uppercase;2849}28502851.peach-canary-badge-icon {2852  font-size: 0.6875rem;2853}28542855.peach-canary-suppress-row {2856  display: flex;2857  align-items: center;2858  gap: 8px;2859  padding: 6px 10px;2860  background: rgba(217, 160, 48, 0.08);2861  border-radius: 6px;2862  margin-bottom: 8px;2863}28642865.peach-canary-suppress-label {2866  font-size: 0.6875rem;2867  color: rgba(217, 160, 48, 0.85);2868  cursor: pointer;2869  font-family: var(--font-ui);2870  letter-spacing: 0.04em;2871}28722873.peach-regen-panel {2874  position: relative;2875  z-index: 1;2876  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2877  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2878  border-radius: 8px;2879  padding: 12px;2880  margin-bottom: 8px;2881}28822883.peach-regen-panel-header {2884  display: flex;2885  align-items: center;2886  justify-content: space-between;2887  margin-bottom: 10px;2888}28892890.peach-regen-panel-title {2891  font-size: 0.6875rem;2892  font-weight: 600;2893  letter-spacing: 0.06em;2894  text-transform: uppercase;2895  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2896}28972898.peach-regen-output {2899  background: rgba(0, 0, 0, 0.2);2900  border-radius: 6px;2901  padding: 10px;2902  margin-bottom: 10px;2903  font-family: var(--font-mono);2904  font-size: 0.8125rem;2905  word-break: break-all;2906  color: var(--peach-t1);2907}29082909.peach-regen-actions {2910  display: flex;2911  gap: 6px;2912}29132914.peach-regen-actions--spaced {2915  margin-bottom: 8px;2916}29172918.peach-regen-action-grow {2919  flex: 1;2920}29212922.peach-regen-copy-btn {2923  padding: 0 8px;2924}29252926.peach-regen-success {2927  position: relative;2928  z-index: 1;2929  background: rgba(40, 180, 80, 0.1);2930  border: 1px solid rgba(40, 180, 80, 0.3);2931  border-radius: 8px;2932  padding: 10px 12px;2933  margin-bottom: 8px;2934  display: flex;2935  align-items: center;2936  gap: 8px;2937  font-size: 0.6875rem;2938  color: rgba(40, 180, 80, 0.9);2939}29402941/* ── Note editor overlay ── */2942.peach-note-editor {2943  position: absolute;2944  inset: 0;2945  z-index: 200;2946  display: flex;2947  flex-direction: column;2948  background:2949    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2950    var(--peach-bg);2951  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2952}29532954.peach-note-editor-header {2955  display: flex;2956  align-items: center;2957  gap: 10px;2958  padding: 14px 16px 10px;2959  border-bottom: 1px solid var(--peach-t3);2960  flex-shrink: 0;2961}29622963.peach-note-editor-back {2964  background: transparent;2965  border: none;2966  cursor: pointer;2967  color: var(--peach-t2);2968  padding: 4px 6px;2969  border-radius: 6px;2970  display: flex;2971  align-items: center;2972  transition: color 120ms ease, background 120ms ease;2973  flex-shrink: 0;2974}2975.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }29762977.peach-note-editor-label {2978  flex: 1;2979  font-family: var(--font-display);2980  font-style: italic;2981  font-size: 0.9375rem;2982  color: var(--peach-t1);2983  letter-spacing: 0.02em;2984}29852986.peach-note-editor-save-btn {2987  background: transparent;2988  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2989  border-radius: 8px;2990  color: var(--peach-accent);2991  font-family: "IBM Plex Mono", monospace;2992  font-size: 0.625rem;2993  letter-spacing: 0.06em;2994  text-transform: uppercase;2995  padding: 3px 10px;2996  cursor: pointer;2997  transition: background 120ms ease, border-color 120ms ease;2998}2999.peach-note-editor-save-btn:hover:not(:disabled) {3000  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3001  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3002}3003.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }30043005.peach-note-toolbar {3006  display: flex;3007  align-items: center;3008  gap: 3px;3009  padding: 6px 14px 5px;3010  border-bottom: 1px solid var(--peach-t3);3011  flex-shrink: 0;3012}30133014.peach-note-tool-btn {3015  background: transparent;3016  border: 1px solid transparent;3017  border-radius: 5px;3018  color: var(--peach-t2);3019  font-family: "IBM Plex Mono", monospace;3020  font-size: 0.625rem;3021  letter-spacing: 0.04em;3022  padding: 2px 8px;3023  cursor: pointer;3024  line-height: 1.6;3025  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;3026}3027.peach-note-tool-btn:hover {3028  background: var(--peach-t4);3029  color: var(--peach-t0);3030  border-color: var(--peach-t3);3031}30323033.peach-note-tool-icon {3034  padding: 3px 7px;3035  display: inline-flex;3036  align-items: center;3037  justify-content: center;3038}30393040.peach-note-tool-divider {3041  width: 1px;3042  height: 14px;3043  background: var(--peach-t3);3044  margin: 0 4px;3045  flex-shrink: 0;3046}30473048.peach-note-editor-body {3049  flex: 1;3050  overflow-y: auto;3051  padding: 16px 20px 20px;3052  outline: none;3053  font-family: var(--font-display);3054  font-size: 1rem;3055  line-height: 1.75;3056  color: var(--peach-t0);3057  scrollbar-width: none;3058  word-break: break-word;3059}3060.peach-note-editor-body:empty::before {3061  content: "write your note…";3062  color: var(--peach-t3);3063  font-style: italic;3064  pointer-events: none;3065}30663067/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */3068.peach-note-editor-inline {3069  display: flex;3070  flex-direction: column;3071  flex: 1;3072  min-height: 0;3073}3074.peach-note-editor-body--inline {3075  flex: 1;3076  min-height: 0;3077  font-size: 0.9375rem;3078  padding: 10px 20px 14px;3079}30803081/* Full-width toolbar row inside the body (Add.tsx note type).3082   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */3083.peach-note-toolbar-body {3084  display: flex;3085  align-items: center;3086  gap: 3px;3087  padding: 5px 20px 4px;3088  margin: 2px -20px 0;3089  border-bottom: 1px solid var(--peach-t3);3090  flex-shrink: 0;3091}30923093/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)3094   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn3095   and .peach-note-tool-divider button-level styles. */3096.peach-note-toolbar-inline {3097  display: flex;3098  align-items: center;3099  gap: 3px;3100  margin-left: auto;3101  padding-left: 10px;3102  border-left: 1px solid var(--peach-t3);3103  min-height: 22px;3104}31053106/* Entry.tsx toolbar row (no tabs, toolbar only) */3107.peach-entry-note-toolbar-row {3108  display: flex;3109  align-items: center;3110  margin: 4px 0 6px;3111  position: relative;3112  z-index: 1;3113}3114.peach-entry-note-toolbar-row .peach-note-toolbar-inline {3115  border-left: none;3116  padding-left: 0;3117  margin-left: 0;3118}31193120/* Note body — fills available vertical space in Add.tsx and Entry.tsx */3121.peach-note-body {3122  display: flex;3123  flex-direction: column;3124  flex: 1;3125  min-height: 0;3126  margin: 4px 0 0;3127}3128.peach-entry-body--new .peach-note-body {3129  margin: 8px -20px 0;3130}31313132/* Add.tsx body is a grid by default; swap to a flex column when a note is3133   active so the note body can stretch and pin the tags row to the bottom. */3134.peach-entry-body--new:has(.peach-note-body) {3135  display: flex;3136  flex-direction: column;3137}31383139/* Rich content element styles (editor + display) */3140.peach-note-editor-body h2,3141.peach-note-content h2 {3142  font-family: var(--font-display);3143  font-size: 20px;3144  font-weight: 600;3145  font-style: italic;3146  color: var(--peach-t0);3147  margin: 6px 0 2px;3148  line-height: 1.3;3149}3150.peach-note-editor-body ul,3151.peach-note-content ul {3152  padding-left: 18px;3153  margin: 3px 0;3154  list-style: disc;3155}3156.peach-note-editor-body ol,3157.peach-note-content ol {3158  padding-left: 18px;3159  margin: 3px 0;3160  list-style: decimal;3161}3162.peach-note-editor-body li,3163.peach-note-content li { margin: 2px 0; }3164.peach-note-editor-body hr,3165.peach-note-content hr {3166  border: none;3167  border-top: 1px solid var(--peach-t3);3168  margin: 10px 0;3169}31703171/* font size elements from execCommand */3172.peach-note-editor-body font[size="1"],3173.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }3174.peach-note-editor-body font[size="2"],3175.peach-note-content font[size="2"] { font-size: 0.8125rem; }3176.peach-note-editor-body font[size="3"],3177.peach-note-content font[size="3"] { font-size: 1rem; }3178.peach-note-editor-body font[size="4"],3179.peach-note-content font[size="4"] { font-size: 20px; }3180.peach-note-editor-body font[size="5"],3181.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }31823183/* bold / italic inside the editor and note display */3184.peach-note-editor-body b, .peach-note-editor-body strong,3185.peach-note-content b, .peach-note-content strong { font-weight: 700; }3186.peach-note-editor-body em, .peach-note-editor-body i,3187.peach-note-content em, .peach-note-content i { font-style: italic; }31883189/* note display — rendered HTML, no pre-wrap */3190.peach-note-content {3191  overflow: auto;3192  max-height: 340px;3193  word-break: break-word;3194}31953196/* ── Note textarea ── */3197.peach-note-textarea {3198  width: 100%;3199  min-height: 180px;3200  max-height: 280px;3201  resize: vertical;3202  background: var(--peach-t4);3203  border: 1px solid var(--peach-t3);3204  border-radius: 8px;3205  padding: 10px 12px;3206  font-family: "IBM Plex Mono", monospace;3207  font-size: 0.75rem;3208  line-height: 1.7;3209  color: var(--peach-t1);3210  outline: none;3211  transition: border-color 150ms ease;3212}32133214.peach-note-textarea:focus {3215  border-color: var(--peach-t2);3216}32173218.peach-note-char-count {3219  font-family: "IBM Plex Mono", monospace;3220  font-size: 0.5625rem;3221  color: var(--peach-t3);3222  text-align: right;3223  margin-top: 4px;3224  letter-spacing: 0.1em;3225}32263227/* ── Field input baseline ── */3228.peach-new-field-input {3229  width: 100%;3230  background: transparent;3231  border: none;3232  border-bottom: 1px solid var(--peach-t3);3233  padding: 4px 0;3234  color: var(--peach-t1);3235  font-family: "IBM Plex Mono", monospace;3236  font-size: 0.8125rem;3237  outline: none;3238  transition: border-color 150ms ease;3239}32403241.peach-new-field-input:focus {3242  border-bottom-color: var(--peach-t0);3243  color: var(--peach-t0);3244}32453246.peach-new-name-input {3247  width: 100%;3248  background: transparent;3249  border: none;3250  border-bottom: 1px solid var(--peach-t3);3251  padding: 6px 0;3252  font-family: var(--font-display);3253  font-style: italic;3254  font-size: 28px;3255  color: var(--peach-t0);3256  outline: none;3257  transition: border-color 150ms ease;3258}32593260.peach-new-name-input:focus {3261  border-bottom-color: var(--peach-t1);3262}32633264.peach-new-name-input::placeholder {3265  color: var(--peach-t2);3266  font-style: italic;3267}32683269.peach-new-field-input::placeholder {3270  color: var(--peach-t3);3271}32723273/* ── Demo entrance animation ── */3274#hd-shell {3275  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3276}3277@keyframes hd-shell-enter {3278  from { opacity: 0; transform: scale(0.96) translateY(16px); }3279  to   { opacity: 1; transform: scale(1) translateY(0); }3280}32813282/* ── Keyframes ── */3283@keyframes peach-char-enter {3284  from { opacity: 0; transform: translateY(0.22em); }3285  to   { opacity: 1; transform: translateY(0); }3286}3287@keyframes peach-content-enter {3288  from { opacity: 0.96; transform: translateY(4px); }3289  to   { opacity: 1; transform: translateY(0); }3290}3291@keyframes peach-content-exit {3292  from { opacity: 1; transform: translateY(0); }3293  to   { opacity: 0.92; transform: translateY(-3px); }3294}3295@keyframes peach-screen-enter {3296  from { opacity: 0; transform: translateY(14px); }3297  to   { opacity: 1; transform: translateY(0); }3298}3299@keyframes peach-shell-fade-in {3300  from { opacity: 0; }3301  to   { opacity: 1; }3302}3303@keyframes peach-veil-in {3304  from { opacity: 0; }3305  to   { opacity: 1; }3306}3307@keyframes peach-lock-settle {3308  0%   { transform: scale(0.9); }3309  65%  { transform: scale(1.08); }3310  100% { transform: scale(1); }3311}3312@keyframes peach-copy-confirm {3313  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3314  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); }3315}3316@keyframes peach-copy-retreat {3317  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); }3318  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3319}3320@keyframes peach-copy-flood {3321  from { opacity: 0; transform: scaleX(0.15); }3322  to   { opacity: 1; transform: scaleX(1); }3323}3324@keyframes peach-copy-icon-settle {3325  from  { transform: scale(0.84); }3326  70%   { transform: scale(1.08); }3327  to    { transform: scale(1); }3328}3329@keyframes peach-copy-sheen-retreat {3330  from { opacity: 1; transform: scaleX(1); }3331  to   { opacity: 0; transform: scaleX(0.15); }3332}3333@keyframes peach-copy-drain {3334  from { width: 100%; }3335  to   { width: 0; }3336}3337@keyframes peach-shake {3338  0%, 100% { transform: translateX(0); }3339  20%      { transform: translateX(-6px); }3340  40%      { transform: translateX(6px); }3341  60%      { transform: translateX(-4px); }3342  80%      { transform: translateX(4px); }3343}33443345@keyframes pip-pulse {3346  0% { transform: scale(1); }3347  40% { transform: scale(2.2); }3348  100% { transform: scale(1); }3349}335033513352/* ── Password generator ── */3353.peach-pwgen-body {3354  flex: 1; overflow-y: auto;3355  display: flex; flex-direction: column;3356}3357.peach-policy-badge {3358  display: flex; align-items: center;3359  padding: 6px 20px 0;3360  font-size: 0.625rem; font-family: Inter, sans-serif;3361  color: var(--peach-t2); letter-spacing: 0.04em;3362}3363.peach-pwgen-display {3364  padding: 14px 20px 12px;3365  border-bottom: 1px solid var(--peach-t3);3366  display: flex; align-items: flex-start; gap: 10px;3367}3368.peach-pwgen-display-row {3369  display: flex;3370  align-items: flex-start;3371  gap: 8px;3372  padding-bottom: 8px;3373  border-bottom: 1px solid var(--peach-t3);3374}3375.peach-pwgen-output {3376  flex: 1; min-width: 0; margin: 0;3377  font-family: "IBM Plex Mono", monospace;3378  font-size: 0.8125rem; color: var(--peach-t0);3379  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3380  white-space: normal;3381  padding: 10px 12px;3382  background: var(--peach-t4);3383  border-radius: 6px;3384  min-height: 36px;3385}3386.peach-pwgen-output-display {3387  flex: 1;3388  min-width: 0;3389  margin: 0;3390  font-family: var(--font-display);3391  font-style: italic;3392  font-weight: 300;3393  font-size: 32px;3394  line-height: 1.05;3395  color: var(--peach-t0);3396  word-break: break-all;3397  overflow-wrap: break-word;3398  white-space: normal;3399  letter-spacing: 0.02em;3400}3401.peach-pwgen-display-actions {3402  display: flex;3403  flex-direction: column;3404  gap: 4px;3405  flex-shrink: 0;3406  margin-top: 2px;3407}3408.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3409.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3410.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3411.peach-pwgen-len-num {3412  font-family: "IBM Plex Mono", monospace;3413  font-size: 0.75rem; color: var(--peach-accent);3414}3415.peach-pwgen-len-num--edit {3416  cursor: text;3417  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3418}3419.peach-pwgen-len-input {3420  font-family: "IBM Plex Mono", monospace;3421  font-size: 0.75rem;3422  color: var(--peach-accent);3423  background: transparent;3424  border: none;3425  border-bottom: 1px solid var(--peach-accent);3426  outline: none;3427  width: 32px;3428  text-align: right;3429  padding: 0;3430}3431.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3432.peach-pwgen-toggles { display: flex; flex-direction: column; }3433.peach-pwgen-charset-pills {3434  display: flex;3435  gap: 6px;3436  flex-wrap: wrap;3437}3438.peach-pwgen-pill {3439  padding: 4px 11px;3440  border-radius: 999px;3441  border: 1px solid var(--peach-t3);3442  background: transparent;3443  color: var(--peach-t2);3444  font-family: "IBM Plex Mono", monospace;3445  font-size: 0.5625rem;3446  letter-spacing: 0.08em;3447  cursor: pointer;3448  transition: all 150ms ease;3449}3450.peach-pwgen-pill.is-on {3451  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3452  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3453  color: var(--peach-accent);3454}3455.peach-pwgen-pill:not(.is-on):hover {3456  color: var(--peach-t1);3457  border-color: var(--peach-t2);3458}3459.peach-pwgen-use-btn {3460  width: 100%;3461  min-height: 34px;3462  border-radius: 8px;3463  margin-top: 2px;3464}3465.peach-generator-constraint-note {3466  font-family: 'IBM Plex Mono', monospace;3467  font-size: 10px;3468  color: var(--peach-t3);3469  letter-spacing: 0.04em;3470  margin: 0;3471  transition: opacity 200ms ease;3472}3473.peach-pwgen-toggle-row {3474  display: flex; align-items: center; justify-content: space-between;3475  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3476}3477.peach-pwgen-toggle-row:last-child { border-bottom: none; }3478.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }34793480/* Peach popup should not expose native scrollbars on internal panels. */3481.peach-settings-body,3482.peach-new-body,3483.peach-pwgen-body,3484.lock-screen,3485.peach-import-preview {3486  scrollbar-width: none;3487  -ms-overflow-style: none;3488  overscroll-behavior: contain;3489}3490.peach-settings-body::-webkit-scrollbar,3491.peach-new-body::-webkit-scrollbar,3492.peach-pwgen-body::-webkit-scrollbar,3493.lock-screen::-webkit-scrollbar,3494.peach-import-preview::-webkit-scrollbar {3495  width: 0;3496  height: 0;3497  display: none;3498}34993500.lock-screen {3501  height: 100%;3502  min-height: 100%;3503  overflow-y: auto;3504  padding: 18px 18px 16px;3505  gap: 14px;3506  grid-template-rows: auto auto auto 1fr auto;3507  align-content: stretch;3508  position: relative;3509  isolation: isolate;3510}3511.peach-screen.lock-screen--vault-stage {3512  display: flex;3513  flex-direction: column;3514  justify-content: flex-start;3515  gap: 18px;3516  padding: 20px 18px 18px;3517  overflow: hidden;3518}3519.peach-screen.lock-screen--vault-stage .peach-lock-panel {3520  margin-top: 0;3521}3522.lock-screen--onboarding {3523  display: flex;3524  flex-direction: column;3525  gap: 12px;3526  justify-content: flex-start;3527}35283529.lock-screen::before {3530  content: "";3531  position: absolute;3532  inset: 12px 18px auto auto;3533  width: 160px;3534  height: 160px;3535  border-radius: 999px;3536  background:3537    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%);3538  filter: blur(6px);3539  opacity: 0.7;3540  pointer-events: none;3541  z-index: 0;3542}35433544.peach-lock-rune-string {3545  flex: 1;3546  display: flex;3547  align-items: center;3548  justify-content: center;3549  gap: 6px;3550  font-family: PeachScript, monospace;3551  font-size: 0.8125rem;3552  letter-spacing: 0.05em;3553  pointer-events: none;3554  user-select: none;3555  position: relative;3556  z-index: 1;3557}35583559.peach-lock-rune-string span {3560  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3561  text-shadow:3562    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3563    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3564  transition: color 0.9s ease, text-shadow 0.9s ease;3565}35663567.peach-lock-rune-string span.is-glowing {3568  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3569  text-shadow:3570    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3571    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3572}35733574.lock-screen-header {3575  display: flex;3576  align-items: center;3577  justify-content: space-between;3578  position: relative;3579  z-index: 1;3580}35813582.lock-password-input.shake {3583  animation: peach-shake 300ms ease-in-out;3584}35853586.peach-hint-error {3587  color: rgba(220, 80, 60, 0.92);3588}35893590.peach-onboarding-headline {3591  margin: 0;3592  font-family: var(--font-display);3593  font-size: 35px;3594  line-height: 0.88;3595  font-style: italic;3596  font-weight: 400;3597  max-width: 252px;3598}35993600.peach-lock-copy {3601  display: grid;3602  gap: 8px;3603  position: relative;3604  z-index: 1;3605}36063607.peach-lock-copy--onboarding {3608  gap: 10px;3609}36103611.peach-lock-hero {3612  position: relative;3613  z-index: 1;3614  display: grid;3615  gap: 8px;3616  min-height: 0;3617  padding: 4px 2px 0;3618  border: none;3619  border-radius: 0;3620  background: transparent;3621  box-shadow: none;3622}3623.peach-lock-hero-art {3624  position: absolute;3625  right: -8px;3626  top: -6px;3627  width: 120px;3628  height: 120px;3629  display: flex;3630  align-items: center;3631  justify-content: center;3632  pointer-events: none;3633  opacity: 0.12;3634  filter: saturate(0.9);3635}3636.peach-lock-hero-mark {3637  width: 100%;3638  height: 100%;3639}3640/* Peach body stays brand-peach across every accent — we don't want a3641   green or blue peach when sage/sky is selected. Leaf + vein keep the3642   sage tint because a real peach has a sage leaf. In the new brand-kit3643   mark the leaf is path 1 and the vein stroke is path 2; the body and3644   back-lobe (paths 3 + 4) must stay untouched. */3645.peach-lock-hero-mark path:nth-child(1) {3646  fill: rgba(123, 144, 96, 0.88);3647}3648.peach-lock-hero-mark path:nth-child(2) {3649  stroke: rgba(94, 122, 66, 0.95);3650}3651.peach-lock-hero > *:not(.peach-lock-hero-art) {3652  position: relative;3653  z-index: 1;3654}36553656.peach-lock-eyebrow {3657  display: inline-flex;3658  align-items: center;3659  width: fit-content;3660  padding: 4px 9px;3661  border-radius: 999px;3662  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3663  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3664  color: var(--peach-t0);3665  font-family: "IBM Plex Mono", monospace;3666  font-size: 0.5rem;3667  letter-spacing: 0.18em;3668  text-transform: uppercase;3669}36703671.peach-lock-label-row {3672  display: flex;3673  align-items: center;3674  justify-content: space-between;3675  margin-bottom: 0;3676}36773678.peach-lock-reveal-btn {3679  display: inline-flex;3680  align-items: center;3681  gap: 4px;3682  background: none;3683  border: none;3684  cursor: pointer;3685  font-family: "IBM Plex Mono", monospace;3686  font-size: 0.5625rem;3687  letter-spacing: 0.06em;3688  color: var(--peach-t2);3689  padding: 2px 0;3690  transition: color 150ms ease;3691}36923693.peach-lock-reveal-btn:hover {3694  color: var(--peach-t1);3695}36963697.peach-lock-warning {3698  color: rgba(220, 80, 60, 0.85) !important;3699  line-height: 1.5;3700}37013702.peach-onboarding-cards {3703  display: grid;3704  gap: 8px;3705  position: relative;3706  z-index: 1;3707}37083709.peach-lock-panel {3710  position: relative;3711  z-index: 1;3712  display: grid;3713  gap: 9px;3714  padding: 14px 16px 15px;3715  border-radius: 18px;3716  border: 1px solid var(--peach-t3);3717  background:3718    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3719  box-shadow:3720    inset 0 1px 0 rgba(240, 232, 216, 0.04),3721    0 12px 28px rgba(0, 0, 0, 0.12);3722}37233724/* Glass surface — lock panel and settings groups */3725.peach-glass {3726  background: rgba(26, 20, 16, 0.65);3727  border: 1px solid rgba(255, 255, 255, 0.08);3728  border-radius: 12px;3729  backdrop-filter: blur(12px) saturate(1.4);3730  -webkit-backdrop-filter: blur(12px) saturate(1.4);3731}37323733@supports not (backdrop-filter: blur(1px)) {3734  .peach-glass {3735    background: rgba(26, 20, 16, 0.92);3736    border: 1px solid rgba(255, 255, 255, 0.10);3737    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3738  }3739}37403741.light .peach-glass,3742[data-theme="light"] .peach-glass {3743  background: rgba(240, 233, 223, 0.72);3744  border: 1px solid rgba(26, 18, 8, 0.08);3745  backdrop-filter: blur(12px) saturate(1.2);3746  -webkit-backdrop-filter: blur(12px) saturate(1.2);3747}37483749@supports not (backdrop-filter: blur(1px)) {3750  .light .peach-glass,3751  [data-theme="light"] .peach-glass {3752    background: rgba(240, 233, 223, 0.97);3753    border: 1px solid rgba(26, 18, 8, 0.10);3754  }3755}37563757/* Lock panel keeps its own border-radius over the generic glass token */3758.peach-lock-panel.peach-glass {3759  border-radius: 18px;3760  background: rgba(26, 20, 16, 0.65);3761  border: 1px solid rgba(255, 255, 255, 0.08);3762  box-shadow:3763    inset 0 1px 0 rgba(255, 255, 255, 0.05),3764    0 12px 28px rgba(0, 0, 0, 0.3);3765}37663767.light .peach-lock-panel.peach-glass,3768[data-theme="light"] .peach-lock-panel.peach-glass {3769  background: rgba(240, 233, 223, 0.82);3770  border: 1px solid rgba(26, 18, 8, 0.08);3771  box-shadow:3772    inset 0 1px 0 rgba(255, 255, 255, 0.4),3773    0 8px 24px rgba(80, 56, 32, 0.15);3774}37753776@supports not (backdrop-filter: blur(1px)) {3777  .peach-lock-panel.peach-glass {3778    background: rgba(26, 20, 16, 0.92);3779    box-shadow:3780      inset 0 1px 0 rgba(255, 255, 255, 0.05),3781      0 12px 28px rgba(0, 0, 0, 0.4);3782  }3783  .light .peach-lock-panel.peach-glass,3784  [data-theme="light"] .peach-lock-panel.peach-glass {3785    background: rgba(240, 233, 223, 0.98);3786  }3787}37883789.peach-lock-panel--secondary {3790  gap: 12px;3791}37923793.peach-lock-panel-header {3794  display: flex;3795  align-items: baseline;3796  justify-content: space-between;3797  gap: 12px;3798}37993800.peach-lock-option-grid {3801  display: grid;3802  gap: 10px;3803}38043805.peach-lock-option {3806  width: 100%;3807  display: grid;3808  gap: 6px;3809  padding: 14px 15px;3810  border-radius: 16px;3811  border: 1px solid rgba(240, 232, 216, 0.08);3812  background: rgba(240, 232, 216, 0.02);3813  color: var(--peach-t0);3814  text-align: left;3815  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3816}38173818.peach-lock-option:hover {3819  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3820  background: rgba(240, 232, 216, 0.04);3821  transform: translateY(-1px);3822}38233824.peach-lock-option-title {3825  font-size: 0.75rem;3826  color: var(--peach-t0);3827}38283829.peach-lock-option-copy {3830  font-size: 0.6875rem;3831  line-height: 1.55;3832  color: var(--peach-t1);3833}38343835.peach-onboarding-stack {3836  margin-top: 2px;3837}3838.peach-lock-panel-footer {3839  display: grid;3840  gap: 6px;3841  margin-top: 2px;3842  padding-top: 10px;3843  border-top: 1px solid rgba(240, 232, 216, 0.06);3844}38453846/* ── Restore tab view ─────────────────────────────────────────────────────3847   Tab-based restore screen replacing the old three-card picker. */38483849.peach-restore-tabview {3850  overflow: hidden;3851}38523853.peach-restore-tabcard {3854  flex: 1;3855  display: flex;3856  flex-direction: column;3857  gap: 0;3858  padding: 0;3859  overflow: hidden;3860  cursor: default;3861  user-select: none;3862  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3863}38643865/* ── Tab selector ─────────────────────────────────────────────────────── */38663867.peach-restore-tabs {3868  display: flex;3869  justify-content: space-around;3870  padding: 14px 10px 10px;3871  border-bottom: 1px solid var(--peach-t3);3872  gap: 2px;3873  overflow: hidden;3874  scrollbar-width: none;3875}3876.peach-restore-tabs::-webkit-scrollbar { display: none; }38773878.peach-restore-tab {3879  background: none;3880  border: none;3881  cursor: pointer;3882  padding: 3px 2px;3883  font-family: 'Cormorant Garamond', Georgia, serif;3884  font-style: italic;3885  font-size: 11px;3886  color: var(--peach-t2);3887  transition: color 150ms ease, text-shadow 150ms ease;3888  flex: 1;3889  min-width: 0;3890  text-align: center;3891  white-space: nowrap;3892  overflow: hidden;3893  text-overflow: ellipsis;3894}3895.peach-restore-tab:hover {3896  color: var(--peach-accent);3897  text-shadow:3898    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3899    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3900}3901.peach-restore-tab.is-active {3902  color: var(--peach-accent);3903  text-shadow:3904    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3905    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3906}39073908/* ── Content area ─────────────────────────────────────────────────────── */39093910.peach-restore-content {3911  padding: 16px 16px 14px;3912  display: flex;3913  flex-direction: column;3914  gap: 8px;3915  overflow: hidden;3916  scrollbar-width: none;3917  flex: 1;3918}3919.peach-restore-content::-webkit-scrollbar { display: none; }3920.peach-restore-content > * {3921  overflow: hidden;3922  scrollbar-width: none;3923}3924.peach-restore-content > *::-webkit-scrollbar { display: none; }39253926/* ── Shared tab inner layout ──────────────────────────────────────────── */39273928.peach-rt-symbols,3929.peach-rt-csv,3930.peach-rt-phone,3931.peach-restore-codex {3932  display: flex;3933  flex-direction: column;3934  gap: 8px;3935  overflow: hidden;3936}39373938.peach-restore-codex {3939  min-height: 0;3940  justify-content: center;3941}39423943.peach-restore-codex-title {3944  margin: 0;3945  font-family: var(--font-display);3946  font-size: 1rem;3947  font-style: italic;3948  color: var(--peach-t0);3949}39503951.peach-restore-codex-copy {3952  margin: 0;3953  font-size: 0.75rem;3954  line-height: 1.5;3955  color: var(--peach-t1);3956}39573958.peach-restore-codex-button {3959  width: 100%;3960  justify-content: center;3961}39623963.peach-rt-submit {3964  width: 100%;3965}39663967.peach-rt-error {3968  margin: 0;3969  font-size: 0.6875rem;3970  color: var(--peach-breach);3971  line-height: 1.4;3972}39733974/* ── PeachScript tab ──────────────────────────────────────────────────── */39753976.peach-restore-symbols-textarea {3977  font-family: 'PeachScript', monospace;3978  font-size: 13px;3979  line-height: 1.9;3980  letter-spacing: 0.1em;3981  word-break: break-all;3982  resize: none;3983  width: 100%;3984  min-height: 56px;3985  max-height: 72px;3986  overflow: hidden;3987  scrollbar-width: none;3988  -ms-overflow-style: none;3989  box-sizing: border-box;3990  padding: 6px 8px;3991  border-radius: 8px;3992  border: 1px solid var(--peach-t3);3993  background: rgba(240, 232, 216, 0.03);3994  color: var(--peach-t0);3995}3996.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3997.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }39983999.peach-restore-symbols-pass {4000  width: 100%;4001  box-sizing: border-box;4002  padding: 7px 10px;4003  border-radius: 8px;4004  border: 1px solid var(--peach-t3);4005  background: rgba(240, 232, 216, 0.03);4006  color: var(--peach-t0);4007  font-size: 0.8125rem;4008}4009.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }4010.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }40114012.peach-rt-divider {4013  text-align: center;4014  font-size: 0.6875rem;4015  color: var(--peach-t2);4016  font-style: italic;4017}40184019.peach-rt-file-label {4020  width: 100%;4021  justify-content: center;4022}40234024.peach-rt-anim-canvas {4025  width: 100%;4026  height: 180px;4027  border-radius: 10px;4028  overflow: hidden;4029  display: block;4030}40314032/* ── CSV tab ──────────────────────────────────────────────────────────── */40334034.peach-rt-csv-sources {4035  margin: 0;4036  font-size: 0.6875rem;4037  color: var(--peach-t2);4038  line-height: 1.5;4039  text-align: center;4040}40414042.peach-rt-csv-warning {4043  margin: 0;4044  font-family: "IBM Plex Mono", monospace;4045  font-size: 0.5625rem;4046  letter-spacing: 0.12em;4047  color: var(--peach-breach);4048  text-align: center;4049}40504051/* ── From Phone tab ───────────────────────────────────────────────────── */40524053.peach-rt-phone-code {4054  margin: 0;4055  text-align: center;4056  font-family: "IBM Plex Mono", monospace;4057  font-size: 22px;4058  letter-spacing: 0.18em;4059  color: var(--peach-t0);4060}40614062.peach-rt-phone-qr {4063  display: block;4064  width: 96px;4065  height: 96px;4066  margin: 0 auto;4067  border-radius: 6px;4068  image-rendering: pixelated;4069  overflow: hidden;4070}40714072.peach-rt-phone-hint {4073  margin: 0;4074  font-size: 0.6875rem;4075  color: var(--peach-t2);4076  line-height: 1.55;4077  text-align: center;4078}40794080/* ── Intro popup ──────────────────────────────────────────────────────── */40814082.peach-restore-intro-overlay {4083  position: absolute;4084  inset: 0;4085  z-index: 100;4086  display: flex;4087  align-items: center;4088  justify-content: center;4089  padding: 20px;4090  background: rgba(12, 10, 6, 0.7);4091  backdrop-filter: blur(4px);4092  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4093}40944095.peach-restore-intro-card {4096  width: 100%;4097  display: flex;4098  flex-direction: column;4099  gap: 12px;4100  padding: 22px 20px 20px;4101  border-radius: 16px;4102  border: 1px solid var(--peach-t3);4103  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));4104  backdrop-filter: blur(4px);4105  -webkit-backdrop-filter: blur(4px);4106  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);4107}41084109.peach-restore-intro-headline {4110  margin: 0;4111  font-family: var(--font-display);4112  font-style: italic;4113  font-size: 20px;4114  font-weight: 400;4115  color: var(--peach-t0);4116}41174118.peach-restore-intro-body {4119  display: flex;4120  flex-direction: column;4121  gap: 8px;4122}4123.peach-restore-intro-body p {4124  margin: 0;4125  font-size: 0.75rem;4126  color: var(--peach-t1);4127  line-height: 1.5;4128}41294130.peach-restore-intro-btn {4131  width: 100%;4132  margin-top: 4px;4133}41344135/* Snapshot restore panel */4136.peach-snapshot-panel {4137  gap: 10px;4138  overflow-y: auto;4139  max-height: 340px;4140}4141.peach-snapshot-list {4142  display: flex;4143  flex-direction: column;4144  gap: 4px;4145}4146.peach-snapshot-row {4147  display: flex;4148  align-items: center;4149  justify-content: space-between;4150  width: 100%;4151  padding: 8px 10px;4152  border-radius: 8px;4153  border: 1px solid rgba(240, 232, 216, 0.07);4154  background: transparent;4155  cursor: pointer;4156  transition: border-color 120ms, background 120ms;4157  text-align: left;4158  gap: 8px;4159}4160.peach-snapshot-row:hover {4161  border-color: rgba(240, 232, 216, 0.14);4162  background: rgba(240, 232, 216, 0.03);4163}4164.peach-snapshot-row.is-selected {4165  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4166  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);4167}4168.peach-snapshot-time {4169  font-size: 11.5px;4170  color: var(--peach-t0);4171  flex: 1;4172}4173.peach-snapshot-count {4174  font-family: "IBM Plex Mono", monospace;4175  font-size: 0.625rem;4176  color: var(--peach-t2);4177  flex-shrink: 0;4178}4179.peach-snapshot-confirm {4180  display: flex;4181  flex-direction: column;4182  gap: 8px;4183  padding-top: 10px;4184  border-top: 1px solid rgba(240, 232, 216, 0.06);4185}4186.peach-snapshot-warning {4187  display: flex;4188  align-items: flex-start;4189  gap: 6px;4190  font-size: 10.5px;4191  color: rgba(220, 80, 60, 0.85);4192  line-height: 1.55;4193}4194.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }4195.peach-snapshot-confirm-row {4196  display: flex;4197  gap: 6px;4198  align-items: center;4199}4200.peach-snapshot-restore-btn {4201  width: 100%;4202}4203.peach-lock-hero--unlock .peach-lock-hero-art {4204  width: 112px;4205  height: 112px;4206  right: 0;4207  top: 2px;4208  opacity: 0.1;4209}42104211.peach-card {4212  border: 1px solid var(--peach-t3);4213  border-radius: 18px;4214  background:4215    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4216  box-shadow:4217    inset 0 0 0 1px var(--peach-border-accent),4218    inset 0 1px 0 rgba(240, 232, 216, 0.04),4219    0 12px 32px rgba(0, 0, 0, 0.14);4220  overflow: hidden;4221}42224223.peach-card-active {4224  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4225  box-shadow:4226    inset 0 1px 0 rgba(240, 232, 216, 0.05),4227    0 16px 38px rgba(0, 0, 0, 0.18),4228    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4229}42304231.peach-card-disabled {4232  opacity: 0.72;4233}42344235.peach-card-header {4236  width: 100%;4237  padding: 13px 16px 11px;4238  background: transparent;4239  color: var(--peach-t0);4240  display: flex;4241  justify-content: space-between;4242  align-items: center;4243  text-align: left;4244  font-size: 0.75rem;4245}42464247.peach-card-body {4248  padding: 0 16px 16px;4249  display: grid;4250  gap: 9px;4251}42524253.peach-card-tag {4254  color: var(--peach-t2);4255  font-family: "IBM Plex Mono", monospace;4256  font-size: 0.5625rem;4257  letter-spacing: 0.12em;4258  text-transform: uppercase;4259}42604261.peach-empty-copy {4262  display: grid;4263  gap: 6px;4264  color: var(--peach-t1);4265  font-size: 0.8125rem;4266}42674268.peach-lock-submit {4269  width: 100%;4270  box-shadow:4271    0 1px 0 rgba(255,255,255,0.10) inset,4272    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4273    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4274    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4275}42764277.peach-lock-secondary {4278  width: 100%;4279  border-color: var(--peach-t3);4280  background: rgba(240, 232, 216, 0.02);4281}42824283.peach-lock-secondary:hover {4284  background: rgba(240, 232, 216, 0.04);4285}42864287.peach-lock-note {4288  max-width: none;4289  line-height: 1.55;4290  margin: 0;4291}42924293.peach-overlay-action {4294  font-size: 0.625rem;4295  padding: 4px 8px;4296  letter-spacing: 0.06em;4297  min-width: 44px;4298  text-align: center;4299}43004301.peach-inline-action {4302  flex-shrink: 0;4303  font-size: 0.5625rem;4304  letter-spacing: 0.1em;4305  text-transform: uppercase;4306  padding: 4px 7px;4307}4308.peach-password-toggle-btn {4309  display: inline-flex;4310  align-items: center;4311  justify-content: center;4312  min-width: 30px;4313  min-height: 26px;4314  padding: 0 7px;4315  border: 1px solid var(--peach-t3);4316  border-radius: 999px;4317  background: rgba(240, 232, 216, 0.04);4318  color: var(--peach-t2);4319  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4320}4321.peach-password-toggle-btn:hover {4322  border-color: var(--peach-t2);4323  color: var(--peach-t0);4324  background: rgba(240, 232, 216, 0.06);4325}43264327.peach-new-textarea {4328  width: 100%;4329  min-height: 88px;4330  resize: vertical;4331  border: 0;4332  outline: none;4333  background: transparent;4334  color: var(--peach-t1);4335  font-family: "IBM Plex Mono", monospace;4336  font-size: 0.75rem;4337  line-height: 1.65;4338  caret-color: var(--peach-accent);4339}43404341.peach-new-textarea::placeholder {4342  color: var(--peach-t2);4343  opacity: 0.7;4344}43454346.peach-settings-actions {4347  display: grid;4348  gap: 8px;4349}43504351.peach-sync-section-label {4352  font-size: 0.6875rem;4353  color: var(--peach-t2);4354  text-transform: uppercase;4355  letter-spacing: 0.05em;4356}43574358.peach-sync-network-note {4359  margin: 0 0 6px;4360  font-size: 0.75rem;4361  color: var(--peach-t2);4362  line-height: 1.4;4363}43644365.peach-settings-row--tappable {4366  background: none;4367  border: none;4368  width: 100%;4369  text-align: left;4370  cursor: pointer;4371  color: var(--peach-t1);4372  font-size: 0.8125rem;4373}4374.peach-settings-row--tappable:hover {4375  color: var(--peach-t0);4376}43774378.peach-sync-pro-hint {4379  display: flex;4380  flex-direction: column;4381  align-items: flex-start;4382  gap: 8px;4383  padding: 12px 0 4px;4384}43854386.peach-sync-device-row {4387  display: flex;4388  justify-content: space-between;4389  align-items: center;4390  padding: 6px 0;4391  border-bottom: 1px solid var(--peach-t3);4392}43934394.peach-sync-device-info {4395  display: flex;4396  flex-direction: column;4397  gap: 2px;4398}43994400.peach-sync-device-name {4401  font-size: 0.8125rem;4402  color: var(--peach-t0);4403}44044405.peach-sync-device-meta {4406  font-size: 0.6875rem;4407  color: var(--peach-t2);4408}44094410.peach-sync-status-dot {4411  display: inline-block;4412  width: 8px;4413  height: 8px;4414  border-radius: 50%;4415  vertical-align: middle;4416}44174418.peach-sync-remove-btn {4419  color: var(--peach-breach);4420}44214422.peach-sync-advanced-row {4423  display: flex;4424  justify-content: space-between;4425  align-items: center;4426  padding: 6px 0;4427  gap: 12px;4428}44294430.peach-sync-advanced-info {4431  display: flex;4432  flex-direction: column;4433  gap: 2px;4434  flex: 1;4435}44364437.peach-sync-advanced-name {4438  font-size: 0.8125rem;4439  color: var(--peach-t0);4440}44414442.peach-sync-reset-confirm {4443  display: flex;4444  flex-direction: column;4445  gap: 8px;4446  padding: 10px;4447  border: 1px solid var(--peach-breach);4448  border-radius: 10px;4449  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4450}44514452.peach-sync-reset-confirm-headline {4453  font-size: 0.8125rem;4454  font-weight: 600;4455  color: var(--peach-t0);4456  margin: 0;4457}44584459.peach-sync-reset-confirm-body {4460  font-size: 0.75rem;4461  color: var(--peach-t1);4462  margin: 0;4463  line-height: 1.4;4464}44654466.peach-btn--danger {4467  background: var(--peach-breach);4468  color: #fff;4469  border-color: var(--peach-breach);4470}4471.peach-btn--danger:hover:not(:disabled) {4472  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4473}4474.peach-btn--danger:disabled {4475  opacity: 0.55;4476  cursor: not-allowed;4477}44784479.peach-sync-hero-icon {4480  color: var(--peach-t1);4481  opacity: 0.85;4482}44834484.peach-import-preview {4485  margin-bottom: 12px;4486  max-height: 152px;4487  overflow-y: auto;4488  border: 1px solid var(--peach-t3);4489  border-radius: 10px;4490  padding: 8px 10px;4491  display: grid;4492  gap: 8px;4493  background: rgba(240, 232, 216, 0.02);4494}44954496.peach-import-preview-row {4497  display: flex;4498  justify-content: space-between;4499  gap: 10px;4500  font-size: 0.6875rem;4501  color: var(--peach-t1);4502}45034504.peach-import-preview-title {4505  color: var(--peach-t0);4506  flex: 1;4507  min-width: 0;4508  overflow: hidden;4509  text-overflow: ellipsis;4510  white-space: nowrap;4511}45124513.peach-import-preview-meta {4514  color: var(--peach-t2);4515  flex-shrink: 0;4516  max-width: 42%;4517  overflow: hidden;4518  text-overflow: ellipsis;4519  white-space: nowrap;4520}45214522.peach-import-preview-more {4523  color: var(--peach-t2);4524  font-size: 0.625rem;4525}45264527.peach-restore-copy {4528  margin: 0;4529  color: var(--peach-t1);4530  font-size: 0.6875rem;4531  line-height: 1.6;4532}45334534.peach-restore-warning {4535  padding: 10px 12px;4536  border-radius: 12px;4537  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4538  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4539  color: var(--peach-t0);4540  font-size: 0.6875rem;4541  line-height: 1.55;4542}45434544.peach-provider-chips {4545  display: flex;4546  flex-wrap: wrap;4547  gap: 6px;4548}45494550.peach-provider-chip {4551  display: inline-flex;4552  align-items: center;4553  padding: 5px 8px;4554  border-radius: 999px;4555  border: 1px solid var(--peach-t3);4556  background: rgba(240, 232, 216, 0.02);4557  color: var(--peach-t1);4558  font-family: "IBM Plex Mono", monospace;4559  font-size: 0.5rem;4560  letter-spacing: 0.08em;4561  text-transform: uppercase;4562}45634564.peach-restore-file,4565.peach-restore-input {4566  width: 100%;4567  border-radius: 10px;4568  border: 1px solid var(--peach-t3);4569  background: var(--peach-s2);4570  color: var(--peach-t0);4571  font-size: 0.75rem;4572}45734574.peach-restore-file {4575  padding: 9px 10px;4576}45774578.peach-restore-file::file-selector-button {4579  margin-right: 10px;4580  padding: 7px 10px;4581  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4582  border-radius: 999px;4583  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4584  color: var(--peach-t0);4585  font-size: 0.625rem;4586  letter-spacing: 0.08em;4587  text-transform: uppercase;4588  cursor: pointer;4589}45904591.peach-restore-input {4592  padding: 10px 12px;4593}45944595.peach-auth-grid {4596  display: grid;4597  gap: 10px;4598}45994600.peach-import-summary {4601  color: var(--peach-t1);4602  font-size: 0.75rem;4603  line-height: 1.6;4604  margin-bottom: 12px;4605}46064607.peach-restore-error {4608  color: rgba(220, 80, 60, 0.95);4609  font-size: 0.75rem;4610  line-height: 1.55;4611}46124613.peach-passkey-card {4614  max-width: 400px;4615  margin: auto 16px;4616  align-self: center;4617  width: calc(100% - 32px);4618}46194620/* Center the approval card vertically inside the overlay-view (which sets4621 * flex-direction: column without justify-content). Without this, the card4622 * sits at the top with a tall empty band below — looks unfinished on the4623 * 320px popup. */4624.peach-overlay-view:has(.peach-passkey-card) {4625  justify-content: center;4626}46274628.peach-pro-badge {4629  padding: 2px 6px;4630  border-radius: 999px;4631  font-family: var(--font-ui);4632  font-size: 0.625rem;4633  letter-spacing: 0.08em;4634  text-transform: uppercase;4635  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4636  color: var(--peach-accent);4637}46384639/* ── Shortcuts rebind table ─────────────────────────────────── */4640.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4641.peach-shortcut-row {4642  display: flex;4643  align-items: center;4644  gap: 10px;4645  padding: 6px 0;4646}4647.peach-shortcut-row-label {4648  flex: 1;4649  font-size: 0.75rem;4650  color: var(--peach-t0);4651}4652.peach-shortcut-chip {4653  min-width: 64px;4654  padding: 4px 10px;4655  border-radius: 6px;4656  border: 1px solid var(--peach-t3);4657  background: var(--peach-input-bg, var(--surface-card));4658  color: var(--peach-t0);4659  font-family: var(--font-mono);4660  font-size: 0.6875rem;4661  letter-spacing: 0.04em;4662  cursor: pointer;4663  text-align: center;4664  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4665}4666.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4667.peach-shortcut-chip.is-custom {4668  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4669  color: var(--peach-accent);4670}4671.peach-shortcut-chip.is-capturing {4672  border-color: var(--peach-accent);4673  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4674  color: var(--peach-accent);4675  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4676}4677@keyframes peach-shortcut-capture-pulse {4678  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4679  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4680}4681.peach-shortcut-reset {4682  background: transparent;4683  border: none;4684  cursor: pointer;4685  color: var(--peach-t2);4686  padding: 4px 6px;4687  border-radius: 5px;4688  font-size: 0.875rem;4689  line-height: 1;4690  transition: color 120ms ease, background 120ms ease;4691}4692.peach-shortcut-reset:hover {4693  color: var(--peach-t0);4694  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4695}4696.peach-shortcuts-conflict {4697  margin: 4px 0 0;4698  padding: 8px 10px;4699  border-radius: 7px;4700  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4701  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4702  font-family: var(--font-mono);4703  font-size: 0.6875rem;4704  color: var(--peach-t0);4705}47064707/* ── Help dialog overlay (? to open) ────────────────────────── */4708.peach-shortcuts-help-backdrop {4709  position: fixed;4710  inset: 0;4711  background: rgba(0, 0, 0, 0.55);4712  backdrop-filter: blur(2px);4713  display: flex;4714  align-items: center;4715  justify-content: center;4716  z-index: 1000;4717  animation: peach-help-fade-in 140ms ease forwards;4718}4719@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4720.peach-shortcuts-help-card {4721  width: min(320px, 92vw);4722  max-height: 80vh;4723  overflow-y: auto;4724  border-radius: 14px;4725  border: 1px solid var(--peach-t3);4726  background: var(--peach-bg);4727  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4728  padding: 16px 18px 18px;4729  display: flex;4730  flex-direction: column;4731  gap: 12px;4732}4733.peach-shortcuts-help-head {4734  display: flex; align-items: center; justify-content: space-between;4735}4736.peach-shortcuts-help-head h3 {4737  margin: 0;4738  font-family: var(--font-display);4739  font-style: italic;4740  font-weight: 400;4741  font-size: 22px;4742  color: var(--peach-t0);4743}4744.peach-shortcuts-help-close {4745  background: transparent;4746  border: none;4747  color: var(--peach-t2);4748  cursor: pointer;4749  font-size: 0.875rem;4750  padding: 4px 8px;4751  border-radius: 5px;4752}4753.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4754.peach-shortcuts-help-body ul {4755  list-style: none; padding: 0; margin: 4px 0 12px;4756  display: grid; gap: 8px;4757}4758.peach-shortcuts-help-body li {4759  display: flex; align-items: center; justify-content: space-between; gap: 12px;4760  font-size: 0.75rem; color: var(--peach-t0);4761}4762.peach-shortcuts-help-body kbd {4763  font-family: var(--font-mono);4764  font-size: 0.6875rem;4765  padding: 3px 8px;4766  border-radius: 6px;4767  background: var(--surface-card);4768  border: 1px solid var(--peach-t3);4769  color: var(--peach-accent);4770  letter-spacing: 0.04em;4771}47724773/* ── Pro promo on Account screen ────────────────────────────── */4774.peach-pro-promo {4775  position: relative;4776  border-radius: 14px;4777  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4778  background:4779    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4780    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4781    var(--surface-card);4782  overflow: hidden;4783  margin-bottom: 14px;4784}4785.peach-pro-promo-glow {4786  position: absolute;4787  inset: -40% -20% auto auto;4788  width: 220px; height: 220px;4789  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4790  pointer-events: none;4791  filter: blur(8px);4792}4793.peach-pro-promo-inner {4794  position: relative;4795  padding: 18px 18px 16px;4796}4797.peach-pro-promo-title {4798  font-family: var(--font-display);4799  font-style: italic;4800  font-weight: 400;4801  font-size: 28px;4802  line-height: 1;4803  letter-spacing: -0.005em;4804  color: var(--peach-t0);4805  margin: 0 0 4px;4806}4807.peach-pro-promo-tagline {4808  font-family: var(--font-mono);4809  font-size: 0.625rem;4810  letter-spacing: 0.06em;4811  color: var(--peach-t2);4812  margin: 0 0 14px;4813}4814.peach-pro-promo-list {4815  list-style: none;4816  margin: 0 0 16px;4817  padding: 0;4818  display: grid;4819  gap: 9px;4820}4821.peach-pro-promo-list li {4822  display: flex;4823  align-items: flex-start;4824  gap: 9px;4825  font-size: 0.75rem;4826  color: var(--peach-t1);4827  line-height: 1.4;4828}4829.peach-pro-promo-list svg {4830  width: 14px;4831  height: 14px;4832  flex-shrink: 0;4833  color: var(--peach-accent);4834  margin-top: 2px;4835}4836.peach-pro-promo-list span {4837  color: var(--peach-t0);4838}4839.peach-pro-promo-cta {4840  width: 100%;4841  background: var(--peach-accent);4842  color: #fff;4843  border: none;4844  padding: 9px 12px;4845  border-radius: 9px;4846  font-size: 0.75rem;4847  font-weight: 500;4848  font-family: var(--font-ui);4849  letter-spacing: 0.02em;4850  text-decoration: none;4851  display: inline-flex;4852  align-items: center;4853  justify-content: center;4854  cursor: pointer;4855  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4856  box-shadow: 0 2px 16px var(--peach-glow);4857}4858.peach-pro-promo-cta:hover {4859  filter: brightness(1.07);4860  box-shadow: 0 4px 24px var(--peach-glow);4861  transform: translateY(-1px);4862}4863.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }48644865.peach-pro-or-divider {4866  display: flex;4867  align-items: center;4868  gap: 10px;4869  margin: 4px 0 12px;4870  font-family: var(--font-mono);4871  font-size: 0.625rem;4872  letter-spacing: 0.06em;4873  color: var(--peach-t2);4874  text-transform: uppercase;4875}4876.peach-pro-or-divider::before,4877.peach-pro-or-divider::after {4878  content: "";4879  flex: 1;4880  height: 1px;4881  background: var(--peach-t3);4882}48834884.peach-loading {4885  position: absolute;4886  inset: 0;4887  display: flex;4888  align-items: center;4889  justify-content: center;4890  background: var(--bg);4891  animation: peach-loading-pulse 1.2s ease-in-out infinite;4892}48934894@keyframes peach-loading-pulse {4895  0%, 100% { opacity: 0.6; }4896  50% { opacity: 1; }4897}48984899/* ── Health Dashboard ─────────────────────────────────────────────────── */4900.peach-health-body {4901  flex: 1;4902  overflow-y: auto;4903  display: flex;4904  flex-direction: column;4905  /* Hide the platform scrollbar — every other scrollable surface in the4906   * popup hides it; the Health view was the one outlier and it ruined the4907   * polish. Behavior unchanged, just no rail rendered. */4908  scrollbar-width: none;4909  -ms-overflow-style: none;4910}4911.peach-health-body::-webkit-scrollbar { display: none; }49124913/* Loading screen for the Vault Health view. The advanced report computation4914 * can run for a few seconds on a large vault — without a clear loading4915 * screen the surface looked broken (the entry view bleeds through the4916 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4917.peach-health-loading-screen {4918  flex: 1;4919  display: flex;4920  flex-direction: column;4921  align-items: center;4922  justify-content: center;4923  gap: 14px;4924  padding: 32px 28px;4925  text-align: center;4926}49274928.peach-health-loading-glyph {4929  width: 48px;4930  height: 48px;4931  display: flex;4932  align-items: center;4933  justify-content: center;4934  border-radius: 14px;4935  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4936  color: var(--peach-accent);4937}49384939.peach-health-loading-title {4940  margin: 0;4941  font-family: var(--font-display);4942  font-style: italic;4943  font-weight: 300;4944  font-size: 19px;4945  line-height: 1.2;4946  color: var(--peach-t0);4947}49484949.peach-health-loading-copy {4950  margin: 0;4951  max-width: 240px;4952  font-size: 0.75rem;4953  line-height: 1.55;4954  color: var(--peach-t2);4955}49564957.peach-health-loading-track {4958  width: 200px;4959  height: 3px;4960  margin-top: 6px;4961  border-radius: 999px;4962  background: rgba(240, 232, 216, 0.06);4963  overflow: hidden;4964}49654966.peach-health-loading-fill {4967  width: 40%;4968  height: 100%;4969  border-radius: inherit;4970  background: linear-gradient(4971    90deg,4972    transparent 0%,4973    var(--peach-accent) 50%,4974    transparent 100%4975  );4976  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4977}49784979@keyframes peach-health-loading-sweep {4980  0%   { transform: translateX(-100%); }4981  100% { transform: translateX(350%); }4982}49834984[data-motion="reduce"] .peach-health-loading-fill,4985[data-motion="reduce"] .peach-health-loading-glyph svg path {4986  animation: none;4987}49884989.peach-health-summary {4990  padding: 10px 16px 6px;4991  font-family: "IBM Plex Mono", monospace;4992  font-size: 0.6875rem;4993}4994.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4995.peach-health-summary-ok { color: var(--peach-t2); }49964997.peach-health-check-row {4998  padding: 0 16px 10px;4999}5000.peach-health-check-btn {5001  width: 100%;5002  display: flex;5003  align-items: center;5004  justify-content: center;5005}50065007.peach-health-sections {5008  flex: 1;5009  display: flex;5010  flex-direction: column;5011}50125013.peach-health-section {5014  border-bottom: 1px solid var(--peach-t3);5015}50165017.peach-health-section-header {5018  width: 100%;5019  display: flex;5020  align-items: center;5021  justify-content: space-between;5022  padding: 9px 16px;5023  background: transparent;5024  cursor: pointer;5025  color: var(--peach-t0);5026}50275028.peach-health-section-title-row {5029  display: flex;5030  align-items: center;5031  gap: 8px;5032}50335034.peach-health-count-badge {5035  display: inline-flex;5036  align-items: center;5037  justify-content: center;5038  min-width: 20px;5039  height: 18px;5040  padding: 0 5px;5041  border-radius: 999px;5042  background: rgba(220,80,60,0.15);5043  border: 1px solid rgba(220,80,60,0.25);5044  font-family: "IBM Plex Mono", monospace;5045  font-size: 0.5625rem;5046  color: rgba(220,80,60,0.9);5047}50485049.peach-health-section-title {5050  font-family: "IBM Plex Mono", monospace;5051  font-size: 0.6875rem;5052  text-transform: uppercase;5053  letter-spacing: 0.1em;5054  color: var(--peach-t1);5055}50565057.peach-health-chevron {5058  color: var(--peach-t2);5059  transition: transform 200ms ease;5060  flex-shrink: 0;5061}5062.peach-health-chevron.is-expanded {5063  transform: rotate(180deg);5064}50655066.peach-health-section-body {5067  padding: 0 16px 10px;5068  display: flex;5069  flex-direction: column;5070  gap: 4px;5071}50725073.peach-health-row {5074  display: flex;5075  align-items: flex-start;5076  justify-content: space-between;5077  gap: 8px;5078  padding: 6px 8px;5079  border-radius: 8px;5080  background: rgba(240,232,216,0.02);5081}50825083.peach-health-row-info {5084  flex: 1;5085  min-width: 0;5086  display: flex;5087  flex-direction: column;5088  gap: 2px;5089}50905091.peach-health-row-name {5092  font-family: var(--font-display);5093  font-size: 0.9375rem;5094  font-style: italic;5095  font-weight: 400;5096  color: var(--peach-t0);5097  white-space: nowrap;5098  overflow: hidden;5099  text-overflow: ellipsis;5100}51015102.peach-health-row-meta {5103  font-family: "IBM Plex Mono", monospace;5104  font-size: 0.5625rem;5105  color: var(--peach-t2);5106  letter-spacing: 0.05em;5107}51085109.peach-health-fix-btn {5110  font-size: 0.5625rem;5111  letter-spacing: 0.08em;5112  text-transform: uppercase;5113  padding: 4px 7px;5114  flex-shrink: 0;5115  display: flex;5116  align-items: center;5117}51185119.peach-health-empty {5120  font-family: "IBM Plex Mono", monospace;5121  font-size: 0.625rem;5122  color: var(--peach-t2);5123  padding: 6px 0;5124}51255126.peach-health-loading {5127  font-family: "IBM Plex Mono", monospace;5128  font-size: 0.625rem;5129  color: var(--peach-t2);5130  padding: 6px 0;5131  display: flex;5132  align-items: center;5133  gap: 6px;5134}51355136.peach-health-loading::before {5137  content: "";5138  width: 10px;5139  height: 10px;5140  border: 1.5px solid var(--peach-t3);5141  border-top-color: var(--peach-accent);5142  border-radius: 50%;5143  animation: peach-spin 600ms linear infinite;5144}51455146@keyframes peach-spin {5147  to { transform: rotate(360deg); }5148}51495150.peach-spinner {5151  width: 32px;5152  height: 32px;5153  border: 2px solid var(--peach-s2);5154  border-top-color: var(--peach-accent);5155  border-radius: 50%;5156  margin: 0 auto 16px;5157  animation: peach-spin 0.8s linear infinite;5158}51595160.peach-progress-screen {5161  text-align: center;5162  padding: 32px 16px;5163}51645165.peach-progress-screen-title {5166  font-size: 0.8125rem;5167  color: var(--peach-t0);5168  margin-bottom: 16px;5169}51705171.peach-progress-screen-stage {5172  font-size: 0.6875rem;5173  color: var(--peach-t2);5174  min-height: 14px;5175}51765177.peach-progress-screen-note {5178  font-size: 0.625rem;5179  color: var(--peach-t2);5180  margin-top: 8px;5181}51825183.peach-pairing-body {5184  flex: 1;5185  overflow-y: auto;5186  display: flex;5187  flex-direction: column;5188}51895190.peach-pairing-content {5191  flex: 1;5192  display: flex;5193  flex-direction: column;5194  align-items: center;5195  justify-content: center;5196  gap: 14px;5197  padding: 28px 20px;5198  text-align: center;5199}52005201.peach-pairing-code-screen {5202  gap: 18px;5203}52045205.peach-pairing-headline {5206  font-family: var(--font-display);5207  font-style: italic;5208  font-weight: 300;5209  font-size: 28px;5210  color: var(--peach-t0);5211  margin: 0;5212  line-height: 1;5213}52145215.peach-pairing-subline {5216  font-size: 0.75rem;5217  color: var(--peach-t2);5218  max-width: 220px;5219  line-height: 1.5;5220  margin: 0;5221}52225223.peach-pairing-subline--center {5224  text-align: center;5225}52265227/* 6-digit pairing code — both display (.peach-pairing-code) and entry5228   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking5229   so the two modes feel like the same surface. */5230.peach-pairing-code {5231  font-family: "IBM Plex Mono", monospace;5232  font-size: 36px;5233  letter-spacing: 0.25em;5234  color: var(--peach-t0);5235  text-align: center;5236  padding: 24px 0;5237  text-shadow:5238    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),5239    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);5240  background: transparent;5241  border: 0;5242  cursor: default;5243  user-select: text;5244}52455246.peach-pairing-code--loading,5247.peach-pairing-code--expired {5248  font-size: 18px;5249  letter-spacing: 0.04em;5250  color: var(--peach-t2);5251  cursor: pointer;5252  text-shadow: none;5253}52545255.peach-pairing-qr-container {5256  display: flex;5257  flex-direction: column;5258  align-items: center;5259  gap: 10px;5260}52615262.peach-pairing-qr {5263  width: 240px;5264  height: 240px;5265  display: block;5266}52675268.peach-pairing-instruction {5269  font-size: 0.75rem;5270  color: var(--peach-t2);5271  text-align: center;5272  line-height: 1.5;5273  margin: 0;5274  max-width: 220px;5275}52765277.peach-pairing-expiry {5278  font-family: "IBM Plex Mono", monospace;5279  font-size: 13px;5280  letter-spacing: 0.06em;5281  color: var(--peach-t2);5282  margin: 0;5283}52845285.peach-pairing-regen {5286  font-size: 0.75rem;5287  color: var(--peach-accent);5288  background: transparent;5289  border: 0;5290  cursor: pointer;5291  padding: 4px 0;5292  text-decoration: underline;5293  text-underline-offset: 2px;5294}52955296.peach-pairing-code-input {5297  font-family: "IBM Plex Mono", monospace;5298  font-size: 36px;5299  letter-spacing: 0.25em;5300  color: var(--peach-t0);5301  background: transparent;5302  border: 0;5303  border-bottom: 1px solid var(--peach-t3);5304  outline: none;5305  text-align: center;5306  padding: 18px 0;5307  width: 220px;5308  caret-color: var(--peach-accent);5309  transition: border-color 160ms ease;5310}53115312.peach-pairing-code-input::placeholder {5313  color: var(--peach-t3);5314}53155316.peach-pairing-code-input:focus {5317  border-bottom-color: var(--peach-accent);5318}53195320.peach-pairing-toggle {5321  background: transparent;5322  border: 0;5323  color: var(--peach-t2);5324  font-size: 0.75rem;5325  padding: 8px 4px;5326  cursor: pointer;5327  transition: color 120ms ease;5328}53295330.peach-pairing-toggle:hover:not(:disabled) {5331  color: var(--peach-t1);5332}53335334.peach-pairing-toggle:disabled {5335  opacity: 0.5;5336  cursor: default;5337}53385339.peach-pairing-hint {5340  font-size: 0.6875rem;5341  color: var(--peach-t2);5342  margin: 0;5343  text-align: center;5344}53455346.peach-pairing-status {5347  display: flex;5348  align-items: center;5349  gap: 8px;5350  margin: 0;5351  font-size: 0.75rem;5352  color: var(--peach-t1);5353}53545355.peach-pairing-error {5356  margin: 0;5357  font-size: 0.6875rem;5358  color: var(--peach-breach);5359}53605361.peach-pairing-error--muted {5362  color: var(--peach-t2);5363}53645365.peach-pairing-spinner {5366  width: 12px;5367  height: 12px;5368  border: 1.5px solid var(--peach-t3);5369  border-top-color: var(--peach-accent);5370  border-radius: 50%;5371  animation: peach-spin 0.8s linear infinite;5372}53735374.peach-pairing-success-icon,5375.peach-pairing-error-icon,5376.peach-pairing-hero {5377  display: inline-flex;5378  align-items: center;5379  justify-content: center;5380}53815382/* Tag chips */5383.peach-tag-chip {5384  display: inline-flex;5385  align-items: center;5386  gap: 4px;5387  padding: 3px 8px;5388  border-radius: 999px;5389  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5390  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5391  color: var(--peach-t0);5392  font-family: "IBM Plex Mono", monospace;5393  font-size: 0.625rem;5394  letter-spacing: 0.04em;5395}53965397.peach-tag-chip-remove {5398  background: transparent;5399  border: none;5400  color: inherit;5401  opacity: 0.6;5402  cursor: pointer;5403  padding: 0;5404  font-size: 0.75rem;5405  line-height: 1;5406}54075408.peach-tag-chip-remove:hover {5409  opacity: 1;5410}54115412/* Tag input */5413.peach-tag-input-wrap {5414  border-bottom: 1px solid var(--peach-t3);5415}54165417.peach-tag-suggestions {5418  display: flex;5419  flex-wrap: wrap;5420  gap: 4px;5421  padding: 6px 0;5422}54235424.peach-tag-suggestion {5425  padding: 2px 8px;5426  border-radius: 999px;5427  border: 1px solid var(--peach-t3);5428  background: var(--peach-s2);5429  color: var(--peach-t1);5430  font-family: "IBM Plex Mono", monospace;5431  font-size: 0.625rem;5432  cursor: pointer;5433  transition: border-color 80ms ease, background 80ms ease;5434}54355436.peach-tag-suggestion:hover {5437  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5438  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5439}54405441/* Identity suggestions — shown below username/email inputs in new-entry form */5442@keyframes peach-suggest-in {5443  from { opacity: 0; transform: translateY(-4px); }5444  to   { opacity: 1; transform: none; }5445}54465447.peach-identity-suggestions {5448  display: flex;5449  flex-direction: column;5450  gap: 1px;5451  margin-top: 4px;5452  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5453}54545455.peach-identity-filter-row {5456  display: flex;5457  align-items: center;5458  gap: 4px;5459  padding: 2px 0 5px;5460}54615462.peach-identity-collapse-btn {5463  margin-left: auto;5464  background: transparent;5465  border: none;5466  cursor: pointer;5467  color: var(--peach-t3);5468  padding: 2px 4px;5469  display: flex;5470  align-items: center;5471  line-height: 0;5472  border-radius: 3px;5473  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5474}54755476.peach-identity-collapse-btn:hover {5477  color: var(--peach-t1);5478}54795480.peach-identity-collapse-btn.is-collapsed {5481  transform: rotate(-90deg);5482}54835484.peach-identity-rows {5485  display: grid;5486  grid-template-rows: 1fr;5487  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5488}54895490.peach-identity-rows.is-collapsed {5491  grid-template-rows: 0fr;5492}54935494.peach-identity-rows-inner {5495  overflow-y: auto;5496  min-height: 0;5497  max-height: 148px;5498  scrollbar-width: thin;5499  scrollbar-color: var(--peach-t3) transparent;5500  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5501  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5502}55035504.peach-identity-rows-inner::-webkit-scrollbar {5505  width: 4px;5506}55075508.peach-identity-rows-inner::-webkit-scrollbar-track {5509  background: transparent;5510}55115512.peach-identity-rows-inner::-webkit-scrollbar-thumb {5513  background: var(--peach-t3);5514  border-radius: 2px;5515}55165517.peach-identity-filter-pill {5518  padding: 2px 7px;5519  border-radius: 999px;5520  border: 1px solid var(--peach-t3);5521  background: transparent;5522  color: var(--peach-t2);5523  font-family: "IBM Plex Mono", monospace;5524  font-size: 0.6rem;5525  cursor: pointer;5526  transition: border-color 80ms, background 80ms, color 80ms;5527}55285529.peach-identity-filter-pill.is-on {5530  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5531  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5532  color: var(--peach-accent);5533}55345535.peach-identity-suggestion {5536  display: flex;5537  align-items: center;5538  gap: 6px;5539  width: 100%;5540  padding: 4px 6px;5541  border-radius: 5px;5542  border: none;5543  background: transparent;5544  cursor: pointer;5545  text-align: left;5546  transition: background 80ms ease;5547}55485549.peach-identity-suggestion:hover,5550.peach-identity-suggestion:focus {5551  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5552  outline: none;5553}55545555.peach-identity-suggestion-value {5556  font-family: "IBM Plex Mono", monospace;5557  font-size: 0.7rem;5558  color: var(--peach-t1);5559  overflow: hidden;5560  text-overflow: ellipsis;5561  white-space: nowrap;5562  flex: 1;5563  min-width: 0;5564}55655566.peach-identity-suggestion-type {5567  font-family: "IBM Plex Mono", monospace;5568  font-size: 0.55rem;5569  font-weight: 600;5570  flex-shrink: 0;5571  padding: 1px 4px;5572  border-radius: 3px;5573}55745575.peach-identity-suggestion-type--email {5576  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5577  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5578}55795580.peach-identity-suggestion-type--username {5581  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5582  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5583}55845585.peach-identity-suggestion-meta {5586  font-family: "IBM Plex Mono", monospace;5587  font-size: 0.6rem;5588  color: var(--peach-t3);5589  flex-shrink: 0;5590}55915592/* Tag filter strip */5593.peach-tag-filter-strip {5594  border-bottom: 1px solid var(--peach-t3);5595  flex-shrink: 0;5596}55975598.peach-tag-filter-chip {5599  display: inline-flex;5600  align-items: center;5601  padding: 4px 10px;5602  border-radius: 999px;5603  border: 1px solid var(--peach-t3);5604  background: transparent;5605  color: var(--peach-t2);5606  font-family: "IBM Plex Mono", monospace;5607  font-size: 0.5625rem;5608  letter-spacing: 0.06em;5609  text-transform: uppercase;5610  cursor: pointer;5611  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5612  white-space: nowrap;5613}56145615.peach-tag-filter-chip:hover {5616  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5617  color: var(--peach-t1);5618}56195620.peach-tag-filter-chip.is-selected {5621  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5622  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5623  color: var(--peach-t0);5624}56255626/* ─────────────────────────────────────────────────────────────────────────5627   v1.4.12 additions5628   ─────────────────────────────────────────────────────────────────────── */56295630/* Sort bar */5631.peach-sort-bar {5632  display: flex;5633  align-items: center;5634  gap: 4px;5635  padding: 5px 12px;5636  border-bottom: 1px solid var(--peach-t3);5637  flex-shrink: 0;5638  overflow-x: auto;5639  scrollbar-width: none;5640}56415642.peach-sort-btn {5643  padding: 2px 9px;5644  border-radius: 999px;5645  border: 1px solid transparent;5646  background: transparent;5647  color: var(--peach-t2);5648  font-family: "IBM Plex Mono", monospace;5649  font-size: 0.5625rem;5650  letter-spacing: 0.07em;5651  text-transform: uppercase;5652  cursor: pointer;5653  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5654  white-space: nowrap;5655}56565657.peach-sort-btn:hover {5658  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5659  color: var(--peach-t1);5660}56615662.peach-sort-btn.is-active {5663  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5664  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5665  color: var(--peach-t0);5666}56675668.peach-sort-scope-btn {5669  padding-inline: 8px;5670  font-size: 0.53125rem;5671  letter-spacing: 0.05em;5672}56735674.peach-sort-domain-hint {5675  margin-left: auto;5676  font-family: "IBM Plex Mono", monospace;5677  font-size: 0.5625rem;5678  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5679  white-space: nowrap;5680  overflow: hidden;5681  text-overflow: ellipsis;5682  max-width: 110px;5683}56845685/* Tab-match badge on entry rows */5686.peach-tab-match-badge {5687  display: inline-block;5688  width: 6px;5689  height: 6px;5690  border-radius: 50%;5691  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5692  margin-left: 5px;5693  vertical-align: middle;5694  flex-shrink: 0;5695  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5696}56975698.peach-entry-row.is-tab-match {5699  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5700  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5701}57025703.peach-entry-row.is-tab-match:hover {5704  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5705}57065707/* Entry list stagger entrance */5708@keyframes peach-entry-fadein {5709  from { opacity: 0; transform: translateY(4px); }5710  to   { opacity: 1; transform: translateY(0); }5711}57125713.peach-vault-list .peach-entry-row {5714  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5715}57165717/* Button press micro-interaction */5718.peach-btn:active {5719  transform: scale(0.95);5720  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5721}57225723.peach-sort-btn:active,5724.peach-tag-filter-chip:active {5725  transform: scale(0.93);5726  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5727}57285729/* Password strength bar (Lock view + shared) */5730.peach-password-strength {5731  display: flex;5732  align-items: center;5733  gap: 8px;5734  margin-top: 6px;5735}57365737.peach-strength-bar {5738  flex: 1;5739  height: 3px;5740  border-radius: 2px;5741  background: var(--peach-t3);5742  overflow: hidden;5743}57445745.peach-strength-fill {5746  height: 100%;5747  border-radius: 2px;5748  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5749              background 300ms ease;5750}57515752.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5753.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5754.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5755.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }57565757.peach-strength-label {5758  font-family: "IBM Plex Mono", monospace;5759  font-style: italic;5760  font-size: 0.5625rem;5761  font-weight: 300;5762  letter-spacing: 0.06em;5763  color: var(--peach-t2);5764  min-width: 36px;5765  text-align: right;5766}57675768.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5769.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5770.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5771.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }57725773/* Duress form */5774.peach-duress-status {5775  padding: 2px 8px;5776  border-radius: 999px;5777  border: 1px solid var(--peach-t3);5778  font-family: "IBM Plex Mono", monospace;5779  font-size: 0.5625rem;5780  letter-spacing: 0.07em;5781  text-transform: uppercase;5782  color: var(--peach-t2);5783  flex-shrink: 0;5784}57855786.peach-duress-status.is-active {5787  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5788  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5789  color: var(--peach-t0);5790}57915792.peach-duress-form {5793  padding: 8px 0 4px;5794  display: flex;5795  flex-direction: column;5796  gap: 6px;5797}57985799.peach-duress-form .peach-label {5800  margin-top: 4px;5801}58025803.peach-duress-actions {5804  display: flex;5805  gap: 6px;5806  align-items: center;5807  margin-top: 4px;5808}58095810.peach-duress-actions .peach-btn:first-child {5811  margin-right: auto;5812}58135814/* Improved overlay spring entrance */5815.peach-overlay-view.ov-enter-up {5816  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5817}58185819@keyframes ov-enter-up-spring {5820  from { opacity: 0; transform: translateY(16px) scale(0.98); }5821  to   { opacity: 1; transform: translateY(0) scale(1); }5822}58235824.peach-overlay-view.ov-enter-right {5825  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5826}58275828@keyframes ov-enter-right-spring {5829  from { opacity: 0; transform: translateX(18px) scale(0.98); }5830  to   { opacity: 1; transform: translateX(0) scale(1); }5831}58325833/* ── Onboarding-mode restore screens (file import) ── */5834/* Used when MainImportView renders during onboarding (no vault yet).5835   Animates like a lock-screen transition. */5836.peach-lock-view {5837  position: absolute;5838  inset: 0;5839  display: flex;5840  flex-direction: column;5841  background:5842    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5843    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5844    var(--peach-bg);5845  z-index: 2;5846  overflow: hidden;5847  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5848}58495850.peach-lock-view-header {5851  display: flex;5852  align-items: center;5853  justify-content: space-between;5854  padding: 16px 18px 12px;5855  flex-shrink: 0;5856}58575858/* ───────── Settings: auto-lock select ───────── */5859.peach-settings-select {5860  font-family: "IBM Plex Mono", monospace;5861  font-size: 0.6875rem;5862  background: transparent;5863  border: 1px solid var(--peach-t3);5864  border-radius: 4px;5865  color: var(--peach-t1);5866  padding: 3px 6px;5867  cursor: pointer;5868  outline: none;5869}5870.peach-settings-select:focus {5871  border-color: var(--peach-accent);5872}58735874/* ───────── Duress status pill (new polished) ───────── */5875.peach-duress-status-pill {5876  font-family: "IBM Plex Mono", monospace;5877  font-size: 0.5625rem;5878  text-transform: uppercase;5879  letter-spacing: 0.12em;5880  padding: 2px 8px;5881  border-radius: 12px;5882  background: var(--peach-t3);5883  color: var(--peach-t2);5884  flex-shrink: 0;5885}5886.peach-duress-status-pill.is-active {5887  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5888  color: var(--peach-accent);5889}58905891/* ───────── Entry advanced disclosure (canary) ───────── */5892.peach-entry-advanced {5893  margin-top: 12px;5894  border-top: 1px solid var(--peach-t3);5895  padding-top: 10px;5896  position: relative;5897  z-index: 1;5898}5899.peach-entry-advanced-toggle {5900  display: flex;5901  align-items: center;5902  justify-content: space-between;5903  width: 100%;5904  background: transparent;5905  border: none;5906  cursor: pointer;5907  padding: 0;5908  color: var(--peach-t2);5909}5910.peach-canary-section {5911  margin-top: 10px;5912  display: grid;5913  gap: 6px;5914}59155916/* ───────── Import: merge/replace radio choices ───────── */5917.peach-import-choice {5918  display: flex;5919  align-items: flex-start;5920  gap: 10px;5921  padding: 8px 10px;5922  border: 1px solid var(--peach-t3);5923  border-radius: 10px;5924  cursor: pointer;5925  margin-bottom: 6px;5926  transition: border-color 120ms ease, background 120ms ease;5927}5928.peach-import-choice:hover {5929  border-color: var(--peach-accent);5930}5931.peach-import-choice input[type="radio"] {5932  margin-top: 3px;5933  accent-color: var(--peach-accent);5934  flex-shrink: 0;5935}5936.peach-import-choice-main {5937  display: flex;5938  flex-direction: column;5939  gap: 2px;5940  min-width: 0;5941}5942.peach-import-choice-label {5943  font-size: 0.75rem;5944  color: var(--peach-t0);5945}5946.peach-import-choice-sub {5947  font-size: 0.6875rem;5948  color: var(--peach-t2);5949  line-height: 1.5;5950}59515952/* ───────── Export: success confirmation strip ───────── */5953.peach-export-success {5954  display: flex;5955  align-items: flex-start;5956  gap: 10px;5957  padding: 12px;5958  border-radius: 12px;5959  border: 1px solid rgba(150, 175, 110, 0.3);5960  background: rgba(150, 175, 110, 0.08);5961  color: var(--peach-t0);5962  font-size: 0.75rem;5963  line-height: 1.55;5964}5965.peach-export-success-check {5966  color: rgba(150, 175, 110, 0.9);5967  font-size: 0.875rem;5968  flex-shrink: 0;5969}59705971/* ── Trash view ──────────────────────────────────────────────────────── */5972.peach-trash-entry-row {5973  display: flex;5974  align-items: center;5975  justify-content: space-between;5976  gap: 8px;5977  padding: 8px 0;5978  border-bottom: 1px solid var(--peach-border);5979}5980.peach-trash-entry-info {5981  flex: 1;5982  min-width: 0;5983  display: flex;5984  flex-direction: column;5985  gap: 2px;5986}5987.peach-trash-entry-title {5988  font-size: 0.8125rem;5989  color: var(--peach-t0);5990  overflow: hidden;5991  text-overflow: ellipsis;5992  white-space: nowrap;5993}5994.peach-trash-entry-meta {5995  font-family: var(--font-mono);5996  font-size: 0.5625rem;5997  color: var(--peach-t2);5998  letter-spacing: 0.04em;5999}6000.peach-trash-entry-actions {6001  display: flex;6002  align-items: center;6003  gap: 4px;6004  flex-shrink: 0;6005}6006.peach-trash-delete-btn {6007  background: transparent;6008  border: 0;6009  color: var(--peach-t3);6010  font-size: 1rem;6011  line-height: 1;6012  cursor: pointer;6013  padding: 2px 5px;6014  transition: color 0.15s;6015}6016.peach-trash-delete-btn:hover { color: var(--peach-breach); }6017.peach-trash-list {6018  overflow-y: auto;6019}6020.peach-trash-footer {6021  display: flex;6022  align-items: center;6023  gap: 8px;6024  padding: 8px 0 0;6025  border-top: 1px solid var(--peach-border);6026  margin-top: 4px;6027}6028.peach-trash-purge-all {6029  background: transparent;6030  border: 0;6031  color: var(--peach-t3);6032  font-size: 0.625rem;6033  cursor: pointer;6034  padding: 4px 0;6035  letter-spacing: 0.03em;6036  transition: color 0.2s;6037}6038.peach-trash-purge-all:hover { color: var(--peach-breach); }6039.peach-trash-purge-confirm-label {6040  font-size: 0.625rem;6041  color: var(--peach-t1);6042  flex: 1;6043}60446045/* ── Settings shortcuts grid ─────────────────────────────────────────── */6046.peach-shortcuts-grid {6047  display: grid;6048  grid-template-columns: auto 1fr;6049  gap: 6px 12px;6050  align-items: center;6051  padding: 4px 0;6052}6053.peach-shortcut-key {6054  font-family: var(--font-mono);6055  font-size: 0.625rem;6056  color: var(--peach-t0);6057  background: var(--peach-t3);6058  border-radius: 4px;6059  padding: 2px 6px;6060  white-space: nowrap;6061  text-align: center;6062}6063.peach-shortcut-desc {6064  font-size: 0.6875rem;6065  color: var(--peach-t1);6066}60676068/* ── Sort bar trash button ───────────────────────────────────────────── */6069.peach-sort-trash-btn {6070  display: flex;6071  align-items: center;6072  justify-content: center;6073  padding: 3px 5px;6074  background: transparent;6075  border: none;6076  cursor: pointer;6077  color: var(--peach-t2);6078  border-radius: 4px;6079  transition: color 140ms ease, background 140ms ease;6080}6081.peach-sort-trash-btn:hover {6082  color: var(--peach-t1);6083  background: var(--peach-t3);6084}6085.peach-sort-trash-btn.is-active {6086  color: var(--peach-accent);6087}60886089/* Accent color picker */6090.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }6091.peach-accent-picker {6092  display: flex;6093  flex-wrap: wrap;6094  gap: 7px;6095  padding: 2px 0;6096}6097.peach-accent-swatch {6098  width: 22px;6099  height: 22px;6100  border-radius: 50%;6101  border: 2px solid transparent;6102  cursor: pointer;6103  padding: 0;6104  transition: transform 100ms;6105  outline-offset: 2px;6106}6107.peach-accent-swatch:hover { transform: scale(1.15); }6108.peach-accent-swatch.is-active {6109  border-color: var(--peach-t0);6110  transform: scale(1.1);6111}61126113.peach-pill-group {6114  display: flex;6115  gap: 6px;6116}6117.peach-pill-group .peach-btn.is-active {6118  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);6119  border-color: var(--peach-accent);6120  color: var(--peach-t0);6121}61226123/* ── Card entry styles ───────────────────────────────────────── */6124.peach-card-number {6125  font-family: var(--peach-mono);6126  letter-spacing: 0.08em;6127}61286129.peach-card-network-badge {6130  font-size: 0.625rem;6131  padding: 1px 5px;6132  border-radius: 4px;6133  border: 0.5px solid var(--peach-border);6134  color: var(--peach-text-dim);6135  margin-left: 6px;6136  vertical-align: middle;6137}61386139.peach-card-expiry-row {6140  display: flex;6141  align-items: center;6142  gap: 8px;6143}61446145.peach-card-expiry-sep {6146  color: var(--peach-text-dim);6147}61486149/* ── Pro tier — upgrade screen ──────────────────────────────── */6150.peach-pro-mark {6151  font-size: 0.5625rem;6152  color: var(--peach-accent);6153  margin-left: 6px;6154  vertical-align: super;6155  opacity: 0.7;6156}61576158.peach-pro-mini-badge {6159  display: block;6160  font-size: 0.625rem;6161  font-style: italic;6162  color: var(--peach-accent);6163  letter-spacing: 0.04em;6164  margin-top: -2px;6165  padding-left: 2px;6166  opacity: 0.85;6167  text-align: center;6168}61696170.peach-wordmark-stack {6171  display: inline-flex;6172  flex-direction: column;6173  align-items: center;6174}61756176/* ── Pro tier — upgrade page ─────────────────────────────────── */6177/* ── Pro upgrade — redesigned editorial layout ─────────────────── */61786179.peach-pro-upgrade {6180  display: flex;6181  flex-direction: column;6182  align-items: stretch;6183  gap: 10px;6184  padding: 2px 2px 12px;6185}61866187.peach-pro-eyebrow {6188  margin: 0;6189  font-family: var(--font-ui);6190  font-size: 0.625rem;6191  font-weight: 500;6192  letter-spacing: 0.12em;6193  color: var(--peach-accent);6194}61956196.peach-pro-headline {6197  margin: 0;6198  font-family: var(--font-display, "Cormorant Garamond", serif);6199  font-size: 30px;6200  font-weight: 700;6201  font-style: normal;6202  line-height: 1.05;6203  color: var(--peach-t0);6204  letter-spacing: -0.01em;6205}6206.peach-pro-headline em {6207  font-style: italic;6208  font-weight: 400;6209  color: var(--peach-accent);6210}62116212.peach-pro-subtitle {6213  margin: 0;6214  font-size: 0.6875rem;6215  line-height: 1.5;6216  color: var(--peach-t1);6217}62186219/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6220.peach-pro-section-label {6221  margin: 6px 0 0;6222  font-family: var(--font-ui);6223  font-size: 0.5625rem;6224  font-weight: 500;6225  letter-spacing: 0.12em;6226  text-transform: uppercase;6227  color: var(--peach-t2);6228}62296230/* 2-column numbered feature grid */6231.peach-pro-grid {6232  display: grid;6233  grid-template-columns: 1fr 1fr;6234  border-top: 1px solid var(--peach-border);6235  border-left: 1px solid var(--peach-border);6236}62376238.peach-pro-grid-item {6239  display: flex;6240  flex-direction: column;6241  gap: 2px;6242  padding: 8px 9px;6243  border-right: 1px solid var(--peach-border);6244  border-bottom: 1px solid var(--peach-border);6245}62466247.peach-pro-grid-item--wide {6248  grid-column: 1 / -1;6249}62506251.peach-pro-grid-num {6252  font-family: var(--font-mono);6253  font-size: 0.5625rem;6254  color: var(--peach-accent);6255  letter-spacing: 0.06em;6256  opacity: 0.85;6257}62586259.peach-pro-grid-name {6260  font-size: 0.8125rem;6261  font-weight: 500;6262  color: var(--peach-t0);6263  line-height: 1.2;6264}62656266.peach-pro-grid-desc {6267  font-size: 0.625rem;6268  color: var(--peach-t1);6269  line-height: 1.4;6270}62716272.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6273  animation: peach-pulse-accent 600ms ease-out forwards;6274}62756276@keyframes peach-pulse-accent {6277  0%   { opacity: 1; transform: scale(1.2); }6278  100% { opacity: 0.85; transform: scale(1); }6279}62806281/* Actions */6282.peach-pro-upgrade-actions {6283  display: flex;6284  flex-direction: column;6285  align-items: stretch;6286  gap: 10px;6287}62886289.peach-pro-pricing {6290  margin: 0;6291  font-size: 1rem;6292  font-weight: 600;6293  color: var(--peach-t0);6294  letter-spacing: 0.01em;6295}6296.peach-pro-pricing-sub {6297  font-size: 0.75rem;6298  font-weight: 400;6299  color: var(--peach-t1);6300  letter-spacing: 0.02em;6301}63026303.peach-pro-upgrade-cta {6304  display: flex;6305  align-items: center;6306  justify-content: center;6307  text-decoration: none;6308  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6309  border: 1px solid var(--peach-accent);6310  border-radius: 10px;6311  color: var(--peach-accent);6312  font-family: var(--font-ui);6313  font-size: 0.8125rem;6314  font-weight: 600;6315  letter-spacing: 0.06em;6316  padding: 11px 16px;6317  transition: background 0.15s ease, color 0.15s ease;6318}6319.peach-pro-upgrade-cta:hover {6320  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6321}63226323.peach-pro-key-divider {6324  display: flex;6325  align-items: center;6326  gap: 8px;6327  color: var(--peach-t2);6328  font-size: 0.5625rem;6329  letter-spacing: 0.1em;6330}6331.peach-pro-key-divider::before,6332.peach-pro-key-divider::after {6333  content: "";6334  flex: 1;6335  height: 1px;6336  background: var(--peach-border);6337}63386339/* Inline key entry row */6340.peach-pro-key-inline {6341  display: flex;6342  align-items: center;6343  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6344  border: 1px solid var(--peach-border);6345  border-radius: 8px;6346  overflow: hidden;6347}6348.peach-pro-key-inline-input {6349  flex: 1;6350  background: transparent;6351  border: none;6352  outline: none;6353  color: var(--peach-t1);6354  font-family: var(--font-mono);6355  font-size: 0.625rem;6356  letter-spacing: 0.06em;6357  padding: 9px 10px;6358}6359.peach-pro-key-inline-input::placeholder {6360  color: var(--peach-t2);6361}6362.peach-pro-key-apply {6363  background: transparent;6364  border: none;6365  border-left: 1px solid var(--peach-border);6366  color: var(--peach-t2);6367  font-family: var(--font-ui);6368  font-size: 0.5625rem;6369  font-weight: 600;6370  letter-spacing: 0.08em;6371  padding: 9px 10px;6372  cursor: pointer;6373  transition: color 0.15s ease;6374  flex-shrink: 0;6375}6376.peach-pro-key-apply:not(:disabled):hover {6377  color: var(--peach-accent);6378}6379.peach-pro-key-apply:disabled {6380  opacity: 0.35;6381  cursor: not-allowed;6382}63836384/* ── Pro tier — key ceremony ─────────────────────────────────── */6385.peach-pro-key-ceremony {6386  display: flex;6387  flex-direction: column;6388  align-items: center;6389  gap: 12px;6390  padding: 20px 4px 16px;6391}63926393.peach-pro-key-ceremony .peach-lock-rune-string {6394  font-size: 1rem;6395  gap: 12px;6396  flex: 0;6397  justify-content: center;6398}63996400.peach-pro-key-ceremony-label {6401  margin: 0;6402  font-size: 0.6875rem;6403  color: var(--peach-t2);6404  font-style: italic;6405  letter-spacing: 0.04em;6406}64076408.peach-pro-key-input {6409  font-family: var(--font-mono, monospace);6410  letter-spacing: 0.06em;6411  text-align: center;6412  width: 100%;6413  box-sizing: border-box;6414}64156416.peach-pro-key-error {6417  margin: 0;6418  font-size: 0.75rem;6419  text-align: center;6420  color: var(--peach-breach, #e55);6421  padding: 0;6422}64236424.peach-pro-key-activate {6425  width: 100%;6426  text-align: center;6427  box-sizing: border-box;6428  padding: 10px 20px;6429  font-size: 0.8125rem;6430}64316432.peach-pro-key-cancel {6433  background: transparent;6434  border: 0;6435  color: var(--peach-t2);6436  font-size: 0.6875rem;6437  cursor: pointer;6438  padding: 2px 8px;6439  transition: color 0.2s;6440}64416442.peach-pro-key-cancel:hover { color: var(--peach-accent); }64436444/* ── Pro tier — active state ─────────────────────────────────── */6445.peach-pro-active {6446  display: flex;6447  flex-direction: column;6448  align-items: center;6449  gap: 0;6450  padding: 8px 4px 16px;6451  min-height: 280px;6452}64536454.peach-pro-active-hero {6455  display: flex;6456  flex-direction: column;6457  align-items: center;6458  gap: 6px;6459  padding: 20px 0 8px;6460}64616462.peach-pro-active-mark-wrap {6463  display: flex;6464  align-items: center;6465  justify-content: center;6466  margin-bottom: 4px;6467}64686469.peach-pro-active-mark {6470  width: 60px;6471  height: 60px;6472}64736474.peach-pro-active-title {6475  font-family: var(--font-display, var(--font-ui));6476  font-size: 26px;6477  margin: 0;6478  color: var(--peach-t0);6479  letter-spacing: 0.01em;6480}64816482.peach-pro-active-since {6483  margin: 0;6484  font-size: 0.6875rem;6485  color: var(--peach-t2);6486  font-style: italic;6487}64886489.peach-pro-active-features {6490  display: flex;6491  flex-direction: column;6492  gap: 8px;6493  width: 100%;6494  padding: 14px 8px 0;6495  border-top: 1px solid var(--peach-border);6496  flex: 1;6497}64986499.peach-pro-active-feature {6500  display: flex;6501  align-items: center;6502  gap: 9px;6503}65046505.peach-pro-active-feature-mark {6506  color: var(--peach-accent);6507  font-size: 0.625rem;6508  opacity: 0.65;6509  flex-shrink: 0;6510}65116512.peach-pro-active-feature-name {6513  font-size: 0.75rem;6514  color: var(--peach-t1);6515}65166517.peach-pro-deactivate {6518  align-self: center;6519  background: transparent;6520  border: 0;6521  color: var(--peach-t3);6522  font-size: 0.625rem;6523  cursor: pointer;6524  padding: 8px 0 0;6525  margin-top: 16px;6526  letter-spacing: 0.03em;6527  transition: color 0.2s;6528}65296530.peach-pro-deactivate:hover { color: var(--peach-t2); }65316532.peach-pro-deactivate:disabled {6533  opacity: 0.5;6534  cursor: default;6535}65366537/* ── Pro card activation sparkles & thank-you ── */6538button.peach-pro-active-mark-wrap {6539  background: transparent;6540  border: 0;6541  padding: 0;6542  cursor: pointer;6543  position: relative;6544  overflow: visible;6545}65466547.peach-pro-sparks {6548  position: absolute;6549  inset: 0;6550  pointer-events: none;6551  overflow: visible;6552}65536554.peach-pro-spark {6555  position: absolute;6556  top: 50%;6557  left: 50%;6558  font-size: 9px;6559  line-height: 1;6560  opacity: 0;6561  transform: translate(-50%, -50%);6562  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;6563}65646565@keyframes peach-pro-spark-fly {6566  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }6567  25%  { opacity: 1; }6568  100% {6569    opacity: 0;6570    transform: translate(6571      calc(-50% + var(--spark-x, 0px)),6572      calc(-50% + var(--spark-y, -40px))6573    ) scale(0.8);6574  }6575}65766577.peach-pro-thankyou-text {6578  margin: 4px 0 0;6579  font-size: 0.6875rem;6580  font-style: italic;6581  color: currentColor;6582  opacity: 0;6583  animation: peach-pro-thankyou-flash 2.5s ease both;6584}65856586@keyframes peach-pro-thankyou-flash {6587  0%   { opacity: 0; transform: translateY(4px); }6588  15%  { opacity: 0.75; transform: translateY(0); }6589  75%  { opacity: 0.75; }6590  100% { opacity: 0; }6591}65926593/* ── Pro advanced health remediation queue ──────────────────── */6594.peach-health-pro-queue {6595  display: flex;6596  flex-direction: column;6597  gap: 10px;6598  padding: 12px;6599  margin: 0 0 12px;6600  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6601  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6602  border-radius: 10px;6603}66046605.peach-health-pro-queue-head {6606  display: flex;6607  justify-content: space-between;6608  align-items: baseline;6609}66106611.peach-health-pro-queue-title {6612  font-size: 0.75rem;6613  font-weight: 500;6614  letter-spacing: 0.04em;6615  text-transform: uppercase;6616  color: var(--peach-accent);6617}66186619.peach-health-pro-queue-score {6620  font-size: 0.6875rem;6621  color: var(--peach-t2);6622}66236624.peach-health-pro-row {6625  display: flex;6626  gap: 10px;6627  align-items: center;6628  padding: 8px 0;6629  border-top: 1px solid var(--peach-border);6630}66316632.peach-health-pro-row-info {6633  flex: 1;6634  display: flex;6635  flex-direction: column;6636  gap: 4px;6637  min-width: 0;6638}66396640.peach-health-pro-action {6641  flex: 0 0 auto;6642  padding: 4px 8px;6643  font-size: 0.5625rem;6644  letter-spacing: 0.08em;6645  text-transform: uppercase;6646}66476648.peach-health-pro-row-name {6649  font-size: 0.8125rem;6650  color: var(--peach-t0);6651  overflow: hidden;6652  text-overflow: ellipsis;6653  white-space: nowrap;6654}66556656.peach-health-pro-row-meta {6657  font-size: 0.6875rem;6658  color: var(--peach-t2);6659}66606661.peach-health-pro-bar {6662  height: 2px;6663  background: var(--peach-border);6664  border-radius: 2px;6665  overflow: hidden;6666  margin-top: 2px;6667}66686669.peach-health-pro-bar-fill {6670  height: 100%;6671  background: var(--peach-accent);6672  transition: width 200ms ease-out;6673}66746675/* ── Pro activation celebration ── */6676@keyframes peach-pro-bloom {6677  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6678  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6679                 drop-shadow(0 0 48px var(--peach-glow)); }6680  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6681}66826683@keyframes peach-pro-wordmark-in {6684  from { opacity: 0; transform: translateY(4px); }6685  to   { opacity: 1; transform: translateY(0); }6686}66876688@keyframes peach-pro-fade-out {6689  from { opacity: 1; }6690  to   { opacity: 0; }6691}66926693.peach-pro-celebration {6694  background:6695    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6696    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6697    var(--peach-bg);6698  border: 1px solid var(--peach-t3);6699  box-shadow:6700    0 2px 8px rgba(0,0,0,0.55),6701    0 14px 48px rgba(0,0,0,0.7),6702    0 0 0 1px rgba(240,232,216,0.04);6703  overflow: hidden;6704  width: 320px;6705  height: 520px;6706  display: flex;6707  flex-direction: column;6708  align-items: center;6709  justify-content: center;6710  gap: 8px;6711  padding: 32px 24px;6712  text-align: center;6713}67146715.peach-pro-celebration.is-leaving {6716  animation: peach-pro-fade-out 400ms ease forwards;6717}67186719.peach-pro-bloom-target {6720  display: flex;6721  align-items: center;6722  justify-content: center;6723  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6724  margin-bottom: 12px;6725}67266727.peach-pro-bloom-icon {6728  width: 48px;6729  height: 48px;6730}67316732.peach-pro-wordmark {6733  font-family: var(--font-display);6734  font-size: 22px;6735  font-style: italic;6736  font-weight: 400;6737  color: var(--peach-accent);6738  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6739}67406741.peach-pro-thankyou {6742  font-size: 0.75rem;6743  font-style: italic;6744  color: var(--peach-t2);6745  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6746}674767486749/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6750.peach-pro-notice-banner {6751  display: flex;6752  align-items: center;6753  gap: 8px;6754  padding: 7px 12px;6755  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6756  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6757  font-size: 0.6875rem;6758  color: var(--peach-t2);6759  font-family: "IBM Plex Mono", monospace;6760  flex-shrink: 0;6761}67626763.peach-pro-notice-link {6764  background: none;6765  border: none;6766  padding: 0;6767  cursor: pointer;6768  font-size: 0.6875rem;6769  color: var(--peach-accent);6770  font-family: "IBM Plex Mono", monospace;6771  margin-left: auto;6772  white-space: nowrap;6773}67746775.peach-pro-notice-close {6776  background: none;6777  border: none;6778  padding: 0 0 0 4px;6779  cursor: pointer;6780  font-size: 0.625rem;6781  color: var(--peach-t3);6782  line-height: 1;6783}67846785/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6786   Renders over whatever view is showing. 60-second expiry; the popup ticks6787   the countdown each second and clears the banner when it hits zero. */6788.peach-pair-request-banner {6789  display: flex;6790  flex-direction: column;6791  gap: 8px;6792  padding: 10px 12px;6793  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6794  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6795  font-family: "IBM Plex Mono", monospace;6796  flex-shrink: 0;6797}67986799.peach-pair-toast {6800  padding: 8px 12px;6801  font-family: "IBM Plex Mono", monospace;6802  font-size: 0.75rem;6803  color: var(--peach-t1);6804  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6805  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6806  flex-shrink: 0;6807  text-align: center;6808}68096810.peach-pair-toast strong {6811  color: var(--peach-t0);6812  font-weight: 500;6813}68146815.peach-pair-request-header {6816  display: flex;6817  align-items: center;6818  gap: 8px;6819  font-size: 0.75rem;6820  color: var(--peach-t1);6821}68226823.peach-pair-request-mark {6824  font-size: 0.875rem;6825  display: inline-flex;6826  align-items: center;6827}68286829.peach-pair-request-icon {6830  width: 1em;6831  height: 1em;6832}68336834.peach-pair-request-title {6835  font-weight: 600;6836  color: var(--peach-t0);6837}68386839.peach-pair-request-countdown {6840  margin-left: auto;6841  font-variant-numeric: tabular-nums;6842  color: var(--peach-t2);6843  font-size: 0.6875rem;6844}68456846.peach-pair-request-body {6847  margin: 0;6848  font-size: 0.75rem;6849  color: var(--peach-t1);6850  line-height: 1.4;6851}68526853.peach-pair-request-body strong {6854  color: var(--peach-t0);6855  font-weight: 600;6856}68576858.peach-pair-request-actions {6859  display: flex;6860  gap: 8px;6861  justify-content: flex-end;6862}68636864/* ─── First-run onboarding ──────────────────────────────────────────────6865   Three-card welcome shown once before vault creation. The PeachScript6866   rune background drifts behind everything at very low opacity — it's6867   atmosphere, not focus. The cards themselves use the same panel6868   language as the rest of the popup so the transition into NewVault is6869   continuous, not a jarring switch of visual register. */68706871.peach-onboarding {6872  position: relative;6873  display: flex;6874  flex-direction: column;6875  width: 100%;6876  height: 100%;6877  padding: 16px 16px 18px;6878  box-sizing: border-box;6879  overflow: hidden;6880  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6881}68826883.peach-onboarding.is-completing {6884  animation: peach-onboard-exit 200ms ease-out forwards;6885}68866887.peach-rune-background {6888  position: absolute;6889  inset: 0;6890  width: 100%;6891  height: 100%;6892  pointer-events: none;6893  z-index: 0;6894  transition: opacity 500ms ease-out;6895}68966897.peach-onboarding.is-completing .peach-rune-background {6898  opacity: 0;6899}69006901.peach-onboarding-header {6902  position: relative;6903  z-index: 1;6904  display: flex;6905  align-items: center;6906  margin-bottom: 14px;6907}69086909.peach-onboarding-card {6910  position: relative;6911  z-index: 1;6912  flex: 1;6913  display: flex;6914  flex-direction: column;6915  gap: 10px;6916  padding: 22px 20px;6917  border-radius: 16px;6918  border: 1px solid var(--peach-t3);6919  background:6920    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6921  backdrop-filter: blur(3px);6922  -webkit-backdrop-filter: blur(3px);6923  box-shadow:6924    inset 0 1px 0 rgba(240, 232, 216, 0.04),6925    0 12px 28px rgba(0, 0, 0, 0.12);6926  cursor: pointer;6927  user-select: none;6928  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6929}69306931.peach-onboarding-card.is-exiting {6932  animation: peach-card-out 120ms ease-in forwards;6933  pointer-events: none;6934}69356936.peach-onboarding-card-headline {6937  margin: 0;6938  font-family: var(--font-display);6939  font-style: italic;6940  font-weight: 400;6941  font-size: 22px;6942  line-height: 1.05;6943  color: var(--peach-t0);6944  white-space: pre-line;6945}69466947.peach-onboarding-divider {6948  margin: 4px 0 6px;6949  border: 0;6950  border-top: 1px solid var(--peach-t3);6951  width: 100%;6952}69536954.peach-onboarding-body {6955  margin: 0;6956  font-size: 0.8125rem;6957  line-height: 1.6;6958  color: var(--peach-t1);6959}69606961.peach-onboarding-warning {6962  display: flex;6963  align-items: flex-start;6964  gap: 8px;6965  margin: 6px 0 0;6966  padding-top: 8px;6967  border-top: 1px dashed var(--peach-t3);6968  font-size: 0.8125rem;6969  line-height: 1.5;6970  color: var(--peach-t1);6971}69726973.peach-onboarding-warning-icon {6974  color: var(--peach-accent);6975  font-size: 0.8125rem;6976  line-height: 1.5;6977  flex: 0 0 auto;6978}69796980.peach-onboarding-nav {6981  position: relative;6982  z-index: 1;6983  display: flex;6984  align-items: center;6985  justify-content: space-between;6986  margin-top: 12px;6987  padding: 0 4px;6988}69896990.peach-onboarding-dots {6991  display: flex;6992  align-items: center;6993  gap: 6px;6994}69956996.peach-onboarding-dot {6997  width: 6px;6998  height: 6px;6999  border-radius: 50%;7000  background: var(--peach-t2);7001  transition: width 200ms ease, height 200ms ease, background 200ms ease;7002}70037004.peach-onboarding-dot.is-active {7005  width: 8px;7006  height: 8px;7007  background: var(--peach-accent);7008}70097010.peach-onboarding-next {7011  background: none;7012  border: none;7013  padding: 4px 0;7014  cursor: pointer;7015  font-family: "IBM Plex Mono", monospace;7016  font-size: 0.6875rem;7017  letter-spacing: 0.04em;7018  color: var(--peach-t1);7019  transition: color 150ms ease;7020}70217022.peach-onboarding-next:hover {7023  color: var(--peach-t0);7024}70257026.peach-onboarding-next:disabled {7027  opacity: 0.5;7028  cursor: default;7029}70307031.peach-onboarding-back {7032  background: none;7033  border: none;7034  padding: 4px 0;7035  cursor: pointer;7036  font-family: "IBM Plex Mono", monospace;7037  font-size: 0.6875rem;7038  letter-spacing: 0.04em;7039  color: var(--peach-t2);7040  transition: color 150ms ease;7041}70427043.peach-onboarding-back:hover {7044  color: var(--peach-t0);7045}70467047.peach-onboarding-back:disabled {7048  opacity: 0.5;7049  cursor: default;7050}70517052/* Reserve back-button width on the first card so the dots stay centred */7053.peach-onboarding-back-spacer {7054  width: 44px;7055}70567057.peach-onboarding-mobile-card-buttons {7058  display: flex;7059  flex-direction: column;7060  gap: 8px;7061  margin-top: 16px;7062}70637064@keyframes peach-onboard-enter {7065  from { opacity: 0; transform: translateY(20px); }7066  to   { opacity: 1; transform: translateY(0); }7067}70687069@keyframes peach-onboard-exit {7070  from { opacity: 1; }7071  to   { opacity: 0; }7072}70737074@keyframes peach-card-in {7075  from { opacity: 0; transform: translateX(12px); }7076  to   { opacity: 1; transform: translateX(0); }7077}70787079@keyframes peach-card-out {7080  from { opacity: 1; transform: translateX(0); }7081  to   { opacity: 0; transform: translateX(-12px); }7082}70837084/* ─── New vault screen — matched to onboarding card language ─────────── */70857086/* Two classes so this beats the shared .peach-screen.lock-screen--vault-stage7087   rule (same element) without loosening the unlock/restore screens. The7088   create-vault screen is the only vault-stage view tall enough to overflow7089   the 520px popup, so its spacing is tuned to fit header → card → restore →7090   recovery warning with nothing clipped. */7091.peach-screen.peach-newvault {7092  position: relative;7093  display: flex;7094  flex-direction: column;7095  gap: 12px;7096  padding: 14px 16px 12px;7097  overflow: hidden;7098}70997100/* Suppress the warm-blob ambient art inherited from .lock-screen — the7101   new vault card now carries the visual weight. */7102.peach-newvault::before {7103  content: none;7104}71057106.peach-newvault-header {7107  position: relative;7108  z-index: 2;7109  display: flex;7110  align-items: center;7111  gap: 10px;7112  margin-bottom: 2px;7113}71147115.peach-newvault-back {7116  display: inline-flex;7117  align-items: center;7118  gap: 4px;7119  background: transparent;7120  border: none;7121  color: var(--peach-t2);7122  font-family: "IBM Plex Mono", monospace;7123  font-size: 0.625rem;7124  letter-spacing: 0.06em;7125  cursor: pointer;7126  padding: 4px 6px;7127  border-radius: 6px;7128  transition: color 120ms ease, background 120ms ease;7129}71307131.peach-newvault-back:hover {7132  color: var(--peach-t0);7133  background: rgba(240, 232, 216, 0.04);7134}71357136.peach-newvault-mark {7137  position: absolute;7138  right: -12px;7139  top: 6px;7140  width: 110px;7141  height: 110px;7142  pointer-events: none;7143  opacity: 0.10;7144  filter: saturate(0.9);7145  z-index: 0;7146}7147.peach-newvault-mark-art {7148  width: 100%;7149  height: 100%;7150}7151.peach-newvault-mark-art path:nth-child(1) {7152  fill: rgba(123, 144, 96, 0.88);7153}7154.peach-newvault-mark-art path:nth-child(2) {7155  stroke: rgba(94, 122, 66, 0.95);7156}71577158.peach-newvault-card {7159  position: relative;7160  z-index: 1;7161  display: flex;7162  flex-direction: column;7163  gap: 8px;7164  padding: 16px 20px 14px;7165  border-radius: 16px;7166  border: 1px solid var(--peach-t3);7167  background:7168    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));7169  backdrop-filter: blur(3px);7170  -webkit-backdrop-filter: blur(3px);7171  box-shadow:7172    inset 0 1px 0 rgba(240, 232, 216, 0.04),7173    0 12px 28px rgba(0, 0, 0, 0.12);7174  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;7175}71767177.peach-newvault-headline {7178  margin: 0;7179  font-family: var(--font-display);7180  font-style: italic;7181  font-weight: 400;7182  font-size: 24px;7183  line-height: 1.05;7184  color: var(--peach-t0);7185  white-space: pre-line;7186}71877188.peach-newvault-divider {7189  margin: 2px 0 4px;7190  border: 0;7191  border-top: 1px solid var(--peach-t3);7192  width: 100%;7193}71947195.peach-newvault-field {7196  display: flex;7197  flex-direction: column;7198  gap: 4px;7199}72007201.peach-newvault-label-row {7202  display: flex;7203  align-items: center;7204  justify-content: space-between;7205}72067207/* Monospace input scaled to the card. Replaces the 22px unlock-input7208   so the placeholder no longer overflows and the field reads as part7209   of the same surface as the body copy. */7210.peach-newvault-input {7211  font-size: 0.875rem;7212  letter-spacing: 0.18em;7213  padding: 8px 0;7214}7215.peach-newvault-input::placeholder {7216  letter-spacing: 0.18em;7217  color: var(--peach-t2);7218}72197220.peach-newvault-hint {7221  margin: 2px 0 0;7222  font-family: "IBM Plex Mono", monospace;7223  font-size: 0.625rem;7224  color: var(--peach-t2);7225  letter-spacing: 0.04em;7226}72277228.peach-newvault-submit {7229  margin-top: 4px;7230}72317232.peach-newvault-warning {7233  display: flex;7234  align-items: flex-start;7235  gap: 8px;7236  margin: 2px 0 0;7237  padding-top: 8px;7238  border-top: 1px dashed var(--peach-t3);7239  font-size: 0.75rem;7240  line-height: 1.45;7241  color: var(--peach-t1);7242}72437244.peach-newvault-warning-icon {7245  color: var(--peach-accent);7246  font-size: 0.8125rem;7247  line-height: 1.4;7248  flex: 0 0 auto;7249}72507251/* Restore options sit inside the card, directly under "create vault", so7252   they are always reachable without scrolling. The top divider mirrors the7253   warning's so the choice reads as a deliberate fork, not a footnote. */7254.peach-newvault-restore {7255  position: relative;7256  z-index: 1;7257  display: flex;7258  flex-direction: column;7259  gap: 4px;7260  margin-top: 4px;7261  padding-top: 10px;7262  border-top: 1px dashed var(--peach-t3);7263}72647265/* Settings body — warm accent gradient gives the glass something to blur against */7266.peach-settings-body {7267  background:7268    radial-gradient(7269      ellipse at 30% 20%,7270      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7271      transparent 60%7272    );7273}72747275/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7276/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7277 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7278 * (replacing the vault from a backup file) and "hazard" for actions that7279 * are absolutely irreversible (Panic). Both use the same card scaffold so7280 * they read as a pair, but the colour family signals the severity at a7281 * glance — yellow for caution, red for don't.7282 */7283.peach-danger-card {7284  --danger-tint: 235, 158, 52; /* amber */7285  display: flex;7286  flex-direction: column;7287  gap: 8px;7288  padding: 14px;7289  margin-top: 10px;7290  border-radius: 12px;7291  border: 1px solid rgba(var(--danger-tint), 0.32);7292  background:7293    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7294    rgba(var(--danger-tint), 0.04);7295  box-shadow:7296    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7297    0 0 24px rgba(var(--danger-tint), 0.04);7298  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7299}73007301.peach-danger-card:hover {7302  border-color: rgba(var(--danger-tint), 0.55);7303  box-shadow:7304    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7305    0 0 36px rgba(var(--danger-tint), 0.10);7306}73077308.peach-danger-card--hazard {7309  --danger-tint: 220, 38, 38; /* red */7310}73117312.peach-danger-card-head {7313  display: flex;7314  align-items: center;7315  gap: 10px;7316}73177318.peach-danger-card-glyph {7319  width: 28px;7320  height: 28px;7321  flex-shrink: 0;7322  display: flex;7323  align-items: center;7324  justify-content: center;7325  border-radius: 8px;7326  background: rgba(var(--danger-tint), 0.12);7327  color: rgba(var(--danger-tint), 0.95);7328  font-size: 1rem;7329  line-height: 1;7330}73317332.peach-danger-card-title {7333  margin: 0;7334  font-size: 0.8125rem;7335  font-weight: 600;7336  color: rgba(var(--danger-tint), 0.92);7337  letter-spacing: 0.01em;7338}73397340.peach-danger-card-copy {7341  margin: 0;7342  font-size: 0.6875rem;7343  line-height: 1.5;7344  color: var(--peach-t2);7345}73467347.peach-danger-card-button {7348  width: 100%;7349  padding: 9px;7350  margin-top: 4px;7351  background: transparent;7352  border: 1px solid rgba(var(--danger-tint), 0.45);7353  border-radius: 8px;7354  color: rgba(var(--danger-tint), 0.9);7355  font-size: 0.75rem;7356  font-weight: 500;7357  letter-spacing: 0.02em;7358  cursor: pointer;7359  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7360}73617362.peach-danger-card-button:hover {7363  background: rgba(var(--danger-tint), 0.10);7364  border-color: rgba(var(--danger-tint), 0.75);7365  color: rgb(var(--danger-tint));7366}73677368/* ── Panic flow (three-step destruction) ───────────────────────────────── */7369.peach-panic {7370  display: flex;7371  flex-direction: column;7372  flex: 1;7373  min-height: 0;7374  padding: 28px 20px 20px;7375  gap: 18px;7376  overflow-y: auto;7377  scrollbar-width: none;7378  -ms-overflow-style: none;7379}73807381.peach-panic::-webkit-scrollbar { display: none; }73827383.peach-panic-step2 {7384  background: rgba(220, 38, 38, 0.04);7385}73867387.peach-panic-step3 {7388  position: relative;7389  background: #0f0505;7390  color: #ffffff;7391  overflow: hidden;7392}73937394.peach-panic-rune-bg {7395  position: absolute;7396  inset: 0;7397  opacity: 0.22;7398  pointer-events: none;7399  overflow: hidden;7400}74017402.peach-panic-rune-bg canvas {7403  width: 100% !important;7404  height: 100% !important;7405}74067407.peach-panic-icon {7408  font-size: 32px;7409  color: rgb(220, 38, 38);7410  line-height: 1;7411}74127413.peach-panic-title {7414  margin: 0;7415  font-size: 18px;7416  font-weight: 500;7417  color: var(--peach-t1);7418}74197420.peach-panic-title--severe {7421  font-size: 20px;7422  font-weight: 700;7423  color: rgb(220, 38, 38);7424}74257426.peach-panic-body {7427  margin: 0;7428  font-size: 0.8125rem;7429  line-height: 1.55;7430  color: var(--peach-t2);7431}74327433.peach-panic-body--severe {7434  color: rgba(220, 38, 38, 0.85);7435}74367437.peach-panic-body--final {7438  font-size: 1rem;7439  font-weight: 700;7440  color: rgb(255, 80, 80);7441  line-height: 1.4;7442}74437444.peach-panic-body--final-intro {7445  font-size: 1rem;7446  color: #ffffff;7447  font-weight: 400;7448}74497450.peach-panic-divider {7451  height: 1px;7452  background: rgba(255, 255, 255, 0.08);7453  margin: 4px 0;7454}74557456.peach-panic-confirm-input {7457  width: 100%;7458  padding: 10px 12px;7459  background: rgba(255, 255, 255, 0.02);7460  border: 1px solid rgba(220, 38, 38, 0.4);7461  border-radius: 8px;7462  color: var(--peach-t1);7463  font-family: "IBM Plex Mono", monospace;7464  font-size: 0.875rem;7465  letter-spacing: 0.12em;7466  text-transform: uppercase;7467}74687469.peach-panic-confirm-input:focus {7470  outline: none;7471  border-color: rgb(220, 38, 38);7472}74737474.peach-panic-confirm-input--match {7475  border-color: rgb(220, 38, 38);7476  color: rgb(220, 38, 38);7477}74787479.peach-panic-confirm-label {7480  font-size: 0.6875rem;7481  color: var(--peach-t2);7482  margin: 0 0 -8px;7483  letter-spacing: 0.06em;7484}74857486.peach-panic-actions {7487  display: flex;7488  flex-direction: column;7489  gap: 10px;7490  margin-top: auto;7491}74927493.peach-panic-button {7494  width: 100%;7495  padding: 12px;7496  border-radius: 8px;7497  font-size: 0.8125rem;7498  cursor: pointer;7499  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7500}75017502.peach-panic-button--primary {7503  background: var(--peach-accent);7504  border: 1px solid var(--peach-accent);7505  color: #ffffff;7506  font-weight: 600;7507}75087509.peach-panic-button--primary:hover {7510  background: color-mix(in srgb, var(--peach-accent) 88%, white);7511}75127513.peach-panic-button--danger {7514  background: rgb(220, 38, 38);7515  border: 1px solid rgb(220, 38, 38);7516  color: #ffffff;7517  font-weight: 600;7518}75197520.peach-panic-button--danger:disabled {7521  opacity: 0.35;7522  cursor: not-allowed;7523}75247525.peach-panic-button--ghost {7526  background: transparent;7527  border: 1px solid rgba(255, 255, 255, 0.18);7528  color: var(--peach-t2);7529}75307531.peach-panic-button--ghost:hover {7532  border-color: rgba(255, 255, 255, 0.32);7533  color: var(--peach-t1);7534}75357536.peach-panic-link {7537  background: transparent;7538  border: none;7539  padding: 4px 0;7540  color: rgba(220, 38, 38, 0.65);7541  font-size: 0.75rem;7542  cursor: pointer;7543  text-align: left;7544  text-decoration: underline;7545  text-underline-offset: 3px;7546}75477548.peach-panic-link:hover {7549  color: rgb(220, 38, 38);7550}75517552.peach-panic-bar {7553  background: rgb(220, 38, 38);7554  padding: 16px 20px;7555  margin: -28px -20px 0;7556  text-align: center;7557  font-size: 0.8125rem;7558  font-weight: 700;7559  letter-spacing: 0.12em;7560  color: #ffffff;7561}75627563.peach-panic-final-button {7564  width: 100%;7565  padding: 14px;7566  background: rgb(220, 38, 38);7567  border: none;7568  border-radius: 8px;7569  color: #ffffff;7570  font-size: 0.875rem;7571  font-weight: 700;7572  letter-spacing: 0.08em;7573  text-transform: uppercase;7574  cursor: pointer;7575  animation: peach-panic-pulse 2s ease-in-out infinite;7576}75777578.peach-settings-license {7579  margin-top: 10px;7580  padding-top: 10px;7581  border-top: 1px solid var(--peach-t3);7582}75837584.peach-settings-label {7585  font-size: 0.625rem;7586  letter-spacing: 0.08em;7587  color: var(--peach-t3);7588  display: block;7589  margin-bottom: 6px;7590}75917592.peach-settings-license-row {7593  display: flex;7594  align-items: center;7595  justify-content: space-between;7596  gap: 8px;7597}75987599.peach-settings-license-key {7600  font-family: 'IBM Plex Mono', monospace;7601  font-size: 0.75rem;7602  color: var(--peach-t0);7603  letter-spacing: 0.04em;7604  word-break: break-all;7605  flex: 1;7606  min-width: 0;7607}76087609.peach-settings-license-key--masked {7610  font-family: 'IBM Plex Mono', monospace;7611  font-size: 0.6rem;7612  color: var(--peach-t1);7613  letter-spacing: 0.18em;7614  user-select: none;7615}76167617.peach-settings-license-actions {7618  display: flex;7619  align-items: center;7620  gap: 2px;7621  flex-shrink: 0;7622}76237624.peach-settings-license-copy {7625  font-size: 0.6875rem;7626  color: var(--peach-accent);7627  background: transparent;7628  border: none;7629  cursor: pointer;7630  padding: 4px 8px;7631  border-radius: 4px;7632  flex-shrink: 0;7633  transition: opacity 150ms ease;7634}76357636.peach-settings-license-copy:hover {7637  opacity: 0.75;7638}76397640.peach-settings-license-toggle {7641  display: flex;7642  align-items: center;7643  justify-content: center;7644  background: transparent;7645  border: none;7646  cursor: pointer;7647  padding: 4px 6px;7648  border-radius: 4px;7649  color: var(--peach-t2);7650  transition: color 150ms ease;7651}76527653.peach-settings-license-toggle:hover {7654  color: var(--peach-t1);7655}76567657@keyframes peach-panic-pulse {7658  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7659  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7660}76617662[data-motion="reduce"] .peach-panic-final-button {7663  animation: none;7664}76657666/* Vault History — Settings → Vault sub-view */76677668.peach-history-list {7669  border: 1px solid var(--peach-border);7670  border-radius: 8px;7671  overflow: hidden;7672  margin: 8px 0 4px;7673}76747675.peach-history-row {7676  display: flex;7677  align-items: center;7678  justify-content: space-between;7679  padding: 9px 12px;7680  gap: 10px;7681  border-bottom: 1px solid var(--peach-border);7682}76837684.peach-history-row:last-child {7685  border-bottom: none;7686}76877688.peach-history-meta {7689  display: flex;7690  flex-direction: column;7691  gap: 2px;7692  min-width: 0;7693  flex: 1;7694}76957696.peach-history-time {7697  font-size: 0.75rem;7698  font-family: 'IBM Plex Mono', ui-monospace, monospace;7699  color: var(--peach-t0);7700  white-space: nowrap;7701  overflow: hidden;7702  text-overflow: ellipsis;7703}77047705.peach-history-sub {7706  font-size: 0.625rem;7707  color: var(--peach-t2);7708  letter-spacing: 0.06em;7709  text-transform: uppercase;7710  white-space: nowrap;7711  overflow: hidden;7712  text-overflow: ellipsis;7713}77147715.peach-history-btn {7716  flex-shrink: 0;7717  white-space: nowrap;7718  min-width: 56px;7719  text-align: center;7720}77217722.peach-history-btn.is-busy {7723  opacity: 0.65;7724}77257726.peach-history-footer {7727  font-size: 0.625rem;7728  color: var(--peach-t3);7729  letter-spacing: 0.05em;7730  text-align: right;7731  margin: 0;7732  padding: 2px 0 0;7733}77347735/* ── Context menu + swipe-copy flash ─────────────────────── */7736.peach-context-menu-backdrop {7737  position: fixed;7738  inset: 0;7739  background: rgba(0, 0, 0, 0.45);7740  z-index: 100;7741  display: flex;7742  align-items: flex-end;7743  justify-content: center;7744  animation: peach-ctx-fade 140ms ease both;7745}7746.peach-context-menu {7747  width: min(360px, calc(100vw - 24px));7748  margin-bottom: max(env(safe-area-inset-bottom), 12px);7749  background: var(--peach-bg);7750  border: 1px solid var(--peach-t3);7751  border-radius: 14px;7752  padding: 6px;7753  display: flex;7754  flex-direction: column;7755  gap: 2px;7756  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7757  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7758}7759@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7760@keyframes peach-ctx-rise {7761  from { transform: translateY(16px); opacity: 0; }7762  to   { transform: translateY(0);    opacity: 1; }7763}7764.peach-context-menu-item {7765  background: transparent;7766  color: var(--peach-t0);7767  border: 0;7768  border-radius: 10px;7769  padding: 12px 14px;7770  text-align: left;7771  font: inherit;7772  cursor: pointer;7773}7774.peach-context-menu-item:hover,7775.peach-context-menu-item:focus-visible {7776  background: var(--peach-t3);7777}7778.peach-context-menu-item--danger {7779  color: var(--peach-health-bad, #d96868);7780}7781.peach-context-menu-item--cancel {7782  color: var(--peach-t2);7783  margin-top: 4px;7784  border-top: 1px solid var(--peach-t3);7785  border-radius: 0 0 10px 10px;7786}77877788/* Swipe-to-copy flash */7789.peach-entry-row.is-copy-flash {7790  animation: peach-copy-flash 600ms ease both;7791}7792@keyframes peach-copy-flash {7793  0%   { background: transparent; }7794  20%  { background: rgba(217, 153, 51, 0.32); }7795  100% { background: transparent; }7796}77977798html { font-size: 16px; }77997800/* ── Recovery word entry ─────────────────────────────────────────── */7801.peach-lock-recover-link {7802  display: block;7803  width: 100%;7804  margin-top: 12px;7805  background: none;7806  border: none;7807  font-family: "IBM Plex Mono", monospace;7808  font-size: 0.625rem;7809  letter-spacing: 0.06em;7810  color: var(--peach-t2);7811  cursor: pointer;7812  text-align: center;7813  padding: 4px;7814  transition: color 120ms ease;7815}7816.peach-lock-recover-link:hover {7817  color: var(--peach-t0);7818}78197820.lock-screen--recovery {7821  display: flex;7822  flex-direction: column;7823  align-items: stretch;7824  padding: 12px 20px 24px;7825  overflow: hidden;7826}78277828.peach-recovery-nav {7829  display: flex;7830  align-items: center;7831  position: relative;7832  z-index: 1;7833  margin-bottom: 4px;7834}78357836/* Mask runes to the top decorative band only — keep inputs and the7837   bottom CTA button clear. The bottom of the popup is reserved for7838   submit buttons; rendering runes there overlaps the button glyph. */7839.peach-rune-background--recovery {7840  -webkit-mask-image: linear-gradient(7841    to bottom,7842    black 0px, black 85px,7843    transparent 110px,7844    transparent 100%7845  );7846  mask-image: linear-gradient(7847    to bottom,7848    black 0px, black 85px,7849    transparent 110px,7850    transparent 100%7851  );7852}78537854.peach-recovery-header {7855  text-align: center;7856  margin-bottom: 16px;7857  margin-top: 4px;7858}7859.peach-recovery-header .peach-onboarding-headline {7860  font-size: 1.25rem;7861  font-weight: 300;7862  letter-spacing: 0.02em;7863  margin: 0 0 4px;7864}7865.peach-recovery-header .peach-hint {7866  font-family: "IBM Plex Mono", monospace;7867  font-size: 0.625rem;7868  color: var(--peach-t2);7869  letter-spacing: 0.04em;7870  margin: 0;7871}78727873/* 12-word grid: 2 columns × 6 rows */7874.peach-recovery-grid {7875  display: grid;7876  grid-template-columns: repeat(2, 1fr);7877  gap: 12px 20px;7878  width: 100%;7879  margin-bottom: 0;7880}78817882.peach-recovery-word-slot {7883  display: flex;7884  align-items: center;7885  gap: 6px;7886  min-width: 0;7887}78887889.peach-recovery-word-index {7890  font-family: "IBM Plex Mono", monospace;7891  font-size: 0.5rem;7892  color: rgba(255, 255, 255, 0.35);7893  min-width: 14px;7894  flex-shrink: 0;7895  text-align: right;7896  letter-spacing: 0.04em;7897}78987899.peach-recovery-word-input {7900  flex: 1;7901  min-width: 0;7902  background: transparent;7903  border: none;7904  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7905  color: var(--peach-t0);7906  font-family: "IBM Plex Mono", monospace;7907  font-size: 0.6875rem;7908  letter-spacing: 0.06em;7909  padding: 5px 2px 4px;7910  outline: none;7911  text-transform: lowercase;7912  transition: border-color 120ms ease;7913}7914.peach-recovery-word-input::placeholder {7915  color: rgba(255, 255, 255, 0.18);7916}7917.peach-recovery-word-input:focus {7918  border-bottom-color: var(--peach-accent);7919}79207921.peach-recovery-submit {7922  width: 100%;7923  margin-top: auto;7924}79257926.peach-recovery-new-password-form {7927  width: 100%;7928  display: flex;7929  flex-direction: column;7930  gap: 16px;7931  margin-bottom: 8px;7932}7933.peach-recovery-new-password-form .peach-newvault-field {7934  display: flex;7935  flex-direction: column;7936  gap: 4px;7937}79387939/* ── Recovery words display (post-create) ────────────────────────── */7940.lock-screen--recovery-display {7941  display: flex;7942  flex-direction: column;7943  align-items: stretch;7944  padding: 0 20px 20px;7945  min-height: 0;7946  overflow-y: auto;7947}79487949.peach-recovery-words-display {7950  width: 100%;7951  margin-bottom: 16px;7952  border: 1px solid var(--peach-t3);7953  border-radius: 8px;7954  padding: 12px 14px;7955  background: rgba(245, 240, 234, 0.04);7956}79577958.peach-recovery-words-label {7959  font-family: "IBM Plex Mono", monospace;7960  font-size: 0.5rem;7961  letter-spacing: 0.08em;7962  color: var(--peach-t2);7963  text-transform: uppercase;7964  margin-bottom: 10px;7965}79667967.peach-recovery-word-list {7968  list-style: none;7969  margin: 0;7970  padding: 0;7971  display: grid;7972  grid-template-columns: repeat(2, 1fr);7973  gap: 6px 16px;7974}79757976.peach-recovery-word-item {7977  display: flex;7978  align-items: baseline;7979  gap: 5px;7980}79817982.peach-recovery-word-num {7983  font-family: "IBM Plex Mono", monospace;7984  font-size: 0.5rem;7985  color: var(--peach-t2);7986  width: 14px;7987  flex: 0 0 14px;7988  text-align: right;7989  letter-spacing: 0.04em;7990  font-variant-numeric: tabular-nums;7991}79927993.peach-recovery-download-btn {7994  display: block;7995  margin: 10px auto 0;7996  padding: 4px 10px;7997  background: transparent;7998  border: 1px solid var(--peach-border);7999  border-radius: 6px;8000  color: var(--peach-t2);8001  font-family: "IBM Plex Mono", monospace;8002  font-size: 0.5625rem;8003  letter-spacing: 0.06em;8004  text-transform: lowercase;8005  cursor: pointer;8006  transition: border-color 0.15s, color 0.15s;8007}80088009.peach-recovery-download-btn:hover {8010  border-color: var(--peach-accent);8011  color: var(--peach-t0);8012}80138014.peach-recovery-word-text {8015  font-family: "IBM Plex Mono", monospace;8016  font-size: 0.6875rem;8017  letter-spacing: 0.06em;8018  color: var(--peach-t0);8019  text-transform: lowercase;8020}80218022.peach-hint--warning {8023  color: var(--peach-accent);8024  font-style: italic;8025}8026.peach-hint--success {8027  color: var(--peach-t2);8028  font-family: "IBM Plex Mono", monospace;8029  font-size: 0.625rem;8030  letter-spacing: 0.06em;8031}80328033/* Confirmation step */8034.peach-recovery-confirm {8035  width: 100%;8036  flex: 1;8037  display: flex;8038  flex-direction: column;8039}8040.peach-recovery-confirm-label {8041  font-family: "IBM Plex Mono", monospace;8042  font-size: 0.5625rem;8043  letter-spacing: 0.04em;8044  color: var(--peach-t2);8045  text-align: center;8046  margin: 0 0 12px;8047}8048.peach-recovery-confirm-fields {8049  display: flex;8050  flex-direction: column;8051  gap: 14px;8052  margin-bottom: 10px;8053}8054.peach-recovery-confirm-field {8055  display: flex;8056  align-items: center;8057  gap: 8px;8058}8059.peach-recovery-confirm-num {8060  font-family: "IBM Plex Mono", monospace;8061  font-size: 0.5rem;8062  color: var(--peach-t2);8063  min-width: 44px;8064  letter-spacing: 0.04em;8065}8066.peach-recovery-confirm-input {8067  flex: 1;8068  background: transparent;8069  border: none;8070  border-bottom: 1px solid var(--peach-t3);8071  color: var(--peach-t0);8072  font-family: "IBM Plex Mono", monospace;8073  font-size: 0.6875rem;8074  letter-spacing: 0.06em;8075  padding: 4px 2px 3px;8076  outline: none;8077  text-transform: lowercase;8078  transition: border-color 120ms ease;8079}8080.peach-recovery-confirm-input:focus {8081  border-bottom-color: var(--peach-accent);8082}8083.peach-recovery-confirm-input:disabled {8084  opacity: 0.4;8085  cursor: not-allowed;8086}8087.peach-recovery-confirm-btn {8088  width: 100%;8089  margin-top: auto;8090}80918092/* ============================================================8093   Sync info sheet8094   ============================================================ */80958096.peach-sync-info-backdrop {8097  position: fixed;8098  inset: 0;8099  z-index: 200;8100  background: rgba(0, 0, 0, 0.55);8101  display: flex;8102  align-items: flex-end;8103  animation: peach-fade-in 200ms ease forwards;8104}81058106@keyframes peach-fade-in {8107  from { opacity: 0; }8108  to   { opacity: 1; }8109}81108111.peach-sync-info-sheet {8112  width: 100%;8113  background: var(--peach-bg-card, var(--peach-bg));8114  border-top-left-radius: 20px;8115  border-top-right-radius: 20px;8116  padding: 12px 24px 32px;8117  display: flex;8118  flex-direction: column;8119  gap: 20px;8120  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;8121}81228123@keyframes peach-sheet-up {8124  from { transform: translateY(100%); }8125  to   { transform: translateY(0); }8126}81278128.peach-sync-info-handle {8129  width: 36px;8130  height: 4px;8131  border-radius: 2px;8132  background: var(--peach-border);8133  margin: 0 auto 4px;8134  flex-shrink: 0;8135}81368137.peach-sync-info-title {8138  font-family: 'Cormorant Garamond', serif;8139  font-style: italic;8140  font-size: 26px;8141  font-weight: 600;8142  color: var(--peach-t0);8143  margin: 0;8144  line-height: 1.2;8145}81468147.peach-sync-info-body {8148  display: flex;8149  flex-direction: column;8150  gap: 14px;8151}81528153.peach-sync-info-point {8154  display: flex;8155  gap: 12px;8156  align-items: flex-start;8157  font-size: 14px;8158  color: var(--peach-t2);8159  line-height: 1.6;8160  margin: 0;8161}81628163.peach-sync-info-icon {8164  color: var(--peach-accent);8165  font-size: 16px;8166  flex-shrink: 0;8167  margin-top: 1px;8168}81698170.peach-sync-info-actions {8171  display: flex;8172  flex-direction: column;8173  gap: 12px;8174  margin-top: 4px;8175}81768177.peach-sync-info-pro-link {8178  background: none;8179  border: none;8180  font-size: 13px;8181  color: var(--peach-t3);8182  cursor: pointer;8183  padding: 0;8184  font-family: inherit;8185  text-align: center;8186  transition: color 150ms ease;8187}81888189.peach-sync-info-pro-link:hover {8190  color: var(--peach-accent);8191}81928193.peach-btn--full {8194  width: 100%;8195}81968197/* ── Sync screen ── */81988199.peach-sync-coming-soon {8200  display: flex;8201  align-items: flex-start;8202  gap: 10px;8203  padding: 12px 14px;8204  background: var(--peach-s1);8205  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8206  border-radius: 10px;8207}8208.peach-sync-coming-soon__icon {8209  flex-shrink: 0;8210  color: var(--peach-accent);8211  margin-top: 1px;8212  line-height: 0;8213}8214.peach-sync-coming-soon__title {8215  font-family: 'Cormorant Garamond', serif;8216  font-weight: 500;8217  font-size: 13px;8218  color: var(--peach-accent);8219  margin: 0 0 5px;8220  line-height: 1.3;8221}8222.peach-sync-coming-soon__body {8223  font-size: 12px;8224  color: var(--peach-t1);8225  line-height: 1.55;8226  margin: 0;8227}82288229.peach-sync-screen {8230  display: flex;8231  flex-direction: column;8232  height: 100%;8233}82348235.peach-sync-content {8236  flex: 1;8237  overflow-y: auto;8238  padding: 24px 20px 40px;8239  display: flex;8240  flex-direction: column;8241  gap: 24px;8242}82438244/* Intro (State A) */8245.peach-sync-headline {8246  font-family: 'Cormorant Garamond', serif;8247  font-style: italic;8248  font-size: 28px;8249  font-weight: 600;8250  color: var(--peach-t0);8251  margin: 0 0 10px;8252  line-height: 1.2;8253}82548255.peach-sync-intro-body {8256  font-size: 14px;8257  color: var(--peach-t1);8258  line-height: 1.6;8259  margin: 0;8260}82618262.peach-sync-pro-note {8263  display: flex;8264  flex-direction: column;8265  gap: 8px;8266  background: var(--peach-t3);8267  border-radius: 10px;8268  padding: 12px 14px;8269}82708271.peach-sync-pro-note-text {8272  font-size: 12px;8273  color: var(--peach-t2);8274  line-height: 1.5;8275  margin: 0;8276}82778278.peach-sync-pro-link {8279  background: none;8280  border: none;8281  font-size: 12px;8282  color: var(--peach-accent);8283  cursor: pointer;8284  padding: 0;8285  font-family: inherit;8286  text-align: left;8287}82888289/* Status (State C) */8290.peach-sync-status {8291  padding: 12px 0;8292  border-bottom: 1px solid var(--peach-border);8293}82948295.peach-sync-status-row {8296  display: flex;8297  align-items: center;8298  gap: 8px;8299}83008301.peach-sync-dot {8302  width: 7px;8303  height: 7px;8304  border-radius: 50%;8305  flex-shrink: 0;8306}83078308.peach-sync-dot--green { background: var(--peach-health-ok); }8309.peach-sync-dot--amber { background: var(--peach-accent); }83108311.peach-sync-status-text {8312  font-family: 'IBM Plex Mono', monospace;8313  font-size: 11px;8314  color: var(--peach-t2);8315}83168317/* Paired devices */8318.peach-sync-section {8319  display: flex;8320  flex-direction: column;8321  gap: 2px;8322}83238324.peach-sync-section-label {8325  font-family: 'IBM Plex Mono', monospace;8326  font-size: 10px;8327  letter-spacing: 0.1em;8328  color: var(--peach-t3);8329  margin: 0 0 10px;8330}83318332.peach-sync-device-row {8333  display: flex;8334  justify-content: space-between;8335  align-items: baseline;8336  padding: 10px 0;8337  border-bottom: 1px solid var(--peach-border);8338  gap: 12px;8339}83408341.peach-sync-device-name {8342  font-size: 14px;8343  color: var(--peach-t1);8344}83458346.peach-sync-device-meta {8347  font-family: 'IBM Plex Mono', monospace;8348  font-size: 11px;8349  color: var(--peach-t3);8350  white-space: nowrap;8351}83528353.peach-sync-hub-note {8354  padding: 14px 16px;8355  border: 1px solid var(--peach-border);8356  border-radius: 10px;8357  display: flex;8358  flex-direction: column;8359  gap: 6px;8360  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8361}83628363.peach-sync-hub-note-title {8364  font-size: 13px;8365  font-weight: 600;8366  color: var(--peach-t0);8367  margin: 0;8368}83698370.peach-sync-hub-note-body {8371  font-size: 12px;8372  color: var(--peach-t2);8373  line-height: 1.6;8374  margin: 0;8375}83768377/* Action buttons */8378.peach-sync-actions {8379  display: flex;8380  gap: 10px;8381  flex-wrap: wrap;8382}83838384/* Upgrade prompt (State B) */8385.peach-sync-upgrade {8386  display: flex;8387  flex-direction: column;8388  gap: 12px;8389  padding: 16px;8390  border: 1px solid var(--peach-border);8391  border-radius: 10px;8392}83938394.peach-sync-upgrade-text {8395  font-size: 13px;8396  color: var(--peach-t2);8397  line-height: 1.6;8398  margin: 0;8399}84008401/* Network note */8402.peach-sync-network-note {8403  font-size: 12px;8404  color: var(--peach-t3);8405  line-height: 1.6;8406  margin: 0;8407}84088409/* Advanced */8410.peach-sync-advanced {8411  margin-top: auto;8412  padding-top: 16px;8413  border-top: 1px solid var(--peach-border);8414}84158416.peach-sync-advanced-toggle {8417  display: flex;8418  align-items: center;8419  gap: 8px;8420  background: none;8421  border: none;8422  font-family: 'IBM Plex Mono', monospace;8423  font-size: 11px;8424  letter-spacing: 0.08em;8425  color: var(--peach-t3);8426  cursor: pointer;8427  padding: 0;8428  text-transform: uppercase;8429}84308431.peach-sync-advanced-chevron {8432  display: inline-block;8433  transition: transform 200ms ease;8434  font-size: 10px;8435}84368437.peach-sync-advanced-chevron.is-open {8438  transform: rotate(90deg);8439}84408441.peach-sync-advanced-content {8442  margin-top: 14px;8443}84448445.peach-sync-advanced-row {8446  display: flex;8447  justify-content: space-between;8448  align-items: center;8449  gap: 16px;8450}84518452.peach-sync-advanced-title {8453  font-size: 14px;8454  color: var(--peach-t1);8455  margin: 0 0 2px;8456}84578458.peach-sync-advanced-subtitle {8459  font-size: 12px;8460  color: var(--peach-t3);8461  margin: 0;8462  line-height: 1.5;8463}84648465/* ── Add Device — Android scan tabs ─────────────────────────────────────── */84668467.peach-pairing-tabs {8468  display: flex;8469  border: 1px solid var(--peach-border);8470  border-radius: 8px;8471  overflow: hidden;8472  margin-bottom: 4px;8473}84748475.peach-pairing-tab {8476  flex: 1;8477  padding: 10px 0;8478  background: none;8479  border: none;8480  font-family: 'IBM Plex Mono', monospace;8481  font-size: 11px;8482  letter-spacing: 0.06em;8483  color: var(--peach-t2);8484  cursor: pointer;8485  transition: background 150ms, color 150ms;8486}84878488.peach-pairing-tab.is-active {8489  background: var(--peach-accent);8490  color: #fff;8491  font-weight: 600;8492}84938494.peach-pairing-tab:not(.is-active):active {8495  background: var(--peach-border);8496}84978498/* Camera view */8499.peach-pairing-camera-container {8500  position: relative;8501  width: 100%;8502  aspect-ratio: 1;8503  border-radius: 12px;8504  overflow: hidden;8505  background: #000;8506  flex-shrink: 0;8507}85088509.peach-pairing-video {8510  width: 100%;8511  height: 100%;8512  object-fit: cover;8513}85148515.peach-pairing-scan-frame {8516  position: absolute;8517  top: 50%;8518  left: 50%;8519  transform: translate(-50%, -50%);8520  width: 60%;8521  aspect-ratio: 1;8522  border: 2px solid var(--peach-accent);8523  border-radius: 8px;8524  pointer-events: none;8525}85268527/* ── Notes Mode ── */85288529/* Overlay that crossfades over the vault */8530.peach-notes-overlay {8531  position: fixed;8532  inset: 0;8533  z-index: 90;8534  opacity: 0;8535  pointer-events: none;8536  animation: peach-mode-in 220ms ease-in forwards;8537}85388539.peach-notes-overlay.is-visible {8540  opacity: 1;8541  pointer-events: auto;8542}85438544@keyframes peach-mode-in {8545  from { opacity: 0; }8546  to   { opacity: 1; }8547}85488549/* Top-level notes surface */8550.peach-notes-mode {8551  position: absolute;8552  inset: 0;8553  background: var(--peach-bg);8554  display: flex;8555  flex-direction: column;8556}85578558/* Rune canvas positioned behind content */8559.peach-note-rune-canvas {8560  position: absolute;8561  inset: 0;8562  width: 100%;8563  height: 100%;8564  pointer-events: none;8565  z-index: 0;8566}85678568/* TOC wrapper */8569.peach-notes-toc-wrapper {8570  position: absolute;8571  inset: 0;8572  z-index: 1;8573  opacity: 1;8574  pointer-events: auto;8575  transition: opacity 200ms ease;8576}85778578.peach-notes-toc-wrapper.is-hidden {8579  opacity: 0;8580  pointer-events: none;8581}85828583/* Editor wrapper */8584.peach-notes-editor-wrapper {8585  position: absolute;8586  inset: 0;8587  z-index: 2;8588  opacity: 0;8589  pointer-events: none;8590  transition: opacity 200ms ease;8591}85928593.peach-notes-editor-wrapper.is-visible {8594  opacity: 1;8595  pointer-events: auto;8596}85978598/* TOC inner */8599.peach-notes-toc {8600  position: relative;8601  display: flex;8602  flex-direction: column;8603  height: 100%;8604  padding-top: env(safe-area-inset-top, 0px);8605  padding-bottom: env(safe-area-inset-bottom, 0px);8606}86078608/* Shared header */8609.peach-notes-header {8610  display: flex;8611  align-items: center;8612  padding: 12px 16px;8613  gap: 12px;8614  flex-shrink: 0;8615  min-height: 52px;8616  position: relative;8617  z-index: 2;8618}86198620.peach-notes-back {8621  font-size: 22px;8622  color: var(--peach-t2);8623  background: none;8624  border: none;8625  padding: 4px;8626  cursor: pointer;8627  line-height: 1;8628  flex-shrink: 0;8629  transition: color 150ms ease;8630  -webkit-tap-highlight-color: transparent;8631}86328633.peach-notes-back:active { color: var(--peach-t0); }86348635.peach-notes-header-title {8636  flex: 1;8637  font-family: 'Cormorant Garamond', serif;8638  font-style: italic;8639  font-size: 22px;8640  color: var(--peach-t0);8641  text-align: center;8642}86438644.peach-notes-header-title.is-breadcrumb {8645  font-family: 'IBM Plex Mono', monospace;8646  font-style: normal;8647  font-size: 11px;8648  color: var(--peach-t3);8649  letter-spacing: 0.08em;8650  text-transform: uppercase;8651  cursor: pointer;8652}86538654.peach-notes-header-actions {8655  display: flex;8656  gap: 8px;8657  flex-shrink: 0;8658}86598660.peach-notes-header-btn {8661  width: 36px;8662  height: 36px;8663  display: flex;8664  align-items: center;8665  justify-content: center;8666  background: none;8667  border: none;8668  color: var(--peach-t2);8669  cursor: pointer;8670  border-radius: 8px;8671  font-size: 16px;8672  transition: color 150ms ease, background 150ms ease;8673  -webkit-tap-highlight-color: transparent;8674}86758676.peach-notes-header-btn:active {8677  background: rgba(255,255,255,0.06);8678  color: var(--peach-t0);8679}86808681/* Inline search bar */8682.peach-notes-search-input {8683  flex: 1;8684  background: none;8685  border: none;8686  outline: none;8687  font-family: 'IBM Plex Mono', monospace;8688  font-size: 13px;8689  color: var(--peach-t0);8690  padding: 4px 0;8691  letter-spacing: 0.02em;8692}86938694.peach-notes-search-input::placeholder {8695  color: var(--peach-t3);8696}86978698/* TOC list */8699.peach-notes-list-container {8700  flex: 1;8701  overflow-y: auto;8702  overflow-x: hidden;8703  scrollbar-width: none;8704  -webkit-overflow-scrolling: touch;8705  overscroll-behavior: contain;8706  position: relative;8707  z-index: 1;8708}87098710.peach-notes-list-container::-webkit-scrollbar { display: none; }87118712/* Note row */8713.peach-note-row {8714  position: relative;8715  display: grid;8716  grid-template-columns: 44px 8px 1fr 8px auto;8717  align-items: center;8718  min-height: 72px;8719  padding: 16px 20px;8720  border-bottom: 0.5px solid var(--peach-border);8721  cursor: pointer;8722  overflow: hidden;8723  touch-action: pan-y;8724  user-select: none;8725  -webkit-user-select: none;8726  -webkit-tap-highlight-color: transparent;8727}87288729.peach-note-row:first-child {8730  border-top: 0.5px solid var(--peach-border);8731}87328733.peach-note-row:active {8734  background: rgba(255,255,255,0.02);8735}87368737.peach-note-numeral {8738  font-family: 'Cormorant Garamond', serif;8739  font-style: italic;8740  font-size: 15px;8741  color: var(--peach-accent);8742  text-align: right;8743  line-height: 1;8744  flex-shrink: 0;8745}87468747.peach-note-title-gap { /* grid spacer */ }87488749.peach-note-title {8750  font-family: 'Cormorant Garamond', serif;8751  font-style: italic;8752  font-size: 18px;8753  color: var(--peach-t0);8754  line-height: 1.3;8755  min-width: 0;8756  overflow-wrap: break-word;8757}87588759.peach-note-title-match {8760  color: var(--peach-accent);8761}87628763.peach-note-date {8764  font-family: 'IBM Plex Mono', monospace;8765  font-size: 11px;8766  color: var(--peach-t2);8767  white-space: nowrap;8768  text-align: right;8769  flex-shrink: 0;8770  grid-column: 5;8771}87728773/* Swipe underlays */8774.peach-note-row-underlay {8775  position: absolute;8776  inset: 0;8777  display: flex;8778  align-items: center;8779  padding: 0 24px;8780  font-family: 'IBM Plex Mono', monospace;8781  font-size: 11px;8782  letter-spacing: 0.1em;8783  pointer-events: none;8784  z-index: 0;8785}87868787.peach-note-row-underlay--delete {8788  background: #8B2020;8789  color: rgba(255,255,255,0.9);8790  justify-content: flex-end;8791}87928793.peach-note-row-underlay--archive {8794  background: var(--peach-accent);8795  color: #0C0A06;8796  justify-content: flex-start;8797}87988799/* Delete confirm strip */8800.peach-note-delete-confirm {8801  position: absolute;8802  inset: 0;8803  background: var(--peach-bg);8804  display: flex;8805  align-items: center;8806  gap: 12px;8807  padding: 0 20px;8808  font-family: 'IBM Plex Mono', monospace;8809  font-size: 11px;8810  color: var(--peach-t1);8811  letter-spacing: 0.04em;8812  animation: peach-delete-confirm-in 150ms ease both;8813  z-index: 10;8814}88158816@keyframes peach-delete-confirm-in {8817  from { opacity: 0; }8818  to   { opacity: 1; }8819}88208821.peach-note-delete-confirm-btn {8822  background: #8B2020;8823  color: rgba(255,255,255,0.9);8824  border: none;8825  border-radius: 6px;8826  padding: 4px 10px;8827  font-family: 'IBM Plex Mono', monospace;8828  font-size: 10px;8829  cursor: pointer;8830  letter-spacing: 0.06em;8831}88328833.peach-note-delete-cancel-btn {8834  background: none;8835  border: none;8836  color: var(--peach-t3);8837  font-family: 'IBM Plex Mono', monospace;8838  font-size: 10px;8839  cursor: pointer;8840  letter-spacing: 0.06em;8841  padding: 4px 6px;8842}88438844/* + New note button */8845.peach-notes-new-btn {8846  font-family: 'IBM Plex Mono', monospace;8847  font-size: 12px;8848  color: var(--peach-t3);8849  text-align: center;8850  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8851  background: none;8852  border: none;8853  width: 100%;8854  cursor: pointer;8855  letter-spacing: 0.04em;8856  transition: color 150ms ease;8857  -webkit-tap-highlight-color: transparent;8858}88598860.peach-notes-new-btn:active { color: var(--peach-accent); }88618862/* Empty state */8863.peach-notes-empty {8864  display: flex;8865  flex-direction: column;8866  align-items: center;8867  justify-content: center;8868  flex: 1;8869  padding: 48px 32px;8870  gap: 16px;8871}88728873.peach-notes-empty-text {8874  font-family: 'Cormorant Garamond', serif;8875  font-style: italic;8876  font-size: 20px;8877  color: var(--peach-t3);8878  text-align: center;8879  margin: 0;8880  line-height: 1.4;8881  white-space: pre-line;8882}88838884/* ── Editor surface ── */88858886.peach-note-editor-surface {8887  position: absolute;8888  inset: 0;8889  background: var(--peach-bg);8890  display: flex;8891  flex-direction: column;8892  padding-top: env(safe-area-inset-top, 0px);8893}88948895.peach-note-editor-scroll {8896  flex: 1;8897  overflow-y: auto;8898  overflow-x: hidden;8899  scrollbar-width: none;8900  -webkit-overflow-scrolling: touch;8901  padding: 0 24px 120px;8902  position: relative;8903  z-index: 1;8904}89058906.peach-note-editor-scroll::-webkit-scrollbar { display: none; }89078908/* Desktop toolbar (always visible above body) */8909.peach-note-toolbar-desktop-inline {8910  display: flex;8911  align-items: center;8912  gap: 2px;8913  padding: 6px 0 12px;8914  margin-bottom: 4px;8915  border-bottom: 0.5px solid var(--peach-border);8916}89178918/* Title field */8919.peach-note-title-field {8920  font-family: 'Cormorant Garamond', serif;8921  font-style: italic;8922  font-size: 32px;8923  font-weight: 600;8924  color: var(--peach-t0);8925  line-height: 1.2;8926  padding: 8px 0 0;8927  outline: none;8928  min-height: 44px;8929  word-break: break-word;8930  position: relative;8931  z-index: 1;8932}89338934.peach-note-title-field:empty::before {8935  content: attr(data-placeholder);8936  color: var(--peach-t3);8937  pointer-events: none;8938}89398940/* Hairline separator */8941.peach-note-hairline {8942  height: 0.5px;8943  background: var(--peach-border);8944  margin: 12px 0 20px;8945  position: relative;8946  z-index: 1;8947}89488949/* Body field */8950.peach-note-body-field {8951  font-family: 'DM Sans', sans-serif;8952  font-size: 16px;8953  color: var(--peach-t0);8954  line-height: 1.85;8955  padding: 0;8956  outline: none;8957  min-height: 240px;8958  word-break: break-word;8959  position: relative;8960  z-index: 1;8961}89628963.peach-note-body-field:empty::before {8964  content: attr(data-placeholder);8965  color: var(--peach-t3);8966  font-style: italic;8967  pointer-events: none;8968}89698970.peach-note-body-field h2 {8971  font-family: 'Cormorant Garamond', serif;8972  font-style: italic;8973  font-size: 22px;8974  font-weight: 600;8975  color: var(--peach-t0);8976  margin: 20px 0 8px;8977}89788979.peach-note-body-field blockquote {8980  border-left: 2px solid var(--peach-accent);8981  margin: 12px 0;8982  padding-left: 16px;8983  color: var(--peach-t1);8984  font-style: italic;8985}89868987.peach-note-body-field ul,8988.peach-note-body-field ol {8989  padding-left: 20px;8990  margin: 8px 0;8991}89928993.peach-note-body-field li {8994  margin: 4px 0;8995}89968997.peach-note-body-field hr {8998  border: none;8999  border-top: 0.5px solid var(--peach-border);9000  margin: 16px 0;9001}90029003/* Saved indicator */9004.peach-note-saved-indicator {9005  font-family: 'IBM Plex Mono', monospace;9006  font-size: 11px;9007  color: var(--peach-t3);9008  letter-spacing: 0.04em;9009  text-align: right;9010  padding: 6px 24px;9011  flex-shrink: 0;9012  transition: opacity 300ms ease;9013  pointer-events: none;9014  position: relative;9015  z-index: 1;9016}90179018/* Mobile keyboard toolbar */9019.peach-note-toolbar-mobile {9020  display: flex;9021  align-items: center;9022  padding: 8px 16px;9023  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));9024  background: var(--peach-bg);9025  border-top: 0.5px solid var(--peach-border);9026  gap: 4px;9027  flex-shrink: 0;9028  position: relative;9029  z-index: 10;9030}90319032.peach-note-toolbar-btn {9033  min-width: 36px;9034  height: 36px;9035  display: flex;9036  align-items: center;9037  justify-content: center;9038  background: none;9039  border: none;9040  border-radius: 8px;9041  cursor: pointer;9042  font-size: 14px;9043  color: var(--peach-t1);9044  font-family: 'DM Sans', sans-serif;9045  font-weight: 600;9046  transition: background 100ms ease, color 100ms ease;9047  -webkit-tap-highlight-color: transparent;9048}90499050.peach-note-toolbar-btn--italic { font-style: italic; }9051.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }9052.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }90539054.peach-note-toolbar-divider {9055  width: 0.5px;9056  height: 20px;9057  background: var(--peach-border);9058  margin: 0 4px;9059  flex-shrink: 0;9060}90619062.peach-note-toolbar-spacer { flex: 1; }90639064/* Desktop: larger headline in TOC */9065@media (min-width: 400px) {9066  .peach-notes-header-title:not(.is-breadcrumb) {9067    font-size: 32px;9068  }90699070  .peach-note-row {9071    min-height: 64px;9072    padding: 14px 16px;9073  }9074}90759076/* Flying title — shared element during expansion/collapse */90779078/* ─── Light theme overrides ───────────────────────────────────────────────9079   Tokens that cannot be expressed as variable substitutions — hardcoded9080   context-specific values that need separate light-mode rules. */90819082/* Settings section headers: use text-label (#79766F) per restoration brief —9083   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY9084   presence without fighting the light parchment background. */9085.light .peach-settings-sub-label,9086[data-theme="light"] .peach-settings-sub-label,9087.light .peach-settings-nav-label,9088[data-theme="light"] .peach-settings-nav-label {9089  color: #79766F;9090}90919092/* Secondary action buttons (ghost / subtle): filled with input-well surface9093   so they read as recessed against the parchment card background. */9094.light .peach-btn--ghost:not(.peach-icon-btn),9095[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {9096  background: #EEE7DD;9097  border-color: #DDD5CB;9098  color: #1A1208;9099}9100.light .peach-icon-btn,9101[data-theme="light"] .peach-icon-btn {9102  background: transparent;9103  border-color: transparent;9104}9105.light .peach-btn--subtle,9106[data-theme="light"] .peach-btn--subtle {9107  background: #EEE7DD;9108  border-color: #DDD5CB;9109}91109111/* Wide secondary action button on the lock screen — override the9112   hardcoded dark-mode rgba values with warm parchment equivalents. */9113.light .peach-lock-secondary,9114[data-theme="light"] .peach-lock-secondary {9115  background: #EEE7DD;9116  border-color: #DDD5CB;9117  color: #1A1208;9118}9119.light .peach-lock-secondary:hover,9120[data-theme="light"] .peach-lock-secondary:hover {9121  background: #F0E9DF;9122}91239124/* Entry row hover: bg-row lifts the row above the card surface. */9125.light .peach-entry-row:hover,9126[data-theme="light"] .peach-entry-row:hover {9127  background: #F2EBE1;9128}9129.light .peach-entry-row.is-active,9130[data-theme="light"] .peach-entry-row.is-active {9131  background: #F2EBE1;9132}9133.light .peach-entry-row.is-selected,9134[data-theme="light"] .peach-entry-row.is-selected {9135  background: #F5EDE2;9136}91379138/* ──────────────────────────────────────────────────────────────────────────9139   Chirp pairing flow — bird-stage animation (Phase 1)9140   See src/popup/components/ChirpPairingFlow.tsx and the brief §6.2.9141   Three-act animation gated on the [data-phase] attribute of9142   .peach-chirp-pair; child layers (birds, chirp arcs, flight wave, dot)9143   each react via either pose class or visibility flag.9144   Tokens: accent surfaces use var(--peach-accent); bird illustration9145   colours are baked into the SVG per the brand-peach exception in §3.1.9146   ────────────────────────────────────────────────────────────────────── */91479148.peach-chirp-pair {9149  position: absolute;9150  inset: 0;9151  z-index: 3;9152  display: flex;9153  flex-direction: column;9154  padding: 14px 12px 12px;9155  width: 100%;9156  box-sizing: border-box;9157  gap: 0;9158  background:9159    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9160    var(--peach-bg);9161  color: var(--peach-t0);9162  overflow-y: auto;9163  overflow-x: hidden;9164  scrollbar-width: none;9165  isolation: isolate;9166  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9167}9168@keyframes peach-chirp-overlay-in {9169  from { opacity: 0; transform: translateY(8px); }9170  to   { opacity: 1; transform: translateY(0); }9171}9172.peach-chirp-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }9173.peach-chirp-pair::before {9174  content: '';9175  position: absolute;9176  inset: 0;9177  border-radius: inherit;9178  pointer-events: none;9179  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9180  z-index: 0;9181}9182.peach-chirp-pair > * { position: relative; z-index: 1; }91839184/* Header --------------------------------------------------------------- */9185.peach-chirp-head {9186  display: flex; align-items: center; gap: 10px;9187}9188.peach-chirp-back {9189  width: 32px; height: 32px;9190  display: inline-flex; align-items: center; justify-content: center;9191  background: transparent;9192  border: none;9193  border-radius: 8px;9194  color: var(--peach-t1);9195  cursor: pointer;9196  transition: color 0.15s ease, box-shadow 0.15s ease;9197}9198.peach-chirp-back:hover {9199  color: var(--peach-accent);9200  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9201}9202.peach-chirp-title {9203  font-family: var(--font-display, Georgia, serif);9204  font-style: italic;9205  font-size: 24px;9206  font-weight: 500;9207  letter-spacing: 0.005em;9208  color: var(--peach-t0);9209  line-height: 1;9210}9211.peach-chirp-head-spacer { flex: 1; }92129213/* Chip row ------------------------------------------------------------- */9214.peach-chirp-chip-row {9215  display: flex;9216  align-items: center;9217  justify-content: flex-start;9218  margin-top: 12px;9219}9220.peach-chirp-chip {9221  display: inline-flex; align-items: center; gap: 8px;9222  padding: 5px 10px 5px 8px;9223  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9224  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9225  border-radius: 999px;9226  font-family: var(--peach-mono, ui-monospace, monospace);9227  font-size: 11px;9228  letter-spacing: 0.04em;9229  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9230}9231.peach-chirp-chip-dot {9232  width: 6px; height: 6px; border-radius: 50%;9233  background: var(--peach-accent);9234  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9235}9236.peach-chirp-chip[data-phase="paired"] {9237  background: color-mix(in srgb, #4f9eda 12%, transparent);9238  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9239  color: #76b6e8;9240}9241.peach-chirp-chip[data-phase="paired"] .peach-chirp-chip-dot {9242  background: #76b6e8;9243  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9244}9245.peach-chirp-chip[data-phase="timeout"],9246.peach-chirp-chip[data-phase="mic_denied"],9247.peach-chirp-chip[data-phase="version_mismatch"],9248.peach-chirp-chip[data-phase="handshake_failed"] {9249  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9250  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9251  color: var(--peach-warn, #d29257);9252}9253.peach-chirp-chip[data-phase="timeout"] .peach-chirp-chip-dot,9254.peach-chirp-chip[data-phase="mic_denied"] .peach-chirp-chip-dot,9255.peach-chirp-chip[data-phase="version_mismatch"] .peach-chirp-chip-dot,9256.peach-chirp-chip[data-phase="handshake_failed"] .peach-chirp-chip-dot {9257  background: var(--peach-warn, #d29257);9258  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9259}92609261/* Bird stage ----------------------------------------------------------- */9262.peach-chirp-stage {9263  position: relative;9264  margin: 14px 0 8px;9265  height: 180px;9266  border-radius: 12px;9267  background:9268    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9269    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),9270    color-mix(in srgb, var(--peach-bg) 92%, #000);9271  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);9272  overflow: hidden;9273  isolation: isolate;9274}9275.peach-chirp-stage::after {9276  content: '';9277  position: absolute;9278  left: 12%; right: 12%;9279  bottom: 36px;9280  height: 1px;9281  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9282}92839284.peach-chirp-bird-slot {9285  position: absolute;9286  bottom: 8px;9287  width: 100px;9288  height: 110px;9289  display: flex;9290  align-items: flex-end;9291  justify-content: center;9292}9293.peach-chirp-bird-slot-desktop { left: 28px; }9294.peach-chirp-bird-slot-mobile { right: 28px; }92959296/* Mobile bird hops in from the right when handshake begins */9297.peach-chirp-bird-slot-mobile {9298  opacity: 1;9299  transform: translateX(-6px);9300  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9301}9302.peach-chirp-stage.act-listening .peach-chirp-bird-slot-mobile,9303.peach-chirp-stage.act-chirping .peach-chirp-bird-slot-mobile,9304.peach-chirp-stage.act-idle .peach-chirp-bird-slot-mobile {9305  opacity: 0;9306  transform: translateX(60px) rotate(8deg);9307}9308.peach-chirp-stage.act-handshake .peach-chirp-bird-slot-desktop,9309.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop {9310  transform: translateX(6px);9311  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9312}93139314/* Paired: both birds bob together */9315.peach-chirp-stage.act-paired .peach-chirp-bird-slot {9316  animation: peach-chirp-happy-bob 1.2s ease-in-out infinite;9317}9318.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { animation-delay: 0.2s; }9319.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop { --bb-x: 6px; }9320.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { --bb-x: -6px; }9321@keyframes peach-chirp-happy-bob {9322  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9323  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9324}93259326/* Bird internal -------------------------------------------------------- */9327.peach-chirp-bird {9328  width: 108px;9329  height: 108px;9330  transform-origin: 50% 95%;9331}9332.peach-chirp-bird svg { width: 100%; height: 100%; overflow: visible; }93339334.peach-chirp-bird-body {9335  transform-origin: 50% 80%;9336  animation: peach-chirp-bird-bob 2.4s ease-in-out infinite;9337}9338@keyframes peach-chirp-bird-bob {9339  0%, 100% { transform: translateY(0) scale(1, 1); }9340  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9341}93429343.peach-chirp-bird-eye-group {9344  animation: peach-chirp-blink 5.2s steps(1, end) infinite;9345  transform-origin: center;9346  transform-box: fill-box;9347}9348@keyframes peach-chirp-blink {9349  0%, 92%, 96%, 100% { transform: scaleY(1); }9350  94%                { transform: scaleY(0.05); }9351}93529353/* Pose: chirping — beak opens, head bobs, aura blooms */9354.peach-chirp-bird-pose-chirping .peach-chirp-bird-body {9355  animation:9356    peach-chirp-bird-bob 2.4s ease-in-out infinite,9357    peach-chirp-squeeze 1.7s ease-in-out infinite;9358}9359@keyframes peach-chirp-squeeze {9360  0%, 70%, 100% { transform-origin: 50% 85%; }9361  78%           { transform: scale(1.04, 0.96) translateY(1px); }9362  86%           { transform: scale(0.98, 1.02); }9363}9364.peach-chirp-bird-pose-chirping .peach-chirp-bird-head-group {9365  animation: peach-chirp-head-bob 1.7s ease-in-out infinite;9366}9367@keyframes peach-chirp-head-bob {9368  0%, 70%, 100% { transform: translateY(0) rotate(0); }9369  78%           { transform: translateY(-3px) rotate(-4deg); }9370  86%           { transform: translateY(-1px) rotate(-2deg); }9371}9372.peach-chirp-bird-pose-chirping .peach-chirp-bird-beak {9373  animation: peach-chirp-beak-open 1.7s ease-in-out infinite;9374}9375@keyframes peach-chirp-beak-open {9376  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9377  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9378  86%           { transform: rotate(-6deg); }9379}9380.peach-chirp-bird-pose-chirping .peach-chirp-bird-aura {9381  animation: peach-chirp-aura 1.7s ease-in-out infinite;9382}9383@keyframes peach-chirp-aura {9384  0%, 100% { opacity: 0; }9385  50%      { opacity: 0.8; }9386}9387.peach-chirp-bird-pose-chirping .peach-chirp-bird-tail {9388  animation: peach-chirp-tail-twitch 1.7s ease-in-out infinite;9389  transform-origin: 100% 50%;9390}9391@keyframes peach-chirp-tail-twitch {9392  0%, 75%, 100% { transform: rotate(0); }9393  82%           { transform: rotate(-3deg) translateX(-1px); }9394}93959396/* Pose: attentive — head tilts toward partner */9397.peach-chirp-bird-pose-attentive .peach-chirp-bird-head-group {9398  animation: peach-chirp-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9399}9400@keyframes peach-chirp-head-tilt {9401  0%   { transform: rotate(0) translateY(0); }9402  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9403  100% { transform: rotate(-6deg); }9404}9405.peach-chirp-bird-pose-attentive .peach-chirp-bird-tail {9406  animation: peach-chirp-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9407  transform-origin: 100% 50%;9408}9409@keyframes peach-chirp-tail-cock {9410  0%   { transform: rotate(0); }9411  100% { transform: rotate(-4deg); }9412}94139414/* Pose: happy — wing flutter, tuft perk, tail wag */9415.peach-chirp-bird-pose-happy .peach-chirp-bird-wing {9416  transform-origin: 80% 60%;9417  animation: peach-chirp-wing-flutter 0.32s ease-in-out 5;9418}9419@keyframes peach-chirp-wing-flutter {9420  0%, 100% { transform: rotate(0) translateY(0); }9421  50%      { transform: rotate(-16deg) translateY(-2px); }9422}9423.peach-chirp-bird-pose-happy .peach-chirp-bird-tuft {9424  transform-origin: 0% 100%;9425  animation: peach-chirp-tuft-perk 0.4s ease-in-out 3;9426}9427@keyframes peach-chirp-tuft-perk {9428  0%, 100% { transform: rotate(0); }9429  50%      { transform: rotate(-15deg) translateY(-1px); }9430}9431.peach-chirp-bird-pose-happy .peach-chirp-bird-tail {9432  transform-origin: 100% 50%;9433  animation: peach-chirp-tail-wag 0.5s ease-in-out 4;9434}9435@keyframes peach-chirp-tail-wag {9436  0%, 100% { transform: rotate(0); }9437  25%      { transform: rotate(6deg); }9438  75%      { transform: rotate(-6deg); }9439}9440.peach-chirp-bird-pose-happy .peach-chirp-bird-head-group {9441  animation: peach-chirp-head-perk 0.5s ease-out;9442}9443@keyframes peach-chirp-head-perk {9444  0%   { transform: translateY(0); }9445  40%  { transform: translateY(-3px) rotate(2deg); }9446  100% { transform: translateY(0); }9447}94489449/* Pose: sad — body droops forward */9450.peach-chirp-bird-pose-sad .peach-chirp-bird-body {9451  transform: translateY(5px) rotate(-2deg);9452  animation: none;9453}9454.peach-chirp-bird-pose-sad .peach-chirp-bird-head-group {9455  transform: translateY(4px) rotate(8deg);9456}9457.peach-chirp-bird-pose-sad .peach-chirp-bird-tuft { transform: rotate(15deg) translateY(2px); }9458.peach-chirp-bird-pose-sad .peach-chirp-bird-tail { transform: rotate(8deg) translateY(2px); }94599460.peach-chirp-bird-pose-hidden { opacity: 0; }94619462/* Chirp arcs ----------------------------------------------------------- */9463.peach-chirp-arcs {9464  position: absolute;9465  top: 18px;9466  width: 96px;9467  height: 70px;9468  pointer-events: none;9469}9470.peach-chirp-arcs-right { right: -60px; }9471.peach-chirp-arcs-left  { left: -60px; transform: scaleX(-1); }9472.peach-chirp-arc {9473  position: absolute;9474  top: 50%;9475  left: 0;9476  width: 40px;9477  height: 40px;9478  margin-top: -20px;9479  border: 1.2px solid #f4d5a8;9480  border-color: transparent #f4d5a8 transparent transparent;9481  border-radius: 50%;9482  opacity: 0;9483  animation: peach-chirp-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9484}9485@keyframes peach-chirp-arc-expand {9486  0%   { transform: scale(0.4); opacity: 0; }9487  20%  { opacity: 0.9; }9488  100% { transform: scale(1.6); opacity: 0; }9489}94909491/* Flight wave ---------------------------------------------------------- */9492.peach-chirp-flight-track {9493  position: absolute;9494  inset: 32px 36px 38px 36px;9495  pointer-events: none;9496}9497.peach-chirp-flight-wave {9498  position: absolute;9499  top: 8px;9500  left: 76px;9501  right: 76px;9502  height: 60px;9503  width: auto;9504  opacity: 0;9505  transition: opacity 0.15s ease;9506  stroke: #f4d5a8;9507  fill: none;9508}9509.peach-chirp-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9510.peach-chirp-flight-wave.is-visible { opacity: 1; }9511.peach-chirp-flight-path,9512.peach-chirp-flight-path-2 {9513  stroke-dasharray: 240;9514  stroke-dashoffset: 240;9515  stroke-linecap: round;9516  fill: none;9517}9518.peach-chirp-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9519.peach-chirp-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9520.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path {9521  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9522}9523.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path-2 {9524  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9525}9526@keyframes peach-chirp-fly {9527  0%   { stroke-dashoffset: 240; opacity: 0; }9528  20%  { opacity: 1; }9529  100% { stroke-dashoffset: -120; opacity: 0; }9530}95319532/* Connection dot ------------------------------------------------------- */9533.peach-chirp-dot {9534  position: absolute;9535  top: 50%; left: 50%;9536  transform: translate(-50%, -50%);9537  width: 40px; height: 40px;9538  opacity: 0;9539  pointer-events: none;9540  transition: opacity 0.3s ease;9541  color: var(--peach-accent);9542}9543.peach-chirp-dot.is-visible { opacity: 1; }9544.peach-chirp-dot-glow {9545  position: absolute; top: 50%; left: 50%;9546  transform: translate(-50%, -50%);9547  width: 38px; height: 38px;9548  border-radius: 50%;9549  filter: blur(10px);9550  opacity: 0.55;9551  background: var(--peach-accent);9552  animation: peach-chirp-dot-bloom 1.4s ease-out;9553}9554.peach-chirp-dot-core {9555  position: absolute; top: 50%; left: 50%;9556  transform: translate(-50%, -50%);9557  width: 8px; height: 8px;9558  border-radius: 50%;9559  background: var(--peach-accent);9560  box-shadow: 0 0 12px currentColor;9561  animation: peach-chirp-dot-core 1.4s ease-out;9562}9563.peach-chirp-dot-ring {9564  position: absolute; top: 50%; left: 50%;9565  width: 60px; height: 60px;9566  transform: translate(-50%, -50%);9567  animation: peach-chirp-dot-ring 1.4s linear;9568  stroke: var(--peach-accent);9569}9570@keyframes peach-chirp-dot-bloom {9571  0%   { width: 4px; height: 4px; opacity: 0; }9572  35%  { width: 60px; height: 60px; opacity: 0.7; }9573  100% { width: 38px; height: 38px; opacity: 0.55; }9574}9575@keyframes peach-chirp-dot-core {9576  0%   { width: 0; height: 0; }9577  35%  { width: 12px; height: 12px; }9578  100% { width: 8px; height: 8px; }9579}9580@keyframes peach-chirp-dot-ring {9581  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9582  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9583  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9584}95859586/* Motes — drift upward across the stage */9587.peach-chirp-motes {9588  position: absolute;9589  inset: 0;9590  pointer-events: none;9591}9592.peach-chirp-mote {9593  position: absolute;9594  width: 2px; height: 2px;9595  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9596  border-radius: 50%;9597  bottom: 32px;9598  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9599  opacity: 0;9600  animation: peach-chirp-mote-drift 6s linear infinite;9601  animation-delay: calc(var(--mote-i, 0) * 0.7s);9602}9603@keyframes peach-chirp-mote-drift {9604  0%   { transform: translateY(0); opacity: 0; }9605  10%  { opacity: 0.6; }9606  90%  { opacity: 0.1; }9607  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9608}96099610/* Status copy ---------------------------------------------------------- */9611.peach-chirp-copy-host {9612  margin: 4px 4px 10px;9613  text-align: center;9614  min-height: 50px;9615}9616.peach-chirp-copy {9617  animation: peach-chirp-copy-in 0.35s ease both;9618}9619@keyframes peach-chirp-copy-in {9620  from { opacity: 0; transform: translateY(4px); }9621  to   { opacity: 1; transform: translateY(0); }9622}9623.peach-chirp-headline {9624  font-family: var(--font-display, Georgia, serif);9625  font-style: italic;9626  font-size: 20px;9627  font-weight: 500;9628  line-height: 1.2;9629  letter-spacing: 0.005em;9630  color: var(--peach-t0);9631  margin-bottom: 6px;9632}9633.peach-chirp-copy-listening .peach-chirp-headline,9634.peach-chirp-copy-chirping .peach-chirp-headline,9635.peach-chirp-copy-idle .peach-chirp-headline {9636  font-family: inherit;9637  font-style: normal;9638  font-weight: 500;9639  font-size: 15px;9640  color: var(--peach-t0);9641  letter-spacing: 0;9642}9643.peach-chirp-copy-paired .peach-chirp-headline {9644  color: var(--peach-t0);9645  font-weight: 600;9646}9647.peach-chirp-sub {9648  font-size: 12.5px;9649  line-height: 1.45;9650  color: var(--peach-t1);9651  max-width: 280px;9652  margin: 0 auto;9653  text-wrap: pretty;9654}96559656/* Status action -------------------------------------------------------- */9657.peach-chirp-action {9658  margin: 2px 4px 10px;9659  margin-top: auto;9660  display: flex;9661  flex-direction: column;9662  gap: 8px;9663}9664.peach-chirp-action-waiting {9665  display: flex;9666  align-items: center;9667  justify-content: space-between;9668  gap: 12px;9669}9670.peach-chirp-cancel {9671  min-width: 96px;9672}9673.peach-chirp-listening {9674  display: inline-flex; align-items: center; gap: 4px;9675  font-family: var(--peach-mono, ui-monospace, monospace);9676  font-size: 9.5px;9677  text-transform: uppercase;9678  letter-spacing: 0.12em;9679  color: var(--peach-t1);9680  padding: 8px 10px;9681}9682.peach-chirp-listen-dot {9683  width: 4px; height: 4px;9684  border-radius: 50%;9685  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9686  animation: peach-chirp-listen-pulse 1.2s ease-in-out infinite;9687}9688.peach-chirp-listen-dot:nth-child(2) { animation-delay: 0.2s; }9689.peach-chirp-listen-dot:nth-child(3) { animation-delay: 0.4s; }9690.peach-chirp-listen-label { margin-left: 6px; }9691@keyframes peach-chirp-listen-pulse {9692  0%, 100% { opacity: 0.25; transform: scale(0.9); }9693  50%      { opacity: 1;     transform: scale(1.15); }9694}96959696.peach-chirp-action-handshake {9697  display: flex;9698  flex-direction: column;9699  align-items: center;9700  gap: 8px;9701  padding: 8px 4px;9702}9703.peach-chirp-meter {9704  width: 100%;9705  max-width: 280px;9706  height: 2px;9707  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9708  border-radius: 2px;9709  position: relative;9710  overflow: hidden;9711}9712.peach-chirp-meter-bar {9713  position: absolute;9714  top: 0; bottom: 0;9715  width: 30%;9716  left: -30%;9717  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9718  animation: peach-chirp-meter-sweep 1.4s ease-in-out infinite;9719}9720@keyframes peach-chirp-meter-sweep {9721  0%   { left: -30%; }9722  100% { left: 100%; }9723}9724.peach-chirp-meter-label {9725  font-family: var(--peach-mono, ui-monospace, monospace);9726  font-size: 9.5px;9727  text-transform: uppercase;9728  letter-spacing: 0.14em;9729  color: var(--peach-t1);9730}97319732.peach-chirp-action-paired {9733  display: flex;9734  align-items: center;9735  gap: 10px;9736}9737.peach-chirp-device-confirm {9738  flex: 1;9739  display: inline-flex;9740  align-items: center;9741  gap: 8px;9742  padding: 9px 10px 9px 12px;9743  border-radius: 10px;9744  background: color-mix(in srgb, #76b6e8 12%, transparent);9745  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9746  font-size: 12.5px;9747  color: var(--peach-t0);9748  min-width: 0;9749}9750.peach-chirp-device-confirm-glyph {9751  display: inline-flex;9752  color: #76b6e8;9753}9754.peach-chirp-device-confirm-name {9755  flex: 1;9756  overflow: hidden;9757  text-overflow: ellipsis;9758  white-space: nowrap;9759}9760.peach-chirp-device-confirm-trust {9761  font-family: var(--peach-mono, ui-monospace, monospace);9762  font-size: 9.5px;9763  text-transform: uppercase;9764  letter-spacing: 0.1em;9765  color: #76b6e8;9766  padding: 2px 6px;9767  border-radius: 4px;9768  background: color-mix(in srgb, #76b6e8 14%, transparent);9769}9770.peach-chirp-done {9771  min-width: 80px;9772}9773.peach-chirp-retry {9774  align-self: center;9775  display: block;9776  margin: 6px auto 0;9777  min-width: 120px;9778}9779.peach-chirp-mic-help {9780  font-size: 12px;9781  color: var(--peach-t1);9782  text-align: center;9783  max-width: 320px;9784  margin: 0 auto;9785}97869787/* Rest state — bird stage at idle pose, primary CTA + paired list */9788.peach-chirp-pair[data-phase="idle"] .peach-chirp-stage {9789  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9790  height: 160px;9791}9792.peach-chirp-pair-start {9793  width: 100%;9794  display: inline-flex;9795  align-items: center;9796  justify-content: center;9797  gap: 8px;9798  padding: 11px 14px;9799  border-radius: 10px;9800  background: var(--peach-accent);9801  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9802  color: #1a0905;9803  font-family: inherit;9804  font-size: 13px;9805  font-weight: 600;9806  letter-spacing: 0.01em;9807  cursor: pointer;9808  transition: filter 0.15s ease, transform 0.1s ease;9809}9810.peach-chirp-pair-start:hover { filter: brightness(1.08); }9811.peach-chirp-pair-start:active { transform: translateY(1px); }98129813.peach-chirp-paired-section {9814  margin-top: 14px;9815  display: flex;9816  flex-direction: column;9817  gap: 8px;9818}9819.peach-chirp-paired-heading {9820  margin: 0;9821  font-family: var(--peach-mono, ui-monospace, monospace);9822  font-size: 10px;9823  font-weight: 500;9824  letter-spacing: 0.14em;9825  text-transform: uppercase;9826  color: var(--peach-t1);9827}98289829/* Footer --------------------------------------------------------------- */9830.peach-chirp-foot {9831  margin: 10px -4px -2px;9832  margin-top: auto;9833}9834.peach-chirp-foot-divider {9835  height: 1px;9836  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9837  margin-bottom: 10px;9838}9839.peach-chirp-foot-text {9840  font-size: 11px;9841  line-height: 1.5;9842  color: var(--peach-t1);9843  text-align: center;9844  padding: 0 4px;9845  text-wrap: pretty;9846}98479848/* Screen-reader-only live region. Kept off the visual flow but read by9849   assistive tech as the pairing phase advances. */9850.peach-sr-only {9851  position: absolute;9852  width: 1px; height: 1px;9853  padding: 0; margin: -1px;9854  overflow: hidden;9855  clip: rect(0, 0, 0, 0);9856  white-space: nowrap;9857  border: 0;9858}98599860/* Reduced motion — stage simplifies to opacity transitions only */9861@media (prefers-reduced-motion: reduce) {9862  .peach-chirp-bird-body,9863  .peach-chirp-bird-head-group,9864  .peach-chirp-bird-beak,9865  .peach-chirp-bird-wing,9866  .peach-chirp-bird-tuft,9867  .peach-chirp-bird-tail,9868  .peach-chirp-bird-eye-group,9869  .peach-chirp-bird-aura,9870  .peach-chirp-arc,9871  .peach-chirp-flight-path,9872  .peach-chirp-flight-path-2,9873  .peach-chirp-dot-glow,9874  .peach-chirp-dot-core,9875  .peach-chirp-dot-ring,9876  .peach-chirp-mote,9877  .peach-chirp-meter-bar,9878  .peach-chirp-listen-dot,9879  .peach-chirp-bird-slot,9880  .peach-chirp-bird-slot-mobile {9881    animation: none !important;9882    transition: opacity 0.2s linear !important;9883  }9884}98859886/* ─────────────────────────────────────────────────────────────────9887   Settings → Sync surface (v3 ChirpSync). Wraps the same bird9888   animation used by the pairing flow with a paired-devices list and9889   the "Pair a device" CTA.9890   ───────────────────────────────────────────────────────────────── */9891.peach-chirp-settings {9892  position: absolute;9893  inset: 0;9894  z-index: 3;9895  display: flex;9896  flex-direction: column;9897  gap: 18px;9898  padding: 14px 12px 12px;9899  width: 100%;9900  box-sizing: border-box;9901  overflow-y: auto;9902  overflow-x: hidden;9903  /* Same warm Chirp surface as the pairing screen — unifies the two views. */9904  background:9905    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9906    var(--peach-bg);9907  color: var(--peach-t0);9908  isolation: isolate;9909  /* Hide native scrollbar — content fits 99% of the time and a chunky9910     gutter ruins the surface. */9911  scrollbar-width: none;9912  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9913}9914.peach-chirp-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9915.peach-chirp-settings::before {9916  content: '';9917  position: absolute;9918  inset: 0;9919  pointer-events: none;9920  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9921  z-index: 0;9922}9923.peach-chirp-settings > * { position: relative; z-index: 1; }99249925.peach-chirp-settings--pairing {9926  padding: 0;9927  align-items: stretch;9928  justify-content: stretch;9929  background: none;9930  isolation: auto;9931}9932.peach-chirp-settings--pairing::before { display: none; }99339934.peach-chirp-settings-header {9935  display: flex;9936  align-items: center;9937  gap: 10px;9938}9939.peach-chirp-settings-title {9940  margin: 0;9941  font-family: var(--font-display, Georgia, serif);9942  font-style: italic;9943  font-size: 24px;9944  font-weight: 500;9945  line-height: 1;9946  color: var(--peach-t0);9947  letter-spacing: 0.005em;9948}9949.peach-chirp-settings-section {9950  margin: 6px 0 -4px;9951  font-size: 11px;9952  font-weight: 600;9953  letter-spacing: 0.08em;9954  text-transform: uppercase;9955  color: var(--peach-text-muted);9956}9957.peach-chirp-settings-error {9958  font-size: 12px;9959  padding: 8px 10px;9960  border-radius: 8px;9961  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);9962  color: var(--peach-text);9963}9964.peach-chirp-settings-footer {9965  margin-top: auto;9966  padding-top: 18px;9967  font-size: 11.5px;9968  line-height: 1.5;9969  color: var(--peach-text-muted);9970  text-align: center;9971}99729973/* Hero card shown when no devices are paired yet. */9974.peach-chirp-hero {9975  display: flex;9976  flex-direction: column;9977  align-items: center;9978  gap: 12px;9979  padding: 20px 12px 8px;9980  text-align: center;9981}9982.peach-chirp-hero-svg {9983  display: block;9984  max-width: 100%;9985  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));9986}9987.peach-chirp-hero-headline {9988  margin: 0;9989  font-family: var(--font-display, Georgia, serif);9990  font-style: italic;9991  font-size: 20px;9992  font-weight: 500;9993  line-height: 1.2;9994  letter-spacing: 0.005em;9995  color: var(--peach-t0);9996}9997.peach-chirp-hero-sub {9998  margin: 0;9999  font-size: 13px;10000  line-height: 1.5;10001  color: var(--peach-t1);10002  max-width: 320px;10003  text-wrap: pretty;10004}1000510006.peach-chirp-pair-cta {10007  display: flex;10008  justify-content: center;10009  padding: 4px 0 6px;10010}10011.peach-chirp-pair-button {10012  display: inline-flex;10013  align-items: center;10014  gap: 8px;10015  min-width: 220px;10016  justify-content: center;10017}10018.peach-chirp-pair-button-icon {10019  flex: 0 0 auto;10020}1002110022/* Paired devices list. Roomy rows that look at home next to the rest10023   of Settings; stale rows get a soft warm-warning border tint. */10024.peach-chirp-device-list {10025  list-style: none;10026  margin: 0;10027  padding: 0;10028  display: flex;10029  flex-direction: column;10030  gap: 8px;10031}10032.peach-chirp-device-row {10033  display: flex;10034  align-items: center;10035  gap: 12px;10036  padding: 12px;10037  border-radius: 10px;10038  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10039  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);10040}10041.peach-chirp-device-row[data-stale="true"] {10042  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);10043}10044.peach-chirp-device-icon {10045  width: 32px;10046  height: 32px;10047  display: flex;10048  align-items: center;10049  justify-content: center;10050  border-radius: 8px;10051  color: var(--peach-text);10052  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);10053}10054.peach-chirp-device-info {10055  flex: 1;10056  display: flex;10057  flex-direction: column;10058  gap: 2px;10059  min-width: 0;10060}10061.peach-chirp-device-name {10062  font-size: 14px;10063  font-weight: 600;10064  color: var(--peach-text);10065  overflow: hidden;10066  text-overflow: ellipsis;10067  white-space: nowrap;10068}10069.peach-chirp-device-meta {10070  font-size: 11.5px;10071  color: var(--peach-text-muted);10072  display: flex;10073  flex-wrap: wrap;10074  align-items: center;10075  gap: 8px;10076}10077.peach-chirp-device-badge {10078  font-size: 10.5px;10079  font-weight: 500;10080  letter-spacing: 0.02em;10081  padding: 2px 6px;10082  border-radius: 999px;10083  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);10084  color: var(--peach-text);10085}10086.peach-chirp-device-stale {10087  font-size: 10.5px;10088  font-weight: 500;10089  color: var(--peach-warn, #d29257);10090}10091.peach-chirp-device-remove {10092  flex: 0 0 auto;10093  color: var(--peach-text-muted);10094}10095.peach-chirp-device-remove:hover {10096  color: var(--peach-danger, #c25b4a);10097}10098.peach-chirp-unpair-confirm {10099  display: flex;10100  gap: 6px;10101  align-items: center;10102}1010310104/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */10105.peach-chirp-pro-card {10106  position: relative;10107  margin: 18px 12px;10108  padding: 18px 20px 22px;10109  border-radius: 22px;10110  background:10111    radial-gradient(140% 90% at 50% 0%,10112      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,10113      transparent 60%),10114    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10115  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);10116  box-shadow:10117    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,10118    0 18px 40px -24px rgba(0, 0, 0, 0.45);10119  display: flex;10120  flex-direction: column;10121  align-items: center;10122  gap: 10px;10123  text-align: center;10124  overflow: hidden;10125}10126.peach-chirp-pro-stage {10127  position: relative;10128  width: 220px;10129  height: 140px;10130  display: flex;10131  align-items: flex-end;10132  justify-content: center;10133  margin-bottom: 2px;10134}10135.peach-chirp-pro-bird-slot {10136  width: 140px;10137  height: 132px;10138  display: flex;10139  align-items: flex-end;10140  justify-content: center;10141  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));10142}10143.peach-chirp-pro-bird-slot .peach-chirp-bird {10144  width: 100%;10145  height: 100%;10146}10147.peach-chirp-pro-bird-slot .peach-chirp-bird svg {10148  width: 100%;10149  height: 100%;10150  overflow: visible;10151}10152.peach-chirp-pro-chirp {10153  position: absolute;10154  top: 14px;10155  right: 8px;10156  width: 96px;10157  height: 80px;10158  color: var(--peach-accent);10159  animation: peach-chirp-pulse 2.6s ease-in-out infinite;10160  transform-origin: 0% 50%;10161  pointer-events: none;10162}10163@keyframes peach-chirp-pulse {10164  0%, 100% { opacity: 0.35; transform: translateX(0) scale(0.92); }10165  45%      { opacity: 1;    transform: translateX(2px) scale(1); }10166  70%      { opacity: 0.6;  transform: translateX(4px) scale(1.04); }10167}10168@media (prefers-reduced-motion: reduce) {10169  .peach-chirp-pro-chirp { animation: none; opacity: 0.7; }10170}10171.peach-chirp-pro-headline {10172  margin: 4px 0 0;10173  font-family: var(--font-display, "Cormorant Garamond", serif);10174  font-style: italic;10175  font-size: 19px;10176  font-weight: 500;10177  letter-spacing: 0.01em;10178  color: var(--peach-t0);10179  max-width: 280px;10180  line-height: 1.25;10181}10182.peach-chirp-pro-body {10183  margin: 0;10184  font-size: 13px;10185  line-height: 1.55;10186  color: var(--peach-t1);10187  max-width: 300px;10188}10189.peach-chirp-pro-cta {10190  margin-top: 4px;10191}10192.peach-chirp-pro-foot {10193  margin: 2px 0 0;10194  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10195  font-size: 0.625rem;10196  letter-spacing: 0.08em;10197  text-transform: uppercase;10198  color: var(--peach-t2);10199  opacity: 0.75;10200}1020110202/* Shell border and shadow in light mode: match dark mode's near-invisible10203   border weight so the popup frame looks the same in both themes. */10204.light .peach-shell,10205.light .peach-screen {10206  border-color: rgba(26, 18, 8, 0.07);10207  box-shadow:10208    0 2px 8px rgba(80, 56, 32, 0.08),10209    0 14px 48px rgba(80, 56, 32, 0.10),10210    0 0 0 1px rgba(26, 18, 8, 0.04);10211}