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.peach-additional-url-row {652  display: flex;653  align-items: center;654  gap: 6px;655}656.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }657.peach-additional-url-remove {658  background: transparent;659  border: 1px solid var(--peach-t3);660  color: var(--peach-t2);661  width: 22px;662  height: 22px;663  border-radius: 4px;664  cursor: pointer;665  font-size: 0.875rem;666  line-height: 1;667  display: inline-flex;668  align-items: center;669  justify-content: center;670  flex-shrink: 0;671  transition: color 120ms ease, border-color 120ms ease;672}673.peach-additional-url-remove:hover:not(:disabled) {674  color: var(--peach-accent);675  border-color: var(--peach-border-accent);676}677.peach-additional-urls-add { align-self: flex-start; }678679/* Delete row */680.peach-entry-delete-row {681  display: flex;682  align-items: center;683  gap: 8px;684  padding-top: 18px;685  margin-top: 8px;686  border-top: 1px solid var(--peach-t3);687}688.peach-delete-btn {689  font-size: 0.6875rem;690  color: var(--peach-t2);691  padding: 4px 0;692}693.peach-delete-confirm-text {694  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;695  font-size: 0.6875rem;696  font-style: italic;697  color: var(--peach-t2);698  flex-shrink: 0;699}700701/* TOTP band */702.peach-totp-band {703  border-top: 1px solid var(--peach-t3);704  padding: 12px 20px 14px;705  position: relative;706  display: grid;707  grid-template-columns: 1fr auto;708  gap: 10px;709}710.peach-totp-main {711  min-width: 0;712  cursor: pointer;713  user-select: none;714}715.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }716.peach-totp-code-row {717  display: flex;718  align-items: flex-end;719  gap: 10px;720  min-width: 0;721}722.peach-totp-code {723  margin: 2px 0 0;724  font-family: var(--font-display);725  font-style: italic;726  font-weight: 300;727  font-size: 38px; color: var(--peach-accent);728  line-height: 0.95; min-height: 1em;729  min-width: 0;730}731.peach-totp-code-text {732  display: inline-flex;733  overflow: hidden;734  text-overflow: ellipsis;735  white-space: nowrap;736}737.peach-totp-copy-btn {738  margin-bottom: 2px;739  flex-shrink: 0;740  border-color: transparent;741}742.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }743.peach-totp-countdown {744  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;745  font-size: 22px; color: var(--peach-t1);746}747.peach-totp-ring { transform: rotate(-90deg); }748.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }749.peach-totp-ring-progress {750  fill: none; stroke: var(--peach-accent); stroke-width: 2;751  stroke-linecap: round;752  transition: stroke-dashoffset 1s linear, stroke 500ms ease;753}754/* Search bar */755.peach-search-wrap {756  border-top: 1px solid var(--peach-t3);757  background: var(--peach-s1);758  min-height: 54px; position: relative;759  box-shadow: inset 0 6px 18px transparent;760  transition: box-shadow 700ms ease;761}762.peach-search-wrap::before {763  content: "";764  position: absolute;765  left: 0;766  top: 0;767  height: 2px;768  width: var(--peach-totp-progress, 0%);769  background: var(--peach-accent);770  opacity: 0;771  transition: width 1s linear, opacity 180ms ease;772  pointer-events: none;773}774.peach-shell[data-totp-active="true"] .peach-search-wrap::before {775  opacity: 0.9;776}777.peach-shell[data-totp-active="true"] .peach-search-wrap {778  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);779}780781@keyframes peach-totp-code-flare {782  0%   { filter: brightness(1); }783  25%  { filter: brightness(1.3); }784  100% { filter: brightness(1); }785}786.peach-totp-code.is-hot {787  animation: peach-totp-code-flare 3000ms ease-in-out both;788}789.peach-search-bar {790  min-height: 54px;791  display: grid;792  grid-template-columns: auto minmax(0, 1fr) auto;793  align-items: center;794  gap: 8px; padding: 0 9px 0 12px;795}796.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }797.peach-search-input {798  border: 0; background: transparent; color: var(--peach-t0);799  font-family: var(--font-display);800  font-style: italic; font-size: 18px;801  outline: none; width: 100%; min-width: 0; padding: 0;802  caret-color: var(--peach-accent);803}804.peach-search-input::placeholder { color: var(--peach-t2); }805.peach-search-meta {806  display: grid;807  grid-auto-flow: column;808  align-items: center;809  justify-content: end;810  gap: 6px;811  min-width: max-content;812}813.peach-search-counter {814  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;815  font-size: 0.625rem; color: var(--peach-t2);816  display: inline-flex;817  align-items: center;818  line-height: 1;819}820.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }821822/* Buttons */823.peach-btn {824  border: 1px solid transparent; border-radius: 12px;825  background: transparent; color: var(--peach-t0);826  font-family: Inter, system-ui, sans-serif;827  font-size: 0.75rem; letter-spacing: 0.02em; padding: 8px 12px;828  cursor: pointer;829  transition:830    background-color var(--peach-dur-80) var(--peach-curve-arrival),831    color var(--peach-dur-80) var(--peach-curve-arrival),832    border-color var(--peach-dur-150) var(--peach-curve-arrival);833}834.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }835.peach-btn:disabled {836  opacity: 0.45;837  cursor: not-allowed;838}839.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 0.6875rem; }840.peach-btn--md { min-height: 38px; }841.peach-btn--accent {842  background: var(--peach-accent);843  color: rgba(0,0,0,0.92);844  font-weight: 500;845  box-shadow:846    0 1px 0 rgba(255,255,255,0.08) inset,847    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),848    0 3px 16px var(--peach-glow),849    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);850}851.peach-btn--accent:hover:not(:disabled) {852  background: var(--peach-accent);853  filter: brightness(1.10) saturate(1.05);854  box-shadow:855    0 1px 0 rgba(255,255,255,0.10) inset,856    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),857    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),858    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);859}860.peach-btn--ghost:not(.peach-icon-btn) { border-color: var(--peach-t3); color: var(--peach-t1); }861.peach-btn--ghost.peach-icon-btn { color: var(--peach-t1); }862.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }863.peach-icon-btn {864  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;865  display: inline-flex; align-items: center; justify-content: center;866  border-color: transparent;867  transition:868    color var(--peach-dur-80) var(--peach-curve-arrival),869    box-shadow var(--peach-dur-150) var(--peach-curve-arrival),870    background-color var(--peach-dur-80) var(--peach-curve-arrival);871}872.peach-icon-btn:hover:not(:disabled) {873  background: transparent;874  color: var(--peach-accent);875  box-shadow: 0 0 12px color-mix(in srgb, var(--peach-accent) 28%, transparent),876              0 0 4px color-mix(in srgb, var(--peach-accent) 16%, transparent);877}878879.peach-btn:focus-visible {880  outline: none;881  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);882}883884/* Lock button */885.peach-lock-icon { transform-origin: center; }886.peach-lock-btn { color: var(--peach-accent); }887.peach-lock-btn.is-locking .peach-lock-icon {888  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);889}890891/* Biometric unlock button */892.peach-biometric-btn {893  display: flex;894  align-items: center;895  justify-content: center;896  gap: 6px;897  margin-top: 8px;898  width: 100%;899}900901/* Copy button */902.peach-copy-btn {903  position: relative; overflow: hidden;904  color: var(--peach-t2); border-color: var(--peach-t3);905}906.peach-copy-icon {907  display: inline-flex; align-items: center; justify-content: center;908  position: relative; z-index: 1;909}910.peach-copy-icon-svg { display: block; }911.peach-copy-sheen {912  position: absolute; inset: 0;913  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%);914  opacity: 0; transform: scaleX(0.15); transform-origin: left center;915}916.peach-copy-btn.is-copied {917  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;918  box-shadow:919    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),920    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),921    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);922}923.peach-copy-btn.is-copied .peach-copy-icon {924  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;925}926.peach-copy-btn.is-copied .peach-copy-sheen {927  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;928}929.peach-copy-btn.is-retreat {930  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;931}932.peach-copy-btn.is-retreat .peach-copy-sheen {933  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;934}935.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }936.peach-copy-drain-bar {937  display: block; width: 100%; height: 100%;938  background: var(--peach-accent); opacity: 0.7;939  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;940}941942/* Unlock screen elements */943.peach-underline-input {944  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);945  padding: 6px 0; background: transparent; color: var(--peach-t0);946  outline: none;947  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;948  font-size: 0.8125rem;949  caret-color: var(--peach-accent);950}951.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }952.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }953.peach-hint {954  margin: 0;955  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;956  font-size: 0.625rem; color: var(--peach-t2);957}958.peach-unlock-footer {959  margin-top: 4px; display: flex; align-items: center; gap: 7px;960  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;961  font-size: 0.625rem; color: var(--peach-t2);962}963.peach-unlock-footer--lock {964  padding-top: 2px;965}966967/* Breach badge */968.peach-breach-badge {969  display: flex;970  position: relative;971  z-index: 1;972  align-items: center;973  gap: 7px;974  font-size: 0.5625rem;975  color: var(--peach-breach);976  padding: 5px 10px;977  margin-bottom: 4px;978  border-radius: 8px;979  background: rgba(220, 80, 60, 0.07);980  border: 1px solid rgba(220, 80, 60, 0.18);981  letter-spacing: 0.04em;982}983984.peach-password-value.is-breached {985  color: rgba(220, 80, 60, 0.75);986  border-bottom: 1px solid rgba(220, 80, 60, 0.22);987}988989/* ── Overlay views ─────────────────────────────────────────────────── */990.peach-overlay-view {991  position: absolute;992  inset: 0;993  display: flex;994  flex-direction: column;995  background:996    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),997    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),998    var(--peach-bg);999  z-index: 2;1000  overflow: hidden;1001  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1002}10031004.peach-overlay-view:has(.stk-shell) {1005  background: var(--peach-bg);1006}1007@keyframes overlay-in {1008  from { opacity: 0; transform: translateY(8px); }1009  to   { opacity: 1; transform: translateY(0); }1010}1011.peach-overlay-view.ov-enter-up {1012  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1013}1014.peach-overlay-view.ov-exit-up {1015  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1016}1017.peach-overlay-view.ov-enter-right {1018  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1019}1020.peach-overlay-view.ov-exit-right {1021  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1022}10231024@keyframes ov-enter-up {1025  from { opacity: 0; transform: translateY(18px); }1026  to   { opacity: 1; transform: translateY(0); }1027}1028@keyframes ov-exit-up {1029  from { opacity: 1; transform: translateY(0); }1030  to   { opacity: 0; transform: translateY(-12px); }1031}1032@keyframes ov-enter-right {1033  from { opacity: 0; transform: translateX(20px); }1034  to   { opacity: 1; transform: translateX(0); }1035}1036@keyframes ov-exit-right {1037  from { opacity: 1; transform: translateX(0); }1038  to   { opacity: 0; transform: translateX(20px); }1039}10401041/* Overlay shared header */1042.peach-overlay-header {1043  padding: 10px 12px 8px;1044  display: flex;1045  align-items: center;1046  gap: 10px;1047  flex-shrink: 0;1048}1049/* Back button — circular pill matching the settings stack masthead (.stk-back) */1050.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1051  width: 28px;1052  height: 28px;1053  flex: 0 0 28px;1054  border-radius: 999px;1055  border: 1px solid var(--peach-border);1056  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1057  color: var(--peach-t1);1058  padding: 0;1059}1060.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1061  color: var(--peach-t0);1062  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1063  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1064}1065.peach-overlay-title {1066  font-family: var(--font-display);1067  font-style: italic;1068  font-weight: 400;1069  font-size: 20px;1070  line-height: 1;1071  color: var(--peach-t0);1072  flex: 1;1073  text-align: center;1074}1075/* Balances the 28px back button so the title stays visually centred */1076.peach-overlay-spacer {1077  width: 28px;1078  flex: 0 0 28px;1079}10801081.peach-overlay-card {1082  background: var(--peach-s1);1083  border: 1px solid var(--peach-t3);1084  border-radius: 12px;1085  overflow: hidden;1086  width: 100%;1087}10881089.peach-onboarding-alt-actions {1090  display: flex;1091  flex-direction: column;1092  gap: 4px;1093  padding: 0;1094}10951096.peach-settings-copy {1097  margin: 0 0 10px;1098  font-size: 0.6875rem;1099  line-height: 1.5;1100  color: var(--peach-t2);1101}11021103.peach-settings-copy strong {1104  color: var(--peach-t0);1105}11061107.peach-settings-copy--spacious {1108  margin-bottom: 12px;1109}11101111.peach-settings-copy--result {1112  color: var(--peach-accent);1113  font-size: 0.8125rem;1114  text-align: center;1115  padding: 8px 0;1116}11171118.peach-settings-copy--danger {1119  color: var(--peach-breach);1120}11211122.peach-settings-copy--success {1123  color: var(--peach-accent);1124}11251126.peach-inline-feedback {1127  font-size: 0.6875rem;1128  margin: 10px 0 0;1129}11301131.peach-inline-feedback--ok {1132  color: var(--peach-accent);1133}11341135.peach-inline-feedback--error {1136  color: var(--peach-breach);1137}11381139.peach-inline-feedback--muted {1140  color: var(--peach-t2);1141  font-size: 0.625rem;1142  margin: 4px 0;1143}11441145.peach-inline-feedback--spaced {1146  margin-top: 12px;1147}11481149.peach-settings-actions--row {1150  display: flex;1151  gap: 6px;1152}11531154.peach-settings-actions--end {1155  margin-top: 14px;1156  justify-content: flex-end;1157}11581159.peach-settings-stack {1160  display: flex;1161  flex-direction: column;1162  gap: 6px;1163}11641165.peach-settings-stack--tight {1166  gap: 4px;1167}11681169.peach-settings-stack--spacious {1170  gap: 8px;1171}11721173.peach-settings-input {1174  width: 100%;1175  box-sizing: border-box;1176  padding: 8px 10px;1177  background: rgba(0, 0, 0, 0.22);1178  border: 1px solid transparent;1179  border-radius: 6px;1180  color: var(--peach-t0);1181  font-family: var(--font-ui);1182  font-size: 0.75rem;1183  outline: none;1184  transition: border-color 120ms ease, background 120ms ease;1185}11861187.peach-settings-input:focus {1188  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1189  background: rgba(0, 0, 0, 0.28);1190}11911192.peach-settings-input[type="password"] {1193  font-family: var(--font-mono);1194  letter-spacing: 0.04em;1195}11961197.peach-hidden-file-input {1198  display: none;1199}12001201.peach-checkbox-note {1202  display: flex;1203  align-items: flex-start;1204  gap: 8px;1205  font-size: 0.6875rem;1206  color: var(--peach-t1);1207  cursor: pointer;1208  margin: 12px 0;1209}12101211.peach-checkbox-note input {1212  margin-top: 1px;1213}12141215.peach-danger-notice {1216  background: rgba(220, 80, 60, 0.08);1217  border: 1px solid rgba(220, 80, 60, 0.2);1218  border-radius: 6px;1219  padding: 9px 11px;1220  font-size: 0.6875rem;1221  color: var(--peach-t1);1222  line-height: 1.5;1223}12241225.peach-info-notice {1226  font-size: 0.6875rem;1227  color: var(--peach-t1);1228  line-height: 1.5;1229  background: var(--surface-card);1230  border: 1px solid var(--peach-t3);1231  border-radius: 6px;1232  padding: 8px 10px;1233}12341235.peach-info-notice--warn {1236  border-color: rgba(220, 38, 38, 0.4);1237  background: rgba(220, 38, 38, 0.06);1238  color: rgba(220, 38, 38, 0.92);1239  margin-bottom: 8px;1240}12411242.peach-strength-row {1243  display: flex;1244  align-items: center;1245  gap: 8px;1246  margin-bottom: 10px;1247}12481249.peach-strength-track {1250  flex: 1;1251  height: 4px;1252  background: var(--peach-s2);1253  border-radius: 2px;1254  overflow: hidden;1255}12561257.peach-strength-fill {1258  height: 100%;1259  border-radius: 2px;1260  transition: width 120ms ease, background 120ms ease;1261}12621263/* ── Type selector tabs ── */1264.peach-type-tabs {1265  display: flex;1266  gap: 0;1267  background: var(--peach-t4);1268  border-radius: 8px;1269  padding: 3px;1270}12711272.peach-type-tab {1273  flex: 1;1274  display: flex;1275  align-items: center;1276  justify-content: center;1277  gap: 6px;1278  padding: 6px 10px;1279  border-radius: 6px;1280  border: none;1281  background: transparent;1282  cursor: pointer;1283  font-family: Inter, system-ui, sans-serif;1284  font-size: 0.6875rem;1285  font-weight: 400;1286  letter-spacing: 0.04em;1287  color: var(--peach-t1);1288  transition: background 150ms ease, color 150ms ease;1289}12901291.peach-type-tab.is-active {1292  background: var(--peach-s2);1293  color: var(--peach-t0);1294  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1295}12961297.peach-type-tab:not(.is-active):hover {1298  color: var(--peach-t0);1299}13001301.peach-type-tab svg {1302  opacity: 0.7;1303  flex-shrink: 0;1304}13051306.peach-type-tab.is-active svg {1307  opacity: 1;1308}13091310/* ── List view ───────────────────────────────────────────────────────── */1311.peach-list-top {1312  padding: 0 10px;1313  min-height: 46px;1314  display: flex;1315  align-items: center;1316  gap: 6px;1317  border-bottom: 1px solid var(--peach-t3);1318  flex-shrink: 0;1319  background: var(--peach-s1);1320}13211322.peach-vault-list {1323  flex: 1;1324  overflow-y: auto;1325  scrollbar-width: none;1326}1327.peach-vault-list::-webkit-scrollbar { display: none; }13281329/* Scrollbar — vault list */1330.peach-vault-list {1331  scrollbar-width: thin;1332  scrollbar-color: var(--peach-t3) transparent;1333}13341335.peach-vault-list::-webkit-scrollbar {1336  width: 3px;1337}13381339.peach-vault-list::-webkit-scrollbar-thumb {1340  background: var(--peach-t3);1341  border-radius: 2px;1342}13431344.peach-entry-row {1345  width: 100%;1346  display: flex;1347  align-items: center;1348  gap: 10px;1349  padding: 9px 16px;1350  background: transparent;1351  border: none;1352  border-bottom: 1px solid var(--peach-t3);1353  cursor: pointer;1354  color: inherit;1355  text-align: left;1356  transition: background 80ms ease;1357}1358.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1359.peach-entry-row:last-child { border-bottom: none; }1360.peach-entry-row.is-active {1361  box-shadow: inset 2px 0 0 var(--peach-accent);1362  background: rgba(240,232,216,0.03);1363}1364.peach-entry-row:focus-visible {1365  outline: none;1366  box-shadow: 0 0 0 1px var(--peach-border-accent);1367  background: rgba(240,232,216,0.03);1368}1369.peach-entry-row-icon {1370  width: 26px; height: 26px;1371  border-radius: 7px;1372  border: 1px solid var(--peach-t3);1373  display: flex; align-items: center; justify-content: center;1374  color: var(--peach-t2);1375  flex-shrink: 0;1376}1377.peach-entry-row-icon.is-breach {1378  border-color: rgba(220,80,60,0.3);1379  color: rgba(220,80,60,0.7);1380}13811382/* Title-initials chip used as the favicon fallback for login entries whose1383 * real favicon hasn't been cached by the browser yet (freshly-imported,1384 * never-visited domains). Background colour is hashed from the title so1385 * the same entry always shows the same chip. The chip fits the same1386 * 26×26 row icon slot the favicon would take. */1387.peach-favicon-initials {1388  display: inline-flex;1389  align-items: center;1390  justify-content: center;1391  width: 100%;1392  height: 100%;1393  border-radius: 4px;1394  font-family: "IBM Plex Mono", monospace;1395  font-size: 0.5625rem;1396  font-weight: 600;1397  letter-spacing: 0.04em;1398  color: rgba(240, 232, 216, 0.92);1399  text-transform: uppercase;1400  user-select: none;1401}1402.peach-entry-row-info { flex: 1; min-width: 0; }1403.peach-entry-row-name {1404  display: block;1405  font-family: var(--font-display);1406  font-size: 1.0625rem;1407  font-style: italic;1408  font-weight: 400;1409  color: var(--peach-t0);1410  line-height: 1.2;1411  white-space: nowrap;1412  overflow: hidden;1413  text-overflow: ellipsis;1414}1415.peach-entry-row-meta {1416  display: block;1417  font-family: "IBM Plex Mono", monospace;1418  font-size: 0.5625rem;1419  color: var(--peach-t2);1420  margin-top: 1px;1421  letter-spacing: 0.05em;1422}1423.peach-entry-row-dot {1424  width: 5px; height: 5px;1425  border-radius: 50%;1426  background: rgba(220,80,60,0.7);1427  flex-shrink: 0;1428}1429.peach-new-entry-row {1430  display: flex;1431  align-items: center;1432  justify-content: center;1433  gap: 6px;1434  width: 100%;1435  padding: 11px;1436  background: transparent;1437  border: none;1438  border-top: 1px solid var(--peach-t3);1439  color: var(--peach-t2);1440  font-family: "IBM Plex Mono", monospace;1441  font-size: 0.5625rem;1442  text-transform: uppercase;1443  letter-spacing: 0.14em;1444  cursor: pointer;1445  flex-shrink: 0;1446  transition: color 120ms ease, background 120ms ease;1447}1448.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }14491450/* ── Multi-select mode ─────────────────────────────────────────────── */14511452/* Select-mode trigger button in sort bar — same shape as trash btn */1453.peach-sort-select-btn {1454  display: flex;1455  align-items: center;1456  justify-content: center;1457  padding: 3px 5px;1458  background: transparent;1459  border: none;1460  cursor: pointer;1461  color: var(--peach-t2);1462  border-radius: 4px;1463  transition: color 140ms ease, background 140ms ease;1464}1465.peach-sort-select-btn:hover {1466  color: var(--peach-t1);1467  background: var(--peach-t3);1468}14691470/* Sort bar in select mode */1471.peach-select-cancel-btn {1472  background: transparent;1473  border: none;1474  padding: 0 4px;1475  cursor: pointer;1476  font-family: "IBM Plex Mono", monospace;1477  font-size: 0.5625rem;1478  letter-spacing: 0.12em;1479  text-transform: uppercase;1480  color: var(--peach-t2);1481  transition: color 140ms ease;1482  flex-shrink: 0;1483}1484.peach-select-cancel-btn:hover { color: var(--peach-t0); }14851486.peach-select-count-label {1487  flex: 1;1488  text-align: center;1489  font-family: "IBM Plex Mono", monospace;1490  font-size: 0.5625rem;1491  letter-spacing: 0.14em;1492  text-transform: uppercase;1493  color: var(--peach-t1);1494}14951496.peach-select-all-btn {1497  background: transparent;1498  border: none;1499  padding: 0 4px;1500  cursor: pointer;1501  font-family: "IBM Plex Mono", monospace;1502  font-size: 0.5625rem;1503  letter-spacing: 0.12em;1504  text-transform: uppercase;1505  color: var(--peach-t2);1506  transition: color 140ms ease;1507  flex-shrink: 0;1508}1509.peach-select-all-btn:hover { color: var(--peach-accent); }15101511/* List in select mode */1512.peach-vault-list.is-selecting .peach-entry-row {1513  cursor: default;1514}1515.peach-vault-list.is-selecting .peach-entry-row:hover {1516  background: rgba(240,232,216,0.02);1517}1518.peach-vault-list.is-selecting .peach-entry-row.is-selected {1519  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1520}1521.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1522  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1523}15241525/* Select indicator circles in icon slot */1526.peach-entry-row-icon.is-select-icon {1527  color: var(--peach-t2);1528}1529.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1530  color: var(--peach-accent);1531}15321533/* Delete action bar at bottom (replaces new-entry row) */1534.peach-select-action-bar {1535  display: flex;1536  align-items: center;1537  justify-content: center;1538  gap: 7px;1539  width: 100%;1540  padding: 11px;1541  background: transparent;1542  border: none;1543  border-top: 1px solid var(--peach-t3);1544  color: var(--peach-t1);1545  font-family: "IBM Plex Mono", monospace;1546  font-size: 0.5625rem;1547  text-transform: uppercase;1548  letter-spacing: 0.14em;1549  cursor: pointer;1550  flex-shrink: 0;1551  transition: color 120ms ease, background 120ms ease;1552}1553.peach-select-action-bar:not(:disabled):hover {1554  color: var(--peach-t0);1555  background: rgba(220,80,60,0.06);1556}1557.peach-select-action-bar:not(:disabled):hover svg {1558  stroke: rgba(220,80,60,0.8);1559}1560.peach-select-action-bar:disabled,1561.peach-select-action-bar.is-empty {1562  color: var(--peach-t2);1563  cursor: default;1564  opacity: 0.5;1565}1566.peach-search-counter-list {1567  white-space: nowrap;1568  flex-shrink: 0;1569}1570.peach-list-empty {1571  min-height: 180px;1572  display: grid;1573  place-items: center;1574  color: var(--peach-t2);1575  font-family: "IBM Plex Mono", monospace;1576  font-size: 0.6875rem;1577}15781579/* ── Settings view ───────────────────────────────────────────────────── */1580.peach-settings-body {1581  flex: 1;1582  overflow-y: auto;1583  min-height: 0;1584  display: flex;1585  flex-direction: column;1586  padding: 2px 0 10px;1587}1588.peach-settings-group {1589  margin: 4px 10px;1590  padding: 9px 14px 11px;1591  border-radius: 12px;1592  border: 1px solid rgba(255, 255, 255, 0.07);1593  background: rgba(26, 20, 16, 0.60);1594  backdrop-filter: blur(10px) saturate(1.3);1595  -webkit-backdrop-filter: blur(10px) saturate(1.3);1596}15971598.peach-settings-group + .peach-settings-group {1599  margin-top: 6px;1600}16011602@supports not (backdrop-filter: blur(1px)) {1603  .peach-settings-group {1604    background: rgba(26, 20, 16, 0.90);1605    border-color: rgba(255, 255, 255, 0.09);1606    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1607  }1608}16091610.light .peach-settings-group,1611[data-theme="light"] .peach-settings-group {1612  background: rgba(245, 237, 226, 0.70);1613  border-color: rgba(26, 18, 8, 0.08);1614  backdrop-filter: blur(10px) saturate(1.2);1615  -webkit-backdrop-filter: blur(10px) saturate(1.2);1616}16171618@supports not (backdrop-filter: blur(1px)) {1619  .light .peach-settings-group,1620  [data-theme="light"] .peach-settings-group {1621    background: rgba(245, 237, 226, 0.97);1622    border-color: rgba(26, 18, 8, 0.10);1623  }1624}1625.peach-export-intro {1626  padding-bottom: 8px;1627}1628.peach-export-card {1629  display: grid;1630  gap: 10px;1631}1632.peach-rune-canvas {1633  border-radius: 8px;1634  background: rgba(0, 0, 0, 0.22);1635  flex: 1;1636  align-self: center;1637}1638.peach-script-input {1639  font-family: "PeachScript", monospace;1640  font-size: 0.6875rem;1641  line-height: 1.9;1642  letter-spacing: 0.06em;1643  color: var(--peach-t0);1644  background: rgba(0, 0, 0, 0.22);1645  border: none;1646  border-radius: 6px;1647  padding: 12px;1648  width: 100%;1649  min-height: 96px;1650  resize: vertical;1651  word-break: break-all;1652  scrollbar-width: none;1653  -ms-overflow-style: none;1654}16551656.peach-script-input::-webkit-scrollbar { display: none; }1657.peach-csv-warning {1658  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1659  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1660  color: var(--peach-t0);1661  border-radius: 6px;1662  padding: 10px 12px;1663  margin-bottom: 8px;1664  font-size: 0.75rem;1665  line-height: 1.45;1666}1667.peach-export-card--primary {1668  background:1669    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1670}16711672/* Export menu — distribute the three format cards across the popup. */1673.peach-export-menu {1674  display: flex;1675  flex-direction: column;1676  flex: 1;1677  min-height: 0;1678}1679.peach-export-menu .peach-settings-group {1680  flex: 1;1681  display: flex;1682  flex-direction: column;1683  justify-content: center;1684  gap: 10px;1685}16861687/* Result view — the script-string fills the remaining vertical surface. */1688.peach-export-result-group {1689  flex: 1;1690  display: flex;1691  flex-direction: column;1692  min-height: 0;1693  border-bottom: none;1694}1695.peach-export-result-group .peach-export-card {1696  flex: 1;1697  min-height: 0;1698  display: flex;1699  flex-direction: column;1700  gap: 10px;1701}1702.peach-export-result-group .peach-export-card-copy {1703  flex-shrink: 0;1704}1705.peach-export-result-group .peach-settings-label {1706  flex-shrink: 0;1707}1708.peach-export-result-group button {1709  flex-shrink: 0;1710}1711.peach-export-card-head {1712  display: flex;1713  align-items: center;1714  justify-content: space-between;1715  gap: 10px;1716}1717.peach-export-card-copy {1718  margin: 0;1719  font-size: 0.75rem;1720  line-height: 1.55;1721  color: var(--peach-t1);1722}1723.peach-export-note {1724  margin: 0;1725  font-size: 0.625rem;1726  line-height: 1.5;1727  color: var(--peach-t2);1728}1729.peach-export-strength-track {1730  height: 3px;1731  background: var(--peach-border);1732  border-radius: 2px;1733  margin: 4px 0 2px;1734  overflow: hidden;1735}1736.peach-export-strength-fill {1737  height: 100%;1738  border-radius: 2px;1739  transition: width 250ms ease, background 250ms ease;1740}1741.peach-export-strength-warn {1742  margin: 0;1743  font-size: 0.625rem;1744  line-height: 1.5;1745  color: #e84040;1746  font-family: "IBM Plex Mono", monospace;1747}1748.peach-export-strength-hint {1749  margin: 0;1750  font-size: 0.625rem;1751  line-height: 1.5;1752  color: var(--peach-t2);1753  font-family: "IBM Plex Mono", monospace;1754}1755.peach-export-pill {1756  display: inline-flex;1757  align-items: center;1758  padding: 4px 8px;1759  border-radius: 999px;1760  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1761  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1762  color: var(--peach-accent);1763  font-family: "IBM Plex Mono", monospace;1764  font-size: 0.5rem;1765  letter-spacing: 0.12em;1766  text-transform: uppercase;1767  white-space: nowrap;1768}1769.peach-export-pill--danger {1770  border-color: rgba(220,80,60,0.22);1771  background: rgba(220,80,60,0.08);1772  color: var(--peach-breach);1773}1774.peach-settings-label {1775  margin: 0 0 6px;1776  font-family: "IBM Plex Mono", monospace;1777  font-size: 0.5rem;1778  text-transform: uppercase;1779  letter-spacing: 0.18em;1780  color: var(--peach-t2);1781}1782.peach-settings-row {1783  display: flex;1784  align-items: center;1785  justify-content: space-between;1786  gap: 12px;1787  min-height: 34px;1788  padding: 6px 0;1789  font-size: 0.8125rem;1790  color: var(--peach-t1);1791}1792.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1793.peach-settings-value {1794  font-family: "IBM Plex Mono", monospace;1795  font-size: 0.625rem;1796  color: var(--peach-t2);1797}17981799.peach-settings-value--status {1800  display: flex;1801  align-items: center;1802  gap: 6px;1803}18041805.peach-settings-link {1806  font-family: "IBM Plex Mono", monospace;1807  font-size: 0.625rem;1808  color: var(--peach-accent);1809  text-decoration: none;1810  cursor: pointer;1811}1812.peach-settings-link:hover {1813  text-decoration: underline;1814}18151816.peach-settings-row--stack {1817  flex-direction: column;1818  align-items: stretch;1819  gap: 6px;1820}18211822.peach-settings-row--top {1823  align-items: flex-start;1824}18251826.peach-settings-row-main {1827  display: flex;1828  flex-direction: column;1829  gap: 4px;1830  flex: 1;1831}1832.peach-toggle {1833  width: 28px; height: 16px;1834  border-radius: 999px;1835  background: var(--peach-t3);1836  border: 1px solid var(--peach-t3);1837  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1838  flex-shrink: 0;1839  transition: background 200ms ease, border-color 200ms ease;1840  cursor: pointer;1841}1842.peach-toggle.is-on {1843  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1844  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1845}1846.peach-toggle-knob {1847  width: 10px; height: 10px;1848  border-radius: 50%;1849  background: var(--peach-t2);1850  flex-shrink: 0;1851  transform: translateX(0px);1852  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1853}1854.peach-toggle.is-on .peach-toggle-knob {1855  background: var(--peach-accent);1856  transform: translateX(12px);1857}1858.peach-settings-footer {1859  display: flex;1860  align-items: center;1861  gap: 8px;1862  margin-top: auto;1863  padding: 14px 16px 8px;1864  font-family: "IBM Plex Mono", monospace;1865  font-size: 0.5625rem;1866  color: var(--peach-t2);1867}18681869/* ── Settings home navigation ──────────────────────────────────────────── */1870.peach-settings-nav-label {1871  margin: 0 0 2px;1872  padding: 12px 16px 4px;1873  font-family: "IBM Plex Mono", monospace;1874  font-size: 0.5rem;1875  text-transform: uppercase;1876  letter-spacing: 0.18em;1877  color: var(--peach-t2);1878}18791880.peach-settings-cat-row {1881  display: flex;1882  align-items: center;1883  gap: 10px;1884  width: 100%;1885  padding: 9px 16px;1886  background: none;1887  border: none;1888  border-bottom: 1px solid var(--peach-t3);1889  cursor: pointer;1890  text-align: left;1891  color: inherit;1892  transition: background var(--peach-dur-80) ease;1893}1894.peach-settings-cat-row:hover {1895  background: var(--peach-t3);1896}1897.peach-settings-cat-row:last-child {1898  border-bottom: none;1899}19001901.peach-settings-cat-icon {1902  width: 28px;1903  height: 28px;1904  border-radius: 7px;1905  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1906  color: var(--peach-accent);1907  display: flex;1908  align-items: center;1909  justify-content: center;1910  flex-shrink: 0;1911}1912/* Light theme: peach-on-cream is too low-contrast — both colors are warm.1913   Darken the icon stroke to ink and bump the bg tint so the icon reads1914   sharply while the cell still feels accent-tinted. */1915.light .peach-settings-cat-icon {1916  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);1917  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));1918}19191920.peach-settings-cat-content {1921  flex: 1;1922  display: flex;1923  flex-direction: column;1924  gap: 2px;1925  min-width: 0;1926}19271928.peach-settings-cat-name {1929  font-size: 0.8125rem;1930  font-weight: 450;1931  color: var(--peach-t0);1932  line-height: 1.2;1933}19341935.peach-settings-cat-desc {1936  font-size: 0.625rem;1937  color: var(--peach-t2);1938  line-height: 1.3;1939  white-space: nowrap;1940  overflow: hidden;1941  text-overflow: ellipsis;1942}19431944.peach-settings-cat-chevron {1945  color: var(--peach-t2);1946  flex-shrink: 0;1947  opacity: 0.5;1948}19491950/* ── Settings sub-view section labels ──────────────────────────────────── */1951.peach-settings-sub-label {1952  margin: 12px 0 4px;1953  font-family: "IBM Plex Mono", monospace;1954  font-size: 0.5rem;1955  text-transform: uppercase;1956  letter-spacing: 0.18em;1957  color: var(--peach-t2);1958}1959.peach-settings-sub-label:first-child {1960  margin-top: 4px;1961}19621963/* ── Settings: collapsible Advanced section ─────────────────────────────── */1964.peach-settings-advanced-toggle {1965  display: flex;1966  align-items: center;1967  justify-content: space-between;1968  width: 100%;1969  background: none;1970  border: none;1971  cursor: pointer;1972  padding: 12px 0 4px;1973  margin: 0;1974  color: inherit;1975}1976.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {1977  color: var(--peach-t1);1978}1979.peach-settings-advanced-chevron {1980  font-size: 0.5625rem;1981  color: var(--peach-t3);1982  letter-spacing: 0;1983  transition: color 120ms ease;1984}19851986/* ── Feedback form ──────────────────────────────────────────────────────── */1987.peach-feedback-group {1988  flex: 1;1989  display: flex;1990  flex-direction: column;1991  border-bottom: none;1992}19931994.peach-feedback-intro {1995  margin: 4px 0 14px;1996  font-size: 0.75rem;1997  line-height: 1.55;1998  color: var(--peach-t1);1999}20002001.peach-feedback-chips {2002  display: flex;2003  flex-wrap: wrap;2004  gap: 6px;2005  margin-bottom: 14px;2006}20072008.peach-feedback-chip {2009  padding: 4px 10px;2010  border-radius: 999px;2011  border: 1px solid var(--peach-t3);2012  background: none;2013  color: var(--peach-t2);2014  font-size: 0.6875rem;2015  font-family: var(--font-ui);2016  cursor: pointer;2017  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2018    background var(--peach-dur-80) ease;2019}2020.peach-feedback-chip:hover {2021  border-color: var(--peach-t2);2022  color: var(--peach-t1);2023}2024.peach-feedback-chip.is-active {2025  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);2026  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));2027  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);2028  box-shadow:2029    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),2030    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);2031  font-weight: 700;2032}20332034.peach-feedback-textarea {2035  flex: 1;2036  width: 100%;2037  min-height: 120px;2038  box-sizing: border-box;2039  background: rgba(0, 0, 0, 0.22);2040  border: 1px solid transparent;2041  border-radius: 6px;2042  color: var(--peach-t0);2043  font-size: 0.75rem;2044  font-family: var(--font-ui);2045  line-height: 1.5;2046  padding: 8px 10px;2047  resize: none;2048  outline: none;2049  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2050}2051.peach-feedback-textarea:focus {2052  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2053  background: rgba(0, 0, 0, 0.28);2054}2055.peach-feedback-textarea:focus {2056  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2057}2058.peach-feedback-textarea::placeholder {2059  color: var(--peach-t2);2060}20612062.peach-feedback-meta {2063  margin: 6px 0 0;2064  font-size: 0.625rem;2065  color: var(--peach-t2);2066  font-family: "IBM Plex Mono", monospace;2067}20682069.peach-feedback-result {2070  margin: 8px 0 0;2071  font-size: 0.6875rem;2072  font-family: "IBM Plex Mono", monospace;2073}2074.peach-feedback-result--ok { color: var(--peach-sync-ok); }2075.peach-feedback-result--err { color: var(--peach-breach); }20762077.peach-feedback-submit {2078  width: 100%;2079  margin-top: 12px;2080  justify-content: center;2081}20822083.peach-feedback-anon {2084  margin: 8px 0 0;2085  font-size: 0.625rem;2086  color: var(--peach-t2);2087  text-align: center;2088}20892090.peach-feedback-thanks {2091  margin: auto 0;2092  padding: 18px 14px;2093  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);2094  border-radius: 8px;2095  background:2096    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),2097    rgba(0, 0, 0, 0.18);2098  color: var(--peach-t1);2099  text-align: center;2100}21012102.peach-feedback-thanks p {2103  margin: 0;2104  font-size: 0.75rem;2105  line-height: 1.5;2106}21072108.peach-feedback-thanks-title {2109  color: var(--peach-t0);2110  font-family: "Cormorant Garamond", serif;2111  font-size: 1.375rem !important;2112  line-height: 1.1 !important;2113  margin-bottom: 8px !important;2114}21152116.peach-passkey-badge {2117  margin-left: 8px;2118  font-size: 0.625rem;2119  letter-spacing: 0.06em;2120  text-transform: uppercase;2121  color: var(--peach-t2);2122  font-family: var(--font-ui);2123  vertical-align: middle;2124}21252126.peach-passkey-delete-btn {2127  color: var(--peach-breach);2128  border-color: rgba(229, 85, 85, 0.25);2129}21302131.peach-passkey-delete-confirm {2132  display: flex;2133  align-items: center;2134  gap: 8px;2135  padding: 8px 10px;2136  background: rgba(229, 85, 85, 0.06);2137  border: 1px solid rgba(229, 85, 85, 0.2);2138  border-radius: 6px;2139}21402141.peach-passkey-delete-confirm-copy {2142  flex: 1;2143  font-size: 0.6875rem;2144  color: var(--peach-t1);2145}21462147.peach-passkey-delete-btn--confirm {2148  color: var(--peach-breach);2149  border-color: rgba(229, 85, 85, 0.4);2150}21512152.peach-passkey-activity {2153  flex-direction: column;2154  align-items: flex-start;2155  gap: 4px;2156}21572158.peach-passkey-meta {2159  font-size: 0.6875rem;2160  color: var(--peach-t2);2161}21622163.peach-passkey-actions {2164  position: relative;2165  z-index: 1;2166  margin-top: 14px;2167  display: flex;2168  flex-direction: column;2169  gap: 8px;2170}21712172.peach-passkey-approval {2173  display: flex;2174  flex-direction: column;2175  align-items: center;2176  padding: 16px 20px 14px;2177  gap: 8px;2178  text-align: center;2179}21802181.peach-passkey-approval-icon {2182  width: 36px;2183  height: 36px;2184  border-radius: 10px;2185  background: var(--peach-s2);2186  border: 1px solid var(--peach-t3);2187  display: flex;2188  align-items: center;2189  justify-content: center;2190  flex-shrink: 0;2191  color: var(--peach-accent);2192}21932194.peach-passkey-approval-icon img,2195.peach-passkey-approval-icon svg {2196  width: 22px;2197  height: 22px;2198  border-radius: 5px;2199}22002201.peach-passkey-approval-rp {2202  font-family: var(--font-ui);2203  font-size: 0.75rem;2204  color: var(--peach-t2);2205  letter-spacing: 0.03em;2206}22072208.peach-passkey-approval-action {2209  font-family: var(--font-display);2210  font-style: italic;2211  font-weight: 300;2212  font-size: 18px;2213  color: var(--peach-t0);2214  line-height: 1.1;2215  margin: 1px 0;2216}22172218.peach-passkey-approval-user {2219  font-family: var(--font-mono);2220  font-size: 0.6875rem;2221  color: var(--peach-t1);2222  background: var(--peach-s2);2223  border: 1px solid var(--peach-t3);2224  border-radius: 4px;2225  padding: 3px 8px;2226}22272228.peach-passkey-approval-notice {2229  font-size: 0.625rem;2230  color: var(--peach-t2);2231  line-height: 1.5;2232  max-width: 220px;2233}22342235.peach-passkey-approval-actions {2236  display: flex;2237  gap: 8px;2238  width: 100%;2239  margin-top: 6px;2240}22412242.peach-passkey-approval-actions .peach-btn {2243  flex: 1;2244}22452246/* ── Inline generator drawer ── */2247.peach-generator-drawer {2248  display: grid;2249  grid-template-rows: 0fr;2250  transition: grid-template-rows 320ms var(--peach-curve-arrival);2251  overflow: hidden;2252}2253.peach-generator-drawer.is-open {2254  grid-template-rows: 1fr;2255}2256.peach-generator-drawer-inner {2257  min-height: 0;2258  overflow: hidden;2259}2260.peach-generator-drawer-content {2261  border-top: 1px solid var(--peach-t3);2262  padding: 8px 0 4px;2263  display: flex;2264  flex-direction: column;2265  gap: 8px;2266}22672268/* ── Compact generator (inside entry edit) ── */2269.peach-generator-drawer-content--compact {2270  border-top: 1px solid var(--peach-t3);2271  padding: 8px 0 2px;2272  gap: 7px;2273}2274.peach-pwgen-compact-display-row {2275  display: flex;2276  align-items: center;2277  gap: 6px;2278}2279.peach-pwgen-compact-output {2280  flex: 1;2281  min-width: 0;2282  font-family: "IBM Plex Mono", monospace;2283  font-size: 0.6875rem;2284  font-weight: 400;2285  letter-spacing: 0.04em;2286  color: var(--peach-t0);2287  background: rgba(240, 232, 216, 0.04);2288  border: 1px solid var(--peach-t3);2289  border-radius: 5px;2290  padding: 5px 8px;2291  line-height: 1.5;2292  outline: none;2293  transition: border-color 120ms ease;2294}22952296.peach-pwgen-compact-output:focus {2297  border-color: var(--peach-t1);2298}2299.peach-pwgen-compact-controls {2300  display: flex;2301  align-items: center;2302  gap: 6px;2303}2304.peach-pwgen-compact-slider {2305  flex: 1;2306  min-width: 0;2307  height: 2px !important;2308}2309.peach-pwgen-compact-controls .peach-pwgen-len-num {2310  flex-shrink: 0;2311  min-width: 18px;2312  text-align: right;2313}2314.peach-pwgen-compact-pills {2315  display: flex;2316  gap: 3px;2317  flex-shrink: 0;2318}2319.peach-pwgen-compact-pills .peach-pwgen-pill {2320  padding: 2px 7px;2321  font-size: 0.5rem;2322}2323.peach-pwgen-compact-use {2324  flex-shrink: 0;2325  font-size: 0.625rem !important;2326  padding: 3px 9px !important;2327  min-height: 22px !important;2328  border-radius: 5px !important;2329}23302331/* ── Password edit row (input + eye toggle side-by-side) ── */2332.peach-password-edit-row {2333  display: flex;2334  align-items: center;2335  gap: 6px;2336}2337.peach-password-edit-row .peach-inline-input {2338  flex: 1;2339  min-width: 0;2340}23412342/* ── Generate toggle link ── */2343.peach-generate-toggle-link {2344  display: inline-flex;2345  align-items: center;2346  gap: 5px;2347  background: none;2348  border: none;2349  padding: 0;2350  cursor: pointer;2351  font-family: "IBM Plex Mono", monospace;2352  font-size: 0.625rem;2353  color: var(--peach-t2);2354  letter-spacing: 0.04em;2355  transition: color 120ms ease;2356  align-self: flex-start;2357}2358.peach-generate-toggle-link:hover {2359  color: var(--peach-accent);2360}23612362/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2363.peach-entry-body {2364  flex: 1;2365  overflow-y: auto;2366  overflow-x: hidden;2367  scrollbar-width: none;2368  -ms-overflow-style: none;2369  overscroll-behavior: contain;2370  display: grid;2371  gap: 10px;2372  align-content: start;2373  padding: 10px 20px 14px;2374  min-width: 0;2375  min-height: 0;2376}2377.peach-entry-body::-webkit-scrollbar { display: none; }23782379/* Type-toggle pills + inline note toolbar */2380.peach-new-type-row {2381  display: flex;2382  align-items: center;2383  gap: 6px;2384  margin-bottom: 2px;2385}2386.peach-new-type-btn {2387  background: transparent;2388  border: 1px solid var(--peach-t3);2389  border-radius: 12px;2390  padding: 3px 10px;2391  font-family: "IBM Plex Mono", monospace;2392  font-size: 0.5625rem;2393  letter-spacing: 0.12em;2394  text-transform: uppercase;2395  color: var(--peach-t2);2396  cursor: pointer;2397  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2398}2399.peach-new-type-btn.is-active {2400  color: var(--peach-t0);2401  border-color: var(--peach-accent);2402  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2403}2404.peach-new-type-btn:not(.is-active):hover {2405  color: var(--peach-t1);2406  border-color: var(--peach-t2);2407}24082409/* Editable title */2410.peach-new-title-wrap { margin: 0 0 2px; }2411.peach-new-title-input {2412  background: transparent;2413  border: none;2414  outline: none;2415  width: 100%;2416  color: var(--peach-t0);2417  font-family: var(--font-display);2418  font-style: italic;2419  font-weight: 400;2420  font-size: 40px;2421  line-height: 0.95;2422  caret-color: var(--peach-accent);2423}2424.peach-new-title-input::placeholder { color: var(--peach-t2); }24252426/* Editable domain field */2427.peach-domain-edit-row {2428  display: flex;2429  align-items: center;2430  gap: 6px;2431}24322433.peach-domain-edit-row .peach-domain-value--edit {2434  flex: 1;2435  width: 0;2436}24372438.peach-domain-url-btn {2439  flex-shrink: 0;2440  background: transparent;2441  border: none;2442  cursor: pointer;2443  color: var(--peach-t3);2444  padding: 2px 3px;2445  display: flex;2446  align-items: center;2447  line-height: 0;2448  border-radius: 3px;2449  transition: color 120ms ease;2450}24512452.peach-domain-url-btn:hover {2453  color: var(--peach-accent);2454}24552456.peach-domain-value--edit {2457  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2458  font-size: 0.625rem;2459  font-style: italic;2460  letter-spacing: 0.12em;2461  color: var(--peach-t1);2462  background: transparent;2463  border: none;2464  border-bottom: 1px solid var(--peach-t3);2465  outline: none;2466  width: 100%;2467  padding: 2px 0;2468  caret-color: var(--peach-accent);2469  transition: border-color 140ms ease, color 140ms ease;2470}2471.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2472.peach-domain-value--edit:focus {2473  border-bottom-color: rgba(240, 232, 216, 0.28);2474  color: var(--peach-t0);2475}24762477/* Editable field values (username, password, totp) */2478.peach-field-value--edit {2479  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2480  font-size: 0.8125rem;2481  color: var(--peach-t0);2482  background: transparent;2483  border: none;2484  border-bottom: 1px solid var(--peach-t3);2485  outline: none;2486  flex: 1;2487  min-width: 0;2488  padding: 3px 0;2489  caret-color: var(--peach-accent);2490  transition: border-color 140ms ease, color 140ms ease;2491}2492.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2493.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2494.peach-field-value--edit:focus {2495  border-bottom-color: rgba(240, 232, 216, 0.28);2496  color: var(--peach-t0);2497}24982499/* "+ add optional field" links */2500.peach-entry-add-links {2501  display: flex;2502  gap: 12px;2503  flex-wrap: wrap;2504  margin-top: -2px;2505}2506.peach-add-field-link {2507  background: transparent;2508  border: none;2509  padding: 0;2510  cursor: pointer;2511  font-family: "IBM Plex Mono", monospace;2512  font-size: 0.5625rem;2513  letter-spacing: 0.1em;2514  text-transform: uppercase;2515  color: var(--peach-t2);2516  transition: color 140ms ease;2517}2518.peach-add-field-link:hover { color: var(--peach-accent); }25192520/* ── New entry form (legacy classes) ────────────────────────────────── */2521.peach-new-body {2522  flex: 1;2523  overflow-y: auto;2524  padding: 10px 20px 14px;2525}2526.peach-new-name-input {2527  background: transparent;2528  border: none;2529  outline: none;2530  width: 100%;2531  color: var(--peach-t0);2532  font-family: var(--font-display);2533  font-style: italic;2534  font-weight: 400;2535  font-size: 40px;2536  line-height: 0.95;2537  caret-color: var(--peach-accent);2538}2539.peach-new-name-input::placeholder { color: var(--peach-t2); }2540.peach-new-field-input {2541  background: transparent;2542  border: none;2543  outline: none;2544  flex: 1;2545  min-width: 0;2546  caret-color: var(--peach-accent);2547}2548.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }25492550/* ── Canary card ── */2551.peach-canary-card {2552  border: 1px solid rgba(217, 160, 48, 0.2);2553  background: rgba(217, 160, 48, 0.03);2554  border-radius: 8px;2555  padding: 12px;2556}25572558.peach-canary-settings-header {2559  display: flex;2560  align-items: center;2561  justify-content: space-between;2562  cursor: pointer;2563  user-select: none;2564}25652566.peach-canary-card .peach-label {2567  color: rgba(217, 160, 48, 0.85);2568}25692570.peach-canary-card .peach-new-field-input {2571  border-color: rgba(217, 160, 48, 0.25);2572}25732574.peach-canary-card .peach-new-field-input:focus {2575  border-color: rgba(217, 160, 48, 0.5);2576}25772578.peach-canary-body {2579  margin-top: 12px;2580  display: flex;2581  flex-direction: column;2582  gap: 10px;2583}25842585.peach-canary-explainer {2586  display: flex;2587  gap: 10px;2588  padding: 10px 12px;2589  border-radius: 10px;2590  background: rgba(217, 160, 48, 0.06);2591  border: 1px solid rgba(217, 160, 48, 0.22);2592  margin-bottom: 4px;2593}25942595.peach-canary-explainer-icon {2596  font-size: 1rem;2597  flex-shrink: 0;2598  line-height: 1.2;2599}26002601.peach-canary-explainer-title {2602  font-family: var(--font-ui);2603  font-size: 0.6875rem;2604  font-weight: 500;2605  color: rgba(217, 160, 48, 0.9);2606  margin: 0 0 3px;2607}26082609.peach-canary-explainer-copy {2610  font-family: var(--font-ui);2611  font-size: 0.625rem;2612  color: var(--peach-t2);2613  line-height: 1.55;2614  margin: 0;2615}26162617.peach-canary-hint {2618  font-size: 0.625rem;2619  color: var(--peach-t2);2620  font-family: Inter, system-ui, sans-serif;2621  line-height: 1.5;2622  margin-top: 4px;2623}26242625.peach-canary-actions-row {2626  display: flex;2627  align-items: center;2628  gap: 8px;2629}26302631.peach-canary-test-btn {2632  border-color: rgba(217, 160, 48, 0.3);2633  color: rgba(217, 160, 48, 0.85);2634}26352636.peach-canary-test-result {2637  font-size: 0.625rem;2638  font-family: Inter, system-ui, sans-serif;2639}26402641.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2642.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }26432644.peach-canary-badge {2645  display: flex;2646  position: relative;2647  z-index: 1;2648  align-items: center;2649  gap: 5px;2650  padding: 4px 10px;2651  background: rgba(217, 160, 48, 0.12);2652  border: 1px solid rgba(217, 160, 48, 0.35);2653  border-radius: 6px;2654  margin-bottom: 6px;2655  width: fit-content;2656}26572658.peach-canary-badge-label {2659  font-size: 0.625rem;2660  letter-spacing: 0.06em;2661  color: rgba(217, 160, 48, 0.9);2662  font-family: var(--font-ui);2663  text-transform: uppercase;2664}26652666.peach-canary-badge-icon {2667  font-size: 0.6875rem;2668}26692670.peach-canary-suppress-row {2671  display: flex;2672  align-items: center;2673  gap: 8px;2674  padding: 6px 10px;2675  background: rgba(217, 160, 48, 0.08);2676  border-radius: 6px;2677  margin-bottom: 8px;2678}26792680.peach-canary-suppress-label {2681  font-size: 0.6875rem;2682  color: rgba(217, 160, 48, 0.85);2683  cursor: pointer;2684  font-family: var(--font-ui);2685  letter-spacing: 0.04em;2686}26872688.peach-regen-panel {2689  position: relative;2690  z-index: 1;2691  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2692  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2693  border-radius: 8px;2694  padding: 12px;2695  margin-bottom: 8px;2696}26972698.peach-regen-panel-header {2699  display: flex;2700  align-items: center;2701  justify-content: space-between;2702  margin-bottom: 10px;2703}27042705.peach-regen-panel-title {2706  font-size: 0.6875rem;2707  font-weight: 600;2708  letter-spacing: 0.06em;2709  text-transform: uppercase;2710  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2711}27122713.peach-regen-output {2714  background: rgba(0, 0, 0, 0.2);2715  border-radius: 6px;2716  padding: 10px;2717  margin-bottom: 10px;2718  font-family: var(--font-mono);2719  font-size: 0.8125rem;2720  word-break: break-all;2721  color: var(--peach-t1);2722}27232724.peach-regen-actions {2725  display: flex;2726  gap: 6px;2727}27282729.peach-regen-actions--spaced {2730  margin-bottom: 8px;2731}27322733.peach-regen-action-grow {2734  flex: 1;2735}27362737.peach-regen-copy-btn {2738  padding: 0 8px;2739}27402741.peach-regen-success {2742  position: relative;2743  z-index: 1;2744  background: rgba(40, 180, 80, 0.1);2745  border: 1px solid rgba(40, 180, 80, 0.3);2746  border-radius: 8px;2747  padding: 10px 12px;2748  margin-bottom: 8px;2749  display: flex;2750  align-items: center;2751  gap: 8px;2752  font-size: 0.6875rem;2753  color: rgba(40, 180, 80, 0.9);2754}27552756/* ── Note editor overlay ── */2757.peach-note-editor {2758  position: absolute;2759  inset: 0;2760  z-index: 200;2761  display: flex;2762  flex-direction: column;2763  background:2764    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2765    var(--peach-bg);2766  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2767}27682769.peach-note-editor-header {2770  display: flex;2771  align-items: center;2772  gap: 10px;2773  padding: 14px 16px 10px;2774  border-bottom: 1px solid var(--peach-t3);2775  flex-shrink: 0;2776}27772778.peach-note-editor-back {2779  background: transparent;2780  border: none;2781  cursor: pointer;2782  color: var(--peach-t2);2783  padding: 4px 6px;2784  border-radius: 6px;2785  display: flex;2786  align-items: center;2787  transition: color 120ms ease, background 120ms ease;2788  flex-shrink: 0;2789}2790.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }27912792.peach-note-editor-label {2793  flex: 1;2794  font-family: var(--font-display);2795  font-style: italic;2796  font-size: 0.9375rem;2797  color: var(--peach-t1);2798  letter-spacing: 0.02em;2799}28002801.peach-note-editor-save-btn {2802  background: transparent;2803  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2804  border-radius: 8px;2805  color: var(--peach-accent);2806  font-family: "IBM Plex Mono", monospace;2807  font-size: 0.625rem;2808  letter-spacing: 0.06em;2809  text-transform: uppercase;2810  padding: 3px 10px;2811  cursor: pointer;2812  transition: background 120ms ease, border-color 120ms ease;2813}2814.peach-note-editor-save-btn:hover:not(:disabled) {2815  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2816  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2817}2818.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }28192820.peach-note-toolbar {2821  display: flex;2822  align-items: center;2823  gap: 3px;2824  padding: 6px 14px 5px;2825  border-bottom: 1px solid var(--peach-t3);2826  flex-shrink: 0;2827}28282829.peach-note-tool-btn {2830  background: transparent;2831  border: 1px solid transparent;2832  border-radius: 5px;2833  color: var(--peach-t2);2834  font-family: "IBM Plex Mono", monospace;2835  font-size: 0.625rem;2836  letter-spacing: 0.04em;2837  padding: 2px 8px;2838  cursor: pointer;2839  line-height: 1.6;2840  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2841}2842.peach-note-tool-btn:hover {2843  background: var(--peach-t4);2844  color: var(--peach-t0);2845  border-color: var(--peach-t3);2846}28472848.peach-note-tool-icon {2849  padding: 3px 7px;2850  display: inline-flex;2851  align-items: center;2852  justify-content: center;2853}28542855.peach-note-tool-divider {2856  width: 1px;2857  height: 14px;2858  background: var(--peach-t3);2859  margin: 0 4px;2860  flex-shrink: 0;2861}28622863.peach-note-editor-body {2864  flex: 1;2865  overflow-y: auto;2866  padding: 16px 20px 20px;2867  outline: none;2868  font-family: var(--font-display);2869  font-size: 1rem;2870  line-height: 1.75;2871  color: var(--peach-t0);2872  scrollbar-width: none;2873  word-break: break-word;2874}2875.peach-note-editor-body:empty::before {2876  content: "write your note…";2877  color: var(--peach-t3);2878  font-style: italic;2879  pointer-events: none;2880}28812882/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2883.peach-note-editor-inline {2884  display: flex;2885  flex-direction: column;2886  flex: 1;2887  min-height: 0;2888}2889.peach-note-editor-body--inline {2890  flex: 1;2891  min-height: 0;2892  font-size: 0.9375rem;2893  padding: 10px 20px 14px;2894}28952896/* Full-width toolbar row inside the body (Add.tsx note type).2897   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */2898.peach-note-toolbar-body {2899  display: flex;2900  align-items: center;2901  gap: 3px;2902  padding: 5px 20px 4px;2903  margin: 2px -20px 0;2904  border-bottom: 1px solid var(--peach-t3);2905  flex-shrink: 0;2906}29072908/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2909   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2910   and .peach-note-tool-divider button-level styles. */2911.peach-note-toolbar-inline {2912  display: flex;2913  align-items: center;2914  gap: 3px;2915  margin-left: auto;2916  padding-left: 10px;2917  border-left: 1px solid var(--peach-t3);2918  min-height: 22px;2919}29202921/* Entry.tsx toolbar row (no tabs, toolbar only) */2922.peach-entry-note-toolbar-row {2923  display: flex;2924  align-items: center;2925  margin: 4px 0 6px;2926  position: relative;2927  z-index: 1;2928}2929.peach-entry-note-toolbar-row .peach-note-toolbar-inline {2930  border-left: none;2931  padding-left: 0;2932  margin-left: 0;2933}29342935/* Note body — fills available vertical space in Add.tsx and Entry.tsx */2936.peach-note-body {2937  display: flex;2938  flex-direction: column;2939  flex: 1;2940  min-height: 0;2941  margin: 4px 0 0;2942}2943.peach-entry-body--new .peach-note-body {2944  margin: 8px -20px 0;2945}29462947/* Add.tsx body is a grid by default; swap to a flex column when a note is2948   active so the note body can stretch and pin the tags row to the bottom. */2949.peach-entry-body--new:has(.peach-note-body) {2950  display: flex;2951  flex-direction: column;2952}29532954/* Rich content element styles (editor + display) */2955.peach-note-editor-body h2,2956.peach-note-content h2 {2957  font-family: var(--font-display);2958  font-size: 20px;2959  font-weight: 600;2960  font-style: italic;2961  color: var(--peach-t0);2962  margin: 6px 0 2px;2963  line-height: 1.3;2964}2965.peach-note-editor-body ul,2966.peach-note-content ul {2967  padding-left: 18px;2968  margin: 3px 0;2969  list-style: disc;2970}2971.peach-note-editor-body ol,2972.peach-note-content ol {2973  padding-left: 18px;2974  margin: 3px 0;2975  list-style: decimal;2976}2977.peach-note-editor-body li,2978.peach-note-content li { margin: 2px 0; }2979.peach-note-editor-body hr,2980.peach-note-content hr {2981  border: none;2982  border-top: 1px solid var(--peach-t3);2983  margin: 10px 0;2984}29852986/* font size elements from execCommand */2987.peach-note-editor-body font[size="1"],2988.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }2989.peach-note-editor-body font[size="2"],2990.peach-note-content font[size="2"] { font-size: 0.8125rem; }2991.peach-note-editor-body font[size="3"],2992.peach-note-content font[size="3"] { font-size: 1rem; }2993.peach-note-editor-body font[size="4"],2994.peach-note-content font[size="4"] { font-size: 20px; }2995.peach-note-editor-body font[size="5"],2996.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }29972998/* bold / italic inside the editor and note display */2999.peach-note-editor-body b, .peach-note-editor-body strong,3000.peach-note-content b, .peach-note-content strong { font-weight: 700; }3001.peach-note-editor-body em, .peach-note-editor-body i,3002.peach-note-content em, .peach-note-content i { font-style: italic; }30033004/* note display — rendered HTML, no pre-wrap */3005.peach-note-content {3006  overflow: auto;3007  max-height: 340px;3008  word-break: break-word;3009}30103011/* ── Note textarea ── */3012.peach-note-textarea {3013  width: 100%;3014  min-height: 180px;3015  max-height: 280px;3016  resize: vertical;3017  background: var(--peach-t4);3018  border: 1px solid var(--peach-t3);3019  border-radius: 8px;3020  padding: 10px 12px;3021  font-family: "IBM Plex Mono", monospace;3022  font-size: 0.75rem;3023  line-height: 1.7;3024  color: var(--peach-t1);3025  outline: none;3026  transition: border-color 150ms ease;3027}30283029.peach-note-textarea:focus {3030  border-color: var(--peach-t2);3031}30323033.peach-note-char-count {3034  font-family: "IBM Plex Mono", monospace;3035  font-size: 0.5625rem;3036  color: var(--peach-t3);3037  text-align: right;3038  margin-top: 4px;3039  letter-spacing: 0.1em;3040}30413042/* ── Field input baseline ── */3043.peach-new-field-input {3044  width: 100%;3045  background: transparent;3046  border: none;3047  border-bottom: 1px solid var(--peach-t3);3048  padding: 4px 0;3049  color: var(--peach-t1);3050  font-family: "IBM Plex Mono", monospace;3051  font-size: 0.8125rem;3052  outline: none;3053  transition: border-color 150ms ease;3054}30553056.peach-new-field-input:focus {3057  border-bottom-color: var(--peach-t0);3058  color: var(--peach-t0);3059}30603061.peach-new-name-input {3062  width: 100%;3063  background: transparent;3064  border: none;3065  border-bottom: 1px solid var(--peach-t3);3066  padding: 6px 0;3067  font-family: var(--font-display);3068  font-style: italic;3069  font-size: 28px;3070  color: var(--peach-t0);3071  outline: none;3072  transition: border-color 150ms ease;3073}30743075.peach-new-name-input:focus {3076  border-bottom-color: var(--peach-t1);3077}30783079.peach-new-name-input::placeholder {3080  color: var(--peach-t2);3081  font-style: italic;3082}30833084.peach-new-field-input::placeholder {3085  color: var(--peach-t3);3086}30873088/* ── Demo entrance animation ── */3089#hd-shell {3090  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3091}3092@keyframes hd-shell-enter {3093  from { opacity: 0; transform: scale(0.96) translateY(16px); }3094  to   { opacity: 1; transform: scale(1) translateY(0); }3095}30963097/* ── Keyframes ── */3098@keyframes peach-char-enter {3099  from { opacity: 0; transform: translateY(0.22em); }3100  to   { opacity: 1; transform: translateY(0); }3101}3102@keyframes peach-content-enter {3103  from { opacity: 0.96; transform: translateY(4px); }3104  to   { opacity: 1; transform: translateY(0); }3105}3106@keyframes peach-content-exit {3107  from { opacity: 1; transform: translateY(0); }3108  to   { opacity: 0.92; transform: translateY(-3px); }3109}3110@keyframes peach-screen-enter {3111  from { opacity: 0; transform: translateY(14px); }3112  to   { opacity: 1; transform: translateY(0); }3113}3114@keyframes peach-shell-fade-in {3115  from { opacity: 0; }3116  to   { opacity: 1; }3117}3118@keyframes peach-veil-in {3119  from { opacity: 0; }3120  to   { opacity: 1; }3121}3122@keyframes peach-lock-settle {3123  0%   { transform: scale(0.9); }3124  65%  { transform: scale(1.08); }3125  100% { transform: scale(1); }3126}3127@keyframes peach-copy-confirm {3128  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3129  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); }3130}3131@keyframes peach-copy-retreat {3132  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); }3133  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3134}3135@keyframes peach-copy-flood {3136  from { opacity: 0; transform: scaleX(0.15); }3137  to   { opacity: 1; transform: scaleX(1); }3138}3139@keyframes peach-copy-icon-settle {3140  from  { transform: scale(0.84); }3141  70%   { transform: scale(1.08); }3142  to    { transform: scale(1); }3143}3144@keyframes peach-copy-sheen-retreat {3145  from { opacity: 1; transform: scaleX(1); }3146  to   { opacity: 0; transform: scaleX(0.15); }3147}3148@keyframes peach-copy-drain {3149  from { width: 100%; }3150  to   { width: 0; }3151}3152@keyframes peach-shake {3153  0%, 100% { transform: translateX(0); }3154  20%      { transform: translateX(-6px); }3155  40%      { transform: translateX(6px); }3156  60%      { transform: translateX(-4px); }3157  80%      { transform: translateX(4px); }3158}31593160@keyframes pip-pulse {3161  0% { transform: scale(1); }3162  40% { transform: scale(2.2); }3163  100% { transform: scale(1); }3164}316531663167/* ── Password generator ── */3168.peach-pwgen-body {3169  flex: 1; overflow-y: auto;3170  display: flex; flex-direction: column;3171}3172.peach-policy-badge {3173  display: flex; align-items: center;3174  padding: 6px 20px 0;3175  font-size: 0.625rem; font-family: Inter, sans-serif;3176  color: var(--peach-t2); letter-spacing: 0.04em;3177}3178.peach-pwgen-display {3179  padding: 14px 20px 12px;3180  border-bottom: 1px solid var(--peach-t3);3181  display: flex; align-items: flex-start; gap: 10px;3182}3183.peach-pwgen-display-row {3184  display: flex;3185  align-items: flex-start;3186  gap: 8px;3187  padding-bottom: 8px;3188  border-bottom: 1px solid var(--peach-t3);3189}3190.peach-pwgen-output {3191  flex: 1; min-width: 0; margin: 0;3192  font-family: "IBM Plex Mono", monospace;3193  font-size: 0.8125rem; color: var(--peach-t0);3194  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3195  white-space: normal;3196  padding: 10px 12px;3197  background: var(--peach-t4);3198  border-radius: 6px;3199  min-height: 36px;3200}3201.peach-pwgen-output-display {3202  flex: 1;3203  min-width: 0;3204  margin: 0;3205  font-family: var(--font-display);3206  font-style: italic;3207  font-weight: 300;3208  font-size: 32px;3209  line-height: 1.05;3210  color: var(--peach-t0);3211  word-break: break-all;3212  overflow-wrap: break-word;3213  white-space: normal;3214  letter-spacing: 0.02em;3215}3216.peach-pwgen-display-actions {3217  display: flex;3218  flex-direction: column;3219  gap: 4px;3220  flex-shrink: 0;3221  margin-top: 2px;3222}3223.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3224.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3225.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3226.peach-pwgen-len-num {3227  font-family: "IBM Plex Mono", monospace;3228  font-size: 0.75rem; color: var(--peach-accent);3229}3230.peach-pwgen-len-num--edit {3231  cursor: text;3232  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3233}3234.peach-pwgen-len-input {3235  font-family: "IBM Plex Mono", monospace;3236  font-size: 0.75rem;3237  color: var(--peach-accent);3238  background: transparent;3239  border: none;3240  border-bottom: 1px solid var(--peach-accent);3241  outline: none;3242  width: 32px;3243  text-align: right;3244  padding: 0;3245}3246.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3247.peach-pwgen-toggles { display: flex; flex-direction: column; }3248.peach-pwgen-charset-pills {3249  display: flex;3250  gap: 6px;3251  flex-wrap: wrap;3252}3253.peach-pwgen-pill {3254  padding: 4px 11px;3255  border-radius: 999px;3256  border: 1px solid var(--peach-t3);3257  background: transparent;3258  color: var(--peach-t2);3259  font-family: "IBM Plex Mono", monospace;3260  font-size: 0.5625rem;3261  letter-spacing: 0.08em;3262  cursor: pointer;3263  transition: all 150ms ease;3264}3265.peach-pwgen-pill.is-on {3266  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3267  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3268  color: var(--peach-accent);3269}3270.peach-pwgen-pill:not(.is-on):hover {3271  color: var(--peach-t1);3272  border-color: var(--peach-t2);3273}3274.peach-pwgen-use-btn {3275  width: 100%;3276  min-height: 34px;3277  border-radius: 8px;3278  margin-top: 2px;3279}3280.peach-generator-constraint-note {3281  font-family: 'IBM Plex Mono', monospace;3282  font-size: 10px;3283  color: var(--peach-t3);3284  letter-spacing: 0.04em;3285  margin: 0;3286  transition: opacity 200ms ease;3287}3288.peach-pwgen-toggle-row {3289  display: flex; align-items: center; justify-content: space-between;3290  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3291}3292.peach-pwgen-toggle-row:last-child { border-bottom: none; }3293.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }32943295/* Peach popup should not expose native scrollbars on internal panels. */3296.peach-settings-body,3297.peach-new-body,3298.peach-pwgen-body,3299.lock-screen,3300.peach-import-preview {3301  scrollbar-width: none;3302  -ms-overflow-style: none;3303  overscroll-behavior: contain;3304}3305.peach-settings-body::-webkit-scrollbar,3306.peach-new-body::-webkit-scrollbar,3307.peach-pwgen-body::-webkit-scrollbar,3308.lock-screen::-webkit-scrollbar,3309.peach-import-preview::-webkit-scrollbar {3310  width: 0;3311  height: 0;3312  display: none;3313}33143315.lock-screen {3316  height: 100%;3317  min-height: 100%;3318  overflow-y: auto;3319  padding: 18px 18px 16px;3320  gap: 14px;3321  grid-template-rows: auto auto auto 1fr auto;3322  align-content: stretch;3323  position: relative;3324  isolation: isolate;3325}3326.peach-screen.lock-screen--vault-stage {3327  display: flex;3328  flex-direction: column;3329  justify-content: flex-start;3330  gap: 18px;3331  padding: 20px 18px 18px;3332  overflow: hidden;3333}3334.peach-screen.lock-screen--vault-stage .peach-lock-panel {3335  margin-top: 0;3336}3337.lock-screen--onboarding {3338  display: flex;3339  flex-direction: column;3340  gap: 12px;3341  justify-content: flex-start;3342}33433344.lock-screen::before {3345  content: "";3346  position: absolute;3347  inset: 12px 18px auto auto;3348  width: 160px;3349  height: 160px;3350  border-radius: 999px;3351  background:3352    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%);3353  filter: blur(6px);3354  opacity: 0.7;3355  pointer-events: none;3356  z-index: 0;3357}33583359.peach-lock-rune-string {3360  flex: 1;3361  display: flex;3362  align-items: center;3363  justify-content: center;3364  gap: 6px;3365  font-family: PeachScript, monospace;3366  font-size: 0.8125rem;3367  letter-spacing: 0.05em;3368  pointer-events: none;3369  user-select: none;3370  position: relative;3371  z-index: 1;3372}33733374.peach-lock-rune-string span {3375  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3376  text-shadow:3377    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3378    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3379  transition: color 0.9s ease, text-shadow 0.9s ease;3380}33813382.peach-lock-rune-string span.is-glowing {3383  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3384  text-shadow:3385    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3386    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3387}33883389.lock-screen-header {3390  display: flex;3391  align-items: center;3392  justify-content: space-between;3393  position: relative;3394  z-index: 1;3395}33963397.lock-password-input.shake {3398  animation: peach-shake 300ms ease-in-out;3399}34003401.peach-hint-error {3402  color: rgba(220, 80, 60, 0.92);3403}34043405.peach-onboarding-headline {3406  margin: 0;3407  font-family: var(--font-display);3408  font-size: 35px;3409  line-height: 0.88;3410  font-style: italic;3411  font-weight: 400;3412  max-width: 252px;3413}34143415.peach-lock-copy {3416  display: grid;3417  gap: 8px;3418  position: relative;3419  z-index: 1;3420}34213422.peach-lock-copy--onboarding {3423  gap: 10px;3424}34253426.peach-lock-hero {3427  position: relative;3428  z-index: 1;3429  display: grid;3430  gap: 8px;3431  min-height: 0;3432  padding: 4px 2px 0;3433  border: none;3434  border-radius: 0;3435  background: transparent;3436  box-shadow: none;3437}3438.peach-lock-hero-art {3439  position: absolute;3440  right: -8px;3441  top: -6px;3442  width: 120px;3443  height: 120px;3444  display: flex;3445  align-items: center;3446  justify-content: center;3447  pointer-events: none;3448  opacity: 0.12;3449  filter: saturate(0.9);3450}3451.peach-lock-hero-mark {3452  width: 100%;3453  height: 100%;3454}3455/* Peach body stays brand-peach across every accent — we don't want a3456   green or blue peach when sage/sky is selected. Leaf + vein keep the3457   sage tint because a real peach has a sage leaf. In the new brand-kit3458   mark the leaf is path 1 and the vein stroke is path 2; the body and3459   back-lobe (paths 3 + 4) must stay untouched. */3460.peach-lock-hero-mark path:nth-child(1) {3461  fill: rgba(123, 144, 96, 0.88);3462}3463.peach-lock-hero-mark path:nth-child(2) {3464  stroke: rgba(94, 122, 66, 0.95);3465}3466.peach-lock-hero > *:not(.peach-lock-hero-art) {3467  position: relative;3468  z-index: 1;3469}34703471.peach-lock-eyebrow {3472  display: inline-flex;3473  align-items: center;3474  width: fit-content;3475  padding: 4px 9px;3476  border-radius: 999px;3477  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3478  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3479  color: var(--peach-t0);3480  font-family: "IBM Plex Mono", monospace;3481  font-size: 0.5rem;3482  letter-spacing: 0.18em;3483  text-transform: uppercase;3484}34853486.peach-lock-label-row {3487  display: flex;3488  align-items: center;3489  justify-content: space-between;3490  margin-bottom: 0;3491}34923493.peach-lock-reveal-btn {3494  display: inline-flex;3495  align-items: center;3496  gap: 4px;3497  background: none;3498  border: none;3499  cursor: pointer;3500  font-family: "IBM Plex Mono", monospace;3501  font-size: 0.5625rem;3502  letter-spacing: 0.06em;3503  color: var(--peach-t2);3504  padding: 2px 0;3505  transition: color 150ms ease;3506}35073508.peach-lock-reveal-btn:hover {3509  color: var(--peach-t1);3510}35113512.peach-lock-warning {3513  color: rgba(220, 80, 60, 0.85) !important;3514  line-height: 1.5;3515}35163517.peach-onboarding-cards {3518  display: grid;3519  gap: 8px;3520  position: relative;3521  z-index: 1;3522}35233524.peach-lock-panel {3525  position: relative;3526  z-index: 1;3527  display: grid;3528  gap: 9px;3529  padding: 14px 16px 15px;3530  border-radius: 18px;3531  border: 1px solid var(--peach-t3);3532  background:3533    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3534  box-shadow:3535    inset 0 1px 0 rgba(240, 232, 216, 0.04),3536    0 12px 28px rgba(0, 0, 0, 0.12);3537}35383539/* Glass surface — lock panel and settings groups */3540.peach-glass {3541  background: rgba(26, 20, 16, 0.65);3542  border: 1px solid rgba(255, 255, 255, 0.08);3543  border-radius: 12px;3544  backdrop-filter: blur(12px) saturate(1.4);3545  -webkit-backdrop-filter: blur(12px) saturate(1.4);3546}35473548@supports not (backdrop-filter: blur(1px)) {3549  .peach-glass {3550    background: rgba(26, 20, 16, 0.92);3551    border: 1px solid rgba(255, 255, 255, 0.10);3552    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3553  }3554}35553556.light .peach-glass,3557[data-theme="light"] .peach-glass {3558  background: rgba(240, 233, 223, 0.72);3559  border: 1px solid rgba(26, 18, 8, 0.08);3560  backdrop-filter: blur(12px) saturate(1.2);3561  -webkit-backdrop-filter: blur(12px) saturate(1.2);3562}35633564@supports not (backdrop-filter: blur(1px)) {3565  .light .peach-glass,3566  [data-theme="light"] .peach-glass {3567    background: rgba(240, 233, 223, 0.97);3568    border: 1px solid rgba(26, 18, 8, 0.10);3569  }3570}35713572/* Lock panel keeps its own border-radius over the generic glass token */3573.peach-lock-panel.peach-glass {3574  border-radius: 18px;3575  background: rgba(26, 20, 16, 0.65);3576  border: 1px solid rgba(255, 255, 255, 0.08);3577  box-shadow:3578    inset 0 1px 0 rgba(255, 255, 255, 0.05),3579    0 12px 28px rgba(0, 0, 0, 0.3);3580}35813582.light .peach-lock-panel.peach-glass,3583[data-theme="light"] .peach-lock-panel.peach-glass {3584  background: rgba(240, 233, 223, 0.82);3585  border: 1px solid rgba(26, 18, 8, 0.08);3586  box-shadow:3587    inset 0 1px 0 rgba(255, 255, 255, 0.4),3588    0 8px 24px rgba(80, 56, 32, 0.15);3589}35903591@supports not (backdrop-filter: blur(1px)) {3592  .peach-lock-panel.peach-glass {3593    background: rgba(26, 20, 16, 0.92);3594    box-shadow:3595      inset 0 1px 0 rgba(255, 255, 255, 0.05),3596      0 12px 28px rgba(0, 0, 0, 0.4);3597  }3598  .light .peach-lock-panel.peach-glass,3599  [data-theme="light"] .peach-lock-panel.peach-glass {3600    background: rgba(240, 233, 223, 0.98);3601  }3602}36033604.peach-lock-panel--secondary {3605  gap: 12px;3606}36073608.peach-lock-panel-header {3609  display: flex;3610  align-items: baseline;3611  justify-content: space-between;3612  gap: 12px;3613}36143615.peach-lock-option-grid {3616  display: grid;3617  gap: 10px;3618}36193620.peach-lock-option {3621  width: 100%;3622  display: grid;3623  gap: 6px;3624  padding: 14px 15px;3625  border-radius: 16px;3626  border: 1px solid rgba(240, 232, 216, 0.08);3627  background: rgba(240, 232, 216, 0.02);3628  color: var(--peach-t0);3629  text-align: left;3630  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3631}36323633.peach-lock-option:hover {3634  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3635  background: rgba(240, 232, 216, 0.04);3636  transform: translateY(-1px);3637}36383639.peach-lock-option-title {3640  font-size: 0.75rem;3641  color: var(--peach-t0);3642}36433644.peach-lock-option-copy {3645  font-size: 0.6875rem;3646  line-height: 1.55;3647  color: var(--peach-t1);3648}36493650.peach-onboarding-stack {3651  margin-top: 2px;3652}3653.peach-lock-panel-footer {3654  display: grid;3655  gap: 6px;3656  margin-top: 2px;3657  padding-top: 10px;3658  border-top: 1px solid rgba(240, 232, 216, 0.06);3659}36603661/* ── Restore tab view ─────────────────────────────────────────────────────3662   Tab-based restore screen replacing the old three-card picker. */36633664.peach-restore-tabview {3665  overflow: hidden;3666}36673668.peach-restore-tabcard {3669  flex: 1;3670  display: flex;3671  flex-direction: column;3672  gap: 0;3673  padding: 0;3674  overflow: hidden;3675  cursor: default;3676  user-select: none;3677  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3678}36793680/* ── Tab selector ─────────────────────────────────────────────────────── */36813682.peach-restore-tabs {3683  display: flex;3684  justify-content: space-around;3685  padding: 14px 10px 10px;3686  border-bottom: 1px solid var(--peach-t3);3687  gap: 2px;3688  overflow: hidden;3689  scrollbar-width: none;3690}3691.peach-restore-tabs::-webkit-scrollbar { display: none; }36923693.peach-restore-tab {3694  background: none;3695  border: none;3696  cursor: pointer;3697  padding: 3px 2px;3698  font-family: 'Cormorant Garamond', Georgia, serif;3699  font-style: italic;3700  font-size: 11px;3701  color: var(--peach-t2);3702  transition: color 150ms ease, text-shadow 150ms ease;3703  flex: 1;3704  min-width: 0;3705  text-align: center;3706  white-space: nowrap;3707  overflow: hidden;3708  text-overflow: ellipsis;3709}3710.peach-restore-tab:hover {3711  color: var(--peach-accent);3712  text-shadow:3713    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3714    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3715}3716.peach-restore-tab.is-active {3717  color: var(--peach-accent);3718  text-shadow:3719    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3720    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3721}37223723/* ── Content area ─────────────────────────────────────────────────────── */37243725.peach-restore-content {3726  padding: 16px 16px 14px;3727  display: flex;3728  flex-direction: column;3729  gap: 8px;3730  overflow: hidden;3731  scrollbar-width: none;3732  flex: 1;3733}3734.peach-restore-content::-webkit-scrollbar { display: none; }3735.peach-restore-content > * {3736  overflow: hidden;3737  scrollbar-width: none;3738}3739.peach-restore-content > *::-webkit-scrollbar { display: none; }37403741/* ── Shared tab inner layout ──────────────────────────────────────────── */37423743.peach-rt-symbols,3744.peach-rt-csv,3745.peach-rt-phone,3746.peach-restore-codex {3747  display: flex;3748  flex-direction: column;3749  gap: 8px;3750  overflow: hidden;3751}37523753.peach-restore-codex {3754  min-height: 0;3755  justify-content: center;3756}37573758.peach-restore-codex-title {3759  margin: 0;3760  font-family: var(--font-display);3761  font-size: 1rem;3762  font-style: italic;3763  color: var(--peach-t0);3764}37653766.peach-restore-codex-copy {3767  margin: 0;3768  font-size: 0.75rem;3769  line-height: 1.5;3770  color: var(--peach-t1);3771}37723773.peach-restore-codex-button {3774  width: 100%;3775  justify-content: center;3776}37773778.peach-rt-submit {3779  width: 100%;3780}37813782.peach-rt-error {3783  margin: 0;3784  font-size: 0.6875rem;3785  color: var(--peach-breach);3786  line-height: 1.4;3787}37883789/* ── PeachScript tab ──────────────────────────────────────────────────── */37903791.peach-restore-symbols-textarea {3792  font-family: 'PeachScript', monospace;3793  font-size: 13px;3794  line-height: 1.9;3795  letter-spacing: 0.1em;3796  word-break: break-all;3797  resize: none;3798  width: 100%;3799  min-height: 56px;3800  max-height: 72px;3801  overflow: hidden;3802  scrollbar-width: none;3803  -ms-overflow-style: none;3804  box-sizing: border-box;3805  padding: 6px 8px;3806  border-radius: 8px;3807  border: 1px solid var(--peach-t3);3808  background: rgba(240, 232, 216, 0.03);3809  color: var(--peach-t0);3810}3811.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3812.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }38133814.peach-restore-symbols-pass {3815  width: 100%;3816  box-sizing: border-box;3817  padding: 7px 10px;3818  border-radius: 8px;3819  border: 1px solid var(--peach-t3);3820  background: rgba(240, 232, 216, 0.03);3821  color: var(--peach-t0);3822  font-size: 0.8125rem;3823}3824.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }3825.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }38263827.peach-rt-divider {3828  text-align: center;3829  font-size: 0.6875rem;3830  color: var(--peach-t2);3831  font-style: italic;3832}38333834.peach-rt-file-label {3835  width: 100%;3836  justify-content: center;3837}38383839.peach-rt-anim-canvas {3840  width: 100%;3841  height: 180px;3842  border-radius: 10px;3843  overflow: hidden;3844  display: block;3845}38463847/* ── CSV tab ──────────────────────────────────────────────────────────── */38483849.peach-rt-csv-sources {3850  margin: 0;3851  font-size: 0.6875rem;3852  color: var(--peach-t2);3853  line-height: 1.5;3854  text-align: center;3855}38563857.peach-rt-csv-warning {3858  margin: 0;3859  font-family: "IBM Plex Mono", monospace;3860  font-size: 0.5625rem;3861  letter-spacing: 0.12em;3862  color: var(--peach-breach);3863  text-align: center;3864}38653866/* ── From Phone tab ───────────────────────────────────────────────────── */38673868.peach-rt-phone-code {3869  margin: 0;3870  text-align: center;3871  font-family: "IBM Plex Mono", monospace;3872  font-size: 22px;3873  letter-spacing: 0.18em;3874  color: var(--peach-t0);3875}38763877.peach-rt-phone-qr {3878  display: block;3879  width: 96px;3880  height: 96px;3881  margin: 0 auto;3882  border-radius: 6px;3883  image-rendering: pixelated;3884  overflow: hidden;3885}38863887.peach-rt-phone-hint {3888  margin: 0;3889  font-size: 0.6875rem;3890  color: var(--peach-t2);3891  line-height: 1.55;3892  text-align: center;3893}38943895/* ── Intro popup ──────────────────────────────────────────────────────── */38963897.peach-restore-intro-overlay {3898  position: absolute;3899  inset: 0;3900  z-index: 100;3901  display: flex;3902  align-items: center;3903  justify-content: center;3904  padding: 20px;3905  background: rgba(12, 10, 6, 0.7);3906  backdrop-filter: blur(4px);3907  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;3908}39093910.peach-restore-intro-card {3911  width: 100%;3912  display: flex;3913  flex-direction: column;3914  gap: 12px;3915  padding: 22px 20px 20px;3916  border-radius: 16px;3917  border: 1px solid var(--peach-t3);3918  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));3919  backdrop-filter: blur(4px);3920  -webkit-backdrop-filter: blur(4px);3921  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);3922}39233924.peach-restore-intro-headline {3925  margin: 0;3926  font-family: var(--font-display);3927  font-style: italic;3928  font-size: 20px;3929  font-weight: 400;3930  color: var(--peach-t0);3931}39323933.peach-restore-intro-body {3934  display: flex;3935  flex-direction: column;3936  gap: 8px;3937}3938.peach-restore-intro-body p {3939  margin: 0;3940  font-size: 0.75rem;3941  color: var(--peach-t1);3942  line-height: 1.5;3943}39443945.peach-restore-intro-btn {3946  width: 100%;3947  margin-top: 4px;3948}39493950/* Snapshot restore panel */3951.peach-snapshot-panel {3952  gap: 10px;3953  overflow-y: auto;3954  max-height: 340px;3955}3956.peach-snapshot-list {3957  display: flex;3958  flex-direction: column;3959  gap: 4px;3960}3961.peach-snapshot-row {3962  display: flex;3963  align-items: center;3964  justify-content: space-between;3965  width: 100%;3966  padding: 8px 10px;3967  border-radius: 8px;3968  border: 1px solid rgba(240, 232, 216, 0.07);3969  background: transparent;3970  cursor: pointer;3971  transition: border-color 120ms, background 120ms;3972  text-align: left;3973  gap: 8px;3974}3975.peach-snapshot-row:hover {3976  border-color: rgba(240, 232, 216, 0.14);3977  background: rgba(240, 232, 216, 0.03);3978}3979.peach-snapshot-row.is-selected {3980  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3981  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);3982}3983.peach-snapshot-time {3984  font-size: 11.5px;3985  color: var(--peach-t0);3986  flex: 1;3987}3988.peach-snapshot-count {3989  font-family: "IBM Plex Mono", monospace;3990  font-size: 0.625rem;3991  color: var(--peach-t2);3992  flex-shrink: 0;3993}3994.peach-snapshot-confirm {3995  display: flex;3996  flex-direction: column;3997  gap: 8px;3998  padding-top: 10px;3999  border-top: 1px solid rgba(240, 232, 216, 0.06);4000}4001.peach-snapshot-warning {4002  display: flex;4003  align-items: flex-start;4004  gap: 6px;4005  font-size: 10.5px;4006  color: rgba(220, 80, 60, 0.85);4007  line-height: 1.55;4008}4009.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }4010.peach-snapshot-confirm-row {4011  display: flex;4012  gap: 6px;4013  align-items: center;4014}4015.peach-snapshot-restore-btn {4016  width: 100%;4017}4018.peach-lock-hero--unlock .peach-lock-hero-art {4019  width: 112px;4020  height: 112px;4021  right: 0;4022  top: 2px;4023  opacity: 0.1;4024}40254026.peach-card {4027  border: 1px solid var(--peach-t3);4028  border-radius: 18px;4029  background:4030    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4031  box-shadow:4032    inset 0 0 0 1px var(--peach-border-accent),4033    inset 0 1px 0 rgba(240, 232, 216, 0.04),4034    0 12px 32px rgba(0, 0, 0, 0.14);4035  overflow: hidden;4036}40374038.peach-card-active {4039  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4040  box-shadow:4041    inset 0 1px 0 rgba(240, 232, 216, 0.05),4042    0 16px 38px rgba(0, 0, 0, 0.18),4043    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4044}40454046.peach-card-disabled {4047  opacity: 0.72;4048}40494050.peach-card-header {4051  width: 100%;4052  padding: 13px 16px 11px;4053  background: transparent;4054  color: var(--peach-t0);4055  display: flex;4056  justify-content: space-between;4057  align-items: center;4058  text-align: left;4059  font-size: 0.75rem;4060}40614062.peach-card-body {4063  padding: 0 16px 16px;4064  display: grid;4065  gap: 9px;4066}40674068.peach-card-tag {4069  color: var(--peach-t2);4070  font-family: "IBM Plex Mono", monospace;4071  font-size: 0.5625rem;4072  letter-spacing: 0.12em;4073  text-transform: uppercase;4074}40754076.peach-empty-copy {4077  display: grid;4078  gap: 6px;4079  color: var(--peach-t1);4080  font-size: 0.8125rem;4081}40824083.peach-lock-submit {4084  width: 100%;4085  box-shadow:4086    0 1px 0 rgba(255,255,255,0.10) inset,4087    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4088    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4089    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4090}40914092.peach-lock-secondary {4093  width: 100%;4094  border-color: var(--peach-t3);4095  background: rgba(240, 232, 216, 0.02);4096}40974098.peach-lock-secondary:hover {4099  background: rgba(240, 232, 216, 0.04);4100}41014102.peach-lock-note {4103  max-width: none;4104  line-height: 1.55;4105  margin: 0;4106}41074108.peach-overlay-action {4109  font-size: 0.625rem;4110  padding: 4px 8px;4111  letter-spacing: 0.06em;4112  min-width: 44px;4113  text-align: center;4114}41154116.peach-inline-action {4117  flex-shrink: 0;4118  font-size: 0.5625rem;4119  letter-spacing: 0.1em;4120  text-transform: uppercase;4121  padding: 4px 7px;4122}4123.peach-password-toggle-btn {4124  display: inline-flex;4125  align-items: center;4126  justify-content: center;4127  min-width: 30px;4128  min-height: 26px;4129  padding: 0 7px;4130  border: 1px solid var(--peach-t3);4131  border-radius: 999px;4132  background: rgba(240, 232, 216, 0.04);4133  color: var(--peach-t2);4134  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4135}4136.peach-password-toggle-btn:hover {4137  border-color: var(--peach-t2);4138  color: var(--peach-t0);4139  background: rgba(240, 232, 216, 0.06);4140}41414142.peach-new-textarea {4143  width: 100%;4144  min-height: 88px;4145  resize: vertical;4146  border: 0;4147  outline: none;4148  background: transparent;4149  color: var(--peach-t1);4150  font-family: "IBM Plex Mono", monospace;4151  font-size: 0.75rem;4152  line-height: 1.65;4153  caret-color: var(--peach-accent);4154}41554156.peach-new-textarea::placeholder {4157  color: var(--peach-t2);4158  opacity: 0.7;4159}41604161.peach-settings-actions {4162  display: grid;4163  gap: 8px;4164}41654166.peach-sync-section-label {4167  font-size: 0.6875rem;4168  color: var(--peach-t2);4169  text-transform: uppercase;4170  letter-spacing: 0.05em;4171}41724173.peach-sync-network-note {4174  margin: 0 0 6px;4175  font-size: 0.75rem;4176  color: var(--peach-t2);4177  line-height: 1.4;4178}41794180.peach-settings-row--tappable {4181  background: none;4182  border: none;4183  width: 100%;4184  text-align: left;4185  cursor: pointer;4186  color: var(--peach-t1);4187  font-size: 0.8125rem;4188}4189.peach-settings-row--tappable:hover {4190  color: var(--peach-t0);4191}41924193.peach-sync-pro-hint {4194  display: flex;4195  flex-direction: column;4196  align-items: flex-start;4197  gap: 8px;4198  padding: 12px 0 4px;4199}42004201.peach-sync-device-row {4202  display: flex;4203  justify-content: space-between;4204  align-items: center;4205  padding: 6px 0;4206  border-bottom: 1px solid var(--peach-t3);4207}42084209.peach-sync-device-info {4210  display: flex;4211  flex-direction: column;4212  gap: 2px;4213}42144215.peach-sync-device-name {4216  font-size: 0.8125rem;4217  color: var(--peach-t0);4218}42194220.peach-sync-device-meta {4221  font-size: 0.6875rem;4222  color: var(--peach-t2);4223}42244225.peach-sync-status-dot {4226  display: inline-block;4227  width: 8px;4228  height: 8px;4229  border-radius: 50%;4230  vertical-align: middle;4231}42324233.peach-sync-remove-btn {4234  color: var(--peach-breach);4235}42364237.peach-sync-advanced-row {4238  display: flex;4239  justify-content: space-between;4240  align-items: center;4241  padding: 6px 0;4242  gap: 12px;4243}42444245.peach-sync-advanced-info {4246  display: flex;4247  flex-direction: column;4248  gap: 2px;4249  flex: 1;4250}42514252.peach-sync-advanced-name {4253  font-size: 0.8125rem;4254  color: var(--peach-t0);4255}42564257.peach-sync-reset-confirm {4258  display: flex;4259  flex-direction: column;4260  gap: 8px;4261  padding: 10px;4262  border: 1px solid var(--peach-breach);4263  border-radius: 10px;4264  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4265}42664267.peach-sync-reset-confirm-headline {4268  font-size: 0.8125rem;4269  font-weight: 600;4270  color: var(--peach-t0);4271  margin: 0;4272}42734274.peach-sync-reset-confirm-body {4275  font-size: 0.75rem;4276  color: var(--peach-t1);4277  margin: 0;4278  line-height: 1.4;4279}42804281.peach-btn--danger {4282  background: var(--peach-breach);4283  color: #fff;4284  border-color: var(--peach-breach);4285}4286.peach-btn--danger:hover:not(:disabled) {4287  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4288}4289.peach-btn--danger:disabled {4290  opacity: 0.55;4291  cursor: not-allowed;4292}42934294.peach-sync-hero-icon {4295  color: var(--peach-t1);4296  opacity: 0.85;4297}42984299.peach-import-preview {4300  margin-bottom: 12px;4301  max-height: 152px;4302  overflow-y: auto;4303  border: 1px solid var(--peach-t3);4304  border-radius: 10px;4305  padding: 8px 10px;4306  display: grid;4307  gap: 8px;4308  background: rgba(240, 232, 216, 0.02);4309}43104311.peach-import-preview-row {4312  display: flex;4313  justify-content: space-between;4314  gap: 10px;4315  font-size: 0.6875rem;4316  color: var(--peach-t1);4317}43184319.peach-import-preview-title {4320  color: var(--peach-t0);4321  flex: 1;4322  min-width: 0;4323  overflow: hidden;4324  text-overflow: ellipsis;4325  white-space: nowrap;4326}43274328.peach-import-preview-meta {4329  color: var(--peach-t2);4330  flex-shrink: 0;4331  max-width: 42%;4332  overflow: hidden;4333  text-overflow: ellipsis;4334  white-space: nowrap;4335}43364337.peach-import-preview-more {4338  color: var(--peach-t2);4339  font-size: 0.625rem;4340}43414342.peach-restore-copy {4343  margin: 0;4344  color: var(--peach-t1);4345  font-size: 0.6875rem;4346  line-height: 1.6;4347}43484349.peach-restore-warning {4350  padding: 10px 12px;4351  border-radius: 12px;4352  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4353  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4354  color: var(--peach-t0);4355  font-size: 0.6875rem;4356  line-height: 1.55;4357}43584359.peach-provider-chips {4360  display: flex;4361  flex-wrap: wrap;4362  gap: 6px;4363}43644365.peach-provider-chip {4366  display: inline-flex;4367  align-items: center;4368  padding: 5px 8px;4369  border-radius: 999px;4370  border: 1px solid var(--peach-t3);4371  background: rgba(240, 232, 216, 0.02);4372  color: var(--peach-t1);4373  font-family: "IBM Plex Mono", monospace;4374  font-size: 0.5rem;4375  letter-spacing: 0.08em;4376  text-transform: uppercase;4377}43784379.peach-restore-file,4380.peach-restore-input {4381  width: 100%;4382  border-radius: 10px;4383  border: 1px solid var(--peach-t3);4384  background: var(--peach-s2);4385  color: var(--peach-t0);4386  font-size: 0.75rem;4387}43884389.peach-restore-file {4390  padding: 9px 10px;4391}43924393.peach-restore-file::file-selector-button {4394  margin-right: 10px;4395  padding: 7px 10px;4396  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4397  border-radius: 999px;4398  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4399  color: var(--peach-t0);4400  font-size: 0.625rem;4401  letter-spacing: 0.08em;4402  text-transform: uppercase;4403  cursor: pointer;4404}44054406.peach-restore-input {4407  padding: 10px 12px;4408}44094410.peach-auth-grid {4411  display: grid;4412  gap: 10px;4413}44144415.peach-import-summary {4416  color: var(--peach-t1);4417  font-size: 0.75rem;4418  line-height: 1.6;4419  margin-bottom: 12px;4420}44214422.peach-restore-error {4423  color: rgba(220, 80, 60, 0.95);4424  font-size: 0.75rem;4425  line-height: 1.55;4426}44274428.peach-passkey-card {4429  max-width: 400px;4430  margin: auto 16px;4431  align-self: center;4432  width: calc(100% - 32px);4433}44344435/* Center the approval card vertically inside the overlay-view (which sets4436 * flex-direction: column without justify-content). Without this, the card4437 * sits at the top with a tall empty band below — looks unfinished on the4438 * 320px popup. */4439.peach-overlay-view:has(.peach-passkey-card) {4440  justify-content: center;4441}44424443.peach-pro-badge {4444  padding: 2px 6px;4445  border-radius: 999px;4446  font-family: var(--font-ui);4447  font-size: 0.625rem;4448  letter-spacing: 0.08em;4449  text-transform: uppercase;4450  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4451  color: var(--peach-accent);4452}44534454/* ── Shortcuts rebind table ─────────────────────────────────── */4455.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4456.peach-shortcut-row {4457  display: flex;4458  align-items: center;4459  gap: 10px;4460  padding: 6px 0;4461}4462.peach-shortcut-row-label {4463  flex: 1;4464  font-size: 0.75rem;4465  color: var(--peach-t0);4466}4467.peach-shortcut-chip {4468  min-width: 64px;4469  padding: 4px 10px;4470  border-radius: 6px;4471  border: 1px solid var(--peach-t3);4472  background: var(--peach-input-bg, var(--surface-card));4473  color: var(--peach-t0);4474  font-family: var(--font-mono);4475  font-size: 0.6875rem;4476  letter-spacing: 0.04em;4477  cursor: pointer;4478  text-align: center;4479  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4480}4481.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4482.peach-shortcut-chip.is-custom {4483  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4484  color: var(--peach-accent);4485}4486.peach-shortcut-chip.is-capturing {4487  border-color: var(--peach-accent);4488  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4489  color: var(--peach-accent);4490  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4491}4492@keyframes peach-shortcut-capture-pulse {4493  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4494  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4495}4496.peach-shortcut-reset {4497  background: transparent;4498  border: none;4499  cursor: pointer;4500  color: var(--peach-t2);4501  padding: 4px 6px;4502  border-radius: 5px;4503  font-size: 0.875rem;4504  line-height: 1;4505  transition: color 120ms ease, background 120ms ease;4506}4507.peach-shortcut-reset:hover {4508  color: var(--peach-t0);4509  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4510}4511.peach-shortcuts-conflict {4512  margin: 4px 0 0;4513  padding: 8px 10px;4514  border-radius: 7px;4515  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4516  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4517  font-family: var(--font-mono);4518  font-size: 0.6875rem;4519  color: var(--peach-t0);4520}45214522/* ── Help dialog overlay (? to open) ────────────────────────── */4523.peach-shortcuts-help-backdrop {4524  position: fixed;4525  inset: 0;4526  background: rgba(0, 0, 0, 0.55);4527  backdrop-filter: blur(2px);4528  display: flex;4529  align-items: center;4530  justify-content: center;4531  z-index: 1000;4532  animation: peach-help-fade-in 140ms ease forwards;4533}4534@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4535.peach-shortcuts-help-card {4536  width: min(320px, 92vw);4537  max-height: 80vh;4538  overflow-y: auto;4539  border-radius: 14px;4540  border: 1px solid var(--peach-t3);4541  background: var(--peach-bg);4542  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4543  padding: 16px 18px 18px;4544  display: flex;4545  flex-direction: column;4546  gap: 12px;4547}4548.peach-shortcuts-help-head {4549  display: flex; align-items: center; justify-content: space-between;4550}4551.peach-shortcuts-help-head h3 {4552  margin: 0;4553  font-family: var(--font-display);4554  font-style: italic;4555  font-weight: 400;4556  font-size: 22px;4557  color: var(--peach-t0);4558}4559.peach-shortcuts-help-close {4560  background: transparent;4561  border: none;4562  color: var(--peach-t2);4563  cursor: pointer;4564  font-size: 0.875rem;4565  padding: 4px 8px;4566  border-radius: 5px;4567}4568.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4569.peach-shortcuts-help-body ul {4570  list-style: none; padding: 0; margin: 4px 0 12px;4571  display: grid; gap: 8px;4572}4573.peach-shortcuts-help-body li {4574  display: flex; align-items: center; justify-content: space-between; gap: 12px;4575  font-size: 0.75rem; color: var(--peach-t0);4576}4577.peach-shortcuts-help-body kbd {4578  font-family: var(--font-mono);4579  font-size: 0.6875rem;4580  padding: 3px 8px;4581  border-radius: 6px;4582  background: var(--surface-card);4583  border: 1px solid var(--peach-t3);4584  color: var(--peach-accent);4585  letter-spacing: 0.04em;4586}45874588/* ── Pro promo on Account screen ────────────────────────────── */4589.peach-pro-promo {4590  position: relative;4591  border-radius: 14px;4592  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4593  background:4594    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4595    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4596    var(--surface-card);4597  overflow: hidden;4598  margin-bottom: 14px;4599}4600.peach-pro-promo-glow {4601  position: absolute;4602  inset: -40% -20% auto auto;4603  width: 220px; height: 220px;4604  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4605  pointer-events: none;4606  filter: blur(8px);4607}4608.peach-pro-promo-inner {4609  position: relative;4610  padding: 18px 18px 16px;4611}4612.peach-pro-promo-title {4613  font-family: var(--font-display);4614  font-style: italic;4615  font-weight: 400;4616  font-size: 28px;4617  line-height: 1;4618  letter-spacing: -0.005em;4619  color: var(--peach-t0);4620  margin: 0 0 4px;4621}4622.peach-pro-promo-tagline {4623  font-family: var(--font-mono);4624  font-size: 0.625rem;4625  letter-spacing: 0.06em;4626  color: var(--peach-t2);4627  margin: 0 0 14px;4628}4629.peach-pro-promo-list {4630  list-style: none;4631  margin: 0 0 16px;4632  padding: 0;4633  display: grid;4634  gap: 9px;4635}4636.peach-pro-promo-list li {4637  display: flex;4638  align-items: flex-start;4639  gap: 9px;4640  font-size: 0.75rem;4641  color: var(--peach-t1);4642  line-height: 1.4;4643}4644.peach-pro-promo-list svg {4645  width: 14px;4646  height: 14px;4647  flex-shrink: 0;4648  color: var(--peach-accent);4649  margin-top: 2px;4650}4651.peach-pro-promo-list span {4652  color: var(--peach-t0);4653}4654.peach-pro-promo-cta {4655  width: 100%;4656  background: var(--peach-accent);4657  color: #fff;4658  border: none;4659  padding: 9px 12px;4660  border-radius: 9px;4661  font-size: 0.75rem;4662  font-weight: 500;4663  font-family: var(--font-ui);4664  letter-spacing: 0.02em;4665  text-decoration: none;4666  display: inline-flex;4667  align-items: center;4668  justify-content: center;4669  cursor: pointer;4670  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4671  box-shadow: 0 2px 16px var(--peach-glow);4672}4673.peach-pro-promo-cta:hover {4674  filter: brightness(1.07);4675  box-shadow: 0 4px 24px var(--peach-glow);4676  transform: translateY(-1px);4677}4678.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }46794680.peach-pro-or-divider {4681  display: flex;4682  align-items: center;4683  gap: 10px;4684  margin: 4px 0 12px;4685  font-family: var(--font-mono);4686  font-size: 0.625rem;4687  letter-spacing: 0.06em;4688  color: var(--peach-t2);4689  text-transform: uppercase;4690}4691.peach-pro-or-divider::before,4692.peach-pro-or-divider::after {4693  content: "";4694  flex: 1;4695  height: 1px;4696  background: var(--peach-t3);4697}46984699.peach-loading {4700  position: absolute;4701  inset: 0;4702  display: flex;4703  align-items: center;4704  justify-content: center;4705  background: var(--bg);4706  animation: peach-loading-pulse 1.2s ease-in-out infinite;4707}47084709@keyframes peach-loading-pulse {4710  0%, 100% { opacity: 0.6; }4711  50% { opacity: 1; }4712}47134714/* ── Health Dashboard ─────────────────────────────────────────────────── */4715.peach-health-body {4716  flex: 1;4717  overflow-y: auto;4718  display: flex;4719  flex-direction: column;4720  /* Hide the platform scrollbar — every other scrollable surface in the4721   * popup hides it; the Health view was the one outlier and it ruined the4722   * polish. Behavior unchanged, just no rail rendered. */4723  scrollbar-width: none;4724  -ms-overflow-style: none;4725}4726.peach-health-body::-webkit-scrollbar { display: none; }47274728/* Loading screen for the Vault Health view. The advanced report computation4729 * can run for a few seconds on a large vault — without a clear loading4730 * screen the surface looked broken (the entry view bleeds through the4731 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4732.peach-health-loading-screen {4733  flex: 1;4734  display: flex;4735  flex-direction: column;4736  align-items: center;4737  justify-content: center;4738  gap: 14px;4739  padding: 32px 28px;4740  text-align: center;4741}47424743.peach-health-loading-glyph {4744  width: 48px;4745  height: 48px;4746  display: flex;4747  align-items: center;4748  justify-content: center;4749  border-radius: 14px;4750  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4751  color: var(--peach-accent);4752}47534754.peach-health-loading-title {4755  margin: 0;4756  font-family: var(--font-display);4757  font-style: italic;4758  font-weight: 300;4759  font-size: 19px;4760  line-height: 1.2;4761  color: var(--peach-t0);4762}47634764.peach-health-loading-copy {4765  margin: 0;4766  max-width: 240px;4767  font-size: 0.75rem;4768  line-height: 1.55;4769  color: var(--peach-t2);4770}47714772.peach-health-loading-track {4773  width: 200px;4774  height: 3px;4775  margin-top: 6px;4776  border-radius: 999px;4777  background: rgba(240, 232, 216, 0.06);4778  overflow: hidden;4779}47804781.peach-health-loading-fill {4782  width: 40%;4783  height: 100%;4784  border-radius: inherit;4785  background: linear-gradient(4786    90deg,4787    transparent 0%,4788    var(--peach-accent) 50%,4789    transparent 100%4790  );4791  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4792}47934794@keyframes peach-health-loading-sweep {4795  0%   { transform: translateX(-100%); }4796  100% { transform: translateX(350%); }4797}47984799[data-motion="reduce"] .peach-health-loading-fill,4800[data-motion="reduce"] .peach-health-loading-glyph svg path {4801  animation: none;4802}48034804.peach-health-summary {4805  padding: 10px 16px 6px;4806  font-family: "IBM Plex Mono", monospace;4807  font-size: 0.6875rem;4808}4809.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4810.peach-health-summary-ok { color: var(--peach-t2); }48114812.peach-health-check-row {4813  padding: 0 16px 10px;4814}4815.peach-health-check-btn {4816  width: 100%;4817  display: flex;4818  align-items: center;4819  justify-content: center;4820}48214822.peach-health-sections {4823  flex: 1;4824  display: flex;4825  flex-direction: column;4826}48274828.peach-health-section {4829  border-bottom: 1px solid var(--peach-t3);4830}48314832.peach-health-section-header {4833  width: 100%;4834  display: flex;4835  align-items: center;4836  justify-content: space-between;4837  padding: 9px 16px;4838  background: transparent;4839  cursor: pointer;4840  color: var(--peach-t0);4841}48424843.peach-health-section-title-row {4844  display: flex;4845  align-items: center;4846  gap: 8px;4847}48484849.peach-health-count-badge {4850  display: inline-flex;4851  align-items: center;4852  justify-content: center;4853  min-width: 20px;4854  height: 18px;4855  padding: 0 5px;4856  border-radius: 999px;4857  background: rgba(220,80,60,0.15);4858  border: 1px solid rgba(220,80,60,0.25);4859  font-family: "IBM Plex Mono", monospace;4860  font-size: 0.5625rem;4861  color: rgba(220,80,60,0.9);4862}48634864.peach-health-section-title {4865  font-family: "IBM Plex Mono", monospace;4866  font-size: 0.6875rem;4867  text-transform: uppercase;4868  letter-spacing: 0.1em;4869  color: var(--peach-t1);4870}48714872.peach-health-chevron {4873  color: var(--peach-t2);4874  transition: transform 200ms ease;4875  flex-shrink: 0;4876}4877.peach-health-chevron.is-expanded {4878  transform: rotate(180deg);4879}48804881.peach-health-section-body {4882  padding: 0 16px 10px;4883  display: flex;4884  flex-direction: column;4885  gap: 4px;4886}48874888.peach-health-row {4889  display: flex;4890  align-items: flex-start;4891  justify-content: space-between;4892  gap: 8px;4893  padding: 6px 8px;4894  border-radius: 8px;4895  background: rgba(240,232,216,0.02);4896}48974898.peach-health-row-info {4899  flex: 1;4900  min-width: 0;4901  display: flex;4902  flex-direction: column;4903  gap: 2px;4904}49054906.peach-health-row-name {4907  font-family: var(--font-display);4908  font-size: 0.9375rem;4909  font-style: italic;4910  font-weight: 400;4911  color: var(--peach-t0);4912  white-space: nowrap;4913  overflow: hidden;4914  text-overflow: ellipsis;4915}49164917.peach-health-row-meta {4918  font-family: "IBM Plex Mono", monospace;4919  font-size: 0.5625rem;4920  color: var(--peach-t2);4921  letter-spacing: 0.05em;4922}49234924.peach-health-fix-btn {4925  font-size: 0.5625rem;4926  letter-spacing: 0.08em;4927  text-transform: uppercase;4928  padding: 4px 7px;4929  flex-shrink: 0;4930  display: flex;4931  align-items: center;4932}49334934.peach-health-empty {4935  font-family: "IBM Plex Mono", monospace;4936  font-size: 0.625rem;4937  color: var(--peach-t2);4938  padding: 6px 0;4939}49404941.peach-health-loading {4942  font-family: "IBM Plex Mono", monospace;4943  font-size: 0.625rem;4944  color: var(--peach-t2);4945  padding: 6px 0;4946  display: flex;4947  align-items: center;4948  gap: 6px;4949}49504951.peach-health-loading::before {4952  content: "";4953  width: 10px;4954  height: 10px;4955  border: 1.5px solid var(--peach-t3);4956  border-top-color: var(--peach-accent);4957  border-radius: 50%;4958  animation: peach-spin 600ms linear infinite;4959}49604961@keyframes peach-spin {4962  to { transform: rotate(360deg); }4963}49644965.peach-spinner {4966  width: 32px;4967  height: 32px;4968  border: 2px solid var(--peach-s2);4969  border-top-color: var(--peach-accent);4970  border-radius: 50%;4971  margin: 0 auto 16px;4972  animation: peach-spin 0.8s linear infinite;4973}49744975.peach-progress-screen {4976  text-align: center;4977  padding: 32px 16px;4978}49794980.peach-progress-screen-title {4981  font-size: 0.8125rem;4982  color: var(--peach-t0);4983  margin-bottom: 16px;4984}49854986.peach-progress-screen-stage {4987  font-size: 0.6875rem;4988  color: var(--peach-t2);4989  min-height: 14px;4990}49914992.peach-progress-screen-note {4993  font-size: 0.625rem;4994  color: var(--peach-t2);4995  margin-top: 8px;4996}49974998.peach-pairing-body {4999  flex: 1;5000  overflow-y: auto;5001  display: flex;5002  flex-direction: column;5003}50045005.peach-pairing-content {5006  flex: 1;5007  display: flex;5008  flex-direction: column;5009  align-items: center;5010  justify-content: center;5011  gap: 14px;5012  padding: 28px 20px;5013  text-align: center;5014}50155016.peach-pairing-code-screen {5017  gap: 18px;5018}50195020.peach-pairing-headline {5021  font-family: var(--font-display);5022  font-style: italic;5023  font-weight: 300;5024  font-size: 28px;5025  color: var(--peach-t0);5026  margin: 0;5027  line-height: 1;5028}50295030.peach-pairing-subline {5031  font-size: 0.75rem;5032  color: var(--peach-t2);5033  max-width: 220px;5034  line-height: 1.5;5035  margin: 0;5036}50375038.peach-pairing-subline--center {5039  text-align: center;5040}50415042/* 6-digit pairing code — both display (.peach-pairing-code) and entry5043   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking5044   so the two modes feel like the same surface. */5045.peach-pairing-code {5046  font-family: "IBM Plex Mono", monospace;5047  font-size: 36px;5048  letter-spacing: 0.25em;5049  color: var(--peach-t0);5050  text-align: center;5051  padding: 24px 0;5052  text-shadow:5053    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),5054    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);5055  background: transparent;5056  border: 0;5057  cursor: default;5058  user-select: text;5059}50605061.peach-pairing-code--loading,5062.peach-pairing-code--expired {5063  font-size: 18px;5064  letter-spacing: 0.04em;5065  color: var(--peach-t2);5066  cursor: pointer;5067  text-shadow: none;5068}50695070.peach-pairing-qr-container {5071  display: flex;5072  flex-direction: column;5073  align-items: center;5074  gap: 10px;5075}50765077.peach-pairing-qr {5078  width: 240px;5079  height: 240px;5080  display: block;5081}50825083.peach-pairing-instruction {5084  font-size: 0.75rem;5085  color: var(--peach-t2);5086  text-align: center;5087  line-height: 1.5;5088  margin: 0;5089  max-width: 220px;5090}50915092.peach-pairing-expiry {5093  font-family: "IBM Plex Mono", monospace;5094  font-size: 13px;5095  letter-spacing: 0.06em;5096  color: var(--peach-t2);5097  margin: 0;5098}50995100.peach-pairing-regen {5101  font-size: 0.75rem;5102  color: var(--peach-accent);5103  background: transparent;5104  border: 0;5105  cursor: pointer;5106  padding: 4px 0;5107  text-decoration: underline;5108  text-underline-offset: 2px;5109}51105111.peach-pairing-code-input {5112  font-family: "IBM Plex Mono", monospace;5113  font-size: 36px;5114  letter-spacing: 0.25em;5115  color: var(--peach-t0);5116  background: transparent;5117  border: 0;5118  border-bottom: 1px solid var(--peach-t3);5119  outline: none;5120  text-align: center;5121  padding: 18px 0;5122  width: 220px;5123  caret-color: var(--peach-accent);5124  transition: border-color 160ms ease;5125}51265127.peach-pairing-code-input::placeholder {5128  color: var(--peach-t3);5129}51305131.peach-pairing-code-input:focus {5132  border-bottom-color: var(--peach-accent);5133}51345135.peach-pairing-toggle {5136  background: transparent;5137  border: 0;5138  color: var(--peach-t2);5139  font-size: 0.75rem;5140  padding: 8px 4px;5141  cursor: pointer;5142  transition: color 120ms ease;5143}51445145.peach-pairing-toggle:hover:not(:disabled) {5146  color: var(--peach-t1);5147}51485149.peach-pairing-toggle:disabled {5150  opacity: 0.5;5151  cursor: default;5152}51535154.peach-pairing-hint {5155  font-size: 0.6875rem;5156  color: var(--peach-t2);5157  margin: 0;5158  text-align: center;5159}51605161.peach-pairing-status {5162  display: flex;5163  align-items: center;5164  gap: 8px;5165  margin: 0;5166  font-size: 0.75rem;5167  color: var(--peach-t1);5168}51695170.peach-pairing-error {5171  margin: 0;5172  font-size: 0.6875rem;5173  color: var(--peach-breach);5174}51755176.peach-pairing-error--muted {5177  color: var(--peach-t2);5178}51795180.peach-pairing-spinner {5181  width: 12px;5182  height: 12px;5183  border: 1.5px solid var(--peach-t3);5184  border-top-color: var(--peach-accent);5185  border-radius: 50%;5186  animation: peach-spin 0.8s linear infinite;5187}51885189.peach-pairing-success-icon,5190.peach-pairing-error-icon,5191.peach-pairing-hero {5192  display: inline-flex;5193  align-items: center;5194  justify-content: center;5195}51965197/* Tag chips */5198.peach-tag-chip {5199  display: inline-flex;5200  align-items: center;5201  gap: 4px;5202  padding: 3px 8px;5203  border-radius: 999px;5204  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5205  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5206  color: var(--peach-t0);5207  font-family: "IBM Plex Mono", monospace;5208  font-size: 0.625rem;5209  letter-spacing: 0.04em;5210}52115212.peach-tag-chip-remove {5213  background: transparent;5214  border: none;5215  color: inherit;5216  opacity: 0.6;5217  cursor: pointer;5218  padding: 0;5219  font-size: 0.75rem;5220  line-height: 1;5221}52225223.peach-tag-chip-remove:hover {5224  opacity: 1;5225}52265227/* Tag input */5228.peach-tag-input-wrap {5229  border-bottom: 1px solid var(--peach-t3);5230}52315232.peach-tag-suggestions {5233  display: flex;5234  flex-wrap: wrap;5235  gap: 4px;5236  padding: 6px 0;5237}52385239.peach-tag-suggestion {5240  padding: 2px 8px;5241  border-radius: 999px;5242  border: 1px solid var(--peach-t3);5243  background: var(--peach-s2);5244  color: var(--peach-t1);5245  font-family: "IBM Plex Mono", monospace;5246  font-size: 0.625rem;5247  cursor: pointer;5248  transition: border-color 80ms ease, background 80ms ease;5249}52505251.peach-tag-suggestion:hover {5252  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5253  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5254}52555256/* Identity suggestions — shown below username/email inputs in new-entry form */5257@keyframes peach-suggest-in {5258  from { opacity: 0; transform: translateY(-4px); }5259  to   { opacity: 1; transform: none; }5260}52615262.peach-identity-suggestions {5263  display: flex;5264  flex-direction: column;5265  gap: 1px;5266  margin-top: 4px;5267  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5268}52695270.peach-identity-filter-row {5271  display: flex;5272  align-items: center;5273  gap: 4px;5274  padding: 2px 0 5px;5275}52765277.peach-identity-collapse-btn {5278  margin-left: auto;5279  background: transparent;5280  border: none;5281  cursor: pointer;5282  color: var(--peach-t3);5283  padding: 2px 4px;5284  display: flex;5285  align-items: center;5286  line-height: 0;5287  border-radius: 3px;5288  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5289}52905291.peach-identity-collapse-btn:hover {5292  color: var(--peach-t1);5293}52945295.peach-identity-collapse-btn.is-collapsed {5296  transform: rotate(-90deg);5297}52985299.peach-identity-rows {5300  display: grid;5301  grid-template-rows: 1fr;5302  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5303}53045305.peach-identity-rows.is-collapsed {5306  grid-template-rows: 0fr;5307}53085309.peach-identity-rows-inner {5310  overflow-y: auto;5311  min-height: 0;5312  max-height: 148px;5313  scrollbar-width: thin;5314  scrollbar-color: var(--peach-t3) transparent;5315  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5316  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5317}53185319.peach-identity-rows-inner::-webkit-scrollbar {5320  width: 4px;5321}53225323.peach-identity-rows-inner::-webkit-scrollbar-track {5324  background: transparent;5325}53265327.peach-identity-rows-inner::-webkit-scrollbar-thumb {5328  background: var(--peach-t3);5329  border-radius: 2px;5330}53315332.peach-identity-filter-pill {5333  padding: 2px 7px;5334  border-radius: 999px;5335  border: 1px solid var(--peach-t3);5336  background: transparent;5337  color: var(--peach-t2);5338  font-family: "IBM Plex Mono", monospace;5339  font-size: 0.6rem;5340  cursor: pointer;5341  transition: border-color 80ms, background 80ms, color 80ms;5342}53435344.peach-identity-filter-pill.is-on {5345  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5346  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5347  color: var(--peach-accent);5348}53495350.peach-identity-suggestion {5351  display: flex;5352  align-items: center;5353  gap: 6px;5354  width: 100%;5355  padding: 4px 6px;5356  border-radius: 5px;5357  border: none;5358  background: transparent;5359  cursor: pointer;5360  text-align: left;5361  transition: background 80ms ease;5362}53635364.peach-identity-suggestion:hover,5365.peach-identity-suggestion:focus {5366  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5367  outline: none;5368}53695370.peach-identity-suggestion-value {5371  font-family: "IBM Plex Mono", monospace;5372  font-size: 0.7rem;5373  color: var(--peach-t1);5374  overflow: hidden;5375  text-overflow: ellipsis;5376  white-space: nowrap;5377  flex: 1;5378  min-width: 0;5379}53805381.peach-identity-suggestion-type {5382  font-family: "IBM Plex Mono", monospace;5383  font-size: 0.55rem;5384  font-weight: 600;5385  flex-shrink: 0;5386  padding: 1px 4px;5387  border-radius: 3px;5388}53895390.peach-identity-suggestion-type--email {5391  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5392  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5393}53945395.peach-identity-suggestion-type--username {5396  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5397  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5398}53995400.peach-identity-suggestion-meta {5401  font-family: "IBM Plex Mono", monospace;5402  font-size: 0.6rem;5403  color: var(--peach-t3);5404  flex-shrink: 0;5405}54065407/* Tag filter strip */5408.peach-tag-filter-strip {5409  border-bottom: 1px solid var(--peach-t3);5410  flex-shrink: 0;5411}54125413.peach-tag-filter-chip {5414  display: inline-flex;5415  align-items: center;5416  padding: 4px 10px;5417  border-radius: 999px;5418  border: 1px solid var(--peach-t3);5419  background: transparent;5420  color: var(--peach-t2);5421  font-family: "IBM Plex Mono", monospace;5422  font-size: 0.5625rem;5423  letter-spacing: 0.06em;5424  text-transform: uppercase;5425  cursor: pointer;5426  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5427  white-space: nowrap;5428}54295430.peach-tag-filter-chip:hover {5431  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5432  color: var(--peach-t1);5433}54345435.peach-tag-filter-chip.is-selected {5436  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5437  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5438  color: var(--peach-t0);5439}54405441/* ─────────────────────────────────────────────────────────────────────────5442   v1.4.12 additions5443   ─────────────────────────────────────────────────────────────────────── */54445445/* Sort bar */5446.peach-sort-bar {5447  display: flex;5448  align-items: center;5449  gap: 4px;5450  padding: 5px 12px;5451  border-bottom: 1px solid var(--peach-t3);5452  flex-shrink: 0;5453  overflow-x: auto;5454  scrollbar-width: none;5455}54565457.peach-sort-btn {5458  padding: 2px 9px;5459  border-radius: 999px;5460  border: 1px solid transparent;5461  background: transparent;5462  color: var(--peach-t2);5463  font-family: "IBM Plex Mono", monospace;5464  font-size: 0.5625rem;5465  letter-spacing: 0.07em;5466  text-transform: uppercase;5467  cursor: pointer;5468  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5469  white-space: nowrap;5470}54715472.peach-sort-btn:hover {5473  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5474  color: var(--peach-t1);5475}54765477.peach-sort-btn.is-active {5478  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5479  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5480  color: var(--peach-t0);5481}54825483.peach-sort-scope-btn {5484  padding-inline: 8px;5485  font-size: 0.53125rem;5486  letter-spacing: 0.05em;5487}54885489.peach-sort-domain-hint {5490  margin-left: auto;5491  font-family: "IBM Plex Mono", monospace;5492  font-size: 0.5625rem;5493  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5494  white-space: nowrap;5495  overflow: hidden;5496  text-overflow: ellipsis;5497  max-width: 110px;5498}54995500/* Tab-match badge on entry rows */5501.peach-tab-match-badge {5502  display: inline-block;5503  width: 6px;5504  height: 6px;5505  border-radius: 50%;5506  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5507  margin-left: 5px;5508  vertical-align: middle;5509  flex-shrink: 0;5510  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5511}55125513.peach-entry-row.is-tab-match {5514  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5515  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5516}55175518.peach-entry-row.is-tab-match:hover {5519  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5520}55215522/* Entry list stagger entrance */5523@keyframes peach-entry-fadein {5524  from { opacity: 0; transform: translateY(4px); }5525  to   { opacity: 1; transform: translateY(0); }5526}55275528.peach-vault-list .peach-entry-row {5529  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5530}55315532/* Button press micro-interaction */5533.peach-btn:active {5534  transform: scale(0.95);5535  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5536}55375538.peach-sort-btn:active,5539.peach-tag-filter-chip:active {5540  transform: scale(0.93);5541  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5542}55435544/* Password strength bar (Lock view + shared) */5545.peach-password-strength {5546  display: flex;5547  align-items: center;5548  gap: 8px;5549  margin-top: 6px;5550}55515552.peach-strength-bar {5553  flex: 1;5554  height: 3px;5555  border-radius: 2px;5556  background: var(--peach-t3);5557  overflow: hidden;5558}55595560.peach-strength-fill {5561  height: 100%;5562  border-radius: 2px;5563  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5564              background 300ms ease;5565}55665567.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5568.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5569.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5570.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }55715572.peach-strength-label {5573  font-family: "IBM Plex Mono", monospace;5574  font-style: italic;5575  font-size: 0.5625rem;5576  font-weight: 300;5577  letter-spacing: 0.06em;5578  color: var(--peach-t2);5579  min-width: 36px;5580  text-align: right;5581}55825583.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5584.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5585.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5586.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }55875588/* Duress form */5589.peach-duress-status {5590  padding: 2px 8px;5591  border-radius: 999px;5592  border: 1px solid var(--peach-t3);5593  font-family: "IBM Plex Mono", monospace;5594  font-size: 0.5625rem;5595  letter-spacing: 0.07em;5596  text-transform: uppercase;5597  color: var(--peach-t2);5598  flex-shrink: 0;5599}56005601.peach-duress-status.is-active {5602  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5603  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5604  color: var(--peach-t0);5605}56065607.peach-duress-form {5608  padding: 8px 0 4px;5609  display: flex;5610  flex-direction: column;5611  gap: 6px;5612}56135614.peach-duress-form .peach-label {5615  margin-top: 4px;5616}56175618.peach-duress-actions {5619  display: flex;5620  gap: 6px;5621  align-items: center;5622  margin-top: 4px;5623}56245625.peach-duress-actions .peach-btn:first-child {5626  margin-right: auto;5627}56285629/* Improved overlay spring entrance */5630.peach-overlay-view.ov-enter-up {5631  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5632}56335634@keyframes ov-enter-up-spring {5635  from { opacity: 0; transform: translateY(16px) scale(0.98); }5636  to   { opacity: 1; transform: translateY(0) scale(1); }5637}56385639.peach-overlay-view.ov-enter-right {5640  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5641}56425643@keyframes ov-enter-right-spring {5644  from { opacity: 0; transform: translateX(18px) scale(0.98); }5645  to   { opacity: 1; transform: translateX(0) scale(1); }5646}56475648/* ── Onboarding-mode restore screens (file import) ── */5649/* Used when MainImportView renders during onboarding (no vault yet).5650   Animates like a lock-screen transition. */5651.peach-lock-view {5652  position: absolute;5653  inset: 0;5654  display: flex;5655  flex-direction: column;5656  background:5657    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5658    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5659    var(--peach-bg);5660  z-index: 2;5661  overflow: hidden;5662  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5663}56645665.peach-lock-view-header {5666  display: flex;5667  align-items: center;5668  justify-content: space-between;5669  padding: 16px 18px 12px;5670  flex-shrink: 0;5671}56725673/* ───────── Settings: auto-lock select ───────── */5674.peach-settings-select {5675  font-family: "IBM Plex Mono", monospace;5676  font-size: 0.6875rem;5677  background: transparent;5678  border: 1px solid var(--peach-t3);5679  border-radius: 4px;5680  color: var(--peach-t1);5681  padding: 3px 6px;5682  cursor: pointer;5683  outline: none;5684}5685.peach-settings-select:focus {5686  border-color: var(--peach-accent);5687}56885689/* ───────── Duress status pill (new polished) ───────── */5690.peach-duress-status-pill {5691  font-family: "IBM Plex Mono", monospace;5692  font-size: 0.5625rem;5693  text-transform: uppercase;5694  letter-spacing: 0.12em;5695  padding: 2px 8px;5696  border-radius: 12px;5697  background: var(--peach-t3);5698  color: var(--peach-t2);5699  flex-shrink: 0;5700}5701.peach-duress-status-pill.is-active {5702  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5703  color: var(--peach-accent);5704}57055706/* ───────── Entry advanced disclosure (canary) ───────── */5707.peach-entry-advanced {5708  margin-top: 12px;5709  border-top: 1px solid var(--peach-t3);5710  padding-top: 10px;5711  position: relative;5712  z-index: 1;5713}5714.peach-entry-advanced-toggle {5715  display: flex;5716  align-items: center;5717  justify-content: space-between;5718  width: 100%;5719  background: transparent;5720  border: none;5721  cursor: pointer;5722  padding: 0;5723  color: var(--peach-t2);5724}5725.peach-canary-section {5726  margin-top: 10px;5727  display: grid;5728  gap: 6px;5729}57305731/* ───────── Import: merge/replace radio choices ───────── */5732.peach-import-choice {5733  display: flex;5734  align-items: flex-start;5735  gap: 10px;5736  padding: 8px 10px;5737  border: 1px solid var(--peach-t3);5738  border-radius: 10px;5739  cursor: pointer;5740  margin-bottom: 6px;5741  transition: border-color 120ms ease, background 120ms ease;5742}5743.peach-import-choice:hover {5744  border-color: var(--peach-accent);5745}5746.peach-import-choice input[type="radio"] {5747  margin-top: 3px;5748  accent-color: var(--peach-accent);5749  flex-shrink: 0;5750}5751.peach-import-choice-main {5752  display: flex;5753  flex-direction: column;5754  gap: 2px;5755  min-width: 0;5756}5757.peach-import-choice-label {5758  font-size: 0.75rem;5759  color: var(--peach-t0);5760}5761.peach-import-choice-sub {5762  font-size: 0.6875rem;5763  color: var(--peach-t2);5764  line-height: 1.5;5765}57665767/* ───────── Export: success confirmation strip ───────── */5768.peach-export-success {5769  display: flex;5770  align-items: flex-start;5771  gap: 10px;5772  padding: 12px;5773  border-radius: 12px;5774  border: 1px solid rgba(150, 175, 110, 0.3);5775  background: rgba(150, 175, 110, 0.08);5776  color: var(--peach-t0);5777  font-size: 0.75rem;5778  line-height: 1.55;5779}5780.peach-export-success-check {5781  color: rgba(150, 175, 110, 0.9);5782  font-size: 0.875rem;5783  flex-shrink: 0;5784}57855786/* ── Trash view ──────────────────────────────────────────────────────── */5787.peach-trash-entry-row {5788  display: flex;5789  align-items: center;5790  justify-content: space-between;5791  gap: 8px;5792  padding: 8px 0;5793  border-bottom: 1px solid var(--peach-border);5794}5795.peach-trash-entry-info {5796  flex: 1;5797  min-width: 0;5798  display: flex;5799  flex-direction: column;5800  gap: 2px;5801}5802.peach-trash-entry-title {5803  font-size: 0.8125rem;5804  color: var(--peach-t0);5805  overflow: hidden;5806  text-overflow: ellipsis;5807  white-space: nowrap;5808}5809.peach-trash-entry-meta {5810  font-family: var(--font-mono);5811  font-size: 0.5625rem;5812  color: var(--peach-t2);5813  letter-spacing: 0.04em;5814}5815.peach-trash-entry-actions {5816  display: flex;5817  align-items: center;5818  gap: 4px;5819  flex-shrink: 0;5820}5821.peach-trash-delete-btn {5822  background: transparent;5823  border: 0;5824  color: var(--peach-t3);5825  font-size: 1rem;5826  line-height: 1;5827  cursor: pointer;5828  padding: 2px 5px;5829  transition: color 0.15s;5830}5831.peach-trash-delete-btn:hover { color: var(--peach-breach); }5832.peach-trash-list {5833  overflow-y: auto;5834}5835.peach-trash-footer {5836  display: flex;5837  align-items: center;5838  gap: 8px;5839  padding: 8px 0 0;5840  border-top: 1px solid var(--peach-border);5841  margin-top: 4px;5842}5843.peach-trash-purge-all {5844  background: transparent;5845  border: 0;5846  color: var(--peach-t3);5847  font-size: 0.625rem;5848  cursor: pointer;5849  padding: 4px 0;5850  letter-spacing: 0.03em;5851  transition: color 0.2s;5852}5853.peach-trash-purge-all:hover { color: var(--peach-breach); }5854.peach-trash-purge-confirm-label {5855  font-size: 0.625rem;5856  color: var(--peach-t1);5857  flex: 1;5858}58595860/* ── Settings shortcuts grid ─────────────────────────────────────────── */5861.peach-shortcuts-grid {5862  display: grid;5863  grid-template-columns: auto 1fr;5864  gap: 6px 12px;5865  align-items: center;5866  padding: 4px 0;5867}5868.peach-shortcut-key {5869  font-family: var(--font-mono);5870  font-size: 0.625rem;5871  color: var(--peach-t0);5872  background: var(--peach-t3);5873  border-radius: 4px;5874  padding: 2px 6px;5875  white-space: nowrap;5876  text-align: center;5877}5878.peach-shortcut-desc {5879  font-size: 0.6875rem;5880  color: var(--peach-t1);5881}58825883/* ── Sort bar trash button ───────────────────────────────────────────── */5884.peach-sort-trash-btn {5885  display: flex;5886  align-items: center;5887  justify-content: center;5888  padding: 3px 5px;5889  background: transparent;5890  border: none;5891  cursor: pointer;5892  color: var(--peach-t2);5893  border-radius: 4px;5894  transition: color 140ms ease, background 140ms ease;5895}5896.peach-sort-trash-btn:hover {5897  color: var(--peach-t1);5898  background: var(--peach-t3);5899}5900.peach-sort-trash-btn.is-active {5901  color: var(--peach-accent);5902}59035904/* Accent color picker */5905.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5906.peach-accent-picker {5907  display: flex;5908  flex-wrap: wrap;5909  gap: 7px;5910  padding: 2px 0;5911}5912.peach-accent-swatch {5913  width: 22px;5914  height: 22px;5915  border-radius: 50%;5916  border: 2px solid transparent;5917  cursor: pointer;5918  padding: 0;5919  transition: transform 100ms;5920  outline-offset: 2px;5921}5922.peach-accent-swatch:hover { transform: scale(1.15); }5923.peach-accent-swatch.is-active {5924  border-color: var(--peach-t0);5925  transform: scale(1.1);5926}59275928.peach-pill-group {5929  display: flex;5930  gap: 6px;5931}5932.peach-pill-group .peach-btn.is-active {5933  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5934  border-color: var(--peach-accent);5935  color: var(--peach-t0);5936}59375938/* ── Card entry styles ───────────────────────────────────────── */5939.peach-card-number {5940  font-family: var(--peach-mono);5941  letter-spacing: 0.08em;5942}59435944.peach-card-network-badge {5945  font-size: 0.625rem;5946  padding: 1px 5px;5947  border-radius: 4px;5948  border: 0.5px solid var(--peach-border);5949  color: var(--peach-text-dim);5950  margin-left: 6px;5951  vertical-align: middle;5952}59535954.peach-card-expiry-row {5955  display: flex;5956  align-items: center;5957  gap: 8px;5958}59595960.peach-card-expiry-sep {5961  color: var(--peach-text-dim);5962}59635964/* ── Pro tier — upgrade screen ──────────────────────────────── */5965.peach-pro-mark {5966  font-size: 0.5625rem;5967  color: var(--peach-accent);5968  margin-left: 6px;5969  vertical-align: super;5970  opacity: 0.7;5971}59725973.peach-pro-mini-badge {5974  display: block;5975  font-size: 0.625rem;5976  font-style: italic;5977  color: var(--peach-accent);5978  letter-spacing: 0.04em;5979  margin-top: -2px;5980  padding-left: 2px;5981  opacity: 0.85;5982  text-align: center;5983}59845985.peach-wordmark-stack {5986  display: inline-flex;5987  flex-direction: column;5988  align-items: center;5989}59905991/* ── Pro tier — upgrade page ─────────────────────────────────── */5992/* ── Pro upgrade — redesigned editorial layout ─────────────────── */59935994.peach-pro-upgrade {5995  display: flex;5996  flex-direction: column;5997  align-items: stretch;5998  gap: 10px;5999  padding: 2px 2px 12px;6000}60016002.peach-pro-eyebrow {6003  margin: 0;6004  font-family: var(--font-ui);6005  font-size: 0.625rem;6006  font-weight: 500;6007  letter-spacing: 0.12em;6008  color: var(--peach-accent);6009}60106011.peach-pro-headline {6012  margin: 0;6013  font-family: var(--font-display, "Cormorant Garamond", serif);6014  font-size: 30px;6015  font-weight: 700;6016  font-style: normal;6017  line-height: 1.05;6018  color: var(--peach-t0);6019  letter-spacing: -0.01em;6020}6021.peach-pro-headline em {6022  font-style: italic;6023  font-weight: 400;6024  color: var(--peach-accent);6025}60266027.peach-pro-subtitle {6028  margin: 0;6029  font-size: 0.6875rem;6030  line-height: 1.5;6031  color: var(--peach-t1);6032}60336034/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6035.peach-pro-section-label {6036  margin: 6px 0 0;6037  font-family: var(--font-ui);6038  font-size: 0.5625rem;6039  font-weight: 500;6040  letter-spacing: 0.12em;6041  text-transform: uppercase;6042  color: var(--peach-t2);6043}60446045/* 2-column numbered feature grid */6046.peach-pro-grid {6047  display: grid;6048  grid-template-columns: 1fr 1fr;6049  border-top: 1px solid var(--peach-border);6050  border-left: 1px solid var(--peach-border);6051}60526053.peach-pro-grid-item {6054  display: flex;6055  flex-direction: column;6056  gap: 2px;6057  padding: 8px 9px;6058  border-right: 1px solid var(--peach-border);6059  border-bottom: 1px solid var(--peach-border);6060}60616062.peach-pro-grid-item--wide {6063  grid-column: 1 / -1;6064}60656066.peach-pro-grid-num {6067  font-family: var(--font-mono);6068  font-size: 0.5625rem;6069  color: var(--peach-accent);6070  letter-spacing: 0.06em;6071  opacity: 0.85;6072}60736074.peach-pro-grid-name {6075  font-size: 0.8125rem;6076  font-weight: 500;6077  color: var(--peach-t0);6078  line-height: 1.2;6079}60806081.peach-pro-grid-desc {6082  font-size: 0.625rem;6083  color: var(--peach-t1);6084  line-height: 1.4;6085}60866087.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6088  animation: peach-pulse-accent 600ms ease-out forwards;6089}60906091@keyframes peach-pulse-accent {6092  0%   { opacity: 1; transform: scale(1.2); }6093  100% { opacity: 0.85; transform: scale(1); }6094}60956096/* Actions */6097.peach-pro-upgrade-actions {6098  display: flex;6099  flex-direction: column;6100  align-items: stretch;6101  gap: 10px;6102}61036104.peach-pro-pricing {6105  margin: 0;6106  font-size: 1rem;6107  font-weight: 600;6108  color: var(--peach-t0);6109  letter-spacing: 0.01em;6110}6111.peach-pro-pricing-sub {6112  font-size: 0.75rem;6113  font-weight: 400;6114  color: var(--peach-t1);6115  letter-spacing: 0.02em;6116}61176118.peach-pro-upgrade-cta {6119  display: flex;6120  align-items: center;6121  justify-content: center;6122  text-decoration: none;6123  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6124  border: 1px solid var(--peach-accent);6125  border-radius: 10px;6126  color: var(--peach-accent);6127  font-family: var(--font-ui);6128  font-size: 0.8125rem;6129  font-weight: 600;6130  letter-spacing: 0.06em;6131  padding: 11px 16px;6132  transition: background 0.15s ease, color 0.15s ease;6133}6134.peach-pro-upgrade-cta:hover {6135  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6136}61376138.peach-pro-key-divider {6139  display: flex;6140  align-items: center;6141  gap: 8px;6142  color: var(--peach-t2);6143  font-size: 0.5625rem;6144  letter-spacing: 0.1em;6145}6146.peach-pro-key-divider::before,6147.peach-pro-key-divider::after {6148  content: "";6149  flex: 1;6150  height: 1px;6151  background: var(--peach-border);6152}61536154/* Inline key entry row */6155.peach-pro-key-inline {6156  display: flex;6157  align-items: center;6158  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6159  border: 1px solid var(--peach-border);6160  border-radius: 8px;6161  overflow: hidden;6162}6163.peach-pro-key-inline-input {6164  flex: 1;6165  background: transparent;6166  border: none;6167  outline: none;6168  color: var(--peach-t1);6169  font-family: var(--font-mono);6170  font-size: 0.625rem;6171  letter-spacing: 0.06em;6172  padding: 9px 10px;6173}6174.peach-pro-key-inline-input::placeholder {6175  color: var(--peach-t2);6176}6177.peach-pro-key-apply {6178  background: transparent;6179  border: none;6180  border-left: 1px solid var(--peach-border);6181  color: var(--peach-t2);6182  font-family: var(--font-ui);6183  font-size: 0.5625rem;6184  font-weight: 600;6185  letter-spacing: 0.08em;6186  padding: 9px 10px;6187  cursor: pointer;6188  transition: color 0.15s ease;6189  flex-shrink: 0;6190}6191.peach-pro-key-apply:not(:disabled):hover {6192  color: var(--peach-accent);6193}6194.peach-pro-key-apply:disabled {6195  opacity: 0.35;6196  cursor: not-allowed;6197}61986199/* ── Pro tier — key ceremony ─────────────────────────────────── */6200.peach-pro-key-ceremony {6201  display: flex;6202  flex-direction: column;6203  align-items: center;6204  gap: 12px;6205  padding: 20px 4px 16px;6206}62076208.peach-pro-key-ceremony .peach-lock-rune-string {6209  font-size: 1rem;6210  gap: 12px;6211  flex: 0;6212  justify-content: center;6213}62146215.peach-pro-key-ceremony-label {6216  margin: 0;6217  font-size: 0.6875rem;6218  color: var(--peach-t2);6219  font-style: italic;6220  letter-spacing: 0.04em;6221}62226223.peach-pro-key-input {6224  font-family: var(--font-mono, monospace);6225  letter-spacing: 0.06em;6226  text-align: center;6227  width: 100%;6228  box-sizing: border-box;6229}62306231.peach-pro-key-error {6232  margin: 0;6233  font-size: 0.75rem;6234  text-align: center;6235  color: var(--peach-breach, #e55);6236  padding: 0;6237}62386239.peach-pro-key-activate {6240  width: 100%;6241  text-align: center;6242  box-sizing: border-box;6243  padding: 10px 20px;6244  font-size: 0.8125rem;6245}62466247.peach-pro-key-cancel {6248  background: transparent;6249  border: 0;6250  color: var(--peach-t2);6251  font-size: 0.6875rem;6252  cursor: pointer;6253  padding: 2px 8px;6254  transition: color 0.2s;6255}62566257.peach-pro-key-cancel:hover { color: var(--peach-accent); }62586259/* ── Pro tier — active state ─────────────────────────────────── */6260.peach-pro-active {6261  display: flex;6262  flex-direction: column;6263  align-items: center;6264  gap: 0;6265  padding: 8px 4px 16px;6266  min-height: 280px;6267}62686269.peach-pro-active-hero {6270  display: flex;6271  flex-direction: column;6272  align-items: center;6273  gap: 6px;6274  padding: 20px 0 8px;6275}62766277.peach-pro-active-mark-wrap {6278  display: flex;6279  align-items: center;6280  justify-content: center;6281  margin-bottom: 4px;6282}62836284.peach-pro-active-mark {6285  width: 60px;6286  height: 60px;6287}62886289.peach-pro-active-title {6290  font-family: var(--font-display, var(--font-ui));6291  font-size: 26px;6292  margin: 0;6293  color: var(--peach-t0);6294  letter-spacing: 0.01em;6295}62966297.peach-pro-active-since {6298  margin: 0;6299  font-size: 0.6875rem;6300  color: var(--peach-t2);6301  font-style: italic;6302}63036304.peach-pro-active-features {6305  display: flex;6306  flex-direction: column;6307  gap: 8px;6308  width: 100%;6309  padding: 14px 8px 0;6310  border-top: 1px solid var(--peach-border);6311  flex: 1;6312}63136314.peach-pro-active-feature {6315  display: flex;6316  align-items: center;6317  gap: 9px;6318}63196320.peach-pro-active-feature-mark {6321  color: var(--peach-accent);6322  font-size: 0.625rem;6323  opacity: 0.65;6324  flex-shrink: 0;6325}63266327.peach-pro-active-feature-name {6328  font-size: 0.75rem;6329  color: var(--peach-t1);6330}63316332.peach-pro-deactivate {6333  align-self: center;6334  background: transparent;6335  border: 0;6336  color: var(--peach-t3);6337  font-size: 0.625rem;6338  cursor: pointer;6339  padding: 8px 0 0;6340  margin-top: 16px;6341  letter-spacing: 0.03em;6342  transition: color 0.2s;6343}63446345.peach-pro-deactivate:hover { color: var(--peach-t2); }63466347.peach-pro-deactivate:disabled {6348  opacity: 0.5;6349  cursor: default;6350}63516352/* ── Pro card activation sparkles & thank-you ── */6353button.peach-pro-active-mark-wrap {6354  background: transparent;6355  border: 0;6356  padding: 0;6357  cursor: pointer;6358  position: relative;6359  overflow: visible;6360}63616362.peach-pro-sparks {6363  position: absolute;6364  inset: 0;6365  pointer-events: none;6366  overflow: visible;6367}63686369.peach-pro-spark {6370  position: absolute;6371  top: 50%;6372  left: 50%;6373  font-size: 9px;6374  line-height: 1;6375  opacity: 0;6376  transform: translate(-50%, -50%);6377  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;6378}63796380@keyframes peach-pro-spark-fly {6381  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }6382  25%  { opacity: 1; }6383  100% {6384    opacity: 0;6385    transform: translate(6386      calc(-50% + var(--spark-x, 0px)),6387      calc(-50% + var(--spark-y, -40px))6388    ) scale(0.8);6389  }6390}63916392.peach-pro-thankyou-text {6393  margin: 4px 0 0;6394  font-size: 0.6875rem;6395  font-style: italic;6396  color: currentColor;6397  opacity: 0;6398  animation: peach-pro-thankyou-flash 2.5s ease both;6399}64006401@keyframes peach-pro-thankyou-flash {6402  0%   { opacity: 0; transform: translateY(4px); }6403  15%  { opacity: 0.75; transform: translateY(0); }6404  75%  { opacity: 0.75; }6405  100% { opacity: 0; }6406}64076408/* ── Pro advanced health remediation queue ──────────────────── */6409.peach-health-pro-queue {6410  display: flex;6411  flex-direction: column;6412  gap: 10px;6413  padding: 12px;6414  margin: 0 0 12px;6415  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6416  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6417  border-radius: 10px;6418}64196420.peach-health-pro-queue-head {6421  display: flex;6422  justify-content: space-between;6423  align-items: baseline;6424}64256426.peach-health-pro-queue-title {6427  font-size: 0.75rem;6428  font-weight: 500;6429  letter-spacing: 0.04em;6430  text-transform: uppercase;6431  color: var(--peach-accent);6432}64336434.peach-health-pro-queue-score {6435  font-size: 0.6875rem;6436  color: var(--peach-t2);6437}64386439.peach-health-pro-row {6440  display: flex;6441  gap: 10px;6442  align-items: center;6443  padding: 8px 0;6444  border-top: 1px solid var(--peach-border);6445}64466447.peach-health-pro-row-info {6448  flex: 1;6449  display: flex;6450  flex-direction: column;6451  gap: 4px;6452  min-width: 0;6453}64546455.peach-health-pro-action {6456  flex: 0 0 auto;6457  padding: 4px 8px;6458  font-size: 0.5625rem;6459  letter-spacing: 0.08em;6460  text-transform: uppercase;6461}64626463.peach-health-pro-row-name {6464  font-size: 0.8125rem;6465  color: var(--peach-t0);6466  overflow: hidden;6467  text-overflow: ellipsis;6468  white-space: nowrap;6469}64706471.peach-health-pro-row-meta {6472  font-size: 0.6875rem;6473  color: var(--peach-t2);6474}64756476.peach-health-pro-bar {6477  height: 2px;6478  background: var(--peach-border);6479  border-radius: 2px;6480  overflow: hidden;6481  margin-top: 2px;6482}64836484.peach-health-pro-bar-fill {6485  height: 100%;6486  background: var(--peach-accent);6487  transition: width 200ms ease-out;6488}64896490/* ── Pro activation celebration ── */6491@keyframes peach-pro-bloom {6492  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6493  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6494                 drop-shadow(0 0 48px var(--peach-glow)); }6495  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6496}64976498@keyframes peach-pro-wordmark-in {6499  from { opacity: 0; transform: translateY(4px); }6500  to   { opacity: 1; transform: translateY(0); }6501}65026503@keyframes peach-pro-fade-out {6504  from { opacity: 1; }6505  to   { opacity: 0; }6506}65076508.peach-pro-celebration {6509  background:6510    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6511    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6512    var(--peach-bg);6513  border: 1px solid var(--peach-t3);6514  box-shadow:6515    0 2px 8px rgba(0,0,0,0.55),6516    0 14px 48px rgba(0,0,0,0.7),6517    0 0 0 1px rgba(240,232,216,0.04);6518  overflow: hidden;6519  width: 320px;6520  height: 520px;6521  display: flex;6522  flex-direction: column;6523  align-items: center;6524  justify-content: center;6525  gap: 8px;6526  padding: 32px 24px;6527  text-align: center;6528}65296530.peach-pro-celebration.is-leaving {6531  animation: peach-pro-fade-out 400ms ease forwards;6532}65336534.peach-pro-bloom-target {6535  display: flex;6536  align-items: center;6537  justify-content: center;6538  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6539  margin-bottom: 12px;6540}65416542.peach-pro-bloom-icon {6543  width: 48px;6544  height: 48px;6545}65466547.peach-pro-wordmark {6548  font-family: var(--font-display);6549  font-size: 22px;6550  font-style: italic;6551  font-weight: 400;6552  color: var(--peach-accent);6553  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6554}65556556.peach-pro-thankyou {6557  font-size: 0.75rem;6558  font-style: italic;6559  color: var(--peach-t2);6560  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6561}656265636564/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6565.peach-pro-notice-banner {6566  display: flex;6567  align-items: center;6568  gap: 8px;6569  padding: 7px 12px;6570  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6571  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6572  font-size: 0.6875rem;6573  color: var(--peach-t2);6574  font-family: "IBM Plex Mono", monospace;6575  flex-shrink: 0;6576}65776578.peach-pro-notice-link {6579  background: none;6580  border: none;6581  padding: 0;6582  cursor: pointer;6583  font-size: 0.6875rem;6584  color: var(--peach-accent);6585  font-family: "IBM Plex Mono", monospace;6586  margin-left: auto;6587  white-space: nowrap;6588}65896590.peach-pro-notice-close {6591  background: none;6592  border: none;6593  padding: 0 0 0 4px;6594  cursor: pointer;6595  font-size: 0.625rem;6596  color: var(--peach-t3);6597  line-height: 1;6598}65996600/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6601   Renders over whatever view is showing. 60-second expiry; the popup ticks6602   the countdown each second and clears the banner when it hits zero. */6603.peach-pair-request-banner {6604  display: flex;6605  flex-direction: column;6606  gap: 8px;6607  padding: 10px 12px;6608  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6609  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6610  font-family: "IBM Plex Mono", monospace;6611  flex-shrink: 0;6612}66136614.peach-pair-toast {6615  padding: 8px 12px;6616  font-family: "IBM Plex Mono", monospace;6617  font-size: 0.75rem;6618  color: var(--peach-t1);6619  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6620  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6621  flex-shrink: 0;6622  text-align: center;6623}66246625.peach-pair-toast strong {6626  color: var(--peach-t0);6627  font-weight: 500;6628}66296630.peach-pair-request-header {6631  display: flex;6632  align-items: center;6633  gap: 8px;6634  font-size: 0.75rem;6635  color: var(--peach-t1);6636}66376638.peach-pair-request-mark {6639  font-size: 0.875rem;6640  display: inline-flex;6641  align-items: center;6642}66436644.peach-pair-request-icon {6645  width: 1em;6646  height: 1em;6647}66486649.peach-pair-request-title {6650  font-weight: 600;6651  color: var(--peach-t0);6652}66536654.peach-pair-request-countdown {6655  margin-left: auto;6656  font-variant-numeric: tabular-nums;6657  color: var(--peach-t2);6658  font-size: 0.6875rem;6659}66606661.peach-pair-request-body {6662  margin: 0;6663  font-size: 0.75rem;6664  color: var(--peach-t1);6665  line-height: 1.4;6666}66676668.peach-pair-request-body strong {6669  color: var(--peach-t0);6670  font-weight: 600;6671}66726673.peach-pair-request-actions {6674  display: flex;6675  gap: 8px;6676  justify-content: flex-end;6677}66786679/* ─── First-run onboarding ──────────────────────────────────────────────6680   Three-card welcome shown once before vault creation. The PeachScript6681   rune background drifts behind everything at very low opacity — it's6682   atmosphere, not focus. The cards themselves use the same panel6683   language as the rest of the popup so the transition into NewVault is6684   continuous, not a jarring switch of visual register. */66856686.peach-onboarding {6687  position: relative;6688  display: flex;6689  flex-direction: column;6690  width: 100%;6691  height: 100%;6692  padding: 16px 16px 18px;6693  box-sizing: border-box;6694  overflow: hidden;6695  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6696}66976698.peach-onboarding.is-completing {6699  animation: peach-onboard-exit 200ms ease-out forwards;6700}67016702.peach-rune-background {6703  position: absolute;6704  inset: 0;6705  width: 100%;6706  height: 100%;6707  pointer-events: none;6708  z-index: 0;6709  transition: opacity 500ms ease-out;6710}67116712.peach-onboarding.is-completing .peach-rune-background {6713  opacity: 0;6714}67156716.peach-onboarding-header {6717  position: relative;6718  z-index: 1;6719  display: flex;6720  align-items: center;6721  margin-bottom: 14px;6722}67236724.peach-onboarding-card {6725  position: relative;6726  z-index: 1;6727  flex: 1;6728  display: flex;6729  flex-direction: column;6730  gap: 10px;6731  padding: 22px 20px;6732  border-radius: 16px;6733  border: 1px solid var(--peach-t3);6734  background:6735    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6736  backdrop-filter: blur(3px);6737  -webkit-backdrop-filter: blur(3px);6738  box-shadow:6739    inset 0 1px 0 rgba(240, 232, 216, 0.04),6740    0 12px 28px rgba(0, 0, 0, 0.12);6741  cursor: pointer;6742  user-select: none;6743  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6744}67456746.peach-onboarding-card.is-exiting {6747  animation: peach-card-out 120ms ease-in forwards;6748  pointer-events: none;6749}67506751.peach-onboarding-card-headline {6752  margin: 0;6753  font-family: var(--font-display);6754  font-style: italic;6755  font-weight: 400;6756  font-size: 22px;6757  line-height: 1.05;6758  color: var(--peach-t0);6759  white-space: pre-line;6760}67616762.peach-onboarding-divider {6763  margin: 4px 0 6px;6764  border: 0;6765  border-top: 1px solid var(--peach-t3);6766  width: 100%;6767}67686769.peach-onboarding-body {6770  margin: 0;6771  font-size: 0.8125rem;6772  line-height: 1.6;6773  color: var(--peach-t1);6774}67756776.peach-onboarding-warning {6777  display: flex;6778  align-items: flex-start;6779  gap: 8px;6780  margin: 6px 0 0;6781  padding-top: 8px;6782  border-top: 1px dashed var(--peach-t3);6783  font-size: 0.8125rem;6784  line-height: 1.5;6785  color: var(--peach-t1);6786}67876788.peach-onboarding-warning-icon {6789  color: var(--peach-accent);6790  font-size: 0.8125rem;6791  line-height: 1.5;6792  flex: 0 0 auto;6793}67946795.peach-onboarding-nav {6796  position: relative;6797  z-index: 1;6798  display: flex;6799  align-items: center;6800  justify-content: space-between;6801  margin-top: 12px;6802  padding: 0 4px;6803}68046805.peach-onboarding-dots {6806  display: flex;6807  align-items: center;6808  gap: 6px;6809}68106811.peach-onboarding-dot {6812  width: 6px;6813  height: 6px;6814  border-radius: 50%;6815  background: var(--peach-t2);6816  transition: width 200ms ease, height 200ms ease, background 200ms ease;6817}68186819.peach-onboarding-dot.is-active {6820  width: 8px;6821  height: 8px;6822  background: var(--peach-accent);6823}68246825.peach-onboarding-next {6826  background: none;6827  border: none;6828  padding: 4px 0;6829  cursor: pointer;6830  font-family: "IBM Plex Mono", monospace;6831  font-size: 0.6875rem;6832  letter-spacing: 0.04em;6833  color: var(--peach-t1);6834  transition: color 150ms ease;6835}68366837.peach-onboarding-next:hover {6838  color: var(--peach-t0);6839}68406841.peach-onboarding-next:disabled {6842  opacity: 0.5;6843  cursor: default;6844}68456846.peach-onboarding-back {6847  background: none;6848  border: none;6849  padding: 4px 0;6850  cursor: pointer;6851  font-family: "IBM Plex Mono", monospace;6852  font-size: 0.6875rem;6853  letter-spacing: 0.04em;6854  color: var(--peach-t2);6855  transition: color 150ms ease;6856}68576858.peach-onboarding-back:hover {6859  color: var(--peach-t0);6860}68616862.peach-onboarding-back:disabled {6863  opacity: 0.5;6864  cursor: default;6865}68666867/* Reserve back-button width on the first card so the dots stay centred */6868.peach-onboarding-back-spacer {6869  width: 44px;6870}68716872.peach-onboarding-mobile-card-buttons {6873  display: flex;6874  flex-direction: column;6875  gap: 8px;6876  margin-top: 16px;6877}68786879@keyframes peach-onboard-enter {6880  from { opacity: 0; transform: translateY(20px); }6881  to   { opacity: 1; transform: translateY(0); }6882}68836884@keyframes peach-onboard-exit {6885  from { opacity: 1; }6886  to   { opacity: 0; }6887}68886889@keyframes peach-card-in {6890  from { opacity: 0; transform: translateX(12px); }6891  to   { opacity: 1; transform: translateX(0); }6892}68936894@keyframes peach-card-out {6895  from { opacity: 1; transform: translateX(0); }6896  to   { opacity: 0; transform: translateX(-12px); }6897}68986899/* ─── New vault screen — matched to onboarding card language ─────────── */69006901.peach-newvault {6902  position: relative;6903  display: flex;6904  flex-direction: column;6905  gap: 12px;6906  padding: 16px 16px 18px;6907  overflow: hidden;6908}69096910/* Suppress the warm-blob ambient art inherited from .lock-screen — the6911   new vault card now carries the visual weight. */6912.peach-newvault::before {6913  content: none;6914}69156916.peach-newvault-header {6917  position: relative;6918  z-index: 2;6919  display: flex;6920  align-items: center;6921  gap: 10px;6922  margin-bottom: 2px;6923}69246925.peach-newvault-back {6926  display: inline-flex;6927  align-items: center;6928  gap: 4px;6929  background: transparent;6930  border: none;6931  color: var(--peach-t2);6932  font-family: "IBM Plex Mono", monospace;6933  font-size: 0.625rem;6934  letter-spacing: 0.06em;6935  cursor: pointer;6936  padding: 4px 6px;6937  border-radius: 6px;6938  transition: color 120ms ease, background 120ms ease;6939}69406941.peach-newvault-back:hover {6942  color: var(--peach-t0);6943  background: rgba(240, 232, 216, 0.04);6944}69456946.peach-newvault-mark {6947  position: absolute;6948  right: -12px;6949  top: 6px;6950  width: 110px;6951  height: 110px;6952  pointer-events: none;6953  opacity: 0.10;6954  filter: saturate(0.9);6955  z-index: 0;6956}6957.peach-newvault-mark-art {6958  width: 100%;6959  height: 100%;6960}6961.peach-newvault-mark-art path:nth-child(1) {6962  fill: rgba(123, 144, 96, 0.88);6963}6964.peach-newvault-mark-art path:nth-child(2) {6965  stroke: rgba(94, 122, 66, 0.95);6966}69676968.peach-newvault-card {6969  position: relative;6970  z-index: 1;6971  display: flex;6972  flex-direction: column;6973  gap: 12px;6974  padding: 22px 20px 18px;6975  border-radius: 16px;6976  border: 1px solid var(--peach-t3);6977  background:6978    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6979  backdrop-filter: blur(3px);6980  -webkit-backdrop-filter: blur(3px);6981  box-shadow:6982    inset 0 1px 0 rgba(240, 232, 216, 0.04),6983    0 12px 28px rgba(0, 0, 0, 0.12);6984  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6985}69866987.peach-newvault-headline {6988  margin: 0;6989  font-family: var(--font-display);6990  font-style: italic;6991  font-weight: 400;6992  font-size: 24px;6993  line-height: 1.05;6994  color: var(--peach-t0);6995  white-space: pre-line;6996}69976998.peach-newvault-divider {6999  margin: 2px 0 4px;7000  border: 0;7001  border-top: 1px solid var(--peach-t3);7002  width: 100%;7003}70047005.peach-newvault-field {7006  display: flex;7007  flex-direction: column;7008  gap: 4px;7009}70107011.peach-newvault-label-row {7012  display: flex;7013  align-items: center;7014  justify-content: space-between;7015}70167017/* Monospace input scaled to the card. Replaces the 22px unlock-input7018   so the placeholder no longer overflows and the field reads as part7019   of the same surface as the body copy. */7020.peach-newvault-input {7021  font-size: 0.875rem;7022  letter-spacing: 0.18em;7023  padding: 8px 0;7024}7025.peach-newvault-input::placeholder {7026  letter-spacing: 0.18em;7027  color: var(--peach-t2);7028}70297030.peach-newvault-hint {7031  margin: 2px 0 0;7032  font-family: "IBM Plex Mono", monospace;7033  font-size: 0.625rem;7034  color: var(--peach-t2);7035  letter-spacing: 0.04em;7036}70377038.peach-newvault-submit {7039  margin-top: 4px;7040}70417042.peach-newvault-warning {7043  display: flex;7044  align-items: flex-start;7045  gap: 8px;7046  margin: 4px 0 0;7047  padding-top: 10px;7048  border-top: 1px dashed var(--peach-t3);7049  font-size: 0.75rem;7050  line-height: 1.5;7051  color: var(--peach-t1);7052}70537054.peach-newvault-warning-icon {7055  color: var(--peach-accent);7056  font-size: 0.8125rem;7057  line-height: 1.4;7058  flex: 0 0 auto;7059}70607061.peach-newvault-footer {7062  position: relative;7063  z-index: 1;7064  display: flex;7065  flex-direction: column;7066  gap: 4px;7067  padding: 4px 4px 0;7068}70697070/* Settings body — warm accent gradient gives the glass something to blur against */7071.peach-settings-body {7072  background:7073    radial-gradient(7074      ellipse at 30% 20%,7075      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7076      transparent 60%7077    );7078}70797080/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7081/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7082 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7083 * (replacing the vault from a backup file) and "hazard" for actions that7084 * are absolutely irreversible (Panic). Both use the same card scaffold so7085 * they read as a pair, but the colour family signals the severity at a7086 * glance — yellow for caution, red for don't.7087 */7088.peach-danger-card {7089  --danger-tint: 235, 158, 52; /* amber */7090  display: flex;7091  flex-direction: column;7092  gap: 8px;7093  padding: 14px;7094  margin-top: 10px;7095  border-radius: 12px;7096  border: 1px solid rgba(var(--danger-tint), 0.32);7097  background:7098    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7099    rgba(var(--danger-tint), 0.04);7100  box-shadow:7101    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7102    0 0 24px rgba(var(--danger-tint), 0.04);7103  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7104}71057106.peach-danger-card:hover {7107  border-color: rgba(var(--danger-tint), 0.55);7108  box-shadow:7109    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7110    0 0 36px rgba(var(--danger-tint), 0.10);7111}71127113.peach-danger-card--hazard {7114  --danger-tint: 220, 38, 38; /* red */7115}71167117.peach-danger-card-head {7118  display: flex;7119  align-items: center;7120  gap: 10px;7121}71227123.peach-danger-card-glyph {7124  width: 28px;7125  height: 28px;7126  flex-shrink: 0;7127  display: flex;7128  align-items: center;7129  justify-content: center;7130  border-radius: 8px;7131  background: rgba(var(--danger-tint), 0.12);7132  color: rgba(var(--danger-tint), 0.95);7133  font-size: 1rem;7134  line-height: 1;7135}71367137.peach-danger-card-title {7138  margin: 0;7139  font-size: 0.8125rem;7140  font-weight: 600;7141  color: rgba(var(--danger-tint), 0.92);7142  letter-spacing: 0.01em;7143}71447145.peach-danger-card-copy {7146  margin: 0;7147  font-size: 0.6875rem;7148  line-height: 1.5;7149  color: var(--peach-t2);7150}71517152.peach-danger-card-button {7153  width: 100%;7154  padding: 9px;7155  margin-top: 4px;7156  background: transparent;7157  border: 1px solid rgba(var(--danger-tint), 0.45);7158  border-radius: 8px;7159  color: rgba(var(--danger-tint), 0.9);7160  font-size: 0.75rem;7161  font-weight: 500;7162  letter-spacing: 0.02em;7163  cursor: pointer;7164  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7165}71667167.peach-danger-card-button:hover {7168  background: rgba(var(--danger-tint), 0.10);7169  border-color: rgba(var(--danger-tint), 0.75);7170  color: rgb(var(--danger-tint));7171}71727173/* ── Panic flow (three-step destruction) ───────────────────────────────── */7174.peach-panic {7175  display: flex;7176  flex-direction: column;7177  flex: 1;7178  min-height: 0;7179  padding: 28px 20px 20px;7180  gap: 18px;7181  overflow-y: auto;7182  scrollbar-width: none;7183  -ms-overflow-style: none;7184}71857186.peach-panic::-webkit-scrollbar { display: none; }71877188.peach-panic-step2 {7189  background: rgba(220, 38, 38, 0.04);7190}71917192.peach-panic-step3 {7193  position: relative;7194  background: #0f0505;7195  color: #ffffff;7196  overflow: hidden;7197}71987199.peach-panic-rune-bg {7200  position: absolute;7201  inset: 0;7202  opacity: 0.22;7203  pointer-events: none;7204  overflow: hidden;7205}72067207.peach-panic-rune-bg canvas {7208  width: 100% !important;7209  height: 100% !important;7210}72117212.peach-panic-icon {7213  font-size: 32px;7214  color: rgb(220, 38, 38);7215  line-height: 1;7216}72177218.peach-panic-title {7219  margin: 0;7220  font-size: 18px;7221  font-weight: 500;7222  color: var(--peach-t1);7223}72247225.peach-panic-title--severe {7226  font-size: 20px;7227  font-weight: 700;7228  color: rgb(220, 38, 38);7229}72307231.peach-panic-body {7232  margin: 0;7233  font-size: 0.8125rem;7234  line-height: 1.55;7235  color: var(--peach-t2);7236}72377238.peach-panic-body--severe {7239  color: rgba(220, 38, 38, 0.85);7240}72417242.peach-panic-body--final {7243  font-size: 1rem;7244  font-weight: 700;7245  color: rgb(255, 80, 80);7246  line-height: 1.4;7247}72487249.peach-panic-body--final-intro {7250  font-size: 1rem;7251  color: #ffffff;7252  font-weight: 400;7253}72547255.peach-panic-divider {7256  height: 1px;7257  background: rgba(255, 255, 255, 0.08);7258  margin: 4px 0;7259}72607261.peach-panic-confirm-input {7262  width: 100%;7263  padding: 10px 12px;7264  background: rgba(255, 255, 255, 0.02);7265  border: 1px solid rgba(220, 38, 38, 0.4);7266  border-radius: 8px;7267  color: var(--peach-t1);7268  font-family: "IBM Plex Mono", monospace;7269  font-size: 0.875rem;7270  letter-spacing: 0.12em;7271  text-transform: uppercase;7272}72737274.peach-panic-confirm-input:focus {7275  outline: none;7276  border-color: rgb(220, 38, 38);7277}72787279.peach-panic-confirm-input--match {7280  border-color: rgb(220, 38, 38);7281  color: rgb(220, 38, 38);7282}72837284.peach-panic-confirm-label {7285  font-size: 0.6875rem;7286  color: var(--peach-t2);7287  margin: 0 0 -8px;7288  letter-spacing: 0.06em;7289}72907291.peach-panic-actions {7292  display: flex;7293  flex-direction: column;7294  gap: 10px;7295  margin-top: auto;7296}72977298.peach-panic-button {7299  width: 100%;7300  padding: 12px;7301  border-radius: 8px;7302  font-size: 0.8125rem;7303  cursor: pointer;7304  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7305}73067307.peach-panic-button--primary {7308  background: var(--peach-accent);7309  border: 1px solid var(--peach-accent);7310  color: #ffffff;7311  font-weight: 600;7312}73137314.peach-panic-button--primary:hover {7315  background: color-mix(in srgb, var(--peach-accent) 88%, white);7316}73177318.peach-panic-button--danger {7319  background: rgb(220, 38, 38);7320  border: 1px solid rgb(220, 38, 38);7321  color: #ffffff;7322  font-weight: 600;7323}73247325.peach-panic-button--danger:disabled {7326  opacity: 0.35;7327  cursor: not-allowed;7328}73297330.peach-panic-button--ghost {7331  background: transparent;7332  border: 1px solid rgba(255, 255, 255, 0.18);7333  color: var(--peach-t2);7334}73357336.peach-panic-button--ghost:hover {7337  border-color: rgba(255, 255, 255, 0.32);7338  color: var(--peach-t1);7339}73407341.peach-panic-link {7342  background: transparent;7343  border: none;7344  padding: 4px 0;7345  color: rgba(220, 38, 38, 0.65);7346  font-size: 0.75rem;7347  cursor: pointer;7348  text-align: left;7349  text-decoration: underline;7350  text-underline-offset: 3px;7351}73527353.peach-panic-link:hover {7354  color: rgb(220, 38, 38);7355}73567357.peach-panic-bar {7358  background: rgb(220, 38, 38);7359  padding: 16px 20px;7360  margin: -28px -20px 0;7361  text-align: center;7362  font-size: 0.8125rem;7363  font-weight: 700;7364  letter-spacing: 0.12em;7365  color: #ffffff;7366}73677368.peach-panic-final-button {7369  width: 100%;7370  padding: 14px;7371  background: rgb(220, 38, 38);7372  border: none;7373  border-radius: 8px;7374  color: #ffffff;7375  font-size: 0.875rem;7376  font-weight: 700;7377  letter-spacing: 0.08em;7378  text-transform: uppercase;7379  cursor: pointer;7380  animation: peach-panic-pulse 2s ease-in-out infinite;7381}73827383.peach-settings-license {7384  margin-top: 10px;7385  padding-top: 10px;7386  border-top: 1px solid var(--peach-t3);7387}73887389.peach-settings-label {7390  font-size: 0.625rem;7391  letter-spacing: 0.08em;7392  color: var(--peach-t3);7393  display: block;7394  margin-bottom: 6px;7395}73967397.peach-settings-license-row {7398  display: flex;7399  align-items: center;7400  justify-content: space-between;7401  gap: 8px;7402}74037404.peach-settings-license-key {7405  font-family: 'IBM Plex Mono', monospace;7406  font-size: 0.75rem;7407  color: var(--peach-t0);7408  letter-spacing: 0.04em;7409  word-break: break-all;7410  flex: 1;7411  min-width: 0;7412}74137414.peach-settings-license-key--masked {7415  font-family: 'IBM Plex Mono', monospace;7416  font-size: 0.6rem;7417  color: var(--peach-t1);7418  letter-spacing: 0.18em;7419  user-select: none;7420}74217422.peach-settings-license-actions {7423  display: flex;7424  align-items: center;7425  gap: 2px;7426  flex-shrink: 0;7427}74287429.peach-settings-license-copy {7430  font-size: 0.6875rem;7431  color: var(--peach-accent);7432  background: transparent;7433  border: none;7434  cursor: pointer;7435  padding: 4px 8px;7436  border-radius: 4px;7437  flex-shrink: 0;7438  transition: opacity 150ms ease;7439}74407441.peach-settings-license-copy:hover {7442  opacity: 0.75;7443}74447445.peach-settings-license-toggle {7446  display: flex;7447  align-items: center;7448  justify-content: center;7449  background: transparent;7450  border: none;7451  cursor: pointer;7452  padding: 4px 6px;7453  border-radius: 4px;7454  color: var(--peach-t2);7455  transition: color 150ms ease;7456}74577458.peach-settings-license-toggle:hover {7459  color: var(--peach-t1);7460}74617462@keyframes peach-panic-pulse {7463  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7464  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7465}74667467[data-motion="reduce"] .peach-panic-final-button {7468  animation: none;7469}74707471/* Vault History — Settings → Vault sub-view */74727473.peach-history-list {7474  border: 1px solid var(--peach-border);7475  border-radius: 8px;7476  overflow: hidden;7477  margin: 8px 0 4px;7478}74797480.peach-history-row {7481  display: flex;7482  align-items: center;7483  justify-content: space-between;7484  padding: 9px 12px;7485  gap: 10px;7486  border-bottom: 1px solid var(--peach-border);7487}74887489.peach-history-row:last-child {7490  border-bottom: none;7491}74927493.peach-history-meta {7494  display: flex;7495  flex-direction: column;7496  gap: 2px;7497  min-width: 0;7498  flex: 1;7499}75007501.peach-history-time {7502  font-size: 0.75rem;7503  font-family: 'IBM Plex Mono', ui-monospace, monospace;7504  color: var(--peach-t0);7505  white-space: nowrap;7506  overflow: hidden;7507  text-overflow: ellipsis;7508}75097510.peach-history-sub {7511  font-size: 0.625rem;7512  color: var(--peach-t2);7513  letter-spacing: 0.06em;7514  text-transform: uppercase;7515  white-space: nowrap;7516  overflow: hidden;7517  text-overflow: ellipsis;7518}75197520.peach-history-btn {7521  flex-shrink: 0;7522  white-space: nowrap;7523  min-width: 56px;7524  text-align: center;7525}75267527.peach-history-btn.is-busy {7528  opacity: 0.65;7529}75307531.peach-history-footer {7532  font-size: 0.625rem;7533  color: var(--peach-t3);7534  letter-spacing: 0.05em;7535  text-align: right;7536  margin: 0;7537  padding: 2px 0 0;7538}75397540/* ── Context menu + swipe-copy flash ─────────────────────── */7541.peach-context-menu-backdrop {7542  position: fixed;7543  inset: 0;7544  background: rgba(0, 0, 0, 0.45);7545  z-index: 100;7546  display: flex;7547  align-items: flex-end;7548  justify-content: center;7549  animation: peach-ctx-fade 140ms ease both;7550}7551.peach-context-menu {7552  width: min(360px, calc(100vw - 24px));7553  margin-bottom: max(env(safe-area-inset-bottom), 12px);7554  background: var(--peach-bg);7555  border: 1px solid var(--peach-t3);7556  border-radius: 14px;7557  padding: 6px;7558  display: flex;7559  flex-direction: column;7560  gap: 2px;7561  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7562  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7563}7564@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7565@keyframes peach-ctx-rise {7566  from { transform: translateY(16px); opacity: 0; }7567  to   { transform: translateY(0);    opacity: 1; }7568}7569.peach-context-menu-item {7570  background: transparent;7571  color: var(--peach-t0);7572  border: 0;7573  border-radius: 10px;7574  padding: 12px 14px;7575  text-align: left;7576  font: inherit;7577  cursor: pointer;7578}7579.peach-context-menu-item:hover,7580.peach-context-menu-item:focus-visible {7581  background: var(--peach-t3);7582}7583.peach-context-menu-item--danger {7584  color: var(--peach-health-bad, #d96868);7585}7586.peach-context-menu-item--cancel {7587  color: var(--peach-t2);7588  margin-top: 4px;7589  border-top: 1px solid var(--peach-t3);7590  border-radius: 0 0 10px 10px;7591}75927593/* Swipe-to-copy flash */7594.peach-entry-row.is-copy-flash {7595  animation: peach-copy-flash 600ms ease both;7596}7597@keyframes peach-copy-flash {7598  0%   { background: transparent; }7599  20%  { background: rgba(217, 153, 51, 0.32); }7600  100% { background: transparent; }7601}76027603html { font-size: 16px; }76047605/* ── Recovery word entry ─────────────────────────────────────────── */7606.peach-lock-recover-link {7607  display: block;7608  width: 100%;7609  margin-top: 12px;7610  background: none;7611  border: none;7612  font-family: "IBM Plex Mono", monospace;7613  font-size: 0.625rem;7614  letter-spacing: 0.06em;7615  color: var(--peach-t2);7616  cursor: pointer;7617  text-align: center;7618  padding: 4px;7619  transition: color 120ms ease;7620}7621.peach-lock-recover-link:hover {7622  color: var(--peach-t0);7623}76247625.lock-screen--recovery {7626  display: flex;7627  flex-direction: column;7628  align-items: stretch;7629  padding: 12px 20px 24px;7630  overflow: hidden;7631}76327633.peach-recovery-nav {7634  display: flex;7635  align-items: center;7636  position: relative;7637  z-index: 1;7638  margin-bottom: 4px;7639}76407641/* Mask runes to the top decorative band only — keep inputs and the7642   bottom CTA button clear. The bottom of the popup is reserved for7643   submit buttons; rendering runes there overlaps the button glyph. */7644.peach-rune-background--recovery {7645  -webkit-mask-image: linear-gradient(7646    to bottom,7647    black 0px, black 85px,7648    transparent 110px,7649    transparent 100%7650  );7651  mask-image: linear-gradient(7652    to bottom,7653    black 0px, black 85px,7654    transparent 110px,7655    transparent 100%7656  );7657}76587659.peach-recovery-header {7660  text-align: center;7661  margin-bottom: 16px;7662  margin-top: 4px;7663}7664.peach-recovery-header .peach-onboarding-headline {7665  font-size: 1.25rem;7666  font-weight: 300;7667  letter-spacing: 0.02em;7668  margin: 0 0 4px;7669}7670.peach-recovery-header .peach-hint {7671  font-family: "IBM Plex Mono", monospace;7672  font-size: 0.625rem;7673  color: var(--peach-t2);7674  letter-spacing: 0.04em;7675  margin: 0;7676}76777678/* 12-word grid: 2 columns × 6 rows */7679.peach-recovery-grid {7680  display: grid;7681  grid-template-columns: repeat(2, 1fr);7682  gap: 12px 20px;7683  width: 100%;7684  margin-bottom: 0;7685}76867687.peach-recovery-word-slot {7688  display: flex;7689  align-items: center;7690  gap: 6px;7691  min-width: 0;7692}76937694.peach-recovery-word-index {7695  font-family: "IBM Plex Mono", monospace;7696  font-size: 0.5rem;7697  color: rgba(255, 255, 255, 0.35);7698  min-width: 14px;7699  flex-shrink: 0;7700  text-align: right;7701  letter-spacing: 0.04em;7702}77037704.peach-recovery-word-input {7705  flex: 1;7706  min-width: 0;7707  background: transparent;7708  border: none;7709  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7710  color: var(--peach-t0);7711  font-family: "IBM Plex Mono", monospace;7712  font-size: 0.6875rem;7713  letter-spacing: 0.06em;7714  padding: 5px 2px 4px;7715  outline: none;7716  text-transform: lowercase;7717  transition: border-color 120ms ease;7718}7719.peach-recovery-word-input::placeholder {7720  color: rgba(255, 255, 255, 0.18);7721}7722.peach-recovery-word-input:focus {7723  border-bottom-color: var(--peach-accent);7724}77257726.peach-recovery-submit {7727  width: 100%;7728  margin-top: auto;7729}77307731.peach-recovery-new-password-form {7732  width: 100%;7733  display: flex;7734  flex-direction: column;7735  gap: 16px;7736  margin-bottom: 8px;7737}7738.peach-recovery-new-password-form .peach-newvault-field {7739  display: flex;7740  flex-direction: column;7741  gap: 4px;7742}77437744/* ── Recovery words display (post-create) ────────────────────────── */7745.lock-screen--recovery-display {7746  display: flex;7747  flex-direction: column;7748  align-items: stretch;7749  padding: 0 20px 20px;7750  min-height: 0;7751  overflow-y: auto;7752}77537754.peach-recovery-words-display {7755  width: 100%;7756  margin-bottom: 16px;7757  border: 1px solid var(--peach-t3);7758  border-radius: 8px;7759  padding: 12px 14px;7760  background: rgba(245, 240, 234, 0.04);7761}77627763.peach-recovery-words-label {7764  font-family: "IBM Plex Mono", monospace;7765  font-size: 0.5rem;7766  letter-spacing: 0.08em;7767  color: var(--peach-t2);7768  text-transform: uppercase;7769  margin-bottom: 10px;7770}77717772.peach-recovery-word-list {7773  list-style: none;7774  margin: 0;7775  padding: 0;7776  display: grid;7777  grid-template-columns: repeat(2, 1fr);7778  gap: 6px 16px;7779}77807781.peach-recovery-word-item {7782  display: flex;7783  align-items: baseline;7784  gap: 5px;7785}77867787.peach-recovery-word-num {7788  font-family: "IBM Plex Mono", monospace;7789  font-size: 0.5rem;7790  color: var(--peach-t2);7791  width: 14px;7792  flex: 0 0 14px;7793  text-align: right;7794  letter-spacing: 0.04em;7795  font-variant-numeric: tabular-nums;7796}77977798.peach-recovery-download-btn {7799  display: block;7800  margin: 10px auto 0;7801  padding: 4px 10px;7802  background: transparent;7803  border: 1px solid var(--peach-border);7804  border-radius: 6px;7805  color: var(--peach-t2);7806  font-family: "IBM Plex Mono", monospace;7807  font-size: 0.5625rem;7808  letter-spacing: 0.06em;7809  text-transform: lowercase;7810  cursor: pointer;7811  transition: border-color 0.15s, color 0.15s;7812}78137814.peach-recovery-download-btn:hover {7815  border-color: var(--peach-accent);7816  color: var(--peach-t0);7817}78187819.peach-recovery-word-text {7820  font-family: "IBM Plex Mono", monospace;7821  font-size: 0.6875rem;7822  letter-spacing: 0.06em;7823  color: var(--peach-t0);7824  text-transform: lowercase;7825}78267827.peach-hint--warning {7828  color: var(--peach-accent);7829  font-style: italic;7830}7831.peach-hint--success {7832  color: var(--peach-t2);7833  font-family: "IBM Plex Mono", monospace;7834  font-size: 0.625rem;7835  letter-spacing: 0.06em;7836}78377838/* Confirmation step */7839.peach-recovery-confirm {7840  width: 100%;7841  flex: 1;7842  display: flex;7843  flex-direction: column;7844}7845.peach-recovery-confirm-label {7846  font-family: "IBM Plex Mono", monospace;7847  font-size: 0.5625rem;7848  letter-spacing: 0.04em;7849  color: var(--peach-t2);7850  text-align: center;7851  margin: 0 0 12px;7852}7853.peach-recovery-confirm-fields {7854  display: flex;7855  flex-direction: column;7856  gap: 14px;7857  margin-bottom: 10px;7858}7859.peach-recovery-confirm-field {7860  display: flex;7861  align-items: center;7862  gap: 8px;7863}7864.peach-recovery-confirm-num {7865  font-family: "IBM Plex Mono", monospace;7866  font-size: 0.5rem;7867  color: var(--peach-t2);7868  min-width: 44px;7869  letter-spacing: 0.04em;7870}7871.peach-recovery-confirm-input {7872  flex: 1;7873  background: transparent;7874  border: none;7875  border-bottom: 1px solid var(--peach-t3);7876  color: var(--peach-t0);7877  font-family: "IBM Plex Mono", monospace;7878  font-size: 0.6875rem;7879  letter-spacing: 0.06em;7880  padding: 4px 2px 3px;7881  outline: none;7882  text-transform: lowercase;7883  transition: border-color 120ms ease;7884}7885.peach-recovery-confirm-input:focus {7886  border-bottom-color: var(--peach-accent);7887}7888.peach-recovery-confirm-input:disabled {7889  opacity: 0.4;7890  cursor: not-allowed;7891}7892.peach-recovery-confirm-btn {7893  width: 100%;7894  margin-top: auto;7895}78967897/* ============================================================7898   Sync info sheet7899   ============================================================ */79007901.peach-sync-info-backdrop {7902  position: fixed;7903  inset: 0;7904  z-index: 200;7905  background: rgba(0, 0, 0, 0.55);7906  display: flex;7907  align-items: flex-end;7908  animation: peach-fade-in 200ms ease forwards;7909}79107911@keyframes peach-fade-in {7912  from { opacity: 0; }7913  to   { opacity: 1; }7914}79157916.peach-sync-info-sheet {7917  width: 100%;7918  background: var(--peach-bg-card, var(--peach-bg));7919  border-top-left-radius: 20px;7920  border-top-right-radius: 20px;7921  padding: 12px 24px 32px;7922  display: flex;7923  flex-direction: column;7924  gap: 20px;7925  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;7926}79277928@keyframes peach-sheet-up {7929  from { transform: translateY(100%); }7930  to   { transform: translateY(0); }7931}79327933.peach-sync-info-handle {7934  width: 36px;7935  height: 4px;7936  border-radius: 2px;7937  background: var(--peach-border);7938  margin: 0 auto 4px;7939  flex-shrink: 0;7940}79417942.peach-sync-info-title {7943  font-family: 'Cormorant Garamond', serif;7944  font-style: italic;7945  font-size: 26px;7946  font-weight: 600;7947  color: var(--peach-t0);7948  margin: 0;7949  line-height: 1.2;7950}79517952.peach-sync-info-body {7953  display: flex;7954  flex-direction: column;7955  gap: 14px;7956}79577958.peach-sync-info-point {7959  display: flex;7960  gap: 12px;7961  align-items: flex-start;7962  font-size: 14px;7963  color: var(--peach-t2);7964  line-height: 1.6;7965  margin: 0;7966}79677968.peach-sync-info-icon {7969  color: var(--peach-accent);7970  font-size: 16px;7971  flex-shrink: 0;7972  margin-top: 1px;7973}79747975.peach-sync-info-actions {7976  display: flex;7977  flex-direction: column;7978  gap: 12px;7979  margin-top: 4px;7980}79817982.peach-sync-info-pro-link {7983  background: none;7984  border: none;7985  font-size: 13px;7986  color: var(--peach-t3);7987  cursor: pointer;7988  padding: 0;7989  font-family: inherit;7990  text-align: center;7991  transition: color 150ms ease;7992}79937994.peach-sync-info-pro-link:hover {7995  color: var(--peach-accent);7996}79977998.peach-btn--full {7999  width: 100%;8000}80018002/* ── Sync screen ── */80038004.peach-sync-coming-soon {8005  display: flex;8006  align-items: flex-start;8007  gap: 10px;8008  padding: 12px 14px;8009  background: var(--peach-s1);8010  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8011  border-radius: 10px;8012}8013.peach-sync-coming-soon__icon {8014  flex-shrink: 0;8015  color: var(--peach-accent);8016  margin-top: 1px;8017  line-height: 0;8018}8019.peach-sync-coming-soon__title {8020  font-family: 'Cormorant Garamond', serif;8021  font-weight: 500;8022  font-size: 13px;8023  color: var(--peach-accent);8024  margin: 0 0 5px;8025  line-height: 1.3;8026}8027.peach-sync-coming-soon__body {8028  font-size: 12px;8029  color: var(--peach-t1);8030  line-height: 1.55;8031  margin: 0;8032}80338034.peach-sync-screen {8035  display: flex;8036  flex-direction: column;8037  height: 100%;8038}80398040.peach-sync-content {8041  flex: 1;8042  overflow-y: auto;8043  padding: 24px 20px 40px;8044  display: flex;8045  flex-direction: column;8046  gap: 24px;8047}80488049/* Intro (State A) */8050.peach-sync-headline {8051  font-family: 'Cormorant Garamond', serif;8052  font-style: italic;8053  font-size: 28px;8054  font-weight: 600;8055  color: var(--peach-t0);8056  margin: 0 0 10px;8057  line-height: 1.2;8058}80598060.peach-sync-intro-body {8061  font-size: 14px;8062  color: var(--peach-t1);8063  line-height: 1.6;8064  margin: 0;8065}80668067.peach-sync-pro-note {8068  display: flex;8069  flex-direction: column;8070  gap: 8px;8071  background: var(--peach-t3);8072  border-radius: 10px;8073  padding: 12px 14px;8074}80758076.peach-sync-pro-note-text {8077  font-size: 12px;8078  color: var(--peach-t2);8079  line-height: 1.5;8080  margin: 0;8081}80828083.peach-sync-pro-link {8084  background: none;8085  border: none;8086  font-size: 12px;8087  color: var(--peach-accent);8088  cursor: pointer;8089  padding: 0;8090  font-family: inherit;8091  text-align: left;8092}80938094/* Status (State C) */8095.peach-sync-status {8096  padding: 12px 0;8097  border-bottom: 1px solid var(--peach-border);8098}80998100.peach-sync-status-row {8101  display: flex;8102  align-items: center;8103  gap: 8px;8104}81058106.peach-sync-dot {8107  width: 7px;8108  height: 7px;8109  border-radius: 50%;8110  flex-shrink: 0;8111}81128113.peach-sync-dot--green { background: var(--peach-health-ok); }8114.peach-sync-dot--amber { background: var(--peach-accent); }81158116.peach-sync-status-text {8117  font-family: 'IBM Plex Mono', monospace;8118  font-size: 11px;8119  color: var(--peach-t2);8120}81218122/* Paired devices */8123.peach-sync-section {8124  display: flex;8125  flex-direction: column;8126  gap: 2px;8127}81288129.peach-sync-section-label {8130  font-family: 'IBM Plex Mono', monospace;8131  font-size: 10px;8132  letter-spacing: 0.1em;8133  color: var(--peach-t3);8134  margin: 0 0 10px;8135}81368137.peach-sync-device-row {8138  display: flex;8139  justify-content: space-between;8140  align-items: baseline;8141  padding: 10px 0;8142  border-bottom: 1px solid var(--peach-border);8143  gap: 12px;8144}81458146.peach-sync-device-name {8147  font-size: 14px;8148  color: var(--peach-t1);8149}81508151.peach-sync-device-meta {8152  font-family: 'IBM Plex Mono', monospace;8153  font-size: 11px;8154  color: var(--peach-t3);8155  white-space: nowrap;8156}81578158.peach-sync-hub-note {8159  padding: 14px 16px;8160  border: 1px solid var(--peach-border);8161  border-radius: 10px;8162  display: flex;8163  flex-direction: column;8164  gap: 6px;8165  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8166}81678168.peach-sync-hub-note-title {8169  font-size: 13px;8170  font-weight: 600;8171  color: var(--peach-t0);8172  margin: 0;8173}81748175.peach-sync-hub-note-body {8176  font-size: 12px;8177  color: var(--peach-t2);8178  line-height: 1.6;8179  margin: 0;8180}81818182/* Action buttons */8183.peach-sync-actions {8184  display: flex;8185  gap: 10px;8186  flex-wrap: wrap;8187}81888189/* Upgrade prompt (State B) */8190.peach-sync-upgrade {8191  display: flex;8192  flex-direction: column;8193  gap: 12px;8194  padding: 16px;8195  border: 1px solid var(--peach-border);8196  border-radius: 10px;8197}81988199.peach-sync-upgrade-text {8200  font-size: 13px;8201  color: var(--peach-t2);8202  line-height: 1.6;8203  margin: 0;8204}82058206/* Network note */8207.peach-sync-network-note {8208  font-size: 12px;8209  color: var(--peach-t3);8210  line-height: 1.6;8211  margin: 0;8212}82138214/* Advanced */8215.peach-sync-advanced {8216  margin-top: auto;8217  padding-top: 16px;8218  border-top: 1px solid var(--peach-border);8219}82208221.peach-sync-advanced-toggle {8222  display: flex;8223  align-items: center;8224  gap: 8px;8225  background: none;8226  border: none;8227  font-family: 'IBM Plex Mono', monospace;8228  font-size: 11px;8229  letter-spacing: 0.08em;8230  color: var(--peach-t3);8231  cursor: pointer;8232  padding: 0;8233  text-transform: uppercase;8234}82358236.peach-sync-advanced-chevron {8237  display: inline-block;8238  transition: transform 200ms ease;8239  font-size: 10px;8240}82418242.peach-sync-advanced-chevron.is-open {8243  transform: rotate(90deg);8244}82458246.peach-sync-advanced-content {8247  margin-top: 14px;8248}82498250.peach-sync-advanced-row {8251  display: flex;8252  justify-content: space-between;8253  align-items: center;8254  gap: 16px;8255}82568257.peach-sync-advanced-title {8258  font-size: 14px;8259  color: var(--peach-t1);8260  margin: 0 0 2px;8261}82628263.peach-sync-advanced-subtitle {8264  font-size: 12px;8265  color: var(--peach-t3);8266  margin: 0;8267  line-height: 1.5;8268}82698270/* ── Add Device — Android scan tabs ─────────────────────────────────────── */82718272.peach-pairing-tabs {8273  display: flex;8274  border: 1px solid var(--peach-border);8275  border-radius: 8px;8276  overflow: hidden;8277  margin-bottom: 4px;8278}82798280.peach-pairing-tab {8281  flex: 1;8282  padding: 10px 0;8283  background: none;8284  border: none;8285  font-family: 'IBM Plex Mono', monospace;8286  font-size: 11px;8287  letter-spacing: 0.06em;8288  color: var(--peach-t2);8289  cursor: pointer;8290  transition: background 150ms, color 150ms;8291}82928293.peach-pairing-tab.is-active {8294  background: var(--peach-accent);8295  color: #fff;8296  font-weight: 600;8297}82988299.peach-pairing-tab:not(.is-active):active {8300  background: var(--peach-border);8301}83028303/* Camera view */8304.peach-pairing-camera-container {8305  position: relative;8306  width: 100%;8307  aspect-ratio: 1;8308  border-radius: 12px;8309  overflow: hidden;8310  background: #000;8311  flex-shrink: 0;8312}83138314.peach-pairing-video {8315  width: 100%;8316  height: 100%;8317  object-fit: cover;8318}83198320.peach-pairing-scan-frame {8321  position: absolute;8322  top: 50%;8323  left: 50%;8324  transform: translate(-50%, -50%);8325  width: 60%;8326  aspect-ratio: 1;8327  border: 2px solid var(--peach-accent);8328  border-radius: 8px;8329  pointer-events: none;8330}83318332/* ── Notes Mode ── */83338334/* Overlay that crossfades over the vault */8335.peach-notes-overlay {8336  position: fixed;8337  inset: 0;8338  z-index: 90;8339  opacity: 0;8340  pointer-events: none;8341  animation: peach-mode-in 220ms ease-in forwards;8342}83438344.peach-notes-overlay.is-visible {8345  opacity: 1;8346  pointer-events: auto;8347}83488349@keyframes peach-mode-in {8350  from { opacity: 0; }8351  to   { opacity: 1; }8352}83538354/* Top-level notes surface */8355.peach-notes-mode {8356  position: absolute;8357  inset: 0;8358  background: var(--peach-bg);8359  display: flex;8360  flex-direction: column;8361}83628363/* Rune canvas positioned behind content */8364.peach-note-rune-canvas {8365  position: absolute;8366  inset: 0;8367  width: 100%;8368  height: 100%;8369  pointer-events: none;8370  z-index: 0;8371}83728373/* TOC wrapper */8374.peach-notes-toc-wrapper {8375  position: absolute;8376  inset: 0;8377  z-index: 1;8378  opacity: 1;8379  pointer-events: auto;8380  transition: opacity 200ms ease;8381}83828383.peach-notes-toc-wrapper.is-hidden {8384  opacity: 0;8385  pointer-events: none;8386}83878388/* Editor wrapper */8389.peach-notes-editor-wrapper {8390  position: absolute;8391  inset: 0;8392  z-index: 2;8393  opacity: 0;8394  pointer-events: none;8395  transition: opacity 200ms ease;8396}83978398.peach-notes-editor-wrapper.is-visible {8399  opacity: 1;8400  pointer-events: auto;8401}84028403/* TOC inner */8404.peach-notes-toc {8405  position: relative;8406  display: flex;8407  flex-direction: column;8408  height: 100%;8409  padding-top: env(safe-area-inset-top, 0px);8410  padding-bottom: env(safe-area-inset-bottom, 0px);8411}84128413/* Shared header */8414.peach-notes-header {8415  display: flex;8416  align-items: center;8417  padding: 12px 16px;8418  gap: 12px;8419  flex-shrink: 0;8420  min-height: 52px;8421  position: relative;8422  z-index: 2;8423}84248425.peach-notes-back {8426  font-size: 22px;8427  color: var(--peach-t2);8428  background: none;8429  border: none;8430  padding: 4px;8431  cursor: pointer;8432  line-height: 1;8433  flex-shrink: 0;8434  transition: color 150ms ease;8435  -webkit-tap-highlight-color: transparent;8436}84378438.peach-notes-back:active { color: var(--peach-t0); }84398440.peach-notes-header-title {8441  flex: 1;8442  font-family: 'Cormorant Garamond', serif;8443  font-style: italic;8444  font-size: 22px;8445  color: var(--peach-t0);8446  text-align: center;8447}84488449.peach-notes-header-title.is-breadcrumb {8450  font-family: 'IBM Plex Mono', monospace;8451  font-style: normal;8452  font-size: 11px;8453  color: var(--peach-t3);8454  letter-spacing: 0.08em;8455  text-transform: uppercase;8456  cursor: pointer;8457}84588459.peach-notes-header-actions {8460  display: flex;8461  gap: 8px;8462  flex-shrink: 0;8463}84648465.peach-notes-header-btn {8466  width: 36px;8467  height: 36px;8468  display: flex;8469  align-items: center;8470  justify-content: center;8471  background: none;8472  border: none;8473  color: var(--peach-t2);8474  cursor: pointer;8475  border-radius: 8px;8476  font-size: 16px;8477  transition: color 150ms ease, background 150ms ease;8478  -webkit-tap-highlight-color: transparent;8479}84808481.peach-notes-header-btn:active {8482  background: rgba(255,255,255,0.06);8483  color: var(--peach-t0);8484}84858486/* Inline search bar */8487.peach-notes-search-input {8488  flex: 1;8489  background: none;8490  border: none;8491  outline: none;8492  font-family: 'IBM Plex Mono', monospace;8493  font-size: 13px;8494  color: var(--peach-t0);8495  padding: 4px 0;8496  letter-spacing: 0.02em;8497}84988499.peach-notes-search-input::placeholder {8500  color: var(--peach-t3);8501}85028503/* TOC list */8504.peach-notes-list-container {8505  flex: 1;8506  overflow-y: auto;8507  overflow-x: hidden;8508  scrollbar-width: none;8509  -webkit-overflow-scrolling: touch;8510  overscroll-behavior: contain;8511  position: relative;8512  z-index: 1;8513}85148515.peach-notes-list-container::-webkit-scrollbar { display: none; }85168517/* Note row */8518.peach-note-row {8519  position: relative;8520  display: grid;8521  grid-template-columns: 44px 8px 1fr 8px auto;8522  align-items: center;8523  min-height: 72px;8524  padding: 16px 20px;8525  border-bottom: 0.5px solid var(--peach-border);8526  cursor: pointer;8527  overflow: hidden;8528  touch-action: pan-y;8529  user-select: none;8530  -webkit-user-select: none;8531  -webkit-tap-highlight-color: transparent;8532}85338534.peach-note-row:first-child {8535  border-top: 0.5px solid var(--peach-border);8536}85378538.peach-note-row:active {8539  background: rgba(255,255,255,0.02);8540}85418542.peach-note-numeral {8543  font-family: 'Cormorant Garamond', serif;8544  font-style: italic;8545  font-size: 15px;8546  color: var(--peach-accent);8547  text-align: right;8548  line-height: 1;8549  flex-shrink: 0;8550}85518552.peach-note-title-gap { /* grid spacer */ }85538554.peach-note-title {8555  font-family: 'Cormorant Garamond', serif;8556  font-style: italic;8557  font-size: 18px;8558  color: var(--peach-t0);8559  line-height: 1.3;8560  min-width: 0;8561  overflow-wrap: break-word;8562}85638564.peach-note-title-match {8565  color: var(--peach-accent);8566}85678568.peach-note-date {8569  font-family: 'IBM Plex Mono', monospace;8570  font-size: 11px;8571  color: var(--peach-t2);8572  white-space: nowrap;8573  text-align: right;8574  flex-shrink: 0;8575  grid-column: 5;8576}85778578/* Swipe underlays */8579.peach-note-row-underlay {8580  position: absolute;8581  inset: 0;8582  display: flex;8583  align-items: center;8584  padding: 0 24px;8585  font-family: 'IBM Plex Mono', monospace;8586  font-size: 11px;8587  letter-spacing: 0.1em;8588  pointer-events: none;8589  z-index: 0;8590}85918592.peach-note-row-underlay--delete {8593  background: #8B2020;8594  color: rgba(255,255,255,0.9);8595  justify-content: flex-end;8596}85978598.peach-note-row-underlay--archive {8599  background: var(--peach-accent);8600  color: #0C0A06;8601  justify-content: flex-start;8602}86038604/* Delete confirm strip */8605.peach-note-delete-confirm {8606  position: absolute;8607  inset: 0;8608  background: var(--peach-bg);8609  display: flex;8610  align-items: center;8611  gap: 12px;8612  padding: 0 20px;8613  font-family: 'IBM Plex Mono', monospace;8614  font-size: 11px;8615  color: var(--peach-t1);8616  letter-spacing: 0.04em;8617  animation: peach-delete-confirm-in 150ms ease both;8618  z-index: 10;8619}86208621@keyframes peach-delete-confirm-in {8622  from { opacity: 0; }8623  to   { opacity: 1; }8624}86258626.peach-note-delete-confirm-btn {8627  background: #8B2020;8628  color: rgba(255,255,255,0.9);8629  border: none;8630  border-radius: 6px;8631  padding: 4px 10px;8632  font-family: 'IBM Plex Mono', monospace;8633  font-size: 10px;8634  cursor: pointer;8635  letter-spacing: 0.06em;8636}86378638.peach-note-delete-cancel-btn {8639  background: none;8640  border: none;8641  color: var(--peach-t3);8642  font-family: 'IBM Plex Mono', monospace;8643  font-size: 10px;8644  cursor: pointer;8645  letter-spacing: 0.06em;8646  padding: 4px 6px;8647}86488649/* + New note button */8650.peach-notes-new-btn {8651  font-family: 'IBM Plex Mono', monospace;8652  font-size: 12px;8653  color: var(--peach-t3);8654  text-align: center;8655  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8656  background: none;8657  border: none;8658  width: 100%;8659  cursor: pointer;8660  letter-spacing: 0.04em;8661  transition: color 150ms ease;8662  -webkit-tap-highlight-color: transparent;8663}86648665.peach-notes-new-btn:active { color: var(--peach-accent); }86668667/* Empty state */8668.peach-notes-empty {8669  display: flex;8670  flex-direction: column;8671  align-items: center;8672  justify-content: center;8673  flex: 1;8674  padding: 48px 32px;8675  gap: 16px;8676}86778678.peach-notes-empty-text {8679  font-family: 'Cormorant Garamond', serif;8680  font-style: italic;8681  font-size: 20px;8682  color: var(--peach-t3);8683  text-align: center;8684  margin: 0;8685  line-height: 1.4;8686  white-space: pre-line;8687}86888689/* ── Editor surface ── */86908691.peach-note-editor-surface {8692  position: absolute;8693  inset: 0;8694  background: var(--peach-bg);8695  display: flex;8696  flex-direction: column;8697  padding-top: env(safe-area-inset-top, 0px);8698}86998700.peach-note-editor-scroll {8701  flex: 1;8702  overflow-y: auto;8703  overflow-x: hidden;8704  scrollbar-width: none;8705  -webkit-overflow-scrolling: touch;8706  padding: 0 24px 120px;8707  position: relative;8708  z-index: 1;8709}87108711.peach-note-editor-scroll::-webkit-scrollbar { display: none; }87128713/* Desktop toolbar (always visible above body) */8714.peach-note-toolbar-desktop-inline {8715  display: flex;8716  align-items: center;8717  gap: 2px;8718  padding: 6px 0 12px;8719  margin-bottom: 4px;8720  border-bottom: 0.5px solid var(--peach-border);8721}87228723/* Title field */8724.peach-note-title-field {8725  font-family: 'Cormorant Garamond', serif;8726  font-style: italic;8727  font-size: 32px;8728  font-weight: 600;8729  color: var(--peach-t0);8730  line-height: 1.2;8731  padding: 8px 0 0;8732  outline: none;8733  min-height: 44px;8734  word-break: break-word;8735  position: relative;8736  z-index: 1;8737}87388739.peach-note-title-field:empty::before {8740  content: attr(data-placeholder);8741  color: var(--peach-t3);8742  pointer-events: none;8743}87448745/* Hairline separator */8746.peach-note-hairline {8747  height: 0.5px;8748  background: var(--peach-border);8749  margin: 12px 0 20px;8750  position: relative;8751  z-index: 1;8752}87538754/* Body field */8755.peach-note-body-field {8756  font-family: 'DM Sans', sans-serif;8757  font-size: 16px;8758  color: var(--peach-t0);8759  line-height: 1.85;8760  padding: 0;8761  outline: none;8762  min-height: 240px;8763  word-break: break-word;8764  position: relative;8765  z-index: 1;8766}87678768.peach-note-body-field:empty::before {8769  content: attr(data-placeholder);8770  color: var(--peach-t3);8771  font-style: italic;8772  pointer-events: none;8773}87748775.peach-note-body-field h2 {8776  font-family: 'Cormorant Garamond', serif;8777  font-style: italic;8778  font-size: 22px;8779  font-weight: 600;8780  color: var(--peach-t0);8781  margin: 20px 0 8px;8782}87838784.peach-note-body-field blockquote {8785  border-left: 2px solid var(--peach-accent);8786  margin: 12px 0;8787  padding-left: 16px;8788  color: var(--peach-t1);8789  font-style: italic;8790}87918792.peach-note-body-field ul,8793.peach-note-body-field ol {8794  padding-left: 20px;8795  margin: 8px 0;8796}87978798.peach-note-body-field li {8799  margin: 4px 0;8800}88018802.peach-note-body-field hr {8803  border: none;8804  border-top: 0.5px solid var(--peach-border);8805  margin: 16px 0;8806}88078808/* Saved indicator */8809.peach-note-saved-indicator {8810  font-family: 'IBM Plex Mono', monospace;8811  font-size: 11px;8812  color: var(--peach-t3);8813  letter-spacing: 0.04em;8814  text-align: right;8815  padding: 6px 24px;8816  flex-shrink: 0;8817  transition: opacity 300ms ease;8818  pointer-events: none;8819  position: relative;8820  z-index: 1;8821}88228823/* Mobile keyboard toolbar */8824.peach-note-toolbar-mobile {8825  display: flex;8826  align-items: center;8827  padding: 8px 16px;8828  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));8829  background: var(--peach-bg);8830  border-top: 0.5px solid var(--peach-border);8831  gap: 4px;8832  flex-shrink: 0;8833  position: relative;8834  z-index: 10;8835}88368837.peach-note-toolbar-btn {8838  min-width: 36px;8839  height: 36px;8840  display: flex;8841  align-items: center;8842  justify-content: center;8843  background: none;8844  border: none;8845  border-radius: 8px;8846  cursor: pointer;8847  font-size: 14px;8848  color: var(--peach-t1);8849  font-family: 'DM Sans', sans-serif;8850  font-weight: 600;8851  transition: background 100ms ease, color 100ms ease;8852  -webkit-tap-highlight-color: transparent;8853}88548855.peach-note-toolbar-btn--italic { font-style: italic; }8856.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }8857.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }88588859.peach-note-toolbar-divider {8860  width: 0.5px;8861  height: 20px;8862  background: var(--peach-border);8863  margin: 0 4px;8864  flex-shrink: 0;8865}88668867.peach-note-toolbar-spacer { flex: 1; }88688869/* Desktop: larger headline in TOC */8870@media (min-width: 400px) {8871  .peach-notes-header-title:not(.is-breadcrumb) {8872    font-size: 32px;8873  }88748875  .peach-note-row {8876    min-height: 64px;8877    padding: 14px 16px;8878  }8879}88808881/* Flying title — shared element during expansion/collapse */88828883/* ─── Light theme overrides ───────────────────────────────────────────────8884   Tokens that cannot be expressed as variable substitutions — hardcoded8885   context-specific values that need separate light-mode rules. */88868887/* Settings section headers: use text-label (#79766F) per restoration brief —8888   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY8889   presence without fighting the light parchment background. */8890.light .peach-settings-sub-label,8891[data-theme="light"] .peach-settings-sub-label,8892.light .peach-settings-nav-label,8893[data-theme="light"] .peach-settings-nav-label {8894  color: #79766F;8895}88968897/* Secondary action buttons (ghost / subtle): filled with input-well surface8898   so they read as recessed against the parchment card background. */8899.light .peach-btn--ghost:not(.peach-icon-btn),8900[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {8901  background: #EEE7DD;8902  border-color: #DDD5CB;8903  color: #1A1208;8904}8905.light .peach-icon-btn,8906[data-theme="light"] .peach-icon-btn {8907  background: transparent;8908  border-color: transparent;8909}8910.light .peach-btn--subtle,8911[data-theme="light"] .peach-btn--subtle {8912  background: #EEE7DD;8913  border-color: #DDD5CB;8914}89158916/* Wide secondary action button on the lock screen — override the8917   hardcoded dark-mode rgba values with warm parchment equivalents. */8918.light .peach-lock-secondary,8919[data-theme="light"] .peach-lock-secondary {8920  background: #EEE7DD;8921  border-color: #DDD5CB;8922  color: #1A1208;8923}8924.light .peach-lock-secondary:hover,8925[data-theme="light"] .peach-lock-secondary:hover {8926  background: #F0E9DF;8927}89288929/* Entry row hover: bg-row lifts the row above the card surface. */8930.light .peach-entry-row:hover,8931[data-theme="light"] .peach-entry-row:hover {8932  background: #F2EBE1;8933}8934.light .peach-entry-row.is-active,8935[data-theme="light"] .peach-entry-row.is-active {8936  background: #F2EBE1;8937}8938.light .peach-entry-row.is-selected,8939[data-theme="light"] .peach-entry-row.is-selected {8940  background: #F5EDE2;8941}89428943/* ──────────────────────────────────────────────────────────────────────────8944   Chirp pairing flow — bird-stage animation (Phase 1)8945   See src/popup/components/ChirpPairingFlow.tsx and the brief §6.2.8946   Three-act animation gated on the [data-phase] attribute of8947   .peach-chirp-pair; child layers (birds, chirp arcs, flight wave, dot)8948   each react via either pose class or visibility flag.8949   Tokens: accent surfaces use var(--peach-accent); bird illustration8950   colours are baked into the SVG per the brand-peach exception in §3.1.8951   ────────────────────────────────────────────────────────────────────── */89528953.peach-chirp-pair {8954  position: absolute;8955  inset: 0;8956  z-index: 3;8957  display: flex;8958  flex-direction: column;8959  padding: 14px 12px 12px;8960  width: 100%;8961  box-sizing: border-box;8962  gap: 0;8963  background:8964    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),8965    var(--peach-bg);8966  color: var(--peach-t0);8967  overflow-y: auto;8968  overflow-x: hidden;8969  scrollbar-width: none;8970  isolation: isolate;8971  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;8972}8973@keyframes peach-chirp-overlay-in {8974  from { opacity: 0; transform: translateY(8px); }8975  to   { opacity: 1; transform: translateY(0); }8976}8977.peach-chirp-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }8978.peach-chirp-pair::before {8979  content: '';8980  position: absolute;8981  inset: 0;8982  border-radius: inherit;8983  pointer-events: none;8984  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);8985  z-index: 0;8986}8987.peach-chirp-pair > * { position: relative; z-index: 1; }89888989/* Header --------------------------------------------------------------- */8990.peach-chirp-head {8991  display: flex; align-items: center; gap: 10px;8992}8993.peach-chirp-back {8994  width: 32px; height: 32px;8995  display: inline-flex; align-items: center; justify-content: center;8996  background: transparent;8997  border: none;8998  border-radius: 8px;8999  color: var(--peach-t1);9000  cursor: pointer;9001  transition: color 0.15s ease, box-shadow 0.15s ease;9002}9003.peach-chirp-back:hover {9004  color: var(--peach-accent);9005  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9006}9007.peach-chirp-title {9008  font-family: var(--font-display, Georgia, serif);9009  font-style: italic;9010  font-size: 24px;9011  font-weight: 500;9012  letter-spacing: 0.005em;9013  color: var(--peach-t0);9014  line-height: 1;9015}9016.peach-chirp-head-spacer { flex: 1; }90179018/* Chip row ------------------------------------------------------------- */9019.peach-chirp-chip-row {9020  display: flex;9021  align-items: center;9022  justify-content: flex-start;9023  margin-top: 12px;9024}9025.peach-chirp-chip {9026  display: inline-flex; align-items: center; gap: 8px;9027  padding: 5px 10px 5px 8px;9028  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9029  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9030  border-radius: 999px;9031  font-family: var(--peach-mono, ui-monospace, monospace);9032  font-size: 11px;9033  letter-spacing: 0.04em;9034  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9035}9036.peach-chirp-chip-dot {9037  width: 6px; height: 6px; border-radius: 50%;9038  background: var(--peach-accent);9039  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9040}9041.peach-chirp-chip[data-phase="paired"] {9042  background: color-mix(in srgb, #4f9eda 12%, transparent);9043  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9044  color: #76b6e8;9045}9046.peach-chirp-chip[data-phase="paired"] .peach-chirp-chip-dot {9047  background: #76b6e8;9048  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9049}9050.peach-chirp-chip[data-phase="timeout"],9051.peach-chirp-chip[data-phase="mic_denied"],9052.peach-chirp-chip[data-phase="version_mismatch"],9053.peach-chirp-chip[data-phase="handshake_failed"] {9054  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9055  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9056  color: var(--peach-warn, #d29257);9057}9058.peach-chirp-chip[data-phase="timeout"] .peach-chirp-chip-dot,9059.peach-chirp-chip[data-phase="mic_denied"] .peach-chirp-chip-dot,9060.peach-chirp-chip[data-phase="version_mismatch"] .peach-chirp-chip-dot,9061.peach-chirp-chip[data-phase="handshake_failed"] .peach-chirp-chip-dot {9062  background: var(--peach-warn, #d29257);9063  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9064}90659066/* Bird stage ----------------------------------------------------------- */9067.peach-chirp-stage {9068  position: relative;9069  margin: 14px 0 8px;9070  height: 180px;9071  border-radius: 12px;9072  background:9073    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9074    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),9075    color-mix(in srgb, var(--peach-bg) 92%, #000);9076  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);9077  overflow: hidden;9078  isolation: isolate;9079}9080.peach-chirp-stage::after {9081  content: '';9082  position: absolute;9083  left: 12%; right: 12%;9084  bottom: 36px;9085  height: 1px;9086  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9087}90889089.peach-chirp-bird-slot {9090  position: absolute;9091  bottom: 8px;9092  width: 100px;9093  height: 110px;9094  display: flex;9095  align-items: flex-end;9096  justify-content: center;9097}9098.peach-chirp-bird-slot-desktop { left: 28px; }9099.peach-chirp-bird-slot-mobile { right: 28px; }91009101/* Mobile bird hops in from the right when handshake begins */9102.peach-chirp-bird-slot-mobile {9103  opacity: 1;9104  transform: translateX(-6px);9105  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9106}9107.peach-chirp-stage.act-listening .peach-chirp-bird-slot-mobile,9108.peach-chirp-stage.act-chirping .peach-chirp-bird-slot-mobile,9109.peach-chirp-stage.act-idle .peach-chirp-bird-slot-mobile {9110  opacity: 0;9111  transform: translateX(60px) rotate(8deg);9112}9113.peach-chirp-stage.act-handshake .peach-chirp-bird-slot-desktop,9114.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop {9115  transform: translateX(6px);9116  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9117}91189119/* Paired: both birds bob together */9120.peach-chirp-stage.act-paired .peach-chirp-bird-slot {9121  animation: peach-chirp-happy-bob 1.2s ease-in-out infinite;9122}9123.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { animation-delay: 0.2s; }9124.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop { --bb-x: 6px; }9125.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { --bb-x: -6px; }9126@keyframes peach-chirp-happy-bob {9127  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9128  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9129}91309131/* Bird internal -------------------------------------------------------- */9132.peach-chirp-bird {9133  width: 108px;9134  height: 108px;9135  transform-origin: 50% 95%;9136}9137.peach-chirp-bird svg { width: 100%; height: 100%; overflow: visible; }91389139.peach-chirp-bird-body {9140  transform-origin: 50% 80%;9141  animation: peach-chirp-bird-bob 2.4s ease-in-out infinite;9142}9143@keyframes peach-chirp-bird-bob {9144  0%, 100% { transform: translateY(0) scale(1, 1); }9145  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9146}91479148.peach-chirp-bird-eye-group {9149  animation: peach-chirp-blink 5.2s steps(1, end) infinite;9150  transform-origin: center;9151  transform-box: fill-box;9152}9153@keyframes peach-chirp-blink {9154  0%, 92%, 96%, 100% { transform: scaleY(1); }9155  94%                { transform: scaleY(0.05); }9156}91579158/* Pose: chirping — beak opens, head bobs, aura blooms */9159.peach-chirp-bird-pose-chirping .peach-chirp-bird-body {9160  animation:9161    peach-chirp-bird-bob 2.4s ease-in-out infinite,9162    peach-chirp-squeeze 1.7s ease-in-out infinite;9163}9164@keyframes peach-chirp-squeeze {9165  0%, 70%, 100% { transform-origin: 50% 85%; }9166  78%           { transform: scale(1.04, 0.96) translateY(1px); }9167  86%           { transform: scale(0.98, 1.02); }9168}9169.peach-chirp-bird-pose-chirping .peach-chirp-bird-head-group {9170  animation: peach-chirp-head-bob 1.7s ease-in-out infinite;9171}9172@keyframes peach-chirp-head-bob {9173  0%, 70%, 100% { transform: translateY(0) rotate(0); }9174  78%           { transform: translateY(-3px) rotate(-4deg); }9175  86%           { transform: translateY(-1px) rotate(-2deg); }9176}9177.peach-chirp-bird-pose-chirping .peach-chirp-bird-beak {9178  animation: peach-chirp-beak-open 1.7s ease-in-out infinite;9179}9180@keyframes peach-chirp-beak-open {9181  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9182  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9183  86%           { transform: rotate(-6deg); }9184}9185.peach-chirp-bird-pose-chirping .peach-chirp-bird-aura {9186  animation: peach-chirp-aura 1.7s ease-in-out infinite;9187}9188@keyframes peach-chirp-aura {9189  0%, 100% { opacity: 0; }9190  50%      { opacity: 0.8; }9191}9192.peach-chirp-bird-pose-chirping .peach-chirp-bird-tail {9193  animation: peach-chirp-tail-twitch 1.7s ease-in-out infinite;9194  transform-origin: 100% 50%;9195}9196@keyframes peach-chirp-tail-twitch {9197  0%, 75%, 100% { transform: rotate(0); }9198  82%           { transform: rotate(-3deg) translateX(-1px); }9199}92009201/* Pose: attentive — head tilts toward partner */9202.peach-chirp-bird-pose-attentive .peach-chirp-bird-head-group {9203  animation: peach-chirp-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9204}9205@keyframes peach-chirp-head-tilt {9206  0%   { transform: rotate(0) translateY(0); }9207  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9208  100% { transform: rotate(-6deg); }9209}9210.peach-chirp-bird-pose-attentive .peach-chirp-bird-tail {9211  animation: peach-chirp-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9212  transform-origin: 100% 50%;9213}9214@keyframes peach-chirp-tail-cock {9215  0%   { transform: rotate(0); }9216  100% { transform: rotate(-4deg); }9217}92189219/* Pose: happy — wing flutter, tuft perk, tail wag */9220.peach-chirp-bird-pose-happy .peach-chirp-bird-wing {9221  transform-origin: 80% 60%;9222  animation: peach-chirp-wing-flutter 0.32s ease-in-out 5;9223}9224@keyframes peach-chirp-wing-flutter {9225  0%, 100% { transform: rotate(0) translateY(0); }9226  50%      { transform: rotate(-16deg) translateY(-2px); }9227}9228.peach-chirp-bird-pose-happy .peach-chirp-bird-tuft {9229  transform-origin: 0% 100%;9230  animation: peach-chirp-tuft-perk 0.4s ease-in-out 3;9231}9232@keyframes peach-chirp-tuft-perk {9233  0%, 100% { transform: rotate(0); }9234  50%      { transform: rotate(-15deg) translateY(-1px); }9235}9236.peach-chirp-bird-pose-happy .peach-chirp-bird-tail {9237  transform-origin: 100% 50%;9238  animation: peach-chirp-tail-wag 0.5s ease-in-out 4;9239}9240@keyframes peach-chirp-tail-wag {9241  0%, 100% { transform: rotate(0); }9242  25%      { transform: rotate(6deg); }9243  75%      { transform: rotate(-6deg); }9244}9245.peach-chirp-bird-pose-happy .peach-chirp-bird-head-group {9246  animation: peach-chirp-head-perk 0.5s ease-out;9247}9248@keyframes peach-chirp-head-perk {9249  0%   { transform: translateY(0); }9250  40%  { transform: translateY(-3px) rotate(2deg); }9251  100% { transform: translateY(0); }9252}92539254/* Pose: sad — body droops forward */9255.peach-chirp-bird-pose-sad .peach-chirp-bird-body {9256  transform: translateY(5px) rotate(-2deg);9257  animation: none;9258}9259.peach-chirp-bird-pose-sad .peach-chirp-bird-head-group {9260  transform: translateY(4px) rotate(8deg);9261}9262.peach-chirp-bird-pose-sad .peach-chirp-bird-tuft { transform: rotate(15deg) translateY(2px); }9263.peach-chirp-bird-pose-sad .peach-chirp-bird-tail { transform: rotate(8deg) translateY(2px); }92649265.peach-chirp-bird-pose-hidden { opacity: 0; }92669267/* Chirp arcs ----------------------------------------------------------- */9268.peach-chirp-arcs {9269  position: absolute;9270  top: 18px;9271  width: 96px;9272  height: 70px;9273  pointer-events: none;9274}9275.peach-chirp-arcs-right { right: -60px; }9276.peach-chirp-arcs-left  { left: -60px; transform: scaleX(-1); }9277.peach-chirp-arc {9278  position: absolute;9279  top: 50%;9280  left: 0;9281  width: 40px;9282  height: 40px;9283  margin-top: -20px;9284  border: 1.2px solid #f4d5a8;9285  border-color: transparent #f4d5a8 transparent transparent;9286  border-radius: 50%;9287  opacity: 0;9288  animation: peach-chirp-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9289}9290@keyframes peach-chirp-arc-expand {9291  0%   { transform: scale(0.4); opacity: 0; }9292  20%  { opacity: 0.9; }9293  100% { transform: scale(1.6); opacity: 0; }9294}92959296/* Flight wave ---------------------------------------------------------- */9297.peach-chirp-flight-track {9298  position: absolute;9299  inset: 32px 36px 38px 36px;9300  pointer-events: none;9301}9302.peach-chirp-flight-wave {9303  position: absolute;9304  top: 8px;9305  left: 76px;9306  right: 76px;9307  height: 60px;9308  width: auto;9309  opacity: 0;9310  transition: opacity 0.15s ease;9311  stroke: #f4d5a8;9312  fill: none;9313}9314.peach-chirp-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9315.peach-chirp-flight-wave.is-visible { opacity: 1; }9316.peach-chirp-flight-path,9317.peach-chirp-flight-path-2 {9318  stroke-dasharray: 240;9319  stroke-dashoffset: 240;9320  stroke-linecap: round;9321  fill: none;9322}9323.peach-chirp-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9324.peach-chirp-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9325.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path {9326  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9327}9328.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path-2 {9329  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9330}9331@keyframes peach-chirp-fly {9332  0%   { stroke-dashoffset: 240; opacity: 0; }9333  20%  { opacity: 1; }9334  100% { stroke-dashoffset: -120; opacity: 0; }9335}93369337/* Connection dot ------------------------------------------------------- */9338.peach-chirp-dot {9339  position: absolute;9340  top: 50%; left: 50%;9341  transform: translate(-50%, -50%);9342  width: 40px; height: 40px;9343  opacity: 0;9344  pointer-events: none;9345  transition: opacity 0.3s ease;9346  color: var(--peach-accent);9347}9348.peach-chirp-dot.is-visible { opacity: 1; }9349.peach-chirp-dot-glow {9350  position: absolute; top: 50%; left: 50%;9351  transform: translate(-50%, -50%);9352  width: 38px; height: 38px;9353  border-radius: 50%;9354  filter: blur(10px);9355  opacity: 0.55;9356  background: var(--peach-accent);9357  animation: peach-chirp-dot-bloom 1.4s ease-out;9358}9359.peach-chirp-dot-core {9360  position: absolute; top: 50%; left: 50%;9361  transform: translate(-50%, -50%);9362  width: 8px; height: 8px;9363  border-radius: 50%;9364  background: var(--peach-accent);9365  box-shadow: 0 0 12px currentColor;9366  animation: peach-chirp-dot-core 1.4s ease-out;9367}9368.peach-chirp-dot-ring {9369  position: absolute; top: 50%; left: 50%;9370  width: 60px; height: 60px;9371  transform: translate(-50%, -50%);9372  animation: peach-chirp-dot-ring 1.4s linear;9373  stroke: var(--peach-accent);9374}9375@keyframes peach-chirp-dot-bloom {9376  0%   { width: 4px; height: 4px; opacity: 0; }9377  35%  { width: 60px; height: 60px; opacity: 0.7; }9378  100% { width: 38px; height: 38px; opacity: 0.55; }9379}9380@keyframes peach-chirp-dot-core {9381  0%   { width: 0; height: 0; }9382  35%  { width: 12px; height: 12px; }9383  100% { width: 8px; height: 8px; }9384}9385@keyframes peach-chirp-dot-ring {9386  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9387  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9388  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9389}93909391/* Motes — drift upward across the stage */9392.peach-chirp-motes {9393  position: absolute;9394  inset: 0;9395  pointer-events: none;9396}9397.peach-chirp-mote {9398  position: absolute;9399  width: 2px; height: 2px;9400  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9401  border-radius: 50%;9402  bottom: 32px;9403  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9404  opacity: 0;9405  animation: peach-chirp-mote-drift 6s linear infinite;9406  animation-delay: calc(var(--mote-i, 0) * 0.7s);9407}9408@keyframes peach-chirp-mote-drift {9409  0%   { transform: translateY(0); opacity: 0; }9410  10%  { opacity: 0.6; }9411  90%  { opacity: 0.1; }9412  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9413}94149415/* Status copy ---------------------------------------------------------- */9416.peach-chirp-copy-host {9417  margin: 4px 4px 10px;9418  text-align: center;9419  min-height: 50px;9420}9421.peach-chirp-copy {9422  animation: peach-chirp-copy-in 0.35s ease both;9423}9424@keyframes peach-chirp-copy-in {9425  from { opacity: 0; transform: translateY(4px); }9426  to   { opacity: 1; transform: translateY(0); }9427}9428.peach-chirp-headline {9429  font-family: var(--font-display, Georgia, serif);9430  font-style: italic;9431  font-size: 20px;9432  font-weight: 500;9433  line-height: 1.2;9434  letter-spacing: 0.005em;9435  color: var(--peach-t0);9436  margin-bottom: 6px;9437}9438.peach-chirp-copy-listening .peach-chirp-headline,9439.peach-chirp-copy-chirping .peach-chirp-headline,9440.peach-chirp-copy-idle .peach-chirp-headline {9441  font-family: inherit;9442  font-style: normal;9443  font-weight: 500;9444  font-size: 15px;9445  color: var(--peach-t0);9446  letter-spacing: 0;9447}9448.peach-chirp-copy-paired .peach-chirp-headline {9449  color: var(--peach-t0);9450  font-weight: 600;9451}9452.peach-chirp-sub {9453  font-size: 12.5px;9454  line-height: 1.45;9455  color: var(--peach-t1);9456  max-width: 280px;9457  margin: 0 auto;9458  text-wrap: pretty;9459}94609461/* Status action -------------------------------------------------------- */9462.peach-chirp-action {9463  margin: 2px 4px 10px;9464  margin-top: auto;9465  display: flex;9466  flex-direction: column;9467  gap: 8px;9468}9469.peach-chirp-mic-notice {9470  margin: 0;9471  font-size: 0.625rem;9472  color: var(--peach-t2);9473  line-height: 1.4;9474}9475.peach-chirp-action-waiting {9476  display: flex;9477  align-items: center;9478  justify-content: space-between;9479  gap: 12px;9480}9481.peach-chirp-cancel {9482  min-width: 96px;9483}9484.peach-chirp-listening {9485  display: inline-flex; align-items: center; gap: 4px;9486  font-family: var(--peach-mono, ui-monospace, monospace);9487  font-size: 9.5px;9488  text-transform: uppercase;9489  letter-spacing: 0.12em;9490  color: var(--peach-t1);9491  padding: 8px 10px;9492}9493.peach-chirp-listen-dot {9494  width: 4px; height: 4px;9495  border-radius: 50%;9496  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9497  animation: peach-chirp-listen-pulse 1.2s ease-in-out infinite;9498}9499.peach-chirp-listen-dot:nth-child(2) { animation-delay: 0.2s; }9500.peach-chirp-listen-dot:nth-child(3) { animation-delay: 0.4s; }9501.peach-chirp-listen-label { margin-left: 6px; }9502@keyframes peach-chirp-listen-pulse {9503  0%, 100% { opacity: 0.25; transform: scale(0.9); }9504  50%      { opacity: 1;     transform: scale(1.15); }9505}95069507.peach-chirp-action-handshake {9508  display: flex;9509  flex-direction: column;9510  align-items: center;9511  gap: 8px;9512  padding: 8px 4px;9513}9514.peach-chirp-meter {9515  width: 100%;9516  max-width: 280px;9517  height: 2px;9518  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9519  border-radius: 2px;9520  position: relative;9521  overflow: hidden;9522}9523.peach-chirp-meter-bar {9524  position: absolute;9525  top: 0; bottom: 0;9526  width: 30%;9527  left: -30%;9528  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9529  animation: peach-chirp-meter-sweep 1.4s ease-in-out infinite;9530}9531@keyframes peach-chirp-meter-sweep {9532  0%   { left: -30%; }9533  100% { left: 100%; }9534}9535.peach-chirp-meter-label {9536  font-family: var(--peach-mono, ui-monospace, monospace);9537  font-size: 9.5px;9538  text-transform: uppercase;9539  letter-spacing: 0.14em;9540  color: var(--peach-t1);9541}95429543.peach-chirp-action-paired {9544  display: flex;9545  align-items: center;9546  gap: 10px;9547}9548.peach-chirp-device-confirm {9549  flex: 1;9550  display: inline-flex;9551  align-items: center;9552  gap: 8px;9553  padding: 9px 10px 9px 12px;9554  border-radius: 10px;9555  background: color-mix(in srgb, #76b6e8 12%, transparent);9556  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9557  font-size: 12.5px;9558  color: var(--peach-t0);9559  min-width: 0;9560}9561.peach-chirp-device-confirm-glyph {9562  display: inline-flex;9563  color: #76b6e8;9564}9565.peach-chirp-device-confirm-name {9566  flex: 1;9567  overflow: hidden;9568  text-overflow: ellipsis;9569  white-space: nowrap;9570}9571.peach-chirp-device-confirm-trust {9572  font-family: var(--peach-mono, ui-monospace, monospace);9573  font-size: 9.5px;9574  text-transform: uppercase;9575  letter-spacing: 0.1em;9576  color: #76b6e8;9577  padding: 2px 6px;9578  border-radius: 4px;9579  background: color-mix(in srgb, #76b6e8 14%, transparent);9580}9581.peach-chirp-done {9582  min-width: 80px;9583}9584.peach-chirp-retry {9585  align-self: center;9586  display: block;9587  margin: 6px auto 0;9588  min-width: 120px;9589}9590.peach-chirp-mic-help {9591  font-size: 12px;9592  color: var(--peach-t1);9593  text-align: center;9594  max-width: 320px;9595  margin: 0 auto;9596}95979598/* Rest state — bird stage at idle pose, primary CTA + paired list */9599.peach-chirp-pair[data-phase="idle"] .peach-chirp-stage {9600  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9601  height: 160px;9602}9603.peach-chirp-pair-start {9604  width: 100%;9605  display: inline-flex;9606  align-items: center;9607  justify-content: center;9608  gap: 8px;9609  padding: 11px 14px;9610  border-radius: 10px;9611  background: var(--peach-accent);9612  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9613  color: #1a0905;9614  font-family: inherit;9615  font-size: 13px;9616  font-weight: 600;9617  letter-spacing: 0.01em;9618  cursor: pointer;9619  transition: filter 0.15s ease, transform 0.1s ease;9620}9621.peach-chirp-pair-start:hover { filter: brightness(1.08); }9622.peach-chirp-pair-start:active { transform: translateY(1px); }96239624.peach-chirp-paired-section {9625  margin-top: 14px;9626  display: flex;9627  flex-direction: column;9628  gap: 8px;9629}9630.peach-chirp-paired-heading {9631  margin: 0;9632  font-family: var(--peach-mono, ui-monospace, monospace);9633  font-size: 10px;9634  font-weight: 500;9635  letter-spacing: 0.14em;9636  text-transform: uppercase;9637  color: var(--peach-t1);9638}96399640/* Footer --------------------------------------------------------------- */9641.peach-chirp-foot {9642  margin: 10px -4px -2px;9643  margin-top: auto;9644}9645.peach-chirp-foot-divider {9646  height: 1px;9647  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9648  margin-bottom: 10px;9649}9650.peach-chirp-foot-text {9651  font-size: 11px;9652  line-height: 1.5;9653  color: var(--peach-t1);9654  text-align: center;9655  padding: 0 4px;9656  text-wrap: pretty;9657}96589659/* Screen-reader-only live region. Kept off the visual flow but read by9660   assistive tech as the pairing phase advances. */9661.peach-sr-only {9662  position: absolute;9663  width: 1px; height: 1px;9664  padding: 0; margin: -1px;9665  overflow: hidden;9666  clip: rect(0, 0, 0, 0);9667  white-space: nowrap;9668  border: 0;9669}96709671/* Reduced motion — stage simplifies to opacity transitions only */9672@media (prefers-reduced-motion: reduce) {9673  .peach-chirp-bird-body,9674  .peach-chirp-bird-head-group,9675  .peach-chirp-bird-beak,9676  .peach-chirp-bird-wing,9677  .peach-chirp-bird-tuft,9678  .peach-chirp-bird-tail,9679  .peach-chirp-bird-eye-group,9680  .peach-chirp-bird-aura,9681  .peach-chirp-arc,9682  .peach-chirp-flight-path,9683  .peach-chirp-flight-path-2,9684  .peach-chirp-dot-glow,9685  .peach-chirp-dot-core,9686  .peach-chirp-dot-ring,9687  .peach-chirp-mote,9688  .peach-chirp-meter-bar,9689  .peach-chirp-listen-dot,9690  .peach-chirp-bird-slot,9691  .peach-chirp-bird-slot-mobile {9692    animation: none !important;9693    transition: opacity 0.2s linear !important;9694  }9695}96969697/* ─────────────────────────────────────────────────────────────────9698   Settings → Sync surface (v3 ChirpSync). Wraps the same bird9699   animation used by the pairing flow with a paired-devices list and9700   the "Pair a device" CTA.9701   ───────────────────────────────────────────────────────────────── */9702.peach-chirp-settings {9703  position: absolute;9704  inset: 0;9705  z-index: 3;9706  display: flex;9707  flex-direction: column;9708  gap: 18px;9709  padding: 14px 12px 12px;9710  width: 100%;9711  box-sizing: border-box;9712  overflow-y: auto;9713  overflow-x: hidden;9714  /* Same warm Chirp surface as the pairing screen — unifies the two views. */9715  background:9716    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9717    var(--peach-bg);9718  color: var(--peach-t0);9719  isolation: isolate;9720  /* Hide native scrollbar — content fits 99% of the time and a chunky9721     gutter ruins the surface. */9722  scrollbar-width: none;9723  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9724}9725.peach-chirp-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9726.peach-chirp-settings::before {9727  content: '';9728  position: absolute;9729  inset: 0;9730  pointer-events: none;9731  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9732  z-index: 0;9733}9734.peach-chirp-settings > * { position: relative; z-index: 1; }97359736.peach-chirp-settings--pairing {9737  padding: 0;9738  align-items: stretch;9739  justify-content: stretch;9740  background: none;9741  isolation: auto;9742}9743.peach-chirp-settings--pairing::before { display: none; }97449745.peach-chirp-settings-header {9746  display: flex;9747  align-items: center;9748  gap: 10px;9749}9750.peach-chirp-settings-title {9751  margin: 0;9752  font-family: var(--font-display, Georgia, serif);9753  font-style: italic;9754  font-size: 24px;9755  font-weight: 500;9756  line-height: 1;9757  color: var(--peach-t0);9758  letter-spacing: 0.005em;9759}9760.peach-chirp-settings-section {9761  margin: 6px 0 -4px;9762  font-size: 11px;9763  font-weight: 600;9764  letter-spacing: 0.08em;9765  text-transform: uppercase;9766  color: var(--peach-text-muted);9767}9768.peach-chirp-settings-error {9769  font-size: 12px;9770  padding: 8px 10px;9771  border-radius: 8px;9772  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);9773  color: var(--peach-text);9774}9775.peach-chirp-settings-footer {9776  margin-top: auto;9777  padding-top: 18px;9778  font-size: 11.5px;9779  line-height: 1.5;9780  color: var(--peach-text-muted);9781  text-align: center;9782}97839784/* Hero card shown when no devices are paired yet. */9785.peach-chirp-hero {9786  display: flex;9787  flex-direction: column;9788  align-items: center;9789  gap: 12px;9790  padding: 20px 12px 8px;9791  text-align: center;9792}9793.peach-chirp-hero-svg {9794  display: block;9795  max-width: 100%;9796  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));9797}9798.peach-chirp-hero-headline {9799  margin: 0;9800  font-family: var(--font-display, Georgia, serif);9801  font-style: italic;9802  font-size: 20px;9803  font-weight: 500;9804  line-height: 1.2;9805  letter-spacing: 0.005em;9806  color: var(--peach-t0);9807}9808.peach-chirp-hero-sub {9809  margin: 0;9810  font-size: 13px;9811  line-height: 1.5;9812  color: var(--peach-t1);9813  max-width: 320px;9814  text-wrap: pretty;9815}98169817.peach-chirp-pair-cta {9818  display: flex;9819  justify-content: center;9820  padding: 4px 0 6px;9821}9822.peach-chirp-pair-button {9823  display: inline-flex;9824  align-items: center;9825  gap: 8px;9826  min-width: 220px;9827  justify-content: center;9828}9829.peach-chirp-pair-button-icon {9830  flex: 0 0 auto;9831}98329833/* Paired devices list. Roomy rows that look at home next to the rest9834   of Settings; stale rows get a soft warm-warning border tint. */9835.peach-chirp-device-list {9836  list-style: none;9837  margin: 0;9838  padding: 0;9839  display: flex;9840  flex-direction: column;9841  gap: 8px;9842}9843.peach-chirp-device-row {9844  display: flex;9845  align-items: center;9846  gap: 12px;9847  padding: 12px;9848  border-radius: 10px;9849  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9850  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);9851}9852.peach-chirp-device-row[data-stale="true"] {9853  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);9854}9855.peach-chirp-device-icon {9856  width: 32px;9857  height: 32px;9858  display: flex;9859  align-items: center;9860  justify-content: center;9861  border-radius: 8px;9862  color: var(--peach-text);9863  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);9864}9865.peach-chirp-device-info {9866  flex: 1;9867  display: flex;9868  flex-direction: column;9869  gap: 2px;9870  min-width: 0;9871}9872.peach-chirp-device-name {9873  font-size: 14px;9874  font-weight: 600;9875  color: var(--peach-text);9876  overflow: hidden;9877  text-overflow: ellipsis;9878  white-space: nowrap;9879}9880.peach-chirp-device-meta {9881  font-size: 11.5px;9882  color: var(--peach-text-muted);9883  display: flex;9884  flex-wrap: wrap;9885  align-items: center;9886  gap: 8px;9887}9888.peach-chirp-device-badge {9889  font-size: 10.5px;9890  font-weight: 500;9891  letter-spacing: 0.02em;9892  padding: 2px 6px;9893  border-radius: 999px;9894  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);9895  color: var(--peach-text);9896}9897.peach-chirp-device-stale {9898  font-size: 10.5px;9899  font-weight: 500;9900  color: var(--peach-warn, #d29257);9901}9902.peach-chirp-device-remove {9903  flex: 0 0 auto;9904  color: var(--peach-text-muted);9905}9906.peach-chirp-device-remove:hover {9907  color: var(--peach-danger, #c25b4a);9908}9909.peach-chirp-unpair-confirm {9910  display: flex;9911  gap: 6px;9912  align-items: center;9913}99149915/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */9916.peach-chirp-pro-card {9917  position: relative;9918  margin: 18px 12px;9919  padding: 18px 20px 22px;9920  border-radius: 22px;9921  background:9922    radial-gradient(140% 90% at 50% 0%,9923      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,9924      transparent 60%),9925    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9926  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);9927  box-shadow:9928    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,9929    0 18px 40px -24px rgba(0, 0, 0, 0.45);9930  display: flex;9931  flex-direction: column;9932  align-items: center;9933  gap: 10px;9934  text-align: center;9935  overflow: hidden;9936}9937.peach-chirp-pro-stage {9938  position: relative;9939  width: 220px;9940  height: 140px;9941  display: flex;9942  align-items: flex-end;9943  justify-content: center;9944  margin-bottom: 2px;9945}9946.peach-chirp-pro-bird-slot {9947  width: 140px;9948  height: 132px;9949  display: flex;9950  align-items: flex-end;9951  justify-content: center;9952  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));9953}9954.peach-chirp-pro-bird-slot .peach-chirp-bird {9955  width: 100%;9956  height: 100%;9957}9958.peach-chirp-pro-bird-slot .peach-chirp-bird svg {9959  width: 100%;9960  height: 100%;9961  overflow: visible;9962}9963.peach-chirp-pro-chirp {9964  position: absolute;9965  top: 14px;9966  right: 8px;9967  width: 96px;9968  height: 80px;9969  color: var(--peach-accent);9970  animation: peach-chirp-pulse 2.6s ease-in-out infinite;9971  transform-origin: 0% 50%;9972  pointer-events: none;9973}9974@keyframes peach-chirp-pulse {9975  0%, 100% { opacity: 0.35; transform: translateX(0) scale(0.92); }9976  45%      { opacity: 1;    transform: translateX(2px) scale(1); }9977  70%      { opacity: 0.6;  transform: translateX(4px) scale(1.04); }9978}9979@media (prefers-reduced-motion: reduce) {9980  .peach-chirp-pro-chirp { animation: none; opacity: 0.7; }9981}9982.peach-chirp-pro-headline {9983  margin: 4px 0 0;9984  font-family: var(--font-display, "Cormorant Garamond", serif);9985  font-style: italic;9986  font-size: 19px;9987  font-weight: 500;9988  letter-spacing: 0.01em;9989  color: var(--peach-t0);9990  max-width: 280px;9991  line-height: 1.25;9992}9993.peach-chirp-pro-body {9994  margin: 0;9995  font-size: 13px;9996  line-height: 1.55;9997  color: var(--peach-t1);9998  max-width: 300px;9999}10000.peach-chirp-pro-cta {10001  margin-top: 4px;10002}10003.peach-chirp-pro-foot {10004  margin: 2px 0 0;10005  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10006  font-size: 0.625rem;10007  letter-spacing: 0.08em;10008  text-transform: uppercase;10009  color: var(--peach-t2);10010  opacity: 0.75;10011}1001210013/* Shell border and shadow in light mode: match dark mode's near-invisible10014   border weight so the popup frame looks the same in both themes. */10015.light .peach-shell,10016.light .peach-screen {10017  border-color: rgba(26, 18, 8, 0.07);10018  box-shadow:10019    0 2px 8px rgba(80, 56, 32, 0.08),10020    0 14px 48px rgba(80, 56, 32, 0.10),10021    0 0 0 1px rgba(26, 18, 8, 0.04);10022}