popup.css

1html,2body,3#app,4.popup-root {5  width: 320px;6  min-height: 520px;7  height: 520px;8  margin: 0;9}1011body {12  overflow: hidden;13  background: var(--bg);14  color: var(--t0);15  font-family: var(--font-ui);16  font-weight: 300;17  position: relative;18}1920* {21  box-sizing: border-box;22}2324button,25input,26textarea,27select {28  font: inherit;29}3031button {32  border: 0;33}3435.popup-root {36  position: relative;37  overflow: hidden;38}3940.peach-theme {41  color: var(--peach-t0);42  font-family: var(--font-ui);43  font-weight: 300;44  box-sizing: border-box;45  text-align: left;46}47.peach-theme, .peach-theme * { box-sizing: inherit; }4849.peach-brand-mark {50  width: 14px;51  height: 14px;52  flex-shrink: 0;53}5455.peach-status-pip.is-hidden {56  display: none;57}5859.peach-status-pip.unlocked {60  background: var(--peach-health-ok);61  box-shadow: 0 0 6px rgba(100, 210, 100, 0.6);62}6364.peach-status-pip.pulse {65  animation: pip-pulse 400ms var(--peach-curve-settle) both;66}6768/* Shell */69.peach-shell, .peach-screen {70  background:71    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),72    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),73    var(--peach-bg);74  border: 1px solid var(--peach-t3);75  box-shadow:76    0 2px 8px rgba(0,0,0,0.55),77    0 14px 48px rgba(0,0,0,0.7),78    0 0 0 1px rgba(240,232,216,0.04);79  overflow: hidden;80}81.peach-shell {82  display: grid;83  grid-template-rows: auto 1fr;84  min-height: 520px;85  position: relative;86  isolation: isolate;87}8889.peach-shell[data-surface="extension"] {90  width: min(320px, 100vw);91  border-radius: 0;92  height: 520px;93  max-height: 520px;94  overflow: hidden;95}9697/* ── Lock screen – full-window lock/create stage ── */98.lock-screen--vault-stage {99  display: flex;100  flex-direction: column;101  gap: 18px;102  padding: 20px 18px 18px;103  justify-content: flex-start;104}105.lock-screen--vault-stage .peach-lock-panel {106  margin-top: auto;107}108.peach-lock-headline--unlock {109  max-width: 220px;110}111.peach-lock-hero--unlock {112  padding-top: 14px;113}114.peach-lock-panel--unlock {115  gap: 10px;116}117118.peach-lock-restore-link {119  background: transparent;120  border: none;121  cursor: pointer;122  font-family: var(--font-mono);123  font-size: 0.625rem;124  letter-spacing: 0.08em;125  color: var(--t1);126  padding: 5px 0;127  text-align: left;128  transition: color 150ms ease;129}130131.peach-lock-restore-link:hover {132  color: var(--t0);133}134.peach-shell[data-surface="extension"] .peach-stage {135  min-height: 250px;136}137138/* Screen (unlock) */139.peach-screen {140  width: min(320px, 100vw);141  min-height: 100%;142  height: 100%;143  border-radius: 0;144  padding: 16px 20px 18px;145  display: grid;146  gap: 14px;147}148.peach-screen[data-motion-phase="enter"] {149  animation: peach-screen-enter var(--peach-dur-600) var(--peach-curve-arrival) both;150}151.peach-screen-header { min-height: 20px; }152153/* Wordmark */154.peach-wordmark {155  margin: 0;156  font-family: var(--font-display);157  font-size: 0.9375rem;158  font-style: italic;159  letter-spacing: 0.03em;160  color: var(--peach-t0);161  display: inline-flex;162  min-height: 1em;163}164165/* Motion text / char animation */166.peach-motion-text { display: inline-flex; min-height: 1em; }167.peach-motion-char {168  display: inline-block;169  white-space: pre;170  opacity: 0;171  transform: translateY(0.22em);172  animation: peach-char-enter var(--peach-motion-duration, 380ms) var(--peach-curve-arrival) forwards;173  animation-delay: calc(var(--peach-char-index, 0) * 20ms);174}175176/* Chrome */177.peach-chrome {178  position: relative;179  z-index: 10;180  padding: 16px 20px 0;181  display: flex;182  justify-content: space-between;183  align-items: center;184  /* z-index:10 keeps the header icons above `.peach-loading` (Suspense185     fallback) per §15 regression guard. Without pointer-events:none, the186     empty header strip also sits above `.peach-overlay-view` (z-index:2)187     and swallows clicks meant for an overlay's back button / top search. */188  pointer-events: none;189}190.peach-chrome .peach-btn { pointer-events: auto; }191.peach-chrome.is-hidden-for-overlay,192.peach-search-wrap.is-hidden-for-overlay {193  opacity: 0;194  visibility: hidden;195  pointer-events: none;196}197/* Chirp-sync owns its own surface and header — fully collapse the global198   chrome row so the warm gradient reaches the popup edge. */199.peach-chrome.is-collapsed,200.peach-search-wrap.is-collapsed {201  display: none;202}203.peach-wordmark-wrap { display: flex; align-items: center; gap: 5px; }204.peach-status-pip {205  width: 5px;206  height: 5px;207  border-radius: 50%;208  background: var(--peach-t3);209  display: inline-flex;210  flex-shrink: 0;211  transition: background 400ms ease, box-shadow 400ms ease;212}213.peach-chrome-actions { display: flex; gap: 6px; }214215/* Shell body */216.peach-shell-body {217  position: relative;218  display: grid;219  grid-template-rows: 1fr auto;220  min-height: 0;221  min-width: 0;222  width: 100%;223  overflow: hidden;224  height: 100%;225}226.peach-shell-veil {227  position: absolute; inset: 0;228  background: #000; opacity: 0;229  pointer-events: none; z-index: 1;230}231.peach-shell[data-motion-phase="enter"] .peach-shell-body {232  animation: peach-shell-fade-in var(--peach-dur-600) var(--peach-curve-arrival) both;233}234.peach-shell[data-motion-phase="exit"] .peach-shell-veil {235  animation: peach-veil-in 300ms var(--peach-curve-departure) forwards;236}237238/* Content frame */239.peach-content-frame {240  display: grid;241  grid-template-rows: 1fr auto;242  grid-template-columns: minmax(0, 1fr);243  align-content: start;244  min-height: 0;245  min-width: 0;246  overflow: hidden;247  transition: opacity 80ms ease, transform 80ms ease;248}249.peach-content-frame.navigating {250  opacity: 0.93;251  transform: translateX(2px);252}253.peach-content-frame[data-content-phase="enter"] {254  animation: peach-content-enter 135ms ease-out both;255}256.peach-content-frame[data-content-phase="exit"] {257  animation: peach-content-exit 95ms ease-in forwards;258}259.peach-content-frame[data-content-phase="idle"] { opacity: 1; transform: none; }260261/* Stage */262.peach-stage {263  padding: 10px 20px 12px;264  display: grid;265  gap: 12px;266  align-content: start;267  min-width: 0;268  min-height: 0;269  max-width: 100%;270  overflow-y: auto;271  overflow-x: hidden;272  scrollbar-width: none;273  -ms-overflow-style: none;274  overscroll-behavior: contain;275}276.peach-stage::-webkit-scrollbar { display: none; }277278/* Entry name */279.peach-entry-name-wrap { position: relative; overflow: hidden; max-width: 100%; }280.peach-entry-header {281  position: relative;282  z-index: 1;283  display: flex;284  align-items: flex-start;285  gap: 6px;286  min-width: 0;287}288.peach-entry-header-name {289  flex: 1;290  min-width: 0;291}292.peach-entry-name {293  margin: 0;294  padding-bottom: 0.12em;295  font-family: var(--font-display);296  font-style: italic; font-weight: 400;297  font-size: 44px; line-height: 0.95;298  color: var(--peach-t0);299  display: -webkit-box;300  -webkit-line-clamp: 2;301  -webkit-box-orient: vertical;302  overflow: hidden;303  text-wrap: balance;304}305.peach-entry-name--lg { font-size: 40px; }306.peach-entry-name--xl { font-size: 34px; line-height: 0.98; }307.peach-entry-name--xxl { font-size: 30px; line-height: 1.02; }308.peach-entry-name-text { display: block; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; padding-bottom: 0.12em; }309310/* Trash icon in entry header */311.peach-entry-trash-btn {312  flex-shrink: 0;313  padding: 4px;314  margin-top: 4px;315  background: transparent;316  border: none;317  cursor: pointer;318  color: var(--peach-t2);319  border-radius: 4px;320  transition: color 140ms ease, background 140ms ease;321  display: flex;322  align-items: center;323  justify-content: center;324}325.peach-entry-trash-btn:hover {326  color: var(--peach-t1);327  background: var(--peach-t3);328}329.peach-entry-trash-confirm {330  display: flex;331  align-items: center;332  gap: 6px;333  flex-shrink: 0;334  margin-top: 6px;335  flex-wrap: nowrap;336}337.peach-entry-trash-confirm-label {338  font-family: var(--font-mono);339  font-size: 0.5625rem;340  letter-spacing: 0.1em;341  color: var(--peach-t2);342  white-space: nowrap;343}344.peach-entry-name-button {345  padding: 0;346  background: transparent;347  text-align: left;348  cursor: pointer;349  max-width: 100%;350  overflow: hidden;351  display: block;352}353.peach-entry-name-char {354  display: inline-block;355  white-space: pre;356  opacity: 0;357  transform: translateY(0.22em);358  animation: peach-char-enter 380ms var(--peach-curve-arrival) forwards;359  animation-delay: calc(var(--char-index, 0) * 20ms);360}361362/* Domain */363.peach-domain { border-top: 1px solid var(--peach-t3); padding-top: 9px; }364.peach-domain-row {365  width: 100%; border: 0; background: transparent; color: inherit;366  padding: 0; display: flex; justify-content: space-between; align-items: baseline;367  cursor: default;368}369.peach-domain-value {370  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;371  font-size: 0.625rem; font-style: italic;372  letter-spacing: 0.12em; color: var(--peach-t1);373}374375/* Fields */376.peach-fields { display: grid; gap: 10px; }377.peach-field-card { display: grid; gap: 7px; }378.peach-label {379  font-family: Inter, system-ui, sans-serif;380  text-transform: uppercase; letter-spacing: 0.2em;381  font-size: 0.5rem; color: var(--peach-t2);382}383.peach-add-field-btn {384  align-self: flex-start;385  background: none; border: none; padding: 2px 0;386  font-family: Inter, system-ui, sans-serif;387  font-size: 0.6875rem; color: var(--peach-accent);388  cursor: pointer; opacity: 0.75;389  letter-spacing: 0.02em;390}391.peach-add-field-btn:hover { opacity: 1; }392.peach-field-value-row {393  display: flex; justify-content: space-between;394  align-items: center; gap: 8px;395  min-width: 0;396}397.peach-field-value {398  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;399  font-size: 0.8125rem; color: var(--peach-t1);400  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;401  flex: 1;402  min-width: 0;403}404.peach-password-value {405  display: inline-flex;406  align-items: center;407  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;408  font-size: 1rem; letter-spacing: 0.3em; color: var(--peach-t0);409  overflow: hidden;410  text-overflow: ellipsis;411  white-space: nowrap;412  flex: 1;413  min-width: 0;414  max-width: 100%;415}416.peach-password-value.is-revealed {417  font-size: 0.875rem;418  letter-spacing: 0.08em;419}420.peach-password-text,421.peach-password-mask {422  display: block;423  width: 100%;424  overflow: hidden;425  white-space: nowrap;426  /* Render as uniform mid-line bullets, not baseline periods */427  font-family: Inter, system-ui, sans-serif;428  font-size: 0.625rem;429  letter-spacing: 3px;430  user-select: none;431}432.peach-field-actions { display: flex; gap: 4px; align-items: center; }433.peach-password-strength { display: flex; align-items: center; gap: 8px; }434.peach-strength-bar { display: flex; gap: 3px; }435.peach-strength-seg { width: 28px; height: 4px; border-radius: 2px; background: #eee; }436.peach-strength-label {437  font-family: "IBM Plex Mono", monospace;438  font-style: italic;439  font-size: 0.5625rem;440  font-weight: 300;441  min-width: 36px;442  text-align: right;443  color: var(--peach-t2);444  letter-spacing: 0.06em;445}446447.peach-strength-hairline {448  display: flex;449  align-items: center;450  gap: 10px;451  margin-top: -2px;452}453454.peach-strength-hairline-track {455  flex: 1;456  height: 3px;457  border-radius: 2px;458  background: var(--peach-s2);459  overflow: hidden;460}461462.peach-strength-hairline-fill {463  height: 100%;464  border-radius: 2px;465  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),466    background 400ms ease;467}468469/* Note content (display) */470.peach-note-content {471  border-top: 1px solid var(--peach-t3);472  padding-top: 10px;473  font-family: var(--font-display);474  font-size: 0.9375rem;475  line-height: 1.75;476  color: var(--peach-t1);477}478479/* ── Inline editing ─────────────────────────────────────────────────── */480481/* Clickable display values */482.peach-inline-clickable {483  cursor: text;484  border-radius: 3px;485  transition: background 150ms ease;486}487.peach-inline-clickable:hover {488  background: rgba(240, 232, 216, 0.05);489}490491/* Subtle "edit" hint that appears on hover */492.peach-inline-edit-hint {493  font-family: Inter, system-ui, sans-serif;494  font-size: 0.5625rem;495  text-transform: uppercase;496  letter-spacing: 0.14em;497  color: var(--peach-t2);498  opacity: 0;499  transition: opacity 120ms ease;500  pointer-events: none;501  margin-left: 6px;502  flex-shrink: 0;503}504.peach-domain-row:hover .peach-inline-edit-hint {505  opacity: 1;506}507508/* Title editing */509.peach-inline-title-wrap {510  display: flex;511  flex-direction: column;512  gap: 6px;513}514.peach-inline-title-input {515  font-family: var(--font-display);516  font-style: italic;517  font-weight: 400;518  font-size: 40px;519  line-height: 0.95;520  color: var(--peach-t0);521  background: transparent;522  border: none;523  border-bottom: 1px solid var(--peach-accent);524  outline: none;525  width: 100%;526  padding: 2px 0;527}528529/* Generic inline field */530.peach-inline-field-wrap {531  display: flex;532  flex-direction: column;533  gap: 6px;534}535.peach-inline-input {536  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;537  font-size: 0.8125rem;538  color: var(--peach-t0);539  background: transparent;540  border: none;541  border-bottom: 1px solid var(--peach-accent);542  outline: none;543  width: 100%;544  padding: 3px 0;545}546.peach-inline-textarea {547  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;548  font-size: 0.6875rem;549  line-height: 1.7;550  color: var(--peach-t0);551  background: rgba(240, 232, 216, 0.04);552  border: 1px solid var(--peach-accent);553  border-radius: 4px;554  outline: none;555  width: 100%;556  padding: 8px;557  resize: vertical;558  min-height: 80px;559}560561/* Save / cancel row */562.peach-inline-actions {563  display: flex;564  gap: 6px;565  align-items: center;566}567.peach-inline-save-btn,568.peach-inline-cancel-btn {569  display: inline-flex;570  align-items: center;571  justify-content: center;572  width: 26px;573  height: 26px;574  border-radius: 4px;575  border: none;576  cursor: pointer;577  transition: background 140ms ease, opacity 140ms ease;578  flex-shrink: 0;579}580.peach-inline-save-btn {581  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);582  color: var(--peach-accent);583}584.peach-inline-save-btn:hover:not(:disabled) {585  background: color-mix(in srgb, var(--peach-accent) 30%, transparent);586}587.peach-inline-cancel-btn {588  background: rgba(240, 232, 216, 0.06);589  color: var(--peach-t2);590}591.peach-inline-cancel-btn:hover:not(:disabled) {592  background: rgba(240, 232, 216, 0.12);593  color: var(--peach-t1);594}595.peach-inline-save-btn:disabled,596.peach-inline-cancel-btn:disabled {597  opacity: 0.4;598  cursor: not-allowed;599}600601/* Inline password generator wrapper */602.peach-inline-generator-wrap {603  margin-top: 10px;604  padding-top: 10px;605  border-top: 1px solid var(--peach-t3);606  display: flex;607  flex-direction: column;608  gap: 8px;609}610.peach-inline-generator-cancel {611  align-self: flex-start;612  font-size: 0.6875rem;613  color: var(--peach-t2);614}615616/* "is-editing" card state */617.peach-field-card.is-editing {618  background: rgba(240, 232, 216, 0.02);619  border-radius: 6px;620  padding: 8px;621  margin: -8px;622}623624/* Inline tag editor on Entry detail view */625.peach-inline-tag-editor {626  display: flex;627  flex-direction: column;628  gap: 6px;629}630631/* Quiet inline "+ add X" link in the entry detail body */632.peach-entry-add-link {633  justify-self: start;634  margin-top: 8px;635}636637/* Additional URLs editor revealed by clicking the URL field */638.peach-additional-urls {639  display: flex;640  flex-direction: column;641  gap: 6px;642  margin-top: 8px;643}644.peach-additional-urls-label {645  font-size: 0.5625rem;646  letter-spacing: 0.1em;647  text-transform: uppercase;648  color: var(--peach-t2);649  margin-bottom: 2px;650}651/* UI-5 / LV-4: recovery words grid in the view-words reveal. */652.peach-recovery-words-grid {653  display: grid;654  grid-template-columns: 1fr 1fr;655  gap: 4px 10px;656}657.peach-recovery-word {658  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;659  font-size: 11px;660  color: var(--peach-t0);661}662.peach-recovery-word b {663  color: var(--peach-t2);664  font-weight: 400;665  margin-right: 4px;666}667668/* UI-1 / HV-1b: dismissible sync alert banners at the top of the vault view. */669.peach-sync-alerts {670  display: flex;671  flex-direction: column;672  gap: 6px;673  padding: 8px 12px 0;674}675.peach-sync-alert {676  display: flex;677  align-items: flex-start;678  gap: 8px;679  padding: 8px 10px;680  border-radius: 7px;681  background: color-mix(in srgb, #C8A840 14%, transparent);682  border: 1px solid color-mix(in srgb, #C8A840 38%, transparent);683}684.peach-sync-alert-text {685  flex: 1;686  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;687  font-size: 10px;688  line-height: 1.45;689  color: var(--peach-t0);690}691.peach-sync-alert-dismiss {692  flex-shrink: 0;693  background: none;694  border: none;695  color: var(--peach-t2);696  font-size: 14px;697  line-height: 1;698  cursor: pointer;699  padding: 0 2px;700}701.peach-sync-alert-dismiss:hover { color: var(--peach-t0); }702703/* UI-8 / LV-2: non-blocking homograph warning under the URL editor. */704.peach-homograph-warning {705  margin: 4px 0 2px;706  padding: 6px 8px;707  border-radius: 6px;708  background: color-mix(in srgb, var(--peach-breach) 12%, transparent);709  border: 1px solid color-mix(in srgb, var(--peach-breach) 36%, transparent);710  color: var(--peach-t1);711  font-size: 0.6875rem;712  line-height: 1.4;713}714.peach-additional-url-row {715  display: flex;716  align-items: center;717  gap: 6px;718}719.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }720.peach-additional-url-remove {721  background: transparent;722  border: 1px solid var(--peach-t3);723  color: var(--peach-t2);724  width: 22px;725  height: 22px;726  border-radius: 4px;727  cursor: pointer;728  font-size: 0.875rem;729  line-height: 1;730  display: inline-flex;731  align-items: center;732  justify-content: center;733  flex-shrink: 0;734  transition: color 120ms ease, border-color 120ms ease;735}736.peach-additional-url-remove:hover:not(:disabled) {737  color: var(--peach-accent);738  border-color: var(--peach-border-accent);739}740.peach-additional-urls-add { align-self: flex-start; }741742/* Delete row */743.peach-entry-delete-row {744  display: flex;745  align-items: center;746  gap: 8px;747  padding-top: 18px;748  margin-top: 8px;749  border-top: 1px solid var(--peach-t3);750}751.peach-delete-btn {752  font-size: 0.6875rem;753  color: var(--peach-t2);754  padding: 4px 0;755}756.peach-delete-confirm-text {757  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;758  font-size: 0.6875rem;759  font-style: italic;760  color: var(--peach-t2);761  flex-shrink: 0;762}763764/* TOTP band */765.peach-totp-band {766  border-top: 1px solid var(--peach-t3);767  padding: 12px 20px 14px;768  position: relative;769  display: grid;770  grid-template-columns: 1fr auto;771  gap: 10px;772}773.peach-totp-main {774  min-width: 0;775  cursor: pointer;776  user-select: none;777}778.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }779.peach-totp-code-row {780  display: flex;781  align-items: flex-end;782  gap: 10px;783  min-width: 0;784}785.peach-totp-code {786  margin: 2px 0 0;787  font-family: var(--font-display);788  font-style: italic;789  font-weight: 300;790  font-size: 38px; color: var(--peach-accent);791  line-height: 0.95; min-height: 1em;792  min-width: 0;793}794.peach-totp-code-text {795  display: inline-flex;796  overflow: hidden;797  text-overflow: ellipsis;798  white-space: nowrap;799}800.peach-totp-copy-btn {801  margin-bottom: 2px;802  flex-shrink: 0;803  border-color: transparent;804}805.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }806.peach-totp-countdown {807  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;808  font-size: 22px; color: var(--peach-t1);809}810.peach-totp-ring { transform: rotate(-90deg); }811.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }812.peach-totp-ring-progress {813  fill: none; stroke: var(--peach-accent); stroke-width: 2;814  stroke-linecap: round;815  transition: stroke-dashoffset 1s linear, stroke 500ms ease;816}817/* Search bar */818.peach-search-wrap {819  border-top: 1px solid var(--peach-t3);820  background: var(--peach-s1);821  min-height: 54px; position: relative;822  box-shadow: inset 0 6px 18px transparent;823  transition: box-shadow 700ms ease;824}825.peach-search-wrap::before {826  content: "";827  position: absolute;828  left: 0;829  top: 0;830  height: 2px;831  width: var(--peach-totp-progress, 0%);832  background: var(--peach-accent);833  opacity: 0;834  transition: width 1s linear, opacity 180ms ease;835  pointer-events: none;836}837.peach-shell[data-totp-active="true"] .peach-search-wrap::before {838  opacity: 0.9;839}840.peach-shell[data-totp-active="true"] .peach-search-wrap {841  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);842}843844@keyframes peach-totp-code-flare {845  0%   { filter: brightness(1); }846  25%  { filter: brightness(1.3); }847  100% { filter: brightness(1); }848}849.peach-totp-code.is-hot {850  animation: peach-totp-code-flare 3000ms ease-in-out both;851}852.peach-search-bar {853  min-height: 54px;854  display: grid;855  grid-template-columns: auto minmax(0, 1fr) auto;856  align-items: center;857  gap: 8px; padding: 0 9px 0 12px;858}859.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }860.peach-search-input {861  border: 0; background: transparent; color: var(--peach-t0);862  font-family: var(--font-display);863  font-style: italic; font-size: 18px;864  outline: none; width: 100%; min-width: 0; padding: 0;865  caret-color: var(--peach-accent);866}867.peach-search-input::placeholder { color: var(--peach-t2); }868.peach-search-meta {869  display: grid;870  grid-auto-flow: column;871  align-items: center;872  justify-content: end;873  gap: 6px;874  min-width: max-content;875}876.peach-search-counter {877  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;878  font-size: 0.625rem; color: var(--peach-t2);879  display: inline-flex;880  align-items: center;881  line-height: 1;882}883.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }884885/* Buttons */886.peach-btn {887  border: 1px solid transparent; border-radius: 12px;888  background: transparent; color: var(--peach-t0);889  font-family: Inter, system-ui, sans-serif;890  font-size: 0.75rem; letter-spacing: 0.02em; padding: 8px 12px;891  cursor: pointer;892  transition:893    background-color var(--peach-dur-80) var(--peach-curve-arrival),894    color var(--peach-dur-80) var(--peach-curve-arrival),895    border-color var(--peach-dur-150) var(--peach-curve-arrival);896}897.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }898.peach-btn:disabled {899  opacity: 0.45;900  cursor: not-allowed;901}902.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 0.6875rem; }903.peach-btn--md { min-height: 38px; }904.peach-btn--accent {905  background: var(--peach-accent);906  color: rgba(0,0,0,0.92);907  font-weight: 500;908  box-shadow:909    0 1px 0 rgba(255,255,255,0.08) inset,910    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),911    0 3px 16px var(--peach-glow),912    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);913}914.peach-btn--accent:hover:not(:disabled) {915  background: var(--peach-accent);916  filter: brightness(1.10) saturate(1.05);917  box-shadow:918    0 1px 0 rgba(255,255,255,0.10) inset,919    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),920    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),921    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);922}923.peach-btn--ghost:not(.peach-icon-btn) { border-color: var(--peach-t3); color: var(--peach-t1); }924.peach-btn--ghost.peach-icon-btn { color: var(--peach-t1); }925.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }926.peach-icon-btn {927  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;928  display: inline-flex; align-items: center; justify-content: center;929  border-color: transparent;930  transition:931    color var(--peach-dur-80) var(--peach-curve-arrival),932    box-shadow var(--peach-dur-150) var(--peach-curve-arrival),933    background-color var(--peach-dur-80) var(--peach-curve-arrival);934}935.peach-icon-btn:hover:not(:disabled) {936  background: transparent;937  color: var(--peach-accent);938  box-shadow: 0 0 12px color-mix(in srgb, var(--peach-accent) 28%, transparent),939              0 0 4px color-mix(in srgb, var(--peach-accent) 16%, transparent);940}941942.peach-btn:focus-visible {943  outline: none;944  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);945}946947/* Lock button */948.peach-lock-icon { transform-origin: center; }949.peach-lock-btn { color: var(--peach-accent); }950.peach-lock-btn.is-locking .peach-lock-icon {951  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);952}953954/* Biometric unlock button */955.peach-biometric-btn {956  display: flex;957  align-items: center;958  justify-content: center;959  gap: 6px;960  margin-top: 8px;961  width: 100%;962}963964/* Copy button */965.peach-copy-btn {966  position: relative; overflow: hidden;967  color: var(--peach-t2); border-color: var(--peach-t3);968}969.peach-copy-icon {970  display: inline-flex; align-items: center; justify-content: center;971  position: relative; z-index: 1;972}973.peach-copy-icon-svg { display: block; }974.peach-copy-sheen {975  position: absolute; inset: 0;976  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--peach-accent) 18%, transparent) 30%, color-mix(in srgb, var(--peach-accent) 8%, transparent) 100%);977  opacity: 0; transform: scaleX(0.15); transform-origin: left center;978}979.peach-copy-btn.is-copied {980  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;981  box-shadow:982    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),983    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),984    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);985}986.peach-copy-btn.is-copied .peach-copy-icon {987  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;988}989.peach-copy-btn.is-copied .peach-copy-sheen {990  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;991}992.peach-copy-btn.is-retreat {993  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;994}995.peach-copy-btn.is-retreat .peach-copy-sheen {996  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;997}998.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }999.peach-copy-drain-bar {1000  display: block; width: 100%; height: 100%;1001  background: var(--peach-accent); opacity: 0.7;1002  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;1003}10041005/* Unlock screen elements */1006.peach-underline-input {1007  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);1008  padding: 6px 0; background: transparent; color: var(--peach-t0);1009  outline: none;1010  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1011  font-size: 0.8125rem;1012  caret-color: var(--peach-accent);1013}1014.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }1015.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }1016.peach-hint {1017  margin: 0;1018  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1019  font-size: 0.625rem; color: var(--peach-t2);1020}1021.peach-unlock-footer {1022  margin-top: 4px; display: flex; align-items: center; gap: 7px;1023  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1024  font-size: 0.625rem; color: var(--peach-t2);1025}1026.peach-unlock-footer--lock {1027  padding-top: 2px;1028}10291030/* Desktop helper (peach-sync) code pairing — additive hooks. The chirp pairing1031   classes (peach-chirp-*) carry the shared layout; these only style the parts1032   unique to the typed-code path. Inline styles cover the SAS/confirm gate. */1033.peach-desktop-pair { display: flex; flex-direction: column; }1034.peach-desktop-enter,1035.peach-desktop-searching,1036.peach-desktop-paired,1037.peach-desktop-error {1038  display: flex; flex-direction: column; gap: 8px;1039  padding: 4px 18px 16px; text-align: center; align-items: center;1040}1041.peach-desktop-enter .peach-label { align-self: flex-start; }1042.peach-code-input {1043  text-align: center; letter-spacing: 0.42em; padding-left: 0.42em;1044}1045.peach-code-input::placeholder { letter-spacing: 0.42em; }1046/* Method chooser — two large tappable cards before the birds appear. */1047.peach-pair-method-list {1048  display: flex; flex-direction: column; gap: 10px; padding: 4px 18px 8px;1049}1050.peach-pair-method {1051  display: flex; align-items: center; gap: 12px;1052  width: 100%; text-align: left; cursor: pointer;1053  padding: 12px; border-radius: 10px;1054  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);1055  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);1056  color: var(--peach-text);1057  font-family: inherit;1058  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;1059}1060.peach-pair-method:hover {1061  border-color: color-mix(in srgb, var(--peach-accent) 36%, transparent);1062  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 80%, var(--peach-accent) 20%);1063}1064.peach-pair-method:active { transform: translateY(1px); }1065.peach-pair-method-icon {1066  flex-shrink: 0;1067  width: 32px; height: 32px;1068  display: flex; align-items: center; justify-content: center;1069  border-radius: 8px;1070  color: var(--peach-text);1071  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);1072}1073.peach-pair-method-text {1074  display: flex; flex-direction: column; gap: 2px; min-width: 0;1075}1076.peach-pair-method-title { font-size: 0.875rem; font-weight: 600; }1077.peach-pair-method-sub { font-size: 0.6875rem; color: var(--peach-t2); }10781079/* Breach badge */1080.peach-breach-badge {1081  display: flex;1082  position: relative;1083  z-index: 1;1084  align-items: center;1085  gap: 7px;1086  font-size: 0.5625rem;1087  color: var(--peach-breach);1088  padding: 5px 10px;1089  margin-bottom: 4px;1090  border-radius: 8px;1091  background: rgba(220, 80, 60, 0.07);1092  border: 1px solid rgba(220, 80, 60, 0.18);1093  letter-spacing: 0.04em;1094}10951096.peach-password-value.is-breached {1097  color: rgba(220, 80, 60, 0.75);1098  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1099}11001101/* ── Overlay views ─────────────────────────────────────────────────── */1102.peach-overlay-view {1103  position: absolute;1104  inset: 0;1105  display: flex;1106  flex-direction: column;1107  background:1108    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1109    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1110    var(--peach-bg);1111  z-index: 2;1112  overflow: hidden;1113  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1114}11151116.peach-overlay-view:has(.stk-shell) {1117  background: var(--peach-bg);1118}1119@keyframes overlay-in {1120  from { opacity: 0; transform: translateY(8px); }1121  to   { opacity: 1; transform: translateY(0); }1122}1123.peach-overlay-view.ov-enter-up {1124  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1125}1126.peach-overlay-view.ov-exit-up {1127  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1128}1129.peach-overlay-view.ov-enter-right {1130  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1131}1132.peach-overlay-view.ov-exit-right {1133  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1134}11351136@keyframes ov-enter-up {1137  from { opacity: 0; transform: translateY(18px); }1138  to   { opacity: 1; transform: translateY(0); }1139}1140@keyframes ov-exit-up {1141  from { opacity: 1; transform: translateY(0); }1142  to   { opacity: 0; transform: translateY(-12px); }1143}1144@keyframes ov-enter-right {1145  from { opacity: 0; transform: translateX(20px); }1146  to   { opacity: 1; transform: translateX(0); }1147}1148@keyframes ov-exit-right {1149  from { opacity: 1; transform: translateX(0); }1150  to   { opacity: 0; transform: translateX(20px); }1151}11521153/* Overlay shared header */1154.peach-overlay-header {1155  padding: 10px 12px 8px;1156  display: flex;1157  align-items: center;1158  gap: 10px;1159  flex-shrink: 0;1160}1161/* Back button — circular pill matching the settings stack masthead (.stk-back) */1162.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1163  width: 28px;1164  height: 28px;1165  flex: 0 0 28px;1166  border-radius: 999px;1167  border: 1px solid var(--peach-border);1168  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1169  color: var(--peach-t1);1170  padding: 0;1171}1172.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1173  color: var(--peach-t0);1174  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1175  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1176}1177.peach-overlay-title {1178  font-family: var(--font-display);1179  font-style: italic;1180  font-weight: 400;1181  font-size: 20px;1182  line-height: 1;1183  color: var(--peach-t0);1184  flex: 1;1185  text-align: center;1186}1187/* Balances the 28px back button so the title stays visually centred */1188.peach-overlay-spacer {1189  width: 28px;1190  flex: 0 0 28px;1191}11921193.peach-overlay-card {1194  background: var(--peach-s1);1195  border: 1px solid var(--peach-t3);1196  border-radius: 12px;1197  overflow: hidden;1198  width: 100%;1199}12001201.peach-onboarding-alt-actions {1202  display: flex;1203  flex-direction: column;1204  gap: 4px;1205  padding: 0;1206}12071208.peach-settings-copy {1209  margin: 0 0 10px;1210  font-size: 0.6875rem;1211  line-height: 1.5;1212  color: var(--peach-t2);1213}12141215.peach-settings-copy strong {1216  color: var(--peach-t0);1217}12181219.peach-settings-copy--spacious {1220  margin-bottom: 12px;1221}12221223.peach-settings-copy--result {1224  color: var(--peach-accent);1225  font-size: 0.8125rem;1226  text-align: center;1227  padding: 8px 0;1228}12291230.peach-settings-copy--danger {1231  color: var(--peach-breach);1232}12331234.peach-settings-copy--success {1235  color: var(--peach-accent);1236}12371238.peach-inline-feedback {1239  font-size: 0.6875rem;1240  margin: 10px 0 0;1241}12421243.peach-inline-feedback--ok {1244  color: var(--peach-accent);1245}12461247.peach-inline-feedback--error {1248  color: var(--peach-breach);1249}12501251.peach-inline-feedback--muted {1252  color: var(--peach-t2);1253  font-size: 0.625rem;1254  margin: 4px 0;1255}12561257.peach-inline-feedback--spaced {1258  margin-top: 12px;1259}12601261.peach-settings-actions--row {1262  display: flex;1263  gap: 6px;1264}12651266.peach-settings-actions--end {1267  margin-top: 14px;1268  justify-content: flex-end;1269}12701271.peach-settings-stack {1272  display: flex;1273  flex-direction: column;1274  gap: 6px;1275}12761277.peach-settings-stack--tight {1278  gap: 4px;1279}12801281.peach-settings-stack--spacious {1282  gap: 8px;1283}12841285.peach-settings-input {1286  width: 100%;1287  box-sizing: border-box;1288  padding: 8px 10px;1289  background: rgba(0, 0, 0, 0.22);1290  border: 1px solid transparent;1291  border-radius: 6px;1292  color: var(--peach-t0);1293  font-family: var(--font-ui);1294  font-size: 0.75rem;1295  outline: none;1296  transition: border-color 120ms ease, background 120ms ease;1297}12981299.peach-settings-input:focus {1300  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1301  background: rgba(0, 0, 0, 0.28);1302}13031304.peach-settings-input[type="password"] {1305  font-family: var(--font-mono);1306  letter-spacing: 0.04em;1307}13081309.peach-hidden-file-input {1310  display: none;1311}13121313.peach-checkbox-note {1314  display: flex;1315  align-items: flex-start;1316  gap: 8px;1317  font-size: 0.6875rem;1318  color: var(--peach-t1);1319  cursor: pointer;1320  margin: 12px 0;1321}13221323.peach-checkbox-note input {1324  margin-top: 1px;1325}13261327.peach-danger-notice {1328  background: rgba(220, 80, 60, 0.08);1329  border: 1px solid rgba(220, 80, 60, 0.2);1330  border-radius: 6px;1331  padding: 9px 11px;1332  font-size: 0.6875rem;1333  color: var(--peach-t1);1334  line-height: 1.5;1335}13361337.peach-info-notice {1338  font-size: 0.6875rem;1339  color: var(--peach-t1);1340  line-height: 1.5;1341  background: var(--surface-card);1342  border: 1px solid var(--peach-t3);1343  border-radius: 6px;1344  padding: 8px 10px;1345}13461347.peach-info-notice--warn {1348  border-color: rgba(220, 38, 38, 0.4);1349  background: rgba(220, 38, 38, 0.06);1350  color: rgba(220, 38, 38, 0.92);1351  margin-bottom: 8px;1352}13531354/* Warm helpful-context note — reads as a soft aside, not an alert. */1355.peach-info-notice--note {1356  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);1357  border-color: color-mix(in srgb, var(--peach-accent) 18%, transparent);1358  color: var(--peach-t2);1359}13601361.peach-strength-row {1362  display: flex;1363  align-items: center;1364  gap: 8px;1365  margin-bottom: 10px;1366}13671368.peach-strength-track {1369  flex: 1;1370  height: 4px;1371  background: var(--peach-s2);1372  border-radius: 2px;1373  overflow: hidden;1374}13751376.peach-strength-fill {1377  height: 100%;1378  border-radius: 2px;1379  transition: width 120ms ease, background 120ms ease;1380}13811382/* ── Type selector tabs ── */1383.peach-type-tabs {1384  display: flex;1385  gap: 0;1386  background: var(--peach-t4);1387  border-radius: 8px;1388  padding: 3px;1389}13901391.peach-type-tab {1392  flex: 1;1393  display: flex;1394  align-items: center;1395  justify-content: center;1396  gap: 6px;1397  padding: 6px 10px;1398  border-radius: 6px;1399  border: none;1400  background: transparent;1401  cursor: pointer;1402  font-family: Inter, system-ui, sans-serif;1403  font-size: 0.6875rem;1404  font-weight: 400;1405  letter-spacing: 0.04em;1406  color: var(--peach-t1);1407  transition: background 150ms ease, color 150ms ease;1408}14091410.peach-type-tab.is-active {1411  background: var(--peach-s2);1412  color: var(--peach-t0);1413  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1414}14151416.peach-type-tab:not(.is-active):hover {1417  color: var(--peach-t0);1418}14191420.peach-type-tab svg {1421  opacity: 0.7;1422  flex-shrink: 0;1423}14241425.peach-type-tab.is-active svg {1426  opacity: 1;1427}14281429/* ── List view ───────────────────────────────────────────────────────── */1430.peach-list-top {1431  padding: 0 10px;1432  min-height: 46px;1433  display: flex;1434  align-items: center;1435  gap: 6px;1436  border-bottom: 1px solid var(--peach-t3);1437  flex-shrink: 0;1438  background: var(--peach-s1);1439}14401441.peach-vault-list {1442  flex: 1;1443  overflow-y: auto;1444  scrollbar-width: none;1445}1446.peach-vault-list::-webkit-scrollbar { display: none; }14471448/* Scrollbar — vault list */1449.peach-vault-list {1450  scrollbar-width: thin;1451  scrollbar-color: var(--peach-t3) transparent;1452}14531454.peach-vault-list::-webkit-scrollbar {1455  width: 3px;1456}14571458.peach-vault-list::-webkit-scrollbar-thumb {1459  background: var(--peach-t3);1460  border-radius: 2px;1461}14621463.peach-entry-row {1464  width: 100%;1465  display: flex;1466  align-items: center;1467  gap: 10px;1468  padding: 9px 16px;1469  background: transparent;1470  border: none;1471  border-bottom: 1px solid var(--peach-t3);1472  cursor: pointer;1473  color: inherit;1474  text-align: left;1475  transition: background 80ms ease;1476}1477.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1478.peach-entry-row:last-child { border-bottom: none; }1479.peach-entry-row.is-active {1480  box-shadow: inset 2px 0 0 var(--peach-accent);1481  background: rgba(240,232,216,0.03);1482}1483.peach-entry-row:focus-visible {1484  outline: none;1485  box-shadow: 0 0 0 1px var(--peach-border-accent);1486  background: rgba(240,232,216,0.03);1487}1488.peach-entry-row-icon {1489  width: 26px; height: 26px;1490  border-radius: 7px;1491  border: 1px solid var(--peach-t3);1492  display: flex; align-items: center; justify-content: center;1493  color: var(--peach-t2);1494  flex-shrink: 0;1495}1496.peach-entry-row-icon.is-breach {1497  border-color: rgba(220,80,60,0.3);1498  color: rgba(220,80,60,0.7);1499}15001501/* Title-initials chip used as the favicon fallback for login entries whose1502 * real favicon hasn't been cached by the browser yet (freshly-imported,1503 * never-visited domains). Background colour is hashed from the title so1504 * the same entry always shows the same chip. The chip fits the same1505 * 26×26 row icon slot the favicon would take. */1506.peach-favicon-initials {1507  display: inline-flex;1508  align-items: center;1509  justify-content: center;1510  width: 100%;1511  height: 100%;1512  border-radius: 4px;1513  font-family: "IBM Plex Mono", monospace;1514  font-size: 0.5625rem;1515  font-weight: 600;1516  letter-spacing: 0.04em;1517  color: rgba(240, 232, 216, 0.92);1518  text-transform: uppercase;1519  user-select: none;1520}1521.peach-entry-row-info { flex: 1; min-width: 0; }1522.peach-entry-row-name {1523  display: block;1524  font-family: var(--font-display);1525  font-size: 1.0625rem;1526  font-style: italic;1527  font-weight: 400;1528  color: var(--peach-t0);1529  line-height: 1.2;1530  white-space: nowrap;1531  overflow: hidden;1532  text-overflow: ellipsis;1533}1534.peach-entry-row-meta {1535  display: block;1536  font-family: "IBM Plex Mono", monospace;1537  font-size: 0.5625rem;1538  color: var(--peach-t2);1539  margin-top: 1px;1540  letter-spacing: 0.05em;1541}1542.peach-entry-row-dot {1543  width: 5px; height: 5px;1544  border-radius: 50%;1545  background: rgba(220,80,60,0.7);1546  flex-shrink: 0;1547}1548.peach-new-entry-row {1549  display: flex;1550  align-items: center;1551  justify-content: center;1552  gap: 6px;1553  width: 100%;1554  padding: 11px;1555  background: transparent;1556  border: none;1557  border-top: 1px solid var(--peach-t3);1558  color: var(--peach-t2);1559  font-family: "IBM Plex Mono", monospace;1560  font-size: 0.5625rem;1561  text-transform: uppercase;1562  letter-spacing: 0.14em;1563  cursor: pointer;1564  flex-shrink: 0;1565  transition: color 120ms ease, background 120ms ease;1566}1567.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }15681569/* ── Multi-select mode ─────────────────────────────────────────────── */15701571/* Select-mode trigger button in sort bar — same shape as trash btn */1572.peach-sort-select-btn {1573  display: flex;1574  align-items: center;1575  justify-content: center;1576  padding: 3px 5px;1577  background: transparent;1578  border: none;1579  cursor: pointer;1580  color: var(--peach-t2);1581  border-radius: 4px;1582  transition: color 140ms ease, background 140ms ease;1583}1584.peach-sort-select-btn:hover {1585  color: var(--peach-t1);1586  background: var(--peach-t3);1587}15881589/* Sort bar in select mode */1590.peach-select-cancel-btn {1591  background: transparent;1592  border: none;1593  padding: 0 4px;1594  cursor: pointer;1595  font-family: "IBM Plex Mono", monospace;1596  font-size: 0.5625rem;1597  letter-spacing: 0.12em;1598  text-transform: uppercase;1599  color: var(--peach-t2);1600  transition: color 140ms ease;1601  flex-shrink: 0;1602}1603.peach-select-cancel-btn:hover { color: var(--peach-t0); }16041605.peach-select-count-label {1606  flex: 1;1607  text-align: center;1608  font-family: "IBM Plex Mono", monospace;1609  font-size: 0.5625rem;1610  letter-spacing: 0.14em;1611  text-transform: uppercase;1612  color: var(--peach-t1);1613}16141615.peach-select-all-btn {1616  background: transparent;1617  border: none;1618  padding: 0 4px;1619  cursor: pointer;1620  font-family: "IBM Plex Mono", monospace;1621  font-size: 0.5625rem;1622  letter-spacing: 0.12em;1623  text-transform: uppercase;1624  color: var(--peach-t2);1625  transition: color 140ms ease;1626  flex-shrink: 0;1627}1628.peach-select-all-btn:hover { color: var(--peach-accent); }16291630/* List in select mode */1631.peach-vault-list.is-selecting .peach-entry-row {1632  cursor: default;1633}1634.peach-vault-list.is-selecting .peach-entry-row:hover {1635  background: rgba(240,232,216,0.02);1636}1637.peach-vault-list.is-selecting .peach-entry-row.is-selected {1638  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1639}1640.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1641  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1642}16431644/* Select indicator circles in icon slot */1645.peach-entry-row-icon.is-select-icon {1646  color: var(--peach-t2);1647}1648.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1649  color: var(--peach-accent);1650}16511652/* Delete action bar at bottom (replaces new-entry row) */1653.peach-select-action-bar {1654  display: flex;1655  align-items: center;1656  justify-content: center;1657  gap: 7px;1658  width: 100%;1659  padding: 11px;1660  background: transparent;1661  border: none;1662  border-top: 1px solid var(--peach-t3);1663  color: var(--peach-t1);1664  font-family: "IBM Plex Mono", monospace;1665  font-size: 0.5625rem;1666  text-transform: uppercase;1667  letter-spacing: 0.14em;1668  cursor: pointer;1669  flex-shrink: 0;1670  transition: color 120ms ease, background 120ms ease;1671}1672.peach-select-action-bar:not(:disabled):hover {1673  color: var(--peach-t0);1674  background: rgba(220,80,60,0.06);1675}1676.peach-select-action-bar:not(:disabled):hover svg {1677  stroke: rgba(220,80,60,0.8);1678}1679.peach-select-action-bar:disabled,1680.peach-select-action-bar.is-empty {1681  color: var(--peach-t2);1682  cursor: default;1683  opacity: 0.5;1684}1685.peach-search-counter-list {1686  white-space: nowrap;1687  flex-shrink: 0;1688}1689.peach-list-empty {1690  min-height: 180px;1691  display: grid;1692  place-items: center;1693  color: var(--peach-t2);1694  font-family: "IBM Plex Mono", monospace;1695  font-size: 0.6875rem;1696}16971698/* ── Settings view ───────────────────────────────────────────────────── */1699.peach-settings-body {1700  flex: 1;1701  overflow-y: auto;1702  min-height: 0;1703  display: flex;1704  flex-direction: column;1705  padding: 2px 0 10px;1706}1707.peach-settings-group {1708  margin: 4px 10px;1709  padding: 9px 14px 11px;1710  border-radius: 12px;1711  border: 1px solid rgba(255, 255, 255, 0.07);1712  background: rgba(26, 20, 16, 0.60);1713  backdrop-filter: blur(10px) saturate(1.3);1714  -webkit-backdrop-filter: blur(10px) saturate(1.3);1715}17161717.peach-settings-group + .peach-settings-group {1718  margin-top: 6px;1719}17201721@supports not (backdrop-filter: blur(1px)) {1722  .peach-settings-group {1723    background: rgba(26, 20, 16, 0.90);1724    border-color: rgba(255, 255, 255, 0.09);1725    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1726  }1727}17281729.light .peach-settings-group,1730[data-theme="light"] .peach-settings-group {1731  background: rgba(245, 237, 226, 0.70);1732  border-color: rgba(26, 18, 8, 0.08);1733  backdrop-filter: blur(10px) saturate(1.2);1734  -webkit-backdrop-filter: blur(10px) saturate(1.2);1735}17361737@supports not (backdrop-filter: blur(1px)) {1738  .light .peach-settings-group,1739  [data-theme="light"] .peach-settings-group {1740    background: rgba(245, 237, 226, 0.97);1741    border-color: rgba(26, 18, 8, 0.10);1742  }1743}1744.peach-export-intro {1745  padding-bottom: 8px;1746}1747.peach-export-card {1748  display: grid;1749  gap: 10px;1750}1751.peach-rune-canvas {1752  border-radius: 8px;1753  background: rgba(0, 0, 0, 0.22);1754  flex: 1;1755  align-self: center;1756}1757.peach-script-input {1758  font-family: "PeachScript", monospace;1759  font-size: 0.6875rem;1760  line-height: 1.9;1761  letter-spacing: 0.06em;1762  color: var(--peach-t0);1763  background: rgba(0, 0, 0, 0.22);1764  border: none;1765  border-radius: 6px;1766  padding: 12px;1767  width: 100%;1768  min-height: 96px;1769  resize: vertical;1770  word-break: break-all;1771  scrollbar-width: none;1772  -ms-overflow-style: none;1773}17741775.peach-script-input::-webkit-scrollbar { display: none; }1776.peach-csv-warning {1777  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1778  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1779  color: var(--peach-t0);1780  border-radius: 6px;1781  padding: 10px 12px;1782  margin-bottom: 8px;1783  font-size: 0.75rem;1784  line-height: 1.45;1785}1786.peach-export-card--primary {1787  background:1788    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1789}17901791/* Export menu — distribute the three format cards across the popup. */1792.peach-export-menu {1793  display: flex;1794  flex-direction: column;1795  flex: 1;1796  min-height: 0;1797}1798.peach-export-menu .peach-settings-group {1799  flex: 1;1800  display: flex;1801  flex-direction: column;1802  justify-content: center;1803  gap: 10px;1804}18051806/* Result view — the script-string fills the remaining vertical surface. */1807.peach-export-result-group {1808  flex: 1;1809  display: flex;1810  flex-direction: column;1811  min-height: 0;1812  border-bottom: none;1813}1814.peach-export-result-group .peach-export-card {1815  flex: 1;1816  min-height: 0;1817  display: flex;1818  flex-direction: column;1819  gap: 10px;1820}1821.peach-export-result-group .peach-export-card-copy {1822  flex-shrink: 0;1823}1824.peach-export-result-group .peach-settings-label {1825  flex-shrink: 0;1826}1827.peach-export-result-group button {1828  flex-shrink: 0;1829}1830.peach-export-card-head {1831  display: flex;1832  align-items: center;1833  justify-content: space-between;1834  gap: 10px;1835}1836.peach-export-card-copy {1837  margin: 0;1838  font-size: 0.75rem;1839  line-height: 1.55;1840  color: var(--peach-t1);1841}1842.peach-export-note {1843  margin: 0;1844  font-size: 0.625rem;1845  line-height: 1.5;1846  color: var(--peach-t2);1847}1848.peach-export-strength-track {1849  height: 3px;1850  background: var(--peach-border);1851  border-radius: 2px;1852  margin: 4px 0 2px;1853  overflow: hidden;1854}1855.peach-export-strength-fill {1856  height: 100%;1857  border-radius: 2px;1858  transition: width 250ms ease, background 250ms ease;1859}1860.peach-export-strength-warn {1861  margin: 0;1862  font-size: 0.625rem;1863  line-height: 1.5;1864  color: #e84040;1865  font-family: "IBM Plex Mono", monospace;1866}1867.peach-export-strength-hint {1868  margin: 0;1869  font-size: 0.625rem;1870  line-height: 1.5;1871  color: var(--peach-t2);1872  font-family: "IBM Plex Mono", monospace;1873}1874.peach-export-pill {1875  display: inline-flex;1876  align-items: center;1877  padding: 4px 8px;1878  border-radius: 999px;1879  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1880  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1881  color: var(--peach-accent);1882  font-family: "IBM Plex Mono", monospace;1883  font-size: 0.5rem;1884  letter-spacing: 0.12em;1885  text-transform: uppercase;1886  white-space: nowrap;1887}1888.peach-export-pill--danger {1889  border-color: rgba(220,80,60,0.22);1890  background: rgba(220,80,60,0.08);1891  color: var(--peach-breach);1892}1893.peach-settings-label {1894  margin: 0 0 6px;1895  font-family: "IBM Plex Mono", monospace;1896  font-size: 0.5rem;1897  text-transform: uppercase;1898  letter-spacing: 0.18em;1899  color: var(--peach-t2);1900}1901.peach-settings-row {1902  display: flex;1903  align-items: center;1904  justify-content: space-between;1905  gap: 12px;1906  min-height: 34px;1907  padding: 6px 0;1908  font-size: 0.8125rem;1909  color: var(--peach-t1);1910}1911.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1912.peach-settings-value {1913  font-family: "IBM Plex Mono", monospace;1914  font-size: 0.625rem;1915  color: var(--peach-t2);1916}19171918.peach-settings-value--status {1919  display: flex;1920  align-items: center;1921  gap: 6px;1922}19231924.peach-settings-link {1925  font-family: "IBM Plex Mono", monospace;1926  font-size: 0.625rem;1927  color: var(--peach-accent);1928  text-decoration: none;1929  cursor: pointer;1930}1931.peach-settings-link:hover {1932  text-decoration: underline;1933}19341935.peach-settings-row--stack {1936  flex-direction: column;1937  align-items: stretch;1938  gap: 6px;1939}19401941.peach-settings-row--top {1942  align-items: flex-start;1943}19441945.peach-settings-row-main {1946  display: flex;1947  flex-direction: column;1948  gap: 4px;1949  flex: 1;1950}1951.peach-toggle {1952  width: 28px; height: 16px;1953  border-radius: 999px;1954  background: var(--peach-t3);1955  border: 1px solid var(--peach-t3);1956  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1957  flex-shrink: 0;1958  transition: background 200ms ease, border-color 200ms ease;1959  cursor: pointer;1960}1961.peach-toggle.is-on {1962  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1963  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1964}1965.peach-toggle-knob {1966  width: 10px; height: 10px;1967  border-radius: 50%;1968  background: var(--peach-t2);1969  flex-shrink: 0;1970  transform: translateX(0px);1971  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1972}1973.peach-toggle.is-on .peach-toggle-knob {1974  background: var(--peach-accent);1975  transform: translateX(12px);1976}1977.peach-settings-footer {1978  display: flex;1979  align-items: center;1980  gap: 8px;1981  margin-top: auto;1982  padding: 14px 16px 8px;1983  font-family: "IBM Plex Mono", monospace;1984  font-size: 0.5625rem;1985  color: var(--peach-t2);1986}19871988/* ── Settings home navigation ──────────────────────────────────────────── */1989.peach-settings-nav-label {1990  margin: 0 0 2px;1991  padding: 12px 16px 4px;1992  font-family: "IBM Plex Mono", monospace;1993  font-size: 0.5rem;1994  text-transform: uppercase;1995  letter-spacing: 0.18em;1996  color: var(--peach-t2);1997}19981999.peach-settings-cat-row {2000  display: flex;2001  align-items: center;2002  gap: 10px;2003  width: 100%;2004  padding: 9px 16px;2005  background: none;2006  border: none;2007  border-bottom: 1px solid var(--peach-t3);2008  cursor: pointer;2009  text-align: left;2010  color: inherit;2011  transition: background var(--peach-dur-80) ease;2012}2013.peach-settings-cat-row:hover {2014  background: var(--peach-t3);2015}2016.peach-settings-cat-row:last-child {2017  border-bottom: none;2018}20192020.peach-settings-cat-icon {2021  width: 28px;2022  height: 28px;2023  border-radius: 7px;2024  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2025  color: var(--peach-accent);2026  display: flex;2027  align-items: center;2028  justify-content: center;2029  flex-shrink: 0;2030}2031/* Light theme: peach-on-cream is too low-contrast — both colors are warm.2032   Darken the icon stroke to ink and bump the bg tint so the icon reads2033   sharply while the cell still feels accent-tinted. */2034.light .peach-settings-cat-icon {2035  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);2036  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));2037}20382039.peach-settings-cat-content {2040  flex: 1;2041  display: flex;2042  flex-direction: column;2043  gap: 2px;2044  min-width: 0;2045}20462047.peach-settings-cat-name {2048  font-size: 0.8125rem;2049  font-weight: 450;2050  color: var(--peach-t0);2051  line-height: 1.2;2052}20532054.peach-settings-cat-desc {2055  font-size: 0.625rem;2056  color: var(--peach-t2);2057  line-height: 1.3;2058  white-space: nowrap;2059  overflow: hidden;2060  text-overflow: ellipsis;2061}20622063.peach-settings-cat-chevron {2064  color: var(--peach-t2);2065  flex-shrink: 0;2066  opacity: 0.5;2067}20682069/* ── Settings sub-view section labels ──────────────────────────────────── */2070.peach-settings-sub-label {2071  margin: 12px 0 4px;2072  font-family: "IBM Plex Mono", monospace;2073  font-size: 0.5rem;2074  text-transform: uppercase;2075  letter-spacing: 0.18em;2076  color: var(--peach-t2);2077}2078.peach-settings-sub-label:first-child {2079  margin-top: 4px;2080}20812082/* ── Settings: collapsible Advanced section ─────────────────────────────── */2083.peach-settings-advanced-toggle {2084  display: flex;2085  align-items: center;2086  justify-content: space-between;2087  width: 100%;2088  background: none;2089  border: none;2090  cursor: pointer;2091  padding: 12px 0 4px;2092  margin: 0;2093  color: inherit;2094}2095.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {2096  color: var(--peach-t1);2097}2098.peach-settings-advanced-chevron {2099  font-size: 0.5625rem;2100  color: var(--peach-t3);2101  letter-spacing: 0;2102  transition: color 120ms ease;2103}21042105/* ── Feedback form ──────────────────────────────────────────────────────── */2106.peach-feedback-group {2107  flex: 1;2108  display: flex;2109  flex-direction: column;2110  border-bottom: none;2111}21122113.peach-feedback-intro {2114  margin: 4px 0 14px;2115  font-size: 0.75rem;2116  line-height: 1.55;2117  color: var(--peach-t1);2118}21192120.peach-feedback-chips {2121  display: flex;2122  flex-wrap: wrap;2123  gap: 6px;2124  margin-bottom: 14px;2125}21262127.peach-feedback-chip {2128  padding: 4px 10px;2129  border-radius: 999px;2130  border: 1px solid var(--peach-t3);2131  background: none;2132  color: var(--peach-t2);2133  font-size: 0.6875rem;2134  font-family: var(--font-ui);2135  cursor: pointer;2136  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2137    background var(--peach-dur-80) ease;2138}2139.peach-feedback-chip:hover {2140  border-color: var(--peach-t2);2141  color: var(--peach-t1);2142}2143.peach-feedback-chip.is-active {2144  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);2145  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));2146  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);2147  box-shadow:2148    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),2149    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);2150  font-weight: 700;2151}21522153.peach-feedback-textarea {2154  flex: 1;2155  width: 100%;2156  min-height: 120px;2157  box-sizing: border-box;2158  background: rgba(0, 0, 0, 0.22);2159  border: 1px solid transparent;2160  border-radius: 6px;2161  color: var(--peach-t0);2162  font-size: 0.75rem;2163  font-family: var(--font-ui);2164  line-height: 1.5;2165  padding: 8px 10px;2166  resize: none;2167  outline: none;2168  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2169}2170.peach-feedback-textarea:focus {2171  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2172  background: rgba(0, 0, 0, 0.28);2173}2174.peach-feedback-textarea:focus {2175  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2176}2177.peach-feedback-textarea::placeholder {2178  color: var(--peach-t2);2179}21802181.peach-feedback-meta {2182  margin: 6px 0 0;2183  font-size: 0.625rem;2184  color: var(--peach-t2);2185  font-family: "IBM Plex Mono", monospace;2186}21872188.peach-feedback-result {2189  margin: 8px 0 0;2190  font-size: 0.6875rem;2191  font-family: "IBM Plex Mono", monospace;2192}2193.peach-feedback-result--ok { color: var(--peach-sync-ok); }2194.peach-feedback-result--err { color: var(--peach-breach); }21952196.peach-feedback-submit {2197  width: 100%;2198  margin-top: 12px;2199  justify-content: center;2200}22012202.peach-feedback-anon {2203  margin: 8px 0 0;2204  font-size: 0.625rem;2205  color: var(--peach-t2);2206  text-align: center;2207}22082209.peach-feedback-thanks {2210  margin: auto 0;2211  padding: 18px 14px;2212  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);2213  border-radius: 8px;2214  background:2215    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),2216    rgba(0, 0, 0, 0.18);2217  color: var(--peach-t1);2218  text-align: center;2219}22202221.peach-feedback-thanks p {2222  margin: 0;2223  font-size: 0.75rem;2224  line-height: 1.5;2225}22262227.peach-feedback-thanks-title {2228  color: var(--peach-t0);2229  font-family: "Cormorant Garamond", serif;2230  font-size: 1.375rem !important;2231  line-height: 1.1 !important;2232  margin-bottom: 8px !important;2233}22342235.peach-passkey-badge {2236  margin-left: 8px;2237  font-size: 0.625rem;2238  letter-spacing: 0.06em;2239  text-transform: uppercase;2240  color: var(--peach-t2);2241  font-family: var(--font-ui);2242  vertical-align: middle;2243}22442245.peach-passkey-delete-btn {2246  color: var(--peach-breach);2247  border-color: rgba(229, 85, 85, 0.25);2248}22492250.peach-passkey-delete-confirm {2251  display: flex;2252  align-items: center;2253  gap: 8px;2254  padding: 8px 10px;2255  background: rgba(229, 85, 85, 0.06);2256  border: 1px solid rgba(229, 85, 85, 0.2);2257  border-radius: 6px;2258}22592260.peach-passkey-delete-confirm-copy {2261  flex: 1;2262  font-size: 0.6875rem;2263  color: var(--peach-t1);2264}22652266.peach-passkey-delete-btn--confirm {2267  color: var(--peach-breach);2268  border-color: rgba(229, 85, 85, 0.4);2269}22702271.peach-passkey-activity {2272  flex-direction: column;2273  align-items: flex-start;2274  gap: 4px;2275}22762277.peach-passkey-meta {2278  font-size: 0.6875rem;2279  color: var(--peach-t2);2280}22812282.peach-passkey-actions {2283  position: relative;2284  z-index: 1;2285  margin-top: 14px;2286  display: flex;2287  flex-direction: column;2288  gap: 8px;2289}22902291.peach-passkey-approval {2292  display: flex;2293  flex-direction: column;2294  align-items: center;2295  padding: 16px 20px 14px;2296  gap: 8px;2297  text-align: center;2298}22992300.peach-passkey-approval-icon {2301  width: 36px;2302  height: 36px;2303  border-radius: 10px;2304  background: var(--peach-s2);2305  border: 1px solid var(--peach-t3);2306  display: flex;2307  align-items: center;2308  justify-content: center;2309  flex-shrink: 0;2310  color: var(--peach-accent);2311}23122313.peach-passkey-approval-icon img,2314.peach-passkey-approval-icon svg {2315  width: 22px;2316  height: 22px;2317  border-radius: 5px;2318}23192320.peach-passkey-approval-rp {2321  font-family: var(--font-ui);2322  font-size: 0.75rem;2323  color: var(--peach-t2);2324  letter-spacing: 0.03em;2325}23262327.peach-passkey-approval-action {2328  font-family: var(--font-display);2329  font-style: italic;2330  font-weight: 300;2331  font-size: 18px;2332  color: var(--peach-t0);2333  line-height: 1.1;2334  margin: 1px 0;2335}23362337.peach-passkey-approval-user {2338  font-family: var(--font-mono);2339  font-size: 0.6875rem;2340  color: var(--peach-t1);2341  background: var(--peach-s2);2342  border: 1px solid var(--peach-t3);2343  border-radius: 4px;2344  padding: 3px 8px;2345}23462347.peach-passkey-approval-notice {2348  font-size: 0.625rem;2349  color: var(--peach-t2);2350  line-height: 1.5;2351  max-width: 220px;2352}23532354.peach-passkey-approval-actions {2355  display: flex;2356  gap: 8px;2357  width: 100%;2358  margin-top: 6px;2359}23602361.peach-passkey-approval-actions .peach-btn {2362  flex: 1;2363}23642365/* ── Inline generator drawer ── */2366.peach-generator-drawer {2367  display: grid;2368  grid-template-rows: 0fr;2369  transition: grid-template-rows 320ms var(--peach-curve-arrival);2370  overflow: hidden;2371}2372.peach-generator-drawer.is-open {2373  grid-template-rows: 1fr;2374}2375.peach-generator-drawer-inner {2376  min-height: 0;2377  overflow: hidden;2378}2379.peach-generator-drawer-content {2380  border-top: 1px solid var(--peach-t3);2381  padding: 8px 0 4px;2382  display: flex;2383  flex-direction: column;2384  gap: 8px;2385}23862387/* ── Compact generator (inside entry edit) ── */2388.peach-generator-drawer-content--compact {2389  border-top: 1px solid var(--peach-t3);2390  padding: 8px 0 2px;2391  gap: 7px;2392}2393.peach-pwgen-compact-display-row {2394  display: flex;2395  align-items: center;2396  gap: 6px;2397}2398.peach-pwgen-compact-output {2399  flex: 1;2400  min-width: 0;2401  font-family: "IBM Plex Mono", monospace;2402  font-size: 0.6875rem;2403  font-weight: 400;2404  letter-spacing: 0.04em;2405  color: var(--peach-t0);2406  background: rgba(240, 232, 216, 0.04);2407  border: 1px solid var(--peach-t3);2408  border-radius: 5px;2409  padding: 5px 8px;2410  line-height: 1.5;2411  outline: none;2412  transition: border-color 120ms ease;2413}24142415.peach-pwgen-compact-output:focus {2416  border-color: var(--peach-t1);2417}2418.peach-pwgen-compact-controls {2419  display: flex;2420  align-items: center;2421  gap: 6px;2422}2423.peach-pwgen-compact-slider {2424  flex: 1;2425  min-width: 0;2426  height: 2px !important;2427}2428.peach-pwgen-compact-controls .peach-pwgen-len-num {2429  flex-shrink: 0;2430  min-width: 18px;2431  text-align: right;2432}2433.peach-pwgen-compact-pills {2434  display: flex;2435  gap: 3px;2436  flex-shrink: 0;2437}2438.peach-pwgen-compact-pills .peach-pwgen-pill {2439  padding: 2px 7px;2440  font-size: 0.5rem;2441}2442.peach-pwgen-compact-use {2443  flex-shrink: 0;2444  font-size: 0.625rem !important;2445  padding: 3px 9px !important;2446  min-height: 22px !important;2447  border-radius: 5px !important;2448}24492450/* ── Password edit row (input + eye toggle side-by-side) ── */2451.peach-password-edit-row {2452  display: flex;2453  align-items: center;2454  gap: 6px;2455}2456.peach-password-edit-row .peach-inline-input {2457  flex: 1;2458  min-width: 0;2459}24602461/* ── Generate toggle link ── */2462.peach-generate-toggle-link {2463  display: inline-flex;2464  align-items: center;2465  gap: 5px;2466  background: none;2467  border: none;2468  padding: 0;2469  cursor: pointer;2470  font-family: "IBM Plex Mono", monospace;2471  font-size: 0.625rem;2472  color: var(--peach-t2);2473  letter-spacing: 0.04em;2474  transition: color 120ms ease;2475  align-self: flex-start;2476}2477.peach-generate-toggle-link:hover {2478  color: var(--peach-accent);2479}24802481/* Holds the generate + history toggle links on one row under the editor. */2482.peach-password-edit-links {2483  display: flex;2484  align-items: center;2485  gap: 14px;2486  flex-wrap: wrap;2487}24882489/* ── Past-password history list ── */2490.peach-password-history {2491  display: grid;2492  gap: 4px;2493  margin-top: 2px;2494  max-height: 168px;2495  overflow-y: auto;2496  scrollbar-width: thin;2497}2498.peach-history-row {2499  display: flex;2500  align-items: center;2501  justify-content: space-between;2502  gap: 8px;2503  padding: 5px 7px;2504  border-radius: 7px;2505  background: color-mix(in srgb, var(--peach-accent) 5%, transparent);2506  border: 1px solid color-mix(in srgb, var(--peach-accent) 9%, transparent);2507}2508.peach-history-main {2509  display: flex;2510  flex-direction: column;2511  gap: 1px;2512  min-width: 0;2513  flex: 1;2514}2515.peach-history-pw {2516  font-family: "IBM Plex Mono", monospace;2517  font-size: 0.6875rem;2518  color: var(--peach-t1);2519  white-space: nowrap;2520  overflow: hidden;2521  text-overflow: ellipsis;2522}2523.peach-history-pw .peach-password-mask {2524  letter-spacing: 0.08em;2525  color: var(--peach-t2);2526}2527.peach-history-age {2528  font-family: "IBM Plex Mono", monospace;2529  font-size: 0.5625rem;2530  color: var(--peach-t3, var(--peach-t2));2531  letter-spacing: 0.03em;2532}2533.peach-history-actions {2534  display: flex;2535  align-items: center;2536  gap: 2px;2537  flex-shrink: 0;2538}2539.peach-history-use {2540  font-family: "IBM Plex Mono", monospace;2541  font-size: 0.5625rem;2542  letter-spacing: 0.05em;2543  padding: 3px 7px;2544}2545.peach-history-empty {2546  font-family: "IBM Plex Mono", monospace;2547  font-size: 0.625rem;2548  line-height: 1.45;2549  color: var(--peach-t2);2550  padding: 6px 8px;2551  border-radius: 7px;2552  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);2553  border: 1px solid color-mix(in srgb, var(--peach-accent) 8%, transparent);2554}25552556/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2557.peach-entry-body {2558  flex: 1;2559  overflow-y: auto;2560  overflow-x: hidden;2561  scrollbar-width: none;2562  -ms-overflow-style: none;2563  overscroll-behavior: contain;2564  display: grid;2565  gap: 10px;2566  align-content: start;2567  padding: 10px 20px 14px;2568  min-width: 0;2569  min-height: 0;2570}2571.peach-entry-body::-webkit-scrollbar { display: none; }25722573/* Type-toggle pills + inline note toolbar */2574.peach-new-type-row {2575  display: flex;2576  align-items: center;2577  gap: 6px;2578  margin-bottom: 2px;2579}2580.peach-new-type-btn {2581  background: transparent;2582  border: 1px solid var(--peach-t3);2583  border-radius: 12px;2584  padding: 3px 10px;2585  font-family: "IBM Plex Mono", monospace;2586  font-size: 0.5625rem;2587  letter-spacing: 0.12em;2588  text-transform: uppercase;2589  color: var(--peach-t2);2590  cursor: pointer;2591  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2592}2593.peach-new-type-btn.is-active {2594  color: var(--peach-t0);2595  border-color: var(--peach-accent);2596  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2597}2598.peach-new-type-btn:not(.is-active):hover {2599  color: var(--peach-t1);2600  border-color: var(--peach-t2);2601}26022603/* Editable title */2604.peach-new-title-wrap { margin: 0 0 2px; }2605.peach-new-title-input {2606  background: transparent;2607  border: none;2608  outline: none;2609  width: 100%;2610  color: var(--peach-t0);2611  font-family: var(--font-display);2612  font-style: italic;2613  font-weight: 400;2614  font-size: 40px;2615  line-height: 0.95;2616  caret-color: var(--peach-accent);2617}2618.peach-new-title-input::placeholder { color: var(--peach-t2); }26192620/* Editable domain field */2621.peach-domain-edit-row {2622  display: flex;2623  align-items: center;2624  gap: 6px;2625}26262627.peach-domain-edit-row .peach-domain-value--edit {2628  flex: 1;2629  width: 0;2630}26312632.peach-domain-url-btn {2633  flex-shrink: 0;2634  background: transparent;2635  border: none;2636  cursor: pointer;2637  color: var(--peach-t3);2638  padding: 2px 3px;2639  display: flex;2640  align-items: center;2641  line-height: 0;2642  border-radius: 3px;2643  transition: color 120ms ease;2644}26452646.peach-domain-url-btn:hover {2647  color: var(--peach-accent);2648}26492650.peach-domain-value--edit {2651  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2652  font-size: 0.625rem;2653  font-style: italic;2654  letter-spacing: 0.12em;2655  color: var(--peach-t1);2656  background: transparent;2657  border: none;2658  border-bottom: 1px solid var(--peach-t3);2659  outline: none;2660  width: 100%;2661  padding: 2px 0;2662  caret-color: var(--peach-accent);2663  transition: border-color 140ms ease, color 140ms ease;2664}2665.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2666.peach-domain-value--edit:focus {2667  border-bottom-color: rgba(240, 232, 216, 0.28);2668  color: var(--peach-t0);2669}26702671/* Editable field values (username, password, totp) */2672.peach-field-value--edit {2673  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2674  font-size: 0.8125rem;2675  color: var(--peach-t0);2676  background: transparent;2677  border: none;2678  border-bottom: 1px solid var(--peach-t3);2679  outline: none;2680  flex: 1;2681  min-width: 0;2682  padding: 3px 0;2683  caret-color: var(--peach-accent);2684  transition: border-color 140ms ease, color 140ms ease;2685}2686.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2687.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2688.peach-field-value--edit:focus {2689  border-bottom-color: rgba(240, 232, 216, 0.28);2690  color: var(--peach-t0);2691}26922693/* "+ add optional field" links */2694.peach-entry-add-links {2695  display: flex;2696  gap: 12px;2697  flex-wrap: wrap;2698  margin-top: -2px;2699}2700.peach-add-field-link {2701  background: transparent;2702  border: none;2703  padding: 0;2704  cursor: pointer;2705  font-family: "IBM Plex Mono", monospace;2706  font-size: 0.5625rem;2707  letter-spacing: 0.1em;2708  text-transform: uppercase;2709  color: var(--peach-t2);2710  transition: color 140ms ease;2711}2712.peach-add-field-link:hover { color: var(--peach-accent); }27132714/* ── New entry form (legacy classes) ────────────────────────────────── */2715.peach-new-body {2716  flex: 1;2717  overflow-y: auto;2718  padding: 10px 20px 14px;2719}2720.peach-new-name-input {2721  background: transparent;2722  border: none;2723  outline: none;2724  width: 100%;2725  color: var(--peach-t0);2726  font-family: var(--font-display);2727  font-style: italic;2728  font-weight: 400;2729  font-size: 40px;2730  line-height: 0.95;2731  caret-color: var(--peach-accent);2732}2733.peach-new-name-input::placeholder { color: var(--peach-t2); }2734.peach-new-field-input {2735  background: transparent;2736  border: none;2737  outline: none;2738  flex: 1;2739  min-width: 0;2740  caret-color: var(--peach-accent);2741}2742.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }27432744/* ── Canary card ── */2745.peach-canary-card {2746  border: 1px solid rgba(217, 160, 48, 0.2);2747  background: rgba(217, 160, 48, 0.03);2748  border-radius: 8px;2749  padding: 12px;2750}27512752.peach-canary-settings-header {2753  display: flex;2754  align-items: center;2755  justify-content: space-between;2756  cursor: pointer;2757  user-select: none;2758}27592760.peach-canary-card .peach-label {2761  color: rgba(217, 160, 48, 0.85);2762}27632764.peach-canary-card .peach-new-field-input {2765  border-color: rgba(217, 160, 48, 0.25);2766}27672768.peach-canary-card .peach-new-field-input:focus {2769  border-color: rgba(217, 160, 48, 0.5);2770}27712772.peach-canary-body {2773  margin-top: 12px;2774  display: flex;2775  flex-direction: column;2776  gap: 10px;2777}27782779.peach-canary-explainer {2780  display: flex;2781  gap: 10px;2782  padding: 10px 12px;2783  border-radius: 10px;2784  background: rgba(217, 160, 48, 0.06);2785  border: 1px solid rgba(217, 160, 48, 0.22);2786  margin-bottom: 4px;2787}27882789.peach-canary-explainer-icon {2790  font-size: 1rem;2791  flex-shrink: 0;2792  line-height: 1.2;2793}27942795.peach-canary-explainer-title {2796  font-family: var(--font-ui);2797  font-size: 0.6875rem;2798  font-weight: 500;2799  color: rgba(217, 160, 48, 0.9);2800  margin: 0 0 3px;2801}28022803.peach-canary-explainer-copy {2804  font-family: var(--font-ui);2805  font-size: 0.625rem;2806  color: var(--peach-t2);2807  line-height: 1.55;2808  margin: 0;2809}28102811.peach-canary-hint {2812  font-size: 0.625rem;2813  color: var(--peach-t2);2814  font-family: Inter, system-ui, sans-serif;2815  line-height: 1.5;2816  margin-top: 4px;2817}28182819.peach-canary-actions-row {2820  display: flex;2821  align-items: center;2822  gap: 8px;2823}28242825.peach-canary-test-btn {2826  border-color: rgba(217, 160, 48, 0.3);2827  color: rgba(217, 160, 48, 0.85);2828}28292830.peach-canary-test-result {2831  font-size: 0.625rem;2832  font-family: Inter, system-ui, sans-serif;2833}28342835.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2836.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }28372838.peach-canary-badge {2839  display: flex;2840  position: relative;2841  z-index: 1;2842  align-items: center;2843  gap: 5px;2844  padding: 4px 10px;2845  background: rgba(217, 160, 48, 0.12);2846  border: 1px solid rgba(217, 160, 48, 0.35);2847  border-radius: 6px;2848  margin-bottom: 6px;2849  width: fit-content;2850}28512852.peach-canary-badge-label {2853  font-size: 0.625rem;2854  letter-spacing: 0.06em;2855  color: rgba(217, 160, 48, 0.9);2856  font-family: var(--font-ui);2857  text-transform: uppercase;2858}28592860.peach-canary-badge-icon {2861  font-size: 0.6875rem;2862}28632864.peach-canary-suppress-row {2865  display: flex;2866  align-items: center;2867  gap: 8px;2868  padding: 6px 10px;2869  background: rgba(217, 160, 48, 0.08);2870  border-radius: 6px;2871  margin-bottom: 8px;2872}28732874.peach-canary-suppress-label {2875  font-size: 0.6875rem;2876  color: rgba(217, 160, 48, 0.85);2877  cursor: pointer;2878  font-family: var(--font-ui);2879  letter-spacing: 0.04em;2880}28812882.peach-regen-panel {2883  position: relative;2884  z-index: 1;2885  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2886  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2887  border-radius: 8px;2888  padding: 12px;2889  margin-bottom: 8px;2890}28912892.peach-regen-panel-header {2893  display: flex;2894  align-items: center;2895  justify-content: space-between;2896  margin-bottom: 10px;2897}28982899.peach-regen-panel-title {2900  font-size: 0.6875rem;2901  font-weight: 600;2902  letter-spacing: 0.06em;2903  text-transform: uppercase;2904  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2905}29062907.peach-regen-output {2908  background: rgba(0, 0, 0, 0.2);2909  border-radius: 6px;2910  padding: 10px;2911  margin-bottom: 10px;2912  font-family: var(--font-mono);2913  font-size: 0.8125rem;2914  word-break: break-all;2915  color: var(--peach-t1);2916}29172918.peach-regen-actions {2919  display: flex;2920  gap: 6px;2921}29222923.peach-regen-actions--spaced {2924  margin-bottom: 8px;2925}29262927.peach-regen-action-grow {2928  flex: 1;2929}29302931.peach-regen-copy-btn {2932  padding: 0 8px;2933}29342935.peach-regen-success {2936  position: relative;2937  z-index: 1;2938  background: rgba(40, 180, 80, 0.1);2939  border: 1px solid rgba(40, 180, 80, 0.3);2940  border-radius: 8px;2941  padding: 10px 12px;2942  margin-bottom: 8px;2943  display: flex;2944  align-items: center;2945  gap: 8px;2946  font-size: 0.6875rem;2947  color: rgba(40, 180, 80, 0.9);2948}29492950/* ── Note editor overlay ── */2951.peach-note-editor {2952  position: absolute;2953  inset: 0;2954  z-index: 200;2955  display: flex;2956  flex-direction: column;2957  background:2958    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2959    var(--peach-bg);2960  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2961}29622963.peach-note-editor-header {2964  display: flex;2965  align-items: center;2966  gap: 10px;2967  padding: 14px 16px 10px;2968  border-bottom: 1px solid var(--peach-t3);2969  flex-shrink: 0;2970}29712972.peach-note-editor-back {2973  background: transparent;2974  border: none;2975  cursor: pointer;2976  color: var(--peach-t2);2977  padding: 4px 6px;2978  border-radius: 6px;2979  display: flex;2980  align-items: center;2981  transition: color 120ms ease, background 120ms ease;2982  flex-shrink: 0;2983}2984.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }29852986.peach-note-editor-label {2987  flex: 1;2988  font-family: var(--font-display);2989  font-style: italic;2990  font-size: 0.9375rem;2991  color: var(--peach-t1);2992  letter-spacing: 0.02em;2993}29942995.peach-note-editor-save-btn {2996  background: transparent;2997  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2998  border-radius: 8px;2999  color: var(--peach-accent);3000  font-family: "IBM Plex Mono", monospace;3001  font-size: 0.625rem;3002  letter-spacing: 0.06em;3003  text-transform: uppercase;3004  padding: 3px 10px;3005  cursor: pointer;3006  transition: background 120ms ease, border-color 120ms ease;3007}3008.peach-note-editor-save-btn:hover:not(:disabled) {3009  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3010  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3011}3012.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }30133014.peach-note-toolbar {3015  display: flex;3016  align-items: center;3017  gap: 3px;3018  padding: 6px 14px 5px;3019  border-bottom: 1px solid var(--peach-t3);3020  flex-shrink: 0;3021}30223023.peach-note-tool-btn {3024  background: transparent;3025  border: 1px solid transparent;3026  border-radius: 5px;3027  color: var(--peach-t2);3028  font-family: "IBM Plex Mono", monospace;3029  font-size: 0.625rem;3030  letter-spacing: 0.04em;3031  padding: 2px 8px;3032  cursor: pointer;3033  line-height: 1.6;3034  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;3035}3036.peach-note-tool-btn:hover {3037  background: var(--peach-t4);3038  color: var(--peach-t0);3039  border-color: var(--peach-t3);3040}30413042.peach-note-tool-icon {3043  padding: 3px 7px;3044  display: inline-flex;3045  align-items: center;3046  justify-content: center;3047}30483049.peach-note-tool-divider {3050  width: 1px;3051  height: 14px;3052  background: var(--peach-t3);3053  margin: 0 4px;3054  flex-shrink: 0;3055}30563057.peach-note-editor-body {3058  flex: 1;3059  overflow-y: auto;3060  padding: 16px 20px 20px;3061  outline: none;3062  font-family: var(--font-display);3063  font-size: 1rem;3064  line-height: 1.75;3065  color: var(--peach-t0);3066  scrollbar-width: none;3067  word-break: break-word;3068}3069.peach-note-editor-body:empty::before {3070  content: "write your note…";3071  color: var(--peach-t3);3072  font-style: italic;3073  pointer-events: none;3074}30753076/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */3077.peach-note-editor-inline {3078  display: flex;3079  flex-direction: column;3080  flex: 1;3081  min-height: 0;3082}3083.peach-note-editor-body--inline {3084  flex: 1;3085  min-height: 0;3086  font-size: 0.9375rem;3087  padding: 10px 20px 14px;3088}30893090/* Full-width toolbar row inside the body (Add.tsx note type).3091   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */3092.peach-note-toolbar-body {3093  display: flex;3094  align-items: center;3095  gap: 3px;3096  padding: 5px 20px 4px;3097  margin: 2px -20px 0;3098  border-bottom: 1px solid var(--peach-t3);3099  flex-shrink: 0;3100}31013102/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)3103   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn3104   and .peach-note-tool-divider button-level styles. */3105.peach-note-toolbar-inline {3106  display: flex;3107  align-items: center;3108  gap: 3px;3109  margin-left: auto;3110  padding-left: 10px;3111  border-left: 1px solid var(--peach-t3);3112  min-height: 22px;3113}31143115/* Entry.tsx toolbar row (no tabs, toolbar only) */3116.peach-entry-note-toolbar-row {3117  display: flex;3118  align-items: center;3119  margin: 4px 0 6px;3120  position: relative;3121  z-index: 1;3122}3123.peach-entry-note-toolbar-row .peach-note-toolbar-inline {3124  border-left: none;3125  padding-left: 0;3126  margin-left: 0;3127}31283129/* Note body — fills available vertical space in Add.tsx and Entry.tsx */3130.peach-note-body {3131  display: flex;3132  flex-direction: column;3133  flex: 1;3134  min-height: 0;3135  margin: 4px 0 0;3136}3137.peach-entry-body--new .peach-note-body {3138  margin: 8px -20px 0;3139}31403141/* Add.tsx body is a grid by default; swap to a flex column when a note is3142   active so the note body can stretch and pin the tags row to the bottom. */3143.peach-entry-body--new:has(.peach-note-body) {3144  display: flex;3145  flex-direction: column;3146}31473148/* Rich content element styles (editor + display) */3149.peach-note-editor-body h2,3150.peach-note-content h2 {3151  font-family: var(--font-display);3152  font-size: 20px;3153  font-weight: 600;3154  font-style: italic;3155  color: var(--peach-t0);3156  margin: 6px 0 2px;3157  line-height: 1.3;3158}3159.peach-note-editor-body ul,3160.peach-note-content ul {3161  padding-left: 18px;3162  margin: 3px 0;3163  list-style: disc;3164}3165.peach-note-editor-body ol,3166.peach-note-content ol {3167  padding-left: 18px;3168  margin: 3px 0;3169  list-style: decimal;3170}3171.peach-note-editor-body li,3172.peach-note-content li { margin: 2px 0; }3173.peach-note-editor-body hr,3174.peach-note-content hr {3175  border: none;3176  border-top: 1px solid var(--peach-t3);3177  margin: 10px 0;3178}31793180/* font size elements from execCommand */3181.peach-note-editor-body font[size="1"],3182.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }3183.peach-note-editor-body font[size="2"],3184.peach-note-content font[size="2"] { font-size: 0.8125rem; }3185.peach-note-editor-body font[size="3"],3186.peach-note-content font[size="3"] { font-size: 1rem; }3187.peach-note-editor-body font[size="4"],3188.peach-note-content font[size="4"] { font-size: 20px; }3189.peach-note-editor-body font[size="5"],3190.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }31913192/* bold / italic inside the editor and note display */3193.peach-note-editor-body b, .peach-note-editor-body strong,3194.peach-note-content b, .peach-note-content strong { font-weight: 700; }3195.peach-note-editor-body em, .peach-note-editor-body i,3196.peach-note-content em, .peach-note-content i { font-style: italic; }31973198/* note display — rendered HTML, no pre-wrap */3199.peach-note-content {3200  overflow: auto;3201  max-height: 340px;3202  word-break: break-word;3203}32043205/* ── Note textarea ── */3206.peach-note-textarea {3207  width: 100%;3208  min-height: 180px;3209  max-height: 280px;3210  resize: vertical;3211  background: var(--peach-t4);3212  border: 1px solid var(--peach-t3);3213  border-radius: 8px;3214  padding: 10px 12px;3215  font-family: "IBM Plex Mono", monospace;3216  font-size: 0.75rem;3217  line-height: 1.7;3218  color: var(--peach-t1);3219  outline: none;3220  transition: border-color 150ms ease;3221}32223223.peach-note-textarea:focus {3224  border-color: var(--peach-t2);3225}32263227.peach-note-char-count {3228  font-family: "IBM Plex Mono", monospace;3229  font-size: 0.5625rem;3230  color: var(--peach-t3);3231  text-align: right;3232  margin-top: 4px;3233  letter-spacing: 0.1em;3234}32353236/* ── Field input baseline ── */3237.peach-new-field-input {3238  width: 100%;3239  background: transparent;3240  border: none;3241  border-bottom: 1px solid var(--peach-t3);3242  padding: 4px 0;3243  color: var(--peach-t1);3244  font-family: "IBM Plex Mono", monospace;3245  font-size: 0.8125rem;3246  outline: none;3247  transition: border-color 150ms ease;3248}32493250.peach-new-field-input:focus {3251  border-bottom-color: var(--peach-t0);3252  color: var(--peach-t0);3253}32543255.peach-new-name-input {3256  width: 100%;3257  background: transparent;3258  border: none;3259  border-bottom: 1px solid var(--peach-t3);3260  padding: 6px 0;3261  font-family: var(--font-display);3262  font-style: italic;3263  font-size: 28px;3264  color: var(--peach-t0);3265  outline: none;3266  transition: border-color 150ms ease;3267}32683269.peach-new-name-input:focus {3270  border-bottom-color: var(--peach-t1);3271}32723273.peach-new-name-input::placeholder {3274  color: var(--peach-t2);3275  font-style: italic;3276}32773278.peach-new-field-input::placeholder {3279  color: var(--peach-t3);3280}32813282/* ── Demo entrance animation ── */3283#hd-shell {3284  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3285}3286@keyframes hd-shell-enter {3287  from { opacity: 0; transform: scale(0.96) translateY(16px); }3288  to   { opacity: 1; transform: scale(1) translateY(0); }3289}32903291/* ── Keyframes ── */3292@keyframes peach-char-enter {3293  from { opacity: 0; transform: translateY(0.22em); }3294  to   { opacity: 1; transform: translateY(0); }3295}3296@keyframes peach-content-enter {3297  from { opacity: 0.96; transform: translateY(4px); }3298  to   { opacity: 1; transform: translateY(0); }3299}3300@keyframes peach-content-exit {3301  from { opacity: 1; transform: translateY(0); }3302  to   { opacity: 0.92; transform: translateY(-3px); }3303}3304@keyframes peach-screen-enter {3305  from { opacity: 0; transform: translateY(14px); }3306  to   { opacity: 1; transform: translateY(0); }3307}3308@keyframes peach-shell-fade-in {3309  from { opacity: 0; }3310  to   { opacity: 1; }3311}3312@keyframes peach-veil-in {3313  from { opacity: 0; }3314  to   { opacity: 1; }3315}3316@keyframes peach-lock-settle {3317  0%   { transform: scale(0.9); }3318  65%  { transform: scale(1.08); }3319  100% { transform: scale(1); }3320}3321@keyframes peach-copy-confirm {3322  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3323  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); }3324}3325@keyframes peach-copy-retreat {3326  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); }3327  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3328}3329@keyframes peach-copy-flood {3330  from { opacity: 0; transform: scaleX(0.15); }3331  to   { opacity: 1; transform: scaleX(1); }3332}3333@keyframes peach-copy-icon-settle {3334  from  { transform: scale(0.84); }3335  70%   { transform: scale(1.08); }3336  to    { transform: scale(1); }3337}3338@keyframes peach-copy-sheen-retreat {3339  from { opacity: 1; transform: scaleX(1); }3340  to   { opacity: 0; transform: scaleX(0.15); }3341}3342@keyframes peach-copy-drain {3343  from { width: 100%; }3344  to   { width: 0; }3345}3346@keyframes peach-shake {3347  0%, 100% { transform: translateX(0); }3348  20%      { transform: translateX(-6px); }3349  40%      { transform: translateX(6px); }3350  60%      { transform: translateX(-4px); }3351  80%      { transform: translateX(4px); }3352}33533354@keyframes pip-pulse {3355  0% { transform: scale(1); }3356  40% { transform: scale(2.2); }3357  100% { transform: scale(1); }3358}335933603361/* ── Password generator ── */3362.peach-pwgen-body {3363  flex: 1; overflow-y: auto;3364  display: flex; flex-direction: column;3365}3366.peach-policy-badge {3367  display: flex; align-items: center;3368  padding: 6px 20px 0;3369  font-size: 0.625rem; font-family: Inter, sans-serif;3370  color: var(--peach-t2); letter-spacing: 0.04em;3371}3372.peach-pwgen-display {3373  padding: 14px 20px 12px;3374  border-bottom: 1px solid var(--peach-t3);3375  display: flex; align-items: flex-start; gap: 10px;3376}3377.peach-pwgen-display-row {3378  display: flex;3379  align-items: flex-start;3380  gap: 8px;3381  padding-bottom: 8px;3382  border-bottom: 1px solid var(--peach-t3);3383}3384.peach-pwgen-output {3385  flex: 1; min-width: 0; margin: 0;3386  font-family: "IBM Plex Mono", monospace;3387  font-size: 0.8125rem; color: var(--peach-t0);3388  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3389  white-space: normal;3390  padding: 10px 12px;3391  background: var(--peach-t4);3392  border-radius: 6px;3393  min-height: 36px;3394}3395.peach-pwgen-output-display {3396  flex: 1;3397  min-width: 0;3398  margin: 0;3399  font-family: var(--font-display);3400  font-style: italic;3401  font-weight: 300;3402  font-size: 32px;3403  line-height: 1.05;3404  color: var(--peach-t0);3405  word-break: break-all;3406  overflow-wrap: break-word;3407  white-space: normal;3408  letter-spacing: 0.02em;3409}3410.peach-pwgen-display-actions {3411  display: flex;3412  flex-direction: column;3413  gap: 4px;3414  flex-shrink: 0;3415  margin-top: 2px;3416}3417.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3418.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3419.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3420.peach-pwgen-len-num {3421  font-family: "IBM Plex Mono", monospace;3422  font-size: 0.75rem; color: var(--peach-accent);3423}3424.peach-pwgen-len-num--edit {3425  cursor: text;3426  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3427}3428.peach-pwgen-len-input {3429  font-family: "IBM Plex Mono", monospace;3430  font-size: 0.75rem;3431  color: var(--peach-accent);3432  background: transparent;3433  border: none;3434  border-bottom: 1px solid var(--peach-accent);3435  outline: none;3436  width: 32px;3437  text-align: right;3438  padding: 0;3439}3440.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3441.peach-pwgen-toggles { display: flex; flex-direction: column; }3442.peach-pwgen-charset-pills {3443  display: flex;3444  gap: 6px;3445  flex-wrap: wrap;3446}3447.peach-pwgen-pill {3448  padding: 4px 11px;3449  border-radius: 999px;3450  border: 1px solid var(--peach-t3);3451  background: transparent;3452  color: var(--peach-t2);3453  font-family: "IBM Plex Mono", monospace;3454  font-size: 0.5625rem;3455  letter-spacing: 0.08em;3456  cursor: pointer;3457  transition: all 150ms ease;3458}3459.peach-pwgen-pill.is-on {3460  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3461  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3462  color: var(--peach-accent);3463}3464.peach-pwgen-pill:not(.is-on):hover {3465  color: var(--peach-t1);3466  border-color: var(--peach-t2);3467}3468.peach-pwgen-use-btn {3469  width: 100%;3470  min-height: 34px;3471  border-radius: 8px;3472  margin-top: 2px;3473}3474.peach-generator-constraint-note {3475  font-family: 'IBM Plex Mono', monospace;3476  font-size: 10px;3477  color: var(--peach-t3);3478  letter-spacing: 0.04em;3479  margin: 0;3480  transition: opacity 200ms ease;3481}3482.peach-pwgen-toggle-row {3483  display: flex; align-items: center; justify-content: space-between;3484  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3485}3486.peach-pwgen-toggle-row:last-child { border-bottom: none; }3487.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }34883489/* Peach popup should not expose native scrollbars on internal panels. */3490.peach-settings-body,3491.peach-new-body,3492.peach-pwgen-body,3493.lock-screen,3494.peach-import-preview {3495  scrollbar-width: none;3496  -ms-overflow-style: none;3497  overscroll-behavior: contain;3498}3499.peach-settings-body::-webkit-scrollbar,3500.peach-new-body::-webkit-scrollbar,3501.peach-pwgen-body::-webkit-scrollbar,3502.lock-screen::-webkit-scrollbar,3503.peach-import-preview::-webkit-scrollbar {3504  width: 0;3505  height: 0;3506  display: none;3507}35083509.lock-screen {3510  height: 100%;3511  min-height: 100%;3512  overflow-y: auto;3513  padding: 18px 18px 16px;3514  gap: 14px;3515  grid-template-rows: auto auto auto 1fr auto;3516  align-content: stretch;3517  position: relative;3518  isolation: isolate;3519}3520.peach-screen.lock-screen--vault-stage {3521  display: flex;3522  flex-direction: column;3523  justify-content: flex-start;3524  gap: 18px;3525  padding: 20px 18px 18px;3526  overflow: hidden;3527}3528.peach-screen.lock-screen--vault-stage .peach-lock-panel {3529  margin-top: 0;3530}3531.lock-screen--onboarding {3532  display: flex;3533  flex-direction: column;3534  gap: 12px;3535  justify-content: flex-start;3536}35373538.lock-screen::before {3539  content: "";3540  position: absolute;3541  inset: 12px 18px auto auto;3542  width: 160px;3543  height: 160px;3544  border-radius: 999px;3545  background:3546    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%);3547  filter: blur(6px);3548  opacity: 0.7;3549  pointer-events: none;3550  z-index: 0;3551}35523553.peach-lock-rune-string {3554  flex: 1;3555  display: flex;3556  align-items: center;3557  justify-content: center;3558  gap: 6px;3559  font-family: PeachScript, monospace;3560  font-size: 0.8125rem;3561  letter-spacing: 0.05em;3562  pointer-events: none;3563  user-select: none;3564  position: relative;3565  z-index: 1;3566}35673568.peach-lock-rune-string span {3569  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3570  text-shadow:3571    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3572    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3573  transition: color 0.9s ease, text-shadow 0.9s ease;3574}35753576.peach-lock-rune-string span.is-glowing {3577  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3578  text-shadow:3579    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3580    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3581}35823583.lock-screen-header {3584  display: flex;3585  align-items: center;3586  justify-content: space-between;3587  position: relative;3588  z-index: 1;3589}35903591.lock-password-input.shake {3592  animation: peach-shake 300ms ease-in-out;3593}35943595.peach-hint-error {3596  color: rgba(220, 80, 60, 0.92);3597}35983599.peach-onboarding-headline {3600  margin: 0;3601  font-family: var(--font-display);3602  font-size: 35px;3603  line-height: 0.88;3604  font-style: italic;3605  font-weight: 400;3606  max-width: 252px;3607}36083609.peach-lock-copy {3610  display: grid;3611  gap: 8px;3612  position: relative;3613  z-index: 1;3614}36153616.peach-lock-copy--onboarding {3617  gap: 10px;3618}36193620.peach-lock-hero {3621  position: relative;3622  z-index: 1;3623  display: grid;3624  gap: 8px;3625  min-height: 0;3626  padding: 4px 2px 0;3627  border: none;3628  border-radius: 0;3629  background: transparent;3630  box-shadow: none;3631}3632.peach-lock-hero-art {3633  position: absolute;3634  right: -8px;3635  top: -6px;3636  width: 120px;3637  height: 120px;3638  display: flex;3639  align-items: center;3640  justify-content: center;3641  pointer-events: none;3642  opacity: 0.12;3643  filter: saturate(0.9);3644}3645.peach-lock-hero-mark {3646  width: 100%;3647  height: 100%;3648}3649/* Peach body stays brand-peach across every accent — we don't want a3650   green or blue peach when sage/sky is selected. Leaf + vein keep the3651   sage tint because a real peach has a sage leaf. In the new brand-kit3652   mark the leaf is path 1 and the vein stroke is path 2; the body and3653   back-lobe (paths 3 + 4) must stay untouched. */3654.peach-lock-hero-mark path:nth-child(1) {3655  fill: rgba(123, 144, 96, 0.88);3656}3657.peach-lock-hero-mark path:nth-child(2) {3658  stroke: rgba(94, 122, 66, 0.95);3659}3660.peach-lock-hero > *:not(.peach-lock-hero-art) {3661  position: relative;3662  z-index: 1;3663}36643665.peach-lock-eyebrow {3666  display: inline-flex;3667  align-items: center;3668  width: fit-content;3669  padding: 4px 9px;3670  border-radius: 999px;3671  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3672  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3673  color: var(--peach-t0);3674  font-family: "IBM Plex Mono", monospace;3675  font-size: 0.5rem;3676  letter-spacing: 0.18em;3677  text-transform: uppercase;3678}36793680.peach-lock-label-row {3681  display: flex;3682  align-items: center;3683  justify-content: space-between;3684  margin-bottom: 0;3685}36863687.peach-lock-reveal-btn {3688  display: inline-flex;3689  align-items: center;3690  gap: 4px;3691  background: none;3692  border: none;3693  cursor: pointer;3694  font-family: "IBM Plex Mono", monospace;3695  font-size: 0.5625rem;3696  letter-spacing: 0.06em;3697  color: var(--peach-t2);3698  padding: 2px 0;3699  transition: color 150ms ease;3700}37013702.peach-lock-reveal-btn:hover {3703  color: var(--peach-t1);3704}37053706.peach-lock-warning {3707  color: rgba(220, 80, 60, 0.85) !important;3708  line-height: 1.5;3709}37103711.peach-onboarding-cards {3712  display: grid;3713  gap: 8px;3714  position: relative;3715  z-index: 1;3716}37173718.peach-lock-panel {3719  position: relative;3720  z-index: 1;3721  display: grid;3722  gap: 9px;3723  padding: 14px 16px 15px;3724  border-radius: 18px;3725  border: 1px solid var(--peach-t3);3726  background:3727    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3728  box-shadow:3729    inset 0 1px 0 rgba(240, 232, 216, 0.04),3730    0 12px 28px rgba(0, 0, 0, 0.12);3731}37323733/* Glass surface — lock panel and settings groups */3734.peach-glass {3735  background: rgba(26, 20, 16, 0.65);3736  border: 1px solid rgba(255, 255, 255, 0.08);3737  border-radius: 12px;3738  backdrop-filter: blur(12px) saturate(1.4);3739  -webkit-backdrop-filter: blur(12px) saturate(1.4);3740}37413742@supports not (backdrop-filter: blur(1px)) {3743  .peach-glass {3744    background: rgba(26, 20, 16, 0.92);3745    border: 1px solid rgba(255, 255, 255, 0.10);3746    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3747  }3748}37493750.light .peach-glass,3751[data-theme="light"] .peach-glass {3752  background: rgba(240, 233, 223, 0.72);3753  border: 1px solid rgba(26, 18, 8, 0.08);3754  backdrop-filter: blur(12px) saturate(1.2);3755  -webkit-backdrop-filter: blur(12px) saturate(1.2);3756}37573758@supports not (backdrop-filter: blur(1px)) {3759  .light .peach-glass,3760  [data-theme="light"] .peach-glass {3761    background: rgba(240, 233, 223, 0.97);3762    border: 1px solid rgba(26, 18, 8, 0.10);3763  }3764}37653766/* Lock panel keeps its own border-radius over the generic glass token */3767.peach-lock-panel.peach-glass {3768  border-radius: 18px;3769  background: rgba(26, 20, 16, 0.65);3770  border: 1px solid rgba(255, 255, 255, 0.08);3771  box-shadow:3772    inset 0 1px 0 rgba(255, 255, 255, 0.05),3773    0 12px 28px rgba(0, 0, 0, 0.3);3774}37753776.light .peach-lock-panel.peach-glass,3777[data-theme="light"] .peach-lock-panel.peach-glass {3778  background: rgba(240, 233, 223, 0.82);3779  border: 1px solid rgba(26, 18, 8, 0.08);3780  box-shadow:3781    inset 0 1px 0 rgba(255, 255, 255, 0.4),3782    0 8px 24px rgba(80, 56, 32, 0.15);3783}37843785@supports not (backdrop-filter: blur(1px)) {3786  .peach-lock-panel.peach-glass {3787    background: rgba(26, 20, 16, 0.92);3788    box-shadow:3789      inset 0 1px 0 rgba(255, 255, 255, 0.05),3790      0 12px 28px rgba(0, 0, 0, 0.4);3791  }3792  .light .peach-lock-panel.peach-glass,3793  [data-theme="light"] .peach-lock-panel.peach-glass {3794    background: rgba(240, 233, 223, 0.98);3795  }3796}37973798.peach-lock-panel--secondary {3799  gap: 12px;3800}38013802.peach-lock-panel-header {3803  display: flex;3804  align-items: baseline;3805  justify-content: space-between;3806  gap: 12px;3807}38083809.peach-lock-option-grid {3810  display: grid;3811  gap: 10px;3812}38133814.peach-lock-option {3815  width: 100%;3816  display: grid;3817  gap: 6px;3818  padding: 14px 15px;3819  border-radius: 16px;3820  border: 1px solid rgba(240, 232, 216, 0.08);3821  background: rgba(240, 232, 216, 0.02);3822  color: var(--peach-t0);3823  text-align: left;3824  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3825}38263827.peach-lock-option:hover {3828  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3829  background: rgba(240, 232, 216, 0.04);3830  transform: translateY(-1px);3831}38323833.peach-lock-option-title {3834  font-size: 0.75rem;3835  color: var(--peach-t0);3836}38373838.peach-lock-option-copy {3839  font-size: 0.6875rem;3840  line-height: 1.55;3841  color: var(--peach-t1);3842}38433844.peach-onboarding-stack {3845  margin-top: 2px;3846}3847.peach-lock-panel-footer {3848  display: grid;3849  gap: 6px;3850  margin-top: 2px;3851  padding-top: 10px;3852  border-top: 1px solid rgba(240, 232, 216, 0.06);3853}38543855/* ── Restore tab view ─────────────────────────────────────────────────────3856   Tab-based restore screen replacing the old three-card picker. */38573858.peach-restore-tabview {3859  overflow: hidden;3860}38613862.peach-restore-tabcard {3863  flex: 1;3864  display: flex;3865  flex-direction: column;3866  gap: 0;3867  padding: 0;3868  overflow: hidden;3869  cursor: default;3870  user-select: none;3871  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3872}38733874/* ── Tab selector ─────────────────────────────────────────────────────── */38753876.peach-restore-tabs {3877  display: flex;3878  justify-content: space-around;3879  padding: 14px 10px 10px;3880  border-bottom: 1px solid var(--peach-t3);3881  gap: 2px;3882  overflow: hidden;3883  scrollbar-width: none;3884}3885.peach-restore-tabs::-webkit-scrollbar { display: none; }38863887.peach-restore-tab {3888  background: none;3889  border: none;3890  cursor: pointer;3891  padding: 3px 2px;3892  font-family: 'Cormorant Garamond', Georgia, serif;3893  font-style: italic;3894  font-size: 11px;3895  color: var(--peach-t2);3896  transition: color 150ms ease, text-shadow 150ms ease;3897  flex: 1;3898  min-width: 0;3899  text-align: center;3900  white-space: nowrap;3901  overflow: hidden;3902  text-overflow: ellipsis;3903}3904.peach-restore-tab:hover {3905  color: var(--peach-accent);3906  text-shadow:3907    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3908    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3909}3910.peach-restore-tab.is-active {3911  color: var(--peach-accent);3912  text-shadow:3913    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3914    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3915}39163917/* ── Content area ─────────────────────────────────────────────────────── */39183919.peach-restore-content {3920  padding: 16px 16px 14px;3921  display: flex;3922  flex-direction: column;3923  gap: 8px;3924  overflow: hidden;3925  scrollbar-width: none;3926  flex: 1;3927}3928.peach-restore-content::-webkit-scrollbar { display: none; }3929.peach-restore-content > * {3930  overflow: hidden;3931  scrollbar-width: none;3932}3933.peach-restore-content > *::-webkit-scrollbar { display: none; }39343935/* ── Shared tab inner layout ──────────────────────────────────────────── */39363937.peach-rt-symbols,3938.peach-rt-csv,3939.peach-rt-phone,3940.peach-restore-codex {3941  display: flex;3942  flex-direction: column;3943  gap: 8px;3944  overflow: hidden;3945}39463947.peach-restore-codex {3948  min-height: 0;3949  justify-content: center;3950}39513952.peach-restore-codex-title {3953  margin: 0;3954  font-family: var(--font-display);3955  font-size: 1rem;3956  font-style: italic;3957  color: var(--peach-t0);3958}39593960.peach-restore-codex-copy {3961  margin: 0;3962  font-size: 0.75rem;3963  line-height: 1.5;3964  color: var(--peach-t1);3965}39663967.peach-restore-codex-button {3968  width: 100%;3969  justify-content: center;3970}39713972.peach-rt-submit {3973  width: 100%;3974}39753976.peach-rt-error {3977  margin: 0;3978  font-size: 0.6875rem;3979  color: var(--peach-breach);3980  line-height: 1.4;3981}39823983/* ── PeachScript tab ──────────────────────────────────────────────────── */39843985.peach-restore-symbols-textarea {3986  font-family: 'PeachScript', monospace;3987  font-size: 13px;3988  line-height: 1.9;3989  letter-spacing: 0.1em;3990  word-break: break-all;3991  resize: none;3992  width: 100%;3993  min-height: 56px;3994  max-height: 72px;3995  overflow: hidden;3996  scrollbar-width: none;3997  -ms-overflow-style: none;3998  box-sizing: border-box;3999  padding: 6px 8px;4000  border-radius: 8px;4001  border: 1px solid var(--peach-t3);4002  background: rgba(240, 232, 216, 0.03);4003  color: var(--peach-t0);4004}4005.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }4006.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }40074008.peach-restore-symbols-pass {4009  width: 100%;4010  box-sizing: border-box;4011  padding: 7px 10px;4012  border-radius: 8px;4013  border: 1px solid var(--peach-t3);4014  background: rgba(240, 232, 216, 0.03);4015  color: var(--peach-t0);4016  font-size: 0.8125rem;4017}4018.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }4019.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }40204021.peach-rt-divider {4022  text-align: center;4023  font-size: 0.6875rem;4024  color: var(--peach-t2);4025  font-style: italic;4026}40274028.peach-rt-file-label {4029  width: 100%;4030  justify-content: center;4031}40324033.peach-rt-anim-canvas {4034  width: 100%;4035  height: 180px;4036  border-radius: 10px;4037  overflow: hidden;4038  display: block;4039}40404041/* ── CSV tab ──────────────────────────────────────────────────────────── */40424043.peach-rt-csv-sources {4044  margin: 0;4045  font-size: 0.6875rem;4046  color: var(--peach-t2);4047  line-height: 1.5;4048  text-align: center;4049}40504051.peach-rt-csv-warning {4052  margin: 0;4053  font-family: "IBM Plex Mono", monospace;4054  font-size: 0.5625rem;4055  letter-spacing: 0.12em;4056  color: var(--peach-breach);4057  text-align: center;4058}40594060/* ── From Phone tab ───────────────────────────────────────────────────── */40614062.peach-rt-phone-code {4063  margin: 0;4064  text-align: center;4065  font-family: "IBM Plex Mono", monospace;4066  font-size: 22px;4067  letter-spacing: 0.18em;4068  color: var(--peach-t0);4069}40704071.peach-rt-phone-qr {4072  display: block;4073  width: 96px;4074  height: 96px;4075  margin: 0 auto;4076  border-radius: 6px;4077  image-rendering: pixelated;4078  overflow: hidden;4079}40804081.peach-rt-phone-hint {4082  margin: 0;4083  font-size: 0.6875rem;4084  color: var(--peach-t2);4085  line-height: 1.55;4086  text-align: center;4087}40884089/* ── Intro popup ──────────────────────────────────────────────────────── */40904091.peach-restore-intro-overlay {4092  position: absolute;4093  inset: 0;4094  z-index: 100;4095  display: flex;4096  align-items: center;4097  justify-content: center;4098  padding: 20px;4099  background: rgba(12, 10, 6, 0.7);4100  backdrop-filter: blur(4px);4101  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4102}41034104.peach-restore-intro-card {4105  width: 100%;4106  display: flex;4107  flex-direction: column;4108  gap: 12px;4109  padding: 22px 20px 20px;4110  border-radius: 16px;4111  border: 1px solid var(--peach-t3);4112  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));4113  backdrop-filter: blur(4px);4114  -webkit-backdrop-filter: blur(4px);4115  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);4116}41174118.peach-restore-intro-headline {4119  margin: 0;4120  font-family: var(--font-display);4121  font-style: italic;4122  font-size: 20px;4123  font-weight: 400;4124  color: var(--peach-t0);4125}41264127.peach-restore-intro-body {4128  display: flex;4129  flex-direction: column;4130  gap: 8px;4131}4132.peach-restore-intro-body p {4133  margin: 0;4134  font-size: 0.75rem;4135  color: var(--peach-t1);4136  line-height: 1.5;4137}41384139.peach-restore-intro-btn {4140  width: 100%;4141  margin-top: 4px;4142}41434144/* Snapshot restore panel */4145.peach-snapshot-panel {4146  gap: 10px;4147  overflow-y: auto;4148  max-height: 340px;4149}4150.peach-snapshot-list {4151  display: flex;4152  flex-direction: column;4153  gap: 4px;4154}4155.peach-snapshot-row {4156  display: flex;4157  align-items: center;4158  justify-content: space-between;4159  width: 100%;4160  padding: 8px 10px;4161  border-radius: 8px;4162  border: 1px solid rgba(240, 232, 216, 0.07);4163  background: transparent;4164  cursor: pointer;4165  transition: border-color 120ms, background 120ms;4166  text-align: left;4167  gap: 8px;4168}4169.peach-snapshot-row:hover {4170  border-color: rgba(240, 232, 216, 0.14);4171  background: rgba(240, 232, 216, 0.03);4172}4173.peach-snapshot-row.is-selected {4174  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4175  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);4176}4177.peach-snapshot-time {4178  font-size: 11.5px;4179  color: var(--peach-t0);4180  flex: 1;4181}4182.peach-snapshot-count {4183  font-family: "IBM Plex Mono", monospace;4184  font-size: 0.625rem;4185  color: var(--peach-t2);4186  flex-shrink: 0;4187}4188.peach-snapshot-confirm {4189  display: flex;4190  flex-direction: column;4191  gap: 8px;4192  padding-top: 10px;4193  border-top: 1px solid rgba(240, 232, 216, 0.06);4194}4195.peach-snapshot-warning {4196  display: flex;4197  align-items: flex-start;4198  gap: 6px;4199  font-size: 10.5px;4200  color: rgba(220, 80, 60, 0.85);4201  line-height: 1.55;4202}4203.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }4204.peach-snapshot-confirm-row {4205  display: flex;4206  gap: 6px;4207  align-items: center;4208}4209.peach-snapshot-restore-btn {4210  width: 100%;4211}4212.peach-lock-hero--unlock .peach-lock-hero-art {4213  width: 112px;4214  height: 112px;4215  right: 0;4216  top: 2px;4217  opacity: 0.1;4218}42194220.peach-card {4221  border: 1px solid var(--peach-t3);4222  border-radius: 18px;4223  background:4224    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4225  box-shadow:4226    inset 0 0 0 1px var(--peach-border-accent),4227    inset 0 1px 0 rgba(240, 232, 216, 0.04),4228    0 12px 32px rgba(0, 0, 0, 0.14);4229  overflow: hidden;4230}42314232.peach-card-active {4233  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4234  box-shadow:4235    inset 0 1px 0 rgba(240, 232, 216, 0.05),4236    0 16px 38px rgba(0, 0, 0, 0.18),4237    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4238}42394240.peach-card-disabled {4241  opacity: 0.72;4242}42434244.peach-card-header {4245  width: 100%;4246  padding: 13px 16px 11px;4247  background: transparent;4248  color: var(--peach-t0);4249  display: flex;4250  justify-content: space-between;4251  align-items: center;4252  text-align: left;4253  font-size: 0.75rem;4254}42554256.peach-card-body {4257  padding: 0 16px 16px;4258  display: grid;4259  gap: 9px;4260}42614262.peach-card-tag {4263  color: var(--peach-t2);4264  font-family: "IBM Plex Mono", monospace;4265  font-size: 0.5625rem;4266  letter-spacing: 0.12em;4267  text-transform: uppercase;4268}42694270.peach-empty-copy {4271  display: grid;4272  gap: 6px;4273  color: var(--peach-t1);4274  font-size: 0.8125rem;4275}42764277.peach-lock-submit {4278  width: 100%;4279  box-shadow:4280    0 1px 0 rgba(255,255,255,0.10) inset,4281    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4282    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4283    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4284}42854286.peach-lock-secondary {4287  width: 100%;4288  border-color: var(--peach-t3);4289  background: rgba(240, 232, 216, 0.02);4290}42914292.peach-lock-secondary:hover {4293  background: rgba(240, 232, 216, 0.04);4294}42954296.peach-lock-note {4297  max-width: none;4298  line-height: 1.55;4299  margin: 0;4300}43014302.peach-overlay-action {4303  font-size: 0.625rem;4304  padding: 4px 8px;4305  letter-spacing: 0.06em;4306  min-width: 44px;4307  text-align: center;4308}43094310.peach-inline-action {4311  flex-shrink: 0;4312  font-size: 0.5625rem;4313  letter-spacing: 0.1em;4314  text-transform: uppercase;4315  padding: 4px 7px;4316}4317.peach-password-toggle-btn {4318  display: inline-flex;4319  align-items: center;4320  justify-content: center;4321  min-width: 30px;4322  min-height: 26px;4323  padding: 0 7px;4324  border: 1px solid var(--peach-t3);4325  border-radius: 999px;4326  background: rgba(240, 232, 216, 0.04);4327  color: var(--peach-t2);4328  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4329}4330.peach-password-toggle-btn:hover {4331  border-color: var(--peach-t2);4332  color: var(--peach-t0);4333  background: rgba(240, 232, 216, 0.06);4334}43354336.peach-new-textarea {4337  width: 100%;4338  min-height: 88px;4339  resize: vertical;4340  border: 0;4341  outline: none;4342  background: transparent;4343  color: var(--peach-t1);4344  font-family: "IBM Plex Mono", monospace;4345  font-size: 0.75rem;4346  line-height: 1.65;4347  caret-color: var(--peach-accent);4348}43494350.peach-new-textarea::placeholder {4351  color: var(--peach-t2);4352  opacity: 0.7;4353}43544355.peach-settings-actions {4356  display: grid;4357  gap: 8px;4358}43594360.peach-sync-section-label {4361  font-size: 0.6875rem;4362  color: var(--peach-t2);4363  text-transform: uppercase;4364  letter-spacing: 0.05em;4365}43664367.peach-sync-network-note {4368  margin: 0 0 6px;4369  font-size: 0.75rem;4370  color: var(--peach-t2);4371  line-height: 1.4;4372}43734374.peach-settings-row--tappable {4375  background: none;4376  border: none;4377  width: 100%;4378  text-align: left;4379  cursor: pointer;4380  color: var(--peach-t1);4381  font-size: 0.8125rem;4382}4383.peach-settings-row--tappable:hover {4384  color: var(--peach-t0);4385}43864387.peach-sync-pro-hint {4388  display: flex;4389  flex-direction: column;4390  align-items: flex-start;4391  gap: 8px;4392  padding: 12px 0 4px;4393}43944395.peach-sync-device-row {4396  display: flex;4397  justify-content: space-between;4398  align-items: center;4399  padding: 6px 0;4400  border-bottom: 1px solid var(--peach-t3);4401}44024403.peach-sync-device-info {4404  display: flex;4405  flex-direction: column;4406  gap: 2px;4407}44084409.peach-sync-device-name {4410  font-size: 0.8125rem;4411  color: var(--peach-t0);4412}44134414.peach-sync-device-meta {4415  font-size: 0.6875rem;4416  color: var(--peach-t2);4417}44184419.peach-sync-status-dot {4420  display: inline-block;4421  width: 8px;4422  height: 8px;4423  border-radius: 50%;4424  vertical-align: middle;4425}44264427.peach-sync-remove-btn {4428  color: var(--peach-breach);4429}44304431.peach-sync-advanced-row {4432  display: flex;4433  justify-content: space-between;4434  align-items: center;4435  padding: 6px 0;4436  gap: 12px;4437}44384439.peach-sync-advanced-info {4440  display: flex;4441  flex-direction: column;4442  gap: 2px;4443  flex: 1;4444}44454446.peach-sync-advanced-name {4447  font-size: 0.8125rem;4448  color: var(--peach-t0);4449}44504451.peach-sync-reset-confirm {4452  display: flex;4453  flex-direction: column;4454  gap: 8px;4455  padding: 10px;4456  border: 1px solid var(--peach-breach);4457  border-radius: 10px;4458  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4459}44604461.peach-sync-reset-confirm-headline {4462  font-size: 0.8125rem;4463  font-weight: 600;4464  color: var(--peach-t0);4465  margin: 0;4466}44674468.peach-sync-reset-confirm-body {4469  font-size: 0.75rem;4470  color: var(--peach-t1);4471  margin: 0;4472  line-height: 1.4;4473}44744475.peach-btn--danger {4476  background: var(--peach-breach);4477  color: #fff;4478  border-color: var(--peach-breach);4479}4480.peach-btn--danger:hover:not(:disabled) {4481  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4482}4483.peach-btn--danger:disabled {4484  opacity: 0.55;4485  cursor: not-allowed;4486}44874488.peach-sync-hero-icon {4489  color: var(--peach-t1);4490  opacity: 0.85;4491}44924493.peach-import-preview {4494  margin-bottom: 12px;4495  max-height: 152px;4496  overflow-y: auto;4497  border: 1px solid var(--peach-t3);4498  border-radius: 10px;4499  padding: 8px 10px;4500  display: grid;4501  gap: 8px;4502  background: rgba(240, 232, 216, 0.02);4503}45044505.peach-import-preview-row {4506  display: flex;4507  justify-content: space-between;4508  gap: 10px;4509  font-size: 0.6875rem;4510  color: var(--peach-t1);4511}45124513.peach-import-preview-title {4514  color: var(--peach-t0);4515  flex: 1;4516  min-width: 0;4517  overflow: hidden;4518  text-overflow: ellipsis;4519  white-space: nowrap;4520}45214522.peach-import-preview-meta {4523  color: var(--peach-t2);4524  flex-shrink: 0;4525  max-width: 42%;4526  overflow: hidden;4527  text-overflow: ellipsis;4528  white-space: nowrap;4529}45304531.peach-import-preview-more {4532  color: var(--peach-t2);4533  font-size: 0.625rem;4534}45354536.peach-restore-copy {4537  margin: 0;4538  color: var(--peach-t1);4539  font-size: 0.6875rem;4540  line-height: 1.6;4541}45424543.peach-restore-warning {4544  padding: 10px 12px;4545  border-radius: 12px;4546  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4547  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4548  color: var(--peach-t0);4549  font-size: 0.6875rem;4550  line-height: 1.55;4551}45524553.peach-provider-chips {4554  display: flex;4555  flex-wrap: wrap;4556  gap: 6px;4557}45584559.peach-provider-chip {4560  display: inline-flex;4561  align-items: center;4562  padding: 5px 8px;4563  border-radius: 999px;4564  border: 1px solid var(--peach-t3);4565  background: rgba(240, 232, 216, 0.02);4566  color: var(--peach-t1);4567  font-family: "IBM Plex Mono", monospace;4568  font-size: 0.5rem;4569  letter-spacing: 0.08em;4570  text-transform: uppercase;4571}45724573.peach-restore-file,4574.peach-restore-input {4575  width: 100%;4576  border-radius: 10px;4577  border: 1px solid var(--peach-t3);4578  background: var(--peach-s2);4579  color: var(--peach-t0);4580  font-size: 0.75rem;4581}45824583.peach-restore-file {4584  padding: 9px 10px;4585}45864587.peach-restore-file::file-selector-button {4588  margin-right: 10px;4589  padding: 7px 10px;4590  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4591  border-radius: 999px;4592  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4593  color: var(--peach-t0);4594  font-size: 0.625rem;4595  letter-spacing: 0.08em;4596  text-transform: uppercase;4597  cursor: pointer;4598}45994600.peach-restore-input {4601  padding: 10px 12px;4602}46034604.peach-auth-grid {4605  display: grid;4606  gap: 10px;4607}46084609.peach-import-summary {4610  color: var(--peach-t1);4611  font-size: 0.75rem;4612  line-height: 1.6;4613  margin-bottom: 12px;4614}46154616.peach-restore-error {4617  color: rgba(220, 80, 60, 0.95);4618  font-size: 0.75rem;4619  line-height: 1.55;4620}46214622.peach-passkey-card {4623  max-width: 400px;4624  margin: auto 16px;4625  align-self: center;4626  width: calc(100% - 32px);4627}46284629/* Center the approval card vertically inside the overlay-view (which sets4630 * flex-direction: column without justify-content). Without this, the card4631 * sits at the top with a tall empty band below — looks unfinished on the4632 * 320px popup. */4633.peach-overlay-view:has(.peach-passkey-card) {4634  justify-content: center;4635}46364637.peach-pro-badge {4638  padding: 2px 6px;4639  border-radius: 999px;4640  font-family: var(--font-ui);4641  font-size: 0.625rem;4642  letter-spacing: 0.08em;4643  text-transform: uppercase;4644  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4645  color: var(--peach-accent);4646}46474648/* ── Shortcuts rebind table ─────────────────────────────────── */4649.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4650.peach-shortcut-row {4651  display: flex;4652  align-items: center;4653  gap: 10px;4654  padding: 6px 0;4655}4656.peach-shortcut-row-label {4657  flex: 1;4658  font-size: 0.75rem;4659  color: var(--peach-t0);4660}4661.peach-shortcut-chip {4662  min-width: 64px;4663  padding: 4px 10px;4664  border-radius: 6px;4665  border: 1px solid var(--peach-t3);4666  background: var(--peach-input-bg, var(--surface-card));4667  color: var(--peach-t0);4668  font-family: var(--font-mono);4669  font-size: 0.6875rem;4670  letter-spacing: 0.04em;4671  cursor: pointer;4672  text-align: center;4673  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4674}4675.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4676.peach-shortcut-chip.is-custom {4677  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4678  color: var(--peach-accent);4679}4680.peach-shortcut-chip.is-capturing {4681  border-color: var(--peach-accent);4682  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4683  color: var(--peach-accent);4684  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4685}4686@keyframes peach-shortcut-capture-pulse {4687  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4688  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4689}4690.peach-shortcut-reset {4691  background: transparent;4692  border: none;4693  cursor: pointer;4694  color: var(--peach-t2);4695  padding: 4px 6px;4696  border-radius: 5px;4697  font-size: 0.875rem;4698  line-height: 1;4699  transition: color 120ms ease, background 120ms ease;4700}4701.peach-shortcut-reset:hover {4702  color: var(--peach-t0);4703  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4704}4705.peach-shortcuts-conflict {4706  margin: 4px 0 0;4707  padding: 8px 10px;4708  border-radius: 7px;4709  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4710  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4711  font-family: var(--font-mono);4712  font-size: 0.6875rem;4713  color: var(--peach-t0);4714}47154716/* ── Help dialog overlay (? to open) ────────────────────────── */4717.peach-shortcuts-help-backdrop {4718  position: fixed;4719  inset: 0;4720  background: rgba(0, 0, 0, 0.55);4721  backdrop-filter: blur(2px);4722  display: flex;4723  align-items: center;4724  justify-content: center;4725  z-index: 1000;4726  animation: peach-help-fade-in 140ms ease forwards;4727}4728@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4729.peach-shortcuts-help-card {4730  width: min(320px, 92vw);4731  max-height: 80vh;4732  overflow-y: auto;4733  border-radius: 14px;4734  border: 1px solid var(--peach-t3);4735  background: var(--peach-bg);4736  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4737  padding: 16px 18px 18px;4738  display: flex;4739  flex-direction: column;4740  gap: 12px;4741}4742.peach-shortcuts-help-head {4743  display: flex; align-items: center; justify-content: space-between;4744}4745.peach-shortcuts-help-head h3 {4746  margin: 0;4747  font-family: var(--font-display);4748  font-style: italic;4749  font-weight: 400;4750  font-size: 22px;4751  color: var(--peach-t0);4752}4753.peach-shortcuts-help-close {4754  background: transparent;4755  border: none;4756  color: var(--peach-t2);4757  cursor: pointer;4758  font-size: 0.875rem;4759  padding: 4px 8px;4760  border-radius: 5px;4761}4762.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4763.peach-shortcuts-help-body ul {4764  list-style: none; padding: 0; margin: 4px 0 12px;4765  display: grid; gap: 8px;4766}4767.peach-shortcuts-help-body li {4768  display: flex; align-items: center; justify-content: space-between; gap: 12px;4769  font-size: 0.75rem; color: var(--peach-t0);4770}4771.peach-shortcuts-help-body kbd {4772  font-family: var(--font-mono);4773  font-size: 0.6875rem;4774  padding: 3px 8px;4775  border-radius: 6px;4776  background: var(--surface-card);4777  border: 1px solid var(--peach-t3);4778  color: var(--peach-accent);4779  letter-spacing: 0.04em;4780}47814782/* ── Pro promo on Account screen ────────────────────────────── */4783.peach-pro-promo {4784  position: relative;4785  border-radius: 14px;4786  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4787  background:4788    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4789    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4790    var(--surface-card);4791  overflow: hidden;4792  margin-bottom: 14px;4793}4794.peach-pro-promo-glow {4795  position: absolute;4796  inset: -40% -20% auto auto;4797  width: 220px; height: 220px;4798  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4799  pointer-events: none;4800  filter: blur(8px);4801}4802.peach-pro-promo-inner {4803  position: relative;4804  padding: 18px 18px 16px;4805}4806.peach-pro-promo-title {4807  font-family: var(--font-display);4808  font-style: italic;4809  font-weight: 400;4810  font-size: 28px;4811  line-height: 1;4812  letter-spacing: -0.005em;4813  color: var(--peach-t0);4814  margin: 0 0 4px;4815}4816.peach-pro-promo-tagline {4817  font-family: var(--font-mono);4818  font-size: 0.625rem;4819  letter-spacing: 0.06em;4820  color: var(--peach-t2);4821  margin: 0 0 14px;4822}4823.peach-pro-promo-list {4824  list-style: none;4825  margin: 0 0 16px;4826  padding: 0;4827  display: grid;4828  gap: 9px;4829}4830.peach-pro-promo-list li {4831  display: flex;4832  align-items: flex-start;4833  gap: 9px;4834  font-size: 0.75rem;4835  color: var(--peach-t1);4836  line-height: 1.4;4837}4838.peach-pro-promo-list svg {4839  width: 14px;4840  height: 14px;4841  flex-shrink: 0;4842  color: var(--peach-accent);4843  margin-top: 2px;4844}4845.peach-pro-promo-list span {4846  color: var(--peach-t0);4847}4848.peach-pro-promo-cta {4849  width: 100%;4850  background: var(--peach-accent);4851  color: #fff;4852  border: none;4853  padding: 9px 12px;4854  border-radius: 9px;4855  font-size: 0.75rem;4856  font-weight: 500;4857  font-family: var(--font-ui);4858  letter-spacing: 0.02em;4859  text-decoration: none;4860  display: inline-flex;4861  align-items: center;4862  justify-content: center;4863  cursor: pointer;4864  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4865  box-shadow: 0 2px 16px var(--peach-glow);4866}4867.peach-pro-promo-cta:hover {4868  filter: brightness(1.07);4869  box-shadow: 0 4px 24px var(--peach-glow);4870  transform: translateY(-1px);4871}4872.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }48734874.peach-pro-or-divider {4875  display: flex;4876  align-items: center;4877  gap: 10px;4878  margin: 4px 0 12px;4879  font-family: var(--font-mono);4880  font-size: 0.625rem;4881  letter-spacing: 0.06em;4882  color: var(--peach-t2);4883  text-transform: uppercase;4884}4885.peach-pro-or-divider::before,4886.peach-pro-or-divider::after {4887  content: "";4888  flex: 1;4889  height: 1px;4890  background: var(--peach-t3);4891}48924893.peach-loading {4894  position: absolute;4895  inset: 0;4896  display: flex;4897  align-items: center;4898  justify-content: center;4899  background: var(--bg);4900  animation: peach-loading-pulse 1.2s ease-in-out infinite;4901}49024903@keyframes peach-loading-pulse {4904  0%, 100% { opacity: 0.6; }4905  50% { opacity: 1; }4906}49074908/* ── Health Dashboard ─────────────────────────────────────────────────── */4909.peach-health-body {4910  flex: 1;4911  overflow-y: auto;4912  display: flex;4913  flex-direction: column;4914  /* Hide the platform scrollbar — every other scrollable surface in the4915   * popup hides it; the Health view was the one outlier and it ruined the4916   * polish. Behavior unchanged, just no rail rendered. */4917  scrollbar-width: none;4918  -ms-overflow-style: none;4919}4920.peach-health-body::-webkit-scrollbar { display: none; }49214922/* Loading screen for the Vault Health view. The advanced report computation4923 * can run for a few seconds on a large vault — without a clear loading4924 * screen the surface looked broken (the entry view bleeds through the4925 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4926.peach-health-loading-screen {4927  flex: 1;4928  display: flex;4929  flex-direction: column;4930  align-items: center;4931  justify-content: center;4932  gap: 14px;4933  padding: 32px 28px;4934  text-align: center;4935}49364937.peach-health-loading-glyph {4938  width: 48px;4939  height: 48px;4940  display: flex;4941  align-items: center;4942  justify-content: center;4943  border-radius: 14px;4944  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4945  color: var(--peach-accent);4946}49474948.peach-health-loading-title {4949  margin: 0;4950  font-family: var(--font-display);4951  font-style: italic;4952  font-weight: 300;4953  font-size: 19px;4954  line-height: 1.2;4955  color: var(--peach-t0);4956}49574958.peach-health-loading-copy {4959  margin: 0;4960  max-width: 240px;4961  font-size: 0.75rem;4962  line-height: 1.55;4963  color: var(--peach-t2);4964}49654966.peach-health-loading-track {4967  width: 200px;4968  height: 3px;4969  margin-top: 6px;4970  border-radius: 999px;4971  background: rgba(240, 232, 216, 0.06);4972  overflow: hidden;4973}49744975.peach-health-loading-fill {4976  width: 40%;4977  height: 100%;4978  border-radius: inherit;4979  background: linear-gradient(4980    90deg,4981    transparent 0%,4982    var(--peach-accent) 50%,4983    transparent 100%4984  );4985  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4986}49874988@keyframes peach-health-loading-sweep {4989  0%   { transform: translateX(-100%); }4990  100% { transform: translateX(350%); }4991}49924993[data-motion="reduce"] .peach-health-loading-fill,4994[data-motion="reduce"] .peach-health-loading-glyph svg path {4995  animation: none;4996}49974998.peach-health-summary {4999  padding: 10px 16px 6px;5000  font-family: "IBM Plex Mono", monospace;5001  font-size: 0.6875rem;5002}5003.peach-health-summary-warn { color: rgba(220,80,60,0.9); }5004.peach-health-summary-ok { color: var(--peach-t2); }50055006.peach-health-check-row {5007  padding: 0 16px 10px;5008}5009.peach-health-check-btn {5010  width: 100%;5011  display: flex;5012  align-items: center;5013  justify-content: center;5014}50155016.peach-health-sections {5017  flex: 1;5018  display: flex;5019  flex-direction: column;5020}50215022.peach-health-section {5023  border-bottom: 1px solid var(--peach-t3);5024}50255026.peach-health-section-header {5027  width: 100%;5028  display: flex;5029  align-items: center;5030  justify-content: space-between;5031  padding: 9px 16px;5032  background: transparent;5033  cursor: pointer;5034  color: var(--peach-t0);5035}50365037.peach-health-section-title-row {5038  display: flex;5039  align-items: center;5040  gap: 8px;5041}50425043.peach-health-count-badge {5044  display: inline-flex;5045  align-items: center;5046  justify-content: center;5047  min-width: 20px;5048  height: 18px;5049  padding: 0 5px;5050  border-radius: 999px;5051  background: rgba(220,80,60,0.15);5052  border: 1px solid rgba(220,80,60,0.25);5053  font-family: "IBM Plex Mono", monospace;5054  font-size: 0.5625rem;5055  color: rgba(220,80,60,0.9);5056}50575058.peach-health-section-title {5059  font-family: "IBM Plex Mono", monospace;5060  font-size: 0.6875rem;5061  text-transform: uppercase;5062  letter-spacing: 0.1em;5063  color: var(--peach-t1);5064}50655066.peach-health-chevron {5067  color: var(--peach-t2);5068  transition: transform 200ms ease;5069  flex-shrink: 0;5070}5071.peach-health-chevron.is-expanded {5072  transform: rotate(180deg);5073}50745075.peach-health-section-body {5076  padding: 0 16px 10px;5077  display: flex;5078  flex-direction: column;5079  gap: 4px;5080}50815082.peach-health-row {5083  display: flex;5084  align-items: flex-start;5085  justify-content: space-between;5086  gap: 8px;5087  padding: 6px 8px;5088  border-radius: 8px;5089  background: rgba(240,232,216,0.02);5090}50915092.peach-health-row-info {5093  flex: 1;5094  min-width: 0;5095  display: flex;5096  flex-direction: column;5097  gap: 2px;5098}50995100.peach-health-row-name {5101  font-family: var(--font-display);5102  font-size: 0.9375rem;5103  font-style: italic;5104  font-weight: 400;5105  color: var(--peach-t0);5106  white-space: nowrap;5107  overflow: hidden;5108  text-overflow: ellipsis;5109}51105111.peach-health-row-meta {5112  font-family: "IBM Plex Mono", monospace;5113  font-size: 0.5625rem;5114  color: var(--peach-t2);5115  letter-spacing: 0.05em;5116}51175118.peach-health-fix-btn {5119  font-size: 0.5625rem;5120  letter-spacing: 0.08em;5121  text-transform: uppercase;5122  padding: 4px 7px;5123  flex-shrink: 0;5124  display: flex;5125  align-items: center;5126}51275128.peach-health-empty {5129  font-family: "IBM Plex Mono", monospace;5130  font-size: 0.625rem;5131  color: var(--peach-t2);5132  padding: 6px 0;5133}51345135.peach-health-loading {5136  font-family: "IBM Plex Mono", monospace;5137  font-size: 0.625rem;5138  color: var(--peach-t2);5139  padding: 6px 0;5140  display: flex;5141  align-items: center;5142  gap: 6px;5143}51445145.peach-health-loading::before {5146  content: "";5147  width: 10px;5148  height: 10px;5149  border: 1.5px solid var(--peach-t3);5150  border-top-color: var(--peach-accent);5151  border-radius: 50%;5152  animation: peach-spin 600ms linear infinite;5153}51545155@keyframes peach-spin {5156  to { transform: rotate(360deg); }5157}51585159.peach-spinner {5160  width: 32px;5161  height: 32px;5162  border: 2px solid var(--peach-s2);5163  border-top-color: var(--peach-accent);5164  border-radius: 50%;5165  margin: 0 auto 16px;5166  animation: peach-spin 0.8s linear infinite;5167}51685169.peach-progress-screen {5170  text-align: center;5171  padding: 32px 16px;5172}51735174.peach-progress-screen-title {5175  font-size: 0.8125rem;5176  color: var(--peach-t0);5177  margin-bottom: 16px;5178}51795180.peach-progress-screen-stage {5181  font-size: 0.6875rem;5182  color: var(--peach-t2);5183  min-height: 14px;5184}51855186.peach-progress-screen-note {5187  font-size: 0.625rem;5188  color: var(--peach-t2);5189  margin-top: 8px;5190}51915192.peach-pairing-body {5193  flex: 1;5194  overflow-y: auto;5195  display: flex;5196  flex-direction: column;5197}51985199.peach-pairing-content {5200  flex: 1;5201  display: flex;5202  flex-direction: column;5203  align-items: center;5204  justify-content: center;5205  gap: 14px;5206  padding: 28px 20px;5207  text-align: center;5208}52095210.peach-pairing-code-screen {5211  gap: 18px;5212}52135214.peach-pairing-headline {5215  font-family: var(--font-display);5216  font-style: italic;5217  font-weight: 300;5218  font-size: 28px;5219  color: var(--peach-t0);5220  margin: 0;5221  line-height: 1;5222}52235224.peach-pairing-subline {5225  font-size: 0.75rem;5226  color: var(--peach-t2);5227  max-width: 220px;5228  line-height: 1.5;5229  margin: 0;5230}52315232.peach-pairing-subline--center {5233  text-align: center;5234}52355236/* 6-digit pairing code — both display (.peach-pairing-code) and entry5237   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking5238   so the two modes feel like the same surface. */5239.peach-pairing-code {5240  font-family: "IBM Plex Mono", monospace;5241  font-size: 36px;5242  letter-spacing: 0.25em;5243  color: var(--peach-t0);5244  text-align: center;5245  padding: 24px 0;5246  text-shadow:5247    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),5248    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);5249  background: transparent;5250  border: 0;5251  cursor: default;5252  user-select: text;5253}52545255.peach-pairing-code--loading,5256.peach-pairing-code--expired {5257  font-size: 18px;5258  letter-spacing: 0.04em;5259  color: var(--peach-t2);5260  cursor: pointer;5261  text-shadow: none;5262}52635264.peach-pairing-qr-container {5265  display: flex;5266  flex-direction: column;5267  align-items: center;5268  gap: 10px;5269}52705271.peach-pairing-qr {5272  width: 240px;5273  height: 240px;5274  display: block;5275}52765277.peach-pairing-instruction {5278  font-size: 0.75rem;5279  color: var(--peach-t2);5280  text-align: center;5281  line-height: 1.5;5282  margin: 0;5283  max-width: 220px;5284}52855286.peach-pairing-expiry {5287  font-family: "IBM Plex Mono", monospace;5288  font-size: 13px;5289  letter-spacing: 0.06em;5290  color: var(--peach-t2);5291  margin: 0;5292}52935294.peach-pairing-regen {5295  font-size: 0.75rem;5296  color: var(--peach-accent);5297  background: transparent;5298  border: 0;5299  cursor: pointer;5300  padding: 4px 0;5301  text-decoration: underline;5302  text-underline-offset: 2px;5303}53045305.peach-pairing-code-input {5306  font-family: "IBM Plex Mono", monospace;5307  font-size: 36px;5308  letter-spacing: 0.25em;5309  color: var(--peach-t0);5310  background: transparent;5311  border: 0;5312  border-bottom: 1px solid var(--peach-t3);5313  outline: none;5314  text-align: center;5315  padding: 18px 0;5316  width: 220px;5317  caret-color: var(--peach-accent);5318  transition: border-color 160ms ease;5319}53205321.peach-pairing-code-input::placeholder {5322  color: var(--peach-t3);5323}53245325.peach-pairing-code-input:focus {5326  border-bottom-color: var(--peach-accent);5327}53285329.peach-pairing-toggle {5330  background: transparent;5331  border: 0;5332  color: var(--peach-t2);5333  font-size: 0.75rem;5334  padding: 8px 4px;5335  cursor: pointer;5336  transition: color 120ms ease;5337}53385339.peach-pairing-toggle:hover:not(:disabled) {5340  color: var(--peach-t1);5341}53425343.peach-pairing-toggle:disabled {5344  opacity: 0.5;5345  cursor: default;5346}53475348.peach-pairing-hint {5349  font-size: 0.6875rem;5350  color: var(--peach-t2);5351  margin: 0;5352  text-align: center;5353}53545355.peach-pairing-status {5356  display: flex;5357  align-items: center;5358  gap: 8px;5359  margin: 0;5360  font-size: 0.75rem;5361  color: var(--peach-t1);5362}53635364.peach-pairing-error {5365  margin: 0;5366  font-size: 0.6875rem;5367  color: var(--peach-breach);5368}53695370.peach-pairing-error--muted {5371  color: var(--peach-t2);5372}53735374.peach-pairing-spinner {5375  width: 12px;5376  height: 12px;5377  border: 1.5px solid var(--peach-t3);5378  border-top-color: var(--peach-accent);5379  border-radius: 50%;5380  animation: peach-spin 0.8s linear infinite;5381}53825383.peach-pairing-success-icon,5384.peach-pairing-error-icon,5385.peach-pairing-hero {5386  display: inline-flex;5387  align-items: center;5388  justify-content: center;5389}53905391/* Tag chips */5392.peach-tag-chip {5393  display: inline-flex;5394  align-items: center;5395  gap: 4px;5396  padding: 3px 8px;5397  border-radius: 999px;5398  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5399  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5400  color: var(--peach-t0);5401  font-family: "IBM Plex Mono", monospace;5402  font-size: 0.625rem;5403  letter-spacing: 0.04em;5404}54055406.peach-tag-chip-remove {5407  background: transparent;5408  border: none;5409  color: inherit;5410  opacity: 0.6;5411  cursor: pointer;5412  padding: 0;5413  font-size: 0.75rem;5414  line-height: 1;5415}54165417.peach-tag-chip-remove:hover {5418  opacity: 1;5419}54205421/* Tag input */5422.peach-tag-input-wrap {5423  border-bottom: 1px solid var(--peach-t3);5424}54255426.peach-tag-suggestions {5427  display: flex;5428  flex-wrap: wrap;5429  gap: 4px;5430  padding: 6px 0;5431}54325433.peach-tag-suggestion {5434  padding: 2px 8px;5435  border-radius: 999px;5436  border: 1px solid var(--peach-t3);5437  background: var(--peach-s2);5438  color: var(--peach-t1);5439  font-family: "IBM Plex Mono", monospace;5440  font-size: 0.625rem;5441  cursor: pointer;5442  transition: border-color 80ms ease, background 80ms ease;5443}54445445.peach-tag-suggestion:hover {5446  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5447  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5448}54495450/* Identity suggestions — shown below username/email inputs in new-entry form */5451@keyframes peach-suggest-in {5452  from { opacity: 0; transform: translateY(-4px); }5453  to   { opacity: 1; transform: none; }5454}54555456.peach-identity-suggestions {5457  display: flex;5458  flex-direction: column;5459  gap: 1px;5460  margin-top: 4px;5461  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5462}54635464.peach-identity-filter-row {5465  display: flex;5466  align-items: center;5467  gap: 4px;5468  padding: 2px 0 5px;5469}54705471.peach-identity-collapse-btn {5472  margin-left: auto;5473  background: transparent;5474  border: none;5475  cursor: pointer;5476  color: var(--peach-t3);5477  padding: 2px 4px;5478  display: flex;5479  align-items: center;5480  line-height: 0;5481  border-radius: 3px;5482  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5483}54845485.peach-identity-collapse-btn:hover {5486  color: var(--peach-t1);5487}54885489.peach-identity-collapse-btn.is-collapsed {5490  transform: rotate(-90deg);5491}54925493.peach-identity-rows {5494  display: grid;5495  grid-template-rows: 1fr;5496  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5497}54985499.peach-identity-rows.is-collapsed {5500  grid-template-rows: 0fr;5501}55025503.peach-identity-rows-inner {5504  overflow-y: auto;5505  min-height: 0;5506  max-height: 148px;5507  scrollbar-width: thin;5508  scrollbar-color: var(--peach-t3) transparent;5509  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5510  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5511}55125513.peach-identity-rows-inner::-webkit-scrollbar {5514  width: 4px;5515}55165517.peach-identity-rows-inner::-webkit-scrollbar-track {5518  background: transparent;5519}55205521.peach-identity-rows-inner::-webkit-scrollbar-thumb {5522  background: var(--peach-t3);5523  border-radius: 2px;5524}55255526.peach-identity-filter-pill {5527  padding: 2px 7px;5528  border-radius: 999px;5529  border: 1px solid var(--peach-t3);5530  background: transparent;5531  color: var(--peach-t2);5532  font-family: "IBM Plex Mono", monospace;5533  font-size: 0.6rem;5534  cursor: pointer;5535  transition: border-color 80ms, background 80ms, color 80ms;5536}55375538.peach-identity-filter-pill.is-on {5539  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5540  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5541  color: var(--peach-accent);5542}55435544.peach-identity-suggestion {5545  display: flex;5546  align-items: center;5547  gap: 6px;5548  width: 100%;5549  padding: 4px 6px;5550  border-radius: 5px;5551  border: none;5552  background: transparent;5553  cursor: pointer;5554  text-align: left;5555  transition: background 80ms ease;5556}55575558.peach-identity-suggestion:hover,5559.peach-identity-suggestion:focus {5560  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5561  outline: none;5562}55635564.peach-identity-suggestion-value {5565  font-family: "IBM Plex Mono", monospace;5566  font-size: 0.7rem;5567  color: var(--peach-t1);5568  overflow: hidden;5569  text-overflow: ellipsis;5570  white-space: nowrap;5571  flex: 1;5572  min-width: 0;5573}55745575.peach-identity-suggestion-type {5576  font-family: "IBM Plex Mono", monospace;5577  font-size: 0.55rem;5578  font-weight: 600;5579  flex-shrink: 0;5580  padding: 1px 4px;5581  border-radius: 3px;5582}55835584.peach-identity-suggestion-type--email {5585  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5586  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5587}55885589.peach-identity-suggestion-type--username {5590  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5591  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5592}55935594.peach-identity-suggestion-meta {5595  font-family: "IBM Plex Mono", monospace;5596  font-size: 0.6rem;5597  color: var(--peach-t3);5598  flex-shrink: 0;5599}56005601/* Tag filter strip */5602.peach-tag-filter-strip {5603  border-bottom: 1px solid var(--peach-t3);5604  flex-shrink: 0;5605}56065607.peach-tag-filter-chip {5608  display: inline-flex;5609  align-items: center;5610  padding: 4px 10px;5611  border-radius: 999px;5612  border: 1px solid var(--peach-t3);5613  background: transparent;5614  color: var(--peach-t2);5615  font-family: "IBM Plex Mono", monospace;5616  font-size: 0.5625rem;5617  letter-spacing: 0.06em;5618  text-transform: uppercase;5619  cursor: pointer;5620  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5621  white-space: nowrap;5622}56235624.peach-tag-filter-chip:hover {5625  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5626  color: var(--peach-t1);5627}56285629.peach-tag-filter-chip.is-selected {5630  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5631  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5632  color: var(--peach-t0);5633}56345635/* ─────────────────────────────────────────────────────────────────────────5636   v1.4.12 additions5637   ─────────────────────────────────────────────────────────────────────── */56385639/* Sort bar */5640.peach-sort-bar {5641  display: flex;5642  align-items: center;5643  gap: 4px;5644  padding: 5px 12px;5645  border-bottom: 1px solid var(--peach-t3);5646  flex-shrink: 0;5647  overflow-x: auto;5648  scrollbar-width: none;5649}56505651.peach-sort-btn {5652  padding: 2px 9px;5653  border-radius: 999px;5654  border: 1px solid transparent;5655  background: transparent;5656  color: var(--peach-t2);5657  font-family: "IBM Plex Mono", monospace;5658  font-size: 0.5625rem;5659  letter-spacing: 0.07em;5660  text-transform: uppercase;5661  cursor: pointer;5662  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5663  white-space: nowrap;5664}56655666.peach-sort-btn:hover {5667  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5668  color: var(--peach-t1);5669}56705671.peach-sort-btn.is-active {5672  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5673  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5674  color: var(--peach-t0);5675}56765677.peach-sort-scope-btn {5678  padding-inline: 8px;5679  font-size: 0.53125rem;5680  letter-spacing: 0.05em;5681}56825683.peach-sort-domain-hint {5684  margin-left: auto;5685  font-family: "IBM Plex Mono", monospace;5686  font-size: 0.5625rem;5687  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5688  white-space: nowrap;5689  overflow: hidden;5690  text-overflow: ellipsis;5691  max-width: 110px;5692}56935694/* Tab-match badge on entry rows */5695.peach-tab-match-badge {5696  display: inline-block;5697  width: 6px;5698  height: 6px;5699  border-radius: 50%;5700  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5701  margin-left: 5px;5702  vertical-align: middle;5703  flex-shrink: 0;5704  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5705}57065707.peach-entry-row.is-tab-match {5708  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5709  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5710}57115712.peach-entry-row.is-tab-match:hover {5713  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5714}57155716/* Entry list stagger entrance */5717@keyframes peach-entry-fadein {5718  from { opacity: 0; transform: translateY(4px); }5719  to   { opacity: 1; transform: translateY(0); }5720}57215722.peach-vault-list .peach-entry-row {5723  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5724}57255726/* Button press micro-interaction */5727.peach-btn:active {5728  transform: scale(0.95);5729  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5730}57315732.peach-sort-btn:active,5733.peach-tag-filter-chip:active {5734  transform: scale(0.93);5735  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5736}57375738/* Password strength bar (Lock view + shared) */5739.peach-password-strength {5740  display: flex;5741  align-items: center;5742  gap: 8px;5743  margin-top: 6px;5744}57455746.peach-strength-bar {5747  flex: 1;5748  height: 3px;5749  border-radius: 2px;5750  background: var(--peach-t3);5751  overflow: hidden;5752}57535754.peach-strength-fill {5755  height: 100%;5756  border-radius: 2px;5757  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5758              background 300ms ease;5759}57605761.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5762.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5763.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5764.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }57655766.peach-strength-label {5767  font-family: "IBM Plex Mono", monospace;5768  font-style: italic;5769  font-size: 0.5625rem;5770  font-weight: 300;5771  letter-spacing: 0.06em;5772  color: var(--peach-t2);5773  min-width: 36px;5774  text-align: right;5775}57765777.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5778.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5779.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5780.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }57815782/* Duress form */5783.peach-duress-status {5784  padding: 2px 8px;5785  border-radius: 999px;5786  border: 1px solid var(--peach-t3);5787  font-family: "IBM Plex Mono", monospace;5788  font-size: 0.5625rem;5789  letter-spacing: 0.07em;5790  text-transform: uppercase;5791  color: var(--peach-t2);5792  flex-shrink: 0;5793}57945795.peach-duress-status.is-active {5796  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5797  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5798  color: var(--peach-t0);5799}58005801.peach-duress-form {5802  padding: 8px 0 4px;5803  display: flex;5804  flex-direction: column;5805  gap: 6px;5806}58075808.peach-duress-form .peach-label {5809  margin-top: 4px;5810}58115812.peach-duress-actions {5813  display: flex;5814  gap: 6px;5815  align-items: center;5816  margin-top: 4px;5817}58185819.peach-duress-actions .peach-btn:first-child {5820  margin-right: auto;5821}58225823/* Improved overlay spring entrance */5824.peach-overlay-view.ov-enter-up {5825  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5826}58275828@keyframes ov-enter-up-spring {5829  from { opacity: 0; transform: translateY(16px) scale(0.98); }5830  to   { opacity: 1; transform: translateY(0) scale(1); }5831}58325833.peach-overlay-view.ov-enter-right {5834  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5835}58365837@keyframes ov-enter-right-spring {5838  from { opacity: 0; transform: translateX(18px) scale(0.98); }5839  to   { opacity: 1; transform: translateX(0) scale(1); }5840}58415842/* ── Onboarding-mode restore screens (file import) ── */5843/* Used when MainImportView renders during onboarding (no vault yet).5844   Animates like a lock-screen transition. */5845.peach-lock-view {5846  position: absolute;5847  inset: 0;5848  display: flex;5849  flex-direction: column;5850  background:5851    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5852    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5853    var(--peach-bg);5854  z-index: 2;5855  overflow: hidden;5856  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5857}58585859.peach-lock-view-header {5860  display: flex;5861  align-items: center;5862  justify-content: space-between;5863  padding: 16px 18px 12px;5864  flex-shrink: 0;5865}58665867/* ───────── Settings: auto-lock select ───────── */5868.peach-settings-select {5869  font-family: "IBM Plex Mono", monospace;5870  font-size: 0.6875rem;5871  background: transparent;5872  border: 1px solid var(--peach-t3);5873  border-radius: 4px;5874  color: var(--peach-t1);5875  padding: 3px 6px;5876  cursor: pointer;5877  outline: none;5878}5879.peach-settings-select:focus {5880  border-color: var(--peach-accent);5881}58825883/* ───────── Duress status pill (new polished) ───────── */5884.peach-duress-status-pill {5885  font-family: "IBM Plex Mono", monospace;5886  font-size: 0.5625rem;5887  text-transform: uppercase;5888  letter-spacing: 0.12em;5889  padding: 2px 8px;5890  border-radius: 12px;5891  background: var(--peach-t3);5892  color: var(--peach-t2);5893  flex-shrink: 0;5894}5895.peach-duress-status-pill.is-active {5896  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5897  color: var(--peach-accent);5898}58995900/* ───────── Entry advanced disclosure (canary) ───────── */5901.peach-entry-advanced {5902  margin-top: 12px;5903  border-top: 1px solid var(--peach-t3);5904  padding-top: 10px;5905  position: relative;5906  z-index: 1;5907}5908.peach-entry-advanced-toggle {5909  display: flex;5910  align-items: center;5911  justify-content: space-between;5912  width: 100%;5913  background: transparent;5914  border: none;5915  cursor: pointer;5916  padding: 0;5917  color: var(--peach-t2);5918}5919.peach-canary-section {5920  margin-top: 10px;5921  display: grid;5922  gap: 6px;5923}59245925/* ───────── Import: merge/replace radio choices ───────── */5926.peach-import-choice {5927  display: flex;5928  align-items: flex-start;5929  gap: 10px;5930  padding: 8px 10px;5931  border: 1px solid var(--peach-t3);5932  border-radius: 10px;5933  cursor: pointer;5934  margin-bottom: 6px;5935  transition: border-color 120ms ease, background 120ms ease;5936}5937.peach-import-choice:hover {5938  border-color: var(--peach-accent);5939}5940.peach-import-choice input[type="radio"] {5941  margin-top: 3px;5942  accent-color: var(--peach-accent);5943  flex-shrink: 0;5944}5945.peach-import-choice-main {5946  display: flex;5947  flex-direction: column;5948  gap: 2px;5949  min-width: 0;5950}5951.peach-import-choice-label {5952  font-size: 0.75rem;5953  color: var(--peach-t0);5954}5955.peach-import-choice-sub {5956  font-size: 0.6875rem;5957  color: var(--peach-t2);5958  line-height: 1.5;5959}59605961/* ───────── Export: success confirmation strip ───────── */5962.peach-export-success {5963  display: flex;5964  align-items: flex-start;5965  gap: 10px;5966  padding: 12px;5967  border-radius: 12px;5968  border: 1px solid rgba(150, 175, 110, 0.3);5969  background: rgba(150, 175, 110, 0.08);5970  color: var(--peach-t0);5971  font-size: 0.75rem;5972  line-height: 1.55;5973}5974.peach-export-success-check {5975  color: rgba(150, 175, 110, 0.9);5976  font-size: 0.875rem;5977  flex-shrink: 0;5978}59795980/* ── Trash view ──────────────────────────────────────────────────────── */5981.peach-trash-entry-row {5982  display: flex;5983  align-items: center;5984  justify-content: space-between;5985  gap: 8px;5986  padding: 8px 0;5987  border-bottom: 1px solid var(--peach-border);5988}5989.peach-trash-entry-info {5990  flex: 1;5991  min-width: 0;5992  display: flex;5993  flex-direction: column;5994  gap: 2px;5995}5996.peach-trash-entry-title {5997  font-size: 0.8125rem;5998  color: var(--peach-t0);5999  overflow: hidden;6000  text-overflow: ellipsis;6001  white-space: nowrap;6002}6003.peach-trash-entry-meta {6004  font-family: var(--font-mono);6005  font-size: 0.5625rem;6006  color: var(--peach-t2);6007  letter-spacing: 0.04em;6008}6009.peach-trash-entry-actions {6010  display: flex;6011  align-items: center;6012  gap: 4px;6013  flex-shrink: 0;6014}6015.peach-trash-delete-btn {6016  background: transparent;6017  border: 0;6018  color: var(--peach-t3);6019  font-size: 1rem;6020  line-height: 1;6021  cursor: pointer;6022  padding: 2px 5px;6023  transition: color 0.15s;6024}6025.peach-trash-delete-btn:hover { color: var(--peach-breach); }6026.peach-trash-list {6027  overflow-y: auto;6028}6029.peach-trash-footer {6030  display: flex;6031  align-items: center;6032  gap: 8px;6033  padding: 8px 0 0;6034  border-top: 1px solid var(--peach-border);6035  margin-top: 4px;6036}6037.peach-trash-purge-all {6038  background: transparent;6039  border: 0;6040  color: var(--peach-t3);6041  font-size: 0.625rem;6042  cursor: pointer;6043  padding: 4px 0;6044  letter-spacing: 0.03em;6045  transition: color 0.2s;6046}6047.peach-trash-purge-all:hover { color: var(--peach-breach); }6048.peach-trash-purge-confirm-label {6049  font-size: 0.625rem;6050  color: var(--peach-t1);6051  flex: 1;6052}60536054/* ── Settings shortcuts grid ─────────────────────────────────────────── */6055.peach-shortcuts-grid {6056  display: grid;6057  grid-template-columns: auto 1fr;6058  gap: 6px 12px;6059  align-items: center;6060  padding: 4px 0;6061}6062.peach-shortcut-key {6063  font-family: var(--font-mono);6064  font-size: 0.625rem;6065  color: var(--peach-t0);6066  background: var(--peach-t3);6067  border-radius: 4px;6068  padding: 2px 6px;6069  white-space: nowrap;6070  text-align: center;6071}6072.peach-shortcut-desc {6073  font-size: 0.6875rem;6074  color: var(--peach-t1);6075}60766077/* ── Sort bar trash button ───────────────────────────────────────────── */6078.peach-sort-trash-btn {6079  display: flex;6080  align-items: center;6081  justify-content: center;6082  padding: 3px 5px;6083  background: transparent;6084  border: none;6085  cursor: pointer;6086  color: var(--peach-t2);6087  border-radius: 4px;6088  transition: color 140ms ease, background 140ms ease;6089}6090.peach-sort-trash-btn:hover {6091  color: var(--peach-t1);6092  background: var(--peach-t3);6093}6094.peach-sort-trash-btn.is-active {6095  color: var(--peach-accent);6096}60976098/* Accent color picker */6099.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }6100.peach-accent-picker {6101  display: flex;6102  flex-wrap: wrap;6103  gap: 7px;6104  padding: 2px 0;6105}6106.peach-accent-swatch {6107  width: 22px;6108  height: 22px;6109  border-radius: 50%;6110  border: 2px solid transparent;6111  cursor: pointer;6112  padding: 0;6113  transition: transform 100ms;6114  outline-offset: 2px;6115}6116.peach-accent-swatch:hover { transform: scale(1.15); }6117.peach-accent-swatch.is-active {6118  border-color: var(--peach-t0);6119  transform: scale(1.1);6120}61216122.peach-pill-group {6123  display: flex;6124  gap: 6px;6125}6126.peach-pill-group .peach-btn.is-active {6127  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);6128  border-color: var(--peach-accent);6129  color: var(--peach-t0);6130}61316132/* ── Card entry styles ───────────────────────────────────────── */6133.peach-card-number {6134  font-family: var(--peach-mono);6135  letter-spacing: 0.08em;6136}61376138.peach-card-network-badge {6139  font-size: 0.625rem;6140  padding: 1px 5px;6141  border-radius: 4px;6142  border: 0.5px solid var(--peach-border);6143  color: var(--peach-text-dim);6144  margin-left: 6px;6145  vertical-align: middle;6146}61476148.peach-card-expiry-row {6149  display: flex;6150  align-items: center;6151  gap: 8px;6152}61536154.peach-card-expiry-sep {6155  color: var(--peach-text-dim);6156}61576158/* ── Pro tier — upgrade screen ──────────────────────────────── */6159.peach-pro-mark {6160  font-size: 0.5625rem;6161  color: var(--peach-accent);6162  margin-left: 6px;6163  vertical-align: super;6164  opacity: 0.7;6165}61666167.peach-pro-mini-badge {6168  display: block;6169  font-size: 0.625rem;6170  font-style: italic;6171  color: var(--peach-accent);6172  letter-spacing: 0.04em;6173  margin-top: -2px;6174  padding-left: 2px;6175  opacity: 0.85;6176  text-align: center;6177}61786179.peach-wordmark-stack {6180  display: inline-flex;6181  flex-direction: column;6182  align-items: center;6183}61846185/* ── Pro tier — upgrade page ─────────────────────────────────── */6186/* ── Pro upgrade — redesigned editorial layout ─────────────────── */61876188.peach-pro-upgrade {6189  display: flex;6190  flex-direction: column;6191  align-items: stretch;6192  gap: 10px;6193  padding: 2px 2px 12px;6194}61956196.peach-pro-eyebrow {6197  margin: 0;6198  font-family: var(--font-ui);6199  font-size: 0.625rem;6200  font-weight: 500;6201  letter-spacing: 0.12em;6202  color: var(--peach-accent);6203}62046205.peach-pro-headline {6206  margin: 0;6207  font-family: var(--font-display, "Cormorant Garamond", serif);6208  font-size: 30px;6209  font-weight: 700;6210  font-style: normal;6211  line-height: 1.05;6212  color: var(--peach-t0);6213  letter-spacing: -0.01em;6214}6215.peach-pro-headline em {6216  font-style: italic;6217  font-weight: 400;6218  color: var(--peach-accent);6219}62206221.peach-pro-subtitle {6222  margin: 0;6223  font-size: 0.6875rem;6224  line-height: 1.5;6225  color: var(--peach-t1);6226}62276228/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6229.peach-pro-section-label {6230  margin: 6px 0 0;6231  font-family: var(--font-ui);6232  font-size: 0.5625rem;6233  font-weight: 500;6234  letter-spacing: 0.12em;6235  text-transform: uppercase;6236  color: var(--peach-t2);6237}62386239/* 2-column numbered feature grid */6240.peach-pro-grid {6241  display: grid;6242  grid-template-columns: 1fr 1fr;6243  border-top: 1px solid var(--peach-border);6244  border-left: 1px solid var(--peach-border);6245}62466247.peach-pro-grid-item {6248  display: flex;6249  flex-direction: column;6250  gap: 2px;6251  padding: 8px 9px;6252  border-right: 1px solid var(--peach-border);6253  border-bottom: 1px solid var(--peach-border);6254}62556256.peach-pro-grid-item--wide {6257  grid-column: 1 / -1;6258}62596260.peach-pro-grid-num {6261  font-family: var(--font-mono);6262  font-size: 0.5625rem;6263  color: var(--peach-accent);6264  letter-spacing: 0.06em;6265  opacity: 0.85;6266}62676268.peach-pro-grid-name {6269  font-size: 0.8125rem;6270  font-weight: 500;6271  color: var(--peach-t0);6272  line-height: 1.2;6273}62746275.peach-pro-grid-desc {6276  font-size: 0.625rem;6277  color: var(--peach-t1);6278  line-height: 1.4;6279}62806281.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6282  animation: peach-pulse-accent 600ms ease-out forwards;6283}62846285@keyframes peach-pulse-accent {6286  0%   { opacity: 1; transform: scale(1.2); }6287  100% { opacity: 0.85; transform: scale(1); }6288}62896290/* Actions */6291.peach-pro-upgrade-actions {6292  display: flex;6293  flex-direction: column;6294  align-items: stretch;6295  gap: 10px;6296}62976298.peach-pro-pricing {6299  margin: 0;6300  font-size: 1rem;6301  font-weight: 600;6302  color: var(--peach-t0);6303  letter-spacing: 0.01em;6304}6305.peach-pro-pricing-sub {6306  font-size: 0.75rem;6307  font-weight: 400;6308  color: var(--peach-t1);6309  letter-spacing: 0.02em;6310}63116312.peach-pro-upgrade-cta {6313  display: flex;6314  align-items: center;6315  justify-content: center;6316  text-decoration: none;6317  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6318  border: 1px solid var(--peach-accent);6319  border-radius: 10px;6320  color: var(--peach-accent);6321  font-family: var(--font-ui);6322  font-size: 0.8125rem;6323  font-weight: 600;6324  letter-spacing: 0.06em;6325  padding: 11px 16px;6326  transition: background 0.15s ease, color 0.15s ease;6327}6328.peach-pro-upgrade-cta:hover {6329  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6330}63316332.peach-pro-key-divider {6333  display: flex;6334  align-items: center;6335  gap: 8px;6336  color: var(--peach-t2);6337  font-size: 0.5625rem;6338  letter-spacing: 0.1em;6339}6340.peach-pro-key-divider::before,6341.peach-pro-key-divider::after {6342  content: "";6343  flex: 1;6344  height: 1px;6345  background: var(--peach-border);6346}63476348/* Inline key entry row */6349.peach-pro-key-inline {6350  display: flex;6351  align-items: center;6352  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6353  border: 1px solid var(--peach-border);6354  border-radius: 8px;6355  overflow: hidden;6356}6357.peach-pro-key-inline-input {6358  flex: 1;6359  background: transparent;6360  border: none;6361  outline: none;6362  color: var(--peach-t1);6363  font-family: var(--font-mono);6364  font-size: 0.625rem;6365  letter-spacing: 0.06em;6366  padding: 9px 10px;6367}6368.peach-pro-key-inline-input::placeholder {6369  color: var(--peach-t2);6370}6371.peach-pro-key-apply {6372  background: transparent;6373  border: none;6374  border-left: 1px solid var(--peach-border);6375  color: var(--peach-t2);6376  font-family: var(--font-ui);6377  font-size: 0.5625rem;6378  font-weight: 600;6379  letter-spacing: 0.08em;6380  padding: 9px 10px;6381  cursor: pointer;6382  transition: color 0.15s ease;6383  flex-shrink: 0;6384}6385.peach-pro-key-apply:not(:disabled):hover {6386  color: var(--peach-accent);6387}6388.peach-pro-key-apply:disabled {6389  opacity: 0.35;6390  cursor: not-allowed;6391}63926393/* ── Pro tier — key ceremony ─────────────────────────────────── */6394.peach-pro-key-ceremony {6395  display: flex;6396  flex-direction: column;6397  align-items: center;6398  gap: 12px;6399  padding: 20px 4px 16px;6400}64016402.peach-pro-key-ceremony .peach-lock-rune-string {6403  font-size: 1rem;6404  gap: 12px;6405  flex: 0;6406  justify-content: center;6407}64086409.peach-pro-key-ceremony-label {6410  margin: 0;6411  font-size: 0.6875rem;6412  color: var(--peach-t2);6413  font-style: italic;6414  letter-spacing: 0.04em;6415}64166417.peach-pro-key-input {6418  font-family: var(--font-mono, monospace);6419  letter-spacing: 0.06em;6420  text-align: center;6421  width: 100%;6422  box-sizing: border-box;6423}64246425.peach-pro-key-error {6426  margin: 0;6427  font-size: 0.75rem;6428  text-align: center;6429  color: var(--peach-breach, #e55);6430  padding: 0;6431}64326433.peach-pro-key-activate {6434  width: 100%;6435  text-align: center;6436  box-sizing: border-box;6437  padding: 10px 20px;6438  font-size: 0.8125rem;6439}64406441.peach-pro-key-cancel {6442  background: transparent;6443  border: 0;6444  color: var(--peach-t2);6445  font-size: 0.6875rem;6446  cursor: pointer;6447  padding: 2px 8px;6448  transition: color 0.2s;6449}64506451.peach-pro-key-cancel:hover { color: var(--peach-accent); }64526453/* ── Pro tier — active state ─────────────────────────────────── */6454.peach-pro-active {6455  display: flex;6456  flex-direction: column;6457  align-items: center;6458  gap: 0;6459  padding: 8px 4px 16px;6460  min-height: 280px;6461}64626463.peach-pro-active-hero {6464  display: flex;6465  flex-direction: column;6466  align-items: center;6467  gap: 6px;6468  padding: 20px 0 8px;6469}64706471.peach-pro-active-mark-wrap {6472  display: flex;6473  align-items: center;6474  justify-content: center;6475  margin-bottom: 4px;6476}64776478.peach-pro-active-mark {6479  width: 60px;6480  height: 60px;6481}64826483.peach-pro-active-title {6484  font-family: var(--font-display, var(--font-ui));6485  font-size: 26px;6486  margin: 0;6487  color: var(--peach-t0);6488  letter-spacing: 0.01em;6489}64906491.peach-pro-active-since {6492  margin: 0;6493  font-size: 0.6875rem;6494  color: var(--peach-t2);6495  font-style: italic;6496}64976498.peach-pro-active-features {6499  display: flex;6500  flex-direction: column;6501  gap: 8px;6502  width: 100%;6503  padding: 14px 8px 0;6504  border-top: 1px solid var(--peach-border);6505  flex: 1;6506}65076508.peach-pro-active-feature {6509  display: flex;6510  align-items: center;6511  gap: 9px;6512}65136514.peach-pro-active-feature-mark {6515  color: var(--peach-accent);6516  font-size: 0.625rem;6517  opacity: 0.65;6518  flex-shrink: 0;6519}65206521.peach-pro-active-feature-name {6522  font-size: 0.75rem;6523  color: var(--peach-t1);6524}65256526.peach-pro-deactivate {6527  align-self: center;6528  background: transparent;6529  border: 0;6530  color: var(--peach-t3);6531  font-size: 0.625rem;6532  cursor: pointer;6533  padding: 8px 0 0;6534  margin-top: 16px;6535  letter-spacing: 0.03em;6536  transition: color 0.2s;6537}65386539.peach-pro-deactivate:hover { color: var(--peach-t2); }65406541.peach-pro-deactivate:disabled {6542  opacity: 0.5;6543  cursor: default;6544}65456546/* ── Pro card activation sparkles & thank-you ── */6547button.peach-pro-active-mark-wrap {6548  background: transparent;6549  border: 0;6550  padding: 0;6551  cursor: pointer;6552  position: relative;6553  overflow: visible;6554}65556556.peach-pro-sparks {6557  position: absolute;6558  inset: 0;6559  pointer-events: none;6560  overflow: visible;6561}65626563.peach-pro-spark {6564  position: absolute;6565  top: 50%;6566  left: 50%;6567  font-size: 9px;6568  line-height: 1;6569  opacity: 0;6570  transform: translate(-50%, -50%);6571  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;6572}65736574@keyframes peach-pro-spark-fly {6575  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }6576  25%  { opacity: 1; }6577  100% {6578    opacity: 0;6579    transform: translate(6580      calc(-50% + var(--spark-x, 0px)),6581      calc(-50% + var(--spark-y, -40px))6582    ) scale(0.8);6583  }6584}65856586.peach-pro-thankyou-text {6587  margin: 4px 0 0;6588  font-size: 0.6875rem;6589  font-style: italic;6590  color: currentColor;6591  opacity: 0;6592  animation: peach-pro-thankyou-flash 2.5s ease both;6593}65946595@keyframes peach-pro-thankyou-flash {6596  0%   { opacity: 0; transform: translateY(4px); }6597  15%  { opacity: 0.75; transform: translateY(0); }6598  75%  { opacity: 0.75; }6599  100% { opacity: 0; }6600}66016602/* ── Pro advanced health remediation queue ──────────────────── */6603.peach-health-pro-queue {6604  display: flex;6605  flex-direction: column;6606  gap: 10px;6607  padding: 12px;6608  margin: 0 0 12px;6609  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6610  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6611  border-radius: 10px;6612}66136614.peach-health-pro-queue-head {6615  display: flex;6616  justify-content: space-between;6617  align-items: baseline;6618}66196620.peach-health-pro-queue-title {6621  font-size: 0.75rem;6622  font-weight: 500;6623  letter-spacing: 0.04em;6624  text-transform: uppercase;6625  color: var(--peach-accent);6626}66276628.peach-health-pro-queue-score {6629  font-size: 0.6875rem;6630  color: var(--peach-t2);6631}66326633.peach-health-pro-row {6634  display: flex;6635  gap: 10px;6636  align-items: center;6637  padding: 8px 0;6638  border-top: 1px solid var(--peach-border);6639}66406641.peach-health-pro-row-info {6642  flex: 1;6643  display: flex;6644  flex-direction: column;6645  gap: 4px;6646  min-width: 0;6647}66486649.peach-health-pro-action {6650  flex: 0 0 auto;6651  padding: 4px 8px;6652  font-size: 0.5625rem;6653  letter-spacing: 0.08em;6654  text-transform: uppercase;6655}66566657.peach-health-pro-row-name {6658  font-size: 0.8125rem;6659  color: var(--peach-t0);6660  overflow: hidden;6661  text-overflow: ellipsis;6662  white-space: nowrap;6663}66646665.peach-health-pro-row-meta {6666  font-size: 0.6875rem;6667  color: var(--peach-t2);6668}66696670.peach-health-pro-bar {6671  height: 2px;6672  background: var(--peach-border);6673  border-radius: 2px;6674  overflow: hidden;6675  margin-top: 2px;6676}66776678.peach-health-pro-bar-fill {6679  height: 100%;6680  background: var(--peach-accent);6681  transition: width 200ms ease-out;6682}66836684/* ── Pro activation celebration ── */6685@keyframes peach-pro-bloom {6686  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6687  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6688                 drop-shadow(0 0 48px var(--peach-glow)); }6689  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6690}66916692@keyframes peach-pro-wordmark-in {6693  from { opacity: 0; transform: translateY(4px); }6694  to   { opacity: 1; transform: translateY(0); }6695}66966697@keyframes peach-pro-fade-out {6698  from { opacity: 1; }6699  to   { opacity: 0; }6700}67016702.peach-pro-celebration {6703  background:6704    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6705    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6706    var(--peach-bg);6707  border: 1px solid var(--peach-t3);6708  box-shadow:6709    0 2px 8px rgba(0,0,0,0.55),6710    0 14px 48px rgba(0,0,0,0.7),6711    0 0 0 1px rgba(240,232,216,0.04);6712  overflow: hidden;6713  width: 320px;6714  height: 520px;6715  display: flex;6716  flex-direction: column;6717  align-items: center;6718  justify-content: center;6719  gap: 8px;6720  padding: 32px 24px;6721  text-align: center;6722}67236724.peach-pro-celebration.is-leaving {6725  animation: peach-pro-fade-out 400ms ease forwards;6726}67276728.peach-pro-bloom-target {6729  display: flex;6730  align-items: center;6731  justify-content: center;6732  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6733  margin-bottom: 12px;6734}67356736.peach-pro-bloom-icon {6737  width: 48px;6738  height: 48px;6739}67406741.peach-pro-wordmark {6742  font-family: var(--font-display);6743  font-size: 22px;6744  font-style: italic;6745  font-weight: 400;6746  color: var(--peach-accent);6747  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6748}67496750.peach-pro-thankyou {6751  font-size: 0.75rem;6752  font-style: italic;6753  color: var(--peach-t2);6754  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6755}675667576758/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6759.peach-pro-notice-banner {6760  display: flex;6761  align-items: center;6762  gap: 8px;6763  padding: 7px 12px;6764  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6765  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6766  font-size: 0.6875rem;6767  color: var(--peach-t2);6768  font-family: "IBM Plex Mono", monospace;6769  flex-shrink: 0;6770}67716772.peach-pro-notice-link {6773  background: none;6774  border: none;6775  padding: 0;6776  cursor: pointer;6777  font-size: 0.6875rem;6778  color: var(--peach-accent);6779  font-family: "IBM Plex Mono", monospace;6780  margin-left: auto;6781  white-space: nowrap;6782}67836784.peach-pro-notice-close {6785  background: none;6786  border: none;6787  padding: 0 0 0 4px;6788  cursor: pointer;6789  font-size: 0.625rem;6790  color: var(--peach-t3);6791  line-height: 1;6792}67936794/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6795   Renders over whatever view is showing. 60-second expiry; the popup ticks6796   the countdown each second and clears the banner when it hits zero. */6797.peach-pair-request-banner {6798  display: flex;6799  flex-direction: column;6800  gap: 8px;6801  padding: 10px 12px;6802  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6803  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6804  font-family: "IBM Plex Mono", monospace;6805  flex-shrink: 0;6806}68076808.peach-pair-toast {6809  padding: 8px 12px;6810  font-family: "IBM Plex Mono", monospace;6811  font-size: 0.75rem;6812  color: var(--peach-t1);6813  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6814  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6815  flex-shrink: 0;6816  text-align: center;6817}68186819.peach-pair-toast strong {6820  color: var(--peach-t0);6821  font-weight: 500;6822}68236824.peach-pair-request-header {6825  display: flex;6826  align-items: center;6827  gap: 8px;6828  font-size: 0.75rem;6829  color: var(--peach-t1);6830}68316832.peach-pair-request-mark {6833  font-size: 0.875rem;6834  display: inline-flex;6835  align-items: center;6836}68376838.peach-pair-request-icon {6839  width: 1em;6840  height: 1em;6841}68426843.peach-pair-request-title {6844  font-weight: 600;6845  color: var(--peach-t0);6846}68476848.peach-pair-request-countdown {6849  margin-left: auto;6850  font-variant-numeric: tabular-nums;6851  color: var(--peach-t2);6852  font-size: 0.6875rem;6853}68546855.peach-pair-request-body {6856  margin: 0;6857  font-size: 0.75rem;6858  color: var(--peach-t1);6859  line-height: 1.4;6860}68616862.peach-pair-request-body strong {6863  color: var(--peach-t0);6864  font-weight: 600;6865}68666867.peach-pair-request-actions {6868  display: flex;6869  gap: 8px;6870  justify-content: flex-end;6871}68726873/* ─── First-run onboarding ──────────────────────────────────────────────6874   Three-card welcome shown once before vault creation. The PeachScript6875   rune background drifts behind everything at very low opacity — it's6876   atmosphere, not focus. The cards themselves use the same panel6877   language as the rest of the popup so the transition into NewVault is6878   continuous, not a jarring switch of visual register. */68796880.peach-onboarding {6881  position: relative;6882  display: flex;6883  flex-direction: column;6884  width: 100%;6885  height: 100%;6886  padding: 16px 16px 18px;6887  box-sizing: border-box;6888  overflow: hidden;6889  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6890}68916892.peach-onboarding.is-completing {6893  animation: peach-onboard-exit 200ms ease-out forwards;6894}68956896.peach-rune-background {6897  position: absolute;6898  inset: 0;6899  width: 100%;6900  height: 100%;6901  pointer-events: none;6902  z-index: 0;6903  transition: opacity 500ms ease-out;6904}69056906.peach-onboarding.is-completing .peach-rune-background {6907  opacity: 0;6908}69096910.peach-onboarding-header {6911  position: relative;6912  z-index: 1;6913  display: flex;6914  align-items: center;6915  margin-bottom: 14px;6916}69176918.peach-onboarding-card {6919  position: relative;6920  z-index: 1;6921  flex: 1;6922  display: flex;6923  flex-direction: column;6924  gap: 10px;6925  padding: 22px 20px;6926  border-radius: 16px;6927  border: 1px solid var(--peach-t3);6928  background:6929    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6930  backdrop-filter: blur(3px);6931  -webkit-backdrop-filter: blur(3px);6932  box-shadow:6933    inset 0 1px 0 rgba(240, 232, 216, 0.04),6934    0 12px 28px rgba(0, 0, 0, 0.12);6935  cursor: pointer;6936  user-select: none;6937  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6938}69396940.peach-onboarding-card.is-exiting {6941  animation: peach-card-out 120ms ease-in forwards;6942  pointer-events: none;6943}69446945.peach-onboarding-card-headline {6946  margin: 0;6947  font-family: var(--font-display);6948  font-style: italic;6949  font-weight: 400;6950  font-size: 22px;6951  line-height: 1.05;6952  color: var(--peach-t0);6953  white-space: pre-line;6954}69556956.peach-onboarding-divider {6957  margin: 4px 0 6px;6958  border: 0;6959  border-top: 1px solid var(--peach-t3);6960  width: 100%;6961}69626963.peach-onboarding-body {6964  margin: 0;6965  font-size: 0.8125rem;6966  line-height: 1.6;6967  color: var(--peach-t1);6968}69696970.peach-onboarding-warning {6971  display: flex;6972  align-items: flex-start;6973  gap: 8px;6974  margin: 6px 0 0;6975  padding-top: 8px;6976  border-top: 1px dashed var(--peach-t3);6977  font-size: 0.8125rem;6978  line-height: 1.5;6979  color: var(--peach-t1);6980}69816982.peach-onboarding-warning-icon {6983  color: var(--peach-accent);6984  font-size: 0.8125rem;6985  line-height: 1.5;6986  flex: 0 0 auto;6987}69886989.peach-onboarding-nav {6990  position: relative;6991  z-index: 1;6992  display: flex;6993  align-items: center;6994  justify-content: space-between;6995  margin-top: 12px;6996  padding: 0 4px;6997}69986999.peach-onboarding-dots {7000  display: flex;7001  align-items: center;7002  gap: 6px;7003}70047005.peach-onboarding-dot {7006  width: 6px;7007  height: 6px;7008  border-radius: 50%;7009  background: var(--peach-t2);7010  transition: width 200ms ease, height 200ms ease, background 200ms ease;7011}70127013.peach-onboarding-dot.is-active {7014  width: 8px;7015  height: 8px;7016  background: var(--peach-accent);7017}70187019.peach-onboarding-next {7020  background: none;7021  border: none;7022  padding: 4px 0;7023  cursor: pointer;7024  font-family: "IBM Plex Mono", monospace;7025  font-size: 0.6875rem;7026  letter-spacing: 0.04em;7027  color: var(--peach-t1);7028  transition: color 150ms ease;7029}70307031.peach-onboarding-next:hover {7032  color: var(--peach-t0);7033}70347035.peach-onboarding-next:disabled {7036  opacity: 0.5;7037  cursor: default;7038}70397040.peach-onboarding-back {7041  background: none;7042  border: none;7043  padding: 4px 0;7044  cursor: pointer;7045  font-family: "IBM Plex Mono", monospace;7046  font-size: 0.6875rem;7047  letter-spacing: 0.04em;7048  color: var(--peach-t2);7049  transition: color 150ms ease;7050}70517052.peach-onboarding-back:hover {7053  color: var(--peach-t0);7054}70557056.peach-onboarding-back:disabled {7057  opacity: 0.5;7058  cursor: default;7059}70607061/* Reserve back-button width on the first card so the dots stay centred */7062.peach-onboarding-back-spacer {7063  width: 44px;7064}70657066.peach-onboarding-mobile-card-buttons {7067  display: flex;7068  flex-direction: column;7069  gap: 8px;7070  margin-top: 16px;7071}70727073@keyframes peach-onboard-enter {7074  from { opacity: 0; transform: translateY(20px); }7075  to   { opacity: 1; transform: translateY(0); }7076}70777078@keyframes peach-onboard-exit {7079  from { opacity: 1; }7080  to   { opacity: 0; }7081}70827083@keyframes peach-card-in {7084  from { opacity: 0; transform: translateX(12px); }7085  to   { opacity: 1; transform: translateX(0); }7086}70877088@keyframes peach-card-out {7089  from { opacity: 1; transform: translateX(0); }7090  to   { opacity: 0; transform: translateX(-12px); }7091}70927093/* ─── New vault screen — matched to onboarding card language ─────────── */70947095/* Two classes so this beats the shared .peach-screen.lock-screen--vault-stage7096   rule (same element) without loosening the unlock/restore screens. The7097   create-vault screen is the only vault-stage view tall enough to overflow7098   the 520px popup, so its spacing is tuned to fit header → card → restore →7099   recovery warning with nothing clipped. */7100.peach-screen.peach-newvault {7101  position: relative;7102  display: flex;7103  flex-direction: column;7104  gap: 12px;7105  padding: 14px 16px 12px;7106  overflow: hidden;7107}71087109/* Suppress the warm-blob ambient art inherited from .lock-screen — the7110   new vault card now carries the visual weight. */7111.peach-newvault::before {7112  content: none;7113}71147115.peach-newvault-header {7116  position: relative;7117  z-index: 2;7118  display: flex;7119  align-items: center;7120  gap: 10px;7121  margin-bottom: 2px;7122}71237124.peach-newvault-back {7125  display: inline-flex;7126  align-items: center;7127  gap: 4px;7128  background: transparent;7129  border: none;7130  color: var(--peach-t2);7131  font-family: "IBM Plex Mono", monospace;7132  font-size: 0.625rem;7133  letter-spacing: 0.06em;7134  cursor: pointer;7135  padding: 4px 6px;7136  border-radius: 6px;7137  transition: color 120ms ease, background 120ms ease;7138}71397140.peach-newvault-back:hover {7141  color: var(--peach-t0);7142  background: rgba(240, 232, 216, 0.04);7143}71447145.peach-newvault-mark {7146  position: absolute;7147  right: -12px;7148  top: 6px;7149  width: 110px;7150  height: 110px;7151  pointer-events: none;7152  opacity: 0.10;7153  filter: saturate(0.9);7154  z-index: 0;7155}7156.peach-newvault-mark-art {7157  width: 100%;7158  height: 100%;7159}7160.peach-newvault-mark-art path:nth-child(1) {7161  fill: rgba(123, 144, 96, 0.88);7162}7163.peach-newvault-mark-art path:nth-child(2) {7164  stroke: rgba(94, 122, 66, 0.95);7165}71667167.peach-newvault-card {7168  position: relative;7169  z-index: 1;7170  display: flex;7171  flex-direction: column;7172  gap: 8px;7173  padding: 16px 20px 14px;7174  border-radius: 16px;7175  border: 1px solid var(--peach-t3);7176  background:7177    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));7178  backdrop-filter: blur(3px);7179  -webkit-backdrop-filter: blur(3px);7180  box-shadow:7181    inset 0 1px 0 rgba(240, 232, 216, 0.04),7182    0 12px 28px rgba(0, 0, 0, 0.12);7183  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;7184}71857186.peach-newvault-headline {7187  margin: 0;7188  font-family: var(--font-display);7189  font-style: italic;7190  font-weight: 400;7191  font-size: 24px;7192  line-height: 1.05;7193  color: var(--peach-t0);7194  white-space: pre-line;7195}71967197.peach-newvault-divider {7198  margin: 2px 0 4px;7199  border: 0;7200  border-top: 1px solid var(--peach-t3);7201  width: 100%;7202}72037204.peach-newvault-field {7205  display: flex;7206  flex-direction: column;7207  gap: 4px;7208}72097210.peach-newvault-label-row {7211  display: flex;7212  align-items: center;7213  justify-content: space-between;7214}72157216/* Monospace input scaled to the card. Replaces the 22px unlock-input7217   so the placeholder no longer overflows and the field reads as part7218   of the same surface as the body copy. */7219.peach-newvault-input {7220  font-size: 0.875rem;7221  letter-spacing: 0.18em;7222  padding: 8px 0;7223}7224.peach-newvault-input::placeholder {7225  letter-spacing: 0.18em;7226  color: var(--peach-t2);7227}72287229.peach-newvault-hint {7230  margin: 2px 0 0;7231  font-family: "IBM Plex Mono", monospace;7232  font-size: 0.625rem;7233  color: var(--peach-t2);7234  letter-spacing: 0.04em;7235}72367237.peach-newvault-submit {7238  margin-top: 4px;7239}72407241.peach-newvault-warning {7242  display: flex;7243  align-items: flex-start;7244  gap: 8px;7245  margin: 2px 0 0;7246  padding-top: 8px;7247  border-top: 1px dashed var(--peach-t3);7248  font-size: 0.75rem;7249  line-height: 1.45;7250  color: var(--peach-t1);7251}72527253.peach-newvault-warning-icon {7254  color: var(--peach-accent);7255  font-size: 0.8125rem;7256  line-height: 1.4;7257  flex: 0 0 auto;7258}72597260/* Restore options sit inside the card, directly under "create vault", so7261   they are always reachable without scrolling. The top divider mirrors the7262   warning's so the choice reads as a deliberate fork, not a footnote. */7263.peach-newvault-restore {7264  position: relative;7265  z-index: 1;7266  display: flex;7267  flex-direction: column;7268  gap: 4px;7269  margin-top: 4px;7270  padding-top: 10px;7271  border-top: 1px dashed var(--peach-t3);7272}72737274/* Settings body — warm accent gradient gives the glass something to blur against */7275.peach-settings-body {7276  background:7277    radial-gradient(7278      ellipse at 30% 20%,7279      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7280      transparent 60%7281    );7282}72837284/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7285/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7286 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7287 * (replacing the vault from a backup file) and "hazard" for actions that7288 * are absolutely irreversible (Panic). Both use the same card scaffold so7289 * they read as a pair, but the colour family signals the severity at a7290 * glance — yellow for caution, red for don't.7291 */7292.peach-danger-card {7293  --danger-tint: 235, 158, 52; /* amber */7294  display: flex;7295  flex-direction: column;7296  gap: 8px;7297  padding: 14px;7298  margin-top: 10px;7299  border-radius: 12px;7300  border: 1px solid rgba(var(--danger-tint), 0.32);7301  background:7302    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7303    rgba(var(--danger-tint), 0.04);7304  box-shadow:7305    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7306    0 0 24px rgba(var(--danger-tint), 0.04);7307  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7308}73097310.peach-danger-card:hover {7311  border-color: rgba(var(--danger-tint), 0.55);7312  box-shadow:7313    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7314    0 0 36px rgba(var(--danger-tint), 0.10);7315}73167317.peach-danger-card--hazard {7318  --danger-tint: 220, 38, 38; /* red */7319}73207321.peach-danger-card-head {7322  display: flex;7323  align-items: center;7324  gap: 10px;7325}73267327.peach-danger-card-glyph {7328  width: 28px;7329  height: 28px;7330  flex-shrink: 0;7331  display: flex;7332  align-items: center;7333  justify-content: center;7334  border-radius: 8px;7335  background: rgba(var(--danger-tint), 0.12);7336  color: rgba(var(--danger-tint), 0.95);7337  font-size: 1rem;7338  line-height: 1;7339}73407341.peach-danger-card-title {7342  margin: 0;7343  font-size: 0.8125rem;7344  font-weight: 600;7345  color: rgba(var(--danger-tint), 0.92);7346  letter-spacing: 0.01em;7347}73487349.peach-danger-card-copy {7350  margin: 0;7351  font-size: 0.6875rem;7352  line-height: 1.5;7353  color: var(--peach-t2);7354}73557356.peach-danger-card-button {7357  width: 100%;7358  padding: 9px;7359  margin-top: 4px;7360  background: transparent;7361  border: 1px solid rgba(var(--danger-tint), 0.45);7362  border-radius: 8px;7363  color: rgba(var(--danger-tint), 0.9);7364  font-size: 0.75rem;7365  font-weight: 500;7366  letter-spacing: 0.02em;7367  cursor: pointer;7368  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7369}73707371.peach-danger-card-button:hover {7372  background: rgba(var(--danger-tint), 0.10);7373  border-color: rgba(var(--danger-tint), 0.75);7374  color: rgb(var(--danger-tint));7375}73767377/* ── Panic flow (three-step destruction) ───────────────────────────────── */7378.peach-panic {7379  display: flex;7380  flex-direction: column;7381  flex: 1;7382  min-height: 0;7383  padding: 28px 20px 20px;7384  gap: 18px;7385  overflow-y: auto;7386  scrollbar-width: none;7387  -ms-overflow-style: none;7388}73897390.peach-panic::-webkit-scrollbar { display: none; }73917392.peach-panic-step2 {7393  background: rgba(220, 38, 38, 0.04);7394}73957396.peach-panic-step3 {7397  position: relative;7398  background: #0f0505;7399  color: #ffffff;7400  overflow: hidden;7401}74027403.peach-panic-rune-bg {7404  position: absolute;7405  inset: 0;7406  opacity: 0.22;7407  pointer-events: none;7408  overflow: hidden;7409}74107411.peach-panic-rune-bg canvas {7412  width: 100% !important;7413  height: 100% !important;7414}74157416.peach-panic-icon {7417  font-size: 32px;7418  color: rgb(220, 38, 38);7419  line-height: 1;7420}74217422.peach-panic-title {7423  margin: 0;7424  font-size: 18px;7425  font-weight: 500;7426  color: var(--peach-t1);7427}74287429.peach-panic-title--severe {7430  font-size: 20px;7431  font-weight: 700;7432  color: rgb(220, 38, 38);7433}74347435.peach-panic-body {7436  margin: 0;7437  font-size: 0.8125rem;7438  line-height: 1.55;7439  color: var(--peach-t2);7440}74417442.peach-panic-body--severe {7443  color: rgba(220, 38, 38, 0.85);7444}74457446.peach-panic-body--final {7447  font-size: 1rem;7448  font-weight: 700;7449  color: rgb(255, 80, 80);7450  line-height: 1.4;7451}74527453.peach-panic-body--final-intro {7454  font-size: 1rem;7455  color: #ffffff;7456  font-weight: 400;7457}74587459.peach-panic-divider {7460  height: 1px;7461  background: rgba(255, 255, 255, 0.08);7462  margin: 4px 0;7463}74647465.peach-panic-confirm-input {7466  width: 100%;7467  padding: 10px 12px;7468  background: rgba(255, 255, 255, 0.02);7469  border: 1px solid rgba(220, 38, 38, 0.4);7470  border-radius: 8px;7471  color: var(--peach-t1);7472  font-family: "IBM Plex Mono", monospace;7473  font-size: 0.875rem;7474  letter-spacing: 0.12em;7475  text-transform: uppercase;7476}74777478.peach-panic-confirm-input:focus {7479  outline: none;7480  border-color: rgb(220, 38, 38);7481}74827483.peach-panic-confirm-input--match {7484  border-color: rgb(220, 38, 38);7485  color: rgb(220, 38, 38);7486}74877488.peach-panic-confirm-label {7489  font-size: 0.6875rem;7490  color: var(--peach-t2);7491  margin: 0 0 -8px;7492  letter-spacing: 0.06em;7493}74947495.peach-panic-actions {7496  display: flex;7497  flex-direction: column;7498  gap: 10px;7499  margin-top: auto;7500}75017502.peach-panic-button {7503  width: 100%;7504  padding: 12px;7505  border-radius: 8px;7506  font-size: 0.8125rem;7507  cursor: pointer;7508  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7509}75107511.peach-panic-button--primary {7512  background: var(--peach-accent);7513  border: 1px solid var(--peach-accent);7514  color: #ffffff;7515  font-weight: 600;7516}75177518.peach-panic-button--primary:hover {7519  background: color-mix(in srgb, var(--peach-accent) 88%, white);7520}75217522.peach-panic-button--danger {7523  background: rgb(220, 38, 38);7524  border: 1px solid rgb(220, 38, 38);7525  color: #ffffff;7526  font-weight: 600;7527}75287529.peach-panic-button--danger:disabled {7530  opacity: 0.35;7531  cursor: not-allowed;7532}75337534.peach-panic-button--ghost {7535  background: transparent;7536  border: 1px solid rgba(255, 255, 255, 0.18);7537  color: var(--peach-t2);7538}75397540.peach-panic-button--ghost:hover {7541  border-color: rgba(255, 255, 255, 0.32);7542  color: var(--peach-t1);7543}75447545.peach-panic-link {7546  background: transparent;7547  border: none;7548  padding: 4px 0;7549  color: rgba(220, 38, 38, 0.65);7550  font-size: 0.75rem;7551  cursor: pointer;7552  text-align: left;7553  text-decoration: underline;7554  text-underline-offset: 3px;7555}75567557.peach-panic-link:hover {7558  color: rgb(220, 38, 38);7559}75607561.peach-panic-bar {7562  background: rgb(220, 38, 38);7563  padding: 16px 20px;7564  margin: -28px -20px 0;7565  text-align: center;7566  font-size: 0.8125rem;7567  font-weight: 700;7568  letter-spacing: 0.12em;7569  color: #ffffff;7570}75717572.peach-panic-final-button {7573  width: 100%;7574  padding: 14px;7575  background: rgb(220, 38, 38);7576  border: none;7577  border-radius: 8px;7578  color: #ffffff;7579  font-size: 0.875rem;7580  font-weight: 700;7581  letter-spacing: 0.08em;7582  text-transform: uppercase;7583  cursor: pointer;7584  animation: peach-panic-pulse 2s ease-in-out infinite;7585}75867587.peach-settings-license {7588  margin-top: 10px;7589  padding-top: 10px;7590  border-top: 1px solid var(--peach-t3);7591}75927593.peach-settings-label {7594  font-size: 0.625rem;7595  letter-spacing: 0.08em;7596  color: var(--peach-t3);7597  display: block;7598  margin-bottom: 6px;7599}76007601.peach-settings-license-row {7602  display: flex;7603  align-items: center;7604  justify-content: space-between;7605  gap: 8px;7606}76077608.peach-settings-license-key {7609  font-family: 'IBM Plex Mono', monospace;7610  font-size: 0.75rem;7611  color: var(--peach-t0);7612  letter-spacing: 0.04em;7613  word-break: break-all;7614  flex: 1;7615  min-width: 0;7616}76177618.peach-settings-license-key--masked {7619  font-family: 'IBM Plex Mono', monospace;7620  font-size: 0.6rem;7621  color: var(--peach-t1);7622  letter-spacing: 0.18em;7623  user-select: none;7624}76257626.peach-settings-license-actions {7627  display: flex;7628  align-items: center;7629  gap: 2px;7630  flex-shrink: 0;7631}76327633.peach-settings-license-copy {7634  font-size: 0.6875rem;7635  color: var(--peach-accent);7636  background: transparent;7637  border: none;7638  cursor: pointer;7639  padding: 4px 8px;7640  border-radius: 4px;7641  flex-shrink: 0;7642  transition: opacity 150ms ease;7643}76447645.peach-settings-license-copy:hover {7646  opacity: 0.75;7647}76487649.peach-settings-license-toggle {7650  display: flex;7651  align-items: center;7652  justify-content: center;7653  background: transparent;7654  border: none;7655  cursor: pointer;7656  padding: 4px 6px;7657  border-radius: 4px;7658  color: var(--peach-t2);7659  transition: color 150ms ease;7660}76617662.peach-settings-license-toggle:hover {7663  color: var(--peach-t1);7664}76657666@keyframes peach-panic-pulse {7667  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7668  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7669}76707671[data-motion="reduce"] .peach-panic-final-button {7672  animation: none;7673}76747675/* Vault History — Settings → Vault sub-view */76767677.peach-history-list {7678  border: 1px solid var(--peach-border);7679  border-radius: 8px;7680  overflow: hidden;7681  margin: 8px 0 4px;7682}76837684.peach-history-row {7685  display: flex;7686  align-items: center;7687  justify-content: space-between;7688  padding: 9px 12px;7689  gap: 10px;7690  border-bottom: 1px solid var(--peach-border);7691}76927693.peach-history-row:last-child {7694  border-bottom: none;7695}76967697.peach-history-meta {7698  display: flex;7699  flex-direction: column;7700  gap: 2px;7701  min-width: 0;7702  flex: 1;7703}77047705.peach-history-time {7706  font-size: 0.75rem;7707  font-family: 'IBM Plex Mono', ui-monospace, monospace;7708  color: var(--peach-t0);7709  white-space: nowrap;7710  overflow: hidden;7711  text-overflow: ellipsis;7712}77137714.peach-history-sub {7715  font-size: 0.625rem;7716  color: var(--peach-t2);7717  letter-spacing: 0.06em;7718  text-transform: uppercase;7719  white-space: nowrap;7720  overflow: hidden;7721  text-overflow: ellipsis;7722}77237724.peach-history-btn {7725  flex-shrink: 0;7726  white-space: nowrap;7727  min-width: 56px;7728  text-align: center;7729}77307731.peach-history-btn.is-busy {7732  opacity: 0.65;7733}77347735.peach-history-footer {7736  font-size: 0.625rem;7737  color: var(--peach-t3);7738  letter-spacing: 0.05em;7739  text-align: right;7740  margin: 0;7741  padding: 2px 0 0;7742}77437744/* ── Context menu + swipe-copy flash ─────────────────────── */7745.peach-context-menu-backdrop {7746  position: fixed;7747  inset: 0;7748  background: rgba(0, 0, 0, 0.45);7749  z-index: 100;7750  display: flex;7751  align-items: flex-end;7752  justify-content: center;7753  animation: peach-ctx-fade 140ms ease both;7754}7755.peach-context-menu {7756  width: min(360px, calc(100vw - 24px));7757  margin-bottom: max(env(safe-area-inset-bottom), 12px);7758  background: var(--peach-bg);7759  border: 1px solid var(--peach-t3);7760  border-radius: 14px;7761  padding: 6px;7762  display: flex;7763  flex-direction: column;7764  gap: 2px;7765  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7766  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7767}7768@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7769@keyframes peach-ctx-rise {7770  from { transform: translateY(16px); opacity: 0; }7771  to   { transform: translateY(0);    opacity: 1; }7772}7773.peach-context-menu-item {7774  background: transparent;7775  color: var(--peach-t0);7776  border: 0;7777  border-radius: 10px;7778  padding: 12px 14px;7779  text-align: left;7780  font: inherit;7781  cursor: pointer;7782}7783.peach-context-menu-item:hover,7784.peach-context-menu-item:focus-visible {7785  background: var(--peach-t3);7786}7787.peach-context-menu-item--danger {7788  color: var(--peach-health-bad, #d96868);7789}7790.peach-context-menu-item--cancel {7791  color: var(--peach-t2);7792  margin-top: 4px;7793  border-top: 1px solid var(--peach-t3);7794  border-radius: 0 0 10px 10px;7795}77967797/* Swipe-to-copy flash */7798.peach-entry-row.is-copy-flash {7799  animation: peach-copy-flash 600ms ease both;7800}7801@keyframes peach-copy-flash {7802  0%   { background: transparent; }7803  20%  { background: rgba(217, 153, 51, 0.32); }7804  100% { background: transparent; }7805}78067807html { font-size: 16px; }78087809/* ── Recovery word entry ─────────────────────────────────────────── */7810.peach-lock-recover-link {7811  display: block;7812  width: 100%;7813  margin-top: 12px;7814  background: none;7815  border: none;7816  font-family: "IBM Plex Mono", monospace;7817  font-size: 0.625rem;7818  letter-spacing: 0.06em;7819  color: var(--peach-t2);7820  cursor: pointer;7821  text-align: center;7822  padding: 4px;7823  transition: color 120ms ease;7824}7825.peach-lock-recover-link:hover {7826  color: var(--peach-t0);7827}78287829.lock-screen--recovery {7830  display: flex;7831  flex-direction: column;7832  align-items: stretch;7833  padding: 12px 20px 24px;7834  overflow: hidden;7835}78367837.peach-recovery-nav {7838  display: flex;7839  align-items: center;7840  position: relative;7841  z-index: 1;7842  margin-bottom: 4px;7843}78447845/* Mask runes to the top decorative band only — keep inputs and the7846   bottom CTA button clear. The bottom of the popup is reserved for7847   submit buttons; rendering runes there overlaps the button glyph. */7848.peach-rune-background--recovery {7849  -webkit-mask-image: linear-gradient(7850    to bottom,7851    black 0px, black 85px,7852    transparent 110px,7853    transparent 100%7854  );7855  mask-image: linear-gradient(7856    to bottom,7857    black 0px, black 85px,7858    transparent 110px,7859    transparent 100%7860  );7861}78627863.peach-recovery-header {7864  text-align: center;7865  margin-bottom: 16px;7866  margin-top: 4px;7867}7868.peach-recovery-header .peach-onboarding-headline {7869  font-size: 1.25rem;7870  font-weight: 300;7871  letter-spacing: 0.02em;7872  margin: 0 0 4px;7873}7874.peach-recovery-header .peach-hint {7875  font-family: "IBM Plex Mono", monospace;7876  font-size: 0.625rem;7877  color: var(--peach-t2);7878  letter-spacing: 0.04em;7879  margin: 0;7880}78817882/* 12-word grid: 2 columns × 6 rows */7883.peach-recovery-grid {7884  display: grid;7885  grid-template-columns: repeat(2, 1fr);7886  gap: 12px 20px;7887  width: 100%;7888  margin-bottom: 0;7889}78907891.peach-recovery-word-slot {7892  display: flex;7893  align-items: center;7894  gap: 6px;7895  min-width: 0;7896}78977898.peach-recovery-word-index {7899  font-family: "IBM Plex Mono", monospace;7900  font-size: 0.5rem;7901  color: rgba(255, 255, 255, 0.35);7902  min-width: 14px;7903  flex-shrink: 0;7904  text-align: right;7905  letter-spacing: 0.04em;7906}79077908.peach-recovery-word-input {7909  flex: 1;7910  min-width: 0;7911  background: transparent;7912  border: none;7913  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7914  color: var(--peach-t0);7915  font-family: "IBM Plex Mono", monospace;7916  font-size: 0.6875rem;7917  letter-spacing: 0.06em;7918  padding: 5px 2px 4px;7919  outline: none;7920  text-transform: lowercase;7921  transition: border-color 120ms ease;7922}7923.peach-recovery-word-input::placeholder {7924  color: rgba(255, 255, 255, 0.18);7925}7926.peach-recovery-word-input:focus {7927  border-bottom-color: var(--peach-accent);7928}79297930.peach-recovery-submit {7931  width: 100%;7932  margin-top: auto;7933}79347935.peach-recovery-new-password-form {7936  width: 100%;7937  display: flex;7938  flex-direction: column;7939  gap: 16px;7940  margin-bottom: 8px;7941}7942.peach-recovery-new-password-form .peach-newvault-field {7943  display: flex;7944  flex-direction: column;7945  gap: 4px;7946}79477948/* ── Recovery words display (post-create) ────────────────────────── */7949.lock-screen--recovery-display {7950  display: flex;7951  flex-direction: column;7952  align-items: stretch;7953  padding: 0 20px 20px;7954  min-height: 0;7955  overflow-y: auto;7956}79577958.peach-recovery-words-display {7959  width: 100%;7960  margin-bottom: 16px;7961  border: 1px solid var(--peach-t3);7962  border-radius: 8px;7963  padding: 12px 14px;7964  background: rgba(245, 240, 234, 0.04);7965}79667967.peach-recovery-words-label {7968  font-family: "IBM Plex Mono", monospace;7969  font-size: 0.5rem;7970  letter-spacing: 0.08em;7971  color: var(--peach-t2);7972  text-transform: uppercase;7973  margin-bottom: 10px;7974}79757976.peach-recovery-word-list {7977  list-style: none;7978  margin: 0;7979  padding: 0;7980  display: grid;7981  grid-template-columns: repeat(2, 1fr);7982  gap: 6px 16px;7983}79847985.peach-recovery-word-item {7986  display: flex;7987  align-items: baseline;7988  gap: 5px;7989}79907991.peach-recovery-word-num {7992  font-family: "IBM Plex Mono", monospace;7993  font-size: 0.5rem;7994  color: var(--peach-t2);7995  width: 14px;7996  flex: 0 0 14px;7997  text-align: right;7998  letter-spacing: 0.04em;7999  font-variant-numeric: tabular-nums;8000}80018002.peach-recovery-download-btn {8003  display: block;8004  margin: 10px auto 0;8005  padding: 4px 10px;8006  background: transparent;8007  border: 1px solid var(--peach-border);8008  border-radius: 6px;8009  color: var(--peach-t2);8010  font-family: "IBM Plex Mono", monospace;8011  font-size: 0.5625rem;8012  letter-spacing: 0.06em;8013  text-transform: lowercase;8014  cursor: pointer;8015  transition: border-color 0.15s, color 0.15s;8016}80178018.peach-recovery-download-btn:hover {8019  border-color: var(--peach-accent);8020  color: var(--peach-t0);8021}80228023.peach-recovery-word-text {8024  font-family: "IBM Plex Mono", monospace;8025  font-size: 0.6875rem;8026  letter-spacing: 0.06em;8027  color: var(--peach-t0);8028  text-transform: lowercase;8029}80308031.peach-hint--warning {8032  color: var(--peach-accent);8033  font-style: italic;8034}8035.peach-hint--success {8036  color: var(--peach-t2);8037  font-family: "IBM Plex Mono", monospace;8038  font-size: 0.625rem;8039  letter-spacing: 0.06em;8040}80418042/* Confirmation step */8043.peach-recovery-confirm {8044  width: 100%;8045  flex: 1;8046  display: flex;8047  flex-direction: column;8048}8049.peach-recovery-confirm-label {8050  font-family: "IBM Plex Mono", monospace;8051  font-size: 0.5625rem;8052  letter-spacing: 0.04em;8053  color: var(--peach-t2);8054  text-align: center;8055  margin: 0 0 12px;8056}8057.peach-recovery-confirm-fields {8058  display: flex;8059  flex-direction: column;8060  gap: 14px;8061  margin-bottom: 10px;8062}8063.peach-recovery-confirm-field {8064  display: flex;8065  align-items: center;8066  gap: 8px;8067}8068.peach-recovery-confirm-num {8069  font-family: "IBM Plex Mono", monospace;8070  font-size: 0.5rem;8071  color: var(--peach-t2);8072  min-width: 44px;8073  letter-spacing: 0.04em;8074}8075.peach-recovery-confirm-input {8076  flex: 1;8077  background: transparent;8078  border: none;8079  border-bottom: 1px solid var(--peach-t3);8080  color: var(--peach-t0);8081  font-family: "IBM Plex Mono", monospace;8082  font-size: 0.6875rem;8083  letter-spacing: 0.06em;8084  padding: 4px 2px 3px;8085  outline: none;8086  text-transform: lowercase;8087  transition: border-color 120ms ease;8088}8089.peach-recovery-confirm-input:focus {8090  border-bottom-color: var(--peach-accent);8091}8092.peach-recovery-confirm-input:disabled {8093  opacity: 0.4;8094  cursor: not-allowed;8095}8096.peach-recovery-confirm-btn {8097  width: 100%;8098  margin-top: auto;8099}81008101/* ============================================================8102   Sync info sheet8103   ============================================================ */81048105.peach-sync-info-backdrop {8106  position: fixed;8107  inset: 0;8108  z-index: 200;8109  background: rgba(0, 0, 0, 0.55);8110  display: flex;8111  align-items: flex-end;8112  animation: peach-fade-in 200ms ease forwards;8113}81148115@keyframes peach-fade-in {8116  from { opacity: 0; }8117  to   { opacity: 1; }8118}81198120.peach-sync-info-sheet {8121  width: 100%;8122  background: var(--peach-bg-card, var(--peach-bg));8123  border-top-left-radius: 20px;8124  border-top-right-radius: 20px;8125  padding: 12px 24px 32px;8126  display: flex;8127  flex-direction: column;8128  gap: 20px;8129  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;8130}81318132@keyframes peach-sheet-up {8133  from { transform: translateY(100%); }8134  to   { transform: translateY(0); }8135}81368137.peach-sync-info-handle {8138  width: 36px;8139  height: 4px;8140  border-radius: 2px;8141  background: var(--peach-border);8142  margin: 0 auto 4px;8143  flex-shrink: 0;8144}81458146.peach-sync-info-title {8147  font-family: 'Cormorant Garamond', serif;8148  font-style: italic;8149  font-size: 26px;8150  font-weight: 600;8151  color: var(--peach-t0);8152  margin: 0;8153  line-height: 1.2;8154}81558156.peach-sync-info-body {8157  display: flex;8158  flex-direction: column;8159  gap: 14px;8160}81618162.peach-sync-info-point {8163  display: flex;8164  gap: 12px;8165  align-items: flex-start;8166  font-size: 14px;8167  color: var(--peach-t2);8168  line-height: 1.6;8169  margin: 0;8170}81718172.peach-sync-info-icon {8173  color: var(--peach-accent);8174  font-size: 16px;8175  flex-shrink: 0;8176  margin-top: 1px;8177}81788179.peach-sync-info-actions {8180  display: flex;8181  flex-direction: column;8182  gap: 12px;8183  margin-top: 4px;8184}81858186.peach-sync-info-pro-link {8187  background: none;8188  border: none;8189  font-size: 13px;8190  color: var(--peach-t3);8191  cursor: pointer;8192  padding: 0;8193  font-family: inherit;8194  text-align: center;8195  transition: color 150ms ease;8196}81978198.peach-sync-info-pro-link:hover {8199  color: var(--peach-accent);8200}82018202.peach-btn--full {8203  width: 100%;8204}82058206/* ── Sync screen ── */82078208.peach-sync-coming-soon {8209  display: flex;8210  align-items: flex-start;8211  gap: 10px;8212  padding: 12px 14px;8213  background: var(--peach-s1);8214  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8215  border-radius: 10px;8216}8217.peach-sync-coming-soon__icon {8218  flex-shrink: 0;8219  color: var(--peach-accent);8220  margin-top: 1px;8221  line-height: 0;8222}8223.peach-sync-coming-soon__title {8224  font-family: 'Cormorant Garamond', serif;8225  font-weight: 500;8226  font-size: 13px;8227  color: var(--peach-accent);8228  margin: 0 0 5px;8229  line-height: 1.3;8230}8231.peach-sync-coming-soon__body {8232  font-size: 12px;8233  color: var(--peach-t1);8234  line-height: 1.55;8235  margin: 0;8236}82378238.peach-sync-screen {8239  display: flex;8240  flex-direction: column;8241  height: 100%;8242}82438244.peach-sync-content {8245  flex: 1;8246  overflow-y: auto;8247  padding: 24px 20px 40px;8248  display: flex;8249  flex-direction: column;8250  gap: 24px;8251}82528253/* Intro (State A) */8254.peach-sync-headline {8255  font-family: 'Cormorant Garamond', serif;8256  font-style: italic;8257  font-size: 28px;8258  font-weight: 600;8259  color: var(--peach-t0);8260  margin: 0 0 10px;8261  line-height: 1.2;8262}82638264.peach-sync-intro-body {8265  font-size: 14px;8266  color: var(--peach-t1);8267  line-height: 1.6;8268  margin: 0;8269}82708271.peach-sync-pro-note {8272  display: flex;8273  flex-direction: column;8274  gap: 8px;8275  background: var(--peach-t3);8276  border-radius: 10px;8277  padding: 12px 14px;8278}82798280.peach-sync-pro-note-text {8281  font-size: 12px;8282  color: var(--peach-t2);8283  line-height: 1.5;8284  margin: 0;8285}82868287.peach-sync-pro-link {8288  background: none;8289  border: none;8290  font-size: 12px;8291  color: var(--peach-accent);8292  cursor: pointer;8293  padding: 0;8294  font-family: inherit;8295  text-align: left;8296}82978298/* Status (State C) */8299.peach-sync-status {8300  padding: 12px 0;8301  border-bottom: 1px solid var(--peach-border);8302}83038304.peach-sync-status-row {8305  display: flex;8306  align-items: center;8307  gap: 8px;8308}83098310.peach-sync-dot {8311  width: 7px;8312  height: 7px;8313  border-radius: 50%;8314  flex-shrink: 0;8315}83168317.peach-sync-dot--green { background: var(--peach-health-ok); }8318.peach-sync-dot--amber { background: var(--peach-accent); }83198320.peach-sync-status-text {8321  font-family: 'IBM Plex Mono', monospace;8322  font-size: 11px;8323  color: var(--peach-t2);8324}83258326/* Paired devices */8327.peach-sync-section {8328  display: flex;8329  flex-direction: column;8330  gap: 2px;8331}83328333.peach-sync-section-label {8334  font-family: 'IBM Plex Mono', monospace;8335  font-size: 10px;8336  letter-spacing: 0.1em;8337  color: var(--peach-t3);8338  margin: 0 0 10px;8339}83408341.peach-sync-device-row {8342  display: flex;8343  justify-content: space-between;8344  align-items: baseline;8345  padding: 10px 0;8346  border-bottom: 1px solid var(--peach-border);8347  gap: 12px;8348}83498350.peach-sync-device-name {8351  font-size: 14px;8352  color: var(--peach-t1);8353}83548355.peach-sync-device-meta {8356  font-family: 'IBM Plex Mono', monospace;8357  font-size: 11px;8358  color: var(--peach-t3);8359  white-space: nowrap;8360}83618362.peach-sync-hub-note {8363  padding: 14px 16px;8364  border: 1px solid var(--peach-border);8365  border-radius: 10px;8366  display: flex;8367  flex-direction: column;8368  gap: 6px;8369  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8370}83718372.peach-sync-hub-note-title {8373  font-size: 13px;8374  font-weight: 600;8375  color: var(--peach-t0);8376  margin: 0;8377}83788379.peach-sync-hub-note-body {8380  font-size: 12px;8381  color: var(--peach-t2);8382  line-height: 1.6;8383  margin: 0;8384}83858386/* Action buttons */8387.peach-sync-actions {8388  display: flex;8389  gap: 10px;8390  flex-wrap: wrap;8391}83928393/* Upgrade prompt (State B) */8394.peach-sync-upgrade {8395  display: flex;8396  flex-direction: column;8397  gap: 12px;8398  padding: 16px;8399  border: 1px solid var(--peach-border);8400  border-radius: 10px;8401}84028403.peach-sync-upgrade-text {8404  font-size: 13px;8405  color: var(--peach-t2);8406  line-height: 1.6;8407  margin: 0;8408}84098410/* Network note */8411.peach-sync-network-note {8412  font-size: 12px;8413  color: var(--peach-t3);8414  line-height: 1.6;8415  margin: 0;8416}84178418/* Advanced */8419.peach-sync-advanced {8420  margin-top: auto;8421  padding-top: 16px;8422  border-top: 1px solid var(--peach-border);8423}84248425.peach-sync-advanced-toggle {8426  display: flex;8427  align-items: center;8428  gap: 8px;8429  background: none;8430  border: none;8431  font-family: 'IBM Plex Mono', monospace;8432  font-size: 11px;8433  letter-spacing: 0.08em;8434  color: var(--peach-t3);8435  cursor: pointer;8436  padding: 0;8437  text-transform: uppercase;8438}84398440.peach-sync-advanced-chevron {8441  display: inline-block;8442  transition: transform 200ms ease;8443  font-size: 10px;8444}84458446.peach-sync-advanced-chevron.is-open {8447  transform: rotate(90deg);8448}84498450.peach-sync-advanced-content {8451  margin-top: 14px;8452}84538454.peach-sync-advanced-row {8455  display: flex;8456  justify-content: space-between;8457  align-items: center;8458  gap: 16px;8459}84608461.peach-sync-advanced-title {8462  font-size: 14px;8463  color: var(--peach-t1);8464  margin: 0 0 2px;8465}84668467.peach-sync-advanced-subtitle {8468  font-size: 12px;8469  color: var(--peach-t3);8470  margin: 0;8471  line-height: 1.5;8472}84738474/* ── Add Device — Android scan tabs ─────────────────────────────────────── */84758476.peach-pairing-tabs {8477  display: flex;8478  border: 1px solid var(--peach-border);8479  border-radius: 8px;8480  overflow: hidden;8481  margin-bottom: 4px;8482}84838484.peach-pairing-tab {8485  flex: 1;8486  padding: 10px 0;8487  background: none;8488  border: none;8489  font-family: 'IBM Plex Mono', monospace;8490  font-size: 11px;8491  letter-spacing: 0.06em;8492  color: var(--peach-t2);8493  cursor: pointer;8494  transition: background 150ms, color 150ms;8495}84968497.peach-pairing-tab.is-active {8498  background: var(--peach-accent);8499  color: #fff;8500  font-weight: 600;8501}85028503.peach-pairing-tab:not(.is-active):active {8504  background: var(--peach-border);8505}85068507/* Camera view */8508.peach-pairing-camera-container {8509  position: relative;8510  width: 100%;8511  aspect-ratio: 1;8512  border-radius: 12px;8513  overflow: hidden;8514  background: #000;8515  flex-shrink: 0;8516}85178518.peach-pairing-video {8519  width: 100%;8520  height: 100%;8521  object-fit: cover;8522}85238524.peach-pairing-scan-frame {8525  position: absolute;8526  top: 50%;8527  left: 50%;8528  transform: translate(-50%, -50%);8529  width: 60%;8530  aspect-ratio: 1;8531  border: 2px solid var(--peach-accent);8532  border-radius: 8px;8533  pointer-events: none;8534}85358536/* ── Notes Mode ── */85378538/* Overlay that crossfades over the vault */8539.peach-notes-overlay {8540  position: fixed;8541  inset: 0;8542  z-index: 90;8543  opacity: 0;8544  pointer-events: none;8545  animation: peach-mode-in 220ms ease-in forwards;8546}85478548.peach-notes-overlay.is-visible {8549  opacity: 1;8550  pointer-events: auto;8551}85528553@keyframes peach-mode-in {8554  from { opacity: 0; }8555  to   { opacity: 1; }8556}85578558/* Top-level notes surface */8559.peach-notes-mode {8560  position: absolute;8561  inset: 0;8562  background: var(--peach-bg);8563  display: flex;8564  flex-direction: column;8565}85668567/* Rune canvas positioned behind content */8568.peach-note-rune-canvas {8569  position: absolute;8570  inset: 0;8571  width: 100%;8572  height: 100%;8573  pointer-events: none;8574  z-index: 0;8575}85768577/* TOC wrapper */8578.peach-notes-toc-wrapper {8579  position: absolute;8580  inset: 0;8581  z-index: 1;8582  opacity: 1;8583  pointer-events: auto;8584  transition: opacity 200ms ease;8585}85868587.peach-notes-toc-wrapper.is-hidden {8588  opacity: 0;8589  pointer-events: none;8590}85918592/* Editor wrapper */8593.peach-notes-editor-wrapper {8594  position: absolute;8595  inset: 0;8596  z-index: 2;8597  opacity: 0;8598  pointer-events: none;8599  transition: opacity 200ms ease;8600}86018602.peach-notes-editor-wrapper.is-visible {8603  opacity: 1;8604  pointer-events: auto;8605}86068607/* TOC inner */8608.peach-notes-toc {8609  position: relative;8610  display: flex;8611  flex-direction: column;8612  height: 100%;8613  padding-top: env(safe-area-inset-top, 0px);8614  padding-bottom: env(safe-area-inset-bottom, 0px);8615}86168617/* Shared header */8618.peach-notes-header {8619  display: flex;8620  align-items: center;8621  padding: 12px 16px;8622  gap: 12px;8623  flex-shrink: 0;8624  min-height: 52px;8625  position: relative;8626  z-index: 2;8627}86288629.peach-notes-back {8630  font-size: 22px;8631  color: var(--peach-t2);8632  background: none;8633  border: none;8634  padding: 4px;8635  cursor: pointer;8636  line-height: 1;8637  flex-shrink: 0;8638  transition: color 150ms ease;8639  -webkit-tap-highlight-color: transparent;8640}86418642.peach-notes-back:active { color: var(--peach-t0); }86438644.peach-notes-header-title {8645  flex: 1;8646  font-family: 'Cormorant Garamond', serif;8647  font-style: italic;8648  font-size: 22px;8649  color: var(--peach-t0);8650  text-align: center;8651}86528653.peach-notes-header-title.is-breadcrumb {8654  font-family: 'IBM Plex Mono', monospace;8655  font-style: normal;8656  font-size: 11px;8657  color: var(--peach-t3);8658  letter-spacing: 0.08em;8659  text-transform: uppercase;8660  cursor: pointer;8661}86628663.peach-notes-header-actions {8664  display: flex;8665  gap: 8px;8666  flex-shrink: 0;8667}86688669.peach-notes-header-btn {8670  width: 36px;8671  height: 36px;8672  display: flex;8673  align-items: center;8674  justify-content: center;8675  background: none;8676  border: none;8677  color: var(--peach-t2);8678  cursor: pointer;8679  border-radius: 8px;8680  font-size: 16px;8681  transition: color 150ms ease, background 150ms ease;8682  -webkit-tap-highlight-color: transparent;8683}86848685.peach-notes-header-btn:active {8686  background: rgba(255,255,255,0.06);8687  color: var(--peach-t0);8688}86898690/* Inline search bar */8691.peach-notes-search-input {8692  flex: 1;8693  background: none;8694  border: none;8695  outline: none;8696  font-family: 'IBM Plex Mono', monospace;8697  font-size: 13px;8698  color: var(--peach-t0);8699  padding: 4px 0;8700  letter-spacing: 0.02em;8701}87028703.peach-notes-search-input::placeholder {8704  color: var(--peach-t3);8705}87068707/* TOC list */8708.peach-notes-list-container {8709  flex: 1;8710  overflow-y: auto;8711  overflow-x: hidden;8712  scrollbar-width: none;8713  -webkit-overflow-scrolling: touch;8714  overscroll-behavior: contain;8715  position: relative;8716  z-index: 1;8717}87188719.peach-notes-list-container::-webkit-scrollbar { display: none; }87208721/* Note row */8722.peach-note-row {8723  position: relative;8724  display: grid;8725  grid-template-columns: 44px 8px 1fr 8px auto;8726  align-items: center;8727  min-height: 72px;8728  padding: 16px 20px;8729  border-bottom: 0.5px solid var(--peach-border);8730  cursor: pointer;8731  overflow: hidden;8732  touch-action: pan-y;8733  user-select: none;8734  -webkit-user-select: none;8735  -webkit-tap-highlight-color: transparent;8736}87378738.peach-note-row:first-child {8739  border-top: 0.5px solid var(--peach-border);8740}87418742.peach-note-row:active {8743  background: rgba(255,255,255,0.02);8744}87458746.peach-note-numeral {8747  font-family: 'Cormorant Garamond', serif;8748  font-style: italic;8749  font-size: 15px;8750  color: var(--peach-accent);8751  text-align: right;8752  line-height: 1;8753  flex-shrink: 0;8754}87558756.peach-note-title-gap { /* grid spacer */ }87578758.peach-note-title {8759  font-family: 'Cormorant Garamond', serif;8760  font-style: italic;8761  font-size: 18px;8762  color: var(--peach-t0);8763  line-height: 1.3;8764  min-width: 0;8765  overflow-wrap: break-word;8766}87678768.peach-note-title-match {8769  color: var(--peach-accent);8770}87718772.peach-note-date {8773  font-family: 'IBM Plex Mono', monospace;8774  font-size: 11px;8775  color: var(--peach-t2);8776  white-space: nowrap;8777  text-align: right;8778  flex-shrink: 0;8779  grid-column: 5;8780}87818782/* Swipe underlays */8783.peach-note-row-underlay {8784  position: absolute;8785  inset: 0;8786  display: flex;8787  align-items: center;8788  padding: 0 24px;8789  font-family: 'IBM Plex Mono', monospace;8790  font-size: 11px;8791  letter-spacing: 0.1em;8792  pointer-events: none;8793  z-index: 0;8794}87958796.peach-note-row-underlay--delete {8797  background: #8B2020;8798  color: rgba(255,255,255,0.9);8799  justify-content: flex-end;8800}88018802.peach-note-row-underlay--archive {8803  background: var(--peach-accent);8804  color: #0C0A06;8805  justify-content: flex-start;8806}88078808/* Delete confirm strip */8809.peach-note-delete-confirm {8810  position: absolute;8811  inset: 0;8812  background: var(--peach-bg);8813  display: flex;8814  align-items: center;8815  gap: 12px;8816  padding: 0 20px;8817  font-family: 'IBM Plex Mono', monospace;8818  font-size: 11px;8819  color: var(--peach-t1);8820  letter-spacing: 0.04em;8821  animation: peach-delete-confirm-in 150ms ease both;8822  z-index: 10;8823}88248825@keyframes peach-delete-confirm-in {8826  from { opacity: 0; }8827  to   { opacity: 1; }8828}88298830.peach-note-delete-confirm-btn {8831  background: #8B2020;8832  color: rgba(255,255,255,0.9);8833  border: none;8834  border-radius: 6px;8835  padding: 4px 10px;8836  font-family: 'IBM Plex Mono', monospace;8837  font-size: 10px;8838  cursor: pointer;8839  letter-spacing: 0.06em;8840}88418842.peach-note-delete-cancel-btn {8843  background: none;8844  border: none;8845  color: var(--peach-t3);8846  font-family: 'IBM Plex Mono', monospace;8847  font-size: 10px;8848  cursor: pointer;8849  letter-spacing: 0.06em;8850  padding: 4px 6px;8851}88528853/* + New note button */8854.peach-notes-new-btn {8855  font-family: 'IBM Plex Mono', monospace;8856  font-size: 12px;8857  color: var(--peach-t3);8858  text-align: center;8859  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8860  background: none;8861  border: none;8862  width: 100%;8863  cursor: pointer;8864  letter-spacing: 0.04em;8865  transition: color 150ms ease;8866  -webkit-tap-highlight-color: transparent;8867}88688869.peach-notes-new-btn:active { color: var(--peach-accent); }88708871/* Empty state */8872.peach-notes-empty {8873  display: flex;8874  flex-direction: column;8875  align-items: center;8876  justify-content: center;8877  flex: 1;8878  padding: 48px 32px;8879  gap: 16px;8880}88818882.peach-notes-empty-text {8883  font-family: 'Cormorant Garamond', serif;8884  font-style: italic;8885  font-size: 20px;8886  color: var(--peach-t3);8887  text-align: center;8888  margin: 0;8889  line-height: 1.4;8890  white-space: pre-line;8891}88928893/* ── Editor surface ── */88948895.peach-note-editor-surface {8896  position: absolute;8897  inset: 0;8898  background: var(--peach-bg);8899  display: flex;8900  flex-direction: column;8901  padding-top: env(safe-area-inset-top, 0px);8902}89038904.peach-note-editor-scroll {8905  flex: 1;8906  overflow-y: auto;8907  overflow-x: hidden;8908  scrollbar-width: none;8909  -webkit-overflow-scrolling: touch;8910  padding: 0 24px 120px;8911  position: relative;8912  z-index: 1;8913}89148915.peach-note-editor-scroll::-webkit-scrollbar { display: none; }89168917/* Desktop toolbar (always visible above body) */8918.peach-note-toolbar-desktop-inline {8919  display: flex;8920  align-items: center;8921  gap: 2px;8922  padding: 6px 0 12px;8923  margin-bottom: 4px;8924  border-bottom: 0.5px solid var(--peach-border);8925}89268927/* Title field */8928.peach-note-title-field {8929  font-family: 'Cormorant Garamond', serif;8930  font-style: italic;8931  font-size: 32px;8932  font-weight: 600;8933  color: var(--peach-t0);8934  line-height: 1.2;8935  padding: 8px 0 0;8936  outline: none;8937  min-height: 44px;8938  word-break: break-word;8939  position: relative;8940  z-index: 1;8941}89428943.peach-note-title-field:empty::before {8944  content: attr(data-placeholder);8945  color: var(--peach-t3);8946  pointer-events: none;8947}89488949/* Hairline separator */8950.peach-note-hairline {8951  height: 0.5px;8952  background: var(--peach-border);8953  margin: 12px 0 20px;8954  position: relative;8955  z-index: 1;8956}89578958/* Body field */8959.peach-note-body-field {8960  font-family: 'DM Sans', sans-serif;8961  font-size: 16px;8962  color: var(--peach-t0);8963  line-height: 1.85;8964  padding: 0;8965  outline: none;8966  min-height: 240px;8967  word-break: break-word;8968  position: relative;8969  z-index: 1;8970}89718972.peach-note-body-field:empty::before {8973  content: attr(data-placeholder);8974  color: var(--peach-t3);8975  font-style: italic;8976  pointer-events: none;8977}89788979.peach-note-body-field h2 {8980  font-family: 'Cormorant Garamond', serif;8981  font-style: italic;8982  font-size: 22px;8983  font-weight: 600;8984  color: var(--peach-t0);8985  margin: 20px 0 8px;8986}89878988.peach-note-body-field blockquote {8989  border-left: 2px solid var(--peach-accent);8990  margin: 12px 0;8991  padding-left: 16px;8992  color: var(--peach-t1);8993  font-style: italic;8994}89958996.peach-note-body-field ul,8997.peach-note-body-field ol {8998  padding-left: 20px;8999  margin: 8px 0;9000}90019002.peach-note-body-field li {9003  margin: 4px 0;9004}90059006.peach-note-body-field hr {9007  border: none;9008  border-top: 0.5px solid var(--peach-border);9009  margin: 16px 0;9010}90119012/* Saved indicator */9013.peach-note-saved-indicator {9014  font-family: 'IBM Plex Mono', monospace;9015  font-size: 11px;9016  color: var(--peach-t3);9017  letter-spacing: 0.04em;9018  text-align: right;9019  padding: 6px 24px;9020  flex-shrink: 0;9021  transition: opacity 300ms ease;9022  pointer-events: none;9023  position: relative;9024  z-index: 1;9025}90269027/* Mobile keyboard toolbar */9028.peach-note-toolbar-mobile {9029  display: flex;9030  align-items: center;9031  padding: 8px 16px;9032  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));9033  background: var(--peach-bg);9034  border-top: 0.5px solid var(--peach-border);9035  gap: 4px;9036  flex-shrink: 0;9037  position: relative;9038  z-index: 10;9039}90409041.peach-note-toolbar-btn {9042  min-width: 36px;9043  height: 36px;9044  display: flex;9045  align-items: center;9046  justify-content: center;9047  background: none;9048  border: none;9049  border-radius: 8px;9050  cursor: pointer;9051  font-size: 14px;9052  color: var(--peach-t1);9053  font-family: 'DM Sans', sans-serif;9054  font-weight: 600;9055  transition: background 100ms ease, color 100ms ease;9056  -webkit-tap-highlight-color: transparent;9057}90589059.peach-note-toolbar-btn--italic { font-style: italic; }9060.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }9061.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }90629063.peach-note-toolbar-divider {9064  width: 0.5px;9065  height: 20px;9066  background: var(--peach-border);9067  margin: 0 4px;9068  flex-shrink: 0;9069}90709071.peach-note-toolbar-spacer { flex: 1; }90729073/* Desktop: larger headline in TOC */9074@media (min-width: 400px) {9075  .peach-notes-header-title:not(.is-breadcrumb) {9076    font-size: 32px;9077  }90789079  .peach-note-row {9080    min-height: 64px;9081    padding: 14px 16px;9082  }9083}90849085/* Flying title — shared element during expansion/collapse */90869087/* ─── Light theme overrides ───────────────────────────────────────────────9088   Tokens that cannot be expressed as variable substitutions — hardcoded9089   context-specific values that need separate light-mode rules. */90909091/* Settings section headers: use text-label (#79766F) per restoration brief —9092   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY9093   presence without fighting the light parchment background. */9094.light .peach-settings-sub-label,9095[data-theme="light"] .peach-settings-sub-label,9096.light .peach-settings-nav-label,9097[data-theme="light"] .peach-settings-nav-label {9098  color: #79766F;9099}91009101/* Secondary action buttons (ghost / subtle): filled with input-well surface9102   so they read as recessed against the parchment card background. */9103.light .peach-btn--ghost:not(.peach-icon-btn),9104[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {9105  background: #EEE7DD;9106  border-color: #DDD5CB;9107  color: #1A1208;9108}9109.light .peach-icon-btn,9110[data-theme="light"] .peach-icon-btn {9111  background: transparent;9112  border-color: transparent;9113}9114.light .peach-btn--subtle,9115[data-theme="light"] .peach-btn--subtle {9116  background: #EEE7DD;9117  border-color: #DDD5CB;9118}91199120/* Wide secondary action button on the lock screen — override the9121   hardcoded dark-mode rgba values with warm parchment equivalents. */9122.light .peach-lock-secondary,9123[data-theme="light"] .peach-lock-secondary {9124  background: #EEE7DD;9125  border-color: #DDD5CB;9126  color: #1A1208;9127}9128.light .peach-lock-secondary:hover,9129[data-theme="light"] .peach-lock-secondary:hover {9130  background: #F0E9DF;9131}91329133/* Entry row hover: bg-row lifts the row above the card surface. */9134.light .peach-entry-row:hover,9135[data-theme="light"] .peach-entry-row:hover {9136  background: #F2EBE1;9137}9138.light .peach-entry-row.is-active,9139[data-theme="light"] .peach-entry-row.is-active {9140  background: #F2EBE1;9141}9142.light .peach-entry-row.is-selected,9143[data-theme="light"] .peach-entry-row.is-selected {9144  background: #F5EDE2;9145}91469147/* ──────────────────────────────────────────────────────────────────────────9148   Chirp pairing flow — bird-stage animation (Phase 1)9149   See src/popup/components/ChirpPairingFlow.tsx and the brief §6.2.9150   Three-act animation gated on the [data-phase] attribute of9151   .peach-chirp-pair; child layers (birds, chirp arcs, flight wave, dot)9152   each react via either pose class or visibility flag.9153   Tokens: accent surfaces use var(--peach-accent); bird illustration9154   colours are baked into the SVG per the brand-peach exception in §3.1.9155   ────────────────────────────────────────────────────────────────────── */91569157.peach-chirp-pair {9158  position: absolute;9159  inset: 0;9160  z-index: 3;9161  display: flex;9162  flex-direction: column;9163  padding: 14px 12px 12px;9164  width: 100%;9165  box-sizing: border-box;9166  gap: 0;9167  background:9168    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9169    var(--peach-bg);9170  color: var(--peach-t0);9171  overflow-y: auto;9172  overflow-x: hidden;9173  scrollbar-width: none;9174  isolation: isolate;9175  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9176}9177@keyframes peach-chirp-overlay-in {9178  from { opacity: 0; transform: translateY(8px); }9179  to   { opacity: 1; transform: translateY(0); }9180}9181.peach-chirp-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }9182.peach-chirp-pair::before {9183  content: '';9184  position: absolute;9185  inset: 0;9186  border-radius: inherit;9187  pointer-events: none;9188  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9189  z-index: 0;9190}9191.peach-chirp-pair > * { position: relative; z-index: 1; }91929193/* Header --------------------------------------------------------------- */9194.peach-chirp-head {9195  display: flex; align-items: center; gap: 10px;9196}9197.peach-chirp-back {9198  width: 32px; height: 32px;9199  display: inline-flex; align-items: center; justify-content: center;9200  background: transparent;9201  border: none;9202  border-radius: 8px;9203  color: var(--peach-t1);9204  cursor: pointer;9205  transition: color 0.15s ease, box-shadow 0.15s ease;9206}9207.peach-chirp-back:hover {9208  color: var(--peach-accent);9209  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9210}9211.peach-chirp-title {9212  font-family: var(--font-display, Georgia, serif);9213  font-style: italic;9214  font-size: 24px;9215  font-weight: 500;9216  letter-spacing: 0.005em;9217  color: var(--peach-t0);9218  line-height: 1;9219}9220.peach-chirp-head-spacer { flex: 1; }92219222/* Chip row ------------------------------------------------------------- */9223.peach-chirp-chip-row {9224  display: flex;9225  align-items: center;9226  justify-content: flex-start;9227  margin-top: 12px;9228}9229.peach-chirp-chip {9230  display: inline-flex; align-items: center; gap: 8px;9231  padding: 5px 10px 5px 8px;9232  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9233  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9234  border-radius: 999px;9235  font-family: var(--peach-mono, ui-monospace, monospace);9236  font-size: 11px;9237  letter-spacing: 0.04em;9238  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9239}9240.peach-chirp-chip-dot {9241  width: 6px; height: 6px; border-radius: 50%;9242  background: var(--peach-accent);9243  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9244}9245.peach-chirp-chip[data-phase="paired"] {9246  background: color-mix(in srgb, #4f9eda 12%, transparent);9247  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9248  color: #76b6e8;9249}9250.peach-chirp-chip[data-phase="paired"] .peach-chirp-chip-dot {9251  background: #76b6e8;9252  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9253}9254.peach-chirp-chip[data-phase="timeout"],9255.peach-chirp-chip[data-phase="mic_denied"],9256.peach-chirp-chip[data-phase="version_mismatch"],9257.peach-chirp-chip[data-phase="handshake_failed"] {9258  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9259  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9260  color: var(--peach-warn, #d29257);9261}9262.peach-chirp-chip[data-phase="timeout"] .peach-chirp-chip-dot,9263.peach-chirp-chip[data-phase="mic_denied"] .peach-chirp-chip-dot,9264.peach-chirp-chip[data-phase="version_mismatch"] .peach-chirp-chip-dot,9265.peach-chirp-chip[data-phase="handshake_failed"] .peach-chirp-chip-dot {9266  background: var(--peach-warn, #d29257);9267  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9268}92699270/* Bird stage ----------------------------------------------------------- */9271.peach-chirp-stage {9272  position: relative;9273  margin: 14px 0 8px;9274  height: 180px;9275  border-radius: 12px;9276  background:9277    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9278    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),9279    color-mix(in srgb, var(--peach-bg) 92%, #000);9280  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);9281  overflow: hidden;9282  isolation: isolate;9283}9284.peach-chirp-stage::after {9285  content: '';9286  position: absolute;9287  left: 12%; right: 12%;9288  bottom: 36px;9289  height: 1px;9290  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9291}92929293.peach-chirp-bird-slot {9294  position: absolute;9295  bottom: 8px;9296  width: 100px;9297  height: 110px;9298  display: flex;9299  align-items: flex-end;9300  justify-content: center;9301}9302.peach-chirp-bird-slot-desktop { left: 28px; }9303.peach-chirp-bird-slot-mobile { right: 28px; }93049305/* Mobile bird hops in from the right when handshake begins */9306.peach-chirp-bird-slot-mobile {9307  opacity: 1;9308  transform: translateX(-6px);9309  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9310}9311.peach-chirp-stage.act-listening .peach-chirp-bird-slot-mobile,9312.peach-chirp-stage.act-chirping .peach-chirp-bird-slot-mobile,9313.peach-chirp-stage.act-idle .peach-chirp-bird-slot-mobile {9314  opacity: 0;9315  transform: translateX(60px) rotate(8deg);9316}9317.peach-chirp-stage.act-handshake .peach-chirp-bird-slot-desktop,9318.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop {9319  transform: translateX(6px);9320  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9321}93229323/* Paired: both birds bob together */9324.peach-chirp-stage.act-paired .peach-chirp-bird-slot {9325  animation: peach-chirp-happy-bob 1.2s ease-in-out infinite;9326}9327.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { animation-delay: 0.2s; }9328.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop { --bb-x: 6px; }9329.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { --bb-x: -6px; }9330@keyframes peach-chirp-happy-bob {9331  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9332  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9333}93349335/* Bird internal -------------------------------------------------------- */9336.peach-chirp-bird {9337  width: 108px;9338  height: 108px;9339  transform-origin: 50% 95%;9340}9341.peach-chirp-bird svg { width: 100%; height: 100%; overflow: visible; }93429343.peach-chirp-bird-body {9344  transform-origin: 50% 80%;9345  animation: peach-chirp-bird-bob 2.4s ease-in-out infinite;9346}9347@keyframes peach-chirp-bird-bob {9348  0%, 100% { transform: translateY(0) scale(1, 1); }9349  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9350}93519352.peach-chirp-bird-eye-group {9353  animation: peach-chirp-blink 5.2s steps(1, end) infinite;9354  transform-origin: center;9355  transform-box: fill-box;9356}9357@keyframes peach-chirp-blink {9358  0%, 92%, 96%, 100% { transform: scaleY(1); }9359  94%                { transform: scaleY(0.05); }9360}93619362/* Pose: chirping — beak opens, head bobs, aura blooms */9363.peach-chirp-bird-pose-chirping .peach-chirp-bird-body {9364  animation:9365    peach-chirp-bird-bob 2.4s ease-in-out infinite,9366    peach-chirp-squeeze 1.7s ease-in-out infinite;9367}9368@keyframes peach-chirp-squeeze {9369  0%, 70%, 100% { transform-origin: 50% 85%; }9370  78%           { transform: scale(1.04, 0.96) translateY(1px); }9371  86%           { transform: scale(0.98, 1.02); }9372}9373.peach-chirp-bird-pose-chirping .peach-chirp-bird-head-group {9374  animation: peach-chirp-head-bob 1.7s ease-in-out infinite;9375}9376@keyframes peach-chirp-head-bob {9377  0%, 70%, 100% { transform: translateY(0) rotate(0); }9378  78%           { transform: translateY(-3px) rotate(-4deg); }9379  86%           { transform: translateY(-1px) rotate(-2deg); }9380}9381.peach-chirp-bird-pose-chirping .peach-chirp-bird-beak {9382  animation: peach-chirp-beak-open 1.7s ease-in-out infinite;9383}9384@keyframes peach-chirp-beak-open {9385  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9386  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9387  86%           { transform: rotate(-6deg); }9388}9389.peach-chirp-bird-pose-chirping .peach-chirp-bird-aura {9390  animation: peach-chirp-aura 1.7s ease-in-out infinite;9391}9392@keyframes peach-chirp-aura {9393  0%, 100% { opacity: 0; }9394  50%      { opacity: 0.8; }9395}9396.peach-chirp-bird-pose-chirping .peach-chirp-bird-tail {9397  animation: peach-chirp-tail-twitch 1.7s ease-in-out infinite;9398  transform-origin: 100% 50%;9399}9400@keyframes peach-chirp-tail-twitch {9401  0%, 75%, 100% { transform: rotate(0); }9402  82%           { transform: rotate(-3deg) translateX(-1px); }9403}94049405/* Pose: attentive — head tilts toward partner */9406.peach-chirp-bird-pose-attentive .peach-chirp-bird-head-group {9407  animation: peach-chirp-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9408}9409@keyframes peach-chirp-head-tilt {9410  0%   { transform: rotate(0) translateY(0); }9411  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9412  100% { transform: rotate(-6deg); }9413}9414.peach-chirp-bird-pose-attentive .peach-chirp-bird-tail {9415  animation: peach-chirp-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9416  transform-origin: 100% 50%;9417}9418@keyframes peach-chirp-tail-cock {9419  0%   { transform: rotate(0); }9420  100% { transform: rotate(-4deg); }9421}94229423/* Pose: happy — wing flutter, tuft perk, tail wag */9424.peach-chirp-bird-pose-happy .peach-chirp-bird-wing {9425  transform-origin: 80% 60%;9426  animation: peach-chirp-wing-flutter 0.32s ease-in-out 5;9427}9428@keyframes peach-chirp-wing-flutter {9429  0%, 100% { transform: rotate(0) translateY(0); }9430  50%      { transform: rotate(-16deg) translateY(-2px); }9431}9432.peach-chirp-bird-pose-happy .peach-chirp-bird-tuft {9433  transform-origin: 0% 100%;9434  animation: peach-chirp-tuft-perk 0.4s ease-in-out 3;9435}9436@keyframes peach-chirp-tuft-perk {9437  0%, 100% { transform: rotate(0); }9438  50%      { transform: rotate(-15deg) translateY(-1px); }9439}9440.peach-chirp-bird-pose-happy .peach-chirp-bird-tail {9441  transform-origin: 100% 50%;9442  animation: peach-chirp-tail-wag 0.5s ease-in-out 4;9443}9444@keyframes peach-chirp-tail-wag {9445  0%, 100% { transform: rotate(0); }9446  25%      { transform: rotate(6deg); }9447  75%      { transform: rotate(-6deg); }9448}9449.peach-chirp-bird-pose-happy .peach-chirp-bird-head-group {9450  animation: peach-chirp-head-perk 0.5s ease-out;9451}9452@keyframes peach-chirp-head-perk {9453  0%   { transform: translateY(0); }9454  40%  { transform: translateY(-3px) rotate(2deg); }9455  100% { transform: translateY(0); }9456}94579458/* Pose: sad — body droops forward */9459.peach-chirp-bird-pose-sad .peach-chirp-bird-body {9460  transform: translateY(5px) rotate(-2deg);9461  animation: none;9462}9463.peach-chirp-bird-pose-sad .peach-chirp-bird-head-group {9464  transform: translateY(4px) rotate(8deg);9465}9466.peach-chirp-bird-pose-sad .peach-chirp-bird-tuft { transform: rotate(15deg) translateY(2px); }9467.peach-chirp-bird-pose-sad .peach-chirp-bird-tail { transform: rotate(8deg) translateY(2px); }94689469.peach-chirp-bird-pose-hidden { opacity: 0; }94709471/* Chirp arcs ----------------------------------------------------------- */9472.peach-chirp-arcs {9473  position: absolute;9474  top: 18px;9475  width: 96px;9476  height: 70px;9477  pointer-events: none;9478}9479.peach-chirp-arcs-right { right: -60px; }9480.peach-chirp-arcs-left  { left: -60px; transform: scaleX(-1); }9481.peach-chirp-arc {9482  position: absolute;9483  top: 50%;9484  left: 0;9485  width: 40px;9486  height: 40px;9487  margin-top: -20px;9488  border: 1.2px solid #f4d5a8;9489  border-color: transparent #f4d5a8 transparent transparent;9490  border-radius: 50%;9491  opacity: 0;9492  animation: peach-chirp-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9493}9494@keyframes peach-chirp-arc-expand {9495  0%   { transform: scale(0.4); opacity: 0; }9496  20%  { opacity: 0.9; }9497  100% { transform: scale(1.6); opacity: 0; }9498}94999500/* Flight wave ---------------------------------------------------------- */9501.peach-chirp-flight-track {9502  position: absolute;9503  inset: 32px 36px 38px 36px;9504  pointer-events: none;9505}9506.peach-chirp-flight-wave {9507  position: absolute;9508  top: 8px;9509  left: 76px;9510  right: 76px;9511  height: 60px;9512  width: auto;9513  opacity: 0;9514  transition: opacity 0.15s ease;9515  stroke: #f4d5a8;9516  fill: none;9517}9518.peach-chirp-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9519.peach-chirp-flight-wave.is-visible { opacity: 1; }9520.peach-chirp-flight-path,9521.peach-chirp-flight-path-2 {9522  stroke-dasharray: 240;9523  stroke-dashoffset: 240;9524  stroke-linecap: round;9525  fill: none;9526}9527.peach-chirp-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9528.peach-chirp-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9529.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path {9530  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9531}9532.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path-2 {9533  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9534}9535@keyframes peach-chirp-fly {9536  0%   { stroke-dashoffset: 240; opacity: 0; }9537  20%  { opacity: 1; }9538  100% { stroke-dashoffset: -120; opacity: 0; }9539}95409541/* Connection dot ------------------------------------------------------- */9542.peach-chirp-dot {9543  position: absolute;9544  top: 50%; left: 50%;9545  transform: translate(-50%, -50%);9546  width: 40px; height: 40px;9547  opacity: 0;9548  pointer-events: none;9549  transition: opacity 0.3s ease;9550  color: var(--peach-accent);9551}9552.peach-chirp-dot.is-visible { opacity: 1; }9553.peach-chirp-dot-glow {9554  position: absolute; top: 50%; left: 50%;9555  transform: translate(-50%, -50%);9556  width: 38px; height: 38px;9557  border-radius: 50%;9558  filter: blur(10px);9559  opacity: 0.55;9560  background: var(--peach-accent);9561  animation: peach-chirp-dot-bloom 1.4s ease-out;9562}9563.peach-chirp-dot-core {9564  position: absolute; top: 50%; left: 50%;9565  transform: translate(-50%, -50%);9566  width: 8px; height: 8px;9567  border-radius: 50%;9568  background: var(--peach-accent);9569  box-shadow: 0 0 12px currentColor;9570  animation: peach-chirp-dot-core 1.4s ease-out;9571}9572.peach-chirp-dot-ring {9573  position: absolute; top: 50%; left: 50%;9574  width: 60px; height: 60px;9575  transform: translate(-50%, -50%);9576  animation: peach-chirp-dot-ring 1.4s linear;9577  stroke: var(--peach-accent);9578}9579@keyframes peach-chirp-dot-bloom {9580  0%   { width: 4px; height: 4px; opacity: 0; }9581  35%  { width: 60px; height: 60px; opacity: 0.7; }9582  100% { width: 38px; height: 38px; opacity: 0.55; }9583}9584@keyframes peach-chirp-dot-core {9585  0%   { width: 0; height: 0; }9586  35%  { width: 12px; height: 12px; }9587  100% { width: 8px; height: 8px; }9588}9589@keyframes peach-chirp-dot-ring {9590  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9591  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9592  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9593}95949595/* Motes — drift upward across the stage */9596.peach-chirp-motes {9597  position: absolute;9598  inset: 0;9599  pointer-events: none;9600}9601.peach-chirp-mote {9602  position: absolute;9603  width: 2px; height: 2px;9604  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9605  border-radius: 50%;9606  bottom: 32px;9607  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9608  opacity: 0;9609  animation: peach-chirp-mote-drift 6s linear infinite;9610  animation-delay: calc(var(--mote-i, 0) * 0.7s);9611}9612@keyframes peach-chirp-mote-drift {9613  0%   { transform: translateY(0); opacity: 0; }9614  10%  { opacity: 0.6; }9615  90%  { opacity: 0.1; }9616  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9617}96189619/* Status copy ---------------------------------------------------------- */9620.peach-chirp-copy-host {9621  margin: 4px 4px 10px;9622  text-align: center;9623  min-height: 50px;9624}9625.peach-chirp-copy {9626  animation: peach-chirp-copy-in 0.35s ease both;9627}9628@keyframes peach-chirp-copy-in {9629  from { opacity: 0; transform: translateY(4px); }9630  to   { opacity: 1; transform: translateY(0); }9631}9632.peach-chirp-headline {9633  font-family: var(--font-display, Georgia, serif);9634  font-style: italic;9635  font-size: 20px;9636  font-weight: 500;9637  line-height: 1.2;9638  letter-spacing: 0.005em;9639  color: var(--peach-t0);9640  margin-bottom: 6px;9641}9642.peach-chirp-copy-listening .peach-chirp-headline,9643.peach-chirp-copy-chirping .peach-chirp-headline,9644.peach-chirp-copy-idle .peach-chirp-headline {9645  font-family: inherit;9646  font-style: normal;9647  font-weight: 500;9648  font-size: 15px;9649  color: var(--peach-t0);9650  letter-spacing: 0;9651}9652.peach-chirp-copy-paired .peach-chirp-headline {9653  color: var(--peach-t0);9654  font-weight: 600;9655}9656.peach-chirp-sub {9657  font-size: 12.5px;9658  line-height: 1.45;9659  color: var(--peach-t1);9660  max-width: 280px;9661  margin: 0 auto;9662  text-wrap: pretty;9663}96649665/* Status action -------------------------------------------------------- */9666.peach-chirp-action {9667  margin: 2px 4px 10px;9668  margin-top: auto;9669  display: flex;9670  flex-direction: column;9671  gap: 8px;9672}9673.peach-chirp-action-waiting {9674  display: flex;9675  align-items: center;9676  justify-content: space-between;9677  gap: 12px;9678}9679.peach-chirp-cancel {9680  min-width: 96px;9681}9682.peach-chirp-listening {9683  display: inline-flex; align-items: center; gap: 4px;9684  font-family: var(--peach-mono, ui-monospace, monospace);9685  font-size: 9.5px;9686  text-transform: uppercase;9687  letter-spacing: 0.12em;9688  color: var(--peach-t1);9689  padding: 8px 10px;9690}9691.peach-chirp-listen-dot {9692  width: 4px; height: 4px;9693  border-radius: 50%;9694  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9695  animation: peach-chirp-listen-pulse 1.2s ease-in-out infinite;9696}9697.peach-chirp-listen-dot:nth-child(2) { animation-delay: 0.2s; }9698.peach-chirp-listen-dot:nth-child(3) { animation-delay: 0.4s; }9699.peach-chirp-listen-label { margin-left: 6px; }9700@keyframes peach-chirp-listen-pulse {9701  0%, 100% { opacity: 0.25; transform: scale(0.9); }9702  50%      { opacity: 1;     transform: scale(1.15); }9703}97049705.peach-chirp-action-handshake {9706  display: flex;9707  flex-direction: column;9708  align-items: center;9709  gap: 8px;9710  padding: 8px 4px;9711}9712.peach-chirp-meter {9713  width: 100%;9714  max-width: 280px;9715  height: 2px;9716  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9717  border-radius: 2px;9718  position: relative;9719  overflow: hidden;9720}9721.peach-chirp-meter-bar {9722  position: absolute;9723  top: 0; bottom: 0;9724  width: 30%;9725  left: -30%;9726  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9727  animation: peach-chirp-meter-sweep 1.4s ease-in-out infinite;9728}9729@keyframes peach-chirp-meter-sweep {9730  0%   { left: -30%; }9731  100% { left: 100%; }9732}9733.peach-chirp-meter-label {9734  font-family: var(--peach-mono, ui-monospace, monospace);9735  font-size: 9.5px;9736  text-transform: uppercase;9737  letter-spacing: 0.14em;9738  color: var(--peach-t1);9739}97409741.peach-chirp-action-paired {9742  display: flex;9743  align-items: center;9744  gap: 10px;9745}9746.peach-chirp-device-confirm {9747  flex: 1;9748  display: inline-flex;9749  align-items: center;9750  gap: 8px;9751  padding: 9px 10px 9px 12px;9752  border-radius: 10px;9753  background: color-mix(in srgb, #76b6e8 12%, transparent);9754  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9755  font-size: 12.5px;9756  color: var(--peach-t0);9757  min-width: 0;9758}9759.peach-chirp-device-confirm-glyph {9760  display: inline-flex;9761  color: #76b6e8;9762}9763.peach-chirp-device-confirm-name {9764  flex: 1;9765  overflow: hidden;9766  text-overflow: ellipsis;9767  white-space: nowrap;9768}9769.peach-chirp-device-confirm-trust {9770  font-family: var(--peach-mono, ui-monospace, monospace);9771  font-size: 9.5px;9772  text-transform: uppercase;9773  letter-spacing: 0.1em;9774  color: #76b6e8;9775  padding: 2px 6px;9776  border-radius: 4px;9777  background: color-mix(in srgb, #76b6e8 14%, transparent);9778}9779.peach-chirp-done {9780  min-width: 80px;9781}9782.peach-chirp-retry {9783  align-self: center;9784  display: block;9785  margin: 6px auto 0;9786  min-width: 120px;9787}9788.peach-chirp-mic-help {9789  font-size: 12px;9790  color: var(--peach-t1);9791  text-align: center;9792  max-width: 320px;9793  margin: 0 auto;9794}97959796/* Rest state — bird stage at idle pose, primary CTA + paired list */9797.peach-chirp-pair[data-phase="idle"] .peach-chirp-stage {9798  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9799  height: 160px;9800}9801.peach-chirp-pair-start {9802  width: 100%;9803  display: inline-flex;9804  align-items: center;9805  justify-content: center;9806  gap: 8px;9807  padding: 11px 14px;9808  border-radius: 10px;9809  background: var(--peach-accent);9810  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9811  color: #1a0905;9812  font-family: inherit;9813  font-size: 13px;9814  font-weight: 600;9815  letter-spacing: 0.01em;9816  cursor: pointer;9817  transition: filter 0.15s ease, transform 0.1s ease;9818}9819.peach-chirp-pair-start:hover { filter: brightness(1.08); }9820.peach-chirp-pair-start:active { transform: translateY(1px); }98219822.peach-chirp-paired-section {9823  margin-top: 14px;9824  display: flex;9825  flex-direction: column;9826  gap: 8px;9827}9828.peach-chirp-paired-heading {9829  margin: 0;9830  font-family: var(--peach-mono, ui-monospace, monospace);9831  font-size: 10px;9832  font-weight: 500;9833  letter-spacing: 0.14em;9834  text-transform: uppercase;9835  color: var(--peach-t1);9836}98379838/* Footer --------------------------------------------------------------- */9839.peach-chirp-foot {9840  margin: 10px -4px -2px;9841  margin-top: auto;9842}9843.peach-chirp-foot-divider {9844  height: 1px;9845  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9846  margin-bottom: 10px;9847}9848.peach-chirp-foot-text {9849  font-size: 11px;9850  line-height: 1.5;9851  color: var(--peach-t1);9852  text-align: center;9853  padding: 0 4px;9854  text-wrap: pretty;9855}98569857/* Screen-reader-only live region. Kept off the visual flow but read by9858   assistive tech as the pairing phase advances. */9859.peach-sr-only {9860  position: absolute;9861  width: 1px; height: 1px;9862  padding: 0; margin: -1px;9863  overflow: hidden;9864  clip: rect(0, 0, 0, 0);9865  white-space: nowrap;9866  border: 0;9867}98689869/* Reduced motion — stage simplifies to opacity transitions only */9870@media (prefers-reduced-motion: reduce) {9871  .peach-chirp-bird-body,9872  .peach-chirp-bird-head-group,9873  .peach-chirp-bird-beak,9874  .peach-chirp-bird-wing,9875  .peach-chirp-bird-tuft,9876  .peach-chirp-bird-tail,9877  .peach-chirp-bird-eye-group,9878  .peach-chirp-bird-aura,9879  .peach-chirp-arc,9880  .peach-chirp-flight-path,9881  .peach-chirp-flight-path-2,9882  .peach-chirp-dot-glow,9883  .peach-chirp-dot-core,9884  .peach-chirp-dot-ring,9885  .peach-chirp-mote,9886  .peach-chirp-meter-bar,9887  .peach-chirp-listen-dot,9888  .peach-chirp-bird-slot,9889  .peach-chirp-bird-slot-mobile {9890    animation: none !important;9891    transition: opacity 0.2s linear !important;9892  }9893}98949895/* ─────────────────────────────────────────────────────────────────9896   Settings → Sync surface (v3 ChirpSync). Wraps the same bird9897   animation used by the pairing flow with a paired-devices list and9898   the "Pair a device" CTA.9899   ───────────────────────────────────────────────────────────────── */9900.peach-chirp-settings {9901  position: absolute;9902  inset: 0;9903  z-index: 3;9904  display: flex;9905  flex-direction: column;9906  gap: 18px;9907  padding: 14px 12px 12px;9908  width: 100%;9909  box-sizing: border-box;9910  overflow-y: auto;9911  overflow-x: hidden;9912  /* Same warm Chirp surface as the pairing screen — unifies the two views. */9913  background:9914    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9915    var(--peach-bg);9916  color: var(--peach-t0);9917  isolation: isolate;9918  /* Hide native scrollbar — content fits 99% of the time and a chunky9919     gutter ruins the surface. */9920  scrollbar-width: none;9921  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9922}9923.peach-chirp-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9924.peach-chirp-settings::before {9925  content: '';9926  position: absolute;9927  inset: 0;9928  pointer-events: none;9929  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9930  z-index: 0;9931}9932.peach-chirp-settings > * { position: relative; z-index: 1; }99339934.peach-chirp-settings--pairing {9935  padding: 0;9936  align-items: stretch;9937  justify-content: stretch;9938  background: none;9939  isolation: auto;9940}9941.peach-chirp-settings--pairing::before { display: none; }99429943.peach-chirp-settings-header {9944  display: flex;9945  align-items: center;9946  gap: 10px;9947}9948.peach-chirp-settings-title {9949  margin: 0;9950  font-family: var(--font-display, Georgia, serif);9951  font-style: italic;9952  font-size: 24px;9953  font-weight: 500;9954  line-height: 1;9955  color: var(--peach-t0);9956  letter-spacing: 0.005em;9957}9958.peach-chirp-settings-section {9959  margin: 6px 0 -4px;9960  font-size: 11px;9961  font-weight: 600;9962  letter-spacing: 0.08em;9963  text-transform: uppercase;9964  color: var(--peach-text-muted);9965}9966.peach-chirp-settings-error {9967  font-size: 12px;9968  padding: 8px 10px;9969  border-radius: 8px;9970  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);9971  color: var(--peach-text);9972}9973.peach-chirp-settings-footer {9974  margin-top: auto;9975  padding-top: 18px;9976  font-size: 11.5px;9977  line-height: 1.5;9978  color: var(--peach-text-muted);9979  text-align: center;9980}99819982/* Hero card shown when no devices are paired yet. */9983.peach-chirp-hero {9984  display: flex;9985  flex-direction: column;9986  align-items: center;9987  gap: 12px;9988  padding: 20px 12px 8px;9989  text-align: center;9990}9991.peach-chirp-hero-svg {9992  display: block;9993  max-width: 100%;9994  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));9995}9996.peach-chirp-hero-headline {9997  margin: 0;9998  font-family: var(--font-display, Georgia, serif);9999  font-style: italic;10000  font-size: 20px;10001  font-weight: 500;10002  line-height: 1.2;10003  letter-spacing: 0.005em;10004  color: var(--peach-t0);10005}10006.peach-chirp-hero-sub {10007  margin: 0;10008  font-size: 13px;10009  line-height: 1.5;10010  color: var(--peach-t1);10011  max-width: 320px;10012  text-wrap: pretty;10013}1001410015.peach-chirp-pair-cta {10016  display: flex;10017  justify-content: center;10018  padding: 4px 0 6px;10019}10020.peach-chirp-pair-button {10021  display: inline-flex;10022  align-items: center;10023  gap: 8px;10024  min-width: 220px;10025  justify-content: center;10026}10027.peach-chirp-pair-button-icon {10028  flex: 0 0 auto;10029}1003010031/* Paired devices list. Roomy rows that look at home next to the rest10032   of Settings; stale rows get a soft warm-warning border tint. */10033.peach-chirp-device-list {10034  list-style: none;10035  margin: 0;10036  padding: 0;10037  display: flex;10038  flex-direction: column;10039  gap: 8px;10040}10041.peach-chirp-device-row {10042  display: flex;10043  align-items: center;10044  gap: 12px;10045  padding: 12px;10046  border-radius: 10px;10047  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10048  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);10049}10050.peach-chirp-device-row[data-stale="true"] {10051  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);10052}10053.peach-chirp-device-icon {10054  width: 32px;10055  height: 32px;10056  display: flex;10057  align-items: center;10058  justify-content: center;10059  border-radius: 8px;10060  color: var(--peach-text);10061  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);10062}10063.peach-chirp-device-info {10064  flex: 1;10065  display: flex;10066  flex-direction: column;10067  gap: 2px;10068  min-width: 0;10069}10070.peach-chirp-device-name {10071  font-size: 14px;10072  font-weight: 600;10073  color: var(--peach-text);10074  overflow: hidden;10075  text-overflow: ellipsis;10076  white-space: nowrap;10077}10078.peach-chirp-device-meta {10079  font-size: 11.5px;10080  color: var(--peach-text-muted);10081  display: flex;10082  flex-wrap: wrap;10083  align-items: center;10084  gap: 8px;10085}10086.peach-chirp-device-badge {10087  font-size: 10.5px;10088  font-weight: 500;10089  letter-spacing: 0.02em;10090  padding: 2px 6px;10091  border-radius: 999px;10092  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);10093  color: var(--peach-text);10094}10095.peach-chirp-device-stale {10096  font-size: 10.5px;10097  font-weight: 500;10098  color: var(--peach-warn, #d29257);10099}10100.peach-chirp-device-remove {10101  flex: 0 0 auto;10102  color: var(--peach-text-muted);10103}10104.peach-chirp-device-remove:hover {10105  color: var(--peach-danger, #c25b4a);10106}10107.peach-chirp-unpair-confirm {10108  display: flex;10109  gap: 6px;10110  align-items: center;10111}1011210113/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */10114.peach-chirp-pro-card {10115  position: relative;10116  margin: 18px 12px;10117  padding: 18px 20px 22px;10118  border-radius: 22px;10119  background:10120    radial-gradient(140% 90% at 50% 0%,10121      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,10122      transparent 60%),10123    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10124  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);10125  box-shadow:10126    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,10127    0 18px 40px -24px rgba(0, 0, 0, 0.45);10128  display: flex;10129  flex-direction: column;10130  align-items: center;10131  gap: 10px;10132  text-align: center;10133  overflow: hidden;10134}10135.peach-chirp-pro-stage {10136  position: relative;10137  width: 220px;10138  height: 140px;10139  display: flex;10140  align-items: flex-end;10141  justify-content: center;10142  margin-bottom: 2px;10143}10144.peach-chirp-pro-bird-slot {10145  width: 140px;10146  height: 132px;10147  display: flex;10148  align-items: flex-end;10149  justify-content: center;10150  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));10151}10152.peach-chirp-pro-bird-slot .peach-chirp-bird {10153  width: 100%;10154  height: 100%;10155}10156.peach-chirp-pro-bird-slot .peach-chirp-bird svg {10157  width: 100%;10158  height: 100%;10159  overflow: visible;10160}10161.peach-chirp-pro-chirp {10162  position: absolute;10163  top: 14px;10164  right: 8px;10165  width: 96px;10166  height: 80px;10167  color: var(--peach-accent);10168  animation: peach-chirp-pulse 2.6s ease-in-out infinite;10169  transform-origin: 0% 50%;10170  pointer-events: none;10171}10172@keyframes peach-chirp-pulse {10173  0%, 100% { opacity: 0.35; transform: translateX(0) scale(0.92); }10174  45%      { opacity: 1;    transform: translateX(2px) scale(1); }10175  70%      { opacity: 0.6;  transform: translateX(4px) scale(1.04); }10176}10177@media (prefers-reduced-motion: reduce) {10178  .peach-chirp-pro-chirp { animation: none; opacity: 0.7; }10179}10180.peach-chirp-pro-headline {10181  margin: 4px 0 0;10182  font-family: var(--font-display, "Cormorant Garamond", serif);10183  font-style: italic;10184  font-size: 19px;10185  font-weight: 500;10186  letter-spacing: 0.01em;10187  color: var(--peach-t0);10188  max-width: 280px;10189  line-height: 1.25;10190}10191.peach-chirp-pro-body {10192  margin: 0;10193  font-size: 13px;10194  line-height: 1.55;10195  color: var(--peach-t1);10196  max-width: 300px;10197}10198.peach-chirp-pro-cta {10199  margin-top: 4px;10200}10201.peach-chirp-pro-foot {10202  margin: 2px 0 0;10203  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10204  font-size: 0.625rem;10205  letter-spacing: 0.08em;10206  text-transform: uppercase;10207  color: var(--peach-t2);10208  opacity: 0.75;10209}1021010211/* Shell border and shadow in light mode: match dark mode's near-invisible10212   border weight so the popup frame looks the same in both themes. */10213.light .peach-shell,10214.light .peach-screen {10215  border-color: rgba(26, 18, 8, 0.07);10216  box-shadow:10217    0 2px 8px rgba(80, 56, 32, 0.08),10218    0 14px 48px rgba(80, 56, 32, 0.10),10219    0 0 0 1px rgba(26, 18, 8, 0.04);10220}