popup.css

1html,2body,3#app,4.popup-root {5  width: 320px;6  min-height: 520px;7  height: 520px;8  margin: 0;9}1011body {12  overflow: hidden;13  background: var(--bg);14  color: var(--t0);15  font-family: var(--font-ui);16  font-weight: 300;17  position: relative;18}1920* {21  box-sizing: border-box;22}2324button,25input,26textarea,27select {28  font: inherit;29}3031button {32  border: 0;33}3435.popup-root {36  position: relative;37  overflow: hidden;38}3940.peach-theme {41  color: var(--peach-t0);42  font-family: var(--font-ui);43  font-weight: 300;44  box-sizing: border-box;45  text-align: left;46}47.peach-theme, .peach-theme * { box-sizing: inherit; }4849.peach-brand-mark {50  width: 14px;51  height: 14px;52  flex-shrink: 0;53}5455.peach-status-pip.is-hidden {56  display: none;57}5859.peach-status-pip.unlocked {60  background: var(--peach-health-ok);61  box-shadow: 0 0 6px rgba(100, 210, 100, 0.6);62}6364.peach-status-pip.pulse {65  animation: pip-pulse 400ms var(--peach-curve-settle) both;66}6768/* Shell */69.peach-shell, .peach-screen {70  background:71    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),72    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),73    var(--peach-bg);74  border: 1px solid var(--peach-t3);75  box-shadow:76    0 2px 8px rgba(0,0,0,0.55),77    0 14px 48px rgba(0,0,0,0.7),78    0 0 0 1px rgba(240,232,216,0.04);79  overflow: hidden;80}81.peach-shell {82  display: grid;83  grid-template-rows: auto 1fr;84  min-height: 520px;85  position: relative;86  isolation: isolate;87}8889.peach-shell[data-surface="extension"] {90  width: min(320px, 100vw);91  border-radius: 0;92  height: 520px;93  max-height: 520px;94  overflow: hidden;95}9697/* ── Lock screen – full-window lock/create stage ── */98.lock-screen--vault-stage {99  display: flex;100  flex-direction: column;101  gap: 18px;102  padding: 20px 18px 18px;103  justify-content: flex-start;104}105.lock-screen--vault-stage .peach-lock-panel {106  margin-top: auto;107}108.peach-lock-headline--unlock {109  max-width: 220px;110}111.peach-lock-hero--unlock {112  padding-top: 14px;113}114.peach-lock-panel--unlock {115  gap: 10px;116}117118.peach-lock-restore-link {119  background: transparent;120  border: none;121  cursor: pointer;122  font-family: var(--font-mono);123  font-size: 0.625rem;124  letter-spacing: 0.08em;125  color: var(--t1);126  padding: 5px 0;127  text-align: left;128  transition: color 150ms ease;129}130131.peach-lock-restore-link:hover {132  color: var(--t0);133}134.peach-shell[data-surface="extension"] .peach-stage {135  min-height: 250px;136}137138/* Screen (unlock) */139.peach-screen {140  width: min(320px, 100vw);141  min-height: 100%;142  height: 100%;143  border-radius: 0;144  padding: 16px 20px 18px;145  display: grid;146  gap: 14px;147}148.peach-screen[data-motion-phase="enter"] {149  animation: peach-screen-enter var(--peach-dur-600) var(--peach-curve-arrival) both;150}151.peach-screen-header { min-height: 20px; }152153/* Wordmark */154.peach-wordmark {155  margin: 0;156  font-family: var(--font-display);157  font-size: 0.9375rem;158  font-style: italic;159  letter-spacing: 0.03em;160  color: var(--peach-t0);161  display: inline-flex;162  min-height: 1em;163}164165/* Motion text / char animation */166.peach-motion-text { display: inline-flex; min-height: 1em; }167.peach-motion-char {168  display: inline-block;169  white-space: pre;170  opacity: 0;171  transform: translateY(0.22em);172  animation: peach-char-enter var(--peach-motion-duration, 380ms) var(--peach-curve-arrival) forwards;173  animation-delay: calc(var(--peach-char-index, 0) * 20ms);174}175176/* Chrome */177.peach-chrome {178  position: relative;179  z-index: 10;180  padding: 16px 20px 0;181  display: flex;182  justify-content: space-between;183  align-items: center;184  /* z-index:10 keeps the header icons above `.peach-loading` (Suspense185     fallback) per §15 regression guard. Without pointer-events:none, the186     empty header strip also sits above `.peach-overlay-view` (z-index:2)187     and swallows clicks meant for an overlay's back button / top search. */188  pointer-events: none;189}190.peach-chrome .peach-btn { pointer-events: auto; }191.peach-chrome.is-hidden-for-overlay,192.peach-search-wrap.is-hidden-for-overlay {193  opacity: 0;194  visibility: hidden;195  pointer-events: none;196}197/* Chirp-sync owns its own surface and header — fully collapse the global198   chrome row so the warm gradient reaches the popup edge. */199.peach-chrome.is-collapsed,200.peach-search-wrap.is-collapsed {201  display: none;202}203.peach-wordmark-wrap { display: flex; align-items: center; gap: 5px; }204.peach-status-pip {205  width: 5px;206  height: 5px;207  border-radius: 50%;208  background: var(--peach-t3);209  display: inline-flex;210  flex-shrink: 0;211  transition: background 400ms ease, box-shadow 400ms ease;212}213.peach-chrome-actions { display: flex; gap: 6px; }214215/* Shell body */216.peach-shell-body {217  position: relative;218  display: grid;219  grid-template-rows: 1fr auto;220  min-height: 0;221  min-width: 0;222  width: 100%;223  overflow: hidden;224  height: 100%;225}226.peach-shell-veil {227  position: absolute; inset: 0;228  background: #000; opacity: 0;229  pointer-events: none; z-index: 1;230}231.peach-shell[data-motion-phase="enter"] .peach-shell-body {232  animation: peach-shell-fade-in var(--peach-dur-600) var(--peach-curve-arrival) both;233}234.peach-shell[data-motion-phase="exit"] .peach-shell-veil {235  animation: peach-veil-in 300ms var(--peach-curve-departure) forwards;236}237238/* Content frame */239.peach-content-frame {240  display: grid;241  grid-template-rows: 1fr auto;242  grid-template-columns: minmax(0, 1fr);243  align-content: start;244  min-height: 0;245  min-width: 0;246  overflow: hidden;247  transition: opacity 80ms ease, transform 80ms ease;248}249.peach-content-frame.navigating {250  opacity: 0.93;251  transform: translateX(2px);252}253.peach-content-frame[data-content-phase="enter"] {254  animation: peach-content-enter 135ms ease-out both;255}256.peach-content-frame[data-content-phase="exit"] {257  animation: peach-content-exit 95ms ease-in forwards;258}259.peach-content-frame[data-content-phase="idle"] { opacity: 1; transform: none; }260261/* Stage */262.peach-stage {263  padding: 10px 20px 12px;264  display: grid;265  gap: 12px;266  align-content: start;267  min-width: 0;268  min-height: 0;269  max-width: 100%;270  overflow-y: auto;271  overflow-x: hidden;272  scrollbar-width: none;273  -ms-overflow-style: none;274  overscroll-behavior: contain;275}276.peach-stage::-webkit-scrollbar { display: none; }277278/* Entry name */279.peach-entry-name-wrap { position: relative; overflow: hidden; max-width: 100%; }280.peach-entry-header {281  position: relative;282  z-index: 1;283  display: flex;284  align-items: flex-start;285  gap: 6px;286  min-width: 0;287}288.peach-entry-header-name {289  flex: 1;290  min-width: 0;291}292.peach-entry-name {293  margin: 0;294  padding-bottom: 0.12em;295  font-family: var(--font-display);296  font-style: italic; font-weight: 400;297  font-size: 44px; line-height: 0.95;298  color: var(--peach-t0);299  display: -webkit-box;300  -webkit-line-clamp: 2;301  -webkit-box-orient: vertical;302  overflow: hidden;303  text-wrap: balance;304}305.peach-entry-name--lg { font-size: 40px; }306.peach-entry-name--xl { font-size: 34px; line-height: 0.98; }307.peach-entry-name--xxl { font-size: 30px; line-height: 1.02; }308.peach-entry-name-text { display: block; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; padding-bottom: 0.12em; }309310/* Trash icon in entry header */311.peach-entry-trash-btn {312  flex-shrink: 0;313  padding: 4px;314  margin-top: 4px;315  background: transparent;316  border: none;317  cursor: pointer;318  color: var(--peach-t2);319  border-radius: 4px;320  transition: color 140ms ease, background 140ms ease;321  display: flex;322  align-items: center;323  justify-content: center;324}325.peach-entry-trash-btn:hover {326  color: var(--peach-t1);327  background: var(--peach-t3);328}329.peach-entry-trash-confirm {330  display: flex;331  align-items: center;332  gap: 6px;333  flex-shrink: 0;334  margin-top: 6px;335  flex-wrap: nowrap;336}337.peach-entry-trash-confirm-label {338  font-family: var(--font-mono);339  font-size: 0.5625rem;340  letter-spacing: 0.1em;341  color: var(--peach-t2);342  white-space: nowrap;343}344.peach-entry-name-button {345  padding: 0;346  background: transparent;347  text-align: left;348  cursor: pointer;349  max-width: 100%;350  overflow: hidden;351  display: block;352}353.peach-entry-name-char {354  display: inline-block;355  white-space: pre;356  opacity: 0;357  transform: translateY(0.22em);358  animation: peach-char-enter 380ms var(--peach-curve-arrival) forwards;359  animation-delay: calc(var(--char-index, 0) * 20ms);360}361362/* Domain */363.peach-domain { border-top: 1px solid var(--peach-t3); padding-top: 9px; }364.peach-domain-row {365  width: 100%; border: 0; background: transparent; color: inherit;366  padding: 0; display: flex; justify-content: space-between; align-items: baseline;367  cursor: default;368}369.peach-domain-value {370  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;371  font-size: 0.625rem; font-style: italic;372  letter-spacing: 0.12em; color: var(--peach-t1);373}374375/* Fields */376.peach-fields { display: grid; gap: 10px; }377.peach-field-card { display: grid; gap: 7px; }378.peach-label {379  font-family: Inter, system-ui, sans-serif;380  text-transform: uppercase; letter-spacing: 0.2em;381  font-size: 0.5rem; color: var(--peach-t2);382}383.peach-add-field-btn {384  align-self: flex-start;385  background: none; border: none; padding: 2px 0;386  font-family: Inter, system-ui, sans-serif;387  font-size: 0.6875rem; color: var(--peach-accent);388  cursor: pointer; opacity: 0.75;389  letter-spacing: 0.02em;390}391.peach-add-field-btn:hover { opacity: 1; }392.peach-field-value-row {393  display: flex; justify-content: space-between;394  align-items: center; gap: 8px;395  min-width: 0;396}397.peach-field-value {398  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;399  font-size: 0.8125rem; color: var(--peach-t1);400  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;401  flex: 1;402  min-width: 0;403}404.peach-password-value {405  display: inline-flex;406  align-items: center;407  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;408  font-size: 1rem; letter-spacing: 0.3em; color: var(--peach-t0);409  overflow: hidden;410  text-overflow: ellipsis;411  white-space: nowrap;412  flex: 1;413  min-width: 0;414  max-width: 100%;415}416.peach-password-value.is-revealed {417  font-size: 0.875rem;418  letter-spacing: 0.08em;419}420.peach-password-text,421.peach-password-mask {422  display: block;423  width: 100%;424  overflow: hidden;425  white-space: nowrap;426  /* Render as uniform mid-line bullets, not baseline periods */427  font-family: Inter, system-ui, sans-serif;428  font-size: 0.625rem;429  letter-spacing: 3px;430  user-select: none;431}432.peach-field-actions { display: flex; gap: 4px; align-items: center; }433.peach-password-strength { display: flex; align-items: center; gap: 8px; }434.peach-strength-bar { display: flex; gap: 3px; }435.peach-strength-seg { width: 28px; height: 4px; border-radius: 2px; background: #eee; }436.peach-strength-label {437  font-family: "IBM Plex Mono", monospace;438  font-style: italic;439  font-size: 0.5625rem;440  font-weight: 300;441  min-width: 36px;442  text-align: right;443  color: var(--peach-t2);444  letter-spacing: 0.06em;445}446447.peach-strength-hairline {448  display: flex;449  align-items: center;450  gap: 10px;451  margin-top: -2px;452}453454.peach-strength-hairline-track {455  flex: 1;456  height: 3px;457  border-radius: 2px;458  background: var(--peach-s2);459  overflow: hidden;460}461462.peach-strength-hairline-fill {463  height: 100%;464  border-radius: 2px;465  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),466    background 400ms ease;467}468469/* Note content (display) */470.peach-note-content {471  border-top: 1px solid var(--peach-t3);472  padding-top: 10px;473  font-family: var(--font-display);474  font-size: 0.9375rem;475  line-height: 1.75;476  color: var(--peach-t1);477}478479/* ── Inline editing ─────────────────────────────────────────────────── */480481/* Clickable display values */482.peach-inline-clickable {483  cursor: text;484  border-radius: 3px;485  transition: background 150ms ease;486}487.peach-inline-clickable:hover {488  background: rgba(240, 232, 216, 0.05);489}490491/* Subtle "edit" hint that appears on hover */492.peach-inline-edit-hint {493  font-family: Inter, system-ui, sans-serif;494  font-size: 0.5625rem;495  text-transform: uppercase;496  letter-spacing: 0.14em;497  color: var(--peach-t2);498  opacity: 0;499  transition: opacity 120ms ease;500  pointer-events: none;501  margin-left: 6px;502  flex-shrink: 0;503}504.peach-domain-row:hover .peach-inline-edit-hint {505  opacity: 1;506}507508/* Title editing */509.peach-inline-title-wrap {510  display: flex;511  flex-direction: column;512  gap: 6px;513}514.peach-inline-title-input {515  font-family: var(--font-display);516  font-style: italic;517  font-weight: 400;518  font-size: 40px;519  line-height: 0.95;520  color: var(--peach-t0);521  background: transparent;522  border: none;523  border-bottom: 1px solid var(--peach-accent);524  outline: none;525  width: 100%;526  padding: 2px 0;527}528529/* Generic inline field */530.peach-inline-field-wrap {531  display: flex;532  flex-direction: column;533  gap: 6px;534}535.peach-inline-input {536  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;537  font-size: 0.8125rem;538  color: var(--peach-t0);539  background: transparent;540  border: none;541  border-bottom: 1px solid var(--peach-accent);542  outline: none;543  width: 100%;544  padding: 3px 0;545}546.peach-inline-textarea {547  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;548  font-size: 0.6875rem;549  line-height: 1.7;550  color: var(--peach-t0);551  background: rgba(240, 232, 216, 0.04);552  border: 1px solid var(--peach-accent);553  border-radius: 4px;554  outline: none;555  width: 100%;556  padding: 8px;557  resize: vertical;558  min-height: 80px;559}560561/* Save / cancel row */562.peach-inline-actions {563  display: flex;564  gap: 6px;565  align-items: center;566}567.peach-inline-save-btn,568.peach-inline-cancel-btn {569  display: inline-flex;570  align-items: center;571  justify-content: center;572  width: 26px;573  height: 26px;574  border-radius: 4px;575  border: none;576  cursor: pointer;577  transition: background 140ms ease, opacity 140ms ease;578  flex-shrink: 0;579}580.peach-inline-save-btn {581  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);582  color: var(--peach-accent);583}584.peach-inline-save-btn:hover:not(:disabled) {585  background: color-mix(in srgb, var(--peach-accent) 30%, transparent);586}587.peach-inline-cancel-btn {588  background: rgba(240, 232, 216, 0.06);589  color: var(--peach-t2);590}591.peach-inline-cancel-btn:hover:not(:disabled) {592  background: rgba(240, 232, 216, 0.12);593  color: var(--peach-t1);594}595.peach-inline-save-btn:disabled,596.peach-inline-cancel-btn:disabled {597  opacity: 0.4;598  cursor: not-allowed;599}600601/* Inline password generator wrapper */602.peach-inline-generator-wrap {603  margin-top: 10px;604  padding-top: 10px;605  border-top: 1px solid var(--peach-t3);606  display: flex;607  flex-direction: column;608  gap: 8px;609}610.peach-inline-generator-cancel {611  align-self: flex-start;612  font-size: 0.6875rem;613  color: var(--peach-t2);614}615616/* "is-editing" card state */617.peach-field-card.is-editing {618  background: rgba(240, 232, 216, 0.02);619  border-radius: 6px;620  padding: 8px;621  margin: -8px;622}623624/* Inline tag editor on Entry detail view */625.peach-inline-tag-editor {626  display: flex;627  flex-direction: column;628  gap: 6px;629}630631/* Quiet inline "+ add X" link in the entry detail body */632.peach-entry-add-link {633  justify-self: start;634  margin-top: 8px;635}636637/* Additional URLs editor revealed by clicking the URL field */638.peach-additional-urls {639  display: flex;640  flex-direction: column;641  gap: 6px;642  margin-top: 8px;643}644.peach-additional-urls-label {645  font-size: 0.5625rem;646  letter-spacing: 0.1em;647  text-transform: uppercase;648  color: var(--peach-t2);649  margin-bottom: 2px;650}651/* UI-5 / LV-4: recovery words grid in the view-words reveal. */652.peach-recovery-words-grid {653  display: grid;654  grid-template-columns: 1fr 1fr;655  gap: 4px 10px;656}657.peach-recovery-word {658  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;659  font-size: 11px;660  color: var(--peach-t0);661}662.peach-recovery-word b {663  color: var(--peach-t2);664  font-weight: 400;665  margin-right: 4px;666}667668/* UI-1 / HV-1b: dismissible sync alert banners at the top of the vault view. */669.peach-sync-alerts {670  display: flex;671  flex-direction: column;672  gap: 6px;673  padding: 8px 12px 0;674}675.peach-sync-alert {676  display: flex;677  align-items: flex-start;678  gap: 8px;679  padding: 8px 10px;680  border-radius: 7px;681  background: color-mix(in srgb, #C8A840 14%, transparent);682  border: 1px solid color-mix(in srgb, #C8A840 38%, transparent);683}684.peach-sync-alert-text {685  flex: 1;686  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;687  font-size: 10px;688  line-height: 1.45;689  color: var(--peach-t0);690}691.peach-sync-alert-dismiss {692  flex-shrink: 0;693  background: none;694  border: none;695  color: var(--peach-t2);696  font-size: 14px;697  line-height: 1;698  cursor: pointer;699  padding: 0 2px;700}701.peach-sync-alert-dismiss:hover { color: var(--peach-t0); }702703/* UI-8 / LV-2: non-blocking homograph warning under the URL editor. */704.peach-homograph-warning {705  margin: 4px 0 2px;706  padding: 6px 8px;707  border-radius: 6px;708  background: color-mix(in srgb, var(--peach-breach) 12%, transparent);709  border: 1px solid color-mix(in srgb, var(--peach-breach) 36%, transparent);710  color: var(--peach-t1);711  font-size: 0.6875rem;712  line-height: 1.4;713}714.peach-additional-url-row {715  display: flex;716  align-items: center;717  gap: 6px;718}719.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }720.peach-additional-url-remove {721  background: transparent;722  border: 1px solid var(--peach-t3);723  color: var(--peach-t2);724  width: 22px;725  height: 22px;726  border-radius: 4px;727  cursor: pointer;728  font-size: 0.875rem;729  line-height: 1;730  display: inline-flex;731  align-items: center;732  justify-content: center;733  flex-shrink: 0;734  transition: color 120ms ease, border-color 120ms ease;735}736.peach-additional-url-remove:hover:not(:disabled) {737  color: var(--peach-accent);738  border-color: var(--peach-border-accent);739}740.peach-additional-urls-add { align-self: flex-start; }741742/* Delete row */743.peach-entry-delete-row {744  display: flex;745  align-items: center;746  gap: 8px;747  padding-top: 18px;748  margin-top: 8px;749  border-top: 1px solid var(--peach-t3);750}751.peach-delete-btn {752  font-size: 0.6875rem;753  color: var(--peach-t2);754  padding: 4px 0;755}756.peach-delete-confirm-text {757  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;758  font-size: 0.6875rem;759  font-style: italic;760  color: var(--peach-t2);761  flex-shrink: 0;762}763764/* TOTP band */765.peach-totp-band {766  border-top: 1px solid var(--peach-t3);767  padding: 12px 20px 14px;768  position: relative;769  display: grid;770  grid-template-columns: 1fr auto;771  gap: 10px;772}773.peach-totp-main {774  min-width: 0;775  cursor: pointer;776  user-select: none;777}778.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }779.peach-totp-code-row {780  display: flex;781  align-items: flex-end;782  gap: 10px;783  min-width: 0;784}785.peach-totp-code {786  margin: 2px 0 0;787  font-family: var(--font-display);788  font-style: italic;789  font-weight: 300;790  font-size: 38px; color: var(--peach-accent);791  line-height: 0.95; min-height: 1em;792  min-width: 0;793}794.peach-totp-code-text {795  display: inline-flex;796  overflow: hidden;797  text-overflow: ellipsis;798  white-space: nowrap;799}800.peach-totp-copy-btn {801  margin-bottom: 2px;802  flex-shrink: 0;803  border-color: transparent;804}805.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }806.peach-totp-countdown {807  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;808  font-size: 22px; color: var(--peach-t1);809}810.peach-totp-ring { transform: rotate(-90deg); }811.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }812.peach-totp-ring-progress {813  fill: none; stroke: var(--peach-accent); stroke-width: 2;814  stroke-linecap: round;815  transition: stroke-dashoffset 1s linear, stroke 500ms ease;816}817/* Search bar */818.peach-search-wrap {819  border-top: 1px solid var(--peach-t3);820  background: var(--peach-s1);821  min-height: 54px; position: relative;822  box-shadow: inset 0 6px 18px transparent;823  transition: box-shadow 700ms ease;824}825.peach-search-wrap::before {826  content: "";827  position: absolute;828  left: 0;829  top: 0;830  height: 2px;831  width: var(--peach-totp-progress, 0%);832  background: var(--peach-accent);833  opacity: 0;834  transition: width 1s linear, opacity 180ms ease;835  pointer-events: none;836}837.peach-shell[data-totp-active="true"] .peach-search-wrap::before {838  opacity: 0.9;839}840.peach-shell[data-totp-active="true"] .peach-search-wrap {841  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);842}843844@keyframes peach-totp-code-flare {845  0%   { filter: brightness(1); }846  25%  { filter: brightness(1.3); }847  100% { filter: brightness(1); }848}849.peach-totp-code.is-hot {850  animation: peach-totp-code-flare 3000ms ease-in-out both;851}852.peach-search-bar {853  min-height: 54px;854  display: grid;855  grid-template-columns: auto minmax(0, 1fr) auto;856  align-items: center;857  gap: 8px; padding: 0 9px 0 12px;858}859.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }860.peach-search-input {861  border: 0; background: transparent; color: var(--peach-t0);862  font-family: var(--font-display);863  font-style: italic; font-size: 18px;864  outline: none; width: 100%; min-width: 0; padding: 0;865  caret-color: var(--peach-accent);866}867.peach-search-input::placeholder { color: var(--peach-t2); }868.peach-search-meta {869  display: grid;870  grid-auto-flow: column;871  align-items: center;872  justify-content: end;873  gap: 6px;874  min-width: max-content;875}876.peach-search-counter {877  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;878  font-size: 0.625rem; color: var(--peach-t2);879  display: inline-flex;880  align-items: center;881  line-height: 1;882}883.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }884885/* Buttons */886.peach-btn {887  border: 1px solid transparent; border-radius: 12px;888  background: transparent; color: var(--peach-t0);889  font-family: Inter, system-ui, sans-serif;890  font-size: 0.75rem; letter-spacing: 0.02em; padding: 8px 12px;891  cursor: pointer;892  transition:893    background-color var(--peach-dur-80) var(--peach-curve-arrival),894    color var(--peach-dur-80) var(--peach-curve-arrival),895    border-color var(--peach-dur-150) var(--peach-curve-arrival);896}897.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }898.peach-btn:disabled {899  opacity: 0.45;900  cursor: not-allowed;901}902.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 0.6875rem; }903.peach-btn--md { min-height: 38px; }904.peach-btn--accent {905  background: var(--peach-accent);906  color: rgba(0,0,0,0.92);907  font-weight: 500;908  box-shadow:909    0 1px 0 rgba(255,255,255,0.08) inset,910    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),911    0 3px 16px var(--peach-glow),912    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);913}914.peach-btn--accent:hover:not(:disabled) {915  background: var(--peach-accent);916  filter: brightness(1.10) saturate(1.05);917  box-shadow:918    0 1px 0 rgba(255,255,255,0.10) inset,919    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),920    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),921    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);922}923.peach-btn--ghost:not(.peach-icon-btn) { border-color: var(--peach-t3); color: var(--peach-t1); }924.peach-btn--ghost.peach-icon-btn { color: var(--peach-t1); }925.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }926.peach-icon-btn {927  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;928  display: inline-flex; align-items: center; justify-content: center;929  border-color: transparent;930  transition:931    color var(--peach-dur-80) var(--peach-curve-arrival),932    box-shadow var(--peach-dur-150) var(--peach-curve-arrival),933    background-color var(--peach-dur-80) var(--peach-curve-arrival);934}935.peach-icon-btn:hover:not(:disabled) {936  background: transparent;937  color: var(--peach-accent);938  box-shadow: 0 0 12px color-mix(in srgb, var(--peach-accent) 28%, transparent),939              0 0 4px color-mix(in srgb, var(--peach-accent) 16%, transparent);940}941942.peach-btn:focus-visible {943  outline: none;944  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);945}946947/* Lock button */948.peach-lock-icon { transform-origin: center; }949.peach-lock-btn { color: var(--peach-accent); }950.peach-lock-btn.is-locking .peach-lock-icon {951  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);952}953954/* Biometric unlock button */955.peach-biometric-btn {956  display: flex;957  align-items: center;958  justify-content: center;959  gap: 6px;960  margin-top: 8px;961  width: 100%;962}963964/* Copy button */965.peach-copy-btn {966  position: relative; overflow: hidden;967  color: var(--peach-t2); border-color: var(--peach-t3);968}969.peach-copy-icon {970  display: inline-flex; align-items: center; justify-content: center;971  position: relative; z-index: 1;972}973.peach-copy-icon-svg { display: block; }974.peach-copy-sheen {975  position: absolute; inset: 0;976  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--peach-accent) 18%, transparent) 30%, color-mix(in srgb, var(--peach-accent) 8%, transparent) 100%);977  opacity: 0; transform: scaleX(0.15); transform-origin: left center;978}979.peach-copy-btn.is-copied {980  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;981  box-shadow:982    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),983    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),984    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);985}986.peach-copy-btn.is-copied .peach-copy-icon {987  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;988}989.peach-copy-btn.is-copied .peach-copy-sheen {990  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;991}992.peach-copy-btn.is-retreat {993  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;994}995.peach-copy-btn.is-retreat .peach-copy-sheen {996  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;997}998.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }999.peach-copy-drain-bar {1000  display: block; width: 100%; height: 100%;1001  background: var(--peach-accent); opacity: 0.7;1002  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;1003}10041005/* Unlock screen elements */1006.peach-underline-input {1007  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);1008  padding: 6px 0; background: transparent; color: var(--peach-t0);1009  outline: none;1010  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1011  font-size: 0.8125rem;1012  caret-color: var(--peach-accent);1013}1014.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }1015.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }1016.peach-hint {1017  margin: 0;1018  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1019  font-size: 0.625rem; color: var(--peach-t2);1020}1021.peach-unlock-footer {1022  margin-top: 4px; display: flex; align-items: center; gap: 7px;1023  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1024  font-size: 0.625rem; color: var(--peach-t2);1025}1026.peach-unlock-footer--lock {1027  padding-top: 2px;1028}10291030/* Desktop helper (peach-sync) code pairing — additive hooks. The chirp pairing1031   classes (peach-chirp-*) carry the shared layout; these only style the parts1032   unique to the typed-code path. Inline styles cover the SAS/confirm gate. */1033.peach-desktop-pair { display: flex; flex-direction: column; }1034.peach-desktop-enter,1035.peach-desktop-searching,1036.peach-desktop-paired,1037.peach-desktop-error {1038  display: flex; flex-direction: column; gap: 8px;1039  padding: 4px 18px 16px; text-align: center; align-items: center;1040}1041.peach-desktop-enter .peach-label { align-self: flex-start; }1042.peach-code-input {1043  text-align: center; letter-spacing: 0.42em; padding-left: 0.42em;1044}1045.peach-code-input::placeholder { letter-spacing: 0.42em; }10461047/* Sync card "pair a device" options — bordered, raised tappable rows that read1048   as buttons on any card hue (theme-neutral light overlay, not the peach accent). */1049.peach-sync-pair-option {1050  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;1051  width: 100%; text-align: left; cursor: pointer; font-family: inherit;1052  padding: 11px 12px; border-radius: 10px;1053  background: color-mix(in srgb, var(--peach-t0) 6%, transparent);1054  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);1055  color: var(--peach-t0);1056  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;1057}1058.peach-sync-pair-option + .peach-sync-pair-option { margin-top: 8px; }1059.peach-sync-pair-option:hover {1060  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);1061  border-color: color-mix(in srgb, var(--peach-t0) 28%, transparent);1062}1063.peach-sync-pair-option:active { transform: translateY(1px); }1064.peach-sync-pair-option:disabled { opacity: 0.5; cursor: default; }1065.peach-sync-pair-option-icon { flex-shrink: 0; display: flex; align-items: center; color: var(--peach-t1); margin-top: 1px; }1066.peach-sync-pair-option-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }1067.peach-sync-pair-option-title { font-size: 0.8125rem; font-weight: 600; }1068.peach-sync-pair-option-sub { font-size: 0.6875rem; line-height: 1.45; color: var(--peach-t2); }1069.peach-sync-pair-option-chevron { flex-shrink: 0; color: var(--peach-t2); font-size: 1.05rem; line-height: 1.3; }10701071/* Breach badge */1072.peach-breach-badge {1073  display: flex;1074  position: relative;1075  z-index: 1;1076  align-items: center;1077  gap: 7px;1078  font-size: 0.5625rem;1079  color: var(--peach-breach);1080  padding: 5px 10px;1081  margin-bottom: 4px;1082  border-radius: 8px;1083  background: rgba(220, 80, 60, 0.07);1084  border: 1px solid rgba(220, 80, 60, 0.18);1085  letter-spacing: 0.04em;1086}10871088.peach-password-value.is-breached {1089  color: rgba(220, 80, 60, 0.75);1090  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1091}10921093/* ── Overlay views ─────────────────────────────────────────────────── */1094.peach-overlay-view {1095  position: absolute;1096  inset: 0;1097  display: flex;1098  flex-direction: column;1099  background:1100    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1101    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1102    var(--peach-bg);1103  z-index: 2;1104  overflow: hidden;1105  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1106}11071108.peach-overlay-view:has(.stk-shell) {1109  background: var(--peach-bg);1110}1111@keyframes overlay-in {1112  from { opacity: 0; transform: translateY(8px); }1113  to   { opacity: 1; transform: translateY(0); }1114}1115.peach-overlay-view.ov-enter-up {1116  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1117}1118.peach-overlay-view.ov-exit-up {1119  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1120}1121.peach-overlay-view.ov-enter-right {1122  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1123}1124.peach-overlay-view.ov-exit-right {1125  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1126}11271128@keyframes ov-enter-up {1129  from { opacity: 0; transform: translateY(18px); }1130  to   { opacity: 1; transform: translateY(0); }1131}1132@keyframes ov-exit-up {1133  from { opacity: 1; transform: translateY(0); }1134  to   { opacity: 0; transform: translateY(-12px); }1135}1136@keyframes ov-enter-right {1137  from { opacity: 0; transform: translateX(20px); }1138  to   { opacity: 1; transform: translateX(0); }1139}1140@keyframes ov-exit-right {1141  from { opacity: 1; transform: translateX(0); }1142  to   { opacity: 0; transform: translateX(20px); }1143}11441145/* Overlay shared header */1146.peach-overlay-header {1147  padding: 10px 12px 8px;1148  display: flex;1149  align-items: center;1150  gap: 10px;1151  flex-shrink: 0;1152}1153/* Back button — circular pill matching the settings stack masthead (.stk-back) */1154.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1155  width: 28px;1156  height: 28px;1157  flex: 0 0 28px;1158  border-radius: 999px;1159  border: 1px solid var(--peach-border);1160  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1161  color: var(--peach-t1);1162  padding: 0;1163}1164.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1165  color: var(--peach-t0);1166  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1167  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1168}1169.peach-overlay-title {1170  font-family: var(--font-display);1171  font-style: italic;1172  font-weight: 400;1173  font-size: 20px;1174  line-height: 1;1175  color: var(--peach-t0);1176  flex: 1;1177  text-align: center;1178}1179/* Balances the 28px back button so the title stays visually centred */1180.peach-overlay-spacer {1181  width: 28px;1182  flex: 0 0 28px;1183}11841185.peach-overlay-card {1186  background: var(--peach-s1);1187  border: 1px solid var(--peach-t3);1188  border-radius: 12px;1189  overflow: hidden;1190  width: 100%;1191}11921193.peach-onboarding-alt-actions {1194  display: flex;1195  flex-direction: column;1196  gap: 4px;1197  padding: 0;1198}11991200.peach-settings-copy {1201  margin: 0 0 10px;1202  font-size: 0.6875rem;1203  line-height: 1.5;1204  color: var(--peach-t2);1205}12061207.peach-settings-copy strong {1208  color: var(--peach-t0);1209}12101211.peach-settings-copy--spacious {1212  margin-bottom: 12px;1213}12141215.peach-settings-copy--result {1216  color: var(--peach-accent);1217  font-size: 0.8125rem;1218  text-align: center;1219  padding: 8px 0;1220}12211222.peach-settings-copy--danger {1223  color: var(--peach-breach);1224}12251226.peach-settings-copy--success {1227  color: var(--peach-accent);1228}12291230.peach-inline-feedback {1231  font-size: 0.6875rem;1232  margin: 10px 0 0;1233}12341235.peach-inline-feedback--ok {1236  color: var(--peach-accent);1237}12381239.peach-inline-feedback--error {1240  color: var(--peach-breach);1241}12421243.peach-inline-feedback--muted {1244  color: var(--peach-t2);1245  font-size: 0.625rem;1246  margin: 4px 0;1247}12481249.peach-inline-feedback--spaced {1250  margin-top: 12px;1251}12521253.peach-settings-actions--row {1254  display: flex;1255  gap: 6px;1256}12571258.peach-settings-actions--end {1259  margin-top: 14px;1260  justify-content: flex-end;1261}12621263.peach-settings-stack {1264  display: flex;1265  flex-direction: column;1266  gap: 6px;1267}12681269.peach-settings-stack--tight {1270  gap: 4px;1271}12721273.peach-settings-stack--spacious {1274  gap: 8px;1275}12761277.peach-settings-input {1278  width: 100%;1279  box-sizing: border-box;1280  padding: 8px 10px;1281  background: rgba(0, 0, 0, 0.22);1282  border: 1px solid transparent;1283  border-radius: 6px;1284  color: var(--peach-t0);1285  font-family: var(--font-ui);1286  font-size: 0.75rem;1287  outline: none;1288  transition: border-color 120ms ease, background 120ms ease;1289}12901291.peach-settings-input:focus {1292  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1293  background: rgba(0, 0, 0, 0.28);1294}12951296.peach-settings-input[type="password"] {1297  font-family: var(--font-mono);1298  letter-spacing: 0.04em;1299}13001301.peach-hidden-file-input {1302  display: none;1303}13041305.peach-checkbox-note {1306  display: flex;1307  align-items: flex-start;1308  gap: 8px;1309  font-size: 0.6875rem;1310  color: var(--peach-t1);1311  cursor: pointer;1312  margin: 12px 0;1313}13141315.peach-checkbox-note input {1316  margin-top: 1px;1317}13181319.peach-danger-notice {1320  background: rgba(220, 80, 60, 0.08);1321  border: 1px solid rgba(220, 80, 60, 0.2);1322  border-radius: 6px;1323  padding: 9px 11px;1324  font-size: 0.6875rem;1325  color: var(--peach-t1);1326  line-height: 1.5;1327}13281329.peach-info-notice {1330  font-size: 0.6875rem;1331  color: var(--peach-t1);1332  line-height: 1.5;1333  background: var(--surface-card);1334  border: 1px solid var(--peach-t3);1335  border-radius: 6px;1336  padding: 8px 10px;1337}13381339.peach-info-notice--warn {1340  border-color: rgba(220, 38, 38, 0.4);1341  background: rgba(220, 38, 38, 0.06);1342  color: rgba(220, 38, 38, 0.92);1343  margin-bottom: 8px;1344}13451346/* Warm helpful-context note — reads as a soft aside, not an alert. */1347.peach-info-notice--note {1348  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);1349  border-color: color-mix(in srgb, var(--peach-accent) 18%, transparent);1350  color: var(--peach-t2);1351}13521353.peach-strength-row {1354  display: flex;1355  align-items: center;1356  gap: 8px;1357  margin-bottom: 10px;1358}13591360.peach-strength-track {1361  flex: 1;1362  height: 4px;1363  background: var(--peach-s2);1364  border-radius: 2px;1365  overflow: hidden;1366}13671368.peach-strength-fill {1369  height: 100%;1370  border-radius: 2px;1371  transition: width 120ms ease, background 120ms ease;1372}13731374/* ── Type selector tabs ── */1375.peach-type-tabs {1376  display: flex;1377  gap: 0;1378  background: var(--peach-t4);1379  border-radius: 8px;1380  padding: 3px;1381}13821383.peach-type-tab {1384  flex: 1;1385  display: flex;1386  align-items: center;1387  justify-content: center;1388  gap: 6px;1389  padding: 6px 10px;1390  border-radius: 6px;1391  border: none;1392  background: transparent;1393  cursor: pointer;1394  font-family: Inter, system-ui, sans-serif;1395  font-size: 0.6875rem;1396  font-weight: 400;1397  letter-spacing: 0.04em;1398  color: var(--peach-t1);1399  transition: background 150ms ease, color 150ms ease;1400}14011402.peach-type-tab.is-active {1403  background: var(--peach-s2);1404  color: var(--peach-t0);1405  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1406}14071408.peach-type-tab:not(.is-active):hover {1409  color: var(--peach-t0);1410}14111412.peach-type-tab svg {1413  opacity: 0.7;1414  flex-shrink: 0;1415}14161417.peach-type-tab.is-active svg {1418  opacity: 1;1419}14201421/* ── List view ───────────────────────────────────────────────────────── */1422.peach-list-top {1423  padding: 0 10px;1424  min-height: 46px;1425  display: flex;1426  align-items: center;1427  gap: 6px;1428  border-bottom: 1px solid var(--peach-t3);1429  flex-shrink: 0;1430  background: var(--peach-s1);1431}14321433.peach-vault-list {1434  flex: 1;1435  overflow-y: auto;1436  scrollbar-width: none;1437}1438.peach-vault-list::-webkit-scrollbar { display: none; }14391440/* Scrollbar — vault list */1441.peach-vault-list {1442  scrollbar-width: thin;1443  scrollbar-color: var(--peach-t3) transparent;1444}14451446.peach-vault-list::-webkit-scrollbar {1447  width: 3px;1448}14491450.peach-vault-list::-webkit-scrollbar-thumb {1451  background: var(--peach-t3);1452  border-radius: 2px;1453}14541455.peach-entry-row {1456  width: 100%;1457  display: flex;1458  align-items: center;1459  gap: 10px;1460  padding: 9px 16px;1461  background: transparent;1462  border: none;1463  border-bottom: 1px solid var(--peach-t3);1464  cursor: pointer;1465  color: inherit;1466  text-align: left;1467  transition: background 80ms ease;1468}1469.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1470.peach-entry-row:last-child { border-bottom: none; }1471.peach-entry-row.is-active {1472  box-shadow: inset 2px 0 0 var(--peach-accent);1473  background: rgba(240,232,216,0.03);1474}1475.peach-entry-row:focus-visible {1476  outline: none;1477  box-shadow: 0 0 0 1px var(--peach-border-accent);1478  background: rgba(240,232,216,0.03);1479}1480.peach-entry-row-icon {1481  width: 26px; height: 26px;1482  border-radius: 7px;1483  border: 1px solid var(--peach-t3);1484  display: flex; align-items: center; justify-content: center;1485  color: var(--peach-t2);1486  flex-shrink: 0;1487}1488.peach-entry-row-icon.is-breach {1489  border-color: rgba(220,80,60,0.3);1490  color: rgba(220,80,60,0.7);1491}14921493/* Title-initials chip used as the favicon fallback for login entries whose1494 * real favicon hasn't been cached by the browser yet (freshly-imported,1495 * never-visited domains). Background colour is hashed from the title so1496 * the same entry always shows the same chip. The chip fits the same1497 * 26×26 row icon slot the favicon would take. */1498.peach-favicon-initials {1499  display: inline-flex;1500  align-items: center;1501  justify-content: center;1502  width: 100%;1503  height: 100%;1504  border-radius: 4px;1505  font-family: "IBM Plex Mono", monospace;1506  font-size: 0.5625rem;1507  font-weight: 600;1508  letter-spacing: 0.04em;1509  color: rgba(240, 232, 216, 0.92);1510  text-transform: uppercase;1511  user-select: none;1512}1513.peach-entry-row-info { flex: 1; min-width: 0; }1514.peach-entry-row-name {1515  display: block;1516  font-family: var(--font-display);1517  font-size: 1.0625rem;1518  font-style: italic;1519  font-weight: 400;1520  color: var(--peach-t0);1521  line-height: 1.2;1522  white-space: nowrap;1523  overflow: hidden;1524  text-overflow: ellipsis;1525}1526.peach-entry-row-meta {1527  display: block;1528  font-family: "IBM Plex Mono", monospace;1529  font-size: 0.5625rem;1530  color: var(--peach-t2);1531  margin-top: 1px;1532  letter-spacing: 0.05em;1533}1534.peach-entry-row-dot {1535  width: 5px; height: 5px;1536  border-radius: 50%;1537  background: rgba(220,80,60,0.7);1538  flex-shrink: 0;1539}1540.peach-new-entry-row {1541  display: flex;1542  align-items: center;1543  justify-content: center;1544  gap: 6px;1545  width: 100%;1546  padding: 11px;1547  background: transparent;1548  border: none;1549  border-top: 1px solid var(--peach-t3);1550  color: var(--peach-t2);1551  font-family: "IBM Plex Mono", monospace;1552  font-size: 0.5625rem;1553  text-transform: uppercase;1554  letter-spacing: 0.14em;1555  cursor: pointer;1556  flex-shrink: 0;1557  transition: color 120ms ease, background 120ms ease;1558}1559.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }15601561/* ── Multi-select mode ─────────────────────────────────────────────── */15621563/* Select-mode trigger button in sort bar — same shape as trash btn */1564.peach-sort-select-btn {1565  display: flex;1566  align-items: center;1567  justify-content: center;1568  padding: 3px 5px;1569  background: transparent;1570  border: none;1571  cursor: pointer;1572  color: var(--peach-t2);1573  border-radius: 4px;1574  transition: color 140ms ease, background 140ms ease;1575}1576.peach-sort-select-btn:hover {1577  color: var(--peach-t1);1578  background: var(--peach-t3);1579}15801581/* Sort bar in select mode */1582.peach-select-cancel-btn {1583  background: transparent;1584  border: none;1585  padding: 0 4px;1586  cursor: pointer;1587  font-family: "IBM Plex Mono", monospace;1588  font-size: 0.5625rem;1589  letter-spacing: 0.12em;1590  text-transform: uppercase;1591  color: var(--peach-t2);1592  transition: color 140ms ease;1593  flex-shrink: 0;1594}1595.peach-select-cancel-btn:hover { color: var(--peach-t0); }15961597.peach-select-count-label {1598  flex: 1;1599  text-align: center;1600  font-family: "IBM Plex Mono", monospace;1601  font-size: 0.5625rem;1602  letter-spacing: 0.14em;1603  text-transform: uppercase;1604  color: var(--peach-t1);1605}16061607.peach-select-all-btn {1608  background: transparent;1609  border: none;1610  padding: 0 4px;1611  cursor: pointer;1612  font-family: "IBM Plex Mono", monospace;1613  font-size: 0.5625rem;1614  letter-spacing: 0.12em;1615  text-transform: uppercase;1616  color: var(--peach-t2);1617  transition: color 140ms ease;1618  flex-shrink: 0;1619}1620.peach-select-all-btn:hover { color: var(--peach-accent); }16211622/* List in select mode */1623.peach-vault-list.is-selecting .peach-entry-row {1624  cursor: default;1625}1626.peach-vault-list.is-selecting .peach-entry-row:hover {1627  background: rgba(240,232,216,0.02);1628}1629.peach-vault-list.is-selecting .peach-entry-row.is-selected {1630  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1631}1632.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1633  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1634}16351636/* Select indicator circles in icon slot */1637.peach-entry-row-icon.is-select-icon {1638  color: var(--peach-t2);1639}1640.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1641  color: var(--peach-accent);1642}16431644/* Delete action bar at bottom (replaces new-entry row) */1645.peach-select-action-bar {1646  display: flex;1647  align-items: center;1648  justify-content: center;1649  gap: 7px;1650  width: 100%;1651  padding: 11px;1652  background: transparent;1653  border: none;1654  border-top: 1px solid var(--peach-t3);1655  color: var(--peach-t1);1656  font-family: "IBM Plex Mono", monospace;1657  font-size: 0.5625rem;1658  text-transform: uppercase;1659  letter-spacing: 0.14em;1660  cursor: pointer;1661  flex-shrink: 0;1662  transition: color 120ms ease, background 120ms ease;1663}1664.peach-select-action-bar:not(:disabled):hover {1665  color: var(--peach-t0);1666  background: rgba(220,80,60,0.06);1667}1668.peach-select-action-bar:not(:disabled):hover svg {1669  stroke: rgba(220,80,60,0.8);1670}1671.peach-select-action-bar:disabled,1672.peach-select-action-bar.is-empty {1673  color: var(--peach-t2);1674  cursor: default;1675  opacity: 0.5;1676}1677.peach-search-counter-list {1678  white-space: nowrap;1679  flex-shrink: 0;1680}1681.peach-list-empty {1682  min-height: 180px;1683  display: grid;1684  place-items: center;1685  color: var(--peach-t2);1686  font-family: "IBM Plex Mono", monospace;1687  font-size: 0.6875rem;1688}16891690/* ── Settings view ───────────────────────────────────────────────────── */1691.peach-settings-body {1692  flex: 1;1693  overflow-y: auto;1694  min-height: 0;1695  display: flex;1696  flex-direction: column;1697  padding: 2px 0 10px;1698}1699.peach-settings-group {1700  margin: 4px 10px;1701  padding: 9px 14px 11px;1702  border-radius: 12px;1703  border: 1px solid rgba(255, 255, 255, 0.07);1704  background: rgba(26, 20, 16, 0.60);1705  backdrop-filter: blur(10px) saturate(1.3);1706  -webkit-backdrop-filter: blur(10px) saturate(1.3);1707}17081709.peach-settings-group + .peach-settings-group {1710  margin-top: 6px;1711}17121713@supports not (backdrop-filter: blur(1px)) {1714  .peach-settings-group {1715    background: rgba(26, 20, 16, 0.90);1716    border-color: rgba(255, 255, 255, 0.09);1717    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1718  }1719}17201721.light .peach-settings-group,1722[data-theme="light"] .peach-settings-group {1723  background: rgba(245, 237, 226, 0.70);1724  border-color: rgba(26, 18, 8, 0.08);1725  backdrop-filter: blur(10px) saturate(1.2);1726  -webkit-backdrop-filter: blur(10px) saturate(1.2);1727}17281729@supports not (backdrop-filter: blur(1px)) {1730  .light .peach-settings-group,1731  [data-theme="light"] .peach-settings-group {1732    background: rgba(245, 237, 226, 0.97);1733    border-color: rgba(26, 18, 8, 0.10);1734  }1735}1736.peach-export-intro {1737  padding-bottom: 8px;1738}1739.peach-export-card {1740  display: grid;1741  gap: 10px;1742}1743.peach-rune-canvas {1744  border-radius: 8px;1745  background: rgba(0, 0, 0, 0.22);1746  flex: 1;1747  align-self: center;1748}1749.peach-script-input {1750  font-family: "PeachScript", monospace;1751  font-size: 0.6875rem;1752  line-height: 1.9;1753  letter-spacing: 0.06em;1754  color: var(--peach-t0);1755  background: rgba(0, 0, 0, 0.22);1756  border: none;1757  border-radius: 6px;1758  padding: 12px;1759  width: 100%;1760  min-height: 96px;1761  resize: vertical;1762  word-break: break-all;1763  scrollbar-width: none;1764  -ms-overflow-style: none;1765}17661767.peach-script-input::-webkit-scrollbar { display: none; }1768.peach-csv-warning {1769  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1770  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1771  color: var(--peach-t0);1772  border-radius: 6px;1773  padding: 10px 12px;1774  margin-bottom: 8px;1775  font-size: 0.75rem;1776  line-height: 1.45;1777}1778.peach-export-card--primary {1779  background:1780    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1781}17821783/* Export menu — distribute the three format cards across the popup. */1784.peach-export-menu {1785  display: flex;1786  flex-direction: column;1787  flex: 1;1788  min-height: 0;1789}1790.peach-export-menu .peach-settings-group {1791  flex: 1;1792  display: flex;1793  flex-direction: column;1794  justify-content: center;1795  gap: 10px;1796}17971798/* Result view — the script-string fills the remaining vertical surface. */1799.peach-export-result-group {1800  flex: 1;1801  display: flex;1802  flex-direction: column;1803  min-height: 0;1804  border-bottom: none;1805}1806.peach-export-result-group .peach-export-card {1807  flex: 1;1808  min-height: 0;1809  display: flex;1810  flex-direction: column;1811  gap: 10px;1812}1813.peach-export-result-group .peach-export-card-copy {1814  flex-shrink: 0;1815}1816.peach-export-result-group .peach-settings-label {1817  flex-shrink: 0;1818}1819.peach-export-result-group button {1820  flex-shrink: 0;1821}1822.peach-export-card-head {1823  display: flex;1824  align-items: center;1825  justify-content: space-between;1826  gap: 10px;1827}1828.peach-export-card-copy {1829  margin: 0;1830  font-size: 0.75rem;1831  line-height: 1.55;1832  color: var(--peach-t1);1833}1834.peach-export-note {1835  margin: 0;1836  font-size: 0.625rem;1837  line-height: 1.5;1838  color: var(--peach-t2);1839}1840.peach-export-strength-track {1841  height: 3px;1842  background: var(--peach-border);1843  border-radius: 2px;1844  margin: 4px 0 2px;1845  overflow: hidden;1846}1847.peach-export-strength-fill {1848  height: 100%;1849  border-radius: 2px;1850  transition: width 250ms ease, background 250ms ease;1851}1852.peach-export-strength-warn {1853  margin: 0;1854  font-size: 0.625rem;1855  line-height: 1.5;1856  color: #e84040;1857  font-family: "IBM Plex Mono", monospace;1858}1859.peach-export-strength-hint {1860  margin: 0;1861  font-size: 0.625rem;1862  line-height: 1.5;1863  color: var(--peach-t2);1864  font-family: "IBM Plex Mono", monospace;1865}1866.peach-export-pill {1867  display: inline-flex;1868  align-items: center;1869  padding: 4px 8px;1870  border-radius: 999px;1871  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1872  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1873  color: var(--peach-accent);1874  font-family: "IBM Plex Mono", monospace;1875  font-size: 0.5rem;1876  letter-spacing: 0.12em;1877  text-transform: uppercase;1878  white-space: nowrap;1879}1880.peach-export-pill--danger {1881  border-color: rgba(220,80,60,0.22);1882  background: rgba(220,80,60,0.08);1883  color: var(--peach-breach);1884}1885.peach-settings-label {1886  margin: 0 0 6px;1887  font-family: "IBM Plex Mono", monospace;1888  font-size: 0.5rem;1889  text-transform: uppercase;1890  letter-spacing: 0.18em;1891  color: var(--peach-t2);1892}1893.peach-settings-row {1894  display: flex;1895  align-items: center;1896  justify-content: space-between;1897  gap: 12px;1898  min-height: 34px;1899  padding: 6px 0;1900  font-size: 0.8125rem;1901  color: var(--peach-t1);1902}1903.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1904.peach-settings-value {1905  font-family: "IBM Plex Mono", monospace;1906  font-size: 0.625rem;1907  color: var(--peach-t2);1908}19091910.peach-settings-value--status {1911  display: flex;1912  align-items: center;1913  gap: 6px;1914}19151916.peach-settings-link {1917  font-family: "IBM Plex Mono", monospace;1918  font-size: 0.625rem;1919  color: var(--peach-accent);1920  text-decoration: none;1921  cursor: pointer;1922}1923.peach-settings-link:hover {1924  text-decoration: underline;1925}19261927.peach-settings-row--stack {1928  flex-direction: column;1929  align-items: stretch;1930  gap: 6px;1931}19321933.peach-settings-row--top {1934  align-items: flex-start;1935}19361937.peach-settings-row-main {1938  display: flex;1939  flex-direction: column;1940  gap: 4px;1941  flex: 1;1942}1943.peach-toggle {1944  width: 28px; height: 16px;1945  border-radius: 999px;1946  background: var(--peach-t3);1947  border: 1px solid var(--peach-t3);1948  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1949  flex-shrink: 0;1950  transition: background 200ms ease, border-color 200ms ease;1951  cursor: pointer;1952}1953.peach-toggle.is-on {1954  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1955  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1956}1957.peach-toggle-knob {1958  width: 10px; height: 10px;1959  border-radius: 50%;1960  background: var(--peach-t2);1961  flex-shrink: 0;1962  transform: translateX(0px);1963  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1964}1965.peach-toggle.is-on .peach-toggle-knob {1966  background: var(--peach-accent);1967  transform: translateX(12px);1968}1969.peach-settings-footer {1970  display: flex;1971  align-items: center;1972  gap: 8px;1973  margin-top: auto;1974  padding: 14px 16px 8px;1975  font-family: "IBM Plex Mono", monospace;1976  font-size: 0.5625rem;1977  color: var(--peach-t2);1978}19791980/* ── Settings home navigation ──────────────────────────────────────────── */1981.peach-settings-nav-label {1982  margin: 0 0 2px;1983  padding: 12px 16px 4px;1984  font-family: "IBM Plex Mono", monospace;1985  font-size: 0.5rem;1986  text-transform: uppercase;1987  letter-spacing: 0.18em;1988  color: var(--peach-t2);1989}19901991.peach-settings-cat-row {1992  display: flex;1993  align-items: center;1994  gap: 10px;1995  width: 100%;1996  padding: 9px 16px;1997  background: none;1998  border: none;1999  border-bottom: 1px solid var(--peach-t3);2000  cursor: pointer;2001  text-align: left;2002  color: inherit;2003  transition: background var(--peach-dur-80) ease;2004}2005.peach-settings-cat-row:hover {2006  background: var(--peach-t3);2007}2008.peach-settings-cat-row:last-child {2009  border-bottom: none;2010}20112012.peach-settings-cat-icon {2013  width: 28px;2014  height: 28px;2015  border-radius: 7px;2016  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2017  color: var(--peach-accent);2018  display: flex;2019  align-items: center;2020  justify-content: center;2021  flex-shrink: 0;2022}2023/* Light theme: peach-on-cream is too low-contrast — both colors are warm.2024   Darken the icon stroke to ink and bump the bg tint so the icon reads2025   sharply while the cell still feels accent-tinted. */2026.light .peach-settings-cat-icon {2027  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);2028  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));2029}20302031.peach-settings-cat-content {2032  flex: 1;2033  display: flex;2034  flex-direction: column;2035  gap: 2px;2036  min-width: 0;2037}20382039.peach-settings-cat-name {2040  font-size: 0.8125rem;2041  font-weight: 450;2042  color: var(--peach-t0);2043  line-height: 1.2;2044}20452046.peach-settings-cat-desc {2047  font-size: 0.625rem;2048  color: var(--peach-t2);2049  line-height: 1.3;2050  white-space: nowrap;2051  overflow: hidden;2052  text-overflow: ellipsis;2053}20542055.peach-settings-cat-chevron {2056  color: var(--peach-t2);2057  flex-shrink: 0;2058  opacity: 0.5;2059}20602061/* ── Settings sub-view section labels ──────────────────────────────────── */2062.peach-settings-sub-label {2063  margin: 12px 0 4px;2064  font-family: "IBM Plex Mono", monospace;2065  font-size: 0.5rem;2066  text-transform: uppercase;2067  letter-spacing: 0.18em;2068  color: var(--peach-t2);2069}2070.peach-settings-sub-label:first-child {2071  margin-top: 4px;2072}20732074/* ── Settings: collapsible Advanced section ─────────────────────────────── */2075.peach-settings-advanced-toggle {2076  display: flex;2077  align-items: center;2078  justify-content: space-between;2079  width: 100%;2080  background: none;2081  border: none;2082  cursor: pointer;2083  padding: 12px 0 4px;2084  margin: 0;2085  color: inherit;2086}2087.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {2088  color: var(--peach-t1);2089}2090.peach-settings-advanced-chevron {2091  font-size: 0.5625rem;2092  color: var(--peach-t3);2093  letter-spacing: 0;2094  transition: color 120ms ease;2095}20962097/* ── Feedback form ──────────────────────────────────────────────────────── */2098.peach-feedback-group {2099  flex: 1;2100  display: flex;2101  flex-direction: column;2102  border-bottom: none;2103}21042105.peach-feedback-intro {2106  margin: 4px 0 14px;2107  font-size: 0.75rem;2108  line-height: 1.55;2109  color: var(--peach-t1);2110}21112112.peach-feedback-chips {2113  display: flex;2114  flex-wrap: wrap;2115  gap: 6px;2116  margin-bottom: 14px;2117}21182119.peach-feedback-chip {2120  padding: 4px 10px;2121  border-radius: 999px;2122  border: 1px solid var(--peach-t3);2123  background: none;2124  color: var(--peach-t2);2125  font-size: 0.6875rem;2126  font-family: var(--font-ui);2127  cursor: pointer;2128  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2129    background var(--peach-dur-80) ease;2130}2131.peach-feedback-chip:hover {2132  border-color: var(--peach-t2);2133  color: var(--peach-t1);2134}2135.peach-feedback-chip.is-active {2136  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);2137  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));2138  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);2139  box-shadow:2140    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),2141    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);2142  font-weight: 700;2143}21442145.peach-feedback-textarea {2146  flex: 1;2147  width: 100%;2148  min-height: 120px;2149  box-sizing: border-box;2150  background: rgba(0, 0, 0, 0.22);2151  border: 1px solid transparent;2152  border-radius: 6px;2153  color: var(--peach-t0);2154  font-size: 0.75rem;2155  font-family: var(--font-ui);2156  line-height: 1.5;2157  padding: 8px 10px;2158  resize: none;2159  outline: none;2160  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2161}2162.peach-feedback-textarea:focus {2163  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2164  background: rgba(0, 0, 0, 0.28);2165}2166.peach-feedback-textarea:focus {2167  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2168}2169.peach-feedback-textarea::placeholder {2170  color: var(--peach-t2);2171}21722173.peach-feedback-meta {2174  margin: 6px 0 0;2175  font-size: 0.625rem;2176  color: var(--peach-t2);2177  font-family: "IBM Plex Mono", monospace;2178}21792180.peach-feedback-result {2181  margin: 8px 0 0;2182  font-size: 0.6875rem;2183  font-family: "IBM Plex Mono", monospace;2184}2185.peach-feedback-result--ok { color: var(--peach-sync-ok); }2186.peach-feedback-result--err { color: var(--peach-breach); }21872188.peach-feedback-submit {2189  width: 100%;2190  margin-top: 12px;2191  justify-content: center;2192}21932194.peach-feedback-anon {2195  margin: 8px 0 0;2196  font-size: 0.625rem;2197  color: var(--peach-t2);2198  text-align: center;2199}22002201.peach-feedback-thanks {2202  margin: auto 0;2203  padding: 18px 14px;2204  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);2205  border-radius: 8px;2206  background:2207    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),2208    rgba(0, 0, 0, 0.18);2209  color: var(--peach-t1);2210  text-align: center;2211}22122213.peach-feedback-thanks p {2214  margin: 0;2215  font-size: 0.75rem;2216  line-height: 1.5;2217}22182219.peach-feedback-thanks-title {2220  color: var(--peach-t0);2221  font-family: "Cormorant Garamond", serif;2222  font-size: 1.375rem !important;2223  line-height: 1.1 !important;2224  margin-bottom: 8px !important;2225}22262227.peach-passkey-badge {2228  margin-left: 8px;2229  font-size: 0.625rem;2230  letter-spacing: 0.06em;2231  text-transform: uppercase;2232  color: var(--peach-t2);2233  font-family: var(--font-ui);2234  vertical-align: middle;2235}22362237.peach-passkey-delete-btn {2238  color: var(--peach-breach);2239  border-color: rgba(229, 85, 85, 0.25);2240}22412242.peach-passkey-delete-confirm {2243  display: flex;2244  align-items: center;2245  gap: 8px;2246  padding: 8px 10px;2247  background: rgba(229, 85, 85, 0.06);2248  border: 1px solid rgba(229, 85, 85, 0.2);2249  border-radius: 6px;2250}22512252.peach-passkey-delete-confirm-copy {2253  flex: 1;2254  font-size: 0.6875rem;2255  color: var(--peach-t1);2256}22572258.peach-passkey-delete-btn--confirm {2259  color: var(--peach-breach);2260  border-color: rgba(229, 85, 85, 0.4);2261}22622263.peach-passkey-activity {2264  flex-direction: column;2265  align-items: flex-start;2266  gap: 4px;2267}22682269.peach-passkey-meta {2270  font-size: 0.6875rem;2271  color: var(--peach-t2);2272}22732274.peach-passkey-actions {2275  position: relative;2276  z-index: 1;2277  margin-top: 14px;2278  display: flex;2279  flex-direction: column;2280  gap: 8px;2281}22822283.peach-passkey-approval {2284  display: flex;2285  flex-direction: column;2286  align-items: center;2287  padding: 16px 20px 14px;2288  gap: 8px;2289  text-align: center;2290}22912292.peach-passkey-approval-icon {2293  width: 36px;2294  height: 36px;2295  border-radius: 10px;2296  background: var(--peach-s2);2297  border: 1px solid var(--peach-t3);2298  display: flex;2299  align-items: center;2300  justify-content: center;2301  flex-shrink: 0;2302  color: var(--peach-accent);2303}23042305.peach-passkey-approval-icon img,2306.peach-passkey-approval-icon svg {2307  width: 22px;2308  height: 22px;2309  border-radius: 5px;2310}23112312.peach-passkey-approval-rp {2313  font-family: var(--font-ui);2314  font-size: 0.75rem;2315  color: var(--peach-t2);2316  letter-spacing: 0.03em;2317}23182319.peach-passkey-approval-action {2320  font-family: var(--font-display);2321  font-style: italic;2322  font-weight: 300;2323  font-size: 18px;2324  color: var(--peach-t0);2325  line-height: 1.1;2326  margin: 1px 0;2327}23282329.peach-passkey-approval-user {2330  font-family: var(--font-mono);2331  font-size: 0.6875rem;2332  color: var(--peach-t1);2333  background: var(--peach-s2);2334  border: 1px solid var(--peach-t3);2335  border-radius: 4px;2336  padding: 3px 8px;2337}23382339.peach-passkey-approval-notice {2340  font-size: 0.625rem;2341  color: var(--peach-t2);2342  line-height: 1.5;2343  max-width: 220px;2344}23452346.peach-passkey-approval-actions {2347  display: flex;2348  gap: 8px;2349  width: 100%;2350  margin-top: 6px;2351}23522353.peach-passkey-approval-actions .peach-btn {2354  flex: 1;2355}23562357/* ── Inline generator drawer ── */2358.peach-generator-drawer {2359  display: grid;2360  grid-template-rows: 0fr;2361  transition: grid-template-rows 320ms var(--peach-curve-arrival);2362  overflow: hidden;2363}2364.peach-generator-drawer.is-open {2365  grid-template-rows: 1fr;2366}2367.peach-generator-drawer-inner {2368  min-height: 0;2369  overflow: hidden;2370}2371.peach-generator-drawer-content {2372  border-top: 1px solid var(--peach-t3);2373  padding: 8px 0 4px;2374  display: flex;2375  flex-direction: column;2376  gap: 8px;2377}23782379/* ── Compact generator (inside entry edit) ── */2380.peach-generator-drawer-content--compact {2381  border-top: 1px solid var(--peach-t3);2382  padding: 8px 0 2px;2383  gap: 7px;2384}2385.peach-pwgen-compact-display-row {2386  display: flex;2387  align-items: center;2388  gap: 6px;2389}2390.peach-pwgen-compact-output {2391  flex: 1;2392  min-width: 0;2393  font-family: "IBM Plex Mono", monospace;2394  font-size: 0.6875rem;2395  font-weight: 400;2396  letter-spacing: 0.04em;2397  color: var(--peach-t0);2398  background: rgba(240, 232, 216, 0.04);2399  border: 1px solid var(--peach-t3);2400  border-radius: 5px;2401  padding: 5px 8px;2402  line-height: 1.5;2403  outline: none;2404  transition: border-color 120ms ease;2405}24062407.peach-pwgen-compact-output:focus {2408  border-color: var(--peach-t1);2409}2410.peach-pwgen-compact-controls {2411  display: flex;2412  align-items: center;2413  gap: 6px;2414}2415.peach-pwgen-compact-slider {2416  flex: 1;2417  min-width: 0;2418  height: 2px !important;2419}2420.peach-pwgen-compact-controls .peach-pwgen-len-num {2421  flex-shrink: 0;2422  min-width: 18px;2423  text-align: right;2424}2425.peach-pwgen-compact-pills {2426  display: flex;2427  gap: 3px;2428  flex-shrink: 0;2429}2430.peach-pwgen-compact-pills .peach-pwgen-pill {2431  padding: 2px 7px;2432  font-size: 0.5rem;2433}2434.peach-pwgen-compact-use {2435  flex-shrink: 0;2436  font-size: 0.625rem !important;2437  padding: 3px 9px !important;2438  min-height: 22px !important;2439  border-radius: 5px !important;2440}24412442/* ── Password edit row (input + eye toggle side-by-side) ── */2443.peach-password-edit-row {2444  display: flex;2445  align-items: center;2446  gap: 6px;2447}2448.peach-password-edit-row .peach-inline-input {2449  flex: 1;2450  min-width: 0;2451}24522453/* ── Generate toggle link ── */2454.peach-generate-toggle-link {2455  display: inline-flex;2456  align-items: center;2457  gap: 5px;2458  background: none;2459  border: none;2460  padding: 0;2461  cursor: pointer;2462  font-family: "IBM Plex Mono", monospace;2463  font-size: 0.625rem;2464  color: var(--peach-t2);2465  letter-spacing: 0.04em;2466  transition: color 120ms ease;2467  align-self: flex-start;2468}2469.peach-generate-toggle-link:hover {2470  color: var(--peach-accent);2471}24722473/* Holds the generate + history toggle links on one row under the editor. */2474.peach-password-edit-links {2475  display: flex;2476  align-items: center;2477  gap: 14px;2478  flex-wrap: wrap;2479}24802481/* ── Past-password history list ── */2482.peach-password-history {2483  display: grid;2484  gap: 4px;2485  margin-top: 2px;2486  max-height: 168px;2487  overflow-y: auto;2488  scrollbar-width: thin;2489}2490.peach-history-row {2491  display: flex;2492  align-items: center;2493  justify-content: space-between;2494  gap: 8px;2495  padding: 5px 7px;2496  border-radius: 7px;2497  background: color-mix(in srgb, var(--peach-accent) 5%, transparent);2498  border: 1px solid color-mix(in srgb, var(--peach-accent) 9%, transparent);2499}2500.peach-history-main {2501  display: flex;2502  flex-direction: column;2503  gap: 1px;2504  min-width: 0;2505  flex: 1;2506}2507.peach-history-pw {2508  font-family: "IBM Plex Mono", monospace;2509  font-size: 0.6875rem;2510  color: var(--peach-t1);2511  white-space: nowrap;2512  overflow: hidden;2513  text-overflow: ellipsis;2514}2515.peach-history-pw .peach-password-mask {2516  letter-spacing: 0.08em;2517  color: var(--peach-t2);2518}2519.peach-history-age {2520  font-family: "IBM Plex Mono", monospace;2521  font-size: 0.5625rem;2522  color: var(--peach-t3, var(--peach-t2));2523  letter-spacing: 0.03em;2524}2525.peach-history-actions {2526  display: flex;2527  align-items: center;2528  gap: 2px;2529  flex-shrink: 0;2530}2531.peach-history-use {2532  font-family: "IBM Plex Mono", monospace;2533  font-size: 0.5625rem;2534  letter-spacing: 0.05em;2535  padding: 3px 7px;2536}2537.peach-history-empty {2538  font-family: "IBM Plex Mono", monospace;2539  font-size: 0.625rem;2540  line-height: 1.45;2541  color: var(--peach-t2);2542  padding: 6px 8px;2543  border-radius: 7px;2544  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);2545  border: 1px solid color-mix(in srgb, var(--peach-accent) 8%, transparent);2546}25472548/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2549.peach-entry-body {2550  flex: 1;2551  overflow-y: auto;2552  overflow-x: hidden;2553  scrollbar-width: none;2554  -ms-overflow-style: none;2555  overscroll-behavior: contain;2556  display: grid;2557  gap: 10px;2558  align-content: start;2559  padding: 10px 20px 14px;2560  min-width: 0;2561  min-height: 0;2562}2563.peach-entry-body::-webkit-scrollbar { display: none; }25642565/* Type-toggle pills + inline note toolbar */2566.peach-new-type-row {2567  display: flex;2568  align-items: center;2569  gap: 6px;2570  margin-bottom: 2px;2571}2572.peach-new-type-btn {2573  background: transparent;2574  border: 1px solid var(--peach-t3);2575  border-radius: 12px;2576  padding: 3px 10px;2577  font-family: "IBM Plex Mono", monospace;2578  font-size: 0.5625rem;2579  letter-spacing: 0.12em;2580  text-transform: uppercase;2581  color: var(--peach-t2);2582  cursor: pointer;2583  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2584}2585.peach-new-type-btn.is-active {2586  color: var(--peach-t0);2587  border-color: var(--peach-accent);2588  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2589}2590.peach-new-type-btn:not(.is-active):hover {2591  color: var(--peach-t1);2592  border-color: var(--peach-t2);2593}25942595/* Editable title */2596.peach-new-title-wrap { margin: 0 0 2px; }2597.peach-new-title-input {2598  background: transparent;2599  border: none;2600  outline: none;2601  width: 100%;2602  color: var(--peach-t0);2603  font-family: var(--font-display);2604  font-style: italic;2605  font-weight: 400;2606  font-size: 40px;2607  line-height: 0.95;2608  caret-color: var(--peach-accent);2609}2610.peach-new-title-input::placeholder { color: var(--peach-t2); }26112612/* Editable domain field */2613.peach-domain-edit-row {2614  display: flex;2615  align-items: center;2616  gap: 6px;2617}26182619.peach-domain-edit-row .peach-domain-value--edit {2620  flex: 1;2621  width: 0;2622}26232624.peach-domain-url-btn {2625  flex-shrink: 0;2626  background: transparent;2627  border: none;2628  cursor: pointer;2629  color: var(--peach-t3);2630  padding: 2px 3px;2631  display: flex;2632  align-items: center;2633  line-height: 0;2634  border-radius: 3px;2635  transition: color 120ms ease;2636}26372638.peach-domain-url-btn:hover {2639  color: var(--peach-accent);2640}26412642.peach-domain-value--edit {2643  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2644  font-size: 0.625rem;2645  font-style: italic;2646  letter-spacing: 0.12em;2647  color: var(--peach-t1);2648  background: transparent;2649  border: none;2650  border-bottom: 1px solid var(--peach-t3);2651  outline: none;2652  width: 100%;2653  padding: 2px 0;2654  caret-color: var(--peach-accent);2655  transition: border-color 140ms ease, color 140ms ease;2656}2657.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2658.peach-domain-value--edit:focus {2659  border-bottom-color: rgba(240, 232, 216, 0.28);2660  color: var(--peach-t0);2661}26622663/* Editable field values (username, password, totp) */2664.peach-field-value--edit {2665  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2666  font-size: 0.8125rem;2667  color: var(--peach-t0);2668  background: transparent;2669  border: none;2670  border-bottom: 1px solid var(--peach-t3);2671  outline: none;2672  flex: 1;2673  min-width: 0;2674  padding: 3px 0;2675  caret-color: var(--peach-accent);2676  transition: border-color 140ms ease, color 140ms ease;2677}2678.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2679.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2680.peach-field-value--edit:focus {2681  border-bottom-color: rgba(240, 232, 216, 0.28);2682  color: var(--peach-t0);2683}26842685/* "+ add optional field" links */2686.peach-entry-add-links {2687  display: flex;2688  gap: 12px;2689  flex-wrap: wrap;2690  margin-top: -2px;2691}2692.peach-add-field-link {2693  background: transparent;2694  border: none;2695  padding: 0;2696  cursor: pointer;2697  font-family: "IBM Plex Mono", monospace;2698  font-size: 0.5625rem;2699  letter-spacing: 0.1em;2700  text-transform: uppercase;2701  color: var(--peach-t2);2702  transition: color 140ms ease;2703}2704.peach-add-field-link:hover { color: var(--peach-accent); }27052706/* ── New entry form (legacy classes) ────────────────────────────────── */2707.peach-new-body {2708  flex: 1;2709  overflow-y: auto;2710  padding: 10px 20px 14px;2711}2712.peach-new-name-input {2713  background: transparent;2714  border: none;2715  outline: none;2716  width: 100%;2717  color: var(--peach-t0);2718  font-family: var(--font-display);2719  font-style: italic;2720  font-weight: 400;2721  font-size: 40px;2722  line-height: 0.95;2723  caret-color: var(--peach-accent);2724}2725.peach-new-name-input::placeholder { color: var(--peach-t2); }2726.peach-new-field-input {2727  background: transparent;2728  border: none;2729  outline: none;2730  flex: 1;2731  min-width: 0;2732  caret-color: var(--peach-accent);2733}2734.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }27352736/* ── Canary card ── */2737.peach-canary-card {2738  border: 1px solid rgba(217, 160, 48, 0.2);2739  background: rgba(217, 160, 48, 0.03);2740  border-radius: 8px;2741  padding: 12px;2742}27432744.peach-canary-settings-header {2745  display: flex;2746  align-items: center;2747  justify-content: space-between;2748  cursor: pointer;2749  user-select: none;2750}27512752.peach-canary-card .peach-label {2753  color: rgba(217, 160, 48, 0.85);2754}27552756.peach-canary-card .peach-new-field-input {2757  border-color: rgba(217, 160, 48, 0.25);2758}27592760.peach-canary-card .peach-new-field-input:focus {2761  border-color: rgba(217, 160, 48, 0.5);2762}27632764.peach-canary-body {2765  margin-top: 12px;2766  display: flex;2767  flex-direction: column;2768  gap: 10px;2769}27702771.peach-canary-explainer {2772  display: flex;2773  gap: 10px;2774  padding: 10px 12px;2775  border-radius: 10px;2776  background: rgba(217, 160, 48, 0.06);2777  border: 1px solid rgba(217, 160, 48, 0.22);2778  margin-bottom: 4px;2779}27802781.peach-canary-explainer-icon {2782  font-size: 1rem;2783  flex-shrink: 0;2784  line-height: 1.2;2785}27862787.peach-canary-explainer-title {2788  font-family: var(--font-ui);2789  font-size: 0.6875rem;2790  font-weight: 500;2791  color: rgba(217, 160, 48, 0.9);2792  margin: 0 0 3px;2793}27942795.peach-canary-explainer-copy {2796  font-family: var(--font-ui);2797  font-size: 0.625rem;2798  color: var(--peach-t2);2799  line-height: 1.55;2800  margin: 0;2801}28022803.peach-canary-hint {2804  font-size: 0.625rem;2805  color: var(--peach-t2);2806  font-family: Inter, system-ui, sans-serif;2807  line-height: 1.5;2808  margin-top: 4px;2809}28102811.peach-canary-actions-row {2812  display: flex;2813  align-items: center;2814  gap: 8px;2815}28162817.peach-canary-test-btn {2818  border-color: rgba(217, 160, 48, 0.3);2819  color: rgba(217, 160, 48, 0.85);2820}28212822.peach-canary-test-result {2823  font-size: 0.625rem;2824  font-family: Inter, system-ui, sans-serif;2825}28262827.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2828.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }28292830.peach-canary-badge {2831  display: flex;2832  position: relative;2833  z-index: 1;2834  align-items: center;2835  gap: 5px;2836  padding: 4px 10px;2837  background: rgba(217, 160, 48, 0.12);2838  border: 1px solid rgba(217, 160, 48, 0.35);2839  border-radius: 6px;2840  margin-bottom: 6px;2841  width: fit-content;2842}28432844.peach-canary-badge-label {2845  font-size: 0.625rem;2846  letter-spacing: 0.06em;2847  color: rgba(217, 160, 48, 0.9);2848  font-family: var(--font-ui);2849  text-transform: uppercase;2850}28512852.peach-canary-badge-icon {2853  font-size: 0.6875rem;2854}28552856.peach-canary-suppress-row {2857  display: flex;2858  align-items: center;2859  gap: 8px;2860  padding: 6px 10px;2861  background: rgba(217, 160, 48, 0.08);2862  border-radius: 6px;2863  margin-bottom: 8px;2864}28652866.peach-canary-suppress-label {2867  font-size: 0.6875rem;2868  color: rgba(217, 160, 48, 0.85);2869  cursor: pointer;2870  font-family: var(--font-ui);2871  letter-spacing: 0.04em;2872}28732874.peach-regen-panel {2875  position: relative;2876  z-index: 1;2877  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2878  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2879  border-radius: 8px;2880  padding: 12px;2881  margin-bottom: 8px;2882}28832884.peach-regen-panel-header {2885  display: flex;2886  align-items: center;2887  justify-content: space-between;2888  margin-bottom: 10px;2889}28902891.peach-regen-panel-title {2892  font-size: 0.6875rem;2893  font-weight: 600;2894  letter-spacing: 0.06em;2895  text-transform: uppercase;2896  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2897}28982899.peach-regen-output {2900  background: rgba(0, 0, 0, 0.2);2901  border-radius: 6px;2902  padding: 10px;2903  margin-bottom: 10px;2904  font-family: var(--font-mono);2905  font-size: 0.8125rem;2906  word-break: break-all;2907  color: var(--peach-t1);2908}29092910.peach-regen-actions {2911  display: flex;2912  gap: 6px;2913}29142915.peach-regen-actions--spaced {2916  margin-bottom: 8px;2917}29182919.peach-regen-action-grow {2920  flex: 1;2921}29222923.peach-regen-copy-btn {2924  padding: 0 8px;2925}29262927.peach-regen-success {2928  position: relative;2929  z-index: 1;2930  background: rgba(40, 180, 80, 0.1);2931  border: 1px solid rgba(40, 180, 80, 0.3);2932  border-radius: 8px;2933  padding: 10px 12px;2934  margin-bottom: 8px;2935  display: flex;2936  align-items: center;2937  gap: 8px;2938  font-size: 0.6875rem;2939  color: rgba(40, 180, 80, 0.9);2940}29412942/* ── Note editor overlay ── */2943.peach-note-editor {2944  position: absolute;2945  inset: 0;2946  z-index: 200;2947  display: flex;2948  flex-direction: column;2949  background:2950    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2951    var(--peach-bg);2952  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2953}29542955.peach-note-editor-header {2956  display: flex;2957  align-items: center;2958  gap: 10px;2959  padding: 14px 16px 10px;2960  border-bottom: 1px solid var(--peach-t3);2961  flex-shrink: 0;2962}29632964.peach-note-editor-back {2965  background: transparent;2966  border: none;2967  cursor: pointer;2968  color: var(--peach-t2);2969  padding: 4px 6px;2970  border-radius: 6px;2971  display: flex;2972  align-items: center;2973  transition: color 120ms ease, background 120ms ease;2974  flex-shrink: 0;2975}2976.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }29772978.peach-note-editor-label {2979  flex: 1;2980  font-family: var(--font-display);2981  font-style: italic;2982  font-size: 0.9375rem;2983  color: var(--peach-t1);2984  letter-spacing: 0.02em;2985}29862987.peach-note-editor-save-btn {2988  background: transparent;2989  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2990  border-radius: 8px;2991  color: var(--peach-accent);2992  font-family: "IBM Plex Mono", monospace;2993  font-size: 0.625rem;2994  letter-spacing: 0.06em;2995  text-transform: uppercase;2996  padding: 3px 10px;2997  cursor: pointer;2998  transition: background 120ms ease, border-color 120ms ease;2999}3000.peach-note-editor-save-btn:hover:not(:disabled) {3001  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3002  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3003}3004.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }30053006.peach-note-toolbar {3007  display: flex;3008  align-items: center;3009  gap: 3px;3010  padding: 6px 14px 5px;3011  border-bottom: 1px solid var(--peach-t3);3012  flex-shrink: 0;3013}30143015.peach-note-tool-btn {3016  background: transparent;3017  border: 1px solid transparent;3018  border-radius: 5px;3019  color: var(--peach-t2);3020  font-family: "IBM Plex Mono", monospace;3021  font-size: 0.625rem;3022  letter-spacing: 0.04em;3023  padding: 2px 8px;3024  cursor: pointer;3025  line-height: 1.6;3026  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;3027}3028.peach-note-tool-btn:hover {3029  background: var(--peach-t4);3030  color: var(--peach-t0);3031  border-color: var(--peach-t3);3032}30333034.peach-note-tool-icon {3035  padding: 3px 7px;3036  display: inline-flex;3037  align-items: center;3038  justify-content: center;3039}30403041.peach-note-tool-divider {3042  width: 1px;3043  height: 14px;3044  background: var(--peach-t3);3045  margin: 0 4px;3046  flex-shrink: 0;3047}30483049.peach-note-editor-body {3050  flex: 1;3051  overflow-y: auto;3052  padding: 16px 20px 20px;3053  outline: none;3054  font-family: var(--font-display);3055  font-size: 1rem;3056  line-height: 1.75;3057  color: var(--peach-t0);3058  scrollbar-width: none;3059  word-break: break-word;3060}3061.peach-note-editor-body:empty::before {3062  content: "write your note…";3063  color: var(--peach-t3);3064  font-style: italic;3065  pointer-events: none;3066}30673068/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */3069.peach-note-editor-inline {3070  display: flex;3071  flex-direction: column;3072  flex: 1;3073  min-height: 0;3074}3075.peach-note-editor-body--inline {3076  flex: 1;3077  min-height: 0;3078  font-size: 0.9375rem;3079  padding: 10px 20px 14px;3080}30813082/* Full-width toolbar row inside the body (Add.tsx note type).3083   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */3084.peach-note-toolbar-body {3085  display: flex;3086  align-items: center;3087  gap: 3px;3088  padding: 5px 20px 4px;3089  margin: 2px -20px 0;3090  border-bottom: 1px solid var(--peach-t3);3091  flex-shrink: 0;3092}30933094/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)3095   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn3096   and .peach-note-tool-divider button-level styles. */3097.peach-note-toolbar-inline {3098  display: flex;3099  align-items: center;3100  gap: 3px;3101  margin-left: auto;3102  padding-left: 10px;3103  border-left: 1px solid var(--peach-t3);3104  min-height: 22px;3105}31063107/* Entry.tsx toolbar row (no tabs, toolbar only) */3108.peach-entry-note-toolbar-row {3109  display: flex;3110  align-items: center;3111  margin: 4px 0 6px;3112  position: relative;3113  z-index: 1;3114}3115.peach-entry-note-toolbar-row .peach-note-toolbar-inline {3116  border-left: none;3117  padding-left: 0;3118  margin-left: 0;3119}31203121/* Note body — fills available vertical space in Add.tsx and Entry.tsx */3122.peach-note-body {3123  display: flex;3124  flex-direction: column;3125  flex: 1;3126  min-height: 0;3127  margin: 4px 0 0;3128}3129.peach-entry-body--new .peach-note-body {3130  margin: 8px -20px 0;3131}31323133/* Add.tsx body is a grid by default; swap to a flex column when a note is3134   active so the note body can stretch and pin the tags row to the bottom. */3135.peach-entry-body--new:has(.peach-note-body) {3136  display: flex;3137  flex-direction: column;3138}31393140/* Rich content element styles (editor + display) */3141.peach-note-editor-body h2,3142.peach-note-content h2 {3143  font-family: var(--font-display);3144  font-size: 20px;3145  font-weight: 600;3146  font-style: italic;3147  color: var(--peach-t0);3148  margin: 6px 0 2px;3149  line-height: 1.3;3150}3151.peach-note-editor-body ul,3152.peach-note-content ul {3153  padding-left: 18px;3154  margin: 3px 0;3155  list-style: disc;3156}3157.peach-note-editor-body ol,3158.peach-note-content ol {3159  padding-left: 18px;3160  margin: 3px 0;3161  list-style: decimal;3162}3163.peach-note-editor-body li,3164.peach-note-content li { margin: 2px 0; }3165.peach-note-editor-body hr,3166.peach-note-content hr {3167  border: none;3168  border-top: 1px solid var(--peach-t3);3169  margin: 10px 0;3170}31713172/* font size elements from execCommand */3173.peach-note-editor-body font[size="1"],3174.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }3175.peach-note-editor-body font[size="2"],3176.peach-note-content font[size="2"] { font-size: 0.8125rem; }3177.peach-note-editor-body font[size="3"],3178.peach-note-content font[size="3"] { font-size: 1rem; }3179.peach-note-editor-body font[size="4"],3180.peach-note-content font[size="4"] { font-size: 20px; }3181.peach-note-editor-body font[size="5"],3182.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }31833184/* bold / italic inside the editor and note display */3185.peach-note-editor-body b, .peach-note-editor-body strong,3186.peach-note-content b, .peach-note-content strong { font-weight: 700; }3187.peach-note-editor-body em, .peach-note-editor-body i,3188.peach-note-content em, .peach-note-content i { font-style: italic; }31893190/* note display — rendered HTML, no pre-wrap */3191.peach-note-content {3192  overflow: auto;3193  max-height: 340px;3194  word-break: break-word;3195}31963197/* ── Note textarea ── */3198.peach-note-textarea {3199  width: 100%;3200  min-height: 180px;3201  max-height: 280px;3202  resize: vertical;3203  background: var(--peach-t4);3204  border: 1px solid var(--peach-t3);3205  border-radius: 8px;3206  padding: 10px 12px;3207  font-family: "IBM Plex Mono", monospace;3208  font-size: 0.75rem;3209  line-height: 1.7;3210  color: var(--peach-t1);3211  outline: none;3212  transition: border-color 150ms ease;3213}32143215.peach-note-textarea:focus {3216  border-color: var(--peach-t2);3217}32183219.peach-note-char-count {3220  font-family: "IBM Plex Mono", monospace;3221  font-size: 0.5625rem;3222  color: var(--peach-t3);3223  text-align: right;3224  margin-top: 4px;3225  letter-spacing: 0.1em;3226}32273228/* ── Field input baseline ── */3229.peach-new-field-input {3230  width: 100%;3231  background: transparent;3232  border: none;3233  border-bottom: 1px solid var(--peach-t3);3234  padding: 4px 0;3235  color: var(--peach-t1);3236  font-family: "IBM Plex Mono", monospace;3237  font-size: 0.8125rem;3238  outline: none;3239  transition: border-color 150ms ease;3240}32413242.peach-new-field-input:focus {3243  border-bottom-color: var(--peach-t0);3244  color: var(--peach-t0);3245}32463247.peach-new-name-input {3248  width: 100%;3249  background: transparent;3250  border: none;3251  border-bottom: 1px solid var(--peach-t3);3252  padding: 6px 0;3253  font-family: var(--font-display);3254  font-style: italic;3255  font-size: 28px;3256  color: var(--peach-t0);3257  outline: none;3258  transition: border-color 150ms ease;3259}32603261.peach-new-name-input:focus {3262  border-bottom-color: var(--peach-t1);3263}32643265.peach-new-name-input::placeholder {3266  color: var(--peach-t2);3267  font-style: italic;3268}32693270.peach-new-field-input::placeholder {3271  color: var(--peach-t3);3272}32733274/* ── Demo entrance animation ── */3275#hd-shell {3276  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3277}3278@keyframes hd-shell-enter {3279  from { opacity: 0; transform: scale(0.96) translateY(16px); }3280  to   { opacity: 1; transform: scale(1) translateY(0); }3281}32823283/* ── Keyframes ── */3284@keyframes peach-char-enter {3285  from { opacity: 0; transform: translateY(0.22em); }3286  to   { opacity: 1; transform: translateY(0); }3287}3288@keyframes peach-content-enter {3289  from { opacity: 0.96; transform: translateY(4px); }3290  to   { opacity: 1; transform: translateY(0); }3291}3292@keyframes peach-content-exit {3293  from { opacity: 1; transform: translateY(0); }3294  to   { opacity: 0.92; transform: translateY(-3px); }3295}3296@keyframes peach-screen-enter {3297  from { opacity: 0; transform: translateY(14px); }3298  to   { opacity: 1; transform: translateY(0); }3299}3300@keyframes peach-shell-fade-in {3301  from { opacity: 0; }3302  to   { opacity: 1; }3303}3304@keyframes peach-veil-in {3305  from { opacity: 0; }3306  to   { opacity: 1; }3307}3308@keyframes peach-lock-settle {3309  0%   { transform: scale(0.9); }3310  65%  { transform: scale(1.08); }3311  100% { transform: scale(1); }3312}3313@keyframes peach-copy-confirm {3314  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3315  to   { color: var(--peach-accent); border-color: color-mix(in srgb, var(--peach-accent) 42%, transparent); background-color: color-mix(in srgb, var(--peach-accent) 9%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--peach-accent) 22%, transparent), inset 0 0 18px color-mix(in srgb, var(--peach-accent) 12%, transparent); }3316}3317@keyframes peach-copy-retreat {3318  from { color: var(--peach-accent); border-color: color-mix(in srgb, var(--peach-accent) 42%, transparent); background-color: color-mix(in srgb, var(--peach-accent) 9%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--peach-accent) 22%, transparent), inset 0 0 18px color-mix(in srgb, var(--peach-accent) 12%, transparent); }3319  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3320}3321@keyframes peach-copy-flood {3322  from { opacity: 0; transform: scaleX(0.15); }3323  to   { opacity: 1; transform: scaleX(1); }3324}3325@keyframes peach-copy-icon-settle {3326  from  { transform: scale(0.84); }3327  70%   { transform: scale(1.08); }3328  to    { transform: scale(1); }3329}3330@keyframes peach-copy-sheen-retreat {3331  from { opacity: 1; transform: scaleX(1); }3332  to   { opacity: 0; transform: scaleX(0.15); }3333}3334@keyframes peach-copy-drain {3335  from { width: 100%; }3336  to   { width: 0; }3337}3338@keyframes peach-shake {3339  0%, 100% { transform: translateX(0); }3340  20%      { transform: translateX(-6px); }3341  40%      { transform: translateX(6px); }3342  60%      { transform: translateX(-4px); }3343  80%      { transform: translateX(4px); }3344}33453346@keyframes pip-pulse {3347  0% { transform: scale(1); }3348  40% { transform: scale(2.2); }3349  100% { transform: scale(1); }3350}335133523353/* ── Password generator ── */3354.peach-pwgen-body {3355  flex: 1; overflow-y: auto;3356  display: flex; flex-direction: column;3357}3358.peach-policy-badge {3359  display: flex; align-items: center;3360  padding: 6px 20px 0;3361  font-size: 0.625rem; font-family: Inter, sans-serif;3362  color: var(--peach-t2); letter-spacing: 0.04em;3363}3364.peach-pwgen-display {3365  padding: 14px 20px 12px;3366  border-bottom: 1px solid var(--peach-t3);3367  display: flex; align-items: flex-start; gap: 10px;3368}3369.peach-pwgen-display-row {3370  display: flex;3371  align-items: flex-start;3372  gap: 8px;3373  padding-bottom: 8px;3374  border-bottom: 1px solid var(--peach-t3);3375}3376.peach-pwgen-output {3377  flex: 1; min-width: 0; margin: 0;3378  font-family: "IBM Plex Mono", monospace;3379  font-size: 0.8125rem; color: var(--peach-t0);3380  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3381  white-space: normal;3382  padding: 10px 12px;3383  background: var(--peach-t4);3384  border-radius: 6px;3385  min-height: 36px;3386}3387.peach-pwgen-output-display {3388  flex: 1;3389  min-width: 0;3390  margin: 0;3391  font-family: var(--font-display);3392  font-style: italic;3393  font-weight: 300;3394  font-size: 32px;3395  line-height: 1.05;3396  color: var(--peach-t0);3397  word-break: break-all;3398  overflow-wrap: break-word;3399  white-space: normal;3400  letter-spacing: 0.02em;3401}3402.peach-pwgen-display-actions {3403  display: flex;3404  flex-direction: column;3405  gap: 4px;3406  flex-shrink: 0;3407  margin-top: 2px;3408}3409.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3410.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3411.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3412.peach-pwgen-len-num {3413  font-family: "IBM Plex Mono", monospace;3414  font-size: 0.75rem; color: var(--peach-accent);3415}3416.peach-pwgen-len-num--edit {3417  cursor: text;3418  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3419}3420.peach-pwgen-len-input {3421  font-family: "IBM Plex Mono", monospace;3422  font-size: 0.75rem;3423  color: var(--peach-accent);3424  background: transparent;3425  border: none;3426  border-bottom: 1px solid var(--peach-accent);3427  outline: none;3428  width: 32px;3429  text-align: right;3430  padding: 0;3431}3432.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3433.peach-pwgen-toggles { display: flex; flex-direction: column; }3434.peach-pwgen-charset-pills {3435  display: flex;3436  gap: 6px;3437  flex-wrap: wrap;3438}3439.peach-pwgen-pill {3440  padding: 4px 11px;3441  border-radius: 999px;3442  border: 1px solid var(--peach-t3);3443  background: transparent;3444  color: var(--peach-t2);3445  font-family: "IBM Plex Mono", monospace;3446  font-size: 0.5625rem;3447  letter-spacing: 0.08em;3448  cursor: pointer;3449  transition: all 150ms ease;3450}3451.peach-pwgen-pill.is-on {3452  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3453  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3454  color: var(--peach-accent);3455}3456.peach-pwgen-pill:not(.is-on):hover {3457  color: var(--peach-t1);3458  border-color: var(--peach-t2);3459}3460.peach-pwgen-use-btn {3461  width: 100%;3462  min-height: 34px;3463  border-radius: 8px;3464  margin-top: 2px;3465}3466.peach-generator-constraint-note {3467  font-family: 'IBM Plex Mono', monospace;3468  font-size: 10px;3469  color: var(--peach-t3);3470  letter-spacing: 0.04em;3471  margin: 0;3472  transition: opacity 200ms ease;3473}3474.peach-pwgen-toggle-row {3475  display: flex; align-items: center; justify-content: space-between;3476  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3477}3478.peach-pwgen-toggle-row:last-child { border-bottom: none; }3479.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }34803481/* Peach popup should not expose native scrollbars on internal panels. */3482.peach-settings-body,3483.peach-new-body,3484.peach-pwgen-body,3485.lock-screen,3486.peach-import-preview {3487  scrollbar-width: none;3488  -ms-overflow-style: none;3489  overscroll-behavior: contain;3490}3491.peach-settings-body::-webkit-scrollbar,3492.peach-new-body::-webkit-scrollbar,3493.peach-pwgen-body::-webkit-scrollbar,3494.lock-screen::-webkit-scrollbar,3495.peach-import-preview::-webkit-scrollbar {3496  width: 0;3497  height: 0;3498  display: none;3499}35003501.lock-screen {3502  height: 100%;3503  min-height: 100%;3504  overflow-y: auto;3505  padding: 18px 18px 16px;3506  gap: 14px;3507  grid-template-rows: auto auto auto 1fr auto;3508  align-content: stretch;3509  position: relative;3510  isolation: isolate;3511}3512.peach-screen.lock-screen--vault-stage {3513  display: flex;3514  flex-direction: column;3515  justify-content: flex-start;3516  gap: 18px;3517  padding: 20px 18px 18px;3518  overflow: hidden;3519}3520.peach-screen.lock-screen--vault-stage .peach-lock-panel {3521  margin-top: 0;3522}3523.lock-screen--onboarding {3524  display: flex;3525  flex-direction: column;3526  gap: 12px;3527  justify-content: flex-start;3528}35293530.lock-screen::before {3531  content: "";3532  position: absolute;3533  inset: 12px 18px auto auto;3534  width: 160px;3535  height: 160px;3536  border-radius: 999px;3537  background:3538    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 42%, transparent 72%);3539  filter: blur(6px);3540  opacity: 0.7;3541  pointer-events: none;3542  z-index: 0;3543}35443545.peach-lock-rune-string {3546  flex: 1;3547  display: flex;3548  align-items: center;3549  justify-content: center;3550  gap: 6px;3551  font-family: PeachScript, monospace;3552  font-size: 0.8125rem;3553  letter-spacing: 0.05em;3554  pointer-events: none;3555  user-select: none;3556  position: relative;3557  z-index: 1;3558}35593560.peach-lock-rune-string span {3561  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3562  text-shadow:3563    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3564    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3565  transition: color 0.9s ease, text-shadow 0.9s ease;3566}35673568.peach-lock-rune-string span.is-glowing {3569  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3570  text-shadow:3571    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3572    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3573}35743575.lock-screen-header {3576  display: flex;3577  align-items: center;3578  justify-content: space-between;3579  position: relative;3580  z-index: 1;3581}35823583.lock-password-input.shake {3584  animation: peach-shake 300ms ease-in-out;3585}35863587.peach-hint-error {3588  color: rgba(220, 80, 60, 0.92);3589}35903591.peach-onboarding-headline {3592  margin: 0;3593  font-family: var(--font-display);3594  font-size: 35px;3595  line-height: 0.88;3596  font-style: italic;3597  font-weight: 400;3598  max-width: 252px;3599}36003601.peach-lock-copy {3602  display: grid;3603  gap: 8px;3604  position: relative;3605  z-index: 1;3606}36073608.peach-lock-copy--onboarding {3609  gap: 10px;3610}36113612.peach-lock-hero {3613  position: relative;3614  z-index: 1;3615  display: grid;3616  gap: 8px;3617  min-height: 0;3618  padding: 4px 2px 0;3619  border: none;3620  border-radius: 0;3621  background: transparent;3622  box-shadow: none;3623}3624.peach-lock-hero-art {3625  position: absolute;3626  right: -8px;3627  top: -6px;3628  width: 120px;3629  height: 120px;3630  display: flex;3631  align-items: center;3632  justify-content: center;3633  pointer-events: none;3634  opacity: 0.12;3635  filter: saturate(0.9);3636}3637.peach-lock-hero-mark {3638  width: 100%;3639  height: 100%;3640}3641/* Peach body stays brand-peach across every accent — we don't want a3642   green or blue peach when sage/sky is selected. Leaf + vein keep the3643   sage tint because a real peach has a sage leaf. In the new brand-kit3644   mark the leaf is path 1 and the vein stroke is path 2; the body and3645   back-lobe (paths 3 + 4) must stay untouched. */3646.peach-lock-hero-mark path:nth-child(1) {3647  fill: rgba(123, 144, 96, 0.88);3648}3649.peach-lock-hero-mark path:nth-child(2) {3650  stroke: rgba(94, 122, 66, 0.95);3651}3652.peach-lock-hero > *:not(.peach-lock-hero-art) {3653  position: relative;3654  z-index: 1;3655}36563657.peach-lock-eyebrow {3658  display: inline-flex;3659  align-items: center;3660  width: fit-content;3661  padding: 4px 9px;3662  border-radius: 999px;3663  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3664  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3665  color: var(--peach-t0);3666  font-family: "IBM Plex Mono", monospace;3667  font-size: 0.5rem;3668  letter-spacing: 0.18em;3669  text-transform: uppercase;3670}36713672.peach-lock-label-row {3673  display: flex;3674  align-items: center;3675  justify-content: space-between;3676  margin-bottom: 0;3677}36783679.peach-lock-reveal-btn {3680  display: inline-flex;3681  align-items: center;3682  gap: 4px;3683  background: none;3684  border: none;3685  cursor: pointer;3686  font-family: "IBM Plex Mono", monospace;3687  font-size: 0.5625rem;3688  letter-spacing: 0.06em;3689  color: var(--peach-t2);3690  padding: 2px 0;3691  transition: color 150ms ease;3692}36933694.peach-lock-reveal-btn:hover {3695  color: var(--peach-t1);3696}36973698.peach-lock-warning {3699  color: rgba(220, 80, 60, 0.85) !important;3700  line-height: 1.5;3701}37023703.peach-onboarding-cards {3704  display: grid;3705  gap: 8px;3706  position: relative;3707  z-index: 1;3708}37093710.peach-lock-panel {3711  position: relative;3712  z-index: 1;3713  display: grid;3714  gap: 9px;3715  padding: 14px 16px 15px;3716  border-radius: 18px;3717  border: 1px solid var(--peach-t3);3718  background:3719    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3720  box-shadow:3721    inset 0 1px 0 rgba(240, 232, 216, 0.04),3722    0 12px 28px rgba(0, 0, 0, 0.12);3723}37243725/* Glass surface — lock panel and settings groups */3726.peach-glass {3727  background: rgba(26, 20, 16, 0.65);3728  border: 1px solid rgba(255, 255, 255, 0.08);3729  border-radius: 12px;3730  backdrop-filter: blur(12px) saturate(1.4);3731  -webkit-backdrop-filter: blur(12px) saturate(1.4);3732}37333734@supports not (backdrop-filter: blur(1px)) {3735  .peach-glass {3736    background: rgba(26, 20, 16, 0.92);3737    border: 1px solid rgba(255, 255, 255, 0.10);3738    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3739  }3740}37413742.light .peach-glass,3743[data-theme="light"] .peach-glass {3744  background: rgba(240, 233, 223, 0.72);3745  border: 1px solid rgba(26, 18, 8, 0.08);3746  backdrop-filter: blur(12px) saturate(1.2);3747  -webkit-backdrop-filter: blur(12px) saturate(1.2);3748}37493750@supports not (backdrop-filter: blur(1px)) {3751  .light .peach-glass,3752  [data-theme="light"] .peach-glass {3753    background: rgba(240, 233, 223, 0.97);3754    border: 1px solid rgba(26, 18, 8, 0.10);3755  }3756}37573758/* Lock panel keeps its own border-radius over the generic glass token */3759.peach-lock-panel.peach-glass {3760  border-radius: 18px;3761  background: rgba(26, 20, 16, 0.65);3762  border: 1px solid rgba(255, 255, 255, 0.08);3763  box-shadow:3764    inset 0 1px 0 rgba(255, 255, 255, 0.05),3765    0 12px 28px rgba(0, 0, 0, 0.3);3766}37673768.light .peach-lock-panel.peach-glass,3769[data-theme="light"] .peach-lock-panel.peach-glass {3770  background: rgba(240, 233, 223, 0.82);3771  border: 1px solid rgba(26, 18, 8, 0.08);3772  box-shadow:3773    inset 0 1px 0 rgba(255, 255, 255, 0.4),3774    0 8px 24px rgba(80, 56, 32, 0.15);3775}37763777@supports not (backdrop-filter: blur(1px)) {3778  .peach-lock-panel.peach-glass {3779    background: rgba(26, 20, 16, 0.92);3780    box-shadow:3781      inset 0 1px 0 rgba(255, 255, 255, 0.05),3782      0 12px 28px rgba(0, 0, 0, 0.4);3783  }3784  .light .peach-lock-panel.peach-glass,3785  [data-theme="light"] .peach-lock-panel.peach-glass {3786    background: rgba(240, 233, 223, 0.98);3787  }3788}37893790.peach-lock-panel--secondary {3791  gap: 12px;3792}37933794.peach-lock-panel-header {3795  display: flex;3796  align-items: baseline;3797  justify-content: space-between;3798  gap: 12px;3799}38003801.peach-lock-option-grid {3802  display: grid;3803  gap: 10px;3804}38053806.peach-lock-option {3807  width: 100%;3808  display: grid;3809  gap: 6px;3810  padding: 14px 15px;3811  border-radius: 16px;3812  border: 1px solid rgba(240, 232, 216, 0.08);3813  background: rgba(240, 232, 216, 0.02);3814  color: var(--peach-t0);3815  text-align: left;3816  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3817}38183819.peach-lock-option:hover {3820  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3821  background: rgba(240, 232, 216, 0.04);3822  transform: translateY(-1px);3823}38243825.peach-lock-option-title {3826  font-size: 0.75rem;3827  color: var(--peach-t0);3828}38293830.peach-lock-option-copy {3831  font-size: 0.6875rem;3832  line-height: 1.55;3833  color: var(--peach-t1);3834}38353836.peach-onboarding-stack {3837  margin-top: 2px;3838}3839.peach-lock-panel-footer {3840  display: grid;3841  gap: 6px;3842  margin-top: 2px;3843  padding-top: 10px;3844  border-top: 1px solid rgba(240, 232, 216, 0.06);3845}38463847/* ── Restore tab view ─────────────────────────────────────────────────────3848   Tab-based restore screen replacing the old three-card picker. */38493850.peach-restore-tabview {3851  overflow: hidden;3852}38533854.peach-restore-tabcard {3855  flex: 1;3856  display: flex;3857  flex-direction: column;3858  gap: 0;3859  padding: 0;3860  overflow: hidden;3861  cursor: default;3862  user-select: none;3863  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3864}38653866/* ── Tab selector ─────────────────────────────────────────────────────── */38673868.peach-restore-tabs {3869  display: flex;3870  justify-content: space-around;3871  padding: 14px 10px 10px;3872  border-bottom: 1px solid var(--peach-t3);3873  gap: 2px;3874  overflow: hidden;3875  scrollbar-width: none;3876}3877.peach-restore-tabs::-webkit-scrollbar { display: none; }38783879.peach-restore-tab {3880  background: none;3881  border: none;3882  cursor: pointer;3883  padding: 3px 2px;3884  font-family: 'Cormorant Garamond', Georgia, serif;3885  font-style: italic;3886  font-size: 11px;3887  color: var(--peach-t2);3888  transition: color 150ms ease, text-shadow 150ms ease;3889  flex: 1;3890  min-width: 0;3891  text-align: center;3892  white-space: nowrap;3893  overflow: hidden;3894  text-overflow: ellipsis;3895}3896.peach-restore-tab:hover {3897  color: var(--peach-accent);3898  text-shadow:3899    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3900    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3901}3902.peach-restore-tab.is-active {3903  color: var(--peach-accent);3904  text-shadow:3905    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3906    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3907}39083909/* ── Content area ─────────────────────────────────────────────────────── */39103911.peach-restore-content {3912  padding: 16px 16px 14px;3913  display: flex;3914  flex-direction: column;3915  gap: 8px;3916  overflow: hidden;3917  scrollbar-width: none;3918  flex: 1;3919}3920.peach-restore-content::-webkit-scrollbar { display: none; }3921.peach-restore-content > * {3922  overflow: hidden;3923  scrollbar-width: none;3924}3925.peach-restore-content > *::-webkit-scrollbar { display: none; }39263927/* ── Shared tab inner layout ──────────────────────────────────────────── */39283929.peach-rt-symbols,3930.peach-rt-csv,3931.peach-rt-phone,3932.peach-restore-codex {3933  display: flex;3934  flex-direction: column;3935  gap: 8px;3936  overflow: hidden;3937}39383939.peach-restore-codex {3940  min-height: 0;3941  justify-content: center;3942}39433944.peach-restore-codex-title {3945  margin: 0;3946  font-family: var(--font-display);3947  font-size: 1rem;3948  font-style: italic;3949  color: var(--peach-t0);3950}39513952.peach-restore-codex-copy {3953  margin: 0;3954  font-size: 0.75rem;3955  line-height: 1.5;3956  color: var(--peach-t1);3957}39583959.peach-restore-codex-button {3960  width: 100%;3961  justify-content: center;3962}39633964.peach-rt-submit {3965  width: 100%;3966}39673968.peach-rt-error {3969  margin: 0;3970  font-size: 0.6875rem;3971  color: var(--peach-breach);3972  line-height: 1.4;3973}39743975/* ── PeachScript tab ──────────────────────────────────────────────────── */39763977.peach-restore-symbols-textarea {3978  font-family: 'PeachScript', monospace;3979  font-size: 13px;3980  line-height: 1.9;3981  letter-spacing: 0.1em;3982  word-break: break-all;3983  resize: none;3984  width: 100%;3985  min-height: 56px;3986  max-height: 72px;3987  overflow: hidden;3988  scrollbar-width: none;3989  -ms-overflow-style: none;3990  box-sizing: border-box;3991  padding: 6px 8px;3992  border-radius: 8px;3993  border: 1px solid var(--peach-t3);3994  background: rgba(240, 232, 216, 0.03);3995  color: var(--peach-t0);3996}3997.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3998.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }39994000.peach-restore-symbols-pass {4001  width: 100%;4002  box-sizing: border-box;4003  padding: 7px 10px;4004  border-radius: 8px;4005  border: 1px solid var(--peach-t3);4006  background: rgba(240, 232, 216, 0.03);4007  color: var(--peach-t0);4008  font-size: 0.8125rem;4009}4010.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }4011.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }40124013.peach-rt-divider {4014  text-align: center;4015  font-size: 0.6875rem;4016  color: var(--peach-t2);4017  font-style: italic;4018}40194020.peach-rt-file-label {4021  width: 100%;4022  justify-content: center;4023}40244025.peach-rt-anim-canvas {4026  width: 100%;4027  height: 180px;4028  border-radius: 10px;4029  overflow: hidden;4030  display: block;4031}40324033/* ── CSV tab ──────────────────────────────────────────────────────────── */40344035.peach-rt-csv-sources {4036  margin: 0;4037  font-size: 0.6875rem;4038  color: var(--peach-t2);4039  line-height: 1.5;4040  text-align: center;4041}40424043.peach-rt-csv-warning {4044  margin: 0;4045  font-family: "IBM Plex Mono", monospace;4046  font-size: 0.5625rem;4047  letter-spacing: 0.12em;4048  color: var(--peach-breach);4049  text-align: center;4050}40514052/* ── From Phone tab ───────────────────────────────────────────────────── */40534054.peach-rt-phone-code {4055  margin: 0;4056  text-align: center;4057  font-family: "IBM Plex Mono", monospace;4058  font-size: 22px;4059  letter-spacing: 0.18em;4060  color: var(--peach-t0);4061}40624063.peach-rt-phone-qr {4064  display: block;4065  width: 96px;4066  height: 96px;4067  margin: 0 auto;4068  border-radius: 6px;4069  image-rendering: pixelated;4070  overflow: hidden;4071}40724073.peach-rt-phone-hint {4074  margin: 0;4075  font-size: 0.6875rem;4076  color: var(--peach-t2);4077  line-height: 1.55;4078  text-align: center;4079}40804081/* ── Intro popup ──────────────────────────────────────────────────────── */40824083.peach-restore-intro-overlay {4084  position: absolute;4085  inset: 0;4086  z-index: 100;4087  display: flex;4088  align-items: center;4089  justify-content: center;4090  padding: 20px;4091  background: rgba(12, 10, 6, 0.7);4092  backdrop-filter: blur(4px);4093  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4094}40954096.peach-restore-intro-card {4097  width: 100%;4098  display: flex;4099  flex-direction: column;4100  gap: 12px;4101  padding: 22px 20px 20px;4102  border-radius: 16px;4103  border: 1px solid var(--peach-t3);4104  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));4105  backdrop-filter: blur(4px);4106  -webkit-backdrop-filter: blur(4px);4107  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);4108}41094110.peach-restore-intro-headline {4111  margin: 0;4112  font-family: var(--font-display);4113  font-style: italic;4114  font-size: 20px;4115  font-weight: 400;4116  color: var(--peach-t0);4117}41184119.peach-restore-intro-body {4120  display: flex;4121  flex-direction: column;4122  gap: 8px;4123}4124.peach-restore-intro-body p {4125  margin: 0;4126  font-size: 0.75rem;4127  color: var(--peach-t1);4128  line-height: 1.5;4129}41304131.peach-restore-intro-btn {4132  width: 100%;4133  margin-top: 4px;4134}41354136/* Snapshot restore panel */4137.peach-snapshot-panel {4138  gap: 10px;4139  overflow-y: auto;4140  max-height: 340px;4141}4142.peach-snapshot-list {4143  display: flex;4144  flex-direction: column;4145  gap: 4px;4146}4147.peach-snapshot-row {4148  display: flex;4149  align-items: center;4150  justify-content: space-between;4151  width: 100%;4152  padding: 8px 10px;4153  border-radius: 8px;4154  border: 1px solid rgba(240, 232, 216, 0.07);4155  background: transparent;4156  cursor: pointer;4157  transition: border-color 120ms, background 120ms;4158  text-align: left;4159  gap: 8px;4160}4161.peach-snapshot-row:hover {4162  border-color: rgba(240, 232, 216, 0.14);4163  background: rgba(240, 232, 216, 0.03);4164}4165.peach-snapshot-row.is-selected {4166  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4167  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);4168}4169.peach-snapshot-time {4170  font-size: 11.5px;4171  color: var(--peach-t0);4172  flex: 1;4173}4174.peach-snapshot-count {4175  font-family: "IBM Plex Mono", monospace;4176  font-size: 0.625rem;4177  color: var(--peach-t2);4178  flex-shrink: 0;4179}4180.peach-snapshot-confirm {4181  display: flex;4182  flex-direction: column;4183  gap: 8px;4184  padding-top: 10px;4185  border-top: 1px solid rgba(240, 232, 216, 0.06);4186}4187.peach-snapshot-warning {4188  display: flex;4189  align-items: flex-start;4190  gap: 6px;4191  font-size: 10.5px;4192  color: rgba(220, 80, 60, 0.85);4193  line-height: 1.55;4194}4195.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }4196.peach-snapshot-confirm-row {4197  display: flex;4198  gap: 6px;4199  align-items: center;4200}4201.peach-snapshot-restore-btn {4202  width: 100%;4203}4204.peach-lock-hero--unlock .peach-lock-hero-art {4205  width: 112px;4206  height: 112px;4207  right: 0;4208  top: 2px;4209  opacity: 0.1;4210}42114212.peach-card {4213  border: 1px solid var(--peach-t3);4214  border-radius: 18px;4215  background:4216    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4217  box-shadow:4218    inset 0 0 0 1px var(--peach-border-accent),4219    inset 0 1px 0 rgba(240, 232, 216, 0.04),4220    0 12px 32px rgba(0, 0, 0, 0.14);4221  overflow: hidden;4222}42234224.peach-card-active {4225  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4226  box-shadow:4227    inset 0 1px 0 rgba(240, 232, 216, 0.05),4228    0 16px 38px rgba(0, 0, 0, 0.18),4229    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4230}42314232.peach-card-disabled {4233  opacity: 0.72;4234}42354236.peach-card-header {4237  width: 100%;4238  padding: 13px 16px 11px;4239  background: transparent;4240  color: var(--peach-t0);4241  display: flex;4242  justify-content: space-between;4243  align-items: center;4244  text-align: left;4245  font-size: 0.75rem;4246}42474248.peach-card-body {4249  padding: 0 16px 16px;4250  display: grid;4251  gap: 9px;4252}42534254.peach-card-tag {4255  color: var(--peach-t2);4256  font-family: "IBM Plex Mono", monospace;4257  font-size: 0.5625rem;4258  letter-spacing: 0.12em;4259  text-transform: uppercase;4260}42614262.peach-empty-copy {4263  display: grid;4264  gap: 6px;4265  color: var(--peach-t1);4266  font-size: 0.8125rem;4267}42684269.peach-lock-submit {4270  width: 100%;4271  box-shadow:4272    0 1px 0 rgba(255,255,255,0.10) inset,4273    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4274    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4275    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4276}42774278.peach-lock-secondary {4279  width: 100%;4280  border-color: var(--peach-t3);4281  background: rgba(240, 232, 216, 0.02);4282}42834284.peach-lock-secondary:hover {4285  background: rgba(240, 232, 216, 0.04);4286}42874288.peach-lock-note {4289  max-width: none;4290  line-height: 1.55;4291  margin: 0;4292}42934294.peach-overlay-action {4295  font-size: 0.625rem;4296  padding: 4px 8px;4297  letter-spacing: 0.06em;4298  min-width: 44px;4299  text-align: center;4300}43014302.peach-inline-action {4303  flex-shrink: 0;4304  font-size: 0.5625rem;4305  letter-spacing: 0.1em;4306  text-transform: uppercase;4307  padding: 4px 7px;4308}4309.peach-password-toggle-btn {4310  display: inline-flex;4311  align-items: center;4312  justify-content: center;4313  min-width: 30px;4314  min-height: 26px;4315  padding: 0 7px;4316  border: 1px solid var(--peach-t3);4317  border-radius: 999px;4318  background: rgba(240, 232, 216, 0.04);4319  color: var(--peach-t2);4320  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4321}4322.peach-password-toggle-btn:hover {4323  border-color: var(--peach-t2);4324  color: var(--peach-t0);4325  background: rgba(240, 232, 216, 0.06);4326}43274328.peach-new-textarea {4329  width: 100%;4330  min-height: 88px;4331  resize: vertical;4332  border: 0;4333  outline: none;4334  background: transparent;4335  color: var(--peach-t1);4336  font-family: "IBM Plex Mono", monospace;4337  font-size: 0.75rem;4338  line-height: 1.65;4339  caret-color: var(--peach-accent);4340}43414342.peach-new-textarea::placeholder {4343  color: var(--peach-t2);4344  opacity: 0.7;4345}43464347.peach-settings-actions {4348  display: grid;4349  gap: 8px;4350}43514352.peach-sync-section-label {4353  font-size: 0.6875rem;4354  color: var(--peach-t2);4355  text-transform: uppercase;4356  letter-spacing: 0.05em;4357}43584359.peach-sync-network-note {4360  margin: 0 0 6px;4361  font-size: 0.75rem;4362  color: var(--peach-t2);4363  line-height: 1.4;4364}43654366.peach-settings-row--tappable {4367  background: none;4368  border: none;4369  width: 100%;4370  text-align: left;4371  cursor: pointer;4372  color: var(--peach-t1);4373  font-size: 0.8125rem;4374}4375.peach-settings-row--tappable:hover {4376  color: var(--peach-t0);4377}43784379.peach-sync-pro-hint {4380  display: flex;4381  flex-direction: column;4382  align-items: flex-start;4383  gap: 8px;4384  padding: 12px 0 4px;4385}43864387.peach-sync-device-row {4388  display: flex;4389  justify-content: space-between;4390  align-items: center;4391  padding: 6px 0;4392  border-bottom: 1px solid var(--peach-t3);4393}43944395.peach-sync-device-info {4396  display: flex;4397  flex-direction: column;4398  gap: 2px;4399}44004401.peach-sync-device-name {4402  font-size: 0.8125rem;4403  color: var(--peach-t0);4404}44054406.peach-sync-device-meta {4407  font-size: 0.6875rem;4408  color: var(--peach-t2);4409}44104411.peach-sync-status-dot {4412  display: inline-block;4413  width: 8px;4414  height: 8px;4415  border-radius: 50%;4416  vertical-align: middle;4417}44184419.peach-sync-remove-btn {4420  color: var(--peach-breach);4421}44224423.peach-sync-advanced-row {4424  display: flex;4425  justify-content: space-between;4426  align-items: center;4427  padding: 6px 0;4428  gap: 12px;4429}44304431.peach-sync-advanced-info {4432  display: flex;4433  flex-direction: column;4434  gap: 2px;4435  flex: 1;4436}44374438.peach-sync-advanced-name {4439  font-size: 0.8125rem;4440  color: var(--peach-t0);4441}44424443.peach-sync-reset-confirm {4444  display: flex;4445  flex-direction: column;4446  gap: 8px;4447  padding: 10px;4448  border: 1px solid var(--peach-breach);4449  border-radius: 10px;4450  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4451}44524453.peach-sync-reset-confirm-headline {4454  font-size: 0.8125rem;4455  font-weight: 600;4456  color: var(--peach-t0);4457  margin: 0;4458}44594460.peach-sync-reset-confirm-body {4461  font-size: 0.75rem;4462  color: var(--peach-t1);4463  margin: 0;4464  line-height: 1.4;4465}44664467.peach-btn--danger {4468  background: var(--peach-breach);4469  color: #fff;4470  border-color: var(--peach-breach);4471}4472.peach-btn--danger:hover:not(:disabled) {4473  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4474}4475.peach-btn--danger:disabled {4476  opacity: 0.55;4477  cursor: not-allowed;4478}44794480.peach-sync-hero-icon {4481  color: var(--peach-t1);4482  opacity: 0.85;4483}44844485.peach-import-preview {4486  margin-bottom: 12px;4487  max-height: 152px;4488  overflow-y: auto;4489  border: 1px solid var(--peach-t3);4490  border-radius: 10px;4491  padding: 8px 10px;4492  display: grid;4493  gap: 8px;4494  background: rgba(240, 232, 216, 0.02);4495}44964497.peach-import-preview-row {4498  display: flex;4499  justify-content: space-between;4500  gap: 10px;4501  font-size: 0.6875rem;4502  color: var(--peach-t1);4503}45044505.peach-import-preview-title {4506  color: var(--peach-t0);4507  flex: 1;4508  min-width: 0;4509  overflow: hidden;4510  text-overflow: ellipsis;4511  white-space: nowrap;4512}45134514.peach-import-preview-meta {4515  color: var(--peach-t2);4516  flex-shrink: 0;4517  max-width: 42%;4518  overflow: hidden;4519  text-overflow: ellipsis;4520  white-space: nowrap;4521}45224523.peach-import-preview-more {4524  color: var(--peach-t2);4525  font-size: 0.625rem;4526}45274528.peach-restore-copy {4529  margin: 0;4530  color: var(--peach-t1);4531  font-size: 0.6875rem;4532  line-height: 1.6;4533}45344535.peach-restore-warning {4536  padding: 10px 12px;4537  border-radius: 12px;4538  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4539  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4540  color: var(--peach-t0);4541  font-size: 0.6875rem;4542  line-height: 1.55;4543}45444545.peach-provider-chips {4546  display: flex;4547  flex-wrap: wrap;4548  gap: 6px;4549}45504551.peach-provider-chip {4552  display: inline-flex;4553  align-items: center;4554  padding: 5px 8px;4555  border-radius: 999px;4556  border: 1px solid var(--peach-t3);4557  background: rgba(240, 232, 216, 0.02);4558  color: var(--peach-t1);4559  font-family: "IBM Plex Mono", monospace;4560  font-size: 0.5rem;4561  letter-spacing: 0.08em;4562  text-transform: uppercase;4563}45644565.peach-restore-file,4566.peach-restore-input {4567  width: 100%;4568  border-radius: 10px;4569  border: 1px solid var(--peach-t3);4570  background: var(--peach-s2);4571  color: var(--peach-t0);4572  font-size: 0.75rem;4573}45744575.peach-restore-file {4576  padding: 9px 10px;4577}45784579.peach-restore-file::file-selector-button {4580  margin-right: 10px;4581  padding: 7px 10px;4582  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4583  border-radius: 999px;4584  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4585  color: var(--peach-t0);4586  font-size: 0.625rem;4587  letter-spacing: 0.08em;4588  text-transform: uppercase;4589  cursor: pointer;4590}45914592.peach-restore-input {4593  padding: 10px 12px;4594}45954596.peach-auth-grid {4597  display: grid;4598  gap: 10px;4599}46004601.peach-import-summary {4602  color: var(--peach-t1);4603  font-size: 0.75rem;4604  line-height: 1.6;4605  margin-bottom: 12px;4606}46074608.peach-restore-error {4609  color: rgba(220, 80, 60, 0.95);4610  font-size: 0.75rem;4611  line-height: 1.55;4612}46134614.peach-passkey-card {4615  max-width: 400px;4616  margin: auto 16px;4617  align-self: center;4618  width: calc(100% - 32px);4619}46204621/* Center the approval card vertically inside the overlay-view (which sets4622 * flex-direction: column without justify-content). Without this, the card4623 * sits at the top with a tall empty band below — looks unfinished on the4624 * 320px popup. */4625.peach-overlay-view:has(.peach-passkey-card) {4626  justify-content: center;4627}46284629.peach-pro-badge {4630  padding: 2px 6px;4631  border-radius: 999px;4632  font-family: var(--font-ui);4633  font-size: 0.625rem;4634  letter-spacing: 0.08em;4635  text-transform: uppercase;4636  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4637  color: var(--peach-accent);4638}46394640/* ── Shortcuts rebind table ─────────────────────────────────── */4641.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4642.peach-shortcut-row {4643  display: flex;4644  align-items: center;4645  gap: 10px;4646  padding: 6px 0;4647}4648.peach-shortcut-row-label {4649  flex: 1;4650  font-size: 0.75rem;4651  color: var(--peach-t0);4652}4653.peach-shortcut-chip {4654  min-width: 64px;4655  padding: 4px 10px;4656  border-radius: 6px;4657  border: 1px solid var(--peach-t3);4658  background: var(--peach-input-bg, var(--surface-card));4659  color: var(--peach-t0);4660  font-family: var(--font-mono);4661  font-size: 0.6875rem;4662  letter-spacing: 0.04em;4663  cursor: pointer;4664  text-align: center;4665  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4666}4667.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4668.peach-shortcut-chip.is-custom {4669  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4670  color: var(--peach-accent);4671}4672.peach-shortcut-chip.is-capturing {4673  border-color: var(--peach-accent);4674  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4675  color: var(--peach-accent);4676  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4677}4678@keyframes peach-shortcut-capture-pulse {4679  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4680  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4681}4682.peach-shortcut-reset {4683  background: transparent;4684  border: none;4685  cursor: pointer;4686  color: var(--peach-t2);4687  padding: 4px 6px;4688  border-radius: 5px;4689  font-size: 0.875rem;4690  line-height: 1;4691  transition: color 120ms ease, background 120ms ease;4692}4693.peach-shortcut-reset:hover {4694  color: var(--peach-t0);4695  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4696}4697.peach-shortcuts-conflict {4698  margin: 4px 0 0;4699  padding: 8px 10px;4700  border-radius: 7px;4701  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4702  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4703  font-family: var(--font-mono);4704  font-size: 0.6875rem;4705  color: var(--peach-t0);4706}47074708/* ── Help dialog overlay (? to open) ────────────────────────── */4709.peach-shortcuts-help-backdrop {4710  position: fixed;4711  inset: 0;4712  background: rgba(0, 0, 0, 0.55);4713  backdrop-filter: blur(2px);4714  display: flex;4715  align-items: center;4716  justify-content: center;4717  z-index: 1000;4718  animation: peach-help-fade-in 140ms ease forwards;4719}4720@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4721.peach-shortcuts-help-card {4722  width: min(320px, 92vw);4723  max-height: 80vh;4724  overflow-y: auto;4725  border-radius: 14px;4726  border: 1px solid var(--peach-t3);4727  background: var(--peach-bg);4728  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4729  padding: 16px 18px 18px;4730  display: flex;4731  flex-direction: column;4732  gap: 12px;4733}4734.peach-shortcuts-help-head {4735  display: flex; align-items: center; justify-content: space-between;4736}4737.peach-shortcuts-help-head h3 {4738  margin: 0;4739  font-family: var(--font-display);4740  font-style: italic;4741  font-weight: 400;4742  font-size: 22px;4743  color: var(--peach-t0);4744}4745.peach-shortcuts-help-close {4746  background: transparent;4747  border: none;4748  color: var(--peach-t2);4749  cursor: pointer;4750  font-size: 0.875rem;4751  padding: 4px 8px;4752  border-radius: 5px;4753}4754.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4755.peach-shortcuts-help-body ul {4756  list-style: none; padding: 0; margin: 4px 0 12px;4757  display: grid; gap: 8px;4758}4759.peach-shortcuts-help-body li {4760  display: flex; align-items: center; justify-content: space-between; gap: 12px;4761  font-size: 0.75rem; color: var(--peach-t0);4762}4763.peach-shortcuts-help-body kbd {4764  font-family: var(--font-mono);4765  font-size: 0.6875rem;4766  padding: 3px 8px;4767  border-radius: 6px;4768  background: var(--surface-card);4769  border: 1px solid var(--peach-t3);4770  color: var(--peach-accent);4771  letter-spacing: 0.04em;4772}47734774/* ── Pro promo on Account screen ────────────────────────────── */4775.peach-pro-promo {4776  position: relative;4777  border-radius: 14px;4778  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4779  background:4780    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4781    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4782    var(--surface-card);4783  overflow: hidden;4784  margin-bottom: 14px;4785}4786.peach-pro-promo-glow {4787  position: absolute;4788  inset: -40% -20% auto auto;4789  width: 220px; height: 220px;4790  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4791  pointer-events: none;4792  filter: blur(8px);4793}4794.peach-pro-promo-inner {4795  position: relative;4796  padding: 18px 18px 16px;4797}4798.peach-pro-promo-title {4799  font-family: var(--font-display);4800  font-style: italic;4801  font-weight: 400;4802  font-size: 28px;4803  line-height: 1;4804  letter-spacing: -0.005em;4805  color: var(--peach-t0);4806  margin: 0 0 4px;4807}4808.peach-pro-promo-tagline {4809  font-family: var(--font-mono);4810  font-size: 0.625rem;4811  letter-spacing: 0.06em;4812  color: var(--peach-t2);4813  margin: 0 0 14px;4814}4815.peach-pro-promo-list {4816  list-style: none;4817  margin: 0 0 16px;4818  padding: 0;4819  display: grid;4820  gap: 9px;4821}4822.peach-pro-promo-list li {4823  display: flex;4824  align-items: flex-start;4825  gap: 9px;4826  font-size: 0.75rem;4827  color: var(--peach-t1);4828  line-height: 1.4;4829}4830.peach-pro-promo-list svg {4831  width: 14px;4832  height: 14px;4833  flex-shrink: 0;4834  color: var(--peach-accent);4835  margin-top: 2px;4836}4837.peach-pro-promo-list span {4838  color: var(--peach-t0);4839}4840.peach-pro-promo-cta {4841  width: 100%;4842  background: var(--peach-accent);4843  color: #fff;4844  border: none;4845  padding: 9px 12px;4846  border-radius: 9px;4847  font-size: 0.75rem;4848  font-weight: 500;4849  font-family: var(--font-ui);4850  letter-spacing: 0.02em;4851  text-decoration: none;4852  display: inline-flex;4853  align-items: center;4854  justify-content: center;4855  cursor: pointer;4856  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4857  box-shadow: 0 2px 16px var(--peach-glow);4858}4859.peach-pro-promo-cta:hover {4860  filter: brightness(1.07);4861  box-shadow: 0 4px 24px var(--peach-glow);4862  transform: translateY(-1px);4863}4864.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }48654866.peach-pro-or-divider {4867  display: flex;4868  align-items: center;4869  gap: 10px;4870  margin: 4px 0 12px;4871  font-family: var(--font-mono);4872  font-size: 0.625rem;4873  letter-spacing: 0.06em;4874  color: var(--peach-t2);4875  text-transform: uppercase;4876}4877.peach-pro-or-divider::before,4878.peach-pro-or-divider::after {4879  content: "";4880  flex: 1;4881  height: 1px;4882  background: var(--peach-t3);4883}48844885.peach-loading {4886  position: absolute;4887  inset: 0;4888  display: flex;4889  align-items: center;4890  justify-content: center;4891  background: var(--bg);4892  animation: peach-loading-pulse 1.2s ease-in-out infinite;4893}48944895@keyframes peach-loading-pulse {4896  0%, 100% { opacity: 0.6; }4897  50% { opacity: 1; }4898}48994900/* ── Health Dashboard ─────────────────────────────────────────────────── */4901.peach-health-body {4902  flex: 1;4903  overflow-y: auto;4904  display: flex;4905  flex-direction: column;4906  /* Hide the platform scrollbar — every other scrollable surface in the4907   * popup hides it; the Health view was the one outlier and it ruined the4908   * polish. Behavior unchanged, just no rail rendered. */4909  scrollbar-width: none;4910  -ms-overflow-style: none;4911}4912.peach-health-body::-webkit-scrollbar { display: none; }49134914/* Loading screen for the Vault Health view. The advanced report computation4915 * can run for a few seconds on a large vault — without a clear loading4916 * screen the surface looked broken (the entry view bleeds through the4917 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4918.peach-health-loading-screen {4919  flex: 1;4920  display: flex;4921  flex-direction: column;4922  align-items: center;4923  justify-content: center;4924  gap: 14px;4925  padding: 32px 28px;4926  text-align: center;4927}49284929.peach-health-loading-glyph {4930  width: 48px;4931  height: 48px;4932  display: flex;4933  align-items: center;4934  justify-content: center;4935  border-radius: 14px;4936  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4937  color: var(--peach-accent);4938}49394940.peach-health-loading-title {4941  margin: 0;4942  font-family: var(--font-display);4943  font-style: italic;4944  font-weight: 300;4945  font-size: 19px;4946  line-height: 1.2;4947  color: var(--peach-t0);4948}49494950.peach-health-loading-copy {4951  margin: 0;4952  max-width: 240px;4953  font-size: 0.75rem;4954  line-height: 1.55;4955  color: var(--peach-t2);4956}49574958.peach-health-loading-track {4959  width: 200px;4960  height: 3px;4961  margin-top: 6px;4962  border-radius: 999px;4963  background: rgba(240, 232, 216, 0.06);4964  overflow: hidden;4965}49664967.peach-health-loading-fill {4968  width: 40%;4969  height: 100%;4970  border-radius: inherit;4971  background: linear-gradient(4972    90deg,4973    transparent 0%,4974    var(--peach-accent) 50%,4975    transparent 100%4976  );4977  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4978}49794980@keyframes peach-health-loading-sweep {4981  0%   { transform: translateX(-100%); }4982  100% { transform: translateX(350%); }4983}49844985[data-motion="reduce"] .peach-health-loading-fill,4986[data-motion="reduce"] .peach-health-loading-glyph svg path {4987  animation: none;4988}49894990.peach-health-summary {4991  padding: 10px 16px 6px;4992  font-family: "IBM Plex Mono", monospace;4993  font-size: 0.6875rem;4994}4995.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4996.peach-health-summary-ok { color: var(--peach-t2); }49974998.peach-health-check-row {4999  padding: 0 16px 10px;5000}5001.peach-health-check-btn {5002  width: 100%;5003  display: flex;5004  align-items: center;5005  justify-content: center;5006}50075008.peach-health-sections {5009  flex: 1;5010  display: flex;5011  flex-direction: column;5012}50135014.peach-health-section {5015  border-bottom: 1px solid var(--peach-t3);5016}50175018.peach-health-section-header {5019  width: 100%;5020  display: flex;5021  align-items: center;5022  justify-content: space-between;5023  padding: 9px 16px;5024  background: transparent;5025  cursor: pointer;5026  color: var(--peach-t0);5027}50285029.peach-health-section-title-row {5030  display: flex;5031  align-items: center;5032  gap: 8px;5033}50345035.peach-health-count-badge {5036  display: inline-flex;5037  align-items: center;5038  justify-content: center;5039  min-width: 20px;5040  height: 18px;5041  padding: 0 5px;5042  border-radius: 999px;5043  background: rgba(220,80,60,0.15);5044  border: 1px solid rgba(220,80,60,0.25);5045  font-family: "IBM Plex Mono", monospace;5046  font-size: 0.5625rem;5047  color: rgba(220,80,60,0.9);5048}50495050.peach-health-section-title {5051  font-family: "IBM Plex Mono", monospace;5052  font-size: 0.6875rem;5053  text-transform: uppercase;5054  letter-spacing: 0.1em;5055  color: var(--peach-t1);5056}50575058.peach-health-chevron {5059  color: var(--peach-t2);5060  transition: transform 200ms ease;5061  flex-shrink: 0;5062}5063.peach-health-chevron.is-expanded {5064  transform: rotate(180deg);5065}50665067.peach-health-section-body {5068  padding: 0 16px 10px;5069  display: flex;5070  flex-direction: column;5071  gap: 4px;5072}50735074.peach-health-row {5075  display: flex;5076  align-items: flex-start;5077  justify-content: space-between;5078  gap: 8px;5079  padding: 6px 8px;5080  border-radius: 8px;5081  background: rgba(240,232,216,0.02);5082}50835084.peach-health-row-info {5085  flex: 1;5086  min-width: 0;5087  display: flex;5088  flex-direction: column;5089  gap: 2px;5090}50915092.peach-health-row-name {5093  font-family: var(--font-display);5094  font-size: 0.9375rem;5095  font-style: italic;5096  font-weight: 400;5097  color: var(--peach-t0);5098  white-space: nowrap;5099  overflow: hidden;5100  text-overflow: ellipsis;5101}51025103.peach-health-row-meta {5104  font-family: "IBM Plex Mono", monospace;5105  font-size: 0.5625rem;5106  color: var(--peach-t2);5107  letter-spacing: 0.05em;5108}51095110.peach-health-fix-btn {5111  font-size: 0.5625rem;5112  letter-spacing: 0.08em;5113  text-transform: uppercase;5114  padding: 4px 7px;5115  flex-shrink: 0;5116  display: flex;5117  align-items: center;5118}51195120.peach-health-empty {5121  font-family: "IBM Plex Mono", monospace;5122  font-size: 0.625rem;5123  color: var(--peach-t2);5124  padding: 6px 0;5125}51265127.peach-health-loading {5128  font-family: "IBM Plex Mono", monospace;5129  font-size: 0.625rem;5130  color: var(--peach-t2);5131  padding: 6px 0;5132  display: flex;5133  align-items: center;5134  gap: 6px;5135}51365137.peach-health-loading::before {5138  content: "";5139  width: 10px;5140  height: 10px;5141  border: 1.5px solid var(--peach-t3);5142  border-top-color: var(--peach-accent);5143  border-radius: 50%;5144  animation: peach-spin 600ms linear infinite;5145}51465147@keyframes peach-spin {5148  to { transform: rotate(360deg); }5149}51505151.peach-spinner {5152  width: 32px;5153  height: 32px;5154  border: 2px solid var(--peach-s2);5155  border-top-color: var(--peach-accent);5156  border-radius: 50%;5157  margin: 0 auto 16px;5158  animation: peach-spin 0.8s linear infinite;5159}51605161.peach-progress-screen {5162  text-align: center;5163  padding: 32px 16px;5164}51655166.peach-progress-screen-title {5167  font-size: 0.8125rem;5168  color: var(--peach-t0);5169  margin-bottom: 16px;5170}51715172.peach-progress-screen-stage {5173  font-size: 0.6875rem;5174  color: var(--peach-t2);5175  min-height: 14px;5176}51775178.peach-progress-screen-note {5179  font-size: 0.625rem;5180  color: var(--peach-t2);5181  margin-top: 8px;5182}51835184.peach-pairing-body {5185  flex: 1;5186  overflow-y: auto;5187  display: flex;5188  flex-direction: column;5189}51905191.peach-pairing-content {5192  flex: 1;5193  display: flex;5194  flex-direction: column;5195  align-items: center;5196  justify-content: center;5197  gap: 14px;5198  padding: 28px 20px;5199  text-align: center;5200}52015202.peach-pairing-code-screen {5203  gap: 18px;5204}52055206.peach-pairing-headline {5207  font-family: var(--font-display);5208  font-style: italic;5209  font-weight: 300;5210  font-size: 28px;5211  color: var(--peach-t0);5212  margin: 0;5213  line-height: 1;5214}52155216.peach-pairing-subline {5217  font-size: 0.75rem;5218  color: var(--peach-t2);5219  max-width: 220px;5220  line-height: 1.5;5221  margin: 0;5222}52235224.peach-pairing-subline--center {5225  text-align: center;5226}52275228/* 6-digit pairing code — both display (.peach-pairing-code) and entry5229   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking5230   so the two modes feel like the same surface. */5231.peach-pairing-code {5232  font-family: "IBM Plex Mono", monospace;5233  font-size: 36px;5234  letter-spacing: 0.25em;5235  color: var(--peach-t0);5236  text-align: center;5237  padding: 24px 0;5238  text-shadow:5239    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),5240    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);5241  background: transparent;5242  border: 0;5243  cursor: default;5244  user-select: text;5245}52465247.peach-pairing-code--loading,5248.peach-pairing-code--expired {5249  font-size: 18px;5250  letter-spacing: 0.04em;5251  color: var(--peach-t2);5252  cursor: pointer;5253  text-shadow: none;5254}52555256.peach-pairing-qr-container {5257  display: flex;5258  flex-direction: column;5259  align-items: center;5260  gap: 10px;5261}52625263.peach-pairing-qr {5264  width: 240px;5265  height: 240px;5266  display: block;5267}52685269.peach-pairing-instruction {5270  font-size: 0.75rem;5271  color: var(--peach-t2);5272  text-align: center;5273  line-height: 1.5;5274  margin: 0;5275  max-width: 220px;5276}52775278.peach-pairing-expiry {5279  font-family: "IBM Plex Mono", monospace;5280  font-size: 13px;5281  letter-spacing: 0.06em;5282  color: var(--peach-t2);5283  margin: 0;5284}52855286.peach-pairing-regen {5287  font-size: 0.75rem;5288  color: var(--peach-accent);5289  background: transparent;5290  border: 0;5291  cursor: pointer;5292  padding: 4px 0;5293  text-decoration: underline;5294  text-underline-offset: 2px;5295}52965297.peach-pairing-code-input {5298  font-family: "IBM Plex Mono", monospace;5299  font-size: 36px;5300  letter-spacing: 0.25em;5301  color: var(--peach-t0);5302  background: transparent;5303  border: 0;5304  border-bottom: 1px solid var(--peach-t3);5305  outline: none;5306  text-align: center;5307  padding: 18px 0;5308  width: 220px;5309  caret-color: var(--peach-accent);5310  transition: border-color 160ms ease;5311}53125313.peach-pairing-code-input::placeholder {5314  color: var(--peach-t3);5315}53165317.peach-pairing-code-input:focus {5318  border-bottom-color: var(--peach-accent);5319}53205321.peach-pairing-toggle {5322  background: transparent;5323  border: 0;5324  color: var(--peach-t2);5325  font-size: 0.75rem;5326  padding: 8px 4px;5327  cursor: pointer;5328  transition: color 120ms ease;5329}53305331.peach-pairing-toggle:hover:not(:disabled) {5332  color: var(--peach-t1);5333}53345335.peach-pairing-toggle:disabled {5336  opacity: 0.5;5337  cursor: default;5338}53395340.peach-pairing-hint {5341  font-size: 0.6875rem;5342  color: var(--peach-t2);5343  margin: 0;5344  text-align: center;5345}53465347.peach-pairing-status {5348  display: flex;5349  align-items: center;5350  gap: 8px;5351  margin: 0;5352  font-size: 0.75rem;5353  color: var(--peach-t1);5354}53555356.peach-pairing-error {5357  margin: 0;5358  font-size: 0.6875rem;5359  color: var(--peach-breach);5360}53615362.peach-pairing-error--muted {5363  color: var(--peach-t2);5364}53655366.peach-pairing-spinner {5367  width: 12px;5368  height: 12px;5369  border: 1.5px solid var(--peach-t3);5370  border-top-color: var(--peach-accent);5371  border-radius: 50%;5372  animation: peach-spin 0.8s linear infinite;5373}53745375.peach-pairing-success-icon,5376.peach-pairing-error-icon,5377.peach-pairing-hero {5378  display: inline-flex;5379  align-items: center;5380  justify-content: center;5381}53825383/* Tag chips */5384.peach-tag-chip {5385  display: inline-flex;5386  align-items: center;5387  gap: 4px;5388  padding: 3px 8px;5389  border-radius: 999px;5390  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5391  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5392  color: var(--peach-t0);5393  font-family: "IBM Plex Mono", monospace;5394  font-size: 0.625rem;5395  letter-spacing: 0.04em;5396}53975398.peach-tag-chip-remove {5399  background: transparent;5400  border: none;5401  color: inherit;5402  opacity: 0.6;5403  cursor: pointer;5404  padding: 0;5405  font-size: 0.75rem;5406  line-height: 1;5407}54085409.peach-tag-chip-remove:hover {5410  opacity: 1;5411}54125413/* Tag input */5414.peach-tag-input-wrap {5415  border-bottom: 1px solid var(--peach-t3);5416}54175418.peach-tag-suggestions {5419  display: flex;5420  flex-wrap: wrap;5421  gap: 4px;5422  padding: 6px 0;5423}54245425.peach-tag-suggestion {5426  padding: 2px 8px;5427  border-radius: 999px;5428  border: 1px solid var(--peach-t3);5429  background: var(--peach-s2);5430  color: var(--peach-t1);5431  font-family: "IBM Plex Mono", monospace;5432  font-size: 0.625rem;5433  cursor: pointer;5434  transition: border-color 80ms ease, background 80ms ease;5435}54365437.peach-tag-suggestion:hover {5438  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5439  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5440}54415442/* Identity suggestions — shown below username/email inputs in new-entry form */5443@keyframes peach-suggest-in {5444  from { opacity: 0; transform: translateY(-4px); }5445  to   { opacity: 1; transform: none; }5446}54475448.peach-identity-suggestions {5449  display: flex;5450  flex-direction: column;5451  gap: 1px;5452  margin-top: 4px;5453  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5454}54555456.peach-identity-filter-row {5457  display: flex;5458  align-items: center;5459  gap: 4px;5460  padding: 2px 0 5px;5461}54625463.peach-identity-collapse-btn {5464  margin-left: auto;5465  background: transparent;5466  border: none;5467  cursor: pointer;5468  color: var(--peach-t3);5469  padding: 2px 4px;5470  display: flex;5471  align-items: center;5472  line-height: 0;5473  border-radius: 3px;5474  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5475}54765477.peach-identity-collapse-btn:hover {5478  color: var(--peach-t1);5479}54805481.peach-identity-collapse-btn.is-collapsed {5482  transform: rotate(-90deg);5483}54845485.peach-identity-rows {5486  display: grid;5487  grid-template-rows: 1fr;5488  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5489}54905491.peach-identity-rows.is-collapsed {5492  grid-template-rows: 0fr;5493}54945495.peach-identity-rows-inner {5496  overflow-y: auto;5497  min-height: 0;5498  max-height: 148px;5499  scrollbar-width: thin;5500  scrollbar-color: var(--peach-t3) transparent;5501  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5502  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5503}55045505.peach-identity-rows-inner::-webkit-scrollbar {5506  width: 4px;5507}55085509.peach-identity-rows-inner::-webkit-scrollbar-track {5510  background: transparent;5511}55125513.peach-identity-rows-inner::-webkit-scrollbar-thumb {5514  background: var(--peach-t3);5515  border-radius: 2px;5516}55175518.peach-identity-filter-pill {5519  padding: 2px 7px;5520  border-radius: 999px;5521  border: 1px solid var(--peach-t3);5522  background: transparent;5523  color: var(--peach-t2);5524  font-family: "IBM Plex Mono", monospace;5525  font-size: 0.6rem;5526  cursor: pointer;5527  transition: border-color 80ms, background 80ms, color 80ms;5528}55295530.peach-identity-filter-pill.is-on {5531  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5532  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5533  color: var(--peach-accent);5534}55355536.peach-identity-suggestion {5537  display: flex;5538  align-items: center;5539  gap: 6px;5540  width: 100%;5541  padding: 4px 6px;5542  border-radius: 5px;5543  border: none;5544  background: transparent;5545  cursor: pointer;5546  text-align: left;5547  transition: background 80ms ease;5548}55495550.peach-identity-suggestion:hover,5551.peach-identity-suggestion:focus {5552  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5553  outline: none;5554}55555556.peach-identity-suggestion-value {5557  font-family: "IBM Plex Mono", monospace;5558  font-size: 0.7rem;5559  color: var(--peach-t1);5560  overflow: hidden;5561  text-overflow: ellipsis;5562  white-space: nowrap;5563  flex: 1;5564  min-width: 0;5565}55665567.peach-identity-suggestion-type {5568  font-family: "IBM Plex Mono", monospace;5569  font-size: 0.55rem;5570  font-weight: 600;5571  flex-shrink: 0;5572  padding: 1px 4px;5573  border-radius: 3px;5574}55755576.peach-identity-suggestion-type--email {5577  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5578  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5579}55805581.peach-identity-suggestion-type--username {5582  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5583  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5584}55855586.peach-identity-suggestion-meta {5587  font-family: "IBM Plex Mono", monospace;5588  font-size: 0.6rem;5589  color: var(--peach-t3);5590  flex-shrink: 0;5591}55925593/* Tag filter strip */5594.peach-tag-filter-strip {5595  border-bottom: 1px solid var(--peach-t3);5596  flex-shrink: 0;5597}55985599.peach-tag-filter-chip {5600  display: inline-flex;5601  align-items: center;5602  padding: 4px 10px;5603  border-radius: 999px;5604  border: 1px solid var(--peach-t3);5605  background: transparent;5606  color: var(--peach-t2);5607  font-family: "IBM Plex Mono", monospace;5608  font-size: 0.5625rem;5609  letter-spacing: 0.06em;5610  text-transform: uppercase;5611  cursor: pointer;5612  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5613  white-space: nowrap;5614}56155616.peach-tag-filter-chip:hover {5617  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5618  color: var(--peach-t1);5619}56205621.peach-tag-filter-chip.is-selected {5622  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5623  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5624  color: var(--peach-t0);5625}56265627/* ─────────────────────────────────────────────────────────────────────────5628   v1.4.12 additions5629   ─────────────────────────────────────────────────────────────────────── */56305631/* Sort bar */5632.peach-sort-bar {5633  display: flex;5634  align-items: center;5635  gap: 4px;5636  padding: 5px 12px;5637  border-bottom: 1px solid var(--peach-t3);5638  flex-shrink: 0;5639  overflow-x: auto;5640  scrollbar-width: none;5641}56425643.peach-sort-btn {5644  padding: 2px 9px;5645  border-radius: 999px;5646  border: 1px solid transparent;5647  background: transparent;5648  color: var(--peach-t2);5649  font-family: "IBM Plex Mono", monospace;5650  font-size: 0.5625rem;5651  letter-spacing: 0.07em;5652  text-transform: uppercase;5653  cursor: pointer;5654  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5655  white-space: nowrap;5656}56575658.peach-sort-btn:hover {5659  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5660  color: var(--peach-t1);5661}56625663.peach-sort-btn.is-active {5664  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5665  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5666  color: var(--peach-t0);5667}56685669.peach-sort-scope-btn {5670  padding-inline: 8px;5671  font-size: 0.53125rem;5672  letter-spacing: 0.05em;5673}56745675.peach-sort-domain-hint {5676  margin-left: auto;5677  font-family: "IBM Plex Mono", monospace;5678  font-size: 0.5625rem;5679  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5680  white-space: nowrap;5681  overflow: hidden;5682  text-overflow: ellipsis;5683  max-width: 110px;5684}56855686/* Tab-match badge on entry rows */5687.peach-tab-match-badge {5688  display: inline-block;5689  width: 6px;5690  height: 6px;5691  border-radius: 50%;5692  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5693  margin-left: 5px;5694  vertical-align: middle;5695  flex-shrink: 0;5696  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5697}56985699.peach-entry-row.is-tab-match {5700  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5701  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5702}57035704.peach-entry-row.is-tab-match:hover {5705  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5706}57075708/* Entry list stagger entrance */5709@keyframes peach-entry-fadein {5710  from { opacity: 0; transform: translateY(4px); }5711  to   { opacity: 1; transform: translateY(0); }5712}57135714.peach-vault-list .peach-entry-row {5715  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5716}57175718/* Button press micro-interaction */5719.peach-btn:active {5720  transform: scale(0.95);5721  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5722}57235724.peach-sort-btn:active,5725.peach-tag-filter-chip:active {5726  transform: scale(0.93);5727  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5728}57295730/* Password strength bar (Lock view + shared) */5731.peach-password-strength {5732  display: flex;5733  align-items: center;5734  gap: 8px;5735  margin-top: 6px;5736}57375738.peach-strength-bar {5739  flex: 1;5740  height: 3px;5741  border-radius: 2px;5742  background: var(--peach-t3);5743  overflow: hidden;5744}57455746.peach-strength-fill {5747  height: 100%;5748  border-radius: 2px;5749  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5750              background 300ms ease;5751}57525753.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5754.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5755.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5756.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }57575758.peach-strength-label {5759  font-family: "IBM Plex Mono", monospace;5760  font-style: italic;5761  font-size: 0.5625rem;5762  font-weight: 300;5763  letter-spacing: 0.06em;5764  color: var(--peach-t2);5765  min-width: 36px;5766  text-align: right;5767}57685769.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5770.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5771.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5772.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }57735774/* Duress form */5775.peach-duress-status {5776  padding: 2px 8px;5777  border-radius: 999px;5778  border: 1px solid var(--peach-t3);5779  font-family: "IBM Plex Mono", monospace;5780  font-size: 0.5625rem;5781  letter-spacing: 0.07em;5782  text-transform: uppercase;5783  color: var(--peach-t2);5784  flex-shrink: 0;5785}57865787.peach-duress-status.is-active {5788  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5789  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5790  color: var(--peach-t0);5791}57925793.peach-duress-form {5794  padding: 8px 0 4px;5795  display: flex;5796  flex-direction: column;5797  gap: 6px;5798}57995800.peach-duress-form .peach-label {5801  margin-top: 4px;5802}58035804.peach-duress-actions {5805  display: flex;5806  gap: 6px;5807  align-items: center;5808  margin-top: 4px;5809}58105811.peach-duress-actions .peach-btn:first-child {5812  margin-right: auto;5813}58145815/* Improved overlay spring entrance */5816.peach-overlay-view.ov-enter-up {5817  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5818}58195820@keyframes ov-enter-up-spring {5821  from { opacity: 0; transform: translateY(16px) scale(0.98); }5822  to   { opacity: 1; transform: translateY(0) scale(1); }5823}58245825.peach-overlay-view.ov-enter-right {5826  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5827}58285829@keyframes ov-enter-right-spring {5830  from { opacity: 0; transform: translateX(18px) scale(0.98); }5831  to   { opacity: 1; transform: translateX(0) scale(1); }5832}58335834/* ── Onboarding-mode restore screens (file import) ── */5835/* Used when MainImportView renders during onboarding (no vault yet).5836   Animates like a lock-screen transition. */5837.peach-lock-view {5838  position: absolute;5839  inset: 0;5840  display: flex;5841  flex-direction: column;5842  background:5843    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5844    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5845    var(--peach-bg);5846  z-index: 2;5847  overflow: hidden;5848  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5849}58505851.peach-lock-view-header {5852  display: flex;5853  align-items: center;5854  justify-content: space-between;5855  padding: 16px 18px 12px;5856  flex-shrink: 0;5857}58585859/* ───────── Settings: auto-lock select ───────── */5860.peach-settings-select {5861  font-family: "IBM Plex Mono", monospace;5862  font-size: 0.6875rem;5863  background: transparent;5864  border: 1px solid var(--peach-t3);5865  border-radius: 4px;5866  color: var(--peach-t1);5867  padding: 3px 6px;5868  cursor: pointer;5869  outline: none;5870}5871.peach-settings-select:focus {5872  border-color: var(--peach-accent);5873}58745875/* ───────── Duress status pill (new polished) ───────── */5876.peach-duress-status-pill {5877  font-family: "IBM Plex Mono", monospace;5878  font-size: 0.5625rem;5879  text-transform: uppercase;5880  letter-spacing: 0.12em;5881  padding: 2px 8px;5882  border-radius: 12px;5883  background: var(--peach-t3);5884  color: var(--peach-t2);5885  flex-shrink: 0;5886}5887.peach-duress-status-pill.is-active {5888  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5889  color: var(--peach-accent);5890}58915892/* ───────── Entry advanced disclosure (canary) ───────── */5893.peach-entry-advanced {5894  margin-top: 12px;5895  border-top: 1px solid var(--peach-t3);5896  padding-top: 10px;5897  position: relative;5898  z-index: 1;5899}5900.peach-entry-advanced-toggle {5901  display: flex;5902  align-items: center;5903  justify-content: space-between;5904  width: 100%;5905  background: transparent;5906  border: none;5907  cursor: pointer;5908  padding: 0;5909  color: var(--peach-t2);5910}5911.peach-canary-section {5912  margin-top: 10px;5913  display: grid;5914  gap: 6px;5915}59165917/* ───────── Import: merge/replace radio choices ───────── */5918.peach-import-choice {5919  display: flex;5920  align-items: flex-start;5921  gap: 10px;5922  padding: 8px 10px;5923  border: 1px solid var(--peach-t3);5924  border-radius: 10px;5925  cursor: pointer;5926  margin-bottom: 6px;5927  transition: border-color 120ms ease, background 120ms ease;5928}5929.peach-import-choice:hover {5930  border-color: var(--peach-accent);5931}5932.peach-import-choice input[type="radio"] {5933  margin-top: 3px;5934  accent-color: var(--peach-accent);5935  flex-shrink: 0;5936}5937.peach-import-choice-main {5938  display: flex;5939  flex-direction: column;5940  gap: 2px;5941  min-width: 0;5942}5943.peach-import-choice-label {5944  font-size: 0.75rem;5945  color: var(--peach-t0);5946}5947.peach-import-choice-sub {5948  font-size: 0.6875rem;5949  color: var(--peach-t2);5950  line-height: 1.5;5951}59525953/* ───────── Export: success confirmation strip ───────── */5954.peach-export-success {5955  display: flex;5956  align-items: flex-start;5957  gap: 10px;5958  padding: 12px;5959  border-radius: 12px;5960  border: 1px solid rgba(150, 175, 110, 0.3);5961  background: rgba(150, 175, 110, 0.08);5962  color: var(--peach-t0);5963  font-size: 0.75rem;5964  line-height: 1.55;5965}5966.peach-export-success-check {5967  color: rgba(150, 175, 110, 0.9);5968  font-size: 0.875rem;5969  flex-shrink: 0;5970}59715972/* ── Trash view ──────────────────────────────────────────────────────── */5973.peach-trash-entry-row {5974  display: flex;5975  align-items: center;5976  justify-content: space-between;5977  gap: 8px;5978  padding: 8px 0;5979  border-bottom: 1px solid var(--peach-border);5980}5981.peach-trash-entry-info {5982  flex: 1;5983  min-width: 0;5984  display: flex;5985  flex-direction: column;5986  gap: 2px;5987}5988.peach-trash-entry-title {5989  font-size: 0.8125rem;5990  color: var(--peach-t0);5991  overflow: hidden;5992  text-overflow: ellipsis;5993  white-space: nowrap;5994}5995.peach-trash-entry-meta {5996  font-family: var(--font-mono);5997  font-size: 0.5625rem;5998  color: var(--peach-t2);5999  letter-spacing: 0.04em;6000}6001.peach-trash-entry-actions {6002  display: flex;6003  align-items: center;6004  gap: 4px;6005  flex-shrink: 0;6006}6007.peach-trash-delete-btn {6008  background: transparent;6009  border: 0;6010  color: var(--peach-t3);6011  font-size: 1rem;6012  line-height: 1;6013  cursor: pointer;6014  padding: 2px 5px;6015  transition: color 0.15s;6016}6017.peach-trash-delete-btn:hover { color: var(--peach-breach); }6018.peach-trash-list {6019  overflow-y: auto;6020}6021.peach-trash-footer {6022  display: flex;6023  align-items: center;6024  gap: 8px;6025  padding: 8px 0 0;6026  border-top: 1px solid var(--peach-border);6027  margin-top: 4px;6028}6029.peach-trash-purge-all {6030  background: transparent;6031  border: 0;6032  color: var(--peach-t3);6033  font-size: 0.625rem;6034  cursor: pointer;6035  padding: 4px 0;6036  letter-spacing: 0.03em;6037  transition: color 0.2s;6038}6039.peach-trash-purge-all:hover { color: var(--peach-breach); }6040.peach-trash-purge-confirm-label {6041  font-size: 0.625rem;6042  color: var(--peach-t1);6043  flex: 1;6044}60456046/* ── Settings shortcuts grid ─────────────────────────────────────────── */6047.peach-shortcuts-grid {6048  display: grid;6049  grid-template-columns: auto 1fr;6050  gap: 6px 12px;6051  align-items: center;6052  padding: 4px 0;6053}6054.peach-shortcut-key {6055  font-family: var(--font-mono);6056  font-size: 0.625rem;6057  color: var(--peach-t0);6058  background: var(--peach-t3);6059  border-radius: 4px;6060  padding: 2px 6px;6061  white-space: nowrap;6062  text-align: center;6063}6064.peach-shortcut-desc {6065  font-size: 0.6875rem;6066  color: var(--peach-t1);6067}60686069/* ── Sort bar trash button ───────────────────────────────────────────── */6070.peach-sort-trash-btn {6071  display: flex;6072  align-items: center;6073  justify-content: center;6074  padding: 3px 5px;6075  background: transparent;6076  border: none;6077  cursor: pointer;6078  color: var(--peach-t2);6079  border-radius: 4px;6080  transition: color 140ms ease, background 140ms ease;6081}6082.peach-sort-trash-btn:hover {6083  color: var(--peach-t1);6084  background: var(--peach-t3);6085}6086.peach-sort-trash-btn.is-active {6087  color: var(--peach-accent);6088}60896090/* Accent color picker */6091.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }6092.peach-accent-picker {6093  display: flex;6094  flex-wrap: wrap;6095  gap: 7px;6096  padding: 2px 0;6097}6098.peach-accent-swatch {6099  width: 22px;6100  height: 22px;6101  border-radius: 50%;6102  border: 2px solid transparent;6103  cursor: pointer;6104  padding: 0;6105  transition: transform 100ms;6106  outline-offset: 2px;6107}6108.peach-accent-swatch:hover { transform: scale(1.15); }6109.peach-accent-swatch.is-active {6110  border-color: var(--peach-t0);6111  transform: scale(1.1);6112}61136114.peach-pill-group {6115  display: flex;6116  gap: 6px;6117}6118.peach-pill-group .peach-btn.is-active {6119  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);6120  border-color: var(--peach-accent);6121  color: var(--peach-t0);6122}61236124/* ── Card entry styles ───────────────────────────────────────── */6125.peach-card-number {6126  font-family: var(--peach-mono);6127  letter-spacing: 0.08em;6128}61296130.peach-card-network-badge {6131  font-size: 0.625rem;6132  padding: 1px 5px;6133  border-radius: 4px;6134  border: 0.5px solid var(--peach-border);6135  color: var(--peach-text-dim);6136  margin-left: 6px;6137  vertical-align: middle;6138}61396140.peach-card-expiry-row {6141  display: flex;6142  align-items: center;6143  gap: 8px;6144}61456146.peach-card-expiry-sep {6147  color: var(--peach-text-dim);6148}61496150/* ── Pro tier — upgrade screen ──────────────────────────────── */6151.peach-pro-mark {6152  font-size: 0.5625rem;6153  color: var(--peach-accent);6154  margin-left: 6px;6155  vertical-align: super;6156  opacity: 0.7;6157}61586159.peach-pro-mini-badge {6160  display: block;6161  font-size: 0.625rem;6162  font-style: italic;6163  color: var(--peach-accent);6164  letter-spacing: 0.04em;6165  margin-top: -2px;6166  padding-left: 2px;6167  opacity: 0.85;6168  text-align: center;6169}61706171.peach-wordmark-stack {6172  display: inline-flex;6173  flex-direction: column;6174  align-items: center;6175}61766177/* ── Pro tier — upgrade page ─────────────────────────────────── */6178/* ── Pro upgrade — redesigned editorial layout ─────────────────── */61796180.peach-pro-upgrade {6181  display: flex;6182  flex-direction: column;6183  align-items: stretch;6184  gap: 10px;6185  padding: 2px 2px 12px;6186}61876188.peach-pro-eyebrow {6189  margin: 0;6190  font-family: var(--font-ui);6191  font-size: 0.625rem;6192  font-weight: 500;6193  letter-spacing: 0.12em;6194  color: var(--peach-accent);6195}61966197.peach-pro-headline {6198  margin: 0;6199  font-family: var(--font-display, "Cormorant Garamond", serif);6200  font-size: 30px;6201  font-weight: 700;6202  font-style: normal;6203  line-height: 1.05;6204  color: var(--peach-t0);6205  letter-spacing: -0.01em;6206}6207.peach-pro-headline em {6208  font-style: italic;6209  font-weight: 400;6210  color: var(--peach-accent);6211}62126213.peach-pro-subtitle {6214  margin: 0;6215  font-size: 0.6875rem;6216  line-height: 1.5;6217  color: var(--peach-t1);6218}62196220/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6221.peach-pro-section-label {6222  margin: 6px 0 0;6223  font-family: var(--font-ui);6224  font-size: 0.5625rem;6225  font-weight: 500;6226  letter-spacing: 0.12em;6227  text-transform: uppercase;6228  color: var(--peach-t2);6229}62306231/* 2-column numbered feature grid */6232.peach-pro-grid {6233  display: grid;6234  grid-template-columns: 1fr 1fr;6235  border-top: 1px solid var(--peach-border);6236  border-left: 1px solid var(--peach-border);6237}62386239.peach-pro-grid-item {6240  display: flex;6241  flex-direction: column;6242  gap: 2px;6243  padding: 8px 9px;6244  border-right: 1px solid var(--peach-border);6245  border-bottom: 1px solid var(--peach-border);6246}62476248.peach-pro-grid-item--wide {6249  grid-column: 1 / -1;6250}62516252.peach-pro-grid-num {6253  font-family: var(--font-mono);6254  font-size: 0.5625rem;6255  color: var(--peach-accent);6256  letter-spacing: 0.06em;6257  opacity: 0.85;6258}62596260.peach-pro-grid-name {6261  font-size: 0.8125rem;6262  font-weight: 500;6263  color: var(--peach-t0);6264  line-height: 1.2;6265}62666267.peach-pro-grid-desc {6268  font-size: 0.625rem;6269  color: var(--peach-t1);6270  line-height: 1.4;6271}62726273.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6274  animation: peach-pulse-accent 600ms ease-out forwards;6275}62766277@keyframes peach-pulse-accent {6278  0%   { opacity: 1; transform: scale(1.2); }6279  100% { opacity: 0.85; transform: scale(1); }6280}62816282/* Actions */6283.peach-pro-upgrade-actions {6284  display: flex;6285  flex-direction: column;6286  align-items: stretch;6287  gap: 10px;6288}62896290.peach-pro-pricing {6291  margin: 0;6292  font-size: 1rem;6293  font-weight: 600;6294  color: var(--peach-t0);6295  letter-spacing: 0.01em;6296}6297.peach-pro-pricing-sub {6298  font-size: 0.75rem;6299  font-weight: 400;6300  color: var(--peach-t1);6301  letter-spacing: 0.02em;6302}63036304.peach-pro-upgrade-cta {6305  display: flex;6306  align-items: center;6307  justify-content: center;6308  text-decoration: none;6309  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6310  border: 1px solid var(--peach-accent);6311  border-radius: 10px;6312  color: var(--peach-accent);6313  font-family: var(--font-ui);6314  font-size: 0.8125rem;6315  font-weight: 600;6316  letter-spacing: 0.06em;6317  padding: 11px 16px;6318  transition: background 0.15s ease, color 0.15s ease;6319}6320.peach-pro-upgrade-cta:hover {6321  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6322}63236324.peach-pro-key-divider {6325  display: flex;6326  align-items: center;6327  gap: 8px;6328  color: var(--peach-t2);6329  font-size: 0.5625rem;6330  letter-spacing: 0.1em;6331}6332.peach-pro-key-divider::before,6333.peach-pro-key-divider::after {6334  content: "";6335  flex: 1;6336  height: 1px;6337  background: var(--peach-border);6338}63396340/* Inline key entry row */6341.peach-pro-key-inline {6342  display: flex;6343  align-items: center;6344  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6345  border: 1px solid var(--peach-border);6346  border-radius: 8px;6347  overflow: hidden;6348}6349.peach-pro-key-inline-input {6350  flex: 1;6351  background: transparent;6352  border: none;6353  outline: none;6354  color: var(--peach-t1);6355  font-family: var(--font-mono);6356  font-size: 0.625rem;6357  letter-spacing: 0.06em;6358  padding: 9px 10px;6359}6360.peach-pro-key-inline-input::placeholder {6361  color: var(--peach-t2);6362}6363.peach-pro-key-apply {6364  background: transparent;6365  border: none;6366  border-left: 1px solid var(--peach-border);6367  color: var(--peach-t2);6368  font-family: var(--font-ui);6369  font-size: 0.5625rem;6370  font-weight: 600;6371  letter-spacing: 0.08em;6372  padding: 9px 10px;6373  cursor: pointer;6374  transition: color 0.15s ease;6375  flex-shrink: 0;6376}6377.peach-pro-key-apply:not(:disabled):hover {6378  color: var(--peach-accent);6379}6380.peach-pro-key-apply:disabled {6381  opacity: 0.35;6382  cursor: not-allowed;6383}63846385/* ── Pro tier — key ceremony ─────────────────────────────────── */6386.peach-pro-key-ceremony {6387  display: flex;6388  flex-direction: column;6389  align-items: center;6390  gap: 12px;6391  padding: 20px 4px 16px;6392}63936394.peach-pro-key-ceremony .peach-lock-rune-string {6395  font-size: 1rem;6396  gap: 12px;6397  flex: 0;6398  justify-content: center;6399}64006401.peach-pro-key-ceremony-label {6402  margin: 0;6403  font-size: 0.6875rem;6404  color: var(--peach-t2);6405  font-style: italic;6406  letter-spacing: 0.04em;6407}64086409.peach-pro-key-input {6410  font-family: var(--font-mono, monospace);6411  letter-spacing: 0.06em;6412  text-align: center;6413  width: 100%;6414  box-sizing: border-box;6415}64166417.peach-pro-key-error {6418  margin: 0;6419  font-size: 0.75rem;6420  text-align: center;6421  color: var(--peach-breach, #e55);6422  padding: 0;6423}64246425.peach-pro-key-activate {6426  width: 100%;6427  text-align: center;6428  box-sizing: border-box;6429  padding: 10px 20px;6430  font-size: 0.8125rem;6431}64326433.peach-pro-key-cancel {6434  background: transparent;6435  border: 0;6436  color: var(--peach-t2);6437  font-size: 0.6875rem;6438  cursor: pointer;6439  padding: 2px 8px;6440  transition: color 0.2s;6441}64426443.peach-pro-key-cancel:hover { color: var(--peach-accent); }64446445/* ── Pro tier — active state ─────────────────────────────────── */6446.peach-pro-active {6447  display: flex;6448  flex-direction: column;6449  align-items: center;6450  gap: 0;6451  padding: 8px 4px 16px;6452  min-height: 280px;6453}64546455.peach-pro-active-hero {6456  display: flex;6457  flex-direction: column;6458  align-items: center;6459  gap: 6px;6460  padding: 20px 0 8px;6461}64626463.peach-pro-active-mark-wrap {6464  display: flex;6465  align-items: center;6466  justify-content: center;6467  margin-bottom: 4px;6468}64696470.peach-pro-active-mark {6471  width: 60px;6472  height: 60px;6473}64746475.peach-pro-active-title {6476  font-family: var(--font-display, var(--font-ui));6477  font-size: 26px;6478  margin: 0;6479  color: var(--peach-t0);6480  letter-spacing: 0.01em;6481}64826483.peach-pro-active-since {6484  margin: 0;6485  font-size: 0.6875rem;6486  color: var(--peach-t2);6487  font-style: italic;6488}64896490.peach-pro-active-features {6491  display: flex;6492  flex-direction: column;6493  gap: 8px;6494  width: 100%;6495  padding: 14px 8px 0;6496  border-top: 1px solid var(--peach-border);6497  flex: 1;6498}64996500.peach-pro-active-feature {6501  display: flex;6502  align-items: center;6503  gap: 9px;6504}65056506.peach-pro-active-feature-mark {6507  color: var(--peach-accent);6508  font-size: 0.625rem;6509  opacity: 0.65;6510  flex-shrink: 0;6511}65126513.peach-pro-active-feature-name {6514  font-size: 0.75rem;6515  color: var(--peach-t1);6516}65176518.peach-pro-deactivate {6519  align-self: center;6520  background: transparent;6521  border: 0;6522  color: var(--peach-t3);6523  font-size: 0.625rem;6524  cursor: pointer;6525  padding: 8px 0 0;6526  margin-top: 16px;6527  letter-spacing: 0.03em;6528  transition: color 0.2s;6529}65306531.peach-pro-deactivate:hover { color: var(--peach-t2); }65326533.peach-pro-deactivate:disabled {6534  opacity: 0.5;6535  cursor: default;6536}65376538/* ── Pro card activation sparkles & thank-you ── */6539button.peach-pro-active-mark-wrap {6540  background: transparent;6541  border: 0;6542  padding: 0;6543  cursor: pointer;6544  position: relative;6545  overflow: visible;6546}65476548.peach-pro-sparks {6549  position: absolute;6550  inset: 0;6551  pointer-events: none;6552  overflow: visible;6553}65546555.peach-pro-spark {6556  position: absolute;6557  top: 50%;6558  left: 50%;6559  font-size: 9px;6560  line-height: 1;6561  opacity: 0;6562  transform: translate(-50%, -50%);6563  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;6564}65656566@keyframes peach-pro-spark-fly {6567  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }6568  25%  { opacity: 1; }6569  100% {6570    opacity: 0;6571    transform: translate(6572      calc(-50% + var(--spark-x, 0px)),6573      calc(-50% + var(--spark-y, -40px))6574    ) scale(0.8);6575  }6576}65776578.peach-pro-thankyou-text {6579  margin: 4px 0 0;6580  font-size: 0.6875rem;6581  font-style: italic;6582  color: currentColor;6583  opacity: 0;6584  animation: peach-pro-thankyou-flash 2.5s ease both;6585}65866587@keyframes peach-pro-thankyou-flash {6588  0%   { opacity: 0; transform: translateY(4px); }6589  15%  { opacity: 0.75; transform: translateY(0); }6590  75%  { opacity: 0.75; }6591  100% { opacity: 0; }6592}65936594/* ── Pro advanced health remediation queue ──────────────────── */6595.peach-health-pro-queue {6596  display: flex;6597  flex-direction: column;6598  gap: 10px;6599  padding: 12px;6600  margin: 0 0 12px;6601  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6602  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6603  border-radius: 10px;6604}66056606.peach-health-pro-queue-head {6607  display: flex;6608  justify-content: space-between;6609  align-items: baseline;6610}66116612.peach-health-pro-queue-title {6613  font-size: 0.75rem;6614  font-weight: 500;6615  letter-spacing: 0.04em;6616  text-transform: uppercase;6617  color: var(--peach-accent);6618}66196620.peach-health-pro-queue-score {6621  font-size: 0.6875rem;6622  color: var(--peach-t2);6623}66246625.peach-health-pro-row {6626  display: flex;6627  gap: 10px;6628  align-items: center;6629  padding: 8px 0;6630  border-top: 1px solid var(--peach-border);6631}66326633.peach-health-pro-row-info {6634  flex: 1;6635  display: flex;6636  flex-direction: column;6637  gap: 4px;6638  min-width: 0;6639}66406641.peach-health-pro-action {6642  flex: 0 0 auto;6643  padding: 4px 8px;6644  font-size: 0.5625rem;6645  letter-spacing: 0.08em;6646  text-transform: uppercase;6647}66486649.peach-health-pro-row-name {6650  font-size: 0.8125rem;6651  color: var(--peach-t0);6652  overflow: hidden;6653  text-overflow: ellipsis;6654  white-space: nowrap;6655}66566657.peach-health-pro-row-meta {6658  font-size: 0.6875rem;6659  color: var(--peach-t2);6660}66616662.peach-health-pro-bar {6663  height: 2px;6664  background: var(--peach-border);6665  border-radius: 2px;6666  overflow: hidden;6667  margin-top: 2px;6668}66696670.peach-health-pro-bar-fill {6671  height: 100%;6672  background: var(--peach-accent);6673  transition: width 200ms ease-out;6674}66756676/* ── Pro activation celebration ── */6677@keyframes peach-pro-bloom {6678  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6679  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6680                 drop-shadow(0 0 48px var(--peach-glow)); }6681  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6682}66836684@keyframes peach-pro-wordmark-in {6685  from { opacity: 0; transform: translateY(4px); }6686  to   { opacity: 1; transform: translateY(0); }6687}66886689@keyframes peach-pro-fade-out {6690  from { opacity: 1; }6691  to   { opacity: 0; }6692}66936694.peach-pro-celebration {6695  background:6696    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6697    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6698    var(--peach-bg);6699  border: 1px solid var(--peach-t3);6700  box-shadow:6701    0 2px 8px rgba(0,0,0,0.55),6702    0 14px 48px rgba(0,0,0,0.7),6703    0 0 0 1px rgba(240,232,216,0.04);6704  overflow: hidden;6705  width: 320px;6706  height: 520px;6707  display: flex;6708  flex-direction: column;6709  align-items: center;6710  justify-content: center;6711  gap: 8px;6712  padding: 32px 24px;6713  text-align: center;6714}67156716.peach-pro-celebration.is-leaving {6717  animation: peach-pro-fade-out 400ms ease forwards;6718}67196720.peach-pro-bloom-target {6721  display: flex;6722  align-items: center;6723  justify-content: center;6724  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6725  margin-bottom: 12px;6726}67276728.peach-pro-bloom-icon {6729  width: 48px;6730  height: 48px;6731}67326733.peach-pro-wordmark {6734  font-family: var(--font-display);6735  font-size: 22px;6736  font-style: italic;6737  font-weight: 400;6738  color: var(--peach-accent);6739  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6740}67416742.peach-pro-thankyou {6743  font-size: 0.75rem;6744  font-style: italic;6745  color: var(--peach-t2);6746  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6747}674867496750/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6751.peach-pro-notice-banner {6752  display: flex;6753  align-items: center;6754  gap: 8px;6755  padding: 7px 12px;6756  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6757  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6758  font-size: 0.6875rem;6759  color: var(--peach-t2);6760  font-family: "IBM Plex Mono", monospace;6761  flex-shrink: 0;6762}67636764.peach-pro-notice-link {6765  background: none;6766  border: none;6767  padding: 0;6768  cursor: pointer;6769  font-size: 0.6875rem;6770  color: var(--peach-accent);6771  font-family: "IBM Plex Mono", monospace;6772  margin-left: auto;6773  white-space: nowrap;6774}67756776.peach-pro-notice-close {6777  background: none;6778  border: none;6779  padding: 0 0 0 4px;6780  cursor: pointer;6781  font-size: 0.625rem;6782  color: var(--peach-t3);6783  line-height: 1;6784}67856786/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6787   Renders over whatever view is showing. 60-second expiry; the popup ticks6788   the countdown each second and clears the banner when it hits zero. */6789.peach-pair-request-banner {6790  display: flex;6791  flex-direction: column;6792  gap: 8px;6793  padding: 10px 12px;6794  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6795  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6796  font-family: "IBM Plex Mono", monospace;6797  flex-shrink: 0;6798}67996800.peach-pair-toast {6801  padding: 8px 12px;6802  font-family: "IBM Plex Mono", monospace;6803  font-size: 0.75rem;6804  color: var(--peach-t1);6805  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6806  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6807  flex-shrink: 0;6808  text-align: center;6809}68106811.peach-pair-toast strong {6812  color: var(--peach-t0);6813  font-weight: 500;6814}68156816.peach-pair-request-header {6817  display: flex;6818  align-items: center;6819  gap: 8px;6820  font-size: 0.75rem;6821  color: var(--peach-t1);6822}68236824.peach-pair-request-mark {6825  font-size: 0.875rem;6826  display: inline-flex;6827  align-items: center;6828}68296830.peach-pair-request-icon {6831  width: 1em;6832  height: 1em;6833}68346835.peach-pair-request-title {6836  font-weight: 600;6837  color: var(--peach-t0);6838}68396840.peach-pair-request-countdown {6841  margin-left: auto;6842  font-variant-numeric: tabular-nums;6843  color: var(--peach-t2);6844  font-size: 0.6875rem;6845}68466847.peach-pair-request-body {6848  margin: 0;6849  font-size: 0.75rem;6850  color: var(--peach-t1);6851  line-height: 1.4;6852}68536854.peach-pair-request-body strong {6855  color: var(--peach-t0);6856  font-weight: 600;6857}68586859.peach-pair-request-actions {6860  display: flex;6861  gap: 8px;6862  justify-content: flex-end;6863}68646865/* ─── First-run onboarding ──────────────────────────────────────────────6866   Three-card welcome shown once before vault creation. The PeachScript6867   rune background drifts behind everything at very low opacity — it's6868   atmosphere, not focus. The cards themselves use the same panel6869   language as the rest of the popup so the transition into NewVault is6870   continuous, not a jarring switch of visual register. */68716872.peach-onboarding {6873  position: relative;6874  display: flex;6875  flex-direction: column;6876  width: 100%;6877  height: 100%;6878  padding: 16px 16px 18px;6879  box-sizing: border-box;6880  overflow: hidden;6881  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6882}68836884.peach-onboarding.is-completing {6885  animation: peach-onboard-exit 200ms ease-out forwards;6886}68876888.peach-rune-background {6889  position: absolute;6890  inset: 0;6891  width: 100%;6892  height: 100%;6893  pointer-events: none;6894  z-index: 0;6895  transition: opacity 500ms ease-out;6896}68976898.peach-onboarding.is-completing .peach-rune-background {6899  opacity: 0;6900}69016902.peach-onboarding-header {6903  position: relative;6904  z-index: 1;6905  display: flex;6906  align-items: center;6907  margin-bottom: 14px;6908}69096910.peach-onboarding-card {6911  position: relative;6912  z-index: 1;6913  flex: 1;6914  display: flex;6915  flex-direction: column;6916  gap: 10px;6917  padding: 22px 20px;6918  border-radius: 16px;6919  border: 1px solid var(--peach-t3);6920  background:6921    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6922  backdrop-filter: blur(3px);6923  -webkit-backdrop-filter: blur(3px);6924  box-shadow:6925    inset 0 1px 0 rgba(240, 232, 216, 0.04),6926    0 12px 28px rgba(0, 0, 0, 0.12);6927  cursor: pointer;6928  user-select: none;6929  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6930}69316932.peach-onboarding-card.is-exiting {6933  animation: peach-card-out 120ms ease-in forwards;6934  pointer-events: none;6935}69366937.peach-onboarding-card-headline {6938  margin: 0;6939  font-family: var(--font-display);6940  font-style: italic;6941  font-weight: 400;6942  font-size: 22px;6943  line-height: 1.05;6944  color: var(--peach-t0);6945  white-space: pre-line;6946}69476948.peach-onboarding-divider {6949  margin: 4px 0 6px;6950  border: 0;6951  border-top: 1px solid var(--peach-t3);6952  width: 100%;6953}69546955.peach-onboarding-body {6956  margin: 0;6957  font-size: 0.8125rem;6958  line-height: 1.6;6959  color: var(--peach-t1);6960}69616962.peach-onboarding-warning {6963  display: flex;6964  align-items: flex-start;6965  gap: 8px;6966  margin: 6px 0 0;6967  padding-top: 8px;6968  border-top: 1px dashed var(--peach-t3);6969  font-size: 0.8125rem;6970  line-height: 1.5;6971  color: var(--peach-t1);6972}69736974.peach-onboarding-warning-icon {6975  color: var(--peach-accent);6976  font-size: 0.8125rem;6977  line-height: 1.5;6978  flex: 0 0 auto;6979}69806981.peach-onboarding-nav {6982  position: relative;6983  z-index: 1;6984  display: flex;6985  align-items: center;6986  justify-content: space-between;6987  margin-top: 12px;6988  padding: 0 4px;6989}69906991.peach-onboarding-dots {6992  display: flex;6993  align-items: center;6994  gap: 6px;6995}69966997.peach-onboarding-dot {6998  width: 6px;6999  height: 6px;7000  border-radius: 50%;7001  background: var(--peach-t2);7002  transition: width 200ms ease, height 200ms ease, background 200ms ease;7003}70047005.peach-onboarding-dot.is-active {7006  width: 8px;7007  height: 8px;7008  background: var(--peach-accent);7009}70107011.peach-onboarding-next {7012  background: none;7013  border: none;7014  padding: 4px 0;7015  cursor: pointer;7016  font-family: "IBM Plex Mono", monospace;7017  font-size: 0.6875rem;7018  letter-spacing: 0.04em;7019  color: var(--peach-t1);7020  transition: color 150ms ease;7021}70227023.peach-onboarding-next:hover {7024  color: var(--peach-t0);7025}70267027.peach-onboarding-next:disabled {7028  opacity: 0.5;7029  cursor: default;7030}70317032.peach-onboarding-back {7033  background: none;7034  border: none;7035  padding: 4px 0;7036  cursor: pointer;7037  font-family: "IBM Plex Mono", monospace;7038  font-size: 0.6875rem;7039  letter-spacing: 0.04em;7040  color: var(--peach-t2);7041  transition: color 150ms ease;7042}70437044.peach-onboarding-back:hover {7045  color: var(--peach-t0);7046}70477048.peach-onboarding-back:disabled {7049  opacity: 0.5;7050  cursor: default;7051}70527053/* Reserve back-button width on the first card so the dots stay centred */7054.peach-onboarding-back-spacer {7055  width: 44px;7056}70577058.peach-onboarding-choice-row {7059  display: grid;7060  grid-template-columns: 1fr;7061  gap: 8px;7062  margin-top: 14px;7063}70647065.peach-onboarding-choice {7066  min-height: 34px;7067  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);7068  border-radius: 8px;7069  padding: 8px 10px;7070  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);7071  color: var(--peach-t0);7072  font-size: 0.76rem;7073  font-weight: 700;7074  text-align: left;7075}70767077.peach-onboarding-choice--adopt {7078  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);7079  background: color-mix(in srgb, var(--peach-accent) 13%, transparent);7080}70817082.peach-adopt-vault {7083  position: relative;7084  min-height: 100%;7085  padding: 22px;7086  display: grid;7087  place-items: center;7088}70897090.peach-adopt-card {7091  position: relative;7092  z-index: 1;7093  width: min(100%, 330px);7094  padding: 20px;7095  border-radius: 8px;7096  border: 1px solid color-mix(in srgb, var(--peach-t0) 13%, transparent);7097  background: color-mix(in srgb, var(--peach-surface) 90%, transparent);7098  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);7099}71007101.peach-adopt-card h1 {7102  margin: 0 0 10px;7103  font-size: 1.28rem;7104  line-height: 1.15;7105}71067107.peach-adopt-card p {7108  margin: 0 0 14px;7109  color: var(--peach-t1);7110  line-height: 1.35;7111}71127113.peach-adopt-input {7114  margin-bottom: 12px;7115}71167117.peach-adopt-actions {7118  display: flex;7119  gap: 10px;7120  margin-top: 14px;7121}71227123.peach-adopt-actions > button {7124  flex: 1;7125}71267127.peach-adopt-birds {7128  width: 120px;7129  height: 54px;7130  margin-bottom: 14px;7131  position: relative;7132}71337134.peach-adopt-birds::before {7135  content: "";7136  position: absolute;7137  left: 29px;7138  right: 29px;7139  top: 25px;7140  height: 1px;7141  background: color-mix(in srgb, var(--peach-accent) 50%, transparent);7142}71437144.peach-adopt-birds span {7145  position: absolute;7146  top: 11px;7147  width: 34px;7148  height: 28px;7149  border-radius: 50% 50% 46% 46%;7150  background: color-mix(in srgb, var(--peach-accent) 45%, var(--peach-t0));7151  box-shadow: 0 0 18px color-mix(in srgb, var(--peach-accent) 24%, transparent);7152  animation: peach-adopt-bob 1.8s ease-in-out infinite;7153}71547155.peach-adopt-birds span:first-child {7156  left: 12px;7157}71587159.peach-adopt-birds span:last-child {7160  right: 12px;7161  animation-delay: 0.25s;7162}71637164.peach-adopt-sas {7165  margin: 18px 0;7166  padding: 14px;7167  border-radius: 8px;7168  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);7169  color: var(--peach-t0);7170  font-size: 1.35rem;7171  font-weight: 800;7172  font-variant-numeric: tabular-nums;7173  text-align: center;7174}71757176@keyframes peach-adopt-bob {7177  0%, 100% { transform: translateY(0); }7178  50% { transform: translateY(-5px); }7179}71807181.peach-onboarding-mobile-card-buttons {7182  display: flex;7183  flex-direction: column;7184  gap: 8px;7185  margin-top: 16px;7186}71877188@keyframes peach-onboard-enter {7189  from { opacity: 0; transform: translateY(20px); }7190  to   { opacity: 1; transform: translateY(0); }7191}71927193@keyframes peach-onboard-exit {7194  from { opacity: 1; }7195  to   { opacity: 0; }7196}71977198@keyframes peach-card-in {7199  from { opacity: 0; transform: translateX(12px); }7200  to   { opacity: 1; transform: translateX(0); }7201}72027203@keyframes peach-card-out {7204  from { opacity: 1; transform: translateX(0); }7205  to   { opacity: 0; transform: translateX(-12px); }7206}72077208/* ─── New vault screen — matched to onboarding card language ─────────── */72097210/* Two classes so this beats the shared .peach-screen.lock-screen--vault-stage7211   rule (same element) without loosening the unlock/restore screens. The7212   create-vault screen is the only vault-stage view tall enough to overflow7213   the 520px popup, so its spacing is tuned to fit header → card → restore →7214   recovery warning with nothing clipped. */7215.peach-screen.peach-newvault {7216  position: relative;7217  display: flex;7218  flex-direction: column;7219  gap: 12px;7220  padding: 14px 16px 12px;7221  overflow: hidden;7222}72237224/* Suppress the warm-blob ambient art inherited from .lock-screen — the7225   new vault card now carries the visual weight. */7226.peach-newvault::before {7227  content: none;7228}72297230.peach-newvault-header {7231  position: relative;7232  z-index: 2;7233  display: flex;7234  align-items: center;7235  gap: 10px;7236  margin-bottom: 2px;7237}72387239.peach-newvault-back {7240  display: inline-flex;7241  align-items: center;7242  gap: 4px;7243  background: transparent;7244  border: none;7245  color: var(--peach-t2);7246  font-family: "IBM Plex Mono", monospace;7247  font-size: 0.625rem;7248  letter-spacing: 0.06em;7249  cursor: pointer;7250  padding: 4px 6px;7251  border-radius: 6px;7252  transition: color 120ms ease, background 120ms ease;7253}72547255.peach-newvault-back:hover {7256  color: var(--peach-t0);7257  background: rgba(240, 232, 216, 0.04);7258}72597260.peach-newvault-mark {7261  position: absolute;7262  right: -12px;7263  top: 6px;7264  width: 110px;7265  height: 110px;7266  pointer-events: none;7267  opacity: 0.10;7268  filter: saturate(0.9);7269  z-index: 0;7270}7271.peach-newvault-mark-art {7272  width: 100%;7273  height: 100%;7274}7275.peach-newvault-mark-art path:nth-child(1) {7276  fill: rgba(123, 144, 96, 0.88);7277}7278.peach-newvault-mark-art path:nth-child(2) {7279  stroke: rgba(94, 122, 66, 0.95);7280}72817282.peach-newvault-card {7283  position: relative;7284  z-index: 1;7285  display: flex;7286  flex-direction: column;7287  gap: 8px;7288  padding: 16px 20px 14px;7289  border-radius: 16px;7290  border: 1px solid var(--peach-t3);7291  background:7292    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));7293  backdrop-filter: blur(3px);7294  -webkit-backdrop-filter: blur(3px);7295  box-shadow:7296    inset 0 1px 0 rgba(240, 232, 216, 0.04),7297    0 12px 28px rgba(0, 0, 0, 0.12);7298  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;7299}73007301.peach-newvault-headline {7302  margin: 0;7303  font-family: var(--font-display);7304  font-style: italic;7305  font-weight: 400;7306  font-size: 24px;7307  line-height: 1.05;7308  color: var(--peach-t0);7309  white-space: pre-line;7310}73117312.peach-newvault-divider {7313  margin: 2px 0 4px;7314  border: 0;7315  border-top: 1px solid var(--peach-t3);7316  width: 100%;7317}73187319.peach-newvault-field {7320  display: flex;7321  flex-direction: column;7322  gap: 4px;7323}73247325.peach-newvault-label-row {7326  display: flex;7327  align-items: center;7328  justify-content: space-between;7329}73307331/* Monospace input scaled to the card. Replaces the 22px unlock-input7332   so the placeholder no longer overflows and the field reads as part7333   of the same surface as the body copy. */7334.peach-newvault-input {7335  font-size: 0.875rem;7336  letter-spacing: 0.18em;7337  padding: 8px 0;7338}7339.peach-newvault-input::placeholder {7340  letter-spacing: 0.18em;7341  color: var(--peach-t2);7342}73437344.peach-newvault-hint {7345  margin: 2px 0 0;7346  font-family: "IBM Plex Mono", monospace;7347  font-size: 0.625rem;7348  color: var(--peach-t2);7349  letter-spacing: 0.04em;7350}73517352.peach-newvault-submit {7353  margin-top: 4px;7354}73557356.peach-newvault-warning {7357  display: flex;7358  align-items: flex-start;7359  gap: 8px;7360  margin: 2px 0 0;7361  padding-top: 8px;7362  border-top: 1px dashed var(--peach-t3);7363  font-size: 0.75rem;7364  line-height: 1.45;7365  color: var(--peach-t1);7366}73677368.peach-newvault-warning-icon {7369  color: var(--peach-accent);7370  font-size: 0.8125rem;7371  line-height: 1.4;7372  flex: 0 0 auto;7373}73747375/* Restore options sit inside the card, directly under "create vault", so7376   they are always reachable without scrolling. The top divider mirrors the7377   warning's so the choice reads as a deliberate fork, not a footnote. */7378.peach-newvault-restore {7379  position: relative;7380  z-index: 1;7381  display: flex;7382  flex-direction: column;7383  gap: 4px;7384  margin-top: 4px;7385  padding-top: 10px;7386  border-top: 1px dashed var(--peach-t3);7387}73887389/* Settings body — warm accent gradient gives the glass something to blur against */7390.peach-settings-body {7391  background:7392    radial-gradient(7393      ellipse at 30% 20%,7394      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7395      transparent 60%7396    );7397}73987399/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7400/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7401 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7402 * (replacing the vault from a backup file) and "hazard" for actions that7403 * are absolutely irreversible (Panic). Both use the same card scaffold so7404 * they read as a pair, but the colour family signals the severity at a7405 * glance — yellow for caution, red for don't.7406 */7407.peach-danger-card {7408  --danger-tint: 235, 158, 52; /* amber */7409  display: flex;7410  flex-direction: column;7411  gap: 8px;7412  padding: 14px;7413  margin-top: 10px;7414  border-radius: 12px;7415  border: 1px solid rgba(var(--danger-tint), 0.32);7416  background:7417    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7418    rgba(var(--danger-tint), 0.04);7419  box-shadow:7420    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7421    0 0 24px rgba(var(--danger-tint), 0.04);7422  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7423}74247425.peach-danger-card:hover {7426  border-color: rgba(var(--danger-tint), 0.55);7427  box-shadow:7428    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7429    0 0 36px rgba(var(--danger-tint), 0.10);7430}74317432.peach-danger-card--hazard {7433  --danger-tint: 220, 38, 38; /* red */7434}74357436.peach-danger-card-head {7437  display: flex;7438  align-items: center;7439  gap: 10px;7440}74417442.peach-danger-card-glyph {7443  width: 28px;7444  height: 28px;7445  flex-shrink: 0;7446  display: flex;7447  align-items: center;7448  justify-content: center;7449  border-radius: 8px;7450  background: rgba(var(--danger-tint), 0.12);7451  color: rgba(var(--danger-tint), 0.95);7452  font-size: 1rem;7453  line-height: 1;7454}74557456.peach-danger-card-title {7457  margin: 0;7458  font-size: 0.8125rem;7459  font-weight: 600;7460  color: rgba(var(--danger-tint), 0.92);7461  letter-spacing: 0.01em;7462}74637464.peach-danger-card-copy {7465  margin: 0;7466  font-size: 0.6875rem;7467  line-height: 1.5;7468  color: var(--peach-t2);7469}74707471.peach-danger-card-button {7472  width: 100%;7473  padding: 9px;7474  margin-top: 4px;7475  background: transparent;7476  border: 1px solid rgba(var(--danger-tint), 0.45);7477  border-radius: 8px;7478  color: rgba(var(--danger-tint), 0.9);7479  font-size: 0.75rem;7480  font-weight: 500;7481  letter-spacing: 0.02em;7482  cursor: pointer;7483  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7484}74857486.peach-danger-card-button:hover {7487  background: rgba(var(--danger-tint), 0.10);7488  border-color: rgba(var(--danger-tint), 0.75);7489  color: rgb(var(--danger-tint));7490}74917492.peach-adoption-consent-backdrop {7493  position: fixed;7494  inset: 0;7495  z-index: 1000;7496  display: grid;7497  place-items: center;7498  padding: 18px;7499  background: rgba(15, 10, 5, 0.72);7500}75017502.peach-adoption-consent {7503  width: min(100%, 340px);7504  border: 1px solid color-mix(in srgb, #f59e0b 54%, var(--peach-border));7505  border-radius: 8px;7506  padding: 18px;7507  background: color-mix(in srgb, #2c1b08 84%, var(--peach-surface));7508  color: var(--peach-t0);7509  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42);7510}75117512.peach-adoption-consent-icon {7513  width: 32px;7514  height: 32px;7515  display: grid;7516  place-items: center;7517  border-radius: 50%;7518  background: #f59e0b;7519  color: #1f1304;7520  font-weight: 800;7521}75227523.peach-adoption-consent h2 {7524  margin: 12px 0 8px;7525  font-size: 1.22rem;7526  line-height: 1.15;7527}75287529.peach-adoption-consent-device,7530.peach-adoption-consent-warning {7531  margin: 0 0 12px;7532  color: var(--peach-t1);7533  line-height: 1.35;7534}75357536.peach-adoption-consent-device strong {7537  color: var(--peach-t0);7538}75397540.peach-adoption-consent-warning {7541  color: #ffd79a;7542}75437544.peach-adoption-consent-sas {7545  display: flex;7546  justify-content: space-between;7547  align-items: center;7548  gap: 12px;7549  margin: 14px 0;7550  padding: 10px;7551  border-radius: 6px;7552  background: rgba(245, 158, 11, 0.12);7553}75547555.peach-adoption-consent-sas strong {7556  font-variant-numeric: tabular-nums;7557  letter-spacing: 0;7558  white-space: nowrap;7559}75607561.peach-adoption-consent-actions {7562  display: flex;7563  justify-content: space-between;7564  gap: 10px;7565  margin-top: 16px;7566}75677568.peach-adoption-consent-actions > button {7569  flex: 1;7570}75717572/* ── Panic flow (three-step destruction) ───────────────────────────────── */7573.peach-panic {7574  display: flex;7575  flex-direction: column;7576  flex: 1;7577  min-height: 0;7578  padding: 28px 20px 20px;7579  gap: 18px;7580  overflow-y: auto;7581  scrollbar-width: none;7582  -ms-overflow-style: none;7583}75847585.peach-panic::-webkit-scrollbar { display: none; }75867587.peach-panic-step2 {7588  background: rgba(220, 38, 38, 0.04);7589}75907591.peach-panic-step3 {7592  position: relative;7593  background: #0f0505;7594  color: #ffffff;7595  overflow: hidden;7596}75977598.peach-panic-rune-bg {7599  position: absolute;7600  inset: 0;7601  opacity: 0.22;7602  pointer-events: none;7603  overflow: hidden;7604}76057606.peach-panic-rune-bg canvas {7607  width: 100% !important;7608  height: 100% !important;7609}76107611.peach-panic-icon {7612  font-size: 32px;7613  color: rgb(220, 38, 38);7614  line-height: 1;7615}76167617.peach-panic-title {7618  margin: 0;7619  font-size: 18px;7620  font-weight: 500;7621  color: var(--peach-t1);7622}76237624.peach-panic-title--severe {7625  font-size: 20px;7626  font-weight: 700;7627  color: rgb(220, 38, 38);7628}76297630.peach-panic-body {7631  margin: 0;7632  font-size: 0.8125rem;7633  line-height: 1.55;7634  color: var(--peach-t2);7635}76367637.peach-panic-body--severe {7638  color: rgba(220, 38, 38, 0.85);7639}76407641.peach-panic-body--final {7642  font-size: 1rem;7643  font-weight: 700;7644  color: rgb(255, 80, 80);7645  line-height: 1.4;7646}76477648.peach-panic-body--final-intro {7649  font-size: 1rem;7650  color: #ffffff;7651  font-weight: 400;7652}76537654.peach-panic-divider {7655  height: 1px;7656  background: rgba(255, 255, 255, 0.08);7657  margin: 4px 0;7658}76597660.peach-panic-confirm-input {7661  width: 100%;7662  padding: 10px 12px;7663  background: rgba(255, 255, 255, 0.02);7664  border: 1px solid rgba(220, 38, 38, 0.4);7665  border-radius: 8px;7666  color: var(--peach-t1);7667  font-family: "IBM Plex Mono", monospace;7668  font-size: 0.875rem;7669  letter-spacing: 0.12em;7670  text-transform: uppercase;7671}76727673.peach-panic-confirm-input:focus {7674  outline: none;7675  border-color: rgb(220, 38, 38);7676}76777678.peach-panic-confirm-input--match {7679  border-color: rgb(220, 38, 38);7680  color: rgb(220, 38, 38);7681}76827683.peach-panic-confirm-label {7684  font-size: 0.6875rem;7685  color: var(--peach-t2);7686  margin: 0 0 -8px;7687  letter-spacing: 0.06em;7688}76897690.peach-panic-actions {7691  display: flex;7692  flex-direction: column;7693  gap: 10px;7694  margin-top: auto;7695}76967697.peach-panic-button {7698  width: 100%;7699  padding: 12px;7700  border-radius: 8px;7701  font-size: 0.8125rem;7702  cursor: pointer;7703  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7704}77057706.peach-panic-button--primary {7707  background: var(--peach-accent);7708  border: 1px solid var(--peach-accent);7709  color: #ffffff;7710  font-weight: 600;7711}77127713.peach-panic-button--primary:hover {7714  background: color-mix(in srgb, var(--peach-accent) 88%, white);7715}77167717.peach-panic-button--danger {7718  background: rgb(220, 38, 38);7719  border: 1px solid rgb(220, 38, 38);7720  color: #ffffff;7721  font-weight: 600;7722}77237724.peach-panic-button--danger:disabled {7725  opacity: 0.35;7726  cursor: not-allowed;7727}77287729.peach-panic-button--ghost {7730  background: transparent;7731  border: 1px solid rgba(255, 255, 255, 0.18);7732  color: var(--peach-t2);7733}77347735.peach-panic-button--ghost:hover {7736  border-color: rgba(255, 255, 255, 0.32);7737  color: var(--peach-t1);7738}77397740.peach-panic-link {7741  background: transparent;7742  border: none;7743  padding: 4px 0;7744  color: rgba(220, 38, 38, 0.65);7745  font-size: 0.75rem;7746  cursor: pointer;7747  text-align: left;7748  text-decoration: underline;7749  text-underline-offset: 3px;7750}77517752.peach-panic-link:hover {7753  color: rgb(220, 38, 38);7754}77557756.peach-panic-bar {7757  background: rgb(220, 38, 38);7758  padding: 16px 20px;7759  margin: -28px -20px 0;7760  text-align: center;7761  font-size: 0.8125rem;7762  font-weight: 700;7763  letter-spacing: 0.12em;7764  color: #ffffff;7765}77667767.peach-panic-final-button {7768  width: 100%;7769  padding: 14px;7770  background: rgb(220, 38, 38);7771  border: none;7772  border-radius: 8px;7773  color: #ffffff;7774  font-size: 0.875rem;7775  font-weight: 700;7776  letter-spacing: 0.08em;7777  text-transform: uppercase;7778  cursor: pointer;7779  animation: peach-panic-pulse 2s ease-in-out infinite;7780}77817782.peach-settings-license {7783  margin-top: 10px;7784  padding-top: 10px;7785  border-top: 1px solid var(--peach-t3);7786}77877788.peach-settings-label {7789  font-size: 0.625rem;7790  letter-spacing: 0.08em;7791  color: var(--peach-t3);7792  display: block;7793  margin-bottom: 6px;7794}77957796.peach-settings-license-row {7797  display: flex;7798  align-items: center;7799  justify-content: space-between;7800  gap: 8px;7801}78027803.peach-settings-license-key {7804  font-family: 'IBM Plex Mono', monospace;7805  font-size: 0.75rem;7806  color: var(--peach-t0);7807  letter-spacing: 0.04em;7808  word-break: break-all;7809  flex: 1;7810  min-width: 0;7811}78127813.peach-settings-license-key--masked {7814  font-family: 'IBM Plex Mono', monospace;7815  font-size: 0.6rem;7816  color: var(--peach-t1);7817  letter-spacing: 0.18em;7818  user-select: none;7819}78207821.peach-settings-license-actions {7822  display: flex;7823  align-items: center;7824  gap: 2px;7825  flex-shrink: 0;7826}78277828.peach-settings-license-copy {7829  font-size: 0.6875rem;7830  color: var(--peach-accent);7831  background: transparent;7832  border: none;7833  cursor: pointer;7834  padding: 4px 8px;7835  border-radius: 4px;7836  flex-shrink: 0;7837  transition: opacity 150ms ease;7838}78397840.peach-settings-license-copy:hover {7841  opacity: 0.75;7842}78437844.peach-settings-license-toggle {7845  display: flex;7846  align-items: center;7847  justify-content: center;7848  background: transparent;7849  border: none;7850  cursor: pointer;7851  padding: 4px 6px;7852  border-radius: 4px;7853  color: var(--peach-t2);7854  transition: color 150ms ease;7855}78567857.peach-settings-license-toggle:hover {7858  color: var(--peach-t1);7859}78607861@keyframes peach-panic-pulse {7862  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7863  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7864}78657866[data-motion="reduce"] .peach-panic-final-button {7867  animation: none;7868}78697870/* Vault History — Settings → Vault sub-view */78717872.peach-history-list {7873  border: 1px solid var(--peach-border);7874  border-radius: 8px;7875  overflow: hidden;7876  margin: 8px 0 4px;7877}78787879.peach-history-row {7880  display: flex;7881  align-items: center;7882  justify-content: space-between;7883  padding: 9px 12px;7884  gap: 10px;7885  border-bottom: 1px solid var(--peach-border);7886}78877888.peach-history-row:last-child {7889  border-bottom: none;7890}78917892.peach-history-meta {7893  display: flex;7894  flex-direction: column;7895  gap: 2px;7896  min-width: 0;7897  flex: 1;7898}78997900.peach-history-time {7901  font-size: 0.75rem;7902  font-family: 'IBM Plex Mono', ui-monospace, monospace;7903  color: var(--peach-t0);7904  white-space: nowrap;7905  overflow: hidden;7906  text-overflow: ellipsis;7907}79087909.peach-history-sub {7910  font-size: 0.625rem;7911  color: var(--peach-t2);7912  letter-spacing: 0.06em;7913  text-transform: uppercase;7914  white-space: nowrap;7915  overflow: hidden;7916  text-overflow: ellipsis;7917}79187919.peach-history-btn {7920  flex-shrink: 0;7921  white-space: nowrap;7922  min-width: 56px;7923  text-align: center;7924}79257926.peach-history-btn.is-busy {7927  opacity: 0.65;7928}79297930.peach-history-footer {7931  font-size: 0.625rem;7932  color: var(--peach-t3);7933  letter-spacing: 0.05em;7934  text-align: right;7935  margin: 0;7936  padding: 2px 0 0;7937}79387939/* ── Context menu + swipe-copy flash ─────────────────────── */7940.peach-context-menu-backdrop {7941  position: fixed;7942  inset: 0;7943  background: rgba(0, 0, 0, 0.45);7944  z-index: 100;7945  display: flex;7946  align-items: flex-end;7947  justify-content: center;7948  animation: peach-ctx-fade 140ms ease both;7949}7950.peach-context-menu {7951  width: min(360px, calc(100vw - 24px));7952  margin-bottom: max(env(safe-area-inset-bottom), 12px);7953  background: var(--peach-bg);7954  border: 1px solid var(--peach-t3);7955  border-radius: 14px;7956  padding: 6px;7957  display: flex;7958  flex-direction: column;7959  gap: 2px;7960  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7961  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7962}7963@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7964@keyframes peach-ctx-rise {7965  from { transform: translateY(16px); opacity: 0; }7966  to   { transform: translateY(0);    opacity: 1; }7967}7968.peach-context-menu-item {7969  background: transparent;7970  color: var(--peach-t0);7971  border: 0;7972  border-radius: 10px;7973  padding: 12px 14px;7974  text-align: left;7975  font: inherit;7976  cursor: pointer;7977}7978.peach-context-menu-item:hover,7979.peach-context-menu-item:focus-visible {7980  background: var(--peach-t3);7981}7982.peach-context-menu-item--danger {7983  color: var(--peach-health-bad, #d96868);7984}7985.peach-context-menu-item--cancel {7986  color: var(--peach-t2);7987  margin-top: 4px;7988  border-top: 1px solid var(--peach-t3);7989  border-radius: 0 0 10px 10px;7990}79917992/* Swipe-to-copy flash */7993.peach-entry-row.is-copy-flash {7994  animation: peach-copy-flash 600ms ease both;7995}7996@keyframes peach-copy-flash {7997  0%   { background: transparent; }7998  20%  { background: rgba(217, 153, 51, 0.32); }7999  100% { background: transparent; }8000}80018002html { font-size: 16px; }80038004/* ── Recovery word entry ─────────────────────────────────────────── */8005.peach-lock-recover-link {8006  display: block;8007  width: 100%;8008  margin-top: 12px;8009  background: none;8010  border: none;8011  font-family: "IBM Plex Mono", monospace;8012  font-size: 0.625rem;8013  letter-spacing: 0.06em;8014  color: var(--peach-t2);8015  cursor: pointer;8016  text-align: center;8017  padding: 4px;8018  transition: color 120ms ease;8019}8020.peach-lock-recover-link:hover {8021  color: var(--peach-t0);8022}80238024.lock-screen--recovery {8025  display: flex;8026  flex-direction: column;8027  align-items: stretch;8028  padding: 12px 20px 24px;8029  overflow: hidden;8030}80318032.peach-recovery-nav {8033  display: flex;8034  align-items: center;8035  position: relative;8036  z-index: 1;8037  margin-bottom: 4px;8038}80398040/* Mask runes to the top decorative band only — keep inputs and the8041   bottom CTA button clear. The bottom of the popup is reserved for8042   submit buttons; rendering runes there overlaps the button glyph. */8043.peach-rune-background--recovery {8044  -webkit-mask-image: linear-gradient(8045    to bottom,8046    black 0px, black 85px,8047    transparent 110px,8048    transparent 100%8049  );8050  mask-image: linear-gradient(8051    to bottom,8052    black 0px, black 85px,8053    transparent 110px,8054    transparent 100%8055  );8056}80578058.peach-recovery-header {8059  text-align: center;8060  margin-bottom: 16px;8061  margin-top: 4px;8062}8063.peach-recovery-header .peach-onboarding-headline {8064  font-size: 1.25rem;8065  font-weight: 300;8066  letter-spacing: 0.02em;8067  margin: 0 0 4px;8068}8069.peach-recovery-header .peach-hint {8070  font-family: "IBM Plex Mono", monospace;8071  font-size: 0.625rem;8072  color: var(--peach-t2);8073  letter-spacing: 0.04em;8074  margin: 0;8075}80768077/* 12-word grid: 2 columns × 6 rows */8078.peach-recovery-grid {8079  display: grid;8080  grid-template-columns: repeat(2, 1fr);8081  gap: 12px 20px;8082  width: 100%;8083  margin-bottom: 0;8084}80858086.peach-recovery-word-slot {8087  display: flex;8088  align-items: center;8089  gap: 6px;8090  min-width: 0;8091}80928093.peach-recovery-word-index {8094  font-family: "IBM Plex Mono", monospace;8095  font-size: 0.5rem;8096  color: rgba(255, 255, 255, 0.35);8097  min-width: 14px;8098  flex-shrink: 0;8099  text-align: right;8100  letter-spacing: 0.04em;8101}81028103.peach-recovery-word-input {8104  flex: 1;8105  min-width: 0;8106  background: transparent;8107  border: none;8108  border-bottom: 1px solid rgba(255, 255, 255, 0.22);8109  color: var(--peach-t0);8110  font-family: "IBM Plex Mono", monospace;8111  font-size: 0.6875rem;8112  letter-spacing: 0.06em;8113  padding: 5px 2px 4px;8114  outline: none;8115  text-transform: lowercase;8116  transition: border-color 120ms ease;8117}8118.peach-recovery-word-input::placeholder {8119  color: rgba(255, 255, 255, 0.18);8120}8121.peach-recovery-word-input:focus {8122  border-bottom-color: var(--peach-accent);8123}81248125.peach-recovery-submit {8126  width: 100%;8127  margin-top: auto;8128}81298130.peach-recovery-new-password-form {8131  width: 100%;8132  display: flex;8133  flex-direction: column;8134  gap: 16px;8135  margin-bottom: 8px;8136}8137.peach-recovery-new-password-form .peach-newvault-field {8138  display: flex;8139  flex-direction: column;8140  gap: 4px;8141}81428143/* ── Recovery words display (post-create) ────────────────────────── */8144.lock-screen--recovery-display {8145  display: flex;8146  flex-direction: column;8147  align-items: stretch;8148  padding: 0 20px 20px;8149  min-height: 0;8150  overflow-y: auto;8151}81528153.peach-recovery-words-display {8154  width: 100%;8155  margin-bottom: 16px;8156  border: 1px solid var(--peach-t3);8157  border-radius: 8px;8158  padding: 12px 14px;8159  background: rgba(245, 240, 234, 0.04);8160}81618162.peach-recovery-words-label {8163  font-family: "IBM Plex Mono", monospace;8164  font-size: 0.5rem;8165  letter-spacing: 0.08em;8166  color: var(--peach-t2);8167  text-transform: uppercase;8168  margin-bottom: 10px;8169}81708171.peach-recovery-word-list {8172  list-style: none;8173  margin: 0;8174  padding: 0;8175  display: grid;8176  grid-template-columns: repeat(2, 1fr);8177  gap: 6px 16px;8178}81798180.peach-recovery-word-item {8181  display: flex;8182  align-items: baseline;8183  gap: 5px;8184}81858186.peach-recovery-word-num {8187  font-family: "IBM Plex Mono", monospace;8188  font-size: 0.5rem;8189  color: var(--peach-t2);8190  width: 14px;8191  flex: 0 0 14px;8192  text-align: right;8193  letter-spacing: 0.04em;8194  font-variant-numeric: tabular-nums;8195}81968197.peach-recovery-download-btn {8198  display: block;8199  margin: 10px auto 0;8200  padding: 4px 10px;8201  background: transparent;8202  border: 1px solid var(--peach-border);8203  border-radius: 6px;8204  color: var(--peach-t2);8205  font-family: "IBM Plex Mono", monospace;8206  font-size: 0.5625rem;8207  letter-spacing: 0.06em;8208  text-transform: lowercase;8209  cursor: pointer;8210  transition: border-color 0.15s, color 0.15s;8211}82128213.peach-recovery-download-btn:hover {8214  border-color: var(--peach-accent);8215  color: var(--peach-t0);8216}82178218.peach-recovery-word-text {8219  font-family: "IBM Plex Mono", monospace;8220  font-size: 0.6875rem;8221  letter-spacing: 0.06em;8222  color: var(--peach-t0);8223  text-transform: lowercase;8224}82258226.peach-hint--warning {8227  color: var(--peach-accent);8228  font-style: italic;8229}8230.peach-hint--success {8231  color: var(--peach-t2);8232  font-family: "IBM Plex Mono", monospace;8233  font-size: 0.625rem;8234  letter-spacing: 0.06em;8235}82368237/* Confirmation step */8238.peach-recovery-confirm {8239  width: 100%;8240  flex: 1;8241  display: flex;8242  flex-direction: column;8243}8244.peach-recovery-confirm-label {8245  font-family: "IBM Plex Mono", monospace;8246  font-size: 0.5625rem;8247  letter-spacing: 0.04em;8248  color: var(--peach-t2);8249  text-align: center;8250  margin: 0 0 12px;8251}8252.peach-recovery-confirm-fields {8253  display: flex;8254  flex-direction: column;8255  gap: 14px;8256  margin-bottom: 10px;8257}8258.peach-recovery-confirm-field {8259  display: flex;8260  align-items: center;8261  gap: 8px;8262}8263.peach-recovery-confirm-num {8264  font-family: "IBM Plex Mono", monospace;8265  font-size: 0.5rem;8266  color: var(--peach-t2);8267  min-width: 44px;8268  letter-spacing: 0.04em;8269}8270.peach-recovery-confirm-input {8271  flex: 1;8272  background: transparent;8273  border: none;8274  border-bottom: 1px solid var(--peach-t3);8275  color: var(--peach-t0);8276  font-family: "IBM Plex Mono", monospace;8277  font-size: 0.6875rem;8278  letter-spacing: 0.06em;8279  padding: 4px 2px 3px;8280  outline: none;8281  text-transform: lowercase;8282  transition: border-color 120ms ease;8283}8284.peach-recovery-confirm-input:focus {8285  border-bottom-color: var(--peach-accent);8286}8287.peach-recovery-confirm-input:disabled {8288  opacity: 0.4;8289  cursor: not-allowed;8290}8291.peach-recovery-confirm-btn {8292  width: 100%;8293  margin-top: auto;8294}82958296/* ============================================================8297   Sync info sheet8298   ============================================================ */82998300.peach-sync-info-backdrop {8301  position: fixed;8302  inset: 0;8303  z-index: 200;8304  background: rgba(0, 0, 0, 0.55);8305  display: flex;8306  align-items: flex-end;8307  animation: peach-fade-in 200ms ease forwards;8308}83098310@keyframes peach-fade-in {8311  from { opacity: 0; }8312  to   { opacity: 1; }8313}83148315.peach-sync-info-sheet {8316  width: 100%;8317  background: var(--peach-bg-card, var(--peach-bg));8318  border-top-left-radius: 20px;8319  border-top-right-radius: 20px;8320  padding: 12px 24px 32px;8321  display: flex;8322  flex-direction: column;8323  gap: 20px;8324  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;8325}83268327@keyframes peach-sheet-up {8328  from { transform: translateY(100%); }8329  to   { transform: translateY(0); }8330}83318332.peach-sync-info-handle {8333  width: 36px;8334  height: 4px;8335  border-radius: 2px;8336  background: var(--peach-border);8337  margin: 0 auto 4px;8338  flex-shrink: 0;8339}83408341.peach-sync-info-title {8342  font-family: 'Cormorant Garamond', serif;8343  font-style: italic;8344  font-size: 26px;8345  font-weight: 600;8346  color: var(--peach-t0);8347  margin: 0;8348  line-height: 1.2;8349}83508351.peach-sync-info-body {8352  display: flex;8353  flex-direction: column;8354  gap: 14px;8355}83568357.peach-sync-info-point {8358  display: flex;8359  gap: 12px;8360  align-items: flex-start;8361  font-size: 14px;8362  color: var(--peach-t2);8363  line-height: 1.6;8364  margin: 0;8365}83668367.peach-sync-info-icon {8368  color: var(--peach-accent);8369  font-size: 16px;8370  flex-shrink: 0;8371  margin-top: 1px;8372}83738374.peach-sync-info-actions {8375  display: flex;8376  flex-direction: column;8377  gap: 12px;8378  margin-top: 4px;8379}83808381.peach-sync-info-pro-link {8382  background: none;8383  border: none;8384  font-size: 13px;8385  color: var(--peach-t3);8386  cursor: pointer;8387  padding: 0;8388  font-family: inherit;8389  text-align: center;8390  transition: color 150ms ease;8391}83928393.peach-sync-info-pro-link:hover {8394  color: var(--peach-accent);8395}83968397.peach-btn--full {8398  width: 100%;8399}84008401/* ── Sync screen ── */84028403.peach-sync-coming-soon {8404  display: flex;8405  align-items: flex-start;8406  gap: 10px;8407  padding: 12px 14px;8408  background: var(--peach-s1);8409  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8410  border-radius: 10px;8411}8412.peach-sync-coming-soon__icon {8413  flex-shrink: 0;8414  color: var(--peach-accent);8415  margin-top: 1px;8416  line-height: 0;8417}8418.peach-sync-coming-soon__title {8419  font-family: 'Cormorant Garamond', serif;8420  font-weight: 500;8421  font-size: 13px;8422  color: var(--peach-accent);8423  margin: 0 0 5px;8424  line-height: 1.3;8425}8426.peach-sync-coming-soon__body {8427  font-size: 12px;8428  color: var(--peach-t1);8429  line-height: 1.55;8430  margin: 0;8431}84328433.peach-sync-screen {8434  display: flex;8435  flex-direction: column;8436  height: 100%;8437}84388439.peach-sync-content {8440  flex: 1;8441  overflow-y: auto;8442  padding: 24px 20px 40px;8443  display: flex;8444  flex-direction: column;8445  gap: 24px;8446}84478448/* Intro (State A) */8449.peach-sync-headline {8450  font-family: 'Cormorant Garamond', serif;8451  font-style: italic;8452  font-size: 28px;8453  font-weight: 600;8454  color: var(--peach-t0);8455  margin: 0 0 10px;8456  line-height: 1.2;8457}84588459.peach-sync-intro-body {8460  font-size: 14px;8461  color: var(--peach-t1);8462  line-height: 1.6;8463  margin: 0;8464}84658466.peach-sync-pro-note {8467  display: flex;8468  flex-direction: column;8469  gap: 8px;8470  background: var(--peach-t3);8471  border-radius: 10px;8472  padding: 12px 14px;8473}84748475.peach-sync-pro-note-text {8476  font-size: 12px;8477  color: var(--peach-t2);8478  line-height: 1.5;8479  margin: 0;8480}84818482.peach-sync-pro-link {8483  background: none;8484  border: none;8485  font-size: 12px;8486  color: var(--peach-accent);8487  cursor: pointer;8488  padding: 0;8489  font-family: inherit;8490  text-align: left;8491}84928493/* Status (State C) */8494.peach-sync-status {8495  padding: 12px 0;8496  border-bottom: 1px solid var(--peach-border);8497}84988499.peach-sync-status-row {8500  display: flex;8501  align-items: center;8502  gap: 8px;8503}85048505.peach-sync-dot {8506  width: 7px;8507  height: 7px;8508  border-radius: 50%;8509  flex-shrink: 0;8510}85118512.peach-sync-dot--green { background: var(--peach-health-ok); }8513.peach-sync-dot--amber { background: var(--peach-accent); }85148515.peach-sync-status-text {8516  font-family: 'IBM Plex Mono', monospace;8517  font-size: 11px;8518  color: var(--peach-t2);8519}85208521/* Paired devices */8522.peach-sync-section {8523  display: flex;8524  flex-direction: column;8525  gap: 2px;8526}85278528.peach-sync-section-label {8529  font-family: 'IBM Plex Mono', monospace;8530  font-size: 10px;8531  letter-spacing: 0.1em;8532  color: var(--peach-t3);8533  margin: 0 0 10px;8534}85358536.peach-sync-device-row {8537  display: flex;8538  justify-content: space-between;8539  align-items: baseline;8540  padding: 10px 0;8541  border-bottom: 1px solid var(--peach-border);8542  gap: 12px;8543}85448545.peach-sync-device-name {8546  font-size: 14px;8547  color: var(--peach-t1);8548}85498550.peach-sync-device-meta {8551  font-family: 'IBM Plex Mono', monospace;8552  font-size: 11px;8553  color: var(--peach-t3);8554  white-space: nowrap;8555}85568557.peach-sync-hub-note {8558  padding: 14px 16px;8559  border: 1px solid var(--peach-border);8560  border-radius: 10px;8561  display: flex;8562  flex-direction: column;8563  gap: 6px;8564  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8565}85668567.peach-sync-hub-note-title {8568  font-size: 13px;8569  font-weight: 600;8570  color: var(--peach-t0);8571  margin: 0;8572}85738574.peach-sync-hub-note-body {8575  font-size: 12px;8576  color: var(--peach-t2);8577  line-height: 1.6;8578  margin: 0;8579}85808581/* Action buttons */8582.peach-sync-actions {8583  display: flex;8584  gap: 10px;8585  flex-wrap: wrap;8586}85878588/* Upgrade prompt (State B) */8589.peach-sync-upgrade {8590  display: flex;8591  flex-direction: column;8592  gap: 12px;8593  padding: 16px;8594  border: 1px solid var(--peach-border);8595  border-radius: 10px;8596}85978598.peach-sync-upgrade-text {8599  font-size: 13px;8600  color: var(--peach-t2);8601  line-height: 1.6;8602  margin: 0;8603}86048605/* Network note */8606.peach-sync-network-note {8607  font-size: 12px;8608  color: var(--peach-t3);8609  line-height: 1.6;8610  margin: 0;8611}86128613/* Advanced */8614.peach-sync-advanced {8615  margin-top: auto;8616  padding-top: 16px;8617  border-top: 1px solid var(--peach-border);8618}86198620.peach-sync-advanced-toggle {8621  display: flex;8622  align-items: center;8623  gap: 8px;8624  background: none;8625  border: none;8626  font-family: 'IBM Plex Mono', monospace;8627  font-size: 11px;8628  letter-spacing: 0.08em;8629  color: var(--peach-t3);8630  cursor: pointer;8631  padding: 0;8632  text-transform: uppercase;8633}86348635.peach-sync-advanced-chevron {8636  display: inline-block;8637  transition: transform 200ms ease;8638  font-size: 10px;8639}86408641.peach-sync-advanced-chevron.is-open {8642  transform: rotate(90deg);8643}86448645.peach-sync-advanced-content {8646  margin-top: 14px;8647}86488649.peach-sync-advanced-row {8650  display: flex;8651  justify-content: space-between;8652  align-items: center;8653  gap: 16px;8654}86558656.peach-sync-advanced-title {8657  font-size: 14px;8658  color: var(--peach-t1);8659  margin: 0 0 2px;8660}86618662.peach-sync-advanced-subtitle {8663  font-size: 12px;8664  color: var(--peach-t3);8665  margin: 0;8666  line-height: 1.5;8667}86688669/* ── Add Device — Android scan tabs ─────────────────────────────────────── */86708671.peach-pairing-tabs {8672  display: flex;8673  border: 1px solid var(--peach-border);8674  border-radius: 8px;8675  overflow: hidden;8676  margin-bottom: 4px;8677}86788679.peach-pairing-tab {8680  flex: 1;8681  padding: 10px 0;8682  background: none;8683  border: none;8684  font-family: 'IBM Plex Mono', monospace;8685  font-size: 11px;8686  letter-spacing: 0.06em;8687  color: var(--peach-t2);8688  cursor: pointer;8689  transition: background 150ms, color 150ms;8690}86918692.peach-pairing-tab.is-active {8693  background: var(--peach-accent);8694  color: #fff;8695  font-weight: 600;8696}86978698.peach-pairing-tab:not(.is-active):active {8699  background: var(--peach-border);8700}87018702/* Camera view */8703.peach-pairing-camera-container {8704  position: relative;8705  width: 100%;8706  aspect-ratio: 1;8707  border-radius: 12px;8708  overflow: hidden;8709  background: #000;8710  flex-shrink: 0;8711}87128713.peach-pairing-video {8714  width: 100%;8715  height: 100%;8716  object-fit: cover;8717}87188719.peach-pairing-scan-frame {8720  position: absolute;8721  top: 50%;8722  left: 50%;8723  transform: translate(-50%, -50%);8724  width: 60%;8725  aspect-ratio: 1;8726  border: 2px solid var(--peach-accent);8727  border-radius: 8px;8728  pointer-events: none;8729}87308731/* ── Notes Mode ── */87328733/* Overlay that crossfades over the vault */8734.peach-notes-overlay {8735  position: fixed;8736  inset: 0;8737  z-index: 90;8738  opacity: 0;8739  pointer-events: none;8740  animation: peach-mode-in 220ms ease-in forwards;8741}87428743.peach-notes-overlay.is-visible {8744  opacity: 1;8745  pointer-events: auto;8746}87478748@keyframes peach-mode-in {8749  from { opacity: 0; }8750  to   { opacity: 1; }8751}87528753/* Top-level notes surface */8754.peach-notes-mode {8755  position: absolute;8756  inset: 0;8757  background: var(--peach-bg);8758  display: flex;8759  flex-direction: column;8760}87618762/* Rune canvas positioned behind content */8763.peach-note-rune-canvas {8764  position: absolute;8765  inset: 0;8766  width: 100%;8767  height: 100%;8768  pointer-events: none;8769  z-index: 0;8770}87718772/* TOC wrapper */8773.peach-notes-toc-wrapper {8774  position: absolute;8775  inset: 0;8776  z-index: 1;8777  opacity: 1;8778  pointer-events: auto;8779  transition: opacity 200ms ease;8780}87818782.peach-notes-toc-wrapper.is-hidden {8783  opacity: 0;8784  pointer-events: none;8785}87868787/* Editor wrapper */8788.peach-notes-editor-wrapper {8789  position: absolute;8790  inset: 0;8791  z-index: 2;8792  opacity: 0;8793  pointer-events: none;8794  transition: opacity 200ms ease;8795}87968797.peach-notes-editor-wrapper.is-visible {8798  opacity: 1;8799  pointer-events: auto;8800}88018802/* TOC inner */8803.peach-notes-toc {8804  position: relative;8805  display: flex;8806  flex-direction: column;8807  height: 100%;8808  padding-top: env(safe-area-inset-top, 0px);8809  padding-bottom: env(safe-area-inset-bottom, 0px);8810}88118812/* Shared header */8813.peach-notes-header {8814  display: flex;8815  align-items: center;8816  padding: 12px 16px;8817  gap: 12px;8818  flex-shrink: 0;8819  min-height: 52px;8820  position: relative;8821  z-index: 2;8822}88238824.peach-notes-back {8825  font-size: 22px;8826  color: var(--peach-t2);8827  background: none;8828  border: none;8829  padding: 4px;8830  cursor: pointer;8831  line-height: 1;8832  flex-shrink: 0;8833  transition: color 150ms ease;8834  -webkit-tap-highlight-color: transparent;8835}88368837.peach-notes-back:active { color: var(--peach-t0); }88388839.peach-notes-header-title {8840  flex: 1;8841  font-family: 'Cormorant Garamond', serif;8842  font-style: italic;8843  font-size: 22px;8844  color: var(--peach-t0);8845  text-align: center;8846}88478848.peach-notes-header-title.is-breadcrumb {8849  font-family: 'IBM Plex Mono', monospace;8850  font-style: normal;8851  font-size: 11px;8852  color: var(--peach-t3);8853  letter-spacing: 0.08em;8854  text-transform: uppercase;8855  cursor: pointer;8856}88578858.peach-notes-header-actions {8859  display: flex;8860  gap: 8px;8861  flex-shrink: 0;8862}88638864.peach-notes-header-btn {8865  width: 36px;8866  height: 36px;8867  display: flex;8868  align-items: center;8869  justify-content: center;8870  background: none;8871  border: none;8872  color: var(--peach-t2);8873  cursor: pointer;8874  border-radius: 8px;8875  font-size: 16px;8876  transition: color 150ms ease, background 150ms ease;8877  -webkit-tap-highlight-color: transparent;8878}88798880.peach-notes-header-btn:active {8881  background: rgba(255,255,255,0.06);8882  color: var(--peach-t0);8883}88848885/* Inline search bar */8886.peach-notes-search-input {8887  flex: 1;8888  background: none;8889  border: none;8890  outline: none;8891  font-family: 'IBM Plex Mono', monospace;8892  font-size: 13px;8893  color: var(--peach-t0);8894  padding: 4px 0;8895  letter-spacing: 0.02em;8896}88978898.peach-notes-search-input::placeholder {8899  color: var(--peach-t3);8900}89018902/* TOC list */8903.peach-notes-list-container {8904  flex: 1;8905  overflow-y: auto;8906  overflow-x: hidden;8907  scrollbar-width: none;8908  -webkit-overflow-scrolling: touch;8909  overscroll-behavior: contain;8910  position: relative;8911  z-index: 1;8912}89138914.peach-notes-list-container::-webkit-scrollbar { display: none; }89158916/* Note row */8917.peach-note-row {8918  position: relative;8919  display: grid;8920  grid-template-columns: 44px 8px 1fr 8px auto;8921  align-items: center;8922  min-height: 72px;8923  padding: 16px 20px;8924  border-bottom: 0.5px solid var(--peach-border);8925  cursor: pointer;8926  overflow: hidden;8927  touch-action: pan-y;8928  user-select: none;8929  -webkit-user-select: none;8930  -webkit-tap-highlight-color: transparent;8931}89328933.peach-note-row:first-child {8934  border-top: 0.5px solid var(--peach-border);8935}89368937.peach-note-row:active {8938  background: rgba(255,255,255,0.02);8939}89408941.peach-note-numeral {8942  font-family: 'Cormorant Garamond', serif;8943  font-style: italic;8944  font-size: 15px;8945  color: var(--peach-accent);8946  text-align: right;8947  line-height: 1;8948  flex-shrink: 0;8949}89508951.peach-note-title-gap { /* grid spacer */ }89528953.peach-note-title {8954  font-family: 'Cormorant Garamond', serif;8955  font-style: italic;8956  font-size: 18px;8957  color: var(--peach-t0);8958  line-height: 1.3;8959  min-width: 0;8960  overflow-wrap: break-word;8961}89628963.peach-note-title-match {8964  color: var(--peach-accent);8965}89668967.peach-note-date {8968  font-family: 'IBM Plex Mono', monospace;8969  font-size: 11px;8970  color: var(--peach-t2);8971  white-space: nowrap;8972  text-align: right;8973  flex-shrink: 0;8974  grid-column: 5;8975}89768977/* Swipe underlays */8978.peach-note-row-underlay {8979  position: absolute;8980  inset: 0;8981  display: flex;8982  align-items: center;8983  padding: 0 24px;8984  font-family: 'IBM Plex Mono', monospace;8985  font-size: 11px;8986  letter-spacing: 0.1em;8987  pointer-events: none;8988  z-index: 0;8989}89908991.peach-note-row-underlay--delete {8992  background: #8B2020;8993  color: rgba(255,255,255,0.9);8994  justify-content: flex-end;8995}89968997.peach-note-row-underlay--archive {8998  background: var(--peach-accent);8999  color: #0C0A06;9000  justify-content: flex-start;9001}90029003/* Delete confirm strip */9004.peach-note-delete-confirm {9005  position: absolute;9006  inset: 0;9007  background: var(--peach-bg);9008  display: flex;9009  align-items: center;9010  gap: 12px;9011  padding: 0 20px;9012  font-family: 'IBM Plex Mono', monospace;9013  font-size: 11px;9014  color: var(--peach-t1);9015  letter-spacing: 0.04em;9016  animation: peach-delete-confirm-in 150ms ease both;9017  z-index: 10;9018}90199020@keyframes peach-delete-confirm-in {9021  from { opacity: 0; }9022  to   { opacity: 1; }9023}90249025.peach-note-delete-confirm-btn {9026  background: #8B2020;9027  color: rgba(255,255,255,0.9);9028  border: none;9029  border-radius: 6px;9030  padding: 4px 10px;9031  font-family: 'IBM Plex Mono', monospace;9032  font-size: 10px;9033  cursor: pointer;9034  letter-spacing: 0.06em;9035}90369037.peach-note-delete-cancel-btn {9038  background: none;9039  border: none;9040  color: var(--peach-t3);9041  font-family: 'IBM Plex Mono', monospace;9042  font-size: 10px;9043  cursor: pointer;9044  letter-spacing: 0.06em;9045  padding: 4px 6px;9046}90479048/* + New note button */9049.peach-notes-new-btn {9050  font-family: 'IBM Plex Mono', monospace;9051  font-size: 12px;9052  color: var(--peach-t3);9053  text-align: center;9054  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));9055  background: none;9056  border: none;9057  width: 100%;9058  cursor: pointer;9059  letter-spacing: 0.04em;9060  transition: color 150ms ease;9061  -webkit-tap-highlight-color: transparent;9062}90639064.peach-notes-new-btn:active { color: var(--peach-accent); }90659066/* Empty state */9067.peach-notes-empty {9068  display: flex;9069  flex-direction: column;9070  align-items: center;9071  justify-content: center;9072  flex: 1;9073  padding: 48px 32px;9074  gap: 16px;9075}90769077.peach-notes-empty-text {9078  font-family: 'Cormorant Garamond', serif;9079  font-style: italic;9080  font-size: 20px;9081  color: var(--peach-t3);9082  text-align: center;9083  margin: 0;9084  line-height: 1.4;9085  white-space: pre-line;9086}90879088/* ── Editor surface ── */90899090.peach-note-editor-surface {9091  position: absolute;9092  inset: 0;9093  background: var(--peach-bg);9094  display: flex;9095  flex-direction: column;9096  padding-top: env(safe-area-inset-top, 0px);9097}90989099.peach-note-editor-scroll {9100  flex: 1;9101  overflow-y: auto;9102  overflow-x: hidden;9103  scrollbar-width: none;9104  -webkit-overflow-scrolling: touch;9105  padding: 0 24px 120px;9106  position: relative;9107  z-index: 1;9108}91099110.peach-note-editor-scroll::-webkit-scrollbar { display: none; }91119112/* Desktop toolbar (always visible above body) */9113.peach-note-toolbar-desktop-inline {9114  display: flex;9115  align-items: center;9116  gap: 2px;9117  padding: 6px 0 12px;9118  margin-bottom: 4px;9119  border-bottom: 0.5px solid var(--peach-border);9120}91219122/* Title field */9123.peach-note-title-field {9124  font-family: 'Cormorant Garamond', serif;9125  font-style: italic;9126  font-size: 32px;9127  font-weight: 600;9128  color: var(--peach-t0);9129  line-height: 1.2;9130  padding: 8px 0 0;9131  outline: none;9132  min-height: 44px;9133  word-break: break-word;9134  position: relative;9135  z-index: 1;9136}91379138.peach-note-title-field:empty::before {9139  content: attr(data-placeholder);9140  color: var(--peach-t3);9141  pointer-events: none;9142}91439144/* Hairline separator */9145.peach-note-hairline {9146  height: 0.5px;9147  background: var(--peach-border);9148  margin: 12px 0 20px;9149  position: relative;9150  z-index: 1;9151}91529153/* Body field */9154.peach-note-body-field {9155  font-family: 'DM Sans', sans-serif;9156  font-size: 16px;9157  color: var(--peach-t0);9158  line-height: 1.85;9159  padding: 0;9160  outline: none;9161  min-height: 240px;9162  word-break: break-word;9163  position: relative;9164  z-index: 1;9165}91669167.peach-note-body-field:empty::before {9168  content: attr(data-placeholder);9169  color: var(--peach-t3);9170  font-style: italic;9171  pointer-events: none;9172}91739174.peach-note-body-field h2 {9175  font-family: 'Cormorant Garamond', serif;9176  font-style: italic;9177  font-size: 22px;9178  font-weight: 600;9179  color: var(--peach-t0);9180  margin: 20px 0 8px;9181}91829183.peach-note-body-field blockquote {9184  border-left: 2px solid var(--peach-accent);9185  margin: 12px 0;9186  padding-left: 16px;9187  color: var(--peach-t1);9188  font-style: italic;9189}91909191.peach-note-body-field ul,9192.peach-note-body-field ol {9193  padding-left: 20px;9194  margin: 8px 0;9195}91969197.peach-note-body-field li {9198  margin: 4px 0;9199}92009201.peach-note-body-field hr {9202  border: none;9203  border-top: 0.5px solid var(--peach-border);9204  margin: 16px 0;9205}92069207/* Saved indicator */9208.peach-note-saved-indicator {9209  font-family: 'IBM Plex Mono', monospace;9210  font-size: 11px;9211  color: var(--peach-t3);9212  letter-spacing: 0.04em;9213  text-align: right;9214  padding: 6px 24px;9215  flex-shrink: 0;9216  transition: opacity 300ms ease;9217  pointer-events: none;9218  position: relative;9219  z-index: 1;9220}92219222/* Mobile keyboard toolbar */9223.peach-note-toolbar-mobile {9224  display: flex;9225  align-items: center;9226  padding: 8px 16px;9227  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));9228  background: var(--peach-bg);9229  border-top: 0.5px solid var(--peach-border);9230  gap: 4px;9231  flex-shrink: 0;9232  position: relative;9233  z-index: 10;9234}92359236.peach-note-toolbar-btn {9237  min-width: 36px;9238  height: 36px;9239  display: flex;9240  align-items: center;9241  justify-content: center;9242  background: none;9243  border: none;9244  border-radius: 8px;9245  cursor: pointer;9246  font-size: 14px;9247  color: var(--peach-t1);9248  font-family: 'DM Sans', sans-serif;9249  font-weight: 600;9250  transition: background 100ms ease, color 100ms ease;9251  -webkit-tap-highlight-color: transparent;9252}92539254.peach-note-toolbar-btn--italic { font-style: italic; }9255.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }9256.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }92579258.peach-note-toolbar-divider {9259  width: 0.5px;9260  height: 20px;9261  background: var(--peach-border);9262  margin: 0 4px;9263  flex-shrink: 0;9264}92659266.peach-note-toolbar-spacer { flex: 1; }92679268/* Desktop: larger headline in TOC */9269@media (min-width: 400px) {9270  .peach-notes-header-title:not(.is-breadcrumb) {9271    font-size: 32px;9272  }92739274  .peach-note-row {9275    min-height: 64px;9276    padding: 14px 16px;9277  }9278}92799280/* Flying title — shared element during expansion/collapse */92819282/* ─── Light theme overrides ───────────────────────────────────────────────9283   Tokens that cannot be expressed as variable substitutions — hardcoded9284   context-specific values that need separate light-mode rules. */92859286/* Settings section headers: use text-label (#79766F) per restoration brief —9287   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY9288   presence without fighting the light parchment background. */9289.light .peach-settings-sub-label,9290[data-theme="light"] .peach-settings-sub-label,9291.light .peach-settings-nav-label,9292[data-theme="light"] .peach-settings-nav-label {9293  color: #79766F;9294}92959296/* Secondary action buttons (ghost / subtle): filled with input-well surface9297   so they read as recessed against the parchment card background. */9298.light .peach-btn--ghost:not(.peach-icon-btn),9299[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {9300  background: #EEE7DD;9301  border-color: #DDD5CB;9302  color: #1A1208;9303}9304.light .peach-icon-btn,9305[data-theme="light"] .peach-icon-btn {9306  background: transparent;9307  border-color: transparent;9308}9309.light .peach-btn--subtle,9310[data-theme="light"] .peach-btn--subtle {9311  background: #EEE7DD;9312  border-color: #DDD5CB;9313}93149315/* Wide secondary action button on the lock screen — override the9316   hardcoded dark-mode rgba values with warm parchment equivalents. */9317.light .peach-lock-secondary,9318[data-theme="light"] .peach-lock-secondary {9319  background: #EEE7DD;9320  border-color: #DDD5CB;9321  color: #1A1208;9322}9323.light .peach-lock-secondary:hover,9324[data-theme="light"] .peach-lock-secondary:hover {9325  background: #F0E9DF;9326}93279328/* Entry row hover: bg-row lifts the row above the card surface. */9329.light .peach-entry-row:hover,9330[data-theme="light"] .peach-entry-row:hover {9331  background: #F2EBE1;9332}9333.light .peach-entry-row.is-active,9334[data-theme="light"] .peach-entry-row.is-active {9335  background: #F2EBE1;9336}9337.light .peach-entry-row.is-selected,9338[data-theme="light"] .peach-entry-row.is-selected {9339  background: #F5EDE2;9340}93419342/* ──────────────────────────────────────────────────────────────────────────9343   Chirp pairing flow — bird-stage animation (Phase 1)9344   See src/popup/components/ChirpPairingFlow.tsx and the brief §6.2.9345   Three-act animation gated on the [data-phase] attribute of9346   .peach-chirp-pair; child layers (birds, chirp arcs, flight wave, dot)9347   each react via either pose class or visibility flag.9348   Tokens: accent surfaces use var(--peach-accent); bird illustration9349   colours are baked into the SVG per the brand-peach exception in §3.1.9350   ────────────────────────────────────────────────────────────────────── */93519352.peach-chirp-pair {9353  position: absolute;9354  inset: 0;9355  z-index: 3;9356  display: flex;9357  flex-direction: column;9358  padding: 14px 12px 12px;9359  width: 100%;9360  box-sizing: border-box;9361  gap: 0;9362  background:9363    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9364    var(--peach-bg);9365  color: var(--peach-t0);9366  overflow-y: auto;9367  overflow-x: hidden;9368  scrollbar-width: none;9369  isolation: isolate;9370  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9371}9372@keyframes peach-chirp-overlay-in {9373  from { opacity: 0; transform: translateY(8px); }9374  to   { opacity: 1; transform: translateY(0); }9375}9376.peach-chirp-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }9377.peach-chirp-pair::before {9378  content: '';9379  position: absolute;9380  inset: 0;9381  border-radius: inherit;9382  pointer-events: none;9383  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9384  z-index: 0;9385}9386.peach-chirp-pair > * { position: relative; z-index: 1; }93879388/* Header --------------------------------------------------------------- */9389.peach-chirp-head {9390  display: flex; align-items: center; gap: 10px;9391}9392.peach-chirp-back {9393  width: 32px; height: 32px;9394  display: inline-flex; align-items: center; justify-content: center;9395  background: transparent;9396  border: none;9397  border-radius: 8px;9398  color: var(--peach-t1);9399  cursor: pointer;9400  transition: color 0.15s ease, box-shadow 0.15s ease;9401}9402.peach-chirp-back:hover {9403  color: var(--peach-accent);9404  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9405}9406.peach-chirp-title {9407  font-family: var(--font-display, Georgia, serif);9408  font-style: italic;9409  font-size: 24px;9410  font-weight: 500;9411  letter-spacing: 0.005em;9412  color: var(--peach-t0);9413  line-height: 1;9414}9415.peach-chirp-head-spacer { flex: 1; }94169417/* Chip row ------------------------------------------------------------- */9418.peach-chirp-chip-row {9419  display: flex;9420  align-items: center;9421  justify-content: flex-start;9422  margin-top: 12px;9423}9424.peach-chirp-chip {9425  display: inline-flex; align-items: center; gap: 8px;9426  padding: 5px 10px 5px 8px;9427  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9428  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9429  border-radius: 999px;9430  font-family: var(--peach-mono, ui-monospace, monospace);9431  font-size: 11px;9432  letter-spacing: 0.04em;9433  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9434}9435.peach-chirp-chip-dot {9436  width: 6px; height: 6px; border-radius: 50%;9437  background: var(--peach-accent);9438  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9439}9440.peach-chirp-chip[data-phase="paired"] {9441  background: color-mix(in srgb, #4f9eda 12%, transparent);9442  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9443  color: #76b6e8;9444}9445.peach-chirp-chip[data-phase="paired"] .peach-chirp-chip-dot {9446  background: #76b6e8;9447  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9448}9449.peach-chirp-chip[data-phase="timeout"],9450.peach-chirp-chip[data-phase="mic_denied"],9451.peach-chirp-chip[data-phase="version_mismatch"],9452.peach-chirp-chip[data-phase="handshake_failed"] {9453  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9454  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9455  color: var(--peach-warn, #d29257);9456}9457.peach-chirp-chip[data-phase="timeout"] .peach-chirp-chip-dot,9458.peach-chirp-chip[data-phase="mic_denied"] .peach-chirp-chip-dot,9459.peach-chirp-chip[data-phase="version_mismatch"] .peach-chirp-chip-dot,9460.peach-chirp-chip[data-phase="handshake_failed"] .peach-chirp-chip-dot {9461  background: var(--peach-warn, #d29257);9462  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9463}94649465/* Bird stage ----------------------------------------------------------- */9466.peach-chirp-stage {9467  position: relative;9468  margin: 14px 0 8px;9469  height: 180px;9470  border-radius: 12px;9471  background:9472    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9473    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),9474    color-mix(in srgb, var(--peach-bg) 92%, #000);9475  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);9476  overflow: hidden;9477  isolation: isolate;9478}9479.peach-chirp-stage::after {9480  content: '';9481  position: absolute;9482  left: 12%; right: 12%;9483  bottom: 36px;9484  height: 1px;9485  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9486}94879488.peach-chirp-bird-slot {9489  position: absolute;9490  bottom: 8px;9491  width: 100px;9492  height: 110px;9493  display: flex;9494  align-items: flex-end;9495  justify-content: center;9496}9497.peach-chirp-bird-slot-desktop { left: 28px; }9498.peach-chirp-bird-slot-mobile { right: 28px; }94999500/* Mobile bird hops in from the right when handshake begins */9501.peach-chirp-bird-slot-mobile {9502  opacity: 1;9503  transform: translateX(-6px);9504  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9505}9506.peach-chirp-stage.act-listening .peach-chirp-bird-slot-mobile,9507.peach-chirp-stage.act-chirping .peach-chirp-bird-slot-mobile,9508.peach-chirp-stage.act-idle .peach-chirp-bird-slot-mobile {9509  opacity: 0;9510  transform: translateX(60px) rotate(8deg);9511}9512.peach-chirp-stage.act-handshake .peach-chirp-bird-slot-desktop,9513.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop {9514  transform: translateX(6px);9515  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9516}95179518/* Paired: both birds bob together */9519.peach-chirp-stage.act-paired .peach-chirp-bird-slot {9520  animation: peach-chirp-happy-bob 1.2s ease-in-out infinite;9521}9522.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { animation-delay: 0.2s; }9523.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop { --bb-x: 6px; }9524.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { --bb-x: -6px; }9525@keyframes peach-chirp-happy-bob {9526  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9527  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9528}95299530/* Bird internal -------------------------------------------------------- */9531.peach-chirp-bird {9532  width: 108px;9533  height: 108px;9534  transform-origin: 50% 95%;9535}9536.peach-chirp-bird svg { width: 100%; height: 100%; overflow: visible; }95379538.peach-chirp-bird-body {9539  transform-origin: 50% 80%;9540  animation: peach-chirp-bird-bob 2.4s ease-in-out infinite;9541}9542@keyframes peach-chirp-bird-bob {9543  0%, 100% { transform: translateY(0) scale(1, 1); }9544  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9545}95469547.peach-chirp-bird-eye-group {9548  animation: peach-chirp-blink 5.2s steps(1, end) infinite;9549  transform-origin: center;9550  transform-box: fill-box;9551}9552@keyframes peach-chirp-blink {9553  0%, 92%, 96%, 100% { transform: scaleY(1); }9554  94%                { transform: scaleY(0.05); }9555}95569557/* Pose: chirping — beak opens, head bobs, aura blooms */9558.peach-chirp-bird-pose-chirping .peach-chirp-bird-body {9559  animation:9560    peach-chirp-bird-bob 2.4s ease-in-out infinite,9561    peach-chirp-squeeze 1.7s ease-in-out infinite;9562}9563@keyframes peach-chirp-squeeze {9564  0%, 70%, 100% { transform-origin: 50% 85%; }9565  78%           { transform: scale(1.04, 0.96) translateY(1px); }9566  86%           { transform: scale(0.98, 1.02); }9567}9568.peach-chirp-bird-pose-chirping .peach-chirp-bird-head-group {9569  animation: peach-chirp-head-bob 1.7s ease-in-out infinite;9570}9571@keyframes peach-chirp-head-bob {9572  0%, 70%, 100% { transform: translateY(0) rotate(0); }9573  78%           { transform: translateY(-3px) rotate(-4deg); }9574  86%           { transform: translateY(-1px) rotate(-2deg); }9575}9576.peach-chirp-bird-pose-chirping .peach-chirp-bird-beak {9577  animation: peach-chirp-beak-open 1.7s ease-in-out infinite;9578}9579@keyframes peach-chirp-beak-open {9580  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9581  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9582  86%           { transform: rotate(-6deg); }9583}9584.peach-chirp-bird-pose-chirping .peach-chirp-bird-aura {9585  animation: peach-chirp-aura 1.7s ease-in-out infinite;9586}9587@keyframes peach-chirp-aura {9588  0%, 100% { opacity: 0; }9589  50%      { opacity: 0.8; }9590}9591.peach-chirp-bird-pose-chirping .peach-chirp-bird-tail {9592  animation: peach-chirp-tail-twitch 1.7s ease-in-out infinite;9593  transform-origin: 100% 50%;9594}9595@keyframes peach-chirp-tail-twitch {9596  0%, 75%, 100% { transform: rotate(0); }9597  82%           { transform: rotate(-3deg) translateX(-1px); }9598}95999600/* Pose: attentive — head tilts toward partner */9601.peach-chirp-bird-pose-attentive .peach-chirp-bird-head-group {9602  animation: peach-chirp-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9603}9604@keyframes peach-chirp-head-tilt {9605  0%   { transform: rotate(0) translateY(0); }9606  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9607  100% { transform: rotate(-6deg); }9608}9609.peach-chirp-bird-pose-attentive .peach-chirp-bird-tail {9610  animation: peach-chirp-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9611  transform-origin: 100% 50%;9612}9613@keyframes peach-chirp-tail-cock {9614  0%   { transform: rotate(0); }9615  100% { transform: rotate(-4deg); }9616}96179618/* Pose: happy — wing flutter, tuft perk, tail wag */9619.peach-chirp-bird-pose-happy .peach-chirp-bird-wing {9620  transform-origin: 80% 60%;9621  animation: peach-chirp-wing-flutter 0.32s ease-in-out 5;9622}9623@keyframes peach-chirp-wing-flutter {9624  0%, 100% { transform: rotate(0) translateY(0); }9625  50%      { transform: rotate(-16deg) translateY(-2px); }9626}9627.peach-chirp-bird-pose-happy .peach-chirp-bird-tuft {9628  transform-origin: 0% 100%;9629  animation: peach-chirp-tuft-perk 0.4s ease-in-out 3;9630}9631@keyframes peach-chirp-tuft-perk {9632  0%, 100% { transform: rotate(0); }9633  50%      { transform: rotate(-15deg) translateY(-1px); }9634}9635.peach-chirp-bird-pose-happy .peach-chirp-bird-tail {9636  transform-origin: 100% 50%;9637  animation: peach-chirp-tail-wag 0.5s ease-in-out 4;9638}9639@keyframes peach-chirp-tail-wag {9640  0%, 100% { transform: rotate(0); }9641  25%      { transform: rotate(6deg); }9642  75%      { transform: rotate(-6deg); }9643}9644.peach-chirp-bird-pose-happy .peach-chirp-bird-head-group {9645  animation: peach-chirp-head-perk 0.5s ease-out;9646}9647@keyframes peach-chirp-head-perk {9648  0%   { transform: translateY(0); }9649  40%  { transform: translateY(-3px) rotate(2deg); }9650  100% { transform: translateY(0); }9651}96529653/* Pose: sad — body droops forward */9654.peach-chirp-bird-pose-sad .peach-chirp-bird-body {9655  transform: translateY(5px) rotate(-2deg);9656  animation: none;9657}9658.peach-chirp-bird-pose-sad .peach-chirp-bird-head-group {9659  transform: translateY(4px) rotate(8deg);9660}9661.peach-chirp-bird-pose-sad .peach-chirp-bird-tuft { transform: rotate(15deg) translateY(2px); }9662.peach-chirp-bird-pose-sad .peach-chirp-bird-tail { transform: rotate(8deg) translateY(2px); }96639664.peach-chirp-bird-pose-hidden { opacity: 0; }96659666/* Chirp arcs ----------------------------------------------------------- */9667.peach-chirp-arcs {9668  position: absolute;9669  top: 18px;9670  width: 96px;9671  height: 70px;9672  pointer-events: none;9673}9674.peach-chirp-arcs-right { right: -60px; }9675.peach-chirp-arcs-left  { left: -60px; transform: scaleX(-1); }9676.peach-chirp-arc {9677  position: absolute;9678  top: 50%;9679  left: 0;9680  width: 40px;9681  height: 40px;9682  margin-top: -20px;9683  border: 1.2px solid #f4d5a8;9684  border-color: transparent #f4d5a8 transparent transparent;9685  border-radius: 50%;9686  opacity: 0;9687  animation: peach-chirp-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9688}9689@keyframes peach-chirp-arc-expand {9690  0%   { transform: scale(0.4); opacity: 0; }9691  20%  { opacity: 0.9; }9692  100% { transform: scale(1.6); opacity: 0; }9693}96949695/* Flight wave ---------------------------------------------------------- */9696.peach-chirp-flight-track {9697  position: absolute;9698  inset: 32px 36px 38px 36px;9699  pointer-events: none;9700}9701.peach-chirp-flight-wave {9702  position: absolute;9703  top: 8px;9704  left: 76px;9705  right: 76px;9706  height: 60px;9707  width: auto;9708  opacity: 0;9709  transition: opacity 0.15s ease;9710  stroke: #f4d5a8;9711  fill: none;9712}9713.peach-chirp-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9714.peach-chirp-flight-wave.is-visible { opacity: 1; }9715.peach-chirp-flight-path,9716.peach-chirp-flight-path-2 {9717  stroke-dasharray: 240;9718  stroke-dashoffset: 240;9719  stroke-linecap: round;9720  fill: none;9721}9722.peach-chirp-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9723.peach-chirp-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9724.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path {9725  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9726}9727.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path-2 {9728  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9729}9730@keyframes peach-chirp-fly {9731  0%   { stroke-dashoffset: 240; opacity: 0; }9732  20%  { opacity: 1; }9733  100% { stroke-dashoffset: -120; opacity: 0; }9734}97359736/* Connection dot ------------------------------------------------------- */9737.peach-chirp-dot {9738  position: absolute;9739  top: 50%; left: 50%;9740  transform: translate(-50%, -50%);9741  width: 40px; height: 40px;9742  opacity: 0;9743  pointer-events: none;9744  transition: opacity 0.3s ease;9745  color: var(--peach-accent);9746}9747.peach-chirp-dot.is-visible { opacity: 1; }9748.peach-chirp-dot-glow {9749  position: absolute; top: 50%; left: 50%;9750  transform: translate(-50%, -50%);9751  width: 38px; height: 38px;9752  border-radius: 50%;9753  filter: blur(10px);9754  opacity: 0.55;9755  background: var(--peach-accent);9756  animation: peach-chirp-dot-bloom 1.4s ease-out;9757}9758.peach-chirp-dot-core {9759  position: absolute; top: 50%; left: 50%;9760  transform: translate(-50%, -50%);9761  width: 8px; height: 8px;9762  border-radius: 50%;9763  background: var(--peach-accent);9764  box-shadow: 0 0 12px currentColor;9765  animation: peach-chirp-dot-core 1.4s ease-out;9766}9767.peach-chirp-dot-ring {9768  position: absolute; top: 50%; left: 50%;9769  width: 60px; height: 60px;9770  transform: translate(-50%, -50%);9771  animation: peach-chirp-dot-ring 1.4s linear;9772  stroke: var(--peach-accent);9773}9774@keyframes peach-chirp-dot-bloom {9775  0%   { width: 4px; height: 4px; opacity: 0; }9776  35%  { width: 60px; height: 60px; opacity: 0.7; }9777  100% { width: 38px; height: 38px; opacity: 0.55; }9778}9779@keyframes peach-chirp-dot-core {9780  0%   { width: 0; height: 0; }9781  35%  { width: 12px; height: 12px; }9782  100% { width: 8px; height: 8px; }9783}9784@keyframes peach-chirp-dot-ring {9785  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9786  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9787  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9788}97899790/* Motes — drift upward across the stage */9791.peach-chirp-motes {9792  position: absolute;9793  inset: 0;9794  pointer-events: none;9795}9796.peach-chirp-mote {9797  position: absolute;9798  width: 2px; height: 2px;9799  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9800  border-radius: 50%;9801  bottom: 32px;9802  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9803  opacity: 0;9804  animation: peach-chirp-mote-drift 6s linear infinite;9805  animation-delay: calc(var(--mote-i, 0) * 0.7s);9806}9807@keyframes peach-chirp-mote-drift {9808  0%   { transform: translateY(0); opacity: 0; }9809  10%  { opacity: 0.6; }9810  90%  { opacity: 0.1; }9811  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9812}98139814/* Status copy ---------------------------------------------------------- */9815.peach-chirp-copy-host {9816  margin: 4px 4px 10px;9817  text-align: center;9818  min-height: 50px;9819}9820.peach-chirp-copy {9821  animation: peach-chirp-copy-in 0.35s ease both;9822}9823@keyframes peach-chirp-copy-in {9824  from { opacity: 0; transform: translateY(4px); }9825  to   { opacity: 1; transform: translateY(0); }9826}9827.peach-chirp-headline {9828  font-family: var(--font-display, Georgia, serif);9829  font-style: italic;9830  font-size: 20px;9831  font-weight: 500;9832  line-height: 1.2;9833  letter-spacing: 0.005em;9834  color: var(--peach-t0);9835  margin-bottom: 6px;9836}9837.peach-chirp-copy-listening .peach-chirp-headline,9838.peach-chirp-copy-chirping .peach-chirp-headline,9839.peach-chirp-copy-idle .peach-chirp-headline {9840  font-family: inherit;9841  font-style: normal;9842  font-weight: 500;9843  font-size: 15px;9844  color: var(--peach-t0);9845  letter-spacing: 0;9846}9847.peach-chirp-copy-paired .peach-chirp-headline {9848  color: var(--peach-t0);9849  font-weight: 600;9850}9851.peach-chirp-sub {9852  font-size: 12.5px;9853  line-height: 1.45;9854  color: var(--peach-t1);9855  max-width: 280px;9856  margin: 0 auto;9857  text-wrap: pretty;9858}98599860/* Status action -------------------------------------------------------- */9861.peach-chirp-action {9862  margin: 2px 4px 10px;9863  margin-top: auto;9864  display: flex;9865  flex-direction: column;9866  gap: 8px;9867}9868.peach-chirp-action-waiting {9869  display: flex;9870  align-items: center;9871  justify-content: space-between;9872  gap: 12px;9873}9874.peach-chirp-cancel {9875  min-width: 96px;9876}9877.peach-chirp-listening {9878  display: inline-flex; align-items: center; gap: 4px;9879  font-family: var(--peach-mono, ui-monospace, monospace);9880  font-size: 9.5px;9881  text-transform: uppercase;9882  letter-spacing: 0.12em;9883  color: var(--peach-t1);9884  padding: 8px 10px;9885}9886.peach-chirp-listen-dot {9887  width: 4px; height: 4px;9888  border-radius: 50%;9889  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9890  animation: peach-chirp-listen-pulse 1.2s ease-in-out infinite;9891}9892.peach-chirp-listen-dot:nth-child(2) { animation-delay: 0.2s; }9893.peach-chirp-listen-dot:nth-child(3) { animation-delay: 0.4s; }9894.peach-chirp-listen-label { margin-left: 6px; }9895@keyframes peach-chirp-listen-pulse {9896  0%, 100% { opacity: 0.25; transform: scale(0.9); }9897  50%      { opacity: 1;     transform: scale(1.15); }9898}98999900.peach-chirp-action-handshake {9901  display: flex;9902  flex-direction: column;9903  align-items: center;9904  gap: 8px;9905  padding: 8px 4px;9906}9907.peach-chirp-meter {9908  width: 100%;9909  max-width: 280px;9910  height: 2px;9911  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9912  border-radius: 2px;9913  position: relative;9914  overflow: hidden;9915}9916.peach-chirp-meter-bar {9917  position: absolute;9918  top: 0; bottom: 0;9919  width: 30%;9920  left: -30%;9921  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9922  animation: peach-chirp-meter-sweep 1.4s ease-in-out infinite;9923}9924@keyframes peach-chirp-meter-sweep {9925  0%   { left: -30%; }9926  100% { left: 100%; }9927}9928.peach-chirp-meter-label {9929  font-family: var(--peach-mono, ui-monospace, monospace);9930  font-size: 9.5px;9931  text-transform: uppercase;9932  letter-spacing: 0.14em;9933  color: var(--peach-t1);9934}99359936.peach-chirp-action-paired {9937  display: flex;9938  align-items: center;9939  gap: 10px;9940}9941.peach-chirp-device-confirm {9942  flex: 1;9943  display: inline-flex;9944  align-items: center;9945  gap: 8px;9946  padding: 9px 10px 9px 12px;9947  border-radius: 10px;9948  background: color-mix(in srgb, #76b6e8 12%, transparent);9949  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9950  font-size: 12.5px;9951  color: var(--peach-t0);9952  min-width: 0;9953}9954.peach-chirp-device-confirm-glyph {9955  display: inline-flex;9956  color: #76b6e8;9957}9958.peach-chirp-device-confirm-name {9959  flex: 1;9960  overflow: hidden;9961  text-overflow: ellipsis;9962  white-space: nowrap;9963}9964.peach-chirp-device-confirm-trust {9965  font-family: var(--peach-mono, ui-monospace, monospace);9966  font-size: 9.5px;9967  text-transform: uppercase;9968  letter-spacing: 0.1em;9969  color: #76b6e8;9970  padding: 2px 6px;9971  border-radius: 4px;9972  background: color-mix(in srgb, #76b6e8 14%, transparent);9973}9974.peach-chirp-done {9975  min-width: 80px;9976}9977.peach-chirp-retry {9978  align-self: center;9979  display: block;9980  margin: 6px auto 0;9981  min-width: 120px;9982}9983.peach-chirp-mic-help {9984  font-size: 12px;9985  color: var(--peach-t1);9986  text-align: center;9987  max-width: 320px;9988  margin: 0 auto;9989}99909991/* Rest state — bird stage at idle pose, primary CTA + paired list */9992.peach-chirp-pair[data-phase="idle"] .peach-chirp-stage {9993  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9994  height: 160px;9995}9996.peach-chirp-pair-start {9997  width: 100%;9998  display: inline-flex;9999  align-items: center;10000  justify-content: center;10001  gap: 8px;10002  padding: 11px 14px;10003  border-radius: 10px;10004  background: var(--peach-accent);10005  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);10006  color: #1a0905;10007  font-family: inherit;10008  font-size: 13px;10009  font-weight: 600;10010  letter-spacing: 0.01em;10011  cursor: pointer;10012  transition: filter 0.15s ease, transform 0.1s ease;10013}10014.peach-chirp-pair-start:hover { filter: brightness(1.08); }10015.peach-chirp-pair-start:active { transform: translateY(1px); }1001610017.peach-chirp-paired-section {10018  margin-top: 14px;10019  display: flex;10020  flex-direction: column;10021  gap: 8px;10022}10023.peach-chirp-paired-heading {10024  margin: 0;10025  font-family: var(--peach-mono, ui-monospace, monospace);10026  font-size: 10px;10027  font-weight: 500;10028  letter-spacing: 0.14em;10029  text-transform: uppercase;10030  color: var(--peach-t1);10031}1003210033/* Footer --------------------------------------------------------------- */10034.peach-chirp-foot {10035  margin: 10px -4px -2px;10036  margin-top: auto;10037}10038.peach-chirp-foot-divider {10039  height: 1px;10040  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);10041  margin-bottom: 10px;10042}10043.peach-chirp-foot-text {10044  font-size: 11px;10045  line-height: 1.5;10046  color: var(--peach-t1);10047  text-align: center;10048  padding: 0 4px;10049  text-wrap: pretty;10050}1005110052/* Screen-reader-only live region. Kept off the visual flow but read by10053   assistive tech as the pairing phase advances. */10054.peach-sr-only {10055  position: absolute;10056  width: 1px; height: 1px;10057  padding: 0; margin: -1px;10058  overflow: hidden;10059  clip: rect(0, 0, 0, 0);10060  white-space: nowrap;10061  border: 0;10062}1006310064/* Reduced motion — stage simplifies to opacity transitions only */10065@media (prefers-reduced-motion: reduce) {10066  .peach-chirp-bird-body,10067  .peach-chirp-bird-head-group,10068  .peach-chirp-bird-beak,10069  .peach-chirp-bird-wing,10070  .peach-chirp-bird-tuft,10071  .peach-chirp-bird-tail,10072  .peach-chirp-bird-eye-group,10073  .peach-chirp-bird-aura,10074  .peach-chirp-arc,10075  .peach-chirp-flight-path,10076  .peach-chirp-flight-path-2,10077  .peach-chirp-dot-glow,10078  .peach-chirp-dot-core,10079  .peach-chirp-dot-ring,10080  .peach-chirp-mote,10081  .peach-chirp-meter-bar,10082  .peach-chirp-listen-dot,10083  .peach-chirp-bird-slot,10084  .peach-chirp-bird-slot-mobile {10085    animation: none !important;10086    transition: opacity 0.2s linear !important;10087  }10088}1008910090/* ─────────────────────────────────────────────────────────────────10091   Settings → Sync surface (v3 ChirpSync). Wraps the same bird10092   animation used by the pairing flow with a paired-devices list and10093   the "Pair a device" CTA.10094   ───────────────────────────────────────────────────────────────── */10095.peach-chirp-settings {10096  position: absolute;10097  inset: 0;10098  z-index: 3;10099  display: flex;10100  flex-direction: column;10101  gap: 18px;10102  padding: 14px 12px 12px;10103  width: 100%;10104  box-sizing: border-box;10105  overflow-y: auto;10106  overflow-x: hidden;10107  /* Same warm Chirp surface as the pairing screen — unifies the two views. */10108  background:10109    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),10110    var(--peach-bg);10111  color: var(--peach-t0);10112  isolation: isolate;10113  /* Hide native scrollbar — content fits 99% of the time and a chunky10114     gutter ruins the surface. */10115  scrollbar-width: none;10116  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;10117}10118.peach-chirp-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }10119.peach-chirp-settings::before {10120  content: '';10121  position: absolute;10122  inset: 0;10123  pointer-events: none;10124  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);10125  z-index: 0;10126}10127.peach-chirp-settings > * { position: relative; z-index: 1; }1012810129.peach-chirp-settings--pairing {10130  padding: 0;10131  align-items: stretch;10132  justify-content: stretch;10133  background: none;10134  isolation: auto;10135}10136.peach-chirp-settings--pairing::before { display: none; }1013710138.peach-chirp-settings-header {10139  display: flex;10140  align-items: center;10141  gap: 10px;10142}10143.peach-chirp-settings-title {10144  margin: 0;10145  font-family: var(--font-display, Georgia, serif);10146  font-style: italic;10147  font-size: 24px;10148  font-weight: 500;10149  line-height: 1;10150  color: var(--peach-t0);10151  letter-spacing: 0.005em;10152}10153.peach-chirp-settings-section {10154  margin: 6px 0 -4px;10155  font-size: 11px;10156  font-weight: 600;10157  letter-spacing: 0.08em;10158  text-transform: uppercase;10159  color: var(--peach-text-muted);10160}10161.peach-chirp-settings-error {10162  font-size: 12px;10163  padding: 8px 10px;10164  border-radius: 8px;10165  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);10166  color: var(--peach-text);10167}10168.peach-chirp-settings-footer {10169  margin-top: auto;10170  padding-top: 18px;10171  font-size: 11.5px;10172  line-height: 1.5;10173  color: var(--peach-text-muted);10174  text-align: center;10175}1017610177/* Hero card shown when no devices are paired yet. */10178.peach-chirp-hero {10179  display: flex;10180  flex-direction: column;10181  align-items: center;10182  gap: 12px;10183  padding: 20px 12px 8px;10184  text-align: center;10185}10186.peach-chirp-hero-svg {10187  display: block;10188  max-width: 100%;10189  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));10190}10191.peach-chirp-hero-headline {10192  margin: 0;10193  font-family: var(--font-display, Georgia, serif);10194  font-style: italic;10195  font-size: 20px;10196  font-weight: 500;10197  line-height: 1.2;10198  letter-spacing: 0.005em;10199  color: var(--peach-t0);10200}10201.peach-chirp-hero-sub {10202  margin: 0;10203  font-size: 13px;10204  line-height: 1.5;10205  color: var(--peach-t1);10206  max-width: 320px;10207  text-wrap: pretty;10208}1020910210.peach-chirp-pair-cta {10211  display: flex;10212  justify-content: center;10213  padding: 4px 0 6px;10214}10215.peach-chirp-pair-button {10216  display: inline-flex;10217  align-items: center;10218  gap: 8px;10219  min-width: 220px;10220  justify-content: center;10221}10222.peach-chirp-pair-button-icon {10223  flex: 0 0 auto;10224}1022510226/* Paired devices list. Roomy rows that look at home next to the rest10227   of Settings; stale rows get a soft warm-warning border tint. */10228.peach-chirp-device-list {10229  list-style: none;10230  margin: 0;10231  padding: 0;10232  display: flex;10233  flex-direction: column;10234  gap: 8px;10235}10236.peach-chirp-device-row {10237  display: flex;10238  align-items: center;10239  gap: 12px;10240  padding: 12px;10241  border-radius: 10px;10242  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10243  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);10244}10245.peach-chirp-device-row[data-stale="true"] {10246  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);10247}10248.peach-chirp-device-icon {10249  width: 32px;10250  height: 32px;10251  display: flex;10252  align-items: center;10253  justify-content: center;10254  border-radius: 8px;10255  color: var(--peach-text);10256  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);10257}10258.peach-chirp-device-info {10259  flex: 1;10260  display: flex;10261  flex-direction: column;10262  gap: 2px;10263  min-width: 0;10264}10265.peach-chirp-device-name {10266  font-size: 14px;10267  font-weight: 600;10268  color: var(--peach-text);10269  overflow: hidden;10270  text-overflow: ellipsis;10271  white-space: nowrap;10272}10273.peach-chirp-device-meta {10274  font-size: 11.5px;10275  color: var(--peach-text-muted);10276  display: flex;10277  flex-wrap: wrap;10278  align-items: center;10279  gap: 8px;10280}10281.peach-chirp-device-badge {10282  font-size: 10.5px;10283  font-weight: 500;10284  letter-spacing: 0.02em;10285  padding: 2px 6px;10286  border-radius: 999px;10287  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);10288  color: var(--peach-text);10289}10290.peach-chirp-device-stale {10291  font-size: 10.5px;10292  font-weight: 500;10293  color: var(--peach-warn, #d29257);10294}10295.peach-chirp-device-remove {10296  flex: 0 0 auto;10297  color: var(--peach-text-muted);10298}10299.peach-chirp-device-remove:hover {10300  color: var(--peach-danger, #c25b4a);10301}10302.peach-chirp-unpair-confirm {10303  display: flex;10304  gap: 6px;10305  align-items: center;10306}1030710308/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */10309.peach-chirp-pro-card {10310  position: relative;10311  margin: 18px 12px;10312  padding: 18px 20px 22px;10313  border-radius: 22px;10314  background:10315    radial-gradient(140% 90% at 50% 0%,10316      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,10317      transparent 60%),10318    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10319  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);10320  box-shadow:10321    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,10322    0 18px 40px -24px rgba(0, 0, 0, 0.45);10323  display: flex;10324  flex-direction: column;10325  align-items: center;10326  gap: 10px;10327  text-align: center;10328  overflow: hidden;10329}10330.peach-chirp-pro-stage {10331  position: relative;10332  width: 220px;10333  height: 140px;10334  display: flex;10335  align-items: flex-end;10336  justify-content: center;10337  margin-bottom: 2px;10338}10339.peach-chirp-pro-bird-slot {10340  width: 140px;10341  height: 132px;10342  display: flex;10343  align-items: flex-end;10344  justify-content: center;10345  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));10346}10347.peach-chirp-pro-bird-slot .peach-chirp-bird {10348  width: 100%;10349  height: 100%;10350}10351.peach-chirp-pro-bird-slot .peach-chirp-bird svg {10352  width: 100%;10353  height: 100%;10354  overflow: visible;10355}10356.peach-chirp-pro-chirp {10357  position: absolute;10358  top: 14px;10359  right: 8px;10360  width: 96px;10361  height: 80px;10362  color: var(--peach-accent);10363  animation: peach-chirp-pulse 2.6s ease-in-out infinite;10364  transform-origin: 0% 50%;10365  pointer-events: none;10366}10367@keyframes peach-chirp-pulse {10368  0%, 100% { opacity: 0.35; transform: translateX(0) scale(0.92); }10369  45%      { opacity: 1;    transform: translateX(2px) scale(1); }10370  70%      { opacity: 0.6;  transform: translateX(4px) scale(1.04); }10371}10372@media (prefers-reduced-motion: reduce) {10373  .peach-chirp-pro-chirp { animation: none; opacity: 0.7; }10374}10375.peach-chirp-pro-headline {10376  margin: 4px 0 0;10377  font-family: var(--font-display, "Cormorant Garamond", serif);10378  font-style: italic;10379  font-size: 19px;10380  font-weight: 500;10381  letter-spacing: 0.01em;10382  color: var(--peach-t0);10383  max-width: 280px;10384  line-height: 1.25;10385}10386.peach-chirp-pro-body {10387  margin: 0;10388  font-size: 13px;10389  line-height: 1.55;10390  color: var(--peach-t1);10391  max-width: 300px;10392}10393.peach-chirp-pro-cta {10394  margin-top: 4px;10395}10396.peach-chirp-pro-foot {10397  margin: 2px 0 0;10398  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10399  font-size: 0.625rem;10400  letter-spacing: 0.08em;10401  text-transform: uppercase;10402  color: var(--peach-t2);10403  opacity: 0.75;10404}1040510406/* Shell border and shadow in light mode: match dark mode's near-invisible10407   border weight so the popup frame looks the same in both themes. */10408.light .peach-shell,10409.light .peach-screen {10410  border-color: rgba(26, 18, 8, 0.07);10411  box-shadow:10412    0 2px 8px rgba(80, 56, 32, 0.08),10413    0 14px 48px rgba(80, 56, 32, 0.10),10414    0 0 0 1px rgba(26, 18, 8, 0.04);10415}