popup.css

1html,2body,3#app,4.popup-root {5  width: 320px;6  min-height: 520px;7  height: 520px;8  margin: 0;9}1011body {12  overflow: hidden;13  background: var(--bg);14  color: var(--t0);15  font-family: var(--font-ui);16  font-weight: 300;17  position: relative;18}1920* {21  box-sizing: border-box;22}2324button,25input,26textarea,27select {28  font: inherit;29}3031button {32  border: 0;33}3435.popup-root {36  position: relative;37  overflow: hidden;38}3940.peach-theme {41  color: var(--peach-t0);42  font-family: var(--font-ui);43  font-weight: 300;44  box-sizing: border-box;45  text-align: left;46}47.peach-theme, .peach-theme * { box-sizing: inherit; }4849.peach-brand-mark {50  width: 14px;51  height: 14px;52  flex-shrink: 0;53}5455.peach-status-pip.is-hidden {56  display: none;57}5859.peach-status-pip.unlocked {60  background: var(--peach-health-ok);61  box-shadow: 0 0 6px rgba(100, 210, 100, 0.6);62}6364.peach-status-pip.pulse {65  animation: pip-pulse 400ms var(--peach-curve-settle) both;66}6768/* Shell */69.peach-shell, .peach-screen {70  background:71    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),72    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),73    var(--peach-bg);74  border: 1px solid var(--peach-t3);75  box-shadow:76    0 2px 8px rgba(0,0,0,0.55),77    0 14px 48px rgba(0,0,0,0.7),78    0 0 0 1px rgba(240,232,216,0.04);79  overflow: hidden;80}81.peach-shell {82  display: grid;83  grid-template-rows: auto 1fr;84  min-height: 520px;85  position: relative;86  isolation: isolate;87}8889.peach-shell[data-surface="extension"] {90  width: min(320px, 100vw);91  border-radius: 0;92  height: 520px;93  max-height: 520px;94  overflow: hidden;95}9697/* ── Lock screen – full-window lock/create stage ── */98.lock-screen--vault-stage {99  display: flex;100  flex-direction: column;101  gap: 18px;102  padding: 20px 18px 18px;103  justify-content: flex-start;104}105.lock-screen--vault-stage .peach-lock-panel {106  margin-top: auto;107}108.peach-lock-headline--unlock {109  max-width: 220px;110}111.peach-lock-hero--unlock {112  padding-top: 14px;113}114.peach-lock-panel--unlock {115  gap: 10px;116}117118.peach-lock-restore-link {119  background: transparent;120  border: none;121  cursor: pointer;122  font-family: var(--font-mono);123  font-size: 0.625rem;124  letter-spacing: 0.08em;125  color: var(--t1);126  padding: 5px 0;127  text-align: left;128  transition: color 150ms ease;129}130131.peach-lock-restore-link:hover {132  color: var(--t0);133}134.peach-shell[data-surface="extension"] .peach-stage {135  min-height: 250px;136}137138/* Screen (unlock) */139.peach-screen {140  width: min(320px, 100vw);141  min-height: 100%;142  height: 100%;143  border-radius: 0;144  padding: 16px 20px 18px;145  display: grid;146  gap: 14px;147}148.peach-screen[data-motion-phase="enter"] {149  animation: peach-screen-enter var(--peach-dur-600) var(--peach-curve-arrival) both;150}151.peach-screen-header { min-height: 20px; }152153/* Wordmark */154.peach-wordmark {155  margin: 0;156  font-family: var(--font-display);157  font-size: 0.9375rem;158  font-style: italic;159  letter-spacing: 0.03em;160  color: var(--peach-t0);161  display: inline-flex;162  min-height: 1em;163}164165/* Motion text / char animation */166.peach-motion-text { display: inline-flex; min-height: 1em; }167.peach-motion-char {168  display: inline-block;169  white-space: pre;170  opacity: 0;171  transform: translateY(0.22em);172  animation: peach-char-enter var(--peach-motion-duration, 380ms) var(--peach-curve-arrival) forwards;173  animation-delay: calc(var(--peach-char-index, 0) * 20ms);174}175176/* Chrome */177.peach-chrome {178  position: relative;179  z-index: 10;180  padding: 16px 20px 0;181  display: flex;182  justify-content: space-between;183  align-items: center;184  /* z-index:10 keeps the header icons above `.peach-loading` (Suspense185     fallback) per §15 regression guard. Without pointer-events:none, the186     empty header strip also sits above `.peach-overlay-view` (z-index:2)187     and swallows clicks meant for an overlay's back button / top search. */188  pointer-events: none;189}190.peach-chrome .peach-btn { pointer-events: auto; }191.peach-chrome.is-hidden-for-overlay,192.peach-search-wrap.is-hidden-for-overlay {193  opacity: 0;194  visibility: hidden;195  pointer-events: none;196}197/* Chirp-sync owns its own surface and header — fully collapse the global198   chrome row so the warm gradient reaches the popup edge. */199.peach-chrome.is-collapsed,200.peach-search-wrap.is-collapsed {201  display: none;202}203.peach-wordmark-wrap { display: flex; align-items: center; gap: 5px; }204.peach-status-pip {205  width: 5px;206  height: 5px;207  border-radius: 50%;208  background: var(--peach-t3);209  display: inline-flex;210  flex-shrink: 0;211  transition: background 400ms ease, box-shadow 400ms ease;212}213.peach-chrome-actions { display: flex; gap: 6px; }214215/* Shell body */216.peach-shell-body {217  position: relative;218  display: grid;219  grid-template-rows: 1fr auto;220  min-height: 0;221  min-width: 0;222  width: 100%;223  overflow: hidden;224  height: 100%;225}226.peach-shell-veil {227  position: absolute; inset: 0;228  background: #000; opacity: 0;229  pointer-events: none; z-index: 1;230}231.peach-shell[data-motion-phase="enter"] .peach-shell-body {232  animation: peach-shell-fade-in var(--peach-dur-600) var(--peach-curve-arrival) both;233}234.peach-shell[data-motion-phase="exit"] .peach-shell-veil {235  animation: peach-veil-in 300ms var(--peach-curve-departure) forwards;236}237238/* Content frame */239.peach-content-frame {240  display: grid;241  grid-template-rows: 1fr auto;242  grid-template-columns: minmax(0, 1fr);243  align-content: start;244  min-height: 0;245  min-width: 0;246  overflow: hidden;247  transition: opacity 80ms ease, transform 80ms ease;248}249.peach-content-frame.navigating {250  opacity: 0.93;251  transform: translateX(2px);252}253.peach-content-frame[data-content-phase="enter"] {254  animation: peach-content-enter 135ms ease-out both;255}256.peach-content-frame[data-content-phase="exit"] {257  animation: peach-content-exit 95ms ease-in forwards;258}259.peach-content-frame[data-content-phase="idle"] { opacity: 1; transform: none; }260261/* Stage */262.peach-stage {263  padding: 10px 20px 12px;264  display: grid;265  gap: 12px;266  align-content: start;267  min-width: 0;268  min-height: 0;269  max-width: 100%;270  overflow-y: auto;271  overflow-x: hidden;272  scrollbar-width: none;273  -ms-overflow-style: none;274  overscroll-behavior: contain;275}276.peach-stage::-webkit-scrollbar { display: none; }277278/* Entry name */279.peach-entry-name-wrap { position: relative; overflow: hidden; max-width: 100%; }280.peach-entry-header {281  position: relative;282  z-index: 1;283  display: flex;284  align-items: flex-start;285  gap: 6px;286  min-width: 0;287}288.peach-entry-header-name {289  flex: 1;290  min-width: 0;291}292.peach-entry-name {293  margin: 0;294  padding-bottom: 0.12em;295  font-family: var(--font-display);296  font-style: italic; font-weight: 400;297  font-size: 44px; line-height: 0.95;298  color: var(--peach-t0);299  display: -webkit-box;300  -webkit-line-clamp: 2;301  -webkit-box-orient: vertical;302  overflow: hidden;303  text-wrap: balance;304}305.peach-entry-name--lg { font-size: 40px; }306.peach-entry-name--xl { font-size: 34px; line-height: 0.98; }307.peach-entry-name--xxl { font-size: 30px; line-height: 1.02; }308.peach-entry-name-text { display: block; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; padding-bottom: 0.12em; }309310/* Trash icon in entry header */311.peach-entry-trash-btn {312  flex-shrink: 0;313  padding: 4px;314  margin-top: 4px;315  background: transparent;316  border: none;317  cursor: pointer;318  color: var(--peach-t2);319  border-radius: 4px;320  transition: color 140ms ease, background 140ms ease;321  display: flex;322  align-items: center;323  justify-content: center;324}325.peach-entry-trash-btn:hover {326  color: var(--peach-t1);327  background: var(--peach-t3);328}329.peach-entry-trash-confirm {330  display: flex;331  align-items: center;332  gap: 6px;333  flex-shrink: 0;334  margin-top: 6px;335  flex-wrap: nowrap;336}337.peach-entry-trash-confirm-label {338  font-family: var(--font-mono);339  font-size: 0.5625rem;340  letter-spacing: 0.1em;341  color: var(--peach-t2);342  white-space: nowrap;343}344.peach-entry-name-button {345  padding: 0;346  background: transparent;347  text-align: left;348  cursor: pointer;349  max-width: 100%;350  overflow: hidden;351  display: block;352}353.peach-entry-name-char {354  display: inline-block;355  white-space: pre;356  opacity: 0;357  transform: translateY(0.22em);358  animation: peach-char-enter 380ms var(--peach-curve-arrival) forwards;359  animation-delay: calc(var(--char-index, 0) * 20ms);360}361362/* Domain */363.peach-domain { border-top: 1px solid var(--peach-t3); padding-top: 9px; }364.peach-domain-row {365  width: 100%; border: 0; background: transparent; color: inherit;366  padding: 0; display: flex; justify-content: space-between; align-items: baseline;367  cursor: default;368}369.peach-domain-value {370  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;371  font-size: 0.625rem; font-style: italic;372  letter-spacing: 0.12em; color: var(--peach-t1);373}374375/* Fields */376.peach-fields { display: grid; gap: 10px; }377.peach-field-card { display: grid; gap: 7px; }378.peach-label {379  font-family: Inter, system-ui, sans-serif;380  text-transform: uppercase; letter-spacing: 0.2em;381  font-size: 0.5rem; color: var(--peach-t2);382}383.peach-add-field-btn {384  align-self: flex-start;385  background: none; border: none; padding: 2px 0;386  font-family: Inter, system-ui, sans-serif;387  font-size: 0.6875rem; color: var(--peach-accent);388  cursor: pointer; opacity: 0.75;389  letter-spacing: 0.02em;390}391.peach-add-field-btn:hover { opacity: 1; }392.peach-field-value-row {393  display: flex; justify-content: space-between;394  align-items: center; gap: 8px;395  min-width: 0;396}397.peach-field-value {398  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;399  font-size: 0.8125rem; color: var(--peach-t1);400  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;401  flex: 1;402  min-width: 0;403}404.peach-password-value {405  display: inline-flex;406  align-items: center;407  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;408  font-size: 1rem; letter-spacing: 0.3em; color: var(--peach-t0);409  overflow: hidden;410  text-overflow: ellipsis;411  white-space: nowrap;412  flex: 1;413  min-width: 0;414  max-width: 100%;415}416.peach-password-value.is-revealed {417  font-size: 0.875rem;418  letter-spacing: 0.08em;419}420.peach-password-text,421.peach-password-mask {422  display: block;423  width: 100%;424  overflow: hidden;425  white-space: nowrap;426  /* Render as uniform mid-line bullets, not baseline periods */427  font-family: Inter, system-ui, sans-serif;428  font-size: 0.625rem;429  letter-spacing: 3px;430  user-select: none;431}432.peach-field-actions { display: flex; gap: 4px; align-items: center; }433.peach-password-strength { display: flex; align-items: center; gap: 8px; }434.peach-strength-bar { display: flex; gap: 3px; }435.peach-strength-seg { width: 28px; height: 4px; border-radius: 2px; background: #eee; }436.peach-strength-label {437  font-family: "IBM Plex Mono", monospace;438  font-style: italic;439  font-size: 0.5625rem;440  font-weight: 300;441  min-width: 36px;442  text-align: right;443  color: var(--peach-t2);444  letter-spacing: 0.06em;445}446447.peach-strength-hairline {448  display: flex;449  align-items: center;450  gap: 10px;451  margin-top: -2px;452}453454.peach-strength-hairline-track {455  flex: 1;456  height: 3px;457  border-radius: 2px;458  background: var(--peach-s2);459  overflow: hidden;460}461462.peach-strength-hairline-fill {463  height: 100%;464  border-radius: 2px;465  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),466    background 400ms ease;467}468469/* Note content (display) */470.peach-note-content {471  border-top: 1px solid var(--peach-t3);472  padding-top: 10px;473  font-family: var(--font-display);474  font-size: 0.9375rem;475  line-height: 1.75;476  color: var(--peach-t1);477}478479/* ── Inline editing ─────────────────────────────────────────────────── */480481/* Clickable display values */482.peach-inline-clickable {483  cursor: text;484  border-radius: 3px;485  transition: background 150ms ease;486}487.peach-inline-clickable:hover {488  background: rgba(240, 232, 216, 0.05);489}490491/* Subtle "edit" hint that appears on hover */492.peach-inline-edit-hint {493  font-family: Inter, system-ui, sans-serif;494  font-size: 0.5625rem;495  text-transform: uppercase;496  letter-spacing: 0.14em;497  color: var(--peach-t2);498  opacity: 0;499  transition: opacity 120ms ease;500  pointer-events: none;501  margin-left: 6px;502  flex-shrink: 0;503}504.peach-domain-row:hover .peach-inline-edit-hint {505  opacity: 1;506}507508/* Title editing */509.peach-inline-title-wrap {510  display: flex;511  flex-direction: column;512  gap: 6px;513}514.peach-inline-title-input {515  font-family: var(--font-display);516  font-style: italic;517  font-weight: 400;518  font-size: 40px;519  line-height: 0.95;520  color: var(--peach-t0);521  background: transparent;522  border: none;523  border-bottom: 1px solid var(--peach-accent);524  outline: none;525  width: 100%;526  padding: 2px 0;527}528529/* Generic inline field */530.peach-inline-field-wrap {531  display: flex;532  flex-direction: column;533  gap: 6px;534}535.peach-inline-input {536  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;537  font-size: 0.8125rem;538  color: var(--peach-t0);539  background: transparent;540  border: none;541  border-bottom: 1px solid var(--peach-accent);542  outline: none;543  width: 100%;544  padding: 3px 0;545}546.peach-inline-textarea {547  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;548  font-size: 0.6875rem;549  line-height: 1.7;550  color: var(--peach-t0);551  background: rgba(240, 232, 216, 0.04);552  border: 1px solid var(--peach-accent);553  border-radius: 4px;554  outline: none;555  width: 100%;556  padding: 8px;557  resize: vertical;558  min-height: 80px;559}560561/* Save / cancel row */562.peach-inline-actions {563  display: flex;564  gap: 6px;565  align-items: center;566}567.peach-inline-save-btn,568.peach-inline-cancel-btn {569  display: inline-flex;570  align-items: center;571  justify-content: center;572  width: 26px;573  height: 26px;574  border-radius: 4px;575  border: none;576  cursor: pointer;577  transition: background 140ms ease, opacity 140ms ease;578  flex-shrink: 0;579}580.peach-inline-save-btn {581  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);582  color: var(--peach-accent);583}584.peach-inline-save-btn:hover:not(:disabled) {585  background: color-mix(in srgb, var(--peach-accent) 30%, transparent);586}587.peach-inline-cancel-btn {588  background: rgba(240, 232, 216, 0.06);589  color: var(--peach-t2);590}591.peach-inline-cancel-btn:hover:not(:disabled) {592  background: rgba(240, 232, 216, 0.12);593  color: var(--peach-t1);594}595.peach-inline-save-btn:disabled,596.peach-inline-cancel-btn:disabled {597  opacity: 0.4;598  cursor: not-allowed;599}600601/* Inline password generator wrapper */602.peach-inline-generator-wrap {603  margin-top: 10px;604  padding-top: 10px;605  border-top: 1px solid var(--peach-t3);606  display: flex;607  flex-direction: column;608  gap: 8px;609}610.peach-inline-generator-cancel {611  align-self: flex-start;612  font-size: 0.6875rem;613  color: var(--peach-t2);614}615616/* "is-editing" card state */617.peach-field-card.is-editing {618  background: rgba(240, 232, 216, 0.02);619  border-radius: 6px;620  padding: 8px;621  margin: -8px;622}623624/* Inline tag editor on Entry detail view */625.peach-inline-tag-editor {626  display: flex;627  flex-direction: column;628  gap: 6px;629}630631/* Quiet inline "+ add X" link in the entry detail body */632.peach-entry-add-link {633  justify-self: start;634  margin-top: 8px;635}636637/* Additional URLs editor revealed by clicking the URL field */638.peach-additional-urls {639  display: flex;640  flex-direction: column;641  gap: 6px;642  margin-top: 8px;643}644.peach-additional-urls-label {645  font-size: 0.5625rem;646  letter-spacing: 0.1em;647  text-transform: uppercase;648  color: var(--peach-t2);649  margin-bottom: 2px;650}651.peach-additional-url-row {652  display: flex;653  align-items: center;654  gap: 6px;655}656.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }657.peach-additional-url-remove {658  background: transparent;659  border: 1px solid var(--peach-t3);660  color: var(--peach-t2);661  width: 22px;662  height: 22px;663  border-radius: 4px;664  cursor: pointer;665  font-size: 0.875rem;666  line-height: 1;667  display: inline-flex;668  align-items: center;669  justify-content: center;670  flex-shrink: 0;671  transition: color 120ms ease, border-color 120ms ease;672}673.peach-additional-url-remove:hover:not(:disabled) {674  color: var(--peach-accent);675  border-color: var(--peach-border-accent);676}677.peach-additional-urls-add { align-self: flex-start; }678679/* Delete row */680.peach-entry-delete-row {681  display: flex;682  align-items: center;683  gap: 8px;684  padding-top: 18px;685  margin-top: 8px;686  border-top: 1px solid var(--peach-t3);687}688.peach-delete-btn {689  font-size: 0.6875rem;690  color: var(--peach-t2);691  padding: 4px 0;692}693.peach-delete-confirm-text {694  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;695  font-size: 0.6875rem;696  font-style: italic;697  color: var(--peach-t2);698  flex-shrink: 0;699}700701/* TOTP band */702.peach-totp-band {703  border-top: 1px solid var(--peach-t3);704  padding: 12px 20px 14px;705  position: relative;706  display: grid;707  grid-template-columns: 1fr auto;708  gap: 10px;709}710.peach-totp-main {711  min-width: 0;712  cursor: pointer;713  user-select: none;714}715.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }716.peach-totp-code-row {717  display: flex;718  align-items: flex-end;719  gap: 10px;720  min-width: 0;721}722.peach-totp-code {723  margin: 2px 0 0;724  font-family: var(--font-display);725  font-style: italic;726  font-weight: 300;727  font-size: 38px; color: var(--peach-accent);728  line-height: 0.95; min-height: 1em;729  min-width: 0;730}731.peach-totp-code-text {732  display: inline-flex;733  overflow: hidden;734  text-overflow: ellipsis;735  white-space: nowrap;736}737.peach-totp-copy-btn {738  margin-bottom: 2px;739  flex-shrink: 0;740  border-color: transparent;741}742.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }743.peach-totp-countdown {744  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;745  font-size: 22px; color: var(--peach-t1);746}747.peach-totp-ring { transform: rotate(-90deg); }748.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }749.peach-totp-ring-progress {750  fill: none; stroke: var(--peach-accent); stroke-width: 2;751  stroke-linecap: round;752  transition: stroke-dashoffset 1s linear, stroke 500ms ease;753}754/* Search bar */755.peach-search-wrap {756  border-top: 1px solid var(--peach-t3);757  background: var(--peach-s1);758  min-height: 54px; position: relative;759  box-shadow: inset 0 6px 18px transparent;760  transition: box-shadow 700ms ease;761}762.peach-search-wrap::before {763  content: "";764  position: absolute;765  left: 0;766  top: 0;767  height: 2px;768  width: var(--peach-totp-progress, 0%);769  background: var(--peach-accent);770  opacity: 0;771  transition: width 1s linear, opacity 180ms ease;772  pointer-events: none;773}774.peach-shell[data-totp-active="true"] .peach-search-wrap::before {775  opacity: 0.9;776}777.peach-shell[data-totp-active="true"] .peach-search-wrap {778  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);779}780781@keyframes peach-totp-code-flare {782  0%   { filter: brightness(1); }783  25%  { filter: brightness(1.3); }784  100% { filter: brightness(1); }785}786.peach-totp-code.is-hot {787  animation: peach-totp-code-flare 3000ms ease-in-out both;788}789.peach-search-bar {790  min-height: 54px;791  display: grid;792  grid-template-columns: auto minmax(0, 1fr) auto;793  align-items: center;794  gap: 8px; padding: 0 9px 0 12px;795}796.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }797.peach-search-input {798  border: 0; background: transparent; color: var(--peach-t0);799  font-family: var(--font-display);800  font-style: italic; font-size: 18px;801  outline: none; width: 100%; min-width: 0; padding: 0;802  caret-color: var(--peach-accent);803}804.peach-search-input::placeholder { color: var(--peach-t2); }805.peach-search-meta {806  display: grid;807  grid-auto-flow: column;808  align-items: center;809  justify-content: end;810  gap: 6px;811  min-width: max-content;812}813.peach-search-counter {814  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;815  font-size: 0.625rem; color: var(--peach-t2);816  display: inline-flex;817  align-items: center;818  line-height: 1;819}820.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }821822/* Buttons */823.peach-btn {824  border: 1px solid transparent; border-radius: 12px;825  background: transparent; color: var(--peach-t0);826  font-family: Inter, system-ui, sans-serif;827  font-size: 0.75rem; letter-spacing: 0.02em; padding: 8px 12px;828  cursor: pointer;829  transition:830    background-color var(--peach-dur-80) var(--peach-curve-arrival),831    color var(--peach-dur-80) var(--peach-curve-arrival),832    border-color var(--peach-dur-150) var(--peach-curve-arrival);833}834.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }835.peach-btn:disabled {836  opacity: 0.45;837  cursor: not-allowed;838}839.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 0.6875rem; }840.peach-btn--md { min-height: 38px; }841.peach-btn--accent {842  background: var(--peach-accent);843  color: rgba(0,0,0,0.92);844  font-weight: 500;845  box-shadow:846    0 1px 0 rgba(255,255,255,0.08) inset,847    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),848    0 3px 16px var(--peach-glow),849    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);850}851.peach-btn--accent:hover:not(:disabled) {852  background: var(--peach-accent);853  filter: brightness(1.10) saturate(1.05);854  box-shadow:855    0 1px 0 rgba(255,255,255,0.10) inset,856    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),857    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),858    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);859}860.peach-btn--ghost:not(.peach-icon-btn) { border-color: var(--peach-t3); color: var(--peach-t1); }861.peach-btn--ghost.peach-icon-btn { color: var(--peach-t1); }862.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }863.peach-icon-btn {864  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;865  display: inline-flex; align-items: center; justify-content: center;866  border-color: transparent;867  transition:868    color var(--peach-dur-80) var(--peach-curve-arrival),869    box-shadow var(--peach-dur-150) var(--peach-curve-arrival),870    background-color var(--peach-dur-80) var(--peach-curve-arrival);871}872.peach-icon-btn:hover:not(:disabled) {873  background: transparent;874  color: var(--peach-accent);875  box-shadow: 0 0 12px color-mix(in srgb, var(--peach-accent) 28%, transparent),876              0 0 4px color-mix(in srgb, var(--peach-accent) 16%, transparent);877}878879.peach-btn:focus-visible {880  outline: none;881  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);882}883884/* Lock button */885.peach-lock-icon { transform-origin: center; }886.peach-lock-btn { color: var(--peach-accent); }887.peach-lock-btn.is-locking .peach-lock-icon {888  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);889}890891/* Biometric unlock button */892.peach-biometric-btn {893  display: flex;894  align-items: center;895  justify-content: center;896  gap: 6px;897  margin-top: 8px;898  width: 100%;899}900901/* Copy button */902.peach-copy-btn {903  position: relative; overflow: hidden;904  color: var(--peach-t2); border-color: var(--peach-t3);905}906.peach-copy-icon {907  display: inline-flex; align-items: center; justify-content: center;908  position: relative; z-index: 1;909}910.peach-copy-icon-svg { display: block; }911.peach-copy-sheen {912  position: absolute; inset: 0;913  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--peach-accent) 18%, transparent) 30%, color-mix(in srgb, var(--peach-accent) 8%, transparent) 100%);914  opacity: 0; transform: scaleX(0.15); transform-origin: left center;915}916.peach-copy-btn.is-copied {917  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;918  box-shadow:919    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),920    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),921    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);922}923.peach-copy-btn.is-copied .peach-copy-icon {924  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;925}926.peach-copy-btn.is-copied .peach-copy-sheen {927  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;928}929.peach-copy-btn.is-retreat {930  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;931}932.peach-copy-btn.is-retreat .peach-copy-sheen {933  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;934}935.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }936.peach-copy-drain-bar {937  display: block; width: 100%; height: 100%;938  background: var(--peach-accent); opacity: 0.7;939  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;940}941942/* Unlock screen elements */943.peach-underline-input {944  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);945  padding: 6px 0; background: transparent; color: var(--peach-t0);946  outline: none;947  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;948  font-size: 0.8125rem;949  caret-color: var(--peach-accent);950}951.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }952.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }953.peach-hint {954  margin: 0;955  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;956  font-size: 0.625rem; color: var(--peach-t2);957}958.peach-unlock-footer {959  margin-top: 4px; display: flex; align-items: center; gap: 7px;960  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;961  font-size: 0.625rem; color: var(--peach-t2);962}963.peach-unlock-footer--lock {964  padding-top: 2px;965}966967/* Breach badge */968.peach-breach-badge {969  display: flex;970  position: relative;971  z-index: 1;972  align-items: center;973  gap: 7px;974  font-size: 0.5625rem;975  color: var(--peach-breach);976  padding: 5px 10px;977  margin-bottom: 4px;978  border-radius: 8px;979  background: rgba(220, 80, 60, 0.07);980  border: 1px solid rgba(220, 80, 60, 0.18);981  letter-spacing: 0.04em;982}983984.peach-password-value.is-breached {985  color: rgba(220, 80, 60, 0.75);986  border-bottom: 1px solid rgba(220, 80, 60, 0.22);987}988989/* ── Overlay views ─────────────────────────────────────────────────── */990.peach-overlay-view {991  position: absolute;992  inset: 0;993  display: flex;994  flex-direction: column;995  background:996    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),997    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),998    var(--peach-bg);999  z-index: 2;1000  overflow: hidden;1001  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1002}10031004.peach-overlay-view:has(.stk-shell) {1005  background: var(--peach-bg);1006}1007@keyframes overlay-in {1008  from { opacity: 0; transform: translateY(8px); }1009  to   { opacity: 1; transform: translateY(0); }1010}1011.peach-overlay-view.ov-enter-up {1012  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1013}1014.peach-overlay-view.ov-exit-up {1015  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1016}1017.peach-overlay-view.ov-enter-right {1018  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1019}1020.peach-overlay-view.ov-exit-right {1021  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1022}10231024@keyframes ov-enter-up {1025  from { opacity: 0; transform: translateY(18px); }1026  to   { opacity: 1; transform: translateY(0); }1027}1028@keyframes ov-exit-up {1029  from { opacity: 1; transform: translateY(0); }1030  to   { opacity: 0; transform: translateY(-12px); }1031}1032@keyframes ov-enter-right {1033  from { opacity: 0; transform: translateX(20px); }1034  to   { opacity: 1; transform: translateX(0); }1035}1036@keyframes ov-exit-right {1037  from { opacity: 1; transform: translateX(0); }1038  to   { opacity: 0; transform: translateX(20px); }1039}10401041/* Overlay shared header */1042.peach-overlay-header {1043  padding: 10px 12px 8px;1044  display: flex;1045  align-items: center;1046  gap: 10px;1047  flex-shrink: 0;1048}1049/* Back button — circular pill matching the settings stack masthead (.stk-back) */1050.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1051  width: 28px;1052  height: 28px;1053  flex: 0 0 28px;1054  border-radius: 999px;1055  border: 1px solid var(--peach-border);1056  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1057  color: var(--peach-t1);1058  padding: 0;1059}1060.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1061  color: var(--peach-t0);1062  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1063  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1064}1065.peach-overlay-title {1066  font-family: var(--font-display);1067  font-style: italic;1068  font-weight: 400;1069  font-size: 20px;1070  line-height: 1;1071  color: var(--peach-t0);1072  flex: 1;1073  text-align: center;1074}1075/* Balances the 28px back button so the title stays visually centred */1076.peach-overlay-spacer {1077  width: 28px;1078  flex: 0 0 28px;1079}10801081.peach-overlay-card {1082  background: var(--peach-s1);1083  border: 1px solid var(--peach-t3);1084  border-radius: 12px;1085  overflow: hidden;1086  width: 100%;1087}10881089.peach-onboarding-alt-actions {1090  display: flex;1091  flex-direction: column;1092  gap: 4px;1093  padding: 0;1094}10951096.peach-settings-copy {1097  margin: 0 0 10px;1098  font-size: 0.6875rem;1099  line-height: 1.5;1100  color: var(--peach-t2);1101}11021103.peach-settings-copy strong {1104  color: var(--peach-t0);1105}11061107.peach-settings-copy--spacious {1108  margin-bottom: 12px;1109}11101111.peach-settings-copy--result {1112  color: var(--peach-accent);1113  font-size: 0.8125rem;1114  text-align: center;1115  padding: 8px 0;1116}11171118.peach-settings-copy--danger {1119  color: var(--peach-breach);1120}11211122.peach-settings-copy--success {1123  color: var(--peach-accent);1124}11251126.peach-inline-feedback {1127  font-size: 0.6875rem;1128  margin: 10px 0 0;1129}11301131.peach-inline-feedback--ok {1132  color: var(--peach-accent);1133}11341135.peach-inline-feedback--error {1136  color: var(--peach-breach);1137}11381139.peach-inline-feedback--muted {1140  color: var(--peach-t2);1141  font-size: 0.625rem;1142  margin: 4px 0;1143}11441145.peach-inline-feedback--spaced {1146  margin-top: 12px;1147}11481149.peach-settings-actions--row {1150  display: flex;1151  gap: 6px;1152}11531154.peach-settings-actions--end {1155  margin-top: 14px;1156  justify-content: flex-end;1157}11581159.peach-settings-stack {1160  display: flex;1161  flex-direction: column;1162  gap: 6px;1163}11641165.peach-settings-stack--tight {1166  gap: 4px;1167}11681169.peach-settings-stack--spacious {1170  gap: 8px;1171}11721173.peach-settings-input {1174  width: 100%;1175  box-sizing: border-box;1176  padding: 8px 10px;1177  background: rgba(0, 0, 0, 0.22);1178  border: 1px solid transparent;1179  border-radius: 6px;1180  color: var(--peach-t0);1181  font-family: var(--font-ui);1182  font-size: 0.75rem;1183  outline: none;1184  transition: border-color 120ms ease, background 120ms ease;1185}11861187.peach-settings-input:focus {1188  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1189  background: rgba(0, 0, 0, 0.28);1190}11911192.peach-settings-input[type="password"] {1193  font-family: var(--font-mono);1194  letter-spacing: 0.04em;1195}11961197.peach-hidden-file-input {1198  display: none;1199}12001201.peach-checkbox-note {1202  display: flex;1203  align-items: flex-start;1204  gap: 8px;1205  font-size: 0.6875rem;1206  color: var(--peach-t1);1207  cursor: pointer;1208  margin: 12px 0;1209}12101211.peach-checkbox-note input {1212  margin-top: 1px;1213}12141215.peach-danger-notice {1216  background: rgba(220, 80, 60, 0.08);1217  border: 1px solid rgba(220, 80, 60, 0.2);1218  border-radius: 6px;1219  padding: 9px 11px;1220  font-size: 0.6875rem;1221  color: var(--peach-t1);1222  line-height: 1.5;1223}12241225.peach-info-notice {1226  font-size: 0.6875rem;1227  color: var(--peach-t1);1228  line-height: 1.5;1229  background: var(--surface-card);1230  border: 1px solid var(--peach-t3);1231  border-radius: 6px;1232  padding: 8px 10px;1233}12341235.peach-info-notice--warn {1236  border-color: rgba(220, 38, 38, 0.4);1237  background: rgba(220, 38, 38, 0.06);1238  color: rgba(220, 38, 38, 0.92);1239  margin-bottom: 8px;1240}12411242.peach-strength-row {1243  display: flex;1244  align-items: center;1245  gap: 8px;1246  margin-bottom: 10px;1247}12481249.peach-strength-track {1250  flex: 1;1251  height: 4px;1252  background: var(--peach-s2);1253  border-radius: 2px;1254  overflow: hidden;1255}12561257.peach-strength-fill {1258  height: 100%;1259  border-radius: 2px;1260  transition: width 120ms ease, background 120ms ease;1261}12621263/* ── Type selector tabs ── */1264.peach-type-tabs {1265  display: flex;1266  gap: 0;1267  background: var(--peach-t4);1268  border-radius: 8px;1269  padding: 3px;1270}12711272.peach-type-tab {1273  flex: 1;1274  display: flex;1275  align-items: center;1276  justify-content: center;1277  gap: 6px;1278  padding: 6px 10px;1279  border-radius: 6px;1280  border: none;1281  background: transparent;1282  cursor: pointer;1283  font-family: Inter, system-ui, sans-serif;1284  font-size: 0.6875rem;1285  font-weight: 400;1286  letter-spacing: 0.04em;1287  color: var(--peach-t1);1288  transition: background 150ms ease, color 150ms ease;1289}12901291.peach-type-tab.is-active {1292  background: var(--peach-s2);1293  color: var(--peach-t0);1294  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1295}12961297.peach-type-tab:not(.is-active):hover {1298  color: var(--peach-t0);1299}13001301.peach-type-tab svg {1302  opacity: 0.7;1303  flex-shrink: 0;1304}13051306.peach-type-tab.is-active svg {1307  opacity: 1;1308}13091310/* ── List view ───────────────────────────────────────────────────────── */1311.peach-list-top {1312  padding: 0 10px;1313  min-height: 46px;1314  display: flex;1315  align-items: center;1316  gap: 6px;1317  border-bottom: 1px solid var(--peach-t3);1318  flex-shrink: 0;1319  background: var(--peach-s1);1320}13211322.peach-vault-list {1323  flex: 1;1324  overflow-y: auto;1325  scrollbar-width: none;1326}1327.peach-vault-list::-webkit-scrollbar { display: none; }13281329/* Scrollbar — vault list */1330.peach-vault-list {1331  scrollbar-width: thin;1332  scrollbar-color: var(--peach-t3) transparent;1333}13341335.peach-vault-list::-webkit-scrollbar {1336  width: 3px;1337}13381339.peach-vault-list::-webkit-scrollbar-thumb {1340  background: var(--peach-t3);1341  border-radius: 2px;1342}13431344.peach-entry-row {1345  width: 100%;1346  display: flex;1347  align-items: center;1348  gap: 10px;1349  padding: 9px 16px;1350  background: transparent;1351  border: none;1352  border-bottom: 1px solid var(--peach-t3);1353  cursor: pointer;1354  color: inherit;1355  text-align: left;1356  transition: background 80ms ease;1357}1358.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1359.peach-entry-row:last-child { border-bottom: none; }1360.peach-entry-row.is-active {1361  box-shadow: inset 2px 0 0 var(--peach-accent);1362  background: rgba(240,232,216,0.03);1363}1364.peach-entry-row:focus-visible {1365  outline: none;1366  box-shadow: 0 0 0 1px var(--peach-border-accent);1367  background: rgba(240,232,216,0.03);1368}1369.peach-entry-row-icon {1370  width: 26px; height: 26px;1371  border-radius: 7px;1372  border: 1px solid var(--peach-t3);1373  display: flex; align-items: center; justify-content: center;1374  color: var(--peach-t2);1375  flex-shrink: 0;1376}1377.peach-entry-row-icon.is-breach {1378  border-color: rgba(220,80,60,0.3);1379  color: rgba(220,80,60,0.7);1380}13811382/* Title-initials chip used as the favicon fallback for login entries whose1383 * real favicon hasn't been cached by the browser yet (freshly-imported,1384 * never-visited domains). Background colour is hashed from the title so1385 * the same entry always shows the same chip. The chip fits the same1386 * 26×26 row icon slot the favicon would take. */1387.peach-favicon-initials {1388  display: inline-flex;1389  align-items: center;1390  justify-content: center;1391  width: 100%;1392  height: 100%;1393  border-radius: 4px;1394  font-family: "IBM Plex Mono", monospace;1395  font-size: 0.5625rem;1396  font-weight: 600;1397  letter-spacing: 0.04em;1398  color: rgba(240, 232, 216, 0.92);1399  text-transform: uppercase;1400  user-select: none;1401}1402.peach-entry-row-info { flex: 1; min-width: 0; }1403.peach-entry-row-name {1404  display: block;1405  font-family: var(--font-display);1406  font-size: 1.0625rem;1407  font-style: italic;1408  font-weight: 400;1409  color: var(--peach-t0);1410  line-height: 1.2;1411  white-space: nowrap;1412  overflow: hidden;1413  text-overflow: ellipsis;1414}1415.peach-entry-row-meta {1416  display: block;1417  font-family: "IBM Plex Mono", monospace;1418  font-size: 0.5625rem;1419  color: var(--peach-t2);1420  margin-top: 1px;1421  letter-spacing: 0.05em;1422}1423.peach-entry-row-dot {1424  width: 5px; height: 5px;1425  border-radius: 50%;1426  background: rgba(220,80,60,0.7);1427  flex-shrink: 0;1428}1429.peach-new-entry-row {1430  display: flex;1431  align-items: center;1432  justify-content: center;1433  gap: 6px;1434  width: 100%;1435  padding: 11px;1436  background: transparent;1437  border: none;1438  border-top: 1px solid var(--peach-t3);1439  color: var(--peach-t2);1440  font-family: "IBM Plex Mono", monospace;1441  font-size: 0.5625rem;1442  text-transform: uppercase;1443  letter-spacing: 0.14em;1444  cursor: pointer;1445  flex-shrink: 0;1446  transition: color 120ms ease, background 120ms ease;1447}1448.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }14491450/* ── Multi-select mode ─────────────────────────────────────────────── */14511452/* Select-mode trigger button in sort bar — same shape as trash btn */1453.peach-sort-select-btn {1454  display: flex;1455  align-items: center;1456  justify-content: center;1457  padding: 3px 5px;1458  background: transparent;1459  border: none;1460  cursor: pointer;1461  color: var(--peach-t2);1462  border-radius: 4px;1463  transition: color 140ms ease, background 140ms ease;1464}1465.peach-sort-select-btn:hover {1466  color: var(--peach-t1);1467  background: var(--peach-t3);1468}14691470/* Sort bar in select mode */1471.peach-select-cancel-btn {1472  background: transparent;1473  border: none;1474  padding: 0 4px;1475  cursor: pointer;1476  font-family: "IBM Plex Mono", monospace;1477  font-size: 0.5625rem;1478  letter-spacing: 0.12em;1479  text-transform: uppercase;1480  color: var(--peach-t2);1481  transition: color 140ms ease;1482  flex-shrink: 0;1483}1484.peach-select-cancel-btn:hover { color: var(--peach-t0); }14851486.peach-select-count-label {1487  flex: 1;1488  text-align: center;1489  font-family: "IBM Plex Mono", monospace;1490  font-size: 0.5625rem;1491  letter-spacing: 0.14em;1492  text-transform: uppercase;1493  color: var(--peach-t1);1494}14951496.peach-select-all-btn {1497  background: transparent;1498  border: none;1499  padding: 0 4px;1500  cursor: pointer;1501  font-family: "IBM Plex Mono", monospace;1502  font-size: 0.5625rem;1503  letter-spacing: 0.12em;1504  text-transform: uppercase;1505  color: var(--peach-t2);1506  transition: color 140ms ease;1507  flex-shrink: 0;1508}1509.peach-select-all-btn:hover { color: var(--peach-accent); }15101511/* List in select mode */1512.peach-vault-list.is-selecting .peach-entry-row {1513  cursor: default;1514}1515.peach-vault-list.is-selecting .peach-entry-row:hover {1516  background: rgba(240,232,216,0.02);1517}1518.peach-vault-list.is-selecting .peach-entry-row.is-selected {1519  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1520}1521.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1522  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1523}15241525/* Select indicator circles in icon slot */1526.peach-entry-row-icon.is-select-icon {1527  color: var(--peach-t2);1528}1529.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1530  color: var(--peach-accent);1531}15321533/* Delete action bar at bottom (replaces new-entry row) */1534.peach-select-action-bar {1535  display: flex;1536  align-items: center;1537  justify-content: center;1538  gap: 7px;1539  width: 100%;1540  padding: 11px;1541  background: transparent;1542  border: none;1543  border-top: 1px solid var(--peach-t3);1544  color: var(--peach-t1);1545  font-family: "IBM Plex Mono", monospace;1546  font-size: 0.5625rem;1547  text-transform: uppercase;1548  letter-spacing: 0.14em;1549  cursor: pointer;1550  flex-shrink: 0;1551  transition: color 120ms ease, background 120ms ease;1552}1553.peach-select-action-bar:not(:disabled):hover {1554  color: var(--peach-t0);1555  background: rgba(220,80,60,0.06);1556}1557.peach-select-action-bar:not(:disabled):hover svg {1558  stroke: rgba(220,80,60,0.8);1559}1560.peach-select-action-bar:disabled,1561.peach-select-action-bar.is-empty {1562  color: var(--peach-t2);1563  cursor: default;1564  opacity: 0.5;1565}1566.peach-search-counter-list {1567  white-space: nowrap;1568  flex-shrink: 0;1569}1570.peach-list-empty {1571  min-height: 180px;1572  display: grid;1573  place-items: center;1574  color: var(--peach-t2);1575  font-family: "IBM Plex Mono", monospace;1576  font-size: 0.6875rem;1577}15781579/* ── Settings view ───────────────────────────────────────────────────── */1580.peach-settings-body {1581  flex: 1;1582  overflow-y: auto;1583  min-height: 0;1584  display: flex;1585  flex-direction: column;1586  padding: 2px 0 10px;1587}1588.peach-settings-group {1589  margin: 4px 10px;1590  padding: 9px 14px 11px;1591  border-radius: 12px;1592  border: 1px solid rgba(255, 255, 255, 0.07);1593  background: rgba(26, 20, 16, 0.60);1594  backdrop-filter: blur(10px) saturate(1.3);1595  -webkit-backdrop-filter: blur(10px) saturate(1.3);1596}15971598.peach-settings-group + .peach-settings-group {1599  margin-top: 6px;1600}16011602@supports not (backdrop-filter: blur(1px)) {1603  .peach-settings-group {1604    background: rgba(26, 20, 16, 0.90);1605    border-color: rgba(255, 255, 255, 0.09);1606    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1607  }1608}16091610.light .peach-settings-group,1611[data-theme="light"] .peach-settings-group {1612  background: rgba(245, 237, 226, 0.70);1613  border-color: rgba(26, 18, 8, 0.08);1614  backdrop-filter: blur(10px) saturate(1.2);1615  -webkit-backdrop-filter: blur(10px) saturate(1.2);1616}16171618@supports not (backdrop-filter: blur(1px)) {1619  .light .peach-settings-group,1620  [data-theme="light"] .peach-settings-group {1621    background: rgba(245, 237, 226, 0.97);1622    border-color: rgba(26, 18, 8, 0.10);1623  }1624}1625.peach-export-intro {1626  padding-bottom: 8px;1627}1628.peach-export-card {1629  display: grid;1630  gap: 10px;1631}1632.peach-rune-canvas {1633  border-radius: 8px;1634  background: rgba(0, 0, 0, 0.22);1635  flex: 1;1636  align-self: center;1637}1638.peach-script-input {1639  font-family: "PeachScript", monospace;1640  font-size: 0.6875rem;1641  line-height: 1.9;1642  letter-spacing: 0.06em;1643  color: var(--peach-t0);1644  background: rgba(0, 0, 0, 0.22);1645  border: none;1646  border-radius: 6px;1647  padding: 12px;1648  width: 100%;1649  min-height: 96px;1650  resize: vertical;1651  word-break: break-all;1652  scrollbar-width: none;1653  -ms-overflow-style: none;1654}16551656.peach-script-input::-webkit-scrollbar { display: none; }1657.peach-csv-warning {1658  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1659  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1660  color: var(--peach-t0);1661  border-radius: 6px;1662  padding: 10px 12px;1663  margin-bottom: 8px;1664  font-size: 0.75rem;1665  line-height: 1.45;1666}1667.peach-export-card--primary {1668  background:1669    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1670}16711672/* Export menu — distribute the three format cards across the popup. */1673.peach-export-menu {1674  display: flex;1675  flex-direction: column;1676  flex: 1;1677  min-height: 0;1678}1679.peach-export-menu .peach-settings-group {1680  flex: 1;1681  display: flex;1682  flex-direction: column;1683  justify-content: center;1684  gap: 10px;1685}16861687/* Result view — the script-string fills the remaining vertical surface. */1688.peach-export-result-group {1689  flex: 1;1690  display: flex;1691  flex-direction: column;1692  min-height: 0;1693  border-bottom: none;1694}1695.peach-export-result-group .peach-export-card {1696  flex: 1;1697  min-height: 0;1698  display: flex;1699  flex-direction: column;1700  gap: 10px;1701}1702.peach-export-result-group .peach-export-card-copy {1703  flex-shrink: 0;1704}1705.peach-export-result-group .peach-settings-label {1706  flex-shrink: 0;1707}1708.peach-export-result-group button {1709  flex-shrink: 0;1710}1711.peach-export-card-head {1712  display: flex;1713  align-items: center;1714  justify-content: space-between;1715  gap: 10px;1716}1717.peach-export-card-copy {1718  margin: 0;1719  font-size: 0.75rem;1720  line-height: 1.55;1721  color: var(--peach-t1);1722}1723.peach-export-note {1724  margin: 0;1725  font-size: 0.625rem;1726  line-height: 1.5;1727  color: var(--peach-t2);1728}1729.peach-export-strength-track {1730  height: 3px;1731  background: var(--peach-border);1732  border-radius: 2px;1733  margin: 4px 0 2px;1734  overflow: hidden;1735}1736.peach-export-strength-fill {1737  height: 100%;1738  border-radius: 2px;1739  transition: width 250ms ease, background 250ms ease;1740}1741.peach-export-strength-warn {1742  margin: 0;1743  font-size: 0.625rem;1744  line-height: 1.5;1745  color: #e84040;1746  font-family: "IBM Plex Mono", monospace;1747}1748.peach-export-strength-hint {1749  margin: 0;1750  font-size: 0.625rem;1751  line-height: 1.5;1752  color: var(--peach-t2);1753  font-family: "IBM Plex Mono", monospace;1754}1755.peach-export-pill {1756  display: inline-flex;1757  align-items: center;1758  padding: 4px 8px;1759  border-radius: 999px;1760  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1761  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1762  color: var(--peach-accent);1763  font-family: "IBM Plex Mono", monospace;1764  font-size: 0.5rem;1765  letter-spacing: 0.12em;1766  text-transform: uppercase;1767  white-space: nowrap;1768}1769.peach-export-pill--danger {1770  border-color: rgba(220,80,60,0.22);1771  background: rgba(220,80,60,0.08);1772  color: var(--peach-breach);1773}1774.peach-settings-label {1775  margin: 0 0 6px;1776  font-family: "IBM Plex Mono", monospace;1777  font-size: 0.5rem;1778  text-transform: uppercase;1779  letter-spacing: 0.18em;1780  color: var(--peach-t2);1781}1782.peach-settings-row {1783  display: flex;1784  align-items: center;1785  justify-content: space-between;1786  gap: 12px;1787  min-height: 34px;1788  padding: 6px 0;1789  font-size: 0.8125rem;1790  color: var(--peach-t1);1791}1792.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1793.peach-settings-value {1794  font-family: "IBM Plex Mono", monospace;1795  font-size: 0.625rem;1796  color: var(--peach-t2);1797}17981799.peach-settings-value--status {1800  display: flex;1801  align-items: center;1802  gap: 6px;1803}18041805.peach-settings-link {1806  font-family: "IBM Plex Mono", monospace;1807  font-size: 0.625rem;1808  color: var(--peach-accent);1809  text-decoration: none;1810  cursor: pointer;1811}1812.peach-settings-link:hover {1813  text-decoration: underline;1814}18151816.peach-settings-row--stack {1817  flex-direction: column;1818  align-items: stretch;1819  gap: 6px;1820}18211822.peach-settings-row--top {1823  align-items: flex-start;1824}18251826.peach-settings-row-main {1827  display: flex;1828  flex-direction: column;1829  gap: 4px;1830  flex: 1;1831}1832.peach-toggle {1833  width: 28px; height: 16px;1834  border-radius: 999px;1835  background: var(--peach-t3);1836  border: 1px solid var(--peach-t3);1837  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1838  flex-shrink: 0;1839  transition: background 200ms ease, border-color 200ms ease;1840  cursor: pointer;1841}1842.peach-toggle.is-on {1843  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1844  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1845}1846.peach-toggle-knob {1847  width: 10px; height: 10px;1848  border-radius: 50%;1849  background: var(--peach-t2);1850  flex-shrink: 0;1851  transform: translateX(0px);1852  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1853}1854.peach-toggle.is-on .peach-toggle-knob {1855  background: var(--peach-accent);1856  transform: translateX(12px);1857}1858.peach-settings-footer {1859  display: flex;1860  align-items: center;1861  gap: 8px;1862  margin-top: auto;1863  padding: 14px 16px 8px;1864  font-family: "IBM Plex Mono", monospace;1865  font-size: 0.5625rem;1866  color: var(--peach-t2);1867}18681869/* ── Settings home navigation ──────────────────────────────────────────── */1870.peach-settings-nav-label {1871  margin: 0 0 2px;1872  padding: 12px 16px 4px;1873  font-family: "IBM Plex Mono", monospace;1874  font-size: 0.5rem;1875  text-transform: uppercase;1876  letter-spacing: 0.18em;1877  color: var(--peach-t2);1878}18791880.peach-settings-cat-row {1881  display: flex;1882  align-items: center;1883  gap: 10px;1884  width: 100%;1885  padding: 9px 16px;1886  background: none;1887  border: none;1888  border-bottom: 1px solid var(--peach-t3);1889  cursor: pointer;1890  text-align: left;1891  color: inherit;1892  transition: background var(--peach-dur-80) ease;1893}1894.peach-settings-cat-row:hover {1895  background: var(--peach-t3);1896}1897.peach-settings-cat-row:last-child {1898  border-bottom: none;1899}19001901.peach-settings-cat-icon {1902  width: 28px;1903  height: 28px;1904  border-radius: 7px;1905  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1906  color: var(--peach-accent);1907  display: flex;1908  align-items: center;1909  justify-content: center;1910  flex-shrink: 0;1911}1912/* Light theme: peach-on-cream is too low-contrast — both colors are warm.1913   Darken the icon stroke to ink and bump the bg tint so the icon reads1914   sharply while the cell still feels accent-tinted. */1915.light .peach-settings-cat-icon {1916  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);1917  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));1918}19191920.peach-settings-cat-content {1921  flex: 1;1922  display: flex;1923  flex-direction: column;1924  gap: 2px;1925  min-width: 0;1926}19271928.peach-settings-cat-name {1929  font-size: 0.8125rem;1930  font-weight: 450;1931  color: var(--peach-t0);1932  line-height: 1.2;1933}19341935.peach-settings-cat-desc {1936  font-size: 0.625rem;1937  color: var(--peach-t2);1938  line-height: 1.3;1939  white-space: nowrap;1940  overflow: hidden;1941  text-overflow: ellipsis;1942}19431944.peach-settings-cat-chevron {1945  color: var(--peach-t2);1946  flex-shrink: 0;1947  opacity: 0.5;1948}19491950/* ── Settings sub-view section labels ──────────────────────────────────── */1951.peach-settings-sub-label {1952  margin: 12px 0 4px;1953  font-family: "IBM Plex Mono", monospace;1954  font-size: 0.5rem;1955  text-transform: uppercase;1956  letter-spacing: 0.18em;1957  color: var(--peach-t2);1958}1959.peach-settings-sub-label:first-child {1960  margin-top: 4px;1961}19621963/* ── Settings: collapsible Advanced section ─────────────────────────────── */1964.peach-settings-advanced-toggle {1965  display: flex;1966  align-items: center;1967  justify-content: space-between;1968  width: 100%;1969  background: none;1970  border: none;1971  cursor: pointer;1972  padding: 12px 0 4px;1973  margin: 0;1974  color: inherit;1975}1976.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {1977  color: var(--peach-t1);1978}1979.peach-settings-advanced-chevron {1980  font-size: 0.5625rem;1981  color: var(--peach-t3);1982  letter-spacing: 0;1983  transition: color 120ms ease;1984}19851986/* ── Feedback form ──────────────────────────────────────────────────────── */1987.peach-feedback-group {1988  flex: 1;1989  display: flex;1990  flex-direction: column;1991  border-bottom: none;1992}19931994.peach-feedback-intro {1995  margin: 4px 0 14px;1996  font-size: 0.75rem;1997  line-height: 1.55;1998  color: var(--peach-t1);1999}20002001.peach-feedback-chips {2002  display: flex;2003  flex-wrap: wrap;2004  gap: 6px;2005  margin-bottom: 14px;2006}20072008.peach-feedback-chip {2009  padding: 4px 10px;2010  border-radius: 999px;2011  border: 1px solid var(--peach-t3);2012  background: none;2013  color: var(--peach-t2);2014  font-size: 0.6875rem;2015  font-family: var(--font-ui);2016  cursor: pointer;2017  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2018    background var(--peach-dur-80) ease;2019}2020.peach-feedback-chip:hover {2021  border-color: var(--peach-t2);2022  color: var(--peach-t1);2023}2024.peach-feedback-chip.is-active {2025  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);2026  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));2027  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);2028  box-shadow:2029    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),2030    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);2031  font-weight: 700;2032}20332034.peach-feedback-textarea {2035  flex: 1;2036  width: 100%;2037  min-height: 120px;2038  box-sizing: border-box;2039  background: rgba(0, 0, 0, 0.22);2040  border: 1px solid transparent;2041  border-radius: 6px;2042  color: var(--peach-t0);2043  font-size: 0.75rem;2044  font-family: var(--font-ui);2045  line-height: 1.5;2046  padding: 8px 10px;2047  resize: none;2048  outline: none;2049  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2050}2051.peach-feedback-textarea:focus {2052  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2053  background: rgba(0, 0, 0, 0.28);2054}2055.peach-feedback-textarea:focus {2056  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2057}2058.peach-feedback-textarea::placeholder {2059  color: var(--peach-t2);2060}20612062.peach-feedback-meta {2063  margin: 6px 0 0;2064  font-size: 0.625rem;2065  color: var(--peach-t2);2066  font-family: "IBM Plex Mono", monospace;2067}20682069.peach-feedback-result {2070  margin: 8px 0 0;2071  font-size: 0.6875rem;2072  font-family: "IBM Plex Mono", monospace;2073}2074.peach-feedback-result--ok { color: var(--peach-sync-ok); }2075.peach-feedback-result--err { color: var(--peach-breach); }20762077.peach-feedback-submit {2078  width: 100%;2079  margin-top: 12px;2080  justify-content: center;2081}20822083.peach-feedback-anon {2084  margin: 8px 0 0;2085  font-size: 0.625rem;2086  color: var(--peach-t2);2087  text-align: center;2088}20892090.peach-feedback-thanks {2091  margin: auto 0;2092  padding: 18px 14px;2093  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);2094  border-radius: 8px;2095  background:2096    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),2097    rgba(0, 0, 0, 0.18);2098  color: var(--peach-t1);2099  text-align: center;2100}21012102.peach-feedback-thanks p {2103  margin: 0;2104  font-size: 0.75rem;2105  line-height: 1.5;2106}21072108.peach-feedback-thanks-title {2109  color: var(--peach-t0);2110  font-family: "Cormorant Garamond", serif;2111  font-size: 1.375rem !important;2112  line-height: 1.1 !important;2113  margin-bottom: 8px !important;2114}21152116.peach-passkey-badge {2117  margin-left: 8px;2118  font-size: 0.625rem;2119  letter-spacing: 0.06em;2120  text-transform: uppercase;2121  color: var(--peach-t2);2122  font-family: var(--font-ui);2123  vertical-align: middle;2124}21252126.peach-passkey-delete-btn {2127  color: var(--peach-breach);2128  border-color: rgba(229, 85, 85, 0.25);2129}21302131.peach-passkey-delete-confirm {2132  display: flex;2133  align-items: center;2134  gap: 8px;2135  padding: 8px 10px;2136  background: rgba(229, 85, 85, 0.06);2137  border: 1px solid rgba(229, 85, 85, 0.2);2138  border-radius: 6px;2139}21402141.peach-passkey-delete-confirm-copy {2142  flex: 1;2143  font-size: 0.6875rem;2144  color: var(--peach-t1);2145}21462147.peach-passkey-delete-btn--confirm {2148  color: var(--peach-breach);2149  border-color: rgba(229, 85, 85, 0.4);2150}21512152.peach-passkey-activity {2153  flex-direction: column;2154  align-items: flex-start;2155  gap: 4px;2156}21572158.peach-passkey-meta {2159  font-size: 0.6875rem;2160  color: var(--peach-t2);2161}21622163.peach-passkey-actions {2164  position: relative;2165  z-index: 1;2166  margin-top: 14px;2167  display: flex;2168  flex-direction: column;2169  gap: 8px;2170}21712172.peach-passkey-approval {2173  display: flex;2174  flex-direction: column;2175  align-items: center;2176  padding: 16px 20px 14px;2177  gap: 8px;2178  text-align: center;2179}21802181.peach-passkey-approval-icon {2182  width: 36px;2183  height: 36px;2184  border-radius: 10px;2185  background: var(--peach-s2);2186  border: 1px solid var(--peach-t3);2187  display: flex;2188  align-items: center;2189  justify-content: center;2190  flex-shrink: 0;2191  color: var(--peach-accent);2192}21932194.peach-passkey-approval-icon img,2195.peach-passkey-approval-icon svg {2196  width: 22px;2197  height: 22px;2198  border-radius: 5px;2199}22002201.peach-passkey-approval-rp {2202  font-family: var(--font-ui);2203  font-size: 0.75rem;2204  color: var(--peach-t2);2205  letter-spacing: 0.03em;2206}22072208.peach-passkey-approval-action {2209  font-family: var(--font-display);2210  font-style: italic;2211  font-weight: 300;2212  font-size: 18px;2213  color: var(--peach-t0);2214  line-height: 1.1;2215  margin: 1px 0;2216}22172218.peach-passkey-approval-user {2219  font-family: var(--font-mono);2220  font-size: 0.6875rem;2221  color: var(--peach-t1);2222  background: var(--peach-s2);2223  border: 1px solid var(--peach-t3);2224  border-radius: 4px;2225  padding: 3px 8px;2226}22272228.peach-passkey-approval-notice {2229  font-size: 0.625rem;2230  color: var(--peach-t2);2231  line-height: 1.5;2232  max-width: 220px;2233}22342235.peach-passkey-approval-actions {2236  display: flex;2237  gap: 8px;2238  width: 100%;2239  margin-top: 6px;2240}22412242.peach-passkey-approval-actions .peach-btn {2243  flex: 1;2244}22452246/* ── Inline generator drawer ── */2247.peach-generator-drawer {2248  display: grid;2249  grid-template-rows: 0fr;2250  transition: grid-template-rows 320ms var(--peach-curve-arrival);2251  overflow: hidden;2252}2253.peach-generator-drawer.is-open {2254  grid-template-rows: 1fr;2255}2256.peach-generator-drawer-inner {2257  min-height: 0;2258  overflow: hidden;2259}2260.peach-generator-drawer-content {2261  border-top: 1px solid var(--peach-t3);2262  padding: 8px 0 4px;2263  display: flex;2264  flex-direction: column;2265  gap: 8px;2266}22672268/* ── Compact generator (inside entry edit) ── */2269.peach-generator-drawer-content--compact {2270  border-top: 1px solid var(--peach-t3);2271  padding: 8px 0 2px;2272  gap: 7px;2273}2274.peach-pwgen-compact-display-row {2275  display: flex;2276  align-items: center;2277  gap: 6px;2278}2279.peach-pwgen-compact-output {2280  flex: 1;2281  min-width: 0;2282  font-family: "IBM Plex Mono", monospace;2283  font-size: 0.6875rem;2284  font-weight: 400;2285  letter-spacing: 0.04em;2286  color: var(--peach-t0);2287  background: rgba(240, 232, 216, 0.04);2288  border: 1px solid var(--peach-t3);2289  border-radius: 5px;2290  padding: 5px 8px;2291  line-height: 1.5;2292  outline: none;2293  transition: border-color 120ms ease;2294}22952296.peach-pwgen-compact-output:focus {2297  border-color: var(--peach-t1);2298}2299.peach-pwgen-compact-controls {2300  display: flex;2301  align-items: center;2302  gap: 6px;2303}2304.peach-pwgen-compact-slider {2305  flex: 1;2306  min-width: 0;2307  height: 2px !important;2308}2309.peach-pwgen-compact-controls .peach-pwgen-len-num {2310  flex-shrink: 0;2311  min-width: 18px;2312  text-align: right;2313}2314.peach-pwgen-compact-pills {2315  display: flex;2316  gap: 3px;2317  flex-shrink: 0;2318}2319.peach-pwgen-compact-pills .peach-pwgen-pill {2320  padding: 2px 7px;2321  font-size: 0.5rem;2322}2323.peach-pwgen-compact-use {2324  flex-shrink: 0;2325  font-size: 0.625rem !important;2326  padding: 3px 9px !important;2327  min-height: 22px !important;2328  border-radius: 5px !important;2329}23302331/* ── Password edit row (input + eye toggle side-by-side) ── */2332.peach-password-edit-row {2333  display: flex;2334  align-items: center;2335  gap: 6px;2336}2337.peach-password-edit-row .peach-inline-input {2338  flex: 1;2339  min-width: 0;2340}23412342/* ── Generate toggle link ── */2343.peach-generate-toggle-link {2344  display: inline-flex;2345  align-items: center;2346  gap: 5px;2347  background: none;2348  border: none;2349  padding: 0;2350  cursor: pointer;2351  font-family: "IBM Plex Mono", monospace;2352  font-size: 0.625rem;2353  color: var(--peach-t2);2354  letter-spacing: 0.04em;2355  transition: color 120ms ease;2356  align-self: flex-start;2357}2358.peach-generate-toggle-link:hover {2359  color: var(--peach-accent);2360}23612362/* Holds the generate + history toggle links on one row under the editor. */2363.peach-password-edit-links {2364  display: flex;2365  align-items: center;2366  gap: 14px;2367  flex-wrap: wrap;2368}23692370/* ── Past-password history list ── */2371.peach-password-history {2372  display: grid;2373  gap: 4px;2374  margin-top: 2px;2375  max-height: 168px;2376  overflow-y: auto;2377  scrollbar-width: thin;2378}2379.peach-history-row {2380  display: flex;2381  align-items: center;2382  justify-content: space-between;2383  gap: 8px;2384  padding: 5px 7px;2385  border-radius: 7px;2386  background: color-mix(in srgb, var(--peach-accent) 5%, transparent);2387  border: 1px solid color-mix(in srgb, var(--peach-accent) 9%, transparent);2388}2389.peach-history-main {2390  display: flex;2391  flex-direction: column;2392  gap: 1px;2393  min-width: 0;2394  flex: 1;2395}2396.peach-history-pw {2397  font-family: "IBM Plex Mono", monospace;2398  font-size: 0.6875rem;2399  color: var(--peach-t1);2400  white-space: nowrap;2401  overflow: hidden;2402  text-overflow: ellipsis;2403}2404.peach-history-pw .peach-password-mask {2405  letter-spacing: 0.08em;2406  color: var(--peach-t2);2407}2408.peach-history-age {2409  font-family: "IBM Plex Mono", monospace;2410  font-size: 0.5625rem;2411  color: var(--peach-t3, var(--peach-t2));2412  letter-spacing: 0.03em;2413}2414.peach-history-actions {2415  display: flex;2416  align-items: center;2417  gap: 2px;2418  flex-shrink: 0;2419}2420.peach-history-use {2421  font-family: "IBM Plex Mono", monospace;2422  font-size: 0.5625rem;2423  letter-spacing: 0.05em;2424  padding: 3px 7px;2425}24262427/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2428.peach-entry-body {2429  flex: 1;2430  overflow-y: auto;2431  overflow-x: hidden;2432  scrollbar-width: none;2433  -ms-overflow-style: none;2434  overscroll-behavior: contain;2435  display: grid;2436  gap: 10px;2437  align-content: start;2438  padding: 10px 20px 14px;2439  min-width: 0;2440  min-height: 0;2441}2442.peach-entry-body::-webkit-scrollbar { display: none; }24432444/* Type-toggle pills + inline note toolbar */2445.peach-new-type-row {2446  display: flex;2447  align-items: center;2448  gap: 6px;2449  margin-bottom: 2px;2450}2451.peach-new-type-btn {2452  background: transparent;2453  border: 1px solid var(--peach-t3);2454  border-radius: 12px;2455  padding: 3px 10px;2456  font-family: "IBM Plex Mono", monospace;2457  font-size: 0.5625rem;2458  letter-spacing: 0.12em;2459  text-transform: uppercase;2460  color: var(--peach-t2);2461  cursor: pointer;2462  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2463}2464.peach-new-type-btn.is-active {2465  color: var(--peach-t0);2466  border-color: var(--peach-accent);2467  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2468}2469.peach-new-type-btn:not(.is-active):hover {2470  color: var(--peach-t1);2471  border-color: var(--peach-t2);2472}24732474/* Editable title */2475.peach-new-title-wrap { margin: 0 0 2px; }2476.peach-new-title-input {2477  background: transparent;2478  border: none;2479  outline: none;2480  width: 100%;2481  color: var(--peach-t0);2482  font-family: var(--font-display);2483  font-style: italic;2484  font-weight: 400;2485  font-size: 40px;2486  line-height: 0.95;2487  caret-color: var(--peach-accent);2488}2489.peach-new-title-input::placeholder { color: var(--peach-t2); }24902491/* Editable domain field */2492.peach-domain-edit-row {2493  display: flex;2494  align-items: center;2495  gap: 6px;2496}24972498.peach-domain-edit-row .peach-domain-value--edit {2499  flex: 1;2500  width: 0;2501}25022503.peach-domain-url-btn {2504  flex-shrink: 0;2505  background: transparent;2506  border: none;2507  cursor: pointer;2508  color: var(--peach-t3);2509  padding: 2px 3px;2510  display: flex;2511  align-items: center;2512  line-height: 0;2513  border-radius: 3px;2514  transition: color 120ms ease;2515}25162517.peach-domain-url-btn:hover {2518  color: var(--peach-accent);2519}25202521.peach-domain-value--edit {2522  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2523  font-size: 0.625rem;2524  font-style: italic;2525  letter-spacing: 0.12em;2526  color: var(--peach-t1);2527  background: transparent;2528  border: none;2529  border-bottom: 1px solid var(--peach-t3);2530  outline: none;2531  width: 100%;2532  padding: 2px 0;2533  caret-color: var(--peach-accent);2534  transition: border-color 140ms ease, color 140ms ease;2535}2536.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2537.peach-domain-value--edit:focus {2538  border-bottom-color: rgba(240, 232, 216, 0.28);2539  color: var(--peach-t0);2540}25412542/* Editable field values (username, password, totp) */2543.peach-field-value--edit {2544  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2545  font-size: 0.8125rem;2546  color: var(--peach-t0);2547  background: transparent;2548  border: none;2549  border-bottom: 1px solid var(--peach-t3);2550  outline: none;2551  flex: 1;2552  min-width: 0;2553  padding: 3px 0;2554  caret-color: var(--peach-accent);2555  transition: border-color 140ms ease, color 140ms ease;2556}2557.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2558.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2559.peach-field-value--edit:focus {2560  border-bottom-color: rgba(240, 232, 216, 0.28);2561  color: var(--peach-t0);2562}25632564/* "+ add optional field" links */2565.peach-entry-add-links {2566  display: flex;2567  gap: 12px;2568  flex-wrap: wrap;2569  margin-top: -2px;2570}2571.peach-add-field-link {2572  background: transparent;2573  border: none;2574  padding: 0;2575  cursor: pointer;2576  font-family: "IBM Plex Mono", monospace;2577  font-size: 0.5625rem;2578  letter-spacing: 0.1em;2579  text-transform: uppercase;2580  color: var(--peach-t2);2581  transition: color 140ms ease;2582}2583.peach-add-field-link:hover { color: var(--peach-accent); }25842585/* ── New entry form (legacy classes) ────────────────────────────────── */2586.peach-new-body {2587  flex: 1;2588  overflow-y: auto;2589  padding: 10px 20px 14px;2590}2591.peach-new-name-input {2592  background: transparent;2593  border: none;2594  outline: none;2595  width: 100%;2596  color: var(--peach-t0);2597  font-family: var(--font-display);2598  font-style: italic;2599  font-weight: 400;2600  font-size: 40px;2601  line-height: 0.95;2602  caret-color: var(--peach-accent);2603}2604.peach-new-name-input::placeholder { color: var(--peach-t2); }2605.peach-new-field-input {2606  background: transparent;2607  border: none;2608  outline: none;2609  flex: 1;2610  min-width: 0;2611  caret-color: var(--peach-accent);2612}2613.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }26142615/* ── Canary card ── */2616.peach-canary-card {2617  border: 1px solid rgba(217, 160, 48, 0.2);2618  background: rgba(217, 160, 48, 0.03);2619  border-radius: 8px;2620  padding: 12px;2621}26222623.peach-canary-settings-header {2624  display: flex;2625  align-items: center;2626  justify-content: space-between;2627  cursor: pointer;2628  user-select: none;2629}26302631.peach-canary-card .peach-label {2632  color: rgba(217, 160, 48, 0.85);2633}26342635.peach-canary-card .peach-new-field-input {2636  border-color: rgba(217, 160, 48, 0.25);2637}26382639.peach-canary-card .peach-new-field-input:focus {2640  border-color: rgba(217, 160, 48, 0.5);2641}26422643.peach-canary-body {2644  margin-top: 12px;2645  display: flex;2646  flex-direction: column;2647  gap: 10px;2648}26492650.peach-canary-explainer {2651  display: flex;2652  gap: 10px;2653  padding: 10px 12px;2654  border-radius: 10px;2655  background: rgba(217, 160, 48, 0.06);2656  border: 1px solid rgba(217, 160, 48, 0.22);2657  margin-bottom: 4px;2658}26592660.peach-canary-explainer-icon {2661  font-size: 1rem;2662  flex-shrink: 0;2663  line-height: 1.2;2664}26652666.peach-canary-explainer-title {2667  font-family: var(--font-ui);2668  font-size: 0.6875rem;2669  font-weight: 500;2670  color: rgba(217, 160, 48, 0.9);2671  margin: 0 0 3px;2672}26732674.peach-canary-explainer-copy {2675  font-family: var(--font-ui);2676  font-size: 0.625rem;2677  color: var(--peach-t2);2678  line-height: 1.55;2679  margin: 0;2680}26812682.peach-canary-hint {2683  font-size: 0.625rem;2684  color: var(--peach-t2);2685  font-family: Inter, system-ui, sans-serif;2686  line-height: 1.5;2687  margin-top: 4px;2688}26892690.peach-canary-actions-row {2691  display: flex;2692  align-items: center;2693  gap: 8px;2694}26952696.peach-canary-test-btn {2697  border-color: rgba(217, 160, 48, 0.3);2698  color: rgba(217, 160, 48, 0.85);2699}27002701.peach-canary-test-result {2702  font-size: 0.625rem;2703  font-family: Inter, system-ui, sans-serif;2704}27052706.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2707.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }27082709.peach-canary-badge {2710  display: flex;2711  position: relative;2712  z-index: 1;2713  align-items: center;2714  gap: 5px;2715  padding: 4px 10px;2716  background: rgba(217, 160, 48, 0.12);2717  border: 1px solid rgba(217, 160, 48, 0.35);2718  border-radius: 6px;2719  margin-bottom: 6px;2720  width: fit-content;2721}27222723.peach-canary-badge-label {2724  font-size: 0.625rem;2725  letter-spacing: 0.06em;2726  color: rgba(217, 160, 48, 0.9);2727  font-family: var(--font-ui);2728  text-transform: uppercase;2729}27302731.peach-canary-badge-icon {2732  font-size: 0.6875rem;2733}27342735.peach-canary-suppress-row {2736  display: flex;2737  align-items: center;2738  gap: 8px;2739  padding: 6px 10px;2740  background: rgba(217, 160, 48, 0.08);2741  border-radius: 6px;2742  margin-bottom: 8px;2743}27442745.peach-canary-suppress-label {2746  font-size: 0.6875rem;2747  color: rgba(217, 160, 48, 0.85);2748  cursor: pointer;2749  font-family: var(--font-ui);2750  letter-spacing: 0.04em;2751}27522753.peach-regen-panel {2754  position: relative;2755  z-index: 1;2756  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2757  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2758  border-radius: 8px;2759  padding: 12px;2760  margin-bottom: 8px;2761}27622763.peach-regen-panel-header {2764  display: flex;2765  align-items: center;2766  justify-content: space-between;2767  margin-bottom: 10px;2768}27692770.peach-regen-panel-title {2771  font-size: 0.6875rem;2772  font-weight: 600;2773  letter-spacing: 0.06em;2774  text-transform: uppercase;2775  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2776}27772778.peach-regen-output {2779  background: rgba(0, 0, 0, 0.2);2780  border-radius: 6px;2781  padding: 10px;2782  margin-bottom: 10px;2783  font-family: var(--font-mono);2784  font-size: 0.8125rem;2785  word-break: break-all;2786  color: var(--peach-t1);2787}27882789.peach-regen-actions {2790  display: flex;2791  gap: 6px;2792}27932794.peach-regen-actions--spaced {2795  margin-bottom: 8px;2796}27972798.peach-regen-action-grow {2799  flex: 1;2800}28012802.peach-regen-copy-btn {2803  padding: 0 8px;2804}28052806.peach-regen-success {2807  position: relative;2808  z-index: 1;2809  background: rgba(40, 180, 80, 0.1);2810  border: 1px solid rgba(40, 180, 80, 0.3);2811  border-radius: 8px;2812  padding: 10px 12px;2813  margin-bottom: 8px;2814  display: flex;2815  align-items: center;2816  gap: 8px;2817  font-size: 0.6875rem;2818  color: rgba(40, 180, 80, 0.9);2819}28202821/* ── Note editor overlay ── */2822.peach-note-editor {2823  position: absolute;2824  inset: 0;2825  z-index: 200;2826  display: flex;2827  flex-direction: column;2828  background:2829    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2830    var(--peach-bg);2831  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2832}28332834.peach-note-editor-header {2835  display: flex;2836  align-items: center;2837  gap: 10px;2838  padding: 14px 16px 10px;2839  border-bottom: 1px solid var(--peach-t3);2840  flex-shrink: 0;2841}28422843.peach-note-editor-back {2844  background: transparent;2845  border: none;2846  cursor: pointer;2847  color: var(--peach-t2);2848  padding: 4px 6px;2849  border-radius: 6px;2850  display: flex;2851  align-items: center;2852  transition: color 120ms ease, background 120ms ease;2853  flex-shrink: 0;2854}2855.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }28562857.peach-note-editor-label {2858  flex: 1;2859  font-family: var(--font-display);2860  font-style: italic;2861  font-size: 0.9375rem;2862  color: var(--peach-t1);2863  letter-spacing: 0.02em;2864}28652866.peach-note-editor-save-btn {2867  background: transparent;2868  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2869  border-radius: 8px;2870  color: var(--peach-accent);2871  font-family: "IBM Plex Mono", monospace;2872  font-size: 0.625rem;2873  letter-spacing: 0.06em;2874  text-transform: uppercase;2875  padding: 3px 10px;2876  cursor: pointer;2877  transition: background 120ms ease, border-color 120ms ease;2878}2879.peach-note-editor-save-btn:hover:not(:disabled) {2880  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2881  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2882}2883.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }28842885.peach-note-toolbar {2886  display: flex;2887  align-items: center;2888  gap: 3px;2889  padding: 6px 14px 5px;2890  border-bottom: 1px solid var(--peach-t3);2891  flex-shrink: 0;2892}28932894.peach-note-tool-btn {2895  background: transparent;2896  border: 1px solid transparent;2897  border-radius: 5px;2898  color: var(--peach-t2);2899  font-family: "IBM Plex Mono", monospace;2900  font-size: 0.625rem;2901  letter-spacing: 0.04em;2902  padding: 2px 8px;2903  cursor: pointer;2904  line-height: 1.6;2905  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2906}2907.peach-note-tool-btn:hover {2908  background: var(--peach-t4);2909  color: var(--peach-t0);2910  border-color: var(--peach-t3);2911}29122913.peach-note-tool-icon {2914  padding: 3px 7px;2915  display: inline-flex;2916  align-items: center;2917  justify-content: center;2918}29192920.peach-note-tool-divider {2921  width: 1px;2922  height: 14px;2923  background: var(--peach-t3);2924  margin: 0 4px;2925  flex-shrink: 0;2926}29272928.peach-note-editor-body {2929  flex: 1;2930  overflow-y: auto;2931  padding: 16px 20px 20px;2932  outline: none;2933  font-family: var(--font-display);2934  font-size: 1rem;2935  line-height: 1.75;2936  color: var(--peach-t0);2937  scrollbar-width: none;2938  word-break: break-word;2939}2940.peach-note-editor-body:empty::before {2941  content: "write your note…";2942  color: var(--peach-t3);2943  font-style: italic;2944  pointer-events: none;2945}29462947/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2948.peach-note-editor-inline {2949  display: flex;2950  flex-direction: column;2951  flex: 1;2952  min-height: 0;2953}2954.peach-note-editor-body--inline {2955  flex: 1;2956  min-height: 0;2957  font-size: 0.9375rem;2958  padding: 10px 20px 14px;2959}29602961/* Full-width toolbar row inside the body (Add.tsx note type).2962   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */2963.peach-note-toolbar-body {2964  display: flex;2965  align-items: center;2966  gap: 3px;2967  padding: 5px 20px 4px;2968  margin: 2px -20px 0;2969  border-bottom: 1px solid var(--peach-t3);2970  flex-shrink: 0;2971}29722973/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2974   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2975   and .peach-note-tool-divider button-level styles. */2976.peach-note-toolbar-inline {2977  display: flex;2978  align-items: center;2979  gap: 3px;2980  margin-left: auto;2981  padding-left: 10px;2982  border-left: 1px solid var(--peach-t3);2983  min-height: 22px;2984}29852986/* Entry.tsx toolbar row (no tabs, toolbar only) */2987.peach-entry-note-toolbar-row {2988  display: flex;2989  align-items: center;2990  margin: 4px 0 6px;2991  position: relative;2992  z-index: 1;2993}2994.peach-entry-note-toolbar-row .peach-note-toolbar-inline {2995  border-left: none;2996  padding-left: 0;2997  margin-left: 0;2998}29993000/* Note body — fills available vertical space in Add.tsx and Entry.tsx */3001.peach-note-body {3002  display: flex;3003  flex-direction: column;3004  flex: 1;3005  min-height: 0;3006  margin: 4px 0 0;3007}3008.peach-entry-body--new .peach-note-body {3009  margin: 8px -20px 0;3010}30113012/* Add.tsx body is a grid by default; swap to a flex column when a note is3013   active so the note body can stretch and pin the tags row to the bottom. */3014.peach-entry-body--new:has(.peach-note-body) {3015  display: flex;3016  flex-direction: column;3017}30183019/* Rich content element styles (editor + display) */3020.peach-note-editor-body h2,3021.peach-note-content h2 {3022  font-family: var(--font-display);3023  font-size: 20px;3024  font-weight: 600;3025  font-style: italic;3026  color: var(--peach-t0);3027  margin: 6px 0 2px;3028  line-height: 1.3;3029}3030.peach-note-editor-body ul,3031.peach-note-content ul {3032  padding-left: 18px;3033  margin: 3px 0;3034  list-style: disc;3035}3036.peach-note-editor-body ol,3037.peach-note-content ol {3038  padding-left: 18px;3039  margin: 3px 0;3040  list-style: decimal;3041}3042.peach-note-editor-body li,3043.peach-note-content li { margin: 2px 0; }3044.peach-note-editor-body hr,3045.peach-note-content hr {3046  border: none;3047  border-top: 1px solid var(--peach-t3);3048  margin: 10px 0;3049}30503051/* font size elements from execCommand */3052.peach-note-editor-body font[size="1"],3053.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }3054.peach-note-editor-body font[size="2"],3055.peach-note-content font[size="2"] { font-size: 0.8125rem; }3056.peach-note-editor-body font[size="3"],3057.peach-note-content font[size="3"] { font-size: 1rem; }3058.peach-note-editor-body font[size="4"],3059.peach-note-content font[size="4"] { font-size: 20px; }3060.peach-note-editor-body font[size="5"],3061.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }30623063/* bold / italic inside the editor and note display */3064.peach-note-editor-body b, .peach-note-editor-body strong,3065.peach-note-content b, .peach-note-content strong { font-weight: 700; }3066.peach-note-editor-body em, .peach-note-editor-body i,3067.peach-note-content em, .peach-note-content i { font-style: italic; }30683069/* note display — rendered HTML, no pre-wrap */3070.peach-note-content {3071  overflow: auto;3072  max-height: 340px;3073  word-break: break-word;3074}30753076/* ── Note textarea ── */3077.peach-note-textarea {3078  width: 100%;3079  min-height: 180px;3080  max-height: 280px;3081  resize: vertical;3082  background: var(--peach-t4);3083  border: 1px solid var(--peach-t3);3084  border-radius: 8px;3085  padding: 10px 12px;3086  font-family: "IBM Plex Mono", monospace;3087  font-size: 0.75rem;3088  line-height: 1.7;3089  color: var(--peach-t1);3090  outline: none;3091  transition: border-color 150ms ease;3092}30933094.peach-note-textarea:focus {3095  border-color: var(--peach-t2);3096}30973098.peach-note-char-count {3099  font-family: "IBM Plex Mono", monospace;3100  font-size: 0.5625rem;3101  color: var(--peach-t3);3102  text-align: right;3103  margin-top: 4px;3104  letter-spacing: 0.1em;3105}31063107/* ── Field input baseline ── */3108.peach-new-field-input {3109  width: 100%;3110  background: transparent;3111  border: none;3112  border-bottom: 1px solid var(--peach-t3);3113  padding: 4px 0;3114  color: var(--peach-t1);3115  font-family: "IBM Plex Mono", monospace;3116  font-size: 0.8125rem;3117  outline: none;3118  transition: border-color 150ms ease;3119}31203121.peach-new-field-input:focus {3122  border-bottom-color: var(--peach-t0);3123  color: var(--peach-t0);3124}31253126.peach-new-name-input {3127  width: 100%;3128  background: transparent;3129  border: none;3130  border-bottom: 1px solid var(--peach-t3);3131  padding: 6px 0;3132  font-family: var(--font-display);3133  font-style: italic;3134  font-size: 28px;3135  color: var(--peach-t0);3136  outline: none;3137  transition: border-color 150ms ease;3138}31393140.peach-new-name-input:focus {3141  border-bottom-color: var(--peach-t1);3142}31433144.peach-new-name-input::placeholder {3145  color: var(--peach-t2);3146  font-style: italic;3147}31483149.peach-new-field-input::placeholder {3150  color: var(--peach-t3);3151}31523153/* ── Demo entrance animation ── */3154#hd-shell {3155  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3156}3157@keyframes hd-shell-enter {3158  from { opacity: 0; transform: scale(0.96) translateY(16px); }3159  to   { opacity: 1; transform: scale(1) translateY(0); }3160}31613162/* ── Keyframes ── */3163@keyframes peach-char-enter {3164  from { opacity: 0; transform: translateY(0.22em); }3165  to   { opacity: 1; transform: translateY(0); }3166}3167@keyframes peach-content-enter {3168  from { opacity: 0.96; transform: translateY(4px); }3169  to   { opacity: 1; transform: translateY(0); }3170}3171@keyframes peach-content-exit {3172  from { opacity: 1; transform: translateY(0); }3173  to   { opacity: 0.92; transform: translateY(-3px); }3174}3175@keyframes peach-screen-enter {3176  from { opacity: 0; transform: translateY(14px); }3177  to   { opacity: 1; transform: translateY(0); }3178}3179@keyframes peach-shell-fade-in {3180  from { opacity: 0; }3181  to   { opacity: 1; }3182}3183@keyframes peach-veil-in {3184  from { opacity: 0; }3185  to   { opacity: 1; }3186}3187@keyframes peach-lock-settle {3188  0%   { transform: scale(0.9); }3189  65%  { transform: scale(1.08); }3190  100% { transform: scale(1); }3191}3192@keyframes peach-copy-confirm {3193  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3194  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); }3195}3196@keyframes peach-copy-retreat {3197  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); }3198  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3199}3200@keyframes peach-copy-flood {3201  from { opacity: 0; transform: scaleX(0.15); }3202  to   { opacity: 1; transform: scaleX(1); }3203}3204@keyframes peach-copy-icon-settle {3205  from  { transform: scale(0.84); }3206  70%   { transform: scale(1.08); }3207  to    { transform: scale(1); }3208}3209@keyframes peach-copy-sheen-retreat {3210  from { opacity: 1; transform: scaleX(1); }3211  to   { opacity: 0; transform: scaleX(0.15); }3212}3213@keyframes peach-copy-drain {3214  from { width: 100%; }3215  to   { width: 0; }3216}3217@keyframes peach-shake {3218  0%, 100% { transform: translateX(0); }3219  20%      { transform: translateX(-6px); }3220  40%      { transform: translateX(6px); }3221  60%      { transform: translateX(-4px); }3222  80%      { transform: translateX(4px); }3223}32243225@keyframes pip-pulse {3226  0% { transform: scale(1); }3227  40% { transform: scale(2.2); }3228  100% { transform: scale(1); }3229}323032313232/* ── Password generator ── */3233.peach-pwgen-body {3234  flex: 1; overflow-y: auto;3235  display: flex; flex-direction: column;3236}3237.peach-policy-badge {3238  display: flex; align-items: center;3239  padding: 6px 20px 0;3240  font-size: 0.625rem; font-family: Inter, sans-serif;3241  color: var(--peach-t2); letter-spacing: 0.04em;3242}3243.peach-pwgen-display {3244  padding: 14px 20px 12px;3245  border-bottom: 1px solid var(--peach-t3);3246  display: flex; align-items: flex-start; gap: 10px;3247}3248.peach-pwgen-display-row {3249  display: flex;3250  align-items: flex-start;3251  gap: 8px;3252  padding-bottom: 8px;3253  border-bottom: 1px solid var(--peach-t3);3254}3255.peach-pwgen-output {3256  flex: 1; min-width: 0; margin: 0;3257  font-family: "IBM Plex Mono", monospace;3258  font-size: 0.8125rem; color: var(--peach-t0);3259  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3260  white-space: normal;3261  padding: 10px 12px;3262  background: var(--peach-t4);3263  border-radius: 6px;3264  min-height: 36px;3265}3266.peach-pwgen-output-display {3267  flex: 1;3268  min-width: 0;3269  margin: 0;3270  font-family: var(--font-display);3271  font-style: italic;3272  font-weight: 300;3273  font-size: 32px;3274  line-height: 1.05;3275  color: var(--peach-t0);3276  word-break: break-all;3277  overflow-wrap: break-word;3278  white-space: normal;3279  letter-spacing: 0.02em;3280}3281.peach-pwgen-display-actions {3282  display: flex;3283  flex-direction: column;3284  gap: 4px;3285  flex-shrink: 0;3286  margin-top: 2px;3287}3288.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3289.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3290.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3291.peach-pwgen-len-num {3292  font-family: "IBM Plex Mono", monospace;3293  font-size: 0.75rem; color: var(--peach-accent);3294}3295.peach-pwgen-len-num--edit {3296  cursor: text;3297  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3298}3299.peach-pwgen-len-input {3300  font-family: "IBM Plex Mono", monospace;3301  font-size: 0.75rem;3302  color: var(--peach-accent);3303  background: transparent;3304  border: none;3305  border-bottom: 1px solid var(--peach-accent);3306  outline: none;3307  width: 32px;3308  text-align: right;3309  padding: 0;3310}3311.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3312.peach-pwgen-toggles { display: flex; flex-direction: column; }3313.peach-pwgen-charset-pills {3314  display: flex;3315  gap: 6px;3316  flex-wrap: wrap;3317}3318.peach-pwgen-pill {3319  padding: 4px 11px;3320  border-radius: 999px;3321  border: 1px solid var(--peach-t3);3322  background: transparent;3323  color: var(--peach-t2);3324  font-family: "IBM Plex Mono", monospace;3325  font-size: 0.5625rem;3326  letter-spacing: 0.08em;3327  cursor: pointer;3328  transition: all 150ms ease;3329}3330.peach-pwgen-pill.is-on {3331  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3332  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3333  color: var(--peach-accent);3334}3335.peach-pwgen-pill:not(.is-on):hover {3336  color: var(--peach-t1);3337  border-color: var(--peach-t2);3338}3339.peach-pwgen-use-btn {3340  width: 100%;3341  min-height: 34px;3342  border-radius: 8px;3343  margin-top: 2px;3344}3345.peach-generator-constraint-note {3346  font-family: 'IBM Plex Mono', monospace;3347  font-size: 10px;3348  color: var(--peach-t3);3349  letter-spacing: 0.04em;3350  margin: 0;3351  transition: opacity 200ms ease;3352}3353.peach-pwgen-toggle-row {3354  display: flex; align-items: center; justify-content: space-between;3355  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3356}3357.peach-pwgen-toggle-row:last-child { border-bottom: none; }3358.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }33593360/* Peach popup should not expose native scrollbars on internal panels. */3361.peach-settings-body,3362.peach-new-body,3363.peach-pwgen-body,3364.lock-screen,3365.peach-import-preview {3366  scrollbar-width: none;3367  -ms-overflow-style: none;3368  overscroll-behavior: contain;3369}3370.peach-settings-body::-webkit-scrollbar,3371.peach-new-body::-webkit-scrollbar,3372.peach-pwgen-body::-webkit-scrollbar,3373.lock-screen::-webkit-scrollbar,3374.peach-import-preview::-webkit-scrollbar {3375  width: 0;3376  height: 0;3377  display: none;3378}33793380.lock-screen {3381  height: 100%;3382  min-height: 100%;3383  overflow-y: auto;3384  padding: 18px 18px 16px;3385  gap: 14px;3386  grid-template-rows: auto auto auto 1fr auto;3387  align-content: stretch;3388  position: relative;3389  isolation: isolate;3390}3391.peach-screen.lock-screen--vault-stage {3392  display: flex;3393  flex-direction: column;3394  justify-content: flex-start;3395  gap: 18px;3396  padding: 20px 18px 18px;3397  overflow: hidden;3398}3399.peach-screen.lock-screen--vault-stage .peach-lock-panel {3400  margin-top: 0;3401}3402.lock-screen--onboarding {3403  display: flex;3404  flex-direction: column;3405  gap: 12px;3406  justify-content: flex-start;3407}34083409.lock-screen::before {3410  content: "";3411  position: absolute;3412  inset: 12px 18px auto auto;3413  width: 160px;3414  height: 160px;3415  border-radius: 999px;3416  background:3417    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%);3418  filter: blur(6px);3419  opacity: 0.7;3420  pointer-events: none;3421  z-index: 0;3422}34233424.peach-lock-rune-string {3425  flex: 1;3426  display: flex;3427  align-items: center;3428  justify-content: center;3429  gap: 6px;3430  font-family: PeachScript, monospace;3431  font-size: 0.8125rem;3432  letter-spacing: 0.05em;3433  pointer-events: none;3434  user-select: none;3435  position: relative;3436  z-index: 1;3437}34383439.peach-lock-rune-string span {3440  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3441  text-shadow:3442    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3443    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3444  transition: color 0.9s ease, text-shadow 0.9s ease;3445}34463447.peach-lock-rune-string span.is-glowing {3448  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3449  text-shadow:3450    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3451    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3452}34533454.lock-screen-header {3455  display: flex;3456  align-items: center;3457  justify-content: space-between;3458  position: relative;3459  z-index: 1;3460}34613462.lock-password-input.shake {3463  animation: peach-shake 300ms ease-in-out;3464}34653466.peach-hint-error {3467  color: rgba(220, 80, 60, 0.92);3468}34693470.peach-onboarding-headline {3471  margin: 0;3472  font-family: var(--font-display);3473  font-size: 35px;3474  line-height: 0.88;3475  font-style: italic;3476  font-weight: 400;3477  max-width: 252px;3478}34793480.peach-lock-copy {3481  display: grid;3482  gap: 8px;3483  position: relative;3484  z-index: 1;3485}34863487.peach-lock-copy--onboarding {3488  gap: 10px;3489}34903491.peach-lock-hero {3492  position: relative;3493  z-index: 1;3494  display: grid;3495  gap: 8px;3496  min-height: 0;3497  padding: 4px 2px 0;3498  border: none;3499  border-radius: 0;3500  background: transparent;3501  box-shadow: none;3502}3503.peach-lock-hero-art {3504  position: absolute;3505  right: -8px;3506  top: -6px;3507  width: 120px;3508  height: 120px;3509  display: flex;3510  align-items: center;3511  justify-content: center;3512  pointer-events: none;3513  opacity: 0.12;3514  filter: saturate(0.9);3515}3516.peach-lock-hero-mark {3517  width: 100%;3518  height: 100%;3519}3520/* Peach body stays brand-peach across every accent — we don't want a3521   green or blue peach when sage/sky is selected. Leaf + vein keep the3522   sage tint because a real peach has a sage leaf. In the new brand-kit3523   mark the leaf is path 1 and the vein stroke is path 2; the body and3524   back-lobe (paths 3 + 4) must stay untouched. */3525.peach-lock-hero-mark path:nth-child(1) {3526  fill: rgba(123, 144, 96, 0.88);3527}3528.peach-lock-hero-mark path:nth-child(2) {3529  stroke: rgba(94, 122, 66, 0.95);3530}3531.peach-lock-hero > *:not(.peach-lock-hero-art) {3532  position: relative;3533  z-index: 1;3534}35353536.peach-lock-eyebrow {3537  display: inline-flex;3538  align-items: center;3539  width: fit-content;3540  padding: 4px 9px;3541  border-radius: 999px;3542  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3543  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3544  color: var(--peach-t0);3545  font-family: "IBM Plex Mono", monospace;3546  font-size: 0.5rem;3547  letter-spacing: 0.18em;3548  text-transform: uppercase;3549}35503551.peach-lock-label-row {3552  display: flex;3553  align-items: center;3554  justify-content: space-between;3555  margin-bottom: 0;3556}35573558.peach-lock-reveal-btn {3559  display: inline-flex;3560  align-items: center;3561  gap: 4px;3562  background: none;3563  border: none;3564  cursor: pointer;3565  font-family: "IBM Plex Mono", monospace;3566  font-size: 0.5625rem;3567  letter-spacing: 0.06em;3568  color: var(--peach-t2);3569  padding: 2px 0;3570  transition: color 150ms ease;3571}35723573.peach-lock-reveal-btn:hover {3574  color: var(--peach-t1);3575}35763577.peach-lock-warning {3578  color: rgba(220, 80, 60, 0.85) !important;3579  line-height: 1.5;3580}35813582.peach-onboarding-cards {3583  display: grid;3584  gap: 8px;3585  position: relative;3586  z-index: 1;3587}35883589.peach-lock-panel {3590  position: relative;3591  z-index: 1;3592  display: grid;3593  gap: 9px;3594  padding: 14px 16px 15px;3595  border-radius: 18px;3596  border: 1px solid var(--peach-t3);3597  background:3598    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3599  box-shadow:3600    inset 0 1px 0 rgba(240, 232, 216, 0.04),3601    0 12px 28px rgba(0, 0, 0, 0.12);3602}36033604/* Glass surface — lock panel and settings groups */3605.peach-glass {3606  background: rgba(26, 20, 16, 0.65);3607  border: 1px solid rgba(255, 255, 255, 0.08);3608  border-radius: 12px;3609  backdrop-filter: blur(12px) saturate(1.4);3610  -webkit-backdrop-filter: blur(12px) saturate(1.4);3611}36123613@supports not (backdrop-filter: blur(1px)) {3614  .peach-glass {3615    background: rgba(26, 20, 16, 0.92);3616    border: 1px solid rgba(255, 255, 255, 0.10);3617    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3618  }3619}36203621.light .peach-glass,3622[data-theme="light"] .peach-glass {3623  background: rgba(240, 233, 223, 0.72);3624  border: 1px solid rgba(26, 18, 8, 0.08);3625  backdrop-filter: blur(12px) saturate(1.2);3626  -webkit-backdrop-filter: blur(12px) saturate(1.2);3627}36283629@supports not (backdrop-filter: blur(1px)) {3630  .light .peach-glass,3631  [data-theme="light"] .peach-glass {3632    background: rgba(240, 233, 223, 0.97);3633    border: 1px solid rgba(26, 18, 8, 0.10);3634  }3635}36363637/* Lock panel keeps its own border-radius over the generic glass token */3638.peach-lock-panel.peach-glass {3639  border-radius: 18px;3640  background: rgba(26, 20, 16, 0.65);3641  border: 1px solid rgba(255, 255, 255, 0.08);3642  box-shadow:3643    inset 0 1px 0 rgba(255, 255, 255, 0.05),3644    0 12px 28px rgba(0, 0, 0, 0.3);3645}36463647.light .peach-lock-panel.peach-glass,3648[data-theme="light"] .peach-lock-panel.peach-glass {3649  background: rgba(240, 233, 223, 0.82);3650  border: 1px solid rgba(26, 18, 8, 0.08);3651  box-shadow:3652    inset 0 1px 0 rgba(255, 255, 255, 0.4),3653    0 8px 24px rgba(80, 56, 32, 0.15);3654}36553656@supports not (backdrop-filter: blur(1px)) {3657  .peach-lock-panel.peach-glass {3658    background: rgba(26, 20, 16, 0.92);3659    box-shadow:3660      inset 0 1px 0 rgba(255, 255, 255, 0.05),3661      0 12px 28px rgba(0, 0, 0, 0.4);3662  }3663  .light .peach-lock-panel.peach-glass,3664  [data-theme="light"] .peach-lock-panel.peach-glass {3665    background: rgba(240, 233, 223, 0.98);3666  }3667}36683669.peach-lock-panel--secondary {3670  gap: 12px;3671}36723673.peach-lock-panel-header {3674  display: flex;3675  align-items: baseline;3676  justify-content: space-between;3677  gap: 12px;3678}36793680.peach-lock-option-grid {3681  display: grid;3682  gap: 10px;3683}36843685.peach-lock-option {3686  width: 100%;3687  display: grid;3688  gap: 6px;3689  padding: 14px 15px;3690  border-radius: 16px;3691  border: 1px solid rgba(240, 232, 216, 0.08);3692  background: rgba(240, 232, 216, 0.02);3693  color: var(--peach-t0);3694  text-align: left;3695  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3696}36973698.peach-lock-option:hover {3699  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3700  background: rgba(240, 232, 216, 0.04);3701  transform: translateY(-1px);3702}37033704.peach-lock-option-title {3705  font-size: 0.75rem;3706  color: var(--peach-t0);3707}37083709.peach-lock-option-copy {3710  font-size: 0.6875rem;3711  line-height: 1.55;3712  color: var(--peach-t1);3713}37143715.peach-onboarding-stack {3716  margin-top: 2px;3717}3718.peach-lock-panel-footer {3719  display: grid;3720  gap: 6px;3721  margin-top: 2px;3722  padding-top: 10px;3723  border-top: 1px solid rgba(240, 232, 216, 0.06);3724}37253726/* ── Restore tab view ─────────────────────────────────────────────────────3727   Tab-based restore screen replacing the old three-card picker. */37283729.peach-restore-tabview {3730  overflow: hidden;3731}37323733.peach-restore-tabcard {3734  flex: 1;3735  display: flex;3736  flex-direction: column;3737  gap: 0;3738  padding: 0;3739  overflow: hidden;3740  cursor: default;3741  user-select: none;3742  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3743}37443745/* ── Tab selector ─────────────────────────────────────────────────────── */37463747.peach-restore-tabs {3748  display: flex;3749  justify-content: space-around;3750  padding: 14px 10px 10px;3751  border-bottom: 1px solid var(--peach-t3);3752  gap: 2px;3753  overflow: hidden;3754  scrollbar-width: none;3755}3756.peach-restore-tabs::-webkit-scrollbar { display: none; }37573758.peach-restore-tab {3759  background: none;3760  border: none;3761  cursor: pointer;3762  padding: 3px 2px;3763  font-family: 'Cormorant Garamond', Georgia, serif;3764  font-style: italic;3765  font-size: 11px;3766  color: var(--peach-t2);3767  transition: color 150ms ease, text-shadow 150ms ease;3768  flex: 1;3769  min-width: 0;3770  text-align: center;3771  white-space: nowrap;3772  overflow: hidden;3773  text-overflow: ellipsis;3774}3775.peach-restore-tab:hover {3776  color: var(--peach-accent);3777  text-shadow:3778    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3779    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3780}3781.peach-restore-tab.is-active {3782  color: var(--peach-accent);3783  text-shadow:3784    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3785    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3786}37873788/* ── Content area ─────────────────────────────────────────────────────── */37893790.peach-restore-content {3791  padding: 16px 16px 14px;3792  display: flex;3793  flex-direction: column;3794  gap: 8px;3795  overflow: hidden;3796  scrollbar-width: none;3797  flex: 1;3798}3799.peach-restore-content::-webkit-scrollbar { display: none; }3800.peach-restore-content > * {3801  overflow: hidden;3802  scrollbar-width: none;3803}3804.peach-restore-content > *::-webkit-scrollbar { display: none; }38053806/* ── Shared tab inner layout ──────────────────────────────────────────── */38073808.peach-rt-symbols,3809.peach-rt-csv,3810.peach-rt-phone,3811.peach-restore-codex {3812  display: flex;3813  flex-direction: column;3814  gap: 8px;3815  overflow: hidden;3816}38173818.peach-restore-codex {3819  min-height: 0;3820  justify-content: center;3821}38223823.peach-restore-codex-title {3824  margin: 0;3825  font-family: var(--font-display);3826  font-size: 1rem;3827  font-style: italic;3828  color: var(--peach-t0);3829}38303831.peach-restore-codex-copy {3832  margin: 0;3833  font-size: 0.75rem;3834  line-height: 1.5;3835  color: var(--peach-t1);3836}38373838.peach-restore-codex-button {3839  width: 100%;3840  justify-content: center;3841}38423843.peach-rt-submit {3844  width: 100%;3845}38463847.peach-rt-error {3848  margin: 0;3849  font-size: 0.6875rem;3850  color: var(--peach-breach);3851  line-height: 1.4;3852}38533854/* ── PeachScript tab ──────────────────────────────────────────────────── */38553856.peach-restore-symbols-textarea {3857  font-family: 'PeachScript', monospace;3858  font-size: 13px;3859  line-height: 1.9;3860  letter-spacing: 0.1em;3861  word-break: break-all;3862  resize: none;3863  width: 100%;3864  min-height: 56px;3865  max-height: 72px;3866  overflow: hidden;3867  scrollbar-width: none;3868  -ms-overflow-style: none;3869  box-sizing: border-box;3870  padding: 6px 8px;3871  border-radius: 8px;3872  border: 1px solid var(--peach-t3);3873  background: rgba(240, 232, 216, 0.03);3874  color: var(--peach-t0);3875}3876.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3877.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }38783879.peach-restore-symbols-pass {3880  width: 100%;3881  box-sizing: border-box;3882  padding: 7px 10px;3883  border-radius: 8px;3884  border: 1px solid var(--peach-t3);3885  background: rgba(240, 232, 216, 0.03);3886  color: var(--peach-t0);3887  font-size: 0.8125rem;3888}3889.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }3890.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }38913892.peach-rt-divider {3893  text-align: center;3894  font-size: 0.6875rem;3895  color: var(--peach-t2);3896  font-style: italic;3897}38983899.peach-rt-file-label {3900  width: 100%;3901  justify-content: center;3902}39033904.peach-rt-anim-canvas {3905  width: 100%;3906  height: 180px;3907  border-radius: 10px;3908  overflow: hidden;3909  display: block;3910}39113912/* ── CSV tab ──────────────────────────────────────────────────────────── */39133914.peach-rt-csv-sources {3915  margin: 0;3916  font-size: 0.6875rem;3917  color: var(--peach-t2);3918  line-height: 1.5;3919  text-align: center;3920}39213922.peach-rt-csv-warning {3923  margin: 0;3924  font-family: "IBM Plex Mono", monospace;3925  font-size: 0.5625rem;3926  letter-spacing: 0.12em;3927  color: var(--peach-breach);3928  text-align: center;3929}39303931/* ── From Phone tab ───────────────────────────────────────────────────── */39323933.peach-rt-phone-code {3934  margin: 0;3935  text-align: center;3936  font-family: "IBM Plex Mono", monospace;3937  font-size: 22px;3938  letter-spacing: 0.18em;3939  color: var(--peach-t0);3940}39413942.peach-rt-phone-qr {3943  display: block;3944  width: 96px;3945  height: 96px;3946  margin: 0 auto;3947  border-radius: 6px;3948  image-rendering: pixelated;3949  overflow: hidden;3950}39513952.peach-rt-phone-hint {3953  margin: 0;3954  font-size: 0.6875rem;3955  color: var(--peach-t2);3956  line-height: 1.55;3957  text-align: center;3958}39593960/* ── Intro popup ──────────────────────────────────────────────────────── */39613962.peach-restore-intro-overlay {3963  position: absolute;3964  inset: 0;3965  z-index: 100;3966  display: flex;3967  align-items: center;3968  justify-content: center;3969  padding: 20px;3970  background: rgba(12, 10, 6, 0.7);3971  backdrop-filter: blur(4px);3972  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;3973}39743975.peach-restore-intro-card {3976  width: 100%;3977  display: flex;3978  flex-direction: column;3979  gap: 12px;3980  padding: 22px 20px 20px;3981  border-radius: 16px;3982  border: 1px solid var(--peach-t3);3983  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));3984  backdrop-filter: blur(4px);3985  -webkit-backdrop-filter: blur(4px);3986  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);3987}39883989.peach-restore-intro-headline {3990  margin: 0;3991  font-family: var(--font-display);3992  font-style: italic;3993  font-size: 20px;3994  font-weight: 400;3995  color: var(--peach-t0);3996}39973998.peach-restore-intro-body {3999  display: flex;4000  flex-direction: column;4001  gap: 8px;4002}4003.peach-restore-intro-body p {4004  margin: 0;4005  font-size: 0.75rem;4006  color: var(--peach-t1);4007  line-height: 1.5;4008}40094010.peach-restore-intro-btn {4011  width: 100%;4012  margin-top: 4px;4013}40144015/* Snapshot restore panel */4016.peach-snapshot-panel {4017  gap: 10px;4018  overflow-y: auto;4019  max-height: 340px;4020}4021.peach-snapshot-list {4022  display: flex;4023  flex-direction: column;4024  gap: 4px;4025}4026.peach-snapshot-row {4027  display: flex;4028  align-items: center;4029  justify-content: space-between;4030  width: 100%;4031  padding: 8px 10px;4032  border-radius: 8px;4033  border: 1px solid rgba(240, 232, 216, 0.07);4034  background: transparent;4035  cursor: pointer;4036  transition: border-color 120ms, background 120ms;4037  text-align: left;4038  gap: 8px;4039}4040.peach-snapshot-row:hover {4041  border-color: rgba(240, 232, 216, 0.14);4042  background: rgba(240, 232, 216, 0.03);4043}4044.peach-snapshot-row.is-selected {4045  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4046  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);4047}4048.peach-snapshot-time {4049  font-size: 11.5px;4050  color: var(--peach-t0);4051  flex: 1;4052}4053.peach-snapshot-count {4054  font-family: "IBM Plex Mono", monospace;4055  font-size: 0.625rem;4056  color: var(--peach-t2);4057  flex-shrink: 0;4058}4059.peach-snapshot-confirm {4060  display: flex;4061  flex-direction: column;4062  gap: 8px;4063  padding-top: 10px;4064  border-top: 1px solid rgba(240, 232, 216, 0.06);4065}4066.peach-snapshot-warning {4067  display: flex;4068  align-items: flex-start;4069  gap: 6px;4070  font-size: 10.5px;4071  color: rgba(220, 80, 60, 0.85);4072  line-height: 1.55;4073}4074.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }4075.peach-snapshot-confirm-row {4076  display: flex;4077  gap: 6px;4078  align-items: center;4079}4080.peach-snapshot-restore-btn {4081  width: 100%;4082}4083.peach-lock-hero--unlock .peach-lock-hero-art {4084  width: 112px;4085  height: 112px;4086  right: 0;4087  top: 2px;4088  opacity: 0.1;4089}40904091.peach-card {4092  border: 1px solid var(--peach-t3);4093  border-radius: 18px;4094  background:4095    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4096  box-shadow:4097    inset 0 0 0 1px var(--peach-border-accent),4098    inset 0 1px 0 rgba(240, 232, 216, 0.04),4099    0 12px 32px rgba(0, 0, 0, 0.14);4100  overflow: hidden;4101}41024103.peach-card-active {4104  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4105  box-shadow:4106    inset 0 1px 0 rgba(240, 232, 216, 0.05),4107    0 16px 38px rgba(0, 0, 0, 0.18),4108    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4109}41104111.peach-card-disabled {4112  opacity: 0.72;4113}41144115.peach-card-header {4116  width: 100%;4117  padding: 13px 16px 11px;4118  background: transparent;4119  color: var(--peach-t0);4120  display: flex;4121  justify-content: space-between;4122  align-items: center;4123  text-align: left;4124  font-size: 0.75rem;4125}41264127.peach-card-body {4128  padding: 0 16px 16px;4129  display: grid;4130  gap: 9px;4131}41324133.peach-card-tag {4134  color: var(--peach-t2);4135  font-family: "IBM Plex Mono", monospace;4136  font-size: 0.5625rem;4137  letter-spacing: 0.12em;4138  text-transform: uppercase;4139}41404141.peach-empty-copy {4142  display: grid;4143  gap: 6px;4144  color: var(--peach-t1);4145  font-size: 0.8125rem;4146}41474148.peach-lock-submit {4149  width: 100%;4150  box-shadow:4151    0 1px 0 rgba(255,255,255,0.10) inset,4152    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4153    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4154    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4155}41564157.peach-lock-secondary {4158  width: 100%;4159  border-color: var(--peach-t3);4160  background: rgba(240, 232, 216, 0.02);4161}41624163.peach-lock-secondary:hover {4164  background: rgba(240, 232, 216, 0.04);4165}41664167.peach-lock-note {4168  max-width: none;4169  line-height: 1.55;4170  margin: 0;4171}41724173.peach-overlay-action {4174  font-size: 0.625rem;4175  padding: 4px 8px;4176  letter-spacing: 0.06em;4177  min-width: 44px;4178  text-align: center;4179}41804181.peach-inline-action {4182  flex-shrink: 0;4183  font-size: 0.5625rem;4184  letter-spacing: 0.1em;4185  text-transform: uppercase;4186  padding: 4px 7px;4187}4188.peach-password-toggle-btn {4189  display: inline-flex;4190  align-items: center;4191  justify-content: center;4192  min-width: 30px;4193  min-height: 26px;4194  padding: 0 7px;4195  border: 1px solid var(--peach-t3);4196  border-radius: 999px;4197  background: rgba(240, 232, 216, 0.04);4198  color: var(--peach-t2);4199  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4200}4201.peach-password-toggle-btn:hover {4202  border-color: var(--peach-t2);4203  color: var(--peach-t0);4204  background: rgba(240, 232, 216, 0.06);4205}42064207.peach-new-textarea {4208  width: 100%;4209  min-height: 88px;4210  resize: vertical;4211  border: 0;4212  outline: none;4213  background: transparent;4214  color: var(--peach-t1);4215  font-family: "IBM Plex Mono", monospace;4216  font-size: 0.75rem;4217  line-height: 1.65;4218  caret-color: var(--peach-accent);4219}42204221.peach-new-textarea::placeholder {4222  color: var(--peach-t2);4223  opacity: 0.7;4224}42254226.peach-settings-actions {4227  display: grid;4228  gap: 8px;4229}42304231.peach-sync-section-label {4232  font-size: 0.6875rem;4233  color: var(--peach-t2);4234  text-transform: uppercase;4235  letter-spacing: 0.05em;4236}42374238.peach-sync-network-note {4239  margin: 0 0 6px;4240  font-size: 0.75rem;4241  color: var(--peach-t2);4242  line-height: 1.4;4243}42444245.peach-settings-row--tappable {4246  background: none;4247  border: none;4248  width: 100%;4249  text-align: left;4250  cursor: pointer;4251  color: var(--peach-t1);4252  font-size: 0.8125rem;4253}4254.peach-settings-row--tappable:hover {4255  color: var(--peach-t0);4256}42574258.peach-sync-pro-hint {4259  display: flex;4260  flex-direction: column;4261  align-items: flex-start;4262  gap: 8px;4263  padding: 12px 0 4px;4264}42654266.peach-sync-device-row {4267  display: flex;4268  justify-content: space-between;4269  align-items: center;4270  padding: 6px 0;4271  border-bottom: 1px solid var(--peach-t3);4272}42734274.peach-sync-device-info {4275  display: flex;4276  flex-direction: column;4277  gap: 2px;4278}42794280.peach-sync-device-name {4281  font-size: 0.8125rem;4282  color: var(--peach-t0);4283}42844285.peach-sync-device-meta {4286  font-size: 0.6875rem;4287  color: var(--peach-t2);4288}42894290.peach-sync-status-dot {4291  display: inline-block;4292  width: 8px;4293  height: 8px;4294  border-radius: 50%;4295  vertical-align: middle;4296}42974298.peach-sync-remove-btn {4299  color: var(--peach-breach);4300}43014302.peach-sync-advanced-row {4303  display: flex;4304  justify-content: space-between;4305  align-items: center;4306  padding: 6px 0;4307  gap: 12px;4308}43094310.peach-sync-advanced-info {4311  display: flex;4312  flex-direction: column;4313  gap: 2px;4314  flex: 1;4315}43164317.peach-sync-advanced-name {4318  font-size: 0.8125rem;4319  color: var(--peach-t0);4320}43214322.peach-sync-reset-confirm {4323  display: flex;4324  flex-direction: column;4325  gap: 8px;4326  padding: 10px;4327  border: 1px solid var(--peach-breach);4328  border-radius: 10px;4329  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4330}43314332.peach-sync-reset-confirm-headline {4333  font-size: 0.8125rem;4334  font-weight: 600;4335  color: var(--peach-t0);4336  margin: 0;4337}43384339.peach-sync-reset-confirm-body {4340  font-size: 0.75rem;4341  color: var(--peach-t1);4342  margin: 0;4343  line-height: 1.4;4344}43454346.peach-btn--danger {4347  background: var(--peach-breach);4348  color: #fff;4349  border-color: var(--peach-breach);4350}4351.peach-btn--danger:hover:not(:disabled) {4352  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4353}4354.peach-btn--danger:disabled {4355  opacity: 0.55;4356  cursor: not-allowed;4357}43584359.peach-sync-hero-icon {4360  color: var(--peach-t1);4361  opacity: 0.85;4362}43634364.peach-import-preview {4365  margin-bottom: 12px;4366  max-height: 152px;4367  overflow-y: auto;4368  border: 1px solid var(--peach-t3);4369  border-radius: 10px;4370  padding: 8px 10px;4371  display: grid;4372  gap: 8px;4373  background: rgba(240, 232, 216, 0.02);4374}43754376.peach-import-preview-row {4377  display: flex;4378  justify-content: space-between;4379  gap: 10px;4380  font-size: 0.6875rem;4381  color: var(--peach-t1);4382}43834384.peach-import-preview-title {4385  color: var(--peach-t0);4386  flex: 1;4387  min-width: 0;4388  overflow: hidden;4389  text-overflow: ellipsis;4390  white-space: nowrap;4391}43924393.peach-import-preview-meta {4394  color: var(--peach-t2);4395  flex-shrink: 0;4396  max-width: 42%;4397  overflow: hidden;4398  text-overflow: ellipsis;4399  white-space: nowrap;4400}44014402.peach-import-preview-more {4403  color: var(--peach-t2);4404  font-size: 0.625rem;4405}44064407.peach-restore-copy {4408  margin: 0;4409  color: var(--peach-t1);4410  font-size: 0.6875rem;4411  line-height: 1.6;4412}44134414.peach-restore-warning {4415  padding: 10px 12px;4416  border-radius: 12px;4417  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4418  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4419  color: var(--peach-t0);4420  font-size: 0.6875rem;4421  line-height: 1.55;4422}44234424.peach-provider-chips {4425  display: flex;4426  flex-wrap: wrap;4427  gap: 6px;4428}44294430.peach-provider-chip {4431  display: inline-flex;4432  align-items: center;4433  padding: 5px 8px;4434  border-radius: 999px;4435  border: 1px solid var(--peach-t3);4436  background: rgba(240, 232, 216, 0.02);4437  color: var(--peach-t1);4438  font-family: "IBM Plex Mono", monospace;4439  font-size: 0.5rem;4440  letter-spacing: 0.08em;4441  text-transform: uppercase;4442}44434444.peach-restore-file,4445.peach-restore-input {4446  width: 100%;4447  border-radius: 10px;4448  border: 1px solid var(--peach-t3);4449  background: var(--peach-s2);4450  color: var(--peach-t0);4451  font-size: 0.75rem;4452}44534454.peach-restore-file {4455  padding: 9px 10px;4456}44574458.peach-restore-file::file-selector-button {4459  margin-right: 10px;4460  padding: 7px 10px;4461  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4462  border-radius: 999px;4463  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4464  color: var(--peach-t0);4465  font-size: 0.625rem;4466  letter-spacing: 0.08em;4467  text-transform: uppercase;4468  cursor: pointer;4469}44704471.peach-restore-input {4472  padding: 10px 12px;4473}44744475.peach-auth-grid {4476  display: grid;4477  gap: 10px;4478}44794480.peach-import-summary {4481  color: var(--peach-t1);4482  font-size: 0.75rem;4483  line-height: 1.6;4484  margin-bottom: 12px;4485}44864487.peach-restore-error {4488  color: rgba(220, 80, 60, 0.95);4489  font-size: 0.75rem;4490  line-height: 1.55;4491}44924493.peach-passkey-card {4494  max-width: 400px;4495  margin: auto 16px;4496  align-self: center;4497  width: calc(100% - 32px);4498}44994500/* Center the approval card vertically inside the overlay-view (which sets4501 * flex-direction: column without justify-content). Without this, the card4502 * sits at the top with a tall empty band below — looks unfinished on the4503 * 320px popup. */4504.peach-overlay-view:has(.peach-passkey-card) {4505  justify-content: center;4506}45074508.peach-pro-badge {4509  padding: 2px 6px;4510  border-radius: 999px;4511  font-family: var(--font-ui);4512  font-size: 0.625rem;4513  letter-spacing: 0.08em;4514  text-transform: uppercase;4515  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4516  color: var(--peach-accent);4517}45184519/* ── Shortcuts rebind table ─────────────────────────────────── */4520.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4521.peach-shortcut-row {4522  display: flex;4523  align-items: center;4524  gap: 10px;4525  padding: 6px 0;4526}4527.peach-shortcut-row-label {4528  flex: 1;4529  font-size: 0.75rem;4530  color: var(--peach-t0);4531}4532.peach-shortcut-chip {4533  min-width: 64px;4534  padding: 4px 10px;4535  border-radius: 6px;4536  border: 1px solid var(--peach-t3);4537  background: var(--peach-input-bg, var(--surface-card));4538  color: var(--peach-t0);4539  font-family: var(--font-mono);4540  font-size: 0.6875rem;4541  letter-spacing: 0.04em;4542  cursor: pointer;4543  text-align: center;4544  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4545}4546.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4547.peach-shortcut-chip.is-custom {4548  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4549  color: var(--peach-accent);4550}4551.peach-shortcut-chip.is-capturing {4552  border-color: var(--peach-accent);4553  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4554  color: var(--peach-accent);4555  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4556}4557@keyframes peach-shortcut-capture-pulse {4558  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4559  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4560}4561.peach-shortcut-reset {4562  background: transparent;4563  border: none;4564  cursor: pointer;4565  color: var(--peach-t2);4566  padding: 4px 6px;4567  border-radius: 5px;4568  font-size: 0.875rem;4569  line-height: 1;4570  transition: color 120ms ease, background 120ms ease;4571}4572.peach-shortcut-reset:hover {4573  color: var(--peach-t0);4574  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4575}4576.peach-shortcuts-conflict {4577  margin: 4px 0 0;4578  padding: 8px 10px;4579  border-radius: 7px;4580  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4581  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4582  font-family: var(--font-mono);4583  font-size: 0.6875rem;4584  color: var(--peach-t0);4585}45864587/* ── Help dialog overlay (? to open) ────────────────────────── */4588.peach-shortcuts-help-backdrop {4589  position: fixed;4590  inset: 0;4591  background: rgba(0, 0, 0, 0.55);4592  backdrop-filter: blur(2px);4593  display: flex;4594  align-items: center;4595  justify-content: center;4596  z-index: 1000;4597  animation: peach-help-fade-in 140ms ease forwards;4598}4599@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4600.peach-shortcuts-help-card {4601  width: min(320px, 92vw);4602  max-height: 80vh;4603  overflow-y: auto;4604  border-radius: 14px;4605  border: 1px solid var(--peach-t3);4606  background: var(--peach-bg);4607  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4608  padding: 16px 18px 18px;4609  display: flex;4610  flex-direction: column;4611  gap: 12px;4612}4613.peach-shortcuts-help-head {4614  display: flex; align-items: center; justify-content: space-between;4615}4616.peach-shortcuts-help-head h3 {4617  margin: 0;4618  font-family: var(--font-display);4619  font-style: italic;4620  font-weight: 400;4621  font-size: 22px;4622  color: var(--peach-t0);4623}4624.peach-shortcuts-help-close {4625  background: transparent;4626  border: none;4627  color: var(--peach-t2);4628  cursor: pointer;4629  font-size: 0.875rem;4630  padding: 4px 8px;4631  border-radius: 5px;4632}4633.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4634.peach-shortcuts-help-body ul {4635  list-style: none; padding: 0; margin: 4px 0 12px;4636  display: grid; gap: 8px;4637}4638.peach-shortcuts-help-body li {4639  display: flex; align-items: center; justify-content: space-between; gap: 12px;4640  font-size: 0.75rem; color: var(--peach-t0);4641}4642.peach-shortcuts-help-body kbd {4643  font-family: var(--font-mono);4644  font-size: 0.6875rem;4645  padding: 3px 8px;4646  border-radius: 6px;4647  background: var(--surface-card);4648  border: 1px solid var(--peach-t3);4649  color: var(--peach-accent);4650  letter-spacing: 0.04em;4651}46524653/* ── Pro promo on Account screen ────────────────────────────── */4654.peach-pro-promo {4655  position: relative;4656  border-radius: 14px;4657  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4658  background:4659    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4660    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4661    var(--surface-card);4662  overflow: hidden;4663  margin-bottom: 14px;4664}4665.peach-pro-promo-glow {4666  position: absolute;4667  inset: -40% -20% auto auto;4668  width: 220px; height: 220px;4669  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4670  pointer-events: none;4671  filter: blur(8px);4672}4673.peach-pro-promo-inner {4674  position: relative;4675  padding: 18px 18px 16px;4676}4677.peach-pro-promo-title {4678  font-family: var(--font-display);4679  font-style: italic;4680  font-weight: 400;4681  font-size: 28px;4682  line-height: 1;4683  letter-spacing: -0.005em;4684  color: var(--peach-t0);4685  margin: 0 0 4px;4686}4687.peach-pro-promo-tagline {4688  font-family: var(--font-mono);4689  font-size: 0.625rem;4690  letter-spacing: 0.06em;4691  color: var(--peach-t2);4692  margin: 0 0 14px;4693}4694.peach-pro-promo-list {4695  list-style: none;4696  margin: 0 0 16px;4697  padding: 0;4698  display: grid;4699  gap: 9px;4700}4701.peach-pro-promo-list li {4702  display: flex;4703  align-items: flex-start;4704  gap: 9px;4705  font-size: 0.75rem;4706  color: var(--peach-t1);4707  line-height: 1.4;4708}4709.peach-pro-promo-list svg {4710  width: 14px;4711  height: 14px;4712  flex-shrink: 0;4713  color: var(--peach-accent);4714  margin-top: 2px;4715}4716.peach-pro-promo-list span {4717  color: var(--peach-t0);4718}4719.peach-pro-promo-cta {4720  width: 100%;4721  background: var(--peach-accent);4722  color: #fff;4723  border: none;4724  padding: 9px 12px;4725  border-radius: 9px;4726  font-size: 0.75rem;4727  font-weight: 500;4728  font-family: var(--font-ui);4729  letter-spacing: 0.02em;4730  text-decoration: none;4731  display: inline-flex;4732  align-items: center;4733  justify-content: center;4734  cursor: pointer;4735  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4736  box-shadow: 0 2px 16px var(--peach-glow);4737}4738.peach-pro-promo-cta:hover {4739  filter: brightness(1.07);4740  box-shadow: 0 4px 24px var(--peach-glow);4741  transform: translateY(-1px);4742}4743.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }47444745.peach-pro-or-divider {4746  display: flex;4747  align-items: center;4748  gap: 10px;4749  margin: 4px 0 12px;4750  font-family: var(--font-mono);4751  font-size: 0.625rem;4752  letter-spacing: 0.06em;4753  color: var(--peach-t2);4754  text-transform: uppercase;4755}4756.peach-pro-or-divider::before,4757.peach-pro-or-divider::after {4758  content: "";4759  flex: 1;4760  height: 1px;4761  background: var(--peach-t3);4762}47634764.peach-loading {4765  position: absolute;4766  inset: 0;4767  display: flex;4768  align-items: center;4769  justify-content: center;4770  background: var(--bg);4771  animation: peach-loading-pulse 1.2s ease-in-out infinite;4772}47734774@keyframes peach-loading-pulse {4775  0%, 100% { opacity: 0.6; }4776  50% { opacity: 1; }4777}47784779/* ── Health Dashboard ─────────────────────────────────────────────────── */4780.peach-health-body {4781  flex: 1;4782  overflow-y: auto;4783  display: flex;4784  flex-direction: column;4785  /* Hide the platform scrollbar — every other scrollable surface in the4786   * popup hides it; the Health view was the one outlier and it ruined the4787   * polish. Behavior unchanged, just no rail rendered. */4788  scrollbar-width: none;4789  -ms-overflow-style: none;4790}4791.peach-health-body::-webkit-scrollbar { display: none; }47924793/* Loading screen for the Vault Health view. The advanced report computation4794 * can run for a few seconds on a large vault — without a clear loading4795 * screen the surface looked broken (the entry view bleeds through the4796 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4797.peach-health-loading-screen {4798  flex: 1;4799  display: flex;4800  flex-direction: column;4801  align-items: center;4802  justify-content: center;4803  gap: 14px;4804  padding: 32px 28px;4805  text-align: center;4806}48074808.peach-health-loading-glyph {4809  width: 48px;4810  height: 48px;4811  display: flex;4812  align-items: center;4813  justify-content: center;4814  border-radius: 14px;4815  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4816  color: var(--peach-accent);4817}48184819.peach-health-loading-title {4820  margin: 0;4821  font-family: var(--font-display);4822  font-style: italic;4823  font-weight: 300;4824  font-size: 19px;4825  line-height: 1.2;4826  color: var(--peach-t0);4827}48284829.peach-health-loading-copy {4830  margin: 0;4831  max-width: 240px;4832  font-size: 0.75rem;4833  line-height: 1.55;4834  color: var(--peach-t2);4835}48364837.peach-health-loading-track {4838  width: 200px;4839  height: 3px;4840  margin-top: 6px;4841  border-radius: 999px;4842  background: rgba(240, 232, 216, 0.06);4843  overflow: hidden;4844}48454846.peach-health-loading-fill {4847  width: 40%;4848  height: 100%;4849  border-radius: inherit;4850  background: linear-gradient(4851    90deg,4852    transparent 0%,4853    var(--peach-accent) 50%,4854    transparent 100%4855  );4856  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4857}48584859@keyframes peach-health-loading-sweep {4860  0%   { transform: translateX(-100%); }4861  100% { transform: translateX(350%); }4862}48634864[data-motion="reduce"] .peach-health-loading-fill,4865[data-motion="reduce"] .peach-health-loading-glyph svg path {4866  animation: none;4867}48684869.peach-health-summary {4870  padding: 10px 16px 6px;4871  font-family: "IBM Plex Mono", monospace;4872  font-size: 0.6875rem;4873}4874.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4875.peach-health-summary-ok { color: var(--peach-t2); }48764877.peach-health-check-row {4878  padding: 0 16px 10px;4879}4880.peach-health-check-btn {4881  width: 100%;4882  display: flex;4883  align-items: center;4884  justify-content: center;4885}48864887.peach-health-sections {4888  flex: 1;4889  display: flex;4890  flex-direction: column;4891}48924893.peach-health-section {4894  border-bottom: 1px solid var(--peach-t3);4895}48964897.peach-health-section-header {4898  width: 100%;4899  display: flex;4900  align-items: center;4901  justify-content: space-between;4902  padding: 9px 16px;4903  background: transparent;4904  cursor: pointer;4905  color: var(--peach-t0);4906}49074908.peach-health-section-title-row {4909  display: flex;4910  align-items: center;4911  gap: 8px;4912}49134914.peach-health-count-badge {4915  display: inline-flex;4916  align-items: center;4917  justify-content: center;4918  min-width: 20px;4919  height: 18px;4920  padding: 0 5px;4921  border-radius: 999px;4922  background: rgba(220,80,60,0.15);4923  border: 1px solid rgba(220,80,60,0.25);4924  font-family: "IBM Plex Mono", monospace;4925  font-size: 0.5625rem;4926  color: rgba(220,80,60,0.9);4927}49284929.peach-health-section-title {4930  font-family: "IBM Plex Mono", monospace;4931  font-size: 0.6875rem;4932  text-transform: uppercase;4933  letter-spacing: 0.1em;4934  color: var(--peach-t1);4935}49364937.peach-health-chevron {4938  color: var(--peach-t2);4939  transition: transform 200ms ease;4940  flex-shrink: 0;4941}4942.peach-health-chevron.is-expanded {4943  transform: rotate(180deg);4944}49454946.peach-health-section-body {4947  padding: 0 16px 10px;4948  display: flex;4949  flex-direction: column;4950  gap: 4px;4951}49524953.peach-health-row {4954  display: flex;4955  align-items: flex-start;4956  justify-content: space-between;4957  gap: 8px;4958  padding: 6px 8px;4959  border-radius: 8px;4960  background: rgba(240,232,216,0.02);4961}49624963.peach-health-row-info {4964  flex: 1;4965  min-width: 0;4966  display: flex;4967  flex-direction: column;4968  gap: 2px;4969}49704971.peach-health-row-name {4972  font-family: var(--font-display);4973  font-size: 0.9375rem;4974  font-style: italic;4975  font-weight: 400;4976  color: var(--peach-t0);4977  white-space: nowrap;4978  overflow: hidden;4979  text-overflow: ellipsis;4980}49814982.peach-health-row-meta {4983  font-family: "IBM Plex Mono", monospace;4984  font-size: 0.5625rem;4985  color: var(--peach-t2);4986  letter-spacing: 0.05em;4987}49884989.peach-health-fix-btn {4990  font-size: 0.5625rem;4991  letter-spacing: 0.08em;4992  text-transform: uppercase;4993  padding: 4px 7px;4994  flex-shrink: 0;4995  display: flex;4996  align-items: center;4997}49984999.peach-health-empty {5000  font-family: "IBM Plex Mono", monospace;5001  font-size: 0.625rem;5002  color: var(--peach-t2);5003  padding: 6px 0;5004}50055006.peach-health-loading {5007  font-family: "IBM Plex Mono", monospace;5008  font-size: 0.625rem;5009  color: var(--peach-t2);5010  padding: 6px 0;5011  display: flex;5012  align-items: center;5013  gap: 6px;5014}50155016.peach-health-loading::before {5017  content: "";5018  width: 10px;5019  height: 10px;5020  border: 1.5px solid var(--peach-t3);5021  border-top-color: var(--peach-accent);5022  border-radius: 50%;5023  animation: peach-spin 600ms linear infinite;5024}50255026@keyframes peach-spin {5027  to { transform: rotate(360deg); }5028}50295030.peach-spinner {5031  width: 32px;5032  height: 32px;5033  border: 2px solid var(--peach-s2);5034  border-top-color: var(--peach-accent);5035  border-radius: 50%;5036  margin: 0 auto 16px;5037  animation: peach-spin 0.8s linear infinite;5038}50395040.peach-progress-screen {5041  text-align: center;5042  padding: 32px 16px;5043}50445045.peach-progress-screen-title {5046  font-size: 0.8125rem;5047  color: var(--peach-t0);5048  margin-bottom: 16px;5049}50505051.peach-progress-screen-stage {5052  font-size: 0.6875rem;5053  color: var(--peach-t2);5054  min-height: 14px;5055}50565057.peach-progress-screen-note {5058  font-size: 0.625rem;5059  color: var(--peach-t2);5060  margin-top: 8px;5061}50625063.peach-pairing-body {5064  flex: 1;5065  overflow-y: auto;5066  display: flex;5067  flex-direction: column;5068}50695070.peach-pairing-content {5071  flex: 1;5072  display: flex;5073  flex-direction: column;5074  align-items: center;5075  justify-content: center;5076  gap: 14px;5077  padding: 28px 20px;5078  text-align: center;5079}50805081.peach-pairing-code-screen {5082  gap: 18px;5083}50845085.peach-pairing-headline {5086  font-family: var(--font-display);5087  font-style: italic;5088  font-weight: 300;5089  font-size: 28px;5090  color: var(--peach-t0);5091  margin: 0;5092  line-height: 1;5093}50945095.peach-pairing-subline {5096  font-size: 0.75rem;5097  color: var(--peach-t2);5098  max-width: 220px;5099  line-height: 1.5;5100  margin: 0;5101}51025103.peach-pairing-subline--center {5104  text-align: center;5105}51065107/* 6-digit pairing code — both display (.peach-pairing-code) and entry5108   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking5109   so the two modes feel like the same surface. */5110.peach-pairing-code {5111  font-family: "IBM Plex Mono", monospace;5112  font-size: 36px;5113  letter-spacing: 0.25em;5114  color: var(--peach-t0);5115  text-align: center;5116  padding: 24px 0;5117  text-shadow:5118    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),5119    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);5120  background: transparent;5121  border: 0;5122  cursor: default;5123  user-select: text;5124}51255126.peach-pairing-code--loading,5127.peach-pairing-code--expired {5128  font-size: 18px;5129  letter-spacing: 0.04em;5130  color: var(--peach-t2);5131  cursor: pointer;5132  text-shadow: none;5133}51345135.peach-pairing-qr-container {5136  display: flex;5137  flex-direction: column;5138  align-items: center;5139  gap: 10px;5140}51415142.peach-pairing-qr {5143  width: 240px;5144  height: 240px;5145  display: block;5146}51475148.peach-pairing-instruction {5149  font-size: 0.75rem;5150  color: var(--peach-t2);5151  text-align: center;5152  line-height: 1.5;5153  margin: 0;5154  max-width: 220px;5155}51565157.peach-pairing-expiry {5158  font-family: "IBM Plex Mono", monospace;5159  font-size: 13px;5160  letter-spacing: 0.06em;5161  color: var(--peach-t2);5162  margin: 0;5163}51645165.peach-pairing-regen {5166  font-size: 0.75rem;5167  color: var(--peach-accent);5168  background: transparent;5169  border: 0;5170  cursor: pointer;5171  padding: 4px 0;5172  text-decoration: underline;5173  text-underline-offset: 2px;5174}51755176.peach-pairing-code-input {5177  font-family: "IBM Plex Mono", monospace;5178  font-size: 36px;5179  letter-spacing: 0.25em;5180  color: var(--peach-t0);5181  background: transparent;5182  border: 0;5183  border-bottom: 1px solid var(--peach-t3);5184  outline: none;5185  text-align: center;5186  padding: 18px 0;5187  width: 220px;5188  caret-color: var(--peach-accent);5189  transition: border-color 160ms ease;5190}51915192.peach-pairing-code-input::placeholder {5193  color: var(--peach-t3);5194}51955196.peach-pairing-code-input:focus {5197  border-bottom-color: var(--peach-accent);5198}51995200.peach-pairing-toggle {5201  background: transparent;5202  border: 0;5203  color: var(--peach-t2);5204  font-size: 0.75rem;5205  padding: 8px 4px;5206  cursor: pointer;5207  transition: color 120ms ease;5208}52095210.peach-pairing-toggle:hover:not(:disabled) {5211  color: var(--peach-t1);5212}52135214.peach-pairing-toggle:disabled {5215  opacity: 0.5;5216  cursor: default;5217}52185219.peach-pairing-hint {5220  font-size: 0.6875rem;5221  color: var(--peach-t2);5222  margin: 0;5223  text-align: center;5224}52255226.peach-pairing-status {5227  display: flex;5228  align-items: center;5229  gap: 8px;5230  margin: 0;5231  font-size: 0.75rem;5232  color: var(--peach-t1);5233}52345235.peach-pairing-error {5236  margin: 0;5237  font-size: 0.6875rem;5238  color: var(--peach-breach);5239}52405241.peach-pairing-error--muted {5242  color: var(--peach-t2);5243}52445245.peach-pairing-spinner {5246  width: 12px;5247  height: 12px;5248  border: 1.5px solid var(--peach-t3);5249  border-top-color: var(--peach-accent);5250  border-radius: 50%;5251  animation: peach-spin 0.8s linear infinite;5252}52535254.peach-pairing-success-icon,5255.peach-pairing-error-icon,5256.peach-pairing-hero {5257  display: inline-flex;5258  align-items: center;5259  justify-content: center;5260}52615262/* Tag chips */5263.peach-tag-chip {5264  display: inline-flex;5265  align-items: center;5266  gap: 4px;5267  padding: 3px 8px;5268  border-radius: 999px;5269  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5270  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5271  color: var(--peach-t0);5272  font-family: "IBM Plex Mono", monospace;5273  font-size: 0.625rem;5274  letter-spacing: 0.04em;5275}52765277.peach-tag-chip-remove {5278  background: transparent;5279  border: none;5280  color: inherit;5281  opacity: 0.6;5282  cursor: pointer;5283  padding: 0;5284  font-size: 0.75rem;5285  line-height: 1;5286}52875288.peach-tag-chip-remove:hover {5289  opacity: 1;5290}52915292/* Tag input */5293.peach-tag-input-wrap {5294  border-bottom: 1px solid var(--peach-t3);5295}52965297.peach-tag-suggestions {5298  display: flex;5299  flex-wrap: wrap;5300  gap: 4px;5301  padding: 6px 0;5302}53035304.peach-tag-suggestion {5305  padding: 2px 8px;5306  border-radius: 999px;5307  border: 1px solid var(--peach-t3);5308  background: var(--peach-s2);5309  color: var(--peach-t1);5310  font-family: "IBM Plex Mono", monospace;5311  font-size: 0.625rem;5312  cursor: pointer;5313  transition: border-color 80ms ease, background 80ms ease;5314}53155316.peach-tag-suggestion:hover {5317  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5318  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5319}53205321/* Identity suggestions — shown below username/email inputs in new-entry form */5322@keyframes peach-suggest-in {5323  from { opacity: 0; transform: translateY(-4px); }5324  to   { opacity: 1; transform: none; }5325}53265327.peach-identity-suggestions {5328  display: flex;5329  flex-direction: column;5330  gap: 1px;5331  margin-top: 4px;5332  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5333}53345335.peach-identity-filter-row {5336  display: flex;5337  align-items: center;5338  gap: 4px;5339  padding: 2px 0 5px;5340}53415342.peach-identity-collapse-btn {5343  margin-left: auto;5344  background: transparent;5345  border: none;5346  cursor: pointer;5347  color: var(--peach-t3);5348  padding: 2px 4px;5349  display: flex;5350  align-items: center;5351  line-height: 0;5352  border-radius: 3px;5353  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5354}53555356.peach-identity-collapse-btn:hover {5357  color: var(--peach-t1);5358}53595360.peach-identity-collapse-btn.is-collapsed {5361  transform: rotate(-90deg);5362}53635364.peach-identity-rows {5365  display: grid;5366  grid-template-rows: 1fr;5367  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5368}53695370.peach-identity-rows.is-collapsed {5371  grid-template-rows: 0fr;5372}53735374.peach-identity-rows-inner {5375  overflow-y: auto;5376  min-height: 0;5377  max-height: 148px;5378  scrollbar-width: thin;5379  scrollbar-color: var(--peach-t3) transparent;5380  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5381  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5382}53835384.peach-identity-rows-inner::-webkit-scrollbar {5385  width: 4px;5386}53875388.peach-identity-rows-inner::-webkit-scrollbar-track {5389  background: transparent;5390}53915392.peach-identity-rows-inner::-webkit-scrollbar-thumb {5393  background: var(--peach-t3);5394  border-radius: 2px;5395}53965397.peach-identity-filter-pill {5398  padding: 2px 7px;5399  border-radius: 999px;5400  border: 1px solid var(--peach-t3);5401  background: transparent;5402  color: var(--peach-t2);5403  font-family: "IBM Plex Mono", monospace;5404  font-size: 0.6rem;5405  cursor: pointer;5406  transition: border-color 80ms, background 80ms, color 80ms;5407}54085409.peach-identity-filter-pill.is-on {5410  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5411  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5412  color: var(--peach-accent);5413}54145415.peach-identity-suggestion {5416  display: flex;5417  align-items: center;5418  gap: 6px;5419  width: 100%;5420  padding: 4px 6px;5421  border-radius: 5px;5422  border: none;5423  background: transparent;5424  cursor: pointer;5425  text-align: left;5426  transition: background 80ms ease;5427}54285429.peach-identity-suggestion:hover,5430.peach-identity-suggestion:focus {5431  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5432  outline: none;5433}54345435.peach-identity-suggestion-value {5436  font-family: "IBM Plex Mono", monospace;5437  font-size: 0.7rem;5438  color: var(--peach-t1);5439  overflow: hidden;5440  text-overflow: ellipsis;5441  white-space: nowrap;5442  flex: 1;5443  min-width: 0;5444}54455446.peach-identity-suggestion-type {5447  font-family: "IBM Plex Mono", monospace;5448  font-size: 0.55rem;5449  font-weight: 600;5450  flex-shrink: 0;5451  padding: 1px 4px;5452  border-radius: 3px;5453}54545455.peach-identity-suggestion-type--email {5456  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5457  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5458}54595460.peach-identity-suggestion-type--username {5461  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5462  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5463}54645465.peach-identity-suggestion-meta {5466  font-family: "IBM Plex Mono", monospace;5467  font-size: 0.6rem;5468  color: var(--peach-t3);5469  flex-shrink: 0;5470}54715472/* Tag filter strip */5473.peach-tag-filter-strip {5474  border-bottom: 1px solid var(--peach-t3);5475  flex-shrink: 0;5476}54775478.peach-tag-filter-chip {5479  display: inline-flex;5480  align-items: center;5481  padding: 4px 10px;5482  border-radius: 999px;5483  border: 1px solid var(--peach-t3);5484  background: transparent;5485  color: var(--peach-t2);5486  font-family: "IBM Plex Mono", monospace;5487  font-size: 0.5625rem;5488  letter-spacing: 0.06em;5489  text-transform: uppercase;5490  cursor: pointer;5491  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5492  white-space: nowrap;5493}54945495.peach-tag-filter-chip:hover {5496  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5497  color: var(--peach-t1);5498}54995500.peach-tag-filter-chip.is-selected {5501  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5502  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5503  color: var(--peach-t0);5504}55055506/* ─────────────────────────────────────────────────────────────────────────5507   v1.4.12 additions5508   ─────────────────────────────────────────────────────────────────────── */55095510/* Sort bar */5511.peach-sort-bar {5512  display: flex;5513  align-items: center;5514  gap: 4px;5515  padding: 5px 12px;5516  border-bottom: 1px solid var(--peach-t3);5517  flex-shrink: 0;5518  overflow-x: auto;5519  scrollbar-width: none;5520}55215522.peach-sort-btn {5523  padding: 2px 9px;5524  border-radius: 999px;5525  border: 1px solid transparent;5526  background: transparent;5527  color: var(--peach-t2);5528  font-family: "IBM Plex Mono", monospace;5529  font-size: 0.5625rem;5530  letter-spacing: 0.07em;5531  text-transform: uppercase;5532  cursor: pointer;5533  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5534  white-space: nowrap;5535}55365537.peach-sort-btn:hover {5538  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5539  color: var(--peach-t1);5540}55415542.peach-sort-btn.is-active {5543  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5544  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5545  color: var(--peach-t0);5546}55475548.peach-sort-scope-btn {5549  padding-inline: 8px;5550  font-size: 0.53125rem;5551  letter-spacing: 0.05em;5552}55535554.peach-sort-domain-hint {5555  margin-left: auto;5556  font-family: "IBM Plex Mono", monospace;5557  font-size: 0.5625rem;5558  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5559  white-space: nowrap;5560  overflow: hidden;5561  text-overflow: ellipsis;5562  max-width: 110px;5563}55645565/* Tab-match badge on entry rows */5566.peach-tab-match-badge {5567  display: inline-block;5568  width: 6px;5569  height: 6px;5570  border-radius: 50%;5571  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5572  margin-left: 5px;5573  vertical-align: middle;5574  flex-shrink: 0;5575  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5576}55775578.peach-entry-row.is-tab-match {5579  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5580  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5581}55825583.peach-entry-row.is-tab-match:hover {5584  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5585}55865587/* Entry list stagger entrance */5588@keyframes peach-entry-fadein {5589  from { opacity: 0; transform: translateY(4px); }5590  to   { opacity: 1; transform: translateY(0); }5591}55925593.peach-vault-list .peach-entry-row {5594  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5595}55965597/* Button press micro-interaction */5598.peach-btn:active {5599  transform: scale(0.95);5600  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5601}56025603.peach-sort-btn:active,5604.peach-tag-filter-chip:active {5605  transform: scale(0.93);5606  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5607}56085609/* Password strength bar (Lock view + shared) */5610.peach-password-strength {5611  display: flex;5612  align-items: center;5613  gap: 8px;5614  margin-top: 6px;5615}56165617.peach-strength-bar {5618  flex: 1;5619  height: 3px;5620  border-radius: 2px;5621  background: var(--peach-t3);5622  overflow: hidden;5623}56245625.peach-strength-fill {5626  height: 100%;5627  border-radius: 2px;5628  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5629              background 300ms ease;5630}56315632.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5633.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5634.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5635.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }56365637.peach-strength-label {5638  font-family: "IBM Plex Mono", monospace;5639  font-style: italic;5640  font-size: 0.5625rem;5641  font-weight: 300;5642  letter-spacing: 0.06em;5643  color: var(--peach-t2);5644  min-width: 36px;5645  text-align: right;5646}56475648.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5649.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5650.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5651.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }56525653/* Duress form */5654.peach-duress-status {5655  padding: 2px 8px;5656  border-radius: 999px;5657  border: 1px solid var(--peach-t3);5658  font-family: "IBM Plex Mono", monospace;5659  font-size: 0.5625rem;5660  letter-spacing: 0.07em;5661  text-transform: uppercase;5662  color: var(--peach-t2);5663  flex-shrink: 0;5664}56655666.peach-duress-status.is-active {5667  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5668  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5669  color: var(--peach-t0);5670}56715672.peach-duress-form {5673  padding: 8px 0 4px;5674  display: flex;5675  flex-direction: column;5676  gap: 6px;5677}56785679.peach-duress-form .peach-label {5680  margin-top: 4px;5681}56825683.peach-duress-actions {5684  display: flex;5685  gap: 6px;5686  align-items: center;5687  margin-top: 4px;5688}56895690.peach-duress-actions .peach-btn:first-child {5691  margin-right: auto;5692}56935694/* Improved overlay spring entrance */5695.peach-overlay-view.ov-enter-up {5696  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5697}56985699@keyframes ov-enter-up-spring {5700  from { opacity: 0; transform: translateY(16px) scale(0.98); }5701  to   { opacity: 1; transform: translateY(0) scale(1); }5702}57035704.peach-overlay-view.ov-enter-right {5705  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5706}57075708@keyframes ov-enter-right-spring {5709  from { opacity: 0; transform: translateX(18px) scale(0.98); }5710  to   { opacity: 1; transform: translateX(0) scale(1); }5711}57125713/* ── Onboarding-mode restore screens (file import) ── */5714/* Used when MainImportView renders during onboarding (no vault yet).5715   Animates like a lock-screen transition. */5716.peach-lock-view {5717  position: absolute;5718  inset: 0;5719  display: flex;5720  flex-direction: column;5721  background:5722    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5723    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5724    var(--peach-bg);5725  z-index: 2;5726  overflow: hidden;5727  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5728}57295730.peach-lock-view-header {5731  display: flex;5732  align-items: center;5733  justify-content: space-between;5734  padding: 16px 18px 12px;5735  flex-shrink: 0;5736}57375738/* ───────── Settings: auto-lock select ───────── */5739.peach-settings-select {5740  font-family: "IBM Plex Mono", monospace;5741  font-size: 0.6875rem;5742  background: transparent;5743  border: 1px solid var(--peach-t3);5744  border-radius: 4px;5745  color: var(--peach-t1);5746  padding: 3px 6px;5747  cursor: pointer;5748  outline: none;5749}5750.peach-settings-select:focus {5751  border-color: var(--peach-accent);5752}57535754/* ───────── Duress status pill (new polished) ───────── */5755.peach-duress-status-pill {5756  font-family: "IBM Plex Mono", monospace;5757  font-size: 0.5625rem;5758  text-transform: uppercase;5759  letter-spacing: 0.12em;5760  padding: 2px 8px;5761  border-radius: 12px;5762  background: var(--peach-t3);5763  color: var(--peach-t2);5764  flex-shrink: 0;5765}5766.peach-duress-status-pill.is-active {5767  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5768  color: var(--peach-accent);5769}57705771/* ───────── Entry advanced disclosure (canary) ───────── */5772.peach-entry-advanced {5773  margin-top: 12px;5774  border-top: 1px solid var(--peach-t3);5775  padding-top: 10px;5776  position: relative;5777  z-index: 1;5778}5779.peach-entry-advanced-toggle {5780  display: flex;5781  align-items: center;5782  justify-content: space-between;5783  width: 100%;5784  background: transparent;5785  border: none;5786  cursor: pointer;5787  padding: 0;5788  color: var(--peach-t2);5789}5790.peach-canary-section {5791  margin-top: 10px;5792  display: grid;5793  gap: 6px;5794}57955796/* ───────── Import: merge/replace radio choices ───────── */5797.peach-import-choice {5798  display: flex;5799  align-items: flex-start;5800  gap: 10px;5801  padding: 8px 10px;5802  border: 1px solid var(--peach-t3);5803  border-radius: 10px;5804  cursor: pointer;5805  margin-bottom: 6px;5806  transition: border-color 120ms ease, background 120ms ease;5807}5808.peach-import-choice:hover {5809  border-color: var(--peach-accent);5810}5811.peach-import-choice input[type="radio"] {5812  margin-top: 3px;5813  accent-color: var(--peach-accent);5814  flex-shrink: 0;5815}5816.peach-import-choice-main {5817  display: flex;5818  flex-direction: column;5819  gap: 2px;5820  min-width: 0;5821}5822.peach-import-choice-label {5823  font-size: 0.75rem;5824  color: var(--peach-t0);5825}5826.peach-import-choice-sub {5827  font-size: 0.6875rem;5828  color: var(--peach-t2);5829  line-height: 1.5;5830}58315832/* ───────── Export: success confirmation strip ───────── */5833.peach-export-success {5834  display: flex;5835  align-items: flex-start;5836  gap: 10px;5837  padding: 12px;5838  border-radius: 12px;5839  border: 1px solid rgba(150, 175, 110, 0.3);5840  background: rgba(150, 175, 110, 0.08);5841  color: var(--peach-t0);5842  font-size: 0.75rem;5843  line-height: 1.55;5844}5845.peach-export-success-check {5846  color: rgba(150, 175, 110, 0.9);5847  font-size: 0.875rem;5848  flex-shrink: 0;5849}58505851/* ── Trash view ──────────────────────────────────────────────────────── */5852.peach-trash-entry-row {5853  display: flex;5854  align-items: center;5855  justify-content: space-between;5856  gap: 8px;5857  padding: 8px 0;5858  border-bottom: 1px solid var(--peach-border);5859}5860.peach-trash-entry-info {5861  flex: 1;5862  min-width: 0;5863  display: flex;5864  flex-direction: column;5865  gap: 2px;5866}5867.peach-trash-entry-title {5868  font-size: 0.8125rem;5869  color: var(--peach-t0);5870  overflow: hidden;5871  text-overflow: ellipsis;5872  white-space: nowrap;5873}5874.peach-trash-entry-meta {5875  font-family: var(--font-mono);5876  font-size: 0.5625rem;5877  color: var(--peach-t2);5878  letter-spacing: 0.04em;5879}5880.peach-trash-entry-actions {5881  display: flex;5882  align-items: center;5883  gap: 4px;5884  flex-shrink: 0;5885}5886.peach-trash-delete-btn {5887  background: transparent;5888  border: 0;5889  color: var(--peach-t3);5890  font-size: 1rem;5891  line-height: 1;5892  cursor: pointer;5893  padding: 2px 5px;5894  transition: color 0.15s;5895}5896.peach-trash-delete-btn:hover { color: var(--peach-breach); }5897.peach-trash-list {5898  overflow-y: auto;5899}5900.peach-trash-footer {5901  display: flex;5902  align-items: center;5903  gap: 8px;5904  padding: 8px 0 0;5905  border-top: 1px solid var(--peach-border);5906  margin-top: 4px;5907}5908.peach-trash-purge-all {5909  background: transparent;5910  border: 0;5911  color: var(--peach-t3);5912  font-size: 0.625rem;5913  cursor: pointer;5914  padding: 4px 0;5915  letter-spacing: 0.03em;5916  transition: color 0.2s;5917}5918.peach-trash-purge-all:hover { color: var(--peach-breach); }5919.peach-trash-purge-confirm-label {5920  font-size: 0.625rem;5921  color: var(--peach-t1);5922  flex: 1;5923}59245925/* ── Settings shortcuts grid ─────────────────────────────────────────── */5926.peach-shortcuts-grid {5927  display: grid;5928  grid-template-columns: auto 1fr;5929  gap: 6px 12px;5930  align-items: center;5931  padding: 4px 0;5932}5933.peach-shortcut-key {5934  font-family: var(--font-mono);5935  font-size: 0.625rem;5936  color: var(--peach-t0);5937  background: var(--peach-t3);5938  border-radius: 4px;5939  padding: 2px 6px;5940  white-space: nowrap;5941  text-align: center;5942}5943.peach-shortcut-desc {5944  font-size: 0.6875rem;5945  color: var(--peach-t1);5946}59475948/* ── Sort bar trash button ───────────────────────────────────────────── */5949.peach-sort-trash-btn {5950  display: flex;5951  align-items: center;5952  justify-content: center;5953  padding: 3px 5px;5954  background: transparent;5955  border: none;5956  cursor: pointer;5957  color: var(--peach-t2);5958  border-radius: 4px;5959  transition: color 140ms ease, background 140ms ease;5960}5961.peach-sort-trash-btn:hover {5962  color: var(--peach-t1);5963  background: var(--peach-t3);5964}5965.peach-sort-trash-btn.is-active {5966  color: var(--peach-accent);5967}59685969/* Accent color picker */5970.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5971.peach-accent-picker {5972  display: flex;5973  flex-wrap: wrap;5974  gap: 7px;5975  padding: 2px 0;5976}5977.peach-accent-swatch {5978  width: 22px;5979  height: 22px;5980  border-radius: 50%;5981  border: 2px solid transparent;5982  cursor: pointer;5983  padding: 0;5984  transition: transform 100ms;5985  outline-offset: 2px;5986}5987.peach-accent-swatch:hover { transform: scale(1.15); }5988.peach-accent-swatch.is-active {5989  border-color: var(--peach-t0);5990  transform: scale(1.1);5991}59925993.peach-pill-group {5994  display: flex;5995  gap: 6px;5996}5997.peach-pill-group .peach-btn.is-active {5998  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5999  border-color: var(--peach-accent);6000  color: var(--peach-t0);6001}60026003/* ── Card entry styles ───────────────────────────────────────── */6004.peach-card-number {6005  font-family: var(--peach-mono);6006  letter-spacing: 0.08em;6007}60086009.peach-card-network-badge {6010  font-size: 0.625rem;6011  padding: 1px 5px;6012  border-radius: 4px;6013  border: 0.5px solid var(--peach-border);6014  color: var(--peach-text-dim);6015  margin-left: 6px;6016  vertical-align: middle;6017}60186019.peach-card-expiry-row {6020  display: flex;6021  align-items: center;6022  gap: 8px;6023}60246025.peach-card-expiry-sep {6026  color: var(--peach-text-dim);6027}60286029/* ── Pro tier — upgrade screen ──────────────────────────────── */6030.peach-pro-mark {6031  font-size: 0.5625rem;6032  color: var(--peach-accent);6033  margin-left: 6px;6034  vertical-align: super;6035  opacity: 0.7;6036}60376038.peach-pro-mini-badge {6039  display: block;6040  font-size: 0.625rem;6041  font-style: italic;6042  color: var(--peach-accent);6043  letter-spacing: 0.04em;6044  margin-top: -2px;6045  padding-left: 2px;6046  opacity: 0.85;6047  text-align: center;6048}60496050.peach-wordmark-stack {6051  display: inline-flex;6052  flex-direction: column;6053  align-items: center;6054}60556056/* ── Pro tier — upgrade page ─────────────────────────────────── */6057/* ── Pro upgrade — redesigned editorial layout ─────────────────── */60586059.peach-pro-upgrade {6060  display: flex;6061  flex-direction: column;6062  align-items: stretch;6063  gap: 10px;6064  padding: 2px 2px 12px;6065}60666067.peach-pro-eyebrow {6068  margin: 0;6069  font-family: var(--font-ui);6070  font-size: 0.625rem;6071  font-weight: 500;6072  letter-spacing: 0.12em;6073  color: var(--peach-accent);6074}60756076.peach-pro-headline {6077  margin: 0;6078  font-family: var(--font-display, "Cormorant Garamond", serif);6079  font-size: 30px;6080  font-weight: 700;6081  font-style: normal;6082  line-height: 1.05;6083  color: var(--peach-t0);6084  letter-spacing: -0.01em;6085}6086.peach-pro-headline em {6087  font-style: italic;6088  font-weight: 400;6089  color: var(--peach-accent);6090}60916092.peach-pro-subtitle {6093  margin: 0;6094  font-size: 0.6875rem;6095  line-height: 1.5;6096  color: var(--peach-t1);6097}60986099/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6100.peach-pro-section-label {6101  margin: 6px 0 0;6102  font-family: var(--font-ui);6103  font-size: 0.5625rem;6104  font-weight: 500;6105  letter-spacing: 0.12em;6106  text-transform: uppercase;6107  color: var(--peach-t2);6108}61096110/* 2-column numbered feature grid */6111.peach-pro-grid {6112  display: grid;6113  grid-template-columns: 1fr 1fr;6114  border-top: 1px solid var(--peach-border);6115  border-left: 1px solid var(--peach-border);6116}61176118.peach-pro-grid-item {6119  display: flex;6120  flex-direction: column;6121  gap: 2px;6122  padding: 8px 9px;6123  border-right: 1px solid var(--peach-border);6124  border-bottom: 1px solid var(--peach-border);6125}61266127.peach-pro-grid-item--wide {6128  grid-column: 1 / -1;6129}61306131.peach-pro-grid-num {6132  font-family: var(--font-mono);6133  font-size: 0.5625rem;6134  color: var(--peach-accent);6135  letter-spacing: 0.06em;6136  opacity: 0.85;6137}61386139.peach-pro-grid-name {6140  font-size: 0.8125rem;6141  font-weight: 500;6142  color: var(--peach-t0);6143  line-height: 1.2;6144}61456146.peach-pro-grid-desc {6147  font-size: 0.625rem;6148  color: var(--peach-t1);6149  line-height: 1.4;6150}61516152.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6153  animation: peach-pulse-accent 600ms ease-out forwards;6154}61556156@keyframes peach-pulse-accent {6157  0%   { opacity: 1; transform: scale(1.2); }6158  100% { opacity: 0.85; transform: scale(1); }6159}61606161/* Actions */6162.peach-pro-upgrade-actions {6163  display: flex;6164  flex-direction: column;6165  align-items: stretch;6166  gap: 10px;6167}61686169.peach-pro-pricing {6170  margin: 0;6171  font-size: 1rem;6172  font-weight: 600;6173  color: var(--peach-t0);6174  letter-spacing: 0.01em;6175}6176.peach-pro-pricing-sub {6177  font-size: 0.75rem;6178  font-weight: 400;6179  color: var(--peach-t1);6180  letter-spacing: 0.02em;6181}61826183.peach-pro-upgrade-cta {6184  display: flex;6185  align-items: center;6186  justify-content: center;6187  text-decoration: none;6188  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6189  border: 1px solid var(--peach-accent);6190  border-radius: 10px;6191  color: var(--peach-accent);6192  font-family: var(--font-ui);6193  font-size: 0.8125rem;6194  font-weight: 600;6195  letter-spacing: 0.06em;6196  padding: 11px 16px;6197  transition: background 0.15s ease, color 0.15s ease;6198}6199.peach-pro-upgrade-cta:hover {6200  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6201}62026203.peach-pro-key-divider {6204  display: flex;6205  align-items: center;6206  gap: 8px;6207  color: var(--peach-t2);6208  font-size: 0.5625rem;6209  letter-spacing: 0.1em;6210}6211.peach-pro-key-divider::before,6212.peach-pro-key-divider::after {6213  content: "";6214  flex: 1;6215  height: 1px;6216  background: var(--peach-border);6217}62186219/* Inline key entry row */6220.peach-pro-key-inline {6221  display: flex;6222  align-items: center;6223  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6224  border: 1px solid var(--peach-border);6225  border-radius: 8px;6226  overflow: hidden;6227}6228.peach-pro-key-inline-input {6229  flex: 1;6230  background: transparent;6231  border: none;6232  outline: none;6233  color: var(--peach-t1);6234  font-family: var(--font-mono);6235  font-size: 0.625rem;6236  letter-spacing: 0.06em;6237  padding: 9px 10px;6238}6239.peach-pro-key-inline-input::placeholder {6240  color: var(--peach-t2);6241}6242.peach-pro-key-apply {6243  background: transparent;6244  border: none;6245  border-left: 1px solid var(--peach-border);6246  color: var(--peach-t2);6247  font-family: var(--font-ui);6248  font-size: 0.5625rem;6249  font-weight: 600;6250  letter-spacing: 0.08em;6251  padding: 9px 10px;6252  cursor: pointer;6253  transition: color 0.15s ease;6254  flex-shrink: 0;6255}6256.peach-pro-key-apply:not(:disabled):hover {6257  color: var(--peach-accent);6258}6259.peach-pro-key-apply:disabled {6260  opacity: 0.35;6261  cursor: not-allowed;6262}62636264/* ── Pro tier — key ceremony ─────────────────────────────────── */6265.peach-pro-key-ceremony {6266  display: flex;6267  flex-direction: column;6268  align-items: center;6269  gap: 12px;6270  padding: 20px 4px 16px;6271}62726273.peach-pro-key-ceremony .peach-lock-rune-string {6274  font-size: 1rem;6275  gap: 12px;6276  flex: 0;6277  justify-content: center;6278}62796280.peach-pro-key-ceremony-label {6281  margin: 0;6282  font-size: 0.6875rem;6283  color: var(--peach-t2);6284  font-style: italic;6285  letter-spacing: 0.04em;6286}62876288.peach-pro-key-input {6289  font-family: var(--font-mono, monospace);6290  letter-spacing: 0.06em;6291  text-align: center;6292  width: 100%;6293  box-sizing: border-box;6294}62956296.peach-pro-key-error {6297  margin: 0;6298  font-size: 0.75rem;6299  text-align: center;6300  color: var(--peach-breach, #e55);6301  padding: 0;6302}63036304.peach-pro-key-activate {6305  width: 100%;6306  text-align: center;6307  box-sizing: border-box;6308  padding: 10px 20px;6309  font-size: 0.8125rem;6310}63116312.peach-pro-key-cancel {6313  background: transparent;6314  border: 0;6315  color: var(--peach-t2);6316  font-size: 0.6875rem;6317  cursor: pointer;6318  padding: 2px 8px;6319  transition: color 0.2s;6320}63216322.peach-pro-key-cancel:hover { color: var(--peach-accent); }63236324/* ── Pro tier — active state ─────────────────────────────────── */6325.peach-pro-active {6326  display: flex;6327  flex-direction: column;6328  align-items: center;6329  gap: 0;6330  padding: 8px 4px 16px;6331  min-height: 280px;6332}63336334.peach-pro-active-hero {6335  display: flex;6336  flex-direction: column;6337  align-items: center;6338  gap: 6px;6339  padding: 20px 0 8px;6340}63416342.peach-pro-active-mark-wrap {6343  display: flex;6344  align-items: center;6345  justify-content: center;6346  margin-bottom: 4px;6347}63486349.peach-pro-active-mark {6350  width: 60px;6351  height: 60px;6352}63536354.peach-pro-active-title {6355  font-family: var(--font-display, var(--font-ui));6356  font-size: 26px;6357  margin: 0;6358  color: var(--peach-t0);6359  letter-spacing: 0.01em;6360}63616362.peach-pro-active-since {6363  margin: 0;6364  font-size: 0.6875rem;6365  color: var(--peach-t2);6366  font-style: italic;6367}63686369.peach-pro-active-features {6370  display: flex;6371  flex-direction: column;6372  gap: 8px;6373  width: 100%;6374  padding: 14px 8px 0;6375  border-top: 1px solid var(--peach-border);6376  flex: 1;6377}63786379.peach-pro-active-feature {6380  display: flex;6381  align-items: center;6382  gap: 9px;6383}63846385.peach-pro-active-feature-mark {6386  color: var(--peach-accent);6387  font-size: 0.625rem;6388  opacity: 0.65;6389  flex-shrink: 0;6390}63916392.peach-pro-active-feature-name {6393  font-size: 0.75rem;6394  color: var(--peach-t1);6395}63966397.peach-pro-deactivate {6398  align-self: center;6399  background: transparent;6400  border: 0;6401  color: var(--peach-t3);6402  font-size: 0.625rem;6403  cursor: pointer;6404  padding: 8px 0 0;6405  margin-top: 16px;6406  letter-spacing: 0.03em;6407  transition: color 0.2s;6408}64096410.peach-pro-deactivate:hover { color: var(--peach-t2); }64116412.peach-pro-deactivate:disabled {6413  opacity: 0.5;6414  cursor: default;6415}64166417/* ── Pro card activation sparkles & thank-you ── */6418button.peach-pro-active-mark-wrap {6419  background: transparent;6420  border: 0;6421  padding: 0;6422  cursor: pointer;6423  position: relative;6424  overflow: visible;6425}64266427.peach-pro-sparks {6428  position: absolute;6429  inset: 0;6430  pointer-events: none;6431  overflow: visible;6432}64336434.peach-pro-spark {6435  position: absolute;6436  top: 50%;6437  left: 50%;6438  font-size: 9px;6439  line-height: 1;6440  opacity: 0;6441  transform: translate(-50%, -50%);6442  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;6443}64446445@keyframes peach-pro-spark-fly {6446  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }6447  25%  { opacity: 1; }6448  100% {6449    opacity: 0;6450    transform: translate(6451      calc(-50% + var(--spark-x, 0px)),6452      calc(-50% + var(--spark-y, -40px))6453    ) scale(0.8);6454  }6455}64566457.peach-pro-thankyou-text {6458  margin: 4px 0 0;6459  font-size: 0.6875rem;6460  font-style: italic;6461  color: currentColor;6462  opacity: 0;6463  animation: peach-pro-thankyou-flash 2.5s ease both;6464}64656466@keyframes peach-pro-thankyou-flash {6467  0%   { opacity: 0; transform: translateY(4px); }6468  15%  { opacity: 0.75; transform: translateY(0); }6469  75%  { opacity: 0.75; }6470  100% { opacity: 0; }6471}64726473/* ── Pro advanced health remediation queue ──────────────────── */6474.peach-health-pro-queue {6475  display: flex;6476  flex-direction: column;6477  gap: 10px;6478  padding: 12px;6479  margin: 0 0 12px;6480  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6481  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6482  border-radius: 10px;6483}64846485.peach-health-pro-queue-head {6486  display: flex;6487  justify-content: space-between;6488  align-items: baseline;6489}64906491.peach-health-pro-queue-title {6492  font-size: 0.75rem;6493  font-weight: 500;6494  letter-spacing: 0.04em;6495  text-transform: uppercase;6496  color: var(--peach-accent);6497}64986499.peach-health-pro-queue-score {6500  font-size: 0.6875rem;6501  color: var(--peach-t2);6502}65036504.peach-health-pro-row {6505  display: flex;6506  gap: 10px;6507  align-items: center;6508  padding: 8px 0;6509  border-top: 1px solid var(--peach-border);6510}65116512.peach-health-pro-row-info {6513  flex: 1;6514  display: flex;6515  flex-direction: column;6516  gap: 4px;6517  min-width: 0;6518}65196520.peach-health-pro-action {6521  flex: 0 0 auto;6522  padding: 4px 8px;6523  font-size: 0.5625rem;6524  letter-spacing: 0.08em;6525  text-transform: uppercase;6526}65276528.peach-health-pro-row-name {6529  font-size: 0.8125rem;6530  color: var(--peach-t0);6531  overflow: hidden;6532  text-overflow: ellipsis;6533  white-space: nowrap;6534}65356536.peach-health-pro-row-meta {6537  font-size: 0.6875rem;6538  color: var(--peach-t2);6539}65406541.peach-health-pro-bar {6542  height: 2px;6543  background: var(--peach-border);6544  border-radius: 2px;6545  overflow: hidden;6546  margin-top: 2px;6547}65486549.peach-health-pro-bar-fill {6550  height: 100%;6551  background: var(--peach-accent);6552  transition: width 200ms ease-out;6553}65546555/* ── Pro activation celebration ── */6556@keyframes peach-pro-bloom {6557  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6558  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6559                 drop-shadow(0 0 48px var(--peach-glow)); }6560  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6561}65626563@keyframes peach-pro-wordmark-in {6564  from { opacity: 0; transform: translateY(4px); }6565  to   { opacity: 1; transform: translateY(0); }6566}65676568@keyframes peach-pro-fade-out {6569  from { opacity: 1; }6570  to   { opacity: 0; }6571}65726573.peach-pro-celebration {6574  background:6575    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6576    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6577    var(--peach-bg);6578  border: 1px solid var(--peach-t3);6579  box-shadow:6580    0 2px 8px rgba(0,0,0,0.55),6581    0 14px 48px rgba(0,0,0,0.7),6582    0 0 0 1px rgba(240,232,216,0.04);6583  overflow: hidden;6584  width: 320px;6585  height: 520px;6586  display: flex;6587  flex-direction: column;6588  align-items: center;6589  justify-content: center;6590  gap: 8px;6591  padding: 32px 24px;6592  text-align: center;6593}65946595.peach-pro-celebration.is-leaving {6596  animation: peach-pro-fade-out 400ms ease forwards;6597}65986599.peach-pro-bloom-target {6600  display: flex;6601  align-items: center;6602  justify-content: center;6603  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6604  margin-bottom: 12px;6605}66066607.peach-pro-bloom-icon {6608  width: 48px;6609  height: 48px;6610}66116612.peach-pro-wordmark {6613  font-family: var(--font-display);6614  font-size: 22px;6615  font-style: italic;6616  font-weight: 400;6617  color: var(--peach-accent);6618  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6619}66206621.peach-pro-thankyou {6622  font-size: 0.75rem;6623  font-style: italic;6624  color: var(--peach-t2);6625  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6626}662766286629/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6630.peach-pro-notice-banner {6631  display: flex;6632  align-items: center;6633  gap: 8px;6634  padding: 7px 12px;6635  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6636  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6637  font-size: 0.6875rem;6638  color: var(--peach-t2);6639  font-family: "IBM Plex Mono", monospace;6640  flex-shrink: 0;6641}66426643.peach-pro-notice-link {6644  background: none;6645  border: none;6646  padding: 0;6647  cursor: pointer;6648  font-size: 0.6875rem;6649  color: var(--peach-accent);6650  font-family: "IBM Plex Mono", monospace;6651  margin-left: auto;6652  white-space: nowrap;6653}66546655.peach-pro-notice-close {6656  background: none;6657  border: none;6658  padding: 0 0 0 4px;6659  cursor: pointer;6660  font-size: 0.625rem;6661  color: var(--peach-t3);6662  line-height: 1;6663}66646665/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6666   Renders over whatever view is showing. 60-second expiry; the popup ticks6667   the countdown each second and clears the banner when it hits zero. */6668.peach-pair-request-banner {6669  display: flex;6670  flex-direction: column;6671  gap: 8px;6672  padding: 10px 12px;6673  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6674  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6675  font-family: "IBM Plex Mono", monospace;6676  flex-shrink: 0;6677}66786679.peach-pair-toast {6680  padding: 8px 12px;6681  font-family: "IBM Plex Mono", monospace;6682  font-size: 0.75rem;6683  color: var(--peach-t1);6684  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6685  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6686  flex-shrink: 0;6687  text-align: center;6688}66896690.peach-pair-toast strong {6691  color: var(--peach-t0);6692  font-weight: 500;6693}66946695.peach-pair-request-header {6696  display: flex;6697  align-items: center;6698  gap: 8px;6699  font-size: 0.75rem;6700  color: var(--peach-t1);6701}67026703.peach-pair-request-mark {6704  font-size: 0.875rem;6705  display: inline-flex;6706  align-items: center;6707}67086709.peach-pair-request-icon {6710  width: 1em;6711  height: 1em;6712}67136714.peach-pair-request-title {6715  font-weight: 600;6716  color: var(--peach-t0);6717}67186719.peach-pair-request-countdown {6720  margin-left: auto;6721  font-variant-numeric: tabular-nums;6722  color: var(--peach-t2);6723  font-size: 0.6875rem;6724}67256726.peach-pair-request-body {6727  margin: 0;6728  font-size: 0.75rem;6729  color: var(--peach-t1);6730  line-height: 1.4;6731}67326733.peach-pair-request-body strong {6734  color: var(--peach-t0);6735  font-weight: 600;6736}67376738.peach-pair-request-actions {6739  display: flex;6740  gap: 8px;6741  justify-content: flex-end;6742}67436744/* ─── First-run onboarding ──────────────────────────────────────────────6745   Three-card welcome shown once before vault creation. The PeachScript6746   rune background drifts behind everything at very low opacity — it's6747   atmosphere, not focus. The cards themselves use the same panel6748   language as the rest of the popup so the transition into NewVault is6749   continuous, not a jarring switch of visual register. */67506751.peach-onboarding {6752  position: relative;6753  display: flex;6754  flex-direction: column;6755  width: 100%;6756  height: 100%;6757  padding: 16px 16px 18px;6758  box-sizing: border-box;6759  overflow: hidden;6760  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6761}67626763.peach-onboarding.is-completing {6764  animation: peach-onboard-exit 200ms ease-out forwards;6765}67666767.peach-rune-background {6768  position: absolute;6769  inset: 0;6770  width: 100%;6771  height: 100%;6772  pointer-events: none;6773  z-index: 0;6774  transition: opacity 500ms ease-out;6775}67766777.peach-onboarding.is-completing .peach-rune-background {6778  opacity: 0;6779}67806781.peach-onboarding-header {6782  position: relative;6783  z-index: 1;6784  display: flex;6785  align-items: center;6786  margin-bottom: 14px;6787}67886789.peach-onboarding-card {6790  position: relative;6791  z-index: 1;6792  flex: 1;6793  display: flex;6794  flex-direction: column;6795  gap: 10px;6796  padding: 22px 20px;6797  border-radius: 16px;6798  border: 1px solid var(--peach-t3);6799  background:6800    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6801  backdrop-filter: blur(3px);6802  -webkit-backdrop-filter: blur(3px);6803  box-shadow:6804    inset 0 1px 0 rgba(240, 232, 216, 0.04),6805    0 12px 28px rgba(0, 0, 0, 0.12);6806  cursor: pointer;6807  user-select: none;6808  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6809}68106811.peach-onboarding-card.is-exiting {6812  animation: peach-card-out 120ms ease-in forwards;6813  pointer-events: none;6814}68156816.peach-onboarding-card-headline {6817  margin: 0;6818  font-family: var(--font-display);6819  font-style: italic;6820  font-weight: 400;6821  font-size: 22px;6822  line-height: 1.05;6823  color: var(--peach-t0);6824  white-space: pre-line;6825}68266827.peach-onboarding-divider {6828  margin: 4px 0 6px;6829  border: 0;6830  border-top: 1px solid var(--peach-t3);6831  width: 100%;6832}68336834.peach-onboarding-body {6835  margin: 0;6836  font-size: 0.8125rem;6837  line-height: 1.6;6838  color: var(--peach-t1);6839}68406841.peach-onboarding-warning {6842  display: flex;6843  align-items: flex-start;6844  gap: 8px;6845  margin: 6px 0 0;6846  padding-top: 8px;6847  border-top: 1px dashed var(--peach-t3);6848  font-size: 0.8125rem;6849  line-height: 1.5;6850  color: var(--peach-t1);6851}68526853.peach-onboarding-warning-icon {6854  color: var(--peach-accent);6855  font-size: 0.8125rem;6856  line-height: 1.5;6857  flex: 0 0 auto;6858}68596860.peach-onboarding-nav {6861  position: relative;6862  z-index: 1;6863  display: flex;6864  align-items: center;6865  justify-content: space-between;6866  margin-top: 12px;6867  padding: 0 4px;6868}68696870.peach-onboarding-dots {6871  display: flex;6872  align-items: center;6873  gap: 6px;6874}68756876.peach-onboarding-dot {6877  width: 6px;6878  height: 6px;6879  border-radius: 50%;6880  background: var(--peach-t2);6881  transition: width 200ms ease, height 200ms ease, background 200ms ease;6882}68836884.peach-onboarding-dot.is-active {6885  width: 8px;6886  height: 8px;6887  background: var(--peach-accent);6888}68896890.peach-onboarding-next {6891  background: none;6892  border: none;6893  padding: 4px 0;6894  cursor: pointer;6895  font-family: "IBM Plex Mono", monospace;6896  font-size: 0.6875rem;6897  letter-spacing: 0.04em;6898  color: var(--peach-t1);6899  transition: color 150ms ease;6900}69016902.peach-onboarding-next:hover {6903  color: var(--peach-t0);6904}69056906.peach-onboarding-next:disabled {6907  opacity: 0.5;6908  cursor: default;6909}69106911.peach-onboarding-back {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-t2);6920  transition: color 150ms ease;6921}69226923.peach-onboarding-back:hover {6924  color: var(--peach-t0);6925}69266927.peach-onboarding-back:disabled {6928  opacity: 0.5;6929  cursor: default;6930}69316932/* Reserve back-button width on the first card so the dots stay centred */6933.peach-onboarding-back-spacer {6934  width: 44px;6935}69366937.peach-onboarding-mobile-card-buttons {6938  display: flex;6939  flex-direction: column;6940  gap: 8px;6941  margin-top: 16px;6942}69436944@keyframes peach-onboard-enter {6945  from { opacity: 0; transform: translateY(20px); }6946  to   { opacity: 1; transform: translateY(0); }6947}69486949@keyframes peach-onboard-exit {6950  from { opacity: 1; }6951  to   { opacity: 0; }6952}69536954@keyframes peach-card-in {6955  from { opacity: 0; transform: translateX(12px); }6956  to   { opacity: 1; transform: translateX(0); }6957}69586959@keyframes peach-card-out {6960  from { opacity: 1; transform: translateX(0); }6961  to   { opacity: 0; transform: translateX(-12px); }6962}69636964/* ─── New vault screen — matched to onboarding card language ─────────── */69656966.peach-newvault {6967  position: relative;6968  display: flex;6969  flex-direction: column;6970  gap: 12px;6971  padding: 16px 16px 18px;6972  overflow: hidden;6973}69746975/* Suppress the warm-blob ambient art inherited from .lock-screen — the6976   new vault card now carries the visual weight. */6977.peach-newvault::before {6978  content: none;6979}69806981.peach-newvault-header {6982  position: relative;6983  z-index: 2;6984  display: flex;6985  align-items: center;6986  gap: 10px;6987  margin-bottom: 2px;6988}69896990.peach-newvault-back {6991  display: inline-flex;6992  align-items: center;6993  gap: 4px;6994  background: transparent;6995  border: none;6996  color: var(--peach-t2);6997  font-family: "IBM Plex Mono", monospace;6998  font-size: 0.625rem;6999  letter-spacing: 0.06em;7000  cursor: pointer;7001  padding: 4px 6px;7002  border-radius: 6px;7003  transition: color 120ms ease, background 120ms ease;7004}70057006.peach-newvault-back:hover {7007  color: var(--peach-t0);7008  background: rgba(240, 232, 216, 0.04);7009}70107011.peach-newvault-mark {7012  position: absolute;7013  right: -12px;7014  top: 6px;7015  width: 110px;7016  height: 110px;7017  pointer-events: none;7018  opacity: 0.10;7019  filter: saturate(0.9);7020  z-index: 0;7021}7022.peach-newvault-mark-art {7023  width: 100%;7024  height: 100%;7025}7026.peach-newvault-mark-art path:nth-child(1) {7027  fill: rgba(123, 144, 96, 0.88);7028}7029.peach-newvault-mark-art path:nth-child(2) {7030  stroke: rgba(94, 122, 66, 0.95);7031}70327033.peach-newvault-card {7034  position: relative;7035  z-index: 1;7036  display: flex;7037  flex-direction: column;7038  gap: 12px;7039  padding: 22px 20px 18px;7040  border-radius: 16px;7041  border: 1px solid var(--peach-t3);7042  background:7043    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));7044  backdrop-filter: blur(3px);7045  -webkit-backdrop-filter: blur(3px);7046  box-shadow:7047    inset 0 1px 0 rgba(240, 232, 216, 0.04),7048    0 12px 28px rgba(0, 0, 0, 0.12);7049  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;7050}70517052.peach-newvault-headline {7053  margin: 0;7054  font-family: var(--font-display);7055  font-style: italic;7056  font-weight: 400;7057  font-size: 24px;7058  line-height: 1.05;7059  color: var(--peach-t0);7060  white-space: pre-line;7061}70627063.peach-newvault-divider {7064  margin: 2px 0 4px;7065  border: 0;7066  border-top: 1px solid var(--peach-t3);7067  width: 100%;7068}70697070.peach-newvault-field {7071  display: flex;7072  flex-direction: column;7073  gap: 4px;7074}70757076.peach-newvault-label-row {7077  display: flex;7078  align-items: center;7079  justify-content: space-between;7080}70817082/* Monospace input scaled to the card. Replaces the 22px unlock-input7083   so the placeholder no longer overflows and the field reads as part7084   of the same surface as the body copy. */7085.peach-newvault-input {7086  font-size: 0.875rem;7087  letter-spacing: 0.18em;7088  padding: 8px 0;7089}7090.peach-newvault-input::placeholder {7091  letter-spacing: 0.18em;7092  color: var(--peach-t2);7093}70947095.peach-newvault-hint {7096  margin: 2px 0 0;7097  font-family: "IBM Plex Mono", monospace;7098  font-size: 0.625rem;7099  color: var(--peach-t2);7100  letter-spacing: 0.04em;7101}71027103.peach-newvault-submit {7104  margin-top: 4px;7105}71067107.peach-newvault-warning {7108  display: flex;7109  align-items: flex-start;7110  gap: 8px;7111  margin: 4px 0 0;7112  padding-top: 10px;7113  border-top: 1px dashed var(--peach-t3);7114  font-size: 0.75rem;7115  line-height: 1.5;7116  color: var(--peach-t1);7117}71187119.peach-newvault-warning-icon {7120  color: var(--peach-accent);7121  font-size: 0.8125rem;7122  line-height: 1.4;7123  flex: 0 0 auto;7124}71257126.peach-newvault-footer {7127  position: relative;7128  z-index: 1;7129  display: flex;7130  flex-direction: column;7131  gap: 4px;7132  padding: 4px 4px 0;7133}71347135/* Settings body — warm accent gradient gives the glass something to blur against */7136.peach-settings-body {7137  background:7138    radial-gradient(7139      ellipse at 30% 20%,7140      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7141      transparent 60%7142    );7143}71447145/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7146/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7147 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7148 * (replacing the vault from a backup file) and "hazard" for actions that7149 * are absolutely irreversible (Panic). Both use the same card scaffold so7150 * they read as a pair, but the colour family signals the severity at a7151 * glance — yellow for caution, red for don't.7152 */7153.peach-danger-card {7154  --danger-tint: 235, 158, 52; /* amber */7155  display: flex;7156  flex-direction: column;7157  gap: 8px;7158  padding: 14px;7159  margin-top: 10px;7160  border-radius: 12px;7161  border: 1px solid rgba(var(--danger-tint), 0.32);7162  background:7163    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7164    rgba(var(--danger-tint), 0.04);7165  box-shadow:7166    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7167    0 0 24px rgba(var(--danger-tint), 0.04);7168  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7169}71707171.peach-danger-card:hover {7172  border-color: rgba(var(--danger-tint), 0.55);7173  box-shadow:7174    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7175    0 0 36px rgba(var(--danger-tint), 0.10);7176}71777178.peach-danger-card--hazard {7179  --danger-tint: 220, 38, 38; /* red */7180}71817182.peach-danger-card-head {7183  display: flex;7184  align-items: center;7185  gap: 10px;7186}71877188.peach-danger-card-glyph {7189  width: 28px;7190  height: 28px;7191  flex-shrink: 0;7192  display: flex;7193  align-items: center;7194  justify-content: center;7195  border-radius: 8px;7196  background: rgba(var(--danger-tint), 0.12);7197  color: rgba(var(--danger-tint), 0.95);7198  font-size: 1rem;7199  line-height: 1;7200}72017202.peach-danger-card-title {7203  margin: 0;7204  font-size: 0.8125rem;7205  font-weight: 600;7206  color: rgba(var(--danger-tint), 0.92);7207  letter-spacing: 0.01em;7208}72097210.peach-danger-card-copy {7211  margin: 0;7212  font-size: 0.6875rem;7213  line-height: 1.5;7214  color: var(--peach-t2);7215}72167217.peach-danger-card-button {7218  width: 100%;7219  padding: 9px;7220  margin-top: 4px;7221  background: transparent;7222  border: 1px solid rgba(var(--danger-tint), 0.45);7223  border-radius: 8px;7224  color: rgba(var(--danger-tint), 0.9);7225  font-size: 0.75rem;7226  font-weight: 500;7227  letter-spacing: 0.02em;7228  cursor: pointer;7229  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7230}72317232.peach-danger-card-button:hover {7233  background: rgba(var(--danger-tint), 0.10);7234  border-color: rgba(var(--danger-tint), 0.75);7235  color: rgb(var(--danger-tint));7236}72377238/* ── Panic flow (three-step destruction) ───────────────────────────────── */7239.peach-panic {7240  display: flex;7241  flex-direction: column;7242  flex: 1;7243  min-height: 0;7244  padding: 28px 20px 20px;7245  gap: 18px;7246  overflow-y: auto;7247  scrollbar-width: none;7248  -ms-overflow-style: none;7249}72507251.peach-panic::-webkit-scrollbar { display: none; }72527253.peach-panic-step2 {7254  background: rgba(220, 38, 38, 0.04);7255}72567257.peach-panic-step3 {7258  position: relative;7259  background: #0f0505;7260  color: #ffffff;7261  overflow: hidden;7262}72637264.peach-panic-rune-bg {7265  position: absolute;7266  inset: 0;7267  opacity: 0.22;7268  pointer-events: none;7269  overflow: hidden;7270}72717272.peach-panic-rune-bg canvas {7273  width: 100% !important;7274  height: 100% !important;7275}72767277.peach-panic-icon {7278  font-size: 32px;7279  color: rgb(220, 38, 38);7280  line-height: 1;7281}72827283.peach-panic-title {7284  margin: 0;7285  font-size: 18px;7286  font-weight: 500;7287  color: var(--peach-t1);7288}72897290.peach-panic-title--severe {7291  font-size: 20px;7292  font-weight: 700;7293  color: rgb(220, 38, 38);7294}72957296.peach-panic-body {7297  margin: 0;7298  font-size: 0.8125rem;7299  line-height: 1.55;7300  color: var(--peach-t2);7301}73027303.peach-panic-body--severe {7304  color: rgba(220, 38, 38, 0.85);7305}73067307.peach-panic-body--final {7308  font-size: 1rem;7309  font-weight: 700;7310  color: rgb(255, 80, 80);7311  line-height: 1.4;7312}73137314.peach-panic-body--final-intro {7315  font-size: 1rem;7316  color: #ffffff;7317  font-weight: 400;7318}73197320.peach-panic-divider {7321  height: 1px;7322  background: rgba(255, 255, 255, 0.08);7323  margin: 4px 0;7324}73257326.peach-panic-confirm-input {7327  width: 100%;7328  padding: 10px 12px;7329  background: rgba(255, 255, 255, 0.02);7330  border: 1px solid rgba(220, 38, 38, 0.4);7331  border-radius: 8px;7332  color: var(--peach-t1);7333  font-family: "IBM Plex Mono", monospace;7334  font-size: 0.875rem;7335  letter-spacing: 0.12em;7336  text-transform: uppercase;7337}73387339.peach-panic-confirm-input:focus {7340  outline: none;7341  border-color: rgb(220, 38, 38);7342}73437344.peach-panic-confirm-input--match {7345  border-color: rgb(220, 38, 38);7346  color: rgb(220, 38, 38);7347}73487349.peach-panic-confirm-label {7350  font-size: 0.6875rem;7351  color: var(--peach-t2);7352  margin: 0 0 -8px;7353  letter-spacing: 0.06em;7354}73557356.peach-panic-actions {7357  display: flex;7358  flex-direction: column;7359  gap: 10px;7360  margin-top: auto;7361}73627363.peach-panic-button {7364  width: 100%;7365  padding: 12px;7366  border-radius: 8px;7367  font-size: 0.8125rem;7368  cursor: pointer;7369  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7370}73717372.peach-panic-button--primary {7373  background: var(--peach-accent);7374  border: 1px solid var(--peach-accent);7375  color: #ffffff;7376  font-weight: 600;7377}73787379.peach-panic-button--primary:hover {7380  background: color-mix(in srgb, var(--peach-accent) 88%, white);7381}73827383.peach-panic-button--danger {7384  background: rgb(220, 38, 38);7385  border: 1px solid rgb(220, 38, 38);7386  color: #ffffff;7387  font-weight: 600;7388}73897390.peach-panic-button--danger:disabled {7391  opacity: 0.35;7392  cursor: not-allowed;7393}73947395.peach-panic-button--ghost {7396  background: transparent;7397  border: 1px solid rgba(255, 255, 255, 0.18);7398  color: var(--peach-t2);7399}74007401.peach-panic-button--ghost:hover {7402  border-color: rgba(255, 255, 255, 0.32);7403  color: var(--peach-t1);7404}74057406.peach-panic-link {7407  background: transparent;7408  border: none;7409  padding: 4px 0;7410  color: rgba(220, 38, 38, 0.65);7411  font-size: 0.75rem;7412  cursor: pointer;7413  text-align: left;7414  text-decoration: underline;7415  text-underline-offset: 3px;7416}74177418.peach-panic-link:hover {7419  color: rgb(220, 38, 38);7420}74217422.peach-panic-bar {7423  background: rgb(220, 38, 38);7424  padding: 16px 20px;7425  margin: -28px -20px 0;7426  text-align: center;7427  font-size: 0.8125rem;7428  font-weight: 700;7429  letter-spacing: 0.12em;7430  color: #ffffff;7431}74327433.peach-panic-final-button {7434  width: 100%;7435  padding: 14px;7436  background: rgb(220, 38, 38);7437  border: none;7438  border-radius: 8px;7439  color: #ffffff;7440  font-size: 0.875rem;7441  font-weight: 700;7442  letter-spacing: 0.08em;7443  text-transform: uppercase;7444  cursor: pointer;7445  animation: peach-panic-pulse 2s ease-in-out infinite;7446}74477448.peach-settings-license {7449  margin-top: 10px;7450  padding-top: 10px;7451  border-top: 1px solid var(--peach-t3);7452}74537454.peach-settings-label {7455  font-size: 0.625rem;7456  letter-spacing: 0.08em;7457  color: var(--peach-t3);7458  display: block;7459  margin-bottom: 6px;7460}74617462.peach-settings-license-row {7463  display: flex;7464  align-items: center;7465  justify-content: space-between;7466  gap: 8px;7467}74687469.peach-settings-license-key {7470  font-family: 'IBM Plex Mono', monospace;7471  font-size: 0.75rem;7472  color: var(--peach-t0);7473  letter-spacing: 0.04em;7474  word-break: break-all;7475  flex: 1;7476  min-width: 0;7477}74787479.peach-settings-license-key--masked {7480  font-family: 'IBM Plex Mono', monospace;7481  font-size: 0.6rem;7482  color: var(--peach-t1);7483  letter-spacing: 0.18em;7484  user-select: none;7485}74867487.peach-settings-license-actions {7488  display: flex;7489  align-items: center;7490  gap: 2px;7491  flex-shrink: 0;7492}74937494.peach-settings-license-copy {7495  font-size: 0.6875rem;7496  color: var(--peach-accent);7497  background: transparent;7498  border: none;7499  cursor: pointer;7500  padding: 4px 8px;7501  border-radius: 4px;7502  flex-shrink: 0;7503  transition: opacity 150ms ease;7504}75057506.peach-settings-license-copy:hover {7507  opacity: 0.75;7508}75097510.peach-settings-license-toggle {7511  display: flex;7512  align-items: center;7513  justify-content: center;7514  background: transparent;7515  border: none;7516  cursor: pointer;7517  padding: 4px 6px;7518  border-radius: 4px;7519  color: var(--peach-t2);7520  transition: color 150ms ease;7521}75227523.peach-settings-license-toggle:hover {7524  color: var(--peach-t1);7525}75267527@keyframes peach-panic-pulse {7528  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7529  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7530}75317532[data-motion="reduce"] .peach-panic-final-button {7533  animation: none;7534}75357536/* Vault History — Settings → Vault sub-view */75377538.peach-history-list {7539  border: 1px solid var(--peach-border);7540  border-radius: 8px;7541  overflow: hidden;7542  margin: 8px 0 4px;7543}75447545.peach-history-row {7546  display: flex;7547  align-items: center;7548  justify-content: space-between;7549  padding: 9px 12px;7550  gap: 10px;7551  border-bottom: 1px solid var(--peach-border);7552}75537554.peach-history-row:last-child {7555  border-bottom: none;7556}75577558.peach-history-meta {7559  display: flex;7560  flex-direction: column;7561  gap: 2px;7562  min-width: 0;7563  flex: 1;7564}75657566.peach-history-time {7567  font-size: 0.75rem;7568  font-family: 'IBM Plex Mono', ui-monospace, monospace;7569  color: var(--peach-t0);7570  white-space: nowrap;7571  overflow: hidden;7572  text-overflow: ellipsis;7573}75747575.peach-history-sub {7576  font-size: 0.625rem;7577  color: var(--peach-t2);7578  letter-spacing: 0.06em;7579  text-transform: uppercase;7580  white-space: nowrap;7581  overflow: hidden;7582  text-overflow: ellipsis;7583}75847585.peach-history-btn {7586  flex-shrink: 0;7587  white-space: nowrap;7588  min-width: 56px;7589  text-align: center;7590}75917592.peach-history-btn.is-busy {7593  opacity: 0.65;7594}75957596.peach-history-footer {7597  font-size: 0.625rem;7598  color: var(--peach-t3);7599  letter-spacing: 0.05em;7600  text-align: right;7601  margin: 0;7602  padding: 2px 0 0;7603}76047605/* ── Context menu + swipe-copy flash ─────────────────────── */7606.peach-context-menu-backdrop {7607  position: fixed;7608  inset: 0;7609  background: rgba(0, 0, 0, 0.45);7610  z-index: 100;7611  display: flex;7612  align-items: flex-end;7613  justify-content: center;7614  animation: peach-ctx-fade 140ms ease both;7615}7616.peach-context-menu {7617  width: min(360px, calc(100vw - 24px));7618  margin-bottom: max(env(safe-area-inset-bottom), 12px);7619  background: var(--peach-bg);7620  border: 1px solid var(--peach-t3);7621  border-radius: 14px;7622  padding: 6px;7623  display: flex;7624  flex-direction: column;7625  gap: 2px;7626  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7627  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7628}7629@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7630@keyframes peach-ctx-rise {7631  from { transform: translateY(16px); opacity: 0; }7632  to   { transform: translateY(0);    opacity: 1; }7633}7634.peach-context-menu-item {7635  background: transparent;7636  color: var(--peach-t0);7637  border: 0;7638  border-radius: 10px;7639  padding: 12px 14px;7640  text-align: left;7641  font: inherit;7642  cursor: pointer;7643}7644.peach-context-menu-item:hover,7645.peach-context-menu-item:focus-visible {7646  background: var(--peach-t3);7647}7648.peach-context-menu-item--danger {7649  color: var(--peach-health-bad, #d96868);7650}7651.peach-context-menu-item--cancel {7652  color: var(--peach-t2);7653  margin-top: 4px;7654  border-top: 1px solid var(--peach-t3);7655  border-radius: 0 0 10px 10px;7656}76577658/* Swipe-to-copy flash */7659.peach-entry-row.is-copy-flash {7660  animation: peach-copy-flash 600ms ease both;7661}7662@keyframes peach-copy-flash {7663  0%   { background: transparent; }7664  20%  { background: rgba(217, 153, 51, 0.32); }7665  100% { background: transparent; }7666}76677668html { font-size: 16px; }76697670/* ── Recovery word entry ─────────────────────────────────────────── */7671.peach-lock-recover-link {7672  display: block;7673  width: 100%;7674  margin-top: 12px;7675  background: none;7676  border: none;7677  font-family: "IBM Plex Mono", monospace;7678  font-size: 0.625rem;7679  letter-spacing: 0.06em;7680  color: var(--peach-t2);7681  cursor: pointer;7682  text-align: center;7683  padding: 4px;7684  transition: color 120ms ease;7685}7686.peach-lock-recover-link:hover {7687  color: var(--peach-t0);7688}76897690.lock-screen--recovery {7691  display: flex;7692  flex-direction: column;7693  align-items: stretch;7694  padding: 12px 20px 24px;7695  overflow: hidden;7696}76977698.peach-recovery-nav {7699  display: flex;7700  align-items: center;7701  position: relative;7702  z-index: 1;7703  margin-bottom: 4px;7704}77057706/* Mask runes to the top decorative band only — keep inputs and the7707   bottom CTA button clear. The bottom of the popup is reserved for7708   submit buttons; rendering runes there overlaps the button glyph. */7709.peach-rune-background--recovery {7710  -webkit-mask-image: linear-gradient(7711    to bottom,7712    black 0px, black 85px,7713    transparent 110px,7714    transparent 100%7715  );7716  mask-image: linear-gradient(7717    to bottom,7718    black 0px, black 85px,7719    transparent 110px,7720    transparent 100%7721  );7722}77237724.peach-recovery-header {7725  text-align: center;7726  margin-bottom: 16px;7727  margin-top: 4px;7728}7729.peach-recovery-header .peach-onboarding-headline {7730  font-size: 1.25rem;7731  font-weight: 300;7732  letter-spacing: 0.02em;7733  margin: 0 0 4px;7734}7735.peach-recovery-header .peach-hint {7736  font-family: "IBM Plex Mono", monospace;7737  font-size: 0.625rem;7738  color: var(--peach-t2);7739  letter-spacing: 0.04em;7740  margin: 0;7741}77427743/* 12-word grid: 2 columns × 6 rows */7744.peach-recovery-grid {7745  display: grid;7746  grid-template-columns: repeat(2, 1fr);7747  gap: 12px 20px;7748  width: 100%;7749  margin-bottom: 0;7750}77517752.peach-recovery-word-slot {7753  display: flex;7754  align-items: center;7755  gap: 6px;7756  min-width: 0;7757}77587759.peach-recovery-word-index {7760  font-family: "IBM Plex Mono", monospace;7761  font-size: 0.5rem;7762  color: rgba(255, 255, 255, 0.35);7763  min-width: 14px;7764  flex-shrink: 0;7765  text-align: right;7766  letter-spacing: 0.04em;7767}77687769.peach-recovery-word-input {7770  flex: 1;7771  min-width: 0;7772  background: transparent;7773  border: none;7774  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7775  color: var(--peach-t0);7776  font-family: "IBM Plex Mono", monospace;7777  font-size: 0.6875rem;7778  letter-spacing: 0.06em;7779  padding: 5px 2px 4px;7780  outline: none;7781  text-transform: lowercase;7782  transition: border-color 120ms ease;7783}7784.peach-recovery-word-input::placeholder {7785  color: rgba(255, 255, 255, 0.18);7786}7787.peach-recovery-word-input:focus {7788  border-bottom-color: var(--peach-accent);7789}77907791.peach-recovery-submit {7792  width: 100%;7793  margin-top: auto;7794}77957796.peach-recovery-new-password-form {7797  width: 100%;7798  display: flex;7799  flex-direction: column;7800  gap: 16px;7801  margin-bottom: 8px;7802}7803.peach-recovery-new-password-form .peach-newvault-field {7804  display: flex;7805  flex-direction: column;7806  gap: 4px;7807}78087809/* ── Recovery words display (post-create) ────────────────────────── */7810.lock-screen--recovery-display {7811  display: flex;7812  flex-direction: column;7813  align-items: stretch;7814  padding: 0 20px 20px;7815  min-height: 0;7816  overflow-y: auto;7817}78187819.peach-recovery-words-display {7820  width: 100%;7821  margin-bottom: 16px;7822  border: 1px solid var(--peach-t3);7823  border-radius: 8px;7824  padding: 12px 14px;7825  background: rgba(245, 240, 234, 0.04);7826}78277828.peach-recovery-words-label {7829  font-family: "IBM Plex Mono", monospace;7830  font-size: 0.5rem;7831  letter-spacing: 0.08em;7832  color: var(--peach-t2);7833  text-transform: uppercase;7834  margin-bottom: 10px;7835}78367837.peach-recovery-word-list {7838  list-style: none;7839  margin: 0;7840  padding: 0;7841  display: grid;7842  grid-template-columns: repeat(2, 1fr);7843  gap: 6px 16px;7844}78457846.peach-recovery-word-item {7847  display: flex;7848  align-items: baseline;7849  gap: 5px;7850}78517852.peach-recovery-word-num {7853  font-family: "IBM Plex Mono", monospace;7854  font-size: 0.5rem;7855  color: var(--peach-t2);7856  width: 14px;7857  flex: 0 0 14px;7858  text-align: right;7859  letter-spacing: 0.04em;7860  font-variant-numeric: tabular-nums;7861}78627863.peach-recovery-download-btn {7864  display: block;7865  margin: 10px auto 0;7866  padding: 4px 10px;7867  background: transparent;7868  border: 1px solid var(--peach-border);7869  border-radius: 6px;7870  color: var(--peach-t2);7871  font-family: "IBM Plex Mono", monospace;7872  font-size: 0.5625rem;7873  letter-spacing: 0.06em;7874  text-transform: lowercase;7875  cursor: pointer;7876  transition: border-color 0.15s, color 0.15s;7877}78787879.peach-recovery-download-btn:hover {7880  border-color: var(--peach-accent);7881  color: var(--peach-t0);7882}78837884.peach-recovery-word-text {7885  font-family: "IBM Plex Mono", monospace;7886  font-size: 0.6875rem;7887  letter-spacing: 0.06em;7888  color: var(--peach-t0);7889  text-transform: lowercase;7890}78917892.peach-hint--warning {7893  color: var(--peach-accent);7894  font-style: italic;7895}7896.peach-hint--success {7897  color: var(--peach-t2);7898  font-family: "IBM Plex Mono", monospace;7899  font-size: 0.625rem;7900  letter-spacing: 0.06em;7901}79027903/* Confirmation step */7904.peach-recovery-confirm {7905  width: 100%;7906  flex: 1;7907  display: flex;7908  flex-direction: column;7909}7910.peach-recovery-confirm-label {7911  font-family: "IBM Plex Mono", monospace;7912  font-size: 0.5625rem;7913  letter-spacing: 0.04em;7914  color: var(--peach-t2);7915  text-align: center;7916  margin: 0 0 12px;7917}7918.peach-recovery-confirm-fields {7919  display: flex;7920  flex-direction: column;7921  gap: 14px;7922  margin-bottom: 10px;7923}7924.peach-recovery-confirm-field {7925  display: flex;7926  align-items: center;7927  gap: 8px;7928}7929.peach-recovery-confirm-num {7930  font-family: "IBM Plex Mono", monospace;7931  font-size: 0.5rem;7932  color: var(--peach-t2);7933  min-width: 44px;7934  letter-spacing: 0.04em;7935}7936.peach-recovery-confirm-input {7937  flex: 1;7938  background: transparent;7939  border: none;7940  border-bottom: 1px solid var(--peach-t3);7941  color: var(--peach-t0);7942  font-family: "IBM Plex Mono", monospace;7943  font-size: 0.6875rem;7944  letter-spacing: 0.06em;7945  padding: 4px 2px 3px;7946  outline: none;7947  text-transform: lowercase;7948  transition: border-color 120ms ease;7949}7950.peach-recovery-confirm-input:focus {7951  border-bottom-color: var(--peach-accent);7952}7953.peach-recovery-confirm-input:disabled {7954  opacity: 0.4;7955  cursor: not-allowed;7956}7957.peach-recovery-confirm-btn {7958  width: 100%;7959  margin-top: auto;7960}79617962/* ============================================================7963   Sync info sheet7964   ============================================================ */79657966.peach-sync-info-backdrop {7967  position: fixed;7968  inset: 0;7969  z-index: 200;7970  background: rgba(0, 0, 0, 0.55);7971  display: flex;7972  align-items: flex-end;7973  animation: peach-fade-in 200ms ease forwards;7974}79757976@keyframes peach-fade-in {7977  from { opacity: 0; }7978  to   { opacity: 1; }7979}79807981.peach-sync-info-sheet {7982  width: 100%;7983  background: var(--peach-bg-card, var(--peach-bg));7984  border-top-left-radius: 20px;7985  border-top-right-radius: 20px;7986  padding: 12px 24px 32px;7987  display: flex;7988  flex-direction: column;7989  gap: 20px;7990  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;7991}79927993@keyframes peach-sheet-up {7994  from { transform: translateY(100%); }7995  to   { transform: translateY(0); }7996}79977998.peach-sync-info-handle {7999  width: 36px;8000  height: 4px;8001  border-radius: 2px;8002  background: var(--peach-border);8003  margin: 0 auto 4px;8004  flex-shrink: 0;8005}80068007.peach-sync-info-title {8008  font-family: 'Cormorant Garamond', serif;8009  font-style: italic;8010  font-size: 26px;8011  font-weight: 600;8012  color: var(--peach-t0);8013  margin: 0;8014  line-height: 1.2;8015}80168017.peach-sync-info-body {8018  display: flex;8019  flex-direction: column;8020  gap: 14px;8021}80228023.peach-sync-info-point {8024  display: flex;8025  gap: 12px;8026  align-items: flex-start;8027  font-size: 14px;8028  color: var(--peach-t2);8029  line-height: 1.6;8030  margin: 0;8031}80328033.peach-sync-info-icon {8034  color: var(--peach-accent);8035  font-size: 16px;8036  flex-shrink: 0;8037  margin-top: 1px;8038}80398040.peach-sync-info-actions {8041  display: flex;8042  flex-direction: column;8043  gap: 12px;8044  margin-top: 4px;8045}80468047.peach-sync-info-pro-link {8048  background: none;8049  border: none;8050  font-size: 13px;8051  color: var(--peach-t3);8052  cursor: pointer;8053  padding: 0;8054  font-family: inherit;8055  text-align: center;8056  transition: color 150ms ease;8057}80588059.peach-sync-info-pro-link:hover {8060  color: var(--peach-accent);8061}80628063.peach-btn--full {8064  width: 100%;8065}80668067/* ── Sync screen ── */80688069.peach-sync-coming-soon {8070  display: flex;8071  align-items: flex-start;8072  gap: 10px;8073  padding: 12px 14px;8074  background: var(--peach-s1);8075  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8076  border-radius: 10px;8077}8078.peach-sync-coming-soon__icon {8079  flex-shrink: 0;8080  color: var(--peach-accent);8081  margin-top: 1px;8082  line-height: 0;8083}8084.peach-sync-coming-soon__title {8085  font-family: 'Cormorant Garamond', serif;8086  font-weight: 500;8087  font-size: 13px;8088  color: var(--peach-accent);8089  margin: 0 0 5px;8090  line-height: 1.3;8091}8092.peach-sync-coming-soon__body {8093  font-size: 12px;8094  color: var(--peach-t1);8095  line-height: 1.55;8096  margin: 0;8097}80988099.peach-sync-screen {8100  display: flex;8101  flex-direction: column;8102  height: 100%;8103}81048105.peach-sync-content {8106  flex: 1;8107  overflow-y: auto;8108  padding: 24px 20px 40px;8109  display: flex;8110  flex-direction: column;8111  gap: 24px;8112}81138114/* Intro (State A) */8115.peach-sync-headline {8116  font-family: 'Cormorant Garamond', serif;8117  font-style: italic;8118  font-size: 28px;8119  font-weight: 600;8120  color: var(--peach-t0);8121  margin: 0 0 10px;8122  line-height: 1.2;8123}81248125.peach-sync-intro-body {8126  font-size: 14px;8127  color: var(--peach-t1);8128  line-height: 1.6;8129  margin: 0;8130}81318132.peach-sync-pro-note {8133  display: flex;8134  flex-direction: column;8135  gap: 8px;8136  background: var(--peach-t3);8137  border-radius: 10px;8138  padding: 12px 14px;8139}81408141.peach-sync-pro-note-text {8142  font-size: 12px;8143  color: var(--peach-t2);8144  line-height: 1.5;8145  margin: 0;8146}81478148.peach-sync-pro-link {8149  background: none;8150  border: none;8151  font-size: 12px;8152  color: var(--peach-accent);8153  cursor: pointer;8154  padding: 0;8155  font-family: inherit;8156  text-align: left;8157}81588159/* Status (State C) */8160.peach-sync-status {8161  padding: 12px 0;8162  border-bottom: 1px solid var(--peach-border);8163}81648165.peach-sync-status-row {8166  display: flex;8167  align-items: center;8168  gap: 8px;8169}81708171.peach-sync-dot {8172  width: 7px;8173  height: 7px;8174  border-radius: 50%;8175  flex-shrink: 0;8176}81778178.peach-sync-dot--green { background: var(--peach-health-ok); }8179.peach-sync-dot--amber { background: var(--peach-accent); }81808181.peach-sync-status-text {8182  font-family: 'IBM Plex Mono', monospace;8183  font-size: 11px;8184  color: var(--peach-t2);8185}81868187/* Paired devices */8188.peach-sync-section {8189  display: flex;8190  flex-direction: column;8191  gap: 2px;8192}81938194.peach-sync-section-label {8195  font-family: 'IBM Plex Mono', monospace;8196  font-size: 10px;8197  letter-spacing: 0.1em;8198  color: var(--peach-t3);8199  margin: 0 0 10px;8200}82018202.peach-sync-device-row {8203  display: flex;8204  justify-content: space-between;8205  align-items: baseline;8206  padding: 10px 0;8207  border-bottom: 1px solid var(--peach-border);8208  gap: 12px;8209}82108211.peach-sync-device-name {8212  font-size: 14px;8213  color: var(--peach-t1);8214}82158216.peach-sync-device-meta {8217  font-family: 'IBM Plex Mono', monospace;8218  font-size: 11px;8219  color: var(--peach-t3);8220  white-space: nowrap;8221}82228223.peach-sync-hub-note {8224  padding: 14px 16px;8225  border: 1px solid var(--peach-border);8226  border-radius: 10px;8227  display: flex;8228  flex-direction: column;8229  gap: 6px;8230  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8231}82328233.peach-sync-hub-note-title {8234  font-size: 13px;8235  font-weight: 600;8236  color: var(--peach-t0);8237  margin: 0;8238}82398240.peach-sync-hub-note-body {8241  font-size: 12px;8242  color: var(--peach-t2);8243  line-height: 1.6;8244  margin: 0;8245}82468247/* Action buttons */8248.peach-sync-actions {8249  display: flex;8250  gap: 10px;8251  flex-wrap: wrap;8252}82538254/* Upgrade prompt (State B) */8255.peach-sync-upgrade {8256  display: flex;8257  flex-direction: column;8258  gap: 12px;8259  padding: 16px;8260  border: 1px solid var(--peach-border);8261  border-radius: 10px;8262}82638264.peach-sync-upgrade-text {8265  font-size: 13px;8266  color: var(--peach-t2);8267  line-height: 1.6;8268  margin: 0;8269}82708271/* Network note */8272.peach-sync-network-note {8273  font-size: 12px;8274  color: var(--peach-t3);8275  line-height: 1.6;8276  margin: 0;8277}82788279/* Advanced */8280.peach-sync-advanced {8281  margin-top: auto;8282  padding-top: 16px;8283  border-top: 1px solid var(--peach-border);8284}82858286.peach-sync-advanced-toggle {8287  display: flex;8288  align-items: center;8289  gap: 8px;8290  background: none;8291  border: none;8292  font-family: 'IBM Plex Mono', monospace;8293  font-size: 11px;8294  letter-spacing: 0.08em;8295  color: var(--peach-t3);8296  cursor: pointer;8297  padding: 0;8298  text-transform: uppercase;8299}83008301.peach-sync-advanced-chevron {8302  display: inline-block;8303  transition: transform 200ms ease;8304  font-size: 10px;8305}83068307.peach-sync-advanced-chevron.is-open {8308  transform: rotate(90deg);8309}83108311.peach-sync-advanced-content {8312  margin-top: 14px;8313}83148315.peach-sync-advanced-row {8316  display: flex;8317  justify-content: space-between;8318  align-items: center;8319  gap: 16px;8320}83218322.peach-sync-advanced-title {8323  font-size: 14px;8324  color: var(--peach-t1);8325  margin: 0 0 2px;8326}83278328.peach-sync-advanced-subtitle {8329  font-size: 12px;8330  color: var(--peach-t3);8331  margin: 0;8332  line-height: 1.5;8333}83348335/* ── Add Device — Android scan tabs ─────────────────────────────────────── */83368337.peach-pairing-tabs {8338  display: flex;8339  border: 1px solid var(--peach-border);8340  border-radius: 8px;8341  overflow: hidden;8342  margin-bottom: 4px;8343}83448345.peach-pairing-tab {8346  flex: 1;8347  padding: 10px 0;8348  background: none;8349  border: none;8350  font-family: 'IBM Plex Mono', monospace;8351  font-size: 11px;8352  letter-spacing: 0.06em;8353  color: var(--peach-t2);8354  cursor: pointer;8355  transition: background 150ms, color 150ms;8356}83578358.peach-pairing-tab.is-active {8359  background: var(--peach-accent);8360  color: #fff;8361  font-weight: 600;8362}83638364.peach-pairing-tab:not(.is-active):active {8365  background: var(--peach-border);8366}83678368/* Camera view */8369.peach-pairing-camera-container {8370  position: relative;8371  width: 100%;8372  aspect-ratio: 1;8373  border-radius: 12px;8374  overflow: hidden;8375  background: #000;8376  flex-shrink: 0;8377}83788379.peach-pairing-video {8380  width: 100%;8381  height: 100%;8382  object-fit: cover;8383}83848385.peach-pairing-scan-frame {8386  position: absolute;8387  top: 50%;8388  left: 50%;8389  transform: translate(-50%, -50%);8390  width: 60%;8391  aspect-ratio: 1;8392  border: 2px solid var(--peach-accent);8393  border-radius: 8px;8394  pointer-events: none;8395}83968397/* ── Notes Mode ── */83988399/* Overlay that crossfades over the vault */8400.peach-notes-overlay {8401  position: fixed;8402  inset: 0;8403  z-index: 90;8404  opacity: 0;8405  pointer-events: none;8406  animation: peach-mode-in 220ms ease-in forwards;8407}84088409.peach-notes-overlay.is-visible {8410  opacity: 1;8411  pointer-events: auto;8412}84138414@keyframes peach-mode-in {8415  from { opacity: 0; }8416  to   { opacity: 1; }8417}84188419/* Top-level notes surface */8420.peach-notes-mode {8421  position: absolute;8422  inset: 0;8423  background: var(--peach-bg);8424  display: flex;8425  flex-direction: column;8426}84278428/* Rune canvas positioned behind content */8429.peach-note-rune-canvas {8430  position: absolute;8431  inset: 0;8432  width: 100%;8433  height: 100%;8434  pointer-events: none;8435  z-index: 0;8436}84378438/* TOC wrapper */8439.peach-notes-toc-wrapper {8440  position: absolute;8441  inset: 0;8442  z-index: 1;8443  opacity: 1;8444  pointer-events: auto;8445  transition: opacity 200ms ease;8446}84478448.peach-notes-toc-wrapper.is-hidden {8449  opacity: 0;8450  pointer-events: none;8451}84528453/* Editor wrapper */8454.peach-notes-editor-wrapper {8455  position: absolute;8456  inset: 0;8457  z-index: 2;8458  opacity: 0;8459  pointer-events: none;8460  transition: opacity 200ms ease;8461}84628463.peach-notes-editor-wrapper.is-visible {8464  opacity: 1;8465  pointer-events: auto;8466}84678468/* TOC inner */8469.peach-notes-toc {8470  position: relative;8471  display: flex;8472  flex-direction: column;8473  height: 100%;8474  padding-top: env(safe-area-inset-top, 0px);8475  padding-bottom: env(safe-area-inset-bottom, 0px);8476}84778478/* Shared header */8479.peach-notes-header {8480  display: flex;8481  align-items: center;8482  padding: 12px 16px;8483  gap: 12px;8484  flex-shrink: 0;8485  min-height: 52px;8486  position: relative;8487  z-index: 2;8488}84898490.peach-notes-back {8491  font-size: 22px;8492  color: var(--peach-t2);8493  background: none;8494  border: none;8495  padding: 4px;8496  cursor: pointer;8497  line-height: 1;8498  flex-shrink: 0;8499  transition: color 150ms ease;8500  -webkit-tap-highlight-color: transparent;8501}85028503.peach-notes-back:active { color: var(--peach-t0); }85048505.peach-notes-header-title {8506  flex: 1;8507  font-family: 'Cormorant Garamond', serif;8508  font-style: italic;8509  font-size: 22px;8510  color: var(--peach-t0);8511  text-align: center;8512}85138514.peach-notes-header-title.is-breadcrumb {8515  font-family: 'IBM Plex Mono', monospace;8516  font-style: normal;8517  font-size: 11px;8518  color: var(--peach-t3);8519  letter-spacing: 0.08em;8520  text-transform: uppercase;8521  cursor: pointer;8522}85238524.peach-notes-header-actions {8525  display: flex;8526  gap: 8px;8527  flex-shrink: 0;8528}85298530.peach-notes-header-btn {8531  width: 36px;8532  height: 36px;8533  display: flex;8534  align-items: center;8535  justify-content: center;8536  background: none;8537  border: none;8538  color: var(--peach-t2);8539  cursor: pointer;8540  border-radius: 8px;8541  font-size: 16px;8542  transition: color 150ms ease, background 150ms ease;8543  -webkit-tap-highlight-color: transparent;8544}85458546.peach-notes-header-btn:active {8547  background: rgba(255,255,255,0.06);8548  color: var(--peach-t0);8549}85508551/* Inline search bar */8552.peach-notes-search-input {8553  flex: 1;8554  background: none;8555  border: none;8556  outline: none;8557  font-family: 'IBM Plex Mono', monospace;8558  font-size: 13px;8559  color: var(--peach-t0);8560  padding: 4px 0;8561  letter-spacing: 0.02em;8562}85638564.peach-notes-search-input::placeholder {8565  color: var(--peach-t3);8566}85678568/* TOC list */8569.peach-notes-list-container {8570  flex: 1;8571  overflow-y: auto;8572  overflow-x: hidden;8573  scrollbar-width: none;8574  -webkit-overflow-scrolling: touch;8575  overscroll-behavior: contain;8576  position: relative;8577  z-index: 1;8578}85798580.peach-notes-list-container::-webkit-scrollbar { display: none; }85818582/* Note row */8583.peach-note-row {8584  position: relative;8585  display: grid;8586  grid-template-columns: 44px 8px 1fr 8px auto;8587  align-items: center;8588  min-height: 72px;8589  padding: 16px 20px;8590  border-bottom: 0.5px solid var(--peach-border);8591  cursor: pointer;8592  overflow: hidden;8593  touch-action: pan-y;8594  user-select: none;8595  -webkit-user-select: none;8596  -webkit-tap-highlight-color: transparent;8597}85988599.peach-note-row:first-child {8600  border-top: 0.5px solid var(--peach-border);8601}86028603.peach-note-row:active {8604  background: rgba(255,255,255,0.02);8605}86068607.peach-note-numeral {8608  font-family: 'Cormorant Garamond', serif;8609  font-style: italic;8610  font-size: 15px;8611  color: var(--peach-accent);8612  text-align: right;8613  line-height: 1;8614  flex-shrink: 0;8615}86168617.peach-note-title-gap { /* grid spacer */ }86188619.peach-note-title {8620  font-family: 'Cormorant Garamond', serif;8621  font-style: italic;8622  font-size: 18px;8623  color: var(--peach-t0);8624  line-height: 1.3;8625  min-width: 0;8626  overflow-wrap: break-word;8627}86288629.peach-note-title-match {8630  color: var(--peach-accent);8631}86328633.peach-note-date {8634  font-family: 'IBM Plex Mono', monospace;8635  font-size: 11px;8636  color: var(--peach-t2);8637  white-space: nowrap;8638  text-align: right;8639  flex-shrink: 0;8640  grid-column: 5;8641}86428643/* Swipe underlays */8644.peach-note-row-underlay {8645  position: absolute;8646  inset: 0;8647  display: flex;8648  align-items: center;8649  padding: 0 24px;8650  font-family: 'IBM Plex Mono', monospace;8651  font-size: 11px;8652  letter-spacing: 0.1em;8653  pointer-events: none;8654  z-index: 0;8655}86568657.peach-note-row-underlay--delete {8658  background: #8B2020;8659  color: rgba(255,255,255,0.9);8660  justify-content: flex-end;8661}86628663.peach-note-row-underlay--archive {8664  background: var(--peach-accent);8665  color: #0C0A06;8666  justify-content: flex-start;8667}86688669/* Delete confirm strip */8670.peach-note-delete-confirm {8671  position: absolute;8672  inset: 0;8673  background: var(--peach-bg);8674  display: flex;8675  align-items: center;8676  gap: 12px;8677  padding: 0 20px;8678  font-family: 'IBM Plex Mono', monospace;8679  font-size: 11px;8680  color: var(--peach-t1);8681  letter-spacing: 0.04em;8682  animation: peach-delete-confirm-in 150ms ease both;8683  z-index: 10;8684}86858686@keyframes peach-delete-confirm-in {8687  from { opacity: 0; }8688  to   { opacity: 1; }8689}86908691.peach-note-delete-confirm-btn {8692  background: #8B2020;8693  color: rgba(255,255,255,0.9);8694  border: none;8695  border-radius: 6px;8696  padding: 4px 10px;8697  font-family: 'IBM Plex Mono', monospace;8698  font-size: 10px;8699  cursor: pointer;8700  letter-spacing: 0.06em;8701}87028703.peach-note-delete-cancel-btn {8704  background: none;8705  border: none;8706  color: var(--peach-t3);8707  font-family: 'IBM Plex Mono', monospace;8708  font-size: 10px;8709  cursor: pointer;8710  letter-spacing: 0.06em;8711  padding: 4px 6px;8712}87138714/* + New note button */8715.peach-notes-new-btn {8716  font-family: 'IBM Plex Mono', monospace;8717  font-size: 12px;8718  color: var(--peach-t3);8719  text-align: center;8720  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8721  background: none;8722  border: none;8723  width: 100%;8724  cursor: pointer;8725  letter-spacing: 0.04em;8726  transition: color 150ms ease;8727  -webkit-tap-highlight-color: transparent;8728}87298730.peach-notes-new-btn:active { color: var(--peach-accent); }87318732/* Empty state */8733.peach-notes-empty {8734  display: flex;8735  flex-direction: column;8736  align-items: center;8737  justify-content: center;8738  flex: 1;8739  padding: 48px 32px;8740  gap: 16px;8741}87428743.peach-notes-empty-text {8744  font-family: 'Cormorant Garamond', serif;8745  font-style: italic;8746  font-size: 20px;8747  color: var(--peach-t3);8748  text-align: center;8749  margin: 0;8750  line-height: 1.4;8751  white-space: pre-line;8752}87538754/* ── Editor surface ── */87558756.peach-note-editor-surface {8757  position: absolute;8758  inset: 0;8759  background: var(--peach-bg);8760  display: flex;8761  flex-direction: column;8762  padding-top: env(safe-area-inset-top, 0px);8763}87648765.peach-note-editor-scroll {8766  flex: 1;8767  overflow-y: auto;8768  overflow-x: hidden;8769  scrollbar-width: none;8770  -webkit-overflow-scrolling: touch;8771  padding: 0 24px 120px;8772  position: relative;8773  z-index: 1;8774}87758776.peach-note-editor-scroll::-webkit-scrollbar { display: none; }87778778/* Desktop toolbar (always visible above body) */8779.peach-note-toolbar-desktop-inline {8780  display: flex;8781  align-items: center;8782  gap: 2px;8783  padding: 6px 0 12px;8784  margin-bottom: 4px;8785  border-bottom: 0.5px solid var(--peach-border);8786}87878788/* Title field */8789.peach-note-title-field {8790  font-family: 'Cormorant Garamond', serif;8791  font-style: italic;8792  font-size: 32px;8793  font-weight: 600;8794  color: var(--peach-t0);8795  line-height: 1.2;8796  padding: 8px 0 0;8797  outline: none;8798  min-height: 44px;8799  word-break: break-word;8800  position: relative;8801  z-index: 1;8802}88038804.peach-note-title-field:empty::before {8805  content: attr(data-placeholder);8806  color: var(--peach-t3);8807  pointer-events: none;8808}88098810/* Hairline separator */8811.peach-note-hairline {8812  height: 0.5px;8813  background: var(--peach-border);8814  margin: 12px 0 20px;8815  position: relative;8816  z-index: 1;8817}88188819/* Body field */8820.peach-note-body-field {8821  font-family: 'DM Sans', sans-serif;8822  font-size: 16px;8823  color: var(--peach-t0);8824  line-height: 1.85;8825  padding: 0;8826  outline: none;8827  min-height: 240px;8828  word-break: break-word;8829  position: relative;8830  z-index: 1;8831}88328833.peach-note-body-field:empty::before {8834  content: attr(data-placeholder);8835  color: var(--peach-t3);8836  font-style: italic;8837  pointer-events: none;8838}88398840.peach-note-body-field h2 {8841  font-family: 'Cormorant Garamond', serif;8842  font-style: italic;8843  font-size: 22px;8844  font-weight: 600;8845  color: var(--peach-t0);8846  margin: 20px 0 8px;8847}88488849.peach-note-body-field blockquote {8850  border-left: 2px solid var(--peach-accent);8851  margin: 12px 0;8852  padding-left: 16px;8853  color: var(--peach-t1);8854  font-style: italic;8855}88568857.peach-note-body-field ul,8858.peach-note-body-field ol {8859  padding-left: 20px;8860  margin: 8px 0;8861}88628863.peach-note-body-field li {8864  margin: 4px 0;8865}88668867.peach-note-body-field hr {8868  border: none;8869  border-top: 0.5px solid var(--peach-border);8870  margin: 16px 0;8871}88728873/* Saved indicator */8874.peach-note-saved-indicator {8875  font-family: 'IBM Plex Mono', monospace;8876  font-size: 11px;8877  color: var(--peach-t3);8878  letter-spacing: 0.04em;8879  text-align: right;8880  padding: 6px 24px;8881  flex-shrink: 0;8882  transition: opacity 300ms ease;8883  pointer-events: none;8884  position: relative;8885  z-index: 1;8886}88878888/* Mobile keyboard toolbar */8889.peach-note-toolbar-mobile {8890  display: flex;8891  align-items: center;8892  padding: 8px 16px;8893  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));8894  background: var(--peach-bg);8895  border-top: 0.5px solid var(--peach-border);8896  gap: 4px;8897  flex-shrink: 0;8898  position: relative;8899  z-index: 10;8900}89018902.peach-note-toolbar-btn {8903  min-width: 36px;8904  height: 36px;8905  display: flex;8906  align-items: center;8907  justify-content: center;8908  background: none;8909  border: none;8910  border-radius: 8px;8911  cursor: pointer;8912  font-size: 14px;8913  color: var(--peach-t1);8914  font-family: 'DM Sans', sans-serif;8915  font-weight: 600;8916  transition: background 100ms ease, color 100ms ease;8917  -webkit-tap-highlight-color: transparent;8918}89198920.peach-note-toolbar-btn--italic { font-style: italic; }8921.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }8922.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }89238924.peach-note-toolbar-divider {8925  width: 0.5px;8926  height: 20px;8927  background: var(--peach-border);8928  margin: 0 4px;8929  flex-shrink: 0;8930}89318932.peach-note-toolbar-spacer { flex: 1; }89338934/* Desktop: larger headline in TOC */8935@media (min-width: 400px) {8936  .peach-notes-header-title:not(.is-breadcrumb) {8937    font-size: 32px;8938  }89398940  .peach-note-row {8941    min-height: 64px;8942    padding: 14px 16px;8943  }8944}89458946/* Flying title — shared element during expansion/collapse */89478948/* ─── Light theme overrides ───────────────────────────────────────────────8949   Tokens that cannot be expressed as variable substitutions — hardcoded8950   context-specific values that need separate light-mode rules. */89518952/* Settings section headers: use text-label (#79766F) per restoration brief —8953   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY8954   presence without fighting the light parchment background. */8955.light .peach-settings-sub-label,8956[data-theme="light"] .peach-settings-sub-label,8957.light .peach-settings-nav-label,8958[data-theme="light"] .peach-settings-nav-label {8959  color: #79766F;8960}89618962/* Secondary action buttons (ghost / subtle): filled with input-well surface8963   so they read as recessed against the parchment card background. */8964.light .peach-btn--ghost:not(.peach-icon-btn),8965[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {8966  background: #EEE7DD;8967  border-color: #DDD5CB;8968  color: #1A1208;8969}8970.light .peach-icon-btn,8971[data-theme="light"] .peach-icon-btn {8972  background: transparent;8973  border-color: transparent;8974}8975.light .peach-btn--subtle,8976[data-theme="light"] .peach-btn--subtle {8977  background: #EEE7DD;8978  border-color: #DDD5CB;8979}89808981/* Wide secondary action button on the lock screen — override the8982   hardcoded dark-mode rgba values with warm parchment equivalents. */8983.light .peach-lock-secondary,8984[data-theme="light"] .peach-lock-secondary {8985  background: #EEE7DD;8986  border-color: #DDD5CB;8987  color: #1A1208;8988}8989.light .peach-lock-secondary:hover,8990[data-theme="light"] .peach-lock-secondary:hover {8991  background: #F0E9DF;8992}89938994/* Entry row hover: bg-row lifts the row above the card surface. */8995.light .peach-entry-row:hover,8996[data-theme="light"] .peach-entry-row:hover {8997  background: #F2EBE1;8998}8999.light .peach-entry-row.is-active,9000[data-theme="light"] .peach-entry-row.is-active {9001  background: #F2EBE1;9002}9003.light .peach-entry-row.is-selected,9004[data-theme="light"] .peach-entry-row.is-selected {9005  background: #F5EDE2;9006}90079008/* ──────────────────────────────────────────────────────────────────────────9009   Chirp pairing flow — bird-stage animation (Phase 1)9010   See src/popup/components/ChirpPairingFlow.tsx and the brief §6.2.9011   Three-act animation gated on the [data-phase] attribute of9012   .peach-chirp-pair; child layers (birds, chirp arcs, flight wave, dot)9013   each react via either pose class or visibility flag.9014   Tokens: accent surfaces use var(--peach-accent); bird illustration9015   colours are baked into the SVG per the brand-peach exception in §3.1.9016   ────────────────────────────────────────────────────────────────────── */90179018.peach-chirp-pair {9019  position: absolute;9020  inset: 0;9021  z-index: 3;9022  display: flex;9023  flex-direction: column;9024  padding: 14px 12px 12px;9025  width: 100%;9026  box-sizing: border-box;9027  gap: 0;9028  background:9029    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9030    var(--peach-bg);9031  color: var(--peach-t0);9032  overflow-y: auto;9033  overflow-x: hidden;9034  scrollbar-width: none;9035  isolation: isolate;9036  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9037}9038@keyframes peach-chirp-overlay-in {9039  from { opacity: 0; transform: translateY(8px); }9040  to   { opacity: 1; transform: translateY(0); }9041}9042.peach-chirp-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }9043.peach-chirp-pair::before {9044  content: '';9045  position: absolute;9046  inset: 0;9047  border-radius: inherit;9048  pointer-events: none;9049  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9050  z-index: 0;9051}9052.peach-chirp-pair > * { position: relative; z-index: 1; }90539054/* Header --------------------------------------------------------------- */9055.peach-chirp-head {9056  display: flex; align-items: center; gap: 10px;9057}9058.peach-chirp-back {9059  width: 32px; height: 32px;9060  display: inline-flex; align-items: center; justify-content: center;9061  background: transparent;9062  border: none;9063  border-radius: 8px;9064  color: var(--peach-t1);9065  cursor: pointer;9066  transition: color 0.15s ease, box-shadow 0.15s ease;9067}9068.peach-chirp-back:hover {9069  color: var(--peach-accent);9070  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9071}9072.peach-chirp-title {9073  font-family: var(--font-display, Georgia, serif);9074  font-style: italic;9075  font-size: 24px;9076  font-weight: 500;9077  letter-spacing: 0.005em;9078  color: var(--peach-t0);9079  line-height: 1;9080}9081.peach-chirp-head-spacer { flex: 1; }90829083/* Chip row ------------------------------------------------------------- */9084.peach-chirp-chip-row {9085  display: flex;9086  align-items: center;9087  justify-content: flex-start;9088  margin-top: 12px;9089}9090.peach-chirp-chip {9091  display: inline-flex; align-items: center; gap: 8px;9092  padding: 5px 10px 5px 8px;9093  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9094  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9095  border-radius: 999px;9096  font-family: var(--peach-mono, ui-monospace, monospace);9097  font-size: 11px;9098  letter-spacing: 0.04em;9099  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9100}9101.peach-chirp-chip-dot {9102  width: 6px; height: 6px; border-radius: 50%;9103  background: var(--peach-accent);9104  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9105}9106.peach-chirp-chip[data-phase="paired"] {9107  background: color-mix(in srgb, #4f9eda 12%, transparent);9108  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9109  color: #76b6e8;9110}9111.peach-chirp-chip[data-phase="paired"] .peach-chirp-chip-dot {9112  background: #76b6e8;9113  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9114}9115.peach-chirp-chip[data-phase="timeout"],9116.peach-chirp-chip[data-phase="mic_denied"],9117.peach-chirp-chip[data-phase="version_mismatch"],9118.peach-chirp-chip[data-phase="handshake_failed"] {9119  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9120  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9121  color: var(--peach-warn, #d29257);9122}9123.peach-chirp-chip[data-phase="timeout"] .peach-chirp-chip-dot,9124.peach-chirp-chip[data-phase="mic_denied"] .peach-chirp-chip-dot,9125.peach-chirp-chip[data-phase="version_mismatch"] .peach-chirp-chip-dot,9126.peach-chirp-chip[data-phase="handshake_failed"] .peach-chirp-chip-dot {9127  background: var(--peach-warn, #d29257);9128  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9129}91309131/* Bird stage ----------------------------------------------------------- */9132.peach-chirp-stage {9133  position: relative;9134  margin: 14px 0 8px;9135  height: 180px;9136  border-radius: 12px;9137  background:9138    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9139    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),9140    color-mix(in srgb, var(--peach-bg) 92%, #000);9141  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);9142  overflow: hidden;9143  isolation: isolate;9144}9145.peach-chirp-stage::after {9146  content: '';9147  position: absolute;9148  left: 12%; right: 12%;9149  bottom: 36px;9150  height: 1px;9151  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9152}91539154.peach-chirp-bird-slot {9155  position: absolute;9156  bottom: 8px;9157  width: 100px;9158  height: 110px;9159  display: flex;9160  align-items: flex-end;9161  justify-content: center;9162}9163.peach-chirp-bird-slot-desktop { left: 28px; }9164.peach-chirp-bird-slot-mobile { right: 28px; }91659166/* Mobile bird hops in from the right when handshake begins */9167.peach-chirp-bird-slot-mobile {9168  opacity: 1;9169  transform: translateX(-6px);9170  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9171}9172.peach-chirp-stage.act-listening .peach-chirp-bird-slot-mobile,9173.peach-chirp-stage.act-chirping .peach-chirp-bird-slot-mobile,9174.peach-chirp-stage.act-idle .peach-chirp-bird-slot-mobile {9175  opacity: 0;9176  transform: translateX(60px) rotate(8deg);9177}9178.peach-chirp-stage.act-handshake .peach-chirp-bird-slot-desktop,9179.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop {9180  transform: translateX(6px);9181  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9182}91839184/* Paired: both birds bob together */9185.peach-chirp-stage.act-paired .peach-chirp-bird-slot {9186  animation: peach-chirp-happy-bob 1.2s ease-in-out infinite;9187}9188.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { animation-delay: 0.2s; }9189.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop { --bb-x: 6px; }9190.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { --bb-x: -6px; }9191@keyframes peach-chirp-happy-bob {9192  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9193  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9194}91959196/* Bird internal -------------------------------------------------------- */9197.peach-chirp-bird {9198  width: 108px;9199  height: 108px;9200  transform-origin: 50% 95%;9201}9202.peach-chirp-bird svg { width: 100%; height: 100%; overflow: visible; }92039204.peach-chirp-bird-body {9205  transform-origin: 50% 80%;9206  animation: peach-chirp-bird-bob 2.4s ease-in-out infinite;9207}9208@keyframes peach-chirp-bird-bob {9209  0%, 100% { transform: translateY(0) scale(1, 1); }9210  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9211}92129213.peach-chirp-bird-eye-group {9214  animation: peach-chirp-blink 5.2s steps(1, end) infinite;9215  transform-origin: center;9216  transform-box: fill-box;9217}9218@keyframes peach-chirp-blink {9219  0%, 92%, 96%, 100% { transform: scaleY(1); }9220  94%                { transform: scaleY(0.05); }9221}92229223/* Pose: chirping — beak opens, head bobs, aura blooms */9224.peach-chirp-bird-pose-chirping .peach-chirp-bird-body {9225  animation:9226    peach-chirp-bird-bob 2.4s ease-in-out infinite,9227    peach-chirp-squeeze 1.7s ease-in-out infinite;9228}9229@keyframes peach-chirp-squeeze {9230  0%, 70%, 100% { transform-origin: 50% 85%; }9231  78%           { transform: scale(1.04, 0.96) translateY(1px); }9232  86%           { transform: scale(0.98, 1.02); }9233}9234.peach-chirp-bird-pose-chirping .peach-chirp-bird-head-group {9235  animation: peach-chirp-head-bob 1.7s ease-in-out infinite;9236}9237@keyframes peach-chirp-head-bob {9238  0%, 70%, 100% { transform: translateY(0) rotate(0); }9239  78%           { transform: translateY(-3px) rotate(-4deg); }9240  86%           { transform: translateY(-1px) rotate(-2deg); }9241}9242.peach-chirp-bird-pose-chirping .peach-chirp-bird-beak {9243  animation: peach-chirp-beak-open 1.7s ease-in-out infinite;9244}9245@keyframes peach-chirp-beak-open {9246  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9247  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9248  86%           { transform: rotate(-6deg); }9249}9250.peach-chirp-bird-pose-chirping .peach-chirp-bird-aura {9251  animation: peach-chirp-aura 1.7s ease-in-out infinite;9252}9253@keyframes peach-chirp-aura {9254  0%, 100% { opacity: 0; }9255  50%      { opacity: 0.8; }9256}9257.peach-chirp-bird-pose-chirping .peach-chirp-bird-tail {9258  animation: peach-chirp-tail-twitch 1.7s ease-in-out infinite;9259  transform-origin: 100% 50%;9260}9261@keyframes peach-chirp-tail-twitch {9262  0%, 75%, 100% { transform: rotate(0); }9263  82%           { transform: rotate(-3deg) translateX(-1px); }9264}92659266/* Pose: attentive — head tilts toward partner */9267.peach-chirp-bird-pose-attentive .peach-chirp-bird-head-group {9268  animation: peach-chirp-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9269}9270@keyframes peach-chirp-head-tilt {9271  0%   { transform: rotate(0) translateY(0); }9272  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9273  100% { transform: rotate(-6deg); }9274}9275.peach-chirp-bird-pose-attentive .peach-chirp-bird-tail {9276  animation: peach-chirp-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9277  transform-origin: 100% 50%;9278}9279@keyframes peach-chirp-tail-cock {9280  0%   { transform: rotate(0); }9281  100% { transform: rotate(-4deg); }9282}92839284/* Pose: happy — wing flutter, tuft perk, tail wag */9285.peach-chirp-bird-pose-happy .peach-chirp-bird-wing {9286  transform-origin: 80% 60%;9287  animation: peach-chirp-wing-flutter 0.32s ease-in-out 5;9288}9289@keyframes peach-chirp-wing-flutter {9290  0%, 100% { transform: rotate(0) translateY(0); }9291  50%      { transform: rotate(-16deg) translateY(-2px); }9292}9293.peach-chirp-bird-pose-happy .peach-chirp-bird-tuft {9294  transform-origin: 0% 100%;9295  animation: peach-chirp-tuft-perk 0.4s ease-in-out 3;9296}9297@keyframes peach-chirp-tuft-perk {9298  0%, 100% { transform: rotate(0); }9299  50%      { transform: rotate(-15deg) translateY(-1px); }9300}9301.peach-chirp-bird-pose-happy .peach-chirp-bird-tail {9302  transform-origin: 100% 50%;9303  animation: peach-chirp-tail-wag 0.5s ease-in-out 4;9304}9305@keyframes peach-chirp-tail-wag {9306  0%, 100% { transform: rotate(0); }9307  25%      { transform: rotate(6deg); }9308  75%      { transform: rotate(-6deg); }9309}9310.peach-chirp-bird-pose-happy .peach-chirp-bird-head-group {9311  animation: peach-chirp-head-perk 0.5s ease-out;9312}9313@keyframes peach-chirp-head-perk {9314  0%   { transform: translateY(0); }9315  40%  { transform: translateY(-3px) rotate(2deg); }9316  100% { transform: translateY(0); }9317}93189319/* Pose: sad — body droops forward */9320.peach-chirp-bird-pose-sad .peach-chirp-bird-body {9321  transform: translateY(5px) rotate(-2deg);9322  animation: none;9323}9324.peach-chirp-bird-pose-sad .peach-chirp-bird-head-group {9325  transform: translateY(4px) rotate(8deg);9326}9327.peach-chirp-bird-pose-sad .peach-chirp-bird-tuft { transform: rotate(15deg) translateY(2px); }9328.peach-chirp-bird-pose-sad .peach-chirp-bird-tail { transform: rotate(8deg) translateY(2px); }93299330.peach-chirp-bird-pose-hidden { opacity: 0; }93319332/* Chirp arcs ----------------------------------------------------------- */9333.peach-chirp-arcs {9334  position: absolute;9335  top: 18px;9336  width: 96px;9337  height: 70px;9338  pointer-events: none;9339}9340.peach-chirp-arcs-right { right: -60px; }9341.peach-chirp-arcs-left  { left: -60px; transform: scaleX(-1); }9342.peach-chirp-arc {9343  position: absolute;9344  top: 50%;9345  left: 0;9346  width: 40px;9347  height: 40px;9348  margin-top: -20px;9349  border: 1.2px solid #f4d5a8;9350  border-color: transparent #f4d5a8 transparent transparent;9351  border-radius: 50%;9352  opacity: 0;9353  animation: peach-chirp-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9354}9355@keyframes peach-chirp-arc-expand {9356  0%   { transform: scale(0.4); opacity: 0; }9357  20%  { opacity: 0.9; }9358  100% { transform: scale(1.6); opacity: 0; }9359}93609361/* Flight wave ---------------------------------------------------------- */9362.peach-chirp-flight-track {9363  position: absolute;9364  inset: 32px 36px 38px 36px;9365  pointer-events: none;9366}9367.peach-chirp-flight-wave {9368  position: absolute;9369  top: 8px;9370  left: 76px;9371  right: 76px;9372  height: 60px;9373  width: auto;9374  opacity: 0;9375  transition: opacity 0.15s ease;9376  stroke: #f4d5a8;9377  fill: none;9378}9379.peach-chirp-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9380.peach-chirp-flight-wave.is-visible { opacity: 1; }9381.peach-chirp-flight-path,9382.peach-chirp-flight-path-2 {9383  stroke-dasharray: 240;9384  stroke-dashoffset: 240;9385  stroke-linecap: round;9386  fill: none;9387}9388.peach-chirp-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9389.peach-chirp-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9390.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path {9391  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9392}9393.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path-2 {9394  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9395}9396@keyframes peach-chirp-fly {9397  0%   { stroke-dashoffset: 240; opacity: 0; }9398  20%  { opacity: 1; }9399  100% { stroke-dashoffset: -120; opacity: 0; }9400}94019402/* Connection dot ------------------------------------------------------- */9403.peach-chirp-dot {9404  position: absolute;9405  top: 50%; left: 50%;9406  transform: translate(-50%, -50%);9407  width: 40px; height: 40px;9408  opacity: 0;9409  pointer-events: none;9410  transition: opacity 0.3s ease;9411  color: var(--peach-accent);9412}9413.peach-chirp-dot.is-visible { opacity: 1; }9414.peach-chirp-dot-glow {9415  position: absolute; top: 50%; left: 50%;9416  transform: translate(-50%, -50%);9417  width: 38px; height: 38px;9418  border-radius: 50%;9419  filter: blur(10px);9420  opacity: 0.55;9421  background: var(--peach-accent);9422  animation: peach-chirp-dot-bloom 1.4s ease-out;9423}9424.peach-chirp-dot-core {9425  position: absolute; top: 50%; left: 50%;9426  transform: translate(-50%, -50%);9427  width: 8px; height: 8px;9428  border-radius: 50%;9429  background: var(--peach-accent);9430  box-shadow: 0 0 12px currentColor;9431  animation: peach-chirp-dot-core 1.4s ease-out;9432}9433.peach-chirp-dot-ring {9434  position: absolute; top: 50%; left: 50%;9435  width: 60px; height: 60px;9436  transform: translate(-50%, -50%);9437  animation: peach-chirp-dot-ring 1.4s linear;9438  stroke: var(--peach-accent);9439}9440@keyframes peach-chirp-dot-bloom {9441  0%   { width: 4px; height: 4px; opacity: 0; }9442  35%  { width: 60px; height: 60px; opacity: 0.7; }9443  100% { width: 38px; height: 38px; opacity: 0.55; }9444}9445@keyframes peach-chirp-dot-core {9446  0%   { width: 0; height: 0; }9447  35%  { width: 12px; height: 12px; }9448  100% { width: 8px; height: 8px; }9449}9450@keyframes peach-chirp-dot-ring {9451  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9452  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9453  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9454}94559456/* Motes — drift upward across the stage */9457.peach-chirp-motes {9458  position: absolute;9459  inset: 0;9460  pointer-events: none;9461}9462.peach-chirp-mote {9463  position: absolute;9464  width: 2px; height: 2px;9465  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9466  border-radius: 50%;9467  bottom: 32px;9468  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9469  opacity: 0;9470  animation: peach-chirp-mote-drift 6s linear infinite;9471  animation-delay: calc(var(--mote-i, 0) * 0.7s);9472}9473@keyframes peach-chirp-mote-drift {9474  0%   { transform: translateY(0); opacity: 0; }9475  10%  { opacity: 0.6; }9476  90%  { opacity: 0.1; }9477  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9478}94799480/* Status copy ---------------------------------------------------------- */9481.peach-chirp-copy-host {9482  margin: 4px 4px 10px;9483  text-align: center;9484  min-height: 50px;9485}9486.peach-chirp-copy {9487  animation: peach-chirp-copy-in 0.35s ease both;9488}9489@keyframes peach-chirp-copy-in {9490  from { opacity: 0; transform: translateY(4px); }9491  to   { opacity: 1; transform: translateY(0); }9492}9493.peach-chirp-headline {9494  font-family: var(--font-display, Georgia, serif);9495  font-style: italic;9496  font-size: 20px;9497  font-weight: 500;9498  line-height: 1.2;9499  letter-spacing: 0.005em;9500  color: var(--peach-t0);9501  margin-bottom: 6px;9502}9503.peach-chirp-copy-listening .peach-chirp-headline,9504.peach-chirp-copy-chirping .peach-chirp-headline,9505.peach-chirp-copy-idle .peach-chirp-headline {9506  font-family: inherit;9507  font-style: normal;9508  font-weight: 500;9509  font-size: 15px;9510  color: var(--peach-t0);9511  letter-spacing: 0;9512}9513.peach-chirp-copy-paired .peach-chirp-headline {9514  color: var(--peach-t0);9515  font-weight: 600;9516}9517.peach-chirp-sub {9518  font-size: 12.5px;9519  line-height: 1.45;9520  color: var(--peach-t1);9521  max-width: 280px;9522  margin: 0 auto;9523  text-wrap: pretty;9524}95259526/* Status action -------------------------------------------------------- */9527.peach-chirp-action {9528  margin: 2px 4px 10px;9529  margin-top: auto;9530  display: flex;9531  flex-direction: column;9532  gap: 8px;9533}9534.peach-chirp-mic-notice {9535  margin: 0;9536  font-size: 0.625rem;9537  color: var(--peach-t2);9538  line-height: 1.4;9539}9540.peach-chirp-action-waiting {9541  display: flex;9542  align-items: center;9543  justify-content: space-between;9544  gap: 12px;9545}9546.peach-chirp-cancel {9547  min-width: 96px;9548}9549.peach-chirp-listening {9550  display: inline-flex; align-items: center; gap: 4px;9551  font-family: var(--peach-mono, ui-monospace, monospace);9552  font-size: 9.5px;9553  text-transform: uppercase;9554  letter-spacing: 0.12em;9555  color: var(--peach-t1);9556  padding: 8px 10px;9557}9558.peach-chirp-listen-dot {9559  width: 4px; height: 4px;9560  border-radius: 50%;9561  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9562  animation: peach-chirp-listen-pulse 1.2s ease-in-out infinite;9563}9564.peach-chirp-listen-dot:nth-child(2) { animation-delay: 0.2s; }9565.peach-chirp-listen-dot:nth-child(3) { animation-delay: 0.4s; }9566.peach-chirp-listen-label { margin-left: 6px; }9567@keyframes peach-chirp-listen-pulse {9568  0%, 100% { opacity: 0.25; transform: scale(0.9); }9569  50%      { opacity: 1;     transform: scale(1.15); }9570}95719572.peach-chirp-action-handshake {9573  display: flex;9574  flex-direction: column;9575  align-items: center;9576  gap: 8px;9577  padding: 8px 4px;9578}9579.peach-chirp-meter {9580  width: 100%;9581  max-width: 280px;9582  height: 2px;9583  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9584  border-radius: 2px;9585  position: relative;9586  overflow: hidden;9587}9588.peach-chirp-meter-bar {9589  position: absolute;9590  top: 0; bottom: 0;9591  width: 30%;9592  left: -30%;9593  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9594  animation: peach-chirp-meter-sweep 1.4s ease-in-out infinite;9595}9596@keyframes peach-chirp-meter-sweep {9597  0%   { left: -30%; }9598  100% { left: 100%; }9599}9600.peach-chirp-meter-label {9601  font-family: var(--peach-mono, ui-monospace, monospace);9602  font-size: 9.5px;9603  text-transform: uppercase;9604  letter-spacing: 0.14em;9605  color: var(--peach-t1);9606}96079608.peach-chirp-action-paired {9609  display: flex;9610  align-items: center;9611  gap: 10px;9612}9613.peach-chirp-device-confirm {9614  flex: 1;9615  display: inline-flex;9616  align-items: center;9617  gap: 8px;9618  padding: 9px 10px 9px 12px;9619  border-radius: 10px;9620  background: color-mix(in srgb, #76b6e8 12%, transparent);9621  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9622  font-size: 12.5px;9623  color: var(--peach-t0);9624  min-width: 0;9625}9626.peach-chirp-device-confirm-glyph {9627  display: inline-flex;9628  color: #76b6e8;9629}9630.peach-chirp-device-confirm-name {9631  flex: 1;9632  overflow: hidden;9633  text-overflow: ellipsis;9634  white-space: nowrap;9635}9636.peach-chirp-device-confirm-trust {9637  font-family: var(--peach-mono, ui-monospace, monospace);9638  font-size: 9.5px;9639  text-transform: uppercase;9640  letter-spacing: 0.1em;9641  color: #76b6e8;9642  padding: 2px 6px;9643  border-radius: 4px;9644  background: color-mix(in srgb, #76b6e8 14%, transparent);9645}9646.peach-chirp-done {9647  min-width: 80px;9648}9649.peach-chirp-retry {9650  align-self: center;9651  display: block;9652  margin: 6px auto 0;9653  min-width: 120px;9654}9655.peach-chirp-mic-help {9656  font-size: 12px;9657  color: var(--peach-t1);9658  text-align: center;9659  max-width: 320px;9660  margin: 0 auto;9661}96629663/* Rest state — bird stage at idle pose, primary CTA + paired list */9664.peach-chirp-pair[data-phase="idle"] .peach-chirp-stage {9665  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9666  height: 160px;9667}9668.peach-chirp-pair-start {9669  width: 100%;9670  display: inline-flex;9671  align-items: center;9672  justify-content: center;9673  gap: 8px;9674  padding: 11px 14px;9675  border-radius: 10px;9676  background: var(--peach-accent);9677  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9678  color: #1a0905;9679  font-family: inherit;9680  font-size: 13px;9681  font-weight: 600;9682  letter-spacing: 0.01em;9683  cursor: pointer;9684  transition: filter 0.15s ease, transform 0.1s ease;9685}9686.peach-chirp-pair-start:hover { filter: brightness(1.08); }9687.peach-chirp-pair-start:active { transform: translateY(1px); }96889689.peach-chirp-paired-section {9690  margin-top: 14px;9691  display: flex;9692  flex-direction: column;9693  gap: 8px;9694}9695.peach-chirp-paired-heading {9696  margin: 0;9697  font-family: var(--peach-mono, ui-monospace, monospace);9698  font-size: 10px;9699  font-weight: 500;9700  letter-spacing: 0.14em;9701  text-transform: uppercase;9702  color: var(--peach-t1);9703}97049705/* Footer --------------------------------------------------------------- */9706.peach-chirp-foot {9707  margin: 10px -4px -2px;9708  margin-top: auto;9709}9710.peach-chirp-foot-divider {9711  height: 1px;9712  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9713  margin-bottom: 10px;9714}9715.peach-chirp-foot-text {9716  font-size: 11px;9717  line-height: 1.5;9718  color: var(--peach-t1);9719  text-align: center;9720  padding: 0 4px;9721  text-wrap: pretty;9722}97239724/* Screen-reader-only live region. Kept off the visual flow but read by9725   assistive tech as the pairing phase advances. */9726.peach-sr-only {9727  position: absolute;9728  width: 1px; height: 1px;9729  padding: 0; margin: -1px;9730  overflow: hidden;9731  clip: rect(0, 0, 0, 0);9732  white-space: nowrap;9733  border: 0;9734}97359736/* Reduced motion — stage simplifies to opacity transitions only */9737@media (prefers-reduced-motion: reduce) {9738  .peach-chirp-bird-body,9739  .peach-chirp-bird-head-group,9740  .peach-chirp-bird-beak,9741  .peach-chirp-bird-wing,9742  .peach-chirp-bird-tuft,9743  .peach-chirp-bird-tail,9744  .peach-chirp-bird-eye-group,9745  .peach-chirp-bird-aura,9746  .peach-chirp-arc,9747  .peach-chirp-flight-path,9748  .peach-chirp-flight-path-2,9749  .peach-chirp-dot-glow,9750  .peach-chirp-dot-core,9751  .peach-chirp-dot-ring,9752  .peach-chirp-mote,9753  .peach-chirp-meter-bar,9754  .peach-chirp-listen-dot,9755  .peach-chirp-bird-slot,9756  .peach-chirp-bird-slot-mobile {9757    animation: none !important;9758    transition: opacity 0.2s linear !important;9759  }9760}97619762/* ─────────────────────────────────────────────────────────────────9763   Settings → Sync surface (v3 ChirpSync). Wraps the same bird9764   animation used by the pairing flow with a paired-devices list and9765   the "Pair a device" CTA.9766   ───────────────────────────────────────────────────────────────── */9767.peach-chirp-settings {9768  position: absolute;9769  inset: 0;9770  z-index: 3;9771  display: flex;9772  flex-direction: column;9773  gap: 18px;9774  padding: 14px 12px 12px;9775  width: 100%;9776  box-sizing: border-box;9777  overflow-y: auto;9778  overflow-x: hidden;9779  /* Same warm Chirp surface as the pairing screen — unifies the two views. */9780  background:9781    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9782    var(--peach-bg);9783  color: var(--peach-t0);9784  isolation: isolate;9785  /* Hide native scrollbar — content fits 99% of the time and a chunky9786     gutter ruins the surface. */9787  scrollbar-width: none;9788  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9789}9790.peach-chirp-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9791.peach-chirp-settings::before {9792  content: '';9793  position: absolute;9794  inset: 0;9795  pointer-events: none;9796  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9797  z-index: 0;9798}9799.peach-chirp-settings > * { position: relative; z-index: 1; }98009801.peach-chirp-settings--pairing {9802  padding: 0;9803  align-items: stretch;9804  justify-content: stretch;9805  background: none;9806  isolation: auto;9807}9808.peach-chirp-settings--pairing::before { display: none; }98099810.peach-chirp-settings-header {9811  display: flex;9812  align-items: center;9813  gap: 10px;9814}9815.peach-chirp-settings-title {9816  margin: 0;9817  font-family: var(--font-display, Georgia, serif);9818  font-style: italic;9819  font-size: 24px;9820  font-weight: 500;9821  line-height: 1;9822  color: var(--peach-t0);9823  letter-spacing: 0.005em;9824}9825.peach-chirp-settings-section {9826  margin: 6px 0 -4px;9827  font-size: 11px;9828  font-weight: 600;9829  letter-spacing: 0.08em;9830  text-transform: uppercase;9831  color: var(--peach-text-muted);9832}9833.peach-chirp-settings-error {9834  font-size: 12px;9835  padding: 8px 10px;9836  border-radius: 8px;9837  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);9838  color: var(--peach-text);9839}9840.peach-chirp-settings-footer {9841  margin-top: auto;9842  padding-top: 18px;9843  font-size: 11.5px;9844  line-height: 1.5;9845  color: var(--peach-text-muted);9846  text-align: center;9847}98489849/* Hero card shown when no devices are paired yet. */9850.peach-chirp-hero {9851  display: flex;9852  flex-direction: column;9853  align-items: center;9854  gap: 12px;9855  padding: 20px 12px 8px;9856  text-align: center;9857}9858.peach-chirp-hero-svg {9859  display: block;9860  max-width: 100%;9861  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));9862}9863.peach-chirp-hero-headline {9864  margin: 0;9865  font-family: var(--font-display, Georgia, serif);9866  font-style: italic;9867  font-size: 20px;9868  font-weight: 500;9869  line-height: 1.2;9870  letter-spacing: 0.005em;9871  color: var(--peach-t0);9872}9873.peach-chirp-hero-sub {9874  margin: 0;9875  font-size: 13px;9876  line-height: 1.5;9877  color: var(--peach-t1);9878  max-width: 320px;9879  text-wrap: pretty;9880}98819882.peach-chirp-pair-cta {9883  display: flex;9884  justify-content: center;9885  padding: 4px 0 6px;9886}9887.peach-chirp-pair-button {9888  display: inline-flex;9889  align-items: center;9890  gap: 8px;9891  min-width: 220px;9892  justify-content: center;9893}9894.peach-chirp-pair-button-icon {9895  flex: 0 0 auto;9896}98979898/* Paired devices list. Roomy rows that look at home next to the rest9899   of Settings; stale rows get a soft warm-warning border tint. */9900.peach-chirp-device-list {9901  list-style: none;9902  margin: 0;9903  padding: 0;9904  display: flex;9905  flex-direction: column;9906  gap: 8px;9907}9908.peach-chirp-device-row {9909  display: flex;9910  align-items: center;9911  gap: 12px;9912  padding: 12px;9913  border-radius: 10px;9914  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9915  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);9916}9917.peach-chirp-device-row[data-stale="true"] {9918  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);9919}9920.peach-chirp-device-icon {9921  width: 32px;9922  height: 32px;9923  display: flex;9924  align-items: center;9925  justify-content: center;9926  border-radius: 8px;9927  color: var(--peach-text);9928  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);9929}9930.peach-chirp-device-info {9931  flex: 1;9932  display: flex;9933  flex-direction: column;9934  gap: 2px;9935  min-width: 0;9936}9937.peach-chirp-device-name {9938  font-size: 14px;9939  font-weight: 600;9940  color: var(--peach-text);9941  overflow: hidden;9942  text-overflow: ellipsis;9943  white-space: nowrap;9944}9945.peach-chirp-device-meta {9946  font-size: 11.5px;9947  color: var(--peach-text-muted);9948  display: flex;9949  flex-wrap: wrap;9950  align-items: center;9951  gap: 8px;9952}9953.peach-chirp-device-badge {9954  font-size: 10.5px;9955  font-weight: 500;9956  letter-spacing: 0.02em;9957  padding: 2px 6px;9958  border-radius: 999px;9959  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);9960  color: var(--peach-text);9961}9962.peach-chirp-device-stale {9963  font-size: 10.5px;9964  font-weight: 500;9965  color: var(--peach-warn, #d29257);9966}9967.peach-chirp-device-remove {9968  flex: 0 0 auto;9969  color: var(--peach-text-muted);9970}9971.peach-chirp-device-remove:hover {9972  color: var(--peach-danger, #c25b4a);9973}9974.peach-chirp-unpair-confirm {9975  display: flex;9976  gap: 6px;9977  align-items: center;9978}99799980/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */9981.peach-chirp-pro-card {9982  position: relative;9983  margin: 18px 12px;9984  padding: 18px 20px 22px;9985  border-radius: 22px;9986  background:9987    radial-gradient(140% 90% at 50% 0%,9988      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,9989      transparent 60%),9990    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9991  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);9992  box-shadow:9993    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,9994    0 18px 40px -24px rgba(0, 0, 0, 0.45);9995  display: flex;9996  flex-direction: column;9997  align-items: center;9998  gap: 10px;9999  text-align: center;10000  overflow: hidden;10001}10002.peach-chirp-pro-stage {10003  position: relative;10004  width: 220px;10005  height: 140px;10006  display: flex;10007  align-items: flex-end;10008  justify-content: center;10009  margin-bottom: 2px;10010}10011.peach-chirp-pro-bird-slot {10012  width: 140px;10013  height: 132px;10014  display: flex;10015  align-items: flex-end;10016  justify-content: center;10017  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));10018}10019.peach-chirp-pro-bird-slot .peach-chirp-bird {10020  width: 100%;10021  height: 100%;10022}10023.peach-chirp-pro-bird-slot .peach-chirp-bird svg {10024  width: 100%;10025  height: 100%;10026  overflow: visible;10027}10028.peach-chirp-pro-chirp {10029  position: absolute;10030  top: 14px;10031  right: 8px;10032  width: 96px;10033  height: 80px;10034  color: var(--peach-accent);10035  animation: peach-chirp-pulse 2.6s ease-in-out infinite;10036  transform-origin: 0% 50%;10037  pointer-events: none;10038}10039@keyframes peach-chirp-pulse {10040  0%, 100% { opacity: 0.35; transform: translateX(0) scale(0.92); }10041  45%      { opacity: 1;    transform: translateX(2px) scale(1); }10042  70%      { opacity: 0.6;  transform: translateX(4px) scale(1.04); }10043}10044@media (prefers-reduced-motion: reduce) {10045  .peach-chirp-pro-chirp { animation: none; opacity: 0.7; }10046}10047.peach-chirp-pro-headline {10048  margin: 4px 0 0;10049  font-family: var(--font-display, "Cormorant Garamond", serif);10050  font-style: italic;10051  font-size: 19px;10052  font-weight: 500;10053  letter-spacing: 0.01em;10054  color: var(--peach-t0);10055  max-width: 280px;10056  line-height: 1.25;10057}10058.peach-chirp-pro-body {10059  margin: 0;10060  font-size: 13px;10061  line-height: 1.55;10062  color: var(--peach-t1);10063  max-width: 300px;10064}10065.peach-chirp-pro-cta {10066  margin-top: 4px;10067}10068.peach-chirp-pro-foot {10069  margin: 2px 0 0;10070  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10071  font-size: 0.625rem;10072  letter-spacing: 0.08em;10073  text-transform: uppercase;10074  color: var(--peach-t2);10075  opacity: 0.75;10076}1007710078/* Shell border and shadow in light mode: match dark mode's near-invisible10079   border weight so the popup frame looks the same in both themes. */10080.light .peach-shell,10081.light .peach-screen {10082  border-color: rgba(26, 18, 8, 0.07);10083  box-shadow:10084    0 2px 8px rgba(80, 56, 32, 0.08),10085    0 14px 48px rgba(80, 56, 32, 0.10),10086    0 0 0 1px rgba(26, 18, 8, 0.04);10087}