popup.css

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