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-domain-hint {5484  margin-left: auto;5485  font-family: "IBM Plex Mono", monospace;5486  font-size: 0.5625rem;5487  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5488  white-space: nowrap;5489  overflow: hidden;5490  text-overflow: ellipsis;5491  max-width: 110px;5492}54935494/* Tab-match badge on entry rows */5495.peach-tab-match-badge {5496  display: inline-block;5497  width: 6px;5498  height: 6px;5499  border-radius: 50%;5500  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5501  margin-left: 5px;5502  vertical-align: middle;5503  flex-shrink: 0;5504  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5505}55065507.peach-entry-row.is-tab-match {5508  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5509  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5510}55115512.peach-entry-row.is-tab-match:hover {5513  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5514}55155516/* Entry list stagger entrance */5517@keyframes peach-entry-fadein {5518  from { opacity: 0; transform: translateY(4px); }5519  to   { opacity: 1; transform: translateY(0); }5520}55215522.peach-vault-list .peach-entry-row {5523  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5524}55255526/* Button press micro-interaction */5527.peach-btn:active {5528  transform: scale(0.95);5529  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5530}55315532.peach-sort-btn:active,5533.peach-tag-filter-chip:active {5534  transform: scale(0.93);5535  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5536}55375538/* Password strength bar (Lock view + shared) */5539.peach-password-strength {5540  display: flex;5541  align-items: center;5542  gap: 8px;5543  margin-top: 6px;5544}55455546.peach-strength-bar {5547  flex: 1;5548  height: 3px;5549  border-radius: 2px;5550  background: var(--peach-t3);5551  overflow: hidden;5552}55535554.peach-strength-fill {5555  height: 100%;5556  border-radius: 2px;5557  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5558              background 300ms ease;5559}55605561.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5562.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5563.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5564.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }55655566.peach-strength-label {5567  font-family: "IBM Plex Mono", monospace;5568  font-style: italic;5569  font-size: 0.5625rem;5570  font-weight: 300;5571  letter-spacing: 0.06em;5572  color: var(--peach-t2);5573  min-width: 36px;5574  text-align: right;5575}55765577.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5578.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5579.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5580.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }55815582/* Duress form */5583.peach-duress-status {5584  padding: 2px 8px;5585  border-radius: 999px;5586  border: 1px solid var(--peach-t3);5587  font-family: "IBM Plex Mono", monospace;5588  font-size: 0.5625rem;5589  letter-spacing: 0.07em;5590  text-transform: uppercase;5591  color: var(--peach-t2);5592  flex-shrink: 0;5593}55945595.peach-duress-status.is-active {5596  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5597  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5598  color: var(--peach-t0);5599}56005601.peach-duress-form {5602  padding: 8px 0 4px;5603  display: flex;5604  flex-direction: column;5605  gap: 6px;5606}56075608.peach-duress-form .peach-label {5609  margin-top: 4px;5610}56115612.peach-duress-actions {5613  display: flex;5614  gap: 6px;5615  align-items: center;5616  margin-top: 4px;5617}56185619.peach-duress-actions .peach-btn:first-child {5620  margin-right: auto;5621}56225623/* Improved overlay spring entrance */5624.peach-overlay-view.ov-enter-up {5625  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5626}56275628@keyframes ov-enter-up-spring {5629  from { opacity: 0; transform: translateY(16px) scale(0.98); }5630  to   { opacity: 1; transform: translateY(0) scale(1); }5631}56325633.peach-overlay-view.ov-enter-right {5634  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5635}56365637@keyframes ov-enter-right-spring {5638  from { opacity: 0; transform: translateX(18px) scale(0.98); }5639  to   { opacity: 1; transform: translateX(0) scale(1); }5640}56415642/* ── Onboarding-mode restore screens (file import) ── */5643/* Used when MainImportView renders during onboarding (no vault yet).5644   Animates like a lock-screen transition. */5645.peach-lock-view {5646  position: absolute;5647  inset: 0;5648  display: flex;5649  flex-direction: column;5650  background:5651    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5652    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5653    var(--peach-bg);5654  z-index: 2;5655  overflow: hidden;5656  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5657}56585659.peach-lock-view-header {5660  display: flex;5661  align-items: center;5662  justify-content: space-between;5663  padding: 16px 18px 12px;5664  flex-shrink: 0;5665}56665667/* ───────── Settings: auto-lock select ───────── */5668.peach-settings-select {5669  font-family: "IBM Plex Mono", monospace;5670  font-size: 0.6875rem;5671  background: transparent;5672  border: 1px solid var(--peach-t3);5673  border-radius: 4px;5674  color: var(--peach-t1);5675  padding: 3px 6px;5676  cursor: pointer;5677  outline: none;5678}5679.peach-settings-select:focus {5680  border-color: var(--peach-accent);5681}56825683/* ───────── Duress status pill (new polished) ───────── */5684.peach-duress-status-pill {5685  font-family: "IBM Plex Mono", monospace;5686  font-size: 0.5625rem;5687  text-transform: uppercase;5688  letter-spacing: 0.12em;5689  padding: 2px 8px;5690  border-radius: 12px;5691  background: var(--peach-t3);5692  color: var(--peach-t2);5693  flex-shrink: 0;5694}5695.peach-duress-status-pill.is-active {5696  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5697  color: var(--peach-accent);5698}56995700/* ───────── Entry advanced disclosure (canary) ───────── */5701.peach-entry-advanced {5702  margin-top: 12px;5703  border-top: 1px solid var(--peach-t3);5704  padding-top: 10px;5705  position: relative;5706  z-index: 1;5707}5708.peach-entry-advanced-toggle {5709  display: flex;5710  align-items: center;5711  justify-content: space-between;5712  width: 100%;5713  background: transparent;5714  border: none;5715  cursor: pointer;5716  padding: 0;5717  color: var(--peach-t2);5718}5719.peach-canary-section {5720  margin-top: 10px;5721  display: grid;5722  gap: 6px;5723}57245725/* ───────── Import: merge/replace radio choices ───────── */5726.peach-import-choice {5727  display: flex;5728  align-items: flex-start;5729  gap: 10px;5730  padding: 8px 10px;5731  border: 1px solid var(--peach-t3);5732  border-radius: 10px;5733  cursor: pointer;5734  margin-bottom: 6px;5735  transition: border-color 120ms ease, background 120ms ease;5736}5737.peach-import-choice:hover {5738  border-color: var(--peach-accent);5739}5740.peach-import-choice input[type="radio"] {5741  margin-top: 3px;5742  accent-color: var(--peach-accent);5743  flex-shrink: 0;5744}5745.peach-import-choice-main {5746  display: flex;5747  flex-direction: column;5748  gap: 2px;5749  min-width: 0;5750}5751.peach-import-choice-label {5752  font-size: 0.75rem;5753  color: var(--peach-t0);5754}5755.peach-import-choice-sub {5756  font-size: 0.6875rem;5757  color: var(--peach-t2);5758  line-height: 1.5;5759}57605761/* ───────── Export: success confirmation strip ───────── */5762.peach-export-success {5763  display: flex;5764  align-items: flex-start;5765  gap: 10px;5766  padding: 12px;5767  border-radius: 12px;5768  border: 1px solid rgba(150, 175, 110, 0.3);5769  background: rgba(150, 175, 110, 0.08);5770  color: var(--peach-t0);5771  font-size: 0.75rem;5772  line-height: 1.55;5773}5774.peach-export-success-check {5775  color: rgba(150, 175, 110, 0.9);5776  font-size: 0.875rem;5777  flex-shrink: 0;5778}57795780/* ── Trash view ──────────────────────────────────────────────────────── */5781.peach-trash-entry-row {5782  display: flex;5783  align-items: center;5784  justify-content: space-between;5785  gap: 8px;5786  padding: 8px 0;5787  border-bottom: 1px solid var(--peach-border);5788}5789.peach-trash-entry-info {5790  flex: 1;5791  min-width: 0;5792  display: flex;5793  flex-direction: column;5794  gap: 2px;5795}5796.peach-trash-entry-title {5797  font-size: 0.8125rem;5798  color: var(--peach-t0);5799  overflow: hidden;5800  text-overflow: ellipsis;5801  white-space: nowrap;5802}5803.peach-trash-entry-meta {5804  font-family: var(--font-mono);5805  font-size: 0.5625rem;5806  color: var(--peach-t2);5807  letter-spacing: 0.04em;5808}5809.peach-trash-entry-actions {5810  display: flex;5811  align-items: center;5812  gap: 4px;5813  flex-shrink: 0;5814}5815.peach-trash-delete-btn {5816  background: transparent;5817  border: 0;5818  color: var(--peach-t3);5819  font-size: 1rem;5820  line-height: 1;5821  cursor: pointer;5822  padding: 2px 5px;5823  transition: color 0.15s;5824}5825.peach-trash-delete-btn:hover { color: var(--peach-breach); }5826.peach-trash-list {5827  overflow-y: auto;5828}5829.peach-trash-footer {5830  display: flex;5831  align-items: center;5832  gap: 8px;5833  padding: 8px 0 0;5834  border-top: 1px solid var(--peach-border);5835  margin-top: 4px;5836}5837.peach-trash-purge-all {5838  background: transparent;5839  border: 0;5840  color: var(--peach-t3);5841  font-size: 0.625rem;5842  cursor: pointer;5843  padding: 4px 0;5844  letter-spacing: 0.03em;5845  transition: color 0.2s;5846}5847.peach-trash-purge-all:hover { color: var(--peach-breach); }5848.peach-trash-purge-confirm-label {5849  font-size: 0.625rem;5850  color: var(--peach-t1);5851  flex: 1;5852}58535854/* ── Settings shortcuts grid ─────────────────────────────────────────── */5855.peach-shortcuts-grid {5856  display: grid;5857  grid-template-columns: auto 1fr;5858  gap: 6px 12px;5859  align-items: center;5860  padding: 4px 0;5861}5862.peach-shortcut-key {5863  font-family: var(--font-mono);5864  font-size: 0.625rem;5865  color: var(--peach-t0);5866  background: var(--peach-t3);5867  border-radius: 4px;5868  padding: 2px 6px;5869  white-space: nowrap;5870  text-align: center;5871}5872.peach-shortcut-desc {5873  font-size: 0.6875rem;5874  color: var(--peach-t1);5875}58765877/* ── Sort bar trash button ───────────────────────────────────────────── */5878.peach-sort-trash-btn {5879  display: flex;5880  align-items: center;5881  justify-content: center;5882  padding: 3px 5px;5883  background: transparent;5884  border: none;5885  cursor: pointer;5886  color: var(--peach-t2);5887  border-radius: 4px;5888  transition: color 140ms ease, background 140ms ease;5889}5890.peach-sort-trash-btn:hover {5891  color: var(--peach-t1);5892  background: var(--peach-t3);5893}5894.peach-sort-trash-btn.is-active {5895  color: var(--peach-accent);5896}58975898/* Accent color picker */5899.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5900.peach-accent-picker {5901  display: flex;5902  flex-wrap: wrap;5903  gap: 7px;5904  padding: 2px 0;5905}5906.peach-accent-swatch {5907  width: 22px;5908  height: 22px;5909  border-radius: 50%;5910  border: 2px solid transparent;5911  cursor: pointer;5912  padding: 0;5913  transition: transform 100ms;5914  outline-offset: 2px;5915}5916.peach-accent-swatch:hover { transform: scale(1.15); }5917.peach-accent-swatch.is-active {5918  border-color: var(--peach-t0);5919  transform: scale(1.1);5920}59215922.peach-pill-group {5923  display: flex;5924  gap: 6px;5925}5926.peach-pill-group .peach-btn.is-active {5927  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5928  border-color: var(--peach-accent);5929  color: var(--peach-t0);5930}59315932/* ── Card entry styles ───────────────────────────────────────── */5933.peach-card-number {5934  font-family: var(--peach-mono);5935  letter-spacing: 0.08em;5936}59375938.peach-card-network-badge {5939  font-size: 0.625rem;5940  padding: 1px 5px;5941  border-radius: 4px;5942  border: 0.5px solid var(--peach-border);5943  color: var(--peach-text-dim);5944  margin-left: 6px;5945  vertical-align: middle;5946}59475948.peach-card-expiry-row {5949  display: flex;5950  align-items: center;5951  gap: 8px;5952}59535954.peach-card-expiry-sep {5955  color: var(--peach-text-dim);5956}59575958/* ── Pro tier — upgrade screen ──────────────────────────────── */5959.peach-pro-mark {5960  font-size: 0.5625rem;5961  color: var(--peach-accent);5962  margin-left: 6px;5963  vertical-align: super;5964  opacity: 0.7;5965}59665967.peach-pro-mini-badge {5968  display: block;5969  font-size: 0.625rem;5970  font-style: italic;5971  color: var(--peach-accent);5972  letter-spacing: 0.04em;5973  margin-top: -2px;5974  padding-left: 2px;5975  opacity: 0.85;5976  text-align: center;5977}59785979.peach-wordmark-stack {5980  display: inline-flex;5981  flex-direction: column;5982  align-items: center;5983}59845985/* ── Pro tier — upgrade page ─────────────────────────────────── */5986/* ── Pro upgrade — redesigned editorial layout ─────────────────── */59875988.peach-pro-upgrade {5989  display: flex;5990  flex-direction: column;5991  align-items: stretch;5992  gap: 10px;5993  padding: 2px 2px 12px;5994}59955996.peach-pro-eyebrow {5997  margin: 0;5998  font-family: var(--font-ui);5999  font-size: 0.625rem;6000  font-weight: 500;6001  letter-spacing: 0.12em;6002  color: var(--peach-accent);6003}60046005.peach-pro-headline {6006  margin: 0;6007  font-family: var(--font-display, "Cormorant Garamond", serif);6008  font-size: 30px;6009  font-weight: 700;6010  font-style: normal;6011  line-height: 1.05;6012  color: var(--peach-t0);6013  letter-spacing: -0.01em;6014}6015.peach-pro-headline em {6016  font-style: italic;6017  font-weight: 400;6018  color: var(--peach-accent);6019}60206021.peach-pro-subtitle {6022  margin: 0;6023  font-size: 0.6875rem;6024  line-height: 1.5;6025  color: var(--peach-t1);6026}60276028/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6029.peach-pro-section-label {6030  margin: 6px 0 0;6031  font-family: var(--font-ui);6032  font-size: 0.5625rem;6033  font-weight: 500;6034  letter-spacing: 0.12em;6035  text-transform: uppercase;6036  color: var(--peach-t2);6037}60386039/* 2-column numbered feature grid */6040.peach-pro-grid {6041  display: grid;6042  grid-template-columns: 1fr 1fr;6043  border-top: 1px solid var(--peach-border);6044  border-left: 1px solid var(--peach-border);6045}60466047.peach-pro-grid-item {6048  display: flex;6049  flex-direction: column;6050  gap: 2px;6051  padding: 8px 9px;6052  border-right: 1px solid var(--peach-border);6053  border-bottom: 1px solid var(--peach-border);6054}60556056.peach-pro-grid-item--wide {6057  grid-column: 1 / -1;6058}60596060.peach-pro-grid-num {6061  font-family: var(--font-mono);6062  font-size: 0.5625rem;6063  color: var(--peach-accent);6064  letter-spacing: 0.06em;6065  opacity: 0.85;6066}60676068.peach-pro-grid-name {6069  font-size: 0.8125rem;6070  font-weight: 500;6071  color: var(--peach-t0);6072  line-height: 1.2;6073}60746075.peach-pro-grid-desc {6076  font-size: 0.625rem;6077  color: var(--peach-t1);6078  line-height: 1.4;6079}60806081.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6082  animation: peach-pulse-accent 600ms ease-out forwards;6083}60846085@keyframes peach-pulse-accent {6086  0%   { opacity: 1; transform: scale(1.2); }6087  100% { opacity: 0.85; transform: scale(1); }6088}60896090/* Actions */6091.peach-pro-upgrade-actions {6092  display: flex;6093  flex-direction: column;6094  align-items: stretch;6095  gap: 10px;6096}60976098.peach-pro-pricing {6099  margin: 0;6100  font-size: 1rem;6101  font-weight: 600;6102  color: var(--peach-t0);6103  letter-spacing: 0.01em;6104}6105.peach-pro-pricing-sub {6106  font-size: 0.75rem;6107  font-weight: 400;6108  color: var(--peach-t1);6109  letter-spacing: 0.02em;6110}61116112.peach-pro-upgrade-cta {6113  display: flex;6114  align-items: center;6115  justify-content: center;6116  text-decoration: none;6117  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6118  border: 1px solid var(--peach-accent);6119  border-radius: 10px;6120  color: var(--peach-accent);6121  font-family: var(--font-ui);6122  font-size: 0.8125rem;6123  font-weight: 600;6124  letter-spacing: 0.06em;6125  padding: 11px 16px;6126  transition: background 0.15s ease, color 0.15s ease;6127}6128.peach-pro-upgrade-cta:hover {6129  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6130}61316132.peach-pro-key-divider {6133  display: flex;6134  align-items: center;6135  gap: 8px;6136  color: var(--peach-t2);6137  font-size: 0.5625rem;6138  letter-spacing: 0.1em;6139}6140.peach-pro-key-divider::before,6141.peach-pro-key-divider::after {6142  content: "";6143  flex: 1;6144  height: 1px;6145  background: var(--peach-border);6146}61476148/* Inline key entry row */6149.peach-pro-key-inline {6150  display: flex;6151  align-items: center;6152  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6153  border: 1px solid var(--peach-border);6154  border-radius: 8px;6155  overflow: hidden;6156}6157.peach-pro-key-inline-input {6158  flex: 1;6159  background: transparent;6160  border: none;6161  outline: none;6162  color: var(--peach-t1);6163  font-family: var(--font-mono);6164  font-size: 0.625rem;6165  letter-spacing: 0.06em;6166  padding: 9px 10px;6167}6168.peach-pro-key-inline-input::placeholder {6169  color: var(--peach-t2);6170}6171.peach-pro-key-apply {6172  background: transparent;6173  border: none;6174  border-left: 1px solid var(--peach-border);6175  color: var(--peach-t2);6176  font-family: var(--font-ui);6177  font-size: 0.5625rem;6178  font-weight: 600;6179  letter-spacing: 0.08em;6180  padding: 9px 10px;6181  cursor: pointer;6182  transition: color 0.15s ease;6183  flex-shrink: 0;6184}6185.peach-pro-key-apply:not(:disabled):hover {6186  color: var(--peach-accent);6187}6188.peach-pro-key-apply:disabled {6189  opacity: 0.35;6190  cursor: not-allowed;6191}61926193/* ── Pro tier — key ceremony ─────────────────────────────────── */6194.peach-pro-key-ceremony {6195  display: flex;6196  flex-direction: column;6197  align-items: center;6198  gap: 12px;6199  padding: 20px 4px 16px;6200}62016202.peach-pro-key-ceremony .peach-lock-rune-string {6203  font-size: 1rem;6204  gap: 12px;6205  flex: 0;6206  justify-content: center;6207}62086209.peach-pro-key-ceremony-label {6210  margin: 0;6211  font-size: 0.6875rem;6212  color: var(--peach-t2);6213  font-style: italic;6214  letter-spacing: 0.04em;6215}62166217.peach-pro-key-input {6218  font-family: var(--font-mono, monospace);6219  letter-spacing: 0.06em;6220  text-align: center;6221  width: 100%;6222  box-sizing: border-box;6223}62246225.peach-pro-key-error {6226  margin: 0;6227  font-size: 0.75rem;6228  text-align: center;6229  color: var(--peach-breach, #e55);6230  padding: 0;6231}62326233.peach-pro-key-activate {6234  width: 100%;6235  text-align: center;6236  box-sizing: border-box;6237  padding: 10px 20px;6238  font-size: 0.8125rem;6239}62406241.peach-pro-key-cancel {6242  background: transparent;6243  border: 0;6244  color: var(--peach-t2);6245  font-size: 0.6875rem;6246  cursor: pointer;6247  padding: 2px 8px;6248  transition: color 0.2s;6249}62506251.peach-pro-key-cancel:hover { color: var(--peach-accent); }62526253/* ── Pro tier — active state ─────────────────────────────────── */6254.peach-pro-active {6255  display: flex;6256  flex-direction: column;6257  align-items: center;6258  gap: 0;6259  padding: 8px 4px 16px;6260  min-height: 280px;6261}62626263.peach-pro-active-hero {6264  display: flex;6265  flex-direction: column;6266  align-items: center;6267  gap: 6px;6268  padding: 20px 0 8px;6269}62706271.peach-pro-active-mark-wrap {6272  display: flex;6273  align-items: center;6274  justify-content: center;6275  margin-bottom: 4px;6276}62776278.peach-pro-active-mark {6279  width: 60px;6280  height: 60px;6281}62826283.peach-pro-active-title {6284  font-family: var(--font-display, var(--font-ui));6285  font-size: 26px;6286  margin: 0;6287  color: var(--peach-t0);6288  letter-spacing: 0.01em;6289}62906291.peach-pro-active-since {6292  margin: 0;6293  font-size: 0.6875rem;6294  color: var(--peach-t2);6295  font-style: italic;6296}62976298.peach-pro-active-features {6299  display: flex;6300  flex-direction: column;6301  gap: 8px;6302  width: 100%;6303  padding: 14px 8px 0;6304  border-top: 1px solid var(--peach-border);6305  flex: 1;6306}63076308.peach-pro-active-feature {6309  display: flex;6310  align-items: center;6311  gap: 9px;6312}63136314.peach-pro-active-feature-mark {6315  color: var(--peach-accent);6316  font-size: 0.625rem;6317  opacity: 0.65;6318  flex-shrink: 0;6319}63206321.peach-pro-active-feature-name {6322  font-size: 0.75rem;6323  color: var(--peach-t1);6324}63256326.peach-pro-deactivate {6327  align-self: center;6328  background: transparent;6329  border: 0;6330  color: var(--peach-t3);6331  font-size: 0.625rem;6332  cursor: pointer;6333  padding: 8px 0 0;6334  margin-top: 16px;6335  letter-spacing: 0.03em;6336  transition: color 0.2s;6337}63386339.peach-pro-deactivate:hover { color: var(--peach-t2); }63406341.peach-pro-deactivate:disabled {6342  opacity: 0.5;6343  cursor: default;6344}63456346/* ── Pro card activation sparkles & thank-you ── */6347button.peach-pro-active-mark-wrap {6348  background: transparent;6349  border: 0;6350  padding: 0;6351  cursor: pointer;6352  position: relative;6353  overflow: visible;6354}63556356.peach-pro-sparks {6357  position: absolute;6358  inset: 0;6359  pointer-events: none;6360  overflow: visible;6361}63626363.peach-pro-spark {6364  position: absolute;6365  top: 50%;6366  left: 50%;6367  font-size: 9px;6368  line-height: 1;6369  opacity: 0;6370  transform: translate(-50%, -50%);6371  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;6372}63736374@keyframes peach-pro-spark-fly {6375  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }6376  25%  { opacity: 1; }6377  100% {6378    opacity: 0;6379    transform: translate(6380      calc(-50% + var(--spark-x, 0px)),6381      calc(-50% + var(--spark-y, -40px))6382    ) scale(0.8);6383  }6384}63856386.peach-pro-thankyou-text {6387  margin: 4px 0 0;6388  font-size: 0.6875rem;6389  font-style: italic;6390  color: currentColor;6391  opacity: 0;6392  animation: peach-pro-thankyou-flash 2.5s ease both;6393}63946395@keyframes peach-pro-thankyou-flash {6396  0%   { opacity: 0; transform: translateY(4px); }6397  15%  { opacity: 0.75; transform: translateY(0); }6398  75%  { opacity: 0.75; }6399  100% { opacity: 0; }6400}64016402/* ── Pro advanced health remediation queue ──────────────────── */6403.peach-health-pro-queue {6404  display: flex;6405  flex-direction: column;6406  gap: 10px;6407  padding: 12px;6408  margin: 0 0 12px;6409  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6410  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6411  border-radius: 10px;6412}64136414.peach-health-pro-queue-head {6415  display: flex;6416  justify-content: space-between;6417  align-items: baseline;6418}64196420.peach-health-pro-queue-title {6421  font-size: 0.75rem;6422  font-weight: 500;6423  letter-spacing: 0.04em;6424  text-transform: uppercase;6425  color: var(--peach-accent);6426}64276428.peach-health-pro-queue-score {6429  font-size: 0.6875rem;6430  color: var(--peach-t2);6431}64326433.peach-health-pro-row {6434  display: flex;6435  gap: 10px;6436  align-items: center;6437  padding: 8px 0;6438  border-top: 1px solid var(--peach-border);6439}64406441.peach-health-pro-row-info {6442  flex: 1;6443  display: flex;6444  flex-direction: column;6445  gap: 4px;6446  min-width: 0;6447}64486449.peach-health-pro-action {6450  flex: 0 0 auto;6451  padding: 4px 8px;6452  font-size: 0.5625rem;6453  letter-spacing: 0.08em;6454  text-transform: uppercase;6455}64566457.peach-health-pro-row-name {6458  font-size: 0.8125rem;6459  color: var(--peach-t0);6460  overflow: hidden;6461  text-overflow: ellipsis;6462  white-space: nowrap;6463}64646465.peach-health-pro-row-meta {6466  font-size: 0.6875rem;6467  color: var(--peach-t2);6468}64696470.peach-health-pro-bar {6471  height: 2px;6472  background: var(--peach-border);6473  border-radius: 2px;6474  overflow: hidden;6475  margin-top: 2px;6476}64776478.peach-health-pro-bar-fill {6479  height: 100%;6480  background: var(--peach-accent);6481  transition: width 200ms ease-out;6482}64836484/* ── Pro activation celebration ── */6485@keyframes peach-pro-bloom {6486  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6487  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6488                 drop-shadow(0 0 48px var(--peach-glow)); }6489  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6490}64916492@keyframes peach-pro-wordmark-in {6493  from { opacity: 0; transform: translateY(4px); }6494  to   { opacity: 1; transform: translateY(0); }6495}64966497@keyframes peach-pro-fade-out {6498  from { opacity: 1; }6499  to   { opacity: 0; }6500}65016502.peach-pro-celebration {6503  background:6504    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6505    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6506    var(--peach-bg);6507  border: 1px solid var(--peach-t3);6508  box-shadow:6509    0 2px 8px rgba(0,0,0,0.55),6510    0 14px 48px rgba(0,0,0,0.7),6511    0 0 0 1px rgba(240,232,216,0.04);6512  overflow: hidden;6513  width: 320px;6514  height: 520px;6515  display: flex;6516  flex-direction: column;6517  align-items: center;6518  justify-content: center;6519  gap: 8px;6520  padding: 32px 24px;6521  text-align: center;6522}65236524.peach-pro-celebration.is-leaving {6525  animation: peach-pro-fade-out 400ms ease forwards;6526}65276528.peach-pro-bloom-target {6529  display: flex;6530  align-items: center;6531  justify-content: center;6532  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6533  margin-bottom: 12px;6534}65356536.peach-pro-bloom-icon {6537  width: 48px;6538  height: 48px;6539}65406541.peach-pro-wordmark {6542  font-family: var(--font-display);6543  font-size: 22px;6544  font-style: italic;6545  font-weight: 400;6546  color: var(--peach-accent);6547  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6548}65496550.peach-pro-thankyou {6551  font-size: 0.75rem;6552  font-style: italic;6553  color: var(--peach-t2);6554  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6555}655665576558/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6559.peach-pro-notice-banner {6560  display: flex;6561  align-items: center;6562  gap: 8px;6563  padding: 7px 12px;6564  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6565  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6566  font-size: 0.6875rem;6567  color: var(--peach-t2);6568  font-family: "IBM Plex Mono", monospace;6569  flex-shrink: 0;6570}65716572.peach-pro-notice-link {6573  background: none;6574  border: none;6575  padding: 0;6576  cursor: pointer;6577  font-size: 0.6875rem;6578  color: var(--peach-accent);6579  font-family: "IBM Plex Mono", monospace;6580  margin-left: auto;6581  white-space: nowrap;6582}65836584.peach-pro-notice-close {6585  background: none;6586  border: none;6587  padding: 0 0 0 4px;6588  cursor: pointer;6589  font-size: 0.625rem;6590  color: var(--peach-t3);6591  line-height: 1;6592}65936594/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6595   Renders over whatever view is showing. 60-second expiry; the popup ticks6596   the countdown each second and clears the banner when it hits zero. */6597.peach-pair-request-banner {6598  display: flex;6599  flex-direction: column;6600  gap: 8px;6601  padding: 10px 12px;6602  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6603  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6604  font-family: "IBM Plex Mono", monospace;6605  flex-shrink: 0;6606}66076608.peach-pair-toast {6609  padding: 8px 12px;6610  font-family: "IBM Plex Mono", monospace;6611  font-size: 0.75rem;6612  color: var(--peach-t1);6613  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6614  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6615  flex-shrink: 0;6616  text-align: center;6617}66186619.peach-pair-toast strong {6620  color: var(--peach-t0);6621  font-weight: 500;6622}66236624.peach-pair-request-header {6625  display: flex;6626  align-items: center;6627  gap: 8px;6628  font-size: 0.75rem;6629  color: var(--peach-t1);6630}66316632.peach-pair-request-mark {6633  font-size: 0.875rem;6634  display: inline-flex;6635  align-items: center;6636}66376638.peach-pair-request-icon {6639  width: 1em;6640  height: 1em;6641}66426643.peach-pair-request-title {6644  font-weight: 600;6645  color: var(--peach-t0);6646}66476648.peach-pair-request-countdown {6649  margin-left: auto;6650  font-variant-numeric: tabular-nums;6651  color: var(--peach-t2);6652  font-size: 0.6875rem;6653}66546655.peach-pair-request-body {6656  margin: 0;6657  font-size: 0.75rem;6658  color: var(--peach-t1);6659  line-height: 1.4;6660}66616662.peach-pair-request-body strong {6663  color: var(--peach-t0);6664  font-weight: 600;6665}66666667.peach-pair-request-actions {6668  display: flex;6669  gap: 8px;6670  justify-content: flex-end;6671}66726673/* ─── First-run onboarding ──────────────────────────────────────────────6674   Three-card welcome shown once before vault creation. The PeachScript6675   rune background drifts behind everything at very low opacity — it's6676   atmosphere, not focus. The cards themselves use the same panel6677   language as the rest of the popup so the transition into NewVault is6678   continuous, not a jarring switch of visual register. */66796680.peach-onboarding {6681  position: relative;6682  display: flex;6683  flex-direction: column;6684  width: 100%;6685  height: 100%;6686  padding: 16px 16px 18px;6687  box-sizing: border-box;6688  overflow: hidden;6689  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6690}66916692.peach-onboarding.is-completing {6693  animation: peach-onboard-exit 200ms ease-out forwards;6694}66956696.peach-rune-background {6697  position: absolute;6698  inset: 0;6699  width: 100%;6700  height: 100%;6701  pointer-events: none;6702  z-index: 0;6703  transition: opacity 500ms ease-out;6704}67056706.peach-onboarding.is-completing .peach-rune-background {6707  opacity: 0;6708}67096710.peach-onboarding-header {6711  position: relative;6712  z-index: 1;6713  display: flex;6714  align-items: center;6715  margin-bottom: 14px;6716}67176718.peach-onboarding-card {6719  position: relative;6720  z-index: 1;6721  flex: 1;6722  display: flex;6723  flex-direction: column;6724  gap: 10px;6725  padding: 22px 20px;6726  border-radius: 16px;6727  border: 1px solid var(--peach-t3);6728  background:6729    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6730  backdrop-filter: blur(3px);6731  -webkit-backdrop-filter: blur(3px);6732  box-shadow:6733    inset 0 1px 0 rgba(240, 232, 216, 0.04),6734    0 12px 28px rgba(0, 0, 0, 0.12);6735  cursor: pointer;6736  user-select: none;6737  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6738}67396740.peach-onboarding-card.is-exiting {6741  animation: peach-card-out 120ms ease-in forwards;6742  pointer-events: none;6743}67446745.peach-onboarding-card-headline {6746  margin: 0;6747  font-family: var(--font-display);6748  font-style: italic;6749  font-weight: 400;6750  font-size: 22px;6751  line-height: 1.05;6752  color: var(--peach-t0);6753  white-space: pre-line;6754}67556756.peach-onboarding-divider {6757  margin: 4px 0 6px;6758  border: 0;6759  border-top: 1px solid var(--peach-t3);6760  width: 100%;6761}67626763.peach-onboarding-body {6764  margin: 0;6765  font-size: 0.8125rem;6766  line-height: 1.6;6767  color: var(--peach-t1);6768}67696770.peach-onboarding-warning {6771  display: flex;6772  align-items: flex-start;6773  gap: 8px;6774  margin: 6px 0 0;6775  padding-top: 8px;6776  border-top: 1px dashed var(--peach-t3);6777  font-size: 0.8125rem;6778  line-height: 1.5;6779  color: var(--peach-t1);6780}67816782.peach-onboarding-warning-icon {6783  color: var(--peach-accent);6784  font-size: 0.8125rem;6785  line-height: 1.5;6786  flex: 0 0 auto;6787}67886789.peach-onboarding-nav {6790  position: relative;6791  z-index: 1;6792  display: flex;6793  align-items: center;6794  justify-content: space-between;6795  margin-top: 12px;6796  padding: 0 4px;6797}67986799.peach-onboarding-dots {6800  display: flex;6801  align-items: center;6802  gap: 6px;6803}68046805.peach-onboarding-dot {6806  width: 6px;6807  height: 6px;6808  border-radius: 50%;6809  background: var(--peach-t2);6810  transition: width 200ms ease, height 200ms ease, background 200ms ease;6811}68126813.peach-onboarding-dot.is-active {6814  width: 8px;6815  height: 8px;6816  background: var(--peach-accent);6817}68186819.peach-onboarding-next {6820  background: none;6821  border: none;6822  padding: 4px 0;6823  cursor: pointer;6824  font-family: "IBM Plex Mono", monospace;6825  font-size: 0.6875rem;6826  letter-spacing: 0.04em;6827  color: var(--peach-t1);6828  transition: color 150ms ease;6829}68306831.peach-onboarding-next:hover {6832  color: var(--peach-t0);6833}68346835.peach-onboarding-next:disabled {6836  opacity: 0.5;6837  cursor: default;6838}68396840.peach-onboarding-back {6841  background: none;6842  border: none;6843  padding: 4px 0;6844  cursor: pointer;6845  font-family: "IBM Plex Mono", monospace;6846  font-size: 0.6875rem;6847  letter-spacing: 0.04em;6848  color: var(--peach-t2);6849  transition: color 150ms ease;6850}68516852.peach-onboarding-back:hover {6853  color: var(--peach-t0);6854}68556856.peach-onboarding-back:disabled {6857  opacity: 0.5;6858  cursor: default;6859}68606861/* Reserve back-button width on the first card so the dots stay centred */6862.peach-onboarding-back-spacer {6863  width: 44px;6864}68656866.peach-onboarding-mobile-card-buttons {6867  display: flex;6868  flex-direction: column;6869  gap: 8px;6870  margin-top: 16px;6871}68726873@keyframes peach-onboard-enter {6874  from { opacity: 0; transform: translateY(20px); }6875  to   { opacity: 1; transform: translateY(0); }6876}68776878@keyframes peach-onboard-exit {6879  from { opacity: 1; }6880  to   { opacity: 0; }6881}68826883@keyframes peach-card-in {6884  from { opacity: 0; transform: translateX(12px); }6885  to   { opacity: 1; transform: translateX(0); }6886}68876888@keyframes peach-card-out {6889  from { opacity: 1; transform: translateX(0); }6890  to   { opacity: 0; transform: translateX(-12px); }6891}68926893/* ─── New vault screen — matched to onboarding card language ─────────── */68946895.peach-newvault {6896  position: relative;6897  display: flex;6898  flex-direction: column;6899  gap: 12px;6900  padding: 16px 16px 18px;6901  overflow: hidden;6902}69036904/* Suppress the warm-blob ambient art inherited from .lock-screen — the6905   new vault card now carries the visual weight. */6906.peach-newvault::before {6907  content: none;6908}69096910.peach-newvault-header {6911  position: relative;6912  z-index: 2;6913  display: flex;6914  align-items: center;6915  gap: 10px;6916  margin-bottom: 2px;6917}69186919.peach-newvault-back {6920  display: inline-flex;6921  align-items: center;6922  gap: 4px;6923  background: transparent;6924  border: none;6925  color: var(--peach-t2);6926  font-family: "IBM Plex Mono", monospace;6927  font-size: 0.625rem;6928  letter-spacing: 0.06em;6929  cursor: pointer;6930  padding: 4px 6px;6931  border-radius: 6px;6932  transition: color 120ms ease, background 120ms ease;6933}69346935.peach-newvault-back:hover {6936  color: var(--peach-t0);6937  background: rgba(240, 232, 216, 0.04);6938}69396940.peach-newvault-mark {6941  position: absolute;6942  right: -12px;6943  top: 6px;6944  width: 110px;6945  height: 110px;6946  pointer-events: none;6947  opacity: 0.10;6948  filter: saturate(0.9);6949  z-index: 0;6950}6951.peach-newvault-mark-art {6952  width: 100%;6953  height: 100%;6954}6955.peach-newvault-mark-art path:nth-child(1) {6956  fill: rgba(123, 144, 96, 0.88);6957}6958.peach-newvault-mark-art path:nth-child(2) {6959  stroke: rgba(94, 122, 66, 0.95);6960}69616962.peach-newvault-card {6963  position: relative;6964  z-index: 1;6965  display: flex;6966  flex-direction: column;6967  gap: 12px;6968  padding: 22px 20px 18px;6969  border-radius: 16px;6970  border: 1px solid var(--peach-t3);6971  background:6972    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6973  backdrop-filter: blur(3px);6974  -webkit-backdrop-filter: blur(3px);6975  box-shadow:6976    inset 0 1px 0 rgba(240, 232, 216, 0.04),6977    0 12px 28px rgba(0, 0, 0, 0.12);6978  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6979}69806981.peach-newvault-headline {6982  margin: 0;6983  font-family: var(--font-display);6984  font-style: italic;6985  font-weight: 400;6986  font-size: 24px;6987  line-height: 1.05;6988  color: var(--peach-t0);6989  white-space: pre-line;6990}69916992.peach-newvault-divider {6993  margin: 2px 0 4px;6994  border: 0;6995  border-top: 1px solid var(--peach-t3);6996  width: 100%;6997}69986999.peach-newvault-field {7000  display: flex;7001  flex-direction: column;7002  gap: 4px;7003}70047005.peach-newvault-label-row {7006  display: flex;7007  align-items: center;7008  justify-content: space-between;7009}70107011/* Monospace input scaled to the card. Replaces the 22px unlock-input7012   so the placeholder no longer overflows and the field reads as part7013   of the same surface as the body copy. */7014.peach-newvault-input {7015  font-size: 0.875rem;7016  letter-spacing: 0.18em;7017  padding: 8px 0;7018}7019.peach-newvault-input::placeholder {7020  letter-spacing: 0.18em;7021  color: var(--peach-t2);7022}70237024.peach-newvault-hint {7025  margin: 2px 0 0;7026  font-family: "IBM Plex Mono", monospace;7027  font-size: 0.625rem;7028  color: var(--peach-t2);7029  letter-spacing: 0.04em;7030}70317032.peach-newvault-submit {7033  margin-top: 4px;7034}70357036.peach-newvault-warning {7037  display: flex;7038  align-items: flex-start;7039  gap: 8px;7040  margin: 4px 0 0;7041  padding-top: 10px;7042  border-top: 1px dashed var(--peach-t3);7043  font-size: 0.75rem;7044  line-height: 1.5;7045  color: var(--peach-t1);7046}70477048.peach-newvault-warning-icon {7049  color: var(--peach-accent);7050  font-size: 0.8125rem;7051  line-height: 1.4;7052  flex: 0 0 auto;7053}70547055.peach-newvault-footer {7056  position: relative;7057  z-index: 1;7058  display: flex;7059  flex-direction: column;7060  gap: 4px;7061  padding: 4px 4px 0;7062}70637064/* Settings body — warm accent gradient gives the glass something to blur against */7065.peach-settings-body {7066  background:7067    radial-gradient(7068      ellipse at 30% 20%,7069      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7070      transparent 60%7071    );7072}70737074/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7075/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7076 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7077 * (replacing the vault from a backup file) and "hazard" for actions that7078 * are absolutely irreversible (Panic). Both use the same card scaffold so7079 * they read as a pair, but the colour family signals the severity at a7080 * glance — yellow for caution, red for don't.7081 */7082.peach-danger-card {7083  --danger-tint: 235, 158, 52; /* amber */7084  display: flex;7085  flex-direction: column;7086  gap: 8px;7087  padding: 14px;7088  margin-top: 10px;7089  border-radius: 12px;7090  border: 1px solid rgba(var(--danger-tint), 0.32);7091  background:7092    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7093    rgba(var(--danger-tint), 0.04);7094  box-shadow:7095    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7096    0 0 24px rgba(var(--danger-tint), 0.04);7097  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7098}70997100.peach-danger-card:hover {7101  border-color: rgba(var(--danger-tint), 0.55);7102  box-shadow:7103    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7104    0 0 36px rgba(var(--danger-tint), 0.10);7105}71067107.peach-danger-card--hazard {7108  --danger-tint: 220, 38, 38; /* red */7109}71107111.peach-danger-card-head {7112  display: flex;7113  align-items: center;7114  gap: 10px;7115}71167117.peach-danger-card-glyph {7118  width: 28px;7119  height: 28px;7120  flex-shrink: 0;7121  display: flex;7122  align-items: center;7123  justify-content: center;7124  border-radius: 8px;7125  background: rgba(var(--danger-tint), 0.12);7126  color: rgba(var(--danger-tint), 0.95);7127  font-size: 1rem;7128  line-height: 1;7129}71307131.peach-danger-card-title {7132  margin: 0;7133  font-size: 0.8125rem;7134  font-weight: 600;7135  color: rgba(var(--danger-tint), 0.92);7136  letter-spacing: 0.01em;7137}71387139.peach-danger-card-copy {7140  margin: 0;7141  font-size: 0.6875rem;7142  line-height: 1.5;7143  color: var(--peach-t2);7144}71457146.peach-danger-card-button {7147  width: 100%;7148  padding: 9px;7149  margin-top: 4px;7150  background: transparent;7151  border: 1px solid rgba(var(--danger-tint), 0.45);7152  border-radius: 8px;7153  color: rgba(var(--danger-tint), 0.9);7154  font-size: 0.75rem;7155  font-weight: 500;7156  letter-spacing: 0.02em;7157  cursor: pointer;7158  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7159}71607161.peach-danger-card-button:hover {7162  background: rgba(var(--danger-tint), 0.10);7163  border-color: rgba(var(--danger-tint), 0.75);7164  color: rgb(var(--danger-tint));7165}71667167/* ── Panic flow (three-step destruction) ───────────────────────────────── */7168.peach-panic {7169  display: flex;7170  flex-direction: column;7171  flex: 1;7172  min-height: 0;7173  padding: 28px 20px 20px;7174  gap: 18px;7175  overflow-y: auto;7176  scrollbar-width: none;7177  -ms-overflow-style: none;7178}71797180.peach-panic::-webkit-scrollbar { display: none; }71817182.peach-panic-step2 {7183  background: rgba(220, 38, 38, 0.04);7184}71857186.peach-panic-step3 {7187  position: relative;7188  background: #0f0505;7189  color: #ffffff;7190  overflow: hidden;7191}71927193.peach-panic-rune-bg {7194  position: absolute;7195  inset: 0;7196  opacity: 0.22;7197  pointer-events: none;7198  overflow: hidden;7199}72007201.peach-panic-rune-bg canvas {7202  width: 100% !important;7203  height: 100% !important;7204}72057206.peach-panic-icon {7207  font-size: 32px;7208  color: rgb(220, 38, 38);7209  line-height: 1;7210}72117212.peach-panic-title {7213  margin: 0;7214  font-size: 18px;7215  font-weight: 500;7216  color: var(--peach-t1);7217}72187219.peach-panic-title--severe {7220  font-size: 20px;7221  font-weight: 700;7222  color: rgb(220, 38, 38);7223}72247225.peach-panic-body {7226  margin: 0;7227  font-size: 0.8125rem;7228  line-height: 1.55;7229  color: var(--peach-t2);7230}72317232.peach-panic-body--severe {7233  color: rgba(220, 38, 38, 0.85);7234}72357236.peach-panic-body--final {7237  font-size: 1rem;7238  font-weight: 700;7239  color: rgb(255, 80, 80);7240  line-height: 1.4;7241}72427243.peach-panic-body--final-intro {7244  font-size: 1rem;7245  color: #ffffff;7246  font-weight: 400;7247}72487249.peach-panic-divider {7250  height: 1px;7251  background: rgba(255, 255, 255, 0.08);7252  margin: 4px 0;7253}72547255.peach-panic-confirm-input {7256  width: 100%;7257  padding: 10px 12px;7258  background: rgba(255, 255, 255, 0.02);7259  border: 1px solid rgba(220, 38, 38, 0.4);7260  border-radius: 8px;7261  color: var(--peach-t1);7262  font-family: "IBM Plex Mono", monospace;7263  font-size: 0.875rem;7264  letter-spacing: 0.12em;7265  text-transform: uppercase;7266}72677268.peach-panic-confirm-input:focus {7269  outline: none;7270  border-color: rgb(220, 38, 38);7271}72727273.peach-panic-confirm-input--match {7274  border-color: rgb(220, 38, 38);7275  color: rgb(220, 38, 38);7276}72777278.peach-panic-confirm-label {7279  font-size: 0.6875rem;7280  color: var(--peach-t2);7281  margin: 0 0 -8px;7282  letter-spacing: 0.06em;7283}72847285.peach-panic-actions {7286  display: flex;7287  flex-direction: column;7288  gap: 10px;7289  margin-top: auto;7290}72917292.peach-panic-button {7293  width: 100%;7294  padding: 12px;7295  border-radius: 8px;7296  font-size: 0.8125rem;7297  cursor: pointer;7298  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7299}73007301.peach-panic-button--primary {7302  background: var(--peach-accent);7303  border: 1px solid var(--peach-accent);7304  color: #ffffff;7305  font-weight: 600;7306}73077308.peach-panic-button--primary:hover {7309  background: color-mix(in srgb, var(--peach-accent) 88%, white);7310}73117312.peach-panic-button--danger {7313  background: rgb(220, 38, 38);7314  border: 1px solid rgb(220, 38, 38);7315  color: #ffffff;7316  font-weight: 600;7317}73187319.peach-panic-button--danger:disabled {7320  opacity: 0.35;7321  cursor: not-allowed;7322}73237324.peach-panic-button--ghost {7325  background: transparent;7326  border: 1px solid rgba(255, 255, 255, 0.18);7327  color: var(--peach-t2);7328}73297330.peach-panic-button--ghost:hover {7331  border-color: rgba(255, 255, 255, 0.32);7332  color: var(--peach-t1);7333}73347335.peach-panic-link {7336  background: transparent;7337  border: none;7338  padding: 4px 0;7339  color: rgba(220, 38, 38, 0.65);7340  font-size: 0.75rem;7341  cursor: pointer;7342  text-align: left;7343  text-decoration: underline;7344  text-underline-offset: 3px;7345}73467347.peach-panic-link:hover {7348  color: rgb(220, 38, 38);7349}73507351.peach-panic-bar {7352  background: rgb(220, 38, 38);7353  padding: 16px 20px;7354  margin: -28px -20px 0;7355  text-align: center;7356  font-size: 0.8125rem;7357  font-weight: 700;7358  letter-spacing: 0.12em;7359  color: #ffffff;7360}73617362.peach-panic-final-button {7363  width: 100%;7364  padding: 14px;7365  background: rgb(220, 38, 38);7366  border: none;7367  border-radius: 8px;7368  color: #ffffff;7369  font-size: 0.875rem;7370  font-weight: 700;7371  letter-spacing: 0.08em;7372  text-transform: uppercase;7373  cursor: pointer;7374  animation: peach-panic-pulse 2s ease-in-out infinite;7375}73767377.peach-settings-license {7378  margin-top: 10px;7379  padding-top: 10px;7380  border-top: 1px solid var(--peach-t3);7381}73827383.peach-settings-label {7384  font-size: 0.625rem;7385  letter-spacing: 0.08em;7386  color: var(--peach-t3);7387  display: block;7388  margin-bottom: 6px;7389}73907391.peach-settings-license-row {7392  display: flex;7393  align-items: center;7394  justify-content: space-between;7395  gap: 8px;7396}73977398.peach-settings-license-key {7399  font-family: 'IBM Plex Mono', monospace;7400  font-size: 0.75rem;7401  color: var(--peach-t0);7402  letter-spacing: 0.04em;7403  word-break: break-all;7404  flex: 1;7405  min-width: 0;7406}74077408.peach-settings-license-key--masked {7409  font-family: 'IBM Plex Mono', monospace;7410  font-size: 0.6rem;7411  color: var(--peach-t1);7412  letter-spacing: 0.18em;7413  user-select: none;7414}74157416.peach-settings-license-actions {7417  display: flex;7418  align-items: center;7419  gap: 2px;7420  flex-shrink: 0;7421}74227423.peach-settings-license-copy {7424  font-size: 0.6875rem;7425  color: var(--peach-accent);7426  background: transparent;7427  border: none;7428  cursor: pointer;7429  padding: 4px 8px;7430  border-radius: 4px;7431  flex-shrink: 0;7432  transition: opacity 150ms ease;7433}74347435.peach-settings-license-copy:hover {7436  opacity: 0.75;7437}74387439.peach-settings-license-toggle {7440  display: flex;7441  align-items: center;7442  justify-content: center;7443  background: transparent;7444  border: none;7445  cursor: pointer;7446  padding: 4px 6px;7447  border-radius: 4px;7448  color: var(--peach-t2);7449  transition: color 150ms ease;7450}74517452.peach-settings-license-toggle:hover {7453  color: var(--peach-t1);7454}74557456@keyframes peach-panic-pulse {7457  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7458  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7459}74607461[data-motion="reduce"] .peach-panic-final-button {7462  animation: none;7463}74647465/* Vault History — Settings → Vault sub-view */74667467.peach-history-list {7468  border: 1px solid var(--peach-border);7469  border-radius: 8px;7470  overflow: hidden;7471  margin: 8px 0 4px;7472}74737474.peach-history-row {7475  display: flex;7476  align-items: center;7477  justify-content: space-between;7478  padding: 9px 12px;7479  gap: 10px;7480  border-bottom: 1px solid var(--peach-border);7481}74827483.peach-history-row:last-child {7484  border-bottom: none;7485}74867487.peach-history-meta {7488  display: flex;7489  flex-direction: column;7490  gap: 2px;7491  min-width: 0;7492  flex: 1;7493}74947495.peach-history-time {7496  font-size: 0.75rem;7497  font-family: 'IBM Plex Mono', ui-monospace, monospace;7498  color: var(--peach-t0);7499  white-space: nowrap;7500  overflow: hidden;7501  text-overflow: ellipsis;7502}75037504.peach-history-sub {7505  font-size: 0.625rem;7506  color: var(--peach-t2);7507  letter-spacing: 0.06em;7508  text-transform: uppercase;7509  white-space: nowrap;7510  overflow: hidden;7511  text-overflow: ellipsis;7512}75137514.peach-history-btn {7515  flex-shrink: 0;7516  white-space: nowrap;7517  min-width: 56px;7518  text-align: center;7519}75207521.peach-history-btn.is-busy {7522  opacity: 0.65;7523}75247525.peach-history-footer {7526  font-size: 0.625rem;7527  color: var(--peach-t3);7528  letter-spacing: 0.05em;7529  text-align: right;7530  margin: 0;7531  padding: 2px 0 0;7532}75337534/* ── Context menu + swipe-copy flash ─────────────────────── */7535.peach-context-menu-backdrop {7536  position: fixed;7537  inset: 0;7538  background: rgba(0, 0, 0, 0.45);7539  z-index: 100;7540  display: flex;7541  align-items: flex-end;7542  justify-content: center;7543  animation: peach-ctx-fade 140ms ease both;7544}7545.peach-context-menu {7546  width: min(360px, calc(100vw - 24px));7547  margin-bottom: max(env(safe-area-inset-bottom), 12px);7548  background: var(--peach-bg);7549  border: 1px solid var(--peach-t3);7550  border-radius: 14px;7551  padding: 6px;7552  display: flex;7553  flex-direction: column;7554  gap: 2px;7555  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7556  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7557}7558@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7559@keyframes peach-ctx-rise {7560  from { transform: translateY(16px); opacity: 0; }7561  to   { transform: translateY(0);    opacity: 1; }7562}7563.peach-context-menu-item {7564  background: transparent;7565  color: var(--peach-t0);7566  border: 0;7567  border-radius: 10px;7568  padding: 12px 14px;7569  text-align: left;7570  font: inherit;7571  cursor: pointer;7572}7573.peach-context-menu-item:hover,7574.peach-context-menu-item:focus-visible {7575  background: var(--peach-t3);7576}7577.peach-context-menu-item--danger {7578  color: var(--peach-health-bad, #d96868);7579}7580.peach-context-menu-item--cancel {7581  color: var(--peach-t2);7582  margin-top: 4px;7583  border-top: 1px solid var(--peach-t3);7584  border-radius: 0 0 10px 10px;7585}75867587/* Swipe-to-copy flash */7588.peach-entry-row.is-copy-flash {7589  animation: peach-copy-flash 600ms ease both;7590}7591@keyframes peach-copy-flash {7592  0%   { background: transparent; }7593  20%  { background: rgba(217, 153, 51, 0.32); }7594  100% { background: transparent; }7595}75967597html { font-size: 16px; }75987599/* ── Recovery word entry ─────────────────────────────────────────── */7600.peach-lock-recover-link {7601  display: block;7602  width: 100%;7603  margin-top: 12px;7604  background: none;7605  border: none;7606  font-family: "IBM Plex Mono", monospace;7607  font-size: 0.625rem;7608  letter-spacing: 0.06em;7609  color: var(--peach-t2);7610  cursor: pointer;7611  text-align: center;7612  padding: 4px;7613  transition: color 120ms ease;7614}7615.peach-lock-recover-link:hover {7616  color: var(--peach-t0);7617}76187619.lock-screen--recovery {7620  display: flex;7621  flex-direction: column;7622  align-items: stretch;7623  padding: 12px 20px 24px;7624  overflow: hidden;7625}76267627.peach-recovery-nav {7628  display: flex;7629  align-items: center;7630  position: relative;7631  z-index: 1;7632  margin-bottom: 4px;7633}76347635/* Mask runes to the top decorative band only — keep inputs and the7636   bottom CTA button clear. The bottom of the popup is reserved for7637   submit buttons; rendering runes there overlaps the button glyph. */7638.peach-rune-background--recovery {7639  -webkit-mask-image: linear-gradient(7640    to bottom,7641    black 0px, black 85px,7642    transparent 110px,7643    transparent 100%7644  );7645  mask-image: linear-gradient(7646    to bottom,7647    black 0px, black 85px,7648    transparent 110px,7649    transparent 100%7650  );7651}76527653.peach-recovery-header {7654  text-align: center;7655  margin-bottom: 16px;7656  margin-top: 4px;7657}7658.peach-recovery-header .peach-onboarding-headline {7659  font-size: 1.25rem;7660  font-weight: 300;7661  letter-spacing: 0.02em;7662  margin: 0 0 4px;7663}7664.peach-recovery-header .peach-hint {7665  font-family: "IBM Plex Mono", monospace;7666  font-size: 0.625rem;7667  color: var(--peach-t2);7668  letter-spacing: 0.04em;7669  margin: 0;7670}76717672/* 12-word grid: 2 columns × 6 rows */7673.peach-recovery-grid {7674  display: grid;7675  grid-template-columns: repeat(2, 1fr);7676  gap: 12px 20px;7677  width: 100%;7678  margin-bottom: 0;7679}76807681.peach-recovery-word-slot {7682  display: flex;7683  align-items: center;7684  gap: 6px;7685  min-width: 0;7686}76877688.peach-recovery-word-index {7689  font-family: "IBM Plex Mono", monospace;7690  font-size: 0.5rem;7691  color: rgba(255, 255, 255, 0.35);7692  min-width: 14px;7693  flex-shrink: 0;7694  text-align: right;7695  letter-spacing: 0.04em;7696}76977698.peach-recovery-word-input {7699  flex: 1;7700  min-width: 0;7701  background: transparent;7702  border: none;7703  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7704  color: var(--peach-t0);7705  font-family: "IBM Plex Mono", monospace;7706  font-size: 0.6875rem;7707  letter-spacing: 0.06em;7708  padding: 5px 2px 4px;7709  outline: none;7710  text-transform: lowercase;7711  transition: border-color 120ms ease;7712}7713.peach-recovery-word-input::placeholder {7714  color: rgba(255, 255, 255, 0.18);7715}7716.peach-recovery-word-input:focus {7717  border-bottom-color: var(--peach-accent);7718}77197720.peach-recovery-submit {7721  width: 100%;7722  margin-top: auto;7723}77247725.peach-recovery-new-password-form {7726  width: 100%;7727  display: flex;7728  flex-direction: column;7729  gap: 16px;7730  margin-bottom: 8px;7731}7732.peach-recovery-new-password-form .peach-newvault-field {7733  display: flex;7734  flex-direction: column;7735  gap: 4px;7736}77377738/* ── Recovery words display (post-create) ────────────────────────── */7739.lock-screen--recovery-display {7740  display: flex;7741  flex-direction: column;7742  align-items: stretch;7743  padding: 0 20px 20px;7744  min-height: 0;7745  overflow-y: auto;7746}77477748.peach-recovery-words-display {7749  width: 100%;7750  margin-bottom: 16px;7751  border: 1px solid var(--peach-t3);7752  border-radius: 8px;7753  padding: 12px 14px;7754  background: rgba(245, 240, 234, 0.04);7755}77567757.peach-recovery-words-label {7758  font-family: "IBM Plex Mono", monospace;7759  font-size: 0.5rem;7760  letter-spacing: 0.08em;7761  color: var(--peach-t2);7762  text-transform: uppercase;7763  margin-bottom: 10px;7764}77657766.peach-recovery-word-list {7767  list-style: none;7768  margin: 0;7769  padding: 0;7770  display: grid;7771  grid-template-columns: repeat(2, 1fr);7772  gap: 6px 16px;7773}77747775.peach-recovery-word-item {7776  display: flex;7777  align-items: baseline;7778  gap: 5px;7779}77807781.peach-recovery-word-num {7782  font-family: "IBM Plex Mono", monospace;7783  font-size: 0.5rem;7784  color: var(--peach-t2);7785  width: 14px;7786  flex: 0 0 14px;7787  text-align: right;7788  letter-spacing: 0.04em;7789  font-variant-numeric: tabular-nums;7790}77917792.peach-recovery-download-btn {7793  display: block;7794  margin: 10px auto 0;7795  padding: 4px 10px;7796  background: transparent;7797  border: 1px solid var(--peach-border);7798  border-radius: 6px;7799  color: var(--peach-t2);7800  font-family: "IBM Plex Mono", monospace;7801  font-size: 0.5625rem;7802  letter-spacing: 0.06em;7803  text-transform: lowercase;7804  cursor: pointer;7805  transition: border-color 0.15s, color 0.15s;7806}78077808.peach-recovery-download-btn:hover {7809  border-color: var(--peach-accent);7810  color: var(--peach-t0);7811}78127813.peach-recovery-word-text {7814  font-family: "IBM Plex Mono", monospace;7815  font-size: 0.6875rem;7816  letter-spacing: 0.06em;7817  color: var(--peach-t0);7818  text-transform: lowercase;7819}78207821.peach-hint--warning {7822  color: var(--peach-accent);7823  font-style: italic;7824}7825.peach-hint--success {7826  color: var(--peach-t2);7827  font-family: "IBM Plex Mono", monospace;7828  font-size: 0.625rem;7829  letter-spacing: 0.06em;7830}78317832/* Confirmation step */7833.peach-recovery-confirm {7834  width: 100%;7835  flex: 1;7836  display: flex;7837  flex-direction: column;7838}7839.peach-recovery-confirm-label {7840  font-family: "IBM Plex Mono", monospace;7841  font-size: 0.5625rem;7842  letter-spacing: 0.04em;7843  color: var(--peach-t2);7844  text-align: center;7845  margin: 0 0 12px;7846}7847.peach-recovery-confirm-fields {7848  display: flex;7849  flex-direction: column;7850  gap: 14px;7851  margin-bottom: 10px;7852}7853.peach-recovery-confirm-field {7854  display: flex;7855  align-items: center;7856  gap: 8px;7857}7858.peach-recovery-confirm-num {7859  font-family: "IBM Plex Mono", monospace;7860  font-size: 0.5rem;7861  color: var(--peach-t2);7862  min-width: 44px;7863  letter-spacing: 0.04em;7864}7865.peach-recovery-confirm-input {7866  flex: 1;7867  background: transparent;7868  border: none;7869  border-bottom: 1px solid var(--peach-t3);7870  color: var(--peach-t0);7871  font-family: "IBM Plex Mono", monospace;7872  font-size: 0.6875rem;7873  letter-spacing: 0.06em;7874  padding: 4px 2px 3px;7875  outline: none;7876  text-transform: lowercase;7877  transition: border-color 120ms ease;7878}7879.peach-recovery-confirm-input:focus {7880  border-bottom-color: var(--peach-accent);7881}7882.peach-recovery-confirm-input:disabled {7883  opacity: 0.4;7884  cursor: not-allowed;7885}7886.peach-recovery-confirm-btn {7887  width: 100%;7888  margin-top: auto;7889}78907891/* ============================================================7892   Sync info sheet7893   ============================================================ */78947895.peach-sync-info-backdrop {7896  position: fixed;7897  inset: 0;7898  z-index: 200;7899  background: rgba(0, 0, 0, 0.55);7900  display: flex;7901  align-items: flex-end;7902  animation: peach-fade-in 200ms ease forwards;7903}79047905@keyframes peach-fade-in {7906  from { opacity: 0; }7907  to   { opacity: 1; }7908}79097910.peach-sync-info-sheet {7911  width: 100%;7912  background: var(--peach-bg-card, var(--peach-bg));7913  border-top-left-radius: 20px;7914  border-top-right-radius: 20px;7915  padding: 12px 24px 32px;7916  display: flex;7917  flex-direction: column;7918  gap: 20px;7919  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;7920}79217922@keyframes peach-sheet-up {7923  from { transform: translateY(100%); }7924  to   { transform: translateY(0); }7925}79267927.peach-sync-info-handle {7928  width: 36px;7929  height: 4px;7930  border-radius: 2px;7931  background: var(--peach-border);7932  margin: 0 auto 4px;7933  flex-shrink: 0;7934}79357936.peach-sync-info-title {7937  font-family: 'Cormorant Garamond', serif;7938  font-style: italic;7939  font-size: 26px;7940  font-weight: 600;7941  color: var(--peach-t0);7942  margin: 0;7943  line-height: 1.2;7944}79457946.peach-sync-info-body {7947  display: flex;7948  flex-direction: column;7949  gap: 14px;7950}79517952.peach-sync-info-point {7953  display: flex;7954  gap: 12px;7955  align-items: flex-start;7956  font-size: 14px;7957  color: var(--peach-t2);7958  line-height: 1.6;7959  margin: 0;7960}79617962.peach-sync-info-icon {7963  color: var(--peach-accent);7964  font-size: 16px;7965  flex-shrink: 0;7966  margin-top: 1px;7967}79687969.peach-sync-info-actions {7970  display: flex;7971  flex-direction: column;7972  gap: 12px;7973  margin-top: 4px;7974}79757976.peach-sync-info-pro-link {7977  background: none;7978  border: none;7979  font-size: 13px;7980  color: var(--peach-t3);7981  cursor: pointer;7982  padding: 0;7983  font-family: inherit;7984  text-align: center;7985  transition: color 150ms ease;7986}79877988.peach-sync-info-pro-link:hover {7989  color: var(--peach-accent);7990}79917992.peach-btn--full {7993  width: 100%;7994}79957996/* ── Sync screen ── */79977998.peach-sync-coming-soon {7999  display: flex;8000  align-items: flex-start;8001  gap: 10px;8002  padding: 12px 14px;8003  background: var(--peach-s1);8004  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8005  border-radius: 10px;8006}8007.peach-sync-coming-soon__icon {8008  flex-shrink: 0;8009  color: var(--peach-accent);8010  margin-top: 1px;8011  line-height: 0;8012}8013.peach-sync-coming-soon__title {8014  font-family: 'Cormorant Garamond', serif;8015  font-weight: 500;8016  font-size: 13px;8017  color: var(--peach-accent);8018  margin: 0 0 5px;8019  line-height: 1.3;8020}8021.peach-sync-coming-soon__body {8022  font-size: 12px;8023  color: var(--peach-t1);8024  line-height: 1.55;8025  margin: 0;8026}80278028.peach-sync-screen {8029  display: flex;8030  flex-direction: column;8031  height: 100%;8032}80338034.peach-sync-content {8035  flex: 1;8036  overflow-y: auto;8037  padding: 24px 20px 40px;8038  display: flex;8039  flex-direction: column;8040  gap: 24px;8041}80428043/* Intro (State A) */8044.peach-sync-headline {8045  font-family: 'Cormorant Garamond', serif;8046  font-style: italic;8047  font-size: 28px;8048  font-weight: 600;8049  color: var(--peach-t0);8050  margin: 0 0 10px;8051  line-height: 1.2;8052}80538054.peach-sync-intro-body {8055  font-size: 14px;8056  color: var(--peach-t1);8057  line-height: 1.6;8058  margin: 0;8059}80608061.peach-sync-pro-note {8062  display: flex;8063  flex-direction: column;8064  gap: 8px;8065  background: var(--peach-t3);8066  border-radius: 10px;8067  padding: 12px 14px;8068}80698070.peach-sync-pro-note-text {8071  font-size: 12px;8072  color: var(--peach-t2);8073  line-height: 1.5;8074  margin: 0;8075}80768077.peach-sync-pro-link {8078  background: none;8079  border: none;8080  font-size: 12px;8081  color: var(--peach-accent);8082  cursor: pointer;8083  padding: 0;8084  font-family: inherit;8085  text-align: left;8086}80878088/* Status (State C) */8089.peach-sync-status {8090  padding: 12px 0;8091  border-bottom: 1px solid var(--peach-border);8092}80938094.peach-sync-status-row {8095  display: flex;8096  align-items: center;8097  gap: 8px;8098}80998100.peach-sync-dot {8101  width: 7px;8102  height: 7px;8103  border-radius: 50%;8104  flex-shrink: 0;8105}81068107.peach-sync-dot--green { background: var(--peach-health-ok); }8108.peach-sync-dot--amber { background: var(--peach-accent); }81098110.peach-sync-status-text {8111  font-family: 'IBM Plex Mono', monospace;8112  font-size: 11px;8113  color: var(--peach-t2);8114}81158116/* Paired devices */8117.peach-sync-section {8118  display: flex;8119  flex-direction: column;8120  gap: 2px;8121}81228123.peach-sync-section-label {8124  font-family: 'IBM Plex Mono', monospace;8125  font-size: 10px;8126  letter-spacing: 0.1em;8127  color: var(--peach-t3);8128  margin: 0 0 10px;8129}81308131.peach-sync-device-row {8132  display: flex;8133  justify-content: space-between;8134  align-items: baseline;8135  padding: 10px 0;8136  border-bottom: 1px solid var(--peach-border);8137  gap: 12px;8138}81398140.peach-sync-device-name {8141  font-size: 14px;8142  color: var(--peach-t1);8143}81448145.peach-sync-device-meta {8146  font-family: 'IBM Plex Mono', monospace;8147  font-size: 11px;8148  color: var(--peach-t3);8149  white-space: nowrap;8150}81518152.peach-sync-hub-note {8153  padding: 14px 16px;8154  border: 1px solid var(--peach-border);8155  border-radius: 10px;8156  display: flex;8157  flex-direction: column;8158  gap: 6px;8159  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8160}81618162.peach-sync-hub-note-title {8163  font-size: 13px;8164  font-weight: 600;8165  color: var(--peach-t0);8166  margin: 0;8167}81688169.peach-sync-hub-note-body {8170  font-size: 12px;8171  color: var(--peach-t2);8172  line-height: 1.6;8173  margin: 0;8174}81758176/* Action buttons */8177.peach-sync-actions {8178  display: flex;8179  gap: 10px;8180  flex-wrap: wrap;8181}81828183/* Upgrade prompt (State B) */8184.peach-sync-upgrade {8185  display: flex;8186  flex-direction: column;8187  gap: 12px;8188  padding: 16px;8189  border: 1px solid var(--peach-border);8190  border-radius: 10px;8191}81928193.peach-sync-upgrade-text {8194  font-size: 13px;8195  color: var(--peach-t2);8196  line-height: 1.6;8197  margin: 0;8198}81998200/* Network note */8201.peach-sync-network-note {8202  font-size: 12px;8203  color: var(--peach-t3);8204  line-height: 1.6;8205  margin: 0;8206}82078208/* Advanced */8209.peach-sync-advanced {8210  margin-top: auto;8211  padding-top: 16px;8212  border-top: 1px solid var(--peach-border);8213}82148215.peach-sync-advanced-toggle {8216  display: flex;8217  align-items: center;8218  gap: 8px;8219  background: none;8220  border: none;8221  font-family: 'IBM Plex Mono', monospace;8222  font-size: 11px;8223  letter-spacing: 0.08em;8224  color: var(--peach-t3);8225  cursor: pointer;8226  padding: 0;8227  text-transform: uppercase;8228}82298230.peach-sync-advanced-chevron {8231  display: inline-block;8232  transition: transform 200ms ease;8233  font-size: 10px;8234}82358236.peach-sync-advanced-chevron.is-open {8237  transform: rotate(90deg);8238}82398240.peach-sync-advanced-content {8241  margin-top: 14px;8242}82438244.peach-sync-advanced-row {8245  display: flex;8246  justify-content: space-between;8247  align-items: center;8248  gap: 16px;8249}82508251.peach-sync-advanced-title {8252  font-size: 14px;8253  color: var(--peach-t1);8254  margin: 0 0 2px;8255}82568257.peach-sync-advanced-subtitle {8258  font-size: 12px;8259  color: var(--peach-t3);8260  margin: 0;8261  line-height: 1.5;8262}82638264/* ── Add Device — Android scan tabs ─────────────────────────────────────── */82658266.peach-pairing-tabs {8267  display: flex;8268  border: 1px solid var(--peach-border);8269  border-radius: 8px;8270  overflow: hidden;8271  margin-bottom: 4px;8272}82738274.peach-pairing-tab {8275  flex: 1;8276  padding: 10px 0;8277  background: none;8278  border: none;8279  font-family: 'IBM Plex Mono', monospace;8280  font-size: 11px;8281  letter-spacing: 0.06em;8282  color: var(--peach-t2);8283  cursor: pointer;8284  transition: background 150ms, color 150ms;8285}82868287.peach-pairing-tab.is-active {8288  background: var(--peach-accent);8289  color: #fff;8290  font-weight: 600;8291}82928293.peach-pairing-tab:not(.is-active):active {8294  background: var(--peach-border);8295}82968297/* Camera view */8298.peach-pairing-camera-container {8299  position: relative;8300  width: 100%;8301  aspect-ratio: 1;8302  border-radius: 12px;8303  overflow: hidden;8304  background: #000;8305  flex-shrink: 0;8306}83078308.peach-pairing-video {8309  width: 100%;8310  height: 100%;8311  object-fit: cover;8312}83138314.peach-pairing-scan-frame {8315  position: absolute;8316  top: 50%;8317  left: 50%;8318  transform: translate(-50%, -50%);8319  width: 60%;8320  aspect-ratio: 1;8321  border: 2px solid var(--peach-accent);8322  border-radius: 8px;8323  pointer-events: none;8324}83258326/* ── Notes Mode ── */83278328/* Overlay that crossfades over the vault */8329.peach-notes-overlay {8330  position: fixed;8331  inset: 0;8332  z-index: 90;8333  opacity: 0;8334  pointer-events: none;8335  animation: peach-mode-in 220ms ease-in forwards;8336}83378338.peach-notes-overlay.is-visible {8339  opacity: 1;8340  pointer-events: auto;8341}83428343@keyframes peach-mode-in {8344  from { opacity: 0; }8345  to   { opacity: 1; }8346}83478348/* Top-level notes surface */8349.peach-notes-mode {8350  position: absolute;8351  inset: 0;8352  background: var(--peach-bg);8353  display: flex;8354  flex-direction: column;8355}83568357/* Rune canvas positioned behind content */8358.peach-note-rune-canvas {8359  position: absolute;8360  inset: 0;8361  width: 100%;8362  height: 100%;8363  pointer-events: none;8364  z-index: 0;8365}83668367/* TOC wrapper */8368.peach-notes-toc-wrapper {8369  position: absolute;8370  inset: 0;8371  z-index: 1;8372  opacity: 1;8373  pointer-events: auto;8374  transition: opacity 200ms ease;8375}83768377.peach-notes-toc-wrapper.is-hidden {8378  opacity: 0;8379  pointer-events: none;8380}83818382/* Editor wrapper */8383.peach-notes-editor-wrapper {8384  position: absolute;8385  inset: 0;8386  z-index: 2;8387  opacity: 0;8388  pointer-events: none;8389  transition: opacity 200ms ease;8390}83918392.peach-notes-editor-wrapper.is-visible {8393  opacity: 1;8394  pointer-events: auto;8395}83968397/* TOC inner */8398.peach-notes-toc {8399  position: relative;8400  display: flex;8401  flex-direction: column;8402  height: 100%;8403  padding-top: env(safe-area-inset-top, 0px);8404  padding-bottom: env(safe-area-inset-bottom, 0px);8405}84068407/* Shared header */8408.peach-notes-header {8409  display: flex;8410  align-items: center;8411  padding: 12px 16px;8412  gap: 12px;8413  flex-shrink: 0;8414  min-height: 52px;8415  position: relative;8416  z-index: 2;8417}84188419.peach-notes-back {8420  font-size: 22px;8421  color: var(--peach-t2);8422  background: none;8423  border: none;8424  padding: 4px;8425  cursor: pointer;8426  line-height: 1;8427  flex-shrink: 0;8428  transition: color 150ms ease;8429  -webkit-tap-highlight-color: transparent;8430}84318432.peach-notes-back:active { color: var(--peach-t0); }84338434.peach-notes-header-title {8435  flex: 1;8436  font-family: 'Cormorant Garamond', serif;8437  font-style: italic;8438  font-size: 22px;8439  color: var(--peach-t0);8440  text-align: center;8441}84428443.peach-notes-header-title.is-breadcrumb {8444  font-family: 'IBM Plex Mono', monospace;8445  font-style: normal;8446  font-size: 11px;8447  color: var(--peach-t3);8448  letter-spacing: 0.08em;8449  text-transform: uppercase;8450  cursor: pointer;8451}84528453.peach-notes-header-actions {8454  display: flex;8455  gap: 8px;8456  flex-shrink: 0;8457}84588459.peach-notes-header-btn {8460  width: 36px;8461  height: 36px;8462  display: flex;8463  align-items: center;8464  justify-content: center;8465  background: none;8466  border: none;8467  color: var(--peach-t2);8468  cursor: pointer;8469  border-radius: 8px;8470  font-size: 16px;8471  transition: color 150ms ease, background 150ms ease;8472  -webkit-tap-highlight-color: transparent;8473}84748475.peach-notes-header-btn:active {8476  background: rgba(255,255,255,0.06);8477  color: var(--peach-t0);8478}84798480/* Inline search bar */8481.peach-notes-search-input {8482  flex: 1;8483  background: none;8484  border: none;8485  outline: none;8486  font-family: 'IBM Plex Mono', monospace;8487  font-size: 13px;8488  color: var(--peach-t0);8489  padding: 4px 0;8490  letter-spacing: 0.02em;8491}84928493.peach-notes-search-input::placeholder {8494  color: var(--peach-t3);8495}84968497/* TOC list */8498.peach-notes-list-container {8499  flex: 1;8500  overflow-y: auto;8501  overflow-x: hidden;8502  scrollbar-width: none;8503  -webkit-overflow-scrolling: touch;8504  overscroll-behavior: contain;8505  position: relative;8506  z-index: 1;8507}85088509.peach-notes-list-container::-webkit-scrollbar { display: none; }85108511/* Note row */8512.peach-note-row {8513  position: relative;8514  display: grid;8515  grid-template-columns: 44px 8px 1fr 8px auto;8516  align-items: center;8517  min-height: 72px;8518  padding: 16px 20px;8519  border-bottom: 0.5px solid var(--peach-border);8520  cursor: pointer;8521  overflow: hidden;8522  touch-action: pan-y;8523  user-select: none;8524  -webkit-user-select: none;8525  -webkit-tap-highlight-color: transparent;8526}85278528.peach-note-row:first-child {8529  border-top: 0.5px solid var(--peach-border);8530}85318532.peach-note-row:active {8533  background: rgba(255,255,255,0.02);8534}85358536.peach-note-numeral {8537  font-family: 'Cormorant Garamond', serif;8538  font-style: italic;8539  font-size: 15px;8540  color: var(--peach-accent);8541  text-align: right;8542  line-height: 1;8543  flex-shrink: 0;8544}85458546.peach-note-title-gap { /* grid spacer */ }85478548.peach-note-title {8549  font-family: 'Cormorant Garamond', serif;8550  font-style: italic;8551  font-size: 18px;8552  color: var(--peach-t0);8553  line-height: 1.3;8554  min-width: 0;8555  overflow-wrap: break-word;8556}85578558.peach-note-title-match {8559  color: var(--peach-accent);8560}85618562.peach-note-date {8563  font-family: 'IBM Plex Mono', monospace;8564  font-size: 11px;8565  color: var(--peach-t2);8566  white-space: nowrap;8567  text-align: right;8568  flex-shrink: 0;8569  grid-column: 5;8570}85718572/* Swipe underlays */8573.peach-note-row-underlay {8574  position: absolute;8575  inset: 0;8576  display: flex;8577  align-items: center;8578  padding: 0 24px;8579  font-family: 'IBM Plex Mono', monospace;8580  font-size: 11px;8581  letter-spacing: 0.1em;8582  pointer-events: none;8583  z-index: 0;8584}85858586.peach-note-row-underlay--delete {8587  background: #8B2020;8588  color: rgba(255,255,255,0.9);8589  justify-content: flex-end;8590}85918592.peach-note-row-underlay--archive {8593  background: var(--peach-accent);8594  color: #0C0A06;8595  justify-content: flex-start;8596}85978598/* Delete confirm strip */8599.peach-note-delete-confirm {8600  position: absolute;8601  inset: 0;8602  background: var(--peach-bg);8603  display: flex;8604  align-items: center;8605  gap: 12px;8606  padding: 0 20px;8607  font-family: 'IBM Plex Mono', monospace;8608  font-size: 11px;8609  color: var(--peach-t1);8610  letter-spacing: 0.04em;8611  animation: peach-delete-confirm-in 150ms ease both;8612  z-index: 10;8613}86148615@keyframes peach-delete-confirm-in {8616  from { opacity: 0; }8617  to   { opacity: 1; }8618}86198620.peach-note-delete-confirm-btn {8621  background: #8B2020;8622  color: rgba(255,255,255,0.9);8623  border: none;8624  border-radius: 6px;8625  padding: 4px 10px;8626  font-family: 'IBM Plex Mono', monospace;8627  font-size: 10px;8628  cursor: pointer;8629  letter-spacing: 0.06em;8630}86318632.peach-note-delete-cancel-btn {8633  background: none;8634  border: none;8635  color: var(--peach-t3);8636  font-family: 'IBM Plex Mono', monospace;8637  font-size: 10px;8638  cursor: pointer;8639  letter-spacing: 0.06em;8640  padding: 4px 6px;8641}86428643/* + New note button */8644.peach-notes-new-btn {8645  font-family: 'IBM Plex Mono', monospace;8646  font-size: 12px;8647  color: var(--peach-t3);8648  text-align: center;8649  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8650  background: none;8651  border: none;8652  width: 100%;8653  cursor: pointer;8654  letter-spacing: 0.04em;8655  transition: color 150ms ease;8656  -webkit-tap-highlight-color: transparent;8657}86588659.peach-notes-new-btn:active { color: var(--peach-accent); }86608661/* Empty state */8662.peach-notes-empty {8663  display: flex;8664  flex-direction: column;8665  align-items: center;8666  justify-content: center;8667  flex: 1;8668  padding: 48px 32px;8669  gap: 16px;8670}86718672.peach-notes-empty-text {8673  font-family: 'Cormorant Garamond', serif;8674  font-style: italic;8675  font-size: 20px;8676  color: var(--peach-t3);8677  text-align: center;8678  margin: 0;8679  line-height: 1.4;8680  white-space: pre-line;8681}86828683/* ── Editor surface ── */86848685.peach-note-editor-surface {8686  position: absolute;8687  inset: 0;8688  background: var(--peach-bg);8689  display: flex;8690  flex-direction: column;8691  padding-top: env(safe-area-inset-top, 0px);8692}86938694.peach-note-editor-scroll {8695  flex: 1;8696  overflow-y: auto;8697  overflow-x: hidden;8698  scrollbar-width: none;8699  -webkit-overflow-scrolling: touch;8700  padding: 0 24px 120px;8701  position: relative;8702  z-index: 1;8703}87048705.peach-note-editor-scroll::-webkit-scrollbar { display: none; }87068707/* Desktop toolbar (always visible above body) */8708.peach-note-toolbar-desktop-inline {8709  display: flex;8710  align-items: center;8711  gap: 2px;8712  padding: 6px 0 12px;8713  margin-bottom: 4px;8714  border-bottom: 0.5px solid var(--peach-border);8715}87168717/* Title field */8718.peach-note-title-field {8719  font-family: 'Cormorant Garamond', serif;8720  font-style: italic;8721  font-size: 32px;8722  font-weight: 600;8723  color: var(--peach-t0);8724  line-height: 1.2;8725  padding: 8px 0 0;8726  outline: none;8727  min-height: 44px;8728  word-break: break-word;8729  position: relative;8730  z-index: 1;8731}87328733.peach-note-title-field:empty::before {8734  content: attr(data-placeholder);8735  color: var(--peach-t3);8736  pointer-events: none;8737}87388739/* Hairline separator */8740.peach-note-hairline {8741  height: 0.5px;8742  background: var(--peach-border);8743  margin: 12px 0 20px;8744  position: relative;8745  z-index: 1;8746}87478748/* Body field */8749.peach-note-body-field {8750  font-family: 'DM Sans', sans-serif;8751  font-size: 16px;8752  color: var(--peach-t0);8753  line-height: 1.85;8754  padding: 0;8755  outline: none;8756  min-height: 240px;8757  word-break: break-word;8758  position: relative;8759  z-index: 1;8760}87618762.peach-note-body-field:empty::before {8763  content: attr(data-placeholder);8764  color: var(--peach-t3);8765  font-style: italic;8766  pointer-events: none;8767}87688769.peach-note-body-field h2 {8770  font-family: 'Cormorant Garamond', serif;8771  font-style: italic;8772  font-size: 22px;8773  font-weight: 600;8774  color: var(--peach-t0);8775  margin: 20px 0 8px;8776}87778778.peach-note-body-field blockquote {8779  border-left: 2px solid var(--peach-accent);8780  margin: 12px 0;8781  padding-left: 16px;8782  color: var(--peach-t1);8783  font-style: italic;8784}87858786.peach-note-body-field ul,8787.peach-note-body-field ol {8788  padding-left: 20px;8789  margin: 8px 0;8790}87918792.peach-note-body-field li {8793  margin: 4px 0;8794}87958796.peach-note-body-field hr {8797  border: none;8798  border-top: 0.5px solid var(--peach-border);8799  margin: 16px 0;8800}88018802/* Saved indicator */8803.peach-note-saved-indicator {8804  font-family: 'IBM Plex Mono', monospace;8805  font-size: 11px;8806  color: var(--peach-t3);8807  letter-spacing: 0.04em;8808  text-align: right;8809  padding: 6px 24px;8810  flex-shrink: 0;8811  transition: opacity 300ms ease;8812  pointer-events: none;8813  position: relative;8814  z-index: 1;8815}88168817/* Mobile keyboard toolbar */8818.peach-note-toolbar-mobile {8819  display: flex;8820  align-items: center;8821  padding: 8px 16px;8822  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));8823  background: var(--peach-bg);8824  border-top: 0.5px solid var(--peach-border);8825  gap: 4px;8826  flex-shrink: 0;8827  position: relative;8828  z-index: 10;8829}88308831.peach-note-toolbar-btn {8832  min-width: 36px;8833  height: 36px;8834  display: flex;8835  align-items: center;8836  justify-content: center;8837  background: none;8838  border: none;8839  border-radius: 8px;8840  cursor: pointer;8841  font-size: 14px;8842  color: var(--peach-t1);8843  font-family: 'DM Sans', sans-serif;8844  font-weight: 600;8845  transition: background 100ms ease, color 100ms ease;8846  -webkit-tap-highlight-color: transparent;8847}88488849.peach-note-toolbar-btn--italic { font-style: italic; }8850.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }8851.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }88528853.peach-note-toolbar-divider {8854  width: 0.5px;8855  height: 20px;8856  background: var(--peach-border);8857  margin: 0 4px;8858  flex-shrink: 0;8859}88608861.peach-note-toolbar-spacer { flex: 1; }88628863/* Desktop: larger headline in TOC */8864@media (min-width: 400px) {8865  .peach-notes-header-title:not(.is-breadcrumb) {8866    font-size: 32px;8867  }88688869  .peach-note-row {8870    min-height: 64px;8871    padding: 14px 16px;8872  }8873}88748875/* Flying title — shared element during expansion/collapse */88768877/* ─── Light theme overrides ───────────────────────────────────────────────8878   Tokens that cannot be expressed as variable substitutions — hardcoded8879   context-specific values that need separate light-mode rules. */88808881/* Settings section headers: use text-label (#79766F) per restoration brief —8882   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY8883   presence without fighting the light parchment background. */8884.light .peach-settings-sub-label,8885[data-theme="light"] .peach-settings-sub-label,8886.light .peach-settings-nav-label,8887[data-theme="light"] .peach-settings-nav-label {8888  color: #79766F;8889}88908891/* Secondary action buttons (ghost / subtle): filled with input-well surface8892   so they read as recessed against the parchment card background. */8893.light .peach-btn--ghost:not(.peach-icon-btn),8894[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {8895  background: #EEE7DD;8896  border-color: #DDD5CB;8897  color: #1A1208;8898}8899.light .peach-icon-btn,8900[data-theme="light"] .peach-icon-btn {8901  background: transparent;8902  border-color: transparent;8903}8904.light .peach-btn--subtle,8905[data-theme="light"] .peach-btn--subtle {8906  background: #EEE7DD;8907  border-color: #DDD5CB;8908}89098910/* Wide secondary action button on the lock screen — override the8911   hardcoded dark-mode rgba values with warm parchment equivalents. */8912.light .peach-lock-secondary,8913[data-theme="light"] .peach-lock-secondary {8914  background: #EEE7DD;8915  border-color: #DDD5CB;8916  color: #1A1208;8917}8918.light .peach-lock-secondary:hover,8919[data-theme="light"] .peach-lock-secondary:hover {8920  background: #F0E9DF;8921}89228923/* Entry row hover: bg-row lifts the row above the card surface. */8924.light .peach-entry-row:hover,8925[data-theme="light"] .peach-entry-row:hover {8926  background: #F2EBE1;8927}8928.light .peach-entry-row.is-active,8929[data-theme="light"] .peach-entry-row.is-active {8930  background: #F2EBE1;8931}8932.light .peach-entry-row.is-selected,8933[data-theme="light"] .peach-entry-row.is-selected {8934  background: #F5EDE2;8935}89368937/* ──────────────────────────────────────────────────────────────────────────8938   Chirp pairing flow — bird-stage animation (Phase 1)8939   See src/popup/components/ChirpPairingFlow.tsx and the brief §6.2.8940   Three-act animation gated on the [data-phase] attribute of8941   .peach-chirp-pair; child layers (birds, chirp arcs, flight wave, dot)8942   each react via either pose class or visibility flag.8943   Tokens: accent surfaces use var(--peach-accent); bird illustration8944   colours are baked into the SVG per the brand-peach exception in §3.1.8945   ────────────────────────────────────────────────────────────────────── */89468947.peach-chirp-pair {8948  position: absolute;8949  inset: 0;8950  z-index: 3;8951  display: flex;8952  flex-direction: column;8953  padding: 14px 12px 12px;8954  width: 100%;8955  box-sizing: border-box;8956  gap: 0;8957  background:8958    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),8959    var(--peach-bg);8960  color: var(--peach-t0);8961  overflow-y: auto;8962  overflow-x: hidden;8963  scrollbar-width: none;8964  isolation: isolate;8965  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;8966}8967@keyframes peach-chirp-overlay-in {8968  from { opacity: 0; transform: translateY(8px); }8969  to   { opacity: 1; transform: translateY(0); }8970}8971.peach-chirp-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }8972.peach-chirp-pair::before {8973  content: '';8974  position: absolute;8975  inset: 0;8976  border-radius: inherit;8977  pointer-events: none;8978  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);8979  z-index: 0;8980}8981.peach-chirp-pair > * { position: relative; z-index: 1; }89828983/* Header --------------------------------------------------------------- */8984.peach-chirp-head {8985  display: flex; align-items: center; gap: 10px;8986}8987.peach-chirp-back {8988  width: 32px; height: 32px;8989  display: inline-flex; align-items: center; justify-content: center;8990  background: transparent;8991  border: none;8992  border-radius: 8px;8993  color: var(--peach-t1);8994  cursor: pointer;8995  transition: color 0.15s ease, box-shadow 0.15s ease;8996}8997.peach-chirp-back:hover {8998  color: var(--peach-accent);8999  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9000}9001.peach-chirp-title {9002  font-family: var(--font-display, Georgia, serif);9003  font-style: italic;9004  font-size: 24px;9005  font-weight: 500;9006  letter-spacing: 0.005em;9007  color: var(--peach-t0);9008  line-height: 1;9009}9010.peach-chirp-head-spacer { flex: 1; }90119012/* Chip row ------------------------------------------------------------- */9013.peach-chirp-chip-row {9014  display: flex;9015  align-items: center;9016  justify-content: flex-start;9017  margin-top: 12px;9018}9019.peach-chirp-chip {9020  display: inline-flex; align-items: center; gap: 8px;9021  padding: 5px 10px 5px 8px;9022  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9023  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9024  border-radius: 999px;9025  font-family: var(--peach-mono, ui-monospace, monospace);9026  font-size: 11px;9027  letter-spacing: 0.04em;9028  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9029}9030.peach-chirp-chip-dot {9031  width: 6px; height: 6px; border-radius: 50%;9032  background: var(--peach-accent);9033  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9034}9035.peach-chirp-chip[data-phase="paired"] {9036  background: color-mix(in srgb, #4f9eda 12%, transparent);9037  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9038  color: #76b6e8;9039}9040.peach-chirp-chip[data-phase="paired"] .peach-chirp-chip-dot {9041  background: #76b6e8;9042  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9043}9044.peach-chirp-chip[data-phase="timeout"],9045.peach-chirp-chip[data-phase="mic_denied"],9046.peach-chirp-chip[data-phase="version_mismatch"],9047.peach-chirp-chip[data-phase="handshake_failed"] {9048  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9049  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9050  color: var(--peach-warn, #d29257);9051}9052.peach-chirp-chip[data-phase="timeout"] .peach-chirp-chip-dot,9053.peach-chirp-chip[data-phase="mic_denied"] .peach-chirp-chip-dot,9054.peach-chirp-chip[data-phase="version_mismatch"] .peach-chirp-chip-dot,9055.peach-chirp-chip[data-phase="handshake_failed"] .peach-chirp-chip-dot {9056  background: var(--peach-warn, #d29257);9057  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9058}90599060/* Bird stage ----------------------------------------------------------- */9061.peach-chirp-stage {9062  position: relative;9063  margin: 14px 0 8px;9064  height: 180px;9065  border-radius: 12px;9066  background:9067    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9068    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),9069    color-mix(in srgb, var(--peach-bg) 92%, #000);9070  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);9071  overflow: hidden;9072  isolation: isolate;9073}9074.peach-chirp-stage::after {9075  content: '';9076  position: absolute;9077  left: 12%; right: 12%;9078  bottom: 36px;9079  height: 1px;9080  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9081}90829083.peach-chirp-bird-slot {9084  position: absolute;9085  bottom: 8px;9086  width: 100px;9087  height: 110px;9088  display: flex;9089  align-items: flex-end;9090  justify-content: center;9091}9092.peach-chirp-bird-slot-desktop { left: 28px; }9093.peach-chirp-bird-slot-mobile { right: 28px; }90949095/* Mobile bird hops in from the right when handshake begins */9096.peach-chirp-bird-slot-mobile {9097  opacity: 1;9098  transform: translateX(-6px);9099  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9100}9101.peach-chirp-stage.act-listening .peach-chirp-bird-slot-mobile,9102.peach-chirp-stage.act-chirping .peach-chirp-bird-slot-mobile,9103.peach-chirp-stage.act-idle .peach-chirp-bird-slot-mobile {9104  opacity: 0;9105  transform: translateX(60px) rotate(8deg);9106}9107.peach-chirp-stage.act-handshake .peach-chirp-bird-slot-desktop,9108.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop {9109  transform: translateX(6px);9110  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9111}91129113/* Paired: both birds bob together */9114.peach-chirp-stage.act-paired .peach-chirp-bird-slot {9115  animation: peach-chirp-happy-bob 1.2s ease-in-out infinite;9116}9117.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { animation-delay: 0.2s; }9118.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop { --bb-x: 6px; }9119.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { --bb-x: -6px; }9120@keyframes peach-chirp-happy-bob {9121  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9122  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9123}91249125/* Bird internal -------------------------------------------------------- */9126.peach-chirp-bird {9127  width: 108px;9128  height: 108px;9129  transform-origin: 50% 95%;9130}9131.peach-chirp-bird svg { width: 100%; height: 100%; overflow: visible; }91329133.peach-chirp-bird-body {9134  transform-origin: 50% 80%;9135  animation: peach-chirp-bird-bob 2.4s ease-in-out infinite;9136}9137@keyframes peach-chirp-bird-bob {9138  0%, 100% { transform: translateY(0) scale(1, 1); }9139  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9140}91419142.peach-chirp-bird-eye-group {9143  animation: peach-chirp-blink 5.2s steps(1, end) infinite;9144  transform-origin: center;9145  transform-box: fill-box;9146}9147@keyframes peach-chirp-blink {9148  0%, 92%, 96%, 100% { transform: scaleY(1); }9149  94%                { transform: scaleY(0.05); }9150}91519152/* Pose: chirping — beak opens, head bobs, aura blooms */9153.peach-chirp-bird-pose-chirping .peach-chirp-bird-body {9154  animation:9155    peach-chirp-bird-bob 2.4s ease-in-out infinite,9156    peach-chirp-squeeze 1.7s ease-in-out infinite;9157}9158@keyframes peach-chirp-squeeze {9159  0%, 70%, 100% { transform-origin: 50% 85%; }9160  78%           { transform: scale(1.04, 0.96) translateY(1px); }9161  86%           { transform: scale(0.98, 1.02); }9162}9163.peach-chirp-bird-pose-chirping .peach-chirp-bird-head-group {9164  animation: peach-chirp-head-bob 1.7s ease-in-out infinite;9165}9166@keyframes peach-chirp-head-bob {9167  0%, 70%, 100% { transform: translateY(0) rotate(0); }9168  78%           { transform: translateY(-3px) rotate(-4deg); }9169  86%           { transform: translateY(-1px) rotate(-2deg); }9170}9171.peach-chirp-bird-pose-chirping .peach-chirp-bird-beak {9172  animation: peach-chirp-beak-open 1.7s ease-in-out infinite;9173}9174@keyframes peach-chirp-beak-open {9175  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9176  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9177  86%           { transform: rotate(-6deg); }9178}9179.peach-chirp-bird-pose-chirping .peach-chirp-bird-aura {9180  animation: peach-chirp-aura 1.7s ease-in-out infinite;9181}9182@keyframes peach-chirp-aura {9183  0%, 100% { opacity: 0; }9184  50%      { opacity: 0.8; }9185}9186.peach-chirp-bird-pose-chirping .peach-chirp-bird-tail {9187  animation: peach-chirp-tail-twitch 1.7s ease-in-out infinite;9188  transform-origin: 100% 50%;9189}9190@keyframes peach-chirp-tail-twitch {9191  0%, 75%, 100% { transform: rotate(0); }9192  82%           { transform: rotate(-3deg) translateX(-1px); }9193}91949195/* Pose: attentive — head tilts toward partner */9196.peach-chirp-bird-pose-attentive .peach-chirp-bird-head-group {9197  animation: peach-chirp-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9198}9199@keyframes peach-chirp-head-tilt {9200  0%   { transform: rotate(0) translateY(0); }9201  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9202  100% { transform: rotate(-6deg); }9203}9204.peach-chirp-bird-pose-attentive .peach-chirp-bird-tail {9205  animation: peach-chirp-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9206  transform-origin: 100% 50%;9207}9208@keyframes peach-chirp-tail-cock {9209  0%   { transform: rotate(0); }9210  100% { transform: rotate(-4deg); }9211}92129213/* Pose: happy — wing flutter, tuft perk, tail wag */9214.peach-chirp-bird-pose-happy .peach-chirp-bird-wing {9215  transform-origin: 80% 60%;9216  animation: peach-chirp-wing-flutter 0.32s ease-in-out 5;9217}9218@keyframes peach-chirp-wing-flutter {9219  0%, 100% { transform: rotate(0) translateY(0); }9220  50%      { transform: rotate(-16deg) translateY(-2px); }9221}9222.peach-chirp-bird-pose-happy .peach-chirp-bird-tuft {9223  transform-origin: 0% 100%;9224  animation: peach-chirp-tuft-perk 0.4s ease-in-out 3;9225}9226@keyframes peach-chirp-tuft-perk {9227  0%, 100% { transform: rotate(0); }9228  50%      { transform: rotate(-15deg) translateY(-1px); }9229}9230.peach-chirp-bird-pose-happy .peach-chirp-bird-tail {9231  transform-origin: 100% 50%;9232  animation: peach-chirp-tail-wag 0.5s ease-in-out 4;9233}9234@keyframes peach-chirp-tail-wag {9235  0%, 100% { transform: rotate(0); }9236  25%      { transform: rotate(6deg); }9237  75%      { transform: rotate(-6deg); }9238}9239.peach-chirp-bird-pose-happy .peach-chirp-bird-head-group {9240  animation: peach-chirp-head-perk 0.5s ease-out;9241}9242@keyframes peach-chirp-head-perk {9243  0%   { transform: translateY(0); }9244  40%  { transform: translateY(-3px) rotate(2deg); }9245  100% { transform: translateY(0); }9246}92479248/* Pose: sad — body droops forward */9249.peach-chirp-bird-pose-sad .peach-chirp-bird-body {9250  transform: translateY(5px) rotate(-2deg);9251  animation: none;9252}9253.peach-chirp-bird-pose-sad .peach-chirp-bird-head-group {9254  transform: translateY(4px) rotate(8deg);9255}9256.peach-chirp-bird-pose-sad .peach-chirp-bird-tuft { transform: rotate(15deg) translateY(2px); }9257.peach-chirp-bird-pose-sad .peach-chirp-bird-tail { transform: rotate(8deg) translateY(2px); }92589259.peach-chirp-bird-pose-hidden { opacity: 0; }92609261/* Chirp arcs ----------------------------------------------------------- */9262.peach-chirp-arcs {9263  position: absolute;9264  top: 18px;9265  width: 96px;9266  height: 70px;9267  pointer-events: none;9268}9269.peach-chirp-arcs-right { right: -60px; }9270.peach-chirp-arcs-left  { left: -60px; transform: scaleX(-1); }9271.peach-chirp-arc {9272  position: absolute;9273  top: 50%;9274  left: 0;9275  width: 40px;9276  height: 40px;9277  margin-top: -20px;9278  border: 1.2px solid #f4d5a8;9279  border-color: transparent #f4d5a8 transparent transparent;9280  border-radius: 50%;9281  opacity: 0;9282  animation: peach-chirp-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9283}9284@keyframes peach-chirp-arc-expand {9285  0%   { transform: scale(0.4); opacity: 0; }9286  20%  { opacity: 0.9; }9287  100% { transform: scale(1.6); opacity: 0; }9288}92899290/* Flight wave ---------------------------------------------------------- */9291.peach-chirp-flight-track {9292  position: absolute;9293  inset: 32px 36px 38px 36px;9294  pointer-events: none;9295}9296.peach-chirp-flight-wave {9297  position: absolute;9298  top: 8px;9299  left: 76px;9300  right: 76px;9301  height: 60px;9302  width: auto;9303  opacity: 0;9304  transition: opacity 0.15s ease;9305  stroke: #f4d5a8;9306  fill: none;9307}9308.peach-chirp-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9309.peach-chirp-flight-wave.is-visible { opacity: 1; }9310.peach-chirp-flight-path,9311.peach-chirp-flight-path-2 {9312  stroke-dasharray: 240;9313  stroke-dashoffset: 240;9314  stroke-linecap: round;9315  fill: none;9316}9317.peach-chirp-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9318.peach-chirp-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9319.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path {9320  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9321}9322.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path-2 {9323  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9324}9325@keyframes peach-chirp-fly {9326  0%   { stroke-dashoffset: 240; opacity: 0; }9327  20%  { opacity: 1; }9328  100% { stroke-dashoffset: -120; opacity: 0; }9329}93309331/* Connection dot ------------------------------------------------------- */9332.peach-chirp-dot {9333  position: absolute;9334  top: 50%; left: 50%;9335  transform: translate(-50%, -50%);9336  width: 40px; height: 40px;9337  opacity: 0;9338  pointer-events: none;9339  transition: opacity 0.3s ease;9340  color: var(--peach-accent);9341}9342.peach-chirp-dot.is-visible { opacity: 1; }9343.peach-chirp-dot-glow {9344  position: absolute; top: 50%; left: 50%;9345  transform: translate(-50%, -50%);9346  width: 38px; height: 38px;9347  border-radius: 50%;9348  filter: blur(10px);9349  opacity: 0.55;9350  background: var(--peach-accent);9351  animation: peach-chirp-dot-bloom 1.4s ease-out;9352}9353.peach-chirp-dot-core {9354  position: absolute; top: 50%; left: 50%;9355  transform: translate(-50%, -50%);9356  width: 8px; height: 8px;9357  border-radius: 50%;9358  background: var(--peach-accent);9359  box-shadow: 0 0 12px currentColor;9360  animation: peach-chirp-dot-core 1.4s ease-out;9361}9362.peach-chirp-dot-ring {9363  position: absolute; top: 50%; left: 50%;9364  width: 60px; height: 60px;9365  transform: translate(-50%, -50%);9366  animation: peach-chirp-dot-ring 1.4s linear;9367  stroke: var(--peach-accent);9368}9369@keyframes peach-chirp-dot-bloom {9370  0%   { width: 4px; height: 4px; opacity: 0; }9371  35%  { width: 60px; height: 60px; opacity: 0.7; }9372  100% { width: 38px; height: 38px; opacity: 0.55; }9373}9374@keyframes peach-chirp-dot-core {9375  0%   { width: 0; height: 0; }9376  35%  { width: 12px; height: 12px; }9377  100% { width: 8px; height: 8px; }9378}9379@keyframes peach-chirp-dot-ring {9380  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9381  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9382  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9383}93849385/* Motes — drift upward across the stage */9386.peach-chirp-motes {9387  position: absolute;9388  inset: 0;9389  pointer-events: none;9390}9391.peach-chirp-mote {9392  position: absolute;9393  width: 2px; height: 2px;9394  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9395  border-radius: 50%;9396  bottom: 32px;9397  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9398  opacity: 0;9399  animation: peach-chirp-mote-drift 6s linear infinite;9400  animation-delay: calc(var(--mote-i, 0) * 0.7s);9401}9402@keyframes peach-chirp-mote-drift {9403  0%   { transform: translateY(0); opacity: 0; }9404  10%  { opacity: 0.6; }9405  90%  { opacity: 0.1; }9406  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9407}94089409/* Status copy ---------------------------------------------------------- */9410.peach-chirp-copy-host {9411  margin: 4px 4px 10px;9412  text-align: center;9413  min-height: 50px;9414}9415.peach-chirp-copy {9416  animation: peach-chirp-copy-in 0.35s ease both;9417}9418@keyframes peach-chirp-copy-in {9419  from { opacity: 0; transform: translateY(4px); }9420  to   { opacity: 1; transform: translateY(0); }9421}9422.peach-chirp-headline {9423  font-family: var(--font-display, Georgia, serif);9424  font-style: italic;9425  font-size: 20px;9426  font-weight: 500;9427  line-height: 1.2;9428  letter-spacing: 0.005em;9429  color: var(--peach-t0);9430  margin-bottom: 6px;9431}9432.peach-chirp-copy-listening .peach-chirp-headline,9433.peach-chirp-copy-chirping .peach-chirp-headline,9434.peach-chirp-copy-idle .peach-chirp-headline {9435  font-family: inherit;9436  font-style: normal;9437  font-weight: 500;9438  font-size: 15px;9439  color: var(--peach-t0);9440  letter-spacing: 0;9441}9442.peach-chirp-copy-paired .peach-chirp-headline {9443  color: var(--peach-t0);9444  font-weight: 600;9445}9446.peach-chirp-sub {9447  font-size: 12.5px;9448  line-height: 1.45;9449  color: var(--peach-t1);9450  max-width: 280px;9451  margin: 0 auto;9452  text-wrap: pretty;9453}94549455/* Status action -------------------------------------------------------- */9456.peach-chirp-action {9457  margin: 2px 4px 10px;9458  margin-top: auto;9459  display: flex;9460  flex-direction: column;9461  gap: 8px;9462}9463.peach-chirp-mic-notice {9464  margin: 0;9465  font-size: 0.625rem;9466  color: var(--peach-t2);9467  line-height: 1.4;9468}9469.peach-chirp-action-waiting {9470  display: flex;9471  align-items: center;9472  justify-content: space-between;9473  gap: 12px;9474}9475.peach-chirp-cancel {9476  min-width: 96px;9477}9478.peach-chirp-listening {9479  display: inline-flex; align-items: center; gap: 4px;9480  font-family: var(--peach-mono, ui-monospace, monospace);9481  font-size: 9.5px;9482  text-transform: uppercase;9483  letter-spacing: 0.12em;9484  color: var(--peach-t1);9485  padding: 8px 10px;9486}9487.peach-chirp-listen-dot {9488  width: 4px; height: 4px;9489  border-radius: 50%;9490  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9491  animation: peach-chirp-listen-pulse 1.2s ease-in-out infinite;9492}9493.peach-chirp-listen-dot:nth-child(2) { animation-delay: 0.2s; }9494.peach-chirp-listen-dot:nth-child(3) { animation-delay: 0.4s; }9495.peach-chirp-listen-label { margin-left: 6px; }9496@keyframes peach-chirp-listen-pulse {9497  0%, 100% { opacity: 0.25; transform: scale(0.9); }9498  50%      { opacity: 1;     transform: scale(1.15); }9499}95009501.peach-chirp-action-handshake {9502  display: flex;9503  flex-direction: column;9504  align-items: center;9505  gap: 8px;9506  padding: 8px 4px;9507}9508.peach-chirp-meter {9509  width: 100%;9510  max-width: 280px;9511  height: 2px;9512  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9513  border-radius: 2px;9514  position: relative;9515  overflow: hidden;9516}9517.peach-chirp-meter-bar {9518  position: absolute;9519  top: 0; bottom: 0;9520  width: 30%;9521  left: -30%;9522  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9523  animation: peach-chirp-meter-sweep 1.4s ease-in-out infinite;9524}9525@keyframes peach-chirp-meter-sweep {9526  0%   { left: -30%; }9527  100% { left: 100%; }9528}9529.peach-chirp-meter-label {9530  font-family: var(--peach-mono, ui-monospace, monospace);9531  font-size: 9.5px;9532  text-transform: uppercase;9533  letter-spacing: 0.14em;9534  color: var(--peach-t1);9535}95369537.peach-chirp-action-paired {9538  display: flex;9539  align-items: center;9540  gap: 10px;9541}9542.peach-chirp-device-confirm {9543  flex: 1;9544  display: inline-flex;9545  align-items: center;9546  gap: 8px;9547  padding: 9px 10px 9px 12px;9548  border-radius: 10px;9549  background: color-mix(in srgb, #76b6e8 12%, transparent);9550  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9551  font-size: 12.5px;9552  color: var(--peach-t0);9553  min-width: 0;9554}9555.peach-chirp-device-confirm-glyph {9556  display: inline-flex;9557  color: #76b6e8;9558}9559.peach-chirp-device-confirm-name {9560  flex: 1;9561  overflow: hidden;9562  text-overflow: ellipsis;9563  white-space: nowrap;9564}9565.peach-chirp-device-confirm-trust {9566  font-family: var(--peach-mono, ui-monospace, monospace);9567  font-size: 9.5px;9568  text-transform: uppercase;9569  letter-spacing: 0.1em;9570  color: #76b6e8;9571  padding: 2px 6px;9572  border-radius: 4px;9573  background: color-mix(in srgb, #76b6e8 14%, transparent);9574}9575.peach-chirp-done {9576  min-width: 80px;9577}9578.peach-chirp-retry {9579  align-self: center;9580  display: block;9581  margin: 6px auto 0;9582  min-width: 120px;9583}9584.peach-chirp-mic-help {9585  font-size: 12px;9586  color: var(--peach-t1);9587  text-align: center;9588  max-width: 320px;9589  margin: 0 auto;9590}95919592/* Rest state — bird stage at idle pose, primary CTA + paired list */9593.peach-chirp-pair[data-phase="idle"] .peach-chirp-stage {9594  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9595  height: 160px;9596}9597.peach-chirp-pair-start {9598  width: 100%;9599  display: inline-flex;9600  align-items: center;9601  justify-content: center;9602  gap: 8px;9603  padding: 11px 14px;9604  border-radius: 10px;9605  background: var(--peach-accent);9606  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9607  color: #1a0905;9608  font-family: inherit;9609  font-size: 13px;9610  font-weight: 600;9611  letter-spacing: 0.01em;9612  cursor: pointer;9613  transition: filter 0.15s ease, transform 0.1s ease;9614}9615.peach-chirp-pair-start:hover { filter: brightness(1.08); }9616.peach-chirp-pair-start:active { transform: translateY(1px); }96179618.peach-chirp-paired-section {9619  margin-top: 14px;9620  display: flex;9621  flex-direction: column;9622  gap: 8px;9623}9624.peach-chirp-paired-heading {9625  margin: 0;9626  font-family: var(--peach-mono, ui-monospace, monospace);9627  font-size: 10px;9628  font-weight: 500;9629  letter-spacing: 0.14em;9630  text-transform: uppercase;9631  color: var(--peach-t1);9632}96339634/* Footer --------------------------------------------------------------- */9635.peach-chirp-foot {9636  margin: 10px -4px -2px;9637  margin-top: auto;9638}9639.peach-chirp-foot-divider {9640  height: 1px;9641  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9642  margin-bottom: 10px;9643}9644.peach-chirp-foot-text {9645  font-size: 11px;9646  line-height: 1.5;9647  color: var(--peach-t1);9648  text-align: center;9649  padding: 0 4px;9650  text-wrap: pretty;9651}96529653/* Screen-reader-only live region. Kept off the visual flow but read by9654   assistive tech as the pairing phase advances. */9655.peach-sr-only {9656  position: absolute;9657  width: 1px; height: 1px;9658  padding: 0; margin: -1px;9659  overflow: hidden;9660  clip: rect(0, 0, 0, 0);9661  white-space: nowrap;9662  border: 0;9663}96649665/* Reduced motion — stage simplifies to opacity transitions only */9666@media (prefers-reduced-motion: reduce) {9667  .peach-chirp-bird-body,9668  .peach-chirp-bird-head-group,9669  .peach-chirp-bird-beak,9670  .peach-chirp-bird-wing,9671  .peach-chirp-bird-tuft,9672  .peach-chirp-bird-tail,9673  .peach-chirp-bird-eye-group,9674  .peach-chirp-bird-aura,9675  .peach-chirp-arc,9676  .peach-chirp-flight-path,9677  .peach-chirp-flight-path-2,9678  .peach-chirp-dot-glow,9679  .peach-chirp-dot-core,9680  .peach-chirp-dot-ring,9681  .peach-chirp-mote,9682  .peach-chirp-meter-bar,9683  .peach-chirp-listen-dot,9684  .peach-chirp-bird-slot,9685  .peach-chirp-bird-slot-mobile {9686    animation: none !important;9687    transition: opacity 0.2s linear !important;9688  }9689}96909691/* ─────────────────────────────────────────────────────────────────9692   Settings → Sync surface (v3 ChirpSync). Wraps the same bird9693   animation used by the pairing flow with a paired-devices list and9694   the "Pair a device" CTA.9695   ───────────────────────────────────────────────────────────────── */9696.peach-chirp-settings {9697  position: absolute;9698  inset: 0;9699  z-index: 3;9700  display: flex;9701  flex-direction: column;9702  gap: 18px;9703  padding: 14px 12px 12px;9704  width: 100%;9705  box-sizing: border-box;9706  overflow-y: auto;9707  overflow-x: hidden;9708  /* Same warm Chirp surface as the pairing screen — unifies the two views. */9709  background:9710    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9711    var(--peach-bg);9712  color: var(--peach-t0);9713  isolation: isolate;9714  /* Hide native scrollbar — content fits 99% of the time and a chunky9715     gutter ruins the surface. */9716  scrollbar-width: none;9717  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9718}9719.peach-chirp-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9720.peach-chirp-settings::before {9721  content: '';9722  position: absolute;9723  inset: 0;9724  pointer-events: none;9725  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9726  z-index: 0;9727}9728.peach-chirp-settings > * { position: relative; z-index: 1; }97299730.peach-chirp-settings--pairing {9731  padding: 0;9732  align-items: stretch;9733  justify-content: stretch;9734  background: none;9735  isolation: auto;9736}9737.peach-chirp-settings--pairing::before { display: none; }97389739.peach-chirp-settings-header {9740  display: flex;9741  align-items: center;9742  gap: 10px;9743}9744.peach-chirp-settings-title {9745  margin: 0;9746  font-family: var(--font-display, Georgia, serif);9747  font-style: italic;9748  font-size: 24px;9749  font-weight: 500;9750  line-height: 1;9751  color: var(--peach-t0);9752  letter-spacing: 0.005em;9753}9754.peach-chirp-settings-section {9755  margin: 6px 0 -4px;9756  font-size: 11px;9757  font-weight: 600;9758  letter-spacing: 0.08em;9759  text-transform: uppercase;9760  color: var(--peach-text-muted);9761}9762.peach-chirp-settings-error {9763  font-size: 12px;9764  padding: 8px 10px;9765  border-radius: 8px;9766  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);9767  color: var(--peach-text);9768}9769.peach-chirp-settings-footer {9770  margin-top: auto;9771  padding-top: 18px;9772  font-size: 11.5px;9773  line-height: 1.5;9774  color: var(--peach-text-muted);9775  text-align: center;9776}97779778/* Hero card shown when no devices are paired yet. */9779.peach-chirp-hero {9780  display: flex;9781  flex-direction: column;9782  align-items: center;9783  gap: 12px;9784  padding: 20px 12px 8px;9785  text-align: center;9786}9787.peach-chirp-hero-svg {9788  display: block;9789  max-width: 100%;9790  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));9791}9792.peach-chirp-hero-headline {9793  margin: 0;9794  font-family: var(--font-display, Georgia, serif);9795  font-style: italic;9796  font-size: 20px;9797  font-weight: 500;9798  line-height: 1.2;9799  letter-spacing: 0.005em;9800  color: var(--peach-t0);9801}9802.peach-chirp-hero-sub {9803  margin: 0;9804  font-size: 13px;9805  line-height: 1.5;9806  color: var(--peach-t1);9807  max-width: 320px;9808  text-wrap: pretty;9809}98109811.peach-chirp-pair-cta {9812  display: flex;9813  justify-content: center;9814  padding: 4px 0 6px;9815}9816.peach-chirp-pair-button {9817  display: inline-flex;9818  align-items: center;9819  gap: 8px;9820  min-width: 220px;9821  justify-content: center;9822}9823.peach-chirp-pair-button-icon {9824  flex: 0 0 auto;9825}98269827/* Paired devices list. Roomy rows that look at home next to the rest9828   of Settings; stale rows get a soft warm-warning border tint. */9829.peach-chirp-device-list {9830  list-style: none;9831  margin: 0;9832  padding: 0;9833  display: flex;9834  flex-direction: column;9835  gap: 8px;9836}9837.peach-chirp-device-row {9838  display: flex;9839  align-items: center;9840  gap: 12px;9841  padding: 12px;9842  border-radius: 10px;9843  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9844  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);9845}9846.peach-chirp-device-row[data-stale="true"] {9847  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);9848}9849.peach-chirp-device-icon {9850  width: 32px;9851  height: 32px;9852  display: flex;9853  align-items: center;9854  justify-content: center;9855  border-radius: 8px;9856  color: var(--peach-text);9857  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);9858}9859.peach-chirp-device-info {9860  flex: 1;9861  display: flex;9862  flex-direction: column;9863  gap: 2px;9864  min-width: 0;9865}9866.peach-chirp-device-name {9867  font-size: 14px;9868  font-weight: 600;9869  color: var(--peach-text);9870  overflow: hidden;9871  text-overflow: ellipsis;9872  white-space: nowrap;9873}9874.peach-chirp-device-meta {9875  font-size: 11.5px;9876  color: var(--peach-text-muted);9877  display: flex;9878  flex-wrap: wrap;9879  align-items: center;9880  gap: 8px;9881}9882.peach-chirp-device-badge {9883  font-size: 10.5px;9884  font-weight: 500;9885  letter-spacing: 0.02em;9886  padding: 2px 6px;9887  border-radius: 999px;9888  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);9889  color: var(--peach-text);9890}9891.peach-chirp-device-stale {9892  font-size: 10.5px;9893  font-weight: 500;9894  color: var(--peach-warn, #d29257);9895}9896.peach-chirp-device-remove {9897  flex: 0 0 auto;9898  color: var(--peach-text-muted);9899}9900.peach-chirp-device-remove:hover {9901  color: var(--peach-danger, #c25b4a);9902}9903.peach-chirp-unpair-confirm {9904  display: flex;9905  gap: 6px;9906  align-items: center;9907}99089909/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */9910.peach-chirp-pro-card {9911  position: relative;9912  margin: 18px 12px;9913  padding: 18px 20px 22px;9914  border-radius: 22px;9915  background:9916    radial-gradient(140% 90% at 50% 0%,9917      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,9918      transparent 60%),9919    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9920  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);9921  box-shadow:9922    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,9923    0 18px 40px -24px rgba(0, 0, 0, 0.45);9924  display: flex;9925  flex-direction: column;9926  align-items: center;9927  gap: 10px;9928  text-align: center;9929  overflow: hidden;9930}9931.peach-chirp-pro-stage {9932  position: relative;9933  width: 220px;9934  height: 140px;9935  display: flex;9936  align-items: flex-end;9937  justify-content: center;9938  margin-bottom: 2px;9939}9940.peach-chirp-pro-bird-slot {9941  width: 140px;9942  height: 132px;9943  display: flex;9944  align-items: flex-end;9945  justify-content: center;9946  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));9947}9948.peach-chirp-pro-bird-slot .peach-chirp-bird {9949  width: 100%;9950  height: 100%;9951}9952.peach-chirp-pro-bird-slot .peach-chirp-bird svg {9953  width: 100%;9954  height: 100%;9955  overflow: visible;9956}9957.peach-chirp-pro-chirp {9958  position: absolute;9959  top: 14px;9960  right: 8px;9961  width: 96px;9962  height: 80px;9963  color: var(--peach-accent);9964  animation: peach-chirp-pulse 2.6s ease-in-out infinite;9965  transform-origin: 0% 50%;9966  pointer-events: none;9967}9968@keyframes peach-chirp-pulse {9969  0%, 100% { opacity: 0.35; transform: translateX(0) scale(0.92); }9970  45%      { opacity: 1;    transform: translateX(2px) scale(1); }9971  70%      { opacity: 0.6;  transform: translateX(4px) scale(1.04); }9972}9973@media (prefers-reduced-motion: reduce) {9974  .peach-chirp-pro-chirp { animation: none; opacity: 0.7; }9975}9976.peach-chirp-pro-headline {9977  margin: 4px 0 0;9978  font-family: var(--font-display, "Cormorant Garamond", serif);9979  font-style: italic;9980  font-size: 19px;9981  font-weight: 500;9982  letter-spacing: 0.01em;9983  color: var(--peach-t0);9984  max-width: 280px;9985  line-height: 1.25;9986}9987.peach-chirp-pro-body {9988  margin: 0;9989  font-size: 13px;9990  line-height: 1.55;9991  color: var(--peach-t1);9992  max-width: 300px;9993}9994.peach-chirp-pro-cta {9995  margin-top: 4px;9996}9997.peach-chirp-pro-foot {9998  margin: 2px 0 0;9999  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10000  font-size: 0.625rem;10001  letter-spacing: 0.08em;10002  text-transform: uppercase;10003  color: var(--peach-t2);10004  opacity: 0.75;10005}1000610007/* Shell border and shadow in light mode: match dark mode's near-invisible10008   border weight so the popup frame looks the same in both themes. */10009.light .peach-shell,10010.light .peach-screen {10011  border-color: rgba(26, 18, 8, 0.07);10012  box-shadow:10013    0 2px 8px rgba(80, 56, 32, 0.08),10014    0 14px 48px rgba(80, 56, 32, 0.10),10015    0 0 0 1px rgba(26, 18, 8, 0.04);10016}