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/* The pair-device surface owns its own header and header — fully collapse the global198   chrome row so the warm gradient reaches the popup edge. */199.peach-chrome.is-collapsed,200.peach-search-wrap.is-collapsed {201  display: none;202}203.peach-wordmark-wrap { display: flex; align-items: center; gap: 5px; }204.peach-status-pip {205  width: 5px;206  height: 5px;207  border-radius: 50%;208  background: var(--peach-t3);209  display: inline-flex;210  flex-shrink: 0;211  transition: background 400ms ease, box-shadow 400ms ease;212}213.peach-chrome-actions { display: flex; gap: 6px; }214215/* Shell body */216.peach-shell-body {217  position: relative;218  display: grid;219  grid-template-rows: 1fr auto;220  min-height: 0;221  min-width: 0;222  width: 100%;223  overflow: hidden;224  height: 100%;225}226.peach-shell-veil {227  position: absolute; inset: 0;228  background: #000; opacity: 0;229  pointer-events: none; z-index: 1;230}231.peach-shell[data-motion-phase="enter"] .peach-shell-body {232  animation: peach-shell-fade-in var(--peach-dur-600) var(--peach-curve-arrival) both;233}234.peach-shell[data-motion-phase="exit"] .peach-shell-veil {235  animation: peach-veil-in 300ms var(--peach-curve-departure) forwards;236}237238/* Content frame */239.peach-content-frame {240  display: grid;241  grid-template-rows: 1fr auto;242  grid-template-columns: minmax(0, 1fr);243  align-content: start;244  min-height: 0;245  min-width: 0;246  overflow: hidden;247  transition: opacity 80ms ease, transform 80ms ease;248}249.peach-content-frame.navigating {250  opacity: 0.93;251  transform: translateX(2px);252}253.peach-content-frame[data-content-phase="enter"] {254  animation: peach-content-enter 135ms ease-out both;255}256.peach-content-frame[data-content-phase="exit"] {257  animation: peach-content-exit 95ms ease-in forwards;258}259.peach-content-frame[data-content-phase="idle"] { opacity: 1; transform: none; }260261/* Stage */262.peach-stage {263  padding: 10px 20px 12px;264  display: grid;265  gap: 12px;266  align-content: start;267  min-width: 0;268  min-height: 0;269  max-width: 100%;270  overflow-y: auto;271  overflow-x: hidden;272  scrollbar-width: none;273  -ms-overflow-style: none;274  overscroll-behavior: contain;275}276.peach-stage::-webkit-scrollbar { display: none; }277278/* Entry name */279.peach-entry-name-wrap { position: relative; overflow: hidden; max-width: 100%; }280.peach-entry-header {281  position: relative;282  z-index: 1;283  display: flex;284  align-items: flex-start;285  gap: 6px;286  min-width: 0;287}288.peach-entry-header-name {289  flex: 1;290  min-width: 0;291}292.peach-entry-name {293  margin: 0;294  padding-bottom: 0.12em;295  font-family: var(--font-display);296  font-style: italic; font-weight: 400;297  font-size: 44px; line-height: 0.95;298  color: var(--peach-t0);299  display: -webkit-box;300  -webkit-line-clamp: 2;301  -webkit-box-orient: vertical;302  overflow: hidden;303  text-wrap: balance;304}305.peach-entry-name--lg { font-size: 40px; }306.peach-entry-name--xl { font-size: 34px; line-height: 0.98; }307.peach-entry-name--xxl { font-size: 30px; line-height: 1.02; }308.peach-entry-name-text { display: block; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; padding-bottom: 0.12em; }309310/* Trash icon in entry header */311.peach-entry-trash-btn {312  flex-shrink: 0;313  padding: 4px;314  margin-top: 4px;315  background: transparent;316  border: none;317  cursor: pointer;318  color: var(--peach-t2);319  border-radius: 4px;320  transition: color 140ms ease, background 140ms ease;321  display: flex;322  align-items: center;323  justify-content: center;324}325.peach-entry-trash-btn:hover {326  color: var(--peach-t1);327  background: var(--peach-t3);328}329.peach-entry-trash-confirm {330  display: flex;331  align-items: center;332  gap: 6px;333  flex-shrink: 0;334  margin-top: 6px;335  flex-wrap: nowrap;336}337.peach-entry-trash-confirm-label {338  font-family: var(--font-mono);339  font-size: 0.5625rem;340  letter-spacing: 0.1em;341  color: var(--peach-t2);342  white-space: nowrap;343}344.peach-entry-name-button {345  padding: 0;346  background: transparent;347  text-align: left;348  cursor: pointer;349  max-width: 100%;350  overflow: hidden;351  display: block;352}353.peach-entry-name-char {354  display: inline-block;355  white-space: pre;356  opacity: 0;357  transform: translateY(0.22em);358  animation: peach-char-enter 380ms var(--peach-curve-arrival) forwards;359  animation-delay: calc(var(--char-index, 0) * 20ms);360}361362/* Domain */363.peach-domain { border-top: 1px solid var(--peach-t3); padding-top: 9px; }364.peach-domain-row {365  width: 100%; border: 0; background: transparent; color: inherit;366  padding: 0; display: flex; justify-content: space-between; align-items: baseline;367  cursor: default;368}369.peach-domain-value {370  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;371  font-size: 0.625rem; font-style: italic;372  letter-spacing: 0.12em; color: var(--peach-t1);373}374375/* Fields */376.peach-fields { display: grid; gap: 10px; }377.peach-field-card { display: grid; gap: 7px; }378.peach-label {379  font-family: Inter, system-ui, sans-serif;380  text-transform: uppercase; letter-spacing: 0.2em;381  font-size: 0.5rem; color: var(--peach-t2);382}383.peach-add-field-btn {384  align-self: flex-start;385  background: none; border: none; padding: 2px 0;386  font-family: Inter, system-ui, sans-serif;387  font-size: 0.6875rem; color: var(--peach-accent);388  cursor: pointer; opacity: 0.75;389  letter-spacing: 0.02em;390}391.peach-add-field-btn:hover { opacity: 1; }392.peach-field-value-row {393  display: flex; justify-content: space-between;394  align-items: center; gap: 8px;395  min-width: 0;396}397.peach-field-value {398  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;399  font-size: 0.8125rem; color: var(--peach-t1);400  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;401  flex: 1;402  min-width: 0;403}404.peach-password-value {405  display: inline-flex;406  align-items: center;407  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;408  font-size: 1rem; letter-spacing: 0.3em; color: var(--peach-t0);409  overflow: hidden;410  text-overflow: ellipsis;411  white-space: nowrap;412  flex: 1;413  min-width: 0;414  max-width: 100%;415}416.peach-password-value.is-revealed {417  font-size: 0.875rem;418  letter-spacing: 0.08em;419}420.peach-password-text,421.peach-password-mask {422  display: block;423  width: 100%;424  overflow: hidden;425  white-space: nowrap;426  /* Render as uniform mid-line bullets, not baseline periods */427  font-family: Inter, system-ui, sans-serif;428  font-size: 0.625rem;429  letter-spacing: 3px;430  user-select: none;431}432.peach-field-actions { display: flex; gap: 4px; align-items: center; }433.peach-password-strength { display: flex; align-items: center; gap: 8px; }434.peach-strength-bar { display: flex; gap: 3px; }435.peach-strength-seg { width: 28px; height: 4px; border-radius: 2px; background: #eee; }436.peach-strength-label {437  font-family: "IBM Plex Mono", monospace;438  font-style: italic;439  font-size: 0.5625rem;440  font-weight: 300;441  min-width: 36px;442  text-align: right;443  color: var(--peach-t2);444  letter-spacing: 0.06em;445}446447.peach-strength-hairline {448  display: flex;449  align-items: center;450  gap: 10px;451  margin-top: -2px;452}453454.peach-strength-hairline-track {455  flex: 1;456  height: 3px;457  border-radius: 2px;458  background: var(--peach-s2);459  overflow: hidden;460}461462.peach-strength-hairline-fill {463  height: 100%;464  border-radius: 2px;465  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),466    background 400ms ease;467}468469/* Note content (display) */470.peach-note-content {471  border-top: 1px solid var(--peach-t3);472  padding-top: 10px;473  font-family: var(--font-display);474  font-size: 0.9375rem;475  line-height: 1.75;476  color: var(--peach-t1);477}478479/* ── Inline editing ─────────────────────────────────────────────────── */480481/* Clickable display values */482.peach-inline-clickable {483  cursor: text;484  border-radius: 3px;485  transition: background 150ms ease;486}487.peach-inline-clickable:hover {488  background: rgba(240, 232, 216, 0.05);489}490491/* Subtle "edit" hint that appears on hover */492.peach-inline-edit-hint {493  font-family: Inter, system-ui, sans-serif;494  font-size: 0.5625rem;495  text-transform: uppercase;496  letter-spacing: 0.14em;497  color: var(--peach-t2);498  opacity: 0;499  transition: opacity 120ms ease;500  pointer-events: none;501  margin-left: 6px;502  flex-shrink: 0;503}504.peach-domain-row:hover .peach-inline-edit-hint {505  opacity: 1;506}507508/* Title editing */509.peach-inline-title-wrap {510  display: flex;511  flex-direction: column;512  gap: 6px;513}514.peach-inline-title-input {515  font-family: var(--font-display);516  font-style: italic;517  font-weight: 400;518  font-size: 40px;519  line-height: 0.95;520  color: var(--peach-t0);521  background: transparent;522  border: none;523  border-bottom: 1px solid var(--peach-accent);524  outline: none;525  width: 100%;526  padding: 2px 0;527}528529/* Generic inline field */530.peach-inline-field-wrap {531  display: flex;532  flex-direction: column;533  gap: 6px;534}535.peach-inline-input {536  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;537  font-size: 0.8125rem;538  color: var(--peach-t0);539  background: transparent;540  border: none;541  border-bottom: 1px solid var(--peach-accent);542  outline: none;543  width: 100%;544  padding: 3px 0;545}546.peach-inline-textarea {547  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;548  font-size: 0.6875rem;549  line-height: 1.7;550  color: var(--peach-t0);551  background: rgba(240, 232, 216, 0.04);552  border: 1px solid var(--peach-accent);553  border-radius: 4px;554  outline: none;555  width: 100%;556  padding: 8px;557  resize: vertical;558  min-height: 80px;559}560561/* Save / cancel row */562.peach-inline-actions {563  display: flex;564  gap: 6px;565  align-items: center;566}567.peach-inline-save-btn,568.peach-inline-cancel-btn {569  display: inline-flex;570  align-items: center;571  justify-content: center;572  width: 26px;573  height: 26px;574  border-radius: 4px;575  border: none;576  cursor: pointer;577  transition: background 140ms ease, opacity 140ms ease;578  flex-shrink: 0;579}580.peach-inline-save-btn {581  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);582  color: var(--peach-accent);583}584.peach-inline-save-btn:hover:not(:disabled) {585  background: color-mix(in srgb, var(--peach-accent) 30%, transparent);586}587.peach-inline-cancel-btn {588  background: rgba(240, 232, 216, 0.06);589  color: var(--peach-t2);590}591.peach-inline-cancel-btn:hover:not(:disabled) {592  background: rgba(240, 232, 216, 0.12);593  color: var(--peach-t1);594}595.peach-inline-save-btn:disabled,596.peach-inline-cancel-btn:disabled {597  opacity: 0.4;598  cursor: not-allowed;599}600601/* Inline password generator wrapper */602.peach-inline-generator-wrap {603  margin-top: 10px;604  padding-top: 10px;605  border-top: 1px solid var(--peach-t3);606  display: flex;607  flex-direction: column;608  gap: 8px;609}610.peach-inline-generator-cancel {611  align-self: flex-start;612  font-size: 0.6875rem;613  color: var(--peach-t2);614}615616/* "is-editing" card state */617.peach-field-card.is-editing {618  background: rgba(240, 232, 216, 0.02);619  border-radius: 6px;620  padding: 8px;621  margin: -8px;622}623624/* Inline tag editor on Entry detail view */625.peach-inline-tag-editor {626  display: flex;627  flex-direction: column;628  gap: 6px;629}630631/* Quiet inline "+ add X" link in the entry detail body */632.peach-entry-add-link {633  justify-self: start;634  margin-top: 8px;635}636637/* Additional URLs editor revealed by clicking the URL field */638.peach-additional-urls {639  display: flex;640  flex-direction: column;641  gap: 6px;642  margin-top: 8px;643}644.peach-additional-urls-label {645  font-size: 0.5625rem;646  letter-spacing: 0.1em;647  text-transform: uppercase;648  color: var(--peach-t2);649  margin-bottom: 2px;650}651/* UI-5 / LV-4: recovery words grid in the view-words reveal. */652.peach-recovery-words-grid {653  display: grid;654  grid-template-columns: 1fr 1fr;655  gap: 4px 10px;656}657.peach-recovery-word {658  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;659  font-size: 11px;660  color: var(--peach-t0);661}662.peach-recovery-word b {663  color: var(--peach-t2);664  font-weight: 400;665  margin-right: 4px;666}667668/* UI-1 / HV-1b: dismissible sync alert banners at the top of the vault view. */669.peach-sync-alerts {670  display: flex;671  flex-direction: column;672  gap: 6px;673  padding: 8px 12px 0;674}675.peach-sync-alert {676  display: flex;677  align-items: center;678  gap: 8px;679  padding: 8px 10px;680  border-radius: 7px;681  background: color-mix(in srgb, #C8A840 14%, transparent);682  border: 1px solid color-mix(in srgb, #C8A840 38%, transparent);683}684.peach-sync-alert-text {685  flex: 1;686  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;687  font-size: 10px;688  line-height: 1.45;689  color: var(--peach-t0);690  overflow: hidden;691  text-overflow: ellipsis;692  white-space: nowrap;693}694.peach-sync-alert-flip {695  flex-shrink: 0;696  background: none;697  border: none;698  color: var(--peach-t2);699  font-size: 14px;700  line-height: 1;701  cursor: pointer;702  padding: 0 2px;703}704.peach-sync-alert-flip:hover { color: var(--peach-t0); }705.peach-sync-alert-count {706  flex-shrink: 0;707  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;708  font-size: 9px;709  color: var(--peach-t2);710  min-width: 24px;711  text-align: center;712}713.peach-sync-alert-dismiss {714  flex-shrink: 0;715  background: none;716  border: none;717  color: var(--peach-t2);718  font-size: 14px;719  line-height: 1;720  cursor: pointer;721  padding: 0 2px;722}723.peach-sync-alert-dismiss:hover { color: var(--peach-t0); }724725/* UI-8 / LV-2: non-blocking homograph warning under the URL editor. */726.peach-homograph-warning {727  margin: 4px 0 2px;728  padding: 6px 8px;729  border-radius: 6px;730  background: color-mix(in srgb, var(--peach-breach) 12%, transparent);731  border: 1px solid color-mix(in srgb, var(--peach-breach) 36%, transparent);732  color: var(--peach-t1);733  font-size: 0.6875rem;734  line-height: 1.4;735}736.peach-additional-url-row {737  display: flex;738  align-items: center;739  gap: 6px;740}741.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }742.peach-additional-url-remove {743  background: transparent;744  border: 1px solid var(--peach-t3);745  color: var(--peach-t2);746  width: 22px;747  height: 22px;748  border-radius: 4px;749  cursor: pointer;750  font-size: 0.875rem;751  line-height: 1;752  display: inline-flex;753  align-items: center;754  justify-content: center;755  flex-shrink: 0;756  transition: color 120ms ease, border-color 120ms ease;757}758.peach-additional-url-remove:hover:not(:disabled) {759  color: var(--peach-accent);760  border-color: var(--peach-border-accent);761}762.peach-additional-urls-add { align-self: flex-start; }763764/* Delete row */765.peach-entry-delete-row {766  display: flex;767  align-items: center;768  gap: 8px;769  padding-top: 18px;770  margin-top: 8px;771  border-top: 1px solid var(--peach-t3);772}773.peach-delete-btn {774  font-size: 0.6875rem;775  color: var(--peach-t2);776  padding: 4px 0;777}778.peach-delete-confirm-text {779  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;780  font-size: 0.6875rem;781  font-style: italic;782  color: var(--peach-t2);783  flex-shrink: 0;784}785786/* TOTP band */787.peach-totp-band {788  border-top: 1px solid var(--peach-t3);789  padding: 12px 20px 14px;790  position: relative;791  display: grid;792  grid-template-columns: 1fr auto;793  gap: 10px;794}795.peach-totp-main {796  min-width: 0;797  cursor: pointer;798  user-select: none;799}800.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }801.peach-totp-code-row {802  display: flex;803  align-items: flex-end;804  gap: 10px;805  min-width: 0;806}807.peach-totp-code {808  margin: 2px 0 0;809  font-family: var(--font-display);810  font-style: italic;811  font-weight: 300;812  font-size: 38px; color: var(--peach-accent);813  line-height: 0.95; min-height: 1em;814  min-width: 0;815}816.peach-totp-code-text {817  display: inline-flex;818  overflow: hidden;819  text-overflow: ellipsis;820  white-space: nowrap;821}822.peach-totp-copy-btn {823  margin-bottom: 2px;824  flex-shrink: 0;825  border-color: transparent;826}827.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }828.peach-totp-countdown {829  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;830  font-size: 22px; color: var(--peach-t1);831}832.peach-totp-ring { transform: rotate(-90deg); }833.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }834.peach-totp-ring-progress {835  fill: none; stroke: var(--peach-accent); stroke-width: 2;836  stroke-linecap: round;837  transition: stroke-dashoffset 1s linear, stroke 500ms ease;838}839/* Search bar */840.peach-search-wrap {841  border-top: 1px solid var(--peach-t3);842  background: var(--peach-s1);843  min-height: 54px; position: relative;844  box-shadow: inset 0 6px 18px transparent;845  transition: box-shadow 700ms ease;846}847.peach-search-wrap::before {848  content: "";849  position: absolute;850  left: 0;851  top: 0;852  height: 2px;853  width: var(--peach-totp-progress, 0%);854  background: var(--peach-accent);855  opacity: 0;856  transition: width 1s linear, opacity 180ms ease;857  pointer-events: none;858}859.peach-shell[data-totp-active="true"] .peach-search-wrap::before {860  opacity: 0.9;861}862.peach-shell[data-totp-active="true"] .peach-search-wrap {863  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);864}865866@keyframes peach-totp-code-flare {867  0%   { filter: brightness(1); }868  25%  { filter: brightness(1.3); }869  100% { filter: brightness(1); }870}871.peach-totp-code.is-hot {872  animation: peach-totp-code-flare 3000ms ease-in-out both;873}874.peach-search-bar {875  min-height: 54px;876  display: grid;877  grid-template-columns: auto minmax(0, 1fr) auto;878  align-items: center;879  gap: 8px; padding: 0 9px 0 12px;880}881.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }882.peach-search-input {883  border: 0; background: transparent; color: var(--peach-t0);884  font-family: var(--font-display);885  font-style: italic; font-size: 18px;886  outline: none; width: 100%; min-width: 0; padding: 0;887  caret-color: var(--peach-accent);888}889.peach-search-input::placeholder { color: var(--peach-t2); }890.peach-search-meta {891  display: grid;892  grid-auto-flow: column;893  align-items: center;894  justify-content: end;895  gap: 6px;896  min-width: max-content;897}898.peach-search-counter {899  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;900  font-size: 0.625rem; color: var(--peach-t2);901  display: inline-flex;902  align-items: center;903  line-height: 1;904}905.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }906907/* Buttons */908.peach-btn {909  border: 1px solid transparent; border-radius: 12px;910  background: transparent; color: var(--peach-t0);911  font-family: Inter, system-ui, sans-serif;912  font-size: 0.75rem; letter-spacing: 0.02em; padding: 8px 12px;913  cursor: pointer;914  transition:915    background-color var(--peach-dur-80) var(--peach-curve-arrival),916    color var(--peach-dur-80) var(--peach-curve-arrival),917    border-color var(--peach-dur-150) var(--peach-curve-arrival);918}919.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }920.peach-btn:disabled {921  opacity: 0.45;922  cursor: not-allowed;923}924.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 0.6875rem; }925.peach-btn--md { min-height: 38px; }926.peach-btn--accent {927  background: var(--peach-accent);928  color: rgba(0,0,0,0.92);929  font-weight: 500;930  box-shadow:931    0 1px 0 rgba(255,255,255,0.08) inset,932    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),933    0 3px 16px var(--peach-glow),934    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);935}936.peach-btn--accent:hover:not(:disabled) {937  background: var(--peach-accent);938  filter: brightness(1.10) saturate(1.05);939  box-shadow:940    0 1px 0 rgba(255,255,255,0.10) inset,941    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),942    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),943    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);944}945.peach-btn--ghost:not(.peach-icon-btn) { border-color: var(--peach-t3); color: var(--peach-t1); }946.peach-btn--ghost.peach-icon-btn { color: var(--peach-t1); }947.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }948.peach-icon-btn {949  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;950  display: inline-flex; align-items: center; justify-content: center;951  border-color: transparent;952  transition:953    color var(--peach-dur-80) var(--peach-curve-arrival),954    box-shadow var(--peach-dur-150) var(--peach-curve-arrival),955    background-color var(--peach-dur-80) var(--peach-curve-arrival);956}957.peach-icon-btn:hover:not(:disabled) {958  background: transparent;959  color: var(--peach-accent);960  box-shadow: 0 0 12px color-mix(in srgb, var(--peach-accent) 28%, transparent),961              0 0 4px color-mix(in srgb, var(--peach-accent) 16%, transparent);962}963964/* Topbar sync. Only rendered when a device is paired, so it never sits there965   as a control that cannot do anything. */966.peach-sync-btn.is-syncing { color: var(--peach-accent); }967.peach-sync-btn.is-syncing .peach-sync-icon {968  animation: peach-sync-spin 900ms linear infinite;969  transform-origin: 50% 50%;970}971.peach-sync-btn.is-ok { color: var(--peach-accent); }972.peach-sync-btn.is-error { color: var(--peach-breach, #d66); }973@keyframes peach-sync-spin { to { transform: rotate(360deg); } }974975/* Sync indicator light — same taxonomy as the Settings pip, sized for the976   14px topbar icon. Unlit when nothing has happened yet; never green when977   sync is not actually working. */978.peach-sync-btn { position: relative; }979.peach-sync-pip {980  position: absolute;981  top: 2px;982  right: 2px;983  width: 5px;984  height: 5px;985  border-radius: 50%;986  background: transparent;987}988.peach-sync-pip.is-ok,989.peach-sync-pip.is-busy {990  background: var(--peach-health-ok);991  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-health-ok) 60%, transparent);992}993.peach-sync-pip.is-busy { animation: peach-sync-pip-pulse 1600ms ease-in-out infinite; }994/* Yellow — the dial did not reach the peer, but the alarm will retry. Distinct995   from is-error (red) so a transient network miss does not look like a real996   fault. */997.peach-sync-pip.is-warn {998  background: var(--peach-health-warn);999  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-health-warn) 60%, transparent);1000}1001.peach-sync-pip.is-error {1002  background: var(--peach-breach);1003  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-breach) 60%, transparent);1004}1005@keyframes peach-sync-pip-pulse {1006  0%, 100% { opacity: 1; }1007  50% { opacity: 0.35; }1008}1009@media (prefers-reduced-motion: reduce) {1010  .peach-sync-btn.is-syncing .peach-sync-icon { animation: none; opacity: 0.6; }1011  .peach-sync-pip.is-busy { animation: none; }1012}10131014.peach-btn:focus-visible {1015  outline: none;1016  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);1017}10181019/* Lock button */1020.peach-lock-icon { transform-origin: center; }1021.peach-lock-btn { color: var(--peach-accent); }1022.peach-lock-btn.is-locking .peach-lock-icon {1023  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);1024}10251026/* Biometric unlock button */1027.peach-biometric-btn {1028  display: flex;1029  align-items: center;1030  justify-content: center;1031  gap: 6px;1032  margin-top: 8px;1033  width: 100%;1034}10351036/* Copy button */1037.peach-copy-btn {1038  position: relative; overflow: hidden;1039  color: var(--peach-t2); border-color: var(--peach-t3);1040}1041.peach-copy-icon {1042  display: inline-flex; align-items: center; justify-content: center;1043  position: relative; z-index: 1;1044}1045.peach-copy-icon-svg { display: block; }1046.peach-copy-sheen {1047  position: absolute; inset: 0;1048  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%);1049  opacity: 0; transform: scaleX(0.15); transform-origin: left center;1050}1051.peach-copy-btn.is-copied {1052  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;1053  box-shadow:1054    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),1055    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),1056    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);1057}1058.peach-copy-btn.is-copied .peach-copy-icon {1059  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;1060}1061.peach-copy-btn.is-copied .peach-copy-sheen {1062  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;1063}1064.peach-copy-btn.is-retreat {1065  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;1066}1067.peach-copy-btn.is-retreat .peach-copy-sheen {1068  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;1069}1070.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }1071.peach-copy-drain-bar {1072  display: block; width: 100%; height: 100%;1073  background: var(--peach-accent); opacity: 0.7;1074  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;1075}10761077/* Unlock screen elements */1078.peach-underline-input {1079  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);1080  padding: 6px 0; background: transparent; color: var(--peach-t0);1081  outline: none;1082  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1083  font-size: 0.8125rem;1084  caret-color: var(--peach-accent);1085}1086.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }1087.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }1088.peach-hint {1089  margin: 0;1090  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1091  font-size: 0.625rem; color: var(--peach-t2);1092}1093.peach-unlock-footer {1094  margin-top: 4px; display: flex; align-items: center; gap: 7px;1095  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1096  font-size: 0.625rem; color: var(--peach-t2);1097}1098.peach-unlock-footer--lock {1099  padding-top: 2px;1100}11011102/* Desktop helper (peach-sync) code pairing — additive hooks. The shared pairing1103   classes (peach-pair-*) carry the shared layout; these only style the parts1104   unique to the typed-code path. Inline styles cover the SAS/confirm gate. */1105.peach-desktop-pair { display: flex; flex-direction: column; }1106.peach-desktop-enter,1107.peach-desktop-searching,1108.peach-desktop-paired,1109.peach-desktop-error {1110  display: flex; flex-direction: column; gap: 8px;1111  padding: 4px 18px 16px; text-align: center; align-items: center;1112}1113.peach-desktop-enter .peach-label { align-self: flex-start; }1114/* Sized for a full 19-character pairing code (A74H-48J3-KI32-OEP4) in a1115   320px popup — a 6-digit legacy helper code still reads fine at this size. */1116.peach-code-input {1117  text-align: center; letter-spacing: 0.12em; padding-left: 0.12em;1118  font-size: 15px;1119}1120.peach-code-input::placeholder { letter-spacing: 0.12em; }11211122/* Sync card "pair a device" options — bordered, raised tappable rows that read1123   as buttons on any card hue (theme-neutral light overlay, not the peach accent). */1124.peach-sync-pair-option {1125  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;1126  width: 100%; text-align: left; cursor: pointer; font-family: inherit;1127  padding: 11px 12px; border-radius: 10px;1128  background: color-mix(in srgb, var(--peach-t0) 6%, transparent);1129  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);1130  color: var(--peach-t0);1131  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;1132}1133.peach-sync-pair-option + .peach-sync-pair-option { margin-top: 8px; }1134.peach-sync-pair-option:hover {1135  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);1136  border-color: color-mix(in srgb, var(--peach-t0) 28%, transparent);1137}1138.peach-sync-pair-option:active { transform: translateY(1px); }1139.peach-sync-pair-option:disabled { opacity: 0.5; cursor: default; }1140.peach-sync-pair-option-icon { flex-shrink: 0; display: flex; align-items: center; color: var(--peach-t1); margin-top: 1px; }1141.peach-sync-pair-option-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }1142.peach-sync-pair-option-title { font-size: 0.8125rem; font-weight: 600; }1143.peach-sync-pair-option-sub { font-size: 0.6875rem; line-height: 1.45; color: var(--peach-t2); }1144.peach-sync-pair-option-chevron { flex-shrink: 0; color: var(--peach-t2); font-size: 1.05rem; line-height: 1.3; }11451146/* Breach badge */1147.peach-breach-badge {1148  display: flex;1149  position: relative;1150  z-index: 1;1151  align-items: center;1152  gap: 7px;1153  font-size: 0.5625rem;1154  color: var(--peach-breach);1155  padding: 5px 10px;1156  margin-bottom: 4px;1157  border-radius: 8px;1158  background: rgba(220, 80, 60, 0.07);1159  border: 1px solid rgba(220, 80, 60, 0.18);1160  letter-spacing: 0.04em;1161}11621163.peach-password-value.is-breached {1164  color: rgba(220, 80, 60, 0.75);1165  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1166}11671168/* ── Overlay views ─────────────────────────────────────────────────── */1169.peach-overlay-view {1170  position: absolute;1171  inset: 0;1172  display: flex;1173  flex-direction: column;1174  background:1175    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1176    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1177    var(--peach-bg);1178  z-index: 2;1179  overflow: hidden;1180  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1181}11821183.peach-overlay-view:has(.stk-shell) {1184  background: var(--peach-bg);1185}1186@keyframes overlay-in {1187  from { opacity: 0; transform: translateY(8px); }1188  to   { opacity: 1; transform: translateY(0); }1189}1190.peach-overlay-view.ov-enter-up {1191  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1192}1193.peach-overlay-view.ov-exit-up {1194  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1195}1196.peach-overlay-view.ov-enter-right {1197  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1198}1199.peach-overlay-view.ov-exit-right {1200  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1201}12021203@keyframes ov-enter-up {1204  from { opacity: 0; transform: translateY(18px); }1205  to   { opacity: 1; transform: translateY(0); }1206}1207@keyframes ov-exit-up {1208  from { opacity: 1; transform: translateY(0); }1209  to   { opacity: 0; transform: translateY(-12px); }1210}1211@keyframes ov-enter-right {1212  from { opacity: 0; transform: translateX(20px); }1213  to   { opacity: 1; transform: translateX(0); }1214}1215@keyframes ov-exit-right {1216  from { opacity: 1; transform: translateX(0); }1217  to   { opacity: 0; transform: translateX(20px); }1218}12191220/* Overlay shared header */1221.peach-overlay-header {1222  padding: 10px 12px 8px;1223  display: flex;1224  align-items: center;1225  gap: 10px;1226  flex-shrink: 0;1227}1228/* Back button — circular pill matching the settings stack masthead (.stk-back) */1229.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1230  width: 28px;1231  height: 28px;1232  flex: 0 0 28px;1233  border-radius: 999px;1234  border: 1px solid var(--peach-border);1235  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1236  color: var(--peach-t1);1237  padding: 0;1238}1239.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1240  color: var(--peach-t0);1241  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1242  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1243}1244.peach-overlay-title {1245  font-family: var(--font-display);1246  font-style: italic;1247  font-weight: 400;1248  font-size: 20px;1249  line-height: 1;1250  color: var(--peach-t0);1251  flex: 1;1252  text-align: center;1253}1254/* Balances the 28px back button so the title stays visually centred */1255.peach-overlay-spacer {1256  width: 28px;1257  flex: 0 0 28px;1258}12591260.peach-overlay-card {1261  background: var(--peach-s1);1262  border: 1px solid var(--peach-t3);1263  border-radius: 12px;1264  overflow: hidden;1265  width: 100%;1266}12671268.peach-onboarding-alt-actions {1269  display: flex;1270  flex-direction: column;1271  gap: 4px;1272  padding: 0;1273}12741275.peach-settings-copy {1276  margin: 0 0 10px;1277  font-size: 0.6875rem;1278  line-height: 1.5;1279  color: var(--peach-t2);1280}12811282.peach-settings-copy strong {1283  color: var(--peach-t0);1284}12851286.peach-settings-copy--spacious {1287  margin-bottom: 12px;1288}12891290.peach-settings-copy--result {1291  color: var(--peach-accent);1292  font-size: 0.8125rem;1293  text-align: center;1294  padding: 8px 0;1295}12961297.peach-settings-copy--danger {1298  color: var(--peach-breach);1299}13001301.peach-settings-copy--success {1302  color: var(--peach-accent);1303}13041305.peach-inline-feedback {1306  font-size: 0.6875rem;1307  margin: 10px 0 0;1308}13091310.peach-inline-feedback--ok {1311  color: var(--peach-accent);1312}13131314.peach-inline-feedback--error {1315  color: var(--peach-breach);1316}13171318.peach-inline-feedback--muted {1319  color: var(--peach-t2);1320  font-size: 0.625rem;1321  margin: 4px 0;1322}13231324.peach-inline-feedback--spaced {1325  margin-top: 12px;1326}13271328.peach-settings-actions--row {1329  display: flex;1330  gap: 6px;1331}13321333.peach-settings-actions--end {1334  margin-top: 14px;1335  justify-content: flex-end;1336}13371338.peach-settings-stack {1339  display: flex;1340  flex-direction: column;1341  gap: 6px;1342}13431344.peach-settings-stack--tight {1345  gap: 4px;1346}13471348.peach-settings-stack--spacious {1349  gap: 8px;1350}13511352.peach-settings-input {1353  width: 100%;1354  box-sizing: border-box;1355  padding: 8px 10px;1356  background: rgba(0, 0, 0, 0.22);1357  border: 1px solid transparent;1358  border-radius: 6px;1359  color: var(--peach-t0);1360  font-family: var(--font-ui);1361  font-size: 0.75rem;1362  outline: none;1363  transition: border-color 120ms ease, background 120ms ease;1364}13651366.peach-settings-input:focus {1367  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1368  background: rgba(0, 0, 0, 0.28);1369}13701371.peach-settings-input[type="password"] {1372  font-family: var(--font-mono);1373  letter-spacing: 0.04em;1374}13751376.peach-hidden-file-input {1377  display: none;1378}13791380.peach-checkbox-note {1381  display: flex;1382  align-items: flex-start;1383  gap: 8px;1384  font-size: 0.6875rem;1385  color: var(--peach-t1);1386  cursor: pointer;1387  margin: 12px 0;1388}13891390.peach-checkbox-note input {1391  margin-top: 1px;1392}13931394.peach-danger-notice {1395  background: rgba(220, 80, 60, 0.08);1396  border: 1px solid rgba(220, 80, 60, 0.2);1397  border-radius: 6px;1398  padding: 9px 11px;1399  font-size: 0.6875rem;1400  color: var(--peach-t1);1401  line-height: 1.5;1402}14031404.peach-info-notice {1405  font-size: 0.6875rem;1406  color: var(--peach-t1);1407  line-height: 1.5;1408  background: var(--surface-card);1409  border: 1px solid var(--peach-t3);1410  border-radius: 6px;1411  padding: 8px 10px;1412}14131414.peach-info-notice--warn {1415  border-color: rgba(220, 38, 38, 0.4);1416  background: rgba(220, 38, 38, 0.06);1417  color: rgba(220, 38, 38, 0.92);1418  margin-bottom: 8px;1419}14201421/* Warm helpful-context note — reads as a soft aside, not an alert. */1422.peach-info-notice--note {1423  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);1424  border-color: color-mix(in srgb, var(--peach-accent) 18%, transparent);1425  color: var(--peach-t2);1426}14271428.peach-strength-row {1429  display: flex;1430  align-items: center;1431  gap: 8px;1432  margin-bottom: 10px;1433}14341435.peach-strength-track {1436  flex: 1;1437  height: 4px;1438  background: var(--peach-s2);1439  border-radius: 2px;1440  overflow: hidden;1441}14421443.peach-strength-fill {1444  height: 100%;1445  border-radius: 2px;1446  transition: width 120ms ease, background 120ms ease;1447}14481449/* ── Type selector tabs ── */1450.peach-type-tabs {1451  display: flex;1452  gap: 0;1453  background: var(--peach-t4);1454  border-radius: 8px;1455  padding: 3px;1456}14571458.peach-type-tab {1459  flex: 1;1460  display: flex;1461  align-items: center;1462  justify-content: center;1463  gap: 6px;1464  padding: 6px 10px;1465  border-radius: 6px;1466  border: none;1467  background: transparent;1468  cursor: pointer;1469  font-family: Inter, system-ui, sans-serif;1470  font-size: 0.6875rem;1471  font-weight: 400;1472  letter-spacing: 0.04em;1473  color: var(--peach-t1);1474  transition: background 150ms ease, color 150ms ease;1475}14761477.peach-type-tab.is-active {1478  background: var(--peach-s2);1479  color: var(--peach-t0);1480  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1481}14821483.peach-type-tab:not(.is-active):hover {1484  color: var(--peach-t0);1485}14861487.peach-type-tab svg {1488  opacity: 0.7;1489  flex-shrink: 0;1490}14911492.peach-type-tab.is-active svg {1493  opacity: 1;1494}14951496/* ── List view ───────────────────────────────────────────────────────── */1497.peach-list-top {1498  padding: 0 10px;1499  min-height: 46px;1500  display: flex;1501  align-items: center;1502  gap: 6px;1503  border-bottom: 1px solid var(--peach-t3);1504  flex-shrink: 0;1505  background: var(--peach-s1);1506}15071508.peach-vault-list {1509  flex: 1;1510  overflow-y: auto;1511  scrollbar-width: none;1512}1513.peach-vault-list::-webkit-scrollbar { display: none; }15141515/* Scrollbar — vault list */1516.peach-vault-list {1517  scrollbar-width: thin;1518  scrollbar-color: var(--peach-t3) transparent;1519}15201521.peach-vault-list::-webkit-scrollbar {1522  width: 3px;1523}15241525.peach-vault-list::-webkit-scrollbar-thumb {1526  background: var(--peach-t3);1527  border-radius: 2px;1528}15291530.peach-entry-row {1531  width: 100%;1532  display: flex;1533  align-items: center;1534  gap: 10px;1535  padding: 9px 16px;1536  background: transparent;1537  border: none;1538  border-bottom: 1px solid var(--peach-t3);1539  cursor: pointer;1540  color: inherit;1541  text-align: left;1542  transition: background 80ms ease;1543}1544.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1545.peach-entry-row:last-child { border-bottom: none; }1546.peach-entry-row.is-active {1547  box-shadow: inset 2px 0 0 var(--peach-accent);1548  background: rgba(240,232,216,0.03);1549}1550.peach-entry-row:focus-visible {1551  outline: none;1552  box-shadow: 0 0 0 1px var(--peach-border-accent);1553  background: rgba(240,232,216,0.03);1554}1555.peach-entry-row-icon {1556  width: 26px; height: 26px;1557  border-radius: 7px;1558  border: 1px solid var(--peach-t3);1559  display: flex; align-items: center; justify-content: center;1560  color: var(--peach-t2);1561  flex-shrink: 0;1562}1563.peach-entry-row-icon.is-breach {1564  border-color: rgba(220,80,60,0.3);1565  color: rgba(220,80,60,0.7);1566}15671568/* Title-initials chip used as the favicon fallback for login entries whose1569 * real favicon hasn't been cached by the browser yet (freshly-imported,1570 * never-visited domains). Background colour is hashed from the title so1571 * the same entry always shows the same chip. The chip fits the same1572 * 26×26 row icon slot the favicon would take. */1573.peach-favicon-initials {1574  display: inline-flex;1575  align-items: center;1576  justify-content: center;1577  width: 100%;1578  height: 100%;1579  border-radius: 4px;1580  font-family: "IBM Plex Mono", monospace;1581  font-size: 0.5625rem;1582  font-weight: 600;1583  letter-spacing: 0.04em;1584  color: rgba(240, 232, 216, 0.92);1585  text-transform: uppercase;1586  user-select: none;1587}1588.peach-entry-row-info { flex: 1; min-width: 0; }1589.peach-entry-row-name {1590  display: block;1591  font-family: var(--font-display);1592  font-size: 1.0625rem;1593  font-style: italic;1594  font-weight: 400;1595  color: var(--peach-t0);1596  line-height: 1.2;1597  white-space: nowrap;1598  overflow: hidden;1599  text-overflow: ellipsis;1600}1601.peach-entry-row-meta {1602  display: block;1603  font-family: "IBM Plex Mono", monospace;1604  font-size: 0.5625rem;1605  color: var(--peach-t2);1606  margin-top: 1px;1607  letter-spacing: 0.05em;1608}1609.peach-entry-row-dot {1610  width: 5px; height: 5px;1611  border-radius: 50%;1612  background: rgba(220,80,60,0.7);1613  flex-shrink: 0;1614}1615.peach-new-entry-row {1616  display: flex;1617  align-items: center;1618  justify-content: center;1619  gap: 6px;1620  width: 100%;1621  padding: 11px;1622  background: transparent;1623  border: none;1624  border-top: 1px solid var(--peach-t3);1625  color: var(--peach-t2);1626  font-family: "IBM Plex Mono", monospace;1627  font-size: 0.5625rem;1628  text-transform: uppercase;1629  letter-spacing: 0.14em;1630  cursor: pointer;1631  flex-shrink: 0;1632  transition: color 120ms ease, background 120ms ease;1633}1634.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }16351636/* ── Multi-select mode ─────────────────────────────────────────────── */16371638/* Select-mode trigger button in sort bar — same shape as trash btn */1639.peach-sort-select-btn {1640  display: flex;1641  align-items: center;1642  justify-content: center;1643  padding: 3px 5px;1644  background: transparent;1645  border: none;1646  cursor: pointer;1647  color: var(--peach-t2);1648  border-radius: 4px;1649  transition: color 140ms ease, background 140ms ease;1650}1651.peach-sort-select-btn:hover {1652  color: var(--peach-t1);1653  background: var(--peach-t3);1654}16551656/* Sort bar in select mode */1657.peach-select-cancel-btn {1658  background: transparent;1659  border: none;1660  padding: 0 4px;1661  cursor: pointer;1662  font-family: "IBM Plex Mono", monospace;1663  font-size: 0.5625rem;1664  letter-spacing: 0.12em;1665  text-transform: uppercase;1666  color: var(--peach-t2);1667  transition: color 140ms ease;1668  flex-shrink: 0;1669}1670.peach-select-cancel-btn:hover { color: var(--peach-t0); }16711672.peach-select-count-label {1673  flex: 1;1674  text-align: center;1675  font-family: "IBM Plex Mono", monospace;1676  font-size: 0.5625rem;1677  letter-spacing: 0.14em;1678  text-transform: uppercase;1679  color: var(--peach-t1);1680}16811682.peach-select-all-btn {1683  background: transparent;1684  border: none;1685  padding: 0 4px;1686  cursor: pointer;1687  font-family: "IBM Plex Mono", monospace;1688  font-size: 0.5625rem;1689  letter-spacing: 0.12em;1690  text-transform: uppercase;1691  color: var(--peach-t2);1692  transition: color 140ms ease;1693  flex-shrink: 0;1694}1695.peach-select-all-btn:hover { color: var(--peach-accent); }16961697/* List in select mode */1698.peach-vault-list.is-selecting .peach-entry-row {1699  cursor: default;1700}1701.peach-vault-list.is-selecting .peach-entry-row:hover {1702  background: rgba(240,232,216,0.02);1703}1704.peach-vault-list.is-selecting .peach-entry-row.is-selected {1705  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1706}1707.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1708  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1709}17101711/* Select indicator circles in icon slot */1712.peach-entry-row-icon.is-select-icon {1713  color: var(--peach-t2);1714}1715.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1716  color: var(--peach-accent);1717}17181719/* Delete action bar at bottom (replaces new-entry row) */1720.peach-select-action-bar {1721  display: flex;1722  align-items: center;1723  justify-content: center;1724  gap: 7px;1725  width: 100%;1726  padding: 11px;1727  background: transparent;1728  border: none;1729  border-top: 1px solid var(--peach-t3);1730  color: var(--peach-t1);1731  font-family: "IBM Plex Mono", monospace;1732  font-size: 0.5625rem;1733  text-transform: uppercase;1734  letter-spacing: 0.14em;1735  cursor: pointer;1736  flex-shrink: 0;1737  transition: color 120ms ease, background 120ms ease;1738}1739.peach-select-action-bar:not(:disabled):hover {1740  color: var(--peach-t0);1741  background: rgba(220,80,60,0.06);1742}1743.peach-select-action-bar:not(:disabled):hover svg {1744  stroke: rgba(220,80,60,0.8);1745}1746.peach-select-action-bar:disabled,1747.peach-select-action-bar.is-empty {1748  color: var(--peach-t2);1749  cursor: default;1750  opacity: 0.5;1751}1752.peach-search-counter-list {1753  white-space: nowrap;1754  flex-shrink: 0;1755}1756.peach-list-empty {1757  min-height: 180px;1758  display: grid;1759  place-items: center;1760  color: var(--peach-t2);1761  font-family: "IBM Plex Mono", monospace;1762  font-size: 0.6875rem;1763}17641765/* ── Settings view ───────────────────────────────────────────────────── */1766.peach-settings-body {1767  flex: 1;1768  overflow-y: auto;1769  min-height: 0;1770  display: flex;1771  flex-direction: column;1772  padding: 2px 0 10px;1773}1774.peach-settings-group {1775  margin: 4px 10px;1776  padding: 9px 14px 11px;1777  border-radius: 12px;1778  border: 1px solid rgba(255, 255, 255, 0.07);1779  background: rgba(26, 20, 16, 0.60);1780  backdrop-filter: blur(10px) saturate(1.3);1781  -webkit-backdrop-filter: blur(10px) saturate(1.3);1782}17831784.peach-settings-group + .peach-settings-group {1785  margin-top: 6px;1786}17871788@supports not (backdrop-filter: blur(1px)) {1789  .peach-settings-group {1790    background: rgba(26, 20, 16, 0.90);1791    border-color: rgba(255, 255, 255, 0.09);1792    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1793  }1794}17951796.light .peach-settings-group,1797[data-theme="light"] .peach-settings-group {1798  background: rgba(245, 237, 226, 0.70);1799  border-color: rgba(26, 18, 8, 0.08);1800  backdrop-filter: blur(10px) saturate(1.2);1801  -webkit-backdrop-filter: blur(10px) saturate(1.2);1802}18031804@supports not (backdrop-filter: blur(1px)) {1805  .light .peach-settings-group,1806  [data-theme="light"] .peach-settings-group {1807    background: rgba(245, 237, 226, 0.97);1808    border-color: rgba(26, 18, 8, 0.10);1809  }1810}1811.peach-export-intro {1812  padding-bottom: 8px;1813}1814.peach-export-card {1815  display: grid;1816  gap: 10px;1817}1818.peach-rune-canvas {1819  border-radius: 8px;1820  background: rgba(0, 0, 0, 0.22);1821  flex: 1;1822  align-self: center;1823}1824.peach-script-input {1825  font-family: "PeachScript", monospace;1826  font-size: 0.6875rem;1827  line-height: 1.9;1828  letter-spacing: 0.06em;1829  color: var(--peach-t0);1830  background: rgba(0, 0, 0, 0.22);1831  border: none;1832  border-radius: 6px;1833  padding: 12px;1834  width: 100%;1835  min-height: 96px;1836  resize: vertical;1837  word-break: break-all;1838  scrollbar-width: none;1839  -ms-overflow-style: none;1840}18411842.peach-script-input::-webkit-scrollbar { display: none; }1843.peach-csv-warning {1844  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1845  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1846  color: var(--peach-t0);1847  border-radius: 6px;1848  padding: 10px 12px;1849  margin-bottom: 8px;1850  font-size: 0.75rem;1851  line-height: 1.45;1852}1853.peach-export-card--primary {1854  background:1855    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1856}18571858/* Export menu — distribute the three format cards across the popup. */1859.peach-export-menu {1860  display: flex;1861  flex-direction: column;1862  flex: 1;1863  min-height: 0;1864}1865.peach-export-menu .peach-settings-group {1866  flex: 1;1867  display: flex;1868  flex-direction: column;1869  justify-content: center;1870  gap: 10px;1871}18721873/* Result view — the script-string fills the remaining vertical surface. */1874.peach-export-result-group {1875  flex: 1;1876  display: flex;1877  flex-direction: column;1878  min-height: 0;1879  border-bottom: none;1880}1881.peach-export-result-group .peach-export-card {1882  flex: 1;1883  min-height: 0;1884  display: flex;1885  flex-direction: column;1886  gap: 10px;1887}1888.peach-export-result-group .peach-export-card-copy {1889  flex-shrink: 0;1890}1891.peach-export-result-group .peach-settings-label {1892  flex-shrink: 0;1893}1894.peach-export-result-group button {1895  flex-shrink: 0;1896}1897.peach-export-card-head {1898  display: flex;1899  align-items: center;1900  justify-content: space-between;1901  gap: 10px;1902}1903.peach-export-card-copy {1904  margin: 0;1905  font-size: 0.75rem;1906  line-height: 1.55;1907  color: var(--peach-t1);1908}1909.peach-export-note {1910  margin: 0;1911  font-size: 0.625rem;1912  line-height: 1.5;1913  color: var(--peach-t2);1914}1915.peach-export-strength-track {1916  height: 3px;1917  background: var(--peach-border);1918  border-radius: 2px;1919  margin: 4px 0 2px;1920  overflow: hidden;1921}1922.peach-export-strength-fill {1923  height: 100%;1924  border-radius: 2px;1925  transition: width 250ms ease, background 250ms ease;1926}1927.peach-export-strength-warn {1928  margin: 0;1929  font-size: 0.625rem;1930  line-height: 1.5;1931  color: #e84040;1932  font-family: "IBM Plex Mono", monospace;1933}1934.peach-export-strength-hint {1935  margin: 0;1936  font-size: 0.625rem;1937  line-height: 1.5;1938  color: var(--peach-t2);1939  font-family: "IBM Plex Mono", monospace;1940}1941.peach-export-pill {1942  display: inline-flex;1943  align-items: center;1944  padding: 4px 8px;1945  border-radius: 999px;1946  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1947  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1948  color: var(--peach-accent);1949  font-family: "IBM Plex Mono", monospace;1950  font-size: 0.5rem;1951  letter-spacing: 0.12em;1952  text-transform: uppercase;1953  white-space: nowrap;1954}1955.peach-export-pill--danger {1956  border-color: rgba(220,80,60,0.22);1957  background: rgba(220,80,60,0.08);1958  color: var(--peach-breach);1959}1960.peach-settings-label {1961  margin: 0 0 6px;1962  font-family: "IBM Plex Mono", monospace;1963  font-size: 0.5rem;1964  text-transform: uppercase;1965  letter-spacing: 0.18em;1966  color: var(--peach-t2);1967}1968.peach-settings-row {1969  display: flex;1970  align-items: center;1971  justify-content: space-between;1972  gap: 12px;1973  min-height: 34px;1974  padding: 6px 0;1975  font-size: 0.8125rem;1976  color: var(--peach-t1);1977}1978.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1979.peach-settings-value {1980  font-family: "IBM Plex Mono", monospace;1981  font-size: 0.625rem;1982  color: var(--peach-t2);1983}19841985.peach-settings-value--status {1986  display: flex;1987  align-items: center;1988  gap: 6px;1989}19901991.peach-settings-link {1992  font-family: "IBM Plex Mono", monospace;1993  font-size: 0.625rem;1994  color: var(--peach-accent);1995  text-decoration: none;1996  cursor: pointer;1997}1998.peach-settings-link:hover {1999  text-decoration: underline;2000}20012002.peach-settings-row--stack {2003  flex-direction: column;2004  align-items: stretch;2005  gap: 6px;2006}20072008.peach-settings-row--top {2009  align-items: flex-start;2010}20112012.peach-settings-row-main {2013  display: flex;2014  flex-direction: column;2015  gap: 4px;2016  flex: 1;2017}2018.peach-toggle {2019  width: 28px; height: 16px;2020  border-radius: 999px;2021  background: var(--peach-t3);2022  border: 1px solid var(--peach-t3);2023  display: flex; align-items: center; justify-content: flex-start; padding: 2px;2024  flex-shrink: 0;2025  transition: background 200ms ease, border-color 200ms ease;2026  cursor: pointer;2027}2028.peach-toggle.is-on {2029  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);2030  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2031}2032.peach-toggle-knob {2033  width: 10px; height: 10px;2034  border-radius: 50%;2035  background: var(--peach-t2);2036  flex-shrink: 0;2037  transform: translateX(0px);2038  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);2039}2040.peach-toggle.is-on .peach-toggle-knob {2041  background: var(--peach-accent);2042  transform: translateX(12px);2043}2044.peach-settings-footer {2045  display: flex;2046  align-items: center;2047  gap: 8px;2048  margin-top: auto;2049  padding: 14px 16px 8px;2050  font-family: "IBM Plex Mono", monospace;2051  font-size: 0.5625rem;2052  color: var(--peach-t2);2053}20542055/* ── Settings home navigation ──────────────────────────────────────────── */2056.peach-settings-nav-label {2057  margin: 0 0 2px;2058  padding: 12px 16px 4px;2059  font-family: "IBM Plex Mono", monospace;2060  font-size: 0.5rem;2061  text-transform: uppercase;2062  letter-spacing: 0.18em;2063  color: var(--peach-t2);2064}20652066.peach-settings-cat-row {2067  display: flex;2068  align-items: center;2069  gap: 10px;2070  width: 100%;2071  padding: 9px 16px;2072  background: none;2073  border: none;2074  border-bottom: 1px solid var(--peach-t3);2075  cursor: pointer;2076  text-align: left;2077  color: inherit;2078  transition: background var(--peach-dur-80) ease;2079}2080.peach-settings-cat-row:hover {2081  background: var(--peach-t3);2082}2083.peach-settings-cat-row:last-child {2084  border-bottom: none;2085}20862087.peach-settings-cat-icon {2088  width: 28px;2089  height: 28px;2090  border-radius: 7px;2091  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2092  color: var(--peach-accent);2093  display: flex;2094  align-items: center;2095  justify-content: center;2096  flex-shrink: 0;2097}2098/* Light theme: peach-on-cream is too low-contrast — both colors are warm.2099   Darken the icon stroke to ink and bump the bg tint so the icon reads2100   sharply while the cell still feels accent-tinted. */2101.light .peach-settings-cat-icon {2102  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);2103  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));2104}21052106.peach-settings-cat-content {2107  flex: 1;2108  display: flex;2109  flex-direction: column;2110  gap: 2px;2111  min-width: 0;2112}21132114.peach-settings-cat-name {2115  font-size: 0.8125rem;2116  font-weight: 450;2117  color: var(--peach-t0);2118  line-height: 1.2;2119}21202121.peach-settings-cat-desc {2122  font-size: 0.625rem;2123  color: var(--peach-t2);2124  line-height: 1.3;2125  white-space: nowrap;2126  overflow: hidden;2127  text-overflow: ellipsis;2128}21292130.peach-settings-cat-chevron {2131  color: var(--peach-t2);2132  flex-shrink: 0;2133  opacity: 0.5;2134}21352136/* ── Settings sub-view section labels ──────────────────────────────────── */2137.peach-settings-sub-label {2138  margin: 12px 0 4px;2139  font-family: "IBM Plex Mono", monospace;2140  font-size: 0.5rem;2141  text-transform: uppercase;2142  letter-spacing: 0.18em;2143  color: var(--peach-t2);2144}2145.peach-settings-sub-label:first-child {2146  margin-top: 4px;2147}21482149/* ── Settings: collapsible Advanced section ─────────────────────────────── */2150.peach-settings-advanced-toggle {2151  display: flex;2152  align-items: center;2153  justify-content: space-between;2154  width: 100%;2155  background: none;2156  border: none;2157  cursor: pointer;2158  padding: 12px 0 4px;2159  margin: 0;2160  color: inherit;2161}2162.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {2163  color: var(--peach-t1);2164}2165.peach-settings-advanced-chevron {2166  font-size: 0.5625rem;2167  color: var(--peach-t3);2168  letter-spacing: 0;2169  transition: color 120ms ease;2170}21712172.peach-sync-disclosure-toggle {2173  min-height: 48px;2174  padding: 10px 0;2175  text-align: left;2176}21772178.peach-sync-disclosure-toggle > span:first-child {2179  display: flex;2180  flex-direction: column;2181  gap: 3px;2182}21832184.peach-sync-disclosure-summary {2185  color: var(--peach-t2);2186  font-size: 0.6875rem;2187  line-height: 1.35;2188}21892190.peach-sync-disclosure-content {2191  padding-bottom: 4px;2192}21932194/* ── Feedback form ──────────────────────────────────────────────────────── */2195.peach-feedback-group {2196  flex: 1;2197  display: flex;2198  flex-direction: column;2199  border-bottom: none;2200}22012202.peach-feedback-intro {2203  margin: 4px 0 14px;2204  font-size: 0.75rem;2205  line-height: 1.55;2206  color: var(--peach-t1);2207}22082209.peach-feedback-chips {2210  display: flex;2211  flex-wrap: wrap;2212  gap: 6px;2213  margin-bottom: 14px;2214}22152216.peach-feedback-chip {2217  padding: 4px 10px;2218  border-radius: 999px;2219  border: 1px solid var(--peach-t3);2220  background: none;2221  color: var(--peach-t2);2222  font-size: 0.6875rem;2223  font-family: var(--font-ui);2224  cursor: pointer;2225  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2226    background var(--peach-dur-80) ease;2227}2228.peach-feedback-chip:hover {2229  border-color: var(--peach-t2);2230  color: var(--peach-t1);2231}2232.peach-feedback-chip.is-active {2233  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);2234  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));2235  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);2236  box-shadow:2237    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),2238    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);2239  font-weight: 700;2240}22412242.peach-feedback-textarea {2243  flex: 1;2244  width: 100%;2245  min-height: 120px;2246  box-sizing: border-box;2247  background: rgba(0, 0, 0, 0.22);2248  border: 1px solid transparent;2249  border-radius: 6px;2250  color: var(--peach-t0);2251  font-size: 0.75rem;2252  font-family: var(--font-ui);2253  line-height: 1.5;2254  padding: 8px 10px;2255  resize: none;2256  outline: none;2257  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2258}2259.peach-feedback-textarea:focus {2260  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2261  background: rgba(0, 0, 0, 0.28);2262}2263.peach-feedback-textarea:focus {2264  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2265}2266.peach-feedback-textarea::placeholder {2267  color: var(--peach-t2);2268}22692270.peach-feedback-meta {2271  margin: 6px 0 0;2272  font-size: 0.625rem;2273  color: var(--peach-t2);2274  font-family: "IBM Plex Mono", monospace;2275}22762277.peach-feedback-result {2278  margin: 8px 0 0;2279  font-size: 0.6875rem;2280  font-family: "IBM Plex Mono", monospace;2281}2282.peach-feedback-result--ok { color: var(--peach-sync-ok); }2283.peach-feedback-result--err { color: var(--peach-breach); }22842285.peach-feedback-submit {2286  width: 100%;2287  margin-top: 12px;2288  justify-content: center;2289}22902291.peach-feedback-anon {2292  margin: 8px 0 0;2293  font-size: 0.625rem;2294  color: var(--peach-t2);2295  text-align: center;2296}22972298.peach-feedback-thanks {2299  margin: auto 0;2300  padding: 18px 14px;2301  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);2302  border-radius: 8px;2303  background:2304    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),2305    rgba(0, 0, 0, 0.18);2306  color: var(--peach-t1);2307  text-align: center;2308}23092310.peach-feedback-thanks p {2311  margin: 0;2312  font-size: 0.75rem;2313  line-height: 1.5;2314}23152316.peach-feedback-thanks-title {2317  color: var(--peach-t0);2318  font-family: "Cormorant Garamond", serif;2319  font-size: 1.375rem !important;2320  line-height: 1.1 !important;2321  margin-bottom: 8px !important;2322}23232324.peach-passkey-badge {2325  margin-left: 8px;2326  font-size: 0.625rem;2327  letter-spacing: 0.06em;2328  text-transform: uppercase;2329  color: var(--peach-t2);2330  font-family: var(--font-ui);2331  vertical-align: middle;2332}23332334.peach-passkey-delete-btn {2335  color: var(--peach-breach);2336  border-color: rgba(229, 85, 85, 0.25);2337}23382339.peach-passkey-delete-confirm {2340  display: flex;2341  align-items: center;2342  gap: 8px;2343  padding: 8px 10px;2344  background: rgba(229, 85, 85, 0.06);2345  border: 1px solid rgba(229, 85, 85, 0.2);2346  border-radius: 6px;2347}23482349.peach-passkey-delete-confirm-copy {2350  flex: 1;2351  font-size: 0.6875rem;2352  color: var(--peach-t1);2353}23542355.peach-passkey-delete-btn--confirm {2356  color: var(--peach-breach);2357  border-color: rgba(229, 85, 85, 0.4);2358}23592360.peach-passkey-activity {2361  flex-direction: column;2362  align-items: flex-start;2363  gap: 4px;2364}23652366.peach-passkey-meta {2367  font-size: 0.6875rem;2368  color: var(--peach-t2);2369}23702371.peach-passkey-actions {2372  position: relative;2373  z-index: 1;2374  margin-top: 14px;2375  display: flex;2376  flex-direction: column;2377  gap: 8px;2378}23792380.peach-passkey-approval {2381  display: flex;2382  flex-direction: column;2383  align-items: center;2384  padding: 16px 20px 14px;2385  gap: 8px;2386  text-align: center;2387}23882389.peach-passkey-approval-icon {2390  width: 36px;2391  height: 36px;2392  border-radius: 10px;2393  background: var(--peach-s2);2394  border: 1px solid var(--peach-t3);2395  display: flex;2396  align-items: center;2397  justify-content: center;2398  flex-shrink: 0;2399  color: var(--peach-accent);2400}24012402.peach-passkey-approval-icon img,2403.peach-passkey-approval-icon svg {2404  width: 22px;2405  height: 22px;2406  border-radius: 5px;2407}24082409.peach-passkey-approval-rp {2410  font-family: var(--font-ui);2411  font-size: 0.75rem;2412  color: var(--peach-t2);2413  letter-spacing: 0.03em;2414}24152416.peach-passkey-approval-action {2417  font-family: var(--font-display);2418  font-style: italic;2419  font-weight: 300;2420  font-size: 18px;2421  color: var(--peach-t0);2422  line-height: 1.1;2423  margin: 1px 0;2424}24252426.peach-passkey-approval-user {2427  font-family: var(--font-mono);2428  font-size: 0.6875rem;2429  color: var(--peach-t1);2430  background: var(--peach-s2);2431  border: 1px solid var(--peach-t3);2432  border-radius: 4px;2433  padding: 3px 8px;2434}24352436.peach-passkey-approval-notice {2437  font-size: 0.625rem;2438  color: var(--peach-t2);2439  line-height: 1.5;2440  max-width: 220px;2441}24422443.peach-passkey-approval-actions {2444  display: flex;2445  gap: 8px;2446  width: 100%;2447  margin-top: 6px;2448}24492450.peach-passkey-approval-actions .peach-btn {2451  flex: 1;2452}24532454/* ── Inline generator drawer ── */2455.peach-generator-drawer {2456  display: grid;2457  grid-template-rows: 0fr;2458  transition: grid-template-rows 320ms var(--peach-curve-arrival);2459  overflow: hidden;2460}2461.peach-generator-drawer.is-open {2462  grid-template-rows: 1fr;2463}2464.peach-generator-drawer-inner {2465  min-height: 0;2466  overflow: hidden;2467}2468.peach-generator-drawer-content {2469  border-top: 1px solid var(--peach-t3);2470  padding: 8px 0 4px;2471  display: flex;2472  flex-direction: column;2473  gap: 8px;2474}24752476/* ── Compact generator (inside entry edit) ── */2477.peach-generator-drawer-content--compact {2478  border-top: 1px solid var(--peach-t3);2479  padding: 8px 0 2px;2480  gap: 7px;2481}2482.peach-pwgen-compact-display-row {2483  display: flex;2484  align-items: center;2485  gap: 6px;2486}2487.peach-pwgen-compact-output {2488  flex: 1;2489  min-width: 0;2490  font-family: "IBM Plex Mono", monospace;2491  font-size: 0.6875rem;2492  font-weight: 400;2493  letter-spacing: 0.04em;2494  color: var(--peach-t0);2495  background: rgba(240, 232, 216, 0.04);2496  border: 1px solid var(--peach-t3);2497  border-radius: 5px;2498  padding: 5px 8px;2499  line-height: 1.5;2500  outline: none;2501  transition: border-color 120ms ease;2502}25032504.peach-pwgen-compact-output:focus {2505  border-color: var(--peach-t1);2506}2507.peach-pwgen-compact-controls {2508  display: flex;2509  align-items: center;2510  gap: 6px;2511}2512.peach-pwgen-compact-slider {2513  flex: 1;2514  min-width: 0;2515  height: 2px !important;2516}2517.peach-pwgen-compact-controls .peach-pwgen-len-num {2518  flex-shrink: 0;2519  min-width: 18px;2520  text-align: right;2521}2522.peach-pwgen-compact-pills {2523  display: flex;2524  gap: 3px;2525  flex-shrink: 0;2526}2527.peach-pwgen-compact-pills .peach-pwgen-pill {2528  padding: 2px 7px;2529  font-size: 0.5rem;2530}2531.peach-pwgen-compact-use {2532  flex-shrink: 0;2533  font-size: 0.625rem !important;2534  padding: 3px 9px !important;2535  min-height: 22px !important;2536  border-radius: 5px !important;2537}25382539/* ── Password edit row (input + eye toggle side-by-side) ── */2540.peach-password-edit-row {2541  display: flex;2542  align-items: center;2543  gap: 6px;2544}2545.peach-password-edit-row .peach-inline-input {2546  flex: 1;2547  min-width: 0;2548}25492550/* ── Generate toggle link ── */2551.peach-generate-toggle-link {2552  display: inline-flex;2553  align-items: center;2554  gap: 5px;2555  background: none;2556  border: none;2557  padding: 0;2558  cursor: pointer;2559  font-family: "IBM Plex Mono", monospace;2560  font-size: 0.625rem;2561  color: var(--peach-t2);2562  letter-spacing: 0.04em;2563  transition: color 120ms ease;2564  align-self: flex-start;2565}2566.peach-generate-toggle-link:hover {2567  color: var(--peach-accent);2568}25692570/* Holds the generate + history toggle links on one row under the editor. */2571.peach-password-edit-links {2572  display: flex;2573  align-items: center;2574  gap: 14px;2575  flex-wrap: wrap;2576}25772578/* ── Past-password history list ── */2579.peach-password-history {2580  display: grid;2581  gap: 4px;2582  margin-top: 2px;2583  max-height: 168px;2584  overflow-y: auto;2585  scrollbar-width: thin;2586}2587.peach-history-row {2588  display: flex;2589  align-items: center;2590  justify-content: space-between;2591  gap: 8px;2592  padding: 5px 7px;2593  border-radius: 7px;2594  background: color-mix(in srgb, var(--peach-accent) 5%, transparent);2595  border: 1px solid color-mix(in srgb, var(--peach-accent) 9%, transparent);2596}2597.peach-history-main {2598  display: flex;2599  flex-direction: column;2600  gap: 1px;2601  min-width: 0;2602  flex: 1;2603}2604.peach-history-pw {2605  font-family: "IBM Plex Mono", monospace;2606  font-size: 0.6875rem;2607  color: var(--peach-t1);2608  white-space: nowrap;2609  overflow: hidden;2610  text-overflow: ellipsis;2611}2612.peach-history-pw .peach-password-mask {2613  letter-spacing: 0.08em;2614  color: var(--peach-t2);2615}2616.peach-history-age {2617  font-family: "IBM Plex Mono", monospace;2618  font-size: 0.5625rem;2619  color: var(--peach-t3, var(--peach-t2));2620  letter-spacing: 0.03em;2621}2622.peach-history-actions {2623  display: flex;2624  align-items: center;2625  gap: 2px;2626  flex-shrink: 0;2627}2628.peach-history-use {2629  font-family: "IBM Plex Mono", monospace;2630  font-size: 0.5625rem;2631  letter-spacing: 0.05em;2632  padding: 3px 7px;2633}2634.peach-history-empty {2635  font-family: "IBM Plex Mono", monospace;2636  font-size: 0.625rem;2637  line-height: 1.45;2638  color: var(--peach-t2);2639  padding: 6px 8px;2640  border-radius: 7px;2641  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);2642  border: 1px solid color-mix(in srgb, var(--peach-accent) 8%, transparent);2643}26442645/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2646.peach-entry-body {2647  flex: 1;2648  overflow-y: auto;2649  overflow-x: hidden;2650  scrollbar-width: none;2651  -ms-overflow-style: none;2652  overscroll-behavior: contain;2653  display: grid;2654  gap: 10px;2655  align-content: start;2656  padding: 10px 20px 14px;2657  min-width: 0;2658  min-height: 0;2659}2660.peach-entry-body::-webkit-scrollbar { display: none; }26612662/* Type-toggle pills + inline note toolbar */2663.peach-new-type-row {2664  display: flex;2665  align-items: center;2666  gap: 6px;2667  margin-bottom: 2px;2668}2669.peach-new-type-btn {2670  background: transparent;2671  border: 1px solid var(--peach-t3);2672  border-radius: 12px;2673  padding: 3px 10px;2674  font-family: "IBM Plex Mono", monospace;2675  font-size: 0.5625rem;2676  letter-spacing: 0.12em;2677  text-transform: uppercase;2678  color: var(--peach-t2);2679  cursor: pointer;2680  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2681}2682.peach-new-type-btn.is-active {2683  color: var(--peach-t0);2684  border-color: var(--peach-accent);2685  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2686}2687.peach-new-type-btn:not(.is-active):hover {2688  color: var(--peach-t1);2689  border-color: var(--peach-t2);2690}26912692/* Editable title */2693.peach-new-title-wrap { margin: 0 0 2px; }2694.peach-new-title-input {2695  background: transparent;2696  border: none;2697  outline: none;2698  width: 100%;2699  color: var(--peach-t0);2700  font-family: var(--font-display);2701  font-style: italic;2702  font-weight: 400;2703  font-size: 40px;2704  line-height: 0.95;2705  caret-color: var(--peach-accent);2706}2707.peach-new-title-input::placeholder { color: var(--peach-t2); }27082709/* Editable domain field */2710.peach-domain-edit-row {2711  display: flex;2712  align-items: center;2713  gap: 6px;2714}27152716.peach-domain-edit-row .peach-domain-value--edit {2717  flex: 1;2718  width: 0;2719}27202721.peach-domain-url-btn {2722  flex-shrink: 0;2723  background: transparent;2724  border: none;2725  cursor: pointer;2726  color: var(--peach-t3);2727  padding: 2px 3px;2728  display: flex;2729  align-items: center;2730  line-height: 0;2731  border-radius: 3px;2732  transition: color 120ms ease;2733}27342735.peach-domain-url-btn:hover {2736  color: var(--peach-accent);2737}27382739.peach-domain-value--edit {2740  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2741  font-size: 0.625rem;2742  font-style: italic;2743  letter-spacing: 0.12em;2744  color: var(--peach-t1);2745  background: transparent;2746  border: none;2747  border-bottom: 1px solid var(--peach-t3);2748  outline: none;2749  width: 100%;2750  padding: 2px 0;2751  caret-color: var(--peach-accent);2752  transition: border-color 140ms ease, color 140ms ease;2753}2754.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2755.peach-domain-value--edit:focus {2756  border-bottom-color: rgba(240, 232, 216, 0.28);2757  color: var(--peach-t0);2758}27592760/* Editable field values (username, password, totp) */2761.peach-field-value--edit {2762  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2763  font-size: 0.8125rem;2764  color: var(--peach-t0);2765  background: transparent;2766  border: none;2767  border-bottom: 1px solid var(--peach-t3);2768  outline: none;2769  flex: 1;2770  min-width: 0;2771  padding: 3px 0;2772  caret-color: var(--peach-accent);2773  transition: border-color 140ms ease, color 140ms ease;2774}2775.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2776.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2777.peach-field-value--edit:focus {2778  border-bottom-color: rgba(240, 232, 216, 0.28);2779  color: var(--peach-t0);2780}27812782/* "+ add optional field" links */2783.peach-entry-add-links {2784  display: flex;2785  gap: 12px;2786  flex-wrap: wrap;2787  margin-top: -2px;2788}2789.peach-add-field-link {2790  background: transparent;2791  border: none;2792  padding: 0;2793  cursor: pointer;2794  font-family: "IBM Plex Mono", monospace;2795  font-size: 0.5625rem;2796  letter-spacing: 0.1em;2797  text-transform: uppercase;2798  color: var(--peach-t2);2799  transition: color 140ms ease;2800}2801.peach-add-field-link:hover { color: var(--peach-accent); }28022803/* ── New entry form (legacy classes) ────────────────────────────────── */2804.peach-new-body {2805  flex: 1;2806  overflow-y: auto;2807  padding: 10px 20px 14px;2808}2809.peach-new-name-input {2810  background: transparent;2811  border: none;2812  outline: none;2813  width: 100%;2814  color: var(--peach-t0);2815  font-family: var(--font-display);2816  font-style: italic;2817  font-weight: 400;2818  font-size: 40px;2819  line-height: 0.95;2820  caret-color: var(--peach-accent);2821}2822.peach-new-name-input::placeholder { color: var(--peach-t2); }2823.peach-new-field-input {2824  background: transparent;2825  border: none;2826  outline: none;2827  flex: 1;2828  min-width: 0;2829  caret-color: var(--peach-accent);2830}2831.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }28322833/* ── Canary card ── */2834.peach-canary-card {2835  border: 1px solid rgba(217, 160, 48, 0.2);2836  background: rgba(217, 160, 48, 0.03);2837  border-radius: 8px;2838  padding: 12px;2839}28402841.peach-canary-settings-header {2842  display: flex;2843  align-items: center;2844  justify-content: space-between;2845  cursor: pointer;2846  user-select: none;2847}28482849.peach-canary-card .peach-label {2850  color: rgba(217, 160, 48, 0.85);2851}28522853.peach-canary-card .peach-new-field-input {2854  border-color: rgba(217, 160, 48, 0.25);2855}28562857.peach-canary-card .peach-new-field-input:focus {2858  border-color: rgba(217, 160, 48, 0.5);2859}28602861.peach-canary-body {2862  margin-top: 12px;2863  display: flex;2864  flex-direction: column;2865  gap: 10px;2866}28672868.peach-canary-explainer {2869  display: flex;2870  gap: 10px;2871  padding: 10px 12px;2872  border-radius: 10px;2873  background: rgba(217, 160, 48, 0.06);2874  border: 1px solid rgba(217, 160, 48, 0.22);2875  margin-bottom: 4px;2876}28772878.peach-canary-explainer-icon {2879  font-size: 1rem;2880  flex-shrink: 0;2881  line-height: 1.2;2882}28832884.peach-canary-explainer-title {2885  font-family: var(--font-ui);2886  font-size: 0.6875rem;2887  font-weight: 500;2888  color: rgba(217, 160, 48, 0.9);2889  margin: 0 0 3px;2890}28912892.peach-canary-explainer-copy {2893  font-family: var(--font-ui);2894  font-size: 0.625rem;2895  color: var(--peach-t2);2896  line-height: 1.55;2897  margin: 0;2898}28992900.peach-canary-hint {2901  font-size: 0.625rem;2902  color: var(--peach-t2);2903  font-family: Inter, system-ui, sans-serif;2904  line-height: 1.5;2905  margin-top: 4px;2906}29072908.peach-canary-actions-row {2909  display: flex;2910  align-items: center;2911  gap: 8px;2912}29132914.peach-canary-test-btn {2915  border-color: rgba(217, 160, 48, 0.3);2916  color: rgba(217, 160, 48, 0.85);2917}29182919.peach-canary-test-result {2920  font-size: 0.625rem;2921  font-family: Inter, system-ui, sans-serif;2922}29232924.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2925.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }29262927.peach-canary-badge {2928  display: flex;2929  position: relative;2930  z-index: 1;2931  align-items: center;2932  gap: 5px;2933  padding: 4px 10px;2934  background: rgba(217, 160, 48, 0.12);2935  border: 1px solid rgba(217, 160, 48, 0.35);2936  border-radius: 6px;2937  margin-bottom: 6px;2938  width: fit-content;2939}29402941.peach-canary-badge-label {2942  font-size: 0.625rem;2943  letter-spacing: 0.06em;2944  color: rgba(217, 160, 48, 0.9);2945  font-family: var(--font-ui);2946  text-transform: uppercase;2947}29482949.peach-canary-badge-icon {2950  font-size: 0.6875rem;2951}29522953.peach-canary-suppress-row {2954  display: flex;2955  align-items: center;2956  gap: 8px;2957  padding: 6px 10px;2958  background: rgba(217, 160, 48, 0.08);2959  border-radius: 6px;2960  margin-bottom: 8px;2961}29622963.peach-canary-suppress-label {2964  font-size: 0.6875rem;2965  color: rgba(217, 160, 48, 0.85);2966  cursor: pointer;2967  font-family: var(--font-ui);2968  letter-spacing: 0.04em;2969}29702971.peach-regen-panel {2972  position: relative;2973  z-index: 1;2974  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2975  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2976  border-radius: 8px;2977  padding: 12px;2978  margin-bottom: 8px;2979}29802981.peach-regen-panel-header {2982  display: flex;2983  align-items: center;2984  justify-content: space-between;2985  margin-bottom: 10px;2986}29872988.peach-regen-panel-title {2989  font-size: 0.6875rem;2990  font-weight: 600;2991  letter-spacing: 0.06em;2992  text-transform: uppercase;2993  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2994}29952996.peach-regen-output {2997  background: rgba(0, 0, 0, 0.2);2998  border-radius: 6px;2999  padding: 10px;3000  margin-bottom: 10px;3001  font-family: var(--font-mono);3002  font-size: 0.8125rem;3003  word-break: break-all;3004  color: var(--peach-t1);3005}30063007.peach-regen-actions {3008  display: flex;3009  gap: 6px;3010}30113012.peach-regen-actions--spaced {3013  margin-bottom: 8px;3014}30153016.peach-regen-action-grow {3017  flex: 1;3018}30193020.peach-regen-copy-btn {3021  padding: 0 8px;3022}30233024.peach-regen-success {3025  position: relative;3026  z-index: 1;3027  background: rgba(40, 180, 80, 0.1);3028  border: 1px solid rgba(40, 180, 80, 0.3);3029  border-radius: 8px;3030  padding: 10px 12px;3031  margin-bottom: 8px;3032  display: flex;3033  align-items: center;3034  gap: 8px;3035  font-size: 0.6875rem;3036  color: rgba(40, 180, 80, 0.9);3037}30383039/* ── Note editor overlay ── */3040.peach-note-editor {3041  position: absolute;3042  inset: 0;3043  z-index: 200;3044  display: flex;3045  flex-direction: column;3046  background:3047    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),3048    var(--peach-bg);3049  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;3050}30513052.peach-note-editor-header {3053  display: flex;3054  align-items: center;3055  gap: 10px;3056  padding: 14px 16px 10px;3057  border-bottom: 1px solid var(--peach-t3);3058  flex-shrink: 0;3059}30603061.peach-note-editor-back {3062  background: transparent;3063  border: none;3064  cursor: pointer;3065  color: var(--peach-t2);3066  padding: 4px 6px;3067  border-radius: 6px;3068  display: flex;3069  align-items: center;3070  transition: color 120ms ease, background 120ms ease;3071  flex-shrink: 0;3072}3073.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }30743075.peach-note-editor-label {3076  flex: 1;3077  font-family: var(--font-display);3078  font-style: italic;3079  font-size: 0.9375rem;3080  color: var(--peach-t1);3081  letter-spacing: 0.02em;3082}30833084.peach-note-editor-save-btn {3085  background: transparent;3086  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);3087  border-radius: 8px;3088  color: var(--peach-accent);3089  font-family: "IBM Plex Mono", monospace;3090  font-size: 0.625rem;3091  letter-spacing: 0.06em;3092  text-transform: uppercase;3093  padding: 3px 10px;3094  cursor: pointer;3095  transition: background 120ms ease, border-color 120ms ease;3096}3097.peach-note-editor-save-btn:hover:not(:disabled) {3098  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3099  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3100}3101.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }31023103.peach-note-toolbar {3104  display: flex;3105  align-items: center;3106  gap: 3px;3107  padding: 6px 14px 5px;3108  border-bottom: 1px solid var(--peach-t3);3109  flex-shrink: 0;3110}31113112.peach-note-tool-btn {3113  background: transparent;3114  border: 1px solid transparent;3115  border-radius: 5px;3116  color: var(--peach-t2);3117  font-family: "IBM Plex Mono", monospace;3118  font-size: 0.625rem;3119  letter-spacing: 0.04em;3120  padding: 2px 8px;3121  cursor: pointer;3122  line-height: 1.6;3123  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;3124}3125.peach-note-tool-btn:hover {3126  background: var(--peach-t4);3127  color: var(--peach-t0);3128  border-color: var(--peach-t3);3129}31303131.peach-note-tool-icon {3132  padding: 3px 7px;3133  display: inline-flex;3134  align-items: center;3135  justify-content: center;3136}31373138.peach-note-tool-divider {3139  width: 1px;3140  height: 14px;3141  background: var(--peach-t3);3142  margin: 0 4px;3143  flex-shrink: 0;3144}31453146.peach-note-editor-body {3147  flex: 1;3148  overflow-y: auto;3149  padding: 16px 20px 20px;3150  outline: none;3151  font-family: var(--font-display);3152  font-size: 1rem;3153  line-height: 1.75;3154  color: var(--peach-t0);3155  scrollbar-width: none;3156  word-break: break-word;3157}3158.peach-note-editor-body:empty::before {3159  content: "write your note…";3160  color: var(--peach-t3);3161  font-style: italic;3162  pointer-events: none;3163}31643165/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */3166.peach-note-editor-inline {3167  display: flex;3168  flex-direction: column;3169  flex: 1;3170  min-height: 0;3171}3172.peach-note-editor-body--inline {3173  flex: 1;3174  min-height: 0;3175  font-size: 0.9375rem;3176  padding: 10px 20px 14px;3177}31783179/* Full-width toolbar row inside the body (Add.tsx note type).3180   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */3181.peach-note-toolbar-body {3182  display: flex;3183  align-items: center;3184  gap: 3px;3185  padding: 5px 20px 4px;3186  margin: 2px -20px 0;3187  border-bottom: 1px solid var(--peach-t3);3188  flex-shrink: 0;3189}31903191/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)3192   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn3193   and .peach-note-tool-divider button-level styles. */3194.peach-note-toolbar-inline {3195  display: flex;3196  align-items: center;3197  gap: 3px;3198  margin-left: auto;3199  padding-left: 10px;3200  border-left: 1px solid var(--peach-t3);3201  min-height: 22px;3202}32033204/* Entry.tsx toolbar row (no tabs, toolbar only) */3205.peach-entry-note-toolbar-row {3206  display: flex;3207  align-items: center;3208  margin: 4px 0 6px;3209  position: relative;3210  z-index: 1;3211}3212.peach-entry-note-toolbar-row .peach-note-toolbar-inline {3213  border-left: none;3214  padding-left: 0;3215  margin-left: 0;3216}32173218/* Note body — fills available vertical space in Add.tsx and Entry.tsx */3219.peach-note-body {3220  display: flex;3221  flex-direction: column;3222  flex: 1;3223  min-height: 0;3224  margin: 4px 0 0;3225}3226.peach-entry-body--new .peach-note-body {3227  margin: 8px -20px 0;3228}32293230/* Add.tsx body is a grid by default; swap to a flex column when a note is3231   active so the note body can stretch and pin the tags row to the bottom. */3232.peach-entry-body--new:has(.peach-note-body) {3233  display: flex;3234  flex-direction: column;3235}32363237/* Rich content element styles (editor + display) */3238.peach-note-editor-body h2,3239.peach-note-content h2 {3240  font-family: var(--font-display);3241  font-size: 20px;3242  font-weight: 600;3243  font-style: italic;3244  color: var(--peach-t0);3245  margin: 6px 0 2px;3246  line-height: 1.3;3247}3248.peach-note-editor-body ul,3249.peach-note-content ul {3250  padding-left: 18px;3251  margin: 3px 0;3252  list-style: disc;3253}3254.peach-note-editor-body ol,3255.peach-note-content ol {3256  padding-left: 18px;3257  margin: 3px 0;3258  list-style: decimal;3259}3260.peach-note-editor-body li,3261.peach-note-content li { margin: 2px 0; }3262.peach-note-editor-body hr,3263.peach-note-content hr {3264  border: none;3265  border-top: 1px solid var(--peach-t3);3266  margin: 10px 0;3267}32683269/* font size elements from execCommand */3270.peach-note-editor-body font[size="1"],3271.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }3272.peach-note-editor-body font[size="2"],3273.peach-note-content font[size="2"] { font-size: 0.8125rem; }3274.peach-note-editor-body font[size="3"],3275.peach-note-content font[size="3"] { font-size: 1rem; }3276.peach-note-editor-body font[size="4"],3277.peach-note-content font[size="4"] { font-size: 20px; }3278.peach-note-editor-body font[size="5"],3279.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }32803281/* bold / italic inside the editor and note display */3282.peach-note-editor-body b, .peach-note-editor-body strong,3283.peach-note-content b, .peach-note-content strong { font-weight: 700; }3284.peach-note-editor-body em, .peach-note-editor-body i,3285.peach-note-content em, .peach-note-content i { font-style: italic; }32863287/* note display — rendered HTML, no pre-wrap */3288.peach-note-content {3289  overflow: auto;3290  max-height: 340px;3291  word-break: break-word;3292}32933294/* ── Note textarea ── */3295.peach-note-textarea {3296  width: 100%;3297  min-height: 180px;3298  max-height: 280px;3299  resize: vertical;3300  background: var(--peach-t4);3301  border: 1px solid var(--peach-t3);3302  border-radius: 8px;3303  padding: 10px 12px;3304  font-family: "IBM Plex Mono", monospace;3305  font-size: 0.75rem;3306  line-height: 1.7;3307  color: var(--peach-t1);3308  outline: none;3309  transition: border-color 150ms ease;3310}33113312.peach-note-textarea:focus {3313  border-color: var(--peach-t2);3314}33153316.peach-note-char-count {3317  font-family: "IBM Plex Mono", monospace;3318  font-size: 0.5625rem;3319  color: var(--peach-t3);3320  text-align: right;3321  margin-top: 4px;3322  letter-spacing: 0.1em;3323}33243325/* ── Field input baseline ── */3326.peach-new-field-input {3327  width: 100%;3328  background: transparent;3329  border: none;3330  border-bottom: 1px solid var(--peach-t3);3331  padding: 4px 0;3332  color: var(--peach-t1);3333  font-family: "IBM Plex Mono", monospace;3334  font-size: 0.8125rem;3335  outline: none;3336  transition: border-color 150ms ease;3337}33383339.peach-new-field-input:focus {3340  border-bottom-color: var(--peach-t0);3341  color: var(--peach-t0);3342}33433344.peach-new-name-input {3345  width: 100%;3346  background: transparent;3347  border: none;3348  border-bottom: 1px solid var(--peach-t3);3349  padding: 6px 0;3350  font-family: var(--font-display);3351  font-style: italic;3352  font-size: 28px;3353  color: var(--peach-t0);3354  outline: none;3355  transition: border-color 150ms ease;3356}33573358.peach-new-name-input:focus {3359  border-bottom-color: var(--peach-t1);3360}33613362.peach-new-name-input::placeholder {3363  color: var(--peach-t2);3364  font-style: italic;3365}33663367.peach-new-field-input::placeholder {3368  color: var(--peach-t3);3369}33703371/* ── Demo entrance animation ── */3372#hd-shell {3373  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3374}3375@keyframes hd-shell-enter {3376  from { opacity: 0; transform: scale(0.96) translateY(16px); }3377  to   { opacity: 1; transform: scale(1) translateY(0); }3378}33793380/* ── Keyframes ── */3381@keyframes peach-char-enter {3382  from { opacity: 0; transform: translateY(0.22em); }3383  to   { opacity: 1; transform: translateY(0); }3384}3385@keyframes peach-content-enter {3386  from { opacity: 0.96; transform: translateY(4px); }3387  to   { opacity: 1; transform: translateY(0); }3388}3389@keyframes peach-content-exit {3390  from { opacity: 1; transform: translateY(0); }3391  to   { opacity: 0.92; transform: translateY(-3px); }3392}3393@keyframes peach-screen-enter {3394  from { opacity: 0; transform: translateY(14px); }3395  to   { opacity: 1; transform: translateY(0); }3396}3397@keyframes peach-shell-fade-in {3398  from { opacity: 0; }3399  to   { opacity: 1; }3400}3401@keyframes peach-veil-in {3402  from { opacity: 0; }3403  to   { opacity: 1; }3404}3405@keyframes peach-lock-settle {3406  0%   { transform: scale(0.9); }3407  65%  { transform: scale(1.08); }3408  100% { transform: scale(1); }3409}3410@keyframes peach-copy-confirm {3411  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3412  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); }3413}3414@keyframes peach-copy-retreat {3415  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); }3416  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3417}3418@keyframes peach-copy-flood {3419  from { opacity: 0; transform: scaleX(0.15); }3420  to   { opacity: 1; transform: scaleX(1); }3421}3422@keyframes peach-copy-icon-settle {3423  from  { transform: scale(0.84); }3424  70%   { transform: scale(1.08); }3425  to    { transform: scale(1); }3426}3427@keyframes peach-copy-sheen-retreat {3428  from { opacity: 1; transform: scaleX(1); }3429  to   { opacity: 0; transform: scaleX(0.15); }3430}3431@keyframes peach-copy-drain {3432  from { width: 100%; }3433  to   { width: 0; }3434}3435@keyframes peach-shake {3436  0%, 100% { transform: translateX(0); }3437  20%      { transform: translateX(-6px); }3438  40%      { transform: translateX(6px); }3439  60%      { transform: translateX(-4px); }3440  80%      { transform: translateX(4px); }3441}34423443@keyframes pip-pulse {3444  0% { transform: scale(1); }3445  40% { transform: scale(2.2); }3446  100% { transform: scale(1); }3447}344834493450/* ── Password generator ── */3451.peach-pwgen-body {3452  flex: 1; overflow-y: auto;3453  display: flex; flex-direction: column;3454}3455.peach-policy-badge {3456  display: flex; align-items: center;3457  padding: 6px 20px 0;3458  font-size: 0.625rem; font-family: Inter, sans-serif;3459  color: var(--peach-t2); letter-spacing: 0.04em;3460}3461.peach-pwgen-display {3462  padding: 14px 20px 12px;3463  border-bottom: 1px solid var(--peach-t3);3464  display: flex; align-items: flex-start; gap: 10px;3465}3466.peach-pwgen-display-row {3467  display: flex;3468  align-items: flex-start;3469  gap: 8px;3470  padding-bottom: 8px;3471  border-bottom: 1px solid var(--peach-t3);3472}3473.peach-pwgen-output {3474  flex: 1; min-width: 0; margin: 0;3475  font-family: "IBM Plex Mono", monospace;3476  font-size: 0.8125rem; color: var(--peach-t0);3477  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3478  white-space: normal;3479  padding: 10px 12px;3480  background: var(--peach-t4);3481  border-radius: 6px;3482  min-height: 36px;3483}3484.peach-pwgen-output-display {3485  flex: 1;3486  min-width: 0;3487  margin: 0;3488  font-family: var(--font-display);3489  font-style: italic;3490  font-weight: 300;3491  font-size: 32px;3492  line-height: 1.05;3493  color: var(--peach-t0);3494  word-break: break-all;3495  overflow-wrap: break-word;3496  white-space: normal;3497  letter-spacing: 0.02em;3498}3499.peach-pwgen-display-actions {3500  display: flex;3501  flex-direction: column;3502  gap: 4px;3503  flex-shrink: 0;3504  margin-top: 2px;3505}3506.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3507.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3508.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3509.peach-pwgen-len-num {3510  font-family: "IBM Plex Mono", monospace;3511  font-size: 0.75rem; color: var(--peach-accent);3512}3513.peach-pwgen-len-num--edit {3514  cursor: text;3515  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3516}3517.peach-pwgen-len-input {3518  font-family: "IBM Plex Mono", monospace;3519  font-size: 0.75rem;3520  color: var(--peach-accent);3521  background: transparent;3522  border: none;3523  border-bottom: 1px solid var(--peach-accent);3524  outline: none;3525  width: 32px;3526  text-align: right;3527  padding: 0;3528}3529.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3530.peach-pwgen-toggles { display: flex; flex-direction: column; }3531.peach-pwgen-charset-pills {3532  display: flex;3533  gap: 6px;3534  flex-wrap: wrap;3535}3536.peach-pwgen-pill {3537  padding: 4px 11px;3538  border-radius: 999px;3539  border: 1px solid var(--peach-t3);3540  background: transparent;3541  color: var(--peach-t2);3542  font-family: "IBM Plex Mono", monospace;3543  font-size: 0.5625rem;3544  letter-spacing: 0.08em;3545  cursor: pointer;3546  transition: all 150ms ease;3547}3548.peach-pwgen-pill.is-on {3549  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3550  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3551  color: var(--peach-accent);3552}3553.peach-pwgen-pill:not(.is-on):hover {3554  color: var(--peach-t1);3555  border-color: var(--peach-t2);3556}3557.peach-pwgen-use-btn {3558  width: 100%;3559  min-height: 34px;3560  border-radius: 8px;3561  margin-top: 2px;3562}3563.peach-generator-constraint-note {3564  font-family: 'IBM Plex Mono', monospace;3565  font-size: 10px;3566  color: var(--peach-t3);3567  letter-spacing: 0.04em;3568  margin: 0;3569  transition: opacity 200ms ease;3570}3571.peach-pwgen-toggle-row {3572  display: flex; align-items: center; justify-content: space-between;3573  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3574}3575.peach-pwgen-toggle-row:last-child { border-bottom: none; }3576.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }35773578/* Peach popup should not expose native scrollbars on internal panels. */3579.peach-settings-body,3580.peach-new-body,3581.peach-pwgen-body,3582.lock-screen,3583.peach-import-preview {3584  scrollbar-width: none;3585  -ms-overflow-style: none;3586  overscroll-behavior: contain;3587}3588.peach-settings-body::-webkit-scrollbar,3589.peach-new-body::-webkit-scrollbar,3590.peach-pwgen-body::-webkit-scrollbar,3591.lock-screen::-webkit-scrollbar,3592.peach-import-preview::-webkit-scrollbar {3593  width: 0;3594  height: 0;3595  display: none;3596}35973598.lock-screen {3599  height: 100%;3600  min-height: 100%;3601  overflow-y: auto;3602  padding: 18px 18px 16px;3603  gap: 14px;3604  grid-template-rows: auto auto auto 1fr auto;3605  align-content: stretch;3606  position: relative;3607  isolation: isolate;3608}3609.peach-screen.lock-screen--vault-stage {3610  display: flex;3611  flex-direction: column;3612  justify-content: flex-start;3613  gap: 18px;3614  padding: 20px 18px 18px;3615  overflow: hidden;3616}3617.peach-screen.lock-screen--vault-stage .peach-lock-panel {3618  margin-top: 0;3619}3620.lock-screen--onboarding {3621  display: flex;3622  flex-direction: column;3623  gap: 12px;3624  justify-content: flex-start;3625}36263627.lock-screen::before {3628  content: "";3629  position: absolute;3630  inset: 12px 18px auto auto;3631  width: 160px;3632  height: 160px;3633  border-radius: 999px;3634  background:3635    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%);3636  filter: blur(6px);3637  opacity: 0.7;3638  pointer-events: none;3639  z-index: 0;3640}36413642.peach-lock-rune-string {3643  flex: 1;3644  display: flex;3645  align-items: center;3646  justify-content: center;3647  gap: 6px;3648  font-family: PeachScript, monospace;3649  font-size: 0.8125rem;3650  letter-spacing: 0.05em;3651  pointer-events: none;3652  user-select: none;3653  position: relative;3654  z-index: 1;3655}36563657.peach-lock-rune-string span {3658  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3659  text-shadow:3660    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3661    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3662  transition: color 0.9s ease, text-shadow 0.9s ease;3663}36643665.peach-lock-rune-string span.is-glowing {3666  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3667  text-shadow:3668    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3669    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3670}36713672.lock-screen-header {3673  display: flex;3674  align-items: center;3675  justify-content: space-between;3676  position: relative;3677  z-index: 1;3678}36793680.lock-password-input.shake {3681  animation: peach-shake 300ms ease-in-out;3682}36833684.peach-hint-error {3685  color: rgba(220, 80, 60, 0.92);3686}36873688.peach-onboarding-headline {3689  margin: 0;3690  font-family: var(--font-display);3691  font-size: 35px;3692  line-height: 0.88;3693  font-style: italic;3694  font-weight: 400;3695  max-width: 252px;3696}36973698.peach-lock-copy {3699  display: grid;3700  gap: 8px;3701  position: relative;3702  z-index: 1;3703}37043705.peach-lock-copy--onboarding {3706  gap: 10px;3707}37083709.peach-lock-hero {3710  position: relative;3711  z-index: 1;3712  display: grid;3713  gap: 8px;3714  min-height: 0;3715  padding: 4px 2px 0;3716  border: none;3717  border-radius: 0;3718  background: transparent;3719  box-shadow: none;3720}3721.peach-lock-hero-art {3722  position: absolute;3723  right: -8px;3724  top: -6px;3725  width: 120px;3726  height: 120px;3727  display: flex;3728  align-items: center;3729  justify-content: center;3730  pointer-events: none;3731  opacity: 0.12;3732  filter: saturate(0.9);3733}3734.peach-lock-hero-mark {3735  width: 100%;3736  height: 100%;3737}3738/* Peach body stays brand-peach across every accent — we don't want a3739   green or blue peach when sage/sky is selected. Leaf + vein keep the3740   sage tint because a real peach has a sage leaf. In the new brand-kit3741   mark the leaf is path 1 and the vein stroke is path 2; the body and3742   back-lobe (paths 3 + 4) must stay untouched. */3743.peach-lock-hero-mark path:nth-child(1) {3744  fill: rgba(123, 144, 96, 0.88);3745}3746.peach-lock-hero-mark path:nth-child(2) {3747  stroke: rgba(94, 122, 66, 0.95);3748}3749.peach-lock-hero > *:not(.peach-lock-hero-art) {3750  position: relative;3751  z-index: 1;3752}37533754.peach-lock-eyebrow {3755  display: inline-flex;3756  align-items: center;3757  width: fit-content;3758  padding: 4px 9px;3759  border-radius: 999px;3760  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3761  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3762  color: var(--peach-t0);3763  font-family: "IBM Plex Mono", monospace;3764  font-size: 0.5rem;3765  letter-spacing: 0.18em;3766  text-transform: uppercase;3767}37683769.peach-lock-label-row {3770  display: flex;3771  align-items: center;3772  justify-content: space-between;3773  margin-bottom: 0;3774}37753776.peach-lock-reveal-btn {3777  display: inline-flex;3778  align-items: center;3779  gap: 4px;3780  background: none;3781  border: none;3782  cursor: pointer;3783  font-family: "IBM Plex Mono", monospace;3784  font-size: 0.5625rem;3785  letter-spacing: 0.06em;3786  color: var(--peach-t2);3787  padding: 2px 0;3788  transition: color 150ms ease;3789}37903791.peach-lock-reveal-btn:hover {3792  color: var(--peach-t1);3793}37943795.peach-lock-warning {3796  color: rgba(220, 80, 60, 0.85) !important;3797  line-height: 1.5;3798}37993800.peach-onboarding-cards {3801  display: grid;3802  gap: 8px;3803  position: relative;3804  z-index: 1;3805}38063807.peach-lock-panel {3808  position: relative;3809  z-index: 1;3810  display: grid;3811  gap: 9px;3812  padding: 14px 16px 15px;3813  border-radius: 18px;3814  border: 1px solid var(--peach-t3);3815  background:3816    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3817  box-shadow:3818    inset 0 1px 0 rgba(240, 232, 216, 0.04),3819    0 12px 28px rgba(0, 0, 0, 0.12);3820}38213822/* Glass surface — lock panel and settings groups */3823.peach-glass {3824  background: rgba(26, 20, 16, 0.65);3825  border: 1px solid rgba(255, 255, 255, 0.08);3826  border-radius: 12px;3827  backdrop-filter: blur(12px) saturate(1.4);3828  -webkit-backdrop-filter: blur(12px) saturate(1.4);3829}38303831@supports not (backdrop-filter: blur(1px)) {3832  .peach-glass {3833    background: rgba(26, 20, 16, 0.92);3834    border: 1px solid rgba(255, 255, 255, 0.10);3835    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3836  }3837}38383839.light .peach-glass,3840[data-theme="light"] .peach-glass {3841  background: rgba(240, 233, 223, 0.72);3842  border: 1px solid rgba(26, 18, 8, 0.08);3843  backdrop-filter: blur(12px) saturate(1.2);3844  -webkit-backdrop-filter: blur(12px) saturate(1.2);3845}38463847@supports not (backdrop-filter: blur(1px)) {3848  .light .peach-glass,3849  [data-theme="light"] .peach-glass {3850    background: rgba(240, 233, 223, 0.97);3851    border: 1px solid rgba(26, 18, 8, 0.10);3852  }3853}38543855/* Lock panel keeps its own border-radius over the generic glass token */3856.peach-lock-panel.peach-glass {3857  border-radius: 18px;3858  background: rgba(26, 20, 16, 0.65);3859  border: 1px solid rgba(255, 255, 255, 0.08);3860  box-shadow:3861    inset 0 1px 0 rgba(255, 255, 255, 0.05),3862    0 12px 28px rgba(0, 0, 0, 0.3);3863}38643865.light .peach-lock-panel.peach-glass,3866[data-theme="light"] .peach-lock-panel.peach-glass {3867  background: rgba(240, 233, 223, 0.82);3868  border: 1px solid rgba(26, 18, 8, 0.08);3869  box-shadow:3870    inset 0 1px 0 rgba(255, 255, 255, 0.4),3871    0 8px 24px rgba(80, 56, 32, 0.15);3872}38733874@supports not (backdrop-filter: blur(1px)) {3875  .peach-lock-panel.peach-glass {3876    background: rgba(26, 20, 16, 0.92);3877    box-shadow:3878      inset 0 1px 0 rgba(255, 255, 255, 0.05),3879      0 12px 28px rgba(0, 0, 0, 0.4);3880  }3881  .light .peach-lock-panel.peach-glass,3882  [data-theme="light"] .peach-lock-panel.peach-glass {3883    background: rgba(240, 233, 223, 0.98);3884  }3885}38863887.peach-lock-panel--secondary {3888  gap: 12px;3889}38903891.peach-lock-panel-header {3892  display: flex;3893  align-items: baseline;3894  justify-content: space-between;3895  gap: 12px;3896}38973898.peach-lock-option-grid {3899  display: grid;3900  gap: 10px;3901}39023903.peach-lock-option {3904  width: 100%;3905  display: grid;3906  gap: 6px;3907  padding: 14px 15px;3908  border-radius: 16px;3909  border: 1px solid rgba(240, 232, 216, 0.08);3910  background: rgba(240, 232, 216, 0.02);3911  color: var(--peach-t0);3912  text-align: left;3913  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3914}39153916.peach-lock-option:hover {3917  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3918  background: rgba(240, 232, 216, 0.04);3919  transform: translateY(-1px);3920}39213922.peach-lock-option-title {3923  font-size: 0.75rem;3924  color: var(--peach-t0);3925}39263927.peach-lock-option-copy {3928  font-size: 0.6875rem;3929  line-height: 1.55;3930  color: var(--peach-t1);3931}39323933.peach-onboarding-stack {3934  margin-top: 2px;3935}3936.peach-lock-panel-footer {3937  display: grid;3938  gap: 6px;3939  margin-top: 2px;3940  padding-top: 10px;3941  border-top: 1px solid rgba(240, 232, 216, 0.06);3942}39433944/* ── Restore tab view ─────────────────────────────────────────────────────3945   Tab-based restore screen replacing the old three-card picker. */39463947.peach-restore-tabview {3948  overflow: hidden;3949}39503951.peach-restore-tabcard {3952  flex: 1;3953  display: flex;3954  flex-direction: column;3955  gap: 0;3956  padding: 0;3957  overflow: hidden;3958  cursor: default;3959  user-select: none;3960  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3961}39623963/* ── Tab selector ─────────────────────────────────────────────────────── */39643965.peach-restore-tabs {3966  display: flex;3967  justify-content: space-around;3968  padding: 14px 10px 10px;3969  border-bottom: 1px solid var(--peach-t3);3970  gap: 2px;3971  overflow: hidden;3972  scrollbar-width: none;3973}3974.peach-restore-tabs::-webkit-scrollbar { display: none; }39753976.peach-restore-tab {3977  background: none;3978  border: none;3979  cursor: pointer;3980  padding: 3px 2px;3981  font-family: 'Cormorant Garamond', Georgia, serif;3982  font-style: italic;3983  font-size: 11px;3984  color: var(--peach-t2);3985  transition: color 150ms ease, text-shadow 150ms ease;3986  flex: 1;3987  min-width: 0;3988  text-align: center;3989  white-space: nowrap;3990  overflow: hidden;3991  text-overflow: ellipsis;3992}3993.peach-restore-tab:hover {3994  color: var(--peach-accent);3995  text-shadow:3996    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3997    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3998}3999.peach-restore-tab.is-active {4000  color: var(--peach-accent);4001  text-shadow:4002    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),4003    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);4004}40054006/* ── Content area ─────────────────────────────────────────────────────── */40074008.peach-restore-content {4009  padding: 16px 16px 14px;4010  display: flex;4011  flex-direction: column;4012  gap: 8px;4013  overflow: hidden;4014  scrollbar-width: none;4015  flex: 1;4016}4017.peach-restore-content::-webkit-scrollbar { display: none; }4018.peach-restore-content > * {4019  overflow: hidden;4020  scrollbar-width: none;4021}4022.peach-restore-content > *::-webkit-scrollbar { display: none; }40234024/* ── Shared tab inner layout ──────────────────────────────────────────── */40254026.peach-rt-symbols,4027.peach-rt-csv,4028.peach-rt-phone,4029.peach-restore-codex {4030  display: flex;4031  flex-direction: column;4032  gap: 8px;4033  overflow: hidden;4034}40354036.peach-restore-codex {4037  min-height: 0;4038  justify-content: center;4039}40404041.peach-restore-codex-title {4042  margin: 0;4043  font-family: var(--font-display);4044  font-size: 1rem;4045  font-style: italic;4046  color: var(--peach-t0);4047}40484049.peach-restore-codex-copy {4050  margin: 0;4051  font-size: 0.75rem;4052  line-height: 1.5;4053  color: var(--peach-t1);4054}40554056.peach-restore-codex-button {4057  width: 100%;4058  justify-content: center;4059}40604061.peach-rt-submit {4062  width: 100%;4063}40644065.peach-rt-error {4066  margin: 0;4067  font-size: 0.6875rem;4068  color: var(--peach-breach);4069  line-height: 1.4;4070}40714072/* ── PeachScript tab ──────────────────────────────────────────────────── */40734074.peach-restore-symbols-textarea {4075  font-family: 'PeachScript', monospace;4076  font-size: 13px;4077  line-height: 1.9;4078  letter-spacing: 0.1em;4079  word-break: break-all;4080  resize: none;4081  width: 100%;4082  min-height: 56px;4083  max-height: 72px;4084  overflow: hidden;4085  scrollbar-width: none;4086  -ms-overflow-style: none;4087  box-sizing: border-box;4088  padding: 6px 8px;4089  border-radius: 8px;4090  border: 1px solid var(--peach-t3);4091  background: rgba(240, 232, 216, 0.03);4092  color: var(--peach-t0);4093}4094.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }4095.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }40964097.peach-restore-symbols-pass {4098  width: 100%;4099  box-sizing: border-box;4100  padding: 7px 10px;4101  border-radius: 8px;4102  border: 1px solid var(--peach-t3);4103  background: rgba(240, 232, 216, 0.03);4104  color: var(--peach-t0);4105  font-size: 0.8125rem;4106}4107.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }4108.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }41094110.peach-rt-divider {4111  text-align: center;4112  font-size: 0.6875rem;4113  color: var(--peach-t2);4114  font-style: italic;4115}41164117.peach-rt-file-label {4118  width: 100%;4119  justify-content: center;4120}41214122.peach-rt-anim-canvas {4123  width: 100%;4124  height: 180px;4125  border-radius: 10px;4126  overflow: hidden;4127  display: block;4128}41294130/* ── CSV tab ──────────────────────────────────────────────────────────── */41314132.peach-rt-csv-sources {4133  margin: 0;4134  font-size: 0.6875rem;4135  color: var(--peach-t2);4136  line-height: 1.5;4137  text-align: center;4138}41394140.peach-rt-csv-warning {4141  margin: 0;4142  font-family: "IBM Plex Mono", monospace;4143  font-size: 0.5625rem;4144  letter-spacing: 0.12em;4145  color: var(--peach-breach);4146  text-align: center;4147}41484149/* ── From Phone tab ───────────────────────────────────────────────────── */41504151.peach-rt-phone-code {4152  margin: 0;4153  text-align: center;4154  font-family: "IBM Plex Mono", monospace;4155  font-size: 22px;4156  letter-spacing: 0.18em;4157  color: var(--peach-t0);4158}41594160.peach-rt-phone-qr {4161  display: block;4162  width: 96px;4163  height: 96px;4164  margin: 0 auto;4165  border-radius: 6px;4166  image-rendering: pixelated;4167  overflow: hidden;4168}41694170.peach-rt-phone-hint {4171  margin: 0;4172  font-size: 0.6875rem;4173  color: var(--peach-t2);4174  line-height: 1.55;4175  text-align: center;4176}41774178/* ── Intro popup ──────────────────────────────────────────────────────── */41794180.peach-restore-intro-overlay {4181  position: absolute;4182  inset: 0;4183  z-index: 100;4184  display: flex;4185  align-items: center;4186  justify-content: center;4187  padding: 20px;4188  background: rgba(12, 10, 6, 0.7);4189  backdrop-filter: blur(4px);4190  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4191}41924193.peach-restore-intro-card {4194  width: 100%;4195  display: flex;4196  flex-direction: column;4197  gap: 12px;4198  padding: 22px 20px 20px;4199  border-radius: 16px;4200  border: 1px solid var(--peach-t3);4201  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));4202  backdrop-filter: blur(4px);4203  -webkit-backdrop-filter: blur(4px);4204  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);4205}42064207.peach-restore-intro-headline {4208  margin: 0;4209  font-family: var(--font-display);4210  font-style: italic;4211  font-size: 20px;4212  font-weight: 400;4213  color: var(--peach-t0);4214}42154216.peach-restore-intro-body {4217  display: flex;4218  flex-direction: column;4219  gap: 8px;4220}4221.peach-restore-intro-body p {4222  margin: 0;4223  font-size: 0.75rem;4224  color: var(--peach-t1);4225  line-height: 1.5;4226}42274228.peach-restore-intro-btn {4229  width: 100%;4230  margin-top: 4px;4231}42324233/* Snapshot restore panel */4234.peach-snapshot-panel {4235  gap: 10px;4236  overflow-y: auto;4237  max-height: 340px;4238}4239.peach-snapshot-list {4240  display: flex;4241  flex-direction: column;4242  gap: 4px;4243}4244.peach-snapshot-row {4245  display: flex;4246  align-items: center;4247  justify-content: space-between;4248  width: 100%;4249  padding: 8px 10px;4250  border-radius: 8px;4251  border: 1px solid rgba(240, 232, 216, 0.07);4252  background: transparent;4253  cursor: pointer;4254  transition: border-color 120ms, background 120ms;4255  text-align: left;4256  gap: 8px;4257}4258.peach-snapshot-row:hover {4259  border-color: rgba(240, 232, 216, 0.14);4260  background: rgba(240, 232, 216, 0.03);4261}4262.peach-snapshot-row.is-selected {4263  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4264  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);4265}4266.peach-snapshot-time {4267  font-size: 11.5px;4268  color: var(--peach-t0);4269  flex: 1;4270}4271.peach-snapshot-count {4272  font-family: "IBM Plex Mono", monospace;4273  font-size: 0.625rem;4274  color: var(--peach-t2);4275  flex-shrink: 0;4276}4277.peach-snapshot-confirm {4278  display: flex;4279  flex-direction: column;4280  gap: 8px;4281  padding-top: 10px;4282  border-top: 1px solid rgba(240, 232, 216, 0.06);4283}4284.peach-snapshot-warning {4285  display: flex;4286  align-items: flex-start;4287  gap: 6px;4288  font-size: 10.5px;4289  color: rgba(220, 80, 60, 0.85);4290  line-height: 1.55;4291}4292.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }4293.peach-snapshot-confirm-row {4294  display: flex;4295  gap: 6px;4296  align-items: center;4297}4298.peach-snapshot-restore-btn {4299  width: 100%;4300}4301.peach-lock-hero--unlock .peach-lock-hero-art {4302  width: 112px;4303  height: 112px;4304  right: 0;4305  top: 2px;4306  opacity: 0.1;4307}43084309.peach-card {4310  border: 1px solid var(--peach-t3);4311  border-radius: 18px;4312  background:4313    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4314  box-shadow:4315    inset 0 0 0 1px var(--peach-border-accent),4316    inset 0 1px 0 rgba(240, 232, 216, 0.04),4317    0 12px 32px rgba(0, 0, 0, 0.14);4318  overflow: hidden;4319}43204321.peach-card-active {4322  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4323  box-shadow:4324    inset 0 1px 0 rgba(240, 232, 216, 0.05),4325    0 16px 38px rgba(0, 0, 0, 0.18),4326    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4327}43284329.peach-card-disabled {4330  opacity: 0.72;4331}43324333.peach-card-header {4334  width: 100%;4335  padding: 13px 16px 11px;4336  background: transparent;4337  color: var(--peach-t0);4338  display: flex;4339  justify-content: space-between;4340  align-items: center;4341  text-align: left;4342  font-size: 0.75rem;4343}43444345.peach-card-body {4346  padding: 0 16px 16px;4347  display: grid;4348  gap: 9px;4349}43504351.peach-card-tag {4352  color: var(--peach-t2);4353  font-family: "IBM Plex Mono", monospace;4354  font-size: 0.5625rem;4355  letter-spacing: 0.12em;4356  text-transform: uppercase;4357}43584359.peach-empty-copy {4360  display: grid;4361  gap: 6px;4362  color: var(--peach-t1);4363  font-size: 0.8125rem;4364}43654366.peach-lock-submit {4367  width: 100%;4368  box-shadow:4369    0 1px 0 rgba(255,255,255,0.10) inset,4370    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4371    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4372    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4373}43744375.peach-lock-secondary {4376  width: 100%;4377  border-color: var(--peach-t3);4378  background: rgba(240, 232, 216, 0.02);4379}43804381.peach-lock-secondary:hover {4382  background: rgba(240, 232, 216, 0.04);4383}43844385.peach-lock-note {4386  max-width: none;4387  line-height: 1.55;4388  margin: 0;4389}43904391.peach-overlay-action {4392  font-size: 0.625rem;4393  padding: 4px 8px;4394  letter-spacing: 0.06em;4395  min-width: 44px;4396  text-align: center;4397}43984399.peach-inline-action {4400  flex-shrink: 0;4401  font-size: 0.5625rem;4402  letter-spacing: 0.1em;4403  text-transform: uppercase;4404  padding: 4px 7px;4405}4406.peach-password-toggle-btn {4407  display: inline-flex;4408  align-items: center;4409  justify-content: center;4410  min-width: 30px;4411  min-height: 26px;4412  padding: 0 7px;4413  border: 1px solid var(--peach-t3);4414  border-radius: 999px;4415  background: rgba(240, 232, 216, 0.04);4416  color: var(--peach-t2);4417  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4418}4419.peach-password-toggle-btn:hover {4420  border-color: var(--peach-t2);4421  color: var(--peach-t0);4422  background: rgba(240, 232, 216, 0.06);4423}44244425.peach-new-textarea {4426  width: 100%;4427  min-height: 88px;4428  resize: vertical;4429  border: 0;4430  outline: none;4431  background: transparent;4432  color: var(--peach-t1);4433  font-family: "IBM Plex Mono", monospace;4434  font-size: 0.75rem;4435  line-height: 1.65;4436  caret-color: var(--peach-accent);4437}44384439.peach-new-textarea::placeholder {4440  color: var(--peach-t2);4441  opacity: 0.7;4442}44434444.peach-settings-actions {4445  display: grid;4446  gap: 8px;4447}44484449.peach-sync-section-label {4450  font-size: 0.6875rem;4451  color: var(--peach-t2);4452  text-transform: uppercase;4453  letter-spacing: 0.05em;4454}44554456.peach-sync-network-note {4457  margin: 0 0 6px;4458  font-size: 0.75rem;4459  color: var(--peach-t2);4460  line-height: 1.4;4461}44624463.peach-settings-row--tappable {4464  background: none;4465  border: none;4466  width: 100%;4467  text-align: left;4468  cursor: pointer;4469  color: var(--peach-t1);4470  font-size: 0.8125rem;4471}4472.peach-settings-row--tappable:hover {4473  color: var(--peach-t0);4474}44754476.peach-sync-pro-hint {4477  display: flex;4478  flex-direction: column;4479  align-items: flex-start;4480  gap: 8px;4481  padding: 12px 0 4px;4482}44834484.peach-sync-device-row {4485  display: flex;4486  justify-content: space-between;4487  align-items: center;4488  padding: 6px 0;4489  border-bottom: 1px solid var(--peach-t3);4490}44914492.peach-sync-device-info {4493  display: flex;4494  flex-direction: column;4495  gap: 2px;4496}44974498.peach-sync-device-name {4499  font-size: 0.8125rem;4500  color: var(--peach-t0);4501}45024503.peach-sync-device-meta {4504  font-size: 0.6875rem;4505  color: var(--peach-t2);4506}45074508.peach-sync-status-dot {4509  display: inline-block;4510  width: 8px;4511  height: 8px;4512  border-radius: 50%;4513  vertical-align: middle;4514}45154516.peach-sync-remove-btn {4517  color: var(--peach-breach);4518}45194520.peach-sync-advanced-row {4521  display: flex;4522  justify-content: space-between;4523  align-items: center;4524  padding: 6px 0;4525  gap: 12px;4526}45274528.peach-sync-advanced-info {4529  display: flex;4530  flex-direction: column;4531  gap: 2px;4532  flex: 1;4533}45344535.peach-sync-advanced-name {4536  font-size: 0.8125rem;4537  color: var(--peach-t0);4538}45394540.peach-sync-reset-confirm {4541  display: flex;4542  flex-direction: column;4543  gap: 8px;4544  padding: 10px;4545  border: 1px solid var(--peach-breach);4546  border-radius: 10px;4547  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4548}45494550.peach-sync-reset-confirm-headline {4551  font-size: 0.8125rem;4552  font-weight: 600;4553  color: var(--peach-t0);4554  margin: 0;4555}45564557.peach-sync-reset-confirm-body {4558  font-size: 0.75rem;4559  color: var(--peach-t1);4560  margin: 0;4561  line-height: 1.4;4562}45634564.peach-btn--danger {4565  background: var(--peach-breach);4566  color: #fff;4567  border-color: var(--peach-breach);4568}4569.peach-btn--danger:hover:not(:disabled) {4570  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4571}4572.peach-btn--danger:disabled {4573  opacity: 0.55;4574  cursor: not-allowed;4575}45764577.peach-sync-hero-icon {4578  color: var(--peach-t1);4579  opacity: 0.85;4580}45814582.peach-import-preview {4583  margin-bottom: 12px;4584  max-height: 152px;4585  overflow-y: auto;4586  border: 1px solid var(--peach-t3);4587  border-radius: 10px;4588  padding: 8px 10px;4589  display: grid;4590  gap: 8px;4591  background: rgba(240, 232, 216, 0.02);4592}45934594.peach-import-preview-row {4595  display: flex;4596  justify-content: space-between;4597  gap: 10px;4598  font-size: 0.6875rem;4599  color: var(--peach-t1);4600}46014602.peach-import-preview-title {4603  color: var(--peach-t0);4604  flex: 1;4605  min-width: 0;4606  overflow: hidden;4607  text-overflow: ellipsis;4608  white-space: nowrap;4609}46104611.peach-import-preview-meta {4612  color: var(--peach-t2);4613  flex-shrink: 0;4614  max-width: 42%;4615  overflow: hidden;4616  text-overflow: ellipsis;4617  white-space: nowrap;4618}46194620.peach-import-preview-more {4621  color: var(--peach-t2);4622  font-size: 0.625rem;4623}46244625.peach-restore-copy {4626  margin: 0;4627  color: var(--peach-t1);4628  font-size: 0.6875rem;4629  line-height: 1.6;4630}46314632.peach-restore-warning {4633  padding: 10px 12px;4634  border-radius: 12px;4635  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4636  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4637  color: var(--peach-t0);4638  font-size: 0.6875rem;4639  line-height: 1.55;4640}46414642.peach-provider-chips {4643  display: flex;4644  flex-wrap: wrap;4645  gap: 6px;4646}46474648.peach-provider-chip {4649  display: inline-flex;4650  align-items: center;4651  padding: 5px 8px;4652  border-radius: 999px;4653  border: 1px solid var(--peach-t3);4654  background: rgba(240, 232, 216, 0.02);4655  color: var(--peach-t1);4656  font-family: "IBM Plex Mono", monospace;4657  font-size: 0.5rem;4658  letter-spacing: 0.08em;4659  text-transform: uppercase;4660}46614662.peach-restore-file,4663.peach-restore-input {4664  width: 100%;4665  border-radius: 10px;4666  border: 1px solid var(--peach-t3);4667  background: var(--peach-s2);4668  color: var(--peach-t0);4669  font-size: 0.75rem;4670}46714672.peach-restore-file {4673  padding: 9px 10px;4674}46754676.peach-restore-file::file-selector-button {4677  margin-right: 10px;4678  padding: 7px 10px;4679  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4680  border-radius: 999px;4681  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4682  color: var(--peach-t0);4683  font-size: 0.625rem;4684  letter-spacing: 0.08em;4685  text-transform: uppercase;4686  cursor: pointer;4687}46884689.peach-restore-input {4690  padding: 10px 12px;4691}46924693.peach-auth-grid {4694  display: grid;4695  gap: 10px;4696}46974698.peach-import-summary {4699  color: var(--peach-t1);4700  font-size: 0.75rem;4701  line-height: 1.6;4702  margin-bottom: 12px;4703}47044705.peach-restore-error {4706  color: rgba(220, 80, 60, 0.95);4707  font-size: 0.75rem;4708  line-height: 1.55;4709}47104711.peach-passkey-card {4712  max-width: 400px;4713  margin: auto 16px;4714  align-self: center;4715  width: calc(100% - 32px);4716}47174718/* Center the approval card vertically inside the overlay-view (which sets4719 * flex-direction: column without justify-content). Without this, the card4720 * sits at the top with a tall empty band below — looks unfinished on the4721 * 320px popup. */4722.peach-overlay-view:has(.peach-passkey-card) {4723  justify-content: center;4724}47254726.peach-pro-badge {4727  padding: 2px 6px;4728  border-radius: 999px;4729  font-family: var(--font-ui);4730  font-size: 0.625rem;4731  letter-spacing: 0.08em;4732  text-transform: uppercase;4733  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4734  color: var(--peach-accent);4735}47364737/* ── Shortcuts rebind table ─────────────────────────────────── */4738.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4739.peach-shortcut-row {4740  display: flex;4741  align-items: center;4742  gap: 10px;4743  padding: 6px 0;4744}4745.peach-shortcut-row-label {4746  flex: 1;4747  font-size: 0.75rem;4748  color: var(--peach-t0);4749}4750.peach-shortcut-chip {4751  min-width: 64px;4752  padding: 4px 10px;4753  border-radius: 6px;4754  border: 1px solid var(--peach-t3);4755  background: var(--peach-input-bg, var(--surface-card));4756  color: var(--peach-t0);4757  font-family: var(--font-mono);4758  font-size: 0.6875rem;4759  letter-spacing: 0.04em;4760  cursor: pointer;4761  text-align: center;4762  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4763}4764.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4765.peach-shortcut-chip.is-custom {4766  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4767  color: var(--peach-accent);4768}4769.peach-shortcut-chip.is-capturing {4770  border-color: var(--peach-accent);4771  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4772  color: var(--peach-accent);4773  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4774}4775@keyframes peach-shortcut-capture-pulse {4776  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4777  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4778}4779.peach-shortcut-reset {4780  background: transparent;4781  border: none;4782  cursor: pointer;4783  color: var(--peach-t2);4784  padding: 4px 6px;4785  border-radius: 5px;4786  font-size: 0.875rem;4787  line-height: 1;4788  transition: color 120ms ease, background 120ms ease;4789}4790.peach-shortcut-reset:hover {4791  color: var(--peach-t0);4792  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4793}4794.peach-shortcuts-conflict {4795  margin: 4px 0 0;4796  padding: 8px 10px;4797  border-radius: 7px;4798  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4799  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4800  font-family: var(--font-mono);4801  font-size: 0.6875rem;4802  color: var(--peach-t0);4803}48044805/* ── Help dialog overlay (? to open) ────────────────────────── */4806.peach-shortcuts-help-backdrop {4807  position: fixed;4808  inset: 0;4809  background: rgba(0, 0, 0, 0.55);4810  backdrop-filter: blur(2px);4811  display: flex;4812  align-items: center;4813  justify-content: center;4814  z-index: 1000;4815  animation: peach-help-fade-in 140ms ease forwards;4816}4817@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4818.peach-shortcuts-help-card {4819  width: min(320px, 92vw);4820  max-height: 80vh;4821  overflow-y: auto;4822  border-radius: 14px;4823  border: 1px solid var(--peach-t3);4824  background: var(--peach-bg);4825  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4826  padding: 16px 18px 18px;4827  display: flex;4828  flex-direction: column;4829  gap: 12px;4830}4831.peach-shortcuts-help-head {4832  display: flex; align-items: center; justify-content: space-between;4833}4834.peach-shortcuts-help-head h3 {4835  margin: 0;4836  font-family: var(--font-display);4837  font-style: italic;4838  font-weight: 400;4839  font-size: 22px;4840  color: var(--peach-t0);4841}4842.peach-shortcuts-help-close {4843  background: transparent;4844  border: none;4845  color: var(--peach-t2);4846  cursor: pointer;4847  font-size: 0.875rem;4848  padding: 4px 8px;4849  border-radius: 5px;4850}4851.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4852.peach-shortcuts-help-body ul {4853  list-style: none; padding: 0; margin: 4px 0 12px;4854  display: grid; gap: 8px;4855}4856.peach-shortcuts-help-body li {4857  display: flex; align-items: center; justify-content: space-between; gap: 12px;4858  font-size: 0.75rem; color: var(--peach-t0);4859}4860.peach-shortcuts-help-body kbd {4861  font-family: var(--font-mono);4862  font-size: 0.6875rem;4863  padding: 3px 8px;4864  border-radius: 6px;4865  background: var(--surface-card);4866  border: 1px solid var(--peach-t3);4867  color: var(--peach-accent);4868  letter-spacing: 0.04em;4869}48704871/* ── Pro promo on Account screen ────────────────────────────── */4872.peach-pro-promo {4873  position: relative;4874  border-radius: 14px;4875  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4876  background:4877    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4878    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4879    var(--surface-card);4880  overflow: hidden;4881  margin-bottom: 14px;4882}4883.peach-pro-promo-glow {4884  position: absolute;4885  inset: -40% -20% auto auto;4886  width: 220px; height: 220px;4887  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4888  pointer-events: none;4889  filter: blur(8px);4890}4891.peach-pro-promo-inner {4892  position: relative;4893  padding: 18px 18px 16px;4894}4895.peach-pro-promo-title {4896  font-family: var(--font-display);4897  font-style: italic;4898  font-weight: 400;4899  font-size: 28px;4900  line-height: 1;4901  letter-spacing: -0.005em;4902  color: var(--peach-t0);4903  margin: 0 0 4px;4904}4905.peach-pro-promo-tagline {4906  font-family: var(--font-mono);4907  font-size: 0.625rem;4908  letter-spacing: 0.06em;4909  color: var(--peach-t2);4910  margin: 0 0 14px;4911}4912.peach-pro-promo-list {4913  list-style: none;4914  margin: 0 0 16px;4915  padding: 0;4916  display: grid;4917  gap: 9px;4918}4919.peach-pro-promo-list li {4920  display: flex;4921  align-items: flex-start;4922  gap: 9px;4923  font-size: 0.75rem;4924  color: var(--peach-t1);4925  line-height: 1.4;4926}4927.peach-pro-promo-list svg {4928  width: 14px;4929  height: 14px;4930  flex-shrink: 0;4931  color: var(--peach-accent);4932  margin-top: 2px;4933}4934.peach-pro-promo-list span {4935  color: var(--peach-t0);4936}4937.peach-pro-promo-cta {4938  width: 100%;4939  background: var(--peach-accent);4940  color: #fff;4941  border: none;4942  padding: 9px 12px;4943  border-radius: 9px;4944  font-size: 0.75rem;4945  font-weight: 500;4946  font-family: var(--font-ui);4947  letter-spacing: 0.02em;4948  text-decoration: none;4949  display: inline-flex;4950  align-items: center;4951  justify-content: center;4952  cursor: pointer;4953  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4954  box-shadow: 0 2px 16px var(--peach-glow);4955}4956.peach-pro-promo-cta:hover {4957  filter: brightness(1.07);4958  box-shadow: 0 4px 24px var(--peach-glow);4959  transform: translateY(-1px);4960}4961.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }49624963.peach-pro-or-divider {4964  display: flex;4965  align-items: center;4966  gap: 10px;4967  margin: 4px 0 12px;4968  font-family: var(--font-mono);4969  font-size: 0.625rem;4970  letter-spacing: 0.06em;4971  color: var(--peach-t2);4972  text-transform: uppercase;4973}4974.peach-pro-or-divider::before,4975.peach-pro-or-divider::after {4976  content: "";4977  flex: 1;4978  height: 1px;4979  background: var(--peach-t3);4980}49814982.peach-loading {4983  position: absolute;4984  inset: 0;4985  display: flex;4986  align-items: center;4987  justify-content: center;4988  background: var(--bg);4989  animation: peach-loading-pulse 1.2s ease-in-out infinite;4990}49914992@keyframes peach-loading-pulse {4993  0%, 100% { opacity: 0.6; }4994  50% { opacity: 1; }4995}49964997/* ── Health Dashboard ─────────────────────────────────────────────────── */4998.peach-health-body {4999  flex: 1;5000  overflow-y: auto;5001  display: flex;5002  flex-direction: column;5003  /* Hide the platform scrollbar — every other scrollable surface in the5004   * popup hides it; the Health view was the one outlier and it ruined the5005   * polish. Behavior unchanged, just no rail rendered. */5006  scrollbar-width: none;5007  -ms-overflow-style: none;5008}5009.peach-health-body::-webkit-scrollbar { display: none; }50105011/* Loading screen for the Vault Health view. The advanced report computation5012 * can run for a few seconds on a large vault — without a clear loading5013 * screen the surface looked broken (the entry view bleeds through the5014 * empty body). Centered glyph + title + copy + indeterminate progress bar. */5015.peach-health-loading-screen {5016  flex: 1;5017  display: flex;5018  flex-direction: column;5019  align-items: center;5020  justify-content: center;5021  gap: 14px;5022  padding: 32px 28px;5023  text-align: center;5024}50255026.peach-health-loading-glyph {5027  width: 48px;5028  height: 48px;5029  display: flex;5030  align-items: center;5031  justify-content: center;5032  border-radius: 14px;5033  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5034  color: var(--peach-accent);5035}50365037.peach-health-loading-title {5038  margin: 0;5039  font-family: var(--font-display);5040  font-style: italic;5041  font-weight: 300;5042  font-size: 19px;5043  line-height: 1.2;5044  color: var(--peach-t0);5045}50465047.peach-health-loading-copy {5048  margin: 0;5049  max-width: 240px;5050  font-size: 0.75rem;5051  line-height: 1.55;5052  color: var(--peach-t2);5053}50545055.peach-health-loading-track {5056  width: 200px;5057  height: 3px;5058  margin-top: 6px;5059  border-radius: 999px;5060  background: rgba(240, 232, 216, 0.06);5061  overflow: hidden;5062}50635064.peach-health-loading-fill {5065  width: 40%;5066  height: 100%;5067  border-radius: inherit;5068  background: linear-gradient(5069    90deg,5070    transparent 0%,5071    var(--peach-accent) 50%,5072    transparent 100%5073  );5074  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;5075}50765077@keyframes peach-health-loading-sweep {5078  0%   { transform: translateX(-100%); }5079  100% { transform: translateX(350%); }5080}50815082[data-motion="reduce"] .peach-health-loading-fill,5083[data-motion="reduce"] .peach-health-loading-glyph svg path {5084  animation: none;5085}50865087.peach-health-summary {5088  padding: 10px 16px 6px;5089  font-family: "IBM Plex Mono", monospace;5090  font-size: 0.6875rem;5091}5092.peach-health-summary-warn { color: rgba(220,80,60,0.9); }5093.peach-health-summary-ok { color: var(--peach-t2); }50945095.peach-health-check-row {5096  padding: 0 16px 10px;5097}5098.peach-health-check-btn {5099  width: 100%;5100  display: flex;5101  align-items: center;5102  justify-content: center;5103}51045105.peach-health-sections {5106  flex: 1;5107  display: flex;5108  flex-direction: column;5109}51105111.peach-health-section {5112  border-bottom: 1px solid var(--peach-t3);5113}51145115.peach-health-section-header {5116  width: 100%;5117  display: flex;5118  align-items: center;5119  justify-content: space-between;5120  padding: 9px 16px;5121  background: transparent;5122  cursor: pointer;5123  color: var(--peach-t0);5124}51255126.peach-health-section-title-row {5127  display: flex;5128  align-items: center;5129  gap: 8px;5130}51315132.peach-health-count-badge {5133  display: inline-flex;5134  align-items: center;5135  justify-content: center;5136  min-width: 20px;5137  height: 18px;5138  padding: 0 5px;5139  border-radius: 999px;5140  background: rgba(220,80,60,0.15);5141  border: 1px solid rgba(220,80,60,0.25);5142  font-family: "IBM Plex Mono", monospace;5143  font-size: 0.5625rem;5144  color: rgba(220,80,60,0.9);5145}51465147.peach-health-section-title {5148  font-family: "IBM Plex Mono", monospace;5149  font-size: 0.6875rem;5150  text-transform: uppercase;5151  letter-spacing: 0.1em;5152  color: var(--peach-t1);5153}51545155.peach-health-chevron {5156  color: var(--peach-t2);5157  transition: transform 200ms ease;5158  flex-shrink: 0;5159}5160.peach-health-chevron.is-expanded {5161  transform: rotate(180deg);5162}51635164.peach-health-section-body {5165  padding: 0 16px 10px;5166  display: flex;5167  flex-direction: column;5168  gap: 4px;5169}51705171.peach-health-row {5172  display: flex;5173  align-items: flex-start;5174  justify-content: space-between;5175  gap: 8px;5176  padding: 6px 8px;5177  border-radius: 8px;5178  background: rgba(240,232,216,0.02);5179}51805181.peach-health-row-info {5182  flex: 1;5183  min-width: 0;5184  display: flex;5185  flex-direction: column;5186  gap: 2px;5187}51885189.peach-health-row-name {5190  font-family: var(--font-display);5191  font-size: 0.9375rem;5192  font-style: italic;5193  font-weight: 400;5194  color: var(--peach-t0);5195  white-space: nowrap;5196  overflow: hidden;5197  text-overflow: ellipsis;5198}51995200.peach-health-row-meta {5201  font-family: "IBM Plex Mono", monospace;5202  font-size: 0.5625rem;5203  color: var(--peach-t2);5204  letter-spacing: 0.05em;5205}52065207.peach-health-fix-btn {5208  font-size: 0.5625rem;5209  letter-spacing: 0.08em;5210  text-transform: uppercase;5211  padding: 4px 7px;5212  flex-shrink: 0;5213  display: flex;5214  align-items: center;5215}52165217.peach-health-empty {5218  font-family: "IBM Plex Mono", monospace;5219  font-size: 0.625rem;5220  color: var(--peach-t2);5221  padding: 6px 0;5222}52235224.peach-health-loading {5225  font-family: "IBM Plex Mono", monospace;5226  font-size: 0.625rem;5227  color: var(--peach-t2);5228  padding: 6px 0;5229  display: flex;5230  align-items: center;5231  gap: 6px;5232}52335234.peach-health-loading::before {5235  content: "";5236  width: 10px;5237  height: 10px;5238  border: 1.5px solid var(--peach-t3);5239  border-top-color: var(--peach-accent);5240  border-radius: 50%;5241  animation: peach-spin 600ms linear infinite;5242}52435244@keyframes peach-spin {5245  to { transform: rotate(360deg); }5246}52475248.peach-spinner {5249  width: 32px;5250  height: 32px;5251  border: 2px solid var(--peach-s2);5252  border-top-color: var(--peach-accent);5253  border-radius: 50%;5254  margin: 0 auto 16px;5255  animation: peach-spin 0.8s linear infinite;5256}52575258.peach-progress-screen {5259  text-align: center;5260  padding: 32px 16px;5261}52625263.peach-progress-screen-title {5264  font-size: 0.8125rem;5265  color: var(--peach-t0);5266  margin-bottom: 16px;5267}52685269.peach-progress-screen-stage {5270  font-size: 0.6875rem;5271  color: var(--peach-t2);5272  min-height: 14px;5273}52745275.peach-progress-screen-note {5276  font-size: 0.625rem;5277  color: var(--peach-t2);5278  margin-top: 8px;5279}52805281/* Pairing commits the vault key before the first entry sync. Keep that5282   implementation detail off-screen until the paired source records a real,5283   durable sync completion. */5284.peach-initial-sync {5285  position: relative;5286  display: flex;5287  align-items: center;5288  justify-content: center;5289  overflow: hidden;5290}52915292.peach-initial-sync-card {5293  position: relative;5294  z-index: 1;5295  width: min(100%, 320px);5296  display: flex;5297  flex-direction: column;5298  align-items: center;5299  gap: 10px;5300  padding: 36px 26px;5301  text-align: center;5302}53035304.peach-initial-sync-mark {5305  width: 54px;5306  height: 54px;5307  display: flex;5308  align-items: center;5309  justify-content: center;5310  border-radius: 18px;5311  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5312  margin-bottom: 4px;5313}53145315.peach-initial-sync-mark svg {5316  width: 34px;5317  height: 34px;5318}53195320.peach-initial-sync-card h1 {5321  margin: 0;5322  color: var(--peach-t0);5323  font-family: var(--font-display);5324  font-size: 1.55rem;5325  font-style: italic;5326  font-weight: 400;5327}53285329.peach-initial-sync-card > p {5330  margin: 0;5331}53325333.peach-initial-sync-card #initial-sync-copy {5334  color: var(--peach-t1);5335  font-size: 0.78rem;5336  line-height: 1.55;5337}53385339.peach-initial-sync-progress {5340  width: 100%;5341  height: 3px;5342  overflow: hidden;5343  border-radius: 999px;5344  background: color-mix(in srgb, var(--peach-t0) 8%, transparent);5345  margin: 8px 0 2px;5346}53475348.peach-initial-sync-progress span {5349  display: block;5350  width: 42%;5351  height: 100%;5352  border-radius: inherit;5353  background: var(--peach-accent);5354  animation: peach-initial-sync-progress 1.4s cubic-bezier(0.2, 0, 0, 1) infinite;5355}53565357@keyframes peach-initial-sync-progress {5358  from { transform: translateX(-115%); }5359  to { transform: translateX(340%); }5360}53615362.peach-initial-sync-note {5363  color: var(--peach-t2);5364  font-size: 0.625rem;5365  line-height: 1.45;5366}53675368.peach-initial-sync-slow {5369  width: 100%;5370  display: flex;5371  flex-direction: column;5372  gap: 10px;5373  padding-top: 10px;5374  border-top: 1px solid var(--peach-border);5375}53765377.peach-initial-sync-slow p {5378  margin: 0;5379  color: var(--peach-t2);5380  font-size: 0.6875rem;5381  line-height: 1.45;5382}53835384.peach-initial-sync-slow .peach-btn {5385  width: 100%;5386}53875388@media (prefers-reduced-motion: reduce) {5389  .peach-initial-sync-progress span {5390    width: 100%;5391    opacity: 0.7;5392    animation: none;5393  }5394}53955396/* Tag chips */5397.peach-tag-chip {5398  display: inline-flex;5399  align-items: center;5400  gap: 4px;5401  padding: 3px 8px;5402  border-radius: 999px;5403  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5404  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5405  color: var(--peach-t0);5406  font-family: "IBM Plex Mono", monospace;5407  font-size: 0.625rem;5408  letter-spacing: 0.04em;5409}54105411.peach-tag-chip-remove {5412  background: transparent;5413  border: none;5414  color: inherit;5415  opacity: 0.6;5416  cursor: pointer;5417  padding: 0;5418  font-size: 0.75rem;5419  line-height: 1;5420}54215422.peach-tag-chip-remove:hover {5423  opacity: 1;5424}54255426/* Tag input */5427.peach-tag-input-wrap {5428  border-bottom: 1px solid var(--peach-t3);5429}54305431.peach-tag-suggestions {5432  display: flex;5433  flex-wrap: wrap;5434  gap: 4px;5435  padding: 6px 0;5436}54375438.peach-tag-suggestion {5439  padding: 2px 8px;5440  border-radius: 999px;5441  border: 1px solid var(--peach-t3);5442  background: var(--peach-s2);5443  color: var(--peach-t1);5444  font-family: "IBM Plex Mono", monospace;5445  font-size: 0.625rem;5446  cursor: pointer;5447  transition: border-color 80ms ease, background 80ms ease;5448}54495450.peach-tag-suggestion:hover {5451  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5452  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5453}54545455/* Identity suggestions — shown below username/email inputs in new-entry form */5456@keyframes peach-suggest-in {5457  from { opacity: 0; transform: translateY(-4px); }5458  to   { opacity: 1; transform: none; }5459}54605461.peach-identity-suggestions {5462  display: flex;5463  flex-direction: column;5464  gap: 1px;5465  margin-top: 4px;5466  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5467}54685469.peach-identity-filter-row {5470  display: flex;5471  align-items: center;5472  gap: 4px;5473  padding: 2px 0 5px;5474}54755476.peach-identity-collapse-btn {5477  margin-left: auto;5478  background: transparent;5479  border: none;5480  cursor: pointer;5481  color: var(--peach-t3);5482  padding: 2px 4px;5483  display: flex;5484  align-items: center;5485  line-height: 0;5486  border-radius: 3px;5487  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5488}54895490.peach-identity-collapse-btn:hover {5491  color: var(--peach-t1);5492}54935494.peach-identity-collapse-btn.is-collapsed {5495  transform: rotate(-90deg);5496}54975498.peach-identity-rows {5499  display: grid;5500  grid-template-rows: 1fr;5501  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5502}55035504.peach-identity-rows.is-collapsed {5505  grid-template-rows: 0fr;5506}55075508.peach-identity-rows-inner {5509  overflow-y: auto;5510  min-height: 0;5511  max-height: 148px;5512  scrollbar-width: thin;5513  scrollbar-color: var(--peach-t3) transparent;5514  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5515  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5516}55175518.peach-identity-rows-inner::-webkit-scrollbar {5519  width: 4px;5520}55215522.peach-identity-rows-inner::-webkit-scrollbar-track {5523  background: transparent;5524}55255526.peach-identity-rows-inner::-webkit-scrollbar-thumb {5527  background: var(--peach-t3);5528  border-radius: 2px;5529}55305531.peach-identity-filter-pill {5532  padding: 2px 7px;5533  border-radius: 999px;5534  border: 1px solid var(--peach-t3);5535  background: transparent;5536  color: var(--peach-t2);5537  font-family: "IBM Plex Mono", monospace;5538  font-size: 0.6rem;5539  cursor: pointer;5540  transition: border-color 80ms, background 80ms, color 80ms;5541}55425543.peach-identity-filter-pill.is-on {5544  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5545  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5546  color: var(--peach-accent);5547}55485549.peach-identity-suggestion {5550  display: flex;5551  align-items: center;5552  gap: 6px;5553  width: 100%;5554  padding: 4px 6px;5555  border-radius: 5px;5556  border: none;5557  background: transparent;5558  cursor: pointer;5559  text-align: left;5560  transition: background 80ms ease;5561}55625563.peach-identity-suggestion:hover,5564.peach-identity-suggestion:focus {5565  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5566  outline: none;5567}55685569.peach-identity-suggestion-value {5570  font-family: "IBM Plex Mono", monospace;5571  font-size: 0.7rem;5572  color: var(--peach-t1);5573  overflow: hidden;5574  text-overflow: ellipsis;5575  white-space: nowrap;5576  flex: 1;5577  min-width: 0;5578}55795580.peach-identity-suggestion-type {5581  font-family: "IBM Plex Mono", monospace;5582  font-size: 0.55rem;5583  font-weight: 600;5584  flex-shrink: 0;5585  padding: 1px 4px;5586  border-radius: 3px;5587}55885589.peach-identity-suggestion-type--email {5590  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5591  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5592}55935594.peach-identity-suggestion-type--username {5595  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5596  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5597}55985599.peach-identity-suggestion-meta {5600  font-family: "IBM Plex Mono", monospace;5601  font-size: 0.6rem;5602  color: var(--peach-t3);5603  flex-shrink: 0;5604}56055606/* Tag filter strip */5607.peach-tag-filter-strip {5608  border-bottom: 1px solid var(--peach-t3);5609  flex-shrink: 0;5610}56115612.peach-tag-filter-chip {5613  display: inline-flex;5614  align-items: center;5615  padding: 4px 10px;5616  border-radius: 999px;5617  border: 1px solid var(--peach-t3);5618  background: transparent;5619  color: var(--peach-t2);5620  font-family: "IBM Plex Mono", monospace;5621  font-size: 0.5625rem;5622  letter-spacing: 0.06em;5623  text-transform: uppercase;5624  cursor: pointer;5625  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5626  white-space: nowrap;5627}56285629.peach-tag-filter-chip:hover {5630  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5631  color: var(--peach-t1);5632}56335634.peach-tag-filter-chip.is-selected {5635  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5636  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5637  color: var(--peach-t0);5638}56395640/* ─────────────────────────────────────────────────────────────────────────5641   v1.4.12 additions5642   ─────────────────────────────────────────────────────────────────────── */56435644/* Sort bar */5645.peach-sort-bar {5646  display: flex;5647  align-items: center;5648  gap: 4px;5649  padding: 5px 12px;5650  border-bottom: 1px solid var(--peach-t3);5651  flex-shrink: 0;5652  overflow-x: auto;5653  scrollbar-width: none;5654}56555656.peach-sort-btn {5657  padding: 2px 9px;5658  border-radius: 999px;5659  border: 1px solid transparent;5660  background: transparent;5661  color: var(--peach-t2);5662  font-family: "IBM Plex Mono", monospace;5663  font-size: 0.5625rem;5664  letter-spacing: 0.07em;5665  text-transform: uppercase;5666  cursor: pointer;5667  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5668  white-space: nowrap;5669}56705671.peach-sort-btn:hover {5672  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5673  color: var(--peach-t1);5674}56755676.peach-sort-btn.is-active {5677  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5678  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5679  color: var(--peach-t0);5680}56815682.peach-sort-scope-btn {5683  padding-inline: 8px;5684  font-size: 0.53125rem;5685  letter-spacing: 0.05em;5686}56875688.peach-sort-domain-hint {5689  margin-left: auto;5690  font-family: "IBM Plex Mono", monospace;5691  font-size: 0.5625rem;5692  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5693  white-space: nowrap;5694  overflow: hidden;5695  text-overflow: ellipsis;5696  max-width: 110px;5697}56985699/* Tab-match badge on entry rows */5700.peach-tab-match-badge {5701  display: inline-block;5702  width: 6px;5703  height: 6px;5704  border-radius: 50%;5705  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5706  margin-left: 5px;5707  vertical-align: middle;5708  flex-shrink: 0;5709  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5710}57115712.peach-entry-row.is-tab-match {5713  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5714  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5715}57165717.peach-entry-row.is-tab-match:hover {5718  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5719}57205721/* Entry list stagger entrance */5722@keyframes peach-entry-fadein {5723  from { opacity: 0; transform: translateY(4px); }5724  to   { opacity: 1; transform: translateY(0); }5725}57265727.peach-vault-list .peach-entry-row {5728  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5729}57305731/* Button press micro-interaction */5732.peach-btn:active {5733  transform: scale(0.95);5734  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5735}57365737.peach-sort-btn:active,5738.peach-tag-filter-chip:active {5739  transform: scale(0.93);5740  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5741}57425743/* Password strength bar (Lock view + shared) */5744.peach-password-strength {5745  display: flex;5746  align-items: center;5747  gap: 8px;5748  margin-top: 6px;5749}57505751.peach-strength-bar {5752  flex: 1;5753  height: 3px;5754  border-radius: 2px;5755  background: var(--peach-t3);5756  overflow: hidden;5757}57585759.peach-strength-fill {5760  height: 100%;5761  border-radius: 2px;5762  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5763              background 300ms ease;5764}57655766.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5767.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5768.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5769.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }57705771.peach-strength-label {5772  font-family: "IBM Plex Mono", monospace;5773  font-style: italic;5774  font-size: 0.5625rem;5775  font-weight: 300;5776  letter-spacing: 0.06em;5777  color: var(--peach-t2);5778  min-width: 36px;5779  text-align: right;5780}57815782.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5783.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5784.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5785.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }57865787/* Duress form */5788.peach-duress-status {5789  padding: 2px 8px;5790  border-radius: 999px;5791  border: 1px solid var(--peach-t3);5792  font-family: "IBM Plex Mono", monospace;5793  font-size: 0.5625rem;5794  letter-spacing: 0.07em;5795  text-transform: uppercase;5796  color: var(--peach-t2);5797  flex-shrink: 0;5798}57995800.peach-duress-status.is-active {5801  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5802  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5803  color: var(--peach-t0);5804}58055806.peach-duress-form {5807  padding: 8px 0 4px;5808  display: flex;5809  flex-direction: column;5810  gap: 6px;5811}58125813.peach-duress-form .peach-label {5814  margin-top: 4px;5815}58165817.peach-duress-actions {5818  display: flex;5819  gap: 6px;5820  align-items: center;5821  margin-top: 4px;5822}58235824.peach-duress-actions .peach-btn:first-child {5825  margin-right: auto;5826}58275828/* Improved overlay spring entrance */5829.peach-overlay-view.ov-enter-up {5830  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5831}58325833@keyframes ov-enter-up-spring {5834  from { opacity: 0; transform: translateY(16px) scale(0.98); }5835  to   { opacity: 1; transform: translateY(0) scale(1); }5836}58375838.peach-overlay-view.ov-enter-right {5839  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5840}58415842@keyframes ov-enter-right-spring {5843  from { opacity: 0; transform: translateX(18px) scale(0.98); }5844  to   { opacity: 1; transform: translateX(0) scale(1); }5845}58465847/* ── Onboarding-mode restore screens (file import) ── */5848/* Used when MainImportView renders during onboarding (no vault yet).5849   Animates like a lock-screen transition. */5850.peach-lock-view {5851  position: absolute;5852  inset: 0;5853  display: flex;5854  flex-direction: column;5855  background:5856    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5857    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5858    var(--peach-bg);5859  z-index: 2;5860  overflow: hidden;5861  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5862}58635864.peach-lock-view-header {5865  display: flex;5866  align-items: center;5867  justify-content: space-between;5868  padding: 16px 18px 12px;5869  flex-shrink: 0;5870}58715872/* ───────── Settings: auto-lock select ───────── */5873.peach-settings-select {5874  font-family: "IBM Plex Mono", monospace;5875  font-size: 0.6875rem;5876  background: transparent;5877  border: 1px solid var(--peach-t3);5878  border-radius: 4px;5879  color: var(--peach-t1);5880  padding: 3px 6px;5881  cursor: pointer;5882  outline: none;5883}5884.peach-settings-select:focus {5885  border-color: var(--peach-accent);5886}58875888/* ───────── Duress status pill (new polished) ───────── */5889.peach-duress-status-pill {5890  font-family: "IBM Plex Mono", monospace;5891  font-size: 0.5625rem;5892  text-transform: uppercase;5893  letter-spacing: 0.12em;5894  padding: 2px 8px;5895  border-radius: 12px;5896  background: var(--peach-t3);5897  color: var(--peach-t2);5898  flex-shrink: 0;5899}5900.peach-duress-status-pill.is-active {5901  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5902  color: var(--peach-accent);5903}59045905/* ───────── Entry advanced disclosure (canary) ───────── */5906.peach-entry-advanced {5907  margin-top: 12px;5908  border-top: 1px solid var(--peach-t3);5909  padding-top: 10px;5910  position: relative;5911  z-index: 1;5912}5913.peach-entry-advanced-toggle {5914  display: flex;5915  align-items: center;5916  justify-content: space-between;5917  width: 100%;5918  background: transparent;5919  border: none;5920  cursor: pointer;5921  padding: 0;5922  color: var(--peach-t2);5923}5924.peach-canary-section {5925  margin-top: 10px;5926  display: grid;5927  gap: 6px;5928}59295930/* ───────── Import: merge/replace radio choices ───────── */5931.peach-import-choice {5932  display: flex;5933  align-items: flex-start;5934  gap: 10px;5935  padding: 8px 10px;5936  border: 1px solid var(--peach-t3);5937  border-radius: 10px;5938  cursor: pointer;5939  margin-bottom: 6px;5940  transition: border-color 120ms ease, background 120ms ease;5941}5942.peach-import-choice:hover {5943  border-color: var(--peach-accent);5944}5945.peach-import-choice input[type="radio"] {5946  margin-top: 3px;5947  accent-color: var(--peach-accent);5948  flex-shrink: 0;5949}5950.peach-import-choice-main {5951  display: flex;5952  flex-direction: column;5953  gap: 2px;5954  min-width: 0;5955}5956.peach-import-choice-label {5957  font-size: 0.75rem;5958  color: var(--peach-t0);5959}5960.peach-import-choice-sub {5961  font-size: 0.6875rem;5962  color: var(--peach-t2);5963  line-height: 1.5;5964}59655966/* ───────── Export: success confirmation strip ───────── */5967.peach-export-success {5968  display: flex;5969  align-items: flex-start;5970  gap: 10px;5971  padding: 12px;5972  border-radius: 12px;5973  border: 1px solid rgba(150, 175, 110, 0.3);5974  background: rgba(150, 175, 110, 0.08);5975  color: var(--peach-t0);5976  font-size: 0.75rem;5977  line-height: 1.55;5978}5979.peach-export-success-check {5980  color: rgba(150, 175, 110, 0.9);5981  font-size: 0.875rem;5982  flex-shrink: 0;5983}59845985/* ── Trash view ──────────────────────────────────────────────────────── */5986.peach-trash-entry-row {5987  display: flex;5988  align-items: center;5989  justify-content: space-between;5990  gap: 8px;5991  padding: 8px 0;5992  border-bottom: 1px solid var(--peach-border);5993}5994.peach-trash-entry-info {5995  flex: 1;5996  min-width: 0;5997  display: flex;5998  flex-direction: column;5999  gap: 2px;6000}6001.peach-trash-entry-title {6002  font-size: 0.8125rem;6003  color: var(--peach-t0);6004  overflow: hidden;6005  text-overflow: ellipsis;6006  white-space: nowrap;6007}6008.peach-trash-entry-meta {6009  font-family: var(--font-mono);6010  font-size: 0.5625rem;6011  color: var(--peach-t2);6012  letter-spacing: 0.04em;6013}6014.peach-trash-entry-actions {6015  display: flex;6016  align-items: center;6017  gap: 4px;6018  flex-shrink: 0;6019}6020.peach-trash-delete-btn {6021  background: transparent;6022  border: 0;6023  color: var(--peach-t3);6024  font-size: 1rem;6025  line-height: 1;6026  cursor: pointer;6027  padding: 2px 5px;6028  transition: color 0.15s;6029}6030.peach-trash-delete-btn:hover { color: var(--peach-breach); }6031.peach-trash-list {6032  overflow-y: auto;6033}6034.peach-trash-footer {6035  display: flex;6036  align-items: center;6037  gap: 8px;6038  padding: 8px 0 0;6039  border-top: 1px solid var(--peach-border);6040  margin-top: 4px;6041}6042.peach-trash-purge-all {6043  background: transparent;6044  border: 0;6045  color: var(--peach-t3);6046  font-size: 0.625rem;6047  cursor: pointer;6048  padding: 4px 0;6049  letter-spacing: 0.03em;6050  transition: color 0.2s;6051}6052.peach-trash-purge-all:hover { color: var(--peach-breach); }6053.peach-trash-purge-confirm-label {6054  font-size: 0.625rem;6055  color: var(--peach-t1);6056  flex: 1;6057}60586059/* ── Settings shortcuts grid ─────────────────────────────────────────── */6060.peach-shortcuts-grid {6061  display: grid;6062  grid-template-columns: auto 1fr;6063  gap: 6px 12px;6064  align-items: center;6065  padding: 4px 0;6066}6067.peach-shortcut-key {6068  font-family: var(--font-mono);6069  font-size: 0.625rem;6070  color: var(--peach-t0);6071  background: var(--peach-t3);6072  border-radius: 4px;6073  padding: 2px 6px;6074  white-space: nowrap;6075  text-align: center;6076}6077.peach-shortcut-desc {6078  font-size: 0.6875rem;6079  color: var(--peach-t1);6080}60816082/* ── Sort bar trash button ───────────────────────────────────────────── */6083.peach-sort-trash-btn {6084  display: flex;6085  align-items: center;6086  justify-content: center;6087  padding: 3px 5px;6088  background: transparent;6089  border: none;6090  cursor: pointer;6091  color: var(--peach-t2);6092  border-radius: 4px;6093  transition: color 140ms ease, background 140ms ease;6094}6095.peach-sort-trash-btn:hover {6096  color: var(--peach-t1);6097  background: var(--peach-t3);6098}6099.peach-sort-trash-btn.is-active {6100  color: var(--peach-accent);6101}61026103/* Accent color picker */6104.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }6105.peach-accent-picker {6106  display: flex;6107  flex-wrap: wrap;6108  gap: 7px;6109  padding: 2px 0;6110}6111.peach-accent-swatch {6112  width: 22px;6113  height: 22px;6114  border-radius: 50%;6115  border: 2px solid transparent;6116  cursor: pointer;6117  padding: 0;6118  transition: transform 100ms;6119  outline-offset: 2px;6120}6121.peach-accent-swatch:hover { transform: scale(1.15); }6122.peach-accent-swatch.is-active {6123  border-color: var(--peach-t0);6124  transform: scale(1.1);6125}61266127.peach-pill-group {6128  display: flex;6129  gap: 6px;6130}6131.peach-pill-group .peach-btn.is-active {6132  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);6133  border-color: var(--peach-accent);6134  color: var(--peach-t0);6135}61366137/* ── Card entry styles ───────────────────────────────────────── */6138.peach-card-number {6139  font-family: var(--peach-mono);6140  letter-spacing: 0.08em;6141}61426143.peach-card-network-badge {6144  font-size: 0.625rem;6145  padding: 1px 5px;6146  border-radius: 4px;6147  border: 0.5px solid var(--peach-border);6148  color: var(--peach-text-dim);6149  margin-left: 6px;6150  vertical-align: middle;6151}61526153.peach-card-expiry-row {6154  display: flex;6155  align-items: center;6156  gap: 8px;6157}61586159.peach-card-expiry-sep {6160  color: var(--peach-text-dim);6161}61626163/* ── Pro tier — upgrade screen ──────────────────────────────── */6164.peach-pro-mark {6165  font-size: 0.5625rem;6166  color: var(--peach-accent);6167  margin-left: 6px;6168  vertical-align: super;6169  opacity: 0.7;6170}61716172.peach-pro-mini-badge {6173  display: block;6174  font-size: 0.625rem;6175  font-style: italic;6176  color: var(--peach-accent);6177  letter-spacing: 0.04em;6178  margin-top: -2px;6179  padding-left: 2px;6180  opacity: 0.85;6181  text-align: center;6182}61836184.peach-wordmark-stack {6185  display: inline-flex;6186  flex-direction: column;6187  align-items: center;6188}61896190/* ── Pro tier — upgrade page ─────────────────────────────────── */6191/* ── Pro upgrade — redesigned editorial layout ─────────────────── */61926193.peach-pro-upgrade {6194  display: flex;6195  flex-direction: column;6196  align-items: stretch;6197  gap: 10px;6198  padding: 2px 2px 12px;6199}62006201.peach-pro-eyebrow {6202  margin: 0;6203  font-family: var(--font-ui);6204  font-size: 0.625rem;6205  font-weight: 500;6206  letter-spacing: 0.12em;6207  color: var(--peach-accent);6208}62096210.peach-pro-headline {6211  margin: 0;6212  font-family: var(--font-display, "Cormorant Garamond", serif);6213  font-size: 30px;6214  font-weight: 700;6215  font-style: normal;6216  line-height: 1.05;6217  color: var(--peach-t0);6218  letter-spacing: -0.01em;6219}6220.peach-pro-headline em {6221  font-style: italic;6222  font-weight: 400;6223  color: var(--peach-accent);6224}62256226.peach-pro-subtitle {6227  margin: 0;6228  font-size: 0.6875rem;6229  line-height: 1.5;6230  color: var(--peach-t1);6231}62326233/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6234.peach-pro-section-label {6235  margin: 6px 0 0;6236  font-family: var(--font-ui);6237  font-size: 0.5625rem;6238  font-weight: 500;6239  letter-spacing: 0.12em;6240  text-transform: uppercase;6241  color: var(--peach-t2);6242}62436244/* 2-column numbered feature grid */6245.peach-pro-grid {6246  display: grid;6247  grid-template-columns: 1fr 1fr;6248  border-top: 1px solid var(--peach-border);6249  border-left: 1px solid var(--peach-border);6250}62516252.peach-pro-grid-item {6253  display: flex;6254  flex-direction: column;6255  gap: 2px;6256  padding: 8px 9px;6257  border-right: 1px solid var(--peach-border);6258  border-bottom: 1px solid var(--peach-border);6259}62606261.peach-pro-grid-item--wide {6262  grid-column: 1 / -1;6263}62646265.peach-pro-grid-num {6266  font-family: var(--font-mono);6267  font-size: 0.5625rem;6268  color: var(--peach-accent);6269  letter-spacing: 0.06em;6270  opacity: 0.85;6271}62726273.peach-pro-grid-name {6274  font-size: 0.8125rem;6275  font-weight: 500;6276  color: var(--peach-t0);6277  line-height: 1.2;6278}62796280.peach-pro-grid-desc {6281  font-size: 0.625rem;6282  color: var(--peach-t1);6283  line-height: 1.4;6284}62856286.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6287  animation: peach-pulse-accent 600ms ease-out forwards;6288}62896290@keyframes peach-pulse-accent {6291  0%   { opacity: 1; transform: scale(1.2); }6292  100% { opacity: 0.85; transform: scale(1); }6293}62946295/* Actions */6296.peach-pro-upgrade-actions {6297  display: flex;6298  flex-direction: column;6299  align-items: stretch;6300  gap: 10px;6301}63026303.peach-pro-pricing {6304  margin: 0;6305  font-size: 1rem;6306  font-weight: 600;6307  color: var(--peach-t0);6308  letter-spacing: 0.01em;6309}6310.peach-pro-pricing-sub {6311  font-size: 0.75rem;6312  font-weight: 400;6313  color: var(--peach-t1);6314  letter-spacing: 0.02em;6315}63166317.peach-pro-upgrade-cta {6318  display: flex;6319  align-items: center;6320  justify-content: center;6321  text-decoration: none;6322  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6323  border: 1px solid var(--peach-accent);6324  border-radius: 10px;6325  color: var(--peach-accent);6326  font-family: var(--font-ui);6327  font-size: 0.8125rem;6328  font-weight: 600;6329  letter-spacing: 0.06em;6330  padding: 11px 16px;6331  transition: background 0.15s ease, color 0.15s ease;6332}6333.peach-pro-upgrade-cta:hover {6334  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6335}63366337/* Pairing's terminal entitlement fallback reuses the Peach Pro card's6338   editorial hierarchy without embedding the settings deck itself. */6339.peach-pair-pro-required {6340  width: 100%;6341  display: flex;6342  flex-direction: column;6343  align-items: stretch;6344  gap: 10px;6345  text-align: left;6346}6347.peach-pair-pro-required .peach-pro-headline {6348  font-size: 1.75rem;6349}6350.peach-pair-pro-required .peach-pro-subtitle {6351  font-size: 0.6875rem;6352}6353.peach-pair-pro-grid {6354  grid-template-columns: 1fr;6355}6356.peach-pair-pro-button {6357  width: 100%;6358  cursor: pointer;6359}6360.peach-desktop-error--pro {6361  width: min(100%, 320px);6362  overflow-y: auto;6363}63646365.peach-pro-key-divider {6366  display: flex;6367  align-items: center;6368  gap: 8px;6369  color: var(--peach-t2);6370  font-size: 0.5625rem;6371  letter-spacing: 0.1em;6372}6373.peach-pro-key-divider::before,6374.peach-pro-key-divider::after {6375  content: "";6376  flex: 1;6377  height: 1px;6378  background: var(--peach-border);6379}63806381/* Inline key entry row */6382.peach-pro-key-inline {6383  display: flex;6384  align-items: center;6385  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6386  border: 1px solid var(--peach-border);6387  border-radius: 8px;6388  overflow: hidden;6389}6390.peach-pro-key-inline-input {6391  flex: 1;6392  background: transparent;6393  border: none;6394  outline: none;6395  color: var(--peach-t1);6396  font-family: var(--font-mono);6397  font-size: 0.625rem;6398  letter-spacing: 0.06em;6399  padding: 9px 10px;6400}6401.peach-pro-key-inline-input::placeholder {6402  color: var(--peach-t2);6403}6404.peach-pro-key-apply {6405  background: transparent;6406  border: none;6407  border-left: 1px solid var(--peach-border);6408  color: var(--peach-t2);6409  font-family: var(--font-ui);6410  font-size: 0.5625rem;6411  font-weight: 600;6412  letter-spacing: 0.08em;6413  padding: 9px 10px;6414  cursor: pointer;6415  transition: color 0.15s ease;6416  flex-shrink: 0;6417}6418.peach-pro-key-apply:not(:disabled):hover {6419  color: var(--peach-accent);6420}6421.peach-pro-key-apply:disabled {6422  opacity: 0.35;6423  cursor: not-allowed;6424}64256426/* ── Pro tier — key ceremony ─────────────────────────────────── */6427.peach-pro-key-ceremony {6428  display: flex;6429  flex-direction: column;6430  align-items: center;6431  gap: 12px;6432  padding: 20px 4px 16px;6433}64346435.peach-pro-key-ceremony .peach-lock-rune-string {6436  font-size: 1rem;6437  gap: 12px;6438  flex: 0;6439  justify-content: center;6440}64416442.peach-pro-key-ceremony-label {6443  margin: 0;6444  font-size: 0.6875rem;6445  color: var(--peach-t2);6446  font-style: italic;6447  letter-spacing: 0.04em;6448}64496450.peach-pro-key-input {6451  font-family: var(--font-mono, monospace);6452  letter-spacing: 0.06em;6453  text-align: center;6454  width: 100%;6455  box-sizing: border-box;6456}64576458.peach-pro-key-error {6459  margin: 0;6460  font-size: 0.75rem;6461  text-align: center;6462  color: var(--peach-breach, #e55);6463  padding: 0;6464}64656466.peach-pro-key-activate {6467  width: 100%;6468  text-align: center;6469  box-sizing: border-box;6470  padding: 10px 20px;6471  font-size: 0.8125rem;6472}64736474.peach-pro-key-cancel {6475  background: transparent;6476  border: 0;6477  color: var(--peach-t2);6478  font-size: 0.6875rem;6479  cursor: pointer;6480  padding: 2px 8px;6481  transition: color 0.2s;6482}64836484.peach-pro-key-cancel:hover { color: var(--peach-accent); }64856486/* ── Pro tier — active state ─────────────────────────────────── */6487.peach-pro-active {6488  display: flex;6489  flex-direction: column;6490  align-items: center;6491  gap: 0;6492  padding: 8px 4px 16px;6493  min-height: 280px;6494}64956496.peach-pro-active-hero {6497  display: flex;6498  flex-direction: column;6499  align-items: center;6500  gap: 6px;6501  padding: 20px 0 8px;6502}65036504.peach-pro-active-mark-wrap {6505  display: flex;6506  align-items: center;6507  justify-content: center;6508  margin-bottom: 4px;6509}65106511.peach-pro-active-mark {6512  width: 60px;6513  height: 60px;6514}65156516.peach-pro-active-title {6517  font-family: var(--font-display, var(--font-ui));6518  font-size: 26px;6519  margin: 0;6520  color: var(--peach-t0);6521  letter-spacing: 0.01em;6522}65236524.peach-pro-active-since {6525  margin: 0;6526  font-size: 0.6875rem;6527  color: var(--peach-t2);6528  font-style: italic;6529}65306531.peach-pro-active-features {6532  display: flex;6533  flex-direction: column;6534  gap: 8px;6535  width: 100%;6536  padding: 14px 8px 0;6537  border-top: 1px solid var(--peach-border);6538  flex: 1;6539}65406541.peach-pro-active-feature {6542  display: flex;6543  align-items: center;6544  gap: 9px;6545}65466547.peach-pro-active-feature-mark {6548  color: var(--peach-accent);6549  font-size: 0.625rem;6550  opacity: 0.65;6551  flex-shrink: 0;6552}65536554.peach-pro-active-feature-name {6555  font-size: 0.75rem;6556  color: var(--peach-t1);6557}65586559.peach-pro-deactivate {6560  align-self: center;6561  background: transparent;6562  border: 0;6563  color: var(--peach-t3);6564  font-size: 0.625rem;6565  cursor: pointer;6566  padding: 8px 0 0;6567  margin-top: 16px;6568  letter-spacing: 0.03em;6569  transition: color 0.2s;6570}65716572.peach-pro-deactivate:hover { color: var(--peach-t2); }65736574.peach-pro-deactivate:disabled {6575  opacity: 0.5;6576  cursor: default;6577}65786579/* ── Pro card activation sparkles & thank-you ── */6580button.peach-pro-active-mark-wrap {6581  background: transparent;6582  border: 0;6583  padding: 0;6584  cursor: pointer;6585  position: relative;6586  overflow: visible;6587}65886589.peach-pro-sparks {6590  position: absolute;6591  inset: 0;6592  pointer-events: none;6593  overflow: visible;6594}65956596.peach-pro-spark {6597  position: absolute;6598  top: 50%;6599  left: 50%;6600  font-size: 9px;6601  line-height: 1;6602  opacity: 0;6603  transform: translate(-50%, -50%);6604  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;6605}66066607@keyframes peach-pro-spark-fly {6608  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }6609  25%  { opacity: 1; }6610  100% {6611    opacity: 0;6612    transform: translate(6613      calc(-50% + var(--spark-x, 0px)),6614      calc(-50% + var(--spark-y, -40px))6615    ) scale(0.8);6616  }6617}66186619.peach-pro-thankyou-text {6620  margin: 4px 0 0;6621  font-size: 0.6875rem;6622  font-style: italic;6623  color: currentColor;6624  opacity: 0;6625  animation: peach-pro-thankyou-flash 2.5s ease both;6626}66276628@keyframes peach-pro-thankyou-flash {6629  0%   { opacity: 0; transform: translateY(4px); }6630  15%  { opacity: 0.75; transform: translateY(0); }6631  75%  { opacity: 0.75; }6632  100% { opacity: 0; }6633}66346635/* ── Pro advanced health remediation queue ──────────────────── */6636.peach-health-pro-queue {6637  display: flex;6638  flex-direction: column;6639  gap: 10px;6640  padding: 12px;6641  margin: 0 0 12px;6642  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6643  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6644  border-radius: 10px;6645}66466647.peach-health-pro-queue-head {6648  display: flex;6649  justify-content: space-between;6650  align-items: baseline;6651}66526653.peach-health-pro-queue-title {6654  font-size: 0.75rem;6655  font-weight: 500;6656  letter-spacing: 0.04em;6657  text-transform: uppercase;6658  color: var(--peach-accent);6659}66606661.peach-health-pro-queue-score {6662  font-size: 0.6875rem;6663  color: var(--peach-t2);6664}66656666.peach-health-pro-row {6667  display: flex;6668  gap: 10px;6669  align-items: center;6670  padding: 8px 0;6671  border-top: 1px solid var(--peach-border);6672}66736674.peach-health-pro-row-info {6675  flex: 1;6676  display: flex;6677  flex-direction: column;6678  gap: 4px;6679  min-width: 0;6680}66816682.peach-health-pro-action {6683  flex: 0 0 auto;6684  padding: 4px 8px;6685  font-size: 0.5625rem;6686  letter-spacing: 0.08em;6687  text-transform: uppercase;6688}66896690.peach-health-pro-row-name {6691  font-size: 0.8125rem;6692  color: var(--peach-t0);6693  overflow: hidden;6694  text-overflow: ellipsis;6695  white-space: nowrap;6696}66976698.peach-health-pro-row-meta {6699  font-size: 0.6875rem;6700  color: var(--peach-t2);6701}67026703.peach-health-pro-bar {6704  height: 2px;6705  background: var(--peach-border);6706  border-radius: 2px;6707  overflow: hidden;6708  margin-top: 2px;6709}67106711.peach-health-pro-bar-fill {6712  height: 100%;6713  background: var(--peach-accent);6714  transition: width 200ms ease-out;6715}67166717/* ── Pro activation celebration ── */6718@keyframes peach-pro-bloom {6719  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6720  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6721                 drop-shadow(0 0 48px var(--peach-glow)); }6722  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6723}67246725@keyframes peach-pro-wordmark-in {6726  from { opacity: 0; transform: translateY(4px); }6727  to   { opacity: 1; transform: translateY(0); }6728}67296730@keyframes peach-pro-fade-out {6731  from { opacity: 1; }6732  to   { opacity: 0; }6733}67346735.peach-pro-celebration {6736  background:6737    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6738    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6739    var(--peach-bg);6740  border: 1px solid var(--peach-t3);6741  box-shadow:6742    0 2px 8px rgba(0,0,0,0.55),6743    0 14px 48px rgba(0,0,0,0.7),6744    0 0 0 1px rgba(240,232,216,0.04);6745  overflow: hidden;6746  width: 320px;6747  height: 520px;6748  display: flex;6749  flex-direction: column;6750  align-items: center;6751  justify-content: center;6752  gap: 8px;6753  padding: 32px 24px;6754  text-align: center;6755}67566757.peach-pro-celebration.is-leaving {6758  animation: peach-pro-fade-out 400ms ease forwards;6759}67606761.peach-pro-bloom-target {6762  display: flex;6763  align-items: center;6764  justify-content: center;6765  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6766  margin-bottom: 12px;6767}67686769.peach-pro-bloom-icon {6770  width: 48px;6771  height: 48px;6772}67736774.peach-pro-wordmark {6775  font-family: var(--font-display);6776  font-size: 22px;6777  font-style: italic;6778  font-weight: 400;6779  color: var(--peach-accent);6780  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6781}67826783.peach-pro-thankyou {6784  font-size: 0.75rem;6785  font-style: italic;6786  color: var(--peach-t2);6787  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6788}678967906791/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6792.peach-pro-notice-banner {6793  display: flex;6794  align-items: center;6795  gap: 8px;6796  padding: 7px 12px;6797  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6798  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6799  font-size: 0.6875rem;6800  color: var(--peach-t2);6801  font-family: "IBM Plex Mono", monospace;6802  flex-shrink: 0;6803}68046805.peach-pro-notice-link {6806  background: none;6807  border: none;6808  padding: 0;6809  cursor: pointer;6810  font-size: 0.6875rem;6811  color: var(--peach-accent);6812  font-family: "IBM Plex Mono", monospace;6813  margin-left: auto;6814  white-space: nowrap;6815}68166817.peach-pro-notice-close {6818  background: none;6819  border: none;6820  padding: 0 0 0 4px;6821  cursor: pointer;6822  font-size: 0.625rem;6823  color: var(--peach-t3);6824  line-height: 1;6825}68266827/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6828   Renders over whatever view is showing. 60-second expiry; the popup ticks6829   the countdown each second and clears the banner when it hits zero. */6830.peach-pair-request-banner {6831  display: flex;6832  flex-direction: column;6833  gap: 8px;6834  padding: 10px 12px;6835  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6836  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6837  font-family: "IBM Plex Mono", monospace;6838  flex-shrink: 0;6839}68406841.peach-pair-toast {6842  padding: 8px 12px;6843  font-family: "IBM Plex Mono", monospace;6844  font-size: 0.75rem;6845  color: var(--peach-t1);6846  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6847  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6848  flex-shrink: 0;6849  text-align: center;6850}68516852.peach-pair-toast strong {6853  color: var(--peach-t0);6854  font-weight: 500;6855}68566857.peach-pair-request-header {6858  display: flex;6859  align-items: center;6860  gap: 8px;6861  font-size: 0.75rem;6862  color: var(--peach-t1);6863}68646865.peach-pair-request-mark {6866  font-size: 0.875rem;6867  display: inline-flex;6868  align-items: center;6869}68706871.peach-pair-request-icon {6872  width: 1em;6873  height: 1em;6874}68756876.peach-pair-request-title {6877  font-weight: 600;6878  color: var(--peach-t0);6879}68806881.peach-pair-request-countdown {6882  margin-left: auto;6883  font-variant-numeric: tabular-nums;6884  color: var(--peach-t2);6885  font-size: 0.6875rem;6886}68876888.peach-pair-request-body {6889  margin: 0;6890  font-size: 0.75rem;6891  color: var(--peach-t1);6892  line-height: 1.4;6893}68946895.peach-pair-request-body strong {6896  color: var(--peach-t0);6897  font-weight: 600;6898}68996900.peach-pair-request-actions {6901  display: flex;6902  gap: 8px;6903  justify-content: flex-end;6904}69056906/* ─── First-run onboarding ──────────────────────────────────────────────6907   Three-card welcome shown once before vault creation. The PeachScript6908   rune background drifts behind everything at very low opacity — it's6909   atmosphere, not focus. The cards themselves use the same panel6910   language as the rest of the popup so the transition into NewVault is6911   continuous, not a jarring switch of visual register. */69126913.peach-onboarding {6914  position: relative;6915  display: flex;6916  flex-direction: column;6917  width: 100%;6918  height: 100%;6919  padding: 16px 16px 18px;6920  box-sizing: border-box;6921  overflow: hidden;6922  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6923}69246925.peach-onboarding.is-completing {6926  animation: peach-onboard-exit 200ms ease-out forwards;6927}69286929.peach-rune-background {6930  position: absolute;6931  inset: 0;6932  width: 100%;6933  height: 100%;6934  pointer-events: none;6935  z-index: 0;6936  transition: opacity 500ms ease-out;6937}69386939.peach-onboarding.is-completing .peach-rune-background {6940  opacity: 0;6941}69426943.peach-onboarding-header {6944  position: relative;6945  z-index: 1;6946  display: flex;6947  align-items: center;6948  margin-bottom: 14px;6949}69506951.peach-onboarding-card {6952  position: relative;6953  z-index: 1;6954  flex: 1;6955  display: flex;6956  flex-direction: column;6957  gap: 10px;6958  padding: 22px 20px;6959  border-radius: 16px;6960  border: 1px solid var(--peach-t3);6961  background:6962    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6963  backdrop-filter: blur(3px);6964  -webkit-backdrop-filter: blur(3px);6965  box-shadow:6966    inset 0 1px 0 rgba(240, 232, 216, 0.04),6967    0 12px 28px rgba(0, 0, 0, 0.12);6968  cursor: pointer;6969  user-select: none;6970  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6971}69726973.peach-onboarding-card.is-exiting {6974  animation: peach-card-out 120ms ease-in forwards;6975  pointer-events: none;6976}69776978.peach-onboarding-card-headline {6979  margin: 0;6980  font-family: var(--font-display);6981  font-style: italic;6982  font-weight: 400;6983  font-size: 22px;6984  line-height: 1.05;6985  color: var(--peach-t0);6986  white-space: pre-line;6987}69886989.peach-onboarding-divider {6990  margin: 4px 0 6px;6991  border: 0;6992  border-top: 1px solid var(--peach-t3);6993  width: 100%;6994}69956996.peach-onboarding-body {6997  margin: 0;6998  font-size: 0.8125rem;6999  line-height: 1.6;7000  color: var(--peach-t1);7001}70027003.peach-onboarding-warning {7004  display: flex;7005  align-items: flex-start;7006  gap: 8px;7007  margin: 6px 0 0;7008  padding-top: 8px;7009  border-top: 1px dashed var(--peach-t3);7010  font-size: 0.8125rem;7011  line-height: 1.5;7012  color: var(--peach-t1);7013}70147015.peach-onboarding-warning-icon {7016  color: var(--peach-accent);7017  font-size: 0.8125rem;7018  line-height: 1.5;7019  flex: 0 0 auto;7020}70217022.peach-onboarding-nav {7023  position: relative;7024  z-index: 1;7025  display: flex;7026  align-items: center;7027  justify-content: space-between;7028  margin-top: 12px;7029  padding: 0 4px;7030}70317032.peach-onboarding-dots {7033  display: flex;7034  align-items: center;7035  gap: 6px;7036}70377038.peach-onboarding-dot {7039  width: 6px;7040  height: 6px;7041  border-radius: 50%;7042  background: var(--peach-t2);7043  transition: width 200ms ease, height 200ms ease, background 200ms ease;7044}70457046.peach-onboarding-dot.is-active {7047  width: 8px;7048  height: 8px;7049  background: var(--peach-accent);7050}70517052.peach-onboarding-next {7053  background: none;7054  border: none;7055  padding: 4px 0;7056  cursor: pointer;7057  font-family: "IBM Plex Mono", monospace;7058  font-size: 0.6875rem;7059  letter-spacing: 0.04em;7060  color: var(--peach-t1);7061  transition: color 150ms ease;7062}70637064.peach-onboarding-next:hover {7065  color: var(--peach-t0);7066}70677068.peach-onboarding-next:disabled {7069  opacity: 0.5;7070  cursor: default;7071}70727073.peach-onboarding-back {7074  background: none;7075  border: none;7076  padding: 4px 0;7077  cursor: pointer;7078  font-family: "IBM Plex Mono", monospace;7079  font-size: 0.6875rem;7080  letter-spacing: 0.04em;7081  color: var(--peach-t2);7082  transition: color 150ms ease;7083}70847085.peach-onboarding-back:hover {7086  color: var(--peach-t0);7087}70887089.peach-onboarding-back:disabled {7090  opacity: 0.5;7091  cursor: default;7092}70937094/* Reserve back-button width on the first card so the dots stay centred */7095.peach-onboarding-back-spacer {7096  width: 44px;7097}70987099.peach-onboarding-choice-row {7100  display: grid;7101  grid-template-columns: 1fr;7102  gap: 8px;7103}71047105.peach-onboarding-choice-heading {7106  margin: 8px 0 -2px;7107  color: var(--peach-t1);7108  font-family: "IBM Plex Mono", monospace;7109  font-size: 0.6875rem;7110  letter-spacing: 0.04em;7111  text-transform: uppercase;7112}71137114.peach-onboarding-choice {7115  min-height: 48px;7116  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);7117  border-radius: 8px;7118  padding: 8px 10px;7119  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);7120  color: var(--peach-t0);7121  font-size: 0.76rem;7122  font-weight: 700;7123  text-align: left;7124}71257126.peach-onboarding-choice-label,7127.peach-onboarding-choice-detail {7128  display: block;7129}71307131.peach-onboarding-choice-detail {7132  margin-top: 2px;7133  color: var(--peach-t1);7134  font-size: 0.625rem;7135  font-weight: 400;7136  line-height: 1.35;7137}71387139.peach-onboarding-choice--adopt {7140  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);7141  background: color-mix(in srgb, var(--peach-accent) 13%, transparent);7142}71437144.peach-adopt-vault {7145  position: relative;7146  min-height: 100%;7147  padding: 22px;7148  display: grid;7149  place-items: center;7150}71517152.peach-adopt-vault--pair {7153  padding: 10px;7154  overflow-y: auto;7155  scrollbar-width: none;7156}71577158.peach-adopt-vault--pair::-webkit-scrollbar {7159  display: none;7160}71617162.peach-adopt-card {7163  position: relative;7164  z-index: 1;7165  width: min(100%, 330px);7166  padding: 20px;7167  border-radius: 8px;7168  border: 1px solid color-mix(in srgb, var(--peach-t0) 13%, transparent);7169  background: color-mix(in srgb, var(--peach-surface) 90%, transparent);7170  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);7171}71727173.peach-adopt-card--pair {7174  width: 100%;7175  max-height: 500px;7176  margin: auto;7177  padding: 14px 16px 12px;7178  overflow-y: auto;7179  scrollbar-width: none;7180  border: 0;7181  border-radius: 16px;7182  background:7183    radial-gradient(7184      circle at 50% -10%,7185      color-mix(in srgb, var(--peach-accent) 14%, transparent),7186      transparent 38%7187    ),7188    color-mix(in srgb, var(--peach-surface) 94%, transparent);7189}71907191.peach-adopt-card--pair::-webkit-scrollbar {7192  display: none;7193}71947195.peach-adopt-card h1 {7196  margin: 0 0 10px;7197  font-size: 1.28rem;7198  line-height: 1.15;7199}72007201.peach-adopt-card p {7202  margin: 0 0 14px;7203  color: var(--peach-t1);7204  line-height: 1.35;7205}72067207.peach-adopt-card .peach-hint-relay {7208  margin: 12px 0 0;7209  font-size: 11px;7210  line-height: 1.4;7211  color: var(--peach-t2);7212  opacity: 0.85;7213}72147215.peach-adopt-input {7216  margin-bottom: 12px;7217}72187219.peach-adopt-card textarea.peach-adopt-input {7220  width: 100%;7221  resize: vertical;7222  overflow-wrap: anywhere;7223  font-family: "IBM Plex Mono", monospace;7224  font-size: 0.64rem;7225}72267227.peach-adopt-qr-video {7228  display: block;7229  width: 100%;7230  max-height: 220px;7231  margin: 0 0 12px;7232  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);7233  border-radius: 8px;7234  background: #000;7235  object-fit: cover;7236}72377238.peach-adoption-source-invitation {7239  display: flex;7240  flex-direction: column;7241  align-items: center;7242  gap: 10px;7243  padding: 4px 18px 16px;7244  text-align: center;7245}72467247.peach-pair-qr {7248  display: block;7249  margin-inline: auto;7250  max-width: min(224px, 100%);7251  height: auto;7252  padding: 8px;7253  border-radius: 10px;7254  background: #fff;7255}72567257.peach-adopt-card > .peach-btn + .peach-btn {7258  margin-top: 8px;7259}72607261.peach-adopt-actions {7262  display: flex;7263  gap: 10px;7264  margin-top: 14px;7265}72667267.peach-adopt-actions > button {7268  flex: 1;7269}72707271.peach-adopt-sas {7272  margin: 18px 0;7273  padding: 14px;7274  border-radius: 8px;7275  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);7276  color: var(--peach-t0);7277  font-size: 1.35rem;7278  font-weight: 800;7279  font-variant-numeric: tabular-nums;7280  text-align: center;7281}72827283.peach-adopt-pairing {7284  text-align: center;7285}72867287.peach-adopt-pairing h1 {7288  max-width: 260px;7289  margin: 0 auto 6px;7290  color: var(--peach-t0);7291  font-family: var(--font-display, Georgia, serif);7292  font-size: 1.42rem;7293  font-style: italic;7294  font-weight: 500;7295  line-height: 1.12;7296  text-wrap: balance;7297}72987299.peach-adopt-pairing .peach-adopt-pair-lede {7300  max-width: 258px;7301  margin: 0 auto;7302  color: color-mix(in srgb, var(--peach-t0) 82%, var(--peach-bg));7303  font-size: 0.73rem;7304  line-height: 1.42;7305  text-wrap: pretty;7306}73077308.peach-pair-stage.peach-adopt-bird-stage {7309  width: min(100%, 260px);7310  height: 102px;7311  margin: -6px auto 2px;7312}73137314.peach-adopt-bird-stage .peach-pair-bird-slot,7315.peach-adopt-bird-stage .peach-pair-bird {7316  width: 90px;7317  height: 90px;7318}73197320.peach-adopt-bird-stage .peach-pair-bird-slot-desktop {7321  left: 12px;7322}73237324.peach-adopt-bird-stage .peach-pair-bird-slot-mobile {7325  right: 12px;7326}73277328.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot-desktop {7329  --bb-x: 12px;7330  transform: translateX(12px);7331}73327333.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot-mobile {7334  --bb-x: -12px;7335  transform: translateX(-12px);7336}73377338.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot {7339  animation: peach-adopt-happy-bob 0.8s ease-in-out infinite;7340}73417342.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot-mobile {7343  animation-delay: 0.18s;7344  animation-direction: reverse;7345}73467347.peach-adopt-pairing.is-complete .peach-pair-stage.peach-adopt-bird-stage {7348  width: 100%;7349  height: 135px;7350  margin: -8px auto 6px;7351}73527353.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird-slot,7354.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird {7355  width: 112px;7356  height: 112px;7357}73587359.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird-slot-desktop {7360  left: 0;7361  --bb-x: 0;7362  transform: translateX(0);7363}73647365.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird-slot-mobile {7366  right: 0;7367  --bb-x: 0;7368  transform: translateX(0);7369}73707371.peach-adopt-pairing.is-complete h1 {7372  font-size: 1.6rem;7373}73747375.peach-adopt-pairing.is-complete .peach-adopt-pair-lede {7376  font-size: 0.78rem;7377}73787379@keyframes peach-adopt-happy-bob {7380  0%, 100% {7381    transform: translateX(var(--bb-x, 0)) translateY(0) rotate(0deg);7382  }7383  35% {7384    transform: translateX(var(--bb-x, 0)) translateY(-8px) rotate(-3deg);7385  }7386  70% {7387    transform: translateX(var(--bb-x, 0)) translateY(-3px) rotate(2deg);7388  }7389}73907391.peach-adopt-connection {7392  position: absolute;7393  left: 50%;7394  bottom: 38px;7395  width: 78px;7396  height: 1px;7397  translate: -50% 0;7398  background: color-mix(in srgb, var(--peach-accent) 62%, transparent);7399  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 56%, transparent);7400}74017402.peach-adopt-pairing.is-complete .peach-adopt-connection {7403  bottom: 49px;7404  width: 92px;7405}74067407.peach-adopt-connection::after {7408  content: "";7409  position: absolute;7410  left: 50%;7411  top: 50%;7412  width: 7px;7413  height: 7px;7414  border-radius: 50%;7415  translate: -50% -50%;7416  background: var(--peach-accent);7417  box-shadow:7418    0 0 0 4px color-mix(in srgb, var(--peach-accent) 17%, transparent),7419    0 0 14px color-mix(in srgb, var(--peach-accent) 74%, transparent);7420  animation: peach-adopt-connection-pulse 1.1s ease-in-out infinite;7421}74227423@keyframes peach-adopt-connection-pulse {7424  0%, 100% { scale: 0.8; opacity: 0.72; }7425  50% { scale: 1.14; opacity: 1; }7426}74277428.peach-adopt-qr-wrap {7429  min-height: 160px;7430  display: grid;7431  place-items: center;7432}74337434.peach-adopt-qr-wrap .peach-hint-error {7435  margin: 12px 0;7436}74377438.peach-adopt-pairing .peach-adopt-pair-status {7439  margin: 0;7440  color: var(--peach-t0);7441  font-size: 0.75rem;7442}74437444.peach-adopt-confirmation {7445  margin-top: 18px;7446  padding: 8px 0 4px;7447}74487449.peach-adopt-confirmation .peach-adopt-confirmation-label {7450  margin: 0 0 7px;7451  color: color-mix(in srgb, var(--peach-accent) 72%, var(--peach-t0));7452  font-family: var(--peach-mono, "IBM Plex Mono", monospace);7453  font-size: 0.625rem;7454  font-weight: 700;7455  letter-spacing: 0.14em;7456}74577458.peach-adopt-confirmation .peach-adoption-sas {7459  margin: 0 auto;7460  padding: 12px 14px;7461  border-color: color-mix(in srgb, var(--peach-accent) 36%, transparent);7462  background: color-mix(in srgb, var(--peach-accent) 13%, transparent);7463}74647465.peach-adopt-confirmation .peach-adoption-sas strong {7466  color: color-mix(in srgb, var(--peach-accent) 84%, var(--peach-t0));7467  font-size: 1.58rem;7468  text-shadow: 0 0 16px color-mix(in srgb, var(--peach-accent) 30%, transparent);7469}74707471.peach-adopt-confirmation .peach-adopt-confirmation-help {7472  max-width: 270px;7473  margin: 8px auto 0;7474  color: color-mix(in srgb, var(--peach-t0) 78%, var(--peach-bg));7475  font-size: 0.7rem;7476  line-height: 1.45;7477}74787479.peach-adopt-privacy {7480  display: flex;7481  align-items: flex-start;7482  gap: 9px;7483  margin-top: 10px;7484  padding: 8px 9px;7485  border: 1px solid color-mix(in srgb, var(--peach-t0) 13%, transparent);7486  border-radius: 10px;7487  background: color-mix(in srgb, var(--peach-t0) 6%, transparent);7488  text-align: left;7489}74907491.peach-adopt-privacy svg {7492  width: 16px;7493  height: 16px;7494  flex: 0 0 auto;7495  margin-top: 1px;7496  fill: none;7497  stroke: color-mix(in srgb, var(--peach-accent) 74%, var(--peach-t0));7498  stroke-linecap: round;7499  stroke-linejoin: round;7500  stroke-width: 1.7;7501}75027503.peach-adopt-pairing .peach-adopt-privacy p {7504  margin: 0;7505  color: color-mix(in srgb, var(--peach-t0) 76%, var(--peach-bg));7506  font-size: 0.62rem;7507  line-height: 1.4;7508}75097510.peach-adopt-privacy strong {7511  color: var(--peach-t0);7512  font-weight: 700;7513}75147515.peach-adopt-pair-actions {7516  margin-top: 9px;7517}75187519.peach-adopt-pair-actions > button {7520  width: 100%;7521}75227523.peach-adopt-paired-status {7524  display: inline-flex;7525  align-items: center;7526  gap: 8px;7527  margin: 22px auto 18px;7528  padding: 9px 13px;7529  border: 1px solid color-mix(in srgb, var(--peach-accent) 30%, transparent);7530  border-radius: 999px;7531  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);7532  color: color-mix(in srgb, var(--peach-accent) 78%, var(--peach-t0));7533  font-family: var(--peach-mono, "IBM Plex Mono", monospace);7534  font-size: 0.66rem;7535  font-weight: 700;7536  letter-spacing: 0.04em;7537}75387539.peach-adopt-paired-status span {7540  width: 7px;7541  height: 7px;7542  border-radius: 50%;7543  background: var(--peach-accent);7544  box-shadow: 0 0 8px color-mix(in srgb, var(--peach-accent) 68%, transparent);7545}75467547@media (prefers-reduced-motion: reduce) {7548  .peach-adopt-connection::after {7549    animation: none;7550  }7551}75527553.peach-onboarding-mobile-card-buttons {7554  display: flex;7555  flex-direction: column;7556  gap: 8px;7557  margin-top: 16px;7558}75597560@keyframes peach-onboard-enter {7561  from { opacity: 0; transform: translateY(20px); }7562  to   { opacity: 1; transform: translateY(0); }7563}75647565@keyframes peach-onboard-exit {7566  from { opacity: 1; }7567  to   { opacity: 0; }7568}75697570@keyframes peach-card-in {7571  from { opacity: 0; transform: translateX(12px); }7572  to   { opacity: 1; transform: translateX(0); }7573}75747575@keyframes peach-card-out {7576  from { opacity: 1; transform: translateX(0); }7577  to   { opacity: 0; transform: translateX(-12px); }7578}75797580/* ─── New vault screen — matched to onboarding card language ─────────── */75817582/* Two classes so this beats the shared .peach-screen.lock-screen--vault-stage7583   rule (same element) without loosening the unlock/restore screens. The7584   create-vault screen is the only vault-stage view tall enough to overflow7585   the 520px popup, so its spacing is tuned to fit header → card → restore →7586   recovery warning with nothing clipped. */7587.peach-screen.peach-newvault {7588  position: relative;7589  display: flex;7590  flex-direction: column;7591  gap: 12px;7592  padding: 14px 16px 12px;7593  overflow: hidden;7594}75957596/* Suppress the warm-blob ambient art inherited from .lock-screen — the7597   new vault card now carries the visual weight. */7598.peach-newvault::before {7599  content: none;7600}76017602.peach-newvault-header {7603  position: relative;7604  z-index: 2;7605  display: flex;7606  align-items: center;7607  gap: 10px;7608  margin-bottom: 2px;7609}76107611.peach-newvault-back {7612  display: inline-flex;7613  align-items: center;7614  gap: 4px;7615  background: transparent;7616  border: none;7617  color: var(--peach-t2);7618  font-family: "IBM Plex Mono", monospace;7619  font-size: 0.625rem;7620  letter-spacing: 0.06em;7621  cursor: pointer;7622  padding: 4px 6px;7623  border-radius: 6px;7624  transition: color 120ms ease, background 120ms ease;7625}76267627.peach-newvault-back:hover {7628  color: var(--peach-t0);7629  background: rgba(240, 232, 216, 0.04);7630}76317632.peach-newvault-mark {7633  position: absolute;7634  right: -12px;7635  top: 6px;7636  width: 110px;7637  height: 110px;7638  pointer-events: none;7639  opacity: 0.10;7640  filter: saturate(0.9);7641  z-index: 0;7642}7643.peach-newvault-mark-art {7644  width: 100%;7645  height: 100%;7646}7647.peach-newvault-mark-art path:nth-child(1) {7648  fill: rgba(123, 144, 96, 0.88);7649}7650.peach-newvault-mark-art path:nth-child(2) {7651  stroke: rgba(94, 122, 66, 0.95);7652}76537654.peach-newvault-card {7655  position: relative;7656  z-index: 1;7657  display: flex;7658  flex-direction: column;7659  gap: 8px;7660  padding: 16px 20px 14px;7661  border-radius: 16px;7662  border: 1px solid var(--peach-t3);7663  background:7664    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));7665  backdrop-filter: blur(3px);7666  -webkit-backdrop-filter: blur(3px);7667  box-shadow:7668    inset 0 1px 0 rgba(240, 232, 216, 0.04),7669    0 12px 28px rgba(0, 0, 0, 0.12);7670  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;7671}76727673.peach-newvault-headline {7674  margin: 0;7675  font-family: var(--font-display);7676  font-style: italic;7677  font-weight: 400;7678  font-size: 24px;7679  line-height: 1.05;7680  color: var(--peach-t0);7681  white-space: pre-line;7682}76837684.peach-newvault-divider {7685  margin: 2px 0 4px;7686  border: 0;7687  border-top: 1px solid var(--peach-t3);7688  width: 100%;7689}76907691.peach-newvault-field {7692  display: flex;7693  flex-direction: column;7694  gap: 4px;7695}76967697.peach-newvault-label-row {7698  display: flex;7699  align-items: center;7700  justify-content: space-between;7701}77027703/* Monospace input scaled to the card. Replaces the 22px unlock-input7704   so the placeholder no longer overflows and the field reads as part7705   of the same surface as the body copy. */7706.peach-newvault-input {7707  font-size: 0.875rem;7708  letter-spacing: 0.18em;7709  padding: 8px 0;7710}7711.peach-newvault-input::placeholder {7712  letter-spacing: 0.18em;7713  color: var(--peach-t2);7714}77157716.peach-newvault-hint {7717  margin: 2px 0 0;7718  font-family: "IBM Plex Mono", monospace;7719  font-size: 0.625rem;7720  color: var(--peach-t2);7721  letter-spacing: 0.04em;7722}77237724.peach-newvault-submit {7725  margin-top: 4px;7726}77277728.peach-newvault-warning {7729  display: flex;7730  align-items: flex-start;7731  gap: 8px;7732  margin: 2px 0 0;7733  padding-top: 8px;7734  border-top: 1px dashed var(--peach-t3);7735  font-size: 0.75rem;7736  line-height: 1.45;7737  color: var(--peach-t1);7738}77397740.peach-newvault-warning-icon {7741  color: var(--peach-accent);7742  font-size: 0.8125rem;7743  line-height: 1.4;7744  flex: 0 0 auto;7745}77467747/* Restore options sit inside the card, directly under "create vault", so7748   they are always reachable without scrolling. The top divider mirrors the7749   warning's so the choice reads as a deliberate fork, not a footnote. */7750.peach-newvault-restore {7751  position: relative;7752  z-index: 1;7753  display: flex;7754  flex-direction: column;7755  gap: 4px;7756  margin-top: 4px;7757  padding-top: 10px;7758  border-top: 1px dashed var(--peach-t3);7759}77607761/* Settings body — warm accent gradient gives the glass something to blur against */7762.peach-settings-body {7763  background:7764    radial-gradient(7765      ellipse at 30% 20%,7766      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7767      transparent 60%7768    );7769}77707771/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7772/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7773 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7774 * (replacing the vault from a backup file) and "hazard" for actions that7775 * are absolutely irreversible (Panic). Both use the same card scaffold so7776 * they read as a pair, but the colour family signals the severity at a7777 * glance — yellow for caution, red for don't.7778 */7779.peach-danger-card {7780  --danger-tint: 235, 158, 52; /* amber */7781  display: flex;7782  flex-direction: column;7783  gap: 8px;7784  padding: 14px;7785  margin-top: 10px;7786  border-radius: 12px;7787  border: 1px solid rgba(var(--danger-tint), 0.32);7788  background:7789    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7790    rgba(var(--danger-tint), 0.04);7791  box-shadow:7792    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7793    0 0 24px rgba(var(--danger-tint), 0.04);7794  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7795}77967797.peach-danger-card:hover {7798  border-color: rgba(var(--danger-tint), 0.55);7799  box-shadow:7800    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7801    0 0 36px rgba(var(--danger-tint), 0.10);7802}78037804.peach-danger-card--hazard {7805  --danger-tint: 220, 38, 38; /* red */7806}78077808.peach-danger-card-head {7809  display: flex;7810  align-items: center;7811  gap: 10px;7812}78137814.peach-danger-card-glyph {7815  width: 28px;7816  height: 28px;7817  flex-shrink: 0;7818  display: flex;7819  align-items: center;7820  justify-content: center;7821  border-radius: 8px;7822  background: rgba(var(--danger-tint), 0.12);7823  color: rgba(var(--danger-tint), 0.95);7824  font-size: 1rem;7825  line-height: 1;7826}78277828.peach-danger-card-title {7829  margin: 0;7830  font-size: 0.8125rem;7831  font-weight: 600;7832  color: rgba(var(--danger-tint), 0.92);7833  letter-spacing: 0.01em;7834}78357836.peach-danger-card-copy {7837  margin: 0;7838  font-size: 0.6875rem;7839  line-height: 1.5;7840  color: var(--peach-t2);7841}78427843.peach-danger-card-button {7844  width: 100%;7845  padding: 9px;7846  margin-top: 4px;7847  background: transparent;7848  border: 1px solid rgba(var(--danger-tint), 0.45);7849  border-radius: 8px;7850  color: rgba(var(--danger-tint), 0.9);7851  font-size: 0.75rem;7852  font-weight: 500;7853  letter-spacing: 0.02em;7854  cursor: pointer;7855  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7856}78577858.peach-danger-card-button:hover {7859  background: rgba(var(--danger-tint), 0.10);7860  border-color: rgba(var(--danger-tint), 0.75);7861  color: rgb(var(--danger-tint));7862}78637864.peach-adoption-sas {7865  margin: 16px auto 0;7866  padding: 12px 16px;7867  border: 1px solid color-mix(in srgb, var(--peach-t0) 18%, transparent);7868  border-radius: 10px;7869  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);7870  color: var(--peach-t0);7871  text-align: center;7872}78737874.peach-adoption-sas strong {7875  font-size: 1.65rem;7876  font-variant-numeric: tabular-nums;7877  letter-spacing: 0.18em;7878  white-space: nowrap;7879}78807881/* ── Panic flow (three-step destruction) ───────────────────────────────── */7882.peach-panic {7883  display: flex;7884  flex-direction: column;7885  flex: 1;7886  min-height: 0;7887  padding: 28px 20px 20px;7888  gap: 18px;7889  overflow-y: auto;7890  scrollbar-width: none;7891  -ms-overflow-style: none;7892}78937894.peach-panic::-webkit-scrollbar { display: none; }78957896.peach-panic-step2 {7897  background: rgba(220, 38, 38, 0.04);7898}78997900.peach-panic-step3 {7901  position: relative;7902  background: #0f0505;7903  color: #ffffff;7904  overflow: hidden;7905}79067907.peach-panic-rune-bg {7908  position: absolute;7909  inset: 0;7910  opacity: 0.22;7911  pointer-events: none;7912  overflow: hidden;7913}79147915.peach-panic-rune-bg canvas {7916  width: 100% !important;7917  height: 100% !important;7918}79197920.peach-panic-icon {7921  font-size: 32px;7922  color: rgb(220, 38, 38);7923  line-height: 1;7924}79257926.peach-panic-title {7927  margin: 0;7928  font-size: 18px;7929  font-weight: 500;7930  color: var(--peach-t1);7931}79327933.peach-panic-title--severe {7934  font-size: 20px;7935  font-weight: 700;7936  color: rgb(220, 38, 38);7937}79387939.peach-panic-body {7940  margin: 0;7941  font-size: 0.8125rem;7942  line-height: 1.55;7943  color: var(--peach-t2);7944}79457946.peach-panic-body--severe {7947  color: rgba(220, 38, 38, 0.85);7948}79497950.peach-panic-body--final {7951  font-size: 1rem;7952  font-weight: 700;7953  color: rgb(255, 80, 80);7954  line-height: 1.4;7955}79567957.peach-panic-body--final-intro {7958  font-size: 1rem;7959  color: #ffffff;7960  font-weight: 400;7961}79627963.peach-panic-divider {7964  height: 1px;7965  background: rgba(255, 255, 255, 0.08);7966  margin: 4px 0;7967}79687969.peach-panic-confirm-input {7970  width: 100%;7971  padding: 10px 12px;7972  background: rgba(255, 255, 255, 0.02);7973  border: 1px solid rgba(220, 38, 38, 0.4);7974  border-radius: 8px;7975  color: var(--peach-t1);7976  font-family: "IBM Plex Mono", monospace;7977  font-size: 0.875rem;7978  letter-spacing: 0.12em;7979  text-transform: uppercase;7980}79817982.peach-panic-confirm-input:focus {7983  outline: none;7984  border-color: rgb(220, 38, 38);7985}79867987.peach-panic-confirm-input--match {7988  border-color: rgb(220, 38, 38);7989  color: rgb(220, 38, 38);7990}79917992.peach-panic-confirm-label {7993  font-size: 0.6875rem;7994  color: var(--peach-t2);7995  margin: 0 0 -8px;7996  letter-spacing: 0.06em;7997}79987999.peach-panic-actions {8000  display: flex;8001  flex-direction: column;8002  gap: 10px;8003  margin-top: auto;8004}80058006.peach-panic-button {8007  width: 100%;8008  padding: 12px;8009  border-radius: 8px;8010  font-size: 0.8125rem;8011  cursor: pointer;8012  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;8013}80148015.peach-panic-button--primary {8016  background: var(--peach-accent);8017  border: 1px solid var(--peach-accent);8018  color: #ffffff;8019  font-weight: 600;8020}80218022.peach-panic-button--primary:hover {8023  background: color-mix(in srgb, var(--peach-accent) 88%, white);8024}80258026.peach-panic-button--danger {8027  background: rgb(220, 38, 38);8028  border: 1px solid rgb(220, 38, 38);8029  color: #ffffff;8030  font-weight: 600;8031}80328033.peach-panic-button--danger:disabled {8034  opacity: 0.35;8035  cursor: not-allowed;8036}80378038.peach-panic-button--ghost {8039  background: transparent;8040  border: 1px solid rgba(255, 255, 255, 0.18);8041  color: var(--peach-t2);8042}80438044.peach-panic-button--ghost:hover {8045  border-color: rgba(255, 255, 255, 0.32);8046  color: var(--peach-t1);8047}80488049.peach-panic-link {8050  background: transparent;8051  border: none;8052  padding: 4px 0;8053  color: rgba(220, 38, 38, 0.65);8054  font-size: 0.75rem;8055  cursor: pointer;8056  text-align: left;8057  text-decoration: underline;8058  text-underline-offset: 3px;8059}80608061.peach-panic-link:hover {8062  color: rgb(220, 38, 38);8063}80648065.peach-panic-bar {8066  background: rgb(220, 38, 38);8067  padding: 16px 20px;8068  margin: -28px -20px 0;8069  text-align: center;8070  font-size: 0.8125rem;8071  font-weight: 700;8072  letter-spacing: 0.12em;8073  color: #ffffff;8074}80758076.peach-panic-final-button {8077  width: 100%;8078  padding: 14px;8079  background: rgb(220, 38, 38);8080  border: none;8081  border-radius: 8px;8082  color: #ffffff;8083  font-size: 0.875rem;8084  font-weight: 700;8085  letter-spacing: 0.08em;8086  text-transform: uppercase;8087  cursor: pointer;8088  animation: peach-panic-pulse 2s ease-in-out infinite;8089}80908091.peach-settings-license {8092  margin-top: 10px;8093  padding-top: 10px;8094  border-top: 1px solid var(--peach-t3);8095}80968097.peach-settings-label {8098  font-size: 0.625rem;8099  letter-spacing: 0.08em;8100  color: var(--peach-t3);8101  display: block;8102  margin-bottom: 6px;8103}81048105.peach-settings-license-row {8106  display: flex;8107  align-items: center;8108  justify-content: space-between;8109  gap: 8px;8110}81118112.peach-settings-license-key {8113  font-family: 'IBM Plex Mono', monospace;8114  font-size: 0.75rem;8115  color: var(--peach-t0);8116  letter-spacing: 0.04em;8117  word-break: break-all;8118  flex: 1;8119  min-width: 0;8120}81218122.peach-settings-license-key--masked {8123  font-family: 'IBM Plex Mono', monospace;8124  font-size: 0.6rem;8125  color: var(--peach-t1);8126  letter-spacing: 0.18em;8127  user-select: none;8128}81298130.peach-settings-license-actions {8131  display: flex;8132  align-items: center;8133  gap: 2px;8134  flex-shrink: 0;8135}81368137.peach-settings-license-copy {8138  font-size: 0.6875rem;8139  color: var(--peach-accent);8140  background: transparent;8141  border: none;8142  cursor: pointer;8143  padding: 4px 8px;8144  border-radius: 4px;8145  flex-shrink: 0;8146  transition: opacity 150ms ease;8147}81488149.peach-settings-license-copy:hover {8150  opacity: 0.75;8151}81528153.peach-settings-license-toggle {8154  display: flex;8155  align-items: center;8156  justify-content: center;8157  background: transparent;8158  border: none;8159  cursor: pointer;8160  padding: 4px 6px;8161  border-radius: 4px;8162  color: var(--peach-t2);8163  transition: color 150ms ease;8164}81658166.peach-settings-license-toggle:hover {8167  color: var(--peach-t1);8168}81698170@keyframes peach-panic-pulse {8171  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }8172  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }8173}81748175[data-motion="reduce"] .peach-panic-final-button {8176  animation: none;8177}81788179/* Vault History — Settings → Vault sub-view */81808181.peach-history-list {8182  border: 1px solid var(--peach-border);8183  border-radius: 8px;8184  overflow: hidden;8185  margin: 8px 0 4px;8186}81878188.peach-history-row {8189  display: flex;8190  align-items: center;8191  justify-content: space-between;8192  padding: 9px 12px;8193  gap: 10px;8194  border-bottom: 1px solid var(--peach-border);8195}81968197.peach-history-row:last-child {8198  border-bottom: none;8199}82008201.peach-history-meta {8202  display: flex;8203  flex-direction: column;8204  gap: 2px;8205  min-width: 0;8206  flex: 1;8207}82088209.peach-history-time {8210  font-size: 0.75rem;8211  font-family: 'IBM Plex Mono', ui-monospace, monospace;8212  color: var(--peach-t0);8213  white-space: nowrap;8214  overflow: hidden;8215  text-overflow: ellipsis;8216}82178218.peach-history-sub {8219  font-size: 0.625rem;8220  color: var(--peach-t2);8221  letter-spacing: 0.06em;8222  text-transform: uppercase;8223  white-space: nowrap;8224  overflow: hidden;8225  text-overflow: ellipsis;8226}82278228.peach-history-btn {8229  flex-shrink: 0;8230  white-space: nowrap;8231  min-width: 56px;8232  text-align: center;8233}82348235.peach-history-btn.is-busy {8236  opacity: 0.65;8237}82388239.peach-history-footer {8240  font-size: 0.625rem;8241  color: var(--peach-t3);8242  letter-spacing: 0.05em;8243  text-align: right;8244  margin: 0;8245  padding: 2px 0 0;8246}82478248/* ── Context menu + swipe-copy flash ─────────────────────── */8249.peach-context-menu-backdrop {8250  position: fixed;8251  inset: 0;8252  background: rgba(0, 0, 0, 0.45);8253  z-index: 100;8254  display: flex;8255  align-items: flex-end;8256  justify-content: center;8257  animation: peach-ctx-fade 140ms ease both;8258}8259.peach-context-menu {8260  width: min(360px, calc(100vw - 24px));8261  margin-bottom: max(env(safe-area-inset-bottom), 12px);8262  background: var(--peach-bg);8263  border: 1px solid var(--peach-t3);8264  border-radius: 14px;8265  padding: 6px;8266  display: flex;8267  flex-direction: column;8268  gap: 2px;8269  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);8270  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;8271}8272@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }8273@keyframes peach-ctx-rise {8274  from { transform: translateY(16px); opacity: 0; }8275  to   { transform: translateY(0);    opacity: 1; }8276}8277.peach-context-menu-item {8278  background: transparent;8279  color: var(--peach-t0);8280  border: 0;8281  border-radius: 10px;8282  padding: 12px 14px;8283  text-align: left;8284  font: inherit;8285  cursor: pointer;8286}8287.peach-context-menu-item:hover,8288.peach-context-menu-item:focus-visible {8289  background: var(--peach-t3);8290}8291.peach-context-menu-item--danger {8292  color: var(--peach-health-bad, #d96868);8293}8294.peach-context-menu-item--cancel {8295  color: var(--peach-t2);8296  margin-top: 4px;8297  border-top: 1px solid var(--peach-t3);8298  border-radius: 0 0 10px 10px;8299}83008301/* Swipe-to-copy flash */8302.peach-entry-row.is-copy-flash {8303  animation: peach-copy-flash 600ms ease both;8304}8305@keyframes peach-copy-flash {8306  0%   { background: transparent; }8307  20%  { background: rgba(217, 153, 51, 0.32); }8308  100% { background: transparent; }8309}83108311html { font-size: 16px; }83128313/* ── Recovery word entry ─────────────────────────────────────────── */8314.peach-lock-recover-link {8315  display: block;8316  width: 100%;8317  margin-top: 12px;8318  background: none;8319  border: none;8320  font-family: "IBM Plex Mono", monospace;8321  font-size: 0.625rem;8322  letter-spacing: 0.06em;8323  color: var(--peach-t2);8324  cursor: pointer;8325  text-align: center;8326  padding: 4px;8327  transition: color 120ms ease;8328}8329.peach-lock-recover-link:hover {8330  color: var(--peach-t0);8331}83328333.lock-screen--recovery {8334  display: flex;8335  flex-direction: column;8336  align-items: stretch;8337  padding: 12px 20px 24px;8338  overflow: hidden;8339}83408341.peach-recovery-nav {8342  display: flex;8343  align-items: center;8344  position: relative;8345  z-index: 1;8346  margin-bottom: 4px;8347}83488349/* Mask runes to the top decorative band only — keep inputs and the8350   bottom CTA button clear. The bottom of the popup is reserved for8351   submit buttons; rendering runes there overlaps the button glyph. */8352.peach-rune-background--recovery {8353  -webkit-mask-image: linear-gradient(8354    to bottom,8355    black 0px, black 85px,8356    transparent 110px,8357    transparent 100%8358  );8359  mask-image: linear-gradient(8360    to bottom,8361    black 0px, black 85px,8362    transparent 110px,8363    transparent 100%8364  );8365}83668367.peach-recovery-header {8368  text-align: center;8369  margin-bottom: 16px;8370  margin-top: 4px;8371}8372.peach-recovery-header .peach-onboarding-headline {8373  font-size: 1.25rem;8374  font-weight: 300;8375  letter-spacing: 0.02em;8376  margin: 0 0 4px;8377}8378.peach-recovery-header .peach-hint {8379  font-family: "IBM Plex Mono", monospace;8380  font-size: 0.625rem;8381  color: var(--peach-t2);8382  letter-spacing: 0.04em;8383  margin: 0;8384}83858386/* 12-word grid: 2 columns × 6 rows */8387.peach-recovery-grid {8388  display: grid;8389  grid-template-columns: repeat(2, 1fr);8390  gap: 12px 20px;8391  width: 100%;8392  margin-bottom: 0;8393}83948395.peach-recovery-word-slot {8396  display: flex;8397  align-items: center;8398  gap: 6px;8399  min-width: 0;8400}84018402.peach-recovery-word-index {8403  font-family: "IBM Plex Mono", monospace;8404  font-size: 0.5rem;8405  color: rgba(255, 255, 255, 0.35);8406  min-width: 14px;8407  flex-shrink: 0;8408  text-align: right;8409  letter-spacing: 0.04em;8410}84118412.peach-recovery-word-input {8413  flex: 1;8414  min-width: 0;8415  background: transparent;8416  border: none;8417  border-bottom: 1px solid rgba(255, 255, 255, 0.22);8418  color: var(--peach-t0);8419  font-family: "IBM Plex Mono", monospace;8420  font-size: 0.6875rem;8421  letter-spacing: 0.06em;8422  padding: 5px 2px 4px;8423  outline: none;8424  text-transform: lowercase;8425  transition: border-color 120ms ease;8426}8427.peach-recovery-word-input::placeholder {8428  color: rgba(255, 255, 255, 0.18);8429}8430.peach-recovery-word-input:focus {8431  border-bottom-color: var(--peach-accent);8432}84338434.peach-recovery-submit {8435  width: 100%;8436  margin-top: auto;8437}84388439.peach-recovery-new-password-form {8440  width: 100%;8441  display: flex;8442  flex-direction: column;8443  gap: 16px;8444  margin-bottom: 8px;8445}8446.peach-recovery-new-password-form .peach-newvault-field {8447  display: flex;8448  flex-direction: column;8449  gap: 4px;8450}84518452/* ── Recovery words display (post-create) ────────────────────────── */8453.lock-screen--recovery-display {8454  display: flex;8455  flex-direction: column;8456  align-items: stretch;8457  padding: 0 20px 20px;8458  min-height: 0;8459  overflow-y: auto;8460}84618462.peach-recovery-words-display {8463  width: 100%;8464  margin-bottom: 16px;8465  border: 1px solid var(--peach-t3);8466  border-radius: 8px;8467  padding: 12px 14px;8468  background: rgba(245, 240, 234, 0.04);8469}84708471.peach-recovery-words-label {8472  font-family: "IBM Plex Mono", monospace;8473  font-size: 0.5rem;8474  letter-spacing: 0.08em;8475  color: var(--peach-t2);8476  text-transform: uppercase;8477  margin-bottom: 10px;8478}84798480.peach-recovery-word-list {8481  list-style: none;8482  margin: 0;8483  padding: 0;8484  display: grid;8485  grid-template-columns: repeat(2, 1fr);8486  gap: 6px 16px;8487}84888489.peach-recovery-word-item {8490  display: flex;8491  align-items: baseline;8492  gap: 5px;8493}84948495.peach-recovery-word-num {8496  font-family: "IBM Plex Mono", monospace;8497  font-size: 0.5rem;8498  color: var(--peach-t2);8499  width: 14px;8500  flex: 0 0 14px;8501  text-align: right;8502  letter-spacing: 0.04em;8503  font-variant-numeric: tabular-nums;8504}85058506.peach-recovery-download-btn {8507  display: block;8508  margin: 10px auto 0;8509  padding: 4px 10px;8510  background: transparent;8511  border: 1px solid var(--peach-border);8512  border-radius: 6px;8513  color: var(--peach-t2);8514  font-family: "IBM Plex Mono", monospace;8515  font-size: 0.5625rem;8516  letter-spacing: 0.06em;8517  text-transform: lowercase;8518  cursor: pointer;8519  transition: border-color 0.15s, color 0.15s;8520}85218522.peach-recovery-download-btn:hover {8523  border-color: var(--peach-accent);8524  color: var(--peach-t0);8525}85268527.peach-recovery-word-text {8528  font-family: "IBM Plex Mono", monospace;8529  font-size: 0.6875rem;8530  letter-spacing: 0.06em;8531  color: var(--peach-t0);8532  text-transform: lowercase;8533}85348535.peach-hint--warning {8536  color: var(--peach-accent);8537  font-style: italic;8538}8539.peach-hint--success {8540  color: var(--peach-t2);8541  font-family: "IBM Plex Mono", monospace;8542  font-size: 0.625rem;8543  letter-spacing: 0.06em;8544}85458546/* Confirmation step */8547.peach-recovery-confirm {8548  width: 100%;8549  flex: 1;8550  display: flex;8551  flex-direction: column;8552}8553.peach-recovery-confirm-label {8554  font-family: "IBM Plex Mono", monospace;8555  font-size: 0.5625rem;8556  letter-spacing: 0.04em;8557  color: var(--peach-t2);8558  text-align: center;8559  margin: 0 0 12px;8560}8561.peach-recovery-confirm-fields {8562  display: flex;8563  flex-direction: column;8564  gap: 14px;8565  margin-bottom: 10px;8566}8567.peach-recovery-confirm-field {8568  display: flex;8569  align-items: center;8570  gap: 8px;8571}8572.peach-recovery-confirm-num {8573  font-family: "IBM Plex Mono", monospace;8574  font-size: 0.5rem;8575  color: var(--peach-t2);8576  min-width: 44px;8577  letter-spacing: 0.04em;8578}8579.peach-recovery-confirm-input {8580  flex: 1;8581  background: transparent;8582  border: none;8583  border-bottom: 1px solid var(--peach-t3);8584  color: var(--peach-t0);8585  font-family: "IBM Plex Mono", monospace;8586  font-size: 0.6875rem;8587  letter-spacing: 0.06em;8588  padding: 4px 2px 3px;8589  outline: none;8590  text-transform: lowercase;8591  transition: border-color 120ms ease;8592}8593.peach-recovery-confirm-input:focus {8594  border-bottom-color: var(--peach-accent);8595}8596.peach-recovery-confirm-input:disabled {8597  opacity: 0.4;8598  cursor: not-allowed;8599}8600.peach-recovery-confirm-btn {8601  width: 100%;8602  margin-top: auto;8603}86048605/* ============================================================8606   Sync info sheet8607   ============================================================ */86088609.peach-sync-info-backdrop {8610  position: fixed;8611  inset: 0;8612  z-index: 200;8613  background: rgba(0, 0, 0, 0.55);8614  display: flex;8615  align-items: flex-end;8616  animation: peach-fade-in 200ms ease forwards;8617}86188619@keyframes peach-fade-in {8620  from { opacity: 0; }8621  to   { opacity: 1; }8622}86238624.peach-sync-info-sheet {8625  width: 100%;8626  background: var(--peach-bg-card, var(--peach-bg));8627  border-top-left-radius: 20px;8628  border-top-right-radius: 20px;8629  padding: 12px 24px 32px;8630  display: flex;8631  flex-direction: column;8632  gap: 20px;8633  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;8634}86358636@keyframes peach-sheet-up {8637  from { transform: translateY(100%); }8638  to   { transform: translateY(0); }8639}86408641.peach-sync-info-handle {8642  width: 36px;8643  height: 4px;8644  border-radius: 2px;8645  background: var(--peach-border);8646  margin: 0 auto 4px;8647  flex-shrink: 0;8648}86498650.peach-sync-info-title {8651  font-family: 'Cormorant Garamond', serif;8652  font-style: italic;8653  font-size: 26px;8654  font-weight: 600;8655  color: var(--peach-t0);8656  margin: 0;8657  line-height: 1.2;8658}86598660.peach-sync-info-body {8661  display: flex;8662  flex-direction: column;8663  gap: 14px;8664}86658666.peach-sync-info-point {8667  display: flex;8668  gap: 12px;8669  align-items: flex-start;8670  font-size: 14px;8671  color: var(--peach-t2);8672  line-height: 1.6;8673  margin: 0;8674}86758676.peach-sync-info-icon {8677  color: var(--peach-accent);8678  font-size: 16px;8679  flex-shrink: 0;8680  margin-top: 1px;8681}86828683.peach-sync-info-actions {8684  display: flex;8685  flex-direction: column;8686  gap: 12px;8687  margin-top: 4px;8688}86898690.peach-sync-info-pro-link {8691  background: none;8692  border: none;8693  font-size: 13px;8694  color: var(--peach-t3);8695  cursor: pointer;8696  padding: 0;8697  font-family: inherit;8698  text-align: center;8699  transition: color 150ms ease;8700}87018702.peach-sync-info-pro-link:hover {8703  color: var(--peach-accent);8704}87058706.peach-btn--full {8707  width: 100%;8708}87098710/* ── Sync screen ── */87118712.peach-sync-coming-soon {8713  display: flex;8714  align-items: flex-start;8715  gap: 10px;8716  padding: 12px 14px;8717  background: var(--peach-s1);8718  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8719  border-radius: 10px;8720}8721.peach-sync-coming-soon__icon {8722  flex-shrink: 0;8723  color: var(--peach-accent);8724  margin-top: 1px;8725  line-height: 0;8726}8727.peach-sync-coming-soon__title {8728  font-family: 'Cormorant Garamond', serif;8729  font-weight: 500;8730  font-size: 13px;8731  color: var(--peach-accent);8732  margin: 0 0 5px;8733  line-height: 1.3;8734}8735.peach-sync-coming-soon__body {8736  font-size: 12px;8737  color: var(--peach-t1);8738  line-height: 1.55;8739  margin: 0;8740}87418742.peach-sync-screen {8743  display: flex;8744  flex-direction: column;8745  height: 100%;8746}87478748.peach-sync-content {8749  flex: 1;8750  overflow-y: auto;8751  padding: 24px 20px 40px;8752  display: flex;8753  flex-direction: column;8754  gap: 24px;8755}87568757/* Intro (State A) */8758.peach-sync-headline {8759  font-family: 'Cormorant Garamond', serif;8760  font-style: italic;8761  font-size: 28px;8762  font-weight: 600;8763  color: var(--peach-t0);8764  margin: 0 0 10px;8765  line-height: 1.2;8766}87678768.peach-sync-intro-body {8769  font-size: 14px;8770  color: var(--peach-t1);8771  line-height: 1.6;8772  margin: 0;8773}87748775.peach-sync-pro-note {8776  display: flex;8777  flex-direction: column;8778  gap: 8px;8779  background: var(--peach-t3);8780  border-radius: 10px;8781  padding: 12px 14px;8782}87838784.peach-sync-pro-note-text {8785  font-size: 12px;8786  color: var(--peach-t2);8787  line-height: 1.5;8788  margin: 0;8789}87908791.peach-sync-pro-link {8792  background: none;8793  border: none;8794  font-size: 12px;8795  color: var(--peach-accent);8796  cursor: pointer;8797  padding: 0;8798  font-family: inherit;8799  text-align: left;8800}88018802/* Status (State C) */8803.peach-sync-status {8804  padding: 12px 0;8805  border-bottom: 1px solid var(--peach-border);8806}88078808.peach-sync-status-row {8809  display: flex;8810  align-items: center;8811  gap: 8px;8812}88138814.peach-sync-dot {8815  width: 7px;8816  height: 7px;8817  border-radius: 50%;8818  flex-shrink: 0;8819}88208821.peach-sync-dot--green { background: var(--peach-health-ok); }8822.peach-sync-dot--amber { background: var(--peach-accent); }88238824.peach-sync-status-text {8825  font-family: 'IBM Plex Mono', monospace;8826  font-size: 11px;8827  color: var(--peach-t2);8828}88298830/* Paired devices */8831.peach-sync-section {8832  display: flex;8833  flex-direction: column;8834  gap: 2px;8835}88368837.peach-sync-section-label {8838  font-family: 'IBM Plex Mono', monospace;8839  font-size: 10px;8840  letter-spacing: 0.1em;8841  color: var(--peach-t3);8842  margin: 0 0 10px;8843}88448845.peach-sync-device-row {8846  display: flex;8847  justify-content: space-between;8848  align-items: baseline;8849  padding: 10px 0;8850  border-bottom: 1px solid var(--peach-border);8851  gap: 12px;8852}88538854.peach-sync-device-name {8855  font-size: 14px;8856  color: var(--peach-t1);8857}88588859.peach-sync-device-meta {8860  font-family: 'IBM Plex Mono', monospace;8861  font-size: 11px;8862  color: var(--peach-t3);8863  white-space: nowrap;8864}88658866.peach-sync-hub-note {8867  padding: 14px 16px;8868  border: 1px solid var(--peach-border);8869  border-radius: 10px;8870  display: flex;8871  flex-direction: column;8872  gap: 6px;8873  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8874}88758876.peach-sync-hub-note-title {8877  font-size: 13px;8878  font-weight: 600;8879  color: var(--peach-t0);8880  margin: 0;8881}88828883.peach-sync-hub-note-body {8884  font-size: 12px;8885  color: var(--peach-t2);8886  line-height: 1.6;8887  margin: 0;8888}88898890/* Action buttons */8891.peach-sync-actions {8892  display: flex;8893  gap: 10px;8894  flex-wrap: wrap;8895}88968897/* Upgrade prompt (State B) */8898.peach-sync-upgrade {8899  display: flex;8900  flex-direction: column;8901  gap: 12px;8902  padding: 16px;8903  border: 1px solid var(--peach-border);8904  border-radius: 10px;8905}89068907.peach-sync-upgrade-text {8908  font-size: 13px;8909  color: var(--peach-t2);8910  line-height: 1.6;8911  margin: 0;8912}89138914/* Network note */8915.peach-sync-network-note {8916  font-size: 12px;8917  color: var(--peach-t3);8918  line-height: 1.6;8919  margin: 0;8920}89218922/* Advanced */8923.peach-sync-advanced {8924  margin-top: auto;8925  padding-top: 16px;8926  border-top: 1px solid var(--peach-border);8927}89288929.peach-sync-advanced-toggle {8930  display: flex;8931  align-items: center;8932  gap: 8px;8933  background: none;8934  border: none;8935  font-family: 'IBM Plex Mono', monospace;8936  font-size: 11px;8937  letter-spacing: 0.08em;8938  color: var(--peach-t3);8939  cursor: pointer;8940  padding: 0;8941  text-transform: uppercase;8942}89438944.peach-sync-advanced-chevron {8945  display: inline-block;8946  transition: transform 200ms ease;8947  font-size: 10px;8948}89498950.peach-sync-advanced-chevron.is-open {8951  transform: rotate(90deg);8952}89538954.peach-sync-advanced-content {8955  margin-top: 14px;8956}89578958.peach-sync-advanced-row {8959  display: flex;8960  justify-content: space-between;8961  align-items: center;8962  gap: 16px;8963}89648965.peach-sync-advanced-title {8966  font-size: 14px;8967  color: var(--peach-t1);8968  margin: 0 0 2px;8969}89708971.peach-sync-advanced-subtitle {8972  font-size: 12px;8973  color: var(--peach-t3);8974  margin: 0;8975  line-height: 1.5;8976}89778978/* ── Notes Mode ── */89798980/* Overlay that crossfades over the vault */8981.peach-notes-overlay {8982  position: fixed;8983  inset: 0;8984  z-index: 90;8985  opacity: 0;8986  pointer-events: none;8987  animation: peach-mode-in 220ms ease-in forwards;8988}89898990.peach-notes-overlay.is-visible {8991  opacity: 1;8992  pointer-events: auto;8993}89948995@keyframes peach-mode-in {8996  from { opacity: 0; }8997  to   { opacity: 1; }8998}89999000/* Top-level notes surface */9001.peach-notes-mode {9002  position: absolute;9003  inset: 0;9004  background: var(--peach-bg);9005  display: flex;9006  flex-direction: column;9007}90089009/* Rune canvas positioned behind content */9010.peach-note-rune-canvas {9011  position: absolute;9012  inset: 0;9013  width: 100%;9014  height: 100%;9015  pointer-events: none;9016  z-index: 0;9017}90189019/* TOC wrapper */9020.peach-notes-toc-wrapper {9021  position: absolute;9022  inset: 0;9023  z-index: 1;9024  opacity: 1;9025  pointer-events: auto;9026  transition: opacity 200ms ease;9027}90289029.peach-notes-toc-wrapper.is-hidden {9030  opacity: 0;9031  pointer-events: none;9032}90339034/* Editor wrapper */9035.peach-notes-editor-wrapper {9036  position: absolute;9037  inset: 0;9038  z-index: 2;9039  opacity: 0;9040  pointer-events: none;9041  transition: opacity 200ms ease;9042}90439044.peach-notes-editor-wrapper.is-visible {9045  opacity: 1;9046  pointer-events: auto;9047}90489049/* TOC inner */9050.peach-notes-toc {9051  position: relative;9052  display: flex;9053  flex-direction: column;9054  height: 100%;9055  padding-top: env(safe-area-inset-top, 0px);9056  padding-bottom: env(safe-area-inset-bottom, 0px);9057}90589059/* Shared header */9060.peach-notes-header {9061  display: flex;9062  align-items: center;9063  padding: 12px 16px;9064  gap: 12px;9065  flex-shrink: 0;9066  min-height: 52px;9067  position: relative;9068  z-index: 2;9069}90709071.peach-notes-back {9072  font-size: 22px;9073  color: var(--peach-t2);9074  background: none;9075  border: none;9076  padding: 4px;9077  cursor: pointer;9078  line-height: 1;9079  flex-shrink: 0;9080  transition: color 150ms ease;9081  -webkit-tap-highlight-color: transparent;9082}90839084.peach-notes-back:active { color: var(--peach-t0); }90859086.peach-notes-header-title {9087  flex: 1;9088  font-family: 'Cormorant Garamond', serif;9089  font-style: italic;9090  font-size: 22px;9091  color: var(--peach-t0);9092  text-align: center;9093}90949095.peach-notes-header-title.is-breadcrumb {9096  font-family: 'IBM Plex Mono', monospace;9097  font-style: normal;9098  font-size: 11px;9099  color: var(--peach-t3);9100  letter-spacing: 0.08em;9101  text-transform: uppercase;9102  cursor: pointer;9103}91049105.peach-notes-header-actions {9106  display: flex;9107  gap: 8px;9108  flex-shrink: 0;9109}91109111.peach-notes-header-btn {9112  width: 36px;9113  height: 36px;9114  display: flex;9115  align-items: center;9116  justify-content: center;9117  background: none;9118  border: none;9119  color: var(--peach-t2);9120  cursor: pointer;9121  border-radius: 8px;9122  font-size: 16px;9123  transition: color 150ms ease, background 150ms ease;9124  -webkit-tap-highlight-color: transparent;9125}91269127.peach-notes-header-btn:active {9128  background: rgba(255,255,255,0.06);9129  color: var(--peach-t0);9130}91319132/* The header + glyph is larger than the search svg so the two right-side9133 * buttons feel visually balanced. The base .peach-notes-header-btn caps font9134 * at 16px which would render the + too small. */9135.peach-notes-new-btn-icon {9136  font-size: 22px;9137  font-weight: 300;9138  line-height: 1;9139}91409141/* Inline search bar */9142.peach-notes-search-input {9143  flex: 1;9144  background: none;9145  border: none;9146  outline: none;9147  font-family: 'IBM Plex Mono', monospace;9148  font-size: 13px;9149  color: var(--peach-t0);9150  padding: 4px 0;9151  letter-spacing: 0.02em;9152}91539154.peach-notes-search-input::placeholder {9155  color: var(--peach-t3);9156}91579158/* TOC list */9159.peach-notes-list-container {9160  flex: 1;9161  overflow-y: auto;9162  overflow-x: hidden;9163  scrollbar-width: none;9164  -webkit-overflow-scrolling: touch;9165  overscroll-behavior: contain;9166  position: relative;9167  z-index: 1;9168}91699170.peach-notes-list-container::-webkit-scrollbar { display: none; }91719172/* Note row */9173.peach-note-row {9174  position: relative;9175  display: grid;9176  grid-template-columns: 44px 8px 1fr 8px auto;9177  align-items: center;9178  min-height: 72px;9179  padding: 16px 20px;9180  border-bottom: 0.5px solid var(--peach-border);9181  cursor: pointer;9182  overflow: hidden;9183  touch-action: pan-y;9184  user-select: none;9185  -webkit-user-select: none;9186  -webkit-tap-highlight-color: transparent;9187}91889189.peach-note-row:first-child {9190  border-top: 0.5px solid var(--peach-border);9191}91929193.peach-note-row:active {9194  background: rgba(255,255,255,0.02);9195}91969197.peach-note-numeral {9198  font-family: 'Cormorant Garamond', serif;9199  font-style: italic;9200  font-size: 15px;9201  color: var(--peach-accent);9202  text-align: right;9203  line-height: 1;9204  flex-shrink: 0;9205}92069207.peach-note-title-gap { /* grid spacer */ }92089209.peach-note-title {9210  font-family: 'Cormorant Garamond', serif;9211  font-style: italic;9212  font-size: 18px;9213  color: var(--peach-t0);9214  line-height: 1.3;9215  min-width: 0;9216  overflow-wrap: break-word;9217}92189219.peach-note-title-match {9220  color: var(--peach-accent);9221}92229223.peach-note-date {9224  font-family: 'IBM Plex Mono', monospace;9225  font-size: 11px;9226  color: var(--peach-t2);9227  white-space: nowrap;9228  text-align: right;9229  flex-shrink: 0;9230  grid-column: 5;9231}92329233/* Swipe underlays */9234.peach-note-row-underlay {9235  position: absolute;9236  inset: 0;9237  display: flex;9238  align-items: center;9239  padding: 0 24px;9240  font-family: 'IBM Plex Mono', monospace;9241  font-size: 11px;9242  letter-spacing: 0.1em;9243  pointer-events: none;9244  z-index: 0;9245}92469247.peach-note-row-underlay--delete {9248  background: #8B2020;9249  color: rgba(255,255,255,0.9);9250  justify-content: flex-end;9251}92529253.peach-note-row-underlay--archive {9254  background: var(--peach-accent);9255  color: #0C0A06;9256  justify-content: flex-start;9257}92589259/* Delete confirm strip */9260.peach-note-delete-confirm {9261  position: absolute;9262  inset: 0;9263  background: var(--peach-bg);9264  display: flex;9265  align-items: center;9266  gap: 12px;9267  padding: 0 20px;9268  font-family: 'IBM Plex Mono', monospace;9269  font-size: 11px;9270  color: var(--peach-t1);9271  letter-spacing: 0.04em;9272  animation: peach-delete-confirm-in 150ms ease both;9273  z-index: 10;9274}92759276@keyframes peach-delete-confirm-in {9277  from { opacity: 0; }9278  to   { opacity: 1; }9279}92809281.peach-note-delete-confirm-btn {9282  background: #8B2020;9283  color: rgba(255,255,255,0.9);9284  border: none;9285  border-radius: 6px;9286  padding: 4px 10px;9287  font-family: 'IBM Plex Mono', monospace;9288  font-size: 10px;9289  cursor: pointer;9290  letter-spacing: 0.06em;9291}92929293.peach-note-delete-cancel-btn {9294  background: none;9295  border: none;9296  color: var(--peach-t3);9297  font-family: 'IBM Plex Mono', monospace;9298  font-size: 10px;9299  cursor: pointer;9300  letter-spacing: 0.06em;9301  padding: 4px 6px;9302}93039304/* + New note button */9305.peach-notes-new-btn {9306  font-family: 'IBM Plex Mono', monospace;9307  font-size: 12px;9308  color: var(--peach-t3);9309  text-align: center;9310  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));9311  background: none;9312  border: none;9313  width: 100%;9314  cursor: pointer;9315  letter-spacing: 0.04em;9316  transition: color 150ms ease;9317  -webkit-tap-highlight-color: transparent;9318}93199320.peach-notes-new-btn:active { color: var(--peach-accent); }93219322/* Empty state */9323.peach-notes-empty {9324  display: flex;9325  flex-direction: column;9326  align-items: center;9327  justify-content: center;9328  flex: 1;9329  padding: 48px 32px;9330  gap: 16px;9331}93329333.peach-notes-empty-text {9334  font-family: 'Cormorant Garamond', serif;9335  font-style: italic;9336  font-size: 20px;9337  color: var(--peach-t3);9338  text-align: center;9339  margin: 0;9340  line-height: 1.4;9341  white-space: pre-line;9342}93439344/* ── Editor surface ── */93459346.peach-note-editor-surface {9347  position: absolute;9348  inset: 0;9349  background: var(--peach-bg);9350  display: flex;9351  flex-direction: column;9352  padding-top: env(safe-area-inset-top, 0px);9353}93549355.peach-note-editor-scroll {9356  flex: 1;9357  overflow-y: auto;9358  overflow-x: hidden;9359  scrollbar-width: none;9360  -webkit-overflow-scrolling: touch;9361  padding: 0 24px 120px;9362  position: relative;9363  z-index: 1;9364}93659366.peach-note-editor-scroll::-webkit-scrollbar { display: none; }93679368/* Desktop toolbar (always visible above body) */9369.peach-note-toolbar-desktop-inline {9370  display: flex;9371  align-items: center;9372  gap: 2px;9373  padding: 6px 0 12px;9374  margin-bottom: 4px;9375  border-bottom: 0.5px solid var(--peach-border);9376}93779378/* Title field */9379.peach-note-title-field {9380  font-family: 'Cormorant Garamond', serif;9381  font-style: italic;9382  font-size: 32px;9383  font-weight: 600;9384  color: var(--peach-t0);9385  line-height: 1.2;9386  padding: 8px 0 0;9387  outline: none;9388  min-height: 44px;9389  word-break: break-word;9390  position: relative;9391  z-index: 1;9392}93939394.peach-note-title-field:empty::before {9395  content: attr(data-placeholder);9396  color: var(--peach-t3);9397  pointer-events: none;9398}93999400/* Hairline separator */9401.peach-note-hairline {9402  height: 0.5px;9403  background: var(--peach-border);9404  margin: 12px 0 20px;9405  position: relative;9406  z-index: 1;9407}94089409/* Body field */9410.peach-note-body-field {9411  font-family: 'DM Sans', sans-serif;9412  font-size: 16px;9413  color: var(--peach-t0);9414  line-height: 1.85;9415  padding: 0;9416  outline: none;9417  min-height: 240px;9418  word-break: break-word;9419  position: relative;9420  z-index: 1;9421}94229423.peach-note-body-field:empty::before {9424  content: attr(data-placeholder);9425  color: var(--peach-t3);9426  font-style: italic;9427  pointer-events: none;9428}94299430.peach-note-body-field h2 {9431  font-family: 'Cormorant Garamond', serif;9432  font-style: italic;9433  font-size: 22px;9434  font-weight: 600;9435  color: var(--peach-t0);9436  margin: 20px 0 8px;9437}94389439.peach-note-body-field blockquote {9440  border-left: 2px solid var(--peach-accent);9441  margin: 12px 0;9442  padding-left: 16px;9443  color: var(--peach-t1);9444  font-style: italic;9445}94469447.peach-note-body-field ul,9448.peach-note-body-field ol {9449  padding-left: 20px;9450  margin: 8px 0;9451}94529453.peach-note-body-field li {9454  margin: 4px 0;9455}94569457.peach-note-body-field hr {9458  border: none;9459  border-top: 0.5px solid var(--peach-border);9460  margin: 16px 0;9461}94629463/* Saved indicator */9464.peach-note-saved-indicator {9465  font-family: 'IBM Plex Mono', monospace;9466  font-size: 11px;9467  color: var(--peach-t3);9468  letter-spacing: 0.04em;9469  text-align: right;9470  padding: 6px 24px;9471  flex-shrink: 0;9472  transition: opacity 300ms ease;9473  pointer-events: none;9474  position: relative;9475  z-index: 1;9476}94779478/* Mobile keyboard toolbar */9479.peach-note-toolbar-mobile {9480  display: flex;9481  align-items: center;9482  padding: 8px 16px;9483  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));9484  background: var(--peach-bg);9485  border-top: 0.5px solid var(--peach-border);9486  gap: 4px;9487  flex-shrink: 0;9488  position: relative;9489  z-index: 10;9490}94919492.peach-note-toolbar-btn {9493  min-width: 36px;9494  height: 36px;9495  display: flex;9496  align-items: center;9497  justify-content: center;9498  background: none;9499  border: none;9500  border-radius: 8px;9501  cursor: pointer;9502  font-size: 14px;9503  color: var(--peach-t1);9504  font-family: 'DM Sans', sans-serif;9505  font-weight: 600;9506  transition: background 100ms ease, color 100ms ease;9507  -webkit-tap-highlight-color: transparent;9508}95099510.peach-note-toolbar-btn--italic { font-style: italic; }9511.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }9512.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }95139514.peach-note-toolbar-divider {9515  width: 0.5px;9516  height: 20px;9517  background: var(--peach-border);9518  margin: 0 4px;9519  flex-shrink: 0;9520}95219522.peach-note-toolbar-spacer { flex: 1; }95239524/* Desktop: larger headline in TOC */9525@media (min-width: 400px) {9526  .peach-notes-header-title:not(.is-breadcrumb) {9527    font-size: 32px;9528  }95299530  .peach-note-row {9531    min-height: 64px;9532    padding: 14px 16px;9533  }9534}95359536/* Flying title — shared element during expansion/collapse */95379538/* ─── Light theme overrides ───────────────────────────────────────────────9539   Tokens that cannot be expressed as variable substitutions — hardcoded9540   context-specific values that need separate light-mode rules. */95419542/* Settings section headers: use text-label (#79766F) per restoration brief —9543   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY9544   presence without fighting the light parchment background. */9545.light .peach-settings-sub-label,9546[data-theme="light"] .peach-settings-sub-label,9547.light .peach-settings-nav-label,9548[data-theme="light"] .peach-settings-nav-label {9549  color: #79766F;9550}95519552/* Secondary action buttons (ghost / subtle): filled with input-well surface9553   so they read as recessed against the parchment card background. */9554.light .peach-btn--ghost:not(.peach-icon-btn),9555[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {9556  background: #EEE7DD;9557  border-color: #DDD5CB;9558  color: #1A1208;9559}9560.light .peach-icon-btn,9561[data-theme="light"] .peach-icon-btn {9562  background: transparent;9563  border-color: transparent;9564}9565.light .peach-btn--subtle,9566[data-theme="light"] .peach-btn--subtle {9567  background: #EEE7DD;9568  border-color: #DDD5CB;9569}95709571/* Wide secondary action button on the lock screen — override the9572   hardcoded dark-mode rgba values with warm parchment equivalents. */9573.light .peach-lock-secondary,9574[data-theme="light"] .peach-lock-secondary {9575  background: #EEE7DD;9576  border-color: #DDD5CB;9577  color: #1A1208;9578}9579.light .peach-lock-secondary:hover,9580[data-theme="light"] .peach-lock-secondary:hover {9581  background: #F0E9DF;9582}95839584/* Entry row hover: bg-row lifts the row above the card surface. */9585.light .peach-entry-row:hover,9586[data-theme="light"] .peach-entry-row:hover {9587  background: #F2EBE1;9588}9589.light .peach-entry-row.is-active,9590[data-theme="light"] .peach-entry-row.is-active {9591  background: #F2EBE1;9592}9593.light .peach-entry-row.is-selected,9594[data-theme="light"] .peach-entry-row.is-selected {9595  background: #F5EDE2;9596}95979598/* ──────────────────────────────────────────────────────────────────────────9599   Pair-device flow — bird-stage animation (Phase 1)9600   See src/popup/components/PairingBirds.tsx and the brief §6.2.9601   Three-act animation gated on the [data-phase] attribute of9602   .peach-pair-pair; child layers (birds, sound arcs, flight wave, dot)9603   each react via either pose class or visibility flag.9604   Tokens: accent surfaces use var(--peach-accent); bird illustration9605   colours are baked into the SVG per the brand-peach exception in §3.1.9606   ────────────────────────────────────────────────────────────────────── */96079608.peach-pair-pair {9609  position: absolute;9610  inset: 0;9611  z-index: 3;9612  display: flex;9613  flex-direction: column;9614  padding: 14px 12px 12px;9615  width: 100%;9616  box-sizing: border-box;9617  gap: 0;9618  background:9619    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9620    var(--peach-bg);9621  color: var(--peach-t0);9622  overflow-y: auto;9623  overflow-x: hidden;9624  scrollbar-width: none;9625  isolation: isolate;9626  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9627}9628@keyframes peach-pair-overlay-in {9629  from { opacity: 0; transform: translateY(8px); }9630  to   { opacity: 1; transform: translateY(0); }9631}9632.peach-pair-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }9633.peach-pair-pair::before {9634  content: '';9635  position: absolute;9636  inset: 0;9637  border-radius: inherit;9638  pointer-events: none;9639  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9640  z-index: 0;9641}9642.peach-pair-pair > * { position: relative; z-index: 1; }96439644/* Header --------------------------------------------------------------- */9645.peach-pair-head {9646  display: flex; align-items: center; gap: 10px;9647}9648.peach-pair-back {9649  width: 32px; height: 32px;9650  display: inline-flex; align-items: center; justify-content: center;9651  background: transparent;9652  border: none;9653  border-radius: 8px;9654  color: var(--peach-t1);9655  cursor: pointer;9656  transition: color 0.15s ease, box-shadow 0.15s ease;9657}9658.peach-pair-back:hover {9659  color: var(--peach-accent);9660  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9661}9662.peach-pair-title {9663  font-family: var(--font-display, Georgia, serif);9664  font-style: italic;9665  font-size: 24px;9666  font-weight: 500;9667  letter-spacing: 0.005em;9668  color: var(--peach-t0);9669  line-height: 1;9670}9671.peach-pair-head-spacer { flex: 1; }96729673/* Chip row ------------------------------------------------------------- */9674.peach-pair-chip-row {9675  display: flex;9676  align-items: center;9677  justify-content: flex-start;9678  margin-top: 12px;9679}9680.peach-pair-chip {9681  display: inline-flex; align-items: center; gap: 8px;9682  padding: 5px 10px 5px 8px;9683  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9684  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9685  border-radius: 999px;9686  font-family: var(--peach-mono, ui-monospace, monospace);9687  font-size: 11px;9688  letter-spacing: 0.04em;9689  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9690}9691.peach-pair-chip-dot {9692  width: 6px; height: 6px; border-radius: 50%;9693  background: var(--peach-accent);9694  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9695}9696.peach-pair-chip[data-phase="paired"] {9697  background: color-mix(in srgb, #4f9eda 12%, transparent);9698  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9699  color: #76b6e8;9700}9701.peach-pair-chip[data-phase="paired"] .peach-pair-chip-dot {9702  background: #76b6e8;9703  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9704}9705.peach-pair-chip[data-phase="timeout"],9706.peach-pair-chip[data-phase="mic_denied"],9707.peach-pair-chip[data-phase="version_mismatch"],9708.peach-pair-chip[data-phase="handshake_failed"] {9709  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9710  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9711  color: var(--peach-warn, #d29257);9712}9713.peach-pair-chip[data-phase="timeout"] .peach-pair-chip-dot,9714.peach-pair-chip[data-phase="mic_denied"] .peach-pair-chip-dot,9715.peach-pair-chip[data-phase="version_mismatch"] .peach-pair-chip-dot,9716.peach-pair-chip[data-phase="handshake_failed"] .peach-pair-chip-dot {9717  background: var(--peach-warn, #d29257);9718  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9719}972097219722/* Bird stage ----------------------------------------------------------- */9723.peach-pair-stage {9724  position: relative;9725  height: 180px;9726  margin: 8px auto 18px;9727  width: 300px;9728  display: flex;9729  align-items: flex-end;9730  justify-content: center;9731}9732.peach-pair-bird-slot {9733  position: absolute;9734  bottom: 0;9735  width: 108px;9736  height: 108px;9737  transform-origin: 50% 95%;9738}9739.peach-pair-bird-slot-desktop { left: 12px; }9740.peach-pair-bird-slot-mobile { right: 12px; }9741.peach-pair-stage.act-handshake .peach-pair-bird-slot-desktop,9742.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop {9743  transform: translateX(6px);9744  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9745}9746.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop { --bb-x: 6px; }9747.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { --bb-x: -6px; }9748.peach-pair-stage.act-paired .peach-pair-bird-slot {9749  animation: peach-pair-happy-bob 1.2s ease-in-out infinite;9750}9751.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { animation-delay: 0.2s; }9752@keyframes peach-pair-happy-bob {9753  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9754  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9755}97569757/* Bird internal -------------------------------------------------------- */9758.peach-pair-bird {9759  width: 108px;9760  height: 108px;9761  transform-origin: 50% 95%;9762}9763.peach-pair-bird svg { width: 100%; height: 100%; overflow: visible; }97649765.peach-pair-bird-body {9766  transform-origin: 50% 80%;9767  animation: peach-pair-bird-bob 2.4s ease-in-out infinite;9768}9769.peach-pair-bird-pose-chirping .peach-pair-bird-body { animation-duration: 1.4s; }9770.peach-pair-bird-pose-happy .peach-pair-bird-body   { animation: peach-pair-bird-celebrate 0.9s ease-in-out infinite; }9771.peach-pair-bird-pose-attentive .peach-pair-bird-body { animation-duration: 2.0s; }97729773@keyframes peach-pair-bird-bob {9774  0%, 100% { transform: translateY(0) rotate(0deg); }9775  50%      { transform: translateY(-2px) rotate(-1deg); }9776}9777@keyframes peach-pair-bird-celebrate {9778  0%, 100% { transform: translateY(0) rotate(0deg); }9779  25%      { transform: translateY(-4px) rotate(-2deg); }9780  75%      { transform: translateY(-4px) rotate(2deg); }9781}97829783.peach-pair-bird-wing {9784  transform-origin: 50% 50%;9785  animation: peach-pair-bird-flap 0.9s ease-in-out infinite;9786}9787.peach-pair-bird-pose-happy .peach-pair-bird-wing { animation-duration: 0.35s; }9788.peach-pair-bird-pose-attentive .peach-pair-bird-wing { animation-duration: 1.4s; }9789@keyframes peach-pair-bird-flap {9790  0%, 100% { transform: scaleY(1); }9791  50%      { transform: scaleY(0.85); }9792}97939794.peach-pair-bird-head-group {9795  transform-origin: 95px 52px;9796  animation: peach-pair-bird-bob-head 2.6s ease-in-out infinite;9797}9798.peach-pair-bird-pose-chirping .peach-pair-bird-head-group { animation-duration: 0.45s; }9799.peach-pair-bird-pose-attentive .peach-pair-bird-head-group { animation: none; }9800@keyframes peach-pair-bird-bob-head {9801  0%, 100% { transform: rotate(0deg); }9802  50%      { transform: rotate(3deg); }9803}98049805.peach-pair-bird-eye-group { transform-origin: center; }9806.peach-pair-bird-blink { animation: peach-pair-bird-blink 4s ease-in-out infinite; }9807@keyframes peach-pair-bird-blink {9808  0%, 92%, 100% { transform: scaleY(1); }9809  95%           { transform: scaleY(0.1); }9810}98119812.peach-pair-bird-aura {9813  animation: peach-pair-bird-aura 2.6s ease-in-out infinite;9814}9815.peach-pair-bird-pose-happy .peach-pair-bird-aura { animation-duration: 1.4s; }9816@keyframes peach-pair-bird-aura {9817  0%, 100% { opacity: 0; }9818  50%      { opacity: 0.18; }9819}98209821.peach-pair-bird-tail {9822  transform-origin: 50% 100%;9823  animation: peach-pair-bird-tail-wag 3s ease-in-out infinite;9824}9825@keyframes peach-pair-bird-tail-wag {9826  0%, 100% { transform: rotate(0deg); }9827  50%      { transform: rotate(2deg); }9828}98299830.peach-pair-bird-pose-happy .peach-pair-bird-shadow { animation: peach-pair-bird-shadow-pulse 0.9s ease-in-out infinite; }9831@keyframes peach-pair-bird-shadow-pulse {9832  0%, 100% { transform: scaleX(1); opacity: 0.45; }9833  50%      { transform: scaleX(0.92); opacity: 0.3; }9834}98359836/* Per-pose variants --------------------------------------------------- */9837.peach-pair-bird-pose-sad .peach-pair-bird-head-group { transform: translateY(4px) rotate(8deg); }9838.peach-pair-bird-pose-sad .peach-pair-bird-tuft { transform: rotate(15deg) translateY(2px); }9839.peach-pair-bird-pose-sad .peach-pair-bird-tail { transform: rotate(8deg) translateY(2px); }9840.peach-pair-bird-pose-hidden { opacity: 0; }98419842/* Rest state — bird stage at idle pose, primary CTA + paired list */9843.peach-pair-pair[data-phase="idle"] .peach-pair-stage {9844  height: 160px;9845}98469847/* Sound arcs ----------------------------------------------------------- */9848.peach-pair-arcs {9849  position: absolute;9850  top: 18px;9851  width: 96px;9852  height: 70px;9853  pointer-events: none;9854}9855.peach-pair-arcs-right { right: -60px; }9856.peach-pair-arcs-left  { left: -60px; transform: scaleX(-1); }9857.peach-pair-arc {9858  position: absolute;9859  top: 50%;9860  left: 0;9861  width: 40px;9862  height: 40px;9863  margin-top: -20px;9864  border: 1.2px solid #f4d5a8;9865  border-color: transparent #f4d5a8 transparent transparent;9866  border-radius: 50%;9867  opacity: 0;9868  animation: peach-pair-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9869}9870@keyframes peach-pair-arc-expand {9871  0%   { transform: scale(0.4); opacity: 0; }9872  20%  { opacity: 0.9; }9873  100% { transform: scale(1.6); opacity: 0; }9874}98759876/* Flight wave ---------------------------------------------------------- */9877.peach-pair-flight-track {9878  position: absolute;9879  inset: 32px 36px 38px 36px;9880  pointer-events: none;9881}9882.peach-pair-flight-wave {9883  position: absolute;9884  top: 8px;9885  left: 76px;9886  right: 76px;9887  height: 60px;9888  width: auto;9889  opacity: 0;9890  transition: opacity 0.15s ease;9891  stroke: #f4d5a8;9892  fill: none;9893}9894.peach-pair-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9895.peach-pair-flight-wave.is-visible { opacity: 1; }9896.peach-pair-flight-path,9897.peach-pair-flight-path-2 {9898  stroke-dasharray: 240;9899  stroke-dashoffset: 240;9900  stroke-linecap: round;9901  fill: none;9902}9903.peach-pair-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9904.peach-pair-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9905.peach-pair-flight-wave.is-visible .peach-pair-flight-path {9906  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9907}9908.peach-pair-flight-wave.is-visible .peach-pair-flight-path-2 {9909  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9910}9911@keyframes peach-pair-fly {9912  0%   { stroke-dashoffset: 240; opacity: 0; }9913  20%  { opacity: 1; }9914  100% { stroke-dashoffset: -120; opacity: 0; }9915}99169917/* Connection dot ------------------------------------------------------- */9918.peach-pair-dot {9919  position: absolute;9920  top: 50%; left: 50%;9921  transform: translate(-50%, -50%);9922  width: 40px; height: 40px;9923  opacity: 0;9924  pointer-events: none;9925  transition: opacity 0.3s ease;9926  color: var(--peach-accent);9927}9928.peach-pair-dot.is-visible { opacity: 1; }9929.peach-pair-dot-glow {9930  position: absolute; top: 50%; left: 50%;9931  transform: translate(-50%, -50%);9932  width: 38px; height: 38px;9933  border-radius: 50%;9934  filter: blur(10px);9935  opacity: 0.55;9936  background: var(--peach-accent);9937  animation: peach-pair-dot-bloom 1.4s ease-out;9938}9939.peach-pair-dot-core {9940  position: absolute; top: 50%; left: 50%;9941  transform: translate(-50%, -50%);9942  width: 8px; height: 8px;9943  border-radius: 50%;9944  background: var(--peach-accent);9945  box-shadow: 0 0 12px currentColor;9946  animation: peach-pair-dot-core 1.4s ease-out;9947}9948.peach-pair-dot-ring {9949  position: absolute; top: 50%; left: 50%;9950  width: 60px; height: 60px;9951  transform: translate(-50%, -50%);9952  animation: peach-pair-dot-ring 1.4s linear;9953  stroke: var(--peach-accent);9954}9955@keyframes peach-pair-dot-bloom {9956  0%   { width: 4px; height: 4px; opacity: 0; }9957  35%  { width: 60px; height: 60px; opacity: 0.7; }9958  100% { width: 38px; height: 38px; opacity: 0.55; }9959}9960@keyframes peach-pair-dot-core {9961  0%   { width: 0; height: 0; }9962  35%  { width: 12px; height: 12px; }9963  100% { width: 8px; height: 8px; }9964}9965@keyframes peach-pair-dot-ring {9966  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9967  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9968  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9969}99709971/* Motes — drift upward across the stage */9972.peach-pair-motes {9973  position: absolute;9974  inset: 0;9975  pointer-events: none;9976}9977.peach-pair-mote {9978  position: absolute;9979  width: 2px; height: 2px;9980  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9981  border-radius: 50%;9982  bottom: 32px;9983  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9984  opacity: 0;9985  animation: peach-pair-mote-drift 6s linear infinite;9986  animation-delay: calc(var(--mote-i, 0) * 0.7s);9987}9988@keyframes peach-pair-mote-drift {9989  0%   { transform: translateY(0); opacity: 0; }9990  10%  { opacity: 0.6; }9991  90%  { opacity: 0.1; }9992  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9993}99949995/* Status copy ---------------------------------------------------------- */9996.peach-pair-copy-host {9997  margin: 4px 4px 10px;9998  text-align: center;9999  min-height: 50px;10000}10001.peach-pair-copy {10002  animation: peach-pair-copy-in 0.35s ease both;10003}10004@keyframes peach-pair-copy-in {10005  from { opacity: 0; transform: translateY(4px); }10006  to   { opacity: 1; transform: translateY(0); }10007}10008.peach-pair-headline {10009  font-family: var(--font-display, Georgia, serif);10010  font-style: italic;10011  font-size: 20px;10012  font-weight: 500;10013  line-height: 1.2;10014  letter-spacing: 0.005em;10015  color: var(--peach-t0);10016  margin-bottom: 6px;10017}10018.peach-pair-copy-listening .peach-pair-headline,10019.peach-pair-copy-chirping .peach-pair-headline,10020.peach-pair-copy-idle .peach-pair-headline {10021  font-family: inherit;10022  font-style: normal;10023  font-weight: 500;10024  font-size: 15px;10025  color: var(--peach-t0);10026  letter-spacing: 0;10027}10028.peach-pair-copy-paired .peach-pair-headline {10029  color: var(--peach-t0);10030  font-weight: 600;10031}10032.peach-pair-sub {10033  font-size: 12.5px;10034  line-height: 1.45;10035  color: var(--peach-t1);10036  max-width: 280px;10037  margin: 0 auto;10038  text-wrap: pretty;10039}1004010041/* Status action -------------------------------------------------------- */10042.peach-pair-action {10043  margin: 2px 4px 10px;10044  margin-top: auto;10045  display: flex;10046  flex-direction: column;10047  gap: 8px;10048}10049.peach-pair-action-waiting {10050  display: flex;10051  align-items: center;10052  justify-content: space-between;10053  gap: 12px;10054}10055.peach-pair-cancel {10056  min-width: 96px;10057}10058.peach-pair-listening {10059  display: inline-flex; align-items: center; gap: 4px;10060  font-family: var(--peach-mono, ui-monospace, monospace);10061  font-size: 9.5px;10062  text-transform: uppercase;10063  letter-spacing: 0.12em;10064  color: var(--peach-t1);10065  padding: 8px 10px;10066}10067.peach-pair-listen-dot {10068  width: 4px; height: 4px;10069  border-radius: 50%;10070  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);10071  animation: peach-pair-listen-pulse 1.2s ease-in-out infinite;10072}10073.peach-pair-listen-dot:nth-child(2) { animation-delay: 0.2s; }10074.peach-pair-listen-dot:nth-child(3) { animation-delay: 0.4s; }10075.peach-pair-listen-label { margin-left: 6px; }10076@keyframes peach-pair-listen-pulse {10077  0%, 100% { opacity: 0.25; transform: scale(0.9); }10078  50%      { opacity: 1;     transform: scale(1.15); }10079}1008010081.peach-pair-action-handshake {10082  display: flex;10083  flex-direction: column;10084  align-items: center;10085  gap: 8px;10086  padding: 8px 4px;10087}10088.peach-pair-meter {10089  width: 100%;10090  max-width: 280px;10091  height: 2px;10092  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);10093  border-radius: 2px;10094  position: relative;10095  overflow: hidden;10096}10097.peach-pair-meter-bar {10098  position: absolute;10099  top: 0; bottom: 0;10100  width: 30%;10101  left: -30%;10102  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);10103  animation: peach-pair-meter-sweep 1.4s ease-in-out infinite;10104}10105@keyframes peach-pair-meter-sweep {10106  0%   { left: -30%; }10107  100% { left: 100%; }10108}10109.peach-pair-meter-label {10110  font-family: var(--peach-mono, ui-monospace, monospace);10111  font-size: 9.5px;10112  text-transform: uppercase;10113  letter-spacing: 0.14em;10114  color: var(--peach-t1);10115}1011610117.peach-pair-action-paired {10118  display: flex;10119  align-items: center;10120  gap: 10px;10121}10122.peach-pair-device-confirm {10123  flex: 1;10124  display: inline-flex;10125  align-items: center;10126  gap: 8px;10127  padding: 9px 10px 9px 12px;10128  border-radius: 10px;10129  background: color-mix(in srgb, #76b6e8 12%, transparent);10130  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);10131  font-size: 12.5px;10132  color: var(--peach-t0);10133  min-width: 0;10134}10135.peach-pair-device-confirm-glyph {10136  display: inline-flex;10137  color: #76b6e8;10138}10139.peach-pair-device-confirm-name {10140  flex: 1;10141  overflow: hidden;10142  text-overflow: ellipsis;10143  white-space: nowrap;10144}10145.peach-pair-device-confirm-trust {10146  font-family: var(--peach-mono, ui-monospace, monospace);10147  font-size: 9.5px;10148  text-transform: uppercase;10149  letter-spacing: 0.1em;10150  color: #76b6e8;10151  padding: 2px 6px;10152  border-radius: 4px;10153  background: color-mix(in srgb, #76b6e8 14%, transparent);10154}10155.peach-pair-done {10156  min-width: 80px;10157}10158.peach-pair-retry {10159  align-self: center;10160  display: block;10161  margin: 6px auto 0;10162  min-width: 120px;10163}10164.peach-pair-mic-help {10165  font-size: 12px;10166  color: var(--peach-t1);10167  text-align: center;10168  max-width: 320px;10169  margin: 0 auto;10170}1017110172/* Rest state — bird stage at idle pose, primary CTA + paired list */10173.peach-pair-pair[data-phase="idle"] .peach-pair-stage {10174  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */10175  height: 160px;10176}10177.peach-pair-pair-start {10178  width: 100%;10179  display: inline-flex;10180  align-items: center;10181  justify-content: center;10182  gap: 8px;10183  padding: 11px 14px;10184  border-radius: 10px;10185  background: var(--peach-accent);10186  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);10187  color: #1a0905;10188  font-family: inherit;10189  font-size: 13px;10190  font-weight: 600;10191  letter-spacing: 0.01em;10192  cursor: pointer;10193  transition: filter 0.15s ease, transform 0.1s ease;10194}10195.peach-pair-pair-start:hover { filter: brightness(1.08); }10196.peach-pair-pair-start:active { transform: translateY(1px); }1019710198.peach-pair-paired-section {10199  margin-top: 14px;10200  display: flex;10201  flex-direction: column;10202  gap: 8px;10203}10204.peach-pair-paired-heading {10205  margin: 0;10206  font-family: var(--peach-mono, ui-monospace, monospace);10207  font-size: 10px;10208  font-weight: 500;10209  letter-spacing: 0.14em;10210  text-transform: uppercase;10211  color: var(--peach-t1);10212}1021310214/* Footer --------------------------------------------------------------- */10215.peach-pair-foot {10216  margin: 10px -4px -2px;10217  margin-top: auto;10218}10219.peach-pair-foot-divider {10220  height: 1px;10221  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);10222  margin-bottom: 10px;10223}10224.peach-pair-foot-text {10225  font-size: 11px;10226  line-height: 1.5;10227  color: var(--peach-t1);10228  text-align: center;10229  padding: 0 4px;10230  text-wrap: pretty;10231}1023210233/* Screen-reader-only live region. Kept off the visual flow but read by10234   assistive tech as the pairing phase advances. */10235.peach-sr-only {10236  position: absolute;10237  width: 1px; height: 1px;10238  padding: 0; margin: -1px;10239  overflow: hidden;10240  clip: rect(0, 0, 0, 0);10241  white-space: nowrap;10242  border: 0;10243}1024410245/* Reduced motion — stage simplifies to opacity transitions only */10246@media (prefers-reduced-motion: reduce) {10247  .peach-pair-bird-body,10248  .peach-pair-bird-head-group,10249  .peach-pair-bird-beak,10250  .peach-pair-bird-wing,10251  .peach-pair-bird-tuft,10252  .peach-pair-bird-tail,10253  .peach-pair-bird-eye-group,10254  .peach-pair-bird-aura,10255  .peach-pair-arc,10256  .peach-pair-flight-path,10257  .peach-pair-flight-path-2,10258  .peach-pair-dot-glow,10259  .peach-pair-dot-core,10260  .peach-pair-dot-ring,10261  .peach-pair-mote,10262  .peach-pair-meter-bar,10263  .peach-pair-listen-dot,10264  .peach-pair-bird-slot,10265  .peach-pair-bird-slot-mobile {10266    animation: none !important;10267    transition: opacity 0.2s linear !important;10268  }10269}1027010271/* ─────────────────────────────────────────────────────────────────10272   Settings → Sync surface. Wraps the same bird10273   animation used by the pairing flow with a paired-devices list and10274   the "Pair a device" CTA.10275   ───────────────────────────────────────────────────────────────── */10276.peach-pair-settings {10277  position: absolute;10278  inset: 0;10279  z-index: 3;10280  display: flex;10281  flex-direction: column;10282  gap: 18px;10283  padding: 14px 12px 12px;10284  width: 100%;10285  box-sizing: border-box;10286  overflow-y: auto;10287  overflow-x: hidden;10288  /* Same warm surface as the pairing screen — unifies the two views. */10289  background:10290    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),10291    var(--peach-bg);10292  color: var(--peach-t0);10293  isolation: isolate;10294  /* Hide native scrollbar — content fits 99% of the time and a chunky10295     gutter ruins the surface. */10296  scrollbar-width: none;10297  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;10298}10299.peach-pair-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }10300.peach-pair-settings::before {10301  content: '';10302  position: absolute;10303  inset: 0;10304  pointer-events: none;10305  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);10306  z-index: 0;10307}10308.peach-pair-settings > * { position: relative; z-index: 1; }1030910310.peach-pair-settings--pairing {10311  padding: 0;10312  align-items: stretch;10313  justify-content: stretch;10314  background: none;10315  isolation: auto;10316}10317.peach-pair-settings--pairing::before { display: none; }1031810319.peach-pair-settings-header {10320  display: flex;10321  align-items: center;10322  gap: 10px;10323}10324.peach-pair-settings-title {10325  margin: 0;10326  font-family: var(--font-display, Georgia, serif);10327  font-style: italic;10328  font-size: 24px;10329  font-weight: 500;10330  line-height: 1;10331  color: var(--peach-t0);10332  letter-spacing: 0.005em;10333}10334.peach-pair-settings-section {10335  margin: 6px 0 -4px;10336  font-size: 11px;10337  font-weight: 600;10338  letter-spacing: 0.08em;10339  text-transform: uppercase;10340  color: var(--peach-text-muted);10341}10342.peach-pair-settings-error {10343  font-size: 12px;10344  padding: 8px 10px;10345  border-radius: 8px;10346  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);10347  color: var(--peach-text);10348}10349.peach-pair-settings-footer {10350  margin-top: auto;10351  padding-top: 18px;10352  font-size: 11.5px;10353  line-height: 1.5;10354  color: var(--peach-text-muted);10355  text-align: center;10356}1035710358/* Hero card shown when no devices are paired yet. */10359.peach-pair-hero {10360  display: flex;10361  flex-direction: column;10362  align-items: center;10363  gap: 12px;10364  padding: 20px 12px 8px;10365  text-align: center;10366}10367.peach-pair-hero-svg {10368  display: block;10369  max-width: 100%;10370  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));10371}10372.peach-pair-hero-headline {10373  margin: 0;10374  font-family: var(--font-display, Georgia, serif);10375  font-style: italic;10376  font-size: 20px;10377  font-weight: 500;10378  line-height: 1.2;10379  letter-spacing: 0.005em;10380  color: var(--peach-t0);10381}10382.peach-pair-hero-sub {10383  margin: 0;10384  font-size: 13px;10385  line-height: 1.5;10386  color: var(--peach-t1);10387  max-width: 320px;10388  text-wrap: pretty;10389}1039010391.peach-pair-pair-cta {10392  display: flex;10393  justify-content: center;10394  padding: 4px 0 6px;10395}10396.peach-pair-pair-button {10397  display: inline-flex;10398  align-items: center;10399  gap: 8px;10400  min-width: 220px;10401  justify-content: center;10402}10403.peach-pair-pair-button-icon {10404  flex: 0 0 auto;10405}1040610407/* Paired devices list. Roomy rows that look at home next to the rest10408   of Settings; stale rows get a soft warm-warning border tint. */10409.peach-pair-device-list {10410  list-style: none;10411  margin: 0;10412  padding: 0;10413  display: flex;10414  flex-direction: column;10415  gap: 8px;10416}10417.peach-pair-device-row {10418  display: flex;10419  align-items: center;10420  gap: 12px;10421  padding: 12px;10422  border-radius: 10px;10423  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10424  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);10425}10426.peach-pair-device-row[data-stale="true"] {10427  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);10428}10429.peach-pair-device-icon {10430  width: 32px;10431  height: 32px;10432  display: flex;10433  align-items: center;10434  justify-content: center;10435  border-radius: 8px;10436  color: var(--peach-text);10437  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);10438}10439.peach-pair-device-info {10440  flex: 1;10441  display: flex;10442  flex-direction: column;10443  gap: 2px;10444  min-width: 0;10445}10446.peach-pair-device-name {10447  font-size: 14px;10448  font-weight: 600;10449  color: var(--peach-text);10450  overflow: hidden;10451  text-overflow: ellipsis;10452  white-space: nowrap;10453}10454.peach-pair-device-meta {10455  font-size: 11.5px;10456  color: var(--peach-text-muted);10457  display: flex;10458  flex-wrap: wrap;10459  align-items: center;10460  gap: 8px;10461}10462.peach-pair-device-badge {10463  font-size: 10.5px;10464  font-weight: 500;10465  letter-spacing: 0.02em;10466  padding: 2px 6px;10467  border-radius: 999px;10468  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);10469  color: var(--peach-text);10470}10471.peach-pair-device-stale {10472  font-size: 10.5px;10473  font-weight: 500;10474  color: var(--peach-warn, #d29257);10475}10476.peach-pair-device-remove {10477  flex: 0 0 auto;10478  color: var(--peach-text-muted);10479}10480.peach-pair-device-remove:hover {10481  color: var(--peach-danger, #c25b4a);10482}10483.peach-pair-unpair-confirm {10484  display: flex;10485  gap: 6px;10486  align-items: center;10487}1048810489/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */10490.peach-pair-pro-card {10491  position: relative;10492  margin: 18px 12px;10493  padding: 18px 20px 22px;10494  border-radius: 22px;10495  background:10496    radial-gradient(140% 90% at 50% 0%,10497      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,10498      transparent 60%),10499    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10500  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);10501  box-shadow:10502    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,10503    0 18px 40px -24px rgba(0, 0, 0, 0.45);10504  display: flex;10505  flex-direction: column;10506  align-items: center;10507  gap: 10px;10508  text-align: center;10509  overflow: hidden;10510}10511.peach-pair-pro-stage {10512  position: relative;10513  width: 220px;10514  height: 140px;10515  display: flex;10516  align-items: flex-end;10517  justify-content: center;10518  margin-bottom: 2px;10519}10520.peach-pair-pro-bird-slot {10521  width: 140px;10522  height: 132px;10523  display: flex;10524  align-items: flex-end;10525  justify-content: center;10526  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));10527}10528.peach-pair-pro-bird-slot .peach-pair-bird {10529  width: 100%;10530  height: 100%;10531}10532.peach-pair-pro-bird-slot .peach-pair-bird svg {10533  width: 100%;10534  height: 100%;10535  overflow: visible;10536}10537.peach-pair-pro-headline {10538  margin: 4px 0 0;10539  font-family: var(--font-display, "Cormorant Garamond", serif);10540  font-style: italic;10541  font-size: 19px;10542  font-weight: 500;10543  letter-spacing: 0.01em;10544  color: var(--peach-t0);10545  max-width: 280px;10546  line-height: 1.25;10547}10548.peach-pair-pro-body {10549  margin: 0;10550  font-size: 13px;10551  line-height: 1.55;10552  color: var(--peach-t1);10553  max-width: 300px;10554}10555.peach-pair-pro-cta {10556  margin-top: 4px;10557}10558.peach-pair-pro-foot {10559  margin: 2px 0 0;10560  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10561  font-size: 0.625rem;10562  letter-spacing: 0.08em;10563  text-transform: uppercase;10564  color: var(--peach-t2);10565  opacity: 0.75;10566}1056710568/* Shell border and shadow in light mode: match dark mode's near-invisible10569   border weight so the popup frame looks the same in both themes. */10570.light .peach-shell,10571.light .peach-screen {10572  border-color: rgba(26, 18, 8, 0.07);10573  box-shadow:10574    0 2px 8px rgba(80, 56, 32, 0.08),10575    0 14px 48px rgba(80, 56, 32, 0.10),10576    0 0 0 1px rgba(26, 18, 8, 0.04);10577}1057810579/* HOLE 4: the revoke confirmation carries its own disclosure, so it needs the10580   full row width rather than sitting inline beside the device name. */10581.peach-settings-row:has(> .peach-unpair-confirm) { flex-wrap: wrap; }10582.peach-unpair-confirm {10583  display: flex;10584  flex-direction: column;10585  gap: 8px;10586  width: 100%;10587}10588.peach-unpair-confirm-note {10589  margin: 0;10590  font-size: 0.6875rem;10591  line-height: 1.5;10592  color: var(--peach-t2);10593}1059410595/* Sync mode selector — three named choices (public / private / off). Replaces10596   the old binary "local network only" toggle; see docs/sync-lan-retirement.md. */10597.peach-sync-mode {10598  display: flex;10599  align-items: flex-start;10600  gap: 10px;10601  width: 100%;10602  text-align: left;10603  padding: 10px 12px;10604  margin-top: 8px;10605  border-radius: 10px;10606  border: 1px solid var(--peach-border);10607  background: color-mix(in srgb, var(--peach-t0) 3%, transparent);10608  color: var(--peach-t1);10609  cursor: pointer;10610  transition: border-color var(--peach-dur-80) var(--peach-curve-arrival),10611              background-color var(--peach-dur-80) var(--peach-curve-arrival);10612}10613.peach-sync-mode:hover:not(:disabled) {10614  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);10615}10616.peach-sync-mode.is-active {10617  border-color: var(--peach-accent);10618  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);10619}10620.peach-sync-mode:disabled { opacity: 0.6; cursor: default; }10621.peach-sync-mode-main { display: flex; flex-direction: column; gap: 3px; flex: 1; }10622.peach-sync-mode-title { font-size: 12px; }10623.peach-sync-mode-sub {10624  font-size: 11px;10625  line-height: 1.5;10626  color: var(--peach-t2);10627}10628.peach-sync-mode-pip {10629  flex: none;10630  margin-top: 3px;10631  width: 12px; height: 12px;10632  border-radius: 50%;10633  border: 1px solid var(--peach-t3);10634}10635.peach-sync-mode.is-active .peach-sync-mode-pip {10636  border-color: var(--peach-accent);10637  background:10638    radial-gradient(circle at 50% 50%, var(--peach-accent) 0 42%, transparent 44%);10639}10640.peach-sync-mode-disclosure {10641  margin: 10px 2px 0;10642  font-size: 11px;10643  line-height: 1.5;10644  color: var(--peach-t2);10645}10646.peach-sync-mode-warn { color: var(--peach-breach); }1064710648/* Compact form, used mid-pairing: a quiet line, not a decision to make. */10649.peach-sync-mode-summary {10650  margin: 8px 2px 0;10651  font-size: 11px;10652  color: var(--peach-t2);10653  text-align: center;10654}10655.peach-sync-mode-change {10656  background: none;10657  border: none;10658  padding: 0;10659  font: inherit;10660  color: var(--peach-accent);10661  text-decoration: underline;10662  cursor: pointer;10663}