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: rgba(var(--ac-r, 217), var(--ac-g, 104), var(--ac-b, 48), 0.18);587  color: var(--peach-accent);588}589.peach-inline-save-btn:hover:not(:disabled) {590  background: rgba(var(--ac-r, 217), var(--ac-g, 104), var(--ac-b, 48), 0.30);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.78);849  box-shadow:850    0 1px 0 rgba(255,255,255,0.08) inset,851    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),852    0 3px 16px var(--peach-glow),853    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);854}855.peach-btn--accent:hover:not(:disabled) {856  background: var(--peach-accent);857  filter: brightness(1.10) saturate(1.05);858  box-shadow:859    0 1px 0 rgba(255,255,255,0.10) inset,860    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),861    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),862    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);863}864.peach-btn--ghost { border-color: var(--peach-t3); color: var(--peach-t1); }865.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }866.peach-icon-btn {867  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;868  display: inline-flex; align-items: center; justify-content: center;869}870871.peach-btn:focus-visible {872  outline: none;873  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);874}875876/* Lock button */877.peach-lock-icon { transform-origin: center; }878.peach-lock-btn.is-locking { color: var(--peach-accent); }879.peach-lock-btn.is-locking .peach-lock-icon {880  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);881}882883/* Biometric unlock button */884.peach-biometric-btn {885  display: flex;886  align-items: center;887  justify-content: center;888  gap: 6px;889  margin-top: 8px;890  width: 100%;891}892893/* Copy button */894.peach-copy-btn {895  position: relative; overflow: hidden;896  color: var(--peach-t2); border-color: var(--peach-t3);897}898.peach-copy-icon {899  display: inline-flex; align-items: center; justify-content: center;900  position: relative; z-index: 1;901}902.peach-copy-icon-svg { display: block; }903.peach-copy-sheen {904  position: absolute; inset: 0;905  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%);906  opacity: 0; transform: scaleX(0.15); transform-origin: left center;907}908.peach-copy-btn.is-copied {909  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;910  box-shadow:911    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),912    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),913    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);914}915.peach-copy-btn.is-copied .peach-copy-icon {916  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;917}918.peach-copy-btn.is-copied .peach-copy-sheen {919  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;920}921.peach-copy-btn.is-retreat {922  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;923}924.peach-copy-btn.is-retreat .peach-copy-sheen {925  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;926}927.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }928.peach-copy-drain-bar {929  display: block; width: 100%; height: 100%;930  background: var(--peach-accent); opacity: 0.7;931  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;932}933934/* Unlock screen elements */935.peach-unlock-headline {936  margin: 2px 0 0;937  font-family: var(--font-display);938  font-size: 52px; line-height: 0.95;939  font-style: italic; font-weight: 400;940}941.peach-subline {942  margin: 0;943  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;944  font-size: 0.625rem; color: var(--peach-t2); font-style: italic;945}946.peach-subline--lock {947  max-width: 248px;948  line-height: 1.5;949}950.peach-underline-input {951  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);952  padding: 6px 0; background: transparent; color: var(--peach-t0);953  outline: none;954  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;955  font-size: 0.8125rem;956  caret-color: var(--peach-accent);957}958.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }959.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }960.peach-hint {961  margin: 0;962  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;963  font-size: 0.625rem; color: var(--peach-t2);964}965.peach-unlock-footer {966  margin-top: 4px; display: flex; align-items: center; gap: 7px;967  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;968  font-size: 0.625rem; color: var(--peach-t2);969}970.peach-unlock-footer--lock {971  padding-top: 2px;972}973974/* Breach badge */975.peach-breach-badge {976  display: flex;977  position: relative;978  z-index: 1;979  align-items: center;980  gap: 7px;981  font-size: 0.5625rem;982  color: var(--peach-breach);983  padding: 5px 10px;984  margin-bottom: 4px;985  border-radius: 8px;986  background: rgba(220, 80, 60, 0.07);987  border: 1px solid rgba(220, 80, 60, 0.18);988  letter-spacing: 0.04em;989}990991.peach-breach-action {992  margin-left: auto;993  font-size: 0.625rem;994  padding: 3px 8px;995}996997.peach-password-value.is-breached {998  color: rgba(220, 80, 60, 0.75);999  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1000}10011002/* ── Overlay views ─────────────────────────────────────────────────── */1003.peach-overlay-view {1004  position: absolute;1005  inset: 0;1006  display: flex;1007  flex-direction: column;1008  background:1009    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1010    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1011    var(--peach-bg);1012  z-index: 2;1013  overflow: hidden;1014  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1015}1016@keyframes overlay-in {1017  from { opacity: 0; transform: translateY(8px); }1018  to   { opacity: 1; transform: translateY(0); }1019}1020.peach-overlay-view.ov-enter-up {1021  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1022}1023.peach-overlay-view.ov-exit-up {1024  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1025}1026.peach-overlay-view.ov-enter-right {1027  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1028}1029.peach-overlay-view.ov-exit-right {1030  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1031}10321033@keyframes ov-enter-up {1034  from { opacity: 0; transform: translateY(18px); }1035  to   { opacity: 1; transform: translateY(0); }1036}1037@keyframes ov-exit-up {1038  from { opacity: 1; transform: translateY(0); }1039  to   { opacity: 0; transform: translateY(-12px); }1040}1041@keyframes ov-enter-right {1042  from { opacity: 0; transform: translateX(20px); }1043  to   { opacity: 1; transform: translateX(0); }1044}1045@keyframes ov-exit-right {1046  from { opacity: 1; transform: translateX(0); }1047  to   { opacity: 0; transform: translateX(20px); }1048}10491050/* Overlay shared header */1051.peach-overlay-header {1052  padding: 10px 12px;1053  display: flex;1054  align-items: center;1055  gap: 8px;1056  border-bottom: 1px solid var(--peach-t3);1057  flex-shrink: 0;1058}1059.peach-overlay-title {1060  font-family: "IBM Plex Mono", monospace;1061  font-size: 0.5625rem;1062  text-transform: uppercase;1063  letter-spacing: 0.18em;1064  color: var(--peach-t2);1065  flex: 1;1066  text-align: center;1067}10681069.peach-overlay-card {1070  background: var(--peach-s1);1071  border: 1px solid var(--peach-t3);1072  border-radius: 12px;1073  overflow: hidden;1074  width: 100%;1075}10761077.peach-onboarding-alt-actions {1078  display: flex;1079  flex-direction: column;1080  gap: 4px;1081  padding: 0;1082}10831084.peach-settings-copy {1085  margin: 0 0 10px;1086  font-size: 0.6875rem;1087  line-height: 1.5;1088  color: var(--peach-t2);1089}10901091.peach-settings-copy strong {1092  color: var(--peach-t0);1093}10941095.peach-settings-copy--spacious {1096  margin-bottom: 12px;1097}10981099.peach-settings-copy--result {1100  color: var(--peach-accent);1101  font-size: 0.8125rem;1102  text-align: center;1103  padding: 8px 0;1104}11051106.peach-settings-copy--danger {1107  color: var(--peach-breach);1108}11091110.peach-settings-copy--success {1111  color: var(--peach-accent);1112}11131114.peach-inline-feedback {1115  font-size: 0.6875rem;1116  margin: 10px 0 0;1117}11181119.peach-inline-feedback--ok {1120  color: var(--peach-accent);1121}11221123.peach-inline-feedback--error {1124  color: var(--peach-breach);1125}11261127.peach-inline-feedback--muted {1128  color: var(--peach-t2);1129  font-size: 0.625rem;1130  margin: 4px 0;1131}11321133.peach-inline-feedback--spaced {1134  margin-top: 12px;1135}11361137.peach-settings-actions--row {1138  display: flex;1139  gap: 6px;1140}11411142.peach-settings-actions--end {1143  margin-top: 14px;1144  justify-content: flex-end;1145}11461147.peach-settings-stack {1148  display: flex;1149  flex-direction: column;1150  gap: 6px;1151}11521153.peach-settings-stack--tight {1154  gap: 4px;1155}11561157.peach-settings-stack--spacious {1158  gap: 8px;1159}11601161.peach-settings-input {1162  width: 100%;1163  box-sizing: border-box;1164  padding: 8px 10px;1165  background: rgba(0, 0, 0, 0.22);1166  border: 1px solid transparent;1167  border-radius: 6px;1168  color: var(--peach-t0);1169  font-family: var(--font-ui);1170  font-size: 0.75rem;1171  outline: none;1172  transition: border-color 120ms ease, background 120ms ease;1173}11741175.peach-settings-input:focus {1176  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1177  background: rgba(0, 0, 0, 0.28);1178}11791180.peach-settings-input[type="password"] {1181  font-family: var(--font-mono);1182  letter-spacing: 0.04em;1183}11841185.peach-hidden-file-input {1186  display: none;1187}11881189.peach-checkbox-note {1190  display: flex;1191  align-items: flex-start;1192  gap: 8px;1193  font-size: 0.6875rem;1194  color: var(--peach-t1);1195  cursor: pointer;1196  margin: 12px 0;1197}11981199.peach-checkbox-note input {1200  margin-top: 1px;1201}12021203.peach-danger-notice {1204  background: rgba(220, 80, 60, 0.08);1205  border: 1px solid rgba(220, 80, 60, 0.2);1206  border-radius: 6px;1207  padding: 9px 11px;1208  font-size: 0.6875rem;1209  color: var(--peach-t1);1210  line-height: 1.5;1211}12121213.peach-info-notice {1214  font-size: 0.6875rem;1215  color: var(--peach-t1);1216  line-height: 1.5;1217  background: var(--surface-card);1218  border: 1px solid var(--peach-t3);1219  border-radius: 6px;1220  padding: 8px 10px;1221}12221223.peach-info-notice--warn {1224  border-color: rgba(220, 38, 38, 0.4);1225  background: rgba(220, 38, 38, 0.06);1226  color: rgba(220, 38, 38, 0.92);1227  margin-bottom: 8px;1228}12291230.peach-strength-row {1231  display: flex;1232  align-items: center;1233  gap: 8px;1234  margin-bottom: 10px;1235}12361237.peach-strength-track {1238  flex: 1;1239  height: 4px;1240  background: var(--peach-s2);1241  border-radius: 2px;1242  overflow: hidden;1243}12441245.peach-strength-fill {1246  height: 100%;1247  border-radius: 2px;1248  transition: width 120ms ease, background 120ms ease;1249}12501251/* ── Type selector tabs ── */1252.peach-type-tabs {1253  display: flex;1254  gap: 0;1255  background: var(--peach-t4);1256  border-radius: 8px;1257  padding: 3px;1258}12591260.peach-type-tab {1261  flex: 1;1262  display: flex;1263  align-items: center;1264  justify-content: center;1265  gap: 6px;1266  padding: 6px 10px;1267  border-radius: 6px;1268  border: none;1269  background: transparent;1270  cursor: pointer;1271  font-family: Inter, system-ui, sans-serif;1272  font-size: 0.6875rem;1273  font-weight: 400;1274  letter-spacing: 0.04em;1275  color: var(--peach-t1);1276  transition: background 150ms ease, color 150ms ease;1277}12781279.peach-type-tab.is-active {1280  background: var(--peach-s2);1281  color: var(--peach-t0);1282  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1283}12841285.peach-type-tab:not(.is-active):hover {1286  color: var(--peach-t0);1287}12881289.peach-type-tab svg {1290  opacity: 0.7;1291  flex-shrink: 0;1292}12931294.peach-type-tab.is-active svg {1295  opacity: 1;1296}12971298/* ── List view ───────────────────────────────────────────────────────── */1299.peach-list-top {1300  padding: 0 10px;1301  min-height: 46px;1302  display: flex;1303  align-items: center;1304  gap: 6px;1305  border-bottom: 1px solid var(--peach-t3);1306  flex-shrink: 0;1307  background: var(--peach-s1);1308}1309.peach-vault-list {1310  flex: 1;1311  overflow-y: auto;1312  scrollbar-width: none;1313}1314.peach-vault-list::-webkit-scrollbar { display: none; }13151316/* Scrollbar — vault list */1317.peach-vault-list {1318  scrollbar-width: thin;1319  scrollbar-color: var(--peach-t3) transparent;1320}13211322.peach-vault-list::-webkit-scrollbar {1323  width: 3px;1324}13251326.peach-vault-list::-webkit-scrollbar-thumb {1327  background: var(--peach-t3);1328  border-radius: 2px;1329}13301331.peach-entry-row {1332  width: 100%;1333  display: flex;1334  align-items: center;1335  gap: 10px;1336  padding: 9px 16px;1337  background: transparent;1338  border: none;1339  border-bottom: 1px solid var(--peach-t3);1340  cursor: pointer;1341  color: inherit;1342  text-align: left;1343  transition: background 80ms ease;1344}1345.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1346.peach-entry-row:last-child { border-bottom: none; }1347.peach-entry-row.is-active {1348  box-shadow: inset 2px 0 0 var(--peach-accent);1349  background: rgba(240,232,216,0.03);1350}1351.peach-entry-row:focus-visible {1352  outline: none;1353  box-shadow: 0 0 0 1px var(--peach-border-accent);1354  background: rgba(240,232,216,0.03);1355}1356.peach-entry-row-icon {1357  width: 26px; height: 26px;1358  border-radius: 7px;1359  border: 1px solid var(--peach-t3);1360  display: flex; align-items: center; justify-content: center;1361  color: var(--peach-t2);1362  flex-shrink: 0;1363}1364.peach-entry-row-icon.is-breach {1365  border-color: rgba(220,80,60,0.3);1366  color: rgba(220,80,60,0.7);1367}13681369/* Title-initials chip used as the favicon fallback for login entries whose1370 * real favicon hasn't been cached by the browser yet (freshly-imported,1371 * never-visited domains). Background colour is hashed from the title so1372 * the same entry always shows the same chip. The chip fits the same1373 * 26×26 row icon slot the favicon would take. */1374.peach-favicon-initials {1375  display: inline-flex;1376  align-items: center;1377  justify-content: center;1378  width: 100%;1379  height: 100%;1380  border-radius: 4px;1381  font-family: "IBM Plex Mono", monospace;1382  font-size: 0.5625rem;1383  font-weight: 600;1384  letter-spacing: 0.04em;1385  color: rgba(240, 232, 216, 0.92);1386  text-transform: uppercase;1387  user-select: none;1388}1389.peach-entry-row-info { flex: 1; min-width: 0; }1390.peach-entry-row-name {1391  display: block;1392  font-family: var(--font-display);1393  font-size: 1.0625rem;1394  font-style: italic;1395  font-weight: 400;1396  color: var(--peach-t0);1397  line-height: 1.2;1398  white-space: nowrap;1399  overflow: hidden;1400  text-overflow: ellipsis;1401}1402.peach-entry-row-meta {1403  display: block;1404  font-family: "IBM Plex Mono", monospace;1405  font-size: 0.5625rem;1406  color: var(--peach-t2);1407  margin-top: 1px;1408  letter-spacing: 0.05em;1409}1410.peach-entry-row-dot {1411  width: 5px; height: 5px;1412  border-radius: 50%;1413  background: rgba(220,80,60,0.7);1414  flex-shrink: 0;1415}1416.peach-new-entry-row {1417  display: flex;1418  align-items: center;1419  justify-content: center;1420  gap: 6px;1421  width: 100%;1422  padding: 11px;1423  background: transparent;1424  border: none;1425  border-top: 1px solid var(--peach-t3);1426  color: var(--peach-t2);1427  font-family: "IBM Plex Mono", monospace;1428  font-size: 0.5625rem;1429  text-transform: uppercase;1430  letter-spacing: 0.14em;1431  cursor: pointer;1432  flex-shrink: 0;1433  transition: color 120ms ease, background 120ms ease;1434}1435.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }14361437/* ── Multi-select mode ─────────────────────────────────────────────── */14381439/* Select-mode trigger button in sort bar — same shape as trash btn */1440.peach-sort-select-btn {1441  display: flex;1442  align-items: center;1443  justify-content: center;1444  padding: 3px 5px;1445  background: transparent;1446  border: none;1447  cursor: pointer;1448  color: var(--peach-t2);1449  border-radius: 4px;1450  transition: color 140ms ease, background 140ms ease;1451}1452.peach-sort-select-btn:hover {1453  color: var(--peach-t1);1454  background: var(--peach-t3);1455}14561457/* Sort bar in select mode */1458.peach-select-cancel-btn {1459  background: transparent;1460  border: none;1461  padding: 0 4px;1462  cursor: pointer;1463  font-family: "IBM Plex Mono", monospace;1464  font-size: 0.5625rem;1465  letter-spacing: 0.12em;1466  text-transform: uppercase;1467  color: var(--peach-t2);1468  transition: color 140ms ease;1469  flex-shrink: 0;1470}1471.peach-select-cancel-btn:hover { color: var(--peach-t0); }14721473.peach-select-count-label {1474  flex: 1;1475  text-align: center;1476  font-family: "IBM Plex Mono", monospace;1477  font-size: 0.5625rem;1478  letter-spacing: 0.14em;1479  text-transform: uppercase;1480  color: var(--peach-t1);1481}14821483.peach-select-all-btn {1484  background: transparent;1485  border: none;1486  padding: 0 4px;1487  cursor: pointer;1488  font-family: "IBM Plex Mono", monospace;1489  font-size: 0.5625rem;1490  letter-spacing: 0.12em;1491  text-transform: uppercase;1492  color: var(--peach-t2);1493  transition: color 140ms ease;1494  flex-shrink: 0;1495}1496.peach-select-all-btn:hover { color: var(--peach-accent); }14971498/* List in select mode */1499.peach-vault-list.is-selecting .peach-entry-row {1500  cursor: default;1501}1502.peach-vault-list.is-selecting .peach-entry-row:hover {1503  background: rgba(240,232,216,0.02);1504}1505.peach-vault-list.is-selecting .peach-entry-row.is-selected {1506  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1507}1508.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1509  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1510}15111512/* Select indicator circles in icon slot */1513.peach-entry-row-icon.is-select-icon {1514  color: var(--peach-t2);1515}1516.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1517  color: var(--peach-accent);1518}15191520/* Delete action bar at bottom (replaces new-entry row) */1521.peach-select-action-bar {1522  display: flex;1523  align-items: center;1524  justify-content: center;1525  gap: 7px;1526  width: 100%;1527  padding: 11px;1528  background: transparent;1529  border: none;1530  border-top: 1px solid var(--peach-t3);1531  color: var(--peach-t1);1532  font-family: "IBM Plex Mono", monospace;1533  font-size: 0.5625rem;1534  text-transform: uppercase;1535  letter-spacing: 0.14em;1536  cursor: pointer;1537  flex-shrink: 0;1538  transition: color 120ms ease, background 120ms ease;1539}1540.peach-select-action-bar:not(:disabled):hover {1541  color: var(--peach-t0);1542  background: rgba(220,80,60,0.06);1543}1544.peach-select-action-bar:not(:disabled):hover svg {1545  stroke: rgba(220,80,60,0.8);1546}1547.peach-select-action-bar:disabled,1548.peach-select-action-bar.is-empty {1549  color: var(--peach-t2);1550  cursor: default;1551  opacity: 0.5;1552}1553.peach-search-counter-list {1554  white-space: nowrap;1555  flex-shrink: 0;1556}1557.peach-list-empty {1558  min-height: 180px;1559  display: grid;1560  place-items: center;1561  color: var(--peach-t2);1562  font-family: "IBM Plex Mono", monospace;1563  font-size: 0.6875rem;1564}15651566/* ── Settings view ───────────────────────────────────────────────────── */1567.peach-settings-body {1568  flex: 1;1569  overflow-y: auto;1570  min-height: 0;1571  display: flex;1572  flex-direction: column;1573  padding: 2px 0 10px;1574}1575.peach-settings-group {1576  margin: 4px 10px;1577  padding: 9px 14px 11px;1578  border-radius: 12px;1579  border: 1px solid rgba(255, 255, 255, 0.07);1580  background: rgba(26, 20, 16, 0.60);1581  backdrop-filter: blur(10px) saturate(1.3);1582  -webkit-backdrop-filter: blur(10px) saturate(1.3);1583}15841585.peach-settings-group + .peach-settings-group {1586  margin-top: 6px;1587}15881589@supports not (backdrop-filter: blur(1px)) {1590  .peach-settings-group {1591    background: rgba(26, 20, 16, 0.90);1592    border-color: rgba(255, 255, 255, 0.09);1593    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1594  }1595}15961597.light .peach-settings-group,1598[data-theme="light"] .peach-settings-group {1599  background: rgba(253, 248, 244, 0.68);1600  border-color: rgba(0, 0, 0, 0.07);1601  backdrop-filter: blur(10px) saturate(1.2);1602  -webkit-backdrop-filter: blur(10px) saturate(1.2);1603}16041605@supports not (backdrop-filter: blur(1px)) {1606  .light .peach-settings-group,1607  [data-theme="light"] .peach-settings-group {1608    background: rgba(253, 248, 244, 0.95);1609    border-color: rgba(0, 0, 0, 0.09);1610  }1611}1612.peach-export-intro {1613  padding-bottom: 8px;1614}1615.peach-export-card {1616  display: grid;1617  gap: 10px;1618}1619.peach-rune-canvas {1620  border-radius: 8px;1621  background: rgba(0, 0, 0, 0.22);1622  flex: 1;1623  align-self: center;1624}1625.peach-script-input {1626  font-family: "PeachScript", monospace;1627  font-size: 0.6875rem;1628  line-height: 1.9;1629  letter-spacing: 0.06em;1630  color: var(--peach-t0);1631  background: rgba(0, 0, 0, 0.22);1632  border: none;1633  border-radius: 6px;1634  padding: 12px;1635  width: 100%;1636  min-height: 96px;1637  resize: vertical;1638  word-break: break-all;1639  scrollbar-width: none;1640  -ms-overflow-style: none;1641}16421643.peach-script-input::-webkit-scrollbar { display: none; }1644.peach-qr-canvas-wrap {1645  display: flex;1646  justify-content: center;1647  padding: 12px 0 6px;1648}1649.peach-qr-canvas-wrap canvas {1650  display: block;1651  background: #ffffff;1652  border-radius: 6px;1653  max-width: 100%;1654  height: auto;1655}1656.peach-csv-warning {1657  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1658  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1659  color: var(--peach-t0);1660  border-radius: 6px;1661  padding: 10px 12px;1662  margin-bottom: 8px;1663  font-size: 0.75rem;1664  line-height: 1.45;1665}1666.peach-export-card--primary {1667  background:1668    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1669}16701671/* Export menu — distribute the three format cards across the popup. */1672.peach-export-menu {1673  display: flex;1674  flex-direction: column;1675  flex: 1;1676  min-height: 0;1677}1678.peach-export-menu .peach-settings-group {1679  flex: 1;1680  display: flex;1681  flex-direction: column;1682  justify-content: center;1683  gap: 10px;1684}16851686/* Result view — the script-string fills the remaining vertical surface. */1687.peach-export-result-group {1688  flex: 1;1689  display: flex;1690  flex-direction: column;1691  min-height: 0;1692  border-bottom: none;1693}1694.peach-export-result-group .peach-export-card {1695  flex: 1;1696  min-height: 0;1697  display: flex;1698  flex-direction: column;1699  gap: 10px;1700}1701.peach-export-result-group .peach-export-card-copy {1702  flex-shrink: 0;1703}1704.peach-export-result-group .peach-settings-label {1705  flex-shrink: 0;1706}1707.peach-export-result-group button {1708  flex-shrink: 0;1709}1710.peach-export-card-head {1711  display: flex;1712  align-items: center;1713  justify-content: space-between;1714  gap: 10px;1715}1716.peach-export-card-copy {1717  margin: 0;1718  font-size: 0.75rem;1719  line-height: 1.55;1720  color: var(--peach-t1);1721}1722.peach-export-note {1723  margin: 0;1724  font-size: 0.625rem;1725  line-height: 1.5;1726  color: var(--peach-t2);1727}1728.peach-export-pill {1729  display: inline-flex;1730  align-items: center;1731  padding: 4px 8px;1732  border-radius: 999px;1733  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1734  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1735  color: var(--peach-accent);1736  font-family: "IBM Plex Mono", monospace;1737  font-size: 0.5rem;1738  letter-spacing: 0.12em;1739  text-transform: uppercase;1740  white-space: nowrap;1741}1742.peach-export-pill--danger {1743  border-color: rgba(220,80,60,0.22);1744  background: rgba(220,80,60,0.08);1745  color: var(--peach-breach);1746}1747.peach-export-password-stack {1748  gap: 8px;1749}1750.peach-settings-label {1751  margin: 0 0 6px;1752  font-family: "IBM Plex Mono", monospace;1753  font-size: 0.5rem;1754  text-transform: uppercase;1755  letter-spacing: 0.18em;1756  color: var(--peach-t2);1757}1758.peach-settings-row {1759  display: flex;1760  align-items: center;1761  justify-content: space-between;1762  gap: 12px;1763  min-height: 34px;1764  padding: 6px 0;1765  font-size: 0.8125rem;1766  color: var(--peach-t1);1767}1768.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1769.peach-settings-value {1770  font-family: "IBM Plex Mono", monospace;1771  font-size: 0.625rem;1772  color: var(--peach-t2);1773}17741775.peach-settings-value--status {1776  display: flex;1777  align-items: center;1778  gap: 6px;1779}17801781.peach-settings-link {1782  font-family: "IBM Plex Mono", monospace;1783  font-size: 0.625rem;1784  color: var(--peach-accent);1785  text-decoration: none;1786  cursor: pointer;1787}1788.peach-settings-link:hover {1789  text-decoration: underline;1790}17911792.peach-settings-row--stack {1793  flex-direction: column;1794  align-items: stretch;1795  gap: 6px;1796}17971798.peach-settings-row--top {1799  align-items: flex-start;1800}18011802.peach-settings-row-main {1803  display: flex;1804  flex-direction: column;1805  gap: 4px;1806  flex: 1;1807}1808.peach-toggle {1809  width: 28px; height: 16px;1810  border-radius: 999px;1811  background: var(--peach-t3);1812  border: 1px solid var(--peach-t3);1813  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1814  flex-shrink: 0;1815  transition: background 200ms ease, border-color 200ms ease;1816  cursor: pointer;1817}1818.peach-toggle.is-on {1819  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1820  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1821}1822.peach-toggle-knob {1823  width: 10px; height: 10px;1824  border-radius: 50%;1825  background: var(--peach-t2);1826  flex-shrink: 0;1827  transform: translateX(0px);1828  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1829}1830.peach-toggle.is-on .peach-toggle-knob {1831  background: var(--peach-accent);1832  transform: translateX(12px);1833}1834.peach-settings-footer {1835  display: flex;1836  align-items: center;1837  gap: 8px;1838  margin-top: auto;1839  padding: 14px 16px 8px;1840  font-family: "IBM Plex Mono", monospace;1841  font-size: 0.5625rem;1842  color: var(--peach-t2);1843}18441845/* ── Settings home navigation ──────────────────────────────────────────── */1846.peach-settings-nav-label {1847  margin: 0 0 2px;1848  padding: 12px 16px 4px;1849  font-family: "IBM Plex Mono", monospace;1850  font-size: 0.5rem;1851  text-transform: uppercase;1852  letter-spacing: 0.18em;1853  color: var(--peach-t2);1854}18551856.peach-settings-cat-row {1857  display: flex;1858  align-items: center;1859  gap: 10px;1860  width: 100%;1861  padding: 9px 16px;1862  background: none;1863  border: none;1864  border-bottom: 1px solid var(--peach-t3);1865  cursor: pointer;1866  text-align: left;1867  color: inherit;1868  transition: background var(--peach-dur-80) ease;1869}1870.peach-settings-cat-row:hover {1871  background: var(--peach-t3);1872}1873.peach-settings-cat-row:last-child {1874  border-bottom: none;1875}18761877.peach-settings-cat-icon {1878  width: 28px;1879  height: 28px;1880  border-radius: 7px;1881  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1882  color: var(--peach-accent);1883  display: flex;1884  align-items: center;1885  justify-content: center;1886  flex-shrink: 0;1887}1888/* Light theme: peach-on-cream is too low-contrast — both colors are warm.1889   Darken the icon stroke to ink and bump the bg tint so the icon reads1890   sharply while the cell still feels accent-tinted. */1891.light .peach-settings-cat-icon {1892  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);1893  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));1894}18951896.peach-settings-cat-content {1897  flex: 1;1898  display: flex;1899  flex-direction: column;1900  gap: 2px;1901  min-width: 0;1902}19031904.peach-settings-cat-name {1905  font-size: 0.8125rem;1906  font-weight: 450;1907  color: var(--peach-t0);1908  line-height: 1.2;1909}19101911.peach-settings-cat-desc {1912  font-size: 0.625rem;1913  color: var(--peach-t2);1914  line-height: 1.3;1915  white-space: nowrap;1916  overflow: hidden;1917  text-overflow: ellipsis;1918}19191920.peach-settings-cat-chevron {1921  color: var(--peach-t2);1922  flex-shrink: 0;1923  opacity: 0.5;1924}19251926/* ── Settings sub-view section labels ──────────────────────────────────── */1927.peach-settings-sub-label {1928  margin: 12px 0 4px;1929  font-family: "IBM Plex Mono", monospace;1930  font-size: 0.5rem;1931  text-transform: uppercase;1932  letter-spacing: 0.18em;1933  color: var(--peach-t2);1934}1935.peach-settings-sub-label:first-child {1936  margin-top: 4px;1937}19381939/* ── Settings: collapsible Advanced section ─────────────────────────────── */1940.peach-settings-advanced-toggle {1941  display: flex;1942  align-items: center;1943  justify-content: space-between;1944  width: 100%;1945  background: none;1946  border: none;1947  cursor: pointer;1948  padding: 12px 0 4px;1949  margin: 0;1950  color: inherit;1951}1952.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {1953  color: var(--peach-t1);1954}1955.peach-settings-advanced-chevron {1956  font-size: 0.5625rem;1957  color: var(--peach-t3);1958  letter-spacing: 0;1959  transition: color 120ms ease;1960}19611962/* ── Feedback form ──────────────────────────────────────────────────────── */1963.peach-feedback-group {1964  flex: 1;1965  display: flex;1966  flex-direction: column;1967  border-bottom: none;1968}19691970.peach-feedback-intro {1971  margin: 4px 0 14px;1972  font-size: 0.75rem;1973  line-height: 1.55;1974  color: var(--peach-t1);1975}19761977.peach-feedback-chips {1978  display: flex;1979  flex-wrap: wrap;1980  gap: 6px;1981  margin-bottom: 14px;1982}19831984.peach-feedback-chip {1985  padding: 4px 10px;1986  border-radius: 999px;1987  border: 1px solid var(--peach-t3);1988  background: none;1989  color: var(--peach-t2);1990  font-size: 0.6875rem;1991  font-family: var(--font-ui);1992  cursor: pointer;1993  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,1994    background var(--peach-dur-80) ease;1995}1996.peach-feedback-chip:hover {1997  border-color: var(--peach-t2);1998  color: var(--peach-t1);1999}2000.peach-feedback-chip.is-active {2001  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);2002  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2003  color: var(--peach-accent);2004}20052006.peach-feedback-textarea {2007  flex: 1;2008  width: 100%;2009  min-height: 120px;2010  box-sizing: border-box;2011  background: rgba(0, 0, 0, 0.22);2012  border: 1px solid transparent;2013  border-radius: 6px;2014  color: var(--peach-t0);2015  font-size: 0.75rem;2016  font-family: var(--font-ui);2017  line-height: 1.5;2018  padding: 8px 10px;2019  resize: none;2020  outline: none;2021  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2022}2023.peach-feedback-textarea:focus {2024  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2025  background: rgba(0, 0, 0, 0.28);2026}2027.peach-feedback-textarea:focus {2028  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2029}2030.peach-feedback-textarea::placeholder {2031  color: var(--peach-t2);2032}20332034.peach-feedback-meta {2035  margin: 6px 0 0;2036  font-size: 0.625rem;2037  color: var(--peach-t2);2038  font-family: "IBM Plex Mono", monospace;2039}20402041.peach-feedback-result {2042  margin: 8px 0 0;2043  font-size: 0.6875rem;2044  font-family: "IBM Plex Mono", monospace;2045}2046.peach-feedback-result--ok { color: var(--peach-sync-ok); }2047.peach-feedback-result--err { color: var(--peach-breach); }20482049.peach-feedback-submit {2050  width: 100%;2051  margin-top: 12px;2052  justify-content: center;2053}20542055.peach-feedback-anon {2056  margin: 8px 0 0;2057  font-size: 0.625rem;2058  color: var(--peach-t2);2059  text-align: center;2060}20612062.peach-passkey-badge {2063  margin-left: 8px;2064  font-size: 0.625rem;2065  letter-spacing: 0.06em;2066  text-transform: uppercase;2067  color: var(--peach-t2);2068  font-family: var(--font-ui);2069  vertical-align: middle;2070}20712072.peach-passkey-delete-btn {2073  color: var(--peach-breach);2074  border-color: rgba(229, 85, 85, 0.25);2075}20762077.peach-passkey-delete-confirm {2078  display: flex;2079  align-items: center;2080  gap: 8px;2081  padding: 8px 10px;2082  background: rgba(229, 85, 85, 0.06);2083  border: 1px solid rgba(229, 85, 85, 0.2);2084  border-radius: 6px;2085}20862087.peach-passkey-delete-confirm-copy {2088  flex: 1;2089  font-size: 0.6875rem;2090  color: var(--peach-t1);2091}20922093.peach-passkey-delete-btn--confirm {2094  color: var(--peach-breach);2095  border-color: rgba(229, 85, 85, 0.4);2096}20972098.peach-passkey-activity {2099  flex-direction: column;2100  align-items: flex-start;2101  gap: 4px;2102}21032104.peach-passkey-meta {2105  font-size: 0.6875rem;2106  color: var(--peach-t2);2107}21082109.peach-passkey-actions {2110  position: relative;2111  z-index: 1;2112  margin-top: 14px;2113  display: flex;2114  flex-direction: column;2115  gap: 8px;2116}21172118.peach-passkey-approval {2119  display: flex;2120  flex-direction: column;2121  align-items: center;2122  padding: 22px 20px 18px;2123  gap: 10px;2124  text-align: center;2125}21262127.peach-passkey-approval-icon {2128  width: 46px;2129  height: 46px;2130  border-radius: 12px;2131  background: var(--peach-s2);2132  border: 1px solid var(--peach-t3);2133  display: flex;2134  align-items: center;2135  justify-content: center;2136  flex-shrink: 0;2137  color: var(--peach-accent);2138}21392140.peach-passkey-approval-icon img,2141.peach-passkey-approval-icon svg {2142  width: 28px;2143  height: 28px;2144  border-radius: 6px;2145}21462147.peach-passkey-approval-rp {2148  font-family: var(--font-ui);2149  font-size: 0.75rem;2150  color: var(--peach-t2);2151  letter-spacing: 0.03em;2152}21532154.peach-passkey-approval-action {2155  font-family: var(--font-display);2156  font-style: italic;2157  font-weight: 300;2158  font-size: 22px;2159  color: var(--peach-t0);2160  line-height: 1.1;2161  margin: 2px 0;2162}21632164.peach-passkey-approval-user {2165  font-family: var(--font-mono);2166  font-size: 0.6875rem;2167  color: var(--peach-t1);2168  background: var(--peach-s2);2169  border: 1px solid var(--peach-t3);2170  border-radius: 4px;2171  padding: 3px 8px;2172}21732174.peach-passkey-approval-notice {2175  font-size: 0.625rem;2176  color: var(--peach-t2);2177  line-height: 1.5;2178  max-width: 220px;2179}21802181.peach-passkey-approval-actions {2182  display: flex;2183  gap: 8px;2184  width: 100%;2185  margin-top: 6px;2186}21872188.peach-passkey-approval-actions .peach-btn {2189  flex: 1;2190}21912192/* ── Inline generator drawer ── */2193.peach-generator-drawer {2194  display: grid;2195  grid-template-rows: 0fr;2196  transition: grid-template-rows 320ms var(--peach-curve-arrival);2197  overflow: hidden;2198}2199.peach-generator-drawer.is-open {2200  grid-template-rows: 1fr;2201}2202.peach-generator-drawer-inner {2203  min-height: 0;2204  overflow: hidden;2205}2206.peach-generator-drawer-content {2207  border-top: 1px solid var(--peach-t3);2208  padding: 8px 0 4px;2209  display: flex;2210  flex-direction: column;2211  gap: 8px;2212}22132214/* ── Compact generator (inside entry edit) ── */2215.peach-generator-drawer-content--compact {2216  border-top: 1px solid var(--peach-t3);2217  padding: 8px 0 2px;2218  gap: 7px;2219}2220.peach-pwgen-compact-display-row {2221  display: flex;2222  align-items: center;2223  gap: 6px;2224}2225.peach-pwgen-compact-output {2226  flex: 1;2227  min-width: 0;2228  font-family: "IBM Plex Mono", monospace;2229  font-size: 0.6875rem;2230  font-weight: 400;2231  letter-spacing: 0.04em;2232  color: var(--peach-t0);2233  background: rgba(240, 232, 216, 0.04);2234  border: 1px solid var(--peach-t3);2235  border-radius: 5px;2236  padding: 5px 8px;2237  word-break: break-all;2238  line-height: 1.5;2239}2240.peach-pwgen-compact-controls {2241  display: flex;2242  align-items: center;2243  gap: 6px;2244}2245.peach-pwgen-compact-slider {2246  flex: 1;2247  min-width: 0;2248  height: 2px !important;2249}2250.peach-pwgen-compact-controls .peach-pwgen-len-num {2251  flex-shrink: 0;2252  min-width: 18px;2253  text-align: right;2254}2255.peach-pwgen-compact-pills {2256  display: flex;2257  gap: 3px;2258  flex-shrink: 0;2259}2260.peach-pwgen-compact-pills .peach-pwgen-pill {2261  padding: 2px 7px;2262  font-size: 0.5rem;2263}2264.peach-pwgen-compact-use {2265  flex-shrink: 0;2266  font-size: 0.625rem !important;2267  padding: 3px 9px !important;2268  min-height: 22px !important;2269  border-radius: 5px !important;2270}22712272/* ── Password edit row (input + eye toggle side-by-side) ── */2273.peach-password-edit-row {2274  display: flex;2275  align-items: center;2276  gap: 6px;2277}2278.peach-password-edit-row .peach-inline-input {2279  flex: 1;2280  min-width: 0;2281}22822283/* ── Generate toggle link ── */2284.peach-generate-toggle-link {2285  display: inline-flex;2286  align-items: center;2287  gap: 5px;2288  background: none;2289  border: none;2290  padding: 0;2291  cursor: pointer;2292  font-family: "IBM Plex Mono", monospace;2293  font-size: 0.625rem;2294  color: var(--peach-t2);2295  letter-spacing: 0.04em;2296  transition: color 120ms ease;2297  align-self: flex-start;2298}2299.peach-generate-toggle-link:hover {2300  color: var(--peach-accent);2301}23022303/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2304.peach-entry-body {2305  flex: 1;2306  overflow-y: auto;2307  overflow-x: hidden;2308  scrollbar-width: none;2309  -ms-overflow-style: none;2310  overscroll-behavior: contain;2311  display: grid;2312  gap: 10px;2313  align-content: start;2314  padding: 10px 20px 14px;2315  min-width: 0;2316  min-height: 0;2317}2318.peach-entry-body::-webkit-scrollbar { display: none; }23192320/* Type-toggle pills + inline note toolbar */2321.peach-new-type-row {2322  display: flex;2323  align-items: center;2324  gap: 6px;2325  margin-bottom: 2px;2326}2327.peach-new-type-btn {2328  background: transparent;2329  border: 1px solid var(--peach-t3);2330  border-radius: 12px;2331  padding: 3px 10px;2332  font-family: "IBM Plex Mono", monospace;2333  font-size: 0.5625rem;2334  letter-spacing: 0.12em;2335  text-transform: uppercase;2336  color: var(--peach-t2);2337  cursor: pointer;2338  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2339}2340.peach-new-type-btn.is-active {2341  color: var(--peach-t0);2342  border-color: var(--peach-accent);2343  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2344}2345.peach-new-type-btn:not(.is-active):hover {2346  color: var(--peach-t1);2347  border-color: var(--peach-t2);2348}23492350/* Editable title */2351.peach-new-title-wrap { margin: 0 0 2px; }2352.peach-new-title-input {2353  background: transparent;2354  border: none;2355  outline: none;2356  width: 100%;2357  color: var(--peach-t0);2358  font-family: var(--font-display);2359  font-style: italic;2360  font-weight: 400;2361  font-size: 40px;2362  line-height: 0.95;2363  caret-color: var(--peach-accent);2364}2365.peach-new-title-input::placeholder { color: var(--peach-t2); }23662367/* Editable domain field */2368.peach-domain-value--edit {2369  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2370  font-size: 0.625rem;2371  font-style: italic;2372  letter-spacing: 0.12em;2373  color: var(--peach-t1);2374  background: transparent;2375  border: none;2376  border-bottom: 1px solid var(--peach-t3);2377  outline: none;2378  width: 100%;2379  padding: 2px 0;2380  caret-color: var(--peach-accent);2381  transition: border-color 140ms ease, color 140ms ease;2382}2383.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2384.peach-domain-value--edit:focus {2385  border-bottom-color: rgba(240, 232, 216, 0.28);2386  color: var(--peach-t0);2387}23882389/* Editable field values (username, password, totp) */2390.peach-field-value--edit {2391  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2392  font-size: 0.8125rem;2393  color: var(--peach-t0);2394  background: transparent;2395  border: none;2396  border-bottom: 1px solid var(--peach-t3);2397  outline: none;2398  flex: 1;2399  min-width: 0;2400  padding: 3px 0;2401  caret-color: var(--peach-accent);2402  transition: border-color 140ms ease, color 140ms ease;2403}2404.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2405.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2406.peach-field-value--edit:focus {2407  border-bottom-color: rgba(240, 232, 216, 0.28);2408  color: var(--peach-t0);2409}24102411/* "+ add optional field" links */2412.peach-entry-add-links {2413  display: flex;2414  gap: 12px;2415  flex-wrap: wrap;2416  margin-top: -2px;2417}2418.peach-add-field-link {2419  background: transparent;2420  border: none;2421  padding: 0;2422  cursor: pointer;2423  font-family: "IBM Plex Mono", monospace;2424  font-size: 0.5625rem;2425  letter-spacing: 0.1em;2426  text-transform: uppercase;2427  color: var(--peach-t2);2428  transition: color 140ms ease;2429}2430.peach-add-field-link:hover { color: var(--peach-accent); }24312432/* ── New entry form (legacy classes) ────────────────────────────────── */2433.peach-new-body {2434  flex: 1;2435  overflow-y: auto;2436  padding: 10px 20px 14px;2437}2438.peach-new-name-input {2439  background: transparent;2440  border: none;2441  outline: none;2442  width: 100%;2443  color: var(--peach-t0);2444  font-family: var(--font-display);2445  font-style: italic;2446  font-weight: 400;2447  font-size: 40px;2448  line-height: 0.95;2449  caret-color: var(--peach-accent);2450}2451.peach-new-name-input::placeholder { color: var(--peach-t2); }2452.peach-new-field-input {2453  background: transparent;2454  border: none;2455  outline: none;2456  flex: 1;2457  min-width: 0;2458  caret-color: var(--peach-accent);2459}2460.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }24612462/* ── Canary card ── */2463.peach-canary-card {2464  border: 1px solid rgba(217, 160, 48, 0.2);2465  background: rgba(217, 160, 48, 0.03);2466  border-radius: 8px;2467  padding: 12px;2468}24692470.peach-canary-settings-header {2471  display: flex;2472  align-items: center;2473  justify-content: space-between;2474  cursor: pointer;2475  user-select: none;2476}24772478.peach-canary-card .peach-label {2479  color: rgba(217, 160, 48, 0.85);2480}24812482.peach-canary-card .peach-new-field-input {2483  border-color: rgba(217, 160, 48, 0.25);2484}24852486.peach-canary-card .peach-new-field-input:focus {2487  border-color: rgba(217, 160, 48, 0.5);2488}24892490.peach-canary-body {2491  margin-top: 12px;2492  display: flex;2493  flex-direction: column;2494  gap: 10px;2495}24962497.peach-canary-explainer {2498  display: flex;2499  gap: 10px;2500  padding: 10px 12px;2501  border-radius: 10px;2502  background: rgba(217, 160, 48, 0.06);2503  border: 1px solid rgba(217, 160, 48, 0.22);2504  margin-bottom: 4px;2505}25062507.peach-canary-explainer-icon {2508  font-size: 1rem;2509  flex-shrink: 0;2510  line-height: 1.2;2511}25122513.peach-canary-explainer-title {2514  font-family: var(--font-ui);2515  font-size: 0.6875rem;2516  font-weight: 500;2517  color: rgba(217, 160, 48, 0.9);2518  margin: 0 0 3px;2519}25202521.peach-canary-explainer-copy {2522  font-family: var(--font-ui);2523  font-size: 0.625rem;2524  color: var(--peach-t2);2525  line-height: 1.55;2526  margin: 0;2527}25282529.peach-canary-hint {2530  font-size: 0.625rem;2531  color: var(--peach-t2);2532  font-family: Inter, system-ui, sans-serif;2533  line-height: 1.5;2534  margin-top: 4px;2535}25362537.peach-canary-actions-row {2538  display: flex;2539  align-items: center;2540  gap: 8px;2541}25422543.peach-canary-test-btn {2544  border-color: rgba(217, 160, 48, 0.3);2545  color: rgba(217, 160, 48, 0.85);2546}25472548.peach-canary-test-result {2549  font-size: 0.625rem;2550  font-family: Inter, system-ui, sans-serif;2551}25522553.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2554.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }25552556.peach-canary-badge {2557  display: flex;2558  position: relative;2559  z-index: 1;2560  align-items: center;2561  gap: 5px;2562  padding: 4px 10px;2563  background: rgba(217, 160, 48, 0.12);2564  border: 1px solid rgba(217, 160, 48, 0.35);2565  border-radius: 6px;2566  margin-bottom: 6px;2567  width: fit-content;2568}25692570.peach-canary-badge-label {2571  font-size: 0.625rem;2572  letter-spacing: 0.06em;2573  color: rgba(217, 160, 48, 0.9);2574  font-family: var(--font-ui);2575  text-transform: uppercase;2576}25772578.peach-canary-badge-icon {2579  font-size: 0.6875rem;2580}25812582.peach-canary-suppress-row {2583  display: flex;2584  align-items: center;2585  gap: 8px;2586  padding: 6px 10px;2587  background: rgba(217, 160, 48, 0.08);2588  border-radius: 6px;2589  margin-bottom: 8px;2590}25912592.peach-canary-suppress-label {2593  font-size: 0.6875rem;2594  color: rgba(217, 160, 48, 0.85);2595  cursor: pointer;2596  font-family: var(--font-ui);2597  letter-spacing: 0.04em;2598}25992600.peach-regen-panel {2601  position: relative;2602  z-index: 1;2603  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2604  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2605  border-radius: 8px;2606  padding: 12px;2607  margin-bottom: 8px;2608}26092610.peach-regen-panel-header {2611  display: flex;2612  align-items: center;2613  justify-content: space-between;2614  margin-bottom: 10px;2615}26162617.peach-regen-panel-title {2618  font-size: 0.6875rem;2619  font-weight: 600;2620  letter-spacing: 0.06em;2621  text-transform: uppercase;2622  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2623}26242625.peach-regen-output {2626  background: rgba(0, 0, 0, 0.2);2627  border-radius: 6px;2628  padding: 10px;2629  margin-bottom: 10px;2630  font-family: var(--font-mono);2631  font-size: 0.8125rem;2632  word-break: break-all;2633  color: var(--peach-t1);2634}26352636.peach-regen-actions {2637  display: flex;2638  gap: 6px;2639}26402641.peach-regen-actions--spaced {2642  margin-bottom: 8px;2643}26442645.peach-regen-action-grow {2646  flex: 1;2647}26482649.peach-regen-copy-btn {2650  padding: 0 8px;2651}26522653.peach-regen-success {2654  position: relative;2655  z-index: 1;2656  background: rgba(40, 180, 80, 0.1);2657  border: 1px solid rgba(40, 180, 80, 0.3);2658  border-radius: 8px;2659  padding: 10px 12px;2660  margin-bottom: 8px;2661  display: flex;2662  align-items: center;2663  gap: 8px;2664  font-size: 0.6875rem;2665  color: rgba(40, 180, 80, 0.9);2666}26672668/* ── Note editor overlay ── */2669.peach-note-editor {2670  position: absolute;2671  inset: 0;2672  z-index: 200;2673  display: flex;2674  flex-direction: column;2675  background:2676    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2677    var(--peach-bg);2678  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2679}26802681.peach-note-editor-header {2682  display: flex;2683  align-items: center;2684  gap: 10px;2685  padding: 14px 16px 10px;2686  border-bottom: 1px solid var(--peach-t3);2687  flex-shrink: 0;2688}26892690.peach-note-editor-back {2691  background: transparent;2692  border: none;2693  cursor: pointer;2694  color: var(--peach-t2);2695  padding: 4px 6px;2696  border-radius: 6px;2697  display: flex;2698  align-items: center;2699  transition: color 120ms ease, background 120ms ease;2700  flex-shrink: 0;2701}2702.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }27032704.peach-note-editor-label {2705  flex: 1;2706  font-family: var(--font-display);2707  font-style: italic;2708  font-size: 0.9375rem;2709  color: var(--peach-t1);2710  letter-spacing: 0.02em;2711}27122713.peach-note-editor-save-btn {2714  background: transparent;2715  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2716  border-radius: 8px;2717  color: var(--peach-accent);2718  font-family: "IBM Plex Mono", monospace;2719  font-size: 0.625rem;2720  letter-spacing: 0.06em;2721  text-transform: uppercase;2722  padding: 3px 10px;2723  cursor: pointer;2724  transition: background 120ms ease, border-color 120ms ease;2725}2726.peach-note-editor-save-btn:hover:not(:disabled) {2727  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2728  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2729}2730.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }27312732.peach-note-toolbar {2733  display: flex;2734  align-items: center;2735  gap: 3px;2736  padding: 6px 14px 5px;2737  border-bottom: 1px solid var(--peach-t3);2738  flex-shrink: 0;2739}27402741.peach-note-tool-btn {2742  background: transparent;2743  border: 1px solid transparent;2744  border-radius: 5px;2745  color: var(--peach-t2);2746  font-family: "IBM Plex Mono", monospace;2747  font-size: 0.625rem;2748  letter-spacing: 0.04em;2749  padding: 2px 8px;2750  cursor: pointer;2751  line-height: 1.6;2752  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2753}2754.peach-note-tool-btn:hover {2755  background: var(--peach-t4);2756  color: var(--peach-t0);2757  border-color: var(--peach-t3);2758}27592760.peach-note-tool-icon {2761  padding: 3px 7px;2762  display: inline-flex;2763  align-items: center;2764  justify-content: center;2765}27662767.peach-note-tool-divider {2768  width: 1px;2769  height: 14px;2770  background: var(--peach-t3);2771  margin: 0 4px;2772  flex-shrink: 0;2773}27742775.peach-note-editor-body {2776  flex: 1;2777  overflow-y: auto;2778  padding: 16px 20px 20px;2779  outline: none;2780  font-family: var(--font-display);2781  font-size: 1rem;2782  line-height: 1.75;2783  color: var(--peach-t0);2784  scrollbar-width: none;2785  word-break: break-word;2786}2787.peach-note-editor-body:empty::before {2788  content: "write your note…";2789  color: var(--peach-t3);2790  font-style: italic;2791  pointer-events: none;2792}27932794/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2795.peach-note-editor-inline {2796  display: flex;2797  flex-direction: column;2798  flex: 1;2799  min-height: 0;2800}2801.peach-note-editor-body--inline {2802  flex: 1;2803  min-height: 0;2804  font-size: 0.9375rem;2805  padding: 10px 20px 14px;2806}28072808/* Full-width toolbar row inside the body (Add.tsx note type).2809   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */2810.peach-note-toolbar-body {2811  display: flex;2812  align-items: center;2813  gap: 3px;2814  padding: 5px 20px 4px;2815  margin: 2px -20px 0;2816  border-bottom: 1px solid var(--peach-t3);2817  flex-shrink: 0;2818}28192820/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2821   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2822   and .peach-note-tool-divider button-level styles. */2823.peach-note-toolbar-inline {2824  display: flex;2825  align-items: center;2826  gap: 3px;2827  margin-left: auto;2828  padding-left: 10px;2829  border-left: 1px solid var(--peach-t3);2830  min-height: 22px;2831}28322833/* Entry.tsx toolbar row (no tabs, toolbar only) */2834.peach-entry-note-toolbar-row {2835  display: flex;2836  align-items: center;2837  margin: 4px 0 6px;2838  position: relative;2839  z-index: 1;2840}2841.peach-entry-note-toolbar-row .peach-note-toolbar-inline {2842  border-left: none;2843  padding-left: 0;2844  margin-left: 0;2845}28462847/* Note body — fills available vertical space in Add.tsx and Entry.tsx */2848.peach-note-body {2849  display: flex;2850  flex-direction: column;2851  flex: 1;2852  min-height: 0;2853  margin: 4px 0 0;2854}2855.peach-entry-body--new .peach-note-body {2856  margin: 8px -20px 0;2857}28582859/* Add.tsx body is a grid by default; swap to a flex column when a note is2860   active so the note body can stretch and pin the tags row to the bottom. */2861.peach-entry-body--new:has(.peach-note-body) {2862  display: flex;2863  flex-direction: column;2864}28652866/* Rich content element styles (editor + display) */2867.peach-note-editor-body h2,2868.peach-note-content h2 {2869  font-family: var(--font-display);2870  font-size: 20px;2871  font-weight: 600;2872  font-style: italic;2873  color: var(--peach-t0);2874  margin: 6px 0 2px;2875  line-height: 1.3;2876}2877.peach-note-editor-body ul,2878.peach-note-content ul {2879  padding-left: 18px;2880  margin: 3px 0;2881  list-style: disc;2882}2883.peach-note-editor-body ol,2884.peach-note-content ol {2885  padding-left: 18px;2886  margin: 3px 0;2887  list-style: decimal;2888}2889.peach-note-editor-body li,2890.peach-note-content li { margin: 2px 0; }2891.peach-note-editor-body hr,2892.peach-note-content hr {2893  border: none;2894  border-top: 1px solid var(--peach-t3);2895  margin: 10px 0;2896}28972898/* font size elements from execCommand */2899.peach-note-editor-body font[size="1"],2900.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }2901.peach-note-editor-body font[size="2"],2902.peach-note-content font[size="2"] { font-size: 0.8125rem; }2903.peach-note-editor-body font[size="3"],2904.peach-note-content font[size="3"] { font-size: 1rem; }2905.peach-note-editor-body font[size="4"],2906.peach-note-content font[size="4"] { font-size: 20px; }2907.peach-note-editor-body font[size="5"],2908.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }29092910/* bold / italic inside the editor and note display */2911.peach-note-editor-body b, .peach-note-editor-body strong,2912.peach-note-content b, .peach-note-content strong { font-weight: 700; }2913.peach-note-editor-body em, .peach-note-editor-body i,2914.peach-note-content em, .peach-note-content i { font-style: italic; }29152916/* note display — rendered HTML, no pre-wrap */2917.peach-note-content {2918  overflow: auto;2919  max-height: 340px;2920  word-break: break-word;2921}29222923/* ── Note textarea ── */2924.peach-note-textarea {2925  width: 100%;2926  min-height: 180px;2927  max-height: 280px;2928  resize: vertical;2929  background: var(--peach-t4);2930  border: 1px solid var(--peach-t3);2931  border-radius: 8px;2932  padding: 10px 12px;2933  font-family: "IBM Plex Mono", monospace;2934  font-size: 0.75rem;2935  line-height: 1.7;2936  color: var(--peach-t1);2937  outline: none;2938  transition: border-color 150ms ease;2939}29402941.peach-note-textarea:focus {2942  border-color: var(--peach-t2);2943}29442945.peach-note-char-count {2946  font-family: "IBM Plex Mono", monospace;2947  font-size: 0.5625rem;2948  color: var(--peach-t3);2949  text-align: right;2950  margin-top: 4px;2951  letter-spacing: 0.1em;2952}29532954/* ── Field input baseline ── */2955.peach-new-field-input {2956  width: 100%;2957  background: transparent;2958  border: none;2959  border-bottom: 1px solid var(--peach-t3);2960  padding: 4px 0;2961  color: var(--peach-t1);2962  font-family: "IBM Plex Mono", monospace;2963  font-size: 0.8125rem;2964  outline: none;2965  transition: border-color 150ms ease;2966}29672968.peach-new-field-input:focus {2969  border-bottom-color: var(--peach-t0);2970  color: var(--peach-t0);2971}29722973.peach-new-name-input {2974  width: 100%;2975  background: transparent;2976  border: none;2977  border-bottom: 1px solid var(--peach-t3);2978  padding: 6px 0;2979  font-family: var(--font-display);2980  font-style: italic;2981  font-size: 28px;2982  color: var(--peach-t0);2983  outline: none;2984  transition: border-color 150ms ease;2985}29862987.peach-new-name-input:focus {2988  border-bottom-color: var(--peach-t1);2989}29902991.peach-new-name-input::placeholder {2992  color: var(--peach-t2);2993  font-style: italic;2994}29952996.peach-new-field-input::placeholder {2997  color: var(--peach-t3);2998}29993000/* ── Demo entrance animation ── */3001#hd-shell {3002  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3003}3004@keyframes hd-shell-enter {3005  from { opacity: 0; transform: scale(0.96) translateY(16px); }3006  to   { opacity: 1; transform: scale(1) translateY(0); }3007}30083009/* ── Keyframes ── */3010@keyframes peach-char-enter {3011  from { opacity: 0; transform: translateY(0.22em); }3012  to   { opacity: 1; transform: translateY(0); }3013}3014@keyframes peach-content-enter {3015  from { opacity: 0.96; transform: translateY(4px); }3016  to   { opacity: 1; transform: translateY(0); }3017}3018@keyframes peach-content-exit {3019  from { opacity: 1; transform: translateY(0); }3020  to   { opacity: 0.92; transform: translateY(-3px); }3021}3022@keyframes peach-screen-enter {3023  from { opacity: 0; transform: translateY(14px); }3024  to   { opacity: 1; transform: translateY(0); }3025}3026@keyframes peach-shell-fade-in {3027  from { opacity: 0; }3028  to   { opacity: 1; }3029}3030@keyframes peach-veil-in {3031  from { opacity: 0; }3032  to   { opacity: 1; }3033}3034@keyframes peach-lock-settle {3035  0%   { transform: scale(0.9); }3036  65%  { transform: scale(1.08); }3037  100% { transform: scale(1); }3038}3039@keyframes peach-copy-confirm {3040  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3041  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); }3042}3043@keyframes peach-copy-retreat {3044  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); }3045  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3046}3047@keyframes peach-copy-flood {3048  from { opacity: 0; transform: scaleX(0.15); }3049  to   { opacity: 1; transform: scaleX(1); }3050}3051@keyframes peach-copy-icon-settle {3052  from  { transform: scale(0.84); }3053  70%   { transform: scale(1.08); }3054  to    { transform: scale(1); }3055}3056@keyframes peach-copy-sheen-retreat {3057  from { opacity: 1; transform: scaleX(1); }3058  to   { opacity: 0; transform: scaleX(0.15); }3059}3060@keyframes peach-copy-drain {3061  from { width: 100%; }3062  to   { width: 0; }3063}3064@keyframes peach-shake {3065  0%, 100% { transform: translateX(0); }3066  20%      { transform: translateX(-6px); }3067  40%      { transform: translateX(6px); }3068  60%      { transform: translateX(-4px); }3069  80%      { transform: translateX(4px); }3070}30713072@keyframes pip-pulse {3073  0% { transform: scale(1); }3074  40% { transform: scale(2.2); }3075  100% { transform: scale(1); }3076}307730783079/* ── Password generator ── */3080.peach-pwgen-body {3081  flex: 1; overflow-y: auto;3082  display: flex; flex-direction: column;3083}3084.peach-policy-badge {3085  display: flex; align-items: center;3086  padding: 6px 20px 0;3087  font-size: 0.625rem; font-family: Inter, sans-serif;3088  color: var(--peach-t2); letter-spacing: 0.04em;3089}3090.peach-pwgen-display {3091  padding: 14px 20px 12px;3092  border-bottom: 1px solid var(--peach-t3);3093  display: flex; align-items: flex-start; gap: 10px;3094}3095.peach-pwgen-display-row {3096  display: flex;3097  align-items: flex-start;3098  gap: 8px;3099  padding-bottom: 8px;3100  border-bottom: 1px solid var(--peach-t3);3101}3102.peach-pwgen-output {3103  flex: 1; min-width: 0; margin: 0;3104  font-family: "IBM Plex Mono", monospace;3105  font-size: 0.8125rem; color: var(--peach-t0);3106  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3107  white-space: normal;3108  padding: 10px 12px;3109  background: var(--peach-t4);3110  border-radius: 6px;3111  min-height: 36px;3112}3113.peach-pwgen-output-display {3114  flex: 1;3115  min-width: 0;3116  margin: 0;3117  font-family: var(--font-display);3118  font-style: italic;3119  font-weight: 300;3120  font-size: 32px;3121  line-height: 1.05;3122  color: var(--peach-t0);3123  word-break: break-all;3124  overflow-wrap: break-word;3125  white-space: normal;3126  letter-spacing: 0.02em;3127}3128.peach-pwgen-display-actions {3129  display: flex;3130  flex-direction: column;3131  gap: 4px;3132  flex-shrink: 0;3133  margin-top: 2px;3134}3135.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3136.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3137.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3138.peach-pwgen-len-num {3139  font-family: "IBM Plex Mono", monospace;3140  font-size: 0.75rem; color: var(--peach-accent);3141}3142.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3143.peach-pwgen-toggles { display: flex; flex-direction: column; }3144.peach-pwgen-charset-pills {3145  display: flex;3146  gap: 6px;3147  flex-wrap: wrap;3148}3149.peach-pwgen-pill {3150  padding: 4px 11px;3151  border-radius: 999px;3152  border: 1px solid var(--peach-t3);3153  background: transparent;3154  color: var(--peach-t2);3155  font-family: "IBM Plex Mono", monospace;3156  font-size: 0.5625rem;3157  letter-spacing: 0.08em;3158  cursor: pointer;3159  transition: all 150ms ease;3160}3161.peach-pwgen-pill.is-on {3162  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3163  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3164  color: var(--peach-accent);3165}3166.peach-pwgen-pill:not(.is-on):hover {3167  color: var(--peach-t1);3168  border-color: var(--peach-t2);3169}3170.peach-pwgen-use-btn {3171  width: 100%;3172  min-height: 34px;3173  border-radius: 8px;3174  margin-top: 2px;3175}3176.peach-pwgen-toggle-row {3177  display: flex; align-items: center; justify-content: space-between;3178  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3179}3180.peach-pwgen-toggle-row:last-child { border-bottom: none; }3181.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }31823183.peach-screen-prelock {3184  z-index: 10;3185}31863187.prelock-form {3188  display: grid;3189  gap: 12px;3190}31913192/* Peach popup should not expose native scrollbars on internal panels. */3193.peach-settings-body,3194.peach-new-body,3195.peach-pwgen-body,3196.lock-screen,3197.peach-import-preview {3198  scrollbar-width: none;3199  -ms-overflow-style: none;3200  overscroll-behavior: contain;3201}3202.peach-settings-body::-webkit-scrollbar,3203.peach-new-body::-webkit-scrollbar,3204.peach-pwgen-body::-webkit-scrollbar,3205.lock-screen::-webkit-scrollbar,3206.peach-import-preview::-webkit-scrollbar {3207  width: 0;3208  height: 0;3209  display: none;3210}32113212.lock-screen {3213  height: 100%;3214  min-height: 100%;3215  overflow-y: auto;3216  padding: 18px 18px 16px;3217  gap: 14px;3218  grid-template-rows: auto auto auto 1fr auto;3219  align-content: stretch;3220  position: relative;3221  isolation: isolate;3222}3223.peach-screen.lock-screen--vault-stage {3224  display: flex;3225  flex-direction: column;3226  justify-content: flex-start;3227  gap: 18px;3228  padding: 20px 18px 18px;3229  overflow: hidden;3230}3231.peach-screen.lock-screen--vault-stage .peach-lock-panel {3232  margin-top: 0;3233}3234.lock-screen--onboarding {3235  display: flex;3236  flex-direction: column;3237  gap: 12px;3238  justify-content: flex-start;3239}32403241.lock-screen::before {3242  content: "";3243  position: absolute;3244  inset: 12px 18px auto auto;3245  width: 160px;3246  height: 160px;3247  border-radius: 999px;3248  background:3249    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%);3250  filter: blur(6px);3251  opacity: 0.7;3252  pointer-events: none;3253  z-index: 0;3254}32553256.peach-lock-rune-string {3257  flex: 1;3258  display: flex;3259  align-items: center;3260  justify-content: center;3261  gap: 6px;3262  font-family: PeachScript, monospace;3263  font-size: 0.8125rem;3264  letter-spacing: 0.05em;3265  pointer-events: none;3266  user-select: none;3267  position: relative;3268  z-index: 1;3269}32703271.peach-lock-rune-string span {3272  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3273  text-shadow:3274    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3275    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3276  transition: color 0.9s ease, text-shadow 0.9s ease;3277}32783279.peach-lock-rune-string span.is-glowing {3280  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3281  text-shadow:3282    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3283    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3284}32853286.lock-screen-header {3287  display: flex;3288  align-items: center;3289  justify-content: space-between;3290  position: relative;3291  z-index: 1;3292}32933294.lock-password-input.shake {3295  animation: peach-shake 300ms ease-in-out;3296}32973298.peach-hint-error {3299  color: rgba(220, 80, 60, 0.92);3300}33013302.peach-onboarding-headline {3303  margin: 0;3304  font-family: var(--font-display);3305  font-size: 35px;3306  line-height: 0.88;3307  font-style: italic;3308  font-weight: 400;3309  max-width: 252px;3310}33113312.peach-lock-copy {3313  display: grid;3314  gap: 8px;3315  position: relative;3316  z-index: 1;3317}33183319.peach-lock-copy--onboarding {3320  gap: 10px;3321}33223323.peach-lock-hero {3324  position: relative;3325  z-index: 1;3326  display: grid;3327  gap: 8px;3328  min-height: 0;3329  padding: 4px 2px 0;3330  border: none;3331  border-radius: 0;3332  background: transparent;3333  box-shadow: none;3334}3335.peach-lock-hero-art {3336  position: absolute;3337  right: -8px;3338  top: -6px;3339  width: 120px;3340  height: 120px;3341  display: flex;3342  align-items: center;3343  justify-content: center;3344  pointer-events: none;3345  opacity: 0.12;3346  filter: saturate(0.9);3347}3348.peach-lock-hero-mark {3349  width: 100%;3350  height: 100%;3351}3352/* Peach body stays brand-peach across every accent — we don't want a3353   green or blue peach when sage/sky is selected. Leaf + stem keep the3354   sage tint because a real peach has a sage leaf. */3355.peach-lock-hero-mark path:nth-child(2),3356.peach-lock-hero-mark path:nth-child(3) {3357  stroke: rgba(123, 144, 96, 0.88);3358  fill: rgba(123, 144, 96, 0.88);3359}3360.peach-lock-hero > *:not(.peach-lock-hero-art) {3361  position: relative;3362  z-index: 1;3363}33643365.peach-lock-eyebrow {3366  display: inline-flex;3367  align-items: center;3368  width: fit-content;3369  padding: 4px 9px;3370  border-radius: 999px;3371  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3372  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3373  color: var(--peach-t0);3374  font-family: "IBM Plex Mono", monospace;3375  font-size: 0.5rem;3376  letter-spacing: 0.18em;3377  text-transform: uppercase;3378}33793380.peach-lock-label-row {3381  display: flex;3382  align-items: center;3383  justify-content: space-between;3384  margin-bottom: 0;3385}33863387.peach-lock-reveal-btn {3388  display: inline-flex;3389  align-items: center;3390  gap: 4px;3391  background: none;3392  border: none;3393  cursor: pointer;3394  font-family: "IBM Plex Mono", monospace;3395  font-size: 0.5625rem;3396  letter-spacing: 0.06em;3397  color: var(--peach-t2);3398  padding: 2px 0;3399  transition: color 150ms ease;3400}34013402.peach-lock-reveal-btn:hover {3403  color: var(--peach-t1);3404}34053406.peach-lock-warning {3407  color: rgba(220, 80, 60, 0.85) !important;3408  line-height: 1.5;3409}34103411.peach-onboarding-cards {3412  display: grid;3413  gap: 8px;3414  position: relative;3415  z-index: 1;3416}34173418.peach-lock-panel {3419  position: relative;3420  z-index: 1;3421  display: grid;3422  gap: 9px;3423  padding: 14px 16px 15px;3424  border-radius: 18px;3425  border: 1px solid var(--peach-t3);3426  background:3427    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3428  box-shadow:3429    inset 0 1px 0 rgba(240, 232, 216, 0.04),3430    0 12px 28px rgba(0, 0, 0, 0.12);3431}34323433/* Glass surface — lock panel and settings groups */3434.peach-glass {3435  background: rgba(26, 20, 16, 0.65);3436  border: 1px solid rgba(255, 255, 255, 0.08);3437  border-radius: 12px;3438  backdrop-filter: blur(12px) saturate(1.4);3439  -webkit-backdrop-filter: blur(12px) saturate(1.4);3440}34413442@supports not (backdrop-filter: blur(1px)) {3443  .peach-glass {3444    background: rgba(26, 20, 16, 0.92);3445    border: 1px solid rgba(255, 255, 255, 0.10);3446    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3447  }3448}34493450.light .peach-glass,3451[data-theme="light"] .peach-glass {3452  background: rgba(253, 248, 244, 0.70);3453  border: 1px solid rgba(0, 0, 0, 0.07);3454  backdrop-filter: blur(12px) saturate(1.2);3455  -webkit-backdrop-filter: blur(12px) saturate(1.2);3456}34573458@supports not (backdrop-filter: blur(1px)) {3459  .light .peach-glass,3460  [data-theme="light"] .peach-glass {3461    background: rgba(253, 248, 244, 0.95);3462    border: 1px solid rgba(0, 0, 0, 0.09);3463  }3464}34653466/* Lock panel keeps its own border-radius over the generic glass token */3467.peach-lock-panel.peach-glass {3468  border-radius: 18px;3469  background: rgba(26, 20, 16, 0.65);3470  border: 1px solid rgba(255, 255, 255, 0.08);3471  box-shadow:3472    inset 0 1px 0 rgba(255, 255, 255, 0.05),3473    0 12px 28px rgba(0, 0, 0, 0.3);3474}34753476.light .peach-lock-panel.peach-glass,3477[data-theme="light"] .peach-lock-panel.peach-glass {3478  background: rgba(238, 227, 204, 0.75);3479  border: 1px solid rgba(34, 24, 9, 0.10);3480  box-shadow:3481    inset 0 1px 0 rgba(255, 255, 255, 0.5),3482    0 8px 24px rgba(80, 56, 32, 0.15);3483}34843485@supports not (backdrop-filter: blur(1px)) {3486  .peach-lock-panel.peach-glass {3487    background: rgba(26, 20, 16, 0.92);3488    box-shadow:3489      inset 0 1px 0 rgba(255, 255, 255, 0.05),3490      0 12px 28px rgba(0, 0, 0, 0.4);3491  }3492  .light .peach-lock-panel.peach-glass,3493  [data-theme="light"] .peach-lock-panel.peach-glass {3494    background: rgba(238, 227, 204, 0.96);3495  }3496}34973498.peach-lock-panel--secondary {3499  gap: 12px;3500}35013502.peach-lock-panel-header {3503  display: flex;3504  align-items: baseline;3505  justify-content: space-between;3506  gap: 12px;3507}35083509.peach-lock-option-grid {3510  display: grid;3511  gap: 10px;3512}35133514.peach-lock-option {3515  width: 100%;3516  display: grid;3517  gap: 6px;3518  padding: 14px 15px;3519  border-radius: 16px;3520  border: 1px solid rgba(240, 232, 216, 0.08);3521  background: rgba(240, 232, 216, 0.02);3522  color: var(--peach-t0);3523  text-align: left;3524  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3525}35263527.peach-lock-option:hover {3528  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3529  background: rgba(240, 232, 216, 0.04);3530  transform: translateY(-1px);3531}35323533.peach-lock-option-title {3534  font-size: 0.75rem;3535  color: var(--peach-t0);3536}35373538.peach-lock-option-copy {3539  font-size: 0.6875rem;3540  line-height: 1.55;3541  color: var(--peach-t1);3542}35433544.peach-onboarding-stack {3545  margin-top: 2px;3546}3547.peach-lock-panel-footer {3548  display: grid;3549  gap: 6px;3550  margin-top: 2px;3551  padding-top: 10px;3552  border-top: 1px solid rgba(240, 232, 216, 0.06);3553}35543555/* ── Restore tab view ─────────────────────────────────────────────────────3556   Tab-based restore screen replacing the old three-card picker. */35573558.peach-restore-tabview {3559  overflow: hidden;3560}35613562.peach-restore-tabcard {3563  flex: 1;3564  display: flex;3565  flex-direction: column;3566  gap: 0;3567  padding: 0;3568  overflow: hidden;3569  cursor: default;3570  user-select: none;3571  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3572}35733574/* ── Tab selector ─────────────────────────────────────────────────────── */35753576.peach-restore-tabs {3577  display: flex;3578  justify-content: space-around;3579  padding: 14px 10px 10px;3580  border-bottom: 1px solid var(--peach-t3);3581  gap: 2px;3582  overflow: hidden;3583  scrollbar-width: none;3584}3585.peach-restore-tabs::-webkit-scrollbar { display: none; }35863587.peach-restore-tab {3588  background: none;3589  border: none;3590  cursor: pointer;3591  padding: 3px 2px;3592  font-family: 'Cormorant Garamond', Georgia, serif;3593  font-style: italic;3594  font-size: 11px;3595  color: var(--peach-t2);3596  transition: color 150ms ease, text-shadow 150ms ease;3597  flex: 1;3598  min-width: 0;3599  text-align: center;3600  white-space: nowrap;3601  overflow: hidden;3602  text-overflow: ellipsis;3603}3604.peach-restore-tab:hover {3605  color: var(--peach-accent);3606  text-shadow:3607    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3608    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3609}3610.peach-restore-tab.is-active {3611  color: var(--peach-accent);3612  text-shadow:3613    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3614    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3615}36163617/* ── Content area ─────────────────────────────────────────────────────── */36183619.peach-restore-content {3620  padding: 16px 16px 14px;3621  display: flex;3622  flex-direction: column;3623  gap: 8px;3624  overflow: hidden;3625  scrollbar-width: none;3626  flex: 1;3627}3628.peach-restore-content::-webkit-scrollbar { display: none; }3629.peach-restore-content > * {3630  overflow: hidden;3631  scrollbar-width: none;3632}3633.peach-restore-content > *::-webkit-scrollbar { display: none; }36343635/* ── Shared tab inner layout ──────────────────────────────────────────── */36363637.peach-rt-symbols,3638.peach-rt-mayan,3639.peach-rt-csv,3640.peach-rt-phone {3641  display: flex;3642  flex-direction: column;3643  gap: 8px;3644  overflow: hidden;3645}36463647.peach-rt-submit {3648  width: 100%;3649}36503651.peach-rt-error {3652  margin: 0;3653  font-size: 0.6875rem;3654  color: var(--peach-breach);3655  line-height: 1.4;3656}36573658/* ── PeachScript tab ──────────────────────────────────────────────────── */36593660.peach-restore-symbols-textarea {3661  font-family: 'PeachScript', monospace;3662  font-size: 13px;3663  line-height: 1.9;3664  letter-spacing: 0.1em;3665  word-break: break-all;3666  resize: none;3667  width: 100%;3668  min-height: 56px;3669  max-height: 72px;3670  overflow: hidden;3671  scrollbar-width: none;3672  -ms-overflow-style: none;3673  box-sizing: border-box;3674  padding: 6px 8px;3675  border-radius: 8px;3676  border: 1px solid var(--peach-t3);3677  background: rgba(240, 232, 216, 0.03);3678  color: var(--peach-t0);3679}3680.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3681.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }36823683.peach-restore-symbols-pass {3684  width: 100%;3685  box-sizing: border-box;3686  padding: 7px 10px;3687  border-radius: 8px;3688  border: 1px solid var(--peach-t3);3689  background: rgba(240, 232, 216, 0.03);3690  color: var(--peach-t0);3691  font-size: 0.8125rem;3692}3693.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }3694.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }36953696.peach-rt-divider {3697  text-align: center;3698  font-size: 0.6875rem;3699  color: var(--peach-t2);3700  font-style: italic;3701}37023703.peach-rt-file-label {3704  width: 100%;3705  justify-content: center;3706}37073708.peach-rt-anim-canvas {3709  width: 100%;3710  height: 180px;3711  border-radius: 10px;3712  overflow: hidden;3713  display: block;3714}37153716/* ── Mayan Code tab ───────────────────────────────────────────────────── */37173718.peach-rt-upload-zone {3719  display: flex;3720  align-items: center;3721  justify-content: center;3722  height: 64px;3723  border-radius: 10px;3724  border: 1px dashed var(--peach-t3);3725  background: rgba(240, 232, 216, 0.02);3726  cursor: pointer;3727  transition: border-color 150ms ease, background 150ms ease;3728  overflow: hidden;3729}3730.peach-rt-upload-zone:hover {3731  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3732  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);3733}3734.peach-rt-upload-zone.is-busy {3735  cursor: default;3736  opacity: 0.6;3737}37383739.peach-rt-upload-label {3740  font-size: 0.75rem;3741  color: var(--peach-t2);3742  font-style: italic;3743}37443745.peach-rt-entry-line {3746  margin: 0;3747  font-size: 0.75rem;3748  color: var(--peach-t1);3749  font-style: italic;3750  text-align: center;3751}37523753/* ── CSV tab ──────────────────────────────────────────────────────────── */37543755.peach-rt-csv-sources {3756  margin: 0;3757  font-size: 0.6875rem;3758  color: var(--peach-t2);3759  line-height: 1.5;3760  text-align: center;3761}37623763.peach-rt-csv-warning {3764  margin: 0;3765  font-family: "IBM Plex Mono", monospace;3766  font-size: 0.5625rem;3767  letter-spacing: 0.12em;3768  color: var(--peach-breach);3769  text-align: center;3770}37713772/* ── From Phone tab ───────────────────────────────────────────────────── */37733774.peach-rt-phone-code {3775  margin: 0;3776  text-align: center;3777  font-family: "IBM Plex Mono", monospace;3778  font-size: 22px;3779  letter-spacing: 0.18em;3780  color: var(--peach-t0);3781}37823783.peach-rt-phone-qr {3784  display: block;3785  width: 96px;3786  height: 96px;3787  margin: 0 auto;3788  border-radius: 6px;3789  image-rendering: pixelated;3790  overflow: hidden;3791}37923793.peach-rt-phone-hint {3794  margin: 0;3795  font-size: 0.6875rem;3796  color: var(--peach-t2);3797  line-height: 1.55;3798  text-align: center;3799}38003801.peach-rt-phone-gate-text {3802  margin: 0;3803  font-size: 0.8125rem;3804  color: var(--peach-t1);3805  text-align: center;3806}38073808/* ── Intro popup ──────────────────────────────────────────────────────── */38093810.peach-restore-intro-overlay {3811  position: absolute;3812  inset: 0;3813  z-index: 100;3814  display: flex;3815  align-items: center;3816  justify-content: center;3817  padding: 20px;3818  background: rgba(12, 10, 6, 0.7);3819  backdrop-filter: blur(4px);3820  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;3821}38223823.peach-restore-intro-card {3824  width: 100%;3825  display: flex;3826  flex-direction: column;3827  gap: 12px;3828  padding: 22px 20px 20px;3829  border-radius: 16px;3830  border: 1px solid var(--peach-t3);3831  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));3832  backdrop-filter: blur(4px);3833  -webkit-backdrop-filter: blur(4px);3834  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);3835}38363837.peach-restore-intro-headline {3838  margin: 0;3839  font-family: var(--font-display);3840  font-style: italic;3841  font-size: 20px;3842  font-weight: 400;3843  color: var(--peach-t0);3844}38453846.peach-restore-intro-body {3847  display: flex;3848  flex-direction: column;3849  gap: 8px;3850}3851.peach-restore-intro-body p {3852  margin: 0;3853  font-size: 0.75rem;3854  color: var(--peach-t1);3855  line-height: 1.5;3856}38573858.peach-restore-intro-btn {3859  width: 100%;3860  margin-top: 4px;3861}38623863/* Snapshot restore panel */3864.peach-snapshot-panel {3865  gap: 10px;3866  overflow-y: auto;3867  max-height: 340px;3868}3869.peach-snapshot-list {3870  display: flex;3871  flex-direction: column;3872  gap: 4px;3873}3874.peach-snapshot-row {3875  display: flex;3876  align-items: center;3877  justify-content: space-between;3878  width: 100%;3879  padding: 8px 10px;3880  border-radius: 8px;3881  border: 1px solid rgba(240, 232, 216, 0.07);3882  background: transparent;3883  cursor: pointer;3884  transition: border-color 120ms, background 120ms;3885  text-align: left;3886  gap: 8px;3887}3888.peach-snapshot-row:hover {3889  border-color: rgba(240, 232, 216, 0.14);3890  background: rgba(240, 232, 216, 0.03);3891}3892.peach-snapshot-row.is-selected {3893  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3894  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);3895}3896.peach-snapshot-time {3897  font-size: 11.5px;3898  color: var(--peach-t0);3899  flex: 1;3900}3901.peach-snapshot-count {3902  font-family: "IBM Plex Mono", monospace;3903  font-size: 0.625rem;3904  color: var(--peach-t2);3905  flex-shrink: 0;3906}3907.peach-snapshot-confirm {3908  display: flex;3909  flex-direction: column;3910  gap: 8px;3911  padding-top: 10px;3912  border-top: 1px solid rgba(240, 232, 216, 0.06);3913}3914.peach-snapshot-warning {3915  display: flex;3916  align-items: flex-start;3917  gap: 6px;3918  font-size: 10.5px;3919  color: rgba(220, 80, 60, 0.85);3920  line-height: 1.55;3921}3922.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }3923.peach-snapshot-confirm-row {3924  display: flex;3925  gap: 6px;3926  align-items: center;3927}3928.peach-snapshot-restore-btn {3929  width: 100%;3930}3931.peach-lock-hero--unlock .peach-lock-hero-art {3932  width: 112px;3933  height: 112px;3934  right: 0;3935  top: 2px;3936  opacity: 0.1;3937}39383939.peach-card {3940  border: 1px solid var(--peach-t3);3941  border-radius: 18px;3942  background:3943    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);3944  box-shadow:3945    inset 0 0 0 1px var(--peach-border-accent),3946    inset 0 1px 0 rgba(240, 232, 216, 0.04),3947    0 12px 32px rgba(0, 0, 0, 0.14);3948  overflow: hidden;3949}39503951.peach-card-active {3952  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);3953  box-shadow:3954    inset 0 1px 0 rgba(240, 232, 216, 0.05),3955    0 16px 38px rgba(0, 0, 0, 0.18),3956    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);3957}39583959.peach-card-disabled {3960  opacity: 0.72;3961}39623963.peach-card-header {3964  width: 100%;3965  padding: 13px 16px 11px;3966  background: transparent;3967  color: var(--peach-t0);3968  display: flex;3969  justify-content: space-between;3970  align-items: center;3971  text-align: left;3972  font-size: 0.75rem;3973}39743975.peach-card-body {3976  padding: 0 16px 16px;3977  display: grid;3978  gap: 9px;3979}39803981.peach-card-tag {3982  color: var(--peach-t2);3983  font-family: "IBM Plex Mono", monospace;3984  font-size: 0.5625rem;3985  letter-spacing: 0.12em;3986  text-transform: uppercase;3987}39883989.peach-empty-copy {3990  display: grid;3991  gap: 6px;3992  color: var(--peach-t1);3993  font-size: 0.8125rem;3994}39953996.peach-lock-submit {3997  width: 100%;3998  box-shadow:3999    0 1px 0 rgba(255,255,255,0.10) inset,4000    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4001    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4002    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4003}40044005.peach-lock-secondary {4006  width: 100%;4007  border-color: var(--peach-t3);4008  background: rgba(240, 232, 216, 0.02);4009}40104011.peach-lock-secondary:hover {4012  background: rgba(240, 232, 216, 0.04);4013}40144015.peach-lock-note {4016  max-width: none;4017  line-height: 1.55;4018  margin: 0;4019}40204021.peach-overlay-action {4022  font-size: 0.625rem;4023  padding: 4px 8px;4024  letter-spacing: 0.06em;4025  min-width: 44px;4026  text-align: center;4027}40284029.peach-overlay-spacer {4030  width: 32px;4031}40324033.peach-inline-action {4034  flex-shrink: 0;4035  font-size: 0.5625rem;4036  letter-spacing: 0.1em;4037  text-transform: uppercase;4038  padding: 4px 7px;4039}4040.peach-password-toggle-btn {4041  display: inline-flex;4042  align-items: center;4043  justify-content: center;4044  min-width: 30px;4045  min-height: 26px;4046  padding: 0 7px;4047  border: 1px solid var(--peach-t3);4048  border-radius: 999px;4049  background: rgba(240, 232, 216, 0.04);4050  color: var(--peach-t2);4051  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4052}4053.peach-password-toggle-btn:hover {4054  border-color: var(--peach-t2);4055  color: var(--peach-t0);4056  background: rgba(240, 232, 216, 0.06);4057}40584059.peach-new-textarea {4060  width: 100%;4061  min-height: 88px;4062  resize: vertical;4063  border: 0;4064  outline: none;4065  background: transparent;4066  color: var(--peach-t1);4067  font-family: "IBM Plex Mono", monospace;4068  font-size: 0.75rem;4069  line-height: 1.65;4070  caret-color: var(--peach-accent);4071}40724073.peach-new-textarea::placeholder {4074  color: var(--peach-t2);4075  opacity: 0.7;4076}40774078.peach-settings-actions {4079  display: grid;4080  gap: 8px;4081}40824083.peach-sync-section-label {4084  font-size: 0.6875rem;4085  color: var(--peach-t2);4086  text-transform: uppercase;4087  letter-spacing: 0.05em;4088}40894090.peach-sync-device-row {4091  display: flex;4092  justify-content: space-between;4093  align-items: center;4094  padding: 6px 0;4095  border-bottom: 1px solid var(--peach-t3);4096}40974098.peach-sync-device-info {4099  display: flex;4100  flex-direction: column;4101  gap: 2px;4102}41034104.peach-sync-device-name {4105  font-size: 0.8125rem;4106  color: var(--peach-t0);4107}41084109.peach-sync-device-meta {4110  font-size: 0.6875rem;4111  color: var(--peach-t2);4112}41134114.peach-sync-status-dot {4115  display: inline-block;4116  width: 8px;4117  height: 8px;4118  border-radius: 50%;4119  vertical-align: middle;4120}41214122.peach-sync-remove-btn {4123  color: var(--peach-breach);4124}41254126.peach-sync-advanced-row {4127  display: flex;4128  justify-content: space-between;4129  align-items: center;4130  padding: 6px 0;4131  gap: 12px;4132}41334134.peach-sync-advanced-info {4135  display: flex;4136  flex-direction: column;4137  gap: 2px;4138  flex: 1;4139}41404141.peach-sync-advanced-name {4142  font-size: 0.8125rem;4143  color: var(--peach-t0);4144}41454146.peach-sync-reset-confirm {4147  display: flex;4148  flex-direction: column;4149  gap: 8px;4150  padding: 10px;4151  border: 1px solid var(--peach-breach);4152  border-radius: 10px;4153  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4154}41554156.peach-sync-reset-confirm-headline {4157  font-size: 0.8125rem;4158  font-weight: 600;4159  color: var(--peach-t0);4160  margin: 0;4161}41624163.peach-sync-reset-confirm-body {4164  font-size: 0.75rem;4165  color: var(--peach-t1);4166  margin: 0;4167  line-height: 1.4;4168}41694170.peach-btn--danger {4171  background: var(--peach-breach);4172  color: #fff;4173  border-color: var(--peach-breach);4174}4175.peach-btn--danger:hover:not(:disabled) {4176  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4177}4178.peach-btn--danger:disabled {4179  opacity: 0.55;4180  cursor: not-allowed;4181}41824183.peach-sync-hero-icon {4184  color: var(--peach-t1);4185  opacity: 0.85;4186}41874188.peach-import-preview {4189  margin-bottom: 12px;4190  max-height: 152px;4191  overflow-y: auto;4192  border: 1px solid var(--peach-t3);4193  border-radius: 10px;4194  padding: 8px 10px;4195  display: grid;4196  gap: 8px;4197  background: rgba(240, 232, 216, 0.02);4198}41994200.peach-import-preview-row {4201  display: flex;4202  justify-content: space-between;4203  gap: 10px;4204  font-size: 0.6875rem;4205  color: var(--peach-t1);4206}42074208.peach-import-preview-title {4209  color: var(--peach-t0);4210  flex: 1;4211  min-width: 0;4212  overflow: hidden;4213  text-overflow: ellipsis;4214  white-space: nowrap;4215}42164217.peach-import-preview-meta {4218  color: var(--peach-t2);4219  flex-shrink: 0;4220  max-width: 42%;4221  overflow: hidden;4222  text-overflow: ellipsis;4223  white-space: nowrap;4224}42254226.peach-import-preview-more {4227  color: var(--peach-t2);4228  font-size: 0.625rem;4229}42304231.peach-restore-copy {4232  margin: 0;4233  color: var(--peach-t1);4234  font-size: 0.6875rem;4235  line-height: 1.6;4236}42374238.peach-restore-warning {4239  padding: 10px 12px;4240  border-radius: 12px;4241  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4242  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4243  color: var(--peach-t0);4244  font-size: 0.6875rem;4245  line-height: 1.55;4246}42474248.peach-provider-chips {4249  display: flex;4250  flex-wrap: wrap;4251  gap: 6px;4252}42534254.peach-provider-chip {4255  display: inline-flex;4256  align-items: center;4257  padding: 5px 8px;4258  border-radius: 999px;4259  border: 1px solid var(--peach-t3);4260  background: rgba(240, 232, 216, 0.02);4261  color: var(--peach-t1);4262  font-family: "IBM Plex Mono", monospace;4263  font-size: 0.5rem;4264  letter-spacing: 0.08em;4265  text-transform: uppercase;4266}42674268.peach-restore-file,4269.peach-restore-input {4270  width: 100%;4271  border-radius: 10px;4272  border: 1px solid var(--peach-t3);4273  background: var(--peach-s2);4274  color: var(--peach-t0);4275  font-size: 0.75rem;4276}42774278.peach-restore-file {4279  padding: 9px 10px;4280}42814282.peach-restore-file::file-selector-button {4283  margin-right: 10px;4284  padding: 7px 10px;4285  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4286  border-radius: 999px;4287  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4288  color: var(--peach-t0);4289  font-size: 0.625rem;4290  letter-spacing: 0.08em;4291  text-transform: uppercase;4292  cursor: pointer;4293}42944295.peach-restore-input {4296  padding: 10px 12px;4297}42984299.peach-auth-grid {4300  display: grid;4301  gap: 10px;4302}43034304.peach-import-summary {4305  color: var(--peach-t1);4306  font-size: 0.75rem;4307  line-height: 1.6;4308  margin-bottom: 12px;4309}43104311.peach-restore-error {4312  color: rgba(220, 80, 60, 0.95);4313  font-size: 0.75rem;4314  line-height: 1.55;4315}43164317.peach-passkey-card {4318  max-width: 400px;4319  margin: auto 16px;4320  align-self: center;4321  width: calc(100% - 32px);4322}43234324/* Center the approval card vertically inside the overlay-view (which sets4325 * flex-direction: column without justify-content). Without this, the card4326 * sits at the top with a tall empty band below — looks unfinished on the4327 * 320px popup. */4328.peach-overlay-view:has(.peach-passkey-card) {4329  justify-content: center;4330}43314332.peach-pro-badge {4333  padding: 2px 6px;4334  border-radius: 999px;4335  font-family: var(--font-ui);4336  font-size: 0.625rem;4337  letter-spacing: 0.08em;4338  text-transform: uppercase;4339  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4340  color: var(--peach-accent);4341}43424343/* ── Shortcuts rebind table ─────────────────────────────────── */4344.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4345.peach-shortcut-row {4346  display: flex;4347  align-items: center;4348  gap: 10px;4349  padding: 6px 0;4350}4351.peach-shortcut-row-label {4352  flex: 1;4353  font-size: 0.75rem;4354  color: var(--peach-t0);4355}4356.peach-shortcut-chip {4357  min-width: 64px;4358  padding: 4px 10px;4359  border-radius: 6px;4360  border: 1px solid var(--peach-t3);4361  background: var(--peach-input-bg, var(--surface-card));4362  color: var(--peach-t0);4363  font-family: var(--font-mono);4364  font-size: 0.6875rem;4365  letter-spacing: 0.04em;4366  cursor: pointer;4367  text-align: center;4368  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4369}4370.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4371.peach-shortcut-chip.is-custom {4372  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4373  color: var(--peach-accent);4374}4375.peach-shortcut-chip.is-capturing {4376  border-color: var(--peach-accent);4377  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4378  color: var(--peach-accent);4379  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4380}4381@keyframes peach-shortcut-capture-pulse {4382  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4383  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4384}4385.peach-shortcut-reset {4386  background: transparent;4387  border: none;4388  cursor: pointer;4389  color: var(--peach-t2);4390  padding: 4px 6px;4391  border-radius: 5px;4392  font-size: 0.875rem;4393  line-height: 1;4394  transition: color 120ms ease, background 120ms ease;4395}4396.peach-shortcut-reset:hover {4397  color: var(--peach-t0);4398  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4399}4400.peach-shortcuts-conflict {4401  margin: 4px 0 0;4402  padding: 8px 10px;4403  border-radius: 7px;4404  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4405  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4406  font-family: var(--font-mono);4407  font-size: 0.6875rem;4408  color: var(--peach-t0);4409}44104411/* ── Help dialog overlay (? to open) ────────────────────────── */4412.peach-shortcuts-help-backdrop {4413  position: fixed;4414  inset: 0;4415  background: rgba(0, 0, 0, 0.55);4416  backdrop-filter: blur(2px);4417  display: flex;4418  align-items: center;4419  justify-content: center;4420  z-index: 1000;4421  animation: peach-help-fade-in 140ms ease forwards;4422}4423@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4424.peach-shortcuts-help-card {4425  width: min(320px, 92vw);4426  max-height: 80vh;4427  overflow-y: auto;4428  border-radius: 14px;4429  border: 1px solid var(--peach-t3);4430  background: var(--peach-bg);4431  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4432  padding: 16px 18px 18px;4433  display: flex;4434  flex-direction: column;4435  gap: 12px;4436}4437.peach-shortcuts-help-head {4438  display: flex; align-items: center; justify-content: space-between;4439}4440.peach-shortcuts-help-head h3 {4441  margin: 0;4442  font-family: var(--font-display);4443  font-style: italic;4444  font-weight: 400;4445  font-size: 22px;4446  color: var(--peach-t0);4447}4448.peach-shortcuts-help-close {4449  background: transparent;4450  border: none;4451  color: var(--peach-t2);4452  cursor: pointer;4453  font-size: 0.875rem;4454  padding: 4px 8px;4455  border-radius: 5px;4456}4457.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4458.peach-shortcuts-help-body ul {4459  list-style: none; padding: 0; margin: 4px 0 12px;4460  display: grid; gap: 8px;4461}4462.peach-shortcuts-help-body li {4463  display: flex; align-items: center; justify-content: space-between; gap: 12px;4464  font-size: 0.75rem; color: var(--peach-t0);4465}4466.peach-shortcuts-help-body kbd {4467  font-family: var(--font-mono);4468  font-size: 0.6875rem;4469  padding: 3px 8px;4470  border-radius: 6px;4471  background: var(--surface-card);4472  border: 1px solid var(--peach-t3);4473  color: var(--peach-accent);4474  letter-spacing: 0.04em;4475}44764477/* ── Pro promo on Account screen ────────────────────────────── */4478.peach-pro-promo {4479  position: relative;4480  border-radius: 14px;4481  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4482  background:4483    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4484    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4485    var(--surface-card);4486  overflow: hidden;4487  margin-bottom: 14px;4488}4489.peach-pro-promo-glow {4490  position: absolute;4491  inset: -40% -20% auto auto;4492  width: 220px; height: 220px;4493  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4494  pointer-events: none;4495  filter: blur(8px);4496}4497.peach-pro-promo-inner {4498  position: relative;4499  padding: 18px 18px 16px;4500}4501.peach-pro-promo-title {4502  font-family: var(--font-display);4503  font-style: italic;4504  font-weight: 400;4505  font-size: 28px;4506  line-height: 1;4507  letter-spacing: -0.005em;4508  color: var(--peach-t0);4509  margin: 0 0 4px;4510}4511.peach-pro-promo-tagline {4512  font-family: var(--font-mono);4513  font-size: 0.625rem;4514  letter-spacing: 0.06em;4515  color: var(--peach-t2);4516  margin: 0 0 14px;4517}4518.peach-pro-promo-list {4519  list-style: none;4520  margin: 0 0 16px;4521  padding: 0;4522  display: grid;4523  gap: 9px;4524}4525.peach-pro-promo-list li {4526  display: flex;4527  align-items: flex-start;4528  gap: 9px;4529  font-size: 0.75rem;4530  color: var(--peach-t1);4531  line-height: 1.4;4532}4533.peach-pro-promo-list svg {4534  width: 14px;4535  height: 14px;4536  flex-shrink: 0;4537  color: var(--peach-accent);4538  margin-top: 2px;4539}4540.peach-pro-promo-list span {4541  color: var(--peach-t0);4542}4543.peach-pro-promo-cta {4544  width: 100%;4545  background: var(--peach-accent);4546  color: #fff;4547  border: none;4548  padding: 9px 12px;4549  border-radius: 9px;4550  font-size: 0.75rem;4551  font-weight: 500;4552  font-family: var(--font-ui);4553  letter-spacing: 0.02em;4554  text-decoration: none;4555  display: inline-flex;4556  align-items: center;4557  justify-content: center;4558  cursor: pointer;4559  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4560  box-shadow: 0 2px 16px var(--peach-glow);4561}4562.peach-pro-promo-cta:hover {4563  filter: brightness(1.07);4564  box-shadow: 0 4px 24px var(--peach-glow);4565  transform: translateY(-1px);4566}4567.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }45684569.peach-pro-or-divider {4570  display: flex;4571  align-items: center;4572  gap: 10px;4573  margin: 4px 0 12px;4574  font-family: var(--font-mono);4575  font-size: 0.625rem;4576  letter-spacing: 0.06em;4577  color: var(--peach-t2);4578  text-transform: uppercase;4579}4580.peach-pro-or-divider::before,4581.peach-pro-or-divider::after {4582  content: "";4583  flex: 1;4584  height: 1px;4585  background: var(--peach-t3);4586}45874588.peach-loading {4589  position: absolute;4590  inset: 0;4591  display: flex;4592  align-items: center;4593  justify-content: center;4594  background: var(--bg);4595  animation: peach-loading-pulse 1.2s ease-in-out infinite;4596}45974598@keyframes peach-loading-pulse {4599  0%, 100% { opacity: 0.6; }4600  50% { opacity: 1; }4601}46024603/* ── Health Dashboard ─────────────────────────────────────────────────── */4604.peach-health-body {4605  flex: 1;4606  overflow-y: auto;4607  display: flex;4608  flex-direction: column;4609  /* Hide the platform scrollbar — every other scrollable surface in the4610   * popup hides it; the Health view was the one outlier and it ruined the4611   * polish. Behavior unchanged, just no rail rendered. */4612  scrollbar-width: none;4613  -ms-overflow-style: none;4614}4615.peach-health-body::-webkit-scrollbar { display: none; }46164617/* Loading screen for the Vault Health view. The advanced report computation4618 * can run for a few seconds on a large vault — without a clear loading4619 * screen the surface looked broken (the entry view bleeds through the4620 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4621.peach-health-loading-screen {4622  flex: 1;4623  display: flex;4624  flex-direction: column;4625  align-items: center;4626  justify-content: center;4627  gap: 14px;4628  padding: 32px 28px;4629  text-align: center;4630}46314632.peach-health-loading-glyph {4633  width: 48px;4634  height: 48px;4635  display: flex;4636  align-items: center;4637  justify-content: center;4638  border-radius: 14px;4639  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4640  color: var(--peach-accent);4641}46424643.peach-health-loading-title {4644  margin: 0;4645  font-family: var(--font-display);4646  font-style: italic;4647  font-weight: 300;4648  font-size: 19px;4649  line-height: 1.2;4650  color: var(--peach-t0);4651}46524653.peach-health-loading-copy {4654  margin: 0;4655  max-width: 240px;4656  font-size: 0.75rem;4657  line-height: 1.55;4658  color: var(--peach-t2);4659}46604661.peach-health-loading-track {4662  width: 200px;4663  height: 3px;4664  margin-top: 6px;4665  border-radius: 999px;4666  background: rgba(240, 232, 216, 0.06);4667  overflow: hidden;4668}46694670.peach-health-loading-fill {4671  width: 40%;4672  height: 100%;4673  border-radius: inherit;4674  background: linear-gradient(4675    90deg,4676    transparent 0%,4677    var(--peach-accent) 50%,4678    transparent 100%4679  );4680  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4681}46824683@keyframes peach-health-loading-sweep {4684  0%   { transform: translateX(-100%); }4685  100% { transform: translateX(350%); }4686}46874688[data-motion="reduce"] .peach-health-loading-fill,4689[data-motion="reduce"] .peach-health-loading-glyph svg path {4690  animation: none;4691}46924693.peach-health-summary {4694  padding: 10px 16px 6px;4695  font-family: "IBM Plex Mono", monospace;4696  font-size: 0.6875rem;4697}4698.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4699.peach-health-summary-ok { color: var(--peach-t2); }47004701.peach-health-check-row {4702  padding: 0 16px 10px;4703}4704.peach-health-check-btn {4705  width: 100%;4706  display: flex;4707  align-items: center;4708  justify-content: center;4709}47104711.peach-health-sections {4712  flex: 1;4713  display: flex;4714  flex-direction: column;4715}47164717.peach-health-section {4718  border-bottom: 1px solid var(--peach-t3);4719}47204721.peach-health-section-header {4722  width: 100%;4723  display: flex;4724  align-items: center;4725  justify-content: space-between;4726  padding: 9px 16px;4727  background: transparent;4728  cursor: pointer;4729  color: var(--peach-t0);4730}47314732.peach-health-section-title-row {4733  display: flex;4734  align-items: center;4735  gap: 8px;4736}47374738.peach-health-count-badge {4739  display: inline-flex;4740  align-items: center;4741  justify-content: center;4742  min-width: 20px;4743  height: 18px;4744  padding: 0 5px;4745  border-radius: 999px;4746  background: rgba(220,80,60,0.15);4747  border: 1px solid rgba(220,80,60,0.25);4748  font-family: "IBM Plex Mono", monospace;4749  font-size: 0.5625rem;4750  color: rgba(220,80,60,0.9);4751}47524753.peach-health-section-title {4754  font-family: "IBM Plex Mono", monospace;4755  font-size: 0.6875rem;4756  text-transform: uppercase;4757  letter-spacing: 0.1em;4758  color: var(--peach-t1);4759}47604761.peach-health-chevron {4762  color: var(--peach-t2);4763  transition: transform 200ms ease;4764  flex-shrink: 0;4765}4766.peach-health-chevron.is-expanded {4767  transform: rotate(180deg);4768}47694770.peach-health-section-body {4771  padding: 0 16px 10px;4772  display: flex;4773  flex-direction: column;4774  gap: 4px;4775}47764777.peach-health-row {4778  display: flex;4779  align-items: flex-start;4780  justify-content: space-between;4781  gap: 8px;4782  padding: 6px 8px;4783  border-radius: 8px;4784  background: rgba(240,232,216,0.02);4785}47864787.peach-health-row-info {4788  flex: 1;4789  min-width: 0;4790  display: flex;4791  flex-direction: column;4792  gap: 2px;4793}47944795.peach-health-row-name {4796  font-family: var(--font-display);4797  font-size: 0.9375rem;4798  font-style: italic;4799  font-weight: 400;4800  color: var(--peach-t0);4801  white-space: nowrap;4802  overflow: hidden;4803  text-overflow: ellipsis;4804}48054806.peach-health-row-meta {4807  font-family: "IBM Plex Mono", monospace;4808  font-size: 0.5625rem;4809  color: var(--peach-t2);4810  letter-spacing: 0.05em;4811}48124813.peach-health-fix-btn {4814  font-size: 0.5625rem;4815  letter-spacing: 0.08em;4816  text-transform: uppercase;4817  padding: 4px 7px;4818  flex-shrink: 0;4819  display: flex;4820  align-items: center;4821}48224823.peach-health-empty {4824  font-family: "IBM Plex Mono", monospace;4825  font-size: 0.625rem;4826  color: var(--peach-t2);4827  padding: 6px 0;4828}48294830.peach-health-loading {4831  font-family: "IBM Plex Mono", monospace;4832  font-size: 0.625rem;4833  color: var(--peach-t2);4834  padding: 6px 0;4835  display: flex;4836  align-items: center;4837  gap: 6px;4838}48394840.peach-health-loading::before {4841  content: "";4842  width: 10px;4843  height: 10px;4844  border: 1.5px solid var(--peach-t3);4845  border-top-color: var(--peach-accent);4846  border-radius: 50%;4847  animation: peach-spin 600ms linear infinite;4848}48494850@keyframes peach-spin {4851  to { transform: rotate(360deg); }4852}48534854.peach-spinner {4855  width: 32px;4856  height: 32px;4857  border: 2px solid var(--peach-s2);4858  border-top-color: var(--peach-accent);4859  border-radius: 50%;4860  margin: 0 auto 16px;4861  animation: peach-spin 0.8s linear infinite;4862}48634864.peach-progress-screen {4865  text-align: center;4866  padding: 32px 16px;4867}48684869.peach-progress-screen-title {4870  font-size: 0.8125rem;4871  color: var(--peach-t0);4872  margin-bottom: 16px;4873}48744875.peach-progress-screen-stage {4876  font-size: 0.6875rem;4877  color: var(--peach-t2);4878  min-height: 14px;4879}48804881.peach-progress-screen-note {4882  font-size: 0.625rem;4883  color: var(--peach-t2);4884  margin-top: 8px;4885}48864887.peach-pairing-body {4888  flex: 1;4889  overflow-y: auto;4890  display: flex;4891  flex-direction: column;4892}48934894.peach-pairing-content {4895  flex: 1;4896  display: flex;4897  flex-direction: column;4898  align-items: center;4899  justify-content: center;4900  gap: 14px;4901  padding: 28px 20px;4902  text-align: center;4903}49044905.peach-pairing-code-screen {4906  gap: 18px;4907}49084909.peach-pairing-headline {4910  font-family: var(--font-display);4911  font-style: italic;4912  font-weight: 300;4913  font-size: 28px;4914  color: var(--peach-t0);4915  margin: 0;4916  line-height: 1;4917}49184919.peach-pairing-subline {4920  font-size: 0.75rem;4921  color: var(--peach-t2);4922  max-width: 220px;4923  line-height: 1.5;4924  margin: 0;4925}49264927.peach-pairing-subline--center {4928  text-align: center;4929}49304931/* 6-digit pairing code — both display (.peach-pairing-code) and entry4932   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking4933   so the two modes feel like the same surface. */4934.peach-pairing-code {4935  font-family: "IBM Plex Mono", monospace;4936  font-size: 36px;4937  letter-spacing: 0.25em;4938  color: var(--peach-t0);4939  text-align: center;4940  padding: 24px 0;4941  text-shadow:4942    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),4943    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);4944  background: transparent;4945  border: 0;4946  cursor: default;4947  user-select: text;4948}49494950.peach-pairing-code--loading,4951.peach-pairing-code--expired {4952  font-size: 18px;4953  letter-spacing: 0.04em;4954  color: var(--peach-t2);4955  cursor: pointer;4956  text-shadow: none;4957}49584959.peach-pairing-code-input {4960  font-family: "IBM Plex Mono", monospace;4961  font-size: 36px;4962  letter-spacing: 0.25em;4963  color: var(--peach-t0);4964  background: transparent;4965  border: 0;4966  border-bottom: 1px solid var(--peach-t3);4967  outline: none;4968  text-align: center;4969  padding: 18px 0;4970  width: 220px;4971  caret-color: var(--peach-accent);4972  transition: border-color 160ms ease;4973}49744975.peach-pairing-code-input::placeholder {4976  color: var(--peach-t3);4977}49784979.peach-pairing-code-input:focus {4980  border-bottom-color: var(--peach-accent);4981}49824983.peach-pairing-toggle {4984  background: transparent;4985  border: 0;4986  color: var(--peach-t2);4987  font-size: 0.75rem;4988  padding: 8px 4px;4989  cursor: pointer;4990  transition: color 120ms ease;4991}49924993.peach-pairing-toggle:hover:not(:disabled) {4994  color: var(--peach-t1);4995}49964997.peach-pairing-toggle:disabled {4998  opacity: 0.5;4999  cursor: default;5000}50015002.peach-pairing-hint {5003  font-size: 0.6875rem;5004  color: var(--peach-t2);5005  margin: 0;5006  text-align: center;5007}50085009.peach-pairing-status {5010  display: flex;5011  align-items: center;5012  gap: 8px;5013  margin: 0;5014  font-size: 0.75rem;5015  color: var(--peach-t1);5016}50175018.peach-pairing-error {5019  margin: 0;5020  font-size: 0.6875rem;5021  color: var(--peach-breach);5022}50235024.peach-pairing-error--muted {5025  color: var(--peach-t2);5026}50275028.peach-pairing-spinner {5029  width: 12px;5030  height: 12px;5031  border: 1.5px solid var(--peach-t3);5032  border-top-color: var(--peach-accent);5033  border-radius: 50%;5034  animation: peach-spin 0.8s linear infinite;5035}50365037.peach-pairing-success-icon,5038.peach-pairing-error-icon,5039.peach-pairing-hero {5040  display: inline-flex;5041  align-items: center;5042  justify-content: center;5043}50445045/* Tag chips */5046.peach-tag-chip {5047  display: inline-flex;5048  align-items: center;5049  gap: 4px;5050  padding: 3px 8px;5051  border-radius: 999px;5052  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5053  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5054  color: var(--peach-t0);5055  font-family: "IBM Plex Mono", monospace;5056  font-size: 0.625rem;5057  letter-spacing: 0.04em;5058}50595060.peach-tag-chip-remove {5061  background: transparent;5062  border: none;5063  color: inherit;5064  opacity: 0.6;5065  cursor: pointer;5066  padding: 0;5067  font-size: 0.75rem;5068  line-height: 1;5069}50705071.peach-tag-chip-remove:hover {5072  opacity: 1;5073}50745075/* Tag input */5076.peach-tag-input-wrap {5077  border-bottom: 1px solid var(--peach-t3);5078}50795080.peach-tag-suggestions {5081  display: flex;5082  flex-wrap: wrap;5083  gap: 4px;5084  padding: 6px 0;5085}50865087.peach-tag-suggestion {5088  padding: 2px 8px;5089  border-radius: 999px;5090  border: 1px solid var(--peach-t3);5091  background: var(--peach-s2);5092  color: var(--peach-t1);5093  font-family: "IBM Plex Mono", monospace;5094  font-size: 0.625rem;5095  cursor: pointer;5096  transition: border-color 80ms ease, background 80ms ease;5097}50985099.peach-tag-suggestion:hover {5100  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5101  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5102}51035104/* Tag filter strip */5105.peach-tag-filter-strip {5106  border-bottom: 1px solid var(--peach-t3);5107  flex-shrink: 0;5108}51095110.peach-tag-filter-chip {5111  display: inline-flex;5112  align-items: center;5113  padding: 4px 10px;5114  border-radius: 999px;5115  border: 1px solid var(--peach-t3);5116  background: transparent;5117  color: var(--peach-t2);5118  font-family: "IBM Plex Mono", monospace;5119  font-size: 0.5625rem;5120  letter-spacing: 0.06em;5121  text-transform: uppercase;5122  cursor: pointer;5123  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5124  white-space: nowrap;5125}51265127.peach-tag-filter-chip:hover {5128  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5129  color: var(--peach-t1);5130}51315132.peach-tag-filter-chip.is-selected {5133  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5134  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5135  color: var(--peach-t0);5136}51375138/* ─────────────────────────────────────────────────────────────────────────5139   v1.4.12 additions5140   ─────────────────────────────────────────────────────────────────────── */51415142/* Sort bar */5143.peach-sort-bar {5144  display: flex;5145  align-items: center;5146  gap: 4px;5147  padding: 5px 12px;5148  border-bottom: 1px solid var(--peach-t3);5149  flex-shrink: 0;5150  overflow-x: auto;5151  scrollbar-width: none;5152}51535154.peach-sort-btn {5155  padding: 2px 9px;5156  border-radius: 999px;5157  border: 1px solid transparent;5158  background: transparent;5159  color: var(--peach-t2);5160  font-family: "IBM Plex Mono", monospace;5161  font-size: 0.5625rem;5162  letter-spacing: 0.07em;5163  text-transform: uppercase;5164  cursor: pointer;5165  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5166  white-space: nowrap;5167}51685169.peach-sort-btn:hover {5170  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5171  color: var(--peach-t1);5172}51735174.peach-sort-btn.is-active {5175  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5176  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5177  color: var(--peach-t0);5178}51795180.peach-sort-domain-hint {5181  margin-left: auto;5182  font-family: "IBM Plex Mono", monospace;5183  font-size: 0.5625rem;5184  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5185  white-space: nowrap;5186  overflow: hidden;5187  text-overflow: ellipsis;5188  max-width: 110px;5189}51905191/* Tab-match badge on entry rows */5192.peach-tab-match-badge {5193  display: inline-block;5194  width: 6px;5195  height: 6px;5196  border-radius: 50%;5197  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5198  margin-left: 5px;5199  vertical-align: middle;5200  flex-shrink: 0;5201  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5202}52035204.peach-entry-row.is-tab-match {5205  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5206  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5207}52085209.peach-entry-row.is-tab-match:hover {5210  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5211}52125213/* Entry list stagger entrance */5214@keyframes peach-entry-fadein {5215  from { opacity: 0; transform: translateY(4px); }5216  to   { opacity: 1; transform: translateY(0); }5217}52185219.peach-vault-list .peach-entry-row {5220  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5221  content-visibility: auto;5222  contain-intrinsic-size: auto 44px;5223}52245225/* Button press micro-interaction */5226.peach-btn:active {5227  transform: scale(0.95);5228  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5229}52305231.peach-sort-btn:active,5232.peach-tag-filter-chip:active {5233  transform: scale(0.93);5234  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5235}52365237/* Password strength bar (Lock view + shared) */5238.peach-password-strength {5239  display: flex;5240  align-items: center;5241  gap: 8px;5242  margin-top: 6px;5243}52445245.peach-strength-bar {5246  flex: 1;5247  height: 3px;5248  border-radius: 2px;5249  background: var(--peach-t3);5250  overflow: hidden;5251}52525253.peach-strength-fill {5254  height: 100%;5255  border-radius: 2px;5256  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5257              background 300ms ease;5258}52595260.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5261.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5262.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5263.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }52645265.peach-strength-label {5266  font-family: "IBM Plex Mono", monospace;5267  font-style: italic;5268  font-size: 0.5625rem;5269  font-weight: 300;5270  letter-spacing: 0.06em;5271  color: var(--peach-t2);5272  min-width: 36px;5273  text-align: right;5274}52755276.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5277.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5278.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5279.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }52805281/* Duress form */5282.peach-duress-status {5283  padding: 2px 8px;5284  border-radius: 999px;5285  border: 1px solid var(--peach-t3);5286  font-family: "IBM Plex Mono", monospace;5287  font-size: 0.5625rem;5288  letter-spacing: 0.07em;5289  text-transform: uppercase;5290  color: var(--peach-t2);5291  flex-shrink: 0;5292}52935294.peach-duress-status.is-active {5295  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5296  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5297  color: var(--peach-t0);5298}52995300.peach-duress-form {5301  padding: 8px 0 4px;5302  display: flex;5303  flex-direction: column;5304  gap: 6px;5305}53065307.peach-duress-form .peach-label {5308  margin-top: 4px;5309}53105311.peach-duress-actions {5312  display: flex;5313  gap: 6px;5314  align-items: center;5315  margin-top: 4px;5316}53175318.peach-duress-actions .peach-btn:first-child {5319  margin-right: auto;5320}53215322/* Improved overlay spring entrance */5323.peach-overlay-view.ov-enter-up {5324  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5325}53265327@keyframes ov-enter-up-spring {5328  from { opacity: 0; transform: translateY(16px) scale(0.98); }5329  to   { opacity: 1; transform: translateY(0) scale(1); }5330}53315332.peach-overlay-view.ov-enter-right {5333  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5334}53355336@keyframes ov-enter-right-spring {5337  from { opacity: 0; transform: translateX(18px) scale(0.98); }5338  to   { opacity: 1; transform: translateX(0) scale(1); }5339}53405341/* ── Onboarding-mode restore screens (file import) ── */5342/* Used when MainImportView renders during onboarding (no vault yet).5343   Animates like a lock-screen transition. */5344.peach-lock-view {5345  position: absolute;5346  inset: 0;5347  display: flex;5348  flex-direction: column;5349  background:5350    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5351    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5352    var(--peach-bg);5353  z-index: 2;5354  overflow: hidden;5355  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5356}53575358.peach-lock-view-header {5359  display: flex;5360  align-items: center;5361  justify-content: space-between;5362  padding: 16px 18px 12px;5363  flex-shrink: 0;5364}53655366/* ───────── Settings: auto-lock select ───────── */5367.peach-settings-select {5368  font-family: "IBM Plex Mono", monospace;5369  font-size: 0.6875rem;5370  background: transparent;5371  border: 1px solid var(--peach-t3);5372  border-radius: 4px;5373  color: var(--peach-t1);5374  padding: 3px 6px;5375  cursor: pointer;5376  outline: none;5377}5378.peach-settings-select:focus {5379  border-color: var(--peach-accent);5380}53815382/* ───────── Duress status pill (new polished) ───────── */5383.peach-duress-status-pill {5384  font-family: "IBM Plex Mono", monospace;5385  font-size: 0.5625rem;5386  text-transform: uppercase;5387  letter-spacing: 0.12em;5388  padding: 2px 8px;5389  border-radius: 12px;5390  background: var(--peach-t3);5391  color: var(--peach-t2);5392  flex-shrink: 0;5393}5394.peach-duress-status-pill.is-active {5395  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5396  color: var(--peach-accent);5397}53985399/* ───────── Entry advanced disclosure (canary) ───────── */5400.peach-entry-advanced {5401  margin-top: 12px;5402  border-top: 1px solid var(--peach-t3);5403  padding-top: 10px;5404  position: relative;5405  z-index: 1;5406}5407.peach-entry-advanced-toggle {5408  display: flex;5409  align-items: center;5410  justify-content: space-between;5411  width: 100%;5412  background: transparent;5413  border: none;5414  cursor: pointer;5415  padding: 0;5416  color: var(--peach-t2);5417}5418.peach-canary-section {5419  margin-top: 10px;5420  display: grid;5421  gap: 6px;5422}54235424/* ───────── Import: merge/replace radio choices ───────── */5425.peach-import-choice {5426  display: flex;5427  align-items: flex-start;5428  gap: 10px;5429  padding: 8px 10px;5430  border: 1px solid var(--peach-t3);5431  border-radius: 10px;5432  cursor: pointer;5433  margin-bottom: 6px;5434  transition: border-color 120ms ease, background 120ms ease;5435}5436.peach-import-choice:hover {5437  border-color: var(--peach-accent);5438}5439.peach-import-choice input[type="radio"] {5440  margin-top: 3px;5441  accent-color: var(--peach-accent);5442  flex-shrink: 0;5443}5444.peach-import-choice-main {5445  display: flex;5446  flex-direction: column;5447  gap: 2px;5448  min-width: 0;5449}5450.peach-import-choice-label {5451  font-size: 0.75rem;5452  color: var(--peach-t0);5453}5454.peach-import-choice-sub {5455  font-size: 0.6875rem;5456  color: var(--peach-t2);5457  line-height: 1.5;5458}54595460/* ───────── Export: success confirmation strip ───────── */5461.peach-export-success {5462  display: flex;5463  align-items: flex-start;5464  gap: 10px;5465  padding: 12px;5466  border-radius: 12px;5467  border: 1px solid rgba(150, 175, 110, 0.3);5468  background: rgba(150, 175, 110, 0.08);5469  color: var(--peach-t0);5470  font-size: 0.75rem;5471  line-height: 1.55;5472}5473.peach-export-success-check {5474  color: rgba(150, 175, 110, 0.9);5475  font-size: 0.875rem;5476  flex-shrink: 0;5477}54785479/* ── Trash view ──────────────────────────────────────────────────────── */5480.peach-trash-entry-row {5481  display: flex;5482  align-items: center;5483  justify-content: space-between;5484  gap: 8px;5485  padding: 8px 0;5486  border-bottom: 1px solid var(--peach-border);5487}5488.peach-trash-entry-info {5489  flex: 1;5490  min-width: 0;5491  display: flex;5492  flex-direction: column;5493  gap: 2px;5494}5495.peach-trash-entry-title {5496  font-size: 0.8125rem;5497  color: var(--peach-t0);5498  overflow: hidden;5499  text-overflow: ellipsis;5500  white-space: nowrap;5501}5502.peach-trash-entry-meta {5503  font-family: var(--font-mono);5504  font-size: 0.5625rem;5505  color: var(--peach-t2);5506  letter-spacing: 0.04em;5507}5508.peach-trash-entry-actions {5509  display: flex;5510  align-items: center;5511  gap: 4px;5512  flex-shrink: 0;5513}5514.peach-trash-delete-btn {5515  background: transparent;5516  border: 0;5517  color: var(--peach-t3);5518  font-size: 1rem;5519  line-height: 1;5520  cursor: pointer;5521  padding: 2px 5px;5522  transition: color 0.15s;5523}5524.peach-trash-delete-btn:hover { color: var(--peach-breach); }5525.peach-trash-list {5526  overflow-y: auto;5527}5528.peach-trash-footer {5529  display: flex;5530  align-items: center;5531  gap: 8px;5532  padding: 8px 0 0;5533  border-top: 1px solid var(--peach-border);5534  margin-top: 4px;5535}5536.peach-trash-purge-all {5537  background: transparent;5538  border: 0;5539  color: var(--peach-t3);5540  font-size: 0.625rem;5541  cursor: pointer;5542  padding: 4px 0;5543  letter-spacing: 0.03em;5544  transition: color 0.2s;5545}5546.peach-trash-purge-all:hover { color: var(--peach-breach); }5547.peach-trash-purge-confirm-label {5548  font-size: 0.625rem;5549  color: var(--peach-t1);5550  flex: 1;5551}55525553/* ── Settings shortcuts grid ─────────────────────────────────────────── */5554.peach-shortcuts-grid {5555  display: grid;5556  grid-template-columns: auto 1fr;5557  gap: 6px 12px;5558  align-items: center;5559  padding: 4px 0;5560}5561.peach-shortcut-key {5562  font-family: var(--font-mono);5563  font-size: 0.625rem;5564  color: var(--peach-t0);5565  background: var(--peach-t3);5566  border-radius: 4px;5567  padding: 2px 6px;5568  white-space: nowrap;5569  text-align: center;5570}5571.peach-shortcut-desc {5572  font-size: 0.6875rem;5573  color: var(--peach-t1);5574}55755576/* ── Sort bar trash button ───────────────────────────────────────────── */5577.peach-sort-trash-btn {5578  display: flex;5579  align-items: center;5580  justify-content: center;5581  padding: 3px 5px;5582  background: transparent;5583  border: none;5584  cursor: pointer;5585  color: var(--peach-t2);5586  border-radius: 4px;5587  transition: color 140ms ease, background 140ms ease;5588}5589.peach-sort-trash-btn:hover {5590  color: var(--peach-t1);5591  background: var(--peach-t3);5592}5593.peach-sort-trash-btn.is-active {5594  color: var(--peach-accent);5595}55965597/* Accent color picker */5598.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5599.peach-accent-picker {5600  display: flex;5601  flex-wrap: wrap;5602  gap: 7px;5603  padding: 2px 0;5604}5605.peach-accent-swatch {5606  width: 22px;5607  height: 22px;5608  border-radius: 50%;5609  border: 2px solid transparent;5610  cursor: pointer;5611  padding: 0;5612  transition: transform 100ms;5613  outline-offset: 2px;5614}5615.peach-accent-swatch:hover { transform: scale(1.15); }5616.peach-accent-swatch.is-active {5617  border-color: var(--peach-t0);5618  transform: scale(1.1);5619}56205621/* Display font picker — swatch shows an "Aa" preview rendered with each5622   font option so the user can see what they're picking before they pick. */5623.peach-settings-row--font { align-items: flex-start; padding-top: 10px; }5624.peach-font-picker {5625  display: flex;5626  flex-wrap: wrap;5627  gap: 6px;5628  padding: 2px 0;5629  flex: 1;5630  justify-content: flex-end;5631}5632.peach-font-swatch {5633  display: flex;5634  flex-direction: column;5635  align-items: center;5636  gap: 2px;5637  padding: 4px 8px;5638  background: transparent;5639  border: 1px solid var(--peach-t3);5640  border-radius: 6px;5641  cursor: pointer;5642  transition: border-color 100ms, background 100ms;5643  min-width: 56px;5644}5645.peach-font-swatch:hover {5646  border-color: var(--peach-accent-dim);5647  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5648}5649.peach-font-swatch.is-active {5650  border-color: var(--peach-accent);5651  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5652}5653.peach-font-swatch-glyph {5654  font-size: 18px;5655  line-height: 1;5656  color: var(--peach-t0);5657}5658.peach-font-swatch[data-font-preview="cormorant-italic"] .peach-font-swatch-glyph {5659  font-family: "Cormorant Garamond", serif;5660  font-style: italic;5661  font-weight: 400;5662}5663.peach-font-swatch[data-font-preview="cormorant"] .peach-font-swatch-glyph {5664  font-family: "Cormorant Garamond", serif;5665  font-style: normal;5666  font-weight: 400;5667}5668.peach-font-swatch[data-font-preview="inter"] .peach-font-swatch-glyph {5669  font-family: "Inter Variable", "Inter", sans-serif;5670  font-style: normal;5671  font-weight: 400;5672}5673.peach-font-swatch[data-font-preview="system"] .peach-font-swatch-glyph {5674  font-family: system-ui, -apple-system, sans-serif;5675  font-style: normal;5676  font-weight: 400;5677}5678.peach-font-swatch-name {5679  font-family: var(--font-mono);5680  font-size: 0.5rem;5681  letter-spacing: 0.06em;5682  color: var(--peach-t2);5683  text-transform: lowercase;5684}56855686.peach-pill-group {5687  display: flex;5688  gap: 6px;5689}5690.peach-pill-group .peach-btn.is-active {5691  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5692  border-color: var(--peach-accent);5693  color: var(--peach-t0);5694}56955696/* ── Card entry styles ───────────────────────────────────────── */5697.peach-card-number {5698  font-family: var(--peach-mono);5699  letter-spacing: 0.08em;5700}57015702.peach-card-network-badge {5703  font-size: 0.625rem;5704  padding: 1px 5px;5705  border-radius: 4px;5706  border: 0.5px solid var(--peach-border);5707  color: var(--peach-text-dim);5708  margin-left: 6px;5709  vertical-align: middle;5710}57115712.peach-card-expiry-row {5713  display: flex;5714  align-items: center;5715  gap: 8px;5716}57175718.peach-card-expiry-sep {5719  color: var(--peach-text-dim);5720}57215722/* ── Pro tier — upgrade screen ──────────────────────────────── */5723.peach-pro-mark {5724  font-size: 0.5625rem;5725  color: var(--peach-accent);5726  margin-left: 6px;5727  vertical-align: super;5728  opacity: 0.7;5729}57305731.peach-pro-mini-badge {5732  display: block;5733  font-size: 0.625rem;5734  font-style: italic;5735  color: var(--peach-accent);5736  letter-spacing: 0.04em;5737  margin-top: -2px;5738  padding-left: 2px;5739  opacity: 0.85;5740  text-align: center;5741}57425743.peach-wordmark-stack {5744  display: inline-flex;5745  flex-direction: column;5746  align-items: center;5747}57485749/* ── Pro tier — upgrade page ─────────────────────────────────── */5750.peach-pro-upgrade {5751  display: flex;5752  flex-direction: column;5753  align-items: stretch;5754  gap: 10px;5755  padding: 0 4px 8px;5756}57575758.peach-pro-upgrade-hero {5759  display: flex;5760  flex-direction: column;5761  align-items: center;5762  gap: 4px;5763  padding: 10px 0 6px;5764}57655766.peach-pro-upgrade-mark-wrap {5767  display: flex;5768  align-items: center;5769  justify-content: center;5770  margin-bottom: 2px;5771}57725773.peach-pro-upgrade-mark {5774  width: 38px;5775  height: 38px;5776  opacity: 0.9;5777}57785779.peach-pro-upgrade-title {5780  font-family: var(--font-display, var(--font-ui));5781  font-size: 22px;5782  margin: 0;5783  color: var(--peach-t0);5784  letter-spacing: 0.01em;5785}57865787.peach-pro-upgrade-tagline {5788  margin: 0;5789  font-style: italic;5790  color: var(--peach-t2);5791  font-size: 0.6875rem;5792}57935794.peach-pro-features {5795  display: flex;5796  flex-direction: column;5797  gap: 8px;5798  border-top: 1px solid var(--peach-border);5799  border-bottom: 1px solid var(--peach-border);5800  padding: 10px 4px;5801}58025803.peach-pro-feature {5804  display: flex;5805  gap: 9px;5806  align-items: baseline;5807}58085809.peach-pro-feature-mark {5810  color: var(--peach-accent);5811  font-size: 0.6875rem;5812  flex-shrink: 0;5813  display: inline-block;5814  transform-origin: center;5815  opacity: 0.8;5816}58175818.peach-pro-feature-text {5819  display: flex;5820  flex-direction: column;5821  gap: 1px;5822}58235824.peach-pro-feature-name {5825  font-size: 0.75rem;5826  color: var(--peach-t0);5827}58285829.peach-pro-feature-desc {5830  font-size: 0.625rem;5831  color: var(--peach-t2);5832}58335834.peach-pro-feature.is-highlighted .peach-pro-feature-mark {5835  animation: peach-pulse-accent 600ms ease-out forwards;5836}58375838@keyframes peach-pulse-accent {5839  0%   { opacity: 1; transform: scale(1.4); }5840  100% { opacity: 0.7; transform: scale(1); }5841}58425843.peach-pro-upgrade-actions {5844  display: flex;5845  flex-direction: column;5846  align-items: center;5847  gap: 8px;5848  padding-top: 2px;5849}58505851.peach-pro-pricing {5852  margin: 0;5853  text-align: center;5854  font-size: 0.6875rem;5855  color: var(--peach-t2);5856  letter-spacing: 0.04em;5857}58585859.peach-pro-upgrade-cta {5860  align-self: center;5861  text-align: center;5862  text-decoration: none;5863  display: block;5864  padding: 9px 32px;5865  font-size: 0.8125rem;5866  min-width: 180px;5867}58685869.peach-pro-key-divider {5870  display: flex;5871  align-items: center;5872  gap: 8px;5873  width: 100%;5874  color: var(--peach-t3);5875  font-size: 0.625rem;5876  letter-spacing: 0.08em;5877}58785879.peach-pro-key-divider::before,5880.peach-pro-key-divider::after {5881  content: "";5882  flex: 1;5883  height: 1px;5884  background: var(--peach-border);5885}58865887.peach-pro-key-link {5888  background: transparent;5889  border: 1px solid var(--peach-border);5890  border-radius: 8px;5891  color: var(--peach-t1);5892  font-size: 0.75rem;5893  cursor: pointer;5894  align-self: stretch;5895  padding: 8px 12px;5896  text-align: center;5897  transition: border-color 0.2s, color 0.2s;5898}58995900.peach-pro-key-link:hover {5901  border-color: var(--peach-accent);5902  color: var(--peach-accent);5903}59045905/* ── Pro tier — key ceremony ─────────────────────────────────── */5906.peach-pro-key-ceremony {5907  display: flex;5908  flex-direction: column;5909  align-items: center;5910  gap: 12px;5911  padding: 20px 4px 16px;5912}59135914.peach-pro-key-ceremony .peach-lock-rune-string {5915  font-size: 1rem;5916  gap: 12px;5917  flex: 0;5918  justify-content: center;5919}59205921.peach-pro-key-ceremony-label {5922  margin: 0;5923  font-size: 0.6875rem;5924  color: var(--peach-t2);5925  font-style: italic;5926  letter-spacing: 0.04em;5927}59285929.peach-pro-key-input {5930  font-family: var(--font-mono, monospace);5931  letter-spacing: 0.06em;5932  text-align: center;5933  width: 100%;5934  box-sizing: border-box;5935}59365937.peach-pro-key-error {5938  margin: 0;5939  font-size: 0.75rem;5940  text-align: center;5941  color: var(--peach-breach, #e55);5942  padding: 0;5943}59445945.peach-pro-key-activate {5946  width: 100%;5947  text-align: center;5948  box-sizing: border-box;5949  padding: 10px 20px;5950  font-size: 0.8125rem;5951}59525953.peach-pro-key-cancel {5954  background: transparent;5955  border: 0;5956  color: var(--peach-t2);5957  font-size: 0.6875rem;5958  cursor: pointer;5959  padding: 2px 8px;5960  transition: color 0.2s;5961}59625963.peach-pro-key-cancel:hover { color: var(--peach-accent); }59645965/* ── Pro tier — active state ─────────────────────────────────── */5966.peach-pro-active {5967  display: flex;5968  flex-direction: column;5969  align-items: center;5970  gap: 0;5971  padding: 8px 4px 16px;5972  min-height: 280px;5973}59745975.peach-pro-active-hero {5976  display: flex;5977  flex-direction: column;5978  align-items: center;5979  gap: 6px;5980  padding: 20px 0 22px;5981}59825983.peach-pro-active-mark-wrap {5984  display: flex;5985  align-items: center;5986  justify-content: center;5987  margin-bottom: 4px;5988}59895990.peach-pro-active-mark {5991  width: 60px;5992  height: 60px;5993  filter:5994    drop-shadow(0 0 10px color-mix(in srgb, var(--peach-accent) 55%, transparent))5995    drop-shadow(0 0 26px color-mix(in srgb, var(--peach-accent) 22%, transparent));5996}59975998.peach-pro-active-title {5999  font-family: var(--font-display, var(--font-ui));6000  font-size: 26px;6001  margin: 0;6002  color: var(--peach-t0);6003  letter-spacing: 0.01em;6004}60056006.peach-pro-active-since {6007  margin: 0;6008  font-size: 0.6875rem;6009  color: var(--peach-t2);6010  font-style: italic;6011}60126013.peach-pro-active-features {6014  display: flex;6015  flex-direction: column;6016  gap: 8px;6017  width: 100%;6018  padding: 14px 8px 0;6019  border-top: 1px solid var(--peach-border);6020  flex: 1;6021}60226023.peach-pro-active-feature {6024  display: flex;6025  align-items: center;6026  gap: 9px;6027}60286029.peach-pro-active-feature-mark {6030  color: var(--peach-accent);6031  font-size: 0.625rem;6032  opacity: 0.65;6033  flex-shrink: 0;6034}60356036.peach-pro-active-feature-name {6037  font-size: 0.75rem;6038  color: var(--peach-t1);6039}60406041.peach-pro-deactivate {6042  align-self: center;6043  background: transparent;6044  border: 0;6045  color: var(--peach-t3);6046  font-size: 0.625rem;6047  cursor: pointer;6048  padding: 8px 0 0;6049  margin-top: 16px;6050  letter-spacing: 0.03em;6051  transition: color 0.2s;6052}60536054.peach-pro-deactivate:hover { color: var(--peach-t2); }60556056.peach-pro-deactivate:disabled {6057  opacity: 0.5;6058  cursor: default;6059}60606061/* ── Pro advanced health remediation queue ──────────────────── */6062.peach-health-pro-queue {6063  display: flex;6064  flex-direction: column;6065  gap: 10px;6066  padding: 12px;6067  margin: 0 0 12px;6068  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6069  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6070  border-radius: 10px;6071}60726073.peach-health-pro-queue-head {6074  display: flex;6075  justify-content: space-between;6076  align-items: baseline;6077}60786079.peach-health-pro-queue-title {6080  font-size: 0.75rem;6081  font-weight: 500;6082  letter-spacing: 0.04em;6083  text-transform: uppercase;6084  color: var(--peach-accent);6085}60866087.peach-health-pro-queue-score {6088  font-size: 0.6875rem;6089  color: var(--peach-t2);6090}60916092.peach-health-pro-row {6093  display: flex;6094  gap: 10px;6095  align-items: center;6096  padding: 8px 0;6097  border-top: 1px solid var(--peach-border);6098}60996100.peach-health-pro-row-info {6101  flex: 1;6102  display: flex;6103  flex-direction: column;6104  gap: 4px;6105  min-width: 0;6106}61076108.peach-health-pro-row-name {6109  font-size: 0.8125rem;6110  color: var(--peach-t0);6111  overflow: hidden;6112  text-overflow: ellipsis;6113  white-space: nowrap;6114}61156116.peach-health-pro-row-meta {6117  font-size: 0.6875rem;6118  color: var(--peach-t2);6119}61206121.peach-health-pro-bar {6122  height: 2px;6123  background: var(--peach-border);6124  border-radius: 2px;6125  overflow: hidden;6126  margin-top: 2px;6127}61286129.peach-health-pro-bar-fill {6130  height: 100%;6131  background: var(--peach-accent);6132  transition: width 200ms ease-out;6133}61346135/* ── Pro activation celebration ── */6136@keyframes peach-pro-bloom {6137  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6138  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6139                 drop-shadow(0 0 48px var(--peach-glow)); }6140  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6141}61426143@keyframes peach-pro-wordmark-in {6144  from { opacity: 0; transform: translateY(4px); }6145  to   { opacity: 1; transform: translateY(0); }6146}61476148@keyframes peach-pro-fade-out {6149  from { opacity: 1; }6150  to   { opacity: 0; }6151}61526153.peach-pro-celebration {6154  background:6155    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6156    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6157    var(--peach-bg);6158  border: 1px solid var(--peach-t3);6159  box-shadow:6160    0 2px 8px rgba(0,0,0,0.55),6161    0 14px 48px rgba(0,0,0,0.7),6162    0 0 0 1px rgba(240,232,216,0.04);6163  overflow: hidden;6164  width: 320px;6165  height: 520px;6166  display: flex;6167  flex-direction: column;6168  align-items: center;6169  justify-content: center;6170  gap: 8px;6171  padding: 32px 24px;6172  text-align: center;6173}61746175.peach-pro-celebration.is-leaving {6176  animation: peach-pro-fade-out 400ms ease forwards;6177}61786179.peach-pro-bloom-target {6180  display: flex;6181  align-items: center;6182  justify-content: center;6183  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6184  margin-bottom: 12px;6185}61866187.peach-pro-bloom-icon {6188  width: 48px;6189  height: 48px;6190}61916192.peach-pro-wordmark {6193  font-family: var(--font-display);6194  font-size: 22px;6195  font-style: italic;6196  font-weight: 400;6197  color: var(--peach-accent);6198  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6199}62006201.peach-pro-thankyou {6202  font-size: 0.75rem;6203  font-style: italic;6204  color: var(--peach-t2);6205  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6206}620762086209/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6210.peach-pro-notice-banner {6211  display: flex;6212  align-items: center;6213  gap: 8px;6214  padding: 7px 12px;6215  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6216  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6217  font-size: 0.6875rem;6218  color: var(--peach-t2);6219  font-family: "IBM Plex Mono", monospace;6220  flex-shrink: 0;6221}62226223.peach-pro-notice-link {6224  background: none;6225  border: none;6226  padding: 0;6227  cursor: pointer;6228  font-size: 0.6875rem;6229  color: var(--peach-accent);6230  font-family: "IBM Plex Mono", monospace;6231  margin-left: auto;6232  white-space: nowrap;6233}62346235.peach-pro-notice-close {6236  background: none;6237  border: none;6238  padding: 0 0 0 4px;6239  cursor: pointer;6240  font-size: 0.625rem;6241  color: var(--peach-t3);6242  line-height: 1;6243}62446245/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6246   Renders over whatever view is showing. 60-second expiry; the popup ticks6247   the countdown each second and clears the banner when it hits zero. */6248.peach-pair-request-banner {6249  display: flex;6250  flex-direction: column;6251  gap: 8px;6252  padding: 10px 12px;6253  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6254  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6255  font-family: "IBM Plex Mono", monospace;6256  flex-shrink: 0;6257}62586259.peach-pair-toast {6260  padding: 8px 12px;6261  font-family: "IBM Plex Mono", monospace;6262  font-size: 0.75rem;6263  color: var(--peach-t1);6264  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6265  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6266  flex-shrink: 0;6267  text-align: center;6268}62696270.peach-pair-toast strong {6271  color: var(--peach-t0);6272  font-weight: 500;6273}62746275.peach-pair-request-header {6276  display: flex;6277  align-items: center;6278  gap: 8px;6279  font-size: 0.75rem;6280  color: var(--peach-t1);6281}62826283.peach-pair-request-mark {6284  font-size: 0.875rem;6285  display: inline-flex;6286  align-items: center;6287}62886289.peach-pair-request-icon {6290  width: 1em;6291  height: 1em;6292}62936294.peach-pair-request-title {6295  font-weight: 600;6296  color: var(--peach-t0);6297}62986299.peach-pair-request-countdown {6300  margin-left: auto;6301  font-variant-numeric: tabular-nums;6302  color: var(--peach-t2);6303  font-size: 0.6875rem;6304}63056306.peach-pair-request-body {6307  margin: 0;6308  font-size: 0.75rem;6309  color: var(--peach-t1);6310  line-height: 1.4;6311}63126313.peach-pair-request-body strong {6314  color: var(--peach-t0);6315  font-weight: 600;6316}63176318.peach-pair-request-actions {6319  display: flex;6320  gap: 8px;6321  justify-content: flex-end;6322}63236324/* ─── First-run onboarding ──────────────────────────────────────────────6325   Three-card welcome shown once before vault creation. The PeachScript6326   rune background drifts behind everything at very low opacity — it's6327   atmosphere, not focus. The cards themselves use the same panel6328   language as the rest of the popup so the transition into NewVault is6329   continuous, not a jarring switch of visual register. */63306331.peach-onboarding {6332  position: relative;6333  display: flex;6334  flex-direction: column;6335  width: 100%;6336  height: 100%;6337  padding: 16px 16px 18px;6338  box-sizing: border-box;6339  overflow: hidden;6340  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6341}63426343.peach-onboarding.is-completing {6344  animation: peach-onboard-exit 200ms ease-out forwards;6345}63466347.peach-rune-background {6348  position: absolute;6349  inset: 0;6350  width: 100%;6351  height: 100%;6352  pointer-events: none;6353  z-index: 0;6354  transition: opacity 500ms ease-out;6355}63566357.peach-onboarding.is-completing .peach-rune-background {6358  opacity: 0;6359}63606361.peach-onboarding-header {6362  position: relative;6363  z-index: 1;6364  display: flex;6365  align-items: center;6366  margin-bottom: 14px;6367}63686369.peach-onboarding-card {6370  position: relative;6371  z-index: 1;6372  flex: 1;6373  display: flex;6374  flex-direction: column;6375  gap: 10px;6376  padding: 22px 20px;6377  border-radius: 16px;6378  border: 1px solid var(--peach-t3);6379  background:6380    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6381  backdrop-filter: blur(3px);6382  -webkit-backdrop-filter: blur(3px);6383  box-shadow:6384    inset 0 1px 0 rgba(240, 232, 216, 0.04),6385    0 12px 28px rgba(0, 0, 0, 0.12);6386  cursor: pointer;6387  user-select: none;6388  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6389}63906391.peach-onboarding-card.is-exiting {6392  animation: peach-card-out 120ms ease-in forwards;6393  pointer-events: none;6394}63956396.peach-onboarding-card-headline {6397  margin: 0;6398  font-family: var(--font-display);6399  font-style: italic;6400  font-weight: 400;6401  font-size: 22px;6402  line-height: 1.05;6403  color: var(--peach-t0);6404  white-space: pre-line;6405}64066407.peach-onboarding-divider {6408  margin: 4px 0 6px;6409  border: 0;6410  border-top: 1px solid var(--peach-t3);6411  width: 100%;6412}64136414.peach-onboarding-body {6415  margin: 0;6416  font-size: 0.8125rem;6417  line-height: 1.6;6418  color: var(--peach-t1);6419}64206421.peach-onboarding-warning {6422  display: flex;6423  align-items: flex-start;6424  gap: 8px;6425  margin: 6px 0 0;6426  padding-top: 8px;6427  border-top: 1px dashed var(--peach-t3);6428  font-size: 0.8125rem;6429  line-height: 1.5;6430  color: var(--peach-t1);6431}64326433.peach-onboarding-warning-icon {6434  color: var(--peach-accent);6435  font-size: 0.8125rem;6436  line-height: 1.5;6437  flex: 0 0 auto;6438}64396440.peach-onboarding-nav {6441  position: relative;6442  z-index: 1;6443  display: flex;6444  align-items: center;6445  justify-content: space-between;6446  margin-top: 12px;6447  padding: 0 4px;6448}64496450.peach-onboarding-dots {6451  display: flex;6452  align-items: center;6453  gap: 6px;6454}64556456.peach-onboarding-dot {6457  width: 6px;6458  height: 6px;6459  border-radius: 50%;6460  background: var(--peach-t2);6461  transition: width 200ms ease, height 200ms ease, background 200ms ease;6462}64636464.peach-onboarding-dot.is-active {6465  width: 8px;6466  height: 8px;6467  background: var(--peach-accent);6468}64696470.peach-onboarding-next {6471  background: none;6472  border: none;6473  padding: 4px 0;6474  cursor: pointer;6475  font-family: "IBM Plex Mono", monospace;6476  font-size: 0.6875rem;6477  letter-spacing: 0.04em;6478  color: var(--peach-t1);6479  transition: color 150ms ease;6480}64816482.peach-onboarding-next:hover {6483  color: var(--peach-t0);6484}64856486.peach-onboarding-next:disabled {6487  opacity: 0.5;6488  cursor: default;6489}64906491.peach-onboarding-mobile-card-buttons {6492  display: flex;6493  flex-direction: column;6494  gap: 8px;6495  margin-top: 16px;6496}64976498@keyframes peach-onboard-enter {6499  from { opacity: 0; transform: translateY(20px); }6500  to   { opacity: 1; transform: translateY(0); }6501}65026503@keyframes peach-onboard-exit {6504  from { opacity: 1; }6505  to   { opacity: 0; }6506}65076508@keyframes peach-card-in {6509  from { opacity: 0; transform: translateX(12px); }6510  to   { opacity: 1; transform: translateX(0); }6511}65126513@keyframes peach-card-out {6514  from { opacity: 1; transform: translateX(0); }6515  to   { opacity: 0; transform: translateX(-12px); }6516}65176518/* ─── New vault screen — matched to onboarding card language ─────────── */65196520.peach-newvault {6521  position: relative;6522  display: flex;6523  flex-direction: column;6524  gap: 12px;6525  padding: 16px 16px 18px;6526  overflow: hidden;6527}65286529/* Suppress the warm-blob ambient art inherited from .lock-screen — the6530   new vault card now carries the visual weight. */6531.peach-newvault::before {6532  content: none;6533}65346535.peach-newvault-header {6536  position: relative;6537  z-index: 2;6538  display: flex;6539  align-items: center;6540  gap: 10px;6541  margin-bottom: 2px;6542}65436544.peach-newvault-back {6545  display: inline-flex;6546  align-items: center;6547  gap: 4px;6548  background: transparent;6549  border: none;6550  color: var(--peach-t2);6551  font-family: "IBM Plex Mono", monospace;6552  font-size: 0.625rem;6553  letter-spacing: 0.06em;6554  cursor: pointer;6555  padding: 4px 6px;6556  border-radius: 6px;6557  transition: color 120ms ease, background 120ms ease;6558}65596560.peach-newvault-back:hover {6561  color: var(--peach-t0);6562  background: rgba(240, 232, 216, 0.04);6563}65646565.peach-newvault-mark {6566  position: absolute;6567  right: -12px;6568  top: 6px;6569  width: 110px;6570  height: 110px;6571  pointer-events: none;6572  opacity: 0.10;6573  filter: saturate(0.9);6574  z-index: 0;6575}6576.peach-newvault-mark-art {6577  width: 100%;6578  height: 100%;6579}6580.peach-newvault-mark-art path:nth-child(2),6581.peach-newvault-mark-art path:nth-child(3) {6582  stroke: rgba(123, 144, 96, 0.88);6583  fill: rgba(123, 144, 96, 0.88);6584}65856586.peach-newvault-card {6587  position: relative;6588  z-index: 1;6589  display: flex;6590  flex-direction: column;6591  gap: 12px;6592  padding: 22px 20px 18px;6593  border-radius: 16px;6594  border: 1px solid var(--peach-t3);6595  background:6596    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6597  backdrop-filter: blur(3px);6598  -webkit-backdrop-filter: blur(3px);6599  box-shadow:6600    inset 0 1px 0 rgba(240, 232, 216, 0.04),6601    0 12px 28px rgba(0, 0, 0, 0.12);6602  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6603}66046605.peach-newvault-headline {6606  margin: 0;6607  font-family: var(--font-display);6608  font-style: italic;6609  font-weight: 400;6610  font-size: 24px;6611  line-height: 1.05;6612  color: var(--peach-t0);6613  white-space: pre-line;6614}66156616.peach-newvault-divider {6617  margin: 2px 0 4px;6618  border: 0;6619  border-top: 1px solid var(--peach-t3);6620  width: 100%;6621}66226623.peach-newvault-field {6624  display: flex;6625  flex-direction: column;6626  gap: 4px;6627}66286629.peach-newvault-label-row {6630  display: flex;6631  align-items: center;6632  justify-content: space-between;6633}66346635/* Monospace input scaled to the card. Replaces the 22px unlock-input6636   so the placeholder no longer overflows and the field reads as part6637   of the same surface as the body copy. */6638.peach-newvault-input {6639  font-size: 0.875rem;6640  letter-spacing: 0.18em;6641  padding: 8px 0;6642}6643.peach-newvault-input::placeholder {6644  letter-spacing: 0.18em;6645  color: var(--peach-t2);6646}66476648.peach-newvault-hint {6649  margin: 2px 0 0;6650  font-family: "IBM Plex Mono", monospace;6651  font-size: 0.625rem;6652  color: var(--peach-t2);6653  letter-spacing: 0.04em;6654}66556656.peach-newvault-submit {6657  margin-top: 4px;6658}66596660.peach-newvault-warning {6661  display: flex;6662  align-items: flex-start;6663  gap: 8px;6664  margin: 4px 0 0;6665  padding-top: 10px;6666  border-top: 1px dashed var(--peach-t3);6667  font-size: 0.75rem;6668  line-height: 1.5;6669  color: var(--peach-t1);6670}66716672.peach-newvault-warning-icon {6673  color: var(--peach-accent);6674  font-size: 0.8125rem;6675  line-height: 1.4;6676  flex: 0 0 auto;6677}66786679.peach-newvault-footer {6680  position: relative;6681  z-index: 1;6682  display: flex;6683  flex-direction: column;6684  gap: 4px;6685  padding: 4px 4px 0;6686}66876688/* Settings body — warm accent gradient gives the glass something to blur against */6689.peach-settings-body {6690  background:6691    radial-gradient(6692      ellipse at 30% 20%,6693      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,6694      transparent 60%6695    );6696}66976698/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */6699/* ── Danger cards (Replace + Destroy) ────────────────────────────────────6700 * Two severity levels: "warn" for actions that are dangerous-but-recoverable6701 * (replacing the vault from a backup file) and "hazard" for actions that6702 * are absolutely irreversible (Panic). Both use the same card scaffold so6703 * they read as a pair, but the colour family signals the severity at a6704 * glance — yellow for caution, red for don't.6705 */6706.peach-danger-card {6707  --danger-tint: 235, 158, 52; /* amber */6708  display: flex;6709  flex-direction: column;6710  gap: 8px;6711  padding: 14px;6712  margin-top: 10px;6713  border-radius: 12px;6714  border: 1px solid rgba(var(--danger-tint), 0.32);6715  background:6716    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),6717    rgba(var(--danger-tint), 0.04);6718  box-shadow:6719    inset 0 1px 0 rgba(var(--danger-tint), 0.08),6720    0 0 24px rgba(var(--danger-tint), 0.04);6721  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;6722}67236724.peach-danger-card:hover {6725  border-color: rgba(var(--danger-tint), 0.55);6726  box-shadow:6727    inset 0 1px 0 rgba(var(--danger-tint), 0.12),6728    0 0 36px rgba(var(--danger-tint), 0.10);6729}67306731.peach-danger-card--hazard {6732  --danger-tint: 220, 38, 38; /* red */6733}67346735.peach-danger-card-head {6736  display: flex;6737  align-items: center;6738  gap: 10px;6739}67406741.peach-danger-card-glyph {6742  width: 28px;6743  height: 28px;6744  flex-shrink: 0;6745  display: flex;6746  align-items: center;6747  justify-content: center;6748  border-radius: 8px;6749  background: rgba(var(--danger-tint), 0.12);6750  color: rgba(var(--danger-tint), 0.95);6751  font-size: 1rem;6752  line-height: 1;6753}67546755.peach-danger-card-title {6756  margin: 0;6757  font-size: 0.8125rem;6758  font-weight: 600;6759  color: rgba(var(--danger-tint), 0.92);6760  letter-spacing: 0.01em;6761}67626763.peach-danger-card-copy {6764  margin: 0;6765  font-size: 0.6875rem;6766  line-height: 1.5;6767  color: var(--peach-t2);6768}67696770.peach-danger-card-button {6771  width: 100%;6772  padding: 9px;6773  margin-top: 4px;6774  background: transparent;6775  border: 1px solid rgba(var(--danger-tint), 0.45);6776  border-radius: 8px;6777  color: rgba(var(--danger-tint), 0.9);6778  font-size: 0.75rem;6779  font-weight: 500;6780  letter-spacing: 0.02em;6781  cursor: pointer;6782  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;6783}67846785.peach-danger-card-button:hover {6786  background: rgba(var(--danger-tint), 0.10);6787  border-color: rgba(var(--danger-tint), 0.75);6788  color: rgb(var(--danger-tint));6789}67906791/* ── Panic flow (three-step destruction) ───────────────────────────────── */6792.peach-panic {6793  display: flex;6794  flex-direction: column;6795  flex: 1;6796  min-height: 0;6797  padding: 28px 20px 20px;6798  gap: 18px;6799  overflow-y: auto;6800  scrollbar-width: none;6801  -ms-overflow-style: none;6802}68036804.peach-panic::-webkit-scrollbar { display: none; }68056806.peach-panic-step2 {6807  background: rgba(220, 38, 38, 0.04);6808}68096810.peach-panic-step3 {6811  position: relative;6812  background: #0f0505;6813  color: #ffffff;6814  overflow: hidden;6815}68166817.peach-panic-rune-bg {6818  position: absolute;6819  inset: 0;6820  opacity: 0.22;6821  pointer-events: none;6822  overflow: hidden;6823}68246825.peach-panic-rune-bg canvas {6826  width: 100% !important;6827  height: 100% !important;6828}68296830.peach-panic-icon {6831  font-size: 32px;6832  color: rgb(220, 38, 38);6833  line-height: 1;6834}68356836.peach-panic-title {6837  margin: 0;6838  font-size: 18px;6839  font-weight: 500;6840  color: var(--peach-t1);6841}68426843.peach-panic-title--severe {6844  font-size: 20px;6845  font-weight: 700;6846  color: rgb(220, 38, 38);6847}68486849.peach-panic-body {6850  margin: 0;6851  font-size: 0.8125rem;6852  line-height: 1.55;6853  color: var(--peach-t2);6854}68556856.peach-panic-body--severe {6857  color: rgba(220, 38, 38, 0.85);6858}68596860.peach-panic-body--final {6861  font-size: 1rem;6862  font-weight: 700;6863  color: rgb(255, 80, 80);6864  line-height: 1.4;6865}68666867.peach-panic-body--final-intro {6868  font-size: 1rem;6869  color: #ffffff;6870  font-weight: 400;6871}68726873.peach-panic-divider {6874  height: 1px;6875  background: rgba(255, 255, 255, 0.08);6876  margin: 4px 0;6877}68786879.peach-panic-confirm-input {6880  width: 100%;6881  padding: 10px 12px;6882  background: rgba(255, 255, 255, 0.02);6883  border: 1px solid rgba(220, 38, 38, 0.4);6884  border-radius: 8px;6885  color: var(--peach-t1);6886  font-family: "IBM Plex Mono", monospace;6887  font-size: 0.875rem;6888  letter-spacing: 0.12em;6889  text-transform: uppercase;6890}68916892.peach-panic-confirm-input:focus {6893  outline: none;6894  border-color: rgb(220, 38, 38);6895}68966897.peach-panic-confirm-input--match {6898  border-color: rgb(220, 38, 38);6899  color: rgb(220, 38, 38);6900}69016902.peach-panic-confirm-label {6903  font-size: 0.6875rem;6904  color: var(--peach-t2);6905  margin: 0 0 -8px;6906  letter-spacing: 0.06em;6907}69086909.peach-panic-actions {6910  display: flex;6911  flex-direction: column;6912  gap: 10px;6913  margin-top: auto;6914}69156916.peach-panic-button {6917  width: 100%;6918  padding: 12px;6919  border-radius: 8px;6920  font-size: 0.8125rem;6921  cursor: pointer;6922  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;6923}69246925.peach-panic-button--primary {6926  background: var(--peach-accent);6927  border: 1px solid var(--peach-accent);6928  color: #ffffff;6929  font-weight: 600;6930}69316932.peach-panic-button--primary:hover {6933  background: color-mix(in srgb, var(--peach-accent) 88%, white);6934}69356936.peach-panic-button--danger {6937  background: rgb(220, 38, 38);6938  border: 1px solid rgb(220, 38, 38);6939  color: #ffffff;6940  font-weight: 600;6941}69426943.peach-panic-button--danger:disabled {6944  opacity: 0.35;6945  cursor: not-allowed;6946}69476948.peach-panic-button--ghost {6949  background: transparent;6950  border: 1px solid rgba(255, 255, 255, 0.18);6951  color: var(--peach-t2);6952}69536954.peach-panic-button--ghost:hover {6955  border-color: rgba(255, 255, 255, 0.32);6956  color: var(--peach-t1);6957}69586959.peach-panic-link {6960  background: transparent;6961  border: none;6962  padding: 4px 0;6963  color: rgba(220, 38, 38, 0.65);6964  font-size: 0.75rem;6965  cursor: pointer;6966  text-align: left;6967  text-decoration: underline;6968  text-underline-offset: 3px;6969}69706971.peach-panic-link:hover {6972  color: rgb(220, 38, 38);6973}69746975.peach-panic-bar {6976  background: rgb(220, 38, 38);6977  padding: 16px 20px;6978  margin: -28px -20px 0;6979  text-align: center;6980  font-size: 0.8125rem;6981  font-weight: 700;6982  letter-spacing: 0.12em;6983  color: #ffffff;6984}69856986.peach-panic-final-button {6987  width: 100%;6988  padding: 14px;6989  background: rgb(220, 38, 38);6990  border: none;6991  border-radius: 8px;6992  color: #ffffff;6993  font-size: 0.875rem;6994  font-weight: 700;6995  letter-spacing: 0.08em;6996  text-transform: uppercase;6997  cursor: pointer;6998  animation: peach-panic-pulse 2s ease-in-out infinite;6999}70007001.peach-settings-license {7002  margin-top: 10px;7003  padding-top: 10px;7004  border-top: 1px solid var(--peach-t3);7005}70067007.peach-settings-label {7008  font-size: 0.625rem;7009  letter-spacing: 0.08em;7010  color: var(--peach-t3);7011  display: block;7012  margin-bottom: 6px;7013}70147015.peach-settings-license-row {7016  display: flex;7017  align-items: center;7018  justify-content: space-between;7019  gap: 8px;7020}70217022.peach-settings-license-key {7023  font-family: 'IBM Plex Mono', monospace;7024  font-size: 0.75rem;7025  color: var(--peach-t0);7026  letter-spacing: 0.04em;7027  word-break: break-all;7028}70297030.peach-settings-license-copy {7031  font-size: 0.6875rem;7032  color: var(--peach-accent);7033  background: transparent;7034  border: none;7035  cursor: pointer;7036  padding: 4px 8px;7037  border-radius: 4px;7038  flex-shrink: 0;7039  transition: opacity 150ms ease;7040}70417042.peach-settings-license-copy:hover {7043  opacity: 0.75;7044}70457046@keyframes peach-panic-pulse {7047  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7048  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7049}70507051[data-motion="reduce"] .peach-panic-final-button {7052  animation: none;7053}70547055/* Vault History — Settings → Vault sub-view */70567057.peach-history-list {7058  border: 1px solid var(--peach-border);7059  border-radius: 8px;7060  overflow: hidden;7061  margin: 8px 0 4px;7062}70637064.peach-history-row {7065  display: flex;7066  align-items: center;7067  justify-content: space-between;7068  padding: 9px 12px;7069  gap: 10px;7070  border-bottom: 1px solid var(--peach-border);7071}70727073.peach-history-row:last-child {7074  border-bottom: none;7075}70767077.peach-history-meta {7078  display: flex;7079  flex-direction: column;7080  gap: 2px;7081  min-width: 0;7082  flex: 1;7083}70847085.peach-history-time {7086  font-size: 0.75rem;7087  font-family: 'IBM Plex Mono', ui-monospace, monospace;7088  color: var(--peach-t0);7089  white-space: nowrap;7090  overflow: hidden;7091  text-overflow: ellipsis;7092}70937094.peach-history-sub {7095  font-size: 0.625rem;7096  color: var(--peach-t2);7097  letter-spacing: 0.06em;7098  text-transform: uppercase;7099  white-space: nowrap;7100  overflow: hidden;7101  text-overflow: ellipsis;7102}71037104.peach-history-btn {7105  flex-shrink: 0;7106  white-space: nowrap;7107  min-width: 56px;7108  text-align: center;7109}71107111.peach-history-btn.is-busy {7112  opacity: 0.65;7113}71147115.peach-history-footer {7116  font-size: 0.625rem;7117  color: var(--peach-t3);7118  letter-spacing: 0.05em;7119  text-align: right;7120  margin: 0;7121  padding: 2px 0 0;7122}71237124/* ── Context menu + swipe-copy flash ─────────────────────── */7125.peach-context-menu-backdrop {7126  position: fixed;7127  inset: 0;7128  background: rgba(0, 0, 0, 0.45);7129  z-index: 100;7130  display: flex;7131  align-items: flex-end;7132  justify-content: center;7133  animation: peach-ctx-fade 140ms ease both;7134}7135.peach-context-menu {7136  width: min(360px, calc(100vw - 24px));7137  margin-bottom: max(env(safe-area-inset-bottom), 12px);7138  background: var(--peach-bg);7139  border: 1px solid var(--peach-t3);7140  border-radius: 14px;7141  padding: 6px;7142  display: flex;7143  flex-direction: column;7144  gap: 2px;7145  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7146  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7147}7148@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7149@keyframes peach-ctx-rise {7150  from { transform: translateY(16px); opacity: 0; }7151  to   { transform: translateY(0);    opacity: 1; }7152}7153.peach-context-menu-item {7154  background: transparent;7155  color: var(--peach-t0);7156  border: 0;7157  border-radius: 10px;7158  padding: 12px 14px;7159  text-align: left;7160  font: inherit;7161  cursor: pointer;7162}7163.peach-context-menu-item:hover,7164.peach-context-menu-item:focus-visible {7165  background: var(--peach-t3);7166}7167.peach-context-menu-item--danger {7168  color: var(--peach-health-bad, #d96868);7169}7170.peach-context-menu-item--cancel {7171  color: var(--peach-t2);7172  margin-top: 4px;7173  border-top: 1px solid var(--peach-t3);7174  border-radius: 0 0 10px 10px;7175}71767177/* Swipe-to-copy flash */7178.peach-entry-row.is-copy-flash {7179  animation: peach-copy-flash 600ms ease both;7180}7181@keyframes peach-copy-flash {7182  0%   { background: transparent; }7183  20%  { background: rgba(217, 153, 51, 0.32); }7184  100% { background: transparent; }7185}71867187html { font-size: 16px; }71887189/* ── Recovery word entry ─────────────────────────────────────────── */7190.peach-lock-recover-link {7191  display: block;7192  width: 100%;7193  margin-top: 12px;7194  background: none;7195  border: none;7196  font-family: "IBM Plex Mono", monospace;7197  font-size: 0.625rem;7198  letter-spacing: 0.06em;7199  color: var(--peach-t2);7200  cursor: pointer;7201  text-align: center;7202  padding: 4px;7203  transition: color 120ms ease;7204}7205.peach-lock-recover-link:hover {7206  color: var(--peach-t0);7207}72087209.lock-screen--recovery {7210  display: flex;7211  flex-direction: column;7212  align-items: center;7213  padding: 0 24px 32px;7214  overflow-y: auto;7215}72167217.peach-recovery-header {7218  text-align: center;7219  margin-bottom: 24px;7220  margin-top: 8px;7221}7222.peach-recovery-header .peach-onboarding-headline {7223  font-size: 1.25rem;7224  font-weight: 300;7225  letter-spacing: 0.02em;7226  margin: 0 0 6px;7227}7228.peach-recovery-header .peach-hint {7229  font-family: "IBM Plex Mono", monospace;7230  font-size: 0.625rem;7231  color: var(--peach-t2);7232  letter-spacing: 0.04em;7233  margin: 0;7234}72357236/* 12-word grid: 3 columns × 4 rows, responsive */7237.peach-recovery-grid {7238  display: grid;7239  grid-template-columns: repeat(3, 1fr);7240  gap: 8px 10px;7241  width: 100%;7242  margin-bottom: 16px;7243}72447245.peach-recovery-word-slot {7246  display: flex;7247  align-items: center;7248  gap: 5px;7249}72507251.peach-recovery-word-index {7252  font-family: "IBM Plex Mono", monospace;7253  font-size: 0.5rem;7254  color: var(--peach-t2);7255  min-width: 14px;7256  text-align: right;7257  letter-spacing: 0.04em;7258}72597260.peach-recovery-word-input {7261  flex: 1;7262  background: transparent;7263  border: none;7264  border-bottom: 1px solid var(--peach-t3);7265  color: var(--peach-t0);7266  font-family: "IBM Plex Mono", monospace;7267  font-size: 0.6875rem;7268  letter-spacing: 0.06em;7269  padding: 4px 2px 3px;7270  outline: none;7271  text-transform: lowercase;7272  transition: border-color 120ms ease;7273  /* Prevent browser suggestions from showing on input */7274  autocomplete: off;7275  -webkit-autocomplete: off;7276}7277.peach-recovery-word-input::placeholder {7278  color: var(--peach-t3);7279}7280.peach-recovery-word-input:focus {7281  border-bottom-color: var(--peach-accent);7282}72837284.peach-recovery-submit {7285  width: 100%;7286  margin-top: 8px;7287}72887289.peach-recovery-new-password-form {7290  width: 100%;7291  display: flex;7292  flex-direction: column;7293  gap: 16px;7294  margin-bottom: 8px;7295}7296.peach-recovery-new-password-form .peach-newvault-field {7297  display: flex;7298  flex-direction: column;7299  gap: 4px;7300}73017302/* ── Recovery words display (post-create) ────────────────────────── */7303.lock-screen--recovery-display {7304  display: flex;7305  flex-direction: column;7306  align-items: center;7307  padding: 0 20px 28px;7308  overflow-y: auto;7309}73107311.peach-recovery-words-display {7312  width: 100%;7313  margin-bottom: 20px;7314  border: 1px solid var(--peach-t3);7315  border-radius: 8px;7316  padding: 12px 14px;7317  background: rgba(245, 240, 234, 0.04);7318}73197320.peach-recovery-words-label {7321  font-family: "IBM Plex Mono", monospace;7322  font-size: 0.5rem;7323  letter-spacing: 0.08em;7324  color: var(--peach-t2);7325  text-transform: uppercase;7326  margin-bottom: 10px;7327}73287329.peach-recovery-word-list {7330  list-style: none;7331  margin: 0;7332  padding: 0;7333  display: grid;7334  grid-template-columns: repeat(2, 1fr);7335  gap: 4px 8px;7336}73377338.peach-recovery-word-item {7339  display: flex;7340  align-items: baseline;7341  gap: 5px;7342}73437344.peach-recovery-word-num {7345  font-family: "IBM Plex Mono", monospace;7346  font-size: 0.5rem;7347  color: var(--peach-t2);7348  min-width: 14px;7349  letter-spacing: 0.04em;7350}73517352.peach-recovery-word-text {7353  font-family: "IBM Plex Mono", monospace;7354  font-size: 0.6875rem;7355  letter-spacing: 0.06em;7356  color: var(--peach-t0);7357  text-transform: lowercase;7358}73597360.peach-hint--warning {7361  color: var(--peach-accent);7362  font-style: italic;7363}7364.peach-hint--success {7365  color: var(--peach-t2);7366  font-family: "IBM Plex Mono", monospace;7367  font-size: 0.625rem;7368  letter-spacing: 0.06em;7369}73707371/* Confirmation step */7372.peach-recovery-confirm {7373  width: 100%;7374}7375.peach-recovery-confirm-label {7376  font-family: "IBM Plex Mono", monospace;7377  font-size: 0.5625rem;7378  letter-spacing: 0.04em;7379  color: var(--peach-t2);7380  text-align: center;7381  margin: 0 0 10px;7382}7383.peach-recovery-confirm-fields {7384  display: flex;7385  flex-direction: column;7386  gap: 8px;7387  margin-bottom: 10px;7388}7389.peach-recovery-confirm-field {7390  display: flex;7391  align-items: center;7392  gap: 8px;7393}7394.peach-recovery-confirm-num {7395  font-family: "IBM Plex Mono", monospace;7396  font-size: 0.5rem;7397  color: var(--peach-t2);7398  min-width: 44px;7399  letter-spacing: 0.04em;7400}7401.peach-recovery-confirm-input {7402  flex: 1;7403  background: transparent;7404  border: none;7405  border-bottom: 1px solid var(--peach-t3);7406  color: var(--peach-t0);7407  font-family: "IBM Plex Mono", monospace;7408  font-size: 0.6875rem;7409  letter-spacing: 0.06em;7410  padding: 4px 2px 3px;7411  outline: none;7412  text-transform: lowercase;7413  transition: border-color 120ms ease;7414}7415.peach-recovery-confirm-input:focus {7416  border-bottom-color: var(--peach-accent);7417}7418.peach-recovery-confirm-input:disabled {7419  opacity: 0.4;7420  cursor: not-allowed;7421}7422.peach-recovery-confirm-btn {7423  width: 100%;7424}