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-csv-warning {1645  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1646  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1647  color: var(--peach-t0);1648  border-radius: 6px;1649  padding: 10px 12px;1650  margin-bottom: 8px;1651  font-size: 0.75rem;1652  line-height: 1.45;1653}1654.peach-export-card--primary {1655  background:1656    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1657}16581659/* Export menu — distribute the three format cards across the popup. */1660.peach-export-menu {1661  display: flex;1662  flex-direction: column;1663  flex: 1;1664  min-height: 0;1665}1666.peach-export-menu .peach-settings-group {1667  flex: 1;1668  display: flex;1669  flex-direction: column;1670  justify-content: center;1671  gap: 10px;1672}16731674/* Result view — the script-string fills the remaining vertical surface. */1675.peach-export-result-group {1676  flex: 1;1677  display: flex;1678  flex-direction: column;1679  min-height: 0;1680  border-bottom: none;1681}1682.peach-export-result-group .peach-export-card {1683  flex: 1;1684  min-height: 0;1685  display: flex;1686  flex-direction: column;1687  gap: 10px;1688}1689.peach-export-result-group .peach-export-card-copy {1690  flex-shrink: 0;1691}1692.peach-export-result-group .peach-settings-label {1693  flex-shrink: 0;1694}1695.peach-export-result-group button {1696  flex-shrink: 0;1697}1698.peach-export-card-head {1699  display: flex;1700  align-items: center;1701  justify-content: space-between;1702  gap: 10px;1703}1704.peach-export-card-copy {1705  margin: 0;1706  font-size: 0.75rem;1707  line-height: 1.55;1708  color: var(--peach-t1);1709}1710.peach-export-note {1711  margin: 0;1712  font-size: 0.625rem;1713  line-height: 1.5;1714  color: var(--peach-t2);1715}1716.peach-export-pill {1717  display: inline-flex;1718  align-items: center;1719  padding: 4px 8px;1720  border-radius: 999px;1721  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1722  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1723  color: var(--peach-accent);1724  font-family: "IBM Plex Mono", monospace;1725  font-size: 0.5rem;1726  letter-spacing: 0.12em;1727  text-transform: uppercase;1728  white-space: nowrap;1729}1730.peach-export-pill--danger {1731  border-color: rgba(220,80,60,0.22);1732  background: rgba(220,80,60,0.08);1733  color: var(--peach-breach);1734}1735.peach-settings-label {1736  margin: 0 0 6px;1737  font-family: "IBM Plex Mono", monospace;1738  font-size: 0.5rem;1739  text-transform: uppercase;1740  letter-spacing: 0.18em;1741  color: var(--peach-t2);1742}1743.peach-settings-row {1744  display: flex;1745  align-items: center;1746  justify-content: space-between;1747  gap: 12px;1748  min-height: 34px;1749  padding: 6px 0;1750  font-size: 0.8125rem;1751  color: var(--peach-t1);1752}1753.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1754.peach-settings-value {1755  font-family: "IBM Plex Mono", monospace;1756  font-size: 0.625rem;1757  color: var(--peach-t2);1758}17591760.peach-settings-value--status {1761  display: flex;1762  align-items: center;1763  gap: 6px;1764}17651766.peach-settings-link {1767  font-family: "IBM Plex Mono", monospace;1768  font-size: 0.625rem;1769  color: var(--peach-accent);1770  text-decoration: none;1771  cursor: pointer;1772}1773.peach-settings-link:hover {1774  text-decoration: underline;1775}17761777.peach-settings-row--stack {1778  flex-direction: column;1779  align-items: stretch;1780  gap: 6px;1781}17821783.peach-settings-row--top {1784  align-items: flex-start;1785}17861787.peach-settings-row-main {1788  display: flex;1789  flex-direction: column;1790  gap: 4px;1791  flex: 1;1792}1793.peach-toggle {1794  width: 28px; height: 16px;1795  border-radius: 999px;1796  background: var(--peach-t3);1797  border: 1px solid var(--peach-t3);1798  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1799  flex-shrink: 0;1800  transition: background 200ms ease, border-color 200ms ease;1801  cursor: pointer;1802}1803.peach-toggle.is-on {1804  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1805  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1806}1807.peach-toggle-knob {1808  width: 10px; height: 10px;1809  border-radius: 50%;1810  background: var(--peach-t2);1811  flex-shrink: 0;1812  transform: translateX(0px);1813  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1814}1815.peach-toggle.is-on .peach-toggle-knob {1816  background: var(--peach-accent);1817  transform: translateX(12px);1818}1819.peach-settings-footer {1820  display: flex;1821  align-items: center;1822  gap: 8px;1823  margin-top: auto;1824  padding: 14px 16px 8px;1825  font-family: "IBM Plex Mono", monospace;1826  font-size: 0.5625rem;1827  color: var(--peach-t2);1828}18291830/* ── Settings home navigation ──────────────────────────────────────────── */1831.peach-settings-nav-label {1832  margin: 0 0 2px;1833  padding: 12px 16px 4px;1834  font-family: "IBM Plex Mono", monospace;1835  font-size: 0.5rem;1836  text-transform: uppercase;1837  letter-spacing: 0.18em;1838  color: var(--peach-t2);1839}18401841.peach-settings-cat-row {1842  display: flex;1843  align-items: center;1844  gap: 10px;1845  width: 100%;1846  padding: 9px 16px;1847  background: none;1848  border: none;1849  border-bottom: 1px solid var(--peach-t3);1850  cursor: pointer;1851  text-align: left;1852  color: inherit;1853  transition: background var(--peach-dur-80) ease;1854}1855.peach-settings-cat-row:hover {1856  background: var(--peach-t3);1857}1858.peach-settings-cat-row:last-child {1859  border-bottom: none;1860}18611862.peach-settings-cat-icon {1863  width: 28px;1864  height: 28px;1865  border-radius: 7px;1866  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1867  color: var(--peach-accent);1868  display: flex;1869  align-items: center;1870  justify-content: center;1871  flex-shrink: 0;1872}1873/* Light theme: peach-on-cream is too low-contrast — both colors are warm.1874   Darken the icon stroke to ink and bump the bg tint so the icon reads1875   sharply while the cell still feels accent-tinted. */1876.light .peach-settings-cat-icon {1877  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);1878  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));1879}18801881.peach-settings-cat-content {1882  flex: 1;1883  display: flex;1884  flex-direction: column;1885  gap: 2px;1886  min-width: 0;1887}18881889.peach-settings-cat-name {1890  font-size: 0.8125rem;1891  font-weight: 450;1892  color: var(--peach-t0);1893  line-height: 1.2;1894}18951896.peach-settings-cat-desc {1897  font-size: 0.625rem;1898  color: var(--peach-t2);1899  line-height: 1.3;1900  white-space: nowrap;1901  overflow: hidden;1902  text-overflow: ellipsis;1903}19041905.peach-settings-cat-chevron {1906  color: var(--peach-t2);1907  flex-shrink: 0;1908  opacity: 0.5;1909}19101911/* ── Settings sub-view section labels ──────────────────────────────────── */1912.peach-settings-sub-label {1913  margin: 12px 0 4px;1914  font-family: "IBM Plex Mono", monospace;1915  font-size: 0.5rem;1916  text-transform: uppercase;1917  letter-spacing: 0.18em;1918  color: var(--peach-t2);1919}1920.peach-settings-sub-label:first-child {1921  margin-top: 4px;1922}19231924/* ── Settings: collapsible Advanced section ─────────────────────────────── */1925.peach-settings-advanced-toggle {1926  display: flex;1927  align-items: center;1928  justify-content: space-between;1929  width: 100%;1930  background: none;1931  border: none;1932  cursor: pointer;1933  padding: 12px 0 4px;1934  margin: 0;1935  color: inherit;1936}1937.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {1938  color: var(--peach-t1);1939}1940.peach-settings-advanced-chevron {1941  font-size: 0.5625rem;1942  color: var(--peach-t3);1943  letter-spacing: 0;1944  transition: color 120ms ease;1945}19461947/* ── Feedback form ──────────────────────────────────────────────────────── */1948.peach-feedback-group {1949  flex: 1;1950  display: flex;1951  flex-direction: column;1952  border-bottom: none;1953}19541955.peach-feedback-intro {1956  margin: 4px 0 14px;1957  font-size: 0.75rem;1958  line-height: 1.55;1959  color: var(--peach-t1);1960}19611962.peach-feedback-chips {1963  display: flex;1964  flex-wrap: wrap;1965  gap: 6px;1966  margin-bottom: 14px;1967}19681969.peach-feedback-chip {1970  padding: 4px 10px;1971  border-radius: 999px;1972  border: 1px solid var(--peach-t3);1973  background: none;1974  color: var(--peach-t2);1975  font-size: 0.6875rem;1976  font-family: var(--font-ui);1977  cursor: pointer;1978  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,1979    background var(--peach-dur-80) ease;1980}1981.peach-feedback-chip:hover {1982  border-color: var(--peach-t2);1983  color: var(--peach-t1);1984}1985.peach-feedback-chip.is-active {1986  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);1987  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1988  color: var(--peach-accent);1989}19901991.peach-feedback-textarea {1992  flex: 1;1993  width: 100%;1994  min-height: 120px;1995  box-sizing: border-box;1996  background: rgba(0, 0, 0, 0.22);1997  border: 1px solid transparent;1998  border-radius: 6px;1999  color: var(--peach-t0);2000  font-size: 0.75rem;2001  font-family: var(--font-ui);2002  line-height: 1.5;2003  padding: 8px 10px;2004  resize: none;2005  outline: none;2006  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2007}2008.peach-feedback-textarea:focus {2009  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2010  background: rgba(0, 0, 0, 0.28);2011}2012.peach-feedback-textarea:focus {2013  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2014}2015.peach-feedback-textarea::placeholder {2016  color: var(--peach-t2);2017}20182019.peach-feedback-meta {2020  margin: 6px 0 0;2021  font-size: 0.625rem;2022  color: var(--peach-t2);2023  font-family: "IBM Plex Mono", monospace;2024}20252026.peach-feedback-result {2027  margin: 8px 0 0;2028  font-size: 0.6875rem;2029  font-family: "IBM Plex Mono", monospace;2030}2031.peach-feedback-result--ok { color: var(--peach-sync-ok); }2032.peach-feedback-result--err { color: var(--peach-breach); }20332034.peach-feedback-submit {2035  width: 100%;2036  margin-top: 12px;2037  justify-content: center;2038}20392040.peach-feedback-anon {2041  margin: 8px 0 0;2042  font-size: 0.625rem;2043  color: var(--peach-t2);2044  text-align: center;2045}20462047.peach-passkey-badge {2048  margin-left: 8px;2049  font-size: 0.625rem;2050  letter-spacing: 0.06em;2051  text-transform: uppercase;2052  color: var(--peach-t2);2053  font-family: var(--font-ui);2054  vertical-align: middle;2055}20562057.peach-passkey-delete-btn {2058  color: var(--peach-breach);2059  border-color: rgba(229, 85, 85, 0.25);2060}20612062.peach-passkey-delete-confirm {2063  display: flex;2064  align-items: center;2065  gap: 8px;2066  padding: 8px 10px;2067  background: rgba(229, 85, 85, 0.06);2068  border: 1px solid rgba(229, 85, 85, 0.2);2069  border-radius: 6px;2070}20712072.peach-passkey-delete-confirm-copy {2073  flex: 1;2074  font-size: 0.6875rem;2075  color: var(--peach-t1);2076}20772078.peach-passkey-delete-btn--confirm {2079  color: var(--peach-breach);2080  border-color: rgba(229, 85, 85, 0.4);2081}20822083.peach-passkey-activity {2084  flex-direction: column;2085  align-items: flex-start;2086  gap: 4px;2087}20882089.peach-passkey-meta {2090  font-size: 0.6875rem;2091  color: var(--peach-t2);2092}20932094.peach-passkey-actions {2095  position: relative;2096  z-index: 1;2097  margin-top: 14px;2098  display: flex;2099  flex-direction: column;2100  gap: 8px;2101}21022103.peach-passkey-approval {2104  display: flex;2105  flex-direction: column;2106  align-items: center;2107  padding: 22px 20px 18px;2108  gap: 10px;2109  text-align: center;2110}21112112.peach-passkey-approval-icon {2113  width: 46px;2114  height: 46px;2115  border-radius: 12px;2116  background: var(--peach-s2);2117  border: 1px solid var(--peach-t3);2118  display: flex;2119  align-items: center;2120  justify-content: center;2121  flex-shrink: 0;2122  color: var(--peach-accent);2123}21242125.peach-passkey-approval-icon img,2126.peach-passkey-approval-icon svg {2127  width: 28px;2128  height: 28px;2129  border-radius: 6px;2130}21312132.peach-passkey-approval-rp {2133  font-family: var(--font-ui);2134  font-size: 0.75rem;2135  color: var(--peach-t2);2136  letter-spacing: 0.03em;2137}21382139.peach-passkey-approval-action {2140  font-family: var(--font-display);2141  font-style: italic;2142  font-weight: 300;2143  font-size: 22px;2144  color: var(--peach-t0);2145  line-height: 1.1;2146  margin: 2px 0;2147}21482149.peach-passkey-approval-user {2150  font-family: var(--font-mono);2151  font-size: 0.6875rem;2152  color: var(--peach-t1);2153  background: var(--peach-s2);2154  border: 1px solid var(--peach-t3);2155  border-radius: 4px;2156  padding: 3px 8px;2157}21582159.peach-passkey-approval-notice {2160  font-size: 0.625rem;2161  color: var(--peach-t2);2162  line-height: 1.5;2163  max-width: 220px;2164}21652166.peach-passkey-approval-actions {2167  display: flex;2168  gap: 8px;2169  width: 100%;2170  margin-top: 6px;2171}21722173.peach-passkey-approval-actions .peach-btn {2174  flex: 1;2175}21762177/* ── Inline generator drawer ── */2178.peach-generator-drawer {2179  display: grid;2180  grid-template-rows: 0fr;2181  transition: grid-template-rows 320ms var(--peach-curve-arrival);2182  overflow: hidden;2183}2184.peach-generator-drawer.is-open {2185  grid-template-rows: 1fr;2186}2187.peach-generator-drawer-inner {2188  min-height: 0;2189  overflow: hidden;2190}2191.peach-generator-drawer-content {2192  border-top: 1px solid var(--peach-t3);2193  padding: 8px 0 4px;2194  display: flex;2195  flex-direction: column;2196  gap: 8px;2197}21982199/* ── Compact generator (inside entry edit) ── */2200.peach-generator-drawer-content--compact {2201  border-top: 1px solid var(--peach-t3);2202  padding: 8px 0 2px;2203  gap: 7px;2204}2205.peach-pwgen-compact-display-row {2206  display: flex;2207  align-items: center;2208  gap: 6px;2209}2210.peach-pwgen-compact-output {2211  flex: 1;2212  min-width: 0;2213  font-family: "IBM Plex Mono", monospace;2214  font-size: 0.6875rem;2215  font-weight: 400;2216  letter-spacing: 0.04em;2217  color: var(--peach-t0);2218  background: rgba(240, 232, 216, 0.04);2219  border: 1px solid var(--peach-t3);2220  border-radius: 5px;2221  padding: 5px 8px;2222  word-break: break-all;2223  line-height: 1.5;2224}2225.peach-pwgen-compact-controls {2226  display: flex;2227  align-items: center;2228  gap: 6px;2229}2230.peach-pwgen-compact-slider {2231  flex: 1;2232  min-width: 0;2233  height: 2px !important;2234}2235.peach-pwgen-compact-controls .peach-pwgen-len-num {2236  flex-shrink: 0;2237  min-width: 18px;2238  text-align: right;2239}2240.peach-pwgen-compact-pills {2241  display: flex;2242  gap: 3px;2243  flex-shrink: 0;2244}2245.peach-pwgen-compact-pills .peach-pwgen-pill {2246  padding: 2px 7px;2247  font-size: 0.5rem;2248}2249.peach-pwgen-compact-use {2250  flex-shrink: 0;2251  font-size: 0.625rem !important;2252  padding: 3px 9px !important;2253  min-height: 22px !important;2254  border-radius: 5px !important;2255}22562257/* ── Password edit row (input + eye toggle side-by-side) ── */2258.peach-password-edit-row {2259  display: flex;2260  align-items: center;2261  gap: 6px;2262}2263.peach-password-edit-row .peach-inline-input {2264  flex: 1;2265  min-width: 0;2266}22672268/* ── Generate toggle link ── */2269.peach-generate-toggle-link {2270  display: inline-flex;2271  align-items: center;2272  gap: 5px;2273  background: none;2274  border: none;2275  padding: 0;2276  cursor: pointer;2277  font-family: "IBM Plex Mono", monospace;2278  font-size: 0.625rem;2279  color: var(--peach-t2);2280  letter-spacing: 0.04em;2281  transition: color 120ms ease;2282  align-self: flex-start;2283}2284.peach-generate-toggle-link:hover {2285  color: var(--peach-accent);2286}22872288/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2289.peach-entry-body {2290  flex: 1;2291  overflow-y: auto;2292  overflow-x: hidden;2293  scrollbar-width: none;2294  -ms-overflow-style: none;2295  overscroll-behavior: contain;2296  display: grid;2297  gap: 10px;2298  align-content: start;2299  padding: 10px 20px 14px;2300  min-width: 0;2301  min-height: 0;2302}2303.peach-entry-body::-webkit-scrollbar { display: none; }23042305/* Type-toggle pills + inline note toolbar */2306.peach-new-type-row {2307  display: flex;2308  align-items: center;2309  gap: 6px;2310  margin-bottom: 2px;2311}2312.peach-new-type-btn {2313  background: transparent;2314  border: 1px solid var(--peach-t3);2315  border-radius: 12px;2316  padding: 3px 10px;2317  font-family: "IBM Plex Mono", monospace;2318  font-size: 0.5625rem;2319  letter-spacing: 0.12em;2320  text-transform: uppercase;2321  color: var(--peach-t2);2322  cursor: pointer;2323  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2324}2325.peach-new-type-btn.is-active {2326  color: var(--peach-t0);2327  border-color: var(--peach-accent);2328  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2329}2330.peach-new-type-btn:not(.is-active):hover {2331  color: var(--peach-t1);2332  border-color: var(--peach-t2);2333}23342335/* Editable title */2336.peach-new-title-wrap { margin: 0 0 2px; }2337.peach-new-title-input {2338  background: transparent;2339  border: none;2340  outline: none;2341  width: 100%;2342  color: var(--peach-t0);2343  font-family: var(--font-display);2344  font-style: italic;2345  font-weight: 400;2346  font-size: 40px;2347  line-height: 0.95;2348  caret-color: var(--peach-accent);2349}2350.peach-new-title-input::placeholder { color: var(--peach-t2); }23512352/* Editable domain field */2353.peach-domain-value--edit {2354  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2355  font-size: 0.625rem;2356  font-style: italic;2357  letter-spacing: 0.12em;2358  color: var(--peach-t1);2359  background: transparent;2360  border: none;2361  border-bottom: 1px solid var(--peach-t3);2362  outline: none;2363  width: 100%;2364  padding: 2px 0;2365  caret-color: var(--peach-accent);2366  transition: border-color 140ms ease, color 140ms ease;2367}2368.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2369.peach-domain-value--edit:focus {2370  border-bottom-color: rgba(240, 232, 216, 0.28);2371  color: var(--peach-t0);2372}23732374/* Editable field values (username, password, totp) */2375.peach-field-value--edit {2376  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2377  font-size: 0.8125rem;2378  color: var(--peach-t0);2379  background: transparent;2380  border: none;2381  border-bottom: 1px solid var(--peach-t3);2382  outline: none;2383  flex: 1;2384  min-width: 0;2385  padding: 3px 0;2386  caret-color: var(--peach-accent);2387  transition: border-color 140ms ease, color 140ms ease;2388}2389.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2390.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2391.peach-field-value--edit:focus {2392  border-bottom-color: rgba(240, 232, 216, 0.28);2393  color: var(--peach-t0);2394}23952396/* "+ add optional field" links */2397.peach-entry-add-links {2398  display: flex;2399  gap: 12px;2400  flex-wrap: wrap;2401  margin-top: -2px;2402}2403.peach-add-field-link {2404  background: transparent;2405  border: none;2406  padding: 0;2407  cursor: pointer;2408  font-family: "IBM Plex Mono", monospace;2409  font-size: 0.5625rem;2410  letter-spacing: 0.1em;2411  text-transform: uppercase;2412  color: var(--peach-t2);2413  transition: color 140ms ease;2414}2415.peach-add-field-link:hover { color: var(--peach-accent); }24162417/* ── New entry form (legacy classes) ────────────────────────────────── */2418.peach-new-body {2419  flex: 1;2420  overflow-y: auto;2421  padding: 10px 20px 14px;2422}2423.peach-new-name-input {2424  background: transparent;2425  border: none;2426  outline: none;2427  width: 100%;2428  color: var(--peach-t0);2429  font-family: var(--font-display);2430  font-style: italic;2431  font-weight: 400;2432  font-size: 40px;2433  line-height: 0.95;2434  caret-color: var(--peach-accent);2435}2436.peach-new-name-input::placeholder { color: var(--peach-t2); }2437.peach-new-field-input {2438  background: transparent;2439  border: none;2440  outline: none;2441  flex: 1;2442  min-width: 0;2443  caret-color: var(--peach-accent);2444}2445.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }24462447/* ── Canary card ── */2448.peach-canary-card {2449  border: 1px solid rgba(217, 160, 48, 0.2);2450  background: rgba(217, 160, 48, 0.03);2451  border-radius: 8px;2452  padding: 12px;2453}24542455.peach-canary-settings-header {2456  display: flex;2457  align-items: center;2458  justify-content: space-between;2459  cursor: pointer;2460  user-select: none;2461}24622463.peach-canary-card .peach-label {2464  color: rgba(217, 160, 48, 0.85);2465}24662467.peach-canary-card .peach-new-field-input {2468  border-color: rgba(217, 160, 48, 0.25);2469}24702471.peach-canary-card .peach-new-field-input:focus {2472  border-color: rgba(217, 160, 48, 0.5);2473}24742475.peach-canary-body {2476  margin-top: 12px;2477  display: flex;2478  flex-direction: column;2479  gap: 10px;2480}24812482.peach-canary-explainer {2483  display: flex;2484  gap: 10px;2485  padding: 10px 12px;2486  border-radius: 10px;2487  background: rgba(217, 160, 48, 0.06);2488  border: 1px solid rgba(217, 160, 48, 0.22);2489  margin-bottom: 4px;2490}24912492.peach-canary-explainer-icon {2493  font-size: 1rem;2494  flex-shrink: 0;2495  line-height: 1.2;2496}24972498.peach-canary-explainer-title {2499  font-family: var(--font-ui);2500  font-size: 0.6875rem;2501  font-weight: 500;2502  color: rgba(217, 160, 48, 0.9);2503  margin: 0 0 3px;2504}25052506.peach-canary-explainer-copy {2507  font-family: var(--font-ui);2508  font-size: 0.625rem;2509  color: var(--peach-t2);2510  line-height: 1.55;2511  margin: 0;2512}25132514.peach-canary-hint {2515  font-size: 0.625rem;2516  color: var(--peach-t2);2517  font-family: Inter, system-ui, sans-serif;2518  line-height: 1.5;2519  margin-top: 4px;2520}25212522.peach-canary-actions-row {2523  display: flex;2524  align-items: center;2525  gap: 8px;2526}25272528.peach-canary-test-btn {2529  border-color: rgba(217, 160, 48, 0.3);2530  color: rgba(217, 160, 48, 0.85);2531}25322533.peach-canary-test-result {2534  font-size: 0.625rem;2535  font-family: Inter, system-ui, sans-serif;2536}25372538.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2539.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }25402541.peach-canary-badge {2542  display: flex;2543  position: relative;2544  z-index: 1;2545  align-items: center;2546  gap: 5px;2547  padding: 4px 10px;2548  background: rgba(217, 160, 48, 0.12);2549  border: 1px solid rgba(217, 160, 48, 0.35);2550  border-radius: 6px;2551  margin-bottom: 6px;2552  width: fit-content;2553}25542555.peach-canary-badge-label {2556  font-size: 0.625rem;2557  letter-spacing: 0.06em;2558  color: rgba(217, 160, 48, 0.9);2559  font-family: var(--font-ui);2560  text-transform: uppercase;2561}25622563.peach-canary-badge-icon {2564  font-size: 0.6875rem;2565}25662567.peach-canary-suppress-row {2568  display: flex;2569  align-items: center;2570  gap: 8px;2571  padding: 6px 10px;2572  background: rgba(217, 160, 48, 0.08);2573  border-radius: 6px;2574  margin-bottom: 8px;2575}25762577.peach-canary-suppress-label {2578  font-size: 0.6875rem;2579  color: rgba(217, 160, 48, 0.85);2580  cursor: pointer;2581  font-family: var(--font-ui);2582  letter-spacing: 0.04em;2583}25842585.peach-regen-panel {2586  position: relative;2587  z-index: 1;2588  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2589  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2590  border-radius: 8px;2591  padding: 12px;2592  margin-bottom: 8px;2593}25942595.peach-regen-panel-header {2596  display: flex;2597  align-items: center;2598  justify-content: space-between;2599  margin-bottom: 10px;2600}26012602.peach-regen-panel-title {2603  font-size: 0.6875rem;2604  font-weight: 600;2605  letter-spacing: 0.06em;2606  text-transform: uppercase;2607  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2608}26092610.peach-regen-output {2611  background: rgba(0, 0, 0, 0.2);2612  border-radius: 6px;2613  padding: 10px;2614  margin-bottom: 10px;2615  font-family: var(--font-mono);2616  font-size: 0.8125rem;2617  word-break: break-all;2618  color: var(--peach-t1);2619}26202621.peach-regen-actions {2622  display: flex;2623  gap: 6px;2624}26252626.peach-regen-actions--spaced {2627  margin-bottom: 8px;2628}26292630.peach-regen-action-grow {2631  flex: 1;2632}26332634.peach-regen-copy-btn {2635  padding: 0 8px;2636}26372638.peach-regen-success {2639  position: relative;2640  z-index: 1;2641  background: rgba(40, 180, 80, 0.1);2642  border: 1px solid rgba(40, 180, 80, 0.3);2643  border-radius: 8px;2644  padding: 10px 12px;2645  margin-bottom: 8px;2646  display: flex;2647  align-items: center;2648  gap: 8px;2649  font-size: 0.6875rem;2650  color: rgba(40, 180, 80, 0.9);2651}26522653/* ── Note editor overlay ── */2654.peach-note-editor {2655  position: absolute;2656  inset: 0;2657  z-index: 200;2658  display: flex;2659  flex-direction: column;2660  background:2661    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2662    var(--peach-bg);2663  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2664}26652666.peach-note-editor-header {2667  display: flex;2668  align-items: center;2669  gap: 10px;2670  padding: 14px 16px 10px;2671  border-bottom: 1px solid var(--peach-t3);2672  flex-shrink: 0;2673}26742675.peach-note-editor-back {2676  background: transparent;2677  border: none;2678  cursor: pointer;2679  color: var(--peach-t2);2680  padding: 4px 6px;2681  border-radius: 6px;2682  display: flex;2683  align-items: center;2684  transition: color 120ms ease, background 120ms ease;2685  flex-shrink: 0;2686}2687.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }26882689.peach-note-editor-label {2690  flex: 1;2691  font-family: var(--font-display);2692  font-style: italic;2693  font-size: 0.9375rem;2694  color: var(--peach-t1);2695  letter-spacing: 0.02em;2696}26972698.peach-note-editor-save-btn {2699  background: transparent;2700  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2701  border-radius: 8px;2702  color: var(--peach-accent);2703  font-family: "IBM Plex Mono", monospace;2704  font-size: 0.625rem;2705  letter-spacing: 0.06em;2706  text-transform: uppercase;2707  padding: 3px 10px;2708  cursor: pointer;2709  transition: background 120ms ease, border-color 120ms ease;2710}2711.peach-note-editor-save-btn:hover:not(:disabled) {2712  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2713  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2714}2715.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }27162717.peach-note-toolbar {2718  display: flex;2719  align-items: center;2720  gap: 3px;2721  padding: 6px 14px 5px;2722  border-bottom: 1px solid var(--peach-t3);2723  flex-shrink: 0;2724}27252726.peach-note-tool-btn {2727  background: transparent;2728  border: 1px solid transparent;2729  border-radius: 5px;2730  color: var(--peach-t2);2731  font-family: "IBM Plex Mono", monospace;2732  font-size: 0.625rem;2733  letter-spacing: 0.04em;2734  padding: 2px 8px;2735  cursor: pointer;2736  line-height: 1.6;2737  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2738}2739.peach-note-tool-btn:hover {2740  background: var(--peach-t4);2741  color: var(--peach-t0);2742  border-color: var(--peach-t3);2743}27442745.peach-note-tool-icon {2746  padding: 3px 7px;2747  display: inline-flex;2748  align-items: center;2749  justify-content: center;2750}27512752.peach-note-tool-divider {2753  width: 1px;2754  height: 14px;2755  background: var(--peach-t3);2756  margin: 0 4px;2757  flex-shrink: 0;2758}27592760.peach-note-editor-body {2761  flex: 1;2762  overflow-y: auto;2763  padding: 16px 20px 20px;2764  outline: none;2765  font-family: var(--font-display);2766  font-size: 1rem;2767  line-height: 1.75;2768  color: var(--peach-t0);2769  scrollbar-width: none;2770  word-break: break-word;2771}2772.peach-note-editor-body:empty::before {2773  content: "write your note…";2774  color: var(--peach-t3);2775  font-style: italic;2776  pointer-events: none;2777}27782779/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2780.peach-note-editor-inline {2781  display: flex;2782  flex-direction: column;2783  flex: 1;2784  min-height: 0;2785}2786.peach-note-editor-body--inline {2787  flex: 1;2788  min-height: 0;2789  font-size: 0.9375rem;2790  padding: 10px 20px 14px;2791}27922793/* Full-width toolbar row inside the body (Add.tsx note type).2794   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */2795.peach-note-toolbar-body {2796  display: flex;2797  align-items: center;2798  gap: 3px;2799  padding: 5px 20px 4px;2800  margin: 2px -20px 0;2801  border-bottom: 1px solid var(--peach-t3);2802  flex-shrink: 0;2803}28042805/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2806   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2807   and .peach-note-tool-divider button-level styles. */2808.peach-note-toolbar-inline {2809  display: flex;2810  align-items: center;2811  gap: 3px;2812  margin-left: auto;2813  padding-left: 10px;2814  border-left: 1px solid var(--peach-t3);2815  min-height: 22px;2816}28172818/* Entry.tsx toolbar row (no tabs, toolbar only) */2819.peach-entry-note-toolbar-row {2820  display: flex;2821  align-items: center;2822  margin: 4px 0 6px;2823  position: relative;2824  z-index: 1;2825}2826.peach-entry-note-toolbar-row .peach-note-toolbar-inline {2827  border-left: none;2828  padding-left: 0;2829  margin-left: 0;2830}28312832/* Note body — fills available vertical space in Add.tsx and Entry.tsx */2833.peach-note-body {2834  display: flex;2835  flex-direction: column;2836  flex: 1;2837  min-height: 0;2838  margin: 4px 0 0;2839}2840.peach-entry-body--new .peach-note-body {2841  margin: 8px -20px 0;2842}28432844/* Add.tsx body is a grid by default; swap to a flex column when a note is2845   active so the note body can stretch and pin the tags row to the bottom. */2846.peach-entry-body--new:has(.peach-note-body) {2847  display: flex;2848  flex-direction: column;2849}28502851/* Rich content element styles (editor + display) */2852.peach-note-editor-body h2,2853.peach-note-content h2 {2854  font-family: var(--font-display);2855  font-size: 20px;2856  font-weight: 600;2857  font-style: italic;2858  color: var(--peach-t0);2859  margin: 6px 0 2px;2860  line-height: 1.3;2861}2862.peach-note-editor-body ul,2863.peach-note-content ul {2864  padding-left: 18px;2865  margin: 3px 0;2866  list-style: disc;2867}2868.peach-note-editor-body ol,2869.peach-note-content ol {2870  padding-left: 18px;2871  margin: 3px 0;2872  list-style: decimal;2873}2874.peach-note-editor-body li,2875.peach-note-content li { margin: 2px 0; }2876.peach-note-editor-body hr,2877.peach-note-content hr {2878  border: none;2879  border-top: 1px solid var(--peach-t3);2880  margin: 10px 0;2881}28822883/* font size elements from execCommand */2884.peach-note-editor-body font[size="1"],2885.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }2886.peach-note-editor-body font[size="2"],2887.peach-note-content font[size="2"] { font-size: 0.8125rem; }2888.peach-note-editor-body font[size="3"],2889.peach-note-content font[size="3"] { font-size: 1rem; }2890.peach-note-editor-body font[size="4"],2891.peach-note-content font[size="4"] { font-size: 20px; }2892.peach-note-editor-body font[size="5"],2893.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }28942895/* bold / italic inside the editor and note display */2896.peach-note-editor-body b, .peach-note-editor-body strong,2897.peach-note-content b, .peach-note-content strong { font-weight: 700; }2898.peach-note-editor-body em, .peach-note-editor-body i,2899.peach-note-content em, .peach-note-content i { font-style: italic; }29002901/* note display — rendered HTML, no pre-wrap */2902.peach-note-content {2903  overflow: auto;2904  max-height: 340px;2905  word-break: break-word;2906}29072908/* ── Note textarea ── */2909.peach-note-textarea {2910  width: 100%;2911  min-height: 180px;2912  max-height: 280px;2913  resize: vertical;2914  background: var(--peach-t4);2915  border: 1px solid var(--peach-t3);2916  border-radius: 8px;2917  padding: 10px 12px;2918  font-family: "IBM Plex Mono", monospace;2919  font-size: 0.75rem;2920  line-height: 1.7;2921  color: var(--peach-t1);2922  outline: none;2923  transition: border-color 150ms ease;2924}29252926.peach-note-textarea:focus {2927  border-color: var(--peach-t2);2928}29292930.peach-note-char-count {2931  font-family: "IBM Plex Mono", monospace;2932  font-size: 0.5625rem;2933  color: var(--peach-t3);2934  text-align: right;2935  margin-top: 4px;2936  letter-spacing: 0.1em;2937}29382939/* ── Field input baseline ── */2940.peach-new-field-input {2941  width: 100%;2942  background: transparent;2943  border: none;2944  border-bottom: 1px solid var(--peach-t3);2945  padding: 4px 0;2946  color: var(--peach-t1);2947  font-family: "IBM Plex Mono", monospace;2948  font-size: 0.8125rem;2949  outline: none;2950  transition: border-color 150ms ease;2951}29522953.peach-new-field-input:focus {2954  border-bottom-color: var(--peach-t0);2955  color: var(--peach-t0);2956}29572958.peach-new-name-input {2959  width: 100%;2960  background: transparent;2961  border: none;2962  border-bottom: 1px solid var(--peach-t3);2963  padding: 6px 0;2964  font-family: var(--font-display);2965  font-style: italic;2966  font-size: 28px;2967  color: var(--peach-t0);2968  outline: none;2969  transition: border-color 150ms ease;2970}29712972.peach-new-name-input:focus {2973  border-bottom-color: var(--peach-t1);2974}29752976.peach-new-name-input::placeholder {2977  color: var(--peach-t2);2978  font-style: italic;2979}29802981.peach-new-field-input::placeholder {2982  color: var(--peach-t3);2983}29842985/* ── Demo entrance animation ── */2986#hd-shell {2987  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;2988}2989@keyframes hd-shell-enter {2990  from { opacity: 0; transform: scale(0.96) translateY(16px); }2991  to   { opacity: 1; transform: scale(1) translateY(0); }2992}29932994/* ── Keyframes ── */2995@keyframes peach-char-enter {2996  from { opacity: 0; transform: translateY(0.22em); }2997  to   { opacity: 1; transform: translateY(0); }2998}2999@keyframes peach-content-enter {3000  from { opacity: 0.96; transform: translateY(4px); }3001  to   { opacity: 1; transform: translateY(0); }3002}3003@keyframes peach-content-exit {3004  from { opacity: 1; transform: translateY(0); }3005  to   { opacity: 0.92; transform: translateY(-3px); }3006}3007@keyframes peach-screen-enter {3008  from { opacity: 0; transform: translateY(14px); }3009  to   { opacity: 1; transform: translateY(0); }3010}3011@keyframes peach-shell-fade-in {3012  from { opacity: 0; }3013  to   { opacity: 1; }3014}3015@keyframes peach-veil-in {3016  from { opacity: 0; }3017  to   { opacity: 1; }3018}3019@keyframes peach-lock-settle {3020  0%   { transform: scale(0.9); }3021  65%  { transform: scale(1.08); }3022  100% { transform: scale(1); }3023}3024@keyframes peach-copy-confirm {3025  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3026  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); }3027}3028@keyframes peach-copy-retreat {3029  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); }3030  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3031}3032@keyframes peach-copy-flood {3033  from { opacity: 0; transform: scaleX(0.15); }3034  to   { opacity: 1; transform: scaleX(1); }3035}3036@keyframes peach-copy-icon-settle {3037  from  { transform: scale(0.84); }3038  70%   { transform: scale(1.08); }3039  to    { transform: scale(1); }3040}3041@keyframes peach-copy-sheen-retreat {3042  from { opacity: 1; transform: scaleX(1); }3043  to   { opacity: 0; transform: scaleX(0.15); }3044}3045@keyframes peach-copy-drain {3046  from { width: 100%; }3047  to   { width: 0; }3048}3049@keyframes peach-shake {3050  0%, 100% { transform: translateX(0); }3051  20%      { transform: translateX(-6px); }3052  40%      { transform: translateX(6px); }3053  60%      { transform: translateX(-4px); }3054  80%      { transform: translateX(4px); }3055}30563057@keyframes pip-pulse {3058  0% { transform: scale(1); }3059  40% { transform: scale(2.2); }3060  100% { transform: scale(1); }3061}306230633064/* ── Password generator ── */3065.peach-pwgen-body {3066  flex: 1; overflow-y: auto;3067  display: flex; flex-direction: column;3068}3069.peach-policy-badge {3070  display: flex; align-items: center;3071  padding: 6px 20px 0;3072  font-size: 0.625rem; font-family: Inter, sans-serif;3073  color: var(--peach-t2); letter-spacing: 0.04em;3074}3075.peach-pwgen-display {3076  padding: 14px 20px 12px;3077  border-bottom: 1px solid var(--peach-t3);3078  display: flex; align-items: flex-start; gap: 10px;3079}3080.peach-pwgen-display-row {3081  display: flex;3082  align-items: flex-start;3083  gap: 8px;3084  padding-bottom: 8px;3085  border-bottom: 1px solid var(--peach-t3);3086}3087.peach-pwgen-output {3088  flex: 1; min-width: 0; margin: 0;3089  font-family: "IBM Plex Mono", monospace;3090  font-size: 0.8125rem; color: var(--peach-t0);3091  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3092  white-space: normal;3093  padding: 10px 12px;3094  background: var(--peach-t4);3095  border-radius: 6px;3096  min-height: 36px;3097}3098.peach-pwgen-output-display {3099  flex: 1;3100  min-width: 0;3101  margin: 0;3102  font-family: var(--font-display);3103  font-style: italic;3104  font-weight: 300;3105  font-size: 32px;3106  line-height: 1.05;3107  color: var(--peach-t0);3108  word-break: break-all;3109  overflow-wrap: break-word;3110  white-space: normal;3111  letter-spacing: 0.02em;3112}3113.peach-pwgen-display-actions {3114  display: flex;3115  flex-direction: column;3116  gap: 4px;3117  flex-shrink: 0;3118  margin-top: 2px;3119}3120.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3121.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3122.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3123.peach-pwgen-len-num {3124  font-family: "IBM Plex Mono", monospace;3125  font-size: 0.75rem; color: var(--peach-accent);3126}3127.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3128.peach-pwgen-toggles { display: flex; flex-direction: column; }3129.peach-pwgen-charset-pills {3130  display: flex;3131  gap: 6px;3132  flex-wrap: wrap;3133}3134.peach-pwgen-pill {3135  padding: 4px 11px;3136  border-radius: 999px;3137  border: 1px solid var(--peach-t3);3138  background: transparent;3139  color: var(--peach-t2);3140  font-family: "IBM Plex Mono", monospace;3141  font-size: 0.5625rem;3142  letter-spacing: 0.08em;3143  cursor: pointer;3144  transition: all 150ms ease;3145}3146.peach-pwgen-pill.is-on {3147  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3148  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3149  color: var(--peach-accent);3150}3151.peach-pwgen-pill:not(.is-on):hover {3152  color: var(--peach-t1);3153  border-color: var(--peach-t2);3154}3155.peach-pwgen-use-btn {3156  width: 100%;3157  min-height: 34px;3158  border-radius: 8px;3159  margin-top: 2px;3160}3161.peach-pwgen-toggle-row {3162  display: flex; align-items: center; justify-content: space-between;3163  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3164}3165.peach-pwgen-toggle-row:last-child { border-bottom: none; }3166.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }31673168.peach-screen-prelock {3169  z-index: 10;3170}31713172.prelock-form {3173  display: grid;3174  gap: 12px;3175}31763177/* Peach popup should not expose native scrollbars on internal panels. */3178.peach-settings-body,3179.peach-new-body,3180.peach-pwgen-body,3181.lock-screen,3182.peach-import-preview {3183  scrollbar-width: none;3184  -ms-overflow-style: none;3185  overscroll-behavior: contain;3186}3187.peach-settings-body::-webkit-scrollbar,3188.peach-new-body::-webkit-scrollbar,3189.peach-pwgen-body::-webkit-scrollbar,3190.lock-screen::-webkit-scrollbar,3191.peach-import-preview::-webkit-scrollbar {3192  width: 0;3193  height: 0;3194  display: none;3195}31963197.lock-screen {3198  height: 100%;3199  min-height: 100%;3200  overflow-y: auto;3201  padding: 18px 18px 16px;3202  gap: 14px;3203  grid-template-rows: auto auto auto 1fr auto;3204  align-content: stretch;3205  position: relative;3206  isolation: isolate;3207}3208.peach-screen.lock-screen--vault-stage {3209  display: flex;3210  flex-direction: column;3211  justify-content: flex-start;3212  gap: 18px;3213  padding: 20px 18px 18px;3214  overflow: hidden;3215}3216.peach-screen.lock-screen--vault-stage .peach-lock-panel {3217  margin-top: 0;3218}3219.lock-screen--onboarding {3220  display: flex;3221  flex-direction: column;3222  gap: 12px;3223  justify-content: flex-start;3224}32253226.lock-screen::before {3227  content: "";3228  position: absolute;3229  inset: 12px 18px auto auto;3230  width: 160px;3231  height: 160px;3232  border-radius: 999px;3233  background:3234    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%);3235  filter: blur(6px);3236  opacity: 0.7;3237  pointer-events: none;3238  z-index: 0;3239}32403241.peach-lock-rune-string {3242  flex: 1;3243  display: flex;3244  align-items: center;3245  justify-content: center;3246  gap: 6px;3247  font-family: PeachScript, monospace;3248  font-size: 0.8125rem;3249  letter-spacing: 0.05em;3250  pointer-events: none;3251  user-select: none;3252  position: relative;3253  z-index: 1;3254}32553256.peach-lock-rune-string span {3257  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3258  text-shadow:3259    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3260    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3261  transition: color 0.9s ease, text-shadow 0.9s ease;3262}32633264.peach-lock-rune-string span.is-glowing {3265  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3266  text-shadow:3267    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3268    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3269}32703271.lock-screen-header {3272  display: flex;3273  align-items: center;3274  justify-content: space-between;3275  position: relative;3276  z-index: 1;3277}32783279.lock-password-input.shake {3280  animation: peach-shake 300ms ease-in-out;3281}32823283.peach-hint-error {3284  color: rgba(220, 80, 60, 0.92);3285}32863287.peach-onboarding-headline {3288  margin: 0;3289  font-family: var(--font-display);3290  font-size: 35px;3291  line-height: 0.88;3292  font-style: italic;3293  font-weight: 400;3294  max-width: 252px;3295}32963297.peach-lock-copy {3298  display: grid;3299  gap: 8px;3300  position: relative;3301  z-index: 1;3302}33033304.peach-lock-copy--onboarding {3305  gap: 10px;3306}33073308.peach-lock-hero {3309  position: relative;3310  z-index: 1;3311  display: grid;3312  gap: 8px;3313  min-height: 0;3314  padding: 4px 2px 0;3315  border: none;3316  border-radius: 0;3317  background: transparent;3318  box-shadow: none;3319}3320.peach-lock-hero-art {3321  position: absolute;3322  right: -8px;3323  top: -6px;3324  width: 120px;3325  height: 120px;3326  display: flex;3327  align-items: center;3328  justify-content: center;3329  pointer-events: none;3330  opacity: 0.12;3331  filter: saturate(0.9);3332}3333.peach-lock-hero-mark {3334  width: 100%;3335  height: 100%;3336}3337/* Peach body stays brand-peach across every accent — we don't want a3338   green or blue peach when sage/sky is selected. Leaf + stem keep the3339   sage tint because a real peach has a sage leaf. */3340.peach-lock-hero-mark path:nth-child(2),3341.peach-lock-hero-mark path:nth-child(3) {3342  stroke: rgba(123, 144, 96, 0.88);3343  fill: rgba(123, 144, 96, 0.88);3344}3345.peach-lock-hero > *:not(.peach-lock-hero-art) {3346  position: relative;3347  z-index: 1;3348}33493350.peach-lock-eyebrow {3351  display: inline-flex;3352  align-items: center;3353  width: fit-content;3354  padding: 4px 9px;3355  border-radius: 999px;3356  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3357  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3358  color: var(--peach-t0);3359  font-family: "IBM Plex Mono", monospace;3360  font-size: 0.5rem;3361  letter-spacing: 0.18em;3362  text-transform: uppercase;3363}33643365.peach-lock-label-row {3366  display: flex;3367  align-items: center;3368  justify-content: space-between;3369  margin-bottom: 0;3370}33713372.peach-lock-reveal-btn {3373  display: inline-flex;3374  align-items: center;3375  gap: 4px;3376  background: none;3377  border: none;3378  cursor: pointer;3379  font-family: "IBM Plex Mono", monospace;3380  font-size: 0.5625rem;3381  letter-spacing: 0.06em;3382  color: var(--peach-t2);3383  padding: 2px 0;3384  transition: color 150ms ease;3385}33863387.peach-lock-reveal-btn:hover {3388  color: var(--peach-t1);3389}33903391.peach-lock-warning {3392  color: rgba(220, 80, 60, 0.85) !important;3393  line-height: 1.5;3394}33953396.peach-onboarding-cards {3397  display: grid;3398  gap: 8px;3399  position: relative;3400  z-index: 1;3401}34023403.peach-lock-panel {3404  position: relative;3405  z-index: 1;3406  display: grid;3407  gap: 9px;3408  padding: 14px 16px 15px;3409  border-radius: 18px;3410  border: 1px solid var(--peach-t3);3411  background:3412    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3413  box-shadow:3414    inset 0 1px 0 rgba(240, 232, 216, 0.04),3415    0 12px 28px rgba(0, 0, 0, 0.12);3416}34173418/* Glass surface — lock panel and settings groups */3419.peach-glass {3420  background: rgba(26, 20, 16, 0.65);3421  border: 1px solid rgba(255, 255, 255, 0.08);3422  border-radius: 12px;3423  backdrop-filter: blur(12px) saturate(1.4);3424  -webkit-backdrop-filter: blur(12px) saturate(1.4);3425}34263427@supports not (backdrop-filter: blur(1px)) {3428  .peach-glass {3429    background: rgba(26, 20, 16, 0.92);3430    border: 1px solid rgba(255, 255, 255, 0.10);3431    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3432  }3433}34343435.light .peach-glass,3436[data-theme="light"] .peach-glass {3437  background: rgba(253, 248, 244, 0.70);3438  border: 1px solid rgba(0, 0, 0, 0.07);3439  backdrop-filter: blur(12px) saturate(1.2);3440  -webkit-backdrop-filter: blur(12px) saturate(1.2);3441}34423443@supports not (backdrop-filter: blur(1px)) {3444  .light .peach-glass,3445  [data-theme="light"] .peach-glass {3446    background: rgba(253, 248, 244, 0.95);3447    border: 1px solid rgba(0, 0, 0, 0.09);3448  }3449}34503451/* Lock panel keeps its own border-radius over the generic glass token */3452.peach-lock-panel.peach-glass {3453  border-radius: 18px;3454  background: rgba(26, 20, 16, 0.65);3455  border: 1px solid rgba(255, 255, 255, 0.08);3456  box-shadow:3457    inset 0 1px 0 rgba(255, 255, 255, 0.05),3458    0 12px 28px rgba(0, 0, 0, 0.3);3459}34603461.light .peach-lock-panel.peach-glass,3462[data-theme="light"] .peach-lock-panel.peach-glass {3463  background: rgba(238, 227, 204, 0.75);3464  border: 1px solid rgba(34, 24, 9, 0.10);3465  box-shadow:3466    inset 0 1px 0 rgba(255, 255, 255, 0.5),3467    0 8px 24px rgba(80, 56, 32, 0.15);3468}34693470@supports not (backdrop-filter: blur(1px)) {3471  .peach-lock-panel.peach-glass {3472    background: rgba(26, 20, 16, 0.92);3473    box-shadow:3474      inset 0 1px 0 rgba(255, 255, 255, 0.05),3475      0 12px 28px rgba(0, 0, 0, 0.4);3476  }3477  .light .peach-lock-panel.peach-glass,3478  [data-theme="light"] .peach-lock-panel.peach-glass {3479    background: rgba(238, 227, 204, 0.96);3480  }3481}34823483.peach-lock-panel--secondary {3484  gap: 12px;3485}34863487.peach-lock-panel-header {3488  display: flex;3489  align-items: baseline;3490  justify-content: space-between;3491  gap: 12px;3492}34933494.peach-lock-option-grid {3495  display: grid;3496  gap: 10px;3497}34983499.peach-lock-option {3500  width: 100%;3501  display: grid;3502  gap: 6px;3503  padding: 14px 15px;3504  border-radius: 16px;3505  border: 1px solid rgba(240, 232, 216, 0.08);3506  background: rgba(240, 232, 216, 0.02);3507  color: var(--peach-t0);3508  text-align: left;3509  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3510}35113512.peach-lock-option:hover {3513  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3514  background: rgba(240, 232, 216, 0.04);3515  transform: translateY(-1px);3516}35173518.peach-lock-option-title {3519  font-size: 0.75rem;3520  color: var(--peach-t0);3521}35223523.peach-lock-option-copy {3524  font-size: 0.6875rem;3525  line-height: 1.55;3526  color: var(--peach-t1);3527}35283529.peach-onboarding-stack {3530  margin-top: 2px;3531}3532.peach-lock-panel-footer {3533  display: grid;3534  gap: 6px;3535  margin-top: 2px;3536  padding-top: 10px;3537  border-top: 1px solid rgba(240, 232, 216, 0.06);3538}35393540/* ── Restore tab view ─────────────────────────────────────────────────────3541   Tab-based restore screen replacing the old three-card picker. */35423543.peach-restore-tabview {3544  overflow: hidden;3545}35463547.peach-restore-tabcard {3548  flex: 1;3549  display: flex;3550  flex-direction: column;3551  gap: 0;3552  padding: 0;3553  overflow: hidden;3554  cursor: default;3555  user-select: none;3556  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3557}35583559/* ── Tab selector ─────────────────────────────────────────────────────── */35603561.peach-restore-tabs {3562  display: flex;3563  justify-content: space-around;3564  padding: 14px 10px 10px;3565  border-bottom: 1px solid var(--peach-t3);3566  gap: 2px;3567  overflow: hidden;3568  scrollbar-width: none;3569}3570.peach-restore-tabs::-webkit-scrollbar { display: none; }35713572.peach-restore-tab {3573  background: none;3574  border: none;3575  cursor: pointer;3576  padding: 3px 2px;3577  font-family: 'Cormorant Garamond', Georgia, serif;3578  font-style: italic;3579  font-size: 11px;3580  color: var(--peach-t2);3581  transition: color 150ms ease, text-shadow 150ms ease;3582  flex: 1;3583  min-width: 0;3584  text-align: center;3585  white-space: nowrap;3586  overflow: hidden;3587  text-overflow: ellipsis;3588}3589.peach-restore-tab:hover {3590  color: var(--peach-accent);3591  text-shadow:3592    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3593    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3594}3595.peach-restore-tab.is-active {3596  color: var(--peach-accent);3597  text-shadow:3598    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3599    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3600}36013602/* ── Content area ─────────────────────────────────────────────────────── */36033604.peach-restore-content {3605  padding: 16px 16px 14px;3606  display: flex;3607  flex-direction: column;3608  gap: 8px;3609  overflow: hidden;3610  scrollbar-width: none;3611  flex: 1;3612}3613.peach-restore-content::-webkit-scrollbar { display: none; }3614.peach-restore-content > * {3615  overflow: hidden;3616  scrollbar-width: none;3617}3618.peach-restore-content > *::-webkit-scrollbar { display: none; }36193620/* ── Shared tab inner layout ──────────────────────────────────────────── */36213622.peach-rt-symbols,3623.peach-rt-csv,3624.peach-rt-phone {3625  display: flex;3626  flex-direction: column;3627  gap: 8px;3628  overflow: hidden;3629}36303631.peach-rt-submit {3632  width: 100%;3633}36343635.peach-rt-error {3636  margin: 0;3637  font-size: 0.6875rem;3638  color: var(--peach-breach);3639  line-height: 1.4;3640}36413642/* ── PeachScript tab ──────────────────────────────────────────────────── */36433644.peach-restore-symbols-textarea {3645  font-family: 'PeachScript', monospace;3646  font-size: 13px;3647  line-height: 1.9;3648  letter-spacing: 0.1em;3649  word-break: break-all;3650  resize: none;3651  width: 100%;3652  min-height: 56px;3653  max-height: 72px;3654  overflow: hidden;3655  scrollbar-width: none;3656  -ms-overflow-style: none;3657  box-sizing: border-box;3658  padding: 6px 8px;3659  border-radius: 8px;3660  border: 1px solid var(--peach-t3);3661  background: rgba(240, 232, 216, 0.03);3662  color: var(--peach-t0);3663}3664.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3665.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }36663667.peach-restore-symbols-pass {3668  width: 100%;3669  box-sizing: border-box;3670  padding: 7px 10px;3671  border-radius: 8px;3672  border: 1px solid var(--peach-t3);3673  background: rgba(240, 232, 216, 0.03);3674  color: var(--peach-t0);3675  font-size: 0.8125rem;3676}3677.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }3678.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }36793680.peach-rt-divider {3681  text-align: center;3682  font-size: 0.6875rem;3683  color: var(--peach-t2);3684  font-style: italic;3685}36863687.peach-rt-file-label {3688  width: 100%;3689  justify-content: center;3690}36913692.peach-rt-anim-canvas {3693  width: 100%;3694  height: 180px;3695  border-radius: 10px;3696  overflow: hidden;3697  display: block;3698}36993700/* ── CSV tab ──────────────────────────────────────────────────────────── */37013702.peach-rt-csv-sources {3703  margin: 0;3704  font-size: 0.6875rem;3705  color: var(--peach-t2);3706  line-height: 1.5;3707  text-align: center;3708}37093710.peach-rt-csv-warning {3711  margin: 0;3712  font-family: "IBM Plex Mono", monospace;3713  font-size: 0.5625rem;3714  letter-spacing: 0.12em;3715  color: var(--peach-breach);3716  text-align: center;3717}37183719/* ── From Phone tab ───────────────────────────────────────────────────── */37203721.peach-rt-phone-code {3722  margin: 0;3723  text-align: center;3724  font-family: "IBM Plex Mono", monospace;3725  font-size: 22px;3726  letter-spacing: 0.18em;3727  color: var(--peach-t0);3728}37293730.peach-rt-phone-qr {3731  display: block;3732  width: 96px;3733  height: 96px;3734  margin: 0 auto;3735  border-radius: 6px;3736  image-rendering: pixelated;3737  overflow: hidden;3738}37393740.peach-rt-phone-hint {3741  margin: 0;3742  font-size: 0.6875rem;3743  color: var(--peach-t2);3744  line-height: 1.55;3745  text-align: center;3746}37473748/* ── Intro popup ──────────────────────────────────────────────────────── */37493750.peach-restore-intro-overlay {3751  position: absolute;3752  inset: 0;3753  z-index: 100;3754  display: flex;3755  align-items: center;3756  justify-content: center;3757  padding: 20px;3758  background: rgba(12, 10, 6, 0.7);3759  backdrop-filter: blur(4px);3760  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;3761}37623763.peach-restore-intro-card {3764  width: 100%;3765  display: flex;3766  flex-direction: column;3767  gap: 12px;3768  padding: 22px 20px 20px;3769  border-radius: 16px;3770  border: 1px solid var(--peach-t3);3771  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));3772  backdrop-filter: blur(4px);3773  -webkit-backdrop-filter: blur(4px);3774  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);3775}37763777.peach-restore-intro-headline {3778  margin: 0;3779  font-family: var(--font-display);3780  font-style: italic;3781  font-size: 20px;3782  font-weight: 400;3783  color: var(--peach-t0);3784}37853786.peach-restore-intro-body {3787  display: flex;3788  flex-direction: column;3789  gap: 8px;3790}3791.peach-restore-intro-body p {3792  margin: 0;3793  font-size: 0.75rem;3794  color: var(--peach-t1);3795  line-height: 1.5;3796}37973798.peach-restore-intro-btn {3799  width: 100%;3800  margin-top: 4px;3801}38023803/* Snapshot restore panel */3804.peach-snapshot-panel {3805  gap: 10px;3806  overflow-y: auto;3807  max-height: 340px;3808}3809.peach-snapshot-list {3810  display: flex;3811  flex-direction: column;3812  gap: 4px;3813}3814.peach-snapshot-row {3815  display: flex;3816  align-items: center;3817  justify-content: space-between;3818  width: 100%;3819  padding: 8px 10px;3820  border-radius: 8px;3821  border: 1px solid rgba(240, 232, 216, 0.07);3822  background: transparent;3823  cursor: pointer;3824  transition: border-color 120ms, background 120ms;3825  text-align: left;3826  gap: 8px;3827}3828.peach-snapshot-row:hover {3829  border-color: rgba(240, 232, 216, 0.14);3830  background: rgba(240, 232, 216, 0.03);3831}3832.peach-snapshot-row.is-selected {3833  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3834  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);3835}3836.peach-snapshot-time {3837  font-size: 11.5px;3838  color: var(--peach-t0);3839  flex: 1;3840}3841.peach-snapshot-count {3842  font-family: "IBM Plex Mono", monospace;3843  font-size: 0.625rem;3844  color: var(--peach-t2);3845  flex-shrink: 0;3846}3847.peach-snapshot-confirm {3848  display: flex;3849  flex-direction: column;3850  gap: 8px;3851  padding-top: 10px;3852  border-top: 1px solid rgba(240, 232, 216, 0.06);3853}3854.peach-snapshot-warning {3855  display: flex;3856  align-items: flex-start;3857  gap: 6px;3858  font-size: 10.5px;3859  color: rgba(220, 80, 60, 0.85);3860  line-height: 1.55;3861}3862.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }3863.peach-snapshot-confirm-row {3864  display: flex;3865  gap: 6px;3866  align-items: center;3867}3868.peach-snapshot-restore-btn {3869  width: 100%;3870}3871.peach-lock-hero--unlock .peach-lock-hero-art {3872  width: 112px;3873  height: 112px;3874  right: 0;3875  top: 2px;3876  opacity: 0.1;3877}38783879.peach-card {3880  border: 1px solid var(--peach-t3);3881  border-radius: 18px;3882  background:3883    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);3884  box-shadow:3885    inset 0 0 0 1px var(--peach-border-accent),3886    inset 0 1px 0 rgba(240, 232, 216, 0.04),3887    0 12px 32px rgba(0, 0, 0, 0.14);3888  overflow: hidden;3889}38903891.peach-card-active {3892  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);3893  box-shadow:3894    inset 0 1px 0 rgba(240, 232, 216, 0.05),3895    0 16px 38px rgba(0, 0, 0, 0.18),3896    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);3897}38983899.peach-card-disabled {3900  opacity: 0.72;3901}39023903.peach-card-header {3904  width: 100%;3905  padding: 13px 16px 11px;3906  background: transparent;3907  color: var(--peach-t0);3908  display: flex;3909  justify-content: space-between;3910  align-items: center;3911  text-align: left;3912  font-size: 0.75rem;3913}39143915.peach-card-body {3916  padding: 0 16px 16px;3917  display: grid;3918  gap: 9px;3919}39203921.peach-card-tag {3922  color: var(--peach-t2);3923  font-family: "IBM Plex Mono", monospace;3924  font-size: 0.5625rem;3925  letter-spacing: 0.12em;3926  text-transform: uppercase;3927}39283929.peach-empty-copy {3930  display: grid;3931  gap: 6px;3932  color: var(--peach-t1);3933  font-size: 0.8125rem;3934}39353936.peach-lock-submit {3937  width: 100%;3938  box-shadow:3939    0 1px 0 rgba(255,255,255,0.10) inset,3940    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),3941    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),3942    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);3943}39443945.peach-lock-secondary {3946  width: 100%;3947  border-color: var(--peach-t3);3948  background: rgba(240, 232, 216, 0.02);3949}39503951.peach-lock-secondary:hover {3952  background: rgba(240, 232, 216, 0.04);3953}39543955.peach-lock-note {3956  max-width: none;3957  line-height: 1.55;3958  margin: 0;3959}39603961.peach-overlay-action {3962  font-size: 0.625rem;3963  padding: 4px 8px;3964  letter-spacing: 0.06em;3965  min-width: 44px;3966  text-align: center;3967}39683969.peach-overlay-spacer {3970  width: 32px;3971}39723973.peach-inline-action {3974  flex-shrink: 0;3975  font-size: 0.5625rem;3976  letter-spacing: 0.1em;3977  text-transform: uppercase;3978  padding: 4px 7px;3979}3980.peach-password-toggle-btn {3981  display: inline-flex;3982  align-items: center;3983  justify-content: center;3984  min-width: 30px;3985  min-height: 26px;3986  padding: 0 7px;3987  border: 1px solid var(--peach-t3);3988  border-radius: 999px;3989  background: rgba(240, 232, 216, 0.04);3990  color: var(--peach-t2);3991  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;3992}3993.peach-password-toggle-btn:hover {3994  border-color: var(--peach-t2);3995  color: var(--peach-t0);3996  background: rgba(240, 232, 216, 0.06);3997}39983999.peach-new-textarea {4000  width: 100%;4001  min-height: 88px;4002  resize: vertical;4003  border: 0;4004  outline: none;4005  background: transparent;4006  color: var(--peach-t1);4007  font-family: "IBM Plex Mono", monospace;4008  font-size: 0.75rem;4009  line-height: 1.65;4010  caret-color: var(--peach-accent);4011}40124013.peach-new-textarea::placeholder {4014  color: var(--peach-t2);4015  opacity: 0.7;4016}40174018.peach-settings-actions {4019  display: grid;4020  gap: 8px;4021}40224023.peach-sync-section-label {4024  font-size: 0.6875rem;4025  color: var(--peach-t2);4026  text-transform: uppercase;4027  letter-spacing: 0.05em;4028}40294030.peach-sync-device-row {4031  display: flex;4032  justify-content: space-between;4033  align-items: center;4034  padding: 6px 0;4035  border-bottom: 1px solid var(--peach-t3);4036}40374038.peach-sync-device-info {4039  display: flex;4040  flex-direction: column;4041  gap: 2px;4042}40434044.peach-sync-device-name {4045  font-size: 0.8125rem;4046  color: var(--peach-t0);4047}40484049.peach-sync-device-meta {4050  font-size: 0.6875rem;4051  color: var(--peach-t2);4052}40534054.peach-sync-status-dot {4055  display: inline-block;4056  width: 8px;4057  height: 8px;4058  border-radius: 50%;4059  vertical-align: middle;4060}40614062.peach-sync-remove-btn {4063  color: var(--peach-breach);4064}40654066.peach-sync-advanced-row {4067  display: flex;4068  justify-content: space-between;4069  align-items: center;4070  padding: 6px 0;4071  gap: 12px;4072}40734074.peach-sync-advanced-info {4075  display: flex;4076  flex-direction: column;4077  gap: 2px;4078  flex: 1;4079}40804081.peach-sync-advanced-name {4082  font-size: 0.8125rem;4083  color: var(--peach-t0);4084}40854086.peach-sync-reset-confirm {4087  display: flex;4088  flex-direction: column;4089  gap: 8px;4090  padding: 10px;4091  border: 1px solid var(--peach-breach);4092  border-radius: 10px;4093  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4094}40954096.peach-sync-reset-confirm-headline {4097  font-size: 0.8125rem;4098  font-weight: 600;4099  color: var(--peach-t0);4100  margin: 0;4101}41024103.peach-sync-reset-confirm-body {4104  font-size: 0.75rem;4105  color: var(--peach-t1);4106  margin: 0;4107  line-height: 1.4;4108}41094110.peach-btn--danger {4111  background: var(--peach-breach);4112  color: #fff;4113  border-color: var(--peach-breach);4114}4115.peach-btn--danger:hover:not(:disabled) {4116  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4117}4118.peach-btn--danger:disabled {4119  opacity: 0.55;4120  cursor: not-allowed;4121}41224123.peach-sync-hero-icon {4124  color: var(--peach-t1);4125  opacity: 0.85;4126}41274128.peach-import-preview {4129  margin-bottom: 12px;4130  max-height: 152px;4131  overflow-y: auto;4132  border: 1px solid var(--peach-t3);4133  border-radius: 10px;4134  padding: 8px 10px;4135  display: grid;4136  gap: 8px;4137  background: rgba(240, 232, 216, 0.02);4138}41394140.peach-import-preview-row {4141  display: flex;4142  justify-content: space-between;4143  gap: 10px;4144  font-size: 0.6875rem;4145  color: var(--peach-t1);4146}41474148.peach-import-preview-title {4149  color: var(--peach-t0);4150  flex: 1;4151  min-width: 0;4152  overflow: hidden;4153  text-overflow: ellipsis;4154  white-space: nowrap;4155}41564157.peach-import-preview-meta {4158  color: var(--peach-t2);4159  flex-shrink: 0;4160  max-width: 42%;4161  overflow: hidden;4162  text-overflow: ellipsis;4163  white-space: nowrap;4164}41654166.peach-import-preview-more {4167  color: var(--peach-t2);4168  font-size: 0.625rem;4169}41704171.peach-restore-copy {4172  margin: 0;4173  color: var(--peach-t1);4174  font-size: 0.6875rem;4175  line-height: 1.6;4176}41774178.peach-restore-warning {4179  padding: 10px 12px;4180  border-radius: 12px;4181  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4182  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4183  color: var(--peach-t0);4184  font-size: 0.6875rem;4185  line-height: 1.55;4186}41874188.peach-provider-chips {4189  display: flex;4190  flex-wrap: wrap;4191  gap: 6px;4192}41934194.peach-provider-chip {4195  display: inline-flex;4196  align-items: center;4197  padding: 5px 8px;4198  border-radius: 999px;4199  border: 1px solid var(--peach-t3);4200  background: rgba(240, 232, 216, 0.02);4201  color: var(--peach-t1);4202  font-family: "IBM Plex Mono", monospace;4203  font-size: 0.5rem;4204  letter-spacing: 0.08em;4205  text-transform: uppercase;4206}42074208.peach-restore-file,4209.peach-restore-input {4210  width: 100%;4211  border-radius: 10px;4212  border: 1px solid var(--peach-t3);4213  background: var(--peach-s2);4214  color: var(--peach-t0);4215  font-size: 0.75rem;4216}42174218.peach-restore-file {4219  padding: 9px 10px;4220}42214222.peach-restore-file::file-selector-button {4223  margin-right: 10px;4224  padding: 7px 10px;4225  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4226  border-radius: 999px;4227  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4228  color: var(--peach-t0);4229  font-size: 0.625rem;4230  letter-spacing: 0.08em;4231  text-transform: uppercase;4232  cursor: pointer;4233}42344235.peach-restore-input {4236  padding: 10px 12px;4237}42384239.peach-auth-grid {4240  display: grid;4241  gap: 10px;4242}42434244.peach-import-summary {4245  color: var(--peach-t1);4246  font-size: 0.75rem;4247  line-height: 1.6;4248  margin-bottom: 12px;4249}42504251.peach-restore-error {4252  color: rgba(220, 80, 60, 0.95);4253  font-size: 0.75rem;4254  line-height: 1.55;4255}42564257.peach-passkey-card {4258  max-width: 400px;4259  margin: auto 16px;4260  align-self: center;4261  width: calc(100% - 32px);4262}42634264/* Center the approval card vertically inside the overlay-view (which sets4265 * flex-direction: column without justify-content). Without this, the card4266 * sits at the top with a tall empty band below — looks unfinished on the4267 * 320px popup. */4268.peach-overlay-view:has(.peach-passkey-card) {4269  justify-content: center;4270}42714272.peach-pro-badge {4273  padding: 2px 6px;4274  border-radius: 999px;4275  font-family: var(--font-ui);4276  font-size: 0.625rem;4277  letter-spacing: 0.08em;4278  text-transform: uppercase;4279  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4280  color: var(--peach-accent);4281}42824283/* ── Shortcuts rebind table ─────────────────────────────────── */4284.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4285.peach-shortcut-row {4286  display: flex;4287  align-items: center;4288  gap: 10px;4289  padding: 6px 0;4290}4291.peach-shortcut-row-label {4292  flex: 1;4293  font-size: 0.75rem;4294  color: var(--peach-t0);4295}4296.peach-shortcut-chip {4297  min-width: 64px;4298  padding: 4px 10px;4299  border-radius: 6px;4300  border: 1px solid var(--peach-t3);4301  background: var(--peach-input-bg, var(--surface-card));4302  color: var(--peach-t0);4303  font-family: var(--font-mono);4304  font-size: 0.6875rem;4305  letter-spacing: 0.04em;4306  cursor: pointer;4307  text-align: center;4308  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4309}4310.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4311.peach-shortcut-chip.is-custom {4312  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4313  color: var(--peach-accent);4314}4315.peach-shortcut-chip.is-capturing {4316  border-color: var(--peach-accent);4317  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4318  color: var(--peach-accent);4319  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4320}4321@keyframes peach-shortcut-capture-pulse {4322  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4323  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4324}4325.peach-shortcut-reset {4326  background: transparent;4327  border: none;4328  cursor: pointer;4329  color: var(--peach-t2);4330  padding: 4px 6px;4331  border-radius: 5px;4332  font-size: 0.875rem;4333  line-height: 1;4334  transition: color 120ms ease, background 120ms ease;4335}4336.peach-shortcut-reset:hover {4337  color: var(--peach-t0);4338  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4339}4340.peach-shortcuts-conflict {4341  margin: 4px 0 0;4342  padding: 8px 10px;4343  border-radius: 7px;4344  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4345  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4346  font-family: var(--font-mono);4347  font-size: 0.6875rem;4348  color: var(--peach-t0);4349}43504351/* ── Help dialog overlay (? to open) ────────────────────────── */4352.peach-shortcuts-help-backdrop {4353  position: fixed;4354  inset: 0;4355  background: rgba(0, 0, 0, 0.55);4356  backdrop-filter: blur(2px);4357  display: flex;4358  align-items: center;4359  justify-content: center;4360  z-index: 1000;4361  animation: peach-help-fade-in 140ms ease forwards;4362}4363@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4364.peach-shortcuts-help-card {4365  width: min(320px, 92vw);4366  max-height: 80vh;4367  overflow-y: auto;4368  border-radius: 14px;4369  border: 1px solid var(--peach-t3);4370  background: var(--peach-bg);4371  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4372  padding: 16px 18px 18px;4373  display: flex;4374  flex-direction: column;4375  gap: 12px;4376}4377.peach-shortcuts-help-head {4378  display: flex; align-items: center; justify-content: space-between;4379}4380.peach-shortcuts-help-head h3 {4381  margin: 0;4382  font-family: var(--font-display);4383  font-style: italic;4384  font-weight: 400;4385  font-size: 22px;4386  color: var(--peach-t0);4387}4388.peach-shortcuts-help-close {4389  background: transparent;4390  border: none;4391  color: var(--peach-t2);4392  cursor: pointer;4393  font-size: 0.875rem;4394  padding: 4px 8px;4395  border-radius: 5px;4396}4397.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4398.peach-shortcuts-help-body ul {4399  list-style: none; padding: 0; margin: 4px 0 12px;4400  display: grid; gap: 8px;4401}4402.peach-shortcuts-help-body li {4403  display: flex; align-items: center; justify-content: space-between; gap: 12px;4404  font-size: 0.75rem; color: var(--peach-t0);4405}4406.peach-shortcuts-help-body kbd {4407  font-family: var(--font-mono);4408  font-size: 0.6875rem;4409  padding: 3px 8px;4410  border-radius: 6px;4411  background: var(--surface-card);4412  border: 1px solid var(--peach-t3);4413  color: var(--peach-accent);4414  letter-spacing: 0.04em;4415}44164417/* ── Pro promo on Account screen ────────────────────────────── */4418.peach-pro-promo {4419  position: relative;4420  border-radius: 14px;4421  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4422  background:4423    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4424    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4425    var(--surface-card);4426  overflow: hidden;4427  margin-bottom: 14px;4428}4429.peach-pro-promo-glow {4430  position: absolute;4431  inset: -40% -20% auto auto;4432  width: 220px; height: 220px;4433  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4434  pointer-events: none;4435  filter: blur(8px);4436}4437.peach-pro-promo-inner {4438  position: relative;4439  padding: 18px 18px 16px;4440}4441.peach-pro-promo-title {4442  font-family: var(--font-display);4443  font-style: italic;4444  font-weight: 400;4445  font-size: 28px;4446  line-height: 1;4447  letter-spacing: -0.005em;4448  color: var(--peach-t0);4449  margin: 0 0 4px;4450}4451.peach-pro-promo-tagline {4452  font-family: var(--font-mono);4453  font-size: 0.625rem;4454  letter-spacing: 0.06em;4455  color: var(--peach-t2);4456  margin: 0 0 14px;4457}4458.peach-pro-promo-list {4459  list-style: none;4460  margin: 0 0 16px;4461  padding: 0;4462  display: grid;4463  gap: 9px;4464}4465.peach-pro-promo-list li {4466  display: flex;4467  align-items: flex-start;4468  gap: 9px;4469  font-size: 0.75rem;4470  color: var(--peach-t1);4471  line-height: 1.4;4472}4473.peach-pro-promo-list svg {4474  width: 14px;4475  height: 14px;4476  flex-shrink: 0;4477  color: var(--peach-accent);4478  margin-top: 2px;4479}4480.peach-pro-promo-list span {4481  color: var(--peach-t0);4482}4483.peach-pro-promo-cta {4484  width: 100%;4485  background: var(--peach-accent);4486  color: #fff;4487  border: none;4488  padding: 9px 12px;4489  border-radius: 9px;4490  font-size: 0.75rem;4491  font-weight: 500;4492  font-family: var(--font-ui);4493  letter-spacing: 0.02em;4494  text-decoration: none;4495  display: inline-flex;4496  align-items: center;4497  justify-content: center;4498  cursor: pointer;4499  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4500  box-shadow: 0 2px 16px var(--peach-glow);4501}4502.peach-pro-promo-cta:hover {4503  filter: brightness(1.07);4504  box-shadow: 0 4px 24px var(--peach-glow);4505  transform: translateY(-1px);4506}4507.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }45084509.peach-pro-or-divider {4510  display: flex;4511  align-items: center;4512  gap: 10px;4513  margin: 4px 0 12px;4514  font-family: var(--font-mono);4515  font-size: 0.625rem;4516  letter-spacing: 0.06em;4517  color: var(--peach-t2);4518  text-transform: uppercase;4519}4520.peach-pro-or-divider::before,4521.peach-pro-or-divider::after {4522  content: "";4523  flex: 1;4524  height: 1px;4525  background: var(--peach-t3);4526}45274528.peach-loading {4529  position: absolute;4530  inset: 0;4531  display: flex;4532  align-items: center;4533  justify-content: center;4534  background: var(--bg);4535  animation: peach-loading-pulse 1.2s ease-in-out infinite;4536}45374538@keyframes peach-loading-pulse {4539  0%, 100% { opacity: 0.6; }4540  50% { opacity: 1; }4541}45424543/* ── Health Dashboard ─────────────────────────────────────────────────── */4544.peach-health-body {4545  flex: 1;4546  overflow-y: auto;4547  display: flex;4548  flex-direction: column;4549  /* Hide the platform scrollbar — every other scrollable surface in the4550   * popup hides it; the Health view was the one outlier and it ruined the4551   * polish. Behavior unchanged, just no rail rendered. */4552  scrollbar-width: none;4553  -ms-overflow-style: none;4554}4555.peach-health-body::-webkit-scrollbar { display: none; }45564557/* Loading screen for the Vault Health view. The advanced report computation4558 * can run for a few seconds on a large vault — without a clear loading4559 * screen the surface looked broken (the entry view bleeds through the4560 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4561.peach-health-loading-screen {4562  flex: 1;4563  display: flex;4564  flex-direction: column;4565  align-items: center;4566  justify-content: center;4567  gap: 14px;4568  padding: 32px 28px;4569  text-align: center;4570}45714572.peach-health-loading-glyph {4573  width: 48px;4574  height: 48px;4575  display: flex;4576  align-items: center;4577  justify-content: center;4578  border-radius: 14px;4579  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4580  color: var(--peach-accent);4581}45824583.peach-health-loading-title {4584  margin: 0;4585  font-family: var(--font-display);4586  font-style: italic;4587  font-weight: 300;4588  font-size: 19px;4589  line-height: 1.2;4590  color: var(--peach-t0);4591}45924593.peach-health-loading-copy {4594  margin: 0;4595  max-width: 240px;4596  font-size: 0.75rem;4597  line-height: 1.55;4598  color: var(--peach-t2);4599}46004601.peach-health-loading-track {4602  width: 200px;4603  height: 3px;4604  margin-top: 6px;4605  border-radius: 999px;4606  background: rgba(240, 232, 216, 0.06);4607  overflow: hidden;4608}46094610.peach-health-loading-fill {4611  width: 40%;4612  height: 100%;4613  border-radius: inherit;4614  background: linear-gradient(4615    90deg,4616    transparent 0%,4617    var(--peach-accent) 50%,4618    transparent 100%4619  );4620  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4621}46224623@keyframes peach-health-loading-sweep {4624  0%   { transform: translateX(-100%); }4625  100% { transform: translateX(350%); }4626}46274628[data-motion="reduce"] .peach-health-loading-fill,4629[data-motion="reduce"] .peach-health-loading-glyph svg path {4630  animation: none;4631}46324633.peach-health-summary {4634  padding: 10px 16px 6px;4635  font-family: "IBM Plex Mono", monospace;4636  font-size: 0.6875rem;4637}4638.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4639.peach-health-summary-ok { color: var(--peach-t2); }46404641.peach-health-check-row {4642  padding: 0 16px 10px;4643}4644.peach-health-check-btn {4645  width: 100%;4646  display: flex;4647  align-items: center;4648  justify-content: center;4649}46504651.peach-health-sections {4652  flex: 1;4653  display: flex;4654  flex-direction: column;4655}46564657.peach-health-section {4658  border-bottom: 1px solid var(--peach-t3);4659}46604661.peach-health-section-header {4662  width: 100%;4663  display: flex;4664  align-items: center;4665  justify-content: space-between;4666  padding: 9px 16px;4667  background: transparent;4668  cursor: pointer;4669  color: var(--peach-t0);4670}46714672.peach-health-section-title-row {4673  display: flex;4674  align-items: center;4675  gap: 8px;4676}46774678.peach-health-count-badge {4679  display: inline-flex;4680  align-items: center;4681  justify-content: center;4682  min-width: 20px;4683  height: 18px;4684  padding: 0 5px;4685  border-radius: 999px;4686  background: rgba(220,80,60,0.15);4687  border: 1px solid rgba(220,80,60,0.25);4688  font-family: "IBM Plex Mono", monospace;4689  font-size: 0.5625rem;4690  color: rgba(220,80,60,0.9);4691}46924693.peach-health-section-title {4694  font-family: "IBM Plex Mono", monospace;4695  font-size: 0.6875rem;4696  text-transform: uppercase;4697  letter-spacing: 0.1em;4698  color: var(--peach-t1);4699}47004701.peach-health-chevron {4702  color: var(--peach-t2);4703  transition: transform 200ms ease;4704  flex-shrink: 0;4705}4706.peach-health-chevron.is-expanded {4707  transform: rotate(180deg);4708}47094710.peach-health-section-body {4711  padding: 0 16px 10px;4712  display: flex;4713  flex-direction: column;4714  gap: 4px;4715}47164717.peach-health-row {4718  display: flex;4719  align-items: flex-start;4720  justify-content: space-between;4721  gap: 8px;4722  padding: 6px 8px;4723  border-radius: 8px;4724  background: rgba(240,232,216,0.02);4725}47264727.peach-health-row-info {4728  flex: 1;4729  min-width: 0;4730  display: flex;4731  flex-direction: column;4732  gap: 2px;4733}47344735.peach-health-row-name {4736  font-family: var(--font-display);4737  font-size: 0.9375rem;4738  font-style: italic;4739  font-weight: 400;4740  color: var(--peach-t0);4741  white-space: nowrap;4742  overflow: hidden;4743  text-overflow: ellipsis;4744}47454746.peach-health-row-meta {4747  font-family: "IBM Plex Mono", monospace;4748  font-size: 0.5625rem;4749  color: var(--peach-t2);4750  letter-spacing: 0.05em;4751}47524753.peach-health-fix-btn {4754  font-size: 0.5625rem;4755  letter-spacing: 0.08em;4756  text-transform: uppercase;4757  padding: 4px 7px;4758  flex-shrink: 0;4759  display: flex;4760  align-items: center;4761}47624763.peach-health-empty {4764  font-family: "IBM Plex Mono", monospace;4765  font-size: 0.625rem;4766  color: var(--peach-t2);4767  padding: 6px 0;4768}47694770.peach-health-loading {4771  font-family: "IBM Plex Mono", monospace;4772  font-size: 0.625rem;4773  color: var(--peach-t2);4774  padding: 6px 0;4775  display: flex;4776  align-items: center;4777  gap: 6px;4778}47794780.peach-health-loading::before {4781  content: "";4782  width: 10px;4783  height: 10px;4784  border: 1.5px solid var(--peach-t3);4785  border-top-color: var(--peach-accent);4786  border-radius: 50%;4787  animation: peach-spin 600ms linear infinite;4788}47894790@keyframes peach-spin {4791  to { transform: rotate(360deg); }4792}47934794.peach-spinner {4795  width: 32px;4796  height: 32px;4797  border: 2px solid var(--peach-s2);4798  border-top-color: var(--peach-accent);4799  border-radius: 50%;4800  margin: 0 auto 16px;4801  animation: peach-spin 0.8s linear infinite;4802}48034804.peach-progress-screen {4805  text-align: center;4806  padding: 32px 16px;4807}48084809.peach-progress-screen-title {4810  font-size: 0.8125rem;4811  color: var(--peach-t0);4812  margin-bottom: 16px;4813}48144815.peach-progress-screen-stage {4816  font-size: 0.6875rem;4817  color: var(--peach-t2);4818  min-height: 14px;4819}48204821.peach-progress-screen-note {4822  font-size: 0.625rem;4823  color: var(--peach-t2);4824  margin-top: 8px;4825}48264827.peach-pairing-body {4828  flex: 1;4829  overflow-y: auto;4830  display: flex;4831  flex-direction: column;4832}48334834.peach-pairing-content {4835  flex: 1;4836  display: flex;4837  flex-direction: column;4838  align-items: center;4839  justify-content: center;4840  gap: 14px;4841  padding: 28px 20px;4842  text-align: center;4843}48444845.peach-pairing-code-screen {4846  gap: 18px;4847}48484849.peach-pairing-headline {4850  font-family: var(--font-display);4851  font-style: italic;4852  font-weight: 300;4853  font-size: 28px;4854  color: var(--peach-t0);4855  margin: 0;4856  line-height: 1;4857}48584859.peach-pairing-subline {4860  font-size: 0.75rem;4861  color: var(--peach-t2);4862  max-width: 220px;4863  line-height: 1.5;4864  margin: 0;4865}48664867.peach-pairing-subline--center {4868  text-align: center;4869}48704871/* 6-digit pairing code — both display (.peach-pairing-code) and entry4872   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking4873   so the two modes feel like the same surface. */4874.peach-pairing-code {4875  font-family: "IBM Plex Mono", monospace;4876  font-size: 36px;4877  letter-spacing: 0.25em;4878  color: var(--peach-t0);4879  text-align: center;4880  padding: 24px 0;4881  text-shadow:4882    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),4883    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);4884  background: transparent;4885  border: 0;4886  cursor: default;4887  user-select: text;4888}48894890.peach-pairing-code--loading,4891.peach-pairing-code--expired {4892  font-size: 18px;4893  letter-spacing: 0.04em;4894  color: var(--peach-t2);4895  cursor: pointer;4896  text-shadow: none;4897}48984899.peach-pairing-code-input {4900  font-family: "IBM Plex Mono", monospace;4901  font-size: 36px;4902  letter-spacing: 0.25em;4903  color: var(--peach-t0);4904  background: transparent;4905  border: 0;4906  border-bottom: 1px solid var(--peach-t3);4907  outline: none;4908  text-align: center;4909  padding: 18px 0;4910  width: 220px;4911  caret-color: var(--peach-accent);4912  transition: border-color 160ms ease;4913}49144915.peach-pairing-code-input::placeholder {4916  color: var(--peach-t3);4917}49184919.peach-pairing-code-input:focus {4920  border-bottom-color: var(--peach-accent);4921}49224923.peach-pairing-toggle {4924  background: transparent;4925  border: 0;4926  color: var(--peach-t2);4927  font-size: 0.75rem;4928  padding: 8px 4px;4929  cursor: pointer;4930  transition: color 120ms ease;4931}49324933.peach-pairing-toggle:hover:not(:disabled) {4934  color: var(--peach-t1);4935}49364937.peach-pairing-toggle:disabled {4938  opacity: 0.5;4939  cursor: default;4940}49414942.peach-pairing-hint {4943  font-size: 0.6875rem;4944  color: var(--peach-t2);4945  margin: 0;4946  text-align: center;4947}49484949.peach-pairing-status {4950  display: flex;4951  align-items: center;4952  gap: 8px;4953  margin: 0;4954  font-size: 0.75rem;4955  color: var(--peach-t1);4956}49574958.peach-pairing-error {4959  margin: 0;4960  font-size: 0.6875rem;4961  color: var(--peach-breach);4962}49634964.peach-pairing-error--muted {4965  color: var(--peach-t2);4966}49674968.peach-pairing-spinner {4969  width: 12px;4970  height: 12px;4971  border: 1.5px solid var(--peach-t3);4972  border-top-color: var(--peach-accent);4973  border-radius: 50%;4974  animation: peach-spin 0.8s linear infinite;4975}49764977.peach-pairing-success-icon,4978.peach-pairing-error-icon,4979.peach-pairing-hero {4980  display: inline-flex;4981  align-items: center;4982  justify-content: center;4983}49844985/* Tag chips */4986.peach-tag-chip {4987  display: inline-flex;4988  align-items: center;4989  gap: 4px;4990  padding: 3px 8px;4991  border-radius: 999px;4992  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4993  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4994  color: var(--peach-t0);4995  font-family: "IBM Plex Mono", monospace;4996  font-size: 0.625rem;4997  letter-spacing: 0.04em;4998}49995000.peach-tag-chip-remove {5001  background: transparent;5002  border: none;5003  color: inherit;5004  opacity: 0.6;5005  cursor: pointer;5006  padding: 0;5007  font-size: 0.75rem;5008  line-height: 1;5009}50105011.peach-tag-chip-remove:hover {5012  opacity: 1;5013}50145015/* Tag input */5016.peach-tag-input-wrap {5017  border-bottom: 1px solid var(--peach-t3);5018}50195020.peach-tag-suggestions {5021  display: flex;5022  flex-wrap: wrap;5023  gap: 4px;5024  padding: 6px 0;5025}50265027.peach-tag-suggestion {5028  padding: 2px 8px;5029  border-radius: 999px;5030  border: 1px solid var(--peach-t3);5031  background: var(--peach-s2);5032  color: var(--peach-t1);5033  font-family: "IBM Plex Mono", monospace;5034  font-size: 0.625rem;5035  cursor: pointer;5036  transition: border-color 80ms ease, background 80ms ease;5037}50385039.peach-tag-suggestion:hover {5040  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5041  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5042}50435044/* Tag filter strip */5045.peach-tag-filter-strip {5046  border-bottom: 1px solid var(--peach-t3);5047  flex-shrink: 0;5048}50495050.peach-tag-filter-chip {5051  display: inline-flex;5052  align-items: center;5053  padding: 4px 10px;5054  border-radius: 999px;5055  border: 1px solid var(--peach-t3);5056  background: transparent;5057  color: var(--peach-t2);5058  font-family: "IBM Plex Mono", monospace;5059  font-size: 0.5625rem;5060  letter-spacing: 0.06em;5061  text-transform: uppercase;5062  cursor: pointer;5063  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5064  white-space: nowrap;5065}50665067.peach-tag-filter-chip:hover {5068  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5069  color: var(--peach-t1);5070}50715072.peach-tag-filter-chip.is-selected {5073  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5074  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5075  color: var(--peach-t0);5076}50775078/* ─────────────────────────────────────────────────────────────────────────5079   v1.4.12 additions5080   ─────────────────────────────────────────────────────────────────────── */50815082/* Sort bar */5083.peach-sort-bar {5084  display: flex;5085  align-items: center;5086  gap: 4px;5087  padding: 5px 12px;5088  border-bottom: 1px solid var(--peach-t3);5089  flex-shrink: 0;5090  overflow-x: auto;5091  scrollbar-width: none;5092}50935094.peach-sort-btn {5095  padding: 2px 9px;5096  border-radius: 999px;5097  border: 1px solid transparent;5098  background: transparent;5099  color: var(--peach-t2);5100  font-family: "IBM Plex Mono", monospace;5101  font-size: 0.5625rem;5102  letter-spacing: 0.07em;5103  text-transform: uppercase;5104  cursor: pointer;5105  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5106  white-space: nowrap;5107}51085109.peach-sort-btn:hover {5110  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5111  color: var(--peach-t1);5112}51135114.peach-sort-btn.is-active {5115  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5116  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5117  color: var(--peach-t0);5118}51195120.peach-sort-domain-hint {5121  margin-left: auto;5122  font-family: "IBM Plex Mono", monospace;5123  font-size: 0.5625rem;5124  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5125  white-space: nowrap;5126  overflow: hidden;5127  text-overflow: ellipsis;5128  max-width: 110px;5129}51305131/* Tab-match badge on entry rows */5132.peach-tab-match-badge {5133  display: inline-block;5134  width: 6px;5135  height: 6px;5136  border-radius: 50%;5137  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5138  margin-left: 5px;5139  vertical-align: middle;5140  flex-shrink: 0;5141  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5142}51435144.peach-entry-row.is-tab-match {5145  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5146  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5147}51485149.peach-entry-row.is-tab-match:hover {5150  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5151}51525153/* Entry list stagger entrance */5154@keyframes peach-entry-fadein {5155  from { opacity: 0; transform: translateY(4px); }5156  to   { opacity: 1; transform: translateY(0); }5157}51585159.peach-vault-list .peach-entry-row {5160  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5161  content-visibility: auto;5162  contain-intrinsic-size: auto 44px;5163}51645165/* Button press micro-interaction */5166.peach-btn:active {5167  transform: scale(0.95);5168  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5169}51705171.peach-sort-btn:active,5172.peach-tag-filter-chip:active {5173  transform: scale(0.93);5174  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5175}51765177/* Password strength bar (Lock view + shared) */5178.peach-password-strength {5179  display: flex;5180  align-items: center;5181  gap: 8px;5182  margin-top: 6px;5183}51845185.peach-strength-bar {5186  flex: 1;5187  height: 3px;5188  border-radius: 2px;5189  background: var(--peach-t3);5190  overflow: hidden;5191}51925193.peach-strength-fill {5194  height: 100%;5195  border-radius: 2px;5196  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5197              background 300ms ease;5198}51995200.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5201.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5202.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5203.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }52045205.peach-strength-label {5206  font-family: "IBM Plex Mono", monospace;5207  font-style: italic;5208  font-size: 0.5625rem;5209  font-weight: 300;5210  letter-spacing: 0.06em;5211  color: var(--peach-t2);5212  min-width: 36px;5213  text-align: right;5214}52155216.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5217.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5218.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5219.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }52205221/* Duress form */5222.peach-duress-status {5223  padding: 2px 8px;5224  border-radius: 999px;5225  border: 1px solid var(--peach-t3);5226  font-family: "IBM Plex Mono", monospace;5227  font-size: 0.5625rem;5228  letter-spacing: 0.07em;5229  text-transform: uppercase;5230  color: var(--peach-t2);5231  flex-shrink: 0;5232}52335234.peach-duress-status.is-active {5235  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5236  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5237  color: var(--peach-t0);5238}52395240.peach-duress-form {5241  padding: 8px 0 4px;5242  display: flex;5243  flex-direction: column;5244  gap: 6px;5245}52465247.peach-duress-form .peach-label {5248  margin-top: 4px;5249}52505251.peach-duress-actions {5252  display: flex;5253  gap: 6px;5254  align-items: center;5255  margin-top: 4px;5256}52575258.peach-duress-actions .peach-btn:first-child {5259  margin-right: auto;5260}52615262/* Improved overlay spring entrance */5263.peach-overlay-view.ov-enter-up {5264  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5265}52665267@keyframes ov-enter-up-spring {5268  from { opacity: 0; transform: translateY(16px) scale(0.98); }5269  to   { opacity: 1; transform: translateY(0) scale(1); }5270}52715272.peach-overlay-view.ov-enter-right {5273  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5274}52755276@keyframes ov-enter-right-spring {5277  from { opacity: 0; transform: translateX(18px) scale(0.98); }5278  to   { opacity: 1; transform: translateX(0) scale(1); }5279}52805281/* ── Onboarding-mode restore screens (file import) ── */5282/* Used when MainImportView renders during onboarding (no vault yet).5283   Animates like a lock-screen transition. */5284.peach-lock-view {5285  position: absolute;5286  inset: 0;5287  display: flex;5288  flex-direction: column;5289  background:5290    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5291    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5292    var(--peach-bg);5293  z-index: 2;5294  overflow: hidden;5295  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5296}52975298.peach-lock-view-header {5299  display: flex;5300  align-items: center;5301  justify-content: space-between;5302  padding: 16px 18px 12px;5303  flex-shrink: 0;5304}53055306/* ───────── Settings: auto-lock select ───────── */5307.peach-settings-select {5308  font-family: "IBM Plex Mono", monospace;5309  font-size: 0.6875rem;5310  background: transparent;5311  border: 1px solid var(--peach-t3);5312  border-radius: 4px;5313  color: var(--peach-t1);5314  padding: 3px 6px;5315  cursor: pointer;5316  outline: none;5317}5318.peach-settings-select:focus {5319  border-color: var(--peach-accent);5320}53215322/* ───────── Duress status pill (new polished) ───────── */5323.peach-duress-status-pill {5324  font-family: "IBM Plex Mono", monospace;5325  font-size: 0.5625rem;5326  text-transform: uppercase;5327  letter-spacing: 0.12em;5328  padding: 2px 8px;5329  border-radius: 12px;5330  background: var(--peach-t3);5331  color: var(--peach-t2);5332  flex-shrink: 0;5333}5334.peach-duress-status-pill.is-active {5335  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5336  color: var(--peach-accent);5337}53385339/* ───────── Entry advanced disclosure (canary) ───────── */5340.peach-entry-advanced {5341  margin-top: 12px;5342  border-top: 1px solid var(--peach-t3);5343  padding-top: 10px;5344  position: relative;5345  z-index: 1;5346}5347.peach-entry-advanced-toggle {5348  display: flex;5349  align-items: center;5350  justify-content: space-between;5351  width: 100%;5352  background: transparent;5353  border: none;5354  cursor: pointer;5355  padding: 0;5356  color: var(--peach-t2);5357}5358.peach-canary-section {5359  margin-top: 10px;5360  display: grid;5361  gap: 6px;5362}53635364/* ───────── Import: merge/replace radio choices ───────── */5365.peach-import-choice {5366  display: flex;5367  align-items: flex-start;5368  gap: 10px;5369  padding: 8px 10px;5370  border: 1px solid var(--peach-t3);5371  border-radius: 10px;5372  cursor: pointer;5373  margin-bottom: 6px;5374  transition: border-color 120ms ease, background 120ms ease;5375}5376.peach-import-choice:hover {5377  border-color: var(--peach-accent);5378}5379.peach-import-choice input[type="radio"] {5380  margin-top: 3px;5381  accent-color: var(--peach-accent);5382  flex-shrink: 0;5383}5384.peach-import-choice-main {5385  display: flex;5386  flex-direction: column;5387  gap: 2px;5388  min-width: 0;5389}5390.peach-import-choice-label {5391  font-size: 0.75rem;5392  color: var(--peach-t0);5393}5394.peach-import-choice-sub {5395  font-size: 0.6875rem;5396  color: var(--peach-t2);5397  line-height: 1.5;5398}53995400/* ───────── Export: success confirmation strip ───────── */5401.peach-export-success {5402  display: flex;5403  align-items: flex-start;5404  gap: 10px;5405  padding: 12px;5406  border-radius: 12px;5407  border: 1px solid rgba(150, 175, 110, 0.3);5408  background: rgba(150, 175, 110, 0.08);5409  color: var(--peach-t0);5410  font-size: 0.75rem;5411  line-height: 1.55;5412}5413.peach-export-success-check {5414  color: rgba(150, 175, 110, 0.9);5415  font-size: 0.875rem;5416  flex-shrink: 0;5417}54185419/* ── Trash view ──────────────────────────────────────────────────────── */5420.peach-trash-entry-row {5421  display: flex;5422  align-items: center;5423  justify-content: space-between;5424  gap: 8px;5425  padding: 8px 0;5426  border-bottom: 1px solid var(--peach-border);5427}5428.peach-trash-entry-info {5429  flex: 1;5430  min-width: 0;5431  display: flex;5432  flex-direction: column;5433  gap: 2px;5434}5435.peach-trash-entry-title {5436  font-size: 0.8125rem;5437  color: var(--peach-t0);5438  overflow: hidden;5439  text-overflow: ellipsis;5440  white-space: nowrap;5441}5442.peach-trash-entry-meta {5443  font-family: var(--font-mono);5444  font-size: 0.5625rem;5445  color: var(--peach-t2);5446  letter-spacing: 0.04em;5447}5448.peach-trash-entry-actions {5449  display: flex;5450  align-items: center;5451  gap: 4px;5452  flex-shrink: 0;5453}5454.peach-trash-delete-btn {5455  background: transparent;5456  border: 0;5457  color: var(--peach-t3);5458  font-size: 1rem;5459  line-height: 1;5460  cursor: pointer;5461  padding: 2px 5px;5462  transition: color 0.15s;5463}5464.peach-trash-delete-btn:hover { color: var(--peach-breach); }5465.peach-trash-list {5466  overflow-y: auto;5467}5468.peach-trash-footer {5469  display: flex;5470  align-items: center;5471  gap: 8px;5472  padding: 8px 0 0;5473  border-top: 1px solid var(--peach-border);5474  margin-top: 4px;5475}5476.peach-trash-purge-all {5477  background: transparent;5478  border: 0;5479  color: var(--peach-t3);5480  font-size: 0.625rem;5481  cursor: pointer;5482  padding: 4px 0;5483  letter-spacing: 0.03em;5484  transition: color 0.2s;5485}5486.peach-trash-purge-all:hover { color: var(--peach-breach); }5487.peach-trash-purge-confirm-label {5488  font-size: 0.625rem;5489  color: var(--peach-t1);5490  flex: 1;5491}54925493/* ── Settings shortcuts grid ─────────────────────────────────────────── */5494.peach-shortcuts-grid {5495  display: grid;5496  grid-template-columns: auto 1fr;5497  gap: 6px 12px;5498  align-items: center;5499  padding: 4px 0;5500}5501.peach-shortcut-key {5502  font-family: var(--font-mono);5503  font-size: 0.625rem;5504  color: var(--peach-t0);5505  background: var(--peach-t3);5506  border-radius: 4px;5507  padding: 2px 6px;5508  white-space: nowrap;5509  text-align: center;5510}5511.peach-shortcut-desc {5512  font-size: 0.6875rem;5513  color: var(--peach-t1);5514}55155516/* ── Sort bar trash button ───────────────────────────────────────────── */5517.peach-sort-trash-btn {5518  display: flex;5519  align-items: center;5520  justify-content: center;5521  padding: 3px 5px;5522  background: transparent;5523  border: none;5524  cursor: pointer;5525  color: var(--peach-t2);5526  border-radius: 4px;5527  transition: color 140ms ease, background 140ms ease;5528}5529.peach-sort-trash-btn:hover {5530  color: var(--peach-t1);5531  background: var(--peach-t3);5532}5533.peach-sort-trash-btn.is-active {5534  color: var(--peach-accent);5535}55365537/* Accent color picker */5538.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5539.peach-accent-picker {5540  display: flex;5541  flex-wrap: wrap;5542  gap: 7px;5543  padding: 2px 0;5544}5545.peach-accent-swatch {5546  width: 22px;5547  height: 22px;5548  border-radius: 50%;5549  border: 2px solid transparent;5550  cursor: pointer;5551  padding: 0;5552  transition: transform 100ms;5553  outline-offset: 2px;5554}5555.peach-accent-swatch:hover { transform: scale(1.15); }5556.peach-accent-swatch.is-active {5557  border-color: var(--peach-t0);5558  transform: scale(1.1);5559}55605561/* Display font picker — swatch shows an "Aa" preview rendered with each5562   font option so the user can see what they're picking before they pick. */5563.peach-settings-row--font { align-items: flex-start; padding-top: 10px; }5564.peach-font-picker {5565  display: flex;5566  flex-wrap: wrap;5567  gap: 6px;5568  padding: 2px 0;5569  flex: 1;5570  justify-content: flex-end;5571}5572.peach-font-swatch {5573  display: flex;5574  flex-direction: column;5575  align-items: center;5576  gap: 2px;5577  padding: 4px 8px;5578  background: transparent;5579  border: 1px solid var(--peach-t3);5580  border-radius: 6px;5581  cursor: pointer;5582  transition: border-color 100ms, background 100ms;5583  min-width: 56px;5584}5585.peach-font-swatch:hover {5586  border-color: var(--peach-accent-dim);5587  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5588}5589.peach-font-swatch.is-active {5590  border-color: var(--peach-accent);5591  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5592}5593.peach-font-swatch-glyph {5594  font-size: 18px;5595  line-height: 1;5596  color: var(--peach-t0);5597}5598.peach-font-swatch[data-font-preview="cormorant-italic"] .peach-font-swatch-glyph {5599  font-family: "Cormorant Garamond", serif;5600  font-style: italic;5601  font-weight: 400;5602}5603.peach-font-swatch[data-font-preview="cormorant"] .peach-font-swatch-glyph {5604  font-family: "Cormorant Garamond", serif;5605  font-style: normal;5606  font-weight: 400;5607}5608.peach-font-swatch[data-font-preview="inter"] .peach-font-swatch-glyph {5609  font-family: "Inter Variable", "Inter", sans-serif;5610  font-style: normal;5611  font-weight: 400;5612}5613.peach-font-swatch[data-font-preview="system"] .peach-font-swatch-glyph {5614  font-family: system-ui, -apple-system, sans-serif;5615  font-style: normal;5616  font-weight: 400;5617}5618.peach-font-swatch-name {5619  font-family: var(--font-mono);5620  font-size: 0.5rem;5621  letter-spacing: 0.06em;5622  color: var(--peach-t2);5623  text-transform: lowercase;5624}56255626.peach-pill-group {5627  display: flex;5628  gap: 6px;5629}5630.peach-pill-group .peach-btn.is-active {5631  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5632  border-color: var(--peach-accent);5633  color: var(--peach-t0);5634}56355636/* ── Card entry styles ───────────────────────────────────────── */5637.peach-card-number {5638  font-family: var(--peach-mono);5639  letter-spacing: 0.08em;5640}56415642.peach-card-network-badge {5643  font-size: 0.625rem;5644  padding: 1px 5px;5645  border-radius: 4px;5646  border: 0.5px solid var(--peach-border);5647  color: var(--peach-text-dim);5648  margin-left: 6px;5649  vertical-align: middle;5650}56515652.peach-card-expiry-row {5653  display: flex;5654  align-items: center;5655  gap: 8px;5656}56575658.peach-card-expiry-sep {5659  color: var(--peach-text-dim);5660}56615662/* ── Pro tier — upgrade screen ──────────────────────────────── */5663.peach-pro-mark {5664  font-size: 0.5625rem;5665  color: var(--peach-accent);5666  margin-left: 6px;5667  vertical-align: super;5668  opacity: 0.7;5669}56705671.peach-pro-mini-badge {5672  display: block;5673  font-size: 0.625rem;5674  font-style: italic;5675  color: var(--peach-accent);5676  letter-spacing: 0.04em;5677  margin-top: -2px;5678  padding-left: 2px;5679  opacity: 0.85;5680  text-align: center;5681}56825683.peach-wordmark-stack {5684  display: inline-flex;5685  flex-direction: column;5686  align-items: center;5687}56885689/* ── Pro tier — upgrade page ─────────────────────────────────── */5690.peach-pro-upgrade {5691  display: flex;5692  flex-direction: column;5693  align-items: stretch;5694  gap: 10px;5695  padding: 0 4px 8px;5696}56975698.peach-pro-upgrade-hero {5699  display: flex;5700  flex-direction: column;5701  align-items: center;5702  gap: 4px;5703  padding: 10px 0 6px;5704}57055706.peach-pro-upgrade-mark-wrap {5707  display: flex;5708  align-items: center;5709  justify-content: center;5710  margin-bottom: 2px;5711}57125713.peach-pro-upgrade-mark {5714  width: 38px;5715  height: 38px;5716  opacity: 0.9;5717}57185719.peach-pro-upgrade-title {5720  font-family: var(--font-display, var(--font-ui));5721  font-size: 22px;5722  margin: 0;5723  color: var(--peach-t0);5724  letter-spacing: 0.01em;5725}57265727.peach-pro-upgrade-tagline {5728  margin: 0;5729  font-style: italic;5730  color: var(--peach-t2);5731  font-size: 0.6875rem;5732}57335734.peach-pro-features {5735  display: flex;5736  flex-direction: column;5737  gap: 8px;5738  border-top: 1px solid var(--peach-border);5739  border-bottom: 1px solid var(--peach-border);5740  padding: 10px 4px;5741}57425743.peach-pro-feature {5744  display: flex;5745  gap: 9px;5746  align-items: baseline;5747}57485749.peach-pro-feature-mark {5750  color: var(--peach-accent);5751  font-size: 0.6875rem;5752  flex-shrink: 0;5753  display: inline-block;5754  transform-origin: center;5755  opacity: 0.8;5756}57575758.peach-pro-feature-text {5759  display: flex;5760  flex-direction: column;5761  gap: 1px;5762}57635764.peach-pro-feature-name {5765  font-size: 0.75rem;5766  color: var(--peach-t0);5767}57685769.peach-pro-feature-desc {5770  font-size: 0.625rem;5771  color: var(--peach-t2);5772}57735774.peach-pro-feature.is-highlighted .peach-pro-feature-mark {5775  animation: peach-pulse-accent 600ms ease-out forwards;5776}57775778@keyframes peach-pulse-accent {5779  0%   { opacity: 1; transform: scale(1.4); }5780  100% { opacity: 0.7; transform: scale(1); }5781}57825783.peach-pro-upgrade-actions {5784  display: flex;5785  flex-direction: column;5786  align-items: center;5787  gap: 8px;5788  padding-top: 2px;5789}57905791.peach-pro-pricing {5792  margin: 0;5793  text-align: center;5794  font-size: 0.6875rem;5795  color: var(--peach-t2);5796  letter-spacing: 0.04em;5797}57985799.peach-pro-upgrade-cta {5800  align-self: center;5801  text-align: center;5802  text-decoration: none;5803  display: block;5804  padding: 9px 32px;5805  font-size: 0.8125rem;5806  min-width: 180px;5807}58085809.peach-pro-key-divider {5810  display: flex;5811  align-items: center;5812  gap: 8px;5813  width: 100%;5814  color: var(--peach-t3);5815  font-size: 0.625rem;5816  letter-spacing: 0.08em;5817}58185819.peach-pro-key-divider::before,5820.peach-pro-key-divider::after {5821  content: "";5822  flex: 1;5823  height: 1px;5824  background: var(--peach-border);5825}58265827.peach-pro-key-link {5828  background: transparent;5829  border: 1px solid var(--peach-border);5830  border-radius: 8px;5831  color: var(--peach-t1);5832  font-size: 0.75rem;5833  cursor: pointer;5834  align-self: stretch;5835  padding: 8px 12px;5836  text-align: center;5837  transition: border-color 0.2s, color 0.2s;5838}58395840.peach-pro-key-link:hover {5841  border-color: var(--peach-accent);5842  color: var(--peach-accent);5843}58445845/* ── Pro tier — key ceremony ─────────────────────────────────── */5846.peach-pro-key-ceremony {5847  display: flex;5848  flex-direction: column;5849  align-items: center;5850  gap: 12px;5851  padding: 20px 4px 16px;5852}58535854.peach-pro-key-ceremony .peach-lock-rune-string {5855  font-size: 1rem;5856  gap: 12px;5857  flex: 0;5858  justify-content: center;5859}58605861.peach-pro-key-ceremony-label {5862  margin: 0;5863  font-size: 0.6875rem;5864  color: var(--peach-t2);5865  font-style: italic;5866  letter-spacing: 0.04em;5867}58685869.peach-pro-key-input {5870  font-family: var(--font-mono, monospace);5871  letter-spacing: 0.06em;5872  text-align: center;5873  width: 100%;5874  box-sizing: border-box;5875}58765877.peach-pro-key-error {5878  margin: 0;5879  font-size: 0.75rem;5880  text-align: center;5881  color: var(--peach-breach, #e55);5882  padding: 0;5883}58845885.peach-pro-key-activate {5886  width: 100%;5887  text-align: center;5888  box-sizing: border-box;5889  padding: 10px 20px;5890  font-size: 0.8125rem;5891}58925893.peach-pro-key-cancel {5894  background: transparent;5895  border: 0;5896  color: var(--peach-t2);5897  font-size: 0.6875rem;5898  cursor: pointer;5899  padding: 2px 8px;5900  transition: color 0.2s;5901}59025903.peach-pro-key-cancel:hover { color: var(--peach-accent); }59045905/* ── Pro tier — active state ─────────────────────────────────── */5906.peach-pro-active {5907  display: flex;5908  flex-direction: column;5909  align-items: center;5910  gap: 0;5911  padding: 8px 4px 16px;5912  min-height: 280px;5913}59145915.peach-pro-active-hero {5916  display: flex;5917  flex-direction: column;5918  align-items: center;5919  gap: 6px;5920  padding: 20px 0 22px;5921}59225923.peach-pro-active-mark-wrap {5924  display: flex;5925  align-items: center;5926  justify-content: center;5927  margin-bottom: 4px;5928}59295930.peach-pro-active-mark {5931  width: 60px;5932  height: 60px;5933  filter:5934    drop-shadow(0 0 10px color-mix(in srgb, var(--peach-accent) 55%, transparent))5935    drop-shadow(0 0 26px color-mix(in srgb, var(--peach-accent) 22%, transparent));5936}59375938.peach-pro-active-title {5939  font-family: var(--font-display, var(--font-ui));5940  font-size: 26px;5941  margin: 0;5942  color: var(--peach-t0);5943  letter-spacing: 0.01em;5944}59455946.peach-pro-active-since {5947  margin: 0;5948  font-size: 0.6875rem;5949  color: var(--peach-t2);5950  font-style: italic;5951}59525953.peach-pro-active-features {5954  display: flex;5955  flex-direction: column;5956  gap: 8px;5957  width: 100%;5958  padding: 14px 8px 0;5959  border-top: 1px solid var(--peach-border);5960  flex: 1;5961}59625963.peach-pro-active-feature {5964  display: flex;5965  align-items: center;5966  gap: 9px;5967}59685969.peach-pro-active-feature-mark {5970  color: var(--peach-accent);5971  font-size: 0.625rem;5972  opacity: 0.65;5973  flex-shrink: 0;5974}59755976.peach-pro-active-feature-name {5977  font-size: 0.75rem;5978  color: var(--peach-t1);5979}59805981.peach-pro-deactivate {5982  align-self: center;5983  background: transparent;5984  border: 0;5985  color: var(--peach-t3);5986  font-size: 0.625rem;5987  cursor: pointer;5988  padding: 8px 0 0;5989  margin-top: 16px;5990  letter-spacing: 0.03em;5991  transition: color 0.2s;5992}59935994.peach-pro-deactivate:hover { color: var(--peach-t2); }59955996.peach-pro-deactivate:disabled {5997  opacity: 0.5;5998  cursor: default;5999}60006001/* ── Pro advanced health remediation queue ──────────────────── */6002.peach-health-pro-queue {6003  display: flex;6004  flex-direction: column;6005  gap: 10px;6006  padding: 12px;6007  margin: 0 0 12px;6008  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6009  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6010  border-radius: 10px;6011}60126013.peach-health-pro-queue-head {6014  display: flex;6015  justify-content: space-between;6016  align-items: baseline;6017}60186019.peach-health-pro-queue-title {6020  font-size: 0.75rem;6021  font-weight: 500;6022  letter-spacing: 0.04em;6023  text-transform: uppercase;6024  color: var(--peach-accent);6025}60266027.peach-health-pro-queue-score {6028  font-size: 0.6875rem;6029  color: var(--peach-t2);6030}60316032.peach-health-pro-row {6033  display: flex;6034  gap: 10px;6035  align-items: center;6036  padding: 8px 0;6037  border-top: 1px solid var(--peach-border);6038}60396040.peach-health-pro-row-info {6041  flex: 1;6042  display: flex;6043  flex-direction: column;6044  gap: 4px;6045  min-width: 0;6046}60476048.peach-health-pro-row-name {6049  font-size: 0.8125rem;6050  color: var(--peach-t0);6051  overflow: hidden;6052  text-overflow: ellipsis;6053  white-space: nowrap;6054}60556056.peach-health-pro-row-meta {6057  font-size: 0.6875rem;6058  color: var(--peach-t2);6059}60606061.peach-health-pro-bar {6062  height: 2px;6063  background: var(--peach-border);6064  border-radius: 2px;6065  overflow: hidden;6066  margin-top: 2px;6067}60686069.peach-health-pro-bar-fill {6070  height: 100%;6071  background: var(--peach-accent);6072  transition: width 200ms ease-out;6073}60746075/* ── Pro activation celebration ── */6076@keyframes peach-pro-bloom {6077  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6078  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6079                 drop-shadow(0 0 48px var(--peach-glow)); }6080  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6081}60826083@keyframes peach-pro-wordmark-in {6084  from { opacity: 0; transform: translateY(4px); }6085  to   { opacity: 1; transform: translateY(0); }6086}60876088@keyframes peach-pro-fade-out {6089  from { opacity: 1; }6090  to   { opacity: 0; }6091}60926093.peach-pro-celebration {6094  background:6095    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6096    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6097    var(--peach-bg);6098  border: 1px solid var(--peach-t3);6099  box-shadow:6100    0 2px 8px rgba(0,0,0,0.55),6101    0 14px 48px rgba(0,0,0,0.7),6102    0 0 0 1px rgba(240,232,216,0.04);6103  overflow: hidden;6104  width: 320px;6105  height: 520px;6106  display: flex;6107  flex-direction: column;6108  align-items: center;6109  justify-content: center;6110  gap: 8px;6111  padding: 32px 24px;6112  text-align: center;6113}61146115.peach-pro-celebration.is-leaving {6116  animation: peach-pro-fade-out 400ms ease forwards;6117}61186119.peach-pro-bloom-target {6120  display: flex;6121  align-items: center;6122  justify-content: center;6123  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6124  margin-bottom: 12px;6125}61266127.peach-pro-bloom-icon {6128  width: 48px;6129  height: 48px;6130}61316132.peach-pro-wordmark {6133  font-family: var(--font-display);6134  font-size: 22px;6135  font-style: italic;6136  font-weight: 400;6137  color: var(--peach-accent);6138  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6139}61406141.peach-pro-thankyou {6142  font-size: 0.75rem;6143  font-style: italic;6144  color: var(--peach-t2);6145  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6146}614761486149/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6150.peach-pro-notice-banner {6151  display: flex;6152  align-items: center;6153  gap: 8px;6154  padding: 7px 12px;6155  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6156  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6157  font-size: 0.6875rem;6158  color: var(--peach-t2);6159  font-family: "IBM Plex Mono", monospace;6160  flex-shrink: 0;6161}61626163.peach-pro-notice-link {6164  background: none;6165  border: none;6166  padding: 0;6167  cursor: pointer;6168  font-size: 0.6875rem;6169  color: var(--peach-accent);6170  font-family: "IBM Plex Mono", monospace;6171  margin-left: auto;6172  white-space: nowrap;6173}61746175.peach-pro-notice-close {6176  background: none;6177  border: none;6178  padding: 0 0 0 4px;6179  cursor: pointer;6180  font-size: 0.625rem;6181  color: var(--peach-t3);6182  line-height: 1;6183}61846185/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6186   Renders over whatever view is showing. 60-second expiry; the popup ticks6187   the countdown each second and clears the banner when it hits zero. */6188.peach-pair-request-banner {6189  display: flex;6190  flex-direction: column;6191  gap: 8px;6192  padding: 10px 12px;6193  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6194  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6195  font-family: "IBM Plex Mono", monospace;6196  flex-shrink: 0;6197}61986199.peach-pair-toast {6200  padding: 8px 12px;6201  font-family: "IBM Plex Mono", monospace;6202  font-size: 0.75rem;6203  color: var(--peach-t1);6204  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6205  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6206  flex-shrink: 0;6207  text-align: center;6208}62096210.peach-pair-toast strong {6211  color: var(--peach-t0);6212  font-weight: 500;6213}62146215.peach-pair-request-header {6216  display: flex;6217  align-items: center;6218  gap: 8px;6219  font-size: 0.75rem;6220  color: var(--peach-t1);6221}62226223.peach-pair-request-mark {6224  font-size: 0.875rem;6225  display: inline-flex;6226  align-items: center;6227}62286229.peach-pair-request-icon {6230  width: 1em;6231  height: 1em;6232}62336234.peach-pair-request-title {6235  font-weight: 600;6236  color: var(--peach-t0);6237}62386239.peach-pair-request-countdown {6240  margin-left: auto;6241  font-variant-numeric: tabular-nums;6242  color: var(--peach-t2);6243  font-size: 0.6875rem;6244}62456246.peach-pair-request-body {6247  margin: 0;6248  font-size: 0.75rem;6249  color: var(--peach-t1);6250  line-height: 1.4;6251}62526253.peach-pair-request-body strong {6254  color: var(--peach-t0);6255  font-weight: 600;6256}62576258.peach-pair-request-actions {6259  display: flex;6260  gap: 8px;6261  justify-content: flex-end;6262}62636264/* ─── First-run onboarding ──────────────────────────────────────────────6265   Three-card welcome shown once before vault creation. The PeachScript6266   rune background drifts behind everything at very low opacity — it's6267   atmosphere, not focus. The cards themselves use the same panel6268   language as the rest of the popup so the transition into NewVault is6269   continuous, not a jarring switch of visual register. */62706271.peach-onboarding {6272  position: relative;6273  display: flex;6274  flex-direction: column;6275  width: 100%;6276  height: 100%;6277  padding: 16px 16px 18px;6278  box-sizing: border-box;6279  overflow: hidden;6280  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6281}62826283.peach-onboarding.is-completing {6284  animation: peach-onboard-exit 200ms ease-out forwards;6285}62866287.peach-rune-background {6288  position: absolute;6289  inset: 0;6290  width: 100%;6291  height: 100%;6292  pointer-events: none;6293  z-index: 0;6294  transition: opacity 500ms ease-out;6295}62966297.peach-onboarding.is-completing .peach-rune-background {6298  opacity: 0;6299}63006301.peach-onboarding-header {6302  position: relative;6303  z-index: 1;6304  display: flex;6305  align-items: center;6306  margin-bottom: 14px;6307}63086309.peach-onboarding-card {6310  position: relative;6311  z-index: 1;6312  flex: 1;6313  display: flex;6314  flex-direction: column;6315  gap: 10px;6316  padding: 22px 20px;6317  border-radius: 16px;6318  border: 1px solid var(--peach-t3);6319  background:6320    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6321  backdrop-filter: blur(3px);6322  -webkit-backdrop-filter: blur(3px);6323  box-shadow:6324    inset 0 1px 0 rgba(240, 232, 216, 0.04),6325    0 12px 28px rgba(0, 0, 0, 0.12);6326  cursor: pointer;6327  user-select: none;6328  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6329}63306331.peach-onboarding-card.is-exiting {6332  animation: peach-card-out 120ms ease-in forwards;6333  pointer-events: none;6334}63356336.peach-onboarding-card-headline {6337  margin: 0;6338  font-family: var(--font-display);6339  font-style: italic;6340  font-weight: 400;6341  font-size: 22px;6342  line-height: 1.05;6343  color: var(--peach-t0);6344  white-space: pre-line;6345}63466347.peach-onboarding-divider {6348  margin: 4px 0 6px;6349  border: 0;6350  border-top: 1px solid var(--peach-t3);6351  width: 100%;6352}63536354.peach-onboarding-body {6355  margin: 0;6356  font-size: 0.8125rem;6357  line-height: 1.6;6358  color: var(--peach-t1);6359}63606361.peach-onboarding-warning {6362  display: flex;6363  align-items: flex-start;6364  gap: 8px;6365  margin: 6px 0 0;6366  padding-top: 8px;6367  border-top: 1px dashed var(--peach-t3);6368  font-size: 0.8125rem;6369  line-height: 1.5;6370  color: var(--peach-t1);6371}63726373.peach-onboarding-warning-icon {6374  color: var(--peach-accent);6375  font-size: 0.8125rem;6376  line-height: 1.5;6377  flex: 0 0 auto;6378}63796380.peach-onboarding-nav {6381  position: relative;6382  z-index: 1;6383  display: flex;6384  align-items: center;6385  justify-content: space-between;6386  margin-top: 12px;6387  padding: 0 4px;6388}63896390.peach-onboarding-dots {6391  display: flex;6392  align-items: center;6393  gap: 6px;6394}63956396.peach-onboarding-dot {6397  width: 6px;6398  height: 6px;6399  border-radius: 50%;6400  background: var(--peach-t2);6401  transition: width 200ms ease, height 200ms ease, background 200ms ease;6402}64036404.peach-onboarding-dot.is-active {6405  width: 8px;6406  height: 8px;6407  background: var(--peach-accent);6408}64096410.peach-onboarding-next {6411  background: none;6412  border: none;6413  padding: 4px 0;6414  cursor: pointer;6415  font-family: "IBM Plex Mono", monospace;6416  font-size: 0.6875rem;6417  letter-spacing: 0.04em;6418  color: var(--peach-t1);6419  transition: color 150ms ease;6420}64216422.peach-onboarding-next:hover {6423  color: var(--peach-t0);6424}64256426.peach-onboarding-next:disabled {6427  opacity: 0.5;6428  cursor: default;6429}64306431.peach-onboarding-back {6432  background: none;6433  border: none;6434  padding: 4px 0;6435  cursor: pointer;6436  font-family: "IBM Plex Mono", monospace;6437  font-size: 0.6875rem;6438  letter-spacing: 0.04em;6439  color: var(--peach-t2);6440  transition: color 150ms ease;6441}64426443.peach-onboarding-back:hover {6444  color: var(--peach-t0);6445}64466447.peach-onboarding-back:disabled {6448  opacity: 0.5;6449  cursor: default;6450}64516452/* Reserve back-button width on the first card so the dots stay centred */6453.peach-onboarding-back-spacer {6454  width: 44px;6455}64566457.peach-onboarding-mobile-card-buttons {6458  display: flex;6459  flex-direction: column;6460  gap: 8px;6461  margin-top: 16px;6462}64636464@keyframes peach-onboard-enter {6465  from { opacity: 0; transform: translateY(20px); }6466  to   { opacity: 1; transform: translateY(0); }6467}64686469@keyframes peach-onboard-exit {6470  from { opacity: 1; }6471  to   { opacity: 0; }6472}64736474@keyframes peach-card-in {6475  from { opacity: 0; transform: translateX(12px); }6476  to   { opacity: 1; transform: translateX(0); }6477}64786479@keyframes peach-card-out {6480  from { opacity: 1; transform: translateX(0); }6481  to   { opacity: 0; transform: translateX(-12px); }6482}64836484/* ─── New vault screen — matched to onboarding card language ─────────── */64856486.peach-newvault {6487  position: relative;6488  display: flex;6489  flex-direction: column;6490  gap: 12px;6491  padding: 16px 16px 18px;6492  overflow: hidden;6493}64946495/* Suppress the warm-blob ambient art inherited from .lock-screen — the6496   new vault card now carries the visual weight. */6497.peach-newvault::before {6498  content: none;6499}65006501.peach-newvault-header {6502  position: relative;6503  z-index: 2;6504  display: flex;6505  align-items: center;6506  gap: 10px;6507  margin-bottom: 2px;6508}65096510.peach-newvault-back {6511  display: inline-flex;6512  align-items: center;6513  gap: 4px;6514  background: transparent;6515  border: none;6516  color: var(--peach-t2);6517  font-family: "IBM Plex Mono", monospace;6518  font-size: 0.625rem;6519  letter-spacing: 0.06em;6520  cursor: pointer;6521  padding: 4px 6px;6522  border-radius: 6px;6523  transition: color 120ms ease, background 120ms ease;6524}65256526.peach-newvault-back:hover {6527  color: var(--peach-t0);6528  background: rgba(240, 232, 216, 0.04);6529}65306531.peach-newvault-mark {6532  position: absolute;6533  right: -12px;6534  top: 6px;6535  width: 110px;6536  height: 110px;6537  pointer-events: none;6538  opacity: 0.10;6539  filter: saturate(0.9);6540  z-index: 0;6541}6542.peach-newvault-mark-art {6543  width: 100%;6544  height: 100%;6545}6546.peach-newvault-mark-art path:nth-child(2),6547.peach-newvault-mark-art path:nth-child(3) {6548  stroke: rgba(123, 144, 96, 0.88);6549  fill: rgba(123, 144, 96, 0.88);6550}65516552.peach-newvault-card {6553  position: relative;6554  z-index: 1;6555  display: flex;6556  flex-direction: column;6557  gap: 12px;6558  padding: 22px 20px 18px;6559  border-radius: 16px;6560  border: 1px solid var(--peach-t3);6561  background:6562    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6563  backdrop-filter: blur(3px);6564  -webkit-backdrop-filter: blur(3px);6565  box-shadow:6566    inset 0 1px 0 rgba(240, 232, 216, 0.04),6567    0 12px 28px rgba(0, 0, 0, 0.12);6568  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6569}65706571.peach-newvault-headline {6572  margin: 0;6573  font-family: var(--font-display);6574  font-style: italic;6575  font-weight: 400;6576  font-size: 24px;6577  line-height: 1.05;6578  color: var(--peach-t0);6579  white-space: pre-line;6580}65816582.peach-newvault-divider {6583  margin: 2px 0 4px;6584  border: 0;6585  border-top: 1px solid var(--peach-t3);6586  width: 100%;6587}65886589.peach-newvault-field {6590  display: flex;6591  flex-direction: column;6592  gap: 4px;6593}65946595.peach-newvault-label-row {6596  display: flex;6597  align-items: center;6598  justify-content: space-between;6599}66006601/* Monospace input scaled to the card. Replaces the 22px unlock-input6602   so the placeholder no longer overflows and the field reads as part6603   of the same surface as the body copy. */6604.peach-newvault-input {6605  font-size: 0.875rem;6606  letter-spacing: 0.18em;6607  padding: 8px 0;6608}6609.peach-newvault-input::placeholder {6610  letter-spacing: 0.18em;6611  color: var(--peach-t2);6612}66136614.peach-newvault-hint {6615  margin: 2px 0 0;6616  font-family: "IBM Plex Mono", monospace;6617  font-size: 0.625rem;6618  color: var(--peach-t2);6619  letter-spacing: 0.04em;6620}66216622.peach-newvault-submit {6623  margin-top: 4px;6624}66256626.peach-newvault-warning {6627  display: flex;6628  align-items: flex-start;6629  gap: 8px;6630  margin: 4px 0 0;6631  padding-top: 10px;6632  border-top: 1px dashed var(--peach-t3);6633  font-size: 0.75rem;6634  line-height: 1.5;6635  color: var(--peach-t1);6636}66376638.peach-newvault-warning-icon {6639  color: var(--peach-accent);6640  font-size: 0.8125rem;6641  line-height: 1.4;6642  flex: 0 0 auto;6643}66446645.peach-newvault-footer {6646  position: relative;6647  z-index: 1;6648  display: flex;6649  flex-direction: column;6650  gap: 4px;6651  padding: 4px 4px 0;6652}66536654/* Settings body — warm accent gradient gives the glass something to blur against */6655.peach-settings-body {6656  background:6657    radial-gradient(6658      ellipse at 30% 20%,6659      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,6660      transparent 60%6661    );6662}66636664/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */6665/* ── Danger cards (Replace + Destroy) ────────────────────────────────────6666 * Two severity levels: "warn" for actions that are dangerous-but-recoverable6667 * (replacing the vault from a backup file) and "hazard" for actions that6668 * are absolutely irreversible (Panic). Both use the same card scaffold so6669 * they read as a pair, but the colour family signals the severity at a6670 * glance — yellow for caution, red for don't.6671 */6672.peach-danger-card {6673  --danger-tint: 235, 158, 52; /* amber */6674  display: flex;6675  flex-direction: column;6676  gap: 8px;6677  padding: 14px;6678  margin-top: 10px;6679  border-radius: 12px;6680  border: 1px solid rgba(var(--danger-tint), 0.32);6681  background:6682    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),6683    rgba(var(--danger-tint), 0.04);6684  box-shadow:6685    inset 0 1px 0 rgba(var(--danger-tint), 0.08),6686    0 0 24px rgba(var(--danger-tint), 0.04);6687  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;6688}66896690.peach-danger-card:hover {6691  border-color: rgba(var(--danger-tint), 0.55);6692  box-shadow:6693    inset 0 1px 0 rgba(var(--danger-tint), 0.12),6694    0 0 36px rgba(var(--danger-tint), 0.10);6695}66966697.peach-danger-card--hazard {6698  --danger-tint: 220, 38, 38; /* red */6699}67006701.peach-danger-card-head {6702  display: flex;6703  align-items: center;6704  gap: 10px;6705}67066707.peach-danger-card-glyph {6708  width: 28px;6709  height: 28px;6710  flex-shrink: 0;6711  display: flex;6712  align-items: center;6713  justify-content: center;6714  border-radius: 8px;6715  background: rgba(var(--danger-tint), 0.12);6716  color: rgba(var(--danger-tint), 0.95);6717  font-size: 1rem;6718  line-height: 1;6719}67206721.peach-danger-card-title {6722  margin: 0;6723  font-size: 0.8125rem;6724  font-weight: 600;6725  color: rgba(var(--danger-tint), 0.92);6726  letter-spacing: 0.01em;6727}67286729.peach-danger-card-copy {6730  margin: 0;6731  font-size: 0.6875rem;6732  line-height: 1.5;6733  color: var(--peach-t2);6734}67356736.peach-danger-card-button {6737  width: 100%;6738  padding: 9px;6739  margin-top: 4px;6740  background: transparent;6741  border: 1px solid rgba(var(--danger-tint), 0.45);6742  border-radius: 8px;6743  color: rgba(var(--danger-tint), 0.9);6744  font-size: 0.75rem;6745  font-weight: 500;6746  letter-spacing: 0.02em;6747  cursor: pointer;6748  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;6749}67506751.peach-danger-card-button:hover {6752  background: rgba(var(--danger-tint), 0.10);6753  border-color: rgba(var(--danger-tint), 0.75);6754  color: rgb(var(--danger-tint));6755}67566757/* ── Panic flow (three-step destruction) ───────────────────────────────── */6758.peach-panic {6759  display: flex;6760  flex-direction: column;6761  flex: 1;6762  min-height: 0;6763  padding: 28px 20px 20px;6764  gap: 18px;6765  overflow-y: auto;6766  scrollbar-width: none;6767  -ms-overflow-style: none;6768}67696770.peach-panic::-webkit-scrollbar { display: none; }67716772.peach-panic-step2 {6773  background: rgba(220, 38, 38, 0.04);6774}67756776.peach-panic-step3 {6777  position: relative;6778  background: #0f0505;6779  color: #ffffff;6780  overflow: hidden;6781}67826783.peach-panic-rune-bg {6784  position: absolute;6785  inset: 0;6786  opacity: 0.22;6787  pointer-events: none;6788  overflow: hidden;6789}67906791.peach-panic-rune-bg canvas {6792  width: 100% !important;6793  height: 100% !important;6794}67956796.peach-panic-icon {6797  font-size: 32px;6798  color: rgb(220, 38, 38);6799  line-height: 1;6800}68016802.peach-panic-title {6803  margin: 0;6804  font-size: 18px;6805  font-weight: 500;6806  color: var(--peach-t1);6807}68086809.peach-panic-title--severe {6810  font-size: 20px;6811  font-weight: 700;6812  color: rgb(220, 38, 38);6813}68146815.peach-panic-body {6816  margin: 0;6817  font-size: 0.8125rem;6818  line-height: 1.55;6819  color: var(--peach-t2);6820}68216822.peach-panic-body--severe {6823  color: rgba(220, 38, 38, 0.85);6824}68256826.peach-panic-body--final {6827  font-size: 1rem;6828  font-weight: 700;6829  color: rgb(255, 80, 80);6830  line-height: 1.4;6831}68326833.peach-panic-body--final-intro {6834  font-size: 1rem;6835  color: #ffffff;6836  font-weight: 400;6837}68386839.peach-panic-divider {6840  height: 1px;6841  background: rgba(255, 255, 255, 0.08);6842  margin: 4px 0;6843}68446845.peach-panic-confirm-input {6846  width: 100%;6847  padding: 10px 12px;6848  background: rgba(255, 255, 255, 0.02);6849  border: 1px solid rgba(220, 38, 38, 0.4);6850  border-radius: 8px;6851  color: var(--peach-t1);6852  font-family: "IBM Plex Mono", monospace;6853  font-size: 0.875rem;6854  letter-spacing: 0.12em;6855  text-transform: uppercase;6856}68576858.peach-panic-confirm-input:focus {6859  outline: none;6860  border-color: rgb(220, 38, 38);6861}68626863.peach-panic-confirm-input--match {6864  border-color: rgb(220, 38, 38);6865  color: rgb(220, 38, 38);6866}68676868.peach-panic-confirm-label {6869  font-size: 0.6875rem;6870  color: var(--peach-t2);6871  margin: 0 0 -8px;6872  letter-spacing: 0.06em;6873}68746875.peach-panic-actions {6876  display: flex;6877  flex-direction: column;6878  gap: 10px;6879  margin-top: auto;6880}68816882.peach-panic-button {6883  width: 100%;6884  padding: 12px;6885  border-radius: 8px;6886  font-size: 0.8125rem;6887  cursor: pointer;6888  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;6889}68906891.peach-panic-button--primary {6892  background: var(--peach-accent);6893  border: 1px solid var(--peach-accent);6894  color: #ffffff;6895  font-weight: 600;6896}68976898.peach-panic-button--primary:hover {6899  background: color-mix(in srgb, var(--peach-accent) 88%, white);6900}69016902.peach-panic-button--danger {6903  background: rgb(220, 38, 38);6904  border: 1px solid rgb(220, 38, 38);6905  color: #ffffff;6906  font-weight: 600;6907}69086909.peach-panic-button--danger:disabled {6910  opacity: 0.35;6911  cursor: not-allowed;6912}69136914.peach-panic-button--ghost {6915  background: transparent;6916  border: 1px solid rgba(255, 255, 255, 0.18);6917  color: var(--peach-t2);6918}69196920.peach-panic-button--ghost:hover {6921  border-color: rgba(255, 255, 255, 0.32);6922  color: var(--peach-t1);6923}69246925.peach-panic-link {6926  background: transparent;6927  border: none;6928  padding: 4px 0;6929  color: rgba(220, 38, 38, 0.65);6930  font-size: 0.75rem;6931  cursor: pointer;6932  text-align: left;6933  text-decoration: underline;6934  text-underline-offset: 3px;6935}69366937.peach-panic-link:hover {6938  color: rgb(220, 38, 38);6939}69406941.peach-panic-bar {6942  background: rgb(220, 38, 38);6943  padding: 16px 20px;6944  margin: -28px -20px 0;6945  text-align: center;6946  font-size: 0.8125rem;6947  font-weight: 700;6948  letter-spacing: 0.12em;6949  color: #ffffff;6950}69516952.peach-panic-final-button {6953  width: 100%;6954  padding: 14px;6955  background: rgb(220, 38, 38);6956  border: none;6957  border-radius: 8px;6958  color: #ffffff;6959  font-size: 0.875rem;6960  font-weight: 700;6961  letter-spacing: 0.08em;6962  text-transform: uppercase;6963  cursor: pointer;6964  animation: peach-panic-pulse 2s ease-in-out infinite;6965}69666967.peach-settings-license {6968  margin-top: 10px;6969  padding-top: 10px;6970  border-top: 1px solid var(--peach-t3);6971}69726973.peach-settings-label {6974  font-size: 0.625rem;6975  letter-spacing: 0.08em;6976  color: var(--peach-t3);6977  display: block;6978  margin-bottom: 6px;6979}69806981.peach-settings-license-row {6982  display: flex;6983  align-items: center;6984  justify-content: space-between;6985  gap: 8px;6986}69876988.peach-settings-license-key {6989  font-family: 'IBM Plex Mono', monospace;6990  font-size: 0.75rem;6991  color: var(--peach-t0);6992  letter-spacing: 0.04em;6993  word-break: break-all;6994}69956996.peach-settings-license-copy {6997  font-size: 0.6875rem;6998  color: var(--peach-accent);6999  background: transparent;7000  border: none;7001  cursor: pointer;7002  padding: 4px 8px;7003  border-radius: 4px;7004  flex-shrink: 0;7005  transition: opacity 150ms ease;7006}70077008.peach-settings-license-copy:hover {7009  opacity: 0.75;7010}70117012@keyframes peach-panic-pulse {7013  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7014  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7015}70167017[data-motion="reduce"] .peach-panic-final-button {7018  animation: none;7019}70207021/* Vault History — Settings → Vault sub-view */70227023.peach-history-list {7024  border: 1px solid var(--peach-border);7025  border-radius: 8px;7026  overflow: hidden;7027  margin: 8px 0 4px;7028}70297030.peach-history-row {7031  display: flex;7032  align-items: center;7033  justify-content: space-between;7034  padding: 9px 12px;7035  gap: 10px;7036  border-bottom: 1px solid var(--peach-border);7037}70387039.peach-history-row:last-child {7040  border-bottom: none;7041}70427043.peach-history-meta {7044  display: flex;7045  flex-direction: column;7046  gap: 2px;7047  min-width: 0;7048  flex: 1;7049}70507051.peach-history-time {7052  font-size: 0.75rem;7053  font-family: 'IBM Plex Mono', ui-monospace, monospace;7054  color: var(--peach-t0);7055  white-space: nowrap;7056  overflow: hidden;7057  text-overflow: ellipsis;7058}70597060.peach-history-sub {7061  font-size: 0.625rem;7062  color: var(--peach-t2);7063  letter-spacing: 0.06em;7064  text-transform: uppercase;7065  white-space: nowrap;7066  overflow: hidden;7067  text-overflow: ellipsis;7068}70697070.peach-history-btn {7071  flex-shrink: 0;7072  white-space: nowrap;7073  min-width: 56px;7074  text-align: center;7075}70767077.peach-history-btn.is-busy {7078  opacity: 0.65;7079}70807081.peach-history-footer {7082  font-size: 0.625rem;7083  color: var(--peach-t3);7084  letter-spacing: 0.05em;7085  text-align: right;7086  margin: 0;7087  padding: 2px 0 0;7088}70897090/* ── Context menu + swipe-copy flash ─────────────────────── */7091.peach-context-menu-backdrop {7092  position: fixed;7093  inset: 0;7094  background: rgba(0, 0, 0, 0.45);7095  z-index: 100;7096  display: flex;7097  align-items: flex-end;7098  justify-content: center;7099  animation: peach-ctx-fade 140ms ease both;7100}7101.peach-context-menu {7102  width: min(360px, calc(100vw - 24px));7103  margin-bottom: max(env(safe-area-inset-bottom), 12px);7104  background: var(--peach-bg);7105  border: 1px solid var(--peach-t3);7106  border-radius: 14px;7107  padding: 6px;7108  display: flex;7109  flex-direction: column;7110  gap: 2px;7111  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7112  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7113}7114@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7115@keyframes peach-ctx-rise {7116  from { transform: translateY(16px); opacity: 0; }7117  to   { transform: translateY(0);    opacity: 1; }7118}7119.peach-context-menu-item {7120  background: transparent;7121  color: var(--peach-t0);7122  border: 0;7123  border-radius: 10px;7124  padding: 12px 14px;7125  text-align: left;7126  font: inherit;7127  cursor: pointer;7128}7129.peach-context-menu-item:hover,7130.peach-context-menu-item:focus-visible {7131  background: var(--peach-t3);7132}7133.peach-context-menu-item--danger {7134  color: var(--peach-health-bad, #d96868);7135}7136.peach-context-menu-item--cancel {7137  color: var(--peach-t2);7138  margin-top: 4px;7139  border-top: 1px solid var(--peach-t3);7140  border-radius: 0 0 10px 10px;7141}71427143/* Swipe-to-copy flash */7144.peach-entry-row.is-copy-flash {7145  animation: peach-copy-flash 600ms ease both;7146}7147@keyframes peach-copy-flash {7148  0%   { background: transparent; }7149  20%  { background: rgba(217, 153, 51, 0.32); }7150  100% { background: transparent; }7151}71527153html { font-size: 16px; }71547155/* ── Recovery word entry ─────────────────────────────────────────── */7156.peach-lock-recover-link {7157  display: block;7158  width: 100%;7159  margin-top: 12px;7160  background: none;7161  border: none;7162  font-family: "IBM Plex Mono", monospace;7163  font-size: 0.625rem;7164  letter-spacing: 0.06em;7165  color: var(--peach-t2);7166  cursor: pointer;7167  text-align: center;7168  padding: 4px;7169  transition: color 120ms ease;7170}7171.peach-lock-recover-link:hover {7172  color: var(--peach-t0);7173}71747175.lock-screen--recovery {7176  display: flex;7177  flex-direction: column;7178  align-items: stretch;7179  padding: 12px 20px 24px;7180  overflow: hidden;7181}71827183.peach-recovery-nav {7184  display: flex;7185  align-items: center;7186  position: relative;7187  z-index: 1;7188  margin-bottom: 4px;7189}71907191/* Mask runes to top and bottom bands only — keep inputs clear */7192.peach-rune-background--recovery {7193  -webkit-mask-image: linear-gradient(7194    to bottom,7195    black 0px, black 85px,7196    transparent 110px,7197    transparent 405px,7198    black 430px, black 520px7199  );7200  mask-image: linear-gradient(7201    to bottom,7202    black 0px, black 85px,7203    transparent 110px,7204    transparent 405px,7205    black 430px, black 520px7206  );7207}72087209.peach-recovery-header {7210  text-align: center;7211  margin-bottom: 16px;7212  margin-top: 4px;7213}7214.peach-recovery-header .peach-onboarding-headline {7215  font-size: 1.25rem;7216  font-weight: 300;7217  letter-spacing: 0.02em;7218  margin: 0 0 4px;7219}7220.peach-recovery-header .peach-hint {7221  font-family: "IBM Plex Mono", monospace;7222  font-size: 0.625rem;7223  color: var(--peach-t2);7224  letter-spacing: 0.04em;7225  margin: 0;7226}72277228/* 12-word grid: 2 columns × 6 rows */7229.peach-recovery-grid {7230  display: grid;7231  grid-template-columns: repeat(2, 1fr);7232  gap: 12px 20px;7233  width: 100%;7234  margin-bottom: 0;7235}72367237.peach-recovery-word-slot {7238  display: flex;7239  align-items: center;7240  gap: 6px;7241  min-width: 0;7242}72437244.peach-recovery-word-index {7245  font-family: "IBM Plex Mono", monospace;7246  font-size: 0.5rem;7247  color: rgba(255, 255, 255, 0.35);7248  min-width: 14px;7249  flex-shrink: 0;7250  text-align: right;7251  letter-spacing: 0.04em;7252}72537254.peach-recovery-word-input {7255  flex: 1;7256  min-width: 0;7257  background: transparent;7258  border: none;7259  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7260  color: var(--peach-t0);7261  font-family: "IBM Plex Mono", monospace;7262  font-size: 0.6875rem;7263  letter-spacing: 0.06em;7264  padding: 5px 2px 4px;7265  outline: none;7266  text-transform: lowercase;7267  transition: border-color 120ms ease;7268}7269.peach-recovery-word-input::placeholder {7270  color: rgba(255, 255, 255, 0.18);7271}7272.peach-recovery-word-input:focus {7273  border-bottom-color: var(--peach-accent);7274}72757276.peach-recovery-submit {7277  width: 100%;7278  margin-top: auto;7279  padding-top: 16px;7280}72817282.peach-recovery-new-password-form {7283  width: 100%;7284  display: flex;7285  flex-direction: column;7286  gap: 16px;7287  margin-bottom: 8px;7288}7289.peach-recovery-new-password-form .peach-newvault-field {7290  display: flex;7291  flex-direction: column;7292  gap: 4px;7293}72947295/* ── Recovery words display (post-create) ────────────────────────── */7296.lock-screen--recovery-display {7297  display: flex;7298  flex-direction: column;7299  align-items: center;7300  padding: 0 20px 28px;7301  overflow-y: auto;7302}73037304.peach-recovery-words-display {7305  width: 100%;7306  margin-bottom: 20px;7307  border: 1px solid var(--peach-t3);7308  border-radius: 8px;7309  padding: 12px 14px;7310  background: rgba(245, 240, 234, 0.04);7311}73127313.peach-recovery-words-label {7314  font-family: "IBM Plex Mono", monospace;7315  font-size: 0.5rem;7316  letter-spacing: 0.08em;7317  color: var(--peach-t2);7318  text-transform: uppercase;7319  margin-bottom: 10px;7320}73217322.peach-recovery-word-list {7323  list-style: none;7324  margin: 0;7325  padding: 0;7326  display: grid;7327  grid-template-columns: repeat(2, 1fr);7328  gap: 4px 8px;7329}73307331.peach-recovery-word-item {7332  display: flex;7333  align-items: baseline;7334  gap: 5px;7335}73367337.peach-recovery-word-num {7338  font-family: "IBM Plex Mono", monospace;7339  font-size: 0.5rem;7340  color: var(--peach-t2);7341  min-width: 14px;7342  letter-spacing: 0.04em;7343}73447345.peach-recovery-word-text {7346  font-family: "IBM Plex Mono", monospace;7347  font-size: 0.6875rem;7348  letter-spacing: 0.06em;7349  color: var(--peach-t0);7350  text-transform: lowercase;7351}73527353.peach-hint--warning {7354  color: var(--peach-accent);7355  font-style: italic;7356}7357.peach-hint--success {7358  color: var(--peach-t2);7359  font-family: "IBM Plex Mono", monospace;7360  font-size: 0.625rem;7361  letter-spacing: 0.06em;7362}73637364/* Confirmation step */7365.peach-recovery-confirm {7366  width: 100%;7367}7368.peach-recovery-confirm-label {7369  font-family: "IBM Plex Mono", monospace;7370  font-size: 0.5625rem;7371  letter-spacing: 0.04em;7372  color: var(--peach-t2);7373  text-align: center;7374  margin: 0 0 10px;7375}7376.peach-recovery-confirm-fields {7377  display: flex;7378  flex-direction: column;7379  gap: 8px;7380  margin-bottom: 10px;7381}7382.peach-recovery-confirm-field {7383  display: flex;7384  align-items: center;7385  gap: 8px;7386}7387.peach-recovery-confirm-num {7388  font-family: "IBM Plex Mono", monospace;7389  font-size: 0.5rem;7390  color: var(--peach-t2);7391  min-width: 44px;7392  letter-spacing: 0.04em;7393}7394.peach-recovery-confirm-input {7395  flex: 1;7396  background: transparent;7397  border: none;7398  border-bottom: 1px solid var(--peach-t3);7399  color: var(--peach-t0);7400  font-family: "IBM Plex Mono", monospace;7401  font-size: 0.6875rem;7402  letter-spacing: 0.06em;7403  padding: 4px 2px 3px;7404  outline: none;7405  text-transform: lowercase;7406  transition: border-color 120ms ease;7407}7408.peach-recovery-confirm-input:focus {7409  border-bottom-color: var(--peach-accent);7410}7411.peach-recovery-confirm-input:disabled {7412  opacity: 0.4;7413  cursor: not-allowed;7414}7415.peach-recovery-confirm-btn {7416  width: 100%;7417}