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-icon { flex-shrink: 0; display: flex; align-items: center; color: var(--peach-t1); margin-top: 1px; }1066.peach-sync-pair-option-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }1067.peach-sync-pair-option-title { font-size: 0.8125rem; font-weight: 600; }1068.peach-sync-pair-option-sub { font-size: 0.6875rem; line-height: 1.45; color: var(--peach-t2); }1069.peach-sync-pair-option-chevron { flex-shrink: 0; color: var(--peach-t2); font-size: 1.05rem; line-height: 1.3; }10701071/* Breach badge */1072.peach-breach-badge {1073  display: flex;1074  position: relative;1075  z-index: 1;1076  align-items: center;1077  gap: 7px;1078  font-size: 0.5625rem;1079  color: var(--peach-breach);1080  padding: 5px 10px;1081  margin-bottom: 4px;1082  border-radius: 8px;1083  background: rgba(220, 80, 60, 0.07);1084  border: 1px solid rgba(220, 80, 60, 0.18);1085  letter-spacing: 0.04em;1086}10871088.peach-password-value.is-breached {1089  color: rgba(220, 80, 60, 0.75);1090  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1091}10921093/* ── Overlay views ─────────────────────────────────────────────────── */1094.peach-overlay-view {1095  position: absolute;1096  inset: 0;1097  display: flex;1098  flex-direction: column;1099  background:1100    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1101    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1102    var(--peach-bg);1103  z-index: 2;1104  overflow: hidden;1105  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1106}11071108.peach-overlay-view:has(.stk-shell) {1109  background: var(--peach-bg);1110}1111@keyframes overlay-in {1112  from { opacity: 0; transform: translateY(8px); }1113  to   { opacity: 1; transform: translateY(0); }1114}1115.peach-overlay-view.ov-enter-up {1116  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1117}1118.peach-overlay-view.ov-exit-up {1119  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1120}1121.peach-overlay-view.ov-enter-right {1122  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1123}1124.peach-overlay-view.ov-exit-right {1125  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1126}11271128@keyframes ov-enter-up {1129  from { opacity: 0; transform: translateY(18px); }1130  to   { opacity: 1; transform: translateY(0); }1131}1132@keyframes ov-exit-up {1133  from { opacity: 1; transform: translateY(0); }1134  to   { opacity: 0; transform: translateY(-12px); }1135}1136@keyframes ov-enter-right {1137  from { opacity: 0; transform: translateX(20px); }1138  to   { opacity: 1; transform: translateX(0); }1139}1140@keyframes ov-exit-right {1141  from { opacity: 1; transform: translateX(0); }1142  to   { opacity: 0; transform: translateX(20px); }1143}11441145/* Overlay shared header */1146.peach-overlay-header {1147  padding: 10px 12px 8px;1148  display: flex;1149  align-items: center;1150  gap: 10px;1151  flex-shrink: 0;1152}1153/* Back button — circular pill matching the settings stack masthead (.stk-back) */1154.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1155  width: 28px;1156  height: 28px;1157  flex: 0 0 28px;1158  border-radius: 999px;1159  border: 1px solid var(--peach-border);1160  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1161  color: var(--peach-t1);1162  padding: 0;1163}1164.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1165  color: var(--peach-t0);1166  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1167  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1168}1169.peach-overlay-title {1170  font-family: var(--font-display);1171  font-style: italic;1172  font-weight: 400;1173  font-size: 20px;1174  line-height: 1;1175  color: var(--peach-t0);1176  flex: 1;1177  text-align: center;1178}1179/* Balances the 28px back button so the title stays visually centred */1180.peach-overlay-spacer {1181  width: 28px;1182  flex: 0 0 28px;1183}11841185.peach-overlay-card {1186  background: var(--peach-s1);1187  border: 1px solid var(--peach-t3);1188  border-radius: 12px;1189  overflow: hidden;1190  width: 100%;1191}11921193.peach-onboarding-alt-actions {1194  display: flex;1195  flex-direction: column;1196  gap: 4px;1197  padding: 0;1198}11991200.peach-settings-copy {1201  margin: 0 0 10px;1202  font-size: 0.6875rem;1203  line-height: 1.5;1204  color: var(--peach-t2);1205}12061207.peach-settings-copy strong {1208  color: var(--peach-t0);1209}12101211.peach-settings-copy--spacious {1212  margin-bottom: 12px;1213}12141215.peach-settings-copy--result {1216  color: var(--peach-accent);1217  font-size: 0.8125rem;1218  text-align: center;1219  padding: 8px 0;1220}12211222.peach-settings-copy--danger {1223  color: var(--peach-breach);1224}12251226.peach-settings-copy--success {1227  color: var(--peach-accent);1228}12291230.peach-inline-feedback {1231  font-size: 0.6875rem;1232  margin: 10px 0 0;1233}12341235.peach-inline-feedback--ok {1236  color: var(--peach-accent);1237}12381239.peach-inline-feedback--error {1240  color: var(--peach-breach);1241}12421243.peach-inline-feedback--muted {1244  color: var(--peach-t2);1245  font-size: 0.625rem;1246  margin: 4px 0;1247}12481249.peach-inline-feedback--spaced {1250  margin-top: 12px;1251}12521253.peach-settings-actions--row {1254  display: flex;1255  gap: 6px;1256}12571258.peach-settings-actions--end {1259  margin-top: 14px;1260  justify-content: flex-end;1261}12621263.peach-settings-stack {1264  display: flex;1265  flex-direction: column;1266  gap: 6px;1267}12681269.peach-settings-stack--tight {1270  gap: 4px;1271}12721273.peach-settings-stack--spacious {1274  gap: 8px;1275}12761277.peach-settings-input {1278  width: 100%;1279  box-sizing: border-box;1280  padding: 8px 10px;1281  background: rgba(0, 0, 0, 0.22);1282  border: 1px solid transparent;1283  border-radius: 6px;1284  color: var(--peach-t0);1285  font-family: var(--font-ui);1286  font-size: 0.75rem;1287  outline: none;1288  transition: border-color 120ms ease, background 120ms ease;1289}12901291.peach-settings-input:focus {1292  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1293  background: rgba(0, 0, 0, 0.28);1294}12951296.peach-settings-input[type="password"] {1297  font-family: var(--font-mono);1298  letter-spacing: 0.04em;1299}13001301.peach-hidden-file-input {1302  display: none;1303}13041305.peach-checkbox-note {1306  display: flex;1307  align-items: flex-start;1308  gap: 8px;1309  font-size: 0.6875rem;1310  color: var(--peach-t1);1311  cursor: pointer;1312  margin: 12px 0;1313}13141315.peach-checkbox-note input {1316  margin-top: 1px;1317}13181319.peach-danger-notice {1320  background: rgba(220, 80, 60, 0.08);1321  border: 1px solid rgba(220, 80, 60, 0.2);1322  border-radius: 6px;1323  padding: 9px 11px;1324  font-size: 0.6875rem;1325  color: var(--peach-t1);1326  line-height: 1.5;1327}13281329.peach-info-notice {1330  font-size: 0.6875rem;1331  color: var(--peach-t1);1332  line-height: 1.5;1333  background: var(--surface-card);1334  border: 1px solid var(--peach-t3);1335  border-radius: 6px;1336  padding: 8px 10px;1337}13381339.peach-info-notice--warn {1340  border-color: rgba(220, 38, 38, 0.4);1341  background: rgba(220, 38, 38, 0.06);1342  color: rgba(220, 38, 38, 0.92);1343  margin-bottom: 8px;1344}13451346/* Warm helpful-context note — reads as a soft aside, not an alert. */1347.peach-info-notice--note {1348  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);1349  border-color: color-mix(in srgb, var(--peach-accent) 18%, transparent);1350  color: var(--peach-t2);1351}13521353.peach-strength-row {1354  display: flex;1355  align-items: center;1356  gap: 8px;1357  margin-bottom: 10px;1358}13591360.peach-strength-track {1361  flex: 1;1362  height: 4px;1363  background: var(--peach-s2);1364  border-radius: 2px;1365  overflow: hidden;1366}13671368.peach-strength-fill {1369  height: 100%;1370  border-radius: 2px;1371  transition: width 120ms ease, background 120ms ease;1372}13731374/* ── Type selector tabs ── */1375.peach-type-tabs {1376  display: flex;1377  gap: 0;1378  background: var(--peach-t4);1379  border-radius: 8px;1380  padding: 3px;1381}13821383.peach-type-tab {1384  flex: 1;1385  display: flex;1386  align-items: center;1387  justify-content: center;1388  gap: 6px;1389  padding: 6px 10px;1390  border-radius: 6px;1391  border: none;1392  background: transparent;1393  cursor: pointer;1394  font-family: Inter, system-ui, sans-serif;1395  font-size: 0.6875rem;1396  font-weight: 400;1397  letter-spacing: 0.04em;1398  color: var(--peach-t1);1399  transition: background 150ms ease, color 150ms ease;1400}14011402.peach-type-tab.is-active {1403  background: var(--peach-s2);1404  color: var(--peach-t0);1405  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1406}14071408.peach-type-tab:not(.is-active):hover {1409  color: var(--peach-t0);1410}14111412.peach-type-tab svg {1413  opacity: 0.7;1414  flex-shrink: 0;1415}14161417.peach-type-tab.is-active svg {1418  opacity: 1;1419}14201421/* ── List view ───────────────────────────────────────────────────────── */1422.peach-list-top {1423  padding: 0 10px;1424  min-height: 46px;1425  display: flex;1426  align-items: center;1427  gap: 6px;1428  border-bottom: 1px solid var(--peach-t3);1429  flex-shrink: 0;1430  background: var(--peach-s1);1431}14321433.peach-vault-list {1434  flex: 1;1435  overflow-y: auto;1436  scrollbar-width: none;1437}1438.peach-vault-list::-webkit-scrollbar { display: none; }14391440/* Scrollbar — vault list */1441.peach-vault-list {1442  scrollbar-width: thin;1443  scrollbar-color: var(--peach-t3) transparent;1444}14451446.peach-vault-list::-webkit-scrollbar {1447  width: 3px;1448}14491450.peach-vault-list::-webkit-scrollbar-thumb {1451  background: var(--peach-t3);1452  border-radius: 2px;1453}14541455.peach-entry-row {1456  width: 100%;1457  display: flex;1458  align-items: center;1459  gap: 10px;1460  padding: 9px 16px;1461  background: transparent;1462  border: none;1463  border-bottom: 1px solid var(--peach-t3);1464  cursor: pointer;1465  color: inherit;1466  text-align: left;1467  transition: background 80ms ease;1468}1469.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1470.peach-entry-row:last-child { border-bottom: none; }1471.peach-entry-row.is-active {1472  box-shadow: inset 2px 0 0 var(--peach-accent);1473  background: rgba(240,232,216,0.03);1474}1475.peach-entry-row:focus-visible {1476  outline: none;1477  box-shadow: 0 0 0 1px var(--peach-border-accent);1478  background: rgba(240,232,216,0.03);1479}1480.peach-entry-row-icon {1481  width: 26px; height: 26px;1482  border-radius: 7px;1483  border: 1px solid var(--peach-t3);1484  display: flex; align-items: center; justify-content: center;1485  color: var(--peach-t2);1486  flex-shrink: 0;1487}1488.peach-entry-row-icon.is-breach {1489  border-color: rgba(220,80,60,0.3);1490  color: rgba(220,80,60,0.7);1491}14921493/* Title-initials chip used as the favicon fallback for login entries whose1494 * real favicon hasn't been cached by the browser yet (freshly-imported,1495 * never-visited domains). Background colour is hashed from the title so1496 * the same entry always shows the same chip. The chip fits the same1497 * 26×26 row icon slot the favicon would take. */1498.peach-favicon-initials {1499  display: inline-flex;1500  align-items: center;1501  justify-content: center;1502  width: 100%;1503  height: 100%;1504  border-radius: 4px;1505  font-family: "IBM Plex Mono", monospace;1506  font-size: 0.5625rem;1507  font-weight: 600;1508  letter-spacing: 0.04em;1509  color: rgba(240, 232, 216, 0.92);1510  text-transform: uppercase;1511  user-select: none;1512}1513.peach-entry-row-info { flex: 1; min-width: 0; }1514.peach-entry-row-name {1515  display: block;1516  font-family: var(--font-display);1517  font-size: 1.0625rem;1518  font-style: italic;1519  font-weight: 400;1520  color: var(--peach-t0);1521  line-height: 1.2;1522  white-space: nowrap;1523  overflow: hidden;1524  text-overflow: ellipsis;1525}1526.peach-entry-row-meta {1527  display: block;1528  font-family: "IBM Plex Mono", monospace;1529  font-size: 0.5625rem;1530  color: var(--peach-t2);1531  margin-top: 1px;1532  letter-spacing: 0.05em;1533}1534.peach-entry-row-dot {1535  width: 5px; height: 5px;1536  border-radius: 50%;1537  background: rgba(220,80,60,0.7);1538  flex-shrink: 0;1539}1540.peach-new-entry-row {1541  display: flex;1542  align-items: center;1543  justify-content: center;1544  gap: 6px;1545  width: 100%;1546  padding: 11px;1547  background: transparent;1548  border: none;1549  border-top: 1px solid var(--peach-t3);1550  color: var(--peach-t2);1551  font-family: "IBM Plex Mono", monospace;1552  font-size: 0.5625rem;1553  text-transform: uppercase;1554  letter-spacing: 0.14em;1555  cursor: pointer;1556  flex-shrink: 0;1557  transition: color 120ms ease, background 120ms ease;1558}1559.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }15601561/* ── Multi-select mode ─────────────────────────────────────────────── */15621563/* Select-mode trigger button in sort bar — same shape as trash btn */1564.peach-sort-select-btn {1565  display: flex;1566  align-items: center;1567  justify-content: center;1568  padding: 3px 5px;1569  background: transparent;1570  border: none;1571  cursor: pointer;1572  color: var(--peach-t2);1573  border-radius: 4px;1574  transition: color 140ms ease, background 140ms ease;1575}1576.peach-sort-select-btn:hover {1577  color: var(--peach-t1);1578  background: var(--peach-t3);1579}15801581/* Sort bar in select mode */1582.peach-select-cancel-btn {1583  background: transparent;1584  border: none;1585  padding: 0 4px;1586  cursor: pointer;1587  font-family: "IBM Plex Mono", monospace;1588  font-size: 0.5625rem;1589  letter-spacing: 0.12em;1590  text-transform: uppercase;1591  color: var(--peach-t2);1592  transition: color 140ms ease;1593  flex-shrink: 0;1594}1595.peach-select-cancel-btn:hover { color: var(--peach-t0); }15961597.peach-select-count-label {1598  flex: 1;1599  text-align: center;1600  font-family: "IBM Plex Mono", monospace;1601  font-size: 0.5625rem;1602  letter-spacing: 0.14em;1603  text-transform: uppercase;1604  color: var(--peach-t1);1605}16061607.peach-select-all-btn {1608  background: transparent;1609  border: none;1610  padding: 0 4px;1611  cursor: pointer;1612  font-family: "IBM Plex Mono", monospace;1613  font-size: 0.5625rem;1614  letter-spacing: 0.12em;1615  text-transform: uppercase;1616  color: var(--peach-t2);1617  transition: color 140ms ease;1618  flex-shrink: 0;1619}1620.peach-select-all-btn:hover { color: var(--peach-accent); }16211622/* List in select mode */1623.peach-vault-list.is-selecting .peach-entry-row {1624  cursor: default;1625}1626.peach-vault-list.is-selecting .peach-entry-row:hover {1627  background: rgba(240,232,216,0.02);1628}1629.peach-vault-list.is-selecting .peach-entry-row.is-selected {1630  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1631}1632.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1633  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1634}16351636/* Select indicator circles in icon slot */1637.peach-entry-row-icon.is-select-icon {1638  color: var(--peach-t2);1639}1640.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1641  color: var(--peach-accent);1642}16431644/* Delete action bar at bottom (replaces new-entry row) */1645.peach-select-action-bar {1646  display: flex;1647  align-items: center;1648  justify-content: center;1649  gap: 7px;1650  width: 100%;1651  padding: 11px;1652  background: transparent;1653  border: none;1654  border-top: 1px solid var(--peach-t3);1655  color: var(--peach-t1);1656  font-family: "IBM Plex Mono", monospace;1657  font-size: 0.5625rem;1658  text-transform: uppercase;1659  letter-spacing: 0.14em;1660  cursor: pointer;1661  flex-shrink: 0;1662  transition: color 120ms ease, background 120ms ease;1663}1664.peach-select-action-bar:not(:disabled):hover {1665  color: var(--peach-t0);1666  background: rgba(220,80,60,0.06);1667}1668.peach-select-action-bar:not(:disabled):hover svg {1669  stroke: rgba(220,80,60,0.8);1670}1671.peach-select-action-bar:disabled,1672.peach-select-action-bar.is-empty {1673  color: var(--peach-t2);1674  cursor: default;1675  opacity: 0.5;1676}1677.peach-search-counter-list {1678  white-space: nowrap;1679  flex-shrink: 0;1680}1681.peach-list-empty {1682  min-height: 180px;1683  display: grid;1684  place-items: center;1685  color: var(--peach-t2);1686  font-family: "IBM Plex Mono", monospace;1687  font-size: 0.6875rem;1688}16891690/* ── Settings view ───────────────────────────────────────────────────── */1691.peach-settings-body {1692  flex: 1;1693  overflow-y: auto;1694  min-height: 0;1695  display: flex;1696  flex-direction: column;1697  padding: 2px 0 10px;1698}1699.peach-settings-group {1700  margin: 4px 10px;1701  padding: 9px 14px 11px;1702  border-radius: 12px;1703  border: 1px solid rgba(255, 255, 255, 0.07);1704  background: rgba(26, 20, 16, 0.60);1705  backdrop-filter: blur(10px) saturate(1.3);1706  -webkit-backdrop-filter: blur(10px) saturate(1.3);1707}17081709.peach-settings-group + .peach-settings-group {1710  margin-top: 6px;1711}17121713@supports not (backdrop-filter: blur(1px)) {1714  .peach-settings-group {1715    background: rgba(26, 20, 16, 0.90);1716    border-color: rgba(255, 255, 255, 0.09);1717    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1718  }1719}17201721.light .peach-settings-group,1722[data-theme="light"] .peach-settings-group {1723  background: rgba(245, 237, 226, 0.70);1724  border-color: rgba(26, 18, 8, 0.08);1725  backdrop-filter: blur(10px) saturate(1.2);1726  -webkit-backdrop-filter: blur(10px) saturate(1.2);1727}17281729@supports not (backdrop-filter: blur(1px)) {1730  .light .peach-settings-group,1731  [data-theme="light"] .peach-settings-group {1732    background: rgba(245, 237, 226, 0.97);1733    border-color: rgba(26, 18, 8, 0.10);1734  }1735}1736.peach-export-intro {1737  padding-bottom: 8px;1738}1739.peach-export-card {1740  display: grid;1741  gap: 10px;1742}1743.peach-rune-canvas {1744  border-radius: 8px;1745  background: rgba(0, 0, 0, 0.22);1746  flex: 1;1747  align-self: center;1748}1749.peach-script-input {1750  font-family: "PeachScript", monospace;1751  font-size: 0.6875rem;1752  line-height: 1.9;1753  letter-spacing: 0.06em;1754  color: var(--peach-t0);1755  background: rgba(0, 0, 0, 0.22);1756  border: none;1757  border-radius: 6px;1758  padding: 12px;1759  width: 100%;1760  min-height: 96px;1761  resize: vertical;1762  word-break: break-all;1763  scrollbar-width: none;1764  -ms-overflow-style: none;1765}17661767.peach-script-input::-webkit-scrollbar { display: none; }1768.peach-csv-warning {1769  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1770  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1771  color: var(--peach-t0);1772  border-radius: 6px;1773  padding: 10px 12px;1774  margin-bottom: 8px;1775  font-size: 0.75rem;1776  line-height: 1.45;1777}1778.peach-export-card--primary {1779  background:1780    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1781}17821783/* Export menu — distribute the three format cards across the popup. */1784.peach-export-menu {1785  display: flex;1786  flex-direction: column;1787  flex: 1;1788  min-height: 0;1789}1790.peach-export-menu .peach-settings-group {1791  flex: 1;1792  display: flex;1793  flex-direction: column;1794  justify-content: center;1795  gap: 10px;1796}17971798/* Result view — the script-string fills the remaining vertical surface. */1799.peach-export-result-group {1800  flex: 1;1801  display: flex;1802  flex-direction: column;1803  min-height: 0;1804  border-bottom: none;1805}1806.peach-export-result-group .peach-export-card {1807  flex: 1;1808  min-height: 0;1809  display: flex;1810  flex-direction: column;1811  gap: 10px;1812}1813.peach-export-result-group .peach-export-card-copy {1814  flex-shrink: 0;1815}1816.peach-export-result-group .peach-settings-label {1817  flex-shrink: 0;1818}1819.peach-export-result-group button {1820  flex-shrink: 0;1821}1822.peach-export-card-head {1823  display: flex;1824  align-items: center;1825  justify-content: space-between;1826  gap: 10px;1827}1828.peach-export-card-copy {1829  margin: 0;1830  font-size: 0.75rem;1831  line-height: 1.55;1832  color: var(--peach-t1);1833}1834.peach-export-note {1835  margin: 0;1836  font-size: 0.625rem;1837  line-height: 1.5;1838  color: var(--peach-t2);1839}1840.peach-export-strength-track {1841  height: 3px;1842  background: var(--peach-border);1843  border-radius: 2px;1844  margin: 4px 0 2px;1845  overflow: hidden;1846}1847.peach-export-strength-fill {1848  height: 100%;1849  border-radius: 2px;1850  transition: width 250ms ease, background 250ms ease;1851}1852.peach-export-strength-warn {1853  margin: 0;1854  font-size: 0.625rem;1855  line-height: 1.5;1856  color: #e84040;1857  font-family: "IBM Plex Mono", monospace;1858}1859.peach-export-strength-hint {1860  margin: 0;1861  font-size: 0.625rem;1862  line-height: 1.5;1863  color: var(--peach-t2);1864  font-family: "IBM Plex Mono", monospace;1865}1866.peach-export-pill {1867  display: inline-flex;1868  align-items: center;1869  padding: 4px 8px;1870  border-radius: 999px;1871  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1872  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1873  color: var(--peach-accent);1874  font-family: "IBM Plex Mono", monospace;1875  font-size: 0.5rem;1876  letter-spacing: 0.12em;1877  text-transform: uppercase;1878  white-space: nowrap;1879}1880.peach-export-pill--danger {1881  border-color: rgba(220,80,60,0.22);1882  background: rgba(220,80,60,0.08);1883  color: var(--peach-breach);1884}1885.peach-settings-label {1886  margin: 0 0 6px;1887  font-family: "IBM Plex Mono", monospace;1888  font-size: 0.5rem;1889  text-transform: uppercase;1890  letter-spacing: 0.18em;1891  color: var(--peach-t2);1892}1893.peach-settings-row {1894  display: flex;1895  align-items: center;1896  justify-content: space-between;1897  gap: 12px;1898  min-height: 34px;1899  padding: 6px 0;1900  font-size: 0.8125rem;1901  color: var(--peach-t1);1902}1903.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1904.peach-settings-value {1905  font-family: "IBM Plex Mono", monospace;1906  font-size: 0.625rem;1907  color: var(--peach-t2);1908}19091910.peach-settings-value--status {1911  display: flex;1912  align-items: center;1913  gap: 6px;1914}19151916.peach-settings-link {1917  font-family: "IBM Plex Mono", monospace;1918  font-size: 0.625rem;1919  color: var(--peach-accent);1920  text-decoration: none;1921  cursor: pointer;1922}1923.peach-settings-link:hover {1924  text-decoration: underline;1925}19261927.peach-settings-row--stack {1928  flex-direction: column;1929  align-items: stretch;1930  gap: 6px;1931}19321933.peach-settings-row--top {1934  align-items: flex-start;1935}19361937.peach-settings-row-main {1938  display: flex;1939  flex-direction: column;1940  gap: 4px;1941  flex: 1;1942}1943.peach-toggle {1944  width: 28px; height: 16px;1945  border-radius: 999px;1946  background: var(--peach-t3);1947  border: 1px solid var(--peach-t3);1948  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1949  flex-shrink: 0;1950  transition: background 200ms ease, border-color 200ms ease;1951  cursor: pointer;1952}1953.peach-toggle.is-on {1954  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1955  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1956}1957.peach-toggle-knob {1958  width: 10px; height: 10px;1959  border-radius: 50%;1960  background: var(--peach-t2);1961  flex-shrink: 0;1962  transform: translateX(0px);1963  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1964}1965.peach-toggle.is-on .peach-toggle-knob {1966  background: var(--peach-accent);1967  transform: translateX(12px);1968}1969.peach-settings-footer {1970  display: flex;1971  align-items: center;1972  gap: 8px;1973  margin-top: auto;1974  padding: 14px 16px 8px;1975  font-family: "IBM Plex Mono", monospace;1976  font-size: 0.5625rem;1977  color: var(--peach-t2);1978}19791980/* ── Settings home navigation ──────────────────────────────────────────── */1981.peach-settings-nav-label {1982  margin: 0 0 2px;1983  padding: 12px 16px 4px;1984  font-family: "IBM Plex Mono", monospace;1985  font-size: 0.5rem;1986  text-transform: uppercase;1987  letter-spacing: 0.18em;1988  color: var(--peach-t2);1989}19901991.peach-settings-cat-row {1992  display: flex;1993  align-items: center;1994  gap: 10px;1995  width: 100%;1996  padding: 9px 16px;1997  background: none;1998  border: none;1999  border-bottom: 1px solid var(--peach-t3);2000  cursor: pointer;2001  text-align: left;2002  color: inherit;2003  transition: background var(--peach-dur-80) ease;2004}2005.peach-settings-cat-row:hover {2006  background: var(--peach-t3);2007}2008.peach-settings-cat-row:last-child {2009  border-bottom: none;2010}20112012.peach-settings-cat-icon {2013  width: 28px;2014  height: 28px;2015  border-radius: 7px;2016  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2017  color: var(--peach-accent);2018  display: flex;2019  align-items: center;2020  justify-content: center;2021  flex-shrink: 0;2022}2023/* Light theme: peach-on-cream is too low-contrast — both colors are warm.2024   Darken the icon stroke to ink and bump the bg tint so the icon reads2025   sharply while the cell still feels accent-tinted. */2026.light .peach-settings-cat-icon {2027  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);2028  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));2029}20302031.peach-settings-cat-content {2032  flex: 1;2033  display: flex;2034  flex-direction: column;2035  gap: 2px;2036  min-width: 0;2037}20382039.peach-settings-cat-name {2040  font-size: 0.8125rem;2041  font-weight: 450;2042  color: var(--peach-t0);2043  line-height: 1.2;2044}20452046.peach-settings-cat-desc {2047  font-size: 0.625rem;2048  color: var(--peach-t2);2049  line-height: 1.3;2050  white-space: nowrap;2051  overflow: hidden;2052  text-overflow: ellipsis;2053}20542055.peach-settings-cat-chevron {2056  color: var(--peach-t2);2057  flex-shrink: 0;2058  opacity: 0.5;2059}20602061/* ── Settings sub-view section labels ──────────────────────────────────── */2062.peach-settings-sub-label {2063  margin: 12px 0 4px;2064  font-family: "IBM Plex Mono", monospace;2065  font-size: 0.5rem;2066  text-transform: uppercase;2067  letter-spacing: 0.18em;2068  color: var(--peach-t2);2069}2070.peach-settings-sub-label:first-child {2071  margin-top: 4px;2072}20732074/* ── Settings: collapsible Advanced section ─────────────────────────────── */2075.peach-settings-advanced-toggle {2076  display: flex;2077  align-items: center;2078  justify-content: space-between;2079  width: 100%;2080  background: none;2081  border: none;2082  cursor: pointer;2083  padding: 12px 0 4px;2084  margin: 0;2085  color: inherit;2086}2087.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {2088  color: var(--peach-t1);2089}2090.peach-settings-advanced-chevron {2091  font-size: 0.5625rem;2092  color: var(--peach-t3);2093  letter-spacing: 0;2094  transition: color 120ms ease;2095}20962097/* ── Feedback form ──────────────────────────────────────────────────────── */2098.peach-feedback-group {2099  flex: 1;2100  display: flex;2101  flex-direction: column;2102  border-bottom: none;2103}21042105.peach-feedback-intro {2106  margin: 4px 0 14px;2107  font-size: 0.75rem;2108  line-height: 1.55;2109  color: var(--peach-t1);2110}21112112.peach-feedback-chips {2113  display: flex;2114  flex-wrap: wrap;2115  gap: 6px;2116  margin-bottom: 14px;2117}21182119.peach-feedback-chip {2120  padding: 4px 10px;2121  border-radius: 999px;2122  border: 1px solid var(--peach-t3);2123  background: none;2124  color: var(--peach-t2);2125  font-size: 0.6875rem;2126  font-family: var(--font-ui);2127  cursor: pointer;2128  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2129    background var(--peach-dur-80) ease;2130}2131.peach-feedback-chip:hover {2132  border-color: var(--peach-t2);2133  color: var(--peach-t1);2134}2135.peach-feedback-chip.is-active {2136  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);2137  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));2138  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);2139  box-shadow:2140    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),2141    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);2142  font-weight: 700;2143}21442145.peach-feedback-textarea {2146  flex: 1;2147  width: 100%;2148  min-height: 120px;2149  box-sizing: border-box;2150  background: rgba(0, 0, 0, 0.22);2151  border: 1px solid transparent;2152  border-radius: 6px;2153  color: var(--peach-t0);2154  font-size: 0.75rem;2155  font-family: var(--font-ui);2156  line-height: 1.5;2157  padding: 8px 10px;2158  resize: none;2159  outline: none;2160  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2161}2162.peach-feedback-textarea:focus {2163  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2164  background: rgba(0, 0, 0, 0.28);2165}2166.peach-feedback-textarea:focus {2167  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2168}2169.peach-feedback-textarea::placeholder {2170  color: var(--peach-t2);2171}21722173.peach-feedback-meta {2174  margin: 6px 0 0;2175  font-size: 0.625rem;2176  color: var(--peach-t2);2177  font-family: "IBM Plex Mono", monospace;2178}21792180.peach-feedback-result {2181  margin: 8px 0 0;2182  font-size: 0.6875rem;2183  font-family: "IBM Plex Mono", monospace;2184}2185.peach-feedback-result--ok { color: var(--peach-sync-ok); }2186.peach-feedback-result--err { color: var(--peach-breach); }21872188.peach-feedback-submit {2189  width: 100%;2190  margin-top: 12px;2191  justify-content: center;2192}21932194.peach-feedback-anon {2195  margin: 8px 0 0;2196  font-size: 0.625rem;2197  color: var(--peach-t2);2198  text-align: center;2199}22002201.peach-feedback-thanks {2202  margin: auto 0;2203  padding: 18px 14px;2204  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);2205  border-radius: 8px;2206  background:2207    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),2208    rgba(0, 0, 0, 0.18);2209  color: var(--peach-t1);2210  text-align: center;2211}22122213.peach-feedback-thanks p {2214  margin: 0;2215  font-size: 0.75rem;2216  line-height: 1.5;2217}22182219.peach-feedback-thanks-title {2220  color: var(--peach-t0);2221  font-family: "Cormorant Garamond", serif;2222  font-size: 1.375rem !important;2223  line-height: 1.1 !important;2224  margin-bottom: 8px !important;2225}22262227.peach-passkey-badge {2228  margin-left: 8px;2229  font-size: 0.625rem;2230  letter-spacing: 0.06em;2231  text-transform: uppercase;2232  color: var(--peach-t2);2233  font-family: var(--font-ui);2234  vertical-align: middle;2235}22362237.peach-passkey-delete-btn {2238  color: var(--peach-breach);2239  border-color: rgba(229, 85, 85, 0.25);2240}22412242.peach-passkey-delete-confirm {2243  display: flex;2244  align-items: center;2245  gap: 8px;2246  padding: 8px 10px;2247  background: rgba(229, 85, 85, 0.06);2248  border: 1px solid rgba(229, 85, 85, 0.2);2249  border-radius: 6px;2250}22512252.peach-passkey-delete-confirm-copy {2253  flex: 1;2254  font-size: 0.6875rem;2255  color: var(--peach-t1);2256}22572258.peach-passkey-delete-btn--confirm {2259  color: var(--peach-breach);2260  border-color: rgba(229, 85, 85, 0.4);2261}22622263.peach-passkey-activity {2264  flex-direction: column;2265  align-items: flex-start;2266  gap: 4px;2267}22682269.peach-passkey-meta {2270  font-size: 0.6875rem;2271  color: var(--peach-t2);2272}22732274.peach-passkey-actions {2275  position: relative;2276  z-index: 1;2277  margin-top: 14px;2278  display: flex;2279  flex-direction: column;2280  gap: 8px;2281}22822283.peach-passkey-approval {2284  display: flex;2285  flex-direction: column;2286  align-items: center;2287  padding: 16px 20px 14px;2288  gap: 8px;2289  text-align: center;2290}22912292.peach-passkey-approval-icon {2293  width: 36px;2294  height: 36px;2295  border-radius: 10px;2296  background: var(--peach-s2);2297  border: 1px solid var(--peach-t3);2298  display: flex;2299  align-items: center;2300  justify-content: center;2301  flex-shrink: 0;2302  color: var(--peach-accent);2303}23042305.peach-passkey-approval-icon img,2306.peach-passkey-approval-icon svg {2307  width: 22px;2308  height: 22px;2309  border-radius: 5px;2310}23112312.peach-passkey-approval-rp {2313  font-family: var(--font-ui);2314  font-size: 0.75rem;2315  color: var(--peach-t2);2316  letter-spacing: 0.03em;2317}23182319.peach-passkey-approval-action {2320  font-family: var(--font-display);2321  font-style: italic;2322  font-weight: 300;2323  font-size: 18px;2324  color: var(--peach-t0);2325  line-height: 1.1;2326  margin: 1px 0;2327}23282329.peach-passkey-approval-user {2330  font-family: var(--font-mono);2331  font-size: 0.6875rem;2332  color: var(--peach-t1);2333  background: var(--peach-s2);2334  border: 1px solid var(--peach-t3);2335  border-radius: 4px;2336  padding: 3px 8px;2337}23382339.peach-passkey-approval-notice {2340  font-size: 0.625rem;2341  color: var(--peach-t2);2342  line-height: 1.5;2343  max-width: 220px;2344}23452346.peach-passkey-approval-actions {2347  display: flex;2348  gap: 8px;2349  width: 100%;2350  margin-top: 6px;2351}23522353.peach-passkey-approval-actions .peach-btn {2354  flex: 1;2355}23562357/* ── Inline generator drawer ── */2358.peach-generator-drawer {2359  display: grid;2360  grid-template-rows: 0fr;2361  transition: grid-template-rows 320ms var(--peach-curve-arrival);2362  overflow: hidden;2363}2364.peach-generator-drawer.is-open {2365  grid-template-rows: 1fr;2366}2367.peach-generator-drawer-inner {2368  min-height: 0;2369  overflow: hidden;2370}2371.peach-generator-drawer-content {2372  border-top: 1px solid var(--peach-t3);2373  padding: 8px 0 4px;2374  display: flex;2375  flex-direction: column;2376  gap: 8px;2377}23782379/* ── Compact generator (inside entry edit) ── */2380.peach-generator-drawer-content--compact {2381  border-top: 1px solid var(--peach-t3);2382  padding: 8px 0 2px;2383  gap: 7px;2384}2385.peach-pwgen-compact-display-row {2386  display: flex;2387  align-items: center;2388  gap: 6px;2389}2390.peach-pwgen-compact-output {2391  flex: 1;2392  min-width: 0;2393  font-family: "IBM Plex Mono", monospace;2394  font-size: 0.6875rem;2395  font-weight: 400;2396  letter-spacing: 0.04em;2397  color: var(--peach-t0);2398  background: rgba(240, 232, 216, 0.04);2399  border: 1px solid var(--peach-t3);2400  border-radius: 5px;2401  padding: 5px 8px;2402  line-height: 1.5;2403  outline: none;2404  transition: border-color 120ms ease;2405}24062407.peach-pwgen-compact-output:focus {2408  border-color: var(--peach-t1);2409}2410.peach-pwgen-compact-controls {2411  display: flex;2412  align-items: center;2413  gap: 6px;2414}2415.peach-pwgen-compact-slider {2416  flex: 1;2417  min-width: 0;2418  height: 2px !important;2419}2420.peach-pwgen-compact-controls .peach-pwgen-len-num {2421  flex-shrink: 0;2422  min-width: 18px;2423  text-align: right;2424}2425.peach-pwgen-compact-pills {2426  display: flex;2427  gap: 3px;2428  flex-shrink: 0;2429}2430.peach-pwgen-compact-pills .peach-pwgen-pill {2431  padding: 2px 7px;2432  font-size: 0.5rem;2433}2434.peach-pwgen-compact-use {2435  flex-shrink: 0;2436  font-size: 0.625rem !important;2437  padding: 3px 9px !important;2438  min-height: 22px !important;2439  border-radius: 5px !important;2440}24412442/* ── Password edit row (input + eye toggle side-by-side) ── */2443.peach-password-edit-row {2444  display: flex;2445  align-items: center;2446  gap: 6px;2447}2448.peach-password-edit-row .peach-inline-input {2449  flex: 1;2450  min-width: 0;2451}24522453/* ── Generate toggle link ── */2454.peach-generate-toggle-link {2455  display: inline-flex;2456  align-items: center;2457  gap: 5px;2458  background: none;2459  border: none;2460  padding: 0;2461  cursor: pointer;2462  font-family: "IBM Plex Mono", monospace;2463  font-size: 0.625rem;2464  color: var(--peach-t2);2465  letter-spacing: 0.04em;2466  transition: color 120ms ease;2467  align-self: flex-start;2468}2469.peach-generate-toggle-link:hover {2470  color: var(--peach-accent);2471}24722473/* Holds the generate + history toggle links on one row under the editor. */2474.peach-password-edit-links {2475  display: flex;2476  align-items: center;2477  gap: 14px;2478  flex-wrap: wrap;2479}24802481/* ── Past-password history list ── */2482.peach-password-history {2483  display: grid;2484  gap: 4px;2485  margin-top: 2px;2486  max-height: 168px;2487  overflow-y: auto;2488  scrollbar-width: thin;2489}2490.peach-history-row {2491  display: flex;2492  align-items: center;2493  justify-content: space-between;2494  gap: 8px;2495  padding: 5px 7px;2496  border-radius: 7px;2497  background: color-mix(in srgb, var(--peach-accent) 5%, transparent);2498  border: 1px solid color-mix(in srgb, var(--peach-accent) 9%, transparent);2499}2500.peach-history-main {2501  display: flex;2502  flex-direction: column;2503  gap: 1px;2504  min-width: 0;2505  flex: 1;2506}2507.peach-history-pw {2508  font-family: "IBM Plex Mono", monospace;2509  font-size: 0.6875rem;2510  color: var(--peach-t1);2511  white-space: nowrap;2512  overflow: hidden;2513  text-overflow: ellipsis;2514}2515.peach-history-pw .peach-password-mask {2516  letter-spacing: 0.08em;2517  color: var(--peach-t2);2518}2519.peach-history-age {2520  font-family: "IBM Plex Mono", monospace;2521  font-size: 0.5625rem;2522  color: var(--peach-t3, var(--peach-t2));2523  letter-spacing: 0.03em;2524}2525.peach-history-actions {2526  display: flex;2527  align-items: center;2528  gap: 2px;2529  flex-shrink: 0;2530}2531.peach-history-use {2532  font-family: "IBM Plex Mono", monospace;2533  font-size: 0.5625rem;2534  letter-spacing: 0.05em;2535  padding: 3px 7px;2536}2537.peach-history-empty {2538  font-family: "IBM Plex Mono", monospace;2539  font-size: 0.625rem;2540  line-height: 1.45;2541  color: var(--peach-t2);2542  padding: 6px 8px;2543  border-radius: 7px;2544  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);2545  border: 1px solid color-mix(in srgb, var(--peach-accent) 8%, transparent);2546}25472548/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2549.peach-entry-body {2550  flex: 1;2551  overflow-y: auto;2552  overflow-x: hidden;2553  scrollbar-width: none;2554  -ms-overflow-style: none;2555  overscroll-behavior: contain;2556  display: grid;2557  gap: 10px;2558  align-content: start;2559  padding: 10px 20px 14px;2560  min-width: 0;2561  min-height: 0;2562}2563.peach-entry-body::-webkit-scrollbar { display: none; }25642565/* Type-toggle pills + inline note toolbar */2566.peach-new-type-row {2567  display: flex;2568  align-items: center;2569  gap: 6px;2570  margin-bottom: 2px;2571}2572.peach-new-type-btn {2573  background: transparent;2574  border: 1px solid var(--peach-t3);2575  border-radius: 12px;2576  padding: 3px 10px;2577  font-family: "IBM Plex Mono", monospace;2578  font-size: 0.5625rem;2579  letter-spacing: 0.12em;2580  text-transform: uppercase;2581  color: var(--peach-t2);2582  cursor: pointer;2583  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2584}2585.peach-new-type-btn.is-active {2586  color: var(--peach-t0);2587  border-color: var(--peach-accent);2588  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2589}2590.peach-new-type-btn:not(.is-active):hover {2591  color: var(--peach-t1);2592  border-color: var(--peach-t2);2593}25942595/* Editable title */2596.peach-new-title-wrap { margin: 0 0 2px; }2597.peach-new-title-input {2598  background: transparent;2599  border: none;2600  outline: none;2601  width: 100%;2602  color: var(--peach-t0);2603  font-family: var(--font-display);2604  font-style: italic;2605  font-weight: 400;2606  font-size: 40px;2607  line-height: 0.95;2608  caret-color: var(--peach-accent);2609}2610.peach-new-title-input::placeholder { color: var(--peach-t2); }26112612/* Editable domain field */2613.peach-domain-edit-row {2614  display: flex;2615  align-items: center;2616  gap: 6px;2617}26182619.peach-domain-edit-row .peach-domain-value--edit {2620  flex: 1;2621  width: 0;2622}26232624.peach-domain-url-btn {2625  flex-shrink: 0;2626  background: transparent;2627  border: none;2628  cursor: pointer;2629  color: var(--peach-t3);2630  padding: 2px 3px;2631  display: flex;2632  align-items: center;2633  line-height: 0;2634  border-radius: 3px;2635  transition: color 120ms ease;2636}26372638.peach-domain-url-btn:hover {2639  color: var(--peach-accent);2640}26412642.peach-domain-value--edit {2643  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2644  font-size: 0.625rem;2645  font-style: italic;2646  letter-spacing: 0.12em;2647  color: var(--peach-t1);2648  background: transparent;2649  border: none;2650  border-bottom: 1px solid var(--peach-t3);2651  outline: none;2652  width: 100%;2653  padding: 2px 0;2654  caret-color: var(--peach-accent);2655  transition: border-color 140ms ease, color 140ms ease;2656}2657.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2658.peach-domain-value--edit:focus {2659  border-bottom-color: rgba(240, 232, 216, 0.28);2660  color: var(--peach-t0);2661}26622663/* Editable field values (username, password, totp) */2664.peach-field-value--edit {2665  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2666  font-size: 0.8125rem;2667  color: var(--peach-t0);2668  background: transparent;2669  border: none;2670  border-bottom: 1px solid var(--peach-t3);2671  outline: none;2672  flex: 1;2673  min-width: 0;2674  padding: 3px 0;2675  caret-color: var(--peach-accent);2676  transition: border-color 140ms ease, color 140ms ease;2677}2678.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2679.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2680.peach-field-value--edit:focus {2681  border-bottom-color: rgba(240, 232, 216, 0.28);2682  color: var(--peach-t0);2683}26842685/* "+ add optional field" links */2686.peach-entry-add-links {2687  display: flex;2688  gap: 12px;2689  flex-wrap: wrap;2690  margin-top: -2px;2691}2692.peach-add-field-link {2693  background: transparent;2694  border: none;2695  padding: 0;2696  cursor: pointer;2697  font-family: "IBM Plex Mono", monospace;2698  font-size: 0.5625rem;2699  letter-spacing: 0.1em;2700  text-transform: uppercase;2701  color: var(--peach-t2);2702  transition: color 140ms ease;2703}2704.peach-add-field-link:hover { color: var(--peach-accent); }27052706/* ── New entry form (legacy classes) ────────────────────────────────── */2707.peach-new-body {2708  flex: 1;2709  overflow-y: auto;2710  padding: 10px 20px 14px;2711}2712.peach-new-name-input {2713  background: transparent;2714  border: none;2715  outline: none;2716  width: 100%;2717  color: var(--peach-t0);2718  font-family: var(--font-display);2719  font-style: italic;2720  font-weight: 400;2721  font-size: 40px;2722  line-height: 0.95;2723  caret-color: var(--peach-accent);2724}2725.peach-new-name-input::placeholder { color: var(--peach-t2); }2726.peach-new-field-input {2727  background: transparent;2728  border: none;2729  outline: none;2730  flex: 1;2731  min-width: 0;2732  caret-color: var(--peach-accent);2733}2734.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }27352736/* ── Canary card ── */2737.peach-canary-card {2738  border: 1px solid rgba(217, 160, 48, 0.2);2739  background: rgba(217, 160, 48, 0.03);2740  border-radius: 8px;2741  padding: 12px;2742}27432744.peach-canary-settings-header {2745  display: flex;2746  align-items: center;2747  justify-content: space-between;2748  cursor: pointer;2749  user-select: none;2750}27512752.peach-canary-card .peach-label {2753  color: rgba(217, 160, 48, 0.85);2754}27552756.peach-canary-card .peach-new-field-input {2757  border-color: rgba(217, 160, 48, 0.25);2758}27592760.peach-canary-card .peach-new-field-input:focus {2761  border-color: rgba(217, 160, 48, 0.5);2762}27632764.peach-canary-body {2765  margin-top: 12px;2766  display: flex;2767  flex-direction: column;2768  gap: 10px;2769}27702771.peach-canary-explainer {2772  display: flex;2773  gap: 10px;2774  padding: 10px 12px;2775  border-radius: 10px;2776  background: rgba(217, 160, 48, 0.06);2777  border: 1px solid rgba(217, 160, 48, 0.22);2778  margin-bottom: 4px;2779}27802781.peach-canary-explainer-icon {2782  font-size: 1rem;2783  flex-shrink: 0;2784  line-height: 1.2;2785}27862787.peach-canary-explainer-title {2788  font-family: var(--font-ui);2789  font-size: 0.6875rem;2790  font-weight: 500;2791  color: rgba(217, 160, 48, 0.9);2792  margin: 0 0 3px;2793}27942795.peach-canary-explainer-copy {2796  font-family: var(--font-ui);2797  font-size: 0.625rem;2798  color: var(--peach-t2);2799  line-height: 1.55;2800  margin: 0;2801}28022803.peach-canary-hint {2804  font-size: 0.625rem;2805  color: var(--peach-t2);2806  font-family: Inter, system-ui, sans-serif;2807  line-height: 1.5;2808  margin-top: 4px;2809}28102811.peach-canary-actions-row {2812  display: flex;2813  align-items: center;2814  gap: 8px;2815}28162817.peach-canary-test-btn {2818  border-color: rgba(217, 160, 48, 0.3);2819  color: rgba(217, 160, 48, 0.85);2820}28212822.peach-canary-test-result {2823  font-size: 0.625rem;2824  font-family: Inter, system-ui, sans-serif;2825}28262827.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2828.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }28292830.peach-canary-badge {2831  display: flex;2832  position: relative;2833  z-index: 1;2834  align-items: center;2835  gap: 5px;2836  padding: 4px 10px;2837  background: rgba(217, 160, 48, 0.12);2838  border: 1px solid rgba(217, 160, 48, 0.35);2839  border-radius: 6px;2840  margin-bottom: 6px;2841  width: fit-content;2842}28432844.peach-canary-badge-label {2845  font-size: 0.625rem;2846  letter-spacing: 0.06em;2847  color: rgba(217, 160, 48, 0.9);2848  font-family: var(--font-ui);2849  text-transform: uppercase;2850}28512852.peach-canary-badge-icon {2853  font-size: 0.6875rem;2854}28552856.peach-canary-suppress-row {2857  display: flex;2858  align-items: center;2859  gap: 8px;2860  padding: 6px 10px;2861  background: rgba(217, 160, 48, 0.08);2862  border-radius: 6px;2863  margin-bottom: 8px;2864}28652866.peach-canary-suppress-label {2867  font-size: 0.6875rem;2868  color: rgba(217, 160, 48, 0.85);2869  cursor: pointer;2870  font-family: var(--font-ui);2871  letter-spacing: 0.04em;2872}28732874.peach-regen-panel {2875  position: relative;2876  z-index: 1;2877  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2878  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2879  border-radius: 8px;2880  padding: 12px;2881  margin-bottom: 8px;2882}28832884.peach-regen-panel-header {2885  display: flex;2886  align-items: center;2887  justify-content: space-between;2888  margin-bottom: 10px;2889}28902891.peach-regen-panel-title {2892  font-size: 0.6875rem;2893  font-weight: 600;2894  letter-spacing: 0.06em;2895  text-transform: uppercase;2896  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2897}28982899.peach-regen-output {2900  background: rgba(0, 0, 0, 0.2);2901  border-radius: 6px;2902  padding: 10px;2903  margin-bottom: 10px;2904  font-family: var(--font-mono);2905  font-size: 0.8125rem;2906  word-break: break-all;2907  color: var(--peach-t1);2908}29092910.peach-regen-actions {2911  display: flex;2912  gap: 6px;2913}29142915.peach-regen-actions--spaced {2916  margin-bottom: 8px;2917}29182919.peach-regen-action-grow {2920  flex: 1;2921}29222923.peach-regen-copy-btn {2924  padding: 0 8px;2925}29262927.peach-regen-success {2928  position: relative;2929  z-index: 1;2930  background: rgba(40, 180, 80, 0.1);2931  border: 1px solid rgba(40, 180, 80, 0.3);2932  border-radius: 8px;2933  padding: 10px 12px;2934  margin-bottom: 8px;2935  display: flex;2936  align-items: center;2937  gap: 8px;2938  font-size: 0.6875rem;2939  color: rgba(40, 180, 80, 0.9);2940}29412942/* ── Note editor overlay ── */2943.peach-note-editor {2944  position: absolute;2945  inset: 0;2946  z-index: 200;2947  display: flex;2948  flex-direction: column;2949  background:2950    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2951    var(--peach-bg);2952  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2953}29542955.peach-note-editor-header {2956  display: flex;2957  align-items: center;2958  gap: 10px;2959  padding: 14px 16px 10px;2960  border-bottom: 1px solid var(--peach-t3);2961  flex-shrink: 0;2962}29632964.peach-note-editor-back {2965  background: transparent;2966  border: none;2967  cursor: pointer;2968  color: var(--peach-t2);2969  padding: 4px 6px;2970  border-radius: 6px;2971  display: flex;2972  align-items: center;2973  transition: color 120ms ease, background 120ms ease;2974  flex-shrink: 0;2975}2976.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }29772978.peach-note-editor-label {2979  flex: 1;2980  font-family: var(--font-display);2981  font-style: italic;2982  font-size: 0.9375rem;2983  color: var(--peach-t1);2984  letter-spacing: 0.02em;2985}29862987.peach-note-editor-save-btn {2988  background: transparent;2989  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2990  border-radius: 8px;2991  color: var(--peach-accent);2992  font-family: "IBM Plex Mono", monospace;2993  font-size: 0.625rem;2994  letter-spacing: 0.06em;2995  text-transform: uppercase;2996  padding: 3px 10px;2997  cursor: pointer;2998  transition: background 120ms ease, border-color 120ms ease;2999}3000.peach-note-editor-save-btn:hover:not(:disabled) {3001  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3002  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3003}3004.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }30053006.peach-note-toolbar {3007  display: flex;3008  align-items: center;3009  gap: 3px;3010  padding: 6px 14px 5px;3011  border-bottom: 1px solid var(--peach-t3);3012  flex-shrink: 0;3013}30143015.peach-note-tool-btn {3016  background: transparent;3017  border: 1px solid transparent;3018  border-radius: 5px;3019  color: var(--peach-t2);3020  font-family: "IBM Plex Mono", monospace;3021  font-size: 0.625rem;3022  letter-spacing: 0.04em;3023  padding: 2px 8px;3024  cursor: pointer;3025  line-height: 1.6;3026  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;3027}3028.peach-note-tool-btn:hover {3029  background: var(--peach-t4);3030  color: var(--peach-t0);3031  border-color: var(--peach-t3);3032}30333034.peach-note-tool-icon {3035  padding: 3px 7px;3036  display: inline-flex;3037  align-items: center;3038  justify-content: center;3039}30403041.peach-note-tool-divider {3042  width: 1px;3043  height: 14px;3044  background: var(--peach-t3);3045  margin: 0 4px;3046  flex-shrink: 0;3047}30483049.peach-note-editor-body {3050  flex: 1;3051  overflow-y: auto;3052  padding: 16px 20px 20px;3053  outline: none;3054  font-family: var(--font-display);3055  font-size: 1rem;3056  line-height: 1.75;3057  color: var(--peach-t0);3058  scrollbar-width: none;3059  word-break: break-word;3060}3061.peach-note-editor-body:empty::before {3062  content: "write your note…";3063  color: var(--peach-t3);3064  font-style: italic;3065  pointer-events: none;3066}30673068/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */3069.peach-note-editor-inline {3070  display: flex;3071  flex-direction: column;3072  flex: 1;3073  min-height: 0;3074}3075.peach-note-editor-body--inline {3076  flex: 1;3077  min-height: 0;3078  font-size: 0.9375rem;3079  padding: 10px 20px 14px;3080}30813082/* Full-width toolbar row inside the body (Add.tsx note type).3083   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */3084.peach-note-toolbar-body {3085  display: flex;3086  align-items: center;3087  gap: 3px;3088  padding: 5px 20px 4px;3089  margin: 2px -20px 0;3090  border-bottom: 1px solid var(--peach-t3);3091  flex-shrink: 0;3092}30933094/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)3095   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn3096   and .peach-note-tool-divider button-level styles. */3097.peach-note-toolbar-inline {3098  display: flex;3099  align-items: center;3100  gap: 3px;3101  margin-left: auto;3102  padding-left: 10px;3103  border-left: 1px solid var(--peach-t3);3104  min-height: 22px;3105}31063107/* Entry.tsx toolbar row (no tabs, toolbar only) */3108.peach-entry-note-toolbar-row {3109  display: flex;3110  align-items: center;3111  margin: 4px 0 6px;3112  position: relative;3113  z-index: 1;3114}3115.peach-entry-note-toolbar-row .peach-note-toolbar-inline {3116  border-left: none;3117  padding-left: 0;3118  margin-left: 0;3119}31203121/* Note body — fills available vertical space in Add.tsx and Entry.tsx */3122.peach-note-body {3123  display: flex;3124  flex-direction: column;3125  flex: 1;3126  min-height: 0;3127  margin: 4px 0 0;3128}3129.peach-entry-body--new .peach-note-body {3130  margin: 8px -20px 0;3131}31323133/* Add.tsx body is a grid by default; swap to a flex column when a note is3134   active so the note body can stretch and pin the tags row to the bottom. */3135.peach-entry-body--new:has(.peach-note-body) {3136  display: flex;3137  flex-direction: column;3138}31393140/* Rich content element styles (editor + display) */3141.peach-note-editor-body h2,3142.peach-note-content h2 {3143  font-family: var(--font-display);3144  font-size: 20px;3145  font-weight: 600;3146  font-style: italic;3147  color: var(--peach-t0);3148  margin: 6px 0 2px;3149  line-height: 1.3;3150}3151.peach-note-editor-body ul,3152.peach-note-content ul {3153  padding-left: 18px;3154  margin: 3px 0;3155  list-style: disc;3156}3157.peach-note-editor-body ol,3158.peach-note-content ol {3159  padding-left: 18px;3160  margin: 3px 0;3161  list-style: decimal;3162}3163.peach-note-editor-body li,3164.peach-note-content li { margin: 2px 0; }3165.peach-note-editor-body hr,3166.peach-note-content hr {3167  border: none;3168  border-top: 1px solid var(--peach-t3);3169  margin: 10px 0;3170}31713172/* font size elements from execCommand */3173.peach-note-editor-body font[size="1"],3174.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }3175.peach-note-editor-body font[size="2"],3176.peach-note-content font[size="2"] { font-size: 0.8125rem; }3177.peach-note-editor-body font[size="3"],3178.peach-note-content font[size="3"] { font-size: 1rem; }3179.peach-note-editor-body font[size="4"],3180.peach-note-content font[size="4"] { font-size: 20px; }3181.peach-note-editor-body font[size="5"],3182.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }31833184/* bold / italic inside the editor and note display */3185.peach-note-editor-body b, .peach-note-editor-body strong,3186.peach-note-content b, .peach-note-content strong { font-weight: 700; }3187.peach-note-editor-body em, .peach-note-editor-body i,3188.peach-note-content em, .peach-note-content i { font-style: italic; }31893190/* note display — rendered HTML, no pre-wrap */3191.peach-note-content {3192  overflow: auto;3193  max-height: 340px;3194  word-break: break-word;3195}31963197/* ── Note textarea ── */3198.peach-note-textarea {3199  width: 100%;3200  min-height: 180px;3201  max-height: 280px;3202  resize: vertical;3203  background: var(--peach-t4);3204  border: 1px solid var(--peach-t3);3205  border-radius: 8px;3206  padding: 10px 12px;3207  font-family: "IBM Plex Mono", monospace;3208  font-size: 0.75rem;3209  line-height: 1.7;3210  color: var(--peach-t1);3211  outline: none;3212  transition: border-color 150ms ease;3213}32143215.peach-note-textarea:focus {3216  border-color: var(--peach-t2);3217}32183219.peach-note-char-count {3220  font-family: "IBM Plex Mono", monospace;3221  font-size: 0.5625rem;3222  color: var(--peach-t3);3223  text-align: right;3224  margin-top: 4px;3225  letter-spacing: 0.1em;3226}32273228/* ── Field input baseline ── */3229.peach-new-field-input {3230  width: 100%;3231  background: transparent;3232  border: none;3233  border-bottom: 1px solid var(--peach-t3);3234  padding: 4px 0;3235  color: var(--peach-t1);3236  font-family: "IBM Plex Mono", monospace;3237  font-size: 0.8125rem;3238  outline: none;3239  transition: border-color 150ms ease;3240}32413242.peach-new-field-input:focus {3243  border-bottom-color: var(--peach-t0);3244  color: var(--peach-t0);3245}32463247.peach-new-name-input {3248  width: 100%;3249  background: transparent;3250  border: none;3251  border-bottom: 1px solid var(--peach-t3);3252  padding: 6px 0;3253  font-family: var(--font-display);3254  font-style: italic;3255  font-size: 28px;3256  color: var(--peach-t0);3257  outline: none;3258  transition: border-color 150ms ease;3259}32603261.peach-new-name-input:focus {3262  border-bottom-color: var(--peach-t1);3263}32643265.peach-new-name-input::placeholder {3266  color: var(--peach-t2);3267  font-style: italic;3268}32693270.peach-new-field-input::placeholder {3271  color: var(--peach-t3);3272}32733274/* ── Demo entrance animation ── */3275#hd-shell {3276  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3277}3278@keyframes hd-shell-enter {3279  from { opacity: 0; transform: scale(0.96) translateY(16px); }3280  to   { opacity: 1; transform: scale(1) translateY(0); }3281}32823283/* ── Keyframes ── */3284@keyframes peach-char-enter {3285  from { opacity: 0; transform: translateY(0.22em); }3286  to   { opacity: 1; transform: translateY(0); }3287}3288@keyframes peach-content-enter {3289  from { opacity: 0.96; transform: translateY(4px); }3290  to   { opacity: 1; transform: translateY(0); }3291}3292@keyframes peach-content-exit {3293  from { opacity: 1; transform: translateY(0); }3294  to   { opacity: 0.92; transform: translateY(-3px); }3295}3296@keyframes peach-screen-enter {3297  from { opacity: 0; transform: translateY(14px); }3298  to   { opacity: 1; transform: translateY(0); }3299}3300@keyframes peach-shell-fade-in {3301  from { opacity: 0; }3302  to   { opacity: 1; }3303}3304@keyframes peach-veil-in {3305  from { opacity: 0; }3306  to   { opacity: 1; }3307}3308@keyframes peach-lock-settle {3309  0%   { transform: scale(0.9); }3310  65%  { transform: scale(1.08); }3311  100% { transform: scale(1); }3312}3313@keyframes peach-copy-confirm {3314  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3315  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); }3316}3317@keyframes peach-copy-retreat {3318  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); }3319  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3320}3321@keyframes peach-copy-flood {3322  from { opacity: 0; transform: scaleX(0.15); }3323  to   { opacity: 1; transform: scaleX(1); }3324}3325@keyframes peach-copy-icon-settle {3326  from  { transform: scale(0.84); }3327  70%   { transform: scale(1.08); }3328  to    { transform: scale(1); }3329}3330@keyframes peach-copy-sheen-retreat {3331  from { opacity: 1; transform: scaleX(1); }3332  to   { opacity: 0; transform: scaleX(0.15); }3333}3334@keyframes peach-copy-drain {3335  from { width: 100%; }3336  to   { width: 0; }3337}3338@keyframes peach-shake {3339  0%, 100% { transform: translateX(0); }3340  20%      { transform: translateX(-6px); }3341  40%      { transform: translateX(6px); }3342  60%      { transform: translateX(-4px); }3343  80%      { transform: translateX(4px); }3344}33453346@keyframes pip-pulse {3347  0% { transform: scale(1); }3348  40% { transform: scale(2.2); }3349  100% { transform: scale(1); }3350}335133523353/* ── Password generator ── */3354.peach-pwgen-body {3355  flex: 1; overflow-y: auto;3356  display: flex; flex-direction: column;3357}3358.peach-policy-badge {3359  display: flex; align-items: center;3360  padding: 6px 20px 0;3361  font-size: 0.625rem; font-family: Inter, sans-serif;3362  color: var(--peach-t2); letter-spacing: 0.04em;3363}3364.peach-pwgen-display {3365  padding: 14px 20px 12px;3366  border-bottom: 1px solid var(--peach-t3);3367  display: flex; align-items: flex-start; gap: 10px;3368}3369.peach-pwgen-display-row {3370  display: flex;3371  align-items: flex-start;3372  gap: 8px;3373  padding-bottom: 8px;3374  border-bottom: 1px solid var(--peach-t3);3375}3376.peach-pwgen-output {3377  flex: 1; min-width: 0; margin: 0;3378  font-family: "IBM Plex Mono", monospace;3379  font-size: 0.8125rem; color: var(--peach-t0);3380  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3381  white-space: normal;3382  padding: 10px 12px;3383  background: var(--peach-t4);3384  border-radius: 6px;3385  min-height: 36px;3386}3387.peach-pwgen-output-display {3388  flex: 1;3389  min-width: 0;3390  margin: 0;3391  font-family: var(--font-display);3392  font-style: italic;3393  font-weight: 300;3394  font-size: 32px;3395  line-height: 1.05;3396  color: var(--peach-t0);3397  word-break: break-all;3398  overflow-wrap: break-word;3399  white-space: normal;3400  letter-spacing: 0.02em;3401}3402.peach-pwgen-display-actions {3403  display: flex;3404  flex-direction: column;3405  gap: 4px;3406  flex-shrink: 0;3407  margin-top: 2px;3408}3409.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3410.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3411.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3412.peach-pwgen-len-num {3413  font-family: "IBM Plex Mono", monospace;3414  font-size: 0.75rem; color: var(--peach-accent);3415}3416.peach-pwgen-len-num--edit {3417  cursor: text;3418  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3419}3420.peach-pwgen-len-input {3421  font-family: "IBM Plex Mono", monospace;3422  font-size: 0.75rem;3423  color: var(--peach-accent);3424  background: transparent;3425  border: none;3426  border-bottom: 1px solid var(--peach-accent);3427  outline: none;3428  width: 32px;3429  text-align: right;3430  padding: 0;3431}3432.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3433.peach-pwgen-toggles { display: flex; flex-direction: column; }3434.peach-pwgen-charset-pills {3435  display: flex;3436  gap: 6px;3437  flex-wrap: wrap;3438}3439.peach-pwgen-pill {3440  padding: 4px 11px;3441  border-radius: 999px;3442  border: 1px solid var(--peach-t3);3443  background: transparent;3444  color: var(--peach-t2);3445  font-family: "IBM Plex Mono", monospace;3446  font-size: 0.5625rem;3447  letter-spacing: 0.08em;3448  cursor: pointer;3449  transition: all 150ms ease;3450}3451.peach-pwgen-pill.is-on {3452  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3453  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3454  color: var(--peach-accent);3455}3456.peach-pwgen-pill:not(.is-on):hover {3457  color: var(--peach-t1);3458  border-color: var(--peach-t2);3459}3460.peach-pwgen-use-btn {3461  width: 100%;3462  min-height: 34px;3463  border-radius: 8px;3464  margin-top: 2px;3465}3466.peach-generator-constraint-note {3467  font-family: 'IBM Plex Mono', monospace;3468  font-size: 10px;3469  color: var(--peach-t3);3470  letter-spacing: 0.04em;3471  margin: 0;3472  transition: opacity 200ms ease;3473}3474.peach-pwgen-toggle-row {3475  display: flex; align-items: center; justify-content: space-between;3476  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3477}3478.peach-pwgen-toggle-row:last-child { border-bottom: none; }3479.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }34803481/* Peach popup should not expose native scrollbars on internal panels. */3482.peach-settings-body,3483.peach-new-body,3484.peach-pwgen-body,3485.lock-screen,3486.peach-import-preview {3487  scrollbar-width: none;3488  -ms-overflow-style: none;3489  overscroll-behavior: contain;3490}3491.peach-settings-body::-webkit-scrollbar,3492.peach-new-body::-webkit-scrollbar,3493.peach-pwgen-body::-webkit-scrollbar,3494.lock-screen::-webkit-scrollbar,3495.peach-import-preview::-webkit-scrollbar {3496  width: 0;3497  height: 0;3498  display: none;3499}35003501.lock-screen {3502  height: 100%;3503  min-height: 100%;3504  overflow-y: auto;3505  padding: 18px 18px 16px;3506  gap: 14px;3507  grid-template-rows: auto auto auto 1fr auto;3508  align-content: stretch;3509  position: relative;3510  isolation: isolate;3511}3512.peach-screen.lock-screen--vault-stage {3513  display: flex;3514  flex-direction: column;3515  justify-content: flex-start;3516  gap: 18px;3517  padding: 20px 18px 18px;3518  overflow: hidden;3519}3520.peach-screen.lock-screen--vault-stage .peach-lock-panel {3521  margin-top: 0;3522}3523.lock-screen--onboarding {3524  display: flex;3525  flex-direction: column;3526  gap: 12px;3527  justify-content: flex-start;3528}35293530.lock-screen::before {3531  content: "";3532  position: absolute;3533  inset: 12px 18px auto auto;3534  width: 160px;3535  height: 160px;3536  border-radius: 999px;3537  background:3538    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%);3539  filter: blur(6px);3540  opacity: 0.7;3541  pointer-events: none;3542  z-index: 0;3543}35443545.peach-lock-rune-string {3546  flex: 1;3547  display: flex;3548  align-items: center;3549  justify-content: center;3550  gap: 6px;3551  font-family: PeachScript, monospace;3552  font-size: 0.8125rem;3553  letter-spacing: 0.05em;3554  pointer-events: none;3555  user-select: none;3556  position: relative;3557  z-index: 1;3558}35593560.peach-lock-rune-string span {3561  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3562  text-shadow:3563    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3564    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3565  transition: color 0.9s ease, text-shadow 0.9s ease;3566}35673568.peach-lock-rune-string span.is-glowing {3569  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3570  text-shadow:3571    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3572    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3573}35743575.lock-screen-header {3576  display: flex;3577  align-items: center;3578  justify-content: space-between;3579  position: relative;3580  z-index: 1;3581}35823583.lock-password-input.shake {3584  animation: peach-shake 300ms ease-in-out;3585}35863587.peach-hint-error {3588  color: rgba(220, 80, 60, 0.92);3589}35903591.peach-onboarding-headline {3592  margin: 0;3593  font-family: var(--font-display);3594  font-size: 35px;3595  line-height: 0.88;3596  font-style: italic;3597  font-weight: 400;3598  max-width: 252px;3599}36003601.peach-lock-copy {3602  display: grid;3603  gap: 8px;3604  position: relative;3605  z-index: 1;3606}36073608.peach-lock-copy--onboarding {3609  gap: 10px;3610}36113612.peach-lock-hero {3613  position: relative;3614  z-index: 1;3615  display: grid;3616  gap: 8px;3617  min-height: 0;3618  padding: 4px 2px 0;3619  border: none;3620  border-radius: 0;3621  background: transparent;3622  box-shadow: none;3623}3624.peach-lock-hero-art {3625  position: absolute;3626  right: -8px;3627  top: -6px;3628  width: 120px;3629  height: 120px;3630  display: flex;3631  align-items: center;3632  justify-content: center;3633  pointer-events: none;3634  opacity: 0.12;3635  filter: saturate(0.9);3636}3637.peach-lock-hero-mark {3638  width: 100%;3639  height: 100%;3640}3641/* Peach body stays brand-peach across every accent — we don't want a3642   green or blue peach when sage/sky is selected. Leaf + vein keep the3643   sage tint because a real peach has a sage leaf. In the new brand-kit3644   mark the leaf is path 1 and the vein stroke is path 2; the body and3645   back-lobe (paths 3 + 4) must stay untouched. */3646.peach-lock-hero-mark path:nth-child(1) {3647  fill: rgba(123, 144, 96, 0.88);3648}3649.peach-lock-hero-mark path:nth-child(2) {3650  stroke: rgba(94, 122, 66, 0.95);3651}3652.peach-lock-hero > *:not(.peach-lock-hero-art) {3653  position: relative;3654  z-index: 1;3655}36563657.peach-lock-eyebrow {3658  display: inline-flex;3659  align-items: center;3660  width: fit-content;3661  padding: 4px 9px;3662  border-radius: 999px;3663  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3664  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3665  color: var(--peach-t0);3666  font-family: "IBM Plex Mono", monospace;3667  font-size: 0.5rem;3668  letter-spacing: 0.18em;3669  text-transform: uppercase;3670}36713672.peach-lock-label-row {3673  display: flex;3674  align-items: center;3675  justify-content: space-between;3676  margin-bottom: 0;3677}36783679.peach-lock-reveal-btn {3680  display: inline-flex;3681  align-items: center;3682  gap: 4px;3683  background: none;3684  border: none;3685  cursor: pointer;3686  font-family: "IBM Plex Mono", monospace;3687  font-size: 0.5625rem;3688  letter-spacing: 0.06em;3689  color: var(--peach-t2);3690  padding: 2px 0;3691  transition: color 150ms ease;3692}36933694.peach-lock-reveal-btn:hover {3695  color: var(--peach-t1);3696}36973698.peach-lock-warning {3699  color: rgba(220, 80, 60, 0.85) !important;3700  line-height: 1.5;3701}37023703.peach-onboarding-cards {3704  display: grid;3705  gap: 8px;3706  position: relative;3707  z-index: 1;3708}37093710.peach-lock-panel {3711  position: relative;3712  z-index: 1;3713  display: grid;3714  gap: 9px;3715  padding: 14px 16px 15px;3716  border-radius: 18px;3717  border: 1px solid var(--peach-t3);3718  background:3719    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3720  box-shadow:3721    inset 0 1px 0 rgba(240, 232, 216, 0.04),3722    0 12px 28px rgba(0, 0, 0, 0.12);3723}37243725/* Glass surface — lock panel and settings groups */3726.peach-glass {3727  background: rgba(26, 20, 16, 0.65);3728  border: 1px solid rgba(255, 255, 255, 0.08);3729  border-radius: 12px;3730  backdrop-filter: blur(12px) saturate(1.4);3731  -webkit-backdrop-filter: blur(12px) saturate(1.4);3732}37333734@supports not (backdrop-filter: blur(1px)) {3735  .peach-glass {3736    background: rgba(26, 20, 16, 0.92);3737    border: 1px solid rgba(255, 255, 255, 0.10);3738    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3739  }3740}37413742.light .peach-glass,3743[data-theme="light"] .peach-glass {3744  background: rgba(240, 233, 223, 0.72);3745  border: 1px solid rgba(26, 18, 8, 0.08);3746  backdrop-filter: blur(12px) saturate(1.2);3747  -webkit-backdrop-filter: blur(12px) saturate(1.2);3748}37493750@supports not (backdrop-filter: blur(1px)) {3751  .light .peach-glass,3752  [data-theme="light"] .peach-glass {3753    background: rgba(240, 233, 223, 0.97);3754    border: 1px solid rgba(26, 18, 8, 0.10);3755  }3756}37573758/* Lock panel keeps its own border-radius over the generic glass token */3759.peach-lock-panel.peach-glass {3760  border-radius: 18px;3761  background: rgba(26, 20, 16, 0.65);3762  border: 1px solid rgba(255, 255, 255, 0.08);3763  box-shadow:3764    inset 0 1px 0 rgba(255, 255, 255, 0.05),3765    0 12px 28px rgba(0, 0, 0, 0.3);3766}37673768.light .peach-lock-panel.peach-glass,3769[data-theme="light"] .peach-lock-panel.peach-glass {3770  background: rgba(240, 233, 223, 0.82);3771  border: 1px solid rgba(26, 18, 8, 0.08);3772  box-shadow:3773    inset 0 1px 0 rgba(255, 255, 255, 0.4),3774    0 8px 24px rgba(80, 56, 32, 0.15);3775}37763777@supports not (backdrop-filter: blur(1px)) {3778  .peach-lock-panel.peach-glass {3779    background: rgba(26, 20, 16, 0.92);3780    box-shadow:3781      inset 0 1px 0 rgba(255, 255, 255, 0.05),3782      0 12px 28px rgba(0, 0, 0, 0.4);3783  }3784  .light .peach-lock-panel.peach-glass,3785  [data-theme="light"] .peach-lock-panel.peach-glass {3786    background: rgba(240, 233, 223, 0.98);3787  }3788}37893790.peach-lock-panel--secondary {3791  gap: 12px;3792}37933794.peach-lock-panel-header {3795  display: flex;3796  align-items: baseline;3797  justify-content: space-between;3798  gap: 12px;3799}38003801.peach-lock-option-grid {3802  display: grid;3803  gap: 10px;3804}38053806.peach-lock-option {3807  width: 100%;3808  display: grid;3809  gap: 6px;3810  padding: 14px 15px;3811  border-radius: 16px;3812  border: 1px solid rgba(240, 232, 216, 0.08);3813  background: rgba(240, 232, 216, 0.02);3814  color: var(--peach-t0);3815  text-align: left;3816  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3817}38183819.peach-lock-option:hover {3820  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3821  background: rgba(240, 232, 216, 0.04);3822  transform: translateY(-1px);3823}38243825.peach-lock-option-title {3826  font-size: 0.75rem;3827  color: var(--peach-t0);3828}38293830.peach-lock-option-copy {3831  font-size: 0.6875rem;3832  line-height: 1.55;3833  color: var(--peach-t1);3834}38353836.peach-onboarding-stack {3837  margin-top: 2px;3838}3839.peach-lock-panel-footer {3840  display: grid;3841  gap: 6px;3842  margin-top: 2px;3843  padding-top: 10px;3844  border-top: 1px solid rgba(240, 232, 216, 0.06);3845}38463847/* ── Restore tab view ─────────────────────────────────────────────────────3848   Tab-based restore screen replacing the old three-card picker. */38493850.peach-restore-tabview {3851  overflow: hidden;3852}38533854.peach-restore-tabcard {3855  flex: 1;3856  display: flex;3857  flex-direction: column;3858  gap: 0;3859  padding: 0;3860  overflow: hidden;3861  cursor: default;3862  user-select: none;3863  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3864}38653866/* ── Tab selector ─────────────────────────────────────────────────────── */38673868.peach-restore-tabs {3869  display: flex;3870  justify-content: space-around;3871  padding: 14px 10px 10px;3872  border-bottom: 1px solid var(--peach-t3);3873  gap: 2px;3874  overflow: hidden;3875  scrollbar-width: none;3876}3877.peach-restore-tabs::-webkit-scrollbar { display: none; }38783879.peach-restore-tab {3880  background: none;3881  border: none;3882  cursor: pointer;3883  padding: 3px 2px;3884  font-family: 'Cormorant Garamond', Georgia, serif;3885  font-style: italic;3886  font-size: 11px;3887  color: var(--peach-t2);3888  transition: color 150ms ease, text-shadow 150ms ease;3889  flex: 1;3890  min-width: 0;3891  text-align: center;3892  white-space: nowrap;3893  overflow: hidden;3894  text-overflow: ellipsis;3895}3896.peach-restore-tab:hover {3897  color: var(--peach-accent);3898  text-shadow:3899    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3900    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3901}3902.peach-restore-tab.is-active {3903  color: var(--peach-accent);3904  text-shadow:3905    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3906    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3907}39083909/* ── Content area ─────────────────────────────────────────────────────── */39103911.peach-restore-content {3912  padding: 16px 16px 14px;3913  display: flex;3914  flex-direction: column;3915  gap: 8px;3916  overflow: hidden;3917  scrollbar-width: none;3918  flex: 1;3919}3920.peach-restore-content::-webkit-scrollbar { display: none; }3921.peach-restore-content > * {3922  overflow: hidden;3923  scrollbar-width: none;3924}3925.peach-restore-content > *::-webkit-scrollbar { display: none; }39263927/* ── Shared tab inner layout ──────────────────────────────────────────── */39283929.peach-rt-symbols,3930.peach-rt-csv,3931.peach-rt-phone,3932.peach-restore-codex {3933  display: flex;3934  flex-direction: column;3935  gap: 8px;3936  overflow: hidden;3937}39383939.peach-restore-codex {3940  min-height: 0;3941  justify-content: center;3942}39433944.peach-restore-codex-title {3945  margin: 0;3946  font-family: var(--font-display);3947  font-size: 1rem;3948  font-style: italic;3949  color: var(--peach-t0);3950}39513952.peach-restore-codex-copy {3953  margin: 0;3954  font-size: 0.75rem;3955  line-height: 1.5;3956  color: var(--peach-t1);3957}39583959.peach-restore-codex-button {3960  width: 100%;3961  justify-content: center;3962}39633964.peach-rt-submit {3965  width: 100%;3966}39673968.peach-rt-error {3969  margin: 0;3970  font-size: 0.6875rem;3971  color: var(--peach-breach);3972  line-height: 1.4;3973}39743975/* ── PeachScript tab ──────────────────────────────────────────────────── */39763977.peach-restore-symbols-textarea {3978  font-family: 'PeachScript', monospace;3979  font-size: 13px;3980  line-height: 1.9;3981  letter-spacing: 0.1em;3982  word-break: break-all;3983  resize: none;3984  width: 100%;3985  min-height: 56px;3986  max-height: 72px;3987  overflow: hidden;3988  scrollbar-width: none;3989  -ms-overflow-style: none;3990  box-sizing: border-box;3991  padding: 6px 8px;3992  border-radius: 8px;3993  border: 1px solid var(--peach-t3);3994  background: rgba(240, 232, 216, 0.03);3995  color: var(--peach-t0);3996}3997.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3998.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }39994000.peach-restore-symbols-pass {4001  width: 100%;4002  box-sizing: border-box;4003  padding: 7px 10px;4004  border-radius: 8px;4005  border: 1px solid var(--peach-t3);4006  background: rgba(240, 232, 216, 0.03);4007  color: var(--peach-t0);4008  font-size: 0.8125rem;4009}4010.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }4011.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }40124013.peach-rt-divider {4014  text-align: center;4015  font-size: 0.6875rem;4016  color: var(--peach-t2);4017  font-style: italic;4018}40194020.peach-rt-file-label {4021  width: 100%;4022  justify-content: center;4023}40244025.peach-rt-anim-canvas {4026  width: 100%;4027  height: 180px;4028  border-radius: 10px;4029  overflow: hidden;4030  display: block;4031}40324033/* ── CSV tab ──────────────────────────────────────────────────────────── */40344035.peach-rt-csv-sources {4036  margin: 0;4037  font-size: 0.6875rem;4038  color: var(--peach-t2);4039  line-height: 1.5;4040  text-align: center;4041}40424043.peach-rt-csv-warning {4044  margin: 0;4045  font-family: "IBM Plex Mono", monospace;4046  font-size: 0.5625rem;4047  letter-spacing: 0.12em;4048  color: var(--peach-breach);4049  text-align: center;4050}40514052/* ── From Phone tab ───────────────────────────────────────────────────── */40534054.peach-rt-phone-code {4055  margin: 0;4056  text-align: center;4057  font-family: "IBM Plex Mono", monospace;4058  font-size: 22px;4059  letter-spacing: 0.18em;4060  color: var(--peach-t0);4061}40624063.peach-rt-phone-qr {4064  display: block;4065  width: 96px;4066  height: 96px;4067  margin: 0 auto;4068  border-radius: 6px;4069  image-rendering: pixelated;4070  overflow: hidden;4071}40724073.peach-rt-phone-hint {4074  margin: 0;4075  font-size: 0.6875rem;4076  color: var(--peach-t2);4077  line-height: 1.55;4078  text-align: center;4079}40804081/* ── Intro popup ──────────────────────────────────────────────────────── */40824083.peach-restore-intro-overlay {4084  position: absolute;4085  inset: 0;4086  z-index: 100;4087  display: flex;4088  align-items: center;4089  justify-content: center;4090  padding: 20px;4091  background: rgba(12, 10, 6, 0.7);4092  backdrop-filter: blur(4px);4093  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4094}40954096.peach-restore-intro-card {4097  width: 100%;4098  display: flex;4099  flex-direction: column;4100  gap: 12px;4101  padding: 22px 20px 20px;4102  border-radius: 16px;4103  border: 1px solid var(--peach-t3);4104  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));4105  backdrop-filter: blur(4px);4106  -webkit-backdrop-filter: blur(4px);4107  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);4108}41094110.peach-restore-intro-headline {4111  margin: 0;4112  font-family: var(--font-display);4113  font-style: italic;4114  font-size: 20px;4115  font-weight: 400;4116  color: var(--peach-t0);4117}41184119.peach-restore-intro-body {4120  display: flex;4121  flex-direction: column;4122  gap: 8px;4123}4124.peach-restore-intro-body p {4125  margin: 0;4126  font-size: 0.75rem;4127  color: var(--peach-t1);4128  line-height: 1.5;4129}41304131.peach-restore-intro-btn {4132  width: 100%;4133  margin-top: 4px;4134}41354136/* Snapshot restore panel */4137.peach-snapshot-panel {4138  gap: 10px;4139  overflow-y: auto;4140  max-height: 340px;4141}4142.peach-snapshot-list {4143  display: flex;4144  flex-direction: column;4145  gap: 4px;4146}4147.peach-snapshot-row {4148  display: flex;4149  align-items: center;4150  justify-content: space-between;4151  width: 100%;4152  padding: 8px 10px;4153  border-radius: 8px;4154  border: 1px solid rgba(240, 232, 216, 0.07);4155  background: transparent;4156  cursor: pointer;4157  transition: border-color 120ms, background 120ms;4158  text-align: left;4159  gap: 8px;4160}4161.peach-snapshot-row:hover {4162  border-color: rgba(240, 232, 216, 0.14);4163  background: rgba(240, 232, 216, 0.03);4164}4165.peach-snapshot-row.is-selected {4166  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4167  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);4168}4169.peach-snapshot-time {4170  font-size: 11.5px;4171  color: var(--peach-t0);4172  flex: 1;4173}4174.peach-snapshot-count {4175  font-family: "IBM Plex Mono", monospace;4176  font-size: 0.625rem;4177  color: var(--peach-t2);4178  flex-shrink: 0;4179}4180.peach-snapshot-confirm {4181  display: flex;4182  flex-direction: column;4183  gap: 8px;4184  padding-top: 10px;4185  border-top: 1px solid rgba(240, 232, 216, 0.06);4186}4187.peach-snapshot-warning {4188  display: flex;4189  align-items: flex-start;4190  gap: 6px;4191  font-size: 10.5px;4192  color: rgba(220, 80, 60, 0.85);4193  line-height: 1.55;4194}4195.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }4196.peach-snapshot-confirm-row {4197  display: flex;4198  gap: 6px;4199  align-items: center;4200}4201.peach-snapshot-restore-btn {4202  width: 100%;4203}4204.peach-lock-hero--unlock .peach-lock-hero-art {4205  width: 112px;4206  height: 112px;4207  right: 0;4208  top: 2px;4209  opacity: 0.1;4210}42114212.peach-card {4213  border: 1px solid var(--peach-t3);4214  border-radius: 18px;4215  background:4216    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4217  box-shadow:4218    inset 0 0 0 1px var(--peach-border-accent),4219    inset 0 1px 0 rgba(240, 232, 216, 0.04),4220    0 12px 32px rgba(0, 0, 0, 0.14);4221  overflow: hidden;4222}42234224.peach-card-active {4225  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4226  box-shadow:4227    inset 0 1px 0 rgba(240, 232, 216, 0.05),4228    0 16px 38px rgba(0, 0, 0, 0.18),4229    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4230}42314232.peach-card-disabled {4233  opacity: 0.72;4234}42354236.peach-card-header {4237  width: 100%;4238  padding: 13px 16px 11px;4239  background: transparent;4240  color: var(--peach-t0);4241  display: flex;4242  justify-content: space-between;4243  align-items: center;4244  text-align: left;4245  font-size: 0.75rem;4246}42474248.peach-card-body {4249  padding: 0 16px 16px;4250  display: grid;4251  gap: 9px;4252}42534254.peach-card-tag {4255  color: var(--peach-t2);4256  font-family: "IBM Plex Mono", monospace;4257  font-size: 0.5625rem;4258  letter-spacing: 0.12em;4259  text-transform: uppercase;4260}42614262.peach-empty-copy {4263  display: grid;4264  gap: 6px;4265  color: var(--peach-t1);4266  font-size: 0.8125rem;4267}42684269.peach-lock-submit {4270  width: 100%;4271  box-shadow:4272    0 1px 0 rgba(255,255,255,0.10) inset,4273    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4274    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4275    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4276}42774278.peach-lock-secondary {4279  width: 100%;4280  border-color: var(--peach-t3);4281  background: rgba(240, 232, 216, 0.02);4282}42834284.peach-lock-secondary:hover {4285  background: rgba(240, 232, 216, 0.04);4286}42874288.peach-lock-note {4289  max-width: none;4290  line-height: 1.55;4291  margin: 0;4292}42934294.peach-overlay-action {4295  font-size: 0.625rem;4296  padding: 4px 8px;4297  letter-spacing: 0.06em;4298  min-width: 44px;4299  text-align: center;4300}43014302.peach-inline-action {4303  flex-shrink: 0;4304  font-size: 0.5625rem;4305  letter-spacing: 0.1em;4306  text-transform: uppercase;4307  padding: 4px 7px;4308}4309.peach-password-toggle-btn {4310  display: inline-flex;4311  align-items: center;4312  justify-content: center;4313  min-width: 30px;4314  min-height: 26px;4315  padding: 0 7px;4316  border: 1px solid var(--peach-t3);4317  border-radius: 999px;4318  background: rgba(240, 232, 216, 0.04);4319  color: var(--peach-t2);4320  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4321}4322.peach-password-toggle-btn:hover {4323  border-color: var(--peach-t2);4324  color: var(--peach-t0);4325  background: rgba(240, 232, 216, 0.06);4326}43274328.peach-new-textarea {4329  width: 100%;4330  min-height: 88px;4331  resize: vertical;4332  border: 0;4333  outline: none;4334  background: transparent;4335  color: var(--peach-t1);4336  font-family: "IBM Plex Mono", monospace;4337  font-size: 0.75rem;4338  line-height: 1.65;4339  caret-color: var(--peach-accent);4340}43414342.peach-new-textarea::placeholder {4343  color: var(--peach-t2);4344  opacity: 0.7;4345}43464347.peach-settings-actions {4348  display: grid;4349  gap: 8px;4350}43514352.peach-sync-section-label {4353  font-size: 0.6875rem;4354  color: var(--peach-t2);4355  text-transform: uppercase;4356  letter-spacing: 0.05em;4357}43584359.peach-sync-network-note {4360  margin: 0 0 6px;4361  font-size: 0.75rem;4362  color: var(--peach-t2);4363  line-height: 1.4;4364}43654366.peach-settings-row--tappable {4367  background: none;4368  border: none;4369  width: 100%;4370  text-align: left;4371  cursor: pointer;4372  color: var(--peach-t1);4373  font-size: 0.8125rem;4374}4375.peach-settings-row--tappable:hover {4376  color: var(--peach-t0);4377}43784379.peach-sync-pro-hint {4380  display: flex;4381  flex-direction: column;4382  align-items: flex-start;4383  gap: 8px;4384  padding: 12px 0 4px;4385}43864387.peach-sync-device-row {4388  display: flex;4389  justify-content: space-between;4390  align-items: center;4391  padding: 6px 0;4392  border-bottom: 1px solid var(--peach-t3);4393}43944395.peach-sync-device-info {4396  display: flex;4397  flex-direction: column;4398  gap: 2px;4399}44004401.peach-sync-device-name {4402  font-size: 0.8125rem;4403  color: var(--peach-t0);4404}44054406.peach-sync-device-meta {4407  font-size: 0.6875rem;4408  color: var(--peach-t2);4409}44104411.peach-sync-status-dot {4412  display: inline-block;4413  width: 8px;4414  height: 8px;4415  border-radius: 50%;4416  vertical-align: middle;4417}44184419.peach-sync-remove-btn {4420  color: var(--peach-breach);4421}44224423.peach-sync-advanced-row {4424  display: flex;4425  justify-content: space-between;4426  align-items: center;4427  padding: 6px 0;4428  gap: 12px;4429}44304431.peach-sync-advanced-info {4432  display: flex;4433  flex-direction: column;4434  gap: 2px;4435  flex: 1;4436}44374438.peach-sync-advanced-name {4439  font-size: 0.8125rem;4440  color: var(--peach-t0);4441}44424443.peach-sync-reset-confirm {4444  display: flex;4445  flex-direction: column;4446  gap: 8px;4447  padding: 10px;4448  border: 1px solid var(--peach-breach);4449  border-radius: 10px;4450  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4451}44524453.peach-sync-reset-confirm-headline {4454  font-size: 0.8125rem;4455  font-weight: 600;4456  color: var(--peach-t0);4457  margin: 0;4458}44594460.peach-sync-reset-confirm-body {4461  font-size: 0.75rem;4462  color: var(--peach-t1);4463  margin: 0;4464  line-height: 1.4;4465}44664467.peach-btn--danger {4468  background: var(--peach-breach);4469  color: #fff;4470  border-color: var(--peach-breach);4471}4472.peach-btn--danger:hover:not(:disabled) {4473  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4474}4475.peach-btn--danger:disabled {4476  opacity: 0.55;4477  cursor: not-allowed;4478}44794480.peach-sync-hero-icon {4481  color: var(--peach-t1);4482  opacity: 0.85;4483}44844485.peach-import-preview {4486  margin-bottom: 12px;4487  max-height: 152px;4488  overflow-y: auto;4489  border: 1px solid var(--peach-t3);4490  border-radius: 10px;4491  padding: 8px 10px;4492  display: grid;4493  gap: 8px;4494  background: rgba(240, 232, 216, 0.02);4495}44964497.peach-import-preview-row {4498  display: flex;4499  justify-content: space-between;4500  gap: 10px;4501  font-size: 0.6875rem;4502  color: var(--peach-t1);4503}45044505.peach-import-preview-title {4506  color: var(--peach-t0);4507  flex: 1;4508  min-width: 0;4509  overflow: hidden;4510  text-overflow: ellipsis;4511  white-space: nowrap;4512}45134514.peach-import-preview-meta {4515  color: var(--peach-t2);4516  flex-shrink: 0;4517  max-width: 42%;4518  overflow: hidden;4519  text-overflow: ellipsis;4520  white-space: nowrap;4521}45224523.peach-import-preview-more {4524  color: var(--peach-t2);4525  font-size: 0.625rem;4526}45274528.peach-restore-copy {4529  margin: 0;4530  color: var(--peach-t1);4531  font-size: 0.6875rem;4532  line-height: 1.6;4533}45344535.peach-restore-warning {4536  padding: 10px 12px;4537  border-radius: 12px;4538  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4539  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4540  color: var(--peach-t0);4541  font-size: 0.6875rem;4542  line-height: 1.55;4543}45444545.peach-provider-chips {4546  display: flex;4547  flex-wrap: wrap;4548  gap: 6px;4549}45504551.peach-provider-chip {4552  display: inline-flex;4553  align-items: center;4554  padding: 5px 8px;4555  border-radius: 999px;4556  border: 1px solid var(--peach-t3);4557  background: rgba(240, 232, 216, 0.02);4558  color: var(--peach-t1);4559  font-family: "IBM Plex Mono", monospace;4560  font-size: 0.5rem;4561  letter-spacing: 0.08em;4562  text-transform: uppercase;4563}45644565.peach-restore-file,4566.peach-restore-input {4567  width: 100%;4568  border-radius: 10px;4569  border: 1px solid var(--peach-t3);4570  background: var(--peach-s2);4571  color: var(--peach-t0);4572  font-size: 0.75rem;4573}45744575.peach-restore-file {4576  padding: 9px 10px;4577}45784579.peach-restore-file::file-selector-button {4580  margin-right: 10px;4581  padding: 7px 10px;4582  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4583  border-radius: 999px;4584  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4585  color: var(--peach-t0);4586  font-size: 0.625rem;4587  letter-spacing: 0.08em;4588  text-transform: uppercase;4589  cursor: pointer;4590}45914592.peach-restore-input {4593  padding: 10px 12px;4594}45954596.peach-auth-grid {4597  display: grid;4598  gap: 10px;4599}46004601.peach-import-summary {4602  color: var(--peach-t1);4603  font-size: 0.75rem;4604  line-height: 1.6;4605  margin-bottom: 12px;4606}46074608.peach-restore-error {4609  color: rgba(220, 80, 60, 0.95);4610  font-size: 0.75rem;4611  line-height: 1.55;4612}46134614.peach-passkey-card {4615  max-width: 400px;4616  margin: auto 16px;4617  align-self: center;4618  width: calc(100% - 32px);4619}46204621/* Center the approval card vertically inside the overlay-view (which sets4622 * flex-direction: column without justify-content). Without this, the card4623 * sits at the top with a tall empty band below — looks unfinished on the4624 * 320px popup. */4625.peach-overlay-view:has(.peach-passkey-card) {4626  justify-content: center;4627}46284629.peach-pro-badge {4630  padding: 2px 6px;4631  border-radius: 999px;4632  font-family: var(--font-ui);4633  font-size: 0.625rem;4634  letter-spacing: 0.08em;4635  text-transform: uppercase;4636  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4637  color: var(--peach-accent);4638}46394640/* ── Shortcuts rebind table ─────────────────────────────────── */4641.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4642.peach-shortcut-row {4643  display: flex;4644  align-items: center;4645  gap: 10px;4646  padding: 6px 0;4647}4648.peach-shortcut-row-label {4649  flex: 1;4650  font-size: 0.75rem;4651  color: var(--peach-t0);4652}4653.peach-shortcut-chip {4654  min-width: 64px;4655  padding: 4px 10px;4656  border-radius: 6px;4657  border: 1px solid var(--peach-t3);4658  background: var(--peach-input-bg, var(--surface-card));4659  color: var(--peach-t0);4660  font-family: var(--font-mono);4661  font-size: 0.6875rem;4662  letter-spacing: 0.04em;4663  cursor: pointer;4664  text-align: center;4665  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4666}4667.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4668.peach-shortcut-chip.is-custom {4669  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4670  color: var(--peach-accent);4671}4672.peach-shortcut-chip.is-capturing {4673  border-color: var(--peach-accent);4674  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4675  color: var(--peach-accent);4676  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4677}4678@keyframes peach-shortcut-capture-pulse {4679  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4680  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4681}4682.peach-shortcut-reset {4683  background: transparent;4684  border: none;4685  cursor: pointer;4686  color: var(--peach-t2);4687  padding: 4px 6px;4688  border-radius: 5px;4689  font-size: 0.875rem;4690  line-height: 1;4691  transition: color 120ms ease, background 120ms ease;4692}4693.peach-shortcut-reset:hover {4694  color: var(--peach-t0);4695  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4696}4697.peach-shortcuts-conflict {4698  margin: 4px 0 0;4699  padding: 8px 10px;4700  border-radius: 7px;4701  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4702  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4703  font-family: var(--font-mono);4704  font-size: 0.6875rem;4705  color: var(--peach-t0);4706}47074708/* ── Help dialog overlay (? to open) ────────────────────────── */4709.peach-shortcuts-help-backdrop {4710  position: fixed;4711  inset: 0;4712  background: rgba(0, 0, 0, 0.55);4713  backdrop-filter: blur(2px);4714  display: flex;4715  align-items: center;4716  justify-content: center;4717  z-index: 1000;4718  animation: peach-help-fade-in 140ms ease forwards;4719}4720@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4721.peach-shortcuts-help-card {4722  width: min(320px, 92vw);4723  max-height: 80vh;4724  overflow-y: auto;4725  border-radius: 14px;4726  border: 1px solid var(--peach-t3);4727  background: var(--peach-bg);4728  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4729  padding: 16px 18px 18px;4730  display: flex;4731  flex-direction: column;4732  gap: 12px;4733}4734.peach-shortcuts-help-head {4735  display: flex; align-items: center; justify-content: space-between;4736}4737.peach-shortcuts-help-head h3 {4738  margin: 0;4739  font-family: var(--font-display);4740  font-style: italic;4741  font-weight: 400;4742  font-size: 22px;4743  color: var(--peach-t0);4744}4745.peach-shortcuts-help-close {4746  background: transparent;4747  border: none;4748  color: var(--peach-t2);4749  cursor: pointer;4750  font-size: 0.875rem;4751  padding: 4px 8px;4752  border-radius: 5px;4753}4754.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4755.peach-shortcuts-help-body ul {4756  list-style: none; padding: 0; margin: 4px 0 12px;4757  display: grid; gap: 8px;4758}4759.peach-shortcuts-help-body li {4760  display: flex; align-items: center; justify-content: space-between; gap: 12px;4761  font-size: 0.75rem; color: var(--peach-t0);4762}4763.peach-shortcuts-help-body kbd {4764  font-family: var(--font-mono);4765  font-size: 0.6875rem;4766  padding: 3px 8px;4767  border-radius: 6px;4768  background: var(--surface-card);4769  border: 1px solid var(--peach-t3);4770  color: var(--peach-accent);4771  letter-spacing: 0.04em;4772}47734774/* ── Pro promo on Account screen ────────────────────────────── */4775.peach-pro-promo {4776  position: relative;4777  border-radius: 14px;4778  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4779  background:4780    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4781    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4782    var(--surface-card);4783  overflow: hidden;4784  margin-bottom: 14px;4785}4786.peach-pro-promo-glow {4787  position: absolute;4788  inset: -40% -20% auto auto;4789  width: 220px; height: 220px;4790  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4791  pointer-events: none;4792  filter: blur(8px);4793}4794.peach-pro-promo-inner {4795  position: relative;4796  padding: 18px 18px 16px;4797}4798.peach-pro-promo-title {4799  font-family: var(--font-display);4800  font-style: italic;4801  font-weight: 400;4802  font-size: 28px;4803  line-height: 1;4804  letter-spacing: -0.005em;4805  color: var(--peach-t0);4806  margin: 0 0 4px;4807}4808.peach-pro-promo-tagline {4809  font-family: var(--font-mono);4810  font-size: 0.625rem;4811  letter-spacing: 0.06em;4812  color: var(--peach-t2);4813  margin: 0 0 14px;4814}4815.peach-pro-promo-list {4816  list-style: none;4817  margin: 0 0 16px;4818  padding: 0;4819  display: grid;4820  gap: 9px;4821}4822.peach-pro-promo-list li {4823  display: flex;4824  align-items: flex-start;4825  gap: 9px;4826  font-size: 0.75rem;4827  color: var(--peach-t1);4828  line-height: 1.4;4829}4830.peach-pro-promo-list svg {4831  width: 14px;4832  height: 14px;4833  flex-shrink: 0;4834  color: var(--peach-accent);4835  margin-top: 2px;4836}4837.peach-pro-promo-list span {4838  color: var(--peach-t0);4839}4840.peach-pro-promo-cta {4841  width: 100%;4842  background: var(--peach-accent);4843  color: #fff;4844  border: none;4845  padding: 9px 12px;4846  border-radius: 9px;4847  font-size: 0.75rem;4848  font-weight: 500;4849  font-family: var(--font-ui);4850  letter-spacing: 0.02em;4851  text-decoration: none;4852  display: inline-flex;4853  align-items: center;4854  justify-content: center;4855  cursor: pointer;4856  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4857  box-shadow: 0 2px 16px var(--peach-glow);4858}4859.peach-pro-promo-cta:hover {4860  filter: brightness(1.07);4861  box-shadow: 0 4px 24px var(--peach-glow);4862  transform: translateY(-1px);4863}4864.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }48654866.peach-pro-or-divider {4867  display: flex;4868  align-items: center;4869  gap: 10px;4870  margin: 4px 0 12px;4871  font-family: var(--font-mono);4872  font-size: 0.625rem;4873  letter-spacing: 0.06em;4874  color: var(--peach-t2);4875  text-transform: uppercase;4876}4877.peach-pro-or-divider::before,4878.peach-pro-or-divider::after {4879  content: "";4880  flex: 1;4881  height: 1px;4882  background: var(--peach-t3);4883}48844885.peach-loading {4886  position: absolute;4887  inset: 0;4888  display: flex;4889  align-items: center;4890  justify-content: center;4891  background: var(--bg);4892  animation: peach-loading-pulse 1.2s ease-in-out infinite;4893}48944895@keyframes peach-loading-pulse {4896  0%, 100% { opacity: 0.6; }4897  50% { opacity: 1; }4898}48994900/* ── Health Dashboard ─────────────────────────────────────────────────── */4901.peach-health-body {4902  flex: 1;4903  overflow-y: auto;4904  display: flex;4905  flex-direction: column;4906  /* Hide the platform scrollbar — every other scrollable surface in the4907   * popup hides it; the Health view was the one outlier and it ruined the4908   * polish. Behavior unchanged, just no rail rendered. */4909  scrollbar-width: none;4910  -ms-overflow-style: none;4911}4912.peach-health-body::-webkit-scrollbar { display: none; }49134914/* Loading screen for the Vault Health view. The advanced report computation4915 * can run for a few seconds on a large vault — without a clear loading4916 * screen the surface looked broken (the entry view bleeds through the4917 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4918.peach-health-loading-screen {4919  flex: 1;4920  display: flex;4921  flex-direction: column;4922  align-items: center;4923  justify-content: center;4924  gap: 14px;4925  padding: 32px 28px;4926  text-align: center;4927}49284929.peach-health-loading-glyph {4930  width: 48px;4931  height: 48px;4932  display: flex;4933  align-items: center;4934  justify-content: center;4935  border-radius: 14px;4936  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4937  color: var(--peach-accent);4938}49394940.peach-health-loading-title {4941  margin: 0;4942  font-family: var(--font-display);4943  font-style: italic;4944  font-weight: 300;4945  font-size: 19px;4946  line-height: 1.2;4947  color: var(--peach-t0);4948}49494950.peach-health-loading-copy {4951  margin: 0;4952  max-width: 240px;4953  font-size: 0.75rem;4954  line-height: 1.55;4955  color: var(--peach-t2);4956}49574958.peach-health-loading-track {4959  width: 200px;4960  height: 3px;4961  margin-top: 6px;4962  border-radius: 999px;4963  background: rgba(240, 232, 216, 0.06);4964  overflow: hidden;4965}49664967.peach-health-loading-fill {4968  width: 40%;4969  height: 100%;4970  border-radius: inherit;4971  background: linear-gradient(4972    90deg,4973    transparent 0%,4974    var(--peach-accent) 50%,4975    transparent 100%4976  );4977  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4978}49794980@keyframes peach-health-loading-sweep {4981  0%   { transform: translateX(-100%); }4982  100% { transform: translateX(350%); }4983}49844985[data-motion="reduce"] .peach-health-loading-fill,4986[data-motion="reduce"] .peach-health-loading-glyph svg path {4987  animation: none;4988}49894990.peach-health-summary {4991  padding: 10px 16px 6px;4992  font-family: "IBM Plex Mono", monospace;4993  font-size: 0.6875rem;4994}4995.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4996.peach-health-summary-ok { color: var(--peach-t2); }49974998.peach-health-check-row {4999  padding: 0 16px 10px;5000}5001.peach-health-check-btn {5002  width: 100%;5003  display: flex;5004  align-items: center;5005  justify-content: center;5006}50075008.peach-health-sections {5009  flex: 1;5010  display: flex;5011  flex-direction: column;5012}50135014.peach-health-section {5015  border-bottom: 1px solid var(--peach-t3);5016}50175018.peach-health-section-header {5019  width: 100%;5020  display: flex;5021  align-items: center;5022  justify-content: space-between;5023  padding: 9px 16px;5024  background: transparent;5025  cursor: pointer;5026  color: var(--peach-t0);5027}50285029.peach-health-section-title-row {5030  display: flex;5031  align-items: center;5032  gap: 8px;5033}50345035.peach-health-count-badge {5036  display: inline-flex;5037  align-items: center;5038  justify-content: center;5039  min-width: 20px;5040  height: 18px;5041  padding: 0 5px;5042  border-radius: 999px;5043  background: rgba(220,80,60,0.15);5044  border: 1px solid rgba(220,80,60,0.25);5045  font-family: "IBM Plex Mono", monospace;5046  font-size: 0.5625rem;5047  color: rgba(220,80,60,0.9);5048}50495050.peach-health-section-title {5051  font-family: "IBM Plex Mono", monospace;5052  font-size: 0.6875rem;5053  text-transform: uppercase;5054  letter-spacing: 0.1em;5055  color: var(--peach-t1);5056}50575058.peach-health-chevron {5059  color: var(--peach-t2);5060  transition: transform 200ms ease;5061  flex-shrink: 0;5062}5063.peach-health-chevron.is-expanded {5064  transform: rotate(180deg);5065}50665067.peach-health-section-body {5068  padding: 0 16px 10px;5069  display: flex;5070  flex-direction: column;5071  gap: 4px;5072}50735074.peach-health-row {5075  display: flex;5076  align-items: flex-start;5077  justify-content: space-between;5078  gap: 8px;5079  padding: 6px 8px;5080  border-radius: 8px;5081  background: rgba(240,232,216,0.02);5082}50835084.peach-health-row-info {5085  flex: 1;5086  min-width: 0;5087  display: flex;5088  flex-direction: column;5089  gap: 2px;5090}50915092.peach-health-row-name {5093  font-family: var(--font-display);5094  font-size: 0.9375rem;5095  font-style: italic;5096  font-weight: 400;5097  color: var(--peach-t0);5098  white-space: nowrap;5099  overflow: hidden;5100  text-overflow: ellipsis;5101}51025103.peach-health-row-meta {5104  font-family: "IBM Plex Mono", monospace;5105  font-size: 0.5625rem;5106  color: var(--peach-t2);5107  letter-spacing: 0.05em;5108}51095110.peach-health-fix-btn {5111  font-size: 0.5625rem;5112  letter-spacing: 0.08em;5113  text-transform: uppercase;5114  padding: 4px 7px;5115  flex-shrink: 0;5116  display: flex;5117  align-items: center;5118}51195120.peach-health-empty {5121  font-family: "IBM Plex Mono", monospace;5122  font-size: 0.625rem;5123  color: var(--peach-t2);5124  padding: 6px 0;5125}51265127.peach-health-loading {5128  font-family: "IBM Plex Mono", monospace;5129  font-size: 0.625rem;5130  color: var(--peach-t2);5131  padding: 6px 0;5132  display: flex;5133  align-items: center;5134  gap: 6px;5135}51365137.peach-health-loading::before {5138  content: "";5139  width: 10px;5140  height: 10px;5141  border: 1.5px solid var(--peach-t3);5142  border-top-color: var(--peach-accent);5143  border-radius: 50%;5144  animation: peach-spin 600ms linear infinite;5145}51465147@keyframes peach-spin {5148  to { transform: rotate(360deg); }5149}51505151.peach-spinner {5152  width: 32px;5153  height: 32px;5154  border: 2px solid var(--peach-s2);5155  border-top-color: var(--peach-accent);5156  border-radius: 50%;5157  margin: 0 auto 16px;5158  animation: peach-spin 0.8s linear infinite;5159}51605161.peach-progress-screen {5162  text-align: center;5163  padding: 32px 16px;5164}51655166.peach-progress-screen-title {5167  font-size: 0.8125rem;5168  color: var(--peach-t0);5169  margin-bottom: 16px;5170}51715172.peach-progress-screen-stage {5173  font-size: 0.6875rem;5174  color: var(--peach-t2);5175  min-height: 14px;5176}51775178.peach-progress-screen-note {5179  font-size: 0.625rem;5180  color: var(--peach-t2);5181  margin-top: 8px;5182}51835184.peach-pairing-body {5185  flex: 1;5186  overflow-y: auto;5187  display: flex;5188  flex-direction: column;5189}51905191.peach-pairing-content {5192  flex: 1;5193  display: flex;5194  flex-direction: column;5195  align-items: center;5196  justify-content: center;5197  gap: 14px;5198  padding: 28px 20px;5199  text-align: center;5200}52015202.peach-pairing-code-screen {5203  gap: 18px;5204}52055206.peach-pairing-headline {5207  font-family: var(--font-display);5208  font-style: italic;5209  font-weight: 300;5210  font-size: 28px;5211  color: var(--peach-t0);5212  margin: 0;5213  line-height: 1;5214}52155216.peach-pairing-subline {5217  font-size: 0.75rem;5218  color: var(--peach-t2);5219  max-width: 220px;5220  line-height: 1.5;5221  margin: 0;5222}52235224.peach-pairing-subline--center {5225  text-align: center;5226}52275228/* 6-digit pairing code — both display (.peach-pairing-code) and entry5229   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking5230   so the two modes feel like the same surface. */5231.peach-pairing-code {5232  font-family: "IBM Plex Mono", monospace;5233  font-size: 36px;5234  letter-spacing: 0.25em;5235  color: var(--peach-t0);5236  text-align: center;5237  padding: 24px 0;5238  text-shadow:5239    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),5240    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);5241  background: transparent;5242  border: 0;5243  cursor: default;5244  user-select: text;5245}52465247.peach-pairing-code--loading,5248.peach-pairing-code--expired {5249  font-size: 18px;5250  letter-spacing: 0.04em;5251  color: var(--peach-t2);5252  cursor: pointer;5253  text-shadow: none;5254}52555256.peach-pairing-qr-container {5257  display: flex;5258  flex-direction: column;5259  align-items: center;5260  gap: 10px;5261}52625263.peach-pairing-qr {5264  width: 240px;5265  height: 240px;5266  display: block;5267}52685269.peach-pairing-instruction {5270  font-size: 0.75rem;5271  color: var(--peach-t2);5272  text-align: center;5273  line-height: 1.5;5274  margin: 0;5275  max-width: 220px;5276}52775278.peach-pairing-expiry {5279  font-family: "IBM Plex Mono", monospace;5280  font-size: 13px;5281  letter-spacing: 0.06em;5282  color: var(--peach-t2);5283  margin: 0;5284}52855286.peach-pairing-regen {5287  font-size: 0.75rem;5288  color: var(--peach-accent);5289  background: transparent;5290  border: 0;5291  cursor: pointer;5292  padding: 4px 0;5293  text-decoration: underline;5294  text-underline-offset: 2px;5295}52965297.peach-pairing-code-input {5298  font-family: "IBM Plex Mono", monospace;5299  font-size: 36px;5300  letter-spacing: 0.25em;5301  color: var(--peach-t0);5302  background: transparent;5303  border: 0;5304  border-bottom: 1px solid var(--peach-t3);5305  outline: none;5306  text-align: center;5307  padding: 18px 0;5308  width: 220px;5309  caret-color: var(--peach-accent);5310  transition: border-color 160ms ease;5311}53125313.peach-pairing-code-input::placeholder {5314  color: var(--peach-t3);5315}53165317.peach-pairing-code-input:focus {5318  border-bottom-color: var(--peach-accent);5319}53205321.peach-pairing-toggle {5322  background: transparent;5323  border: 0;5324  color: var(--peach-t2);5325  font-size: 0.75rem;5326  padding: 8px 4px;5327  cursor: pointer;5328  transition: color 120ms ease;5329}53305331.peach-pairing-toggle:hover:not(:disabled) {5332  color: var(--peach-t1);5333}53345335.peach-pairing-toggle:disabled {5336  opacity: 0.5;5337  cursor: default;5338}53395340.peach-pairing-hint {5341  font-size: 0.6875rem;5342  color: var(--peach-t2);5343  margin: 0;5344  text-align: center;5345}53465347.peach-pairing-status {5348  display: flex;5349  align-items: center;5350  gap: 8px;5351  margin: 0;5352  font-size: 0.75rem;5353  color: var(--peach-t1);5354}53555356.peach-pairing-error {5357  margin: 0;5358  font-size: 0.6875rem;5359  color: var(--peach-breach);5360}53615362.peach-pairing-error--muted {5363  color: var(--peach-t2);5364}53655366.peach-pairing-spinner {5367  width: 12px;5368  height: 12px;5369  border: 1.5px solid var(--peach-t3);5370  border-top-color: var(--peach-accent);5371  border-radius: 50%;5372  animation: peach-spin 0.8s linear infinite;5373}53745375.peach-pairing-success-icon,5376.peach-pairing-error-icon,5377.peach-pairing-hero {5378  display: inline-flex;5379  align-items: center;5380  justify-content: center;5381}53825383/* Tag chips */5384.peach-tag-chip {5385  display: inline-flex;5386  align-items: center;5387  gap: 4px;5388  padding: 3px 8px;5389  border-radius: 999px;5390  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5391  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5392  color: var(--peach-t0);5393  font-family: "IBM Plex Mono", monospace;5394  font-size: 0.625rem;5395  letter-spacing: 0.04em;5396}53975398.peach-tag-chip-remove {5399  background: transparent;5400  border: none;5401  color: inherit;5402  opacity: 0.6;5403  cursor: pointer;5404  padding: 0;5405  font-size: 0.75rem;5406  line-height: 1;5407}54085409.peach-tag-chip-remove:hover {5410  opacity: 1;5411}54125413/* Tag input */5414.peach-tag-input-wrap {5415  border-bottom: 1px solid var(--peach-t3);5416}54175418.peach-tag-suggestions {5419  display: flex;5420  flex-wrap: wrap;5421  gap: 4px;5422  padding: 6px 0;5423}54245425.peach-tag-suggestion {5426  padding: 2px 8px;5427  border-radius: 999px;5428  border: 1px solid var(--peach-t3);5429  background: var(--peach-s2);5430  color: var(--peach-t1);5431  font-family: "IBM Plex Mono", monospace;5432  font-size: 0.625rem;5433  cursor: pointer;5434  transition: border-color 80ms ease, background 80ms ease;5435}54365437.peach-tag-suggestion:hover {5438  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5439  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5440}54415442/* Identity suggestions — shown below username/email inputs in new-entry form */5443@keyframes peach-suggest-in {5444  from { opacity: 0; transform: translateY(-4px); }5445  to   { opacity: 1; transform: none; }5446}54475448.peach-identity-suggestions {5449  display: flex;5450  flex-direction: column;5451  gap: 1px;5452  margin-top: 4px;5453  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5454}54555456.peach-identity-filter-row {5457  display: flex;5458  align-items: center;5459  gap: 4px;5460  padding: 2px 0 5px;5461}54625463.peach-identity-collapse-btn {5464  margin-left: auto;5465  background: transparent;5466  border: none;5467  cursor: pointer;5468  color: var(--peach-t3);5469  padding: 2px 4px;5470  display: flex;5471  align-items: center;5472  line-height: 0;5473  border-radius: 3px;5474  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5475}54765477.peach-identity-collapse-btn:hover {5478  color: var(--peach-t1);5479}54805481.peach-identity-collapse-btn.is-collapsed {5482  transform: rotate(-90deg);5483}54845485.peach-identity-rows {5486  display: grid;5487  grid-template-rows: 1fr;5488  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5489}54905491.peach-identity-rows.is-collapsed {5492  grid-template-rows: 0fr;5493}54945495.peach-identity-rows-inner {5496  overflow-y: auto;5497  min-height: 0;5498  max-height: 148px;5499  scrollbar-width: thin;5500  scrollbar-color: var(--peach-t3) transparent;5501  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5502  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5503}55045505.peach-identity-rows-inner::-webkit-scrollbar {5506  width: 4px;5507}55085509.peach-identity-rows-inner::-webkit-scrollbar-track {5510  background: transparent;5511}55125513.peach-identity-rows-inner::-webkit-scrollbar-thumb {5514  background: var(--peach-t3);5515  border-radius: 2px;5516}55175518.peach-identity-filter-pill {5519  padding: 2px 7px;5520  border-radius: 999px;5521  border: 1px solid var(--peach-t3);5522  background: transparent;5523  color: var(--peach-t2);5524  font-family: "IBM Plex Mono", monospace;5525  font-size: 0.6rem;5526  cursor: pointer;5527  transition: border-color 80ms, background 80ms, color 80ms;5528}55295530.peach-identity-filter-pill.is-on {5531  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5532  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5533  color: var(--peach-accent);5534}55355536.peach-identity-suggestion {5537  display: flex;5538  align-items: center;5539  gap: 6px;5540  width: 100%;5541  padding: 4px 6px;5542  border-radius: 5px;5543  border: none;5544  background: transparent;5545  cursor: pointer;5546  text-align: left;5547  transition: background 80ms ease;5548}55495550.peach-identity-suggestion:hover,5551.peach-identity-suggestion:focus {5552  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5553  outline: none;5554}55555556.peach-identity-suggestion-value {5557  font-family: "IBM Plex Mono", monospace;5558  font-size: 0.7rem;5559  color: var(--peach-t1);5560  overflow: hidden;5561  text-overflow: ellipsis;5562  white-space: nowrap;5563  flex: 1;5564  min-width: 0;5565}55665567.peach-identity-suggestion-type {5568  font-family: "IBM Plex Mono", monospace;5569  font-size: 0.55rem;5570  font-weight: 600;5571  flex-shrink: 0;5572  padding: 1px 4px;5573  border-radius: 3px;5574}55755576.peach-identity-suggestion-type--email {5577  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5578  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5579}55805581.peach-identity-suggestion-type--username {5582  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5583  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5584}55855586.peach-identity-suggestion-meta {5587  font-family: "IBM Plex Mono", monospace;5588  font-size: 0.6rem;5589  color: var(--peach-t3);5590  flex-shrink: 0;5591}55925593/* Tag filter strip */5594.peach-tag-filter-strip {5595  border-bottom: 1px solid var(--peach-t3);5596  flex-shrink: 0;5597}55985599.peach-tag-filter-chip {5600  display: inline-flex;5601  align-items: center;5602  padding: 4px 10px;5603  border-radius: 999px;5604  border: 1px solid var(--peach-t3);5605  background: transparent;5606  color: var(--peach-t2);5607  font-family: "IBM Plex Mono", monospace;5608  font-size: 0.5625rem;5609  letter-spacing: 0.06em;5610  text-transform: uppercase;5611  cursor: pointer;5612  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5613  white-space: nowrap;5614}56155616.peach-tag-filter-chip:hover {5617  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5618  color: var(--peach-t1);5619}56205621.peach-tag-filter-chip.is-selected {5622  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5623  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5624  color: var(--peach-t0);5625}56265627/* ─────────────────────────────────────────────────────────────────────────5628   v1.4.12 additions5629   ─────────────────────────────────────────────────────────────────────── */56305631/* Sort bar */5632.peach-sort-bar {5633  display: flex;5634  align-items: center;5635  gap: 4px;5636  padding: 5px 12px;5637  border-bottom: 1px solid var(--peach-t3);5638  flex-shrink: 0;5639  overflow-x: auto;5640  scrollbar-width: none;5641}56425643.peach-sort-btn {5644  padding: 2px 9px;5645  border-radius: 999px;5646  border: 1px solid transparent;5647  background: transparent;5648  color: var(--peach-t2);5649  font-family: "IBM Plex Mono", monospace;5650  font-size: 0.5625rem;5651  letter-spacing: 0.07em;5652  text-transform: uppercase;5653  cursor: pointer;5654  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5655  white-space: nowrap;5656}56575658.peach-sort-btn:hover {5659  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5660  color: var(--peach-t1);5661}56625663.peach-sort-btn.is-active {5664  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5665  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5666  color: var(--peach-t0);5667}56685669.peach-sort-scope-btn {5670  padding-inline: 8px;5671  font-size: 0.53125rem;5672  letter-spacing: 0.05em;5673}56745675.peach-sort-domain-hint {5676  margin-left: auto;5677  font-family: "IBM Plex Mono", monospace;5678  font-size: 0.5625rem;5679  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5680  white-space: nowrap;5681  overflow: hidden;5682  text-overflow: ellipsis;5683  max-width: 110px;5684}56855686/* Tab-match badge on entry rows */5687.peach-tab-match-badge {5688  display: inline-block;5689  width: 6px;5690  height: 6px;5691  border-radius: 50%;5692  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5693  margin-left: 5px;5694  vertical-align: middle;5695  flex-shrink: 0;5696  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5697}56985699.peach-entry-row.is-tab-match {5700  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5701  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5702}57035704.peach-entry-row.is-tab-match:hover {5705  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5706}57075708/* Entry list stagger entrance */5709@keyframes peach-entry-fadein {5710  from { opacity: 0; transform: translateY(4px); }5711  to   { opacity: 1; transform: translateY(0); }5712}57135714.peach-vault-list .peach-entry-row {5715  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5716}57175718/* Button press micro-interaction */5719.peach-btn:active {5720  transform: scale(0.95);5721  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5722}57235724.peach-sort-btn:active,5725.peach-tag-filter-chip:active {5726  transform: scale(0.93);5727  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5728}57295730/* Password strength bar (Lock view + shared) */5731.peach-password-strength {5732  display: flex;5733  align-items: center;5734  gap: 8px;5735  margin-top: 6px;5736}57375738.peach-strength-bar {5739  flex: 1;5740  height: 3px;5741  border-radius: 2px;5742  background: var(--peach-t3);5743  overflow: hidden;5744}57455746.peach-strength-fill {5747  height: 100%;5748  border-radius: 2px;5749  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5750              background 300ms ease;5751}57525753.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5754.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5755.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5756.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }57575758.peach-strength-label {5759  font-family: "IBM Plex Mono", monospace;5760  font-style: italic;5761  font-size: 0.5625rem;5762  font-weight: 300;5763  letter-spacing: 0.06em;5764  color: var(--peach-t2);5765  min-width: 36px;5766  text-align: right;5767}57685769.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5770.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5771.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5772.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }57735774/* Duress form */5775.peach-duress-status {5776  padding: 2px 8px;5777  border-radius: 999px;5778  border: 1px solid var(--peach-t3);5779  font-family: "IBM Plex Mono", monospace;5780  font-size: 0.5625rem;5781  letter-spacing: 0.07em;5782  text-transform: uppercase;5783  color: var(--peach-t2);5784  flex-shrink: 0;5785}57865787.peach-duress-status.is-active {5788  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5789  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5790  color: var(--peach-t0);5791}57925793.peach-duress-form {5794  padding: 8px 0 4px;5795  display: flex;5796  flex-direction: column;5797  gap: 6px;5798}57995800.peach-duress-form .peach-label {5801  margin-top: 4px;5802}58035804.peach-duress-actions {5805  display: flex;5806  gap: 6px;5807  align-items: center;5808  margin-top: 4px;5809}58105811.peach-duress-actions .peach-btn:first-child {5812  margin-right: auto;5813}58145815/* Improved overlay spring entrance */5816.peach-overlay-view.ov-enter-up {5817  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5818}58195820@keyframes ov-enter-up-spring {5821  from { opacity: 0; transform: translateY(16px) scale(0.98); }5822  to   { opacity: 1; transform: translateY(0) scale(1); }5823}58245825.peach-overlay-view.ov-enter-right {5826  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5827}58285829@keyframes ov-enter-right-spring {5830  from { opacity: 0; transform: translateX(18px) scale(0.98); }5831  to   { opacity: 1; transform: translateX(0) scale(1); }5832}58335834/* ── Onboarding-mode restore screens (file import) ── */5835/* Used when MainImportView renders during onboarding (no vault yet).5836   Animates like a lock-screen transition. */5837.peach-lock-view {5838  position: absolute;5839  inset: 0;5840  display: flex;5841  flex-direction: column;5842  background:5843    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5844    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5845    var(--peach-bg);5846  z-index: 2;5847  overflow: hidden;5848  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5849}58505851.peach-lock-view-header {5852  display: flex;5853  align-items: center;5854  justify-content: space-between;5855  padding: 16px 18px 12px;5856  flex-shrink: 0;5857}58585859/* ───────── Settings: auto-lock select ───────── */5860.peach-settings-select {5861  font-family: "IBM Plex Mono", monospace;5862  font-size: 0.6875rem;5863  background: transparent;5864  border: 1px solid var(--peach-t3);5865  border-radius: 4px;5866  color: var(--peach-t1);5867  padding: 3px 6px;5868  cursor: pointer;5869  outline: none;5870}5871.peach-settings-select:focus {5872  border-color: var(--peach-accent);5873}58745875/* ───────── Duress status pill (new polished) ───────── */5876.peach-duress-status-pill {5877  font-family: "IBM Plex Mono", monospace;5878  font-size: 0.5625rem;5879  text-transform: uppercase;5880  letter-spacing: 0.12em;5881  padding: 2px 8px;5882  border-radius: 12px;5883  background: var(--peach-t3);5884  color: var(--peach-t2);5885  flex-shrink: 0;5886}5887.peach-duress-status-pill.is-active {5888  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5889  color: var(--peach-accent);5890}58915892/* ───────── Entry advanced disclosure (canary) ───────── */5893.peach-entry-advanced {5894  margin-top: 12px;5895  border-top: 1px solid var(--peach-t3);5896  padding-top: 10px;5897  position: relative;5898  z-index: 1;5899}5900.peach-entry-advanced-toggle {5901  display: flex;5902  align-items: center;5903  justify-content: space-between;5904  width: 100%;5905  background: transparent;5906  border: none;5907  cursor: pointer;5908  padding: 0;5909  color: var(--peach-t2);5910}5911.peach-canary-section {5912  margin-top: 10px;5913  display: grid;5914  gap: 6px;5915}59165917/* ───────── Import: merge/replace radio choices ───────── */5918.peach-import-choice {5919  display: flex;5920  align-items: flex-start;5921  gap: 10px;5922  padding: 8px 10px;5923  border: 1px solid var(--peach-t3);5924  border-radius: 10px;5925  cursor: pointer;5926  margin-bottom: 6px;5927  transition: border-color 120ms ease, background 120ms ease;5928}5929.peach-import-choice:hover {5930  border-color: var(--peach-accent);5931}5932.peach-import-choice input[type="radio"] {5933  margin-top: 3px;5934  accent-color: var(--peach-accent);5935  flex-shrink: 0;5936}5937.peach-import-choice-main {5938  display: flex;5939  flex-direction: column;5940  gap: 2px;5941  min-width: 0;5942}5943.peach-import-choice-label {5944  font-size: 0.75rem;5945  color: var(--peach-t0);5946}5947.peach-import-choice-sub {5948  font-size: 0.6875rem;5949  color: var(--peach-t2);5950  line-height: 1.5;5951}59525953/* ───────── Export: success confirmation strip ───────── */5954.peach-export-success {5955  display: flex;5956  align-items: flex-start;5957  gap: 10px;5958  padding: 12px;5959  border-radius: 12px;5960  border: 1px solid rgba(150, 175, 110, 0.3);5961  background: rgba(150, 175, 110, 0.08);5962  color: var(--peach-t0);5963  font-size: 0.75rem;5964  line-height: 1.55;5965}5966.peach-export-success-check {5967  color: rgba(150, 175, 110, 0.9);5968  font-size: 0.875rem;5969  flex-shrink: 0;5970}59715972/* ── Trash view ──────────────────────────────────────────────────────── */5973.peach-trash-entry-row {5974  display: flex;5975  align-items: center;5976  justify-content: space-between;5977  gap: 8px;5978  padding: 8px 0;5979  border-bottom: 1px solid var(--peach-border);5980}5981.peach-trash-entry-info {5982  flex: 1;5983  min-width: 0;5984  display: flex;5985  flex-direction: column;5986  gap: 2px;5987}5988.peach-trash-entry-title {5989  font-size: 0.8125rem;5990  color: var(--peach-t0);5991  overflow: hidden;5992  text-overflow: ellipsis;5993  white-space: nowrap;5994}5995.peach-trash-entry-meta {5996  font-family: var(--font-mono);5997  font-size: 0.5625rem;5998  color: var(--peach-t2);5999  letter-spacing: 0.04em;6000}6001.peach-trash-entry-actions {6002  display: flex;6003  align-items: center;6004  gap: 4px;6005  flex-shrink: 0;6006}6007.peach-trash-delete-btn {6008  background: transparent;6009  border: 0;6010  color: var(--peach-t3);6011  font-size: 1rem;6012  line-height: 1;6013  cursor: pointer;6014  padding: 2px 5px;6015  transition: color 0.15s;6016}6017.peach-trash-delete-btn:hover { color: var(--peach-breach); }6018.peach-trash-list {6019  overflow-y: auto;6020}6021.peach-trash-footer {6022  display: flex;6023  align-items: center;6024  gap: 8px;6025  padding: 8px 0 0;6026  border-top: 1px solid var(--peach-border);6027  margin-top: 4px;6028}6029.peach-trash-purge-all {6030  background: transparent;6031  border: 0;6032  color: var(--peach-t3);6033  font-size: 0.625rem;6034  cursor: pointer;6035  padding: 4px 0;6036  letter-spacing: 0.03em;6037  transition: color 0.2s;6038}6039.peach-trash-purge-all:hover { color: var(--peach-breach); }6040.peach-trash-purge-confirm-label {6041  font-size: 0.625rem;6042  color: var(--peach-t1);6043  flex: 1;6044}60456046/* ── Settings shortcuts grid ─────────────────────────────────────────── */6047.peach-shortcuts-grid {6048  display: grid;6049  grid-template-columns: auto 1fr;6050  gap: 6px 12px;6051  align-items: center;6052  padding: 4px 0;6053}6054.peach-shortcut-key {6055  font-family: var(--font-mono);6056  font-size: 0.625rem;6057  color: var(--peach-t0);6058  background: var(--peach-t3);6059  border-radius: 4px;6060  padding: 2px 6px;6061  white-space: nowrap;6062  text-align: center;6063}6064.peach-shortcut-desc {6065  font-size: 0.6875rem;6066  color: var(--peach-t1);6067}60686069/* ── Sort bar trash button ───────────────────────────────────────────── */6070.peach-sort-trash-btn {6071  display: flex;6072  align-items: center;6073  justify-content: center;6074  padding: 3px 5px;6075  background: transparent;6076  border: none;6077  cursor: pointer;6078  color: var(--peach-t2);6079  border-radius: 4px;6080  transition: color 140ms ease, background 140ms ease;6081}6082.peach-sort-trash-btn:hover {6083  color: var(--peach-t1);6084  background: var(--peach-t3);6085}6086.peach-sort-trash-btn.is-active {6087  color: var(--peach-accent);6088}60896090/* Accent color picker */6091.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }6092.peach-accent-picker {6093  display: flex;6094  flex-wrap: wrap;6095  gap: 7px;6096  padding: 2px 0;6097}6098.peach-accent-swatch {6099  width: 22px;6100  height: 22px;6101  border-radius: 50%;6102  border: 2px solid transparent;6103  cursor: pointer;6104  padding: 0;6105  transition: transform 100ms;6106  outline-offset: 2px;6107}6108.peach-accent-swatch:hover { transform: scale(1.15); }6109.peach-accent-swatch.is-active {6110  border-color: var(--peach-t0);6111  transform: scale(1.1);6112}61136114.peach-pill-group {6115  display: flex;6116  gap: 6px;6117}6118.peach-pill-group .peach-btn.is-active {6119  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);6120  border-color: var(--peach-accent);6121  color: var(--peach-t0);6122}61236124/* ── Card entry styles ───────────────────────────────────────── */6125.peach-card-number {6126  font-family: var(--peach-mono);6127  letter-spacing: 0.08em;6128}61296130.peach-card-network-badge {6131  font-size: 0.625rem;6132  padding: 1px 5px;6133  border-radius: 4px;6134  border: 0.5px solid var(--peach-border);6135  color: var(--peach-text-dim);6136  margin-left: 6px;6137  vertical-align: middle;6138}61396140.peach-card-expiry-row {6141  display: flex;6142  align-items: center;6143  gap: 8px;6144}61456146.peach-card-expiry-sep {6147  color: var(--peach-text-dim);6148}61496150/* ── Pro tier — upgrade screen ──────────────────────────────── */6151.peach-pro-mark {6152  font-size: 0.5625rem;6153  color: var(--peach-accent);6154  margin-left: 6px;6155  vertical-align: super;6156  opacity: 0.7;6157}61586159.peach-pro-mini-badge {6160  display: block;6161  font-size: 0.625rem;6162  font-style: italic;6163  color: var(--peach-accent);6164  letter-spacing: 0.04em;6165  margin-top: -2px;6166  padding-left: 2px;6167  opacity: 0.85;6168  text-align: center;6169}61706171.peach-wordmark-stack {6172  display: inline-flex;6173  flex-direction: column;6174  align-items: center;6175}61766177/* ── Pro tier — upgrade page ─────────────────────────────────── */6178/* ── Pro upgrade — redesigned editorial layout ─────────────────── */61796180.peach-pro-upgrade {6181  display: flex;6182  flex-direction: column;6183  align-items: stretch;6184  gap: 10px;6185  padding: 2px 2px 12px;6186}61876188.peach-pro-eyebrow {6189  margin: 0;6190  font-family: var(--font-ui);6191  font-size: 0.625rem;6192  font-weight: 500;6193  letter-spacing: 0.12em;6194  color: var(--peach-accent);6195}61966197.peach-pro-headline {6198  margin: 0;6199  font-family: var(--font-display, "Cormorant Garamond", serif);6200  font-size: 30px;6201  font-weight: 700;6202  font-style: normal;6203  line-height: 1.05;6204  color: var(--peach-t0);6205  letter-spacing: -0.01em;6206}6207.peach-pro-headline em {6208  font-style: italic;6209  font-weight: 400;6210  color: var(--peach-accent);6211}62126213.peach-pro-subtitle {6214  margin: 0;6215  font-size: 0.6875rem;6216  line-height: 1.5;6217  color: var(--peach-t1);6218}62196220/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6221.peach-pro-section-label {6222  margin: 6px 0 0;6223  font-family: var(--font-ui);6224  font-size: 0.5625rem;6225  font-weight: 500;6226  letter-spacing: 0.12em;6227  text-transform: uppercase;6228  color: var(--peach-t2);6229}62306231/* 2-column numbered feature grid */6232.peach-pro-grid {6233  display: grid;6234  grid-template-columns: 1fr 1fr;6235  border-top: 1px solid var(--peach-border);6236  border-left: 1px solid var(--peach-border);6237}62386239.peach-pro-grid-item {6240  display: flex;6241  flex-direction: column;6242  gap: 2px;6243  padding: 8px 9px;6244  border-right: 1px solid var(--peach-border);6245  border-bottom: 1px solid var(--peach-border);6246}62476248.peach-pro-grid-item--wide {6249  grid-column: 1 / -1;6250}62516252.peach-pro-grid-num {6253  font-family: var(--font-mono);6254  font-size: 0.5625rem;6255  color: var(--peach-accent);6256  letter-spacing: 0.06em;6257  opacity: 0.85;6258}62596260.peach-pro-grid-name {6261  font-size: 0.8125rem;6262  font-weight: 500;6263  color: var(--peach-t0);6264  line-height: 1.2;6265}62666267.peach-pro-grid-desc {6268  font-size: 0.625rem;6269  color: var(--peach-t1);6270  line-height: 1.4;6271}62726273.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6274  animation: peach-pulse-accent 600ms ease-out forwards;6275}62766277@keyframes peach-pulse-accent {6278  0%   { opacity: 1; transform: scale(1.2); }6279  100% { opacity: 0.85; transform: scale(1); }6280}62816282/* Actions */6283.peach-pro-upgrade-actions {6284  display: flex;6285  flex-direction: column;6286  align-items: stretch;6287  gap: 10px;6288}62896290.peach-pro-pricing {6291  margin: 0;6292  font-size: 1rem;6293  font-weight: 600;6294  color: var(--peach-t0);6295  letter-spacing: 0.01em;6296}6297.peach-pro-pricing-sub {6298  font-size: 0.75rem;6299  font-weight: 400;6300  color: var(--peach-t1);6301  letter-spacing: 0.02em;6302}63036304.peach-pro-upgrade-cta {6305  display: flex;6306  align-items: center;6307  justify-content: center;6308  text-decoration: none;6309  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6310  border: 1px solid var(--peach-accent);6311  border-radius: 10px;6312  color: var(--peach-accent);6313  font-family: var(--font-ui);6314  font-size: 0.8125rem;6315  font-weight: 600;6316  letter-spacing: 0.06em;6317  padding: 11px 16px;6318  transition: background 0.15s ease, color 0.15s ease;6319}6320.peach-pro-upgrade-cta:hover {6321  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6322}63236324.peach-pro-key-divider {6325  display: flex;6326  align-items: center;6327  gap: 8px;6328  color: var(--peach-t2);6329  font-size: 0.5625rem;6330  letter-spacing: 0.1em;6331}6332.peach-pro-key-divider::before,6333.peach-pro-key-divider::after {6334  content: "";6335  flex: 1;6336  height: 1px;6337  background: var(--peach-border);6338}63396340/* Inline key entry row */6341.peach-pro-key-inline {6342  display: flex;6343  align-items: center;6344  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6345  border: 1px solid var(--peach-border);6346  border-radius: 8px;6347  overflow: hidden;6348}6349.peach-pro-key-inline-input {6350  flex: 1;6351  background: transparent;6352  border: none;6353  outline: none;6354  color: var(--peach-t1);6355  font-family: var(--font-mono);6356  font-size: 0.625rem;6357  letter-spacing: 0.06em;6358  padding: 9px 10px;6359}6360.peach-pro-key-inline-input::placeholder {6361  color: var(--peach-t2);6362}6363.peach-pro-key-apply {6364  background: transparent;6365  border: none;6366  border-left: 1px solid var(--peach-border);6367  color: var(--peach-t2);6368  font-family: var(--font-ui);6369  font-size: 0.5625rem;6370  font-weight: 600;6371  letter-spacing: 0.08em;6372  padding: 9px 10px;6373  cursor: pointer;6374  transition: color 0.15s ease;6375  flex-shrink: 0;6376}6377.peach-pro-key-apply:not(:disabled):hover {6378  color: var(--peach-accent);6379}6380.peach-pro-key-apply:disabled {6381  opacity: 0.35;6382  cursor: not-allowed;6383}63846385/* ── Pro tier — key ceremony ─────────────────────────────────── */6386.peach-pro-key-ceremony {6387  display: flex;6388  flex-direction: column;6389  align-items: center;6390  gap: 12px;6391  padding: 20px 4px 16px;6392}63936394.peach-pro-key-ceremony .peach-lock-rune-string {6395  font-size: 1rem;6396  gap: 12px;6397  flex: 0;6398  justify-content: center;6399}64006401.peach-pro-key-ceremony-label {6402  margin: 0;6403  font-size: 0.6875rem;6404  color: var(--peach-t2);6405  font-style: italic;6406  letter-spacing: 0.04em;6407}64086409.peach-pro-key-input {6410  font-family: var(--font-mono, monospace);6411  letter-spacing: 0.06em;6412  text-align: center;6413  width: 100%;6414  box-sizing: border-box;6415}64166417.peach-pro-key-error {6418  margin: 0;6419  font-size: 0.75rem;6420  text-align: center;6421  color: var(--peach-breach, #e55);6422  padding: 0;6423}64246425.peach-pro-key-activate {6426  width: 100%;6427  text-align: center;6428  box-sizing: border-box;6429  padding: 10px 20px;6430  font-size: 0.8125rem;6431}64326433.peach-pro-key-cancel {6434  background: transparent;6435  border: 0;6436  color: var(--peach-t2);6437  font-size: 0.6875rem;6438  cursor: pointer;6439  padding: 2px 8px;6440  transition: color 0.2s;6441}64426443.peach-pro-key-cancel:hover { color: var(--peach-accent); }64446445/* ── Pro tier — active state ─────────────────────────────────── */6446.peach-pro-active {6447  display: flex;6448  flex-direction: column;6449  align-items: center;6450  gap: 0;6451  padding: 8px 4px 16px;6452  min-height: 280px;6453}64546455.peach-pro-active-hero {6456  display: flex;6457  flex-direction: column;6458  align-items: center;6459  gap: 6px;6460  padding: 20px 0 8px;6461}64626463.peach-pro-active-mark-wrap {6464  display: flex;6465  align-items: center;6466  justify-content: center;6467  margin-bottom: 4px;6468}64696470.peach-pro-active-mark {6471  width: 60px;6472  height: 60px;6473}64746475.peach-pro-active-title {6476  font-family: var(--font-display, var(--font-ui));6477  font-size: 26px;6478  margin: 0;6479  color: var(--peach-t0);6480  letter-spacing: 0.01em;6481}64826483.peach-pro-active-since {6484  margin: 0;6485  font-size: 0.6875rem;6486  color: var(--peach-t2);6487  font-style: italic;6488}64896490.peach-pro-active-features {6491  display: flex;6492  flex-direction: column;6493  gap: 8px;6494  width: 100%;6495  padding: 14px 8px 0;6496  border-top: 1px solid var(--peach-border);6497  flex: 1;6498}64996500.peach-pro-active-feature {6501  display: flex;6502  align-items: center;6503  gap: 9px;6504}65056506.peach-pro-active-feature-mark {6507  color: var(--peach-accent);6508  font-size: 0.625rem;6509  opacity: 0.65;6510  flex-shrink: 0;6511}65126513.peach-pro-active-feature-name {6514  font-size: 0.75rem;6515  color: var(--peach-t1);6516}65176518.peach-pro-deactivate {6519  align-self: center;6520  background: transparent;6521  border: 0;6522  color: var(--peach-t3);6523  font-size: 0.625rem;6524  cursor: pointer;6525  padding: 8px 0 0;6526  margin-top: 16px;6527  letter-spacing: 0.03em;6528  transition: color 0.2s;6529}65306531.peach-pro-deactivate:hover { color: var(--peach-t2); }65326533.peach-pro-deactivate:disabled {6534  opacity: 0.5;6535  cursor: default;6536}65376538/* ── Pro card activation sparkles & thank-you ── */6539button.peach-pro-active-mark-wrap {6540  background: transparent;6541  border: 0;6542  padding: 0;6543  cursor: pointer;6544  position: relative;6545  overflow: visible;6546}65476548.peach-pro-sparks {6549  position: absolute;6550  inset: 0;6551  pointer-events: none;6552  overflow: visible;6553}65546555.peach-pro-spark {6556  position: absolute;6557  top: 50%;6558  left: 50%;6559  font-size: 9px;6560  line-height: 1;6561  opacity: 0;6562  transform: translate(-50%, -50%);6563  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;6564}65656566@keyframes peach-pro-spark-fly {6567  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }6568  25%  { opacity: 1; }6569  100% {6570    opacity: 0;6571    transform: translate(6572      calc(-50% + var(--spark-x, 0px)),6573      calc(-50% + var(--spark-y, -40px))6574    ) scale(0.8);6575  }6576}65776578.peach-pro-thankyou-text {6579  margin: 4px 0 0;6580  font-size: 0.6875rem;6581  font-style: italic;6582  color: currentColor;6583  opacity: 0;6584  animation: peach-pro-thankyou-flash 2.5s ease both;6585}65866587@keyframes peach-pro-thankyou-flash {6588  0%   { opacity: 0; transform: translateY(4px); }6589  15%  { opacity: 0.75; transform: translateY(0); }6590  75%  { opacity: 0.75; }6591  100% { opacity: 0; }6592}65936594/* ── Pro advanced health remediation queue ──────────────────── */6595.peach-health-pro-queue {6596  display: flex;6597  flex-direction: column;6598  gap: 10px;6599  padding: 12px;6600  margin: 0 0 12px;6601  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6602  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6603  border-radius: 10px;6604}66056606.peach-health-pro-queue-head {6607  display: flex;6608  justify-content: space-between;6609  align-items: baseline;6610}66116612.peach-health-pro-queue-title {6613  font-size: 0.75rem;6614  font-weight: 500;6615  letter-spacing: 0.04em;6616  text-transform: uppercase;6617  color: var(--peach-accent);6618}66196620.peach-health-pro-queue-score {6621  font-size: 0.6875rem;6622  color: var(--peach-t2);6623}66246625.peach-health-pro-row {6626  display: flex;6627  gap: 10px;6628  align-items: center;6629  padding: 8px 0;6630  border-top: 1px solid var(--peach-border);6631}66326633.peach-health-pro-row-info {6634  flex: 1;6635  display: flex;6636  flex-direction: column;6637  gap: 4px;6638  min-width: 0;6639}66406641.peach-health-pro-action {6642  flex: 0 0 auto;6643  padding: 4px 8px;6644  font-size: 0.5625rem;6645  letter-spacing: 0.08em;6646  text-transform: uppercase;6647}66486649.peach-health-pro-row-name {6650  font-size: 0.8125rem;6651  color: var(--peach-t0);6652  overflow: hidden;6653  text-overflow: ellipsis;6654  white-space: nowrap;6655}66566657.peach-health-pro-row-meta {6658  font-size: 0.6875rem;6659  color: var(--peach-t2);6660}66616662.peach-health-pro-bar {6663  height: 2px;6664  background: var(--peach-border);6665  border-radius: 2px;6666  overflow: hidden;6667  margin-top: 2px;6668}66696670.peach-health-pro-bar-fill {6671  height: 100%;6672  background: var(--peach-accent);6673  transition: width 200ms ease-out;6674}66756676/* ── Pro activation celebration ── */6677@keyframes peach-pro-bloom {6678  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6679  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6680                 drop-shadow(0 0 48px var(--peach-glow)); }6681  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6682}66836684@keyframes peach-pro-wordmark-in {6685  from { opacity: 0; transform: translateY(4px); }6686  to   { opacity: 1; transform: translateY(0); }6687}66886689@keyframes peach-pro-fade-out {6690  from { opacity: 1; }6691  to   { opacity: 0; }6692}66936694.peach-pro-celebration {6695  background:6696    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6697    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6698    var(--peach-bg);6699  border: 1px solid var(--peach-t3);6700  box-shadow:6701    0 2px 8px rgba(0,0,0,0.55),6702    0 14px 48px rgba(0,0,0,0.7),6703    0 0 0 1px rgba(240,232,216,0.04);6704  overflow: hidden;6705  width: 320px;6706  height: 520px;6707  display: flex;6708  flex-direction: column;6709  align-items: center;6710  justify-content: center;6711  gap: 8px;6712  padding: 32px 24px;6713  text-align: center;6714}67156716.peach-pro-celebration.is-leaving {6717  animation: peach-pro-fade-out 400ms ease forwards;6718}67196720.peach-pro-bloom-target {6721  display: flex;6722  align-items: center;6723  justify-content: center;6724  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6725  margin-bottom: 12px;6726}67276728.peach-pro-bloom-icon {6729  width: 48px;6730  height: 48px;6731}67326733.peach-pro-wordmark {6734  font-family: var(--font-display);6735  font-size: 22px;6736  font-style: italic;6737  font-weight: 400;6738  color: var(--peach-accent);6739  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6740}67416742.peach-pro-thankyou {6743  font-size: 0.75rem;6744  font-style: italic;6745  color: var(--peach-t2);6746  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6747}674867496750/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6751.peach-pro-notice-banner {6752  display: flex;6753  align-items: center;6754  gap: 8px;6755  padding: 7px 12px;6756  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6757  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6758  font-size: 0.6875rem;6759  color: var(--peach-t2);6760  font-family: "IBM Plex Mono", monospace;6761  flex-shrink: 0;6762}67636764.peach-pro-notice-link {6765  background: none;6766  border: none;6767  padding: 0;6768  cursor: pointer;6769  font-size: 0.6875rem;6770  color: var(--peach-accent);6771  font-family: "IBM Plex Mono", monospace;6772  margin-left: auto;6773  white-space: nowrap;6774}67756776.peach-pro-notice-close {6777  background: none;6778  border: none;6779  padding: 0 0 0 4px;6780  cursor: pointer;6781  font-size: 0.625rem;6782  color: var(--peach-t3);6783  line-height: 1;6784}67856786/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6787   Renders over whatever view is showing. 60-second expiry; the popup ticks6788   the countdown each second and clears the banner when it hits zero. */6789.peach-pair-request-banner {6790  display: flex;6791  flex-direction: column;6792  gap: 8px;6793  padding: 10px 12px;6794  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6795  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6796  font-family: "IBM Plex Mono", monospace;6797  flex-shrink: 0;6798}67996800.peach-pair-toast {6801  padding: 8px 12px;6802  font-family: "IBM Plex Mono", monospace;6803  font-size: 0.75rem;6804  color: var(--peach-t1);6805  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6806  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6807  flex-shrink: 0;6808  text-align: center;6809}68106811.peach-pair-toast strong {6812  color: var(--peach-t0);6813  font-weight: 500;6814}68156816.peach-pair-request-header {6817  display: flex;6818  align-items: center;6819  gap: 8px;6820  font-size: 0.75rem;6821  color: var(--peach-t1);6822}68236824.peach-pair-request-mark {6825  font-size: 0.875rem;6826  display: inline-flex;6827  align-items: center;6828}68296830.peach-pair-request-icon {6831  width: 1em;6832  height: 1em;6833}68346835.peach-pair-request-title {6836  font-weight: 600;6837  color: var(--peach-t0);6838}68396840.peach-pair-request-countdown {6841  margin-left: auto;6842  font-variant-numeric: tabular-nums;6843  color: var(--peach-t2);6844  font-size: 0.6875rem;6845}68466847.peach-pair-request-body {6848  margin: 0;6849  font-size: 0.75rem;6850  color: var(--peach-t1);6851  line-height: 1.4;6852}68536854.peach-pair-request-body strong {6855  color: var(--peach-t0);6856  font-weight: 600;6857}68586859.peach-pair-request-actions {6860  display: flex;6861  gap: 8px;6862  justify-content: flex-end;6863}68646865/* ─── First-run onboarding ──────────────────────────────────────────────6866   Three-card welcome shown once before vault creation. The PeachScript6867   rune background drifts behind everything at very low opacity — it's6868   atmosphere, not focus. The cards themselves use the same panel6869   language as the rest of the popup so the transition into NewVault is6870   continuous, not a jarring switch of visual register. */68716872.peach-onboarding {6873  position: relative;6874  display: flex;6875  flex-direction: column;6876  width: 100%;6877  height: 100%;6878  padding: 16px 16px 18px;6879  box-sizing: border-box;6880  overflow: hidden;6881  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6882}68836884.peach-onboarding.is-completing {6885  animation: peach-onboard-exit 200ms ease-out forwards;6886}68876888.peach-rune-background {6889  position: absolute;6890  inset: 0;6891  width: 100%;6892  height: 100%;6893  pointer-events: none;6894  z-index: 0;6895  transition: opacity 500ms ease-out;6896}68976898.peach-onboarding.is-completing .peach-rune-background {6899  opacity: 0;6900}69016902.peach-onboarding-header {6903  position: relative;6904  z-index: 1;6905  display: flex;6906  align-items: center;6907  margin-bottom: 14px;6908}69096910.peach-onboarding-card {6911  position: relative;6912  z-index: 1;6913  flex: 1;6914  display: flex;6915  flex-direction: column;6916  gap: 10px;6917  padding: 22px 20px;6918  border-radius: 16px;6919  border: 1px solid var(--peach-t3);6920  background:6921    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6922  backdrop-filter: blur(3px);6923  -webkit-backdrop-filter: blur(3px);6924  box-shadow:6925    inset 0 1px 0 rgba(240, 232, 216, 0.04),6926    0 12px 28px rgba(0, 0, 0, 0.12);6927  cursor: pointer;6928  user-select: none;6929  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6930}69316932.peach-onboarding-card.is-exiting {6933  animation: peach-card-out 120ms ease-in forwards;6934  pointer-events: none;6935}69366937.peach-onboarding-card-headline {6938  margin: 0;6939  font-family: var(--font-display);6940  font-style: italic;6941  font-weight: 400;6942  font-size: 22px;6943  line-height: 1.05;6944  color: var(--peach-t0);6945  white-space: pre-line;6946}69476948.peach-onboarding-divider {6949  margin: 4px 0 6px;6950  border: 0;6951  border-top: 1px solid var(--peach-t3);6952  width: 100%;6953}69546955.peach-onboarding-body {6956  margin: 0;6957  font-size: 0.8125rem;6958  line-height: 1.6;6959  color: var(--peach-t1);6960}69616962.peach-onboarding-warning {6963  display: flex;6964  align-items: flex-start;6965  gap: 8px;6966  margin: 6px 0 0;6967  padding-top: 8px;6968  border-top: 1px dashed var(--peach-t3);6969  font-size: 0.8125rem;6970  line-height: 1.5;6971  color: var(--peach-t1);6972}69736974.peach-onboarding-warning-icon {6975  color: var(--peach-accent);6976  font-size: 0.8125rem;6977  line-height: 1.5;6978  flex: 0 0 auto;6979}69806981.peach-onboarding-nav {6982  position: relative;6983  z-index: 1;6984  display: flex;6985  align-items: center;6986  justify-content: space-between;6987  margin-top: 12px;6988  padding: 0 4px;6989}69906991.peach-onboarding-dots {6992  display: flex;6993  align-items: center;6994  gap: 6px;6995}69966997.peach-onboarding-dot {6998  width: 6px;6999  height: 6px;7000  border-radius: 50%;7001  background: var(--peach-t2);7002  transition: width 200ms ease, height 200ms ease, background 200ms ease;7003}70047005.peach-onboarding-dot.is-active {7006  width: 8px;7007  height: 8px;7008  background: var(--peach-accent);7009}70107011.peach-onboarding-next {7012  background: none;7013  border: none;7014  padding: 4px 0;7015  cursor: pointer;7016  font-family: "IBM Plex Mono", monospace;7017  font-size: 0.6875rem;7018  letter-spacing: 0.04em;7019  color: var(--peach-t1);7020  transition: color 150ms ease;7021}70227023.peach-onboarding-next:hover {7024  color: var(--peach-t0);7025}70267027.peach-onboarding-next:disabled {7028  opacity: 0.5;7029  cursor: default;7030}70317032.peach-onboarding-back {7033  background: none;7034  border: none;7035  padding: 4px 0;7036  cursor: pointer;7037  font-family: "IBM Plex Mono", monospace;7038  font-size: 0.6875rem;7039  letter-spacing: 0.04em;7040  color: var(--peach-t2);7041  transition: color 150ms ease;7042}70437044.peach-onboarding-back:hover {7045  color: var(--peach-t0);7046}70477048.peach-onboarding-back:disabled {7049  opacity: 0.5;7050  cursor: default;7051}70527053/* Reserve back-button width on the first card so the dots stay centred */7054.peach-onboarding-back-spacer {7055  width: 44px;7056}70577058.peach-onboarding-mobile-card-buttons {7059  display: flex;7060  flex-direction: column;7061  gap: 8px;7062  margin-top: 16px;7063}70647065@keyframes peach-onboard-enter {7066  from { opacity: 0; transform: translateY(20px); }7067  to   { opacity: 1; transform: translateY(0); }7068}70697070@keyframes peach-onboard-exit {7071  from { opacity: 1; }7072  to   { opacity: 0; }7073}70747075@keyframes peach-card-in {7076  from { opacity: 0; transform: translateX(12px); }7077  to   { opacity: 1; transform: translateX(0); }7078}70797080@keyframes peach-card-out {7081  from { opacity: 1; transform: translateX(0); }7082  to   { opacity: 0; transform: translateX(-12px); }7083}70847085/* ─── New vault screen — matched to onboarding card language ─────────── */70867087/* Two classes so this beats the shared .peach-screen.lock-screen--vault-stage7088   rule (same element) without loosening the unlock/restore screens. The7089   create-vault screen is the only vault-stage view tall enough to overflow7090   the 520px popup, so its spacing is tuned to fit header → card → restore →7091   recovery warning with nothing clipped. */7092.peach-screen.peach-newvault {7093  position: relative;7094  display: flex;7095  flex-direction: column;7096  gap: 12px;7097  padding: 14px 16px 12px;7098  overflow: hidden;7099}71007101/* Suppress the warm-blob ambient art inherited from .lock-screen — the7102   new vault card now carries the visual weight. */7103.peach-newvault::before {7104  content: none;7105}71067107.peach-newvault-header {7108  position: relative;7109  z-index: 2;7110  display: flex;7111  align-items: center;7112  gap: 10px;7113  margin-bottom: 2px;7114}71157116.peach-newvault-back {7117  display: inline-flex;7118  align-items: center;7119  gap: 4px;7120  background: transparent;7121  border: none;7122  color: var(--peach-t2);7123  font-family: "IBM Plex Mono", monospace;7124  font-size: 0.625rem;7125  letter-spacing: 0.06em;7126  cursor: pointer;7127  padding: 4px 6px;7128  border-radius: 6px;7129  transition: color 120ms ease, background 120ms ease;7130}71317132.peach-newvault-back:hover {7133  color: var(--peach-t0);7134  background: rgba(240, 232, 216, 0.04);7135}71367137.peach-newvault-mark {7138  position: absolute;7139  right: -12px;7140  top: 6px;7141  width: 110px;7142  height: 110px;7143  pointer-events: none;7144  opacity: 0.10;7145  filter: saturate(0.9);7146  z-index: 0;7147}7148.peach-newvault-mark-art {7149  width: 100%;7150  height: 100%;7151}7152.peach-newvault-mark-art path:nth-child(1) {7153  fill: rgba(123, 144, 96, 0.88);7154}7155.peach-newvault-mark-art path:nth-child(2) {7156  stroke: rgba(94, 122, 66, 0.95);7157}71587159.peach-newvault-card {7160  position: relative;7161  z-index: 1;7162  display: flex;7163  flex-direction: column;7164  gap: 8px;7165  padding: 16px 20px 14px;7166  border-radius: 16px;7167  border: 1px solid var(--peach-t3);7168  background:7169    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));7170  backdrop-filter: blur(3px);7171  -webkit-backdrop-filter: blur(3px);7172  box-shadow:7173    inset 0 1px 0 rgba(240, 232, 216, 0.04),7174    0 12px 28px rgba(0, 0, 0, 0.12);7175  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;7176}71777178.peach-newvault-headline {7179  margin: 0;7180  font-family: var(--font-display);7181  font-style: italic;7182  font-weight: 400;7183  font-size: 24px;7184  line-height: 1.05;7185  color: var(--peach-t0);7186  white-space: pre-line;7187}71887189.peach-newvault-divider {7190  margin: 2px 0 4px;7191  border: 0;7192  border-top: 1px solid var(--peach-t3);7193  width: 100%;7194}71957196.peach-newvault-field {7197  display: flex;7198  flex-direction: column;7199  gap: 4px;7200}72017202.peach-newvault-label-row {7203  display: flex;7204  align-items: center;7205  justify-content: space-between;7206}72077208/* Monospace input scaled to the card. Replaces the 22px unlock-input7209   so the placeholder no longer overflows and the field reads as part7210   of the same surface as the body copy. */7211.peach-newvault-input {7212  font-size: 0.875rem;7213  letter-spacing: 0.18em;7214  padding: 8px 0;7215}7216.peach-newvault-input::placeholder {7217  letter-spacing: 0.18em;7218  color: var(--peach-t2);7219}72207221.peach-newvault-hint {7222  margin: 2px 0 0;7223  font-family: "IBM Plex Mono", monospace;7224  font-size: 0.625rem;7225  color: var(--peach-t2);7226  letter-spacing: 0.04em;7227}72287229.peach-newvault-submit {7230  margin-top: 4px;7231}72327233.peach-newvault-warning {7234  display: flex;7235  align-items: flex-start;7236  gap: 8px;7237  margin: 2px 0 0;7238  padding-top: 8px;7239  border-top: 1px dashed var(--peach-t3);7240  font-size: 0.75rem;7241  line-height: 1.45;7242  color: var(--peach-t1);7243}72447245.peach-newvault-warning-icon {7246  color: var(--peach-accent);7247  font-size: 0.8125rem;7248  line-height: 1.4;7249  flex: 0 0 auto;7250}72517252/* Restore options sit inside the card, directly under "create vault", so7253   they are always reachable without scrolling. The top divider mirrors the7254   warning's so the choice reads as a deliberate fork, not a footnote. */7255.peach-newvault-restore {7256  position: relative;7257  z-index: 1;7258  display: flex;7259  flex-direction: column;7260  gap: 4px;7261  margin-top: 4px;7262  padding-top: 10px;7263  border-top: 1px dashed var(--peach-t3);7264}72657266/* Settings body — warm accent gradient gives the glass something to blur against */7267.peach-settings-body {7268  background:7269    radial-gradient(7270      ellipse at 30% 20%,7271      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7272      transparent 60%7273    );7274}72757276/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7277/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7278 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7279 * (replacing the vault from a backup file) and "hazard" for actions that7280 * are absolutely irreversible (Panic). Both use the same card scaffold so7281 * they read as a pair, but the colour family signals the severity at a7282 * glance — yellow for caution, red for don't.7283 */7284.peach-danger-card {7285  --danger-tint: 235, 158, 52; /* amber */7286  display: flex;7287  flex-direction: column;7288  gap: 8px;7289  padding: 14px;7290  margin-top: 10px;7291  border-radius: 12px;7292  border: 1px solid rgba(var(--danger-tint), 0.32);7293  background:7294    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7295    rgba(var(--danger-tint), 0.04);7296  box-shadow:7297    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7298    0 0 24px rgba(var(--danger-tint), 0.04);7299  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7300}73017302.peach-danger-card:hover {7303  border-color: rgba(var(--danger-tint), 0.55);7304  box-shadow:7305    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7306    0 0 36px rgba(var(--danger-tint), 0.10);7307}73087309.peach-danger-card--hazard {7310  --danger-tint: 220, 38, 38; /* red */7311}73127313.peach-danger-card-head {7314  display: flex;7315  align-items: center;7316  gap: 10px;7317}73187319.peach-danger-card-glyph {7320  width: 28px;7321  height: 28px;7322  flex-shrink: 0;7323  display: flex;7324  align-items: center;7325  justify-content: center;7326  border-radius: 8px;7327  background: rgba(var(--danger-tint), 0.12);7328  color: rgba(var(--danger-tint), 0.95);7329  font-size: 1rem;7330  line-height: 1;7331}73327333.peach-danger-card-title {7334  margin: 0;7335  font-size: 0.8125rem;7336  font-weight: 600;7337  color: rgba(var(--danger-tint), 0.92);7338  letter-spacing: 0.01em;7339}73407341.peach-danger-card-copy {7342  margin: 0;7343  font-size: 0.6875rem;7344  line-height: 1.5;7345  color: var(--peach-t2);7346}73477348.peach-danger-card-button {7349  width: 100%;7350  padding: 9px;7351  margin-top: 4px;7352  background: transparent;7353  border: 1px solid rgba(var(--danger-tint), 0.45);7354  border-radius: 8px;7355  color: rgba(var(--danger-tint), 0.9);7356  font-size: 0.75rem;7357  font-weight: 500;7358  letter-spacing: 0.02em;7359  cursor: pointer;7360  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7361}73627363.peach-danger-card-button:hover {7364  background: rgba(var(--danger-tint), 0.10);7365  border-color: rgba(var(--danger-tint), 0.75);7366  color: rgb(var(--danger-tint));7367}73687369/* ── Panic flow (three-step destruction) ───────────────────────────────── */7370.peach-panic {7371  display: flex;7372  flex-direction: column;7373  flex: 1;7374  min-height: 0;7375  padding: 28px 20px 20px;7376  gap: 18px;7377  overflow-y: auto;7378  scrollbar-width: none;7379  -ms-overflow-style: none;7380}73817382.peach-panic::-webkit-scrollbar { display: none; }73837384.peach-panic-step2 {7385  background: rgba(220, 38, 38, 0.04);7386}73877388.peach-panic-step3 {7389  position: relative;7390  background: #0f0505;7391  color: #ffffff;7392  overflow: hidden;7393}73947395.peach-panic-rune-bg {7396  position: absolute;7397  inset: 0;7398  opacity: 0.22;7399  pointer-events: none;7400  overflow: hidden;7401}74027403.peach-panic-rune-bg canvas {7404  width: 100% !important;7405  height: 100% !important;7406}74077408.peach-panic-icon {7409  font-size: 32px;7410  color: rgb(220, 38, 38);7411  line-height: 1;7412}74137414.peach-panic-title {7415  margin: 0;7416  font-size: 18px;7417  font-weight: 500;7418  color: var(--peach-t1);7419}74207421.peach-panic-title--severe {7422  font-size: 20px;7423  font-weight: 700;7424  color: rgb(220, 38, 38);7425}74267427.peach-panic-body {7428  margin: 0;7429  font-size: 0.8125rem;7430  line-height: 1.55;7431  color: var(--peach-t2);7432}74337434.peach-panic-body--severe {7435  color: rgba(220, 38, 38, 0.85);7436}74377438.peach-panic-body--final {7439  font-size: 1rem;7440  font-weight: 700;7441  color: rgb(255, 80, 80);7442  line-height: 1.4;7443}74447445.peach-panic-body--final-intro {7446  font-size: 1rem;7447  color: #ffffff;7448  font-weight: 400;7449}74507451.peach-panic-divider {7452  height: 1px;7453  background: rgba(255, 255, 255, 0.08);7454  margin: 4px 0;7455}74567457.peach-panic-confirm-input {7458  width: 100%;7459  padding: 10px 12px;7460  background: rgba(255, 255, 255, 0.02);7461  border: 1px solid rgba(220, 38, 38, 0.4);7462  border-radius: 8px;7463  color: var(--peach-t1);7464  font-family: "IBM Plex Mono", monospace;7465  font-size: 0.875rem;7466  letter-spacing: 0.12em;7467  text-transform: uppercase;7468}74697470.peach-panic-confirm-input:focus {7471  outline: none;7472  border-color: rgb(220, 38, 38);7473}74747475.peach-panic-confirm-input--match {7476  border-color: rgb(220, 38, 38);7477  color: rgb(220, 38, 38);7478}74797480.peach-panic-confirm-label {7481  font-size: 0.6875rem;7482  color: var(--peach-t2);7483  margin: 0 0 -8px;7484  letter-spacing: 0.06em;7485}74867487.peach-panic-actions {7488  display: flex;7489  flex-direction: column;7490  gap: 10px;7491  margin-top: auto;7492}74937494.peach-panic-button {7495  width: 100%;7496  padding: 12px;7497  border-radius: 8px;7498  font-size: 0.8125rem;7499  cursor: pointer;7500  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7501}75027503.peach-panic-button--primary {7504  background: var(--peach-accent);7505  border: 1px solid var(--peach-accent);7506  color: #ffffff;7507  font-weight: 600;7508}75097510.peach-panic-button--primary:hover {7511  background: color-mix(in srgb, var(--peach-accent) 88%, white);7512}75137514.peach-panic-button--danger {7515  background: rgb(220, 38, 38);7516  border: 1px solid rgb(220, 38, 38);7517  color: #ffffff;7518  font-weight: 600;7519}75207521.peach-panic-button--danger:disabled {7522  opacity: 0.35;7523  cursor: not-allowed;7524}75257526.peach-panic-button--ghost {7527  background: transparent;7528  border: 1px solid rgba(255, 255, 255, 0.18);7529  color: var(--peach-t2);7530}75317532.peach-panic-button--ghost:hover {7533  border-color: rgba(255, 255, 255, 0.32);7534  color: var(--peach-t1);7535}75367537.peach-panic-link {7538  background: transparent;7539  border: none;7540  padding: 4px 0;7541  color: rgba(220, 38, 38, 0.65);7542  font-size: 0.75rem;7543  cursor: pointer;7544  text-align: left;7545  text-decoration: underline;7546  text-underline-offset: 3px;7547}75487549.peach-panic-link:hover {7550  color: rgb(220, 38, 38);7551}75527553.peach-panic-bar {7554  background: rgb(220, 38, 38);7555  padding: 16px 20px;7556  margin: -28px -20px 0;7557  text-align: center;7558  font-size: 0.8125rem;7559  font-weight: 700;7560  letter-spacing: 0.12em;7561  color: #ffffff;7562}75637564.peach-panic-final-button {7565  width: 100%;7566  padding: 14px;7567  background: rgb(220, 38, 38);7568  border: none;7569  border-radius: 8px;7570  color: #ffffff;7571  font-size: 0.875rem;7572  font-weight: 700;7573  letter-spacing: 0.08em;7574  text-transform: uppercase;7575  cursor: pointer;7576  animation: peach-panic-pulse 2s ease-in-out infinite;7577}75787579.peach-settings-license {7580  margin-top: 10px;7581  padding-top: 10px;7582  border-top: 1px solid var(--peach-t3);7583}75847585.peach-settings-label {7586  font-size: 0.625rem;7587  letter-spacing: 0.08em;7588  color: var(--peach-t3);7589  display: block;7590  margin-bottom: 6px;7591}75927593.peach-settings-license-row {7594  display: flex;7595  align-items: center;7596  justify-content: space-between;7597  gap: 8px;7598}75997600.peach-settings-license-key {7601  font-family: 'IBM Plex Mono', monospace;7602  font-size: 0.75rem;7603  color: var(--peach-t0);7604  letter-spacing: 0.04em;7605  word-break: break-all;7606  flex: 1;7607  min-width: 0;7608}76097610.peach-settings-license-key--masked {7611  font-family: 'IBM Plex Mono', monospace;7612  font-size: 0.6rem;7613  color: var(--peach-t1);7614  letter-spacing: 0.18em;7615  user-select: none;7616}76177618.peach-settings-license-actions {7619  display: flex;7620  align-items: center;7621  gap: 2px;7622  flex-shrink: 0;7623}76247625.peach-settings-license-copy {7626  font-size: 0.6875rem;7627  color: var(--peach-accent);7628  background: transparent;7629  border: none;7630  cursor: pointer;7631  padding: 4px 8px;7632  border-radius: 4px;7633  flex-shrink: 0;7634  transition: opacity 150ms ease;7635}76367637.peach-settings-license-copy:hover {7638  opacity: 0.75;7639}76407641.peach-settings-license-toggle {7642  display: flex;7643  align-items: center;7644  justify-content: center;7645  background: transparent;7646  border: none;7647  cursor: pointer;7648  padding: 4px 6px;7649  border-radius: 4px;7650  color: var(--peach-t2);7651  transition: color 150ms ease;7652}76537654.peach-settings-license-toggle:hover {7655  color: var(--peach-t1);7656}76577658@keyframes peach-panic-pulse {7659  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7660  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7661}76627663[data-motion="reduce"] .peach-panic-final-button {7664  animation: none;7665}76667667/* Vault History — Settings → Vault sub-view */76687669.peach-history-list {7670  border: 1px solid var(--peach-border);7671  border-radius: 8px;7672  overflow: hidden;7673  margin: 8px 0 4px;7674}76757676.peach-history-row {7677  display: flex;7678  align-items: center;7679  justify-content: space-between;7680  padding: 9px 12px;7681  gap: 10px;7682  border-bottom: 1px solid var(--peach-border);7683}76847685.peach-history-row:last-child {7686  border-bottom: none;7687}76887689.peach-history-meta {7690  display: flex;7691  flex-direction: column;7692  gap: 2px;7693  min-width: 0;7694  flex: 1;7695}76967697.peach-history-time {7698  font-size: 0.75rem;7699  font-family: 'IBM Plex Mono', ui-monospace, monospace;7700  color: var(--peach-t0);7701  white-space: nowrap;7702  overflow: hidden;7703  text-overflow: ellipsis;7704}77057706.peach-history-sub {7707  font-size: 0.625rem;7708  color: var(--peach-t2);7709  letter-spacing: 0.06em;7710  text-transform: uppercase;7711  white-space: nowrap;7712  overflow: hidden;7713  text-overflow: ellipsis;7714}77157716.peach-history-btn {7717  flex-shrink: 0;7718  white-space: nowrap;7719  min-width: 56px;7720  text-align: center;7721}77227723.peach-history-btn.is-busy {7724  opacity: 0.65;7725}77267727.peach-history-footer {7728  font-size: 0.625rem;7729  color: var(--peach-t3);7730  letter-spacing: 0.05em;7731  text-align: right;7732  margin: 0;7733  padding: 2px 0 0;7734}77357736/* ── Context menu + swipe-copy flash ─────────────────────── */7737.peach-context-menu-backdrop {7738  position: fixed;7739  inset: 0;7740  background: rgba(0, 0, 0, 0.45);7741  z-index: 100;7742  display: flex;7743  align-items: flex-end;7744  justify-content: center;7745  animation: peach-ctx-fade 140ms ease both;7746}7747.peach-context-menu {7748  width: min(360px, calc(100vw - 24px));7749  margin-bottom: max(env(safe-area-inset-bottom), 12px);7750  background: var(--peach-bg);7751  border: 1px solid var(--peach-t3);7752  border-radius: 14px;7753  padding: 6px;7754  display: flex;7755  flex-direction: column;7756  gap: 2px;7757  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7758  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7759}7760@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7761@keyframes peach-ctx-rise {7762  from { transform: translateY(16px); opacity: 0; }7763  to   { transform: translateY(0);    opacity: 1; }7764}7765.peach-context-menu-item {7766  background: transparent;7767  color: var(--peach-t0);7768  border: 0;7769  border-radius: 10px;7770  padding: 12px 14px;7771  text-align: left;7772  font: inherit;7773  cursor: pointer;7774}7775.peach-context-menu-item:hover,7776.peach-context-menu-item:focus-visible {7777  background: var(--peach-t3);7778}7779.peach-context-menu-item--danger {7780  color: var(--peach-health-bad, #d96868);7781}7782.peach-context-menu-item--cancel {7783  color: var(--peach-t2);7784  margin-top: 4px;7785  border-top: 1px solid var(--peach-t3);7786  border-radius: 0 0 10px 10px;7787}77887789/* Swipe-to-copy flash */7790.peach-entry-row.is-copy-flash {7791  animation: peach-copy-flash 600ms ease both;7792}7793@keyframes peach-copy-flash {7794  0%   { background: transparent; }7795  20%  { background: rgba(217, 153, 51, 0.32); }7796  100% { background: transparent; }7797}77987799html { font-size: 16px; }78007801/* ── Recovery word entry ─────────────────────────────────────────── */7802.peach-lock-recover-link {7803  display: block;7804  width: 100%;7805  margin-top: 12px;7806  background: none;7807  border: none;7808  font-family: "IBM Plex Mono", monospace;7809  font-size: 0.625rem;7810  letter-spacing: 0.06em;7811  color: var(--peach-t2);7812  cursor: pointer;7813  text-align: center;7814  padding: 4px;7815  transition: color 120ms ease;7816}7817.peach-lock-recover-link:hover {7818  color: var(--peach-t0);7819}78207821.lock-screen--recovery {7822  display: flex;7823  flex-direction: column;7824  align-items: stretch;7825  padding: 12px 20px 24px;7826  overflow: hidden;7827}78287829.peach-recovery-nav {7830  display: flex;7831  align-items: center;7832  position: relative;7833  z-index: 1;7834  margin-bottom: 4px;7835}78367837/* Mask runes to the top decorative band only — keep inputs and the7838   bottom CTA button clear. The bottom of the popup is reserved for7839   submit buttons; rendering runes there overlaps the button glyph. */7840.peach-rune-background--recovery {7841  -webkit-mask-image: linear-gradient(7842    to bottom,7843    black 0px, black 85px,7844    transparent 110px,7845    transparent 100%7846  );7847  mask-image: linear-gradient(7848    to bottom,7849    black 0px, black 85px,7850    transparent 110px,7851    transparent 100%7852  );7853}78547855.peach-recovery-header {7856  text-align: center;7857  margin-bottom: 16px;7858  margin-top: 4px;7859}7860.peach-recovery-header .peach-onboarding-headline {7861  font-size: 1.25rem;7862  font-weight: 300;7863  letter-spacing: 0.02em;7864  margin: 0 0 4px;7865}7866.peach-recovery-header .peach-hint {7867  font-family: "IBM Plex Mono", monospace;7868  font-size: 0.625rem;7869  color: var(--peach-t2);7870  letter-spacing: 0.04em;7871  margin: 0;7872}78737874/* 12-word grid: 2 columns × 6 rows */7875.peach-recovery-grid {7876  display: grid;7877  grid-template-columns: repeat(2, 1fr);7878  gap: 12px 20px;7879  width: 100%;7880  margin-bottom: 0;7881}78827883.peach-recovery-word-slot {7884  display: flex;7885  align-items: center;7886  gap: 6px;7887  min-width: 0;7888}78897890.peach-recovery-word-index {7891  font-family: "IBM Plex Mono", monospace;7892  font-size: 0.5rem;7893  color: rgba(255, 255, 255, 0.35);7894  min-width: 14px;7895  flex-shrink: 0;7896  text-align: right;7897  letter-spacing: 0.04em;7898}78997900.peach-recovery-word-input {7901  flex: 1;7902  min-width: 0;7903  background: transparent;7904  border: none;7905  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7906  color: var(--peach-t0);7907  font-family: "IBM Plex Mono", monospace;7908  font-size: 0.6875rem;7909  letter-spacing: 0.06em;7910  padding: 5px 2px 4px;7911  outline: none;7912  text-transform: lowercase;7913  transition: border-color 120ms ease;7914}7915.peach-recovery-word-input::placeholder {7916  color: rgba(255, 255, 255, 0.18);7917}7918.peach-recovery-word-input:focus {7919  border-bottom-color: var(--peach-accent);7920}79217922.peach-recovery-submit {7923  width: 100%;7924  margin-top: auto;7925}79267927.peach-recovery-new-password-form {7928  width: 100%;7929  display: flex;7930  flex-direction: column;7931  gap: 16px;7932  margin-bottom: 8px;7933}7934.peach-recovery-new-password-form .peach-newvault-field {7935  display: flex;7936  flex-direction: column;7937  gap: 4px;7938}79397940/* ── Recovery words display (post-create) ────────────────────────── */7941.lock-screen--recovery-display {7942  display: flex;7943  flex-direction: column;7944  align-items: stretch;7945  padding: 0 20px 20px;7946  min-height: 0;7947  overflow-y: auto;7948}79497950.peach-recovery-words-display {7951  width: 100%;7952  margin-bottom: 16px;7953  border: 1px solid var(--peach-t3);7954  border-radius: 8px;7955  padding: 12px 14px;7956  background: rgba(245, 240, 234, 0.04);7957}79587959.peach-recovery-words-label {7960  font-family: "IBM Plex Mono", monospace;7961  font-size: 0.5rem;7962  letter-spacing: 0.08em;7963  color: var(--peach-t2);7964  text-transform: uppercase;7965  margin-bottom: 10px;7966}79677968.peach-recovery-word-list {7969  list-style: none;7970  margin: 0;7971  padding: 0;7972  display: grid;7973  grid-template-columns: repeat(2, 1fr);7974  gap: 6px 16px;7975}79767977.peach-recovery-word-item {7978  display: flex;7979  align-items: baseline;7980  gap: 5px;7981}79827983.peach-recovery-word-num {7984  font-family: "IBM Plex Mono", monospace;7985  font-size: 0.5rem;7986  color: var(--peach-t2);7987  width: 14px;7988  flex: 0 0 14px;7989  text-align: right;7990  letter-spacing: 0.04em;7991  font-variant-numeric: tabular-nums;7992}79937994.peach-recovery-download-btn {7995  display: block;7996  margin: 10px auto 0;7997  padding: 4px 10px;7998  background: transparent;7999  border: 1px solid var(--peach-border);8000  border-radius: 6px;8001  color: var(--peach-t2);8002  font-family: "IBM Plex Mono", monospace;8003  font-size: 0.5625rem;8004  letter-spacing: 0.06em;8005  text-transform: lowercase;8006  cursor: pointer;8007  transition: border-color 0.15s, color 0.15s;8008}80098010.peach-recovery-download-btn:hover {8011  border-color: var(--peach-accent);8012  color: var(--peach-t0);8013}80148015.peach-recovery-word-text {8016  font-family: "IBM Plex Mono", monospace;8017  font-size: 0.6875rem;8018  letter-spacing: 0.06em;8019  color: var(--peach-t0);8020  text-transform: lowercase;8021}80228023.peach-hint--warning {8024  color: var(--peach-accent);8025  font-style: italic;8026}8027.peach-hint--success {8028  color: var(--peach-t2);8029  font-family: "IBM Plex Mono", monospace;8030  font-size: 0.625rem;8031  letter-spacing: 0.06em;8032}80338034/* Confirmation step */8035.peach-recovery-confirm {8036  width: 100%;8037  flex: 1;8038  display: flex;8039  flex-direction: column;8040}8041.peach-recovery-confirm-label {8042  font-family: "IBM Plex Mono", monospace;8043  font-size: 0.5625rem;8044  letter-spacing: 0.04em;8045  color: var(--peach-t2);8046  text-align: center;8047  margin: 0 0 12px;8048}8049.peach-recovery-confirm-fields {8050  display: flex;8051  flex-direction: column;8052  gap: 14px;8053  margin-bottom: 10px;8054}8055.peach-recovery-confirm-field {8056  display: flex;8057  align-items: center;8058  gap: 8px;8059}8060.peach-recovery-confirm-num {8061  font-family: "IBM Plex Mono", monospace;8062  font-size: 0.5rem;8063  color: var(--peach-t2);8064  min-width: 44px;8065  letter-spacing: 0.04em;8066}8067.peach-recovery-confirm-input {8068  flex: 1;8069  background: transparent;8070  border: none;8071  border-bottom: 1px solid var(--peach-t3);8072  color: var(--peach-t0);8073  font-family: "IBM Plex Mono", monospace;8074  font-size: 0.6875rem;8075  letter-spacing: 0.06em;8076  padding: 4px 2px 3px;8077  outline: none;8078  text-transform: lowercase;8079  transition: border-color 120ms ease;8080}8081.peach-recovery-confirm-input:focus {8082  border-bottom-color: var(--peach-accent);8083}8084.peach-recovery-confirm-input:disabled {8085  opacity: 0.4;8086  cursor: not-allowed;8087}8088.peach-recovery-confirm-btn {8089  width: 100%;8090  margin-top: auto;8091}80928093/* ============================================================8094   Sync info sheet8095   ============================================================ */80968097.peach-sync-info-backdrop {8098  position: fixed;8099  inset: 0;8100  z-index: 200;8101  background: rgba(0, 0, 0, 0.55);8102  display: flex;8103  align-items: flex-end;8104  animation: peach-fade-in 200ms ease forwards;8105}81068107@keyframes peach-fade-in {8108  from { opacity: 0; }8109  to   { opacity: 1; }8110}81118112.peach-sync-info-sheet {8113  width: 100%;8114  background: var(--peach-bg-card, var(--peach-bg));8115  border-top-left-radius: 20px;8116  border-top-right-radius: 20px;8117  padding: 12px 24px 32px;8118  display: flex;8119  flex-direction: column;8120  gap: 20px;8121  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;8122}81238124@keyframes peach-sheet-up {8125  from { transform: translateY(100%); }8126  to   { transform: translateY(0); }8127}81288129.peach-sync-info-handle {8130  width: 36px;8131  height: 4px;8132  border-radius: 2px;8133  background: var(--peach-border);8134  margin: 0 auto 4px;8135  flex-shrink: 0;8136}81378138.peach-sync-info-title {8139  font-family: 'Cormorant Garamond', serif;8140  font-style: italic;8141  font-size: 26px;8142  font-weight: 600;8143  color: var(--peach-t0);8144  margin: 0;8145  line-height: 1.2;8146}81478148.peach-sync-info-body {8149  display: flex;8150  flex-direction: column;8151  gap: 14px;8152}81538154.peach-sync-info-point {8155  display: flex;8156  gap: 12px;8157  align-items: flex-start;8158  font-size: 14px;8159  color: var(--peach-t2);8160  line-height: 1.6;8161  margin: 0;8162}81638164.peach-sync-info-icon {8165  color: var(--peach-accent);8166  font-size: 16px;8167  flex-shrink: 0;8168  margin-top: 1px;8169}81708171.peach-sync-info-actions {8172  display: flex;8173  flex-direction: column;8174  gap: 12px;8175  margin-top: 4px;8176}81778178.peach-sync-info-pro-link {8179  background: none;8180  border: none;8181  font-size: 13px;8182  color: var(--peach-t3);8183  cursor: pointer;8184  padding: 0;8185  font-family: inherit;8186  text-align: center;8187  transition: color 150ms ease;8188}81898190.peach-sync-info-pro-link:hover {8191  color: var(--peach-accent);8192}81938194.peach-btn--full {8195  width: 100%;8196}81978198/* ── Sync screen ── */81998200.peach-sync-coming-soon {8201  display: flex;8202  align-items: flex-start;8203  gap: 10px;8204  padding: 12px 14px;8205  background: var(--peach-s1);8206  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8207  border-radius: 10px;8208}8209.peach-sync-coming-soon__icon {8210  flex-shrink: 0;8211  color: var(--peach-accent);8212  margin-top: 1px;8213  line-height: 0;8214}8215.peach-sync-coming-soon__title {8216  font-family: 'Cormorant Garamond', serif;8217  font-weight: 500;8218  font-size: 13px;8219  color: var(--peach-accent);8220  margin: 0 0 5px;8221  line-height: 1.3;8222}8223.peach-sync-coming-soon__body {8224  font-size: 12px;8225  color: var(--peach-t1);8226  line-height: 1.55;8227  margin: 0;8228}82298230.peach-sync-screen {8231  display: flex;8232  flex-direction: column;8233  height: 100%;8234}82358236.peach-sync-content {8237  flex: 1;8238  overflow-y: auto;8239  padding: 24px 20px 40px;8240  display: flex;8241  flex-direction: column;8242  gap: 24px;8243}82448245/* Intro (State A) */8246.peach-sync-headline {8247  font-family: 'Cormorant Garamond', serif;8248  font-style: italic;8249  font-size: 28px;8250  font-weight: 600;8251  color: var(--peach-t0);8252  margin: 0 0 10px;8253  line-height: 1.2;8254}82558256.peach-sync-intro-body {8257  font-size: 14px;8258  color: var(--peach-t1);8259  line-height: 1.6;8260  margin: 0;8261}82628263.peach-sync-pro-note {8264  display: flex;8265  flex-direction: column;8266  gap: 8px;8267  background: var(--peach-t3);8268  border-radius: 10px;8269  padding: 12px 14px;8270}82718272.peach-sync-pro-note-text {8273  font-size: 12px;8274  color: var(--peach-t2);8275  line-height: 1.5;8276  margin: 0;8277}82788279.peach-sync-pro-link {8280  background: none;8281  border: none;8282  font-size: 12px;8283  color: var(--peach-accent);8284  cursor: pointer;8285  padding: 0;8286  font-family: inherit;8287  text-align: left;8288}82898290/* Status (State C) */8291.peach-sync-status {8292  padding: 12px 0;8293  border-bottom: 1px solid var(--peach-border);8294}82958296.peach-sync-status-row {8297  display: flex;8298  align-items: center;8299  gap: 8px;8300}83018302.peach-sync-dot {8303  width: 7px;8304  height: 7px;8305  border-radius: 50%;8306  flex-shrink: 0;8307}83088309.peach-sync-dot--green { background: var(--peach-health-ok); }8310.peach-sync-dot--amber { background: var(--peach-accent); }83118312.peach-sync-status-text {8313  font-family: 'IBM Plex Mono', monospace;8314  font-size: 11px;8315  color: var(--peach-t2);8316}83178318/* Paired devices */8319.peach-sync-section {8320  display: flex;8321  flex-direction: column;8322  gap: 2px;8323}83248325.peach-sync-section-label {8326  font-family: 'IBM Plex Mono', monospace;8327  font-size: 10px;8328  letter-spacing: 0.1em;8329  color: var(--peach-t3);8330  margin: 0 0 10px;8331}83328333.peach-sync-device-row {8334  display: flex;8335  justify-content: space-between;8336  align-items: baseline;8337  padding: 10px 0;8338  border-bottom: 1px solid var(--peach-border);8339  gap: 12px;8340}83418342.peach-sync-device-name {8343  font-size: 14px;8344  color: var(--peach-t1);8345}83468347.peach-sync-device-meta {8348  font-family: 'IBM Plex Mono', monospace;8349  font-size: 11px;8350  color: var(--peach-t3);8351  white-space: nowrap;8352}83538354.peach-sync-hub-note {8355  padding: 14px 16px;8356  border: 1px solid var(--peach-border);8357  border-radius: 10px;8358  display: flex;8359  flex-direction: column;8360  gap: 6px;8361  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8362}83638364.peach-sync-hub-note-title {8365  font-size: 13px;8366  font-weight: 600;8367  color: var(--peach-t0);8368  margin: 0;8369}83708371.peach-sync-hub-note-body {8372  font-size: 12px;8373  color: var(--peach-t2);8374  line-height: 1.6;8375  margin: 0;8376}83778378/* Action buttons */8379.peach-sync-actions {8380  display: flex;8381  gap: 10px;8382  flex-wrap: wrap;8383}83848385/* Upgrade prompt (State B) */8386.peach-sync-upgrade {8387  display: flex;8388  flex-direction: column;8389  gap: 12px;8390  padding: 16px;8391  border: 1px solid var(--peach-border);8392  border-radius: 10px;8393}83948395.peach-sync-upgrade-text {8396  font-size: 13px;8397  color: var(--peach-t2);8398  line-height: 1.6;8399  margin: 0;8400}84018402/* Network note */8403.peach-sync-network-note {8404  font-size: 12px;8405  color: var(--peach-t3);8406  line-height: 1.6;8407  margin: 0;8408}84098410/* Advanced */8411.peach-sync-advanced {8412  margin-top: auto;8413  padding-top: 16px;8414  border-top: 1px solid var(--peach-border);8415}84168417.peach-sync-advanced-toggle {8418  display: flex;8419  align-items: center;8420  gap: 8px;8421  background: none;8422  border: none;8423  font-family: 'IBM Plex Mono', monospace;8424  font-size: 11px;8425  letter-spacing: 0.08em;8426  color: var(--peach-t3);8427  cursor: pointer;8428  padding: 0;8429  text-transform: uppercase;8430}84318432.peach-sync-advanced-chevron {8433  display: inline-block;8434  transition: transform 200ms ease;8435  font-size: 10px;8436}84378438.peach-sync-advanced-chevron.is-open {8439  transform: rotate(90deg);8440}84418442.peach-sync-advanced-content {8443  margin-top: 14px;8444}84458446.peach-sync-advanced-row {8447  display: flex;8448  justify-content: space-between;8449  align-items: center;8450  gap: 16px;8451}84528453.peach-sync-advanced-title {8454  font-size: 14px;8455  color: var(--peach-t1);8456  margin: 0 0 2px;8457}84588459.peach-sync-advanced-subtitle {8460  font-size: 12px;8461  color: var(--peach-t3);8462  margin: 0;8463  line-height: 1.5;8464}84658466/* ── Add Device — Android scan tabs ─────────────────────────────────────── */84678468.peach-pairing-tabs {8469  display: flex;8470  border: 1px solid var(--peach-border);8471  border-radius: 8px;8472  overflow: hidden;8473  margin-bottom: 4px;8474}84758476.peach-pairing-tab {8477  flex: 1;8478  padding: 10px 0;8479  background: none;8480  border: none;8481  font-family: 'IBM Plex Mono', monospace;8482  font-size: 11px;8483  letter-spacing: 0.06em;8484  color: var(--peach-t2);8485  cursor: pointer;8486  transition: background 150ms, color 150ms;8487}84888489.peach-pairing-tab.is-active {8490  background: var(--peach-accent);8491  color: #fff;8492  font-weight: 600;8493}84948495.peach-pairing-tab:not(.is-active):active {8496  background: var(--peach-border);8497}84988499/* Camera view */8500.peach-pairing-camera-container {8501  position: relative;8502  width: 100%;8503  aspect-ratio: 1;8504  border-radius: 12px;8505  overflow: hidden;8506  background: #000;8507  flex-shrink: 0;8508}85098510.peach-pairing-video {8511  width: 100%;8512  height: 100%;8513  object-fit: cover;8514}85158516.peach-pairing-scan-frame {8517  position: absolute;8518  top: 50%;8519  left: 50%;8520  transform: translate(-50%, -50%);8521  width: 60%;8522  aspect-ratio: 1;8523  border: 2px solid var(--peach-accent);8524  border-radius: 8px;8525  pointer-events: none;8526}85278528/* ── Notes Mode ── */85298530/* Overlay that crossfades over the vault */8531.peach-notes-overlay {8532  position: fixed;8533  inset: 0;8534  z-index: 90;8535  opacity: 0;8536  pointer-events: none;8537  animation: peach-mode-in 220ms ease-in forwards;8538}85398540.peach-notes-overlay.is-visible {8541  opacity: 1;8542  pointer-events: auto;8543}85448545@keyframes peach-mode-in {8546  from { opacity: 0; }8547  to   { opacity: 1; }8548}85498550/* Top-level notes surface */8551.peach-notes-mode {8552  position: absolute;8553  inset: 0;8554  background: var(--peach-bg);8555  display: flex;8556  flex-direction: column;8557}85588559/* Rune canvas positioned behind content */8560.peach-note-rune-canvas {8561  position: absolute;8562  inset: 0;8563  width: 100%;8564  height: 100%;8565  pointer-events: none;8566  z-index: 0;8567}85688569/* TOC wrapper */8570.peach-notes-toc-wrapper {8571  position: absolute;8572  inset: 0;8573  z-index: 1;8574  opacity: 1;8575  pointer-events: auto;8576  transition: opacity 200ms ease;8577}85788579.peach-notes-toc-wrapper.is-hidden {8580  opacity: 0;8581  pointer-events: none;8582}85838584/* Editor wrapper */8585.peach-notes-editor-wrapper {8586  position: absolute;8587  inset: 0;8588  z-index: 2;8589  opacity: 0;8590  pointer-events: none;8591  transition: opacity 200ms ease;8592}85938594.peach-notes-editor-wrapper.is-visible {8595  opacity: 1;8596  pointer-events: auto;8597}85988599/* TOC inner */8600.peach-notes-toc {8601  position: relative;8602  display: flex;8603  flex-direction: column;8604  height: 100%;8605  padding-top: env(safe-area-inset-top, 0px);8606  padding-bottom: env(safe-area-inset-bottom, 0px);8607}86088609/* Shared header */8610.peach-notes-header {8611  display: flex;8612  align-items: center;8613  padding: 12px 16px;8614  gap: 12px;8615  flex-shrink: 0;8616  min-height: 52px;8617  position: relative;8618  z-index: 2;8619}86208621.peach-notes-back {8622  font-size: 22px;8623  color: var(--peach-t2);8624  background: none;8625  border: none;8626  padding: 4px;8627  cursor: pointer;8628  line-height: 1;8629  flex-shrink: 0;8630  transition: color 150ms ease;8631  -webkit-tap-highlight-color: transparent;8632}86338634.peach-notes-back:active { color: var(--peach-t0); }86358636.peach-notes-header-title {8637  flex: 1;8638  font-family: 'Cormorant Garamond', serif;8639  font-style: italic;8640  font-size: 22px;8641  color: var(--peach-t0);8642  text-align: center;8643}86448645.peach-notes-header-title.is-breadcrumb {8646  font-family: 'IBM Plex Mono', monospace;8647  font-style: normal;8648  font-size: 11px;8649  color: var(--peach-t3);8650  letter-spacing: 0.08em;8651  text-transform: uppercase;8652  cursor: pointer;8653}86548655.peach-notes-header-actions {8656  display: flex;8657  gap: 8px;8658  flex-shrink: 0;8659}86608661.peach-notes-header-btn {8662  width: 36px;8663  height: 36px;8664  display: flex;8665  align-items: center;8666  justify-content: center;8667  background: none;8668  border: none;8669  color: var(--peach-t2);8670  cursor: pointer;8671  border-radius: 8px;8672  font-size: 16px;8673  transition: color 150ms ease, background 150ms ease;8674  -webkit-tap-highlight-color: transparent;8675}86768677.peach-notes-header-btn:active {8678  background: rgba(255,255,255,0.06);8679  color: var(--peach-t0);8680}86818682/* Inline search bar */8683.peach-notes-search-input {8684  flex: 1;8685  background: none;8686  border: none;8687  outline: none;8688  font-family: 'IBM Plex Mono', monospace;8689  font-size: 13px;8690  color: var(--peach-t0);8691  padding: 4px 0;8692  letter-spacing: 0.02em;8693}86948695.peach-notes-search-input::placeholder {8696  color: var(--peach-t3);8697}86988699/* TOC list */8700.peach-notes-list-container {8701  flex: 1;8702  overflow-y: auto;8703  overflow-x: hidden;8704  scrollbar-width: none;8705  -webkit-overflow-scrolling: touch;8706  overscroll-behavior: contain;8707  position: relative;8708  z-index: 1;8709}87108711.peach-notes-list-container::-webkit-scrollbar { display: none; }87128713/* Note row */8714.peach-note-row {8715  position: relative;8716  display: grid;8717  grid-template-columns: 44px 8px 1fr 8px auto;8718  align-items: center;8719  min-height: 72px;8720  padding: 16px 20px;8721  border-bottom: 0.5px solid var(--peach-border);8722  cursor: pointer;8723  overflow: hidden;8724  touch-action: pan-y;8725  user-select: none;8726  -webkit-user-select: none;8727  -webkit-tap-highlight-color: transparent;8728}87298730.peach-note-row:first-child {8731  border-top: 0.5px solid var(--peach-border);8732}87338734.peach-note-row:active {8735  background: rgba(255,255,255,0.02);8736}87378738.peach-note-numeral {8739  font-family: 'Cormorant Garamond', serif;8740  font-style: italic;8741  font-size: 15px;8742  color: var(--peach-accent);8743  text-align: right;8744  line-height: 1;8745  flex-shrink: 0;8746}87478748.peach-note-title-gap { /* grid spacer */ }87498750.peach-note-title {8751  font-family: 'Cormorant Garamond', serif;8752  font-style: italic;8753  font-size: 18px;8754  color: var(--peach-t0);8755  line-height: 1.3;8756  min-width: 0;8757  overflow-wrap: break-word;8758}87598760.peach-note-title-match {8761  color: var(--peach-accent);8762}87638764.peach-note-date {8765  font-family: 'IBM Plex Mono', monospace;8766  font-size: 11px;8767  color: var(--peach-t2);8768  white-space: nowrap;8769  text-align: right;8770  flex-shrink: 0;8771  grid-column: 5;8772}87738774/* Swipe underlays */8775.peach-note-row-underlay {8776  position: absolute;8777  inset: 0;8778  display: flex;8779  align-items: center;8780  padding: 0 24px;8781  font-family: 'IBM Plex Mono', monospace;8782  font-size: 11px;8783  letter-spacing: 0.1em;8784  pointer-events: none;8785  z-index: 0;8786}87878788.peach-note-row-underlay--delete {8789  background: #8B2020;8790  color: rgba(255,255,255,0.9);8791  justify-content: flex-end;8792}87938794.peach-note-row-underlay--archive {8795  background: var(--peach-accent);8796  color: #0C0A06;8797  justify-content: flex-start;8798}87998800/* Delete confirm strip */8801.peach-note-delete-confirm {8802  position: absolute;8803  inset: 0;8804  background: var(--peach-bg);8805  display: flex;8806  align-items: center;8807  gap: 12px;8808  padding: 0 20px;8809  font-family: 'IBM Plex Mono', monospace;8810  font-size: 11px;8811  color: var(--peach-t1);8812  letter-spacing: 0.04em;8813  animation: peach-delete-confirm-in 150ms ease both;8814  z-index: 10;8815}88168817@keyframes peach-delete-confirm-in {8818  from { opacity: 0; }8819  to   { opacity: 1; }8820}88218822.peach-note-delete-confirm-btn {8823  background: #8B2020;8824  color: rgba(255,255,255,0.9);8825  border: none;8826  border-radius: 6px;8827  padding: 4px 10px;8828  font-family: 'IBM Plex Mono', monospace;8829  font-size: 10px;8830  cursor: pointer;8831  letter-spacing: 0.06em;8832}88338834.peach-note-delete-cancel-btn {8835  background: none;8836  border: none;8837  color: var(--peach-t3);8838  font-family: 'IBM Plex Mono', monospace;8839  font-size: 10px;8840  cursor: pointer;8841  letter-spacing: 0.06em;8842  padding: 4px 6px;8843}88448845/* + New note button */8846.peach-notes-new-btn {8847  font-family: 'IBM Plex Mono', monospace;8848  font-size: 12px;8849  color: var(--peach-t3);8850  text-align: center;8851  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8852  background: none;8853  border: none;8854  width: 100%;8855  cursor: pointer;8856  letter-spacing: 0.04em;8857  transition: color 150ms ease;8858  -webkit-tap-highlight-color: transparent;8859}88608861.peach-notes-new-btn:active { color: var(--peach-accent); }88628863/* Empty state */8864.peach-notes-empty {8865  display: flex;8866  flex-direction: column;8867  align-items: center;8868  justify-content: center;8869  flex: 1;8870  padding: 48px 32px;8871  gap: 16px;8872}88738874.peach-notes-empty-text {8875  font-family: 'Cormorant Garamond', serif;8876  font-style: italic;8877  font-size: 20px;8878  color: var(--peach-t3);8879  text-align: center;8880  margin: 0;8881  line-height: 1.4;8882  white-space: pre-line;8883}88848885/* ── Editor surface ── */88868887.peach-note-editor-surface {8888  position: absolute;8889  inset: 0;8890  background: var(--peach-bg);8891  display: flex;8892  flex-direction: column;8893  padding-top: env(safe-area-inset-top, 0px);8894}88958896.peach-note-editor-scroll {8897  flex: 1;8898  overflow-y: auto;8899  overflow-x: hidden;8900  scrollbar-width: none;8901  -webkit-overflow-scrolling: touch;8902  padding: 0 24px 120px;8903  position: relative;8904  z-index: 1;8905}89068907.peach-note-editor-scroll::-webkit-scrollbar { display: none; }89088909/* Desktop toolbar (always visible above body) */8910.peach-note-toolbar-desktop-inline {8911  display: flex;8912  align-items: center;8913  gap: 2px;8914  padding: 6px 0 12px;8915  margin-bottom: 4px;8916  border-bottom: 0.5px solid var(--peach-border);8917}89188919/* Title field */8920.peach-note-title-field {8921  font-family: 'Cormorant Garamond', serif;8922  font-style: italic;8923  font-size: 32px;8924  font-weight: 600;8925  color: var(--peach-t0);8926  line-height: 1.2;8927  padding: 8px 0 0;8928  outline: none;8929  min-height: 44px;8930  word-break: break-word;8931  position: relative;8932  z-index: 1;8933}89348935.peach-note-title-field:empty::before {8936  content: attr(data-placeholder);8937  color: var(--peach-t3);8938  pointer-events: none;8939}89408941/* Hairline separator */8942.peach-note-hairline {8943  height: 0.5px;8944  background: var(--peach-border);8945  margin: 12px 0 20px;8946  position: relative;8947  z-index: 1;8948}89498950/* Body field */8951.peach-note-body-field {8952  font-family: 'DM Sans', sans-serif;8953  font-size: 16px;8954  color: var(--peach-t0);8955  line-height: 1.85;8956  padding: 0;8957  outline: none;8958  min-height: 240px;8959  word-break: break-word;8960  position: relative;8961  z-index: 1;8962}89638964.peach-note-body-field:empty::before {8965  content: attr(data-placeholder);8966  color: var(--peach-t3);8967  font-style: italic;8968  pointer-events: none;8969}89708971.peach-note-body-field h2 {8972  font-family: 'Cormorant Garamond', serif;8973  font-style: italic;8974  font-size: 22px;8975  font-weight: 600;8976  color: var(--peach-t0);8977  margin: 20px 0 8px;8978}89798980.peach-note-body-field blockquote {8981  border-left: 2px solid var(--peach-accent);8982  margin: 12px 0;8983  padding-left: 16px;8984  color: var(--peach-t1);8985  font-style: italic;8986}89878988.peach-note-body-field ul,8989.peach-note-body-field ol {8990  padding-left: 20px;8991  margin: 8px 0;8992}89938994.peach-note-body-field li {8995  margin: 4px 0;8996}89978998.peach-note-body-field hr {8999  border: none;9000  border-top: 0.5px solid var(--peach-border);9001  margin: 16px 0;9002}90039004/* Saved indicator */9005.peach-note-saved-indicator {9006  font-family: 'IBM Plex Mono', monospace;9007  font-size: 11px;9008  color: var(--peach-t3);9009  letter-spacing: 0.04em;9010  text-align: right;9011  padding: 6px 24px;9012  flex-shrink: 0;9013  transition: opacity 300ms ease;9014  pointer-events: none;9015  position: relative;9016  z-index: 1;9017}90189019/* Mobile keyboard toolbar */9020.peach-note-toolbar-mobile {9021  display: flex;9022  align-items: center;9023  padding: 8px 16px;9024  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));9025  background: var(--peach-bg);9026  border-top: 0.5px solid var(--peach-border);9027  gap: 4px;9028  flex-shrink: 0;9029  position: relative;9030  z-index: 10;9031}90329033.peach-note-toolbar-btn {9034  min-width: 36px;9035  height: 36px;9036  display: flex;9037  align-items: center;9038  justify-content: center;9039  background: none;9040  border: none;9041  border-radius: 8px;9042  cursor: pointer;9043  font-size: 14px;9044  color: var(--peach-t1);9045  font-family: 'DM Sans', sans-serif;9046  font-weight: 600;9047  transition: background 100ms ease, color 100ms ease;9048  -webkit-tap-highlight-color: transparent;9049}90509051.peach-note-toolbar-btn--italic { font-style: italic; }9052.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }9053.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }90549055.peach-note-toolbar-divider {9056  width: 0.5px;9057  height: 20px;9058  background: var(--peach-border);9059  margin: 0 4px;9060  flex-shrink: 0;9061}90629063.peach-note-toolbar-spacer { flex: 1; }90649065/* Desktop: larger headline in TOC */9066@media (min-width: 400px) {9067  .peach-notes-header-title:not(.is-breadcrumb) {9068    font-size: 32px;9069  }90709071  .peach-note-row {9072    min-height: 64px;9073    padding: 14px 16px;9074  }9075}90769077/* Flying title — shared element during expansion/collapse */90789079/* ─── Light theme overrides ───────────────────────────────────────────────9080   Tokens that cannot be expressed as variable substitutions — hardcoded9081   context-specific values that need separate light-mode rules. */90829083/* Settings section headers: use text-label (#79766F) per restoration brief —9084   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY9085   presence without fighting the light parchment background. */9086.light .peach-settings-sub-label,9087[data-theme="light"] .peach-settings-sub-label,9088.light .peach-settings-nav-label,9089[data-theme="light"] .peach-settings-nav-label {9090  color: #79766F;9091}90929093/* Secondary action buttons (ghost / subtle): filled with input-well surface9094   so they read as recessed against the parchment card background. */9095.light .peach-btn--ghost:not(.peach-icon-btn),9096[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {9097  background: #EEE7DD;9098  border-color: #DDD5CB;9099  color: #1A1208;9100}9101.light .peach-icon-btn,9102[data-theme="light"] .peach-icon-btn {9103  background: transparent;9104  border-color: transparent;9105}9106.light .peach-btn--subtle,9107[data-theme="light"] .peach-btn--subtle {9108  background: #EEE7DD;9109  border-color: #DDD5CB;9110}91119112/* Wide secondary action button on the lock screen — override the9113   hardcoded dark-mode rgba values with warm parchment equivalents. */9114.light .peach-lock-secondary,9115[data-theme="light"] .peach-lock-secondary {9116  background: #EEE7DD;9117  border-color: #DDD5CB;9118  color: #1A1208;9119}9120.light .peach-lock-secondary:hover,9121[data-theme="light"] .peach-lock-secondary:hover {9122  background: #F0E9DF;9123}91249125/* Entry row hover: bg-row lifts the row above the card surface. */9126.light .peach-entry-row:hover,9127[data-theme="light"] .peach-entry-row:hover {9128  background: #F2EBE1;9129}9130.light .peach-entry-row.is-active,9131[data-theme="light"] .peach-entry-row.is-active {9132  background: #F2EBE1;9133}9134.light .peach-entry-row.is-selected,9135[data-theme="light"] .peach-entry-row.is-selected {9136  background: #F5EDE2;9137}91389139/* ──────────────────────────────────────────────────────────────────────────9140   Chirp pairing flow — bird-stage animation (Phase 1)9141   See src/popup/components/ChirpPairingFlow.tsx and the brief §6.2.9142   Three-act animation gated on the [data-phase] attribute of9143   .peach-chirp-pair; child layers (birds, chirp arcs, flight wave, dot)9144   each react via either pose class or visibility flag.9145   Tokens: accent surfaces use var(--peach-accent); bird illustration9146   colours are baked into the SVG per the brand-peach exception in §3.1.9147   ────────────────────────────────────────────────────────────────────── */91489149.peach-chirp-pair {9150  position: absolute;9151  inset: 0;9152  z-index: 3;9153  display: flex;9154  flex-direction: column;9155  padding: 14px 12px 12px;9156  width: 100%;9157  box-sizing: border-box;9158  gap: 0;9159  background:9160    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9161    var(--peach-bg);9162  color: var(--peach-t0);9163  overflow-y: auto;9164  overflow-x: hidden;9165  scrollbar-width: none;9166  isolation: isolate;9167  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9168}9169@keyframes peach-chirp-overlay-in {9170  from { opacity: 0; transform: translateY(8px); }9171  to   { opacity: 1; transform: translateY(0); }9172}9173.peach-chirp-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }9174.peach-chirp-pair::before {9175  content: '';9176  position: absolute;9177  inset: 0;9178  border-radius: inherit;9179  pointer-events: none;9180  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9181  z-index: 0;9182}9183.peach-chirp-pair > * { position: relative; z-index: 1; }91849185/* Header --------------------------------------------------------------- */9186.peach-chirp-head {9187  display: flex; align-items: center; gap: 10px;9188}9189.peach-chirp-back {9190  width: 32px; height: 32px;9191  display: inline-flex; align-items: center; justify-content: center;9192  background: transparent;9193  border: none;9194  border-radius: 8px;9195  color: var(--peach-t1);9196  cursor: pointer;9197  transition: color 0.15s ease, box-shadow 0.15s ease;9198}9199.peach-chirp-back:hover {9200  color: var(--peach-accent);9201  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9202}9203.peach-chirp-title {9204  font-family: var(--font-display, Georgia, serif);9205  font-style: italic;9206  font-size: 24px;9207  font-weight: 500;9208  letter-spacing: 0.005em;9209  color: var(--peach-t0);9210  line-height: 1;9211}9212.peach-chirp-head-spacer { flex: 1; }92139214/* Chip row ------------------------------------------------------------- */9215.peach-chirp-chip-row {9216  display: flex;9217  align-items: center;9218  justify-content: flex-start;9219  margin-top: 12px;9220}9221.peach-chirp-chip {9222  display: inline-flex; align-items: center; gap: 8px;9223  padding: 5px 10px 5px 8px;9224  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9225  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9226  border-radius: 999px;9227  font-family: var(--peach-mono, ui-monospace, monospace);9228  font-size: 11px;9229  letter-spacing: 0.04em;9230  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9231}9232.peach-chirp-chip-dot {9233  width: 6px; height: 6px; border-radius: 50%;9234  background: var(--peach-accent);9235  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9236}9237.peach-chirp-chip[data-phase="paired"] {9238  background: color-mix(in srgb, #4f9eda 12%, transparent);9239  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9240  color: #76b6e8;9241}9242.peach-chirp-chip[data-phase="paired"] .peach-chirp-chip-dot {9243  background: #76b6e8;9244  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9245}9246.peach-chirp-chip[data-phase="timeout"],9247.peach-chirp-chip[data-phase="mic_denied"],9248.peach-chirp-chip[data-phase="version_mismatch"],9249.peach-chirp-chip[data-phase="handshake_failed"] {9250  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9251  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9252  color: var(--peach-warn, #d29257);9253}9254.peach-chirp-chip[data-phase="timeout"] .peach-chirp-chip-dot,9255.peach-chirp-chip[data-phase="mic_denied"] .peach-chirp-chip-dot,9256.peach-chirp-chip[data-phase="version_mismatch"] .peach-chirp-chip-dot,9257.peach-chirp-chip[data-phase="handshake_failed"] .peach-chirp-chip-dot {9258  background: var(--peach-warn, #d29257);9259  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9260}92619262/* Bird stage ----------------------------------------------------------- */9263.peach-chirp-stage {9264  position: relative;9265  margin: 14px 0 8px;9266  height: 180px;9267  border-radius: 12px;9268  background:9269    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9270    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),9271    color-mix(in srgb, var(--peach-bg) 92%, #000);9272  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);9273  overflow: hidden;9274  isolation: isolate;9275}9276.peach-chirp-stage::after {9277  content: '';9278  position: absolute;9279  left: 12%; right: 12%;9280  bottom: 36px;9281  height: 1px;9282  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9283}92849285.peach-chirp-bird-slot {9286  position: absolute;9287  bottom: 8px;9288  width: 100px;9289  height: 110px;9290  display: flex;9291  align-items: flex-end;9292  justify-content: center;9293}9294.peach-chirp-bird-slot-desktop { left: 28px; }9295.peach-chirp-bird-slot-mobile { right: 28px; }92969297/* Mobile bird hops in from the right when handshake begins */9298.peach-chirp-bird-slot-mobile {9299  opacity: 1;9300  transform: translateX(-6px);9301  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9302}9303.peach-chirp-stage.act-listening .peach-chirp-bird-slot-mobile,9304.peach-chirp-stage.act-chirping .peach-chirp-bird-slot-mobile,9305.peach-chirp-stage.act-idle .peach-chirp-bird-slot-mobile {9306  opacity: 0;9307  transform: translateX(60px) rotate(8deg);9308}9309.peach-chirp-stage.act-handshake .peach-chirp-bird-slot-desktop,9310.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop {9311  transform: translateX(6px);9312  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9313}93149315/* Paired: both birds bob together */9316.peach-chirp-stage.act-paired .peach-chirp-bird-slot {9317  animation: peach-chirp-happy-bob 1.2s ease-in-out infinite;9318}9319.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { animation-delay: 0.2s; }9320.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop { --bb-x: 6px; }9321.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { --bb-x: -6px; }9322@keyframes peach-chirp-happy-bob {9323  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9324  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9325}93269327/* Bird internal -------------------------------------------------------- */9328.peach-chirp-bird {9329  width: 108px;9330  height: 108px;9331  transform-origin: 50% 95%;9332}9333.peach-chirp-bird svg { width: 100%; height: 100%; overflow: visible; }93349335.peach-chirp-bird-body {9336  transform-origin: 50% 80%;9337  animation: peach-chirp-bird-bob 2.4s ease-in-out infinite;9338}9339@keyframes peach-chirp-bird-bob {9340  0%, 100% { transform: translateY(0) scale(1, 1); }9341  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9342}93439344.peach-chirp-bird-eye-group {9345  animation: peach-chirp-blink 5.2s steps(1, end) infinite;9346  transform-origin: center;9347  transform-box: fill-box;9348}9349@keyframes peach-chirp-blink {9350  0%, 92%, 96%, 100% { transform: scaleY(1); }9351  94%                { transform: scaleY(0.05); }9352}93539354/* Pose: chirping — beak opens, head bobs, aura blooms */9355.peach-chirp-bird-pose-chirping .peach-chirp-bird-body {9356  animation:9357    peach-chirp-bird-bob 2.4s ease-in-out infinite,9358    peach-chirp-squeeze 1.7s ease-in-out infinite;9359}9360@keyframes peach-chirp-squeeze {9361  0%, 70%, 100% { transform-origin: 50% 85%; }9362  78%           { transform: scale(1.04, 0.96) translateY(1px); }9363  86%           { transform: scale(0.98, 1.02); }9364}9365.peach-chirp-bird-pose-chirping .peach-chirp-bird-head-group {9366  animation: peach-chirp-head-bob 1.7s ease-in-out infinite;9367}9368@keyframes peach-chirp-head-bob {9369  0%, 70%, 100% { transform: translateY(0) rotate(0); }9370  78%           { transform: translateY(-3px) rotate(-4deg); }9371  86%           { transform: translateY(-1px) rotate(-2deg); }9372}9373.peach-chirp-bird-pose-chirping .peach-chirp-bird-beak {9374  animation: peach-chirp-beak-open 1.7s ease-in-out infinite;9375}9376@keyframes peach-chirp-beak-open {9377  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9378  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9379  86%           { transform: rotate(-6deg); }9380}9381.peach-chirp-bird-pose-chirping .peach-chirp-bird-aura {9382  animation: peach-chirp-aura 1.7s ease-in-out infinite;9383}9384@keyframes peach-chirp-aura {9385  0%, 100% { opacity: 0; }9386  50%      { opacity: 0.8; }9387}9388.peach-chirp-bird-pose-chirping .peach-chirp-bird-tail {9389  animation: peach-chirp-tail-twitch 1.7s ease-in-out infinite;9390  transform-origin: 100% 50%;9391}9392@keyframes peach-chirp-tail-twitch {9393  0%, 75%, 100% { transform: rotate(0); }9394  82%           { transform: rotate(-3deg) translateX(-1px); }9395}93969397/* Pose: attentive — head tilts toward partner */9398.peach-chirp-bird-pose-attentive .peach-chirp-bird-head-group {9399  animation: peach-chirp-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9400}9401@keyframes peach-chirp-head-tilt {9402  0%   { transform: rotate(0) translateY(0); }9403  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9404  100% { transform: rotate(-6deg); }9405}9406.peach-chirp-bird-pose-attentive .peach-chirp-bird-tail {9407  animation: peach-chirp-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9408  transform-origin: 100% 50%;9409}9410@keyframes peach-chirp-tail-cock {9411  0%   { transform: rotate(0); }9412  100% { transform: rotate(-4deg); }9413}94149415/* Pose: happy — wing flutter, tuft perk, tail wag */9416.peach-chirp-bird-pose-happy .peach-chirp-bird-wing {9417  transform-origin: 80% 60%;9418  animation: peach-chirp-wing-flutter 0.32s ease-in-out 5;9419}9420@keyframes peach-chirp-wing-flutter {9421  0%, 100% { transform: rotate(0) translateY(0); }9422  50%      { transform: rotate(-16deg) translateY(-2px); }9423}9424.peach-chirp-bird-pose-happy .peach-chirp-bird-tuft {9425  transform-origin: 0% 100%;9426  animation: peach-chirp-tuft-perk 0.4s ease-in-out 3;9427}9428@keyframes peach-chirp-tuft-perk {9429  0%, 100% { transform: rotate(0); }9430  50%      { transform: rotate(-15deg) translateY(-1px); }9431}9432.peach-chirp-bird-pose-happy .peach-chirp-bird-tail {9433  transform-origin: 100% 50%;9434  animation: peach-chirp-tail-wag 0.5s ease-in-out 4;9435}9436@keyframes peach-chirp-tail-wag {9437  0%, 100% { transform: rotate(0); }9438  25%      { transform: rotate(6deg); }9439  75%      { transform: rotate(-6deg); }9440}9441.peach-chirp-bird-pose-happy .peach-chirp-bird-head-group {9442  animation: peach-chirp-head-perk 0.5s ease-out;9443}9444@keyframes peach-chirp-head-perk {9445  0%   { transform: translateY(0); }9446  40%  { transform: translateY(-3px) rotate(2deg); }9447  100% { transform: translateY(0); }9448}94499450/* Pose: sad — body droops forward */9451.peach-chirp-bird-pose-sad .peach-chirp-bird-body {9452  transform: translateY(5px) rotate(-2deg);9453  animation: none;9454}9455.peach-chirp-bird-pose-sad .peach-chirp-bird-head-group {9456  transform: translateY(4px) rotate(8deg);9457}9458.peach-chirp-bird-pose-sad .peach-chirp-bird-tuft { transform: rotate(15deg) translateY(2px); }9459.peach-chirp-bird-pose-sad .peach-chirp-bird-tail { transform: rotate(8deg) translateY(2px); }94609461.peach-chirp-bird-pose-hidden { opacity: 0; }94629463/* Chirp arcs ----------------------------------------------------------- */9464.peach-chirp-arcs {9465  position: absolute;9466  top: 18px;9467  width: 96px;9468  height: 70px;9469  pointer-events: none;9470}9471.peach-chirp-arcs-right { right: -60px; }9472.peach-chirp-arcs-left  { left: -60px; transform: scaleX(-1); }9473.peach-chirp-arc {9474  position: absolute;9475  top: 50%;9476  left: 0;9477  width: 40px;9478  height: 40px;9479  margin-top: -20px;9480  border: 1.2px solid #f4d5a8;9481  border-color: transparent #f4d5a8 transparent transparent;9482  border-radius: 50%;9483  opacity: 0;9484  animation: peach-chirp-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9485}9486@keyframes peach-chirp-arc-expand {9487  0%   { transform: scale(0.4); opacity: 0; }9488  20%  { opacity: 0.9; }9489  100% { transform: scale(1.6); opacity: 0; }9490}94919492/* Flight wave ---------------------------------------------------------- */9493.peach-chirp-flight-track {9494  position: absolute;9495  inset: 32px 36px 38px 36px;9496  pointer-events: none;9497}9498.peach-chirp-flight-wave {9499  position: absolute;9500  top: 8px;9501  left: 76px;9502  right: 76px;9503  height: 60px;9504  width: auto;9505  opacity: 0;9506  transition: opacity 0.15s ease;9507  stroke: #f4d5a8;9508  fill: none;9509}9510.peach-chirp-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9511.peach-chirp-flight-wave.is-visible { opacity: 1; }9512.peach-chirp-flight-path,9513.peach-chirp-flight-path-2 {9514  stroke-dasharray: 240;9515  stroke-dashoffset: 240;9516  stroke-linecap: round;9517  fill: none;9518}9519.peach-chirp-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9520.peach-chirp-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9521.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path {9522  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9523}9524.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path-2 {9525  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9526}9527@keyframes peach-chirp-fly {9528  0%   { stroke-dashoffset: 240; opacity: 0; }9529  20%  { opacity: 1; }9530  100% { stroke-dashoffset: -120; opacity: 0; }9531}95329533/* Connection dot ------------------------------------------------------- */9534.peach-chirp-dot {9535  position: absolute;9536  top: 50%; left: 50%;9537  transform: translate(-50%, -50%);9538  width: 40px; height: 40px;9539  opacity: 0;9540  pointer-events: none;9541  transition: opacity 0.3s ease;9542  color: var(--peach-accent);9543}9544.peach-chirp-dot.is-visible { opacity: 1; }9545.peach-chirp-dot-glow {9546  position: absolute; top: 50%; left: 50%;9547  transform: translate(-50%, -50%);9548  width: 38px; height: 38px;9549  border-radius: 50%;9550  filter: blur(10px);9551  opacity: 0.55;9552  background: var(--peach-accent);9553  animation: peach-chirp-dot-bloom 1.4s ease-out;9554}9555.peach-chirp-dot-core {9556  position: absolute; top: 50%; left: 50%;9557  transform: translate(-50%, -50%);9558  width: 8px; height: 8px;9559  border-radius: 50%;9560  background: var(--peach-accent);9561  box-shadow: 0 0 12px currentColor;9562  animation: peach-chirp-dot-core 1.4s ease-out;9563}9564.peach-chirp-dot-ring {9565  position: absolute; top: 50%; left: 50%;9566  width: 60px; height: 60px;9567  transform: translate(-50%, -50%);9568  animation: peach-chirp-dot-ring 1.4s linear;9569  stroke: var(--peach-accent);9570}9571@keyframes peach-chirp-dot-bloom {9572  0%   { width: 4px; height: 4px; opacity: 0; }9573  35%  { width: 60px; height: 60px; opacity: 0.7; }9574  100% { width: 38px; height: 38px; opacity: 0.55; }9575}9576@keyframes peach-chirp-dot-core {9577  0%   { width: 0; height: 0; }9578  35%  { width: 12px; height: 12px; }9579  100% { width: 8px; height: 8px; }9580}9581@keyframes peach-chirp-dot-ring {9582  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9583  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9584  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9585}95869587/* Motes — drift upward across the stage */9588.peach-chirp-motes {9589  position: absolute;9590  inset: 0;9591  pointer-events: none;9592}9593.peach-chirp-mote {9594  position: absolute;9595  width: 2px; height: 2px;9596  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9597  border-radius: 50%;9598  bottom: 32px;9599  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9600  opacity: 0;9601  animation: peach-chirp-mote-drift 6s linear infinite;9602  animation-delay: calc(var(--mote-i, 0) * 0.7s);9603}9604@keyframes peach-chirp-mote-drift {9605  0%   { transform: translateY(0); opacity: 0; }9606  10%  { opacity: 0.6; }9607  90%  { opacity: 0.1; }9608  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9609}96109611/* Status copy ---------------------------------------------------------- */9612.peach-chirp-copy-host {9613  margin: 4px 4px 10px;9614  text-align: center;9615  min-height: 50px;9616}9617.peach-chirp-copy {9618  animation: peach-chirp-copy-in 0.35s ease both;9619}9620@keyframes peach-chirp-copy-in {9621  from { opacity: 0; transform: translateY(4px); }9622  to   { opacity: 1; transform: translateY(0); }9623}9624.peach-chirp-headline {9625  font-family: var(--font-display, Georgia, serif);9626  font-style: italic;9627  font-size: 20px;9628  font-weight: 500;9629  line-height: 1.2;9630  letter-spacing: 0.005em;9631  color: var(--peach-t0);9632  margin-bottom: 6px;9633}9634.peach-chirp-copy-listening .peach-chirp-headline,9635.peach-chirp-copy-chirping .peach-chirp-headline,9636.peach-chirp-copy-idle .peach-chirp-headline {9637  font-family: inherit;9638  font-style: normal;9639  font-weight: 500;9640  font-size: 15px;9641  color: var(--peach-t0);9642  letter-spacing: 0;9643}9644.peach-chirp-copy-paired .peach-chirp-headline {9645  color: var(--peach-t0);9646  font-weight: 600;9647}9648.peach-chirp-sub {9649  font-size: 12.5px;9650  line-height: 1.45;9651  color: var(--peach-t1);9652  max-width: 280px;9653  margin: 0 auto;9654  text-wrap: pretty;9655}96569657/* Status action -------------------------------------------------------- */9658.peach-chirp-action {9659  margin: 2px 4px 10px;9660  margin-top: auto;9661  display: flex;9662  flex-direction: column;9663  gap: 8px;9664}9665.peach-chirp-action-waiting {9666  display: flex;9667  align-items: center;9668  justify-content: space-between;9669  gap: 12px;9670}9671.peach-chirp-cancel {9672  min-width: 96px;9673}9674.peach-chirp-listening {9675  display: inline-flex; align-items: center; gap: 4px;9676  font-family: var(--peach-mono, ui-monospace, monospace);9677  font-size: 9.5px;9678  text-transform: uppercase;9679  letter-spacing: 0.12em;9680  color: var(--peach-t1);9681  padding: 8px 10px;9682}9683.peach-chirp-listen-dot {9684  width: 4px; height: 4px;9685  border-radius: 50%;9686  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9687  animation: peach-chirp-listen-pulse 1.2s ease-in-out infinite;9688}9689.peach-chirp-listen-dot:nth-child(2) { animation-delay: 0.2s; }9690.peach-chirp-listen-dot:nth-child(3) { animation-delay: 0.4s; }9691.peach-chirp-listen-label { margin-left: 6px; }9692@keyframes peach-chirp-listen-pulse {9693  0%, 100% { opacity: 0.25; transform: scale(0.9); }9694  50%      { opacity: 1;     transform: scale(1.15); }9695}96969697.peach-chirp-action-handshake {9698  display: flex;9699  flex-direction: column;9700  align-items: center;9701  gap: 8px;9702  padding: 8px 4px;9703}9704.peach-chirp-meter {9705  width: 100%;9706  max-width: 280px;9707  height: 2px;9708  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9709  border-radius: 2px;9710  position: relative;9711  overflow: hidden;9712}9713.peach-chirp-meter-bar {9714  position: absolute;9715  top: 0; bottom: 0;9716  width: 30%;9717  left: -30%;9718  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9719  animation: peach-chirp-meter-sweep 1.4s ease-in-out infinite;9720}9721@keyframes peach-chirp-meter-sweep {9722  0%   { left: -30%; }9723  100% { left: 100%; }9724}9725.peach-chirp-meter-label {9726  font-family: var(--peach-mono, ui-monospace, monospace);9727  font-size: 9.5px;9728  text-transform: uppercase;9729  letter-spacing: 0.14em;9730  color: var(--peach-t1);9731}97329733.peach-chirp-action-paired {9734  display: flex;9735  align-items: center;9736  gap: 10px;9737}9738.peach-chirp-device-confirm {9739  flex: 1;9740  display: inline-flex;9741  align-items: center;9742  gap: 8px;9743  padding: 9px 10px 9px 12px;9744  border-radius: 10px;9745  background: color-mix(in srgb, #76b6e8 12%, transparent);9746  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9747  font-size: 12.5px;9748  color: var(--peach-t0);9749  min-width: 0;9750}9751.peach-chirp-device-confirm-glyph {9752  display: inline-flex;9753  color: #76b6e8;9754}9755.peach-chirp-device-confirm-name {9756  flex: 1;9757  overflow: hidden;9758  text-overflow: ellipsis;9759  white-space: nowrap;9760}9761.peach-chirp-device-confirm-trust {9762  font-family: var(--peach-mono, ui-monospace, monospace);9763  font-size: 9.5px;9764  text-transform: uppercase;9765  letter-spacing: 0.1em;9766  color: #76b6e8;9767  padding: 2px 6px;9768  border-radius: 4px;9769  background: color-mix(in srgb, #76b6e8 14%, transparent);9770}9771.peach-chirp-done {9772  min-width: 80px;9773}9774.peach-chirp-retry {9775  align-self: center;9776  display: block;9777  margin: 6px auto 0;9778  min-width: 120px;9779}9780.peach-chirp-mic-help {9781  font-size: 12px;9782  color: var(--peach-t1);9783  text-align: center;9784  max-width: 320px;9785  margin: 0 auto;9786}97879788/* Rest state — bird stage at idle pose, primary CTA + paired list */9789.peach-chirp-pair[data-phase="idle"] .peach-chirp-stage {9790  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9791  height: 160px;9792}9793.peach-chirp-pair-start {9794  width: 100%;9795  display: inline-flex;9796  align-items: center;9797  justify-content: center;9798  gap: 8px;9799  padding: 11px 14px;9800  border-radius: 10px;9801  background: var(--peach-accent);9802  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9803  color: #1a0905;9804  font-family: inherit;9805  font-size: 13px;9806  font-weight: 600;9807  letter-spacing: 0.01em;9808  cursor: pointer;9809  transition: filter 0.15s ease, transform 0.1s ease;9810}9811.peach-chirp-pair-start:hover { filter: brightness(1.08); }9812.peach-chirp-pair-start:active { transform: translateY(1px); }98139814.peach-chirp-paired-section {9815  margin-top: 14px;9816  display: flex;9817  flex-direction: column;9818  gap: 8px;9819}9820.peach-chirp-paired-heading {9821  margin: 0;9822  font-family: var(--peach-mono, ui-monospace, monospace);9823  font-size: 10px;9824  font-weight: 500;9825  letter-spacing: 0.14em;9826  text-transform: uppercase;9827  color: var(--peach-t1);9828}98299830/* Footer --------------------------------------------------------------- */9831.peach-chirp-foot {9832  margin: 10px -4px -2px;9833  margin-top: auto;9834}9835.peach-chirp-foot-divider {9836  height: 1px;9837  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9838  margin-bottom: 10px;9839}9840.peach-chirp-foot-text {9841  font-size: 11px;9842  line-height: 1.5;9843  color: var(--peach-t1);9844  text-align: center;9845  padding: 0 4px;9846  text-wrap: pretty;9847}98489849/* Screen-reader-only live region. Kept off the visual flow but read by9850   assistive tech as the pairing phase advances. */9851.peach-sr-only {9852  position: absolute;9853  width: 1px; height: 1px;9854  padding: 0; margin: -1px;9855  overflow: hidden;9856  clip: rect(0, 0, 0, 0);9857  white-space: nowrap;9858  border: 0;9859}98609861/* Reduced motion — stage simplifies to opacity transitions only */9862@media (prefers-reduced-motion: reduce) {9863  .peach-chirp-bird-body,9864  .peach-chirp-bird-head-group,9865  .peach-chirp-bird-beak,9866  .peach-chirp-bird-wing,9867  .peach-chirp-bird-tuft,9868  .peach-chirp-bird-tail,9869  .peach-chirp-bird-eye-group,9870  .peach-chirp-bird-aura,9871  .peach-chirp-arc,9872  .peach-chirp-flight-path,9873  .peach-chirp-flight-path-2,9874  .peach-chirp-dot-glow,9875  .peach-chirp-dot-core,9876  .peach-chirp-dot-ring,9877  .peach-chirp-mote,9878  .peach-chirp-meter-bar,9879  .peach-chirp-listen-dot,9880  .peach-chirp-bird-slot,9881  .peach-chirp-bird-slot-mobile {9882    animation: none !important;9883    transition: opacity 0.2s linear !important;9884  }9885}98869887/* ─────────────────────────────────────────────────────────────────9888   Settings → Sync surface (v3 ChirpSync). Wraps the same bird9889   animation used by the pairing flow with a paired-devices list and9890   the "Pair a device" CTA.9891   ───────────────────────────────────────────────────────────────── */9892.peach-chirp-settings {9893  position: absolute;9894  inset: 0;9895  z-index: 3;9896  display: flex;9897  flex-direction: column;9898  gap: 18px;9899  padding: 14px 12px 12px;9900  width: 100%;9901  box-sizing: border-box;9902  overflow-y: auto;9903  overflow-x: hidden;9904  /* Same warm Chirp surface as the pairing screen — unifies the two views. */9905  background:9906    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9907    var(--peach-bg);9908  color: var(--peach-t0);9909  isolation: isolate;9910  /* Hide native scrollbar — content fits 99% of the time and a chunky9911     gutter ruins the surface. */9912  scrollbar-width: none;9913  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9914}9915.peach-chirp-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9916.peach-chirp-settings::before {9917  content: '';9918  position: absolute;9919  inset: 0;9920  pointer-events: none;9921  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9922  z-index: 0;9923}9924.peach-chirp-settings > * { position: relative; z-index: 1; }99259926.peach-chirp-settings--pairing {9927  padding: 0;9928  align-items: stretch;9929  justify-content: stretch;9930  background: none;9931  isolation: auto;9932}9933.peach-chirp-settings--pairing::before { display: none; }99349935.peach-chirp-settings-header {9936  display: flex;9937  align-items: center;9938  gap: 10px;9939}9940.peach-chirp-settings-title {9941  margin: 0;9942  font-family: var(--font-display, Georgia, serif);9943  font-style: italic;9944  font-size: 24px;9945  font-weight: 500;9946  line-height: 1;9947  color: var(--peach-t0);9948  letter-spacing: 0.005em;9949}9950.peach-chirp-settings-section {9951  margin: 6px 0 -4px;9952  font-size: 11px;9953  font-weight: 600;9954  letter-spacing: 0.08em;9955  text-transform: uppercase;9956  color: var(--peach-text-muted);9957}9958.peach-chirp-settings-error {9959  font-size: 12px;9960  padding: 8px 10px;9961  border-radius: 8px;9962  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);9963  color: var(--peach-text);9964}9965.peach-chirp-settings-footer {9966  margin-top: auto;9967  padding-top: 18px;9968  font-size: 11.5px;9969  line-height: 1.5;9970  color: var(--peach-text-muted);9971  text-align: center;9972}99739974/* Hero card shown when no devices are paired yet. */9975.peach-chirp-hero {9976  display: flex;9977  flex-direction: column;9978  align-items: center;9979  gap: 12px;9980  padding: 20px 12px 8px;9981  text-align: center;9982}9983.peach-chirp-hero-svg {9984  display: block;9985  max-width: 100%;9986  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));9987}9988.peach-chirp-hero-headline {9989  margin: 0;9990  font-family: var(--font-display, Georgia, serif);9991  font-style: italic;9992  font-size: 20px;9993  font-weight: 500;9994  line-height: 1.2;9995  letter-spacing: 0.005em;9996  color: var(--peach-t0);9997}9998.peach-chirp-hero-sub {9999  margin: 0;10000  font-size: 13px;10001  line-height: 1.5;10002  color: var(--peach-t1);10003  max-width: 320px;10004  text-wrap: pretty;10005}1000610007.peach-chirp-pair-cta {10008  display: flex;10009  justify-content: center;10010  padding: 4px 0 6px;10011}10012.peach-chirp-pair-button {10013  display: inline-flex;10014  align-items: center;10015  gap: 8px;10016  min-width: 220px;10017  justify-content: center;10018}10019.peach-chirp-pair-button-icon {10020  flex: 0 0 auto;10021}1002210023/* Paired devices list. Roomy rows that look at home next to the rest10024   of Settings; stale rows get a soft warm-warning border tint. */10025.peach-chirp-device-list {10026  list-style: none;10027  margin: 0;10028  padding: 0;10029  display: flex;10030  flex-direction: column;10031  gap: 8px;10032}10033.peach-chirp-device-row {10034  display: flex;10035  align-items: center;10036  gap: 12px;10037  padding: 12px;10038  border-radius: 10px;10039  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10040  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);10041}10042.peach-chirp-device-row[data-stale="true"] {10043  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);10044}10045.peach-chirp-device-icon {10046  width: 32px;10047  height: 32px;10048  display: flex;10049  align-items: center;10050  justify-content: center;10051  border-radius: 8px;10052  color: var(--peach-text);10053  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);10054}10055.peach-chirp-device-info {10056  flex: 1;10057  display: flex;10058  flex-direction: column;10059  gap: 2px;10060  min-width: 0;10061}10062.peach-chirp-device-name {10063  font-size: 14px;10064  font-weight: 600;10065  color: var(--peach-text);10066  overflow: hidden;10067  text-overflow: ellipsis;10068  white-space: nowrap;10069}10070.peach-chirp-device-meta {10071  font-size: 11.5px;10072  color: var(--peach-text-muted);10073  display: flex;10074  flex-wrap: wrap;10075  align-items: center;10076  gap: 8px;10077}10078.peach-chirp-device-badge {10079  font-size: 10.5px;10080  font-weight: 500;10081  letter-spacing: 0.02em;10082  padding: 2px 6px;10083  border-radius: 999px;10084  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);10085  color: var(--peach-text);10086}10087.peach-chirp-device-stale {10088  font-size: 10.5px;10089  font-weight: 500;10090  color: var(--peach-warn, #d29257);10091}10092.peach-chirp-device-remove {10093  flex: 0 0 auto;10094  color: var(--peach-text-muted);10095}10096.peach-chirp-device-remove:hover {10097  color: var(--peach-danger, #c25b4a);10098}10099.peach-chirp-unpair-confirm {10100  display: flex;10101  gap: 6px;10102  align-items: center;10103}1010410105/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */10106.peach-chirp-pro-card {10107  position: relative;10108  margin: 18px 12px;10109  padding: 18px 20px 22px;10110  border-radius: 22px;10111  background:10112    radial-gradient(140% 90% at 50% 0%,10113      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,10114      transparent 60%),10115    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10116  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);10117  box-shadow:10118    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,10119    0 18px 40px -24px rgba(0, 0, 0, 0.45);10120  display: flex;10121  flex-direction: column;10122  align-items: center;10123  gap: 10px;10124  text-align: center;10125  overflow: hidden;10126}10127.peach-chirp-pro-stage {10128  position: relative;10129  width: 220px;10130  height: 140px;10131  display: flex;10132  align-items: flex-end;10133  justify-content: center;10134  margin-bottom: 2px;10135}10136.peach-chirp-pro-bird-slot {10137  width: 140px;10138  height: 132px;10139  display: flex;10140  align-items: flex-end;10141  justify-content: center;10142  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));10143}10144.peach-chirp-pro-bird-slot .peach-chirp-bird {10145  width: 100%;10146  height: 100%;10147}10148.peach-chirp-pro-bird-slot .peach-chirp-bird svg {10149  width: 100%;10150  height: 100%;10151  overflow: visible;10152}10153.peach-chirp-pro-chirp {10154  position: absolute;10155  top: 14px;10156  right: 8px;10157  width: 96px;10158  height: 80px;10159  color: var(--peach-accent);10160  animation: peach-chirp-pulse 2.6s ease-in-out infinite;10161  transform-origin: 0% 50%;10162  pointer-events: none;10163}10164@keyframes peach-chirp-pulse {10165  0%, 100% { opacity: 0.35; transform: translateX(0) scale(0.92); }10166  45%      { opacity: 1;    transform: translateX(2px) scale(1); }10167  70%      { opacity: 0.6;  transform: translateX(4px) scale(1.04); }10168}10169@media (prefers-reduced-motion: reduce) {10170  .peach-chirp-pro-chirp { animation: none; opacity: 0.7; }10171}10172.peach-chirp-pro-headline {10173  margin: 4px 0 0;10174  font-family: var(--font-display, "Cormorant Garamond", serif);10175  font-style: italic;10176  font-size: 19px;10177  font-weight: 500;10178  letter-spacing: 0.01em;10179  color: var(--peach-t0);10180  max-width: 280px;10181  line-height: 1.25;10182}10183.peach-chirp-pro-body {10184  margin: 0;10185  font-size: 13px;10186  line-height: 1.55;10187  color: var(--peach-t1);10188  max-width: 300px;10189}10190.peach-chirp-pro-cta {10191  margin-top: 4px;10192}10193.peach-chirp-pro-foot {10194  margin: 2px 0 0;10195  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10196  font-size: 0.625rem;10197  letter-spacing: 0.08em;10198  text-transform: uppercase;10199  color: var(--peach-t2);10200  opacity: 0.75;10201}1020210203/* Shell border and shadow in light mode: match dark mode's near-invisible10204   border weight so the popup frame looks the same in both themes. */10205.light .peach-shell,10206.light .peach-screen {10207  border-color: rgba(26, 18, 8, 0.07);10208  box-shadow:10209    0 2px 8px rgba(80, 56, 32, 0.08),10210    0 14px 48px rgba(80, 56, 32, 0.10),10211    0 0 0 1px rgba(26, 18, 8, 0.04);10212}