popup.css

1html,2body,3#app,4.popup-root {5  width: 320px;6  min-height: 520px;7  height: 520px;8  margin: 0;9}1011body {12  overflow: hidden;13  background: var(--bg);14  color: var(--t0);15  font-family: var(--font-ui);16  font-weight: 300;17  position: relative;18}1920* {21  box-sizing: border-box;22}2324button,25input,26textarea,27select {28  font: inherit;29}3031button {32  border: 0;33}3435.popup-root {36  position: relative;37  overflow: hidden;38}3940.peach-theme {41  color: var(--peach-t0);42  font-family: var(--font-ui);43  font-weight: 300;44  box-sizing: border-box;45  text-align: left;46}47.peach-theme, .peach-theme * { box-sizing: inherit; }4849.peach-brand-mark {50  width: 14px;51  height: 14px;52  flex-shrink: 0;53}5455.peach-status-pip.is-hidden {56  display: none;57}5859.peach-status-pip.unlocked {60  background: var(--peach-health-ok);61  box-shadow: 0 0 6px rgba(100, 210, 100, 0.6);62}6364.peach-status-pip.pulse {65  animation: pip-pulse 400ms var(--peach-curve-settle) both;66}6768/* Shell */69.peach-shell, .peach-screen {70  background:71    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),72    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),73    var(--peach-bg);74  border: 1px solid var(--peach-t3);75  box-shadow:76    0 2px 8px rgba(0,0,0,0.55),77    0 14px 48px rgba(0,0,0,0.7),78    0 0 0 1px rgba(240,232,216,0.04);79  overflow: hidden;80}81.peach-shell {82  display: grid;83  grid-template-rows: auto 1fr;84  min-height: 520px;85  position: relative;86  isolation: isolate;87}8889.peach-shell[data-surface="extension"] {90  width: min(320px, 100vw);91  border-radius: 0;92  height: 520px;93  max-height: 520px;94  overflow: hidden;95}9697/* ── Lock screen – full-window lock/create stage ── */98.lock-screen--vault-stage {99  display: flex;100  flex-direction: column;101  gap: 18px;102  padding: 20px 18px 18px;103  justify-content: flex-start;104}105.lock-screen--vault-stage .peach-lock-panel {106  margin-top: auto;107}108.peach-lock-headline--unlock {109  max-width: 220px;110}111.peach-lock-hero--unlock {112  padding-top: 14px;113}114.peach-lock-panel--unlock {115  gap: 10px;116}117118.peach-lock-restore-link {119  background: transparent;120  border: none;121  cursor: pointer;122  font-family: var(--font-mono);123  font-size: 0.625rem;124  letter-spacing: 0.08em;125  color: var(--t1);126  padding: 5px 0;127  text-align: left;128  transition: color 150ms ease;129}130131.peach-lock-restore-link:hover {132  color: var(--t0);133}134.peach-shell[data-surface="extension"] .peach-stage {135  min-height: 250px;136}137138/* Screen (unlock) */139.peach-screen {140  width: min(320px, 100vw);141  min-height: 100%;142  height: 100%;143  border-radius: 0;144  padding: 16px 20px 18px;145  display: grid;146  gap: 14px;147}148.peach-screen[data-motion-phase="enter"] {149  animation: peach-screen-enter var(--peach-dur-600) var(--peach-curve-arrival) both;150}151.peach-screen-header { min-height: 20px; }152153/* Wordmark */154.peach-wordmark {155  margin: 0;156  font-family: var(--font-display);157  font-size: 0.9375rem;158  font-style: italic;159  letter-spacing: 0.03em;160  color: var(--peach-t0);161  display: inline-flex;162  min-height: 1em;163}164165/* Motion text / char animation */166.peach-motion-text { display: inline-flex; min-height: 1em; }167.peach-motion-char {168  display: inline-block;169  white-space: pre;170  opacity: 0;171  transform: translateY(0.22em);172  animation: peach-char-enter var(--peach-motion-duration, 380ms) var(--peach-curve-arrival) forwards;173  animation-delay: calc(var(--peach-char-index, 0) * 20ms);174}175176/* Chrome */177.peach-chrome {178  position: relative;179  z-index: 10;180  padding: 16px 20px 0;181  display: flex;182  justify-content: space-between;183  align-items: center;184  /* z-index:10 keeps the header icons above `.peach-loading` (Suspense185     fallback) per §15 regression guard. Without pointer-events:none, the186     empty header strip also sits above `.peach-overlay-view` (z-index:2)187     and swallows clicks meant for an overlay's back button / top search. */188  pointer-events: none;189}190.peach-chrome .peach-btn { pointer-events: auto; }191.peach-chrome.is-hidden-for-overlay,192.peach-search-wrap.is-hidden-for-overlay {193  opacity: 0;194  visibility: hidden;195  pointer-events: none;196}197/* Chirp-sync owns its own surface and header — fully collapse the global198   chrome row so the warm gradient reaches the popup edge. */199.peach-chrome.is-collapsed,200.peach-search-wrap.is-collapsed {201  display: none;202}203.peach-wordmark-wrap { display: flex; align-items: center; gap: 5px; }204.peach-status-pip {205  width: 5px;206  height: 5px;207  border-radius: 50%;208  background: var(--peach-t3);209  display: inline-flex;210  flex-shrink: 0;211  transition: background 400ms ease, box-shadow 400ms ease;212}213.peach-chrome-actions { display: flex; gap: 6px; }214215/* Shell body */216.peach-shell-body {217  position: relative;218  display: grid;219  grid-template-rows: 1fr auto;220  min-height: 0;221  min-width: 0;222  width: 100%;223  overflow: hidden;224  height: 100%;225}226.peach-shell-veil {227  position: absolute; inset: 0;228  background: #000; opacity: 0;229  pointer-events: none; z-index: 1;230}231.peach-shell[data-motion-phase="enter"] .peach-shell-body {232  animation: peach-shell-fade-in var(--peach-dur-600) var(--peach-curve-arrival) both;233}234.peach-shell[data-motion-phase="exit"] .peach-shell-veil {235  animation: peach-veil-in 300ms var(--peach-curve-departure) forwards;236}237238/* Content frame */239.peach-content-frame {240  display: grid;241  grid-template-rows: 1fr auto;242  grid-template-columns: minmax(0, 1fr);243  align-content: start;244  min-height: 0;245  min-width: 0;246  overflow: hidden;247  transition: opacity 80ms ease, transform 80ms ease;248}249.peach-content-frame.navigating {250  opacity: 0.93;251  transform: translateX(2px);252}253.peach-content-frame[data-content-phase="enter"] {254  animation: peach-content-enter 135ms ease-out both;255}256.peach-content-frame[data-content-phase="exit"] {257  animation: peach-content-exit 95ms ease-in forwards;258}259.peach-content-frame[data-content-phase="idle"] { opacity: 1; transform: none; }260261/* Stage */262.peach-stage {263  padding: 10px 20px 12px;264  display: grid;265  gap: 12px;266  align-content: start;267  min-width: 0;268  min-height: 0;269  max-width: 100%;270  overflow-y: auto;271  overflow-x: hidden;272  scrollbar-width: none;273  -ms-overflow-style: none;274  overscroll-behavior: contain;275}276.peach-stage::-webkit-scrollbar { display: none; }277278/* Entry name */279.peach-entry-name-wrap { position: relative; overflow: hidden; max-width: 100%; }280.peach-entry-header {281  position: relative;282  z-index: 1;283  display: flex;284  align-items: flex-start;285  gap: 6px;286  min-width: 0;287}288.peach-entry-header-name {289  flex: 1;290  min-width: 0;291}292.peach-entry-name {293  margin: 0;294  padding-bottom: 0.12em;295  font-family: var(--font-display);296  font-style: italic; font-weight: 400;297  font-size: 44px; line-height: 0.95;298  color: var(--peach-t0);299  display: -webkit-box;300  -webkit-line-clamp: 2;301  -webkit-box-orient: vertical;302  overflow: hidden;303  text-wrap: balance;304}305.peach-entry-name--lg { font-size: 40px; }306.peach-entry-name--xl { font-size: 34px; line-height: 0.98; }307.peach-entry-name--xxl { font-size: 30px; line-height: 1.02; }308.peach-entry-name-text { display: block; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; padding-bottom: 0.12em; }309310/* Trash icon in entry header */311.peach-entry-trash-btn {312  flex-shrink: 0;313  padding: 4px;314  margin-top: 4px;315  background: transparent;316  border: none;317  cursor: pointer;318  color: var(--peach-t2);319  border-radius: 4px;320  transition: color 140ms ease, background 140ms ease;321  display: flex;322  align-items: center;323  justify-content: center;324}325.peach-entry-trash-btn:hover {326  color: var(--peach-t1);327  background: var(--peach-t3);328}329.peach-entry-trash-confirm {330  display: flex;331  align-items: center;332  gap: 6px;333  flex-shrink: 0;334  margin-top: 6px;335  flex-wrap: nowrap;336}337.peach-entry-trash-confirm-label {338  font-family: var(--font-mono);339  font-size: 0.5625rem;340  letter-spacing: 0.1em;341  color: var(--peach-t2);342  white-space: nowrap;343}344.peach-entry-name-button {345  padding: 0;346  background: transparent;347  text-align: left;348  cursor: pointer;349  max-width: 100%;350  overflow: hidden;351  display: block;352}353.peach-entry-name-char {354  display: inline-block;355  white-space: pre;356  opacity: 0;357  transform: translateY(0.22em);358  animation: peach-char-enter 380ms var(--peach-curve-arrival) forwards;359  animation-delay: calc(var(--char-index, 0) * 20ms);360}361362/* Domain */363.peach-domain { border-top: 1px solid var(--peach-t3); padding-top: 9px; }364.peach-domain-row {365  width: 100%; border: 0; background: transparent; color: inherit;366  padding: 0; display: flex; justify-content: space-between; align-items: baseline;367  cursor: default;368}369.peach-domain-value {370  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;371  font-size: 0.625rem; font-style: italic;372  letter-spacing: 0.12em; color: var(--peach-t1);373}374375/* Fields */376.peach-fields { display: grid; gap: 10px; }377.peach-field-card { display: grid; gap: 7px; }378.peach-label {379  font-family: Inter, system-ui, sans-serif;380  text-transform: uppercase; letter-spacing: 0.2em;381  font-size: 0.5rem; color: var(--peach-t2);382}383.peach-add-field-btn {384  align-self: flex-start;385  background: none; border: none; padding: 2px 0;386  font-family: Inter, system-ui, sans-serif;387  font-size: 0.6875rem; color: var(--peach-accent);388  cursor: pointer; opacity: 0.75;389  letter-spacing: 0.02em;390}391.peach-add-field-btn:hover { opacity: 1; }392.peach-field-value-row {393  display: flex; justify-content: space-between;394  align-items: center; gap: 8px;395  min-width: 0;396}397.peach-field-value {398  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;399  font-size: 0.8125rem; color: var(--peach-t1);400  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;401  flex: 1;402  min-width: 0;403}404.peach-password-value {405  display: inline-flex;406  align-items: center;407  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;408  font-size: 1rem; letter-spacing: 0.3em; color: var(--peach-t0);409  overflow: hidden;410  text-overflow: ellipsis;411  white-space: nowrap;412  flex: 1;413  min-width: 0;414  max-width: 100%;415}416.peach-password-value.is-revealed {417  font-size: 0.875rem;418  letter-spacing: 0.08em;419}420.peach-password-text,421.peach-password-mask {422  display: block;423  width: 100%;424  overflow: hidden;425  white-space: nowrap;426  /* Render as uniform mid-line bullets, not baseline periods */427  font-family: Inter, system-ui, sans-serif;428  font-size: 0.625rem;429  letter-spacing: 3px;430  user-select: none;431}432.peach-field-actions { display: flex; gap: 4px; align-items: center; }433.peach-password-strength { display: flex; align-items: center; gap: 8px; }434.peach-strength-bar { display: flex; gap: 3px; }435.peach-strength-seg { width: 28px; height: 4px; border-radius: 2px; background: #eee; }436.peach-strength-label {437  font-family: "IBM Plex Mono", monospace;438  font-style: italic;439  font-size: 0.5625rem;440  font-weight: 300;441  min-width: 36px;442  text-align: right;443  color: var(--peach-t2);444  letter-spacing: 0.06em;445}446447.peach-strength-hairline {448  display: flex;449  align-items: center;450  gap: 10px;451  margin-top: -2px;452}453454.peach-strength-hairline-track {455  flex: 1;456  height: 3px;457  border-radius: 2px;458  background: var(--peach-s2);459  overflow: hidden;460}461462.peach-strength-hairline-fill {463  height: 100%;464  border-radius: 2px;465  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),466    background 400ms ease;467}468469/* Note content (display) */470.peach-note-content {471  border-top: 1px solid var(--peach-t3);472  padding-top: 10px;473  font-family: var(--font-display);474  font-size: 0.9375rem;475  line-height: 1.75;476  color: var(--peach-t1);477}478479/* ── Inline editing ─────────────────────────────────────────────────── */480481/* Clickable display values */482.peach-inline-clickable {483  cursor: text;484  border-radius: 3px;485  transition: background 150ms ease;486}487.peach-inline-clickable:hover {488  background: rgba(240, 232, 216, 0.05);489}490491/* Subtle "edit" hint that appears on hover */492.peach-inline-edit-hint {493  font-family: Inter, system-ui, sans-serif;494  font-size: 0.5625rem;495  text-transform: uppercase;496  letter-spacing: 0.14em;497  color: var(--peach-t2);498  opacity: 0;499  transition: opacity 120ms ease;500  pointer-events: none;501  margin-left: 6px;502  flex-shrink: 0;503}504.peach-domain-row:hover .peach-inline-edit-hint {505  opacity: 1;506}507508/* Title editing */509.peach-inline-title-wrap {510  display: flex;511  flex-direction: column;512  gap: 6px;513}514.peach-inline-title-input {515  font-family: var(--font-display);516  font-style: italic;517  font-weight: 400;518  font-size: 40px;519  line-height: 0.95;520  color: var(--peach-t0);521  background: transparent;522  border: none;523  border-bottom: 1px solid var(--peach-accent);524  outline: none;525  width: 100%;526  padding: 2px 0;527}528529/* Generic inline field */530.peach-inline-field-wrap {531  display: flex;532  flex-direction: column;533  gap: 6px;534}535.peach-inline-input {536  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;537  font-size: 0.8125rem;538  color: var(--peach-t0);539  background: transparent;540  border: none;541  border-bottom: 1px solid var(--peach-accent);542  outline: none;543  width: 100%;544  padding: 3px 0;545}546.peach-inline-textarea {547  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;548  font-size: 0.6875rem;549  line-height: 1.7;550  color: var(--peach-t0);551  background: rgba(240, 232, 216, 0.04);552  border: 1px solid var(--peach-accent);553  border-radius: 4px;554  outline: none;555  width: 100%;556  padding: 8px;557  resize: vertical;558  min-height: 80px;559}560561/* Save / cancel row */562.peach-inline-actions {563  display: flex;564  gap: 6px;565  align-items: center;566}567.peach-inline-save-btn,568.peach-inline-cancel-btn {569  display: inline-flex;570  align-items: center;571  justify-content: center;572  width: 26px;573  height: 26px;574  border-radius: 4px;575  border: none;576  cursor: pointer;577  transition: background 140ms ease, opacity 140ms ease;578  flex-shrink: 0;579}580.peach-inline-save-btn {581  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);582  color: var(--peach-accent);583}584.peach-inline-save-btn:hover:not(:disabled) {585  background: color-mix(in srgb, var(--peach-accent) 30%, transparent);586}587.peach-inline-cancel-btn {588  background: rgba(240, 232, 216, 0.06);589  color: var(--peach-t2);590}591.peach-inline-cancel-btn:hover:not(:disabled) {592  background: rgba(240, 232, 216, 0.12);593  color: var(--peach-t1);594}595.peach-inline-save-btn:disabled,596.peach-inline-cancel-btn:disabled {597  opacity: 0.4;598  cursor: not-allowed;599}600601/* Inline password generator wrapper */602.peach-inline-generator-wrap {603  margin-top: 10px;604  padding-top: 10px;605  border-top: 1px solid var(--peach-t3);606  display: flex;607  flex-direction: column;608  gap: 8px;609}610.peach-inline-generator-cancel {611  align-self: flex-start;612  font-size: 0.6875rem;613  color: var(--peach-t2);614}615616/* "is-editing" card state */617.peach-field-card.is-editing {618  background: rgba(240, 232, 216, 0.02);619  border-radius: 6px;620  padding: 8px;621  margin: -8px;622}623624/* Inline tag editor on Entry detail view */625.peach-inline-tag-editor {626  display: flex;627  flex-direction: column;628  gap: 6px;629}630631/* Quiet inline "+ add X" link in the entry detail body */632.peach-entry-add-link {633  justify-self: start;634  margin-top: 8px;635}636637/* Additional URLs editor revealed by clicking the URL field */638.peach-additional-urls {639  display: flex;640  flex-direction: column;641  gap: 6px;642  margin-top: 8px;643}644.peach-additional-urls-label {645  font-size: 0.5625rem;646  letter-spacing: 0.1em;647  text-transform: uppercase;648  color: var(--peach-t2);649  margin-bottom: 2px;650}651/* UI-8 / LV-2: non-blocking homograph warning under the URL editor. */652.peach-homograph-warning {653  margin: 4px 0 2px;654  padding: 6px 8px;655  border-radius: 6px;656  background: color-mix(in srgb, var(--peach-breach) 12%, transparent);657  border: 1px solid color-mix(in srgb, var(--peach-breach) 36%, transparent);658  color: var(--peach-t1);659  font-size: 0.6875rem;660  line-height: 1.4;661}662.peach-additional-url-row {663  display: flex;664  align-items: center;665  gap: 6px;666}667.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }668.peach-additional-url-remove {669  background: transparent;670  border: 1px solid var(--peach-t3);671  color: var(--peach-t2);672  width: 22px;673  height: 22px;674  border-radius: 4px;675  cursor: pointer;676  font-size: 0.875rem;677  line-height: 1;678  display: inline-flex;679  align-items: center;680  justify-content: center;681  flex-shrink: 0;682  transition: color 120ms ease, border-color 120ms ease;683}684.peach-additional-url-remove:hover:not(:disabled) {685  color: var(--peach-accent);686  border-color: var(--peach-border-accent);687}688.peach-additional-urls-add { align-self: flex-start; }689690/* Delete row */691.peach-entry-delete-row {692  display: flex;693  align-items: center;694  gap: 8px;695  padding-top: 18px;696  margin-top: 8px;697  border-top: 1px solid var(--peach-t3);698}699.peach-delete-btn {700  font-size: 0.6875rem;701  color: var(--peach-t2);702  padding: 4px 0;703}704.peach-delete-confirm-text {705  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;706  font-size: 0.6875rem;707  font-style: italic;708  color: var(--peach-t2);709  flex-shrink: 0;710}711712/* TOTP band */713.peach-totp-band {714  border-top: 1px solid var(--peach-t3);715  padding: 12px 20px 14px;716  position: relative;717  display: grid;718  grid-template-columns: 1fr auto;719  gap: 10px;720}721.peach-totp-main {722  min-width: 0;723  cursor: pointer;724  user-select: none;725}726.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }727.peach-totp-code-row {728  display: flex;729  align-items: flex-end;730  gap: 10px;731  min-width: 0;732}733.peach-totp-code {734  margin: 2px 0 0;735  font-family: var(--font-display);736  font-style: italic;737  font-weight: 300;738  font-size: 38px; color: var(--peach-accent);739  line-height: 0.95; min-height: 1em;740  min-width: 0;741}742.peach-totp-code-text {743  display: inline-flex;744  overflow: hidden;745  text-overflow: ellipsis;746  white-space: nowrap;747}748.peach-totp-copy-btn {749  margin-bottom: 2px;750  flex-shrink: 0;751  border-color: transparent;752}753.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }754.peach-totp-countdown {755  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;756  font-size: 22px; color: var(--peach-t1);757}758.peach-totp-ring { transform: rotate(-90deg); }759.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }760.peach-totp-ring-progress {761  fill: none; stroke: var(--peach-accent); stroke-width: 2;762  stroke-linecap: round;763  transition: stroke-dashoffset 1s linear, stroke 500ms ease;764}765/* Search bar */766.peach-search-wrap {767  border-top: 1px solid var(--peach-t3);768  background: var(--peach-s1);769  min-height: 54px; position: relative;770  box-shadow: inset 0 6px 18px transparent;771  transition: box-shadow 700ms ease;772}773.peach-search-wrap::before {774  content: "";775  position: absolute;776  left: 0;777  top: 0;778  height: 2px;779  width: var(--peach-totp-progress, 0%);780  background: var(--peach-accent);781  opacity: 0;782  transition: width 1s linear, opacity 180ms ease;783  pointer-events: none;784}785.peach-shell[data-totp-active="true"] .peach-search-wrap::before {786  opacity: 0.9;787}788.peach-shell[data-totp-active="true"] .peach-search-wrap {789  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);790}791792@keyframes peach-totp-code-flare {793  0%   { filter: brightness(1); }794  25%  { filter: brightness(1.3); }795  100% { filter: brightness(1); }796}797.peach-totp-code.is-hot {798  animation: peach-totp-code-flare 3000ms ease-in-out both;799}800.peach-search-bar {801  min-height: 54px;802  display: grid;803  grid-template-columns: auto minmax(0, 1fr) auto;804  align-items: center;805  gap: 8px; padding: 0 9px 0 12px;806}807.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }808.peach-search-input {809  border: 0; background: transparent; color: var(--peach-t0);810  font-family: var(--font-display);811  font-style: italic; font-size: 18px;812  outline: none; width: 100%; min-width: 0; padding: 0;813  caret-color: var(--peach-accent);814}815.peach-search-input::placeholder { color: var(--peach-t2); }816.peach-search-meta {817  display: grid;818  grid-auto-flow: column;819  align-items: center;820  justify-content: end;821  gap: 6px;822  min-width: max-content;823}824.peach-search-counter {825  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;826  font-size: 0.625rem; color: var(--peach-t2);827  display: inline-flex;828  align-items: center;829  line-height: 1;830}831.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }832833/* Buttons */834.peach-btn {835  border: 1px solid transparent; border-radius: 12px;836  background: transparent; color: var(--peach-t0);837  font-family: Inter, system-ui, sans-serif;838  font-size: 0.75rem; letter-spacing: 0.02em; padding: 8px 12px;839  cursor: pointer;840  transition:841    background-color var(--peach-dur-80) var(--peach-curve-arrival),842    color var(--peach-dur-80) var(--peach-curve-arrival),843    border-color var(--peach-dur-150) var(--peach-curve-arrival);844}845.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }846.peach-btn:disabled {847  opacity: 0.45;848  cursor: not-allowed;849}850.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 0.6875rem; }851.peach-btn--md { min-height: 38px; }852.peach-btn--accent {853  background: var(--peach-accent);854  color: rgba(0,0,0,0.92);855  font-weight: 500;856  box-shadow:857    0 1px 0 rgba(255,255,255,0.08) inset,858    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),859    0 3px 16px var(--peach-glow),860    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);861}862.peach-btn--accent:hover:not(:disabled) {863  background: var(--peach-accent);864  filter: brightness(1.10) saturate(1.05);865  box-shadow:866    0 1px 0 rgba(255,255,255,0.10) inset,867    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),868    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),869    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);870}871.peach-btn--ghost:not(.peach-icon-btn) { border-color: var(--peach-t3); color: var(--peach-t1); }872.peach-btn--ghost.peach-icon-btn { color: var(--peach-t1); }873.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }874.peach-icon-btn {875  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;876  display: inline-flex; align-items: center; justify-content: center;877  border-color: transparent;878  transition:879    color var(--peach-dur-80) var(--peach-curve-arrival),880    box-shadow var(--peach-dur-150) var(--peach-curve-arrival),881    background-color var(--peach-dur-80) var(--peach-curve-arrival);882}883.peach-icon-btn:hover:not(:disabled) {884  background: transparent;885  color: var(--peach-accent);886  box-shadow: 0 0 12px color-mix(in srgb, var(--peach-accent) 28%, transparent),887              0 0 4px color-mix(in srgb, var(--peach-accent) 16%, transparent);888}889890.peach-btn:focus-visible {891  outline: none;892  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);893}894895/* Lock button */896.peach-lock-icon { transform-origin: center; }897.peach-lock-btn { color: var(--peach-accent); }898.peach-lock-btn.is-locking .peach-lock-icon {899  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);900}901902/* Biometric unlock button */903.peach-biometric-btn {904  display: flex;905  align-items: center;906  justify-content: center;907  gap: 6px;908  margin-top: 8px;909  width: 100%;910}911912/* Copy button */913.peach-copy-btn {914  position: relative; overflow: hidden;915  color: var(--peach-t2); border-color: var(--peach-t3);916}917.peach-copy-icon {918  display: inline-flex; align-items: center; justify-content: center;919  position: relative; z-index: 1;920}921.peach-copy-icon-svg { display: block; }922.peach-copy-sheen {923  position: absolute; inset: 0;924  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%);925  opacity: 0; transform: scaleX(0.15); transform-origin: left center;926}927.peach-copy-btn.is-copied {928  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;929  box-shadow:930    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),931    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),932    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);933}934.peach-copy-btn.is-copied .peach-copy-icon {935  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;936}937.peach-copy-btn.is-copied .peach-copy-sheen {938  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;939}940.peach-copy-btn.is-retreat {941  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;942}943.peach-copy-btn.is-retreat .peach-copy-sheen {944  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;945}946.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }947.peach-copy-drain-bar {948  display: block; width: 100%; height: 100%;949  background: var(--peach-accent); opacity: 0.7;950  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;951}952953/* Unlock screen elements */954.peach-underline-input {955  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);956  padding: 6px 0; background: transparent; color: var(--peach-t0);957  outline: none;958  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;959  font-size: 0.8125rem;960  caret-color: var(--peach-accent);961}962.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }963.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }964.peach-hint {965  margin: 0;966  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;967  font-size: 0.625rem; color: var(--peach-t2);968}969.peach-unlock-footer {970  margin-top: 4px; display: flex; align-items: center; gap: 7px;971  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;972  font-size: 0.625rem; color: var(--peach-t2);973}974.peach-unlock-footer--lock {975  padding-top: 2px;976}977978/* Breach badge */979.peach-breach-badge {980  display: flex;981  position: relative;982  z-index: 1;983  align-items: center;984  gap: 7px;985  font-size: 0.5625rem;986  color: var(--peach-breach);987  padding: 5px 10px;988  margin-bottom: 4px;989  border-radius: 8px;990  background: rgba(220, 80, 60, 0.07);991  border: 1px solid rgba(220, 80, 60, 0.18);992  letter-spacing: 0.04em;993}994995.peach-password-value.is-breached {996  color: rgba(220, 80, 60, 0.75);997  border-bottom: 1px solid rgba(220, 80, 60, 0.22);998}9991000/* ── Overlay views ─────────────────────────────────────────────────── */1001.peach-overlay-view {1002  position: absolute;1003  inset: 0;1004  display: flex;1005  flex-direction: column;1006  background:1007    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1008    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1009    var(--peach-bg);1010  z-index: 2;1011  overflow: hidden;1012  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1013}10141015.peach-overlay-view:has(.stk-shell) {1016  background: var(--peach-bg);1017}1018@keyframes overlay-in {1019  from { opacity: 0; transform: translateY(8px); }1020  to   { opacity: 1; transform: translateY(0); }1021}1022.peach-overlay-view.ov-enter-up {1023  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1024}1025.peach-overlay-view.ov-exit-up {1026  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1027}1028.peach-overlay-view.ov-enter-right {1029  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1030}1031.peach-overlay-view.ov-exit-right {1032  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1033}10341035@keyframes ov-enter-up {1036  from { opacity: 0; transform: translateY(18px); }1037  to   { opacity: 1; transform: translateY(0); }1038}1039@keyframes ov-exit-up {1040  from { opacity: 1; transform: translateY(0); }1041  to   { opacity: 0; transform: translateY(-12px); }1042}1043@keyframes ov-enter-right {1044  from { opacity: 0; transform: translateX(20px); }1045  to   { opacity: 1; transform: translateX(0); }1046}1047@keyframes ov-exit-right {1048  from { opacity: 1; transform: translateX(0); }1049  to   { opacity: 0; transform: translateX(20px); }1050}10511052/* Overlay shared header */1053.peach-overlay-header {1054  padding: 10px 12px 8px;1055  display: flex;1056  align-items: center;1057  gap: 10px;1058  flex-shrink: 0;1059}1060/* Back button — circular pill matching the settings stack masthead (.stk-back) */1061.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1062  width: 28px;1063  height: 28px;1064  flex: 0 0 28px;1065  border-radius: 999px;1066  border: 1px solid var(--peach-border);1067  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1068  color: var(--peach-t1);1069  padding: 0;1070}1071.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1072  color: var(--peach-t0);1073  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1074  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1075}1076.peach-overlay-title {1077  font-family: var(--font-display);1078  font-style: italic;1079  font-weight: 400;1080  font-size: 20px;1081  line-height: 1;1082  color: var(--peach-t0);1083  flex: 1;1084  text-align: center;1085}1086/* Balances the 28px back button so the title stays visually centred */1087.peach-overlay-spacer {1088  width: 28px;1089  flex: 0 0 28px;1090}10911092.peach-overlay-card {1093  background: var(--peach-s1);1094  border: 1px solid var(--peach-t3);1095  border-radius: 12px;1096  overflow: hidden;1097  width: 100%;1098}10991100.peach-onboarding-alt-actions {1101  display: flex;1102  flex-direction: column;1103  gap: 4px;1104  padding: 0;1105}11061107.peach-settings-copy {1108  margin: 0 0 10px;1109  font-size: 0.6875rem;1110  line-height: 1.5;1111  color: var(--peach-t2);1112}11131114.peach-settings-copy strong {1115  color: var(--peach-t0);1116}11171118.peach-settings-copy--spacious {1119  margin-bottom: 12px;1120}11211122.peach-settings-copy--result {1123  color: var(--peach-accent);1124  font-size: 0.8125rem;1125  text-align: center;1126  padding: 8px 0;1127}11281129.peach-settings-copy--danger {1130  color: var(--peach-breach);1131}11321133.peach-settings-copy--success {1134  color: var(--peach-accent);1135}11361137.peach-inline-feedback {1138  font-size: 0.6875rem;1139  margin: 10px 0 0;1140}11411142.peach-inline-feedback--ok {1143  color: var(--peach-accent);1144}11451146.peach-inline-feedback--error {1147  color: var(--peach-breach);1148}11491150.peach-inline-feedback--muted {1151  color: var(--peach-t2);1152  font-size: 0.625rem;1153  margin: 4px 0;1154}11551156.peach-inline-feedback--spaced {1157  margin-top: 12px;1158}11591160.peach-settings-actions--row {1161  display: flex;1162  gap: 6px;1163}11641165.peach-settings-actions--end {1166  margin-top: 14px;1167  justify-content: flex-end;1168}11691170.peach-settings-stack {1171  display: flex;1172  flex-direction: column;1173  gap: 6px;1174}11751176.peach-settings-stack--tight {1177  gap: 4px;1178}11791180.peach-settings-stack--spacious {1181  gap: 8px;1182}11831184.peach-settings-input {1185  width: 100%;1186  box-sizing: border-box;1187  padding: 8px 10px;1188  background: rgba(0, 0, 0, 0.22);1189  border: 1px solid transparent;1190  border-radius: 6px;1191  color: var(--peach-t0);1192  font-family: var(--font-ui);1193  font-size: 0.75rem;1194  outline: none;1195  transition: border-color 120ms ease, background 120ms ease;1196}11971198.peach-settings-input:focus {1199  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1200  background: rgba(0, 0, 0, 0.28);1201}12021203.peach-settings-input[type="password"] {1204  font-family: var(--font-mono);1205  letter-spacing: 0.04em;1206}12071208.peach-hidden-file-input {1209  display: none;1210}12111212.peach-checkbox-note {1213  display: flex;1214  align-items: flex-start;1215  gap: 8px;1216  font-size: 0.6875rem;1217  color: var(--peach-t1);1218  cursor: pointer;1219  margin: 12px 0;1220}12211222.peach-checkbox-note input {1223  margin-top: 1px;1224}12251226.peach-danger-notice {1227  background: rgba(220, 80, 60, 0.08);1228  border: 1px solid rgba(220, 80, 60, 0.2);1229  border-radius: 6px;1230  padding: 9px 11px;1231  font-size: 0.6875rem;1232  color: var(--peach-t1);1233  line-height: 1.5;1234}12351236.peach-info-notice {1237  font-size: 0.6875rem;1238  color: var(--peach-t1);1239  line-height: 1.5;1240  background: var(--surface-card);1241  border: 1px solid var(--peach-t3);1242  border-radius: 6px;1243  padding: 8px 10px;1244}12451246.peach-info-notice--warn {1247  border-color: rgba(220, 38, 38, 0.4);1248  background: rgba(220, 38, 38, 0.06);1249  color: rgba(220, 38, 38, 0.92);1250  margin-bottom: 8px;1251}12521253.peach-strength-row {1254  display: flex;1255  align-items: center;1256  gap: 8px;1257  margin-bottom: 10px;1258}12591260.peach-strength-track {1261  flex: 1;1262  height: 4px;1263  background: var(--peach-s2);1264  border-radius: 2px;1265  overflow: hidden;1266}12671268.peach-strength-fill {1269  height: 100%;1270  border-radius: 2px;1271  transition: width 120ms ease, background 120ms ease;1272}12731274/* ── Type selector tabs ── */1275.peach-type-tabs {1276  display: flex;1277  gap: 0;1278  background: var(--peach-t4);1279  border-radius: 8px;1280  padding: 3px;1281}12821283.peach-type-tab {1284  flex: 1;1285  display: flex;1286  align-items: center;1287  justify-content: center;1288  gap: 6px;1289  padding: 6px 10px;1290  border-radius: 6px;1291  border: none;1292  background: transparent;1293  cursor: pointer;1294  font-family: Inter, system-ui, sans-serif;1295  font-size: 0.6875rem;1296  font-weight: 400;1297  letter-spacing: 0.04em;1298  color: var(--peach-t1);1299  transition: background 150ms ease, color 150ms ease;1300}13011302.peach-type-tab.is-active {1303  background: var(--peach-s2);1304  color: var(--peach-t0);1305  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1306}13071308.peach-type-tab:not(.is-active):hover {1309  color: var(--peach-t0);1310}13111312.peach-type-tab svg {1313  opacity: 0.7;1314  flex-shrink: 0;1315}13161317.peach-type-tab.is-active svg {1318  opacity: 1;1319}13201321/* ── List view ───────────────────────────────────────────────────────── */1322.peach-list-top {1323  padding: 0 10px;1324  min-height: 46px;1325  display: flex;1326  align-items: center;1327  gap: 6px;1328  border-bottom: 1px solid var(--peach-t3);1329  flex-shrink: 0;1330  background: var(--peach-s1);1331}13321333.peach-vault-list {1334  flex: 1;1335  overflow-y: auto;1336  scrollbar-width: none;1337}1338.peach-vault-list::-webkit-scrollbar { display: none; }13391340/* Scrollbar — vault list */1341.peach-vault-list {1342  scrollbar-width: thin;1343  scrollbar-color: var(--peach-t3) transparent;1344}13451346.peach-vault-list::-webkit-scrollbar {1347  width: 3px;1348}13491350.peach-vault-list::-webkit-scrollbar-thumb {1351  background: var(--peach-t3);1352  border-radius: 2px;1353}13541355.peach-entry-row {1356  width: 100%;1357  display: flex;1358  align-items: center;1359  gap: 10px;1360  padding: 9px 16px;1361  background: transparent;1362  border: none;1363  border-bottom: 1px solid var(--peach-t3);1364  cursor: pointer;1365  color: inherit;1366  text-align: left;1367  transition: background 80ms ease;1368}1369.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1370.peach-entry-row:last-child { border-bottom: none; }1371.peach-entry-row.is-active {1372  box-shadow: inset 2px 0 0 var(--peach-accent);1373  background: rgba(240,232,216,0.03);1374}1375.peach-entry-row:focus-visible {1376  outline: none;1377  box-shadow: 0 0 0 1px var(--peach-border-accent);1378  background: rgba(240,232,216,0.03);1379}1380.peach-entry-row-icon {1381  width: 26px; height: 26px;1382  border-radius: 7px;1383  border: 1px solid var(--peach-t3);1384  display: flex; align-items: center; justify-content: center;1385  color: var(--peach-t2);1386  flex-shrink: 0;1387}1388.peach-entry-row-icon.is-breach {1389  border-color: rgba(220,80,60,0.3);1390  color: rgba(220,80,60,0.7);1391}13921393/* Title-initials chip used as the favicon fallback for login entries whose1394 * real favicon hasn't been cached by the browser yet (freshly-imported,1395 * never-visited domains). Background colour is hashed from the title so1396 * the same entry always shows the same chip. The chip fits the same1397 * 26×26 row icon slot the favicon would take. */1398.peach-favicon-initials {1399  display: inline-flex;1400  align-items: center;1401  justify-content: center;1402  width: 100%;1403  height: 100%;1404  border-radius: 4px;1405  font-family: "IBM Plex Mono", monospace;1406  font-size: 0.5625rem;1407  font-weight: 600;1408  letter-spacing: 0.04em;1409  color: rgba(240, 232, 216, 0.92);1410  text-transform: uppercase;1411  user-select: none;1412}1413.peach-entry-row-info { flex: 1; min-width: 0; }1414.peach-entry-row-name {1415  display: block;1416  font-family: var(--font-display);1417  font-size: 1.0625rem;1418  font-style: italic;1419  font-weight: 400;1420  color: var(--peach-t0);1421  line-height: 1.2;1422  white-space: nowrap;1423  overflow: hidden;1424  text-overflow: ellipsis;1425}1426.peach-entry-row-meta {1427  display: block;1428  font-family: "IBM Plex Mono", monospace;1429  font-size: 0.5625rem;1430  color: var(--peach-t2);1431  margin-top: 1px;1432  letter-spacing: 0.05em;1433}1434.peach-entry-row-dot {1435  width: 5px; height: 5px;1436  border-radius: 50%;1437  background: rgba(220,80,60,0.7);1438  flex-shrink: 0;1439}1440.peach-new-entry-row {1441  display: flex;1442  align-items: center;1443  justify-content: center;1444  gap: 6px;1445  width: 100%;1446  padding: 11px;1447  background: transparent;1448  border: none;1449  border-top: 1px solid var(--peach-t3);1450  color: var(--peach-t2);1451  font-family: "IBM Plex Mono", monospace;1452  font-size: 0.5625rem;1453  text-transform: uppercase;1454  letter-spacing: 0.14em;1455  cursor: pointer;1456  flex-shrink: 0;1457  transition: color 120ms ease, background 120ms ease;1458}1459.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }14601461/* ── Multi-select mode ─────────────────────────────────────────────── */14621463/* Select-mode trigger button in sort bar — same shape as trash btn */1464.peach-sort-select-btn {1465  display: flex;1466  align-items: center;1467  justify-content: center;1468  padding: 3px 5px;1469  background: transparent;1470  border: none;1471  cursor: pointer;1472  color: var(--peach-t2);1473  border-radius: 4px;1474  transition: color 140ms ease, background 140ms ease;1475}1476.peach-sort-select-btn:hover {1477  color: var(--peach-t1);1478  background: var(--peach-t3);1479}14801481/* Sort bar in select mode */1482.peach-select-cancel-btn {1483  background: transparent;1484  border: none;1485  padding: 0 4px;1486  cursor: pointer;1487  font-family: "IBM Plex Mono", monospace;1488  font-size: 0.5625rem;1489  letter-spacing: 0.12em;1490  text-transform: uppercase;1491  color: var(--peach-t2);1492  transition: color 140ms ease;1493  flex-shrink: 0;1494}1495.peach-select-cancel-btn:hover { color: var(--peach-t0); }14961497.peach-select-count-label {1498  flex: 1;1499  text-align: center;1500  font-family: "IBM Plex Mono", monospace;1501  font-size: 0.5625rem;1502  letter-spacing: 0.14em;1503  text-transform: uppercase;1504  color: var(--peach-t1);1505}15061507.peach-select-all-btn {1508  background: transparent;1509  border: none;1510  padding: 0 4px;1511  cursor: pointer;1512  font-family: "IBM Plex Mono", monospace;1513  font-size: 0.5625rem;1514  letter-spacing: 0.12em;1515  text-transform: uppercase;1516  color: var(--peach-t2);1517  transition: color 140ms ease;1518  flex-shrink: 0;1519}1520.peach-select-all-btn:hover { color: var(--peach-accent); }15211522/* List in select mode */1523.peach-vault-list.is-selecting .peach-entry-row {1524  cursor: default;1525}1526.peach-vault-list.is-selecting .peach-entry-row:hover {1527  background: rgba(240,232,216,0.02);1528}1529.peach-vault-list.is-selecting .peach-entry-row.is-selected {1530  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1531}1532.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1533  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1534}15351536/* Select indicator circles in icon slot */1537.peach-entry-row-icon.is-select-icon {1538  color: var(--peach-t2);1539}1540.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1541  color: var(--peach-accent);1542}15431544/* Delete action bar at bottom (replaces new-entry row) */1545.peach-select-action-bar {1546  display: flex;1547  align-items: center;1548  justify-content: center;1549  gap: 7px;1550  width: 100%;1551  padding: 11px;1552  background: transparent;1553  border: none;1554  border-top: 1px solid var(--peach-t3);1555  color: var(--peach-t1);1556  font-family: "IBM Plex Mono", monospace;1557  font-size: 0.5625rem;1558  text-transform: uppercase;1559  letter-spacing: 0.14em;1560  cursor: pointer;1561  flex-shrink: 0;1562  transition: color 120ms ease, background 120ms ease;1563}1564.peach-select-action-bar:not(:disabled):hover {1565  color: var(--peach-t0);1566  background: rgba(220,80,60,0.06);1567}1568.peach-select-action-bar:not(:disabled):hover svg {1569  stroke: rgba(220,80,60,0.8);1570}1571.peach-select-action-bar:disabled,1572.peach-select-action-bar.is-empty {1573  color: var(--peach-t2);1574  cursor: default;1575  opacity: 0.5;1576}1577.peach-search-counter-list {1578  white-space: nowrap;1579  flex-shrink: 0;1580}1581.peach-list-empty {1582  min-height: 180px;1583  display: grid;1584  place-items: center;1585  color: var(--peach-t2);1586  font-family: "IBM Plex Mono", monospace;1587  font-size: 0.6875rem;1588}15891590/* ── Settings view ───────────────────────────────────────────────────── */1591.peach-settings-body {1592  flex: 1;1593  overflow-y: auto;1594  min-height: 0;1595  display: flex;1596  flex-direction: column;1597  padding: 2px 0 10px;1598}1599.peach-settings-group {1600  margin: 4px 10px;1601  padding: 9px 14px 11px;1602  border-radius: 12px;1603  border: 1px solid rgba(255, 255, 255, 0.07);1604  background: rgba(26, 20, 16, 0.60);1605  backdrop-filter: blur(10px) saturate(1.3);1606  -webkit-backdrop-filter: blur(10px) saturate(1.3);1607}16081609.peach-settings-group + .peach-settings-group {1610  margin-top: 6px;1611}16121613@supports not (backdrop-filter: blur(1px)) {1614  .peach-settings-group {1615    background: rgba(26, 20, 16, 0.90);1616    border-color: rgba(255, 255, 255, 0.09);1617    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1618  }1619}16201621.light .peach-settings-group,1622[data-theme="light"] .peach-settings-group {1623  background: rgba(245, 237, 226, 0.70);1624  border-color: rgba(26, 18, 8, 0.08);1625  backdrop-filter: blur(10px) saturate(1.2);1626  -webkit-backdrop-filter: blur(10px) saturate(1.2);1627}16281629@supports not (backdrop-filter: blur(1px)) {1630  .light .peach-settings-group,1631  [data-theme="light"] .peach-settings-group {1632    background: rgba(245, 237, 226, 0.97);1633    border-color: rgba(26, 18, 8, 0.10);1634  }1635}1636.peach-export-intro {1637  padding-bottom: 8px;1638}1639.peach-export-card {1640  display: grid;1641  gap: 10px;1642}1643.peach-rune-canvas {1644  border-radius: 8px;1645  background: rgba(0, 0, 0, 0.22);1646  flex: 1;1647  align-self: center;1648}1649.peach-script-input {1650  font-family: "PeachScript", monospace;1651  font-size: 0.6875rem;1652  line-height: 1.9;1653  letter-spacing: 0.06em;1654  color: var(--peach-t0);1655  background: rgba(0, 0, 0, 0.22);1656  border: none;1657  border-radius: 6px;1658  padding: 12px;1659  width: 100%;1660  min-height: 96px;1661  resize: vertical;1662  word-break: break-all;1663  scrollbar-width: none;1664  -ms-overflow-style: none;1665}16661667.peach-script-input::-webkit-scrollbar { display: none; }1668.peach-csv-warning {1669  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1670  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1671  color: var(--peach-t0);1672  border-radius: 6px;1673  padding: 10px 12px;1674  margin-bottom: 8px;1675  font-size: 0.75rem;1676  line-height: 1.45;1677}1678.peach-export-card--primary {1679  background:1680    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1681}16821683/* Export menu — distribute the three format cards across the popup. */1684.peach-export-menu {1685  display: flex;1686  flex-direction: column;1687  flex: 1;1688  min-height: 0;1689}1690.peach-export-menu .peach-settings-group {1691  flex: 1;1692  display: flex;1693  flex-direction: column;1694  justify-content: center;1695  gap: 10px;1696}16971698/* Result view — the script-string fills the remaining vertical surface. */1699.peach-export-result-group {1700  flex: 1;1701  display: flex;1702  flex-direction: column;1703  min-height: 0;1704  border-bottom: none;1705}1706.peach-export-result-group .peach-export-card {1707  flex: 1;1708  min-height: 0;1709  display: flex;1710  flex-direction: column;1711  gap: 10px;1712}1713.peach-export-result-group .peach-export-card-copy {1714  flex-shrink: 0;1715}1716.peach-export-result-group .peach-settings-label {1717  flex-shrink: 0;1718}1719.peach-export-result-group button {1720  flex-shrink: 0;1721}1722.peach-export-card-head {1723  display: flex;1724  align-items: center;1725  justify-content: space-between;1726  gap: 10px;1727}1728.peach-export-card-copy {1729  margin: 0;1730  font-size: 0.75rem;1731  line-height: 1.55;1732  color: var(--peach-t1);1733}1734.peach-export-note {1735  margin: 0;1736  font-size: 0.625rem;1737  line-height: 1.5;1738  color: var(--peach-t2);1739}1740.peach-export-strength-track {1741  height: 3px;1742  background: var(--peach-border);1743  border-radius: 2px;1744  margin: 4px 0 2px;1745  overflow: hidden;1746}1747.peach-export-strength-fill {1748  height: 100%;1749  border-radius: 2px;1750  transition: width 250ms ease, background 250ms ease;1751}1752.peach-export-strength-warn {1753  margin: 0;1754  font-size: 0.625rem;1755  line-height: 1.5;1756  color: #e84040;1757  font-family: "IBM Plex Mono", monospace;1758}1759.peach-export-strength-hint {1760  margin: 0;1761  font-size: 0.625rem;1762  line-height: 1.5;1763  color: var(--peach-t2);1764  font-family: "IBM Plex Mono", monospace;1765}1766.peach-export-pill {1767  display: inline-flex;1768  align-items: center;1769  padding: 4px 8px;1770  border-radius: 999px;1771  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1772  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1773  color: var(--peach-accent);1774  font-family: "IBM Plex Mono", monospace;1775  font-size: 0.5rem;1776  letter-spacing: 0.12em;1777  text-transform: uppercase;1778  white-space: nowrap;1779}1780.peach-export-pill--danger {1781  border-color: rgba(220,80,60,0.22);1782  background: rgba(220,80,60,0.08);1783  color: var(--peach-breach);1784}1785.peach-settings-label {1786  margin: 0 0 6px;1787  font-family: "IBM Plex Mono", monospace;1788  font-size: 0.5rem;1789  text-transform: uppercase;1790  letter-spacing: 0.18em;1791  color: var(--peach-t2);1792}1793.peach-settings-row {1794  display: flex;1795  align-items: center;1796  justify-content: space-between;1797  gap: 12px;1798  min-height: 34px;1799  padding: 6px 0;1800  font-size: 0.8125rem;1801  color: var(--peach-t1);1802}1803.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1804.peach-settings-value {1805  font-family: "IBM Plex Mono", monospace;1806  font-size: 0.625rem;1807  color: var(--peach-t2);1808}18091810.peach-settings-value--status {1811  display: flex;1812  align-items: center;1813  gap: 6px;1814}18151816.peach-settings-link {1817  font-family: "IBM Plex Mono", monospace;1818  font-size: 0.625rem;1819  color: var(--peach-accent);1820  text-decoration: none;1821  cursor: pointer;1822}1823.peach-settings-link:hover {1824  text-decoration: underline;1825}18261827.peach-settings-row--stack {1828  flex-direction: column;1829  align-items: stretch;1830  gap: 6px;1831}18321833.peach-settings-row--top {1834  align-items: flex-start;1835}18361837.peach-settings-row-main {1838  display: flex;1839  flex-direction: column;1840  gap: 4px;1841  flex: 1;1842}1843.peach-toggle {1844  width: 28px; height: 16px;1845  border-radius: 999px;1846  background: var(--peach-t3);1847  border: 1px solid var(--peach-t3);1848  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1849  flex-shrink: 0;1850  transition: background 200ms ease, border-color 200ms ease;1851  cursor: pointer;1852}1853.peach-toggle.is-on {1854  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1855  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1856}1857.peach-toggle-knob {1858  width: 10px; height: 10px;1859  border-radius: 50%;1860  background: var(--peach-t2);1861  flex-shrink: 0;1862  transform: translateX(0px);1863  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1864}1865.peach-toggle.is-on .peach-toggle-knob {1866  background: var(--peach-accent);1867  transform: translateX(12px);1868}1869.peach-settings-footer {1870  display: flex;1871  align-items: center;1872  gap: 8px;1873  margin-top: auto;1874  padding: 14px 16px 8px;1875  font-family: "IBM Plex Mono", monospace;1876  font-size: 0.5625rem;1877  color: var(--peach-t2);1878}18791880/* ── Settings home navigation ──────────────────────────────────────────── */1881.peach-settings-nav-label {1882  margin: 0 0 2px;1883  padding: 12px 16px 4px;1884  font-family: "IBM Plex Mono", monospace;1885  font-size: 0.5rem;1886  text-transform: uppercase;1887  letter-spacing: 0.18em;1888  color: var(--peach-t2);1889}18901891.peach-settings-cat-row {1892  display: flex;1893  align-items: center;1894  gap: 10px;1895  width: 100%;1896  padding: 9px 16px;1897  background: none;1898  border: none;1899  border-bottom: 1px solid var(--peach-t3);1900  cursor: pointer;1901  text-align: left;1902  color: inherit;1903  transition: background var(--peach-dur-80) ease;1904}1905.peach-settings-cat-row:hover {1906  background: var(--peach-t3);1907}1908.peach-settings-cat-row:last-child {1909  border-bottom: none;1910}19111912.peach-settings-cat-icon {1913  width: 28px;1914  height: 28px;1915  border-radius: 7px;1916  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1917  color: var(--peach-accent);1918  display: flex;1919  align-items: center;1920  justify-content: center;1921  flex-shrink: 0;1922}1923/* Light theme: peach-on-cream is too low-contrast — both colors are warm.1924   Darken the icon stroke to ink and bump the bg tint so the icon reads1925   sharply while the cell still feels accent-tinted. */1926.light .peach-settings-cat-icon {1927  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);1928  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));1929}19301931.peach-settings-cat-content {1932  flex: 1;1933  display: flex;1934  flex-direction: column;1935  gap: 2px;1936  min-width: 0;1937}19381939.peach-settings-cat-name {1940  font-size: 0.8125rem;1941  font-weight: 450;1942  color: var(--peach-t0);1943  line-height: 1.2;1944}19451946.peach-settings-cat-desc {1947  font-size: 0.625rem;1948  color: var(--peach-t2);1949  line-height: 1.3;1950  white-space: nowrap;1951  overflow: hidden;1952  text-overflow: ellipsis;1953}19541955.peach-settings-cat-chevron {1956  color: var(--peach-t2);1957  flex-shrink: 0;1958  opacity: 0.5;1959}19601961/* ── Settings sub-view section labels ──────────────────────────────────── */1962.peach-settings-sub-label {1963  margin: 12px 0 4px;1964  font-family: "IBM Plex Mono", monospace;1965  font-size: 0.5rem;1966  text-transform: uppercase;1967  letter-spacing: 0.18em;1968  color: var(--peach-t2);1969}1970.peach-settings-sub-label:first-child {1971  margin-top: 4px;1972}19731974/* ── Settings: collapsible Advanced section ─────────────────────────────── */1975.peach-settings-advanced-toggle {1976  display: flex;1977  align-items: center;1978  justify-content: space-between;1979  width: 100%;1980  background: none;1981  border: none;1982  cursor: pointer;1983  padding: 12px 0 4px;1984  margin: 0;1985  color: inherit;1986}1987.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {1988  color: var(--peach-t1);1989}1990.peach-settings-advanced-chevron {1991  font-size: 0.5625rem;1992  color: var(--peach-t3);1993  letter-spacing: 0;1994  transition: color 120ms ease;1995}19961997/* ── Feedback form ──────────────────────────────────────────────────────── */1998.peach-feedback-group {1999  flex: 1;2000  display: flex;2001  flex-direction: column;2002  border-bottom: none;2003}20042005.peach-feedback-intro {2006  margin: 4px 0 14px;2007  font-size: 0.75rem;2008  line-height: 1.55;2009  color: var(--peach-t1);2010}20112012.peach-feedback-chips {2013  display: flex;2014  flex-wrap: wrap;2015  gap: 6px;2016  margin-bottom: 14px;2017}20182019.peach-feedback-chip {2020  padding: 4px 10px;2021  border-radius: 999px;2022  border: 1px solid var(--peach-t3);2023  background: none;2024  color: var(--peach-t2);2025  font-size: 0.6875rem;2026  font-family: var(--font-ui);2027  cursor: pointer;2028  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2029    background var(--peach-dur-80) ease;2030}2031.peach-feedback-chip:hover {2032  border-color: var(--peach-t2);2033  color: var(--peach-t1);2034}2035.peach-feedback-chip.is-active {2036  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);2037  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));2038  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);2039  box-shadow:2040    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),2041    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);2042  font-weight: 700;2043}20442045.peach-feedback-textarea {2046  flex: 1;2047  width: 100%;2048  min-height: 120px;2049  box-sizing: border-box;2050  background: rgba(0, 0, 0, 0.22);2051  border: 1px solid transparent;2052  border-radius: 6px;2053  color: var(--peach-t0);2054  font-size: 0.75rem;2055  font-family: var(--font-ui);2056  line-height: 1.5;2057  padding: 8px 10px;2058  resize: none;2059  outline: none;2060  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2061}2062.peach-feedback-textarea:focus {2063  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2064  background: rgba(0, 0, 0, 0.28);2065}2066.peach-feedback-textarea:focus {2067  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2068}2069.peach-feedback-textarea::placeholder {2070  color: var(--peach-t2);2071}20722073.peach-feedback-meta {2074  margin: 6px 0 0;2075  font-size: 0.625rem;2076  color: var(--peach-t2);2077  font-family: "IBM Plex Mono", monospace;2078}20792080.peach-feedback-result {2081  margin: 8px 0 0;2082  font-size: 0.6875rem;2083  font-family: "IBM Plex Mono", monospace;2084}2085.peach-feedback-result--ok { color: var(--peach-sync-ok); }2086.peach-feedback-result--err { color: var(--peach-breach); }20872088.peach-feedback-submit {2089  width: 100%;2090  margin-top: 12px;2091  justify-content: center;2092}20932094.peach-feedback-anon {2095  margin: 8px 0 0;2096  font-size: 0.625rem;2097  color: var(--peach-t2);2098  text-align: center;2099}21002101.peach-feedback-thanks {2102  margin: auto 0;2103  padding: 18px 14px;2104  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);2105  border-radius: 8px;2106  background:2107    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),2108    rgba(0, 0, 0, 0.18);2109  color: var(--peach-t1);2110  text-align: center;2111}21122113.peach-feedback-thanks p {2114  margin: 0;2115  font-size: 0.75rem;2116  line-height: 1.5;2117}21182119.peach-feedback-thanks-title {2120  color: var(--peach-t0);2121  font-family: "Cormorant Garamond", serif;2122  font-size: 1.375rem !important;2123  line-height: 1.1 !important;2124  margin-bottom: 8px !important;2125}21262127.peach-passkey-badge {2128  margin-left: 8px;2129  font-size: 0.625rem;2130  letter-spacing: 0.06em;2131  text-transform: uppercase;2132  color: var(--peach-t2);2133  font-family: var(--font-ui);2134  vertical-align: middle;2135}21362137.peach-passkey-delete-btn {2138  color: var(--peach-breach);2139  border-color: rgba(229, 85, 85, 0.25);2140}21412142.peach-passkey-delete-confirm {2143  display: flex;2144  align-items: center;2145  gap: 8px;2146  padding: 8px 10px;2147  background: rgba(229, 85, 85, 0.06);2148  border: 1px solid rgba(229, 85, 85, 0.2);2149  border-radius: 6px;2150}21512152.peach-passkey-delete-confirm-copy {2153  flex: 1;2154  font-size: 0.6875rem;2155  color: var(--peach-t1);2156}21572158.peach-passkey-delete-btn--confirm {2159  color: var(--peach-breach);2160  border-color: rgba(229, 85, 85, 0.4);2161}21622163.peach-passkey-activity {2164  flex-direction: column;2165  align-items: flex-start;2166  gap: 4px;2167}21682169.peach-passkey-meta {2170  font-size: 0.6875rem;2171  color: var(--peach-t2);2172}21732174.peach-passkey-actions {2175  position: relative;2176  z-index: 1;2177  margin-top: 14px;2178  display: flex;2179  flex-direction: column;2180  gap: 8px;2181}21822183.peach-passkey-approval {2184  display: flex;2185  flex-direction: column;2186  align-items: center;2187  padding: 16px 20px 14px;2188  gap: 8px;2189  text-align: center;2190}21912192.peach-passkey-approval-icon {2193  width: 36px;2194  height: 36px;2195  border-radius: 10px;2196  background: var(--peach-s2);2197  border: 1px solid var(--peach-t3);2198  display: flex;2199  align-items: center;2200  justify-content: center;2201  flex-shrink: 0;2202  color: var(--peach-accent);2203}22042205.peach-passkey-approval-icon img,2206.peach-passkey-approval-icon svg {2207  width: 22px;2208  height: 22px;2209  border-radius: 5px;2210}22112212.peach-passkey-approval-rp {2213  font-family: var(--font-ui);2214  font-size: 0.75rem;2215  color: var(--peach-t2);2216  letter-spacing: 0.03em;2217}22182219.peach-passkey-approval-action {2220  font-family: var(--font-display);2221  font-style: italic;2222  font-weight: 300;2223  font-size: 18px;2224  color: var(--peach-t0);2225  line-height: 1.1;2226  margin: 1px 0;2227}22282229.peach-passkey-approval-user {2230  font-family: var(--font-mono);2231  font-size: 0.6875rem;2232  color: var(--peach-t1);2233  background: var(--peach-s2);2234  border: 1px solid var(--peach-t3);2235  border-radius: 4px;2236  padding: 3px 8px;2237}22382239.peach-passkey-approval-notice {2240  font-size: 0.625rem;2241  color: var(--peach-t2);2242  line-height: 1.5;2243  max-width: 220px;2244}22452246.peach-passkey-approval-actions {2247  display: flex;2248  gap: 8px;2249  width: 100%;2250  margin-top: 6px;2251}22522253.peach-passkey-approval-actions .peach-btn {2254  flex: 1;2255}22562257/* ── Inline generator drawer ── */2258.peach-generator-drawer {2259  display: grid;2260  grid-template-rows: 0fr;2261  transition: grid-template-rows 320ms var(--peach-curve-arrival);2262  overflow: hidden;2263}2264.peach-generator-drawer.is-open {2265  grid-template-rows: 1fr;2266}2267.peach-generator-drawer-inner {2268  min-height: 0;2269  overflow: hidden;2270}2271.peach-generator-drawer-content {2272  border-top: 1px solid var(--peach-t3);2273  padding: 8px 0 4px;2274  display: flex;2275  flex-direction: column;2276  gap: 8px;2277}22782279/* ── Compact generator (inside entry edit) ── */2280.peach-generator-drawer-content--compact {2281  border-top: 1px solid var(--peach-t3);2282  padding: 8px 0 2px;2283  gap: 7px;2284}2285.peach-pwgen-compact-display-row {2286  display: flex;2287  align-items: center;2288  gap: 6px;2289}2290.peach-pwgen-compact-output {2291  flex: 1;2292  min-width: 0;2293  font-family: "IBM Plex Mono", monospace;2294  font-size: 0.6875rem;2295  font-weight: 400;2296  letter-spacing: 0.04em;2297  color: var(--peach-t0);2298  background: rgba(240, 232, 216, 0.04);2299  border: 1px solid var(--peach-t3);2300  border-radius: 5px;2301  padding: 5px 8px;2302  line-height: 1.5;2303  outline: none;2304  transition: border-color 120ms ease;2305}23062307.peach-pwgen-compact-output:focus {2308  border-color: var(--peach-t1);2309}2310.peach-pwgen-compact-controls {2311  display: flex;2312  align-items: center;2313  gap: 6px;2314}2315.peach-pwgen-compact-slider {2316  flex: 1;2317  min-width: 0;2318  height: 2px !important;2319}2320.peach-pwgen-compact-controls .peach-pwgen-len-num {2321  flex-shrink: 0;2322  min-width: 18px;2323  text-align: right;2324}2325.peach-pwgen-compact-pills {2326  display: flex;2327  gap: 3px;2328  flex-shrink: 0;2329}2330.peach-pwgen-compact-pills .peach-pwgen-pill {2331  padding: 2px 7px;2332  font-size: 0.5rem;2333}2334.peach-pwgen-compact-use {2335  flex-shrink: 0;2336  font-size: 0.625rem !important;2337  padding: 3px 9px !important;2338  min-height: 22px !important;2339  border-radius: 5px !important;2340}23412342/* ── Password edit row (input + eye toggle side-by-side) ── */2343.peach-password-edit-row {2344  display: flex;2345  align-items: center;2346  gap: 6px;2347}2348.peach-password-edit-row .peach-inline-input {2349  flex: 1;2350  min-width: 0;2351}23522353/* ── Generate toggle link ── */2354.peach-generate-toggle-link {2355  display: inline-flex;2356  align-items: center;2357  gap: 5px;2358  background: none;2359  border: none;2360  padding: 0;2361  cursor: pointer;2362  font-family: "IBM Plex Mono", monospace;2363  font-size: 0.625rem;2364  color: var(--peach-t2);2365  letter-spacing: 0.04em;2366  transition: color 120ms ease;2367  align-self: flex-start;2368}2369.peach-generate-toggle-link:hover {2370  color: var(--peach-accent);2371}23722373/* Holds the generate + history toggle links on one row under the editor. */2374.peach-password-edit-links {2375  display: flex;2376  align-items: center;2377  gap: 14px;2378  flex-wrap: wrap;2379}23802381/* ── Past-password history list ── */2382.peach-password-history {2383  display: grid;2384  gap: 4px;2385  margin-top: 2px;2386  max-height: 168px;2387  overflow-y: auto;2388  scrollbar-width: thin;2389}2390.peach-history-row {2391  display: flex;2392  align-items: center;2393  justify-content: space-between;2394  gap: 8px;2395  padding: 5px 7px;2396  border-radius: 7px;2397  background: color-mix(in srgb, var(--peach-accent) 5%, transparent);2398  border: 1px solid color-mix(in srgb, var(--peach-accent) 9%, transparent);2399}2400.peach-history-main {2401  display: flex;2402  flex-direction: column;2403  gap: 1px;2404  min-width: 0;2405  flex: 1;2406}2407.peach-history-pw {2408  font-family: "IBM Plex Mono", monospace;2409  font-size: 0.6875rem;2410  color: var(--peach-t1);2411  white-space: nowrap;2412  overflow: hidden;2413  text-overflow: ellipsis;2414}2415.peach-history-pw .peach-password-mask {2416  letter-spacing: 0.08em;2417  color: var(--peach-t2);2418}2419.peach-history-age {2420  font-family: "IBM Plex Mono", monospace;2421  font-size: 0.5625rem;2422  color: var(--peach-t3, var(--peach-t2));2423  letter-spacing: 0.03em;2424}2425.peach-history-actions {2426  display: flex;2427  align-items: center;2428  gap: 2px;2429  flex-shrink: 0;2430}2431.peach-history-use {2432  font-family: "IBM Plex Mono", monospace;2433  font-size: 0.5625rem;2434  letter-spacing: 0.05em;2435  padding: 3px 7px;2436}2437.peach-history-empty {2438  font-family: "IBM Plex Mono", monospace;2439  font-size: 0.625rem;2440  line-height: 1.45;2441  color: var(--peach-t2);2442  padding: 6px 8px;2443  border-radius: 7px;2444  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);2445  border: 1px solid color-mix(in srgb, var(--peach-accent) 8%, transparent);2446}24472448/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2449.peach-entry-body {2450  flex: 1;2451  overflow-y: auto;2452  overflow-x: hidden;2453  scrollbar-width: none;2454  -ms-overflow-style: none;2455  overscroll-behavior: contain;2456  display: grid;2457  gap: 10px;2458  align-content: start;2459  padding: 10px 20px 14px;2460  min-width: 0;2461  min-height: 0;2462}2463.peach-entry-body::-webkit-scrollbar { display: none; }24642465/* Type-toggle pills + inline note toolbar */2466.peach-new-type-row {2467  display: flex;2468  align-items: center;2469  gap: 6px;2470  margin-bottom: 2px;2471}2472.peach-new-type-btn {2473  background: transparent;2474  border: 1px solid var(--peach-t3);2475  border-radius: 12px;2476  padding: 3px 10px;2477  font-family: "IBM Plex Mono", monospace;2478  font-size: 0.5625rem;2479  letter-spacing: 0.12em;2480  text-transform: uppercase;2481  color: var(--peach-t2);2482  cursor: pointer;2483  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2484}2485.peach-new-type-btn.is-active {2486  color: var(--peach-t0);2487  border-color: var(--peach-accent);2488  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2489}2490.peach-new-type-btn:not(.is-active):hover {2491  color: var(--peach-t1);2492  border-color: var(--peach-t2);2493}24942495/* Editable title */2496.peach-new-title-wrap { margin: 0 0 2px; }2497.peach-new-title-input {2498  background: transparent;2499  border: none;2500  outline: none;2501  width: 100%;2502  color: var(--peach-t0);2503  font-family: var(--font-display);2504  font-style: italic;2505  font-weight: 400;2506  font-size: 40px;2507  line-height: 0.95;2508  caret-color: var(--peach-accent);2509}2510.peach-new-title-input::placeholder { color: var(--peach-t2); }25112512/* Editable domain field */2513.peach-domain-edit-row {2514  display: flex;2515  align-items: center;2516  gap: 6px;2517}25182519.peach-domain-edit-row .peach-domain-value--edit {2520  flex: 1;2521  width: 0;2522}25232524.peach-domain-url-btn {2525  flex-shrink: 0;2526  background: transparent;2527  border: none;2528  cursor: pointer;2529  color: var(--peach-t3);2530  padding: 2px 3px;2531  display: flex;2532  align-items: center;2533  line-height: 0;2534  border-radius: 3px;2535  transition: color 120ms ease;2536}25372538.peach-domain-url-btn:hover {2539  color: var(--peach-accent);2540}25412542.peach-domain-value--edit {2543  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2544  font-size: 0.625rem;2545  font-style: italic;2546  letter-spacing: 0.12em;2547  color: var(--peach-t1);2548  background: transparent;2549  border: none;2550  border-bottom: 1px solid var(--peach-t3);2551  outline: none;2552  width: 100%;2553  padding: 2px 0;2554  caret-color: var(--peach-accent);2555  transition: border-color 140ms ease, color 140ms ease;2556}2557.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2558.peach-domain-value--edit:focus {2559  border-bottom-color: rgba(240, 232, 216, 0.28);2560  color: var(--peach-t0);2561}25622563/* Editable field values (username, password, totp) */2564.peach-field-value--edit {2565  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2566  font-size: 0.8125rem;2567  color: var(--peach-t0);2568  background: transparent;2569  border: none;2570  border-bottom: 1px solid var(--peach-t3);2571  outline: none;2572  flex: 1;2573  min-width: 0;2574  padding: 3px 0;2575  caret-color: var(--peach-accent);2576  transition: border-color 140ms ease, color 140ms ease;2577}2578.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2579.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2580.peach-field-value--edit:focus {2581  border-bottom-color: rgba(240, 232, 216, 0.28);2582  color: var(--peach-t0);2583}25842585/* "+ add optional field" links */2586.peach-entry-add-links {2587  display: flex;2588  gap: 12px;2589  flex-wrap: wrap;2590  margin-top: -2px;2591}2592.peach-add-field-link {2593  background: transparent;2594  border: none;2595  padding: 0;2596  cursor: pointer;2597  font-family: "IBM Plex Mono", monospace;2598  font-size: 0.5625rem;2599  letter-spacing: 0.1em;2600  text-transform: uppercase;2601  color: var(--peach-t2);2602  transition: color 140ms ease;2603}2604.peach-add-field-link:hover { color: var(--peach-accent); }26052606/* ── New entry form (legacy classes) ────────────────────────────────── */2607.peach-new-body {2608  flex: 1;2609  overflow-y: auto;2610  padding: 10px 20px 14px;2611}2612.peach-new-name-input {2613  background: transparent;2614  border: none;2615  outline: none;2616  width: 100%;2617  color: var(--peach-t0);2618  font-family: var(--font-display);2619  font-style: italic;2620  font-weight: 400;2621  font-size: 40px;2622  line-height: 0.95;2623  caret-color: var(--peach-accent);2624}2625.peach-new-name-input::placeholder { color: var(--peach-t2); }2626.peach-new-field-input {2627  background: transparent;2628  border: none;2629  outline: none;2630  flex: 1;2631  min-width: 0;2632  caret-color: var(--peach-accent);2633}2634.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }26352636/* ── Canary card ── */2637.peach-canary-card {2638  border: 1px solid rgba(217, 160, 48, 0.2);2639  background: rgba(217, 160, 48, 0.03);2640  border-radius: 8px;2641  padding: 12px;2642}26432644.peach-canary-settings-header {2645  display: flex;2646  align-items: center;2647  justify-content: space-between;2648  cursor: pointer;2649  user-select: none;2650}26512652.peach-canary-card .peach-label {2653  color: rgba(217, 160, 48, 0.85);2654}26552656.peach-canary-card .peach-new-field-input {2657  border-color: rgba(217, 160, 48, 0.25);2658}26592660.peach-canary-card .peach-new-field-input:focus {2661  border-color: rgba(217, 160, 48, 0.5);2662}26632664.peach-canary-body {2665  margin-top: 12px;2666  display: flex;2667  flex-direction: column;2668  gap: 10px;2669}26702671.peach-canary-explainer {2672  display: flex;2673  gap: 10px;2674  padding: 10px 12px;2675  border-radius: 10px;2676  background: rgba(217, 160, 48, 0.06);2677  border: 1px solid rgba(217, 160, 48, 0.22);2678  margin-bottom: 4px;2679}26802681.peach-canary-explainer-icon {2682  font-size: 1rem;2683  flex-shrink: 0;2684  line-height: 1.2;2685}26862687.peach-canary-explainer-title {2688  font-family: var(--font-ui);2689  font-size: 0.6875rem;2690  font-weight: 500;2691  color: rgba(217, 160, 48, 0.9);2692  margin: 0 0 3px;2693}26942695.peach-canary-explainer-copy {2696  font-family: var(--font-ui);2697  font-size: 0.625rem;2698  color: var(--peach-t2);2699  line-height: 1.55;2700  margin: 0;2701}27022703.peach-canary-hint {2704  font-size: 0.625rem;2705  color: var(--peach-t2);2706  font-family: Inter, system-ui, sans-serif;2707  line-height: 1.5;2708  margin-top: 4px;2709}27102711.peach-canary-actions-row {2712  display: flex;2713  align-items: center;2714  gap: 8px;2715}27162717.peach-canary-test-btn {2718  border-color: rgba(217, 160, 48, 0.3);2719  color: rgba(217, 160, 48, 0.85);2720}27212722.peach-canary-test-result {2723  font-size: 0.625rem;2724  font-family: Inter, system-ui, sans-serif;2725}27262727.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2728.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }27292730.peach-canary-badge {2731  display: flex;2732  position: relative;2733  z-index: 1;2734  align-items: center;2735  gap: 5px;2736  padding: 4px 10px;2737  background: rgba(217, 160, 48, 0.12);2738  border: 1px solid rgba(217, 160, 48, 0.35);2739  border-radius: 6px;2740  margin-bottom: 6px;2741  width: fit-content;2742}27432744.peach-canary-badge-label {2745  font-size: 0.625rem;2746  letter-spacing: 0.06em;2747  color: rgba(217, 160, 48, 0.9);2748  font-family: var(--font-ui);2749  text-transform: uppercase;2750}27512752.peach-canary-badge-icon {2753  font-size: 0.6875rem;2754}27552756.peach-canary-suppress-row {2757  display: flex;2758  align-items: center;2759  gap: 8px;2760  padding: 6px 10px;2761  background: rgba(217, 160, 48, 0.08);2762  border-radius: 6px;2763  margin-bottom: 8px;2764}27652766.peach-canary-suppress-label {2767  font-size: 0.6875rem;2768  color: rgba(217, 160, 48, 0.85);2769  cursor: pointer;2770  font-family: var(--font-ui);2771  letter-spacing: 0.04em;2772}27732774.peach-regen-panel {2775  position: relative;2776  z-index: 1;2777  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2778  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2779  border-radius: 8px;2780  padding: 12px;2781  margin-bottom: 8px;2782}27832784.peach-regen-panel-header {2785  display: flex;2786  align-items: center;2787  justify-content: space-between;2788  margin-bottom: 10px;2789}27902791.peach-regen-panel-title {2792  font-size: 0.6875rem;2793  font-weight: 600;2794  letter-spacing: 0.06em;2795  text-transform: uppercase;2796  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2797}27982799.peach-regen-output {2800  background: rgba(0, 0, 0, 0.2);2801  border-radius: 6px;2802  padding: 10px;2803  margin-bottom: 10px;2804  font-family: var(--font-mono);2805  font-size: 0.8125rem;2806  word-break: break-all;2807  color: var(--peach-t1);2808}28092810.peach-regen-actions {2811  display: flex;2812  gap: 6px;2813}28142815.peach-regen-actions--spaced {2816  margin-bottom: 8px;2817}28182819.peach-regen-action-grow {2820  flex: 1;2821}28222823.peach-regen-copy-btn {2824  padding: 0 8px;2825}28262827.peach-regen-success {2828  position: relative;2829  z-index: 1;2830  background: rgba(40, 180, 80, 0.1);2831  border: 1px solid rgba(40, 180, 80, 0.3);2832  border-radius: 8px;2833  padding: 10px 12px;2834  margin-bottom: 8px;2835  display: flex;2836  align-items: center;2837  gap: 8px;2838  font-size: 0.6875rem;2839  color: rgba(40, 180, 80, 0.9);2840}28412842/* ── Note editor overlay ── */2843.peach-note-editor {2844  position: absolute;2845  inset: 0;2846  z-index: 200;2847  display: flex;2848  flex-direction: column;2849  background:2850    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2851    var(--peach-bg);2852  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2853}28542855.peach-note-editor-header {2856  display: flex;2857  align-items: center;2858  gap: 10px;2859  padding: 14px 16px 10px;2860  border-bottom: 1px solid var(--peach-t3);2861  flex-shrink: 0;2862}28632864.peach-note-editor-back {2865  background: transparent;2866  border: none;2867  cursor: pointer;2868  color: var(--peach-t2);2869  padding: 4px 6px;2870  border-radius: 6px;2871  display: flex;2872  align-items: center;2873  transition: color 120ms ease, background 120ms ease;2874  flex-shrink: 0;2875}2876.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }28772878.peach-note-editor-label {2879  flex: 1;2880  font-family: var(--font-display);2881  font-style: italic;2882  font-size: 0.9375rem;2883  color: var(--peach-t1);2884  letter-spacing: 0.02em;2885}28862887.peach-note-editor-save-btn {2888  background: transparent;2889  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2890  border-radius: 8px;2891  color: var(--peach-accent);2892  font-family: "IBM Plex Mono", monospace;2893  font-size: 0.625rem;2894  letter-spacing: 0.06em;2895  text-transform: uppercase;2896  padding: 3px 10px;2897  cursor: pointer;2898  transition: background 120ms ease, border-color 120ms ease;2899}2900.peach-note-editor-save-btn:hover:not(:disabled) {2901  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2902  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2903}2904.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }29052906.peach-note-toolbar {2907  display: flex;2908  align-items: center;2909  gap: 3px;2910  padding: 6px 14px 5px;2911  border-bottom: 1px solid var(--peach-t3);2912  flex-shrink: 0;2913}29142915.peach-note-tool-btn {2916  background: transparent;2917  border: 1px solid transparent;2918  border-radius: 5px;2919  color: var(--peach-t2);2920  font-family: "IBM Plex Mono", monospace;2921  font-size: 0.625rem;2922  letter-spacing: 0.04em;2923  padding: 2px 8px;2924  cursor: pointer;2925  line-height: 1.6;2926  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2927}2928.peach-note-tool-btn:hover {2929  background: var(--peach-t4);2930  color: var(--peach-t0);2931  border-color: var(--peach-t3);2932}29332934.peach-note-tool-icon {2935  padding: 3px 7px;2936  display: inline-flex;2937  align-items: center;2938  justify-content: center;2939}29402941.peach-note-tool-divider {2942  width: 1px;2943  height: 14px;2944  background: var(--peach-t3);2945  margin: 0 4px;2946  flex-shrink: 0;2947}29482949.peach-note-editor-body {2950  flex: 1;2951  overflow-y: auto;2952  padding: 16px 20px 20px;2953  outline: none;2954  font-family: var(--font-display);2955  font-size: 1rem;2956  line-height: 1.75;2957  color: var(--peach-t0);2958  scrollbar-width: none;2959  word-break: break-word;2960}2961.peach-note-editor-body:empty::before {2962  content: "write your note…";2963  color: var(--peach-t3);2964  font-style: italic;2965  pointer-events: none;2966}29672968/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2969.peach-note-editor-inline {2970  display: flex;2971  flex-direction: column;2972  flex: 1;2973  min-height: 0;2974}2975.peach-note-editor-body--inline {2976  flex: 1;2977  min-height: 0;2978  font-size: 0.9375rem;2979  padding: 10px 20px 14px;2980}29812982/* Full-width toolbar row inside the body (Add.tsx note type).2983   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */2984.peach-note-toolbar-body {2985  display: flex;2986  align-items: center;2987  gap: 3px;2988  padding: 5px 20px 4px;2989  margin: 2px -20px 0;2990  border-bottom: 1px solid var(--peach-t3);2991  flex-shrink: 0;2992}29932994/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2995   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2996   and .peach-note-tool-divider button-level styles. */2997.peach-note-toolbar-inline {2998  display: flex;2999  align-items: center;3000  gap: 3px;3001  margin-left: auto;3002  padding-left: 10px;3003  border-left: 1px solid var(--peach-t3);3004  min-height: 22px;3005}30063007/* Entry.tsx toolbar row (no tabs, toolbar only) */3008.peach-entry-note-toolbar-row {3009  display: flex;3010  align-items: center;3011  margin: 4px 0 6px;3012  position: relative;3013  z-index: 1;3014}3015.peach-entry-note-toolbar-row .peach-note-toolbar-inline {3016  border-left: none;3017  padding-left: 0;3018  margin-left: 0;3019}30203021/* Note body — fills available vertical space in Add.tsx and Entry.tsx */3022.peach-note-body {3023  display: flex;3024  flex-direction: column;3025  flex: 1;3026  min-height: 0;3027  margin: 4px 0 0;3028}3029.peach-entry-body--new .peach-note-body {3030  margin: 8px -20px 0;3031}30323033/* Add.tsx body is a grid by default; swap to a flex column when a note is3034   active so the note body can stretch and pin the tags row to the bottom. */3035.peach-entry-body--new:has(.peach-note-body) {3036  display: flex;3037  flex-direction: column;3038}30393040/* Rich content element styles (editor + display) */3041.peach-note-editor-body h2,3042.peach-note-content h2 {3043  font-family: var(--font-display);3044  font-size: 20px;3045  font-weight: 600;3046  font-style: italic;3047  color: var(--peach-t0);3048  margin: 6px 0 2px;3049  line-height: 1.3;3050}3051.peach-note-editor-body ul,3052.peach-note-content ul {3053  padding-left: 18px;3054  margin: 3px 0;3055  list-style: disc;3056}3057.peach-note-editor-body ol,3058.peach-note-content ol {3059  padding-left: 18px;3060  margin: 3px 0;3061  list-style: decimal;3062}3063.peach-note-editor-body li,3064.peach-note-content li { margin: 2px 0; }3065.peach-note-editor-body hr,3066.peach-note-content hr {3067  border: none;3068  border-top: 1px solid var(--peach-t3);3069  margin: 10px 0;3070}30713072/* font size elements from execCommand */3073.peach-note-editor-body font[size="1"],3074.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }3075.peach-note-editor-body font[size="2"],3076.peach-note-content font[size="2"] { font-size: 0.8125rem; }3077.peach-note-editor-body font[size="3"],3078.peach-note-content font[size="3"] { font-size: 1rem; }3079.peach-note-editor-body font[size="4"],3080.peach-note-content font[size="4"] { font-size: 20px; }3081.peach-note-editor-body font[size="5"],3082.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }30833084/* bold / italic inside the editor and note display */3085.peach-note-editor-body b, .peach-note-editor-body strong,3086.peach-note-content b, .peach-note-content strong { font-weight: 700; }3087.peach-note-editor-body em, .peach-note-editor-body i,3088.peach-note-content em, .peach-note-content i { font-style: italic; }30893090/* note display — rendered HTML, no pre-wrap */3091.peach-note-content {3092  overflow: auto;3093  max-height: 340px;3094  word-break: break-word;3095}30963097/* ── Note textarea ── */3098.peach-note-textarea {3099  width: 100%;3100  min-height: 180px;3101  max-height: 280px;3102  resize: vertical;3103  background: var(--peach-t4);3104  border: 1px solid var(--peach-t3);3105  border-radius: 8px;3106  padding: 10px 12px;3107  font-family: "IBM Plex Mono", monospace;3108  font-size: 0.75rem;3109  line-height: 1.7;3110  color: var(--peach-t1);3111  outline: none;3112  transition: border-color 150ms ease;3113}31143115.peach-note-textarea:focus {3116  border-color: var(--peach-t2);3117}31183119.peach-note-char-count {3120  font-family: "IBM Plex Mono", monospace;3121  font-size: 0.5625rem;3122  color: var(--peach-t3);3123  text-align: right;3124  margin-top: 4px;3125  letter-spacing: 0.1em;3126}31273128/* ── Field input baseline ── */3129.peach-new-field-input {3130  width: 100%;3131  background: transparent;3132  border: none;3133  border-bottom: 1px solid var(--peach-t3);3134  padding: 4px 0;3135  color: var(--peach-t1);3136  font-family: "IBM Plex Mono", monospace;3137  font-size: 0.8125rem;3138  outline: none;3139  transition: border-color 150ms ease;3140}31413142.peach-new-field-input:focus {3143  border-bottom-color: var(--peach-t0);3144  color: var(--peach-t0);3145}31463147.peach-new-name-input {3148  width: 100%;3149  background: transparent;3150  border: none;3151  border-bottom: 1px solid var(--peach-t3);3152  padding: 6px 0;3153  font-family: var(--font-display);3154  font-style: italic;3155  font-size: 28px;3156  color: var(--peach-t0);3157  outline: none;3158  transition: border-color 150ms ease;3159}31603161.peach-new-name-input:focus {3162  border-bottom-color: var(--peach-t1);3163}31643165.peach-new-name-input::placeholder {3166  color: var(--peach-t2);3167  font-style: italic;3168}31693170.peach-new-field-input::placeholder {3171  color: var(--peach-t3);3172}31733174/* ── Demo entrance animation ── */3175#hd-shell {3176  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3177}3178@keyframes hd-shell-enter {3179  from { opacity: 0; transform: scale(0.96) translateY(16px); }3180  to   { opacity: 1; transform: scale(1) translateY(0); }3181}31823183/* ── Keyframes ── */3184@keyframes peach-char-enter {3185  from { opacity: 0; transform: translateY(0.22em); }3186  to   { opacity: 1; transform: translateY(0); }3187}3188@keyframes peach-content-enter {3189  from { opacity: 0.96; transform: translateY(4px); }3190  to   { opacity: 1; transform: translateY(0); }3191}3192@keyframes peach-content-exit {3193  from { opacity: 1; transform: translateY(0); }3194  to   { opacity: 0.92; transform: translateY(-3px); }3195}3196@keyframes peach-screen-enter {3197  from { opacity: 0; transform: translateY(14px); }3198  to   { opacity: 1; transform: translateY(0); }3199}3200@keyframes peach-shell-fade-in {3201  from { opacity: 0; }3202  to   { opacity: 1; }3203}3204@keyframes peach-veil-in {3205  from { opacity: 0; }3206  to   { opacity: 1; }3207}3208@keyframes peach-lock-settle {3209  0%   { transform: scale(0.9); }3210  65%  { transform: scale(1.08); }3211  100% { transform: scale(1); }3212}3213@keyframes peach-copy-confirm {3214  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3215  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); }3216}3217@keyframes peach-copy-retreat {3218  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); }3219  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3220}3221@keyframes peach-copy-flood {3222  from { opacity: 0; transform: scaleX(0.15); }3223  to   { opacity: 1; transform: scaleX(1); }3224}3225@keyframes peach-copy-icon-settle {3226  from  { transform: scale(0.84); }3227  70%   { transform: scale(1.08); }3228  to    { transform: scale(1); }3229}3230@keyframes peach-copy-sheen-retreat {3231  from { opacity: 1; transform: scaleX(1); }3232  to   { opacity: 0; transform: scaleX(0.15); }3233}3234@keyframes peach-copy-drain {3235  from { width: 100%; }3236  to   { width: 0; }3237}3238@keyframes peach-shake {3239  0%, 100% { transform: translateX(0); }3240  20%      { transform: translateX(-6px); }3241  40%      { transform: translateX(6px); }3242  60%      { transform: translateX(-4px); }3243  80%      { transform: translateX(4px); }3244}32453246@keyframes pip-pulse {3247  0% { transform: scale(1); }3248  40% { transform: scale(2.2); }3249  100% { transform: scale(1); }3250}325132523253/* ── Password generator ── */3254.peach-pwgen-body {3255  flex: 1; overflow-y: auto;3256  display: flex; flex-direction: column;3257}3258.peach-policy-badge {3259  display: flex; align-items: center;3260  padding: 6px 20px 0;3261  font-size: 0.625rem; font-family: Inter, sans-serif;3262  color: var(--peach-t2); letter-spacing: 0.04em;3263}3264.peach-pwgen-display {3265  padding: 14px 20px 12px;3266  border-bottom: 1px solid var(--peach-t3);3267  display: flex; align-items: flex-start; gap: 10px;3268}3269.peach-pwgen-display-row {3270  display: flex;3271  align-items: flex-start;3272  gap: 8px;3273  padding-bottom: 8px;3274  border-bottom: 1px solid var(--peach-t3);3275}3276.peach-pwgen-output {3277  flex: 1; min-width: 0; margin: 0;3278  font-family: "IBM Plex Mono", monospace;3279  font-size: 0.8125rem; color: var(--peach-t0);3280  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3281  white-space: normal;3282  padding: 10px 12px;3283  background: var(--peach-t4);3284  border-radius: 6px;3285  min-height: 36px;3286}3287.peach-pwgen-output-display {3288  flex: 1;3289  min-width: 0;3290  margin: 0;3291  font-family: var(--font-display);3292  font-style: italic;3293  font-weight: 300;3294  font-size: 32px;3295  line-height: 1.05;3296  color: var(--peach-t0);3297  word-break: break-all;3298  overflow-wrap: break-word;3299  white-space: normal;3300  letter-spacing: 0.02em;3301}3302.peach-pwgen-display-actions {3303  display: flex;3304  flex-direction: column;3305  gap: 4px;3306  flex-shrink: 0;3307  margin-top: 2px;3308}3309.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3310.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3311.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3312.peach-pwgen-len-num {3313  font-family: "IBM Plex Mono", monospace;3314  font-size: 0.75rem; color: var(--peach-accent);3315}3316.peach-pwgen-len-num--edit {3317  cursor: text;3318  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3319}3320.peach-pwgen-len-input {3321  font-family: "IBM Plex Mono", monospace;3322  font-size: 0.75rem;3323  color: var(--peach-accent);3324  background: transparent;3325  border: none;3326  border-bottom: 1px solid var(--peach-accent);3327  outline: none;3328  width: 32px;3329  text-align: right;3330  padding: 0;3331}3332.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3333.peach-pwgen-toggles { display: flex; flex-direction: column; }3334.peach-pwgen-charset-pills {3335  display: flex;3336  gap: 6px;3337  flex-wrap: wrap;3338}3339.peach-pwgen-pill {3340  padding: 4px 11px;3341  border-radius: 999px;3342  border: 1px solid var(--peach-t3);3343  background: transparent;3344  color: var(--peach-t2);3345  font-family: "IBM Plex Mono", monospace;3346  font-size: 0.5625rem;3347  letter-spacing: 0.08em;3348  cursor: pointer;3349  transition: all 150ms ease;3350}3351.peach-pwgen-pill.is-on {3352  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3353  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3354  color: var(--peach-accent);3355}3356.peach-pwgen-pill:not(.is-on):hover {3357  color: var(--peach-t1);3358  border-color: var(--peach-t2);3359}3360.peach-pwgen-use-btn {3361  width: 100%;3362  min-height: 34px;3363  border-radius: 8px;3364  margin-top: 2px;3365}3366.peach-generator-constraint-note {3367  font-family: 'IBM Plex Mono', monospace;3368  font-size: 10px;3369  color: var(--peach-t3);3370  letter-spacing: 0.04em;3371  margin: 0;3372  transition: opacity 200ms ease;3373}3374.peach-pwgen-toggle-row {3375  display: flex; align-items: center; justify-content: space-between;3376  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3377}3378.peach-pwgen-toggle-row:last-child { border-bottom: none; }3379.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }33803381/* Peach popup should not expose native scrollbars on internal panels. */3382.peach-settings-body,3383.peach-new-body,3384.peach-pwgen-body,3385.lock-screen,3386.peach-import-preview {3387  scrollbar-width: none;3388  -ms-overflow-style: none;3389  overscroll-behavior: contain;3390}3391.peach-settings-body::-webkit-scrollbar,3392.peach-new-body::-webkit-scrollbar,3393.peach-pwgen-body::-webkit-scrollbar,3394.lock-screen::-webkit-scrollbar,3395.peach-import-preview::-webkit-scrollbar {3396  width: 0;3397  height: 0;3398  display: none;3399}34003401.lock-screen {3402  height: 100%;3403  min-height: 100%;3404  overflow-y: auto;3405  padding: 18px 18px 16px;3406  gap: 14px;3407  grid-template-rows: auto auto auto 1fr auto;3408  align-content: stretch;3409  position: relative;3410  isolation: isolate;3411}3412.peach-screen.lock-screen--vault-stage {3413  display: flex;3414  flex-direction: column;3415  justify-content: flex-start;3416  gap: 18px;3417  padding: 20px 18px 18px;3418  overflow: hidden;3419}3420.peach-screen.lock-screen--vault-stage .peach-lock-panel {3421  margin-top: 0;3422}3423.lock-screen--onboarding {3424  display: flex;3425  flex-direction: column;3426  gap: 12px;3427  justify-content: flex-start;3428}34293430.lock-screen::before {3431  content: "";3432  position: absolute;3433  inset: 12px 18px auto auto;3434  width: 160px;3435  height: 160px;3436  border-radius: 999px;3437  background:3438    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%);3439  filter: blur(6px);3440  opacity: 0.7;3441  pointer-events: none;3442  z-index: 0;3443}34443445.peach-lock-rune-string {3446  flex: 1;3447  display: flex;3448  align-items: center;3449  justify-content: center;3450  gap: 6px;3451  font-family: PeachScript, monospace;3452  font-size: 0.8125rem;3453  letter-spacing: 0.05em;3454  pointer-events: none;3455  user-select: none;3456  position: relative;3457  z-index: 1;3458}34593460.peach-lock-rune-string span {3461  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3462  text-shadow:3463    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3464    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3465  transition: color 0.9s ease, text-shadow 0.9s ease;3466}34673468.peach-lock-rune-string span.is-glowing {3469  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3470  text-shadow:3471    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3472    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3473}34743475.lock-screen-header {3476  display: flex;3477  align-items: center;3478  justify-content: space-between;3479  position: relative;3480  z-index: 1;3481}34823483.lock-password-input.shake {3484  animation: peach-shake 300ms ease-in-out;3485}34863487.peach-hint-error {3488  color: rgba(220, 80, 60, 0.92);3489}34903491.peach-onboarding-headline {3492  margin: 0;3493  font-family: var(--font-display);3494  font-size: 35px;3495  line-height: 0.88;3496  font-style: italic;3497  font-weight: 400;3498  max-width: 252px;3499}35003501.peach-lock-copy {3502  display: grid;3503  gap: 8px;3504  position: relative;3505  z-index: 1;3506}35073508.peach-lock-copy--onboarding {3509  gap: 10px;3510}35113512.peach-lock-hero {3513  position: relative;3514  z-index: 1;3515  display: grid;3516  gap: 8px;3517  min-height: 0;3518  padding: 4px 2px 0;3519  border: none;3520  border-radius: 0;3521  background: transparent;3522  box-shadow: none;3523}3524.peach-lock-hero-art {3525  position: absolute;3526  right: -8px;3527  top: -6px;3528  width: 120px;3529  height: 120px;3530  display: flex;3531  align-items: center;3532  justify-content: center;3533  pointer-events: none;3534  opacity: 0.12;3535  filter: saturate(0.9);3536}3537.peach-lock-hero-mark {3538  width: 100%;3539  height: 100%;3540}3541/* Peach body stays brand-peach across every accent — we don't want a3542   green or blue peach when sage/sky is selected. Leaf + vein keep the3543   sage tint because a real peach has a sage leaf. In the new brand-kit3544   mark the leaf is path 1 and the vein stroke is path 2; the body and3545   back-lobe (paths 3 + 4) must stay untouched. */3546.peach-lock-hero-mark path:nth-child(1) {3547  fill: rgba(123, 144, 96, 0.88);3548}3549.peach-lock-hero-mark path:nth-child(2) {3550  stroke: rgba(94, 122, 66, 0.95);3551}3552.peach-lock-hero > *:not(.peach-lock-hero-art) {3553  position: relative;3554  z-index: 1;3555}35563557.peach-lock-eyebrow {3558  display: inline-flex;3559  align-items: center;3560  width: fit-content;3561  padding: 4px 9px;3562  border-radius: 999px;3563  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3564  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3565  color: var(--peach-t0);3566  font-family: "IBM Plex Mono", monospace;3567  font-size: 0.5rem;3568  letter-spacing: 0.18em;3569  text-transform: uppercase;3570}35713572.peach-lock-label-row {3573  display: flex;3574  align-items: center;3575  justify-content: space-between;3576  margin-bottom: 0;3577}35783579.peach-lock-reveal-btn {3580  display: inline-flex;3581  align-items: center;3582  gap: 4px;3583  background: none;3584  border: none;3585  cursor: pointer;3586  font-family: "IBM Plex Mono", monospace;3587  font-size: 0.5625rem;3588  letter-spacing: 0.06em;3589  color: var(--peach-t2);3590  padding: 2px 0;3591  transition: color 150ms ease;3592}35933594.peach-lock-reveal-btn:hover {3595  color: var(--peach-t1);3596}35973598.peach-lock-warning {3599  color: rgba(220, 80, 60, 0.85) !important;3600  line-height: 1.5;3601}36023603.peach-onboarding-cards {3604  display: grid;3605  gap: 8px;3606  position: relative;3607  z-index: 1;3608}36093610.peach-lock-panel {3611  position: relative;3612  z-index: 1;3613  display: grid;3614  gap: 9px;3615  padding: 14px 16px 15px;3616  border-radius: 18px;3617  border: 1px solid var(--peach-t3);3618  background:3619    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3620  box-shadow:3621    inset 0 1px 0 rgba(240, 232, 216, 0.04),3622    0 12px 28px rgba(0, 0, 0, 0.12);3623}36243625/* Glass surface — lock panel and settings groups */3626.peach-glass {3627  background: rgba(26, 20, 16, 0.65);3628  border: 1px solid rgba(255, 255, 255, 0.08);3629  border-radius: 12px;3630  backdrop-filter: blur(12px) saturate(1.4);3631  -webkit-backdrop-filter: blur(12px) saturate(1.4);3632}36333634@supports not (backdrop-filter: blur(1px)) {3635  .peach-glass {3636    background: rgba(26, 20, 16, 0.92);3637    border: 1px solid rgba(255, 255, 255, 0.10);3638    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3639  }3640}36413642.light .peach-glass,3643[data-theme="light"] .peach-glass {3644  background: rgba(240, 233, 223, 0.72);3645  border: 1px solid rgba(26, 18, 8, 0.08);3646  backdrop-filter: blur(12px) saturate(1.2);3647  -webkit-backdrop-filter: blur(12px) saturate(1.2);3648}36493650@supports not (backdrop-filter: blur(1px)) {3651  .light .peach-glass,3652  [data-theme="light"] .peach-glass {3653    background: rgba(240, 233, 223, 0.97);3654    border: 1px solid rgba(26, 18, 8, 0.10);3655  }3656}36573658/* Lock panel keeps its own border-radius over the generic glass token */3659.peach-lock-panel.peach-glass {3660  border-radius: 18px;3661  background: rgba(26, 20, 16, 0.65);3662  border: 1px solid rgba(255, 255, 255, 0.08);3663  box-shadow:3664    inset 0 1px 0 rgba(255, 255, 255, 0.05),3665    0 12px 28px rgba(0, 0, 0, 0.3);3666}36673668.light .peach-lock-panel.peach-glass,3669[data-theme="light"] .peach-lock-panel.peach-glass {3670  background: rgba(240, 233, 223, 0.82);3671  border: 1px solid rgba(26, 18, 8, 0.08);3672  box-shadow:3673    inset 0 1px 0 rgba(255, 255, 255, 0.4),3674    0 8px 24px rgba(80, 56, 32, 0.15);3675}36763677@supports not (backdrop-filter: blur(1px)) {3678  .peach-lock-panel.peach-glass {3679    background: rgba(26, 20, 16, 0.92);3680    box-shadow:3681      inset 0 1px 0 rgba(255, 255, 255, 0.05),3682      0 12px 28px rgba(0, 0, 0, 0.4);3683  }3684  .light .peach-lock-panel.peach-glass,3685  [data-theme="light"] .peach-lock-panel.peach-glass {3686    background: rgba(240, 233, 223, 0.98);3687  }3688}36893690.peach-lock-panel--secondary {3691  gap: 12px;3692}36933694.peach-lock-panel-header {3695  display: flex;3696  align-items: baseline;3697  justify-content: space-between;3698  gap: 12px;3699}37003701.peach-lock-option-grid {3702  display: grid;3703  gap: 10px;3704}37053706.peach-lock-option {3707  width: 100%;3708  display: grid;3709  gap: 6px;3710  padding: 14px 15px;3711  border-radius: 16px;3712  border: 1px solid rgba(240, 232, 216, 0.08);3713  background: rgba(240, 232, 216, 0.02);3714  color: var(--peach-t0);3715  text-align: left;3716  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3717}37183719.peach-lock-option:hover {3720  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3721  background: rgba(240, 232, 216, 0.04);3722  transform: translateY(-1px);3723}37243725.peach-lock-option-title {3726  font-size: 0.75rem;3727  color: var(--peach-t0);3728}37293730.peach-lock-option-copy {3731  font-size: 0.6875rem;3732  line-height: 1.55;3733  color: var(--peach-t1);3734}37353736.peach-onboarding-stack {3737  margin-top: 2px;3738}3739.peach-lock-panel-footer {3740  display: grid;3741  gap: 6px;3742  margin-top: 2px;3743  padding-top: 10px;3744  border-top: 1px solid rgba(240, 232, 216, 0.06);3745}37463747/* ── Restore tab view ─────────────────────────────────────────────────────3748   Tab-based restore screen replacing the old three-card picker. */37493750.peach-restore-tabview {3751  overflow: hidden;3752}37533754.peach-restore-tabcard {3755  flex: 1;3756  display: flex;3757  flex-direction: column;3758  gap: 0;3759  padding: 0;3760  overflow: hidden;3761  cursor: default;3762  user-select: none;3763  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3764}37653766/* ── Tab selector ─────────────────────────────────────────────────────── */37673768.peach-restore-tabs {3769  display: flex;3770  justify-content: space-around;3771  padding: 14px 10px 10px;3772  border-bottom: 1px solid var(--peach-t3);3773  gap: 2px;3774  overflow: hidden;3775  scrollbar-width: none;3776}3777.peach-restore-tabs::-webkit-scrollbar { display: none; }37783779.peach-restore-tab {3780  background: none;3781  border: none;3782  cursor: pointer;3783  padding: 3px 2px;3784  font-family: 'Cormorant Garamond', Georgia, serif;3785  font-style: italic;3786  font-size: 11px;3787  color: var(--peach-t2);3788  transition: color 150ms ease, text-shadow 150ms ease;3789  flex: 1;3790  min-width: 0;3791  text-align: center;3792  white-space: nowrap;3793  overflow: hidden;3794  text-overflow: ellipsis;3795}3796.peach-restore-tab:hover {3797  color: var(--peach-accent);3798  text-shadow:3799    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3800    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3801}3802.peach-restore-tab.is-active {3803  color: var(--peach-accent);3804  text-shadow:3805    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3806    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3807}38083809/* ── Content area ─────────────────────────────────────────────────────── */38103811.peach-restore-content {3812  padding: 16px 16px 14px;3813  display: flex;3814  flex-direction: column;3815  gap: 8px;3816  overflow: hidden;3817  scrollbar-width: none;3818  flex: 1;3819}3820.peach-restore-content::-webkit-scrollbar { display: none; }3821.peach-restore-content > * {3822  overflow: hidden;3823  scrollbar-width: none;3824}3825.peach-restore-content > *::-webkit-scrollbar { display: none; }38263827/* ── Shared tab inner layout ──────────────────────────────────────────── */38283829.peach-rt-symbols,3830.peach-rt-csv,3831.peach-rt-phone,3832.peach-restore-codex {3833  display: flex;3834  flex-direction: column;3835  gap: 8px;3836  overflow: hidden;3837}38383839.peach-restore-codex {3840  min-height: 0;3841  justify-content: center;3842}38433844.peach-restore-codex-title {3845  margin: 0;3846  font-family: var(--font-display);3847  font-size: 1rem;3848  font-style: italic;3849  color: var(--peach-t0);3850}38513852.peach-restore-codex-copy {3853  margin: 0;3854  font-size: 0.75rem;3855  line-height: 1.5;3856  color: var(--peach-t1);3857}38583859.peach-restore-codex-button {3860  width: 100%;3861  justify-content: center;3862}38633864.peach-rt-submit {3865  width: 100%;3866}38673868.peach-rt-error {3869  margin: 0;3870  font-size: 0.6875rem;3871  color: var(--peach-breach);3872  line-height: 1.4;3873}38743875/* ── PeachScript tab ──────────────────────────────────────────────────── */38763877.peach-restore-symbols-textarea {3878  font-family: 'PeachScript', monospace;3879  font-size: 13px;3880  line-height: 1.9;3881  letter-spacing: 0.1em;3882  word-break: break-all;3883  resize: none;3884  width: 100%;3885  min-height: 56px;3886  max-height: 72px;3887  overflow: hidden;3888  scrollbar-width: none;3889  -ms-overflow-style: none;3890  box-sizing: border-box;3891  padding: 6px 8px;3892  border-radius: 8px;3893  border: 1px solid var(--peach-t3);3894  background: rgba(240, 232, 216, 0.03);3895  color: var(--peach-t0);3896}3897.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3898.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }38993900.peach-restore-symbols-pass {3901  width: 100%;3902  box-sizing: border-box;3903  padding: 7px 10px;3904  border-radius: 8px;3905  border: 1px solid var(--peach-t3);3906  background: rgba(240, 232, 216, 0.03);3907  color: var(--peach-t0);3908  font-size: 0.8125rem;3909}3910.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }3911.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }39123913.peach-rt-divider {3914  text-align: center;3915  font-size: 0.6875rem;3916  color: var(--peach-t2);3917  font-style: italic;3918}39193920.peach-rt-file-label {3921  width: 100%;3922  justify-content: center;3923}39243925.peach-rt-anim-canvas {3926  width: 100%;3927  height: 180px;3928  border-radius: 10px;3929  overflow: hidden;3930  display: block;3931}39323933/* ── CSV tab ──────────────────────────────────────────────────────────── */39343935.peach-rt-csv-sources {3936  margin: 0;3937  font-size: 0.6875rem;3938  color: var(--peach-t2);3939  line-height: 1.5;3940  text-align: center;3941}39423943.peach-rt-csv-warning {3944  margin: 0;3945  font-family: "IBM Plex Mono", monospace;3946  font-size: 0.5625rem;3947  letter-spacing: 0.12em;3948  color: var(--peach-breach);3949  text-align: center;3950}39513952/* ── From Phone tab ───────────────────────────────────────────────────── */39533954.peach-rt-phone-code {3955  margin: 0;3956  text-align: center;3957  font-family: "IBM Plex Mono", monospace;3958  font-size: 22px;3959  letter-spacing: 0.18em;3960  color: var(--peach-t0);3961}39623963.peach-rt-phone-qr {3964  display: block;3965  width: 96px;3966  height: 96px;3967  margin: 0 auto;3968  border-radius: 6px;3969  image-rendering: pixelated;3970  overflow: hidden;3971}39723973.peach-rt-phone-hint {3974  margin: 0;3975  font-size: 0.6875rem;3976  color: var(--peach-t2);3977  line-height: 1.55;3978  text-align: center;3979}39803981/* ── Intro popup ──────────────────────────────────────────────────────── */39823983.peach-restore-intro-overlay {3984  position: absolute;3985  inset: 0;3986  z-index: 100;3987  display: flex;3988  align-items: center;3989  justify-content: center;3990  padding: 20px;3991  background: rgba(12, 10, 6, 0.7);3992  backdrop-filter: blur(4px);3993  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;3994}39953996.peach-restore-intro-card {3997  width: 100%;3998  display: flex;3999  flex-direction: column;4000  gap: 12px;4001  padding: 22px 20px 20px;4002  border-radius: 16px;4003  border: 1px solid var(--peach-t3);4004  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));4005  backdrop-filter: blur(4px);4006  -webkit-backdrop-filter: blur(4px);4007  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);4008}40094010.peach-restore-intro-headline {4011  margin: 0;4012  font-family: var(--font-display);4013  font-style: italic;4014  font-size: 20px;4015  font-weight: 400;4016  color: var(--peach-t0);4017}40184019.peach-restore-intro-body {4020  display: flex;4021  flex-direction: column;4022  gap: 8px;4023}4024.peach-restore-intro-body p {4025  margin: 0;4026  font-size: 0.75rem;4027  color: var(--peach-t1);4028  line-height: 1.5;4029}40304031.peach-restore-intro-btn {4032  width: 100%;4033  margin-top: 4px;4034}40354036/* Snapshot restore panel */4037.peach-snapshot-panel {4038  gap: 10px;4039  overflow-y: auto;4040  max-height: 340px;4041}4042.peach-snapshot-list {4043  display: flex;4044  flex-direction: column;4045  gap: 4px;4046}4047.peach-snapshot-row {4048  display: flex;4049  align-items: center;4050  justify-content: space-between;4051  width: 100%;4052  padding: 8px 10px;4053  border-radius: 8px;4054  border: 1px solid rgba(240, 232, 216, 0.07);4055  background: transparent;4056  cursor: pointer;4057  transition: border-color 120ms, background 120ms;4058  text-align: left;4059  gap: 8px;4060}4061.peach-snapshot-row:hover {4062  border-color: rgba(240, 232, 216, 0.14);4063  background: rgba(240, 232, 216, 0.03);4064}4065.peach-snapshot-row.is-selected {4066  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4067  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);4068}4069.peach-snapshot-time {4070  font-size: 11.5px;4071  color: var(--peach-t0);4072  flex: 1;4073}4074.peach-snapshot-count {4075  font-family: "IBM Plex Mono", monospace;4076  font-size: 0.625rem;4077  color: var(--peach-t2);4078  flex-shrink: 0;4079}4080.peach-snapshot-confirm {4081  display: flex;4082  flex-direction: column;4083  gap: 8px;4084  padding-top: 10px;4085  border-top: 1px solid rgba(240, 232, 216, 0.06);4086}4087.peach-snapshot-warning {4088  display: flex;4089  align-items: flex-start;4090  gap: 6px;4091  font-size: 10.5px;4092  color: rgba(220, 80, 60, 0.85);4093  line-height: 1.55;4094}4095.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }4096.peach-snapshot-confirm-row {4097  display: flex;4098  gap: 6px;4099  align-items: center;4100}4101.peach-snapshot-restore-btn {4102  width: 100%;4103}4104.peach-lock-hero--unlock .peach-lock-hero-art {4105  width: 112px;4106  height: 112px;4107  right: 0;4108  top: 2px;4109  opacity: 0.1;4110}41114112.peach-card {4113  border: 1px solid var(--peach-t3);4114  border-radius: 18px;4115  background:4116    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4117  box-shadow:4118    inset 0 0 0 1px var(--peach-border-accent),4119    inset 0 1px 0 rgba(240, 232, 216, 0.04),4120    0 12px 32px rgba(0, 0, 0, 0.14);4121  overflow: hidden;4122}41234124.peach-card-active {4125  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4126  box-shadow:4127    inset 0 1px 0 rgba(240, 232, 216, 0.05),4128    0 16px 38px rgba(0, 0, 0, 0.18),4129    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4130}41314132.peach-card-disabled {4133  opacity: 0.72;4134}41354136.peach-card-header {4137  width: 100%;4138  padding: 13px 16px 11px;4139  background: transparent;4140  color: var(--peach-t0);4141  display: flex;4142  justify-content: space-between;4143  align-items: center;4144  text-align: left;4145  font-size: 0.75rem;4146}41474148.peach-card-body {4149  padding: 0 16px 16px;4150  display: grid;4151  gap: 9px;4152}41534154.peach-card-tag {4155  color: var(--peach-t2);4156  font-family: "IBM Plex Mono", monospace;4157  font-size: 0.5625rem;4158  letter-spacing: 0.12em;4159  text-transform: uppercase;4160}41614162.peach-empty-copy {4163  display: grid;4164  gap: 6px;4165  color: var(--peach-t1);4166  font-size: 0.8125rem;4167}41684169.peach-lock-submit {4170  width: 100%;4171  box-shadow:4172    0 1px 0 rgba(255,255,255,0.10) inset,4173    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4174    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4175    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4176}41774178.peach-lock-secondary {4179  width: 100%;4180  border-color: var(--peach-t3);4181  background: rgba(240, 232, 216, 0.02);4182}41834184.peach-lock-secondary:hover {4185  background: rgba(240, 232, 216, 0.04);4186}41874188.peach-lock-note {4189  max-width: none;4190  line-height: 1.55;4191  margin: 0;4192}41934194.peach-overlay-action {4195  font-size: 0.625rem;4196  padding: 4px 8px;4197  letter-spacing: 0.06em;4198  min-width: 44px;4199  text-align: center;4200}42014202.peach-inline-action {4203  flex-shrink: 0;4204  font-size: 0.5625rem;4205  letter-spacing: 0.1em;4206  text-transform: uppercase;4207  padding: 4px 7px;4208}4209.peach-password-toggle-btn {4210  display: inline-flex;4211  align-items: center;4212  justify-content: center;4213  min-width: 30px;4214  min-height: 26px;4215  padding: 0 7px;4216  border: 1px solid var(--peach-t3);4217  border-radius: 999px;4218  background: rgba(240, 232, 216, 0.04);4219  color: var(--peach-t2);4220  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4221}4222.peach-password-toggle-btn:hover {4223  border-color: var(--peach-t2);4224  color: var(--peach-t0);4225  background: rgba(240, 232, 216, 0.06);4226}42274228.peach-new-textarea {4229  width: 100%;4230  min-height: 88px;4231  resize: vertical;4232  border: 0;4233  outline: none;4234  background: transparent;4235  color: var(--peach-t1);4236  font-family: "IBM Plex Mono", monospace;4237  font-size: 0.75rem;4238  line-height: 1.65;4239  caret-color: var(--peach-accent);4240}42414242.peach-new-textarea::placeholder {4243  color: var(--peach-t2);4244  opacity: 0.7;4245}42464247.peach-settings-actions {4248  display: grid;4249  gap: 8px;4250}42514252.peach-sync-section-label {4253  font-size: 0.6875rem;4254  color: var(--peach-t2);4255  text-transform: uppercase;4256  letter-spacing: 0.05em;4257}42584259.peach-sync-network-note {4260  margin: 0 0 6px;4261  font-size: 0.75rem;4262  color: var(--peach-t2);4263  line-height: 1.4;4264}42654266.peach-settings-row--tappable {4267  background: none;4268  border: none;4269  width: 100%;4270  text-align: left;4271  cursor: pointer;4272  color: var(--peach-t1);4273  font-size: 0.8125rem;4274}4275.peach-settings-row--tappable:hover {4276  color: var(--peach-t0);4277}42784279.peach-sync-pro-hint {4280  display: flex;4281  flex-direction: column;4282  align-items: flex-start;4283  gap: 8px;4284  padding: 12px 0 4px;4285}42864287.peach-sync-device-row {4288  display: flex;4289  justify-content: space-between;4290  align-items: center;4291  padding: 6px 0;4292  border-bottom: 1px solid var(--peach-t3);4293}42944295.peach-sync-device-info {4296  display: flex;4297  flex-direction: column;4298  gap: 2px;4299}43004301.peach-sync-device-name {4302  font-size: 0.8125rem;4303  color: var(--peach-t0);4304}43054306.peach-sync-device-meta {4307  font-size: 0.6875rem;4308  color: var(--peach-t2);4309}43104311.peach-sync-status-dot {4312  display: inline-block;4313  width: 8px;4314  height: 8px;4315  border-radius: 50%;4316  vertical-align: middle;4317}43184319.peach-sync-remove-btn {4320  color: var(--peach-breach);4321}43224323.peach-sync-advanced-row {4324  display: flex;4325  justify-content: space-between;4326  align-items: center;4327  padding: 6px 0;4328  gap: 12px;4329}43304331.peach-sync-advanced-info {4332  display: flex;4333  flex-direction: column;4334  gap: 2px;4335  flex: 1;4336}43374338.peach-sync-advanced-name {4339  font-size: 0.8125rem;4340  color: var(--peach-t0);4341}43424343.peach-sync-reset-confirm {4344  display: flex;4345  flex-direction: column;4346  gap: 8px;4347  padding: 10px;4348  border: 1px solid var(--peach-breach);4349  border-radius: 10px;4350  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4351}43524353.peach-sync-reset-confirm-headline {4354  font-size: 0.8125rem;4355  font-weight: 600;4356  color: var(--peach-t0);4357  margin: 0;4358}43594360.peach-sync-reset-confirm-body {4361  font-size: 0.75rem;4362  color: var(--peach-t1);4363  margin: 0;4364  line-height: 1.4;4365}43664367.peach-btn--danger {4368  background: var(--peach-breach);4369  color: #fff;4370  border-color: var(--peach-breach);4371}4372.peach-btn--danger:hover:not(:disabled) {4373  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4374}4375.peach-btn--danger:disabled {4376  opacity: 0.55;4377  cursor: not-allowed;4378}43794380.peach-sync-hero-icon {4381  color: var(--peach-t1);4382  opacity: 0.85;4383}43844385.peach-import-preview {4386  margin-bottom: 12px;4387  max-height: 152px;4388  overflow-y: auto;4389  border: 1px solid var(--peach-t3);4390  border-radius: 10px;4391  padding: 8px 10px;4392  display: grid;4393  gap: 8px;4394  background: rgba(240, 232, 216, 0.02);4395}43964397.peach-import-preview-row {4398  display: flex;4399  justify-content: space-between;4400  gap: 10px;4401  font-size: 0.6875rem;4402  color: var(--peach-t1);4403}44044405.peach-import-preview-title {4406  color: var(--peach-t0);4407  flex: 1;4408  min-width: 0;4409  overflow: hidden;4410  text-overflow: ellipsis;4411  white-space: nowrap;4412}44134414.peach-import-preview-meta {4415  color: var(--peach-t2);4416  flex-shrink: 0;4417  max-width: 42%;4418  overflow: hidden;4419  text-overflow: ellipsis;4420  white-space: nowrap;4421}44224423.peach-import-preview-more {4424  color: var(--peach-t2);4425  font-size: 0.625rem;4426}44274428.peach-restore-copy {4429  margin: 0;4430  color: var(--peach-t1);4431  font-size: 0.6875rem;4432  line-height: 1.6;4433}44344435.peach-restore-warning {4436  padding: 10px 12px;4437  border-radius: 12px;4438  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4439  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4440  color: var(--peach-t0);4441  font-size: 0.6875rem;4442  line-height: 1.55;4443}44444445.peach-provider-chips {4446  display: flex;4447  flex-wrap: wrap;4448  gap: 6px;4449}44504451.peach-provider-chip {4452  display: inline-flex;4453  align-items: center;4454  padding: 5px 8px;4455  border-radius: 999px;4456  border: 1px solid var(--peach-t3);4457  background: rgba(240, 232, 216, 0.02);4458  color: var(--peach-t1);4459  font-family: "IBM Plex Mono", monospace;4460  font-size: 0.5rem;4461  letter-spacing: 0.08em;4462  text-transform: uppercase;4463}44644465.peach-restore-file,4466.peach-restore-input {4467  width: 100%;4468  border-radius: 10px;4469  border: 1px solid var(--peach-t3);4470  background: var(--peach-s2);4471  color: var(--peach-t0);4472  font-size: 0.75rem;4473}44744475.peach-restore-file {4476  padding: 9px 10px;4477}44784479.peach-restore-file::file-selector-button {4480  margin-right: 10px;4481  padding: 7px 10px;4482  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4483  border-radius: 999px;4484  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4485  color: var(--peach-t0);4486  font-size: 0.625rem;4487  letter-spacing: 0.08em;4488  text-transform: uppercase;4489  cursor: pointer;4490}44914492.peach-restore-input {4493  padding: 10px 12px;4494}44954496.peach-auth-grid {4497  display: grid;4498  gap: 10px;4499}45004501.peach-import-summary {4502  color: var(--peach-t1);4503  font-size: 0.75rem;4504  line-height: 1.6;4505  margin-bottom: 12px;4506}45074508.peach-restore-error {4509  color: rgba(220, 80, 60, 0.95);4510  font-size: 0.75rem;4511  line-height: 1.55;4512}45134514.peach-passkey-card {4515  max-width: 400px;4516  margin: auto 16px;4517  align-self: center;4518  width: calc(100% - 32px);4519}45204521/* Center the approval card vertically inside the overlay-view (which sets4522 * flex-direction: column without justify-content). Without this, the card4523 * sits at the top with a tall empty band below — looks unfinished on the4524 * 320px popup. */4525.peach-overlay-view:has(.peach-passkey-card) {4526  justify-content: center;4527}45284529.peach-pro-badge {4530  padding: 2px 6px;4531  border-radius: 999px;4532  font-family: var(--font-ui);4533  font-size: 0.625rem;4534  letter-spacing: 0.08em;4535  text-transform: uppercase;4536  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4537  color: var(--peach-accent);4538}45394540/* ── Shortcuts rebind table ─────────────────────────────────── */4541.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4542.peach-shortcut-row {4543  display: flex;4544  align-items: center;4545  gap: 10px;4546  padding: 6px 0;4547}4548.peach-shortcut-row-label {4549  flex: 1;4550  font-size: 0.75rem;4551  color: var(--peach-t0);4552}4553.peach-shortcut-chip {4554  min-width: 64px;4555  padding: 4px 10px;4556  border-radius: 6px;4557  border: 1px solid var(--peach-t3);4558  background: var(--peach-input-bg, var(--surface-card));4559  color: var(--peach-t0);4560  font-family: var(--font-mono);4561  font-size: 0.6875rem;4562  letter-spacing: 0.04em;4563  cursor: pointer;4564  text-align: center;4565  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4566}4567.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4568.peach-shortcut-chip.is-custom {4569  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4570  color: var(--peach-accent);4571}4572.peach-shortcut-chip.is-capturing {4573  border-color: var(--peach-accent);4574  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4575  color: var(--peach-accent);4576  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4577}4578@keyframes peach-shortcut-capture-pulse {4579  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4580  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4581}4582.peach-shortcut-reset {4583  background: transparent;4584  border: none;4585  cursor: pointer;4586  color: var(--peach-t2);4587  padding: 4px 6px;4588  border-radius: 5px;4589  font-size: 0.875rem;4590  line-height: 1;4591  transition: color 120ms ease, background 120ms ease;4592}4593.peach-shortcut-reset:hover {4594  color: var(--peach-t0);4595  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4596}4597.peach-shortcuts-conflict {4598  margin: 4px 0 0;4599  padding: 8px 10px;4600  border-radius: 7px;4601  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4602  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4603  font-family: var(--font-mono);4604  font-size: 0.6875rem;4605  color: var(--peach-t0);4606}46074608/* ── Help dialog overlay (? to open) ────────────────────────── */4609.peach-shortcuts-help-backdrop {4610  position: fixed;4611  inset: 0;4612  background: rgba(0, 0, 0, 0.55);4613  backdrop-filter: blur(2px);4614  display: flex;4615  align-items: center;4616  justify-content: center;4617  z-index: 1000;4618  animation: peach-help-fade-in 140ms ease forwards;4619}4620@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4621.peach-shortcuts-help-card {4622  width: min(320px, 92vw);4623  max-height: 80vh;4624  overflow-y: auto;4625  border-radius: 14px;4626  border: 1px solid var(--peach-t3);4627  background: var(--peach-bg);4628  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4629  padding: 16px 18px 18px;4630  display: flex;4631  flex-direction: column;4632  gap: 12px;4633}4634.peach-shortcuts-help-head {4635  display: flex; align-items: center; justify-content: space-between;4636}4637.peach-shortcuts-help-head h3 {4638  margin: 0;4639  font-family: var(--font-display);4640  font-style: italic;4641  font-weight: 400;4642  font-size: 22px;4643  color: var(--peach-t0);4644}4645.peach-shortcuts-help-close {4646  background: transparent;4647  border: none;4648  color: var(--peach-t2);4649  cursor: pointer;4650  font-size: 0.875rem;4651  padding: 4px 8px;4652  border-radius: 5px;4653}4654.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4655.peach-shortcuts-help-body ul {4656  list-style: none; padding: 0; margin: 4px 0 12px;4657  display: grid; gap: 8px;4658}4659.peach-shortcuts-help-body li {4660  display: flex; align-items: center; justify-content: space-between; gap: 12px;4661  font-size: 0.75rem; color: var(--peach-t0);4662}4663.peach-shortcuts-help-body kbd {4664  font-family: var(--font-mono);4665  font-size: 0.6875rem;4666  padding: 3px 8px;4667  border-radius: 6px;4668  background: var(--surface-card);4669  border: 1px solid var(--peach-t3);4670  color: var(--peach-accent);4671  letter-spacing: 0.04em;4672}46734674/* ── Pro promo on Account screen ────────────────────────────── */4675.peach-pro-promo {4676  position: relative;4677  border-radius: 14px;4678  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4679  background:4680    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4681    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4682    var(--surface-card);4683  overflow: hidden;4684  margin-bottom: 14px;4685}4686.peach-pro-promo-glow {4687  position: absolute;4688  inset: -40% -20% auto auto;4689  width: 220px; height: 220px;4690  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4691  pointer-events: none;4692  filter: blur(8px);4693}4694.peach-pro-promo-inner {4695  position: relative;4696  padding: 18px 18px 16px;4697}4698.peach-pro-promo-title {4699  font-family: var(--font-display);4700  font-style: italic;4701  font-weight: 400;4702  font-size: 28px;4703  line-height: 1;4704  letter-spacing: -0.005em;4705  color: var(--peach-t0);4706  margin: 0 0 4px;4707}4708.peach-pro-promo-tagline {4709  font-family: var(--font-mono);4710  font-size: 0.625rem;4711  letter-spacing: 0.06em;4712  color: var(--peach-t2);4713  margin: 0 0 14px;4714}4715.peach-pro-promo-list {4716  list-style: none;4717  margin: 0 0 16px;4718  padding: 0;4719  display: grid;4720  gap: 9px;4721}4722.peach-pro-promo-list li {4723  display: flex;4724  align-items: flex-start;4725  gap: 9px;4726  font-size: 0.75rem;4727  color: var(--peach-t1);4728  line-height: 1.4;4729}4730.peach-pro-promo-list svg {4731  width: 14px;4732  height: 14px;4733  flex-shrink: 0;4734  color: var(--peach-accent);4735  margin-top: 2px;4736}4737.peach-pro-promo-list span {4738  color: var(--peach-t0);4739}4740.peach-pro-promo-cta {4741  width: 100%;4742  background: var(--peach-accent);4743  color: #fff;4744  border: none;4745  padding: 9px 12px;4746  border-radius: 9px;4747  font-size: 0.75rem;4748  font-weight: 500;4749  font-family: var(--font-ui);4750  letter-spacing: 0.02em;4751  text-decoration: none;4752  display: inline-flex;4753  align-items: center;4754  justify-content: center;4755  cursor: pointer;4756  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4757  box-shadow: 0 2px 16px var(--peach-glow);4758}4759.peach-pro-promo-cta:hover {4760  filter: brightness(1.07);4761  box-shadow: 0 4px 24px var(--peach-glow);4762  transform: translateY(-1px);4763}4764.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }47654766.peach-pro-or-divider {4767  display: flex;4768  align-items: center;4769  gap: 10px;4770  margin: 4px 0 12px;4771  font-family: var(--font-mono);4772  font-size: 0.625rem;4773  letter-spacing: 0.06em;4774  color: var(--peach-t2);4775  text-transform: uppercase;4776}4777.peach-pro-or-divider::before,4778.peach-pro-or-divider::after {4779  content: "";4780  flex: 1;4781  height: 1px;4782  background: var(--peach-t3);4783}47844785.peach-loading {4786  position: absolute;4787  inset: 0;4788  display: flex;4789  align-items: center;4790  justify-content: center;4791  background: var(--bg);4792  animation: peach-loading-pulse 1.2s ease-in-out infinite;4793}47944795@keyframes peach-loading-pulse {4796  0%, 100% { opacity: 0.6; }4797  50% { opacity: 1; }4798}47994800/* ── Health Dashboard ─────────────────────────────────────────────────── */4801.peach-health-body {4802  flex: 1;4803  overflow-y: auto;4804  display: flex;4805  flex-direction: column;4806  /* Hide the platform scrollbar — every other scrollable surface in the4807   * popup hides it; the Health view was the one outlier and it ruined the4808   * polish. Behavior unchanged, just no rail rendered. */4809  scrollbar-width: none;4810  -ms-overflow-style: none;4811}4812.peach-health-body::-webkit-scrollbar { display: none; }48134814/* Loading screen for the Vault Health view. The advanced report computation4815 * can run for a few seconds on a large vault — without a clear loading4816 * screen the surface looked broken (the entry view bleeds through the4817 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4818.peach-health-loading-screen {4819  flex: 1;4820  display: flex;4821  flex-direction: column;4822  align-items: center;4823  justify-content: center;4824  gap: 14px;4825  padding: 32px 28px;4826  text-align: center;4827}48284829.peach-health-loading-glyph {4830  width: 48px;4831  height: 48px;4832  display: flex;4833  align-items: center;4834  justify-content: center;4835  border-radius: 14px;4836  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4837  color: var(--peach-accent);4838}48394840.peach-health-loading-title {4841  margin: 0;4842  font-family: var(--font-display);4843  font-style: italic;4844  font-weight: 300;4845  font-size: 19px;4846  line-height: 1.2;4847  color: var(--peach-t0);4848}48494850.peach-health-loading-copy {4851  margin: 0;4852  max-width: 240px;4853  font-size: 0.75rem;4854  line-height: 1.55;4855  color: var(--peach-t2);4856}48574858.peach-health-loading-track {4859  width: 200px;4860  height: 3px;4861  margin-top: 6px;4862  border-radius: 999px;4863  background: rgba(240, 232, 216, 0.06);4864  overflow: hidden;4865}48664867.peach-health-loading-fill {4868  width: 40%;4869  height: 100%;4870  border-radius: inherit;4871  background: linear-gradient(4872    90deg,4873    transparent 0%,4874    var(--peach-accent) 50%,4875    transparent 100%4876  );4877  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4878}48794880@keyframes peach-health-loading-sweep {4881  0%   { transform: translateX(-100%); }4882  100% { transform: translateX(350%); }4883}48844885[data-motion="reduce"] .peach-health-loading-fill,4886[data-motion="reduce"] .peach-health-loading-glyph svg path {4887  animation: none;4888}48894890.peach-health-summary {4891  padding: 10px 16px 6px;4892  font-family: "IBM Plex Mono", monospace;4893  font-size: 0.6875rem;4894}4895.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4896.peach-health-summary-ok { color: var(--peach-t2); }48974898.peach-health-check-row {4899  padding: 0 16px 10px;4900}4901.peach-health-check-btn {4902  width: 100%;4903  display: flex;4904  align-items: center;4905  justify-content: center;4906}49074908.peach-health-sections {4909  flex: 1;4910  display: flex;4911  flex-direction: column;4912}49134914.peach-health-section {4915  border-bottom: 1px solid var(--peach-t3);4916}49174918.peach-health-section-header {4919  width: 100%;4920  display: flex;4921  align-items: center;4922  justify-content: space-between;4923  padding: 9px 16px;4924  background: transparent;4925  cursor: pointer;4926  color: var(--peach-t0);4927}49284929.peach-health-section-title-row {4930  display: flex;4931  align-items: center;4932  gap: 8px;4933}49344935.peach-health-count-badge {4936  display: inline-flex;4937  align-items: center;4938  justify-content: center;4939  min-width: 20px;4940  height: 18px;4941  padding: 0 5px;4942  border-radius: 999px;4943  background: rgba(220,80,60,0.15);4944  border: 1px solid rgba(220,80,60,0.25);4945  font-family: "IBM Plex Mono", monospace;4946  font-size: 0.5625rem;4947  color: rgba(220,80,60,0.9);4948}49494950.peach-health-section-title {4951  font-family: "IBM Plex Mono", monospace;4952  font-size: 0.6875rem;4953  text-transform: uppercase;4954  letter-spacing: 0.1em;4955  color: var(--peach-t1);4956}49574958.peach-health-chevron {4959  color: var(--peach-t2);4960  transition: transform 200ms ease;4961  flex-shrink: 0;4962}4963.peach-health-chevron.is-expanded {4964  transform: rotate(180deg);4965}49664967.peach-health-section-body {4968  padding: 0 16px 10px;4969  display: flex;4970  flex-direction: column;4971  gap: 4px;4972}49734974.peach-health-row {4975  display: flex;4976  align-items: flex-start;4977  justify-content: space-between;4978  gap: 8px;4979  padding: 6px 8px;4980  border-radius: 8px;4981  background: rgba(240,232,216,0.02);4982}49834984.peach-health-row-info {4985  flex: 1;4986  min-width: 0;4987  display: flex;4988  flex-direction: column;4989  gap: 2px;4990}49914992.peach-health-row-name {4993  font-family: var(--font-display);4994  font-size: 0.9375rem;4995  font-style: italic;4996  font-weight: 400;4997  color: var(--peach-t0);4998  white-space: nowrap;4999  overflow: hidden;5000  text-overflow: ellipsis;5001}50025003.peach-health-row-meta {5004  font-family: "IBM Plex Mono", monospace;5005  font-size: 0.5625rem;5006  color: var(--peach-t2);5007  letter-spacing: 0.05em;5008}50095010.peach-health-fix-btn {5011  font-size: 0.5625rem;5012  letter-spacing: 0.08em;5013  text-transform: uppercase;5014  padding: 4px 7px;5015  flex-shrink: 0;5016  display: flex;5017  align-items: center;5018}50195020.peach-health-empty {5021  font-family: "IBM Plex Mono", monospace;5022  font-size: 0.625rem;5023  color: var(--peach-t2);5024  padding: 6px 0;5025}50265027.peach-health-loading {5028  font-family: "IBM Plex Mono", monospace;5029  font-size: 0.625rem;5030  color: var(--peach-t2);5031  padding: 6px 0;5032  display: flex;5033  align-items: center;5034  gap: 6px;5035}50365037.peach-health-loading::before {5038  content: "";5039  width: 10px;5040  height: 10px;5041  border: 1.5px solid var(--peach-t3);5042  border-top-color: var(--peach-accent);5043  border-radius: 50%;5044  animation: peach-spin 600ms linear infinite;5045}50465047@keyframes peach-spin {5048  to { transform: rotate(360deg); }5049}50505051.peach-spinner {5052  width: 32px;5053  height: 32px;5054  border: 2px solid var(--peach-s2);5055  border-top-color: var(--peach-accent);5056  border-radius: 50%;5057  margin: 0 auto 16px;5058  animation: peach-spin 0.8s linear infinite;5059}50605061.peach-progress-screen {5062  text-align: center;5063  padding: 32px 16px;5064}50655066.peach-progress-screen-title {5067  font-size: 0.8125rem;5068  color: var(--peach-t0);5069  margin-bottom: 16px;5070}50715072.peach-progress-screen-stage {5073  font-size: 0.6875rem;5074  color: var(--peach-t2);5075  min-height: 14px;5076}50775078.peach-progress-screen-note {5079  font-size: 0.625rem;5080  color: var(--peach-t2);5081  margin-top: 8px;5082}50835084.peach-pairing-body {5085  flex: 1;5086  overflow-y: auto;5087  display: flex;5088  flex-direction: column;5089}50905091.peach-pairing-content {5092  flex: 1;5093  display: flex;5094  flex-direction: column;5095  align-items: center;5096  justify-content: center;5097  gap: 14px;5098  padding: 28px 20px;5099  text-align: center;5100}51015102.peach-pairing-code-screen {5103  gap: 18px;5104}51055106.peach-pairing-headline {5107  font-family: var(--font-display);5108  font-style: italic;5109  font-weight: 300;5110  font-size: 28px;5111  color: var(--peach-t0);5112  margin: 0;5113  line-height: 1;5114}51155116.peach-pairing-subline {5117  font-size: 0.75rem;5118  color: var(--peach-t2);5119  max-width: 220px;5120  line-height: 1.5;5121  margin: 0;5122}51235124.peach-pairing-subline--center {5125  text-align: center;5126}51275128/* 6-digit pairing code — both display (.peach-pairing-code) and entry5129   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking5130   so the two modes feel like the same surface. */5131.peach-pairing-code {5132  font-family: "IBM Plex Mono", monospace;5133  font-size: 36px;5134  letter-spacing: 0.25em;5135  color: var(--peach-t0);5136  text-align: center;5137  padding: 24px 0;5138  text-shadow:5139    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),5140    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);5141  background: transparent;5142  border: 0;5143  cursor: default;5144  user-select: text;5145}51465147.peach-pairing-code--loading,5148.peach-pairing-code--expired {5149  font-size: 18px;5150  letter-spacing: 0.04em;5151  color: var(--peach-t2);5152  cursor: pointer;5153  text-shadow: none;5154}51555156.peach-pairing-qr-container {5157  display: flex;5158  flex-direction: column;5159  align-items: center;5160  gap: 10px;5161}51625163.peach-pairing-qr {5164  width: 240px;5165  height: 240px;5166  display: block;5167}51685169.peach-pairing-instruction {5170  font-size: 0.75rem;5171  color: var(--peach-t2);5172  text-align: center;5173  line-height: 1.5;5174  margin: 0;5175  max-width: 220px;5176}51775178.peach-pairing-expiry {5179  font-family: "IBM Plex Mono", monospace;5180  font-size: 13px;5181  letter-spacing: 0.06em;5182  color: var(--peach-t2);5183  margin: 0;5184}51855186.peach-pairing-regen {5187  font-size: 0.75rem;5188  color: var(--peach-accent);5189  background: transparent;5190  border: 0;5191  cursor: pointer;5192  padding: 4px 0;5193  text-decoration: underline;5194  text-underline-offset: 2px;5195}51965197.peach-pairing-code-input {5198  font-family: "IBM Plex Mono", monospace;5199  font-size: 36px;5200  letter-spacing: 0.25em;5201  color: var(--peach-t0);5202  background: transparent;5203  border: 0;5204  border-bottom: 1px solid var(--peach-t3);5205  outline: none;5206  text-align: center;5207  padding: 18px 0;5208  width: 220px;5209  caret-color: var(--peach-accent);5210  transition: border-color 160ms ease;5211}52125213.peach-pairing-code-input::placeholder {5214  color: var(--peach-t3);5215}52165217.peach-pairing-code-input:focus {5218  border-bottom-color: var(--peach-accent);5219}52205221.peach-pairing-toggle {5222  background: transparent;5223  border: 0;5224  color: var(--peach-t2);5225  font-size: 0.75rem;5226  padding: 8px 4px;5227  cursor: pointer;5228  transition: color 120ms ease;5229}52305231.peach-pairing-toggle:hover:not(:disabled) {5232  color: var(--peach-t1);5233}52345235.peach-pairing-toggle:disabled {5236  opacity: 0.5;5237  cursor: default;5238}52395240.peach-pairing-hint {5241  font-size: 0.6875rem;5242  color: var(--peach-t2);5243  margin: 0;5244  text-align: center;5245}52465247.peach-pairing-status {5248  display: flex;5249  align-items: center;5250  gap: 8px;5251  margin: 0;5252  font-size: 0.75rem;5253  color: var(--peach-t1);5254}52555256.peach-pairing-error {5257  margin: 0;5258  font-size: 0.6875rem;5259  color: var(--peach-breach);5260}52615262.peach-pairing-error--muted {5263  color: var(--peach-t2);5264}52655266.peach-pairing-spinner {5267  width: 12px;5268  height: 12px;5269  border: 1.5px solid var(--peach-t3);5270  border-top-color: var(--peach-accent);5271  border-radius: 50%;5272  animation: peach-spin 0.8s linear infinite;5273}52745275.peach-pairing-success-icon,5276.peach-pairing-error-icon,5277.peach-pairing-hero {5278  display: inline-flex;5279  align-items: center;5280  justify-content: center;5281}52825283/* Tag chips */5284.peach-tag-chip {5285  display: inline-flex;5286  align-items: center;5287  gap: 4px;5288  padding: 3px 8px;5289  border-radius: 999px;5290  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5291  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5292  color: var(--peach-t0);5293  font-family: "IBM Plex Mono", monospace;5294  font-size: 0.625rem;5295  letter-spacing: 0.04em;5296}52975298.peach-tag-chip-remove {5299  background: transparent;5300  border: none;5301  color: inherit;5302  opacity: 0.6;5303  cursor: pointer;5304  padding: 0;5305  font-size: 0.75rem;5306  line-height: 1;5307}53085309.peach-tag-chip-remove:hover {5310  opacity: 1;5311}53125313/* Tag input */5314.peach-tag-input-wrap {5315  border-bottom: 1px solid var(--peach-t3);5316}53175318.peach-tag-suggestions {5319  display: flex;5320  flex-wrap: wrap;5321  gap: 4px;5322  padding: 6px 0;5323}53245325.peach-tag-suggestion {5326  padding: 2px 8px;5327  border-radius: 999px;5328  border: 1px solid var(--peach-t3);5329  background: var(--peach-s2);5330  color: var(--peach-t1);5331  font-family: "IBM Plex Mono", monospace;5332  font-size: 0.625rem;5333  cursor: pointer;5334  transition: border-color 80ms ease, background 80ms ease;5335}53365337.peach-tag-suggestion:hover {5338  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5339  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5340}53415342/* Identity suggestions — shown below username/email inputs in new-entry form */5343@keyframes peach-suggest-in {5344  from { opacity: 0; transform: translateY(-4px); }5345  to   { opacity: 1; transform: none; }5346}53475348.peach-identity-suggestions {5349  display: flex;5350  flex-direction: column;5351  gap: 1px;5352  margin-top: 4px;5353  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5354}53555356.peach-identity-filter-row {5357  display: flex;5358  align-items: center;5359  gap: 4px;5360  padding: 2px 0 5px;5361}53625363.peach-identity-collapse-btn {5364  margin-left: auto;5365  background: transparent;5366  border: none;5367  cursor: pointer;5368  color: var(--peach-t3);5369  padding: 2px 4px;5370  display: flex;5371  align-items: center;5372  line-height: 0;5373  border-radius: 3px;5374  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5375}53765377.peach-identity-collapse-btn:hover {5378  color: var(--peach-t1);5379}53805381.peach-identity-collapse-btn.is-collapsed {5382  transform: rotate(-90deg);5383}53845385.peach-identity-rows {5386  display: grid;5387  grid-template-rows: 1fr;5388  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5389}53905391.peach-identity-rows.is-collapsed {5392  grid-template-rows: 0fr;5393}53945395.peach-identity-rows-inner {5396  overflow-y: auto;5397  min-height: 0;5398  max-height: 148px;5399  scrollbar-width: thin;5400  scrollbar-color: var(--peach-t3) transparent;5401  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5402  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5403}54045405.peach-identity-rows-inner::-webkit-scrollbar {5406  width: 4px;5407}54085409.peach-identity-rows-inner::-webkit-scrollbar-track {5410  background: transparent;5411}54125413.peach-identity-rows-inner::-webkit-scrollbar-thumb {5414  background: var(--peach-t3);5415  border-radius: 2px;5416}54175418.peach-identity-filter-pill {5419  padding: 2px 7px;5420  border-radius: 999px;5421  border: 1px solid var(--peach-t3);5422  background: transparent;5423  color: var(--peach-t2);5424  font-family: "IBM Plex Mono", monospace;5425  font-size: 0.6rem;5426  cursor: pointer;5427  transition: border-color 80ms, background 80ms, color 80ms;5428}54295430.peach-identity-filter-pill.is-on {5431  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5432  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5433  color: var(--peach-accent);5434}54355436.peach-identity-suggestion {5437  display: flex;5438  align-items: center;5439  gap: 6px;5440  width: 100%;5441  padding: 4px 6px;5442  border-radius: 5px;5443  border: none;5444  background: transparent;5445  cursor: pointer;5446  text-align: left;5447  transition: background 80ms ease;5448}54495450.peach-identity-suggestion:hover,5451.peach-identity-suggestion:focus {5452  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5453  outline: none;5454}54555456.peach-identity-suggestion-value {5457  font-family: "IBM Plex Mono", monospace;5458  font-size: 0.7rem;5459  color: var(--peach-t1);5460  overflow: hidden;5461  text-overflow: ellipsis;5462  white-space: nowrap;5463  flex: 1;5464  min-width: 0;5465}54665467.peach-identity-suggestion-type {5468  font-family: "IBM Plex Mono", monospace;5469  font-size: 0.55rem;5470  font-weight: 600;5471  flex-shrink: 0;5472  padding: 1px 4px;5473  border-radius: 3px;5474}54755476.peach-identity-suggestion-type--email {5477  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5478  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5479}54805481.peach-identity-suggestion-type--username {5482  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5483  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5484}54855486.peach-identity-suggestion-meta {5487  font-family: "IBM Plex Mono", monospace;5488  font-size: 0.6rem;5489  color: var(--peach-t3);5490  flex-shrink: 0;5491}54925493/* Tag filter strip */5494.peach-tag-filter-strip {5495  border-bottom: 1px solid var(--peach-t3);5496  flex-shrink: 0;5497}54985499.peach-tag-filter-chip {5500  display: inline-flex;5501  align-items: center;5502  padding: 4px 10px;5503  border-radius: 999px;5504  border: 1px solid var(--peach-t3);5505  background: transparent;5506  color: var(--peach-t2);5507  font-family: "IBM Plex Mono", monospace;5508  font-size: 0.5625rem;5509  letter-spacing: 0.06em;5510  text-transform: uppercase;5511  cursor: pointer;5512  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5513  white-space: nowrap;5514}55155516.peach-tag-filter-chip:hover {5517  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5518  color: var(--peach-t1);5519}55205521.peach-tag-filter-chip.is-selected {5522  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5523  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5524  color: var(--peach-t0);5525}55265527/* ─────────────────────────────────────────────────────────────────────────5528   v1.4.12 additions5529   ─────────────────────────────────────────────────────────────────────── */55305531/* Sort bar */5532.peach-sort-bar {5533  display: flex;5534  align-items: center;5535  gap: 4px;5536  padding: 5px 12px;5537  border-bottom: 1px solid var(--peach-t3);5538  flex-shrink: 0;5539  overflow-x: auto;5540  scrollbar-width: none;5541}55425543.peach-sort-btn {5544  padding: 2px 9px;5545  border-radius: 999px;5546  border: 1px solid transparent;5547  background: transparent;5548  color: var(--peach-t2);5549  font-family: "IBM Plex Mono", monospace;5550  font-size: 0.5625rem;5551  letter-spacing: 0.07em;5552  text-transform: uppercase;5553  cursor: pointer;5554  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5555  white-space: nowrap;5556}55575558.peach-sort-btn:hover {5559  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5560  color: var(--peach-t1);5561}55625563.peach-sort-btn.is-active {5564  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5565  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5566  color: var(--peach-t0);5567}55685569.peach-sort-scope-btn {5570  padding-inline: 8px;5571  font-size: 0.53125rem;5572  letter-spacing: 0.05em;5573}55745575.peach-sort-domain-hint {5576  margin-left: auto;5577  font-family: "IBM Plex Mono", monospace;5578  font-size: 0.5625rem;5579  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5580  white-space: nowrap;5581  overflow: hidden;5582  text-overflow: ellipsis;5583  max-width: 110px;5584}55855586/* Tab-match badge on entry rows */5587.peach-tab-match-badge {5588  display: inline-block;5589  width: 6px;5590  height: 6px;5591  border-radius: 50%;5592  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5593  margin-left: 5px;5594  vertical-align: middle;5595  flex-shrink: 0;5596  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5597}55985599.peach-entry-row.is-tab-match {5600  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5601  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5602}56035604.peach-entry-row.is-tab-match:hover {5605  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5606}56075608/* Entry list stagger entrance */5609@keyframes peach-entry-fadein {5610  from { opacity: 0; transform: translateY(4px); }5611  to   { opacity: 1; transform: translateY(0); }5612}56135614.peach-vault-list .peach-entry-row {5615  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5616}56175618/* Button press micro-interaction */5619.peach-btn:active {5620  transform: scale(0.95);5621  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5622}56235624.peach-sort-btn:active,5625.peach-tag-filter-chip:active {5626  transform: scale(0.93);5627  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5628}56295630/* Password strength bar (Lock view + shared) */5631.peach-password-strength {5632  display: flex;5633  align-items: center;5634  gap: 8px;5635  margin-top: 6px;5636}56375638.peach-strength-bar {5639  flex: 1;5640  height: 3px;5641  border-radius: 2px;5642  background: var(--peach-t3);5643  overflow: hidden;5644}56455646.peach-strength-fill {5647  height: 100%;5648  border-radius: 2px;5649  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5650              background 300ms ease;5651}56525653.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5654.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5655.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5656.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }56575658.peach-strength-label {5659  font-family: "IBM Plex Mono", monospace;5660  font-style: italic;5661  font-size: 0.5625rem;5662  font-weight: 300;5663  letter-spacing: 0.06em;5664  color: var(--peach-t2);5665  min-width: 36px;5666  text-align: right;5667}56685669.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5670.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5671.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5672.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }56735674/* Duress form */5675.peach-duress-status {5676  padding: 2px 8px;5677  border-radius: 999px;5678  border: 1px solid var(--peach-t3);5679  font-family: "IBM Plex Mono", monospace;5680  font-size: 0.5625rem;5681  letter-spacing: 0.07em;5682  text-transform: uppercase;5683  color: var(--peach-t2);5684  flex-shrink: 0;5685}56865687.peach-duress-status.is-active {5688  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5689  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5690  color: var(--peach-t0);5691}56925693.peach-duress-form {5694  padding: 8px 0 4px;5695  display: flex;5696  flex-direction: column;5697  gap: 6px;5698}56995700.peach-duress-form .peach-label {5701  margin-top: 4px;5702}57035704.peach-duress-actions {5705  display: flex;5706  gap: 6px;5707  align-items: center;5708  margin-top: 4px;5709}57105711.peach-duress-actions .peach-btn:first-child {5712  margin-right: auto;5713}57145715/* Improved overlay spring entrance */5716.peach-overlay-view.ov-enter-up {5717  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5718}57195720@keyframes ov-enter-up-spring {5721  from { opacity: 0; transform: translateY(16px) scale(0.98); }5722  to   { opacity: 1; transform: translateY(0) scale(1); }5723}57245725.peach-overlay-view.ov-enter-right {5726  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5727}57285729@keyframes ov-enter-right-spring {5730  from { opacity: 0; transform: translateX(18px) scale(0.98); }5731  to   { opacity: 1; transform: translateX(0) scale(1); }5732}57335734/* ── Onboarding-mode restore screens (file import) ── */5735/* Used when MainImportView renders during onboarding (no vault yet).5736   Animates like a lock-screen transition. */5737.peach-lock-view {5738  position: absolute;5739  inset: 0;5740  display: flex;5741  flex-direction: column;5742  background:5743    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5744    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5745    var(--peach-bg);5746  z-index: 2;5747  overflow: hidden;5748  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5749}57505751.peach-lock-view-header {5752  display: flex;5753  align-items: center;5754  justify-content: space-between;5755  padding: 16px 18px 12px;5756  flex-shrink: 0;5757}57585759/* ───────── Settings: auto-lock select ───────── */5760.peach-settings-select {5761  font-family: "IBM Plex Mono", monospace;5762  font-size: 0.6875rem;5763  background: transparent;5764  border: 1px solid var(--peach-t3);5765  border-radius: 4px;5766  color: var(--peach-t1);5767  padding: 3px 6px;5768  cursor: pointer;5769  outline: none;5770}5771.peach-settings-select:focus {5772  border-color: var(--peach-accent);5773}57745775/* ───────── Duress status pill (new polished) ───────── */5776.peach-duress-status-pill {5777  font-family: "IBM Plex Mono", monospace;5778  font-size: 0.5625rem;5779  text-transform: uppercase;5780  letter-spacing: 0.12em;5781  padding: 2px 8px;5782  border-radius: 12px;5783  background: var(--peach-t3);5784  color: var(--peach-t2);5785  flex-shrink: 0;5786}5787.peach-duress-status-pill.is-active {5788  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5789  color: var(--peach-accent);5790}57915792/* ───────── Entry advanced disclosure (canary) ───────── */5793.peach-entry-advanced {5794  margin-top: 12px;5795  border-top: 1px solid var(--peach-t3);5796  padding-top: 10px;5797  position: relative;5798  z-index: 1;5799}5800.peach-entry-advanced-toggle {5801  display: flex;5802  align-items: center;5803  justify-content: space-between;5804  width: 100%;5805  background: transparent;5806  border: none;5807  cursor: pointer;5808  padding: 0;5809  color: var(--peach-t2);5810}5811.peach-canary-section {5812  margin-top: 10px;5813  display: grid;5814  gap: 6px;5815}58165817/* ───────── Import: merge/replace radio choices ───────── */5818.peach-import-choice {5819  display: flex;5820  align-items: flex-start;5821  gap: 10px;5822  padding: 8px 10px;5823  border: 1px solid var(--peach-t3);5824  border-radius: 10px;5825  cursor: pointer;5826  margin-bottom: 6px;5827  transition: border-color 120ms ease, background 120ms ease;5828}5829.peach-import-choice:hover {5830  border-color: var(--peach-accent);5831}5832.peach-import-choice input[type="radio"] {5833  margin-top: 3px;5834  accent-color: var(--peach-accent);5835  flex-shrink: 0;5836}5837.peach-import-choice-main {5838  display: flex;5839  flex-direction: column;5840  gap: 2px;5841  min-width: 0;5842}5843.peach-import-choice-label {5844  font-size: 0.75rem;5845  color: var(--peach-t0);5846}5847.peach-import-choice-sub {5848  font-size: 0.6875rem;5849  color: var(--peach-t2);5850  line-height: 1.5;5851}58525853/* ───────── Export: success confirmation strip ───────── */5854.peach-export-success {5855  display: flex;5856  align-items: flex-start;5857  gap: 10px;5858  padding: 12px;5859  border-radius: 12px;5860  border: 1px solid rgba(150, 175, 110, 0.3);5861  background: rgba(150, 175, 110, 0.08);5862  color: var(--peach-t0);5863  font-size: 0.75rem;5864  line-height: 1.55;5865}5866.peach-export-success-check {5867  color: rgba(150, 175, 110, 0.9);5868  font-size: 0.875rem;5869  flex-shrink: 0;5870}58715872/* ── Trash view ──────────────────────────────────────────────────────── */5873.peach-trash-entry-row {5874  display: flex;5875  align-items: center;5876  justify-content: space-between;5877  gap: 8px;5878  padding: 8px 0;5879  border-bottom: 1px solid var(--peach-border);5880}5881.peach-trash-entry-info {5882  flex: 1;5883  min-width: 0;5884  display: flex;5885  flex-direction: column;5886  gap: 2px;5887}5888.peach-trash-entry-title {5889  font-size: 0.8125rem;5890  color: var(--peach-t0);5891  overflow: hidden;5892  text-overflow: ellipsis;5893  white-space: nowrap;5894}5895.peach-trash-entry-meta {5896  font-family: var(--font-mono);5897  font-size: 0.5625rem;5898  color: var(--peach-t2);5899  letter-spacing: 0.04em;5900}5901.peach-trash-entry-actions {5902  display: flex;5903  align-items: center;5904  gap: 4px;5905  flex-shrink: 0;5906}5907.peach-trash-delete-btn {5908  background: transparent;5909  border: 0;5910  color: var(--peach-t3);5911  font-size: 1rem;5912  line-height: 1;5913  cursor: pointer;5914  padding: 2px 5px;5915  transition: color 0.15s;5916}5917.peach-trash-delete-btn:hover { color: var(--peach-breach); }5918.peach-trash-list {5919  overflow-y: auto;5920}5921.peach-trash-footer {5922  display: flex;5923  align-items: center;5924  gap: 8px;5925  padding: 8px 0 0;5926  border-top: 1px solid var(--peach-border);5927  margin-top: 4px;5928}5929.peach-trash-purge-all {5930  background: transparent;5931  border: 0;5932  color: var(--peach-t3);5933  font-size: 0.625rem;5934  cursor: pointer;5935  padding: 4px 0;5936  letter-spacing: 0.03em;5937  transition: color 0.2s;5938}5939.peach-trash-purge-all:hover { color: var(--peach-breach); }5940.peach-trash-purge-confirm-label {5941  font-size: 0.625rem;5942  color: var(--peach-t1);5943  flex: 1;5944}59455946/* ── Settings shortcuts grid ─────────────────────────────────────────── */5947.peach-shortcuts-grid {5948  display: grid;5949  grid-template-columns: auto 1fr;5950  gap: 6px 12px;5951  align-items: center;5952  padding: 4px 0;5953}5954.peach-shortcut-key {5955  font-family: var(--font-mono);5956  font-size: 0.625rem;5957  color: var(--peach-t0);5958  background: var(--peach-t3);5959  border-radius: 4px;5960  padding: 2px 6px;5961  white-space: nowrap;5962  text-align: center;5963}5964.peach-shortcut-desc {5965  font-size: 0.6875rem;5966  color: var(--peach-t1);5967}59685969/* ── Sort bar trash button ───────────────────────────────────────────── */5970.peach-sort-trash-btn {5971  display: flex;5972  align-items: center;5973  justify-content: center;5974  padding: 3px 5px;5975  background: transparent;5976  border: none;5977  cursor: pointer;5978  color: var(--peach-t2);5979  border-radius: 4px;5980  transition: color 140ms ease, background 140ms ease;5981}5982.peach-sort-trash-btn:hover {5983  color: var(--peach-t1);5984  background: var(--peach-t3);5985}5986.peach-sort-trash-btn.is-active {5987  color: var(--peach-accent);5988}59895990/* Accent color picker */5991.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5992.peach-accent-picker {5993  display: flex;5994  flex-wrap: wrap;5995  gap: 7px;5996  padding: 2px 0;5997}5998.peach-accent-swatch {5999  width: 22px;6000  height: 22px;6001  border-radius: 50%;6002  border: 2px solid transparent;6003  cursor: pointer;6004  padding: 0;6005  transition: transform 100ms;6006  outline-offset: 2px;6007}6008.peach-accent-swatch:hover { transform: scale(1.15); }6009.peach-accent-swatch.is-active {6010  border-color: var(--peach-t0);6011  transform: scale(1.1);6012}60136014.peach-pill-group {6015  display: flex;6016  gap: 6px;6017}6018.peach-pill-group .peach-btn.is-active {6019  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);6020  border-color: var(--peach-accent);6021  color: var(--peach-t0);6022}60236024/* ── Card entry styles ───────────────────────────────────────── */6025.peach-card-number {6026  font-family: var(--peach-mono);6027  letter-spacing: 0.08em;6028}60296030.peach-card-network-badge {6031  font-size: 0.625rem;6032  padding: 1px 5px;6033  border-radius: 4px;6034  border: 0.5px solid var(--peach-border);6035  color: var(--peach-text-dim);6036  margin-left: 6px;6037  vertical-align: middle;6038}60396040.peach-card-expiry-row {6041  display: flex;6042  align-items: center;6043  gap: 8px;6044}60456046.peach-card-expiry-sep {6047  color: var(--peach-text-dim);6048}60496050/* ── Pro tier — upgrade screen ──────────────────────────────── */6051.peach-pro-mark {6052  font-size: 0.5625rem;6053  color: var(--peach-accent);6054  margin-left: 6px;6055  vertical-align: super;6056  opacity: 0.7;6057}60586059.peach-pro-mini-badge {6060  display: block;6061  font-size: 0.625rem;6062  font-style: italic;6063  color: var(--peach-accent);6064  letter-spacing: 0.04em;6065  margin-top: -2px;6066  padding-left: 2px;6067  opacity: 0.85;6068  text-align: center;6069}60706071.peach-wordmark-stack {6072  display: inline-flex;6073  flex-direction: column;6074  align-items: center;6075}60766077/* ── Pro tier — upgrade page ─────────────────────────────────── */6078/* ── Pro upgrade — redesigned editorial layout ─────────────────── */60796080.peach-pro-upgrade {6081  display: flex;6082  flex-direction: column;6083  align-items: stretch;6084  gap: 10px;6085  padding: 2px 2px 12px;6086}60876088.peach-pro-eyebrow {6089  margin: 0;6090  font-family: var(--font-ui);6091  font-size: 0.625rem;6092  font-weight: 500;6093  letter-spacing: 0.12em;6094  color: var(--peach-accent);6095}60966097.peach-pro-headline {6098  margin: 0;6099  font-family: var(--font-display, "Cormorant Garamond", serif);6100  font-size: 30px;6101  font-weight: 700;6102  font-style: normal;6103  line-height: 1.05;6104  color: var(--peach-t0);6105  letter-spacing: -0.01em;6106}6107.peach-pro-headline em {6108  font-style: italic;6109  font-weight: 400;6110  color: var(--peach-accent);6111}61126113.peach-pro-subtitle {6114  margin: 0;6115  font-size: 0.6875rem;6116  line-height: 1.5;6117  color: var(--peach-t1);6118}61196120/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6121.peach-pro-section-label {6122  margin: 6px 0 0;6123  font-family: var(--font-ui);6124  font-size: 0.5625rem;6125  font-weight: 500;6126  letter-spacing: 0.12em;6127  text-transform: uppercase;6128  color: var(--peach-t2);6129}61306131/* 2-column numbered feature grid */6132.peach-pro-grid {6133  display: grid;6134  grid-template-columns: 1fr 1fr;6135  border-top: 1px solid var(--peach-border);6136  border-left: 1px solid var(--peach-border);6137}61386139.peach-pro-grid-item {6140  display: flex;6141  flex-direction: column;6142  gap: 2px;6143  padding: 8px 9px;6144  border-right: 1px solid var(--peach-border);6145  border-bottom: 1px solid var(--peach-border);6146}61476148.peach-pro-grid-item--wide {6149  grid-column: 1 / -1;6150}61516152.peach-pro-grid-num {6153  font-family: var(--font-mono);6154  font-size: 0.5625rem;6155  color: var(--peach-accent);6156  letter-spacing: 0.06em;6157  opacity: 0.85;6158}61596160.peach-pro-grid-name {6161  font-size: 0.8125rem;6162  font-weight: 500;6163  color: var(--peach-t0);6164  line-height: 1.2;6165}61666167.peach-pro-grid-desc {6168  font-size: 0.625rem;6169  color: var(--peach-t1);6170  line-height: 1.4;6171}61726173.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6174  animation: peach-pulse-accent 600ms ease-out forwards;6175}61766177@keyframes peach-pulse-accent {6178  0%   { opacity: 1; transform: scale(1.2); }6179  100% { opacity: 0.85; transform: scale(1); }6180}61816182/* Actions */6183.peach-pro-upgrade-actions {6184  display: flex;6185  flex-direction: column;6186  align-items: stretch;6187  gap: 10px;6188}61896190.peach-pro-pricing {6191  margin: 0;6192  font-size: 1rem;6193  font-weight: 600;6194  color: var(--peach-t0);6195  letter-spacing: 0.01em;6196}6197.peach-pro-pricing-sub {6198  font-size: 0.75rem;6199  font-weight: 400;6200  color: var(--peach-t1);6201  letter-spacing: 0.02em;6202}62036204.peach-pro-upgrade-cta {6205  display: flex;6206  align-items: center;6207  justify-content: center;6208  text-decoration: none;6209  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6210  border: 1px solid var(--peach-accent);6211  border-radius: 10px;6212  color: var(--peach-accent);6213  font-family: var(--font-ui);6214  font-size: 0.8125rem;6215  font-weight: 600;6216  letter-spacing: 0.06em;6217  padding: 11px 16px;6218  transition: background 0.15s ease, color 0.15s ease;6219}6220.peach-pro-upgrade-cta:hover {6221  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6222}62236224.peach-pro-key-divider {6225  display: flex;6226  align-items: center;6227  gap: 8px;6228  color: var(--peach-t2);6229  font-size: 0.5625rem;6230  letter-spacing: 0.1em;6231}6232.peach-pro-key-divider::before,6233.peach-pro-key-divider::after {6234  content: "";6235  flex: 1;6236  height: 1px;6237  background: var(--peach-border);6238}62396240/* Inline key entry row */6241.peach-pro-key-inline {6242  display: flex;6243  align-items: center;6244  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6245  border: 1px solid var(--peach-border);6246  border-radius: 8px;6247  overflow: hidden;6248}6249.peach-pro-key-inline-input {6250  flex: 1;6251  background: transparent;6252  border: none;6253  outline: none;6254  color: var(--peach-t1);6255  font-family: var(--font-mono);6256  font-size: 0.625rem;6257  letter-spacing: 0.06em;6258  padding: 9px 10px;6259}6260.peach-pro-key-inline-input::placeholder {6261  color: var(--peach-t2);6262}6263.peach-pro-key-apply {6264  background: transparent;6265  border: none;6266  border-left: 1px solid var(--peach-border);6267  color: var(--peach-t2);6268  font-family: var(--font-ui);6269  font-size: 0.5625rem;6270  font-weight: 600;6271  letter-spacing: 0.08em;6272  padding: 9px 10px;6273  cursor: pointer;6274  transition: color 0.15s ease;6275  flex-shrink: 0;6276}6277.peach-pro-key-apply:not(:disabled):hover {6278  color: var(--peach-accent);6279}6280.peach-pro-key-apply:disabled {6281  opacity: 0.35;6282  cursor: not-allowed;6283}62846285/* ── Pro tier — key ceremony ─────────────────────────────────── */6286.peach-pro-key-ceremony {6287  display: flex;6288  flex-direction: column;6289  align-items: center;6290  gap: 12px;6291  padding: 20px 4px 16px;6292}62936294.peach-pro-key-ceremony .peach-lock-rune-string {6295  font-size: 1rem;6296  gap: 12px;6297  flex: 0;6298  justify-content: center;6299}63006301.peach-pro-key-ceremony-label {6302  margin: 0;6303  font-size: 0.6875rem;6304  color: var(--peach-t2);6305  font-style: italic;6306  letter-spacing: 0.04em;6307}63086309.peach-pro-key-input {6310  font-family: var(--font-mono, monospace);6311  letter-spacing: 0.06em;6312  text-align: center;6313  width: 100%;6314  box-sizing: border-box;6315}63166317.peach-pro-key-error {6318  margin: 0;6319  font-size: 0.75rem;6320  text-align: center;6321  color: var(--peach-breach, #e55);6322  padding: 0;6323}63246325.peach-pro-key-activate {6326  width: 100%;6327  text-align: center;6328  box-sizing: border-box;6329  padding: 10px 20px;6330  font-size: 0.8125rem;6331}63326333.peach-pro-key-cancel {6334  background: transparent;6335  border: 0;6336  color: var(--peach-t2);6337  font-size: 0.6875rem;6338  cursor: pointer;6339  padding: 2px 8px;6340  transition: color 0.2s;6341}63426343.peach-pro-key-cancel:hover { color: var(--peach-accent); }63446345/* ── Pro tier — active state ─────────────────────────────────── */6346.peach-pro-active {6347  display: flex;6348  flex-direction: column;6349  align-items: center;6350  gap: 0;6351  padding: 8px 4px 16px;6352  min-height: 280px;6353}63546355.peach-pro-active-hero {6356  display: flex;6357  flex-direction: column;6358  align-items: center;6359  gap: 6px;6360  padding: 20px 0 8px;6361}63626363.peach-pro-active-mark-wrap {6364  display: flex;6365  align-items: center;6366  justify-content: center;6367  margin-bottom: 4px;6368}63696370.peach-pro-active-mark {6371  width: 60px;6372  height: 60px;6373}63746375.peach-pro-active-title {6376  font-family: var(--font-display, var(--font-ui));6377  font-size: 26px;6378  margin: 0;6379  color: var(--peach-t0);6380  letter-spacing: 0.01em;6381}63826383.peach-pro-active-since {6384  margin: 0;6385  font-size: 0.6875rem;6386  color: var(--peach-t2);6387  font-style: italic;6388}63896390.peach-pro-active-features {6391  display: flex;6392  flex-direction: column;6393  gap: 8px;6394  width: 100%;6395  padding: 14px 8px 0;6396  border-top: 1px solid var(--peach-border);6397  flex: 1;6398}63996400.peach-pro-active-feature {6401  display: flex;6402  align-items: center;6403  gap: 9px;6404}64056406.peach-pro-active-feature-mark {6407  color: var(--peach-accent);6408  font-size: 0.625rem;6409  opacity: 0.65;6410  flex-shrink: 0;6411}64126413.peach-pro-active-feature-name {6414  font-size: 0.75rem;6415  color: var(--peach-t1);6416}64176418.peach-pro-deactivate {6419  align-self: center;6420  background: transparent;6421  border: 0;6422  color: var(--peach-t3);6423  font-size: 0.625rem;6424  cursor: pointer;6425  padding: 8px 0 0;6426  margin-top: 16px;6427  letter-spacing: 0.03em;6428  transition: color 0.2s;6429}64306431.peach-pro-deactivate:hover { color: var(--peach-t2); }64326433.peach-pro-deactivate:disabled {6434  opacity: 0.5;6435  cursor: default;6436}64376438/* ── Pro card activation sparkles & thank-you ── */6439button.peach-pro-active-mark-wrap {6440  background: transparent;6441  border: 0;6442  padding: 0;6443  cursor: pointer;6444  position: relative;6445  overflow: visible;6446}64476448.peach-pro-sparks {6449  position: absolute;6450  inset: 0;6451  pointer-events: none;6452  overflow: visible;6453}64546455.peach-pro-spark {6456  position: absolute;6457  top: 50%;6458  left: 50%;6459  font-size: 9px;6460  line-height: 1;6461  opacity: 0;6462  transform: translate(-50%, -50%);6463  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;6464}64656466@keyframes peach-pro-spark-fly {6467  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }6468  25%  { opacity: 1; }6469  100% {6470    opacity: 0;6471    transform: translate(6472      calc(-50% + var(--spark-x, 0px)),6473      calc(-50% + var(--spark-y, -40px))6474    ) scale(0.8);6475  }6476}64776478.peach-pro-thankyou-text {6479  margin: 4px 0 0;6480  font-size: 0.6875rem;6481  font-style: italic;6482  color: currentColor;6483  opacity: 0;6484  animation: peach-pro-thankyou-flash 2.5s ease both;6485}64866487@keyframes peach-pro-thankyou-flash {6488  0%   { opacity: 0; transform: translateY(4px); }6489  15%  { opacity: 0.75; transform: translateY(0); }6490  75%  { opacity: 0.75; }6491  100% { opacity: 0; }6492}64936494/* ── Pro advanced health remediation queue ──────────────────── */6495.peach-health-pro-queue {6496  display: flex;6497  flex-direction: column;6498  gap: 10px;6499  padding: 12px;6500  margin: 0 0 12px;6501  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6502  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6503  border-radius: 10px;6504}65056506.peach-health-pro-queue-head {6507  display: flex;6508  justify-content: space-between;6509  align-items: baseline;6510}65116512.peach-health-pro-queue-title {6513  font-size: 0.75rem;6514  font-weight: 500;6515  letter-spacing: 0.04em;6516  text-transform: uppercase;6517  color: var(--peach-accent);6518}65196520.peach-health-pro-queue-score {6521  font-size: 0.6875rem;6522  color: var(--peach-t2);6523}65246525.peach-health-pro-row {6526  display: flex;6527  gap: 10px;6528  align-items: center;6529  padding: 8px 0;6530  border-top: 1px solid var(--peach-border);6531}65326533.peach-health-pro-row-info {6534  flex: 1;6535  display: flex;6536  flex-direction: column;6537  gap: 4px;6538  min-width: 0;6539}65406541.peach-health-pro-action {6542  flex: 0 0 auto;6543  padding: 4px 8px;6544  font-size: 0.5625rem;6545  letter-spacing: 0.08em;6546  text-transform: uppercase;6547}65486549.peach-health-pro-row-name {6550  font-size: 0.8125rem;6551  color: var(--peach-t0);6552  overflow: hidden;6553  text-overflow: ellipsis;6554  white-space: nowrap;6555}65566557.peach-health-pro-row-meta {6558  font-size: 0.6875rem;6559  color: var(--peach-t2);6560}65616562.peach-health-pro-bar {6563  height: 2px;6564  background: var(--peach-border);6565  border-radius: 2px;6566  overflow: hidden;6567  margin-top: 2px;6568}65696570.peach-health-pro-bar-fill {6571  height: 100%;6572  background: var(--peach-accent);6573  transition: width 200ms ease-out;6574}65756576/* ── Pro activation celebration ── */6577@keyframes peach-pro-bloom {6578  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6579  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6580                 drop-shadow(0 0 48px var(--peach-glow)); }6581  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6582}65836584@keyframes peach-pro-wordmark-in {6585  from { opacity: 0; transform: translateY(4px); }6586  to   { opacity: 1; transform: translateY(0); }6587}65886589@keyframes peach-pro-fade-out {6590  from { opacity: 1; }6591  to   { opacity: 0; }6592}65936594.peach-pro-celebration {6595  background:6596    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6597    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6598    var(--peach-bg);6599  border: 1px solid var(--peach-t3);6600  box-shadow:6601    0 2px 8px rgba(0,0,0,0.55),6602    0 14px 48px rgba(0,0,0,0.7),6603    0 0 0 1px rgba(240,232,216,0.04);6604  overflow: hidden;6605  width: 320px;6606  height: 520px;6607  display: flex;6608  flex-direction: column;6609  align-items: center;6610  justify-content: center;6611  gap: 8px;6612  padding: 32px 24px;6613  text-align: center;6614}66156616.peach-pro-celebration.is-leaving {6617  animation: peach-pro-fade-out 400ms ease forwards;6618}66196620.peach-pro-bloom-target {6621  display: flex;6622  align-items: center;6623  justify-content: center;6624  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6625  margin-bottom: 12px;6626}66276628.peach-pro-bloom-icon {6629  width: 48px;6630  height: 48px;6631}66326633.peach-pro-wordmark {6634  font-family: var(--font-display);6635  font-size: 22px;6636  font-style: italic;6637  font-weight: 400;6638  color: var(--peach-accent);6639  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6640}66416642.peach-pro-thankyou {6643  font-size: 0.75rem;6644  font-style: italic;6645  color: var(--peach-t2);6646  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6647}664866496650/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6651.peach-pro-notice-banner {6652  display: flex;6653  align-items: center;6654  gap: 8px;6655  padding: 7px 12px;6656  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6657  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6658  font-size: 0.6875rem;6659  color: var(--peach-t2);6660  font-family: "IBM Plex Mono", monospace;6661  flex-shrink: 0;6662}66636664.peach-pro-notice-link {6665  background: none;6666  border: none;6667  padding: 0;6668  cursor: pointer;6669  font-size: 0.6875rem;6670  color: var(--peach-accent);6671  font-family: "IBM Plex Mono", monospace;6672  margin-left: auto;6673  white-space: nowrap;6674}66756676.peach-pro-notice-close {6677  background: none;6678  border: none;6679  padding: 0 0 0 4px;6680  cursor: pointer;6681  font-size: 0.625rem;6682  color: var(--peach-t3);6683  line-height: 1;6684}66856686/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6687   Renders over whatever view is showing. 60-second expiry; the popup ticks6688   the countdown each second and clears the banner when it hits zero. */6689.peach-pair-request-banner {6690  display: flex;6691  flex-direction: column;6692  gap: 8px;6693  padding: 10px 12px;6694  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6695  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6696  font-family: "IBM Plex Mono", monospace;6697  flex-shrink: 0;6698}66996700.peach-pair-toast {6701  padding: 8px 12px;6702  font-family: "IBM Plex Mono", monospace;6703  font-size: 0.75rem;6704  color: var(--peach-t1);6705  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6706  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6707  flex-shrink: 0;6708  text-align: center;6709}67106711.peach-pair-toast strong {6712  color: var(--peach-t0);6713  font-weight: 500;6714}67156716.peach-pair-request-header {6717  display: flex;6718  align-items: center;6719  gap: 8px;6720  font-size: 0.75rem;6721  color: var(--peach-t1);6722}67236724.peach-pair-request-mark {6725  font-size: 0.875rem;6726  display: inline-flex;6727  align-items: center;6728}67296730.peach-pair-request-icon {6731  width: 1em;6732  height: 1em;6733}67346735.peach-pair-request-title {6736  font-weight: 600;6737  color: var(--peach-t0);6738}67396740.peach-pair-request-countdown {6741  margin-left: auto;6742  font-variant-numeric: tabular-nums;6743  color: var(--peach-t2);6744  font-size: 0.6875rem;6745}67466747.peach-pair-request-body {6748  margin: 0;6749  font-size: 0.75rem;6750  color: var(--peach-t1);6751  line-height: 1.4;6752}67536754.peach-pair-request-body strong {6755  color: var(--peach-t0);6756  font-weight: 600;6757}67586759.peach-pair-request-actions {6760  display: flex;6761  gap: 8px;6762  justify-content: flex-end;6763}67646765/* ─── First-run onboarding ──────────────────────────────────────────────6766   Three-card welcome shown once before vault creation. The PeachScript6767   rune background drifts behind everything at very low opacity — it's6768   atmosphere, not focus. The cards themselves use the same panel6769   language as the rest of the popup so the transition into NewVault is6770   continuous, not a jarring switch of visual register. */67716772.peach-onboarding {6773  position: relative;6774  display: flex;6775  flex-direction: column;6776  width: 100%;6777  height: 100%;6778  padding: 16px 16px 18px;6779  box-sizing: border-box;6780  overflow: hidden;6781  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6782}67836784.peach-onboarding.is-completing {6785  animation: peach-onboard-exit 200ms ease-out forwards;6786}67876788.peach-rune-background {6789  position: absolute;6790  inset: 0;6791  width: 100%;6792  height: 100%;6793  pointer-events: none;6794  z-index: 0;6795  transition: opacity 500ms ease-out;6796}67976798.peach-onboarding.is-completing .peach-rune-background {6799  opacity: 0;6800}68016802.peach-onboarding-header {6803  position: relative;6804  z-index: 1;6805  display: flex;6806  align-items: center;6807  margin-bottom: 14px;6808}68096810.peach-onboarding-card {6811  position: relative;6812  z-index: 1;6813  flex: 1;6814  display: flex;6815  flex-direction: column;6816  gap: 10px;6817  padding: 22px 20px;6818  border-radius: 16px;6819  border: 1px solid var(--peach-t3);6820  background:6821    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6822  backdrop-filter: blur(3px);6823  -webkit-backdrop-filter: blur(3px);6824  box-shadow:6825    inset 0 1px 0 rgba(240, 232, 216, 0.04),6826    0 12px 28px rgba(0, 0, 0, 0.12);6827  cursor: pointer;6828  user-select: none;6829  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6830}68316832.peach-onboarding-card.is-exiting {6833  animation: peach-card-out 120ms ease-in forwards;6834  pointer-events: none;6835}68366837.peach-onboarding-card-headline {6838  margin: 0;6839  font-family: var(--font-display);6840  font-style: italic;6841  font-weight: 400;6842  font-size: 22px;6843  line-height: 1.05;6844  color: var(--peach-t0);6845  white-space: pre-line;6846}68476848.peach-onboarding-divider {6849  margin: 4px 0 6px;6850  border: 0;6851  border-top: 1px solid var(--peach-t3);6852  width: 100%;6853}68546855.peach-onboarding-body {6856  margin: 0;6857  font-size: 0.8125rem;6858  line-height: 1.6;6859  color: var(--peach-t1);6860}68616862.peach-onboarding-warning {6863  display: flex;6864  align-items: flex-start;6865  gap: 8px;6866  margin: 6px 0 0;6867  padding-top: 8px;6868  border-top: 1px dashed var(--peach-t3);6869  font-size: 0.8125rem;6870  line-height: 1.5;6871  color: var(--peach-t1);6872}68736874.peach-onboarding-warning-icon {6875  color: var(--peach-accent);6876  font-size: 0.8125rem;6877  line-height: 1.5;6878  flex: 0 0 auto;6879}68806881.peach-onboarding-nav {6882  position: relative;6883  z-index: 1;6884  display: flex;6885  align-items: center;6886  justify-content: space-between;6887  margin-top: 12px;6888  padding: 0 4px;6889}68906891.peach-onboarding-dots {6892  display: flex;6893  align-items: center;6894  gap: 6px;6895}68966897.peach-onboarding-dot {6898  width: 6px;6899  height: 6px;6900  border-radius: 50%;6901  background: var(--peach-t2);6902  transition: width 200ms ease, height 200ms ease, background 200ms ease;6903}69046905.peach-onboarding-dot.is-active {6906  width: 8px;6907  height: 8px;6908  background: var(--peach-accent);6909}69106911.peach-onboarding-next {6912  background: none;6913  border: none;6914  padding: 4px 0;6915  cursor: pointer;6916  font-family: "IBM Plex Mono", monospace;6917  font-size: 0.6875rem;6918  letter-spacing: 0.04em;6919  color: var(--peach-t1);6920  transition: color 150ms ease;6921}69226923.peach-onboarding-next:hover {6924  color: var(--peach-t0);6925}69266927.peach-onboarding-next:disabled {6928  opacity: 0.5;6929  cursor: default;6930}69316932.peach-onboarding-back {6933  background: none;6934  border: none;6935  padding: 4px 0;6936  cursor: pointer;6937  font-family: "IBM Plex Mono", monospace;6938  font-size: 0.6875rem;6939  letter-spacing: 0.04em;6940  color: var(--peach-t2);6941  transition: color 150ms ease;6942}69436944.peach-onboarding-back:hover {6945  color: var(--peach-t0);6946}69476948.peach-onboarding-back:disabled {6949  opacity: 0.5;6950  cursor: default;6951}69526953/* Reserve back-button width on the first card so the dots stay centred */6954.peach-onboarding-back-spacer {6955  width: 44px;6956}69576958.peach-onboarding-mobile-card-buttons {6959  display: flex;6960  flex-direction: column;6961  gap: 8px;6962  margin-top: 16px;6963}69646965@keyframes peach-onboard-enter {6966  from { opacity: 0; transform: translateY(20px); }6967  to   { opacity: 1; transform: translateY(0); }6968}69696970@keyframes peach-onboard-exit {6971  from { opacity: 1; }6972  to   { opacity: 0; }6973}69746975@keyframes peach-card-in {6976  from { opacity: 0; transform: translateX(12px); }6977  to   { opacity: 1; transform: translateX(0); }6978}69796980@keyframes peach-card-out {6981  from { opacity: 1; transform: translateX(0); }6982  to   { opacity: 0; transform: translateX(-12px); }6983}69846985/* ─── New vault screen — matched to onboarding card language ─────────── */69866987.peach-newvault {6988  position: relative;6989  display: flex;6990  flex-direction: column;6991  gap: 12px;6992  padding: 16px 16px 18px;6993  overflow: hidden;6994}69956996/* Suppress the warm-blob ambient art inherited from .lock-screen — the6997   new vault card now carries the visual weight. */6998.peach-newvault::before {6999  content: none;7000}70017002.peach-newvault-header {7003  position: relative;7004  z-index: 2;7005  display: flex;7006  align-items: center;7007  gap: 10px;7008  margin-bottom: 2px;7009}70107011.peach-newvault-back {7012  display: inline-flex;7013  align-items: center;7014  gap: 4px;7015  background: transparent;7016  border: none;7017  color: var(--peach-t2);7018  font-family: "IBM Plex Mono", monospace;7019  font-size: 0.625rem;7020  letter-spacing: 0.06em;7021  cursor: pointer;7022  padding: 4px 6px;7023  border-radius: 6px;7024  transition: color 120ms ease, background 120ms ease;7025}70267027.peach-newvault-back:hover {7028  color: var(--peach-t0);7029  background: rgba(240, 232, 216, 0.04);7030}70317032.peach-newvault-mark {7033  position: absolute;7034  right: -12px;7035  top: 6px;7036  width: 110px;7037  height: 110px;7038  pointer-events: none;7039  opacity: 0.10;7040  filter: saturate(0.9);7041  z-index: 0;7042}7043.peach-newvault-mark-art {7044  width: 100%;7045  height: 100%;7046}7047.peach-newvault-mark-art path:nth-child(1) {7048  fill: rgba(123, 144, 96, 0.88);7049}7050.peach-newvault-mark-art path:nth-child(2) {7051  stroke: rgba(94, 122, 66, 0.95);7052}70537054.peach-newvault-card {7055  position: relative;7056  z-index: 1;7057  display: flex;7058  flex-direction: column;7059  gap: 12px;7060  padding: 22px 20px 18px;7061  border-radius: 16px;7062  border: 1px solid var(--peach-t3);7063  background:7064    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));7065  backdrop-filter: blur(3px);7066  -webkit-backdrop-filter: blur(3px);7067  box-shadow:7068    inset 0 1px 0 rgba(240, 232, 216, 0.04),7069    0 12px 28px rgba(0, 0, 0, 0.12);7070  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;7071}70727073.peach-newvault-headline {7074  margin: 0;7075  font-family: var(--font-display);7076  font-style: italic;7077  font-weight: 400;7078  font-size: 24px;7079  line-height: 1.05;7080  color: var(--peach-t0);7081  white-space: pre-line;7082}70837084.peach-newvault-divider {7085  margin: 2px 0 4px;7086  border: 0;7087  border-top: 1px solid var(--peach-t3);7088  width: 100%;7089}70907091.peach-newvault-field {7092  display: flex;7093  flex-direction: column;7094  gap: 4px;7095}70967097.peach-newvault-label-row {7098  display: flex;7099  align-items: center;7100  justify-content: space-between;7101}71027103/* Monospace input scaled to the card. Replaces the 22px unlock-input7104   so the placeholder no longer overflows and the field reads as part7105   of the same surface as the body copy. */7106.peach-newvault-input {7107  font-size: 0.875rem;7108  letter-spacing: 0.18em;7109  padding: 8px 0;7110}7111.peach-newvault-input::placeholder {7112  letter-spacing: 0.18em;7113  color: var(--peach-t2);7114}71157116.peach-newvault-hint {7117  margin: 2px 0 0;7118  font-family: "IBM Plex Mono", monospace;7119  font-size: 0.625rem;7120  color: var(--peach-t2);7121  letter-spacing: 0.04em;7122}71237124.peach-newvault-submit {7125  margin-top: 4px;7126}71277128.peach-newvault-warning {7129  display: flex;7130  align-items: flex-start;7131  gap: 8px;7132  margin: 4px 0 0;7133  padding-top: 10px;7134  border-top: 1px dashed var(--peach-t3);7135  font-size: 0.75rem;7136  line-height: 1.5;7137  color: var(--peach-t1);7138}71397140.peach-newvault-warning-icon {7141  color: var(--peach-accent);7142  font-size: 0.8125rem;7143  line-height: 1.4;7144  flex: 0 0 auto;7145}71467147.peach-newvault-footer {7148  position: relative;7149  z-index: 1;7150  display: flex;7151  flex-direction: column;7152  gap: 4px;7153  padding: 4px 4px 0;7154}71557156/* Settings body — warm accent gradient gives the glass something to blur against */7157.peach-settings-body {7158  background:7159    radial-gradient(7160      ellipse at 30% 20%,7161      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7162      transparent 60%7163    );7164}71657166/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7167/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7168 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7169 * (replacing the vault from a backup file) and "hazard" for actions that7170 * are absolutely irreversible (Panic). Both use the same card scaffold so7171 * they read as a pair, but the colour family signals the severity at a7172 * glance — yellow for caution, red for don't.7173 */7174.peach-danger-card {7175  --danger-tint: 235, 158, 52; /* amber */7176  display: flex;7177  flex-direction: column;7178  gap: 8px;7179  padding: 14px;7180  margin-top: 10px;7181  border-radius: 12px;7182  border: 1px solid rgba(var(--danger-tint), 0.32);7183  background:7184    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7185    rgba(var(--danger-tint), 0.04);7186  box-shadow:7187    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7188    0 0 24px rgba(var(--danger-tint), 0.04);7189  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7190}71917192.peach-danger-card:hover {7193  border-color: rgba(var(--danger-tint), 0.55);7194  box-shadow:7195    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7196    0 0 36px rgba(var(--danger-tint), 0.10);7197}71987199.peach-danger-card--hazard {7200  --danger-tint: 220, 38, 38; /* red */7201}72027203.peach-danger-card-head {7204  display: flex;7205  align-items: center;7206  gap: 10px;7207}72087209.peach-danger-card-glyph {7210  width: 28px;7211  height: 28px;7212  flex-shrink: 0;7213  display: flex;7214  align-items: center;7215  justify-content: center;7216  border-radius: 8px;7217  background: rgba(var(--danger-tint), 0.12);7218  color: rgba(var(--danger-tint), 0.95);7219  font-size: 1rem;7220  line-height: 1;7221}72227223.peach-danger-card-title {7224  margin: 0;7225  font-size: 0.8125rem;7226  font-weight: 600;7227  color: rgba(var(--danger-tint), 0.92);7228  letter-spacing: 0.01em;7229}72307231.peach-danger-card-copy {7232  margin: 0;7233  font-size: 0.6875rem;7234  line-height: 1.5;7235  color: var(--peach-t2);7236}72377238.peach-danger-card-button {7239  width: 100%;7240  padding: 9px;7241  margin-top: 4px;7242  background: transparent;7243  border: 1px solid rgba(var(--danger-tint), 0.45);7244  border-radius: 8px;7245  color: rgba(var(--danger-tint), 0.9);7246  font-size: 0.75rem;7247  font-weight: 500;7248  letter-spacing: 0.02em;7249  cursor: pointer;7250  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7251}72527253.peach-danger-card-button:hover {7254  background: rgba(var(--danger-tint), 0.10);7255  border-color: rgba(var(--danger-tint), 0.75);7256  color: rgb(var(--danger-tint));7257}72587259/* ── Panic flow (three-step destruction) ───────────────────────────────── */7260.peach-panic {7261  display: flex;7262  flex-direction: column;7263  flex: 1;7264  min-height: 0;7265  padding: 28px 20px 20px;7266  gap: 18px;7267  overflow-y: auto;7268  scrollbar-width: none;7269  -ms-overflow-style: none;7270}72717272.peach-panic::-webkit-scrollbar { display: none; }72737274.peach-panic-step2 {7275  background: rgba(220, 38, 38, 0.04);7276}72777278.peach-panic-step3 {7279  position: relative;7280  background: #0f0505;7281  color: #ffffff;7282  overflow: hidden;7283}72847285.peach-panic-rune-bg {7286  position: absolute;7287  inset: 0;7288  opacity: 0.22;7289  pointer-events: none;7290  overflow: hidden;7291}72927293.peach-panic-rune-bg canvas {7294  width: 100% !important;7295  height: 100% !important;7296}72977298.peach-panic-icon {7299  font-size: 32px;7300  color: rgb(220, 38, 38);7301  line-height: 1;7302}73037304.peach-panic-title {7305  margin: 0;7306  font-size: 18px;7307  font-weight: 500;7308  color: var(--peach-t1);7309}73107311.peach-panic-title--severe {7312  font-size: 20px;7313  font-weight: 700;7314  color: rgb(220, 38, 38);7315}73167317.peach-panic-body {7318  margin: 0;7319  font-size: 0.8125rem;7320  line-height: 1.55;7321  color: var(--peach-t2);7322}73237324.peach-panic-body--severe {7325  color: rgba(220, 38, 38, 0.85);7326}73277328.peach-panic-body--final {7329  font-size: 1rem;7330  font-weight: 700;7331  color: rgb(255, 80, 80);7332  line-height: 1.4;7333}73347335.peach-panic-body--final-intro {7336  font-size: 1rem;7337  color: #ffffff;7338  font-weight: 400;7339}73407341.peach-panic-divider {7342  height: 1px;7343  background: rgba(255, 255, 255, 0.08);7344  margin: 4px 0;7345}73467347.peach-panic-confirm-input {7348  width: 100%;7349  padding: 10px 12px;7350  background: rgba(255, 255, 255, 0.02);7351  border: 1px solid rgba(220, 38, 38, 0.4);7352  border-radius: 8px;7353  color: var(--peach-t1);7354  font-family: "IBM Plex Mono", monospace;7355  font-size: 0.875rem;7356  letter-spacing: 0.12em;7357  text-transform: uppercase;7358}73597360.peach-panic-confirm-input:focus {7361  outline: none;7362  border-color: rgb(220, 38, 38);7363}73647365.peach-panic-confirm-input--match {7366  border-color: rgb(220, 38, 38);7367  color: rgb(220, 38, 38);7368}73697370.peach-panic-confirm-label {7371  font-size: 0.6875rem;7372  color: var(--peach-t2);7373  margin: 0 0 -8px;7374  letter-spacing: 0.06em;7375}73767377.peach-panic-actions {7378  display: flex;7379  flex-direction: column;7380  gap: 10px;7381  margin-top: auto;7382}73837384.peach-panic-button {7385  width: 100%;7386  padding: 12px;7387  border-radius: 8px;7388  font-size: 0.8125rem;7389  cursor: pointer;7390  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7391}73927393.peach-panic-button--primary {7394  background: var(--peach-accent);7395  border: 1px solid var(--peach-accent);7396  color: #ffffff;7397  font-weight: 600;7398}73997400.peach-panic-button--primary:hover {7401  background: color-mix(in srgb, var(--peach-accent) 88%, white);7402}74037404.peach-panic-button--danger {7405  background: rgb(220, 38, 38);7406  border: 1px solid rgb(220, 38, 38);7407  color: #ffffff;7408  font-weight: 600;7409}74107411.peach-panic-button--danger:disabled {7412  opacity: 0.35;7413  cursor: not-allowed;7414}74157416.peach-panic-button--ghost {7417  background: transparent;7418  border: 1px solid rgba(255, 255, 255, 0.18);7419  color: var(--peach-t2);7420}74217422.peach-panic-button--ghost:hover {7423  border-color: rgba(255, 255, 255, 0.32);7424  color: var(--peach-t1);7425}74267427.peach-panic-link {7428  background: transparent;7429  border: none;7430  padding: 4px 0;7431  color: rgba(220, 38, 38, 0.65);7432  font-size: 0.75rem;7433  cursor: pointer;7434  text-align: left;7435  text-decoration: underline;7436  text-underline-offset: 3px;7437}74387439.peach-panic-link:hover {7440  color: rgb(220, 38, 38);7441}74427443.peach-panic-bar {7444  background: rgb(220, 38, 38);7445  padding: 16px 20px;7446  margin: -28px -20px 0;7447  text-align: center;7448  font-size: 0.8125rem;7449  font-weight: 700;7450  letter-spacing: 0.12em;7451  color: #ffffff;7452}74537454.peach-panic-final-button {7455  width: 100%;7456  padding: 14px;7457  background: rgb(220, 38, 38);7458  border: none;7459  border-radius: 8px;7460  color: #ffffff;7461  font-size: 0.875rem;7462  font-weight: 700;7463  letter-spacing: 0.08em;7464  text-transform: uppercase;7465  cursor: pointer;7466  animation: peach-panic-pulse 2s ease-in-out infinite;7467}74687469.peach-settings-license {7470  margin-top: 10px;7471  padding-top: 10px;7472  border-top: 1px solid var(--peach-t3);7473}74747475.peach-settings-label {7476  font-size: 0.625rem;7477  letter-spacing: 0.08em;7478  color: var(--peach-t3);7479  display: block;7480  margin-bottom: 6px;7481}74827483.peach-settings-license-row {7484  display: flex;7485  align-items: center;7486  justify-content: space-between;7487  gap: 8px;7488}74897490.peach-settings-license-key {7491  font-family: 'IBM Plex Mono', monospace;7492  font-size: 0.75rem;7493  color: var(--peach-t0);7494  letter-spacing: 0.04em;7495  word-break: break-all;7496  flex: 1;7497  min-width: 0;7498}74997500.peach-settings-license-key--masked {7501  font-family: 'IBM Plex Mono', monospace;7502  font-size: 0.6rem;7503  color: var(--peach-t1);7504  letter-spacing: 0.18em;7505  user-select: none;7506}75077508.peach-settings-license-actions {7509  display: flex;7510  align-items: center;7511  gap: 2px;7512  flex-shrink: 0;7513}75147515.peach-settings-license-copy {7516  font-size: 0.6875rem;7517  color: var(--peach-accent);7518  background: transparent;7519  border: none;7520  cursor: pointer;7521  padding: 4px 8px;7522  border-radius: 4px;7523  flex-shrink: 0;7524  transition: opacity 150ms ease;7525}75267527.peach-settings-license-copy:hover {7528  opacity: 0.75;7529}75307531.peach-settings-license-toggle {7532  display: flex;7533  align-items: center;7534  justify-content: center;7535  background: transparent;7536  border: none;7537  cursor: pointer;7538  padding: 4px 6px;7539  border-radius: 4px;7540  color: var(--peach-t2);7541  transition: color 150ms ease;7542}75437544.peach-settings-license-toggle:hover {7545  color: var(--peach-t1);7546}75477548@keyframes peach-panic-pulse {7549  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7550  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7551}75527553[data-motion="reduce"] .peach-panic-final-button {7554  animation: none;7555}75567557/* Vault History — Settings → Vault sub-view */75587559.peach-history-list {7560  border: 1px solid var(--peach-border);7561  border-radius: 8px;7562  overflow: hidden;7563  margin: 8px 0 4px;7564}75657566.peach-history-row {7567  display: flex;7568  align-items: center;7569  justify-content: space-between;7570  padding: 9px 12px;7571  gap: 10px;7572  border-bottom: 1px solid var(--peach-border);7573}75747575.peach-history-row:last-child {7576  border-bottom: none;7577}75787579.peach-history-meta {7580  display: flex;7581  flex-direction: column;7582  gap: 2px;7583  min-width: 0;7584  flex: 1;7585}75867587.peach-history-time {7588  font-size: 0.75rem;7589  font-family: 'IBM Plex Mono', ui-monospace, monospace;7590  color: var(--peach-t0);7591  white-space: nowrap;7592  overflow: hidden;7593  text-overflow: ellipsis;7594}75957596.peach-history-sub {7597  font-size: 0.625rem;7598  color: var(--peach-t2);7599  letter-spacing: 0.06em;7600  text-transform: uppercase;7601  white-space: nowrap;7602  overflow: hidden;7603  text-overflow: ellipsis;7604}76057606.peach-history-btn {7607  flex-shrink: 0;7608  white-space: nowrap;7609  min-width: 56px;7610  text-align: center;7611}76127613.peach-history-btn.is-busy {7614  opacity: 0.65;7615}76167617.peach-history-footer {7618  font-size: 0.625rem;7619  color: var(--peach-t3);7620  letter-spacing: 0.05em;7621  text-align: right;7622  margin: 0;7623  padding: 2px 0 0;7624}76257626/* ── Context menu + swipe-copy flash ─────────────────────── */7627.peach-context-menu-backdrop {7628  position: fixed;7629  inset: 0;7630  background: rgba(0, 0, 0, 0.45);7631  z-index: 100;7632  display: flex;7633  align-items: flex-end;7634  justify-content: center;7635  animation: peach-ctx-fade 140ms ease both;7636}7637.peach-context-menu {7638  width: min(360px, calc(100vw - 24px));7639  margin-bottom: max(env(safe-area-inset-bottom), 12px);7640  background: var(--peach-bg);7641  border: 1px solid var(--peach-t3);7642  border-radius: 14px;7643  padding: 6px;7644  display: flex;7645  flex-direction: column;7646  gap: 2px;7647  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7648  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7649}7650@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7651@keyframes peach-ctx-rise {7652  from { transform: translateY(16px); opacity: 0; }7653  to   { transform: translateY(0);    opacity: 1; }7654}7655.peach-context-menu-item {7656  background: transparent;7657  color: var(--peach-t0);7658  border: 0;7659  border-radius: 10px;7660  padding: 12px 14px;7661  text-align: left;7662  font: inherit;7663  cursor: pointer;7664}7665.peach-context-menu-item:hover,7666.peach-context-menu-item:focus-visible {7667  background: var(--peach-t3);7668}7669.peach-context-menu-item--danger {7670  color: var(--peach-health-bad, #d96868);7671}7672.peach-context-menu-item--cancel {7673  color: var(--peach-t2);7674  margin-top: 4px;7675  border-top: 1px solid var(--peach-t3);7676  border-radius: 0 0 10px 10px;7677}76787679/* Swipe-to-copy flash */7680.peach-entry-row.is-copy-flash {7681  animation: peach-copy-flash 600ms ease both;7682}7683@keyframes peach-copy-flash {7684  0%   { background: transparent; }7685  20%  { background: rgba(217, 153, 51, 0.32); }7686  100% { background: transparent; }7687}76887689html { font-size: 16px; }76907691/* ── Recovery word entry ─────────────────────────────────────────── */7692.peach-lock-recover-link {7693  display: block;7694  width: 100%;7695  margin-top: 12px;7696  background: none;7697  border: none;7698  font-family: "IBM Plex Mono", monospace;7699  font-size: 0.625rem;7700  letter-spacing: 0.06em;7701  color: var(--peach-t2);7702  cursor: pointer;7703  text-align: center;7704  padding: 4px;7705  transition: color 120ms ease;7706}7707.peach-lock-recover-link:hover {7708  color: var(--peach-t0);7709}77107711.lock-screen--recovery {7712  display: flex;7713  flex-direction: column;7714  align-items: stretch;7715  padding: 12px 20px 24px;7716  overflow: hidden;7717}77187719.peach-recovery-nav {7720  display: flex;7721  align-items: center;7722  position: relative;7723  z-index: 1;7724  margin-bottom: 4px;7725}77267727/* Mask runes to the top decorative band only — keep inputs and the7728   bottom CTA button clear. The bottom of the popup is reserved for7729   submit buttons; rendering runes there overlaps the button glyph. */7730.peach-rune-background--recovery {7731  -webkit-mask-image: linear-gradient(7732    to bottom,7733    black 0px, black 85px,7734    transparent 110px,7735    transparent 100%7736  );7737  mask-image: linear-gradient(7738    to bottom,7739    black 0px, black 85px,7740    transparent 110px,7741    transparent 100%7742  );7743}77447745.peach-recovery-header {7746  text-align: center;7747  margin-bottom: 16px;7748  margin-top: 4px;7749}7750.peach-recovery-header .peach-onboarding-headline {7751  font-size: 1.25rem;7752  font-weight: 300;7753  letter-spacing: 0.02em;7754  margin: 0 0 4px;7755}7756.peach-recovery-header .peach-hint {7757  font-family: "IBM Plex Mono", monospace;7758  font-size: 0.625rem;7759  color: var(--peach-t2);7760  letter-spacing: 0.04em;7761  margin: 0;7762}77637764/* 12-word grid: 2 columns × 6 rows */7765.peach-recovery-grid {7766  display: grid;7767  grid-template-columns: repeat(2, 1fr);7768  gap: 12px 20px;7769  width: 100%;7770  margin-bottom: 0;7771}77727773.peach-recovery-word-slot {7774  display: flex;7775  align-items: center;7776  gap: 6px;7777  min-width: 0;7778}77797780.peach-recovery-word-index {7781  font-family: "IBM Plex Mono", monospace;7782  font-size: 0.5rem;7783  color: rgba(255, 255, 255, 0.35);7784  min-width: 14px;7785  flex-shrink: 0;7786  text-align: right;7787  letter-spacing: 0.04em;7788}77897790.peach-recovery-word-input {7791  flex: 1;7792  min-width: 0;7793  background: transparent;7794  border: none;7795  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7796  color: var(--peach-t0);7797  font-family: "IBM Plex Mono", monospace;7798  font-size: 0.6875rem;7799  letter-spacing: 0.06em;7800  padding: 5px 2px 4px;7801  outline: none;7802  text-transform: lowercase;7803  transition: border-color 120ms ease;7804}7805.peach-recovery-word-input::placeholder {7806  color: rgba(255, 255, 255, 0.18);7807}7808.peach-recovery-word-input:focus {7809  border-bottom-color: var(--peach-accent);7810}78117812.peach-recovery-submit {7813  width: 100%;7814  margin-top: auto;7815}78167817.peach-recovery-new-password-form {7818  width: 100%;7819  display: flex;7820  flex-direction: column;7821  gap: 16px;7822  margin-bottom: 8px;7823}7824.peach-recovery-new-password-form .peach-newvault-field {7825  display: flex;7826  flex-direction: column;7827  gap: 4px;7828}78297830/* ── Recovery words display (post-create) ────────────────────────── */7831.lock-screen--recovery-display {7832  display: flex;7833  flex-direction: column;7834  align-items: stretch;7835  padding: 0 20px 20px;7836  min-height: 0;7837  overflow-y: auto;7838}78397840.peach-recovery-words-display {7841  width: 100%;7842  margin-bottom: 16px;7843  border: 1px solid var(--peach-t3);7844  border-radius: 8px;7845  padding: 12px 14px;7846  background: rgba(245, 240, 234, 0.04);7847}78487849.peach-recovery-words-label {7850  font-family: "IBM Plex Mono", monospace;7851  font-size: 0.5rem;7852  letter-spacing: 0.08em;7853  color: var(--peach-t2);7854  text-transform: uppercase;7855  margin-bottom: 10px;7856}78577858.peach-recovery-word-list {7859  list-style: none;7860  margin: 0;7861  padding: 0;7862  display: grid;7863  grid-template-columns: repeat(2, 1fr);7864  gap: 6px 16px;7865}78667867.peach-recovery-word-item {7868  display: flex;7869  align-items: baseline;7870  gap: 5px;7871}78727873.peach-recovery-word-num {7874  font-family: "IBM Plex Mono", monospace;7875  font-size: 0.5rem;7876  color: var(--peach-t2);7877  width: 14px;7878  flex: 0 0 14px;7879  text-align: right;7880  letter-spacing: 0.04em;7881  font-variant-numeric: tabular-nums;7882}78837884.peach-recovery-download-btn {7885  display: block;7886  margin: 10px auto 0;7887  padding: 4px 10px;7888  background: transparent;7889  border: 1px solid var(--peach-border);7890  border-radius: 6px;7891  color: var(--peach-t2);7892  font-family: "IBM Plex Mono", monospace;7893  font-size: 0.5625rem;7894  letter-spacing: 0.06em;7895  text-transform: lowercase;7896  cursor: pointer;7897  transition: border-color 0.15s, color 0.15s;7898}78997900.peach-recovery-download-btn:hover {7901  border-color: var(--peach-accent);7902  color: var(--peach-t0);7903}79047905.peach-recovery-word-text {7906  font-family: "IBM Plex Mono", monospace;7907  font-size: 0.6875rem;7908  letter-spacing: 0.06em;7909  color: var(--peach-t0);7910  text-transform: lowercase;7911}79127913.peach-hint--warning {7914  color: var(--peach-accent);7915  font-style: italic;7916}7917.peach-hint--success {7918  color: var(--peach-t2);7919  font-family: "IBM Plex Mono", monospace;7920  font-size: 0.625rem;7921  letter-spacing: 0.06em;7922}79237924/* Confirmation step */7925.peach-recovery-confirm {7926  width: 100%;7927  flex: 1;7928  display: flex;7929  flex-direction: column;7930}7931.peach-recovery-confirm-label {7932  font-family: "IBM Plex Mono", monospace;7933  font-size: 0.5625rem;7934  letter-spacing: 0.04em;7935  color: var(--peach-t2);7936  text-align: center;7937  margin: 0 0 12px;7938}7939.peach-recovery-confirm-fields {7940  display: flex;7941  flex-direction: column;7942  gap: 14px;7943  margin-bottom: 10px;7944}7945.peach-recovery-confirm-field {7946  display: flex;7947  align-items: center;7948  gap: 8px;7949}7950.peach-recovery-confirm-num {7951  font-family: "IBM Plex Mono", monospace;7952  font-size: 0.5rem;7953  color: var(--peach-t2);7954  min-width: 44px;7955  letter-spacing: 0.04em;7956}7957.peach-recovery-confirm-input {7958  flex: 1;7959  background: transparent;7960  border: none;7961  border-bottom: 1px solid var(--peach-t3);7962  color: var(--peach-t0);7963  font-family: "IBM Plex Mono", monospace;7964  font-size: 0.6875rem;7965  letter-spacing: 0.06em;7966  padding: 4px 2px 3px;7967  outline: none;7968  text-transform: lowercase;7969  transition: border-color 120ms ease;7970}7971.peach-recovery-confirm-input:focus {7972  border-bottom-color: var(--peach-accent);7973}7974.peach-recovery-confirm-input:disabled {7975  opacity: 0.4;7976  cursor: not-allowed;7977}7978.peach-recovery-confirm-btn {7979  width: 100%;7980  margin-top: auto;7981}79827983/* ============================================================7984   Sync info sheet7985   ============================================================ */79867987.peach-sync-info-backdrop {7988  position: fixed;7989  inset: 0;7990  z-index: 200;7991  background: rgba(0, 0, 0, 0.55);7992  display: flex;7993  align-items: flex-end;7994  animation: peach-fade-in 200ms ease forwards;7995}79967997@keyframes peach-fade-in {7998  from { opacity: 0; }7999  to   { opacity: 1; }8000}80018002.peach-sync-info-sheet {8003  width: 100%;8004  background: var(--peach-bg-card, var(--peach-bg));8005  border-top-left-radius: 20px;8006  border-top-right-radius: 20px;8007  padding: 12px 24px 32px;8008  display: flex;8009  flex-direction: column;8010  gap: 20px;8011  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;8012}80138014@keyframes peach-sheet-up {8015  from { transform: translateY(100%); }8016  to   { transform: translateY(0); }8017}80188019.peach-sync-info-handle {8020  width: 36px;8021  height: 4px;8022  border-radius: 2px;8023  background: var(--peach-border);8024  margin: 0 auto 4px;8025  flex-shrink: 0;8026}80278028.peach-sync-info-title {8029  font-family: 'Cormorant Garamond', serif;8030  font-style: italic;8031  font-size: 26px;8032  font-weight: 600;8033  color: var(--peach-t0);8034  margin: 0;8035  line-height: 1.2;8036}80378038.peach-sync-info-body {8039  display: flex;8040  flex-direction: column;8041  gap: 14px;8042}80438044.peach-sync-info-point {8045  display: flex;8046  gap: 12px;8047  align-items: flex-start;8048  font-size: 14px;8049  color: var(--peach-t2);8050  line-height: 1.6;8051  margin: 0;8052}80538054.peach-sync-info-icon {8055  color: var(--peach-accent);8056  font-size: 16px;8057  flex-shrink: 0;8058  margin-top: 1px;8059}80608061.peach-sync-info-actions {8062  display: flex;8063  flex-direction: column;8064  gap: 12px;8065  margin-top: 4px;8066}80678068.peach-sync-info-pro-link {8069  background: none;8070  border: none;8071  font-size: 13px;8072  color: var(--peach-t3);8073  cursor: pointer;8074  padding: 0;8075  font-family: inherit;8076  text-align: center;8077  transition: color 150ms ease;8078}80798080.peach-sync-info-pro-link:hover {8081  color: var(--peach-accent);8082}80838084.peach-btn--full {8085  width: 100%;8086}80878088/* ── Sync screen ── */80898090.peach-sync-coming-soon {8091  display: flex;8092  align-items: flex-start;8093  gap: 10px;8094  padding: 12px 14px;8095  background: var(--peach-s1);8096  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8097  border-radius: 10px;8098}8099.peach-sync-coming-soon__icon {8100  flex-shrink: 0;8101  color: var(--peach-accent);8102  margin-top: 1px;8103  line-height: 0;8104}8105.peach-sync-coming-soon__title {8106  font-family: 'Cormorant Garamond', serif;8107  font-weight: 500;8108  font-size: 13px;8109  color: var(--peach-accent);8110  margin: 0 0 5px;8111  line-height: 1.3;8112}8113.peach-sync-coming-soon__body {8114  font-size: 12px;8115  color: var(--peach-t1);8116  line-height: 1.55;8117  margin: 0;8118}81198120.peach-sync-screen {8121  display: flex;8122  flex-direction: column;8123  height: 100%;8124}81258126.peach-sync-content {8127  flex: 1;8128  overflow-y: auto;8129  padding: 24px 20px 40px;8130  display: flex;8131  flex-direction: column;8132  gap: 24px;8133}81348135/* Intro (State A) */8136.peach-sync-headline {8137  font-family: 'Cormorant Garamond', serif;8138  font-style: italic;8139  font-size: 28px;8140  font-weight: 600;8141  color: var(--peach-t0);8142  margin: 0 0 10px;8143  line-height: 1.2;8144}81458146.peach-sync-intro-body {8147  font-size: 14px;8148  color: var(--peach-t1);8149  line-height: 1.6;8150  margin: 0;8151}81528153.peach-sync-pro-note {8154  display: flex;8155  flex-direction: column;8156  gap: 8px;8157  background: var(--peach-t3);8158  border-radius: 10px;8159  padding: 12px 14px;8160}81618162.peach-sync-pro-note-text {8163  font-size: 12px;8164  color: var(--peach-t2);8165  line-height: 1.5;8166  margin: 0;8167}81688169.peach-sync-pro-link {8170  background: none;8171  border: none;8172  font-size: 12px;8173  color: var(--peach-accent);8174  cursor: pointer;8175  padding: 0;8176  font-family: inherit;8177  text-align: left;8178}81798180/* Status (State C) */8181.peach-sync-status {8182  padding: 12px 0;8183  border-bottom: 1px solid var(--peach-border);8184}81858186.peach-sync-status-row {8187  display: flex;8188  align-items: center;8189  gap: 8px;8190}81918192.peach-sync-dot {8193  width: 7px;8194  height: 7px;8195  border-radius: 50%;8196  flex-shrink: 0;8197}81988199.peach-sync-dot--green { background: var(--peach-health-ok); }8200.peach-sync-dot--amber { background: var(--peach-accent); }82018202.peach-sync-status-text {8203  font-family: 'IBM Plex Mono', monospace;8204  font-size: 11px;8205  color: var(--peach-t2);8206}82078208/* Paired devices */8209.peach-sync-section {8210  display: flex;8211  flex-direction: column;8212  gap: 2px;8213}82148215.peach-sync-section-label {8216  font-family: 'IBM Plex Mono', monospace;8217  font-size: 10px;8218  letter-spacing: 0.1em;8219  color: var(--peach-t3);8220  margin: 0 0 10px;8221}82228223.peach-sync-device-row {8224  display: flex;8225  justify-content: space-between;8226  align-items: baseline;8227  padding: 10px 0;8228  border-bottom: 1px solid var(--peach-border);8229  gap: 12px;8230}82318232.peach-sync-device-name {8233  font-size: 14px;8234  color: var(--peach-t1);8235}82368237.peach-sync-device-meta {8238  font-family: 'IBM Plex Mono', monospace;8239  font-size: 11px;8240  color: var(--peach-t3);8241  white-space: nowrap;8242}82438244.peach-sync-hub-note {8245  padding: 14px 16px;8246  border: 1px solid var(--peach-border);8247  border-radius: 10px;8248  display: flex;8249  flex-direction: column;8250  gap: 6px;8251  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8252}82538254.peach-sync-hub-note-title {8255  font-size: 13px;8256  font-weight: 600;8257  color: var(--peach-t0);8258  margin: 0;8259}82608261.peach-sync-hub-note-body {8262  font-size: 12px;8263  color: var(--peach-t2);8264  line-height: 1.6;8265  margin: 0;8266}82678268/* Action buttons */8269.peach-sync-actions {8270  display: flex;8271  gap: 10px;8272  flex-wrap: wrap;8273}82748275/* Upgrade prompt (State B) */8276.peach-sync-upgrade {8277  display: flex;8278  flex-direction: column;8279  gap: 12px;8280  padding: 16px;8281  border: 1px solid var(--peach-border);8282  border-radius: 10px;8283}82848285.peach-sync-upgrade-text {8286  font-size: 13px;8287  color: var(--peach-t2);8288  line-height: 1.6;8289  margin: 0;8290}82918292/* Network note */8293.peach-sync-network-note {8294  font-size: 12px;8295  color: var(--peach-t3);8296  line-height: 1.6;8297  margin: 0;8298}82998300/* Advanced */8301.peach-sync-advanced {8302  margin-top: auto;8303  padding-top: 16px;8304  border-top: 1px solid var(--peach-border);8305}83068307.peach-sync-advanced-toggle {8308  display: flex;8309  align-items: center;8310  gap: 8px;8311  background: none;8312  border: none;8313  font-family: 'IBM Plex Mono', monospace;8314  font-size: 11px;8315  letter-spacing: 0.08em;8316  color: var(--peach-t3);8317  cursor: pointer;8318  padding: 0;8319  text-transform: uppercase;8320}83218322.peach-sync-advanced-chevron {8323  display: inline-block;8324  transition: transform 200ms ease;8325  font-size: 10px;8326}83278328.peach-sync-advanced-chevron.is-open {8329  transform: rotate(90deg);8330}83318332.peach-sync-advanced-content {8333  margin-top: 14px;8334}83358336.peach-sync-advanced-row {8337  display: flex;8338  justify-content: space-between;8339  align-items: center;8340  gap: 16px;8341}83428343.peach-sync-advanced-title {8344  font-size: 14px;8345  color: var(--peach-t1);8346  margin: 0 0 2px;8347}83488349.peach-sync-advanced-subtitle {8350  font-size: 12px;8351  color: var(--peach-t3);8352  margin: 0;8353  line-height: 1.5;8354}83558356/* ── Add Device — Android scan tabs ─────────────────────────────────────── */83578358.peach-pairing-tabs {8359  display: flex;8360  border: 1px solid var(--peach-border);8361  border-radius: 8px;8362  overflow: hidden;8363  margin-bottom: 4px;8364}83658366.peach-pairing-tab {8367  flex: 1;8368  padding: 10px 0;8369  background: none;8370  border: none;8371  font-family: 'IBM Plex Mono', monospace;8372  font-size: 11px;8373  letter-spacing: 0.06em;8374  color: var(--peach-t2);8375  cursor: pointer;8376  transition: background 150ms, color 150ms;8377}83788379.peach-pairing-tab.is-active {8380  background: var(--peach-accent);8381  color: #fff;8382  font-weight: 600;8383}83848385.peach-pairing-tab:not(.is-active):active {8386  background: var(--peach-border);8387}83888389/* Camera view */8390.peach-pairing-camera-container {8391  position: relative;8392  width: 100%;8393  aspect-ratio: 1;8394  border-radius: 12px;8395  overflow: hidden;8396  background: #000;8397  flex-shrink: 0;8398}83998400.peach-pairing-video {8401  width: 100%;8402  height: 100%;8403  object-fit: cover;8404}84058406.peach-pairing-scan-frame {8407  position: absolute;8408  top: 50%;8409  left: 50%;8410  transform: translate(-50%, -50%);8411  width: 60%;8412  aspect-ratio: 1;8413  border: 2px solid var(--peach-accent);8414  border-radius: 8px;8415  pointer-events: none;8416}84178418/* ── Notes Mode ── */84198420/* Overlay that crossfades over the vault */8421.peach-notes-overlay {8422  position: fixed;8423  inset: 0;8424  z-index: 90;8425  opacity: 0;8426  pointer-events: none;8427  animation: peach-mode-in 220ms ease-in forwards;8428}84298430.peach-notes-overlay.is-visible {8431  opacity: 1;8432  pointer-events: auto;8433}84348435@keyframes peach-mode-in {8436  from { opacity: 0; }8437  to   { opacity: 1; }8438}84398440/* Top-level notes surface */8441.peach-notes-mode {8442  position: absolute;8443  inset: 0;8444  background: var(--peach-bg);8445  display: flex;8446  flex-direction: column;8447}84488449/* Rune canvas positioned behind content */8450.peach-note-rune-canvas {8451  position: absolute;8452  inset: 0;8453  width: 100%;8454  height: 100%;8455  pointer-events: none;8456  z-index: 0;8457}84588459/* TOC wrapper */8460.peach-notes-toc-wrapper {8461  position: absolute;8462  inset: 0;8463  z-index: 1;8464  opacity: 1;8465  pointer-events: auto;8466  transition: opacity 200ms ease;8467}84688469.peach-notes-toc-wrapper.is-hidden {8470  opacity: 0;8471  pointer-events: none;8472}84738474/* Editor wrapper */8475.peach-notes-editor-wrapper {8476  position: absolute;8477  inset: 0;8478  z-index: 2;8479  opacity: 0;8480  pointer-events: none;8481  transition: opacity 200ms ease;8482}84838484.peach-notes-editor-wrapper.is-visible {8485  opacity: 1;8486  pointer-events: auto;8487}84888489/* TOC inner */8490.peach-notes-toc {8491  position: relative;8492  display: flex;8493  flex-direction: column;8494  height: 100%;8495  padding-top: env(safe-area-inset-top, 0px);8496  padding-bottom: env(safe-area-inset-bottom, 0px);8497}84988499/* Shared header */8500.peach-notes-header {8501  display: flex;8502  align-items: center;8503  padding: 12px 16px;8504  gap: 12px;8505  flex-shrink: 0;8506  min-height: 52px;8507  position: relative;8508  z-index: 2;8509}85108511.peach-notes-back {8512  font-size: 22px;8513  color: var(--peach-t2);8514  background: none;8515  border: none;8516  padding: 4px;8517  cursor: pointer;8518  line-height: 1;8519  flex-shrink: 0;8520  transition: color 150ms ease;8521  -webkit-tap-highlight-color: transparent;8522}85238524.peach-notes-back:active { color: var(--peach-t0); }85258526.peach-notes-header-title {8527  flex: 1;8528  font-family: 'Cormorant Garamond', serif;8529  font-style: italic;8530  font-size: 22px;8531  color: var(--peach-t0);8532  text-align: center;8533}85348535.peach-notes-header-title.is-breadcrumb {8536  font-family: 'IBM Plex Mono', monospace;8537  font-style: normal;8538  font-size: 11px;8539  color: var(--peach-t3);8540  letter-spacing: 0.08em;8541  text-transform: uppercase;8542  cursor: pointer;8543}85448545.peach-notes-header-actions {8546  display: flex;8547  gap: 8px;8548  flex-shrink: 0;8549}85508551.peach-notes-header-btn {8552  width: 36px;8553  height: 36px;8554  display: flex;8555  align-items: center;8556  justify-content: center;8557  background: none;8558  border: none;8559  color: var(--peach-t2);8560  cursor: pointer;8561  border-radius: 8px;8562  font-size: 16px;8563  transition: color 150ms ease, background 150ms ease;8564  -webkit-tap-highlight-color: transparent;8565}85668567.peach-notes-header-btn:active {8568  background: rgba(255,255,255,0.06);8569  color: var(--peach-t0);8570}85718572/* Inline search bar */8573.peach-notes-search-input {8574  flex: 1;8575  background: none;8576  border: none;8577  outline: none;8578  font-family: 'IBM Plex Mono', monospace;8579  font-size: 13px;8580  color: var(--peach-t0);8581  padding: 4px 0;8582  letter-spacing: 0.02em;8583}85848585.peach-notes-search-input::placeholder {8586  color: var(--peach-t3);8587}85888589/* TOC list */8590.peach-notes-list-container {8591  flex: 1;8592  overflow-y: auto;8593  overflow-x: hidden;8594  scrollbar-width: none;8595  -webkit-overflow-scrolling: touch;8596  overscroll-behavior: contain;8597  position: relative;8598  z-index: 1;8599}86008601.peach-notes-list-container::-webkit-scrollbar { display: none; }86028603/* Note row */8604.peach-note-row {8605  position: relative;8606  display: grid;8607  grid-template-columns: 44px 8px 1fr 8px auto;8608  align-items: center;8609  min-height: 72px;8610  padding: 16px 20px;8611  border-bottom: 0.5px solid var(--peach-border);8612  cursor: pointer;8613  overflow: hidden;8614  touch-action: pan-y;8615  user-select: none;8616  -webkit-user-select: none;8617  -webkit-tap-highlight-color: transparent;8618}86198620.peach-note-row:first-child {8621  border-top: 0.5px solid var(--peach-border);8622}86238624.peach-note-row:active {8625  background: rgba(255,255,255,0.02);8626}86278628.peach-note-numeral {8629  font-family: 'Cormorant Garamond', serif;8630  font-style: italic;8631  font-size: 15px;8632  color: var(--peach-accent);8633  text-align: right;8634  line-height: 1;8635  flex-shrink: 0;8636}86378638.peach-note-title-gap { /* grid spacer */ }86398640.peach-note-title {8641  font-family: 'Cormorant Garamond', serif;8642  font-style: italic;8643  font-size: 18px;8644  color: var(--peach-t0);8645  line-height: 1.3;8646  min-width: 0;8647  overflow-wrap: break-word;8648}86498650.peach-note-title-match {8651  color: var(--peach-accent);8652}86538654.peach-note-date {8655  font-family: 'IBM Plex Mono', monospace;8656  font-size: 11px;8657  color: var(--peach-t2);8658  white-space: nowrap;8659  text-align: right;8660  flex-shrink: 0;8661  grid-column: 5;8662}86638664/* Swipe underlays */8665.peach-note-row-underlay {8666  position: absolute;8667  inset: 0;8668  display: flex;8669  align-items: center;8670  padding: 0 24px;8671  font-family: 'IBM Plex Mono', monospace;8672  font-size: 11px;8673  letter-spacing: 0.1em;8674  pointer-events: none;8675  z-index: 0;8676}86778678.peach-note-row-underlay--delete {8679  background: #8B2020;8680  color: rgba(255,255,255,0.9);8681  justify-content: flex-end;8682}86838684.peach-note-row-underlay--archive {8685  background: var(--peach-accent);8686  color: #0C0A06;8687  justify-content: flex-start;8688}86898690/* Delete confirm strip */8691.peach-note-delete-confirm {8692  position: absolute;8693  inset: 0;8694  background: var(--peach-bg);8695  display: flex;8696  align-items: center;8697  gap: 12px;8698  padding: 0 20px;8699  font-family: 'IBM Plex Mono', monospace;8700  font-size: 11px;8701  color: var(--peach-t1);8702  letter-spacing: 0.04em;8703  animation: peach-delete-confirm-in 150ms ease both;8704  z-index: 10;8705}87068707@keyframes peach-delete-confirm-in {8708  from { opacity: 0; }8709  to   { opacity: 1; }8710}87118712.peach-note-delete-confirm-btn {8713  background: #8B2020;8714  color: rgba(255,255,255,0.9);8715  border: none;8716  border-radius: 6px;8717  padding: 4px 10px;8718  font-family: 'IBM Plex Mono', monospace;8719  font-size: 10px;8720  cursor: pointer;8721  letter-spacing: 0.06em;8722}87238724.peach-note-delete-cancel-btn {8725  background: none;8726  border: none;8727  color: var(--peach-t3);8728  font-family: 'IBM Plex Mono', monospace;8729  font-size: 10px;8730  cursor: pointer;8731  letter-spacing: 0.06em;8732  padding: 4px 6px;8733}87348735/* + New note button */8736.peach-notes-new-btn {8737  font-family: 'IBM Plex Mono', monospace;8738  font-size: 12px;8739  color: var(--peach-t3);8740  text-align: center;8741  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8742  background: none;8743  border: none;8744  width: 100%;8745  cursor: pointer;8746  letter-spacing: 0.04em;8747  transition: color 150ms ease;8748  -webkit-tap-highlight-color: transparent;8749}87508751.peach-notes-new-btn:active { color: var(--peach-accent); }87528753/* Empty state */8754.peach-notes-empty {8755  display: flex;8756  flex-direction: column;8757  align-items: center;8758  justify-content: center;8759  flex: 1;8760  padding: 48px 32px;8761  gap: 16px;8762}87638764.peach-notes-empty-text {8765  font-family: 'Cormorant Garamond', serif;8766  font-style: italic;8767  font-size: 20px;8768  color: var(--peach-t3);8769  text-align: center;8770  margin: 0;8771  line-height: 1.4;8772  white-space: pre-line;8773}87748775/* ── Editor surface ── */87768777.peach-note-editor-surface {8778  position: absolute;8779  inset: 0;8780  background: var(--peach-bg);8781  display: flex;8782  flex-direction: column;8783  padding-top: env(safe-area-inset-top, 0px);8784}87858786.peach-note-editor-scroll {8787  flex: 1;8788  overflow-y: auto;8789  overflow-x: hidden;8790  scrollbar-width: none;8791  -webkit-overflow-scrolling: touch;8792  padding: 0 24px 120px;8793  position: relative;8794  z-index: 1;8795}87968797.peach-note-editor-scroll::-webkit-scrollbar { display: none; }87988799/* Desktop toolbar (always visible above body) */8800.peach-note-toolbar-desktop-inline {8801  display: flex;8802  align-items: center;8803  gap: 2px;8804  padding: 6px 0 12px;8805  margin-bottom: 4px;8806  border-bottom: 0.5px solid var(--peach-border);8807}88088809/* Title field */8810.peach-note-title-field {8811  font-family: 'Cormorant Garamond', serif;8812  font-style: italic;8813  font-size: 32px;8814  font-weight: 600;8815  color: var(--peach-t0);8816  line-height: 1.2;8817  padding: 8px 0 0;8818  outline: none;8819  min-height: 44px;8820  word-break: break-word;8821  position: relative;8822  z-index: 1;8823}88248825.peach-note-title-field:empty::before {8826  content: attr(data-placeholder);8827  color: var(--peach-t3);8828  pointer-events: none;8829}88308831/* Hairline separator */8832.peach-note-hairline {8833  height: 0.5px;8834  background: var(--peach-border);8835  margin: 12px 0 20px;8836  position: relative;8837  z-index: 1;8838}88398840/* Body field */8841.peach-note-body-field {8842  font-family: 'DM Sans', sans-serif;8843  font-size: 16px;8844  color: var(--peach-t0);8845  line-height: 1.85;8846  padding: 0;8847  outline: none;8848  min-height: 240px;8849  word-break: break-word;8850  position: relative;8851  z-index: 1;8852}88538854.peach-note-body-field:empty::before {8855  content: attr(data-placeholder);8856  color: var(--peach-t3);8857  font-style: italic;8858  pointer-events: none;8859}88608861.peach-note-body-field h2 {8862  font-family: 'Cormorant Garamond', serif;8863  font-style: italic;8864  font-size: 22px;8865  font-weight: 600;8866  color: var(--peach-t0);8867  margin: 20px 0 8px;8868}88698870.peach-note-body-field blockquote {8871  border-left: 2px solid var(--peach-accent);8872  margin: 12px 0;8873  padding-left: 16px;8874  color: var(--peach-t1);8875  font-style: italic;8876}88778878.peach-note-body-field ul,8879.peach-note-body-field ol {8880  padding-left: 20px;8881  margin: 8px 0;8882}88838884.peach-note-body-field li {8885  margin: 4px 0;8886}88878888.peach-note-body-field hr {8889  border: none;8890  border-top: 0.5px solid var(--peach-border);8891  margin: 16px 0;8892}88938894/* Saved indicator */8895.peach-note-saved-indicator {8896  font-family: 'IBM Plex Mono', monospace;8897  font-size: 11px;8898  color: var(--peach-t3);8899  letter-spacing: 0.04em;8900  text-align: right;8901  padding: 6px 24px;8902  flex-shrink: 0;8903  transition: opacity 300ms ease;8904  pointer-events: none;8905  position: relative;8906  z-index: 1;8907}89088909/* Mobile keyboard toolbar */8910.peach-note-toolbar-mobile {8911  display: flex;8912  align-items: center;8913  padding: 8px 16px;8914  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));8915  background: var(--peach-bg);8916  border-top: 0.5px solid var(--peach-border);8917  gap: 4px;8918  flex-shrink: 0;8919  position: relative;8920  z-index: 10;8921}89228923.peach-note-toolbar-btn {8924  min-width: 36px;8925  height: 36px;8926  display: flex;8927  align-items: center;8928  justify-content: center;8929  background: none;8930  border: none;8931  border-radius: 8px;8932  cursor: pointer;8933  font-size: 14px;8934  color: var(--peach-t1);8935  font-family: 'DM Sans', sans-serif;8936  font-weight: 600;8937  transition: background 100ms ease, color 100ms ease;8938  -webkit-tap-highlight-color: transparent;8939}89408941.peach-note-toolbar-btn--italic { font-style: italic; }8942.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }8943.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }89448945.peach-note-toolbar-divider {8946  width: 0.5px;8947  height: 20px;8948  background: var(--peach-border);8949  margin: 0 4px;8950  flex-shrink: 0;8951}89528953.peach-note-toolbar-spacer { flex: 1; }89548955/* Desktop: larger headline in TOC */8956@media (min-width: 400px) {8957  .peach-notes-header-title:not(.is-breadcrumb) {8958    font-size: 32px;8959  }89608961  .peach-note-row {8962    min-height: 64px;8963    padding: 14px 16px;8964  }8965}89668967/* Flying title — shared element during expansion/collapse */89688969/* ─── Light theme overrides ───────────────────────────────────────────────8970   Tokens that cannot be expressed as variable substitutions — hardcoded8971   context-specific values that need separate light-mode rules. */89728973/* Settings section headers: use text-label (#79766F) per restoration brief —8974   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY8975   presence without fighting the light parchment background. */8976.light .peach-settings-sub-label,8977[data-theme="light"] .peach-settings-sub-label,8978.light .peach-settings-nav-label,8979[data-theme="light"] .peach-settings-nav-label {8980  color: #79766F;8981}89828983/* Secondary action buttons (ghost / subtle): filled with input-well surface8984   so they read as recessed against the parchment card background. */8985.light .peach-btn--ghost:not(.peach-icon-btn),8986[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {8987  background: #EEE7DD;8988  border-color: #DDD5CB;8989  color: #1A1208;8990}8991.light .peach-icon-btn,8992[data-theme="light"] .peach-icon-btn {8993  background: transparent;8994  border-color: transparent;8995}8996.light .peach-btn--subtle,8997[data-theme="light"] .peach-btn--subtle {8998  background: #EEE7DD;8999  border-color: #DDD5CB;9000}90019002/* Wide secondary action button on the lock screen — override the9003   hardcoded dark-mode rgba values with warm parchment equivalents. */9004.light .peach-lock-secondary,9005[data-theme="light"] .peach-lock-secondary {9006  background: #EEE7DD;9007  border-color: #DDD5CB;9008  color: #1A1208;9009}9010.light .peach-lock-secondary:hover,9011[data-theme="light"] .peach-lock-secondary:hover {9012  background: #F0E9DF;9013}90149015/* Entry row hover: bg-row lifts the row above the card surface. */9016.light .peach-entry-row:hover,9017[data-theme="light"] .peach-entry-row:hover {9018  background: #F2EBE1;9019}9020.light .peach-entry-row.is-active,9021[data-theme="light"] .peach-entry-row.is-active {9022  background: #F2EBE1;9023}9024.light .peach-entry-row.is-selected,9025[data-theme="light"] .peach-entry-row.is-selected {9026  background: #F5EDE2;9027}90289029/* ──────────────────────────────────────────────────────────────────────────9030   Chirp pairing flow — bird-stage animation (Phase 1)9031   See src/popup/components/ChirpPairingFlow.tsx and the brief §6.2.9032   Three-act animation gated on the [data-phase] attribute of9033   .peach-chirp-pair; child layers (birds, chirp arcs, flight wave, dot)9034   each react via either pose class or visibility flag.9035   Tokens: accent surfaces use var(--peach-accent); bird illustration9036   colours are baked into the SVG per the brand-peach exception in §3.1.9037   ────────────────────────────────────────────────────────────────────── */90389039.peach-chirp-pair {9040  position: absolute;9041  inset: 0;9042  z-index: 3;9043  display: flex;9044  flex-direction: column;9045  padding: 14px 12px 12px;9046  width: 100%;9047  box-sizing: border-box;9048  gap: 0;9049  background:9050    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9051    var(--peach-bg);9052  color: var(--peach-t0);9053  overflow-y: auto;9054  overflow-x: hidden;9055  scrollbar-width: none;9056  isolation: isolate;9057  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9058}9059@keyframes peach-chirp-overlay-in {9060  from { opacity: 0; transform: translateY(8px); }9061  to   { opacity: 1; transform: translateY(0); }9062}9063.peach-chirp-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }9064.peach-chirp-pair::before {9065  content: '';9066  position: absolute;9067  inset: 0;9068  border-radius: inherit;9069  pointer-events: none;9070  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9071  z-index: 0;9072}9073.peach-chirp-pair > * { position: relative; z-index: 1; }90749075/* Header --------------------------------------------------------------- */9076.peach-chirp-head {9077  display: flex; align-items: center; gap: 10px;9078}9079.peach-chirp-back {9080  width: 32px; height: 32px;9081  display: inline-flex; align-items: center; justify-content: center;9082  background: transparent;9083  border: none;9084  border-radius: 8px;9085  color: var(--peach-t1);9086  cursor: pointer;9087  transition: color 0.15s ease, box-shadow 0.15s ease;9088}9089.peach-chirp-back:hover {9090  color: var(--peach-accent);9091  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9092}9093.peach-chirp-title {9094  font-family: var(--font-display, Georgia, serif);9095  font-style: italic;9096  font-size: 24px;9097  font-weight: 500;9098  letter-spacing: 0.005em;9099  color: var(--peach-t0);9100  line-height: 1;9101}9102.peach-chirp-head-spacer { flex: 1; }91039104/* Chip row ------------------------------------------------------------- */9105.peach-chirp-chip-row {9106  display: flex;9107  align-items: center;9108  justify-content: flex-start;9109  margin-top: 12px;9110}9111.peach-chirp-chip {9112  display: inline-flex; align-items: center; gap: 8px;9113  padding: 5px 10px 5px 8px;9114  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9115  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9116  border-radius: 999px;9117  font-family: var(--peach-mono, ui-monospace, monospace);9118  font-size: 11px;9119  letter-spacing: 0.04em;9120  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9121}9122.peach-chirp-chip-dot {9123  width: 6px; height: 6px; border-radius: 50%;9124  background: var(--peach-accent);9125  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9126}9127.peach-chirp-chip[data-phase="paired"] {9128  background: color-mix(in srgb, #4f9eda 12%, transparent);9129  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9130  color: #76b6e8;9131}9132.peach-chirp-chip[data-phase="paired"] .peach-chirp-chip-dot {9133  background: #76b6e8;9134  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9135}9136.peach-chirp-chip[data-phase="timeout"],9137.peach-chirp-chip[data-phase="mic_denied"],9138.peach-chirp-chip[data-phase="version_mismatch"],9139.peach-chirp-chip[data-phase="handshake_failed"] {9140  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9141  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9142  color: var(--peach-warn, #d29257);9143}9144.peach-chirp-chip[data-phase="timeout"] .peach-chirp-chip-dot,9145.peach-chirp-chip[data-phase="mic_denied"] .peach-chirp-chip-dot,9146.peach-chirp-chip[data-phase="version_mismatch"] .peach-chirp-chip-dot,9147.peach-chirp-chip[data-phase="handshake_failed"] .peach-chirp-chip-dot {9148  background: var(--peach-warn, #d29257);9149  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9150}91519152/* Bird stage ----------------------------------------------------------- */9153.peach-chirp-stage {9154  position: relative;9155  margin: 14px 0 8px;9156  height: 180px;9157  border-radius: 12px;9158  background:9159    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9160    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),9161    color-mix(in srgb, var(--peach-bg) 92%, #000);9162  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);9163  overflow: hidden;9164  isolation: isolate;9165}9166.peach-chirp-stage::after {9167  content: '';9168  position: absolute;9169  left: 12%; right: 12%;9170  bottom: 36px;9171  height: 1px;9172  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9173}91749175.peach-chirp-bird-slot {9176  position: absolute;9177  bottom: 8px;9178  width: 100px;9179  height: 110px;9180  display: flex;9181  align-items: flex-end;9182  justify-content: center;9183}9184.peach-chirp-bird-slot-desktop { left: 28px; }9185.peach-chirp-bird-slot-mobile { right: 28px; }91869187/* Mobile bird hops in from the right when handshake begins */9188.peach-chirp-bird-slot-mobile {9189  opacity: 1;9190  transform: translateX(-6px);9191  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9192}9193.peach-chirp-stage.act-listening .peach-chirp-bird-slot-mobile,9194.peach-chirp-stage.act-chirping .peach-chirp-bird-slot-mobile,9195.peach-chirp-stage.act-idle .peach-chirp-bird-slot-mobile {9196  opacity: 0;9197  transform: translateX(60px) rotate(8deg);9198}9199.peach-chirp-stage.act-handshake .peach-chirp-bird-slot-desktop,9200.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop {9201  transform: translateX(6px);9202  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9203}92049205/* Paired: both birds bob together */9206.peach-chirp-stage.act-paired .peach-chirp-bird-slot {9207  animation: peach-chirp-happy-bob 1.2s ease-in-out infinite;9208}9209.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { animation-delay: 0.2s; }9210.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop { --bb-x: 6px; }9211.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { --bb-x: -6px; }9212@keyframes peach-chirp-happy-bob {9213  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9214  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9215}92169217/* Bird internal -------------------------------------------------------- */9218.peach-chirp-bird {9219  width: 108px;9220  height: 108px;9221  transform-origin: 50% 95%;9222}9223.peach-chirp-bird svg { width: 100%; height: 100%; overflow: visible; }92249225.peach-chirp-bird-body {9226  transform-origin: 50% 80%;9227  animation: peach-chirp-bird-bob 2.4s ease-in-out infinite;9228}9229@keyframes peach-chirp-bird-bob {9230  0%, 100% { transform: translateY(0) scale(1, 1); }9231  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9232}92339234.peach-chirp-bird-eye-group {9235  animation: peach-chirp-blink 5.2s steps(1, end) infinite;9236  transform-origin: center;9237  transform-box: fill-box;9238}9239@keyframes peach-chirp-blink {9240  0%, 92%, 96%, 100% { transform: scaleY(1); }9241  94%                { transform: scaleY(0.05); }9242}92439244/* Pose: chirping — beak opens, head bobs, aura blooms */9245.peach-chirp-bird-pose-chirping .peach-chirp-bird-body {9246  animation:9247    peach-chirp-bird-bob 2.4s ease-in-out infinite,9248    peach-chirp-squeeze 1.7s ease-in-out infinite;9249}9250@keyframes peach-chirp-squeeze {9251  0%, 70%, 100% { transform-origin: 50% 85%; }9252  78%           { transform: scale(1.04, 0.96) translateY(1px); }9253  86%           { transform: scale(0.98, 1.02); }9254}9255.peach-chirp-bird-pose-chirping .peach-chirp-bird-head-group {9256  animation: peach-chirp-head-bob 1.7s ease-in-out infinite;9257}9258@keyframes peach-chirp-head-bob {9259  0%, 70%, 100% { transform: translateY(0) rotate(0); }9260  78%           { transform: translateY(-3px) rotate(-4deg); }9261  86%           { transform: translateY(-1px) rotate(-2deg); }9262}9263.peach-chirp-bird-pose-chirping .peach-chirp-bird-beak {9264  animation: peach-chirp-beak-open 1.7s ease-in-out infinite;9265}9266@keyframes peach-chirp-beak-open {9267  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9268  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9269  86%           { transform: rotate(-6deg); }9270}9271.peach-chirp-bird-pose-chirping .peach-chirp-bird-aura {9272  animation: peach-chirp-aura 1.7s ease-in-out infinite;9273}9274@keyframes peach-chirp-aura {9275  0%, 100% { opacity: 0; }9276  50%      { opacity: 0.8; }9277}9278.peach-chirp-bird-pose-chirping .peach-chirp-bird-tail {9279  animation: peach-chirp-tail-twitch 1.7s ease-in-out infinite;9280  transform-origin: 100% 50%;9281}9282@keyframes peach-chirp-tail-twitch {9283  0%, 75%, 100% { transform: rotate(0); }9284  82%           { transform: rotate(-3deg) translateX(-1px); }9285}92869287/* Pose: attentive — head tilts toward partner */9288.peach-chirp-bird-pose-attentive .peach-chirp-bird-head-group {9289  animation: peach-chirp-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9290}9291@keyframes peach-chirp-head-tilt {9292  0%   { transform: rotate(0) translateY(0); }9293  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9294  100% { transform: rotate(-6deg); }9295}9296.peach-chirp-bird-pose-attentive .peach-chirp-bird-tail {9297  animation: peach-chirp-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9298  transform-origin: 100% 50%;9299}9300@keyframes peach-chirp-tail-cock {9301  0%   { transform: rotate(0); }9302  100% { transform: rotate(-4deg); }9303}93049305/* Pose: happy — wing flutter, tuft perk, tail wag */9306.peach-chirp-bird-pose-happy .peach-chirp-bird-wing {9307  transform-origin: 80% 60%;9308  animation: peach-chirp-wing-flutter 0.32s ease-in-out 5;9309}9310@keyframes peach-chirp-wing-flutter {9311  0%, 100% { transform: rotate(0) translateY(0); }9312  50%      { transform: rotate(-16deg) translateY(-2px); }9313}9314.peach-chirp-bird-pose-happy .peach-chirp-bird-tuft {9315  transform-origin: 0% 100%;9316  animation: peach-chirp-tuft-perk 0.4s ease-in-out 3;9317}9318@keyframes peach-chirp-tuft-perk {9319  0%, 100% { transform: rotate(0); }9320  50%      { transform: rotate(-15deg) translateY(-1px); }9321}9322.peach-chirp-bird-pose-happy .peach-chirp-bird-tail {9323  transform-origin: 100% 50%;9324  animation: peach-chirp-tail-wag 0.5s ease-in-out 4;9325}9326@keyframes peach-chirp-tail-wag {9327  0%, 100% { transform: rotate(0); }9328  25%      { transform: rotate(6deg); }9329  75%      { transform: rotate(-6deg); }9330}9331.peach-chirp-bird-pose-happy .peach-chirp-bird-head-group {9332  animation: peach-chirp-head-perk 0.5s ease-out;9333}9334@keyframes peach-chirp-head-perk {9335  0%   { transform: translateY(0); }9336  40%  { transform: translateY(-3px) rotate(2deg); }9337  100% { transform: translateY(0); }9338}93399340/* Pose: sad — body droops forward */9341.peach-chirp-bird-pose-sad .peach-chirp-bird-body {9342  transform: translateY(5px) rotate(-2deg);9343  animation: none;9344}9345.peach-chirp-bird-pose-sad .peach-chirp-bird-head-group {9346  transform: translateY(4px) rotate(8deg);9347}9348.peach-chirp-bird-pose-sad .peach-chirp-bird-tuft { transform: rotate(15deg) translateY(2px); }9349.peach-chirp-bird-pose-sad .peach-chirp-bird-tail { transform: rotate(8deg) translateY(2px); }93509351.peach-chirp-bird-pose-hidden { opacity: 0; }93529353/* Chirp arcs ----------------------------------------------------------- */9354.peach-chirp-arcs {9355  position: absolute;9356  top: 18px;9357  width: 96px;9358  height: 70px;9359  pointer-events: none;9360}9361.peach-chirp-arcs-right { right: -60px; }9362.peach-chirp-arcs-left  { left: -60px; transform: scaleX(-1); }9363.peach-chirp-arc {9364  position: absolute;9365  top: 50%;9366  left: 0;9367  width: 40px;9368  height: 40px;9369  margin-top: -20px;9370  border: 1.2px solid #f4d5a8;9371  border-color: transparent #f4d5a8 transparent transparent;9372  border-radius: 50%;9373  opacity: 0;9374  animation: peach-chirp-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9375}9376@keyframes peach-chirp-arc-expand {9377  0%   { transform: scale(0.4); opacity: 0; }9378  20%  { opacity: 0.9; }9379  100% { transform: scale(1.6); opacity: 0; }9380}93819382/* Flight wave ---------------------------------------------------------- */9383.peach-chirp-flight-track {9384  position: absolute;9385  inset: 32px 36px 38px 36px;9386  pointer-events: none;9387}9388.peach-chirp-flight-wave {9389  position: absolute;9390  top: 8px;9391  left: 76px;9392  right: 76px;9393  height: 60px;9394  width: auto;9395  opacity: 0;9396  transition: opacity 0.15s ease;9397  stroke: #f4d5a8;9398  fill: none;9399}9400.peach-chirp-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9401.peach-chirp-flight-wave.is-visible { opacity: 1; }9402.peach-chirp-flight-path,9403.peach-chirp-flight-path-2 {9404  stroke-dasharray: 240;9405  stroke-dashoffset: 240;9406  stroke-linecap: round;9407  fill: none;9408}9409.peach-chirp-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9410.peach-chirp-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9411.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path {9412  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9413}9414.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path-2 {9415  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9416}9417@keyframes peach-chirp-fly {9418  0%   { stroke-dashoffset: 240; opacity: 0; }9419  20%  { opacity: 1; }9420  100% { stroke-dashoffset: -120; opacity: 0; }9421}94229423/* Connection dot ------------------------------------------------------- */9424.peach-chirp-dot {9425  position: absolute;9426  top: 50%; left: 50%;9427  transform: translate(-50%, -50%);9428  width: 40px; height: 40px;9429  opacity: 0;9430  pointer-events: none;9431  transition: opacity 0.3s ease;9432  color: var(--peach-accent);9433}9434.peach-chirp-dot.is-visible { opacity: 1; }9435.peach-chirp-dot-glow {9436  position: absolute; top: 50%; left: 50%;9437  transform: translate(-50%, -50%);9438  width: 38px; height: 38px;9439  border-radius: 50%;9440  filter: blur(10px);9441  opacity: 0.55;9442  background: var(--peach-accent);9443  animation: peach-chirp-dot-bloom 1.4s ease-out;9444}9445.peach-chirp-dot-core {9446  position: absolute; top: 50%; left: 50%;9447  transform: translate(-50%, -50%);9448  width: 8px; height: 8px;9449  border-radius: 50%;9450  background: var(--peach-accent);9451  box-shadow: 0 0 12px currentColor;9452  animation: peach-chirp-dot-core 1.4s ease-out;9453}9454.peach-chirp-dot-ring {9455  position: absolute; top: 50%; left: 50%;9456  width: 60px; height: 60px;9457  transform: translate(-50%, -50%);9458  animation: peach-chirp-dot-ring 1.4s linear;9459  stroke: var(--peach-accent);9460}9461@keyframes peach-chirp-dot-bloom {9462  0%   { width: 4px; height: 4px; opacity: 0; }9463  35%  { width: 60px; height: 60px; opacity: 0.7; }9464  100% { width: 38px; height: 38px; opacity: 0.55; }9465}9466@keyframes peach-chirp-dot-core {9467  0%   { width: 0; height: 0; }9468  35%  { width: 12px; height: 12px; }9469  100% { width: 8px; height: 8px; }9470}9471@keyframes peach-chirp-dot-ring {9472  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9473  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9474  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9475}94769477/* Motes — drift upward across the stage */9478.peach-chirp-motes {9479  position: absolute;9480  inset: 0;9481  pointer-events: none;9482}9483.peach-chirp-mote {9484  position: absolute;9485  width: 2px; height: 2px;9486  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9487  border-radius: 50%;9488  bottom: 32px;9489  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9490  opacity: 0;9491  animation: peach-chirp-mote-drift 6s linear infinite;9492  animation-delay: calc(var(--mote-i, 0) * 0.7s);9493}9494@keyframes peach-chirp-mote-drift {9495  0%   { transform: translateY(0); opacity: 0; }9496  10%  { opacity: 0.6; }9497  90%  { opacity: 0.1; }9498  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9499}95009501/* Status copy ---------------------------------------------------------- */9502.peach-chirp-copy-host {9503  margin: 4px 4px 10px;9504  text-align: center;9505  min-height: 50px;9506}9507.peach-chirp-copy {9508  animation: peach-chirp-copy-in 0.35s ease both;9509}9510@keyframes peach-chirp-copy-in {9511  from { opacity: 0; transform: translateY(4px); }9512  to   { opacity: 1; transform: translateY(0); }9513}9514.peach-chirp-headline {9515  font-family: var(--font-display, Georgia, serif);9516  font-style: italic;9517  font-size: 20px;9518  font-weight: 500;9519  line-height: 1.2;9520  letter-spacing: 0.005em;9521  color: var(--peach-t0);9522  margin-bottom: 6px;9523}9524.peach-chirp-copy-listening .peach-chirp-headline,9525.peach-chirp-copy-chirping .peach-chirp-headline,9526.peach-chirp-copy-idle .peach-chirp-headline {9527  font-family: inherit;9528  font-style: normal;9529  font-weight: 500;9530  font-size: 15px;9531  color: var(--peach-t0);9532  letter-spacing: 0;9533}9534.peach-chirp-copy-paired .peach-chirp-headline {9535  color: var(--peach-t0);9536  font-weight: 600;9537}9538.peach-chirp-sub {9539  font-size: 12.5px;9540  line-height: 1.45;9541  color: var(--peach-t1);9542  max-width: 280px;9543  margin: 0 auto;9544  text-wrap: pretty;9545}95469547/* Status action -------------------------------------------------------- */9548.peach-chirp-action {9549  margin: 2px 4px 10px;9550  margin-top: auto;9551  display: flex;9552  flex-direction: column;9553  gap: 8px;9554}9555.peach-chirp-mic-notice {9556  margin: 0;9557  font-size: 0.625rem;9558  color: var(--peach-t2);9559  line-height: 1.4;9560}9561.peach-chirp-action-waiting {9562  display: flex;9563  align-items: center;9564  justify-content: space-between;9565  gap: 12px;9566}9567.peach-chirp-cancel {9568  min-width: 96px;9569}9570.peach-chirp-listening {9571  display: inline-flex; align-items: center; gap: 4px;9572  font-family: var(--peach-mono, ui-monospace, monospace);9573  font-size: 9.5px;9574  text-transform: uppercase;9575  letter-spacing: 0.12em;9576  color: var(--peach-t1);9577  padding: 8px 10px;9578}9579.peach-chirp-listen-dot {9580  width: 4px; height: 4px;9581  border-radius: 50%;9582  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9583  animation: peach-chirp-listen-pulse 1.2s ease-in-out infinite;9584}9585.peach-chirp-listen-dot:nth-child(2) { animation-delay: 0.2s; }9586.peach-chirp-listen-dot:nth-child(3) { animation-delay: 0.4s; }9587.peach-chirp-listen-label { margin-left: 6px; }9588@keyframes peach-chirp-listen-pulse {9589  0%, 100% { opacity: 0.25; transform: scale(0.9); }9590  50%      { opacity: 1;     transform: scale(1.15); }9591}95929593.peach-chirp-action-handshake {9594  display: flex;9595  flex-direction: column;9596  align-items: center;9597  gap: 8px;9598  padding: 8px 4px;9599}9600.peach-chirp-meter {9601  width: 100%;9602  max-width: 280px;9603  height: 2px;9604  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9605  border-radius: 2px;9606  position: relative;9607  overflow: hidden;9608}9609.peach-chirp-meter-bar {9610  position: absolute;9611  top: 0; bottom: 0;9612  width: 30%;9613  left: -30%;9614  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9615  animation: peach-chirp-meter-sweep 1.4s ease-in-out infinite;9616}9617@keyframes peach-chirp-meter-sweep {9618  0%   { left: -30%; }9619  100% { left: 100%; }9620}9621.peach-chirp-meter-label {9622  font-family: var(--peach-mono, ui-monospace, monospace);9623  font-size: 9.5px;9624  text-transform: uppercase;9625  letter-spacing: 0.14em;9626  color: var(--peach-t1);9627}96289629.peach-chirp-action-paired {9630  display: flex;9631  align-items: center;9632  gap: 10px;9633}9634.peach-chirp-device-confirm {9635  flex: 1;9636  display: inline-flex;9637  align-items: center;9638  gap: 8px;9639  padding: 9px 10px 9px 12px;9640  border-radius: 10px;9641  background: color-mix(in srgb, #76b6e8 12%, transparent);9642  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9643  font-size: 12.5px;9644  color: var(--peach-t0);9645  min-width: 0;9646}9647.peach-chirp-device-confirm-glyph {9648  display: inline-flex;9649  color: #76b6e8;9650}9651.peach-chirp-device-confirm-name {9652  flex: 1;9653  overflow: hidden;9654  text-overflow: ellipsis;9655  white-space: nowrap;9656}9657.peach-chirp-device-confirm-trust {9658  font-family: var(--peach-mono, ui-monospace, monospace);9659  font-size: 9.5px;9660  text-transform: uppercase;9661  letter-spacing: 0.1em;9662  color: #76b6e8;9663  padding: 2px 6px;9664  border-radius: 4px;9665  background: color-mix(in srgb, #76b6e8 14%, transparent);9666}9667.peach-chirp-done {9668  min-width: 80px;9669}9670.peach-chirp-retry {9671  align-self: center;9672  display: block;9673  margin: 6px auto 0;9674  min-width: 120px;9675}9676.peach-chirp-mic-help {9677  font-size: 12px;9678  color: var(--peach-t1);9679  text-align: center;9680  max-width: 320px;9681  margin: 0 auto;9682}96839684/* Rest state — bird stage at idle pose, primary CTA + paired list */9685.peach-chirp-pair[data-phase="idle"] .peach-chirp-stage {9686  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9687  height: 160px;9688}9689.peach-chirp-pair-start {9690  width: 100%;9691  display: inline-flex;9692  align-items: center;9693  justify-content: center;9694  gap: 8px;9695  padding: 11px 14px;9696  border-radius: 10px;9697  background: var(--peach-accent);9698  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9699  color: #1a0905;9700  font-family: inherit;9701  font-size: 13px;9702  font-weight: 600;9703  letter-spacing: 0.01em;9704  cursor: pointer;9705  transition: filter 0.15s ease, transform 0.1s ease;9706}9707.peach-chirp-pair-start:hover { filter: brightness(1.08); }9708.peach-chirp-pair-start:active { transform: translateY(1px); }97099710.peach-chirp-paired-section {9711  margin-top: 14px;9712  display: flex;9713  flex-direction: column;9714  gap: 8px;9715}9716.peach-chirp-paired-heading {9717  margin: 0;9718  font-family: var(--peach-mono, ui-monospace, monospace);9719  font-size: 10px;9720  font-weight: 500;9721  letter-spacing: 0.14em;9722  text-transform: uppercase;9723  color: var(--peach-t1);9724}97259726/* Footer --------------------------------------------------------------- */9727.peach-chirp-foot {9728  margin: 10px -4px -2px;9729  margin-top: auto;9730}9731.peach-chirp-foot-divider {9732  height: 1px;9733  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9734  margin-bottom: 10px;9735}9736.peach-chirp-foot-text {9737  font-size: 11px;9738  line-height: 1.5;9739  color: var(--peach-t1);9740  text-align: center;9741  padding: 0 4px;9742  text-wrap: pretty;9743}97449745/* Screen-reader-only live region. Kept off the visual flow but read by9746   assistive tech as the pairing phase advances. */9747.peach-sr-only {9748  position: absolute;9749  width: 1px; height: 1px;9750  padding: 0; margin: -1px;9751  overflow: hidden;9752  clip: rect(0, 0, 0, 0);9753  white-space: nowrap;9754  border: 0;9755}97569757/* Reduced motion — stage simplifies to opacity transitions only */9758@media (prefers-reduced-motion: reduce) {9759  .peach-chirp-bird-body,9760  .peach-chirp-bird-head-group,9761  .peach-chirp-bird-beak,9762  .peach-chirp-bird-wing,9763  .peach-chirp-bird-tuft,9764  .peach-chirp-bird-tail,9765  .peach-chirp-bird-eye-group,9766  .peach-chirp-bird-aura,9767  .peach-chirp-arc,9768  .peach-chirp-flight-path,9769  .peach-chirp-flight-path-2,9770  .peach-chirp-dot-glow,9771  .peach-chirp-dot-core,9772  .peach-chirp-dot-ring,9773  .peach-chirp-mote,9774  .peach-chirp-meter-bar,9775  .peach-chirp-listen-dot,9776  .peach-chirp-bird-slot,9777  .peach-chirp-bird-slot-mobile {9778    animation: none !important;9779    transition: opacity 0.2s linear !important;9780  }9781}97829783/* ─────────────────────────────────────────────────────────────────9784   Settings → Sync surface (v3 ChirpSync). Wraps the same bird9785   animation used by the pairing flow with a paired-devices list and9786   the "Pair a device" CTA.9787   ───────────────────────────────────────────────────────────────── */9788.peach-chirp-settings {9789  position: absolute;9790  inset: 0;9791  z-index: 3;9792  display: flex;9793  flex-direction: column;9794  gap: 18px;9795  padding: 14px 12px 12px;9796  width: 100%;9797  box-sizing: border-box;9798  overflow-y: auto;9799  overflow-x: hidden;9800  /* Same warm Chirp surface as the pairing screen — unifies the two views. */9801  background:9802    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9803    var(--peach-bg);9804  color: var(--peach-t0);9805  isolation: isolate;9806  /* Hide native scrollbar — content fits 99% of the time and a chunky9807     gutter ruins the surface. */9808  scrollbar-width: none;9809  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9810}9811.peach-chirp-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9812.peach-chirp-settings::before {9813  content: '';9814  position: absolute;9815  inset: 0;9816  pointer-events: none;9817  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9818  z-index: 0;9819}9820.peach-chirp-settings > * { position: relative; z-index: 1; }98219822.peach-chirp-settings--pairing {9823  padding: 0;9824  align-items: stretch;9825  justify-content: stretch;9826  background: none;9827  isolation: auto;9828}9829.peach-chirp-settings--pairing::before { display: none; }98309831.peach-chirp-settings-header {9832  display: flex;9833  align-items: center;9834  gap: 10px;9835}9836.peach-chirp-settings-title {9837  margin: 0;9838  font-family: var(--font-display, Georgia, serif);9839  font-style: italic;9840  font-size: 24px;9841  font-weight: 500;9842  line-height: 1;9843  color: var(--peach-t0);9844  letter-spacing: 0.005em;9845}9846.peach-chirp-settings-section {9847  margin: 6px 0 -4px;9848  font-size: 11px;9849  font-weight: 600;9850  letter-spacing: 0.08em;9851  text-transform: uppercase;9852  color: var(--peach-text-muted);9853}9854.peach-chirp-settings-error {9855  font-size: 12px;9856  padding: 8px 10px;9857  border-radius: 8px;9858  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);9859  color: var(--peach-text);9860}9861.peach-chirp-settings-footer {9862  margin-top: auto;9863  padding-top: 18px;9864  font-size: 11.5px;9865  line-height: 1.5;9866  color: var(--peach-text-muted);9867  text-align: center;9868}98699870/* Hero card shown when no devices are paired yet. */9871.peach-chirp-hero {9872  display: flex;9873  flex-direction: column;9874  align-items: center;9875  gap: 12px;9876  padding: 20px 12px 8px;9877  text-align: center;9878}9879.peach-chirp-hero-svg {9880  display: block;9881  max-width: 100%;9882  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));9883}9884.peach-chirp-hero-headline {9885  margin: 0;9886  font-family: var(--font-display, Georgia, serif);9887  font-style: italic;9888  font-size: 20px;9889  font-weight: 500;9890  line-height: 1.2;9891  letter-spacing: 0.005em;9892  color: var(--peach-t0);9893}9894.peach-chirp-hero-sub {9895  margin: 0;9896  font-size: 13px;9897  line-height: 1.5;9898  color: var(--peach-t1);9899  max-width: 320px;9900  text-wrap: pretty;9901}99029903.peach-chirp-pair-cta {9904  display: flex;9905  justify-content: center;9906  padding: 4px 0 6px;9907}9908.peach-chirp-pair-button {9909  display: inline-flex;9910  align-items: center;9911  gap: 8px;9912  min-width: 220px;9913  justify-content: center;9914}9915.peach-chirp-pair-button-icon {9916  flex: 0 0 auto;9917}99189919/* Paired devices list. Roomy rows that look at home next to the rest9920   of Settings; stale rows get a soft warm-warning border tint. */9921.peach-chirp-device-list {9922  list-style: none;9923  margin: 0;9924  padding: 0;9925  display: flex;9926  flex-direction: column;9927  gap: 8px;9928}9929.peach-chirp-device-row {9930  display: flex;9931  align-items: center;9932  gap: 12px;9933  padding: 12px;9934  border-radius: 10px;9935  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9936  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);9937}9938.peach-chirp-device-row[data-stale="true"] {9939  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);9940}9941.peach-chirp-device-icon {9942  width: 32px;9943  height: 32px;9944  display: flex;9945  align-items: center;9946  justify-content: center;9947  border-radius: 8px;9948  color: var(--peach-text);9949  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);9950}9951.peach-chirp-device-info {9952  flex: 1;9953  display: flex;9954  flex-direction: column;9955  gap: 2px;9956  min-width: 0;9957}9958.peach-chirp-device-name {9959  font-size: 14px;9960  font-weight: 600;9961  color: var(--peach-text);9962  overflow: hidden;9963  text-overflow: ellipsis;9964  white-space: nowrap;9965}9966.peach-chirp-device-meta {9967  font-size: 11.5px;9968  color: var(--peach-text-muted);9969  display: flex;9970  flex-wrap: wrap;9971  align-items: center;9972  gap: 8px;9973}9974.peach-chirp-device-badge {9975  font-size: 10.5px;9976  font-weight: 500;9977  letter-spacing: 0.02em;9978  padding: 2px 6px;9979  border-radius: 999px;9980  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);9981  color: var(--peach-text);9982}9983.peach-chirp-device-stale {9984  font-size: 10.5px;9985  font-weight: 500;9986  color: var(--peach-warn, #d29257);9987}9988.peach-chirp-device-remove {9989  flex: 0 0 auto;9990  color: var(--peach-text-muted);9991}9992.peach-chirp-device-remove:hover {9993  color: var(--peach-danger, #c25b4a);9994}9995.peach-chirp-unpair-confirm {9996  display: flex;9997  gap: 6px;9998  align-items: center;9999}1000010001/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */10002.peach-chirp-pro-card {10003  position: relative;10004  margin: 18px 12px;10005  padding: 18px 20px 22px;10006  border-radius: 22px;10007  background:10008    radial-gradient(140% 90% at 50% 0%,10009      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,10010      transparent 60%),10011    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10012  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);10013  box-shadow:10014    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,10015    0 18px 40px -24px rgba(0, 0, 0, 0.45);10016  display: flex;10017  flex-direction: column;10018  align-items: center;10019  gap: 10px;10020  text-align: center;10021  overflow: hidden;10022}10023.peach-chirp-pro-stage {10024  position: relative;10025  width: 220px;10026  height: 140px;10027  display: flex;10028  align-items: flex-end;10029  justify-content: center;10030  margin-bottom: 2px;10031}10032.peach-chirp-pro-bird-slot {10033  width: 140px;10034  height: 132px;10035  display: flex;10036  align-items: flex-end;10037  justify-content: center;10038  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));10039}10040.peach-chirp-pro-bird-slot .peach-chirp-bird {10041  width: 100%;10042  height: 100%;10043}10044.peach-chirp-pro-bird-slot .peach-chirp-bird svg {10045  width: 100%;10046  height: 100%;10047  overflow: visible;10048}10049.peach-chirp-pro-chirp {10050  position: absolute;10051  top: 14px;10052  right: 8px;10053  width: 96px;10054  height: 80px;10055  color: var(--peach-accent);10056  animation: peach-chirp-pulse 2.6s ease-in-out infinite;10057  transform-origin: 0% 50%;10058  pointer-events: none;10059}10060@keyframes peach-chirp-pulse {10061  0%, 100% { opacity: 0.35; transform: translateX(0) scale(0.92); }10062  45%      { opacity: 1;    transform: translateX(2px) scale(1); }10063  70%      { opacity: 0.6;  transform: translateX(4px) scale(1.04); }10064}10065@media (prefers-reduced-motion: reduce) {10066  .peach-chirp-pro-chirp { animation: none; opacity: 0.7; }10067}10068.peach-chirp-pro-headline {10069  margin: 4px 0 0;10070  font-family: var(--font-display, "Cormorant Garamond", serif);10071  font-style: italic;10072  font-size: 19px;10073  font-weight: 500;10074  letter-spacing: 0.01em;10075  color: var(--peach-t0);10076  max-width: 280px;10077  line-height: 1.25;10078}10079.peach-chirp-pro-body {10080  margin: 0;10081  font-size: 13px;10082  line-height: 1.55;10083  color: var(--peach-t1);10084  max-width: 300px;10085}10086.peach-chirp-pro-cta {10087  margin-top: 4px;10088}10089.peach-chirp-pro-foot {10090  margin: 2px 0 0;10091  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10092  font-size: 0.625rem;10093  letter-spacing: 0.08em;10094  text-transform: uppercase;10095  color: var(--peach-t2);10096  opacity: 0.75;10097}1009810099/* Shell border and shadow in light mode: match dark mode's near-invisible10100   border weight so the popup frame looks the same in both themes. */10101.light .peach-shell,10102.light .peach-screen {10103  border-color: rgba(26, 18, 8, 0.07);10104  box-shadow:10105    0 2px 8px rgba(80, 56, 32, 0.08),10106    0 14px 48px rgba(80, 56, 32, 0.10),10107    0 0 0 1px rgba(26, 18, 8, 0.04);10108}