popup.css

1html,2body,3#app,4#pre-lock,5.popup-root {6  width: 320px;7  min-height: 520px;8  height: 520px;9  margin: 0;10}1112body {13  overflow: hidden;14  background: var(--bg);15  color: var(--t0);16  font-family: var(--font-ui);17  font-weight: 300;18  position: relative;19}2021* {22  box-sizing: border-box;23}2425button,26input,27textarea,28select {29  font: inherit;30}3132button {33  border: 0;34}3536#pre-lock {37  position: absolute;38  inset: 0;39  z-index: 10;40}4142#pre-lock[hidden] {43  display: none;44}4546.popup-root {47  position: relative;48  overflow: hidden;49}5051.peach-theme {52  color: var(--peach-t0);53  font-family: var(--font-ui);54  font-weight: 300;55  box-sizing: border-box;56  text-align: left;57}58.peach-theme, .peach-theme * { box-sizing: inherit; }5960.peach-brand-mark {61  width: 14px;62  height: 14px;63  flex-shrink: 0;64}6566.peach-status-pip.is-hidden {67  display: none;68}6970.peach-status-pip.unlocked {71  background: var(--peach-health-ok);72  box-shadow: 0 0 6px rgba(100, 210, 100, 0.6);73}7475.peach-status-pip.pulse {76  animation: pip-pulse 400ms var(--peach-curve-settle) both;77}7879/* Shell */80.peach-shell, .peach-screen {81  background:82    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),83    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),84    var(--peach-bg);85  border: 1px solid var(--peach-t3);86  box-shadow:87    0 2px 8px rgba(0,0,0,0.55),88    0 14px 48px rgba(0,0,0,0.7),89    0 0 0 1px rgba(240,232,216,0.04);90  overflow: hidden;91}92.peach-shell {93  display: grid;94  grid-template-rows: auto 1fr;95  min-height: 520px;96  position: relative;97  isolation: isolate;98}99100.peach-shell[data-surface="extension"] {101  width: min(320px, 100vw);102  border-radius: 0;103  height: 520px;104  max-height: 520px;105  overflow: hidden;106}107108/* ── Lock screen – full-window lock/create stage ── */109.lock-screen--vault-stage {110  display: flex;111  flex-direction: column;112  gap: 18px;113  padding: 20px 18px 18px;114  justify-content: flex-start;115}116.lock-screen--vault-stage .peach-lock-panel {117  margin-top: auto;118}119.peach-lock-headline--unlock {120  max-width: 220px;121}122.peach-lock-hero--unlock {123  padding-top: 14px;124}125.peach-lock-panel--unlock {126  gap: 10px;127}128129.peach-lock-restore-link {130  background: transparent;131  border: none;132  cursor: pointer;133  font-family: var(--font-mono);134  font-size: 0.625rem;135  letter-spacing: 0.08em;136  color: var(--t1);137  padding: 5px 0;138  text-align: left;139  transition: color 150ms ease;140}141142.peach-lock-restore-link:hover {143  color: var(--t0);144}145.peach-shell[data-surface="extension"] .peach-stage {146  min-height: 250px;147}148149/* Screen (unlock) */150.peach-screen {151  width: min(320px, 100vw);152  min-height: 100%;153  height: 100%;154  border-radius: 0;155  padding: 16px 20px 18px;156  display: grid;157  gap: 14px;158}159.peach-screen[data-motion-phase="enter"] {160  animation: peach-screen-enter var(--peach-dur-600) var(--peach-curve-arrival) both;161}162.peach-screen-header { min-height: 20px; }163164/* Wordmark */165.peach-wordmark {166  margin: 0;167  font-family: var(--font-display);168  font-size: 0.9375rem;169  font-style: italic;170  letter-spacing: 0.03em;171  color: var(--peach-t0);172  display: inline-flex;173  min-height: 1em;174}175176/* Motion text / char animation */177.peach-motion-text { display: inline-flex; min-height: 1em; }178.peach-motion-char {179  display: inline-block;180  white-space: pre;181  opacity: 0;182  transform: translateY(0.22em);183  animation: peach-char-enter var(--peach-motion-duration, 380ms) var(--peach-curve-arrival) forwards;184  animation-delay: calc(var(--peach-char-index, 0) * 20ms);185}186187/* Chrome */188.peach-chrome {189  position: relative;190  z-index: 10;191  padding: 16px 20px 0;192  display: flex;193  justify-content: space-between;194  align-items: center;195  /* z-index:10 keeps the header icons above `.peach-loading` (Suspense196     fallback) per §15 regression guard. Without pointer-events:none, the197     empty header strip also sits above `.peach-overlay-view` (z-index:2)198     and swallows clicks meant for an overlay's back button / top search. */199  pointer-events: none;200}201.peach-chrome .peach-btn { pointer-events: auto; }202.peach-chrome.is-hidden-for-overlay,203.peach-search-wrap.is-hidden-for-overlay {204  opacity: 0;205  visibility: hidden;206  pointer-events: none;207}208.peach-wordmark-wrap { display: flex; align-items: center; gap: 5px; }209.peach-status-pip {210  width: 5px;211  height: 5px;212  border-radius: 50%;213  background: var(--peach-t3);214  display: inline-flex;215  flex-shrink: 0;216  transition: background 400ms ease, box-shadow 400ms ease;217}218.peach-chrome-actions { display: flex; gap: 6px; }219220/* Shell body */221.peach-shell-body {222  position: relative;223  display: grid;224  grid-template-rows: 1fr auto;225  min-height: 0;226  min-width: 0;227  width: 100%;228  overflow: hidden;229  height: 100%;230}231.peach-shell-veil {232  position: absolute; inset: 0;233  background: #000; opacity: 0;234  pointer-events: none; z-index: 1;235}236.peach-shell[data-motion-phase="enter"] .peach-shell-body {237  animation: peach-shell-fade-in var(--peach-dur-600) var(--peach-curve-arrival) both;238}239.peach-shell[data-motion-phase="exit"] .peach-shell-veil {240  animation: peach-veil-in 300ms var(--peach-curve-departure) forwards;241}242243/* Content frame */244.peach-content-frame {245  display: grid;246  grid-template-rows: 1fr auto;247  grid-template-columns: minmax(0, 1fr);248  align-content: start;249  min-height: 0;250  min-width: 0;251  overflow: hidden;252  transition: opacity 80ms ease, transform 80ms ease;253}254.peach-content-frame.navigating {255  opacity: 0.93;256  transform: translateX(2px);257}258.peach-content-frame[data-content-phase="enter"] {259  animation: peach-content-enter 135ms ease-out both;260}261.peach-content-frame[data-content-phase="exit"] {262  animation: peach-content-exit 95ms ease-in forwards;263}264.peach-content-frame[data-content-phase="idle"] { opacity: 1; transform: none; }265266/* Stage */267.peach-stage {268  padding: 10px 20px 12px;269  display: grid;270  gap: 12px;271  align-content: start;272  min-width: 0;273  min-height: 0;274  max-width: 100%;275  overflow-y: auto;276  overflow-x: hidden;277  scrollbar-width: none;278  -ms-overflow-style: none;279  overscroll-behavior: contain;280}281.peach-stage::-webkit-scrollbar { display: none; }282283/* Entry name */284.peach-entry-name-wrap { position: relative; overflow: hidden; max-width: 100%; }285.peach-entry-header {286  position: relative;287  z-index: 1;288  display: flex;289  align-items: flex-start;290  gap: 6px;291  min-width: 0;292}293.peach-entry-header-name {294  flex: 1;295  min-width: 0;296}297.peach-entry-name {298  margin: 0;299  padding-bottom: 0.12em;300  font-family: var(--font-display);301  font-style: italic; font-weight: 400;302  font-size: 44px; line-height: 0.95;303  color: var(--peach-t0);304  display: -webkit-box;305  -webkit-line-clamp: 2;306  -webkit-box-orient: vertical;307  overflow: hidden;308  text-wrap: balance;309}310.peach-entry-name--lg { font-size: 40px; }311.peach-entry-name--xl { font-size: 34px; line-height: 0.98; }312.peach-entry-name--xxl { font-size: 30px; line-height: 1.02; }313.peach-entry-name-text { display: block; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; padding-bottom: 0.12em; }314315/* Trash icon in entry header */316.peach-entry-trash-btn {317  flex-shrink: 0;318  padding: 4px;319  margin-top: 4px;320  background: transparent;321  border: none;322  cursor: pointer;323  color: var(--peach-t2);324  border-radius: 4px;325  transition: color 140ms ease, background 140ms ease;326  display: flex;327  align-items: center;328  justify-content: center;329}330.peach-entry-trash-btn:hover {331  color: var(--peach-t1);332  background: var(--peach-t3);333}334.peach-entry-trash-confirm {335  display: flex;336  align-items: center;337  gap: 6px;338  flex-shrink: 0;339  margin-top: 6px;340  flex-wrap: nowrap;341}342.peach-entry-trash-confirm-label {343  font-family: var(--font-mono);344  font-size: 0.5625rem;345  letter-spacing: 0.1em;346  color: var(--peach-t2);347  white-space: nowrap;348}349.peach-entry-name-button {350  padding: 0;351  background: transparent;352  text-align: left;353  cursor: pointer;354  max-width: 100%;355  overflow: hidden;356  display: block;357}358.peach-entry-name-char {359  display: inline-block;360  white-space: pre;361  opacity: 0;362  transform: translateY(0.22em);363  animation: peach-char-enter 380ms var(--peach-curve-arrival) forwards;364  animation-delay: calc(var(--char-index, 0) * 20ms);365}366367/* Domain */368.peach-domain { border-top: 1px solid var(--peach-t3); padding-top: 9px; }369.peach-domain-row {370  width: 100%; border: 0; background: transparent; color: inherit;371  padding: 0; display: flex; justify-content: space-between; align-items: baseline;372  cursor: default;373}374.peach-domain-value {375  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;376  font-size: 0.625rem; font-style: italic;377  letter-spacing: 0.12em; color: var(--peach-t1);378}379380/* Fields */381.peach-fields { display: grid; gap: 10px; }382.peach-field-card { display: grid; gap: 7px; }383.peach-label {384  font-family: Inter, system-ui, sans-serif;385  text-transform: uppercase; letter-spacing: 0.2em;386  font-size: 0.5rem; color: var(--peach-t2);387}388.peach-add-field-btn {389  align-self: flex-start;390  background: none; border: none; padding: 2px 0;391  font-family: Inter, system-ui, sans-serif;392  font-size: 0.6875rem; color: var(--peach-accent);393  cursor: pointer; opacity: 0.75;394  letter-spacing: 0.02em;395}396.peach-add-field-btn:hover { opacity: 1; }397.peach-field-value-row {398  display: flex; justify-content: space-between;399  align-items: center; gap: 8px;400  min-width: 0;401}402.peach-field-value {403  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;404  font-size: 0.8125rem; color: var(--peach-t1);405  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;406  flex: 1;407  min-width: 0;408}409.peach-password-value {410  display: inline-flex;411  align-items: center;412  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;413  font-size: 1rem; letter-spacing: 0.3em; color: var(--peach-t0);414  overflow: hidden;415  text-overflow: ellipsis;416  white-space: nowrap;417  flex: 1;418  min-width: 0;419  max-width: 100%;420}421.peach-password-value.is-revealed {422  font-size: 0.875rem;423  letter-spacing: 0.08em;424}425.peach-password-text,426.peach-password-mask {427  display: block;428  width: 100%;429  overflow: hidden;430  white-space: nowrap;431  /* Render as uniform mid-line bullets, not baseline periods */432  font-family: Inter, system-ui, sans-serif;433  font-size: 0.625rem;434  letter-spacing: 3px;435  user-select: none;436}437.peach-field-actions { display: flex; gap: 4px; align-items: center; }438.peach-password-strength { display: flex; align-items: center; gap: 8px; }439.peach-strength-bar { display: flex; gap: 3px; }440.peach-strength-seg { width: 28px; height: 4px; border-radius: 2px; background: #eee; }441.peach-strength-label {442  font-family: "IBM Plex Mono", monospace;443  font-style: italic;444  font-size: 0.5625rem;445  font-weight: 300;446  min-width: 36px;447  text-align: right;448  color: var(--peach-t2);449  letter-spacing: 0.06em;450}451452.peach-strength-hairline {453  display: flex;454  align-items: center;455  gap: 10px;456  margin-top: -2px;457}458459.peach-strength-hairline-track {460  flex: 1;461  height: 3px;462  border-radius: 2px;463  background: var(--peach-s2);464  overflow: hidden;465}466467.peach-strength-hairline-fill {468  height: 100%;469  border-radius: 2px;470  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),471    background 400ms ease;472}473474/* Note content (display) */475.peach-note-content {476  border-top: 1px solid var(--peach-t3);477  padding-top: 10px;478  font-family: var(--font-display);479  font-size: 0.9375rem;480  line-height: 1.75;481  color: var(--peach-t1);482}483484/* ── Inline editing ─────────────────────────────────────────────────── */485486/* Clickable display values */487.peach-inline-clickable {488  cursor: text;489  border-radius: 3px;490  transition: background 150ms ease;491}492.peach-inline-clickable:hover {493  background: rgba(240, 232, 216, 0.05);494}495496/* Subtle "edit" hint that appears on hover */497.peach-inline-edit-hint {498  font-family: Inter, system-ui, sans-serif;499  font-size: 0.5625rem;500  text-transform: uppercase;501  letter-spacing: 0.14em;502  color: var(--peach-t2);503  opacity: 0;504  transition: opacity 120ms ease;505  pointer-events: none;506  margin-left: 6px;507  flex-shrink: 0;508}509.peach-domain-row:hover .peach-inline-edit-hint {510  opacity: 1;511}512513/* Title editing */514.peach-inline-title-wrap {515  display: flex;516  flex-direction: column;517  gap: 6px;518}519.peach-inline-title-input {520  font-family: var(--font-display);521  font-style: italic;522  font-weight: 400;523  font-size: 40px;524  line-height: 0.95;525  color: var(--peach-t0);526  background: transparent;527  border: none;528  border-bottom: 1px solid var(--peach-accent);529  outline: none;530  width: 100%;531  padding: 2px 0;532}533534/* Generic inline field */535.peach-inline-field-wrap {536  display: flex;537  flex-direction: column;538  gap: 6px;539}540.peach-inline-input {541  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;542  font-size: 0.8125rem;543  color: var(--peach-t0);544  background: transparent;545  border: none;546  border-bottom: 1px solid var(--peach-accent);547  outline: none;548  width: 100%;549  padding: 3px 0;550}551.peach-inline-textarea {552  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;553  font-size: 0.6875rem;554  line-height: 1.7;555  color: var(--peach-t0);556  background: rgba(240, 232, 216, 0.04);557  border: 1px solid var(--peach-accent);558  border-radius: 4px;559  outline: none;560  width: 100%;561  padding: 8px;562  resize: vertical;563  min-height: 80px;564}565566/* Save / cancel row */567.peach-inline-actions {568  display: flex;569  gap: 6px;570  align-items: center;571}572.peach-inline-save-btn,573.peach-inline-cancel-btn {574  display: inline-flex;575  align-items: center;576  justify-content: center;577  width: 26px;578  height: 26px;579  border-radius: 4px;580  border: none;581  cursor: pointer;582  transition: background 140ms ease, opacity 140ms ease;583  flex-shrink: 0;584}585.peach-inline-save-btn {586  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);587  color: var(--peach-accent);588}589.peach-inline-save-btn:hover:not(:disabled) {590  background: color-mix(in srgb, var(--peach-accent) 30%, transparent);591}592.peach-inline-cancel-btn {593  background: rgba(240, 232, 216, 0.06);594  color: var(--peach-t2);595}596.peach-inline-cancel-btn:hover:not(:disabled) {597  background: rgba(240, 232, 216, 0.12);598  color: var(--peach-t1);599}600.peach-inline-save-btn:disabled,601.peach-inline-cancel-btn:disabled {602  opacity: 0.4;603  cursor: not-allowed;604}605606/* Inline password generator wrapper */607.peach-inline-generator-wrap {608  margin-top: 10px;609  padding-top: 10px;610  border-top: 1px solid var(--peach-t3);611  display: flex;612  flex-direction: column;613  gap: 8px;614}615.peach-inline-generator-cancel {616  align-self: flex-start;617  font-size: 0.6875rem;618  color: var(--peach-t2);619}620621/* "is-editing" card state */622.peach-field-card.is-editing {623  background: rgba(240, 232, 216, 0.02);624  border-radius: 6px;625  padding: 8px;626  margin: -8px;627}628629/* Inline tag editor on Entry detail view */630.peach-inline-tag-editor {631  display: flex;632  flex-direction: column;633  gap: 6px;634}635636/* Quiet inline "+ add X" link in the entry detail body */637.peach-entry-add-link {638  justify-self: start;639  margin-top: 8px;640}641642/* Additional URLs editor revealed by clicking the URL field */643.peach-additional-urls {644  display: flex;645  flex-direction: column;646  gap: 6px;647  margin-top: 8px;648}649.peach-additional-urls-label {650  font-size: 0.5625rem;651  letter-spacing: 0.1em;652  text-transform: uppercase;653  color: var(--peach-t2);654  margin-bottom: 2px;655}656.peach-additional-url-row {657  display: flex;658  align-items: center;659  gap: 6px;660}661.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }662.peach-additional-url-remove {663  background: transparent;664  border: 1px solid var(--peach-t3);665  color: var(--peach-t2);666  width: 22px;667  height: 22px;668  border-radius: 4px;669  cursor: pointer;670  font-size: 0.875rem;671  line-height: 1;672  display: inline-flex;673  align-items: center;674  justify-content: center;675  flex-shrink: 0;676  transition: color 120ms ease, border-color 120ms ease;677}678.peach-additional-url-remove:hover:not(:disabled) {679  color: var(--peach-accent);680  border-color: var(--peach-border-accent);681}682.peach-additional-urls-add { align-self: flex-start; }683684/* Delete row */685.peach-entry-delete-row {686  display: flex;687  align-items: center;688  gap: 8px;689  padding-top: 18px;690  margin-top: 8px;691  border-top: 1px solid var(--peach-t3);692}693.peach-delete-btn {694  font-size: 0.6875rem;695  color: var(--peach-t2);696  padding: 4px 0;697}698.peach-delete-confirm-text {699  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;700  font-size: 0.6875rem;701  font-style: italic;702  color: var(--peach-t2);703  flex-shrink: 0;704}705706/* TOTP band */707.peach-totp-band {708  border-top: 1px solid var(--peach-t3);709  padding: 12px 20px 14px;710  position: relative;711  display: grid;712  grid-template-columns: 1fr auto;713  gap: 10px;714}715.peach-totp-main {716  min-width: 0;717  cursor: pointer;718  user-select: none;719}720.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }721.peach-totp-code-row {722  display: flex;723  align-items: flex-end;724  gap: 10px;725  min-width: 0;726}727.peach-totp-code {728  margin: 2px 0 0;729  font-family: var(--font-display);730  font-style: italic;731  font-weight: 300;732  font-size: 38px; color: var(--peach-accent);733  line-height: 0.95; min-height: 1em;734  min-width: 0;735}736.peach-totp-code-text {737  display: inline-flex;738  overflow: hidden;739  text-overflow: ellipsis;740  white-space: nowrap;741}742.peach-totp-copy-btn {743  margin-bottom: 2px;744  flex-shrink: 0;745  border-color: transparent;746}747.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }748.peach-totp-countdown {749  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;750  font-size: 22px; color: var(--peach-t1);751}752.peach-totp-ring { transform: rotate(-90deg); }753.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }754.peach-totp-ring-progress {755  fill: none; stroke: var(--peach-accent); stroke-width: 2;756  stroke-linecap: round;757  transition: stroke-dashoffset 1s linear, stroke 500ms ease;758}759/* Search bar */760.peach-search-wrap {761  border-top: 1px solid var(--peach-t3);762  background: var(--peach-s1);763  min-height: 54px; position: relative;764  box-shadow: inset 0 6px 18px transparent;765  transition: box-shadow 700ms ease;766}767.peach-search-wrap::before {768  content: "";769  position: absolute;770  left: 0;771  top: 0;772  height: 2px;773  width: var(--peach-totp-progress, 0%);774  background: var(--peach-accent);775  opacity: 0;776  transition: width 1s linear, opacity 180ms ease;777  pointer-events: none;778}779.peach-shell[data-totp-active="true"] .peach-search-wrap::before {780  opacity: 0.9;781}782.peach-shell[data-totp-active="true"] .peach-search-wrap {783  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);784}785786@keyframes peach-totp-code-flare {787  0%   { filter: brightness(1); }788  25%  { filter: brightness(1.3); }789  100% { filter: brightness(1); }790}791.peach-totp-code.is-hot {792  animation: peach-totp-code-flare 3000ms ease-in-out both;793}794.peach-search-bar {795  min-height: 54px;796  display: grid;797  grid-template-columns: auto minmax(0, 1fr) auto;798  align-items: center;799  gap: 8px; padding: 0 9px 0 12px;800}801.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }802.peach-search-input {803  border: 0; background: transparent; color: var(--peach-t0);804  font-family: var(--font-display);805  font-style: italic; font-size: 18px;806  outline: none; width: 100%; min-width: 0; padding: 0;807  caret-color: var(--peach-accent);808}809.peach-search-input::placeholder { color: var(--peach-t2); }810.peach-search-meta {811  display: grid;812  grid-auto-flow: column;813  align-items: center;814  justify-content: end;815  gap: 6px;816  min-width: max-content;817}818.peach-search-counter {819  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;820  font-size: 0.625rem; color: var(--peach-t2);821  display: inline-flex;822  align-items: center;823  line-height: 1;824}825.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }826827/* Buttons */828.peach-btn {829  border: 1px solid transparent; border-radius: 12px;830  background: transparent; color: var(--peach-t0);831  font-family: Inter, system-ui, sans-serif;832  font-size: 0.75rem; letter-spacing: 0.02em; padding: 8px 12px;833  cursor: pointer;834  transition:835    background-color var(--peach-dur-80) var(--peach-curve-arrival),836    color var(--peach-dur-80) var(--peach-curve-arrival),837    border-color var(--peach-dur-150) var(--peach-curve-arrival);838}839.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }840.peach-btn:disabled {841  opacity: 0.45;842  cursor: not-allowed;843}844.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 0.6875rem; }845.peach-btn--md { min-height: 38px; }846.peach-btn--accent {847  background: var(--peach-accent);848  color: rgba(0,0,0,0.92);849  font-weight: 500;850  box-shadow:851    0 1px 0 rgba(255,255,255,0.08) inset,852    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),853    0 3px 16px var(--peach-glow),854    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);855}856.peach-btn--accent:hover:not(:disabled) {857  background: var(--peach-accent);858  filter: brightness(1.10) saturate(1.05);859  box-shadow:860    0 1px 0 rgba(255,255,255,0.10) inset,861    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),862    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),863    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);864}865.peach-btn--ghost { border-color: var(--peach-t3); color: var(--peach-t1); }866.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }867.peach-icon-btn {868  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;869  display: inline-flex; align-items: center; justify-content: center;870}871872.peach-btn:focus-visible {873  outline: none;874  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);875}876877/* Lock button */878.peach-lock-icon { transform-origin: center; }879.peach-lock-btn.is-locking { color: var(--peach-accent); }880.peach-lock-btn.is-locking .peach-lock-icon {881  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);882}883884/* Biometric unlock button */885.peach-biometric-btn {886  display: flex;887  align-items: center;888  justify-content: center;889  gap: 6px;890  margin-top: 8px;891  width: 100%;892}893894/* Copy button */895.peach-copy-btn {896  position: relative; overflow: hidden;897  color: var(--peach-t2); border-color: var(--peach-t3);898}899.peach-copy-icon {900  display: inline-flex; align-items: center; justify-content: center;901  position: relative; z-index: 1;902}903.peach-copy-icon-svg { display: block; }904.peach-copy-sheen {905  position: absolute; inset: 0;906  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%);907  opacity: 0; transform: scaleX(0.15); transform-origin: left center;908}909.peach-copy-btn.is-copied {910  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;911  box-shadow:912    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),913    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),914    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);915}916.peach-copy-btn.is-copied .peach-copy-icon {917  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;918}919.peach-copy-btn.is-copied .peach-copy-sheen {920  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;921}922.peach-copy-btn.is-retreat {923  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;924}925.peach-copy-btn.is-retreat .peach-copy-sheen {926  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;927}928.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }929.peach-copy-drain-bar {930  display: block; width: 100%; height: 100%;931  background: var(--peach-accent); opacity: 0.7;932  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;933}934935/* Unlock screen elements */936.peach-unlock-headline {937  margin: 2px 0 0;938  font-family: var(--font-display);939  font-size: 52px; line-height: 0.95;940  font-style: italic; font-weight: 400;941}942.peach-subline {943  margin: 0;944  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;945  font-size: 0.625rem; color: var(--peach-t2); font-style: italic;946}947.peach-subline--lock {948  max-width: 248px;949  line-height: 1.5;950}951.peach-underline-input {952  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);953  padding: 6px 0; background: transparent; color: var(--peach-t0);954  outline: none;955  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;956  font-size: 0.8125rem;957  caret-color: var(--peach-accent);958}959.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }960.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }961.peach-hint {962  margin: 0;963  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;964  font-size: 0.625rem; color: var(--peach-t2);965}966.peach-unlock-footer {967  margin-top: 4px; display: flex; align-items: center; gap: 7px;968  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;969  font-size: 0.625rem; color: var(--peach-t2);970}971.peach-unlock-footer--lock {972  padding-top: 2px;973}974975/* Breach badge */976.peach-breach-badge {977  display: flex;978  position: relative;979  z-index: 1;980  align-items: center;981  gap: 7px;982  font-size: 0.5625rem;983  color: var(--peach-breach);984  padding: 5px 10px;985  margin-bottom: 4px;986  border-radius: 8px;987  background: rgba(220, 80, 60, 0.07);988  border: 1px solid rgba(220, 80, 60, 0.18);989  letter-spacing: 0.04em;990}991992.peach-breach-action {993  margin-left: auto;994  font-size: 0.625rem;995  padding: 3px 8px;996}997998.peach-password-value.is-breached {999  color: rgba(220, 80, 60, 0.75);1000  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1001}10021003/* ── Overlay views ─────────────────────────────────────────────────── */1004.peach-overlay-view {1005  position: absolute;1006  inset: 0;1007  display: flex;1008  flex-direction: column;1009  background:1010    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1011    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1012    var(--peach-bg);1013  z-index: 2;1014  overflow: hidden;1015  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1016}1017@keyframes overlay-in {1018  from { opacity: 0; transform: translateY(8px); }1019  to   { opacity: 1; transform: translateY(0); }1020}1021.peach-overlay-view.ov-enter-up {1022  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1023}1024.peach-overlay-view.ov-exit-up {1025  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1026}1027.peach-overlay-view.ov-enter-right {1028  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1029}1030.peach-overlay-view.ov-exit-right {1031  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1032}10331034@keyframes ov-enter-up {1035  from { opacity: 0; transform: translateY(18px); }1036  to   { opacity: 1; transform: translateY(0); }1037}1038@keyframes ov-exit-up {1039  from { opacity: 1; transform: translateY(0); }1040  to   { opacity: 0; transform: translateY(-12px); }1041}1042@keyframes ov-enter-right {1043  from { opacity: 0; transform: translateX(20px); }1044  to   { opacity: 1; transform: translateX(0); }1045}1046@keyframes ov-exit-right {1047  from { opacity: 1; transform: translateX(0); }1048  to   { opacity: 0; transform: translateX(20px); }1049}10501051/* Overlay shared header */1052.peach-overlay-header {1053  padding: 10px 12px;1054  display: flex;1055  align-items: center;1056  gap: 8px;1057  border-bottom: 1px solid var(--peach-t3);1058  flex-shrink: 0;1059}1060.peach-overlay-title {1061  font-family: "IBM Plex Mono", monospace;1062  font-size: 0.5625rem;1063  text-transform: uppercase;1064  letter-spacing: 0.18em;1065  color: var(--peach-t2);1066  flex: 1;1067  text-align: center;1068}10691070.peach-overlay-card {1071  background: var(--peach-s1);1072  border: 1px solid var(--peach-t3);1073  border-radius: 12px;1074  overflow: hidden;1075  width: 100%;1076}10771078.peach-onboarding-alt-actions {1079  display: flex;1080  flex-direction: column;1081  gap: 4px;1082  padding: 0;1083}10841085.peach-settings-copy {1086  margin: 0 0 10px;1087  font-size: 0.6875rem;1088  line-height: 1.5;1089  color: var(--peach-t2);1090}10911092.peach-settings-copy strong {1093  color: var(--peach-t0);1094}10951096.peach-settings-copy--spacious {1097  margin-bottom: 12px;1098}10991100.peach-settings-copy--result {1101  color: var(--peach-accent);1102  font-size: 0.8125rem;1103  text-align: center;1104  padding: 8px 0;1105}11061107.peach-settings-copy--danger {1108  color: var(--peach-breach);1109}11101111.peach-settings-copy--success {1112  color: var(--peach-accent);1113}11141115.peach-inline-feedback {1116  font-size: 0.6875rem;1117  margin: 10px 0 0;1118}11191120.peach-inline-feedback--ok {1121  color: var(--peach-accent);1122}11231124.peach-inline-feedback--error {1125  color: var(--peach-breach);1126}11271128.peach-inline-feedback--muted {1129  color: var(--peach-t2);1130  font-size: 0.625rem;1131  margin: 4px 0;1132}11331134.peach-inline-feedback--spaced {1135  margin-top: 12px;1136}11371138.peach-settings-actions--row {1139  display: flex;1140  gap: 6px;1141}11421143.peach-settings-actions--end {1144  margin-top: 14px;1145  justify-content: flex-end;1146}11471148.peach-settings-stack {1149  display: flex;1150  flex-direction: column;1151  gap: 6px;1152}11531154.peach-settings-stack--tight {1155  gap: 4px;1156}11571158.peach-settings-stack--spacious {1159  gap: 8px;1160}11611162.peach-settings-input {1163  width: 100%;1164  box-sizing: border-box;1165  padding: 8px 10px;1166  background: rgba(0, 0, 0, 0.22);1167  border: 1px solid transparent;1168  border-radius: 6px;1169  color: var(--peach-t0);1170  font-family: var(--font-ui);1171  font-size: 0.75rem;1172  outline: none;1173  transition: border-color 120ms ease, background 120ms ease;1174}11751176.peach-settings-input:focus {1177  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1178  background: rgba(0, 0, 0, 0.28);1179}11801181.peach-settings-input[type="password"] {1182  font-family: var(--font-mono);1183  letter-spacing: 0.04em;1184}11851186.peach-hidden-file-input {1187  display: none;1188}11891190.peach-checkbox-note {1191  display: flex;1192  align-items: flex-start;1193  gap: 8px;1194  font-size: 0.6875rem;1195  color: var(--peach-t1);1196  cursor: pointer;1197  margin: 12px 0;1198}11991200.peach-checkbox-note input {1201  margin-top: 1px;1202}12031204.peach-danger-notice {1205  background: rgba(220, 80, 60, 0.08);1206  border: 1px solid rgba(220, 80, 60, 0.2);1207  border-radius: 6px;1208  padding: 9px 11px;1209  font-size: 0.6875rem;1210  color: var(--peach-t1);1211  line-height: 1.5;1212}12131214.peach-info-notice {1215  font-size: 0.6875rem;1216  color: var(--peach-t1);1217  line-height: 1.5;1218  background: var(--surface-card);1219  border: 1px solid var(--peach-t3);1220  border-radius: 6px;1221  padding: 8px 10px;1222}12231224.peach-info-notice--warn {1225  border-color: rgba(220, 38, 38, 0.4);1226  background: rgba(220, 38, 38, 0.06);1227  color: rgba(220, 38, 38, 0.92);1228  margin-bottom: 8px;1229}12301231.peach-strength-row {1232  display: flex;1233  align-items: center;1234  gap: 8px;1235  margin-bottom: 10px;1236}12371238.peach-strength-track {1239  flex: 1;1240  height: 4px;1241  background: var(--peach-s2);1242  border-radius: 2px;1243  overflow: hidden;1244}12451246.peach-strength-fill {1247  height: 100%;1248  border-radius: 2px;1249  transition: width 120ms ease, background 120ms ease;1250}12511252/* ── Type selector tabs ── */1253.peach-type-tabs {1254  display: flex;1255  gap: 0;1256  background: var(--peach-t4);1257  border-radius: 8px;1258  padding: 3px;1259}12601261.peach-type-tab {1262  flex: 1;1263  display: flex;1264  align-items: center;1265  justify-content: center;1266  gap: 6px;1267  padding: 6px 10px;1268  border-radius: 6px;1269  border: none;1270  background: transparent;1271  cursor: pointer;1272  font-family: Inter, system-ui, sans-serif;1273  font-size: 0.6875rem;1274  font-weight: 400;1275  letter-spacing: 0.04em;1276  color: var(--peach-t1);1277  transition: background 150ms ease, color 150ms ease;1278}12791280.peach-type-tab.is-active {1281  background: var(--peach-s2);1282  color: var(--peach-t0);1283  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1284}12851286.peach-type-tab:not(.is-active):hover {1287  color: var(--peach-t0);1288}12891290.peach-type-tab svg {1291  opacity: 0.7;1292  flex-shrink: 0;1293}12941295.peach-type-tab.is-active svg {1296  opacity: 1;1297}12981299/* ── List view ───────────────────────────────────────────────────────── */1300.peach-list-top {1301  padding: 0 10px;1302  min-height: 46px;1303  display: flex;1304  align-items: center;1305  gap: 6px;1306  border-bottom: 1px solid var(--peach-t3);1307  flex-shrink: 0;1308  background: var(--peach-s1);1309}1310.peach-vault-list {1311  flex: 1;1312  overflow-y: auto;1313  scrollbar-width: none;1314}1315.peach-vault-list::-webkit-scrollbar { display: none; }13161317/* Scrollbar — vault list */1318.peach-vault-list {1319  scrollbar-width: thin;1320  scrollbar-color: var(--peach-t3) transparent;1321}13221323.peach-vault-list::-webkit-scrollbar {1324  width: 3px;1325}13261327.peach-vault-list::-webkit-scrollbar-thumb {1328  background: var(--peach-t3);1329  border-radius: 2px;1330}13311332.peach-entry-row {1333  width: 100%;1334  display: flex;1335  align-items: center;1336  gap: 10px;1337  padding: 9px 16px;1338  background: transparent;1339  border: none;1340  border-bottom: 1px solid var(--peach-t3);1341  cursor: pointer;1342  color: inherit;1343  text-align: left;1344  transition: background 80ms ease;1345}1346.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1347.peach-entry-row:last-child { border-bottom: none; }1348.peach-entry-row.is-active {1349  box-shadow: inset 2px 0 0 var(--peach-accent);1350  background: rgba(240,232,216,0.03);1351}1352.peach-entry-row:focus-visible {1353  outline: none;1354  box-shadow: 0 0 0 1px var(--peach-border-accent);1355  background: rgba(240,232,216,0.03);1356}1357.peach-entry-row-icon {1358  width: 26px; height: 26px;1359  border-radius: 7px;1360  border: 1px solid var(--peach-t3);1361  display: flex; align-items: center; justify-content: center;1362  color: var(--peach-t2);1363  flex-shrink: 0;1364}1365.peach-entry-row-icon.is-breach {1366  border-color: rgba(220,80,60,0.3);1367  color: rgba(220,80,60,0.7);1368}13691370/* Title-initials chip used as the favicon fallback for login entries whose1371 * real favicon hasn't been cached by the browser yet (freshly-imported,1372 * never-visited domains). Background colour is hashed from the title so1373 * the same entry always shows the same chip. The chip fits the same1374 * 26×26 row icon slot the favicon would take. */1375.peach-favicon-initials {1376  display: inline-flex;1377  align-items: center;1378  justify-content: center;1379  width: 100%;1380  height: 100%;1381  border-radius: 4px;1382  font-family: "IBM Plex Mono", monospace;1383  font-size: 0.5625rem;1384  font-weight: 600;1385  letter-spacing: 0.04em;1386  color: rgba(240, 232, 216, 0.92);1387  text-transform: uppercase;1388  user-select: none;1389}1390.peach-entry-row-info { flex: 1; min-width: 0; }1391.peach-entry-row-name {1392  display: block;1393  font-family: var(--font-display);1394  font-size: 1.0625rem;1395  font-style: italic;1396  font-weight: 400;1397  color: var(--peach-t0);1398  line-height: 1.2;1399  white-space: nowrap;1400  overflow: hidden;1401  text-overflow: ellipsis;1402}1403.peach-entry-row-meta {1404  display: block;1405  font-family: "IBM Plex Mono", monospace;1406  font-size: 0.5625rem;1407  color: var(--peach-t2);1408  margin-top: 1px;1409  letter-spacing: 0.05em;1410}1411.peach-entry-row-dot {1412  width: 5px; height: 5px;1413  border-radius: 50%;1414  background: rgba(220,80,60,0.7);1415  flex-shrink: 0;1416}1417.peach-new-entry-row {1418  display: flex;1419  align-items: center;1420  justify-content: center;1421  gap: 6px;1422  width: 100%;1423  padding: 11px;1424  background: transparent;1425  border: none;1426  border-top: 1px solid var(--peach-t3);1427  color: var(--peach-t2);1428  font-family: "IBM Plex Mono", monospace;1429  font-size: 0.5625rem;1430  text-transform: uppercase;1431  letter-spacing: 0.14em;1432  cursor: pointer;1433  flex-shrink: 0;1434  transition: color 120ms ease, background 120ms ease;1435}1436.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }14371438/* ── Multi-select mode ─────────────────────────────────────────────── */14391440/* Select-mode trigger button in sort bar — same shape as trash btn */1441.peach-sort-select-btn {1442  display: flex;1443  align-items: center;1444  justify-content: center;1445  padding: 3px 5px;1446  background: transparent;1447  border: none;1448  cursor: pointer;1449  color: var(--peach-t2);1450  border-radius: 4px;1451  transition: color 140ms ease, background 140ms ease;1452}1453.peach-sort-select-btn:hover {1454  color: var(--peach-t1);1455  background: var(--peach-t3);1456}14571458/* Sort bar in select mode */1459.peach-select-cancel-btn {1460  background: transparent;1461  border: none;1462  padding: 0 4px;1463  cursor: pointer;1464  font-family: "IBM Plex Mono", monospace;1465  font-size: 0.5625rem;1466  letter-spacing: 0.12em;1467  text-transform: uppercase;1468  color: var(--peach-t2);1469  transition: color 140ms ease;1470  flex-shrink: 0;1471}1472.peach-select-cancel-btn:hover { color: var(--peach-t0); }14731474.peach-select-count-label {1475  flex: 1;1476  text-align: center;1477  font-family: "IBM Plex Mono", monospace;1478  font-size: 0.5625rem;1479  letter-spacing: 0.14em;1480  text-transform: uppercase;1481  color: var(--peach-t1);1482}14831484.peach-select-all-btn {1485  background: transparent;1486  border: none;1487  padding: 0 4px;1488  cursor: pointer;1489  font-family: "IBM Plex Mono", monospace;1490  font-size: 0.5625rem;1491  letter-spacing: 0.12em;1492  text-transform: uppercase;1493  color: var(--peach-t2);1494  transition: color 140ms ease;1495  flex-shrink: 0;1496}1497.peach-select-all-btn:hover { color: var(--peach-accent); }14981499/* List in select mode */1500.peach-vault-list.is-selecting .peach-entry-row {1501  cursor: default;1502}1503.peach-vault-list.is-selecting .peach-entry-row:hover {1504  background: rgba(240,232,216,0.02);1505}1506.peach-vault-list.is-selecting .peach-entry-row.is-selected {1507  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1508}1509.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1510  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1511}15121513/* Select indicator circles in icon slot */1514.peach-entry-row-icon.is-select-icon {1515  color: var(--peach-t2);1516}1517.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1518  color: var(--peach-accent);1519}15201521/* Delete action bar at bottom (replaces new-entry row) */1522.peach-select-action-bar {1523  display: flex;1524  align-items: center;1525  justify-content: center;1526  gap: 7px;1527  width: 100%;1528  padding: 11px;1529  background: transparent;1530  border: none;1531  border-top: 1px solid var(--peach-t3);1532  color: var(--peach-t1);1533  font-family: "IBM Plex Mono", monospace;1534  font-size: 0.5625rem;1535  text-transform: uppercase;1536  letter-spacing: 0.14em;1537  cursor: pointer;1538  flex-shrink: 0;1539  transition: color 120ms ease, background 120ms ease;1540}1541.peach-select-action-bar:not(:disabled):hover {1542  color: var(--peach-t0);1543  background: rgba(220,80,60,0.06);1544}1545.peach-select-action-bar:not(:disabled):hover svg {1546  stroke: rgba(220,80,60,0.8);1547}1548.peach-select-action-bar:disabled,1549.peach-select-action-bar.is-empty {1550  color: var(--peach-t2);1551  cursor: default;1552  opacity: 0.5;1553}1554.peach-search-counter-list {1555  white-space: nowrap;1556  flex-shrink: 0;1557}1558.peach-list-empty {1559  min-height: 180px;1560  display: grid;1561  place-items: center;1562  color: var(--peach-t2);1563  font-family: "IBM Plex Mono", monospace;1564  font-size: 0.6875rem;1565}15661567/* ── Settings view ───────────────────────────────────────────────────── */1568.peach-settings-body {1569  flex: 1;1570  overflow-y: auto;1571  min-height: 0;1572  display: flex;1573  flex-direction: column;1574  padding: 2px 0 10px;1575}1576.peach-settings-group {1577  margin: 4px 10px;1578  padding: 9px 14px 11px;1579  border-radius: 12px;1580  border: 1px solid rgba(255, 255, 255, 0.07);1581  background: rgba(26, 20, 16, 0.60);1582  backdrop-filter: blur(10px) saturate(1.3);1583  -webkit-backdrop-filter: blur(10px) saturate(1.3);1584}15851586.peach-settings-group + .peach-settings-group {1587  margin-top: 6px;1588}15891590@supports not (backdrop-filter: blur(1px)) {1591  .peach-settings-group {1592    background: rgba(26, 20, 16, 0.90);1593    border-color: rgba(255, 255, 255, 0.09);1594    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1595  }1596}15971598.light .peach-settings-group,1599[data-theme="light"] .peach-settings-group {1600  background: rgba(253, 248, 244, 0.68);1601  border-color: rgba(0, 0, 0, 0.07);1602  backdrop-filter: blur(10px) saturate(1.2);1603  -webkit-backdrop-filter: blur(10px) saturate(1.2);1604}16051606@supports not (backdrop-filter: blur(1px)) {1607  .light .peach-settings-group,1608  [data-theme="light"] .peach-settings-group {1609    background: rgba(253, 248, 244, 0.95);1610    border-color: rgba(0, 0, 0, 0.09);1611  }1612}1613.peach-export-intro {1614  padding-bottom: 8px;1615}1616.peach-export-card {1617  display: grid;1618  gap: 10px;1619}1620.peach-rune-canvas {1621  border-radius: 8px;1622  background: rgba(0, 0, 0, 0.22);1623  flex: 1;1624  align-self: center;1625}1626.peach-script-input {1627  font-family: "PeachScript", monospace;1628  font-size: 0.6875rem;1629  line-height: 1.9;1630  letter-spacing: 0.06em;1631  color: var(--peach-t0);1632  background: rgba(0, 0, 0, 0.22);1633  border: none;1634  border-radius: 6px;1635  padding: 12px;1636  width: 100%;1637  min-height: 96px;1638  resize: vertical;1639  word-break: break-all;1640  scrollbar-width: none;1641  -ms-overflow-style: none;1642}16431644.peach-script-input::-webkit-scrollbar { display: none; }1645.peach-csv-warning {1646  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1647  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1648  color: var(--peach-t0);1649  border-radius: 6px;1650  padding: 10px 12px;1651  margin-bottom: 8px;1652  font-size: 0.75rem;1653  line-height: 1.45;1654}1655.peach-export-card--primary {1656  background:1657    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1658}16591660/* Export menu — distribute the three format cards across the popup. */1661.peach-export-menu {1662  display: flex;1663  flex-direction: column;1664  flex: 1;1665  min-height: 0;1666}1667.peach-export-menu .peach-settings-group {1668  flex: 1;1669  display: flex;1670  flex-direction: column;1671  justify-content: center;1672  gap: 10px;1673}16741675/* Result view — the script-string fills the remaining vertical surface. */1676.peach-export-result-group {1677  flex: 1;1678  display: flex;1679  flex-direction: column;1680  min-height: 0;1681  border-bottom: none;1682}1683.peach-export-result-group .peach-export-card {1684  flex: 1;1685  min-height: 0;1686  display: flex;1687  flex-direction: column;1688  gap: 10px;1689}1690.peach-export-result-group .peach-export-card-copy {1691  flex-shrink: 0;1692}1693.peach-export-result-group .peach-settings-label {1694  flex-shrink: 0;1695}1696.peach-export-result-group button {1697  flex-shrink: 0;1698}1699.peach-export-card-head {1700  display: flex;1701  align-items: center;1702  justify-content: space-between;1703  gap: 10px;1704}1705.peach-export-card-copy {1706  margin: 0;1707  font-size: 0.75rem;1708  line-height: 1.55;1709  color: var(--peach-t1);1710}1711.peach-export-note {1712  margin: 0;1713  font-size: 0.625rem;1714  line-height: 1.5;1715  color: var(--peach-t2);1716}1717.peach-export-pill {1718  display: inline-flex;1719  align-items: center;1720  padding: 4px 8px;1721  border-radius: 999px;1722  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1723  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1724  color: var(--peach-accent);1725  font-family: "IBM Plex Mono", monospace;1726  font-size: 0.5rem;1727  letter-spacing: 0.12em;1728  text-transform: uppercase;1729  white-space: nowrap;1730}1731.peach-export-pill--danger {1732  border-color: rgba(220,80,60,0.22);1733  background: rgba(220,80,60,0.08);1734  color: var(--peach-breach);1735}1736.peach-settings-label {1737  margin: 0 0 6px;1738  font-family: "IBM Plex Mono", monospace;1739  font-size: 0.5rem;1740  text-transform: uppercase;1741  letter-spacing: 0.18em;1742  color: var(--peach-t2);1743}1744.peach-settings-row {1745  display: flex;1746  align-items: center;1747  justify-content: space-between;1748  gap: 12px;1749  min-height: 34px;1750  padding: 6px 0;1751  font-size: 0.8125rem;1752  color: var(--peach-t1);1753}1754.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1755.peach-settings-value {1756  font-family: "IBM Plex Mono", monospace;1757  font-size: 0.625rem;1758  color: var(--peach-t2);1759}17601761.peach-settings-value--status {1762  display: flex;1763  align-items: center;1764  gap: 6px;1765}17661767.peach-settings-link {1768  font-family: "IBM Plex Mono", monospace;1769  font-size: 0.625rem;1770  color: var(--peach-accent);1771  text-decoration: none;1772  cursor: pointer;1773}1774.peach-settings-link:hover {1775  text-decoration: underline;1776}17771778.peach-settings-row--stack {1779  flex-direction: column;1780  align-items: stretch;1781  gap: 6px;1782}17831784.peach-settings-row--top {1785  align-items: flex-start;1786}17871788.peach-settings-row-main {1789  display: flex;1790  flex-direction: column;1791  gap: 4px;1792  flex: 1;1793}1794.peach-toggle {1795  width: 28px; height: 16px;1796  border-radius: 999px;1797  background: var(--peach-t3);1798  border: 1px solid var(--peach-t3);1799  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1800  flex-shrink: 0;1801  transition: background 200ms ease, border-color 200ms ease;1802  cursor: pointer;1803}1804.peach-toggle.is-on {1805  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1806  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1807}1808.peach-toggle-knob {1809  width: 10px; height: 10px;1810  border-radius: 50%;1811  background: var(--peach-t2);1812  flex-shrink: 0;1813  transform: translateX(0px);1814  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1815}1816.peach-toggle.is-on .peach-toggle-knob {1817  background: var(--peach-accent);1818  transform: translateX(12px);1819}1820.peach-settings-footer {1821  display: flex;1822  align-items: center;1823  gap: 8px;1824  margin-top: auto;1825  padding: 14px 16px 8px;1826  font-family: "IBM Plex Mono", monospace;1827  font-size: 0.5625rem;1828  color: var(--peach-t2);1829}18301831/* ── Settings home navigation ──────────────────────────────────────────── */1832.peach-settings-nav-label {1833  margin: 0 0 2px;1834  padding: 12px 16px 4px;1835  font-family: "IBM Plex Mono", monospace;1836  font-size: 0.5rem;1837  text-transform: uppercase;1838  letter-spacing: 0.18em;1839  color: var(--peach-t2);1840}18411842.peach-settings-cat-row {1843  display: flex;1844  align-items: center;1845  gap: 10px;1846  width: 100%;1847  padding: 9px 16px;1848  background: none;1849  border: none;1850  border-bottom: 1px solid var(--peach-t3);1851  cursor: pointer;1852  text-align: left;1853  color: inherit;1854  transition: background var(--peach-dur-80) ease;1855}1856.peach-settings-cat-row:hover {1857  background: var(--peach-t3);1858}1859.peach-settings-cat-row:last-child {1860  border-bottom: none;1861}18621863.peach-settings-cat-icon {1864  width: 28px;1865  height: 28px;1866  border-radius: 7px;1867  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1868  color: var(--peach-accent);1869  display: flex;1870  align-items: center;1871  justify-content: center;1872  flex-shrink: 0;1873}1874/* Light theme: peach-on-cream is too low-contrast — both colors are warm.1875   Darken the icon stroke to ink and bump the bg tint so the icon reads1876   sharply while the cell still feels accent-tinted. */1877.light .peach-settings-cat-icon {1878  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);1879  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));1880}18811882.peach-settings-cat-content {1883  flex: 1;1884  display: flex;1885  flex-direction: column;1886  gap: 2px;1887  min-width: 0;1888}18891890.peach-settings-cat-name {1891  font-size: 0.8125rem;1892  font-weight: 450;1893  color: var(--peach-t0);1894  line-height: 1.2;1895}18961897.peach-settings-cat-desc {1898  font-size: 0.625rem;1899  color: var(--peach-t2);1900  line-height: 1.3;1901  white-space: nowrap;1902  overflow: hidden;1903  text-overflow: ellipsis;1904}19051906.peach-settings-cat-chevron {1907  color: var(--peach-t2);1908  flex-shrink: 0;1909  opacity: 0.5;1910}19111912/* ── Settings sub-view section labels ──────────────────────────────────── */1913.peach-settings-sub-label {1914  margin: 12px 0 4px;1915  font-family: "IBM Plex Mono", monospace;1916  font-size: 0.5rem;1917  text-transform: uppercase;1918  letter-spacing: 0.18em;1919  color: var(--peach-t2);1920}1921.peach-settings-sub-label:first-child {1922  margin-top: 4px;1923}19241925/* ── Settings: collapsible Advanced section ─────────────────────────────── */1926.peach-settings-advanced-toggle {1927  display: flex;1928  align-items: center;1929  justify-content: space-between;1930  width: 100%;1931  background: none;1932  border: none;1933  cursor: pointer;1934  padding: 12px 0 4px;1935  margin: 0;1936  color: inherit;1937}1938.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {1939  color: var(--peach-t1);1940}1941.peach-settings-advanced-chevron {1942  font-size: 0.5625rem;1943  color: var(--peach-t3);1944  letter-spacing: 0;1945  transition: color 120ms ease;1946}19471948/* ── Feedback form ──────────────────────────────────────────────────────── */1949.peach-feedback-group {1950  flex: 1;1951  display: flex;1952  flex-direction: column;1953  border-bottom: none;1954}19551956.peach-feedback-intro {1957  margin: 4px 0 14px;1958  font-size: 0.75rem;1959  line-height: 1.55;1960  color: var(--peach-t1);1961}19621963.peach-feedback-chips {1964  display: flex;1965  flex-wrap: wrap;1966  gap: 6px;1967  margin-bottom: 14px;1968}19691970.peach-feedback-chip {1971  padding: 4px 10px;1972  border-radius: 999px;1973  border: 1px solid var(--peach-t3);1974  background: none;1975  color: var(--peach-t2);1976  font-size: 0.6875rem;1977  font-family: var(--font-ui);1978  cursor: pointer;1979  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,1980    background var(--peach-dur-80) ease;1981}1982.peach-feedback-chip:hover {1983  border-color: var(--peach-t2);1984  color: var(--peach-t1);1985}1986.peach-feedback-chip.is-active {1987  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);1988  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1989  color: var(--peach-accent);1990}19911992.peach-feedback-textarea {1993  flex: 1;1994  width: 100%;1995  min-height: 120px;1996  box-sizing: border-box;1997  background: rgba(0, 0, 0, 0.22);1998  border: 1px solid transparent;1999  border-radius: 6px;2000  color: var(--peach-t0);2001  font-size: 0.75rem;2002  font-family: var(--font-ui);2003  line-height: 1.5;2004  padding: 8px 10px;2005  resize: none;2006  outline: none;2007  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2008}2009.peach-feedback-textarea:focus {2010  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2011  background: rgba(0, 0, 0, 0.28);2012}2013.peach-feedback-textarea:focus {2014  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2015}2016.peach-feedback-textarea::placeholder {2017  color: var(--peach-t2);2018}20192020.peach-feedback-meta {2021  margin: 6px 0 0;2022  font-size: 0.625rem;2023  color: var(--peach-t2);2024  font-family: "IBM Plex Mono", monospace;2025}20262027.peach-feedback-result {2028  margin: 8px 0 0;2029  font-size: 0.6875rem;2030  font-family: "IBM Plex Mono", monospace;2031}2032.peach-feedback-result--ok { color: var(--peach-sync-ok); }2033.peach-feedback-result--err { color: var(--peach-breach); }20342035.peach-feedback-submit {2036  width: 100%;2037  margin-top: 12px;2038  justify-content: center;2039}20402041.peach-feedback-anon {2042  margin: 8px 0 0;2043  font-size: 0.625rem;2044  color: var(--peach-t2);2045  text-align: center;2046}20472048.peach-passkey-badge {2049  margin-left: 8px;2050  font-size: 0.625rem;2051  letter-spacing: 0.06em;2052  text-transform: uppercase;2053  color: var(--peach-t2);2054  font-family: var(--font-ui);2055  vertical-align: middle;2056}20572058.peach-passkey-delete-btn {2059  color: var(--peach-breach);2060  border-color: rgba(229, 85, 85, 0.25);2061}20622063.peach-passkey-delete-confirm {2064  display: flex;2065  align-items: center;2066  gap: 8px;2067  padding: 8px 10px;2068  background: rgba(229, 85, 85, 0.06);2069  border: 1px solid rgba(229, 85, 85, 0.2);2070  border-radius: 6px;2071}20722073.peach-passkey-delete-confirm-copy {2074  flex: 1;2075  font-size: 0.6875rem;2076  color: var(--peach-t1);2077}20782079.peach-passkey-delete-btn--confirm {2080  color: var(--peach-breach);2081  border-color: rgba(229, 85, 85, 0.4);2082}20832084.peach-passkey-activity {2085  flex-direction: column;2086  align-items: flex-start;2087  gap: 4px;2088}20892090.peach-passkey-meta {2091  font-size: 0.6875rem;2092  color: var(--peach-t2);2093}20942095.peach-passkey-actions {2096  position: relative;2097  z-index: 1;2098  margin-top: 14px;2099  display: flex;2100  flex-direction: column;2101  gap: 8px;2102}21032104.peach-passkey-approval {2105  display: flex;2106  flex-direction: column;2107  align-items: center;2108  padding: 22px 20px 18px;2109  gap: 10px;2110  text-align: center;2111}21122113.peach-passkey-approval-icon {2114  width: 46px;2115  height: 46px;2116  border-radius: 12px;2117  background: var(--peach-s2);2118  border: 1px solid var(--peach-t3);2119  display: flex;2120  align-items: center;2121  justify-content: center;2122  flex-shrink: 0;2123  color: var(--peach-accent);2124}21252126.peach-passkey-approval-icon img,2127.peach-passkey-approval-icon svg {2128  width: 28px;2129  height: 28px;2130  border-radius: 6px;2131}21322133.peach-passkey-approval-rp {2134  font-family: var(--font-ui);2135  font-size: 0.75rem;2136  color: var(--peach-t2);2137  letter-spacing: 0.03em;2138}21392140.peach-passkey-approval-action {2141  font-family: var(--font-display);2142  font-style: italic;2143  font-weight: 300;2144  font-size: 22px;2145  color: var(--peach-t0);2146  line-height: 1.1;2147  margin: 2px 0;2148}21492150.peach-passkey-approval-user {2151  font-family: var(--font-mono);2152  font-size: 0.6875rem;2153  color: var(--peach-t1);2154  background: var(--peach-s2);2155  border: 1px solid var(--peach-t3);2156  border-radius: 4px;2157  padding: 3px 8px;2158}21592160.peach-passkey-approval-notice {2161  font-size: 0.625rem;2162  color: var(--peach-t2);2163  line-height: 1.5;2164  max-width: 220px;2165}21662167.peach-passkey-approval-actions {2168  display: flex;2169  gap: 8px;2170  width: 100%;2171  margin-top: 6px;2172}21732174.peach-passkey-approval-actions .peach-btn {2175  flex: 1;2176}21772178/* ── Inline generator drawer ── */2179.peach-generator-drawer {2180  display: grid;2181  grid-template-rows: 0fr;2182  transition: grid-template-rows 320ms var(--peach-curve-arrival);2183  overflow: hidden;2184}2185.peach-generator-drawer.is-open {2186  grid-template-rows: 1fr;2187}2188.peach-generator-drawer-inner {2189  min-height: 0;2190  overflow: hidden;2191}2192.peach-generator-drawer-content {2193  border-top: 1px solid var(--peach-t3);2194  padding: 8px 0 4px;2195  display: flex;2196  flex-direction: column;2197  gap: 8px;2198}21992200/* ── Compact generator (inside entry edit) ── */2201.peach-generator-drawer-content--compact {2202  border-top: 1px solid var(--peach-t3);2203  padding: 8px 0 2px;2204  gap: 7px;2205}2206.peach-pwgen-compact-display-row {2207  display: flex;2208  align-items: center;2209  gap: 6px;2210}2211.peach-pwgen-compact-output {2212  flex: 1;2213  min-width: 0;2214  font-family: "IBM Plex Mono", monospace;2215  font-size: 0.6875rem;2216  font-weight: 400;2217  letter-spacing: 0.04em;2218  color: var(--peach-t0);2219  background: rgba(240, 232, 216, 0.04);2220  border: 1px solid var(--peach-t3);2221  border-radius: 5px;2222  padding: 5px 8px;2223  word-break: break-all;2224  line-height: 1.5;2225}2226.peach-pwgen-compact-controls {2227  display: flex;2228  align-items: center;2229  gap: 6px;2230}2231.peach-pwgen-compact-slider {2232  flex: 1;2233  min-width: 0;2234  height: 2px !important;2235}2236.peach-pwgen-compact-controls .peach-pwgen-len-num {2237  flex-shrink: 0;2238  min-width: 18px;2239  text-align: right;2240}2241.peach-pwgen-compact-pills {2242  display: flex;2243  gap: 3px;2244  flex-shrink: 0;2245}2246.peach-pwgen-compact-pills .peach-pwgen-pill {2247  padding: 2px 7px;2248  font-size: 0.5rem;2249}2250.peach-pwgen-compact-use {2251  flex-shrink: 0;2252  font-size: 0.625rem !important;2253  padding: 3px 9px !important;2254  min-height: 22px !important;2255  border-radius: 5px !important;2256}22572258/* ── Password edit row (input + eye toggle side-by-side) ── */2259.peach-password-edit-row {2260  display: flex;2261  align-items: center;2262  gap: 6px;2263}2264.peach-password-edit-row .peach-inline-input {2265  flex: 1;2266  min-width: 0;2267}22682269/* ── Generate toggle link ── */2270.peach-generate-toggle-link {2271  display: inline-flex;2272  align-items: center;2273  gap: 5px;2274  background: none;2275  border: none;2276  padding: 0;2277  cursor: pointer;2278  font-family: "IBM Plex Mono", monospace;2279  font-size: 0.625rem;2280  color: var(--peach-t2);2281  letter-spacing: 0.04em;2282  transition: color 120ms ease;2283  align-self: flex-start;2284}2285.peach-generate-toggle-link:hover {2286  color: var(--peach-accent);2287}22882289/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2290.peach-entry-body {2291  flex: 1;2292  overflow-y: auto;2293  overflow-x: hidden;2294  scrollbar-width: none;2295  -ms-overflow-style: none;2296  overscroll-behavior: contain;2297  display: grid;2298  gap: 10px;2299  align-content: start;2300  padding: 10px 20px 14px;2301  min-width: 0;2302  min-height: 0;2303}2304.peach-entry-body::-webkit-scrollbar { display: none; }23052306/* Type-toggle pills + inline note toolbar */2307.peach-new-type-row {2308  display: flex;2309  align-items: center;2310  gap: 6px;2311  margin-bottom: 2px;2312}2313.peach-new-type-btn {2314  background: transparent;2315  border: 1px solid var(--peach-t3);2316  border-radius: 12px;2317  padding: 3px 10px;2318  font-family: "IBM Plex Mono", monospace;2319  font-size: 0.5625rem;2320  letter-spacing: 0.12em;2321  text-transform: uppercase;2322  color: var(--peach-t2);2323  cursor: pointer;2324  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2325}2326.peach-new-type-btn.is-active {2327  color: var(--peach-t0);2328  border-color: var(--peach-accent);2329  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2330}2331.peach-new-type-btn:not(.is-active):hover {2332  color: var(--peach-t1);2333  border-color: var(--peach-t2);2334}23352336/* Editable title */2337.peach-new-title-wrap { margin: 0 0 2px; }2338.peach-new-title-input {2339  background: transparent;2340  border: none;2341  outline: none;2342  width: 100%;2343  color: var(--peach-t0);2344  font-family: var(--font-display);2345  font-style: italic;2346  font-weight: 400;2347  font-size: 40px;2348  line-height: 0.95;2349  caret-color: var(--peach-accent);2350}2351.peach-new-title-input::placeholder { color: var(--peach-t2); }23522353/* Editable domain field */2354.peach-domain-value--edit {2355  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2356  font-size: 0.625rem;2357  font-style: italic;2358  letter-spacing: 0.12em;2359  color: var(--peach-t1);2360  background: transparent;2361  border: none;2362  border-bottom: 1px solid var(--peach-t3);2363  outline: none;2364  width: 100%;2365  padding: 2px 0;2366  caret-color: var(--peach-accent);2367  transition: border-color 140ms ease, color 140ms ease;2368}2369.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2370.peach-domain-value--edit:focus {2371  border-bottom-color: rgba(240, 232, 216, 0.28);2372  color: var(--peach-t0);2373}23742375/* Editable field values (username, password, totp) */2376.peach-field-value--edit {2377  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2378  font-size: 0.8125rem;2379  color: var(--peach-t0);2380  background: transparent;2381  border: none;2382  border-bottom: 1px solid var(--peach-t3);2383  outline: none;2384  flex: 1;2385  min-width: 0;2386  padding: 3px 0;2387  caret-color: var(--peach-accent);2388  transition: border-color 140ms ease, color 140ms ease;2389}2390.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2391.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2392.peach-field-value--edit:focus {2393  border-bottom-color: rgba(240, 232, 216, 0.28);2394  color: var(--peach-t0);2395}23962397/* "+ add optional field" links */2398.peach-entry-add-links {2399  display: flex;2400  gap: 12px;2401  flex-wrap: wrap;2402  margin-top: -2px;2403}2404.peach-add-field-link {2405  background: transparent;2406  border: none;2407  padding: 0;2408  cursor: pointer;2409  font-family: "IBM Plex Mono", monospace;2410  font-size: 0.5625rem;2411  letter-spacing: 0.1em;2412  text-transform: uppercase;2413  color: var(--peach-t2);2414  transition: color 140ms ease;2415}2416.peach-add-field-link:hover { color: var(--peach-accent); }24172418/* ── New entry form (legacy classes) ────────────────────────────────── */2419.peach-new-body {2420  flex: 1;2421  overflow-y: auto;2422  padding: 10px 20px 14px;2423}2424.peach-new-name-input {2425  background: transparent;2426  border: none;2427  outline: none;2428  width: 100%;2429  color: var(--peach-t0);2430  font-family: var(--font-display);2431  font-style: italic;2432  font-weight: 400;2433  font-size: 40px;2434  line-height: 0.95;2435  caret-color: var(--peach-accent);2436}2437.peach-new-name-input::placeholder { color: var(--peach-t2); }2438.peach-new-field-input {2439  background: transparent;2440  border: none;2441  outline: none;2442  flex: 1;2443  min-width: 0;2444  caret-color: var(--peach-accent);2445}2446.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }24472448/* ── Canary card ── */2449.peach-canary-card {2450  border: 1px solid rgba(217, 160, 48, 0.2);2451  background: rgba(217, 160, 48, 0.03);2452  border-radius: 8px;2453  padding: 12px;2454}24552456.peach-canary-settings-header {2457  display: flex;2458  align-items: center;2459  justify-content: space-between;2460  cursor: pointer;2461  user-select: none;2462}24632464.peach-canary-card .peach-label {2465  color: rgba(217, 160, 48, 0.85);2466}24672468.peach-canary-card .peach-new-field-input {2469  border-color: rgba(217, 160, 48, 0.25);2470}24712472.peach-canary-card .peach-new-field-input:focus {2473  border-color: rgba(217, 160, 48, 0.5);2474}24752476.peach-canary-body {2477  margin-top: 12px;2478  display: flex;2479  flex-direction: column;2480  gap: 10px;2481}24822483.peach-canary-explainer {2484  display: flex;2485  gap: 10px;2486  padding: 10px 12px;2487  border-radius: 10px;2488  background: rgba(217, 160, 48, 0.06);2489  border: 1px solid rgba(217, 160, 48, 0.22);2490  margin-bottom: 4px;2491}24922493.peach-canary-explainer-icon {2494  font-size: 1rem;2495  flex-shrink: 0;2496  line-height: 1.2;2497}24982499.peach-canary-explainer-title {2500  font-family: var(--font-ui);2501  font-size: 0.6875rem;2502  font-weight: 500;2503  color: rgba(217, 160, 48, 0.9);2504  margin: 0 0 3px;2505}25062507.peach-canary-explainer-copy {2508  font-family: var(--font-ui);2509  font-size: 0.625rem;2510  color: var(--peach-t2);2511  line-height: 1.55;2512  margin: 0;2513}25142515.peach-canary-hint {2516  font-size: 0.625rem;2517  color: var(--peach-t2);2518  font-family: Inter, system-ui, sans-serif;2519  line-height: 1.5;2520  margin-top: 4px;2521}25222523.peach-canary-actions-row {2524  display: flex;2525  align-items: center;2526  gap: 8px;2527}25282529.peach-canary-test-btn {2530  border-color: rgba(217, 160, 48, 0.3);2531  color: rgba(217, 160, 48, 0.85);2532}25332534.peach-canary-test-result {2535  font-size: 0.625rem;2536  font-family: Inter, system-ui, sans-serif;2537}25382539.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2540.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }25412542.peach-canary-badge {2543  display: flex;2544  position: relative;2545  z-index: 1;2546  align-items: center;2547  gap: 5px;2548  padding: 4px 10px;2549  background: rgba(217, 160, 48, 0.12);2550  border: 1px solid rgba(217, 160, 48, 0.35);2551  border-radius: 6px;2552  margin-bottom: 6px;2553  width: fit-content;2554}25552556.peach-canary-badge-label {2557  font-size: 0.625rem;2558  letter-spacing: 0.06em;2559  color: rgba(217, 160, 48, 0.9);2560  font-family: var(--font-ui);2561  text-transform: uppercase;2562}25632564.peach-canary-badge-icon {2565  font-size: 0.6875rem;2566}25672568.peach-canary-suppress-row {2569  display: flex;2570  align-items: center;2571  gap: 8px;2572  padding: 6px 10px;2573  background: rgba(217, 160, 48, 0.08);2574  border-radius: 6px;2575  margin-bottom: 8px;2576}25772578.peach-canary-suppress-label {2579  font-size: 0.6875rem;2580  color: rgba(217, 160, 48, 0.85);2581  cursor: pointer;2582  font-family: var(--font-ui);2583  letter-spacing: 0.04em;2584}25852586.peach-regen-panel {2587  position: relative;2588  z-index: 1;2589  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2590  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2591  border-radius: 8px;2592  padding: 12px;2593  margin-bottom: 8px;2594}25952596.peach-regen-panel-header {2597  display: flex;2598  align-items: center;2599  justify-content: space-between;2600  margin-bottom: 10px;2601}26022603.peach-regen-panel-title {2604  font-size: 0.6875rem;2605  font-weight: 600;2606  letter-spacing: 0.06em;2607  text-transform: uppercase;2608  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2609}26102611.peach-regen-output {2612  background: rgba(0, 0, 0, 0.2);2613  border-radius: 6px;2614  padding: 10px;2615  margin-bottom: 10px;2616  font-family: var(--font-mono);2617  font-size: 0.8125rem;2618  word-break: break-all;2619  color: var(--peach-t1);2620}26212622.peach-regen-actions {2623  display: flex;2624  gap: 6px;2625}26262627.peach-regen-actions--spaced {2628  margin-bottom: 8px;2629}26302631.peach-regen-action-grow {2632  flex: 1;2633}26342635.peach-regen-copy-btn {2636  padding: 0 8px;2637}26382639.peach-regen-success {2640  position: relative;2641  z-index: 1;2642  background: rgba(40, 180, 80, 0.1);2643  border: 1px solid rgba(40, 180, 80, 0.3);2644  border-radius: 8px;2645  padding: 10px 12px;2646  margin-bottom: 8px;2647  display: flex;2648  align-items: center;2649  gap: 8px;2650  font-size: 0.6875rem;2651  color: rgba(40, 180, 80, 0.9);2652}26532654/* ── Note editor overlay ── */2655.peach-note-editor {2656  position: absolute;2657  inset: 0;2658  z-index: 200;2659  display: flex;2660  flex-direction: column;2661  background:2662    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2663    var(--peach-bg);2664  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2665}26662667.peach-note-editor-header {2668  display: flex;2669  align-items: center;2670  gap: 10px;2671  padding: 14px 16px 10px;2672  border-bottom: 1px solid var(--peach-t3);2673  flex-shrink: 0;2674}26752676.peach-note-editor-back {2677  background: transparent;2678  border: none;2679  cursor: pointer;2680  color: var(--peach-t2);2681  padding: 4px 6px;2682  border-radius: 6px;2683  display: flex;2684  align-items: center;2685  transition: color 120ms ease, background 120ms ease;2686  flex-shrink: 0;2687}2688.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }26892690.peach-note-editor-label {2691  flex: 1;2692  font-family: var(--font-display);2693  font-style: italic;2694  font-size: 0.9375rem;2695  color: var(--peach-t1);2696  letter-spacing: 0.02em;2697}26982699.peach-note-editor-save-btn {2700  background: transparent;2701  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2702  border-radius: 8px;2703  color: var(--peach-accent);2704  font-family: "IBM Plex Mono", monospace;2705  font-size: 0.625rem;2706  letter-spacing: 0.06em;2707  text-transform: uppercase;2708  padding: 3px 10px;2709  cursor: pointer;2710  transition: background 120ms ease, border-color 120ms ease;2711}2712.peach-note-editor-save-btn:hover:not(:disabled) {2713  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2714  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2715}2716.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }27172718.peach-note-toolbar {2719  display: flex;2720  align-items: center;2721  gap: 3px;2722  padding: 6px 14px 5px;2723  border-bottom: 1px solid var(--peach-t3);2724  flex-shrink: 0;2725}27262727.peach-note-tool-btn {2728  background: transparent;2729  border: 1px solid transparent;2730  border-radius: 5px;2731  color: var(--peach-t2);2732  font-family: "IBM Plex Mono", monospace;2733  font-size: 0.625rem;2734  letter-spacing: 0.04em;2735  padding: 2px 8px;2736  cursor: pointer;2737  line-height: 1.6;2738  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2739}2740.peach-note-tool-btn:hover {2741  background: var(--peach-t4);2742  color: var(--peach-t0);2743  border-color: var(--peach-t3);2744}27452746.peach-note-tool-icon {2747  padding: 3px 7px;2748  display: inline-flex;2749  align-items: center;2750  justify-content: center;2751}27522753.peach-note-tool-divider {2754  width: 1px;2755  height: 14px;2756  background: var(--peach-t3);2757  margin: 0 4px;2758  flex-shrink: 0;2759}27602761.peach-note-editor-body {2762  flex: 1;2763  overflow-y: auto;2764  padding: 16px 20px 20px;2765  outline: none;2766  font-family: var(--font-display);2767  font-size: 1rem;2768  line-height: 1.75;2769  color: var(--peach-t0);2770  scrollbar-width: none;2771  word-break: break-word;2772}2773.peach-note-editor-body:empty::before {2774  content: "write your note…";2775  color: var(--peach-t3);2776  font-style: italic;2777  pointer-events: none;2778}27792780/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2781.peach-note-editor-inline {2782  display: flex;2783  flex-direction: column;2784  flex: 1;2785  min-height: 0;2786}2787.peach-note-editor-body--inline {2788  flex: 1;2789  min-height: 0;2790  font-size: 0.9375rem;2791  padding: 10px 20px 14px;2792}27932794/* Full-width toolbar row inside the body (Add.tsx note type).2795   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */2796.peach-note-toolbar-body {2797  display: flex;2798  align-items: center;2799  gap: 3px;2800  padding: 5px 20px 4px;2801  margin: 2px -20px 0;2802  border-bottom: 1px solid var(--peach-t3);2803  flex-shrink: 0;2804}28052806/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2807   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2808   and .peach-note-tool-divider button-level styles. */2809.peach-note-toolbar-inline {2810  display: flex;2811  align-items: center;2812  gap: 3px;2813  margin-left: auto;2814  padding-left: 10px;2815  border-left: 1px solid var(--peach-t3);2816  min-height: 22px;2817}28182819/* Entry.tsx toolbar row (no tabs, toolbar only) */2820.peach-entry-note-toolbar-row {2821  display: flex;2822  align-items: center;2823  margin: 4px 0 6px;2824  position: relative;2825  z-index: 1;2826}2827.peach-entry-note-toolbar-row .peach-note-toolbar-inline {2828  border-left: none;2829  padding-left: 0;2830  margin-left: 0;2831}28322833/* Note body — fills available vertical space in Add.tsx and Entry.tsx */2834.peach-note-body {2835  display: flex;2836  flex-direction: column;2837  flex: 1;2838  min-height: 0;2839  margin: 4px 0 0;2840}2841.peach-entry-body--new .peach-note-body {2842  margin: 8px -20px 0;2843}28442845/* Add.tsx body is a grid by default; swap to a flex column when a note is2846   active so the note body can stretch and pin the tags row to the bottom. */2847.peach-entry-body--new:has(.peach-note-body) {2848  display: flex;2849  flex-direction: column;2850}28512852/* Rich content element styles (editor + display) */2853.peach-note-editor-body h2,2854.peach-note-content h2 {2855  font-family: var(--font-display);2856  font-size: 20px;2857  font-weight: 600;2858  font-style: italic;2859  color: var(--peach-t0);2860  margin: 6px 0 2px;2861  line-height: 1.3;2862}2863.peach-note-editor-body ul,2864.peach-note-content ul {2865  padding-left: 18px;2866  margin: 3px 0;2867  list-style: disc;2868}2869.peach-note-editor-body ol,2870.peach-note-content ol {2871  padding-left: 18px;2872  margin: 3px 0;2873  list-style: decimal;2874}2875.peach-note-editor-body li,2876.peach-note-content li { margin: 2px 0; }2877.peach-note-editor-body hr,2878.peach-note-content hr {2879  border: none;2880  border-top: 1px solid var(--peach-t3);2881  margin: 10px 0;2882}28832884/* font size elements from execCommand */2885.peach-note-editor-body font[size="1"],2886.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }2887.peach-note-editor-body font[size="2"],2888.peach-note-content font[size="2"] { font-size: 0.8125rem; }2889.peach-note-editor-body font[size="3"],2890.peach-note-content font[size="3"] { font-size: 1rem; }2891.peach-note-editor-body font[size="4"],2892.peach-note-content font[size="4"] { font-size: 20px; }2893.peach-note-editor-body font[size="5"],2894.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }28952896/* bold / italic inside the editor and note display */2897.peach-note-editor-body b, .peach-note-editor-body strong,2898.peach-note-content b, .peach-note-content strong { font-weight: 700; }2899.peach-note-editor-body em, .peach-note-editor-body i,2900.peach-note-content em, .peach-note-content i { font-style: italic; }29012902/* note display — rendered HTML, no pre-wrap */2903.peach-note-content {2904  overflow: auto;2905  max-height: 340px;2906  word-break: break-word;2907}29082909/* ── Note textarea ── */2910.peach-note-textarea {2911  width: 100%;2912  min-height: 180px;2913  max-height: 280px;2914  resize: vertical;2915  background: var(--peach-t4);2916  border: 1px solid var(--peach-t3);2917  border-radius: 8px;2918  padding: 10px 12px;2919  font-family: "IBM Plex Mono", monospace;2920  font-size: 0.75rem;2921  line-height: 1.7;2922  color: var(--peach-t1);2923  outline: none;2924  transition: border-color 150ms ease;2925}29262927.peach-note-textarea:focus {2928  border-color: var(--peach-t2);2929}29302931.peach-note-char-count {2932  font-family: "IBM Plex Mono", monospace;2933  font-size: 0.5625rem;2934  color: var(--peach-t3);2935  text-align: right;2936  margin-top: 4px;2937  letter-spacing: 0.1em;2938}29392940/* ── Field input baseline ── */2941.peach-new-field-input {2942  width: 100%;2943  background: transparent;2944  border: none;2945  border-bottom: 1px solid var(--peach-t3);2946  padding: 4px 0;2947  color: var(--peach-t1);2948  font-family: "IBM Plex Mono", monospace;2949  font-size: 0.8125rem;2950  outline: none;2951  transition: border-color 150ms ease;2952}29532954.peach-new-field-input:focus {2955  border-bottom-color: var(--peach-t0);2956  color: var(--peach-t0);2957}29582959.peach-new-name-input {2960  width: 100%;2961  background: transparent;2962  border: none;2963  border-bottom: 1px solid var(--peach-t3);2964  padding: 6px 0;2965  font-family: var(--font-display);2966  font-style: italic;2967  font-size: 28px;2968  color: var(--peach-t0);2969  outline: none;2970  transition: border-color 150ms ease;2971}29722973.peach-new-name-input:focus {2974  border-bottom-color: var(--peach-t1);2975}29762977.peach-new-name-input::placeholder {2978  color: var(--peach-t2);2979  font-style: italic;2980}29812982.peach-new-field-input::placeholder {2983  color: var(--peach-t3);2984}29852986/* ── Demo entrance animation ── */2987#hd-shell {2988  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;2989}2990@keyframes hd-shell-enter {2991  from { opacity: 0; transform: scale(0.96) translateY(16px); }2992  to   { opacity: 1; transform: scale(1) translateY(0); }2993}29942995/* ── Keyframes ── */2996@keyframes peach-char-enter {2997  from { opacity: 0; transform: translateY(0.22em); }2998  to   { opacity: 1; transform: translateY(0); }2999}3000@keyframes peach-content-enter {3001  from { opacity: 0.96; transform: translateY(4px); }3002  to   { opacity: 1; transform: translateY(0); }3003}3004@keyframes peach-content-exit {3005  from { opacity: 1; transform: translateY(0); }3006  to   { opacity: 0.92; transform: translateY(-3px); }3007}3008@keyframes peach-screen-enter {3009  from { opacity: 0; transform: translateY(14px); }3010  to   { opacity: 1; transform: translateY(0); }3011}3012@keyframes peach-shell-fade-in {3013  from { opacity: 0; }3014  to   { opacity: 1; }3015}3016@keyframes peach-veil-in {3017  from { opacity: 0; }3018  to   { opacity: 1; }3019}3020@keyframes peach-lock-settle {3021  0%   { transform: scale(0.9); }3022  65%  { transform: scale(1.08); }3023  100% { transform: scale(1); }3024}3025@keyframes peach-copy-confirm {3026  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3027  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); }3028}3029@keyframes peach-copy-retreat {3030  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); }3031  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3032}3033@keyframes peach-copy-flood {3034  from { opacity: 0; transform: scaleX(0.15); }3035  to   { opacity: 1; transform: scaleX(1); }3036}3037@keyframes peach-copy-icon-settle {3038  from  { transform: scale(0.84); }3039  70%   { transform: scale(1.08); }3040  to    { transform: scale(1); }3041}3042@keyframes peach-copy-sheen-retreat {3043  from { opacity: 1; transform: scaleX(1); }3044  to   { opacity: 0; transform: scaleX(0.15); }3045}3046@keyframes peach-copy-drain {3047  from { width: 100%; }3048  to   { width: 0; }3049}3050@keyframes peach-shake {3051  0%, 100% { transform: translateX(0); }3052  20%      { transform: translateX(-6px); }3053  40%      { transform: translateX(6px); }3054  60%      { transform: translateX(-4px); }3055  80%      { transform: translateX(4px); }3056}30573058@keyframes pip-pulse {3059  0% { transform: scale(1); }3060  40% { transform: scale(2.2); }3061  100% { transform: scale(1); }3062}306330643065/* ── Password generator ── */3066.peach-pwgen-body {3067  flex: 1; overflow-y: auto;3068  display: flex; flex-direction: column;3069}3070.peach-policy-badge {3071  display: flex; align-items: center;3072  padding: 6px 20px 0;3073  font-size: 0.625rem; font-family: Inter, sans-serif;3074  color: var(--peach-t2); letter-spacing: 0.04em;3075}3076.peach-pwgen-display {3077  padding: 14px 20px 12px;3078  border-bottom: 1px solid var(--peach-t3);3079  display: flex; align-items: flex-start; gap: 10px;3080}3081.peach-pwgen-display-row {3082  display: flex;3083  align-items: flex-start;3084  gap: 8px;3085  padding-bottom: 8px;3086  border-bottom: 1px solid var(--peach-t3);3087}3088.peach-pwgen-output {3089  flex: 1; min-width: 0; margin: 0;3090  font-family: "IBM Plex Mono", monospace;3091  font-size: 0.8125rem; color: var(--peach-t0);3092  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3093  white-space: normal;3094  padding: 10px 12px;3095  background: var(--peach-t4);3096  border-radius: 6px;3097  min-height: 36px;3098}3099.peach-pwgen-output-display {3100  flex: 1;3101  min-width: 0;3102  margin: 0;3103  font-family: var(--font-display);3104  font-style: italic;3105  font-weight: 300;3106  font-size: 32px;3107  line-height: 1.05;3108  color: var(--peach-t0);3109  word-break: break-all;3110  overflow-wrap: break-word;3111  white-space: normal;3112  letter-spacing: 0.02em;3113}3114.peach-pwgen-display-actions {3115  display: flex;3116  flex-direction: column;3117  gap: 4px;3118  flex-shrink: 0;3119  margin-top: 2px;3120}3121.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3122.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3123.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3124.peach-pwgen-len-num {3125  font-family: "IBM Plex Mono", monospace;3126  font-size: 0.75rem; color: var(--peach-accent);3127}3128.peach-pwgen-len-num--edit {3129  cursor: text;3130  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3131}3132.peach-pwgen-len-input {3133  font-family: "IBM Plex Mono", monospace;3134  font-size: 0.75rem;3135  color: var(--peach-accent);3136  background: transparent;3137  border: none;3138  border-bottom: 1px solid var(--peach-accent);3139  outline: none;3140  width: 32px;3141  text-align: right;3142  padding: 0;3143}3144.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3145.peach-pwgen-toggles { display: flex; flex-direction: column; }3146.peach-pwgen-charset-pills {3147  display: flex;3148  gap: 6px;3149  flex-wrap: wrap;3150}3151.peach-pwgen-pill {3152  padding: 4px 11px;3153  border-radius: 999px;3154  border: 1px solid var(--peach-t3);3155  background: transparent;3156  color: var(--peach-t2);3157  font-family: "IBM Plex Mono", monospace;3158  font-size: 0.5625rem;3159  letter-spacing: 0.08em;3160  cursor: pointer;3161  transition: all 150ms ease;3162}3163.peach-pwgen-pill.is-on {3164  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3165  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3166  color: var(--peach-accent);3167}3168.peach-pwgen-pill:not(.is-on):hover {3169  color: var(--peach-t1);3170  border-color: var(--peach-t2);3171}3172.peach-pwgen-use-btn {3173  width: 100%;3174  min-height: 34px;3175  border-radius: 8px;3176  margin-top: 2px;3177}3178.peach-pwgen-toggle-row {3179  display: flex; align-items: center; justify-content: space-between;3180  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3181}3182.peach-pwgen-toggle-row:last-child { border-bottom: none; }3183.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }31843185.peach-screen-prelock {3186  z-index: 10;3187}31883189.prelock-form {3190  display: grid;3191  gap: 12px;3192}31933194/* Peach popup should not expose native scrollbars on internal panels. */3195.peach-settings-body,3196.peach-new-body,3197.peach-pwgen-body,3198.lock-screen,3199.peach-import-preview {3200  scrollbar-width: none;3201  -ms-overflow-style: none;3202  overscroll-behavior: contain;3203}3204.peach-settings-body::-webkit-scrollbar,3205.peach-new-body::-webkit-scrollbar,3206.peach-pwgen-body::-webkit-scrollbar,3207.lock-screen::-webkit-scrollbar,3208.peach-import-preview::-webkit-scrollbar {3209  width: 0;3210  height: 0;3211  display: none;3212}32133214.lock-screen {3215  height: 100%;3216  min-height: 100%;3217  overflow-y: auto;3218  padding: 18px 18px 16px;3219  gap: 14px;3220  grid-template-rows: auto auto auto 1fr auto;3221  align-content: stretch;3222  position: relative;3223  isolation: isolate;3224}3225.peach-screen.lock-screen--vault-stage {3226  display: flex;3227  flex-direction: column;3228  justify-content: flex-start;3229  gap: 18px;3230  padding: 20px 18px 18px;3231  overflow: hidden;3232}3233.peach-screen.lock-screen--vault-stage .peach-lock-panel {3234  margin-top: 0;3235}3236.lock-screen--onboarding {3237  display: flex;3238  flex-direction: column;3239  gap: 12px;3240  justify-content: flex-start;3241}32423243.lock-screen::before {3244  content: "";3245  position: absolute;3246  inset: 12px 18px auto auto;3247  width: 160px;3248  height: 160px;3249  border-radius: 999px;3250  background:3251    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%);3252  filter: blur(6px);3253  opacity: 0.7;3254  pointer-events: none;3255  z-index: 0;3256}32573258.peach-lock-rune-string {3259  flex: 1;3260  display: flex;3261  align-items: center;3262  justify-content: center;3263  gap: 6px;3264  font-family: PeachScript, monospace;3265  font-size: 0.8125rem;3266  letter-spacing: 0.05em;3267  pointer-events: none;3268  user-select: none;3269  position: relative;3270  z-index: 1;3271}32723273.peach-lock-rune-string span {3274  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3275  text-shadow:3276    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3277    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3278  transition: color 0.9s ease, text-shadow 0.9s ease;3279}32803281.peach-lock-rune-string span.is-glowing {3282  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3283  text-shadow:3284    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3285    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3286}32873288.lock-screen-header {3289  display: flex;3290  align-items: center;3291  justify-content: space-between;3292  position: relative;3293  z-index: 1;3294}32953296.lock-password-input.shake {3297  animation: peach-shake 300ms ease-in-out;3298}32993300.peach-hint-error {3301  color: rgba(220, 80, 60, 0.92);3302}33033304.peach-onboarding-headline {3305  margin: 0;3306  font-family: var(--font-display);3307  font-size: 35px;3308  line-height: 0.88;3309  font-style: italic;3310  font-weight: 400;3311  max-width: 252px;3312}33133314.peach-lock-copy {3315  display: grid;3316  gap: 8px;3317  position: relative;3318  z-index: 1;3319}33203321.peach-lock-copy--onboarding {3322  gap: 10px;3323}33243325.peach-lock-hero {3326  position: relative;3327  z-index: 1;3328  display: grid;3329  gap: 8px;3330  min-height: 0;3331  padding: 4px 2px 0;3332  border: none;3333  border-radius: 0;3334  background: transparent;3335  box-shadow: none;3336}3337.peach-lock-hero-art {3338  position: absolute;3339  right: -8px;3340  top: -6px;3341  width: 120px;3342  height: 120px;3343  display: flex;3344  align-items: center;3345  justify-content: center;3346  pointer-events: none;3347  opacity: 0.12;3348  filter: saturate(0.9);3349}3350.peach-lock-hero-mark {3351  width: 100%;3352  height: 100%;3353}3354/* Peach body stays brand-peach across every accent — we don't want a3355   green or blue peach when sage/sky is selected. Leaf + stem keep the3356   sage tint because a real peach has a sage leaf. */3357.peach-lock-hero-mark path:nth-child(2),3358.peach-lock-hero-mark path:nth-child(3) {3359  stroke: rgba(123, 144, 96, 0.88);3360  fill: rgba(123, 144, 96, 0.88);3361}3362.peach-lock-hero > *:not(.peach-lock-hero-art) {3363  position: relative;3364  z-index: 1;3365}33663367.peach-lock-eyebrow {3368  display: inline-flex;3369  align-items: center;3370  width: fit-content;3371  padding: 4px 9px;3372  border-radius: 999px;3373  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3374  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3375  color: var(--peach-t0);3376  font-family: "IBM Plex Mono", monospace;3377  font-size: 0.5rem;3378  letter-spacing: 0.18em;3379  text-transform: uppercase;3380}33813382.peach-lock-label-row {3383  display: flex;3384  align-items: center;3385  justify-content: space-between;3386  margin-bottom: 0;3387}33883389.peach-lock-reveal-btn {3390  display: inline-flex;3391  align-items: center;3392  gap: 4px;3393  background: none;3394  border: none;3395  cursor: pointer;3396  font-family: "IBM Plex Mono", monospace;3397  font-size: 0.5625rem;3398  letter-spacing: 0.06em;3399  color: var(--peach-t2);3400  padding: 2px 0;3401  transition: color 150ms ease;3402}34033404.peach-lock-reveal-btn:hover {3405  color: var(--peach-t1);3406}34073408.peach-lock-warning {3409  color: rgba(220, 80, 60, 0.85) !important;3410  line-height: 1.5;3411}34123413.peach-onboarding-cards {3414  display: grid;3415  gap: 8px;3416  position: relative;3417  z-index: 1;3418}34193420.peach-lock-panel {3421  position: relative;3422  z-index: 1;3423  display: grid;3424  gap: 9px;3425  padding: 14px 16px 15px;3426  border-radius: 18px;3427  border: 1px solid var(--peach-t3);3428  background:3429    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3430  box-shadow:3431    inset 0 1px 0 rgba(240, 232, 216, 0.04),3432    0 12px 28px rgba(0, 0, 0, 0.12);3433}34343435/* Glass surface — lock panel and settings groups */3436.peach-glass {3437  background: rgba(26, 20, 16, 0.65);3438  border: 1px solid rgba(255, 255, 255, 0.08);3439  border-radius: 12px;3440  backdrop-filter: blur(12px) saturate(1.4);3441  -webkit-backdrop-filter: blur(12px) saturate(1.4);3442}34433444@supports not (backdrop-filter: blur(1px)) {3445  .peach-glass {3446    background: rgba(26, 20, 16, 0.92);3447    border: 1px solid rgba(255, 255, 255, 0.10);3448    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3449  }3450}34513452.light .peach-glass,3453[data-theme="light"] .peach-glass {3454  background: rgba(253, 248, 244, 0.70);3455  border: 1px solid rgba(0, 0, 0, 0.07);3456  backdrop-filter: blur(12px) saturate(1.2);3457  -webkit-backdrop-filter: blur(12px) saturate(1.2);3458}34593460@supports not (backdrop-filter: blur(1px)) {3461  .light .peach-glass,3462  [data-theme="light"] .peach-glass {3463    background: rgba(253, 248, 244, 0.95);3464    border: 1px solid rgba(0, 0, 0, 0.09);3465  }3466}34673468/* Lock panel keeps its own border-radius over the generic glass token */3469.peach-lock-panel.peach-glass {3470  border-radius: 18px;3471  background: rgba(26, 20, 16, 0.65);3472  border: 1px solid rgba(255, 255, 255, 0.08);3473  box-shadow:3474    inset 0 1px 0 rgba(255, 255, 255, 0.05),3475    0 12px 28px rgba(0, 0, 0, 0.3);3476}34773478.light .peach-lock-panel.peach-glass,3479[data-theme="light"] .peach-lock-panel.peach-glass {3480  background: rgba(238, 227, 204, 0.75);3481  border: 1px solid rgba(34, 24, 9, 0.10);3482  box-shadow:3483    inset 0 1px 0 rgba(255, 255, 255, 0.5),3484    0 8px 24px rgba(80, 56, 32, 0.15);3485}34863487@supports not (backdrop-filter: blur(1px)) {3488  .peach-lock-panel.peach-glass {3489    background: rgba(26, 20, 16, 0.92);3490    box-shadow:3491      inset 0 1px 0 rgba(255, 255, 255, 0.05),3492      0 12px 28px rgba(0, 0, 0, 0.4);3493  }3494  .light .peach-lock-panel.peach-glass,3495  [data-theme="light"] .peach-lock-panel.peach-glass {3496    background: rgba(238, 227, 204, 0.96);3497  }3498}34993500.peach-lock-panel--secondary {3501  gap: 12px;3502}35033504.peach-lock-panel-header {3505  display: flex;3506  align-items: baseline;3507  justify-content: space-between;3508  gap: 12px;3509}35103511.peach-lock-option-grid {3512  display: grid;3513  gap: 10px;3514}35153516.peach-lock-option {3517  width: 100%;3518  display: grid;3519  gap: 6px;3520  padding: 14px 15px;3521  border-radius: 16px;3522  border: 1px solid rgba(240, 232, 216, 0.08);3523  background: rgba(240, 232, 216, 0.02);3524  color: var(--peach-t0);3525  text-align: left;3526  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3527}35283529.peach-lock-option:hover {3530  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3531  background: rgba(240, 232, 216, 0.04);3532  transform: translateY(-1px);3533}35343535.peach-lock-option-title {3536  font-size: 0.75rem;3537  color: var(--peach-t0);3538}35393540.peach-lock-option-copy {3541  font-size: 0.6875rem;3542  line-height: 1.55;3543  color: var(--peach-t1);3544}35453546.peach-onboarding-stack {3547  margin-top: 2px;3548}3549.peach-lock-panel-footer {3550  display: grid;3551  gap: 6px;3552  margin-top: 2px;3553  padding-top: 10px;3554  border-top: 1px solid rgba(240, 232, 216, 0.06);3555}35563557/* ── Restore tab view ─────────────────────────────────────────────────────3558   Tab-based restore screen replacing the old three-card picker. */35593560.peach-restore-tabview {3561  overflow: hidden;3562}35633564.peach-restore-tabcard {3565  flex: 1;3566  display: flex;3567  flex-direction: column;3568  gap: 0;3569  padding: 0;3570  overflow: hidden;3571  cursor: default;3572  user-select: none;3573  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3574}35753576/* ── Tab selector ─────────────────────────────────────────────────────── */35773578.peach-restore-tabs {3579  display: flex;3580  justify-content: space-around;3581  padding: 14px 10px 10px;3582  border-bottom: 1px solid var(--peach-t3);3583  gap: 2px;3584  overflow: hidden;3585  scrollbar-width: none;3586}3587.peach-restore-tabs::-webkit-scrollbar { display: none; }35883589.peach-restore-tab {3590  background: none;3591  border: none;3592  cursor: pointer;3593  padding: 3px 2px;3594  font-family: 'Cormorant Garamond', Georgia, serif;3595  font-style: italic;3596  font-size: 11px;3597  color: var(--peach-t2);3598  transition: color 150ms ease, text-shadow 150ms ease;3599  flex: 1;3600  min-width: 0;3601  text-align: center;3602  white-space: nowrap;3603  overflow: hidden;3604  text-overflow: ellipsis;3605}3606.peach-restore-tab:hover {3607  color: var(--peach-accent);3608  text-shadow:3609    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3610    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3611}3612.peach-restore-tab.is-active {3613  color: var(--peach-accent);3614  text-shadow:3615    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3616    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3617}36183619/* ── Content area ─────────────────────────────────────────────────────── */36203621.peach-restore-content {3622  padding: 16px 16px 14px;3623  display: flex;3624  flex-direction: column;3625  gap: 8px;3626  overflow: hidden;3627  scrollbar-width: none;3628  flex: 1;3629}3630.peach-restore-content::-webkit-scrollbar { display: none; }3631.peach-restore-content > * {3632  overflow: hidden;3633  scrollbar-width: none;3634}3635.peach-restore-content > *::-webkit-scrollbar { display: none; }36363637/* ── Shared tab inner layout ──────────────────────────────────────────── */36383639.peach-rt-symbols,3640.peach-rt-csv,3641.peach-rt-phone {3642  display: flex;3643  flex-direction: column;3644  gap: 8px;3645  overflow: hidden;3646}36473648.peach-rt-submit {3649  width: 100%;3650}36513652.peach-rt-error {3653  margin: 0;3654  font-size: 0.6875rem;3655  color: var(--peach-breach);3656  line-height: 1.4;3657}36583659/* ── PeachScript tab ──────────────────────────────────────────────────── */36603661.peach-restore-symbols-textarea {3662  font-family: 'PeachScript', monospace;3663  font-size: 13px;3664  line-height: 1.9;3665  letter-spacing: 0.1em;3666  word-break: break-all;3667  resize: none;3668  width: 100%;3669  min-height: 56px;3670  max-height: 72px;3671  overflow: hidden;3672  scrollbar-width: none;3673  -ms-overflow-style: none;3674  box-sizing: border-box;3675  padding: 6px 8px;3676  border-radius: 8px;3677  border: 1px solid var(--peach-t3);3678  background: rgba(240, 232, 216, 0.03);3679  color: var(--peach-t0);3680}3681.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3682.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }36833684.peach-restore-symbols-pass {3685  width: 100%;3686  box-sizing: border-box;3687  padding: 7px 10px;3688  border-radius: 8px;3689  border: 1px solid var(--peach-t3);3690  background: rgba(240, 232, 216, 0.03);3691  color: var(--peach-t0);3692  font-size: 0.8125rem;3693}3694.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }3695.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }36963697.peach-rt-divider {3698  text-align: center;3699  font-size: 0.6875rem;3700  color: var(--peach-t2);3701  font-style: italic;3702}37033704.peach-rt-file-label {3705  width: 100%;3706  justify-content: center;3707}37083709.peach-rt-anim-canvas {3710  width: 100%;3711  height: 180px;3712  border-radius: 10px;3713  overflow: hidden;3714  display: block;3715}37163717/* ── CSV tab ──────────────────────────────────────────────────────────── */37183719.peach-rt-csv-sources {3720  margin: 0;3721  font-size: 0.6875rem;3722  color: var(--peach-t2);3723  line-height: 1.5;3724  text-align: center;3725}37263727.peach-rt-csv-warning {3728  margin: 0;3729  font-family: "IBM Plex Mono", monospace;3730  font-size: 0.5625rem;3731  letter-spacing: 0.12em;3732  color: var(--peach-breach);3733  text-align: center;3734}37353736/* ── From Phone tab ───────────────────────────────────────────────────── */37373738.peach-rt-phone-code {3739  margin: 0;3740  text-align: center;3741  font-family: "IBM Plex Mono", monospace;3742  font-size: 22px;3743  letter-spacing: 0.18em;3744  color: var(--peach-t0);3745}37463747.peach-rt-phone-qr {3748  display: block;3749  width: 96px;3750  height: 96px;3751  margin: 0 auto;3752  border-radius: 6px;3753  image-rendering: pixelated;3754  overflow: hidden;3755}37563757.peach-rt-phone-hint {3758  margin: 0;3759  font-size: 0.6875rem;3760  color: var(--peach-t2);3761  line-height: 1.55;3762  text-align: center;3763}37643765/* ── Intro popup ──────────────────────────────────────────────────────── */37663767.peach-restore-intro-overlay {3768  position: absolute;3769  inset: 0;3770  z-index: 100;3771  display: flex;3772  align-items: center;3773  justify-content: center;3774  padding: 20px;3775  background: rgba(12, 10, 6, 0.7);3776  backdrop-filter: blur(4px);3777  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;3778}37793780.peach-restore-intro-card {3781  width: 100%;3782  display: flex;3783  flex-direction: column;3784  gap: 12px;3785  padding: 22px 20px 20px;3786  border-radius: 16px;3787  border: 1px solid var(--peach-t3);3788  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));3789  backdrop-filter: blur(4px);3790  -webkit-backdrop-filter: blur(4px);3791  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);3792}37933794.peach-restore-intro-headline {3795  margin: 0;3796  font-family: var(--font-display);3797  font-style: italic;3798  font-size: 20px;3799  font-weight: 400;3800  color: var(--peach-t0);3801}38023803.peach-restore-intro-body {3804  display: flex;3805  flex-direction: column;3806  gap: 8px;3807}3808.peach-restore-intro-body p {3809  margin: 0;3810  font-size: 0.75rem;3811  color: var(--peach-t1);3812  line-height: 1.5;3813}38143815.peach-restore-intro-btn {3816  width: 100%;3817  margin-top: 4px;3818}38193820/* Snapshot restore panel */3821.peach-snapshot-panel {3822  gap: 10px;3823  overflow-y: auto;3824  max-height: 340px;3825}3826.peach-snapshot-list {3827  display: flex;3828  flex-direction: column;3829  gap: 4px;3830}3831.peach-snapshot-row {3832  display: flex;3833  align-items: center;3834  justify-content: space-between;3835  width: 100%;3836  padding: 8px 10px;3837  border-radius: 8px;3838  border: 1px solid rgba(240, 232, 216, 0.07);3839  background: transparent;3840  cursor: pointer;3841  transition: border-color 120ms, background 120ms;3842  text-align: left;3843  gap: 8px;3844}3845.peach-snapshot-row:hover {3846  border-color: rgba(240, 232, 216, 0.14);3847  background: rgba(240, 232, 216, 0.03);3848}3849.peach-snapshot-row.is-selected {3850  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3851  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);3852}3853.peach-snapshot-time {3854  font-size: 11.5px;3855  color: var(--peach-t0);3856  flex: 1;3857}3858.peach-snapshot-count {3859  font-family: "IBM Plex Mono", monospace;3860  font-size: 0.625rem;3861  color: var(--peach-t2);3862  flex-shrink: 0;3863}3864.peach-snapshot-confirm {3865  display: flex;3866  flex-direction: column;3867  gap: 8px;3868  padding-top: 10px;3869  border-top: 1px solid rgba(240, 232, 216, 0.06);3870}3871.peach-snapshot-warning {3872  display: flex;3873  align-items: flex-start;3874  gap: 6px;3875  font-size: 10.5px;3876  color: rgba(220, 80, 60, 0.85);3877  line-height: 1.55;3878}3879.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }3880.peach-snapshot-confirm-row {3881  display: flex;3882  gap: 6px;3883  align-items: center;3884}3885.peach-snapshot-restore-btn {3886  width: 100%;3887}3888.peach-lock-hero--unlock .peach-lock-hero-art {3889  width: 112px;3890  height: 112px;3891  right: 0;3892  top: 2px;3893  opacity: 0.1;3894}38953896.peach-card {3897  border: 1px solid var(--peach-t3);3898  border-radius: 18px;3899  background:3900    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);3901  box-shadow:3902    inset 0 0 0 1px var(--peach-border-accent),3903    inset 0 1px 0 rgba(240, 232, 216, 0.04),3904    0 12px 32px rgba(0, 0, 0, 0.14);3905  overflow: hidden;3906}39073908.peach-card-active {3909  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);3910  box-shadow:3911    inset 0 1px 0 rgba(240, 232, 216, 0.05),3912    0 16px 38px rgba(0, 0, 0, 0.18),3913    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);3914}39153916.peach-card-disabled {3917  opacity: 0.72;3918}39193920.peach-card-header {3921  width: 100%;3922  padding: 13px 16px 11px;3923  background: transparent;3924  color: var(--peach-t0);3925  display: flex;3926  justify-content: space-between;3927  align-items: center;3928  text-align: left;3929  font-size: 0.75rem;3930}39313932.peach-card-body {3933  padding: 0 16px 16px;3934  display: grid;3935  gap: 9px;3936}39373938.peach-card-tag {3939  color: var(--peach-t2);3940  font-family: "IBM Plex Mono", monospace;3941  font-size: 0.5625rem;3942  letter-spacing: 0.12em;3943  text-transform: uppercase;3944}39453946.peach-empty-copy {3947  display: grid;3948  gap: 6px;3949  color: var(--peach-t1);3950  font-size: 0.8125rem;3951}39523953.peach-lock-submit {3954  width: 100%;3955  box-shadow:3956    0 1px 0 rgba(255,255,255,0.10) inset,3957    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),3958    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),3959    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);3960}39613962.peach-lock-secondary {3963  width: 100%;3964  border-color: var(--peach-t3);3965  background: rgba(240, 232, 216, 0.02);3966}39673968.peach-lock-secondary:hover {3969  background: rgba(240, 232, 216, 0.04);3970}39713972.peach-lock-note {3973  max-width: none;3974  line-height: 1.55;3975  margin: 0;3976}39773978.peach-overlay-action {3979  font-size: 0.625rem;3980  padding: 4px 8px;3981  letter-spacing: 0.06em;3982  min-width: 44px;3983  text-align: center;3984}39853986.peach-overlay-spacer {3987  width: 32px;3988}39893990.peach-inline-action {3991  flex-shrink: 0;3992  font-size: 0.5625rem;3993  letter-spacing: 0.1em;3994  text-transform: uppercase;3995  padding: 4px 7px;3996}3997.peach-password-toggle-btn {3998  display: inline-flex;3999  align-items: center;4000  justify-content: center;4001  min-width: 30px;4002  min-height: 26px;4003  padding: 0 7px;4004  border: 1px solid var(--peach-t3);4005  border-radius: 999px;4006  background: rgba(240, 232, 216, 0.04);4007  color: var(--peach-t2);4008  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4009}4010.peach-password-toggle-btn:hover {4011  border-color: var(--peach-t2);4012  color: var(--peach-t0);4013  background: rgba(240, 232, 216, 0.06);4014}40154016.peach-new-textarea {4017  width: 100%;4018  min-height: 88px;4019  resize: vertical;4020  border: 0;4021  outline: none;4022  background: transparent;4023  color: var(--peach-t1);4024  font-family: "IBM Plex Mono", monospace;4025  font-size: 0.75rem;4026  line-height: 1.65;4027  caret-color: var(--peach-accent);4028}40294030.peach-new-textarea::placeholder {4031  color: var(--peach-t2);4032  opacity: 0.7;4033}40344035.peach-settings-actions {4036  display: grid;4037  gap: 8px;4038}40394040.peach-sync-section-label {4041  font-size: 0.6875rem;4042  color: var(--peach-t2);4043  text-transform: uppercase;4044  letter-spacing: 0.05em;4045}40464047.peach-sync-network-note {4048  margin: 0 0 6px;4049  font-size: 0.75rem;4050  color: var(--peach-t2);4051  line-height: 1.4;4052}40534054.peach-settings-row--tappable {4055  background: none;4056  border: none;4057  width: 100%;4058  text-align: left;4059  cursor: pointer;4060  color: var(--peach-t1);4061  font-size: 0.8125rem;4062}4063.peach-settings-row--tappable:hover {4064  color: var(--peach-t0);4065}40664067.peach-sync-pro-hint {4068  display: flex;4069  flex-direction: column;4070  align-items: flex-start;4071  gap: 8px;4072  padding: 12px 0 4px;4073}40744075.peach-sync-device-row {4076  display: flex;4077  justify-content: space-between;4078  align-items: center;4079  padding: 6px 0;4080  border-bottom: 1px solid var(--peach-t3);4081}40824083.peach-sync-device-info {4084  display: flex;4085  flex-direction: column;4086  gap: 2px;4087}40884089.peach-sync-device-name {4090  font-size: 0.8125rem;4091  color: var(--peach-t0);4092}40934094.peach-sync-device-meta {4095  font-size: 0.6875rem;4096  color: var(--peach-t2);4097}40984099.peach-sync-status-dot {4100  display: inline-block;4101  width: 8px;4102  height: 8px;4103  border-radius: 50%;4104  vertical-align: middle;4105}41064107.peach-sync-remove-btn {4108  color: var(--peach-breach);4109}41104111.peach-sync-advanced-row {4112  display: flex;4113  justify-content: space-between;4114  align-items: center;4115  padding: 6px 0;4116  gap: 12px;4117}41184119.peach-sync-advanced-info {4120  display: flex;4121  flex-direction: column;4122  gap: 2px;4123  flex: 1;4124}41254126.peach-sync-advanced-name {4127  font-size: 0.8125rem;4128  color: var(--peach-t0);4129}41304131.peach-sync-reset-confirm {4132  display: flex;4133  flex-direction: column;4134  gap: 8px;4135  padding: 10px;4136  border: 1px solid var(--peach-breach);4137  border-radius: 10px;4138  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4139}41404141.peach-sync-reset-confirm-headline {4142  font-size: 0.8125rem;4143  font-weight: 600;4144  color: var(--peach-t0);4145  margin: 0;4146}41474148.peach-sync-reset-confirm-body {4149  font-size: 0.75rem;4150  color: var(--peach-t1);4151  margin: 0;4152  line-height: 1.4;4153}41544155.peach-btn--danger {4156  background: var(--peach-breach);4157  color: #fff;4158  border-color: var(--peach-breach);4159}4160.peach-btn--danger:hover:not(:disabled) {4161  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4162}4163.peach-btn--danger:disabled {4164  opacity: 0.55;4165  cursor: not-allowed;4166}41674168.peach-sync-hero-icon {4169  color: var(--peach-t1);4170  opacity: 0.85;4171}41724173.peach-import-preview {4174  margin-bottom: 12px;4175  max-height: 152px;4176  overflow-y: auto;4177  border: 1px solid var(--peach-t3);4178  border-radius: 10px;4179  padding: 8px 10px;4180  display: grid;4181  gap: 8px;4182  background: rgba(240, 232, 216, 0.02);4183}41844185.peach-import-preview-row {4186  display: flex;4187  justify-content: space-between;4188  gap: 10px;4189  font-size: 0.6875rem;4190  color: var(--peach-t1);4191}41924193.peach-import-preview-title {4194  color: var(--peach-t0);4195  flex: 1;4196  min-width: 0;4197  overflow: hidden;4198  text-overflow: ellipsis;4199  white-space: nowrap;4200}42014202.peach-import-preview-meta {4203  color: var(--peach-t2);4204  flex-shrink: 0;4205  max-width: 42%;4206  overflow: hidden;4207  text-overflow: ellipsis;4208  white-space: nowrap;4209}42104211.peach-import-preview-more {4212  color: var(--peach-t2);4213  font-size: 0.625rem;4214}42154216.peach-restore-copy {4217  margin: 0;4218  color: var(--peach-t1);4219  font-size: 0.6875rem;4220  line-height: 1.6;4221}42224223.peach-restore-warning {4224  padding: 10px 12px;4225  border-radius: 12px;4226  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4227  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4228  color: var(--peach-t0);4229  font-size: 0.6875rem;4230  line-height: 1.55;4231}42324233.peach-provider-chips {4234  display: flex;4235  flex-wrap: wrap;4236  gap: 6px;4237}42384239.peach-provider-chip {4240  display: inline-flex;4241  align-items: center;4242  padding: 5px 8px;4243  border-radius: 999px;4244  border: 1px solid var(--peach-t3);4245  background: rgba(240, 232, 216, 0.02);4246  color: var(--peach-t1);4247  font-family: "IBM Plex Mono", monospace;4248  font-size: 0.5rem;4249  letter-spacing: 0.08em;4250  text-transform: uppercase;4251}42524253.peach-restore-file,4254.peach-restore-input {4255  width: 100%;4256  border-radius: 10px;4257  border: 1px solid var(--peach-t3);4258  background: var(--peach-s2);4259  color: var(--peach-t0);4260  font-size: 0.75rem;4261}42624263.peach-restore-file {4264  padding: 9px 10px;4265}42664267.peach-restore-file::file-selector-button {4268  margin-right: 10px;4269  padding: 7px 10px;4270  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4271  border-radius: 999px;4272  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4273  color: var(--peach-t0);4274  font-size: 0.625rem;4275  letter-spacing: 0.08em;4276  text-transform: uppercase;4277  cursor: pointer;4278}42794280.peach-restore-input {4281  padding: 10px 12px;4282}42834284.peach-auth-grid {4285  display: grid;4286  gap: 10px;4287}42884289.peach-import-summary {4290  color: var(--peach-t1);4291  font-size: 0.75rem;4292  line-height: 1.6;4293  margin-bottom: 12px;4294}42954296.peach-restore-error {4297  color: rgba(220, 80, 60, 0.95);4298  font-size: 0.75rem;4299  line-height: 1.55;4300}43014302.peach-passkey-card {4303  max-width: 400px;4304  margin: auto 16px;4305  align-self: center;4306  width: calc(100% - 32px);4307}43084309/* Center the approval card vertically inside the overlay-view (which sets4310 * flex-direction: column without justify-content). Without this, the card4311 * sits at the top with a tall empty band below — looks unfinished on the4312 * 320px popup. */4313.peach-overlay-view:has(.peach-passkey-card) {4314  justify-content: center;4315}43164317.peach-pro-badge {4318  padding: 2px 6px;4319  border-radius: 999px;4320  font-family: var(--font-ui);4321  font-size: 0.625rem;4322  letter-spacing: 0.08em;4323  text-transform: uppercase;4324  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4325  color: var(--peach-accent);4326}43274328/* ── Shortcuts rebind table ─────────────────────────────────── */4329.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4330.peach-shortcut-row {4331  display: flex;4332  align-items: center;4333  gap: 10px;4334  padding: 6px 0;4335}4336.peach-shortcut-row-label {4337  flex: 1;4338  font-size: 0.75rem;4339  color: var(--peach-t0);4340}4341.peach-shortcut-chip {4342  min-width: 64px;4343  padding: 4px 10px;4344  border-radius: 6px;4345  border: 1px solid var(--peach-t3);4346  background: var(--peach-input-bg, var(--surface-card));4347  color: var(--peach-t0);4348  font-family: var(--font-mono);4349  font-size: 0.6875rem;4350  letter-spacing: 0.04em;4351  cursor: pointer;4352  text-align: center;4353  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4354}4355.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4356.peach-shortcut-chip.is-custom {4357  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4358  color: var(--peach-accent);4359}4360.peach-shortcut-chip.is-capturing {4361  border-color: var(--peach-accent);4362  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4363  color: var(--peach-accent);4364  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4365}4366@keyframes peach-shortcut-capture-pulse {4367  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4368  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4369}4370.peach-shortcut-reset {4371  background: transparent;4372  border: none;4373  cursor: pointer;4374  color: var(--peach-t2);4375  padding: 4px 6px;4376  border-radius: 5px;4377  font-size: 0.875rem;4378  line-height: 1;4379  transition: color 120ms ease, background 120ms ease;4380}4381.peach-shortcut-reset:hover {4382  color: var(--peach-t0);4383  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4384}4385.peach-shortcuts-conflict {4386  margin: 4px 0 0;4387  padding: 8px 10px;4388  border-radius: 7px;4389  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4390  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4391  font-family: var(--font-mono);4392  font-size: 0.6875rem;4393  color: var(--peach-t0);4394}43954396/* ── Help dialog overlay (? to open) ────────────────────────── */4397.peach-shortcuts-help-backdrop {4398  position: fixed;4399  inset: 0;4400  background: rgba(0, 0, 0, 0.55);4401  backdrop-filter: blur(2px);4402  display: flex;4403  align-items: center;4404  justify-content: center;4405  z-index: 1000;4406  animation: peach-help-fade-in 140ms ease forwards;4407}4408@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4409.peach-shortcuts-help-card {4410  width: min(320px, 92vw);4411  max-height: 80vh;4412  overflow-y: auto;4413  border-radius: 14px;4414  border: 1px solid var(--peach-t3);4415  background: var(--peach-bg);4416  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4417  padding: 16px 18px 18px;4418  display: flex;4419  flex-direction: column;4420  gap: 12px;4421}4422.peach-shortcuts-help-head {4423  display: flex; align-items: center; justify-content: space-between;4424}4425.peach-shortcuts-help-head h3 {4426  margin: 0;4427  font-family: var(--font-display);4428  font-style: italic;4429  font-weight: 400;4430  font-size: 22px;4431  color: var(--peach-t0);4432}4433.peach-shortcuts-help-close {4434  background: transparent;4435  border: none;4436  color: var(--peach-t2);4437  cursor: pointer;4438  font-size: 0.875rem;4439  padding: 4px 8px;4440  border-radius: 5px;4441}4442.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4443.peach-shortcuts-help-body ul {4444  list-style: none; padding: 0; margin: 4px 0 12px;4445  display: grid; gap: 8px;4446}4447.peach-shortcuts-help-body li {4448  display: flex; align-items: center; justify-content: space-between; gap: 12px;4449  font-size: 0.75rem; color: var(--peach-t0);4450}4451.peach-shortcuts-help-body kbd {4452  font-family: var(--font-mono);4453  font-size: 0.6875rem;4454  padding: 3px 8px;4455  border-radius: 6px;4456  background: var(--surface-card);4457  border: 1px solid var(--peach-t3);4458  color: var(--peach-accent);4459  letter-spacing: 0.04em;4460}44614462/* ── Pro promo on Account screen ────────────────────────────── */4463.peach-pro-promo {4464  position: relative;4465  border-radius: 14px;4466  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4467  background:4468    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4469    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4470    var(--surface-card);4471  overflow: hidden;4472  margin-bottom: 14px;4473}4474.peach-pro-promo-glow {4475  position: absolute;4476  inset: -40% -20% auto auto;4477  width: 220px; height: 220px;4478  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4479  pointer-events: none;4480  filter: blur(8px);4481}4482.peach-pro-promo-inner {4483  position: relative;4484  padding: 18px 18px 16px;4485}4486.peach-pro-promo-title {4487  font-family: var(--font-display);4488  font-style: italic;4489  font-weight: 400;4490  font-size: 28px;4491  line-height: 1;4492  letter-spacing: -0.005em;4493  color: var(--peach-t0);4494  margin: 0 0 4px;4495}4496.peach-pro-promo-tagline {4497  font-family: var(--font-mono);4498  font-size: 0.625rem;4499  letter-spacing: 0.06em;4500  color: var(--peach-t2);4501  margin: 0 0 14px;4502}4503.peach-pro-promo-list {4504  list-style: none;4505  margin: 0 0 16px;4506  padding: 0;4507  display: grid;4508  gap: 9px;4509}4510.peach-pro-promo-list li {4511  display: flex;4512  align-items: flex-start;4513  gap: 9px;4514  font-size: 0.75rem;4515  color: var(--peach-t1);4516  line-height: 1.4;4517}4518.peach-pro-promo-list svg {4519  width: 14px;4520  height: 14px;4521  flex-shrink: 0;4522  color: var(--peach-accent);4523  margin-top: 2px;4524}4525.peach-pro-promo-list span {4526  color: var(--peach-t0);4527}4528.peach-pro-promo-cta {4529  width: 100%;4530  background: var(--peach-accent);4531  color: #fff;4532  border: none;4533  padding: 9px 12px;4534  border-radius: 9px;4535  font-size: 0.75rem;4536  font-weight: 500;4537  font-family: var(--font-ui);4538  letter-spacing: 0.02em;4539  text-decoration: none;4540  display: inline-flex;4541  align-items: center;4542  justify-content: center;4543  cursor: pointer;4544  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4545  box-shadow: 0 2px 16px var(--peach-glow);4546}4547.peach-pro-promo-cta:hover {4548  filter: brightness(1.07);4549  box-shadow: 0 4px 24px var(--peach-glow);4550  transform: translateY(-1px);4551}4552.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }45534554.peach-pro-or-divider {4555  display: flex;4556  align-items: center;4557  gap: 10px;4558  margin: 4px 0 12px;4559  font-family: var(--font-mono);4560  font-size: 0.625rem;4561  letter-spacing: 0.06em;4562  color: var(--peach-t2);4563  text-transform: uppercase;4564}4565.peach-pro-or-divider::before,4566.peach-pro-or-divider::after {4567  content: "";4568  flex: 1;4569  height: 1px;4570  background: var(--peach-t3);4571}45724573.peach-loading {4574  position: absolute;4575  inset: 0;4576  display: flex;4577  align-items: center;4578  justify-content: center;4579  background: var(--bg);4580  animation: peach-loading-pulse 1.2s ease-in-out infinite;4581}45824583@keyframes peach-loading-pulse {4584  0%, 100% { opacity: 0.6; }4585  50% { opacity: 1; }4586}45874588/* ── Health Dashboard ─────────────────────────────────────────────────── */4589.peach-health-body {4590  flex: 1;4591  overflow-y: auto;4592  display: flex;4593  flex-direction: column;4594  /* Hide the platform scrollbar — every other scrollable surface in the4595   * popup hides it; the Health view was the one outlier and it ruined the4596   * polish. Behavior unchanged, just no rail rendered. */4597  scrollbar-width: none;4598  -ms-overflow-style: none;4599}4600.peach-health-body::-webkit-scrollbar { display: none; }46014602/* Loading screen for the Vault Health view. The advanced report computation4603 * can run for a few seconds on a large vault — without a clear loading4604 * screen the surface looked broken (the entry view bleeds through the4605 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4606.peach-health-loading-screen {4607  flex: 1;4608  display: flex;4609  flex-direction: column;4610  align-items: center;4611  justify-content: center;4612  gap: 14px;4613  padding: 32px 28px;4614  text-align: center;4615}46164617.peach-health-loading-glyph {4618  width: 48px;4619  height: 48px;4620  display: flex;4621  align-items: center;4622  justify-content: center;4623  border-radius: 14px;4624  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4625  color: var(--peach-accent);4626}46274628.peach-health-loading-title {4629  margin: 0;4630  font-family: var(--font-display);4631  font-style: italic;4632  font-weight: 300;4633  font-size: 19px;4634  line-height: 1.2;4635  color: var(--peach-t0);4636}46374638.peach-health-loading-copy {4639  margin: 0;4640  max-width: 240px;4641  font-size: 0.75rem;4642  line-height: 1.55;4643  color: var(--peach-t2);4644}46454646.peach-health-loading-track {4647  width: 200px;4648  height: 3px;4649  margin-top: 6px;4650  border-radius: 999px;4651  background: rgba(240, 232, 216, 0.06);4652  overflow: hidden;4653}46544655.peach-health-loading-fill {4656  width: 40%;4657  height: 100%;4658  border-radius: inherit;4659  background: linear-gradient(4660    90deg,4661    transparent 0%,4662    var(--peach-accent) 50%,4663    transparent 100%4664  );4665  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4666}46674668@keyframes peach-health-loading-sweep {4669  0%   { transform: translateX(-100%); }4670  100% { transform: translateX(350%); }4671}46724673[data-motion="reduce"] .peach-health-loading-fill,4674[data-motion="reduce"] .peach-health-loading-glyph svg path {4675  animation: none;4676}46774678.peach-health-summary {4679  padding: 10px 16px 6px;4680  font-family: "IBM Plex Mono", monospace;4681  font-size: 0.6875rem;4682}4683.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4684.peach-health-summary-ok { color: var(--peach-t2); }46854686.peach-health-check-row {4687  padding: 0 16px 10px;4688}4689.peach-health-check-btn {4690  width: 100%;4691  display: flex;4692  align-items: center;4693  justify-content: center;4694}46954696.peach-health-sections {4697  flex: 1;4698  display: flex;4699  flex-direction: column;4700}47014702.peach-health-section {4703  border-bottom: 1px solid var(--peach-t3);4704}47054706.peach-health-section-header {4707  width: 100%;4708  display: flex;4709  align-items: center;4710  justify-content: space-between;4711  padding: 9px 16px;4712  background: transparent;4713  cursor: pointer;4714  color: var(--peach-t0);4715}47164717.peach-health-section-title-row {4718  display: flex;4719  align-items: center;4720  gap: 8px;4721}47224723.peach-health-count-badge {4724  display: inline-flex;4725  align-items: center;4726  justify-content: center;4727  min-width: 20px;4728  height: 18px;4729  padding: 0 5px;4730  border-radius: 999px;4731  background: rgba(220,80,60,0.15);4732  border: 1px solid rgba(220,80,60,0.25);4733  font-family: "IBM Plex Mono", monospace;4734  font-size: 0.5625rem;4735  color: rgba(220,80,60,0.9);4736}47374738.peach-health-section-title {4739  font-family: "IBM Plex Mono", monospace;4740  font-size: 0.6875rem;4741  text-transform: uppercase;4742  letter-spacing: 0.1em;4743  color: var(--peach-t1);4744}47454746.peach-health-chevron {4747  color: var(--peach-t2);4748  transition: transform 200ms ease;4749  flex-shrink: 0;4750}4751.peach-health-chevron.is-expanded {4752  transform: rotate(180deg);4753}47544755.peach-health-section-body {4756  padding: 0 16px 10px;4757  display: flex;4758  flex-direction: column;4759  gap: 4px;4760}47614762.peach-health-row {4763  display: flex;4764  align-items: flex-start;4765  justify-content: space-between;4766  gap: 8px;4767  padding: 6px 8px;4768  border-radius: 8px;4769  background: rgba(240,232,216,0.02);4770}47714772.peach-health-row-info {4773  flex: 1;4774  min-width: 0;4775  display: flex;4776  flex-direction: column;4777  gap: 2px;4778}47794780.peach-health-row-name {4781  font-family: var(--font-display);4782  font-size: 0.9375rem;4783  font-style: italic;4784  font-weight: 400;4785  color: var(--peach-t0);4786  white-space: nowrap;4787  overflow: hidden;4788  text-overflow: ellipsis;4789}47904791.peach-health-row-meta {4792  font-family: "IBM Plex Mono", monospace;4793  font-size: 0.5625rem;4794  color: var(--peach-t2);4795  letter-spacing: 0.05em;4796}47974798.peach-health-fix-btn {4799  font-size: 0.5625rem;4800  letter-spacing: 0.08em;4801  text-transform: uppercase;4802  padding: 4px 7px;4803  flex-shrink: 0;4804  display: flex;4805  align-items: center;4806}48074808.peach-health-empty {4809  font-family: "IBM Plex Mono", monospace;4810  font-size: 0.625rem;4811  color: var(--peach-t2);4812  padding: 6px 0;4813}48144815.peach-health-loading {4816  font-family: "IBM Plex Mono", monospace;4817  font-size: 0.625rem;4818  color: var(--peach-t2);4819  padding: 6px 0;4820  display: flex;4821  align-items: center;4822  gap: 6px;4823}48244825.peach-health-loading::before {4826  content: "";4827  width: 10px;4828  height: 10px;4829  border: 1.5px solid var(--peach-t3);4830  border-top-color: var(--peach-accent);4831  border-radius: 50%;4832  animation: peach-spin 600ms linear infinite;4833}48344835@keyframes peach-spin {4836  to { transform: rotate(360deg); }4837}48384839.peach-spinner {4840  width: 32px;4841  height: 32px;4842  border: 2px solid var(--peach-s2);4843  border-top-color: var(--peach-accent);4844  border-radius: 50%;4845  margin: 0 auto 16px;4846  animation: peach-spin 0.8s linear infinite;4847}48484849.peach-progress-screen {4850  text-align: center;4851  padding: 32px 16px;4852}48534854.peach-progress-screen-title {4855  font-size: 0.8125rem;4856  color: var(--peach-t0);4857  margin-bottom: 16px;4858}48594860.peach-progress-screen-stage {4861  font-size: 0.6875rem;4862  color: var(--peach-t2);4863  min-height: 14px;4864}48654866.peach-progress-screen-note {4867  font-size: 0.625rem;4868  color: var(--peach-t2);4869  margin-top: 8px;4870}48714872.peach-pairing-body {4873  flex: 1;4874  overflow-y: auto;4875  display: flex;4876  flex-direction: column;4877}48784879.peach-pairing-content {4880  flex: 1;4881  display: flex;4882  flex-direction: column;4883  align-items: center;4884  justify-content: center;4885  gap: 14px;4886  padding: 28px 20px;4887  text-align: center;4888}48894890.peach-pairing-code-screen {4891  gap: 18px;4892}48934894.peach-pairing-headline {4895  font-family: var(--font-display);4896  font-style: italic;4897  font-weight: 300;4898  font-size: 28px;4899  color: var(--peach-t0);4900  margin: 0;4901  line-height: 1;4902}49034904.peach-pairing-subline {4905  font-size: 0.75rem;4906  color: var(--peach-t2);4907  max-width: 220px;4908  line-height: 1.5;4909  margin: 0;4910}49114912.peach-pairing-subline--center {4913  text-align: center;4914}49154916/* 6-digit pairing code — both display (.peach-pairing-code) and entry4917   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking4918   so the two modes feel like the same surface. */4919.peach-pairing-code {4920  font-family: "IBM Plex Mono", monospace;4921  font-size: 36px;4922  letter-spacing: 0.25em;4923  color: var(--peach-t0);4924  text-align: center;4925  padding: 24px 0;4926  text-shadow:4927    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),4928    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);4929  background: transparent;4930  border: 0;4931  cursor: default;4932  user-select: text;4933}49344935.peach-pairing-code--loading,4936.peach-pairing-code--expired {4937  font-size: 18px;4938  letter-spacing: 0.04em;4939  color: var(--peach-t2);4940  cursor: pointer;4941  text-shadow: none;4942}49434944.peach-pairing-qr-container {4945  display: flex;4946  flex-direction: column;4947  align-items: center;4948  gap: 10px;4949}49504951.peach-pairing-qr {4952  width: 240px;4953  height: 240px;4954  display: block;4955}49564957.peach-pairing-instruction {4958  font-size: 0.75rem;4959  color: var(--peach-t2);4960  text-align: center;4961  line-height: 1.5;4962  margin: 0;4963  max-width: 220px;4964}49654966.peach-pairing-expiry {4967  font-family: "IBM Plex Mono", monospace;4968  font-size: 13px;4969  letter-spacing: 0.06em;4970  color: var(--peach-t2);4971  margin: 0;4972}49734974.peach-pairing-regen {4975  font-size: 0.75rem;4976  color: var(--peach-accent);4977  background: transparent;4978  border: 0;4979  cursor: pointer;4980  padding: 4px 0;4981  text-decoration: underline;4982  text-underline-offset: 2px;4983}49844985.peach-pairing-code-input {4986  font-family: "IBM Plex Mono", monospace;4987  font-size: 36px;4988  letter-spacing: 0.25em;4989  color: var(--peach-t0);4990  background: transparent;4991  border: 0;4992  border-bottom: 1px solid var(--peach-t3);4993  outline: none;4994  text-align: center;4995  padding: 18px 0;4996  width: 220px;4997  caret-color: var(--peach-accent);4998  transition: border-color 160ms ease;4999}50005001.peach-pairing-code-input::placeholder {5002  color: var(--peach-t3);5003}50045005.peach-pairing-code-input:focus {5006  border-bottom-color: var(--peach-accent);5007}50085009.peach-pairing-toggle {5010  background: transparent;5011  border: 0;5012  color: var(--peach-t2);5013  font-size: 0.75rem;5014  padding: 8px 4px;5015  cursor: pointer;5016  transition: color 120ms ease;5017}50185019.peach-pairing-toggle:hover:not(:disabled) {5020  color: var(--peach-t1);5021}50225023.peach-pairing-toggle:disabled {5024  opacity: 0.5;5025  cursor: default;5026}50275028.peach-pairing-hint {5029  font-size: 0.6875rem;5030  color: var(--peach-t2);5031  margin: 0;5032  text-align: center;5033}50345035.peach-pairing-status {5036  display: flex;5037  align-items: center;5038  gap: 8px;5039  margin: 0;5040  font-size: 0.75rem;5041  color: var(--peach-t1);5042}50435044.peach-pairing-error {5045  margin: 0;5046  font-size: 0.6875rem;5047  color: var(--peach-breach);5048}50495050.peach-pairing-error--muted {5051  color: var(--peach-t2);5052}50535054.peach-pairing-spinner {5055  width: 12px;5056  height: 12px;5057  border: 1.5px solid var(--peach-t3);5058  border-top-color: var(--peach-accent);5059  border-radius: 50%;5060  animation: peach-spin 0.8s linear infinite;5061}50625063.peach-pairing-success-icon,5064.peach-pairing-error-icon,5065.peach-pairing-hero {5066  display: inline-flex;5067  align-items: center;5068  justify-content: center;5069}50705071/* Tag chips */5072.peach-tag-chip {5073  display: inline-flex;5074  align-items: center;5075  gap: 4px;5076  padding: 3px 8px;5077  border-radius: 999px;5078  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5079  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5080  color: var(--peach-t0);5081  font-family: "IBM Plex Mono", monospace;5082  font-size: 0.625rem;5083  letter-spacing: 0.04em;5084}50855086.peach-tag-chip-remove {5087  background: transparent;5088  border: none;5089  color: inherit;5090  opacity: 0.6;5091  cursor: pointer;5092  padding: 0;5093  font-size: 0.75rem;5094  line-height: 1;5095}50965097.peach-tag-chip-remove:hover {5098  opacity: 1;5099}51005101/* Tag input */5102.peach-tag-input-wrap {5103  border-bottom: 1px solid var(--peach-t3);5104}51055106.peach-tag-suggestions {5107  display: flex;5108  flex-wrap: wrap;5109  gap: 4px;5110  padding: 6px 0;5111}51125113.peach-tag-suggestion {5114  padding: 2px 8px;5115  border-radius: 999px;5116  border: 1px solid var(--peach-t3);5117  background: var(--peach-s2);5118  color: var(--peach-t1);5119  font-family: "IBM Plex Mono", monospace;5120  font-size: 0.625rem;5121  cursor: pointer;5122  transition: border-color 80ms ease, background 80ms ease;5123}51245125.peach-tag-suggestion:hover {5126  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5127  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5128}51295130/* Identity suggestions — shown below username/email inputs in new-entry form */5131@keyframes peach-suggest-in {5132  from { opacity: 0; transform: translateY(-4px); }5133  to   { opacity: 1; transform: none; }5134}51355136.peach-identity-suggestions {5137  display: flex;5138  flex-direction: column;5139  gap: 1px;5140  margin-top: 4px;5141  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5142}51435144.peach-identity-filter-row {5145  display: flex;5146  align-items: center;5147  gap: 4px;5148  padding: 2px 0 5px;5149}51505151.peach-identity-collapse-btn {5152  margin-left: auto;5153  background: transparent;5154  border: none;5155  cursor: pointer;5156  color: var(--peach-t3);5157  padding: 2px 4px;5158  display: flex;5159  align-items: center;5160  line-height: 0;5161  border-radius: 3px;5162  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5163}51645165.peach-identity-collapse-btn:hover {5166  color: var(--peach-t1);5167}51685169.peach-identity-collapse-btn.is-collapsed {5170  transform: rotate(-90deg);5171}51725173.peach-identity-rows {5174  display: grid;5175  grid-template-rows: 1fr;5176  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5177}51785179.peach-identity-rows.is-collapsed {5180  grid-template-rows: 0fr;5181}51825183.peach-identity-rows-inner {5184  overflow: hidden;5185  min-height: 0;5186}51875188.peach-identity-filter-pill {5189  padding: 2px 7px;5190  border-radius: 999px;5191  border: 1px solid var(--peach-t3);5192  background: transparent;5193  color: var(--peach-t2);5194  font-family: "IBM Plex Mono", monospace;5195  font-size: 0.6rem;5196  cursor: pointer;5197  transition: border-color 80ms, background 80ms, color 80ms;5198}51995200.peach-identity-filter-pill.is-on {5201  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5202  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5203  color: var(--peach-accent);5204}52055206.peach-identity-suggestion {5207  display: flex;5208  align-items: center;5209  gap: 6px;5210  width: 100%;5211  padding: 4px 6px;5212  border-radius: 5px;5213  border: none;5214  background: transparent;5215  cursor: pointer;5216  text-align: left;5217  transition: background 80ms ease;5218}52195220.peach-identity-suggestion:hover {5221  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5222}52235224.peach-identity-suggestion-value {5225  font-family: "IBM Plex Mono", monospace;5226  font-size: 0.7rem;5227  color: var(--peach-t1);5228  overflow: hidden;5229  text-overflow: ellipsis;5230  white-space: nowrap;5231  flex: 1;5232  min-width: 0;5233}52345235.peach-identity-suggestion-type {5236  font-family: "IBM Plex Mono", monospace;5237  font-size: 0.55rem;5238  font-weight: 600;5239  flex-shrink: 0;5240  padding: 1px 4px;5241  border-radius: 3px;5242}52435244.peach-identity-suggestion-type--email {5245  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5246  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5247}52485249.peach-identity-suggestion-type--username {5250  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5251  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5252}52535254.peach-identity-suggestion-meta {5255  font-family: "IBM Plex Mono", monospace;5256  font-size: 0.6rem;5257  color: var(--peach-t3);5258  flex-shrink: 0;5259}52605261/* Tag filter strip */5262.peach-tag-filter-strip {5263  border-bottom: 1px solid var(--peach-t3);5264  flex-shrink: 0;5265}52665267.peach-tag-filter-chip {5268  display: inline-flex;5269  align-items: center;5270  padding: 4px 10px;5271  border-radius: 999px;5272  border: 1px solid var(--peach-t3);5273  background: transparent;5274  color: var(--peach-t2);5275  font-family: "IBM Plex Mono", monospace;5276  font-size: 0.5625rem;5277  letter-spacing: 0.06em;5278  text-transform: uppercase;5279  cursor: pointer;5280  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5281  white-space: nowrap;5282}52835284.peach-tag-filter-chip:hover {5285  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5286  color: var(--peach-t1);5287}52885289.peach-tag-filter-chip.is-selected {5290  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5291  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5292  color: var(--peach-t0);5293}52945295/* ─────────────────────────────────────────────────────────────────────────5296   v1.4.12 additions5297   ─────────────────────────────────────────────────────────────────────── */52985299/* Sort bar */5300.peach-sort-bar {5301  display: flex;5302  align-items: center;5303  gap: 4px;5304  padding: 5px 12px;5305  border-bottom: 1px solid var(--peach-t3);5306  flex-shrink: 0;5307  overflow-x: auto;5308  scrollbar-width: none;5309}53105311.peach-sort-btn {5312  padding: 2px 9px;5313  border-radius: 999px;5314  border: 1px solid transparent;5315  background: transparent;5316  color: var(--peach-t2);5317  font-family: "IBM Plex Mono", monospace;5318  font-size: 0.5625rem;5319  letter-spacing: 0.07em;5320  text-transform: uppercase;5321  cursor: pointer;5322  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5323  white-space: nowrap;5324}53255326.peach-sort-btn:hover {5327  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5328  color: var(--peach-t1);5329}53305331.peach-sort-btn.is-active {5332  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5333  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5334  color: var(--peach-t0);5335}53365337.peach-sort-domain-hint {5338  margin-left: auto;5339  font-family: "IBM Plex Mono", monospace;5340  font-size: 0.5625rem;5341  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5342  white-space: nowrap;5343  overflow: hidden;5344  text-overflow: ellipsis;5345  max-width: 110px;5346}53475348/* Tab-match badge on entry rows */5349.peach-tab-match-badge {5350  display: inline-block;5351  width: 6px;5352  height: 6px;5353  border-radius: 50%;5354  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5355  margin-left: 5px;5356  vertical-align: middle;5357  flex-shrink: 0;5358  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5359}53605361.peach-entry-row.is-tab-match {5362  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5363  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5364}53655366.peach-entry-row.is-tab-match:hover {5367  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5368}53695370/* Entry list stagger entrance */5371@keyframes peach-entry-fadein {5372  from { opacity: 0; transform: translateY(4px); }5373  to   { opacity: 1; transform: translateY(0); }5374}53755376.peach-vault-list .peach-entry-row {5377  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5378  content-visibility: auto;5379  contain-intrinsic-size: auto 44px;5380}53815382/* Button press micro-interaction */5383.peach-btn:active {5384  transform: scale(0.95);5385  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5386}53875388.peach-sort-btn:active,5389.peach-tag-filter-chip:active {5390  transform: scale(0.93);5391  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5392}53935394/* Password strength bar (Lock view + shared) */5395.peach-password-strength {5396  display: flex;5397  align-items: center;5398  gap: 8px;5399  margin-top: 6px;5400}54015402.peach-strength-bar {5403  flex: 1;5404  height: 3px;5405  border-radius: 2px;5406  background: var(--peach-t3);5407  overflow: hidden;5408}54095410.peach-strength-fill {5411  height: 100%;5412  border-radius: 2px;5413  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5414              background 300ms ease;5415}54165417.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5418.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5419.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5420.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }54215422.peach-strength-label {5423  font-family: "IBM Plex Mono", monospace;5424  font-style: italic;5425  font-size: 0.5625rem;5426  font-weight: 300;5427  letter-spacing: 0.06em;5428  color: var(--peach-t2);5429  min-width: 36px;5430  text-align: right;5431}54325433.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5434.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5435.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5436.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }54375438/* Duress form */5439.peach-duress-status {5440  padding: 2px 8px;5441  border-radius: 999px;5442  border: 1px solid var(--peach-t3);5443  font-family: "IBM Plex Mono", monospace;5444  font-size: 0.5625rem;5445  letter-spacing: 0.07em;5446  text-transform: uppercase;5447  color: var(--peach-t2);5448  flex-shrink: 0;5449}54505451.peach-duress-status.is-active {5452  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5453  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5454  color: var(--peach-t0);5455}54565457.peach-duress-form {5458  padding: 8px 0 4px;5459  display: flex;5460  flex-direction: column;5461  gap: 6px;5462}54635464.peach-duress-form .peach-label {5465  margin-top: 4px;5466}54675468.peach-duress-actions {5469  display: flex;5470  gap: 6px;5471  align-items: center;5472  margin-top: 4px;5473}54745475.peach-duress-actions .peach-btn:first-child {5476  margin-right: auto;5477}54785479/* Improved overlay spring entrance */5480.peach-overlay-view.ov-enter-up {5481  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5482}54835484@keyframes ov-enter-up-spring {5485  from { opacity: 0; transform: translateY(16px) scale(0.98); }5486  to   { opacity: 1; transform: translateY(0) scale(1); }5487}54885489.peach-overlay-view.ov-enter-right {5490  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5491}54925493@keyframes ov-enter-right-spring {5494  from { opacity: 0; transform: translateX(18px) scale(0.98); }5495  to   { opacity: 1; transform: translateX(0) scale(1); }5496}54975498/* ── Onboarding-mode restore screens (file import) ── */5499/* Used when MainImportView renders during onboarding (no vault yet).5500   Animates like a lock-screen transition. */5501.peach-lock-view {5502  position: absolute;5503  inset: 0;5504  display: flex;5505  flex-direction: column;5506  background:5507    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5508    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5509    var(--peach-bg);5510  z-index: 2;5511  overflow: hidden;5512  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5513}55145515.peach-lock-view-header {5516  display: flex;5517  align-items: center;5518  justify-content: space-between;5519  padding: 16px 18px 12px;5520  flex-shrink: 0;5521}55225523/* ───────── Settings: auto-lock select ───────── */5524.peach-settings-select {5525  font-family: "IBM Plex Mono", monospace;5526  font-size: 0.6875rem;5527  background: transparent;5528  border: 1px solid var(--peach-t3);5529  border-radius: 4px;5530  color: var(--peach-t1);5531  padding: 3px 6px;5532  cursor: pointer;5533  outline: none;5534}5535.peach-settings-select:focus {5536  border-color: var(--peach-accent);5537}55385539/* ───────── Duress status pill (new polished) ───────── */5540.peach-duress-status-pill {5541  font-family: "IBM Plex Mono", monospace;5542  font-size: 0.5625rem;5543  text-transform: uppercase;5544  letter-spacing: 0.12em;5545  padding: 2px 8px;5546  border-radius: 12px;5547  background: var(--peach-t3);5548  color: var(--peach-t2);5549  flex-shrink: 0;5550}5551.peach-duress-status-pill.is-active {5552  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5553  color: var(--peach-accent);5554}55555556/* ───────── Entry advanced disclosure (canary) ───────── */5557.peach-entry-advanced {5558  margin-top: 12px;5559  border-top: 1px solid var(--peach-t3);5560  padding-top: 10px;5561  position: relative;5562  z-index: 1;5563}5564.peach-entry-advanced-toggle {5565  display: flex;5566  align-items: center;5567  justify-content: space-between;5568  width: 100%;5569  background: transparent;5570  border: none;5571  cursor: pointer;5572  padding: 0;5573  color: var(--peach-t2);5574}5575.peach-canary-section {5576  margin-top: 10px;5577  display: grid;5578  gap: 6px;5579}55805581/* ───────── Import: merge/replace radio choices ───────── */5582.peach-import-choice {5583  display: flex;5584  align-items: flex-start;5585  gap: 10px;5586  padding: 8px 10px;5587  border: 1px solid var(--peach-t3);5588  border-radius: 10px;5589  cursor: pointer;5590  margin-bottom: 6px;5591  transition: border-color 120ms ease, background 120ms ease;5592}5593.peach-import-choice:hover {5594  border-color: var(--peach-accent);5595}5596.peach-import-choice input[type="radio"] {5597  margin-top: 3px;5598  accent-color: var(--peach-accent);5599  flex-shrink: 0;5600}5601.peach-import-choice-main {5602  display: flex;5603  flex-direction: column;5604  gap: 2px;5605  min-width: 0;5606}5607.peach-import-choice-label {5608  font-size: 0.75rem;5609  color: var(--peach-t0);5610}5611.peach-import-choice-sub {5612  font-size: 0.6875rem;5613  color: var(--peach-t2);5614  line-height: 1.5;5615}56165617/* ───────── Export: success confirmation strip ───────── */5618.peach-export-success {5619  display: flex;5620  align-items: flex-start;5621  gap: 10px;5622  padding: 12px;5623  border-radius: 12px;5624  border: 1px solid rgba(150, 175, 110, 0.3);5625  background: rgba(150, 175, 110, 0.08);5626  color: var(--peach-t0);5627  font-size: 0.75rem;5628  line-height: 1.55;5629}5630.peach-export-success-check {5631  color: rgba(150, 175, 110, 0.9);5632  font-size: 0.875rem;5633  flex-shrink: 0;5634}56355636/* ── Trash view ──────────────────────────────────────────────────────── */5637.peach-trash-entry-row {5638  display: flex;5639  align-items: center;5640  justify-content: space-between;5641  gap: 8px;5642  padding: 8px 0;5643  border-bottom: 1px solid var(--peach-border);5644}5645.peach-trash-entry-info {5646  flex: 1;5647  min-width: 0;5648  display: flex;5649  flex-direction: column;5650  gap: 2px;5651}5652.peach-trash-entry-title {5653  font-size: 0.8125rem;5654  color: var(--peach-t0);5655  overflow: hidden;5656  text-overflow: ellipsis;5657  white-space: nowrap;5658}5659.peach-trash-entry-meta {5660  font-family: var(--font-mono);5661  font-size: 0.5625rem;5662  color: var(--peach-t2);5663  letter-spacing: 0.04em;5664}5665.peach-trash-entry-actions {5666  display: flex;5667  align-items: center;5668  gap: 4px;5669  flex-shrink: 0;5670}5671.peach-trash-delete-btn {5672  background: transparent;5673  border: 0;5674  color: var(--peach-t3);5675  font-size: 1rem;5676  line-height: 1;5677  cursor: pointer;5678  padding: 2px 5px;5679  transition: color 0.15s;5680}5681.peach-trash-delete-btn:hover { color: var(--peach-breach); }5682.peach-trash-list {5683  overflow-y: auto;5684}5685.peach-trash-footer {5686  display: flex;5687  align-items: center;5688  gap: 8px;5689  padding: 8px 0 0;5690  border-top: 1px solid var(--peach-border);5691  margin-top: 4px;5692}5693.peach-trash-purge-all {5694  background: transparent;5695  border: 0;5696  color: var(--peach-t3);5697  font-size: 0.625rem;5698  cursor: pointer;5699  padding: 4px 0;5700  letter-spacing: 0.03em;5701  transition: color 0.2s;5702}5703.peach-trash-purge-all:hover { color: var(--peach-breach); }5704.peach-trash-purge-confirm-label {5705  font-size: 0.625rem;5706  color: var(--peach-t1);5707  flex: 1;5708}57095710/* ── Settings shortcuts grid ─────────────────────────────────────────── */5711.peach-shortcuts-grid {5712  display: grid;5713  grid-template-columns: auto 1fr;5714  gap: 6px 12px;5715  align-items: center;5716  padding: 4px 0;5717}5718.peach-shortcut-key {5719  font-family: var(--font-mono);5720  font-size: 0.625rem;5721  color: var(--peach-t0);5722  background: var(--peach-t3);5723  border-radius: 4px;5724  padding: 2px 6px;5725  white-space: nowrap;5726  text-align: center;5727}5728.peach-shortcut-desc {5729  font-size: 0.6875rem;5730  color: var(--peach-t1);5731}57325733/* ── Sort bar trash button ───────────────────────────────────────────── */5734.peach-sort-trash-btn {5735  display: flex;5736  align-items: center;5737  justify-content: center;5738  padding: 3px 5px;5739  background: transparent;5740  border: none;5741  cursor: pointer;5742  color: var(--peach-t2);5743  border-radius: 4px;5744  transition: color 140ms ease, background 140ms ease;5745}5746.peach-sort-trash-btn:hover {5747  color: var(--peach-t1);5748  background: var(--peach-t3);5749}5750.peach-sort-trash-btn.is-active {5751  color: var(--peach-accent);5752}57535754/* Accent color picker */5755.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5756.peach-accent-picker {5757  display: flex;5758  flex-wrap: wrap;5759  gap: 7px;5760  padding: 2px 0;5761}5762.peach-accent-swatch {5763  width: 22px;5764  height: 22px;5765  border-radius: 50%;5766  border: 2px solid transparent;5767  cursor: pointer;5768  padding: 0;5769  transition: transform 100ms;5770  outline-offset: 2px;5771}5772.peach-accent-swatch:hover { transform: scale(1.15); }5773.peach-accent-swatch.is-active {5774  border-color: var(--peach-t0);5775  transform: scale(1.1);5776}57775778/* Display font picker — swatch shows an "Aa" preview rendered with each5779   font option so the user can see what they're picking before they pick. */5780.peach-settings-row--font { align-items: flex-start; padding-top: 10px; }5781.peach-font-picker {5782  display: flex;5783  flex-wrap: wrap;5784  gap: 6px;5785  padding: 2px 0;5786  flex: 1;5787  justify-content: flex-end;5788}5789.peach-font-swatch {5790  display: flex;5791  flex-direction: column;5792  align-items: center;5793  gap: 2px;5794  padding: 4px 8px;5795  background: transparent;5796  border: 1px solid var(--peach-t3);5797  border-radius: 6px;5798  cursor: pointer;5799  transition: border-color 100ms, background 100ms;5800  min-width: 56px;5801}5802.peach-font-swatch:hover {5803  border-color: var(--peach-accent-dim);5804  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5805}5806.peach-font-swatch.is-active {5807  border-color: var(--peach-accent);5808  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5809}5810.peach-font-swatch-glyph {5811  font-size: 18px;5812  line-height: 1;5813  color: var(--peach-t0);5814}5815.peach-font-swatch[data-font-preview="cormorant-italic"] .peach-font-swatch-glyph {5816  font-family: "Cormorant Garamond", serif;5817  font-style: italic;5818  font-weight: 400;5819}5820.peach-font-swatch[data-font-preview="cormorant"] .peach-font-swatch-glyph {5821  font-family: "Cormorant Garamond", serif;5822  font-style: normal;5823  font-weight: 400;5824}5825.peach-font-swatch[data-font-preview="inter"] .peach-font-swatch-glyph {5826  font-family: "Inter Variable", "Inter", sans-serif;5827  font-style: normal;5828  font-weight: 400;5829}5830.peach-font-swatch[data-font-preview="system"] .peach-font-swatch-glyph {5831  font-family: system-ui, -apple-system, sans-serif;5832  font-style: normal;5833  font-weight: 400;5834}5835.peach-font-swatch-name {5836  font-family: var(--font-mono);5837  font-size: 0.5rem;5838  letter-spacing: 0.06em;5839  color: var(--peach-t2);5840  text-transform: lowercase;5841}58425843.peach-pill-group {5844  display: flex;5845  gap: 6px;5846}5847.peach-pill-group .peach-btn.is-active {5848  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5849  border-color: var(--peach-accent);5850  color: var(--peach-t0);5851}58525853/* ── Card entry styles ───────────────────────────────────────── */5854.peach-card-number {5855  font-family: var(--peach-mono);5856  letter-spacing: 0.08em;5857}58585859.peach-card-network-badge {5860  font-size: 0.625rem;5861  padding: 1px 5px;5862  border-radius: 4px;5863  border: 0.5px solid var(--peach-border);5864  color: var(--peach-text-dim);5865  margin-left: 6px;5866  vertical-align: middle;5867}58685869.peach-card-expiry-row {5870  display: flex;5871  align-items: center;5872  gap: 8px;5873}58745875.peach-card-expiry-sep {5876  color: var(--peach-text-dim);5877}58785879/* ── Pro tier — upgrade screen ──────────────────────────────── */5880.peach-pro-mark {5881  font-size: 0.5625rem;5882  color: var(--peach-accent);5883  margin-left: 6px;5884  vertical-align: super;5885  opacity: 0.7;5886}58875888.peach-pro-mini-badge {5889  display: block;5890  font-size: 0.625rem;5891  font-style: italic;5892  color: var(--peach-accent);5893  letter-spacing: 0.04em;5894  margin-top: -2px;5895  padding-left: 2px;5896  opacity: 0.85;5897  text-align: center;5898}58995900.peach-wordmark-stack {5901  display: inline-flex;5902  flex-direction: column;5903  align-items: center;5904}59055906/* ── Pro tier — upgrade page ─────────────────────────────────── */5907.peach-pro-upgrade {5908  display: flex;5909  flex-direction: column;5910  align-items: stretch;5911  gap: 10px;5912  padding: 0 4px 8px;5913}59145915.peach-pro-upgrade-hero {5916  display: flex;5917  flex-direction: column;5918  align-items: center;5919  gap: 4px;5920  padding: 10px 0 6px;5921}59225923.peach-pro-upgrade-mark-wrap {5924  display: flex;5925  align-items: center;5926  justify-content: center;5927  margin-bottom: 2px;5928}59295930.peach-pro-upgrade-mark {5931  width: 38px;5932  height: 38px;5933  opacity: 0.9;5934}59355936.peach-pro-upgrade-title {5937  font-family: var(--font-display, var(--font-ui));5938  font-size: 22px;5939  margin: 0;5940  color: var(--peach-t0);5941  letter-spacing: 0.01em;5942}59435944.peach-pro-upgrade-tagline {5945  margin: 0;5946  font-style: italic;5947  color: var(--peach-t2);5948  font-size: 0.6875rem;5949}59505951.peach-pro-features {5952  display: flex;5953  flex-direction: column;5954  gap: 8px;5955  border-top: 1px solid var(--peach-border);5956  border-bottom: 1px solid var(--peach-border);5957  padding: 10px 4px;5958}59595960.peach-pro-feature {5961  display: flex;5962  gap: 9px;5963  align-items: baseline;5964}59655966.peach-pro-feature-mark {5967  color: var(--peach-accent);5968  font-size: 0.6875rem;5969  flex-shrink: 0;5970  display: inline-block;5971  transform-origin: center;5972  opacity: 0.8;5973}59745975.peach-pro-feature-text {5976  display: flex;5977  flex-direction: column;5978  gap: 1px;5979}59805981.peach-pro-feature-name {5982  font-size: 0.75rem;5983  color: var(--peach-t0);5984}59855986.peach-pro-feature-desc {5987  font-size: 0.625rem;5988  color: var(--peach-t2);5989}59905991.peach-pro-feature.is-highlighted .peach-pro-feature-mark {5992  animation: peach-pulse-accent 600ms ease-out forwards;5993}59945995@keyframes peach-pulse-accent {5996  0%   { opacity: 1; transform: scale(1.4); }5997  100% { opacity: 0.7; transform: scale(1); }5998}59996000.peach-pro-upgrade-actions {6001  display: flex;6002  flex-direction: column;6003  align-items: center;6004  gap: 8px;6005  padding-top: 2px;6006}60076008.peach-pro-pricing {6009  margin: 0;6010  text-align: center;6011  font-size: 0.6875rem;6012  color: var(--peach-t2);6013  letter-spacing: 0.04em;6014}60156016.peach-pro-upgrade-cta {6017  align-self: center;6018  text-align: center;6019  text-decoration: none;6020  display: block;6021  padding: 9px 32px;6022  font-size: 0.8125rem;6023  min-width: 180px;6024}60256026.peach-pro-key-divider {6027  display: flex;6028  align-items: center;6029  gap: 8px;6030  width: 100%;6031  color: var(--peach-t3);6032  font-size: 0.625rem;6033  letter-spacing: 0.08em;6034}60356036.peach-pro-key-divider::before,6037.peach-pro-key-divider::after {6038  content: "";6039  flex: 1;6040  height: 1px;6041  background: var(--peach-border);6042}60436044.peach-pro-key-link {6045  background: transparent;6046  border: 1px solid var(--peach-border);6047  border-radius: 8px;6048  color: var(--peach-t1);6049  font-size: 0.75rem;6050  cursor: pointer;6051  align-self: stretch;6052  padding: 8px 12px;6053  text-align: center;6054  transition: border-color 0.2s, color 0.2s;6055}60566057.peach-pro-key-link:hover {6058  border-color: var(--peach-accent);6059  color: var(--peach-accent);6060}60616062/* ── Pro tier — key ceremony ─────────────────────────────────── */6063.peach-pro-key-ceremony {6064  display: flex;6065  flex-direction: column;6066  align-items: center;6067  gap: 12px;6068  padding: 20px 4px 16px;6069}60706071.peach-pro-key-ceremony .peach-lock-rune-string {6072  font-size: 1rem;6073  gap: 12px;6074  flex: 0;6075  justify-content: center;6076}60776078.peach-pro-key-ceremony-label {6079  margin: 0;6080  font-size: 0.6875rem;6081  color: var(--peach-t2);6082  font-style: italic;6083  letter-spacing: 0.04em;6084}60856086.peach-pro-key-input {6087  font-family: var(--font-mono, monospace);6088  letter-spacing: 0.06em;6089  text-align: center;6090  width: 100%;6091  box-sizing: border-box;6092}60936094.peach-pro-key-error {6095  margin: 0;6096  font-size: 0.75rem;6097  text-align: center;6098  color: var(--peach-breach, #e55);6099  padding: 0;6100}61016102.peach-pro-key-activate {6103  width: 100%;6104  text-align: center;6105  box-sizing: border-box;6106  padding: 10px 20px;6107  font-size: 0.8125rem;6108}61096110.peach-pro-key-cancel {6111  background: transparent;6112  border: 0;6113  color: var(--peach-t2);6114  font-size: 0.6875rem;6115  cursor: pointer;6116  padding: 2px 8px;6117  transition: color 0.2s;6118}61196120.peach-pro-key-cancel:hover { color: var(--peach-accent); }61216122/* ── Pro tier — active state ─────────────────────────────────── */6123.peach-pro-active {6124  display: flex;6125  flex-direction: column;6126  align-items: center;6127  gap: 0;6128  padding: 8px 4px 16px;6129  min-height: 280px;6130}61316132.peach-pro-active-hero {6133  display: flex;6134  flex-direction: column;6135  align-items: center;6136  gap: 6px;6137  padding: 20px 0 22px;6138}61396140.peach-pro-active-mark-wrap {6141  display: flex;6142  align-items: center;6143  justify-content: center;6144  margin-bottom: 4px;6145}61466147.peach-pro-active-mark {6148  width: 60px;6149  height: 60px;6150  filter:6151    drop-shadow(0 0 10px color-mix(in srgb, var(--peach-accent) 55%, transparent))6152    drop-shadow(0 0 26px color-mix(in srgb, var(--peach-accent) 22%, transparent));6153}61546155.peach-pro-active-title {6156  font-family: var(--font-display, var(--font-ui));6157  font-size: 26px;6158  margin: 0;6159  color: var(--peach-t0);6160  letter-spacing: 0.01em;6161}61626163.peach-pro-active-since {6164  margin: 0;6165  font-size: 0.6875rem;6166  color: var(--peach-t2);6167  font-style: italic;6168}61696170.peach-pro-active-features {6171  display: flex;6172  flex-direction: column;6173  gap: 8px;6174  width: 100%;6175  padding: 14px 8px 0;6176  border-top: 1px solid var(--peach-border);6177  flex: 1;6178}61796180.peach-pro-active-feature {6181  display: flex;6182  align-items: center;6183  gap: 9px;6184}61856186.peach-pro-active-feature-mark {6187  color: var(--peach-accent);6188  font-size: 0.625rem;6189  opacity: 0.65;6190  flex-shrink: 0;6191}61926193.peach-pro-active-feature-name {6194  font-size: 0.75rem;6195  color: var(--peach-t1);6196}61976198.peach-pro-deactivate {6199  align-self: center;6200  background: transparent;6201  border: 0;6202  color: var(--peach-t3);6203  font-size: 0.625rem;6204  cursor: pointer;6205  padding: 8px 0 0;6206  margin-top: 16px;6207  letter-spacing: 0.03em;6208  transition: color 0.2s;6209}62106211.peach-pro-deactivate:hover { color: var(--peach-t2); }62126213.peach-pro-deactivate:disabled {6214  opacity: 0.5;6215  cursor: default;6216}62176218/* ── Pro advanced health remediation queue ──────────────────── */6219.peach-health-pro-queue {6220  display: flex;6221  flex-direction: column;6222  gap: 10px;6223  padding: 12px;6224  margin: 0 0 12px;6225  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6226  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6227  border-radius: 10px;6228}62296230.peach-health-pro-queue-head {6231  display: flex;6232  justify-content: space-between;6233  align-items: baseline;6234}62356236.peach-health-pro-queue-title {6237  font-size: 0.75rem;6238  font-weight: 500;6239  letter-spacing: 0.04em;6240  text-transform: uppercase;6241  color: var(--peach-accent);6242}62436244.peach-health-pro-queue-score {6245  font-size: 0.6875rem;6246  color: var(--peach-t2);6247}62486249.peach-health-pro-row {6250  display: flex;6251  gap: 10px;6252  align-items: center;6253  padding: 8px 0;6254  border-top: 1px solid var(--peach-border);6255}62566257.peach-health-pro-row-info {6258  flex: 1;6259  display: flex;6260  flex-direction: column;6261  gap: 4px;6262  min-width: 0;6263}62646265.peach-health-pro-row-name {6266  font-size: 0.8125rem;6267  color: var(--peach-t0);6268  overflow: hidden;6269  text-overflow: ellipsis;6270  white-space: nowrap;6271}62726273.peach-health-pro-row-meta {6274  font-size: 0.6875rem;6275  color: var(--peach-t2);6276}62776278.peach-health-pro-bar {6279  height: 2px;6280  background: var(--peach-border);6281  border-radius: 2px;6282  overflow: hidden;6283  margin-top: 2px;6284}62856286.peach-health-pro-bar-fill {6287  height: 100%;6288  background: var(--peach-accent);6289  transition: width 200ms ease-out;6290}62916292/* ── Pro activation celebration ── */6293@keyframes peach-pro-bloom {6294  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6295  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6296                 drop-shadow(0 0 48px var(--peach-glow)); }6297  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6298}62996300@keyframes peach-pro-wordmark-in {6301  from { opacity: 0; transform: translateY(4px); }6302  to   { opacity: 1; transform: translateY(0); }6303}63046305@keyframes peach-pro-fade-out {6306  from { opacity: 1; }6307  to   { opacity: 0; }6308}63096310.peach-pro-celebration {6311  background:6312    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6313    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6314    var(--peach-bg);6315  border: 1px solid var(--peach-t3);6316  box-shadow:6317    0 2px 8px rgba(0,0,0,0.55),6318    0 14px 48px rgba(0,0,0,0.7),6319    0 0 0 1px rgba(240,232,216,0.04);6320  overflow: hidden;6321  width: 320px;6322  height: 520px;6323  display: flex;6324  flex-direction: column;6325  align-items: center;6326  justify-content: center;6327  gap: 8px;6328  padding: 32px 24px;6329  text-align: center;6330}63316332.peach-pro-celebration.is-leaving {6333  animation: peach-pro-fade-out 400ms ease forwards;6334}63356336.peach-pro-bloom-target {6337  display: flex;6338  align-items: center;6339  justify-content: center;6340  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6341  margin-bottom: 12px;6342}63436344.peach-pro-bloom-icon {6345  width: 48px;6346  height: 48px;6347}63486349.peach-pro-wordmark {6350  font-family: var(--font-display);6351  font-size: 22px;6352  font-style: italic;6353  font-weight: 400;6354  color: var(--peach-accent);6355  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6356}63576358.peach-pro-thankyou {6359  font-size: 0.75rem;6360  font-style: italic;6361  color: var(--peach-t2);6362  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6363}636463656366/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6367.peach-pro-notice-banner {6368  display: flex;6369  align-items: center;6370  gap: 8px;6371  padding: 7px 12px;6372  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6373  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6374  font-size: 0.6875rem;6375  color: var(--peach-t2);6376  font-family: "IBM Plex Mono", monospace;6377  flex-shrink: 0;6378}63796380.peach-pro-notice-link {6381  background: none;6382  border: none;6383  padding: 0;6384  cursor: pointer;6385  font-size: 0.6875rem;6386  color: var(--peach-accent);6387  font-family: "IBM Plex Mono", monospace;6388  margin-left: auto;6389  white-space: nowrap;6390}63916392.peach-pro-notice-close {6393  background: none;6394  border: none;6395  padding: 0 0 0 4px;6396  cursor: pointer;6397  font-size: 0.625rem;6398  color: var(--peach-t3);6399  line-height: 1;6400}64016402/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6403   Renders over whatever view is showing. 60-second expiry; the popup ticks6404   the countdown each second and clears the banner when it hits zero. */6405.peach-pair-request-banner {6406  display: flex;6407  flex-direction: column;6408  gap: 8px;6409  padding: 10px 12px;6410  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6411  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6412  font-family: "IBM Plex Mono", monospace;6413  flex-shrink: 0;6414}64156416.peach-pair-toast {6417  padding: 8px 12px;6418  font-family: "IBM Plex Mono", monospace;6419  font-size: 0.75rem;6420  color: var(--peach-t1);6421  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6422  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6423  flex-shrink: 0;6424  text-align: center;6425}64266427.peach-pair-toast strong {6428  color: var(--peach-t0);6429  font-weight: 500;6430}64316432.peach-pair-request-header {6433  display: flex;6434  align-items: center;6435  gap: 8px;6436  font-size: 0.75rem;6437  color: var(--peach-t1);6438}64396440.peach-pair-request-mark {6441  font-size: 0.875rem;6442  display: inline-flex;6443  align-items: center;6444}64456446.peach-pair-request-icon {6447  width: 1em;6448  height: 1em;6449}64506451.peach-pair-request-title {6452  font-weight: 600;6453  color: var(--peach-t0);6454}64556456.peach-pair-request-countdown {6457  margin-left: auto;6458  font-variant-numeric: tabular-nums;6459  color: var(--peach-t2);6460  font-size: 0.6875rem;6461}64626463.peach-pair-request-body {6464  margin: 0;6465  font-size: 0.75rem;6466  color: var(--peach-t1);6467  line-height: 1.4;6468}64696470.peach-pair-request-body strong {6471  color: var(--peach-t0);6472  font-weight: 600;6473}64746475.peach-pair-request-actions {6476  display: flex;6477  gap: 8px;6478  justify-content: flex-end;6479}64806481/* ─── First-run onboarding ──────────────────────────────────────────────6482   Three-card welcome shown once before vault creation. The PeachScript6483   rune background drifts behind everything at very low opacity — it's6484   atmosphere, not focus. The cards themselves use the same panel6485   language as the rest of the popup so the transition into NewVault is6486   continuous, not a jarring switch of visual register. */64876488.peach-onboarding {6489  position: relative;6490  display: flex;6491  flex-direction: column;6492  width: 100%;6493  height: 100%;6494  padding: 16px 16px 18px;6495  box-sizing: border-box;6496  overflow: hidden;6497  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6498}64996500.peach-onboarding.is-completing {6501  animation: peach-onboard-exit 200ms ease-out forwards;6502}65036504.peach-rune-background {6505  position: absolute;6506  inset: 0;6507  width: 100%;6508  height: 100%;6509  pointer-events: none;6510  z-index: 0;6511  transition: opacity 500ms ease-out;6512}65136514.peach-onboarding.is-completing .peach-rune-background {6515  opacity: 0;6516}65176518.peach-onboarding-header {6519  position: relative;6520  z-index: 1;6521  display: flex;6522  align-items: center;6523  margin-bottom: 14px;6524}65256526.peach-onboarding-card {6527  position: relative;6528  z-index: 1;6529  flex: 1;6530  display: flex;6531  flex-direction: column;6532  gap: 10px;6533  padding: 22px 20px;6534  border-radius: 16px;6535  border: 1px solid var(--peach-t3);6536  background:6537    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6538  backdrop-filter: blur(3px);6539  -webkit-backdrop-filter: blur(3px);6540  box-shadow:6541    inset 0 1px 0 rgba(240, 232, 216, 0.04),6542    0 12px 28px rgba(0, 0, 0, 0.12);6543  cursor: pointer;6544  user-select: none;6545  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6546}65476548.peach-onboarding-card.is-exiting {6549  animation: peach-card-out 120ms ease-in forwards;6550  pointer-events: none;6551}65526553.peach-onboarding-card-headline {6554  margin: 0;6555  font-family: var(--font-display);6556  font-style: italic;6557  font-weight: 400;6558  font-size: 22px;6559  line-height: 1.05;6560  color: var(--peach-t0);6561  white-space: pre-line;6562}65636564.peach-onboarding-divider {6565  margin: 4px 0 6px;6566  border: 0;6567  border-top: 1px solid var(--peach-t3);6568  width: 100%;6569}65706571.peach-onboarding-body {6572  margin: 0;6573  font-size: 0.8125rem;6574  line-height: 1.6;6575  color: var(--peach-t1);6576}65776578.peach-onboarding-warning {6579  display: flex;6580  align-items: flex-start;6581  gap: 8px;6582  margin: 6px 0 0;6583  padding-top: 8px;6584  border-top: 1px dashed var(--peach-t3);6585  font-size: 0.8125rem;6586  line-height: 1.5;6587  color: var(--peach-t1);6588}65896590.peach-onboarding-warning-icon {6591  color: var(--peach-accent);6592  font-size: 0.8125rem;6593  line-height: 1.5;6594  flex: 0 0 auto;6595}65966597.peach-onboarding-nav {6598  position: relative;6599  z-index: 1;6600  display: flex;6601  align-items: center;6602  justify-content: space-between;6603  margin-top: 12px;6604  padding: 0 4px;6605}66066607.peach-onboarding-dots {6608  display: flex;6609  align-items: center;6610  gap: 6px;6611}66126613.peach-onboarding-dot {6614  width: 6px;6615  height: 6px;6616  border-radius: 50%;6617  background: var(--peach-t2);6618  transition: width 200ms ease, height 200ms ease, background 200ms ease;6619}66206621.peach-onboarding-dot.is-active {6622  width: 8px;6623  height: 8px;6624  background: var(--peach-accent);6625}66266627.peach-onboarding-next {6628  background: none;6629  border: none;6630  padding: 4px 0;6631  cursor: pointer;6632  font-family: "IBM Plex Mono", monospace;6633  font-size: 0.6875rem;6634  letter-spacing: 0.04em;6635  color: var(--peach-t1);6636  transition: color 150ms ease;6637}66386639.peach-onboarding-next:hover {6640  color: var(--peach-t0);6641}66426643.peach-onboarding-next:disabled {6644  opacity: 0.5;6645  cursor: default;6646}66476648.peach-onboarding-back {6649  background: none;6650  border: none;6651  padding: 4px 0;6652  cursor: pointer;6653  font-family: "IBM Plex Mono", monospace;6654  font-size: 0.6875rem;6655  letter-spacing: 0.04em;6656  color: var(--peach-t2);6657  transition: color 150ms ease;6658}66596660.peach-onboarding-back:hover {6661  color: var(--peach-t0);6662}66636664.peach-onboarding-back:disabled {6665  opacity: 0.5;6666  cursor: default;6667}66686669/* Reserve back-button width on the first card so the dots stay centred */6670.peach-onboarding-back-spacer {6671  width: 44px;6672}66736674.peach-onboarding-mobile-card-buttons {6675  display: flex;6676  flex-direction: column;6677  gap: 8px;6678  margin-top: 16px;6679}66806681@keyframes peach-onboard-enter {6682  from { opacity: 0; transform: translateY(20px); }6683  to   { opacity: 1; transform: translateY(0); }6684}66856686@keyframes peach-onboard-exit {6687  from { opacity: 1; }6688  to   { opacity: 0; }6689}66906691@keyframes peach-card-in {6692  from { opacity: 0; transform: translateX(12px); }6693  to   { opacity: 1; transform: translateX(0); }6694}66956696@keyframes peach-card-out {6697  from { opacity: 1; transform: translateX(0); }6698  to   { opacity: 0; transform: translateX(-12px); }6699}67006701/* ─── New vault screen — matched to onboarding card language ─────────── */67026703.peach-newvault {6704  position: relative;6705  display: flex;6706  flex-direction: column;6707  gap: 12px;6708  padding: 16px 16px 18px;6709  overflow: hidden;6710}67116712/* Suppress the warm-blob ambient art inherited from .lock-screen — the6713   new vault card now carries the visual weight. */6714.peach-newvault::before {6715  content: none;6716}67176718.peach-newvault-header {6719  position: relative;6720  z-index: 2;6721  display: flex;6722  align-items: center;6723  gap: 10px;6724  margin-bottom: 2px;6725}67266727.peach-newvault-back {6728  display: inline-flex;6729  align-items: center;6730  gap: 4px;6731  background: transparent;6732  border: none;6733  color: var(--peach-t2);6734  font-family: "IBM Plex Mono", monospace;6735  font-size: 0.625rem;6736  letter-spacing: 0.06em;6737  cursor: pointer;6738  padding: 4px 6px;6739  border-radius: 6px;6740  transition: color 120ms ease, background 120ms ease;6741}67426743.peach-newvault-back:hover {6744  color: var(--peach-t0);6745  background: rgba(240, 232, 216, 0.04);6746}67476748.peach-newvault-mark {6749  position: absolute;6750  right: -12px;6751  top: 6px;6752  width: 110px;6753  height: 110px;6754  pointer-events: none;6755  opacity: 0.10;6756  filter: saturate(0.9);6757  z-index: 0;6758}6759.peach-newvault-mark-art {6760  width: 100%;6761  height: 100%;6762}6763.peach-newvault-mark-art path:nth-child(2),6764.peach-newvault-mark-art path:nth-child(3) {6765  stroke: rgba(123, 144, 96, 0.88);6766  fill: rgba(123, 144, 96, 0.88);6767}67686769.peach-newvault-card {6770  position: relative;6771  z-index: 1;6772  display: flex;6773  flex-direction: column;6774  gap: 12px;6775  padding: 22px 20px 18px;6776  border-radius: 16px;6777  border: 1px solid var(--peach-t3);6778  background:6779    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6780  backdrop-filter: blur(3px);6781  -webkit-backdrop-filter: blur(3px);6782  box-shadow:6783    inset 0 1px 0 rgba(240, 232, 216, 0.04),6784    0 12px 28px rgba(0, 0, 0, 0.12);6785  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6786}67876788.peach-newvault-headline {6789  margin: 0;6790  font-family: var(--font-display);6791  font-style: italic;6792  font-weight: 400;6793  font-size: 24px;6794  line-height: 1.05;6795  color: var(--peach-t0);6796  white-space: pre-line;6797}67986799.peach-newvault-divider {6800  margin: 2px 0 4px;6801  border: 0;6802  border-top: 1px solid var(--peach-t3);6803  width: 100%;6804}68056806.peach-newvault-field {6807  display: flex;6808  flex-direction: column;6809  gap: 4px;6810}68116812.peach-newvault-label-row {6813  display: flex;6814  align-items: center;6815  justify-content: space-between;6816}68176818/* Monospace input scaled to the card. Replaces the 22px unlock-input6819   so the placeholder no longer overflows and the field reads as part6820   of the same surface as the body copy. */6821.peach-newvault-input {6822  font-size: 0.875rem;6823  letter-spacing: 0.18em;6824  padding: 8px 0;6825}6826.peach-newvault-input::placeholder {6827  letter-spacing: 0.18em;6828  color: var(--peach-t2);6829}68306831.peach-newvault-hint {6832  margin: 2px 0 0;6833  font-family: "IBM Plex Mono", monospace;6834  font-size: 0.625rem;6835  color: var(--peach-t2);6836  letter-spacing: 0.04em;6837}68386839.peach-newvault-submit {6840  margin-top: 4px;6841}68426843.peach-newvault-warning {6844  display: flex;6845  align-items: flex-start;6846  gap: 8px;6847  margin: 4px 0 0;6848  padding-top: 10px;6849  border-top: 1px dashed var(--peach-t3);6850  font-size: 0.75rem;6851  line-height: 1.5;6852  color: var(--peach-t1);6853}68546855.peach-newvault-warning-icon {6856  color: var(--peach-accent);6857  font-size: 0.8125rem;6858  line-height: 1.4;6859  flex: 0 0 auto;6860}68616862.peach-newvault-footer {6863  position: relative;6864  z-index: 1;6865  display: flex;6866  flex-direction: column;6867  gap: 4px;6868  padding: 4px 4px 0;6869}68706871/* Settings body — warm accent gradient gives the glass something to blur against */6872.peach-settings-body {6873  background:6874    radial-gradient(6875      ellipse at 30% 20%,6876      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,6877      transparent 60%6878    );6879}68806881/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */6882/* ── Danger cards (Replace + Destroy) ────────────────────────────────────6883 * Two severity levels: "warn" for actions that are dangerous-but-recoverable6884 * (replacing the vault from a backup file) and "hazard" for actions that6885 * are absolutely irreversible (Panic). Both use the same card scaffold so6886 * they read as a pair, but the colour family signals the severity at a6887 * glance — yellow for caution, red for don't.6888 */6889.peach-danger-card {6890  --danger-tint: 235, 158, 52; /* amber */6891  display: flex;6892  flex-direction: column;6893  gap: 8px;6894  padding: 14px;6895  margin-top: 10px;6896  border-radius: 12px;6897  border: 1px solid rgba(var(--danger-tint), 0.32);6898  background:6899    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),6900    rgba(var(--danger-tint), 0.04);6901  box-shadow:6902    inset 0 1px 0 rgba(var(--danger-tint), 0.08),6903    0 0 24px rgba(var(--danger-tint), 0.04);6904  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;6905}69066907.peach-danger-card:hover {6908  border-color: rgba(var(--danger-tint), 0.55);6909  box-shadow:6910    inset 0 1px 0 rgba(var(--danger-tint), 0.12),6911    0 0 36px rgba(var(--danger-tint), 0.10);6912}69136914.peach-danger-card--hazard {6915  --danger-tint: 220, 38, 38; /* red */6916}69176918.peach-danger-card-head {6919  display: flex;6920  align-items: center;6921  gap: 10px;6922}69236924.peach-danger-card-glyph {6925  width: 28px;6926  height: 28px;6927  flex-shrink: 0;6928  display: flex;6929  align-items: center;6930  justify-content: center;6931  border-radius: 8px;6932  background: rgba(var(--danger-tint), 0.12);6933  color: rgba(var(--danger-tint), 0.95);6934  font-size: 1rem;6935  line-height: 1;6936}69376938.peach-danger-card-title {6939  margin: 0;6940  font-size: 0.8125rem;6941  font-weight: 600;6942  color: rgba(var(--danger-tint), 0.92);6943  letter-spacing: 0.01em;6944}69456946.peach-danger-card-copy {6947  margin: 0;6948  font-size: 0.6875rem;6949  line-height: 1.5;6950  color: var(--peach-t2);6951}69526953.peach-danger-card-button {6954  width: 100%;6955  padding: 9px;6956  margin-top: 4px;6957  background: transparent;6958  border: 1px solid rgba(var(--danger-tint), 0.45);6959  border-radius: 8px;6960  color: rgba(var(--danger-tint), 0.9);6961  font-size: 0.75rem;6962  font-weight: 500;6963  letter-spacing: 0.02em;6964  cursor: pointer;6965  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;6966}69676968.peach-danger-card-button:hover {6969  background: rgba(var(--danger-tint), 0.10);6970  border-color: rgba(var(--danger-tint), 0.75);6971  color: rgb(var(--danger-tint));6972}69736974/* ── Panic flow (three-step destruction) ───────────────────────────────── */6975.peach-panic {6976  display: flex;6977  flex-direction: column;6978  flex: 1;6979  min-height: 0;6980  padding: 28px 20px 20px;6981  gap: 18px;6982  overflow-y: auto;6983  scrollbar-width: none;6984  -ms-overflow-style: none;6985}69866987.peach-panic::-webkit-scrollbar { display: none; }69886989.peach-panic-step2 {6990  background: rgba(220, 38, 38, 0.04);6991}69926993.peach-panic-step3 {6994  position: relative;6995  background: #0f0505;6996  color: #ffffff;6997  overflow: hidden;6998}69997000.peach-panic-rune-bg {7001  position: absolute;7002  inset: 0;7003  opacity: 0.22;7004  pointer-events: none;7005  overflow: hidden;7006}70077008.peach-panic-rune-bg canvas {7009  width: 100% !important;7010  height: 100% !important;7011}70127013.peach-panic-icon {7014  font-size: 32px;7015  color: rgb(220, 38, 38);7016  line-height: 1;7017}70187019.peach-panic-title {7020  margin: 0;7021  font-size: 18px;7022  font-weight: 500;7023  color: var(--peach-t1);7024}70257026.peach-panic-title--severe {7027  font-size: 20px;7028  font-weight: 700;7029  color: rgb(220, 38, 38);7030}70317032.peach-panic-body {7033  margin: 0;7034  font-size: 0.8125rem;7035  line-height: 1.55;7036  color: var(--peach-t2);7037}70387039.peach-panic-body--severe {7040  color: rgba(220, 38, 38, 0.85);7041}70427043.peach-panic-body--final {7044  font-size: 1rem;7045  font-weight: 700;7046  color: rgb(255, 80, 80);7047  line-height: 1.4;7048}70497050.peach-panic-body--final-intro {7051  font-size: 1rem;7052  color: #ffffff;7053  font-weight: 400;7054}70557056.peach-panic-divider {7057  height: 1px;7058  background: rgba(255, 255, 255, 0.08);7059  margin: 4px 0;7060}70617062.peach-panic-confirm-input {7063  width: 100%;7064  padding: 10px 12px;7065  background: rgba(255, 255, 255, 0.02);7066  border: 1px solid rgba(220, 38, 38, 0.4);7067  border-radius: 8px;7068  color: var(--peach-t1);7069  font-family: "IBM Plex Mono", monospace;7070  font-size: 0.875rem;7071  letter-spacing: 0.12em;7072  text-transform: uppercase;7073}70747075.peach-panic-confirm-input:focus {7076  outline: none;7077  border-color: rgb(220, 38, 38);7078}70797080.peach-panic-confirm-input--match {7081  border-color: rgb(220, 38, 38);7082  color: rgb(220, 38, 38);7083}70847085.peach-panic-confirm-label {7086  font-size: 0.6875rem;7087  color: var(--peach-t2);7088  margin: 0 0 -8px;7089  letter-spacing: 0.06em;7090}70917092.peach-panic-actions {7093  display: flex;7094  flex-direction: column;7095  gap: 10px;7096  margin-top: auto;7097}70987099.peach-panic-button {7100  width: 100%;7101  padding: 12px;7102  border-radius: 8px;7103  font-size: 0.8125rem;7104  cursor: pointer;7105  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7106}71077108.peach-panic-button--primary {7109  background: var(--peach-accent);7110  border: 1px solid var(--peach-accent);7111  color: #ffffff;7112  font-weight: 600;7113}71147115.peach-panic-button--primary:hover {7116  background: color-mix(in srgb, var(--peach-accent) 88%, white);7117}71187119.peach-panic-button--danger {7120  background: rgb(220, 38, 38);7121  border: 1px solid rgb(220, 38, 38);7122  color: #ffffff;7123  font-weight: 600;7124}71257126.peach-panic-button--danger:disabled {7127  opacity: 0.35;7128  cursor: not-allowed;7129}71307131.peach-panic-button--ghost {7132  background: transparent;7133  border: 1px solid rgba(255, 255, 255, 0.18);7134  color: var(--peach-t2);7135}71367137.peach-panic-button--ghost:hover {7138  border-color: rgba(255, 255, 255, 0.32);7139  color: var(--peach-t1);7140}71417142.peach-panic-link {7143  background: transparent;7144  border: none;7145  padding: 4px 0;7146  color: rgba(220, 38, 38, 0.65);7147  font-size: 0.75rem;7148  cursor: pointer;7149  text-align: left;7150  text-decoration: underline;7151  text-underline-offset: 3px;7152}71537154.peach-panic-link:hover {7155  color: rgb(220, 38, 38);7156}71577158.peach-panic-bar {7159  background: rgb(220, 38, 38);7160  padding: 16px 20px;7161  margin: -28px -20px 0;7162  text-align: center;7163  font-size: 0.8125rem;7164  font-weight: 700;7165  letter-spacing: 0.12em;7166  color: #ffffff;7167}71687169.peach-panic-final-button {7170  width: 100%;7171  padding: 14px;7172  background: rgb(220, 38, 38);7173  border: none;7174  border-radius: 8px;7175  color: #ffffff;7176  font-size: 0.875rem;7177  font-weight: 700;7178  letter-spacing: 0.08em;7179  text-transform: uppercase;7180  cursor: pointer;7181  animation: peach-panic-pulse 2s ease-in-out infinite;7182}71837184.peach-settings-license {7185  margin-top: 10px;7186  padding-top: 10px;7187  border-top: 1px solid var(--peach-t3);7188}71897190.peach-settings-label {7191  font-size: 0.625rem;7192  letter-spacing: 0.08em;7193  color: var(--peach-t3);7194  display: block;7195  margin-bottom: 6px;7196}71977198.peach-settings-license-row {7199  display: flex;7200  align-items: center;7201  justify-content: space-between;7202  gap: 8px;7203}72047205.peach-settings-license-key {7206  font-family: 'IBM Plex Mono', monospace;7207  font-size: 0.75rem;7208  color: var(--peach-t0);7209  letter-spacing: 0.04em;7210  word-break: break-all;7211}72127213.peach-settings-license-copy {7214  font-size: 0.6875rem;7215  color: var(--peach-accent);7216  background: transparent;7217  border: none;7218  cursor: pointer;7219  padding: 4px 8px;7220  border-radius: 4px;7221  flex-shrink: 0;7222  transition: opacity 150ms ease;7223}72247225.peach-settings-license-copy:hover {7226  opacity: 0.75;7227}72287229@keyframes peach-panic-pulse {7230  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7231  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7232}72337234[data-motion="reduce"] .peach-panic-final-button {7235  animation: none;7236}72377238/* Vault History — Settings → Vault sub-view */72397240.peach-history-list {7241  border: 1px solid var(--peach-border);7242  border-radius: 8px;7243  overflow: hidden;7244  margin: 8px 0 4px;7245}72467247.peach-history-row {7248  display: flex;7249  align-items: center;7250  justify-content: space-between;7251  padding: 9px 12px;7252  gap: 10px;7253  border-bottom: 1px solid var(--peach-border);7254}72557256.peach-history-row:last-child {7257  border-bottom: none;7258}72597260.peach-history-meta {7261  display: flex;7262  flex-direction: column;7263  gap: 2px;7264  min-width: 0;7265  flex: 1;7266}72677268.peach-history-time {7269  font-size: 0.75rem;7270  font-family: 'IBM Plex Mono', ui-monospace, monospace;7271  color: var(--peach-t0);7272  white-space: nowrap;7273  overflow: hidden;7274  text-overflow: ellipsis;7275}72767277.peach-history-sub {7278  font-size: 0.625rem;7279  color: var(--peach-t2);7280  letter-spacing: 0.06em;7281  text-transform: uppercase;7282  white-space: nowrap;7283  overflow: hidden;7284  text-overflow: ellipsis;7285}72867287.peach-history-btn {7288  flex-shrink: 0;7289  white-space: nowrap;7290  min-width: 56px;7291  text-align: center;7292}72937294.peach-history-btn.is-busy {7295  opacity: 0.65;7296}72977298.peach-history-footer {7299  font-size: 0.625rem;7300  color: var(--peach-t3);7301  letter-spacing: 0.05em;7302  text-align: right;7303  margin: 0;7304  padding: 2px 0 0;7305}73067307/* ── Context menu + swipe-copy flash ─────────────────────── */7308.peach-context-menu-backdrop {7309  position: fixed;7310  inset: 0;7311  background: rgba(0, 0, 0, 0.45);7312  z-index: 100;7313  display: flex;7314  align-items: flex-end;7315  justify-content: center;7316  animation: peach-ctx-fade 140ms ease both;7317}7318.peach-context-menu {7319  width: min(360px, calc(100vw - 24px));7320  margin-bottom: max(env(safe-area-inset-bottom), 12px);7321  background: var(--peach-bg);7322  border: 1px solid var(--peach-t3);7323  border-radius: 14px;7324  padding: 6px;7325  display: flex;7326  flex-direction: column;7327  gap: 2px;7328  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7329  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7330}7331@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7332@keyframes peach-ctx-rise {7333  from { transform: translateY(16px); opacity: 0; }7334  to   { transform: translateY(0);    opacity: 1; }7335}7336.peach-context-menu-item {7337  background: transparent;7338  color: var(--peach-t0);7339  border: 0;7340  border-radius: 10px;7341  padding: 12px 14px;7342  text-align: left;7343  font: inherit;7344  cursor: pointer;7345}7346.peach-context-menu-item:hover,7347.peach-context-menu-item:focus-visible {7348  background: var(--peach-t3);7349}7350.peach-context-menu-item--danger {7351  color: var(--peach-health-bad, #d96868);7352}7353.peach-context-menu-item--cancel {7354  color: var(--peach-t2);7355  margin-top: 4px;7356  border-top: 1px solid var(--peach-t3);7357  border-radius: 0 0 10px 10px;7358}73597360/* Swipe-to-copy flash */7361.peach-entry-row.is-copy-flash {7362  animation: peach-copy-flash 600ms ease both;7363}7364@keyframes peach-copy-flash {7365  0%   { background: transparent; }7366  20%  { background: rgba(217, 153, 51, 0.32); }7367  100% { background: transparent; }7368}73697370html { font-size: 16px; }73717372/* ── Recovery word entry ─────────────────────────────────────────── */7373.peach-lock-recover-link {7374  display: block;7375  width: 100%;7376  margin-top: 12px;7377  background: none;7378  border: none;7379  font-family: "IBM Plex Mono", monospace;7380  font-size: 0.625rem;7381  letter-spacing: 0.06em;7382  color: var(--peach-t2);7383  cursor: pointer;7384  text-align: center;7385  padding: 4px;7386  transition: color 120ms ease;7387}7388.peach-lock-recover-link:hover {7389  color: var(--peach-t0);7390}73917392.lock-screen--recovery {7393  display: flex;7394  flex-direction: column;7395  align-items: stretch;7396  padding: 12px 20px 24px;7397  overflow: hidden;7398}73997400.peach-recovery-nav {7401  display: flex;7402  align-items: center;7403  position: relative;7404  z-index: 1;7405  margin-bottom: 4px;7406}74077408/* Mask runes to the top decorative band only — keep inputs and the7409   bottom CTA button clear. The bottom of the popup is reserved for7410   submit buttons; rendering runes there overlaps the button glyph. */7411.peach-rune-background--recovery {7412  -webkit-mask-image: linear-gradient(7413    to bottom,7414    black 0px, black 85px,7415    transparent 110px,7416    transparent 100%7417  );7418  mask-image: linear-gradient(7419    to bottom,7420    black 0px, black 85px,7421    transparent 110px,7422    transparent 100%7423  );7424}74257426.peach-recovery-header {7427  text-align: center;7428  margin-bottom: 16px;7429  margin-top: 4px;7430}7431.peach-recovery-header .peach-onboarding-headline {7432  font-size: 1.25rem;7433  font-weight: 300;7434  letter-spacing: 0.02em;7435  margin: 0 0 4px;7436}7437.peach-recovery-header .peach-hint {7438  font-family: "IBM Plex Mono", monospace;7439  font-size: 0.625rem;7440  color: var(--peach-t2);7441  letter-spacing: 0.04em;7442  margin: 0;7443}74447445/* 12-word grid: 2 columns × 6 rows */7446.peach-recovery-grid {7447  display: grid;7448  grid-template-columns: repeat(2, 1fr);7449  gap: 12px 20px;7450  width: 100%;7451  margin-bottom: 0;7452}74537454.peach-recovery-word-slot {7455  display: flex;7456  align-items: center;7457  gap: 6px;7458  min-width: 0;7459}74607461.peach-recovery-word-index {7462  font-family: "IBM Plex Mono", monospace;7463  font-size: 0.5rem;7464  color: rgba(255, 255, 255, 0.35);7465  min-width: 14px;7466  flex-shrink: 0;7467  text-align: right;7468  letter-spacing: 0.04em;7469}74707471.peach-recovery-word-input {7472  flex: 1;7473  min-width: 0;7474  background: transparent;7475  border: none;7476  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7477  color: var(--peach-t0);7478  font-family: "IBM Plex Mono", monospace;7479  font-size: 0.6875rem;7480  letter-spacing: 0.06em;7481  padding: 5px 2px 4px;7482  outline: none;7483  text-transform: lowercase;7484  transition: border-color 120ms ease;7485}7486.peach-recovery-word-input::placeholder {7487  color: rgba(255, 255, 255, 0.18);7488}7489.peach-recovery-word-input:focus {7490  border-bottom-color: var(--peach-accent);7491}74927493.peach-recovery-submit {7494  width: 100%;7495  margin-top: auto;7496}74977498.peach-recovery-new-password-form {7499  width: 100%;7500  display: flex;7501  flex-direction: column;7502  gap: 16px;7503  margin-bottom: 8px;7504}7505.peach-recovery-new-password-form .peach-newvault-field {7506  display: flex;7507  flex-direction: column;7508  gap: 4px;7509}75107511/* ── Recovery words display (post-create) ────────────────────────── */7512.lock-screen--recovery-display {7513  display: flex;7514  flex-direction: column;7515  align-items: stretch;7516  padding: 0 20px 20px;7517  min-height: 0;7518  overflow-y: auto;7519}75207521.peach-recovery-words-display {7522  width: 100%;7523  margin-bottom: 16px;7524  border: 1px solid var(--peach-t3);7525  border-radius: 8px;7526  padding: 12px 14px;7527  background: rgba(245, 240, 234, 0.04);7528}75297530.peach-recovery-words-label {7531  font-family: "IBM Plex Mono", monospace;7532  font-size: 0.5rem;7533  letter-spacing: 0.08em;7534  color: var(--peach-t2);7535  text-transform: uppercase;7536  margin-bottom: 10px;7537}75387539.peach-recovery-word-list {7540  list-style: none;7541  margin: 0;7542  padding: 0;7543  display: grid;7544  grid-template-columns: repeat(2, 1fr);7545  gap: 6px 16px;7546}75477548.peach-recovery-word-item {7549  display: flex;7550  align-items: baseline;7551  gap: 5px;7552}75537554.peach-recovery-word-num {7555  font-family: "IBM Plex Mono", monospace;7556  font-size: 0.5rem;7557  color: var(--peach-t2);7558  width: 14px;7559  flex: 0 0 14px;7560  text-align: right;7561  letter-spacing: 0.04em;7562  font-variant-numeric: tabular-nums;7563}75647565.peach-recovery-download-btn {7566  display: block;7567  margin: 10px auto 0;7568  padding: 4px 10px;7569  background: transparent;7570  border: 1px solid var(--peach-border);7571  border-radius: 6px;7572  color: var(--peach-t2);7573  font-family: "IBM Plex Mono", monospace;7574  font-size: 0.5625rem;7575  letter-spacing: 0.06em;7576  text-transform: lowercase;7577  cursor: pointer;7578  transition: border-color 0.15s, color 0.15s;7579}75807581.peach-recovery-download-btn:hover {7582  border-color: var(--peach-accent);7583  color: var(--peach-t0);7584}75857586.peach-recovery-word-text {7587  font-family: "IBM Plex Mono", monospace;7588  font-size: 0.6875rem;7589  letter-spacing: 0.06em;7590  color: var(--peach-t0);7591  text-transform: lowercase;7592}75937594.peach-hint--warning {7595  color: var(--peach-accent);7596  font-style: italic;7597}7598.peach-hint--success {7599  color: var(--peach-t2);7600  font-family: "IBM Plex Mono", monospace;7601  font-size: 0.625rem;7602  letter-spacing: 0.06em;7603}76047605/* Confirmation step */7606.peach-recovery-confirm {7607  width: 100%;7608  flex: 1;7609  display: flex;7610  flex-direction: column;7611}7612.peach-recovery-confirm-label {7613  font-family: "IBM Plex Mono", monospace;7614  font-size: 0.5625rem;7615  letter-spacing: 0.04em;7616  color: var(--peach-t2);7617  text-align: center;7618  margin: 0 0 12px;7619}7620.peach-recovery-confirm-fields {7621  display: flex;7622  flex-direction: column;7623  gap: 14px;7624  margin-bottom: 10px;7625}7626.peach-recovery-confirm-field {7627  display: flex;7628  align-items: center;7629  gap: 8px;7630}7631.peach-recovery-confirm-num {7632  font-family: "IBM Plex Mono", monospace;7633  font-size: 0.5rem;7634  color: var(--peach-t2);7635  min-width: 44px;7636  letter-spacing: 0.04em;7637}7638.peach-recovery-confirm-input {7639  flex: 1;7640  background: transparent;7641  border: none;7642  border-bottom: 1px solid var(--peach-t3);7643  color: var(--peach-t0);7644  font-family: "IBM Plex Mono", monospace;7645  font-size: 0.6875rem;7646  letter-spacing: 0.06em;7647  padding: 4px 2px 3px;7648  outline: none;7649  text-transform: lowercase;7650  transition: border-color 120ms ease;7651}7652.peach-recovery-confirm-input:focus {7653  border-bottom-color: var(--peach-accent);7654}7655.peach-recovery-confirm-input:disabled {7656  opacity: 0.4;7657  cursor: not-allowed;7658}7659.peach-recovery-confirm-btn {7660  width: 100%;7661  margin-top: auto;7662}76637664/* ============================================================7665   Sync info sheet7666   ============================================================ */76677668.peach-sync-info-backdrop {7669  position: fixed;7670  inset: 0;7671  z-index: 200;7672  background: rgba(0, 0, 0, 0.55);7673  display: flex;7674  align-items: flex-end;7675  animation: peach-fade-in 200ms ease forwards;7676}76777678@keyframes peach-fade-in {7679  from { opacity: 0; }7680  to   { opacity: 1; }7681}76827683.peach-sync-info-sheet {7684  width: 100%;7685  background: var(--peach-bg-card, var(--peach-bg));7686  border-top-left-radius: 20px;7687  border-top-right-radius: 20px;7688  padding: 12px 24px 32px;7689  display: flex;7690  flex-direction: column;7691  gap: 20px;7692  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;7693}76947695@keyframes peach-sheet-up {7696  from { transform: translateY(100%); }7697  to   { transform: translateY(0); }7698}76997700.peach-sync-info-handle {7701  width: 36px;7702  height: 4px;7703  border-radius: 2px;7704  background: var(--peach-border);7705  margin: 0 auto 4px;7706  flex-shrink: 0;7707}77087709.peach-sync-info-title {7710  font-family: 'Cormorant Garamond', serif;7711  font-style: italic;7712  font-size: 26px;7713  font-weight: 600;7714  color: var(--peach-t0);7715  margin: 0;7716  line-height: 1.2;7717}77187719.peach-sync-info-body {7720  display: flex;7721  flex-direction: column;7722  gap: 14px;7723}77247725.peach-sync-info-point {7726  display: flex;7727  gap: 12px;7728  align-items: flex-start;7729  font-size: 14px;7730  color: var(--peach-t2);7731  line-height: 1.6;7732  margin: 0;7733}77347735.peach-sync-info-icon {7736  color: var(--peach-accent);7737  font-size: 16px;7738  flex-shrink: 0;7739  margin-top: 1px;7740}77417742.peach-sync-info-actions {7743  display: flex;7744  flex-direction: column;7745  gap: 12px;7746  margin-top: 4px;7747}77487749.peach-sync-info-pro-link {7750  background: none;7751  border: none;7752  font-size: 13px;7753  color: var(--peach-t3);7754  cursor: pointer;7755  padding: 0;7756  font-family: inherit;7757  text-align: center;7758  transition: color 150ms ease;7759}77607761.peach-sync-info-pro-link:hover {7762  color: var(--peach-accent);7763}77647765.peach-btn--full {7766  width: 100%;7767}77687769/* ── Sync screen ── */77707771.peach-sync-screen {7772  display: flex;7773  flex-direction: column;7774  height: 100%;7775}77767777.peach-sync-content {7778  flex: 1;7779  overflow-y: auto;7780  padding: 24px 20px 40px;7781  display: flex;7782  flex-direction: column;7783  gap: 24px;7784}77857786/* Intro (State A) */7787.peach-sync-headline {7788  font-family: 'Cormorant Garamond', serif;7789  font-style: italic;7790  font-size: 28px;7791  font-weight: 600;7792  color: var(--peach-t0);7793  margin: 0 0 10px;7794  line-height: 1.2;7795}77967797.peach-sync-intro-body {7798  font-size: 14px;7799  color: var(--peach-t1);7800  line-height: 1.6;7801  margin: 0;7802}78037804.peach-sync-pro-note {7805  display: flex;7806  flex-direction: column;7807  gap: 8px;7808  background: var(--peach-t3);7809  border-radius: 10px;7810  padding: 12px 14px;7811}78127813.peach-sync-pro-note-text {7814  font-size: 12px;7815  color: var(--peach-t2);7816  line-height: 1.5;7817  margin: 0;7818}78197820.peach-sync-pro-link {7821  background: none;7822  border: none;7823  font-size: 12px;7824  color: var(--peach-accent);7825  cursor: pointer;7826  padding: 0;7827  font-family: inherit;7828  text-align: left;7829}78307831/* Status (State C) */7832.peach-sync-status {7833  padding: 12px 0;7834  border-bottom: 1px solid var(--peach-border);7835}78367837.peach-sync-status-row {7838  display: flex;7839  align-items: center;7840  gap: 8px;7841}78427843.peach-sync-dot {7844  width: 7px;7845  height: 7px;7846  border-radius: 50%;7847  flex-shrink: 0;7848}78497850.peach-sync-dot--green { background: var(--peach-health-ok); }7851.peach-sync-dot--amber { background: var(--peach-accent); }78527853.peach-sync-status-text {7854  font-family: 'IBM Plex Mono', monospace;7855  font-size: 11px;7856  color: var(--peach-t2);7857}78587859/* Paired devices */7860.peach-sync-section {7861  display: flex;7862  flex-direction: column;7863  gap: 2px;7864}78657866.peach-sync-section-label {7867  font-family: 'IBM Plex Mono', monospace;7868  font-size: 10px;7869  letter-spacing: 0.1em;7870  color: var(--peach-t3);7871  margin: 0 0 10px;7872}78737874.peach-sync-device-row {7875  display: flex;7876  justify-content: space-between;7877  align-items: baseline;7878  padding: 10px 0;7879  border-bottom: 1px solid var(--peach-border);7880  gap: 12px;7881}78827883.peach-sync-device-name {7884  font-size: 14px;7885  color: var(--peach-t1);7886}78877888.peach-sync-device-meta {7889  font-family: 'IBM Plex Mono', monospace;7890  font-size: 11px;7891  color: var(--peach-t3);7892  white-space: nowrap;7893}78947895.peach-sync-hub-note {7896  padding: 14px 16px;7897  border: 1px solid var(--peach-border);7898  border-radius: 10px;7899  display: flex;7900  flex-direction: column;7901  gap: 6px;7902  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);7903}79047905.peach-sync-hub-note-title {7906  font-size: 13px;7907  font-weight: 600;7908  color: var(--peach-t0);7909  margin: 0;7910}79117912.peach-sync-hub-note-body {7913  font-size: 12px;7914  color: var(--peach-t2);7915  line-height: 1.6;7916  margin: 0;7917}79187919/* Action buttons */7920.peach-sync-actions {7921  display: flex;7922  gap: 10px;7923  flex-wrap: wrap;7924}79257926/* Upgrade prompt (State B) */7927.peach-sync-upgrade {7928  display: flex;7929  flex-direction: column;7930  gap: 12px;7931  padding: 16px;7932  border: 1px solid var(--peach-border);7933  border-radius: 10px;7934}79357936.peach-sync-upgrade-text {7937  font-size: 13px;7938  color: var(--peach-t2);7939  line-height: 1.6;7940  margin: 0;7941}79427943/* Network note */7944.peach-sync-network-note {7945  font-size: 12px;7946  color: var(--peach-t3);7947  line-height: 1.6;7948  margin: 0;7949}79507951/* Advanced */7952.peach-sync-advanced {7953  margin-top: auto;7954  padding-top: 16px;7955  border-top: 1px solid var(--peach-border);7956}79577958.peach-sync-advanced-toggle {7959  display: flex;7960  align-items: center;7961  gap: 8px;7962  background: none;7963  border: none;7964  font-family: 'IBM Plex Mono', monospace;7965  font-size: 11px;7966  letter-spacing: 0.08em;7967  color: var(--peach-t3);7968  cursor: pointer;7969  padding: 0;7970  text-transform: uppercase;7971}79727973.peach-sync-advanced-chevron {7974  display: inline-block;7975  transition: transform 200ms ease;7976  font-size: 10px;7977}79787979.peach-sync-advanced-chevron.is-open {7980  transform: rotate(90deg);7981}79827983.peach-sync-advanced-content {7984  margin-top: 14px;7985}79867987.peach-sync-advanced-row {7988  display: flex;7989  justify-content: space-between;7990  align-items: center;7991  gap: 16px;7992}79937994.peach-sync-advanced-title {7995  font-size: 14px;7996  color: var(--peach-t1);7997  margin: 0 0 2px;7998}79998000.peach-sync-advanced-subtitle {8001  font-size: 12px;8002  color: var(--peach-t3);8003  margin: 0;8004  line-height: 1.5;8005}80068007/* ── Add Device — Android scan tabs ─────────────────────────────────────── */80088009.peach-pairing-tabs {8010  display: flex;8011  border: 1px solid var(--peach-border);8012  border-radius: 8px;8013  overflow: hidden;8014  margin-bottom: 4px;8015}80168017.peach-pairing-tab {8018  flex: 1;8019  padding: 10px 0;8020  background: none;8021  border: none;8022  font-family: 'IBM Plex Mono', monospace;8023  font-size: 11px;8024  letter-spacing: 0.06em;8025  color: var(--peach-t2);8026  cursor: pointer;8027  transition: background 150ms, color 150ms;8028}80298030.peach-pairing-tab.is-active {8031  background: var(--peach-accent);8032  color: #fff;8033  font-weight: 600;8034}80358036.peach-pairing-tab:not(.is-active):active {8037  background: var(--peach-border);8038}80398040/* Camera view */8041.peach-pairing-camera-container {8042  position: relative;8043  width: 100%;8044  aspect-ratio: 1;8045  border-radius: 12px;8046  overflow: hidden;8047  background: #000;8048  flex-shrink: 0;8049}80508051.peach-pairing-video {8052  width: 100%;8053  height: 100%;8054  object-fit: cover;8055}80568057.peach-pairing-scan-frame {8058  position: absolute;8059  top: 50%;8060  left: 50%;8061  transform: translate(-50%, -50%);8062  width: 60%;8063  aspect-ratio: 1;8064  border: 2px solid var(--peach-accent);8065  border-radius: 8px;8066  pointer-events: none;8067}