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: 10px;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: 15px;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: 9px;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: 10px; 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: 8px; color: var(--peach-t2);387}388.peach-field-value-row {389  display: flex; justify-content: space-between;390  align-items: center; gap: 8px;391  min-width: 0;392}393.peach-field-value {394  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;395  font-size: 13px; color: var(--peach-t1);396  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;397  flex: 1;398  min-width: 0;399}400.peach-password-value {401  display: inline-flex;402  align-items: center;403  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;404  font-size: 16px; letter-spacing: 0.3em; color: var(--peach-t0);405  overflow: hidden;406  text-overflow: ellipsis;407  white-space: nowrap;408  flex: 1;409  min-width: 0;410  max-width: 100%;411}412.peach-password-value.is-revealed {413  font-size: 14px;414  letter-spacing: 0.08em;415}416.peach-password-text,417.peach-password-mask {418  display: block;419  width: 100%;420  overflow: hidden;421  white-space: nowrap;422  /* Render as uniform mid-line bullets, not baseline periods */423  font-family: Inter, system-ui, sans-serif;424  font-size: 10px;425  letter-spacing: 3px;426  user-select: none;427}428.peach-field-actions { display: flex; gap: 4px; align-items: center; }429.peach-password-strength { display: flex; align-items: center; gap: 8px; }430.peach-strength-bar { display: flex; gap: 3px; }431.peach-strength-seg { width: 28px; height: 4px; border-radius: 2px; background: #eee; }432.peach-strength-label {433  font-family: "IBM Plex Mono", monospace;434  font-style: italic;435  font-size: 9px;436  font-weight: 300;437  min-width: 36px;438  text-align: right;439  color: var(--peach-t2);440  letter-spacing: 0.06em;441}442443.peach-strength-hairline {444  display: flex;445  align-items: center;446  gap: 10px;447  margin-top: -2px;448}449450.peach-strength-hairline-track {451  flex: 1;452  height: 3px;453  border-radius: 2px;454  background: var(--peach-s2);455  overflow: hidden;456}457458.peach-strength-hairline-fill {459  height: 100%;460  border-radius: 2px;461  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),462    background 400ms ease;463}464465/* Note content (display) */466.peach-note-content {467  border-top: 1px solid var(--peach-t3);468  padding-top: 10px;469  font-family: var(--font-display);470  font-size: 15px;471  line-height: 1.75;472  color: var(--peach-t1);473}474475/* ── Inline editing ─────────────────────────────────────────────────── */476477/* Clickable display values */478.peach-inline-clickable {479  cursor: text;480  border-radius: 3px;481  transition: background 150ms ease;482}483.peach-inline-clickable:hover {484  background: rgba(240, 232, 216, 0.05);485}486487/* Subtle "edit" hint that appears on hover */488.peach-inline-edit-hint {489  font-family: Inter, system-ui, sans-serif;490  font-size: 9px;491  text-transform: uppercase;492  letter-spacing: 0.14em;493  color: var(--peach-t2);494  opacity: 0;495  transition: opacity 120ms ease;496  pointer-events: none;497  margin-left: 6px;498  flex-shrink: 0;499}500.peach-domain-row:hover .peach-inline-edit-hint {501  opacity: 1;502}503504/* Title editing */505.peach-inline-title-wrap {506  display: flex;507  flex-direction: column;508  gap: 6px;509}510.peach-inline-title-input {511  font-family: var(--font-display);512  font-style: italic;513  font-weight: 400;514  font-size: 40px;515  line-height: 0.95;516  color: var(--peach-t0);517  background: transparent;518  border: none;519  border-bottom: 1px solid var(--peach-accent);520  outline: none;521  width: 100%;522  padding: 2px 0;523}524525/* Generic inline field */526.peach-inline-field-wrap {527  display: flex;528  flex-direction: column;529  gap: 6px;530}531.peach-inline-input {532  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;533  font-size: 13px;534  color: var(--peach-t0);535  background: transparent;536  border: none;537  border-bottom: 1px solid var(--peach-accent);538  outline: none;539  width: 100%;540  padding: 3px 0;541}542.peach-inline-textarea {543  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;544  font-size: 11px;545  line-height: 1.7;546  color: var(--peach-t0);547  background: rgba(240, 232, 216, 0.04);548  border: 1px solid var(--peach-accent);549  border-radius: 4px;550  outline: none;551  width: 100%;552  padding: 8px;553  resize: vertical;554  min-height: 80px;555}556557/* Save / cancel row */558.peach-inline-actions {559  display: flex;560  gap: 6px;561  align-items: center;562}563.peach-inline-save-btn,564.peach-inline-cancel-btn {565  display: inline-flex;566  align-items: center;567  justify-content: center;568  width: 26px;569  height: 26px;570  border-radius: 4px;571  border: none;572  cursor: pointer;573  transition: background 140ms ease, opacity 140ms ease;574  flex-shrink: 0;575}576.peach-inline-save-btn {577  background: rgba(var(--ac-r, 217), var(--ac-g, 104), var(--ac-b, 48), 0.18);578  color: var(--peach-accent);579}580.peach-inline-save-btn:hover:not(:disabled) {581  background: rgba(var(--ac-r, 217), var(--ac-g, 104), var(--ac-b, 48), 0.30);582}583.peach-inline-cancel-btn {584  background: rgba(240, 232, 216, 0.06);585  color: var(--peach-t2);586}587.peach-inline-cancel-btn:hover:not(:disabled) {588  background: rgba(240, 232, 216, 0.12);589  color: var(--peach-t1);590}591.peach-inline-save-btn:disabled,592.peach-inline-cancel-btn:disabled {593  opacity: 0.4;594  cursor: not-allowed;595}596597/* Inline password generator wrapper */598.peach-inline-generator-wrap {599  margin-top: 10px;600  padding-top: 10px;601  border-top: 1px solid var(--peach-t3);602  display: flex;603  flex-direction: column;604  gap: 8px;605}606.peach-inline-generator-cancel {607  align-self: flex-start;608  font-size: 11px;609  color: var(--peach-t2);610}611612/* "is-editing" card state */613.peach-field-card.is-editing {614  background: rgba(240, 232, 216, 0.02);615  border-radius: 6px;616  padding: 8px;617  margin: -8px;618}619620/* Inline tag editor on Entry detail view */621.peach-inline-tag-editor {622  display: flex;623  flex-direction: column;624  gap: 6px;625}626627/* Quiet inline "+ add X" link in the entry detail body */628.peach-entry-add-link {629  justify-self: start;630  margin-top: 8px;631}632633/* Additional URLs editor revealed by clicking the URL field */634.peach-additional-urls {635  display: flex;636  flex-direction: column;637  gap: 6px;638  margin-top: 8px;639}640.peach-additional-urls-label {641  font-size: 9px;642  letter-spacing: 0.1em;643  text-transform: uppercase;644  color: var(--peach-t2);645  margin-bottom: 2px;646}647.peach-additional-url-row {648  display: flex;649  align-items: center;650  gap: 6px;651}652.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }653.peach-additional-url-remove {654  background: transparent;655  border: 1px solid var(--peach-t3);656  color: var(--peach-t2);657  width: 22px;658  height: 22px;659  border-radius: 4px;660  cursor: pointer;661  font-size: 14px;662  line-height: 1;663  display: inline-flex;664  align-items: center;665  justify-content: center;666  flex-shrink: 0;667  transition: color 120ms ease, border-color 120ms ease;668}669.peach-additional-url-remove:hover:not(:disabled) {670  color: var(--peach-accent);671  border-color: var(--peach-border-accent);672}673.peach-additional-urls-add { align-self: flex-start; }674675/* Delete row */676.peach-entry-delete-row {677  display: flex;678  align-items: center;679  gap: 8px;680  padding-top: 18px;681  margin-top: 8px;682  border-top: 1px solid var(--peach-t3);683}684.peach-delete-btn {685  font-size: 11px;686  color: var(--peach-t2);687  padding: 4px 0;688}689.peach-delete-confirm-text {690  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;691  font-size: 11px;692  font-style: italic;693  color: var(--peach-t2);694  flex-shrink: 0;695}696697/* TOTP band */698.peach-totp-band {699  border-top: 1px solid var(--peach-t3);700  padding: 12px 20px 14px;701  position: relative;702  display: grid;703  grid-template-columns: 1fr auto;704  gap: 10px;705}706.peach-totp-main {707  min-width: 0;708  cursor: pointer;709  user-select: none;710}711.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }712.peach-totp-code-row {713  display: flex;714  align-items: flex-end;715  gap: 10px;716  min-width: 0;717}718.peach-totp-code {719  margin: 2px 0 0;720  font-family: var(--font-display);721  font-style: italic;722  font-weight: 300;723  font-size: 38px; color: var(--peach-accent);724  line-height: 0.95; min-height: 1em;725  min-width: 0;726}727.peach-totp-code-text {728  display: inline-flex;729  overflow: hidden;730  text-overflow: ellipsis;731  white-space: nowrap;732}733.peach-totp-copy-btn {734  margin-bottom: 2px;735  flex-shrink: 0;736  border-color: transparent;737}738.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }739.peach-totp-countdown {740  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;741  font-size: 22px; color: var(--peach-t1);742}743.peach-totp-ring { transform: rotate(-90deg); }744.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }745.peach-totp-ring-progress {746  fill: none; stroke: var(--peach-accent); stroke-width: 2;747  stroke-linecap: round;748  transition: stroke-dashoffset 1s linear, stroke 500ms ease;749}750/* Search bar */751.peach-search-wrap {752  border-top: 1px solid var(--peach-t3);753  background: var(--peach-s1);754  min-height: 54px; position: relative;755  box-shadow: inset 0 6px 18px transparent;756  transition: box-shadow 700ms ease;757}758.peach-search-wrap::before {759  content: "";760  position: absolute;761  left: 0;762  top: 0;763  height: 2px;764  width: var(--peach-totp-progress, 0%);765  background: var(--peach-accent);766  opacity: 0;767  transition: width 1s linear, opacity 180ms ease;768  pointer-events: none;769}770.peach-shell[data-totp-active="true"] .peach-search-wrap::before {771  opacity: 0.9;772}773.peach-shell[data-totp-active="true"] .peach-search-wrap {774  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);775}776777@keyframes peach-totp-code-flare {778  0%   { filter: brightness(1); }779  25%  { filter: brightness(1.3); }780  100% { filter: brightness(1); }781}782.peach-totp-code.is-hot {783  animation: peach-totp-code-flare 3000ms ease-in-out both;784}785.peach-search-bar {786  min-height: 54px;787  display: grid;788  grid-template-columns: auto minmax(0, 1fr) auto;789  align-items: center;790  gap: 8px; padding: 0 9px 0 12px;791}792.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }793.peach-search-input {794  border: 0; background: transparent; color: var(--peach-t0);795  font-family: var(--font-display);796  font-style: italic; font-size: 18px;797  outline: none; width: 100%; min-width: 0; padding: 0;798  caret-color: var(--peach-accent);799}800.peach-search-input::placeholder { color: var(--peach-t2); }801.peach-search-meta {802  display: grid;803  grid-auto-flow: column;804  align-items: center;805  justify-content: end;806  gap: 6px;807  min-width: max-content;808}809.peach-search-counter {810  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;811  font-size: 10px; color: var(--peach-t2);812  display: inline-flex;813  align-items: center;814  line-height: 1;815}816.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }817818/* Buttons */819.peach-btn {820  border: 1px solid transparent; border-radius: 12px;821  background: transparent; color: var(--peach-t0);822  font-family: Inter, system-ui, sans-serif;823  font-size: 12px; letter-spacing: 0.02em; padding: 8px 12px;824  cursor: pointer;825  transition:826    background-color var(--peach-dur-80) var(--peach-curve-arrival),827    color var(--peach-dur-80) var(--peach-curve-arrival),828    border-color var(--peach-dur-150) var(--peach-curve-arrival);829}830.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }831.peach-btn:disabled {832  opacity: 0.45;833  cursor: not-allowed;834}835.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 11px; }836.peach-btn--md { min-height: 38px; }837.peach-btn--accent {838  background: var(--peach-accent);839  color: rgba(0,0,0,0.78);840  box-shadow:841    0 1px 0 rgba(255,255,255,0.08) inset,842    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),843    0 3px 16px var(--peach-glow),844    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);845}846.peach-btn--accent:hover:not(:disabled) {847  background: var(--peach-accent);848  filter: brightness(1.10) saturate(1.05);849  box-shadow:850    0 1px 0 rgba(255,255,255,0.10) inset,851    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),852    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),853    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);854}855.peach-btn--ghost { border-color: var(--peach-t3); color: var(--peach-t1); }856.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }857.peach-icon-btn {858  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;859  display: inline-flex; align-items: center; justify-content: center;860}861862.peach-btn:focus-visible {863  outline: none;864  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);865}866867/* Lock button */868.peach-lock-icon { transform-origin: center; }869.peach-lock-btn.is-locking { color: var(--peach-accent); }870.peach-lock-btn.is-locking .peach-lock-icon {871  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);872}873874/* Copy button */875.peach-copy-btn {876  position: relative; overflow: hidden;877  color: var(--peach-t2); border-color: var(--peach-t3);878}879.peach-copy-icon {880  display: inline-flex; align-items: center; justify-content: center;881  position: relative; z-index: 1;882}883.peach-copy-icon-svg { display: block; }884.peach-copy-sheen {885  position: absolute; inset: 0;886  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%);887  opacity: 0; transform: scaleX(0.15); transform-origin: left center;888}889.peach-copy-btn.is-copied {890  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;891  box-shadow:892    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),893    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),894    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);895}896.peach-copy-btn.is-copied .peach-copy-icon {897  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;898}899.peach-copy-btn.is-copied .peach-copy-sheen {900  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;901}902.peach-copy-btn.is-retreat {903  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;904}905.peach-copy-btn.is-retreat .peach-copy-sheen {906  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;907}908.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }909.peach-copy-drain-bar {910  display: block; width: 100%; height: 100%;911  background: var(--peach-accent); opacity: 0.7;912  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;913}914915/* Unlock screen elements */916.peach-unlock-headline {917  margin: 2px 0 0;918  font-family: var(--font-display);919  font-size: 52px; line-height: 0.95;920  font-style: italic; font-weight: 400;921}922.peach-subline {923  margin: 0;924  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;925  font-size: 10px; color: var(--peach-t2); font-style: italic;926}927.peach-subline--lock {928  max-width: 248px;929  line-height: 1.5;930}931.peach-underline-input {932  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);933  padding: 6px 0; background: transparent; color: var(--peach-t0);934  outline: none;935  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;936  font-size: 13px;937  caret-color: var(--peach-accent);938}939.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }940.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }941.peach-hint {942  margin: 0;943  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;944  font-size: 10px; color: var(--peach-t2);945}946.peach-unlock-footer {947  margin-top: 4px; display: flex; align-items: center; gap: 7px;948  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;949  font-size: 10px; color: var(--peach-t2);950}951.peach-unlock-footer--lock {952  padding-top: 2px;953}954955/* Breach badge */956.peach-breach-badge {957  display: flex;958  position: relative;959  z-index: 1;960  align-items: center;961  gap: 7px;962  font-size: 9px;963  color: var(--peach-breach);964  padding: 5px 10px;965  margin-bottom: 4px;966  border-radius: 8px;967  background: rgba(220, 80, 60, 0.07);968  border: 1px solid rgba(220, 80, 60, 0.18);969  letter-spacing: 0.04em;970}971972.peach-breach-action {973  margin-left: auto;974  font-size: 10px;975  padding: 3px 8px;976}977978.peach-password-value.is-breached {979  color: rgba(220, 80, 60, 0.75);980  border-bottom: 1px solid rgba(220, 80, 60, 0.22);981}982983/* ── Overlay views ─────────────────────────────────────────────────── */984.peach-overlay-view {985  position: absolute;986  inset: 0;987  display: flex;988  flex-direction: column;989  background:990    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),991    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),992    var(--peach-bg);993  z-index: 2;994  overflow: hidden;995  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;996}997@keyframes overlay-in {998  from { opacity: 0; transform: translateY(8px); }999  to   { opacity: 1; transform: translateY(0); }1000}1001.peach-overlay-view.ov-enter-up {1002  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1003}1004.peach-overlay-view.ov-exit-up {1005  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1006}1007.peach-overlay-view.ov-enter-right {1008  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1009}1010.peach-overlay-view.ov-exit-right {1011  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1012}10131014@keyframes ov-enter-up {1015  from { opacity: 0; transform: translateY(18px); }1016  to   { opacity: 1; transform: translateY(0); }1017}1018@keyframes ov-exit-up {1019  from { opacity: 1; transform: translateY(0); }1020  to   { opacity: 0; transform: translateY(-12px); }1021}1022@keyframes ov-enter-right {1023  from { opacity: 0; transform: translateX(20px); }1024  to   { opacity: 1; transform: translateX(0); }1025}1026@keyframes ov-exit-right {1027  from { opacity: 1; transform: translateX(0); }1028  to   { opacity: 0; transform: translateX(20px); }1029}10301031/* Overlay shared header */1032.peach-overlay-header {1033  padding: 10px 12px;1034  display: flex;1035  align-items: center;1036  gap: 8px;1037  border-bottom: 1px solid var(--peach-t3);1038  flex-shrink: 0;1039}1040.peach-overlay-title {1041  font-family: "IBM Plex Mono", monospace;1042  font-size: 9px;1043  text-transform: uppercase;1044  letter-spacing: 0.18em;1045  color: var(--peach-t2);1046  flex: 1;1047  text-align: center;1048}10491050.peach-overlay-card {1051  background: var(--peach-s1);1052  border: 1px solid var(--peach-t3);1053  border-radius: 12px;1054  overflow: hidden;1055  width: 100%;1056}10571058.peach-onboarding-alt-actions {1059  display: flex;1060  flex-direction: column;1061  gap: 4px;1062  padding: 0;1063}10641065.peach-settings-copy {1066  margin: 0 0 10px;1067  font-size: 11px;1068  line-height: 1.5;1069  color: var(--peach-t2);1070}10711072.peach-settings-copy strong {1073  color: var(--peach-t0);1074}10751076.peach-settings-copy--spacious {1077  margin-bottom: 12px;1078}10791080.peach-settings-copy--result {1081  color: var(--peach-accent);1082  font-size: 13px;1083  text-align: center;1084  padding: 8px 0;1085}10861087.peach-settings-copy--danger {1088  color: var(--peach-breach);1089}10901091.peach-settings-copy--success {1092  color: var(--peach-accent);1093}10941095.peach-inline-feedback {1096  font-size: 11px;1097  margin: 10px 0 0;1098}10991100.peach-inline-feedback--ok {1101  color: var(--peach-accent);1102}11031104.peach-inline-feedback--error {1105  color: var(--peach-breach);1106}11071108.peach-inline-feedback--muted {1109  color: var(--peach-t2);1110  font-size: 10px;1111  margin: 4px 0;1112}11131114.peach-inline-feedback--spaced {1115  margin-top: 12px;1116}11171118.peach-settings-actions--row {1119  display: flex;1120  gap: 6px;1121}11221123.peach-settings-actions--end {1124  margin-top: 14px;1125  justify-content: flex-end;1126}11271128.peach-settings-stack {1129  display: flex;1130  flex-direction: column;1131  gap: 6px;1132}11331134.peach-settings-stack--tight {1135  gap: 4px;1136}11371138.peach-settings-stack--spacious {1139  gap: 8px;1140}11411142.peach-settings-input {1143  width: 100%;1144  box-sizing: border-box;1145  padding: 8px 10px;1146  background: rgba(0, 0, 0, 0.22);1147  border: 1px solid transparent;1148  border-radius: 6px;1149  color: var(--peach-t0);1150  font-family: var(--font-ui);1151  font-size: 12px;1152  outline: none;1153  transition: border-color 120ms ease, background 120ms ease;1154}11551156.peach-settings-input:focus {1157  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1158  background: rgba(0, 0, 0, 0.28);1159}11601161.peach-settings-input[type="password"] {1162  font-family: var(--font-mono);1163  letter-spacing: 0.04em;1164}11651166.peach-hidden-file-input {1167  display: none;1168}11691170.peach-checkbox-note {1171  display: flex;1172  align-items: flex-start;1173  gap: 8px;1174  font-size: 11px;1175  color: var(--peach-t1);1176  cursor: pointer;1177  margin: 12px 0;1178}11791180.peach-checkbox-note input {1181  margin-top: 1px;1182}11831184.peach-danger-notice {1185  background: rgba(220, 80, 60, 0.08);1186  border: 1px solid rgba(220, 80, 60, 0.2);1187  border-radius: 6px;1188  padding: 9px 11px;1189  font-size: 11px;1190  color: var(--peach-t1);1191  line-height: 1.5;1192}11931194.peach-info-notice {1195  font-size: 11px;1196  color: var(--peach-t1);1197  line-height: 1.5;1198  background: var(--surface-card);1199  border: 1px solid var(--peach-t3);1200  border-radius: 6px;1201  padding: 8px 10px;1202}12031204.peach-info-notice--warn {1205  border-color: rgba(220, 38, 38, 0.4);1206  background: rgba(220, 38, 38, 0.06);1207  color: rgba(220, 38, 38, 0.92);1208  margin-bottom: 8px;1209}12101211.peach-strength-row {1212  display: flex;1213  align-items: center;1214  gap: 8px;1215  margin-bottom: 10px;1216}12171218.peach-strength-track {1219  flex: 1;1220  height: 4px;1221  background: var(--peach-s2);1222  border-radius: 2px;1223  overflow: hidden;1224}12251226.peach-strength-fill {1227  height: 100%;1228  border-radius: 2px;1229  transition: width 120ms ease, background 120ms ease;1230}12311232/* ── Type selector tabs ── */1233.peach-type-tabs {1234  display: flex;1235  gap: 0;1236  background: var(--peach-t4);1237  border-radius: 8px;1238  padding: 3px;1239}12401241.peach-type-tab {1242  flex: 1;1243  display: flex;1244  align-items: center;1245  justify-content: center;1246  gap: 6px;1247  padding: 6px 10px;1248  border-radius: 6px;1249  border: none;1250  background: transparent;1251  cursor: pointer;1252  font-family: Inter, system-ui, sans-serif;1253  font-size: 11px;1254  font-weight: 400;1255  letter-spacing: 0.04em;1256  color: var(--peach-t1);1257  transition: background 150ms ease, color 150ms ease;1258}12591260.peach-type-tab.is-active {1261  background: var(--peach-s2);1262  color: var(--peach-t0);1263  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1264}12651266.peach-type-tab:not(.is-active):hover {1267  color: var(--peach-t0);1268}12691270.peach-type-tab svg {1271  opacity: 0.7;1272  flex-shrink: 0;1273}12741275.peach-type-tab.is-active svg {1276  opacity: 1;1277}12781279/* ── List view ───────────────────────────────────────────────────────── */1280.peach-list-top {1281  padding: 0 10px;1282  min-height: 46px;1283  display: flex;1284  align-items: center;1285  gap: 6px;1286  border-bottom: 1px solid var(--peach-t3);1287  flex-shrink: 0;1288  background: var(--peach-s1);1289}1290.peach-vault-list {1291  flex: 1;1292  overflow-y: auto;1293  scrollbar-width: none;1294}1295.peach-vault-list::-webkit-scrollbar { display: none; }12961297/* Scrollbar — vault list */1298.peach-vault-list {1299  scrollbar-width: thin;1300  scrollbar-color: var(--peach-t3) transparent;1301}13021303.peach-vault-list::-webkit-scrollbar {1304  width: 3px;1305}13061307.peach-vault-list::-webkit-scrollbar-thumb {1308  background: var(--peach-t3);1309  border-radius: 2px;1310}13111312.peach-entry-row {1313  width: 100%;1314  display: flex;1315  align-items: center;1316  gap: 10px;1317  padding: 9px 16px;1318  background: transparent;1319  border: none;1320  border-bottom: 1px solid var(--peach-t3);1321  cursor: pointer;1322  color: inherit;1323  text-align: left;1324  transition: background 80ms ease;1325}1326.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1327.peach-entry-row:last-child { border-bottom: none; }1328.peach-entry-row.is-active {1329  box-shadow: inset 2px 0 0 var(--peach-accent);1330  background: rgba(240,232,216,0.03);1331}1332.peach-entry-row:focus-visible {1333  outline: none;1334  box-shadow: 0 0 0 1px var(--peach-border-accent);1335  background: rgba(240,232,216,0.03);1336}1337.peach-entry-row-icon {1338  width: 26px; height: 26px;1339  border-radius: 7px;1340  border: 1px solid var(--peach-t3);1341  display: flex; align-items: center; justify-content: center;1342  color: var(--peach-t2);1343  flex-shrink: 0;1344}1345.peach-entry-row-icon.is-breach {1346  border-color: rgba(220,80,60,0.3);1347  color: rgba(220,80,60,0.7);1348}13491350/* Title-initials chip used as the favicon fallback for login entries whose1351 * real favicon hasn't been cached by the browser yet (freshly-imported,1352 * never-visited domains). Background colour is hashed from the title so1353 * the same entry always shows the same chip. The chip fits the same1354 * 26×26 row icon slot the favicon would take. */1355.peach-favicon-initials {1356  display: inline-flex;1357  align-items: center;1358  justify-content: center;1359  width: 100%;1360  height: 100%;1361  border-radius: 4px;1362  font-family: "IBM Plex Mono", monospace;1363  font-size: 9px;1364  font-weight: 600;1365  letter-spacing: 0.04em;1366  color: rgba(240, 232, 216, 0.92);1367  text-transform: uppercase;1368  user-select: none;1369}1370.peach-entry-row-info { flex: 1; min-width: 0; }1371.peach-entry-row-name {1372  display: block;1373  font-family: var(--font-display);1374  font-size: 17px;1375  font-style: italic;1376  font-weight: 400;1377  color: var(--peach-t0);1378  line-height: 1.2;1379  white-space: nowrap;1380  overflow: hidden;1381  text-overflow: ellipsis;1382}1383.peach-entry-row-meta {1384  display: block;1385  font-family: "IBM Plex Mono", monospace;1386  font-size: 9px;1387  color: var(--peach-t2);1388  margin-top: 1px;1389  letter-spacing: 0.05em;1390}1391.peach-entry-row-dot {1392  width: 5px; height: 5px;1393  border-radius: 50%;1394  background: rgba(220,80,60,0.7);1395  flex-shrink: 0;1396}1397.peach-new-entry-row {1398  display: flex;1399  align-items: center;1400  justify-content: center;1401  gap: 6px;1402  width: 100%;1403  padding: 11px;1404  background: transparent;1405  border: none;1406  border-top: 1px solid var(--peach-t3);1407  color: var(--peach-t2);1408  font-family: "IBM Plex Mono", monospace;1409  font-size: 9px;1410  text-transform: uppercase;1411  letter-spacing: 0.14em;1412  cursor: pointer;1413  flex-shrink: 0;1414  transition: color 120ms ease, background 120ms ease;1415}1416.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }14171418/* ── Multi-select mode ─────────────────────────────────────────────── */14191420/* Select-mode trigger button in sort bar — same shape as trash btn */1421.peach-sort-select-btn {1422  display: flex;1423  align-items: center;1424  justify-content: center;1425  padding: 3px 5px;1426  background: transparent;1427  border: none;1428  cursor: pointer;1429  color: var(--peach-t2);1430  border-radius: 4px;1431  transition: color 140ms ease, background 140ms ease;1432}1433.peach-sort-select-btn:hover {1434  color: var(--peach-t1);1435  background: var(--peach-t3);1436}14371438/* Sort bar in select mode */1439.peach-select-cancel-btn {1440  background: transparent;1441  border: none;1442  padding: 0 4px;1443  cursor: pointer;1444  font-family: "IBM Plex Mono", monospace;1445  font-size: 9px;1446  letter-spacing: 0.12em;1447  text-transform: uppercase;1448  color: var(--peach-t2);1449  transition: color 140ms ease;1450  flex-shrink: 0;1451}1452.peach-select-cancel-btn:hover { color: var(--peach-t0); }14531454.peach-select-count-label {1455  flex: 1;1456  text-align: center;1457  font-family: "IBM Plex Mono", monospace;1458  font-size: 9px;1459  letter-spacing: 0.14em;1460  text-transform: uppercase;1461  color: var(--peach-t1);1462}14631464.peach-select-all-btn {1465  background: transparent;1466  border: none;1467  padding: 0 4px;1468  cursor: pointer;1469  font-family: "IBM Plex Mono", monospace;1470  font-size: 9px;1471  letter-spacing: 0.12em;1472  text-transform: uppercase;1473  color: var(--peach-t2);1474  transition: color 140ms ease;1475  flex-shrink: 0;1476}1477.peach-select-all-btn:hover { color: var(--peach-accent); }14781479/* List in select mode */1480.peach-vault-list.is-selecting .peach-entry-row {1481  cursor: default;1482}1483.peach-vault-list.is-selecting .peach-entry-row:hover {1484  background: rgba(240,232,216,0.02);1485}1486.peach-vault-list.is-selecting .peach-entry-row.is-selected {1487  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1488}1489.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1490  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1491}14921493/* Select indicator circles in icon slot */1494.peach-entry-row-icon.is-select-icon {1495  color: var(--peach-t2);1496}1497.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1498  color: var(--peach-accent);1499}15001501/* Delete action bar at bottom (replaces new-entry row) */1502.peach-select-action-bar {1503  display: flex;1504  align-items: center;1505  justify-content: center;1506  gap: 7px;1507  width: 100%;1508  padding: 11px;1509  background: transparent;1510  border: none;1511  border-top: 1px solid var(--peach-t3);1512  color: var(--peach-t1);1513  font-family: "IBM Plex Mono", monospace;1514  font-size: 9px;1515  text-transform: uppercase;1516  letter-spacing: 0.14em;1517  cursor: pointer;1518  flex-shrink: 0;1519  transition: color 120ms ease, background 120ms ease;1520}1521.peach-select-action-bar:not(:disabled):hover {1522  color: var(--peach-t0);1523  background: rgba(220,80,60,0.06);1524}1525.peach-select-action-bar:not(:disabled):hover svg {1526  stroke: rgba(220,80,60,0.8);1527}1528.peach-select-action-bar:disabled,1529.peach-select-action-bar.is-empty {1530  color: var(--peach-t2);1531  cursor: default;1532  opacity: 0.5;1533}1534.peach-search-counter-list {1535  white-space: nowrap;1536  flex-shrink: 0;1537}1538.peach-list-empty {1539  min-height: 180px;1540  display: grid;1541  place-items: center;1542  color: var(--peach-t2);1543  font-family: "IBM Plex Mono", monospace;1544  font-size: 11px;1545}15461547/* ── Settings view ───────────────────────────────────────────────────── */1548.peach-settings-body {1549  flex: 1;1550  overflow-y: auto;1551  min-height: 0;1552  display: flex;1553  flex-direction: column;1554  padding: 2px 0 10px;1555}1556.peach-settings-group {1557  margin: 4px 10px;1558  padding: 9px 14px 11px;1559  border-radius: 12px;1560  border: 1px solid rgba(255, 255, 255, 0.07);1561  background: rgba(26, 20, 16, 0.60);1562  backdrop-filter: blur(10px) saturate(1.3);1563  -webkit-backdrop-filter: blur(10px) saturate(1.3);1564}15651566.peach-settings-group + .peach-settings-group {1567  margin-top: 6px;1568}15691570@supports not (backdrop-filter: blur(1px)) {1571  .peach-settings-group {1572    background: rgba(26, 20, 16, 0.90);1573    border-color: rgba(255, 255, 255, 0.09);1574    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1575  }1576}15771578.light .peach-settings-group,1579[data-theme="light"] .peach-settings-group {1580  background: rgba(253, 248, 244, 0.68);1581  border-color: rgba(0, 0, 0, 0.07);1582  backdrop-filter: blur(10px) saturate(1.2);1583  -webkit-backdrop-filter: blur(10px) saturate(1.2);1584}15851586@supports not (backdrop-filter: blur(1px)) {1587  .light .peach-settings-group,1588  [data-theme="light"] .peach-settings-group {1589    background: rgba(253, 248, 244, 0.95);1590    border-color: rgba(0, 0, 0, 0.09);1591  }1592}1593.peach-export-intro {1594  padding-bottom: 8px;1595}1596.peach-export-card {1597  display: grid;1598  gap: 10px;1599}1600.peach-rune-canvas {1601  border-radius: 8px;1602  background: rgba(0, 0, 0, 0.22);1603  flex: 1;1604  align-self: center;1605}1606.peach-script-input {1607  font-family: "PeachScript", monospace;1608  font-size: 11px;1609  line-height: 1.9;1610  letter-spacing: 0.06em;1611  color: var(--peach-t0);1612  background: rgba(0, 0, 0, 0.22);1613  border: none;1614  border-radius: 6px;1615  padding: 12px;1616  width: 100%;1617  min-height: 96px;1618  resize: vertical;1619  word-break: break-all;1620}1621.peach-qr-canvas-wrap {1622  display: flex;1623  justify-content: center;1624  padding: 12px 0 6px;1625}1626.peach-qr-canvas-wrap canvas {1627  display: block;1628  background: #ffffff;1629  border-radius: 6px;1630  max-width: 100%;1631  height: auto;1632}1633.peach-csv-warning {1634  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1635  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1636  color: var(--peach-t0);1637  border-radius: 6px;1638  padding: 10px 12px;1639  margin-bottom: 8px;1640  font-size: 12px;1641  line-height: 1.45;1642}1643.peach-export-card--primary {1644  background:1645    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1646}16471648/* Export menu — distribute the three format cards across the popup. */1649.peach-export-menu {1650  display: flex;1651  flex-direction: column;1652  flex: 1;1653  min-height: 0;1654}1655.peach-export-menu .peach-settings-group {1656  flex: 1;1657  display: flex;1658  flex-direction: column;1659  justify-content: center;1660  gap: 10px;1661}16621663/* Result view — the script-string fills the remaining vertical surface. */1664.peach-export-result-group {1665  flex: 1;1666  display: flex;1667  flex-direction: column;1668  min-height: 0;1669  border-bottom: none;1670}1671.peach-export-result-group .peach-export-card {1672  flex: 1;1673  min-height: 0;1674  display: flex;1675  flex-direction: column;1676  gap: 10px;1677}1678.peach-export-result-group .peach-export-card-copy {1679  flex-shrink: 0;1680}1681.peach-export-result-group .peach-settings-label {1682  flex-shrink: 0;1683}1684.peach-export-result-group button {1685  flex-shrink: 0;1686}1687.peach-export-card-head {1688  display: flex;1689  align-items: center;1690  justify-content: space-between;1691  gap: 10px;1692}1693.peach-export-card-copy {1694  margin: 0;1695  font-size: 12px;1696  line-height: 1.55;1697  color: var(--peach-t1);1698}1699.peach-export-note {1700  margin: 0;1701  font-size: 10px;1702  line-height: 1.5;1703  color: var(--peach-t2);1704}1705.peach-export-pill {1706  display: inline-flex;1707  align-items: center;1708  padding: 4px 8px;1709  border-radius: 999px;1710  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1711  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1712  color: var(--peach-accent);1713  font-family: "IBM Plex Mono", monospace;1714  font-size: 8px;1715  letter-spacing: 0.12em;1716  text-transform: uppercase;1717  white-space: nowrap;1718}1719.peach-export-pill--danger {1720  border-color: rgba(220,80,60,0.22);1721  background: rgba(220,80,60,0.08);1722  color: var(--peach-breach);1723}1724.peach-export-password-stack {1725  gap: 8px;1726}1727.peach-settings-label {1728  margin: 0 0 6px;1729  font-family: "IBM Plex Mono", monospace;1730  font-size: 8px;1731  text-transform: uppercase;1732  letter-spacing: 0.18em;1733  color: var(--peach-t2);1734}1735.peach-settings-row {1736  display: flex;1737  align-items: center;1738  justify-content: space-between;1739  gap: 12px;1740  min-height: 34px;1741  padding: 6px 0;1742  font-size: 13px;1743  color: var(--peach-t1);1744}1745.peach-settings-row--meta { color: var(--peach-t2); font-size: 12px; }1746.peach-settings-value {1747  font-family: "IBM Plex Mono", monospace;1748  font-size: 10px;1749  color: var(--peach-t2);1750}17511752.peach-settings-value--status {1753  display: flex;1754  align-items: center;1755  gap: 6px;1756}17571758.peach-settings-link {1759  font-family: "IBM Plex Mono", monospace;1760  font-size: 10px;1761  color: var(--peach-accent);1762  text-decoration: none;1763  cursor: pointer;1764}1765.peach-settings-link:hover {1766  text-decoration: underline;1767}17681769.peach-settings-row--stack {1770  flex-direction: column;1771  align-items: stretch;1772  gap: 6px;1773}17741775.peach-settings-row--top {1776  align-items: flex-start;1777}17781779.peach-settings-row-main {1780  display: flex;1781  flex-direction: column;1782  gap: 4px;1783  flex: 1;1784}1785.peach-toggle {1786  width: 28px; height: 16px;1787  border-radius: 999px;1788  background: var(--peach-t3);1789  border: 1px solid var(--peach-t3);1790  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1791  flex-shrink: 0;1792  transition: background 200ms ease, border-color 200ms ease;1793  cursor: pointer;1794}1795.peach-toggle.is-on {1796  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1797  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1798}1799.peach-toggle-knob {1800  width: 10px; height: 10px;1801  border-radius: 50%;1802  background: var(--peach-t2);1803  flex-shrink: 0;1804  transform: translateX(0px);1805  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1806}1807.peach-toggle.is-on .peach-toggle-knob {1808  background: var(--peach-accent);1809  transform: translateX(12px);1810}1811.peach-settings-footer {1812  display: flex;1813  align-items: center;1814  gap: 8px;1815  margin-top: auto;1816  padding: 14px 16px 8px;1817  font-family: "IBM Plex Mono", monospace;1818  font-size: 9px;1819  color: var(--peach-t2);1820}18211822/* ── Settings home navigation ──────────────────────────────────────────── */1823.peach-settings-nav-label {1824  margin: 0 0 2px;1825  padding: 12px 16px 4px;1826  font-family: "IBM Plex Mono", monospace;1827  font-size: 8px;1828  text-transform: uppercase;1829  letter-spacing: 0.18em;1830  color: var(--peach-t2);1831}18321833.peach-settings-cat-row {1834  display: flex;1835  align-items: center;1836  gap: 10px;1837  width: 100%;1838  padding: 9px 16px;1839  background: none;1840  border: none;1841  border-bottom: 1px solid var(--peach-t3);1842  cursor: pointer;1843  text-align: left;1844  color: inherit;1845  transition: background var(--peach-dur-80) ease;1846}1847.peach-settings-cat-row:hover {1848  background: var(--peach-t3);1849}1850.peach-settings-cat-row:last-child {1851  border-bottom: none;1852}18531854.peach-settings-cat-icon {1855  width: 28px;1856  height: 28px;1857  border-radius: 7px;1858  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1859  color: var(--peach-accent);1860  display: flex;1861  align-items: center;1862  justify-content: center;1863  flex-shrink: 0;1864}1865/* Light theme: peach-on-cream is too low-contrast — both colors are warm.1866   Darken the icon stroke to ink and bump the bg tint so the icon reads1867   sharply while the cell still feels accent-tinted. */1868.light .peach-settings-cat-icon {1869  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);1870  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));1871}18721873.peach-settings-cat-content {1874  flex: 1;1875  display: flex;1876  flex-direction: column;1877  gap: 2px;1878  min-width: 0;1879}18801881.peach-settings-cat-name {1882  font-size: 13px;1883  font-weight: 450;1884  color: var(--peach-t0);1885  line-height: 1.2;1886}18871888.peach-settings-cat-desc {1889  font-size: 10px;1890  color: var(--peach-t2);1891  line-height: 1.3;1892  white-space: nowrap;1893  overflow: hidden;1894  text-overflow: ellipsis;1895}18961897.peach-settings-cat-chevron {1898  color: var(--peach-t2);1899  flex-shrink: 0;1900  opacity: 0.5;1901}19021903/* ── Settings sub-view section labels ──────────────────────────────────── */1904.peach-settings-sub-label {1905  margin: 12px 0 4px;1906  font-family: "IBM Plex Mono", monospace;1907  font-size: 8px;1908  text-transform: uppercase;1909  letter-spacing: 0.18em;1910  color: var(--peach-t2);1911}1912.peach-settings-sub-label:first-child {1913  margin-top: 4px;1914}19151916/* ── Feedback form ──────────────────────────────────────────────────────── */1917.peach-feedback-group {1918  flex: 1;1919  display: flex;1920  flex-direction: column;1921  border-bottom: none;1922}19231924.peach-feedback-intro {1925  margin: 4px 0 14px;1926  font-size: 12px;1927  line-height: 1.55;1928  color: var(--peach-t1);1929}19301931.peach-feedback-chips {1932  display: flex;1933  flex-wrap: wrap;1934  gap: 6px;1935  margin-bottom: 14px;1936}19371938.peach-feedback-chip {1939  padding: 4px 10px;1940  border-radius: 999px;1941  border: 1px solid var(--peach-t3);1942  background: none;1943  color: var(--peach-t2);1944  font-size: 11px;1945  font-family: var(--font-ui);1946  cursor: pointer;1947  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,1948    background var(--peach-dur-80) ease;1949}1950.peach-feedback-chip:hover {1951  border-color: var(--peach-t2);1952  color: var(--peach-t1);1953}1954.peach-feedback-chip.is-active {1955  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);1956  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1957  color: var(--peach-accent);1958}19591960.peach-feedback-textarea {1961  flex: 1;1962  width: 100%;1963  min-height: 120px;1964  box-sizing: border-box;1965  background: rgba(0, 0, 0, 0.22);1966  border: 1px solid transparent;1967  border-radius: 6px;1968  color: var(--peach-t0);1969  font-size: 12px;1970  font-family: var(--font-ui);1971  line-height: 1.5;1972  padding: 8px 10px;1973  resize: none;1974  outline: none;1975  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;1976}1977.peach-feedback-textarea:focus {1978  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1979  background: rgba(0, 0, 0, 0.28);1980}1981.peach-feedback-textarea:focus {1982  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1983}1984.peach-feedback-textarea::placeholder {1985  color: var(--peach-t2);1986}19871988.peach-feedback-meta {1989  margin: 6px 0 0;1990  font-size: 10px;1991  color: var(--peach-t2);1992  font-family: "IBM Plex Mono", monospace;1993}19941995.peach-feedback-result {1996  margin: 8px 0 0;1997  font-size: 11px;1998  font-family: "IBM Plex Mono", monospace;1999}2000.peach-feedback-result--ok { color: var(--peach-sync-ok); }2001.peach-feedback-result--err { color: var(--peach-breach); }20022003.peach-feedback-submit {2004  width: 100%;2005  margin-top: 12px;2006  justify-content: center;2007}20082009.peach-feedback-anon {2010  margin: 8px 0 0;2011  font-size: 10px;2012  color: var(--peach-t2);2013  text-align: center;2014}20152016.peach-passkey-badge {2017  margin-left: 8px;2018  font-size: 10px;2019  letter-spacing: 0.06em;2020  text-transform: uppercase;2021  color: var(--peach-t2);2022  font-family: var(--font-ui);2023  vertical-align: middle;2024}20252026.peach-passkey-delete-btn {2027  color: var(--peach-breach);2028  border-color: rgba(229, 85, 85, 0.25);2029}20302031.peach-passkey-delete-confirm {2032  display: flex;2033  align-items: center;2034  gap: 8px;2035  padding: 8px 10px;2036  background: rgba(229, 85, 85, 0.06);2037  border: 1px solid rgba(229, 85, 85, 0.2);2038  border-radius: 6px;2039}20402041.peach-passkey-delete-confirm-copy {2042  flex: 1;2043  font-size: 11px;2044  color: var(--peach-t1);2045}20462047.peach-passkey-delete-btn--confirm {2048  color: var(--peach-breach);2049  border-color: rgba(229, 85, 85, 0.4);2050}20512052.peach-passkey-activity {2053  flex-direction: column;2054  align-items: flex-start;2055  gap: 4px;2056}20572058.peach-passkey-meta {2059  font-size: 11px;2060  color: var(--peach-t2);2061}20622063.peach-passkey-actions {2064  position: relative;2065  z-index: 1;2066  margin-top: 14px;2067  display: flex;2068  flex-direction: column;2069  gap: 8px;2070}20712072.peach-passkey-approval {2073  display: flex;2074  flex-direction: column;2075  align-items: center;2076  padding: 22px 20px 18px;2077  gap: 10px;2078  text-align: center;2079}20802081.peach-passkey-approval-icon {2082  width: 46px;2083  height: 46px;2084  border-radius: 12px;2085  background: var(--peach-s2);2086  border: 1px solid var(--peach-t3);2087  display: flex;2088  align-items: center;2089  justify-content: center;2090  flex-shrink: 0;2091  color: var(--peach-accent);2092}20932094.peach-passkey-approval-icon img,2095.peach-passkey-approval-icon svg {2096  width: 28px;2097  height: 28px;2098  border-radius: 6px;2099}21002101.peach-passkey-approval-rp {2102  font-family: var(--font-ui);2103  font-size: 12px;2104  color: var(--peach-t2);2105  letter-spacing: 0.03em;2106}21072108.peach-passkey-approval-action {2109  font-family: var(--font-display);2110  font-style: italic;2111  font-weight: 300;2112  font-size: 22px;2113  color: var(--peach-t0);2114  line-height: 1.1;2115  margin: 2px 0;2116}21172118.peach-passkey-approval-user {2119  font-family: var(--font-mono);2120  font-size: 11px;2121  color: var(--peach-t1);2122  background: var(--peach-s2);2123  border: 1px solid var(--peach-t3);2124  border-radius: 4px;2125  padding: 3px 8px;2126}21272128.peach-passkey-approval-notice {2129  font-size: 10px;2130  color: var(--peach-t2);2131  line-height: 1.5;2132  max-width: 220px;2133}21342135.peach-passkey-approval-actions {2136  display: flex;2137  gap: 8px;2138  width: 100%;2139  margin-top: 6px;2140}21412142.peach-passkey-approval-actions .peach-btn {2143  flex: 1;2144}21452146/* ── Inline generator drawer ── */2147.peach-generator-drawer {2148  display: grid;2149  grid-template-rows: 0fr;2150  transition: grid-template-rows 320ms var(--peach-curve-arrival);2151  overflow: hidden;2152}2153.peach-generator-drawer.is-open {2154  grid-template-rows: 1fr;2155}2156.peach-generator-drawer-inner {2157  min-height: 0;2158  overflow: hidden;2159}2160.peach-generator-drawer-content {2161  border-top: 1px solid var(--peach-t3);2162  padding: 8px 0 4px;2163  display: flex;2164  flex-direction: column;2165  gap: 8px;2166}21672168/* ── Compact generator (inside entry edit) ── */2169.peach-generator-drawer-content--compact {2170  border-top: 1px solid var(--peach-t3);2171  padding: 8px 0 2px;2172  gap: 7px;2173}2174.peach-pwgen-compact-display-row {2175  display: flex;2176  align-items: center;2177  gap: 6px;2178}2179.peach-pwgen-compact-output {2180  flex: 1;2181  min-width: 0;2182  font-family: "IBM Plex Mono", monospace;2183  font-size: 11px;2184  font-weight: 400;2185  letter-spacing: 0.04em;2186  color: var(--peach-t0);2187  background: rgba(240, 232, 216, 0.04);2188  border: 1px solid var(--peach-t3);2189  border-radius: 5px;2190  padding: 5px 8px;2191  word-break: break-all;2192  line-height: 1.5;2193}2194.peach-pwgen-compact-controls {2195  display: flex;2196  align-items: center;2197  gap: 6px;2198}2199.peach-pwgen-compact-slider {2200  flex: 1;2201  min-width: 0;2202  height: 2px !important;2203}2204.peach-pwgen-compact-controls .peach-pwgen-len-num {2205  flex-shrink: 0;2206  min-width: 18px;2207  text-align: right;2208}2209.peach-pwgen-compact-pills {2210  display: flex;2211  gap: 3px;2212  flex-shrink: 0;2213}2214.peach-pwgen-compact-pills .peach-pwgen-pill {2215  padding: 2px 7px;2216  font-size: 8px;2217}2218.peach-pwgen-compact-use {2219  flex-shrink: 0;2220  font-size: 10px !important;2221  padding: 3px 9px !important;2222  min-height: 22px !important;2223  border-radius: 5px !important;2224}22252226/* ── Password edit row (input + eye toggle side-by-side) ── */2227.peach-password-edit-row {2228  display: flex;2229  align-items: center;2230  gap: 6px;2231}2232.peach-password-edit-row .peach-inline-input {2233  flex: 1;2234  min-width: 0;2235}22362237/* ── Generate toggle link ── */2238.peach-generate-toggle-link {2239  display: inline-flex;2240  align-items: center;2241  gap: 5px;2242  background: none;2243  border: none;2244  padding: 0;2245  cursor: pointer;2246  font-family: "IBM Plex Mono", monospace;2247  font-size: 10px;2248  color: var(--peach-t2);2249  letter-spacing: 0.04em;2250  transition: color 120ms ease;2251  align-self: flex-start;2252}2253.peach-generate-toggle-link:hover {2254  color: var(--peach-accent);2255}22562257/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2258.peach-entry-body {2259  flex: 1;2260  overflow-y: auto;2261  overflow-x: hidden;2262  scrollbar-width: none;2263  -ms-overflow-style: none;2264  overscroll-behavior: contain;2265  display: grid;2266  gap: 10px;2267  align-content: start;2268  padding: 10px 20px 14px;2269  min-width: 0;2270  min-height: 0;2271}2272.peach-entry-body::-webkit-scrollbar { display: none; }22732274/* Type-toggle pills + inline note toolbar */2275.peach-new-type-row {2276  display: flex;2277  align-items: center;2278  gap: 6px;2279  margin-bottom: 2px;2280}2281.peach-new-type-btn {2282  background: transparent;2283  border: 1px solid var(--peach-t3);2284  border-radius: 12px;2285  padding: 3px 10px;2286  font-family: "IBM Plex Mono", monospace;2287  font-size: 9px;2288  letter-spacing: 0.12em;2289  text-transform: uppercase;2290  color: var(--peach-t2);2291  cursor: pointer;2292  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2293}2294.peach-new-type-btn.is-active {2295  color: var(--peach-t0);2296  border-color: var(--peach-accent);2297  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2298}2299.peach-new-type-btn:not(.is-active):hover {2300  color: var(--peach-t1);2301  border-color: var(--peach-t2);2302}23032304/* Editable title */2305.peach-new-title-wrap { margin: 0 0 2px; }2306.peach-new-title-input {2307  background: transparent;2308  border: none;2309  outline: none;2310  width: 100%;2311  color: var(--peach-t0);2312  font-family: var(--font-display);2313  font-style: italic;2314  font-weight: 400;2315  font-size: 40px;2316  line-height: 0.95;2317  caret-color: var(--peach-accent);2318}2319.peach-new-title-input::placeholder { color: var(--peach-t2); }23202321/* Editable domain field */2322.peach-domain-value--edit {2323  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2324  font-size: 10px;2325  font-style: italic;2326  letter-spacing: 0.12em;2327  color: var(--peach-t1);2328  background: transparent;2329  border: none;2330  border-bottom: 1px solid var(--peach-t3);2331  outline: none;2332  width: 100%;2333  padding: 2px 0;2334  caret-color: var(--peach-accent);2335  transition: border-color 140ms ease, color 140ms ease;2336}2337.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2338.peach-domain-value--edit:focus {2339  border-bottom-color: rgba(240, 232, 216, 0.28);2340  color: var(--peach-t0);2341}23422343/* Editable field values (username, password, totp) */2344.peach-field-value--edit {2345  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2346  font-size: 13px;2347  color: var(--peach-t0);2348  background: transparent;2349  border: none;2350  border-bottom: 1px solid var(--peach-t3);2351  outline: none;2352  flex: 1;2353  min-width: 0;2354  padding: 3px 0;2355  caret-color: var(--peach-accent);2356  transition: border-color 140ms ease, color 140ms ease;2357}2358.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2359.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2360.peach-field-value--edit:focus {2361  border-bottom-color: rgba(240, 232, 216, 0.28);2362  color: var(--peach-t0);2363}23642365/* "+ add optional field" links */2366.peach-entry-add-links {2367  display: flex;2368  gap: 12px;2369  flex-wrap: wrap;2370  margin-top: -2px;2371}2372.peach-add-field-link {2373  background: transparent;2374  border: none;2375  padding: 0;2376  cursor: pointer;2377  font-family: "IBM Plex Mono", monospace;2378  font-size: 9px;2379  letter-spacing: 0.1em;2380  text-transform: uppercase;2381  color: var(--peach-t2);2382  transition: color 140ms ease;2383}2384.peach-add-field-link:hover { color: var(--peach-accent); }23852386/* ── New entry form (legacy classes) ────────────────────────────────── */2387.peach-new-body {2388  flex: 1;2389  overflow-y: auto;2390  padding: 10px 20px 14px;2391}2392.peach-new-name-input {2393  background: transparent;2394  border: none;2395  outline: none;2396  width: 100%;2397  color: var(--peach-t0);2398  font-family: var(--font-display);2399  font-style: italic;2400  font-weight: 400;2401  font-size: 40px;2402  line-height: 0.95;2403  caret-color: var(--peach-accent);2404}2405.peach-new-name-input::placeholder { color: var(--peach-t2); }2406.peach-new-field-input {2407  background: transparent;2408  border: none;2409  outline: none;2410  flex: 1;2411  min-width: 0;2412  caret-color: var(--peach-accent);2413}2414.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }24152416/* ── Canary card ── */2417.peach-canary-card {2418  border: 1px solid rgba(217, 160, 48, 0.2);2419  background: rgba(217, 160, 48, 0.03);2420  border-radius: 8px;2421  padding: 12px;2422}24232424.peach-canary-settings-header {2425  display: flex;2426  align-items: center;2427  justify-content: space-between;2428  cursor: pointer;2429  user-select: none;2430}24312432.peach-canary-card .peach-label {2433  color: rgba(217, 160, 48, 0.85);2434}24352436.peach-canary-card .peach-new-field-input {2437  border-color: rgba(217, 160, 48, 0.25);2438}24392440.peach-canary-card .peach-new-field-input:focus {2441  border-color: rgba(217, 160, 48, 0.5);2442}24432444.peach-canary-body {2445  margin-top: 12px;2446  display: flex;2447  flex-direction: column;2448  gap: 10px;2449}24502451.peach-canary-explainer {2452  display: flex;2453  gap: 10px;2454  padding: 10px 12px;2455  border-radius: 10px;2456  background: rgba(217, 160, 48, 0.06);2457  border: 1px solid rgba(217, 160, 48, 0.22);2458  margin-bottom: 4px;2459}24602461.peach-canary-explainer-icon {2462  font-size: 16px;2463  flex-shrink: 0;2464  line-height: 1.2;2465}24662467.peach-canary-explainer-title {2468  font-family: var(--font-ui);2469  font-size: 11px;2470  font-weight: 500;2471  color: rgba(217, 160, 48, 0.9);2472  margin: 0 0 3px;2473}24742475.peach-canary-explainer-copy {2476  font-family: var(--font-ui);2477  font-size: 10px;2478  color: var(--peach-t2);2479  line-height: 1.55;2480  margin: 0;2481}24822483.peach-canary-hint {2484  font-size: 10px;2485  color: var(--peach-t2);2486  font-family: Inter, system-ui, sans-serif;2487  line-height: 1.5;2488  margin-top: 4px;2489}24902491.peach-canary-actions-row {2492  display: flex;2493  align-items: center;2494  gap: 8px;2495}24962497.peach-canary-test-btn {2498  border-color: rgba(217, 160, 48, 0.3);2499  color: rgba(217, 160, 48, 0.85);2500}25012502.peach-canary-test-result {2503  font-size: 10px;2504  font-family: Inter, system-ui, sans-serif;2505}25062507.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2508.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }25092510.peach-canary-badge {2511  display: flex;2512  position: relative;2513  z-index: 1;2514  align-items: center;2515  gap: 5px;2516  padding: 4px 10px;2517  background: rgba(217, 160, 48, 0.12);2518  border: 1px solid rgba(217, 160, 48, 0.35);2519  border-radius: 6px;2520  margin-bottom: 6px;2521  width: fit-content;2522}25232524.peach-canary-badge-label {2525  font-size: 10px;2526  letter-spacing: 0.06em;2527  color: rgba(217, 160, 48, 0.9);2528  font-family: var(--font-ui);2529  text-transform: uppercase;2530}25312532.peach-canary-badge-icon {2533  font-size: 11px;2534}25352536.peach-canary-suppress-row {2537  display: flex;2538  align-items: center;2539  gap: 8px;2540  padding: 6px 10px;2541  background: rgba(217, 160, 48, 0.08);2542  border-radius: 6px;2543  margin-bottom: 8px;2544}25452546.peach-canary-suppress-label {2547  font-size: 11px;2548  color: rgba(217, 160, 48, 0.85);2549  cursor: pointer;2550  font-family: var(--font-ui);2551  letter-spacing: 0.04em;2552}25532554.peach-regen-panel {2555  position: relative;2556  z-index: 1;2557  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2558  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2559  border-radius: 8px;2560  padding: 12px;2561  margin-bottom: 8px;2562}25632564.peach-regen-panel-header {2565  display: flex;2566  align-items: center;2567  justify-content: space-between;2568  margin-bottom: 10px;2569}25702571.peach-regen-panel-title {2572  font-size: 11px;2573  font-weight: 600;2574  letter-spacing: 0.06em;2575  text-transform: uppercase;2576  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2577}25782579.peach-regen-output {2580  background: rgba(0, 0, 0, 0.2);2581  border-radius: 6px;2582  padding: 10px;2583  margin-bottom: 10px;2584  font-family: var(--font-mono);2585  font-size: 13px;2586  word-break: break-all;2587  color: var(--peach-t1);2588}25892590.peach-regen-actions {2591  display: flex;2592  gap: 6px;2593}25942595.peach-regen-actions--spaced {2596  margin-bottom: 8px;2597}25982599.peach-regen-action-grow {2600  flex: 1;2601}26022603.peach-regen-copy-btn {2604  padding: 0 8px;2605}26062607.peach-regen-success {2608  position: relative;2609  z-index: 1;2610  background: rgba(40, 180, 80, 0.1);2611  border: 1px solid rgba(40, 180, 80, 0.3);2612  border-radius: 8px;2613  padding: 10px 12px;2614  margin-bottom: 8px;2615  display: flex;2616  align-items: center;2617  gap: 8px;2618  font-size: 11px;2619  color: rgba(40, 180, 80, 0.9);2620}26212622/* ── Note editor overlay ── */2623.peach-note-editor {2624  position: absolute;2625  inset: 0;2626  z-index: 200;2627  display: flex;2628  flex-direction: column;2629  background:2630    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2631    var(--peach-bg);2632  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2633}26342635.peach-note-editor-header {2636  display: flex;2637  align-items: center;2638  gap: 10px;2639  padding: 14px 16px 10px;2640  border-bottom: 1px solid var(--peach-t3);2641  flex-shrink: 0;2642}26432644.peach-note-editor-back {2645  background: transparent;2646  border: none;2647  cursor: pointer;2648  color: var(--peach-t2);2649  padding: 4px 6px;2650  border-radius: 6px;2651  display: flex;2652  align-items: center;2653  transition: color 120ms ease, background 120ms ease;2654  flex-shrink: 0;2655}2656.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }26572658.peach-note-editor-label {2659  flex: 1;2660  font-family: var(--font-display);2661  font-style: italic;2662  font-size: 15px;2663  color: var(--peach-t1);2664  letter-spacing: 0.02em;2665}26662667.peach-note-editor-save-btn {2668  background: transparent;2669  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2670  border-radius: 8px;2671  color: var(--peach-accent);2672  font-family: "IBM Plex Mono", monospace;2673  font-size: 10px;2674  letter-spacing: 0.06em;2675  text-transform: uppercase;2676  padding: 3px 10px;2677  cursor: pointer;2678  transition: background 120ms ease, border-color 120ms ease;2679}2680.peach-note-editor-save-btn:hover:not(:disabled) {2681  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2682  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2683}2684.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }26852686.peach-note-toolbar {2687  display: flex;2688  align-items: center;2689  gap: 3px;2690  padding: 6px 14px 5px;2691  border-bottom: 1px solid var(--peach-t3);2692  flex-shrink: 0;2693}26942695.peach-note-tool-btn {2696  background: transparent;2697  border: 1px solid transparent;2698  border-radius: 5px;2699  color: var(--peach-t2);2700  font-family: "IBM Plex Mono", monospace;2701  font-size: 10px;2702  letter-spacing: 0.04em;2703  padding: 2px 8px;2704  cursor: pointer;2705  line-height: 1.6;2706  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2707}2708.peach-note-tool-btn:hover {2709  background: var(--peach-t4);2710  color: var(--peach-t0);2711  border-color: var(--peach-t3);2712}27132714.peach-note-tool-icon {2715  padding: 3px 7px;2716  display: inline-flex;2717  align-items: center;2718  justify-content: center;2719}27202721.peach-note-tool-divider {2722  width: 1px;2723  height: 14px;2724  background: var(--peach-t3);2725  margin: 0 4px;2726  flex-shrink: 0;2727}27282729.peach-note-editor-body {2730  flex: 1;2731  overflow-y: auto;2732  padding: 16px 20px 20px;2733  outline: none;2734  font-family: var(--font-display);2735  font-size: 16px;2736  line-height: 1.75;2737  color: var(--peach-t0);2738  scrollbar-width: none;2739  word-break: break-word;2740}2741.peach-note-editor-body:empty::before {2742  content: "write your note…";2743  color: var(--peach-t3);2744  font-style: italic;2745  pointer-events: none;2746}27472748/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2749.peach-note-editor-inline {2750  display: flex;2751  flex-direction: column;2752  flex: 1;2753  min-height: 0;2754}2755.peach-note-editor-body--inline {2756  flex: 1;2757  min-height: 0;2758  font-size: 15px;2759  padding: 10px 20px 14px;2760}27612762/* Full-width toolbar row inside the body (Add.tsx note type).2763   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */2764.peach-note-toolbar-body {2765  display: flex;2766  align-items: center;2767  gap: 3px;2768  padding: 5px 20px 4px;2769  margin: 2px -20px 0;2770  border-bottom: 1px solid var(--peach-t3);2771  flex-shrink: 0;2772}27732774/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2775   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2776   and .peach-note-tool-divider button-level styles. */2777.peach-note-toolbar-inline {2778  display: flex;2779  align-items: center;2780  gap: 3px;2781  margin-left: auto;2782  padding-left: 10px;2783  border-left: 1px solid var(--peach-t3);2784  min-height: 22px;2785}27862787/* Entry.tsx toolbar row (no tabs, toolbar only) */2788.peach-entry-note-toolbar-row {2789  display: flex;2790  align-items: center;2791  margin: 4px 0 6px;2792  position: relative;2793  z-index: 1;2794}2795.peach-entry-note-toolbar-row .peach-note-toolbar-inline {2796  border-left: none;2797  padding-left: 0;2798  margin-left: 0;2799}28002801/* Note body — fills available vertical space in Add.tsx and Entry.tsx */2802.peach-note-body {2803  display: flex;2804  flex-direction: column;2805  flex: 1;2806  min-height: 0;2807  margin: 4px 0 0;2808}2809.peach-entry-body--new .peach-note-body {2810  margin: 8px -20px 0;2811}28122813/* Add.tsx body is a grid by default; swap to a flex column when a note is2814   active so the note body can stretch and pin the tags row to the bottom. */2815.peach-entry-body--new:has(.peach-note-body) {2816  display: flex;2817  flex-direction: column;2818}28192820/* Rich content element styles (editor + display) */2821.peach-note-editor-body h2,2822.peach-note-content h2 {2823  font-family: var(--font-display);2824  font-size: 20px;2825  font-weight: 600;2826  font-style: italic;2827  color: var(--peach-t0);2828  margin: 6px 0 2px;2829  line-height: 1.3;2830}2831.peach-note-editor-body ul,2832.peach-note-content ul {2833  padding-left: 18px;2834  margin: 3px 0;2835  list-style: disc;2836}2837.peach-note-editor-body ol,2838.peach-note-content ol {2839  padding-left: 18px;2840  margin: 3px 0;2841  list-style: decimal;2842}2843.peach-note-editor-body li,2844.peach-note-content li { margin: 2px 0; }2845.peach-note-editor-body hr,2846.peach-note-content hr {2847  border: none;2848  border-top: 1px solid var(--peach-t3);2849  margin: 10px 0;2850}28512852/* font size elements from execCommand */2853.peach-note-editor-body font[size="1"],2854.peach-note-content font[size="1"] { font-size: 11px; line-height: 1.6; }2855.peach-note-editor-body font[size="2"],2856.peach-note-content font[size="2"] { font-size: 13px; }2857.peach-note-editor-body font[size="3"],2858.peach-note-content font[size="3"] { font-size: 16px; }2859.peach-note-editor-body font[size="4"],2860.peach-note-content font[size="4"] { font-size: 20px; }2861.peach-note-editor-body font[size="5"],2862.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }28632864/* bold / italic inside the editor and note display */2865.peach-note-editor-body b, .peach-note-editor-body strong,2866.peach-note-content b, .peach-note-content strong { font-weight: 700; }2867.peach-note-editor-body em, .peach-note-editor-body i,2868.peach-note-content em, .peach-note-content i { font-style: italic; }28692870/* note display — rendered HTML, no pre-wrap */2871.peach-note-content {2872  overflow: auto;2873  max-height: 340px;2874  word-break: break-word;2875}28762877/* ── Note textarea ── */2878.peach-note-textarea {2879  width: 100%;2880  min-height: 180px;2881  max-height: 280px;2882  resize: vertical;2883  background: var(--peach-t4);2884  border: 1px solid var(--peach-t3);2885  border-radius: 8px;2886  padding: 10px 12px;2887  font-family: "IBM Plex Mono", monospace;2888  font-size: 12px;2889  line-height: 1.7;2890  color: var(--peach-t1);2891  outline: none;2892  transition: border-color 150ms ease;2893}28942895.peach-note-textarea:focus {2896  border-color: var(--peach-t2);2897}28982899.peach-note-char-count {2900  font-family: "IBM Plex Mono", monospace;2901  font-size: 9px;2902  color: var(--peach-t3);2903  text-align: right;2904  margin-top: 4px;2905  letter-spacing: 0.1em;2906}29072908/* ── Field input baseline ── */2909.peach-new-field-input {2910  width: 100%;2911  background: transparent;2912  border: none;2913  border-bottom: 1px solid var(--peach-t3);2914  padding: 4px 0;2915  color: var(--peach-t1);2916  font-family: "IBM Plex Mono", monospace;2917  font-size: 13px;2918  outline: none;2919  transition: border-color 150ms ease;2920}29212922.peach-new-field-input:focus {2923  border-bottom-color: var(--peach-t0);2924  color: var(--peach-t0);2925}29262927.peach-new-name-input {2928  width: 100%;2929  background: transparent;2930  border: none;2931  border-bottom: 1px solid var(--peach-t3);2932  padding: 6px 0;2933  font-family: var(--font-display);2934  font-style: italic;2935  font-size: 28px;2936  color: var(--peach-t0);2937  outline: none;2938  transition: border-color 150ms ease;2939}29402941.peach-new-name-input:focus {2942  border-bottom-color: var(--peach-t1);2943}29442945.peach-new-name-input::placeholder {2946  color: var(--peach-t2);2947  font-style: italic;2948}29492950.peach-new-field-input::placeholder {2951  color: var(--peach-t3);2952}29532954/* ── Demo entrance animation ── */2955#hd-shell {2956  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;2957}2958@keyframes hd-shell-enter {2959  from { opacity: 0; transform: scale(0.96) translateY(16px); }2960  to   { opacity: 1; transform: scale(1) translateY(0); }2961}29622963/* ── Keyframes ── */2964@keyframes peach-char-enter {2965  from { opacity: 0; transform: translateY(0.22em); }2966  to   { opacity: 1; transform: translateY(0); }2967}2968@keyframes peach-content-enter {2969  from { opacity: 0.96; transform: translateY(4px); }2970  to   { opacity: 1; transform: translateY(0); }2971}2972@keyframes peach-content-exit {2973  from { opacity: 1; transform: translateY(0); }2974  to   { opacity: 0.92; transform: translateY(-3px); }2975}2976@keyframes peach-screen-enter {2977  from { opacity: 0; transform: translateY(14px); }2978  to   { opacity: 1; transform: translateY(0); }2979}2980@keyframes peach-shell-fade-in {2981  from { opacity: 0; }2982  to   { opacity: 1; }2983}2984@keyframes peach-veil-in {2985  from { opacity: 0; }2986  to   { opacity: 1; }2987}2988@keyframes peach-lock-settle {2989  0%   { transform: scale(0.9); }2990  65%  { transform: scale(1.08); }2991  100% { transform: scale(1); }2992}2993@keyframes peach-copy-confirm {2994  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }2995  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); }2996}2997@keyframes peach-copy-retreat {2998  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); }2999  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3000}3001@keyframes peach-copy-flood {3002  from { opacity: 0; transform: scaleX(0.15); }3003  to   { opacity: 1; transform: scaleX(1); }3004}3005@keyframes peach-copy-icon-settle {3006  from  { transform: scale(0.84); }3007  70%   { transform: scale(1.08); }3008  to    { transform: scale(1); }3009}3010@keyframes peach-copy-sheen-retreat {3011  from { opacity: 1; transform: scaleX(1); }3012  to   { opacity: 0; transform: scaleX(0.15); }3013}3014@keyframes peach-copy-drain {3015  from { width: 100%; }3016  to   { width: 0; }3017}3018@keyframes peach-shake {3019  0%, 100% { transform: translateX(0); }3020  20%      { transform: translateX(-6px); }3021  40%      { transform: translateX(6px); }3022  60%      { transform: translateX(-4px); }3023  80%      { transform: translateX(4px); }3024}30253026@keyframes pip-pulse {3027  0% { transform: scale(1); }3028  40% { transform: scale(2.2); }3029  100% { transform: scale(1); }3030}303130323033/* ── Password generator ── */3034.peach-pwgen-body {3035  flex: 1; overflow-y: auto;3036  display: flex; flex-direction: column;3037}3038.peach-policy-badge {3039  display: flex; align-items: center;3040  padding: 6px 20px 0;3041  font-size: 10px; font-family: Inter, sans-serif;3042  color: var(--peach-t2); letter-spacing: 0.04em;3043}3044.peach-pwgen-display {3045  padding: 14px 20px 12px;3046  border-bottom: 1px solid var(--peach-t3);3047  display: flex; align-items: flex-start; gap: 10px;3048}3049.peach-pwgen-display-row {3050  display: flex;3051  align-items: flex-start;3052  gap: 8px;3053  padding-bottom: 8px;3054  border-bottom: 1px solid var(--peach-t3);3055}3056.peach-pwgen-output {3057  flex: 1; min-width: 0; margin: 0;3058  font-family: "IBM Plex Mono", monospace;3059  font-size: 13px; color: var(--peach-t0);3060  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3061  white-space: normal;3062  padding: 10px 12px;3063  background: var(--peach-t4);3064  border-radius: 6px;3065  min-height: 36px;3066}3067.peach-pwgen-output-display {3068  flex: 1;3069  min-width: 0;3070  margin: 0;3071  font-family: var(--font-display);3072  font-style: italic;3073  font-weight: 300;3074  font-size: 32px;3075  line-height: 1.05;3076  color: var(--peach-t0);3077  word-break: break-all;3078  overflow-wrap: break-word;3079  white-space: normal;3080  letter-spacing: 0.02em;3081}3082.peach-pwgen-display-actions {3083  display: flex;3084  flex-direction: column;3085  gap: 4px;3086  flex-shrink: 0;3087  margin-top: 2px;3088}3089.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3090.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3091.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3092.peach-pwgen-len-num {3093  font-family: "IBM Plex Mono", monospace;3094  font-size: 12px; color: var(--peach-accent);3095}3096.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3097.peach-pwgen-toggles { display: flex; flex-direction: column; }3098.peach-pwgen-charset-pills {3099  display: flex;3100  gap: 6px;3101  flex-wrap: wrap;3102}3103.peach-pwgen-pill {3104  padding: 4px 11px;3105  border-radius: 999px;3106  border: 1px solid var(--peach-t3);3107  background: transparent;3108  color: var(--peach-t2);3109  font-family: "IBM Plex Mono", monospace;3110  font-size: 9px;3111  letter-spacing: 0.08em;3112  cursor: pointer;3113  transition: all 150ms ease;3114}3115.peach-pwgen-pill.is-on {3116  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3117  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3118  color: var(--peach-accent);3119}3120.peach-pwgen-pill:not(.is-on):hover {3121  color: var(--peach-t1);3122  border-color: var(--peach-t2);3123}3124.peach-pwgen-use-btn {3125  width: 100%;3126  min-height: 34px;3127  border-radius: 8px;3128  margin-top: 2px;3129}3130.peach-pwgen-toggle-row {3131  display: flex; align-items: center; justify-content: space-between;3132  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3133}3134.peach-pwgen-toggle-row:last-child { border-bottom: none; }3135.peach-pwgen-toggle-label { font-size: 13px; color: var(--peach-t1); }31363137.peach-screen-prelock {3138  z-index: 10;3139}31403141.prelock-form {3142  display: grid;3143  gap: 12px;3144}31453146/* Peach popup should not expose native scrollbars on internal panels. */3147.peach-settings-body,3148.peach-new-body,3149.peach-pwgen-body,3150.lock-screen,3151.peach-import-preview {3152  scrollbar-width: none;3153  -ms-overflow-style: none;3154  overscroll-behavior: contain;3155}3156.peach-settings-body::-webkit-scrollbar,3157.peach-new-body::-webkit-scrollbar,3158.peach-pwgen-body::-webkit-scrollbar,3159.lock-screen::-webkit-scrollbar,3160.peach-import-preview::-webkit-scrollbar {3161  width: 0;3162  height: 0;3163  display: none;3164}31653166.lock-screen {3167  height: 100%;3168  min-height: 100%;3169  overflow-y: auto;3170  padding: 18px 18px 16px;3171  gap: 14px;3172  grid-template-rows: auto auto auto 1fr auto;3173  align-content: stretch;3174  position: relative;3175  isolation: isolate;3176}3177.peach-screen.lock-screen--vault-stage {3178  display: flex;3179  flex-direction: column;3180  justify-content: flex-start;3181  gap: 18px;3182  padding: 20px 18px 18px;3183  overflow: hidden;3184}3185.peach-screen.lock-screen--vault-stage .peach-lock-panel {3186  margin-top: 0;3187}3188.lock-screen--onboarding {3189  display: flex;3190  flex-direction: column;3191  gap: 12px;3192  justify-content: flex-start;3193}31943195.lock-screen::before {3196  content: "";3197  position: absolute;3198  inset: 12px 18px auto auto;3199  width: 160px;3200  height: 160px;3201  border-radius: 999px;3202  background:3203    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%);3204  filter: blur(6px);3205  opacity: 0.7;3206  pointer-events: none;3207  z-index: 0;3208}32093210.peach-lock-rune-string {3211  flex: 1;3212  display: flex;3213  align-items: center;3214  justify-content: center;3215  gap: 6px;3216  font-family: PeachScript, monospace;3217  font-size: 13px;3218  letter-spacing: 0.05em;3219  pointer-events: none;3220  user-select: none;3221  position: relative;3222  z-index: 1;3223}32243225.peach-lock-rune-string span {3226  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3227  text-shadow:3228    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3229    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3230  transition: color 0.9s ease, text-shadow 0.9s ease;3231}32323233.peach-lock-rune-string span.is-glowing {3234  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3235  text-shadow:3236    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3237    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3238}32393240.lock-screen-header {3241  display: flex;3242  align-items: center;3243  justify-content: space-between;3244  position: relative;3245  z-index: 1;3246}32473248.lock-password-input.shake {3249  animation: peach-shake 300ms ease-in-out;3250}32513252.peach-hint-error {3253  color: rgba(220, 80, 60, 0.92);3254}32553256.peach-onboarding-headline {3257  margin: 0;3258  font-family: var(--font-display);3259  font-size: 35px;3260  line-height: 0.88;3261  font-style: italic;3262  font-weight: 400;3263  max-width: 252px;3264}32653266.peach-lock-copy {3267  display: grid;3268  gap: 8px;3269  position: relative;3270  z-index: 1;3271}32723273.peach-lock-copy--onboarding {3274  gap: 10px;3275}32763277.peach-lock-hero {3278  position: relative;3279  z-index: 1;3280  display: grid;3281  gap: 8px;3282  min-height: 0;3283  padding: 4px 2px 0;3284  border: none;3285  border-radius: 0;3286  background: transparent;3287  box-shadow: none;3288}3289.peach-lock-hero-art {3290  position: absolute;3291  right: -8px;3292  top: -6px;3293  width: 120px;3294  height: 120px;3295  display: flex;3296  align-items: center;3297  justify-content: center;3298  pointer-events: none;3299  opacity: 0.12;3300  filter: saturate(0.9);3301}3302.peach-lock-hero-mark {3303  width: 100%;3304  height: 100%;3305}3306/* Peach body stays brand-peach across every accent — we don't want a3307   green or blue peach when sage/sky is selected. Leaf + stem keep the3308   sage tint because a real peach has a sage leaf. */3309.peach-lock-hero-mark path:nth-child(2),3310.peach-lock-hero-mark path:nth-child(3) {3311  stroke: rgba(123, 144, 96, 0.88);3312  fill: rgba(123, 144, 96, 0.88);3313}3314.peach-lock-hero > *:not(.peach-lock-hero-art) {3315  position: relative;3316  z-index: 1;3317}33183319.peach-lock-eyebrow {3320  display: inline-flex;3321  align-items: center;3322  width: fit-content;3323  padding: 4px 9px;3324  border-radius: 999px;3325  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3326  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3327  color: var(--peach-t0);3328  font-family: "IBM Plex Mono", monospace;3329  font-size: 8px;3330  letter-spacing: 0.18em;3331  text-transform: uppercase;3332}33333334.peach-lock-label-row {3335  display: flex;3336  align-items: center;3337  justify-content: space-between;3338  margin-bottom: 0;3339}33403341.peach-lock-reveal-btn {3342  display: inline-flex;3343  align-items: center;3344  gap: 4px;3345  background: none;3346  border: none;3347  cursor: pointer;3348  font-family: "IBM Plex Mono", monospace;3349  font-size: 9px;3350  letter-spacing: 0.06em;3351  color: var(--peach-t2);3352  padding: 2px 0;3353  transition: color 150ms ease;3354}33553356.peach-lock-reveal-btn:hover {3357  color: var(--peach-t1);3358}33593360.peach-lock-warning {3361  color: rgba(220, 80, 60, 0.85) !important;3362  line-height: 1.5;3363}33643365.peach-onboarding-cards {3366  display: grid;3367  gap: 8px;3368  position: relative;3369  z-index: 1;3370}33713372.peach-lock-panel {3373  position: relative;3374  z-index: 1;3375  display: grid;3376  gap: 9px;3377  padding: 14px 16px 15px;3378  border-radius: 18px;3379  border: 1px solid var(--peach-t3);3380  background:3381    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3382  box-shadow:3383    inset 0 1px 0 rgba(240, 232, 216, 0.04),3384    0 12px 28px rgba(0, 0, 0, 0.12);3385}33863387/* Glass surface — lock panel and settings groups */3388.peach-glass {3389  background: rgba(26, 20, 16, 0.65);3390  border: 1px solid rgba(255, 255, 255, 0.08);3391  border-radius: 12px;3392  backdrop-filter: blur(12px) saturate(1.4);3393  -webkit-backdrop-filter: blur(12px) saturate(1.4);3394}33953396@supports not (backdrop-filter: blur(1px)) {3397  .peach-glass {3398    background: rgba(26, 20, 16, 0.92);3399    border: 1px solid rgba(255, 255, 255, 0.10);3400    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3401  }3402}34033404.light .peach-glass,3405[data-theme="light"] .peach-glass {3406  background: rgba(253, 248, 244, 0.70);3407  border: 1px solid rgba(0, 0, 0, 0.07);3408  backdrop-filter: blur(12px) saturate(1.2);3409  -webkit-backdrop-filter: blur(12px) saturate(1.2);3410}34113412@supports not (backdrop-filter: blur(1px)) {3413  .light .peach-glass,3414  [data-theme="light"] .peach-glass {3415    background: rgba(253, 248, 244, 0.95);3416    border: 1px solid rgba(0, 0, 0, 0.09);3417  }3418}34193420/* Lock panel keeps its own border-radius over the generic glass token */3421.peach-lock-panel.peach-glass {3422  border-radius: 18px;3423  background: rgba(26, 20, 16, 0.65);3424  border: 1px solid rgba(255, 255, 255, 0.08);3425  box-shadow:3426    inset 0 1px 0 rgba(255, 255, 255, 0.05),3427    0 12px 28px rgba(0, 0, 0, 0.3);3428}34293430.light .peach-lock-panel.peach-glass,3431[data-theme="light"] .peach-lock-panel.peach-glass {3432  background: rgba(238, 227, 204, 0.75);3433  border: 1px solid rgba(34, 24, 9, 0.10);3434  box-shadow:3435    inset 0 1px 0 rgba(255, 255, 255, 0.5),3436    0 8px 24px rgba(80, 56, 32, 0.15);3437}34383439@supports not (backdrop-filter: blur(1px)) {3440  .peach-lock-panel.peach-glass {3441    background: rgba(26, 20, 16, 0.92);3442    box-shadow:3443      inset 0 1px 0 rgba(255, 255, 255, 0.05),3444      0 12px 28px rgba(0, 0, 0, 0.4);3445  }3446  .light .peach-lock-panel.peach-glass,3447  [data-theme="light"] .peach-lock-panel.peach-glass {3448    background: rgba(238, 227, 204, 0.96);3449  }3450}34513452.peach-lock-panel--secondary {3453  gap: 12px;3454}34553456.peach-lock-panel-header {3457  display: flex;3458  align-items: baseline;3459  justify-content: space-between;3460  gap: 12px;3461}34623463.peach-lock-option-grid {3464  display: grid;3465  gap: 10px;3466}34673468.peach-lock-option {3469  width: 100%;3470  display: grid;3471  gap: 6px;3472  padding: 14px 15px;3473  border-radius: 16px;3474  border: 1px solid rgba(240, 232, 216, 0.08);3475  background: rgba(240, 232, 216, 0.02);3476  color: var(--peach-t0);3477  text-align: left;3478  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3479}34803481.peach-lock-option:hover {3482  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3483  background: rgba(240, 232, 216, 0.04);3484  transform: translateY(-1px);3485}34863487.peach-lock-option-title {3488  font-size: 12px;3489  color: var(--peach-t0);3490}34913492.peach-lock-option-copy {3493  font-size: 11px;3494  line-height: 1.55;3495  color: var(--peach-t1);3496}34973498.peach-onboarding-stack {3499  margin-top: 2px;3500}3501.peach-lock-panel-footer {3502  display: grid;3503  gap: 6px;3504  margin-top: 2px;3505  padding-top: 10px;3506  border-top: 1px solid rgba(240, 232, 216, 0.06);3507}35083509/* Restore picker panel — method option cards */3510.peach-lock-panel--restore {3511  gap: 10px;3512}3513.peach-lock-option--history {3514  border-color: rgba(240, 232, 216, 0.06);3515  opacity: 0.85;3516}35173518/* Snapshot restore panel */3519.peach-snapshot-panel {3520  gap: 10px;3521  overflow-y: auto;3522  max-height: 340px;3523}3524.peach-snapshot-list {3525  display: flex;3526  flex-direction: column;3527  gap: 4px;3528}3529.peach-snapshot-row {3530  display: flex;3531  align-items: center;3532  justify-content: space-between;3533  width: 100%;3534  padding: 8px 10px;3535  border-radius: 8px;3536  border: 1px solid rgba(240, 232, 216, 0.07);3537  background: transparent;3538  cursor: pointer;3539  transition: border-color 120ms, background 120ms;3540  text-align: left;3541  gap: 8px;3542}3543.peach-snapshot-row:hover {3544  border-color: rgba(240, 232, 216, 0.14);3545  background: rgba(240, 232, 216, 0.03);3546}3547.peach-snapshot-row.is-selected {3548  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3549  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);3550}3551.peach-snapshot-time {3552  font-size: 11.5px;3553  color: var(--peach-t0);3554  flex: 1;3555}3556.peach-snapshot-count {3557  font-family: "IBM Plex Mono", monospace;3558  font-size: 10px;3559  color: var(--peach-t2);3560  flex-shrink: 0;3561}3562.peach-snapshot-confirm {3563  display: flex;3564  flex-direction: column;3565  gap: 8px;3566  padding-top: 10px;3567  border-top: 1px solid rgba(240, 232, 216, 0.06);3568}3569.peach-snapshot-warning {3570  display: flex;3571  align-items: flex-start;3572  gap: 6px;3573  font-size: 10.5px;3574  color: rgba(220, 80, 60, 0.85);3575  line-height: 1.55;3576}3577.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }3578.peach-snapshot-confirm-row {3579  display: flex;3580  gap: 6px;3581  align-items: center;3582}3583.peach-snapshot-restore-btn {3584  width: 100%;3585}3586.peach-lock-hero--unlock .peach-lock-hero-art {3587  width: 112px;3588  height: 112px;3589  right: 0;3590  top: 2px;3591  opacity: 0.1;3592}35933594.peach-card {3595  border: 1px solid var(--peach-t3);3596  border-radius: 18px;3597  background:3598    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);3599  box-shadow:3600    inset 0 0 0 1px var(--peach-border-accent),3601    inset 0 1px 0 rgba(240, 232, 216, 0.04),3602    0 12px 32px rgba(0, 0, 0, 0.14);3603  overflow: hidden;3604}36053606.peach-card-active {3607  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);3608  box-shadow:3609    inset 0 1px 0 rgba(240, 232, 216, 0.05),3610    0 16px 38px rgba(0, 0, 0, 0.18),3611    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);3612}36133614.peach-card-disabled {3615  opacity: 0.72;3616}36173618.peach-card-header {3619  width: 100%;3620  padding: 13px 16px 11px;3621  background: transparent;3622  color: var(--peach-t0);3623  display: flex;3624  justify-content: space-between;3625  align-items: center;3626  text-align: left;3627  font-size: 12px;3628}36293630.peach-card-body {3631  padding: 0 16px 16px;3632  display: grid;3633  gap: 9px;3634}36353636.peach-card-tag {3637  color: var(--peach-t2);3638  font-family: "IBM Plex Mono", monospace;3639  font-size: 9px;3640  letter-spacing: 0.12em;3641  text-transform: uppercase;3642}36433644.peach-empty-copy {3645  display: grid;3646  gap: 6px;3647  color: var(--peach-t1);3648  font-size: 13px;3649}36503651.peach-lock-submit {3652  width: 100%;3653  box-shadow:3654    0 1px 0 rgba(255,255,255,0.10) inset,3655    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),3656    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),3657    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);3658}36593660.peach-lock-secondary {3661  width: 100%;3662  border-color: var(--peach-t3);3663  background: rgba(240, 232, 216, 0.02);3664}36653666.peach-lock-secondary:hover {3667  background: rgba(240, 232, 216, 0.04);3668}36693670.peach-lock-note {3671  max-width: none;3672  line-height: 1.55;3673  margin: 0;3674}36753676.peach-overlay-action {3677  font-size: 10px;3678  padding: 4px 8px;3679  letter-spacing: 0.06em;3680  min-width: 44px;3681  text-align: center;3682}36833684.peach-overlay-spacer {3685  width: 32px;3686}36873688.peach-inline-action {3689  flex-shrink: 0;3690  font-size: 9px;3691  letter-spacing: 0.1em;3692  text-transform: uppercase;3693  padding: 4px 7px;3694}3695.peach-password-toggle-btn {3696  display: inline-flex;3697  align-items: center;3698  justify-content: center;3699  min-width: 30px;3700  min-height: 26px;3701  padding: 0 7px;3702  border: 1px solid var(--peach-t3);3703  border-radius: 999px;3704  background: rgba(240, 232, 216, 0.04);3705  color: var(--peach-t2);3706  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;3707}3708.peach-password-toggle-btn:hover {3709  border-color: var(--peach-t2);3710  color: var(--peach-t0);3711  background: rgba(240, 232, 216, 0.06);3712}37133714.peach-new-textarea {3715  width: 100%;3716  min-height: 88px;3717  resize: vertical;3718  border: 0;3719  outline: none;3720  background: transparent;3721  color: var(--peach-t1);3722  font-family: "IBM Plex Mono", monospace;3723  font-size: 12px;3724  line-height: 1.65;3725  caret-color: var(--peach-accent);3726}37273728.peach-new-textarea::placeholder {3729  color: var(--peach-t2);3730  opacity: 0.7;3731}37323733.peach-settings-actions {3734  display: grid;3735  gap: 8px;3736}37373738.peach-sync-section-label {3739  font-size: 11px;3740  color: var(--peach-t2);3741  text-transform: uppercase;3742  letter-spacing: 0.05em;3743}37443745.peach-sync-device-row {3746  display: flex;3747  justify-content: space-between;3748  align-items: center;3749  padding: 6px 0;3750  border-bottom: 1px solid var(--peach-t3);3751}37523753.peach-sync-device-info {3754  display: flex;3755  flex-direction: column;3756  gap: 2px;3757}37583759.peach-sync-device-name {3760  font-size: 13px;3761  color: var(--peach-t0);3762}37633764.peach-sync-device-meta {3765  font-size: 11px;3766  color: var(--peach-t2);3767}37683769.peach-sync-status-dot {3770  display: inline-block;3771  width: 8px;3772  height: 8px;3773  border-radius: 50%;3774  vertical-align: middle;3775}37763777.peach-sync-remove-btn {3778  color: var(--peach-breach);3779}37803781.peach-sync-hero-icon {3782  color: var(--peach-t1);3783  opacity: 0.85;3784}37853786.peach-import-preview {3787  margin-bottom: 12px;3788  max-height: 152px;3789  overflow-y: auto;3790  border: 1px solid var(--peach-t3);3791  border-radius: 10px;3792  padding: 8px 10px;3793  display: grid;3794  gap: 8px;3795  background: rgba(240, 232, 216, 0.02);3796}37973798.peach-import-preview-row {3799  display: flex;3800  justify-content: space-between;3801  gap: 10px;3802  font-size: 11px;3803  color: var(--peach-t1);3804}38053806.peach-import-preview-title {3807  color: var(--peach-t0);3808  flex: 1;3809  min-width: 0;3810  overflow: hidden;3811  text-overflow: ellipsis;3812  white-space: nowrap;3813}38143815.peach-import-preview-meta {3816  color: var(--peach-t2);3817  flex-shrink: 0;3818  max-width: 42%;3819  overflow: hidden;3820  text-overflow: ellipsis;3821  white-space: nowrap;3822}38233824.peach-import-preview-more {3825  color: var(--peach-t2);3826  font-size: 10px;3827}38283829.peach-restore-copy {3830  margin: 0;3831  color: var(--peach-t1);3832  font-size: 11px;3833  line-height: 1.6;3834}38353836.peach-restore-warning {3837  padding: 10px 12px;3838  border-radius: 12px;3839  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);3840  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);3841  color: var(--peach-t0);3842  font-size: 11px;3843  line-height: 1.55;3844}38453846.peach-provider-chips {3847  display: flex;3848  flex-wrap: wrap;3849  gap: 6px;3850}38513852.peach-provider-chip {3853  display: inline-flex;3854  align-items: center;3855  padding: 5px 8px;3856  border-radius: 999px;3857  border: 1px solid var(--peach-t3);3858  background: rgba(240, 232, 216, 0.02);3859  color: var(--peach-t1);3860  font-family: "IBM Plex Mono", monospace;3861  font-size: 8px;3862  letter-spacing: 0.08em;3863  text-transform: uppercase;3864}38653866.peach-restore-file,3867.peach-restore-input {3868  width: 100%;3869  border-radius: 10px;3870  border: 1px solid var(--peach-t3);3871  background: var(--peach-s2);3872  color: var(--peach-t0);3873  font-size: 12px;3874}38753876.peach-restore-file {3877  padding: 9px 10px;3878}38793880.peach-restore-file::file-selector-button {3881  margin-right: 10px;3882  padding: 7px 10px;3883  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);3884  border-radius: 999px;3885  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3886  color: var(--peach-t0);3887  font-size: 10px;3888  letter-spacing: 0.08em;3889  text-transform: uppercase;3890  cursor: pointer;3891}38923893.peach-restore-input {3894  padding: 10px 12px;3895}38963897.peach-auth-grid {3898  display: grid;3899  gap: 10px;3900}39013902.peach-import-summary {3903  color: var(--peach-t1);3904  font-size: 12px;3905  line-height: 1.6;3906  margin-bottom: 12px;3907}39083909.peach-restore-error {3910  color: rgba(220, 80, 60, 0.95);3911  font-size: 12px;3912  line-height: 1.55;3913}39143915.peach-passkey-card {3916  max-width: 400px;3917  margin: auto 16px;3918  align-self: center;3919  width: calc(100% - 32px);3920}39213922/* Center the approval card vertically inside the overlay-view (which sets3923 * flex-direction: column without justify-content). Without this, the card3924 * sits at the top with a tall empty band below — looks unfinished on the3925 * 320px popup. */3926.peach-overlay-view:has(.peach-passkey-card) {3927  justify-content: center;3928}39293930.peach-pro-badge {3931  padding: 2px 6px;3932  border-radius: 999px;3933  font-family: var(--font-ui);3934  font-size: 10px;3935  letter-spacing: 0.08em;3936  text-transform: uppercase;3937  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);3938  color: var(--peach-accent);3939}39403941/* ── Shortcuts rebind table ─────────────────────────────────── */3942.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }3943.peach-shortcut-row {3944  display: flex;3945  align-items: center;3946  gap: 10px;3947  padding: 6px 0;3948}3949.peach-shortcut-row-label {3950  flex: 1;3951  font-size: 12px;3952  color: var(--peach-t0);3953}3954.peach-shortcut-chip {3955  min-width: 64px;3956  padding: 4px 10px;3957  border-radius: 6px;3958  border: 1px solid var(--peach-t3);3959  background: var(--peach-input-bg, var(--surface-card));3960  color: var(--peach-t0);3961  font-family: var(--font-mono);3962  font-size: 11px;3963  letter-spacing: 0.04em;3964  cursor: pointer;3965  text-align: center;3966  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;3967}3968.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }3969.peach-shortcut-chip.is-custom {3970  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3971  color: var(--peach-accent);3972}3973.peach-shortcut-chip.is-capturing {3974  border-color: var(--peach-accent);3975  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);3976  color: var(--peach-accent);3977  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;3978}3979@keyframes peach-shortcut-capture-pulse {3980  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }3981  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }3982}3983.peach-shortcut-reset {3984  background: transparent;3985  border: none;3986  cursor: pointer;3987  color: var(--peach-t2);3988  padding: 4px 6px;3989  border-radius: 5px;3990  font-size: 14px;3991  line-height: 1;3992  transition: color 120ms ease, background 120ms ease;3993}3994.peach-shortcut-reset:hover {3995  color: var(--peach-t0);3996  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);3997}3998.peach-shortcuts-conflict {3999  margin: 4px 0 0;4000  padding: 8px 10px;4001  border-radius: 7px;4002  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4003  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4004  font-family: var(--font-mono);4005  font-size: 11px;4006  color: var(--peach-t0);4007}40084009/* ── Help dialog overlay (? to open) ────────────────────────── */4010.peach-shortcuts-help-backdrop {4011  position: fixed;4012  inset: 0;4013  background: rgba(0, 0, 0, 0.55);4014  backdrop-filter: blur(2px);4015  display: flex;4016  align-items: center;4017  justify-content: center;4018  z-index: 1000;4019  animation: peach-help-fade-in 140ms ease forwards;4020}4021@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4022.peach-shortcuts-help-card {4023  width: min(320px, 92vw);4024  max-height: 80vh;4025  overflow-y: auto;4026  border-radius: 14px;4027  border: 1px solid var(--peach-t3);4028  background: var(--peach-bg);4029  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4030  padding: 16px 18px 18px;4031  display: flex;4032  flex-direction: column;4033  gap: 12px;4034}4035.peach-shortcuts-help-head {4036  display: flex; align-items: center; justify-content: space-between;4037}4038.peach-shortcuts-help-head h3 {4039  margin: 0;4040  font-family: var(--font-display);4041  font-style: italic;4042  font-weight: 400;4043  font-size: 22px;4044  color: var(--peach-t0);4045}4046.peach-shortcuts-help-close {4047  background: transparent;4048  border: none;4049  color: var(--peach-t2);4050  cursor: pointer;4051  font-size: 14px;4052  padding: 4px 8px;4053  border-radius: 5px;4054}4055.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4056.peach-shortcuts-help-body ul {4057  list-style: none; padding: 0; margin: 4px 0 12px;4058  display: grid; gap: 8px;4059}4060.peach-shortcuts-help-body li {4061  display: flex; align-items: center; justify-content: space-between; gap: 12px;4062  font-size: 12px; color: var(--peach-t0);4063}4064.peach-shortcuts-help-body kbd {4065  font-family: var(--font-mono);4066  font-size: 11px;4067  padding: 3px 8px;4068  border-radius: 6px;4069  background: var(--surface-card);4070  border: 1px solid var(--peach-t3);4071  color: var(--peach-accent);4072  letter-spacing: 0.04em;4073}40744075/* ── Pro promo on Account screen ────────────────────────────── */4076.peach-pro-promo {4077  position: relative;4078  border-radius: 14px;4079  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4080  background:4081    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4082    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4083    var(--surface-card);4084  overflow: hidden;4085  margin-bottom: 14px;4086}4087.peach-pro-promo-glow {4088  position: absolute;4089  inset: -40% -20% auto auto;4090  width: 220px; height: 220px;4091  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4092  pointer-events: none;4093  filter: blur(8px);4094}4095.peach-pro-promo-inner {4096  position: relative;4097  padding: 18px 18px 16px;4098}4099.peach-pro-promo-title {4100  font-family: var(--font-display);4101  font-style: italic;4102  font-weight: 400;4103  font-size: 28px;4104  line-height: 1;4105  letter-spacing: -0.005em;4106  color: var(--peach-t0);4107  margin: 0 0 4px;4108}4109.peach-pro-promo-tagline {4110  font-family: var(--font-mono);4111  font-size: 10px;4112  letter-spacing: 0.06em;4113  color: var(--peach-t2);4114  margin: 0 0 14px;4115}4116.peach-pro-promo-list {4117  list-style: none;4118  margin: 0 0 16px;4119  padding: 0;4120  display: grid;4121  gap: 9px;4122}4123.peach-pro-promo-list li {4124  display: flex;4125  align-items: flex-start;4126  gap: 9px;4127  font-size: 12px;4128  color: var(--peach-t1);4129  line-height: 1.4;4130}4131.peach-pro-promo-list svg {4132  width: 14px;4133  height: 14px;4134  flex-shrink: 0;4135  color: var(--peach-accent);4136  margin-top: 2px;4137}4138.peach-pro-promo-list span {4139  color: var(--peach-t0);4140}4141.peach-pro-promo-cta {4142  width: 100%;4143  background: var(--peach-accent);4144  color: #fff;4145  border: none;4146  padding: 9px 12px;4147  border-radius: 9px;4148  font-size: 12px;4149  font-weight: 500;4150  font-family: var(--font-ui);4151  letter-spacing: 0.02em;4152  text-decoration: none;4153  display: inline-flex;4154  align-items: center;4155  justify-content: center;4156  cursor: pointer;4157  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4158  box-shadow: 0 2px 16px var(--peach-glow);4159}4160.peach-pro-promo-cta:hover {4161  filter: brightness(1.07);4162  box-shadow: 0 4px 24px var(--peach-glow);4163  transform: translateY(-1px);4164}4165.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }41664167.peach-pro-or-divider {4168  display: flex;4169  align-items: center;4170  gap: 10px;4171  margin: 4px 0 12px;4172  font-family: var(--font-mono);4173  font-size: 10px;4174  letter-spacing: 0.06em;4175  color: var(--peach-t2);4176  text-transform: uppercase;4177}4178.peach-pro-or-divider::before,4179.peach-pro-or-divider::after {4180  content: "";4181  flex: 1;4182  height: 1px;4183  background: var(--peach-t3);4184}41854186.peach-loading {4187  position: absolute;4188  inset: 0;4189  display: flex;4190  align-items: center;4191  justify-content: center;4192  background: var(--bg);4193  animation: peach-loading-pulse 1.2s ease-in-out infinite;4194}41954196@keyframes peach-loading-pulse {4197  0%, 100% { opacity: 0.6; }4198  50% { opacity: 1; }4199}42004201/* ── Health Dashboard ─────────────────────────────────────────────────── */4202.peach-health-body {4203  flex: 1;4204  overflow-y: auto;4205  display: flex;4206  flex-direction: column;4207  /* Hide the platform scrollbar — every other scrollable surface in the4208   * popup hides it; the Health view was the one outlier and it ruined the4209   * polish. Behavior unchanged, just no rail rendered. */4210  scrollbar-width: none;4211  -ms-overflow-style: none;4212}4213.peach-health-body::-webkit-scrollbar { display: none; }42144215/* Loading skeleton for the remediation queue — shown while the background4216 * computes the advanced health report on Pro vaults. Shimmer + pulse so the4217 * view doesn't read as "empty/broken" during the (sometimes multi-second)4218 * scan. */4219.peach-health-skeleton {4220  display: flex;4221  flex-direction: column;4222  gap: 10px;4223  padding: 14px 16px;4224}42254226.peach-health-skeleton-head {4227  display: flex;4228  align-items: center;4229  justify-content: space-between;4230  margin-bottom: 4px;4231}42324233.peach-health-skeleton-title {4234  font-family: "IBM Plex Mono", monospace;4235  font-size: 9px;4236  letter-spacing: 0.16em;4237  text-transform: uppercase;4238  color: var(--peach-accent);4239  opacity: 0.85;4240}42414242.peach-health-skeleton-meta {4243  font-family: "IBM Plex Mono", monospace;4244  font-size: 10px;4245  color: var(--peach-t2);4246  display: inline-flex;4247  align-items: center;4248  gap: 6px;4249}42504251.peach-health-skeleton-dot {4252  width: 6px;4253  height: 6px;4254  border-radius: 50%;4255  background: var(--peach-accent);4256  animation: peach-health-skeleton-pulse 1.2s ease-in-out infinite;4257}42584259.peach-health-skeleton-row {4260  display: flex;4261  align-items: center;4262  gap: 12px;4263  padding: 12px;4264  border-radius: 10px;4265  background: rgba(0, 0, 0, 0.18);4266  animation: peach-health-skeleton-pulse 1.6s ease-in-out infinite;4267}42684269.peach-health-skeleton-row:nth-child(2) { animation-delay: 0.10s; }4270.peach-health-skeleton-row:nth-child(3) { animation-delay: 0.20s; }4271.peach-health-skeleton-row:nth-child(4) { animation-delay: 0.30s; }42724273.peach-health-skeleton-bar {4274  height: 10px;4275  border-radius: 4px;4276  background: linear-gradient(4277    90deg,4278    rgba(240, 232, 216, 0.04) 0%,4279    rgba(240, 232, 216, 0.10) 50%,4280    rgba(240, 232, 216, 0.04) 100%4281  );4282  background-size: 240% 100%;4283  animation: peach-health-skeleton-shimmer 1.6s ease-in-out infinite;4284}42854286.peach-health-skeleton-bar--name { width: 55%; }4287.peach-health-skeleton-bar--meta { width: 40%; height: 7px; opacity: 0.6; margin-top: 6px; }4288.peach-health-skeleton-bar--cta { width: 90px; height: 26px; border-radius: 6px; flex-shrink: 0; margin-left: auto; }42894290.peach-health-skeleton-row > div:first-child {4291  flex: 1;4292  min-width: 0;4293}42944295@keyframes peach-health-skeleton-pulse {4296  0%, 100% { opacity: 0.55; }4297  50%      { opacity: 1; }4298}42994300@keyframes peach-health-skeleton-shimmer {4301  0%   { background-position: 200% 50%; }4302  100% { background-position: -100% 50%; }4303}43044305[data-motion="reduce"] .peach-health-skeleton-row,4306[data-motion="reduce"] .peach-health-skeleton-bar,4307[data-motion="reduce"] .peach-health-skeleton-dot {4308  animation: none;4309}43104311.peach-health-summary {4312  padding: 10px 16px 6px;4313  font-family: "IBM Plex Mono", monospace;4314  font-size: 11px;4315}4316.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4317.peach-health-summary-ok { color: var(--peach-t2); }43184319.peach-health-check-row {4320  padding: 0 16px 10px;4321}4322.peach-health-check-btn {4323  width: 100%;4324  display: flex;4325  align-items: center;4326  justify-content: center;4327}43284329.peach-health-sections {4330  flex: 1;4331  display: flex;4332  flex-direction: column;4333}43344335.peach-health-section {4336  border-bottom: 1px solid var(--peach-t3);4337}43384339.peach-health-section-header {4340  width: 100%;4341  display: flex;4342  align-items: center;4343  justify-content: space-between;4344  padding: 9px 16px;4345  background: transparent;4346  cursor: pointer;4347  color: var(--peach-t0);4348}43494350.peach-health-section-title-row {4351  display: flex;4352  align-items: center;4353  gap: 8px;4354}43554356.peach-health-count-badge {4357  display: inline-flex;4358  align-items: center;4359  justify-content: center;4360  min-width: 20px;4361  height: 18px;4362  padding: 0 5px;4363  border-radius: 999px;4364  background: rgba(220,80,60,0.15);4365  border: 1px solid rgba(220,80,60,0.25);4366  font-family: "IBM Plex Mono", monospace;4367  font-size: 9px;4368  color: rgba(220,80,60,0.9);4369}43704371.peach-health-section-title {4372  font-family: "IBM Plex Mono", monospace;4373  font-size: 11px;4374  text-transform: uppercase;4375  letter-spacing: 0.1em;4376  color: var(--peach-t1);4377}43784379.peach-health-chevron {4380  color: var(--peach-t2);4381  transition: transform 200ms ease;4382  flex-shrink: 0;4383}4384.peach-health-chevron.is-expanded {4385  transform: rotate(180deg);4386}43874388.peach-health-section-body {4389  padding: 0 16px 10px;4390  display: flex;4391  flex-direction: column;4392  gap: 4px;4393}43944395.peach-health-row {4396  display: flex;4397  align-items: flex-start;4398  justify-content: space-between;4399  gap: 8px;4400  padding: 6px 8px;4401  border-radius: 8px;4402  background: rgba(240,232,216,0.02);4403}44044405.peach-health-row-info {4406  flex: 1;4407  min-width: 0;4408  display: flex;4409  flex-direction: column;4410  gap: 2px;4411}44124413.peach-health-row-name {4414  font-family: var(--font-display);4415  font-size: 15px;4416  font-style: italic;4417  font-weight: 400;4418  color: var(--peach-t0);4419  white-space: nowrap;4420  overflow: hidden;4421  text-overflow: ellipsis;4422}44234424.peach-health-row-meta {4425  font-family: "IBM Plex Mono", monospace;4426  font-size: 9px;4427  color: var(--peach-t2);4428  letter-spacing: 0.05em;4429}44304431.peach-health-fix-btn {4432  font-size: 9px;4433  letter-spacing: 0.08em;4434  text-transform: uppercase;4435  padding: 4px 7px;4436  flex-shrink: 0;4437  display: flex;4438  align-items: center;4439}44404441.peach-health-empty {4442  font-family: "IBM Plex Mono", monospace;4443  font-size: 10px;4444  color: var(--peach-t2);4445  padding: 6px 0;4446}44474448.peach-health-loading {4449  font-family: "IBM Plex Mono", monospace;4450  font-size: 10px;4451  color: var(--peach-t2);4452  padding: 6px 0;4453  display: flex;4454  align-items: center;4455  gap: 6px;4456}44574458.peach-health-loading::before {4459  content: "";4460  width: 10px;4461  height: 10px;4462  border: 1.5px solid var(--peach-t3);4463  border-top-color: var(--peach-accent);4464  border-radius: 50%;4465  animation: peach-spin 600ms linear infinite;4466}44674468@keyframes peach-spin {4469  to { transform: rotate(360deg); }4470}44714472.peach-spinner {4473  width: 32px;4474  height: 32px;4475  border: 2px solid var(--peach-s2);4476  border-top-color: var(--peach-accent);4477  border-radius: 50%;4478  margin: 0 auto 16px;4479  animation: peach-spin 0.8s linear infinite;4480}44814482.peach-progress-screen {4483  text-align: center;4484  padding: 32px 16px;4485}44864487.peach-progress-screen-title {4488  font-size: 13px;4489  color: var(--peach-t0);4490  margin-bottom: 16px;4491}44924493.peach-progress-screen-stage {4494  font-size: 11px;4495  color: var(--peach-t2);4496  min-height: 14px;4497}44984499.peach-progress-screen-note {4500  font-size: 10px;4501  color: var(--peach-t2);4502  margin-top: 8px;4503}45044505.peach-pairing-body {4506  flex: 1;4507  overflow-y: auto;4508  display: flex;4509  flex-direction: column;4510}45114512.peach-pairing-content {4513  flex: 1;4514  display: flex;4515  flex-direction: column;4516  align-items: center;4517  justify-content: center;4518  gap: 14px;4519  padding: 28px 20px;4520  text-align: center;4521}45224523.peach-pairing-headline {4524  font-family: var(--font-display);4525  font-style: italic;4526  font-weight: 300;4527  font-size: 28px;4528  color: var(--peach-t0);4529  margin: 0;4530  line-height: 1;4531}45324533.peach-pairing-subline {4534  font-size: 12px;4535  color: var(--peach-t2);4536  max-width: 220px;4537  line-height: 1.5;4538  margin: 0;4539}45404541.peach-pairing-subline--center {4542  text-align: center;4543}45444545.peach-pairing-code-display {4546  display: flex;4547  gap: 6px;4548}45494550.peach-pairing-code-digit {4551  display: flex;4552  align-items: center;4553  justify-content: center;4554  width: 36px;4555  height: 48px;4556  background: var(--peach-s2);4557  border: 1px solid var(--peach-t3);4558  border-radius: 6px;4559  font-family: var(--font-mono);4560  font-size: 22px;4561  color: var(--peach-t0);4562  letter-spacing: 0;4563}45644565.peach-pairing-countdown-ring {4566  position: relative;4567  display: inline-flex;4568  align-items: center;4569  justify-content: center;4570}45714572.peach-pairing-countdown-num {4573  position: absolute;4574  font-family: var(--font-mono);4575  font-size: 14px;4576  color: var(--peach-t1);4577}45784579.peach-pairing-ring-track {4580  fill: none;4581  stroke: var(--peach-t3);4582  stroke-width: 2;4583}45844585.peach-pairing-ring-progress {4586  fill: none;4587  stroke: var(--peach-accent);4588  stroke-width: 2;4589  stroke-linecap: round;4590  transform: rotate(-90deg);4591  transform-origin: 50% 50%;4592  transition: stroke-dashoffset 0.5s linear;4593}45944595.peach-pairing-code-inputs {4596  display: flex;4597  gap: 8px;4598}45994600.peach-pairing-code-box {4601  width: 36px;4602  height: 48px;4603  text-align: center;4604  background: var(--peach-s2);4605  border: 1px solid var(--peach-t3);4606  border-radius: 6px;4607  font-family: var(--font-mono);4608  font-size: 20px;4609  color: var(--peach-t0);4610  outline: none;4611  transition: border-color 120ms ease;4612}46134614.peach-pairing-code-box:focus {4615  border-color: var(--peach-accent);4616}46174618.peach-pairing-code-box.has-error {4619  border-color: rgba(220, 80, 60, 0.45);4620}46214622.peach-pairing-status {4623  display: flex;4624  align-items: center;4625  gap: 8px;4626  margin: 0;4627  font-size: 12px;4628  color: var(--peach-t1);4629}46304631.peach-pairing-error {4632  margin: 0;4633  font-size: 11px;4634  color: var(--peach-breach);4635}46364637.peach-pairing-error-msg {4638  color: var(--peach-t1);4639}46404641.peach-pairing-spinner {4642  width: 12px;4643  height: 12px;4644  border: 1.5px solid var(--peach-t3);4645  border-top-color: var(--peach-accent);4646  border-radius: 50%;4647  animation: peach-spin 0.8s linear infinite;4648}46494650.peach-pairing-success-icon,4651.peach-pairing-error-icon,4652.peach-pairing-hero {4653  display: inline-flex;4654  align-items: center;4655  justify-content: center;4656}46574658/* Tag chips */4659.peach-tag-chip {4660  display: inline-flex;4661  align-items: center;4662  gap: 4px;4663  padding: 3px 8px;4664  border-radius: 999px;4665  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4666  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4667  color: var(--peach-t0);4668  font-family: "IBM Plex Mono", monospace;4669  font-size: 10px;4670  letter-spacing: 0.04em;4671}46724673.peach-tag-chip-remove {4674  background: transparent;4675  border: none;4676  color: inherit;4677  opacity: 0.6;4678  cursor: pointer;4679  padding: 0;4680  font-size: 12px;4681  line-height: 1;4682}46834684.peach-tag-chip-remove:hover {4685  opacity: 1;4686}46874688/* Tag input */4689.peach-tag-input-wrap {4690  border-bottom: 1px solid var(--peach-t3);4691}46924693.peach-tag-suggestions {4694  display: flex;4695  flex-wrap: wrap;4696  gap: 4px;4697  padding: 6px 0;4698}46994700.peach-tag-suggestion {4701  padding: 2px 8px;4702  border-radius: 999px;4703  border: 1px solid var(--peach-t3);4704  background: var(--peach-s2);4705  color: var(--peach-t1);4706  font-family: "IBM Plex Mono", monospace;4707  font-size: 10px;4708  cursor: pointer;4709  transition: border-color 80ms ease, background 80ms ease;4710}47114712.peach-tag-suggestion:hover {4713  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4714  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4715}47164717/* Tag filter strip */4718.peach-tag-filter-strip {4719  border-bottom: 1px solid var(--peach-t3);4720  flex-shrink: 0;4721}47224723.peach-tag-filter-chip {4724  display: inline-flex;4725  align-items: center;4726  padding: 4px 10px;4727  border-radius: 999px;4728  border: 1px solid var(--peach-t3);4729  background: transparent;4730  color: var(--peach-t2);4731  font-family: "IBM Plex Mono", monospace;4732  font-size: 9px;4733  letter-spacing: 0.06em;4734  text-transform: uppercase;4735  cursor: pointer;4736  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;4737  white-space: nowrap;4738}47394740.peach-tag-filter-chip:hover {4741  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4742  color: var(--peach-t1);4743}47444745.peach-tag-filter-chip.is-selected {4746  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);4747  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);4748  color: var(--peach-t0);4749}47504751/* ─────────────────────────────────────────────────────────────────────────4752   v1.4.12 additions4753   ─────────────────────────────────────────────────────────────────────── */47544755/* Sort bar */4756.peach-sort-bar {4757  display: flex;4758  align-items: center;4759  gap: 4px;4760  padding: 5px 12px;4761  border-bottom: 1px solid var(--peach-t3);4762  flex-shrink: 0;4763  overflow-x: auto;4764  scrollbar-width: none;4765}47664767.peach-sort-btn {4768  padding: 2px 9px;4769  border-radius: 999px;4770  border: 1px solid transparent;4771  background: transparent;4772  color: var(--peach-t2);4773  font-family: "IBM Plex Mono", monospace;4774  font-size: 9px;4775  letter-spacing: 0.07em;4776  text-transform: uppercase;4777  cursor: pointer;4778  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;4779  white-space: nowrap;4780}47814782.peach-sort-btn:hover {4783  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);4784  color: var(--peach-t1);4785}47864787.peach-sort-btn.is-active {4788  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);4789  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);4790  color: var(--peach-t0);4791}47924793.peach-sort-domain-hint {4794  margin-left: auto;4795  font-family: "IBM Plex Mono", monospace;4796  font-size: 9px;4797  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);4798  white-space: nowrap;4799  overflow: hidden;4800  text-overflow: ellipsis;4801  max-width: 110px;4802}48034804/* Tab-match badge on entry rows */4805.peach-tab-match-badge {4806  display: inline-block;4807  width: 6px;4808  height: 6px;4809  border-radius: 50%;4810  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);4811  margin-left: 5px;4812  vertical-align: middle;4813  flex-shrink: 0;4814  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);4815}48164817.peach-entry-row.is-tab-match {4818  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);4819  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);4820}48214822.peach-entry-row.is-tab-match:hover {4823  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4824}48254826/* Entry list stagger entrance */4827@keyframes peach-entry-fadein {4828  from { opacity: 0; transform: translateY(4px); }4829  to   { opacity: 1; transform: translateY(0); }4830}48314832.peach-vault-list .peach-entry-row {4833  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;4834  content-visibility: auto;4835  contain-intrinsic-size: auto 44px;4836}48374838/* Button press micro-interaction */4839.peach-btn:active {4840  transform: scale(0.95);4841  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);4842}48434844.peach-sort-btn:active,4845.peach-tag-filter-chip:active {4846  transform: scale(0.93);4847  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);4848}48494850/* Password strength bar (Lock view + shared) */4851.peach-password-strength {4852  display: flex;4853  align-items: center;4854  gap: 8px;4855  margin-top: 6px;4856}48574858.peach-strength-bar {4859  flex: 1;4860  height: 3px;4861  border-radius: 2px;4862  background: var(--peach-t3);4863  overflow: hidden;4864}48654866.peach-strength-fill {4867  height: 100%;4868  border-radius: 2px;4869  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),4870              background 300ms ease;4871}48724873.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }4874.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }4875.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }4876.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }48774878.peach-strength-label {4879  font-family: "IBM Plex Mono", monospace;4880  font-style: italic;4881  font-size: 9px;4882  font-weight: 300;4883  letter-spacing: 0.06em;4884  color: var(--peach-t2);4885  min-width: 36px;4886  text-align: right;4887}48884889.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }4890.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }4891.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }4892.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }48934894/* Duress form */4895.peach-duress-status {4896  padding: 2px 8px;4897  border-radius: 999px;4898  border: 1px solid var(--peach-t3);4899  font-family: "IBM Plex Mono", monospace;4900  font-size: 9px;4901  letter-spacing: 0.07em;4902  text-transform: uppercase;4903  color: var(--peach-t2);4904  flex-shrink: 0;4905}49064907.peach-duress-status.is-active {4908  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);4909  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4910  color: var(--peach-t0);4911}49124913.peach-duress-form {4914  padding: 8px 0 4px;4915  display: flex;4916  flex-direction: column;4917  gap: 6px;4918}49194920.peach-duress-form .peach-label {4921  margin-top: 4px;4922}49234924.peach-duress-actions {4925  display: flex;4926  gap: 6px;4927  align-items: center;4928  margin-top: 4px;4929}49304931.peach-duress-actions .peach-btn:first-child {4932  margin-right: auto;4933}49344935/* Improved overlay spring entrance */4936.peach-overlay-view.ov-enter-up {4937  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;4938}49394940@keyframes ov-enter-up-spring {4941  from { opacity: 0; transform: translateY(16px) scale(0.98); }4942  to   { opacity: 1; transform: translateY(0) scale(1); }4943}49444945.peach-overlay-view.ov-enter-right {4946  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;4947}49484949@keyframes ov-enter-right-spring {4950  from { opacity: 0; transform: translateX(18px) scale(0.98); }4951  to   { opacity: 1; transform: translateX(0) scale(1); }4952}49534954/* ── Onboarding-mode restore screens (file import) ── */4955/* Used when MainImportView renders during onboarding (no vault yet).4956   Animates like a lock-screen transition. */4957.peach-lock-view {4958  position: absolute;4959  inset: 0;4960  display: flex;4961  flex-direction: column;4962  background:4963    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),4964    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),4965    var(--peach-bg);4966  z-index: 2;4967  overflow: hidden;4968  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4969}49704971.peach-lock-view-header {4972  display: flex;4973  align-items: center;4974  justify-content: space-between;4975  padding: 16px 18px 12px;4976  flex-shrink: 0;4977}49784979/* ───────── Settings: auto-lock select ───────── */4980.peach-settings-select {4981  font-family: "IBM Plex Mono", monospace;4982  font-size: 11px;4983  background: transparent;4984  border: 1px solid var(--peach-t3);4985  border-radius: 4px;4986  color: var(--peach-t1);4987  padding: 3px 6px;4988  cursor: pointer;4989  outline: none;4990}4991.peach-settings-select:focus {4992  border-color: var(--peach-accent);4993}49944995/* ───────── Duress status pill (new polished) ───────── */4996.peach-duress-status-pill {4997  font-family: "IBM Plex Mono", monospace;4998  font-size: 9px;4999  text-transform: uppercase;5000  letter-spacing: 0.12em;5001  padding: 2px 8px;5002  border-radius: 12px;5003  background: var(--peach-t3);5004  color: var(--peach-t2);5005  flex-shrink: 0;5006}5007.peach-duress-status-pill.is-active {5008  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5009  color: var(--peach-accent);5010}50115012/* ───────── Entry advanced disclosure (canary) ───────── */5013.peach-entry-advanced {5014  margin-top: 12px;5015  border-top: 1px solid var(--peach-t3);5016  padding-top: 10px;5017  position: relative;5018  z-index: 1;5019}5020.peach-entry-advanced-toggle {5021  display: flex;5022  align-items: center;5023  justify-content: space-between;5024  width: 100%;5025  background: transparent;5026  border: none;5027  cursor: pointer;5028  padding: 0;5029  color: var(--peach-t2);5030}5031.peach-canary-section {5032  margin-top: 10px;5033  display: grid;5034  gap: 6px;5035}50365037/* ───────── Import: merge/replace radio choices ───────── */5038.peach-import-choice {5039  display: flex;5040  align-items: flex-start;5041  gap: 10px;5042  padding: 8px 10px;5043  border: 1px solid var(--peach-t3);5044  border-radius: 10px;5045  cursor: pointer;5046  margin-bottom: 6px;5047  transition: border-color 120ms ease, background 120ms ease;5048}5049.peach-import-choice:hover {5050  border-color: var(--peach-accent);5051}5052.peach-import-choice input[type="radio"] {5053  margin-top: 3px;5054  accent-color: var(--peach-accent);5055  flex-shrink: 0;5056}5057.peach-import-choice-main {5058  display: flex;5059  flex-direction: column;5060  gap: 2px;5061  min-width: 0;5062}5063.peach-import-choice-label {5064  font-size: 12px;5065  color: var(--peach-t0);5066}5067.peach-import-choice-sub {5068  font-size: 11px;5069  color: var(--peach-t2);5070  line-height: 1.5;5071}50725073/* ───────── Export: success confirmation strip ───────── */5074.peach-export-success {5075  display: flex;5076  align-items: flex-start;5077  gap: 10px;5078  padding: 12px;5079  border-radius: 12px;5080  border: 1px solid rgba(150, 175, 110, 0.3);5081  background: rgba(150, 175, 110, 0.08);5082  color: var(--peach-t0);5083  font-size: 12px;5084  line-height: 1.55;5085}5086.peach-export-success-check {5087  color: rgba(150, 175, 110, 0.9);5088  font-size: 14px;5089  flex-shrink: 0;5090}50915092/* ── Trash view ──────────────────────────────────────────────────────── */5093.peach-trash-entry-row {5094  display: flex;5095  align-items: center;5096  justify-content: space-between;5097  gap: 8px;5098  padding: 8px 0;5099  border-bottom: 1px solid var(--peach-border);5100}5101.peach-trash-entry-info {5102  flex: 1;5103  min-width: 0;5104  display: flex;5105  flex-direction: column;5106  gap: 2px;5107}5108.peach-trash-entry-title {5109  font-size: 13px;5110  color: var(--peach-t0);5111  overflow: hidden;5112  text-overflow: ellipsis;5113  white-space: nowrap;5114}5115.peach-trash-entry-meta {5116  font-family: var(--font-mono);5117  font-size: 9px;5118  color: var(--peach-t2);5119  letter-spacing: 0.04em;5120}5121.peach-trash-entry-actions {5122  display: flex;5123  align-items: center;5124  gap: 4px;5125  flex-shrink: 0;5126}5127.peach-trash-delete-btn {5128  background: transparent;5129  border: 0;5130  color: var(--peach-t3);5131  font-size: 16px;5132  line-height: 1;5133  cursor: pointer;5134  padding: 2px 5px;5135  transition: color 0.15s;5136}5137.peach-trash-delete-btn:hover { color: var(--peach-breach); }5138.peach-trash-list {5139  overflow-y: auto;5140}5141.peach-trash-footer {5142  display: flex;5143  align-items: center;5144  gap: 8px;5145  padding: 8px 0 0;5146  border-top: 1px solid var(--peach-border);5147  margin-top: 4px;5148}5149.peach-trash-purge-all {5150  background: transparent;5151  border: 0;5152  color: var(--peach-t3);5153  font-size: 10px;5154  cursor: pointer;5155  padding: 4px 0;5156  letter-spacing: 0.03em;5157  transition: color 0.2s;5158}5159.peach-trash-purge-all:hover { color: var(--peach-breach); }5160.peach-trash-purge-confirm-label {5161  font-size: 10px;5162  color: var(--peach-t1);5163  flex: 1;5164}51655166/* ── Settings shortcuts grid ─────────────────────────────────────────── */5167.peach-shortcuts-grid {5168  display: grid;5169  grid-template-columns: auto 1fr;5170  gap: 6px 12px;5171  align-items: center;5172  padding: 4px 0;5173}5174.peach-shortcut-key {5175  font-family: var(--font-mono);5176  font-size: 10px;5177  color: var(--peach-t0);5178  background: var(--peach-t3);5179  border-radius: 4px;5180  padding: 2px 6px;5181  white-space: nowrap;5182  text-align: center;5183}5184.peach-shortcut-desc {5185  font-size: 11px;5186  color: var(--peach-t1);5187}51885189/* ── Sort bar trash button ───────────────────────────────────────────── */5190.peach-sort-trash-btn {5191  display: flex;5192  align-items: center;5193  justify-content: center;5194  padding: 3px 5px;5195  background: transparent;5196  border: none;5197  cursor: pointer;5198  color: var(--peach-t2);5199  border-radius: 4px;5200  transition: color 140ms ease, background 140ms ease;5201}5202.peach-sort-trash-btn:hover {5203  color: var(--peach-t1);5204  background: var(--peach-t3);5205}5206.peach-sort-trash-btn.is-active {5207  color: var(--peach-accent);5208}52095210/* Accent color picker */5211.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5212.peach-accent-picker {5213  display: flex;5214  flex-wrap: wrap;5215  gap: 7px;5216  padding: 2px 0;5217}5218.peach-accent-swatch {5219  width: 22px;5220  height: 22px;5221  border-radius: 50%;5222  border: 2px solid transparent;5223  cursor: pointer;5224  padding: 0;5225  transition: transform 100ms;5226  outline-offset: 2px;5227}5228.peach-accent-swatch:hover { transform: scale(1.15); }5229.peach-accent-swatch.is-active {5230  border-color: var(--peach-t0);5231  transform: scale(1.1);5232}52335234/* Display font picker — swatch shows an "Aa" preview rendered with each5235   font option so the user can see what they're picking before they pick. */5236.peach-settings-row--font { align-items: flex-start; padding-top: 10px; }5237.peach-font-picker {5238  display: flex;5239  flex-wrap: wrap;5240  gap: 6px;5241  padding: 2px 0;5242  flex: 1;5243  justify-content: flex-end;5244}5245.peach-font-swatch {5246  display: flex;5247  flex-direction: column;5248  align-items: center;5249  gap: 2px;5250  padding: 4px 8px;5251  background: transparent;5252  border: 1px solid var(--peach-t3);5253  border-radius: 6px;5254  cursor: pointer;5255  transition: border-color 100ms, background 100ms;5256  min-width: 56px;5257}5258.peach-font-swatch:hover {5259  border-color: var(--peach-accent-dim);5260  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5261}5262.peach-font-swatch.is-active {5263  border-color: var(--peach-accent);5264  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5265}5266.peach-font-swatch-glyph {5267  font-size: 18px;5268  line-height: 1;5269  color: var(--peach-t0);5270}5271.peach-font-swatch[data-font-preview="cormorant-italic"] .peach-font-swatch-glyph {5272  font-family: "Cormorant Garamond", serif;5273  font-style: italic;5274  font-weight: 400;5275}5276.peach-font-swatch[data-font-preview="cormorant"] .peach-font-swatch-glyph {5277  font-family: "Cormorant Garamond", serif;5278  font-style: normal;5279  font-weight: 400;5280}5281.peach-font-swatch[data-font-preview="inter"] .peach-font-swatch-glyph {5282  font-family: "Inter Variable", "Inter", sans-serif;5283  font-style: normal;5284  font-weight: 400;5285}5286.peach-font-swatch[data-font-preview="system"] .peach-font-swatch-glyph {5287  font-family: system-ui, -apple-system, sans-serif;5288  font-style: normal;5289  font-weight: 400;5290}5291.peach-font-swatch-name {5292  font-family: var(--font-mono);5293  font-size: 8px;5294  letter-spacing: 0.06em;5295  color: var(--peach-t2);5296  text-transform: lowercase;5297}52985299.peach-pill-group {5300  display: flex;5301  gap: 6px;5302}5303.peach-pill-group .peach-btn.is-active {5304  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5305  border-color: var(--peach-accent);5306  color: var(--peach-t0);5307}53085309/* ── Card entry styles ───────────────────────────────────────── */5310.peach-card-number {5311  font-family: var(--peach-mono);5312  letter-spacing: 0.08em;5313}53145315.peach-card-network-badge {5316  font-size: 10px;5317  padding: 1px 5px;5318  border-radius: 4px;5319  border: 0.5px solid var(--peach-border);5320  color: var(--peach-text-dim);5321  margin-left: 6px;5322  vertical-align: middle;5323}53245325.peach-card-expiry-row {5326  display: flex;5327  align-items: center;5328  gap: 8px;5329}53305331.peach-card-expiry-sep {5332  color: var(--peach-text-dim);5333}53345335/* ── Pro tier — upgrade screen ──────────────────────────────── */5336.peach-pro-mark {5337  font-size: 9px;5338  color: var(--peach-accent);5339  margin-left: 6px;5340  vertical-align: super;5341  opacity: 0.7;5342}53435344.peach-pro-mini-badge {5345  display: block;5346  font-size: 10px;5347  font-style: italic;5348  color: var(--peach-accent);5349  letter-spacing: 0.04em;5350  margin-top: -2px;5351  padding-left: 2px;5352  opacity: 0.85;5353  text-align: center;5354}53555356.peach-wordmark-stack {5357  display: inline-flex;5358  flex-direction: column;5359  align-items: center;5360}53615362/* ── Pro tier — upgrade page ─────────────────────────────────── */5363.peach-pro-upgrade {5364  display: flex;5365  flex-direction: column;5366  align-items: stretch;5367  gap: 10px;5368  padding: 0 4px 8px;5369}53705371.peach-pro-upgrade-hero {5372  display: flex;5373  flex-direction: column;5374  align-items: center;5375  gap: 4px;5376  padding: 10px 0 6px;5377}53785379.peach-pro-upgrade-mark-wrap {5380  display: flex;5381  align-items: center;5382  justify-content: center;5383  margin-bottom: 2px;5384}53855386.peach-pro-upgrade-mark {5387  width: 38px;5388  height: 38px;5389  filter:5390    drop-shadow(0 0 7px color-mix(in srgb, var(--peach-accent) 45%, transparent))5391    drop-shadow(0 0 18px color-mix(in srgb, var(--peach-accent) 18%, transparent));5392}53935394.peach-pro-upgrade-title {5395  font-family: var(--font-display, var(--font-ui));5396  font-size: 22px;5397  margin: 0;5398  color: var(--peach-t0);5399  letter-spacing: 0.01em;5400}54015402.peach-pro-upgrade-tagline {5403  margin: 0;5404  font-style: italic;5405  color: var(--peach-t2);5406  font-size: 11px;5407}54085409.peach-pro-features {5410  display: flex;5411  flex-direction: column;5412  gap: 8px;5413  border-top: 1px solid var(--peach-border);5414  border-bottom: 1px solid var(--peach-border);5415  padding: 10px 4px;5416}54175418.peach-pro-feature {5419  display: flex;5420  gap: 9px;5421  align-items: baseline;5422}54235424.peach-pro-feature-mark {5425  color: var(--peach-accent);5426  font-size: 11px;5427  flex-shrink: 0;5428  display: inline-block;5429  transform-origin: center;5430  opacity: 0.8;5431}54325433.peach-pro-feature-text {5434  display: flex;5435  flex-direction: column;5436  gap: 1px;5437}54385439.peach-pro-feature-name {5440  font-size: 12px;5441  color: var(--peach-t0);5442}54435444.peach-pro-feature-desc {5445  font-size: 10px;5446  color: var(--peach-t2);5447}54485449.peach-pro-feature.is-highlighted .peach-pro-feature-mark {5450  animation: peach-pulse-accent 600ms ease-out forwards;5451}54525453@keyframes peach-pulse-accent {5454  0%   { opacity: 1; transform: scale(1.4); }5455  100% { opacity: 0.7; transform: scale(1); }5456}54575458.peach-pro-upgrade-actions {5459  display: flex;5460  flex-direction: column;5461  align-items: center;5462  gap: 8px;5463  padding-top: 2px;5464}54655466.peach-pro-pricing {5467  margin: 0;5468  text-align: center;5469  font-size: 11px;5470  color: var(--peach-t2);5471  letter-spacing: 0.04em;5472}54735474.peach-pro-upgrade-cta {5475  align-self: stretch;5476  text-align: center;5477  text-decoration: none;5478  display: block;5479  padding: 9px 20px;5480  font-size: 13px;5481  box-sizing: border-box;5482}54835484.peach-pro-key-divider {5485  display: flex;5486  align-items: center;5487  gap: 8px;5488  width: 100%;5489  color: var(--peach-t3);5490  font-size: 10px;5491  letter-spacing: 0.08em;5492}54935494.peach-pro-key-divider::before,5495.peach-pro-key-divider::after {5496  content: "";5497  flex: 1;5498  height: 1px;5499  background: var(--peach-border);5500}55015502.peach-pro-key-link {5503  background: transparent;5504  border: 1px solid var(--peach-border);5505  border-radius: 8px;5506  color: var(--peach-t1);5507  font-size: 12px;5508  cursor: pointer;5509  align-self: stretch;5510  padding: 8px 12px;5511  text-align: center;5512  transition: border-color 0.2s, color 0.2s;5513}55145515.peach-pro-key-link:hover {5516  border-color: var(--peach-accent);5517  color: var(--peach-accent);5518}55195520/* ── Pro tier — key ceremony ─────────────────────────────────── */5521.peach-pro-key-ceremony {5522  display: flex;5523  flex-direction: column;5524  align-items: center;5525  gap: 12px;5526  padding: 20px 4px 16px;5527}55285529.peach-pro-key-ceremony .peach-lock-rune-string {5530  font-size: 16px;5531  gap: 12px;5532  flex: 0;5533  justify-content: center;5534}55355536.peach-pro-key-ceremony-label {5537  margin: 0;5538  font-size: 11px;5539  color: var(--peach-t2);5540  font-style: italic;5541  letter-spacing: 0.04em;5542}55435544.peach-pro-key-input {5545  font-family: var(--font-mono, monospace);5546  letter-spacing: 0.06em;5547  text-align: center;5548  width: 100%;5549  box-sizing: border-box;5550}55515552.peach-pro-key-error {5553  margin: 0;5554  font-size: 12px;5555  text-align: center;5556  color: var(--peach-breach, #e55);5557  padding: 0;5558}55595560.peach-pro-key-activate {5561  width: 100%;5562  text-align: center;5563  box-sizing: border-box;5564  padding: 10px 20px;5565  font-size: 13px;5566}55675568.peach-pro-key-cancel {5569  background: transparent;5570  border: 0;5571  color: var(--peach-t2);5572  font-size: 11px;5573  cursor: pointer;5574  padding: 2px 8px;5575  transition: color 0.2s;5576}55775578.peach-pro-key-cancel:hover { color: var(--peach-accent); }55795580/* ── Pro tier — active state ─────────────────────────────────── */5581.peach-pro-active {5582  display: flex;5583  flex-direction: column;5584  align-items: center;5585  gap: 0;5586  padding: 8px 4px 16px;5587  min-height: 280px;5588}55895590.peach-pro-active-hero {5591  display: flex;5592  flex-direction: column;5593  align-items: center;5594  gap: 6px;5595  padding: 20px 0 22px;5596}55975598.peach-pro-active-mark-wrap {5599  display: flex;5600  align-items: center;5601  justify-content: center;5602  margin-bottom: 4px;5603}56045605.peach-pro-active-mark {5606  width: 60px;5607  height: 60px;5608  filter:5609    drop-shadow(0 0 10px color-mix(in srgb, var(--peach-accent) 55%, transparent))5610    drop-shadow(0 0 26px color-mix(in srgb, var(--peach-accent) 22%, transparent));5611}56125613.peach-pro-active-title {5614  font-family: var(--font-display, var(--font-ui));5615  font-size: 26px;5616  margin: 0;5617  color: var(--peach-t0);5618  letter-spacing: 0.01em;5619}56205621.peach-pro-active-since {5622  margin: 0;5623  font-size: 11px;5624  color: var(--peach-t2);5625  font-style: italic;5626}56275628.peach-pro-active-features {5629  display: flex;5630  flex-direction: column;5631  gap: 8px;5632  width: 100%;5633  padding: 14px 8px 0;5634  border-top: 1px solid var(--peach-border);5635  flex: 1;5636}56375638.peach-pro-active-feature {5639  display: flex;5640  align-items: center;5641  gap: 9px;5642}56435644.peach-pro-active-feature-mark {5645  color: var(--peach-accent);5646  font-size: 10px;5647  opacity: 0.65;5648  flex-shrink: 0;5649}56505651.peach-pro-active-feature-name {5652  font-size: 12px;5653  color: var(--peach-t1);5654}56555656.peach-pro-deactivate {5657  align-self: center;5658  background: transparent;5659  border: 0;5660  color: var(--peach-t3);5661  font-size: 10px;5662  cursor: pointer;5663  padding: 8px 0 0;5664  margin-top: 16px;5665  letter-spacing: 0.03em;5666  transition: color 0.2s;5667}56685669.peach-pro-deactivate:hover { color: var(--peach-t2); }56705671.peach-pro-deactivate:disabled {5672  opacity: 0.5;5673  cursor: default;5674}56755676/* ── Pro advanced health remediation queue ──────────────────── */5677.peach-health-pro-queue {5678  display: flex;5679  flex-direction: column;5680  gap: 10px;5681  padding: 12px;5682  margin: 0 0 12px;5683  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5684  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);5685  border-radius: 10px;5686}56875688.peach-health-pro-queue-head {5689  display: flex;5690  justify-content: space-between;5691  align-items: baseline;5692}56935694.peach-health-pro-queue-title {5695  font-size: 12px;5696  font-weight: 500;5697  letter-spacing: 0.04em;5698  text-transform: uppercase;5699  color: var(--peach-accent);5700}57015702.peach-health-pro-queue-score {5703  font-size: 11px;5704  color: var(--peach-t2);5705}57065707.peach-health-pro-row {5708  display: flex;5709  gap: 10px;5710  align-items: center;5711  padding: 8px 0;5712  border-top: 1px solid var(--peach-border);5713}57145715.peach-health-pro-row-info {5716  flex: 1;5717  display: flex;5718  flex-direction: column;5719  gap: 4px;5720  min-width: 0;5721}57225723.peach-health-pro-row-name {5724  font-size: 13px;5725  color: var(--peach-t0);5726  overflow: hidden;5727  text-overflow: ellipsis;5728  white-space: nowrap;5729}57305731.peach-health-pro-row-meta {5732  font-size: 11px;5733  color: var(--peach-t2);5734}57355736.peach-health-pro-bar {5737  height: 2px;5738  background: var(--peach-border);5739  border-radius: 2px;5740  overflow: hidden;5741  margin-top: 2px;5742}57435744.peach-health-pro-bar-fill {5745  height: 100%;5746  background: var(--peach-accent);5747  transition: width 200ms ease-out;5748}57495750/* ── Pro activation celebration ── */5751@keyframes peach-pro-bloom {5752  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }5753  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))5754                 drop-shadow(0 0 48px var(--peach-glow)); }5755  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }5756}57575758@keyframes peach-pro-wordmark-in {5759  from { opacity: 0; transform: translateY(4px); }5760  to   { opacity: 1; transform: translateY(0); }5761}57625763@keyframes peach-pro-fade-out {5764  from { opacity: 1; }5765  to   { opacity: 0; }5766}57675768.peach-pro-celebration {5769  background:5770    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5771    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5772    var(--peach-bg);5773  border: 1px solid var(--peach-t3);5774  box-shadow:5775    0 2px 8px rgba(0,0,0,0.55),5776    0 14px 48px rgba(0,0,0,0.7),5777    0 0 0 1px rgba(240,232,216,0.04);5778  overflow: hidden;5779  width: 320px;5780  height: 520px;5781  display: flex;5782  flex-direction: column;5783  align-items: center;5784  justify-content: center;5785  gap: 8px;5786  padding: 32px 24px;5787  text-align: center;5788}57895790.peach-pro-celebration.is-leaving {5791  animation: peach-pro-fade-out 400ms ease forwards;5792}57935794.peach-pro-bloom-target {5795  font-size: 48px;5796  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;5797  margin-bottom: 12px;5798}57995800.peach-pro-wordmark {5801  font-family: var(--font-display);5802  font-size: 22px;5803  font-style: italic;5804  font-weight: 400;5805  color: var(--peach-accent);5806  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;5807}58085809.peach-pro-thankyou {5810  font-size: 12px;5811  font-style: italic;5812  color: var(--peach-t2);5813  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;5814}581558165817/* ── Pending Pro notice banner (shown after background sync gate fires) ── */5818.peach-pro-notice-banner {5819  display: flex;5820  align-items: center;5821  gap: 8px;5822  padding: 7px 12px;5823  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));5824  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);5825  font-size: 11px;5826  color: var(--peach-t2);5827  font-family: "IBM Plex Mono", monospace;5828  flex-shrink: 0;5829}58305831.peach-pro-notice-link {5832  background: none;5833  border: none;5834  padding: 0;5835  cursor: pointer;5836  font-size: 11px;5837  color: var(--peach-accent);5838  font-family: "IBM Plex Mono", monospace;5839  margin-left: auto;5840  white-space: nowrap;5841}58425843.peach-pro-notice-close {5844  background: none;5845  border: none;5846  padding: 0 0 0 4px;5847  cursor: pointer;5848  font-size: 10px;5849  color: var(--peach-t3);5850  line-height: 1;5851}58525853/* ─── First-run onboarding ──────────────────────────────────────────────5854   Three-card welcome shown once before vault creation. The PeachScript5855   rune background drifts behind everything at very low opacity — it's5856   atmosphere, not focus. The cards themselves use the same panel5857   language as the rest of the popup so the transition into NewVault is5858   continuous, not a jarring switch of visual register. */58595860.peach-onboarding {5861  position: relative;5862  display: flex;5863  flex-direction: column;5864  width: 100%;5865  height: 100%;5866  padding: 16px 16px 18px;5867  box-sizing: border-box;5868  overflow: hidden;5869  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;5870}58715872.peach-onboarding.is-completing {5873  animation: peach-onboard-exit 200ms ease-out forwards;5874}58755876.peach-rune-background {5877  position: absolute;5878  inset: 0;5879  width: 100%;5880  height: 100%;5881  pointer-events: none;5882  z-index: 0;5883  transition: opacity 500ms ease-out;5884}58855886.peach-onboarding.is-completing .peach-rune-background {5887  opacity: 0;5888}58895890.peach-onboarding-header {5891  position: relative;5892  z-index: 1;5893  display: flex;5894  align-items: center;5895  margin-bottom: 14px;5896}58975898.peach-onboarding-card {5899  position: relative;5900  z-index: 1;5901  flex: 1;5902  display: flex;5903  flex-direction: column;5904  gap: 10px;5905  padding: 22px 20px;5906  border-radius: 16px;5907  border: 1px solid var(--peach-t3);5908  background:5909    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));5910  backdrop-filter: blur(3px);5911  -webkit-backdrop-filter: blur(3px);5912  box-shadow:5913    inset 0 1px 0 rgba(240, 232, 216, 0.04),5914    0 12px 28px rgba(0, 0, 0, 0.12);5915  cursor: pointer;5916  user-select: none;5917  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;5918}59195920.peach-onboarding-card.is-exiting {5921  animation: peach-card-out 120ms ease-in forwards;5922  pointer-events: none;5923}59245925.peach-onboarding-card-headline {5926  margin: 0;5927  font-family: var(--font-display);5928  font-style: italic;5929  font-weight: 400;5930  font-size: 22px;5931  line-height: 1.05;5932  color: var(--peach-t0);5933  white-space: pre-line;5934}59355936.peach-onboarding-divider {5937  margin: 4px 0 6px;5938  border: 0;5939  border-top: 1px solid var(--peach-t3);5940  width: 100%;5941}59425943.peach-onboarding-body {5944  margin: 0;5945  font-size: 13px;5946  line-height: 1.6;5947  color: var(--peach-t1);5948}59495950.peach-onboarding-warning {5951  display: flex;5952  align-items: flex-start;5953  gap: 8px;5954  margin: 6px 0 0;5955  padding-top: 8px;5956  border-top: 1px dashed var(--peach-t3);5957  font-size: 13px;5958  line-height: 1.5;5959  color: var(--peach-t1);5960}59615962.peach-onboarding-warning-icon {5963  color: var(--peach-accent);5964  font-size: 13px;5965  line-height: 1.5;5966  flex: 0 0 auto;5967}59685969.peach-onboarding-nav {5970  position: relative;5971  z-index: 1;5972  display: flex;5973  align-items: center;5974  justify-content: space-between;5975  margin-top: 12px;5976  padding: 0 4px;5977}59785979.peach-onboarding-dots {5980  display: flex;5981  align-items: center;5982  gap: 6px;5983}59845985.peach-onboarding-dot {5986  width: 6px;5987  height: 6px;5988  border-radius: 50%;5989  background: var(--peach-t2);5990  transition: width 200ms ease, height 200ms ease, background 200ms ease;5991}59925993.peach-onboarding-dot.is-active {5994  width: 8px;5995  height: 8px;5996  background: var(--peach-accent);5997}59985999.peach-onboarding-next {6000  background: none;6001  border: none;6002  padding: 4px 0;6003  cursor: pointer;6004  font-family: "IBM Plex Mono", monospace;6005  font-size: 11px;6006  letter-spacing: 0.04em;6007  color: var(--peach-t1);6008  transition: color 150ms ease;6009}60106011.peach-onboarding-next:hover {6012  color: var(--peach-t0);6013}60146015.peach-onboarding-next:disabled {6016  opacity: 0.5;6017  cursor: default;6018}60196020@keyframes peach-onboard-enter {6021  from { opacity: 0; transform: translateY(20px); }6022  to   { opacity: 1; transform: translateY(0); }6023}60246025@keyframes peach-onboard-exit {6026  from { opacity: 1; }6027  to   { opacity: 0; }6028}60296030@keyframes peach-card-in {6031  from { opacity: 0; transform: translateX(12px); }6032  to   { opacity: 1; transform: translateX(0); }6033}60346035@keyframes peach-card-out {6036  from { opacity: 1; transform: translateX(0); }6037  to   { opacity: 0; transform: translateX(-12px); }6038}60396040/* ─── New vault screen — matched to onboarding card language ─────────── */60416042.peach-newvault {6043  position: relative;6044  display: flex;6045  flex-direction: column;6046  gap: 12px;6047  padding: 16px 16px 18px;6048  overflow: hidden;6049}60506051/* Suppress the warm-blob ambient art inherited from .lock-screen — the6052   new vault card now carries the visual weight. */6053.peach-newvault::before {6054  content: none;6055}60566057.peach-newvault-header {6058  position: relative;6059  z-index: 2;6060  display: flex;6061  align-items: center;6062  margin-bottom: 2px;6063}60646065.peach-newvault-mark {6066  position: absolute;6067  right: -12px;6068  top: 6px;6069  width: 110px;6070  height: 110px;6071  pointer-events: none;6072  opacity: 0.10;6073  filter: saturate(0.9);6074  z-index: 0;6075}6076.peach-newvault-mark-art {6077  width: 100%;6078  height: 100%;6079}6080.peach-newvault-mark-art path:nth-child(2),6081.peach-newvault-mark-art path:nth-child(3) {6082  stroke: rgba(123, 144, 96, 0.88);6083  fill: rgba(123, 144, 96, 0.88);6084}60856086.peach-newvault-card {6087  position: relative;6088  z-index: 1;6089  display: flex;6090  flex-direction: column;6091  gap: 12px;6092  padding: 22px 20px 18px;6093  border-radius: 16px;6094  border: 1px solid var(--peach-t3);6095  background:6096    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6097  backdrop-filter: blur(3px);6098  -webkit-backdrop-filter: blur(3px);6099  box-shadow:6100    inset 0 1px 0 rgba(240, 232, 216, 0.04),6101    0 12px 28px rgba(0, 0, 0, 0.12);6102  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6103}61046105.peach-newvault-headline {6106  margin: 0;6107  font-family: var(--font-display);6108  font-style: italic;6109  font-weight: 400;6110  font-size: 24px;6111  line-height: 1.05;6112  color: var(--peach-t0);6113  white-space: pre-line;6114}61156116.peach-newvault-divider {6117  margin: 2px 0 4px;6118  border: 0;6119  border-top: 1px solid var(--peach-t3);6120  width: 100%;6121}61226123.peach-newvault-field {6124  display: flex;6125  flex-direction: column;6126  gap: 4px;6127}61286129.peach-newvault-label-row {6130  display: flex;6131  align-items: center;6132  justify-content: space-between;6133}61346135/* Monospace input scaled to the card. Replaces the 22px unlock-input6136   so the placeholder no longer overflows and the field reads as part6137   of the same surface as the body copy. */6138.peach-newvault-input {6139  font-size: 14px;6140  letter-spacing: 0.18em;6141  padding: 8px 0;6142}6143.peach-newvault-input::placeholder {6144  letter-spacing: 0.18em;6145  color: var(--peach-t2);6146}61476148.peach-newvault-hint {6149  margin: 2px 0 0;6150  font-family: "IBM Plex Mono", monospace;6151  font-size: 10px;6152  color: var(--peach-t2);6153  letter-spacing: 0.04em;6154}61556156.peach-newvault-submit {6157  margin-top: 4px;6158}61596160.peach-newvault-warning {6161  display: flex;6162  align-items: flex-start;6163  gap: 8px;6164  margin: 4px 0 0;6165  padding-top: 10px;6166  border-top: 1px dashed var(--peach-t3);6167  font-size: 12px;6168  line-height: 1.5;6169  color: var(--peach-t1);6170}61716172.peach-newvault-warning-icon {6173  color: var(--peach-accent);6174  font-size: 13px;6175  line-height: 1.4;6176  flex: 0 0 auto;6177}61786179.peach-newvault-footer {6180  position: relative;6181  z-index: 1;6182  display: flex;6183  flex-direction: column;6184  gap: 4px;6185  padding: 4px 4px 0;6186}61876188/* Settings body — warm accent gradient gives the glass something to blur against */6189.peach-settings-body {6190  background:6191    radial-gradient(6192      ellipse at 30% 20%,6193      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,6194      transparent 60%6195    );6196}61976198/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */6199/* ── Danger cards (Replace + Destroy) ────────────────────────────────────6200 * Two severity levels: "warn" for actions that are dangerous-but-recoverable6201 * (replacing the vault from a backup file) and "hazard" for actions that6202 * are absolutely irreversible (Panic). Both use the same card scaffold so6203 * they read as a pair, but the colour family signals the severity at a6204 * glance — yellow for caution, red for don't.6205 */6206.peach-danger-card {6207  --danger-tint: 235, 158, 52; /* amber */6208  display: flex;6209  flex-direction: column;6210  gap: 8px;6211  padding: 14px;6212  margin-top: 10px;6213  border-radius: 12px;6214  border: 1px solid rgba(var(--danger-tint), 0.32);6215  background:6216    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),6217    rgba(var(--danger-tint), 0.04);6218  box-shadow:6219    inset 0 1px 0 rgba(var(--danger-tint), 0.08),6220    0 0 24px rgba(var(--danger-tint), 0.04);6221  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;6222}62236224.peach-danger-card:hover {6225  border-color: rgba(var(--danger-tint), 0.55);6226  box-shadow:6227    inset 0 1px 0 rgba(var(--danger-tint), 0.12),6228    0 0 36px rgba(var(--danger-tint), 0.10);6229}62306231.peach-danger-card--hazard {6232  --danger-tint: 220, 38, 38; /* red */6233}62346235.peach-danger-card-head {6236  display: flex;6237  align-items: center;6238  gap: 10px;6239}62406241.peach-danger-card-glyph {6242  width: 28px;6243  height: 28px;6244  flex-shrink: 0;6245  display: flex;6246  align-items: center;6247  justify-content: center;6248  border-radius: 8px;6249  background: rgba(var(--danger-tint), 0.12);6250  color: rgba(var(--danger-tint), 0.95);6251  font-size: 16px;6252  line-height: 1;6253}62546255.peach-danger-card-title {6256  margin: 0;6257  font-size: 13px;6258  font-weight: 600;6259  color: rgba(var(--danger-tint), 0.92);6260  letter-spacing: 0.01em;6261}62626263.peach-danger-card-copy {6264  margin: 0;6265  font-size: 11px;6266  line-height: 1.5;6267  color: var(--peach-t2);6268}62696270.peach-danger-card-button {6271  width: 100%;6272  padding: 9px;6273  margin-top: 4px;6274  background: transparent;6275  border: 1px solid rgba(var(--danger-tint), 0.45);6276  border-radius: 8px;6277  color: rgba(var(--danger-tint), 0.9);6278  font-size: 12px;6279  font-weight: 500;6280  letter-spacing: 0.02em;6281  cursor: pointer;6282  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;6283}62846285.peach-danger-card-button:hover {6286  background: rgba(var(--danger-tint), 0.10);6287  border-color: rgba(var(--danger-tint), 0.75);6288  color: rgb(var(--danger-tint));6289}62906291/* ── Panic flow (three-step destruction) ───────────────────────────────── */6292.peach-panic {6293  display: flex;6294  flex-direction: column;6295  height: 100%;6296  padding: 28px 20px 20px;6297  gap: 18px;6298  overflow-y: auto;6299}63006301.peach-panic-step2 {6302  background: rgba(220, 38, 38, 0.04);6303}63046305.peach-panic-step3 {6306  background: #0f0505;6307  color: #ffffff;6308}63096310.peach-panic-icon {6311  font-size: 32px;6312  color: rgb(220, 38, 38);6313  line-height: 1;6314}63156316.peach-panic-title {6317  margin: 0;6318  font-size: 18px;6319  font-weight: 500;6320  color: var(--peach-t1);6321}63226323.peach-panic-title--severe {6324  font-size: 20px;6325  font-weight: 700;6326  color: rgb(220, 38, 38);6327}63286329.peach-panic-body {6330  margin: 0;6331  font-size: 13px;6332  line-height: 1.55;6333  color: var(--peach-t2);6334}63356336.peach-panic-body--severe {6337  color: rgba(220, 38, 38, 0.85);6338}63396340.peach-panic-body--final {6341  font-size: 16px;6342  font-weight: 700;6343  color: rgb(255, 80, 80);6344  line-height: 1.4;6345}63466347.peach-panic-body--final-intro {6348  font-size: 16px;6349  color: #ffffff;6350  font-weight: 400;6351}63526353.peach-panic-divider {6354  height: 1px;6355  background: rgba(255, 255, 255, 0.08);6356  margin: 4px 0;6357}63586359.peach-panic-confirm-input {6360  width: 100%;6361  padding: 10px 12px;6362  background: rgba(255, 255, 255, 0.02);6363  border: 1px solid rgba(220, 38, 38, 0.4);6364  border-radius: 8px;6365  color: var(--peach-t1);6366  font-family: "IBM Plex Mono", monospace;6367  font-size: 14px;6368  letter-spacing: 0.12em;6369  text-transform: uppercase;6370}63716372.peach-panic-confirm-input:focus {6373  outline: none;6374  border-color: rgb(220, 38, 38);6375}63766377.peach-panic-confirm-input--match {6378  border-color: rgb(220, 38, 38);6379  color: rgb(220, 38, 38);6380}63816382.peach-panic-confirm-label {6383  font-size: 11px;6384  color: var(--peach-t2);6385  margin: 0 0 -8px;6386  letter-spacing: 0.06em;6387}63886389.peach-panic-actions {6390  display: flex;6391  flex-direction: column;6392  gap: 10px;6393  margin-top: auto;6394}63956396.peach-panic-button {6397  width: 100%;6398  padding: 12px;6399  border-radius: 8px;6400  font-size: 13px;6401  cursor: pointer;6402  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;6403}64046405.peach-panic-button--primary {6406  background: var(--peach-accent);6407  border: 1px solid var(--peach-accent);6408  color: #ffffff;6409  font-weight: 600;6410}64116412.peach-panic-button--primary:hover {6413  background: color-mix(in srgb, var(--peach-accent) 88%, white);6414}64156416.peach-panic-button--danger {6417  background: rgb(220, 38, 38);6418  border: 1px solid rgb(220, 38, 38);6419  color: #ffffff;6420  font-weight: 600;6421}64226423.peach-panic-button--danger:disabled {6424  opacity: 0.35;6425  cursor: not-allowed;6426}64276428.peach-panic-button--ghost {6429  background: transparent;6430  border: 1px solid rgba(255, 255, 255, 0.18);6431  color: var(--peach-t2);6432}64336434.peach-panic-button--ghost:hover {6435  border-color: rgba(255, 255, 255, 0.32);6436  color: var(--peach-t1);6437}64386439.peach-panic-link {6440  background: transparent;6441  border: none;6442  padding: 4px 0;6443  color: rgba(220, 38, 38, 0.65);6444  font-size: 12px;6445  cursor: pointer;6446  text-align: left;6447  text-decoration: underline;6448  text-underline-offset: 3px;6449}64506451.peach-panic-link:hover {6452  color: rgb(220, 38, 38);6453}64546455.peach-panic-bar {6456  background: rgb(220, 38, 38);6457  padding: 16px 20px;6458  margin: -28px -20px 0;6459  text-align: center;6460  font-size: 13px;6461  font-weight: 700;6462  letter-spacing: 0.12em;6463  color: #ffffff;6464}64656466.peach-panic-final-button {6467  width: 100%;6468  padding: 14px;6469  background: rgb(220, 38, 38);6470  border: none;6471  border-radius: 8px;6472  color: #ffffff;6473  font-size: 14px;6474  font-weight: 700;6475  letter-spacing: 0.08em;6476  text-transform: uppercase;6477  cursor: pointer;6478  animation: peach-panic-pulse 2s ease-in-out infinite;6479}64806481@keyframes peach-panic-pulse {6482  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }6483  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }6484}64856486[data-motion="reduce"] .peach-panic-final-button {6487  animation: none;6488}